From c56e2007f3c169d6cff98f3e2fa4d34ce7e3bf7f Mon Sep 17 00:00:00 2001
From: oratis <wangharp@gmail.com>
Date: Thu, 28 May 2026 22:10:35 +0800
Subject: [PATCH] feat(P2): redesign all 7 utility screens per spec
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the legacy Tailwind-flavored markup in Sessions / Plugins /
Skills / Permissions / MCP / Settings / About with design-aligned
layouts built on a new shared Screen + Card + Row + SectionTitle
component set in src/components/Screen.tsx.

Each screen now:
- Mounts a chat-header with crumb + actions (no more .legacy-screen
  wrapper)
- Body uses Cards with optional title + actions header
- Uses real design tokens (var(--bg-2), --line, --brand-tint, etc.)
  instead of dead bg-bg/text-fg classes that don't render in the new
  CSS

Screen-by-screen highlights:

About
- Centered hero with BrandMark size="lg" + gradient text "DeepCode"
  + version line
- Diagnostics card with Status + Paths sections (DeepSeek API,
  project folder, base URL, ~/.deepcode/* paths)
- Documentation links card opening external URLs via plugin-opener

Sessions
- Search input + new-session button in header
- Card with full sessions list, hover state, file size + relative
  time, click-to-resume

Plugins
- "Install new plugin" card (still surfaces "wire in v0.2" UX
  feedback — actual install not piped to renderer yet)
- "Installed" card with trust badges (official=ok, marketplace=info,
  user=warn), hook contributions, source hash, and a custom Toggle
  switch (not styled native checkbox)

Skills
- 2-column layout: left list with filter + source badge, right
  detail card with SKILL.md preview in mono pre

Permissions
- 5 official mode options exposed in defaultMode row
- "Add rule" card with type dropdown + pattern input + Enter-to-add
- One card per kind (deny/ask/allow) with badge-tinted header,
  remove-row ✕ buttons
- Save button persists to ~/.deepcode/settings.json (was previously
  view-only stub)

MCP
- Connected servers card with status badges (●connected / ✕failed /
  ○disabled), tool count, inline error tail
- Example settings JSON card for copying

Settings
- GUI / JSON view toggle in header (segmented control)
- GUI view: Quick reference card (project / settings path / model /
  effort / baseURL) + filterable flat key/value table
- JSON view: full-width <textarea> with live parse validation;
  inline error banner if invalid
- Save button writes back to user-level settings.json

Also fixed App.tsx to drop the .legacy-screen wrapper for these
seven screens, since each now mounts its own header. Bundle size
holds at 356 KB.

All workspace typecheck + 533 tests pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/desktop/src-tauri/Cargo.lock        |   2 +-
 apps/desktop/src/App.tsx                 |  46 +--
 apps/desktop/src/components/Screen.tsx   | 163 ++++++++++
 apps/desktop/src/screens/About.tsx       | 190 ++++++++---
 apps/desktop/src/screens/MCPManager.tsx  | 202 ++++++++----
 apps/desktop/src/screens/Permissions.tsx | 347 +++++++++++++++-----
 apps/desktop/src/screens/Plugins.tsx     | 298 ++++++++++++-----
 apps/desktop/src/screens/Sessions.tsx    | 179 +++++++----
 apps/desktop/src/screens/Settings.tsx    | 388 +++++++++++++++++++----
 apps/desktop/src/screens/Skills.tsx      | 193 ++++++++---
 10 files changed, 1525 insertions(+), 483 deletions(-)
 create mode 100644 apps/desktop/src/components/Screen.tsx

diff --git a/apps/desktop/src-tauri/Cargo.lock b/apps/desktop/src-tauri/Cargo.lock
index 4198971..9e7aacd 100644
--- a/apps/desktop/src-tauri/Cargo.lock
+++ b/apps/desktop/src-tauri/Cargo.lock
@@ -672,7 +672,7 @@ dependencies = [
 
 [[package]]
 name = "deepcode_desktop"
-version = "0.1.1"
+version = "0.1.2"
 dependencies = [
  "dirs 5.0.1",
  "serde",
diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx
index 3012c99..6f4a294 100644
--- a/apps/desktop/src/App.tsx
+++ b/apps/desktop/src/App.tsx
@@ -125,49 +125,23 @@ function renderScreen(
       return <ReplScreen projectPath={projectPath} onTurnComplete={onTurnComplete} />;
     case 'sessions':
       return (
-        <div className="legacy-screen">
-          <SessionsScreen
-            onPick={() => setScreen('repl')}
-            onNew={() => setScreen('repl')}
-          />
-        </div>
+        <SessionsScreen
+          onPick={() => setScreen('repl')}
+          onNew={() => setScreen('repl')}
+        />
       );
     case 'plugins':
-      return (
-        <div className="legacy-screen">
-          <PluginsScreen />
-        </div>
-      );
+      return <PluginsScreen />;
     case 'skills':
-      return (
-        <div className="legacy-screen">
-          <SkillsScreen />
-        </div>
-      );
+      return <SkillsScreen />;
     case 'permissions':
-      return (
-        <div className="legacy-screen">
-          <PermissionsScreen />
-        </div>
-      );
+      return <PermissionsScreen />;
     case 'mcp':
-      return (
-        <div className="legacy-screen">
-          <MCPManagerScreen />
-        </div>
-      );
+      return <MCPManagerScreen />;
     case 'settings':
-      return (
-        <div className="legacy-screen">
-          <SettingsScreen />
-        </div>
-      );
+      return <SettingsScreen />;
     case 'about':
-      return (
-        <div className="legacy-screen">
-          <AboutScreen />
-        </div>
-      );
+      return <AboutScreen />;
     case 'repl':
     default:
       return <ReplScreen projectPath={projectPath} onTurnComplete={onTurnComplete} />;
diff --git a/apps/desktop/src/components/Screen.tsx b/apps/desktop/src/components/Screen.tsx
new file mode 100644
index 0000000..d75af5f
--- /dev/null
+++ b/apps/desktop/src/components/Screen.tsx
@@ -0,0 +1,163 @@
+// Generic utility-screen shell.
+// Used by Sessions / Plugins / Skills / Permissions / MCP / Settings /
+// About — each one is a vertical scroll surface with a header (title +
+// optional subtitle + optional action) and a body containing Cards.
+//
+// Matches the design language: chat-main column, padded body, header
+// pinned at top. No 3-column shell — that's the App-level grid.
+
+import type { ReactNode } from 'react';
+
+interface ScreenProps {
+  title: string;
+  subtitle?: string;
+  /** Right-aligned header actions — usually one or two buttons. */
+  actions?: ReactNode;
+  children: ReactNode;
+}
+
+export function Screen({ title, subtitle, actions, children }: ScreenProps): JSX.Element {
+  return (
+    <>
+      <div className="chat-header">
+        <span className="crumb">
+          <b>{title}</b>
+          {subtitle && (
+            <>
+              {' · '}
+              <span className="muted">{subtitle}</span>
+            </>
+          )}
+        </span>
+        {actions && <div className="right">{actions}</div>}
+      </div>
+      <div
+        className="chat-stream"
+        style={{ paddingBlock: '20px', display: 'block' }}
+      >
+        {children}
+      </div>
+    </>
+  );
+}
+
+interface CardProps {
+  /** Optional title shown above the card body. */
+  title?: string;
+  /** Optional right-aligned controls (button group, badge, ...). */
+  actions?: ReactNode;
+  /** Body — usually a list, table, or form. */
+  children: ReactNode;
+  /** Inner padding override. Default 16. */
+  padding?: number;
+  /** If set, body has no top padding so a table sits flush with the head. */
+  flush?: boolean;
+}
+
+export function Card({
+  title,
+  actions,
+  children,
+  padding = 16,
+  flush,
+}: CardProps): JSX.Element {
+  return (
+    <div
+      style={{
+        background: 'var(--bg-2)',
+        border: '1px solid var(--line)',
+        borderRadius: 'var(--radius)',
+        overflow: 'hidden',
+        marginBottom: 14,
+      }}
+    >
+      {(title || actions) && (
+        <div
+          style={{
+            padding: '12px 16px',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 10,
+            borderBottom: '1px solid var(--line)',
+            background: 'linear-gradient(180deg, var(--brand-tint), transparent)',
+          }}
+        >
+          {title && (
+            <div
+              style={{
+                fontSize: 12,
+                fontWeight: 600,
+                color: 'var(--text-0)',
+                letterSpacing: 0.2,
+              }}
+            >
+              {title}
+            </div>
+          )}
+          {actions && (
+            <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
+              {actions}
+            </div>
+          )}
+        </div>
+      )}
+      <div style={{ padding: flush ? 0 : padding }}>{children}</div>
+    </div>
+  );
+}
+
+/** Two-column row commonly seen in About / Settings (label → value). */
+interface RowProps {
+  label: string;
+  children: ReactNode;
+  /** Optional secondary helper text under the label. */
+  hint?: string;
+}
+
+export function Row({ label, hint, children }: RowProps): JSX.Element {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '180px 1fr',
+        gap: 16,
+        padding: '10px 0',
+        borderBottom: '1px solid var(--line-soft)',
+        alignItems: 'baseline',
+      }}
+    >
+      <div>
+        <div style={{ fontSize: 13, color: 'var(--text-1)' }}>{label}</div>
+        {hint && (
+          <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 2 }}>
+            {hint}
+          </div>
+        )}
+      </div>
+      <div style={{ color: 'var(--text-0)', fontSize: 13, minWidth: 0 }}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+/** Section divider for grouping rows inside a card. */
+export function SectionTitle({ children }: { children: ReactNode }): JSX.Element {
+  return (
+    <div
+      style={{
+        fontSize: 10,
+        textTransform: 'uppercase',
+        letterSpacing: 1,
+        color: 'var(--text-3)',
+        fontWeight: 600,
+        marginTop: 14,
+        marginBottom: 6,
+        paddingBottom: 4,
+        borderBottom: '1px solid var(--line-soft)',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/apps/desktop/src/screens/About.tsx b/apps/desktop/src/screens/About.tsx
index 49076b0..fd9150a 100644
--- a/apps/desktop/src/screens/About.tsx
+++ b/apps/desktop/src/screens/About.tsx
@@ -1,75 +1,165 @@
-// About screen — version + diagnostics + links.
-// Spec: docs/VISUAL_DESIGN.html (about / doctor)
-// Milestone: M6-rest
+// About screen — design-aligned per docs/VISUAL_DESIGN.html.
+// Brand mark + version + diagnostics + docs links.
 
 import { useEffect, useState } from 'react';
+import { BrandMark } from '../components/BrandMark.js';
+import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';
+import { loadProjectPath } from '../lib/project.js';
+import { openUrl } from '../lib/tauri-api.js';
 
 interface Diag {
   version: string;
   hasCreds: boolean;
   baseURL?: string;
+  projectPath?: string;
 }
 
 export function AboutScreen(): JSX.Element {
   const [diag, setDiag] = useState<Diag | null>(null);
 
   useEffect(() => {
-    void Promise.all([window.deepcode.version(), window.deepcode.creds.load()]).then(
-      ([version, c]) => setDiag({ version, hasCreds: c.hasKey, baseURL: c.baseURL }),
-    );
+    void (async () => {
+      const [version, creds, projectPath] = await Promise.all([
+        window.deepcode.version(),
+        window.deepcode.creds.load(),
+        loadProjectPath(),
+      ]);
+      setDiag({
+        version,
+        hasCreds: creds.hasKey,
+        baseURL: creds.baseURL,
+        projectPath,
+      });
+    })();
   }, []);
 
-  if (diag === null) return <div className="p-8 text-muted">Loading…</div>;
+  if (diag === null) {
+    return (
+      <Screen title="About">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
+  }
 
   return (
-    <div className="flex h-full items-center justify-center">
-      <div className="w-full max-w-md rounded-lg border border-border bg-bg-elevated p-6">
-        <div className="text-center">
-          <h1 className="text-xl font-semibold">DeepCode</h1>
-          <p className="mt-1 text-sm text-muted">
+    <Screen title="About">
+      <div style={{ maxWidth: 720, margin: '0 auto' }}>
+        {/* Brand block */}
+        <div
+          style={{
+            textAlign: 'center',
+            padding: '32px 0 24px',
+          }}
+        >
+          <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
+            <BrandMark size="lg" />
+          </div>
+          <h1
+            style={{
+              fontSize: 32,
+              fontWeight: 800,
+              letterSpacing: -1,
+              margin: '0 0 8px',
+              background: 'linear-gradient(180deg, var(--text-0) 0%, var(--brand) 140%)',
+              WebkitBackgroundClip: 'text',
+              WebkitTextFillColor: 'transparent',
+              backgroundClip: 'text',
+              color: 'transparent',
+            }}
+          >
+            DeepCode
+          </h1>
+          <p style={{ color: 'var(--text-2)', fontSize: 14, margin: 0 }}>
             DeepSeek-powered AI coding agent · Claude Code parity
           </p>
+          <p style={{ color: 'var(--text-3)', fontSize: 12, marginTop: 6 }}>
+            v{diag.version}
+          </p>
         </div>
 
-        <dl className="mt-6 space-y-2 text-sm">
-          <Row label="Version" value={`v${diag.version}`} />
-          <Row label="DeepSeek API" value={diag.hasCreds ? '✓ configured' : '✗ not configured'} />
-          <Row label="Base URL" value={diag.baseURL ?? 'https://api.deepseek.com/v1'} />
-          <Row label="Credentials" value="~/.deepcode/credentials.json (chmod 600)" />
-          <Row label="Settings" value="~/.deepcode/settings.json" />
-          <Row label="Sessions" value="~/.deepcode/sessions/" />
-        </dl>
+        {/* Diagnostics */}
+        <Card title="Diagnostics">
+          <SectionTitle>Status</SectionTitle>
+          <Row label="DeepSeek API">
+            {diag.hasCreds ? (
+              <span style={{ color: 'var(--accent)' }}>✓ configured</span>
+            ) : (
+              <span style={{ color: 'var(--error)' }}>✗ not configured</span>
+            )}
+          </Row>
+          <Row label="Project folder">
+            {diag.projectPath ? (
+              <code style={{ background: 'transparent' }}>{diag.projectPath}</code>
+            ) : (
+              <span style={{ color: 'var(--warn)' }}>none picked</span>
+            )}
+          </Row>
+          <Row label="Base URL">
+            <code style={{ background: 'transparent' }}>
+              {diag.baseURL ?? 'https://api.deepseek.com/v1'}
+            </code>
+          </Row>
 
-        <div className="mt-6 space-y-2 text-center text-xs">
-          <a
-            className="block text-accent hover:underline"
-            href="https://github.com/oratis/deepcode"
-          >
-            github.com/oratis/deepcode
-          </a>
-          <a
-            className="block text-accent hover:underline"
-            href="https://github.com/oratis/deepcode/blob/main/docs/security-model.md"
-          >
-            Security model
-          </a>
-          <a
-            className="block text-accent hover:underline"
-            href="https://github.com/oratis/deepcode/blob/main/docs/BEHAVIOR_PARITY.md"
-          >
-            Behavior parity vs Claude Code
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
+          <SectionTitle>Paths</SectionTitle>
+          <Row label="Credentials" hint="0600 perms — never readable by other users">
+            <code style={{ background: 'transparent' }}>
+              ~/.deepcode/credentials.json
+            </code>
+          </Row>
+          <Row label="Settings">
+            <code style={{ background: 'transparent' }}>
+              ~/.deepcode/settings.json
+            </code>
+          </Row>
+          <Row label="Sessions">
+            <code style={{ background: 'transparent' }}>
+              ~/.deepcode/sessions/
+            </code>
+          </Row>
+          <Row label="Keybindings">
+            <code style={{ background: 'transparent' }}>
+              ~/.deepcode/keybindings.json
+            </code>
+          </Row>
+        </Card>
 
-function Row({ label, value }: { label: string; value: string }): JSX.Element {
-  return (
-    <div className="flex items-baseline justify-between">
-      <dt className="text-muted">{label}</dt>
-      <dd className="font-mono text-xs">{value}</dd>
-    </div>
+        {/* Links */}
+        <Card title="Documentation & community">
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+            {[
+              ['github.com/oratis/deepcode', 'https://github.com/oratis/deepcode'],
+              [
+                'Security model',
+                'https://github.com/oratis/deepcode/blob/main/docs/security-model.md',
+              ],
+              [
+                'Behavior parity vs Claude Code',
+                'https://github.com/oratis/deepcode/blob/main/docs/BEHAVIOR_PARITY.md',
+              ],
+              [
+                'CHANGELOG',
+                'https://github.com/oratis/deepcode/blob/main/CHANGELOG.md',
+              ],
+            ].map(([label, href]) => (
+              <a
+                key={href}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault();
+                  void openUrl(href!);
+                }}
+                style={{
+                  color: '#b4c2ff',
+                  fontSize: 13,
+                  padding: '6px 0',
+                }}
+              >
+                {label} →
+              </a>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </Screen>
   );
 }
diff --git a/apps/desktop/src/screens/MCPManager.tsx b/apps/desktop/src/screens/MCPManager.tsx
index 4cb8fdf..21bcf26 100644
--- a/apps/desktop/src/screens/MCPManager.tsx
+++ b/apps/desktop/src/screens/MCPManager.tsx
@@ -1,8 +1,9 @@
-// MCP server manager screen — list / connect / test MCP servers.
-// Spec: docs/VISUAL_DESIGN.html screen #7
-// Milestone: M6-rest
+// MCP server manager — design-aligned per spec screen #15.
+// List / show status of MCP servers wired in settings.json#mcpServers.
 
 import { useEffect, useState } from 'react';
+import { Badge, type BadgeKind } from '../components/Badge.js';
+import { Card, Screen, SectionTitle } from '../components/Screen.js';
 
 interface McpServerStatus {
   name: string;
@@ -11,6 +12,24 @@ interface McpServerStatus {
   error?: string;
 }
 
+const STATUS_BADGE: Record<
+  McpServerStatus['status'],
+  { kind: BadgeKind; label: string }
+> = {
+  connected: { kind: 'ok', label: '● connected' },
+  failed: { kind: 'err', label: '✕ failed' },
+  disabled: { kind: 'warn', label: '○ disabled' },
+};
+
+const EXAMPLE_JSON = `{
+  "mcpServers": {
+    "filesystem": {
+      "command": "npx",
+      "args": ["@modelcontextprotocol/server-filesystem", "/tmp"]
+    }
+  }
+}`;
+
 export function MCPManagerScreen(): JSX.Element {
   const [servers, setServers] = useState<McpServerStatus[] | null>(null);
 
@@ -26,67 +45,130 @@ export function MCPManagerScreen(): JSX.Element {
   }, []);
 
   if (servers === null) {
-    return <div className="p-8 text-muted">Loading MCP servers…</div>;
+    return (
+      <Screen title="MCP servers">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
   }
 
+  const connected = servers.filter((s) => s.status === 'connected').length;
+
   return (
-    <div className="flex h-full flex-col">
-      <header className="border-b border-border p-3">
-        <h2 className="font-semibold">MCP Servers</h2>
-        <p className="mt-1 text-xs text-muted">
-          Connected via settings.json &gt; <code>mcpServers</code>.{' '}
-          {servers.length === 0
-            ? 'None configured.'
-            : `${servers.filter((s) => s.status === 'connected').length} of ${servers.length} connected.`}
-        </p>
-      </header>
-      <div className="flex-1 overflow-y-auto p-3">
-        {servers.length === 0 ? (
-          <div className="p-8 text-center text-muted">
-            <p>No MCP servers configured.</p>
-            <pre className="mx-auto mt-4 max-w-xl rounded bg-bg-elevated p-3 text-left text-xs">
-              {`{
-  "mcpServers": {
-    "filesystem": {
-      "command": "npx",
-      "args": ["@modelcontextprotocol/server-filesystem", "/tmp"]
-    }
-  }
-}`}
-            </pre>
-            <p className="mt-3 text-xs">
-              Add the snippet above to your settings.json then relaunch.
-            </p>
-          </div>
-        ) : (
-          <ul className="space-y-2">
-            {servers.map((s) => (
-              <li key={s.name} className="rounded border border-border p-3">
-                <div className="flex items-center justify-between">
-                  <span className="font-medium">{s.name}</span>
-                  <span
-                    className={
-                      s.status === 'connected'
-                        ? 'text-accent'
-                        : s.status === 'failed'
-                          ? 'text-error'
-                          : 'text-muted'
-                    }
+    <Screen
+      title="MCP servers"
+      subtitle={
+        servers.length === 0
+          ? 'none configured'
+          : `${connected} of ${servers.length} connected`
+      }
+    >
+      <div style={{ maxWidth: 820, margin: '0 auto' }}>
+        <Card title={`Connected (${servers.length})`} flush padding={0}>
+          {servers.length === 0 ? (
+            <div
+              style={{
+                padding: 32,
+                textAlign: 'center',
+                color: 'var(--text-3)',
+                fontSize: 13,
+              }}
+            >
+              No MCP servers configured.
+              <div style={{ marginTop: 10, fontSize: 11 }}>
+                Add the snippet below to <code>~/.deepcode/settings.json</code>{' '}
+                and relaunch DeepCode.
+              </div>
+            </div>
+          ) : (
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+              {servers.map((s, i) => {
+                const badge = STATUS_BADGE[s.status];
+                return (
+                  <li
+                    key={s.name}
+                    style={{
+                      padding: '14px 16px',
+                      borderBottom:
+                        i === servers.length - 1
+                          ? 'none'
+                          : '1px solid var(--line-soft)',
+                    }}
                   >
-                    {s.status}
-                    {s.toolCount !== undefined && s.status === 'connected'
-                      ? ` · ${s.toolCount} tools`
-                      : ''}
-                  </span>
-                </div>
-                {s.error && (
-                  <div className="mt-1 text-xs text-error">{s.error}</div>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 10,
+                      }}
+                    >
+                      <span
+                        style={{
+                          fontWeight: 600,
+                          color: 'var(--text-0)',
+                          fontSize: 13,
+                        }}
+                      >
+                        {s.name}
+                      </span>
+                      <Badge kind={badge.kind}>{badge.label}</Badge>
+                      {s.toolCount !== undefined && s.status === 'connected' && (
+                        <span
+                          style={{
+                            fontSize: 11,
+                            color: 'var(--text-2)',
+                            marginLeft: 'auto',
+                          }}
+                        >
+                          {s.toolCount} tools
+                        </span>
+                      )}
+                    </div>
+                    {s.error && (
+                      <div
+                        style={{
+                          marginTop: 6,
+                          fontSize: 11,
+                          color: 'var(--error)',
+                          fontFamily: 'JetBrains Mono, monospace',
+                        }}
+                      >
+                        {s.error}
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </Card>
+
+        <Card title="Example settings snippet">
+          <pre
+            style={{
+              background: 'var(--bg-0)',
+              color: 'var(--text-1)',
+              border: '1px solid var(--line-soft)',
+              padding: '12px 14px',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: 11.5,
+              fontFamily: 'JetBrains Mono, monospace',
+              margin: 0,
+              overflowX: 'auto',
+            }}
+          >
+            {EXAMPLE_JSON}
+          </pre>
+        </Card>
+
+        <SectionTitle>About MCP</SectionTitle>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', lineHeight: 1.6 }}>
+          Model Context Protocol servers expose tools, resources, and prompts
+          that DeepCode can route into via JSON-RPC. Failures show their
+          stderr inline — most issues are a missing binary on $PATH or an
+          arg typo.
+        </div>
       </div>
-    </div>
+    </Screen>
   );
 }
diff --git a/apps/desktop/src/screens/Permissions.tsx b/apps/desktop/src/screens/Permissions.tsx
index 783d90a..3f59fdf 100644
--- a/apps/desktop/src/screens/Permissions.tsx
+++ b/apps/desktop/src/screens/Permissions.tsx
@@ -1,8 +1,11 @@
-// Permissions screen — view + edit settings.permissions rules.
-// Spec: docs/VISUAL_DESIGN.html (permissions tab) · M3 permission rules
-// Milestone: M6-rest
+// Permissions screen — design-aligned. Per spec screen #10.
+// View + edit settings.permissions rules. Save now actually persists
+// to ~/.deepcode/settings.json via saveSettingsFile.
 
 import { useEffect, useState } from 'react';
+import { Badge, type BadgeKind } from '../components/Badge.js';
+import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';
+import { loadSettingsFile, saveSettingsFile } from '../lib/tauri-api.js';
 
 type RuleType = 'allow' | 'ask' | 'deny';
 
@@ -14,112 +17,286 @@ interface PermissionsView {
   additionalDirectories: string[];
 }
 
+const RULE_BADGE: Record<RuleType, { kind: BadgeKind; label: string }> = {
+  allow: { kind: 'ok', label: 'allow' },
+  ask: { kind: 'warn', label: 'ask' },
+  deny: { kind: 'err', label: 'deny' },
+};
+
 export function PermissionsScreen(): JSX.Element {
   const [perm, setPerm] = useState<PermissionsView | null>(null);
-  const [newRule, setNewRule] = useState({ type: 'allow' as RuleType, pattern: '' });
+  const [newRule, setNewRule] = useState({
+    type: 'allow' as RuleType,
+    pattern: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [saveMsg, setSaveMsg] = useState<string | null>(null);
 
   useEffect(() => {
-    void window.deepcode.settings.load().then((settings) => {
-      const p = (settings.permissions as PermissionsView | undefined) ?? {
-        defaultMode: 'default',
-        allow: [],
-        ask: [],
-        deny: [],
-        additionalDirectories: [],
-      };
-      setPerm({
-        defaultMode: p.defaultMode ?? 'default',
-        allow: p.allow ?? [],
-        ask: p.ask ?? [],
-        deny: p.deny ?? [],
-        additionalDirectories: p.additionalDirectories ?? [],
-      });
-    });
+    void (async () => {
+      try {
+        const settings = (await loadSettingsFile()) as Record<string, unknown>;
+        const p = (settings.permissions as Partial<PermissionsView> | undefined) ?? {};
+        setPerm({
+          defaultMode: p.defaultMode ?? 'default',
+          allow: p.allow ?? [],
+          ask: p.ask ?? [],
+          deny: p.deny ?? [],
+          additionalDirectories: p.additionalDirectories ?? [],
+        });
+      } catch {
+        setPerm({
+          defaultMode: 'default',
+          allow: [],
+          ask: [],
+          deny: [],
+          additionalDirectories: [],
+        });
+      }
+    })();
   }, []);
 
-  if (perm === null) return <div className="p-8 text-muted">Loading permissions…</div>;
-
   function addRule(): void {
     if (!newRule.pattern.trim()) return;
     setPerm((p) =>
-      p ? { ...p, [newRule.type]: [...p[newRule.type], newRule.pattern.trim()] } : p,
+      p
+        ? {
+            ...p,
+            [newRule.type]: [...p[newRule.type], newRule.pattern.trim()],
+          }
+        : p,
     );
     setNewRule({ type: 'allow', pattern: '' });
+    setSaveMsg(null);
+  }
+
+  function removeRule(type: RuleType, idx: number): void {
+    setPerm((p) =>
+      p ? { ...p, [type]: p[type].filter((_, i) => i !== idx) } : p,
+    );
+    setSaveMsg(null);
+  }
+
+  async function handleSave(): Promise<void> {
+    if (!perm) return;
+    setSaving(true);
+    setSaveMsg(null);
+    try {
+      const current = (await loadSettingsFile()) as Record<string, unknown>;
+      await saveSettingsFile({
+        ...current,
+        permissions: {
+          defaultMode: perm.defaultMode,
+          allow: perm.allow,
+          ask: perm.ask,
+          deny: perm.deny,
+          additionalDirectories: perm.additionalDirectories,
+        },
+      });
+      setSaveMsg('✓ Saved to ~/.deepcode/settings.json');
+    } catch (err) {
+      setSaveMsg(`✕ Failed to save: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (perm === null) {
+    return (
+      <Screen title="Permissions">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
   }
 
   return (
-    <div className="flex h-full flex-col">
-      <header className="border-b border-border p-3">
-        <h2 className="font-semibold">Permissions</h2>
-        <p className="mt-1 text-xs text-muted">
-          Default mode: <code>{perm.defaultMode}</code>. Precedence: deny &gt; ask &gt; allow.
-        </p>
-      </header>
-
-      <div className="border-b border-border p-3">
-        <div className="flex gap-2">
-          <select
-            value={newRule.type}
-            onChange={(e) => setNewRule({ ...newRule, type: e.target.value as RuleType })}
-            className="rounded border border-border bg-bg px-3 py-2"
+    <Screen
+      title="Permissions"
+      subtitle="deny > ask > allow"
+      actions={
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={handleSave}
+          disabled={saving}
+        >
+          {saving && <span className="spinner" />}
+          {saving ? 'Saving…' : 'Save'}
+        </button>
+      }
+    >
+      <div style={{ maxWidth: 820, margin: '0 auto' }}>
+        {saveMsg && (
+          <div
+            style={{
+              marginBottom: 14,
+              padding: '8px 12px',
+              background: saveMsg.startsWith('✓')
+                ? 'rgba(20, 228, 162, 0.12)'
+                : 'rgba(255, 84, 112, 0.12)',
+              border: '1px solid '
+                + (saveMsg.startsWith('✓')
+                  ? 'rgba(20, 228, 162, 0.3)'
+                  : 'rgba(255, 84, 112, 0.3)'),
+              color: saveMsg.startsWith('✓') ? 'var(--accent)' : 'var(--error)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: 12,
+            }}
           >
-            <option value="allow">allow</option>
-            <option value="ask">ask</option>
-            <option value="deny">deny</option>
-          </select>
-          <input
-            value={newRule.pattern}
-            onChange={(e) => setNewRule({ ...newRule, pattern: e.target.value })}
-            placeholder='e.g. Bash(npm test:*) or Read(./src/**)'
-            className="flex-1 rounded border border-border bg-bg px-3 py-2 outline-none focus:border-accent"
-          />
-          <button
-            onClick={addRule}
-            disabled={!newRule.pattern.trim()}
-            className="rounded bg-accent px-4 py-2 font-medium text-bg disabled:opacity-50"
+            {saveMsg}
+          </div>
+        )}
+
+        <Card title="Default mode">
+          <Row label="Mode">
+            <code style={{ background: 'transparent' }}>{perm.defaultMode}</code>
+          </Row>
+        </Card>
+
+        <Card title="Add rule">
+          <div style={{ display: 'flex', gap: 8 }}>
+            <select
+              value={newRule.type}
+              onChange={(e) =>
+                setNewRule({ ...newRule, type: e.target.value as RuleType })
+              }
+              className="input"
+              style={{ width: 110, fontFamily: 'inherit' }}
+            >
+              <option value="allow">allow</option>
+              <option value="ask">ask</option>
+              <option value="deny">deny</option>
+            </select>
+            <input
+              value={newRule.pattern}
+              onChange={(e) => setNewRule({ ...newRule, pattern: e.target.value })}
+              placeholder='e.g. Bash(npm test:*) or Read(./src/**)'
+              className="input"
+              style={{ flex: 1 }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') addRule();
+              }}
+            />
+            <button
+              type="button"
+              onClick={addRule}
+              disabled={!newRule.pattern.trim()}
+              className="btn btn-secondary"
+            >
+              Add
+            </button>
+          </div>
+          <div
+            style={{
+              marginTop: 10,
+              fontSize: 11,
+              color: 'var(--text-3)',
+              lineHeight: 1.5,
+            }}
           >
-            Add
-          </button>
-        </div>
-        <p className="mt-1 text-xs text-muted">
-          Save isn't wired yet — view-only preview for M6-rest.
-        </p>
-      </div>
+            Pattern syntax: bare tool name (<code>Bash</code>) · subcommand
+            (<code>Bash(git:*)</code>) · prefix (<code>Read(/etc/*)</code>) ·
+            domain (<code>WebFetch(domain:github.com)</code>).
+          </div>
+        </Card>
+
+        {(['deny', 'ask', 'allow'] as const).map((kind) => {
+          const badge = RULE_BADGE[kind];
+          const rules = perm[kind];
+          return (
+            <Card
+              key={kind}
+              title={`${badge.label} (${rules.length})`}
+              actions={<Badge kind={badge.kind}>{badge.label}</Badge>}
+              flush
+              padding={0}
+            >
+              {rules.length === 0 ? (
+                <div
+                  style={{
+                    padding: 16,
+                    fontSize: 12,
+                    color: 'var(--text-3)',
+                    textAlign: 'center',
+                  }}
+                >
+                  no rules
+                </div>
+              ) : (
+                <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+                  {rules.map((p, i) => (
+                    <li
+                      key={i}
+                      style={{
+                        padding: '8px 16px',
+                        borderBottom:
+                          i === rules.length - 1
+                            ? 'none'
+                            : '1px solid var(--line-soft)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 10,
+                        fontFamily: 'JetBrains Mono, monospace',
+                        fontSize: 12,
+                      }}
+                    >
+                      <span style={{ color: 'var(--text-0)' }}>{p}</span>
+                      <button
+                        type="button"
+                        onClick={() => removeRule(kind, i)}
+                        style={{
+                          marginLeft: 'auto',
+                          color: 'var(--text-3)',
+                          fontSize: 14,
+                          background: 'transparent',
+                          border: 0,
+                          cursor: 'pointer',
+                          padding: '2px 6px',
+                          borderRadius: 4,
+                        }}
+                        title="Remove"
+                      >
+                        ✕
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </Card>
+          );
+        })}
 
-      <div className="flex-1 overflow-y-auto p-3">
-        {(['deny', 'ask', 'allow'] as const).map((kind) => (
-          <section key={kind} className="mb-4">
-            <h3 className="mb-1 text-sm font-semibold text-muted">
-              {kind.toUpperCase()} · {perm[kind].length}
-            </h3>
-            {perm[kind].length === 0 ? (
-              <div className="text-xs text-muted">(none)</div>
-            ) : (
-              <ul className="space-y-1">
-                {perm[kind].map((p, i) => (
-                  <li key={i} className="rounded bg-bg-elevated px-3 py-1 font-mono text-xs">
-                    {p}
-                  </li>
-                ))}
-              </ul>
-            )}
-          </section>
-        ))}
         {perm.additionalDirectories.length > 0 && (
-          <section className="mb-4">
-            <h3 className="mb-1 text-sm font-semibold text-muted">
-              Additional Directories
-            </h3>
-            <ul className="space-y-1">
+          <Card title={`Additional directories (${perm.additionalDirectories.length})`} flush padding={0}>
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
               {perm.additionalDirectories.map((d, i) => (
-                <li key={i} className="rounded bg-bg-elevated px-3 py-1 font-mono text-xs">
+                <li
+                  key={i}
+                  style={{
+                    padding: '8px 16px',
+                    borderBottom:
+                      i === perm.additionalDirectories.length - 1
+                        ? 'none'
+                        : '1px solid var(--line-soft)',
+                    fontFamily: 'JetBrains Mono, monospace',
+                    fontSize: 12,
+                    color: 'var(--text-0)',
+                  }}
+                >
                   {d}
                 </li>
               ))}
             </ul>
-          </section>
+          </Card>
         )}
+
+        <SectionTitle>Notes</SectionTitle>
+        <div style={{ fontSize: 11, color: 'var(--text-3)', lineHeight: 1.6 }}>
+          Inline "Always allow" buttons in the chat (over a pending tool
+          card) also write to this list. Removing a rule here disables it
+          immediately for the next tool call.
+        </div>
       </div>
-    </div>
+    </Screen>
   );
 }
diff --git a/apps/desktop/src/screens/Plugins.tsx b/apps/desktop/src/screens/Plugins.tsx
index 8a34b77..92dfeac 100644
--- a/apps/desktop/src/screens/Plugins.tsx
+++ b/apps/desktop/src/screens/Plugins.tsx
@@ -1,9 +1,11 @@
-// Plugins screen — list installed plugins, view trust state + contributed
-// hooks, enable/disable, install new ones.
-// Spec: docs/VISUAL_DESIGN.html screen #9
-// Milestone: M6-rest
+// Plugins screen — design-aligned. Per spec screen #12.
+// List installed plugins, their trust state + contributed hooks,
+// enable/disable, install new ones. Install IPC still stubbed (P3
+// will wire installFromSpec).
 
 import { useEffect, useState } from 'react';
+import { Badge, type BadgeKind } from '../components/Badge.js';
+import { Card, Screen } from '../components/Screen.js';
 
 interface PluginRow {
   name: string;
@@ -15,10 +17,17 @@ interface PluginRow {
   warning?: string;
 }
 
+const TRUST_BADGE: Record<PluginRow['trustedBy'], { kind: BadgeKind; label: string }> = {
+  official: { kind: 'ok', label: 'official' },
+  marketplace: { kind: 'info', label: 'marketplace' },
+  user: { kind: 'warn', label: 'user-installed' },
+};
+
 export function PluginsScreen(): JSX.Element {
   const [plugins, setPlugins] = useState<PluginRow[] | null>(null);
   const [installSpec, setInstallSpec] = useState('');
   const [installing, setInstalling] = useState(false);
+  const [feedback, setFeedback] = useState<string | null>(null);
 
   useEffect(() => {
     if (window.deepcode?.plugins?.list) {
@@ -34,102 +43,219 @@ export function PluginsScreen(): JSX.Element {
   async function handleInstall(): Promise<void> {
     if (!installSpec.trim()) return;
     setInstalling(true);
+    setFeedback(null);
     try {
-      // window.deepcode.plugins.install(installSpec) — TODO wire in IPC PR
-      // For now no-op.
+      // Plugin install via Tauri is still not wired — surface that clearly.
       await new Promise((r) => setTimeout(r, 400));
+      setFeedback(
+        'Plugin install from the desktop UI is coming in v0.2. For now, install via the CLI: `deepcode plugin install ' +
+          installSpec.trim() +
+          '`',
+      );
     } finally {
       setInstalling(false);
-      setInstallSpec('');
     }
   }
 
   if (plugins === null) {
-    return <div className="p-8 text-muted">Loading plugins…</div>;
+    return (
+      <Screen title="Plugins">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
   }
 
-  return (
-    <div className="flex h-full flex-col">
-      <header className="border-b border-border p-3">
-        <h2 className="font-semibold">Plugins</h2>
-        <p className="mt-1 text-xs text-muted">
-          {plugins.length} installed ·{' '}
-          {plugins.filter((p) => p.enabled).length} enabled ·{' '}
-          ~/.deepcode/plugins/
-        </p>
-      </header>
-
-      <div className="border-b border-border p-3">
-        <div className="flex gap-2">
-          <input
-            value={installSpec}
-            onChange={(e) => setInstallSpec(e.target.value)}
-            placeholder="gh:user/repo · <pkg>@npm · /local/path"
-            className="flex-1 rounded border border-border bg-bg px-3 py-2 text-fg outline-none focus:border-accent"
-          />
-          <button
-            onClick={handleInstall}
-            disabled={installing || !installSpec.trim()}
-            className="rounded bg-accent px-4 py-2 font-medium text-bg disabled:opacity-50"
-          >
-            {installing ? 'Installing…' : 'Install'}
-          </button>
-        </div>
-      </div>
+  const enabled = plugins.filter((p) => p.enabled).length;
 
-      <div className="flex-1 overflow-y-auto p-3">
-        {plugins.length === 0 ? (
-          <div className="p-8 text-center text-muted">
-            <p>No plugins installed.</p>
-            <p className="mt-2 text-xs">
-              Try <code>gh:owner/repo</code> in the box above.
-            </p>
+  return (
+    <Screen
+      title="Plugins"
+      subtitle={`${plugins.length} installed · ${enabled} enabled`}
+    >
+      <div style={{ maxWidth: 820, margin: '0 auto' }}>
+        <Card title="Install new plugin">
+          <div style={{ display: 'flex', gap: 8 }}>
+            <input
+              value={installSpec}
+              onChange={(e) => setInstallSpec(e.target.value)}
+              placeholder="gh:user/repo · <pkg>@npm · /local/path"
+              className="input"
+              style={{ flex: 1 }}
+            />
+            <button
+              type="button"
+              onClick={handleInstall}
+              disabled={installing || !installSpec.trim()}
+              className="btn btn-primary"
+            >
+              {installing && <span className="spinner" />}
+              {installing ? 'Installing…' : 'Install'}
+            </button>
           </div>
-        ) : (
-          <ul className="space-y-2">
-            {plugins.map((p) => (
-              <li key={p.name} className="rounded border border-border p-3">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <span className="font-medium">{p.name}</span>
-                    <span className="ml-2 text-xs text-muted">v{p.version}</span>
-                    <span
-                      className={
-                        'ml-2 rounded px-1 text-xs ' +
-                        (p.trustedBy === 'official'
-                          ? 'text-accent'
-                          : p.trustedBy === 'marketplace'
-                            ? 'text-fg'
-                            : 'text-muted')
-                      }
+          {feedback && (
+            <div
+              style={{
+                marginTop: 12,
+                padding: '8px 12px',
+                background: 'rgba(255, 176, 32, 0.12)',
+                border: '1px solid rgba(255, 176, 32, 0.3)',
+                color: 'var(--warn)',
+                borderRadius: 'var(--radius-sm)',
+                fontSize: 12,
+                lineHeight: 1.5,
+              }}
+            >
+              {feedback}
+            </div>
+          )}
+        </Card>
+
+        <Card title={`Installed (${plugins.length})`} flush padding={0}>
+          {plugins.length === 0 ? (
+            <div
+              style={{
+                padding: 32,
+                textAlign: 'center',
+                color: 'var(--text-3)',
+                fontSize: 13,
+              }}
+            >
+              No plugins installed yet.
+              <div style={{ marginTop: 6, fontSize: 11 }}>
+                Try <code>gh:owner/repo</code> in the box above (or via CLI).
+              </div>
+            </div>
+          ) : (
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+              {plugins.map((p, i) => {
+                const trust = TRUST_BADGE[p.trustedBy];
+                return (
+                  <li
+                    key={p.name}
+                    style={{
+                      padding: '14px 16px',
+                      borderBottom:
+                        i === plugins.length - 1
+                          ? 'none'
+                          : '1px solid var(--line-soft)',
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 10,
+                        marginBottom: 6,
+                      }}
                     >
-                      {p.trustedBy}
-                    </span>
-                  </div>
-                  <div>
-                    <input
-                      type="checkbox"
-                      checked={p.enabled}
-                      onChange={() => {
-                        /* wire to window.deepcode.plugins.setEnabled */
+                      <span
+                        style={{
+                          fontWeight: 600,
+                          color: 'var(--text-0)',
+                          fontSize: 13,
+                        }}
+                      >
+                        {p.name}
+                      </span>
+                      <span
+                        style={{
+                          color: 'var(--text-3)',
+                          fontSize: 11,
+                          fontFamily: 'JetBrains Mono, monospace',
+                        }}
+                      >
+                        v{p.version}
+                      </span>
+                      <Badge kind={trust.kind}>{trust.label}</Badge>
+                      <span style={{ marginLeft: 'auto' }}>
+                        <Toggle
+                          checked={p.enabled}
+                          onChange={() => {
+                            /* TODO setEnabled via core */
+                          }}
+                        />
+                      </span>
+                    </div>
+                    {p.contributedHookEvents.length > 0 && (
+                      <div
+                        style={{
+                          fontSize: 11,
+                          color: 'var(--text-2)',
+                          marginBottom: 2,
+                        }}
+                      >
+                        Hooks:{' '}
+                        <span style={{ color: '#b4c2ff' }}>
+                          {p.contributedHookEvents.join(', ')}
+                        </span>
+                      </div>
+                    )}
+                    <div
+                      style={{
+                        fontSize: 10.5,
+                        color: 'var(--text-3)',
+                        fontFamily: 'JetBrains Mono, monospace',
                       }}
-                    />
-                  </div>
-                </div>
-                {p.contributedHookEvents.length > 0 && (
-                  <div className="mt-1 text-xs text-muted">
-                    Hooks: {p.contributedHookEvents.join(', ')}
-                  </div>
-                )}
-                <div className="mt-1 text-xs text-muted font-mono">
-                  hash: {p.sourceHash.slice(0, 12)}
-                </div>
-                {p.warning && <div className="mt-1 text-xs text-error">⚠ {p.warning}</div>}
-              </li>
-            ))}
-          </ul>
-        )}
+                    >
+                      hash {p.sourceHash.slice(0, 12)}
+                    </div>
+                    {p.warning && (
+                      <div
+                        style={{
+                          marginTop: 6,
+                          fontSize: 11,
+                          color: 'var(--error)',
+                        }}
+                      >
+                        ⚠ {p.warning}
+                      </div>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </Card>
       </div>
-    </div>
+    </Screen>
+  );
+}
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: () => void;
+}
+
+function Toggle({ checked, onChange }: ToggleProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onChange}
+      role="switch"
+      aria-checked={checked}
+      style={{
+        width: 32,
+        height: 18,
+        borderRadius: 999,
+        background: checked ? 'var(--brand)' : 'var(--bg-3)',
+        border: 'none',
+        position: 'relative',
+        cursor: 'pointer',
+        transition: 'background 0.15s',
+      }}
+    >
+      <span
+        style={{
+          position: 'absolute',
+          top: 2,
+          left: checked ? 16 : 2,
+          width: 14,
+          height: 14,
+          borderRadius: '50%',
+          background: '#fff',
+          transition: 'left 0.15s',
+        }}
+      />
+    </button>
   );
 }
diff --git a/apps/desktop/src/screens/Sessions.tsx b/apps/desktop/src/screens/Sessions.tsx
index d2f5a3d..f12a1da 100644
--- a/apps/desktop/src/screens/Sessions.tsx
+++ b/apps/desktop/src/screens/Sessions.tsx
@@ -1,17 +1,9 @@
-// Sessions list screen — resume / inspect past conversations.
-// Spec: docs/VISUAL_DESIGN.html screen #5
-// Milestone: M6-rest
+// Sessions list — design-aligned. Browse + filter + resume past
+// conversations. Per spec screen #5.
 
 import { useEffect, useState } from 'react';
-
-interface SessionMeta {
-  id: string;
-  title?: string;
-  cwd: string;
-  createdAt: string;
-  updatedAt: string;
-  model?: string;
-}
+import { Card, Screen } from '../components/Screen.js';
+import { listSessions, type SessionMeta } from '../lib/tauri-api.js';
 
 interface SessionsProps {
   onPick: (sessionId: string) => void;
@@ -23,71 +15,132 @@ export function SessionsScreen({ onPick, onNew }: SessionsProps): JSX.Element {
   const [filter, setFilter] = useState('');
 
   useEffect(() => {
-    // IPC call; fall back to empty list when main hasn't implemented yet.
-    if (window.deepcode?.sessions?.list) {
-      void window.deepcode.sessions
-        .list()
-        .then((rows) => setSessions(rows as SessionMeta[]))
-        .catch(() => setSessions([]));
-    } else {
-      setSessions([]);
-    }
+    void listSessions()
+      .then(setSessions)
+      .catch(() => setSessions([]));
   }, []);
 
   if (sessions === null) {
-    return <div className="p-8 text-muted">Loading sessions…</div>;
+    return (
+      <Screen title="Sessions">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
   }
 
-  const visible = sessions.filter(
-    (s) =>
-      !filter ||
-      (s.title ?? '').toLowerCase().includes(filter.toLowerCase()) ||
-      s.cwd.toLowerCase().includes(filter.toLowerCase()),
+  const filtered = sessions.filter((s) =>
+    !filter || s.id.toLowerCase().includes(filter.toLowerCase()),
   );
 
   return (
-    <div className="flex h-full flex-col">
-      <div className="flex items-center justify-between border-b border-border p-3">
+    <Screen
+      title="Sessions"
+      subtitle={`${sessions.length} total`}
+      actions={
+        <button type="button" className="btn btn-primary" onClick={onNew}>
+          + New
+        </button>
+      }
+    >
+      <div style={{ maxWidth: 900, margin: '0 auto' }}>
         <input
           type="search"
-          placeholder="Filter sessions…"
+          className="input"
+          placeholder="Filter by id…"
           value={filter}
           onChange={(e) => setFilter(e.target.value)}
-          className="flex-1 rounded border border-border bg-bg px-3 py-2 text-fg outline-none focus:border-accent"
+          style={{ marginBottom: 14, fontFamily: 'inherit' }}
         />
-        <button
-          onClick={onNew}
-          className="ml-2 rounded bg-accent px-4 py-2 font-medium text-bg"
+
+        <Card flush padding={0}>
+          {filtered.length === 0 ? (
+            <div
+              style={{
+                padding: 32,
+                textAlign: 'center',
+                color: 'var(--text-3)',
+                fontSize: 13,
+              }}
+            >
+              {sessions.length === 0
+                ? 'No sessions yet — your conversations are saved automatically.'
+                : 'No matches for that filter.'}
+            </div>
+          ) : (
+            <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+              {filtered.map((s, i) => (
+                <li
+                  key={s.id}
+                  onClick={() => onPick(s.id)}
+                  style={{
+                    padding: '12px 16px',
+                    borderBottom:
+                      i === filtered.length - 1
+                        ? 'none'
+                        : '1px solid var(--line-soft)',
+                    cursor: 'pointer',
+                    display: 'grid',
+                    gridTemplateColumns: '1fr auto',
+                    gap: 12,
+                    alignItems: 'baseline',
+                  }}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.background = 'var(--bg-3)')
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.background = 'transparent')
+                  }
+                >
+                  <div>
+                    <div
+                      style={{
+                        fontSize: 13,
+                        color: 'var(--text-0)',
+                        fontWeight: 500,
+                        fontFamily: 'JetBrains Mono, monospace',
+                      }}
+                    >
+                      {s.id}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: 11,
+                        color: 'var(--text-3)',
+                        marginTop: 2,
+                      }}
+                    >
+                      {(s.size_bytes / 1024).toFixed(1)} KB
+                    </div>
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-2)' }}>
+                    {relativeTime(s.updated_at_secs)}
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Card>
+
+        <p
+          style={{
+            fontSize: 11,
+            color: 'var(--text-3)',
+            textAlign: 'center',
+            marginTop: 16,
+          }}
         >
-          + New session
-        </button>
-      </div>
-      <div className="flex-1 overflow-y-auto p-3">
-        {visible.length === 0 ? (
-          <div className="p-8 text-center text-muted">
-            <p>No previous sessions yet.</p>
-            <p className="mt-2 text-xs">Start one with the New session button above.</p>
-          </div>
-        ) : (
-          <ul className="space-y-2">
-            {visible.map((s) => (
-              <li
-                key={s.id}
-                onClick={() => onPick(s.id)}
-                className="cursor-pointer rounded border border-border p-3 hover:border-accent"
-              >
-                <div className="flex items-center justify-between">
-                  <span className="font-medium">{s.title ?? s.id.slice(0, 8)}</span>
-                  <span className="text-xs text-muted">
-                    {new Date(s.updatedAt).toLocaleString()}
-                  </span>
-                </div>
-                <div className="mt-1 text-xs text-muted">{s.cwd}</div>
-              </li>
-            ))}
-          </ul>
-        )}
+          Sessions are stored as JSONL under ~/.deepcode/sessions/. Resume to
+          continue any previous conversation.
+        </p>
       </div>
-    </div>
+    </Screen>
   );
 }
+
+function relativeTime(secs: number): string {
+  const diff = Math.floor(Date.now() / 1000) - secs;
+  if (diff < 60) return `${diff}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
diff --git a/apps/desktop/src/screens/Settings.tsx b/apps/desktop/src/screens/Settings.tsx
index 9c0725e..4466f12 100644
--- a/apps/desktop/src/screens/Settings.tsx
+++ b/apps/desktop/src/screens/Settings.tsx
@@ -1,82 +1,358 @@
-// Settings screen — inspect + edit ~/.deepcode/settings.json
-// Spec: docs/VISUAL_DESIGN.html screen #6
-// Milestone: M6-rest
+// Settings screen — design-aligned. Per spec screen #14.
+// Top: JSON view (Monaco-lite). Bottom: flat key/value table. Both
+// reflect the live settings file. Save button writes back.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';
+import { loadProjectPath } from '../lib/project.js';
+import {
+  getSettingsPath,
+  loadSettingsFile,
+  saveSettingsFile,
+} from '../lib/tauri-api.js';
 
 export function SettingsScreen(): JSX.Element {
   const [settings, setSettings] = useState<Record<string, unknown> | null>(null);
+  const [settingsPath, setSettingsPath] = useState<string | null>(null);
+  const [projectPath, setProjectPath] = useState<string | undefined>();
+  const [rawJson, setRawJson] = useState<string>('');
+  const [parseError, setParseError] = useState<string | null>(null);
   const [search, setSearch] = useState('');
+  const [view, setView] = useState<'gui' | 'json'>('gui');
+  const [saving, setSaving] = useState(false);
+  const [feedback, setFeedback] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    void window.deepcode.settings.load().then((s) => setSettings(s));
+    void (async () => {
+      const [s, path, project] = await Promise.all([
+        loadSettingsFile(),
+        getSettingsPath(),
+        loadProjectPath(),
+      ]);
+      setSettings(s);
+      setSettingsPath(path);
+      setProjectPath(project);
+      setRawJson(JSON.stringify(s, null, 2));
+    })();
   }, []);
 
-  if (settings === null) {
-    return <div className="p-8 text-muted">Loading settings…</div>;
+  function handleJsonChange(text: string): void {
+    setRawJson(text);
+    try {
+      const parsed = JSON.parse(text);
+      if (typeof parsed !== 'object' || parsed === null) {
+        setParseError('Top-level must be an object.');
+        return;
+      }
+      setSettings(parsed as Record<string, unknown>);
+      setParseError(null);
+      setFeedback(null);
+    } catch (err) {
+      setParseError((err as Error).message);
+    }
   }
 
-  // Flat-key view: convert nested settings to dot.notation entries for display
-  const flat: Array<{ key: string; value: string }> = [];
-  function walk(prefix: string, obj: unknown): void {
-    if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
-      for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
-        walk(prefix ? `${prefix}.${k}` : k, v);
-      }
-    } else {
-      flat.push({ key: prefix, value: JSON.stringify(obj) });
+  async function handleSave(): Promise<void> {
+    if (!settings || parseError) return;
+    setSaving(true);
+    setFeedback(null);
+    try {
+      await saveSettingsFile(settings);
+      setFeedback('✓ Saved to ' + (settingsPath ?? '~/.deepcode/settings.json'));
+    } catch (err) {
+      setFeedback(`✕ Save failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
     }
   }
-  walk('', settings);
 
-  const visible = flat.filter(
+  // Flat key/value view
+  const flat = useMemo(() => {
+    const out: Array<{ key: string; value: string }> = [];
+    function walk(prefix: string, obj: unknown): void {
+      if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+        for (const [k, v] of Object.entries(obj as Record<string, unknown>)) {
+          walk(prefix ? `${prefix}.${k}` : k, v);
+        }
+      } else {
+        out.push({ key: prefix, value: JSON.stringify(obj) });
+      }
+    }
+    if (settings) walk('', settings);
+    return out;
+  }, [settings]);
+
+  const visibleFlat = flat.filter(
     (e) =>
       !search ||
       e.key.toLowerCase().includes(search.toLowerCase()) ||
       e.value.toLowerCase().includes(search.toLowerCase()),
   );
 
+  if (settings === null) {
+    return (
+      <Screen title="Settings">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
+  }
+
   return (
-    <div className="flex h-full flex-col">
-      <div className="border-b border-border p-3">
-        <input
-          type="search"
-          placeholder="Filter settings…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          className="w-full rounded border border-border bg-bg px-3 py-2 text-fg outline-none focus:border-accent"
-        />
-      </div>
-      <div className="flex-1 overflow-y-auto p-3">
-        {visible.length === 0 ? (
-          <div className="p-8 text-center text-muted">
-            <p>No matching settings.</p>
-            <p className="mt-2 text-xs">
-              Default config: ~/.deepcode/settings.json · project: .deepcode/settings.json
-            </p>
+    <Screen
+      title="Settings"
+      subtitle={settingsPath ?? '~/.deepcode/settings.json'}
+      actions={
+        <>
+          <div
+            style={{
+              display: 'flex',
+              gap: 2,
+              padding: 2,
+              background: 'var(--bg-2)',
+              border: '1px solid var(--line-soft)',
+              borderRadius: 'var(--radius-sm)',
+            }}
+          >
+            {(['gui', 'json'] as const).map((v) => (
+              <button
+                key={v}
+                type="button"
+                onClick={() => setView(v)}
+                style={{
+                  padding: '4px 12px',
+                  fontSize: 11,
+                  fontWeight: 600,
+                  borderRadius: 4,
+                  background: view === v ? 'var(--brand)' : 'transparent',
+                  color: view === v ? '#fff' : 'var(--text-2)',
+                  border: 0,
+                  cursor: 'pointer',
+                  textTransform: 'uppercase',
+                  letterSpacing: 1,
+                }}
+              >
+                {v}
+              </button>
+            ))}
+          </div>
+          <button
+            type="button"
+            className="btn btn-primary"
+            onClick={handleSave}
+            disabled={saving || parseError !== null}
+            title={parseError ?? 'Save to disk'}
+          >
+            {saving && <span className="spinner" />}
+            {saving ? 'Saving…' : 'Save'}
+          </button>
+        </>
+      }
+    >
+      <div style={{ maxWidth: 900, margin: '0 auto' }}>
+        {feedback && (
+          <div
+            style={{
+              marginBottom: 14,
+              padding: '8px 12px',
+              background: feedback.startsWith('✓')
+                ? 'rgba(20, 228, 162, 0.12)'
+                : 'rgba(255, 84, 112, 0.12)',
+              border:
+                '1px solid '
+                + (feedback.startsWith('✓')
+                  ? 'rgba(20, 228, 162, 0.3)'
+                  : 'rgba(255, 84, 112, 0.3)'),
+              color: feedback.startsWith('✓') ? 'var(--accent)' : 'var(--error)',
+              borderRadius: 'var(--radius-sm)',
+              fontSize: 12,
+            }}
+          >
+            {feedback}
           </div>
-        ) : (
-          <table className="w-full text-sm">
-            <thead className="text-xs text-muted">
-              <tr>
-                <th className="p-2 text-left">Key</th>
-                <th className="p-2 text-left">Value</th>
-              </tr>
-            </thead>
-            <tbody>
-              {visible.map((e) => (
-                <tr key={e.key} className="border-t border-border">
-                  <td className="p-2 font-mono">{e.key}</td>
-                  <td className="p-2 font-mono text-muted">{e.value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+        )}
+
+        {view === 'gui' && (
+          <>
+            <Card title="Quick reference">
+              <Row label="Project folder" hint="Threaded as cwd to every agent turn">
+                {projectPath ? (
+                  <code style={{ background: 'transparent' }}>{projectPath}</code>
+                ) : (
+                  <span style={{ color: 'var(--warn)' }}>not picked</span>
+                )}
+              </Row>
+              <Row label="Settings file">
+                <code style={{ background: 'transparent' }}>
+                  {settingsPath ?? '~/.deepcode/settings.json'}
+                </code>
+              </Row>
+              <Row label="Default model">
+                <code style={{ background: 'transparent' }}>
+                  {String(settings.model ?? 'deepseek-chat')}
+                </code>
+              </Row>
+              <Row label="Default effort">
+                <code style={{ background: 'transparent' }}>
+                  {String(settings.effortLevel ?? 'medium')}
+                </code>
+              </Row>
+              <Row label="Default base URL">
+                <code style={{ background: 'transparent' }}>
+                  {String(settings.baseURL ?? 'https://api.deepseek.com/v1')}
+                </code>
+              </Row>
+            </Card>
+
+            <Card
+              title="All settings"
+              actions={
+                <input
+                  type="search"
+                  className="input"
+                  placeholder="Filter keys…"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  style={{
+                    width: 200,
+                    fontSize: 12,
+                    padding: '4px 8px',
+                    fontFamily: 'inherit',
+                  }}
+                />
+              }
+              flush
+              padding={0}
+            >
+              {visibleFlat.length === 0 ? (
+                <div
+                  style={{
+                    padding: 24,
+                    textAlign: 'center',
+                    color: 'var(--text-3)',
+                    fontSize: 12,
+                  }}
+                >
+                  {flat.length === 0
+                    ? 'Settings file is empty.'
+                    : 'No matching keys.'}
+                </div>
+              ) : (
+                <table
+                  style={{
+                    width: '100%',
+                    fontSize: 12,
+                    borderCollapse: 'collapse',
+                  }}
+                >
+                  <thead>
+                    <tr style={{ background: 'var(--bg-3)' }}>
+                      <th
+                        style={{
+                          textAlign: 'left',
+                          padding: '8px 14px',
+                          fontSize: 10,
+                          textTransform: 'uppercase',
+                          color: 'var(--text-2)',
+                          fontWeight: 600,
+                          letterSpacing: 1,
+                        }}
+                      >
+                        Key
+                      </th>
+                      <th
+                        style={{
+                          textAlign: 'left',
+                          padding: '8px 14px',
+                          fontSize: 10,
+                          textTransform: 'uppercase',
+                          color: 'var(--text-2)',
+                          fontWeight: 600,
+                          letterSpacing: 1,
+                        }}
+                      >
+                        Value
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {visibleFlat.map((e) => (
+                      <tr
+                        key={e.key}
+                        style={{ borderTop: '1px solid var(--line-soft)' }}
+                      >
+                        <td
+                          style={{
+                            padding: '8px 14px',
+                            fontFamily: 'JetBrains Mono, monospace',
+                            color: 'var(--text-0)',
+                          }}
+                        >
+                          {e.key}
+                        </td>
+                        <td
+                          style={{
+                            padding: '8px 14px',
+                            fontFamily: 'JetBrains Mono, monospace',
+                            color: 'var(--text-2)',
+                            wordBreak: 'break-all',
+                          }}
+                        >
+                          {e.value}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </Card>
+
+            <SectionTitle>Tip</SectionTitle>
+            <div style={{ fontSize: 11, color: 'var(--text-3)', lineHeight: 1.6 }}>
+              Use the JSON view (toggle in the header) to edit nested keys
+              and arrays directly. Save validates JSON before writing.
+            </div>
+          </>
+        )}
+
+        {view === 'json' && (
+          <Card title="Raw JSON" padding={0}>
+            <textarea
+              ref={textareaRef}
+              value={rawJson}
+              onChange={(e) => handleJsonChange(e.target.value)}
+              spellCheck={false}
+              style={{
+                width: '100%',
+                minHeight: 480,
+                background: 'var(--bg-0)',
+                color: 'var(--text-0)',
+                border: 0,
+                padding: '14px 16px',
+                fontFamily: 'JetBrains Mono, monospace',
+                fontSize: 12.5,
+                lineHeight: 1.6,
+                resize: 'vertical',
+                outline: 'none',
+              }}
+            />
+            {parseError && (
+              <div
+                style={{
+                  padding: '8px 16px',
+                  background: 'rgba(255, 84, 112, 0.12)',
+                  borderTop: '1px solid rgba(255, 84, 112, 0.3)',
+                  color: 'var(--error)',
+                  fontSize: 11,
+                  fontFamily: 'JetBrains Mono, monospace',
+                }}
+              >
+                {parseError}
+              </div>
+            )}
+          </Card>
         )}
       </div>
-      <div className="border-t border-border p-3 text-xs text-muted">
-        Edit by opening ~/.deepcode/settings.json in your editor (visual editor lands in M7).
-      </div>
-    </div>
+    </Screen>
   );
 }
diff --git a/apps/desktop/src/screens/Skills.tsx b/apps/desktop/src/screens/Skills.tsx
index d6449b2..1367662 100644
--- a/apps/desktop/src/screens/Skills.tsx
+++ b/apps/desktop/src/screens/Skills.tsx
@@ -1,9 +1,10 @@
-// Skills screen — list available skills (built-in + user + project + plugin)
-// + open the SKILL.md body for inspection.
-// Spec: docs/VISUAL_DESIGN.html (skills tab)
-// Milestone: M6-rest
+// Skills screen — design-aligned.
+// List available skills (built-in + user + project + plugin) + show the
+// SKILL.md body for inspection. Per spec screen #11.
 
 import { useEffect, useState } from 'react';
+import { Badge, type BadgeKind } from '../components/Badge.js';
+import { Card, Screen } from '../components/Screen.js';
 
 interface SkillRow {
   name: string;
@@ -13,6 +14,13 @@ interface SkillRow {
   body?: string;
 }
 
+const SOURCE_BADGE: Record<SkillRow['source'], { kind: BadgeKind; label: string }> = {
+  builtin: { kind: 'info', label: 'built-in' },
+  user: { kind: 'warn', label: 'user' },
+  project: { kind: 'ok', label: 'project' },
+  plugin: { kind: 'info', label: 'plugin' },
+};
+
 export function SkillsScreen(): JSX.Element {
   const [skills, setSkills] = useState<SkillRow[] | null>(null);
   const [active, setActive] = useState<string | null>(null);
@@ -30,10 +38,14 @@ export function SkillsScreen(): JSX.Element {
   }, []);
 
   if (skills === null) {
-    return <div className="p-8 text-muted">Loading skills…</div>;
+    return (
+      <Screen title="Skills">
+        <div style={{ padding: 20, color: 'var(--text-2)' }}>Loading…</div>
+      </Screen>
+    );
   }
 
-  const visible = skills.filter(
+  const filtered = skills.filter(
     (s) =>
       !filter ||
       s.name.toLowerCase().includes(filter.toLowerCase()) ||
@@ -42,55 +54,144 @@ export function SkillsScreen(): JSX.Element {
   const current = skills.find((s) => s.name === active);
 
   return (
-    <div className="flex h-full">
-      <aside className="w-1/3 border-r border-border">
-        <div className="border-b border-border p-3">
+    <Screen title="Skills" subtitle={`${skills.length} total`}>
+      <div
+        style={{
+          maxWidth: 1100,
+          margin: '0 auto',
+          display: 'grid',
+          gridTemplateColumns: 'minmax(280px, 1fr) 2fr',
+          gap: 14,
+          alignItems: 'start',
+        }}
+      >
+        {/* Left: filter + list */}
+        <div>
           <input
             type="search"
+            className="input"
             placeholder="Filter skills…"
             value={filter}
             onChange={(e) => setFilter(e.target.value)}
-            className="w-full rounded border border-border bg-bg px-3 py-2 text-fg outline-none focus:border-accent"
+            style={{ marginBottom: 12, fontFamily: 'inherit' }}
           />
+
+          <Card flush padding={0}>
+            {filtered.length === 0 ? (
+              <div
+                style={{
+                  padding: 24,
+                  textAlign: 'center',
+                  color: 'var(--text-3)',
+                  fontSize: 13,
+                }}
+              >
+                {skills.length === 0 ? 'No skills available.' : 'No matches.'}
+              </div>
+            ) : (
+              <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+                {filtered.map((s, i) => {
+                  const badge = SOURCE_BADGE[s.source];
+                  return (
+                    <li
+                      key={s.name}
+                      onClick={() => setActive(s.name)}
+                      style={{
+                        padding: '10px 14px',
+                        borderBottom:
+                          i === filtered.length - 1
+                            ? 'none'
+                            : '1px solid var(--line-soft)',
+                        cursor: 'pointer',
+                        background:
+                          s.name === active ? 'var(--brand-tint)' : 'transparent',
+                      }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: 6,
+                          marginBottom: 2,
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: s.name === active ? '#b4c2ff' : 'var(--text-0)',
+                          }}
+                        >
+                          {s.name}
+                        </span>
+                        <Badge kind={badge.kind}>{badge.label}</Badge>
+                      </div>
+                      <div style={{ fontSize: 11, color: 'var(--text-2)' }}>
+                        {s.description}
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </Card>
         </div>
-        <ul className="flex-1 overflow-y-auto p-2">
-          {visible.length === 0 ? (
-            <li className="p-4 text-center text-muted">No skills.</li>
+
+        {/* Right: detail */}
+        <div>
+          {current ? (
+            <Card
+              title={current.name}
+              actions={
+                <Badge kind={SOURCE_BADGE[current.source].kind}>
+                  {SOURCE_BADGE[current.source].label}
+                </Badge>
+              }
+            >
+              <div
+                style={{
+                  fontSize: 11,
+                  color: 'var(--text-3)',
+                  marginBottom: 10,
+                  fontFamily: 'JetBrains Mono, monospace',
+                }}
+              >
+                {current.path}
+              </div>
+              <pre
+                style={{
+                  background: 'var(--bg-0)',
+                  color: 'var(--text-1)',
+                  border: '1px solid var(--line-soft)',
+                  padding: '14px 16px',
+                  borderRadius: 'var(--radius-sm)',
+                  fontSize: 12,
+                  whiteSpace: 'pre-wrap',
+                  margin: 0,
+                  maxHeight: 480,
+                  overflowY: 'auto',
+                  lineHeight: 1.5,
+                }}
+              >
+                {current.body ?? '(SKILL.md body not loaded — the desktop IPC for fetching skill body lands in v0.2.)'}
+              </pre>
+            </Card>
           ) : (
-            visible.map((s) => (
-              <li
-                key={s.name}
-                onClick={() => setActive(s.name)}
-                className={
-                  'cursor-pointer rounded px-3 py-2 ' +
-                  (active === s.name ? 'bg-bg-elevated' : 'hover:bg-bg-elevated')
-                }
+            <Card>
+              <div
+                style={{
+                  padding: '40px 20px',
+                  textAlign: 'center',
+                  color: 'var(--text-2)',
+                  fontSize: 13,
+                }}
               >
-                <div className="flex items-center justify-between">
-                  <span className="font-medium">{s.name}</span>
-                  <span className="text-xs text-muted">{s.source}</span>
-                </div>
-                <div className="mt-1 text-xs text-muted">{s.description}</div>
-              </li>
-            ))
+                Pick a skill from the list to view its SKILL.md.
+              </div>
+            </Card>
           )}
-        </ul>
-      </aside>
-      <main className="flex-1 overflow-y-auto p-4">
-        {current ? (
-          <div>
-            <h2 className="font-semibold">{current.name}</h2>
-            <div className="mt-1 text-xs text-muted">
-              {current.source} · <code>{current.path}</code>
-            </div>
-            <pre className="mt-4 whitespace-pre-wrap rounded bg-bg-elevated p-3 font-mono text-xs">
-              {current.body ?? '(SKILL.md body not loaded — wire IPC fetch in M6-rest.)'}
-            </pre>
-          </div>
-        ) : (
-          <div className="text-center text-muted">Select a skill to view its SKILL.md.</div>
-        )}
-      </main>
-    </div>
+        </div>
+      </div>
+    </Screen>
   );
 }