@kabmo-labs/kabmo 0.0.0-stage → 0.1.0

package/src/client/components/workspace/terminal-panel/index.tsx

@@ -0,0 +1,231 @@
+import { useCallback, useRef, useState } from 'preact/hooks';
+import { useTerminal } from '@/client/hooks/workspace/terminal';
+import { useRepoList, useRepoScope } from '@/client/hooks/workspace/repo-scope';
+import { useTheme } from '@/client/hooks/ui/theme';
+import { useTouchDevice } from '@/client/hooks/ui/touch-device';
+import { useKeyboardInset } from '@/client/hooks/ui/keyboard-inset';
+import { copyToClipboard, readClipboardText } from '@/client/hooks/ui/clipboard';
+import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
+import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
+import { TerminalKeyBar } from '@/client/components/workspace/terminal-panel/KeyBar';
+import { RealtimeXtermView, type RealtimeXtermHandle } from '@/client/components/workspace/terminal-panel/RealtimeXtermView';
+import {
+  NO_MODIFIERS,
+  applyModifiers,
+  resolveKeySequence,
+  type TerminalKeyId,
+  type TerminalModifier,
+  type TerminalModifiers,
+} from '@/shared/lib/workspace/terminal/keys';
+
+interface TerminalPanelProps {
+  className?: string;
+  enabled?: boolean;
+  rootPath?: string;
+  showHeader?: boolean;
+}
+
+const encoder = new TextEncoder();
+
+export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
+  const xtermRef = useRef<RealtimeXtermHandle>(null);
+  const { isDark } = useTheme();
+  // Only a device without a physical keyboard gets the key bar: on a desktop
+  // every one of those keys is already under the user's fingers, and a strip of
+  // them would cost the canvas height for nothing.
+  const isTouchDevice = useTouchDevice();
+  // The inset is measured from the panel's OWN bottom edge, so it can never
+  // double-count a keyboard the container already shrank for.
+  const rootRef = useRef<HTMLDivElement>(null);
+  const keyboardInset = useKeyboardInset(rootRef);
+  const [modifiers, setModifiers] = useState<TerminalModifiers>(NO_MODIFIERS);
+  const { activeRepo, setActiveRepo } = useRepoScope(rootPath);
+  const { repos, scanning: reposScanning, rescan: rescanRepos } = useRepoList(rootPath, enabled);
+  const gridRef = useRef<{ cols: number; rows: number } | null>(null);
+  // The latch is read inside `handleInput`, which xterm calls outside React's
+  // render — a ref is what makes it the value at the keystroke, not at mount.
+  const modifiersRef = useRef(modifiers);
+  modifiersRef.current = modifiers;
+
+  const handleOutput = useCallback((bytes: Uint8Array) => {
+    xtermRef.current?.write(bytes);
+  }, []);
+
+  const handleReplay = useCallback((bytes: Uint8Array, frame: { replayCols: number; replayRows: number }) => {
+    xtermRef.current?.writeReplay(bytes, frame.replayCols, frame.replayRows);
+  }, []);
+
+  const handleRestart = useCallback(() => {
+    xtermRef.current?.reset();
+  }, []);
+
+  const {
+    status,
+    shell,
+    exitCode,
+    error,
+    attach,
+    resize,
+    input,
+    restart,
+  } = useTerminal({
+    root: enabled ? rootPath : undefined,
+    repo: activeRepo,
+    theme: isDark ? 'dark' : 'light',
+    onOutput: handleOutput,
+    onReplay: handleReplay,
+    onRestart: handleRestart,
+  });
+
+  // The view reports its grid before the first attach and on every fit, so the
+  // PTY is created at the panel's real size instead of a default 80x24.
+  const handleReady = useCallback((cols: number, rows: number) => {
+    gridRef.current = { cols, rows };
+    attach(cols, rows);
+  }, [attach]);
+
+  const handleGridChange = useCallback((cols: number, rows: number) => {
+    const previous = gridRef.current;
+    gridRef.current = { cols, rows };
+    if (!previous) return;
+    resize(cols, rows);
+  }, [resize]);
+
+  // Keystrokes arrive as text; `onBinary` payloads are latin-1 bytes and must
+  // not be UTF-8 encoded on the way out.
+  //
+  // A latched modifier is folded in here, on the way out, because that is the
+  // only place a soft keyboard's letters pass through — Ctrl+C on a phone is a
+  // tap on `Ctrl` and then the `c` the OS keyboard produces.
+  const handleInput = useCallback((data: string) => {
+    const latched = modifiersRef.current;
+    const armed = latched.ctrl || latched.alt;
+    const encoded = applyModifiers(data, latched);
+    // Only a single typed character consumes the latch. A paste, a mouse report
+    // or a focus event arrives on this same event and must leave the armed
+    // modifier alone, or the tap that armed it is silently spent on a no-op.
+    if (armed && data.length === 1) setModifiers(NO_MODIFIERS);
+    input(encoder.encode(encoded));
+  }, [input]);
+
+  const handleToggleModifier = useCallback((modifier: TerminalModifier) => {
+    setModifiers((previous) => ({ ...previous, [modifier]: !previous[modifier] }));
+    xtermRef.current?.focus();
+  }, []);
+
+  const handleKey = useCallback((id: TerminalKeyId) => {
+    const sequence = resolveKeySequence(id, {
+      applicationCursorKeys: xtermRef.current?.applicationCursorKeys() ?? false,
+      modifiers: modifiersRef.current,
+    });
+    if (!sequence) return;
+    input(encoder.encode(sequence));
+    setModifiers(NO_MODIFIERS);
+    // Keep the OS keyboard where it was; a key bar tap must not dismiss it.
+    xtermRef.current?.focus();
+  }, [input]);
+
+  /**
+   * Cmd+C / Cmd+V, the two chords a terminal actually has — a phone can neither
+   * select on the canvas nor reach its own clipboard from there. Copy reports
+   * whether it had anything to copy so the bar can say "nothing selected"
+   * instead of flashing success over an untouched clipboard.
+   */
+  const handleCopy = useCallback(async () => {
+    const selection = xtermRef.current?.getSelection() ?? '';
+    if (!selection) return false;
+    return copyToClipboard(selection);
+  }, []);
+
+  const handlePaste = useCallback(async () => {
+    const text = await readClipboardText();
+    if (text === null || text.length === 0) return false;
+    // Through xterm's own paste, so a bracketed-paste shell gets its markers.
+    xtermRef.current?.paste(text);
+    xtermRef.current?.focus();
+    return true;
+  }, []);
+
+  const handleBinaryInput = useCallback((data: string) => {
+    const bytes = new Uint8Array(data.length);
+    for (let i = 0; i < data.length; i += 1) bytes[i] = data.charCodeAt(i) & 0xff;
+    input(bytes);
+  }, [input]);
+
+  const handleQuickAction = useCallback((command: string) => {
+    input(encoder.encode(`${command}\r`));
+    xtermRef.current?.focus();
+  }, [input]);
+
+  const handleRestartClick = useCallback(() => {
+    restart();
+  }, [restart]);
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={rootRef}
+      className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}
+      // The soft keyboard covers the bottom of the visual viewport without
+      // shrinking the layout one, so the key bar would sit behind the keys the
+      // user is typing on. Lifting by the panel's actual overlap with the
+      // visible area keeps the bar — and the shell's own grid, which the fit
+      // observer re-measures — above the keyboard, and lifts nothing at all
+      // when the container already ends above it.
+      style={keyboardInset > 0 ? { paddingBottom: keyboardInset } : undefined}
+    >
+      {showHeader && (
+        <TerminalHeader
+          status={status}
+          exitCode={exitCode}
+          rootPath={rootPath}
+          activeRepo={activeRepo}
+          onSelectRepo={setActiveRepo}
+          repos={repos}
+          reposScanning={reposScanning}
+          onRefreshRepos={rescanRepos}
+          shell={shell}
+          onRestart={handleRestartClick}
+        />
+      )}
+
+      {/* Preset command shortcuts: typed into the live shell, not a new process */}
+      <TerminalQuickActions onSelectCommand={handleQuickAction} disabled={status !== 'running'} />
+
+      {error && (
+        <div className="px-3 py-1.5 border-b border-error/20 bg-error/5 text-[11px] font-mono text-error flex-shrink-0">
+          {error}
+        </div>
+      )}
+
+      {/* Real-time Xterm Terminal Canvas, driven by the PTY socket */}
+      <div className="flex-1 w-full min-h-0 bg-canvas overflow-hidden">
+        <RealtimeXtermView
+          ref={xtermRef}
+          onInput={handleInput}
+          onBinaryInput={handleBinaryInput}
+          onReady={handleReady}
+          onGridChange={handleGridChange}
+        />
+      </div>
+
+      {isTouchDevice && (
+        <TerminalKeyBar
+          modifiers={modifiers}
+          onToggleModifier={handleToggleModifier}
+          onKey={handleKey}
+          onCopy={handleCopy}
+          onPaste={handlePaste}
+          disabled={status !== 'running'}
+        />
+      )}
+    </div>
+  );
+}

package/src/client/components/workspace/terminal-panel/mount.ts

@@ -0,0 +1,322 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Mounts an xterm instance on a container and keeps it bound to a PTY.
+ *
+ * Extracted from the view component so the mount lifecycle (xterm import, fit
+ * addon, input wiring, observers) stays readable and the component remains a
+ * render layer. Everything the caller must know travels through `callbacks`;
+ * the returned handle is the only way back in.
+ *
+ * Two behaviours here are deliberate:
+ *
+ * - **Attach waits for a real grid.** The terminal panel stays mounted while
+ *   its view is CSS-hidden (that is what keeps a shell alive across panel
+ *   switches), and a hidden container measures 0px — fitting is skipped and
+ *   xterm keeps its 80x24 default. Attaching then would create the shell at a
+ *   size the panel never had, and the retained scrollback would replay at that
+ *   width forever. So attach is driven by the same ResizeObserver that detects
+ *   the panel becoming visible.
+ * - **Raw bytes in, raw bytes out.** `onData`/`onBinary` forward keystrokes
+ *   untouched, and `write` takes a `Uint8Array` so xterm's streaming UTF-8
+ *   decoder reassembles a character split across two PTY reads.
+ * - **xterm and the WebGL addon are dynamically imported on purpose.** xterm is
+ *   ~300 KB and the addon pulls a WebGL context into the panel; both stay out
+ *   of the initial client bundle until the terminal panel is actually opened.
+ *   The module shape varies by build, hence the probe pattern below.
+ */
+
+import type { Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+import type { WebglAddon } from '@xterm/addon-webgl';
+import {
+  getXtermTheme,
+  NERD_SYMBOLS_FAMILY,
+  XTERM_FONT_FAMILY,
+  safePatchFitAddon,
+  safePatchRenderService,
+  type XtermCore,
+  type XtermModule,
+} from '@/client/data/theme/terminal';
+
+export interface XtermMountCallbacks {
+  /** Keystrokes, paste, mouse reports — straight to the PTY. */
+  onInput: (data: string) => void;
+  /** Non-UTF-8 payloads xterm reports separately (some mouse reports). */
+  onBinaryInput: (data: string) => void;
+  /** The grid changed; the PTY must be resized to match. */
+  onGridChange: (cols: number, rows: number) => void;
+  /** The terminal is measurable and knows its size; attach with these. */
+  onReady: (cols: number, rows: number) => void;
+  /** Viewport scrolled away from the live bottom. */
+  onScrolledUpChange: (scrolledUp: boolean) => void;
+}
+
+export interface XtermMount {
+  term: Terminal;
+  fitAddon: FitAddon;
+  /**
+   * Lay the retained scrollback out at the size it was drawn for, then fit the
+   * panel. Grid reports are suppressed until the replay has been consumed.
+   */
+  writeReplay: (bytes: Uint8Array, cols: number, rows: number) => void;
+  dispose: () => void;
+}
+
+/**
+ * Mount xterm inside `container`. Resolves to null when the module could not be
+ * loaded or the component unmounted while importing.
+ */
+export async function mountXterm(
+  container: HTMLElement,
+  themeId: string,
+  callbacks: XtermMountCallbacks,
+  isCancelled: () => boolean,
+): Promise<XtermMount | null> {
+  // Dynamic on purpose: xterm is ~300 KB and is only needed once the terminal
+  // panel is actually opened, so it stays out of the initial client bundle
+  // (the module shape varies by build, hence the probes).
+  const xtermModule = (await import('@xterm/xterm')) as unknown as XtermModule<typeof Terminal>;
+  const fitModule = (await import('@xterm/addon-fit')) as unknown as XtermModule<typeof FitAddon>;
+
+  const TerminalClass = xtermModule.Terminal || xtermModule.default?.Terminal || xtermModule.default;
+  const FitAddonClass = fitModule.FitAddon || fitModule.default?.FitAddon || fitModule.default;
+  if (!TerminalClass || !FitAddonClass || isCancelled()) return null;
+
+  safePatchFitAddon(FitAddonClass);
+
+  const term = new TerminalClass({
+    cursorBlink: true,
+    cursorStyle: 'block',
+    fontSize: 12,
+    lineHeight: 1.25,
+    fontFamily: XTERM_FONT_FAMILY,
+    theme: getXtermTheme(themeId),
+    // No `convertEol`: the PTY already emits CRLF, and converting a lone LF
+    // would re-introduce the line-feed doubling a real terminal avoids.
+    scrollback: 10000,
+    scrollSensitivity: 1.5,
+    fastScrollSensitivity: 5,
+    smoothScrollDuration: 0,
+    allowProposedApi: true,
+  }) as Terminal;
+
+  term.open(container);
+  safePatchRenderService(term);
+
+  // WebGL renderer: draws powerline glyphs (U+E0B0 etc.) as full-cell vector
+  // paths, so segmented prompts stay seamless the way a local terminal does.
+  // The DOM renderer draws them as ordinary glyphs inside the font box, which
+  // leaves notches at every segment joint. WebGL can fail (no GPU context,
+  // context-lost), and the DOM renderer is the automatic fallback.
+  try {
+    const webglModule = (await import('@xterm/addon-webgl')) as unknown as {
+      WebglAddon?: typeof WebglAddon;
+      default?: { WebglAddon?: typeof WebglAddon } & typeof WebglAddon;
+    };
+    const WebglAddonClass = webglModule.WebglAddon || webglModule.default?.WebglAddon || webglModule.default;
+    if (WebglAddonClass) {
+      const webgl = new WebglAddonClass() as WebglAddon;
+      webgl.onContextLoss(() => webgl.dispose());
+      term.loadAddon(webgl);
+    }
+  } catch {}
+
+  const fitAddon = new FitAddonClass() as FitAddon;
+  term.loadAddon(fitAddon);
+
+  // The bundled Nerd Font symbols face may still be in flight (a phone has no
+  // Nerd Font of its own). See the helper for why the atlas has to be dropped
+  // once it lands.
+  const stopNerdFaceWatch = refreshAtlasWhenNerdFaceLoads(term);
+
+  term.attachCustomKeyEventHandler((event: globalThis.KeyboardEvent) => handleKeyNavigation(term, event));
+
+  const disposables = [
+    term.onScroll(() => {
+      const buffer = term.buffer.active;
+      callbacks.onScrolledUpChange(buffer.viewportY < buffer.baseY);
+    }),
+    term.onData((data: string) => callbacks.onInput(data)),
+    term.onBinary((data: string) => callbacks.onBinaryInput(data)),
+    // FitAddon changes the grid on fit; the shell has to hear about it or a TUI
+    // keeps drawing at the old width. Reports are dropped while the replay is
+    // being laid out: that grid belongs to the recorded history, not the panel.
+    term.onResize(({ cols, rows }) => {
+      if (replaying) return;
+      callbacks.onGridChange(cols, rows);
+    }),
+  ];
+
+  let attached = false;
+  let fitTimer: ReturnType<typeof setTimeout> | null = null;
+  let frame: number | null = null;
+  /**
+   * Set while the retained scrollback is being laid out at its recorded size.
+   * That transient grid is not the panel's, so it must not be reported as a
+   * resize — the shell would answer with a prompt repaint for a size the user
+   * never chose, which is how a reattach used to print a second prompt.
+   */
+  let replaying = false;
+
+  const safeFit = () => {
+    if (isCancelled()) return;
+    if (container.clientWidth <= 0 || container.clientHeight <= 0) return;
+    const core = (term as unknown as XtermCore)._core;
+    const dims = core?._renderService?.dimensions;
+    if (!dims?.css?.cell?.width || !dims?.css?.cell?.height) return;
+    try {
+      fitAddon.fit();
+    } catch {}
+  };
+
+  /** Fit now, once xterm has consumed everything already queued. */
+  const fitAfterWrites = () => {
+    term.write('', () => {
+      if (isCancelled()) return;
+      replaying = false;
+      safeFit();
+    });
+  };
+
+  /**
+   * Lay the retained scrollback out at the size it was drawn for, then converge
+   * on the panel's grid. Re-wrapping history at another width leaves wrapped
+   * fragments the shell's own redraw never clears.
+   */
+  const writeReplay = (bytes: Uint8Array, cols: number, rows: number) => {
+    replaying = true;
+    if (term.cols !== cols || term.rows !== rows) term.resize(cols, rows);
+    if (bytes.length === 0) {
+      fitAfterWrites();
+      return;
+    }
+    term.write(bytes, fitAfterWrites);
+  };
+
+  const attachIfSized = () => {
+    if (attached || isCancelled()) return;
+    if (container.clientWidth <= 0 || container.clientHeight <= 0) return;
+    const core = (term as unknown as XtermCore)._core;
+    if (!core?._renderService?.dimensions?.css?.cell?.width) return;
+    attached = true;
+    callbacks.onReady(term.cols, term.rows);
+    term.focus();
+  };
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (fitTimer) clearTimeout(fitTimer);
+    fitTimer = setTimeout(() => {
+      safeFit();
+      // A panel that was hidden at mount becomes measurable here, which is when
+      // the shell should be created — at its real size.
+      attachIfSized();
+    }, 35);
+  });
+  resizeObserver.observe(container);
+
+  const touch = attachTouchScroll(container, term);
+
+  // The container may already be measurable (the view was active at mount), in
+  // which case the observer never fires a first time.
+  frame = requestAnimationFrame(() => {
+    safeFit();
+    attachIfSized();
+  });
+
+  return {
+    term,
+    fitAddon,
+    writeReplay,
+    dispose() {
+      if (frame !== null) cancelAnimationFrame(frame);
+      clearTimeout(fitTimer ?? undefined);
+      stopNerdFaceWatch();
+      touch();
+      for (const disposable of disposables) disposable.dispose();
+      resizeObserver.disconnect();
+      try {
+        fitAddon.dispose();
+      } catch {}
+      try {
+        term.dispose();
+      } catch {}
+    },
+  };
+}
+
+/**
+ * Re-rasterize the terminal once the bundled symbols face has loaded.
+ *
+ * xterm has no `document.fonts` listener: it rasterizes a glyph the first time
+ * it draws it and keeps the result in a texture atlas, so a PUA glyph written
+ * before the face arrived stays whatever the fallback painted — a tofu box —
+ * for the life of the buffer. The browser does re-lay-out DOM text when a face
+ * lands late (verified on the DOM renderer), but xterm's canvas does not get
+ * that for free.
+ *
+ * `loadingdone` naming our own family is exactly the signal that this machine
+ * had no Nerd Font of its own: the face is declared last in the stack and its
+ * `unicode-range` covers only PUA, so a device with an installed Nerd Font
+ * never fetches it (verified: zero requests with a local family present). That
+ * makes this a no-op on the developer's laptop and the fix on a phone.
+ *
+ * `clearTextureAtlas()` drops the atlas and forces a full refresh, which is
+ * what re-rasterizes the glyphs. It is a public API on `Terminal`, and the
+ * atlas is small enough that a full refresh is cheap — this runs at most once
+ * per page load.
+ *
+ * Returns a disposer.
+ */
+function refreshAtlasWhenNerdFaceLoads(term: Terminal): () => void {
+  if (typeof document === 'undefined' || !document.fonts) return () => {};
+
+  const onLoadingDone = (event: FontFaceSetLoadEvent) => {
+    const loaded = [...event.fontfaces].some((face) => face.family.replace(/['"]/g, '') === NERD_SYMBOLS_FAMILY);
+    if (!loaded) return;
+    try {
+      term.clearTextureAtlas();
+    } catch {
+      // A disposed terminal has no render service; nothing to refresh.
+    }
+  };
+
+  document.fonts.addEventListener('loadingdone', onLoadingDone);
+  return () => document.fonts.removeEventListener('loadingdone', onLoadingDone);
+}
+
+/** Shift+PageUp/Home/End scroll the viewport instead of reaching the shell. */
+function handleKeyNavigation(term: Terminal, event: globalThis.KeyboardEvent): boolean {
+  if (event.type !== 'keydown' || !event.shiftKey) return true;
+  if (event.key === 'PageUp') { term.scrollPages(-1); return false; }
+  if (event.key === 'PageDown') { term.scrollPages(1); return false; }
+  if (event.key === 'Home') { term.scrollToTop(); return false; }
+  if (event.key === 'End') { term.scrollToBottom(); return false; }
+  if (event.key === 'ArrowUp') { term.scrollLines(-1); return false; }
+  if (event.key === 'ArrowDown') { term.scrollLines(1); return false; }
+  return true;
+}
+
+/** Touch drags scroll the scrollback; xterm has no touch handling of its own. */
+function attachTouchScroll(container: HTMLElement, term: Terminal): () => void {
+  let startY = 0;
+  const onStart = (event: globalThis.TouchEvent) => {
+    if (event.touches.length === 1) startY = event.touches[0].clientY;
+  };
+  const onMove = (event: globalThis.TouchEvent) => {
+    if (event.touches.length !== 1) return;
+    const deltaY = startY - event.touches[0].clientY;
+    if (Math.abs(deltaY) < 16) return;
+    term.scrollLines(Math.trunc(deltaY / 16));
+    startY = event.touches[0].clientY;
+  };
+  container.addEventListener('touchstart', onStart, { passive: true });
+  container.addEventListener('touchmove', onMove, { passive: true });
+  return () => {
+    container.removeEventListener('touchstart', onStart);
+    container.removeEventListener('touchmove', onMove);
+  };
+}

package/src/client/components/workspace/todo-panel/PhaseGroup.tsx

@@ -0,0 +1,76 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * One phase group of the todo panel: a header with the phase's own `closed/total`
+ * badge, then its task rows.
+ *
+ * The collapse state is the panel's (persisted per session), not local: a list
+ * the operator collapsed should stay collapsed across a reload, and the panel
+ * owns every phase's flag in one map so "collapse all" is one write.
+ */
+
+import { ChevronDown, ChevronRight } from 'lucide-preact';
+import type { TodoPhase } from '@/shared/types/todo';
+import { closedTaskCount } from '@/shared/lib/chat/todo/progress';
+import { TodoRow } from '@/client/components/common/todo-row';
+
+interface TodoPhaseGroupProps {
+  phase: TodoPhase;
+  index: number;
+  collapsed: boolean;
+  /** `phase:task` of the row to highlight as current, or null. */
+  currentKey: string | null;
+  onToggle: () => void;
+}
+
+export function TodoPhaseGroup({ phase, index, collapsed, currentKey, onToggle }: TodoPhaseGroupProps) {
+  const closed = closedTaskCount(phase);
+  const isComplete = phase.tasks.length > 0 && closed === phase.tasks.length;
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-ink/10 bg-paper">
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-expanded={!collapsed}
+        className="flex w-full items-center gap-1.5 border-b border-ink/8 bg-canvas/40 px-2.5 py-1.5 text-left hover:bg-ink/5"
+      >
+        {collapsed ? (
+          <ChevronRight size={12} className="shrink-0 text-ink/40" />
+        ) : (
+          <ChevronDown size={12} className="shrink-0 text-ink/40" />
+        )}
+        <span
+          className={`min-w-0 flex-1 truncate text-[10px] font-semibold uppercase tracking-wider ${
+            isComplete ? 'text-ink/35' : 'text-ink/60'
+          }`}
+          title={phase.name}
+        >
+          {index + 1}. {phase.name}
+        </span>
+        <span className="shrink-0 font-mono text-[9.5px] text-ink/40">
+          {closed}/{phase.tasks.length}
+        </span>
+      </button>
+
+      {!collapsed && (
+        <div className="divide-y divide-ink/[0.05] p-0.5">
+          {phase.tasks.length === 0 ? (
+            <div className="px-2.5 py-1.5 text-[11px] text-ink/40">No tasks in this phase</div>
+          ) : (
+            phase.tasks.map((task, taskIndex) => (
+              <TodoRow
+                key={`${taskIndex}-${task.content}`}
+                task={task}
+                current={currentKey === `${index}:${taskIndex}`}
+              />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}