iris-chatbot 4.0.0 → 5.0.0

package/template/src/components/MessageCard.tsx

@@ -19,6 +19,13 @@ import { splitContentAndSources } from "../lib/utils";
 
 const MAX_VISIBLE_TOOL_ITEMS = 8;
 const HIDDEN_TIMELINE_TOOLS = new Set(["tooling", "workflow_run"]);
+const FILE_FIND_ALLOWED_ROOTS_ERROR = "Path is outside allowed roots";
+
+function isHiddenFileFindError(event: ToolEvent): boolean {
+  if (event.toolName !== "file_find" || event.stage !== "result") return false;
+  const text = [event.message, event.payloadJson].filter(Boolean).join(" ");
+  return text.includes(FILE_FIND_ALLOWED_ROOTS_ERROR);
+}
 const TOOL_TIMELINE_DATE_FORMATTER = new Intl.DateTimeFormat("en-US", {
   month: "short",
   day: "numeric",
@@ -149,6 +156,8 @@ function humanizeToolName(toolName: string): string {
     file_copy: "Copy Item",
     file_mkdir: "Create Folder",
     file_delete_to_trash: "Move to Trash",
+    file_batch_move: "Move Files",
+    file_find: "Find Files",
     notes_create_or_append: "Update Note",
     notes_find: "Search Notes",
     app_open: "Open App",
@@ -265,7 +274,7 @@ function summarizeToolError(toolName: string, rawError: string): {
   if (normalized.includes("missing required")) {
     return {
       title: "Missing required information",
-      detail: "The action did not include all required fields.",
+      detail: cleaned.length < 200 ? cleaned : "The action did not include all required fields.",
     };
   }
 
@@ -365,6 +374,23 @@ function summarizeToolCall(toolName: string, payload: Record<string, unknown> |
     };
   }
 
+  if (toolName === "file_batch_move") {
+    const operations = payload.operations;
+    const count = Array.isArray(operations) ? operations.length : 0;
+    return {
+      title: count > 0 ? `Moving ${count} files` : "Moving files",
+    };
+  }
+
+  if (toolName === "file_find") {
+    const name = getString(payload, "name");
+    const searchPath = getString(payload, "searchPath");
+    return {
+      title: name ? `Searching for "${name}"` : "Searching for files",
+      detail: searchPath ? `In ${shortenPath(searchPath)}` : undefined,
+    };
+  }
+
   return { title: "Preparing action" };
 }
 
@@ -459,9 +485,9 @@ function summarizeToolResult(toolName: string, payload: Record<string, unknown>
       const detail = queriedRange
         ? queriedRange
         : joinDetailParts([
-            fromResolved ? `From: ${formatDateTime(fromResolved) ?? fromResolved}` : null,
-            toResolved ? `To: ${formatDateTime(toResolved) ?? toResolved}` : null,
-          ]);
+          fromResolved ? `From: ${formatDateTime(fromResolved) ?? fromResolved}` : null,
+          toResolved ? `To: ${formatDateTime(toResolved) ?? toResolved}` : null,
+        ]);
       return {
         title:
           count === 0
@@ -559,6 +585,46 @@ function summarizeToolResult(toolName: string, payload: Record<string, unknown>
     };
   }
 
+  if (toolName === "file_batch_move") {
+    const movedCount = getNumber(payload, "movedCount");
+    const failedCount = getNumber(payload, "failedCount");
+    const totalOps = getNumber(payload, "totalOperations");
+    if (movedCount !== null && failedCount !== null) {
+      if (failedCount === 0) {
+        return {
+          title: `Moved ${movedCount} files successfully`,
+        };
+      }
+      return {
+        title: `Moved ${movedCount} files`,
+        detail: `${failedCount} failed`,
+      };
+    }
+    if (totalOps !== null) {
+      return { title: `Processed ${totalOps} files` };
+    }
+  }
+
+  if (toolName === "file_find") {
+    const totalFound = getNumber(payload, "totalFound");
+    const searchName = getString(payload, "searchName");
+    const matches = payload.matches;
+    const topMatch = Array.isArray(matches) && matches.length > 0 ? matches[0] as Record<string, unknown> : null;
+    const topMatchPath = topMatch ? getString(topMatch, "path") : null;
+
+    if (totalFound !== null) {
+      if (totalFound === 0) {
+        return {
+          title: searchName ? `No matches for "${searchName}"` : "No matches found",
+        };
+      }
+      return {
+        title: `Found ${totalFound} match${totalFound === 1 ? "" : "es"}`,
+        detail: topMatchPath ? `Best match: ${shortenPath(topMatchPath)}` : undefined,
+      };
+    }
+  }
+
   return { title: "Completed successfully" };
 }
 
@@ -673,6 +739,7 @@ function MessageCard({
     () =>
       (toolEvents ?? [])
         .filter((event) => !HIDDEN_TIMELINE_TOOLS.has(event.toolName))
+        .filter((event) => !isHiddenFileFindError(event))
         .slice()
         .sort((a, b) => a.createdAt - b.createdAt),
     [toolEvents],
@@ -874,9 +941,8 @@ function MessageCard({
             {shelfThreads.map((thread) => (
               <div key={thread.id} className="thread-box-wrap">
                 <button
-                  className={`thread-box ${
-                    activeThreadId === thread.id ? "active" : ""
-                  }`}
+                  className={`thread-box ${activeThreadId === thread.id ? "active" : ""
+                    }`}
                   onClick={() => onSelectThread(thread.id)}
                 >
                   {thread.title}
@@ -903,11 +969,10 @@ function MessageCard({
       >
         {isAssistant ? (
           <button
-            className={`flex items-center justify-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition ${
-              canAddThread
-                ? "hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
-                : "opacity-60 cursor-not-allowed"
-            }`}
+            className={`flex items-center justify-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition ${canAddThread
+              ? "hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+              : "opacity-60 cursor-not-allowed"
+              }`}
             onClick={async () => {
               if (!canAddThread) return;
               await onAddThread(message);
@@ -927,9 +992,8 @@ function MessageCard({
           </button>
         ) : null}
         <button
-          className={`flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] ${
-            isAssistant ? "" : "opacity-0 group-hover:opacity-100"
-          }`}
+          className={`flex items-center gap-2 rounded-full border border-[var(--border)] px-4 py-2 text-xs text-[var(--text-muted)] transition hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)] ${isAssistant ? "" : "opacity-0 group-hover:opacity-100"
+            }`}
           onClick={async () => {
             await navigator.clipboard.writeText(messageTextContent);
             setCopied(true);
@@ -944,11 +1008,10 @@ function MessageCard({
         </button>
         {canEditThreads ? (
           <button
-            className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${
-              threadEditMode
-                ? "border-[var(--accent)] text-[var(--text-primary)]"
-                : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
-            }`}
+            className={`flex items-center gap-2 rounded-full border px-4 py-2 text-xs transition ${threadEditMode
+              ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
+              : "border-[var(--border)] text-[var(--text-muted)] hover:border-[var(--border-strong)] hover:text-[var(--text-secondary)]"
+              }`}
             onClick={() => setThreadEditMode((prev) => !prev)}
             aria-label="Edit threads"
           >

package/template/src/components/SearchModal.tsx

@@ -33,7 +33,7 @@ export default function SearchModal({
         <div className="flex items-center gap-3 border-b border-[var(--border)] px-4 py-3">
           <Search className="h-4 w-4 text-[var(--text-muted)]" />
           <input
-            className="flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none"
+            className="search-modal-input flex-1 bg-transparent text-sm text-[var(--text-primary)] outline-none"
             placeholder="Search chats..."
             value={query}
             onChange={(event) => setQuery(event.target.value)}

package/template/src/components/SettingsModal.tsx

@@ -7,10 +7,11 @@ import {
   ensureBuiltinConnections,
   normalizeBaseUrl,
 } from "../lib/connections";
+import { DEFAULT_ACCENT_DARK, DEFAULT_ACCENT_LIGHT } from "../lib/data";
 import { db } from "../lib/db";
 import { useMemories } from "../lib/hooks";
 import { normalizeMemoryKey } from "../lib/memory";
-import { filterModelIdsForConnection, getConnectionModelPresets } from "../lib/model-presets";
+import { filterModelIdsForConnection, getConnectionModelPresets, getModelDisplayLabel } from "../lib/model-presets";
 import {
   DEFAULT_MEMORY_SETTINGS,
   DEFAULT_LOCAL_TOOLS_SETTINGS,
@@ -24,7 +25,6 @@ import {
   type ModelConnection,
   type SafetyProfile,
   type Settings,
-  type WebSearchBackend,
 } from "../lib/types";
 
 type TabId =
@@ -112,7 +112,7 @@ export default function SettingsModal({
   const [showOpenAIKey, setShowOpenAIKey] = useState(false);
   const [showAnthropicKey, setShowAnthropicKey] = useState(false);
   const [showGeminiKey, setShowGeminiKey] = useState(false);
-  const [accentColor, setAccentColor] = useState(settings?.accentColor || "#66706e");
+  const [accentColor, setAccentColor] = useState(settings?.accentColor || DEFAULT_ACCENT_DARK);
   const [theme, setTheme] = useState<"dark" | "light">(settings?.theme || "dark");
   const [font, setFont] = useState<"ibm" | "manrope" | "sora" | "space" | "poppins">(
     settings?.font || "manrope",
@@ -132,8 +132,6 @@ export default function SettingsModal({
   const [enableMail, setEnableMail] = useState(localTools.enableMail);
   const [enableWorkflow, setEnableWorkflow] = useState(localTools.enableWorkflow);
   const [enableSystem, setEnableSystem] = useState(localTools.enableSystem);
-  const [webSearchBackend, setWebSearchBackend] = useState<WebSearchBackend>(localTools.webSearchBackend);
-  const [dryRun, setDryRun] = useState(localTools.dryRun);
   const memory = settings?.memory ?? DEFAULT_MEMORY_SETTINGS;
   const [memoryEnabled, setMemoryEnabled] = useState(memory.enabled);
   const [memoryAutoCapture, setMemoryAutoCapture] = useState(memory.autoCapture);
@@ -216,6 +214,49 @@ export default function SettingsModal({
     return text.includes(query);
   });
 
+  const memoryKindLabel: Record<MemoryKind, string> = {
+    profile: "Profile",
+    preference: "Preference",
+    person_alias: "Person alias",
+    music_alias: "Music alias",
+    note: "Note",
+  };
+  const memoryScopeLabel: Record<MemoryScope, string> = {
+    global: "All chats",
+    conversation: "This conversation",
+  };
+  const memorySourceLabel: Record<MemorySource, string> = {
+    auto: "Auto-captured",
+    explicit: "Explicit",
+    manual: "Manual",
+  };
+  function formatMemoryValue(value: string): string {
+    try {
+      const parsed = JSON.parse(value) as Record<string, unknown>;
+      if (parsed && typeof parsed === "object") {
+        const title = typeof parsed.title === "string" ? parsed.title : "";
+        const artist = typeof parsed.artist === "string" ? parsed.artist : "";
+        const query = typeof parsed.query === "string" ? parsed.query : "";
+        if (title && artist) return `${title} by ${artist}`;
+        if (query) return query;
+        if (title) return title;
+      }
+    } catch {
+      // not JSON, use as-is
+    }
+    return value;
+  }
+  function formatMemoryMeta(entry: MemoryEntry): string {
+    const parts = [
+      memoryKindLabel[entry.kind],
+      entry.scope === "conversation" && entry.conversationId
+        ? `${memoryScopeLabel[entry.scope]} (${entry.conversationId})`
+        : memoryScopeLabel[entry.scope],
+      memorySourceLabel[entry.source],
+    ];
+    return parts.join(" · ");
+  }
+
   const resetConnectionForm = () => {
     setEditingConnectionId(null);
     setConnectionFormName("");
@@ -486,7 +527,7 @@ export default function SettingsModal({
       defaultModelByConnection: resolvedDefaultModelMap,
       showExtendedOpenAIModels,
       enableWebSources,
-      accentColor: accentColor || "#66706e",
+      accentColor: accentColor || DEFAULT_ACCENT_DARK,
       font,
       theme,
       localTools: {
@@ -504,8 +545,8 @@ export default function SettingsModal({
         enableMail,
         enableWorkflow,
         enableSystem,
-        webSearchBackend,
-        dryRun,
+        webSearchBackend: DEFAULT_LOCAL_TOOLS_SETTINGS.webSearchBackend,
+        dryRun: localTools.dryRun,
       },
       memory: {
         enabled: memoryEnabled,
@@ -518,7 +559,7 @@ export default function SettingsModal({
   };
 
   const accentPresets = [
-    { id: "default", label: "Default", color: "#66706e" },
+    { id: "default", label: "Default", color: DEFAULT_ACCENT_DARK },
     { id: "blue", label: "Blue", color: "#2563eb" },
     { id: "green", label: "Green", color: "#16a34a" },
     { id: "yellow", label: "Yellow", color: "#f59e0b" },
@@ -545,9 +586,9 @@ export default function SettingsModal({
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-3 py-1.5 text-xs ${
+              className={`rounded-full px-3 py-1.5 text-xs settings-tab ${
                 activeTab === tab.id
-                  ? "bg-[var(--accent)] text-white"
+                  ? "settings-tab-active"
                   : "border border-[var(--border)] bg-[var(--panel-2)] text-[var(--text-secondary)]"
               }`}
             >
@@ -581,7 +622,7 @@ export default function SettingsModal({
                   <div className="text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
                     Default model for {selectedDefaultConnection.name}
                   </div>
-                  <input
+                  <select
                     className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
                     value={modelInput || selectedDefaultModel}
                     onChange={(event) => {
@@ -592,10 +633,25 @@ export default function SettingsModal({
                         [selectedDefaultConnection.id]: value,
                       }));
                     }}
-                    placeholder="Enter model id"
-                  />
+                  >
+                    {selectableModels.length === 0 ? (
+                      <option value="">No models — fetch from Connections tab</option>
+                    ) : (
+                      (() => {
+                        const current = modelInput || selectedDefaultModel;
+                        const ids = current && !selectableModels.includes(current)
+                          ? [current, ...selectableModels]
+                          : selectableModels;
+                        return ids.map((modelId) => (
+                          <option key={modelId} value={modelId}>
+                            {getModelDisplayLabel(modelId, selectedDefaultConnection)}
+                          </option>
+                        ));
+                      })()
+                    )}
+                  </select>
                   <div className="flex flex-wrap gap-2">
-                    {selectableModels.slice(0, 20).map((preset) => (
+                    {selectableModels.map((preset) => (
                       <button
                         key={preset}
                         className="rounded-full border border-[var(--border)] bg-[var(--panel)] px-3 py-1 text-xs text-[var(--text-secondary)]"
@@ -607,7 +663,7 @@ export default function SettingsModal({
                           }));
                         }}
                       >
-                        {preset}
+                        {getModelDisplayLabel(preset, selectedDefaultConnection)}
                       </button>
                     ))}
                     {selectableModels.length === 0 ? (
@@ -618,7 +674,7 @@ export default function SettingsModal({
                   </div>
                   {selectedDefaultConnection?.kind === "builtin" &&
                   selectedDefaultConnection?.provider === "openai" ? (
-                    <label className="mt-3 flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                    <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
                       <input
                         type="checkbox"
                         checked={showExtendedOpenAIModels}
@@ -852,7 +908,7 @@ export default function SettingsModal({
                 </div>
                 <div className="mt-3 flex gap-2">
                   <button
-                    className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+                    className="rounded-full px-4 py-2 text-xs settings-btn-accent"
                     onClick={upsertConnectionFromForm}
                   >
                     {editingConnectionId ? "Update Connection" : "Add Connection"}
@@ -930,7 +986,6 @@ export default function SettingsModal({
 	                  { label: "Enable mail/messages tools", checked: enableMail, setter: setEnableMail },
 	                  { label: "Enable workflow tool", checked: enableWorkflow, setter: setEnableWorkflow },
 	                  { label: "Enable system controls", checked: enableSystem, setter: setEnableSystem },
-	                  { label: "Dry-run only (no writes)", checked: dryRun, setter: setDryRun },
 	                ].map((item) => (
 	                  <label key={item.label} className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
 	                    <input
@@ -942,19 +997,6 @@ export default function SettingsModal({
 	                  </label>
 	                ))}
 	              </div>
-              <div>
-                <label className="mb-2 block text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
-                  Web Search Backend
-                </label>
-                <select
-                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
-                  value={webSearchBackend}
-                  onChange={(event) => setWebSearchBackend(event.target.value as WebSearchBackend)}
-                >
-                  <option value="no_key">No-key (default)</option>
-                  <option value="hybrid">Hybrid</option>
-                </select>
-              </div>
             </div>
           ) : null}
 
@@ -1020,13 +1062,11 @@ export default function SettingsModal({
                       <div className="flex items-start justify-between gap-3">
                         <div>
                           <div className="text-sm font-medium text-[var(--text-primary)]">{entry.key}</div>
-                          <div className="mt-0.5 text-xs text-[var(--text-secondary)]">{entry.value}</div>
+                          <div className="mt-0.5 text-xs text-[var(--text-secondary)]">
+                            {formatMemoryValue(entry.value)}
+                          </div>
                           <div className="mt-1 text-[11px] text-[var(--text-muted)]">
-                            {entry.kind} | {entry.scope}
-                            {entry.scope === "conversation" && entry.conversationId
-                              ? ` | ${entry.conversationId}`
-                              : ""}
-                            {` | ${entry.source}`}
+                            {formatMemoryMeta(entry)}
                           </div>
                         </div>
                         <div className="flex shrink-0 gap-2">
@@ -1130,7 +1170,7 @@ export default function SettingsModal({
                 ) : null}
                 <div className="flex gap-2">
                   <button
-                    className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+                    className="rounded-full px-4 py-2 text-xs settings-btn-accent"
                     onClick={() => {
                       void upsertMemoryEntry();
                     }}
@@ -1157,7 +1197,11 @@ export default function SettingsModal({
                 <select
                   className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm"
                   value={theme}
-                  onChange={(event) => setTheme(event.target.value as "dark" | "light")}
+                  onChange={(event) => {
+                    const value = event.target.value as "dark" | "light";
+                    setTheme(value);
+                    document.documentElement.dataset.theme = value;
+                  }}
                 >
                   <option value="dark">Dark</option>
                   <option value="light">Light</option>
@@ -1170,9 +1214,22 @@ export default function SettingsModal({
                 <select
                   className="w-full rounded-lg border border-[var(--border)] bg-[var(--panel-2)] px-3 py-2 text-sm"
                   value={font}
-                  onChange={(event) =>
-                    setFont(event.target.value as "ibm" | "manrope" | "sora" | "space" | "poppins")
-                  }
+                  onChange={(event) => {
+                    const value = event.target.value as "ibm" | "manrope" | "sora" | "space" | "poppins";
+                    setFont(value);
+                    const fontVar =
+                      value === "manrope"
+                        ? "var(--font-manrope)"
+                        : value === "poppins"
+                          ? "var(--font-poppins)"
+                          : value === "sora"
+                            ? "var(--font-sora)"
+                            : value === "space"
+                              ? "var(--font-space)"
+                              : "var(--font-sans)";
+                    document.documentElement.style.setProperty("--app-font", fontVar);
+                    document.body.style.fontFamily = fontVar;
+                  }}
                 >
                   <option value="ibm">IBM Plex Sans (Default)</option>
                   <option value="manrope">Manrope</option>
@@ -1186,20 +1243,35 @@ export default function SettingsModal({
                   Accent Color
                 </label>
                 <div className="grid grid-cols-4 gap-2">
-                  {accentPresets.map((preset) => (
-                    <button
-                      key={preset.id}
-                      className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${
-                        accentColor === preset.color
-                          ? "border-[var(--accent)] text-[var(--text-primary)]"
-                          : "border-[var(--border)] text-[var(--text-secondary)]"
-                      }`}
-                      onClick={() => setAccentColor(preset.color)}
-                    >
-                      <span className="h-3 w-3 rounded-full" style={{ background: preset.color }} />
-                      {preset.label}
-                    </button>
-                  ))}
+                  {accentPresets.map((preset) => {
+                    const isDefault = preset.id === "default";
+                    const displayColor =
+                      isDefault && theme === "light"
+                        ? DEFAULT_ACCENT_LIGHT
+                        : preset.color;
+                    const isSelected = isDefault
+                      ? accentColor === DEFAULT_ACCENT_DARK
+                      : accentColor === preset.color;
+                    return (
+                      <button
+                        key={preset.id}
+                        className={`flex items-center gap-2 rounded-lg border px-3 py-2 text-xs ${
+                          isSelected
+                            ? "border-[var(--accent-ring)] text-[var(--text-primary)]"
+                            : "border-[var(--border)] text-[var(--text-secondary)]"
+                        }`}
+                        onClick={() =>
+                          setAccentColor(isDefault ? DEFAULT_ACCENT_DARK : preset.color)
+                        }
+                      >
+                        <span
+                          className="h-3 w-3 rounded-full"
+                          style={{ background: displayColor }}
+                        />
+                        {preset.label}
+                      </button>
+                    );
+                  })}
                 </div>
               </div>
             </div>
@@ -1248,7 +1320,7 @@ export default function SettingsModal({
             Cancel
           </button>
           <button
-            className="rounded-full bg-[var(--accent)] px-4 py-2 text-xs text-white"
+            className="rounded-full px-4 py-2 text-xs settings-btn-accent"
             onClick={handleSave}
           >
             Save

package/template/src/components/Sidebar.tsx

@@ -2,7 +2,6 @@
 
 import { useMemo } from "react";
 import {
-  Folder,
   PanelLeftClose,
   PenSquare,
   Search,
@@ -83,8 +82,8 @@ export default function Sidebar({
           </div>
 
           <div className="flex-1 overflow-y-auto px-2">
-            <div className="sidebar-text px-2 py-2 text-[11px] uppercase tracking-[0.18em] text-[var(--text-muted)]">
-              Your chats
+            <div className="sidebar-text px-2 py-2 text-sm text-[var(--text-muted)]">
+              Your Chats
             </div>
             <div className="space-y-2">
 	              {groups.map(({ root }) => (
@@ -106,7 +105,6 @@ export default function Sidebar({
 	                    }`}
 	                  >
 	                    <div className="flex min-w-0 flex-1 items-center gap-2">
-	                      <Folder className="h-4 w-4 shrink-0 text-[var(--text-muted)]" />
 	                      <div className="sidebar-text min-w-0 truncate">
 	                        {root.title || "Main chat"}
 	                      </div>

package/template/src/components/TopBar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { ChevronDown, MessageSquare, Settings, Waypoints } from "lucide-react";
+import { ChevronDown, MessageSquare, Network, Settings } from "lucide-react";
 import type { ModelConnection } from "../lib/types";
 import { getModelDisplayLabel } from "../lib/model-presets";
 
@@ -67,7 +67,7 @@ export default function TopBar({
             <button
               type="button"
               onClick={() => setConnectionMenuOpen((current) => !current)}
-              className="inline-flex max-w-[42vw] items-center gap-2 rounded-md px-1.5 py-1 text-left sm:max-w-[240px] sm:px-2"
+              className="inline-flex max-w-[42vw] items-center gap-2 rounded-md px-1.5 py-1 text-left text-[var(--text-primary)] sm:max-w-[240px] sm:px-2"
               aria-haspopup="listbox"
               aria-expanded={connectionMenuOpen}
               aria-label="Model provider"
@@ -144,15 +144,9 @@ export default function TopBar({
             onClick={onToggleView}
           >
             {viewMode === "chat" ? (
-              <>
-                <Waypoints className="h-5 w-5" />
-                <span className="hidden sm:inline">Map</span>
-              </>
+              <Network className="h-5 w-5" />
             ) : (
-              <>
-                <MessageSquare className="h-5 w-5" />
-                <span className="hidden sm:inline">Chat</span>
-              </>
+              <MessageSquare className="h-5 w-5" />
             )}
           </button>
         ) : null}

package/template/src/lib/data.ts

@@ -30,6 +30,11 @@ const DEFAULT_SETTINGS: Settings = {
   memory: { ...DEFAULT_MEMORY_SETTINGS },
 };
 
+/** Default accent gray in dark mode (chat bubble, etc.). */
+export const DEFAULT_ACCENT_DARK = "#66706e";
+/** Default accent gray in light mode (light gray so bubble isn’t too dark on white). */
+export const DEFAULT_ACCENT_LIGHT = "#e4e6e5";
+
 const LEGACY_DEFAULT_LOCAL_TOOLS_SETTINGS: LocalToolsSettings = {
   ...DEFAULT_LOCAL_TOOLS_SETTINGS,
   approvalMode: "always_confirm_writes",

package/template/src/lib/model-presets.ts

@@ -136,6 +136,32 @@ export function filterModelIdsForConnection(params: {
   return ids.slice(0, Math.min(ids.length, OPENAI_FRONTIER_MODEL_PRESETS.length));
 }
 
+const OPENAI_MODEL_LABELS: Record<string, string> = {
+  "gpt-5.2": "GPT 5.2",
+  "gpt-5.2-pro": "GPT 5.2 Pro",
+  "gpt-5.2-chat-latest": "GPT 5.2 Chat (Latest)",
+  "gpt-5.2-codex": "GPT 5.2 Codex",
+  "gpt-5.1": "GPT 5.1",
+  "gpt-5.1-chat-latest": "GPT 5.1 Chat (Latest)",
+  "gpt-5.1-codex": "GPT 5.1 Codex",
+  "gpt-5.1-codex-max": "GPT 5.1 Codex Max",
+  "gpt-5": "GPT 5",
+  "gpt-5-chat-latest": "GPT 5 Chat (Latest)",
+  "gpt-5-mini": "GPT 5 Mini",
+  "gpt-5-nano": "GPT 5 Nano",
+  "gpt-5-codex": "GPT 5 Codex",
+  "gpt-5-pro": "GPT 5 Pro",
+  "gpt-4.1": "GPT 4.1",
+  "gpt-4.1-mini": "GPT 4.1 Mini",
+  "gpt-4.1-nano": "GPT 4.1 Nano",
+  "gpt-4o": "GPT 4o",
+  "gpt-4o-mini": "GPT 4o Mini",
+  "o3-pro": "O3 Pro",
+  "o3": "O3",
+  "o4-mini": "O4 Mini",
+  "o3-mini": "O3 Mini",
+};
+
 const ANTHROPIC_MODEL_LABELS: Record<string, string> = {
   "claude-opus-4-61": "Claude Opus 4.6",
   "claude-sonnet-4-51": "Claude Sonnet 4.5",
@@ -209,6 +235,9 @@ export function getModelDisplayLabel(modelId: string, connection: ModelConnectio
   if (connection.provider === "google") {
     return GOOGLE_MODEL_LABELS[modelId] ?? humanizeModelId(modelId);
   }
+  if (connection.provider === "openai") {
+    return OPENAI_MODEL_LABELS[modelId] ?? humanizeModelId(modelId);
+  }
   return modelId;
 }