ompchamber 1.1.0 → 1.2.0

package/src/client/components/workspace/btw-panel/AskCard.tsx

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The ask card — the top card of the side-question form.
+ *
+ * It is the form's own entry, not the chat's: the question typed here is always
+ * a question of its own (a new topic), which is why it carries its own `⟳`
+ * (start over) and `✕` (leave the form). The topic history and promotion ride
+ * along here because the form replaced the composer that used to hold them.
+ */
+
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { TargetedKeyboardEvent } from 'preact';
+import { ChevronDown, ExternalLink, RefreshCw, X } from 'lucide-preact';
+import type { BtwTopic } from '@/shared/types';
+import { BtwTopicMenu } from '@/client/components/workspace/btw-panel/TopicMenu';
+
+export interface BtwAskCardProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  /** `⟳` — clear the question and fall back to the newest topic. */
+  onNewQuestion: () => void;
+  /** `✕` — leave the side-question form. */
+  onClose: () => void;
+  /** A side answer is streaming: starting over waits for it. */
+  running: boolean;
+  topics: BtwTopic[];
+  activeTopicId: string | null;
+  onSelectTopic: (id: string) => void;
+  onDeleteTopic: (id: string) => void;
+  canPromote: boolean;
+  onPromote: () => void;
+}
+
+const GHOST_BUTTON =
+  'p-1.5 rounded text-ink/45 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-ink/45';
+
+export function BtwAskCard({
+  value,
+  onChange,
+  onSubmit,
+  onNewQuestion,
+  onClose,
+  running,
+  topics,
+  activeTopicId,
+  onSelectTopic,
+  onDeleteTopic,
+  canPromote,
+  onPromote,
+}: BtwAskCardProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  // Grow with the text and collapse again once it is submitted or cleared.
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+      return;
+    }
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    if (event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <div className="bg-paper border border-ink/20 rounded-2xl shadow-sm flex items-center gap-1 pl-1.5 pr-2 py-1 focus-within:border-ink transition-colors">
+      <button
+        type="button"
+        onClick={() => {
+          onNewQuestion();
+          // The button took the focus; asking again means typing again.
+          textareaRef.current?.focus();
+        }}
+        disabled={running}
+        className={GHOST_BUTTON}
+        aria-label="New side question"
+        title="New side question"
+      >
+        <RefreshCw size={14} strokeWidth={2} />
+      </button>
+
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        onInput={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Ask your question"
+        aria-label="Ask your question"
+        className="flex-1 min-w-0 bg-transparent text-[13px] text-ink placeholder-ink/40 resize-none outline-none py-1.5 max-h-32 leading-6"
+      />
+
+      {topics.length > 0 && (
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => setMenuOpen((open) => !open)}
+            className={GHOST_BUTTON}
+            aria-label="Side question history"
+            title="Side question history"
+            aria-expanded={menuOpen}
+            data-btw-menu-anchor=""
+          >
+            <ChevronDown size={14} strokeWidth={2} />
+          </button>
+          {menuOpen && (
+            <BtwTopicMenu
+              topics={topics}
+              activeTopicId={activeTopicId}
+              onSelectTopic={onSelectTopic}
+              onDeleteTopic={onDeleteTopic}
+              onCloseMenu={() => setMenuOpen(false)}
+            />
+          )}
+        </div>
+      )}
+
+      {canPromote && (
+        <button
+          type="button"
+          onClick={onPromote}
+          className={GHOST_BUTTON}
+          aria-label="Promote answer into chat"
+          title="Promote answer into chat"
+        >
+          <ExternalLink size={14} strokeWidth={2} />
+        </button>
+      )}
+
+      <button
+        type="button"
+        onClick={onClose}
+        className={GHOST_BUTTON}
+        aria-label="Close side questions"
+        title="Close side questions"
+      >
+        <X size={14} strokeWidth={2} />
+      </button>
+    </div>
+  );
+}

package/src/client/components/workspace/btw-panel/Composer.tsx

@@ -0,0 +1,181 @@
+/**
+ * BTW panel composer card — the side question's own input.
+ *
+ * Pure presentation: text, attachments and the running turn are owned by the
+ * parent; this file only autosizes the textarea, reads keys and renders.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import type { TargetedEvent, TargetedKeyboardEvent } from 'preact';
+import { File as FileIcon, Paperclip, Send, Shield, Square, X } from 'lucide-preact';
+import { formatBytes } from '@/shared/lib/format/number';
+import { providerLabel } from '@/shared/lib/models/provider-label';
+
+export interface BtwComposerProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  running: boolean;
+  modelLabel?: string;
+  provider?: string;
+  attachments: { id: string; name: string; size: number }[];
+  onFilesSelected: (files: File[]) => void;
+  onRemoveAttachment: (id: string) => void;
+}
+
+const ICON_BUTTON = 'p-1.5 rounded text-ink/60 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer';
+
+export function BtwComposer({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  running,
+  modelLabel,
+  provider,
+  attachments,
+  onFilesSelected,
+  onRemoveAttachment,
+}: BtwComposerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const canSend = value.trim().length > 0 || attachments.length > 0;
+  const providerText = provider ? providerLabel(provider) : '';
+
+  // The form replaces the chat composer that had focus, so the caret is put
+  // here — the field the form is for, and the one a restored draft is waiting
+  // in — instead of being left on the document body.
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.focus();
+    textarea.setSelectionRange(textarea.value.length, textarea.value.length);
+  }, []);
+
+  // Grow with the content and collapse again when the parent clears `value`
+  // after a submit — `height: auto` first, otherwise the box can only expand.
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  const handleKeyDown = (event: TargetedKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Escape') {
+      event.currentTarget.blur();
+      return;
+    }
+    if (event.key !== 'Enter' || event.shiftKey) return;
+    // IME candidate selection must not submit the question.
+    if (event.isComposing || event.keyCode === 229) return;
+    event.preventDefault();
+    if (canSend) onSubmit();
+  };
+
+  const handleFileSelect = (event: TargetedEvent<HTMLInputElement>) => {
+    const files = event.currentTarget.files;
+    if (files && files.length > 0) onFilesSelected(Array.from(files));
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  return (
+    <div className="bg-paper border border-ink/20 rounded-2xl shadow-lg flex flex-col overflow-hidden">
+      <textarea
+        ref={textareaRef}
+        rows={1}
+        value={value}
+        onInput={(event) => onChange(event.currentTarget.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Ask in this btw session..."
+        className="w-full bg-transparent text-[13px] text-ink placeholder-ink/40 resize-none outline-none px-3.5 pt-3 pb-1 max-h-32"
+      />
+
+      {attachments.length > 0 && (
+        <div className="flex items-center flex-wrap gap-1.5 px-3 pt-2">
+          {attachments.map((attachment) => (
+            <div
+              key={attachment.id}
+              className="relative flex items-center bg-canvas border border-ink/10 rounded-md p-0.5 pr-6 text-xs"
+            >
+              <div className="w-6 h-6 flex items-center justify-center bg-ink/5 rounded-sm mr-1.5 text-ink/60">
+                <FileIcon size={12} strokeWidth={2} />
+              </div>
+              <span className="truncate max-w-[120px] font-mono text-[10px] text-ink/80">{attachment.name}</span>
+              {formatBytes(attachment.size) && (
+                <span className="ml-1.5 font-mono text-[10px] text-ink/40">{formatBytes(attachment.size)}</span>
+              )}
+              <button
+                type="button"
+                onClick={() => onRemoveAttachment(attachment.id)}
+                className="absolute right-0.5 top-1/2 -translate-y-1/2 p-0.5 text-ink/40 hover:text-error hover:bg-error/10 rounded transition-colors cursor-pointer"
+                aria-label={`Remove ${attachment.name}`}
+                title="Remove attachment"
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between px-2 pb-2">
+        <div className="flex items-center gap-0.5">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className={ICON_BUTTON}
+            aria-label="Attach files"
+            title="Attach files"
+          >
+            <Paperclip size={14} strokeWidth={2} />
+          </button>
+
+          <span
+            className="p-1.5 text-ink/40"
+            aria-label="Side answers never use tools"
+            title="Side answers never use tools"
+          >
+            <Shield size={14} strokeWidth={2} />
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2 min-w-0">
+          {(providerText || modelLabel) && (
+            <div className="flex items-baseline gap-1.5 min-w-0">
+              {providerText && <span className="text-[10px] text-ink/40 shrink-0">{providerText}</span>}
+              {modelLabel && <span className="text-[11px] text-ink/70 truncate">{modelLabel}</span>}
+            </div>
+          )}
+
+          {running ? (
+            <button
+              type="button"
+              onClick={onStop}
+              className="bg-ink text-canvas rounded p-1.5 cursor-pointer"
+              aria-label="Stop side answer"
+              title="Stop side answer"
+            >
+              <Square size={14} strokeWidth={2} />
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={onSubmit}
+              disabled={!canSend}
+              className="bg-ink text-canvas hover:bg-ink/80 rounded p-1.5 cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed"
+              aria-label="Send side question"
+              title="Send side question"
+            >
+              <Send size={14} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <input type="file" accept="image/*" multiple className="hidden" ref={fileInputRef} onChange={handleFileSelect} />
+    </div>
+  );
+}

package/src/client/components/workspace/btw-panel/Messages.tsx

@@ -0,0 +1,100 @@
+/**
+ * BTW panel message body — the scrollable turn list of the active topic.
+ *
+ * Pure presentation: the parent streams `liveAnswer` in and this file only
+ * decides which text is current. No fetch, no session state.
+ */
+
+import { useEffect, useMemo, useRef } from 'preact/hooks';
+import type { BtwTopic, BtwTurnStatus } from '@/shared/types/btw';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+
+export interface BtwMessagesProps {
+  topic: BtwTopic | null;
+  /** Partial text of the running turn ('' when none). */
+  liveAnswer: string;
+  /** Panel-level error line, surfaced above the turns. */
+  error: string | null;
+}
+
+/** Status line under an answer that is not `complete`. */
+function AnswerStatus({ status }: { status: BtwTurnStatus }) {
+  if (status === 'complete') return null;
+
+  if (status === 'running') {
+    return (
+      <div className="flex items-center gap-1.5 text-[11px] text-ink/50">
+        <span className="w-1.5 h-1.5 rounded-full bg-ink/40 animate-pulse" />
+        <span>Thinking…</span>
+      </div>
+    );
+  }
+
+  if (status === 'cancelled') {
+    return <div className="text-[11px] text-ink/50">Cancelled</div>;
+  }
+
+  return <div className="text-[11px] text-error">{status === 'failed' ? 'Failed' : 'Interrupted'}</div>;
+}
+
+export function BtwMessages({ topic, liveAnswer, error }: BtwMessagesProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const turns = topic?.turns ?? [];
+
+  // Cheap scroll signal: any visible text growth (stream delta, new question,
+  // topic switch) changes this number.
+  const renderedLength = useMemo(
+    () => turns.reduce((total, turn) => total + turn.question.length + turn.answer.length, 0) + liveAnswer.length,
+    [turns, liveAnswer],
+  );
+
+  useEffect(() => {
+    const body = scrollRef.current;
+    if (body) body.scrollTop = body.scrollHeight;
+  }, [renderedLength]);
+
+  const lastIndex = turns.length - 1;
+
+  return (
+    <div
+      ref={scrollRef}
+      className="flex-1 min-h-0 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static px-4 py-3 space-y-4"
+    >
+      {error && (
+        <div className="bg-error/10 border border-error/30 text-error rounded-lg px-3 py-2 text-[12px]">{error}</div>
+      )}
+
+      {topic === null ? (
+        <div className="flex h-full items-center justify-center px-4 text-center text-[12px] text-ink/50">
+          Start a side question — the answer stays out of this chat's transcript.
+        </div>
+      ) : (
+        turns.map((turn, index) => {
+          // The streamed text wins while the newest turn is live: either it is
+          // still running, or it already outgrew the last flushed answer.
+          const streaming =
+            index === lastIndex &&
+            liveAnswer !== '' &&
+            (turn.status === 'running' || liveAnswer.length > turn.answer.length);
+          const answer = streaming ? liveAnswer : turn.answer;
+
+          return (
+            <div key={turn.index} className="space-y-2">
+              <div className="ml-auto max-w-[85%] w-fit bg-ink/[0.06] border border-ink/10 rounded-xl px-3.5 py-2.5 text-[13px] text-ink break-words">
+                <MarkdownRenderer content={turn.question} />
+              </div>
+
+              {answer !== '' && (
+                <div className="px-1 text-[13px] text-ink leading-relaxed">
+                  <MarkdownRenderer content={answer} />
+                </div>
+              )}
+
+              <AnswerStatus status={turn.status} />
+            </div>
+          );
+        })
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/btw-panel/TopicMenu.tsx

@@ -0,0 +1,106 @@
+/**
+ * BTW topic history dropdown — the ⌄ menu of the panel header.
+ *
+ * Pure presentation: it renders the topic list and reports dismissal; the open
+ * state lives in `BtwHeader`.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import { Trash2 } from 'lucide-preact';
+import type { BtwTopic, BtwTurnStatus } from '@/shared/types/btw';
+
+export interface BtwTopicMenuProps {
+  topics: BtwTopic[];
+  activeTopicId: string | null;
+  onSelectTopic: (id: string) => void;
+  /** Drop a topic and its transcript — a topic copies the parent session, so
+   *  history nobody will reopen is real disk. */
+  onDeleteTopic: (id: string) => void;
+  /** Called after a selection and on outside click / Escape. */
+  onCloseMenu: () => void;
+}
+
+const STATUS_LABEL: Record<BtwTurnStatus, string> = {
+  running: 'thinking…',
+  complete: 'complete',
+  cancelled: 'cancelled',
+  failed: 'failed',
+  interrupted: 'interrupted',
+};
+
+/** `<turn count> · <status of the newest turn>` — the one-line topic summary. */
+export function BtwTopicMenu({ topics, activeTopicId, onSelectTopic, onDeleteTopic, onCloseMenu }: BtwTopicMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Outside dismissal. Pointerdown (not click) so the menu is gone before the
+  // underlying target reacts; the header toggle is exempt — it owns its own
+  // open state and would otherwise re-open what this handler just closed.
+  useEffect(() => {
+    const onPointerDown = (event: globalThis.PointerEvent) => {
+      const target = event.target instanceof Element ? event.target : null;
+      if (menuRef.current?.contains(target)) return;
+      if (target?.closest('[data-btw-menu-anchor]')) return;
+      onCloseMenu();
+    };
+    document.addEventListener('pointerdown', onPointerDown);
+    return () => document.removeEventListener('pointerdown', onPointerDown);
+  }, [onCloseMenu]);
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === 'Escape') onCloseMenu();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [onCloseMenu]);
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Side question history"
+      className="absolute left-0 top-full mt-1 z-50 bg-paper border border-ink/15 rounded-lg shadow-xl min-w-[280px] max-h-72 overflow-y-auto scrollbar-overlay-container scrollbar-overlay-static p-1"
+    >
+      {topics.length === 0 && (
+        <div className="px-2.5 py-2 text-[12px] text-ink/50">No side questions yet.</div>
+      )}
+
+      {topics.map((topic) => {
+        const count = topic.turns.length;
+        const newest = topic.turns[count - 1];
+
+        return (
+          <div
+            key={topic.id}
+            className={`group flex items-center rounded ${topic.id === activeTopicId ? 'bg-ink/5' : 'hover:bg-ink/5'}`}
+          >
+            <button
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                onSelectTopic(topic.id);
+                onCloseMenu();
+              }}
+              className="flex-1 min-w-0 text-left px-2.5 py-2 rounded cursor-pointer"
+            >
+              <div className="truncate text-[12px] text-ink">{topic.title}</div>
+              <div className="text-[11px] text-ink/50">
+                {count} turn{count === 1 ? '' : 's'}
+                {newest ? ` · ${STATUS_LABEL[newest.status]}` : ''}
+              </div>
+            </button>
+            <button
+              type="button"
+              onClick={() => onDeleteTopic(topic.id)}
+              className="p-1.5 mr-1 rounded text-ink/40 opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:text-error hover:bg-error/10 transition-colors cursor-pointer"
+              aria-label={`Delete side question: ${topic.title}`}
+              title="Delete this side question"
+            >
+              <Trash2 size={12} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/client/components/workspace/btw-panel/attachments.ts

@@ -0,0 +1,80 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Attachment handling for the side composer.
+ *
+ * A side question reaches the model with images only — no text files and no
+ * tools (the prompt says so, and the child runs `--no-tools`), so an
+ * attachment that cannot be an image payload is not offered in the first
+ * place. The file picker is `accept="image/*"`; this reads what it returns.
+ */
+
+import type { AgentImage } from '@/shared/types';
+
+/** An attachment held by the side composer until it is sent. */
+export interface BtwAttachment {
+  id: string;
+  name: string;
+  size: number;
+  dataBase64?: string;
+}
+
+function readImage(file: File): Promise<string | undefined> {
+  const { promise, resolve } = Promise.withResolvers<string | undefined>();
+  const reader = new FileReader();
+  reader.onload = () => {
+    const result = typeof reader.result === 'string' ? reader.result : '';
+    const comma = result.indexOf(',');
+    resolve(comma >= 0 ? result.slice(comma + 1) : undefined);
+  };
+  reader.onerror = () => resolve(undefined);
+  reader.readAsDataURL(file);
+  return promise;
+}
+
+/** Read picked files into attachments, keeping only images. */
+export async function readBtwAttachments(files: File[]): Promise<BtwAttachment[]> {
+  const images = files.filter((file) => file.type.startsWith('image/'));
+  return Promise.all(
+    images.map(async (file) => {
+      const dataBase64 = await readImage(file);
+      return {
+        id: `btw-${file.name}-${file.size}-${file.lastModified}`,
+        name: file.name,
+        size: file.size,
+        ...(dataBase64 ? { dataBase64 } : {}),
+      };
+    }),
+  );
+}
+
+/** The model payload for an ask — images only, base64 already read. */
+export function btwImagesFrom(attachments: BtwAttachment[]): AgentImage[] {
+  return attachments
+    .filter((attachment): attachment is BtwAttachment & { dataBase64: string } => typeof attachment.dataBase64 === 'string')
+    .map((attachment) => ({
+      type: 'image' as const,
+      data: attachment.dataBase64,
+      mimeType: mimeTypeOf(attachment.name),
+    }));
+}
+
+const MIME_BY_EXTENSION: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  gif: 'image/gif',
+  webp: 'image/webp',
+  bmp: 'image/bmp',
+  svg: 'image/svg+xml',
+  avif: 'image/avif',
+};
+
+function mimeTypeOf(name: string): string {
+  const dot = name.lastIndexOf('.');
+  const extension = dot >= 0 ? name.slice(dot + 1).toLowerCase() : '';
+  return MIME_BY_EXTENSION[extension] ?? 'image/png';
+}