loop-task 1.5.5 → 2.0.0

package/dist/tui/components/CommandInput.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { useAutocompleteState, } from "ink-combobox";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { buildCommands, rankCommands } from "../commands.js";
+import { COMMAND_INPUT_DROPDOWN_MAX_VISIBLE, COMMAND_INPUT_HEIGHT, CONFIRM_YES, CONFIRM_CANCEL, } from "../../config/constants.js";
+import { sanitizePaste } from "../utils/paste.js";
+export { sanitizePaste } from "../utils/paste.js";
+// ── Rendered input with cursor ───────────────────────────────────────
+function renderInputLine(value, cursorOffset) {
+    if (value.length === 0) {
+        return "\x1b[7m \x1b[27m";
+    }
+    let result = "";
+    for (let i = 0; i < value.length; i++) {
+        if (i === cursorOffset) {
+            result += "\x1b[7m" + value[i] + "\x1b[27m";
+        }
+        else {
+            result += value[i];
+        }
+    }
+    if (cursorOffset >= value.length) {
+        result += "\x1b[7m \x1b[27m";
+    }
+    return result;
+}
+function renderHighlightedLabel(label, matchRanges, isFocused) {
+    if (matchRanges.length === 0) {
+        return isFocused
+            ? `\x1b[38;2;251;191;36m${label}\x1b[39m`
+            : label;
+    }
+    let result = "";
+    let pos = 0;
+    for (const range of matchRanges) {
+        if (pos < range.start) {
+            const segment = label.slice(pos, range.start);
+            result += isFocused
+                ? `\x1b[38;2;251;191;36m${segment}\x1b[39m`
+                : segment;
+        }
+        const matched = label.slice(range.start, range.end);
+        result += `\x1b[1m\x1b[38;2;251;191;36m${matched}\x1b[39m\x1b[22m`;
+        pos = range.end;
+    }
+    if (pos < label.length) {
+        const segment = label.slice(pos);
+        result += isFocused
+            ? `\x1b[38;2;251;191;36m${segment}\x1b[39m`
+            : segment;
+    }
+    return result;
+}
+// ── Dropdown ─────────────────────────────────────────────────────────
+function CommandDropdown({ state, rankedFiltered, }) {
+    if (!state.isOpen || state.isLoading || state.error)
+        return null;
+    const filtered = rankedFiltered;
+    const visibleOptions = filtered.slice(state.visibleFromIndex, state.visibleToIndex);
+    if (visibleOptions.length === 0) {
+        if (state.inputValue.length > 0) {
+            return (_jsx(Box, { paddingLeft: 3, position: "absolute", bottom: 3, borderStyle: "single", borderColor: theme.border.dim, children: _jsx(Text, { color: theme.text.muted, children: t("cmdInput.noMatches") }) }));
+        }
+        return null;
+    }
+    const aboveCount = state.visibleFromIndex;
+    const belowCount = filtered.length - state.visibleToIndex;
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 3, position: "absolute", bottom: 3, children: [aboveCount > 0 && (_jsx(Text, { color: theme.text.muted, children: `  \u2191 ${aboveCount} more` })), visibleOptions.map((match, i) => {
+                const actualIndex = state.visibleFromIndex + i;
+                const isFocused = actualIndex === state.focusedIndex;
+                const label = renderHighlightedLabel(match.option.label, match.matchRanges, isFocused);
+                return (_jsxs(Box, { backgroundColor: isFocused ? theme.bg.active : undefined, children: [_jsx(Text, { color: isFocused ? theme.text.inverse : theme.text.muted, children: isFocused ? "\u276f " : "  " }), _jsx(Text, { color: isFocused ? theme.text.inverse : undefined, children: label })] }, match.option.value));
+            }), belowCount > 0 && (_jsx(Text, { color: theme.text.muted, children: `  \u2193 ${belowCount} more` }))] }));
+}
+// ── Confirm inline options ────────────────────────────────────────────
+function ConfirmInlineOptions({ focusedIndex, yesLabel, cancelLabel, }) {
+    // Options order: [cancel(0), yes(1)] in the autocomplete state,
+    // displayed inline as "❯ yes   cancel" (yes first, cancel second).
+    const yesFocused = focusedIndex === 1;
+    const cancelFocused = focusedIndex === 0;
+    return (_jsxs(Box, { paddingLeft: 3, children: [yesFocused ? (_jsx(Text, { color: theme.text.inverse, backgroundColor: theme.bg.active, children: `\u276f ${yesLabel}` })) : (_jsx(Text, { color: theme.text.muted, children: `  ${yesLabel}` })), _jsx(Text, { color: theme.text.muted, children: "   " }), cancelFocused ? (_jsx(Text, { color: theme.text.inverse, backgroundColor: theme.bg.active, children: `\u276f ${cancelLabel}` })) : (_jsx(Text, { color: theme.text.muted, children: `  ${cancelLabel}` }))] }));
+}
+// ── Hint bar ──────────────────────────────────────────────────────────
+function HintBar({ leftHint, rightHint, }) {
+    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsx(Box, { children: leftHint }), _jsx(Box, { children: rightHint })] }));
+}
+function KeyHint({ keyLabel, action }) {
+    return (_jsxs(Box, { marginRight: 2, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: keyLabel }), _jsx(Text, { color: theme.text.muted, children: " " + action })] }));
+}
+// ── Command mode ─────────────────────────────────────────────────────
+function CommandMode({ context, onCommand, onCopy, onPanelAction, disabled, navOwner, onInputStateChange, }) {
+    const commands = useMemo(() => buildCommands(context), [context]);
+    const options = useMemo(() => commands.map((cmd) => ({ label: cmd.label, value: cmd.value })), [commands]);
+    const { state, dispatch } = useAutocompleteState({
+        options,
+        visibleOptionCount: COMMAND_INPUT_DROPDOWN_MAX_VISIBLE,
+        onSelect: onCommand,
+    });
+    // Re-rank filteredOptions: exact match → prefix match → fuzzy (existing order)
+    const rankedFiltered = useMemo(() => {
+        const fo = state.filteredOptions;
+        if (fo.length === 0 || state.inputValue.length === 0)
+            return fo;
+        const byValue = new Map();
+        for (const m of fo)
+            byValue.set(m.option.value, m);
+        const ranked = rankCommands(state.inputValue, fo.map((m) => ({ label: m.option.label, value: m.option.value })));
+        return ranked
+            .map((opt) => byValue.get(opt.value))
+            .filter((m) => m !== undefined);
+    }, [state.filteredOptions, state.inputValue]);
+    // Report input state changes to parent for InputOwner resolution (1.2)
+    useEffect(() => {
+        onInputStateChange?.(state.inputValue.length > 0, state.isOpen);
+    }, [state.inputValue, state.isOpen, onInputStateChange]);
+    const insertText = useCallback((text) => {
+        for (const ch of text)
+            dispatch({ type: "INSERT_TEXT", text: ch });
+    }, [dispatch]);
+    const clearInput = useCallback(() => {
+        dispatch({ type: "MOVE_CURSOR_END" });
+        for (let i = 0; i < state.inputValue.length; i++)
+            dispatch({ type: "DELETE_BACKWARD" });
+    }, [dispatch, state.inputValue.length]);
+    useInput((input, key) => {
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~ arrives as one
+        // chunk. Detect first — the leading ESC can otherwise trip the ctrl/escape guards.
+        if (input.includes("\x1b[200~")) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        // Ctrl+U clears the line (the "select all + delete" gesture). Handle before
+        // the ctrl guard below. Some terminals send it as the raw NAK control char.
+        if ((key.ctrl && input === "u") || input === "\x15") {
+            clearInput();
+            return;
+        }
+        if (key.ctrl)
+            return;
+        // Multi-char containing CR/LF with no bracketed markers = the VS Code
+        // Ctrl+Enter escape sequence, handled by App's global useInput. Ignore here.
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        // When the command bar is empty and no dropdown is open, panels own
+        // navigation keys — return early so j/k/arrows reach the panel layer.
+        if (navOwner === "panel" && state.inputValue.length === 0 && !state.isOpen) {
+            if (input === "j" || input === "k" || key.upArrow || key.downArrow) {
+                return; // panels own these keys
+            }
+        }
+        // `c` with no modifiers + no open dropdown = contextual copy shortcut
+        if (onCopy && input === "c" && !state.isOpen) {
+            onCopy();
+            return;
+        }
+        if (key.escape) {
+            dispatch({ type: "CLOSE" });
+            if (state.inputValue.length > 0) {
+                clearInput();
+            }
+            return;
+        }
+        if (key.return) {
+            if (state.isOpen && rankedFiltered.length > 0 && state.focusedIndex < rankedFiltered.length) {
+                const focused = rankedFiltered[state.focusedIndex];
+                dispatch({ type: "CLOSE" });
+                for (let i = 0; i <= state.inputValue.length; i++) {
+                    dispatch({ type: "DELETE_BACKWARD" });
+                }
+                onCommand(focused.option.value);
+            }
+            else if (state.inputValue.length === 0) {
+                // Empty command bar: Enter triggers the focused panel's contextual
+                // action (edit / logs) for terminals that collapse Ctrl+Enter to Enter.
+                onPanelAction?.();
+            }
+            return;
+        }
+        if (key.tab) {
+            dispatch({ type: "ACCEPT" });
+            return;
+        }
+        if (key.downArrow) {
+            dispatch({ type: "FOCUS_NEXT" });
+            return;
+        }
+        if (key.upArrow) {
+            dispatch({ type: "FOCUS_PREV" });
+            return;
+        }
+        if (key.backspace || key.delete) {
+            dispatch({ type: "DELETE_BACKWARD" });
+            return;
+        }
+        if (key.leftArrow) {
+            dispatch({ type: "MOVE_CURSOR_LEFT" });
+            return;
+        }
+        if (key.rightArrow) {
+            dispatch({ type: "MOVE_CURSOR_RIGHT" });
+            return;
+        }
+        // Multi-char printable input = an unbracketed single-line paste (e.g. right-click).
+        if (input.length > 1 && !key.meta) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        if (input.length === 1 && !key.ctrl && !key.meta && !key.return && !key.tab && !key.escape && input >= " " && input <= "~") {
+            dispatch({ type: "INSERT_TEXT", text: input });
+        }
+    }, { isActive: !disabled });
+    const isEmpty = state.inputValue.length === 0;
+    const cursor = "\x1b[7m \x1b[27m";
+    const inputContent = isEmpty ? cursor : renderInputLine(state.inputValue, state.cursorOffset);
+    return (_jsxs(_Fragment, { children: [_jsx(CommandDropdown, { state: state, rankedFiltered: rankedFiltered }), _jsxs(Box, { children: [_jsx(Text, { color: theme.accent.brand, children: "│ " }), isEmpty ? (_jsx(Text, { color: theme.text.muted, children: t("cmdInput.placeholder") })) : (_jsx(Text, { children: inputContent }))] }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsxs(Box, { children: [_jsx(KeyHint, { keyLabel: "enter", action: "edit/logs" }), _jsx(KeyHint, { keyLabel: "ctrl+u", action: "clear" }), _jsx(KeyHint, { keyLabel: "c", action: "copy" }), _jsx(KeyHint, { keyLabel: "tab", action: "panels" }), _jsx(KeyHint, { keyLabel: "ctrl+\u2190\u2192", action: "tabs" }), _jsx(KeyHint, { keyLabel: "ctrl+p", action: "commands" })] }) })] }));
+}
+// ── Confirm mode ─────────────────────────────────────────────────────
+function ConfirmMode({ confirmState, onConfirmYes, onConfirmCancel, disabled, }) {
+    const yesLabel = t("cmdInput.confirmYes");
+    const cancelLabel = t("cmdInput.confirmCancel");
+    const options = useMemo(() => [
+        { label: cancelLabel, value: CONFIRM_CANCEL },
+        { label: yesLabel, value: CONFIRM_YES },
+    ], [cancelLabel, yesLabel]);
+    const handleSelect = useCallback((value) => {
+        if (value === CONFIRM_YES) {
+            onConfirmYes();
+        }
+        else {
+            onConfirmCancel();
+        }
+    }, [onConfirmYes, onConfirmCancel]);
+    const { state, dispatch } = useAutocompleteState({
+        options,
+        visibleOptionCount: 2,
+        onSelect: handleSelect,
+    });
+    useInput((_input, key) => {
+        if (key.ctrl)
+            return;
+        if (_input.length > 1 && (_input.includes("\r") || _input.includes("\n")))
+            return;
+        if (key.escape) {
+            onConfirmCancel();
+            return;
+        }
+        if (key.return) {
+            if (state.isOpen && state.filteredOptions.length > 0 && state.focusedIndex < state.filteredOptions.length) {
+                const focused = state.filteredOptions[state.focusedIndex];
+                dispatch({ type: "SELECT", value: focused.option.value, label: focused.option.label });
+            }
+            else {
+                onConfirmCancel();
+            }
+            return;
+        }
+        if (key.downArrow) {
+            dispatch({ type: "FOCUS_NEXT" });
+            return;
+        }
+        if (key.upArrow) {
+            dispatch({ type: "FOCUS_PREV" });
+            return;
+        }
+    }, { isActive: !disabled });
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.semantic.danger, children: "│ " }), _jsx(Text, { color: theme.text.primary, children: confirmState.prompt })] }), _jsx(ConfirmInlineOptions, { focusedIndex: state.focusedIndex, yesLabel: yesLabel, cancelLabel: cancelLabel }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsx(KeyHint, { keyLabel: "enter", action: "confirm" }) })] }));
+}
+// ── Search mode ──────────────────────────────────────────────────────
+function SearchMode({ value, onSearchChange, onSearchSubmit, onSearchCancel, disabled, }) {
+    useInput((input, key) => {
+        if (key.ctrl)
+            return;
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        if (key.escape) {
+            onSearchCancel();
+            return;
+        }
+        if (key.return) {
+            onSearchSubmit();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            onSearchChange(value.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && input.length === 1) {
+            onSearchChange(value + input);
+            return;
+        }
+    }, { isActive: !disabled });
+    const placeholder = t("cmdInput.searchPlaceholder");
+    const cursor = "\x1b[7m \x1b[27m";
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent.project, children: "│ " }), value.length > 0 ? (_jsx(Text, { children: value + cursor })) : (_jsx(Text, { color: theme.text.muted, children: placeholder }))] }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsx(KeyHint, { keyLabel: "enter", action: "apply" }) })] }));
+}
+// ── Main component ───────────────────────────────────────────────────
+export function CommandInput(props) {
+    const { context, onCommand, confirmState, searchState, searchValue, onSearchChange, onSearchSubmit, onSearchCancel, onConfirmYes, onConfirmCancel, onCopy, onPanelAction, navOwner, onInputStateChange, } = props;
+    return (_jsx(Box, { flexDirection: "column", height: COMMAND_INPUT_HEIGHT, borderStyle: "single", borderColor: theme.border.dim, paddingY: 1, children: searchState?.active ? (_jsx(SearchMode, { value: searchValue, onSearchChange: onSearchChange, onSearchSubmit: onSearchSubmit, onSearchCancel: onSearchCancel, disabled: props.disabled })) : confirmState === null ? (_jsx(CommandMode, { context: context, onCommand: onCommand, onCopy: onCopy, onPanelAction: onPanelAction, disabled: props.disabled, navOwner: navOwner, onInputStateChange: onInputStateChange })) : (_jsx(ConfirmMode, { confirmState: confirmState, onConfirmYes: onConfirmYes, onConfirmCancel: onConfirmCancel, disabled: props.disabled })) }));
+}

package/dist/tui/components/CommandsBrowserModal.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { buildTabCommands } from "../commands.js";
+const CATEGORY_ORDER = ["global", "filters", "loop", "task", "project"];
+function categoryLabel(cat) {
+    switch (cat) {
+        case "global": return t("cmdsBrowser.groupGlobal");
+        case "filters": return t("cmdsBrowser.groupFilters");
+        case "loop": return t("cmdsBrowser.groupLoop");
+        case "task": return t("cmdsBrowser.groupTask");
+        case "project": return t("cmdsBrowser.groupProject");
+    }
+}
+const MAX_VISIBLE = 16;
+export function CommandsBrowserModal(props) {
+    const allCommands = useMemo(() => buildTabCommands(props.context), [props.context]);
+    const flatItems = useMemo(() => {
+        const items = [];
+        for (const cat of CATEGORY_ORDER) {
+            const cmds = allCommands.filter((c) => c.category === cat).sort((a, b) => a.label.localeCompare(b.label));
+            if (cmds.length === 0)
+                continue;
+            items.push({ command: { label: categoryLabel(cat), value: `__header_${cat}`, hint: "", tier: "global", category: cat }, isHeader: true, category: cat });
+            for (const cmd of cmds) {
+                items.push({ command: cmd, isHeader: false, category: cat });
+            }
+        }
+        return items;
+    }, [allCommands]);
+    const selectableIndices = useMemo(() => {
+        return flatItems
+            .map((item, i) => ({ item, i }))
+            .filter(({ item }) => !item.isHeader)
+            .map(({ i }) => i);
+    }, [flatItems]);
+    const [cursor, setCursor] = useState(0);
+    const currentFlatIdx = selectableIndices[cursor] ?? 0;
+    useInput((input, key) => {
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((prev) => prev <= 0 ? Math.max(0, selectableIndices.length - 1) : prev - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((prev) => prev >= selectableIndices.length - 1 ? 0 : prev + 1);
+            return;
+        }
+        if (key.return) {
+            const flatIdx = selectableIndices[cursor];
+            if (flatIdx !== undefined) {
+                const item = flatItems[flatIdx];
+                if (item && !item.isHeader) {
+                    props.onExecute(item.command.value);
+                }
+            }
+            return;
+        }
+    });
+    const windowStart = Math.max(0, currentFlatIdx - Math.floor(MAX_VISIBLE / 2));
+    const windowEnd = Math.min(flatItems.length, windowStart + MAX_VISIBLE);
+    const visibleItems = flatItems.slice(windowStart, windowEnd);
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 56, flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: theme.border.dim, paddingX: 1, paddingY: 0, children: [_jsxs(Box, { justifyContent: "space-between", paddingY: 0, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: t("cmdsBrowser.title") }), _jsx(Text, { color: theme.text.muted, children: "esc" })] }), _jsx(Box, { flexDirection: "column", children: visibleItems.map((item, visIdx) => {
+                        const realIdx = windowStart + visIdx;
+                        const isSelected = realIdx === currentFlatIdx;
+                        if (item.isHeader) {
+                            return (_jsx(Box, { marginTop: realIdx === 0 ? 0 : 1, children: _jsx(Text, { color: theme.accent.brand, bold: true, children: item.command.label }) }, item.command.value));
+                        }
+                        const shortcut = item.command.shortcut ?? "";
+                        return (_jsxs(Box, { backgroundColor: isSelected ? theme.bg.active : undefined, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: "  " + item.command.label }), item.command.hint.length > 0 ? (_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: "  " + item.command.hint.slice(0, 20) })) : null] }), shortcut.length > 0 ? (_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: shortcut })) : null] }, `${item.command.value}-${realIdx}`));
+                    }) }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { color: theme.text.muted, children: t("cmdsBrowser.hint") }) })] }) }));
+}

package/dist/tui/components/ConfirmModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { Modal } from "./Modal.js";
+import { FocusableButton } from "./FocusableButton.js";
+import { t } from "../../i18n/index.js";
+export function ConfirmModal(props) {
+    return (_jsx(Modal, { title: props.message, onClose: props.onNo, width: "50%", children: _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsx(FocusableButton, { label: t("board.yes"), color: theme.accent.focus, onPress: props.onYes }), _jsx(FocusableButton, { label: t("board.no"), color: theme.semantic.danger, onPress: props.onNo, variant: "danger" })] }) }));
+}

package/dist/tui/components/ContextHelpModal.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { Modal } from "./Modal.js";
+import { t } from "../../i18n/index.js";
+export function ContextHelpModal(props) {
+    return (_jsxs(Modal, { title: t("context.helpTitle"), onClose: props.onClose, width: 64, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.text.primary, children: t("context.helpRules") }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.accent.brand, children: t("context.helpTemplates") }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("context.helpCaveat") }) }), _jsx(Box, { children: _jsx(Text, { color: theme.text.secondary, children: t("context.helpJqTip") }) })] }));
+}

package/dist/tui/components/CreateForm.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useRef } from "react";
+import { createLoop, updateLoop } from "../daemon.js";
+import { t } from "../../i18n/index.js";
+import { WizardForm } from "./WizardForm.js";
+import { TaskPickerModal } from "./TaskPickerModal.js";
+import { SelectModal, SelectValueField } from "./SelectModal.js";
+import { InlineCommandEditor } from "./InlineCommandEditor.js";
+import { parseDuration } from "../../duration.js";
+import { parseCommandLine } from "../../loop-config.js";
+// ── Component ───────────────────────────────────────────────────────
+export function CreateView(props) {
+    const { mode, editId, initial, selectedTaskId, selectedTaskName, tasks, currentProjectId, onCancel, onDone, onChooseTask, } = props;
+    const [taskPickerOpen, setTaskPickerOpen] = useState(false);
+    const [openSelect, setOpenSelect] = useState(null);
+    const [commandValue, setCommandValue] = useState(initial.command ?? "");
+    // renderCustom is invoked on every WizardForm render for every field, so this
+    // ref always holds the latest onChange/onAdvance closures per field key —
+    // letting the modal (rendered outside WizardForm) drive a field's value.
+    const fieldCallbacksRef = useRef({});
+    const taskModeInitial = initial.taskMode === "existing" ? "Existing task" : "Inline command";
+    // Resolve task display name on edit mode: if the user hasn't picked a task
+    // via the picker (selectedTaskName is null), look it up from the tasks list.
+    // Always format as "<name> (<short id>)" for consistency.
+    const resolvedTaskName = useMemo(() => {
+        const tid = selectedTaskId ?? initial.taskId;
+        if (!tid)
+            return null;
+        const displayName = selectedTaskName ?? tasks.find((t) => t.id === tid)?.name;
+        if (displayName)
+            return `${displayName} (${tid.slice(0, 8)})`;
+        return `${tid.slice(0, 8)}`;
+    }, [selectedTaskName, selectedTaskId, initial.taskId, tasks]);
+    const steps = useMemo(() => {
+        const list = [
+            {
+                key: "interval",
+                prompt: t("wizard.intervalPrompt"),
+                hint: t("wizard.intervalHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: initial.interval ?? undefined,
+            },
+            {
+                key: "taskMode",
+                prompt: t("wizard.taskModePrompt"),
+                hint: t("board.hintTaskMode"),
+                required: true,
+                defaultValue: taskModeInitial,
+                onActivate: () => setOpenSelect("taskMode"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.taskMode = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.taskModePrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "taskId",
+                prompt: resolvedTaskName
+                    ? t("board.selectedTask", { name: resolvedTaskName })
+                    : t("board.chooseTask"),
+                hint: t("board.hintTask"),
+                required: true,
+                inputType: "text",
+                defaultValue: initial.taskId ?? undefined,
+                skip: (values) => !values.taskMode?.includes("Existing"),
+                onActivate: () => setTaskPickerOpen(true),
+                renderCustom: ({ isActive }) => (_jsx(SelectValueField, { label: resolvedTaskName, placeholder: t("board.chooseTask"), isActive: isActive })),
+            },
+            {
+                key: "command",
+                prompt: t("wizard.commandPrompt"),
+                hint: t("wizard.commandHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: commandValue || undefined,
+                skip: (values) => !!values.taskMode?.includes("Existing"),
+                // No onActivate — inline editor, owned directly by renderCustom
+                renderCustom: ({ isActive, onChange }) => (_jsx(InlineCommandEditor, { value: commandValue, hint: t("wizard.commandHint"), isActive: isActive, onChange: (v) => {
+                        setCommandValue(v);
+                        onChange(v);
+                    } })),
+            },
+            {
+                key: "runNow",
+                prompt: t("wizard.runNowPrompt"),
+                hint: t("board.hintRunNow"),
+                required: true,
+                defaultValue: initial.runNow === "true" || initial.runNow === "yes"
+                    ? t("wizard.runNowNow")
+                    : t("wizard.runNowWait"),
+                onActivate: () => setOpenSelect("runNow"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.runNow = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.runNowPrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "cwd",
+                prompt: t("wizard.cwdPrompt"),
+                hint: t("wizard.cwdHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: initial.cwd ?? undefined,
+            },
+            {
+                key: "description",
+                prompt: t("wizard.descriptionPrompt"),
+                hint: t("wizard.descriptionHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: initial.description ?? undefined,
+            },
+            {
+                key: "maxRuns",
+                prompt: t("wizard.maxRunsPrompt"),
+                hint: t("wizard.maxRunsHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: initial.maxRuns ?? undefined,
+            },
+            {
+                key: "project",
+                prompt: t("wizard.projectPrompt"),
+                hint: t("wizard.projectHint"),
+                required: false,
+                defaultValue: props.projects.find((p) => p.id === (initial.project ?? "default"))?.name ?? props.projects[0]?.name,
+                onActivate: () => setOpenSelect("project"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.project = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.projectPrompt"), isActive: isActive }));
+                },
+            },
+        ];
+        return list;
+    }, [taskModeInitial, selectedTaskId, resolvedTaskName, initial, commandValue, props.projects]);
+    const handleComplete = useCallback((values) => {
+        const intervalInput = values.interval ?? "";
+        if (!intervalInput.trim())
+            return;
+        let interval;
+        try {
+            interval = parseDuration(intervalInput.trim());
+        }
+        catch {
+            return;
+        }
+        const intervalHuman = intervalInput.trim();
+        const isExistingTask = !!values.taskMode?.includes("Existing");
+        if (isExistingTask && !selectedTaskId && !values.taskId?.trim())
+            return;
+        const cmdValue = values.command ?? commandValue;
+        if (!isExistingTask && !cmdValue.trim())
+            return;
+        const cmd = isExistingTask
+            ? ""
+            : cmdValue.split("\n").map((l) => l.trim()).filter(Boolean).join(" ");
+        let cmdOnly = "";
+        let args = [];
+        if (cmd.trim()) {
+            try {
+                const tokens = parseCommandLine(cmd.trim());
+                cmdOnly = tokens[0] ?? "";
+                args = tokens.slice(1);
+            }
+            catch {
+                return;
+            }
+        }
+        const runNowValue = values.runNow === t("wizard.runNowNow");
+        const projectName = values.project ?? "";
+        const project = props.projects.find((p) => p.name === projectName);
+        const projectId = project?.id ?? currentProjectId;
+        const options = {
+            interval,
+            taskId: isExistingTask
+                ? (selectedTaskId ?? values.taskId?.trim() ?? null)
+                : null,
+            command: cmdOnly,
+            commandArgs: args,
+            commandRaw: isExistingTask ? undefined : cmdValue,
+            cwd: (values.cwd ?? "").trim() || process.cwd(),
+            immediate: runNowValue,
+            maxRuns: (values.maxRuns ?? "").trim()
+                ? parseInt(values.maxRuns, 10)
+                : null,
+            verbose: false,
+            description: (values.description ?? "").trim(),
+            projectId,
+            offset: null,
+        };
+        const desc = (values.description ?? "").trim() || [cmdOnly, ...args].join(" ").trim();
+        if (mode === "edit" && editId) {
+            updateLoop(editId, options, intervalHuman)
+                .then((id) => onDone(true, id, desc))
+                .catch(() => { });
+        }
+        else {
+            createLoop(options, intervalHuman)
+                .then((id) => onDone(false, id, desc))
+                .catch(() => { });
+        }
+    }, [selectedTaskId, mode, editId, currentProjectId, onDone, commandValue, props.projects]);
+    const selectOptionsFor = useCallback((field) => {
+        if (field === "taskMode") {
+            return [t("wizard.taskModeInline"), t("wizard.taskModeExisting")].map((v) => ({ value: v, label: v }));
+        }
+        if (field === "runNow") {
+            return [t("wizard.runNowWait"), t("wizard.runNowNow")].map((v) => ({ value: v, label: v }));
+        }
+        return props.projects.map((p) => ({ value: p.name, label: p.name }));
+    }, [props.projects]);
+    const selectTitleFor = (field) => field === "taskMode" ? t("wizard.taskModePrompt")
+        : field === "runNow" ? t("wizard.runNowPrompt")
+            : t("wizard.projectPrompt");
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: mode === "edit" ? t("wizard.editLoop") : t("wizard.newLoop"), steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: taskPickerOpen || openSelect !== null }), taskPickerOpen ? (_jsx(TaskPickerModal, { tasks: tasks, onSelect: (task) => {
+                    onChooseTask({ id: task.id, name: task.name });
+                    setTaskPickerOpen(false);
+                }, onClose: () => setTaskPickerOpen(false) })) : null, openSelect ? (_jsx(SelectModal, { title: selectTitleFor(openSelect), options: selectOptionsFor(openSelect), initialValue: fieldCallbacksRef.current[openSelect]?.value, onSelect: (option) => {
+                    fieldCallbacksRef.current[openSelect]?.onChange(option.value);
+                    fieldCallbacksRef.current[openSelect]?.onAdvance();
+                    setOpenSelect(null);
+                }, onClose: () => setOpenSelect(null) })) : null] }));
+}

package/dist/tui/components/DebugPanel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+const MAX_ENTRIES = 12;
+export function DebugPanel(props) {
+    return (_jsxs(Box, { flexDirection: "column", width: "22%", flexShrink: 0, borderStyle: "single", borderColor: theme.semantic.warning, backgroundColor: theme.bg.surface, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.semantic.warning, bold: true, children: "DEBUG" }) }), _jsx(Box, { paddingLeft: 1, flexDirection: "column", children: props.entries.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: "press keys..." })) : (props.entries.map((e) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.text.primary, children: ["len=", e.len, " codes=[", e.codes, "]"] }), _jsxs(Text, { color: theme.text.muted, children: ["c=", e.ctrl ? 1 : 0, " r=", e.return ? 1 : 0, " t=", e.tab ? 1 : 0, " e=", e.escape ? 1 : 0] })] }, e.id)))) })] }));
+}
+export { MAX_ENTRIES };