tuiboard 0.10.0 → 0.12.0

package/src/ui/Modal.tsx

@@ -11,7 +11,7 @@
  * checks `ui.modal` first and bails if set (only Escape passes through).
  */
 
-import { For, Show, createContext, createMemo, createSignal, useContext } from "solid-js";
+import { For, Show, createContext, createEffect, createMemo, createSignal, useContext } from "solid-js";
 
 import { isTask } from "~/parser/markdown";
 import {
@@ -19,9 +19,11 @@ import {
   parseQuickAdd,
   parseTimeBlockShortcut,
 } from "~/store/parsers";
-import { ATTR, T } from "~/ui/glyphs";
+import { ATTR, T, cellWidth } from "~/ui/glyphs";
 import { AGENDA_WIDTH } from "~/ui/layout";
 import { formatHm } from "~/store/timeline";
+import { HARNESS } from "~/store/agents";
+import { HARNESS_COLOR } from "~/ui/AgentRow";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
@@ -919,6 +921,17 @@ function AgentDetailModal(props: { store: TuiStore; modal: Extract<NonNullable<T
               <span style={{ fg: T.textDim }}>session   </span>
               <span style={{ fg: T.accent }}>{s().sessionId}</span>
             </text>
+            <text>
+              <span style={{ fg: T.textDim }}>harness   </span>
+              <span style={{ fg: HARNESS_COLOR[s().provider] }}>{HARNESS[s().provider].code}</span>
+              <span style={{ fg: T.text }}>{"  "}{HARNESS[s().provider].name}</span>
+            </text>
+            <Show when={s().model}>
+              <text>
+                <span style={{ fg: T.textDim }}>model     </span>
+                <span style={{ fg: T.text }}>{s().model}</span>
+              </text>
+            </Show>
             <text>
               <span style={{ fg: T.textDim }}>status    </span>
               <span style={{ fg: T.text }}>{s().status}</span>
@@ -973,17 +986,37 @@ function AgentDetailModal(props: { store: TuiStore; modal: Extract<NonNullable<T
                 </span>
               </text>
             </Show>
+            <Show
+              when={
+                props.store.state.ui.lastLaunch?.sessionId === s().sessionId
+                  ? props.store.state.ui.lastLaunch
+                  : undefined
+              }
+            >
+              {(l: () => NonNullable<TuiStore["state"]["ui"]["lastLaunch"]>) => (
+                <>
+                  <box style={{ height: 1 }} />
+                  <text>
+                    <span style={{ fg: T.textDim }}>last Enter ({new Date(l().ts).toLocaleTimeString()}):</span>
+                  </text>
+                  <text wrapMode="word">
+                    <span style={{ fg: l().ok ? T.done : T.overdue }}>{l().text}</span>
+                  </text>
+                </>
+              )}
+            </Show>
             <box style={{ height: 1 }} />
             <text>
               <span style={{ fg: T.textDim }}>
-                resume — Enter opens this in WezTerm; c copies this command to paste anywhere:
+                resume — Enter opens this in a new terminal tab; c copies this command to paste anywhere:
               </span>
             </text>
             <text wrapMode="word">
               <span style={{ fg: T.scheduled }}>
                 {props.store.config.copyResumeCommand
                   .replaceAll("{cwd}", s().cwd)
-                  .replaceAll("{sessionId}", s().sessionId)}
+                  .replaceAll("{sessionId}", s().sessionId)
+                  .replaceAll("{resume}", s().resumeCommand)}
               </span>
             </text>
           </box>
@@ -1001,72 +1034,234 @@ function truncate(s: string, n: number): string {
 
 // ─── Help ────────────────────────────────────────────────────────────────────
 
+/**
+ * Width (cells) of the key column. The longest key label is 15 cells
+ * ("shift+click row"), so 16 leaves room for a one-cell separator and keeps
+ * every description starting at the same column. `cellWidth` (not `.length`)
+ * is used so wide arrow/emoji glyphs are budgeted correctly.
+ */
+const HELP_KEYW = 16;
+
+interface HelpSection {
+  emoji: string;
+  title: string;
+  /** Scope note shown dim under the header (kept verbatim from the original). */
+  note?: string;
+  /** [keyLabel, description] pairs — descriptions are verbatim. */
+  rows: [string, string][];
+}
+
+const HELP_SECTIONS: HelpSection[] = [
+  {
+    emoji: "🧭",
+    title: "Navigation",
+    rows: [
+      ["h j k l  ←↑↓→", "Move cursor inside the active zone"],
+      ["Tab", "Next board (kanban zone)"],
+      ["+", "New board — create one, or adopt files you have"],
+      ["1..9", "Jump to board N"],
+      ["v", "Toggle Today/Tomorrow planner panel focus"],
+      ["Shift-Tab", "Cycle active zone (planner → board → timeline → agents)"],
+      ["F1 / F2 / F3", "Toggle visibility of Planner / Timeline / Agents zones"],
+      ["z", "Zoom active zone (or column) to full screen"],
+      ["r", "Refresh everything (boards from disk, agents, agenda calendar)"],
+    ],
+  },
+  {
+    emoji: "⚙️",
+    title: "Task actions",
+    note: "work in board, planner, AND timeline zones",
+    rows: [
+      ["Enter", "Toggle done"],
+      ["o", "Open detail view"],
+      ["e", "Edit task text"],
+      ["s", "Schedule date modal (t/m/+N/lun/YYYY-MM-DD — same t/m as the board)"],
+      ["t", "Set scheduled = today"],
+      ["m", "Set scheduled = tomorrow"],
+      [".", "Schedule now — time block at next 15-min slot (30min)"],
+      ["b", "Set time block modal"],
+      ["p", "Cycle priority (none → 🔺 → ⏫ → 🔼 → 🔽 → ⏬ → none)"],
+      ["a", "Set assignee"],
+      ["d", "Delete task (with confirm)"],
+      ["X", "Archive task → moves to Archive column"],
+      ["C", "Copy task to clipboard (markdown line)"],
+    ],
+  },
+  {
+    emoji: "📅",
+    title: "Agenda — day navigation",
+    note: "works from any zone",
+    rows: [
+      ["[ / ]", "Previous / next day (tasks + calendar events)"],
+      ["\\", "Jump back to today"],
+    ],
+  },
+  {
+    emoji: "⏰",
+    title: "Agenda — scheduling",
+    rows: [
+      ["n / click slot", "New Google Calendar event (needs: calendar-setup google --write) append date+time: Lunch tomorrow 12-13 · Review 2026-06-10 15-16 · Holiday 25-12 allday"],
+      ["click an event", "Select an editable Google event — then e edit · d delete · Esc"],
+      ["c (any zone)", "Toggle ARM MODE — then click a task, click a slot, repeat"],
+      ["click empty row", "Place the armed task here (30-min block, or move if it has one)"],
+      ["click band", "Arm an existing block (or place the armed task at its start)"],
+      ["shift+click row", "While armed (existing block): resize end to that row"],
+      ["j / k", "While armed: nudge block ±15 min"],
+      ["+ / -", "While armed: resize block end ±15 min"],
+      ["Enter", "While armed: commit + jump to source task"],
+      ["Esc", "Disarm / exit arm mode"],
+    ],
+  },
+  {
+    emoji: "📋",
+    title: "Board-only actions",
+    rows: [
+      ["n", "New task in current column (quick-add syntax)"],
+      ["g", "Grab task — h/l then moves it between columns; g/Esc to drop"],
+      ["f", "Cycle board filter: all → today → overdue → tomorrow → followup (Agents zone: harness filter)"],
+      ["/", "Search task titles — jumps cursor to first match"],
+    ],
+  },
+  {
+    emoji: "🤖",
+    title: "Agents zone",
+    rows: [
+      ["Enter", "Open (resume) the selected session in a new terminal tab/window"],
+      ["c", "Copy a 'cd + resume' command for the session"],
+      ["o", "Session detail (harness, model, cwd, branch, last prompts, resume cmd)"],
+      ["f", "Filter by harness: all → cc Claude Code → cx Codex → oc OpenCode → pi Pi"],
+    ],
+  },
+  {
+    emoji: "☑️",
+    title: "Multi-select",
+    rows: [
+      ["Space", "Mark / unmark task (cursor stays — mark in any order) Every task action (done/schedule/time block/assign/priority/archive/delete) then applies to ALL marked"],
+      ["Esc", "Clear the selection (when no modal is open)"],
+    ],
+  },
+  {
+    emoji: "📦",
+    title: "Bulk",
+    rows: [["T", "Reset ALL overdue tasks (any board) to today"]],
+  },
+  {
+    emoji: "🌐",
+    title: "Global",
+    rows: [
+      ["Ctrl-Z", "Undo last mutation"],
+      ["?", "This help"],
+      ["q · Ctrl-C", "Quit"],
+    ],
+  },
+];
+
+/**
+ * Flattened render+scroll units: one "header" block per section (carrying its
+ * optional note) followed by one "row" block per shortcut. `ui.helpScroll` is
+ * an index into this list; `j`/`k` step it and the matching `<box id>` is
+ * scrolled into view.
+ */
+type HelpBlock =
+  | { kind: "header"; emoji: string; title: string; note?: string }
+  | { kind: "row"; keyLabel: string; desc: string };
+
+const HELP_BLOCKS: HelpBlock[] = HELP_SECTIONS.flatMap((s) => [
+  { kind: "header", emoji: s.emoji, title: s.title, note: s.note } as HelpBlock,
+  ...s.rows.map(([keyLabel, desc]) => ({ kind: "row", keyLabel, desc }) as HelpBlock),
+]);
+
+/** Dim dot leader that pads `key` out to the fixed key column (with one leading
+ *  separator space). Empty for keys that already fill the column. */
+function helpDots(key: string): string {
+  const n = HELP_KEYW - cellWidth(key) - 1;
+  return n > 0 ? "·".repeat(n) : "";
+}
+
+/** Minimal structural view of OpenTUI's <scrollbox> ref (mirrors TimelineView). */
+interface ScrollBoxLike {
+  scrollChildIntoView(id: string): void;
+}
+
+/**
+ * Keyboard reference.
+ *
+ * Each shortcut is a SINGLE full-width `<text wrapMode="word">` (key + dim dot
+ * leader + description as spans). A single full-width text manages its own
+ * wrapped height correctly; a wrapping `<text>` placed as a flex *sibling* in a
+ * row does NOT (the next row overpaints it — the "bleed-into-neighbor" glitch
+ * documented in TaskRow). When a description wraps it returns to column 0 in the
+ * dim description color, visually distinct from the accent key.
+ *
+ * The whole list lives in a `<scrollbox>` so it never clips on short terminals;
+ * `j`/`k` move `ui.helpScroll` and the focused block is scrolled into view.
+ */
 function HelpModal(props: { store: TuiStore }) {
-  void props;
+  let scrollBoxRef: ScrollBoxLike | undefined;
+
+  createEffect(() => {
+    const raw = props.store.state.ui.helpScroll;
+    const clamped = Math.max(0, Math.min(raw, HELP_BLOCKS.length - 1));
+    if (clamped !== raw) {
+      props.store.setHelpScroll(clamped);
+      return; // effect re-runs with the corrected value
+    }
+    scrollBoxRef?.scrollChildIntoView(`help-b${clamped}`);
+  });
+
   return (
-    <DialogShell title="tuiboard — keyboard reference" hint="Esc/? to close" width={92}>
-      <text>
-        <span style={{ fg: T.textDim }}>{"Navigation\n"}</span>
-        <span style={{ fg: T.text }}>{"  h j k l  ←↑↓→     Move cursor inside the active zone\n"}</span>
-        <span style={{ fg: T.text }}>{"  Tab               Next board (kanban zone)\n"}</span>
-        <span style={{ fg: T.text }}>{"  +                 New board — create one, or adopt files you have\n"}</span>
-        <span style={{ fg: T.text }}>{"  z                 Focus one pane (automatic below 100 columns)\n"}</span>
-        <span style={{ fg: T.text }}>{"  1..9              Jump to board N\n"}</span>
-        <span style={{ fg: T.text }}>{"  v                 Toggle Today/Tomorrow planner panel focus\n"}</span>
-        <span style={{ fg: T.text }}>{"  Shift-Tab         Cycle active zone (planner → board → timeline → agents)\n"}</span>
-        <span style={{ fg: T.text }}>{"  F1 / F2 / F3      Toggle visibility of Planner / Timeline / Agents zones\n"}</span>
-        <span style={{ fg: T.text }}>{"  z                 Zoom active zone (or column) to full screen\n"}</span>
-        <span style={{ fg: T.text }}>{"  r                 Refresh everything (boards from disk, agents, agenda calendar)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nTask actions (work in board, planner, AND timeline zones)\n"}</span>
-        <span style={{ fg: T.text }}>{"  Enter             Toggle done\n"}</span>
-        <span style={{ fg: T.text }}>{"  o                 Open detail view\n"}</span>
-        <span style={{ fg: T.text }}>{"  e                 Edit task text\n"}</span>
-        <span style={{ fg: T.text }}>{"  s                 Schedule date modal (t/m/+N/lun/YYYY-MM-DD — same t/m as the board)\n"}</span>
-        <span style={{ fg: T.text }}>{"  t                 Set scheduled = today\n"}</span>
-        <span style={{ fg: T.text }}>{"  m                 Set scheduled = tomorrow\n"}</span>
-        <span style={{ fg: T.text }}>{"  .                 Schedule now — time block at next 15-min slot (30min)\n"}</span>
-        <span style={{ fg: T.text }}>{"  b                 Set time block modal\n"}</span>
-        <span style={{ fg: T.text }}>{"  p                 Cycle priority (none → 🔺 → ⏫ → 🔼 → 🔽 → ⏬ → none)\n"}</span>
-        <span style={{ fg: T.text }}>{"  a                 Set assignee\n"}</span>
-        <span style={{ fg: T.text }}>{"  d                 Delete task (with confirm)\n"}</span>
-        <span style={{ fg: T.text }}>{"  X                 Archive task → moves to Archive column\n"}</span>
-        <span style={{ fg: T.text }}>{"  C                 Copy task to clipboard (markdown line)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) day navigation — works from any zone\n"}</span>
-        <span style={{ fg: T.text }}>{"  [ / ]              Previous / next day (tasks + calendar events)\n"}</span>
-        <span style={{ fg: T.text }}>{"  \\                  Jump back to today\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nAgenda (timeline) scheduling\n"}</span>
-        <span style={{ fg: T.text }}>{"  n / click slot     New Google Calendar event (needs: calendar-setup google --write)\n"}</span>
-        <span style={{ fg: T.text }}>{"                     append date+time: Lunch tomorrow 12-13 · Review 2026-06-10 15-16 · Holiday 25-12 allday\n"}</span>
-        <span style={{ fg: T.text }}>{"  click an event     Select an editable Google event — then e edit · d delete · Esc\n"}</span>
-        <span style={{ fg: T.text }}>{"  c (any zone)       Toggle ARM MODE — then click a task, click a slot, repeat\n"}</span>
-        <span style={{ fg: T.text }}>{"  click empty row    Place the armed task here (30-min block, or move if it has one)\n"}</span>
-        <span style={{ fg: T.text }}>{"  click band         Arm an existing block (or place the armed task at its start)\n"}</span>
-        <span style={{ fg: T.text }}>{"  shift+click row    While armed (existing block): resize end to that row\n"}</span>
-        <span style={{ fg: T.text }}>{"  j / k              While armed: nudge block ±15 min\n"}</span>
-        <span style={{ fg: T.text }}>{"  + / -              While armed: resize block end ±15 min\n"}</span>
-        <span style={{ fg: T.text }}>{"  Enter              While armed: commit + jump to source task\n"}</span>
-        <span style={{ fg: T.text }}>{"  Esc                Disarm / exit arm mode\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nBoard-only actions\n"}</span>
-        <span style={{ fg: T.text }}>{"  n                 New task in current column (quick-add syntax)\n"}</span>
-        <span style={{ fg: T.text }}>{"  g                 Grab task — h/l then moves it between columns; g/Esc to drop\n"}</span>
-        <span style={{ fg: T.text }}>{"  f                 Cycle board filter: all → today → overdue → tomorrow → followup\n"}</span>
-        <span style={{ fg: T.text }}>{"  /                 Search task titles — jumps cursor to first match\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nAgents zone\n"}</span>
-        <span style={{ fg: T.text }}>{"  Enter             Open (resume) the selected session in a new WezTerm tab\n"}</span>
-        <span style={{ fg: T.text }}>{"  c                 Copy a 'cd + claude --resume' command for the session\n"}</span>
-        <span style={{ fg: T.text }}>{"  o                 Session detail (cwd, branch, last prompts, resume cmd)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nMulti-select\n"}</span>
-        <span style={{ fg: T.text }}>{"  Space             Mark / unmark task (cursor stays — mark in any order)\n"}</span>
-        <span style={{ fg: T.text }}>{"                    Every task action (done/schedule/time block/assign/\n"}</span>
-        <span style={{ fg: T.text }}>{"                    priority/archive/delete) then applies to ALL marked\n"}</span>
-        <span style={{ fg: T.text }}>{"  Esc               Clear the selection (when no modal is open)\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nBulk\n"}</span>
-        <span style={{ fg: T.text }}>{"  T                 Reset ALL overdue tasks (any board) to today\n"}</span>
-        <span style={{ fg: T.textDim }}>{"\nGlobal\n"}</span>
-        <span style={{ fg: T.text }}>{"  Ctrl-Z            Undo last mutation\n"}</span>
-        <span style={{ fg: T.text }}>{"  ?                 This help\n"}</span>
-        <span style={{ fg: T.text }}>{"  q · Ctrl-C        Quit\n"}</span>
-      </text>
+    <DialogShell title="tuiboard — keyboard reference" hint="Esc/? close · j/k scroll" width={92}>
+      <scrollbox
+        ref={(r: ScrollBoxLike) => (scrollBoxRef = r)}
+        style={{
+          width: "100%",
+          flexGrow: 1,
+          scrollX: false,
+          scrollY: true,
+          rootOptions: {},
+          contentOptions: {},
+          scrollbarOptions: { visible: false },
+        }}
+      >
+        <For each={HELP_BLOCKS}>
+          {(block, i) => (
+            <box id={`help-b${i()}`} style={{ flexDirection: "column" }}>
+              <Show when={block.kind === "header"}>
+                {/* blank line above every section header except the first */}
+                <Show when={i() > 0}>
+                  <box style={{ height: 1 }} />
+                </Show>
+                <text wrapMode="none" truncate>
+                  <span style={{ fg: T.warm, attributes: ATTR.bold }}>
+                    {`${(block as { emoji: string }).emoji}  ${(block as { title: string }).title}`}
+                  </span>
+                </text>
+                {/* scope note on its own wrapping line, kept verbatim */}
+                <Show when={(block as { note?: string }).note}>
+                  <text wrapMode="word">
+                    <span style={{ fg: T.textDone, attributes: ATTR.italic }}>
+                      {(block as { note: string }).note}
+                    </span>
+                  </text>
+                </Show>
+              </Show>
+              <Show when={block.kind === "row"}>
+                <text wrapMode="word">
+                  <span style={{ fg: T.accent, attributes: ATTR.bold }}>
+                    {(block as { keyLabel: string }).keyLabel}
+                  </span>
+                  <span style={{ fg: T.border }}>
+                    {` ${helpDots((block as { keyLabel: string }).keyLabel)}`}
+                  </span>
+                  <span style={{ fg: T.textDim }}>
+                    {` ${(block as { desc: string }).desc}`}
+                  </span>
+                </text>
+              </Show>
+            </box>
+          )}
+        </For>
+      </scrollbox>
     </DialogShell>
   );
 }

package/src/ui/agent-line.ts

@@ -0,0 +1,95 @@
+/**
+ * Width-aware text layout for AgentRow. Pure (no JSX) so it's unit-testable.
+ *
+ * OpenTUI's own `truncate` elides in the MIDDLE of a text run, which mangles a
+ * row made of several fields ("Review the harn...badge-23 gpt-5.5…"). We fit
+ * the fields ourselves, dropping the least important ones first and always
+ * cutting at the tail.
+ */
+
+import { cellWidth } from "~/ui/glyphs";
+
+/** "▶ " + "● " + "cc " — cursor, status glyph, harness badge. */
+export const LEAD_CELLS = 7;
+/** Row box paddingLeft + paddingRight. */
+const ROW_PADDING = 2;
+/** Cells kept free for width-measurement drift (same margin as zoomed TaskRow). */
+const DRIFT_MARGIN = 2;
+const GAP = "  ";
+
+/** Cut `s` to at most `max` cells, ending in "…" when cut. */
+export function fitCells(s: string, max: number): string {
+  if (max <= 0) return "";
+  if (cellWidth(s) <= max) return s;
+  let out = "";
+  let w = 0;
+  for (const ch of s) {
+    const cw = cellWidth(ch);
+    if (w + cw > max - 1) break;
+    out += ch;
+    w += cw;
+  }
+  return out + "…";
+}
+
+export interface LineFields {
+  name: string;
+  branch?: string;
+  model?: string;
+  /** Right-pinned, e.g. "…Repos/Personal/tuiboard". */
+  cwd: string;
+  /** Right-pinned, already padded, e.g. " 3m". */
+  age: string;
+}
+
+export interface LineLayout {
+  name: string;
+  branch?: string;
+  model?: string;
+  /** Right-pinned text, empty cwd when there's no room for it. */
+  right: string;
+}
+
+/** Below this many cells for the name, the cwd gives way first. */
+const MIN_NAME_CELLS = 16;
+
+/**
+ * Fit a one-line row into `width` cells (the row box's full width).
+ * Drop order when space runs out: model, then branch (a short model still
+ * shows if only a long branch doesn't fit), then cwd; the name is shortened
+ * last. Unknown width (not measured yet) → everything, uncut.
+ */
+export function layoutLine(f: LineFields, width: number | undefined): LineLayout {
+  if (!width) return { name: f.name, branch: f.branch, model: f.model, right: `${f.cwd}${GAP}${f.age}` };
+  const inner = width - ROW_PADDING - DRIFT_MARGIN - LEAD_CELLS;
+
+  let right = `${f.cwd}${GAP}${f.age}`;
+  if (inner - cellWidth(right) - cellWidth(GAP) < MIN_NAME_CELLS) right = f.age;
+  const budget = inner - cellWidth(right) - cellWidth(GAP);
+
+  const extras = (b?: string, m?: string) =>
+    (b ? cellWidth(GAP + b) : 0) + (m ? cellWidth(GAP + m) : 0);
+  const nameW = cellWidth(f.name);
+  for (const [b, m] of [
+    [f.branch, f.model],
+    [f.branch, undefined],
+    [undefined, f.model],
+    [undefined, undefined],
+  ] as const) {
+    if (nameW + extras(b, m) <= budget) return { name: f.name, branch: b, model: m, right };
+  }
+  return { name: fitCells(f.name, budget), right };
+}
+
+/** Fit the card's detail line (`model · branch · cwd`) with a tail cut. */
+export function layoutCardDetails(parts: (string | undefined)[], width: number | undefined): string {
+  const text = parts.filter((p): p is string => Boolean(p)).join("  ·  ");
+  if (!width) return text;
+  return fitCells(text, width - ROW_PADDING - DRIFT_MARGIN - LEAD_CELLS);
+}
+
+/** Fit the card's title (the age takes GAP + 3 cells on the right). */
+export function layoutCardName(name: string, width: number | undefined): string {
+  if (!width) return name;
+  return fitCells(name, width - ROW_PADDING - DRIFT_MARGIN - LEAD_CELLS - cellWidth(GAP) - 3);
+}

package/src/views/AgentsOnly.tsx

@@ -1,7 +1,7 @@
 /**
- * Fullscreen list of every local Claude Code session.
+ * Fullscreen list of every local agent session (Claude Code, Codex, OpenCode, Pi).
  * `tuiboard --view=agents`. Shows ALL sessions (including archived),
- * scrollable, cursor-navigable. The scrollbox follows the cursor via
+ * scrollable, cursor-navigable, as two-line cards (see AgentRow). The scrollbox follows the cursor via
  * scrollChildIntoView (same trick used in BoardView for active columns).
  */
 
@@ -9,6 +9,7 @@ import { For, Show, createEffect, createMemo } from "solid-js";
 
 import { AgentRow } from "~/ui/AgentRow";
 import { T } from "~/ui/glyphs";
+import { HARNESS } from "~/store/agents";
 import type { TuiStore } from "~/store/index";
 
 interface ScrollBoxLike {
@@ -24,7 +25,9 @@ function rowId(sessionId: string): string {
 export function AgentsOnly(props: { store: TuiStore }) {
   const isActive = () => props.store.state.ui.activeZone === "agents";
   const agentRow = () => props.store.state.ui.row;
-  const sessions = createMemo(() => props.store.agents.sessions());
+  const sessions = createMemo(() => props.store.agentSessions());
+  const filter = () => props.store.state.ui.agentsFilter;
+  const filterTag = () => (filter() === "all" ? "" : ` · ${HARNESS[filter() as keyof typeof HARNESS].code}`);
   let scrollBoxRef: ScrollBoxLike | undefined;
 
   // Auto-scroll the list so the active row is visible. setTimeout(0) waits
@@ -55,7 +58,7 @@ export function AgentsOnly(props: { store: TuiStore }) {
           paddingLeft: 1,
           paddingRight: 1,
         }}
-        title={`┤ Agents · ${sessions().length} sessions ├`}
+        title={`┤ Agents${filterTag()} · ${sessions().length} sessions ├`}
         titleAlignment="left"
       >
         <Show
@@ -63,7 +66,9 @@ export function AgentsOnly(props: { store: TuiStore }) {
           fallback={
             <text>
               <span style={{ fg: T.textDim }}>
-                No sessions found in ~/.claude/projects.
+                {filter() === "all"
+                  ? "No agent sessions found (Claude Code, Codex, OpenCode, Pi)."
+                  : `No ${HARNESS[filter() as keyof typeof HARNESS].name} sessions — press f to change the filter.`}
               </span>
             </text>
           }
@@ -87,6 +92,7 @@ export function AgentsOnly(props: { store: TuiStore }) {
                     session={session}
                     cursor={isActive() && i() === agentRow()}
                     nameMaxChars={120}
+                    variant="card"
                     onClick={() => {
                       props.store.setActiveZone("agents");
                       props.store.setCursor(0, i());