tuiboard 0.11.0 → 0.12.0

package/src/ui/AgentRow.tsx

@@ -1,19 +1,35 @@
 /**
- * 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 {
+  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,
+  "stale":     T.bannerWarn,
   "dormant":   T.textDim,
   "archived":  T.textDone,
 };
@@ -21,16 +37,35 @@ const STATUS_COLOR: Record<AgentStatus, string> = {
 const STATUS_GLYPH: Record<AgentStatus, string> = {
   "live-busy": "●",
   "live-idle": "○",
-  "stale-pid": "△",
+  "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";
   onClick?: () => void;
 }
 
@@ -43,42 +78,113 @@ 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.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.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>
   );
 }

package/src/ui/AgentsBar.tsx

@@ -12,6 +12,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 {
@@ -31,10 +32,14 @@ export function AgentsBar(props: AgentsBarProps) {
   const isActive = () => props.store.state.ui.activeZone === "agents";
   const agentRow = () => props.store.state.ui.row;
 
-  /** All visible (non-archived) sessions. */
+  /** All visible (non-archived) sessions, after the harness filter. */
   const allShown = createMemo(() =>
-    props.store.agents.sessions().filter((s) => s.status !== "archived"),
+    props.store.agentSessions().filter((s) => s.status !== "archived"),
   );
+  const filterTag = () => {
+    const f = props.store.state.ui.agentsFilter;
+    return f === "all" ? "" : ` · ${HARNESS[f].code}`;
+  };
 
   let scrollBoxRef: ScrollBoxLike | undefined;
 
@@ -68,7 +73,7 @@ export function AgentsBar(props: AgentsBarProps) {
         paddingLeft: 1,
         paddingRight: 1,
       }}
-      title={`┤ Agents (live) · ${allShown().length} ├`}
+      title={`┤ Agents (live)${filterTag()} · ${allShown().length} ├`}
       titleAlignment="left"
     >
       <Show

package/src/ui/Modal.tsx

@@ -22,6 +22,8 @@ import {
 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>
@@ -1085,7 +1118,7 @@ const HELP_SECTIONS: HelpSection[] = [
     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"],
+      ["f", "Cycle board filter: all → today → overdue → tomorrow → followup (Agents zone: harness filter)"],
       ["/", "Search task titles — jumps cursor to first match"],
     ],
   },
@@ -1093,9 +1126,10 @@ const HELP_SECTIONS: HelpSection[] = [
     emoji: "🤖",
     title: "Agents zone",
     rows: [
-      ["Enter", "Open (resume) the selected session in a new WezTerm tab"],
-      ["c", "Copy a 'cd + claude --resume' command for the session"],
-      ["o", "Session detail (cwd, branch, last prompts, resume cmd)"],
+      ["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"],
     ],
   },
   {

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());