@towles/tool 0.0.107 → 0.0.109

package/plugins/tt-agentboard/apps/tui/src/components/DetailPanel.tsx

@@ -0,0 +1,350 @@
+import { createSignal, For, Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { MouseEvent } from "@opentui/core";
+import type { SessionData, Theme } from "@tt-agentboard/runtime";
+import { TUI_AGENT_CLICK_LOG } from "@tt-agentboard/runtime";
+import { appendFileSync } from "node:fs";
+import {
+  SPINNERS,
+  UNSEEN_ICON,
+  BOLD,
+  DIM,
+  SPARK_BLOCKS,
+  TONE_ICONS,
+  toneColor,
+  logResizeDebug,
+} from "../constants";
+
+// --- Sparkline ---
+
+export function buildSparkline(
+  timestamps: number[],
+  width: number,
+  windowMs: number = 30 * 60 * 1000,
+): string {
+  if (timestamps.length === 0 || width <= 0) return "";
+  const now = Date.now();
+  const start = now - windowMs;
+  const bucketSize = windowMs / width;
+  const buckets = Array.from({ length: width }, () => 0);
+
+  for (const ts of timestamps) {
+    if (ts < start) continue;
+    const idx = Math.min(width - 1, Math.floor((ts - start) / bucketSize));
+    buckets[idx]++;
+  }
+
+  const max = Math.max(...buckets, 1);
+  return buckets
+    .map((count: number) => {
+      const level = Math.round((count / max) * (SPARK_BLOCKS.length - 1));
+      return SPARK_BLOCKS[level];
+    })
+    .join("");
+}
+
+// --- Detail Panel ---
+
+export interface DetailPanelProps {
+  session: SessionData;
+  theme: Accessor<Theme>;
+  statusColors: Accessor<Theme["status"]>;
+  spinIdx: Accessor<number>;
+  focusedAgentIdx: number;
+  onDismissAgent: (agent: SessionData["agents"][number]) => void;
+  onFocusAgentPane: (agent: SessionData["agents"][number]) => void;
+  isResizeHover: boolean;
+  isResizing: boolean;
+  onResizeStart: (event: MouseEvent) => void;
+  onResizeDrag: (event: MouseEvent) => void;
+  onResizeEnd: (event?: MouseEvent) => void;
+  onResizeHoverChange: (hovered: boolean) => void;
+}
+
+export function DetailPanel(props: DetailPanelProps) {
+  const P = () => props.theme().palette;
+
+  const agents = () => props.session.agents ?? [];
+  const hasAgents = () => agents().length > 0;
+  const meta = () => props.session.metadata;
+  const hasMeta = () => !!meta();
+  const visibleLogs = () => {
+    const m = meta();
+    if (!m || m.logs.length === 0) return [];
+    return m.logs.slice(-8);
+  };
+
+  const truncDir = () => {
+    const d = props.session.dir;
+    if (!d) return "";
+    const home = process.env.HOME ?? "";
+    const short = home && d.startsWith(home) ? "~" + d.slice(home.length) : d;
+    return short.length > 24 ? "…" + short.slice(short.length - 23) : short;
+  };
+
+  return (
+    <box flexDirection="column" flexShrink={0} paddingLeft={1}>
+      <box height={1}>
+        <text
+          selectable={false}
+          onMouseDown={(event) => {
+            logResizeDebug("separator:onMouseDown", {
+              x: event.x,
+              y: event.y,
+              button: event.button,
+              session: props.session.name,
+            });
+            event.preventDefault();
+            props.onResizeStart(event);
+          }}
+          onMouseDrag={(event) => {
+            logResizeDebug("separator:onMouseDrag", {
+              x: event.x,
+              y: event.y,
+              button: event.button,
+              session: props.session.name,
+            });
+            event.preventDefault();
+            props.onResizeDrag(event);
+          }}
+          onMouseDragEnd={(event) => {
+            logResizeDebug("separator:onMouseDragEnd", {
+              x: event.x,
+              y: event.y,
+              button: event.button,
+              session: props.session.name,
+            });
+            event.preventDefault();
+            props.onResizeEnd(event);
+          }}
+          onMouseUp={(event) => {
+            logResizeDebug("separator:onMouseUp", {
+              x: event.x,
+              y: event.y,
+              button: event.button,
+              session: props.session.name,
+            });
+            event.preventDefault();
+            props.onResizeEnd(event);
+          }}
+          onMouseOver={() => props.onResizeHoverChange(true)}
+          onMouseOut={() => {
+            if (!props.isResizing) props.onResizeHoverChange(false);
+          }}
+          style={{
+            fg: props.isResizing ? P().blue : props.isResizeHover ? P().overlay1 : P().surface2,
+          }}
+        >
+          {"─".repeat(200)}
+        </text>
+      </box>
+
+      {/* Directory */}
+      <text truncate>
+        <span style={{ fg: P().overlay0, attributes: DIM }}>{truncDir()}</span>
+      </text>
+
+      {/* Agent instances */}
+      <Show when={hasAgents()}>
+        <For each={agents()}>
+          {(agent, i) => (
+            <AgentListItem
+              agent={agent}
+              palette={P}
+              statusColors={props.statusColors}
+              spinIdx={props.spinIdx}
+              isKeyboardFocused={i() === props.focusedAgentIdx}
+              onDismiss={() => props.onDismissAgent(agent)}
+              onFocusPane={() => props.onFocusAgentPane(agent)}
+            />
+          )}
+        </For>
+      </Show>
+
+      {/* Metadata: status, progress, logs */}
+      <Show when={hasMeta()}>
+        {(_) => {
+          const m = meta()!;
+          const progressText = () => {
+            const p = m.progress;
+            if (!p) return "";
+            if (p.current != null && p.total != null) return `${p.current}/${p.total}`;
+            if (p.percent != null) return `${Math.round(p.percent * 100)}%`;
+            return "";
+          };
+          return (
+            <box flexDirection="column">
+              <box height={1} />
+
+              {/* Status + progress on one line */}
+              <Show when={m.status || m.progress}>
+                <box flexDirection="row" paddingRight={1}>
+                  <Show when={m.status}>
+                    <text truncate flexGrow={1}>
+                      <span style={{ fg: toneColor(m.status!.tone, P()) }}>
+                        {TONE_ICONS[m.status!.tone ?? "neutral"]} {m.status!.text}
+                      </span>
+                    </text>
+                  </Show>
+                  <Show when={m.progress}>
+                    <text flexShrink={0}>
+                      <span style={{ fg: P().sky }}>
+                        {m.status ? " · " : ""}
+                        {progressText()}
+                        {m.progress!.label ? ` ${m.progress!.label}` : ""}
+                      </span>
+                    </text>
+                  </Show>
+                </box>
+              </Show>
+
+              {/* Log entries */}
+              <Show when={visibleLogs().length > 0}>
+                <For each={visibleLogs()}>
+                  {(entry) => (
+                    <text truncate>
+                      <span style={{ fg: toneColor(entry.tone, P()), attributes: DIM }}>
+                        {TONE_ICONS[entry.tone ?? "neutral"]}
+                      </span>
+                      <Show when={entry.source}>
+                        <span
+                          style={{ fg: P().surface2, attributes: DIM }}
+                        >{` [${entry.source}]`}</span>
+                      </Show>
+                      <span style={{ fg: P().overlay0 }}> {entry.message}</span>
+                    </text>
+                  )}
+                </For>
+              </Show>
+            </box>
+          );
+        }}
+      </Show>
+    </box>
+  );
+}
+
+// --- Agent List Item ---
+
+interface AgentListItemProps {
+  agent: SessionData["agents"][number];
+  palette: Accessor<Theme["palette"]>;
+  statusColors: Accessor<Theme["status"]>;
+  spinIdx: Accessor<number>;
+  isKeyboardFocused: boolean;
+  onDismiss: () => void;
+  onFocusPane: () => void;
+}
+
+function AgentListItem(props: AgentListItemProps) {
+  const P = () => props.palette();
+  const SC = () => props.statusColors();
+  const [isDismissHover, setIsDismissHover] = createSignal(false);
+  const [isFlash, setIsFlash] = createSignal(false);
+
+  const isTerminal = () => ["done", "error", "interrupted"].includes(props.agent.status);
+  const isUnseen = () => isTerminal() && props.agent.unseen === true;
+
+  const icon = () => {
+    if (isUnseen()) return UNSEEN_ICON;
+    if (isTerminal())
+      return props.agent.status === "done" ? "✓" : props.agent.status === "error" ? "✗" : "⚠";
+    if (props.agent.status === "running") return SPINNERS[props.spinIdx() % SPINNERS.length]!;
+    if (props.agent.status === "waiting") return "◉";
+    return "○";
+  };
+
+  const color = () => {
+    if (isTerminal()) {
+      if (props.agent.status === "error") return P().red;
+      if (props.agent.status === "interrupted") return P().peach;
+      return isUnseen() ? P().teal : P().green;
+    }
+    return SC()[props.agent.status];
+  };
+
+  const statusText = () => {
+    if (props.agent.status === "running") return "running";
+    if (props.agent.status === "done") return "done";
+    if (props.agent.status === "error") return "error";
+    if (props.agent.status === "interrupted") return "stopped";
+    if (props.agent.status === "waiting") return "waiting";
+    return "";
+  };
+
+  const triggerFlash = () => {
+    setIsFlash(true);
+    setTimeout(() => setIsFlash(false), 150);
+  };
+
+  const bgColor = () => {
+    if (isFlash()) return P().surface1;
+    if (props.isKeyboardFocused) return P().surface0;
+    return "transparent";
+  };
+
+  return (
+    <box
+      flexDirection="column"
+      flexShrink={0}
+      onMouseDown={(event) => {
+        // Don't trigger focus if clicking the dismiss button
+        if ((event.target as any)?.id === "dismiss") return;
+        appendFileSync(
+          TUI_AGENT_CLICK_LOG,
+          `[${new Date().toISOString()}] clicked agent=${props.agent.agent} thread=${props.agent.threadName ?? "?"}\n`,
+        );
+        triggerFlash();
+        props.onFocusPane();
+      }}
+    >
+      <box height={1} />
+      <box flexDirection="row" backgroundColor={bgColor()} paddingLeft={1}>
+        {/* Content column — name row + thread name row */}
+        <box flexDirection="column" flexGrow={1} paddingRight={1}>
+          {/* Row 1: icon + agent name + status + dismiss */}
+          <box flexDirection="row">
+            <text flexGrow={1} truncate>
+              <span style={{ fg: color() }}>{icon()}</span>
+              <span
+                style={{
+                  fg: props.isKeyboardFocused ? P().text : P().subtext1,
+                  attributes: props.isKeyboardFocused ? BOLD : undefined,
+                }}
+              >
+                {" "}
+                {props.agent.agent}
+              </span>
+            </text>
+            <Show when={!isTerminal() || !isUnseen()}>
+              <text flexShrink={0}>
+                <span style={{ fg: color(), attributes: DIM }}>{statusText()}</span>
+              </text>
+            </Show>
+            <text
+              flexShrink={0}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                props.onDismiss();
+              }}
+              onMouseOver={() => setIsDismissHover(true)}
+              onMouseOut={() => setIsDismissHover(false)}
+            >
+              <span style={{ fg: isDismissHover() ? P().red : P().overlay0 }}>{" ✕"}</span>
+            </text>
+          </box>
+
+          {/* Row 2: thread name */}
+          <Show when={props.agent.threadName}>
+            <text truncate>
+              <span style={{ fg: isUnseen() ? color() : P().overlay0 }}>
+                {props.agent.threadName}
+              </span>
+            </text>
+          </Show>
+        </box>
+      </box>
+    </box>
+  );
+}

package/plugins/tt-agentboard/apps/tui/src/components/DiffStats.tsx

@@ -0,0 +1,33 @@
+import { Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { SessionData, Theme } from "@tt-agentboard/runtime";
+
+export interface DiffStatsProps {
+  session: SessionData;
+  palette: Accessor<Theme["palette"]>;
+}
+
+export function DiffStats(props: DiffStatsProps) {
+  const P = () => props.palette();
+  const s = () => props.session;
+
+  return (
+    <text flexShrink={0}>
+      <Show when={s().filesChanged}>
+        <span style={{ fg: P().overlay0 }}>{s().filesChanged}f </span>
+      </Show>
+      <Show when={s().linesAdded}>
+        <span style={{ fg: P().green }}>+{s().linesAdded} </span>
+      </Show>
+      <Show when={s().linesRemoved}>
+        <span style={{ fg: P().red }}>-{s().linesRemoved} </span>
+      </Show>
+      <Show when={s().commitsDelta > 0}>
+        <span style={{ fg: P().sky }}>{s().commitsDelta}↑</span>
+      </Show>
+      <Show when={s().commitsDelta < 0}>
+        <span style={{ fg: P().peach }}>{Math.abs(s().commitsDelta)}↓</span>
+      </Show>
+    </text>
+  );
+}

package/plugins/tt-agentboard/apps/tui/src/components/SessionCard.tsx

@@ -0,0 +1,177 @@
+import { Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { SessionData, Theme } from "@tt-agentboard/runtime";
+import { SPINNERS, UNSEEN_ICON, BOLD, DIM, toneColor } from "../constants";
+import { DiffStats } from "./DiffStats";
+
+export interface SessionCardProps {
+  session: SessionData;
+  index: number;
+  isFocused: boolean;
+  isCurrent: boolean;
+  spinIdx: Accessor<number>;
+  theme: Accessor<Theme>;
+  statusColors: Accessor<Theme["status"]>;
+  onSelect: () => void;
+}
+
+export function SessionCard(props: SessionCardProps) {
+  const P = () => props.theme().palette;
+  const SC = () => props.statusColors();
+
+  const status = () => props.session.agentState?.status ?? "idle";
+  const unseen = () => props.session.unseen;
+  const runningAgents = () =>
+    props.session.agents?.filter((a) => a.status === "running").length ?? 0;
+
+  const isUnseenTerminal = () => unseen() && ["done", "error", "interrupted"].includes(status());
+
+  const accentColor = () => {
+    if (props.isCurrent) return P().green;
+    if (isUnseenTerminal()) return unseenAccentColor();
+    const s = status();
+    if (s === "error") return P().red;
+    if (s === "interrupted") return P().peach;
+    if (s === "running") return P().yellow;
+    if (props.isFocused) return P().lavender;
+    return "transparent";
+  };
+
+  const unseenAccentColor = () => {
+    const s = status();
+    if (s === "error") return P().red;
+    if (s === "interrupted") return P().peach;
+    return P().teal;
+  };
+
+  const statusIcon = () => {
+    const s = status();
+    if (s === "running") return SPINNERS[props.spinIdx() % SPINNERS.length]!;
+    if (isUnseenTerminal()) return UNSEEN_ICON;
+    return "";
+  };
+
+  const statusColor = () => {
+    if (isUnseenTerminal()) return unseenAccentColor();
+    return SC()[status()];
+  };
+
+  const nameColor = () => {
+    if (props.isFocused) return P().text;
+    if (props.isCurrent) return P().subtext1;
+    return P().subtext0;
+  };
+
+  const indexColor = () => {
+    if (props.isFocused) return P().subtext0;
+    return P().surface2;
+  };
+
+  const truncName = () => {
+    const n = props.session.name;
+    return n.length > 18 ? n.slice(0, 17) + "…" : n;
+  };
+
+  const truncBranch = () => {
+    const b = props.session.branch;
+    if (!b) return "";
+    return b.length > 30 ? b.slice(0, 29) + "…" : b;
+  };
+
+  const hasDiff = () => {
+    const { linesAdded, linesRemoved, commitsDelta, filesChanged } = props.session;
+    return !!(linesAdded || linesRemoved || commitsDelta || filesChanged);
+  };
+
+  const metaSummary = () => {
+    const meta = props.session.metadata;
+    if (!meta) return "";
+    const parts: string[] = [];
+    if (meta.status) parts.push(meta.status.text);
+    if (meta.progress) {
+      if (meta.progress.current != null && meta.progress.total != null) {
+        parts.push(`${meta.progress.current}/${meta.progress.total}`);
+      } else if (meta.progress.percent != null) {
+        parts.push(`${Math.round(meta.progress.percent * 100)}%`);
+      }
+      if (meta.progress.label) parts.push(meta.progress.label);
+    }
+    return parts.join(" · ");
+  };
+
+  const metaTone = () => props.session.metadata?.status?.tone;
+
+  const bgColor = () => {
+    if (props.isFocused) return P().surface1;
+    return "transparent";
+  };
+
+  return (
+    <box flexDirection="column" flexShrink={0}>
+      <box
+        flexDirection="row"
+        backgroundColor={bgColor()}
+        onMouseDown={props.onSelect}
+        paddingLeft={1}
+      >
+        {/* Left accent — space-preserving, only colored for meaningful states */}
+        <text style={{ fg: accentColor() }}>{accentColor() === "transparent" ? " " : "▌"}</text>
+
+        {/* Index */}
+        <box width={3} flexShrink={0}>
+          <text style={{ fg: indexColor() }}>{String(props.index).padStart(2)}</text>
+        </box>
+
+        {/* Content */}
+        <box flexDirection="column" flexGrow={1} paddingRight={1}>
+          {/* Row 1: name + status */}
+          <box flexDirection="row">
+            <text truncate flexGrow={1}>
+              <span
+                style={{
+                  fg: nameColor(),
+                  attributes: props.isFocused || props.isCurrent ? BOLD : undefined,
+                }}
+              >
+                {truncName()}
+              </span>
+            </text>
+            <Show when={statusIcon()}>
+              <text flexShrink={0}>
+                <span style={{ fg: statusColor() }}>
+                  {" "}
+                  {statusIcon()}
+                  {runningAgents() > 1 ? String(runningAgents()) : ""}
+                </span>
+              </text>
+            </Show>
+          </box>
+
+          {/* Row 2: branch */}
+          <Show when={props.session.branch}>
+            <text truncate>
+              <span style={{ fg: props.isFocused ? P().pink : P().overlay0 }}>{truncBranch()}</span>
+            </text>
+          </Show>
+
+          {/* Row 3: git diff stats */}
+          <Show when={hasDiff()}>
+            <DiffStats session={props.session} palette={() => P()} />
+          </Show>
+
+          {/* Row 3: metadata summary (status + progress) */}
+          <Show when={metaSummary()}>
+            <text truncate>
+              <span style={{ fg: toneColor(metaTone(), P()), attributes: DIM }}>
+                {metaSummary()}
+              </span>
+            </text>
+          </Show>
+        </box>
+      </box>
+
+      {/* Breathing room — 1 empty line between cards */}
+      <box height={1} />
+    </box>
+  );
+}

package/plugins/tt-agentboard/apps/tui/src/components/StatusBar.tsx

@@ -0,0 +1,49 @@
+import { Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { Theme } from "@tt-agentboard/runtime";
+import { BOLD } from "../constants";
+
+export interface StatusBarProps {
+  sessionCount: number;
+  runningCount: number;
+  errorCount: number;
+  unseenCount: number;
+  theme: Accessor<Theme>;
+}
+
+export function StatusBar(props: StatusBarProps) {
+  const P = () => props.theme().palette;
+
+  return (
+    <box flexDirection="column" paddingLeft={1} paddingTop={1} paddingBottom={0} flexShrink={0}>
+      <text>
+        <span style={{ fg: P().mauve, attributes: BOLD }}>{"  AgentBoard"}</span>
+      </text>
+      <text>
+        <span style={{ fg: P().overlay1 }}>{"  "}</span>
+        <span style={{ fg: P().overlay0 }}>{props.sessionCount}s</span>
+        <Show when={props.runningCount > 0}>
+          <span style={{ fg: P().yellow }}>
+            {" "}
+            {"⚡"}
+            {props.runningCount}
+          </span>
+        </Show>
+        <Show when={props.errorCount > 0}>
+          <span style={{ fg: P().red }}>
+            {" "}
+            {"✗"}
+            {props.errorCount}
+          </span>
+        </Show>
+        <Show when={props.unseenCount > 0}>
+          <span style={{ fg: P().teal }}>
+            {" "}
+            {"●"}
+            {props.unseenCount}
+          </span>
+        </Show>
+      </text>
+    </box>
+  );
+}

package/plugins/tt-agentboard/apps/tui/src/constants.ts

@@ -0,0 +1,46 @@
+import { TextAttributes } from "@opentui/core";
+import { BUILTIN_THEMES, TUI_RESIZE_LOG } from "@tt-agentboard/runtime";
+import type { Theme, MetadataTone } from "@tt-agentboard/runtime";
+import { appendFileSync } from "node:fs";
+
+export const SPINNERS = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+export const UNSEEN_ICON = "●";
+export const BOLD = TextAttributes.BOLD;
+export const DIM = TextAttributes.DIM;
+export const SPARK_BLOCKS = [" ", "▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+
+export const THEME_NAMES = Object.keys(BUILTIN_THEMES);
+export const DEFAULT_DETAIL_PANEL_HEIGHT = 10;
+export const MIN_DETAIL_PANEL_HEIGHT = 4;
+export { TUI_RESIZE_LOG };
+
+export const TONE_ICONS: Record<MetadataTone, string> = {
+  neutral: "·",
+  info: "ℹ",
+  success: "✓",
+  warn: "⚠",
+  error: "✗",
+};
+
+export function toneColor(tone: MetadataTone | undefined, palette: Theme["palette"]): string {
+  switch (tone) {
+    case "success":
+      return palette.green;
+    case "error":
+      return palette.red;
+    case "warn":
+      return palette.yellow;
+    case "info":
+      return palette.blue;
+    default:
+      return palette.overlay0;
+  }
+}
+
+export function logResizeDebug(message: string, data?: Record<string, unknown>): void {
+  const ts = new Date().toISOString();
+  const extra = data ? ` ${JSON.stringify(data)}` : "";
+  try {
+    appendFileSync(TUI_RESIZE_LOG, `[${ts}] [pid:${process.pid}] ${message}${extra}\n`);
+  } catch {}
+}

package/plugins/tt-agentboard/apps/tui/src/detail-panel-height.ts

@@ -0,0 +1,21 @@
+import { loadConfig, saveConfig } from "@tt-agentboard/runtime";
+import { MIN_DETAIL_PANEL_HEIGHT, DEFAULT_DETAIL_PANEL_HEIGHT } from "./constants";
+
+export function clampDetailPanelHeight(height: number): number {
+  return Math.max(MIN_DETAIL_PANEL_HEIGHT, Math.round(height));
+}
+
+export function getStoredDetailPanelHeight(sessionName: string): number {
+  const stored = loadConfig().detailPanelHeights?.[sessionName];
+  return typeof stored === "number" ? clampDetailPanelHeight(stored) : DEFAULT_DETAIL_PANEL_HEIGHT;
+}
+
+export function persistDetailPanelHeight(sessionName: string, height: number): void {
+  const config = loadConfig();
+  saveConfig({
+    detailPanelHeights: {
+      ...(config.detailPanelHeights ?? {}),
+      [sessionName]: clampDetailPanelHeight(height),
+    },
+  });
+}