@agimon-ai/doompi-web 0.0.1-alpha.0

package/src/web/app/sessionRuntime.ts

@@ -0,0 +1,189 @@
+import {
+  HISTORY_PAGE_TYPE,
+  HUB_RESYNCED_TYPE,
+  SESSION_BACKLOG_TYPE,
+  SESSION_FRAME_TYPE,
+  SESSION_REMOVED_TYPE,
+  SESSION_UPSERT_TYPE,
+  SESSIONS_SNAPSHOT_TYPE,
+  subscribeFrame,
+  THREAD_BACKLOG_TYPE,
+  THREAD_FRAME_TYPE,
+  unsubscribeFrame,
+} from '../../types/hub.ts';
+import { dispatchChannelFrame, dropPluginSessionData } from '../lib/pluginRegistry.ts';
+import { startProtocolRuntime } from './protocolRuntime.ts';
+import { bindTransport, releaseTransport, sendHubFrame } from '../lib/transport.ts';
+import { createSessionSocket, sessionSocketUrl } from '../lib/wsClient.ts';
+import { claimDialogMenu, clearPendingMenu } from '../stores/menuStore.ts';
+import {
+  applyHistoryPage,
+  applySessionFrame,
+  applyThreadFrame,
+  dropSessionStore,
+  refreshSessionFacts,
+  resetSessionStore,
+  seedHistoryCursor,
+} from '../stores/sessionStore.ts';
+import { dropThreads, resubscribeThreads, threadStoreKey } from '../stores/threadStore.ts';
+import { dropTransientTabs } from '../stores/transientTabsStore.ts';
+import {
+  applySessionBacklog,
+  applySessionRemoved,
+  applySessionsSnapshot,
+  applySessionUpsert,
+  markSocketClosed,
+  sessionsStore,
+} from '../stores/sessionsStore.ts';
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/**
+ * Wires the hub socket to the stores.
+ *
+ * One socket carries every session. The rail runs on hub summaries; the
+ * timeline of the focused session is hydrated by subscribing, which replays
+ * the hub's ring and then streams live frames. Session facts are pulled after
+ * every replay and again once a run settles, because Pi reports model, stats
+ * and commands on request rather than pushing them as events.
+ */
+/** The journal id of the oldest restored entry, which is where paging back resumes. */
+function oldestEntryId(frames: readonly Record<string, unknown>[]): string | null {
+  for (const frame of frames) {
+    if (frame.type !== 'entry_appended') continue;
+    const entry = frame.entry;
+    if (isRecord(entry) && typeof entry.id === 'string') return entry.id;
+  }
+  return null;
+}
+
+export function startSessionRuntime(): () => void {
+  // The hub-side subscription this page currently holds; it dies with the
+  // socket, which is why the snapshot handler re-subscribes.
+  let subscribed: string | null = null;
+  // The transcript comes from Pi's protocol; this socket keeps carrying what
+  // the protocol has no shape for.
+  const protocol = startProtocolRuntime();
+
+  const syncSubscription = (force = false): void => {
+    const { activeId, byId } = sessionsStore.state;
+    const target = activeId !== null && activeId in byId ? activeId : null;
+    protocol.focus(target);
+    if (!force && target === subscribed) return;
+    if (subscribed !== null && subscribed !== target) sendHubFrame(unsubscribeFrame(subscribed));
+    subscribed = target;
+    if (target !== null) sendHubFrame(subscribeFrame(target));
+  };
+
+  const socket = createSessionSocket(sessionSocketUrl(window.location), {
+    onFrame(frame) {
+      switch (frame.type) {
+        // Sync rebuilt the bundle this page is running. Nothing in a loaded
+        // bundle notices its source moved, so the page picks the new one up.
+        case HUB_RESYNCED_TYPE:
+          window.location.reload();
+          return;
+
+        case SESSIONS_SNAPSHOT_TYPE:
+          applySessionsSnapshot(frame);
+          // A snapshot means a fresh socket; any prior subscription died with
+          // the old one.
+          syncSubscription(true);
+          resubscribeThreads();
+          return;
+        case SESSION_UPSERT_TYPE:
+          applySessionUpsert(frame);
+          syncSubscription();
+          return;
+        case SESSION_REMOVED_TYPE: {
+          if (typeof frame.sessionId !== 'string') return;
+          applySessionRemoved(frame);
+          dropSessionStore(frame.sessionId);
+          dropPluginSessionData(frame.sessionId);
+          dropThreads(frame.sessionId);
+          dropTransientTabs(frame.sessionId);
+          if (subscribed === frame.sessionId) subscribed = null;
+          return;
+        }
+        case SESSION_BACKLOG_TYPE: {
+          if (typeof frame.sessionId !== 'string' || !Array.isArray(frame.frames)) return;
+          const sessionId = frame.sessionId;
+          const frames = frame.frames.filter(isRecord);
+          const dropped = typeof frame.dropped === 'number' ? frame.dropped : 0;
+          applySessionBacklog(sessionId, frames.length, dropped);
+          resetSessionStore(sessionId);
+          for (const replayed of frames) applySessionFrame(sessionId, replayed);
+          // Where the backlog starts is where paging back has to continue
+          // from, so the oldest journal id it carried becomes the cursor.
+          seedHistoryCursor(sessionId, oldestEntryId(frames));
+          refreshSessionFacts(sessionId);
+          return;
+        }
+        case HISTORY_PAGE_TYPE: {
+          if (typeof frame.sessionId !== 'string' || !Array.isArray(frame.frames)) return;
+          applyHistoryPage(frame.sessionId, frame.frames.filter(isRecord), {
+            cursor: typeof frame.cursor === 'string' ? frame.cursor : null,
+            hasMore: frame.hasMore === true,
+          });
+          return;
+        }
+        case SESSION_FRAME_TYPE: {
+          if (typeof frame.sessionId !== 'string' || !isRecord(frame.frame)) return;
+          applySessionFrame(frame.sessionId, frame.frame);
+          // A select the bar asked for becomes the bar's popover; the claim is
+          // settled here, at frame time, so no surface renders it twice.
+          if (frame.frame.type === 'extension_ui_request' && frame.frame.method === 'select') {
+            claimDialogMenu(typeof frame.frame.id === 'string' ? frame.frame.id : '');
+          }
+          if (frame.frame.type === 'agent_settled') {
+            clearPendingMenu();
+            refreshSessionFacts(frame.sessionId);
+          }
+          return;
+        }
+        // A thread folds like a session of its own, under a key of its own;
+        // the backlog replaces what the page had, the same as a session's.
+        case THREAD_BACKLOG_TYPE: {
+          if (typeof frame.sessionId !== 'string' || typeof frame.threadId !== 'string') return;
+          if (!Array.isArray(frame.frames)) return;
+          const key = threadStoreKey(frame.sessionId, frame.threadId);
+          resetSessionStore(key);
+          for (const replayed of frame.frames.filter(isRecord)) applyThreadFrame(key, replayed);
+          return;
+        }
+        case THREAD_FRAME_TYPE: {
+          if (typeof frame.sessionId !== 'string' || typeof frame.threadId !== 'string') return;
+          if (!isRecord(frame.frame)) return;
+          applyThreadFrame(threadStoreKey(frame.sessionId, frame.threadId), frame.frame);
+          return;
+        }
+        default:
+          // Any other frame type may be a plugin channel; unclaimed types are
+          // dropped silently the way unknown frames always have been.
+          dispatchChannelFrame(frame);
+          return;
+      }
+    },
+    onOpen() {
+      // The snapshot that follows the hub's hello is the real "connected".
+    },
+    onClose() {
+      subscribed = null;
+      markSocketClosed();
+    },
+  });
+
+  bindTransport((frame) => socket.send(frame));
+  // Focus changes come from routing; the runtime follows them with
+  // subscribe/unsubscribe so features never touch the wire protocol.
+  const subscription = sessionsStore.subscribe(() => syncSubscription());
+
+  return () => {
+    subscription.unsubscribe();
+    protocol.stop();
+    releaseTransport();
+    socket.close();
+  };
+}

package/src/web/app/webPlugins.generated.ts

@@ -0,0 +1,4 @@
+// Generated by src/adapters/webPluginGenerate.ts. Do not edit by hand.
+import type { WebPluginDefinition } from '@agimon-ai/doompi-web-contracts';
+
+export const webPlugins: readonly WebPluginDefinition[] = [];

package/src/web/components/MascotMark.tsx

@@ -0,0 +1,46 @@
+/** The glyph's intrinsic box, tight to the horns and the paws. */
+const VIEW_BOX = '3 2.5 26 25';
+const ASPECT = 26 / 25;
+
+export interface MascotMarkProps {
+  /** Rendered height in pixels; the width follows the glyph's aspect ratio. */
+  size?: number;
+  className?: string;
+}
+
+/**
+ * The DoomPi mascot reduced to a wordmark glyph, so the pi it is built from
+ * can stand in for the "Pi" in DoomPi and the lockup reads DOOM + mark.
+ *
+ * The traced mascot carries over a thousand points and thins to hairlines
+ * below thirty pixels, which is smaller than every place a wordmark sits, so
+ * this is the favicon's geometry without its badge: the same silhouette in
+ * four flat shapes that still reads at twenty. Decorative by itself, because
+ * the lockup around it is what carries the accessible name.
+ */
+export function MascotMark({ size = 24, className }: MascotMarkProps) {
+  return (
+    <svg
+      viewBox={VIEW_BOX}
+      height={size}
+      width={size * ASPECT}
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <g className="fill-doom-yellow">
+        <path d="M7 10Q6.2 4.2 9.3 3q1.1 3.3 2.8 6.6Z" />
+        <path d="M25 10q.8-5.8-2.3-7-1.1 3.3-2.8 6.6Z" />
+      </g>
+      <g className="fill-doom-magenta">
+        <rect x="3.2" y="8.6" width="25.6" height="7.6" rx="3.4" />
+        <rect x="6.9" y="14" width="5.5" height="13" rx="2.5" />
+        <rect x="19.6" y="14" width="5.5" height="13" rx="2.5" />
+      </g>
+      <g className="fill-doom-deep">
+        <circle cx="10.9" cy="12.3" r="1.9" />
+        <circle cx="21.1" cy="12.3" r="1.9" />
+      </g>
+    </svg>
+  );
+}

package/src/web/components/PluginSurface.tsx

@@ -0,0 +1,10 @@
+import { usePluginSlotProps } from '../stores/usePluginSlotProps.ts';
+
+/**
+ * Renders every fill placed into one of the host's slots. Host surfaces put
+ * this where their layout wants plugin content; a slot nobody filled renders
+ * nothing.
+ */
+export function PluginSurface({ slot, sessionId }: { slot: string; sessionId: string | null }) {
+  return <>{usePluginSlotProps(sessionId).renderSlot(slot)}</>;
+}

package/src/web/components/ToolRendererBoundary.tsx

@@ -0,0 +1,32 @@
+import { Component, type ReactNode } from 'react';
+
+interface ToolRendererBoundaryProps {
+  toolName: string;
+  /** Renders the item; `failed` is true once the plugin renderer threw, so the host item stands in. */
+  children: (failed: boolean) => ReactNode;
+}
+
+interface ToolRendererBoundaryState {
+  failed: boolean;
+}
+
+/**
+ * Keeps one plugin's tool renderer from taking the timeline down with it: a
+ * throw during render is logged once and the call falls back to the host's
+ * own item, while every other entry keeps rendering.
+ */
+export class ToolRendererBoundary extends Component<ToolRendererBoundaryProps, ToolRendererBoundaryState> {
+  override state: ToolRendererBoundaryState = { failed: false };
+
+  static getDerivedStateFromError(): ToolRendererBoundaryState {
+    return { failed: true };
+  }
+
+  override componentDidCatch(error: unknown): void {
+    console.error(`web plugin tool renderer for '${this.props.toolName}' threw; showing the host item instead`, error);
+  }
+
+  override render(): ReactNode {
+    return this.props.children(this.state.failed);
+  }
+}

package/src/web/features/activity/ActivityDock.tsx

@@ -0,0 +1,125 @@
+import { Button, EmptyState, Kbd, SectionLabel, StatusBadge } from '@agimon-ai/doompi-web-components';
+import { useStore } from '@tanstack/react-store';
+import { PluginSurface } from '../../components/PluginSurface.tsx';
+import { activityGroups } from '../../lib/composition.ts';
+import { activityGroupSlot, HOST_SLOTS, slotFills } from '../../lib/pluginRegistry.ts';
+import { usePluginSlotProps } from '../../stores/usePluginSlotProps.ts';
+import { useActiveSession } from '../../stores/sessionStore.ts';
+import { sessionsStore } from '../../stores/sessionsStore.ts';
+
+/**
+ * Asynchronous work that outlives the turn that started it.
+ *
+ * Agents, runners, and workflows deliberately live outside the transcript, so
+ * they get a surface that does not scroll away. The host owns only the frame:
+ * which groups exist, their key chips, and what they render come from the
+ * packages that declare them. Each declared group opens the keyed slot
+ * activity.<name>; the sections any plugin registers under that name render
+ * there, in slot order, and a group nobody fills shows the one-line summary
+ * the session's footer publishes.
+ */
+export function ActivityDock({ onClose }: { onClose: () => void }) {
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  const statuses = useActiveSession((state) => state.statuses);
+  const widgets = useActiveSession((state) => state.widgets);
+  const slotProps = usePluginSlotProps(activeId);
+  const groups = activityGroups(statuses, widgets);
+  const busy = groups.filter((group) => group.active).length;
+
+  return (
+    <aside
+      data-testid="activity-dock"
+      className="flex w-[300px] shrink-0 flex-col overflow-hidden border-l border-doom-border bg-doom-rail"
+    >
+      <div className="flex h-12 shrink-0 items-center justify-between border-b border-doom-border px-4">
+        <div className="flex items-center gap-2">
+          <SectionLabel className="text-doom-hi">activity</SectionLabel>
+          {busy > 0 ? (
+            <StatusBadge tone="running" size="xs" data-testid="activity-busy" className="normal-case">
+              {busy} running
+            </StatusBadge>
+          ) : null}
+        </div>
+        <Button variant="ghost" size="xs" data-testid="activity-close" onClick={onClose} className="text-[10px]">
+          hide
+        </Button>
+      </div>
+
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {groups.length === 0 ? (
+          <EmptyState
+            data-testid="activity-empty"
+            className="px-4 py-5"
+            title="nothing supervised yet"
+            description="a package's group appears here once its extension reports in."
+          />
+        ) : (
+          <div className="flex flex-col">
+            {groups.map((group) => (
+              <div
+                key={group.name}
+                data-testid={`activity-${group.name}`}
+                data-active={group.active}
+                className="flex flex-col gap-2 border-b border-doom-border-soft px-3 py-3"
+              >
+                <div className="flex items-center gap-2 px-1">
+                  {/* One marker per head. The glyph says "section", so a group
+                      never reads as one more row among the items beneath it,
+                      and it carries the busy colour the status dot used to:
+                      two marks for one fact is one mark too many. A glyph
+                      rather than an icon because every group is declared by a
+                      plugin the host knows nothing about. */}
+                  <span
+                    aria-hidden
+                    data-active={group.active}
+                    className={`text-[11px] font-bold ${
+                      group.active ? 'animate-pulse text-doom-yellow' : 'text-doom-faint'
+                    }`}
+                  >
+                    #
+                  </span>
+                  <span className="flex-1 text-[11px] font-bold text-doom-text">{group.name}</span>
+                  {group.tab === undefined ? (
+                    <Kbd data-testid={`activity-keys-${group.name}`} className="bg-doom-panel">
+                      {group.keys}
+                    </Kbd>
+                  ) : (
+                    <Button
+                      variant="subtle"
+                      size="xs"
+                      data-testid={`activity-open-${group.name}`}
+                      title={`open the ${group.tab} tab`}
+                      onClick={() => slotProps.openTab(group.tab ?? null)}
+                      className="h-auto px-1.5 py-0.5 text-[8px] font-bold text-doom-violet hover:text-doom-magenta"
+                    >
+                      {group.keys}
+                    </Button>
+                  )}
+                </div>
+                {slotFills(activityGroupSlot(group.name)).length > 0 ? (
+                  slotProps.renderSlot(activityGroupSlot(group.name))
+                ) : (
+                  <p
+                    data-testid={`activity-summary-${group.name}`}
+                    className={`px-1 text-[10px] ${group.active ? 'text-doom-yellow' : 'text-doom-faint'}`}
+                  >
+                    {group.summary || 'idle'}
+                  </p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        <PluginSurface slot={HOST_SLOTS.activity} sessionId={activeId} />
+      </div>
+
+      <div className="border-t border-doom-border px-4 py-3">
+        <span className="text-[9px] leading-relaxed text-doom-faint">
+          each group is rendered by the package that owns it; the session's summary line stands in until that package
+          publishes per-run detail
+        </span>
+      </div>
+    </aside>
+  );
+}

package/src/web/features/connection/RefusedCard.tsx

@@ -0,0 +1,63 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, Spinner } from '@agimon-ai/doompi-web-components';
+import { abbreviateCwd } from '../../lib/sessionSummary.ts';
+import { useActiveSessionMeta } from '../../stores/sessionsStore.ts';
+
+function Detail({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <span className="shrink-0 text-[10px] text-doom-faint">{label}</span>
+      <span className="truncate text-[10px] text-doom-text">{value}</span>
+    </div>
+  );
+}
+
+/**
+ * Shown when the focused session will not take this cockpit.
+ *
+ * doompi-server holds one client at a time so two views cannot fight over the
+ * same agent. The hub keeps retrying underneath, so this explains the wait
+ * rather than offering a button that would do the same thing again. It is not
+ * dismissible for the same reason: nothing behind it would work. Other
+ * sessions' refusals stay in their rail cards; only the focused one earns the
+ * overlay.
+ */
+export function RefusedCard() {
+  const meta = useActiveSessionMeta();
+  if (meta === null || meta.attach !== 'refused') return null;
+
+  return (
+    <Dialog open>
+      <DialogContent
+        width="lg"
+        data-testid="refused-card"
+        aria-describedby={undefined}
+        className="w-[520px] border-doom-red/50"
+        onEscapeKeyDown={(event) => event.preventDefault()}
+        onPointerDownOutside={(event) => event.preventDefault()}
+        onInteractOutside={(event) => event.preventDefault()}
+      >
+        <DialogHeader className="border-doom-red/40 bg-doom-red/10">
+          <DialogTitle data-testid="refused-title" className="text-doom-red">
+            session already attached
+          </DialogTitle>
+          <Spinner className="text-doom-red/70" />
+        </DialogHeader>
+        <div className="flex flex-col gap-3 px-4 py-4">
+          <p className="text-[12px] leading-relaxed text-doom-text">
+            doompi-server holds one client at a time so two views cannot fight over the same agent. Another cockpit is
+            attached to this socket right now.
+          </p>
+          <div className="flex flex-col gap-1.5 rounded border border-doom-border bg-doom-deep px-3 py-2.5">
+            <Detail label="reason" value={meta.reason || 'attach_error'} />
+            <Detail label="socket" value={meta.summary.socketPath} />
+            <Detail label="cwd" value={abbreviateCwd(meta.summary.cwd)} />
+            <Detail label="retry" value="automatic, with backoff" />
+          </div>
+          <p data-testid="refused-hint" className="text-[10px] text-doom-faint">
+            close the other cockpit and this one takes over on the next attempt.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/features/dialogs/DialogOverlay.tsx

@@ -0,0 +1,176 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  handleOptionListKey,
+  Kbd,
+  OptionList,
+  optionListHint,
+  Panel,
+  ShieldIcon,
+  Textarea,
+} from '@agimon-ai/doompi-web-components';
+import { useStore } from '@tanstack/react-store';
+import { useEffect, useState } from 'react';
+import { focusPrompt } from '../../lib/promptFocus.ts';
+import { menuStore } from '../../stores/menuStore.ts';
+import { answerDialogConfirm, answerDialogValue, cancelDialog, useActiveSession } from '../../stores/sessionStore.ts';
+
+/**
+ * Renders the extension UI sub-protocol as a modal.
+ *
+ * The agent blocks on this answer, so the surface is modal and always offers a
+ * way out: an unanswered request would strand the run. A select the user asked
+ * for from the selection bar is that bar's popover instead (the claim is
+ * settled when the frame arrives, see stores/menuStore.ts), so this overlay
+ * leaves it alone.
+ */
+export function DialogOverlay() {
+  const dialog = useActiveSession((state) => state.dialog);
+  const claimed = useStore(menuStore, (state) => state.claimed);
+  const [value, setValue] = useState('');
+  const [cursor, setCursor] = useState(0);
+
+  useEffect(() => {
+    setValue(dialog?.prefill ?? '');
+    setCursor(0);
+  }, [dialog?.id, dialog?.prefill]);
+
+  if (!dialog) return null;
+  if (dialog.method === 'select' && claimed !== null && claimed.dialogId === dialog.id) return null;
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(next) => {
+        if (!next) cancelDialog(dialog.id);
+      }}
+    >
+      <DialogContent
+        width="lg"
+        data-testid="dialog"
+        data-dialog-method={dialog.method}
+        aria-describedby={undefined}
+        // The dialog content is what the overlay focuses, so the option
+        // keyboard is handled here rather than on the list itself.
+        onKeyDown={(event) => {
+          if (dialog.method !== 'select') return;
+          handleOptionListKey(event, {
+            options: dialog.options,
+            cursor,
+            onCursorChange: setCursor,
+            onSelect: (option) => answerDialogValue(dialog.id, option),
+          });
+        }}
+        // The agent pushed this dialog; nothing on the page opened it, so the
+        // keyboard goes back to the composer rather than to the body.
+        onCloseAutoFocus={(event) => {
+          event.preventDefault();
+          focusPrompt();
+        }}
+        className="rounded-[10px] border-doom-edge-magenta"
+      >
+        <DialogHeader className="h-[42px] border-doom-edge-magenta bg-doom-tint-magenta py-0">
+          <DialogTitle data-testid="dialog-title" className="flex items-center gap-2 text-doom-magenta">
+            <ShieldIcon className="h-[13px] w-[13px] shrink-0" />
+            {dialog.title}
+          </DialogTitle>
+          <span className="text-[9px] text-doom-faint">extension · {dialog.method}</span>
+        </DialogHeader>
+
+        <DialogBody>
+          {dialog.message && dialog.method === 'select' ? (
+            <Panel data-testid="dialog-command" className="bg-doom-deep px-3 py-2.5">
+              <div className="flex gap-2">
+                <span className="text-[12px] text-doom-green">$</span>
+                <pre
+                  data-testid="dialog-message"
+                  className="min-w-0 flex-1 whitespace-pre-wrap break-words text-[12px] leading-relaxed text-doom-hi"
+                >
+                  {dialog.message}
+                </pre>
+              </div>
+            </Panel>
+          ) : dialog.message ? (
+            <p data-testid="dialog-message" className="text-[12px] leading-relaxed text-doom-text">
+              {dialog.message}
+            </p>
+          ) : null}
+
+          {dialog.method === 'select' ? (
+            <OptionList
+              options={dialog.options}
+              cursor={cursor}
+              onCursorChange={setCursor}
+              testIdPrefix="dialog-option"
+              onSelect={(option) => answerDialogValue(dialog.id, option)}
+            />
+          ) : null}
+
+          {dialog.method === 'input' || dialog.method === 'editor' ? (
+            <Textarea
+              data-testid="dialog-input"
+              value={value}
+              autoFocus
+              rows={dialog.method === 'editor' ? 5 : 1}
+              placeholder={dialog.placeholder}
+              onChange={(event) => setValue(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' && !event.shiftKey && dialog.method === 'input') {
+                  event.preventDefault();
+                  answerDialogValue(dialog.id, value);
+                }
+              }}
+            />
+          ) : null}
+        </DialogBody>
+
+        <DialogFooter variant="bar" className="h-[34px]">
+          <span data-testid="dialog-hints" className="flex items-center gap-1.5 text-[10px] text-doom-faint">
+            {dialog.method === 'select' ? optionListHint(dialog.options.length) : 'enter confirm'} · <Kbd>esc</Kbd>{' '}
+            cancels and tells the agent
+          </span>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" data-testid="dialog-cancel" onClick={() => cancelDialog(dialog.id)}>
+              cancel
+            </Button>
+            {dialog.method === 'confirm' ? (
+              <>
+                <Button
+                  variant="danger-outline"
+                  size="sm"
+                  data-testid="dialog-deny"
+                  onClick={() => answerDialogConfirm(dialog.id, false)}
+                >
+                  no
+                </Button>
+                <Button
+                  variant="success"
+                  size="sm"
+                  data-testid="dialog-confirm"
+                  onClick={() => answerDialogConfirm(dialog.id, true)}
+                >
+                  yes
+                </Button>
+              </>
+            ) : null}
+            {dialog.method === 'input' || dialog.method === 'editor' ? (
+              <Button
+                variant="primary"
+                size="sm"
+                data-testid="dialog-submit"
+                onClick={() => answerDialogValue(dialog.id, value)}
+              >
+                submit
+              </Button>
+            ) : null}
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}