iris-chatbot 4.1.0 → 5.0.1

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,10 +112,10 @@ 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",
+    settings?.font || "poppins",
   );
 
   const localTools = settings?.localTools ?? DEFAULT_LOCAL_TOOLS_SETTINGS;
@@ -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);
@@ -197,8 +195,8 @@ export default function SettingsModal({
 
   const selectedDefaultModel = selectedDefaultConnection
     ? defaultModelByConnection[selectedDefaultConnection.id] ||
-      getConnectionModelPresets(selectedDefaultConnection)[0] ||
-      ""
+    getConnectionModelPresets(selectedDefaultConnection)[0] ||
+    ""
     : "";
   const selectedPresets = selectedDefaultConnection ? getConnectionModelPresets(selectedDefaultConnection) : [];
   const selectedFetchedModels = selectedDefaultConnection ? fetchedModels[selectedDefaultConnection.id] ?? [] : [];
@@ -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,11 +586,10 @@ export default function SettingsModal({
             <button
               key={tab.id}
               onClick={() => setActiveTab(tab.id)}
-              className={`rounded-full px-3 py-1.5 text-xs ${
-                activeTab === tab.id
-                  ? "bg-[var(--accent)] text-white"
+              className={`rounded-full px-3 py-1.5 text-xs settings-tab ${activeTab === tab.id
+                  ? "settings-tab-active"
                   : "border border-[var(--border)] bg-[var(--panel-2)] text-[var(--text-secondary)]"
-              }`}
+                }`}
             >
               {tab.label}
             </button>
@@ -581,7 +621,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 +632,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 +662,7 @@ export default function SettingsModal({
                           }));
                         }}
                       >
-                        {preset}
+                        {getModelDisplayLabel(preset, selectedDefaultConnection)}
                       </button>
                     ))}
                     {selectableModels.length === 0 ? (
@@ -617,8 +672,8 @@ export default function SettingsModal({
                     ) : null}
                   </div>
                   {selectedDefaultConnection?.kind === "builtin" &&
-                  selectedDefaultConnection?.provider === "openai" ? (
-                    <label className="mt-3 flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                    selectedDefaultConnection?.provider === "openai" ? (
+                    <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
                       <input
                         type="checkbox"
                         checked={showExtendedOpenAIModels}
@@ -766,37 +821,37 @@ export default function SettingsModal({
                         />
                         Enabled
                       </label>
-	                      <span>
-	                        Tools: {(connection.supportsTools ?? true) ? "supported" : "disabled"}
-	                      </span>
+                      <span>
+                        Tools: {(connection.supportsTools ?? true) ? "supported" : "disabled"}
+                      </span>
                       {connection.kind === "builtin" ? (
                         <span>Keys configured in API Keys tab</span>
                       ) : null}
-	                      {connectionStatus[connection.id] ? <span>{connectionStatus[connection.id]}</span> : null}
-	                    </div>
-	                  </div>
-	                ))}
-	              </div>
+                      {connectionStatus[connection.id] ? <span>{connectionStatus[connection.id]}</span> : null}
+                    </div>
+                  </div>
+                ))}
+              </div>
 
               <div className="rounded-xl border border-[var(--border)] bg-[var(--panel-2)] p-4">
                 <div className="mb-3 text-xs uppercase tracking-[0.2em] text-[var(--text-muted)]">
                   {editingConnectionId ? "Edit Connection" : "Add Connection"}
                 </div>
-	                <div className="grid gap-3 md:grid-cols-2">
+                <div className="grid gap-3 md:grid-cols-2">
                   <input
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
                     placeholder="Connection name"
                     value={connectionFormName}
                     onChange={(event) => setConnectionFormName(event.target.value)}
                   />
-	                  <select
+                  <select
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm"
                     value={connectionFormKind}
-	                    onChange={(event) => setConnectionFormKind(event.target.value as ConnectionKind)}
-	                  >
-	                    <option value="openai_compatible">OpenAI-compatible</option>
-	                    <option value="ollama">Ollama</option>
-	                  </select>
+                    onChange={(event) => setConnectionFormKind(event.target.value as ConnectionKind)}
+                  >
+                    <option value="openai_compatible">OpenAI-compatible</option>
+                    <option value="ollama">Ollama</option>
+                  </select>
                   <input
                     className="rounded-lg border border-[var(--border)] bg-[var(--panel)] px-3 py-2 text-sm md:col-span-2"
                     placeholder="Base URL (e.g. http://localhost:11434)"
@@ -815,11 +870,11 @@ export default function SettingsModal({
                     value={connectionFormHeadersText}
                     onChange={(event) => setConnectionFormHeadersText(event.target.value)}
                   />
-	                </div>
+                </div>
                 {connectionStatus.form ? (
                   <div className="mt-2 text-xs text-[var(--danger)]">{connectionStatus.form}</div>
                 ) : null}
-	                <div className="mt-3 flex flex-wrap items-center gap-3">
+                <div className="mt-3 flex flex-wrap items-center gap-3">
                   <label className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
                     <input
                       type="checkbox"
@@ -852,7 +907,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"}
@@ -919,41 +974,27 @@ export default function SettingsModal({
                   placeholder="~/iris-project&#10;~/Desktop"
                 />
               </div>
-	              <div className="grid gap-2 md:grid-cols-2">
-	                {[
-	                  { label: "Enable Apple Notes tools", checked: enableNotes, setter: setEnableNotes },
-	                  { label: "Enable app open/focus tools", checked: enableApps, setter: setEnableApps },
-	                  { label: "Enable Numbers tools", checked: enableNumbers, setter: setEnableNumbers },
-	                  { label: "Enable web search/open tools", checked: enableWeb, setter: setEnableWeb },
-	                  { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
-	                  { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
-	                  { 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
-	                      type="checkbox"
-	                      checked={item.checked}
-	                      onChange={(event) => item.setter(event.target.checked)}
-	                    />
-	                    {item.label}
-	                  </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 className="grid gap-2 md:grid-cols-2">
+                {[
+                  { label: "Enable Apple Notes tools", checked: enableNotes, setter: setEnableNotes },
+                  { label: "Enable app open/focus tools", checked: enableApps, setter: setEnableApps },
+                  { label: "Enable Numbers tools", checked: enableNumbers, setter: setEnableNumbers },
+                  { label: "Enable web search/open tools", checked: enableWeb, setter: setEnableWeb },
+                  { label: "Enable music controls", checked: enableMusic, setter: setEnableMusic },
+                  { label: "Enable calendar/reminders tools", checked: enableCalendar, setter: setEnableCalendar },
+                  { 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 },
+                ].map((item) => (
+                  <label key={item.label} className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+                    <input
+                      type="checkbox"
+                      checked={item.checked}
+                      onChange={(event) => item.setter(event.target.checked)}
+                    />
+                    {item.label}
+                  </label>
+                ))}
               </div>
             </div>
           ) : null}
@@ -1020,13 +1061,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 +1169,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 +1196,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,13 +1213,26 @@ 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-poppins)";
+                    document.documentElement.style.setProperty("--app-font", fontVar);
+                    document.body.style.fontFamily = fontVar;
+                  }}
                 >
-                  <option value="ibm">IBM Plex Sans (Default)</option>
+                  <option value="ibm">IBM Plex Sans</option>
                   <option value="manrope">Manrope</option>
-                  <option value="poppins">Poppins</option>
+                  <option value="poppins">Poppins (Default)</option>
                   <option value="sora">Sora</option>
                   <option value="space">Space Grotesk</option>
                 </select>
@@ -1186,20 +1242,34 @@ 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 +1318,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;
 }