loop-task 1.5.5 → 2.0.1

package/dist/tui/components/RunHistory.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { ScrollList } from "ink-scroll-list";
+import { darkTheme as theme } from "../theme.js";
+import { formatRunTime, formatRunDuration, formatFileSize } from "../format.js";
+import { t } from "../../i18n/index.js";
+function runIcon(run) {
+    if (run.status === "running")
+        return "\u21bb";
+    return run.exitCode === 0 ? "\u2713" : "\u2717";
+}
+function runIconColor(run) {
+    if (run.status === "running")
+        return theme.accent.loop;
+    return run.exitCode === 0 ? theme.semantic.success : theme.semantic.danger;
+}
+const SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+function sparkline(durations) {
+    if (durations.length === 0)
+        return "";
+    const max = Math.max(...durations, 1);
+    const min = Math.min(...durations, 0);
+    const range = max - min || 1;
+    return durations.map((d) => {
+        const level = Math.round(((d - min) / range) * (SPARK_CHARS.length - 1));
+        return SPARK_CHARS[level] ?? SPARK_CHARS[0];
+    }).join("");
+}
+function computeTrends(runs) {
+    if (runs.length === 0) {
+        return { sparkline: "", avgDuration: 0, successStreak: 0, failureStreak: 0, lastFailureAgo: null };
+    }
+    const recent = runs.slice(-20);
+    const durations = recent.map((r) => r.duration).filter((d) => d > 0);
+    const avgDuration = durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+    let successStreak = 0;
+    let failureStreak = 0;
+    for (let i = runs.length - 1; i >= 0; i--) {
+        const r = runs[i];
+        if (r.exitCode === 0 && failureStreak === 0)
+            successStreak++;
+        else if (r.exitCode !== 0 && successStreak === 0)
+            failureStreak++;
+        else
+            break;
+    }
+    let lastFailureAgo = null;
+    for (let i = runs.length - 1; i >= 0; i--) {
+        if (runs[i].exitCode !== 0) {
+            const diff = Date.now() - new Date(runs[i].startedAt).getTime();
+            const hours = Math.floor(diff / 3600000);
+            const mins = Math.floor(diff / 60000);
+            lastFailureAgo = hours > 0 ? `${hours}h ago` : `${mins}m ago`;
+            break;
+        }
+    }
+    return {
+        sparkline: sparkline(durations),
+        avgDuration: Math.round(avgDuration),
+        successStreak,
+        failureStreak,
+        lastFailureAgo,
+    };
+}
+const LIMIT = 15;
+export function RunHistory(props) {
+    const { loop, selectedRunIndex, onSelectRun, onOpenRun, isFocused, navActive = true } = props;
+    const runs = loop?.runHistory ?? [];
+    const reversed = [...runs].reverse();
+    const n = reversed.length;
+    useInput((input, key) => {
+        if (n === 0)
+            return;
+        if (key.upArrow || input === "k") {
+            const next = selectedRunIndex <= 0 ? n - 1 : selectedRunIndex - 1;
+            onSelectRun(next);
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            const next = selectedRunIndex >= n - 1 ? 0 : selectedRunIndex + 1;
+            onSelectRun(next);
+            return;
+        }
+        if (key.ctrl && key.return) {
+            const run = reversed[selectedRunIndex];
+            if (run)
+                onOpenRun(run);
+            return;
+        }
+    }, { isActive: isFocused && navActive });
+    const title = isFocused ? t("board.runHistoryTitleHint") : t("board.runHistoryTitle");
+    const trends = computeTrends(runs);
+    function renderRun(run, isSelected) {
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        const time = formatRunTime(run.startedAt);
+        const duration = formatRunDuration(run.duration);
+        const size = formatFileSize(run.logSize);
+        const icon = runIcon(run);
+        const iconColor = runIconColor(run);
+        const chain = run.chainName ?? "";
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: fg, children: time.padEnd(10) }), _jsxs(Text, { color: isSelected ? theme.text.inverse : iconColor, children: [icon, " "] }), _jsx(Text, { color: fg, children: duration.padEnd(10) }), _jsx(Text, { color: fg, children: size.padEnd(8) }), _jsx(Text, { color: fg, children: chain })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { paddingLeft: 1, paddingRight: 1, justifyContent: "space-between", children: [_jsx(Text, { color: theme.text.muted, children: title }), (trends.failureStreak > 0 || trends.lastFailureAgo) ? (_jsxs(Text, { color: theme.semantic.warning, children: [trends.failureStreak > 0 ? t("board.runHistoryFailStreak", { count: String(trends.failureStreak) }) : "", trends.failureStreak > 0 && trends.lastFailureAgo ? " " : "", trends.lastFailureAgo ? t("board.runHistoryLastFail", { ago: trends.lastFailureAgo }) : ""] })) : null] }), reversed.length === 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryEmpty") }) })) : (_jsxs(Box, { flexDirection: "column", children: [trends.sparkline ? (_jsxs(Box, { paddingLeft: 1, marginBottom: 0, children: [_jsx(Text, { color: theme.text.muted, children: "Durations: " }), _jsx(Text, { color: theme.accent.loop, children: trends.sparkline }), _jsxs(Text, { color: theme.text.muted, children: [" avg:", formatRunDuration(trends.avgDuration), " "] }), trends.successStreak > 0 ? (_jsxs(Text, { color: theme.semantic.success, children: ["streak:", trends.successStreak, " ok"] })) : null] })) : null, _jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: t("board.runHistoryTime").padEnd(10) }), _jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryDuration").padEnd(10) }), _jsx(Text, { color: theme.text.muted, children: t("board.runHistorySize").padEnd(8) }), _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryDesc") })] }), _jsx(ScrollList, { selectedIndex: selectedRunIndex, height: LIMIT, children: reversed.map((run, i) => {
+                            const isSelected = i === selectedRunIndex;
+                            const indicator = isSelected ? "\u203a " : "  ";
+                            return (_jsxs(Box, { backgroundColor: isSelected ? (isFocused && navActive ? theme.bg.active : isFocused ? theme.bg.hover : undefined) : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: indicator }), renderRun(run, isSelected)] }, i));
+                        }) })] }))] }));
+}

package/dist/tui/components/SearchSelect.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+export function SearchSelect(props) {
+    const { options, value, onChange, focused } = props;
+    const placeholder = props.placeholder ?? "type to filter...";
+    const [filter, setFilter] = useState("");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const filtered = useMemo(() => {
+        if (!filter)
+            return options;
+        const q = filter.toLowerCase();
+        return options.filter((o) => o.name.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
+    }, [options, filter]);
+    const currentIdx = filtered.findIndex((o) => o.value === value);
+    const clampedSelected = Math.min(currentIdx >= 0 && !filter ? currentIdx : selectedIndex, Math.max(0, filtered.length - 1));
+    useEffect(() => {
+        if (focused) {
+            setFilter("");
+            setSelectedIndex(currentIdx >= 0 ? currentIdx : 0);
+        }
+    }, [focused]);
+    useInput((input, key) => {
+        if (!focused)
+            return;
+        if (key.upArrow) {
+            setSelectedIndex((prev) => prev <= 0 ? filtered.length - 1 : prev - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((prev) => prev >= filtered.length - 1 ? 0 : prev + 1);
+            return;
+        }
+        if (key.return) {
+            const option = filtered[clampedSelected];
+            if (option) {
+                onChange(option.value);
+            }
+            return;
+        }
+        if (key.escape) {
+            setFilter("");
+            setSelectedIndex(0);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setFilter((f) => f.slice(0, -1));
+            setSelectedIndex(0);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && input.length === 1 && /[a-z0-9 _\-./]/i.test(input)) {
+            setFilter((f) => f + input);
+            setSelectedIndex(0);
+            return;
+        }
+    });
+    const listHeight = Math.min(filtered.length, 6);
+    return (_jsxs(Box, { borderStyle: "single", borderColor: focused ? theme.accent.focus : theme.border.default, backgroundColor: focused ? theme.bg.input : theme.bg.surface, flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: "/ " }), _jsx(Text, { color: filter ? theme.text.primary : theme.text.muted, children: filter || placeholder })] }), filtered.length > 0 ? (_jsx(Box, { flexDirection: "column", height: listHeight, children: filtered.map((option, i) => {
+                    const isSelected = i === clampedSelected;
+                    const isActive = option.value === value;
+                    const prefix = isSelected ? "\u203a " : "  ";
+                    const bg = isSelected ? theme.bg.active : undefined;
+                    const fg = isSelected ? theme.text.inverse : isActive ? theme.accent.focus : theme.text.secondary;
+                    return (_jsx(Box, { backgroundColor: bg, children: _jsxs(Text, { color: fg, children: [prefix, option.name] }) }, option.value));
+                }) })) : null] }));
+}

package/dist/tui/components/SelectModal.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+const MAX_VISIBLE = 10;
+/**
+ * Filterable modal picker: type to narrow, up/down to navigate, enter to
+ * select, esc to cancel. The single interaction pattern for every enumerated
+ * field in the board — a fixed set of two options and a list of dozens both
+ * use this, so users only ever learn one gesture for "change this value".
+ */
+export function SelectModal(props) {
+    const { title, options, initialValue, onSelect, onClose } = props;
+    const accent = props.accentColor ?? theme.accent.brand;
+    const [query, setQuery] = useState("");
+    const [cursor, setCursor] = useState(() => {
+        const idx = options.findIndex((o) => o.value === initialValue);
+        return idx >= 0 ? idx : 0;
+    });
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return options;
+        return options.filter((o) => o.label.toLowerCase().includes(q));
+    }, [options, query]);
+    const clampedCursor = filtered.length > 0 ? cursor % filtered.length : 0;
+    const selectAt = useCallback((idx) => {
+        const option = filtered[idx];
+        if (option)
+            onSelect(option);
+    }, [filtered, onSelect]);
+    useInput((input, key) => {
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        if (key.return) {
+            selectAt(clampedCursor);
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((prev) => (prev <= 0 ? Math.max(0, filtered.length - 1) : prev - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((prev) => (prev >= filtered.length - 1 ? 0 : prev + 1));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((prev) => prev.slice(0, -1));
+            setCursor(0);
+            return;
+        }
+        if (key.ctrl)
+            return;
+        if (input.length === 1 && input >= " " && input <= "~") {
+            setQuery((prev) => prev + input);
+            setCursor(0);
+        }
+    });
+    const start = Math.max(0, clampedCursor - Math.floor(MAX_VISIBLE / 2));
+    const end = Math.min(filtered.length, start + MAX_VISIBLE);
+    const visible = filtered.slice(start, end);
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 50, height: Math.min(20, visible.length + 7), flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: accent, paddingX: 1, paddingY: 0, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: accent, bold: true, children: title }), _jsx(Text, { color: theme.text.muted, children: "esc" })] }), _jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: theme.text.muted, children: "› " }), _jsx(Text, { color: query ? theme.text.primary : theme.text.muted, children: query || t("selectModal.searchPlaceholder") }), _jsx(Text, { inverse: true, children: " " })] }), _jsx(Box, { flexDirection: "column", marginTop: 0, children: visible.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: t("selectModal.empty") })) : (visible.map((option, visIdx) => {
+                        const realIdx = start + visIdx;
+                        const isSelected = realIdx === clampedCursor;
+                        const isCurrent = option.value === initialValue;
+                        return (_jsxs(Box, { backgroundColor: isSelected ? theme.bg.active : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: isSelected ? "❯ " : "  " }), _jsx(Text, { color: isSelected ? theme.text.inverse : isCurrent ? accent : theme.text.primary, children: option.label })] }, option.value));
+                    })) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.text.muted, children: [filtered.length, "/", options.length] }), _jsx(Text, { color: theme.text.muted, children: t("selectModal.hint") })] })] }) }));
+}
+/** Bordered field showing the current value, matching TextField's focus styling. */
+export function SelectValueField(props) {
+    const { label, placeholder, isActive } = props;
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsx(Box, { borderStyle: "single", borderColor: isActive ? theme.accent.brand : theme.border.dim, backgroundColor: isActive ? theme.bg.input : undefined, paddingLeft: 1, overflow: "hidden", width: "100%", children: label ? (_jsx(Text, { color: theme.text.primary, children: label })) : (_jsx(Text, { color: theme.text.muted, children: placeholder })) }), isActive ? (_jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: theme.accent.brand, children: "› " }), _jsx(Text, { color: theme.text.muted, children: t("selectModal.fieldHint", { action: "enter" }) })] })) : null] }));
+}

package/dist/tui/components/TabBar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+const TAB_DEFS = [
+    { key: "loops", label: "Loops", color: theme.accent.loop },
+    { key: "tasks", label: "Tasks", color: theme.accent.task },
+    { key: "projects", label: "Projects", color: theme.accent.project },
+];
+export function tabColor(tab) {
+    return TAB_DEFS.find((t) => t.key === tab)?.color ?? theme.accent.brand;
+}
+export function TabBar(props) {
+    const { activeTab, counts } = props;
+    return (_jsx(Box, { gap: 1, children: TAB_DEFS.map((tab) => {
+            const isActive = tab.key === activeTab;
+            const count = counts?.[tab.key];
+            const label = count !== undefined ? `${tab.label} ${count}` : tab.label;
+            return (_jsx(Box, { children: _jsx(Text, { color: isActive ? theme.text.inverse : theme.text.muted, backgroundColor: isActive ? tab.color : undefined, bold: isActive, children: ` ${label} ` }) }, tab.key));
+        }) }));
+}

package/dist/tui/components/TaskBrowser.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { ScrollList } from "ink-scroll-list";
+import { darkTheme as theme } from "../theme.js";
+import { commandLine } from "../format.js";
+import { t } from "../../i18n/index.js";
+import { FocusableButton } from "./FocusableButton.js";
+const NAME_WIDTH = 24;
+const COMMAND_WIDTH = 32;
+const LIMIT = 15;
+export function TaskNavigator(props) {
+    const { visible, total, selectedIndex, isFocused, navActive = true, allTasks, onSelect, onActivate } = props;
+    const title = t("board.taskBrowserTitle", {
+        visible: String(visible.length),
+        total: String(total),
+    });
+    useInput((input, key) => {
+        if (key.upArrow || input === "k") {
+            onSelect(Math.max(selectedIndex - 1, 0));
+        }
+        else if (key.downArrow || input === "j") {
+            onSelect(Math.min(selectedIndex + 1, visible.length - 1));
+        }
+        else if (key.ctrl && key.return) {
+            onActivate(selectedIndex);
+        }
+    }, { isActive: isFocused && navActive });
+    function resolveName(id) {
+        if (id === null)
+            return null;
+        return allTasks.find((t) => t.id === id)?.name ?? id;
+    }
+    function chainsLabel(task) {
+        const hasSuccess = task.onSuccessTaskId !== null;
+        const hasFailure = task.onFailureTaskId !== null;
+        if (!hasSuccess && !hasFailure)
+            return t("board.taskChainsNone");
+        const successName = hasSuccess ? resolveName(task.onSuccessTaskId) : null;
+        const failureName = hasFailure ? resolveName(task.onFailureTaskId) : null;
+        return t("board.taskChainsFormat", {
+            success: hasSuccess ? `\u2713${successName}` : "-",
+            failure: hasFailure ? `\u2192${failureName}` : "-",
+        });
+    }
+    function renderTask(task, index) {
+        const isSelected = index === selectedIndex;
+        const name = task.name.length > NAME_WIDTH
+            ? task.name.slice(0, NAME_WIDTH - 3) + "..."
+            : task.name.padEnd(NAME_WIDTH);
+        const cmd = commandLine(task.command, task.commandArgs);
+        const cmdDisplay = cmd.length > COMMAND_WIDTH
+            ? cmd.slice(0, COMMAND_WIDTH - 3) + "..."
+            : cmd.padEnd(COMMAND_WIDTH);
+        const chains = chainsLabel(task);
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        return (_jsxs(Box, { backgroundColor: isSelected ? (isFocused && navActive ? theme.bg.activeTask : isFocused ? theme.bg.hover : undefined) : undefined, children: [_jsx(Text, { color: fg, children: name }), _jsx(Text, { color: fg, children: cmdDisplay }), _jsx(Text, { color: fg, children: chains })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: title }) }), visible.length === 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.taskBrowserEmpty") }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: t("board.taskHeaderName").padEnd(NAME_WIDTH) }), _jsx(Text, { color: theme.text.muted, children: t("board.taskHeaderCommand").padEnd(COMMAND_WIDTH) }), _jsx(Text, { color: theme.text.muted, children: t("board.taskHeaderChains") })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(ScrollList, { height: LIMIT, selectedIndex: selectedIndex, scrollAlignment: "auto", children: visible.map((task, i) => (_jsx(React.Fragment, { children: renderTask(task, i) }, task.id))) }) })] }))] }));
+}
+const FIELD_LABEL_WIDTH = 13;
+function InspectorField(props) {
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.secondary, children: props.label.padEnd(FIELD_LABEL_WIDTH) }), _jsx(Text, { color: theme.text.primary, children: props.children })] }));
+}
+export function TaskInspector(props) {
+    const { task, allTasks } = props;
+    if (!task) {
+        return (_jsxs(Box, { borderStyle: "single", borderColor: theme.border.default, flexDirection: "column", children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorTitle") }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorEmpty") }) })] }));
+    }
+    const cmd = commandLine(task.command, task.commandArgs);
+    const resolveName = (id) => {
+        if (id === null)
+            return null;
+        return allTasks.find((t) => t.id === id)?.name ?? id;
+    };
+    const onSuccess = task.onSuccessTaskId ? resolveName(task.onSuccessTaskId) ?? task.onSuccessTaskId : t("board.taskNone");
+    const onFailure = task.onFailureTaskId ? resolveName(task.onFailureTaskId) ?? task.onFailureTaskId : t("board.taskNone");
+    return (_jsxs(Box, { borderStyle: "single", borderColor: theme.border.default, flexDirection: "column", children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorTitle") }) }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(InspectorField, { label: t("board.fieldId"), children: _jsx(Text, { color: theme.text.primary, children: task.id }) }), _jsx(InspectorField, { label: t("board.taskLabelName") + ": ", children: _jsx(Text, { color: theme.text.primary, children: task.name }) }), _jsx(InspectorField, { label: t("board.taskLabelCommand") + ": ", children: _jsx(Text, { color: theme.text.primary, children: cmd }) }), _jsx(InspectorField, { label: t("board.taskLabelOnSuccess") + ": ", children: _jsx(Text, { color: theme.text.primary, children: onSuccess }) }), _jsx(InspectorField, { label: t("board.taskLabelOnFailure") + ": ", children: _jsx(Text, { color: theme.text.primary, children: onFailure }) })] })] }));
+}
+export function TaskActionButtons(props) {
+    const { task, selectable, onAction } = props;
+    const actions = selectable
+        ? [
+            { key: "select", label: t("board.taskActionSelect") },
+            { key: "edit", label: t("board.taskActionEdit") },
+            { key: "delete", label: t("board.taskActionDelete") },
+        ]
+        : [
+            { key: "edit", label: t("board.taskActionEdit") },
+            { key: "delete", label: t("board.taskActionDelete") },
+        ];
+    if (!task) {
+        return (_jsx(Box, { borderStyle: "single", borderColor: theme.border.default, flexDirection: "row", height: 3, backgroundColor: theme.bg.surface, children: _jsx(Text, { color: theme.text.muted, children: t("board.noActions") }) }));
+    }
+    return (_jsx(Box, { borderStyle: "single", borderColor: theme.border.default, flexDirection: "row", height: 3, backgroundColor: theme.bg.surface, children: actions.map((action) => (_jsx(FocusableButton, { label: action.label, color: action.key === "delete" ? theme.semantic.danger : theme.text.secondary, variant: action.key === "delete" ? "danger" : "default", onPress: () => onAction(action.key) }, action.key))) }));
+}

package/dist/tui/components/TaskFilterBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { FocusableInput } from "./FocusableInput.js";
+import { t } from "../../i18n/index.js";
+export function TaskFilterBar(props) {
+    const { query, onQueryChange, onSearchDismiss } = props;
+    return (_jsxs(Box, { height: 3, children: [_jsx(Box, { flexGrow: 1, children: _jsx(FocusableInput, { value: query, onChange: onQueryChange, onSubmit: onSearchDismiss, placeholder: t("board.searchPlaceholder") }) }), _jsx(Box, { paddingLeft: 1, justifyContent: "flex-end", children: _jsx(Text, { color: theme.text.muted, children: t("board.searchEmpty") }) })] }));
+}

package/dist/tui/components/TaskForm.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useCallback, useState, useRef } from "react";
+import { WizardForm } from "./WizardForm.js";
+import { SelectModal, SelectValueField } from "./SelectModal.js";
+import { InlineCommandEditor } from "./InlineCommandEditor.js";
+import { createTask, updateTask, listTasks } from "../daemon.js";
+import crypto from "node:crypto";
+import { t } from "../../i18n/index.js";
+// ── Utility ─────────────────────────────────────────────────────────
+function parseArgs(cmd) {
+    const tokens = [];
+    const regex = /"([^"]*)"|'([^']*)'|(\S+)/g;
+    let match;
+    while ((match = regex.exec(cmd)) !== null) {
+        tokens.push(match[1] ?? match[2] ?? match[3] ?? "");
+    }
+    return tokens.slice(1);
+}
+function joinCommand(task) {
+    return [task.command, ...task.commandArgs].join(" ");
+}
+// ── Component ───────────────────────────────────────────────────────
+export function TaskForm(props) {
+    const { mode, editTask, onCancel, onDone } = props;
+    const [tasks, setTasks] = useState([]);
+    const [commandValue, setCommandValue] = useState(editTask ? (editTask.commandRaw ?? joinCommand(editTask)) : "");
+    useEffect(() => {
+        listTasks().then(setTasks).catch(() => setTasks([]));
+    }, []);
+    const chainOptions = useMemo(() => [t("wizard.chainNone"), ...tasks.map((task) => task.name)], [tasks]);
+    const chainSelectOptions = useMemo(() => chainOptions.map((v) => ({ value: v, label: v })), [chainOptions]);
+    const [openChainField, setOpenChainField] = useState(null);
+    const chainFieldsRef = useRef({});
+    const resolveChainId = useCallback((val) => {
+        if (!val || val === t("wizard.chainNone"))
+            return null;
+        const found = tasks.find((task) => task.name === val || task.id === val);
+        return found?.id ?? val;
+    }, [tasks]);
+    const resolveChainName = useCallback((id) => {
+        if (!id)
+            return t("wizard.chainNone");
+        const found = tasks.find((task) => task.id === id);
+        return found?.name ?? id;
+    }, [tasks]);
+    const steps = useMemo(() => {
+        const list = [
+            {
+                key: "name",
+                prompt: t("wizard.taskNamePrompt"),
+                hint: t("wizard.taskNameHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: editTask?.name ?? undefined,
+            },
+            {
+                key: "command",
+                prompt: t("wizard.taskCommandPrompt"),
+                hint: t("wizard.commandHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: commandValue || undefined,
+                renderCustom: ({ isActive, onChange }) => (_jsx(InlineCommandEditor, { value: commandValue, hint: t("wizard.commandHint"), isActive: isActive, onChange: (v) => {
+                        setCommandValue(v);
+                        onChange(v);
+                    } })),
+            },
+            {
+                key: "onSuccess",
+                prompt: t("wizard.onSuccessPrompt"),
+                hint: t("board.taskHintOnSuccess"),
+                required: false,
+                defaultValue: editTask ? resolveChainName(editTask.onSuccessTaskId) : undefined,
+                onActivate: () => setOpenChainField("onSuccess"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    chainFieldsRef.current.onSuccess = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.onSuccessPrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "onFailure",
+                prompt: t("wizard.onFailurePrompt"),
+                hint: t("board.taskHintOnFailure"),
+                required: false,
+                defaultValue: editTask ? resolveChainName(editTask.onFailureTaskId) : undefined,
+                onActivate: () => setOpenChainField("onFailure"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    chainFieldsRef.current.onFailure = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.onFailurePrompt"), isActive: isActive }));
+                },
+            },
+        ];
+        return list;
+    }, [commandValue, chainOptions, editTask, resolveChainName]);
+    const handleComplete = useCallback((values) => {
+        const name = values.name?.trim() ?? "";
+        const rawCommand = commandValue
+            .split("\n")
+            .map((l) => l.trim())
+            .filter(Boolean)
+            .join(" ");
+        if (!name || !rawCommand)
+            return;
+        const onSuccessTaskId = resolveChainId(values.onSuccess ?? "");
+        const onFailureTaskId = resolveChainId(values.onFailure ?? "");
+        const payload = {
+            name,
+            command: rawCommand.split(" ")[0] ?? "",
+            commandArgs: parseArgs(rawCommand),
+            commandRaw: commandValue,
+            onSuccessTaskId,
+            onFailureTaskId,
+        };
+        if (mode === "edit" && editTask) {
+            updateTask(editTask.id, payload)
+                .then(() => onDone(true, editTask.id))
+                .catch(() => { });
+        }
+        else {
+            const id = crypto.randomUUID().slice(0, 8);
+            createTask({ id, ...payload })
+                .then((result) => onDone(false, result.id))
+                .catch(() => { });
+        }
+    }, [commandValue, resolveChainId, mode, editTask, onDone]);
+    const title = mode === "edit"
+        ? t("board.taskEditTitle")
+        : t("board.taskCreateTitle");
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: title, steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: openChainField !== null }), openChainField ? (_jsx(SelectModal, { title: openChainField === "onSuccess" ? t("wizard.onSuccessPrompt") : t("wizard.onFailurePrompt"), options: chainSelectOptions, initialValue: chainFieldsRef.current[openChainField]?.value, onSelect: (option) => {
+                    chainFieldsRef.current[openChainField]?.onChange(option.value);
+                    chainFieldsRef.current[openChainField]?.onAdvance();
+                    setOpenChainField(null);
+                }, onClose: () => setOpenChainField(null) })) : null] }));
+}

package/dist/tui/components/TaskPickerModal.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+const MAX_VISIBLE = 10;
+export function TaskPickerModal(props) {
+    const [query, setQuery] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return props.tasks;
+        return props.tasks.filter((task) => task.name.toLowerCase().includes(q) ||
+            task.command.toLowerCase().includes(q));
+    }, [props.tasks, query]);
+    const clampedCursor = filtered.length > 0 ? cursor % filtered.length : 0;
+    const selectAt = useCallback((idx) => {
+        const task = filtered[idx];
+        if (task)
+            props.onSelect(task);
+    }, [filtered, props]);
+    useInput((input, key) => {
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (key.return) {
+            selectAt(clampedCursor);
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((prev) => prev <= 0 ? Math.max(0, filtered.length - 1) : prev - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((prev) => prev >= filtered.length - 1 ? 0 : prev + 1);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((prev) => prev.slice(0, -1));
+            setCursor(0);
+            return;
+        }
+        if (key.ctrl)
+            return;
+        if (input.length === 1 && input >= " " && input <= "~") {
+            setQuery((prev) => prev + input);
+            setCursor(0);
+        }
+    });
+    const start = Math.max(0, clampedCursor - Math.floor(MAX_VISIBLE / 2));
+    const end = Math.min(filtered.length, start + MAX_VISIBLE);
+    const visible = filtered.slice(start, end);
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 60, height: Math.min(20, visible.length + 8), flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: theme.accent.task, paddingX: 1, paddingY: 0, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: theme.accent.task, bold: true, children: t("taskPicker.title") }), _jsx(Text, { color: theme.text.muted, children: "esc" })] }), _jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: theme.text.muted, children: "\u203a " }), _jsx(Text, { color: query ? theme.text.primary : theme.text.muted, children: query || t("taskPicker.searchPlaceholder") }), _jsx(Text, { inverse: true, children: " " })] }), _jsx(Box, { flexDirection: "column", marginTop: 0, children: visible.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: t("taskPicker.empty") })) : (visible.map((task, visIdx) => {
+                        const realIdx = start + visIdx;
+                        const isSelected = realIdx === clampedCursor;
+                        return (_jsxs(Box, { backgroundColor: isSelected ? theme.bg.active : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: isSelected ? "\u276f " : "  " }), _jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: task.name }), _jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: " " + task.command })] }, task.id));
+                    })) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.text.muted, children: [filtered.length, "/", props.tasks.length] }), _jsx(Text, { color: theme.text.muted, children: t("taskPicker.hint") })] })] }) }));
+}

package/dist/tui/components/Toast.js

@@ -0,0 +1,37 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+const TOAST_TIMEOUT_MS = 3500;
+const TOAST_MAX = 4;
+function toastColor(kind) {
+    switch (kind) {
+        case "success": return theme.semantic.success;
+        case "error": return theme.semantic.danger;
+        case "info": return theme.accent.loop;
+    }
+}
+function toastIcon(kind) {
+    switch (kind) {
+        case "success": return "\u2713";
+        case "error": return "\u2717";
+        case "info": return "\u2139";
+    }
+}
+export function useToasts() {
+    const [toasts, setToasts] = useState([]);
+    const nextId = useState(() => ({ value: 0 }))[0];
+    const push = useCallback((kind, message) => {
+        const id = ++nextId.value;
+        setToasts((prev) => [...prev, { id, kind, message }].slice(-TOAST_MAX));
+        setTimeout(() => {
+            setToasts((prev) => prev.filter((t) => t.id !== id));
+        }, TOAST_TIMEOUT_MS);
+    }, [nextId]);
+    return { toasts, push };
+}
+export function ToastStack(props) {
+    if (props.toasts.length === 0)
+        return null;
+    return (_jsx(Box, { position: "absolute", bottom: 0, right: 0, flexDirection: "column", alignItems: "flex-end", children: props.toasts.map((toast) => (_jsxs(Box, { backgroundColor: theme.bg.elevated, paddingLeft: 1, paddingRight: 1, children: [_jsxs(Text, { color: toastColor(toast.kind), bold: true, children: [toastIcon(toast.kind), " "] }), _jsx(Text, { color: theme.text.primary, children: toast.message })] }, toast.id))) }));
+}