iris-chatbot 4.1.0 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris-chatbot",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "private": false,
   "description": "One-command installer for the Iris project template.",
   "bin": {

package/template/docs/plan-projects-sidebar-ui.md

@@ -0,0 +1,11 @@
+# Projects plan – Sidebar UI addendum
+
+When implementing the Sidebar for Projects, apply these UI details:
+
+1. **Folder icon**
+   - **Remove** the folder icon from chat/thread rows (individual chats).
+   - **Add** the folder icon next to **project names** (each project in the project list, including "Inbox" if shown as a project).
+
+2. **"Your Chats" label**
+   - Use the exact label **'Your Chats'** (title case).
+   - Do **not** render it in all caps: remove the `uppercase` class from the section heading (currently in Sidebar around line 86: `text-[11px] uppercase tracking-[0.18em]` → use the same size/tracking but drop `uppercase`) so it displays as **Your Chats**, not "YOUR CHATS".

package/template/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/template/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "iris",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "iris",
-      "version": "4.1.0",
+      "version": "5.0.0",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.72.1",
         "clsx": "^2.1.1",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "private": true,
   "description": "One-command installer for the Iris project template.",
   "engines": {

package/template/src/app/globals.css

@@ -3,7 +3,7 @@
 
 :root {
   --topbar-height: 64px;
-  --bg: #171819;
+  --bg: #212121;
   --bg-alt: #1b1c1d;
   --sidebar: #181818;
   --sidebar-border: #202020;
@@ -15,6 +15,7 @@
   --text-muted: #b1b7bf;
   --accent: #10a37f;
   --accent-2: #0e8e6f;
+  --accent-ring: var(--accent-2);
   --danger: #ef4444;
   --border: #2a2a2a;
   --border-strong: #3a3a3a;
@@ -48,6 +49,21 @@ a {
   color: var(--accent);
 }
 
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible,
+button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 1px var(--border-strong);
+}
+
 .chat-shell {
   display: grid;
   grid-template-columns: 248px minmax(0, 1fr);
@@ -82,10 +98,21 @@ a {
   background: transparent !important;
   backdrop-filter: none;
   box-shadow: none;
-  position: sticky;
+  position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 40;
   height: var(--topbar-height);
+  pointer-events: none;
+}
+
+.topbar > *,
+.topbar button,
+.topbar a,
+.topbar [role="listbox"],
+.topbar [role="option"] {
+  pointer-events: auto;
 }
 
 
@@ -249,7 +276,7 @@ a {
 }
 
 .assistant-card .message-content {
-  color: #f8fafc;
+  color: var(--text-primary);
 }
 
 .message-loading-spinner {
@@ -271,7 +298,7 @@ a {
 .composer-bar {
   position: sticky;
   bottom: 0;
-  background: transparent;
+  background: var(--bg);
   z-index: 30;
 }
 
@@ -299,13 +326,14 @@ a {
   --sidebar: #ffffff;
   --sidebar-border: #e5e5e5;
   --panel: #ffffff;
-  --panel-2: #f0f0f0;
-  --panel-3: #e8e8e8;
+  --panel-2: #f6f6f6;
+  --panel-3: #f0f0f0;
   --text-primary: #111111;
   --text-secondary: #4a4a4a;
   --text-muted: #6f6f6f;
   --accent: #0e8e6f;
   --accent-2: #0b7a5f;
+  --accent-ring: color-mix(in srgb, var(--accent) 55%, #000);
   --danger: #dc2626;
   --border: #d5d5d5;
   --border-strong: #bdbdbd;
@@ -313,6 +341,51 @@ a {
   --user-bubble: #d7f2ea;
 }
 
+/* Dark mode: white button background (no data-theme or data-theme="dark") */
+:root .settings-tab-active,
+:root .settings-btn-accent {
+  background: white !important;
+  color: #111111 !important;
+}
+
+[data-theme="dark"] .settings-tab-active,
+[data-theme="dark"] .settings-btn-accent {
+  background: white !important;
+  color: #111111 !important;
+}
+
+/* Light mode: black for selected tab and Save button */
+[data-theme="light"] .settings-tab-active,
+[data-theme="light"] .settings-btn-accent {
+  background: #111111 !important;
+  color: #ffffff !important;
+}
+
+[data-theme="light"] .message-content pre,
+[data-theme="light"] .message-content pre code {
+  color: #e5e7eb;
+}
+
+[data-theme="light"] .message-content code {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--text-primary);
+}
+
+[data-theme="light"] .message-loading-spinner {
+  border-color: rgba(0, 0, 0, 0.15);
+  border-top-color: #111111;
+}
+
+[data-theme="light"] .send-button.active {
+  background: #111111;
+  color: #ffffff;
+  border-color: transparent;
+}
+
+[data-theme="light"] .send-button.active svg {
+  color: #ffffff;
+}
+
 .message-content h1,
 .message-content h2,
 .message-content h3,
@@ -506,12 +579,16 @@ a {
 }
 
 .composer {
-  background: var(--panel);
+  background: #303030;
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 10px 12px;
 }
 
+[data-theme="light"] .composer {
+  background: transparent;
+}
+
 .thread-shelf {
   margin-top: 12px;
   padding-top: 8px;
@@ -582,10 +659,22 @@ a {
   line-height: 1.4;
   padding-top: 7px;
   padding-bottom: 9px;
+  padding-left: 6px;
   /* One line by default; height grows with content in Composer.tsx */
   min-height: calc(1.4em + 7px + 9px);
 }
 
+.composer-textarea:focus,
+.composer-textarea:focus-visible {
+  box-shadow: none;
+}
+
+.search-modal-input:focus,
+.search-modal-input:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .send-button {
   height: 40px;
   width: 40px;
@@ -800,9 +889,9 @@ a {
 }
 
 .chat-scroll {
-  padding-top: calc(var(--topbar-height) - 20px);
+  padding-top: calc(var(--topbar-height) + 24px);
 }
 
 .chat-scroll.empty {
-  padding-top: var(--topbar-height);
+  padding-top: calc(var(--topbar-height) + 24px);
 }

package/template/src/app/page.tsx

@@ -12,6 +12,8 @@ import {
   createNewThread,
   deleteConversation,
   deleteThread,
+  DEFAULT_ACCENT_DARK,
+  DEFAULT_ACCENT_LIGHT,
 } from "../lib/data";
 import { db } from "../lib/db";
 import {
@@ -331,10 +333,23 @@ export default function Home() {
     <div
       className={`chat-shell ${sidebarCollapsed ? "collapsed" : ""}`}
       style={
-        {
-          "--accent": settings?.accentColor || "#66706e",
-          "--accent-2": settings?.accentColor || "#66706e",
-        } as CSSProperties
+        (() => {
+          const stored = settings?.accentColor || DEFAULT_ACCENT_DARK;
+          const isDefaultGray = stored === DEFAULT_ACCENT_DARK;
+          const isLight =
+            settings?.theme === "light" ||
+            (typeof document !== "undefined" &&
+              document.documentElement.dataset.theme === "light");
+          const effective =
+            isDefaultGray && isLight ? DEFAULT_ACCENT_LIGHT : stored;
+          return {
+            "--accent": effective,
+            "--accent-2": effective,
+            ...(isLight && {
+              "--accent-ring": "color-mix(in srgb, var(--accent) 55%, #000)",
+            }),
+          } as CSSProperties;
+        })()
       }
     >
       <Sidebar
@@ -387,7 +402,7 @@ export default function Home() {
         onOpenSearch={() => setSearchOpen(true)}
       />
 
-      <div className="flex h-screen min-w-0 flex-col overflow-hidden">
+      <div className="relative flex h-screen min-w-0 flex-col overflow-hidden">
         <TopBar
           connectionId={connection?.id ?? ""}
           connectionName={connection?.name ?? "No connection"}

package/template/src/components/MapView.tsx

@@ -16,6 +16,21 @@ import { useUIStore } from "../lib/store";
 const NODE_WIDTH = 220;
 const NODE_HEIGHT = 80;
 
+/** Strip markdown syntax for a short plain-text preview (e.g. "## Hi there" → "Hi there"). */
+function stripMarkdownForPreview(text: string): string {
+  return text
+    .replace(/^#+\s*/m, "") // headings: ## Title -> Title
+    .replace(/\*\*([^*]+)\*\*/g, "$1") // **bold**
+    .replace(/\*([^*]+)\*/g, "$1") // *italic*
+    .replace(/_([^_]+)_/g, "$1") // _italic_
+    .replace(/`([^`]+)`/g, "$1") // `code`
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1") // [link](url) -> link
+    .replace(/^[-*]\s+/gm, "") // list bullets
+    .replace(/^>\s*/gm, "") // blockquote
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
 const graph = new dagre.graphlib.Graph();
 graph.setDefaultEdgeLabel(() => ({}));
 
@@ -120,7 +135,10 @@ export default function MapView({
 
   const { nodes, edges } = useMemo(() => {
     const nodes: Node[] = visibleMessages.map((message) => {
-      const preview = splitContentAndSources(message.content).content.trim().slice(0, 60) || "(empty)";
+      const raw = splitContentAndSources(message.content).content.trim();
+      const preview = raw
+        ? stripMarkdownForPreview(raw).slice(0, 60)
+        : "(empty)";
       const isActive = activePathIds.has(message.id);
       const roleClass =
         message.role === "user"
@@ -169,6 +187,7 @@ export default function MapView({
       padding: 0.2,
       duration,
       includeHiddenNodes: false,
+      minZoom: 0.85,
     });
   }, []);
 
@@ -198,7 +217,7 @@ export default function MapView({
         nodes={nodes}
         edges={edges}
         fitView
-        fitViewOptions={{ padding: 0.2, includeHiddenNodes: false }}
+        fitViewOptions={{ padding: 0.2, includeHiddenNodes: false, minZoom: 0.85 }}
         onInit={(instance) => {
           flowRef.current = instance;
           refitView(0);

package/template/src/components/MessageCard.tsx

@@ -1009,7 +1009,7 @@ function MessageCard({
         {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(--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)}

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;
 }