loop-task 1.3.0 → 1.4.0

package/dist/board/components/FilterBar.js

@@ -1,15 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { t } from "../../i18n/index.js";
 import { useHoverState } from "../hooks/useHoverState.js";
 import { HOVER_BG } from "../../config/constants.js";
 export function FilterBar(props) {
-    const { filters, sort, searchActive, focusedPanel, onSearch, onStatusCycle, onSortCycle, onNewLoop } = props;
+    const { filters, sort, searchActive, focusedPanel, onStatusCycle, onSortCycle, onSelectProject, currentProjectName } = props;
     const statusDisplay = filters.status === "waiting" ? "waiting" : filters.status;
-    return (_jsxs("box", { style: { flexDirection: "row", height: 3, paddingLeft: 1, paddingRight: 1, backgroundColor: "#0b0b0b" }, children: [_jsx("box", { title: t("board.searchTitle"), border: true, borderColor: focusedPanel === "search" ? "#38bdf8" : undefined, style: { flexGrow: 2, height: 3, marginRight: 1, paddingLeft: 1, backgroundColor: focusedPanel === "search" ? "#1e2a4a" : "#0b0b0b" }, children: searchActive ? (_jsx("input", { focused: true, placeholder: t("board.searchPlaceholder"), onInput: onSearch })) : (_jsx("text", { fg: filters.query ? "#e5e7eb" : "#6b7280", children: filters.query || t("board.searchEmpty") })) }), _jsx(ClickableBadge, { title: t("board.statusFilterTitle"), text: statusDisplay, textColor: "#38bdf8", focused: focusedPanel === "status", onMouseDown: onStatusCycle, marginRight: 1 }), _jsx(ClickableBadge, { title: t("board.sortTitle"), text: sort, textColor: "#a3e635", focused: focusedPanel === "sort", onMouseDown: onSortCycle, marginRight: 1 }), _jsx(ClickableBadge, { title: t("board.newLoopTitle"), text: t("board.newLoopLabel"), textColor: "#4ade80", focused: focusedPanel === "new", onMouseDown: onNewLoop, narrow: true })] }));
+    return (_jsxs("box", { style: { flexDirection: "row", height: 3, paddingLeft: 1, paddingRight: 1, backgroundColor: "#0b0b0b" }, children: [_jsx("box", { title: t("board.searchTitle"), border: true, borderColor: focusedPanel === "search" ? "#38bdf8" : undefined, style: { width: "25%", height: 3, marginRight: 1, paddingLeft: 1, backgroundColor: focusedPanel === "search" ? "#1e2a4a" : "#0b0b0b" }, children: searchActive ? (_jsxs("text", { fg: filters.query ? "#e5e7eb" : "#6b7280", children: [filters.query || t("board.searchPlaceholder"), "\u258E"] })) : (_jsx("text", { fg: filters.query ? "#e5e7eb" : "#6b7280", children: filters.query || t("board.searchEmpty") })) }), onSelectProject ? (_jsx(ClickableBadge, { title: t("project.filterTitle"), text: currentProjectName ?? "Default", textColor: "#f59e0b", focused: focusedPanel === "project-filter", onMouseDown: onSelectProject, marginRight: 1 })) : null, _jsx(ClickableBadge, { title: t("board.statusFilterTitle"), text: statusDisplay, textColor: "#38bdf8", focused: focusedPanel === "status", onMouseDown: onStatusCycle, marginRight: 1 }), _jsx(ClickableBadge, { title: t("board.sortTitle"), text: sort, textColor: "#a3e635", focused: focusedPanel === "sort", onMouseDown: onSortCycle })] }));
 }
 function ClickableBadge(props) {
     const { isHovered, hoverProps } = useHoverState();
     const bg = props.focused ? "#1e2a4a" : isHovered ? HOVER_BG : "#0b0b0b";
     const borderColor = props.focused ? "#38bdf8" : undefined;
-    return (_jsx("box", { title: props.title, border: true, borderColor: borderColor, onMouseDown: props.onMouseDown, style: { flexGrow: props.narrow ? 0 : 1, height: 3, marginRight: props.marginRight, paddingLeft: 1, backgroundColor: bg }, ...hoverProps, children: _jsx("text", { fg: props.textColor, children: props.text }) }));
+    const titleProp = props.title ? { title: props.title } : {};
+    return (_jsx("box", { ...titleProp, border: true, borderColor: borderColor, onMouseDown: props.onMouseDown, style: { flexGrow: 1, height: 3, marginRight: props.marginRight, paddingLeft: 1, backgroundColor: bg }, ...hoverProps, children: _jsx("text", { fg: props.textColor, children: props.text }) }));
 }

package/dist/board/components/Footer.js

@@ -1,21 +1,23 @@
 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: "#4ade80" },
+        normal: { label: t("board.badgeNormal"), bg: ENTITY_COLORS.loop },
         search: { label: t("board.badgeSearch"), bg: "#38bdf8" },
-        create: { label: t("board.badgeCreate"), bg: "#a3e635" },
+        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.hintKeyEnter"), t("board.hintOpenRun")],
-            [t("board.hintKeySlash"), t("board.hintSearch")],
-            [t("board.hintKeyH"), t("board.hintHelp")],
-            [t("board.hintKeyEsc"), t("board.hintQuit")],
+            ["/", t("board.hintSearch")],
+            ["h", t("board.hintHelp")],
+            ["esc", t("board.hintQuit")],
         ],
         search: [
             [t("board.hintKeyEnter"), t("board.hintApply")],
@@ -26,6 +28,11 @@ export function Footer(props) {
             [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")],
@@ -33,6 +40,12 @@ export function Footer(props) {
             [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

@@ -1,9 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
 import { useTerminalDimensions } from "@opentui/react";
-import { HEADER_COMPACT_WIDTH } from "../../config/constants.js";
+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 } = 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"
@@ -12,5 +19,28 @@ export function Header(props) {
             ? "#f87171"
             : "#facc15";
     const symbol = daemonStatus === "connected" ? "✓" : daemonStatus === "error" ? "✗" : "…";
-    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") })] }) }), _jsx("box", { style: { flexDirection: "row", paddingLeft: 1, paddingRight: 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("box", { style: { height: 1, paddingLeft: 1, paddingRight: 1 }, children: _jsx("text", { fg: "#374151", children: "─".repeat(Math.max(0, width - 2)) }) })] }));
+    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

@@ -4,18 +4,19 @@ import { t } from "../../i18n/index.js";
 export function HelpModal() {
     const { width } = useTerminalDimensions();
     const rows = [
-        [t("board.helpKeyMove"), t("board.helpMoveSelection")],
+        ["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")],
-        [t("board.helpKeyN"), t("board.helpCreate")],
-        ["p", t("board.helpPauseResume")],
-        ["r", t("board.helpForceRun")],
-        ["del", t("board.helpDelete")],
+        ["n", t("board.helpCreate")],
+        ["t", t("board.helpCreateTask")],
+        ["o", t("board.helpCycleSort")],
         ["←/→", t("board.helpSwitchPanel")],
-        [t("board.helpKeySlash"), t("board.helpSearch")],
-        [t("board.helpKeyF"), t("board.helpCycleFilter")],
-        [t("board.helpKeyS"), t("board.helpCycleSort")],
-        [t("board.helpKeyH"), t("board.helpToggleHelp")],
-        [t("board.helpKeyEsc"), t("board.helpQuit")],
+        ["/", t("board.helpSearch")],
+        ["h", t("board.helpToggleHelp")],
+        ["esc", t("board.helpQuit")],
     ];
     return (_jsx("box", { style: {
             position: "absolute",

package/dist/board/components/Inspector.js

@@ -8,5 +8,5 @@ export function Inspector(props) {
     }
     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.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] })] }));
+    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

@@ -1,13 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useTerminalDimensions } from "@opentui/react";
+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 { run, logLines, loading } = props;
+    const { loopId, run, logLines: staticLines, loading } = props;
     const { width, height } = useTerminalDimensions();
-    const success = run.exitCode === 0;
-    const icon = success ? "✓" : "✗";
-    const iconColor = success ? "#4ade80" : "#f87171";
+    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,
@@ -17,11 +48,11 @@ export function LogModal(props) {
             justifyContent: "center",
             alignItems: "center",
             zIndex: 100,
-        }, children: _jsxs("box", { title: t("board.logModalTitle", { icon, time: formatRunTime(run.startedAt) }), border: true, style: {
+        }, 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 ? (_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 }), " ", _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") })] })] }) }));
+            }, 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

@@ -2,9 +2,9 @@ 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, statusColor, statusLabel, timingLabel, truncate } from "../format.js";
+import { describeLoop, sinceLabel, statusColor, statusLabel, timingLabel, truncate } from "../format.js";
 import { useHoverState } from "../hooks/useHoverState.js";
-import { HOVER_BG } from "../../config/constants.js";
+import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
 function fit(text, width) {
     if (width <= 0)
         return "";
@@ -13,26 +13,37 @@ function fit(text, width) {
     return truncate(text, width);
 }
 export function Navigator(props) {
-    const { visible, total, selectedIndex, filters, sort, breakpoint, focused, onSelect, onActivate } = 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.55) - 4;
+    const panelWidth = width * (breakpoint === "narrow" ? 1 : 0.605) - 4;
     const panelHeight = height - (breakpoint === "narrow" ? 10 : 7);
     const statusW = 8;
-    const exitW = 4;
+    const exitW = 2;
     const runsW = 5;
-    const fixedOverhead = 2 + statusW + 1 + 1 + exitW + 1 + runsW;
-    const timingW = Math.max(6, Math.min(12, Math.floor((panelWidth - fixedOverhead) * 0.3)));
-    const descW = Math.max(4, panelWidth - fixedOverhead - timingW);
+    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.headerDescription"), descW) +
+        fit(t("board.headerSince"), sinceW) +
         " " +
         fit(t("board.headerTiming"), timingW) +
         " " +
-        fit(t("board.headerExitRuns"), exitW + 1 + runsW);
+        fit("EX", exitW) +
+        " " +
+        "#" + fit(t("board.headerRuns"), runsW) +
+        " " +
+        fit(t("board.headerSkipped"), skpW);
     useEffect(() => {
         const id = `nav-row-${selectedIndex}`;
         scrollRef.current?.scrollChildIntoView(id);
@@ -43,14 +54,16 @@ export function Navigator(props) {
         }, 1000);
         return () => clearInterval(timer);
     }, []);
-    return (_jsxs("box", { title: t("board.navigatorTitle", { visible: visible.length, total, sort, status: filters.status }), border: true, borderColor: focused ? "#38bdf8" : undefined, style: { width: breakpoint === "narrow" ? "100%" : "55%", flexShrink: 0, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("text", { fg: "#6b7280", 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) => {
+    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);
-                    return (_jsx(NavigatorRow, { id: `nav-row-${index}`, loop: loop, index: index, isSelected: isSelected, focused: focused, exit: exit, statusW: statusW, descW: descW, timingW: timingW, exitW: exitW, runsW: runsW, onSelect: onSelect, onActivate: onActivate }, loop.id));
+                    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, descW, timingW, exitW, runsW, onSelect, onActivate } = 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);
@@ -64,5 +77,8 @@ function NavigatorRow(props) {
         }
         lastClickRef.current = now;
     }
-    return (_jsx("box", { id: id, onMouseDown: handleClick, backgroundColor: bg, ...hoverProps, children: _jsxs("text", { children: [isSelected ? "›" : " ", " ", _jsx("span", { fg: statusColor(loop.status), children: fit(statusLabel(loop.status), statusW) }), " ", fit(truncate(describeLoop(loop), descW), descW), " ", fit(timingLabel(loop), timingW), " ", fit(exit, exitW), " #", String(loop.runCount).padStart(runsW)] }) }));
+    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

@@ -1,10 +1,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useEffect, useRef } from "react";
+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 "";
@@ -17,6 +53,7 @@ export function RunHistory(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);
@@ -31,14 +68,16 @@ export function RunHistory(props) {
         fit(t("board.runHistoryDuration"), durW) +
         " " +
         fit(t("board.runHistorySize"), sizeW);
-    return (_jsxs("box", { title: t("board.runHistoryTitle"), border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("text", { fg: "#6b7280", children: header }), runs.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: t("board.runHistoryEmpty") })) : (_jsx("scrollbox", { ref: scrollRef, style: { flexGrow: 1, maxHeight: panelHeight, backgroundColor: "#0b0b0b" }, children: [...runs].reverse().map((run, revIndex) => (_jsx(RunRow, { id: `run-row-${revIndex}`, run: run, isSelected: revIndex === selectedRunIndex, focused: focused, timeW: timeW, durW: durW, sizeW: sizeW, onSelect: onSelectRun, onOpen: onOpenRun }, run.runNumber))) }, `runs-${loop?.id}-${runs.length}`))] }));
+    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 RunRow(props) {
-    const { id, run, isSelected, focused, timeW, durW, sizeW, onOpen } = props;
+function GroupRow(props) {
+    const { id, group, isSelected, timeW, durW, sizeW, onOpen } = props;
     const { isHovered, hoverProps } = useHoverState();
-    const bg = isSelected ? (focused ? "#1e3a8a" : "#1e2a4a") : isHovered ? HOVER_BG : undefined;
-    const success = run.exitCode === 0;
-    const icon = success ? "✓" : "✗";
-    const iconColor = success ? "#4ade80" : "#f87171";
-    return (_jsx("box", { id: id, onMouseDown: () => onOpen(run), backgroundColor: bg, ...hoverProps, children: _jsxs("text", { children: [" ", _jsx("span", { fg: "#9ca3af", children: fit(formatRunTime(run.startedAt), timeW) }), " ", _jsx("span", { fg: iconColor, children: icon }), " ", fit(formatRunDuration(run.duration), durW), " ", fit(formatFileSize(run.logSize), sizeW)] }) }));
+    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)] }) }));
 }