ompchamber 0.7.0 → 1.0.0

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/FrameControl.tsx

@@ -0,0 +1,172 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The control for the dialog omp is currently blocked on.
+ *
+ * The option list is rendered from the FRAME, never from the tool arguments:
+ * omp decorates it on its way out — ` (Recommended)` on the suggested choice,
+ * `Other (type your own)` appended to every question, and whichever label ends a
+ * multi-select sweep — and those exact strings are what omp compares a response
+ * against. Reproducing them locally would only risk sending a label omp does not
+ * recognise.
+ */
+
+import { useEffect, useState } from 'preact/hooks';
+import { Check, CornerDownLeft } from 'lucide-preact';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import { isOtherOption } from '@/shared/lib/chat/ask-questions';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
+
+interface FrameControlProps {
+  frame: ExtensionUiDialogRequest;
+  /** Question picks several options, so every row toggles instead of answering. */
+  multi: boolean;
+  /** Labels already toggled on a multi-select question — display only. */
+  selected: string[];
+  /** Commit a single-choice answer; sent as soon as omp is listening for it. */
+  onAnswer: (value: string) => void;
+  /** Send one multi-select toggle. */
+  onToggle: (label: string) => void;
+  /** Answer a dialog that is not a choice list (confirm / input / editor). */
+  onRespond: (response: ExtensionDialogResponse) => void;
+}
+
+const RECOMMENDED = / \(recommended\)$/i;
+const DONE_ROW = /\bdone\b/i;
+
+export function FrameControl({ frame, multi, selected, onAnswer, onToggle, onRespond }: FrameControlProps) {
+  const [text, setText] = useState('');
+  // A new dialog reuses this component; text left over from the previous one
+  // must not read as an answer the user just typed.
+  useEffect(() => {
+    setText(frame.method === 'editor' ? frame.prefill ?? '' : '');
+  }, [frame.id, frame.method, frame.prefill]);
+
+  if (frame.method === 'confirm') {
+    return (
+      <div className="mt-2 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => onRespond({ confirmed: true })}
+          className="flex cursor-pointer items-center gap-1.5 rounded-md bg-ink px-3 py-1 text-[11.5px] font-semibold text-paper transition-opacity hover:opacity-90"
+        >
+          <Check size={11} />
+          <span>Confirm</span>
+        </button>
+        <button
+          type="button"
+          onClick={() => onRespond({ confirmed: false })}
+          className="cursor-pointer rounded-md border border-ink/15 px-3 py-1 text-[11.5px] font-medium text-ink/70 transition-colors hover:border-ink/30 hover:text-ink"
+        >
+          Decline
+        </button>
+      </div>
+    );
+  }
+
+  if (frame.method === 'input' || frame.method === 'editor') {
+    return (
+      <div className="mt-2 space-y-1.5">
+        {frame.title && <div className="text-[10.5px] text-ink/45">{frame.title}</div>}
+        {frame.method === 'editor' ? (
+          <textarea
+            autoFocus
+            value={text}
+            onChange={(event) => setText(event.currentTarget.value)}
+            rows={4}
+            placeholder={frame.placeholder || 'Type your answer…'}
+            className="w-full rounded-md border border-ink/15 bg-canvas/40 px-2.5 py-1.5 font-mono text-[11.5px] leading-relaxed text-ink outline-none focus:border-ink"
+          />
+        ) : (
+          <input
+            autoFocus
+            value={text}
+            placeholder={frame.placeholder || 'Type your answer…'}
+            onChange={(event) => setText(event.currentTarget.value)}
+            onKeyDown={(event) => {
+              if (event.key !== 'Enter') return;
+              event.preventDefault();
+              onRespond({ value: text });
+            }}
+            className="w-full rounded-md border border-ink/15 bg-canvas/40 px-2.5 py-1.5 text-[11.5px] text-ink outline-none focus:border-ink"
+          />
+        )}
+        <button
+          type="button"
+          onClick={() => onRespond({ value: text })}
+          className="flex cursor-pointer items-center gap-1.5 rounded-md bg-ink px-3 py-1 text-[11.5px] font-semibold text-paper transition-opacity hover:opacity-90"
+        >
+          <span>Submit</span>
+          <CornerDownLeft size={11} className="opacity-70" />
+        </button>
+      </div>
+    );
+  }
+
+  const options = frame.options ?? [];
+  const details = frame.optionDetails ?? [];
+  if (frame.method !== 'select' || options.length === 0) return null;
+
+  return (
+    <div className="mt-2 space-y-1" role={multi ? 'group' : 'radiogroup'}>
+      {options.map((label, index) => {
+        // A single-choice question resolves "Other" to the typed text, so the
+        // row itself is a prompt to type — never a literal answer.
+        if (!multi && isOtherOption(label)) return null;
+        const description = details[index]?.description;
+        const checked = multi && selected.includes(label);
+        const finish = multi && DONE_ROW.test(label);
+        return (
+          <button
+            key={label}
+            type="button"
+            onClick={() => (multi ? (finish ? onRespond({ value: label }) : onToggle(label)) : onAnswer(label))}
+            className={`flex w-full cursor-pointer items-start gap-2 rounded-md border px-2.5 py-1.5 text-left text-[11.5px] transition-colors ${
+              checked
+                ? 'border-ink/30 bg-ink/5 text-ink'
+                : finish
+                  ? 'border-ink/20 bg-canvas/60 font-medium text-ink hover:border-ink/40'
+                  : 'border-ink/8 bg-canvas/30 text-ink/80 hover:border-ink/25 hover:bg-ink/5 hover:text-ink'
+            }`}
+          >
+            <span
+              className={`mt-1 h-3 w-3 shrink-0 ${multi ? 'rounded-[3px]' : 'rounded-full'} border ${
+                checked ? 'border-ink bg-ink' : 'border-ink/30'
+              }`}
+            />
+            <span className="min-w-0 flex-1">
+              <span className="flex items-center gap-1.5 font-medium">
+                <span className="truncate">{label}</span>
+                {RECOMMENDED.test(label) && !multi && (
+                  <span className="shrink-0 rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9px] uppercase tracking-wider text-ink/45">
+                    Suggested
+                  </span>
+                )}
+              </span>
+              {description && (
+                <span className="mt-0.5 block text-[10.5px] leading-relaxed text-ink/50">{description}</span>
+              )}
+            </span>
+          </button>
+        );
+      })}
+
+      {!multi && (
+        <input
+          value={text}
+          placeholder="Other — type your own answer…"
+          onChange={(event) => setText(event.currentTarget.value)}
+          onKeyDown={(event) => {
+            if (event.key !== 'Enter' || !text.trim()) return;
+            event.preventDefault();
+            onAnswer(text.trim());
+          }}
+          className="w-full rounded-md border border-ink/15 bg-canvas/40 px-2.5 py-1.5 text-[11.5px] text-ink outline-none focus:border-ink"
+        />
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/QuestionBlock.tsx

@@ -0,0 +1,155 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One question of an `ask` call, in whichever of its three states it is in:
+ * answered (omp already recorded it), asking (its dialog is live) or still
+ * queued behind an earlier question — omp asks them strictly in order, so the
+ * later ones can only be previewed until their turn comes.
+ */
+
+import { CheckCircle2, Clock } from 'lucide-preact';
+import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import type { AskAnswer, AskQuestion } from '@/shared/lib/chat/ask-questions';
+import { FrameControl } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/FrameControl';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
+
+interface QuestionBlockProps {
+  index: number;
+  total: number;
+  question: AskQuestion;
+  /** Dialogs this question raised, oldest first; the last one is live. */
+  frames: ExtensionUiDialogRequest[];
+  recorded: AskAnswer | null;
+  /** Answer picked locally for a question omp has not reached yet. */
+  draft?: string;
+  /** Unanswered, but omp has already moved past it — its dialog is gone. */
+  passed: boolean;
+  /** Labels toggled locally on a multi-select question. */
+  multiSelected: string[];
+  onAnswer: (value: string) => void;
+  onToggle: (label: string) => void;
+  onRespond: (response: ExtensionDialogResponse) => void;
+}
+
+function answerParts(answer: AskAnswer): string[] {
+  const parts = [...answer.selectedOptions];
+  if (answer.customInput) parts.push(answer.customInput);
+  return parts;
+}
+
+export function QuestionBlock({
+  index,
+  total,
+  question,
+  frames,
+  recorded,
+  draft,
+  passed,
+  multiSelected,
+  onAnswer,
+  onToggle,
+  onRespond,
+}: QuestionBlockProps) {
+  const live = frames.length > 0 ? frames[frames.length - 1] : null;
+  const answered = recorded ? answerParts(recorded) : draft ? [draft] : multiSelected;
+  const asking = Boolean(live) && !recorded && (question.multi || !draft);
+
+  return (
+    <div className="rounded-lg border border-ink/10 bg-paper p-2.5 shadow-xs">
+      <div className="flex items-start gap-2">
+        <span className="mt-px flex h-4 w-4 shrink-0 items-center justify-center rounded bg-ink/5 font-mono text-[9px] font-semibold text-ink/60">
+          {index + 1}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <span className="text-[9px] font-semibold uppercase tracking-wider text-ink/40">
+              {question.header ?? `Question ${index + 1}`}
+            </span>
+            {question.multi && (
+              <span className="rounded-full bg-ink/5 px-1.5 py-px font-mono text-[8.5px] text-ink/45">multi</span>
+            )}
+            {total > 1 && (
+              <span className="ml-auto font-mono text-[9px] text-ink/35">
+                {index + 1}/{total}
+              </span>
+            )}
+          </div>
+
+          <div className="mt-1 text-[12.5px] leading-relaxed text-ink/90 select-text">
+            <MarkdownRenderer content={question.question} />
+          </div>
+
+          {asking && live && (
+            <FrameControl
+              frame={live}
+              multi={question.multi}
+              selected={multiSelected}
+              onAnswer={onAnswer}
+              onToggle={onToggle}
+              onRespond={onRespond}
+            />
+          )}
+
+          {answered.length > 0 && (
+            <div className="mt-2 flex flex-wrap items-center gap-1.5">
+              <CheckCircle2 size={11} className="shrink-0 text-success" />
+              {answered.map((part) => (
+                <span
+                  key={part}
+                  className="rounded-md border border-ink/12 bg-canvas/40 px-2 py-0.5 text-[11.5px] font-medium text-ink select-text"
+                >
+                  {part}
+                </span>
+              ))}
+              {recorded?.timedOut && (
+                <span className="rounded-full bg-ink/5 px-1.5 py-px font-mono text-[9px] text-ink/45">
+                  auto-selected on timeout
+                </span>
+              )}
+            </div>
+          )}
+
+          {!asking && answered.length === 0 && passed && (
+            <div className="mt-2 flex items-center gap-1.5 text-[10.5px] text-ink/45">
+              <CheckCircle2 size={11} className="shrink-0 text-ink/35" />
+              <span>Answered earlier in this run.</span>
+            </div>
+          )}
+
+          {!asking && answered.length === 0 && !passed && (
+            <div className="mt-2 space-y-1 border-t border-ink/6 pt-2">
+              {question.options.map((option, optionIndex) => (
+                <div key={option.label} className="flex items-start gap-2 px-0.5 text-[11.5px] text-ink/45">
+                  <span className="mt-1 h-3 w-3 shrink-0 rounded-full border border-ink/20" />
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate">
+                      {option.label}
+                      {question.recommended === optionIndex && (
+                        <span className="ml-1.5 font-mono text-[9px] uppercase tracking-wider text-ink/35">
+                          suggested
+                        </span>
+                      )}
+                    </span>
+                    {option.description && (
+                      <span className="mt-0.5 block text-[10.5px] leading-relaxed text-ink/35">
+                        {option.description}
+                      </span>
+                    )}
+                  </span>
+                </div>
+              ))}
+              <div className="flex items-center gap-1.5 pt-0.5 text-[10.5px] text-ink/40">
+                <Clock size={10} className="shrink-0" />
+                <span>Waiting for the previous answer…</span>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/drafts.ts

@@ -0,0 +1,113 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Answer bookkeeping for the inline ask card.
+ *
+ * omp asks a multi-question `ask` one question at a time and blocks on each, so
+ * only the question currently in flight owns a dialog. The card still lets the
+ * user answer any of them, in any order: a choice made for a question omp has
+ * not reached yet is held here and released the moment its dialog arrives. Every
+ * sent dialog is remembered by id, so a re-render (or a replayed request after a
+ * page reload) can never answer the same frame twice.
+ *
+ * Multi-select questions are excluded from that queue: omp re-asks them once per
+ * toggle and only the LAST one settles the question, so each click is sent
+ * immediately and only the display state accumulates here.
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import type { AskAnswer, AskQuestion } from '@/shared/lib/chat/ask-questions';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Lazy';
+
+interface UseAskDraftsOptions {
+  toolId: string;
+  questions: AskQuestion[];
+  /** Dialogs per question, oldest first — the last one is the live dialog. */
+  groups: ExtensionUiDialogRequest[][];
+  /** Answers omp already recorded in the tool result, per question. */
+  recorded: (AskAnswer | null)[];
+  respond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
+}
+
+export interface AskDrafts {
+  /** Committed single-choice answers, by question index. */
+  drafts: Record<number, string>;
+  /** Labels the user has toggled on a multi-select question, for display only. */
+  multiSelected: Record<number, string[]>;
+  commit: (index: number, value: string) => void;
+  toggleMulti: (index: number, label: string) => void;
+}
+
+/** The live dialog for a question: the most recent frame it raised. */
+export function liveFrame(groups: ExtensionUiDialogRequest[][], index: number): ExtensionUiDialogRequest | null {
+  const frames = groups[index];
+  return frames && frames.length > 0 ? frames[frames.length - 1] : null;
+}
+
+// omp records answers only in the FINAL tool result, so a reload mid-ask would
+// otherwise repaint every question already answered as still waiting. The draft
+// cache keeps the text across a reload; it is per-tab and dies with the session.
+function draftKey(toolId: string): string {
+  return `ompchamber.ask-draft:${toolId}`;
+}
+
+function loadDrafts(toolId: string): Record<number, string> {
+  try {
+    const raw = sessionStorage.getItem(draftKey(toolId));
+    return raw ? (JSON.parse(raw) as Record<number, string>) : {};
+  } catch {
+    return {};
+  }
+}
+
+export function useAskDrafts({ toolId, questions, groups, recorded, respond }: UseAskDraftsOptions): AskDrafts {
+  const [drafts, setDrafts] = useState<Record<number, string>>(() => loadDrafts(toolId));
+  const [multiSelected, setMultiSelected] = useState<Record<number, string[]>>({});
+  const sentRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    for (let index = 0; index < questions.length; index += 1) {
+      if (recorded[index] || questions[index].multi) continue;
+      const value = drafts[index];
+      if (!value) continue;
+      const frame = liveFrame(groups, index);
+      if (!frame || frame.method !== 'select' || sentRef.current.has(frame.id)) continue;
+      sentRef.current.add(frame.id);
+      respond(frame, { value });
+    }
+  }, [questions, groups, drafts, recorded, respond]);
+
+  useEffect(() => {
+    try {
+      sessionStorage.setItem(draftKey(toolId), JSON.stringify(drafts));
+    } catch {
+      // Storage disabled (private mode): the card still works for this mount.
+    }
+  }, [toolId, drafts]);
+
+  const commit = useCallback((index: number, value: string) => {
+    setDrafts((current) => (current[index] === value ? current : { ...current, [index]: value }));
+  }, []);
+
+  const toggleMulti = useCallback((index: number, label: string) => {
+    const frame = liveFrame(groups, index);
+    if (!frame || sentRef.current.has(frame.id)) return;
+    // One omp dialog per toggle: answering it re-asks the question with the
+    // updated set, so the next click lands on the dialog that just arrived.
+    sentRef.current.add(frame.id);
+    respond(frame, { value: label });
+    setMultiSelected((current) => {
+      const selected = current[index] ?? [];
+      return {
+        ...current,
+        [index]: selected.includes(label) ? selected.filter((item) => item !== label) : [...selected, label],
+      };
+    });
+  }, [groups, respond]);
+
+  return { drafts, multiSelected, commit, toggleMulti };
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/ask-panel/index.tsx

@@ -0,0 +1,92 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Inline card for omp's `ask` tool — the whole conversation with the user, in
+ * the timeline instead of a modal.
+ *
+ * omp asks one question per dialog and blocks on it, so a modal could only ever
+ * show the question in flight and lost every earlier one on the way; the card
+ * keeps all of them in view, marks the ones already answered, and ends as the
+ * summary of what the agent asked and what it was told.
+ */
+
+import { HelpCircle, XCircle } from 'lucide-preact';
+import type { ToolCallData } from '@/shared/types';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import { parseAskQuestions, parseAskResult } from '@/shared/lib/chat/ask-questions';
+import { useAskFrames } from '@/client/hooks/chat/timeline/ask-frames';
+import { liveFrame, useAskDrafts } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/drafts';
+import { QuestionBlock } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel/QuestionBlock';
+import { FallbackOutput } from '@/client/components/workspace/chat-timeline/tool-renderers/shared/FallbackOutput';
+
+// Stable empties: fresh `[]` literals would defeat the question block's props.
+const NO_FRAMES: ExtensionUiDialogRequest[] = [];
+const NO_GROUPS: ExtensionUiDialogRequest[][] = [];
+const NO_LABELS: string[] = [];
+
+export function AskPanel({ tool }: { tool: ToolCallData }) {
+  const questions = parseAskQuestions(tool);
+  const recorded = parseAskResult(tool, questions);
+  const { framesByTool, respond } = useAskFrames();
+  const groups = framesByTool.get(tool.id) ?? NO_GROUPS;
+  const { drafts, multiSelected, commit, toggleMulti } = useAskDrafts({
+    toolId: tool.id,
+    questions,
+    groups,
+    recorded,
+    respond,
+  });
+
+  // An `ask` whose arguments the timeline never saw (or a non-questions shape)
+  // still has a result worth showing.
+  if (questions.length === 0) {
+    return tool.output ? <FallbackOutput text={tool.output} /> : null;
+  }
+
+  const waiting = groups.some((frames, index) => frames.length > 0 && !recorded[index]);
+  // omp asks in order and blocks on each, so the earliest question holding a
+  // dialog is the only open one: everything before it is answered, whether or
+  // not this client still has the text.
+  const askingIndex = groups.findIndex((frames) => frames.length > 0);
+
+  return (
+    <div className="space-y-2">
+      {waiting && (
+        <div className="flex items-center gap-1.5 text-[10.5px] text-ink/50">
+          <HelpCircle size={11} className="shrink-0" />
+          <span>Input needed — the agent is blocked until you answer.</span>
+        </div>
+      )}
+
+      {questions.map((question, index) => (
+        <QuestionBlock
+          key={question.id ?? index}
+          index={index}
+          total={questions.length}
+          question={question}
+          frames={groups[index] ?? NO_FRAMES}
+          recorded={recorded[index] ?? null}
+          draft={drafts[index]}
+          passed={askingIndex !== -1 && index < askingIndex}
+          multiSelected={multiSelected[index] ?? NO_LABELS}
+          onAnswer={(value) => commit(index, value)}
+          onToggle={(label) => toggleMulti(index, label)}
+          onRespond={(response) => {
+            const frame = liveFrame(groups, index);
+            if (frame) respond(frame, response);
+          }}
+        />
+      ))}
+
+      {(tool.status === 'error' || tool.status === 'aborted') && tool.output && (
+        <div className="flex items-start gap-2 rounded-md border border-ink/8 bg-ink/[0.02] px-2.5 py-1.5 text-[10.5px] text-ink/60">
+          <XCircle size={11} className="mt-0.5 shrink-0 text-ink/40" />
+          <span className="font-mono select-text">{tool.output}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/chat-timeline/tool-renderers/{ask-dialog → extension-dialog}/Footer.tsx

@@ -1,6 +1,6 @@
 import { CornerDownLeft, X } from 'lucide-preact';
 
-interface AskDialogFooterProps {
+interface ExtensionDialogFooterProps {
   method: string;
   optionsLength: number;
   selectedOption: string | null;
@@ -9,14 +9,14 @@ interface AskDialogFooterProps {
   onSubmit: () => void;
 }
 
-export function AskDialogFooter({
+export function ExtensionDialogFooter({
   method,
   optionsLength,
   selectedOption,
   hasCustomAnswer = false,
   onCancel,
   onSubmit,
-}: AskDialogFooterProps) {
+}: ExtensionDialogFooterProps) {
   const isSelectDisabled = method === 'select' && !selectedOption && !hasCustomAnswer;
 
   return (

package/src/client/components/workspace/chat-timeline/tool-renderers/{ask-dialog → extension-dialog}/Header.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'preact/compat';
 import { Sparkles, X } from 'lucide-preact';
 
-interface AskDialogHeaderProps {
+interface ExtensionDialogHeaderProps {
   title?: string;
   methodLabel: string;
   badge: string;
@@ -9,13 +9,13 @@ interface AskDialogHeaderProps {
   onCancel: () => void;
 }
 
-export function AskDialogHeader({
+export function ExtensionDialogHeader({
   title,
   methodLabel,
   badge,
   icon,
   onCancel,
-}: AskDialogHeaderProps) {
+}: ExtensionDialogHeaderProps) {
   return (
     <div className="flex items-center justify-between border-b border-ink/8 bg-canvas/40 px-5 py-3.5">
       <div className="flex items-center gap-3 min-w-0">

package/src/client/components/workspace/chat-timeline/tool-renderers/{ask-dialog → extension-dialog}/Lazy.tsx

@@ -1,24 +1,24 @@
 import { Suspense, lazy } from 'preact/compat';
 import type { ExtensionUiDialogRequest } from '@/client/hooks/chat/omp';
-import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index';
+import type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/index';
 
-const AskDialogImpl = lazy(() =>
-  import('@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index').then((m) => ({
-    default: m.AskDialog,
+const ExtensionDialogImpl = lazy(() =>
+  import('@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/index').then((m) => ({
+    default: m.ExtensionDialog,
   }))
 );
 
-interface AskDialogProps {
+interface ExtensionDialogProps {
   request: ExtensionUiDialogRequest;
   onRespond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
 }
 
-export function AskDialog(props: AskDialogProps) {
+export function ExtensionDialog(props: ExtensionDialogProps) {
   return (
     <Suspense fallback={null}>
-      <AskDialogImpl {...props} />
+      <ExtensionDialogImpl {...props} />
     </Suspense>
   );
 }
 
-export type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/index';
+export type { ExtensionDialogResponse } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/index';

package/src/client/components/workspace/chat-timeline/tool-renderers/{ask-dialog → extension-dialog}/SelectBody.tsx

@@ -1,7 +1,7 @@
 import type { RefObject } from 'preact/compat';
 import { CheckCircle2, Circle } from 'lucide-preact';
 
-interface AskDialogSelectBodyProps {
+interface ExtensionDialogSelectBodyProps {
   options: string[];
   optionDetails: { description?: string }[];
   selectedOption: string | null;
@@ -12,7 +12,7 @@ interface AskDialogSelectBodyProps {
   onConfirmOption: (option: string) => void;
 }
 
-export function AskDialogSelectBody({
+export function ExtensionDialogSelectBody({
   options,
   optionDetails,
   selectedOption,
@@ -21,7 +21,7 @@ export function AskDialogSelectBody({
   customInputRef,
   onSelect,
   onConfirmOption,
-}: AskDialogSelectBodyProps) {
+}: ExtensionDialogSelectBodyProps) {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between text-[11px] font-medium tracking-wider text-ink/50 uppercase">