ompchamber 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",
@@ -50,6 +50,7 @@
     "@fontsource/fira-code": "^5.3.0",
     "@shikijs/langs": "^4.4.3",
     "@shikijs/themes": "^4.4.3",
+    "@tailwindcss/postcss": "^4.1.14",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
@@ -60,10 +61,12 @@
     "marked": "^18.0.11",
     "marked-linkify-it": "^4.0.2",
     "mermaid": "^12.0.0",
+    "postcss": "^8.5.16",
     "preact": "^10.29.8",
     "remend": "^1.3.1",
     "ripgrep": "^0.3.1",
     "shiki": "^4.4.3",
+    "tailwindcss": "^4.1.14",
     "yaml": "^2.9.1"
   },
   "devDependencies": {
@@ -73,13 +76,11 @@
     "@semantic-release/github": "^12.0.10",
     "@semantic-release/npm": "^13.2.0",
     "@semantic-release/release-notes-generator": "^14.1.1",
-    "@tailwindcss/postcss": "^4.1.14",
     "@types/bun": "^1.4.2",
     "@types/node": "^22.14.0",
     "conventional-changelog-conventionalcommits": "^9.3.1",
     "happy-dom": "^20.14.5",
     "semantic-release": "^25.0.9",
-    "tailwindcss": "^4.1.14",
     "typescript": "~5.8.2"
   }
 }

package/public/sw.js

@@ -1,6 +1,37 @@
-const CACHE_NAME = 'ompchamber-v1';
+/**
+ * OMPChamber service worker.
+ *
+ * Two jobs, and only the first one is about installability.
+ *
+ * 1. Chromium requires a fetch handler for PWA installability.
+ *
+ * 2. The dev client bundle is cached here rather than by the HTTP cache,
+ *    because the HTTP cache CANNOT hold it. Chrome declines to store a response
+ *    whose decoded body reaches ~5 MB — measured with `Cache-Control: no-cache`
+ *    and a working `ETag`: 1 MB and 4 MB answered `304` on the next load, while
+ *    5, 6, 7, 8, 16 and 20 MB were re-fetched in full every time, never sending
+ *    `If-None-Match`. Bun's development bundle is ~19.7 MB (unminified, by
+ *    design), so it was re-downloaded on every single page load — the whole of
+ *    the dev-mode bandwidth complaint. Cache Storage has no such per-entry
+ *    limit, so this is the one layer that can hold it.
+ *
+ * Only `/_dev-assets/client/*` is cached: that is the bundle, whose filename
+ * carries a build-generation hash that changes on every rebuild, so a URL is a
+ * reliable key for its bytes. `/_dev-assets/asset/*` is deliberately NOT
+ * cached — a CSS asset keeps its name while its content changes (appending a
+ * rule to `tailwind.css` changes the bytes served at the same URL), so
+ * cache-first there would serve stale styles; those go to the network and are
+ * revalidated by the server's own `ETag`, which answers `304`.
+ *
+ * One bundle generation is kept at a time: storing a new one drops the rest, so
+ * the cache cannot grow by one bundle per rebuild. Nothing here runs in
+ * production — the URLs it matches do not exist there.
+ */
 
-self.addEventListener('install', (event) => {
+const BUNDLE_CACHE = 'ompchamber-dev-bundle';
+const BUNDLE_PREFIX = '/_dev-assets/client/';
+
+self.addEventListener('install', () => {
   self.skipWaiting();
 });
 
@@ -9,7 +40,25 @@ self.addEventListener('activate', (event) => {
 });
 
 self.addEventListener('fetch', (event) => {
-  // A simple fetch handler is required by Chromium for PWA installability.
-  // We'll just let network requests pass through normally.
-  event.respondWith(fetch(event.request).catch(() => caches.match(event.request)));
+  const url = new URL(event.request.url);
+  if (event.request.method !== 'GET') return;
+  if (url.origin !== self.location.origin) return;
+  if (!url.pathname.startsWith(BUNDLE_PREFIX)) return;
+
+  event.respondWith(
+    (async () => {
+      const cache = await caches.open(BUNDLE_CACHE);
+      const hit = await cache.match(url.pathname);
+      if (hit) return hit;
+
+      const response = await fetch(event.request);
+      if (response.ok) {
+        await cache.put(url.pathname, response.clone());
+        // The previous generation is dead the moment a new one is stored.
+        const stale = await cache.keys();
+        await Promise.all(stale.filter((key) => new URL(key.url).pathname !== url.pathname).map((key) => cache.delete(key)));
+      }
+      return response;
+    })(),
+  );
 });

package/src/client/components/mobile/mobile-right-sidebar/FullEditor.tsx

@@ -6,6 +6,13 @@ import { ImageViewer } from '@/client/components/common/image-viewer';
 import { EditorHeader } from '@/client/components/mobile/mobile-right-sidebar/Header';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { useFileEditor } from '@/client/hooks/editor/use-file-editor';
+import {
+  EDITOR_DEFAULT_FONT_SIZE,
+  EDITOR_LINE_HEIGHT,
+  EDITOR_MAX_FONT_SIZE,
+  EDITOR_MIN_FONT_SIZE,
+} from '@/shared/lib/code/editor/typography';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
 
 interface MobileFullEditorProps {
   file: {
@@ -22,9 +29,10 @@ interface MobileFullEditorProps {
 
 export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEditorProps) {
   const [isPreview, setIsPreview] = useState(file.name.endsWith('.md'));
-  const [fontSize, setFontSize] = useState(12);
+  const [fontSize, setFontSize] = useState(EDITOR_DEFAULT_FONT_SIZE);
   const [wordWrap, setWordWrap] = useState(true);
   const { isScrolling, handleScroll } = useScrollbarFade();
+  const editorFontFamily = useEditorFontStack();
 
   const isMd = file.name.endsWith('.md');
 
@@ -52,8 +60,8 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
         onClose={onClose}
         onTogglePreview={() => setIsPreview(!isPreview)}
         onToggleWrap={() => setWordWrap(!wordWrap)}
-        onZoomOut={() => setFontSize(prev => Math.max(10, prev - 1))}
-        onZoomIn={() => setFontSize(prev => Math.min(18, prev + 1))}
+        onZoomOut={() => setFontSize(prev => Math.max(EDITOR_MIN_FONT_SIZE, prev - 1))}
+        onZoomIn={() => setFontSize(prev => Math.min(EDITOR_MAX_FONT_SIZE, prev + 1))}
         onCopy={editor.copy}
         onDownload={editor.download}
       />
@@ -80,7 +88,7 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
             /* Markdown Preview Mode — styled by `.prose-content` (the chat
                timeline's system), see the desktop editor for why there is no
                `prose` wrapper. */
-            <div className="p-4 bg-paper text-ink min-h-full font-sans">
+            <div className="p-4 bg-paper text-ink min-h-full font-sans" style={{ fontSize: `${fontSize}px` }}>
               <MarkdownRenderer
                 content={content}
                 document
@@ -95,13 +103,24 @@ export function MobileFullEditor({ file, onClose, onFileSaved }: MobileFullEdito
               language={lang}
               wordWrap={wordWrap}
               rootClassName="flex min-h-full bg-paper"
-              gutterClassName="w-10 py-3 pr-2 select-none text-right text-[10px] text-ink/30 bg-canvas border-r border-ink/10 font-mono leading-[20px] flex-shrink-0"
+              // The gutter auto-sizes to its widest number rather than taking a
+              // fixed width: the numbers scale with the zoom control, and a
+              // pinned `w-10` clipped a 3-digit line number at 18px.
+              gutterClassName="flex flex-col text-right pr-2 select-none text-ink/30 bg-canvas border-r border-ink/10 font-mono flex-shrink-0"
+              gutterLineClassName="min-w-[1.5rem]"
+              gutterStyle={{
+                fontSize,
+                paddingTop: 12,
+                paddingBottom: 12,
+                lineHeight: EDITOR_LINE_HEIGHT,
+                fontFamily: editorFontFamily,
+              }}
               editorWrapperClassName="flex-1 p-3 overflow-x-auto min-w-0 bg-paper text-ink code-surface"
               editorClassName="focus:outline-none"
               editorStyle={{
-                fontFamily: 'monospace',
-                fontSize: `${fontSize}px`,
-                lineHeight: '20px',
+                fontFamily: editorFontFamily,
+                fontSize,
+                lineHeight: EDITOR_LINE_HEIGHT,
                 backgroundColor: 'transparent',
                 minHeight: '100%',
                 color: 'var(--theme-ink)',

package/src/client/components/mobile/mobile-session-sidebar/Item.tsx

@@ -188,6 +188,7 @@ export function MobileSessionCategory({
                   session={session}
                   isActive={isSessionActive && !isViewingSubagent}
                   status={sessionStatus[sessionKey]}
+                  awaitingInput={Boolean(session.awaitingInput)}
                   timeAgo={relativeTimeAgo(session.updated_at ?? session.created_at)}
                   hasSubagents={hasSubagents}
                   isExpanded={isRosterOpen}

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.test.ts

@@ -0,0 +1,84 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The mobile session row's status slot.
+ *
+ * The phone must draw the same cue the desktop row does: a session whose agent
+ * is blocked on a question shows the question mark, NOT the run spinner. The
+ * child is still mid-run while it waits (`streamStatus` stays `stream`), so a
+ * row that only knew the stream state drew a spinner over a turn that was
+ * actually waiting for the user — the bug this pins.
+ */
+
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import { h, render } from 'preact';
+import { act } from 'preact/test-utils';
+import { MobileSessionRow } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { MobileSessionRowProps } from '@/client/components/mobile/mobile-session-sidebar/SessionRow';
+import type { SessionItemData } from '@/shared/types';
+
+let container: HTMLElement;
+
+const DOM_GLOBALS = ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'HTMLInputElement', 'Event', 'MouseEvent', 'KeyboardEvent'] as const;
+
+beforeAll(() => {
+  const win = new Window({ url: 'http://localhost' });
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) target[key] = (win as unknown as Record<string, unknown>)[key];
+});
+
+afterAll(() => {
+  const target = globalThis as unknown as Record<string, unknown>;
+  for (const key of DOM_GLOBALS) delete target[key];
+});
+
+const session: SessionItemData = { id: 's1', folder_id: 1, title: 'hello world' };
+
+async function mount(overrides: Partial<MobileSessionRowProps>) {
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  await act(async () => {
+    render(h(MobileSessionRow, {
+      session,
+      isActive: false,
+      timeAgo: '1m',
+      onSelect: () => {},
+      onArchive: () => {},
+      ...overrides,
+    }), container);
+  });
+  return container;
+}
+
+function svgClasses(el: HTMLElement) {
+  return Array.from(el.querySelectorAll('svg')).map((s) => s.getAttribute('class') ?? '').join('|');
+}
+
+describe('mobile session row status slot', () => {
+  test('awaiting input beats the stream spinner', async () => {
+    const el = await mount({ status: 'stream', awaitingInput: true });
+    expect(svgClasses(el)).toContain('circle-question-mark');
+    expect(svgClasses(el)).not.toContain('animate-spin');
+  });
+
+  test('stream alone still spins', async () => {
+    const el = await mount({ status: 'stream' });
+    expect(svgClasses(el)).toContain('animate-spin');
+    expect(svgClasses(el)).not.toContain('circle-question-mark');
+  });
+
+  test('terminal badge draws the check', async () => {
+    const el = await mount({ status: 'finish' });
+    expect(svgClasses(el)).toContain('lucide-check');
+  });
+
+  test('no status draws no glyph', async () => {
+    const el = await mount({});
+    const slot = el.querySelector('span.w-4');
+    expect(slot?.querySelector('svg')).toBeNull();
+  });
+});

package/src/client/components/mobile/mobile-session-sidebar/SessionRow.tsx

@@ -1,4 +1,4 @@
-import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, Loader2, Pencil } from 'lucide-preact';
+import { Archive, ArchiveRestore, Check, ChevronDown, ChevronRight, CircleQuestionMark, Loader2, Pencil } from 'lucide-preact';
 import type { SessionItemData } from '@/shared/types';
 import { useInlineRename } from '@/client/hooks/ui/inline-rename';
 
@@ -6,6 +6,8 @@ export interface MobileSessionRowProps {
   session: SessionItemData;
   isActive: boolean;
   status?: 'stream' | 'finish' | 'abort';
+  /** The session's agent is blocked on a question until the user answers it. */
+  awaitingInput?: boolean;
   /** Relative age of the session, or null when no usable timestamp exists. */
   timeAgo: string | null;
   /** The session has a subagent roster (on disk or live), so it can be expanded. */
@@ -21,6 +23,7 @@ export function MobileSessionRow({
   session,
   isActive,
   status,
+  awaitingInput = false,
   timeAgo,
   hasSubagents = false,
   isExpanded = false,
@@ -49,7 +52,6 @@ export function MobileSessionRow({
   // pinned whenever the row has a roster; a hidden one would leave the roster
   // unreachable on a phone.
   const showChevron = hasSubagents && Boolean(onToggleExpand);
-  const showStatus = Boolean(status);
   const title = session.title.charAt(0).toUpperCase() + session.title.slice(1);
 
   if (isEditing) {
@@ -81,10 +83,17 @@ export function MobileSessionRow({
       >
         <div className="flex items-center min-w-0 pr-2">
           {/* Status slot, 16px at the same x as the folder header's icon slot,
-              so the left column reads as one line. */}
+              so the left column reads as one line. Waiting on an answer
+              outranks the run spinner — the spinner says work is happening,
+              the question mark says it is YOUR turn (desktop parity). */}
           <span className="w-4 flex-shrink-0 flex items-center justify-center">
-            {showStatus && status === 'stream' && <Loader2 size={13} className="text-ink/50 animate-spin" />}
-            {showStatus && (status === 'finish' || status === 'abort') && <Check size={13} className="text-ink/50" />}
+            {awaitingInput ? (
+              <CircleQuestionMark size={13} className="text-ink/70 animate-pulse" />
+            ) : status === 'stream' ? (
+              <Loader2 size={13} className="text-ink/50 animate-spin" />
+            ) : status ? (
+              <Check size={13} className="text-ink/50" />
+            ) : null}
           </span>
           <span className="text-xs truncate leading-snug ml-2">{title}</span>
         </div>

package/src/client/components/settings/Modal.tsx

@@ -6,6 +6,8 @@ import { diffSettings } from '@/shared/lib/settings/diff';
 import { useChamberSettingsWriter } from '@/client/hooks/settings/use-chamber-setting';
 import { applyDocumentTheme } from '@/client/hooks/ui/theme';
 import { DEFAULT_THEME_ID } from '@/shared/lib/theme/catalog';
+import { EDITOR_DEFAULT_FONT_FAMILY } from '@/shared/lib/code/editor/typography';
+import { EDITOR_FONT_CHANGED_EVENT } from '@/client/hooks/editor/font';
 import { useChamberEvent } from '@/client/hooks/ui/window-event';
 import { SETTINGS_CATEGORIES, SettingsSidebar } from '@/client/components/settings/Sidebar';
 import { AppearanceSettings } from '@/client/components/settings/categories/AppearanceSettings';
@@ -33,28 +35,12 @@ export interface SettingsModalProps {
 }
 
 const DEFAULT_SETTINGS: SettingsState = {
-  binaryPath: '/Users/you/.bun/bin/omp',
-  showUpdateNotifications: true,
-  agentControlTool: true,
-  ompChamberWebTool: true,
   theme: DEFAULT_THEME_ID,
-  fontSize: 'standard',
-  editorFont: 'JetBrains Mono',
-  streamResponses: true,
+  editorFont: EDITOR_DEFAULT_FONT_FAMILY,
   streamTransport: 'websocket',
   autoSessionTitle: true,
-  expandedThinking: true,
-  detailedToolCalls: false,
-  notificationsEnabled: true,
-  buildFailureAlert: true,
   soundAlerts: true,
   chatCompletionSound: true,
-  defaultWorkspacePath: '~/Projects/ompchamber',
-  tunnelEnabled: true,
-  tunnelSubdomain: 'omp-dev-preview',
-  activeProvider: 'claude',
-  autoApproveSafeCmds: true,
-  autoPatchErrors: true,
   followUpBehavior: 'queue',
   keybindingSend: 'Enter',
   keybindingNewLine: 'Shift + Enter',
@@ -110,6 +96,13 @@ export function SettingsModal({
       if (typeof document !== 'undefined' && next.theme) {
         applyDocumentTheme(next.theme);
       }
+      // The editor font is visual, so an open editor has to hear about the
+      // change now — `appSettings` is a boot-time prop and would only show it
+      // after a reload. Announced only when the value actually moved, so a
+      // re-render of an unrelated setting does not churn every editor's stack.
+      if (typeof window !== 'undefined' && next.editorFont !== prev.editorFont) {
+        window.dispatchEvent(new CustomEvent(EDITOR_FONT_CHANGED_EVENT, { detail: next.editorFont }));
+      }
       // Only the keys this update actually touched are persisted. The modal
       // holds a full `SettingsState` snapshot taken when it opened, so writing
       // the whole object back would also republish every value it read at that

package/src/client/components/settings/categories/AppearanceSettings.tsx

@@ -2,6 +2,7 @@ import { Palette } from 'lucide-preact';
 import type { SettingsState } from '@/shared/types';
 import { resolveThemeId } from '@/shared/lib/theme/catalog';
 import { ThemeGrid } from '@/client/components/settings/categories/appearance-settings/ThemeGrid';
+import { EditorFontSection } from '@/client/components/settings/categories/appearance-settings/EditorFontSection';
 
 interface AppearanceSettingsProps {
   settings: SettingsState;
@@ -22,6 +23,8 @@ export function AppearanceSettings({ settings, onUpdate }: AppearanceSettingsPro
           onSelect={(theme) => onUpdate({ theme: resolveThemeId(theme) })}
         />
       </section>
+
+      <EditorFontSection settings={settings} onUpdate={onUpdate} />
     </div>
   );
 }

package/src/client/components/settings/categories/appearance-settings/EditorFontSection.tsx

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Check, Type } from 'lucide-preact';
+import type { SettingsState } from '@/shared/types';
+import { EDITOR_FONT_CHOICES } from '@/shared/lib/code/editor/typography';
+
+interface EditorFontSectionProps {
+  settings: SettingsState;
+  onUpdate: (updater: Partial<SettingsState> | ((prev: SettingsState) => SettingsState)) => void;
+}
+
+/**
+ * The code editor's typeface.
+ *
+ * Only Fira Code is bundled, so each row states whether the face ships with the
+ * app or has to come from the device. That is the difference between a choice
+ * that always works and one that silently falls back — and the fallback is
+ * visible in the row's own preview, which is set in the face it names.
+ */
+export function EditorFontSection({ settings, onUpdate }: EditorFontSectionProps) {
+  const active = settings.editorFont || EDITOR_FONT_CHOICES[0].id;
+
+  return (
+    <section className="space-y-3">
+      <div>
+        <h3 className="font-semibold text-sm uppercase tracking-wider text-ink/80 flex items-center gap-2">
+          <Type size={16} className="text-ink/60" />
+          Editor Font
+        </h3>
+        <p className="text-[11px] text-ink/60 mt-1">
+          Typeface for the code editor and its line numbers, in both the desktop panel and the phone's
+          full-screen editor. Only Fira Code ships with the app; the others are used when your device
+          has them, and fall back to Fira Code when it does not.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        {EDITOR_FONT_CHOICES.map((choice) => {
+          const selected = active === choice.id;
+          return (
+            <button
+              key={choice.id}
+              type="button"
+              onClick={() => onUpdate({ editorFont: choice.id })}
+              aria-pressed={selected}
+              className={`flex items-center justify-between gap-3 rounded-lg border px-3 py-2 text-left transition-colors ${
+                selected ? 'border-ink/40 bg-ink/5' : 'border-ink/12 hover:bg-ink/5'
+              }`}
+            >
+              <span className="min-w-0">
+                {/* Preview in the face it names: an uninstalled choice shows its
+                    own fallback here rather than after the user commits to it. */}
+                <span
+                  className="block truncate text-xs text-ink"
+                  style={{ fontFamily: `"${choice.id}", monospace` }}
+                >
+                  const greet = () =&gt; 'hi'
+                </span>
+                <span className="mt-0.5 flex items-center gap-1.5 text-[10px] text-ink/50">
+                  <span>{choice.label}</span>
+                  {choice.bundled && (
+                    <span className="rounded bg-ink/8 px-1 py-px text-[9px] uppercase tracking-wide">
+                      Bundled
+                    </span>
+                  )}
+                </span>
+              </span>
+              {selected && <Check size={14} className="text-ink flex-shrink-0" />}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/src/client/components/workspace/chat-timeline/SystemNotice.tsx

@@ -1,8 +1,9 @@
-import { useMemo, useState } from 'preact/hooks';
+import { useMemo, useRef, useState } from 'preact/hooks';
 import { AlertCircle, Bell, Bot, CheckCircle2, ChevronDown, Clock, Info, Layers } from 'lucide-preact';
 import { isCodeLike } from '@/shared/lib/code/language';
 import { highlightCode } from '@/shared/lib/code/syntax-highlight';
 import { useSyntaxReady } from '@/client/hooks/ui/syntax-ready';
+import { useIsTruncated } from '@/client/hooks/ui/text-overflow';
 import { parseTaskNotice } from '@/shared/lib/chat/task-result-parser';
 import { TaskResultContent } from '@/client/components/workspace/chat-timeline/TaskResultContent';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
@@ -60,12 +61,17 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
   }, [notice]);
 
   const rawTitle = taskNotice?.intro || reminderInfo?.title || genericInfo.firstLine || notice;
-  const isTruncated = rawTitle.length > 100;
-  const displayTitle = rawTitle.slice(0, 100) + (isTruncated ? '...' : '');
+  // The subtitle is clipped by CSS at the card's own width, so the decision to
+  // offer an expander is a MEASUREMENT, not a character count: 76 characters
+  // fit a desktop timeline and are cut on a phone card. A char threshold left
+  // those rows showing an ellipsis with nothing to click (the chevron was
+  // dropped with the button disabled). Measured on the exact node that carries
+  // `truncate`, so it cannot disagree with the ellipsis the user sees.
+  const subtitleRef = useRef<HTMLSpanElement>(null);
+  const subtitleClipped = useIsTruncated(subtitleRef, rawTitle);
 
-  // If notice has only 1 line of content AND does not exceed the 100-character ellipsis limit,
-  // disable expand since the entire text is already fully visible in the sub-header.
-  // If it exceeds the ellipsis limit (>100 chars) or has multiple lines, keep expand active.
+  // Expandable when the subtitle is visually clipped, or when the body holds
+  // something the one-line header cannot show (more lines, a task-result card).
   const isExpandable = useMemo(() => {
     if (taskNotice) return true;
     const clean = notice
@@ -75,8 +81,8 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
       .split(/\r?\n/)
       .map((l) => l.trim())
       .filter(Boolean);
-    return lines.length > 1 || clean.length > 100 || rawTitle.length > 100;
-  }, [taskNotice, notice, rawTitle]);
+    return lines.length > 1 || subtitleClipped;
+  }, [taskNotice, notice, subtitleClipped]);
 
   const noticeStyle = useMemo(() => {
     if (taskNotice) {
@@ -169,9 +175,9 @@ export function SystemNotice({ notice }: SystemNoticeProps) {
               </span>
             )}
           </span>
-          {!isOpen && displayTitle && (
-            <span className="truncate font-mono text-[10.5px] text-ink/45" title={rawTitle}>
-              {displayTitle}
+          {!isOpen && rawTitle && (
+            <span ref={subtitleRef} className="truncate font-mono text-[10.5px] text-ink/45" title={rawTitle}>
+              {rawTitle}
             </span>
           )}
         </span>

package/src/client/components/workspace/editor/index.tsx

@@ -10,6 +10,13 @@ import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
 import { FindWidget } from '@/client/components/workspace/editor/FindWidget';
 import { CommandPalette } from '@/client/components/workspace/editor/CommandPalette';
 import { EDITOR_KEY_BINDINGS, isFindBarCommand, type EditorCommand } from '@/shared/lib/code/editor/keymap';
+import {
+  EDITOR_DEFAULT_FONT_SIZE,
+  EDITOR_LINE_HEIGHT,
+  EDITOR_MAX_FONT_SIZE,
+  EDITOR_MIN_FONT_SIZE,
+} from '@/shared/lib/code/editor/typography';
+import { useEditorFontStack } from '@/client/hooks/editor/font';
 import type { TextRange } from '@/shared/lib/code/editor/commands';
 import { resolveBinding } from '@/shared/lib/ui/key-binding';
 import { ImageViewer } from '@/client/components/common/image-viewer';
@@ -45,7 +52,7 @@ export function Editor({
   const activeFile = openedFiles.find(f => f.id === activeFileId);
   
   const [previewMode, setPreviewMode, previewReady] = useSessionState<Record<string | number, boolean>>('editor.previewMode', {});
-  const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', 12);
+  const [zoomLevel, setZoomLevel] = useSessionState<number>('editor.zoomLevel', EDITOR_DEFAULT_FONT_SIZE);
   const [isMaximized, setIsMaximized] = useState(false);
   const [wordWrap, setWordWrap] = useSessionState<boolean>('editor.wordWrap', true);
   /** Extra ⌘D ranges; the surface paints them and the editor edits them by replication. */
@@ -54,6 +61,7 @@ export function Editor({
   const { sessionId } = useSessionStateContext();
   const { isScrolling, handleScroll } = useScrollbarFade();
   const surfaceRef = useRef<CodeSurfaceHandle | null>(null);
+  const editorFontFamily = useEditorFontStack();
 
   const editor = useFileEditor(activeFile ?? null, {
     // A file that could not be read must report the failure, not substitute
@@ -233,8 +241,8 @@ export function Editor({
               onSave={editor.saveNow}
               onTogglePreview={togglePreview}
               onToggleWordWrap={() => setWordWrap(!wordWrap)}
-              onZoomIn={() => setZoomLevel(z => Math.min(24, z + 1))}
-              onZoomOut={() => setZoomLevel(z => Math.max(8, z - 1))}
+              onZoomIn={() => setZoomLevel(z => Math.min(EDITOR_MAX_FONT_SIZE, z + 1))}
+              onZoomOut={() => setZoomLevel(z => Math.max(EDITOR_MIN_FONT_SIZE, z - 1))}
               onCopy={editor.copy}
               onDownload={editor.download}
               onToggleMaximize={() => setIsMaximized(!isMaximized)}
@@ -295,8 +303,8 @@ export function Editor({
                         fontSize: zoomLevel,
                         paddingTop: 16,
                         paddingBottom: 16,
-                        lineHeight: 1.5,
-                        fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                        lineHeight: EDITOR_LINE_HEIGHT,
+                        fontFamily: editorFontFamily,
                       }}
                       gutterLineClassName="min-w-[1.5rem]"
                       // `min-w-max` keeps a long line intact and lets the panel
@@ -306,9 +314,9 @@ export function Editor({
                       editorPadding={16}
                       editorClassName="font-mono focus:outline-none"
                       editorStyle={{
-                        fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                        fontFamily: editorFontFamily,
                         fontSize: zoomLevel,
-                        lineHeight: 1.5,
+                        lineHeight: EDITOR_LINE_HEIGHT,
                         minHeight: '100%',
                         // Breathing room under the last line. It has to live on the
                         // surface, not on the scroll container: a scroll container's