ompchamber 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "type": "module",
   "engines": {
@@ -69,6 +69,7 @@
     "@tailwindcss/postcss": "^4.1.14",
     "@types/bun": "^1.4.2",
     "@types/node": "^22.14.0",
+    "happy-dom": "^20.14.5",
     "tailwindcss": "^4.1.14",
     "typescript": "~5.8.2"
   }

package/src/client/App.tsx

@@ -4,12 +4,27 @@
  */
 
 import { useEffect, useRef, useState } from 'preact/hooks';
+import { Suspense, lazy } from 'preact/compat';
 import { useSearchParams } from '@/client/lib/router/search-params';
 import { DesktopLayout } from '@/client/components/layout/desktop-layout/index';
-import { MobileLayoutWrapper } from '@/client/components/mobile/LayoutWrapper';
 import { SessionStateProvider } from '@/client/components/common/session-state-provider';
 import { SidebarDataProvider } from '@/client/hooks/chat/omp/session-list';
 
+/**
+ * The mobile and desktop layouts are mutually exclusive screen trees — exactly
+ * one is mounted per load, and `initialIsMobile` is known before the first
+ * render because the server injects it. Keeping the mobile tree out of the
+ * initial bundle is therefore pure win for the desktop (the common case for a
+ * developer console): its subtree moves to this async chunk and is fetched only
+ * when a phone boots, or when the user switches layout by hand at runtime.
+ *
+ * `fallback={null}` is safe rather than a blank flash: `body` already paints
+ * `--theme-canvas`, so the pre-hydration frame and the fallback look identical.
+ */
+const MobileLayoutWrapper = lazy(() =>
+  import('@/client/components/mobile/LayoutWrapper').then((m) => ({ default: m.MobileLayoutWrapper }))
+);
+
 export interface AppProps {
   /** Server-detected mobile verdict, so the first paint needs no UA check. */
   initialIsMobile?: boolean;
@@ -72,10 +87,12 @@ export function App({ initialIsMobile = false, appSettings = {} }: AppProps) {
     return (
       <SessionStateProvider sessionId={sessionId}>
         <SidebarDataProvider>
-          <MobileLayoutWrapper
-            onDesktopToggle={handleSwitchToDesktop}
-            appSettings={appSettings}
-          />
+          <Suspense fallback={null}>
+            <MobileLayoutWrapper
+              onDesktopToggle={handleSwitchToDesktop}
+              appSettings={appSettings}
+            />
+          </Suspense>
         </SidebarDataProvider>
       </SessionStateProvider>
     );

package/src/client/components/common/MarkdownRenderer.tsx

@@ -16,6 +16,7 @@
 import type { TargetedMouseEvent } from 'preact';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
 import { renderMarkdown } from '@/shared/lib/markdown/marked';
+import { hydrateMathBlocks, MATH_PENDING_CLASS, preloadKatex } from '@/shared/lib/markdown/katex';
 import { sanitizeHtml } from '@/shared/lib/markdown/sanitize';
 import { hydrateMermaidBlocks } from '@/shared/lib/markdown/mermaid';
 import { copyToClipboard } from '@/client/hooks/ui/clipboard';
@@ -36,10 +37,45 @@ export function MarkdownRenderer({ content, className = '' }: MarkdownRendererPr
   const html = useMemo(() => {
     if (!content) return '';
     const rendered = renderMarkdown(content);
+    // If the message contains math, start fetching KaTeX during parse rather
+    // than waiting for the post-mount hydration effect — the request overlaps
+    // sanitization and the rest of the render instead of following it.
+    if (rendered.includes(MATH_PENDING_CLASS)) preloadKatex();
     return sanitizeHtml(rendered);
   }, [content, syntaxReady]);
 
   const hasMermaid = html.includes('mermaid-block');
+  const hasMath = html.includes(MATH_PENDING_CLASS);
+
+  // KaTeX is ~522 kB of JS fetched only when a message contains math; the
+  // placeholders emitted by `marked.ts` are swapped for real markup here.
+  useEffect(() => {
+    if (!hasMath || typeof window === 'undefined') return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    let cancelled = false;
+    const hydrate = async () => {
+      if (!container.isConnected) return;
+      await hydrateMathBlocks(container);
+      if (cancelled) return;
+    };
+    void hydrate();
+    // Same reason as the mermaid observer: a timeline re-render can replace the
+    // container's innerHTML with an identical string without this effect
+    // re-running, stranding new placeholders. hydrate() only writes inside the
+    // placeholder elements, so it never re-triggers this observer.
+    const observer = new MutationObserver(() => {
+      const current = containerRef.current;
+      if (current?.isConnected) void hydrateMathBlocks(current);
+    });
+    observer.observe(container, { childList: true });
+
+    return () => {
+      cancelled = true;
+      observer.disconnect();
+    };
+  }, [hasMath, html]);
 
   useIsomorphicLayoutEffect(() => {
     if (!hasMermaid || typeof window === 'undefined') return;

package/src/client/components/layout/desktop-layout/index.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from '@/client/lib/router/search-params';
 import { Group, Panel, type PanelImperativeHandle } from '@/client/components/layout/desktop-layout/resizer';
 import { SessionSidebar } from '@/client/components/layout/session-sidebar/index';
 import { type RightPanelType } from '@/shared/lib/workspace/right-panels';
-import { SettingsModal } from '@/client/components/settings/Modal';
+import { SettingsModal } from '@/client/components/settings/LazyModal';
 import { PanelLeft } from 'lucide-preact';
 import type { SettingsCategoryId } from '@/shared/types';
 import { activeProjectForSession } from '@/shared/lib/workspace/active-project';

package/src/client/components/layout/session-sidebar/Modals.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'preact/hooks';
 import { Clock, Columns, FolderOpen, Home, Maximize2, Plus, Send, Settings2, Terminal, X } from 'lucide-preact';
-import { SettingsModal } from '@/client/components/settings/Modal';
+import { SettingsModal } from '@/client/components/settings/LazyModal';
 import { FolderPicker } from '@/client/components/common/FolderPicker';
 
 export { SettingsModal };

package/src/client/components/mobile/LayoutWrapper.tsx

@@ -7,7 +7,7 @@ import { MobileSessionSidebar } from '@/client/components/mobile/SessionSidebar'
 import { MobileRightSidebar } from '@/client/components/mobile/RightSidebar';
 import { MobileFullEditor } from '@/client/components/mobile/mobile-right-sidebar/FullEditor';
 import { MobileFullDiff } from '@/client/components/mobile/mobile-right-sidebar/FullDiff';
-import { SettingsModal } from '@/client/components/settings/Modal';
+import { SettingsModal } from '@/client/components/settings/LazyModal';
 import { activeProjectForSession } from '@/shared/lib/workspace/active-project';
 import { spawnCwdForNewSession, triggerSessionPrewarm } from '@/shared/lib/omp/session/prewarm';
 import { useSidebarData } from '@/client/hooks/chat/omp/session-list';

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

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Lazy boundary for the settings modal.
+ *
+ * The settings tree is 68 modules plus the ~160 kB `omp-schema.json`, and it is
+ * reached only by a click — yet `Modal.tsx` was imported statically by the
+ * desktop layout, the mobile layout, and the sidebar, so every page load paid
+ * for all of it. Importing through here moves the subtree to its own async
+ * chunk and takes ~84 kB gzip off the initial payload.
+ *
+ * The `isOpen` gate is load-bearing, not cosmetic: `lazy()` starts fetching as
+ * soon as the component renders, even when the wrapped component would render
+ * `null` internally. Without the gate the chunk would be requested at boot and
+ * nothing would be saved.
+ *
+ * All three call sites already own the open state (each layout runs its own
+ * `omp:open-settings` listener), so gating preserves the existing contract. The
+ * unmount is safe for settings values too: `mergeChamberSettings` re-reads the
+ * in-memory snapshot in `lib/settings/client`, which every write updates, not
+ * the stale bootstrap payload.
+ *
+ * `fallback={null}` matches the other lazy dialog boundary
+ * (`tool-renderers/ask-dialog/Lazy.tsx`): the modal is a full-screen overlay
+ * that appears on user intent, so a brief absence reads as the click landing
+ * rather than as a broken surface.
+ */
+
+import { Suspense, lazy } from 'preact/compat';
+import type { SettingsModalProps } from '@/client/components/settings/Modal';
+
+const SettingsModalImpl = lazy(() =>
+  import('@/client/components/settings/Modal').then((m) => ({ default: m.SettingsModal }))
+);
+
+export function SettingsModal({ isOpen, ...rest }: SettingsModalProps) {
+  if (!isOpen) return null;
+  return (
+    <Suspense fallback={null}>
+      <SettingsModalImpl isOpen={isOpen} {...rest} />
+    </Suspense>
+  );
+}

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

@@ -21,7 +21,7 @@ import { TokenUsageSettings } from '@/client/components/settings/categories/Toke
 import { UsageSettings } from '@/client/components/settings/categories/UsageSettings';
 import { NotificationSettings } from '@/client/components/settings/categories/NotificationSettings';
 
-interface SettingsModalProps {
+export interface SettingsModalProps {
   isOpen: boolean;
   onClose: () => void;
   initialCategory?: SettingsCategoryId;

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

@@ -1,11 +1,14 @@
 import type { SetStateAction } from 'preact/compat';
+import { Fragment } from 'preact';
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { Check, ChevronDown, Folder } from 'lucide-preact';
 import type { Attachment, ChatMessageData } from '@/shared/types';
 import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
 import { ChatInput } from '@/client/components/workspace/chat-timeline/chat-input/index';
 import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
+import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter';
 import { GeneratingIndicator } from '@/client/components/workspace/chat-timeline/GeneratingIndicator';
+import { resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
 
 interface EmptyWorkspacePromptProps {
@@ -22,8 +25,9 @@ interface EmptyWorkspacePromptProps {
   appSettings?: Record<string, any>;
   /** Messages of the pending session: rendered above the input so the
    *  optimistic user bubble shows immediately on send (before the omp spawn
-   *  completes and the real session timeline takes over). */
-  localMessages?: ChatMessageData[];
+   *  completes and the real session timeline takes over). Rendered in array
+   *  order — no display-side reordering. */
+  messages?: ChatMessageData[];
   provider?: string;
   providerNames?: Record<string, string>;
   modelName?: string;
@@ -52,7 +56,7 @@ export function EmptyWorkspacePrompt({
   onSend,
   isGenerating,
   appSettings = {},
-  localMessages = [],
+  messages = [],
   provider,
   providerNames,
   modelName,
@@ -77,11 +81,21 @@ export function EmptyWorkspacePrompt({
     return folders?.find(f => f.id === selectedFolderId);
   }, [folders, selectedFolderId]);
 
+  // Run footers are boundary rows: emitted after the run's last row, so a
+  // trailing notice never separates the footer from the next user message.
+  const { streamingIdx, footers } = useMemo(
+    () => ({
+      streamingIdx: streamingRowIndex(messages),
+      footers: resolveRunFooters(messages, isGenerating),
+    }),
+    [messages, isGenerating],
+  );
+
   useEffect(() => {
     if (timelineRef.current) {
       timelineRef.current.scrollTop = timelineRef.current.scrollHeight;
     }
-  }, [localMessages.length]);
+  }, [messages.length]);
 
   return (
     <div className={`flex flex-col h-full bg-canvas ${variant === 'mobile' ? 'px-3 py-4' : 'p-8'} ${className}`}
@@ -89,13 +103,13 @@ export function EmptyWorkspacePrompt({
     >
       <div
         className={`mx-auto w-full max-w-[970px] flex flex-col min-h-0 space-y-3 ${
-          localMessages.length > 0 ? 'flex-1' : 'my-auto justify-center'
+          messages.length > 0 ? 'flex-1' : 'my-auto justify-center'
         }`}
       >
         {/* Workspace Selection Seamless Dropdown (No border, transparent
             background). Hidden once a chat has been sent — the session now has
             a target workspace, so the composer is the only focus. */}
-        {localMessages.length === 0 && (
+        {messages.length === 0 && (
           <div className="relative shrink-0" ref={workspaceRef}>
           <button 
             type="button"
@@ -147,36 +161,36 @@ export function EmptyWorkspacePrompt({
             on send, then the real session (UUID) takes over the ChatTimeline.
             Only shown when there are messages so the empty composer stays
             centered next to the workspace picker. */}
-        {localMessages.length > 0 && (
+        {messages.length > 0 && (
           <div
             ref={timelineRef}
             className="flex-1 min-h-0 overflow-y-auto scroll-smooth overscroll-contain"
           >
             <div className="mx-auto w-full max-w-[970px]">
-              {localMessages.map((msg, idx) => {
-                const prev = localMessages[idx - 1];
-                let lastAiIdx = localMessages.length - 1;
-                while (lastAiIdx >= 0 && localMessages[lastAiIdx].notice) lastAiIdx--;
-                const isLoading = isGenerating && idx === lastAiIdx && msg.role === 'ai';
+              {messages.map((msg, idx) => {
+                const prev = messages[idx - 1];
+                const isLoading = isGenerating && idx === streamingIdx && msg.role === 'ai';
                 const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user';
-                // Notice rows are transparent for footer purposes — the last
-                // real AI message of a run still owns the footer (mirror
-                // ChatTimeline) and the notice itself never gets one.
-                const nextReal = localMessages.slice(idx + 1).find(m => !m.notice);
-                const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
+                const footer = footers[idx];
                 return (
-                  <ChatMessageItem
-                    key={msg.id}
-                    msg={msg}
-                    provider={provider}
-                    providerNames={providerNames}
-                    modelName={modelName}
-                    modelNames={modelNames}
-                    thinkingLevel={sessionThinkingLevel ?? undefined}
-                    isStreaming={isLoading}
-                    footerVisible={isLastAi}
-                    className={isAiFragment ? 'mt-1' : 'mt-8'}
-                  />
+                  <Fragment key={msg.id}>
+                    <ChatMessageItem
+                      msg={msg}
+                      isStreaming={isLoading}
+                      className={isAiFragment ? 'mt-1' : 'mt-8'}
+                    />
+                    {footer && (
+                      <RunFooter
+                        msg={footer.msg}
+                        provider={provider}
+                        providerNames={providerNames}
+                        modelName={modelName}
+                        modelNames={modelNames}
+                        thinkingLevel={sessionThinkingLevel ?? undefined}
+                        durationMs={footer.durationMs}
+                      />
+                    )}
+                  </Fragment>
                 );
               })}
             </div>

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

@@ -8,85 +8,49 @@ import { ToolCallingSection } from '@/client/components/workspace/chat-timeline/
 import { SystemNotice } from '@/client/components/workspace/chat-timeline/SystemNotice';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { AttachmentChips } from '@/client/components/workspace/chat-timeline/AttachmentChips';
-import { AiMessageFooter } from '@/client/components/workspace/chat-timeline/AiMessageFooter';
 import { CopyButton } from '@/client/components/common/CopyButton';
 import { capitalizeFirstLetter } from '@/shared/lib/chat/capitalize';
-import { formatClock, parseTodayLabel } from '@/shared/lib/format/time';
+import { isNoticeRow, messageAnswerText } from '@/shared/lib/chat/notice-row';
+import { formatMessageStamp } from '@/shared/lib/format/time';
 
 interface ChatMessageItemProps {
   msg: ChatMessageData | any;
-  provider?: string;
-  providerNames?: Record<string, string>;
-  modelName?: string;
-  /** id → display-name map from the model catalog; resolves per-message ids. */
-  modelNames?: Record<string, string>;
-  /** Session thinking level shown in the AI footer. */
-  thinkingLevel?: string;
   isStreaming?: boolean;
-  onRetry?: (msgId: string) => void;
   onUndo?: (msgId: string, content?: string) => void;
   onNewChat?: (content: string) => void;
-  /** Render the AI metadata/toolbar footer. Only the last AI message of a
-   *  response run should show it so multi-part JSONL responses do not repeat
-   *  the footer per message. */
-  footerVisible?: boolean;
-  /** Mobile uses a compact provider/model footer with a bottom-sheet menu. */
-  isMobile?: boolean;
 
   /** Extra classes on the root wrapper (e.g. spacing between messages). */
   className?: string;
-  /** Elapsed ms of the whole AI response run — shown as ⏳ duration. */
-  durationMs?: number | null;
   /** Whether the message immediately preceding this one was also an assistant message. */
   isPrevAssistant?: boolean;
 }
 
 export const ChatMessageItem = memo(function ChatMessageItem({
   msg,
-  provider,
-  providerNames,
-  modelName, 
-  modelNames,
-  thinkingLevel,
   isStreaming = false,
-  onRetry, 
-  onUndo, 
+  onUndo,
   onNewChat,
-  footerVisible = true,
-  isMobile = false,
   className = '',
-  durationMs = null,
   isPrevAssistant = false,
 }: ChatMessageItemProps) {
   const isUser = msg.role === 'user';
 
+  /** A notice row renders as a card. When omp diverted the turn's answer into
+   *  `notice` instead, the row is an answer (it kept the turn's own metadata)
+   *  and the notice text is the response — see chat/notice-row.ts. */
+  const isNotice = isNoticeRow(msg);
+  const effectiveContent = isNotice ? msg.content : messageAnswerText(msg);
+
   /** Stable string references for MarkdownRenderer so its internal
    *  useMemo([content]) holds across parent re-renders (streaming frames
    *  replace the timeline array identity every frame). */
-  const userContent = useMemo(() => (typeof msg.content === 'string' ? msg.content.trim() : msg.content), [msg.content]);
-  const assistantContent = useMemo(() => (typeof msg.content === 'string' ? capitalizeFirstLetter(msg.content) : msg.content), [msg.content]);
+  const userContent = useMemo(() => (typeof effectiveContent === 'string' ? effectiveContent.trim() : effectiveContent), [effectiveContent]);
+  const assistantContent = useMemo(() => (typeof effectiveContent === 'string' ? capitalizeFirstLetter(effectiveContent) : effectiveContent), [effectiveContent]);
 
   /** Content is not worth rendering when it is empty or only punctuation
    *  placeholders ("." / "..." etc.) — chunked assistant turns often carry a
    *  lone dot while the real payload lives in tool calls / thinking. */
-  const hasRenderableContent = typeof msg.content === 'string' && /[A-Za-z0-9]/.test(msg.content);
-
-  const formatFooterDate = (value?: string) => {
-    const raw = value || msg.timestamp || msg.date;
-    if (!raw) return '';
-    if (raw.startsWith('Today,')) {
-      return `Today, ${raw.slice('Today,'.length).trim()}`;
-    }
-    // Bare "10:30 AM" timestamp (live path) — resolve against today.
-    if (/^\d{1,2}:\d{2}\s*(AM|PM)$/i.test(raw)) {
-      const parsedMs = parseTodayLabel(`Today, ${raw}`);
-      if (parsedMs !== null) return `Today, ${formatClock(parsedMs)}`;
-    }
-    const date = new Date(raw);
-    if (Number.isNaN(date.getTime())) return '';
-    const day = date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
-    return `${day}, ${formatClock(date)}`;
-  };
+  const hasRenderableContent = typeof effectiveContent === 'string' && /[A-Za-z0-9]/.test(effectiveContent);
 
   const handleNewChat = (e?: TargetedMouseEvent<HTMLElement>) => {
     if (e) e.preventDefault();
@@ -138,7 +102,7 @@ export const ChatMessageItem = memo(function ChatMessageItem({
             ) : (
               <User size={11} className="text-ink/70 shrink-0" />
             )}
-            {formatFooterDate() && <span>{formatFooterDate()}</span>}
+            {formatMessageStamp(msg) && <span>{formatMessageStamp(msg)}</span>}
           </div>
           
           <div className="flex items-center space-x-1">
@@ -197,8 +161,8 @@ export const ChatMessageItem = memo(function ChatMessageItem({
       {/* Main AI Response Container */}
       <div className="w-full space-y-2.5 font-sans leading-relaxed">
         
-        {/* System Notice Alert */}
-        {msg.notice && <SystemNotice notice={msg.notice} />}
+        {/* System Notice Alert (a notice carrying the answer renders as content below) */}
+        {isNotice && <SystemNotice notice={msg.notice} />}
 
         {/* Thinking / Reasoning Accordion */}
         {thinkingData && (
@@ -298,24 +262,6 @@ export const ChatMessageItem = memo(function ChatMessageItem({
           </div>
         )}
       </div>
-      
-      {/* Bottom AI Metadata & Actions Toolbar (Only shown once completed) */}
-      {!isStreaming && footerVisible && (
-        <AiMessageFooter
-          provider={msg.provider || provider}
-          providerNames={providerNames}
-          currentModel={(msg.model ? (modelNames?.[msg.model] ?? msg.model) : '') || modelName || ''}
-          thinkingLevel={msg.thinkingLevel ?? thinkingLevel}
-          dateStr={formatFooterDate()}
-          durationMs={durationMs ?? msg.durationMs}
-          usage={msg.usage}
-          content={msg.content}
-          msgId={msg.id}
-          onRetry={onRetry}
-          onNewChat={onNewChat}
-          isMobile={isMobile}
-        />
-      )}
     </div>
   );
 });

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

@@ -1,8 +1,11 @@
+import { Fragment } from 'preact';
 import { useMemo } from 'preact/hooks';
 import { memo } from 'preact/compat';
 
 import { ChatMessageItem } from '@/client/components/workspace/chat-timeline/MessageItem';
-import { responseRunDurationMs } from '@/shared/lib/chat/duration';
+import { RunFooter } from '@/client/components/workspace/chat-timeline/RunFooter';
+import { isNoticeRow } from '@/shared/lib/chat/notice-row';
+import { previousNonNoticeIndex, resolveRunFooters, streamingRowIndex } from '@/shared/lib/chat/timeline/run-footer';
 import type { ChatMessageData } from '@/shared/types';
 
 export interface MessageListProps {
@@ -22,14 +25,15 @@ export interface MessageListProps {
 
 /**
  * Shared timeline body: the ordered message rows plus the per-run footer
- * (model + duration) ownership rules. Desktop and mobile render the exact same
+ * (model + duration) placement rules. Desktop and mobile render the exact same
  * rows — only the surrounding scroll container differs.
  *
- * Footer ownership: notice rows are transparent for footer purposes, so the
- * last real AI message of a run still owns the footer even when a notice row
- * follows it, and the notice itself never gets one.
+ * Footer placement: the footer is the run's own boundary row, so it renders
+ * after every row the run owns — including notice rows omp wrote at its tail —
+ * and therefore immediately before the next user message. A notice-only
+ * stretch never gets one.
  */
-// Per-row lookups (next/prev non-notice neighbour, run durations) are built in
+// Per-row lookups (previous non-notice neighbour, run footers) are built in
 // one O(n) pass and memoized on `messages`, so a streaming frame renders in
 // O(n) instead of re-scanning the array for every row. `memo` then skips the
 // rows entirely when the props are referentially unchanged.
@@ -46,75 +50,52 @@ export const MessageList = memo(function MessageList({
   onNewChat,
   isMobile = false,
 }: MessageListProps) {
-  const { lastAiIdx, nextNonNotice, prevNonNoticeIdx, durations } = useMemo(() => {
-    const count = messages.length;
-
-    // The streaming AI message is the last non-notice row: notice rows sit above
-    // the turn, so a plain "last item" check would mark the notice as streaming
-    // and render the footer early.
-    let lastAi = count - 1;
-    while (lastAi >= 0 && messages[lastAi].notice) lastAi--;
-
-    // nextNonNotice[idx]: nearest non-notice row strictly AFTER idx (or null).
-    const nextNonNotice: (ChatMessageData | null)[] = new Array(count);
-    let next: ChatMessageData | null = null;
-    for (let i = count - 1; i >= 0; i--) {
-      nextNonNotice[i] = next;
-      if (!messages[i].notice) next = messages[i];
-    }
-
-    // prevNonNoticeIdx[idx]: nearest non-notice row index strictly BEFORE idx.
-    const prevNonNoticeIdx: number[] = new Array(count);
-    let prevIdx = -1;
-    for (let i = 0; i < count; i++) {
-      prevNonNoticeIdx[i] = prevIdx;
-      if (!messages[i].notice) prevIdx = i;
-    }
-
-    // Footer-owning rows resolve their run duration once here (each is O(n) in
-    // the worst case, so doing it inline would be O(n²) overall).
-    const durations: (number | null)[] = new Array(count);
-    for (let i = 0; i < count; i++) {
-      const msg = messages[i];
-      const nextReal = nextNonNotice[i];
-      const ownsFooter = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
-      durations[i] = ownsFooter ? responseRunDurationMs(messages, i) : null;
-    }
-
-    return { lastAiIdx: lastAi, nextNonNotice, prevNonNoticeIdx, durations };
-  }, [messages]);
+  const { streamingIdx, footers, prevNonNoticeIdx } = useMemo(() => {
+    return {
+      // The streaming AI row is the last non-notice row (see streamingRowIndex).
+      streamingIdx: streamingRowIndex(messages),
+      // Runs resolve their footer + run duration once here, keyed by the row
+      // the footer renders after.
+      footers: resolveRunFooters(messages, isGenerating),
+      prevNonNoticeIdx: previousNonNoticeIndex(messages),
+    };
+  }, [messages, isGenerating]);
 
   return (
     <>
       {messages.map((msg, idx) => {
         const prev = messages[idx - 1];
-        const isLoading = isGenerating && idx === lastAiIdx && msg.role === 'ai';
-        const nextReal = nextNonNotice[idx];
-        const isLastAi = msg.role !== 'user' && !msg.notice && (!nextReal || nextReal.role === 'user');
-        const isPrevNotice = Boolean(prev?.notice);
-        const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user' && !isPrevNotice;
+        const isLoading = isGenerating && idx === streamingIdx && msg.role === 'ai';
+        const isAiFragment = msg.role !== 'user' && prev && prev.role !== 'user' && !isNoticeRow(prev);
         const prevRealIdx = prevNonNoticeIdx[idx];
         const prevReal = prevRealIdx >= 0 ? messages[prevRealIdx] : null;
         const isPrevAssistant = Boolean(msg.role !== 'user' && prevReal && prevReal.role !== 'user');
+        const footer = footers[idx];
         return (
-          <ChatMessageItem
-            key={msg.id}
-            msg={msg}
-            provider={provider}
-            providerNames={providerNames}
-            modelName={modelName}
-            modelNames={modelNames}
-            thinkingLevel={thinkingLevel}
-            isStreaming={isLoading}
-            onUndo={onUndo}
-            onRetry={onRetry}
-            onNewChat={onNewChat}
-            footerVisible={isLastAi}
-            durationMs={durations[idx]}
-            isPrevAssistant={isPrevAssistant}
-            isMobile={isMobile}
-            className={msg.notice ? 'mt-3 mb-1' : isAiFragment ? 'mt-1' : 'mt-3'}
-          />
+          <Fragment key={msg.id}>
+            <ChatMessageItem
+              msg={msg}
+              isStreaming={isLoading}
+              onUndo={onUndo}
+              onNewChat={onNewChat}
+              isPrevAssistant={isPrevAssistant}
+              className={isNoticeRow(msg) ? 'mt-3 mb-1' : isAiFragment ? 'mt-1' : 'mt-3'}
+            />
+            {footer && (
+              <RunFooter
+                msg={footer.msg}
+                provider={provider}
+                providerNames={providerNames}
+                modelName={modelName}
+                modelNames={modelNames}
+                thinkingLevel={thinkingLevel}
+                durationMs={footer.durationMs}
+                onRetry={onRetry}
+                onNewChat={onNewChat}
+                isMobile={isMobile}
+              />
+            )}
+          </Fragment>
         );
       })}
     </>