tuiboard 0.11.0 → 0.13.0

package/src/store/herdr.ts

@@ -0,0 +1,272 @@
+/**
+ * herdr (terminal workspace manager for coding agents) link.
+ *
+ * `herdr api snapshot` lists every pane with the agent running in it, that
+ * agent's state and — when herdr's integration for that agent is installed —
+ * the agent session it's on (`{kind: "id"}` for Claude/OpenCode, `{kind:
+ * "path"}` for Pi). tuiboard polls it and links panes to its own sessions, so
+ * a session open in herdr shows herdr's live state (including "idle" and
+ * "waiting for you", which the on-disk formats can't tell) and where it lives.
+ *
+ * Optional by design: no `herdr` on PATH, no server, or an unexpected answer
+ * all just mean "no links".
+ */
+
+import type { AgentProvider, AgentSession, AgentStatus } from "~/store/agents";
+
+export type HerdrAgentStatus = "idle" | "working" | "blocked" | "done" | "unknown";
+
+export interface HerdrPane {
+  paneId: string;
+  tabId: string;
+  workspaceId: string;
+  agent?: string;
+  status: HerdrAgentStatus;
+  cwd: string;
+  session?: { kind: "id" | "path"; value: string };
+}
+
+export interface HerdrSnapshot {
+  panes: HerdrPane[];
+  focusedWorkspaceId?: string;
+  tabs: Map<string, { label: string; number: number }>;
+  workspaces: Map<string, { label: string; number: number }>;
+}
+
+/** The `herdr` binary to drive: the one herdr itself advertises, else PATH. */
+export function herdrBin(env: Record<string, string | undefined> = process.env): string | undefined {
+  return env.HERDR_BIN_PATH || Bun.which("herdr") || undefined;
+}
+
+/** Where a session is open in herdr. */
+export interface HerdrLink {
+  paneId: string;
+  tabId: string;
+  workspaceId: string;
+  workspaceLabel: string;
+  tabLabel: string;
+  tabNumber: number;
+  status: HerdrAgentStatus;
+  /** How the pane was matched; `cwd` = no session identity from herdr. */
+  matchedBy: "id" | "path" | "cwd";
+  /** herdr's name for the agent (for `herdr integration install <name>`). */
+  agent: string;
+}
+
+/** `herdr blits · tab 3` */
+export function herdrPlace(l: HerdrLink): string {
+  return `herdr ${l.workspaceLabel || l.workspaceId} · tab ${l.tabNumber || l.tabId}`;
+}
+
+/** herdr agent name ↔ tuiboard provider. */
+export const HERDR_AGENT: Record<AgentProvider, string> = {
+  "claude-code": "claude",
+  codex: "codex",
+  opencode: "opencode",
+  pi: "pi",
+};
+const PROVIDER_OF: Record<string, AgentProvider> = Object.fromEntries(
+  Object.entries(HERDR_AGENT).map(([p, a]) => [a, p as AgentProvider]),
+);
+
+const STATUSES = new Set<HerdrAgentStatus>(["idle", "working", "blocked", "done", "unknown"]);
+
+/** Parse `herdr api snapshot` output. Returns undefined if it isn't one. */
+export function parseHerdrSnapshot(raw: string): HerdrSnapshot | undefined {
+  let data: any;
+  try {
+    data = JSON.parse(raw);
+  } catch {
+    return undefined;
+  }
+  const snap = data?.result?.snapshot ?? data?.snapshot;
+  if (!snap || !Array.isArray(snap.panes)) return undefined;
+  const panes: HerdrPane[] = [];
+  for (const p of snap.panes) {
+    if (typeof p?.pane_id !== "string") continue;
+    const s = p.agent_session;
+    panes.push({
+      paneId: p.pane_id,
+      tabId: String(p.tab_id ?? ""),
+      workspaceId: String(p.workspace_id ?? ""),
+      agent: typeof p.agent === "string" ? p.agent : undefined,
+      status: STATUSES.has(p.agent_status) ? p.agent_status : "unknown",
+      cwd: String(p.cwd ?? ""),
+      session:
+        s && (s.kind === "id" || s.kind === "path") && typeof s.value === "string"
+          ? { kind: s.kind, value: s.value }
+          : undefined,
+    });
+  }
+  const byId = (list: unknown, key: string) =>
+    new Map<string, { label: string; number: number }>(
+      (Array.isArray(list) ? list : [])
+        .filter((x: any) => typeof x?.[key] === "string")
+        .map((x: any) => [x[key], { label: String(x.label ?? ""), number: Number(x.number ?? 0) }]),
+    );
+  return {
+    panes,
+    focusedWorkspaceId: typeof snap.focused_workspace_id === "string" ? snap.focused_workspace_id : undefined,
+    tabs: byId(snap.tabs, "tab_id"),
+    workspaces: byId(snap.workspaces, "workspace_id"),
+  };
+}
+
+/** Compare paths across the formats agents store (`C:/x`, `C:\x`, lossy case). */
+export function samePath(a: string, b: string): boolean {
+  const norm = (p: string) => {
+    let s = p.replaceAll("\\", "/").replace(/\/+$/, "");
+    if (/^[A-Za-z]:/.test(s)) s = s.toLowerCase();
+    return s;
+  };
+  if (!a || !b) return false;
+  const x = norm(a);
+  const y = norm(b);
+  return x === y || x.toLowerCase() === y.toLowerCase();
+}
+
+const STATUS_FROM_HERDR: Partial<Record<HerdrAgentStatus, AgentStatus>> = {
+  working: "live-busy",
+  blocked: "live-blocked",
+  done: "live-done",
+  idle: "live-idle",
+};
+
+/**
+ * Attach herdr links to sessions and let herdr's state win where it knows
+ * it. Panes reporting a session id/path are matched first; panes without one
+ * fall back to "most recent session of that agent in that directory".
+ */
+export function linkHerdrSessions(
+  sessions: AgentSession[],
+  snap: HerdrSnapshot | undefined,
+): AgentSession[] {
+  if (!snap || snap.panes.length === 0) return sessions;
+  const links = new Map<AgentSession, HerdrLink>();
+  const link = (s: AgentSession, p: HerdrPane, matchedBy: HerdrLink["matchedBy"]) => {
+    const tab = snap.tabs.get(p.tabId);
+    links.set(s, {
+      paneId: p.paneId,
+      tabId: p.tabId,
+      workspaceId: p.workspaceId,
+      workspaceLabel: snap.workspaces.get(p.workspaceId)?.label ?? "",
+      tabLabel: tab?.label ?? "",
+      tabNumber: tab?.number ?? 0,
+      status: p.status,
+      matchedBy,
+      agent: p.agent ?? "",
+    });
+  };
+  const agentPanes = snap.panes.filter((p) => p.agent && PROVIDER_OF[p.agent]);
+
+  for (const p of agentPanes) {
+    if (!p.session) continue;
+    const provider = PROVIDER_OF[p.agent!];
+    const { kind, value } = p.session;
+    const s = sessions.find(
+      (x) =>
+        x.provider === provider &&
+        !links.has(x) &&
+        (kind === "id"
+          ? x.sessionId === value
+          : samePath(x.sourcePath, value) || value.includes(x.sessionId)),
+    );
+    if (s) link(s, p, kind);
+  }
+  for (const p of agentPanes) {
+    if (p.session) continue;
+    const provider = PROVIDER_OF[p.agent!];
+    const s = sessions
+      .filter((x) => x.provider === provider && !links.has(x) && samePath(x.cwd, p.cwd))
+      .sort((a, b) => b.lastActivityMs - a.lastActivityMs)[0];
+    if (s) link(s, p, "cwd");
+  }
+
+  if (links.size === 0) return sessions;
+  return sessions.map((s) => {
+    const l = links.get(s);
+    if (!l) return s;
+    return { ...s, herdr: l, status: STATUS_FROM_HERDR[l.status] ?? s.status };
+  });
+}
+
+/** Agent status glyph style — the same two herdr offers. */
+export type IndicatorStyle = "dots" | "symbols";
+
+/** One synchronous snapshot, for CLI/dev scripts. */
+export function readHerdrSnapshotOnce(bin = Bun.which("herdr") ?? undefined): HerdrSnapshot | undefined {
+  if (!bin) return undefined;
+  try {
+    const res = Bun.spawnSync([bin, "api", "snapshot"], { stdout: "pipe", stderr: "ignore", timeout: 5000 });
+    return res.exitCode === 0 ? parseHerdrSnapshot(res.stdout.toString()) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+// ─── Polling source ─────────────────────────────────────────────────────────
+
+export interface HerdrSource {
+  snapshot: () => HerdrSnapshot | undefined;
+  onChange: (cb: () => void) => void;
+  dispose: () => void;
+}
+
+export const HERDR_POLL_MS = 2000;
+
+/**
+ * Poll `herdr api snapshot` in the background. Inert when herdr isn't on
+ * PATH (or `bin: null`). A failing call clears the snapshot (server gone)
+ * without noise.
+ */
+export function createHerdrSource(
+  { pollMs = HERDR_POLL_MS, bin = Bun.which("herdr") }: { pollMs?: number; bin?: string | null } = {},
+): HerdrSource {
+  let current: HerdrSnapshot | undefined;
+  let lastRaw = "";
+  const listeners: (() => void)[] = [];
+  if (!bin) return { snapshot: () => undefined, onChange: () => {}, dispose: () => {} };
+
+  let inFlight = false;
+  let disposed = false;
+  const poll = async () => {
+    if (inFlight || disposed) return;
+    inFlight = true;
+    try {
+      const proc = Bun.spawn([bin, "api", "snapshot"], {
+        stdout: "pipe",
+        stderr: "ignore",
+        windowsHide: true,
+      });
+      const timer = setTimeout(() => proc.kill(), 5000);
+      const out = await new Response(proc.stdout).text();
+      clearTimeout(timer);
+      const code = await proc.exited;
+      const snap = code === 0 ? parseHerdrSnapshot(out) : undefined;
+      // Only the parts we use decide whether anything changed.
+      const key = snap
+        ? JSON.stringify([snap.panes, [...snap.tabs], [...snap.workspaces]])
+        : "";
+      if (key !== lastRaw && !disposed) {
+        lastRaw = key;
+        current = snap;
+        for (const cb of listeners) cb();
+      }
+    } catch {
+      // herdr vanished mid-call — try again next tick
+    } finally {
+      inFlight = false;
+    }
+  };
+  void poll();
+  const timer = setInterval(poll, pollMs);
+  timer.unref?.();
+  return {
+    snapshot: () => current,
+    onChange: (cb) => listeners.push(cb),
+    dispose: () => {
+      disposed = true;
+      clearInterval(timer);
+    },
+  };
+}

package/src/store/index.ts

@@ -29,7 +29,16 @@ import {
   createBoardWatcher,
   type BoardWatcher,
 } from "~/io/watcher";
-import { createAgentsStore, type AgentsStore } from "./agents";
+import {
+  HARNESS,
+  createAgentsStore,
+  filterSessions,
+  type AgentSession,
+  type AgentsFilter,
+  type AgentsStore,
+} from "./agents";
+import { AGENT_ADAPTERS } from "./agent-adapters";
+import { createHerdrSource } from "./herdr";
 import {
   createCalendarStore,
   createGoogleEvent,
@@ -259,6 +268,10 @@ export interface UIState {
   marked: Record<string, true>;
   /** Active filter. */
   filter: "all" | "today" | "overdue" | "tomorrow" | "followup";
+  /** Agents-zone harness filter (`f` while the Agents zone is active). */
+  agentsFilter: AgentsFilter;
+  /** Outcome of the last Enter (open session), shown in that session's detail. */
+  lastLaunch?: { sessionId: string; ok: boolean; text: string; ts: number };
   /** Banner messages (errors, conflicts, undo notifications). */
   banner?: { kind: "info" | "warn" | "error"; text: string; ts: number };
   /** Open modal, if any. Keyboard handler routes input to the modal when set. */
@@ -349,6 +362,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       view: "kanban",
       marked: {},
       filter: "all",
+      agentsFilter: "all",
     },
     undo: [],
     rev: 0,
@@ -362,12 +376,12 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     initialBoards.map((b) => b.board.filepath),
   );
 
-  // Agents store has its own lifecycle (chokidar watcher on ~/.claude).
-  // Shared dispose() boundary below so SIGINT cleans both. When the agents
-  // zone is disabled we skip the watcher entirely (no `~/.claude` reads at all)
-  // and hand back an inert stub.
+  // Agents store has its own lifecycle (chokidar watcher on each agent CLI's
+  // session dirs). Shared dispose() boundary below so SIGINT cleans both. When
+  // the agents zone is disabled we skip the watcher entirely (no session reads
+  // at all) and hand back an inert stub.
   const agentsStore: AgentsStore = enabledZones.agents
-    ? createAgentsStore()
+    ? createAgentsStore(AGENT_ADAPTERS, { herdr: createHerdrSource() })
     : noopAgentsStore();
   // Calendar feeds (read-only) merged into the Agenda zone. Skipped entirely
   // (no network) when the agenda zone is disabled.
@@ -1230,6 +1244,28 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     setState("ui", "zoomed", (z: boolean) => !z);
   }
 
+  /**
+   * Sessions the Agents zone lists, after the harness filter. The dashboard
+   * strip additionally hides archived ones — they sort last, so row indices
+   * into this list stay valid for both views.
+   */
+  function agentSessions(): AgentSession[] {
+    return filterSessions(agentsStore.sessions(), state.ui.agentsFilter);
+  }
+
+  function setLastLaunch(sessionId: string, ok: boolean, text: string): void {
+    setState("ui", "lastLaunch", { sessionId, ok, text, ts: Date.now() });
+  }
+
+  /** Cycle the Agents-zone filter: all → cc → cx → oc → pi → all. */
+  function cycleAgentsFilter(): AgentsFilter {
+    const cycle: AgentsFilter[] = ["all", ...(Object.keys(HARNESS) as AgentsFilter[])];
+    const next = cycle[(cycle.indexOf(state.ui.agentsFilter) + 1) % cycle.length]!;
+    setState("ui", "agentsFilter", next);
+    setState("ui", "row", 0);
+    return next;
+  }
+
   function setFilter(f: UIState["filter"]): void {
     setState("ui", "filter", f);
     // The cursor's row was an index into the unfiltered list — reset to top
@@ -1308,7 +1344,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
 
   /**
    * Manual full refresh (the `r` key). Re-reads every board from disk, rescans
-   * Claude Code agents, and force-refetches the Agenda's calendar (bypassing
+   * agent sessions, and force-refetches the Agenda's calendar (bypassing
    * the 30-min cache). Lets the user pull in external changes — a calendar
    * event edited in the browser, a board touched elsewhere — without leaving
    * tuiboard. Boards normally auto-reload via the file watcher; this also
@@ -1696,6 +1732,10 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     config,
     activeBoard,
     agents: agentsStore,
+    agentSessions,
+    agentIndicators: config.statusIndicators,
+    cycleAgentsFilter,
+    setLastLaunch,
     calendar: calendarStore,
     // queries
     getBoardByPath,
@@ -1781,7 +1821,7 @@ export type TuiStore = ReturnType<typeof createTuiStore>;
 /** Inert agents store for when the agents zone is disabled — no chokidar
  *  watcher, no `~/.claude` reads at all. */
 function noopAgentsStore(): AgentsStore {
-  return { sessions: () => [], refresh: () => {}, dispose: async () => {} };
+  return { sessions: () => [], herdr: () => undefined, refresh: () => {}, dispose: async () => {} };
 }
 
 /** Inert calendar store for when the agenda zone is disabled — no fetching. */

package/src/ui/AgentRow.tsx

@@ -1,36 +1,95 @@
 /**
- * Single-line render of an AgentSession. Used in both AgentsBar (compact
- * dashboard strip) and AgentsOnly (fullscreen list).
+ * Render of an AgentSession, in two densities:
  *
- * Layout: cursor · status-dot · name · git branch  ……right-pinned: cwd_short · age
+ *   line  (AgentsBar — the 5-row dashboard strip)
+ *     cursor · status · harness · name · branch · model ……right-pinned: cwd_short · age
+ *     Fitted to the measured row width (see agent-line.ts): on a narrow row the
+ *     model goes first, then the branch, then the cwd — the name survives longest.
+ *
+ *   card  (AgentsOnly — fullscreen / zoomed Agents view)
+ *     cursor · status · harness · name ………………………………… age
+ *              model · branch · cwd                         (dimmed)
  */
 
-import { Show, createMemo } from "solid-js";
+import { Show, createMemo, createSignal, onMount } from "solid-js";
+import { homedir } from "node:os";
 
+import { layoutCardDetails, layoutCardName, layoutLine } from "~/ui/agent-line";
 import { T } from "~/ui/glyphs";
-import { formatAge, type AgentSession, type AgentStatus } from "~/store/agents";
+import { herdrPlace, type IndicatorStyle } from "~/store/herdr";
+import {
+  HARNESS,
+  cwdShort,
+  formatAge,
+  shortModel,
+  type AgentProvider,
+  type AgentSession,
+  type AgentStatus,
+} from "~/store/agents";
 
 const STATUS_COLOR: Record<AgentStatus, string> = {
-  "live-busy": T.today,     // bright accent for actively-running
-  "live-idle": T.scheduled, // warm but quieter
-  "stale-pid": T.bannerWarn,
-  "dormant":   T.textDim,
-  "archived":  T.textDone,
+  "live-blocked": T.overdue,  // needs you
+  "live-busy":    T.today,    // bright accent for actively-running
+  "live-done":    T.done,     // finished, not looked at yet
+  "live-idle":    T.scheduled, // warm but quieter
+  "stale":        T.bannerWarn,
+  "dormant":      T.textDim,
+  "archived":     T.textDone,
 };
 
-const STATUS_GLYPH: Record<AgentStatus, string> = {
-  "live-busy": "●",
-  "live-idle": "○",
-  "stale-pid": "△",
-  "dormant":   "·",
-  "archived":  "·",
+/**
+ * herdr's two `status_indicators` styles, copied as-is so the same state reads
+ * the same in both tools. `stale` is tuiboard's own (no herdr equivalent).
+ */
+const STATUS_GLYPH: Record<IndicatorStyle, Record<AgentStatus, string>> = {
+  dots: {
+    "live-blocked": "●",
+    "live-busy":    "●",
+    "live-done":    "●",
+    "live-idle":    "○",
+    "stale":        "△",
+    "dormant":      "·",
+    "archived":     "·",
+  },
+  symbols: {
+    "live-blocked": "×",
+    "live-busy":    "◐",
+    "live-done":    "✓",
+    "live-idle":    "○",
+    "stale":        "△",
+    "dormant":      "·",
+    "archived":     "·",
+  },
+};
+
+
+
+/** One hue per harness so the badge reads before the letters do. */
+export const HARNESS_COLOR: Record<AgentProvider, string> = {
+  "claude-code": T.warm,    // orange
+  codex:         T.accent,  // blue-cyan
+  opencode:      "#d27ee0", // violet-fuchsia
+  pi:            "#c3d94e", // acid yellow-green
 };
 
+/** Card cwd: `~`-relative when under $HOME, shortened when still long. */
+const HOME = homedir();
+const CARD_CWD_MAX = 60;
+function cardCwd(cwd: string): string {
+  const underHome = cwd === HOME || cwd.startsWith(HOME + "/") || cwd.startsWith(HOME + "\\");
+  const shown = underHome ? "~" + cwd.slice(HOME.length) : cwd;
+  return shown.length > CARD_CWD_MAX ? cwdShort(cwd) : shown;
+}
+
 interface AgentRowProps {
   session: AgentSession;
   cursor?: boolean;
   /** Maximum chars for displayName before truncation. Default 40. */
   nameMaxChars?: number;
+  /** `line` (default) for the dashboard strip, `card` for the fullscreen view. */
+  variant?: "line" | "card";
+  /** Status glyph style (default symbols, as in herdr). */
+  indicators?: IndicatorStyle;
   onClick?: () => void;
 }
 
@@ -43,42 +102,121 @@ export function AgentRow(props: AgentRowProps) {
     const n = props.session.displayName;
     return n.length > nameMax() ? n.slice(0, nameMax() - 1) + "…" : n;
   });
+  const model = createMemo(() => shortModel(props.session.model));
+
+  // Measured row width; undefined until the first layout pass.
+  const [width, setWidth] = createSignal<number | undefined>();
+  let rowRef: { width: number } | undefined;
+  const measure = () => {
+    if (rowRef && rowRef.width > 0) setWidth(rowRef.width);
+  };
+  onMount(() => setTimeout(measure, 0));
+  const sizeProps = {
+    ref: (r: { width: number }) => (rowRef = r),
+    onSizeChange: measure,
+  };
+
+  const line = createMemo(() =>
+    layoutLine(
+      {
+        name: displayName(),
+        branch: props.session.gitBranch,
+        model: model(),
+        cwd: props.session.cwdShort,
+        age: ageStr().padStart(3),
+      },
+      width(),
+    ),
+  );
+  const cardName = createMemo(() => layoutCardName(displayName(), width()));
+  const details = createMemo(() =>
+    layoutCardDetails(
+      [
+        model(),
+        props.session.herdr && herdrPlace(props.session.herdr),
+        props.session.gitBranch,
+        cardCwd(props.session.cwd),
+      ],
+      width(),
+    ),
+  );
+
+  // cursor · status glyph · harness badge — shared by both variants.
+  const lead = () => [
+    <span style={{ fg: props.cursor ? T.accent : T.textDim }}>
+      {props.cursor ? "▶ " : "  "}
+    </span>,
+    <span style={{ fg: STATUS_COLOR[props.session.status] }}>
+      {STATUS_GLYPH[props.indicators ?? "symbols"][props.session.status]}{" "}
+    </span>,
+    <span style={{ fg: HARNESS_COLOR[props.session.provider] }}>
+      {HARNESS[props.session.provider].code}{" "}
+    </span>,
+  ];
 
   return (
-    <box
-      style={{
-        flexDirection: "row",
-        paddingLeft: 1,
-        paddingRight: 1,
-        backgroundColor: props.cursor ? T.cardBgCursor : undefined,
-      }}
-      onMouseDown={props.onClick ? (() => props.onClick!()) : undefined}
+    <Show
+      when={props.variant === "card"}
+      fallback={
+        <box
+          {...sizeProps}
+          style={{
+            flexDirection: "row",
+            paddingLeft: 1,
+            paddingRight: 1,
+            backgroundColor: props.cursor ? T.cardBgCursor : undefined,
+          }}
+          onMouseDown={props.onClick ? (() => props.onClick!()) : undefined}
+        >
+          {/* `truncate` stays on as a safety net only — layoutLine already
+              fits the fields to the measured width with a tail cut, while
+              OpenTUI's own truncation would elide mid-string. */}
+          <text style={{ flexGrow: 1, flexShrink: 1 }} wrapMode="none" truncate>
+            {lead()}
+            <span style={{ fg: T.text }}>{line().name}</span>
+            <Show when={line().branch}>
+              <span style={{ fg: T.warmDim }}>{"  "}{line().branch}</span>
+            </Show>
+            <Show when={line().model}>
+              <span style={{ fg: T.textDim }}>{"  "}{line().model}</span>
+            </Show>
+          </text>
+          {/* cwd + age pinned together on the right. The age is right-aligned in a
+              fixed-width field (pad to 3: "59m" / "23h" / "10d") so the END of each
+              cwd lands on the same column across rows — a 1- vs 2-digit age no
+              longer shoves the directory names out of vertical alignment. */}
+          <text style={{ flexShrink: 0 }} wrapMode="none">
+            <span style={{ fg: T.textDim }}>{"  "}{line().right}</span>
+          </text>
+        </box>
+      }
     >
-      {/* `truncate` is on as a safety net — our own displayName tail
-          truncation in AgentRow normally controls the visible string,
-          but OpenTUI's clip-at-cell-bound prevents bleed into adjacent
-          renderables in edge cases (terminal emoji width quirks etc.). */}
-      <text style={{ flexGrow: 1, flexShrink: 1 }} wrapMode="none" truncate>
-        <span style={{ fg: props.cursor ? T.accent : T.textDim }}>
-          {props.cursor ? "▶ " : "  "}
-        </span>
-        <span style={{ fg: STATUS_COLOR[props.session.status] }}>
-          {STATUS_GLYPH[props.session.status]}{" "}
-        </span>
-        <span style={{ fg: T.text }}>{displayName()}</span>
-        <Show when={props.session.gitBranch}>
-          <span style={{ fg: T.textDim }}>{"  "}{props.session.gitBranch}</span>
-        </Show>
-      </text>
-      {/* cwd + age pinned together on the right. The age is right-aligned in a
-          fixed-width field (pad to 3: "59m" / "23h" / "10d") so the END of each
-          cwd lands on the same column across rows — a 1- vs 2-digit age no
-          longer shoves the directory names out of vertical alignment. */}
-      <text style={{ flexShrink: 0 }} wrapMode="none">
-        <span style={{ fg: T.textDim }}>
-          {props.session.cwdShort}{"  "}{ageStr().padStart(3)}
-        </span>
-      </text>
-    </box>
+      <box
+        {...sizeProps}
+        style={{
+          flexDirection: "column",
+          paddingLeft: 1,
+          paddingRight: 1,
+          backgroundColor: props.cursor ? T.cardBgCursor : undefined,
+        }}
+        onMouseDown={props.onClick ? (() => props.onClick!()) : undefined}
+      >
+        <box style={{ flexDirection: "row" }}>
+          <text style={{ flexGrow: 1, flexShrink: 1 }} wrapMode="none" truncate>
+            {lead()}
+            <span style={{ fg: T.text }}>{cardName()}</span>
+          </text>
+          <text style={{ flexShrink: 0 }} wrapMode="none">
+            <span style={{ fg: T.textDim }}>{"  "}{ageStr().padStart(3)}</span>
+          </text>
+        </box>
+        {/* Indent = width of "▶ ● cc " so the details line up under the name. */}
+        <box style={{ flexDirection: "row", paddingLeft: 7 }}>
+          <text style={{ flexGrow: 1, flexShrink: 1 }} wrapMode="none" truncate>
+            <span style={{ fg: T.textDim }}>{details()}</span>
+          </text>
+        </box>
+      </box>
+    </Show>
   );
 }