kankaku-tui 0.1.1

package/dist/ui/today-screen.js

@@ -0,0 +1,161 @@
+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";
+import { Sparkline } from "./components/sparkline.js";
+import { renderBar } from "./components/bar.js";
+const KEY_HINTS = [
+    { key: "↑↓", label: "move" },
+    { key: "enter", label: "open" },
+    { key: "r", label: "refresh" },
+    { key: "1-4", label: "screens" },
+    { key: "q", label: "quit" },
+];
+/** `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` })] })) }));
+}
+/** 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;
+    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, }) {
+    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(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 })] })] }));
+}
+/**
+ * The Today screen: a dashboard (Today card, Last 7 days sparklines,
+ * Projects table with share bars, Hub card) inside the shared
+ * header/sidebar/footer frame. `r` reloads through `load`; `↑↓` move the
+ * Projects selection; `enter` opens the selected project in Tasks via
+ * `onOpenProject`. Never writes anything to disk.
+ */
+export function TodayScreen({ load, roots, version, columns, rows, focused = true, onOpenProject }) {
+    const [model, setModel] = useState(load);
+    const [selected, setSelected] = useState(0);
+    const maxRowsRef = useRef(0);
+    useInput((input, key) => {
+        const lastIndex = Math.max(model.projects.length - 1, 0);
+        if (input === "r") {
+            setModel(load());
+        }
+        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: "today", sidebarStats: [`roots ${roots.length}`, `projects ${model.projects.length}`], keyHints: hintsFor("today", 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 });
+        } }));
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "kankaku-tui",
+  "version": "0.1.1",
+  "description": "Terminal app that shows today's kankaku work across every project on disk",
+  "license": "MIT",
+  "type": "module",
+  "bin": {
+    "kankaku": "dist/cli.js"
+  },
+  "files": [
+    "dist/",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "node --import ./tests/setup.mjs --import tsx --test tests/*.test.ts tests/*.test.tsx",
+    "check": "npm run build && npm run typecheck && npm test",
+    "dev": "tsx src/cli.tsx",
+    "prepublishOnly": "npm run check"
+  },
+  "dependencies": {
+    "ink": "^7.1.1",
+    "kankaku": "^0.8.0",
+    "react": "^19.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "ink-testing-library": "^4",
+    "tsx": "^4",
+    "typescript": "^5.7.0"
+  }
+}