tuiboard 0.11.0 → 0.13.0

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
@@ -95,6 +100,7 @@ export function AgentsBar(props: AgentsBarProps) {
             {(session, i) => (
               <box id={agentRowId(i())}>
                 <AgentRow
+                  indicators={props.store.agentIndicators}
                   session={session}
                   cursor={isActive() && i() === agentRow()}
                   nameMaxChars={48}

package/src/ui/Modal.tsx

@@ -22,6 +22,9 @@ 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 { herdrPlace } from "~/store/herdr";
 import type { TuiStore } from "~/store/index";
 import type { PriorityLevel, TimeBlock } from "~/types";
 
@@ -919,10 +922,42 @@ 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>
             </text>
+            <Show when={s().herdr}>
+              {(h: () => NonNullable<ReturnType<typeof s>["herdr"]>) => (
+                <>
+                  <text>
+                    <span style={{ fg: T.textDim }}>herdr     </span>
+                    <span style={{ fg: T.accent }}>{herdrPlace(h())}</span>
+                    <span style={{ fg: T.textDim }}>
+                      {"  "}pane {h().paneId} · {h().status} · matched by {h().matchedBy}
+                    </span>
+                  </text>
+                  <Show when={h().matchedBy === "cwd"}>
+                    <text wrapMode="word">
+                      <span style={{ fg: T.textDim }}>
+                        {"          "}herdr doesn't report which {h().agent} session this pane is on — run
+                        `herdr integration install {h().agent}` for an exact match.
+                      </span>
+                    </text>
+                  </Show>
+                </>
+              )}
+            </Show>
             <text>
               <span style={{ fg: T.textDim }}>cwd       </span>
               <span style={{ fg: T.text }}>{s().cwd}</span>
@@ -973,17 +1008,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 +1140,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 +1148,11 @@ 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 — or go to it if it's open in herdr"],
+      ["H", "herdr: go to the session, or resume it in a new tab of its project's workspace"],
+      ["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,8 @@ export function AgentsOnly(props: { store: TuiStore }) {
                     session={session}
                     cursor={isActive() && i() === agentRow()}
                     nameMaxChars={120}
+                    variant="card"
+                    indicators={props.store.agentIndicators}
                     onClick={() => {
                       props.store.setActiveZone("agents");
                       props.store.setCursor(0, i());