tuiboard 0.5.0

package/src/ui/VirtualPanel.tsx

@@ -0,0 +1,237 @@
+/** The fixed Today/Tomorrow virtual panel — always on the left. */
+
+import { For, Show, createEffect, createMemo } from "solid-js";
+
+import { ATTR, T, boardColor } from "~/ui/glyphs";
+import { TaskRow } from "~/ui/TaskRow";
+import {
+  buildVirtualItems,
+  groupVirtualItems,
+  type VirtualGroup,
+} from "~/store/virtual-panel";
+import type { TuiStore } from "~/store/index";
+
+interface ScrollBoxLike {
+  scrollChildIntoView(id: string): void;
+}
+
+const VP_ROW_PREFIX = "tuiboard-vp-row-";
+const vpRowId = (flatIndex: number) => `${VP_ROW_PREFIX}${flatIndex}`;
+
+const SECTION_HEADER: Record<string, { label: string; color: string }> = {
+  overdue: { label: "● Overdue", color: T.overdue },
+  today: { label: "● Today", color: T.today },
+  tomorrow: { label: "→ Tomorrow", color: T.warmDim },
+};
+
+// Only the agenda and priority buckets get a header. The "rest" bucket has
+// no header of its own — its items already sit under their own
+// `— board · column —` sub-dividers, so a generic label would be redundant.
+const BUCKET_HEADER: Record<string, { label: string; color: string }> = {
+  agenda: { label: "⏰ Agenda", color: T.accent },
+  priority: { label: "🔺 Priority", color: T.highest },
+};
+
+export function VirtualPanel(props: { store: TuiStore }) {
+  const items = createMemo(() => {
+    return buildVirtualItems(props.store.state.boards.map((b) => b.board));
+  });
+  const groups = createMemo(() => groupVirtualItems(items()));
+  const isActive = createMemo(() => props.store.state.ui.activeZone === "virtual");
+  const isZoomed = createMemo(
+    () => props.store.state.ui.zoomed && props.store.state.ui.activeZone === "virtual",
+  );
+  const cursorRow = createMemo(() => props.store.state.ui.row);
+  let scrollBoxRef: ScrollBoxLike | undefined;
+
+  // Auto-scroll so the cursor's row stays visible. Without this, when the
+  // panel's content overflows, pressing j/k advanced ui.row but the
+  // scrollbox didn't follow — the cursor moved invisibly until the bottom
+  // of the visible window happened to scroll past it. Now the scroll
+  // tracks the cursor on every move (BoardView pattern).
+  createEffect(() => {
+    const row = cursorRow();
+    if (!isActive() || !scrollBoxRef) return;
+    setTimeout(() => {
+      try {
+        scrollBoxRef?.scrollChildIntoView(vpRowId(row));
+      } catch {
+        // Child not mounted yet — harmless.
+      }
+    }, 0);
+  });
+
+  // Decorate title with vertical "tabs" `┤ … ├` so it visually breaks
+  // through the rounded border line (Superfile-style).
+  const titleText = () =>
+    `┤ ${isZoomed() ? "⤢ " : ""}Today / Tomorrow  ${items().length} ├`;
+
+  return (
+    <box
+      style={{
+        flexDirection: "column",
+        width: isZoomed() ? undefined : 38,
+        minWidth: isZoomed() ? undefined : 38,
+        flexGrow: isZoomed() ? 1 : 0,
+        marginRight: 1,
+        border: true,
+        borderStyle: "rounded",
+        // Today/Tomorrow panel keeps its warm identity at all times — when
+        // focused it brightens, otherwise it dims, but never goes cool.
+        borderColor: isActive() ? T.warmActive : T.warm,
+        paddingLeft: 1,
+        paddingRight: 1,
+      }}
+      title={titleText()}
+      titleAlignment="left"
+    >
+      <Show
+        when={items().length > 0}
+        fallback={
+          <text>
+            <span style={{ fg: T.textDim }}>Nothing scheduled.</span>
+          </text>
+        }
+      >
+        <scrollbox
+          ref={(r: ScrollBoxLike) => (scrollBoxRef = r)}
+          style={{
+            width: "100%",
+            flexGrow: 1,
+            rootOptions: {},
+            contentOptions: {},
+            scrollbarOptions: {
+              visible: false,
+            },
+          }}
+        >
+          <RenderGroups
+            groups={groups()}
+            isActive={isActive()}
+            cursorRow={cursorRow()}
+            // Panel inner cell width seen by a TaskRow: panel 38 col
+            // (or full width in zoom) − border 2 − panel padding 2 −
+            // TaskRow padding 2 = 32 cols normal, ~terminal width − 6
+            // when zoomed. Pass that so TaskRow can budget the title
+            // dynamically against the row's actual overhead.
+            availableWidth={isZoomed() ? 100 : 32}
+            isMarkedFn={(r) => props.store.isMarked(r)}
+            onClickItem={(flatIndex) => {
+              props.store.setActiveZone("virtual");
+              props.store.setCursor(0, flatIndex);
+            }}
+          />
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}
+
+function RenderGroups(props: {
+  groups: VirtualGroup[];
+  isActive: boolean;
+  cursorRow: number;
+  availableWidth: number;
+  isMarkedFn: (ref: import("~/store/index").TaskRef) => boolean;
+  onClickItem: (flatIndex: number) => void;
+}) {
+  return (
+    <For each={props.groups}>
+      {(group, gi) => {
+        const sectionHeader = isFirstOfSection(props.groups, gi())
+          ? SECTION_HEADER[group.section]
+          : undefined;
+        const bucketHeader = BUCKET_HEADER[group.bucket];
+
+        return (
+          <box style={{ flexDirection: "column" }}>
+            <Show when={sectionHeader}>
+              <box style={{ paddingLeft: 1, paddingRight: 1, marginTop: 1 }}>
+                <text>
+                  <span style={{ fg: sectionHeader!.color, attributes: ATTR.bold }}>
+                    {sectionHeader!.label}
+                  </span>
+                </text>
+              </box>
+            </Show>
+            <Show when={bucketHeader}>
+              <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+                <text>
+                  <span style={{ fg: bucketHeader!.color }}>{"  "}{bucketHeader!.label}</span>
+                </text>
+              </box>
+            </Show>
+            <Show
+              when={group.subgroups && group.subgroups.length > 0}
+              fallback={
+                <For each={group.items}>
+                  {(item) => (
+                    <box id={vpRowId(item.flatIndex)}>
+                      <TaskRow
+                        task={item.task}
+                        cursor={props.isActive && item.flatIndex === props.cursorRow}
+                        marked={props.isMarkedFn(item.ref)}
+                        availableWidth={props.availableWidth}
+                        // Tint the title with the source board's accent so a
+                        // cross-cutting Today/Tomorrow item is recognizable by
+                        // its board at a glance (done-green still wins).
+                        tintColor={boardColor(item.boardIndex)}
+                        // Today / Tomorrow sections already say so in their
+                        // header — drop the redundant per-row "today"/"tmrw"
+                        // date label (the ⌚ time block stays). Overdue rows
+                        // keep their MM/DD so you can see HOW overdue.
+                        hideDateSuffix={
+                          group.section === "today" || group.section === "tomorrow"
+                        }
+                        onClick={() => props.onClickItem(item.flatIndex)}
+                      />
+                    </box>
+                  )}
+                </For>
+              }
+            >
+              <For each={group.subgroups!}>
+                {(sub) => (
+                  <box style={{ flexDirection: "column" }}>
+                    <box style={{ paddingLeft: 1, paddingRight: 1 }}>
+                      <text wrapMode="none" truncate>
+                        <span style={{ fg: T.textDim }}>
+                          {"  — "}{sub.boardName}{" · "}{sub.columnName}{" —"}
+                        </span>
+                      </text>
+                    </box>
+                    <For each={sub.items}>
+                      {(item) => (
+                        <box id={vpRowId(item.flatIndex)}>
+                          <TaskRow
+                            task={item.task}
+                            cursor={props.isActive && item.flatIndex === props.cursorRow}
+                            marked={props.isMarkedFn(item.ref)}
+                            availableWidth={props.availableWidth}
+                            tintColor={boardColor(item.boardIndex)}
+                            hideDateSuffix={
+                              group.section === "today" || group.section === "tomorrow"
+                            }
+                            onClick={() => props.onClickItem(item.flatIndex)}
+                          />
+                        </box>
+                      )}
+                    </For>
+                  </box>
+                )}
+              </For>
+            </Show>
+          </box>
+        );
+      }}
+    </For>
+  );
+}
+
+function isFirstOfSection(
+  groups: VirtualGroup[],
+  idx: number,
+): boolean {
+  if (idx === 0) return true;
+  return groups[idx - 1]!.section !== groups[idx]!.section;
+}

package/src/ui/board-scroll.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, test } from "bun:test";
+
+import { computeColumnScrollLeft } from "~/ui/board-scroll";
+
+const COL = 42;
+const GAP = 1;
+const STRIDE = COL + GAP;
+
+// Helper for the common uniform-width case: column at a given index.
+function scroll(index: number, viewportWidth: number, currentScroll: number) {
+  return computeColumnScrollLeft({
+    colStart: index * STRIDE,
+    colWidth: COL,
+    viewportWidth,
+    currentScroll,
+  });
+}
+
+describe("computeColumnScrollLeft", () => {
+  test("column already fully visible → scroll unchanged", () => {
+    expect(scroll(0, 100, 0)).toBe(0);
+    expect(scroll(1, 100, 0)).toBe(0);
+  });
+
+  test("column off the right edge → align its right edge to viewport", () => {
+    // viewport 60, col 1 spans 43..85 → right-align: 85-60 = 25.
+    expect(scroll(1, 60, 0)).toBe(25);
+  });
+
+  test("column off the left edge → align its left edge to viewport", () => {
+    expect(scroll(0, 60, 25)).toBe(0);
+  });
+
+  test("far-right hidden column scrolls fully into view", () => {
+    // col 5 spans 215..257 → right-align: 257-60 = 197.
+    expect(scroll(5, 60, 0)).toBe(197);
+  });
+
+  test("column wider than viewport → align left edge (show the start)", () => {
+    // viewport 30 < column 42. col 2 starts at 86 → align left edge at 86.
+    expect(scroll(2, 30, 0)).toBe(86);
+  });
+
+  test("negative start or zero viewport → no change", () => {
+    expect(
+      computeColumnScrollLeft({ colStart: -1, colWidth: COL, viewportWidth: 60, currentScroll: 17 }),
+    ).toBe(17);
+    expect(scroll(3, 0, 17)).toBe(17);
+  });
+
+  test("never returns a negative scroll offset", () => {
+    expect(scroll(0, 200, 0)).toBeGreaterThanOrEqual(0);
+    expect(scroll(0, 30, 5)).toBeGreaterThanOrEqual(0);
+  });
+
+  test("variable widths: narrow collapsed column to the left shifts offsets", () => {
+    // Columns: [42], [18 collapsed], [42]. Third column starts at
+    // 43 + 19 = 62, spans 62..104. viewport 50 → right-align 104-50 = 54.
+    expect(
+      computeColumnScrollLeft({ colStart: 62, colWidth: 42, viewportWidth: 50, currentScroll: 0 }),
+    ).toBe(54);
+  });
+});

package/src/ui/board-scroll.ts

@@ -0,0 +1,49 @@
+/**
+ * Deterministic horizontal scroll geometry for the kanban board.
+ *
+ * The board renders a horizontal row of columns inside a clipping viewport.
+ * When the cursor moves to a column that is partly or fully out of view, the
+ * row is shifted (via negative margin) so that column becomes visible.
+ *
+ * Columns are NOT uniform width (a collapsed all-done column is narrower), so
+ * the caller passes the active column's actual laid-out start offset and width
+ * rather than an index + stride.
+ */
+
+export interface ColumnScrollInput {
+  /** Left offset of the active column within the column row, in cells. */
+  colStart: number;
+  /** Width of the active column in cells. */
+  colWidth: number;
+  /** Currently visible width of the viewport in cells. */
+  viewportWidth: number;
+  /** Current horizontal scroll offset in cells. */
+  currentScroll: number;
+}
+
+/**
+ * Returns the scroll offset that brings the active column fully into view,
+ * scrolling the minimum distance needed:
+ *
+ *   - already fully visible        → unchanged
+ *   - off the left edge            → align column's left edge to viewport left
+ *   - off the right edge           → align column's right edge to viewport right
+ *   - wider than the viewport      → align left edge (show as much from the
+ *                                     start of the column as possible)
+ *
+ * Pure and side-effect free so it can be unit-tested without a terminal.
+ */
+export function computeColumnScrollLeft(input: ColumnScrollInput): number {
+  const { colStart, colWidth, viewportWidth, currentScroll } = input;
+  if (colStart < 0 || viewportWidth <= 0) return currentScroll;
+
+  const colEnd = colStart + colWidth;
+
+  if (colStart < currentScroll) {
+    return Math.max(0, colStart);
+  }
+  if (colEnd > currentScroll + viewportWidth) {
+    return Math.max(0, Math.min(colStart, colEnd - viewportWidth));
+  }
+  return currentScroll;
+}

package/src/ui/glyphs.ts

@@ -0,0 +1,129 @@
+/** Centralized glyph + color tokens for the UI. */
+
+import { TextAttributes } from "@opentui/core";
+
+export const ATTR = {
+  bold: TextAttributes.BOLD,
+  dim: TextAttributes.DIM,
+  italic: TextAttributes.ITALIC,
+  underline: TextAttributes.UNDERLINE,
+} as const;
+
+/**
+ * Theme tokens.
+ *
+ * Foreground colors use ANSI names (`"red"`, `"yellow"`, `"brightBlack"`,
+ * …) so they pick up the user's configured terminal palette. The terminal
+ * theme — Nord, Tokyo Night, Gruvbox, Solarized, whatever — decides what
+ * those names look like.
+ *
+ * Backgrounds are mostly `undefined` (transparent → terminal default).
+ * The only opaque backgrounds we paint are the cursor row highlight and
+ * the banner row.
+ */
+/**
+ * Palette philosophy:
+ *
+ *  - Backgrounds stay transparent so the terminal theme bleeds through.
+ *  - The few accent colors are *muted hex* (mid-saturation, mid-luminance)
+ *    instead of raw ANSI names like "red"/"yellow" — those tend to render
+ *    as fully-saturated traffic-light colors in most themes and clash
+ *    with everything around them.
+ *  - The Today/Tomorrow virtual panel has its own *warm* identity
+ *    (peach/orange) so the user instantly knows "this is the time zone";
+ *    everything else uses a *cool* identity (soft cyan) for active focus.
+ *  - Cursor row highlight is the only opaque paint outside the modal.
+ */
+export const T = {
+  // Backgrounds
+  bg: undefined as string | undefined,
+  panelBg: undefined as string | undefined,
+  panelBgActive: undefined as string | undefined,
+  cardBg: undefined as string | undefined,
+  cardBgDone: undefined as string | undefined,
+  cardBgCursor: "#2a2f3c",
+  // Subtle fill behind timeline block rows so the bands separate from the
+  // dotted/empty gutters around them. Just barely darker-than-cursor; on a
+  // typical dark terminal it reads as "filled card", not as "highlighted".
+  cardBlockBg: "#1c2030",
+
+  // Foreground neutrals — readable mid-grays so dim chrome doesn't disappear
+  text: undefined as string | undefined,    // terminal default fg
+  textDim: "#8a90a8",     // bumped up from #6b7089 for legibility
+  textDone: "#6b7089",    // formerly textDim — done tasks are dim but still readable
+  done: "#6aaf57",        // muted-but-clear green for completed task titles + ✓
+
+  // Cool accents — used for active board columns and generic focus
+  accent: "#7eb6d6",         // clearer blue-cyan, hue ~200°
+  border: "#5c627a",          // mid-gray, visible against terminal default bg
+  borderActive: "#7eb6d6",   // same as accent
+
+  // Warm accents — Today/Tomorrow identity (hue ~30°)
+  warm: "#e8a05c",           // clear warm orange, distinct from red
+  warmActive: "#f2b272",     // brighter peach when panel is focused
+  warmDim: "#a07a52",        // dim version for tomorrow header
+
+  // Priority emoji colors
+  highest: "#e26a6a",        // clearly red (hue 0°)
+  high: "#e8a05c",           // warm orange (same as today)
+  medium: "#d8c074",         // gold (hue 50°)
+  low: "#a4c98a",            // sage (hue 95°)
+
+  // Status-based row colors — kept clearly distinct in hue + brightness
+  overdue: "#e26a6a",        // hue 0°, sat 65%, light 65% — clearly red
+  today: "#e8a05c",          // hue 30°, sat 75%, light 64% — clearly orange
+  scheduled: "#c89a6a",      // dimmer warm for non-today future
+  future: "#8a90a8",
+
+  // Metadata
+  assignee: "#a4c98a",
+  tag: "#7eb6d6",
+  time: "#b3a3d8",
+
+  // Banner colors
+  bannerInfo: "#7eb6d6",
+  bannerWarn: "#e8a05c",
+  bannerError: "#e26a6a",
+} as const;
+
+export const PRIORITY_GLYPH: Record<string, string> = {
+  highest: "🔺",
+  high: "⏫",
+  medium: "🔼",
+  low: "🔽",
+  lowest: "⏬",
+  none: "",
+};
+
+export const PRIORITY_COLOR: Record<string, string | undefined> = {
+  highest: T.highest,
+  high: T.high,
+  medium: T.medium,
+  low: T.low,
+  lowest: T.low,
+  none: T.text,
+};
+
+export function fmtMin(m: number): string {
+  const h = Math.floor(m / 60).toString().padStart(2, "0");
+  const mm = (m % 60).toString().padStart(2, "0");
+  return `${h}:${mm}`;
+}
+
+/**
+ * Per-board accent palette. Used by the virtual panel to color-code the
+ * source-board tag on priority/agenda items, so the user can recognize
+ * which board a cross-cutting item came from at a glance.
+ *
+ * Cycles by board index when there are more boards than colors.
+ */
+const BOARD_PALETTE: string[] = [
+  "#e8a05c", // warm orange (board 0 — typically the work board)
+  "#7eb6d6", // cyan-blue   (board 1)
+  "#a4c98a", // sage green  (board 2)
+  "#b3a3d8", // soft violet (board 3)
+];
+
+export function boardColor(idx: number): string {
+  return BOARD_PALETTE[((idx % BOARD_PALETTE.length) + BOARD_PALETTE.length) % BOARD_PALETTE.length]!;
+}

package/src/views/AgentsOnly.tsx

@@ -0,0 +1,103 @@
+/**
+ * Fullscreen list of every local Claude Code session.
+ * `tuiboard --view=agents`. Shows ALL sessions (including archived),
+ * scrollable, cursor-navigable. The scrollbox follows the cursor via
+ * scrollChildIntoView (same trick used in BoardView for active columns).
+ */
+
+import { For, Show, createEffect, createMemo } from "solid-js";
+
+import { AgentRow } from "~/ui/AgentRow";
+import { T } from "~/ui/glyphs";
+import type { TuiStore } from "~/store/index";
+
+interface ScrollBoxLike {
+  scrollChildIntoView(id: string): void;
+}
+
+function rowId(sessionId: string): string {
+  // Sanitize sessionId for use as an OpenTUI box id. UUIDs are already safe
+  // (alphanumeric + dashes), but defensive belt-and-braces doesn't hurt.
+  return `tuiboard-agent-${sessionId.replace(/[^a-zA-Z0-9]/g, "_")}`;
+}
+
+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());
+  let scrollBoxRef: ScrollBoxLike | undefined;
+
+  // Auto-scroll the list so the active row is visible. setTimeout(0) waits
+  // for OpenTUI to finish layout before requesting scroll.
+  createEffect(() => {
+    const row = agentRow();
+    if (!isActive() || !scrollBoxRef) return;
+    const target = sessions()[row];
+    if (!target) return;
+    setTimeout(() => {
+      try {
+        scrollBoxRef?.scrollChildIntoView(rowId(target.sessionId));
+      } catch {
+        // Child not mounted yet — harmless.
+      }
+    }, 0);
+  });
+
+  return (
+    <box style={{ flexDirection: "row", flexGrow: 1 }}>
+      <box
+        style={{
+          flexDirection: "column",
+          flexGrow: 1,
+          border: true,
+          borderStyle: "rounded",
+          borderColor: isActive() ? T.borderActive : T.border,
+          paddingLeft: 1,
+          paddingRight: 1,
+        }}
+        title={`┤ Agents · ${sessions().length} sessions ├`}
+        titleAlignment="left"
+      >
+        <Show
+          when={sessions().length > 0}
+          fallback={
+            <text>
+              <span style={{ fg: T.textDim }}>
+                No sessions found in ~/.claude/projects.
+              </span>
+            </text>
+          }
+        >
+          <scrollbox
+            ref={(r: ScrollBoxLike) => (scrollBoxRef = r)}
+            style={{
+              width: "100%",
+              flexGrow: 1,
+              scrollX: false,
+              scrollY: true,
+              rootOptions: {},
+              contentOptions: {},
+              scrollbarOptions: { visible: false },
+            }}
+          >
+            <For each={sessions()}>
+              {(session, i) => (
+                <box id={rowId(session.sessionId)}>
+                  <AgentRow
+                    session={session}
+                    cursor={isActive() && i() === agentRow()}
+                    nameMaxChars={120}
+                    onClick={() => {
+                      props.store.setActiveZone("agents");
+                      props.store.setCursor(0, i());
+                    }}
+                  />
+                </box>
+              )}
+            </For>
+          </scrollbox>
+        </Show>
+      </box>
+    </box>
+  );
+}

package/src/views/BoardOnly.tsx

@@ -0,0 +1,35 @@
+/**
+ * Standalone fullscreen view for the kanban board (with virtual panel).
+ * Mounted when the user launches `tuiboard --view=board`, AND used inside
+ * the dashboard via composition.
+ *
+ * The cursor and modals are governed by the same store as the dashboard;
+ * only the layout differs (no Timeline / Agents zones).
+ *
+ * The modal side-panel is rendered at App level, so this view just lays
+ * out its zones in a single row and lets the parent slot the modal in.
+ */
+
+import { Show, createMemo } from "solid-js";
+
+import { BoardView } from "~/ui/BoardView";
+import { VirtualPanel } from "~/ui/VirtualPanel";
+import type { TuiStore } from "~/store/index";
+
+export function BoardOnly(props: { store: TuiStore }) {
+  const ui = () => props.store.state.ui;
+  const activeBoard = createMemo(
+    () => props.store.state.boards[ui().activeBoardIndex]?.board,
+  );
+
+  return (
+    <box style={{ flexDirection: "row", flexGrow: 1 }}>
+      <Show when={!ui().zoomed || ui().activeZone === "virtual"}>
+        <VirtualPanel store={props.store} />
+      </Show>
+      <Show when={(!ui().zoomed || ui().activeZone !== "virtual") && activeBoard()}>
+        <BoardView store={props.store} board={activeBoard()!} />
+      </Show>
+    </box>
+  );
+}