opencami 1.4.0 → 1.5.1

package/dist/server/assets/{settings-dialog-BaGT4e5l.js → settings-dialog-CHVzrou9.js}

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import { c as cn, B as Button } from "./button-DtQ3rV1m.js";
+import { useState, useEffect, useRef } from "react";
+import { B as Button, c as cn } from "./button-CwY2OHFj.js";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { Cancel01Icon, Link01Icon, PaintBoardIcon, MessageEdit01Icon, UserIcon, VoiceIcon, AiBrain01Icon, InformationCircleIcon, ComputerIcon, Sun01Icon, Moon01Icon, Leaf01Icon, Loading02Icon, Tick01Icon, Cancel02Icon } from "@hugeicons/core-free-icons";
-import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose } from "./use-file-explorer-state-DfAKF2gZ.js";
-import { S as Switch } from "./switch-DnX0MjGS.js";
-import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-import { u as useChatSettings } from "./index-BNSsDaLb.js";
-import { u as useLlmSettings, g as getLlmProviderDefaults } from "./_sessionKey-BhFH4uWY.js";
+import { Cancel01Icon, Link01Icon, PaintBoardIcon, MessageEdit01Icon, UserIcon, VoiceIcon, AiBrain01Icon, InformationCircleIcon, ComputerIcon, Sun01Icon, Moon01Icon, Leaf01Icon, DropletIcon, Loading02Icon, Tick01Icon, Cancel02Icon } from "@hugeicons/core-free-icons";
+import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose } from "./use-file-explorer-state-Il1LlBAe.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-B5UHBd2U.js";
 import "@base-ui/react/merge-props";
 import "@base-ui/react/use-render";
 import "class-variance-authority";
@@ -17,43 +17,11 @@ import "@base-ui/react/dialog";
 import "@base-ui/react/menu";
 import "zustand";
 import "@base-ui/react/switch";
-import "shiki/core";
-import "shiki/engine/javascript";
-import "@shikijs/themes/vitesse-dark";
-import "@shikijs/themes/vitesse-light";
-import "@shikijs/langs/bash";
-import "@shikijs/langs/c";
-import "@shikijs/langs/cpp";
-import "@shikijs/langs/csharp";
-import "@shikijs/langs/css";
-import "@shikijs/langs/diff";
-import "@shikijs/langs/dockerfile";
-import "@shikijs/langs/go";
-import "@shikijs/langs/graphql";
-import "@shikijs/langs/html";
-import "@shikijs/langs/java";
-import "@shikijs/langs/javascript";
-import "@shikijs/langs/json";
-import "@shikijs/langs/jsx";
-import "@shikijs/langs/kotlin";
-import "@shikijs/langs/markdown";
-import "@shikijs/langs/php";
-import "@shikijs/langs/python";
-import "@shikijs/langs/regexp";
-import "@shikijs/langs/ruby";
-import "@shikijs/langs/rust";
-import "@shikijs/langs/shell";
-import "@shikijs/langs/sql";
-import "@shikijs/langs/swift";
-import "@shikijs/langs/toml";
-import "@shikijs/langs/typescript";
-import "@shikijs/langs/tsx";
-import "@shikijs/langs/xml";
-import "@shikijs/langs/yaml";
+import "@base-ui/react/tabs";
 import "zustand/middleware";
 import "@tanstack/react-router";
 import "@tanstack/react-query";
-import "./tooltip-gbV6rEVv.js";
+import "./tooltip-DgsSPocE.js";
 import "@base-ui/react/tooltip";
 import "motion/react";
 import "@base-ui/react/alert-dialog";
@@ -65,91 +33,42 @@ import "react-markdown";
 import "remark-breaks";
 import "remark-gfm";
 import "react-dom";
-import "./router-Dme7USeO.js";
+import "./router-DJA7GtMo.js";
 import "node:crypto";
 import "ws";
 import "node:fs";
 import "node:path";
 import "node:os";
 import "@tanstack/router-core/ssr/client";
+import "node:child_process";
 import "node:fs/promises";
 import "path";
-function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Root,
-    {
-      className: cn(
-        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
-        className
-      ),
-      "data-slot": "tabs",
-      ...props
-    }
-  );
-}
-function TabsList({
-  variant = "default",
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Tabs$1.List,
-    {
-      className: cn(
-        "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-primary-600",
-        "data-[orientation=vertical]:flex-col",
-        variant === "default" ? "p-0.5 text-primary-600/80" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1",
-        className
-      ),
-      "data-slot": "tabs-list",
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          Tabs$1.Indicator,
-          {
-            className: cn(
-              "-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out",
-              variant === "underline" ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary-900 data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "z-0 rounded-md bg-primary-200"
-            ),
-            "data-slot": "tab-indicator"
-          }
-        )
-      ]
-    }
-  );
-}
-function TabsTab({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Tab,
-    {
-      className: cn(
-        '[&_svg]:-mx-0.5 relative z-10 flex h-8 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium outline-none transition-[color,background-color,box-shadow] hover:text-primary-900 focus-visible:ring-2 focus-visible:ring-primary-400 data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-primary-900 data-disabled:opacity-64 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
-        className
-      ),
-      "data-slot": "tabs-tab",
-      ...props
-    }
-  );
-}
 function SettingsSection({ title, tabId, activeTab, children }) {
   const hiddenOnDesktop = tabId && activeTab && tabId !== activeTab;
   return /* @__PURE__ */ jsxs("div", { className: cn(
-    "border-b border-primary-200 py-4 last:border-0",
+    "border-b border-primary-200 py-2 last:border-0",
     hiddenOnDesktop && "md:hidden"
   ), children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-medium text-primary-900", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", 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, children }) {
-  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-sm text-primary-800", children: label }),
+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", children })
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", children })
   ] });
 }
 const textSizeOptions = [
@@ -158,9 +77,79 @@ const textSizeOptions = [
   { 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,
@@ -219,6 +208,90 @@ function SettingsDialog({
       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 {
@@ -244,6 +317,54 @@ function SettingsDialog({
     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);
@@ -253,6 +374,60 @@ function SettingsDialog({
     } 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 {
@@ -333,22 +508,29 @@ function SettingsDialog({
     setTestResult(null);
   };
   const themeOptions = [
-    { value: "system", label: "System", icon: ComputerIcon },
+    { value: "system", label: "Auto", icon: ComputerIcon },
     { value: "light", label: "Light", icon: Sun01Icon },
     { value: "dark", label: "Dark", icon: Moon01Icon },
-    { value: "chameleon", label: "Chameleon", icon: Leaf01Icon }
+    { 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");
+    root.classList.remove("light", "dark", "system", "chameleon", "frost", "frost-light", "frost-dark");
     root.classList.add(theme);
+    if (theme === "frost-light" || theme === "frost-dark") {
+      root.classList.add("frost");
+    }
+    if (theme === "frost-dark") {
+      root.classList.add("dark");
+    }
     if (theme === "system" && media.matches) {
       root.classList.add("dark");
     }
   }
-  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "w-[min(720px,92vw)] max-h-[80vh] overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+  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" }),
@@ -377,7 +559,7 @@ function SettingsDialog({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex md:flex-row flex-col md:gap-4 gap-0 md:min-h-[400px]", children: [
+    /* @__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 },
@@ -392,8 +574,9 @@ function SettingsDialog({
           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 ? "bg-primary-100 text-primary-900 font-medium" : "text-primary-600 hover:text-primary-900 hover:bg-primary-50"
+            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
@@ -401,8 +584,8 @@ function SettingsDialog({
         },
         tab.id
       )) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto md:max-h-[calc(80vh-100px)] max-h-none", children: [
-        /* @__PURE__ */ jsx(SettingsSection, { title: "Connection", tabId: "connection", activeTab, children: /* @__PURE__ */ jsx(SettingsRow, { label: "Status", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-green-600", children: [
+      /* @__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"
         ] }) }) }),
@@ -420,13 +603,13 @@ function SettingsDialog({
                 TabsList,
                 {
                   variant: "default",
-                  className: "gap-2 *:data-[slot=tab-indicator]:duration-0",
-                  children: themeOptions.map((option) => /* @__PURE__ */ jsxs(TabsTab, { value: option.value, children: [
-                    /* @__PURE__ */ jsx(
+                  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: 20,
+                        size: 13,
                         strokeWidth: 1.5
                       }
                     ),
@@ -436,11 +619,44 @@ function SettingsDialog({
               )
             }
           ) }),
+          /* @__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",
-              description: "Adjust chat and composer text",
               children: /* @__PURE__ */ jsx(Tabs, { value: textSize, onValueChange: handleTextSizeChange, children: /* @__PURE__ */ jsx(
                 TabsList,
                 {
@@ -450,24 +666,29 @@ function SettingsDialog({
                 }
               ) })
             }
-          )
+          ),
+          /* @__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, { label: "Show tool messages", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show tool messages", children: /* @__PURE__ */ jsx(
             Switch,
             {
               checked: settings.showToolMessages,
               onCheckedChange: (checked) => updateSettings({ showToolMessages: checked })
             }
           ) }),
-          /* @__PURE__ */ jsx(SettingsRow, { label: "Show reasoning blocks", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show reasoning blocks", children: /* @__PURE__ */ jsx(
             Switch,
             {
               checked: settings.showReasoningBlocks,
               onCheckedChange: (checked) => updateSettings({ showReasoningBlocks: checked })
             }
           ) }),
-          /* @__PURE__ */ jsx(SettingsRow, { label: "Show search sources", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SettingsRow, { inline: true, label: "Show search sources", children: /* @__PURE__ */ jsx(
             Switch,
             {
               checked: settings.showSearchSources,
@@ -477,6 +698,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Agent Manager (Beta)",
               description: "Show Agent Manager in sidebar for creating and managing agents",
               children: /* @__PURE__ */ jsx(
@@ -500,6 +722,31 @@ function SettingsDialog({
           /* @__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(
@@ -523,6 +770,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Inline File Preview",
               description: "Make file paths in messages clickable to preview file contents",
               children: /* @__PURE__ */ jsx(
@@ -539,6 +787,7 @@ function SettingsDialog({
           personasAvailable ? /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Persona Picker",
               description: "Show persona picker in chat (20 personalities)",
               children: /* @__PURE__ */ jsx(
@@ -552,6 +801,7 @@ function SettingsDialog({
           ) : /* @__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 })
@@ -572,6 +822,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Voice Playback",
               description: "Add a 🔊 button to AI messages for text-to-speech",
               children: /* @__PURE__ */ jsx(
@@ -586,6 +837,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "TTS Provider",
               description: "Choose which service generates speech",
               children: /* @__PURE__ */ jsxs(
@@ -607,6 +859,7 @@ function SettingsDialog({
           ttsProvider === "openai" && /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Voice",
               description: "OpenAI voice selection",
               children: /* @__PURE__ */ jsx(
@@ -624,6 +877,7 @@ function SettingsDialog({
         /* @__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(
@@ -651,6 +905,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Provider",
               description: "Choose LLM provider for titles & follow-ups",
               children: /* @__PURE__ */ jsxs(
@@ -679,6 +934,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Smart session titles",
               description: "Generate concise titles using AI",
               children: /* @__PURE__ */ jsx(
@@ -694,6 +950,7 @@ function SettingsDialog({
           /* @__PURE__ */ jsx(
             SettingsRow,
             {
+              inline: true,
               label: "Smart follow-up suggestions",
               description: "AI-generated contextual follow-ups",
               children: /* @__PURE__ */ jsx(
@@ -737,6 +994,11 @@ function SettingsDialog({
           /* @__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" : "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)."
+            ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsx(
                 "input",
@@ -841,7 +1103,7 @@ function SettingsDialog({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-end", children: /* @__PURE__ */ jsx(DialogClose, { onClick: onClose, children: "Close" }) })
+    /* @__PURE__ */ jsx("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ jsx(DialogClose, { onClick: onClose, children: "Close" }) })
   ] }) }) });
 }
 export {