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

package/src/web/features/session/Timeline.tsx

@@ -0,0 +1,382 @@
+import {
+  Badge,
+  Button,
+  ChevronDownIcon,
+  EmptyState,
+  ExternalLinkIcon,
+  Markdown,
+  RefreshIcon,
+  Separator,
+  StreamCursor,
+} from '@agimon-ai/doompi-web-components';
+import { memo, type ReactNode, useLayoutEffect, useRef, useState } from 'react';
+import { useStore } from '@tanstack/react-store';
+import type { Store } from '@tanstack/store';
+import { parseFileMentions } from '../../lib/fileMentions.ts';
+import type { SessionState, TimelineEntry } from '../../lib/sessionModel.ts';
+import { requestOlderHistory, sessionStoreFor, submitMessage, useHasOlderHistory } from '../../stores/sessionStore.ts';
+import { sessionsStore } from '../../stores/sessionsStore.ts';
+import { MentionPreviews } from './MentionPreviews.tsx';
+import { ToolCard } from './ToolCard.tsx';
+
+const SUGGESTIONS = [
+  'review the working tree and summarise the diff',
+  'run the affected nx targets and report failures',
+  'explain how the session socket handshake works',
+];
+
+/** Closer than this to the end counts as reading the latest, so new frames keep the view pinned. */
+const PINNED_THRESHOLD_PX = 200;
+/** Closer than this to the top asks for the window above, before the reader hits the edge. */
+const PAGE_BACK_THRESHOLD_PX = 400;
+/**
+ * Entries at the end that are never skipped.
+ *
+ * Containment makes a skipped entry report its placeholder height, so a
+ * transcript whose tail is contained has a scroll height that is only an
+ * estimate, and following the newest line lands short of it. The tail is also
+ * the part a reader is nearly always looking at, so there is nothing to skip
+ * there; everything above it is what makes a long session slow.
+ */
+const LIVE_TAIL_ENTRIES = 40;
+/** How quickly the viewport catches a moving streaming tail without snapping to it. */
+const FOLLOW_EASING = 0.32;
+const FOLLOW_MIN_STEP_PX = 2;
+
+/**
+ * The speaker's label.
+ *
+ * Leading, it holds a fixed column so every entry's text starts at the same
+ * left edge and the labels line up down the page. Trailing, that column would
+ * only push the label away from the block it names, so it sizes to its own
+ * text and sits beside it.
+ */
+function Gutter({ label, tone, trailing = false }: { label: string; tone: string; trailing?: boolean }) {
+  return (
+    <span className={`shrink-0 text-[10px] font-bold ${trailing ? 'text-left' : 'w-11 pt-0.5 text-right'} ${tone}`}>
+      {label}
+    </span>
+  );
+}
+
+const Entry = memo(function Entry({ entry, sessionId }: { entry: TimelineEntry; sessionId: string | null }) {
+  if (entry.kind === 'user') {
+    return (
+      // What the reader said sits inboard of what the session said, on its own
+      // surface: the transcript is a conversation, and two lanes tell the two
+      // voices apart faster than a gutter label alone.
+      <div data-testid="entry-user" className="flex items-center gap-3 pl-10">
+        <div className="flex min-w-0 flex-1 flex-col gap-2 rounded-md border border-doom-border-soft bg-doom-deep px-3.5 py-2.5 text-[13px] text-doom-hi">
+          <Markdown text={entry.text} />
+          {sessionId ? <MentionPreviews sessionId={sessionId} mentions={parseFileMentions(entry.text)} /> : null}
+        </div>
+        {/* The label trails what the reader said and the session's leads what
+            it answered, so the two voices read as two lanes at a glance. */}
+        <Gutter label="you" tone="text-doom-cyan" trailing />
+      </div>
+    );
+  }
+
+  if (entry.kind === 'assistant') {
+    return (
+      <div data-testid="entry-assistant" data-streaming={entry.streaming} className="flex gap-3">
+        <Gutter label="pi" tone="text-doom-magenta" />
+        <div className="flex min-w-0 flex-1 flex-col gap-2">
+          {entry.thinking ? (
+            <div
+              data-testid="entry-thinking"
+              className="text-[11px] text-doom-violet/80 [&_strong]:text-doom-violet [&_p]:whitespace-pre-wrap"
+            >
+              <Markdown text={entry.thinking} />
+            </div>
+          ) : null}
+          <div className="text-[13px] text-doom-text">
+            <Markdown text={entry.text} />
+            {entry.streaming ? <StreamCursor /> : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (entry.kind === 'tool') {
+    return (
+      <div className="flex gap-3">
+        <Gutter label="tool" tone="text-doom-faint" />
+        <div className="min-w-0 flex-1">
+          <ToolCard entry={entry} sessionId={sessionId} />
+        </div>
+      </div>
+    );
+  }
+
+  if (entry.kind === 'settled') {
+    return (
+      <div data-testid="entry-settled" className="flex items-center gap-3 pl-14">
+        <Separator className="flex-1" />
+        <span className="text-[10px] text-doom-faint">
+          agent settled{entry.tools > 0 ? ` · ${entry.tools} tool${entry.tools === 1 ? '' : 's'}` : ''}
+        </span>
+        <Separator className="flex-1" />
+      </div>
+    );
+  }
+
+  if (entry.kind === 'queued') {
+    return (
+      <div data-testid="entry-queued" className="flex pl-[58px]">
+        <Badge size="md" className="self-start bg-doom-panel text-[10px]">
+          <RefreshIcon className="h-3 w-3 shrink-0 text-doom-cyan" />
+          queued follow-up: &quot;{entry.text}&quot;
+        </Badge>
+      </div>
+    );
+  }
+
+  // A notice: the agent's own aside (a mode switch, a refusal). Only an error
+  // shouts; an informational one reads as a quiet system line.
+  const isError = entry.tone === 'error';
+  return (
+    <div data-testid="entry-notice" data-tone={entry.tone} className="flex gap-3">
+      <Gutter label={isError ? '!' : '·'} tone={isError ? 'text-doom-red' : 'text-doom-faint'} />
+      <p className={`min-w-0 flex-1 break-words text-[12px] ${isError ? 'text-doom-red' : 'text-doom-dim'}`}>
+        {entry.text}
+      </p>
+    </div>
+  );
+});
+
+/**
+ * One transcript, whichever fold it reads: the focused session's own, or a
+ * thread of it. Owns the scroll pinning; the caller owns the empty state and
+ * the session the entries' tool cards act on.
+ */
+export function Transcript({
+  store,
+  sessionId,
+  empty,
+  testId = 'timeline',
+}: {
+  store: Store<SessionState>;
+  sessionId: string | null;
+  empty: ReactNode;
+  testId?: string;
+}) {
+  const entries = useStore(store, (state) => state.entries);
+  const scroller = useRef<HTMLDivElement>(null);
+  // The transcript's height as of the last entry. Whether to follow the newest
+  // line is decided against this rather than against a scroll event, because
+  // an event fires after the fact and a fast run can grow the transcript
+  // before the browser has reported the reader's scroll.
+  const lastHeight = useRef(0);
+  const following = useRef(true);
+  const followFrame = useRef<number | null>(null);
+  const animatingFollow = useRef(false);
+  const [unread, setUnread] = useState(false);
+  const hasOlder = useHasOlderHistory(sessionId);
+  // Where the bottom of the transcript sat before a window was prepended.
+  // Restoring against this is what keeps the reader's place: prepending grows
+  // the scroll height above them, and the browser would otherwise leave the
+  // viewport where it was and the content would appear to jump.
+  const anchor = useRef<{ height: number; top: number } | null>(null);
+  // The first entry's key. A window prepended above the reader changes it, and
+  // nothing else does: an entry arriving at the bottom, or the streaming one
+  // growing, leaves the top of the transcript alone. That is the difference
+  // between holding the reader's place and refusing to follow a live run.
+  const firstId = useRef<string | null>(null);
+
+  const atBottom = (element: HTMLDivElement, height: number): boolean =>
+    element.scrollTop + element.clientHeight >= height - PINNED_THRESHOLD_PX;
+
+  const cancelFollowAnimation = (): void => {
+    if (followFrame.current !== null) cancelAnimationFrame(followFrame.current);
+    followFrame.current = null;
+    animatingFollow.current = false;
+  };
+
+  const followLatest = (): void => {
+    const element = scroller.current;
+    if (!element || followFrame.current !== null) return;
+    animatingFollow.current = true;
+    const step = (): void => {
+      const current = scroller.current;
+      if (!current || !following.current) {
+        followFrame.current = null;
+        animatingFollow.current = false;
+        return;
+      }
+      const target = Math.max(0, current.scrollHeight - current.clientHeight);
+      const distance = target - current.scrollTop;
+      if (Math.abs(distance) <= 1) {
+        current.scrollTop = target;
+        followFrame.current = null;
+        animatingFollow.current = false;
+        setUnread(false);
+        return;
+      }
+      const movement = Math.max(FOLLOW_MIN_STEP_PX, Math.abs(distance) * FOLLOW_EASING);
+      current.scrollTop += Math.sign(distance) * Math.min(Math.abs(distance), movement);
+      followFrame.current = requestAnimationFrame(step);
+    };
+    followFrame.current = requestAnimationFrame(step);
+  };
+
+  const jumpToLatest = (): void => {
+    following.current = true;
+    setUnread(false);
+    followLatest();
+  };
+
+  /** Reaching the bottom by hand is the same as never having left it. */
+  const onScroll = (): void => {
+    const element = scroller.current;
+    if (!element) return;
+    const bottom = atBottom(element, element.scrollHeight);
+    if (!animatingFollow.current) following.current = bottom;
+    if (bottom) setUnread(false);
+    if (element.scrollTop <= PAGE_BACK_THRESHOLD_PX && hasOlder) {
+      anchor.current = { height: element.scrollHeight, top: element.scrollTop };
+      requestOlderHistory(sessionId);
+    }
+  };
+
+  /** Wheel input is explicit intent to leave an in-flight live follow. */
+  const onWheel = (): void => {
+    cancelFollowAnimation();
+    following.current = false;
+  };
+
+  /** Pointer input may become a scrollbar drag; its scroll event decides pinning. */
+  const onPointerDown = (): void => {
+    cancelFollowAnimation();
+  };
+
+  // A different fold starts at the bottom of its transcript.
+  useLayoutEffect(() => {
+    cancelFollowAnimation();
+    lastHeight.current = 0;
+    firstId.current = null;
+    anchor.current = null;
+    following.current = true;
+    setUnread(false);
+    return cancelFollowAnimation;
+  }, [store]);
+
+  useLayoutEffect(() => {
+    const element = scroller.current;
+    if (!element) return;
+    // A prepended window grew the transcript upwards; hold the reader where
+    // they were by moving down by exactly what appeared above them.
+    const held = anchor.current;
+    const prepended = entries.length > 0 && firstId.current !== null && entries[0]?.id !== firstId.current;
+    firstId.current = entries[0]?.id ?? null;
+    if (held !== null && prepended) {
+      anchor.current = null;
+      const grew = element.scrollHeight - held.height;
+      if (grew > 0) {
+        element.scrollTop = held.top + grew;
+        lastHeight.current = element.scrollHeight;
+        return;
+      }
+    }
+    // The first layout starts at the end without animating through the whole
+    // transcript. Later growth chases the live tail one frame at a time.
+    if (lastHeight.current === 0) {
+      element.scrollTop = element.scrollHeight;
+      lastHeight.current = element.scrollHeight;
+      following.current = true;
+      setUnread(false);
+      return;
+    }
+    const shouldFollow = animatingFollow.current || atBottom(element, lastHeight.current);
+    lastHeight.current = element.scrollHeight;
+    if (shouldFollow) {
+      following.current = true;
+      setUnread(false);
+      followLatest();
+      return;
+    }
+    setUnread(true);
+  }, [entries]);
+
+  if (entries.length === 0) return <>{empty}</>;
+
+  return (
+    <div className="relative flex min-h-0 flex-1 flex-col">
+      <div
+        ref={scroller}
+        onScroll={onScroll}
+        onWheel={onWheel}
+        onPointerDown={onPointerDown}
+        data-testid={testId}
+        className="flex flex-1 flex-col gap-[18px] overflow-y-auto px-[26px] py-[22px]"
+      >
+        {entries.map((entry, index) => (
+          // Entries above the live tail are skipped for layout and paint until
+          // they are scrolled near. A long transcript is thousands of markdown
+          // blocks, diffs and tool cards, and laying all of them out on every
+          // scroll is what makes an old session crawl. The browser does this
+          // rather than a measured list in JS, because entry heights vary by an
+          // order of magnitude and a list that guesses them wrong moves the
+          // reader's place under them.
+          <div
+            key={entry.id}
+            className={
+              index < entries.length - LIVE_TAIL_ENTRIES
+                ? '[contain-intrinsic-size:auto_64px] [content-visibility:auto]'
+                : undefined
+            }
+          >
+            <Entry entry={entry} sessionId={sessionId} />
+          </div>
+        ))}
+      </div>
+      {unread ? (
+        <Button
+          variant="subtle"
+          size="sm"
+          data-testid="timeline-jump"
+          onClick={jumpToLatest}
+          className="absolute bottom-3 left-1/2 -translate-x-1/2 border border-doom-border shadow-lg animate-doom-rise"
+        >
+          <ChevronDownIcon className="h-3 w-3" />
+          new activity below
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+
+/** The focused session's conversation; an empty one offers a few openers. */
+export function Timeline() {
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  return (
+    <Transcript
+      store={sessionStoreFor(activeId)}
+      sessionId={activeId}
+      empty={
+        <EmptyState
+          data-testid="timeline"
+          title="no messages yet"
+          description="this session is attached and waiting. anything you send goes straight to the supervised agent."
+        >
+          <div data-testid="timeline-empty" className="mt-2 flex w-full flex-col gap-1.5">
+            {SUGGESTIONS.map((suggestion, index) => (
+              <Button
+                key={suggestion}
+                variant="outline"
+                size="lg"
+                data-testid={`suggestion-${index}`}
+                onClick={() => submitMessage(suggestion)}
+                className="h-auto justify-between bg-doom-panel px-3 py-2 text-left font-normal text-doom-text"
+              >
+                <span className="flex-1 truncate">{suggestion}</span>
+                <ExternalLinkIcon className="h-3 w-3 shrink-0 text-doom-faint" />
+              </Button>
+            ))}
+          </div>
+        </EmptyState>
+      }
+    />
+  );
+}

package/src/web/features/session/ToolCard.tsx

@@ -0,0 +1,79 @@
+import {
+  collapseLines,
+  MessageItem,
+  MessageItemBody,
+  MessageItemHeader,
+  MessageItemStatus,
+  type StatusTone,
+} from '@agimon-ai/doompi-web-components';
+import { ToolRendererBoundary } from '../../components/ToolRendererBoundary.tsx';
+import { pluginToolRenderer } from '../../lib/pluginRegistry.ts';
+import type { ToolEntry } from '../../lib/sessionModel.ts';
+import { toolMessageProps } from '../../lib/toolMessageProps.ts';
+import { useActiveSession } from '../../stores/sessionStore.ts';
+import { usePluginSlotProps } from '../../stores/usePluginSlotProps.ts';
+
+const MAX_PREVIEW_LINES = 12;
+
+function toneOf(entry: ToolEntry): StatusTone {
+  return entry.running ? 'running' : entry.isError ? 'error' : 'ok';
+}
+
+/**
+ * The host's own item for a tool no plugin claims: the argument summary in
+ * the header and the result's text clipped until expanded, on the same shell
+ * every plugin message is built from.
+ */
+function HostToolMessage({ entry }: { entry: ToolEntry }) {
+  const lines = entry.output.length > 0 ? entry.output.split('\n') : [];
+  return (
+    <MessageItem tone={toneOf(entry)} expandable={lines.length > MAX_PREVIEW_LINES}>
+      {({ expanded }) => {
+        const { shown, hidden } = collapseLines(lines, MAX_PREVIEW_LINES, expanded);
+        return (
+          <>
+            <MessageItemHeader title={entry.name}>
+              <span className="min-w-0 flex-1 truncate">{entry.argSummary}</span>
+            </MessageItemHeader>
+            {shown.length > 0 ? (
+              <MessageItemBody className="flex flex-col gap-1">
+                <pre data-testid="tool-output" className="whitespace-pre-wrap break-words">
+                  {shown.join('\n')}
+                </pre>
+                {hidden > 0 ? <MessageItemStatus expands>show {hidden} more line(s)</MessageItemStatus> : null}
+              </MessageItemBody>
+            ) : null}
+          </>
+        );
+      }}
+    </MessageItem>
+  );
+}
+
+/**
+ * One tool call in the timeline. The plugin that registered the tool owns
+ * the whole item through its `message` renderer, the web half of the TUI's
+ * renderShell 'self'; the host only marks the row, catches a renderer that
+ * throws, and stands in for a tool nobody claims.
+ */
+export function ToolCard({ entry, sessionId }: { entry: ToolEntry; sessionId: string | null }) {
+  const statuses = useActiveSession((state) => state.statuses);
+  const slotProps = usePluginSlotProps(sessionId);
+  const renderer = pluginToolRenderer(entry.name, statuses);
+  const state = toneOf(entry);
+  const props = toolMessageProps(slotProps, entry, statuses);
+  return (
+    <ToolRendererBoundary key={entry.toolCallId} toolName={entry.name}>
+      {(failed) => (
+        <div
+          data-testid="entry-tool"
+          data-tool-name={entry.name}
+          data-tool-state={state}
+          data-tool-renderer={failed ? 'failed' : renderer ? 'plugin' : 'host'}
+        >
+          {renderer && !failed ? <renderer.message {...props} /> : <HostToolMessage entry={entry} />}
+        </div>
+      )}
+    </ToolRendererBoundary>
+  );
+}

package/src/web/features/sessions/NewSessionDialog.tsx

@@ -0,0 +1,222 @@
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  OptionRow,
+} from '@agimon-ai/doompi-web-components';
+import { useNavigate } from '@tanstack/react-router';
+import { useStore } from '@tanstack/react-store';
+import { useEffect, useRef, useState } from 'react';
+import { createSession, searchDirectories } from '../../lib/hubApi.ts';
+import { sessionsStore, waitForSession } from '../../stores/sessionsStore.ts';
+
+const PATH_SEPARATOR = '/';
+/** Keystrokes settle for this long before the hub is asked for directories. */
+const SUGGESTION_DEBOUNCE_MS = 120;
+const NO_HIGHLIGHT = -1;
+const TRAILING_SEPARATORS = /\/+$/;
+
+/**
+ * Creates a session the way ctrl+t promises: pick a directory, get an agent.
+ *
+ * The directory box completes as it is typed: the hub lists the children of
+ * the parent directory whose names match the trailing segment as a regex,
+ * and picking one appends a slash so the next level narrows the same way.
+ * The recent-cwd chips are just the distinct directories of live sessions;
+ * nothing is persisted, because the rail already is the user's working set.
+ */
+export function NewSessionDialog({ onClose }: { onClose: () => void }) {
+  const navigate = useNavigate();
+  const byId = useStore(sessionsStore, (state) => state.byId);
+  const activeId = useStore(sessionsStore, (state) => state.activeId);
+  const [cwd, setCwd] = useState(() => (activeId !== null ? (byId[activeId]?.summary.cwd ?? '') : ''));
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [highlight, setHighlight] = useState(NO_HIGHLIGHT);
+  const cwdInput = useRef<HTMLInputElement>(null);
+
+  const recentCwds = [...new Set(Object.values(byId).map((meta) => meta.summary.cwd))].slice(0, 4);
+
+  useEffect(() => {
+    const typed = cwd.trim();
+    // Any typing is worth a lookup now: the hub completes a path being drilled
+    // into and searches for anything else, so a bare folder name finds itself.
+    if (typed === '') {
+      setSuggestions([]);
+      return;
+    }
+    let stale = false;
+    const timer = setTimeout(async () => {
+      const found = await searchDirectories(typed);
+      if (stale) return;
+      // The path already typed in full is not a suggestion, only its siblings are.
+      setSuggestions(found.filter((directory) => directory !== typed));
+      setHighlight(NO_HIGHLIGHT);
+    }, SUGGESTION_DEBOUNCE_MS);
+    return () => {
+      stale = true;
+      clearTimeout(timer);
+    };
+  }, [cwd]);
+
+  const pick = (directory: string): void => {
+    setCwd(`${directory}${PATH_SEPARATOR}`);
+    cwdInput.current?.focus();
+  };
+
+  const submit = async (): Promise<void> => {
+    const directory = cwd.trim().replace(TRAILING_SEPARATORS, '') || PATH_SEPARATOR;
+    if (busy || !cwd.trim()) return;
+    setBusy(true);
+    setError('');
+    const outcome = await createSession({ cwd: directory, name: name.trim() || undefined });
+    if ('sessionId' in outcome) {
+      // Navigating before the hub's upsert lands would bounce off the
+      // unknown-session fallback; wait until the rail knows the session.
+      const appeared = await waitForSession(outcome.sessionId);
+      if (appeared) {
+        onClose();
+        await navigate({ to: '/session/$sessionId', params: { sessionId: outcome.sessionId } });
+        return;
+      }
+      setError('The session was created but has not appeared yet; it will show up in the rail.');
+      setBusy(false);
+      return;
+    }
+    setError(outcome.error);
+    setBusy(false);
+  };
+
+  const onCwdKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
+    if (event.key === 'ArrowDown' && suggestions.length > 0) {
+      event.preventDefault();
+      setHighlight((current) => (current + 1) % suggestions.length);
+      return;
+    }
+    if (event.key === 'ArrowUp' && suggestions.length > 0) {
+      event.preventDefault();
+      setHighlight((current) => (current <= 0 ? suggestions.length - 1 : current - 1));
+      return;
+    }
+    if (event.key === 'Enter') {
+      const chosen = highlight === NO_HIGHLIGHT ? undefined : suggestions[highlight];
+      if (chosen !== undefined) pick(chosen);
+      else void submit();
+    }
+  };
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <DialogContent width="md" data-testid="new-session-dialog" aria-describedby={undefined} className="w-[440px]">
+        <DialogHeader>
+          <DialogTitle>new session</DialogTitle>
+        </DialogHeader>
+        <DialogBody>
+          <label className="flex flex-col gap-1">
+            <span className="text-[10px] text-doom-faint">
+              working directory <span className="text-doom-faint/70">(type a folder name or paste a path)</span>
+            </span>
+            <Input
+              ref={cwdInput}
+              data-testid="new-session-cwd"
+              value={cwd}
+              autoFocus
+              onChange={(event) => setCwd(event.target.value)}
+              onKeyDown={onCwdKeyDown}
+              placeholder="agirepo, or /absolute/path/to/project"
+            />
+          </label>
+          {suggestions.length > 0 ? (
+            <div
+              role="listbox"
+              aria-label="matching directories"
+              data-testid="new-session-suggestions"
+              className="max-h-40 overflow-y-auto rounded border border-doom-border bg-doom-deep p-1"
+            >
+              {suggestions.map((directory, index) => (
+                <OptionRow
+                  key={directory}
+                  density="compact"
+                  active={index === highlight}
+                  data-testid="new-session-suggestion"
+                  data-highlighted={index === highlight}
+                  title={directory}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onMouseEnter={() => setHighlight(index)}
+                  onClick={() => pick(directory)}
+                  className="w-full px-2.5 py-1 text-[11px]"
+                >
+                  {directory}
+                </OptionRow>
+              ))}
+            </div>
+          ) : null}
+          {recentCwds.length > 0 ? (
+            <div className="flex flex-wrap gap-1">
+              {recentCwds.map((recent) => (
+                <Button
+                  key={recent}
+                  variant="outline"
+                  size="xs"
+                  data-testid="new-session-recent"
+                  onClick={() => setCwd(recent)}
+                  className="font-normal"
+                >
+                  {recent}
+                </Button>
+              ))}
+            </div>
+          ) : null}
+          <label className="flex flex-col gap-1">
+            <span className="text-[10px] text-doom-faint">name (optional)</span>
+            <Input
+              data-testid="new-session-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') void submit();
+              }}
+              placeholder="untitled"
+            />
+          </label>
+          {error ? (
+            // A spawn failure arrives as the child's whole stderr, stack trace
+            // and all. It is worth showing (it names the real cause) but not
+            // worth resizing the dialog for, so it lives in its own scroller.
+            <pre
+              data-testid="new-session-error"
+              className="max-h-28 overflow-y-auto rounded border border-doom-edge-red bg-doom-tint-red/40 px-2.5 py-2 text-[10px] leading-relaxed whitespace-pre-wrap break-words text-doom-red"
+            >
+              {error}
+            </pre>
+          ) : null}
+          <DialogFooter>
+            <Button variant="outline" data-testid="new-session-cancel" onClick={onClose}>
+              cancel
+            </Button>
+            <Button
+              variant="primary"
+              data-testid="new-session-create"
+              onClick={() => void submit()}
+              disabled={busy || !cwd.trim()}
+            >
+              {busy ? 'creating…' : 'create'}
+            </Button>
+          </DialogFooter>
+        </DialogBody>
+      </DialogContent>
+    </Dialog>
+  );
+}