ompchamber 1.1.0 → 1.2.1

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

@@ -6,6 +6,8 @@ interface EditorToolbarProps {
   wordWrap: boolean;
   isMd: boolean;
   isPreview: boolean;
+  /** Raster image: no text to save or wrap, and zoom belongs to the picture. */
+  isImage?: boolean;
   onSave: () => void;
   onTogglePreview: () => void;
   onToggleWordWrap: () => void;
@@ -22,6 +24,7 @@ export function EditorToolbar({
   wordWrap,
   isMd,
   isPreview,
+  isImage = false,
   onSave,
   onTogglePreview,
   onToggleWordWrap,
@@ -40,22 +43,24 @@ export function EditorToolbar({
 
       {/* Right actions */}
       <div className="flex items-center space-x-3 text-ink/40">
-        <div className="flex items-center pr-3 border-r border-ink/10">
-          <button
-            type="button"
-            onClick={onSave}
-            className="flex items-center justify-center rounded hover:bg-ink/5 transition-colors"
-            title="Save file (Ctrl+S)"
-          >
-            {saveStatus === 'saving' ? (
-              <Save size={14} className="text-amber-500 animate-pulse" />
-            ) : saveStatus === 'saved' ? (
-              <Check size={14} className="text-success" />
-            ) : (
-              <Save size={14} className="hover:text-ink cursor-pointer" />
-            )}
-          </button>
-        </div>
+        {!isImage && (
+          <div className="flex items-center pr-3 border-r border-ink/10">
+            <button
+              type="button"
+              onClick={onSave}
+              className="flex items-center justify-center rounded hover:bg-ink/5 transition-colors"
+              title="Save file (Ctrl+S)"
+            >
+              {saveStatus === 'saving' ? (
+                <Save size={14} className="text-amber-500 animate-pulse" />
+              ) : saveStatus === 'saved' ? (
+                <Check size={14} className="text-success" />
+              ) : (
+                <Save size={14} className="hover:text-ink cursor-pointer" />
+              )}
+            </button>
+          </div>
+        )}
 
         {isMd && (
           <div onClick={onTogglePreview} className="flex items-center pr-3 border-r border-ink/10">
@@ -67,14 +72,18 @@ export function EditorToolbar({
           </div>
         )}
 
-        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
-          <WrapText size={14} className={`cursor-pointer ${wordWrap ? 'text-ink' : 'hover:text-ink'}`} onClick={onToggleWordWrap} />
-        </div>
+        {!isImage && (
+          <>
+            <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
+              <WrapText size={14} className={`cursor-pointer ${wordWrap ? 'text-ink' : 'hover:text-ink'}`} onClick={onToggleWordWrap} />
+            </div>
 
-        <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
-          <ZoomOut size={14} className="hover:text-ink cursor-pointer" onClick={onZoomOut} />
-          <ZoomIn size={14} className="hover:text-ink cursor-pointer" onClick={onZoomIn} />
-        </div>
+            <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
+              <ZoomOut size={14} className="hover:text-ink cursor-pointer" onClick={onZoomOut} />
+              <ZoomIn size={14} className="hover:text-ink cursor-pointer" onClick={onZoomIn} />
+            </div>
+          </>
+        )}
 
         <div className="flex items-center space-x-2 pr-3 border-r border-ink/10">
           <Copy size={14} className="hover:text-ink cursor-pointer" onClick={onCopy} />

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

@@ -5,6 +5,7 @@ import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 import { useScrollbarFade, scrollbarFadeClass } from '@/client/hooks/ui/scrollbar-fade';
 import { EditorTabs } from '@/client/components/workspace/editor/Tabs';
 import { EditorToolbar } from '@/client/components/workspace/editor/Toolbar';
+import { ImageViewer } from '@/client/components/common/image-viewer';
 import { getDefaultContent } from '@/shared/lib/code/editor-utils';
 import { DiffPanel } from '@/client/components/workspace/diff-panel';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
@@ -134,6 +135,7 @@ export function Editor({
               wordWrap={wordWrap}
               isMd={isMd}
               isPreview={isPreview}
+              isImage={editor.isImage}
               onSave={editor.saveNow}
               onTogglePreview={togglePreview}
               onToggleWordWrap={() => setWordWrap(!wordWrap)}
@@ -144,42 +146,49 @@ export function Editor({
               onToggleMaximize={() => setIsMaximized(!isMaximized)}
             />
 
-            <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
-              {(isMd && isPreview) ? (
-                <div className="p-6 prose prose-sm max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
-                  <MarkdownRenderer content={currentContent} />
-                </div>
-              ) : (
-                <CodeSurface
-                  value={currentContent}
-                  onValueChange={editor.onChange}
-                  language={editor.language}
-                  wordWrap={wordWrap}
-                  rootClassName="flex"
-                  gutterClassName="flex flex-col text-right pl-4 pr-3 select-none text-ink/30 font-mono border-r border-ink/10 bg-canvas sticky left-0 z-10"
-                  gutterStyle={{
-                    fontSize: zoomLevel,
-                    paddingTop: 16,
-                    paddingBottom: 16,
-                    lineHeight: 1.5,
-                    fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
-                  }}
-                  gutterLineClassName="min-w-[1.5rem]"
-                  // `min-w-max` keeps a long line intact and lets the panel
-                  // scroll sideways; while wrapping it would instead widen the
-                  // column past the panel, so the toggle had no effect at all.
-                  editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
-                  editorPadding={16}
-                  editorClassName="font-mono focus:outline-none"
-                  editorStyle={{
-                    fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
-                    fontSize: zoomLevel,
-                    lineHeight: 1.5,
-                    minHeight: '100%',
-                  }}
-                />
-              )}
-            </div>
+            {editor.isImage && editor.imageUrl ? (
+              // The picture owns its own pan/zoom, so it must NOT sit inside
+              // the scrolling text container — a wheel there would scroll the
+              // pane instead of zooming the image.
+              <ImageViewer src={editor.imageUrl} name={activeFile.name} className="flex-1 min-h-0" />
+            ) : (
+              <div onScroll={handleScroll} className={`flex-1 overflow-auto bg-paper flex ${scrollbarFadeClass(isScrolling)}`}>
+                {(isMd && isPreview) ? (
+                  <div className="p-6 prose prose-sm max-w-4xl mx-auto font-sans flex-1" style={{ fontSize: `${zoomLevel}px` }}>
+                    <MarkdownRenderer content={currentContent} />
+                  </div>
+                ) : (
+                  <CodeSurface
+                    value={currentContent}
+                    onValueChange={editor.onChange}
+                    language={editor.language}
+                    wordWrap={wordWrap}
+                    rootClassName="flex"
+                    gutterClassName="flex flex-col text-right pl-4 pr-3 select-none text-ink/30 font-mono border-r border-ink/10 bg-canvas sticky left-0 z-10"
+                    gutterStyle={{
+                      fontSize: zoomLevel,
+                      paddingTop: 16,
+                      paddingBottom: 16,
+                      lineHeight: 1.5,
+                      fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                    }}
+                    gutterLineClassName="min-w-[1.5rem]"
+                    // `min-w-max` keeps a long line intact and lets the panel
+                    // scroll sideways; while wrapping it would instead widen the
+                    // column past the panel, so the toggle had no effect at all.
+                    editorWrapperClassName={`flex-1 code-surface ${wordWrap ? 'min-w-0' : 'min-w-max'}`}
+                    editorPadding={16}
+                    editorClassName="font-mono focus:outline-none"
+                    editorStyle={{
+                      fontFamily: '"Fira Code", "JetBrains Mono", "SF Mono", Consolas, monospace',
+                      fontSize: zoomLevel,
+                      lineHeight: 1.5,
+                      minHeight: '100%',
+                    }}
+                  />
+                )}
+              </div>
+            )}
           </>
         )
       ) : (

package/src/client/hooks/chat/btw/index.ts

@@ -0,0 +1,180 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Live BTW state for one session: the topic list, the answer streaming right
+ * now, and the commands that drive them.
+ *
+ * The server owns the state — every frame is a full snapshot or a delta, and
+ * every command answers with the canonical state — so this hook keeps no
+ * merge logic of its own and a reload can never disagree with the server.
+ * The stream is attached only while the panel is open: a side question is a
+ * deliberate action, not background traffic.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { AgentImage, BtwState, StreamTransport } from '@/shared/types';
+import { BtwRequestError, abortBtwQuestion, askBtwQuestion, connectBtwStream, deleteBtwTopic, fetchBtwState, promoteBtwTopic } from '@/shared/lib/chat/btw/client';
+import type { StreamConnection } from '@/shared/lib/chat/omp/transport';
+
+/** Images the side session accepts, already read as base64. */
+export type BtwImage = AgentImage;
+
+/** The turn streaming right now; `text` accumulates its deltas. */
+export interface BtwLiveAnswer {
+  topicId: string;
+  turnIndex: number;
+  text: string;
+}
+
+export interface BtwSessionHandle {
+  state: BtwState | null;
+  live: BtwLiveAnswer | null;
+  error: string | null;
+  /** A command is in flight — the panel disables its actions meanwhile. */
+  busy: boolean;
+  /** Resolves with the canonical state the command produced, or null when it
+   *  was refused (the reason is then in `error`). */
+  ask: (question: string, images?: BtwImage[], topicId?: string) => Promise<BtwState | null>;
+  abort: (topicId: string) => Promise<void>;
+  /** Returns the new session id to open, or null when it was refused. */
+  promote: (topicId: string) => Promise<string | null>;
+  remove: (topicId: string) => Promise<void>;
+  clearError: () => void;
+}
+
+export interface BtwSessionOptions {
+  /** Attach the frame stream (the panel is open). */
+  enabled: boolean;
+  transport: StreamTransport;
+}
+
+export function useBtwSession(sessionId: string | null, options: BtwSessionOptions): BtwSessionHandle {
+  const [state, setState] = useState<BtwState | null>(null);
+  const [live, setLive] = useState<BtwLiveAnswer | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const { enabled, transport } = options;
+
+  // Commands must not be bound to the render that produced them: `/btw <q>`
+  // asks from the same tick that opens the form, before the stream attached and
+  // before this hook re-rendered with a session — a captured `sessionId` there
+  // would be null and the question would silently go nowhere.
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+
+  useEffect(() => {
+    if (!enabled || !sessionId) return;
+
+    const connection: StreamConnection = connectBtwStream(sessionId, transport, {
+      onOpen: () => {},
+      onFrame: (frame) => {
+        switch (frame.type) {
+          case 'btw_state':
+            setState(frame.state);
+            // A settled turn's text is in the snapshot now; holding the live
+            // buffer any longer would keep painting the partial answer.
+            setLive((current) => {
+              if (!current) return null;
+              const topic = frame.state.topics.find((candidate) => candidate.id === current.topicId);
+              const turn = topic?.turns.find((candidate) => candidate.index === current.turnIndex);
+              return turn && turn.status === 'running' ? current : null;
+            });
+            break;
+          case 'btw_delta':
+            setLive((current) =>
+              current && current.topicId === frame.topicId && current.turnIndex === frame.turnIndex
+                ? { ...current, text: current.text + frame.text }
+                : { topicId: frame.topicId, turnIndex: frame.turnIndex, text: frame.text },
+            );
+            break;
+          case 'btw_error':
+            setError(frame.message);
+            break;
+          default:
+            break;
+        }
+      },
+      onClose: () => {},
+    });
+
+    void fetchBtwState(sessionId)
+      .then(setState)
+      .catch((cause: unknown) => setError(cause instanceof Error ? cause.message : String(cause)));
+
+    return () => connection.close();
+  }, [enabled, sessionId, transport]);
+
+  const run = useCallback(
+    async (operation: (id: string) => Promise<BtwState>): Promise<BtwState | null> => {
+      const id = sessionIdRef.current;
+      if (!id) return null;
+      setBusy(true);
+      try {
+        const next = await operation(id);
+        setState(next);
+        return next;
+      } catch (cause) {
+        setError(cause instanceof BtwRequestError || cause instanceof Error ? cause.message : String(cause));
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [],
+  );
+
+  const ask = useCallback(
+    async (question: string, images?: BtwImage[], topicId?: string): Promise<BtwState | null> => {
+      setError(null);
+      const next = await run((id) => askBtwQuestion(id, { question, images, topicId }));
+      setLive(null);
+      if (next && !next.runningTopicId) {
+        setError('The side question was accepted but did not start running.');
+      }
+      return next;
+    },
+    [run],
+  );
+
+  const abort = useCallback(
+    async (topicId: string) => {
+      setError(null);
+      await run((id) => abortBtwQuestion(id, topicId));
+    },
+    [run],
+  );
+
+  const remove = useCallback(
+    async (topicId: string) => {
+      setError(null);
+      await run((id) => deleteBtwTopic(id, topicId));
+    },
+    [run],
+  );
+
+  const promote = useCallback(
+    async (topicId: string): Promise<string | null> => {
+      const id = sessionIdRef.current;
+      if (!id) return null;
+      setError(null);
+      setBusy(true);
+      try {
+        const created = await promoteBtwTopic(id, topicId);
+        return created.sessionId;
+      } catch (cause) {
+        setError(cause instanceof BtwRequestError || cause instanceof Error ? cause.message : String(cause));
+        return null;
+      } finally {
+        setBusy(false);
+      }
+    },
+    [],
+  );
+
+  const clearError = useCallback(() => setError(null), []);
+
+  return { state, live, error, busy, ask, abort, promote, remove, clearError };
+}

package/src/client/hooks/chat/btw/intercept.ts

@@ -0,0 +1,43 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * `/btw [question]` typed into the main composer is the side-question entry
+ * point, not chat text: the panel owns the token (omp's `/btw` is TUI-only, so
+ * nothing downstream would understand it). This module is the whole
+ * interception — recognize the command, carry the composer's images across as
+ * provider payloads, and hand the question to the panel over `omp:btw`.
+ *
+ * It lives beside the rest of the client-side btw state (`hooks/chat/btw/`)
+ * rather than in the send handler: the attachment read goes through the shared
+ * accessors, because `Attachment.file` is absent on every replayed attachment.
+ */
+
+import type { Attachment } from '@/shared/types';
+import { attachmentImage } from '@/shared/lib/chat/attachments';
+
+/** A bare `/btw` opens the form on the current history; anything after it is
+ *  the first question. Case-insensitive, because omp's command tokens are. */
+const BTW_COMMAND_RE = /^\/btw(?:\s+([\s\S]*))?$/i;
+
+/**
+ * Hand a `/btw` draft to the side-question panel. Returns false when the text
+ * is not a btw command, so the caller keeps its normal send path.
+ */
+export function dispatchBtwCommand(text: string, attachments: Attachment[]): boolean {
+  const match = BTW_COMMAND_RE.exec(text);
+  if (!match) return false;
+
+  const images = attachments
+    .map((attachment) => attachmentImage(attachment))
+    .filter((image): image is NonNullable<typeof image> => image !== null);
+
+  window.dispatchEvent(
+    new CustomEvent('omp:btw', {
+      detail: { question: match[1]?.trim() ?? '', ...(images.length ? { images } : {}) },
+    }),
+  );
+  return true;
+}

package/src/client/hooks/chat/btw/mode.ts

@@ -0,0 +1,179 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * BTW mode: the state behind the side-question form.
+ *
+ * Entering the mode replaces the chat composer with the form itself — an ask
+ * card ("Ask your question", always a new topic) above the side session's
+ * composer (follow-ups to the topic in view). The mode flag, both drafts and
+ * the selected topic live in per-session state, so a reload lands back in the
+ * form the user left and leaving the mode loses nothing.
+ *
+ * `/btw [question]` in the main composer is the entry point; a question that
+ * arrived with the command is asked immediately, which is what the TUI does.
+ */
+
+import { useCallback } from 'preact/hooks';
+import type { BtwState, BtwTopic } from '@/shared/types';
+import { useBtwSession, type BtwImage, type BtwLiveAnswer } from '@/client/hooks/chat/btw';
+import { useChamberEvent } from '@/client/hooks/ui/window-event';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import { readStreamTransport } from '@/shared/lib/chat/omp/transport';
+
+/** Question sent when a question arrived carrying only images. */
+const ATTACHMENT_ONLY_QUESTION = 'Describe the attached image.';
+
+export interface BtwMode {
+  open: boolean;
+  topics: BtwTopic[];
+  activeTopic: BtwTopic | null;
+  /** Topic with a turn in flight, if any. */
+  runningTopicId: string | null;
+  /** A command is still in flight — the panel holds its actions meanwhile. */
+  busy: boolean;
+  /** Partial answer of the running turn, when it belongs to the active topic. */
+  liveAnswer: string;
+  error: string | null;
+  askDraft: string;
+  followUpDraft: string;
+  setAskDraft: (value: string) => void;
+  setFollowUpDraft: (value: string) => void;
+  /** Open the form on the current history (bare `/btw`). */
+  enter: () => void;
+  /** Leave the form; drafts and history stay. */
+  exit: () => void;
+  /** ⟳ — clear the question in flight and let the newest topic show. */
+  resetQuestion: () => void;
+  /** Submit the ask card: a question of its own. */
+  submitAsk: () => void;
+  /** Submit the side session's composer: a follow-up to the active topic. */
+  submitFollowUp: (question: string, images?: BtwImage[]) => void;
+  abort: () => void;
+  /** Returns the session id to open, or null when promotion was refused. */
+  promote: () => Promise<string | null>;
+  removeTopic: (topicId: string) => void;
+  selectTopic: (topicId: string) => void;
+  clearError: () => void;
+}
+
+export function useBtwMode(sessionId: string | null, appSettings: Record<string, unknown>): BtwMode {
+  const [open, setOpen] = useSessionState<boolean>('chat.btwOpen', false);
+  const [askDraft, setAskDraft] = useSessionState<string>('chat.btwAsk', '');
+  const [followUpDraft, setFollowUpDraft] = useSessionState<string>('chat.btwFollowUp', '');
+  const [selectedTopicId, setSelectedTopicId] = useSessionState<string | null>('chat.btwTopicId', null);
+  const [, setSearchParams] = useSearchParams();
+
+  // `enabled` only gates the stream: the commands must work the moment the form
+  // opens, which is before the stream has attached.
+  const session = useBtwSession(sessionId, {
+    enabled: open && Boolean(sessionId),
+    transport: readStreamTransport(appSettings),
+  });
+
+  const topics = session.state?.topics ?? [];
+  const activeTopic = topics.find((topic) => topic.id === selectedTopicId) ?? topics[topics.length - 1] ?? null;
+  const runningTopicId = session.state?.runningTopicId ?? null;
+  const live: BtwLiveAnswer | null = session.live && session.live.topicId === activeTopic?.id ? session.live : null;
+
+  const selectNewest = useCallback(
+    (next: BtwState | null) => {
+      if (!next) return;
+      setSelectedTopicId(next.topics[next.topics.length - 1]?.id ?? null);
+    },
+    [setSelectedTopicId],
+  );
+
+  // `/btw [question]` hands the question over; a bare `/btw` only opens the
+  // form, which is the history view.
+  useChamberEvent('omp:btw', (event) => {
+    const detail = (event as CustomEvent<{ question?: string; images?: BtwImage[] }>).detail;
+    const question = detail?.question?.trim();
+    setOpen(true);
+    if (question || detail?.images?.length) {
+      setAskDraft('');
+      void session.ask(question || ATTACHMENT_ONLY_QUESTION, detail?.images).then(selectNewest);
+    }
+  });
+
+  const submitAsk = useCallback(() => {
+    const question = askDraft.trim();
+    if (!question) return;
+    setAskDraft('');
+    void session.ask(question).then(selectNewest);
+  }, [askDraft, session, setAskDraft, selectNewest]);
+
+  const submitFollowUp = useCallback(
+    (question: string, images?: BtwImage[]) => {
+      const text = question.trim();
+      if (!text && !images?.length) return;
+      setFollowUpDraft('');
+      // With no topic in view yet, the side session's first question is the
+      // topic — there is nothing to follow up on.
+      void session.ask(text || ATTACHMENT_ONLY_QUESTION, images, activeTopic?.id).then((next) => {
+        if (!activeTopic) selectNewest(next);
+      });
+    },
+    [activeTopic, session, setFollowUpDraft, selectNewest],
+  );
+
+  const promote = useCallback(async () => {
+    if (!activeTopic) return null;
+    const created = await session.promote(activeTopic.id);
+    if (!created) return null;
+    setOpen(false);
+    setSelectedTopicId(null);
+    setSearchParams((prev) => {
+      const next = new URLSearchParams(prev);
+      next.set('sessionId', created);
+      if (next.has('subagent')) next.delete('subagent');
+      return next;
+    });
+    window.dispatchEvent(new CustomEvent('omp:session-updated', { detail: { sessionId: created } }));
+    return created;
+  }, [activeTopic, session, setOpen, setSelectedTopicId, setSearchParams]);
+
+  const removeTopic = useCallback(
+    (topicId: string) => {
+      if (topicId === selectedTopicId) setSelectedTopicId(null);
+      void session.remove(topicId);
+    },
+    [selectedTopicId, session, setSelectedTopicId],
+  );
+
+  return {
+    open,
+    topics,
+    activeTopic,
+    runningTopicId,
+    busy: session.busy,
+    liveAnswer: live ? live.text : '',
+    error: session.error,
+    askDraft,
+    followUpDraft,
+    setAskDraft,
+    setFollowUpDraft,
+    enter: () => setOpen(true),
+    exit: () => setOpen(false),
+    resetQuestion: () => {
+      setAskDraft('');
+      setSelectedTopicId(null);
+      session.clearError();
+    },
+    submitAsk,
+    submitFollowUp,
+    abort: () => {
+      if (runningTopicId) void session.abort(runningTopicId);
+    },
+    promote,
+    removeTopic,
+    selectTopic: (topicId: string) => {
+      setSelectedTopicId(topicId);
+      session.clearError();
+    },
+    clearError: session.clearError,
+  };
+}