kankaku-tui 0.1.1

package/dist/domain/tasks-model.js

@@ -0,0 +1,51 @@
+import { buildTasks, cacheHitRatio, localDay } from "kankaku/domain";
+/** Maximum visible width of a task prompt before it is truncated with an ellipsis marker. */
+const PROMPT_DISPLAY_LIMIT = 40;
+function formatTime(iso) {
+    const date = new Date(iso);
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+    return `${hours}:${minutes}`;
+}
+/** Truncate `text` to `limit` visible characters, appending `…` (counted within the limit) when it was cut. Collapses internal whitespace first, since a prompt often spans several lines. */
+function truncatePrompt(text, limit) {
+    const collapsed = text.replace(/\s+/g, " ").trim();
+    return collapsed.length > limit ? `${collapsed.slice(0, limit - 1)}…` : collapsed;
+}
+function toRow(project, task) {
+    return {
+        id: task.id,
+        time: formatTime(task.startedAt),
+        project,
+        ...(task.clientName !== undefined ? { clientName: task.clientName } : {}),
+        ...(task.projectName !== undefined ? { projectName: task.projectName } : {}),
+        ...(task.hubTaskTitle !== undefined ? { hubTaskTitle: task.hubTaskTitle } : {}),
+        wallMs: task.wallMs,
+        workMs: task.workMs,
+        waitingMs: task.waitingMs,
+        cost: task.usage.cost,
+        ...(cacheHitRatio(task.usage) !== undefined ? { cacheHit: cacheHitRatio(task.usage) } : {}),
+        subagentCount: task.subagents.length,
+        prompt: truncatePrompt(task.prompt, PROMPT_DISPLAY_LIMIT),
+        fullPrompt: task.prompt,
+    };
+}
+/**
+ * Build one {@link TaskRow} per task (via kankaku's own `buildTasks`, never
+ * reimplementing its orchestrator/subagent join) across every project,
+ * newest first. Restricted to `options.today` (default: today) unless
+ * `options.all` is set.
+ */
+export function buildTasksModel(projects, options = {}) {
+    const targetDay = options.all ? undefined : (options.today ?? localDay(new Date().toISOString()));
+    const entries = [];
+    for (const project of projects) {
+        for (const task of buildTasks(project.records)) {
+            if (targetDay !== undefined && localDay(task.startedAt) !== targetDay)
+                continue;
+            entries.push({ project: project.name, task });
+        }
+    }
+    entries.sort((a, b) => Date.parse(b.task.startedAt) - Date.parse(a.task.startedAt) || b.task.id.localeCompare(a.task.id));
+    return { rows: entries.map((entry) => toRow(entry.project, entry.task)) };
+}

package/dist/domain/text-wrap.js

@@ -0,0 +1,47 @@
+/**
+ * Word-wrap `text` to at most `width` visible characters per line. Explicit
+ * `\n` in `text` starts a new wrap group (so a multi-line prompt keeps its
+ * own line breaks); a single word longer than `width` is hard-broken into
+ * `width`-sized chunks rather than overflowing. `width` below 1 is treated
+ * as 1, so this never loops forever or drops characters. Pure and
+ * deterministic: used by `ui/tasks-screen.tsx`'s detail panel to know how
+ * many lines a long prompt needs before deciding how much of it fits a
+ * fixed-height panel (see AGENTS.md-equivalent "the layout must never
+ * move" rule in `odd/tasks/`).
+ */
+export function wrapText(text, width) {
+    const safeWidth = Math.max(Math.floor(width), 1);
+    const lines = [];
+    for (const paragraph of text.split("\n")) {
+        if (paragraph.length === 0) {
+            lines.push("");
+            continue;
+        }
+        let current = "";
+        for (const word of paragraph.split(" ")) {
+            if (word.length > safeWidth) {
+                if (current.length > 0) {
+                    lines.push(current);
+                    current = "";
+                }
+                let remaining = word;
+                while (remaining.length > safeWidth) {
+                    lines.push(remaining.slice(0, safeWidth));
+                    remaining = remaining.slice(safeWidth);
+                }
+                current = remaining;
+                continue;
+            }
+            const candidate = current.length === 0 ? word : `${current} ${word}`;
+            if (candidate.length > safeWidth) {
+                lines.push(current);
+                current = word;
+            }
+            else {
+                current = candidate;
+            }
+        }
+        lines.push(current);
+    }
+    return lines;
+}

package/dist/domain/today-model.js

@@ -0,0 +1,75 @@
+import { summarize } from "kankaku/hub";
+import { cacheHitRatio } from "kankaku/domain";
+/**
+ * Build one {@link TodayRow} per project (via kankaku's own `summarize`,
+ * never reimplementing its aggregation) plus a grand total, sorted by
+ * `workMs` descending. Projects with no tasks on the target day are
+ * dropped. `waitingMs` comes from the role totals (`orchestrator` +
+ * `subagent`), since `summarize`'s task totals do not carry it.
+ */
+export function buildTodayRows(projects, options = {}) {
+    const rows = [];
+    let totalTasks = 0;
+    let totalWallMs = 0;
+    let totalWorkMs = 0;
+    let totalWaitingMs = 0;
+    let totalCost = 0;
+    let totalInput = 0;
+    let totalCacheRead = 0;
+    let totalCacheWrite = 0;
+    for (const project of projects) {
+        const summary = summarize(project.records, { all: false, day: options.today });
+        if (summary.tasks.count === 0)
+            continue;
+        const waitingMs = summary.orchestrator.waitingMs + summary.subagent.waitingMs;
+        rows.push({
+            name: project.name,
+            tasks: summary.tasks.count,
+            wallMs: summary.tasks.wallMs,
+            workMs: summary.tasks.workMs,
+            waitingMs,
+            cost: summary.tasks.cost,
+            cacheHit: cacheHitRatio(summary.tasks),
+        });
+        totalTasks += summary.tasks.count;
+        totalWallMs += summary.tasks.wallMs;
+        totalWorkMs += summary.tasks.workMs;
+        totalWaitingMs += waitingMs;
+        totalCost += summary.tasks.cost;
+        totalInput += summary.tasks.input;
+        totalCacheRead += summary.tasks.cacheRead;
+        totalCacheWrite += summary.tasks.cacheWrite;
+    }
+    rows.sort((a, b) => b.workMs - a.workMs);
+    const total = {
+        name: "total",
+        tasks: totalTasks,
+        wallMs: totalWallMs,
+        workMs: totalWorkMs,
+        waitingMs: totalWaitingMs,
+        cost: totalCost,
+        cacheHit: cacheHitRatio({ input: totalInput, cacheRead: totalCacheRead, cacheWrite: totalCacheWrite }),
+    };
+    return { rows, total };
+}
+/** Render `<minutes>m` or, once at least an hour, `<hours>h<minutes>m` (minutes zero-padded to two digits). */
+export function formatMinutes(ms) {
+    const totalMinutes = Math.round(ms / 60000);
+    if (totalMinutes < 60)
+        return `${totalMinutes}m`;
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours}h${String(minutes).padStart(2, "0")}m`;
+}
+/** Render `$X.YZ`. */
+function formatCost(cost) {
+    return `$${cost.toFixed(2)}`;
+}
+function formatRow(row) {
+    const cacheHitPart = row.cacheHit !== undefined ? `  cache hit ${Math.round(row.cacheHit * 100)}%` : "";
+    return `${row.name}  tasks ${row.tasks}  wall ${formatMinutes(row.wallMs)}  work ${formatMinutes(row.workMs)}  wait ${formatMinutes(row.waitingMs)}  ${formatCost(row.cost)}${cacheHitPart}`;
+}
+/** Render one aligned line per row, plus a final total line. */
+export function formatTodayLines(rows, total) {
+    return [...rows.map(formatRow), formatRow(total)];
+}

package/dist/ports/project-source.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/app.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useApp, useInput } from "ink";
+import { INITIAL_NAV_STATE, clearProjectFilter, focusMain, focusSidebar, moveSidebar, openProjectInTasks, screenForKey, switchScreen, } from "../domain/nav-model.js";
+import { DashboardScreen } from "./dashboard-screen.js";
+import { TasksScreen } from "./tasks-screen.js";
+import { CatalogScreen } from "./catalog-screen.js";
+import { SyncScreen } from "./sync-screen.js";
+/**
+ * The app shell: owns navigation state (`domain/nav-model.ts`) and renders
+ * whichever screen is active, each already wrapped in the shared
+ * header/sidebar/footer frame (`ui/layout.tsx`). One `useInput` here owns
+ * every global key and the focus routing between the sidebar and the
+ * active screen's own main zone (see "Focus zones" in
+ * `odd/tasks/visual-system.md`): sidebar focused, `↑`/`↓` move the active
+ * screen and `enter`/`→`/`Tab` focus main; main focused, `←`/`Tab` return
+ * to the sidebar and `esc` does too, unless the active screen consumes it
+ * first (Tasks with a project filter set: the first `esc` clears it, the
+ * next returns). `1`-`4` and `q` stay global regardless of focus; `q`
+ * quits from anywhere (Ink's own `useApp().exit()`). Dashboard's `enter` on a
+ * project row (only reachable once main is focused) opens Tasks filtered
+ * to it, keeping focus on main; Tasks' own `esc` handling (gated the same
+ * way as every other screen key, by its `focused` prop) clears that
+ * filter — this hook only predicts whether that will happen, to decide
+ * whether it should also move focus.
+ */
+export function App({ roots, version, loadToday, loadTasks, catalog, sync, dashboardActions }) {
+    const { exit } = useApp();
+    const [nav, setNav] = useState(INITIAL_NAV_STATE);
+    useInput((input, key) => {
+        if (input === "q") {
+            exit();
+            return;
+        }
+        const nextScreen = screenForKey(input);
+        if (nextScreen !== undefined) {
+            setNav((state) => switchScreen(state, nextScreen));
+            return;
+        }
+        setNav((state) => {
+            if (state.focus === "sidebar") {
+                if (key.downArrow)
+                    return moveSidebar(state, 1);
+                if (key.upArrow)
+                    return moveSidebar(state, -1);
+                if (key.return || key.rightArrow || key.tab)
+                    return focusMain(state);
+                return state;
+            }
+            // Main zone focused.
+            if (key.leftArrow || key.tab)
+                return focusSidebar(state);
+            if (key.escape) {
+                // Tasks consumes the first `esc` itself (via its own `onClearFilter`,
+                // gated by its `focused` prop just like every other screen key) to
+                // clear its project filter; only move focus once there is none left.
+                const consumedByTasks = state.screen === "tasks" && state.projectFilter !== undefined;
+                return consumedByTasks ? state : focusSidebar(state);
+            }
+            return state;
+        });
+    });
+    const focused = nav.focus === "main";
+    return (_jsxs(_Fragment, { children: [nav.screen === "dashboard" && (_jsx(DashboardScreen, { load: loadToday, actions: dashboardActions, roots: roots, version: version, focused: focused, onOpenProject: (project) => setNav((state) => openProjectInTasks(state, project)) })), nav.screen === "tasks" && (_jsx(TasksScreen, { load: loadTasks, roots: roots, version: version, focused: focused, ...(nav.projectFilter !== undefined ? { projectFilter: nav.projectFilter } : {}), onClearFilter: () => setNav((state) => clearProjectFilter(state)) })), nav.screen === "catalog" && _jsx(CatalogScreen, { ...catalog, roots: roots, version: version, focused: focused }), nav.screen === "sync" && _jsx(SyncScreen, { ...sync, roots: roots, version: version, focused: focused })] }));
+}

package/dist/ui/catalog-screen.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { formatMinutes } from "../domain/today-model.js";
+import { SCREENS, hintsFor } from "../domain/nav-model.js";
+import { Layout } from "./layout.js";
+import { Panel } from "./components/panel.js";
+import { Table } from "./components/table.js";
+const CLIENT_COLUMNS = [{ key: "name", header: "client", width: 20 }];
+function clientCell(client) {
+    return `${client.name} (${client.code})`;
+}
+const PROJECT_COLUMNS = [
+    { key: "name", header: "project", width: 18 },
+    { key: "open", header: "open", width: 5, align: "right" },
+    { key: "doing", header: "doing", width: 5, align: "right" },
+];
+function projectCell(project, key) {
+    switch (key) {
+        case "name":
+            return project.name;
+        case "open":
+            return String(project.openCount);
+        case "doing":
+            return String(project.doingCount);
+        default:
+            return "";
+    }
+}
+const KEY_HINTS = [
+    { key: "↑↓", label: "select" },
+    { key: "r", label: "refresh" },
+    { key: "1-4", label: "screens" },
+    { key: "q", label: "quit" },
+];
+/** Below this main-content width, the Projects panel stacks under Clients instead of beside it. */
+const DETAIL_BREAKPOINT = 70;
+/** Rows a panel's own chrome (border + table header) takes outside its data rows. */
+const TABLE_CHROME_ROWS = 3;
+/**
+ * The Catalog screen: a `[ Clients ]` list and, beside it, the selected
+ * client's `[ Projects ]` with open/doing hub task counts — via
+ * `adapters/hub.ts`'s `CachedCatalog`, never reimplemented here. `r`
+ * refreshes against the hub; `↑↓` move the client selection. Without hub
+ * credentials, or with no cache yet, shows a one-line note instead.
+ */
+export function CatalogScreen({ load, refresh, roots, version, columns, rows, focused = true }) {
+    const [model, setModel] = useState(load);
+    const [refreshing, setRefreshing] = useState(false);
+    const [selected, setSelected] = useState(0);
+    const maxRowsRef = useRef(0);
+    const clients = model.status === "ready" ? model.clients : [];
+    useInput((input, key) => {
+        const lastIndex = Math.max(clients.length - 1, 0);
+        if (input === "r" && !refreshing) {
+            setRefreshing(true);
+            void refresh().then((next) => {
+                setModel(next);
+                setRefreshing(false);
+            });
+        }
+        else if (key.downArrow) {
+            setSelected((index) => Math.min(index + 1, lastIndex));
+        }
+        else if (key.upArrow) {
+            setSelected((index) => Math.max(index - 1, 0));
+        }
+        else if (key.pageDown) {
+            setSelected((index) => Math.min(index + Math.max(maxRowsRef.current, 1), lastIndex));
+        }
+        else if (key.pageUp) {
+            setSelected((index) => Math.max(index - Math.max(maxRowsRef.current, 1), 0));
+        }
+        else if (key.home) {
+            setSelected(0);
+        }
+        else if (key.end) {
+            setSelected(lastIndex);
+        }
+    }, { isActive: focused });
+    if (model.status === "unavailable") {
+        return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, sidebarItems: SCREENS, activeId: "catalog", sidebarStats: [`roots ${roots.length}`], keyHints: hintsFor("catalog", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: () => _jsx(Text, { dimColor: true, children: model.reason ?? "no catalog cached yet" }) }));
+    }
+    const selectedClient = clients[Math.min(selected, Math.max(clients.length - 1, 0))];
+    const ageText = `fetched ${formatMinutes(model.ageMs)} ago${model.stale ? " (stale)" : ""}`;
+    return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, headerRight: refreshing ? "refreshing…" : undefined, sidebarItems: SCREENS, activeId: "catalog", sidebarStats: [`clients ${clients.length}`], keyHints: hintsFor("catalog", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: ({ mainWidth, mainHeight }) => {
+            const wide = mainWidth >= DETAIL_BREAKPOINT;
+            const leftWidth = wide ? Math.floor(mainWidth * 0.4) : mainWidth;
+            const rightWidth = wide ? Math.max(mainWidth - leftWidth - 1, 1) : mainWidth;
+            // Stacked mode splits the height between Clients and Projects, mirroring the width split used in wide mode.
+            const clientsHeight = wide ? mainHeight : Math.max(Math.floor(mainHeight * 0.4), TABLE_CHROME_ROWS + 1);
+            const projectsHeight = wide ? mainHeight : Math.max(mainHeight - clientsHeight, TABLE_CHROME_ROWS + 1);
+            const clientsMaxRows = Math.max(clientsHeight - TABLE_CHROME_ROWS, 1);
+            const projectsMaxRows = Math.max(projectsHeight - TABLE_CHROME_ROWS, 1);
+            maxRowsRef.current = clientsMaxRows;
+            const clientsPanel = (_jsx(Panel, { title: "Clients", headerRight: ageText, width: leftWidth, height: clientsHeight, active: focused, children: _jsx(Table, { columns: CLIENT_COLUMNS, rows: clients, rowKey: (client) => client.id, cell: (client) => clientCell(client), selectedIndex: selected, emptyText: "no clients", maxRows: clientsMaxRows }) }));
+            const projectsPanel = (_jsx(Panel, { title: "Projects", width: rightWidth, height: projectsHeight, children: _jsx(Table, { columns: PROJECT_COLUMNS, rows: selectedClient?.projects ?? [], rowKey: (project) => project.id, cell: projectCell, emptyText: "no projects", maxRows: projectsMaxRows }) }));
+            return wide ? (_jsxs(Box, { flexDirection: "row", children: [clientsPanel, _jsx(Box, { width: 1 }), projectsPanel] })) : (_jsxs(Box, { flexDirection: "column", children: [clientsPanel, projectsPanel] }));
+        } }));
+}

package/dist/ui/components/bar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useTheme } from "../theme.js";
+/** How many of `width` characters are filled for `value / max` (clamped to `[0, width]`; `max <= 0` is always `0`, never a division by zero). */
+function filledWidth(value, max, width) {
+    const ratio = max > 0 ? value / max : 0;
+    return Math.max(0, Math.min(width, Math.round(ratio * width)));
+}
+/** The plain-text form of a bar (`█` for the filled portion, `░` for the rest), reusable anywhere a coloured `<Bar>` element does not fit, e.g. a `Table` cell. */
+export function renderBar(value, max, width) {
+    const filled = filledWidth(value, max, width);
+    return `${"█".repeat(filled)}${"░".repeat(width - filled)}`;
+}
+/** A `width`-character text bar: `█` for the filled portion (`value / max`, clamped to `[0, width]`), `░` for the rest. `max <= 0` renders fully empty rather than dividing by zero. */
+export function Bar({ value, max, width, color }) {
+    const theme = useTheme();
+    const filled = filledWidth(value, max, width);
+    const empty = width - filled;
+    return (_jsxs(Text, { children: [_jsx(Text, { color: color ?? theme.accent, children: "█".repeat(filled) }), _jsx(Text, { color: theme.muted, children: "░".repeat(empty) })] }));
+}

package/dist/ui/components/header-bar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+/** The top header line: `left` and `right` at opposite ends of `width`, via flex `space-between` rather than manual padding. */
+export function HeaderBar({ left, right, width }) {
+    const theme = useTheme();
+    return (_jsxs(Box, { width: width, justifyContent: "space-between", children: [_jsx(Text, { bold: true, color: theme.text, children: left }), right !== undefined && _jsx(Text, { color: theme.muted, children: right })] }));
+}

package/dist/ui/components/key-hints.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useTheme } from "../theme.js";
+/** The footer key-hints line: `key` in the accent colour, `label` in muted, each pair separated by three spaces. */
+export function KeyHints({ hints }) {
+    const theme = useTheme();
+    return (_jsx(Text, { children: hints.map((hint, index) => (_jsxs(Text, { children: [index > 0 ? "   " : "", _jsx(Text, { color: theme.accent, children: hint.key }), _jsx(Text, { color: theme.muted, children: ` ${hint.label}` })] }, `${hint.key}-${hint.label}`))) }));
+}

package/dist/ui/components/panel.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+/**
+ * Build the top border as `╭─[ Title ]───…───headerRight╮`. Ink's `Box`
+ * has no title-in-border support, so this line is rendered as plain text
+ * above a `Box` whose own top border is turned off (`borderTop={false}`).
+ * Never shrinks below what `title`/`headerRight` need, even past `width`.
+ */
+function buildTopBorder(title, headerRight, width) {
+    const left = `─[ ${title} ]`;
+    const right = headerRight ? `${headerRight} ` : "";
+    const minWidth = left.length + right.length + 2;
+    const total = Math.max(width, minWidth);
+    const fill = total - left.length - right.length - 2;
+    return `╭${left}${"─".repeat(Math.max(fill, 0))}${right}╮`;
+}
+/**
+ * A rounded, titled panel: the title sits inside the top border, an
+ * optional `headerRight` note sits right-aligned on the same line, and
+ * `children` render inside a rounded frame below it. `active` swaps the
+ * border colour to `theme.borderActive` (e.g. the focused panel in a
+ * multi-panel screen).
+ */
+export function Panel({ title, headerRight, active = false, width, height, flexGrow, children }) {
+    const theme = useTheme();
+    const borderColor = active ? theme.borderActive : theme.border;
+    const topBorder = buildTopBorder(title, headerRight, width);
+    /** The top border is its own line above the bordered box, so the box's own height (which includes its bottom border) is one row less than the panel's total. */
+    const bodyHeight = height !== undefined ? Math.max(height - 1, 1) : undefined;
+    return (_jsxs(Box, { flexDirection: "column", width: Math.max(width, topBorder.length), height: height, flexGrow: flexGrow, children: [_jsx(Text, { color: borderColor, children: topBorder }), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderTop: false, borderColor: borderColor, width: width, height: bodyHeight, flexGrow: flexGrow !== undefined ? 1 : undefined, overflow: "hidden", children: children })] }));
+}

package/dist/ui/components/sidebar.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+/**
+ * The left-hand navigation column: one line per {@link SidebarItem} (the
+ * active one prefixed `› `, others `  ` — a visible marker rather than
+ * colour alone), a divider, then `stats`. Ink's `Box` border draws around
+ * the whole column, so the divider is a plain `─` fill line rather than a
+ * true `├─…─┤` junction.
+ *
+ * `focused` makes the focused zone unmistakable (see the "the menu column
+ * does not show as marked" fix in the project's task notes): the column's
+ * own border switches to `theme.borderActive`, and the active item gets a
+ * full-row `theme.selectionBg` highlight — its label is padded to the
+ * column's inner width first, since a `Text` background colour only
+ * covers its own rendered characters, not the blank cells Ink's fixed-width
+ * border box fills in around a shorter string. Unfocused, the active item
+ * keeps its plain `›` marker in `theme.muted` with no background — a
+ * structural marker, not colour alone, stays the primary cue either way.
+ */
+export function Sidebar({ items, activeId, stats, width, focused = true }) {
+    const theme = useTheme();
+    const inner = Math.max(width - 2, 1);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: focused ? theme.borderActive : theme.border, width: width, children: [items.map((item) => {
+                const active = item.id === activeId;
+                const marker = active ? "› " : "  ";
+                const label = active && focused ? `${marker}${item.label}`.padEnd(inner) : `${marker}${item.label}`;
+                return (_jsx(Text, { color: active ? (focused ? theme.accent : theme.muted) : theme.text, backgroundColor: active && focused ? theme.selectionBg : undefined, bold: active && focused, children: label }, item.id));
+            }), _jsx(Text, { color: theme.border, children: "─".repeat(inner) }), stats.map((line, index) => (_jsx(Text, { color: theme.muted, children: line }, index)))] }));
+}

package/dist/ui/components/sparkline.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "ink";
+import { useTheme } from "../theme.js";
+const LEVELS = ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"];
+/** One block character per value (`▁`–`█`), scaled to the series' own max. An empty series renders `·`; an all-zero series renders every bar at the lowest level rather than collapsing to nothing. */
+export function Sparkline({ values, color }) {
+    const theme = useTheme();
+    if (values.length === 0)
+        return _jsx(Text, { color: theme.muted, children: "\u00B7" });
+    const max = Math.max(...values, 0);
+    const text = values
+        .map((value) => {
+        const ratio = max > 0 ? value / max : 0;
+        const level = Math.max(0, Math.min(LEVELS.length - 1, Math.round(ratio * (LEVELS.length - 1))));
+        return LEVELS[level];
+    })
+        .join("");
+    return _jsx(Text, { color: color ?? theme.accent, children: text });
+}

package/dist/ui/components/table.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { Box, Text } from "ink";
+import { useTheme } from "../theme.js";
+import { windowRows } from "../../domain/list-window.js";
+/**
+ * Resolves the visible slice of `rows` for a given `maxRows` body-line
+ * budget: a data window sized so that, once indicator lines are added for
+ * whichever side is hidden, the total body still fits `maxRows`. Converges
+ * in at most two passes since adding an indicator can only ever remove
+ * hidden rows on that same side.
+ */
+function resolveWindow(total, selected, maxRows, previousStart) {
+    let budget = maxRows;
+    let window = windowRows(total, selected, budget, previousStart);
+    for (let pass = 0; pass < 2; pass += 1) {
+        const reserve = (window.hiddenAbove > 0 ? 1 : 0) + (window.hiddenBelow > 0 ? 1 : 0);
+        const nextBudget = Math.max(maxRows - reserve, 1);
+        if (nextBudget === budget)
+            break;
+        budget = nextBudget;
+        window = windowRows(total, selected, budget, previousStart);
+    }
+    return window;
+}
+/** Fit `text` into `width` visible columns: truncate with a trailing `…` when too long, then pad to `width` (left- or right-aligned). */
+function fitCell(text, width, align) {
+    const value = text.length > width ? (width > 1 ? `${text.slice(0, width - 1)}…` : text.slice(0, width)) : text;
+    const padding = " ".repeat(Math.max(width - value.length, 0));
+    return align === "right" ? `${padding}${value}` : `${value}${padding}`;
+}
+function rowText(columns, values) {
+    return columns.map((column) => fitCell(values(column), column.width, column.align ?? "left")).join(" ");
+}
+/**
+ * An aligned table: a muted header row, one line per data row prefixed with
+ * `› ` on the selected row (a visible marker, never colour alone — see
+ * AGENTS.md's ink-testing-library note) and `  ` otherwise. A cell wider
+ * than its column truncates with `…`; `emptyText` renders instead of the
+ * body when `rows` is empty.
+ */
+export function Table({ columns, rows, rowKey, cell, selectedIndex, emptyText = "no rows", maxRows }) {
+    const theme = useTheme();
+    const startRef = useRef(0);
+    const windowed = maxRows !== undefined && rows.length > maxRows;
+    const window = windowed ? resolveWindow(rows.length, selectedIndex ?? 0, maxRows, startRef.current) : undefined;
+    if (window !== undefined)
+        startRef.current = window.start;
+    const visibleRows = window !== undefined ? rows.slice(window.start, window.end) : rows;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: theme.muted, children: `  ${rowText(columns, (column) => column.header)}` }), rows.length === 0 ? (_jsx(Text, { color: theme.muted, children: emptyText })) : (_jsxs(_Fragment, { children: [window !== undefined && window.hiddenAbove > 0 && (_jsx(Text, { color: theme.muted, children: `  ↑ ${window.hiddenAbove} more` }, "__indicator-above__")), visibleRows.map((row, index) => {
+                        const actualIndex = (window?.start ?? 0) + index;
+                        const selected = actualIndex === selectedIndex;
+                        return (_jsx(Text, { backgroundColor: selected ? theme.selectionBg : undefined, children: `${selected ? "› " : "  "}${rowText(columns, (column) => cell(row, column.key))}` }, rowKey(row)));
+                    }), window !== undefined && window.hiddenBelow > 0 && (_jsx(Text, { color: theme.muted, children: `  ↓ ${window.hiddenBelow} more` }, "__indicator-below__"))] }))] }));
+}