ompchamber 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "type": "module",
   "engines": {
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@fontsource/fira-code": "^5.3.0",
-    "@google/genai": "^2.21.0",
     "@shikijs/langs": "^4.4.3",
     "@shikijs/themes": "^4.4.3",
     "@tailwindcss/typography": "^0.5.20",
@@ -69,6 +68,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/cli/lib/args.js

@@ -216,6 +216,7 @@ ENVIRONMENT:
   OMPCHAMBER_DATA_DIR     Override the data directory (default: ~/.ompchamber)
   OMPCHAMBER_PORT         Default web server port
   OMPCHAMBER_HOST         Default bind address
+  OMPCHAMBER_OMP_BIN      Path to the omp binary (required; falls back to PATH)
   GITHUB_TOKEN            Raise the GitHub API rate limit for update checks
 
 EXAMPLES:

package/src/cli/lib/commands/serve.js

@@ -10,6 +10,7 @@ import {
 } from '@/cli/lib/runtime.js';
 import { log, ok, warn, fail, printJson, isJson, isQuiet } from '@/cli/lib/output.js';
 import { wireChildProcessLifecycle } from '@/cli/lib/process-lifecycle.js';
+import { ompStartupError } from '@/server/lib/omp/core/startup';
 
 const DEFAULT_PORT = 3000;
 const DEFAULT_HOST = '127.0.0.1';
@@ -45,6 +46,12 @@ export async function run(options, ctx) {
   const quiet = isQuiet();
   const pkgRoot = ctx?.pkgRoot ?? process.cwd();
 
+  // The same gate the server entry applies, run here first so a missing omp
+  // binary fails immediately — with no detached child spawned, no log file to
+  // read and no registry entry left pointing at a process that already exited.
+  const ompError = ompStartupError();
+  if (ompError) fail(ompError);
+
   if (mode === 'prod') {
     const serverEntry = joinPath(pkgRoot, 'dist', 'client', 'index.html');
     // Bun.file().exists() is file-only (false for directories) — correct here,

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