loop-task 1.5.5 → 2.0.1

package/dist/tui/components/LeftPanel.js

@@ -0,0 +1,33 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text } from "ink";
+import { darkTheme as theme, tabAccentColor } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { Navigator } from "./Navigator.js";
+import { TaskNavigator } from "./TaskBrowser.js";
+import { FocusableList } from "./FocusableList.js";
+function Chip(props) {
+    const { label, value, highlighted } = props;
+    return (_jsxs(Text, { color: highlighted ? theme.text.primary : theme.text.muted, children: [label, " ", value] }));
+}
+export function LeftPanel(props) {
+    const { isFocused, navActive = true, activeTab, query, loops, selectedIndex, filters, sort, breakpoint, projects, onSelect, onActivate, tasks, taskSelectedIndex, onTaskSelect, onTaskActivate, currentProjectName, projectFilters, projectSelectedIndex = 0, onProjectSelect, onProjectActivate, projectLoops, } = props;
+    const accentColor = tabAccentColor(activeTab);
+    const borderColor = isFocused ? accentColor : theme.border.default;
+    const hasFilter = query.length > 0;
+    const loopCountFor = (projectId) => (projectLoops ?? loops).filter((l) => l.projectId === projectId).length;
+    return (_jsxs(Box, { flexDirection: "column", width: "60%", flexShrink: 0, borderStyle: "single", borderColor: borderColor, children: [_jsxs(Box, { paddingLeft: 1, gap: 1, children: [hasFilter ? (_jsx(Text, { color: accentColor, children: t("board.chipFilter", { query }) })) : null, activeTab === "loops" ? (_jsxs(_Fragment, { children: [_jsx(Chip, { label: t("board.chipProject"), value: currentProjectName ?? t("board.chipAll"), highlighted: currentProjectName != null }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipStatus"), value: filters.status, highlighted: filters.status !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipSort"), value: sort, highlighted: sort !== "description" })] })) : null, activeTab === "projects" && projectFilters ? (_jsxs(_Fragment, { children: [projectFilters.query.length > 0 ? (_jsx(Text, { color: accentColor, children: t("board.chipSearch", { query: projectFilters.query }) })) : null, _jsx(Chip, { label: t("board.chipLoops"), value: projectFilters.hasLoops, highlighted: projectFilters.hasLoops !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipType"), value: projectFilters.isSystem, highlighted: projectFilters.isSystem !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipSort"), value: projectFilters.sort, highlighted: projectFilters.sort !== "name" })] })) : null] }), activeTab === "loops" ? (_jsx(Navigator, { visible: loops, total: loops.length, selectedIndex: selectedIndex, breakpoint: breakpoint, projects: projects, onSelect: onSelect, onActivate: onActivate, isFocused: isFocused, navActive: navActive })) : activeTab === "tasks" ? (_jsx(TaskNavigator, { visible: tasks, total: tasks.length, selectedIndex: taskSelectedIndex, query: query, onSelect: onTaskSelect, onActivate: onTaskActivate, isFocused: isFocused, navActive: navActive, allTasks: tasks })) : (_jsx(ProjectNavigator, { projects: projects, loops: projectLoops ?? loops, selectedIndex: projectSelectedIndex, onSelect: onProjectSelect ?? (() => { }), onActivate: onProjectActivate ?? (() => { }), isFocused: isFocused, navActive: navActive, loopCountFor: loopCountFor }))] }));
+}
+function ProjectNavigator(props) {
+    const { projects, selectedIndex, onSelect, onActivate, isFocused, navActive = true, loopCountFor } = props;
+    if (projects.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) }));
+    }
+    return (_jsx(FocusableList, { items: projects, selectedIndex: selectedIndex, isFocused: isFocused, navActive: navActive, limit: 15, onSelect: onSelect, onActivate: onActivate, renderItem: (project, isSelected) => {
+            const count = loopCountFor(project.id);
+            const fg = isSelected ? theme.text.inverse : theme.text.primary;
+            const countFg = isSelected ? theme.text.inverse : theme.text.muted;
+            const createdFg = isSelected ? theme.text.inverse : theme.text.muted;
+            return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: project.color, children: "\u25CF" }), _jsxs(Text, { color: fg, children: [" ", project.name.padEnd(18)] }), _jsxs(Text, { color: countFg, children: [String(count).padStart(3), " "] }), _jsx(Text, { color: createdFg, children: project.createdAt.slice(0, 10) })] }));
+        } }));
+}

package/dist/tui/components/LogModal.js

@@ -0,0 +1,121 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { Modal } from "./Modal.js";
+import { t } from "../../i18n/index.js";
+import { streamRunLog } from "../daemon.js";
+import { formatDate } from "../format.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+const MAX_VISIBLE_LINES = 20;
+function colorForLine(line, run) {
+    if (line.includes("[Run #"))
+        return theme.accent.loop;
+    if (line.includes("--- Chain:"))
+        return theme.accent.task;
+    if (line.trimStart().startsWith("[exit")) {
+        const match = /\[exit\s+(\d+)/.exec(line);
+        const code = match ? Number(match[1]) : run.exitCode;
+        return code === 0 ? theme.semantic.success : theme.semantic.danger;
+    }
+    return theme.text.primary;
+}
+export function LogModal(props) {
+    const [lines, setLines] = useState(props.logLines);
+    const [streaming, setStreaming] = useState(false);
+    const [searchMode, setSearchMode] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [follow, setFollow] = useState(true);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useEffect(() => {
+        setLines(props.logLines);
+    }, [props.logLines]);
+    useEffect(() => {
+        if (!props.loopId)
+            return;
+        if (props.run.status !== "running")
+            return;
+        setStreaming(true);
+        const socket = streamRunLog(props.loopId, props.run.runNumber, (line) => setLines((prev) => [...prev, line]), () => setStreaming(false), () => setStreaming(false));
+        return () => {
+            socket.destroy();
+        };
+    }, [props.loopId, props.run.runNumber, props.run.status]);
+    const filtered = searchQuery
+        ? lines.filter((l) => l.toLowerCase().includes(searchQuery.toLowerCase()))
+        : lines;
+    const totalLines = filtered.length;
+    const startIdx = follow
+        ? Math.max(0, totalLines - MAX_VISIBLE_LINES)
+        : scrollOffset;
+    const endIdx = startIdx + MAX_VISIBLE_LINES;
+    const visible = filtered.slice(startIdx, endIdx);
+    useInput((input, key) => {
+        if (searchMode) {
+            if (key.escape || key.return) {
+                setSearchMode(false);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setSearchQuery((q) => q.slice(0, -1));
+                return;
+            }
+            if (input && !key.ctrl && input.length === 1 && input >= " " && input <= "~") {
+                setSearchQuery((q) => q + input);
+                return;
+            }
+            return;
+        }
+        if (key.escape) {
+            // Escape handled by App's global popLayer(); no-op here to avoid double-fire
+            return;
+        }
+        if (input === "/") {
+            setSearchMode(true);
+            setSearchQuery("");
+            return;
+        }
+        if (input === "c" && !key.ctrl) {
+            copyToClipboard(lines.join("\n"));
+            props.onCopy?.();
+            return;
+        }
+        if (key.downArrow) {
+            setFollow(false);
+            setScrollOffset((o) => Math.min(o + 1, Math.max(0, totalLines - MAX_VISIBLE_LINES)));
+            return;
+        }
+        if (key.upArrow) {
+            setFollow(false);
+            setScrollOffset((o) => Math.max(0, o - 1));
+            return;
+        }
+    });
+    const isLoading = props.loading || streaming;
+    const statusIcon = props.run.status === "running"
+        ? "\u21bb"
+        : props.run.exitCode === 0
+            ? "\u2713"
+            : "\u2717";
+    const statusColor = props.run.status === "running"
+        ? theme.semantic.warning
+        : props.run.exitCode === 0
+            ? theme.semantic.success
+            : theme.semantic.danger;
+    return (_jsxs(Modal, { title: `Run #${props.run.runNumber} - ${formatDate(props.run.startedAt)}`, onClose: props.onClose, width: "95%", height: "70%", children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " ", props.run.status === "running"
+                                ? t("board.logModalRunning")
+                                : t("board.logModalExit", { code: props.run.exitCode })] }), props.run.duration > 0 ? (_jsxs(Text, { color: theme.text.muted, children: [" ", t("board.logModalDuration"), " ", props.run.duration, "ms"] })) : null, _jsx(Text, { color: theme.text.muted, children: searchMode
+                            ? `/${searchQuery}`
+                            : follow
+                                ? "f follow"
+                                : `[${startIdx}-${endIdx}/${totalLines}]` })] }), searchMode ? (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.text.muted, children: "Search: " }), _jsxs(Text, { color: theme.text.primary, children: [searchQuery, "_"] })] })) : null, _jsx(Box, { flexDirection: "column", children: visible.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: isLoading
+                        ? t("board.logModalLoading")
+                        : searchQuery
+                            ? t("board.logModalNoMatches")
+                            : t("board.logModalEmpty") })) : (visible.map((line, i) => {
+                    const realIdx = startIdx + i;
+                    return (_jsx(Text, { color: colorForLine(line, props.run), wrap: "truncate", children: line }, realIdx));
+                })) }), _jsx(Box, { marginTop: 1, justifyContent: "space-between", children: _jsx(Text, { color: theme.text.muted, children: searchMode
+                        ? t("board.logModalSearchHint")
+                        : t("board.logModalFooterHints") }) })] }));
+}

package/dist/tui/components/Modal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+export function Modal(props) {
+    useInput((_input, key) => {
+        if (key.escape) {
+            props.onClose();
+        }
+    });
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { borderStyle: "round", borderColor: theme.accent.brand, backgroundColor: theme.bg.elevated, paddingX: 2, paddingY: 1, flexDirection: "column", width: props.width ?? "60%", height: props.height, children: [_jsx(Text, { color: theme.accent.brand, bold: true, children: props.title }), _jsx(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, children: props.children })] }) }));
+}

package/dist/tui/components/Navigator.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import { ScrollList } from "ink-scroll-list";
+import { darkTheme as theme, statusColor } from "../theme.js";
+import { describeLoop, sinceLabel, statusLabel, timingLabel, truncate } from "../format.js";
+import { t } from "../../i18n/index.js";
+const DESC_WIDTH = 32;
+const SINCE_WIDTH = 13;
+const RUNS_WIDTH = 4;
+const SKIPPED_WIDTH = 4;
+const STATUS_WIDTH = 8;
+const COL_GAP = 1;
+const LIMIT = 15;
+export function Navigator(props) {
+    const { visible, total, selectedIndex, projects, onSelect, onActivate, isFocused, navActive = true } = props;
+    const n = visible.length;
+    useInput((input, key) => {
+        if (n === 0)
+            return;
+        if (key.upArrow || input === "k") {
+            const next = selectedIndex <= 0 ? n - 1 : selectedIndex - 1;
+            onSelect(next);
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            const next = selectedIndex >= n - 1 ? 0 : selectedIndex + 1;
+            onSelect(next);
+            return;
+        }
+        if (key.ctrl && key.return) {
+            onActivate(selectedIndex);
+            return;
+        }
+    }, { isActive: isFocused && navActive });
+    const title = t("board.navigatorCount", {
+        visible: String(visible.length),
+        total: String(total),
+    });
+    function projectColor(loop) {
+        const proj = projects.find((p) => p.id === loop.projectId);
+        return proj?.color ?? theme.text.muted;
+    }
+    function isFailed(loop) {
+        return loop.lastExitCode !== null && loop.lastExitCode !== 0;
+    }
+    function renderLoop(loop, isSelected) {
+        const desc = truncate(describeLoop(loop), DESC_WIDTH);
+        const since = sinceLabel(loop);
+        const timing = timingLabel(loop);
+        const failed = isFailed(loop);
+        const sColor = failed ? theme.semantic.danger : statusColor(loop.status);
+        const sLabel = statusLabel(loop.status);
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        const dotChar = failed ? "\u2717 " : "\u25cf ";
+        const dotColor = failed
+            ? theme.semantic.danger
+            : isSelected
+                ? theme.text.inverse
+                : projectColor(loop);
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: dotColor, children: dotChar }), _jsx(Text, { color: fg, children: desc.padEnd(DESC_WIDTH + COL_GAP) }), _jsx(Text, { color: fg, children: since.padEnd(SINCE_WIDTH + COL_GAP) }), _jsx(Text, { color: fg, children: String(loop.runCount).padStart(RUNS_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: fg, children: String(loop.skippedCount).padStart(SKIPPED_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: isSelected ? theme.text.inverse : sColor, children: sLabel.padEnd(STATUS_WIDTH + COL_GAP) }), _jsx(Text, { color: fg, children: timing }), loop.status === "running" ? (_jsxs(Text, { color: theme.semantic.success, children: [" ", _jsx(Spinner, { type: "dots" })] })) : null] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: title }) }), visible.length === 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.noMatch") }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: t("board.headerDescription").padEnd(DESC_WIDTH + COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerSince").padEnd(SINCE_WIDTH + COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerRuns").padStart(RUNS_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerSkipped").padStart(SKIPPED_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerStatus").padEnd(STATUS_WIDTH + COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerTiming") })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(ScrollList, { selectedIndex: selectedIndex, height: LIMIT, children: visible.map((loop, i) => {
+                                const isSelected = i === selectedIndex;
+                                const indicator = isSelected ? "\u203a " : "  ";
+                                return (_jsxs(Box, { backgroundColor: isSelected ? (isFocused && navActive ? theme.bg.active : isFocused ? theme.bg.hover : undefined) : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: indicator }), renderLoop(loop, isSelected)] }, i));
+                            }) }) })] }))] }));
+}

package/dist/tui/components/PatchEditForm.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { FocusableInput } from "./FocusableInput.js";
+import { t } from "../../i18n/index.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+const LABEL_WIDTH = 15;
+const DIVIDER_CHAR = "\u2500";
+const FOCUSED_MARKER = "\u203A";
+export function PatchEditForm(props) {
+    const { title, fields, activeField, activeFieldValue, onActiveFieldChange, onActiveFieldCommit, onActiveFieldCancel, onActiveFieldActivate, pendingChanges, focusedRowIndex, onFocusedRowChange, validationErrors, onSave, onCancel, onCopy, } = props;
+    useInput((_input, key) => {
+        if (activeField === null) {
+            if (key.upArrow) {
+                onFocusedRowChange(Math.max(0, focusedRowIndex - 1));
+                return;
+            }
+            if (key.downArrow) {
+                onFocusedRowChange(Math.min(fields.length - 1, focusedRowIndex + 1));
+                return;
+            }
+            if (key.return) {
+                const field = fields[focusedRowIndex];
+                if (field) {
+                    const shown = displayValue(field.key, field.value);
+                    onActiveFieldActivate(field.key, shown);
+                }
+                return;
+            }
+            if (key.ctrl && _input === "y") {
+                const field = fields[focusedRowIndex];
+                if (field) {
+                    const shown = displayValue(field.key, field.value);
+                    copyToClipboard(shown);
+                    onCopy(shown);
+                }
+                return;
+            }
+            if (key.ctrl && _input === "s") {
+                onSave();
+                return;
+            }
+            if (key.escape) {
+                onCancel();
+                return;
+            }
+        }
+        else {
+            if (key.escape) {
+                onActiveFieldCancel();
+                return;
+            }
+        }
+    });
+    const pendingCount = Object.keys(pendingChanges).length;
+    const divider = DIVIDER_CHAR.repeat(50);
+    function displayValue(fieldKey, originalValue) {
+        if (fieldKey in pendingChanges) {
+            return pendingChanges[fieldKey];
+        }
+        return originalValue;
+    }
+    const hintText = activeField !== null
+        ? t("patch.hintEditing")
+        : pendingCount > 0
+            ? `${t("patch.hintNavPending")} . Ctrl+Y ${t("patch.hintCopy").toLowerCase()}`
+            : `${t("patch.hintNavIdle")}`;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { bold: true, color: theme.accent.loop, children: title }) }), pendingCount > 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("patch.pendingChanges", { count: String(pendingCount) }) }) })) : (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("patch.noChanges") }) })), _jsx(Box, { children: _jsx(Text, { color: theme.border.dim, children: divider }) }), fields.map((field, index) => {
+                const isActive = activeField === field.key;
+                const hasPending = field.key in pendingChanges;
+                const shownValue = displayValue(field.key, field.value);
+                const isFocused = activeField === null && index === focusedRowIndex;
+                const marker = isFocused ? FOCUSED_MARKER : " ";
+                const markerColor = isFocused ? theme.accent.brand : theme.text.muted;
+                const fieldError = validationErrors[field.key];
+                return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: markerColor, children: marker }) }), _jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { color: theme.text.muted, children: field.label }) }), _jsx(Box, { flexGrow: 1, children: isActive ? (_jsx(FocusableInput, { value: activeFieldValue, onChange: onActiveFieldChange, onSubmit: onActiveFieldCommit })) : (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: theme.text.primary, children: shownValue }), hasPending ? (_jsx(Text, { color: theme.semantic.warning, children: " \u25CF" })) : null] })) })] }), fieldError ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { children: " " }) }), _jsx(Box, { width: LABEL_WIDTH, flexShrink: 0, children: _jsx(Text, { children: " " }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: theme.semantic.danger, children: fieldError }) })] })) : null] }, field.key));
+            }), _jsx(Box, { children: _jsx(Text, { color: theme.border.dim, children: divider }) }), pendingCount > 0 ? (_jsxs(Box, { paddingLeft: 1, flexDirection: "row", children: [_jsx(Text, { color: theme.accent.brand, children: "[Save] Ctrl+S  " }), _jsx(Text, { color: theme.text.muted, children: "[Cancel] Esc" })] })) : null, _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: hintText }) })] }));
+}

package/dist/tui/components/ProjectForm.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useRef } from "react";
+import { createProject, updateProject } from "../daemon.js";
+import { t } from "../../i18n/index.js";
+import { WizardForm } from "./WizardForm.js";
+import { SelectModal, SelectValueField } from "./SelectModal.js";
+import { PROJECT_COLORS, PROJECT_COLOR_KEYS } from "../../config/constants.js";
+export function ProjectFormView(props) {
+    const { mode, editProject, onCancel, onDone } = props;
+    const colorKeyFor = (color) => {
+        const found = PROJECT_COLOR_KEYS.find((k) => PROJECT_COLORS[k] === color);
+        return found ?? "cyan";
+    };
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+    const colorFieldRef = useRef(null);
+    const colorOptions = useMemo(() => PROJECT_COLOR_KEYS.map((k) => ({ value: k, label: k })), []);
+    const steps = useMemo(() => [
+        {
+            key: "name",
+            prompt: t("project.wizard.namePrompt"),
+            hint: t("project.wizard.nameHint"),
+            required: true,
+            inputType: "text",
+            defaultValue: editProject?.name ?? undefined,
+        },
+        {
+            key: "color",
+            prompt: t("project.wizard.colorPrompt"),
+            hint: t("project.wizard.colorHint"),
+            required: true,
+            defaultValue: colorKeyFor(editProject?.color),
+            onActivate: () => setColorPickerOpen(true),
+            renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                colorFieldRef.current = { value, onChange, onAdvance };
+                return (_jsx(SelectValueField, { label: value || null, placeholder: t("project.wizard.colorPrompt"), isActive: isActive }));
+            },
+        },
+    ], [editProject]);
+    const handleComplete = useCallback((values) => {
+        const name = (values.name ?? "").trim();
+        if (!name)
+            return;
+        const colorKey = values.color ?? "cyan";
+        const color = PROJECT_COLORS[colorKey] ?? PROJECT_COLORS.cyan;
+        if (mode === "edit" && editProject) {
+            updateProject(editProject.id, name, color)
+                .then(() => onDone(true, name))
+                .catch(() => { });
+        }
+        else {
+            createProject(name, color)
+                .then(() => onDone(false, name))
+                .catch(() => { });
+        }
+    }, [mode, editProject, onDone]);
+    const title = mode === "edit"
+        ? t("project.editTitle")
+        : t("project.createTitle");
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: title, steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: colorPickerOpen }), colorPickerOpen ? (_jsx(SelectModal, { title: t("project.wizard.colorPrompt"), options: colorOptions, initialValue: colorFieldRef.current?.value, onSelect: (option) => {
+                    colorFieldRef.current?.onChange(option.value);
+                    colorFieldRef.current?.onAdvance();
+                    setColorPickerOpen(false);
+                }, onClose: () => setColorPickerOpen(false) })) : null] }));
+}

package/dist/tui/components/ProjectsModal.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+export function ProjectsModal(props) {
+    const { projects, loops, currentProjectId, onSelect, onClose } = props;
+    const [selectedIndex, setSelectedIndex] = React.useState(() => {
+        const allIdx = projects.findIndex((p) => p.id === "all");
+        if (allIdx >= 0)
+            return allIdx;
+        const currentIdx = projects.findIndex((p) => p.id === currentProjectId);
+        return currentIdx >= 0 ? currentIdx : 0;
+    });
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((i) => i <= 0 ? projects.length - 1 : i - 1);
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((i) => i >= projects.length - 1 ? 0 : i + 1);
+        }
+        else if (key.return) {
+            const project = projects[selectedIndex];
+            if (project)
+                onSelect(project.id);
+        }
+        else if (key.escape) {
+            onClose();
+        }
+    });
+    const loopCount = (pid) => loops.filter((l) => (l.projectId ?? "default") === pid).length;
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", children: _jsxs(Box, { borderStyle: "round", borderColor: theme.accent.brand, backgroundColor: theme.bg.elevated, flexDirection: "column", paddingX: 2, paddingY: 1, minWidth: 40, maxWidth: 60, children: [_jsx(Text, { color: theme.accent.brand, bold: true, children: t("project.filterTitle") }), projects.map((project, i) => {
+                    const isSelected = i === selectedIndex;
+                    const isActive = project.id === currentProjectId;
+                    const prefix = isSelected ? "\u203a " : "  ";
+                    const bg = isSelected ? theme.bg.active : undefined;
+                    const fg = isSelected ? theme.text.inverse : isActive ? theme.accent.brand : theme.text.primary;
+                    return (_jsx(Box, { backgroundColor: bg, children: _jsxs(Text, { color: fg, children: [prefix, _jsx(Text, { color: project.color ?? theme.text.primary, children: "\u25cf " }), project.name, " ", _jsxs(Text, { color: theme.text.muted, children: ["(", loopCount(project.id), ")"] })] }) }, project.id));
+                }), _jsxs(Text, { color: theme.text.muted, children: ["\n", t("board.logModalEscClose")] })] }) }));
+}

package/dist/tui/components/ProjectsPage.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Box, Text, useInput, useFocus } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { FocusableList } from "./FocusableList.js";
+import { FocusableButton } from "./FocusableButton.js";
+import { Modal } from "./Modal.js";
+import { t } from "../../i18n/index.js";
+import { deleteProject } from "../daemon.js";
+function loopCountFor(loops, projectId, defaultProjectId, knownProjectIds) {
+    const direct = loops.filter((l) => l.projectId === projectId).length;
+    if (projectId === defaultProjectId) {
+        const orphans = loops.filter((l) => !knownProjectIds.has(l.projectId)).length;
+        return direct + orphans;
+    }
+    return direct;
+}
+function DeleteConfirm(props) {
+    return (_jsxs(Modal, { title: t("project.deleteTitle"), onClose: props.onCancel, width: 50, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.text.primary, children: t("project.deleteConfirm", { name: props.project.name }) }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.deleteWarning", { count: props.loopCount }) }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(FocusableButton, { label: t("board.yes"), color: theme.semantic.danger, onPress: props.onConfirm, variant: "danger" }), _jsx(FocusableButton, { label: t("board.no"), color: theme.text.secondary, onPress: props.onCancel })] })] }));
+}
+function ListFocusWrapper(props) {
+    const { isFocused } = useFocus();
+    if (props.projects.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) }));
+    }
+    const nameWidth = 20;
+    const loopsWidth = 12;
+    const headerSeparator = " \u00B7 ";
+    return (_jsxs(React.Fragment, { children: [_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: theme.text.muted, children: " ".concat(t("project.headerName").padEnd(nameWidth)) }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, String(t("project.headerLoops")).padEnd(loopsWidth)] }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, t("project.headerCreated")] })] }), _jsx(FocusableList, { items: props.projects, selectedIndex: props.selectedIndex, isFocused: isFocused, limit: 10, onSelect: props.onSelect, onActivate: props.onActivate, renderItem: (project, isSelected) => {
+                    const count = loopCountFor(props.loops, project.id, props.defaultProjectId, props.knownProjectIds);
+                    const fg = isSelected ? theme.text.inverse : theme.text.primary;
+                    const countFg = isSelected ? theme.text.inverse : theme.text.muted;
+                    return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: project.color, children: "\u25CF" }), _jsxs(Text, { color: fg, children: [" ", project.name.padEnd(nameWidth - 1)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, String(count).padEnd(loopsWidth)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, project.createdAt] })] }));
+                } }), props.children] }));
+}
+export function ProjectsPage(props) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [subModal, setSubModal] = useState("none");
+    const defaultProject = props.projects.find((p) => p.isDefault) ?? null;
+    const defaultProjectId = defaultProject?.id ?? null;
+    const knownProjectIds = new Set(props.projects.map((p) => p.id));
+    const selected = props.projects[selectedIndex];
+    const loopCount = selected
+        ? loopCountFor(props.loops, selected.id, defaultProjectId, knownProjectIds)
+        : 0;
+    useInput((input, key) => {
+        if (subModal !== "none")
+            return;
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (input === "n") {
+            if (props.onNavigateCreate) {
+                props.onNavigateCreate();
+            }
+            return;
+        }
+        if (input === "e" && selected) {
+            if (props.onNavigateEdit) {
+                props.onNavigateEdit(selected);
+            }
+            return;
+        }
+        if (input === "d" && selected) {
+            setSubModal("delete");
+            return;
+        }
+    });
+    async function handleDelete() {
+        if (!selected)
+            return;
+        try {
+            await deleteProject(selected.id);
+            props.onToast(t("project.toastDeleted", { name: selected.name }));
+            await props.onRefresh();
+            setSubModal("none");
+            setSelectedIndex(0);
+        }
+        catch (e) {
+            props.onToast(e.message);
+        }
+    }
+    if (subModal === "delete" && selected) {
+        return (_jsx(DeleteConfirm, { project: selected, loopCount: loopCount, onConfirm: handleDelete, onCancel: () => setSubModal("none") }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: _jsxs(Box, { children: [_jsxs(Box, { width: "40%", flexDirection: "column", children: [_jsx(Box, { borderStyle: "single", borderColor: theme.accent.project, paddingX: 1, children: _jsx(Text, { color: theme.accent.project, bold: true, children: t("project.projectsTitle") }) }), props.projects.length === 0 ? (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) })) : (_jsx(ListFocusWrapper, { projects: props.projects, loops: props.loops, defaultProjectId: defaultProjectId, knownProjectIds: knownProjectIds, selectedIndex: selectedIndex, onSelect: setSelectedIndex, onActivate: (idx) => {
+                                setSelectedIndex(idx);
+                                if (props.onNavigateEdit) {
+                                    const p = props.projects[idx];
+                                    if (p)
+                                        props.onNavigateEdit(p);
+                                }
+                            }, children: null }))] }), _jsx(Box, { flexGrow: 1, flexDirection: "column", marginLeft: 1, children: selected ? (_jsxs(React.Fragment, { children: [_jsxs(Box, { borderStyle: "single", borderColor: theme.accent.brand, padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: selected.color, bold: true, children: "\u25CF" }), _jsx(Text, { color: theme.text.primary, bold: true, children: " " + selected.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "ID:       " }), _jsx(Text, { color: theme.text.secondary, children: selected.id })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "Created:  " }), _jsx(Text, { color: theme.text.secondary, children: selected.createdAt })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "Loops:    " }), _jsx(Text, { color: theme.text.secondary, children: t("project.loopCount", { count: loopCount }) })] }), selected.isSystem && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.systemLabel") }) }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(FocusableButton, { label: `${t("project.editProjectLabel")} (${t("project.keyEditHint")})`, color: theme.accent.brand, onPress: () => {
+                                                    if (props.onNavigateEdit && selected) {
+                                                        props.onNavigateEdit(selected);
+                                                    }
+                                                } }), _jsx(FocusableButton, { label: `${t("project.deleteProjectLabel")} (${t("project.keyDeleteHint")})`, color: theme.semantic.danger, variant: "danger", onPress: () => setSubModal("delete") })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.text.muted, children: `${t("project.keyNewHint")} | ${t("project.keyEditHint")} | ${t("project.keyDeleteHint")}` }) })] })] })) : (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) })) })] }) }));
+}

package/dist/tui/components/RightPanel.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme, tabAccentColor } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { Inspector } from "./Inspector.js";
+import { RunHistory } from "./RunHistory.js";
+import { FocusableButton } from "./FocusableButton.js";
+import { commandLine } from "../format.js";
+const DIVIDER = "\u2500".repeat(40);
+export function RightPanel(props) {
+    const { isFocused, navActive = true, activeTab, loop, selectedRunIndex, onSelectRun, onOpenRun, selectedTask, allTasks, selectedProject, projectLoopCount, onProjectEdit, onProjectDelete, } = props;
+    const borderColor = isFocused ? tabAccentColor(activeTab) : theme.border.default;
+    return (_jsx(Box, { flexDirection: "column", width: "40%", borderStyle: "single", borderColor: borderColor, children: activeTab === "projects" ? (_jsx(ProjectInspector, { project: selectedProject ?? null, loopCount: projectLoopCount ?? 0, onEdit: onProjectEdit, onDelete: onProjectDelete })) : activeTab === "tasks" ? (_jsx(TaskInspector, { task: selectedTask ?? null, allTasks: allTasks ?? [] })) : (_jsxs(_Fragment, { children: [_jsx(Inspector, { loop: loop }), _jsx(RunHistory, { loop: loop, selectedRunIndex: selectedRunIndex, onSelectRun: onSelectRun, onOpenRun: onOpenRun, isFocused: isFocused, navActive: navActive })] })) }));
+}
+function TaskInspector(props) {
+    const { task, allTasks } = props;
+    if (!task) {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsx(Text, { color: theme.accent.task, bold: true, children: t("board.taskInspectorTitle") }), _jsx(Text, { color: theme.text.muted, children: DIVIDER }), _jsx(Text, { color: theme.text.muted, children: t("board.taskInspectorEmpty") })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingY: 0, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.accent.task, bold: true, children: t("board.taskInspectorTitle") }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(Field, { label: t("board.taskFieldName"), children: _jsx(Text, { color: theme.accent.task, bold: true, children: task.name }) }), _jsx(Field, { label: t("board.taskFieldId"), children: _jsx(Text, { color: theme.text.primary, children: task.id }) }), _jsx(Field, { label: t("board.taskFieldCommand"), children: _jsx(Text, { color: theme.text.primary, children: task.commandRaw
+                                ? task.commandRaw.split("\n").filter(Boolean).join(" ")
+                                : commandLine(task.command, task.commandArgs) }) }), _jsx(Field, { label: t("board.taskFieldCreated"), children: _jsx(Text, { color: theme.text.primary, children: task.createdAt.slice(0, 10) }) }), _jsxs(Field, { label: t("board.taskFieldChain"), children: [task.onSuccessTaskId ? (_jsx(Text, { color: theme.semantic.success, children: "\u2713 " + (allTasks.find((t) => t.id === task.onSuccessTaskId)?.name ?? task.onSuccessTaskId) })) : null, task.onFailureTaskId ? (_jsx(Text, { color: theme.semantic.danger, children: " \u2192 " + (allTasks.find((t) => t.id === task.onFailureTaskId)?.name ?? task.onFailureTaskId) })) : null, !task.onSuccessTaskId && !task.onFailureTaskId ? (_jsx(Text, { color: theme.text.muted, children: t("board.taskNone") })) : null] })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) })] }));
+}
+const LABEL_WIDTH = 9;
+function Field(props) {
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(LABEL_WIDTH) }), props.children] }));
+}
+function ProjectInspector(props) {
+    const { project, loopCount, onEdit, onDelete } = props;
+    if (!project) {
+        return (_jsx(Box, { padding: 1, flexGrow: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.inspectorEmpty") }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: project.color, bold: true, children: "\u25CF" }), _jsx(Text, { color: theme.text.primary, bold: true, children: " " + project.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldId") }), _jsx(Text, { color: theme.text.secondary, children: project.id })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldLoops") }), _jsx(Text, { color: theme.text.secondary, children: t("project.loopCount", { count: String(loopCount) }) })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldCreated") }), _jsx(Text, { color: theme.text.secondary, children: project.createdAt.slice(0, 10) })] }), project.isSystem && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.systemLabel") }) })), !project.isSystem && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [onEdit && (_jsx(FocusableButton, { label: `${t("project.editProjectLabel")} (${t("project.keyEditHint")})`, color: theme.accent.project, onPress: onEdit })), onDelete && (_jsx(FocusableButton, { label: `${t("project.deleteProjectLabel")} (${t("project.keyDeleteHint")})`, color: theme.semantic.danger, variant: "danger", onPress: onDelete }))] }))] }));
+}