@ottocode/web-sdk 0.1.250 → 0.1.252

package/dist/components/index.js

@@ -1787,10 +1787,26 @@ function useUpdateDefaults() {
 // src/hooks/usePreferences.ts
 import { useCallback as useCallback4, useMemo as useMemo2, useSyncExternalStore } from "react";
 var STORAGE_KEY = "otto-preferences";
+var DEFAULT_FONT_FAMILY = "IBM Plex Mono";
 var DEFAULT_STORED_PREFERENCES = {
   vimMode: false,
-  compactThread: true
+  compactThread: true,
+  fontFamily: DEFAULT_FONT_FAMILY
 };
+function cssFontFamily(fontFamily) {
+  const trimmed = fontFamily.trim();
+  if (!trimmed || trimmed === DEFAULT_FONT_FAMILY) {
+    return `"${DEFAULT_FONT_FAMILY}", monospace`;
+  }
+  return `"${trimmed.replaceAll('"', "\\\"")}", "${DEFAULT_FONT_FAMILY}", monospace`;
+}
+function applyFontFamily(fontFamily) {
+  if (typeof document === "undefined") {
+    return;
+  }
+  document.documentElement.style.setProperty("--otto-font-family", cssFontFamily(fontFamily));
+  document.documentElement.dataset.ottoFontFamily = fontFamily;
+}
 function resolveInitialPreferences() {
   if (typeof window === "undefined") {
     return DEFAULT_STORED_PREFERENCES;
@@ -1801,7 +1817,8 @@ function resolveInitialPreferences() {
       const parsed = JSON.parse(stored);
       return {
         vimMode: typeof parsed.vimMode === "boolean" ? parsed.vimMode : DEFAULT_STORED_PREFERENCES.vimMode,
-        compactThread: typeof parsed.compactThread === "boolean" ? parsed.compactThread : DEFAULT_STORED_PREFERENCES.compactThread
+        compactThread: typeof parsed.compactThread === "boolean" ? parsed.compactThread : DEFAULT_STORED_PREFERENCES.compactThread,
+        fontFamily: typeof parsed.fontFamily === "string" && parsed.fontFamily.trim() ? parsed.fontFamily.trim() : DEFAULT_STORED_PREFERENCES.fontFamily
       };
     }
   } catch (error) {
@@ -1810,6 +1827,7 @@ function resolveInitialPreferences() {
   return DEFAULT_STORED_PREFERENCES;
 }
 var preferences = resolveInitialPreferences();
+applyFontFamily(preferences.fontFamily);
 var listeners = new Set;
 function getSnapshot() {
   return preferences;
@@ -1828,6 +1846,9 @@ function notifyListeners() {
 }
 function updateStore(updates) {
   preferences = { ...preferences, ...updates };
+  if (updates.fontFamily !== undefined) {
+    applyFontFamily(preferences.fontFamily);
+  }
   if (typeof window !== "undefined") {
     try {
       window.localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
@@ -1849,6 +1870,9 @@ function usePreferences() {
     if (updates.compactThread !== undefined) {
       localUpdates.compactThread = updates.compactThread;
     }
+    if (updates.fontFamily !== undefined) {
+      localUpdates.fontFamily = updates.fontFamily.trim() || DEFAULT_FONT_FAMILY;
+    }
     if (Object.keys(localUpdates).length > 0) {
       updateStore(localUpdates);
     }
@@ -2190,12 +2214,12 @@ function Modal({
       }),
       /* @__PURE__ */ jsx11("div", {
         "data-native-overlay-root": "true",
-        className: `${overlayPositionClass} top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999] w-full ${maxWidthClasses[maxWidth]} px-4`,
+        className: `${overlayPositionClass} top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9999] w-full ${maxWidthClasses[maxWidth]} max-h-[calc(100dvh-2rem)] px-4 flex`,
         children: /* @__PURE__ */ jsxs6("div", {
-          className: "bg-background border border-border rounded-lg shadow-lg",
+          className: "bg-background border border-border rounded-lg shadow-lg max-h-full w-full flex flex-col overflow-hidden",
           children: [
             (title || showCloseButton) && /* @__PURE__ */ jsxs6("div", {
-              className: "flex items-center justify-between p-4 border-b border-border",
+              className: "flex flex-shrink-0 items-center justify-between p-4 border-b border-border",
               children: [
                 title && /* @__PURE__ */ jsx11("div", {
                   className: "text-lg font-semibold text-foreground",
@@ -2213,7 +2237,7 @@ function Modal({
               ]
             }),
             /* @__PURE__ */ jsx11("div", {
-              className: "p-6",
+              className: "p-6 overflow-y-auto",
               children
             })
           ]
@@ -5172,7 +5196,7 @@ import {
 import { ChevronDown, Search } from "lucide-react";
 import Fuse2 from "fuse.js";
 import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var UnifiedModelSelector = forwardRef6(function UnifiedModelSelector2({ provider, model, onChange, disabled = false }, ref) {
+var UnifiedModelSelector = forwardRef6(function UnifiedModelSelector2({ provider, model, onChange, disabled = false, dropdownMode = "absolute" }, ref) {
   const { data: allModels } = useAllModels();
   const { data: currentProviderModels, isLoading: isCurrentProviderLoading } = useModels(provider);
   const [isOpen, setIsOpen] = useState10(false);
@@ -5425,6 +5449,7 @@ var UnifiedModelSelector = forwardRef6(function UnifiedModelSelector2({ provider
   const currentProviderLabel = loadedModels[provider]?.label || currentProviderModels?.label || provider;
   const currentModelLabel = loadedModels[provider]?.models.find((m) => m.id === model)?.label || currentProviderModels?.models.find((m) => m.id === model)?.label || model;
   const displayedProviderKeys = searchQuery.trim() ? Object.keys(filteredModels) : configuredProviders;
+  const dropdownPositionClass = dropdownMode === "inline" ? "relative" : "absolute z-50";
   return /* @__PURE__ */ jsxs10("div", {
     ref: dropdownRef,
     className: "relative w-full",
@@ -5458,7 +5483,7 @@ var UnifiedModelSelector = forwardRef6(function UnifiedModelSelector2({ provider
         ]
       }),
       isOpen && /* @__PURE__ */ jsxs10("div", {
-        className: "absolute z-50 mt-1 w-full bg-[hsl(var(--popover))] border border-[hsl(var(--border))] rounded-md shadow-lg max-h-80 overflow-hidden flex flex-col",
+        className: `${dropdownPositionClass} mt-1 w-full bg-[hsl(var(--popover))] border border-[hsl(var(--border))] rounded-md shadow-lg max-h-80 overflow-hidden flex flex-col`,
         children: [
           /* @__PURE__ */ jsx16("div", {
             className: "p-2 border-b border-[hsl(var(--border))]",
@@ -5892,7 +5917,8 @@ function ConfigModal({
               ref: modelSelectorRef,
               provider,
               model,
-              onChange: handleModelChange
+              onChange: handleModelChange,
+              dropdownMode: "inline"
             })
           ]
         })
@@ -11739,7 +11765,7 @@ var MessagePartItem = memo8(function MessagePartItem2({
     ]
   });
 }, (prevProps, nextProps) => {
-  return prevProps.part.id === nextProps.part.id && prevProps.part.content === nextProps.part.content && prevProps.part.contentJson === nextProps.part.contentJson && prevProps.part.ephemeral === nextProps.part.ephemeral && prevProps.part.completedAt === nextProps.part.completedAt && prevProps.showLine === nextProps.showLine && prevProps.isLastToolCall === nextProps.isLastToolCall && prevProps.isLastProgressUpdate === nextProps.isLastProgressUpdate && prevProps.compact === nextProps.compact && prevProps.onNavigateToSession === nextProps.onNavigateToSession && prevProps.pendingApproval?.callId === nextProps.pendingApproval?.callId && prevProps.onApprove === nextProps.onApprove && prevProps.onReject === nextProps.onReject;
+  return prevProps.part.id === nextProps.part.id && prevProps.part.content === nextProps.part.content && prevProps.part.ephemeral === nextProps.part.ephemeral && prevProps.part.completedAt === nextProps.part.completedAt && prevProps.showLine === nextProps.showLine && prevProps.isLastToolCall === nextProps.isLastToolCall && prevProps.isLastProgressUpdate === nextProps.isLastProgressUpdate && prevProps.compact === nextProps.compact && prevProps.onNavigateToSession === nextProps.onNavigateToSession && prevProps.pendingApproval?.callId === nextProps.pendingApproval?.callId && prevProps.onApprove === nextProps.onApprove && prevProps.onReject === nextProps.onReject;
 });
 
 // src/components/messages/CompactActivityGroup.tsx
@@ -13389,7 +13415,7 @@ var AssistantMessageGroup = memo9(function AssistantMessageGroup2({
   for (let i = 0;i < prevParts.length; i++) {
     const prevPart = prevParts[i];
     const nextPart = nextParts[i];
-    if (prevPart.id !== nextPart.id || prevPart.index !== nextPart.index || prevPart.stepIndex !== nextPart.stepIndex || prevPart.type !== nextPart.type || prevPart.content !== nextPart.content || prevPart.contentJson !== nextPart.contentJson || prevPart.toolName !== nextPart.toolName || prevPart.toolCallId !== nextPart.toolCallId || prevPart.ephemeral !== nextPart.ephemeral || prevPart.completedAt !== nextPart.completedAt || prevPart.startedAt !== nextPart.startedAt) {
+    if (prevPart.id !== nextPart.id || prevPart.index !== nextPart.index || prevPart.stepIndex !== nextPart.stepIndex || prevPart.type !== nextPart.type || prevPart.content !== nextPart.content || prevPart.toolName !== nextPart.toolName || prevPart.toolCallId !== nextPart.toolCallId || prevPart.ephemeral !== nextPart.ephemeral || prevPart.completedAt !== nextPart.completedAt || prevPart.startedAt !== nextPart.startedAt) {
       return false;
     }
   }
@@ -15283,27 +15309,18 @@ function useSessionStream(sessionId, enabled = true) {
       return typeof payload?.outputTextDelta === "string" ? payload.outputTextDelta : null;
     };
     const getOptimisticPartIndex = (parts, stepIndex) => {
+      const appendIndex = (() => {
+        const indexes = parts.map((part) => part.index).filter((index) => Number.isFinite(index));
+        return indexes.length > 0 ? Math.max(...indexes) + 0.001 : 0;
+      })();
       if (typeof stepIndex !== "number") {
-        return parts.length;
+        return appendIndex;
       }
       const sameStepIndexes = parts.filter((part) => part.stepIndex === stepIndex).map((part) => part.index).filter((index) => Number.isFinite(index));
       if (sameStepIndexes.length > 0) {
         return Math.max(...sameStepIndexes) + 0.001;
       }
-      const previousStepIndexes = parts.filter((part) => typeof part.stepIndex === "number" && part.stepIndex < stepIndex).map((part) => part.index).filter((index) => Number.isFinite(index));
-      const nextStepIndexes = parts.filter((part) => typeof part.stepIndex === "number" && part.stepIndex > stepIndex).map((part) => part.index).filter((index) => Number.isFinite(index));
-      const lowerBound = previousStepIndexes.length > 0 ? Math.max(...previousStepIndexes) : null;
-      const upperBound = nextStepIndexes.length > 0 ? Math.min(...nextStepIndexes) : null;
-      if (lowerBound !== null && upperBound !== null) {
-        return (lowerBound + upperBound) / 2;
-      }
-      if (lowerBound !== null) {
-        return lowerBound + 1;
-      }
-      if (upperBound !== null) {
-        return upperBound - 1;
-      }
-      return parts.length;
+      return appendIndex;
     };
     const applyReasoningDelta = (payload) => {
       const messageId = typeof payload?.messageId === "string" ? payload.messageId : null;
@@ -21176,7 +21193,8 @@ var ResearchSidebarToggle = memo30(function ResearchSidebarToggle2({
   });
 });
 // src/components/settings/SettingsSidebar.tsx
-import { memo as memo31, useState as useState39, useMemo as useMemo22, useCallback as useCallback27, useEffect as useEffect37 } from "react";
+import { memo as memo31, useState as useState39, useMemo as useMemo22, useCallback as useCallback27, useEffect as useEffect37, useRef as useRef26 } from "react";
+import { createPortal } from "react-dom";
 import {
   Settings as Settings2,
   ChevronRight as ChevronRight13,
@@ -21191,7 +21209,9 @@ import {
   Copy as Copy3,
   Check as Check11,
   Key,
-  Loader2 as Loader210
+  Loader2 as Loader210,
+  Type,
+  Sparkles as Sparkles6
 } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
 
@@ -21598,6 +21618,26 @@ var SETTINGS_PANEL_KEY = "settings";
 var SETTINGS_DEFAULT_WIDTH = 320;
 var SETTINGS_MIN_WIDTH = 320;
 var SETTINGS_MAX_WIDTH = 500;
+var DEFAULT_FONT_FAMILY2 = "IBM Plex Mono";
+var COMMON_SYSTEM_FONTS = [
+  DEFAULT_FONT_FAMILY2,
+  "System UI",
+  "Arial",
+  "Avenir",
+  "BlinkMacSystemFont",
+  "Courier New",
+  "Fira Code",
+  "Georgia",
+  "Helvetica",
+  "Inter",
+  "Menlo",
+  "Monaco",
+  "SF Mono",
+  "Segoe UI",
+  "Times New Roman",
+  "Ubuntu",
+  "Verdana"
+];
 var SettingsSection = memo31(function SettingsSection2({
   title,
   icon,
@@ -21646,10 +21686,10 @@ var ToggleRow = memo31(function ToggleRow2({
   onChange
 }) {
   return /* @__PURE__ */ jsxs80("div", {
-    className: "flex items-center justify-between text-sm",
+    className: "flex min-w-0 items-center justify-between gap-3 text-sm",
     children: [
       /* @__PURE__ */ jsx88("span", {
-        className: "text-muted-foreground",
+        className: "min-w-0 flex-1 truncate text-muted-foreground",
         children: label
       }),
       /* @__PURE__ */ jsx88("button", {
@@ -21657,7 +21697,7 @@ var ToggleRow = memo31(function ToggleRow2({
         role: "switch",
         "aria-checked": checked,
         onClick: () => onChange(!checked),
-        className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${checked ? "bg-primary" : "bg-muted"}`,
+        className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${checked ? "bg-primary" : "bg-muted"}`,
         children: /* @__PURE__ */ jsx88("span", {
           className: `inline-block h-4 w-4 transform rounded-full transition-transform ${checked ? "translate-x-6" : "translate-x-1"} ${checked ? "bg-primary-foreground" : "bg-foreground"}`
         })
@@ -21673,7 +21713,31 @@ var SelectRow = memo31(function SelectRow2({
   disabled
 }) {
   const [isOpen, setIsOpen] = useState39(false);
+  const [menuStyle, setMenuStyle] = useState39(null);
+  const buttonRef = useRef26(null);
   const selectedOption = options.find((o) => o.id === value);
+  useEffect37(() => {
+    if (!isOpen || !buttonRef.current)
+      return;
+    const update = () => {
+      const rect = buttonRef.current?.getBoundingClientRect();
+      if (!rect)
+        return;
+      const width = Math.max(rect.width, 160);
+      setMenuStyle({
+        top: rect.bottom + 4,
+        left: rect.right - width,
+        width
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [isOpen]);
   return /* @__PURE__ */ jsxs80("div", {
     className: "flex items-center justify-between text-sm",
     children: [
@@ -21685,6 +21749,7 @@ var SelectRow = memo31(function SelectRow2({
         className: "relative",
         children: [
           /* @__PURE__ */ jsxs80("button", {
+            ref: buttonRef,
             type: "button",
             onClick: () => !disabled && setIsOpen(!isOpen),
             disabled,
@@ -21699,15 +21764,20 @@ var SelectRow = memo31(function SelectRow2({
               })
             ]
           }),
-          isOpen && /* @__PURE__ */ jsxs80(Fragment35, {
+          isOpen && menuStyle && typeof document !== "undefined" && createPortal(/* @__PURE__ */ jsxs80(Fragment35, {
             children: [
               /* @__PURE__ */ jsx88("div", {
-                className: "fixed inset-0 z-40",
+                className: "fixed inset-0 z-[10000]",
                 onClick: () => setIsOpen(false),
                 role: "presentation"
               }),
               /* @__PURE__ */ jsx88("div", {
-                className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] max-h-[200px] overflow-y-auto bg-popover border border-border rounded-md shadow-lg",
+                className: "fixed z-[10001] max-h-[240px] overflow-y-auto bg-popover border border-border rounded-md shadow-lg",
+                style: {
+                  top: menuStyle.top,
+                  left: menuStyle.left,
+                  minWidth: menuStyle.width
+                },
                 children: options.map((option) => /* @__PURE__ */ jsx88("button", {
                   type: "button",
                   onClick: () => {
@@ -21719,12 +21789,135 @@ var SelectRow = memo31(function SelectRow2({
                 }, option.id))
               })
             ]
-          })
+          }), document.body)
         ]
       })
     ]
   });
 });
+var FontPickerRow = memo31(function FontPickerRow2({
+  value,
+  onChange
+}) {
+  const [isOpen, setIsOpen] = useState39(false);
+  const [search, setSearch] = useState39("");
+  const [localFonts, setLocalFonts] = useState39([]);
+  const [isLoadingFonts, setIsLoadingFonts] = useState39(false);
+  const [fontError, setFontError] = useState39(null);
+  const canQueryLocalFonts = typeof window !== "undefined" && typeof window.queryLocalFonts === "function";
+  const fontOptions = useMemo22(() => {
+    return Array.from(new Set([value, ...localFonts, ...COMMON_SYSTEM_FONTS].filter(Boolean))).sort((a, b) => a.localeCompare(b));
+  }, [localFonts, value]);
+  const filteredFonts = useMemo22(() => {
+    const query = search.trim().toLowerCase();
+    if (!query)
+      return fontOptions;
+    return fontOptions.filter((font) => font.toLowerCase().includes(query));
+  }, [fontOptions, search]);
+  const loadLocalFonts = useCallback27(async () => {
+    if (isLoadingFonts || localFonts.length > 0)
+      return;
+    const queryLocalFonts = window.queryLocalFonts;
+    if (!queryLocalFonts) {
+      setFontError("Local font access is not supported in this browser");
+      return;
+    }
+    setIsLoadingFonts(true);
+    setFontError(null);
+    try {
+      const fonts = await queryLocalFonts();
+      setLocalFonts(Array.from(new Set(fonts.map((font) => font.family).filter(Boolean))));
+    } catch (error) {
+      setFontError(error instanceof Error ? error.message : "Unable to load local fonts");
+    } finally {
+      setIsLoadingFonts(false);
+    }
+  }, [isLoadingFonts, localFonts.length]);
+  const openPicker = () => {
+    setIsOpen(true);
+    loadLocalFonts();
+  };
+  return /* @__PURE__ */ jsx88("div", {
+    className: "space-y-2 text-sm",
+    children: /* @__PURE__ */ jsxs80("div", {
+      className: "flex items-center justify-between gap-3",
+      children: [
+        /* @__PURE__ */ jsx88("span", {
+          className: "text-muted-foreground",
+          children: "UI Font"
+        }),
+        /* @__PURE__ */ jsxs80("div", {
+          className: "relative min-w-0",
+          children: [
+            /* @__PURE__ */ jsxs80("button", {
+              type: "button",
+              onClick: () => isOpen ? setIsOpen(false) : openPicker(),
+              className: "flex max-w-[170px] items-center gap-1 rounded border border-border bg-muted px-2 py-1 text-xs hover:bg-muted/80",
+              children: [
+                /* @__PURE__ */ jsx88("span", {
+                  className: "truncate",
+                  style: { fontFamily: value },
+                  children: value || DEFAULT_FONT_FAMILY2
+                }),
+                /* @__PURE__ */ jsx88(ChevronDown9, {
+                  className: "h-3 w-3 shrink-0"
+                })
+              ]
+            }),
+            isOpen && /* @__PURE__ */ jsxs80(Fragment35, {
+              children: [
+                /* @__PURE__ */ jsx88("div", {
+                  className: "fixed inset-0 z-40",
+                  onClick: () => setIsOpen(false),
+                  role: "presentation"
+                }),
+                /* @__PURE__ */ jsxs80("div", {
+                  className: "absolute right-0 top-full z-50 mt-1 w-72 rounded-md border border-border bg-popover shadow-lg",
+                  children: [
+                    /* @__PURE__ */ jsx88("div", {
+                      className: "border-b border-border p-2",
+                      children: /* @__PURE__ */ jsx88("input", {
+                        type: "search",
+                        value: search,
+                        onChange: (event) => setSearch(event.target.value),
+                        placeholder: "Search system fonts...",
+                        className: "w-full rounded border border-border bg-background px-2 py-1.5 text-xs outline-none placeholder:text-muted-foreground/70 focus:border-primary"
+                      })
+                    }),
+                    /* @__PURE__ */ jsxs80("div", {
+                      className: "max-h-64 overflow-y-auto py-1",
+                      children: [
+                        filteredFonts.map((font) => /* @__PURE__ */ jsx88("button", {
+                          type: "button",
+                          onClick: () => {
+                            onChange(font);
+                            setIsOpen(false);
+                            setSearch("");
+                          },
+                          className: `w-full px-3 py-2 text-left text-xs hover:bg-muted ${font === value ? "bg-muted/50" : ""}`,
+                          style: { fontFamily: font },
+                          children: font
+                        }, font)),
+                        filteredFonts.length === 0 && /* @__PURE__ */ jsx88("div", {
+                          className: "px-3 py-2 text-xs text-muted-foreground",
+                          children: "No fonts found"
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx88("div", {
+                      className: "border-t border-border px-3 py-2 text-xs text-muted-foreground",
+                      children: isLoadingFonts ? "Loading local fonts..." : fontError ? fontError : localFonts.length > 0 ? `${localFonts.length} local fonts found` : canQueryLocalFonts ? "Choose a font or allow local font access if prompted" : "Showing common system fonts"
+                    })
+                  ]
+                })
+              ]
+            })
+          ]
+        })
+      ]
+    })
+  });
+});
 var NumberInputRow = memo31(function NumberInputRow2({
   label,
   value,
@@ -21802,13 +21995,130 @@ var NumberInputRow = memo31(function NumberInputRow2({
     ]
   });
 });
+function PreferencesModal({ isOpen, onClose }) {
+  const { data: config2 } = useConfig();
+  const { preferences: preferences2, updatePreferences } = usePreferences();
+  const updateDefaults = useUpdateDefaults();
+  return /* @__PURE__ */ jsx88(Modal, {
+    isOpen,
+    onClose,
+    title: "Preferences",
+    maxWidth: "lg",
+    children: /* @__PURE__ */ jsxs80("div", {
+      className: "-m-6",
+      children: [
+        /* @__PURE__ */ jsxs80(SettingsSection, {
+          title: "Editor",
+          icon: /* @__PURE__ */ jsx88(Type, {
+            className: "w-4 h-4 text-muted-foreground"
+          }),
+          children: [
+            /* @__PURE__ */ jsx88(ToggleRow, {
+              label: "Vim Mode",
+              checked: preferences2.vimMode,
+              onChange: (checked) => updatePreferences({ vimMode: checked })
+            }),
+            /* @__PURE__ */ jsx88(ToggleRow, {
+              label: "Compact Thread",
+              checked: preferences2.compactThread,
+              onChange: (checked) => updatePreferences({ compactThread: checked })
+            }),
+            /* @__PURE__ */ jsx88(ToggleRow, {
+              label: "Full Width Content",
+              checked: preferences2.fullWidthContent,
+              onChange: (checked) => updatePreferences({ fullWidthContent: checked })
+            }),
+            /* @__PURE__ */ jsx88(FontPickerRow, {
+              value: preferences2.fontFamily,
+              onChange: (fontFamily) => updatePreferences({ fontFamily })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs80(SettingsSection, {
+          title: "Automation",
+          icon: /* @__PURE__ */ jsx88(Zap, {
+            className: "w-4 h-4 text-muted-foreground"
+          }),
+          children: [
+            /* @__PURE__ */ jsx88(NumberInputRow, {
+              label: "Auto Compact",
+              value: config2?.defaults?.autoCompactThresholdTokens,
+              onCommit: (value) => updateDefaults.mutate({
+                autoCompactThresholdTokens: value,
+                scope: "global"
+              }),
+              placeholder: "Tokens",
+              disabled: updateDefaults.isPending
+            }),
+            /* @__PURE__ */ jsx88(SelectRow, {
+              label: "Tool Approval",
+              value: config2?.defaults?.toolApproval ?? "dangerous",
+              options: [
+                { id: "auto", label: "Auto (no approval)" },
+                { id: "dangerous", label: "Dangerous only" },
+                { id: "yolo", label: "YOLO (hard blocks only)" },
+                { id: "all", label: "All tools" }
+              ],
+              onChange: (value) => updateDefaults.mutate({
+                toolApproval: value,
+                scope: "global"
+              }),
+              disabled: updateDefaults.isPending
+            }),
+            /* @__PURE__ */ jsx88(ToggleRow, {
+              label: "Guided Mode",
+              checked: config2?.defaults?.guidedMode ?? false,
+              onChange: (checked) => updateDefaults.mutate({
+                guidedMode: checked,
+                scope: "global"
+              })
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs80(SettingsSection, {
+          title: "Reasoning",
+          icon: /* @__PURE__ */ jsx88(Sparkles6, {
+            className: "w-4 h-4 text-muted-foreground"
+          }),
+          children: [
+            /* @__PURE__ */ jsx88(ToggleRow, {
+              label: "Show Reasoning",
+              checked: config2?.defaults?.reasoningText ?? true,
+              onChange: (checked) => updateDefaults.mutate({
+                reasoningText: checked,
+                scope: "global"
+              })
+            }),
+            /* @__PURE__ */ jsx88(SelectRow, {
+              label: "Reasoning Level",
+              value: config2?.defaults?.reasoningLevel ?? "high",
+              options: [
+                { id: "minimal", label: "Minimal" },
+                { id: "low", label: "Low" },
+                { id: "medium", label: "Medium" },
+                { id: "high", label: "High" },
+                { id: "max", label: "Max" },
+                { id: "xhigh", label: "Extra High" }
+              ],
+              onChange: (value) => updateDefaults.mutate({
+                reasoningLevel: value,
+                scope: "global"
+              }),
+              disabled: updateDefaults.isPending
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
 var SettingsSidebar = memo31(function SettingsSidebar2() {
   const isExpanded = useSettingsStore((state) => state.isExpanded);
   const collapseSidebar = useSettingsStore((state) => state.collapseSidebar);
+  const [isPreferencesOpen, setIsPreferencesOpen] = useState39(false);
   const panelWidth = usePanelWidthStore((s) => s.widths[SETTINGS_PANEL_KEY] ?? SETTINGS_DEFAULT_WIDTH);
   const { data: config2 } = useConfig();
   const { data: allModels } = useAllModels();
-  const { preferences: preferences2, updatePreferences } = usePreferences();
   const updateDefaults = useUpdateDefaults();
   const ottorouterBalance = useOttoRouterStore((s) => s.balance);
   const ottorouterWallet = useOttoRouterStore((s) => s.walletAddress);
@@ -21934,87 +22244,6 @@ var SettingsSidebar = memo31(function SettingsSidebar2() {
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs80(SettingsSection, {
-                title: "Preferences",
-                icon: /* @__PURE__ */ jsx88(User3, {
-                  className: "w-4 h-4 text-muted-foreground"
-                }),
-                children: [
-                  /* @__PURE__ */ jsx88(ToggleRow, {
-                    label: "Vim Mode",
-                    checked: preferences2.vimMode,
-                    onChange: (checked) => updatePreferences({ vimMode: checked })
-                  }),
-                  /* @__PURE__ */ jsx88(ToggleRow, {
-                    label: "Compact Thread",
-                    checked: preferences2.compactThread,
-                    onChange: (checked) => updatePreferences({ compactThread: checked })
-                  }),
-                  /* @__PURE__ */ jsx88(ToggleRow, {
-                    label: "Full Width Content",
-                    checked: preferences2.fullWidthContent,
-                    onChange: (checked) => updatePreferences({ fullWidthContent: checked })
-                  }),
-                  /* @__PURE__ */ jsx88(NumberInputRow, {
-                    label: "Auto Compact",
-                    value: config2?.defaults?.autoCompactThresholdTokens,
-                    onCommit: (value) => updateDefaults.mutate({
-                      autoCompactThresholdTokens: value,
-                      scope: "global"
-                    }),
-                    placeholder: "Tokens",
-                    disabled: updateDefaults.isPending
-                  }),
-                  /* @__PURE__ */ jsx88(ToggleRow, {
-                    label: "Show Reasoning",
-                    checked: config2?.defaults?.reasoningText ?? true,
-                    onChange: (checked) => updateDefaults.mutate({
-                      reasoningText: checked,
-                      scope: "global"
-                    })
-                  }),
-                  /* @__PURE__ */ jsx88(SelectRow, {
-                    label: "Reasoning Level",
-                    value: config2?.defaults?.reasoningLevel ?? "high",
-                    options: [
-                      { id: "minimal", label: "Minimal" },
-                      { id: "low", label: "Low" },
-                      { id: "medium", label: "Medium" },
-                      { id: "high", label: "High" },
-                      { id: "max", label: "Max" },
-                      { id: "xhigh", label: "Extra High" }
-                    ],
-                    onChange: (value) => updateDefaults.mutate({
-                      reasoningLevel: value,
-                      scope: "global"
-                    }),
-                    disabled: updateDefaults.isPending
-                  }),
-                  /* @__PURE__ */ jsx88(SelectRow, {
-                    label: "Tool Approval",
-                    value: config2?.defaults?.toolApproval ?? "dangerous",
-                    options: [
-                      { id: "auto", label: "Auto (no approval)" },
-                      { id: "dangerous", label: "Dangerous only" },
-                      { id: "yolo", label: "YOLO (hard blocks only)" },
-                      { id: "all", label: "All tools" }
-                    ],
-                    onChange: (value) => updateDefaults.mutate({
-                      toolApproval: value,
-                      scope: "global"
-                    }),
-                    disabled: updateDefaults.isPending
-                  }),
-                  /* @__PURE__ */ jsx88(ToggleRow, {
-                    label: "Guided Mode",
-                    checked: config2?.defaults?.guidedMode ?? false,
-                    onChange: (checked) => updateDefaults.mutate({
-                      guidedMode: checked,
-                      scope: "global"
-                    })
-                  })
-                ]
-              }),
               /* @__PURE__ */ jsx88(SettingsSection, {
                 title: "Providers",
                 icon: /* @__PURE__ */ jsx88(Zap, {
@@ -22057,6 +22286,28 @@ var SettingsSidebar = memo31(function SettingsSidebar2() {
               }),
               /* @__PURE__ */ jsx88(OttoRouterTopupModal, {})
             ]
+          }),
+          /* @__PURE__ */ jsxs80("button", {
+            type: "button",
+            onClick: () => setIsPreferencesOpen(true),
+            title: "Open preferences",
+            className: "group shrink-0 w-full h-12 px-4 flex items-center gap-2 bg-muted/20 hover:bg-muted/60 border-t border-border transition-colors text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx88(User3, {
+                className: "w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors"
+              }),
+              /* @__PURE__ */ jsx88("span", {
+                className: "text-sm flex-1 text-muted-foreground group-hover:text-foreground transition-colors",
+                children: "Preferences"
+              }),
+              /* @__PURE__ */ jsx88(ChevronRight13, {
+                className: "w-4 h-4 text-muted-foreground group-hover:text-foreground group-hover:translate-x-0.5 transition-all"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx88(PreferencesModal, {
+            isOpen: isPreferencesOpen,
+            onClose: () => setIsPreferencesOpen(false)
           })
         ]
       })
@@ -22419,7 +22670,7 @@ import { QRCodeSVG as QRCodeSVG2 } from "qrcode.react";
 
 // src/hooks/useTunnel.ts
 import { useQuery as useQuery12, useMutation as useMutation9, useQueryClient as useQueryClient16 } from "@tanstack/react-query";
-import { useEffect as useEffect38, useCallback as useCallback28, useRef as useRef26 } from "react";
+import { useEffect as useEffect38, useCallback as useCallback28, useRef as useRef27 } from "react";
 async function fetchTunnelStatus() {
   const response = await fetch(`${API_BASE_URL}/v1/tunnel/status`);
   if (!response.ok) {
@@ -22527,7 +22778,7 @@ function useTunnelStream() {
   const setError = useTunnelStore((s) => s.setError);
   const setProgress = useTunnelStore((s) => s.setProgress);
   const isExpanded = useTunnelStore((s) => s.isExpanded);
-  const eventSourceRef = useRef26(null);
+  const eventSourceRef = useRef27(null);
   const connect = useCallback28(() => {
     if (eventSourceRef.current) {
       eventSourceRef.current.close();
@@ -22827,7 +23078,7 @@ var TunnelSidebarToggle = memo34(function TunnelSidebarToggle2() {
   });
 });
 // src/components/mcp/MCPSidebar.tsx
-import { memo as memo37, useState as useState42, useCallback as useCallback31, useMemo as useMemo23, useEffect as useEffect41, useRef as useRef29 } from "react";
+import { memo as memo37, useState as useState42, useCallback as useCallback31, useMemo as useMemo23, useEffect as useEffect41, useRef as useRef30 } from "react";
 import {
   ChevronDown as ChevronDown10,
   ChevronRight as ChevronRight15,
@@ -22847,7 +23098,7 @@ import { useQueryClient as useQueryClient18 } from "@tanstack/react-query";
 
 // src/hooks/useMCP.ts
 import { useQuery as useQuery13, useMutation as useMutation10, useQueryClient as useQueryClient17 } from "@tanstack/react-query";
-import { useEffect as useEffect39, useRef as useRef27, useCallback as useCallback29 } from "react";
+import { useEffect as useEffect39, useRef as useRef28, useCallback as useCallback29 } from "react";
 import {
   listMcpServers,
   startMcpServer,
@@ -23013,7 +23264,7 @@ function useCopilotDevicePoller() {
   const setCopilotDevice = useMCPStore((s) => s.setCopilotDevice);
   const setLoading = useMCPStore((s) => s.setLoading);
   const queryClient = useQueryClient17();
-  const timerRef = useRef27(null);
+  const timerRef = useRef28(null);
   const stopPolling = useCallback29(() => {
     if (timerRef.current) {
       clearInterval(timerRef.current);
@@ -23056,7 +23307,7 @@ function useCopilotDevicePoller() {
 }
 
 // src/components/mcp/AddMCPServerModal.tsx
-import { memo as memo35, useState as useState41, useCallback as useCallback30, useRef as useRef28, useEffect as useEffect40 } from "react";
+import { memo as memo35, useState as useState41, useCallback as useCallback30, useRef as useRef29, useEffect as useEffect40 } from "react";
 import { Globe as Globe5, Laptop, Loader2 as Loader212, FolderDot, Terminal as Terminal9 } from "lucide-react";
 import { jsx as jsx92, jsxs as jsxs83, Fragment as Fragment37 } from "react/jsx-runtime";
 function parseCommandString(input) {
@@ -23177,7 +23428,7 @@ var AddMCPServerModal = memo35(function AddMCPServerModal2({
     addServer,
     handleClose
   ]);
-  const contentRef = useRef28(null);
+  const contentRef = useRef29(null);
   const [contentHeight, setContentHeight] = useState41(undefined);
   useEffect40(() => {
     const el = contentRef.current;
@@ -23715,7 +23966,7 @@ var MCPServerCard = memo37(function MCPServerCard2({
 });
 function useAuthPoller(name, onAuthenticated) {
   const { data } = useMCPAuthStatus(name);
-  const prevAuth = useRef29(false);
+  const prevAuth = useRef30(false);
   useEffect41(() => {
     if (data?.authenticated && !prevAuth.current) {
       onAuthenticated();
@@ -24013,7 +24264,7 @@ var MCPSidebarToggle = memo38(function MCPSidebarToggle2() {
 import { memo as memo39, useMemo as useMemo24 } from "react";
 import {
   ChevronRight as ChevronRight16,
-  Sparkles as Sparkles6,
+  Sparkles as Sparkles7,
   Loader2 as Loader215,
   FolderDot as FolderDot3,
   Laptop as Laptop3,
@@ -24156,7 +24407,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
           /* @__PURE__ */ jsxs86("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx96(Sparkles6, {
+              /* @__PURE__ */ jsx96(Sparkles7, {
                 className: "w-4 h-4 text-muted-foreground"
               }),
               /* @__PURE__ */ jsx96("span", {
@@ -24282,7 +24533,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
         }) : totalCount === 0 ? /* @__PURE__ */ jsxs86("div", {
           className: "flex flex-col items-center justify-center h-full text-center p-4",
           children: [
-            /* @__PURE__ */ jsx96(Sparkles6, {
+            /* @__PURE__ */ jsx96(Sparkles7, {
               className: "w-12 h-12 text-muted-foreground/30 mb-4"
             }),
             /* @__PURE__ */ jsx96("h3", {
@@ -24311,7 +24562,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
         }) : !globalEnabled ? /* @__PURE__ */ jsxs86("div", {
           className: "flex flex-col items-center justify-center h-full text-center p-4",
           children: [
-            /* @__PURE__ */ jsx96(Sparkles6, {
+            /* @__PURE__ */ jsx96(Sparkles7, {
               className: "w-12 h-12 text-muted-foreground/30 mb-4"
             }),
             /* @__PURE__ */ jsx96("h3", {
@@ -24326,7 +24577,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
         }) : skills.length === 0 ? /* @__PURE__ */ jsxs86("div", {
           className: "flex flex-col items-center justify-center h-full text-center p-4",
           children: [
-            /* @__PURE__ */ jsx96(Sparkles6, {
+            /* @__PURE__ */ jsx96(Sparkles7, {
               className: "w-12 h-12 text-muted-foreground/30 mb-4"
             }),
             /* @__PURE__ */ jsx96("h3", {
@@ -24404,7 +24655,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
           /* @__PURE__ */ jsxs86("div", {
             className: "flex items-center gap-2 min-w-0 flex-1",
             children: [
-              /* @__PURE__ */ jsx96(Sparkles6, {
+              /* @__PURE__ */ jsx96(Sparkles7, {
                 className: "w-3 h-3 flex-shrink-0"
               }),
               /* @__PURE__ */ jsxs86("span", {
@@ -24437,7 +24688,7 @@ var SkillsSidebar = memo39(function SkillsSidebar2() {
 });
 // src/components/skills/SkillsSidebarToggle.tsx
 import { memo as memo40 } from "react";
-import { Sparkles as Sparkles7 } from "lucide-react";
+import { Sparkles as Sparkles8 } from "lucide-react";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var SkillsSidebarToggle = memo40(function SkillsSidebarToggle2() {
   const isExpanded = useSkillsStore((state) => state.isExpanded);
@@ -24447,7 +24698,7 @@ var SkillsSidebarToggle = memo40(function SkillsSidebarToggle2() {
     onClick: toggleSidebar,
     className: `relative h-14 w-full transition-colors touch-manipulation flex items-center justify-center border-r-2 ${isExpanded ? "bg-muted border-primary" : "border-transparent hover:bg-muted/50"}`,
     title: "Skills",
-    children: /* @__PURE__ */ jsx97(Sparkles7, {
+    children: /* @__PURE__ */ jsx97(Sparkles8, {
       className: "w-5 h-5 text-muted-foreground mx-auto"
     })
   });
@@ -25000,7 +25251,7 @@ var FileViewerPanel = memo44(function FileViewerPanel2() {
   });
 });
 // src/components/file-browser/QuickFilePicker.tsx
-import { memo as memo45, useState as useState43, useEffect as useEffect45, useRef as useRef30, useCallback as useCallback33, useMemo as useMemo25 } from "react";
+import { memo as memo45, useState as useState43, useEffect as useEffect45, useRef as useRef31, useCallback as useCallback33, useMemo as useMemo25 } from "react";
 import { FileCode as FileCode4, Search as Search7 } from "lucide-react";
 
 // src/stores/filePickerStore.ts
@@ -25044,8 +25295,8 @@ var QuickFilePicker = memo45(function QuickFilePicker2() {
   const expandSidebar = useFileBrowserStore((s) => s.expandSidebar);
   const [query, setQuery] = useState43("");
   const [selectedIndex, setSelectedIndex] = useState43(0);
-  const inputRef = useRef30(null);
-  const listRef = useRef30(null);
+  const inputRef = useRef31(null);
+  const listRef = useRef31(null);
   const { data: filesData } = useFiles();
   const ignoredSet = useMemo25(() => new Set(filesData?.ignoredFiles ?? []), [filesData?.ignoredFiles]);
   const filtered = useMemo25(() => {
@@ -25225,7 +25476,7 @@ function HighlightedPath({ path, query }) {
 import { memo as memo48 } from "react";
 
 // src/components/onboarding/steps/ProviderSetupStep.tsx
-import { memo as memo46, useEffect as useEffect46, useState as useState44, useRef as useRef31 } from "react";
+import { memo as memo46, useEffect as useEffect46, useState as useState44, useRef as useRef32 } from "react";
 import {
   Copy as Copy5,
   Check as Check13,
@@ -25316,20 +25567,20 @@ var ProviderSetupStep = memo46(function ProviderSetupStep2({
   const [copilotCodeCopied, setCopilotCodeCopied] = useState44(false);
   const [copilotModalOpen, setCopilotModalOpen] = useState44(false);
   const [copilotLoading, setCopilotLoading] = useState44(false);
-  const copilotPollRef = useRef31(undefined);
-  const copilotCancelledRef = useRef31(false);
-  const copilotPollFnRef = useRef31(onPollCopilotDeviceFlow);
+  const copilotPollRef = useRef32(undefined);
+  const copilotCancelledRef = useRef32(false);
+  const copilotPollFnRef = useRef32(onPollCopilotDeviceFlow);
   copilotPollFnRef.current = onPollCopilotDeviceFlow;
   const balance = useOttoRouterStore((s) => s.balance);
   const usdcBalance = useOttoRouterStore((s) => s.usdcBalance);
   const payg = useOttoRouterStore((s) => s.payg);
   const subscription = useOttoRouterStore((s) => s.subscription);
   const isBalanceLoading = useOttoRouterStore((s) => s.isLoading);
-  const apiKeyInputRef = useRef31(null);
-  const oauthCodeInputRef = useRef31(null);
-  const importPrivateKeyRef = useRef31(null);
+  const apiKeyInputRef = useRef32(null);
+  const oauthCodeInputRef = useRef32(null);
+  const importPrivateKeyRef = useRef32(null);
   const isTopupModalOpen = useOttoRouterStore((s) => s.isTopupModalOpen);
-  const prevTopupModalOpen = useRef31(false);
+  const prevTopupModalOpen = useRef32(false);
   const { fetchBalance } = useOttoRouterBalance("ottorouter");
   const effectivePayg = payg?.effectiveSpendableUsd ?? balance ?? 0;
   const setuStatusLabel = subscription?.active ? `GO ${(subscription.creditsRemaining ?? 0).toFixed(1)} credits` : `$${effectivePayg.toFixed(2)}`;
@@ -26745,8 +26996,8 @@ var ProviderSetupStep = memo46(function ProviderSetupStep2({
 });
 
 // src/components/onboarding/steps/DefaultsStep.tsx
-import { memo as memo47, useState as useState45, useEffect as useEffect47, useId as useId3, useRef as useRef32 } from "react";
-import { Loader2 as Loader217, ArrowLeft, Sparkles as Sparkles8, ChevronDown as ChevronDown12 } from "lucide-react";
+import { memo as memo47, useState as useState45, useEffect as useEffect47, useId as useId3, useRef as useRef33 } from "react";
+import { Loader2 as Loader217, ArrowLeft, Sparkles as Sparkles9, ChevronDown as ChevronDown12 } from "lucide-react";
 import { jsx as jsx104, jsxs as jsxs92, Fragment as Fragment40 } from "react/jsx-runtime";
 var DefaultsStep = memo47(function DefaultsStep2({
   authStatus,
@@ -26763,7 +27014,7 @@ var DefaultsStep = memo47(function DefaultsStep2({
   const [selectedAgent, setSelectedAgent] = useState45(authStatus.defaults.agent || "build");
   const [selectedApproval, setSelectedApproval] = useState45(authStatus.defaults.toolApproval || "dangerous");
   const [guidedMode, setGuidedMode] = useState45(false);
-  const hasUserChangedProvider = useRef32(false);
+  const hasUserChangedProvider = useRef33(false);
   const providerId = useId3();
   const modelId = useId3();
   const agentId = useId3();
@@ -27090,7 +27341,7 @@ var DefaultsStep = memo47(function DefaultsStep2({
               }) : /* @__PURE__ */ jsxs92(Fragment40, {
                 children: [
                   "Start Using otto",
-                  /* @__PURE__ */ jsx104(Sparkles8, {
+                  /* @__PURE__ */ jsx104(Sparkles9, {
                     className: "w-4 h-4"
                   })
                 ]
@@ -27240,4 +27491,4 @@ export {
   AssistantMessageGroup
 };
 
-//# debugId=0DFF52692CB7F20A64756E2164756E21
+//# debugId=B981D17F74D0602964756E2164756E21