claude-code

web/components/settings/ApiSettings.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff, CheckCircle, XCircle, Loader2 } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { SettingRow, SectionHeader, Toggle } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+type ConnectionStatus = "idle" | "checking" | "ok" | "error";
+
+export function ApiSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const [showKey, setShowKey] = useState(false);
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>("idle");
+  const [latencyMs, setLatencyMs] = useState<number | null>(null);
+
+  async function checkConnection() {
+    setConnectionStatus("checking");
+    setLatencyMs(null);
+    const start = Date.now();
+    try {
+      const res = await fetch(`${settings.apiUrl}/health`, { signal: AbortSignal.timeout(5000) });
+      const ms = Date.now() - start;
+      setLatencyMs(ms);
+      setConnectionStatus(res.ok ? "ok" : "error");
+    } catch {
+      setConnectionStatus("error");
+    }
+  }
+
+  const statusIcon = {
+    idle: null,
+    checking: <Loader2 className="w-4 h-4 animate-spin text-surface-400" />,
+    ok: <CheckCircle className="w-4 h-4 text-green-400" />,
+    error: <XCircle className="w-4 h-4 text-red-400" />,
+  }[connectionStatus];
+
+  const statusText = {
+    idle: "Not checked",
+    checking: "Checking...",
+    ok: latencyMs !== null ? `Connected — ${latencyMs}ms` : "Connected",
+    error: "Connection failed",
+  }[connectionStatus];
+
+  return (
+    <div>
+      <SectionHeader title="API & Authentication" onReset={() => resetSettings("api")} />
+
+      <SettingRow
+        label="API key"
+        description="Your Anthropic API key. Stored locally and never sent to third parties."
+        stack
+      >
+        <div className="flex gap-2">
+          <div className="relative flex-1">
+            <input
+              type={showKey ? "text" : "password"}
+              value={settings.apiKey}
+              onChange={(e) => updateSettings({ apiKey: e.target.value })}
+              placeholder="sk-ant-..."
+              className={cn(
+                "w-full bg-surface-800 border border-surface-700 rounded-md px-3 py-1.5 pr-10 text-sm",
+                "text-surface-200 placeholder-surface-600 focus:outline-none focus:ring-1 focus:ring-brand-500 font-mono"
+              )}
+            />
+            <button
+              onClick={() => setShowKey((v) => !v)}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-surface-500 hover:text-surface-300 transition-colors"
+              title={showKey ? "Hide key" : "Show key"}
+            >
+              {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
+          </div>
+        </div>
+        {settings.apiKey && (
+          <p className="text-xs text-surface-500 mt-1">
+            Key ending in{" "}
+            <span className="font-mono text-surface-400">
+              ...{settings.apiKey.slice(-4)}
+            </span>
+          </p>
+        )}
+      </SettingRow>
+
+      <SettingRow
+        label="API base URL"
+        description="Custom endpoint for enterprise or proxy setups. Leave as default for direct Anthropic access."
+        stack
+      >
+        <input
+          type="url"
+          value={settings.apiUrl}
+          onChange={(e) => updateSettings({ apiUrl: e.target.value })}
+          placeholder="http://localhost:3001"
+          className={cn(
+            "w-full bg-surface-800 border border-surface-700 rounded-md px-3 py-1.5 text-sm",
+            "text-surface-200 placeholder-surface-600 focus:outline-none focus:ring-1 focus:ring-brand-500 font-mono"
+          )}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Connection status"
+        description="Verify that the API endpoint is reachable."
+      >
+        <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1.5">
+            {statusIcon}
+            <span
+              className={cn(
+                "text-xs",
+                connectionStatus === "ok" && "text-green-400",
+                connectionStatus === "error" && "text-red-400",
+                connectionStatus === "idle" && "text-surface-500",
+                connectionStatus === "checking" && "text-surface-400"
+              )}
+            >
+              {statusText}
+            </span>
+          </div>
+          <button
+            onClick={checkConnection}
+            disabled={connectionStatus === "checking"}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md border border-surface-700 transition-colors",
+              "text-surface-300 hover:text-surface-100 hover:bg-surface-800",
+              "disabled:opacity-50 disabled:cursor-not-allowed"
+            )}
+          >
+            Check
+          </button>
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        label="Streaming"
+        description="Stream responses token by token as they are generated."
+      >
+        <Toggle
+          checked={settings.streamingEnabled}
+          onChange={(v) => updateSettings({ streamingEnabled: v })}
+        />
+      </SettingRow>
+    </div>
+  );
+}

web/components/settings/DataSettings.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import { Download, Trash2, AlertTriangle } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { SettingRow, SectionHeader, Toggle } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+export function DataSettings() {
+  const { settings, updateSettings, conversations, deleteConversation } = useChatStore();
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+
+  function exportConversations(format: "json" | "markdown") {
+    let content: string;
+    let filename: string;
+    const ts = new Date().toISOString().split("T")[0];
+
+    if (format === "json") {
+      content = JSON.stringify(conversations, null, 2);
+      filename = `claude-code-conversations-${ts}.json`;
+    } else {
+      content = conversations
+        .map((conv) => {
+          const messages = conv.messages
+            .map((m) => {
+              const role = m.role === "user" ? "**You**" : "**Claude**";
+              const text = typeof m.content === "string"
+                ? m.content
+                : m.content
+                    .filter((b) => b.type === "text")
+                    .map((b) => (b as { type: "text"; text: string }).text)
+                    .join("\n");
+              return `${role}\n\n${text}`;
+            })
+            .join("\n\n---\n\n");
+          return `# ${conv.title}\n\n${messages}`;
+        })
+        .join("\n\n====\n\n");
+      filename = `claude-code-conversations-${ts}.md`;
+    }
+
+    const blob = new Blob([content], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function clearAllConversations() {
+    const ids = conversations.map((c) => c.id);
+    ids.forEach((id) => deleteConversation(id));
+    setShowClearConfirm(false);
+  }
+
+  const totalMessages = conversations.reduce((sum, c) => sum + c.messages.length, 0);
+
+  return (
+    <div>
+      <SectionHeader title="Data & Privacy" />
+
+      <SettingRow
+        label="Export conversations"
+        description={`Export all ${conversations.length} conversations (${totalMessages} messages).`}
+      >
+        <div className="flex gap-2">
+          <button
+            onClick={() => exportConversations("json")}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs border",
+              "border-surface-700 text-surface-300 hover:text-surface-100 hover:bg-surface-800 transition-colors"
+            )}
+          >
+            <Download className="w-3.5 h-3.5" />
+            JSON
+          </button>
+          <button
+            onClick={() => exportConversations("markdown")}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs border",
+              "border-surface-700 text-surface-300 hover:text-surface-100 hover:bg-surface-800 transition-colors"
+            )}
+          >
+            <Download className="w-3.5 h-3.5" />
+            Markdown
+          </button>
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        label="Clear conversation history"
+        description="Permanently delete all conversations. This cannot be undone."
+      >
+        {showClearConfirm ? (
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-red-400 flex items-center gap-1">
+              <AlertTriangle className="w-3.5 h-3.5" />
+              Are you sure?
+            </span>
+            <button
+              onClick={clearAllConversations}
+              className="px-3 py-1.5 text-xs rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors"
+            >
+              Delete all
+            </button>
+            <button
+              onClick={() => setShowClearConfirm(false)}
+              className="px-3 py-1.5 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+            >
+              Cancel
+            </button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setShowClearConfirm(true)}
+            disabled={conversations.length === 0}
+            className={cn(
+              "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs border",
+              "border-red-500/30 text-red-400 hover:bg-red-500/10 transition-colors",
+              "disabled:opacity-40 disabled:cursor-not-allowed"
+            )}
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+            Clear all
+          </button>
+        )}
+      </SettingRow>
+
+      <SettingRow
+        label="Anonymous telemetry"
+        description="Help improve Claude Code by sharing anonymous usage data. No conversation content is ever sent."
+      >
+        <Toggle
+          checked={settings.telemetryEnabled}
+          onChange={(v) => updateSettings({ telemetryEnabled: v })}
+        />
+      </SettingRow>
+
+      <div className="mt-6 pt-4 border-t border-surface-800">
+        <p className="text-xs text-surface-500">
+          All data is stored locally in your browser. Claude Code does not send conversation data
+          to any server unless explicitly configured.
+        </p>
+      </div>
+    </div>
+  );
+}

web/components/settings/GeneralSettings.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Sun, Moon, Monitor } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { useTheme } from "@/components/layout/ThemeProvider";
+import { SettingRow, SectionHeader, Toggle, Slider } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+export function GeneralSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const { setTheme } = useTheme();
+
+  const themes = [
+    { id: "light" as const, label: "Light", icon: Sun },
+    { id: "dark" as const, label: "Dark", icon: Moon },
+    { id: "system" as const, label: "System", icon: Monitor },
+  ];
+
+  function handleThemeChange(t: "light" | "dark" | "system") {
+    updateSettings({ theme: t });
+    setTheme(t);
+  }
+
+  return (
+    <div>
+      <SectionHeader title="General" onReset={() => resetSettings("general")} />
+
+      <SettingRow
+        label="Theme"
+        description="Choose the color scheme for the interface."
+      >
+        <div className="flex gap-1.5">
+          {themes.map(({ id, label, icon: Icon }) => (
+            <button
+              key={id}
+              onClick={() => handleThemeChange(id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors",
+                settings.theme === id
+                  ? "bg-brand-600 text-white"
+                  : "bg-surface-800 text-surface-400 hover:text-surface-200"
+              )}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        label="Chat font size"
+        description="Font size for messages in the chat window."
+        stack
+      >
+        <Slider
+          value={settings.fontSize.chat}
+          min={12}
+          max={20}
+          onChange={(v) =>
+            updateSettings({ fontSize: { ...settings.fontSize, chat: v } })
+          }
+          unit="px"
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Code font size"
+        description="Font size for code blocks and inline code."
+        stack
+      >
+        <Slider
+          value={settings.fontSize.code}
+          min={10}
+          max={18}
+          onChange={(v) =>
+            updateSettings({ fontSize: { ...settings.fontSize, code: v } })
+          }
+          unit="px"
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Send on Enter"
+        description="Press Enter to send messages. When off, use Cmd+Enter or Ctrl+Enter."
+      >
+        <Toggle
+          checked={settings.sendOnEnter}
+          onChange={(v) => updateSettings({ sendOnEnter: v })}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Show timestamps"
+        description="Display the time each message was sent."
+      >
+        <Toggle
+          checked={settings.showTimestamps}
+          onChange={(v) => updateSettings({ showTimestamps: v })}
+        />
+      </SettingRow>
+
+      <SettingRow
+        label="Compact mode"
+        description="Reduce spacing between messages for higher information density."
+      >
+        <Toggle
+          checked={settings.compactMode}
+          onChange={(v) => updateSettings({ compactMode: v })}
+        />
+      </SettingRow>
+    </div>
+  );
+}

web/components/settings/KeyboardSettings.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { RotateCcw } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { SectionHeader } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_SHORTCUTS: Record<string, string> = {
+  "new-conversation": "Ctrl+Shift+N",
+  "send-message": "Enter",
+  "focus-input": "Ctrl+L",
+  "toggle-sidebar": "Ctrl+B",
+  "open-settings": "Ctrl+,",
+  "command-palette": "Ctrl+K",
+};
+
+const SHORTCUT_LABELS: Record<string, { label: string; description: string }> = {
+  "new-conversation": { label: "New conversation", description: "Start a fresh conversation" },
+  "send-message": { label: "Send message", description: "Submit the current message" },
+  "focus-input": { label: "Focus input", description: "Jump to the message input" },
+  "toggle-sidebar": { label: "Toggle sidebar", description: "Show or hide the sidebar" },
+  "open-settings": { label: "Open settings", description: "Open this settings panel" },
+  "command-palette": { label: "Command palette", description: "Open the command palette" },
+};
+
+function captureKeyCombo(e: KeyboardEvent): string {
+  e.preventDefault();
+  const parts: string[] = [];
+  if (e.ctrlKey || e.metaKey) parts.push("Ctrl");
+  if (e.altKey) parts.push("Alt");
+  if (e.shiftKey) parts.push("Shift");
+  if (e.key && !["Control", "Alt", "Shift", "Meta"].includes(e.key)) {
+    parts.push(e.key === " " ? "Space" : e.key);
+  }
+  return parts.join("+");
+}
+
+function ShortcutRow({
+  id,
+  binding,
+  isDefault,
+  isConflict,
+  onRebind,
+  onReset,
+}: {
+  id: string;
+  binding: string;
+  isDefault: boolean;
+  isConflict: boolean;
+  onRebind: (combo: string) => void;
+  onReset: () => void;
+}) {
+  const [listening, setListening] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  const info = SHORTCUT_LABELS[id];
+
+  useEffect(() => {
+    if (!listening) return;
+    function handler(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        setListening(false);
+        return;
+      }
+      const combo = captureKeyCombo(e);
+      if (combo) {
+        onRebind(combo);
+        setListening(false);
+      }
+    }
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [listening, onRebind]);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between py-3 border-b border-surface-800 last:border-0",
+        isConflict && "bg-red-500/5"
+      )}
+    >
+      <div className="flex-1">
+        <p className="text-sm text-surface-200">{info?.label ?? id}</p>
+        <p className="text-xs text-surface-500">{info?.description}</p>
+        {isConflict && (
+          <p className="text-xs text-red-400 mt-0.5">Conflict with another shortcut</p>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          ref={ref}
+          onClick={() => setListening(true)}
+          className={cn(
+            "px-3 py-1 rounded-md text-xs font-mono transition-colors border",
+            listening
+              ? "bg-brand-600/20 border-brand-500 text-brand-300 animate-pulse"
+              : isConflict
+              ? "bg-red-500/10 border-red-500/30 text-red-300"
+              : "bg-surface-800 border-surface-700 text-surface-300 hover:border-surface-600"
+          )}
+        >
+          {listening ? "Press keys..." : binding}
+        </button>
+        {!isDefault && (
+          <button
+            onClick={onReset}
+            title="Reset to default"
+            className="text-surface-500 hover:text-surface-300 transition-colors"
+          >
+            <RotateCcw className="w-3.5 h-3.5" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function KeyboardSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const keybindings = settings.keybindings;
+
+  // Find conflicts
+  const bindingValues = Object.values(keybindings);
+  const conflicts = new Set(
+    bindingValues.filter((v, i) => bindingValues.indexOf(v) !== i)
+  );
+
+  function rebind(id: string, combo: string) {
+    updateSettings({ keybindings: { ...keybindings, [id]: combo } });
+  }
+
+  function resetOne(id: string) {
+    updateSettings({
+      keybindings: { ...keybindings, [id]: DEFAULT_SHORTCUTS[id] },
+    });
+  }
+
+  return (
+    <div>
+      <SectionHeader title="Keyboard Shortcuts" onReset={() => resetSettings("keybindings")} />
+
+      <p className="text-xs text-surface-400 mb-4">
+        Click a shortcut to rebind it. Press Escape to cancel.
+      </p>
+
+      <div>
+        {Object.entries(keybindings).map(([id, binding]) => (
+          <ShortcutRow
+            key={id}
+            id={id}
+            binding={binding}
+            isDefault={binding === DEFAULT_SHORTCUTS[id]}
+            isConflict={conflicts.has(binding)}
+            onRebind={(combo) => rebind(id, combo)}
+            onReset={() => resetOne(id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

web/components/settings/McpSettings.tsx

@@ -0,0 +1,256 @@
+"use client";
+
+import { useState } from "react";
+import {
+  Plus,
+  Trash2,
+  CheckCircle,
+  XCircle,
+  Loader2,
+  ChevronDown,
+  Circle,
+} from "lucide-react";
+import { nanoid } from "nanoid";
+import { useChatStore } from "@/lib/store";
+import type { MCPServerConfig } from "@/lib/types";
+import { SectionHeader, Toggle } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+type TestStatus = "idle" | "testing" | "ok" | "error";
+
+function ServerRow({
+  server,
+  onUpdate,
+  onDelete,
+}: {
+  server: MCPServerConfig;
+  onUpdate: (updated: MCPServerConfig) => void;
+  onDelete: () => void;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const [testStatus, setTestStatus] = useState<TestStatus>("idle");
+
+  async function testConnection() {
+    setTestStatus("testing");
+    // Simulate connection test — in real impl this would call an API
+    await new Promise((r) => setTimeout(r, 800));
+    setTestStatus(Math.random() > 0.3 ? "ok" : "error");
+  }
+
+  const statusDot = {
+    idle: <Circle className="w-2 h-2 text-surface-600" />,
+    testing: <Loader2 className="w-3 h-3 animate-spin text-surface-400" />,
+    ok: <CheckCircle className="w-3 h-3 text-green-400" />,
+    error: <XCircle className="w-3 h-3 text-red-400" />,
+  }[testStatus];
+
+  return (
+    <div className="border border-surface-800 rounded-lg overflow-hidden">
+      {/* Header row */}
+      <div className="flex items-center gap-3 px-3 py-2.5 bg-surface-800/40">
+        <Toggle
+          checked={server.enabled}
+          onChange={(v) => onUpdate({ ...server, enabled: v })}
+        />
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium text-surface-200 truncate">{server.name}</p>
+          <p className="text-xs text-surface-500 font-mono truncate">{server.command}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {statusDot}
+          <button
+            onClick={testConnection}
+            disabled={testStatus === "testing"}
+            className="text-xs text-surface-400 hover:text-surface-200 transition-colors disabled:opacity-50"
+          >
+            Test
+          </button>
+          <button
+            onClick={() => setExpanded((v) => !v)}
+            className="text-surface-500 hover:text-surface-300 transition-colors"
+          >
+            <ChevronDown
+              className={cn("w-4 h-4 transition-transform", expanded && "rotate-180")}
+            />
+          </button>
+          <button
+            onClick={onDelete}
+            className="text-surface-500 hover:text-red-400 transition-colors"
+          >
+            <Trash2 className="w-3.5 h-3.5" />
+          </button>
+        </div>
+      </div>
+
+      {/* Expanded edit form */}
+      {expanded && (
+        <div className="px-3 py-3 space-y-2 border-t border-surface-800">
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs text-surface-400 mb-1">Name</label>
+              <input
+                value={server.name}
+                onChange={(e) => onUpdate({ ...server, name: e.target.value })}
+                className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 focus:outline-none focus:ring-1 focus:ring-brand-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-surface-400 mb-1">Command</label>
+              <input
+                value={server.command}
+                onChange={(e) => onUpdate({ ...server, command: e.target.value })}
+                placeholder="npx, node, python..."
+                className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 font-mono focus:outline-none focus:ring-1 focus:ring-brand-500"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs text-surface-400 mb-1">
+              Arguments (space-separated)
+            </label>
+            <input
+              value={server.args.join(" ")}
+              onChange={(e) =>
+                onUpdate({
+                  ...server,
+                  args: e.target.value.split(" ").filter(Boolean),
+                })
+              }
+              placeholder="-y @modelcontextprotocol/server-filesystem /path"
+              className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 font-mono focus:outline-none focus:ring-1 focus:ring-brand-500"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function McpSettings() {
+  const { settings, updateSettings } = useChatStore();
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newServer, setNewServer] = useState<Omit<MCPServerConfig, "id">>({
+    name: "",
+    command: "",
+    args: [],
+    env: {},
+    enabled: true,
+  });
+
+  function updateServer(id: string, updated: MCPServerConfig) {
+    updateSettings({
+      mcpServers: settings.mcpServers.map((s) => (s.id === id ? updated : s)),
+    });
+  }
+
+  function deleteServer(id: string) {
+    updateSettings({
+      mcpServers: settings.mcpServers.filter((s) => s.id !== id),
+    });
+  }
+
+  function addServer() {
+    if (!newServer.name.trim() || !newServer.command.trim()) return;
+    updateSettings({
+      mcpServers: [...settings.mcpServers, { ...newServer, id: nanoid() }],
+    });
+    setNewServer({ name: "", command: "", args: [], env: {}, enabled: true });
+    setShowAddForm(false);
+  }
+
+  return (
+    <div>
+      <SectionHeader title="MCP Servers" />
+
+      <p className="text-xs text-surface-400 mb-4">
+        Model Context Protocol servers extend Claude with external tools and data sources.
+      </p>
+
+      <div className="space-y-2 mb-4">
+        {settings.mcpServers.length === 0 ? (
+          <div className="text-center py-8 text-surface-500 text-sm">
+            No MCP servers configured
+          </div>
+        ) : (
+          settings.mcpServers.map((server) => (
+            <ServerRow
+              key={server.id}
+              server={server}
+              onUpdate={(updated) => updateServer(server.id, updated)}
+              onDelete={() => deleteServer(server.id)}
+            />
+          ))
+        )}
+      </div>
+
+      {showAddForm ? (
+        <div className="border border-surface-700 rounded-lg p-3 space-y-2">
+          <p className="text-xs font-medium text-surface-300 mb-2">Add MCP server</p>
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs text-surface-400 mb-1">Name *</label>
+              <input
+                value={newServer.name}
+                onChange={(e) => setNewServer((s) => ({ ...s, name: e.target.value }))}
+                placeholder="filesystem"
+                className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 focus:outline-none focus:ring-1 focus:ring-brand-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs text-surface-400 mb-1">Command *</label>
+              <input
+                value={newServer.command}
+                onChange={(e) => setNewServer((s) => ({ ...s, command: e.target.value }))}
+                placeholder="npx"
+                className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 font-mono focus:outline-none focus:ring-1 focus:ring-brand-500"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs text-surface-400 mb-1">
+              Arguments (space-separated)
+            </label>
+            <input
+              value={newServer.args.join(" ")}
+              onChange={(e) =>
+                setNewServer((s) => ({
+                  ...s,
+                  args: e.target.value.split(" ").filter(Boolean),
+                }))
+              }
+              placeholder="-y @modelcontextprotocol/server-filesystem /path"
+              className="w-full bg-surface-800 border border-surface-700 rounded px-2 py-1 text-xs text-surface-200 font-mono focus:outline-none focus:ring-1 focus:ring-brand-500"
+            />
+          </div>
+          <div className="flex justify-end gap-2 pt-1">
+            <button
+              onClick={() => setShowAddForm(false)}
+              className="px-3 py-1.5 text-xs text-surface-400 hover:text-surface-200 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={addServer}
+              disabled={!newServer.name.trim() || !newServer.command.trim()}
+              className={cn(
+                "px-3 py-1.5 text-xs rounded-md bg-brand-600 text-white",
+                "hover:bg-brand-700 transition-colors",
+                "disabled:opacity-50 disabled:cursor-not-allowed"
+              )}
+            >
+              Add server
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          onClick={() => setShowAddForm(true)}
+          className="flex items-center gap-2 text-sm text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          <Plus className="w-4 h-4" />
+          Add server
+        </button>
+      )}
+    </div>
+  );
+}

web/components/settings/ModelSettings.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { MODELS } from "@/lib/constants";
+import { SettingRow, SectionHeader, Slider } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+export function ModelSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const selectedModel = MODELS.find((m) => m.id === settings.model);
+
+  return (
+    <div>
+      <SectionHeader title="Model" onReset={() => resetSettings("model")} />
+
+      <SettingRow
+        label="Default model"
+        description="The AI model used for new conversations."
+      >
+        <select
+          value={settings.model}
+          onChange={(e) => updateSettings({ model: e.target.value })}
+          className={cn(
+            "bg-surface-800 border border-surface-700 rounded-md px-3 py-1.5 text-sm",
+            "text-surface-200 focus:outline-none focus:ring-1 focus:ring-brand-500"
+          )}
+        >
+          {MODELS.map((m) => (
+            <option key={m.id} value={m.id}>
+              {m.label} — {m.description}
+            </option>
+          ))}
+        </select>
+      </SettingRow>
+
+      {selectedModel && (
+        <div className="mb-4 px-3 py-2 rounded-md bg-surface-800/50 border border-surface-800 text-xs text-surface-400">
+          <span className="font-medium text-surface-300">{selectedModel.label}</span>
+          {" — "}{selectedModel.description}
+        </div>
+      )}
+
+      <SettingRow
+        label="Max tokens"
+        description="Maximum number of tokens in the model's response."
+        stack
+      >
+        <div className="flex items-center gap-3">
+          <Slider
+            value={settings.maxTokens}
+            min={1000}
+            max={200000}
+            step={1000}
+            onChange={(v) => updateSettings({ maxTokens: v })}
+            showValue={false}
+            className="flex-1"
+          />
+          <input
+            type="number"
+            value={settings.maxTokens}
+            min={1000}
+            max={200000}
+            step={1000}
+            onChange={(e) => updateSettings({ maxTokens: Number(e.target.value) })}
+            className={cn(
+              "w-24 bg-surface-800 border border-surface-700 rounded-md px-2 py-1 text-sm text-right",
+              "text-surface-200 focus:outline-none focus:ring-1 focus:ring-brand-500 font-mono"
+            )}
+          />
+        </div>
+      </SettingRow>
+
+      <SettingRow
+        label="System prompt"
+        description="Custom instructions prepended to every conversation."
+        stack
+      >
+        <textarea
+          value={settings.systemPrompt}
+          onChange={(e) => updateSettings({ systemPrompt: e.target.value })}
+          placeholder="You are a helpful assistant..."
+          rows={4}
+          className={cn(
+            "w-full bg-surface-800 border border-surface-700 rounded-md px-3 py-2 text-sm",
+            "text-surface-200 placeholder-surface-600 focus:outline-none focus:ring-1 focus:ring-brand-500",
+            "resize-none font-mono"
+          )}
+        />
+      </SettingRow>
+
+      {/* Advanced toggle */}
+      <button
+        onClick={() => setShowAdvanced((v) => !v)}
+        className="flex items-center gap-1.5 text-xs text-surface-400 hover:text-surface-200 transition-colors mt-2 mb-1"
+      >
+        <ChevronDown
+          className={cn("w-3.5 h-3.5 transition-transform", showAdvanced && "rotate-180")}
+        />
+        Advanced settings
+      </button>
+
+      {showAdvanced && (
+        <SettingRow
+          label="Temperature"
+          description="Controls response randomness. Higher values produce more varied output."
+          stack
+        >
+          <Slider
+            value={settings.temperature}
+            min={0}
+            max={1}
+            step={0.05}
+            onChange={(v) => updateSettings({ temperature: v })}
+          />
+        </SettingRow>
+      )}
+    </div>
+  );
+}

web/components/settings/PermissionSettings.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { Plus, X } from "lucide-react";
+import { useChatStore } from "@/lib/store";
+import { SettingRow, SectionHeader, Toggle } from "./SettingRow";
+import { cn } from "@/lib/utils";
+
+const TOOL_LABELS: Record<string, { label: string; description: string }> = {
+  file_read: {
+    label: "File read",
+    description: "Read files from the filesystem",
+  },
+  file_write: {
+    label: "File write",
+    description: "Create or modify files",
+  },
+  bash: {
+    label: "Bash commands",
+    description: "Execute shell commands",
+  },
+  web_search: {
+    label: "Web search",
+    description: "Search the internet",
+  },
+};
+
+export function PermissionSettings() {
+  const { settings, updateSettings, resetSettings } = useChatStore();
+  const [newDir, setNewDir] = useState("");
+
+  function toggleAutoApprove(tool: string, value: boolean) {
+    updateSettings({
+      permissions: {
+        ...settings.permissions,
+        autoApprove: { ...settings.permissions.autoApprove, [tool]: value },
+      },
+    });
+  }
+
+  function addRestrictedDir() {
+    const dir = newDir.trim();
+    if (!dir || settings.permissions.restrictedDirs.includes(dir)) return;
+    updateSettings({
+      permissions: {
+        ...settings.permissions,
+        restrictedDirs: [...settings.permissions.restrictedDirs, dir],
+      },
+    });
+    setNewDir("");
+  }
+
+  function removeRestrictedDir(dir: string) {
+    updateSettings({
+      permissions: {
+        ...settings.permissions,
+        restrictedDirs: settings.permissions.restrictedDirs.filter((d) => d !== dir),
+      },
+    });
+  }
+
+  return (
+    <div>
+      <SectionHeader title="Permissions & Safety" onReset={() => resetSettings("permissions")} />
+
+      <div className="mb-4 p-3 rounded-md bg-amber-500/10 border border-amber-500/20 text-xs text-amber-300">
+        Auto-approving tools means Claude can perform these actions without asking for confirmation.
+        Use with caution.
+      </div>
+
+      {Object.entries(TOOL_LABELS).map(([tool, { label, description }]) => (
+        <SettingRow key={tool} label={label} description={description}>
+          <Toggle
+            checked={!!settings.permissions.autoApprove[tool]}
+            onChange={(v) => toggleAutoApprove(tool, v)}
+          />
+        </SettingRow>
+      ))}
+
+      <SettingRow
+        label="Restricted directories"
+        description="Limit file operations to specific directories. Leave empty for no restriction."
+        stack
+      >
+        <div className="space-y-2">
+          {settings.permissions.restrictedDirs.map((dir) => (
+            <div
+              key={dir}
+              className="flex items-center justify-between gap-2 px-2 py-1 rounded bg-surface-800 border border-surface-700"
+            >
+              <span className="text-xs font-mono text-surface-300 truncate">{dir}</span>
+              <button
+                onClick={() => removeRestrictedDir(dir)}
+                className="text-surface-500 hover:text-red-400 transition-colors flex-shrink-0"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          ))}
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={newDir}
+              onChange={(e) => setNewDir(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && addRestrictedDir()}
+              placeholder="/path/to/directory"
+              className={cn(
+                "flex-1 bg-surface-800 border border-surface-700 rounded-md px-3 py-1.5 text-xs",
+                "text-surface-200 placeholder-surface-600 focus:outline-none focus:ring-1 focus:ring-brand-500 font-mono"
+              )}
+            />
+            <button
+              onClick={addRestrictedDir}
+              className={cn(
+                "flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs",
+                "bg-surface-800 border border-surface-700 text-surface-300",
+                "hover:text-surface-100 hover:bg-surface-700 transition-colors"
+              )}
+            >
+              <Plus className="w-3.5 h-3.5" />
+              Add
+            </button>
+          </div>
+        </div>
+      </SettingRow>
+    </div>
+  );
+}

web/components/settings/SettingRow.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+interface SettingRowProps {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  stack?: boolean;
+}
+
+export function SettingRow({ label, description, children, className, stack = false }: SettingRowProps) {
+  return (
+    <div
+      className={cn(
+        "py-4 border-b border-surface-800 last:border-0",
+        stack ? "flex flex-col gap-3" : "flex items-start justify-between gap-6",
+        className
+      )}
+    >
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-surface-100">{label}</p>
+        {description && (
+          <p className="text-xs text-surface-400 mt-0.5 leading-relaxed">{description}</p>
+        )}
+      </div>
+      <div className={cn("flex-shrink-0", stack && "w-full")}>{children}</div>
+    </div>
+  );
+}
+
+interface SectionHeaderProps {
+  title: string;
+  onReset?: () => void;
+}
+
+export function SectionHeader({ title, onReset }: SectionHeaderProps) {
+  return (
+    <div className="flex items-center justify-between mb-2">
+      <h2 className="text-base font-semibold text-surface-100">{title}</h2>
+      {onReset && (
+        <button
+          onClick={onReset}
+          className="text-xs text-surface-400 hover:text-surface-200 transition-colors"
+        >
+          Reset to defaults
+        </button>
+      )}
+    </div>
+  );
+}
+
+interface ToggleProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+}
+
+export function Toggle({ checked, onChange, disabled = false }: ToggleProps) {
+  return (
+    <button
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent",
+        "transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface-900",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        checked ? "bg-brand-600" : "bg-surface-700"
+      )}
+    >
+      <span
+        className={cn(
+          "pointer-events-none inline-block h-4 w-4 transform rounded-full bg-white shadow",
+          "transition duration-200 ease-in-out",
+          checked ? "translate-x-4" : "translate-x-0"
+        )}
+      />
+    </button>
+  );
+}
+
+interface SliderProps {
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onChange: (value: number) => void;
+  showValue?: boolean;
+  unit?: string;
+  className?: string;
+}
+
+export function Slider({ value, min, max, step = 1, onChange, showValue = true, unit = "", className }: SliderProps) {
+  return (
+    <div className={cn("flex items-center gap-3", className)}>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={(e) => onChange(Number(e.target.value))}
+        className="flex-1 h-1.5 bg-surface-700 rounded-full appearance-none cursor-pointer accent-brand-500"
+      />
+      {showValue && (
+        <span className="text-xs text-surface-300 w-12 text-right font-mono">
+          {value}{unit}
+        </span>
+      )}
+    </div>
+  );
+}

web/components/settings/SettingsNav.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import {
+  Settings,
+  Cpu,
+  Key,
+  Shield,
+  Server,
+  Keyboard,
+  Database,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type SettingsSection =
+  | "general"
+  | "model"
+  | "api"
+  | "permissions"
+  | "mcp"
+  | "keyboard"
+  | "data";
+
+interface NavItem {
+  id: SettingsSection;
+  label: string;
+  icon: React.ElementType;
+}
+
+const NAV_ITEMS: NavItem[] = [
+  { id: "general", label: "General", icon: Settings },
+  { id: "model", label: "Model", icon: Cpu },
+  { id: "api", label: "API & Auth", icon: Key },
+  { id: "permissions", label: "Permissions", icon: Shield },
+  { id: "mcp", label: "MCP Servers", icon: Server },
+  { id: "keyboard", label: "Keyboard", icon: Keyboard },
+  { id: "data", label: "Data & Privacy", icon: Database },
+];
+
+interface SettingsNavProps {
+  active: SettingsSection;
+  onChange: (section: SettingsSection) => void;
+  searchQuery: string;
+}
+
+export function SettingsNav({ active, onChange, searchQuery }: SettingsNavProps) {
+  const filtered = searchQuery
+    ? NAV_ITEMS.filter((item) =>
+        item.label.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : NAV_ITEMS;
+
+  return (
+    <nav className="w-48 flex-shrink-0 py-2">
+      {filtered.map((item) => {
+        const Icon = item.icon;
+        return (
+          <button
+            key={item.id}
+            onClick={() => onChange(item.id)}
+            className={cn(
+              "w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-sm transition-colors text-left",
+              active === item.id
+                ? "bg-surface-800 text-surface-100"
+                : "text-surface-400 hover:text-surface-200 hover:bg-surface-800/50"
+            )}
+          >
+            <Icon className="w-4 h-4 flex-shrink-0" />
+            {item.label}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}