tuiboard 0.10.0 → 0.12.0

package/src/store/index.ts

@@ -29,7 +29,15 @@ 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 {
   createCalendarStore,
   createGoogleEvent,
@@ -243,6 +251,12 @@ export interface UIState {
    * entries and the calendar overlay. Changed with `[` / `]`; `\` resets to 0.
    */
   agendaOffset: number;
+  /**
+   * Vertical scroll position of the help modal, as a block index (0 = top).
+   * `?` opens the help at 0; `j`/`k` step it. The HelpModal component clamps
+   * the upper bound (it knows the block count) and scrolls that block into view.
+   */
+  helpScroll: number;
   view: ViewMode;
   /**
    * Tasks marked for bulk ops (`Space`). Key format:
@@ -253,6 +267,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. */
@@ -339,9 +357,11 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       grabbing: false,
       armMode: false,
       agendaOffset: 0,
+      helpScroll: 0,
       view: "kanban",
       marked: {},
       filter: "all",
+      agentsFilter: "all",
     },
     undo: [],
     rev: 0,
@@ -355,12 +375,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)
     : noopAgentsStore();
   // Calendar feeds (read-only) merged into the Agenda zone. Skipped entirely
   // (no network) when the agenda zone is disabled.
@@ -379,6 +399,8 @@ export function createTuiStore({ config }: CreateStoreOptions) {
       // change — and spuriously flash "Reloaded after external edit". Skip.
       if (lastWrittenContent.get(filepath) === content) return;
       const { board } = parseBoard(content, { filepath });
+      const boardConfig = config.boards.find((cb) => cb.path === filepath);
+      if (boardConfig?.name) board.name = boardConfig.name;
       const mtimeMs = statMtime(filepath);
       setState(
         "boards",
@@ -1221,6 +1243,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
@@ -1299,7 +1343,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
@@ -1494,6 +1538,8 @@ export function createTuiStore({ config }: CreateStoreOptions) {
   }
 
   function openModal(m: ModalKind): void {
+    // Help always opens scrolled to the top.
+    if (m.kind === "help") setState("ui", "helpScroll", 0);
     setState("ui", "modal", m);
   }
 
@@ -1551,6 +1597,12 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     if (cals.length === 1) void confirmEventPicker();
   }
 
+  /** Scroll the help modal by setting its block index (lower-clamped at 0; the
+   *  HelpModal component enforces the upper bound against its block count). */
+  function setHelpScroll(n: number): void {
+    setState("ui", "helpScroll", Math.max(0, n));
+  }
+
   /** Move the step-2 calendar selection (wraps). */
   function setEventSel(n: number): void {
     setState("ui", "eventPicker", produce((p: EventPicker | undefined) => {
@@ -1679,6 +1731,9 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     config,
     activeBoard,
     agents: agentsStore,
+    agentSessions,
+    cycleAgentsFilter,
+    setLastLaunch,
     calendar: calendarStore,
     // queries
     getBoardByPath,
@@ -1740,6 +1795,7 @@ export function createTuiStore({ config }: CreateStoreOptions) {
     closeModal,
     openEventModal,
     advanceEventToStep2,
+    setHelpScroll,
     setEventSel,
     confirmEventPicker,
     selectCalEvent,

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/BoardView.tsx

@@ -8,7 +8,7 @@
  * board width.
  */
 
-import { For, Show, createEffect, createMemo, createSignal, onMount } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 
 import { isHiddenColumn } from "~/config/loader";
 import { isTask } from "~/parser/markdown";
@@ -122,6 +122,11 @@ export function BoardView(props: BoardViewProps) {
     const colIdx = ui().col;
     if (singlePane() || ui().activeZone === "planner") {
       setScrollX(0);
+      // Refresh viewportW too - the zoomed title budget depends on it.
+      setTimeout(() => {
+        const vw = viewportRef?.width ?? 0;
+        if (vw > 0) setViewportW(vw);
+      }, 0);
       return;
     }
     const cols = props.board.columns;
@@ -178,6 +183,18 @@ export function BoardView(props: BoardViewProps) {
     }, 0);
   });
 
+  // Re-measure on resize while zoomed (the scroll effect above only
+  // reruns on col/zoomed/activeZone changes, not plain resizes).
+  const onResize = () => {
+    // 50ms, not 0ms: give OpenTUI's layout pass time to catch up.
+    setTimeout(() => {
+      const vw = viewportRef?.width ?? 0;
+      if (vw > 0) setViewportW(vw);
+    }, 50);
+  };
+  process.stdout.on("resize", onResize);
+  onCleanup(() => process.stdout.off("resize", onResize));
+
   return (
     <box style={{ flexDirection: "column", flexGrow: 1 }}>
       {/* Clipping viewport: fills the board zone, hides overflow. */}
@@ -216,6 +233,7 @@ export function BoardView(props: BoardViewProps) {
                   zoomed={singlePane() && isActive()}
                   tasksVisible={columnTasksVisible(i())}
                   boxId={columnId(props.board.filepath, originalIndex)}
+                  viewportWidth={viewportW()}
                 />
               );
             }}
@@ -245,6 +263,9 @@ interface ColumnViewProps {
   tasksVisible?: boolean;
   /** Stable DOM-equivalent id used by `scrollChildIntoView`. */
   boxId: string;
+  /** Real measured board viewport width in cells, used to size the
+   * title budget for a zoomed column instead of a hardcoded guess. */
+  viewportWidth?: number;
 }
 
 /** Stable id for a task row inside a column, used by scrollChildIntoView. */
@@ -395,9 +416,19 @@ function ColumnView(props: ColumnViewProps) {
                       }
                       // Column inner cell width for a TaskRow: COL_WIDTH 42 −
                       // border 2 − col padding 2 − TaskRow padding 2 = 36 cols
-                      // (when not zoomed). Zoomed → column grows to fill, so
-                      // ~terminal width − some chrome.
-                      availableWidth={props.zoomed ? 100 : 36}
+                      // (when not zoomed). Zoomed: use the real measured
+                      // viewport width, same 6-cell overhead, plus a 2-cell
+                      // safety margin for width-measurement drift (fixes a
+                      // double-truncation glitch, e.g. "walk t...gh backgro...").
+                      availableWidth={
+                        props.zoomed
+                          ? Math.max(6, (props.viewportWidth ?? 42) - 8)
+                          : 36
+                      }
+                      // Default hardCap (60 chars) was clipping titles well
+                      // short of the zoomed column's real width. Let
+                      // availableWidth alone govern the budget when zoomed.
+                      titleMaxChars={props.zoomed ? 1000 : undefined}
                       onClick={() => {
                         props.store.setActiveZone("board");
                         props.store.setCursor(props.columnIndex, ri());