@scrylog/cli 0.1.0

package/src/tui/app.ts

@@ -0,0 +1,920 @@
+import blessed from "neo-blessed";
+import type { ScrylogConfig } from "../shared/config";
+import type { DaemonClient } from "./client";
+import type { DetectionReason, ProcessInfo, SessionModel, SessionState, SessionTool, StoreEvent } from "../shared/types";
+import type { SessionListItem, SessionViewCounts } from "../shared/session-view";
+import { formatDuration, truncate } from "../shared/utils";
+
+type SessionToolFilter = SessionTool | "all";
+type SessionStateFilter = SessionState | "all";
+
+const TOOL_FILTERS: SessionToolFilter[] = ["all", "opencode", "claude", "codex", "copilotcli", "shell", "unknown"];
+const STATE_FILTERS: SessionStateFilter[] = ["all", "working", "waiting-input", "idle", "shell", "unknown"];
+const WORKING_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const HEADER_HEIGHT_NARROW = 8;
+const HEADER_HEIGHT_WIDE = 6;
+const STATE_COLORS: Record<string, string> = {
+  working: "yellow",
+  idle: "green",
+  "waiting-input": "magenta",
+  shell: "blue",
+  error: "red",
+  unknown: "gray",
+};
+
+// ── Row types ─────────────────────────────────────────────────────────────────
+
+type DashboardRow = ProjectHeaderRow | SessionRow | GapRow;
+
+interface ProjectHeaderRow {
+  kind: "project-header";
+  projectKey: string;
+  projectName: string;
+}
+
+interface SessionRow {
+  kind: "session";
+  projectKey: string;
+  session: SessionListItem;
+}
+
+interface GapRow {
+  kind: "gap";
+  projectKey: string;
+}
+
+// ── App ───────────────────────────────────────────────────────────────────────
+
+export interface AppOptions {
+  refreshMs: number;
+  showStandalone: boolean;
+  selectedSessionId?: string;
+}
+
+export class DashboardApp {
+  private readonly screen = blessed.screen({
+    smartCSR: true,
+    fullUnicode: false,
+    title: "scrylog",
+    dockBorders: true,
+  });
+
+  private readonly header = blessed.box({ top: 0, left: 0, width: "100%", height: HEADER_HEIGHT_NARROW, tags: true });
+  private readonly table = blessed.listtable({
+    top: HEADER_HEIGHT_NARROW,
+    left: 0,
+    width: "100%",
+    bottom: 1,
+    keys: false,
+    tags: true,
+    border: "line",
+    style: {
+      header: { bold: true, fg: "white" },
+      cell: { selected: { bg: "black", bold: true } },
+      border: { fg: "gray" },
+    },
+    align: "left",
+    vi: false,
+  });
+  private readonly footer = blessed.box({ bottom: 0, left: 0, width: "100%", height: 1, tags: true });
+  private readonly overlay = blessed.box({
+    parent: this.screen,
+    top: "center",
+    left: "center",
+    width: "90%",
+    height: "90%",
+    border: "line",
+    hidden: true,
+    tags: true,
+    scrollable: true,
+    alwaysScroll: true,
+    keys: true,
+    vi: true,
+    style: { border: { fg: "cyan" } },
+  });
+  private readonly promptBox = blessed.prompt({
+    parent: this.screen,
+    border: "line",
+    height: 7,
+    width: "70%",
+    top: "center",
+    left: "center",
+    label: "Input",
+    hidden: true,
+  });
+  private readonly message = blessed.message({
+    parent: this.screen,
+    border: "line",
+    height: 7,
+    width: "70%",
+    top: "center",
+    left: "center",
+    hidden: true,
+    label: "scrylog",
+  });
+
+  private sessions: SessionListItem[] = [];
+  private visibleCounts: SessionViewCounts | null = null;
+  private visibleRows: DashboardRow[] = [];
+  private selectedSessionId: string | undefined;
+  private isProgrammaticSelection = false;
+  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+  private animationTimer: ReturnType<typeof setInterval> | null = null;
+  private unsubscribeSSE: (() => void) | null = null;
+  private spinnerFrame = 0;
+  private daemonConnected = true;
+  private errors: string[] = [];
+  private filters: { query: string; actionableOnly: boolean; tool: SessionToolFilter; state: SessionStateFilter } = {
+    query: "",
+    actionableOnly: false,
+    tool: "all",
+    state: "all",
+  };
+  private pushDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+  private knownSessionStates = new Map<string, SessionModel["state"]>();
+
+  constructor(
+    private readonly client: DaemonClient,
+    private readonly options: AppOptions,
+    private readonly config: ScrylogConfig,
+  ) {}
+
+  start(): void {
+    this.screen.append(this.header);
+    this.screen.append(this.table);
+    this.screen.append(this.footer);
+    this.registerKeys();
+
+    // Initial load
+    void this.refresh();
+
+    // Subscribe to SSE push updates if enabled
+    if (this.config.tui.usePushUpdates) {
+      this.unsubscribeSSE = this.client.subscribeEvents((event) => {
+        if (event.type === "connected") {
+          this.daemonConnected = true;
+          this.flushPushRefresh();
+          void this.refresh();
+        } else if (event.type === "disconnected") {
+          this.daemonConnected = false;
+          this.flushPushRefresh();
+          this.renderHeader();
+          this.renderFooter();
+          this.screen.render();
+        } else if (this.shouldRefreshFromEvent(event)) {
+          this.schedulePushRefresh(this.isStateChangeEvent(event));
+        }
+      });
+    }
+
+    // Fallback polling timer
+    this.refreshTimer = setInterval(() => void this.refresh(), this.options.refreshMs);
+    this.animationTimer = setInterval(() => this.tickAnimation(), 180);
+    this.screen.render();
+  }
+
+  private registerKeys(): void {
+    this.screen.key(["q", "C-c"], () => this.destroy());
+    this.screen.key(["r"], () => void this.refresh());
+    this.screen.key(["enter"], () => void this.openDetail());
+    this.table.key(["enter"], () => void this.openDetail());
+    this.screen.key(["/"], () => {
+      this.prompt("Search", this.filters.query, (value) => {
+        this.filters.query = value.trim();
+        void this.refresh();
+      });
+    });
+    this.screen.key(["a"], () => {
+      this.filters.actionableOnly = !this.filters.actionableOnly;
+      void this.refresh();
+    });
+    this.screen.key(["f"], () => this.cycleFilters());
+    this.screen.key(["t"], () => this.enterSelectedSession());
+    this.table.key(["up", "k"], () => this.moveSelection(-1));
+    this.table.key(["down", "j"], () => this.moveSelection(1));
+    this.table.key(["escape"], () => this.clearSelection());
+    this.overlay.key(["escape", "q"], () => {
+      this.overlay.hide();
+      this.table.focus();
+      this.screen.render();
+    });
+
+    this.table.on("select", (_item: unknown, index: unknown) => {
+      if (this.isProgrammaticSelection) return;
+
+      const currentSelected = Number((this.table as blessed.Widgets.ListTableElement & { selected?: number }).selected ?? 0);
+      const rowIndex = typeof index === "number" ? index : currentSelected;
+      if (rowIndex <= 0) return;
+
+      const row = this.visibleRows[rowIndex - 1];
+      if (!row) return;
+
+      if (row.kind === "session") {
+        this.selectedSessionId = row.session.id;
+        this.renderFooter();
+        return;
+      }
+
+      const selectedIndex = this.getRowIndexForSessionId(this.selectedSessionId);
+      if (selectedIndex >= 0) {
+        this.selectTableRow(selectedIndex);
+      }
+      this.renderFooter();
+    });
+
+    this.table.focus();
+  }
+
+  private async refresh(render = true): Promise<void> {
+    const [status, sessionData] = await Promise.all([
+      this.client.getStatusSummary(),
+      this.client.getSessions(),
+    ]);
+
+    if (status && sessionData) {
+      this.sessions = sessionData.sessions;
+      this.visibleCounts = status.counts;
+      this.daemonConnected = true;
+      this.errors = [];
+      this.knownSessionStates = new Map(this.sessions.map((s) => [s.id, s.state]));
+    } else {
+      this.daemonConnected = false;
+    }
+
+    const filtered = this.applyFilters(this.sessions);
+    const narrow = this.screen.program.cols < 110;
+    this.visibleRows = buildRows(filtered, narrow);
+    this.renderHeader();
+    this.renderTable();
+    this.keepSelection();
+    this.renderFooter();
+    if (render) {
+      this.screen.render();
+    }
+  }
+
+  private tickAnimation(): void {
+    this.spinnerFrame = (this.spinnerFrame + 1) % WORKING_FRAMES.length;
+    this.renderTable();
+    this.keepSelection();
+    this.renderFooter();
+    if (this.overlay.hidden) {
+      this.screen.render();
+    }
+  }
+
+  private keepSelection(): void {
+    const filtered = this.applyFilters(this.sessions);
+    if (!filtered.some((s) => s.id === this.selectedSessionId)) {
+      this.selectedSessionId = undefined;
+      this.resetTableSelection();
+    }
+
+    setTableInteractive(this.table, Boolean(this.selectedSessionId));
+
+    const selectedIndex = this.getRowIndexForSessionId(this.selectedSessionId);
+    if (selectedIndex >= 0) {
+      this.selectTableRow(selectedIndex);
+      const listTable = this.table as blessed.Widgets.ListTableElement & { scrollTo?: (offset: number) => void };
+      listTable.scrollTo?.(Math.max(0, selectedIndex));
+    }
+  }
+
+  private applyFilters(sessions: SessionListItem[]): SessionListItem[] {
+    const q = this.filters.query.toLowerCase();
+    const maxAgeHours = this.config.tui.standaloneMaxAgeHours;
+    const cutoff = maxAgeHours > 0 ? Date.now() - maxAgeHours * 3_600_000 : 0;
+    return sessions.filter((s) => {
+      const isSubSession = !!s.parentSessionId;
+      // Sub-sessions: only show when active; never age-filter them
+      if (isSubSession) {
+        if (s.state !== "working" && s.state !== "waiting-input") return false;
+      } else {
+        if (cutoff > 0 && s.source === "standalone" && s.lastActivity < cutoff) return false;
+      }
+      if (this.filters.actionableOnly && !(s.hasAttention ?? s.state === "waiting-input")) return false;
+      if (this.filters.tool !== "all" && s.tool !== this.filters.tool) return false;
+      if (this.filters.state !== "all" && s.state !== this.filters.state) return false;
+      if (!q) return true;
+      const hay = [
+        s.id, s.tool, s.state, s.summary,
+        s.project?.displayName, s.project?.compactLabel, s.project?.branch,
+        s.tmux?.session, s.currentPath,
+      ].filter(Boolean).join(" ").toLowerCase();
+      return hay.includes(q);
+    });
+  }
+
+  private moveSelection(direction: 1 | -1): void {
+    if (this.visibleRows.length === 0) return;
+
+    if (!this.selectedSessionId) {
+      const first = direction > 0
+        ? this.visibleRows.find((r): r is SessionRow => r.kind === "session")
+        : [...this.visibleRows].reverse().find((r): r is SessionRow => r.kind === "session");
+      if (!first) return;
+      setTableInteractive(this.table, true);
+      this.selectedSessionId = first.session.id;
+      this.keepSelection();
+      this.renderFooter();
+      this.screen.render();
+      return;
+    }
+
+    const currentIndex = this.getRowIndexForSessionId(this.selectedSessionId);
+    if (currentIndex < 0) return;
+
+    let nextIndex = currentIndex + direction;
+    while (nextIndex >= 0 && nextIndex < this.visibleRows.length) {
+      if (this.visibleRows[nextIndex]?.kind === "session") break;
+      nextIndex += direction;
+    }
+
+    if (nextIndex < 0 || nextIndex >= this.visibleRows.length) return;
+    const nextRow = this.visibleRows[nextIndex];
+    if (nextRow?.kind !== "session") return;
+
+    this.selectedSessionId = nextRow.session.id;
+    this.selectTableRow(nextIndex);
+    const listTable = this.table as blessed.Widgets.ListTableElement & { scrollTo?: (offset: number) => void };
+    listTable.scrollTo?.(Math.max(0, nextIndex));
+    this.renderFooter();
+    this.screen.render();
+  }
+
+  private clearSelection(): void {
+    this.selectedSessionId = undefined;
+    this.resetTableSelection();
+    setTableInteractive(this.table, false);
+    this.renderFooter();
+    this.screen.render();
+  }
+
+  private selectTableRow(rowIndex: number): void {
+    this.isProgrammaticSelection = true;
+    this.table.select(rowIndex + 1);
+    this.isProgrammaticSelection = false;
+  }
+
+  private resetTableSelection(): void {
+    this.isProgrammaticSelection = true;
+    this.table.select(0);
+    this.isProgrammaticSelection = false;
+  }
+
+  private getRowIndexForSessionId(id: string | undefined): number {
+    if (!id) return -1;
+    return this.visibleRows.findIndex((r) => r.kind === "session" && r.session.id === id);
+  }
+
+  private getSelectedSession(): SessionListItem | undefined {
+    return this.sessions.find((s) => s.id === this.selectedSessionId);
+  }
+
+  // ── Rendering ──────────────────────────────────────────────────────────────
+
+  private renderHeader(): void {
+    const cols = this.screen.program.cols;
+    const headerHeight = cols < 110 ? HEADER_HEIGHT_NARROW : HEADER_HEIGHT_WIDE;
+    this.header.height = headerHeight;
+    this.table.top = headerHeight;
+
+    const counts = countStates(this.sessions);
+    const sessionSummary = this.visibleCounts
+      ? `${this.visibleCounts.visible} sessions`
+      : `${this.sessions.length} sessions`;
+    const statusRows = buildStatusSummaryRows(counts, this.spinnerFrame);
+    const connStatus = this.daemonConnected ? "" : "  {red-fg}● daemon disconnected{/red-fg}";
+    const errorLine = this.errors[0] ? `  {red-fg}${this.errors[0]}{/red-fg}` : "";
+    const titleRows = buildTitleRows(cols);
+
+    if (cols < 110) {
+      this.header.setContent([
+        "",
+        ...titleRows,
+        "",
+        ` ${sessionSummary}${connStatus}${errorLine}`,
+        ` ${statusRows[0]}`,
+        ` ${statusRows[1]}`,
+      ].join("\n"));
+      return;
+    }
+
+    const contentWidth = Math.max(20, cols - 2);
+    const leftWidth = Math.floor(contentWidth / 2);
+    const rightWidth = contentWidth - leftWidth;
+    const rightRows = [
+      ` ${sessionSummary}${connStatus}${errorLine}`,
+      ` ${statusRows[0]}`,
+      ` ${statusRows[1]}`,
+    ];
+
+    this.header.setContent([
+      "",
+      joinHeaderColumns(titleRows[0] ?? "", rightRows[0] ?? "", leftWidth, rightWidth),
+      joinHeaderColumns(titleRows[1] ?? "", rightRows[1] ?? "", leftWidth, rightWidth),
+      joinHeaderColumns("", rightRows[2] ?? "", leftWidth, rightWidth),
+    ].join("\n"));
+  }
+
+  private renderTable(): void {
+    const narrow = this.screen.program.cols < 110;
+    const projectHeaderWidth = getProjectHeaderWidth(this.visibleRows, narrow ? 28 : 36);
+    const headers = narrow
+      ? ["Session", "St", "Tool", "Summary"]
+      : ["Session", "St", "Tool", "Stable", "Summary"];
+
+    // Build a map: sessionId → count of active sub-sessions (for narrow mode badge)
+    const visibleChildCount = new Map<string, number>();
+    if (narrow) {
+      for (const s of this.sessions) {
+        if (s.parentSessionId && (s.state === "working" || s.state === "waiting-input")) {
+          visibleChildCount.set(s.parentSessionId, (visibleChildCount.get(s.parentSessionId) ?? 0) + 1);
+        }
+      }
+    }
+
+    const rows = this.visibleRows.map((row) => {
+      if (row.kind === "gap") {
+        return narrow ? ["", "", "", ""] : ["", "", "", "", ""];
+      }
+
+      if (row.kind === "project-header") {
+        return narrow
+          ? [formatProjectHeader(row.projectName, projectHeaderWidth), "", "", ""]
+          : [formatProjectHeader(row.projectName, projectHeaderWidth), "", "", "", ""];
+      }
+
+      const s = row.session;
+      const color = STATE_COLORS[s.state] ?? "white";
+      const statusCell = formatStatusCell(s.state, s.stableForMs ?? 0, this.spinnerFrame, narrow);
+      const activeChildCount = narrow ? (visibleChildCount.get(s.id) ?? 0) : 0;
+      const label = formatTargetLabel(s, narrow);
+      const summaryWidth = narrow ? 34 : 82;
+
+      if (narrow) {
+        const toolLabel = activeChildCount > 0 ? `${s.tool} [+${activeChildCount}]` : s.tool;
+        return [
+          `{${color}-fg}${truncate(label, 28)}{/}`,
+          `{${color}-fg}${statusCell}{/}`,
+          `{${color}-fg}${truncate(toolLabel, 12)}{/}`,
+          `{${color}-fg}${truncate(s.summary || "-", summaryWidth)}{/}`,
+        ];
+      }
+
+      return [
+        `{${color}-fg}${truncate(label, 30)}{/}`,
+        `{${color}-fg}{bold}${stateGlyph(s.state, this.spinnerFrame)}{/bold}{/}`,
+        `{${color}-fg}${s.tool}{/}`,
+        `{${color}-fg}${formatDuration(s.stableForMs ?? 0)}{/}`,
+        `{${color}-fg}${truncate(s.summary || "-", summaryWidth)}{/}`,
+      ];
+    });
+
+    if (rows.length === 0) {
+      rows.push(narrow
+        ? ["No sessions", "-", "-", "No sessions detected"]
+        : ["No sessions", "-", "-", "-", "No sessions detected"]);
+    }
+
+    this.table.setData([headers, ...rows]);
+  }
+
+  private renderFooter(): void {
+    const session = this.getSelectedSession();
+    const filterSummary = [
+      this.filters.query ? `q=${this.filters.query}` : null,
+      this.filters.actionableOnly ? "actionable" : null,
+      this.filters.tool !== "all" ? `tool=${this.filters.tool}` : null,
+      this.filters.state !== "all" ? `state=${this.filters.state}` : null,
+    ].filter(Boolean).join(" ");
+
+    const sel = session
+      ? `${session.tool} ${session.state} ${session.project?.compactLabel ?? session.id}`
+      : "no selection";
+
+    this.footer.setContent(
+      ` {bold}Enter{/bold} detail  {bold}t{/bold} tmux  {bold}/{/bold} search  {bold}f{/bold} filters  {bold}a{/bold} actionable  {bold}r{/bold} refresh  {bold}q{/bold} quit   ${sel}   ${filterSummary}`,
+    );
+  }
+
+  private async openDetail(): Promise<void> {
+    const session = this.getSelectedSession();
+    if (!session) return;
+
+    const fresh = await this.client.getSessionDetail(session.id) ?? ({ ...session } as SessionModel);
+
+    const src = fresh.detectionSource === "opencode-sdk"
+      ? `Source: OpenCode SDK (${fresh.opencode?.instanceUrl ?? "-"})`
+      : fresh.detectionSource === "opencode-hook"
+      ? "Source: OpenCode Hook"
+      : fresh.detectionSource === "opencode-db"
+      ? "Source: OpenCode DB"
+      : fresh.detectionSource === "claude-transcript"
+      ? `Source: Claude transcript (${fresh.claude?.transcriptPath ?? "-"})`
+      : fresh.detectionSource === "claude-hook"
+      ? "Source: Claude Hook"
+      : fresh.detectionSource === "codex-transcript"
+      ? `Source: Codex transcript (${fresh.codex?.transcriptPath ?? "-"})`
+      : fresh.detectionSource === "codex-hook"
+      ? "Source: Codex Hook"
+      : "Source: Fallback detection (tmux pane heuristics)";
+
+    const detailLines = [
+      `{bold}${fresh.id}{/bold}  ${fresh.tool}  ${fresh.state}`,
+      `source: ${fresh.source}`,
+      src,
+      `project: ${fresh.project?.displayName ?? "-"}`,
+      `project label: ${fresh.project?.compactLabel ?? "-"}`,
+      `git: ${fresh.project?.isGitRepository ? `branch=${fresh.project?.branch ?? "detached"} worktree=${fresh.project?.isWorktree ? "yes" : "no"}` : "no"}`,
+      ...(fresh.project?.gitRootPath ? [`git root: ${fresh.project.gitRootPath}`] : []),
+      ...(fresh.currentPath ? [`path: ${fresh.currentPath}`] : []),
+      ...(fresh.tty || fresh.panePid || fresh.paneTitle
+        ? [`tty: ${fresh.tty ?? "-"}  pid: ${fresh.panePid ?? "-"}  title: ${fresh.paneTitle || "-"}`]
+        : []),
+      ...(fresh.tmux ? [`tmux: ${fresh.tmux.session}:${fresh.tmux.window}.${fresh.tmux.pane}`] : []),
+      `summary: ${fresh.summary}`,
+      `lastActivity: ${new Date(fresh.lastActivity).toISOString()}`,
+      ...(fresh.activeTool ? [`activeTool: ${fresh.activeTool}`] : []),
+      "",
+      "{bold}Legend{/bold}  {yellow-fg}working{/yellow-fg}  {magenta-fg}input{/magenta-fg}  {green-fg}idle{/green-fg}  {blue-fg}shell{/blue-fg}  {gray-fg}unknown{/gray-fg}",
+    ];
+
+    if (fresh.toolReasons && fresh.toolReasons.length > 0 || fresh.stateReasons && fresh.stateReasons.length > 0) {
+      detailLines.push("", "{bold}Classification{/bold}");
+      for (const r of (fresh.toolReasons ?? []) as DetectionReason[]) {
+        detailLines.push(`- tool: ${r.label} -> ${r.detail}`);
+      }
+      for (const r of (fresh.stateReasons ?? []) as DetectionReason[]) {
+        detailLines.push(`- state: ${r.label} -> ${r.detail}`);
+      }
+    }
+
+    if (fresh.codex) {
+      detailLines.push("", "{bold}Codex metadata{/bold}");
+      detailLines.push(`- model: ${fresh.codex.model ?? "-"}`);
+      detailLines.push(`- transcriptPath: ${fresh.codex.transcriptPath ?? "-"}`);
+      if (fresh.codex.parentSessionId) {
+        detailLines.push(`- parentSessionId: ${fresh.codex.parentSessionId}`);
+      }
+      if (fresh.codex.forkedFromId) {
+        detailLines.push(`- forkedFromId: ${fresh.codex.forkedFromId}`);
+      }
+    }
+
+    if (fresh.processTree) {
+      detailLines.push("", "{bold}Process chain{/bold}");
+      if (fresh.processTree.length > 0) {
+        for (const p of fresh.processTree as ProcessInfo[]) {
+          detailLines.push(`- ${p.pid} ${p.comm} [${p.state}] ${truncate(p.command, Math.max(40, this.screen.program.cols - 20))}`);
+        }
+      } else {
+        detailLines.push("- No process metadata available");
+      }
+    }
+
+    if (fresh.sample !== undefined) {
+      detailLines.push("", "{bold}Pane tail{/bold}");
+      if (fresh.sample?.lines.length) {
+        detailLines.push(...fresh.sample.lines);
+      } else {
+        detailLines.push("(no pane output captured)");
+      }
+    }
+
+    detailLines.push("", "Press q or Esc to close. Press t to enter the tmux session (tmux sessions only).");
+
+    this.overlay.setContent(detailLines.join("\n"));
+    this.overlay.setScroll(0);
+    this.overlay.show();
+    (this.overlay as blessed.Widgets.BoxElement & { setFront?: () => void }).setFront?.();
+    this.overlay.focus();
+    this.screen.render();
+  }
+
+  private prompt(label: string, initial: string, onSubmit: (value: string) => void): void {
+    this.promptBox.input(label, initial, (_err: Error | null, value: string | null) => {
+      if (value !== null) onSubmit(value);
+      this.table.focus();
+      this.screen.render();
+    });
+  }
+
+  private cycleFilters(): void {
+    const nextTool = TOOL_FILTERS[(TOOL_FILTERS.indexOf(this.filters.tool) + 1) % TOOL_FILTERS.length];
+    if (nextTool !== "all") {
+      this.filters.tool = nextTool;
+      this.filters.state = "all";
+    } else {
+      this.filters.tool = "all";
+      this.filters.state = STATE_FILTERS[(STATE_FILTERS.indexOf(this.filters.state) + 1) % STATE_FILTERS.length];
+    }
+    void this.refresh();
+  }
+
+  private enterSelectedSession(): void {
+    const session = this.getSelectedSession();
+    if (!session) return;
+
+    if (session.source !== "tmux" || !session.tmux) {
+      (this.message as blessed.Widgets.MessageElement).display(
+        "tmux attach is only available for sessions running inside tmux.",
+        3,
+        () => {
+          this.table.focus();
+          this.screen.render();
+        },
+      );
+      return;
+    }
+
+    const { isInsideTmux } = require("../shared/utils");
+    const command = isInsideTmux()
+      ? ["tmux", "switch-client", "-t", session.tmux.session]
+      : ["tmux", "attach-session", "-t", session.tmux.session];
+
+    try {
+      this.destroy(false);
+      const proc = Bun.spawnSync(command, { stdin: "inherit", stdout: "inherit", stderr: "inherit" });
+      if (proc.exitCode !== 0) {
+        throw new Error(`Could not enter session ${session.tmux.session}`);
+      }
+      process.exit(0);
+    } catch (error) {
+      process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`);
+      process.exit(1);
+    }
+  }
+
+  private isStateChangeEvent(event: StoreEvent): boolean {
+    if (event.type === "session:added" || event.type === "session:removed") return true;
+    if (event.type === "session:updated") {
+      const known = this.knownSessionStates.get(event.session.id);
+      return known === undefined || known !== event.session.state;
+    }
+    return false;
+  }
+
+  private shouldRefreshFromEvent(event: StoreEvent): boolean {
+    if (event.type === "session:added" || event.type === "session:removed") return true;
+    if (event.type === "session:updated") {
+      const known = this.knownSessionStates.get(event.session.id);
+      if (known === undefined) return true;
+      return known !== event.session.state;
+    }
+    return false;
+  }
+
+  private schedulePushRefresh(immediate: boolean): void {
+    if (this.pushDebounceTimer) {
+      clearTimeout(this.pushDebounceTimer);
+      this.pushDebounceTimer = null;
+    }
+    if (immediate || this.config.tui.pushDebounceMs <= 0) {
+      void this.refresh(false);
+      return;
+    }
+    this.pushDebounceTimer = setTimeout(() => {
+      this.pushDebounceTimer = null;
+      void this.refresh(false);
+    }, this.config.tui.pushDebounceMs);
+  }
+
+  private flushPushRefresh(): void {
+    if (this.pushDebounceTimer) {
+      clearTimeout(this.pushDebounceTimer);
+      this.pushDebounceTimer = null;
+      void this.refresh(false);
+    }
+  }
+
+  private destroy(shouldExit = true): void {
+    if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null; }
+    if (this.animationTimer) { clearInterval(this.animationTimer); this.animationTimer = null; }
+    if (this.unsubscribeSSE) { this.unsubscribeSSE(); this.unsubscribeSSE = null; }
+    if (this.pushDebounceTimer) { clearTimeout(this.pushDebounceTimer); this.pushDebounceTimer = null; }
+    this.screen.destroy();
+    if (shouldExit) process.exit(0);
+  }
+}
+
+// ── Row building ──────────────────────────────────────────────────────────────
+
+/**
+ * Lower weight = higher priority in the sorted list.
+ * Order: tmux agent < tmux shell < tmux unknown < standalone agent < standalone shell < standalone unknown
+ */
+function sessionSortWeight(s: SessionListItem): number {
+  const sourcePenalty = s.source === "tmux" ? 0 : 100;
+  const toolPenalty = s.tool === "unknown" ? 20 : s.tool === "shell" ? 10 : 0;
+  return sourcePenalty + toolPenalty;
+}
+
+/**
+ * Sort weight for a project group.
+ * Groups where no session has a resolved project (standalone tool groups) are pushed
+ * to the end by adding a large penalty on top of their minimum session weight.
+ */
+function groupSortWeight(group: { sessions: SessionListItem[] }): number {
+  const minWeight = Math.min(...group.sessions.map(sessionSortWeight));
+  const noProject = group.sessions.every((s) => !s.project);
+  return noProject ? 1000 + minWeight : minWeight;
+}
+
+export function buildRows(sessions: SessionListItem[], narrow = false): DashboardRow[] {
+  // Separate root sessions from sub-sessions
+  const roots = sessions.filter((s) => !s.parentSessionId);
+  const childrenByParent = new Map<string, SessionListItem[]>();
+  for (const s of sessions) {
+    if (s.parentSessionId) {
+      const arr = childrenByParent.get(s.parentSessionId) ?? [];
+      arr.push(s);
+      childrenByParent.set(s.parentSessionId, arr);
+    }
+  }
+
+  const grouped = new Map<string, { projectName: string; sessions: SessionListItem[] }>();
+
+  for (const s of roots) {
+    const key = getProjectGroupKey(s);
+    const existing = grouped.get(key);
+    if (existing) {
+      existing.sessions.push(s);
+    } else {
+      grouped.set(key, {
+        projectName: s.project?.displayName ?? (s.source === "standalone"
+          ? (s.tool !== "unknown" ? s.tool : "standalone")
+          : s.tmux?.session ?? key),
+        sessions: [s],
+      });
+    }
+  }
+
+  // Sort groups by weight; groups with no resolved project (standalone tool groups) go last
+  const sortedGroups = [...grouped.entries()].sort(([, a], [, b]) => {
+    return groupSortWeight(a) - groupSortWeight(b);
+  });
+
+  const rows: DashboardRow[] = [];
+  if (sortedGroups.length > 0) {
+    rows.push({ kind: "gap", projectKey: "__initial-gap__" });
+  }
+
+  let groupIndex = 0;
+  for (const [projectKey, group] of sortedGroups) {
+    if (groupIndex > 0) {
+      rows.push({ kind: "gap", projectKey });
+    }
+    // Within each group, sort by session weight; tie-break by lastActivity descending
+    group.sessions.sort((a, b) => {
+      const weightDiff = sessionSortWeight(a) - sessionSortWeight(b);
+      return weightDiff !== 0 ? weightDiff : b.lastActivity - a.lastActivity;
+    });
+    rows.push({ kind: "project-header", projectKey, projectName: group.projectName });
+    for (const s of group.sessions) {
+      rows.push({ kind: "session", projectKey, session: s });
+      // In wide mode: emit child rows immediately after parent
+      // In narrow mode: children are summarised as [+N] badge on parent row; skip child rows
+      if (!narrow) {
+        const children = (childrenByParent.get(s.id) ?? []).sort((a, b) => {
+          const weightDiff = sessionSortWeight(a) - sessionSortWeight(b);
+          return weightDiff !== 0 ? weightDiff : b.lastActivity - a.lastActivity;
+        });
+        for (const child of children) {
+          rows.push({ kind: "session", projectKey, session: child });
+        }
+      }
+    }
+    groupIndex++;
+  }
+
+  return rows;
+}
+
+function getProjectGroupKey(s: SessionListItem): string {
+  return s.project?.repositoryIdentityPath
+    ?? s.project?.gitRootPath
+    ?? s.project?.sourcePath
+    ?? s.project?.displayName
+    ?? (s.source === "standalone" ? `standalone:${s.tool}` : s.tmux?.session ?? s.id);
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function stateGlyph(state: string, spinnerFrame = 0): string {
+  switch (state) {
+    case "working": return WORKING_FRAMES[spinnerFrame % WORKING_FRAMES.length] ?? WORKING_FRAMES[0]!;
+    case "idle": return "○";
+    case "waiting-input": return "?";
+    case "shell": return ">";
+    case "error": return "✗";
+    default: return "?";
+  }
+}
+
+export function formatStatusCell(state: string, stableForMs: number, spinnerFrame: number, narrow: boolean): string {
+  const glyph = stateGlyph(state, spinnerFrame);
+  if (narrow) {
+    return `{bold}${glyph}{/bold} (${formatDuration(stableForMs)})`;
+  }
+  return `{bold}${glyph}{/bold}`;
+}
+
+function formatBranchLabel(s: SessionListItem): string {
+  if (!s.project?.isGitRepository) return "";
+  return s.project.branch || "detached";
+}
+
+function formatTargetLabel(s: SessionListItem, narrow = false): string {
+  let base: string;
+  if (s.parentSessionId) {
+    // Sub-agent session — always use ↳ with extra indent
+    base = `    ↳ ${truncate(s.summary || s.id, narrow ? 22 : 26)}`;
+  } else if (s.tmux) {
+    base = `  ▸ ${s.tmux.session}`;
+  } else {
+    // Standalone session: project header already shows the project name.
+    // Priority: activeTool (B) → short session id (D) → just the glyph (E)
+    const placeholder = s.activeTool
+      ? `[${s.activeTool}]`
+      : (s.id.includes(":") ? s.id.split(":")[1]!.slice(0, 8) : s.id.slice(0, 8));
+    base = `  ◇ ${placeholder}`;
+  }
+  const branch = formatBranchLabel(s);
+  return branch ? `${base}@${branch}` : base;
+}
+
+function formatProjectHeader(projectName: string, width = projectName.length): string {
+  const label = truncate(projectName, Math.max(8, width));
+  const padded = label.padEnd(Math.max(width, label.length), " ");
+  return `{white-fg}{gray-fg}{bold}== ${padded} =={/bold}{/gray-fg}{/white-fg}`;
+}
+
+function getProjectHeaderWidth(rows: DashboardRow[], maxWidth: number): number {
+  const names = rows
+    .filter((r): r is ProjectHeaderRow => r.kind === "project-header")
+    .map((r) => r.projectName.length);
+  return Math.min(maxWidth, Math.max(8, ...names));
+}
+
+function countStates(sessions: SessionListItem[]): Record<string, number> {
+  const counts: Record<string, number> = { working: 0, idle: 0, "waiting-input": 0, shell: 0, unknown: 0 };
+  for (const s of sessions) {
+    if (s.state in counts) {
+      counts[s.state]!++;
+    } else {
+      counts.unknown!++;
+    }
+  }
+  return counts;
+}
+
+function buildStatusSummaryRows(counts: Record<string, number>, spinnerFrame: number): [string, string] {
+  const leftColumn = [
+    formatStatusSummary("working", counts.working ?? 0, spinnerFrame),
+    formatStatusSummary("idle", counts.idle ?? 0, spinnerFrame),
+  ];
+  const rightColumn = [
+    formatStatusSummary("waiting-input", counts["waiting-input"] ?? 0, spinnerFrame),
+    formatStatusSummary("shell", counts.shell ?? 0, spinnerFrame),
+  ];
+  const overflow = formatStatusSummary("unknown", counts.unknown ?? 0, spinnerFrame);
+  const columnWidth = Math.max(...[...leftColumn, ...rightColumn].map((v) => visualLength(v))) + 4;
+
+  return [
+    `${padVisual(leftColumn[0] ?? "", columnWidth)}${rightColumn[0] ?? ""}`,
+    `${padVisual(leftColumn[1] ?? "", columnWidth)}${rightColumn[1] ?? ""}  ${overflow}`,
+  ];
+}
+
+function formatStatusSummary(state: string, count: number, spinnerFrame: number): string {
+  const glyph = stateGlyph(state, spinnerFrame);
+  const label = state === "waiting-input" ? "input" : state;
+  const color = STATE_COLORS[state] ?? "white";
+  return `{${color}-fg}${glyph} (${label}): ${count}{/${color}-fg}`;
+}
+
+function padVisual(value: string, width: number): string {
+  const padding = Math.max(0, width - visualLength(value));
+  return `${value}${" ".repeat(padding)}`;
+}
+
+function visualLength(value: string): number {
+  return value.replace(/\{[^}]+\}/g, "").length;
+}
+
+function buildTitleRows(width: number): string[] {
+  if (width < 72) return [" {bold}SCRYLOG{/bold}"];
+  return [
+    " {gray-fg}█▀ █▀▀ █▀█ █▄█ █░ █▀█ █▀▀{/gray-fg}",
+    " {gray-fg}▄█ █▄▄ █▀▄ ░█░ █▄ █▄█ █▄█{/gray-fg}",
+  ];
+}
+
+function joinHeaderColumns(left: string, right: string, leftWidth: number, rightWidth: number): string {
+  return `${padVisual(left, leftWidth)}${padVisual(right, rightWidth)}`;
+}
+
+function setTableInteractive(table: blessed.Widgets.ListTableElement, interactive: boolean): void {
+  (table as blessed.Widgets.ListTableElement & { interactive?: boolean }).interactive = interactive;
+}