kankaku-tui 0.1.1

package/dist/ui/dashboard-screen.js

@@ -0,0 +1,217 @@
+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 { QUICK_ACTIONS, formatQuickActionLines } from "../domain/quick-actions.js";
+import { Layout } from "./layout.js";
+import { Panel } from "./components/panel.js";
+import { Table } from "./components/table.js";
+import { Sparkline } from "./components/sparkline.js";
+import { renderBar } from "./components/bar.js";
+import { useTheme } from "./theme.js";
+const KEY_HINTS = [
+    { key: "↑↓", label: "move" },
+    { key: "enter", label: "open" },
+    { key: "r", label: "refresh" },
+    { key: "1-4", label: "screens" },
+    { key: "q", label: "quit" },
+];
+const HUB_UNAVAILABLE_REASON = "hub not configured (~/.kankaku/credentials.json)";
+/** `HH:MM`, local time, from an ISO timestamp. */
+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}`;
+}
+function formatCost(cost) {
+    return `$${cost.toFixed(2)}`;
+}
+/** The header bar's right-hand hub status, or `undefined` when the hub is not configured. */
+function hubHeaderText(hub) {
+    if (hub.status !== "ready")
+        return undefined;
+    const domain = hub.catalog?.url.replace(/^https?:\/\//, "");
+    const domainPart = domain !== undefined ? `${domain} · ` : "";
+    const syncedPart = hub.lastSyncAt !== undefined ? `synced ${formatTime(hub.lastSyncAt)}` : "no sync yet";
+    return `hub ${hub.lastSyncOk ? "●" : "✕"} ${domainPart}${syncedPart}`;
+}
+function TodayPanel({ today, width, height }) {
+    const cacheHitPart = today.cacheHit !== undefined ? `   cache hit ${Math.round(today.cacheHit * 100)}%` : "";
+    return (_jsxs(Panel, { title: "Today", width: width, height: height, children: [_jsx(Text, { children: `work   ${formatMinutes(today.workMs)}` }), _jsx(Text, { children: `wait   ${formatMinutes(today.waitingMs)}   cost  ${formatCost(today.cost)}` }), _jsx(Text, { children: `tasks  ${today.tasks}${cacheHitPart}` })] }));
+}
+function Last7DaysPanel({ points, width, height }) {
+    return (_jsxs(Panel, { title: "Last 7 days", width: width, height: height, children: [_jsxs(Text, { children: ["work  ", _jsx(Sparkline, { values: points.map((point) => point.workMs) }), "   cost  ", _jsx(Sparkline, { values: points.map((point) => point.cost) })] }), _jsx(Text, { dimColor: true, children: points.map((point) => point.weekday).join(" ") })] }));
+}
+/** Combined width of every fixed-width column but `project`, plus their separating spaces, the row's own `› `/`  ` marker prefix, and the panel's own left/right border columns. */
+const PROJECT_FIXED_COLUMNS_WIDTH = 8 + 1 + 7 + 1 + 12 + 1 + 2 + 2;
+/** Floor for the `project` column so a very narrow table still shows a sliver of the name instead of collapsing to nothing. */
+const MIN_PROJECT_NAME_WIDTH = 4;
+/**
+ * `work`/`cost`/`share` are fixed-width; `project` absorbs whatever width
+ * is left in `panelWidth` (the panel's own outer width, including its
+ * border columns) so the row's total text never exceeds the panel's
+ * actual content width — which would otherwise wrap inside the
+ * fixed-height, `overflow: hidden` panel and corrupt the scrolling
+ * window (see the matching fix in `tasks-screen.tsx`).
+ */
+function projectColumns(panelWidth) {
+    const nameWidth = Math.max(panelWidth - PROJECT_FIXED_COLUMNS_WIDTH, MIN_PROJECT_NAME_WIDTH);
+    return [
+        { key: "name", header: "project", width: nameWidth },
+        { key: "work", header: "work", width: 8, align: "right" },
+        { key: "cost", header: "cost", width: 7, align: "right" },
+        { key: "share", header: "share", width: 12 },
+    ];
+}
+function projectCell(row, key) {
+    switch (key) {
+        case "name":
+            return row.name;
+        case "work":
+            return formatMinutes(row.workMs);
+        case "cost":
+            return formatCost(row.cost);
+        case "share":
+            return renderBar(row.share, 1, 10);
+        default:
+            return "";
+    }
+}
+function ProjectsPanel({ rows, selectedIndex, width, height, maxRows, active }) {
+    return (_jsx(Panel, { title: "Projects", width: width, height: height, active: active, children: _jsx(Table, { columns: projectColumns(width), rows: rows, rowKey: (row) => row.name, cell: projectCell, selectedIndex: selectedIndex, emptyText: "no work recorded today", maxRows: maxRows }) }));
+}
+function HubPanel({ hub, width, height }) {
+    return (_jsx(Panel, { title: "Hub", width: width, height: height, children: hub.status === "unavailable" ? (_jsx(Text, { dimColor: true, children: "hub not configured" })) : (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: `pending ${hub.pending} · stale ${hub.staleOutsideWindow}` }), _jsx(Text, { children: `last sync ${hub.lastSyncOk ? "ok" : "error"}${hub.lastSyncAt !== undefined ? ` ${formatTime(hub.lastSyncAt)}` : ""}` }), hub.catalog !== undefined && _jsx(Text, { children: `catalog ${hub.catalog.clientCount} clients · ${hub.catalog.projectCount} projects` })] })) }));
+}
+/** Rows the Quick actions panel's own chrome takes outside its content: 1 top border + 1 bottom border. */
+const QUICK_ACTIONS_CHROME_ROWS = 2;
+/** Rows the Quick actions panel takes: its chrome, one line per `QUICK_ACTIONS` entry, plus one status line. */
+const QUICK_ACTIONS_PANEL_ROWS = QUICK_ACTIONS_CHROME_ROWS + QUICK_ACTIONS.length + 1;
+/**
+ * The `[ Quick actions ]` panel: `QUICK_ACTIONS` listed one per line (key
+ * in the accent colour, label muted — the same convention as the footer
+ * `KeyHints`), followed by one status line from `domain/quick-actions.ts#formatQuickActionLines`
+ * (always exactly one line, so this panel's height never changes with the
+ * message).
+ */
+function QuickActionsPanel({ state, width, height, active }) {
+    const theme = useTheme();
+    const [statusLine] = formatQuickActionLines(Math.max(width - 2, 1), state);
+    return (_jsxs(Panel, { title: "Quick actions", width: width, height: height, active: active, children: [QUICK_ACTIONS.map((action) => (_jsxs(Text, { children: [_jsx(Text, { color: theme.accent, children: action.key }), _jsx(Text, { color: theme.muted, children: `  ${action.label}` })] }, action.key))), _jsx(Text, { dimColor: state.status === "busy" || state.status === "unavailable", color: state.status === "done" && statusLine.startsWith("error:") ? theme.error : undefined, children: statusLine })] }));
+}
+/** Below this main-content width, the two-column grid collapses to one column, stacking every panel. */
+const GRID_BREAKPOINT = 70;
+/** Rows the Today card's panel takes: 1 top border + 3 content lines + 1 bottom border. */
+const TODAY_PANEL_ROWS = 5;
+/** Rows the Last 7 days panel takes: 1 top border + 2 content lines + 1 bottom border. */
+const LAST7_PANEL_ROWS = 4;
+/** Rows the Hub panel takes at most: 1 top border + up to 3 content lines + 1 bottom border. */
+const HUB_PANEL_ROWS = 5;
+/** Rows the Projects panel's own chrome (border + table header) takes outside its data rows. */
+const TABLE_CHROME_ROWS = 3;
+/** How many data rows the Projects table can show for a given `mainHeight`, depending on whether the grid is two columns (`grid`) or stacked to one (`stacked`). */
+function projectsMaxRows(mainHeight, layout) {
+    const fixedRows = layout === "grid" ? TODAY_PANEL_ROWS : TODAY_PANEL_ROWS + LAST7_PANEL_ROWS + HUB_PANEL_ROWS + QUICK_ACTIONS_PANEL_ROWS;
+    return Math.max(mainHeight - fixedRows - TABLE_CHROME_ROWS, 1);
+}
+/**
+ * The Projects panel's own explicit height for a given `mainHeight`/`layout`
+ * — `TABLE_CHROME_ROWS` plus however many data rows `projectsMaxRows`
+ * allows, so the panel itself never grows past what its own table renders
+ * (see the layout-stability rule this screen's panels all follow).
+ */
+function projectsPanelHeight(mainHeight, layout) {
+    return TABLE_CHROME_ROWS + projectsMaxRows(mainHeight, layout);
+}
+function DashboardGrid({ model, selectedIndex, mainWidth, mainHeight, focused, actionState, }) {
+    if (mainWidth < GRID_BREAKPOINT) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TodayPanel, { today: model.today, width: mainWidth, height: TODAY_PANEL_ROWS }), _jsx(Last7DaysPanel, { points: model.last7Days, width: mainWidth, height: LAST7_PANEL_ROWS }), _jsx(ProjectsPanel, { rows: model.projects, selectedIndex: selectedIndex, width: mainWidth, height: projectsPanelHeight(mainHeight, "stacked"), maxRows: projectsMaxRows(mainHeight, "stacked"), active: focused }), _jsx(QuickActionsPanel, { state: actionState, width: mainWidth, height: QUICK_ACTIONS_PANEL_ROWS, active: false }), _jsx(HubPanel, { hub: model.hub, width: mainWidth, height: HUB_PANEL_ROWS })] }));
+    }
+    const leftWidth = Math.floor(mainWidth * 0.55);
+    const rightWidth = Math.max(mainWidth - leftWidth - 1, 1);
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: leftWidth, children: [_jsx(TodayPanel, { today: model.today, width: leftWidth, height: TODAY_PANEL_ROWS }), _jsx(ProjectsPanel, { rows: model.projects, selectedIndex: selectedIndex, width: leftWidth, height: projectsPanelHeight(mainHeight, "grid"), maxRows: projectsMaxRows(mainHeight, "grid"), active: focused })] }), _jsx(Box, { width: 1 }), _jsxs(Box, { flexDirection: "column", width: rightWidth, children: [_jsx(Last7DaysPanel, { points: model.last7Days, width: rightWidth, height: LAST7_PANEL_ROWS }), _jsx(HubPanel, { hub: model.hub, width: rightWidth, height: HUB_PANEL_ROWS }), _jsx(QuickActionsPanel, { state: actionState, width: rightWidth, height: QUICK_ACTIONS_PANEL_ROWS, active: false })] })] }));
+}
+/** The Quick actions panel's initial state: idle when the hub is configured, `unavailable` (with its reason) otherwise. */
+function initialActionState(hubAvailable) {
+    return hubAvailable ? { status: "idle" } : { status: "unavailable", reason: HUB_UNAVAILABLE_REASON };
+}
+/**
+ * The Dashboard screen: a Today card (work/wait/cost/tasks/cache hit), a
+ * Last 7 days card (work and cost sparklines with weekday labels), a
+ * Projects table (work, cost and a share bar per project), a Hub card
+ * (pending/stale, last sync time, catalog summary) and a Quick actions
+ * panel (`c` refresh the catalog, `s` sync every project, `S` full-sync
+ * every project, `r` reload) inside the shared header/sidebar/footer
+ * frame. `r` reloads through `load`; `↑↓` move the Projects selection;
+ * `enter` opens the selected project in Tasks via `onOpenProject`. `c`/
+ * `s`/`S` run through `actions` (never reimplementing kankaku's own
+ * catalog/sync adapters); only one quick action runs at a time, and the
+ * dashboard model reloads once it settles so the Hub card and Projects
+ * table reflect the new state.
+ */
+export function DashboardScreen({ load, actions, roots, version, columns, rows, focused = true, onOpenProject }) {
+    const [model, setModel] = useState(load);
+    const [selected, setSelected] = useState(0);
+    const [actionState, setActionState] = useState(() => initialActionState(actions.hubAvailable));
+    const maxRowsRef = useRef(0);
+    const busyRef = useRef(false);
+    const runQuickAction = (key) => {
+        if (busyRef.current)
+            return;
+        if (key === "r") {
+            setModel(load());
+            return;
+        }
+        if (!actions.hubAvailable)
+            return;
+        busyRef.current = true;
+        setActionState({ status: "busy", key });
+        const run = key === "c" ? actions.refreshCatalog() : actions.syncAll({ full: key === "S" });
+        run
+            .then((message) => {
+            setActionState({ status: "done", key, message });
+            setModel(load());
+        })
+            .catch((error) => {
+            setActionState({ status: "done", key, message: `error: ${error instanceof Error ? error.message : String(error)}` });
+        })
+            .finally(() => {
+            busyRef.current = false;
+        });
+    };
+    useInput((input, key) => {
+        const lastIndex = Math.max(model.projects.length - 1, 0);
+        if (input === "c" || input === "s" || input === "S" || input === "r") {
+            runQuickAction(input);
+        }
+        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);
+        }
+        else if (key.return) {
+            const project = model.projects[selected];
+            if (project)
+                onOpenProject?.(project.name);
+        }
+    }, { isActive: focused });
+    return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, headerRight: hubHeaderText(model.hub), sidebarItems: SCREENS, activeId: "dashboard", sidebarStats: [`roots ${roots.length}`, `projects ${model.projects.length}`], keyHints: hintsFor("dashboard", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: ({ mainWidth, mainHeight }) => {
+            maxRowsRef.current = projectsMaxRows(mainHeight, mainWidth < GRID_BREAKPOINT ? "stacked" : "grid");
+            return _jsx(DashboardGrid, { model: model, selectedIndex: selected, mainWidth: mainWidth, mainHeight: mainHeight, focused: focused, actionState: actionState });
+        } }));
+}

package/dist/ui/layout.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from "ink";
+import { HeaderBar } from "./components/header-bar.js";
+import { Sidebar } from "./components/sidebar.js";
+import { KeyHints } from "./components/key-hints.js";
+import { useTheme } from "./theme.js";
+/** Sidebar width in the wide (side-by-side) layout. */
+const SIDEBAR_WIDTH = 16;
+/** Below this width, the main content stacks under a full-width sidebar instead of sitting beside it. */
+const STACK_BREAKPOINT = 100;
+/** Below this width, the sidebar collapses to a one-line tab strip. */
+const COLLAPSE_BREAKPOINT = 70;
+/** Rows used by the header line. */
+const HEADER_ROWS = 1;
+/** Rows used by the footer key-hints line. */
+const FOOTER_ROWS = 1;
+/** Rows used by the collapsed mode's one-line tab strip. */
+const TAB_STRIP_ROWS = 1;
+/** Fallback terminal height when neither `rows` nor `useStdout().rows` is available (e.g. a non-TTY test double). */
+const DEFAULT_ROWS = 24;
+/** Total rows the {@link Sidebar} block occupies in stacked mode: nav items, the divider, the stats lines, and its own top/bottom border. */
+function sidebarBlockRows(itemCount, statsCount) {
+    return itemCount + 1 + statsCount + 2;
+}
+function TabStrip({ items, activeId }) {
+    const theme = useTheme();
+    return (_jsx(Text, { children: items.map((item, index) => (_jsxs(Text, { children: [index > 0 ? " · " : "", _jsx(Text, { color: item.id === activeId ? theme.accent : theme.text, bold: item.id === activeId, children: item.id === activeId ? `[${item.label}]` : item.label })] }, item.id))) }));
+}
+/**
+ * The app frame: header line, sidebar + main content, footer key hints,
+ * filling the whole terminal height (`rows`, from `useStdout()` when not
+ * given). Responsive to `columns` (from `useStdout()` when not given, so
+ * tests can force a width): at 100+ columns the sidebar sits beside main;
+ * at 70-99 columns main stacks under a full-width sidebar; below 70
+ * columns the sidebar collapses to a one-line tab strip. The middle row
+ * (everything between the header and the footer) grows to fill whatever
+ * height is left, `useStdout()` re-renders this component on a terminal
+ * resize, and `children` is a render function so a screen can size its
+ * own panels and scrolling lists to the actual `mainWidth`/`mainHeight`
+ * in whichever mode is active.
+ */
+export function Layout({ columns, rows, headerLeft, headerRight, sidebarItems, activeId, sidebarStats, keyHints, focus = "sidebar", children }) {
+    const { stdout } = useStdout();
+    const width = columns ?? stdout?.columns ?? 80;
+    const height = rows ?? stdout?.rows ?? DEFAULT_ROWS;
+    const sidebarFocused = focus === "sidebar";
+    const mode = width < COLLAPSE_BREAKPOINT ? "collapsed" : width < STACK_BREAKPOINT ? "stacked" : "wide";
+    const mainWidth = mode === "wide" ? Math.max(width - SIDEBAR_WIDTH, 1) : width;
+    const middleRows = Math.max(height - HEADER_ROWS - FOOTER_ROWS, 0);
+    const chromeRows = mode === "collapsed" ? TAB_STRIP_ROWS : mode === "stacked" ? sidebarBlockRows(sidebarItems.length, sidebarStats.length) : 0;
+    const mainHeight = Math.max(middleRows - chromeRows, 0);
+    const content = children({ mainWidth, mainHeight, mode });
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, children: [_jsx(HeaderBar, { left: headerLeft, right: headerRight, width: width }), mode === "collapsed" && (_jsxs(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, children: [_jsx(TabStrip, { items: sidebarItems, activeId: activeId }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, overflow: "hidden", children: content })] })), mode === "stacked" && (_jsxs(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, children: [_jsx(Sidebar, { items: sidebarItems, activeId: activeId, stats: sidebarStats, width: width, focused: sidebarFocused }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, overflow: "hidden", children: content })] })), mode === "wide" && (_jsxs(Box, { flexDirection: "row", flexGrow: 1, minHeight: 0, alignItems: "stretch", children: [_jsx(Sidebar, { items: sidebarItems, activeId: activeId, stats: sidebarStats, width: SIDEBAR_WIDTH, focused: sidebarFocused }), _jsx(Box, { flexDirection: "column", flexGrow: 1, minHeight: 0, overflow: "hidden", children: content })] })), _jsx(KeyHints, { hints: keyHints })] }));
+}

package/dist/ui/sync-screen.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { SCREENS, hintsFor } from "../domain/nav-model.js";
+import { Layout } from "./layout.js";
+import { Panel } from "./components/panel.js";
+import { windowRows } from "../domain/list-window.js";
+import { useTheme } from "./theme.js";
+/** Fixed card width in the grid, including its border. */
+const CARD_WIDTH = 32;
+/** Estimated card height (border + up to 4 content lines: pending, synced/never, an error or result message, and a busy note), used to budget how many full rows of cards fit `mainHeight`. */
+const CARD_HEIGHT_ESTIMATE = 6;
+const KEY_HINTS = [
+    { key: "↑↓", label: "select" },
+    { key: "s", label: "sync" },
+    { key: "f", label: "full sync" },
+    { key: "S", label: "sync all" },
+    { key: "1-4", label: "screens" },
+    { key: "q", label: "quit" },
+];
+function Card({ row, active, message, busy, width }) {
+    const staleOutsidePart = row.staleOutsideWindow > 0 ? `  stale ${row.staleOutsideWindow}` : "";
+    return (_jsxs(Panel, { title: `${active ? "› " : "  "}${row.name}`, active: active, width: width, height: CARD_HEIGHT_ESTIMATE, children: [_jsx(Text, { children: `pending ${row.pending}${staleOutsidePart}` }), _jsx(Text, { dimColor: true, children: row.syncedThrough !== undefined ? `synced through ${row.syncedThrough}` : "never synced" }), row.lastError !== undefined && _jsx(Text, { color: "red", children: `error: ${row.lastError.message}` }), message !== undefined && _jsx(Text, { children: `→ ${message}` }), busy && _jsx(Text, { dimColor: true, children: "syncing\u2026" })] }));
+}
+/**
+ * The Sync screen: one `[ project ]` card per project, in a wrapping grid,
+ * from `computeSyncStatus` (`domain/sync-model.ts`, never reimplemented
+ * here). `↑↓` move the selection; `s` syncs the selected project, `f`
+ * full-syncs it, `S` syncs every project — all through
+ * `adapters/hub.ts#syncProject`. Each action's result shows inline in its
+ * card while it runs and once it settles. Without hub credentials shows a
+ * one-line note instead. Writes only through kankaku's own sync adapters.
+ */
+export function SyncScreen({ load, syncOne, syncAll, roots, version, columns, rows, focused = true }) {
+    const theme = useTheme();
+    const [model, setModel] = useState(load);
+    const [selected, setSelected] = useState(0);
+    const [messages, setMessages] = useState({});
+    const [busy, setBusy] = useState(new Set());
+    const selectedRef = useRef(0);
+    const maxVisibleRef = useRef(0);
+    const startRef = useRef(0);
+    const projectRows = model.status === "ready" ? model.rows : [];
+    const runOne = (row, full) => {
+        setBusy((prev) => new Set(prev).add(row.name));
+        void syncOne(row, { full }).then((result) => {
+            setMessages((prev) => ({ ...prev, [row.name]: result.message }));
+            setBusy((prev) => {
+                const next = new Set(prev);
+                next.delete(row.name);
+                return next;
+            });
+        });
+    };
+    useInput((input, key) => {
+        if (model.status !== "ready")
+            return;
+        const lastIndex = Math.max(projectRows.length - 1, 0);
+        if (key.downArrow) {
+            selectedRef.current = Math.min(selectedRef.current + 1, lastIndex);
+            setSelected(selectedRef.current);
+        }
+        else if (key.upArrow) {
+            selectedRef.current = Math.max(selectedRef.current - 1, 0);
+            setSelected(selectedRef.current);
+        }
+        else if (key.pageDown) {
+            selectedRef.current = Math.min(selectedRef.current + Math.max(maxVisibleRef.current, 1), lastIndex);
+            setSelected(selectedRef.current);
+        }
+        else if (key.pageUp) {
+            selectedRef.current = Math.max(selectedRef.current - Math.max(maxVisibleRef.current, 1), 0);
+            setSelected(selectedRef.current);
+        }
+        else if (key.home) {
+            selectedRef.current = 0;
+            setSelected(0);
+        }
+        else if (key.end) {
+            selectedRef.current = lastIndex;
+            setSelected(lastIndex);
+        }
+        else if (input === "s") {
+            const row = projectRows[selectedRef.current];
+            if (row)
+                runOne(row, false);
+        }
+        else if (input === "f") {
+            const row = projectRows[selectedRef.current];
+            if (row)
+                runOne(row, true);
+        }
+        else if (input === "S") {
+            setBusy(new Set(projectRows.map((row) => row.name)));
+            void syncAll().then((results) => {
+                setMessages((prev) => {
+                    const next = { ...prev };
+                    results.forEach((result, index) => {
+                        const row = projectRows[index];
+                        if (row)
+                            next[row.name] = result.message;
+                    });
+                    return next;
+                });
+                setBusy(new Set());
+            });
+        }
+    }, { isActive: focused });
+    if (model.status === "unavailable") {
+        return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, sidebarItems: SCREENS, activeId: "sync", sidebarStats: [`roots ${roots.length}`], keyHints: hintsFor("sync", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: () => _jsx(Text, { dimColor: true, children: model.reason }) }));
+    }
+    return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, sidebarItems: SCREENS, activeId: "sync", sidebarStats: [`projects ${projectRows.length}`], keyHints: hintsFor("sync", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: ({ mainWidth, mainHeight }) => {
+            if (projectRows.length === 0)
+                return _jsx(Text, { dimColor: true, children: "no projects" });
+            const cardsPerRow = Math.max(Math.floor(mainWidth / (CARD_WIDTH + 1)), 1);
+            const visibleGridRows = Math.max(Math.floor(mainHeight / CARD_HEIGHT_ESTIMATE), 1);
+            const maxVisible = cardsPerRow * visibleGridRows;
+            maxVisibleRef.current = maxVisible;
+            const window = windowRows(projectRows.length, selected, maxVisible, startRef.current);
+            startRef.current = window.start;
+            const visibleRows = projectRows.slice(window.start, window.end);
+            return (_jsxs(Box, { flexDirection: "column", children: [window.hiddenAbove > 0 && _jsx(Text, { color: theme.muted, children: `↑ ${window.hiddenAbove} more` }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", width: mainWidth, children: visibleRows.map((row, index) => {
+                            const actualIndex = window.start + index;
+                            return (_jsx(Box, { marginRight: 1, marginBottom: 1, children: _jsx(Card, { row: row, active: actualIndex === selected && focused, message: messages[row.name], busy: busy.has(row.name), width: Math.min(CARD_WIDTH, mainWidth) }) }, row.name));
+                        }) }), window.hiddenBelow > 0 && _jsx(Text, { color: theme.muted, children: `↓ ${window.hiddenBelow} more` })] }));
+        } }));
+}

package/dist/ui/tasks-screen.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, 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 { wrapText } from "../domain/text-wrap.js";
+import { Layout } from "./layout.js";
+import { Panel } from "./components/panel.js";
+import { Table } from "./components/table.js";
+import { useTheme } from "./theme.js";
+function formatCost(cost) {
+    return `$${cost.toFixed(2)}`;
+}
+/** Combined width of every fixed-width column plus their separating spaces, the row's own `› `/`  ` marker prefix, and the panel's own left/right border columns — everything the `prompt` column does not own. */
+const TASK_FIXED_COLUMNS_WIDTH = 5 + 1 + 12 + 1 + 7 + 1 + 6 + 1 + 2 + 2;
+/** Floor for the `prompt` column so a very narrow table still shows a sliver of text instead of collapsing to nothing. */
+const MIN_PROMPT_WIDTH = 4;
+/**
+ * `time`/`project`/`work`/`cost` are fixed-width; `prompt` absorbs
+ * whatever width is left in `tableWidth` (the panel's own outer width,
+ * including its border columns) so the row's total text never exceeds
+ * the panel's actual content width — which would otherwise wrap inside
+ * the fixed-height, `overflow: hidden` panel and silently eat rows from
+ * the scrolling window.
+ */
+function taskColumns(tableWidth) {
+    const promptWidth = Math.max(tableWidth - TASK_FIXED_COLUMNS_WIDTH, MIN_PROMPT_WIDTH);
+    return [
+        { key: "time", header: "time", width: 5 },
+        { key: "project", header: "project", width: 12 },
+        { key: "work", header: "work", width: 7, align: "right" },
+        { key: "cost", header: "cost", width: 6, align: "right" },
+        { key: "prompt", header: "prompt", width: promptWidth },
+    ];
+}
+function taskCell(row, key) {
+    switch (key) {
+        case "time":
+            return row.time;
+        case "project":
+            return row.project;
+        case "work":
+            return formatMinutes(row.workMs);
+        case "cost":
+            return formatCost(row.cost);
+        case "prompt":
+            return row.prompt;
+        default:
+            return "";
+    }
+}
+/** Rows the detail panel's own chrome (top border line + the inner box's bottom border) takes outside its content rows. */
+const DETAIL_CHROME_ROWS = 2;
+/**
+ * The `[ Task ]` detail panel body: fixed-count metadata lines (client,
+ * project, hub task, wall/work/wait, cost, subagents — whichever apply)
+ * plus the prompt, word-wrapped to the panel's own inner width
+ * (`wrapText`, never reimplemented here). The panel's `height` is fixed by
+ * the caller (derived from `mainHeight`, never grown by content — see the
+ * layout-stability rule in AGENTS.md-equivalent project docs); when the
+ * wrapped prompt would need more rows than are left after the metadata
+ * lines, only as many prompt lines as fit are shown, followed by a single
+ * `muted` `… N more lines` line instead of letting Ink's own overflow
+ * clipping silently swallow the rest with no visible cue.
+ */
+function DetailPanel({ row, width, height }) {
+    const theme = useTheme();
+    if (row === undefined) {
+        return (_jsx(Panel, { title: "Task", width: width, height: height, children: _jsx(Text, { dimColor: true, children: "no task selected" }) }));
+    }
+    const innerWidth = Math.max(width - 2, 1);
+    const contentRows = Math.max(height - DETAIL_CHROME_ROWS, 0);
+    const metaLines = [];
+    if (row.clientName !== undefined)
+        metaLines.push({ text: `client   ${row.clientName}`, dim: true });
+    if (row.projectName !== undefined)
+        metaLines.push({ text: `project  ${row.projectName}`, dim: true });
+    if (row.hubTaskTitle !== undefined)
+        metaLines.push({ text: `task     ${row.hubTaskTitle}`, dim: true });
+    metaLines.push({ text: `wall ${formatMinutes(row.wallMs)}   work ${formatMinutes(row.workMs)}   wait ${formatMinutes(row.waitingMs)}`, dim: false });
+    metaLines.push({ text: `cost ${formatCost(row.cost)}${row.cacheHit !== undefined ? `   cache hit ${Math.round(row.cacheHit * 100)}%` : ""}`, dim: false });
+    metaLines.push({ text: `subagents ${row.subagentCount}`, dim: false });
+    const promptBudget = Math.max(contentRows - metaLines.length, 0);
+    const wrappedPrompt = wrapText(row.fullPrompt, innerWidth);
+    const truncated = wrappedPrompt.length > promptBudget;
+    const visiblePromptLines = truncated ? wrappedPrompt.slice(0, Math.max(promptBudget - 1, 0)) : wrappedPrompt.slice(0, promptBudget);
+    const hiddenCount = wrappedPrompt.length - visiblePromptLines.length;
+    const showIndicator = truncated && promptBudget > 0;
+    return (_jsx(Panel, { title: "Task", width: width, height: height, children: _jsxs(Box, { flexDirection: "column", children: [visiblePromptLines.map((line, index) => (_jsx(Text, { children: line }, `prompt-${index}`))), showIndicator && _jsx(Text, { color: theme.muted, children: `… ${hiddenCount} more lines` }), metaLines.map((line, index) => (_jsx(Text, { dimColor: line.dim, children: line.text }, `meta-${index}`)))] }) }));
+}
+const KEY_HINTS = [
+    { key: "↑↓", label: "select" },
+    { key: "a", label: "today/all" },
+    { key: "r", label: "refresh" },
+    { key: "esc", label: "clear filter" },
+    { key: "1-4", label: "screens" },
+    { key: "q", label: "quit" },
+];
+/** Below this main-content width, the detail panel stacks under the table instead of beside it. */
+const DETAIL_BREAKPOINT = 70;
+/** Rows the `Panel` chrome (top border line + bottom border line) and the `Table`'s own header line take, outside its data rows. */
+const TABLE_CHROME_ROWS = 3;
+/**
+ * The Tasks screen: a table of tasks (via `domain/tasks-model.ts`, never
+ * reimplemented here) with a `[ Task ]` detail panel for the selected row.
+ * `a` toggles today/all, `r` reloads, `↑↓` move the selection. When
+ * `projectFilter` is set (via Today's `enter`), the table is restricted to
+ * that project and `esc` clears it through `onClearFilter`. Never writes
+ * anything to disk.
+ */
+export function TasksScreen({ load, roots, version, columns, rows, focused = true, projectFilter, onClearFilter }) {
+    const allRef = useRef(false);
+    const [all, setAll] = useState(false);
+    const [model, setModel] = useState(() => load({ all: false }));
+    const [selected, setSelected] = useState(0);
+    const visibleRows = useMemo(() => (projectFilter !== undefined ? model.rows.filter((row) => row.project === projectFilter) : model.rows), [model.rows, projectFilter]);
+    const maxRowsRef = useRef(0);
+    useInput((input, key) => {
+        const lastIndex = Math.max(visibleRows.length - 1, 0);
+        if (input === "a") {
+            const nextAll = !allRef.current;
+            allRef.current = nextAll;
+            setAll(nextAll);
+            setModel(load({ all: nextAll }));
+            setSelected(0);
+        }
+        else if (input === "r") {
+            setModel(load({ all: allRef.current }));
+        }
+        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);
+        }
+        else if (key.escape) {
+            onClearFilter?.();
+        }
+    }, { isActive: focused });
+    return (_jsx(Layout, { columns: columns, rows: rows, headerLeft: `>_ kankaku ${version}`, headerRight: projectFilter !== undefined ? `filtered: ${projectFilter}` : undefined, sidebarItems: SCREENS, activeId: "tasks", sidebarStats: [`tasks ${visibleRows.length}`, all ? "scope all" : "scope today"], keyHints: hintsFor("tasks", focused ? "main" : "sidebar", KEY_HINTS), focus: focused ? "main" : "sidebar", children: ({ mainWidth, mainHeight }) => {
+            const wide = mainWidth >= DETAIL_BREAKPOINT;
+            const tableWidth = wide ? Math.floor(mainWidth * 0.62) : mainWidth;
+            const detailWidth = wide ? Math.max(mainWidth - tableWidth - 1, 1) : mainWidth;
+            const selectedRow = visibleRows[Math.min(selected, Math.max(visibleRows.length - 1, 0))];
+            // Stacked mode splits the height between the table and the detail panel below it, mirroring the width split used in wide mode.
+            const tableHeight = wide ? mainHeight : Math.max(Math.floor(mainHeight * 0.62), TABLE_CHROME_ROWS + 1);
+            const detailHeight = wide ? mainHeight : Math.max(mainHeight - tableHeight, DETAIL_CHROME_ROWS + 1);
+            const maxRows = Math.max(tableHeight - TABLE_CHROME_ROWS, 1);
+            maxRowsRef.current = maxRows;
+            const table = (_jsx(Panel, { title: "Tasks", width: tableWidth, height: wide ? mainHeight : tableHeight, active: focused, children: _jsx(Table, { columns: taskColumns(tableWidth), rows: visibleRows, rowKey: (row) => row.id, cell: taskCell, selectedIndex: selected, emptyText: "no tasks", maxRows: maxRows }) }));
+            const detail = _jsx(DetailPanel, { row: selectedRow, width: detailWidth, height: detailHeight });
+            return wide ? (_jsxs(Box, { flexDirection: "row", children: [table, _jsx(Box, { width: 1 }), detail] })) : (_jsxs(Box, { flexDirection: "column", children: [table, detail] }));
+        } }));
+}

package/dist/ui/theme.js

@@ -0,0 +1,81 @@
+import { createContext, createElement, useContext } from "react";
+/**
+ * The three built-in presets: resolved hex values copied from
+ * [gentle-pi](https://github.com/Gentleman-Programming/gentle-pi)'s own
+ * themes (MIT), so this TUI's palette matches the owner's pi panel instead
+ * of an unrelated default. `gentle-pi/themes/GentlemanSexy.json`.
+ */
+export const GENTLEMAN_SEXY_THEME = {
+    accent: "#F43888",
+    border: "#563040",
+    borderActive: "#FF4F9A",
+    text: "#F6EFF3",
+    muted: "#A78E9B",
+    dim: "#76616B",
+    ok: "#D2CBD0",
+    warn: "#F2B86D",
+    error: "#FF718F",
+    selectionBg: "#28121E",
+};
+/** `gentle-pi/themes/GentlemanCute.json` (MIT) — resolved hex values. */
+export const GENTLEMAN_CUTE_THEME = {
+    accent: "#F095C8",
+    border: "#563040",
+    borderActive: "#FFB1DD",
+    text: "#F6EFF3",
+    muted: "#A78E9B",
+    dim: "#76616B",
+    ok: "#B4E7C7",
+    warn: "#F2B86D",
+    error: "#FF718F",
+    selectionBg: "#28121E",
+};
+/** `gentle-pi/themes/Gentle.json` (MIT) — resolved hex values. */
+export const GENTLE_THEME = {
+    accent: "#7FB4CA",
+    border: "#313342",
+    borderActive: "#7FB4CA",
+    text: "#F3F6F9",
+    muted: "#5C6170",
+    dim: "#5C6170",
+    ok: "#B7CC85",
+    warn: "#DEBA87",
+    error: "#CB7C94",
+    selectionBg: "#232A40",
+};
+/** Every built-in preset's selectable name, in the order `resolveTheme`'s usage error lists them. */
+export const THEME_NAMES = ["gentleman-sexy", "gentleman-cute", "gentle"];
+/** Every built-in preset, keyed by its selectable `ThemeName`. */
+export const THEMES = {
+    "gentleman-sexy": GENTLEMAN_SEXY_THEME,
+    "gentleman-cute": GENTLEMAN_CUTE_THEME,
+    gentle: GENTLE_THEME,
+};
+/** The default preset when no `--theme`/`KANKAKU_TUI_THEME` is given: the owner's own pi theme. */
+export const DEFAULT_THEME = GENTLEMAN_SEXY_THEME;
+/**
+ * Resolve a `--theme`/`KANKAKU_TUI_THEME` name (see `cli.tsx`) to its
+ * `Theme` preset. An unknown name fails with a usage error listing every
+ * valid `THEME_NAMES` entry, rather than silently falling back to a
+ * default — pure, so it's testable without rendering anything.
+ */
+export function resolveTheme(name) {
+    const theme = THEMES[name];
+    if (theme === undefined) {
+        return { ok: false, reason: `unknown theme "${name}"; choose one of: ${THEME_NAMES.join(", ")}` };
+    }
+    return { ok: true, theme };
+}
+const ThemeContext = createContext(DEFAULT_THEME);
+/**
+ * Provides a {@link Theme} to its subtree via context. Written with
+ * `createElement` (not JSX) so this file can stay a plain `.ts` module, as
+ * named in `odd/tasks/visual-system.md`.
+ */
+export function ThemeProvider({ theme = DEFAULT_THEME, children }) {
+    return createElement(ThemeContext.Provider, { value: theme }, children);
+}
+/** The current {@link Theme}: the nearest {@link ThemeProvider}'s value, or {@link DEFAULT_THEME} outside one. */
+export function useTheme() {
+    return useContext(ThemeContext);
+}