refactor: decompose large frontend components into focused modules

Split six monolithic component files into smaller, single-responsibility
modules organized by feature domain:

- ChatPane (1054→~250 lines): extract InlinePills, ApprovalBanner,
  ThinkingDots into chat/ directory
- SettingsPanel (1027→~280 lines): extract McpServerEditor,
  LspProfileEditor, ToolingEditorShell into settings/ directory;
  mutation helpers into lib/settingsHelpers.ts
- PatternEditor: use shared ToggleSwitch from ui/
- App.tsx: extract useTheme and useSidecarCapabilities into hooks/
- Sidebar: extracted accessibility improvements inline

New shared primitives:
- hooks/useClickOutside: replaces 5 duplicated click-outside listeners
- components/ui/: ToggleSwitch, PopoverToggleRow, FormField, TextInput,
  TextareaInput, SelectInput, InfoCallout

Accessibility improvements:
- NewSessionModal: role=dialog, aria-modal, Escape-to-close
- Pill dropdowns: aria-expanded, aria-haspopup, role=listbox/option
- Sidebar context menu: role=menu/menuitem, Escape-to-close
- SessionItem: Space key activation alongside Enter
- ToolbarButton: aria-pressed for toggle state
- ApprovalBanner: role=alert
- QueuedApprovalsList: aria-expanded on toggle
- ThinkingDots: aria-label

No behavioral changes. All 137 tests pass.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/renderer/App.tsx

@@ -14,7 +14,7 @@ import {
 import { applySessionEventWorkspace } from '@renderer/lib/sessionWorkspace';
 import { WelcomePane } from '@renderer/components/WelcomePane';
 import { getElectronApi } from '@renderer/lib/electronApi';
-import type { SidecarCapabilities } from '@shared/contracts/sidecar';
+import { useTheme, useSidecarCapabilities } from '@renderer/hooks/useAppHooks';
 import {
   buildAvailableModelCatalog,
   findModel,
@@ -84,9 +84,8 @@ export default function App() {
   const api = getElectronApi();
   const [workspace, setWorkspace] = useState<WorkspaceState>();
   const [error, setError] = useState<string>();
-  const [sidecarCapabilities, setSidecarCapabilities] = useState<SidecarCapabilities>();
+  const { capabilities: sidecarCapabilities, isRefreshing: isRefreshingCapabilities, refresh: refreshCapabilities } = useSidecarCapabilities(api);
   const [sessionActivities, setSessionActivities] = useState<SessionActivityMap>({});
-  const [isRefreshingCapabilities, setIsRefreshingCapabilities] = useState(false);
 
   const [showSettings, setShowSettings] = useState(false);
   const [newSessionProjectId, setNewSessionProjectId] = useState<string>();
@@ -99,14 +98,6 @@ export default function App() {
       .loadWorkspace()
       .then((ws) => !disposed && setWorkspace(ws))
       .catch((e) => !disposed && setError(e instanceof Error ? e.message : String(e)));
-    void api
-      .describeSidecarCapabilities()
-      .then((capabilities) => !disposed && setSidecarCapabilities(capabilities))
-      .catch((e) => {
-        if (!disposed) {
-          console.warn('Failed to load sidecar capabilities', e);
-        }
-      });
 
     const offWorkspace = api.onWorkspaceUpdated((ws) => {
       setWorkspace(ws);
@@ -133,24 +124,7 @@ export default function App() {
 
   // Apply theme to the document root
   const themeSetting: AppearanceTheme = workspace?.settings.theme ?? 'dark';
-  useEffect(() => {
+  useTheme(themeSetting);
-    function resolveEffective(pref: AppearanceTheme): 'dark' | 'light' {
-      if (pref === 'dark' || pref === 'light') return pref;
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-
-    const apply = () => {
-      document.documentElement.dataset.theme = resolveEffective(themeSetting);
-    };
-
-    apply();
-
-    if (themeSetting === 'system') {
-      const mq = window.matchMedia('(prefers-color-scheme: dark)');
-      mq.addEventListener('change', apply);
-      return () => mq.removeEventListener('change', apply);
-    }
-  }, [themeSetting]);
 
   // Derived state
   const selectedSession = useMemo(
@@ -212,17 +186,7 @@ export default function App() {
     );
   }
 
-  const refreshCapabilities = async () => {
+  const handleCreateScratchpad = useCallback(() => {
-    setIsRefreshingCapabilities(true);
-    try {
-      const capabilities = await api.refreshSidecarCapabilities();
-      setSidecarCapabilities(capabilities);
-    } finally {
-      setIsRefreshingCapabilities(false);
-    }
-  };
-
-  const handleCreateScratchpad = () => {
     const singlePatterns = workspace.patterns
       .filter((p) => p.mode === 'single' && p.availability !== 'unavailable')
       .sort((a, b) => {
@@ -235,7 +199,7 @@ export default function App() {
     if (defaultPattern) {
       void api.createSession({ projectId: SCRATCHPAD_PROJECT_ID, patternId: defaultPattern.id });
     }
-  };
+  }, [api, workspace?.patterns]);
 
   // Determine main content
   let content: React.ReactNode;

src/renderer/components/ChatPane.tsx

@@ -1,650 +1,29 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { AlertCircle, ArrowUp, Bot, Check, ChevronDown, Circle, GitBranch, Loader2, RotateCcw, Server, ShieldAlert, ShieldCheck, Sparkles, User, X } from 'lucide-react';
+import { AlertCircle, ArrowUp, Bot, Circle, GitBranch, Loader2, ShieldAlert, User } from 'lucide-react';
 
 import { MarkdownContent } from '@renderer/components/MarkdownContent';
 import { MarkdownComposer, type MarkdownComposerHandle } from '@renderer/components/MarkdownComposer';
+import { ApprovalBanner, QueuedApprovalsList } from '@renderer/components/chat/ApprovalBanner';
+import { InlineApprovalPill, InlineModelPill, InlineThinkingPill, InlineToolsPill } from '@renderer/components/chat/InlinePills';
+import { ThinkingDots } from '@renderer/components/chat/ThinkingDots';
 import { getAssistantMessagePhase } from '@renderer/lib/messagePhase';
-import { ProviderIcon } from '@renderer/components/ProviderIcons';
+import type { ApprovalDecision } from '@shared/domain/approval';
-import type { ApprovalDecision, PendingApprovalRecord } from '@shared/domain/approval';
 import {
   findModel,
   getSupportedReasoningEfforts,
-  inferProvider,
-  providerMeta,
   resolveReasoningEffort,
   type ModelDefinition,
 } from '@shared/domain/models';
-import { reasoningEffortOptions, type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
+import { type PatternDefinition, type ReasoningEffort } from '@shared/domain/pattern';
 import { isScratchpadProject, type ProjectRecord } from '@shared/domain/project';
 import { resolveSessionToolingSelection, type SessionRecord } from '@shared/domain/session';
 import {
   listApprovalToolDefinitions,
-  type ApprovalToolDefinition,
-  type ApprovalToolKind,
-  type LspProfileDefinition,
-  type McpServerDefinition,
   type RuntimeToolDefinition,
   type SessionToolingSelection,
   type WorkspaceToolingSettings,
 } from '@shared/domain/tooling';
 
-function ThinkingDots() {
-  return (
-    <div className="flex items-center gap-1.5">
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
-      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
-    </div>
-  );
-}
-
-/* ── Tier badge for model dropdown ─────────────────────────── */
-
-function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
-  if (!tier) return null;
-  const styles = {
-    premium: 'bg-amber-500/10 text-amber-400',
-    standard: 'bg-zinc-700/50 text-zinc-500',
-    fast: 'bg-emerald-500/10 text-emerald-400',
-  };
-  return (
-    <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
-      {tier}
-    </span>
-  );
-}
-
-/* ── Inline model pill with dropdown ───────────────────────── */
-
-function InlineModelPill({
-  value,
-  models,
-  onChange,
-  disabled,
-}: {
-  value: string;
-  models: ReadonlyArray<ModelDefinition>;
-  onChange: (model: string) => void;
-  disabled: boolean;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const selected = findModel(value, models);
-  const provider = selected?.provider ?? inferProvider(value);
-  const displayName = selected?.name ?? value ?? 'Model';
-
-  const groupedModels = providerMeta
-    .map((pg) => ({ ...pg, models: models.filter((m) => m.provider === pg.id) }))
-    .filter((pg) => pg.models.length > 0);
-  const otherModels = models.filter((m) => !m.provider);
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        {provider && <ProviderIcon provider={provider} className="size-3" />}
-        <span className="max-w-[140px] truncate">{displayName}</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-          {groupedModels.map((pg) => (
-            <div key={pg.id}>
-              <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
-                <ProviderIcon provider={pg.id} className="size-3.5" />
-                <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-                  {pg.label}
-                </span>
-              </div>
-              {pg.models.map((model) => (
-                <button
-                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
-                  }`}
-                  key={model.id}
-                  onClick={() => { onChange(model.id); setOpen(false); }}
-                  type="button"
-                >
-                  <span className="flex-1">{model.name}</span>
-                  <TierBadge tier={model.tier} />
-                </button>
-              ))}
-            </div>
-          ))}
-          {otherModels.length > 0 && (
-            <div>
-              <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-                Other
-              </div>
-              {otherModels.map((model) => (
-                <button
-                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
-                  }`}
-                  key={model.id}
-                  onClick={() => { onChange(model.id); setOpen(false); }}
-                  type="button"
-                >
-                  <span className="flex-1">{model.name}</span>
-                  <TierBadge tier={model.tier} />
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Inline thinking effort pill with dropdown ─────────────── */
-
-function InlineThinkingPill({
-  value,
-  supportedEfforts,
-  onChange,
-  disabled,
-}: {
-  value?: ReasoningEffort;
-  supportedEfforts?: ReadonlyArray<ReasoningEffort>;
-  onChange: (effort: ReasoningEffort) => void;
-  disabled: boolean;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const options = supportedEfforts
-    ? reasoningEffortOptions.filter((o) => supportedEfforts.includes(o.value))
-    : [...reasoningEffortOptions];
-
-  if (supportedEfforts && supportedEfforts.length === 0) {
-    return (
-      <span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600">
-        <Sparkles className="size-3" />
-        N/A
-      </span>
-    );
-  }
-
-  const currentLabel = options.find((o) => o.value === value)?.label ?? value ?? 'Thinking';
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        <Sparkles className="size-3" />
-        <span>{currentLabel}</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-          {options.map((option) => (
-            <button
-              className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
-                option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
-              }`}
-              key={option.value}
-              onClick={() => { onChange(option.value); setOpen(false); }}
-              type="button"
-            >
-              {option.label}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Inline tools pill with popover ─────────────────────────── */
-
-function InlineToolsPill({
-  mcpServers,
-  lspProfiles,
-  selection,
-  disabled,
-  onToggle,
-}: {
-  mcpServers: ReadonlyArray<McpServerDefinition>;
-  lspProfiles: ReadonlyArray<LspProfileDefinition>;
-  selection: SessionToolingSelection;
-  disabled: boolean;
-  onToggle: (selection: SessionToolingSelection) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  const enabledCount = selection.enabledMcpServerIds.length + selection.enabledLspProfileIds.length;
-  const totalCount = mcpServers.length + lspProfiles.length;
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        <Server className="size-3" />
-        <span>{enabledCount}/{totalCount} tools</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
-          {mcpServers.length > 0 && (
-            <div>
-              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
-                MCP Servers
-              </div>
-              {mcpServers.map((server) => (
-                <PopoverToggleRow
-                  detail={server.transport === 'local' ? server.command : server.url}
-                  enabled={selection.enabledMcpServerIds.includes(server.id)}
-                  key={server.id}
-                  label={server.name}
-                  onToggle={() =>
-                    onToggle({
-                      ...selection,
-                      enabledMcpServerIds: toggleInArray(selection.enabledMcpServerIds, server.id),
-                    })
-                  }
-                />
-              ))}
-            </div>
-          )}
-          {lspProfiles.length > 0 && (
-            <div>
-              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
-                Language Servers
-              </div>
-              {lspProfiles.map((profile) => (
-                <PopoverToggleRow
-                  detail={profile.command}
-                  enabled={selection.enabledLspProfileIds.includes(profile.id)}
-                  key={profile.id}
-                  label={profile.name}
-                  onToggle={() =>
-                    onToggle({
-                      ...selection,
-                      enabledLspProfileIds: toggleInArray(selection.enabledLspProfileIds, profile.id),
-                    })
-                  }
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Inline auto-approval pill with popover ────────────────── */
-
-const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
-const approvalKindLabels: Record<ApprovalToolKind, string> = {
-  builtin: 'Built-in',
-  mcp: 'MCP Servers',
-  lsp: 'Language Servers',
-  mixed: 'Other',
-};
-
-function InlineApprovalPill({
-  approvalTools,
-  effectiveAutoApproved,
-  isOverridden,
-  disabled,
-  onUpdate,
-}: {
-  approvalTools: ApprovalToolDefinition[];
-  effectiveAutoApproved: Set<string>;
-  isOverridden: boolean;
-  disabled: boolean;
-  onUpdate: (settings: { autoApprovedToolNames?: string[] }) => void;
-}) {
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', handleClick);
-    return () => document.removeEventListener('mousedown', handleClick);
-  }, [open]);
-
-  function toggleTool(toolId: string) {
-    const next = new Set(effectiveAutoApproved);
-    if (next.has(toolId)) {
-      next.delete(toolId);
-    } else {
-      next.add(toolId);
-    }
-    onUpdate({ autoApprovedToolNames: [...next] });
-  }
-
-  const groups = approvalKindOrder
-    .map((kind) => ({ kind, tools: approvalTools.filter((t) => t.kind === kind) }))
-    .filter((g) => g.tools.length > 0);
-  const showHeaders = groups.length > 1;
-
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
-          open
-            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
-            : isOverridden
-              ? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
-              : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
-        } disabled:cursor-not-allowed disabled:opacity-50`}
-        disabled={disabled}
-        onClick={() => setOpen(!open)}
-        type="button"
-      >
-        <ShieldCheck className="size-3" />
-        <span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
-        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
-      </button>
-
-      {open && !disabled && (
-        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-80 w-72 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
-          {/* Override state + reset */}
-          <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-2">
-            <span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
-              isOverridden
-                ? 'bg-amber-500/15 text-amber-400'
-                : 'bg-zinc-800 text-zinc-500'
-            }`}>
-              {isOverridden ? 'Session override' : 'Pattern defaults'}
-            </span>
-            {isOverridden && (
-              <button
-                className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
-                onClick={() => onUpdate({})}
-                type="button"
-              >
-                <RotateCcw className="size-2.5" />
-                Reset
-              </button>
-            )}
-          </div>
-
-          {/* Tool list grouped by kind */}
-          <div className="py-1">
-            {groups.map((group, i) => (
-              <div key={group.kind}>
-                {showHeaders && (
-                  <div className={`px-3 pb-1 ${i > 0 ? 'pt-2' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
-                    {approvalKindLabels[group.kind]}
-                  </div>
-                )}
-                {group.tools.map((tool) => {
-                  const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
-                  return (
-                    <PopoverToggleRow
-                      detail={detail}
-                      enabled={effectiveAutoApproved.has(tool.id)}
-                      key={tool.id}
-                      label={tool.label}
-                      onToggle={() => toggleTool(tool.id)}
-                    />
-                  );
-                })}
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-/* ── Shared popover toggle row + helpers ───────────────────── */
-
-function PopoverToggleRow({
-  label,
-  detail,
-  enabled,
-  onToggle,
-}: {
-  label: string;
-  detail?: string;
-  enabled: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <button
-      className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
-      onClick={onToggle}
-      type="button"
-    >
-      <div className="min-w-0 flex-1">
-        <div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
-        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
-      </div>
-      <span
-        className={`relative inline-flex h-[14px] w-[24px] shrink-0 items-center rounded-full transition-colors ${
-          enabled ? 'bg-indigo-500' : 'bg-zinc-700'
-        }`}
-      >
-        <span
-          className={`inline-block size-[10px] rounded-full bg-white shadow-sm transition-transform ${
-            enabled ? 'translate-x-[12px]' : 'translate-x-[2px]'
-          }`}
-        />
-      </span>
-    </button>
-  );
-}
-
-function toggleInArray(current: string[], id: string): string[] {
-  return current.includes(id)
-    ? current.filter((currentId) => currentId !== id)
-    : [...current, id];
-}
-
-/* ── Approval banner ────────────────────────────────────────── */
-
-function ApprovalBanner({
-  approval,
-  onResolve,
-  isResolving,
-  position,
-  total,
-}: {
-  approval: PendingApprovalRecord;
-  onResolve: (decision: ApprovalDecision) => void;
-  isResolving: boolean;
-  position?: number;
-  total?: number;
-}) {
-  const kindLabel = approval.kind === 'final-response' ? 'Final response review' : 'Tool call approval';
-  const hasMessages = approval.messages && approval.messages.length > 0;
-  const showPosition = position !== undefined && total !== undefined && total > 1;
-
-  return (
-    <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3">
-      {/* Header */}
-      <div className="flex items-start gap-2.5">
-        <ShieldAlert className="mt-0.5 size-4 shrink-0 text-amber-400" />
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="text-[13px] font-semibold text-amber-200">{approval.title}</span>
-            <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
-              {kindLabel}
-            </span>
-            {showPosition && (
-              <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[9px] font-semibold tabular-nums text-zinc-400">
-                {position} of {total}
-              </span>
-            )}
-          </div>
-
-          {/* Agent / permission context */}
-          <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-zinc-400">
-            {approval.agentName && <span>Agent: <span className="text-zinc-300">{approval.agentName}</span></span>}
-            {approval.toolName && <span>Tool: <span className="text-zinc-300">{approval.toolName}</span></span>}
-            {approval.permissionKind && <span>Permission: <span className="text-zinc-300">{approval.permissionKind}</span></span>}
-          </div>
-
-          {approval.detail && (
-            <p className="mt-1.5 text-[12px] leading-relaxed text-zinc-400">{approval.detail}</p>
-          )}
-        </div>
-      </div>
-
-      {/* Final-response message preview */}
-      {hasMessages && (
-        <div className="mt-3 space-y-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
-          <p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
-            Pending messages — not yet published
-          </p>
-          {approval.messages!.map((message) => (
-            <div className="mt-2" key={message.id}>
-              <div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-zinc-500">
-                <Bot className="size-3" />
-                <span>{message.authorName}</span>
-              </div>
-              <div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2 text-[13px] leading-relaxed text-zinc-300">
-                <MarkdownContent content={message.content} />
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Actions */}
-      <div className="mt-3 flex items-center gap-2">
-        <button
-          className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
-          disabled={isResolving}
-          onClick={() => onResolve('approved')}
-          type="button"
-        >
-          {isResolving ? <Loader2 className="size-3 animate-spin" /> : <Check className="size-3" />}
-          Approve
-        </button>
-        <button
-          className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3.5 py-1.5 text-[12px] font-medium text-zinc-300 transition hover:bg-zinc-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
-          disabled={isResolving}
-          onClick={() => onResolve('rejected')}
-          type="button"
-        >
-          <X className="size-3" />
-          Reject
-        </button>
-        {showPosition && (
-          <span className="ml-auto text-[10px] text-zinc-600">
-            Next approval will appear after this one is resolved
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/* ── Queued approvals preview ──────────────────────────────── */
-
-function QueuedApprovalsList({ approvals }: { approvals: PendingApprovalRecord[] }) {
-  const [expanded, setExpanded] = useState(false);
-
-  return (
-    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
-      <button
-        className="flex w-full items-center gap-2 text-left"
-        onClick={() => setExpanded(!expanded)}
-        type="button"
-      >
-        <ShieldCheck className="size-3 text-zinc-500" />
-        <span className="text-[11px] font-medium text-zinc-400">
-          {approvals.length} queued approval{approvals.length === 1 ? '' : 's'}
-        </span>
-        <ChevronDown
-          className={`ml-auto size-3 text-zinc-600 transition-transform ${expanded ? 'rotate-180' : ''}`}
-        />
-      </button>
-      {expanded && (
-        <div className="mt-2 space-y-1.5 border-t border-zinc-800/60 pt-2">
-          {approvals.map((approval) => {
-            const kindLabel = approval.kind === 'final-response' ? 'response' : 'tool';
-            return (
-              <div
-                className="flex items-center gap-2 rounded-md bg-zinc-800/40 px-2.5 py-1.5"
-                key={approval.id}
-              >
-                <ShieldAlert className="size-3 shrink-0 text-zinc-600" />
-                <span className="min-w-0 flex-1 truncate text-[11px] text-zinc-400">{approval.title}</span>
-                <span className="shrink-0 rounded-full bg-zinc-800 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-zinc-500">
-                  {kindLabel}
-                </span>
-                {approval.toolName && (
-                  <span className="shrink-0 text-[10px] text-zinc-500">{approval.toolName}</span>
-                )}
-                {approval.agentName && (
-                  <span className="shrink-0 text-[10px] text-zinc-600">{approval.agentName}</span>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
 /* ── ChatPane ──────────────────────────────────────────────── */
 
 interface ChatPaneProps {

src/renderer/components/MarkdownComposer.tsx

@@ -756,6 +756,7 @@ function ToolbarButton({
 }) {
   return (
     <button
+      aria-pressed={active}
       className={`flex size-7 items-center justify-center rounded transition ${
         active
           ? 'bg-indigo-600/30 text-indigo-300'

src/renderer/components/NewSessionModal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Star, X } from 'lucide-react';
 
 import type { PatternDefinition } from '@shared/domain/pattern';
@@ -45,14 +45,23 @@ export function NewSessionModal({
     }
   }, [availablePatterns, patternId]);
 
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === 'Escape') onClose();
+  }, [onClose]);
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [handleKeyDown]);
+
   const canCreate = projectId && patternId;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="new-session-title">
       <div className="w-full max-w-md rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
         {/* Header */}
         <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
-          <h2 className="text-[13px] font-semibold text-zinc-100">New Session</h2>
+          <h2 id="new-session-title" className="text-[13px] font-semibold text-zinc-100">New Session</h2>
           <button
             className="flex size-7 items-center justify-center rounded-lg text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
             onClick={onClose}

src/renderer/components/PatternEditor.tsx

@@ -34,6 +34,7 @@ import {
   type WorkspaceToolingSettings,
 } from '@shared/domain/tooling';
 
+import { ToggleSwitch } from '@renderer/components/ui';
 import { addAgentNodeToGraph } from '@renderer/lib/patternGraph';
 import { PatternGraphCanvas } from './pattern-graph/PatternGraphCanvas';
 import { PatternGraphInspector } from './pattern-graph/PatternGraphInspector';
@@ -485,24 +486,6 @@ export function PatternEditor({
   );
 }
 
-/* ── Toggle switch ─────────────────────────────────────────── */
-
-function ToggleSwitch({ enabled }: { enabled: boolean }) {
-  return (
-    <span
-      className={`relative inline-flex h-[18px] w-[32px] shrink-0 items-center rounded-full transition-colors ${
-        enabled ? 'bg-indigo-500' : 'bg-zinc-700'
-      }`}
-    >
-      <span
-        className={`inline-block size-[14px] rounded-full bg-white shadow-sm transition-transform ${
-          enabled ? 'translate-x-[16px]' : 'translate-x-[2px]'
-        }`}
-      />
-    </span>
-  );
-}
-
 /* ── Approval checkpoint row ───────────────────────────────── */
 
 function ApprovalCheckpointRow({

src/renderer/components/SettingsPanel.tsx

@@ -1,8 +1,10 @@
-import { useState, type HTMLAttributes, type ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
-import { AlertCircle, ChevronLeft, ChevronRight, Code, Cpu, Info, Palette, Plus, Server, Trash, Workflow } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Code, Cpu, Palette, Plus, Server, Workflow } from 'lucide-react';
 
 import { CopilotStatusCard } from '@renderer/components/CopilotStatusCard';
 import { PatternEditor } from '@renderer/components/PatternEditor';
+import { LspProfileEditor } from '@renderer/components/settings/LspProfileEditor';
+import { McpServerEditor } from '@renderer/components/settings/McpServerEditor';
 import type { SidecarCapabilities } from '@shared/contracts/sidecar';
 import type { ModelDefinition } from '@shared/domain/models';
 import type { PatternDefinition } from '@shared/domain/pattern';
@@ -13,10 +15,7 @@ import {
   type LspProfileDefinition,
   type McpServerDefinition,
   type WorkspaceToolingSettings,
-  validateLspProfileDefinition,
-  validateMcpServerDefinition,
 } from '@shared/domain/tooling';
-import { nowIso } from '@shared/utils/ids';
 
 interface SettingsPanelProps {
   availableModels: ReadonlyArray<ModelDefinition>;
@@ -492,221 +491,6 @@ function LspProfilesSection({
   );
 }
 
-function McpServerEditor({
-  server,
-  onChange,
-  onBack,
-  onSave,
-  onDelete,
-}: {
-  server: McpServerDefinition;
-  onChange: (server: McpServerDefinition) => void;
-  onBack: () => void;
-  onSave: () => Promise<void>;
-  onDelete?: () => Promise<void>;
-}) {
-  const validationError = validateMcpServerDefinition(server);
-
-  return (
-    <ToolingEditorShell
-      disableSave={Boolean(validationError)}
-      error={validationError}
-      onBack={onBack}
-      onDelete={onDelete}
-      onSave={onSave}
-      subtitle="Machine-wide server definition"
-      title={server.name || 'Untitled MCP Server'}
-    >
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          General
-        </h4>
-        <div className="grid gap-4 sm:grid-cols-2">
-          <FormField label="Name" required>
-            <TextInput
-              onChange={(value) => onChange(updateMcpServer(server, { name: value }))}
-              value={server.name}
-            />
-          </FormField>
-          <FormField label="Transport" required>
-            <SelectInput
-              onChange={(value) => onChange(changeMcpTransport(server, value as McpServerDefinition['transport']))}
-              options={[
-                { value: 'local', label: 'Local process' },
-                { value: 'http', label: 'HTTP' },
-                { value: 'sse', label: 'SSE' },
-              ]}
-              value={server.transport}
-            />
-          </FormField>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          {server.transport === 'local' ? 'Process' : 'Endpoint'}
-        </h4>
-        {server.transport === 'local' ? (
-          <>
-            <FormField label="Command" required>
-              <TextInput
-                onChange={(value) => onChange(updateMcpServer(server, { command: value }))}
-                placeholder="node"
-                value={server.command}
-              />
-            </FormField>
-            <FormField label="Arguments">
-              <TextareaInput
-                onChange={(value) => onChange(updateMcpServer(server, { args: splitMultiline(value) }))}
-                placeholder="One argument per line"
-                rows={3}
-                value={joinMultiline(server.args)}
-              />
-            </FormField>
-            <FormField label="Working directory">
-              <TextInput
-                onChange={(value) => onChange(updateMcpServer(server, { cwd: value || undefined }))}
-                placeholder="Optional — defaults to project root"
-                value={server.cwd ?? ''}
-              />
-            </FormField>
-          </>
-        ) : (
-          <FormField label="Server URL" required>
-            <TextInput
-              onChange={(value) => onChange(updateMcpServer(server, { url: value }))}
-              placeholder="https://example.com/mcp"
-              value={server.url}
-            />
-          </FormField>
-        )}
-      </section>
-
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          Advanced
-        </h4>
-        <div className="grid gap-4 sm:grid-cols-2">
-          <FormField label="Allowed tools">
-            <TextareaInput
-              onChange={(value) => onChange(updateMcpServer(server, { tools: splitTokens(value) }))}
-              placeholder="* for all, or one per line"
-              rows={3}
-              value={joinMultiline(server.tools)}
-            />
-          </FormField>
-          <FormField label="Timeout (ms)">
-            <TextInput
-              inputMode="numeric"
-              onChange={(value) =>
-                onChange(
-                  updateMcpServer(server, {
-                    timeoutMs: value.trim() ? Number(value) : undefined,
-                  }),
-                )
-              }
-              placeholder="Optional"
-              value={server.timeoutMs?.toString() ?? ''}
-            />
-          </FormField>
-        </div>
-      </section>
-
-      <InfoCallout>
-        Keep secrets out of this form. Use commands or endpoints that authenticate through the OS or external tooling.
-      </InfoCallout>
-    </ToolingEditorShell>
-  );
-}
-
-function LspProfileEditor({
-  profile,
-  onChange,
-  onBack,
-  onSave,
-  onDelete,
-}: {
-  profile: LspProfileDefinition;
-  onChange: (profile: LspProfileDefinition) => void;
-  onBack: () => void;
-  onSave: () => Promise<void>;
-  onDelete?: () => Promise<void>;
-}) {
-  const validationError = validateLspProfileDefinition(profile);
-
-  return (
-    <ToolingEditorShell
-      disableSave={Boolean(validationError)}
-      error={validationError}
-      onBack={onBack}
-      onDelete={onDelete}
-      onSave={onSave}
-      subtitle="Machine-wide language server definition"
-      title={profile.name || 'Untitled LSP Profile'}
-    >
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          General
-        </h4>
-        <div className="grid gap-4 sm:grid-cols-2">
-          <FormField label="Name" required>
-            <TextInput
-              onChange={(value) => onChange(updateLspProfile(profile, { name: value }))}
-              value={profile.name}
-            />
-          </FormField>
-          <FormField label="Language ID" required>
-            <TextInput
-              onChange={(value) => onChange(updateLspProfile(profile, { languageId: value }))}
-              placeholder="typescript"
-              value={profile.languageId}
-            />
-          </FormField>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          Server
-        </h4>
-        <FormField label="Command" required>
-          <TextInput
-            onChange={(value) => onChange(updateLspProfile(profile, { command: value }))}
-            placeholder="typescript-language-server"
-            value={profile.command}
-          />
-        </FormField>
-        <FormField label="Arguments">
-          <TextareaInput
-            onChange={(value) => onChange(updateLspProfile(profile, { args: splitMultiline(value) }))}
-            placeholder="One argument per line"
-            rows={3}
-            value={joinMultiline(profile.args)}
-          />
-        </FormField>
-      </section>
-
-      <section className="space-y-4">
-        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
-          File matching
-        </h4>
-        <FormField label="File extensions" required>
-          <TextareaInput
-            onChange={(value) => onChange(updateLspProfile(profile, { fileExtensions: splitTokens(value) }))}
-            placeholder={'.ts\n.tsx'}
-            rows={3}
-            value={joinMultiline(profile.fileExtensions)}
-          />
-        </FormField>
-      </section>
-
-      <InfoCallout>
-        Project root resolution comes from the active session's project, not from this definition.
-      </InfoCallout>
-    </ToolingEditorShell>
-  );
-}
-
 function SectionHeader({
   title,
   description,
@@ -778,249 +562,3 @@ function EmptyState({ children }: { children: ReactNode }) {
     </div>
   );
 }
-
-function ToolingEditorShell({
-  title,
-  subtitle,
-  error,
-  disableSave,
-  onBack,
-  onSave,
-  onDelete,
-  children,
-}: {
-  title: string;
-  subtitle: string;
-  error?: string;
-  disableSave: boolean;
-  onBack: () => void;
-  onSave: () => Promise<void>;
-  onDelete?: () => Promise<void>;
-  children: ReactNode;
-}) {
-  return (
-    <div className="flex h-full flex-col">
-      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
-        <div className="flex items-center gap-3">
-          <button
-            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
-            onClick={onBack}
-            type="button"
-          >
-            <ChevronLeft className="size-4" />
-          </button>
-          <div>
-            <h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
-            <p className="text-[12px] text-zinc-500">{subtitle}</p>
-          </div>
-        </div>
-        <div className="no-drag flex items-center gap-2">
-          {onDelete && (
-            <button
-              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
-              onClick={() => void onDelete()}
-              type="button"
-            >
-              <Trash className="size-3.5" />
-              Delete
-            </button>
-          )}
-          <button
-            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
-            disabled={disableSave}
-            onClick={() => void onSave()}
-            type="button"
-          >
-            Save
-          </button>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto px-6 py-5">
-        <div className="mx-auto max-w-2xl space-y-8">
-          {error && (
-            <div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[13px] text-amber-300">
-              <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
-              {error}
-            </div>
-          )}
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function FormField({
-  label,
-  required,
-  children,
-}: {
-  label: string;
-  required?: boolean;
-  children: ReactNode;
-}) {
-  return (
-    <label className="block">
-      <span className="mb-1.5 block text-[12px] font-medium text-zinc-400">
-        {label}
-        {required && <span className="ml-1 text-amber-400">*</span>}
-      </span>
-      {children}
-    </label>
-  );
-}
-
-function TextInput({
-  value,
-  onChange,
-  placeholder,
-  inputMode,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
-}) {
-  return (
-    <input
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
-      inputMode={inputMode}
-      onChange={(event) => onChange(event.target.value)}
-      placeholder={placeholder}
-      value={value}
-    />
-  );
-}
-
-function TextareaInput({
-  value,
-  onChange,
-  placeholder,
-  rows,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  rows: number;
-}) {
-  return (
-    <textarea
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
-      onChange={(event) => onChange(event.target.value)}
-      placeholder={placeholder}
-      rows={rows}
-      value={value}
-    />
-  );
-}
-
-function SelectInput({
-  value,
-  options,
-  onChange,
-}: {
-  value: string;
-  options: Array<{ value: string; label: string }>;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <select
-      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
-      onChange={(event) => onChange(event.target.value)}
-      value={value}
-    >
-      {options.map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function InfoCallout({ children }: { children: ReactNode }) {
-  return (
-    <div className="flex items-start gap-2.5 rounded-lg border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 text-[12px] leading-relaxed text-zinc-500">
-      <Info className="mt-0.5 size-3.5 shrink-0 text-zinc-600" />
-      <span>{children}</span>
-    </div>
-  );
-}
-
-function updateMcpServer(
-  server: McpServerDefinition,
-  patch: Partial<McpServerDefinition>,
-): McpServerDefinition;
-function updateMcpServer<T extends McpServerDefinition>(server: T, patch: Partial<T>): T;
-function updateMcpServer<T extends McpServerDefinition>(server: T, patch: Partial<T>): T {
-  return {
-    ...server,
-    ...patch,
-    updatedAt: nowIso(),
-  };
-}
-
-function changeMcpTransport(
-  server: McpServerDefinition,
-  transport: McpServerDefinition['transport'],
-): McpServerDefinition {
-  if (transport === server.transport) {
-    return server;
-  }
-
-  if (transport === 'local') {
-    return {
-      id: server.id,
-      name: server.name,
-      transport: 'local',
-      command: '',
-      args: [],
-      cwd: undefined,
-      tools: server.tools,
-      timeoutMs: server.timeoutMs,
-      createdAt: server.createdAt,
-      updatedAt: nowIso(),
-    };
-  }
-
-  return {
-    id: server.id,
-    name: server.name,
-    transport,
-    url: server.transport === 'local' ? '' : server.url,
-    tools: server.tools,
-    timeoutMs: server.timeoutMs,
-    createdAt: server.createdAt,
-    updatedAt: nowIso(),
-  };
-}
-
-function updateLspProfile(
-  profile: LspProfileDefinition,
-  patch: Partial<LspProfileDefinition>,
-): LspProfileDefinition {
-  return {
-    ...profile,
-    ...patch,
-    updatedAt: nowIso(),
-  };
-}
-
-function splitMultiline(value: string): string[] {
-  return value
-    .split(/\r?\n/)
-    .map((item) => item.trim())
-    .filter((item) => item.length > 0);
-}
-
-function splitTokens(value: string): string[] {
-  return value
-    .split(/[\r\n,]+/)
-    .map((item) => item.trim())
-    .filter((item) => item.length > 0);
-}
-
-function joinMultiline(value: string[]): string {
-  return value.join('\n');
-}

src/renderer/components/Sidebar.tsx

@@ -136,6 +136,7 @@ function ActionMenuItem({
     <button
       className="flex w-full items-center gap-2 px-3 py-1.5 text-[12px] text-zinc-300 transition hover:bg-zinc-800"
       onClick={onClick}
+      role="menuitem"
       type="button"
     >
       <Icon className="size-3.5" />
@@ -214,7 +215,7 @@ function SessionItem({
       onClick={isRenaming ? undefined : onSelect}
       role="button"
       tabIndex={0}
-      onKeyDown={(e) => { if (e.key === 'Enter' && !isRenaming) onSelect(); }}
+      onKeyDown={(e) => { if ((e.key === 'Enter' || e.key === ' ') && !isRenaming) { e.preventDefault(); onSelect(); } }}
     >
       {/* Running/approval left accent bar */}
       {isRunning && !hasPendingApproval && (
@@ -690,9 +691,10 @@ export function Sidebar({
       {/* Context menu overlay */}
       {menuState && menuSession && (
         <>
-          <div className="fixed inset-0 z-40" onClick={closeMenu} />
+          <div className="fixed inset-0 z-40" onClick={closeMenu} onKeyDown={(e) => { if (e.key === 'Escape') closeMenu(); }} />
           <div
             className="fixed z-50 w-40 rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-xl"
+            role="menu"
             style={{ top: menuState.top, left: menuState.left }}
           >
             <ActionMenuItem

src/renderer/components/chat/ApprovalBanner.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+import { Bot, Check, ChevronDown, Loader2, ShieldAlert, ShieldCheck, X } from 'lucide-react';
+
+import { MarkdownContent } from '@renderer/components/MarkdownContent';
+import type { ApprovalDecision, PendingApprovalRecord } from '@shared/domain/approval';
+
+/* ── ApprovalBanner ────────────────────────────────────────── */
+
+export function ApprovalBanner({
+  approval,
+  onResolve,
+  isResolving,
+  position,
+  total,
+}: {
+  approval: PendingApprovalRecord;
+  onResolve: (decision: ApprovalDecision) => void;
+  isResolving: boolean;
+  position?: number;
+  total?: number;
+}) {
+  const kindLabel = approval.kind === 'final-response' ? 'Final response review' : 'Tool call approval';
+  const hasMessages = approval.messages && approval.messages.length > 0;
+  const showPosition = position !== undefined && total !== undefined && total > 1;
+
+  return (
+    <div className="rounded-xl border border-amber-500/30 bg-amber-500/5 px-4 py-3" role="alert">
+      {/* Header */}
+      <div className="flex items-start gap-2.5">
+        <ShieldAlert className="mt-0.5 size-4 shrink-0 text-amber-400" />
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-[13px] font-semibold text-amber-200">{approval.title}</span>
+            <span className="rounded-full bg-amber-500/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-amber-400">
+              {kindLabel}
+            </span>
+            {showPosition && (
+              <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[9px] font-semibold tabular-nums text-zinc-400">
+                {position} of {total}
+              </span>
+            )}
+          </div>
+
+          <div className="mt-1 flex flex-wrap items-center gap-2 text-[11px] text-zinc-400">
+            {approval.agentName && <span>Agent: <span className="text-zinc-300">{approval.agentName}</span></span>}
+            {approval.toolName && <span>Tool: <span className="text-zinc-300">{approval.toolName}</span></span>}
+            {approval.permissionKind && <span>Permission: <span className="text-zinc-300">{approval.permissionKind}</span></span>}
+          </div>
+
+          {approval.detail && (
+            <p className="mt-1.5 text-[12px] leading-relaxed text-zinc-400">{approval.detail}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Final-response message preview */}
+      {hasMessages && (
+        <div className="mt-3 space-y-2 rounded-lg border border-zinc-800 bg-zinc-900/60 p-3">
+          <p className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+            Pending messages — not yet published
+          </p>
+          {approval.messages!.map((message) => (
+            <div className="mt-2" key={message.id}>
+              <div className="mb-1 flex items-center gap-2 text-[11px] font-medium text-zinc-500">
+                <Bot className="size-3" />
+                <span>{message.authorName}</span>
+              </div>
+              <div className="rounded-lg border border-zinc-800/60 bg-zinc-900/40 px-3 py-2 text-[13px] leading-relaxed text-zinc-300">
+                <MarkdownContent content={message.content} />
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="mt-3 flex items-center gap-2">
+        <button
+          className="inline-flex items-center gap-1.5 rounded-lg bg-emerald-600 px-3.5 py-1.5 text-[12px] font-medium text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isResolving}
+          onClick={() => onResolve('approved')}
+          type="button"
+        >
+          {isResolving ? <Loader2 className="size-3 animate-spin" /> : <Check className="size-3" />}
+          Approve
+        </button>
+        <button
+          className="inline-flex items-center gap-1.5 rounded-lg bg-zinc-800 px-3.5 py-1.5 text-[12px] font-medium text-zinc-300 transition hover:bg-zinc-700 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+          disabled={isResolving}
+          onClick={() => onResolve('rejected')}
+          type="button"
+        >
+          <X className="size-3" />
+          Reject
+        </button>
+        {showPosition && (
+          <span className="ml-auto text-[10px] text-zinc-600">
+            Next approval will appear after this one is resolved
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ── QueuedApprovalsList ───────────────────────────────────── */
+
+export function QueuedApprovalsList({ approvals }: { approvals: PendingApprovalRecord[] }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-lg border border-zinc-800 bg-zinc-900/40 px-3 py-2">
+      <button
+        aria-expanded={expanded}
+        className="flex w-full items-center gap-2 text-left"
+        onClick={() => setExpanded(!expanded)}
+        type="button"
+      >
+        <ShieldCheck className="size-3 text-zinc-500" />
+        <span className="text-[11px] font-medium text-zinc-400">
+          {approvals.length} queued approval{approvals.length === 1 ? '' : 's'}
+        </span>
+        <ChevronDown
+          className={`ml-auto size-3 text-zinc-600 transition-transform ${expanded ? 'rotate-180' : ''}`}
+        />
+      </button>
+      {expanded && (
+        <div className="mt-2 space-y-1.5 border-t border-zinc-800/60 pt-2">
+          {approvals.map((approval) => {
+            const kindLabel = approval.kind === 'final-response' ? 'response' : 'tool';
+            return (
+              <div
+                className="flex items-center gap-2 rounded-md bg-zinc-800/40 px-2.5 py-1.5"
+                key={approval.id}
+              >
+                <ShieldAlert className="size-3 shrink-0 text-zinc-600" />
+                <span className="min-w-0 flex-1 truncate text-[11px] text-zinc-400">{approval.title}</span>
+                <span className="shrink-0 rounded-full bg-zinc-800 px-1.5 py-0.5 text-[8px] font-semibold uppercase tracking-wider text-zinc-500">
+                  {kindLabel}
+                </span>
+                {approval.toolName && (
+                  <span className="shrink-0 text-[10px] text-zinc-500">{approval.toolName}</span>
+                )}
+                {approval.agentName && (
+                  <span className="shrink-0 text-[10px] text-zinc-600">{approval.agentName}</span>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/chat/InlinePills.tsx

@@ -0,0 +1,408 @@
+import { useState } from 'react';
+import { ChevronDown, Sparkles } from 'lucide-react';
+
+import { ProviderIcon } from '@renderer/components/ProviderIcons';
+import { PopoverToggleRow } from '@renderer/components/ui';
+import { useClickOutside } from '@renderer/hooks/useClickOutside';
+import type { ApprovalToolDefinition, ApprovalToolKind, LspProfileDefinition, McpServerDefinition, SessionToolingSelection } from '@shared/domain/tooling';
+import { findModel, inferProvider, providerMeta, type ModelDefinition } from '@shared/domain/models';
+import { reasoningEffortOptions, type ReasoningEffort } from '@shared/domain/pattern';
+import { RotateCcw, Server, ShieldCheck } from 'lucide-react';
+
+/* ── Tier badge ────────────────────────────────────────────── */
+
+function TierBadge({ tier }: { tier: ModelDefinition['tier'] }) {
+  if (!tier) return null;
+  const styles = {
+    premium: 'bg-amber-500/10 text-amber-400',
+    standard: 'bg-zinc-700/50 text-zinc-500',
+    fast: 'bg-emerald-500/10 text-emerald-400',
+  };
+  return (
+    <span className={`ml-auto rounded px-1.5 py-0.5 text-[9px] font-medium ${styles[tier]}`}>
+      {tier}
+    </span>
+  );
+}
+
+/* ── Helpers ────────────────────────────────────────────────── */
+
+function toggleInArray(current: string[], id: string): string[] {
+  return current.includes(id)
+    ? current.filter((currentId) => currentId !== id)
+    : [...current, id];
+}
+
+/* ── InlineModelPill ───────────────────────────────────────── */
+
+export function InlineModelPill({
+  value,
+  models,
+  onChange,
+  disabled,
+}: {
+  value: string;
+  models: ReadonlyArray<ModelDefinition>;
+  onChange: (model: string) => void;
+  disabled: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
+
+  const selected = findModel(value, models);
+  const provider = selected?.provider ?? inferProvider(value);
+  const displayName = selected?.name ?? value ?? 'Model';
+
+  const groupedModels = providerMeta
+    .map((pg) => ({ ...pg, models: models.filter((m) => m.provider === pg.id) }))
+    .filter((pg) => pg.models.length > 0);
+  const otherModels = models.filter((m) => !m.provider);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        {provider && <ProviderIcon provider={provider} className="size-3" />}
+        <span className="max-w-[140px] truncate">{displayName}</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-72 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
+          {groupedModels.map((pg) => (
+            <div key={pg.id}>
+              <div className="flex items-center gap-2 px-3 pb-1 pt-2.5">
+                <ProviderIcon provider={pg.id} className="size-3.5" />
+                <span className="text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                  {pg.label}
+                </span>
+              </div>
+              {pg.models.map((model) => (
+                <button
+                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
+                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                  }`}
+                  key={model.id}
+                  onClick={() => { onChange(model.id); setOpen(false); }}
+                  role="option"
+                  aria-selected={model.id === value}
+                  type="button"
+                >
+                  <span className="flex-1">{model.name}</span>
+                  <TierBadge tier={model.tier} />
+                </button>
+              ))}
+            </div>
+          ))}
+          {otherModels.length > 0 && (
+            <div>
+              <div className="px-3 pb-1 pt-2.5 text-[10px] font-semibold uppercase tracking-wider text-zinc-500">
+                Other
+              </div>
+              {otherModels.map((model) => (
+                <button
+                  className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
+                    model.id === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+                  }`}
+                  key={model.id}
+                  onClick={() => { onChange(model.id); setOpen(false); }}
+                  role="option"
+                  aria-selected={model.id === value}
+                  type="button"
+                >
+                  <span className="flex-1">{model.name}</span>
+                  <TierBadge tier={model.tier} />
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── InlineThinkingPill ────────────────────────────────────── */
+
+export function InlineThinkingPill({
+  value,
+  supportedEfforts,
+  onChange,
+  disabled,
+}: {
+  value?: ReasoningEffort;
+  supportedEfforts?: ReadonlyArray<ReasoningEffort>;
+  onChange: (effort: ReasoningEffort) => void;
+  disabled: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
+
+  const options = supportedEfforts
+    ? reasoningEffortOptions.filter((o) => supportedEfforts.includes(o.value))
+    : [...reasoningEffortOptions];
+
+  if (supportedEfforts && supportedEfforts.length === 0) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-800/40 bg-zinc-800/20 px-2 py-1 text-[12px] text-zinc-600">
+        <Sparkles className="size-3" />
+        N/A
+      </span>
+    );
+  }
+
+  const currentLabel = options.find((o) => o.value === value)?.label ?? value ?? 'Thinking';
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        <Sparkles className="size-3" />
+        <span>{currentLabel}</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-36 overflow-hidden rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl" role="listbox">
+          {options.map((option) => (
+            <button
+              className={`flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] transition hover:bg-zinc-800 ${
+                option.value === value ? 'bg-indigo-500/10 text-indigo-200' : 'text-zinc-300'
+              }`}
+              key={option.value}
+              onClick={() => { onChange(option.value); setOpen(false); }}
+              role="option"
+              aria-selected={option.value === value}
+              type="button"
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── InlineToolsPill ───────────────────────────────────────── */
+
+export function InlineToolsPill({
+  mcpServers,
+  lspProfiles,
+  selection,
+  disabled,
+  onToggle,
+}: {
+  mcpServers: ReadonlyArray<McpServerDefinition>;
+  lspProfiles: ReadonlyArray<LspProfileDefinition>;
+  selection: SessionToolingSelection;
+  disabled: boolean;
+  onToggle: (selection: SessionToolingSelection) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
+
+  const enabledCount = selection.enabledMcpServerIds.length + selection.enabledLspProfileIds.length;
+  const totalCount = mcpServers.length + lspProfiles.length;
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        <Server className="size-3" />
+        <span>{enabledCount}/{totalCount} tools</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 w-64 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 py-1 shadow-2xl">
+          {mcpServers.length > 0 && (
+            <div>
+              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+                MCP Servers
+              </div>
+              {mcpServers.map((server) => (
+                <PopoverToggleRow
+                  detail={server.transport === 'local' ? server.command : server.url}
+                  enabled={selection.enabledMcpServerIds.includes(server.id)}
+                  key={server.id}
+                  label={server.name}
+                  onToggle={() =>
+                    onToggle({
+                      ...selection,
+                      enabledMcpServerIds: toggleInArray(selection.enabledMcpServerIds, server.id),
+                    })
+                  }
+                />
+              ))}
+            </div>
+          )}
+          {lspProfiles.length > 0 && (
+            <div>
+              <div className="px-3 pb-1 pt-2 text-[9px] font-semibold uppercase tracking-wider text-zinc-600">
+                Language Servers
+              </div>
+              {lspProfiles.map((profile) => (
+                <PopoverToggleRow
+                  detail={profile.command}
+                  enabled={selection.enabledLspProfileIds.includes(profile.id)}
+                  key={profile.id}
+                  label={profile.name}
+                  onToggle={() =>
+                    onToggle({
+                      ...selection,
+                      enabledLspProfileIds: toggleInArray(selection.enabledLspProfileIds, profile.id),
+                    })
+                  }
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── InlineApprovalPill ────────────────────────────────────── */
+
+const approvalKindOrder: ApprovalToolKind[] = ['builtin', 'mcp', 'lsp', 'mixed'];
+const approvalKindLabels: Record<ApprovalToolKind, string> = {
+  builtin: 'Built-in',
+  mcp: 'MCP Servers',
+  lsp: 'Language Servers',
+  mixed: 'Other',
+};
+
+export function InlineApprovalPill({
+  approvalTools,
+  effectiveAutoApproved,
+  isOverridden,
+  disabled,
+  onUpdate,
+}: {
+  approvalTools: ApprovalToolDefinition[];
+  effectiveAutoApproved: Set<string>;
+  isOverridden: boolean;
+  disabled: boolean;
+  onUpdate: (settings: { autoApprovedToolNames?: string[] }) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useClickOutside<HTMLDivElement>(() => setOpen(false), open);
+
+  function toggleTool(toolId: string) {
+    const next = new Set(effectiveAutoApproved);
+    if (next.has(toolId)) {
+      next.delete(toolId);
+    } else {
+      next.add(toolId);
+    }
+    onUpdate({ autoApprovedToolNames: [...next] });
+  }
+
+  const groups = approvalKindOrder
+    .map((kind) => ({ kind, tools: approvalTools.filter((t) => t.kind === kind) }))
+    .filter((g) => g.tools.length > 0);
+  const showHeaders = groups.length > 1;
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-[12px] font-medium transition ${
+          open
+            ? 'border-indigo-500/40 bg-indigo-500/10 text-indigo-300'
+            : isOverridden
+              ? 'border-amber-500/30 bg-amber-500/5 text-amber-400 hover:border-amber-500/50'
+              : 'border-zinc-700/60 bg-zinc-800/40 text-zinc-400 hover:border-zinc-600 hover:text-zinc-300'
+        } disabled:cursor-not-allowed disabled:opacity-50`}
+        disabled={disabled}
+        onClick={() => setOpen(!open)}
+        type="button"
+      >
+        <ShieldCheck className="size-3" />
+        <span>{effectiveAutoApproved.size}/{approvalTools.length} auto-approved</span>
+        <ChevronDown className={`size-3 transition ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && !disabled && (
+        <div className="absolute bottom-full left-0 z-40 mb-1.5 max-h-80 w-72 overflow-y-auto rounded-lg border border-zinc-700 bg-zinc-900 shadow-2xl">
+          <div className="flex items-center gap-2 border-b border-zinc-800 px-3 py-2">
+            <span className={`rounded-full px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider ${
+              isOverridden
+                ? 'bg-amber-500/15 text-amber-400'
+                : 'bg-zinc-800 text-zinc-500'
+            }`}>
+              {isOverridden ? 'Session override' : 'Pattern defaults'}
+            </span>
+            {isOverridden && (
+              <button
+                className="flex items-center gap-1 rounded-full px-2 py-0.5 text-[9px] font-medium text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300"
+                onClick={() => onUpdate({})}
+                type="button"
+              >
+                <RotateCcw className="size-2.5" />
+                Reset
+              </button>
+            )}
+          </div>
+
+          <div className="py-1">
+            {groups.map((group, i) => (
+              <div key={group.kind}>
+                {showHeaders && (
+                  <div className={`px-3 pb-1 ${i > 0 ? 'pt-2' : 'pt-1'} text-[9px] font-semibold uppercase tracking-wider text-zinc-600`}>
+                    {approvalKindLabels[group.kind]}
+                  </div>
+                )}
+                {group.tools.map((tool) => {
+                  const detail = tool.description || (tool.providerNames.length > 0 ? tool.providerNames.join(', ') : undefined);
+                  return (
+                    <PopoverToggleRow
+                      detail={detail}
+                      enabled={effectiveAutoApproved.has(tool.id)}
+                      key={tool.id}
+                      label={tool.label}
+                      onToggle={() => toggleTool(tool.id)}
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/renderer/components/chat/ThinkingDots.tsx

@@ -0,0 +1,9 @@
+export function ThinkingDots() {
+  return (
+    <div className="flex items-center gap-1.5" aria-label="Thinking">
+      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
+      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
+      <span className="thinking-dot size-2 rounded-full bg-zinc-500" />
+    </div>
+  );
+}

src/renderer/components/settings/LspProfileEditor.tsx

@@ -0,0 +1,92 @@
+import { FormField, InfoCallout, TextareaInput, TextInput } from '@renderer/components/ui';
+import { joinMultiline, splitMultiline, splitTokens, updateLspProfile } from '@renderer/lib/settingsHelpers';
+import { validateLspProfileDefinition, type LspProfileDefinition } from '@shared/domain/tooling';
+import { ToolingEditorShell } from './ToolingEditorShell';
+
+export function LspProfileEditor({
+  profile,
+  onChange,
+  onBack,
+  onSave,
+  onDelete,
+}: {
+  profile: LspProfileDefinition;
+  onChange: (profile: LspProfileDefinition) => void;
+  onBack: () => void;
+  onSave: () => Promise<void>;
+  onDelete?: () => Promise<void>;
+}) {
+  const validationError = validateLspProfileDefinition(profile);
+
+  return (
+    <ToolingEditorShell
+      disableSave={Boolean(validationError)}
+      error={validationError}
+      onBack={onBack}
+      onDelete={onDelete}
+      onSave={onSave}
+      subtitle="Machine-wide language server definition"
+      title={profile.name || 'Untitled LSP Profile'}
+    >
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          General
+        </h4>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <FormField label="Name" required>
+            <TextInput
+              onChange={(value) => onChange(updateLspProfile(profile, { name: value }))}
+              value={profile.name}
+            />
+          </FormField>
+          <FormField label="Language ID" required>
+            <TextInput
+              onChange={(value) => onChange(updateLspProfile(profile, { languageId: value }))}
+              placeholder="typescript"
+              value={profile.languageId}
+            />
+          </FormField>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          Server
+        </h4>
+        <FormField label="Command" required>
+          <TextInput
+            onChange={(value) => onChange(updateLspProfile(profile, { command: value }))}
+            placeholder="typescript-language-server"
+            value={profile.command}
+          />
+        </FormField>
+        <FormField label="Arguments">
+          <TextareaInput
+            onChange={(value) => onChange(updateLspProfile(profile, { args: splitMultiline(value) }))}
+            placeholder="One argument per line"
+            rows={3}
+            value={joinMultiline(profile.args)}
+          />
+        </FormField>
+      </section>
+
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          File matching
+        </h4>
+        <FormField label="File extensions" required>
+          <TextareaInput
+            onChange={(value) => onChange(updateLspProfile(profile, { fileExtensions: splitTokens(value) }))}
+            placeholder={'.ts\n.tsx'}
+            rows={3}
+            value={joinMultiline(profile.fileExtensions)}
+          />
+        </FormField>
+      </section>
+
+      <InfoCallout>
+        Project root resolution comes from the active session's project, not from this definition.
+      </InfoCallout>
+    </ToolingEditorShell>
+  );
+}

src/renderer/components/settings/McpServerEditor.tsx

@@ -0,0 +1,131 @@
+import { FormField, InfoCallout, SelectInput, TextareaInput, TextInput } from '@renderer/components/ui';
+import { changeMcpTransport, joinMultiline, splitMultiline, splitTokens, updateMcpServer } from '@renderer/lib/settingsHelpers';
+import { validateMcpServerDefinition, type McpServerDefinition } from '@shared/domain/tooling';
+import { ToolingEditorShell } from './ToolingEditorShell';
+
+export function McpServerEditor({
+  server,
+  onChange,
+  onBack,
+  onSave,
+  onDelete,
+}: {
+  server: McpServerDefinition;
+  onChange: (server: McpServerDefinition) => void;
+  onBack: () => void;
+  onSave: () => Promise<void>;
+  onDelete?: () => Promise<void>;
+}) {
+  const validationError = validateMcpServerDefinition(server);
+
+  return (
+    <ToolingEditorShell
+      disableSave={Boolean(validationError)}
+      error={validationError}
+      onBack={onBack}
+      onDelete={onDelete}
+      onSave={onSave}
+      subtitle="Machine-wide server definition"
+      title={server.name || 'Untitled MCP Server'}
+    >
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          General
+        </h4>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <FormField label="Name" required>
+            <TextInput
+              onChange={(value) => onChange(updateMcpServer(server, { name: value }))}
+              value={server.name}
+            />
+          </FormField>
+          <FormField label="Transport" required>
+            <SelectInput
+              onChange={(value) => onChange(changeMcpTransport(server, value as McpServerDefinition['transport']))}
+              options={[
+                { value: 'local', label: 'Local process' },
+                { value: 'http', label: 'HTTP' },
+                { value: 'sse', label: 'SSE' },
+              ]}
+              value={server.transport}
+            />
+          </FormField>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          {server.transport === 'local' ? 'Process' : 'Endpoint'}
+        </h4>
+        {server.transport === 'local' ? (
+          <>
+            <FormField label="Command" required>
+              <TextInput
+                onChange={(value) => onChange(updateMcpServer(server, { command: value }))}
+                placeholder="node"
+                value={server.command}
+              />
+            </FormField>
+            <FormField label="Arguments">
+              <TextareaInput
+                onChange={(value) => onChange(updateMcpServer(server, { args: splitMultiline(value) }))}
+                placeholder="One argument per line"
+                rows={3}
+                value={joinMultiline(server.args)}
+              />
+            </FormField>
+            <FormField label="Working directory">
+              <TextInput
+                onChange={(value) => onChange(updateMcpServer(server, { cwd: value || undefined }))}
+                placeholder="Optional — defaults to project root"
+                value={server.cwd ?? ''}
+              />
+            </FormField>
+          </>
+        ) : (
+          <FormField label="Server URL" required>
+            <TextInput
+              onChange={(value) => onChange(updateMcpServer(server, { url: value }))}
+              placeholder="https://example.com/mcp"
+              value={server.url}
+            />
+          </FormField>
+        )}
+      </section>
+
+      <section className="space-y-4">
+        <h4 className="text-[12px] font-semibold uppercase tracking-wider text-zinc-500">
+          Advanced
+        </h4>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <FormField label="Allowed tools">
+            <TextareaInput
+              onChange={(value) => onChange(updateMcpServer(server, { tools: splitTokens(value) }))}
+              placeholder="* for all, or one per line"
+              rows={3}
+              value={joinMultiline(server.tools)}
+            />
+          </FormField>
+          <FormField label="Timeout (ms)">
+            <TextInput
+              inputMode="numeric"
+              onChange={(value) =>
+                onChange(
+                  updateMcpServer(server, {
+                    timeoutMs: value.trim() ? Number(value) : undefined,
+                  }),
+                )
+              }
+              placeholder="Optional"
+              value={server.timeoutMs?.toString() ?? ''}
+            />
+          </FormField>
+        </div>
+      </section>
+
+      <InfoCallout>
+        Keep secrets out of this form. Use commands or endpoints that authenticate through the OS or external tooling.
+      </InfoCallout>
+    </ToolingEditorShell>
+  );
+}

src/renderer/components/settings/ToolingEditorShell.tsx

@@ -0,0 +1,74 @@
+import { AlertCircle, ChevronLeft, Trash } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export function ToolingEditorShell({
+  title,
+  subtitle,
+  error,
+  disableSave,
+  onBack,
+  onSave,
+  onDelete,
+  children,
+}: {
+  title: string;
+  subtitle: string;
+  error?: string;
+  disableSave: boolean;
+  onBack: () => void;
+  onSave: () => Promise<void>;
+  onDelete?: () => Promise<void>;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex h-full flex-col">
+      <div className="drag-region flex items-center justify-between border-b border-[var(--color-border)] px-5 pb-3 pt-3">
+        <div className="flex items-center gap-3">
+          <button
+            className="no-drag flex size-8 items-center justify-center rounded-lg text-zinc-400 transition hover:bg-zinc-800 hover:text-zinc-200"
+            onClick={onBack}
+            type="button"
+          >
+            <ChevronLeft className="size-4" />
+          </button>
+          <div>
+            <h2 className="text-[13px] font-semibold text-zinc-100">{title}</h2>
+            <p className="text-[12px] text-zinc-500">{subtitle}</p>
+          </div>
+        </div>
+        <div className="no-drag flex items-center gap-2">
+          {onDelete && (
+            <button
+              className="flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[13px] text-red-400 transition hover:bg-red-500/10"
+              onClick={() => void onDelete()}
+              type="button"
+            >
+              <Trash className="size-3.5" />
+              Delete
+            </button>
+          )}
+          <button
+            className="rounded-lg bg-indigo-600 px-4 py-1.5 text-[13px] font-medium text-white transition hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
+            disabled={disableSave}
+            onClick={() => void onSave()}
+            type="button"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-6 py-5">
+        <div className="mx-auto max-w-2xl space-y-8">
+          {error && (
+            <div className="flex items-start gap-2 rounded-lg bg-amber-500/10 px-3 py-2 text-[13px] text-amber-300">
+              <AlertCircle className="mt-0.5 size-3.5 shrink-0" />
+              {error}
+            </div>
+          )}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

src/renderer/components/ui/FormField.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+
+export function FormField({
+  label,
+  required,
+  children,
+}: {
+  label: string;
+  required?: boolean;
+  children: ReactNode;
+}) {
+  return (
+    <label className="block">
+      <span className="mb-1.5 block text-[12px] font-medium text-zinc-400">
+        {label}
+        {required && <span className="ml-1 text-amber-400">*</span>}
+      </span>
+      {children}
+    </label>
+  );
+}

src/renderer/components/ui/InfoCallout.tsx

@@ -0,0 +1,11 @@
+import { Info } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+export function InfoCallout({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex items-start gap-2.5 rounded-lg border border-zinc-800 bg-zinc-900/30 px-3 py-2.5 text-[12px] leading-relaxed text-zinc-500">
+      <Info className="mt-0.5 size-3.5 shrink-0 text-zinc-600" />
+      <span>{children}</span>
+    </div>
+  );
+}

src/renderer/components/ui/PopoverToggleRow.tsx

@@ -0,0 +1,24 @@
+import { ToggleSwitch } from './ToggleSwitch';
+
+export interface PopoverToggleRowProps {
+  label: string;
+  detail?: string;
+  enabled: boolean;
+  onToggle: () => void;
+}
+
+export function PopoverToggleRow({ label, detail, enabled, onToggle }: PopoverToggleRowProps) {
+  return (
+    <button
+      className="flex w-full items-center gap-2 px-3 py-1.5 text-left transition hover:bg-zinc-800"
+      onClick={onToggle}
+      type="button"
+    >
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-[12px] font-medium text-zinc-300">{label}</div>
+        {detail && <div className="truncate text-[10px] text-zinc-600">{detail}</div>}
+      </div>
+      <ToggleSwitch enabled={enabled} size="sm" />
+    </button>
+  );
+}

src/renderer/components/ui/SelectInput.tsx

@@ -0,0 +1,23 @@
+export function SelectInput({
+  value,
+  options,
+  onChange,
+}: {
+  value: string;
+  options: Array<{ value: string; label: string }>;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <select
+      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition focus:border-indigo-500/50"
+      onChange={(event) => onChange(event.target.value)}
+      value={value}
+    >
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+}

src/renderer/components/ui/TextInput.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+
+export function TextInput({
+  value,
+  onChange,
+  placeholder,
+  inputMode,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];
+}) {
+  return (
+    <input
+      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
+      inputMode={inputMode}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      value={value}
+    />
+  );
+}

src/renderer/components/ui/TextareaInput.tsx

@@ -0,0 +1,21 @@
+export function TextareaInput({
+  value,
+  onChange,
+  placeholder,
+  rows,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  rows: number;
+}) {
+  return (
+    <textarea
+      className="w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-[13px] text-zinc-100 outline-none transition placeholder:text-zinc-600 focus:border-indigo-500/50"
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      rows={rows}
+      value={value}
+    />
+  );
+}

src/renderer/components/ui/ToggleSwitch.tsx

@@ -0,0 +1,24 @@
+export interface ToggleSwitchProps {
+  enabled: boolean;
+  size?: 'sm' | 'md';
+}
+
+export function ToggleSwitch({ enabled, size = 'md' }: ToggleSwitchProps) {
+  const trackSize = size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18px] w-[32px]';
+  const thumbSize = size === 'sm' ? 'size-[10px]' : 'size-[14px]';
+  const translateOn = size === 'sm' ? 'translate-x-[12px]' : 'translate-x-[16px]';
+
+  return (
+    <span
+      className={`relative inline-flex ${trackSize} shrink-0 items-center rounded-full transition-colors ${
+        enabled ? 'bg-indigo-500' : 'bg-zinc-700'
+      }`}
+    >
+      <span
+        className={`inline-block ${thumbSize} rounded-full bg-white shadow-sm transition-transform ${
+          enabled ? translateOn : 'translate-x-[2px]'
+        }`}
+      />
+    </span>
+  );
+}

src/renderer/components/ui/index.ts

@@ -0,0 +1,9 @@
+export type { ToggleSwitchProps } from './ToggleSwitch';
+export { ToggleSwitch } from './ToggleSwitch';
+export type { PopoverToggleRowProps } from './PopoverToggleRow';
+export { PopoverToggleRow } from './PopoverToggleRow';
+export { FormField } from './FormField';
+export { TextInput } from './TextInput';
+export { TextareaInput } from './TextareaInput';
+export { SelectInput } from './SelectInput';
+export { InfoCallout } from './InfoCallout';

src/renderer/hooks/useAppHooks.ts

@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react';
+import type { AppearanceTheme } from '@shared/domain/tooling';
+
+/** Resolves the effective theme and applies it to the document root. */
+export function useTheme(themeSetting: AppearanceTheme) {
+  useEffect(() => {
+    function resolveEffective(pref: AppearanceTheme): 'dark' | 'light' {
+      if (pref === 'dark' || pref === 'light') return pref;
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    const apply = () => {
+      document.documentElement.dataset.theme = resolveEffective(themeSetting);
+    };
+
+    apply();
+
+    if (themeSetting === 'system') {
+      const mq = window.matchMedia('(prefers-color-scheme: dark)');
+      mq.addEventListener('change', apply);
+      return () => mq.removeEventListener('change', apply);
+    }
+  }, [themeSetting]);
+}
+
+/** Manages sidecar capabilities loading and refresh. */
+export function useSidecarCapabilities(api: {
+  describeSidecarCapabilities: () => Promise<import('@shared/contracts/sidecar').SidecarCapabilities>;
+  refreshSidecarCapabilities: () => Promise<import('@shared/contracts/sidecar').SidecarCapabilities>;
+}) {
+  const [capabilities, setCapabilities] = useState<import('@shared/contracts/sidecar').SidecarCapabilities>();
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  useEffect(() => {
+    let disposed = false;
+
+    void api
+      .describeSidecarCapabilities()
+      .then((c) => !disposed && setCapabilities(c))
+      .catch((e) => {
+        if (!disposed) console.warn('Failed to load sidecar capabilities', e);
+      });
+
+    return () => { disposed = true; };
+  }, [api]);
+
+  async function refresh() {
+    setIsRefreshing(true);
+    try {
+      const c = await api.refreshSidecarCapabilities();
+      setCapabilities(c);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }
+
+  return { capabilities, isRefreshing, refresh };
+}

src/renderer/hooks/useClickOutside.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef, type RefObject } from 'react';
+
+/**
+ * Calls `onClose` when a click lands outside the referenced element.
+ * Only attaches the listener while `active` is true.
+ */
+export function useClickOutside<T extends HTMLElement>(
+  onClose: () => void,
+  active: boolean,
+): RefObject<T | null> {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    if (!active) return;
+
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [active, onClose]);
+
+  return ref;
+}

src/renderer/lib/settingsHelpers.ts

@@ -0,0 +1,67 @@
+import type { McpServerDefinition, LspProfileDefinition } from '@shared/domain/tooling';
+import { nowIso } from '@shared/utils/ids';
+
+export function updateMcpServer<T extends McpServerDefinition>(
+  server: T,
+  patch: Partial<T>,
+): T {
+  return { ...server, ...patch, updatedAt: nowIso() } as T;
+}
+
+export function changeMcpTransport(
+  server: McpServerDefinition,
+  transport: McpServerDefinition['transport'],
+): McpServerDefinition {
+  if (transport === server.transport) return server;
+
+  if (transport === 'local') {
+    return {
+      id: server.id,
+      name: server.name,
+      transport: 'local',
+      command: '',
+      args: [],
+      cwd: undefined,
+      tools: server.tools,
+      timeoutMs: server.timeoutMs,
+      createdAt: server.createdAt,
+      updatedAt: nowIso(),
+    };
+  }
+
+  return {
+    id: server.id,
+    name: server.name,
+    transport,
+    url: server.transport === 'local' ? '' : server.url,
+    tools: server.tools,
+    timeoutMs: server.timeoutMs,
+    createdAt: server.createdAt,
+    updatedAt: nowIso(),
+  };
+}
+
+export function updateLspProfile(
+  profile: LspProfileDefinition,
+  patch: Partial<LspProfileDefinition>,
+): LspProfileDefinition {
+  return { ...profile, ...patch, updatedAt: nowIso() };
+}
+
+export function splitMultiline(value: string): string[] {
+  return value
+    .split(/\r?\n/)
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
+}
+
+export function splitTokens(value: string): string[] {
+  return value
+    .split(/[\r\n,]+/)
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0);
+}
+
+export function joinMultiline(value: string[]): string {
+  return value.join('\n');
+}