@scrylog/cli 0.1.4 → 0.3.0

package/src/tui/client.ts

@@ -1,9 +1,10 @@
 import { createDaemonFetch, getSocketPath } from "../shared/ipc";
 import { IS_WINDOWS } from "../shared/platform";
 import type { ScrylogConfig } from "../shared/config";
-import type { SessionModel, StoreEvent } from "../shared/types";
+import type { DaemonHealth, HealthResponse, SessionModel, StoreEvent } from "../shared/types";
 import type { SessionListItem, SessionTreeItem, SessionViewCounts } from "../shared/session-view";
 import { flattenSessionTree } from "../shared/session-view";
+import type { UsageState } from "../usage/types";
 
 type FetchFn = (input: string | URL | Request, init?: RequestInit) => Promise<Response>;
 
@@ -19,9 +20,9 @@ export class DaemonClient {
     });
   }
 
-  async getStatusSummary(): Promise<{ counts: SessionViewCounts; collectorStatus: Record<string, unknown>; generatedAt: number } | null> {
+  async getStatusSummary(includeUnknown = false): Promise<{ counts: SessionViewCounts; collectorStatus: Record<string, unknown>; generatedAt: number } | null> {
     try {
-      const response = await this.fetch("/api/status");
+      const response = await this.fetch(includeUnknown ? "/api/status?includeUnknown=true" : "/api/status");
       if (!response.ok) return null;
       return await response.json() as { counts: SessionViewCounts; collectorStatus: Record<string, unknown>; generatedAt: number };
     } catch {
@@ -29,18 +30,21 @@ export class DaemonClient {
     }
   }
 
-  async isHealthy(): Promise<boolean> {
+  async getHealth(): Promise<DaemonHealth | null> {
     try {
       const response = await this.fetch("/api/health");
-      return response.ok;
+      if (!response.ok) return null;
+      const body = await response.json() as Partial<HealthResponse>;
+      if (body.ok !== true) return null;
+      return body as DaemonHealth;
     } catch {
-      return false;
+      return null;
     }
   }
 
-  async getSessions(): Promise<{ sessions: SessionListItem[]; counts: SessionViewCounts; generatedAt: number } | null> {
+  async getSessions(includeUnknown = false): Promise<{ sessions: SessionListItem[]; counts: SessionViewCounts; generatedAt: number } | null> {
     try {
-      const response = await this.fetch("/api/sessions");
+      const response = await this.fetch(includeUnknown ? "/api/sessions?includeUnknown=true" : "/api/sessions");
       if (!response.ok) return null;
       const data = await response.json() as { sessions: SessionTreeItem[]; counts: SessionViewCounts; generatedAt: number };
       return {
@@ -64,6 +68,16 @@ export class DaemonClient {
     }
   }
 
+  async getUsage(): Promise<UsageState | null> {
+    try {
+      const response = await this.fetch("/api/usage");
+      if (!response.ok) return null;
+      return await response.json() as UsageState;
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * Subscribe to daemon SSE events with automatic reconnect.
    * Returns an unsubscribe function.

package/src/tui/components/BindingsModal.tsx

@@ -0,0 +1,82 @@
+import { TextAttributes } from "@opentui/core";
+import { bindingsForModal } from "../keybindings";
+import type { TuiConfig } from "../../shared/config";
+import { ProviderIcon } from "./UsageView";
+import { MINI_ICON_SIZE, isImageIconMode, toolProviderKey } from "./tool-icons";
+import { BRAND } from "../theme";
+
+const TOOL_LEGEND: { tool: string; label: string }[] = [
+  { tool: "claude", label: "Claude" },
+  { tool: "codex", label: "Codex" },
+  { tool: "opencode", label: "OpenCode" },
+  { tool: "copilotcli", label: "Copilot CLI" },
+  { tool: "shell", label: "Shell" },
+  { tool: "unknown", label: "Unknown" },
+];
+
+export function BindingsModal({ width, iconMode }: { width: number; iconMode: TuiConfig["providerIcons"] }) {
+  const groups = bindingsForModal();
+  const showIcons = isImageIconMode(iconMode);
+  return (
+    <box
+      position="absolute"
+      top="8%"
+      left="10%"
+      width="80%"
+      height="70%"
+      title="Keybindings"
+      border
+      borderColor={BRAND.primary}
+      backgroundColor={BRAND.surface}
+      flexDirection="column"
+      padding={1}
+      zIndex={20}
+    >
+      <box flexGrow={1} overflow="hidden" flexDirection="column">
+        <scrollbox flexGrow={1} height="100%" scrollY focused>
+        {groups.map((group) => (
+          <box key={group.scope} flexDirection="column">
+            <text
+              fg={BRAND.grey}
+              attributes={TextAttributes.BOLD}
+              content={`── ${group.scope === "global" ? "Global" : group.scope === "sessions" ? "Sessions tab" : "Usage tab"} ──`}
+            />
+            {group.bindings.map((binding) => (
+              <box key={`${group.scope}:${binding.key}`} flexDirection="row" height={1}>
+                <text width={Math.min(14, Math.max(10, Math.floor(width * 0.2)))} fg={BRAND.primary} attributes={TextAttributes.BOLD} content={binding.key} />
+                <text fg={BRAND.grey} content={binding.description} />
+              </box>
+            ))}
+            <text height={1} content="" />
+          </box>
+        ))}
+        {showIcons && (
+          <box flexDirection="column">
+            <text
+              fg={BRAND.grey}
+              attributes={TextAttributes.BOLD}
+              content="── Tool icons ──"
+            />
+            {TOOL_LEGEND.map((entry) => {
+              const key = toolProviderKey(entry.tool);
+              const labelWidth = Math.min(14, Math.max(10, Math.floor(width * 0.2)));
+              return (
+                <box key={entry.tool} flexDirection="row" height={1}>
+                  {key ? (
+                    <ProviderIcon provider={key} mode={iconMode} size={MINI_ICON_SIZE} />
+                  ) : (
+                    <box width={MINI_ICON_SIZE.width} />
+                  )}
+                  <text fg={BRAND.grey} content={` ${entry.label}`} />
+                </box>
+              );
+            })}
+            <text height={1} content="" />
+          </box>
+        )}
+      </scrollbox>
+      </box>
+      <text height={1} flexShrink={0} fg={BRAND.grey} content="Press q or Esc to close." />
+    </box>
+  );
+}

package/src/tui/components/DashboardHeader.tsx

@@ -0,0 +1,256 @@
+import { TextAttributes } from "@opentui/core";
+import type { SessionListItem } from "../../shared/session-view";
+import { BRAND, BRAND_MARK } from "../theme";
+import { STATE_COLORS, stateGlyph } from "../model";
+import type { DaemonVersionMismatch } from "../../shared/version";
+
+interface DashboardHeaderProps {
+  sessions: SessionListItem[];
+  connected: boolean;
+  spinnerFrame: number;
+  width: number;
+  versionMismatch?: DaemonVersionMismatch;
+}
+
+export function dashboardHeaderHeight(_width?: number): number {
+  return 6;
+}
+
+function countStates(sessions: SessionListItem[]): Record<string, number> {
+  const counts: Record<string, number> = { working: 0, idle: 0, "waiting-input": 0, error: 0, shell: 0, unknown: 0 };
+  for (const session of sessions) {
+    if (session.state in counts) counts[session.state]! += 1;
+    else counts.unknown! += 1;
+  }
+  return counts;
+}
+
+const TILE_WIDTH = 13;
+/** Right column usable width required to render a full 3-tile row (3*13 + 2 gaps) with room. */
+const TILE_MIN_USABLE_FOR_IDLE = 42;
+/** two tiles + gap: the narrow fallback that needs no separator or idle tile. */
+const TILE_MIN_USABLE_FOR_INPUT = 27;
+/** Brand column width in narrow layouts. */
+const HEADER_NARROW_LEFT_WIDTH = 16;
+/** Narrow terminals keep the brand mark whenever working/input tiles still fit next to it. */
+const HEADER_NARROW_LOGO_MIN = 46;
+
+interface StatusTileProps {
+  state: string;
+  label: string;
+  count: number;
+  spinnerFrame: number;
+  tileWidth?: number;
+}
+
+interface StatusBlockProps {
+  sessions: SessionListItem[];
+  spinnerFrame: number;
+  showSeparator: boolean;
+  narrow: boolean;
+  usable: number;
+  /** Idle tile may only render when the brand mark is reserved beside 3 tiles. */
+  allowIdle: boolean;
+  /** Brand mark is hidden: working/input stretch to fill the full row. */
+  stretch: boolean;
+}
+
+function StatusBlock({ sessions, spinnerFrame, showSeparator, narrow, usable, allowIdle, stretch }: StatusBlockProps) {
+  const counts = countStates(sessions);
+  let tiles: StatusTileProps[] = [
+    { state: "working", label: "working", count: counts.working ?? 0, spinnerFrame },
+    { state: "waiting-input", label: "input", count: (counts["waiting-input"] ?? 0) + (counts.error ?? 0), spinnerFrame },
+    { state: "idle", label: "idle", count: counts.idle ?? 0, spinnerFrame },
+  ];
+  if (narrow) {
+    // working/input are always visible (tinted when inactive); idle only shows
+    // when the full 3-tile row fits next to the brand mark.
+    tiles = tiles.filter((tile) => {
+      if (tile.state === "working") return true;
+      if (tile.state === "waiting-input") return usable >= TILE_MIN_USABLE_FOR_INPUT;
+      return allowIdle && tile.count > 0;
+    });
+  }
+  if (tiles.length === 0) {
+    return null;
+  }
+  const blockWidth = stretch
+    ? usable
+    : tiles.length * TILE_WIDTH + (tiles.length - 1);
+  const tileWidth = stretch ? Math.floor((usable - 1) / 2) : TILE_WIDTH;
+  return (
+    <box flexDirection="column" height={showSeparator ? 5 : 4}>
+      <box flexDirection="row" height={4} gap={1}>
+        {tiles.map((tile) => (
+          <StatusTile key={tile.state} {...tile} tileWidth={tileWidth} />
+        ))}
+      </box>
+      {showSeparator && <TileSeparator width={blockWidth} />}
+    </box>
+  );
+}
+
+function StatusTile({ state, label, count, spinnerFrame, tileWidth = TILE_WIDTH }: StatusTileProps) {
+  const active = count > 0;
+  const bg = active ? STATE_COLORS[state] : undefined;
+  const fg = active ? BRAND.bgDark : STATE_COLORS[state];
+  const spinner = active ? stateGlyph(state, spinnerFrame) : stateGlyph(state);
+  return (
+    <box
+      width={tileWidth}
+      height={4}
+      backgroundColor={bg}
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      <text attributes={TextAttributes.BOLD} fg={fg} content={`${count}`} maxWidth={tileWidth} />
+      <text fg={fg} content={`${spinner} ${label}`} maxWidth={tileWidth} />
+    </box>
+  );
+}
+
+function TileSeparator({ width }: { width: number }) {
+  return (
+    <box height={1}>
+      <text fg={BRAND.border} content={"─".repeat(width)} />
+    </box>
+  );
+}
+
+function StatusItem({ state, count, spinnerFrame, width }: { state: string; count: number; spinnerFrame: number; width?: number }) {
+  const label = state === "waiting-input" ? "input" : state;
+  return (
+    <text
+      width={width}
+      fg={STATE_COLORS[state] ?? BRAND.grey}
+      content={`${stateGlyph(state, spinnerFrame)} (${label}): ${count}`}
+    />
+  );
+}
+
+function StatusFooterRow({ sessions, spinnerFrame, narrow, usable }: { sessions: SessionListItem[]; spinnerFrame: number; narrow: boolean; usable: number }) {
+  const counts = countStates(sessions);
+  let avail = usable - 1;
+  const fits = (size: number) => {
+    if (!narrow) return true;
+    if (avail < size) return false;
+    avail -= size;
+    return true;
+  };
+  const showShell = fits(15);
+  const showUnknown = fits(14);
+  const showTotal = fits(10);
+  return (
+    <box flexDirection="row" height={1} paddingLeft={1}>
+      {showShell && <StatusItem state="shell" count={counts.shell ?? 0} spinnerFrame={spinnerFrame} width={15} />}
+      {showUnknown && <StatusItem state="unknown" count={counts.unknown ?? 0} spinnerFrame={spinnerFrame} width={14} />}
+      {showTotal && <text width={12} content={`  total: ${sessions.length}`} />}
+    </box>
+  );
+}
+
+function BrandMark() {
+  return (
+    <box flexDirection="column" height={5}>
+      {BRAND_MARK.art.map((line, index) => (
+        <text key={index} fg={line.fg} content={line.content} />
+      ))}
+    </box>
+  );
+}
+
+const SCRY_BLOCKS = " █▀ █▀▀ █▀█ █▄█\n ▄█ █▄▄ █▀▄ ░█░";
+const LOG_BLOCKS = " █░ █▀█ █▀▀\n █▄ █▄█ █▄█";
+
+function Wordmark({ width }: { width: number }) {
+  if (width < 72) {
+    return (
+      <box flexDirection="row">
+        <text attributes={TextAttributes.BOLD} fg={BRAND.primary} content=" SCRY" />
+        <text attributes={TextAttributes.BOLD} content="LOG" />
+      </box>
+    );
+  }
+  return (
+    <box flexDirection="row">
+      <text height={2} fg={BRAND.primary} content={SCRY_BLOCKS} />
+      <text height={2} fg={BRAND.grey} content={LOG_BLOCKS} />
+    </box>
+  );
+}
+
+function DaemonWarning({ connected, mismatch, narrow, width }: { connected: boolean; mismatch?: DaemonVersionMismatch; narrow: boolean; width: number }) {
+  if (!connected) {
+    return (
+      <box height={1}>
+        <text fg={BRAND.danger} content=" ● daemon disconnected" />
+      </box>
+    );
+  }
+  if (!mismatch) return null;
+  const content = width < 26
+    ? " restart daemon"
+    : narrow
+    ? " scrylog daemon restart"
+    : mismatch.daemonVersion
+    ? ` daemon ${mismatch.daemonVersion} != CLI ${mismatch.cliVersion} · scrylog daemon restart`
+    : " old daemon · scrylog daemon restart";
+  return (
+    <box height={1}>
+      <text fg={BRAND.warning} content={content} />
+    </box>
+  );
+}
+
+export function DashboardHeader(props: DashboardHeaderProps) {
+  const narrow = props.width < 110;
+  const leftWidth = Math.floor(Math.max(20, props.width - 2) / 2);
+  const showLogo = !narrow || props.width >= HEADER_NARROW_LOGO_MIN;
+  const usable = narrow
+    ? Math.max(0, props.width - (showLogo ? HEADER_NARROW_LEFT_WIDTH + 1 : 0) - 2)
+    : props.width;
+  const allowIdle = showLogo && usable >= TILE_MIN_USABLE_FOR_IDLE;
+  const showWarning = !props.connected || Boolean(props.versionMismatch);
+  return (
+    <box height={dashboardHeaderHeight(props.width)} flexDirection="column">
+      <box flexDirection="row" height={6}>
+        {showLogo && (
+          <box
+            width={narrow ? HEADER_NARROW_LEFT_WIDTH : leftWidth}
+            flexShrink={0}
+            flexDirection="row"
+            gap={1}
+            paddingLeft={1}
+          >
+            <BrandMark />
+            {!narrow && (
+              <box flexDirection="column" justifyContent="center">
+                <Wordmark width={props.width} />
+              </box>
+            )}
+          </box>
+        )}
+        <box
+          {...(narrow ? { width: Math.max(0, props.width - (showLogo ? HEADER_NARROW_LEFT_WIDTH : 0)) } : { flexGrow: 1 })}
+          flexDirection="column"
+          justifyContent="flex-start"
+          alignItems="flex-end"
+          paddingRight={2}
+        >
+          <DaemonWarning connected={props.connected} mismatch={props.versionMismatch} narrow={narrow} width={props.width} />
+          <StatusBlock
+            sessions={props.sessions}
+            spinnerFrame={props.spinnerFrame}
+            showSeparator={!showWarning}
+            narrow={narrow}
+            usable={usable}
+            allowIdle={allowIdle}
+            stretch={narrow && !showLogo}
+          />
+          <StatusFooterRow sessions={props.sessions} spinnerFrame={props.spinnerFrame} narrow={narrow} usable={usable} />
+        </box>
+      </box>
+    </box>
+  );
+}

package/src/tui/components/KeyBar.tsx

@@ -0,0 +1,67 @@
+import { TextAttributes } from "@opentui/core";
+import { truncate } from "../../shared/utils";
+import type { DashboardView } from "../model";
+import { contextBindings, essentialBindings } from "../keybindings";
+import { BRAND } from "../theme";
+
+const KEY_COLOR = BRAND.primary;
+const DESCRIPTION_COLOR = BRAND.grey;
+const SEPARATOR = " · ";
+
+function KeyBarItem({ binding, separator }: { binding: { key: string; description: string }; separator?: string }) {
+  return (
+    <box flexDirection="row" height={1} flexShrink={0} gap={1}>
+      <text fg={KEY_COLOR} attributes={TextAttributes.BOLD} content={binding.key} />
+      <text fg={DESCRIPTION_COLOR} content={binding.description} />
+      {separator && <text fg={DESCRIPTION_COLOR} content={separator} />}
+    </box>
+  );
+}
+
+export function KeyBar({
+  view,
+  width,
+  context,
+}: {
+  view: DashboardView;
+  width: number;
+  context?: string;
+}) {
+  const bindings = contextBindings(view).filter((binding) => binding.footer !== false);
+  const essentials = essentialBindings(view).filter((binding) => binding.footer !== false);
+  const narrow = width < 110;
+  const candidates = narrow ? essentials : bindings;
+  const contextSuffix = context ? `${SEPARATOR}${context}` : "";
+  const maxHidden = Math.max(0, bindings.length - essentials.length);
+  const indicatorWidth = narrow && maxHidden > 0 ? SEPARATOR.length + `+${maxHidden} more (?)`.length : 0;
+  const budget = Math.max(0, width - 2 - contextSuffix.length - indicatorWidth);
+
+  const items: { key: string; description: string }[] = [];
+  let used = 0;
+  for (const binding of candidates) {
+    const itemWidth = binding.key.length + 1 + binding.description.length + (items.length > 0 ? SEPARATOR.length : 0);
+    if (items.length > 0 && used + itemWidth > budget) break;
+    items.push(binding);
+    used += itemWidth;
+  }
+
+  const hidden = bindings.length - items.length;
+  const indicator = hidden > 0 ? `+${hidden} more (?)` : null;
+
+  return (
+    <box height={1} flexDirection="row" width={Math.max(1, width - 1)} paddingX={1} flexShrink={0}>
+      {items.map((binding, index) => (
+        <KeyBarItem key={binding.key} binding={binding} separator={index < items.length - 1 ? SEPARATOR : undefined} />
+      ))}
+      {indicator && <text fg={DESCRIPTION_COLOR} content={`${SEPARATOR}${indicator}`} />}
+      {context && (
+        <text
+          flexGrow={1}
+          fg={DESCRIPTION_COLOR}
+          content={truncate(contextSuffix, Math.max(1, width - 2 - used))}
+          truncate
+        />
+      )}
+    </box>
+  );
+}

package/src/tui/components/SessionDetailModal.tsx

@@ -0,0 +1,169 @@
+import { TextAttributes } from "@opentui/core";
+import type { SessionModel } from "../../shared/types";
+import type { TuiConfig } from "../../shared/config";
+import { formatDuration, truncate } from "../../shared/utils";
+import { BRAND } from "../theme";
+import { STATE_COLORS } from "../model";
+import { providerAccentColor, providerVisual, ProviderIcon } from "./UsageView";
+import { MINI_ICON_SIZE, isImageIconMode, toolProviderKey } from "./tool-icons";
+
+const LABEL_WIDTH = 12;
+
+interface DetailRow {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+function formatRelativeTime(timestamp: number, now = Date.now()): string {
+  const seconds = Math.max(1, Math.round((now - timestamp) / 1000));
+  if (seconds > 86400) return `${Math.floor(seconds / 86400)}d ago`;
+  if (seconds > 3600) return `${Math.floor(seconds / 3600)}h ago`;
+  if (seconds > 60) return `${Math.floor(seconds / 60)}m ago`;
+  return "just now";
+}
+
+function buildInfoRows(session: SessionModel): DetailRow[] {
+  const rows: DetailRow[] = [];
+  rows.push({ label: "id", value: session.id });
+  rows.push({ label: "state", value: `${session.state} (${formatDuration(session.stableForMs ?? 0)})`, color: STATE_COLORS[session.state] ?? BRAND.fallback });
+  rows.push({ label: "tool", value: session.tool });
+  rows.push({ label: "source", value: `${session.source}${session.detectionSource ? ` / ${session.detectionSource}` : ""}` });
+  if (session.project?.displayName) rows.push({ label: "project", value: session.project.displayName });
+  if (session.project?.isGitRepository && session.project?.branch) {
+    rows.push({ label: "git", value: session.project.branch, color: BRAND.accentBlue });
+  }
+  if (session.currentPath) rows.push({ label: "path", value: session.currentPath });
+  if (session.summary) rows.push({ label: "summary", value: session.summary });
+  rows.push({ label: "activity", value: formatRelativeTime(session.lastActivity) });
+  if (session.processChain?.length) {
+    rows.push({ label: "command", value: session.processChain.join(" → "), color: BRAND.grey });
+  }
+  if (session.tmux) {
+    rows.push({ label: "tmux", value: `${session.tmux.session}:${session.tmux.window}.${session.tmux.pane}`, color: BRAND.accentBlue });
+    if (session.tmux.windowName) rows.push({ label: "window", value: session.tmux.windowName });
+  }
+  if (session.herdr) {
+    const herdr = session.herdr;
+    if (herdr.workspace) rows.push({ label: "workspace", value: herdr.workspace, color: BRAND.accentBlue });
+    if (herdr.tab) rows.push({ label: "tab", value: herdr.tab });
+    if (herdr.name) rows.push({ label: "pane", value: herdr.name });
+    if (herdr.agent) {
+      rows.push({ label: "agent", value: herdr.agent + (herdr.agentStatus ? ` (${herdr.agentStatus})` : ""), color: BRAND.accentBlue });
+    }
+  }
+  if (session.opencode) {
+    rows.push({ label: "instance", value: session.opencode.instanceUrl, color: BRAND.grey });
+  }
+  if (session.claude?.permissionMode) rows.push({ label: "perm mode", value: session.claude.permissionMode });
+  if (session.codex?.model) rows.push({ label: "model", value: session.codex.model });
+  if (session.codex?.permissionMode) rows.push({ label: "perm mode", value: session.codex.permissionMode });
+  if (session.parentSessionId) rows.push({ label: "parent", value: session.parentSessionId });
+  if (session.childSessionIds?.length) rows.push({ label: "children", value: String(session.childSessionIds.length) });
+  return rows;
+}
+
+export function SessionDetailModal(props: {
+  detail: SessionModel;
+  iconMode: TuiConfig["providerIcons"];
+  width: number;
+}) {
+  const { detail } = props;
+  const toolMode = isImageIconMode(props.iconMode) ? "icons" : props.iconMode === "text" ? "text" : "monogram";
+  const toolKey = toolProviderKey(detail.tool);
+  const stateColor = STATE_COLORS[detail.state] ?? BRAND.fallback;
+  const modalWidth = Math.max(40, Math.floor(props.width * 0.9));
+  const innerWidth = Math.max(20, modalWidth - 4);
+  const titleWidth = Math.max(10, innerWidth - 12);
+
+  const infoRows = buildInfoRows(detail);
+  const reasonRows = [
+    ...(detail.toolReasons ?? []).map((reason) => ({ kind: "tool" as const, value: `${reason.label} — ${reason.detail}` })),
+    ...(detail.stateReasons ?? []).map((reason) => ({ kind: "state" as const, value: `${reason.label} — ${reason.detail}` })),
+  ];
+  const longestValue = Math.max(
+    0,
+    ...infoRows.map((row) => row.value.length),
+    ...reasonRows.map((reason) => reason.value.length),
+  );
+  const tableWidth = Math.max(innerWidth, LABEL_WIDTH + 2 + longestValue);
+  const tableRule = `${"─".repeat(LABEL_WIDTH)}┼${"─".repeat(tableWidth - LABEL_WIDTH - 1)}`;
+
+  return (
+    <box
+      position="absolute"
+      top="5%"
+      left="5%"
+      width="90%"
+      height="90%"
+      title="Session detail"
+      border
+      borderColor={BRAND.primary}
+      backgroundColor={BRAND.surface}
+      flexDirection="column"
+      padding={1}
+      zIndex={10}
+    >
+      <box flexGrow={1} overflow="hidden" flexDirection="column">
+        <scrollbox flexGrow={1} height="100%" scrollY scrollX focused>
+          <box flexDirection="column">
+        <box flexDirection="row" height={1}>
+          {toolMode === "icons" && toolKey ? (
+            <>
+              <ProviderIcon provider={toolKey} mode={props.iconMode} size={MINI_ICON_SIZE} />
+              <text width={1} content=" " />
+              <text
+                fg={providerAccentColor(toolKey)}
+                attributes={TextAttributes.BOLD}
+                content={providerVisual(toolKey).short}
+              />
+            </>
+          ) : (
+            <text
+              fg={toolKey ? providerAccentColor(toolKey) : BRAND.fallback}
+              attributes={TextAttributes.BOLD}
+              content={toolKey ? providerVisual(toolKey).short : truncate(detail.tool, 8)}
+            />
+          )}
+          <text width={1} content=" " />
+          <text
+            fg={BRAND.fallback}
+            attributes={TextAttributes.BOLD}
+            content={truncate(detail.project?.displayName ?? detail.id, titleWidth)}
+            truncate
+          />
+          <text fg={BRAND.grey} content="  ·  " />
+          <text fg={stateColor} attributes={TextAttributes.BOLD} content={detail.state} />
+        </box>
+        <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+        {infoRows.map((row, index) => (
+          <box key={row.label} flexDirection="column">
+            <box flexDirection="row" height={1}>
+              <text width={LABEL_WIDTH} fg={BRAND.grey} content={row.label} />
+              <text width={1} fg={BRAND.border} content="│" />
+              <text width={1} content=" " />
+              <text width={row.value.length} fg={row.color ?? BRAND.fallback} content={row.value} />
+            </box>
+            <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+            {index === infoRows.length - 1 && reasonRows.length > 0 && <text content="" height={1} />}
+          </box>
+        ))}
+        {reasonRows.length > 0 && <text fg={BRAND.grey} attributes={TextAttributes.BOLD} content="Classification" />}
+        {reasonRows.map((reason, index) => (
+          <box key={`${reason.kind}:${reason.value}:${index}`} flexDirection="column">
+            <box flexDirection="row" height={1}>
+              <text width={LABEL_WIDTH} fg={BRAND.grey} content={reason.kind} />
+              <text width={1} fg={BRAND.border} content="│" />
+              <text width={1} content=" " />
+              <text width={reason.value.length} fg={BRAND.fallback} content={reason.value} />
+            </box>
+            <box height={1} flexDirection="row"><text fg={BRAND.border} content={tableRule} /></box>
+          </box>
+        ))}
+          </box>
+        </scrollbox>
+      </box>
+      <text height={1} flexShrink={0} fg={BRAND.grey} content="←→ scroll · q/Esc close · t attach" />
+    </box>
+  );
+}