loop-task 1.3.0 → 1.4.1

package/dist/board/components/TaskBrowser.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { commandLine, truncate } from "../format.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
+function fit(text, width) {
+    if (width <= 0)
+        return "";
+    if (text.length <= width)
+        return text.padEnd(width);
+    return truncate(text, width);
+}
+const TASK_PANEL_ORDER = ["search", "new", "tasks", "actions"];
+const TASK_ACTIONS = ["select", "edit", "delete"];
+export const TASK_ACTION_COUNT = TASK_ACTIONS.length;
+export const TASK_ACTION_KEYS = [...TASK_ACTIONS];
+export function nextTaskPanel(current, direction) {
+    const idx = TASK_PANEL_ORDER.indexOf(current);
+    return TASK_PANEL_ORDER[(idx + (direction === "right" ? 1 : TASK_PANEL_ORDER.length - 1)) % TASK_PANEL_ORDER.length];
+}
+export function TaskNavigator(props) {
+    const { visible, total, selectedIndex, focused, query, onSelect, onActivate } = props;
+    const { width, height } = useTerminalDimensions();
+    const scrollRef = useRef(null);
+    const panelWidth = width * 0.55 - 4;
+    const panelHeight = height - 7;
+    const nameW = 20;
+    const chainsW = 14;
+    const fixedOverhead = 2 + nameW + 2 + chainsW;
+    const cmdW = Math.max(10, panelWidth - fixedOverhead);
+    const header = "  " +
+        fit(t("board.taskHeaderName"), nameW) +
+        "  " +
+        fit(t("board.taskHeaderCommand"), cmdW) +
+        "  " +
+        t("board.taskHeaderChains");
+    useEffect(() => {
+        const id = `task-row-${selectedIndex}`;
+        scrollRef.current?.scrollChildIntoView(id);
+    }, [selectedIndex]);
+    return (_jsxs("box", { title: t("board.taskBrowserTitle", { visible: visible.length, total }), border: true, borderColor: focused ? ENTITY_COLORS.task : "#2e2545", style: { width: "55%", flexShrink: 0, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("text", { fg: "#6b7280", children: header }), visible.length === 0 ? (_jsx("text", { fg: "#9ca3af", children: t("board.taskBrowserEmpty") })) : (_jsx("scrollbox", { ref: scrollRef, style: { flexGrow: 1, maxHeight: panelHeight, backgroundColor: "#0b0b0b" }, children: visible.map((task, index) => (_jsx(TaskNavRow, { id: `task-row-${index}`, task: task, index: index, isSelected: index === selectedIndex, focused: focused, nameW: nameW, cmdW: cmdW, chainsW: chainsW, onSelect: onSelect, onActivate: onActivate }, task.id))) }))] }));
+}
+function TaskNavRow(props) {
+    const { id, task, index, isSelected, focused, nameW, cmdW, chainsW, onSelect, onActivate } = props;
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = isSelected ? (focused ? "#1e3a8a" : "#1e2a4a") : isHovered ? HOVER_BG : undefined;
+    const fg = isSelected ? "#ffffff" : "#e5e7eb";
+    const lastClickRef = useRef(0);
+    function handleClick() {
+        const now = Date.now();
+        if (now - lastClickRef.current < 400) {
+            onActivate(index);
+        }
+        else {
+            onSelect(index);
+        }
+        lastClickRef.current = now;
+    }
+    const cmd = commandLine(task.command, task.commandArgs);
+    const chains = task.onSuccessTaskId || task.onFailureTaskId
+        ? t("board.taskChainsFormat", { success: task.onSuccessTaskId ?? "-", failure: task.onFailureTaskId ?? "-" })
+        : t("board.taskChainsNone");
+    const name = task.name.length > nameW ? task.name.slice(0, nameW - 3) + "..." : task.name;
+    const truncCmd = cmd.length > cmdW ? cmd.slice(0, cmdW - 3) + "..." : cmd;
+    return (_jsx("box", { id: id, onMouseDown: handleClick, backgroundColor: bg, ...hoverProps, children: _jsxs("text", { fg: fg, children: [isSelected ? "›" : " ", " ", fit(name, nameW), "  ", fit(truncCmd, cmdW), "  ", fit(chains, chainsW)] }) }));
+}
+export function TaskInspector(props) {
+    const { task } = props;
+    if (!task) {
+        return (_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { backgroundColor: "#0b0b0b" }, children: _jsx("text", { fg: "#9ca3af", children: t("board.inspectorEmpty") }) }));
+    }
+    const cmd = commandLine(task.command, task.commandArgs);
+    return (_jsxs("box", { title: t("board.inspectorTitle"), border: true, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsxs("text", { children: [_jsx("strong", { children: t("board.fieldId") }), " ", task.id] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelName") }), " ", task.name] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldCommand") }), " ", cmd] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnSuccess") }), " ", task.onSuccessTaskId ?? t("board.taskNone")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnFailure") }), " ", task.onFailureTaskId ?? t("board.taskNone")] })] }));
+}
+export function TaskActionButtons(props) {
+    const { task, focused, selectedAction, selectable = true, onAction } = props;
+    if (!task) {
+        return (_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, backgroundColor: "#0b0b0b", justifyContent: "center", alignItems: "center" }, children: _jsx("text", { fg: "#9ca3af", children: t("board.noActions") }) }));
+    }
+    const allActions = [
+        { key: "select", label: t("board.taskActionSelect"), hotkey: "s" },
+        { key: "edit", label: t("board.taskActionEdit"), hotkey: "e" },
+        { key: "delete", label: t("board.taskActionDelete"), hotkey: "d" },
+    ];
+    const actions = selectable ? allActions : allActions.filter((a) => a.key !== "select");
+    return (_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, paddingLeft: 1, backgroundColor: "#0b0b0b", alignItems: "center" }, children: actions.map((action, i) => (_jsx(TaskActionButton, { label: action.label, hotkey: action.hotkey, selected: focused && selectedAction === i, onMouseDown: () => onAction(action.key) }, action.key))) }));
+}
+function TaskActionButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const fg = props.selected ? "#ffffff" : isHovered ? "#e5e7eb" : "#9ca3af";
+    const keycapFg = props.selected ? "#93c5fd" : "#6b7280";
+    return (_jsxs("box", { onMouseDown: props.onMouseDown, style: { backgroundColor: bg, paddingLeft: 1, paddingRight: 1, marginRight: 1, flexDirection: "row", alignItems: "center" }, ...hoverProps, children: [_jsxs("text", { fg: keycapFg, children: ["[", props.hotkey, "] "] }), _jsx("text", { fg: fg, children: _jsx("strong", { children: props.label }) })] }));
+}

package/dist/board/components/TaskFilterBar.js

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { t } from "../../i18n/index.js";
+export function TaskFilterBar(props) {
+    const { query, searchActive, focusedPanel } = props;
+    return (_jsx("box", { style: { flexDirection: "row", height: 3, paddingLeft: 1, paddingRight: 1, backgroundColor: "#0b0b0b" }, children: _jsx("box", { title: t("board.searchTitle"), border: true, borderColor: focusedPanel === "search" ? "#38bdf8" : undefined, style: { flexGrow: 1, height: 3, paddingLeft: 1, backgroundColor: focusedPanel === "search" ? "#1e2a4a" : "#0b0b0b" }, children: searchActive ? (_jsxs("text", { fg: query ? "#e5e7eb" : "#6b7280", children: [query || t("board.searchPlaceholder"), "\u258E"] })) : (_jsx("text", { fg: query ? "#e5e7eb" : "#6b7280", children: query || t("board.searchEmpty") })) }) }));
+}

package/dist/board/components/TaskForm.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useRef, useState } from "react";
+import crypto from "node:crypto";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { createTask, updateTask, listTasks } from "../daemon.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+const taskFields = ["name", "command", "onSuccessTaskId", "onFailureTaskId"];
+function taskInitialValues(task) {
+    if (!task) {
+        return { name: "", command: "", onSuccessTaskId: "", onFailureTaskId: "" };
+    }
+    return {
+        name: task.name,
+        command: [task.command, ...task.commandArgs].join(" "),
+        onSuccessTaskId: task.onSuccessTaskId ?? "",
+        onFailureTaskId: task.onFailureTaskId ?? "",
+    };
+}
+export function TaskForm(props) {
+    const [values, setValues] = useState(taskInitialValues(props.editTask));
+    const valuesRef = useRef(values);
+    const [focusIndex, setFocusIndex] = useState(0);
+    const [error, setError] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [allTasks, setAllTasks] = useState([]);
+    const { width: termWidth } = useTerminalDimensions();
+    const btnWidth = Math.max(10, Math.min(14, Math.floor(termWidth / 6)));
+    const saveIndex = taskFields.length;
+    const cancelIndex = taskFields.length + 1;
+    function updateValues(next) {
+        valuesRef.current = next;
+        setValues(next);
+    }
+    useState(() => {
+        void listTasks().then(setAllTasks).catch(() => { });
+    });
+    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 : taskFields.length - 1);
+                return;
+            }
+            if (focusIndex === cancelIndex) {
+                setFocusIndex(key.name === "right" ? 0 : saveIndex);
+                return;
+            }
+            if (key.name === "right") {
+                if (focusIndex + 1 < taskFields.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 (focusIndex === saveIndex) {
+                void submit(valuesRef.current);
+            }
+            else if (focusIndex === cancelIndex) {
+                props.onCancel();
+            }
+        }
+    });
+    async function submit(current) {
+        if (isSubmitting)
+            return;
+        try {
+            setIsSubmitting(true);
+            setError("");
+            const cmdLine = current.command.trim();
+            if (!cmdLine) {
+                setError(t("errors.commandEmpty"));
+                return;
+            }
+            const tokens = cmdLine.split(/\s+/);
+            const command = tokens[0] ?? "";
+            const commandArgs = tokens.slice(1);
+            const onSuccessTaskId = current.onSuccessTaskId || null;
+            const onFailureTaskId = current.onFailureTaskId || null;
+            if (props.mode === "edit" && props.editTask) {
+                await updateTask(props.editTask.id, {
+                    name: current.name.trim() || command,
+                    command,
+                    commandArgs,
+                    onSuccessTaskId,
+                    onFailureTaskId,
+                });
+                props.onDone(true, props.editTask.id);
+            }
+            else {
+                const id = crypto.randomUUID().slice(0, 8);
+                await createTask({
+                    id,
+                    name: current.name.trim() || command,
+                    command,
+                    commandArgs,
+                    onSuccessTaskId,
+                    onFailureTaskId,
+                });
+                props.onDone(false, id);
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }
+    const labels = {
+        name: t("board.taskLabelName"),
+        command: t("board.taskLabelCommand"),
+        onSuccessTaskId: t("board.taskLabelOnSuccess"),
+        onFailureTaskId: t("board.taskLabelOnFailure"),
+    };
+    const hints = {
+        name: t("board.taskHintName"),
+        command: t("board.hintCommand"),
+        onSuccessTaskId: t("board.taskHintOnSuccess"),
+        onFailureTaskId: t("board.taskHintOnFailure"),
+    };
+    const chainOptions = [
+        { name: t("board.taskNone"), description: "", value: "" },
+        ...allTasks
+            .filter((t) => t.id !== props.editTask?.id)
+            .map((t) => ({ name: `${t.id} ${t.name}`, description: "", value: t.id })),
+    ];
+    const title = props.mode === "edit" ? t("board.taskEditTitle") : t("board.taskCreateTitle");
+    return (_jsxs("box", { title: title, border: true, style: { flexDirection: "column", flexGrow: 1, padding: 1, backgroundColor: "#0b0b0b" }, children: [_jsx("box", { style: { flexDirection: "column", flexGrow: 1 }, children: Array.from({ length: Math.ceil(taskFields.length / 2) }, (_, row) => {
+                    const leftField = taskFields[row * 2];
+                    const rightField = row * 2 + 1 < taskFields.length ? taskFields[row * 2 + 1] : null;
+                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(TaskFormRow, { field: leftField, index: row * 2, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(TaskFormRow, { field: rightField, index: row * 2 + 1, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, 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 TaskFormRow(props) {
+    const { field, index, focusIndex, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, chainOptions, style } = props;
+    const isFocused = focusIndex === index;
+    const isSelect = field === "onSuccessTaskId" || field === "onFailureTaskId";
+    const selectOpts = isSelect ? chainOptions : [];
+    const selectedIdx = isSelect ? selectOpts.findIndex((o) => o.value === values[field]) : 0;
+    return (_jsxs("box", { style: { flexDirection: "column", ...style }, children: [_jsx("text", { fg: isFocused ? "#38bdf8" : "#e5e7eb", children: labels[field] }), _jsx("text", { fg: "#6b7280", children: hints[field] }), isSelect ? (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: Math.min(selectOpts.length + 2, 6), backgroundColor: "#0b0b0b" }, children: _jsx("select", { focused: isFocused, options: selectOpts, selectedIndex: Math.max(0, selectedIdx), showDescription: false, style: { flexGrow: 1 }, onChange: (_i, option) => updateValues({ ...valuesRef.current, [field]: option?.value ?? "" }) }) })) : (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b" }, children: _jsx("input", { focused: isFocused, value: values[field], placeholder: field === "command" ? t("board.exampleCommand") : "", onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
+                        if (index < taskFields.length - 1) {
+                            setFocusIndex(index + 1);
+                        }
+                        else {
+                            void submit(valuesRef.current);
+                        }
+                    } }) }))] }));
+}
+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 }) }) }));
+}

package/dist/board/daemon.js

@@ -21,6 +21,14 @@ export async function resumeLoop(id) {
     const response = await sendRequest({ type: "resume", payload: { id } });
     expectOk(response.message ?? t("errors.resumeFailed"), response.type);
 }
+export async function stopLoop(id) {
+    const response = await sendRequest({ type: "stop-loop", payload: { id } });
+    expectOk(response.message ?? "Stop failed", response.type);
+}
+export async function playLoop(id) {
+    const response = await sendRequest({ type: "play-loop", payload: { id } });
+    expectOk(response.message ?? "Play failed", response.type);
+}
 export async function triggerLoop(id) {
     const response = await sendRequest({ type: "trigger", payload: { id } });
     expectOk(response.message ?? t("errors.forceRunFailed"), response.type);
@@ -59,3 +67,51 @@ export async function fetchRunLog(id, runNumber) {
     }
     return response.data ?? "";
 }
+export function streamRunLog(id, runNumber, onLine, onEnd, onError) {
+    return streamRequest({ type: "run-log-stream", payload: { id, runNumber } }, onLine, onEnd, onError);
+}
+export async function listTasks() {
+    const response = await sendRequest({ type: "task-list" });
+    if (response.type !== "ok") {
+        throw new Error(response.message);
+    }
+    return response.data;
+}
+export async function createTask(payload) {
+    const response = await sendRequest({ type: "task-create", payload });
+    if (response.type !== "ok") {
+        throw new Error(response.message);
+    }
+    return response.data;
+}
+export async function updateTask(id, payload) {
+    const response = await sendRequest({ type: "task-update", payload: { id, ...payload } });
+    if (response.type !== "ok") {
+        throw new Error(response.message);
+    }
+    return response.data;
+}
+export async function deleteTask(id) {
+    const response = await sendRequest({ type: "task-delete", payload: { id } });
+    expectOk(response.message ?? "Task delete failed", response.type);
+}
+export async function listProjects() {
+    const response = await sendRequest({ type: "project-list" });
+    if (response.type !== "ok")
+        throw new Error(response.message);
+    return response.data;
+}
+export async function createProject(name, color) {
+    const response = await sendRequest({ type: "project-create", payload: { name, color } });
+    if (response.type !== "ok")
+        throw new Error(response.message);
+    return response.data;
+}
+export async function updateProject(id, name, color) {
+    const response = await sendRequest({ type: "project-update", payload: { id, name, color } });
+    expectOk(response.message ?? t("project.error.updateFailed"), response.type);
+}
+export async function deleteProject(id) {
+    const response = await sendRequest({ type: "project-delete", payload: { id } });
+    expectOk(response.message ?? t("project.error.deleteFailed"), response.type);
+}

package/dist/board/format.js

@@ -49,23 +49,21 @@ export function timeUntil(iso) {
         return t("format.hrsAhead", { hrs });
     return t("format.daysAhead", { days: Math.floor(hrs / 24) });
 }
+const STATUS_COLORS = {
+    running: "#4ade80",
+    waiting: "#38bdf8",
+    paused: "#facc15",
+    idle: "#fb923c",
+    stopped: "#f87171",
+};
 export function statusColor(status) {
-    switch (status) {
-        case "running":
-            return "#4ade80";
-        case "paused":
-            return "#facc15";
-        case "waiting":
-            return "#38bdf8";
-        case "stopped":
-            return "#f87171";
-        default:
-            return "#ffffff";
-    }
+    return STATUS_COLORS[status] ?? "#ffffff";
 }
 export function timingLabel(loop) {
     if (loop.status === "paused")
         return t("format.timingPaused");
+    if (loop.status === "idle")
+        return t("format.timingIdle");
     if (loop.nextRunAt)
         return t("format.timingNext", { timeAgo: timeUntil(loop.nextRunAt) });
     if (loop.lastRunAt)
@@ -93,3 +91,12 @@ export function formatRunTime(iso) {
     const d = new Date(iso);
     return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
 }
+export function sinceLabel(loop) {
+    const ts = loop.sessionStartedAt ?? loop.createdAt;
+    if (!ts)
+        return t("format.dash");
+    const d = new Date(ts);
+    const date = d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+    const time = d.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
+    return `${date} ${time}`;
+}