opencami 1.7.0 → 1.8.3

package/dist/server/assets/settings-dialog-ClKFnZ1x.js

@@ -0,0 +1,1511 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { create } from "zustand";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { Cancel01Icon, Link01Icon, PaintBoardIcon, MessageEdit01Icon, Settings02Icon, UserIcon, VoiceIcon, AiBrain01Icon, InformationCircleIcon, ComputerIcon, Sun01Icon, Moon01Icon, Leaf01Icon, DropletIcon, Loading02Icon, Tick01Icon, Cancel02Icon } from "@hugeicons/core-free-icons";
+import { B as Button, c as cn } from "./button-CwY2OHFj.js";
+import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose } from "./use-file-explorer-state-s7CS50ho.js";
+import { S as Switch } from "./switch-BbkUeVDV.js";
+import { T as Tabs, a as TabsList, b as TabsTab } from "./tabs-DDFZob0m.js";
+import { u as useChatSettings } from "./index-Dl2BOKP7.js";
+import { u as useLlmSettings, g as getLlmProviderDefaults } from "./_sessionKey-C9o7YfxA.js";
+import "@base-ui/react/merge-props";
+import "@base-ui/react/use-render";
+import "class-variance-authority";
+import "clsx";
+import "tailwind-merge";
+import "@base-ui/react/dialog";
+import "@base-ui/react/switch";
+import "@base-ui/react/tabs";
+import "zustand/middleware";
+import "@tanstack/react-router";
+import "@tanstack/react-query";
+import "./tooltip-DgsSPocE.js";
+import "@base-ui/react/tooltip";
+import "motion/react";
+import "@base-ui/react/alert-dialog";
+import "@base-ui/react/collapsible";
+import "@base-ui/react/scroll-area";
+import "./menu-D90CDTi2.js";
+import "@base-ui/react/menu";
+import "./opencami-logo-C-43FL3R.js";
+import "./markdown-BFE5y9YH.js";
+import "marked";
+import "react-markdown";
+import "remark-breaks";
+import "remark-gfm";
+import "react-dom";
+import "./router-DCjikH21.js";
+import "node:crypto";
+import "node:fs";
+import "node:os";
+import "node:path";
+import "ws";
+import "@tanstack/router-core/ssr/client";
+import "node:stream";
+import "node:child_process";
+import "node:fs/promises";
+import "path";
+function getInitialEnabled() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.localStorage.getItem("feature_artifacts") === "true";
+  } catch {
+    return false;
+  }
+}
+const useArtifactsStore = create()((set) => ({
+  isEnabled: getInitialEnabled(),
+  isPanelOpen: false,
+  content: "",
+  type: null,
+  setArtifact: function setArtifact(content, type) {
+    set({ content, type, isPanelOpen: true });
+  },
+  clearArtifact: function clearArtifact() {
+    set({ content: "", type: null });
+  },
+  openPanel: function openPanel() {
+    set({ isPanelOpen: true });
+  },
+  closePanel: function closePanel() {
+    set({ isPanelOpen: false });
+  },
+  setEnabled: function setEnabled(v) {
+    if (typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem("feature_artifacts", String(v));
+      } catch {
+      }
+    }
+    set({ isEnabled: v });
+  }
+}));
+function SettingsSection({
+  title,
+  tabId,
+  activeTab,
+  children
+}) {
+  const hiddenOnDesktop = tabId && activeTab && tabId !== activeTab;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-b border-primary-200 py-2 last:border-0",
+        hiddenOnDesktop && "md:hidden"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: "mb-1.5 text-sm font-semibold text-primary-700", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children })
+      ]
+    }
+  );
+}
+function SettingsRow({
+  label,
+  description,
+  inline,
+  children
+}) {
+  if (inline) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 select-none", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium text-primary-800", children: label }),
+        description && /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500", children: description })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[13px] font-medium text-primary-800", children: label }),
+      description && /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children })
+  ] });
+}
+const textSizeOptions = [
+  { value: "14px", label: "S" },
+  { value: "16px", label: "M" },
+  { value: "18px", label: "L" },
+  { value: "20px", label: "XL" }
+];
+const fontFamilyOptions = [
+  {
+    value: "system",
+    label: "System",
+    cssValue: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    previewClass: "font-sans"
+  },
+  {
+    value: "inter",
+    label: "Inter",
+    cssValue: '"Inter", sans-serif',
+    previewClass: 'font-["Inter",sans-serif]'
+  },
+  {
+    value: "roboto",
+    label: "Roboto",
+    cssValue: '"Roboto", sans-serif',
+    previewClass: 'font-["Roboto",sans-serif]'
+  }
+];
+const densityOptions = [
+  { value: "compact", label: "Compact" },
+  { value: "comfortable", label: "Comfortable" },
+  { value: "spacious", label: "Spacious" }
+];
+const accentColorOptions = [
+  {
+    value: "green",
+    label: "Green",
+    accent: "#22c55e",
+    hover: "#16a34a",
+    light: "rgba(34, 197, 94, 0.10)"
+  },
+  {
+    value: "blue",
+    label: "Blue",
+    accent: "#3b82f6",
+    hover: "#2563eb",
+    light: "rgba(59, 130, 246, 0.10)"
+  },
+  {
+    value: "purple",
+    label: "Purple",
+    accent: "#8b5cf6",
+    hover: "#7c3aed",
+    light: "rgba(139, 92, 246, 0.10)"
+  },
+  {
+    value: "orange",
+    label: "Orange",
+    accent: "#f97316",
+    hover: "#ea580c",
+    light: "rgba(249, 115, 22, 0.10)"
+  },
+  {
+    value: "pink",
+    label: "Pink",
+    accent: "#ec4899",
+    hover: "#db2777",
+    light: "rgba(236, 72, 153, 0.10)"
+  },
+  {
+    value: "red",
+    label: "Red",
+    accent: "#ef4444",
+    hover: "#dc2626",
+    light: "rgba(239, 68, 68, 0.10)"
+  },
+  {
+    value: "cyan",
+    label: "Cyan",
+    accent: "#06b6d4",
+    hover: "#0891b2",
+    light: "rgba(6, 182, 212, 0.10)"
+  },
+  {
+    value: "yellow",
+    label: "Yellow",
+    accent: "#eab308",
+    hover: "#ca8a04",
+    light: "rgba(234, 179, 8, 0.10)"
+  }
+];
+const chatWidthOptions = [
+  { value: "narrow", label: "Narrow", cssValue: "640px" },
+  { value: "medium", label: "Medium", cssValue: "800px" },
+  { value: "wide", label: "Wide", cssValue: "1000px" },
+  { value: "full", label: "Full", cssValue: "100%" }
+];
+const sidebarWidthOptions = [
+  { value: "compact", label: "Compact", cssValue: "200px" },
+  { value: "normal", label: "Normal", cssValue: "260px" },
+  { value: "wide", label: "Wide", cssValue: "320px" },
+  { value: "xl", label: "XL", cssValue: "400px" }
+];
+const bubbleStyleOptions = [
+  { value: "default", label: "Default" },
+  { value: "bubbles", label: "Bubbles" },
+  { value: "minimal", label: "Minimal" }
+];
+function isTextSizeValue(value) {
+  return textSizeOptions.some((option) => option.value === value);
+}
+function isFontFamilyValue(value) {
+  return fontFamilyOptions.some((option) => option.value === value);
+}
+function isDensityValue(value) {
+  return densityOptions.some((option) => option.value === value);
+}
+function isAccentColorValue(value) {
+  return accentColorOptions.some((option) => option.value === value);
+}
+function isChatWidthValue(value) {
+  return chatWidthOptions.some((option) => option.value === value);
+}
+function isSidebarWidthValue(value) {
+  return sidebarWidthOptions.some((option) => option.value === value);
+}
+function isBubbleStyleValue(value) {
+  return bubbleStyleOptions.some((option) => option.value === value);
+}
+function SettingsDialog({
+  open,
+  onOpenChange,
+  onClose
+}) {
+  const { settings, updateSettings } = useChatSettings();
+  const {
+    settings: llmSettings,
+    updateSettings: updateLlmSettings,
+    status: llmStatus,
+    testApiKey
+  } = useLlmSettings();
+  const [activeTab, setActiveTab] = useState("appearance");
+  const [apiKeyInput, setApiKeyInput] = useState(llmSettings.llmApiKey);
+  const [testingKey, setTestingKey] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  const [textSize, setTextSize] = useState(() => {
+    if (typeof window === "undefined") return "16px";
+    try {
+      const stored = localStorage.getItem("opencami-text-size");
+      if (stored && isTextSizeValue(stored)) return stored;
+    } catch {
+    }
+    return "16px";
+  });
+  const [ttsEnabled, setTtsEnabled] = useState(() => {
+    if (typeof window === "undefined") return true;
+    try {
+      const stored = localStorage.getItem("opencami-tts-enabled");
+      return stored === null ? true : stored === "true";
+    } catch {
+      return true;
+    }
+  });
+  const [ttsProvider, setTtsProvider] = useState(() => {
+    if (typeof window === "undefined") return "auto";
+    try {
+      return localStorage.getItem("opencami-tts-provider") || "auto";
+    } catch {
+      return "auto";
+    }
+  });
+  const [ttsVoice, setTtsVoice] = useState(() => {
+    if (typeof window === "undefined") return "nova";
+    try {
+      return localStorage.getItem("opencami-tts-voice") || "nova";
+    } catch {
+      return "nova";
+    }
+  });
+  const [sttProvider, setSttProvider] = useState(() => {
+    if (typeof window === "undefined") return "auto";
+    try {
+      return localStorage.getItem("opencami-stt-provider") || "auto";
+    } catch {
+      return "auto";
+    }
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const storedFontFamily = localStorage.getItem("opencami-font-family");
+      if (storedFontFamily && isFontFamilyValue(storedFontFamily)) {
+        applyFontFamily(storedFontFamily);
+        if (settings.fontFamily !== storedFontFamily) {
+          updateSettings({ fontFamily: storedFontFamily });
+        }
+      } else {
+        applyFontFamily(settings.fontFamily);
+      }
+      const storedDensity = localStorage.getItem("opencami-density");
+      if (storedDensity && isDensityValue(storedDensity)) {
+        applyDensity(storedDensity);
+        if (settings.density !== storedDensity) {
+          updateSettings({ density: storedDensity });
+        }
+      } else {
+        applyDensity(settings.density);
+      }
+      const storedAccentColor = localStorage.getItem("opencami-accent-color");
+      if (storedAccentColor && isAccentColorValue(storedAccentColor)) {
+        applyAccentColor(storedAccentColor);
+        if (settings.accentColor !== storedAccentColor) {
+          updateSettings({ accentColor: storedAccentColor });
+        }
+      } else {
+        applyAccentColor(settings.accentColor);
+      }
+      const storedChatWidth = localStorage.getItem("opencami-chat-width");
+      if (storedChatWidth && isChatWidthValue(storedChatWidth)) {
+        applyChatWidth(storedChatWidth);
+        if (settings.chatWidth !== storedChatWidth) {
+          updateSettings({ chatWidth: storedChatWidth });
+        }
+      } else {
+        applyChatWidth(settings.chatWidth);
+      }
+      const storedSidebarWidth = localStorage.getItem("opencami-sidebar-width");
+      if (storedSidebarWidth && isSidebarWidthValue(storedSidebarWidth)) {
+        applySidebarWidth(storedSidebarWidth);
+        if (settings.sidebarWidth !== storedSidebarWidth) {
+          updateSettings({
+            sidebarWidth: storedSidebarWidth
+          });
+        }
+      } else {
+        applySidebarWidth(settings.sidebarWidth);
+      }
+      const storedBubbleStyle = localStorage.getItem("opencami-bubble-style");
+      if (storedBubbleStyle && isBubbleStyleValue(storedBubbleStyle)) {
+        applyBubbleStyle(storedBubbleStyle);
+        if (settings.bubbleStyle !== storedBubbleStyle) {
+          updateSettings({ bubbleStyle: storedBubbleStyle });
+        }
+      } else {
+        applyBubbleStyle(settings.bubbleStyle);
+      }
+    } catch {
+      applyFontFamily(settings.fontFamily);
+      applyDensity(settings.density);
+      applyAccentColor(settings.accentColor);
+      applyChatWidth(settings.chatWidth);
+      applySidebarWidth(settings.sidebarWidth);
+      applyBubbleStyle(settings.bubbleStyle);
+    }
+  }, []);
+  useEffect(() => {
+    applyFontFamily(settings.fontFamily);
+  }, [settings.fontFamily]);
+  useEffect(() => {
+    applyDensity(settings.density);
+  }, [settings.density]);
+  useEffect(() => {
+    applyAccentColor(settings.accentColor);
+  }, [settings.accentColor]);
+  useEffect(() => {
+    applyChatWidth(settings.chatWidth);
+  }, [settings.chatWidth]);
+  useEffect(() => {
+    applySidebarWidth(settings.sidebarWidth);
+  }, [settings.sidebarWidth]);
+  useEffect(() => {
+    applyBubbleStyle(settings.bubbleStyle);
+  }, [settings.bubbleStyle]);
+  const handleTtsProviderChange = (value) => {
+    setTtsProvider(value);
+    try {
+      localStorage.setItem("opencami-tts-provider", value);
+    } catch {
+    }
+  };
+  const handleTtsVoiceChange = (value) => {
+    setTtsVoice(value);
+    try {
+      localStorage.setItem("opencami-tts-voice", value);
+    } catch {
+    }
+  };
+  const handleSttProviderChange = (value) => {
+    setSttProvider(value);
+    try {
+      localStorage.setItem("opencami-stt-provider", value);
+    } catch {
+    }
+  };
+  function applyTextSize(value) {
+    if (typeof document === "undefined") return;
+    document.documentElement.style.setProperty("--opencami-text-size", value);
+  }
+  function applyFontFamily(value) {
+    if (typeof document === "undefined") return;
+    const selected = fontFamilyOptions.find((option) => option.value === value);
+    const cssValue = selected?.cssValue ?? fontFamilyOptions[0].cssValue;
+    document.documentElement.style.setProperty(
+      "--opencami-font-family",
+      cssValue
+    );
+  }
+  function applyDensity(value) {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.style.setProperty("--opencami-density", value);
+    if (value === "compact") {
+      root.style.setProperty("--opencami-msg-padding-y", "0.25rem");
+      root.style.setProperty("--opencami-msg-gap", "0.25rem");
+      root.style.setProperty("--opencami-user-bubble-py", "0.4rem");
+      return;
+    }
+    if (value === "spacious") {
+      root.style.setProperty("--opencami-msg-padding-y", "1.25rem");
+      root.style.setProperty("--opencami-msg-gap", "1rem");
+      root.style.setProperty("--opencami-user-bubble-py", "1rem");
+      return;
+    }
+    root.style.setProperty("--opencami-msg-padding-y", "0.75rem");
+    root.style.setProperty("--opencami-msg-gap", "0.5rem");
+    root.style.setProperty("--opencami-user-bubble-py", "0.625rem");
+  }
+  function applyAccentColor(value) {
+    if (typeof document === "undefined") return;
+    const selected = accentColorOptions.find((option) => option.value === value) ?? accentColorOptions[0];
+    const root = document.documentElement;
+    root.style.setProperty("--opencami-accent", selected.accent);
+    root.style.setProperty("--opencami-accent-hover", selected.hover);
+    root.style.setProperty("--opencami-accent-light", selected.light);
+  }
+  function applyChatWidth(value) {
+    if (typeof document === "undefined") return;
+    const selected = chatWidthOptions.find((option) => option.value === value) ?? chatWidthOptions[2];
+    document.documentElement.style.setProperty(
+      "--opencami-chat-width",
+      selected.cssValue
+    );
+  }
+  function applySidebarWidth(value) {
+    if (typeof document === "undefined") return;
+    const selected = sidebarWidthOptions.find((option) => option.value === value) ?? sidebarWidthOptions[1];
+    document.documentElement.style.setProperty(
+      "--opencami-sidebar-width",
+      selected.cssValue
+    );
+  }
+  function applyBubbleStyle(value) {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute("data-opencami-bubble-style", value);
+  }
+  const handleTextSizeChange = (value) => {
+    if (!isTextSizeValue(value)) return;
+    setTextSize(value);
+    applyTextSize(value);
+    try {
+      localStorage.setItem("opencami-text-size", value);
+    } catch {
+    }
+  };
+  const handleFontFamilyChange = (value) => {
+    if (!isFontFamilyValue(value)) return;
+    applyFontFamily(value);
+    updateSettings({ fontFamily: value });
+    try {
+      localStorage.setItem("opencami-font-family", value);
+    } catch {
+    }
+  };
+  const handleDensityChange = (value) => {
+    if (!isDensityValue(value)) return;
+    applyDensity(value);
+    updateSettings({ density: value });
+    try {
+      localStorage.setItem("opencami-density", value);
+    } catch {
+    }
+  };
+  const handleAccentColorChange = (value) => {
+    if (!isAccentColorValue(value)) return;
+    applyAccentColor(value);
+    updateSettings({ accentColor: value });
+    try {
+      localStorage.setItem("opencami-accent-color", value);
+    } catch {
+    }
+  };
+  const handleChatWidthChange = (value) => {
+    if (!isChatWidthValue(value)) return;
+    applyChatWidth(value);
+    updateSettings({ chatWidth: value });
+    try {
+      localStorage.setItem("opencami-chat-width", value);
+    } catch {
+    }
+  };
+  const handleSidebarWidthChange = (value) => {
+    if (!isSidebarWidthValue(value)) return;
+    applySidebarWidth(value);
+    updateSettings({ sidebarWidth: value });
+    try {
+      localStorage.setItem("opencami-sidebar-width", value);
+    } catch {
+    }
+  };
+  const handleBubbleStyleChange = (value) => {
+    if (!isBubbleStyleValue(value)) return;
+    applyBubbleStyle(value);
+    updateSettings({ bubbleStyle: value });
+    try {
+      localStorage.setItem("opencami-bubble-style", value);
+    } catch {
+    }
+  };
+  const handleTtsToggle = (checked) => {
+    setTtsEnabled(checked);
+    try {
+      localStorage.setItem("opencami-tts-enabled", String(checked));
+    } catch {
+    }
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: "opencami-tts-enabled",
+        newValue: String(checked)
+      })
+    );
+  };
+  const [personasAvailable, setPersonasAvailable] = useState(false);
+  const personasAbortControllerRef = useRef(null);
+  const [personasEnabled, setPersonasEnabled] = useState(() => {
+    if (typeof window === "undefined") return true;
+    try {
+      const stored = localStorage.getItem("opencami-personas-enabled");
+      return stored === null ? true : stored === "true";
+    } catch {
+      return true;
+    }
+  });
+  useEffect(() => {
+    let mounted = true;
+    async function checkPersonas() {
+      personasAbortControllerRef.current?.abort();
+      const controller = new AbortController();
+      personasAbortControllerRef.current = controller;
+      try {
+        const res = await fetch("/api/personas", { signal: controller.signal });
+        if (!res.ok) return;
+        const data = await res.json();
+        if (mounted && data.ok) {
+          setPersonasAvailable(data.available);
+        }
+      } catch (error) {
+        if (error instanceof Error && error.name === "AbortError") return;
+      }
+    }
+    checkPersonas();
+    return () => {
+      mounted = false;
+      personasAbortControllerRef.current?.abort();
+    };
+  }, []);
+  const handlePersonasToggle = (checked) => {
+    setPersonasEnabled(checked);
+    try {
+      localStorage.setItem("opencami-personas-enabled", String(checked));
+    } catch {
+    }
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: "opencami-personas-enabled",
+        newValue: String(checked)
+      })
+    );
+  };
+  const handleTestApiKey = async () => {
+    if (!apiKeyInput.trim()) return;
+    setTestingKey(true);
+    setTestResult(null);
+    try {
+      const result = await testApiKey(apiKeyInput.trim());
+      setTestResult(result);
+      if (result.valid) {
+        updateLlmSettings({ llmApiKey: apiKeyInput.trim() });
+      }
+    } finally {
+      setTestingKey(false);
+    }
+  };
+  const handleSaveApiKey = () => {
+    updateLlmSettings({ llmApiKey: apiKeyInput.trim() });
+    setTestResult(null);
+  };
+  const handleClearApiKey = () => {
+    setApiKeyInput("");
+    updateLlmSettings({ llmApiKey: "" });
+    setTestResult(null);
+  };
+  const themeOptions = [
+    { value: "system", label: "Auto", icon: ComputerIcon },
+    { value: "light", label: "Light", icon: Sun01Icon },
+    { value: "dark", label: "Dark", icon: Moon01Icon },
+    { value: "chameleon", label: "Cham", icon: Leaf01Icon },
+    { value: "frost-light", label: "Ice", icon: DropletIcon }
+  ];
+  function applyTheme(theme) {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    root.classList.remove(
+      "light",
+      "dark",
+      "system",
+      "chameleon",
+      "frost",
+      "frost-light",
+      "frost-dark"
+    );
+    root.style.colorScheme = "";
+    root.classList.add(theme);
+    const isFrostLight = theme === "frost-light";
+    const isFrostDark = theme === "frost-dark";
+    if (isFrostLight || isFrostDark) {
+      root.classList.add("frost");
+    }
+    if (isFrostDark) {
+      root.classList.add("dark");
+    }
+    if (theme === "system" && media.matches) {
+      root.classList.add("dark");
+    }
+    if (isFrostLight) {
+      root.classList.remove("dark");
+      root.style.colorScheme = "light";
+    }
+  }
+  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "w-[min(680px,92vw)] max-h-[85vh] overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "mb-1", children: "Settings" }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "hidden", children: "Configure OpenCami" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        DialogClose,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "icon-sm",
+              variant: "ghost",
+              className: "text-primary-500 hover:bg-primary-100 hover:text-primary-700",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx(
+                HugeiconsIcon,
+                {
+                  icon: Cancel01Icon,
+                  size: 20,
+                  strokeWidth: 1.5
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex md:flex-row flex-col md:gap-3 gap-0 md:min-h-[400px]", children: [
+      /* @__PURE__ */ jsx("nav", { className: "hidden md:flex flex-col gap-0.5 min-w-[160px] border-r border-primary-200 pr-3", children: [
+        { id: "connection", label: "Connection", icon: Link01Icon },
+        {
+          id: "appearance",
+          label: "Appearance",
+          icon: PaintBoardIcon
+        },
+        { id: "chat", label: "Chat", icon: MessageEdit01Icon },
+        { id: "workspace", label: "Workspace", icon: Settings02Icon },
+        { id: "personas", label: "Personas", icon: UserIcon },
+        { id: "voice", label: "Voice", icon: VoiceIcon },
+        { id: "llm", label: "LLM Features", icon: AiBrain01Icon },
+        { id: "about", label: "About", icon: InformationCircleIcon }
+      ].map((tab) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: () => setActiveTab(tab.id),
+          className: cn(
+            "flex items-center gap-2 px-2.5 py-1.5 rounded-md text-sm text-left transition-colors",
+            activeTab === tab.id ? "text-primary-900 font-medium" : "text-primary-600 hover:text-primary-900 hover:bg-primary-50"
+          ),
+          style: activeTab === tab.id ? { backgroundColor: "var(--opencami-accent-light)" } : void 0,
+          children: [
+            /* @__PURE__ */ jsx(HugeiconsIcon, { icon: tab.icon, size: 16, strokeWidth: 1.5 }),
+            tab.label
+          ]
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto md:max-h-[calc(85vh-90px)] max-h-none", children: [
+        /* @__PURE__ */ jsx(
+          SettingsSection,
+          {
+            title: "Connection",
+            tabId: "connection",
+            activeTab,
+            children: /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Status", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-green-600", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-green-500" }),
+              "Connected"
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "Appearance",
+            tabId: "appearance",
+            activeTab,
+            children: [
+              /* @__PURE__ */ jsx(SettingsRow, { label: "Theme", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.theme,
+                  onValueChange: (value) => {
+                    const theme = value;
+                    applyTheme(theme);
+                    updateSettings({ theme });
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1.5 flex-wrap *:data-[slot=tab-indicator]:duration-0",
+                      children: themeOptions.map((option) => /* @__PURE__ */ jsxs(
+                        TabsTab,
+                        {
+                          value: option.value,
+                          className: "text-[11px] px-1 py-0.5 gap-0.5",
+                          children: [
+                            option.icon && /* @__PURE__ */ jsx(
+                              HugeiconsIcon,
+                              {
+                                icon: option.icon,
+                                size: 13,
+                                strokeWidth: 1.5
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { children: option.label })
+                          ]
+                        },
+                        option.value
+                      ))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SettingsRow, { label: "Accent Color", children: /* @__PURE__ */ jsx("div", { className: "flex gap-0.5 flex-wrap", children: accentColorOptions.map((option) => {
+                const selected = settings.accentColor === option.value;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleAccentColorChange(option.value),
+                    className: cn(
+                      "flex items-center justify-center rounded-md p-1 transition-all duration-150",
+                      selected ? "scale-110" : "hover:bg-primary-50 hover:scale-105"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "size-6 rounded-full transition-shadow duration-150",
+                          selected ? "ring-2 ring-offset-2" : "border-2 border-primary-200"
+                        ),
+                        style: {
+                          backgroundColor: option.accent,
+                          ...selected ? {
+                            "--tw-ring-color": option.accent
+                          } : {}
+                        }
+                      }
+                    )
+                  },
+                  option.value
+                );
+              }) }) }),
+              /* @__PURE__ */ jsx(SettingsRow, { label: "Text Size", children: /* @__PURE__ */ jsx(Tabs, { value: textSize, onValueChange: handleTextSizeChange, children: /* @__PURE__ */ jsx(
+                TabsList,
+                {
+                  variant: "default",
+                  className: "gap-2 *:data-[slot=tab-indicator]:duration-0",
+                  children: textSizeOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "tabular-nums text-xs", children: option.label }) }, option.value))
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Font", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.fontFamily,
+                  onValueChange: handleFontFamilyChange,
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1 *:data-[slot=tab-indicator]:duration-0",
+                      children: fontFamilyOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "text-xs",
+                          style: { fontFamily: option.cssValue },
+                          children: option.label
+                        }
+                      ) }, option.value))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Density", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.density,
+                  onValueChange: handleDensityChange,
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1 *:data-[slot=tab-indicator]:duration-0",
+                      children: densityOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: option.label }) }, option.value))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Bubbles", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.bubbleStyle,
+                  onValueChange: handleBubbleStyleChange,
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1 *:data-[slot=tab-indicator]:duration-0",
+                      children: bubbleStyleOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: option.label }) }, option.value))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Chat Width", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.chatWidth,
+                  onValueChange: handleChatWidthChange,
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1 *:data-[slot=tab-indicator]:duration-0",
+                      children: chatWidthOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: option.label }) }, option.value))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Sidebar", children: /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  value: settings.sidebarWidth,
+                  onValueChange: handleSidebarWidthChange,
+                  children: /* @__PURE__ */ jsx(
+                    TabsList,
+                    {
+                      variant: "default",
+                      className: "gap-1 *:data-[slot=tab-indicator]:duration-0",
+                      children: sidebarWidthOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: option.label }) }, option.value))
+                    }
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(SettingsSection, { title: "Chat", tabId: "chat", activeTab, children: [
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show tool messages", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: settings.showToolMessages,
+              onCheckedChange: (checked) => updateSettings({ showToolMessages: checked })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show reasoning blocks", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: settings.showReasoningBlocks,
+              onCheckedChange: (checked) => updateSettings({ showReasoningBlocks: checked })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show search sources", children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: settings.showSearchSources,
+              onCheckedChange: (checked) => updateSettings({ showSearchSources: checked })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            SettingsRow,
+            {
+              inline: true,
+              label: "Inline File Preview",
+              description: "Make file paths in messages clickable to preview file contents",
+              children: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: settings.inlineFilePreview,
+                  onCheckedChange: (checked) => updateSettings({ inlineFilePreview: checked })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "Workspace",
+            tabId: "workspace",
+            activeTab,
+            children: [
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "File Explorer",
+                  description: "Browse and edit workspace files from the sidebar",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          const v = localStorage.getItem("opencami-file-explorer");
+                          return v === null ? true : v === "true";
+                        } catch {
+                          return true;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem(
+                          "opencami-file-explorer",
+                          String(checked)
+                        );
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Memory Viewer",
+                  description: "Browse and edit MEMORY.md and daily memory files",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          const v = localStorage.getItem("opencami-memory-viewer");
+                          return v === null ? true : v === "true";
+                        } catch {
+                          return true;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem(
+                          "opencami-memory-viewer",
+                          String(checked)
+                        );
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Agent Manager (Beta)",
+                  description: "Show Agent Manager in sidebar for creating and managing agents",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          return localStorage.getItem("opencami-agent-manager") === "true";
+                        } catch {
+                          return false;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem(
+                          "opencami-agent-manager",
+                          String(checked)
+                        );
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Skills Browser (Beta)",
+                  description: "Browse and install skills from ClawHub",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          return localStorage.getItem("opencami-skills-browser") === "true";
+                        } catch {
+                          return false;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem(
+                          "opencami-skills-browser",
+                          String(checked)
+                        );
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Cron Jobs Panel (Beta)",
+                  description: "Show Cron Jobs in sidebar for managing OpenClaw cron schedules",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          return localStorage.getItem("opencami-cron-manager") === "true";
+                        } catch {
+                          return false;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem(
+                          "opencami-cron-manager",
+                          String(checked)
+                        );
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Dashboard (Beta)",
+                  description: "Show Dashboard in sidebar with system and gateway widgets",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          return localStorage.getItem("feature_dashboard") === "true";
+                        } catch {
+                          return false;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem("feature_dashboard", String(checked));
+                        window.location.reload();
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Artifacts Preview (Beta)",
+                  description: "Show live HTML/SVG preview panel when AI generates code",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: (() => {
+                        try {
+                          return localStorage.getItem("feature_artifacts") === "true";
+                        } catch {
+                          return false;
+                        }
+                      })(),
+                      onCheckedChange: (checked) => {
+                        localStorage.setItem("feature_artifacts", String(checked));
+                        useArtifactsStore.getState().setEnabled(checked);
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "Personas",
+            tabId: "personas",
+            activeTab,
+            children: [
+              personasAvailable ? /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Persona Picker",
+                  description: "Show persona picker in chat (20 personalities)",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: personasEnabled,
+                      onCheckedChange: handlePersonasToggle
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Persona Picker",
+                  description: "Install the Personas skill to unlock 20 AI personalities",
+                  children: /* @__PURE__ */ jsx(Switch, { checked: false, disabled: true })
+                }
+              ),
+              !personasAvailable && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: "https://www.clawhub.ai/robbyczgw-cla/personas",
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "text-xs text-primary-600 hover:text-primary-900 hover:underline",
+                  children: "Get it on ClawHub →"
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "Text-to-Speech",
+            tabId: "voice",
+            activeTab,
+            children: [
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Voice Playback",
+                  description: "Add a 🔊 button to AI messages for text-to-speech",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: ttsEnabled,
+                      onCheckedChange: handleTtsToggle
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "TTS Provider",
+                  description: "Choose which service generates speech",
+                  children: /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: ttsProvider,
+                      onChange: (e) => handleTtsProviderChange(e.target.value),
+                      className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
+                        /* @__PURE__ */ jsx("option", { value: "elevenlabs", children: "ElevenLabs" }),
+                        /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
+                        /* @__PURE__ */ jsx("option", { value: "edge", children: "Edge TTS (free)" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              ttsProvider === "openai" && /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Voice",
+                  description: "OpenAI voice selection",
+                  children: /* @__PURE__ */ jsx(
+                    "select",
+                    {
+                      value: ttsVoice,
+                      onChange: (e) => handleTtsVoiceChange(e.target.value),
+                      className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
+                      children: [
+                        "alloy",
+                        "echo",
+                        "fable",
+                        "onyx",
+                        "nova",
+                        "shimmer"
+                      ].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v.charAt(0).toUpperCase() + v.slice(1) }, v))
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SettingsSection,
+          {
+            title: "Speech-to-Text",
+            tabId: "voice",
+            activeTab,
+            children: /* @__PURE__ */ jsx(
+              SettingsRow,
+              {
+                inline: true,
+                label: "STT Provider",
+                description: "Choose which service transcribes your voice",
+                children: /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    value: sttProvider,
+                    onChange: (e) => handleSttProviderChange(e.target.value),
+                    className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
+                      /* @__PURE__ */ jsx("option", { value: "elevenlabs", children: "ElevenLabs" }),
+                      /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
+                      /* @__PURE__ */ jsx("option", { value: "browser", children: "Browser (free)" })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "LLM Features",
+            tabId: "llm",
+            activeTab,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "text-xs text-primary-500 mb-3", children: [
+                "Enhance session titles and follow-up suggestions using an LLM provider.",
+                llmStatus.hasEnvKey && /* @__PURE__ */ jsx("span", { className: "block mt-1 text-green-600", children: "✓ Server has OPENAI_API_KEY configured" }),
+                llmStatus.hasOpenRouterKey && /* @__PURE__ */ jsx("span", { className: "block mt-1 text-green-600", children: "✓ Server has OPENROUTER_API_KEY configured" }),
+                llmStatus.hasKilocodeKey && /* @__PURE__ */ jsx("span", { className: "block mt-1 text-green-600", children: "✓ Server has KILOCODE_API_KEY configured" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Provider",
+                  description: "Choose LLM provider for titles & follow-ups",
+                  children: /* @__PURE__ */ jsxs(
+                    "select",
+                    {
+                      value: llmSettings.llmProvider,
+                      onChange: (e) => {
+                        const provider = e.target.value;
+                        updateLlmSettings({
+                          llmProvider: provider,
+                          llmBaseUrl: "",
+                          llmModel: ""
+                        });
+                      },
+                      className: "px-2 py-1 text-sm rounded-md border border-primary-200 bg-surface focus:outline-none focus:ring-2 focus:ring-primary-500",
+                      children: [
+                        /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
+                        /* @__PURE__ */ jsx("option", { value: "openrouter", children: "OpenRouter" }),
+                        /* @__PURE__ */ jsx("option", { value: "kilocode", children: "Kilo Gateway" }),
+                        /* @__PURE__ */ jsx("option", { value: "ollama", children: "Ollama (local)" }),
+                        /* @__PURE__ */ jsx("option", { value: "custom", children: "Custom" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Smart session titles",
+                  description: "Generate concise titles using AI",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: llmSettings.useLlmTitles,
+                      onCheckedChange: (checked) => updateLlmSettings({ useLlmTitles: checked }),
+                      disabled: !llmStatus.isAvailable
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SettingsRow,
+                {
+                  inline: true,
+                  label: "Smart follow-up suggestions",
+                  description: "AI-generated contextual follow-ups",
+                  children: /* @__PURE__ */ jsx(
+                    Switch,
+                    {
+                      checked: llmSettings.useLlmFollowUps,
+                      onCheckedChange: (checked) => updateLlmSettings({ useLlmFollowUps: checked }),
+                      disabled: !llmStatus.isAvailable
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-2", children: [
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500 mb-1", children: "Model" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: llmSettings.llmModel,
+                      onChange: (e) => updateLlmSettings({ llmModel: e.target.value }),
+                      placeholder: getLlmProviderDefaults(llmSettings.llmProvider).model || "model-name",
+                      className: "w-full px-3 py-1.5 text-sm rounded-md border border-primary-200 bg-surface focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    }
+                  )
+                ] }),
+                (llmSettings.llmProvider === "custom" || llmSettings.llmProvider === "ollama") && /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500 mb-1", children: "Base URL" }),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: llmSettings.llmBaseUrl,
+                      onChange: (e) => updateLlmSettings({ llmBaseUrl: e.target.value }),
+                      placeholder: getLlmProviderDefaults(llmSettings.llmProvider).baseUrl || "https://...",
+                      className: "w-full px-3 py-1.5 text-sm rounded-md border border-primary-200 bg-surface focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-3 border-t border-primary-100", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-800 mb-2", children: llmSettings.llmProvider === "ollama" ? "API Key (optional)" : "API Key" }),
+                /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500 mb-2", children: llmSettings.llmProvider === "ollama" ? "Not required for local Ollama" : llmStatus.hasEnvKey && llmSettings.llmProvider === "openai" ? "Optional: Override server key with your own" : `Required for ${llmSettings.llmProvider === "openrouter" ? "OpenRouter" : llmSettings.llmProvider === "kilocode" ? "Kilo Gateway" : "LLM features"} (stored locally)` }),
+                /* @__PURE__ */ jsxs("div", { className: "text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-md px-2 py-1.5 mb-2", children: [
+                  "⚠️ ",
+                  /* @__PURE__ */ jsx("strong", { children: "Security Note:" }),
+                  " API keys are stored in your browser's localStorage. This is convenient but not secure for shared computers. For production use, configure keys server-side via environment variables (OPENAI_API_KEY, OPENROUTER_API_KEY, KILOCODE_API_KEY)."
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "password",
+                      value: apiKeyInput,
+                      onChange: (e) => {
+                        setApiKeyInput(e.target.value);
+                        setTestResult(null);
+                      },
+                      placeholder: "sk-...",
+                      className: "flex-1 px-3 py-1.5 text-sm rounded-md border border-primary-200 bg-surface focus:outline-none focus:ring-2 focus:ring-primary-500"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "outline",
+                      onClick: handleTestApiKey,
+                      disabled: !apiKeyInput.trim() || testingKey,
+                      className: "min-w-[60px]",
+                      children: testingKey ? /* @__PURE__ */ jsx(
+                        HugeiconsIcon,
+                        {
+                          icon: Loading02Icon,
+                          size: 16,
+                          className: "animate-spin"
+                        }
+                      ) : "Test"
+                    }
+                  )
+                ] }),
+                testResult && /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: `mt-2 flex items-center gap-1.5 text-xs ${testResult.valid ? "text-green-600" : "text-red-600"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        HugeiconsIcon,
+                        {
+                          icon: testResult.valid ? Tick01Icon : Cancel02Icon,
+                          size: 14
+                        }
+                      ),
+                      testResult.valid ? "API key is valid" : testResult.error || "Invalid API key"
+                    ]
+                  }
+                ),
+                llmSettings.llmApiKey && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "text-xs text-green-600 flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Tick01Icon, size: 14 }),
+                    "Key saved"
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "sm",
+                      variant: "ghost",
+                      onClick: handleClearApiKey,
+                      className: "text-xs text-red-600 hover:text-red-700 hover:bg-red-50",
+                      children: "Clear"
+                    }
+                  )
+                ] }),
+                apiKeyInput && apiKeyInput !== llmSettings.llmApiKey && !testResult?.valid && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "sm",
+                    variant: "outline",
+                    onClick: handleSaveApiKey,
+                    className: "mt-2 w-full",
+                    children: "Save without testing"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          SettingsSection,
+          {
+            title: "About",
+            tabId: "about",
+            activeTab,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-800", children: "OpenCami" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-4 pt-2", children: [
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://github.com/robbyczgw-cla/opencami",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm text-primary-600 hover:text-primary-900 hover:underline",
+                    children: "GitHub"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://docs.openclaw.ai",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm text-primary-600 hover:text-primary-900 hover:underline",
+                    children: "OpenClaw docs"
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(DialogClose, { onClick: onClose, children: "Close" }) })
+  ] }) }) });
+}
+export {
+  SettingsDialog
+};