loop-task 1.1.0 → 1.4.0

package/dist/board/components/CreateForm.js

@@ -0,0 +1,309 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useRef, useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import fs from "node:fs";
+import { buildLoopOptions, parseCommandLine } from "../../loop-config.js";
+import { t } from "../../i18n/index.js";
+import { commandLine } from "../format.js";
+import { createLoop, updateLoop, listTasks } from "../daemon.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+export const TASK_MODE_INLINE = "inline";
+export const TASK_MODE_EXISTING = "existing";
+export const createFields = ["interval", "taskMode", "command", "cwd", "taskId", "description", "runNow", "maxRuns", "project"];
+export function createInitialValues(loop, currentProjectId) {
+    if (!loop) {
+        return {
+            interval: "30m",
+            taskMode: TASK_MODE_INLINE,
+            command: "",
+            cwd: process.cwd(),
+            taskId: "",
+            description: "",
+            runNow: "n",
+            maxRuns: "",
+            project: currentProjectId ?? "default",
+        };
+    }
+    return {
+        interval: loop.intervalHuman,
+        taskMode: loop.taskId ? TASK_MODE_EXISTING : TASK_MODE_INLINE,
+        command: commandLine(loop.command, loop.commandArgs),
+        cwd: loop.cwd ?? "",
+        taskId: loop.taskId ?? "",
+        description: loop.description ?? "",
+        runNow: loop.immediate ? "y" : "n",
+        maxRuns: loop.maxRuns !== null ? String(loop.maxRuns) : "",
+        project: loop.projectId ?? currentProjectId ?? "default",
+    };
+}
+export function CreateView(props) {
+    const [values, setValues] = useState({
+        ...props.initial,
+        project: props.currentProjectId ?? props.initial.project ?? "default",
+    });
+    const valuesRef = useRef(values);
+    const [focusIndex, setFocusIndex] = useState(0);
+    const [error, setError] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [selectedTaskName, setSelectedTaskName] = useState(props.selectedTaskName ?? null);
+    useState(() => {
+        if (values.taskId && !selectedTaskName) {
+            void listTasks().then((tasks) => {
+                const found = tasks.find((t) => t.id === values.taskId);
+                if (found)
+                    setSelectedTaskName(found.name);
+            }).catch(() => { });
+        }
+    });
+    const { width: termWidth } = useTerminalDimensions();
+    const btnWidth = Math.max(10, Math.min(14, Math.floor(termWidth / 6)));
+    const isInline = values.taskMode === TASK_MODE_INLINE;
+    const visibleFields = props.mode === "edit"
+        ? createFields.filter((f) => f !== "runNow")
+        : [...createFields];
+    const filteredFields = visibleFields.filter((f) => {
+        if (f === "command" || f === "cwd")
+            return isInline;
+        if (f === "taskId")
+            return !isInline;
+        return true;
+    });
+    const chooseTaskIdx = filteredFields.indexOf("taskId");
+    const saveIndex = filteredFields.length;
+    const cancelIndex = filteredFields.length + 1;
+    function updateValues(next) {
+        valuesRef.current = next;
+        setValues(next);
+    }
+    if (props.selectedTaskId && props.selectedTaskId !== values.taskId) {
+        const next = { ...valuesRef.current, taskId: props.selectedTaskId, taskMode: TASK_MODE_EXISTING };
+        valuesRef.current = next;
+        setValues(next);
+        setSelectedTaskName(props.selectedTaskName ?? props.selectedTaskId);
+    }
+    useKeyboard((key) => {
+        if (key.name === "tab") {
+            setFocusIndex((i) => {
+                const next = key.shift ? i - 1 : i + 1;
+                return Math.max(0, Math.min(cancelIndex, next));
+            });
+            return;
+        }
+        if (key.name === "left" || key.name === "right") {
+            if (focusIndex === saveIndex) {
+                setFocusIndex(key.name === "right" ? cancelIndex : focusIndex - 1 >= 0 ? filteredFields.length - 1 : 0);
+                return;
+            }
+            if (focusIndex === cancelIndex) {
+                setFocusIndex(key.name === "right" ? 0 : saveIndex);
+                return;
+            }
+            if (key.name === "right") {
+                if (focusIndex + 1 < filteredFields.length) {
+                    setFocusIndex((i) => i + 1);
+                }
+                else {
+                    setFocusIndex(saveIndex);
+                }
+                return;
+            }
+            if (key.name === "left") {
+                if (focusIndex > 0) {
+                    setFocusIndex((i) => i - 1);
+                }
+                else {
+                    setFocusIndex(cancelIndex);
+                }
+                return;
+            }
+        }
+        if (key.name === "return" || key.name === "enter" || key.name === " ") {
+            const field = filteredFields[focusIndex];
+            if (field === "taskMode") {
+                const next = valuesRef.current.taskMode === TASK_MODE_INLINE ? TASK_MODE_EXISTING : TASK_MODE_INLINE;
+                updateValues({ ...valuesRef.current, taskMode: next });
+                return;
+            }
+            if (field === "runNow") {
+                const next = valuesRef.current.runNow === "y" ? "n" : "y";
+                updateValues({ ...valuesRef.current, runNow: next });
+                return;
+            }
+            if (focusIndex === chooseTaskIdx && !isInline) {
+                props.onChooseTask();
+                return;
+            }
+            if (focusIndex === saveIndex) {
+                void submit(valuesRef.current);
+            }
+            else if (focusIndex === cancelIndex) {
+                props.onCancel();
+            }
+        }
+        if (key.name === "up" || key.name === "down") {
+            const field = filteredFields[focusIndex];
+            if (field === "project" && projectOptions.length > 1) {
+                const currentIdx = projectOptions.findIndex((p) => p.value === valuesRef.current.project);
+                const nextIdx = key.name === "down"
+                    ? (currentIdx + 1) % projectOptions.length
+                    : (currentIdx - 1 + projectOptions.length) % projectOptions.length;
+                const next = projectOptions[nextIdx];
+                if (next)
+                    updateValues({ ...valuesRef.current, project: next.value });
+                return;
+            }
+        }
+    });
+    async function submit(current) {
+        if (isSubmitting)
+            return;
+        try {
+            setIsSubmitting(true);
+            setError("");
+            if (current.taskMode === TASK_MODE_INLINE) {
+                const cwd = current.cwd.trim();
+                if (cwd && !fs.existsSync(cwd)) {
+                    setError(t("board.cwdMissing", { cwd }));
+                    return;
+                }
+                const tokens = parseCommandLine(current.command.trim());
+                const [command, ...commandArgs] = tokens;
+                if (!command) {
+                    setError(t("errors.commandEmpty"));
+                    return;
+                }
+                if (!current.description.trim()) {
+                    setError(t("errors.descriptionEmpty"));
+                    return;
+                }
+                const built = buildLoopOptions(current.interval.trim(), {
+                    now: props.mode === "create" && current.runNow === "y",
+                    maxRuns: current.maxRuns.trim() || null,
+                    verbose: false,
+                    description: current.description.trim(),
+                    command,
+                    commandArgs,
+                    cwd,
+                });
+                built.options.projectId = current.project || "default";
+                const request = props.mode === "edit" && props.editId
+                    ? updateLoop(props.editId, built.options, built.intervalHuman)
+                    : createLoop(built.options, built.intervalHuman);
+                const id = await request;
+                props.onDone(props.mode === "edit", id, current.description.trim());
+            }
+            else {
+                if (!current.taskId) {
+                    setError(t("errors.commandEmpty"));
+                    return;
+                }
+                if (!current.description.trim()) {
+                    setError(t("errors.descriptionEmpty"));
+                    return;
+                }
+                const built = buildLoopOptions(current.interval.trim(), {
+                    now: props.mode === "create" && current.runNow === "y",
+                    maxRuns: current.maxRuns.trim() || null,
+                    verbose: false,
+                    description: current.description.trim(),
+                    taskId: current.taskId,
+                });
+                built.options.projectId = current.project || "default";
+                const request = props.mode === "edit" && props.editId
+                    ? updateLoop(props.editId, built.options, built.intervalHuman)
+                    : createLoop(built.options, built.intervalHuman);
+                const id = await request;
+                props.onDone(props.mode === "edit", id, current.description.trim());
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }
+    const labels = {
+        interval: t("board.labelInterval"),
+        taskMode: t("board.labelTaskMode"),
+        command: t("board.labelCommand"),
+        cwd: t("board.labelCwd"),
+        taskId: t("board.labelTask"),
+        description: t("board.labelDescription"),
+        runNow: t("board.labelRunNow"),
+        maxRuns: t("board.labelMaxRuns"),
+        project: t("project.projectsLabel"),
+    };
+    const hints = {
+        interval: t("board.hintInterval"),
+        taskMode: t("board.hintTaskMode"),
+        command: t("board.hintCommand"),
+        cwd: t("board.hintCwd"),
+        taskId: t("board.hintTask"),
+        description: t("board.hintDescription"),
+        runNow: t("board.hintRunNow"),
+        maxRuns: t("board.hintMaxRuns"),
+        project: t("project.hintColor"),
+    };
+    const examples = {
+        interval: t("board.exampleInterval"),
+        taskMode: "",
+        command: t("board.exampleCommand"),
+        cwd: "",
+        taskId: "",
+        description: t("board.exampleDescription"),
+        runNow: "",
+        maxRuns: "",
+        project: "",
+    };
+    const taskModeOptions = [
+        { name: t("board.taskModeInline"), description: "", value: TASK_MODE_INLINE },
+        { name: t("board.taskModeExisting"), description: "", value: TASK_MODE_EXISTING },
+    ];
+    const runNowOptions = [
+        { name: t("board.runNowNo"), description: "", value: "n" },
+        { name: t("board.runNowYes"), description: "", value: "y" },
+    ];
+    const projectOptions = (props.projects ?? []).length > 0
+        ? props.projects.map((p) => ({ name: p.name, value: p.id, color: p.color }))
+        : [{ name: "Default", value: "default", color: "#ffffff" }];
+    const title = props.mode === "edit" ? t("board.editTitle") : t("board.createTitle");
+    return (_jsxs("box", { title: title, border: true, style: { flexDirection: "column", flexGrow: 1, padding: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { style: { flexDirection: "column", marginBottom: 1 }, children: [_jsx("text", { fg: "#9ca3af", children: t("board.exampleHeading") }), _jsx("text", { fg: "#d1d5db", children: t("board.exampleFull") })] }), _jsx("box", { style: { flexDirection: "column", flexGrow: 1 }, children: Array.from({ length: Math.ceil(filteredFields.length / 2) }, (_, row) => {
+                    const leftField = filteredFields[row * 2];
+                    const rightField = row * 2 + 1 < filteredFields.length ? filteredFields[row * 2 + 1] : null;
+                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(FormRow, { field: leftField, index: row * 2, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, fields: filteredFields, onChooseTask: props.onChooseTask, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(FormRow, { field: rightField, index: row * 2 + 1, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, fields: filteredFields, onChooseTask: props.onChooseTask, style: { width: "50%" } })) : (_jsx("box", { style: { width: "50%" } }))] }, row));
+                }) }), _jsxs("box", { style: { flexDirection: "row", height: 3, marginBottom: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(HoverButton, { label: isSubmitting ? t("board.saving") : props.mode === "edit" ? t("board.save") : t("board.create"), onMouseDown: () => void submit(valuesRef.current), selected: focusIndex === saveIndex, width: btnWidth, marginRight: 1 }), _jsx(HoverButton, { label: t("board.cancel"), onMouseDown: props.onCancel, selected: focusIndex === cancelIndex, width: btnWidth })] }), _jsx("text", { fg: "#9ca3af", children: t("board.formNav") }), error ? _jsx("text", { fg: "#f87171", children: error }) : null] }));
+}
+function HoverButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const borderColor = props.selected ? "#38bdf8" : undefined;
+    return (_jsx("box", { border: true, onMouseDown: props.onMouseDown, borderColor: borderColor, style: { width: props.width, justifyContent: "center", alignItems: "center", marginRight: props.marginRight, backgroundColor: bg }, ...hoverProps, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: props.label }) }) }));
+}
+function FormRow(props) {
+    const { field, index, focusIndex, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, examples, taskModeOptions, runNowOptions, projectOptions, selectedTaskName, fields, onChooseTask, style } = props;
+    const { isHovered, hoverProps } = useHoverState();
+    const isFocused = focusIndex === index;
+    const isToggleField = field === "taskMode" || field === "runNow";
+    const isTaskButton = field === "taskId";
+    const isProjectField = field === "project";
+    const toggleOptions = field === "taskMode" ? taskModeOptions : runNowOptions;
+    const toggleValue = field === "taskMode" ? values.taskMode : values.runNow;
+    return (_jsxs("box", { style: { flexDirection: "column", ...style }, children: [_jsx("text", { fg: isFocused ? "#38bdf8" : "#e5e7eb", children: labels[field] }), _jsx("text", { fg: "#6b7280", children: hints[field] }), isToggleField ? (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center" }, children: toggleOptions.map((opt) => {
+                    const isActive = toggleValue === opt.value;
+                    return (_jsx("box", { onMouseDown: () => updateValues({ ...valuesRef.current, [field]: opt.value }), style: { backgroundColor: isActive ? "#1e3a8a" : undefined, paddingLeft: 1, paddingRight: 1, marginRight: 1 }, ...hoverProps, children: _jsx("text", { fg: isActive ? "#ffffff" : isHovered ? "#e5e7eb" : "#9ca3af", children: _jsx("strong", { children: opt.name }) }) }, opt.value));
+                }) })) : isTaskButton ? (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", paddingLeft: 1 }, onMouseDown: () => { setFocusIndex(index); onChooseTask(); }, children: _jsx("text", { fg: values.taskId ? "#4ade80" : "#9ca3af", children: values.taskId
+                        ? t("board.selectedTask", { name: selectedTaskName ?? values.taskId })
+                        : t("board.chooseTask") }) })) : isProjectField ? (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", paddingLeft: 1 }, onMouseDown: () => setFocusIndex(index), children: projectOptions.map((opt) => {
+                    const isActive = values.project === opt.value;
+                    return (_jsx("box", { onMouseDown: () => updateValues({ ...valuesRef.current, project: opt.value }), style: { backgroundColor: isActive ? "#1e3a8a" : undefined, paddingLeft: 1, paddingRight: 1, marginRight: 1 }, children: _jsx("text", { fg: isActive ? "#ffffff" : "#9ca3af", children: `● ${opt.name}` }) }, opt.value));
+                }) })) : (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b" }, children: _jsx("input", { focused: isFocused, value: values[field], placeholder: examples[field] ? t("board.placeholderExample", { example: examples[field] }) : t("board.placeholderBlank"), onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
+                        if (index < fields.length - 1) {
+                            setFocusIndex(index + 1);
+                        }
+                        else {
+                            void submit(valuesRef.current);
+                        }
+                    } }) }))] }));
+}

package/dist/board/components/CreateProjectModal.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { createProject } from "../daemon.js";
+import { PROJECT_COLORS, PROJECT_COLOR_KEYS } from "../../config/constants.js";
+export function CreateProjectModal(props) {
+    const { onDone, onCancel } = props;
+    const { width } = useTerminalDimensions();
+    const defaultColorKey = PROJECT_COLOR_KEYS.indexOf("cyan") >= 0 ? "cyan" : PROJECT_COLOR_KEYS[0] ?? "white";
+    const [name, setName] = useState("");
+    const [selectedColorKey, setSelectedColorKey] = useState(defaultColorKey);
+    const [error, setError] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [focusField, setFocusField] = useState("name");
+    useKeyboard((key) => {
+        if (key.name === "tab") {
+            const order = ["name", "color", "save", "cancel"];
+            const idx = order.indexOf(focusField);
+            const next = key.shift ? order[(idx - 1 + order.length) % order.length] : order[(idx + 1) % order.length];
+            setFocusField(next ?? "name");
+            return;
+        }
+        if (key.name === "escape") {
+            onCancel();
+            return;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            if (focusField === "cancel") {
+                onCancel();
+                return;
+            }
+            void submit();
+            return;
+        }
+        if (focusField === "color") {
+            if (key.name === "left") {
+                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx - 1 + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                return;
+            }
+            if (key.name === "right") {
+                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + 1) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                return;
+            }
+        }
+    });
+    async function submit() {
+        if (isSubmitting)
+            return;
+        if (!name.trim()) {
+            setError(t("project.error.nameRequired"));
+            return;
+        }
+        try {
+            setIsSubmitting(true);
+            setError("");
+            const color = PROJECT_COLORS[selectedColorKey] ?? "#ffffff";
+            const project = await createProject(name.trim(), color);
+            onDone(project);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }
+    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.createTitle"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(44, width - 4),
+                backgroundColor: "#111827",
+            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: "My Project", onInput: (value) => setName(value), onSubmit: () => setFocusField("color") }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
+                        const isActive = selectedColorKey === colorKey;
+                        return (_jsx("box", { onMouseDown: () => { setFocusField("color"); setSelectedColorKey(colorKey); }, style: {
+                                backgroundColor: isActive ? "#1e3a8a" : undefined,
+                                paddingLeft: 1,
+                                paddingRight: 1,
+                                marginRight: 1,
+                            }, children: _jsxs("text", { children: [_jsx("span", { fg: PROJECT_COLORS[colorKey] ?? "#ffffff", children: "\u25CF" }), ` ${colorKey}`] }) }, colorKey));
+                    }) }), error ? _jsx("text", { fg: "#f87171", children: error }) : null, _jsxs("box", { style: { flexDirection: "row", marginTop: 1 }, children: [_jsx("box", { border: true, borderColor: focusField === "save" ? "#38bdf8" : undefined, onMouseDown: () => void submit(), style: {
+                                width: 12,
+                                justifyContent: "center",
+                                alignItems: "center",
+                                marginRight: 1,
+                                backgroundColor: focusField === "save" ? "#1e3a8a" : "#0b0b0b",
+                            }, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: isSubmitting ? t("board.saving") : t("board.create") }) }) }), _jsx("box", { border: true, borderColor: focusField === "cancel" ? "#38bdf8" : undefined, onMouseDown: onCancel, style: {
+                                width: 12,
+                                justifyContent: "center",
+                                alignItems: "center",
+                                backgroundColor: focusField === "cancel" ? "#1e3a8a" : "#0b0b0b",
+                            }, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: t("board.cancel") }) }) })] })] }) }));
+}

package/dist/board/components/DeleteProjectConfirm.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { deleteProject } from "../daemon.js";
+export function DeleteProjectConfirm(props) {
+    const { project, loopCount, onDone, onCancel } = props;
+    const { width } = useTerminalDimensions();
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [error, setError] = useState("");
+    useKeyboard((key) => {
+        if (key.name === "escape") {
+            onCancel();
+        }
+        if (key.name === "return" || key.name === "enter") {
+            void handleDelete();
+        }
+    });
+    async function handleDelete() {
+        if (isDeleting)
+            return;
+        try {
+            setIsDeleting(true);
+            setError("");
+            await deleteProject(project.id);
+            onDone();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+            setIsDeleting(false);
+        }
+    }
+    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.deleteTitle"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(50, width - 4),
+                backgroundColor: "#111827",
+            }, children: [_jsx("text", { fg: "#e5e7eb", children: t("project.deleteConfirm", { name: project.name }) }), loopCount > 0 ? (_jsx("text", { fg: "#f59e0b", children: t("project.deleteWarning", { count: String(loopCount) }) })) : null, error ? _jsx("text", { fg: "#f87171", children: error }) : null, _jsx("text", { children: " " }), _jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("box", { border: true, onMouseDown: () => void handleDelete(), style: {
+                                paddingLeft: 1,
+                                paddingRight: 1,
+                                marginRight: 1,
+                                backgroundColor: "#7f1d1d",
+                            }, children: _jsx("text", { fg: "#fca5a5", children: _jsx("strong", { children: isDeleting ? "Deleting..." : t("project.moveToDefault") }) }) }), _jsx("box", { border: true, onMouseDown: onCancel, style: { paddingLeft: 1, paddingRight: 1, backgroundColor: "#0b0b0b" }, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: t("board.cancel") }) }) })] })] }) }));
+}

package/dist/board/components/DetailView.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { t } from "../../i18n/index.js";
+import { commandLine, describeLoop, statusColor, statusLabel, timingLabel } from "../format.js";
+import { RunHistory } from "./RunHistory.js";
+export function DetailView(props) {
+    const { loop, selectedRunIndex, onSelectRun, onOpenRun } = props;
+    const [, setTick] = useState(0);
+    const cmd = commandLine(loop.command, loop.commandArgs);
+    const maxRuns = loop.maxRuns !== null ? String(loop.maxRuns) : t("board.unlimited");
+    const summary = [
+        `${t("board.detailSummaryStatus")} ${statusLabel(loop.status)}`,
+        `${t("board.detailSummaryTiming")} ${timingLabel(loop)}`,
+        `${t("board.detailSummaryInterval")} ${loop.intervalHuman}`,
+        `${t("board.detailSummaryRuns")} ${loop.runCount}/${maxRuns}`,
+        `${t("board.detailSummaryExit")} ${loop.lastExitCode ?? t("format.dash")}`,
+    ].join("  |  ");
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setTick((tick) => tick + 1);
+        }, 1000);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs("box", { style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { title: t("board.detailTitle"), border: true, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsx("text", { fg: "#9ca3af", children: summary }), _jsx("text", { children: " " }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldId") }), loop.id] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldDesc") }), describeLoop(loop)] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldCommand") }), cmd] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldDir") }), loop.cwd || t("board.inherit")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldInterval") }), loop.intervalHuman] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldStatus") }), _jsx("span", { fg: statusColor(loop.status), children: statusLabel(loop.status) })] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldRuns") }), loop.runCount, " / ", maxRuns] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldCreated") }), loop.createdAt] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldLastRun") }), loop.lastRunAt ?? t("format.dash")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldLastExit") }), loop.lastExitCode ?? t("format.dash")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldNextRun") }), loop.nextRunAt ?? t("format.dash")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.detailFieldPid") }), loop.pid] })] }), _jsx(RunHistory, { loop: loop, selectedRunIndex: selectedRunIndex, focused: true, onSelectRun: onSelectRun, onOpenRun: onOpenRun })] }));
+}

package/dist/board/components/EditProjectModal.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useState } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { updateProject } from "../daemon.js";
+import { PROJECT_COLORS, PROJECT_COLOR_KEYS } from "../../config/constants.js";
+export function EditProjectModal(props) {
+    const { project, onDone, onCancel } = props;
+    const { width } = useTerminalDimensions();
+    const [name, setName] = useState(project.name);
+    const [selectedColorKey, setSelectedColorKey] = useState(() => {
+        const found = PROJECT_COLOR_KEYS.find((k) => PROJECT_COLORS[k] === project.color);
+        return found ?? PROJECT_COLOR_KEYS[0] ?? "white";
+    });
+    const [error, setError] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [focusField, setFocusField] = useState("name");
+    useKeyboard((key) => {
+        if (key.name === "tab") {
+            const order = ["name", "color", "save", "cancel"];
+            const idx = order.indexOf(focusField);
+            const next = key.shift ? order[(idx - 1 + order.length) % order.length] : order[(idx + 1) % order.length];
+            setFocusField(next ?? "name");
+            return;
+        }
+        if (key.name === "escape") {
+            onCancel();
+            return;
+        }
+        if (key.name === "return" || key.name === "enter") {
+            if (focusField === "cancel") {
+                onCancel();
+                return;
+            }
+            void submit();
+            return;
+        }
+        if (focusField === "color") {
+            if (key.name === "left") {
+                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx - 1 + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                return;
+            }
+            if (key.name === "right") {
+                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + 1) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                return;
+            }
+        }
+    });
+    async function submit() {
+        if (isSubmitting)
+            return;
+        if (!name.trim()) {
+            setError(t("project.error.nameEmpty"));
+            return;
+        }
+        try {
+            setIsSubmitting(true);
+            setError("");
+            const color = PROJECT_COLORS[selectedColorKey] ?? project.color;
+            await updateProject(project.id, name.trim(), color);
+            onDone();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }
+    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.editTitle"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(44, width - 4),
+                backgroundColor: "#111827",
+            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: project.name, onInput: (value) => setName(value), onSubmit: () => setFocusField("color") }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
+                        const isActive = selectedColorKey === colorKey;
+                        return (_jsx("box", { onMouseDown: () => { setFocusField("color"); setSelectedColorKey(colorKey); }, style: {
+                                backgroundColor: isActive ? "#1e3a8a" : undefined,
+                                paddingLeft: 1,
+                                paddingRight: 1,
+                                marginRight: 1,
+                            }, children: _jsxs("text", { children: [_jsx("span", { fg: PROJECT_COLORS[colorKey] ?? "#ffffff", children: "\u25CF" }), ` ${colorKey}`] }) }, colorKey));
+                    }) }), error ? _jsx("text", { fg: "#f87171", children: error }) : null, _jsxs("box", { style: { flexDirection: "row", marginTop: 1 }, children: [_jsx("box", { border: true, borderColor: focusField === "save" ? "#38bdf8" : undefined, onMouseDown: () => void submit(), style: {
+                                width: 12,
+                                justifyContent: "center",
+                                alignItems: "center",
+                                marginRight: 1,
+                                backgroundColor: focusField === "save" ? "#1e3a8a" : "#0b0b0b",
+                            }, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: isSubmitting ? t("board.saving") : t("board.save") }) }) }), _jsx("box", { border: true, borderColor: focusField === "cancel" ? "#38bdf8" : undefined, onMouseDown: onCancel, style: {
+                                width: 12,
+                                justifyContent: "center",
+                                alignItems: "center",
+                                backgroundColor: focusField === "cancel" ? "#1e3a8a" : "#0b0b0b",
+                            }, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: t("board.cancel") }) }) })] })] }) }));
+}

package/dist/board/components/FilterBar.js

@@ -0,0 +1,16 @@
+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, 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: { 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;
+    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 }) }));
+}