loop-task 1.1.0 → 1.4.0

package/dist/board/components/Footer.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { t } from "../../i18n/index.js";
+import { ENTITY_COLORS } from "../../config/constants.js";
+export function Footer(props) {
+    const { mode } = props;
+    const badge = {
+        normal: { label: t("board.badgeNormal"), bg: ENTITY_COLORS.loop },
+        search: { label: t("board.badgeSearch"), bg: "#38bdf8" },
+        create: { label: t("board.badgeCreate"), bg: ENTITY_COLORS.loop },
+        task: { label: t("board.badgeTask"), bg: ENTITY_COLORS.task },
+        help: { label: t("board.badgeHelp"), bg: "#facc15" },
+        confirm: { label: t("board.badgeConfirm"), bg: "#f87171" },
+        projects: { label: t("project.projectsLabel"), bg: ENTITY_COLORS.project },
+    };
+    const hints = {
+        normal: [
+            ["←/→", t("board.hintSwitchPanel")],
+            ["/", t("board.hintSearch")],
+            ["h", t("board.hintHelp")],
+            ["esc", t("board.hintQuit")],
+        ],
+        search: [
+            [t("board.hintKeyEnter"), t("board.hintApply")],
+            [t("board.hintKeyEsc"), t("board.hintCancel")],
+        ],
+        create: [
+            [t("board.hintKeyTab"), t("board.hintNextField")],
+            [t("board.hintKeyEnter"), t("board.hintCreate")],
+            [t("board.hintKeyEsc"), t("board.hintCancel")],
+        ],
+        task: [
+            [t("board.hintKeyTab"), t("board.hintNextField")],
+            [t("board.hintKeyEnter"), t("board.hintCreate")],
+            [t("board.hintKeyEsc"), t("board.hintCancel")],
+        ],
+        help: [[t("board.hintKeyHelpEsc"), t("board.hintBack")]],
+        confirm: [
+            [t("board.hintKeyArrows"), t("board.hintChoose")],
+            [t("board.hintKeyEnter"), t("board.hintConfirm")],
+            [t("board.hintKeyYN"), t("board.hintYesNo")],
+            [t("board.hintKeyEsc"), t("board.hintCancel")],
+        ],
+        projects: [
+            ["n", t("project.keyNewHint")],
+            ["e", t("project.keyEditHint")],
+            ["d", t("project.keyDeleteHint")],
+            [t("board.hintKeyEsc"), t("board.hintBack")],
+        ],
+    };
+    const current = badge[mode];
+    return (_jsxs("box", { style: { flexDirection: "row", height: 1 }, children: [_jsx("box", { style: { backgroundColor: current.bg, paddingLeft: 1, paddingRight: 1 }, children: _jsx("text", { fg: "#0b0b0b", children: _jsx("strong", { children: current.label }) }) }), _jsx("box", { style: { flexGrow: 1, paddingLeft: 1, flexDirection: "row" }, children: _jsx("text", { children: hints[mode].map(([k, a], i) => (_jsxs("span", { children: [i > 0 ? _jsx("span", { fg: "#374151", children: "  " }) : null, _jsx("span", { fg: "#38bdf8", children: k }), _jsxs("span", { fg: "#6b7280", children: [":", a] })] }, k))) }) })] }));
+}

package/dist/board/components/Header.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useTerminalDimensions } from "@opentui/react";
+import { HEADER_COMPACT_WIDTH, ENTITY_COLORS } from "../../config/constants.js";
+import { t } from "../../i18n/index.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+function ActionButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.focused ? "#1e2a4a" : isHovered ? HOVER_BG : undefined;
+    return (_jsx("box", { onMouseDown: props.onMouseDown, style: { flexGrow: 0, paddingLeft: 1, paddingRight: 1, marginLeft: 1, backgroundColor: bg }, ...hoverProps, children: _jsx("text", { fg: props.textColor, children: props.label }) }));
+}
+export function Header(props) {
+    const { daemonStatus, counts, view, focusedPanel, onViewLoops, onViewTasks, onViewProjects, onAddLoop, onAddTask, onAddProject } = props;
+    const { width } = useTerminalDimensions();
+    const compact = width < HEADER_COMPACT_WIDTH;
+    const color = daemonStatus === "connected"
+        ? "#4ade80"
+        : daemonStatus === "error"
+            ? "#f87171"
+            : "#facc15";
+    const symbol = daemonStatus === "connected" ? "✓" : daemonStatus === "error" ? "✗" : "…";
+    let buttons;
+    if (view === "projects") {
+        buttons = [
+            { label: t("board.viewLoopsLabel"), color: ENTITY_COLORS.loop, panel: "header-tasks", action: onViewLoops },
+            { label: t("board.viewTasksLabel"), color: ENTITY_COLORS.task, panel: "header-projects", action: onViewTasks },
+            { label: t("project.newProjectLabel"), color: ENTITY_COLORS.project, panel: "header-new", action: onAddProject },
+        ];
+    }
+    else if (view === "task-list") {
+        buttons = [
+            { label: t("project.manageLabel"), color: ENTITY_COLORS.project, panel: "header-tasks", action: onViewProjects },
+            { label: t("board.viewLoopsLabel"), color: ENTITY_COLORS.loop, panel: "header-projects", action: onViewLoops },
+            { label: t("board.taskActionNew"), color: ENTITY_COLORS.task, panel: "header-new", action: onAddTask },
+        ];
+    }
+    else {
+        // board (default)
+        buttons = [
+            { label: t("project.manageLabel"), color: ENTITY_COLORS.project, panel: "header-tasks", action: onViewProjects },
+            { label: t("board.viewTasksLabel"), color: ENTITY_COLORS.task, panel: "header-projects", action: onViewTasks },
+            { label: t("board.newLoopLabel"), color: ENTITY_COLORS.loop, panel: "header-new", action: onAddLoop },
+        ];
+    }
+    return (_jsxs("box", { style: { flexDirection: "column" }, children: [_jsx("box", { style: { flexDirection: "row", paddingLeft: 1, paddingRight: 1 }, children: _jsxs("text", { children: [_jsx("strong", { fg: "#a3e635", children: t("board.appName") }), compact ? null : _jsx("span", { fg: "#6b7280", children: t("board.appTagline") })] }) }), _jsxs("box", { style: { flexDirection: "row", paddingLeft: 1, paddingRight: 1, alignItems: "center" }, children: [_jsx("box", { style: { flexGrow: 1 }, children: _jsxs("text", { children: [_jsx("span", { fg: "#6b7280", children: t("board.daemonLabel") }), _jsxs("span", { fg: color, children: [symbol, " ", daemonStatus] }), compact ? null : (_jsxs(_Fragment, { children: [_jsx("span", { fg: "#6b7280", children: t("board.loopsLabel") }), _jsx("span", { fg: "#e5e7eb", children: counts.total }), _jsx("span", { fg: "#6b7280", children: t("board.runningLabel") }), _jsx("span", { fg: "#4ade80", children: counts.running }), _jsx("span", { fg: "#6b7280", children: t("board.waitingLabel") }), _jsx("span", { fg: "#38bdf8", children: counts.waiting }), _jsx("span", { fg: "#6b7280", children: t("board.pausedLabel") }), _jsx("span", { fg: "#facc15", children: counts.paused }), _jsx("span", { fg: "#6b7280", children: t("board.idleLabel") }), _jsx("span", { fg: "#fb923c", children: counts.idle })] }))] }) }), buttons.map((btn) => btn.action ? (_jsx(ActionButton, { label: btn.label, textColor: btn.color, focused: focusedPanel === btn.panel, onMouseDown: btn.action }, btn.panel)) : null)] }), _jsx("box", { style: { height: 1, paddingLeft: 1, paddingRight: 1 }, children: _jsx("text", { fg: "#374151", children: "─".repeat(Math.max(0, width - 2)) }) })] }));
+}

package/dist/board/components/HelpModal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+export function HelpModal() {
+    const { width } = useTerminalDimensions();
+    const rows = [
+        ["e", "edit loop"],
+        ["d/del", "delete loop"],
+        ["f", "force run"],
+        ["p", "pause/play (contextual)"],
+        ["s", "stop loop (resets schedule)"],
+        [t("board.helpKeyEnter"), t("board.helpEdit")],
+        ["n", t("board.helpCreate")],
+        ["t", t("board.helpCreateTask")],
+        ["o", t("board.helpCycleSort")],
+        ["←/→", t("board.helpSwitchPanel")],
+        ["/", t("board.helpSearch")],
+        ["h", t("board.helpToggleHelp")],
+        ["esc", t("board.helpQuit")],
+    ];
+    return (_jsx("box", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 90,
+        }, children: _jsx("box", { title: t("board.helpTitle"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(52, width - 4),
+                backgroundColor: "#111827",
+            }, children: rows.map(([keys, desc]) => (_jsxs("text", { children: [_jsx("span", { fg: "#38bdf8", children: keys.padEnd(16) }), desc] }, keys))) }) }));
+}

package/dist/board/components/Inspector.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { t } from "../../i18n/index.js";
+import { commandLine, describeLoop, statusColor, statusLabel, timeAgo } from "../format.js";
+export function Inspector(props) {
+    const { loop } = props;
+    if (!loop) {
+        return (_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { backgroundColor: "#0b0b0b" }, children: _jsx("text", { fg: "#9ca3af", children: t("board.inspectorEmpty") }) }));
+    }
+    const cmd = commandLine(loop.command, loop.commandArgs);
+    const maxRuns = loop.maxRuns !== null ? String(loop.maxRuns) : t("board.unlimited");
+    return (_jsxs("box", { title: t("board.inspectorTitle"), border: true, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsxs("text", { children: [_jsx("strong", { children: t("board.fieldId") }), " ", loop.id] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldDesc") }), " ", describeLoop(loop)] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldCommand") }), " ", cmd] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldTask") }), " ", loop.taskId] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldDir") }), " ", loop.cwd || t("board.inherit")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldInterval") }), " ", loop.intervalHuman] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldStatus") }), " ", _jsx("span", { fg: statusColor(loop.status), children: statusLabel(loop.status) })] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldRuns") }), " ", loop.runCount, " / ", maxRuns] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldLastRun") }), " ", timeAgo(loop.lastRunAt)] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldLastExit") }), " ", loop.lastExitCode !== null ? String(loop.lastExitCode) : t("format.dash")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldNextRun") }), " ", loop.nextRunAt ? timeAgo(loop.nextRunAt) : t("format.dash")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldPid") }), " ", loop.pid] })] }));
+}

package/dist/board/components/LogModal.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { formatRunDuration, formatRunTime } from "../format.js";
+import { streamRunLog } from "../daemon.js";
+import { LOG_LINES_MAX } from "../../config/constants.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+export function LogModal(props) {
+    const { loopId, run, logLines: staticLines, loading } = props;
+    const { width, height } = useTerminalDimensions();
+    const isRunning = run.status === "running";
+    const [streamLines, setStreamLines] = useState([]);
+    const socketRef = useRef(null);
+    useEffect(() => {
+        if (!isRunning || !loopId)
+            return;
+        setStreamLines([t("board.logWaiting")]);
+        const socket = streamRunLog(loopId, run.runNumber, (line) => setStreamLines((prev) => {
+            const next = prev[0] === t("board.logWaiting") ? [] : prev;
+            return [...next, line].slice(-LOG_LINES_MAX);
+        }), () => { }, () => { });
+        socketRef.current = socket;
+        return () => {
+            socket.destroy();
+            if (socketRef.current === socket) {
+                socketRef.current = null;
+            }
+        };
+    }, [isRunning, loopId, run.runNumber]);
+    useKeyboard((key) => {
+        if (key.ctrl && key.name === "c") {
+            const all = (isRunning ? streamLines : staticLines).join("\n");
+            copyToClipboard(all);
+        }
+    });
+    const logLines = isRunning ? streamLines : staticLines;
+    const success = isRunning ? true : run.exitCode === 0;
+    const icon = isRunning ? "⟳" : success ? "✓" : "✗";
+    const iconColor = isRunning ? "#facc15" : success ? "#4ade80" : "#f87171";
+    const chainLabel = run.chainName ? ` → ${run.chainName}` : "";
+    return (_jsx("box", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 100,
+        }, children: _jsxs("box", { title: `${t("board.logModalTitle", { icon, time: formatRunTime(run.startedAt) })}${chainLabel}`, border: true, style: {
+                flexDirection: "column",
+                minWidth: Math.min(60, width - 4),
+                width: Math.min(width - 4, 100),
+                height: Math.min(height - 4, 30),
+                backgroundColor: "#111827",
+            }, children: [_jsx("scrollbox", { style: { flexGrow: 1, backgroundColor: "#0b0b0b" }, children: loading && !isRunning ? (_jsx("text", { fg: "#9ca3af", children: t("board.logModalLoading") })) : logLines.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: t("board.logModalEmpty") })) : (logLines.map((line, i) => _jsx("text", { children: line }, i))) }), _jsxs("box", { style: { flexDirection: "row", justifyContent: "space-between", backgroundColor: "#111827" }, children: [_jsxs("text", { children: [_jsx("span", { fg: iconColor, children: icon }), " ", isRunning ? (_jsx("span", { fg: "#facc15", children: t("board.logModalRunning") })) : (_jsxs(_Fragment, { children: [_jsx("span", { fg: "#9ca3af", children: formatRunDuration(run.duration) }), " ", _jsxs("span", { fg: success ? "#4ade80" : "#f87171", children: ["exit ", run.exitCode] })] }))] }), _jsx("text", { fg: "#6b7280", children: t("board.logModalEscClose") })] })] }) }));
+}

package/dist/board/components/Navigator.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { describeLoop, sinceLabel, statusColor, statusLabel, timingLabel, truncate } from "../format.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
+function fit(text, width) {
+    if (width <= 0)
+        return "";
+    if (text.length <= width)
+        return text.padEnd(width);
+    return truncate(text, width);
+}
+export function Navigator(props) {
+    const { visible, total, selectedIndex, filters, sort, breakpoint, focused, projects, onSelect, onActivate } = props;
+    const { width, height } = useTerminalDimensions();
+    const scrollRef = useRef(null);
+    const [, setTick] = useState(0);
+    const panelWidth = width * (breakpoint === "narrow" ? 1 : 0.605) - 4;
+    const panelHeight = height - (breakpoint === "narrow" ? 10 : 7);
+    const statusW = 8;
+    const exitW = 2;
+    const runsW = 5;
+    const skpW = 4;
+    const bulletW = 2;
+    const nonVar = 2 + 1 + statusW + 1 + 1 + 1 + exitW + 1 + 1 + runsW + 1 + skpW;
+    const avail = Math.floor(panelWidth) - nonVar - bulletW;
+    const descW = Math.min(22, Math.max(6, Math.round(avail * 0.30)));
+    const sinceW = Math.min(14, Math.max(8, Math.round(avail * 0.35)));
+    const timingW = Math.max(6, avail - descW - sinceW);
+    const header = "  " +
+        fit("", bulletW) +
+        fit(t("board.headerDescription"), descW) +
+        " " +
+        fit(t("board.headerStatus"), statusW) +
+        " " +
+        fit(t("board.headerSince"), sinceW) +
+        " " +
+        fit(t("board.headerTiming"), timingW) +
+        " " +
+        fit("EX", exitW) +
+        " " +
+        "#" + fit(t("board.headerRuns"), runsW) +
+        " " +
+        fit(t("board.headerSkipped"), skpW);
+    useEffect(() => {
+        const id = `nav-row-${selectedIndex}`;
+        scrollRef.current?.scrollChildIntoView(id);
+    }, [selectedIndex]);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTick((tick) => tick + 1);
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs("box", { title: t("board.navigatorTitle", { visible: visible.length, total, sort, status: filters.status }), border: true, borderColor: focused ? ENTITY_COLORS.loop : "#1e3a4a", style: { width: breakpoint === "narrow" ? "100%" : "60.5%", flexShrink: 0, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("text", { fg: "#6b7280", style: { height: 1, overflow: "hidden" }, children: header }), visible.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: t("board.noMatch") })) : (_jsx("scrollbox", { ref: scrollRef, style: { flexGrow: 1, maxHeight: panelHeight, backgroundColor: "#0b0b0b" }, children: visible.map((loop, index) => {
+                    const isSelected = index === selectedIndex;
+                    const exit = loop.lastExitCode === null ? "-" : String(loop.lastExitCode);
+                    const proj = projects?.find((p) => p.id === (loop.projectId ?? "default"));
+                    const bulletColor = proj?.color ?? "#ffffff";
+                    return (_jsx(NavigatorRow, { id: `nav-row-${index}`, loop: loop, index: index, isSelected: isSelected, focused: focused, exit: exit, statusW: statusW, sinceW: sinceW, descW: descW, timingW: timingW, exitW: exitW, runsW: runsW, skpW: skpW, bulletColor: bulletColor, onSelect: onSelect, onActivate: onActivate }, loop.id));
+                }) }))] }));
+}
+function NavigatorRow(props) {
+    const { id, loop, index, isSelected, focused, exit, statusW, sinceW, descW, timingW, exitW, runsW, skpW, bulletColor, onSelect, onActivate } = props;
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = isSelected ? (focused ? "#1e3a8a" : "#1e2a4a") : isHovered ? HOVER_BG : undefined;
+    const lastClickRef = useRef(0);
+    function handleClick() {
+        const now = Date.now();
+        if (now - lastClickRef.current < 400) {
+            onActivate(index);
+        }
+        else {
+            onSelect(index);
+        }
+        lastClickRef.current = now;
+    }
+    const descText = fit(truncate(describeLoop(loop), descW), descW);
+    const afterDesc = ` ${fit(statusLabel(loop.status), statusW)} ${fit(sinceLabel(loop), sinceW)} ${fit(timingLabel(loop), timingW)} ${fit(exit, exitW)} #${String(loop.runCount).padStart(runsW)} ${fit(loop.skippedCount > 0 ? String(loop.skippedCount) : "-", skpW)}`;
+    const statusFg = statusColor(loop.status);
+    return (_jsx("box", { id: id, onMouseDown: handleClick, backgroundColor: bg, style: { height: 1, overflow: "hidden" }, ...hoverProps, children: _jsxs("text", { fg: "#e5e7eb", children: [isSelected ? "› " : "  ", _jsx("span", { fg: bulletColor, children: "● " }), descText, " ", _jsx("span", { fg: statusFg, children: afterDesc.slice(1, 1 + statusW) }), afterDesc.slice(1 + statusW)] }) }));
+}

package/dist/board/components/ProjectsModal.js

@@ -0,0 +1,70 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+const ALL_ID = "all";
+export function ProjectsModal(props) {
+    const { projects, loops, currentProjectId, onSelect, onClose } = props;
+    const { width } = useTerminalDimensions();
+    const [query, setQuery] = useState("");
+    // "Show All" synthetic entry always first, then real projects sorted alphabetically
+    const sorted = [...projects].sort((a, b) => a.name.localeCompare(b.name));
+    const allEntry = { id: ALL_ID, name: t("project.showAll"), color: "#6b7280", isSystem: false, isDefault: false, createdAt: "" };
+    const entries = [allEntry, ...sorted];
+    const filtered = query
+        ? entries.filter((p) => p.id === ALL_ID || p.name.toLowerCase().startsWith(query.toLowerCase()))
+        : entries;
+    const initialIndex = Math.max(0, filtered.findIndex((p) => p.id === currentProjectId));
+    const [selectedIndex, setSelectedIndex] = useState(initialIndex);
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
+    useKeyboard((key) => {
+        if (key.name === "up") {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.name === "down") {
+            setSelectedIndex((i) => Math.min(filtered.length - 1, i + 1));
+            return;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            const entry = filtered[clampedIndex];
+            if (entry)
+                onSelect(entry.id);
+            return;
+        }
+        if (key.name === "escape") {
+            onClose();
+            return;
+        }
+        if (key.name === "backspace") {
+            setQuery((q) => q.slice(0, -1));
+            return;
+        }
+        if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
+            setQuery((q) => q + key.sequence);
+            setSelectedIndex(0);
+        }
+    });
+    return (_jsx("box", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 100,
+        }, children: _jsxs("box", { title: t("project.selectProject"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(50, width - 4),
+                backgroundColor: "#111827",
+            }, children: [_jsx("box", { border: true, style: { height: 3, marginBottom: 1, backgroundColor: "#0b0b0b" }, children: _jsxs("text", { fg: query ? "#e5e7eb" : "#6b7280", children: [query || "type to filter...", "\u258E"] }) }), filtered.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: "No projects match" })) : (filtered.map((entry, index) => {
+                    const isSelected = index === clampedIndex;
+                    const bg = isSelected ? "#1e3a8a" : undefined;
+                    const loopCount = entry.id === ALL_ID
+                        ? loops.length
+                        : loops.filter((l) => (l.projectId ?? "default") === entry.id).length;
+                    return (_jsx("box", { backgroundColor: bg, onMouseDown: () => onSelect(entry.id), style: { height: 1 }, children: _jsxs("text", { children: [isSelected ? "› " : "  ", _jsx("span", { fg: entry.color, children: "\u25CF" }), ` ${entry.name} `, _jsx("span", { fg: "#6b7280", children: `(${loopCount})` })] }) }, entry.id));
+                }))] }) }));
+}

package/dist/board/components/ProjectsPage.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
+import { CreateProjectModal } from "./CreateProjectModal.js";
+import { EditProjectModal } from "./EditProjectModal.js";
+import { DeleteProjectConfirm } from "./DeleteProjectConfirm.js";
+const PROJECT_ACTION_COUNT = 2;
+function ProjectActionButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const fg = props.selected ? "#ffffff" : isHovered ? "#e5e7eb" : "#9ca3af";
+    return (_jsx("box", { onMouseDown: props.onMouseDown, style: { backgroundColor: bg, paddingLeft: 1, paddingRight: 1, marginRight: 1 }, ...hoverProps, children: _jsx("text", { fg: fg, children: _jsx("strong", { children: props.label }) }) }));
+}
+export function ProjectsPage(props) {
+    const { projects, loops, onClose, onRefresh, onOpenCreate } = props;
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [subModal, setSubModal] = useState("none");
+    const [focusedPanel, setFocusedPanel] = useState("list");
+    const [selectedAction, setSelectedAction] = useState(0);
+    // Expose create trigger to parent via callback
+    useState(() => { onOpenCreate?.(() => setSubModal("create")); });
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, projects.length - 1));
+    const selectedProject = projects[clampedIndex] ?? null;
+    const loopCount = (projectId) => loops.filter((l) => (l.projectId ?? "default") === projectId).length;
+    function runAction(actionIndex) {
+        if (!selectedProject || selectedProject.isSystem)
+            return;
+        if (actionIndex === 0)
+            setSubModal("edit");
+        else if (actionIndex === 1)
+            setSubModal("delete");
+    }
+    useKeyboard((key) => {
+        if (subModal !== "none")
+            return;
+        if (key.name === "up") {
+            if (focusedPanel === "list")
+                setSelectedIndex((i) => Math.max(0, i - 1));
+            else
+                setSelectedAction((a) => Math.max(0, a - 1));
+            return;
+        }
+        if (key.name === "down") {
+            if (focusedPanel === "list")
+                setSelectedIndex((i) => Math.min(projects.length - 1, i + 1));
+            else
+                setSelectedAction((a) => Math.min(PROJECT_ACTION_COUNT - 1, a + 1));
+            return;
+        }
+        if (key.name === "left" || key.name === "right") {
+            setFocusedPanel((p) => (p === "list" ? "actions" : "list"));
+            return;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            if (focusedPanel === "list") {
+                setFocusedPanel("actions");
+            }
+            else {
+                runAction(selectedAction);
+            }
+            return;
+        }
+        if (key.name === "n") {
+            setSubModal("create");
+            return;
+        }
+        if (key.name === "e" && selectedProject && !selectedProject.isSystem) {
+            setSubModal("edit");
+            return;
+        }
+        if (key.name === "d" && selectedProject && !selectedProject.isSystem) {
+            setSubModal("delete");
+            return;
+        }
+        if (key.name === "escape") {
+            onClose();
+        }
+    });
+    const actions = [
+        { key: "edit", label: t("project.editProjectLabel") },
+        { key: "delete", label: t("project.deleteProjectLabel") },
+    ];
+    return (_jsxs("box", { style: { flexDirection: "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { title: t("project.projectsTitle"), border: true, borderColor: focusedPanel === "list" ? ENTITY_COLORS.project : "#1e3a2a", style: { width: "40%", flexDirection: "column", backgroundColor: "#0b0b0b", flexShrink: 0 }, children: [_jsxs("text", { fg: "#9ca3af", children: [t("project.keyNewHint"), " | ", t("project.keyEditHint"), " | ", t("project.keyDeleteHint")] }), projects.map((project, index) => {
+                        const isSelected = index === clampedIndex;
+                        const bg = isSelected ? "#1e3a8a" : undefined;
+                        const count = loopCount(project.id);
+                        return (_jsx("box", { backgroundColor: bg, onMouseDown: () => { setSelectedIndex(index); setFocusedPanel("list"); }, style: { height: 1 }, children: _jsxs("text", { children: [isSelected ? "› " : "  ", _jsx("span", { fg: project.color, children: "\u25CF" }), ` ${project.name} `, _jsx("span", { fg: "#6b7280", children: `(${count})` })] }) }, project.id));
+                    })] }), _jsxs("box", { style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", padding: 1 }, children: selectedProject ? (_jsxs(_Fragment, { children: [_jsxs("text", { children: [_jsx("span", { fg: selectedProject.color, children: "\u25CF" }), ` `, _jsx("strong", { children: selectedProject.name })] }), _jsx("text", { fg: "#6b7280", children: t("project.loopCount", { count: String(loopCount(selectedProject.id)) }) }), selectedProject.isSystem ? (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) : null] })) : (_jsx("text", { fg: "#9ca3af", children: t("project.noLoops") })) }), _jsx("box", { border: true, borderColor: focusedPanel === "actions" ? ENTITY_COLORS.project : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, paddingLeft: 1, backgroundColor: "#0b0b0b", alignItems: "center", justifyContent: selectedProject?.isSystem ? "center" : "flex-start" }, children: selectedProject && !selectedProject.isSystem ? (actions.map((action, i) => (_jsx(ProjectActionButton, { label: action.label, selected: focusedPanel === "actions" && selectedAction === i, onMouseDown: () => { setFocusedPanel("actions"); runAction(i); } }, action.key)))) : (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) })] }), subModal === "create" ? (_jsx(CreateProjectModal, { onDone: async (project) => {
+                    setSubModal("none");
+                    await onRefresh();
+                    const newIndex = projects.findIndex((p) => p.id === project.id);
+                    if (newIndex >= 0)
+                        setSelectedIndex(newIndex);
+                }, onCancel: () => setSubModal("none") })) : null, subModal === "edit" && selectedProject ? (_jsx(EditProjectModal, { project: selectedProject, onDone: async () => {
+                    setSubModal("none");
+                    await onRefresh();
+                }, onCancel: () => setSubModal("none") })) : null, subModal === "delete" && selectedProject ? (_jsx(DeleteProjectConfirm, { project: selectedProject, loopCount: loopCount(selectedProject.id), onDone: async () => {
+                    setSubModal("none");
+                    setSelectedIndex((i) => Math.max(0, i - 1));
+                    await onRefresh();
+                }, onCancel: () => setSubModal("none") })) : null] }));
+}

package/dist/board/components/RunHistory.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useRef, useMemo } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { formatFileSize, formatRunDuration, formatRunTime } from "../format.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+function groupRuns(runs) {
+    const groups = [];
+    let i = 0;
+    while (i < runs.length) {
+        const current = runs[i];
+        if (current.chainGroupId) {
+            const group = runs.filter((r) => r.chainGroupId === current.chainGroupId);
+            const first = group[0];
+            const allSuccess = group.every((r) => r.status === "completed" && r.exitCode === 0);
+            const isRunning = group.some((r) => r.status === "running");
+            groups.push({
+                runs: group,
+                startedAt: first.startedAt,
+                totalDuration: group.reduce((s, r) => s + r.duration, 0),
+                totalLogSize: group.reduce((s, r) => s + r.logSize, 0),
+                allSuccess,
+                isRunning,
+                chainName: group.find((r) => r.chainName)?.chainName ?? null,
+            });
+            i += group.length;
+        }
+        else {
+            groups.push({
+                runs: [current],
+                startedAt: current.startedAt,
+                totalDuration: current.duration,
+                totalLogSize: current.logSize,
+                allSuccess: current.status === "completed" && current.exitCode === 0,
+                isRunning: current.status === "running",
+                chainName: null,
+            });
+            i++;
+        }
+    }
+    return groups;
+}
+function fit(text, width) {
+    if (width <= 0)
+        return "";
+    if (text.length <= width)
+        return text.padEnd(width);
+    return text.length > width ? text.slice(0, width - 3) + "..." : text;
+}
+export function RunHistory(props) {
+    const { loop, selectedRunIndex, focused, onSelectRun, onOpenRun } = props;
+    const { height } = useTerminalDimensions();
+    const scrollRef = useRef(null);
+    const runs = loop?.runHistory ?? [];
+    const grouped = useMemo(() => groupRuns(runs), [runs]);
+    useEffect(() => {
+        const id = `run-row-${selectedRunIndex}`;
+        scrollRef.current?.scrollChildIntoView(id);
+    }, [selectedRunIndex]);
+    const panelHeight = Math.max(4, Math.floor((height - 10) * 0.45));
+    const timeW = 8;
+    const durW = 7;
+    const sizeW = 8;
+    const header = " " +
+        fit(t("board.runHistoryTime"), timeW) +
+        " " +
+        fit(t("board.runHistoryDuration"), durW) +
+        " " +
+        fit(t("board.runHistorySize"), sizeW);
+    return (_jsxs("box", { title: t("board.runHistoryTitleHint"), border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("text", { fg: "#6b7280", children: header }), grouped.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: t("board.runHistoryEmpty") })) : (_jsx("scrollbox", { ref: scrollRef, style: { flexGrow: 1, maxHeight: panelHeight, backgroundColor: "#0b0b0b" }, children: [...grouped].reverse().map((group, revIndex) => (_jsx(GroupRow, { id: `run-row-${revIndex}`, group: group, isSelected: focused && revIndex === selectedRunIndex, timeW: timeW, durW: durW, sizeW: sizeW, onOpen: () => onOpenRun(group.runs[0]) }, group.runs[0].runNumber + (group.chainName ?? "")))) }, `runs-${loop?.id}-${runs.length}`))] }));
+}
+function GroupRow(props) {
+    const { id, group, isSelected, timeW, durW, sizeW, onOpen } = props;
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = isSelected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const icon = group.isRunning ? "⟳" : group.allSuccess ? "✓" : "✗";
+    const iconColor = group.isRunning ? "#facc15" : group.allSuccess ? "#4ade80" : "#f87171";
+    const label = group.chainName
+        ? `→ ${group.chainName}`
+        : "";
+    return (_jsx("box", { id: id, onMouseDown: onOpen, backgroundColor: bg, ...hoverProps, children: _jsxs("text", { children: [" ", _jsx("span", { fg: "#9ca3af", children: fit(formatRunTime(group.startedAt), timeW) }), " ", _jsx("span", { fg: iconColor, children: icon }), " ", label ? _jsx("span", { fg: "#a78bfa", children: fit(label, 12) }) : null, " ", fit(group.isRunning ? "…" : formatRunDuration(group.totalDuration), durW), " ", fit(formatFileSize(group.totalLogSize), sizeW)] }) }));
+}