iris-chatbot 0.2.4

package/template/src/components/SettingsModal.tsx

@@ -0,0 +1,1257 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Eye, EyeOff, RefreshCw, X } from "lucide-react";
+import {
+  BUILTIN_CONNECTION_IDS,
+  ensureBuiltinConnections,
+  normalizeBaseUrl,
+} from "../lib/connections";
+import { db } from "../lib/db";
+import { useMemories } from "../lib/hooks";
+import { normalizeMemoryKey } from "../lib/memory";
+import { filterModelIdsForConnection, getConnectionModelPresets } from "../lib/model-presets";
+import {
+  DEFAULT_MEMORY_SETTINGS,
+  DEFAULT_LOCAL_TOOLS_SETTINGS,
+  type ApprovalMode,
+  type ChatConnectionPayload,
+  type ConnectionKind,
+  type MemoryEntry,
+  type MemoryKind,
+  type MemoryScope,
+  type MemorySource,
+  type ModelConnection,
+  type SafetyProfile,
+  type Settings,
+  type WebSearchBackend,
+} from "../lib/types";
+
+type TabId =
+  | "models"
+  | "keys"
+  | "connections"
+  | "local-tools"
+  | "memory"
+  | "appearance"
+  | "advanced";
+
+const TABS: Array<{ id: TabId; label: string }> = [
+  { id: "models", label: "Models" },
+  { id: "keys", label: "API Keys" },
+  { id: "connections", label: "Connections" },
+  { id: "local-tools", label: "Local Tools" },
+  { id: "memory", label: "Memory" },
+  { id: "appearance", label: "Appearance" },
+  { id: "advanced", label: "Advanced" },
+];
+
+function parseHeadersText(value: string): Array<{ key: string; value: string }> {
+  return value
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const separatorIndex = line.indexOf(":");
+      if (separatorIndex === -1) {
+        return { key: line, value: "" };
+      }
+      return {
+        key: line.slice(0, separatorIndex).trim(),
+        value: line.slice(separatorIndex + 1).trim(),
+      };
+    })
+    .filter((header) => header.key.length > 0);
+}
+
+function formatHeadersText(headers: Array<{ key: string; value: string }> | undefined): string {
+  if (!Array.isArray(headers) || headers.length === 0) {
+    return "";
+  }
+  return headers.map((header) => `${header.key}: ${header.value}`).join("\n");
+}
+
+function makeConnectionPayload(
+  connection: ModelConnection,
+  keys: { openaiKey: string; anthropicKey: string; geminiKey: string },
+): ChatConnectionPayload {
+  const keyFromProvider =
+    connection.kind === "builtin"
+      ? connection.provider === "openai"
+        ? keys.openaiKey
+        : connection.provider === "anthropic"
+          ? keys.anthropicKey
+          : connection.provider === "google"
+            ? keys.geminiKey
+            : ""
+      : "";
+
+  return {
+    id: connection.id,
+    name: connection.name,
+    kind: connection.kind,
+    provider: connection.provider,
+    baseUrl: connection.baseUrl,
+    apiKey: connection.apiKey || keyFromProvider || undefined,
+    headers: connection.headers ?? [],
+    supportsTools: connection.supportsTools,
+  };
+}
+
+export default function SettingsModal({
+  settings,
+  onClose,
+}: {
+  settings: Settings | null;
+  onClose: () => void;
+}) {
+  const [activeTab, setActiveTab] = useState<TabId>("models");
+  const [openaiKey, setOpenaiKey] = useState(settings?.openaiKey || "");
+  const [anthropicKey, setAnthropicKey] = useState(settings?.anthropicKey || "");
+  const [geminiKey, setGeminiKey] = useState(settings?.geminiKey || "");
+  const [showOpenAIKey, setShowOpenAIKey] = useState(false);
+  const [showAnthropicKey, setShowAnthropicKey] = useState(false);
+  const [showGeminiKey, setShowGeminiKey] = useState(false);
+  const [accentColor, setAccentColor] = useState(settings?.accentColor || "#66706e");
+  const [theme, setTheme] = useState<"dark" | "light">(settings?.theme || "dark");
+  const [font, setFont] = useState<"ibm" | "manrope" | "sora" | "space" | "poppins">(
+    settings?.font || "manrope",
+  );
+
+  const localTools = settings?.localTools ?? DEFAULT_LOCAL_TOOLS_SETTINGS;
+  const [toolsEnabled, setToolsEnabled] = useState(localTools.enabled);
+  const [approvalMode, setApprovalMode] = useState<ApprovalMode>(localTools.approvalMode);
+  const [safetyProfile, setSafetyProfile] = useState<SafetyProfile>(localTools.safetyProfile);
+  const [allowedRootsText, setAllowedRootsText] = useState((localTools.allowedRoots ?? []).join("\n"));
+  const [enableNotes, setEnableNotes] = useState(localTools.enableNotes);
+  const [enableApps, setEnableApps] = useState(localTools.enableApps);
+  const [enableNumbers, setEnableNumbers] = useState(localTools.enableNumbers);
+  const [enableWeb, setEnableWeb] = useState(localTools.enableWeb);
+  const [enableMusic, setEnableMusic] = useState(localTools.enableMusic);
+  const [enableCalendar, setEnableCalendar] = useState(localTools.enableCalendar);
+  const [enableMail, setEnableMail] = useState(localTools.enableMail);
+  const [enableWorkflow, setEnableWorkflow] = useState(localTools.enableWorkflow);
+  const [enableSystem, setEnableSystem] = useState(localTools.enableSystem);
+  const [webSearchBackend, setWebSearchBackend] = useState<WebSearchBackend>(localTools.webSearchBackend);
+  const [dryRun, setDryRun] = useState(localTools.dryRun);
+  const memory = settings?.memory ?? DEFAULT_MEMORY_SETTINGS;
+  const [memoryEnabled, setMemoryEnabled] = useState(memory.enabled);
+  const [memoryAutoCapture, setMemoryAutoCapture] = useState(memory.autoCapture);
+  const [memoryToolInfluence, setMemoryToolInfluence] = useState(memory.toolInfluence);
+
+  const [connections, setConnections] = useState<ModelConnection[]>(settings?.connections ?? []);
+  const [defaultConnectionId, setDefaultConnectionId] = useState(
+    settings?.defaultConnectionId ?? settings?.connections?.[0]?.id ?? BUILTIN_CONNECTION_IDS.openai,
+  );
+  const [defaultModelByConnection, setDefaultModelByConnection] = useState<Record<string, string>>(
+    settings?.defaultModelByConnection ?? {},
+  );
+  const [showExtendedOpenAIModels, setShowExtendedOpenAIModels] = useState(
+    Boolean(settings?.showExtendedOpenAIModels),
+  );
+  const [enableWebSources, setEnableWebSources] = useState(settings?.enableWebSources ?? true);
+
+  const [editingConnectionId, setEditingConnectionId] = useState<string | null>(null);
+  const [connectionFormName, setConnectionFormName] = useState("");
+  const [connectionFormKind, setConnectionFormKind] = useState<ConnectionKind>("openai_compatible");
+  const [connectionFormBaseUrl, setConnectionFormBaseUrl] = useState("");
+  const [connectionFormApiKey, setConnectionFormApiKey] = useState("");
+  const [connectionFormSupportsTools, setConnectionFormSupportsTools] = useState(true);
+  const [connectionFormHeadersText, setConnectionFormHeadersText] = useState("");
+
+  const [modelInput, setModelInput] = useState("");
+  const [connectionStatus, setConnectionStatus] = useState<Record<string, string>>({});
+  const [connectionStatusBusy, setConnectionStatusBusy] = useState<Record<string, boolean>>({});
+  const [fetchedModels, setFetchedModels] = useState<Record<string, string[]>>({});
+  const memories = useMemories();
+  const [memorySearch, setMemorySearch] = useState("");
+  const [editingMemoryId, setEditingMemoryId] = useState<string | null>(null);
+  const [memoryFormKind, setMemoryFormKind] = useState<MemoryKind>("note");
+  const [memoryFormScope, setMemoryFormScope] = useState<MemoryScope>("global");
+  const [memoryFormConversationId, setMemoryFormConversationId] = useState("");
+  const [memoryFormSource, setMemoryFormSource] = useState<MemorySource>("manual");
+  const [memoryFormKey, setMemoryFormKey] = useState("");
+  const [memoryFormValue, setMemoryFormValue] = useState("");
+  const [memoryStatus, setMemoryStatus] = useState<string | null>(null);
+  const enabledConnections = connections.filter((connection) => connection.enabled);
+  const selectedDefaultConnection =
+    connections.find((connection) => connection.id === defaultConnectionId) ?? enabledConnections[0] ?? null;
+
+  useEffect(() => {
+    if (!selectedDefaultConnection) {
+      setModelInput("");
+      return;
+    }
+    setModelInput(defaultModelByConnection[selectedDefaultConnection.id] || "");
+  }, [selectedDefaultConnection, defaultModelByConnection]);
+
+  if (!settings) {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6">
+        <div className="w-full max-w-md rounded-2xl border border-[var(--border)] bg-[var(--panel)] p-6 text-sm text-[var(--text-muted)]">
+          Loading settings...
+        </div>
+      </div>
+    );
+  }
+
+  const selectedDefaultModel = selectedDefaultConnection
+    ? defaultModelByConnection[selectedDefaultConnection.id] ||
+      getConnectionModelPresets(selectedDefaultConnection)[0] ||
+      ""
+    : "";
+  const selectedPresets = selectedDefaultConnection ? getConnectionModelPresets(selectedDefaultConnection) : [];
+  const selectedFetchedModels = selectedDefaultConnection ? fetchedModels[selectedDefaultConnection.id] ?? [] : [];
+  const selectableModels = filterModelIdsForConnection({
+    connection: selectedDefaultConnection,
+    modelIds: [...new Set([...selectedFetchedModels, ...selectedPresets])],
+    includeExtendedOpenAI: showExtendedOpenAIModels,
+  });
+  const filteredMemories = (memories ?? []).filter((entry) => {
+    const query = memorySearch.trim().toLowerCase();
+    if (!query) {
+      return true;
+    }
+    const text = `${entry.kind} ${entry.scope} ${entry.key} ${entry.value} ${entry.conversationId ?? ""}`.toLowerCase();
+    return text.includes(query);
+  });
+
+  const resetConnectionForm = () => {
+    setEditingConnectionId(null);
+    setConnectionFormName("");
+    setConnectionFormKind("openai_compatible");
+    setConnectionFormBaseUrl("");
+    setConnectionFormApiKey("");
+    setConnectionFormSupportsTools(true);
+    setConnectionFormHeadersText("");
+  };
+
+  const resetMemoryForm = () => {
+    setEditingMemoryId(null);
+    setMemoryFormKind("note");
+    setMemoryFormScope("global");
+    setMemoryFormConversationId("");
+    setMemoryFormSource("manual");
+    setMemoryFormKey("");
+    setMemoryFormValue("");
+    setMemoryStatus(null);
+  };
+
+  const loadMemoryIntoForm = (entry: MemoryEntry) => {
+    setEditingMemoryId(entry.id);
+    setMemoryFormKind(entry.kind);
+    setMemoryFormScope(entry.scope);
+    setMemoryFormConversationId(entry.conversationId ?? "");
+    setMemoryFormSource(entry.source);
+    setMemoryFormKey(entry.key);
+    setMemoryFormValue(entry.value);
+    setMemoryStatus(null);
+  };
+
+  const upsertMemoryEntry = async () => {
+    const key = memoryFormKey.trim();
+    const value = memoryFormValue.trim();
+    if (!key || !value) {
+      setMemoryStatus("Key and value are required.");
+      return;
+    }
+    const normalizedKey = normalizeMemoryKey(key);
+    if (!normalizedKey) {
+      setMemoryStatus("Key must include letters or numbers.");
+      return;
+    }
+    if (memoryFormScope === "conversation" && !memoryFormConversationId.trim()) {
+      setMemoryStatus("Conversation ID is required for conversation-scoped memory.");
+      return;
+    }
+
+    const now = Date.now();
+    const existing = editingMemoryId
+      ? (memories ?? []).find((entry) => entry.id === editingMemoryId)
+      : null;
+    const entry: MemoryEntry = {
+      id: editingMemoryId ?? `memory-${now}`,
+      kind: memoryFormKind,
+      scope: memoryFormScope,
+      conversationId:
+        memoryFormScope === "conversation"
+          ? memoryFormConversationId.trim()
+          : undefined,
+      key,
+      value,
+      normalizedKey,
+      source: memoryFormSource,
+      confidence:
+        memoryFormSource === "auto"
+          ? 0.75
+          : 1,
+      createdAt: existing?.createdAt ?? now,
+      updatedAt: now,
+      lastUsedAt: existing?.lastUsedAt ?? now,
+    };
+
+    await db.memories.put(entry);
+    resetMemoryForm();
+  };
+
+  const deleteMemoryEntry = async (entryId: string) => {
+    await db.memories.delete(entryId);
+    if (editingMemoryId === entryId) {
+      resetMemoryForm();
+    }
+  };
+
+  const clearAllMemories = async () => {
+    if (!window.confirm("Delete all saved memory entries?")) {
+      return;
+    }
+    await db.memories.clear();
+    resetMemoryForm();
+  };
+
+  const upsertConnectionFromForm = () => {
+    const normalizedKind: ConnectionKind =
+      connectionFormKind === "ollama" ? "ollama" : "openai_compatible";
+    const normalizedBaseUrl = normalizeBaseUrl(connectionFormBaseUrl);
+    const baseUrl =
+      normalizedKind === "ollama"
+        ? normalizedBaseUrl || "http://localhost:11434"
+        : normalizedBaseUrl;
+    if (normalizedKind === "openai_compatible" && !baseUrl) {
+      setConnectionStatus((current) => ({
+        ...current,
+        form: "Base URL is required for OpenAI-compatible connections.",
+      }));
+      return;
+    }
+    const now = Date.now();
+    const headers = parseHeadersText(connectionFormHeadersText);
+    const id = editingConnectionId || `conn-${now}`;
+    const nextConnection: ModelConnection = {
+      id,
+      name: connectionFormName.trim() || id,
+      kind: normalizedKind,
+      provider: undefined,
+      baseUrl,
+      apiKey: connectionFormApiKey.trim() || undefined,
+      headers,
+      supportsTools: connectionFormSupportsTools,
+      enabled: true,
+      createdAt: editingConnectionId
+        ? connections.find((connection) => connection.id === editingConnectionId)?.createdAt ?? now
+        : now,
+      updatedAt: now,
+    };
+    setConnections((current) => {
+      const existingIndex = current.findIndex((item) => item.id === id);
+      if (existingIndex === -1) {
+        return [...current, nextConnection];
+      }
+      const next = [...current];
+      next[existingIndex] = nextConnection;
+      return next;
+    });
+    setDefaultConnectionId((current) => current || id);
+    setConnectionStatus((current) => {
+      if (!current.form) {
+        return current;
+      }
+      const next = { ...current };
+      delete next.form;
+      return next;
+    });
+    resetConnectionForm();
+  };
+
+  const testConnection = async (connection: ModelConnection) => {
+    setConnectionStatusBusy((current) => ({ ...current, [connection.id]: true }));
+    setConnectionStatus((current) => ({ ...current, [connection.id]: "Testing..." }));
+    try {
+      const payload = makeConnectionPayload(connection, { openaiKey, anthropicKey, geminiKey });
+      const response = await fetch("/api/connections/test", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ connection: payload }),
+      });
+      const body = (await response.json()) as { ok?: boolean; message?: string; error?: string };
+      if (!response.ok || body.ok === false) {
+        throw new Error(body.error || "Connection test failed.");
+      }
+      setConnectionStatus((current) => ({ ...current, [connection.id]: body.message || "Connected." }));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Connection test failed.";
+      setConnectionStatus((current) => ({ ...current, [connection.id]: message }));
+    } finally {
+      setConnectionStatusBusy((current) => ({ ...current, [connection.id]: false }));
+    }
+  };
+
+  const fetchModelsForConnection = async (connection: ModelConnection) => {
+    setConnectionStatusBusy((current) => ({ ...current, [connection.id]: true }));
+    setConnectionStatus((current) => ({ ...current, [connection.id]: "Fetching models..." }));
+    try {
+      const payload = makeConnectionPayload(connection, { openaiKey, anthropicKey, geminiKey });
+      const response = await fetch("/api/connections/models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ connection: payload }),
+      });
+      const body = (await response.json()) as { ok?: boolean; models?: string[]; error?: string };
+      if (!response.ok || body.ok === false) {
+        throw new Error(body.error || "Could not fetch models.");
+      }
+      const models = Array.isArray(body.models) ? body.models.filter(Boolean) : [];
+      setFetchedModels((current) => ({ ...current, [connection.id]: models }));
+      setConnectionStatus((current) => ({
+        ...current,
+        [connection.id]: models.length > 0 ? `Fetched ${models.length} models.` : "No models returned.",
+      }));
+      if (models.length > 0) {
+        setDefaultModelByConnection((current) => ({
+          ...current,
+          [connection.id]: current[connection.id] || models[0],
+        }));
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Could not fetch models.";
+      setConnectionStatus((current) => ({ ...current, [connection.id]: message }));
+    } finally {
+      setConnectionStatusBusy((current) => ({ ...current, [connection.id]: false }));
+    }
+  };
+
+  const handleSave = async () => {
+    const allowedRoots = allowedRootsText
+      .split("\n")
+      .map((root) => root.trim())
+      .filter(Boolean);
+
+    const syncedConnections = connections.map((connection) => {
+      if (connection.kind !== "builtin") {
+        return connection;
+      }
+      if (connection.provider === "openai") {
+        return { ...connection, apiKey: openaiKey.trim() || undefined, updatedAt: Date.now() };
+      }
+      if (connection.provider === "anthropic") {
+        return { ...connection, apiKey: anthropicKey.trim() || undefined, updatedAt: Date.now() };
+      }
+      if (connection.provider === "google") {
+        return { ...connection, apiKey: geminiKey.trim() || undefined, updatedAt: Date.now() };
+      }
+      return connection;
+    });
+    const normalizedConnections = ensureBuiltinConnections(
+      syncedConnections,
+      {
+        openaiKey: openaiKey.trim() || undefined,
+        anthropicKey: anthropicKey.trim() || undefined,
+        geminiKey: geminiKey.trim() || undefined,
+      },
+      Date.now(),
+    );
+    const enabled = normalizedConnections.filter((connection) => connection.enabled);
+    const resolvedDefaultConnection =
+      (enabled.find((connection) => connection.id === defaultConnectionId)?.id ?? enabled[0]?.id) ||
+      normalizedConnections[0]?.id ||
+      BUILTIN_CONNECTION_IDS.openai;
+
+    const defaultConnection =
+      normalizedConnections.find((connection) => connection.id === resolvedDefaultConnection) ?? null;
+    const resolvedDefaultModelMap: Record<string, string> = {};
+    for (const connection of normalizedConnections) {
+      const model =
+        defaultModelByConnection[connection.id]?.trim() ||
+        getConnectionModelPresets(connection)[0] ||
+        "";
+      if (model) {
+        resolvedDefaultModelMap[connection.id] = model;
+      }
+    }
+    const legacyProvider =
+      defaultConnection?.kind === "builtin" && defaultConnection.provider
+        ? defaultConnection.provider
+        : "openai";
+    const legacyModel = resolvedDefaultModelMap[resolvedDefaultConnection] || settings.defaultModel || "gpt-5.2";
+
+    await db.settings.put({
+      id: "settings",
+      openaiKey: openaiKey.trim() || undefined,
+      anthropicKey: anthropicKey.trim() || undefined,
+      geminiKey: geminiKey.trim() || undefined,
+      defaultProvider: legacyProvider,
+      defaultModel: legacyModel,
+      connections: normalizedConnections,
+      defaultConnectionId: resolvedDefaultConnection,
+      defaultModelByConnection: resolvedDefaultModelMap,
+      showExtendedOpenAIModels,
+      enableWebSources,
+      accentColor: accentColor || "#66706e",
+      font,
+      theme,
+      localTools: {
+        enabled: toolsEnabled,
+        approvalMode,
+        safetyProfile,
+        allowedRoots:
+          allowedRoots.length > 0 ? allowedRoots : [...DEFAULT_LOCAL_TOOLS_SETTINGS.allowedRoots],
+        enableNotes,
+        enableApps,
+        enableNumbers,
+        enableWeb,
+        enableMusic,
+        enableCalendar,
+        enableMail,
+        enableWorkflow,
+        enableSystem,
+        webSearchBackend,
+        dryRun,
+      },
+      memory: {
+        enabled: memoryEnabled,
+        autoCapture: memoryAutoCapture,
+        toolInfluence: memoryToolInfluence,
+        extractionMode: "conservative",
+      },
+    });
+    onClose();
+  };
+
+  const accentPresets = [
+    { id: "default", label: "Default", color: "#66706e" },
+    { id: "blue", label: "Blue", color: "#2563eb" },
+    { id: "green", label: "Green", color: "#16a34a" },
+    { id: "yellow", label: "Yellow", color: "#f59e0b" },
+    { id: "pink", label: "Pink", color: "#ec4899" },
+    { id: "orange", label: "Orange", color: "#f97316" },
+    { id: "red", label: "Red", color: "#dc2626" },
+  ];
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6">
+      <div className="w-full max-w-4xl rounded-2xl border border-[var(--border)] bg-[var(--panel)] p-6 shadow-[var(--shadow)]">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">Settings</h2>
+          <button
+            onClick={onClose}
+            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] p-2"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+
+        <div className="mt-4 flex flex-wrap gap-2 border-b border-[var(--border)] pb-3">
+          {TABS.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id)}
+              className={`rounded-full px-3 py-1.5 text-xs ${
+                activeTab === tab.id
+                  ? "bg-[var(--accent)] text-white"
+                  : "border border-[var(--border)] bg-[var(--panel-2)] text-[var(--text-secondary)]"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="mt-5 max-h-[68vh] overflow-y-auto pr-1 text-sm">
+          {activeTab === "models" ? (
+            <div className="space-y-4">
+              <label className="flex items-center gap-2 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-3 text-sm text-[var(--text-secondary)]">
+                <input
+                  type="checkbox"
+                  checked={showExtendedOpenAIModels}
+                  onChange={(event) => setShowExtendedOpenAIModels(event.target.checked)}
+                />
+                Show extended OpenAI model list (non-frontier models)
+              </label>
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Default Connection
+                </label>
+                <select
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm"
+                  value={defaultConnectionId}
+                  onChange={(event) => setDefaultConnectionId(event.target.value)}
+                >
+                  {enabledConnections.map((connection) => (
+                    <option key={connection.id} value={connection.id}>
+                      {connection.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {selectedDefaultConnection ? (
+                <div className="space-y-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+                  <div className="text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                    Default model for {selectedDefaultConnection.name}
+                  </div>
+                  <input
+                    className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                    value={modelInput || selectedDefaultModel}
+                    onChange={(event) => {
+                      const value = event.target.value;
+                      setModelInput(value);
+                      setDefaultModelByConnection((current) => ({
+                        ...current,
+                        [selectedDefaultConnection.id]: value,
+                      }));
+                    }}
+                    placeholder="Enter model id"
+                  />
+                  <div className="flex flex-wrap gap-2">
+                    {selectableModels.slice(0, 20).map((preset) => (
+                      <button
+                        key={preset}
+                        className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs text-[var(--text-secondary)]"
+                        onClick={() => {
+                          setModelInput(preset);
+                          setDefaultModelByConnection((current) => ({
+                            ...current,
+                            [selectedDefaultConnection.id]: preset,
+                          }));
+                        }}
+                      >
+                        {preset}
+                      </button>
+                    ))}
+                    {selectableModels.length === 0 ? (
+                      <div className="text-xs text-[var(--text-muted)]">
+                        No presets yet. Fetch models from Connections tab.
+                      </div>
+                    ) : null}
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          ) : null}
+
+          {activeTab === "keys" ? (
+            <div className="space-y-4">
+              {[
+                {
+                  label: "OpenAI API Key",
+                  value: openaiKey,
+                  setValue: setOpenaiKey,
+                  show: showOpenAIKey,
+                  setShow: setShowOpenAIKey,
+                  placeholder: "sk-...",
+                },
+                {
+                  label: "Anthropic API Key",
+                  value: anthropicKey,
+                  setValue: setAnthropicKey,
+                  show: showAnthropicKey,
+                  setShow: setShowAnthropicKey,
+                  placeholder: "sk-ant-...",
+                },
+                {
+                  label: "Google Gemini API Key",
+                  value: geminiKey,
+                  setValue: setGeminiKey,
+                  show: showGeminiKey,
+                  setShow: setShowGeminiKey,
+                  placeholder: "AIza...",
+                },
+              ].map((item) => (
+                <div key={item.label}>
+                  <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                    {item.label}
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={item.show ? "text" : "password"}
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 pr-10 text-sm"
+                      value={item.value}
+                      onChange={(event) => item.setValue(event.target.value)}
+                      placeholder={item.placeholder}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => item.setShow((prev: boolean) => !prev)}
+                      className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--text-muted)]"
+                    >
+                      {item.show ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : null}
+
+          {activeTab === "connections" ? (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                {connections.map((connection) => (
+                  <div
+                    key={connection.id}
+                    className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-3"
+                  >
+                    <div className="flex flex-wrap items-center justify-between gap-2">
+                      <div>
+                        <div className="text-sm font-medium text-[var(--text-primary)]">{connection.name}</div>
+                        <div className="text-xs text-[var(--text-muted)]">
+                          {connection.kind === "builtin"
+                            ? `Built-in: ${connection.provider}`
+                            : connection.kind === "ollama"
+                              ? `Ollama (${connection.baseUrl || "http://localhost:11434"})`
+                              : `OpenAI-compatible (${connection.baseUrl || "No URL"})`}
+                        </div>
+                      </div>
+                      <div className="flex flex-wrap gap-2">
+                        {connection.kind !== "builtin" ? (
+                          <button
+                            className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs"
+                            onClick={() => {
+                              setEditingConnectionId(connection.id);
+                              setConnectionFormName(connection.name);
+                              setConnectionFormKind(connection.kind);
+                              setConnectionFormBaseUrl(connection.baseUrl || "");
+                              setConnectionFormApiKey(connection.apiKey || "");
+                              setConnectionFormSupportsTools(connection.supportsTools ?? true);
+                              setConnectionFormHeadersText(formatHeadersText(connection.headers));
+                            }}
+                          >
+                            Edit
+                          </button>
+                        ) : null}
+                        <button
+                          className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs"
+                          onClick={() => testConnection(connection)}
+                          disabled={Boolean(connectionStatusBusy[connection.id])}
+                        >
+                          Test
+                        </button>
+                        <button
+                          className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs"
+                          onClick={() => fetchModelsForConnection(connection)}
+                          disabled={Boolean(connectionStatusBusy[connection.id])}
+                        >
+                          Fetch Models
+                        </button>
+                        {connection.kind !== "builtin" ? (
+                          <button
+                            className="rounded-full border border-[var(--danger)]/40 bg-[var(--panel)] px-3 py-1 text-xs text-[var(--danger)]"
+                            onClick={() =>
+                              setConnections((current) =>
+                                current.filter((item) => item.id !== connection.id),
+                              )
+                            }
+                          >
+                            Remove
+                          </button>
+                        ) : null}
+                      </div>
+                    </div>
+                    <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-[var(--text-secondary)]">
+                      <label className="flex items-center gap-2">
+                        <input
+                          type="checkbox"
+                          checked={connection.enabled}
+                          onChange={(event) =>
+                            setConnections((current) =>
+                              current.map((item) =>
+                                item.id === connection.id
+                                  ? { ...item, enabled: event.target.checked, updatedAt: Date.now() }
+                                  : item,
+                              ),
+                            )
+                          }
+                        />
+                        Enabled
+                      </label>
+	                      <span>
+	                        Tools: {(connection.supportsTools ?? true) ? "supported" : "disabled"}
+	                      </span>
+                      {connection.kind === "builtin" ? (
+                        <span>Keys configured in API Keys tab</span>
+                      ) : null}
+	                      {connectionStatus[connection.id] ? <span>{connectionStatus[connection.id]}</span> : null}
+	                    </div>
+	                  </div>
+	                ))}
+	              </div>
+
+              <div className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+                <div className="mb-3 text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  {editingConnectionId ? "Edit Connection" : "Add Connection"}
+                </div>
+	                <div className="grid gap-3 md:grid-cols-2">
+                  <input
+                    className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                    placeholder="Connection name"
+                    value={connectionFormName}
+                    onChange={(event) => setConnectionFormName(event.target.value)}
+                  />
+	                  <select
+                    className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                    value={connectionFormKind}
+	                    onChange={(event) => setConnectionFormKind(event.target.value as ConnectionKind)}
+	                  >
+	                    <option value="openai_compatible">OpenAI-compatible</option>
+	                    <option value="ollama">Ollama</option>
+	                  </select>
+                  <input
+                    className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
+                    placeholder="Base URL (e.g. http://localhost:11434)"
+                    value={connectionFormBaseUrl}
+                    onChange={(event) => setConnectionFormBaseUrl(event.target.value)}
+                  />
+                  <input
+                    className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
+                    placeholder="Optional API key override"
+                    value={connectionFormApiKey}
+                    onChange={(event) => setConnectionFormApiKey(event.target.value)}
+                  />
+                  <textarea
+                    className="h-20 rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-xs md:col-span-2"
+                    placeholder="Optional headers (one per line):&#10;Authorization: Bearer ...&#10;X-API-Key: ..."
+                    value={connectionFormHeadersText}
+                    onChange={(event) => setConnectionFormHeadersText(event.target.value)}
+                  />
+	                </div>
+                {connectionStatus.form ? (
+                  <div className="mt-2 text-xs text-[var(--danger)]">{connectionStatus.form}</div>
+                ) : null}
+	                <div className="mt-3 flex flex-wrap items-center gap-3">
+                  <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                    <input
+                      type="checkbox"
+                      checked={connectionFormSupportsTools}
+                      onChange={(event) => setConnectionFormSupportsTools(event.target.checked)}
+                    />
+                    Supports tool calls
+                  </label>
+                  <button
+                    className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs"
+                    onClick={() => {
+                      setConnectionFormKind("openai_compatible");
+                      setConnectionFormName("Local OpenAI-compatible");
+                      setConnectionFormBaseUrl("http://localhost:1234/v1");
+                    }}
+                  >
+                    LM Studio / vLLM preset
+                  </button>
+                  <button
+                    className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs"
+                    onClick={() => {
+                      setConnectionFormKind("ollama");
+                      setConnectionFormName("Ollama Local");
+                      setConnectionFormBaseUrl("http://localhost:11434");
+                      setConnectionFormSupportsTools(false);
+                    }}
+                  >
+                    Ollama preset
+                  </button>
+                </div>
+                <div className="mt-3 flex gap-2">
+                  <button
+                    className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+                    onClick={upsertConnectionFromForm}
+                  >
+                    {editingConnectionId ? "Update Connection" : "Add Connection"}
+                  </button>
+                  <button
+                    className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-4 py-2 text-xs"
+                    onClick={resetConnectionForm}
+                  >
+                    Clear
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          {activeTab === "local-tools" ? (
+            <div className="space-y-4 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+              <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                <input
+                  type="checkbox"
+                  checked={toolsEnabled}
+                  onChange={(event) => setToolsEnabled(event.target.checked)}
+                />
+                Enable local computer tools
+              </label>
+              <div className="grid gap-3 md:grid-cols-2">
+                <div>
+                  <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                    Safety Profile
+                  </label>
+                  <select
+                    className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                    value={safetyProfile}
+                    onChange={(event) => setSafetyProfile(event.target.value as SafetyProfile)}
+                  >
+                    <option value="strict">Strict</option>
+                    <option value="balanced">Balanced</option>
+                    <option value="auto">Auto</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                    Approval Mode
+                  </label>
+                  <select
+                    className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                    value={approvalMode}
+                    onChange={(event) => setApprovalMode(event.target.value as ApprovalMode)}
+                  >
+                    <option value="always_confirm_writes">Always confirm writes</option>
+                    <option value="confirm_risky_only">Confirm risky only</option>
+                    <option value="trusted_auto">Trusted auto</option>
+                  </select>
+                </div>
+              </div>
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Allowed Roots (one per line)
+                </label>
+                <textarea
+                  className="h-24 w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-xs"
+                  value={allowedRootsText}
+                  onChange={(event) => setAllowedRootsText(event.target.value)}
+                  placeholder="/Users/evanalexander/zenith&#10;~/Desktop"
+                />
+              </div>
+	              <div className="grid gap-2 md:grid-cols-2">
+	                {[
+	                  { label: "Enable Apple Notes tools", checked: enableNotes, setter: setEnableNotes },
+	                  { label: "Enable app open/focus tools", checked: enableApps, setter: setEnableApps },
+	                  { label: "Enable Numbers tools", checked: enableNumbers, setter: setEnableNumbers },
+	                  { label: "Enable web search/open tools", checked: enableWeb, setter: setEnableWeb },
+	                  { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
+	                  { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
+	                  { label: "Enable mail/messages tools", checked: enableMail, setter: setEnableMail },
+	                  { label: "Enable workflow tool", checked: enableWorkflow, setter: setEnableWorkflow },
+	                  { label: "Enable system controls", checked: enableSystem, setter: setEnableSystem },
+	                  { label: "Dry-run only (no writes)", checked: dryRun, setter: setDryRun },
+	                ].map((item) => (
+	                  <label key={item.label} className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+	                    <input
+	                      type="checkbox"
+	                      checked={item.checked}
+	                      onChange={(event) => item.setter(event.target.checked)}
+	                    />
+	                    {item.label}
+	                  </label>
+	                ))}
+	              </div>
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Web Search Backend
+                </label>
+                <select
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                  value={webSearchBackend}
+                  onChange={(event) => setWebSearchBackend(event.target.value as WebSearchBackend)}
+                >
+                  <option value="no_key">No-key (default)</option>
+                  <option value="hybrid">Hybrid</option>
+                </select>
+              </div>
+            </div>
+          ) : null}
+
+          {activeTab === "memory" ? (
+            <div className="space-y-4">
+              <div className="space-y-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+                <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                  <input
+                    type="checkbox"
+                    checked={memoryEnabled}
+                    onChange={(event) => setMemoryEnabled(event.target.checked)}
+                  />
+                  Enable memory personalization
+                </label>
+                <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                  <input
+                    type="checkbox"
+                    checked={memoryAutoCapture}
+                    onChange={(event) => setMemoryAutoCapture(event.target.checked)}
+                    disabled={!memoryEnabled}
+                  />
+                  Auto-capture stable memories
+                </label>
+                <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                  <input
+                    type="checkbox"
+                    checked={memoryToolInfluence}
+                    onChange={(event) => setMemoryToolInfluence(event.target.checked)}
+                    disabled={!memoryEnabled}
+                  />
+                  Allow memory to influence tool planning and fast-path aliases
+                </label>
+                <div className="text-xs text-[var(--text-muted)]">
+                  Extraction mode: <span className="font-medium text-[var(--text-primary)]">Conservative</span>
+                </div>
+              </div>
+
+              <div className="space-y-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <div className="text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                    Saved Memory
+                  </div>
+                  <button
+                    className="rounded-full border border-[var(--danger)]/40 bg-[var(--panel)] px-3 py-1 text-xs text-[var(--danger)]"
+                    onClick={clearAllMemories}
+                    disabled={(memories?.length ?? 0) === 0}
+                  >
+                    Clear all
+                  </button>
+                </div>
+                <input
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                  placeholder="Search memory entries"
+                  value={memorySearch}
+                  onChange={(event) => setMemorySearch(event.target.value)}
+                />
+                <div className="max-h-64 space-y-2 overflow-y-auto pr-1">
+                  {filteredMemories.map((entry) => (
+                    <div
+                      key={entry.id}
+                      className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2"
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <div className="text-sm font-medium text-[var(--text-primary)]">{entry.key}</div>
+                          <div className="mt-0.5 text-xs text-[var(--text-secondary)]">{entry.value}</div>
+                          <div className="mt-1 text-[11px] text-[var(--text-muted)]">
+                            {entry.kind} | {entry.scope}
+                            {entry.scope === "conversation" && entry.conversationId
+                              ? ` | ${entry.conversationId}`
+                              : ""}
+                            {` | ${entry.source}`}
+                          </div>
+                        </div>
+                        <div className="flex shrink-0 gap-2">
+                          <button
+                            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-3 py-1 text-xs"
+                            onClick={() => loadMemoryIntoForm(entry)}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="rounded-full border border-[var(--danger)]/40 bg-[var(--panel-2)] px-3 py-1 text-xs text-[var(--danger)]"
+                            onClick={() => {
+                              void deleteMemoryEntry(entry.id);
+                            }}
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  {filteredMemories.length === 0 ? (
+                    <div className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-4 text-xs text-[var(--text-muted)]">
+                      No memory entries found.
+                    </div>
+                  ) : null}
+                </div>
+              </div>
+
+              <div className="space-y-3 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
+                <div className="text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  {editingMemoryId ? "Edit Memory Entry" : "Add Memory Entry"}
+                </div>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <div>
+                    <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                      Kind
+                    </label>
+                    <select
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                      value={memoryFormKind}
+                      onChange={(event) => setMemoryFormKind(event.target.value as MemoryKind)}
+                    >
+                      <option value="profile">Profile</option>
+                      <option value="preference">Preference</option>
+                      <option value="person_alias">Person alias</option>
+                      <option value="music_alias">Music alias</option>
+                      <option value="note">Note</option>
+                    </select>
+                  </div>
+                  <div>
+                    <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                      Scope
+                    </label>
+                    <select
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                      value={memoryFormScope}
+                      onChange={(event) => setMemoryFormScope(event.target.value as MemoryScope)}
+                    >
+                      <option value="global">Global</option>
+                      <option value="conversation">Conversation</option>
+                    </select>
+                  </div>
+                  {memoryFormScope === "conversation" ? (
+                    <input
+                      className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
+                      placeholder="Conversation ID"
+                      value={memoryFormConversationId}
+                      onChange={(event) => setMemoryFormConversationId(event.target.value)}
+                    />
+                  ) : null}
+                  <div>
+                    <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                      Source
+                    </label>
+                    <select
+                      className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
+                      value={memoryFormSource}
+                      onChange={(event) => setMemoryFormSource(event.target.value as MemorySource)}
+                    >
+                      <option value="manual">Manual</option>
+                      <option value="explicit">Explicit</option>
+                      <option value="auto">Auto</option>
+                    </select>
+                  </div>
+                  <input
+                    className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
+                    placeholder="Memory key"
+                    value={memoryFormKey}
+                    onChange={(event) => setMemoryFormKey(event.target.value)}
+                  />
+                  <textarea
+                    className="h-20 rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
+                    placeholder="Memory value"
+                    value={memoryFormValue}
+                    onChange={(event) => setMemoryFormValue(event.target.value)}
+                  />
+                </div>
+                {memoryStatus ? (
+                  <div className="text-xs text-[var(--danger)]">{memoryStatus}</div>
+                ) : null}
+                <div className="flex gap-2">
+                  <button
+                    className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+                    onClick={() => {
+                      void upsertMemoryEntry();
+                    }}
+                  >
+                    {editingMemoryId ? "Update Memory" : "Add Memory"}
+                  </button>
+                  <button
+                    className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-4 py-2 text-xs"
+                    onClick={resetMemoryForm}
+                  >
+                    Clear
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          {activeTab === "appearance" ? (
+            <div className="space-y-4">
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Theme
+                </label>
+                <select
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm"
+                  value={theme}
+                  onChange={(event) => setTheme(event.target.value as "dark" | "light")}
+                >
+                  <option value="dark">Dark</option>
+                  <option value="light">Light</option>
+                </select>
+              </div>
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Font
+                </label>
+                <select
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm"
+                  value={font}
+                  onChange={(event) =>
+                    setFont(event.target.value as "ibm" | "manrope" | "sora" | "space" | "poppins")
+                  }
+                >
+                  <option value="ibm">IBM Plex Sans (Default)</option>
+                  <option value="manrope">Manrope</option>
+                  <option value="poppins">Poppins</option>
+                  <option value="sora">Sora</option>
+                  <option value="space">Space Grotesk</option>
+                </select>
+              </div>
+              <div>
+                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
+                  Accent Color
+                </label>
+                <div className="grid grid-cols-4 gap-2">
+                  {accentPresets.map((preset) => (
+                    <button
+                      key={preset.id}
+                      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${
+                        accentColor === preset.color
+                          ? "border-[var(--accent)] text-[var(--text-primary)]"
+                          : "border-[var(--border)] text-[var(--text-secondary)]"
+                      }`}
+                      onClick={() => setAccentColor(preset.color)}
+                    >
+                      <span className="h-3 w-3 rounded-full" style={{ background: preset.color }} />
+                      {preset.label}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ) : null}
+
+          {activeTab === "advanced" ? (
+            <div className="space-y-4">
+              <label className="flex items-center gap-2 rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4 text-sm text-[var(--text-secondary)]">
+                <input
+                  type="checkbox"
+                  checked={enableWebSources}
+                  onChange={(event) => setEnableWebSources(event.target.checked)}
+                />
+                Enable OpenAI web sources (adds citations when web search is used)
+              </label>
+              <div className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4 text-sm text-[var(--text-secondary)]">
+                <div className="font-medium text-[var(--text-primary)]">Diagnostics</div>
+                <div className="mt-2 text-xs">
+                  Connections: {connections.length} total, {enabledConnections.length} enabled
+                </div>
+                <div className="mt-1 text-xs">Default connection: {defaultConnectionId || "(none)"}</div>
+              </div>
+              <button
+                className="inline-flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-4 py-2 text-xs text-[var(--text-secondary)]"
+                onClick={() => {
+                  const now = Date.now();
+                  setConnections(
+                    ensureBuiltinConnections([], { openaiKey, anthropicKey, geminiKey }, now),
+                  );
+                  setDefaultConnectionId(BUILTIN_CONNECTION_IDS.openai);
+                  setDefaultModelByConnection({});
+                }}
+              >
+                <RefreshCw className="h-3.5 w-3.5" />
+                Reset Connection Defaults
+              </button>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="mt-6 flex justify-end gap-2">
+          <button
+            onClick={onClose}
+            className="rounded-full border border-[var(--border)] bg-[var(--panel-2)] px-4 py-2 text-xs"
+          >
+            Cancel
+          </button>
+          <button
+            className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+            onClick={handleSave}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}