diff --git a/CLAUDE.md b/CLAUDE.md
index 8fd2d671..116225c9 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -191,10 +191,13 @@ the tag inside `agents.config` — `roster::parse_and_validate` is the only guar
 and `update_agent` validates the *post-merge* state; and an `allowed_tools` list
 without an `mcp_config_path` is silently inert at spawn time, so it's rejected.
 
-**Nav rail.** `ui-store.activeSection` (`'board' | 'roster'`, persisted) drives
-`layout/nav-rail.tsx`. Deliberately **not** `viewMode`, which means "is the chat
-panel open" and is load-bearing via `isChatOpen`. Orchestrator is not a section
-yet — it's still a dock panel inside `Board` with its own geometry.
+**Section nav.** `ui-store.activeSection` (`'board' | 'roster'`, persisted)
+drives `layout/section-switcher.tsx`, which renders as icon buttons on the LEFT
+of the workspace tab bar — same recipe as the right-hand cluster
+(`h-8 w-8`, motion scale, 20x20 solid icon, `bg-accent/15 text-accent` active).
+Deliberately **not** `viewMode`, which means "is the chat panel open" and is
+load-bearing via `isChatOpen`. Orchestrator is not a section yet — it's still a
+dock panel inside `Board` with its own geometry.
 
 **Not wired yet (v2):** columns referencing an agent, execution, skill injection
 into the CLI, MCP/`/api/*` tools, RAG. Spec:
diff --git a/src/app.tsx b/src/app.tsx
index 6129f9d3..1eb1763d 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -14,7 +14,6 @@ import { useAgentStreamingSync } from '@/hooks/use-agent-streaming-sync'
 import { useAutoDetectClis } from '@/hooks/use-cli-path'
 import { useUpdater } from '@/hooks/use-updater'
 import { Board } from '@/components/layout/board'
-import { NavRail } from '@/components/layout/nav-rail'
 import { RosterView } from '@/components/roster/roster-view'
 import { CliHealthBanner } from '@/components/layout/cli-health-banner'
 import { WorkspaceSetup } from '@/components/layout/workspace-setup'
@@ -174,16 +173,10 @@ function App() {
           <SkeletonLoader />
         ) : showSetup ? (
           <WorkspaceSetup />
+        ) : activeSection === 'roster' ? (
+          <RosterView />
         ) : (
-          // The rail sits inside the content slot, below the workspace tab bar
-          // and after the setup/error branches — there is nothing to navigate
-          // between until a workspace exists.
-          <div className="flex h-full min-h-0">
-            <NavRail />
-            <div className="min-w-0 flex-1 overflow-hidden">
-              {activeSection === 'roster' ? <RosterView /> : <Board />}
-            </div>
-          </div>
+          <Board />
         )}
       </main>
 
diff --git a/src/components/layout/nav-rail.tsx b/src/components/layout/nav-rail.tsx
deleted file mode 100644
index 259cce79..00000000
--- a/src/components/layout/nav-rail.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { ReactNode } from 'react'
-import { Tooltip } from '@/components/shared/tooltip'
-import { useUIStore, type AppSection } from '@/stores/ui-store'
-
-/**
- * Left nav rail — switches the top-level app section.
- *
- * Generic over its item list so adding a section later (Orchestrator, once its
- * dock geometry is untangled from Board) is one entry, not a rewrite.
- *
- * Styling follows the settings-panel nav: `bg-accent/10 text-accent` selected,
- * muted otherwise. Cursor is set inline rather than via `cursor-pointer` —
- * Tailwind cursor classes don't apply reliably in macOS WKWebView (see the
- * pitfalls section in CLAUDE.md).
- */
-
-type RailItem = {
-  value: AppSection
-  label: string
-  icon: ReactNode
-  testId: string
-}
-
-function BoardIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
-      <path d="M3 3.5A1.5 1.5 0 0 1 4.5 2h2A1.5 1.5 0 0 1 8 3.5v13A1.5 1.5 0 0 1 6.5 18h-2A1.5 1.5 0 0 1 3 16.5v-13ZM10 3.5A1.5 1.5 0 0 1 11.5 2h2A1.5 1.5 0 0 1 15 3.5v7a1.5 1.5 0 0 1-1.5 1.5h-2A1.5 1.5 0 0 1 10 10.5v-7Z" />
-    </svg>
-  )
-}
-
-function RosterIcon() {
-  return (
-    <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
-      <path d="M10 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 16.036A7.002 7.002 0 0 1 10 11.5a7.002 7.002 0 0 1 6.535 4.536.75.75 0 0 1-.702 1.014H4.167a.75.75 0 0 1-.702-1.014Z" />
-    </svg>
-  )
-}
-
-const RAIL_ITEMS: readonly RailItem[] = [
-  { value: 'board', label: 'Board', icon: <BoardIcon />, testId: 'nav-rail-board' },
-  { value: 'roster', label: 'Roster', icon: <RosterIcon />, testId: 'nav-rail-roster' },
-]
-
-export function NavRail() {
-  const activeSection = useUIStore((s) => s.activeSection)
-  const setActiveSection = useUIStore((s) => s.setActiveSection)
-
-  return (
-    <nav
-      aria-label="Sections"
-      className="flex w-12 shrink-0 flex-col items-center gap-1 border-r border-border-default bg-surface/40 py-2"
-    >
-      {RAIL_ITEMS.map((item) => {
-        const isActive = activeSection === item.value
-        return (
-          <Tooltip key={item.value} content={item.label} side="right">
-            <button
-              type="button"
-              onClick={() => {
-                setActiveSection(item.value)
-              }}
-              aria-current={isActive ? 'page' : undefined}
-              aria-label={item.label}
-              data-testid={item.testId}
-              style={{ cursor: 'pointer' }}
-              className={`flex h-9 w-9 items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg ${
-                isActive
-                  ? 'bg-accent/10 text-accent'
-                  : 'text-text-secondary hover:bg-surface hover:text-text-primary'
-              }`}
-            >
-              {item.icon}
-            </button>
-          </Tooltip>
-        )
-      })}
-    </nav>
-  )
-}
diff --git a/src/components/layout/nav-rail.test.tsx b/src/components/layout/section-switcher.test.tsx
similarity index 61%
rename from src/components/layout/nav-rail.test.tsx
rename to src/components/layout/section-switcher.test.tsx
index 9ba9787f..12b5a44f 100644
--- a/src/components/layout/nav-rail.test.tsx
+++ b/src/components/layout/section-switcher.test.tsx
@@ -1,26 +1,24 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import { render, screen, fireEvent, cleanup } from '@testing-library/react'
-import { NavRail } from './nav-rail'
+import { SectionSwitcher } from './section-switcher'
 import { useUIStore } from '@/stores/ui-store'
 
-describe('NavRail', () => {
+describe('SectionSwitcher', () => {
   beforeEach(() => {
     cleanup()
     useUIStore.setState({ activeSection: 'board' })
   })
 
   it('marks the active section and switches on click', () => {
-    render(<NavRail />)
+    render(<SectionSwitcher />)
 
-    const board = screen.getByTestId('nav-rail-board')
-    const roster = screen.getByTestId('nav-rail-roster')
-    expect(board).toHaveAttribute('aria-current', 'page')
-    expect(roster).not.toHaveAttribute('aria-current')
+    expect(screen.getByTestId('section-board')).toHaveAttribute('aria-pressed', 'true')
+    expect(screen.getByTestId('section-roster')).toHaveAttribute('aria-pressed', 'false')
 
-    fireEvent.click(roster)
+    fireEvent.click(screen.getByTestId('section-roster'))
 
     expect(useUIStore.getState().activeSection).toBe('roster')
-    expect(screen.getByTestId('nav-rail-roster')).toHaveAttribute('aria-current', 'page')
+    expect(screen.getByTestId('section-roster')).toHaveAttribute('aria-pressed', 'true')
   })
 
   it('does not disturb viewMode', () => {
@@ -28,9 +26,9 @@ describe('NavRail', () => {
     // chat panel open" and is load-bearing via isChatOpen. Conflating them
     // would close the chat panel every time you switched sections.
     useUIStore.setState({ viewMode: 'chat', activeTaskId: 't1' })
-    render(<NavRail />)
+    render(<SectionSwitcher />)
 
-    fireEvent.click(screen.getByTestId('nav-rail-roster'))
+    fireEvent.click(screen.getByTestId('section-roster'))
 
     expect(useUIStore.getState().viewMode).toBe('chat')
     expect(useUIStore.getState().activeTaskId).toBe('t1')
diff --git a/src/components/layout/section-switcher.tsx b/src/components/layout/section-switcher.tsx
new file mode 100644
index 00000000..3615766c
--- /dev/null
+++ b/src/components/layout/section-switcher.tsx
@@ -0,0 +1,80 @@
+import type { ReactNode } from 'react'
+import { motion } from 'motion/react'
+import { Tooltip } from '@/components/shared/tooltip'
+import { useUIStore, type AppSection } from '@/stores/ui-store'
+
+/**
+ * Top-bar section switcher — Board / Roster.
+ *
+ * Lives on the left of the workspace tab bar, mirroring the icon-button cluster
+ * on the right. Deliberately uses the identical recipe to `AddTabButton` /
+ * `SettingsButton` / `ShowArchivedButton` (h-8 w-8, motion scale, 20x20 solid
+ * icon) so the two clusters read as one row of controls rather than two systems.
+ *
+ * Generic over its item list, so adding a section later (Orchestrator, once its
+ * dock geometry is untangled from Board) is one entry.
+ */
+
+type SectionItem = {
+  value: AppSection
+  label: string
+  icon: ReactNode
+  testId: string
+}
+
+/** Solid 20x20 heroicons-style glyphs — the tab bar's established icon shape. */
+function BoardIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+      <path d="M3 4.75A1.75 1.75 0 0 1 4.75 3h2A1.75 1.75 0 0 1 8.5 4.75v10.5A1.75 1.75 0 0 1 6.75 17h-2A1.75 1.75 0 0 1 3 15.25V4.75ZM11.5 4.75A1.75 1.75 0 0 1 13.25 3h2A1.75 1.75 0 0 1 17 4.75v6.5A1.75 1.75 0 0 1 15.25 13h-2a1.75 1.75 0 0 1-1.75-1.75v-6.5Z" />
+    </svg>
+  )
+}
+
+function RosterIcon() {
+  return (
+    <svg viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+      <path d="M10 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM3.465 14.493a1.23 1.23 0 0 0 .41 1.412A9.957 9.957 0 0 0 10 18c2.31 0 4.438-.784 6.131-2.1.43-.333.604-.903.408-1.41a7.002 7.002 0 0 0-13.074.003Z" />
+    </svg>
+  )
+}
+
+const SECTIONS: readonly SectionItem[] = [
+  { value: 'board', label: 'Board', icon: <BoardIcon />, testId: 'section-board' },
+  { value: 'roster', label: 'Roster', icon: <RosterIcon />, testId: 'section-roster' },
+]
+
+export function SectionSwitcher() {
+  const activeSection = useUIStore((s) => s.activeSection)
+  const setActiveSection = useUIStore((s) => s.setActiveSection)
+
+  return (
+    <div className="flex items-center gap-1" role="group" aria-label="Sections">
+      {SECTIONS.map((item) => {
+        const isActive = activeSection === item.value
+        return (
+          <Tooltip key={item.value} content={item.label} side="bottom">
+            <motion.button
+              onClick={() => {
+                setActiveSection(item.value)
+              }}
+              aria-label={item.label}
+              aria-pressed={isActive}
+              data-testid={item.testId}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              style={{ cursor: 'pointer' }}
+              className={`flex h-8 w-8 items-center justify-center rounded-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg ${
+                isActive
+                  ? 'bg-accent/15 text-accent'
+                  : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'
+              }`}
+            >
+              {item.icon}
+            </motion.button>
+          </Tooltip>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/components/layout/tab-bar.tsx b/src/components/layout/tab-bar.tsx
index 576de575..52f2c18e 100644
--- a/src/components/layout/tab-bar.tsx
+++ b/src/components/layout/tab-bar.tsx
@@ -23,6 +23,7 @@ import { useSettingsStore } from '@/stores/settings-store'
 import { useChecklistStore } from '@/stores/checklist-store'
 import { useTaskStore } from '@/stores/task-store'
 import { Tooltip } from '@/components/shared/tooltip'
+import { SectionSwitcher } from './section-switcher'
 import type { Workspace } from '@/types'
 import { CostBadge, MetricsDashboard } from '@/components/usage'
 import { AddWorkspaceDialog } from './add-workspace-dialog'
@@ -328,6 +329,10 @@ export function TabBar() {
   return (
     <>
       <header className="relative z-20 flex h-10 shrink-0 items-center border-b border-border-default bg-surface px-2">
+        {/* Left: section switcher (Board / Roster). Same button recipe as the
+            right-hand cluster so the header reads as one row of controls. */}
+        <SectionSwitcher />
+
         {/* Center: tabs - absolutely positioned for true centering */}
         <div className="absolute left-1/2 flex -translate-x-1/2 items-center gap-1">
           <DndContext
diff --git a/src/components/roster/agent-dossier.tsx b/src/components/roster/agent-dossier.tsx
index 7de9e4d3..ec778dae 100644
--- a/src/components/roster/agent-dossier.tsx
+++ b/src/components/roster/agent-dossier.tsx
@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react'
 import type { Agent, LlmConfig, ScriptRuntimeConfig } from '@/types'
 import { parseAgentAvatar, parseAgentConfig } from '@/types'
 import { useRosterStore } from '@/stores/roster-store'
@@ -9,35 +10,32 @@ import { useRosterStore } from '@/stores/roster-store'
  * runtime: a script agent shows command/args/env; an LLM agent swaps those for
  * system prompt / model / MCP set / skills.
  *
- * Slots we can't honour yet render visibly disabled with a `v2` tag rather than
- * being hidden, so the dossier is honest about what is and isn't wired.
+ * Slots that aren't wired yet render visibly disabled with a `v2` tag rather
+ * than being hidden, so the dossier stays honest about what the app can
+ * actually do today.
  */
 
 function Row({
   label,
   children,
-  muted = false,
   v2 = false,
 }: {
   label: string
-  children: React.ReactNode
-  muted?: boolean
+  children: ReactNode
   v2?: boolean
 }) {
   return (
     <div
-      className={`flex items-start gap-3 border-b border-border-default/60 py-2 ${v2 ? 'opacity-50' : ''}`}
+      className={`flex items-start gap-3 border-b border-border-default py-2 ${v2 ? 'opacity-50' : ''}`}
     >
-      <span className="w-24 shrink-0 pt-0.5 font-mono text-[11px] text-text-secondary">
+      <span className="w-16 shrink-0 pt-0.5 font-mono text-[11px] text-text-secondary">
         {label}
       </span>
-      <span
-        className={`flex min-w-0 flex-wrap items-center gap-1.5 text-[13px] ${muted ? 'text-text-secondary' : 'text-text-primary'}`}
-      >
+      <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5 text-sm text-text-primary">
         {children}
       </span>
       {v2 && (
-        <span className="ml-auto shrink-0 rounded border border-accent/50 px-1.5 font-mono text-[9px] text-accent">
+        <span className="mt-0.5 shrink-0 rounded bg-accent/10 px-1.5 py-0.5 text-[10px] font-medium text-accent">
           v2
         </span>
       )}
@@ -45,25 +43,21 @@ function Row({
   )
 }
 
-function Token({ children, tone }: { children: React.ReactNode; tone?: 'muted' }) {
+function Token({ children }: { children: ReactNode }) {
   return (
-    <span
-      className={`rounded border border-border-default bg-surface-hover px-1.5 py-0.5 font-mono text-[10.5px] ${
-        tone === 'muted' ? 'text-text-secondary' : 'text-text-primary'
-      }`}
-    >
+    <span className="rounded border border-border-default bg-surface px-1.5 py-0.5 font-mono text-[11px] text-text-primary">
       {children}
     </span>
   )
 }
 
-function Empty({ children }: { children: React.ReactNode }) {
-  return <span className="text-[13px] italic text-text-secondary">{children}</span>
+function Empty({ children }: { children: ReactNode }) {
+  return <span className="text-sm text-text-secondary">{children}</span>
 }
 
-function SectionLabel({ children }: { children: React.ReactNode }) {
+function SectionLabel({ children }: { children: ReactNode }) {
   return (
-    <div className="mb-1 mt-4 font-mono text-[10px] font-semibold uppercase tracking-wider text-text-secondary/70">
+    <div className="mb-1 mt-5 text-[10px] font-semibold uppercase tracking-wider text-text-secondary/70">
       {children}
     </div>
   )
@@ -75,7 +69,7 @@ function LlmBlock({ config }: { config: LlmConfig }) {
 
   return (
     <>
-      <SectionLabel>Runtime config · {config.runtime}</SectionLabel>
+      <SectionLabel>Configuration</SectionLabel>
       <Row label="prompt">
         {config.systemPrompt ? (
           <span className="whitespace-pre-wrap break-words">{config.systemPrompt}</span>
@@ -87,19 +81,11 @@ function LlmBlock({ config }: { config: LlmConfig }) {
         {config.model ? <Token>{config.model}</Token> : <Empty>CLI default</Empty>}
       </Row>
       <Row label="mcp">
-        {config.mcpConfigPath ? (
-          <Token>{config.mcpConfigPath}</Token>
-        ) : (
-          <Empty>No MCP config</Empty>
-        )}
+        {config.mcpConfigPath ? <Token>{config.mcpConfigPath}</Token> : <Empty>Not set</Empty>}
       </Row>
       <Row label="tools">
         {config.allowedTools.length > 0 ? (
-          config.allowedTools.map((t) => (
-            <Token key={t} tone="muted">
-              {t}
-            </Token>
-          ))
+          config.allowedTools.map((t) => <Token key={t}>{t}</Token>)
         ) : (
           <Empty>All tools allowed</Empty>
         )}
@@ -114,18 +100,18 @@ function LlmBlock({ config }: { config: LlmConfig }) {
               // rather than silently dropping it from the list.
               <span
                 key={`missing-${String(i)}`}
-                className="rounded border border-error/50 px-1.5 py-0.5 font-mono text-[10.5px] text-error"
+                className="rounded bg-error/10 px-1.5 py-0.5 text-[10px] font-medium text-error"
               >
-                missing skill
+                Missing skill
               </span>
             ),
           )
         ) : (
-          <Empty>No skills attached</Empty>
+          <Empty>None attached</Empty>
         )}
       </Row>
-      <Row label="rag" muted v2>
-        <Empty>Retrieval is a later phase.</Empty>
+      <Row label="rag" v2>
+        <Empty>Retrieval lands in a later phase.</Empty>
       </Row>
     </>
   )
@@ -135,19 +121,15 @@ function ScriptBlock({ config }: { config: ScriptRuntimeConfig }) {
   const envEntries = Object.entries(config.env)
   return (
     <>
-      <SectionLabel>Runtime config · script</SectionLabel>
+      <SectionLabel>Configuration</SectionLabel>
       <Row label="command">
-        {config.command ? <Token>{config.command}</Token> : <Empty>No command set</Empty>}
+        {config.command ? <Token>{config.command}</Token> : <Empty>Not set</Empty>}
       </Row>
       <Row label="args">
         {config.args.length > 0 ? (
-          config.args.map((a, i) => (
-            <Token key={`${a}-${String(i)}`} tone="muted">
-              {a}
-            </Token>
-          ))
+          config.args.map((a, i) => <Token key={`${a}-${String(i)}`}>{a}</Token>)
         ) : (
-          <Empty>No arguments</Empty>
+          <Empty>None</Empty>
         )}
       </Row>
       <Row label="env">
@@ -158,11 +140,11 @@ function ScriptBlock({ config }: { config: ScriptRuntimeConfig }) {
             </Token>
           ))
         ) : (
-          <Empty>No environment overrides</Empty>
+          <Empty>None</Empty>
         )}
       </Row>
-      <Row label="outputs" muted v2>
-        <Empty>Typed artifacts are a later phase.</Empty>
+      <Row label="outputs" v2>
+        <Empty>Typed artifacts land in a later phase.</Empty>
       </Row>
     </>
   )
@@ -183,39 +165,31 @@ export function AgentDossier({
   const config = parseAgentConfig(agent.config, agent.runtime)
 
   return (
-    <div className="flex h-full flex-col overflow-y-auto p-5" data-testid="agent-dossier">
+    <div className="flex flex-col p-6 lg:h-full" data-testid="agent-dossier">
       <div
-        className="relative flex h-24 items-center justify-center overflow-hidden rounded-lg"
+        className="flex h-24 w-full max-w-[380px] shrink-0 items-center justify-center rounded-lg"
         style={{
           background: `linear-gradient(140deg, ${avatar.gradientFrom}, ${avatar.gradientTo})`,
         }}
       >
-        <span className="font-mono text-4xl font-extrabold text-white">{avatar.initials}</span>
+        <span className="font-mono text-4xl font-bold text-white">{avatar.initials}</span>
       </div>
 
-      <h3 className="mt-4 text-xl font-semibold tracking-tight text-text-primary">{agent.name}</h3>
-      {agent.role ? (
-        <p className="mt-0.5 text-[13px] text-text-secondary">{agent.role}</p>
-      ) : (
-        <p className="mt-0.5 text-[13px] italic text-text-secondary">No description yet.</p>
-      )}
-      <span className="mt-3 self-start rounded border border-border-default px-2 py-0.5 font-mono text-[10.5px] uppercase tracking-wider text-text-secondary">
-        {agent.runtime} runtime
+      <h3 className="mt-4 text-base font-semibold text-text-primary">{agent.name}</h3>
+      <p className="mt-0.5 text-xs text-text-secondary">{agent.role || 'No description yet.'}</p>
+      <span className="mt-3 self-start rounded bg-surface-hover px-2 py-0.5 font-mono text-[10px] uppercase tracking-wider text-text-secondary">
+        {agent.runtime}
       </span>
 
-      {config.runtime === 'script' ? (
-        <ScriptBlock config={config} />
-      ) : (
-        <LlmBlock config={config} />
-      )}
+      {config.runtime === 'script' ? <ScriptBlock config={config} /> : <LlmBlock config={config} />}
 
-      <div className="mt-5 flex flex-wrap gap-2">
+      <div className="mt-6 flex flex-wrap gap-2">
         <button
           type="button"
           onClick={onEdit}
           data-testid="agent-edit"
           style={{ cursor: 'pointer' }}
-          className="rounded-lg bg-accent px-3 py-1.5 text-[13px] font-semibold text-bg transition-opacity hover:opacity-90"
+          className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-bg transition-opacity hover:opacity-90"
         >
           Edit
         </button>
@@ -224,7 +198,7 @@ export function AgentDossier({
           onClick={onDuplicate}
           data-testid="agent-duplicate"
           style={{ cursor: 'pointer' }}
-          className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-text-primary transition-colors hover:bg-surface-hover"
+          className="rounded-lg border border-border-default px-4 py-2 text-sm text-text-secondary transition-colors hover:text-text-primary"
         >
           Duplicate
         </button>
@@ -233,7 +207,7 @@ export function AgentDossier({
           onClick={onDelete}
           data-testid="agent-delete"
           style={{ cursor: 'pointer' }}
-          className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-error transition-colors hover:bg-error/10"
+          className="rounded-lg border border-border-default px-4 py-2 text-sm text-error transition-colors hover:bg-error/10"
         >
           Delete
         </button>
diff --git a/src/components/roster/agent-editor.tsx b/src/components/roster/agent-editor.tsx
index e0c840df..00b261a4 100644
--- a/src/components/roster/agent-editor.tsx
+++ b/src/components/roster/agent-editor.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import type { ReactNode } from 'react'
 import type { Agent, AgentConfig, AgentRuntime, LlmConfig, ScriptRuntimeConfig } from '@/types'
 import { defaultConfigFor, deriveInitials, parseAgentAvatar, parseAgentConfig } from '@/types'
 import { useRosterStore } from '@/stores/roster-store'
@@ -7,12 +8,15 @@ import * as ipc from '@/lib/ipc'
 /**
  * Create/edit modal for an agent.
  *
- * `agent: Agent | null` discriminates create from edit (the script-editor
+ * `agent: Agent | null` discriminates create from edit (the `script-editor`
  * pattern); the parent owns the refetch via `onSave`. Duplicate is create with
  * a prefilled `seed`.
  *
- * The form's shape follows the selected runtime, mirroring the dossier — that
- * is the whole point of the runtime-typed config.
+ * The form's shape follows the selected runtime, mirroring the dossier — the
+ * point of a runtime-typed config is that you never see fields that can't apply.
+ *
+ * Chrome (header / scrollable body / footer) matches `script-editor.tsx` so the
+ * two editors in this app are the same object.
  */
 
 type Props = {
@@ -32,18 +36,27 @@ const GRADIENTS: { from: string; to: string }[] = [
   { from: '#122b3a', to: '#1a4a6b' },
 ]
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
+const inputClass =
+  'w-full rounded-lg border border-border-default bg-bg px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/50 focus:border-accent focus:outline-none'
+
+function Field({
+  label,
+  hint,
+  children,
+}: {
+  label: string
+  hint?: string
+  children: ReactNode
+}) {
   return (
-    <label className="mb-3 block">
-      <span className="mb-1 block text-xs font-medium text-text-secondary">{label}</span>
+    <div>
+      <label className="mb-1 block text-xs font-medium text-text-secondary">{label}</label>
       {children}
-    </label>
+      {hint && <p className="mt-1 text-xs text-text-secondary/70">{hint}</p>}
+    </div>
   )
 }
 
-const inputClass =
-  'w-full rounded-md border border-border-default bg-surface px-2.5 py-1.5 text-[13px] text-text-primary outline-none focus:border-accent'
-
 /** Newline-separated text <-> string[], so lists stay editable as plain text. */
 const linesToList = (v: string) =>
   v
@@ -71,9 +84,7 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) {
   const skills = useRosterStore((s) => s.skills)
   const runtimes = useRosterStore((s) => s.runtimes)
 
-  const [name, setName] = useState(
-    source ? (agent ? source.name : `${source.name} copy`) : '',
-  )
+  const [name, setName] = useState(source ? (agent ? source.name : `${source.name} copy`) : '')
   const [role, setRole] = useState(source?.role ?? '')
   const [runtime, setRuntime] = useState<AgentRuntime>(source?.runtime ?? 'claude')
   const [config, setConfig] = useState<AgentConfig>(
@@ -132,15 +143,23 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) {
       }
       onSave()
     } catch (err) {
-      // Surface the backend's validation message verbatim — it explains
-      // things the form can't infer (e.g. a tool allow-list needing an MCP
-      // config to apply to).
+      // Surface the backend's validation message verbatim — it explains things
+      // the form can't infer (e.g. a tool allow-list needing an MCP config).
       setError(err instanceof Error ? err.message : String(err))
     } finally {
       setSaving(false)
     }
   }
 
+  const runtimeOptions =
+    runtimes.length > 0
+      ? runtimes
+      : [
+          { kind: 'claude' as const, label: 'Claude' },
+          { kind: 'codex' as const, label: 'Codex' },
+          { kind: 'script' as const, label: 'Script' },
+        ]
+
   return (
     <div
       className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
@@ -157,201 +176,230 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) {
         aria-modal="true"
         aria-label={agent ? 'Edit agent' : 'New agent'}
         data-testid="agent-editor"
-        className="flex max-h-[85vh] w-full max-w-lg flex-col overflow-y-auto rounded-xl border border-border-default bg-bg p-5 shadow-2xl"
+        className="flex max-h-[85vh] w-full max-w-lg flex-col rounded-xl border border-border-default bg-bg shadow-2xl"
       >
-        <h3 className="mb-4 text-base font-semibold text-text-primary">
-          {agent ? 'Edit agent' : 'New agent'}
-        </h3>
-
-        <Field label="Name">
-          <input
-            className={inputClass}
-            value={name}
-            onChange={(e) => {
-              setName(e.target.value)
-            }}
-            placeholder="Code Smith"
-            data-testid="agent-name-input"
-          />
-        </Field>
-
-        <Field label="What it does">
-          <input
-            className={inputClass}
-            value={role}
-            onChange={(e) => {
-              setRole(e.target.value)
-            }}
-            placeholder="Implements the task in its worktree"
-          />
-        </Field>
-
-        <Field label="Runtime">
-          <select
-            className={inputClass}
-            value={runtime}
-            onChange={(e) => {
-              changeRuntime(e.target.value as AgentRuntime)
-            }}
-            data-testid="agent-runtime-select"
+        {/* Header */}
+        <div className="flex items-center justify-between border-b border-border-default px-5 py-4">
+          <h3 className="text-base font-semibold text-text-primary">
+            {agent ? 'Edit agent' : 'New agent'}
+          </h3>
+          <button
+            type="button"
+            onClick={onCancel}
+            aria-label="Close"
             style={{ cursor: 'pointer' }}
+            className="rounded p-1 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary"
           >
-            {(runtimes.length > 0
-              ? runtimes
-              : [
-                  { kind: 'claude' as const, label: 'Claude' },
-                  { kind: 'codex' as const, label: 'Codex' },
-                  { kind: 'script' as const, label: 'Script' },
-                ]
-            ).map((r) => (
-              <option key={r.kind} value={r.kind}>
-                {r.label}
-              </option>
-            ))}
-          </select>
-        </Field>
-
-        <Field label="Portrait">
-          <div className="flex gap-2">
-            {GRADIENTS.map((g) => (
-              <button
-                key={g.from}
-                type="button"
-                onClick={() => {
-                  setGradient(g)
-                }}
-                aria-label={`Portrait colour ${g.from}`}
-                style={{
-                  cursor: 'pointer',
-                  background: `linear-gradient(140deg, ${g.from}, ${g.to})`,
-                }}
-                className={`h-8 w-8 rounded-md border-2 ${
-                  gradient?.from === g.from ? 'border-accent' : 'border-transparent'
-                }`}
-              />
-            ))}
-          </div>
-        </Field>
+            <svg viewBox="0 0 16 16" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+              <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+            </svg>
+          </button>
+        </div>
 
-        {llm && (
-          <>
-            <Field label="System prompt">
-              <textarea
-                className={`${inputClass} min-h-20 resize-y`}
-                value={llm.systemPrompt}
-                onChange={(e) => {
-                  patchLlm({ systemPrompt: e.target.value })
-                }}
-                placeholder="You implement the task described in .task.md"
-              />
-            </Field>
-            <Field label="Model (blank = CLI default)">
+        {/* Scrollable body */}
+        <div className="flex-1 overflow-y-auto p-5">
+          <div className="space-y-4">
+            <Field label="Name">
               <input
                 className={inputClass}
-                value={llm.model}
+                value={name}
                 onChange={(e) => {
-                  patchLlm({ model: e.target.value })
+                  setName(e.target.value)
                 }}
-                placeholder="opus"
+                placeholder="e.g. Code Smith"
+                autoFocus
+                data-testid="agent-name-input"
               />
             </Field>
-            <Field label="MCP config path">
+
+            <Field label="What it does">
               <input
                 className={inputClass}
-                value={llm.mcpConfigPath}
+                value={role}
                 onChange={(e) => {
-                  patchLlm({ mcpConfigPath: e.target.value })
+                  setRole(e.target.value)
                 }}
-                placeholder="/path/to/mcp.json"
+                placeholder="e.g. Implements the task in its worktree"
               />
             </Field>
-            <Field label="Allowed tools (one per line — needs an MCP config)">
-              <textarea
-                className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
-                value={llm.allowedTools.join('\n')}
-                onChange={(e) => {
-                  patchLlm({ allowedTools: linesToList(e.target.value) })
-                }}
-              />
-            </Field>
-            <Field label="Skills">
-              {skills.length === 0 ? (
-                <p className="text-xs italic text-text-secondary">
-                  No skills defined yet — create them in Settings → Skills.
-                </p>
-              ) : (
-                <div className="flex flex-col gap-1">
-                  {skills.map((s) => {
-                    const checked = llm.skillIds.includes(s.id)
-                    return (
-                      <label key={s.id} className="flex items-center gap-2 text-[13px]">
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          onChange={() => {
-                            patchLlm({
-                              skillIds: checked
-                                ? llm.skillIds.filter((id) => id !== s.id)
-                                : [...llm.skillIds, s.id],
-                            })
-                          }}
-                        />
-                        <span className="text-text-primary">{s.name}</span>
-                      </label>
-                    )
-                  })}
-                </div>
-              )}
-            </Field>
-          </>
-        )}
 
-        {script && (
-          <>
-            <Field label="Command">
-              <input
+            <Field label="Runtime">
+              <select
                 className={inputClass}
-                value={script.command}
+                value={runtime}
                 onChange={(e) => {
-                  patchScript({ command: e.target.value })
+                  changeRuntime(e.target.value as AgentRuntime)
                 }}
-                placeholder="./render.sh"
-                data-testid="agent-command-input"
-              />
+                data-testid="agent-runtime-select"
+                style={{ cursor: 'pointer' }}
+              >
+                {runtimeOptions.map((r) => (
+                  <option key={r.kind} value={r.kind}>
+                    {r.label}
+                  </option>
+                ))}
+              </select>
             </Field>
-            <Field label="Arguments (one per line)">
-              <textarea
-                className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
-                value={script.args.join('\n')}
-                onChange={(e) => {
-                  patchScript({ args: linesToList(e.target.value) })
-                }}
-              />
-            </Field>
-            <Field label="Environment (KEY=value, one per line)">
-              <textarea
-                className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
-                value={envToLines(script.env)}
-                onChange={(e) => {
-                  patchScript({ env: linesToEnv(e.target.value) })
-                }}
-              />
+
+            <Field label="Portrait">
+              <div className="flex gap-2">
+                {GRADIENTS.map((g) => (
+                  <button
+                    key={g.from}
+                    type="button"
+                    onClick={() => {
+                      setGradient(g)
+                    }}
+                    aria-label={`Portrait colour ${g.from}`}
+                    aria-pressed={gradient?.from === g.from}
+                    style={{
+                      cursor: 'pointer',
+                      background: `linear-gradient(140deg, ${g.from}, ${g.to})`,
+                    }}
+                    className={`h-8 w-8 rounded-lg border-2 transition-colors ${
+                      gradient?.from === g.from ? 'border-accent' : 'border-transparent'
+                    }`}
+                  />
+                ))}
+              </div>
             </Field>
-          </>
-        )}
 
-        {error && (
-          <p className="mb-3 rounded-md border border-error/40 bg-error/10 px-2.5 py-1.5 text-xs text-error">
-            {error}
-          </p>
-        )}
+            {llm && (
+              <>
+                <Field label="System prompt">
+                  <textarea
+                    className={`${inputClass} min-h-20 resize-y`}
+                    value={llm.systemPrompt}
+                    onChange={(e) => {
+                      patchLlm({ systemPrompt: e.target.value })
+                    }}
+                    placeholder="e.g. Implement the task described in .task.md"
+                  />
+                </Field>
+
+                <Field label="Model" hint="Leave blank to use the CLI's default.">
+                  <input
+                    className={inputClass}
+                    value={llm.model}
+                    onChange={(e) => {
+                      patchLlm({ model: e.target.value })
+                    }}
+                    placeholder="e.g. opus"
+                  />
+                </Field>
+
+                <Field label="MCP config path">
+                  <input
+                    className={inputClass}
+                    value={llm.mcpConfigPath}
+                    onChange={(e) => {
+                      patchLlm({ mcpConfigPath: e.target.value })
+                    }}
+                    placeholder="e.g. /path/to/mcp.json"
+                  />
+                </Field>
+
+                <Field
+                  label="Allowed tools"
+                  hint="One per line. Only applies when an MCP config is set."
+                >
+                  <textarea
+                    className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
+                    value={llm.allowedTools.join('\n')}
+                    onChange={(e) => {
+                      patchLlm({ allowedTools: linesToList(e.target.value) })
+                    }}
+                  />
+                </Field>
+
+                <Field label="Skills">
+                  {skills.length === 0 ? (
+                    <p className="text-xs text-text-secondary">
+                      No skills defined yet. Add them in Settings → Skills.
+                    </p>
+                  ) : (
+                    <div className="flex flex-col gap-1.5">
+                      {skills.map((s) => {
+                        const checked = llm.skillIds.includes(s.id)
+                        return (
+                          <label
+                            key={s.id}
+                            className="flex items-center gap-2 text-sm text-text-primary"
+                            style={{ cursor: 'pointer' }}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={() => {
+                                patchLlm({
+                                  skillIds: checked
+                                    ? llm.skillIds.filter((id) => id !== s.id)
+                                    : [...llm.skillIds, s.id],
+                                })
+                              }}
+                              className="h-3.5 w-3.5 rounded accent-accent"
+                            />
+                            {s.name}
+                          </label>
+                        )
+                      })}
+                    </div>
+                  )}
+                </Field>
+              </>
+            )}
+
+            {script && (
+              <>
+                <Field label="Command">
+                  <input
+                    className={inputClass}
+                    value={script.command}
+                    onChange={(e) => {
+                      patchScript({ command: e.target.value })
+                    }}
+                    placeholder="e.g. ./render.sh"
+                    data-testid="agent-command-input"
+                  />
+                </Field>
+
+                <Field label="Arguments" hint="One per line.">
+                  <textarea
+                    className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
+                    value={script.args.join('\n')}
+                    onChange={(e) => {
+                      patchScript({ args: linesToList(e.target.value) })
+                    }}
+                  />
+                </Field>
+
+                <Field label="Environment" hint="One KEY=value per line.">
+                  <textarea
+                    className={`${inputClass} min-h-16 resize-y font-mono text-xs`}
+                    value={envToLines(script.env)}
+                    onChange={(e) => {
+                      patchScript({ env: linesToEnv(e.target.value) })
+                    }}
+                  />
+                </Field>
+              </>
+            )}
+
+            {error && (
+              <p className="rounded-lg border border-error/40 bg-error/10 px-3 py-2 text-xs text-error">
+                {error}
+              </p>
+            )}
+          </div>
+        </div>
 
-        <div className="mt-2 flex justify-end gap-2">
+        {/* Footer actions */}
+        <div className="flex justify-end gap-2 border-t border-border-default px-5 py-3">
           <button
             type="button"
             onClick={onCancel}
             style={{ cursor: 'pointer' }}
-            className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-text-primary hover:bg-surface-hover"
+            className="rounded-lg border border-border-default px-4 py-2 text-sm text-text-secondary transition-colors hover:text-text-primary"
           >
             Cancel
           </button>
@@ -363,9 +411,9 @@ export function AgentEditor({ agent, seed, onSave, onCancel }: Props) {
             disabled={saving}
             data-testid="agent-save"
             style={{ cursor: 'pointer' }}
-            className="rounded-lg bg-accent px-3 py-1.5 text-[13px] font-semibold text-bg disabled:opacity-50"
+            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-bg transition-opacity disabled:opacity-50"
           >
-            {saving ? 'Saving…' : 'Save'}
+            {saving ? 'Saving…' : agent ? 'Save agent' : 'Create agent'}
           </button>
         </div>
       </div>
diff --git a/src/components/roster/agent-tile.tsx b/src/components/roster/agent-tile.tsx
index 3cf5097f..4a751337 100644
--- a/src/components/roster/agent-tile.tsx
+++ b/src/components/roster/agent-tile.tsx
@@ -2,23 +2,17 @@ import type { Agent } from '@/types'
 import { parseAgentAvatar } from '@/types'
 
 /**
- * Character-select tile for one agent. The portrait is initials over the
- * agent's stored gradient, with a faint scanline overlay — the "roster" feel
- * comes from here, so keep it distinct from a plain list row.
+ * Character-select tile for one agent.
+ *
+ * The gradient portrait is the roster's one deliberate flourish — everything
+ * else here uses the app's ordinary surface/border/text tokens so a grid of
+ * agents reads as part of the same product as the board.
+ *
+ * The runtime is stated in words rather than colour-coded: the portrait already
+ * distinguishes agents at a glance, the toolbar already filters by runtime, and
+ * a per-runtime hue would mean inventing palette entries the design system
+ * doesn't have.
  */
-
-const RUNTIME_TONE: Record<Agent['runtime'], string> = {
-  claude: 'text-[#56c2d6]',
-  codex: 'text-[#56c2d6]',
-  script: 'text-[#b58cff]',
-}
-
-const RUNTIME_DOT: Record<Agent['runtime'], string> = {
-  claude: 'bg-[#56c2d6]',
-  codex: 'bg-[#56c2d6]',
-  script: 'bg-[#b58cff]',
-}
-
 export function AgentTile({
   agent,
   selected,
@@ -37,10 +31,10 @@ export function AgentTile({
       aria-pressed={selected}
       data-testid={`agent-tile-${agent.id}`}
       style={{ cursor: 'pointer' }}
-      className={`group relative overflow-hidden rounded-lg border text-left transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent ${
+      className={`group relative overflow-hidden rounded-lg border bg-surface text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg ${
         selected
-          ? 'border-accent shadow-[0_0_0_1px_var(--accent)]'
-          : 'border-border-default hover:-translate-y-0.5 hover:border-text-secondary'
+          ? 'border-accent'
+          : 'border-border-default hover:border-text-secondary'
       }`}
     >
       <div
@@ -49,30 +43,18 @@ export function AgentTile({
           background: `linear-gradient(140deg, ${avatar.gradientFrom}, ${avatar.gradientTo})`,
         }}
       >
-        <span className="font-mono text-2xl font-extrabold tracking-tight text-white/90">
+        <span className="font-mono text-2xl font-bold tracking-tight text-white/90">
           {avatar.initials}
         </span>
-        {/* Scanlines — decorative only. */}
-        <span
-          aria-hidden="true"
-          className="absolute inset-0 opacity-40"
-          style={{
-            backgroundImage: 'linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px)',
-            backgroundSize: '100% 7px',
-          }}
-        />
         {selected && (
-          <span className="absolute left-2 top-2 rounded bg-accent px-1.5 py-0.5 font-mono text-[9px] font-bold tracking-wider text-bg">
-            SELECTED
+          <span className="absolute left-2 top-2 rounded bg-accent px-1.5 py-0.5 text-[10px] font-medium text-bg">
+            Selected
           </span>
         )}
       </div>
-      <div className="bg-surface px-2.5 py-2">
-        <div className="truncate text-[13px] font-semibold text-text-primary">{agent.name}</div>
-        <div
-          className={`mt-1 flex items-center gap-1.5 font-mono text-[9.5px] uppercase tracking-wider ${RUNTIME_TONE[agent.runtime]}`}
-        >
-          <span className={`h-1.5 w-1.5 rounded-full ${RUNTIME_DOT[agent.runtime]}`} />
+      <div className="px-3 py-2">
+        <div className="truncate text-sm font-medium text-text-primary">{agent.name}</div>
+        <div className="mt-1 font-mono text-[10px] uppercase tracking-wider text-text-secondary">
           {agent.runtime}
         </div>
       </div>
@@ -87,10 +69,12 @@ export function NewAgentTile({ onClick }: { onClick: () => void }) {
       onClick={onClick}
       data-testid="agent-tile-new"
       style={{ cursor: 'pointer' }}
-      className="flex min-h-[118px] flex-col items-center justify-center rounded-lg border border-dashed border-border-default text-text-secondary transition-colors hover:border-accent hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      className="flex min-h-[118px] flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border-default text-text-secondary transition-colors hover:border-accent hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg"
     >
-      <span className="text-2xl leading-none text-accent">+</span>
-      <span className="mt-1 font-mono text-[10px] uppercase tracking-wider">New agent</span>
+      <svg viewBox="0 0 20 20" fill="currentColor" className="h-5 w-5" aria-hidden="true">
+        <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
+      </svg>
+      <span className="text-xs font-medium">New agent</span>
     </button>
   )
 }
diff --git a/src/components/roster/roster-view.test.tsx b/src/components/roster/roster-view.test.tsx
index a986bbdf..bcf416b5 100644
--- a/src/components/roster/roster-view.test.tsx
+++ b/src/components/roster/roster-view.test.tsx
@@ -90,7 +90,7 @@ describe('RosterView', () => {
     seed([agent()])
     render(<RosterView />)
     expect(screen.queryByTestId('agent-dossier')).not.toBeInTheDocument()
-    expect(screen.getByText(/select an agent/i)).toBeInTheDocument()
+    expect(screen.getByText(/pick an agent/i)).toBeInTheDocument()
   })
 
   it('drops the selection when the selected agent is filtered out', () => {
diff --git a/src/components/roster/roster-view.tsx b/src/components/roster/roster-view.tsx
index 1416b057..4096dedb 100644
--- a/src/components/roster/roster-view.tsx
+++ b/src/components/roster/roster-view.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import type { Agent, AgentRuntime } from '@/types'
 import { useRosterStore } from '@/stores/roster-store'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import * as ipc from '@/lib/ipc'
 import { AgentTile, NewAgentTile } from './agent-tile'
 import { AgentDossier } from './agent-dossier'
@@ -9,9 +10,10 @@ import { AgentEditor } from './agent-editor'
 /**
  * The Roster section — character-select for agents.
  *
- * Layout follows the settings panel: a filtered grid on the left, a detail
- * pane on the right. Mutations go through ipc and then `reload()`, mirroring
- * how scripts-tab treats its store as read-only.
+ * Layout mirrors the settings panel (sticky header + scrolling body + a detail
+ * column), so switching between Board and Roster doesn't feel like switching
+ * between two apps. Mutations go through ipc then `reload()`, treating the
+ * store as read-only the way `scripts-tab` does.
  */
 
 type Filter = 'all' | AgentRuntime
@@ -68,97 +70,108 @@ export function RosterView() {
   }
 
   return (
-    <div className="flex h-full min-h-0" data-testid="roster-view">
-      {/* Grid */}
-      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
-        <header className="shrink-0 border-b border-border-default bg-bg/80 px-5 py-3 backdrop-blur">
-          <h2 className="text-base font-semibold text-text-primary">Roster</h2>
-          <p className="mt-0.5 text-xs text-text-secondary">
-            Agents you craft once and reuse. Wiring them into board columns comes later.
-          </p>
-        </header>
-
-        <div className="flex shrink-0 flex-wrap items-center gap-2 px-5 py-3">
-          {FILTERS.map((f) => (
-            <button
-              key={f.value}
-              type="button"
-              onClick={() => {
-                setFilter(f.value)
-              }}
-              data-testid={`roster-filter-${f.value}`}
-              aria-pressed={filter === f.value}
-              style={{ cursor: 'pointer' }}
-              className={`rounded-md border px-2.5 py-1 font-mono text-[11px] uppercase tracking-wider transition-colors ${
-                filter === f.value
-                  ? 'border-accent text-accent'
-                  : 'border-border-default text-text-secondary hover:text-text-primary'
-              }`}
-            >
-              {f.label}
-            </button>
-          ))}
-          <span className="ml-auto font-mono text-[11px] text-text-secondary">
-            {visible.length} {visible.length === 1 ? 'agent' : 'agents'}
-          </span>
-        </div>
+    <div className="flex h-full min-h-0 flex-col" data-testid="roster-view">
+      {/* One title bar across both columns — a header that stopped at the grid
+          left the dossier's content floating with nothing to align to. */}
+      <header className="shrink-0 border-b border-border-default bg-bg/80 px-6 py-3 backdrop-blur">
+        <h3 className="text-base font-semibold text-text-primary">Roster</h3>
+        <p className="mt-0.5 text-xs text-text-secondary">
+          Agents you build once and reuse. Assigning them to board columns comes later.
+        </p>
+      </header>
+
+      {/* Below lg the dossier stacks under the grid rather than disappearing —
+          hiding it outright meant selecting an agent on a narrow window did
+          nothing visible at all. */}
+      <div className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:flex-row lg:overflow-hidden">
+        {/* Grid */}
+        <div className="flex min-w-0 flex-none flex-col lg:flex-1 lg:overflow-hidden">
+          <div className="flex shrink-0 flex-wrap items-center gap-2 px-6 py-3">
+            {FILTERS.map((f) => (
+              <button
+                key={f.value}
+                type="button"
+                onClick={() => {
+                  setFilter(f.value)
+                }}
+                data-testid={`roster-filter-${f.value}`}
+                aria-pressed={filter === f.value}
+                style={{ cursor: 'pointer' }}
+                className={`rounded-lg px-2.5 py-1 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-bg ${
+                  filter === f.value
+                    ? 'bg-accent/10 text-accent'
+                    : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'
+                }`}
+              >
+                {f.label}
+              </button>
+            ))}
+            <span className="ml-auto text-xs text-text-secondary">
+              {visible.length} {visible.length === 1 ? 'agent' : 'agents'}
+            </span>
+          </div>
 
-        {error && (
-          <p className="mx-5 mb-2 rounded-md border border-error/40 bg-error/10 px-2.5 py-1.5 text-xs text-error">
-            {error}
-          </p>
-        )}
+          {error && (
+            <p className="mx-6 mb-3 rounded-lg border border-error/40 bg-error/10 px-3 py-2 text-xs text-error">
+              {error}
+            </p>
+          )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-5">
-          {!loaded ? (
-            <p className="text-sm text-text-secondary">Loading roster…</p>
-          ) : (
-            <div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-3">
-              {visible.map((agent) => (
-                <AgentTile
-                  key={agent.id}
-                  agent={agent}
-                  selected={agent.id === selectedId}
-                  onSelect={() => {
-                    setSelectedId(agent.id)
+          <div className="min-h-0 px-6 pb-6 lg:flex-1 lg:overflow-y-auto">
+            {!loaded ? (
+              <p className="text-sm text-text-secondary">Loading agents…</p>
+            ) : (
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
+                {visible.map((agent) => (
+                  <AgentTile
+                    key={agent.id}
+                    agent={agent}
+                    selected={agent.id === selectedId}
+                    onSelect={() => {
+                      setSelectedId(agent.id)
+                    }}
+                  />
+                ))}
+                <NewAgentTile
+                  onClick={() => {
+                    setCreating(true)
                   }}
                 />
-              ))}
-              <NewAgentTile
-                onClick={() => {
-                  setCreating(true)
-                }}
-              />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Dossier */}
+        <aside
+          className={`shrink-0 overflow-y-auto border-border-default lg:w-[380px] lg:border-l ${
+            selected ? 'border-t lg:border-t-0' : 'hidden lg:block'
+          }`}
+        >
+          {selected ? (
+            <AgentDossier
+              agent={selected}
+              onEdit={() => {
+                setEditing(selected)
+              }}
+              onDuplicate={() => {
+                setSeed(selected)
+                setCreating(true)
+              }}
+              onDelete={() => {
+                setConfirmDelete(selected.id)
+              }}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center p-6">
+              <p className="text-center text-sm text-text-secondary">
+                Pick an agent to see how it's set up.
+              </p>
             </div>
           )}
-        </div>
+        </aside>
       </div>
 
-      {/* Dossier */}
-      <aside className="hidden w-[380px] shrink-0 border-l border-border-default lg:block">
-        {selected ? (
-          <AgentDossier
-            agent={selected}
-            onEdit={() => {
-              setEditing(selected)
-            }}
-            onDuplicate={() => {
-              setSeed(selected)
-              setCreating(true)
-            }}
-            onDelete={() => {
-              setConfirmDelete(selected.id)
-            }}
-          />
-        ) : (
-          <div className="flex h-full items-center justify-center p-6 text-center">
-            <p className="text-sm text-text-secondary">
-              Select an agent to see its dossier — the fields change with its runtime.
-            </p>
-          </div>
-        )}
-      </aside>
-
       {(editing ?? creating) && (
         <AgentEditor
           agent={editing}
@@ -172,37 +185,17 @@ export function RosterView() {
       )}
 
       {confirmDelete !== null && (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-sm rounded-xl border border-border-default bg-bg p-5 shadow-2xl">
-            <h3 className="text-base font-semibold text-text-primary">Delete this agent?</h3>
-            <p className="mt-1 text-[13px] text-text-secondary">
-              This removes the definition. Nothing that already ran is affected.
-            </p>
-            <div className="mt-4 flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => {
-                  setConfirmDelete(null)
-                }}
-                style={{ cursor: 'pointer' }}
-                className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-text-primary hover:bg-surface-hover"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  void handleDelete(confirmDelete)
-                }}
-                data-testid="roster-confirm-delete"
-                style={{ cursor: 'pointer' }}
-                className="rounded-lg bg-error px-3 py-1.5 text-[13px] font-semibold text-bg hover:opacity-90"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
+        <ConfirmDialog
+          title="Delete this agent?"
+          body="This removes the definition. Work it has already done is unaffected."
+          testId="roster-confirm-delete"
+          onConfirm={() => {
+            void handleDelete(confirmDelete)
+          }}
+          onCancel={() => {
+            setConfirmDelete(null)
+          }}
+        />
       )}
     </div>
   )
diff --git a/src/components/settings/settings-panel.tsx b/src/components/settings/settings-panel.tsx
index 05c277b5..8f0822a5 100644
--- a/src/components/settings/settings-panel.tsx
+++ b/src/components/settings/settings-panel.tsx
@@ -72,6 +72,21 @@ const icons: Record<string, React.ReactNode> = {
       <path fillRule="evenodd" d="M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z" clipRule="evenodd" />
     </svg>
   ),
+  discord: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+      <path fillRule="evenodd" d="M10 2c-4.418 0-8 3.134-8 7 0 2.19 1.15 4.145 2.95 5.43-.13.79-.53 1.87-1.36 2.92-.19.24-.02.6.29.56 1.87-.24 3.4-1.06 4.32-1.7.58.12 1.18.19 1.8.19 4.418 0 8-3.134 8-7s-3.582-7-8-7Zm-2.5 8.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" clipRule="evenodd" />
+    </svg>
+  ),
+  runtime: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+      <path fillRule="evenodd" d="M2 4.75A1.75 1.75 0 0 1 3.75 3h12.5A1.75 1.75 0 0 1 18 4.75v10.5A1.75 1.75 0 0 1 16.25 17H3.75A1.75 1.75 0 0 1 2 15.25V4.75Zm3.03 2.22a.75.75 0 0 0 0 1.06L6.94 10 5.03 11.97a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 0 0-1.06 0ZM10.75 12a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z" clipRule="evenodd" />
+    </svg>
+  ),
+  debug: (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
+      <path fillRule="evenodd" d="M10 1a3 3 0 0 0-2.83 2H7a1 1 0 0 0 0 2h6a1 1 0 1 0 0-2h-.17A3 3 0 0 0 10 1ZM4.5 8.5A1.5 1.5 0 0 1 6 7h8a1.5 1.5 0 0 1 1.5 1.5V11a5.5 5.5 0 1 1-11 0V8.5ZM2 9a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Zm16 0a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0v-1a1 1 0 0 1 1-1Z" clipRule="evenodd" />
+    </svg>
+  ),
   batches: (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-4 w-4">
       <path fillRule="evenodd" d="M2 4.25A2.25 2.25 0 0 1 4.25 2h2.5A2.25 2.25 0 0 1 9 4.25v2.5A2.25 2.25 0 0 1 6.75 9h-2.5A2.25 2.25 0 0 1 2 6.75v-2.5Zm0 9A2.25 2.25 0 0 1 4.25 11h2.5A2.25 2.25 0 0 1 9 13.25v2.5A2.25 2.25 0 0 1 6.75 18h-2.5A2.25 2.25 0 0 1 2 15.75v-2.5Zm9-9A2.25 2.25 0 0 1 13.25 2h2.5A2.25 2.25 0 0 1 18 4.25v2.5A2.25 2.25 0 0 1 15.75 9h-2.5A2.25 2.25 0 0 1 11 6.75v-2.5Zm0 9A2.25 2.25 0 0 1 13.25 11h2.5A2.25 2.25 0 0 1 18 13.25v2.5A2.25 2.25 0 0 1 15.75 18h-2.5A2.25 2.25 0 0 1 11 15.75v-2.5Z" clipRule="evenodd" />
diff --git a/src/components/settings/tabs/skills-tab.tsx b/src/components/settings/tabs/skills-tab.tsx
index 2f9a6c9d..792fb219 100644
--- a/src/components/settings/tabs/skills-tab.tsx
+++ b/src/components/settings/tabs/skills-tab.tsx
@@ -2,18 +2,22 @@ import { useEffect, useState } from 'react'
 import type { Skill } from '@/types'
 import * as ipc from '@/lib/ipc'
 import { useRosterStore } from '@/stores/roster-store'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 
 /**
- * Skills — reusable capabilities that can be attached to an LLM agent.
+ * Skills — reusable capabilities you can attach to an LLM agent in the Roster.
  *
- * Skills previously existed only as an inert type in settings.ts that persisted
- * to localStorage and that no backend code could read. They now have a real
- * table (migration 049), so they survive, and the backend can reach them when
- * agents are eventually wired into the pipeline.
+ * Skills used to exist only as an inert type in `settings.ts` that persisted to
+ * localStorage and that no backend code could read. They now have a real table
+ * (migration 049), so the backend can reach them when agents are wired into the
+ * pipeline.
+ *
+ * Chrome matches `script-editor.tsx` — same header / body / footer, same
+ * controls — since this is the same kind of object in the same panel.
  */
 
 const inputClass =
-  'w-full rounded-md border border-border-default bg-surface px-2.5 py-1.5 text-[13px] text-text-primary outline-none focus:border-accent'
+  'w-full rounded-lg border border-border-default bg-bg px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary/50 focus:border-accent focus:outline-none'
 
 function SkillEditor({
   skill,
@@ -40,12 +44,7 @@ function SkillEditor({
     setError(null)
     try {
       if (skill) {
-        await ipc.updateSkill(skill.id, {
-          name: name.trim(),
-          description,
-          trigger,
-          script,
-        })
+        await ipc.updateSkill(skill.id, { name: name.trim(), description, trigger, script })
       } else {
         await ipc.createSkill(name.trim(), description, trigger, script)
       }
@@ -73,65 +72,92 @@ function SkillEditor({
         aria-modal="true"
         aria-label={skill ? 'Edit skill' : 'New skill'}
         data-testid="skill-editor"
-        className="flex max-h-[85vh] w-full max-w-lg flex-col overflow-y-auto rounded-xl border border-border-default bg-bg p-5 shadow-2xl"
+        className="flex max-h-[85vh] w-full max-w-lg flex-col rounded-xl border border-border-default bg-bg shadow-2xl"
       >
-        <h3 className="mb-4 text-base font-semibold text-text-primary">
-          {skill ? 'Edit skill' : 'New skill'}
-        </h3>
-        <label className="mb-3 block">
-          <span className="mb-1 block text-xs font-medium text-text-secondary">Name</span>
-          <input
-            className={inputClass}
-            value={name}
-            onChange={(e) => {
-              setName(e.target.value)
-            }}
-            data-testid="skill-name-input"
-          />
-        </label>
-        <label className="mb-3 block">
-          <span className="mb-1 block text-xs font-medium text-text-secondary">Description</span>
-          <input
-            className={inputClass}
-            value={description}
-            onChange={(e) => {
-              setDescription(e.target.value)
-            }}
-          />
-        </label>
-        <label className="mb-3 block">
-          <span className="mb-1 block text-xs font-medium text-text-secondary">
-            Trigger (when the agent should reach for it)
-          </span>
-          <input
-            className={inputClass}
-            value={trigger}
-            onChange={(e) => {
-              setTrigger(e.target.value)
-            }}
-          />
-        </label>
-        <label className="mb-3 block">
-          <span className="mb-1 block text-xs font-medium text-text-secondary">Script</span>
-          <textarea
-            className={`${inputClass} min-h-24 resize-y font-mono text-xs`}
-            value={script}
-            onChange={(e) => {
-              setScript(e.target.value)
-            }}
-          />
-        </label>
-        {error && (
-          <p className="mb-3 rounded-md border border-error/40 bg-error/10 px-2.5 py-1.5 text-xs text-error">
-            {error}
-          </p>
-        )}
-        <div className="mt-2 flex justify-end gap-2">
+        <div className="flex items-center justify-between border-b border-border-default px-5 py-4">
+          <h3 className="text-base font-semibold text-text-primary">
+            {skill ? 'Edit skill' : 'New skill'}
+          </h3>
+          <button
+            type="button"
+            onClick={onCancel}
+            aria-label="Close"
+            style={{ cursor: 'pointer' }}
+            className="rounded p-1 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary"
+          >
+            <svg viewBox="0 0 16 16" fill="currentColor" className="h-4 w-4" aria-hidden="true">
+              <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto p-5">
+          <div className="space-y-4">
+            <div>
+              <label className="mb-1 block text-xs font-medium text-text-secondary">Name</label>
+              <input
+                className={inputClass}
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value)
+                }}
+                placeholder="e.g. Run tests"
+                autoFocus
+                data-testid="skill-name-input"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-text-secondary">
+                Description
+              </label>
+              <input
+                className={inputClass}
+                value={description}
+                onChange={(e) => {
+                  setDescription(e.target.value)
+                }}
+                placeholder="e.g. Runs the unit suite and reports failures"
+              />
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-text-secondary">Trigger</label>
+              <input
+                className={inputClass}
+                value={trigger}
+                onChange={(e) => {
+                  setTrigger(e.target.value)
+                }}
+                placeholder="e.g. before opening a PR"
+              />
+              <p className="mt-1 text-xs text-text-secondary/70">
+                When the agent should reach for this.
+              </p>
+            </div>
+            <div>
+              <label className="mb-1 block text-xs font-medium text-text-secondary">Script</label>
+              <textarea
+                className={`${inputClass} min-h-24 resize-y font-mono text-xs`}
+                value={script}
+                onChange={(e) => {
+                  setScript(e.target.value)
+                }}
+                placeholder="npm test"
+              />
+            </div>
+            {error && (
+              <p className="rounded-lg border border-error/40 bg-error/10 px-3 py-2 text-xs text-error">
+                {error}
+              </p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-border-default px-5 py-3">
           <button
             type="button"
             onClick={onCancel}
             style={{ cursor: 'pointer' }}
-            className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-text-primary hover:bg-surface-hover"
+            className="rounded-lg border border-border-default px-4 py-2 text-sm text-text-secondary transition-colors hover:text-text-primary"
           >
             Cancel
           </button>
@@ -143,9 +169,9 @@ function SkillEditor({
             disabled={saving}
             data-testid="skill-save"
             style={{ cursor: 'pointer' }}
-            className="rounded-lg bg-accent px-3 py-1.5 text-[13px] font-semibold text-bg disabled:opacity-50"
+            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-bg transition-opacity disabled:opacity-50"
           >
-            {saving ? 'Saving…' : 'Save'}
+            {saving ? 'Saving…' : skill ? 'Save skill' : 'Create skill'}
           </button>
         </div>
       </div>
@@ -179,7 +205,7 @@ export function SkillsTab() {
   }, [])
 
   // Agents reference skills by id, so the roster's copy has to follow along or
-  // a freshly-renamed skill would still show its old name in a dossier.
+  // a renamed skill would still show its old name in a dossier.
   const refreshAll = async () => {
     await load()
     await reloadRoster()
@@ -198,21 +224,22 @@ export function SkillsTab() {
   return (
     <div data-testid="skills-tab">
       <p className="mb-4 text-xs text-text-secondary">
-        Reusable capabilities you can attach to an LLM agent in the Roster. Defining them here
-        makes them available to every agent; passing them through to a running CLI lands with
+        Attach these to an agent in the Roster. Passing them through to a running CLI lands with
         pipeline wiring.
       </p>
 
       {loadError && (
-        <p className="mb-3 rounded-md border border-error/40 bg-error/10 px-2.5 py-1.5 text-xs text-error">
+        <p className="mb-3 rounded-lg border border-error/40 bg-error/10 px-3 py-2 text-xs text-error">
           {loadError}
         </p>
       )}
 
       {loading ? (
-        <p className="text-sm text-text-secondary">Loading…</p>
+        <p className="text-sm text-text-secondary">Loading skills…</p>
       ) : skills.length === 0 ? (
-        <p className="mb-4 text-sm italic text-text-secondary">No skills defined yet.</p>
+        <p className="mb-4 text-sm text-text-secondary">
+          No skills yet. Create one to attach it to an agent.
+        </p>
       ) : (
         <ul className="mb-4 flex flex-col gap-2">
           {skills.map((skill) => (
@@ -221,7 +248,7 @@ export function SkillsTab() {
               className="flex items-start gap-3 rounded-lg border border-border-default bg-surface px-3 py-2"
             >
               <div className="min-w-0 flex-1">
-                <div className="text-[13px] font-medium text-text-primary">{skill.name}</div>
+                <div className="text-sm font-medium text-text-primary">{skill.name}</div>
                 {skill.description && (
                   <div className="mt-0.5 text-xs text-text-secondary">{skill.description}</div>
                 )}
@@ -232,7 +259,7 @@ export function SkillsTab() {
                   setEditing(skill)
                 }}
                 style={{ cursor: 'pointer' }}
-                className="rounded border border-border-default px-2 py-0.5 text-xs text-text-primary hover:bg-surface-hover"
+                className="rounded-lg border border-border-default px-2.5 py-1 text-xs text-text-secondary transition-colors hover:text-text-primary"
               >
                 Edit
               </button>
@@ -243,7 +270,7 @@ export function SkillsTab() {
                 }}
                 data-testid={`skill-delete-${skill.id}`}
                 style={{ cursor: 'pointer' }}
-                className="rounded border border-border-default px-2 py-0.5 text-xs text-error hover:bg-error/10"
+                className="rounded-lg border border-border-default px-2.5 py-1 text-xs text-error transition-colors hover:bg-error/10"
               >
                 Delete
               </button>
@@ -259,7 +286,7 @@ export function SkillsTab() {
         }}
         data-testid="skill-new"
         style={{ cursor: 'pointer' }}
-        className="rounded-lg bg-accent px-3 py-1.5 text-[13px] font-semibold text-bg hover:opacity-90"
+        className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-bg transition-opacity hover:opacity-90"
       >
         New skill
       </button>
@@ -280,37 +307,17 @@ export function SkillsTab() {
       )}
 
       {confirmDelete !== null && (
-        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
-          <div className="w-full max-w-sm rounded-xl border border-border-default bg-bg p-5 shadow-2xl">
-            <h3 className="text-base font-semibold text-text-primary">Delete this skill?</h3>
-            <p className="mt-1 text-[13px] text-text-secondary">
-              Agents referencing it will show it as a missing skill until you detach it.
-            </p>
-            <div className="mt-4 flex justify-end gap-2">
-              <button
-                type="button"
-                onClick={() => {
-                  setConfirmDelete(null)
-                }}
-                style={{ cursor: 'pointer' }}
-                className="rounded-lg border border-border-default px-3 py-1.5 text-[13px] text-text-primary hover:bg-surface-hover"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                onClick={() => {
-                  void handleDelete(confirmDelete)
-                }}
-                data-testid="skill-confirm-delete"
-                style={{ cursor: 'pointer' }}
-                className="rounded-lg bg-error px-3 py-1.5 text-[13px] font-semibold text-bg hover:opacity-90"
-              >
-                Delete
-              </button>
-            </div>
-          </div>
-        </div>
+        <ConfirmDialog
+          title="Delete this skill?"
+          body="Agents that use it will show it as a missing skill until you detach it."
+          testId="skill-confirm-delete"
+          onConfirm={() => {
+            void handleDelete(confirmDelete)
+          }}
+          onCancel={() => {
+            setConfirmDelete(null)
+          }}
+        />
       )}
     </div>
   )
diff --git a/src/components/shared/confirm-dialog.tsx b/src/components/shared/confirm-dialog.tsx
new file mode 100644
index 00000000..89fd9810
--- /dev/null
+++ b/src/components/shared/confirm-dialog.tsx
@@ -0,0 +1,78 @@
+import { useEffect } from 'react'
+
+/**
+ * Destructive-action confirmation.
+ *
+ * Follows the app's established overlay recipe (fixed inset-0 z-[60] scrim +
+ * rounded-xl card) rather than the native `<dialog>` in `dialog.tsx`, which
+ * nothing else in the app uses.
+ */
+export function ConfirmDialog({
+  title,
+  body,
+  confirmLabel = 'Delete',
+  onConfirm,
+  onCancel,
+  testId,
+}: {
+  title: string
+  body: string
+  confirmLabel?: string
+  onConfirm: () => void
+  onCancel: () => void
+  testId?: string
+}) {
+  // Escape closes from anywhere, not just when the card has focus.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onCancel()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+    }
+  }, [onCancel])
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel()
+      }}
+      role="presentation"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+        className="w-full max-w-sm rounded-xl border border-border-default bg-bg shadow-2xl"
+      >
+        <div className="border-b border-border-default px-5 py-4">
+          <h3 className="text-base font-semibold text-text-primary">{title}</h3>
+        </div>
+        <div className="px-5 py-4">
+          <p className="text-sm text-text-secondary">{body}</p>
+        </div>
+        <div className="flex justify-end gap-2 border-t border-border-default px-5 py-3">
+          <button
+            type="button"
+            onClick={onCancel}
+            style={{ cursor: 'pointer' }}
+            className="rounded-lg border border-border-default px-4 py-2 text-sm text-text-secondary transition-colors hover:text-text-primary"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            data-testid={testId}
+            style={{ cursor: 'pointer' }}
+            className="rounded-lg bg-error px-4 py-2 text-sm font-medium text-bg transition-opacity hover:opacity-90"
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}