loop-task 1.3.0 → 1.4.1

package/dist/board/components/CreateForm.js

@@ -5,75 +5,83 @@ 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 } from "../daemon.js";
+import { createLoop, updateLoop, listTasks } from "../daemon.js";
 import { useHoverState } from "../hooks/useHoverState.js";
 import { HOVER_BG } from "../../config/constants.js";
-export const createFields = ["interval", "command", "description", "cwd", "runNow", "maxRuns"];
-export function createInitialValues(loop) {
+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: "",
-            description: "",
             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),
-        description: loop.description ?? "",
         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 fields = props.mode === "edit"
-        ? createFields.filter((field) => field !== "runNow")
-        : createFields;
-    const saveIndex = fields.length;
-    const cancelIndex = fields.length + 1;
-    const labels = {
-        interval: t("board.labelInterval"),
-        command: t("board.labelCommand"),
-        description: t("board.labelDescription"),
-        cwd: t("board.labelCwd"),
-        runNow: t("board.labelRunNow"),
-        maxRuns: t("board.labelMaxRuns"),
-    };
-    const hints = {
-        interval: t("board.hintInterval"),
-        command: t("board.hintCommand"),
-        description: t("board.hintDescription"),
-        cwd: t("board.hintCwd"),
-        runNow: t("board.hintRunNow"),
-        maxRuns: t("board.hintMaxRuns"),
-    };
-    const examples = {
-        interval: t("board.exampleInterval"),
-        command: t("board.exampleCommand"),
-        description: t("board.exampleDescription"),
-        cwd: "",
-        runNow: "",
-        maxRuns: "",
-    };
-    const runNowOptions = [
-        { name: t("board.runNowNo"), description: "", value: "n" },
-        { name: t("board.runNowYes"), description: "", value: "y" },
-    ];
-    const [values, setValues] = useState(props.initial);
+    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")
+            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) => {
@@ -82,11 +90,50 @@ export function CreateView(props) {
             });
             return;
         }
-        if ((key.name === "left" || key.name === "right") && focusIndex >= saveIndex) {
-            setFocusIndex(key.name === "left" ? saveIndex : cancelIndex);
-            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") {
+        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);
             }
@@ -94,33 +141,87 @@ export function CreateView(props) {
                 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) {
+        if (isSubmitting)
             return;
-        }
         try {
             setIsSubmitting(true);
             setError("");
-            const cwd = current.cwd.trim();
-            if (cwd && !fs.existsSync(cwd)) {
-                setError(t("board.cwdMissing", { cwd }));
-                return;
+            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 cwd = current.cwd.trim();
+                if (cwd && !fs.existsSync(cwd)) {
+                    setError(t("board.cwdMissing", { cwd }));
+                    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,
+                    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());
             }
-            const tokens = parseCommandLine(current.command.trim());
-            const [command, ...commandArgs] = tokens;
-            const built = buildLoopOptions(current.interval.trim(), command ?? "", commandArgs, {
-                now: props.mode === "create" && current.runNow === "y",
-                maxRuns: current.maxRuns.trim() || null,
-                verbose: false,
-                cwd,
-                description: current.description.trim(),
-            });
-            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);
         }
         catch (e) {
             setError(e instanceof Error ? e.message : String(e));
@@ -129,11 +230,55 @@ export function CreateView(props) {
             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(fields.length / 2) }, (_, row) => {
-                    const leftField = fields[row * 2];
-                    const rightField = row * 2 + 1 < fields.length ? fields[row * 2 + 1] : null;
-                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(FormField, { field: leftField, index: row * 2, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, runNowOptions: runNowOptions, fields: fields, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(FormField, { field: rightField, index: row * 2 + 1, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, runNowOptions: runNowOptions, fields: fields, style: { width: "50%" } })) : (_jsx("box", { style: { width: "50%" } }))] }, row));
+    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) {
@@ -142,9 +287,24 @@ function HoverButton(props) {
     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 FormField(props) {
-    const { field, index, focusIndex, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, examples, runNowOptions, fields, style } = props;
-    return (_jsxs("box", { style: { flexDirection: "column", ...style }, children: [_jsx("text", { fg: focusIndex === index ? "#38bdf8" : "#e5e7eb", children: labels[field] }), _jsx("text", { fg: "#6b7280", children: hints[field] }), field === "runNow" ? (_jsx("box", { border: true, borderColor: focusIndex === index ? "#38bdf8" : undefined, style: { height: runNowOptions.length + 2, backgroundColor: "#0b0b0b" }, children: _jsx("select", { focused: focusIndex === index, options: runNowOptions, selectedIndex: values.runNow === "y" ? 1 : 0, showDescription: false, style: { flexGrow: 1 }, onChange: (_index, option) => updateValues({ ...valuesRef.current, runNow: option?.value ?? "n" }) }) })) : (_jsx("box", { border: true, borderColor: focusIndex === index ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b" }, children: _jsx("input", { focused: focusIndex === index, value: values[field], placeholder: examples[field] ? t("board.placeholderExample", { example: examples[field] }) : t("board.placeholderBlank"), onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
+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);
                         }

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/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") }) }) })] })] }) }));
+}