@plainconceptsplatform/loop-task 2.6.0

package/dist/widgets/left-panel/TaskBrowser.js

@@ -0,0 +1,132 @@
+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 "../../shared/ui/theme.js";
+import { commandLine } from "../../shared/ui/format.js";
+import { t } from "../../shared/i18n/index.js";
+import { FocusableButton } from "../../shared/ui/FocusableButton.js";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.js";
+const NAME_WIDTH = 24;
+const COMMAND_WIDTH = 28;
+const PROJECT_WIDTH = 10;
+const LIMIT = 15;
+export function TaskNavigator(props) {
+    const { visible, total, selectedIndex, isFocused, navActive = true, allTasks, projects, onSelect, onActivate } = props;
+    const title = t("board.taskBrowserTitle", {
+        visible: String(visible.length),
+        total: String(total),
+    });
+    useInput((input, key) => {
+        // Swallow SGR mouse sequences so they don't interfere
+        if (input.includes("[<")) {
+            return;
+        }
+        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 });
+    useMouseScroll({
+        onScrollUp: () => {
+            if (!(isFocused && navActive))
+                return;
+            onSelect(Math.max(selectedIndex - 1, 0));
+        },
+        onScrollDown: () => {
+            if (!(isFocused && navActive))
+                return;
+            onSelect(Math.min(selectedIndex + 1, visible.length - 1));
+        },
+        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 resolveProjectName(task) {
+        const proj = projects.find((p) => p.id === task.projectId);
+        return proj?.name ?? "";
+    }
+    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 silent = task.silentChain ? " [s]" : "";
+        const recipeBadge = task.isRecipeTask ? "R " : "";
+        const projectTag = task.isRecipeTask && task.projectId ? `${resolveProjectName(task)}: ` : "";
+        const projectDisplay = projectTag.length > PROJECT_WIDTH
+            ? projectTag.slice(0, PROJECT_WIDTH - 3) + "..."
+            : projectTag.padEnd(PROJECT_WIDTH);
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        const recipeFg = isSelected ? theme.text.inverse : theme.accent.brand;
+        return (_jsxs(Box, { backgroundColor: isSelected ? (isFocused && navActive ? theme.bg.activeTask : isFocused ? theme.bg.hover : undefined) : undefined, children: [_jsx(Text, { color: recipeFg, children: recipeBadge }), _jsxs(Text, { color: fg, children: [projectDisplay, name] }), _jsx(Text, { color: fg, children: cmdDisplay }), _jsxs(Text, { color: fg, children: [chains, silent] })] }));
+    }
+    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 }) }), _jsx(InspectorField, { label: t("board.taskFieldSilent") + ": ", children: _jsx(Text, { color: task.silentChain ? theme.semantic.warning : theme.text.muted, children: task.silentChain ? t("board.silentChainYes") : t("board.silentChainNo") }) })] })] }));
+}
+export function TaskActionButtons(props) {
+    const { task, selectable, onAction } = props;
+    const isRecipe = task?.isRecipeTask === true;
+    const actions = isRecipe
+        ? [] // Recipe tasks are immutable — no actions allowed
+        : 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") }) }));
+    }
+    if (isRecipe) {
+        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("task.recipeImmutableShort") }) }));
+    }
+    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/widgets/log-modal/LogModal.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from "react";
+import { Box, Text, useInput, useStdout } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { formatDate } from "../../shared/ui/format.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+import { LOG_MODAL_LINES_MAX } from "../../shared/config/constants.js";
+import { appendClamped, clampLines } from "../../shared/utils/log-lines.js";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.js";
+function colorForLine(line, run) {
+    if (line.includes("[Run #"))
+        return theme.accent.loop;
+    if (line.startsWith("$ "))
+        return "#f0abfc";
+    if (line.startsWith("  cwd:"))
+        return theme.text.muted;
+    if (line.includes("--- Chain:"))
+        return theme.accent.task;
+    if (line.trimStart().startsWith("[exit")) {
+        const match = /\[exit\s+(\d+)/.exec(line);
+        const code = match ? Number(match[1]) : run.exitCode;
+        return code === 0 ? theme.semantic.success : theme.semantic.danger;
+    }
+    return theme.text.primary;
+}
+const MAX_VALUE_LENGTH = 60;
+function expandJsonLine(line) {
+    const trimmed = line.trim();
+    if (!trimmed.startsWith("{") || !trimmed.endsWith("}"))
+        return null;
+    let parsed;
+    try {
+        parsed = JSON.parse(trimmed);
+    }
+    catch {
+        return null;
+    }
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+        return null;
+    const lines = ["context: {"];
+    for (const key of Object.keys(parsed)) {
+        const value = parsed[key];
+        let display;
+        if (typeof value === "string") {
+            display = value.length > MAX_VALUE_LENGTH
+                ? `"${value.slice(0, MAX_VALUE_LENGTH)}..."`
+                : `"${value}"`;
+        }
+        else if (typeof value === "number" || typeof value === "boolean") {
+            display = String(value);
+        }
+        else if (value === null) {
+            display = "null";
+        }
+        else {
+            display = JSON.stringify(value);
+        }
+        lines.push(`  ${key}: ${display}`);
+    }
+    lines.push("}");
+    return lines;
+}
+export function LogModal(props) {
+    const [lines, setLines] = useState(() => clampLines(props.logLines, LOG_MODAL_LINES_MAX));
+    const [streaming, setStreaming] = useState(false);
+    const [searchMode, setSearchMode] = useState(false);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [follow, setFollow] = useState(true);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const injectedLogService = useInject(TYPES.LogService);
+    const logServiceRef = useRef(injectedLogService);
+    const logService = logServiceRef.current;
+    const { stdout } = useStdout();
+    const terminalHeight = stdout?.rows ?? 24;
+    const MAX_VISIBLE_LINES = Math.max(1, Math.floor(terminalHeight * 0.7) - 7);
+    useEffect(() => {
+        setLines(clampLines(props.logLines, LOG_MODAL_LINES_MAX));
+    }, [props.logLines]);
+    useEffect(() => {
+        if (!props.loopId)
+            return;
+        if (props.run.status !== "running")
+            return;
+        setStreaming(true);
+        const socket = logService.streamRunLog(props.loopId, props.run.runNumber, (line) => setLines((prev) => appendClamped(prev, line, LOG_MODAL_LINES_MAX)), () => setStreaming(false), () => setStreaming(false));
+        return () => {
+            socket.destroy();
+        };
+    }, [props.loopId, props.run.runNumber, props.run.status, logService]);
+    const filtered = searchQuery
+        ? lines.filter((l) => l.toLowerCase().includes(searchQuery.toLowerCase()))
+        : lines;
+    const totalLines = filtered.length;
+    const startIdx = follow
+        ? Math.max(0, totalLines - MAX_VISIBLE_LINES)
+        : scrollOffset;
+    const endIdx = startIdx + MAX_VISIBLE_LINES;
+    const visible = filtered.slice(startIdx, endIdx);
+    useInput((input, key) => {
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~. Must come
+        // before the escape check  the leading ESC trips key.escape and would
+        // close the modal before the paste is acknowledged. LogModal doesn't
+        // insert pastes, so just swallow the sequence.
+        if (input.includes("\x1b[200~")) {
+            return;
+        }
+        // Swallow SGR mouse sequences so they don't trigger key.escape
+        if (input.includes("[<")) {
+            return;
+        }
+        if (searchMode) {
+            if (key.escape || key.return) {
+                setSearchMode(false);
+                return;
+            }
+            if (key.backspace || key.delete) {
+                setSearchQuery((q) => q.slice(0, -1));
+                return;
+            }
+            if (input && !key.ctrl && input.length === 1 && input >= " " && input <= "~") {
+                setSearchQuery((q) => q + input);
+                return;
+            }
+            return;
+        }
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (input === "/") {
+            setSearchMode(true);
+            setSearchQuery("");
+            return;
+        }
+        if (key.ctrl && input === "x") {
+            copyToClipboard(lines.join("\n"));
+            props.onCopy?.();
+            return;
+        }
+        if (key.ctrl && input === "t") {
+            setFollow(false);
+            setScrollOffset(0);
+            return;
+        }
+        if (key.ctrl && input === "b") {
+            setFollow(true);
+            setScrollOffset(0);
+            return;
+        }
+        if (key.downArrow) {
+            const base = follow ? Math.max(0, totalLines - MAX_VISIBLE_LINES) : scrollOffset;
+            setFollow(false);
+            setScrollOffset(Math.min(base + 1, Math.max(0, totalLines - MAX_VISIBLE_LINES)));
+            return;
+        }
+        if (key.upArrow) {
+            const base = follow ? Math.max(0, totalLines - MAX_VISIBLE_LINES) : scrollOffset;
+            setFollow(false);
+            setScrollOffset(Math.max(0, base - 1));
+            return;
+        }
+    });
+    useMouseScroll({
+        onScrollUp: () => {
+            if (searchMode)
+                return;
+            const base = follow ? Math.max(0, totalLines - MAX_VISIBLE_LINES) : scrollOffset;
+            setFollow(false);
+            setScrollOffset(Math.max(0, base - 1));
+        },
+        onScrollDown: () => {
+            if (searchMode)
+                return;
+            const base = follow ? Math.max(0, totalLines - MAX_VISIBLE_LINES) : scrollOffset;
+            setFollow(false);
+            setScrollOffset(Math.min(base + 1, Math.max(0, totalLines - MAX_VISIBLE_LINES)));
+        },
+    });
+    const isLoading = props.loading || streaming;
+    const statusIcon = props.run.status === "running"
+        ? "\u21bb"
+        : props.run.exitCode === 0
+            ? "\u2713"
+            : "\u2717";
+    const statusColor = props.run.status === "running"
+        ? theme.semantic.warning
+        : props.run.exitCode === 0
+            ? theme.semantic.success
+            : theme.semantic.danger;
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { borderStyle: "round", borderColor: theme.accent.brand, backgroundColor: theme.bg.elevated, paddingX: 2, paddingY: 1, flexDirection: "column", width: "95%", height: "70%", children: [_jsx(Text, { color: theme.accent.brand, bold: true, children: `Run #${props.run.runNumber} - ${formatDate(props.run.startedAt)}` }), _jsxs(Box, { flexDirection: "column", marginTop: 1, flexGrow: 1, children: [_jsxs(Box, { marginBottom: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: statusColor, children: [statusIcon, " ", props.run.status === "running"
+                                            ? t("board.logModalRunning")
+                                            : t("board.logModalExit", { code: props.run.exitCode })] }), props.run.duration > 0 ? (_jsxs(Text, { color: theme.text.muted, children: [" ", t("board.logModalDuration"), " ", props.run.duration, "ms"] })) : null, _jsx(Text, { color: theme.text.muted, children: searchMode
+                                        ? `/${searchQuery}`
+                                        : `[${startIdx}-${endIdx}/${totalLines}]` })] }), searchMode ? (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.text.muted, children: "Search: " }), _jsxs(Text, { color: theme.text.primary, children: [searchQuery, "_"] })] })) : null, _jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: visible.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: isLoading
+                                    ? t("board.logModalLoading")
+                                    : searchQuery
+                                        ? t("board.logModalNoMatches")
+                                        : t("board.logModalEmpty") })) : (visible.map((line, i) => {
+                                const realIdx = startIdx + i;
+                                const expanded = expandJsonLine(line);
+                                if (expanded) {
+                                    return (_jsx(React.Fragment, { children: expanded.map((sub, j) => (_jsx(Text, { color: j === 0 ? theme.accent.task : theme.text.muted, wrap: "truncate", children: sub }, `${realIdx}-${j}`))) }, realIdx));
+                                }
+                                return (_jsx(Text, { color: colorForLine(line, props.run), wrap: "truncate", children: line }, realIdx));
+                            })) }), _jsx(Box, { marginTop: 1, justifyContent: "space-between", children: _jsx(Text, { color: theme.text.muted, children: searchMode
+                                    ? t("board.logModalSearchHint")
+                                    : t("board.logModalFooterHints") }) })] })] }) }));
+}

package/dist/widgets/loop-form/CreateForm.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useRef } from "react";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { t } from "../../shared/i18n/index.js";
+import { WizardForm } from "./WizardForm.js";
+import { TaskPickerModal } from "../../features/overlays/TaskPickerModal.js";
+import { SelectModal } from "../../shared/ui/SelectModal.js";
+import { CodeEditorModal } from "../../features/code-editor/CodeEditorModal.js";
+import { useCreateSteps } from "./useCreateSteps.js";
+import { useHandleComplete } from "./useHandleComplete.js";
+export function CreateView(props) {
+    const { mode, editId, initial, selectedTaskId, selectedTaskName, tasks, currentProjectId, onCancel, onDone, onChooseTask, } = props;
+    const loopService = useInject(TYPES.LoopService);
+    const [taskPickerOpen, setTaskPickerOpen] = useState(false);
+    const [openSelect, setOpenSelect] = useState(null);
+    const [commandEditorOpen, setCommandEditorOpen] = useState(false);
+    const [contextEditorOpen, setContextEditorOpen] = useState(false);
+    const [commandValue, setCommandValue] = useState(initial.command ?? "");
+    const [contextValue, setContextValue] = useState(initial.context ?? "");
+    const fieldCallbacksRef = useRef({});
+    const taskModeInitial = initial.taskMode === "existing" ? "Existing task" : "Inline command";
+    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 = useCreateSteps({
+        initial,
+        selectedTaskId,
+        resolvedTaskName,
+        commandValue,
+        contextValue,
+        projects: props.projects,
+        setOpenSelect,
+        setTaskPickerOpen,
+        setCommandEditorOpen,
+        setContextEditorOpen,
+        fieldCallbacksRef,
+        taskModeInitial,
+    });
+    const handleComplete = useHandleComplete({
+        selectedTaskId,
+        mode,
+        editId,
+        currentProjectId,
+        onDone,
+        commandValue,
+        projects: props.projects,
+        loopService,
+    });
+    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 || commandEditorOpen || contextEditorOpen }), 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, commandEditorOpen ? (_jsx(CodeEditorModal, { initialValue: commandValue, onSave: (v) => {
+                    setCommandValue(v);
+                    setCommandEditorOpen(false);
+                }, onCancel: () => setCommandEditorOpen(false) })) : null, contextEditorOpen ? (_jsx(CodeEditorModal, { initialValue: contextValue, onSave: (v) => {
+                    setContextValue(v);
+                    setContextEditorOpen(false);
+                }, onCancel: () => setContextEditorOpen(false) })) : null] }));
+}

package/dist/widgets/loop-form/TextField.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 "../../shared/ui/theme.js";
+export function TextField({ value, hint, isActive, }) {
+    const borderColor = isActive ? theme.accent.brand : theme.border.dim;
+    const backgroundColor = isActive ? theme.bg.input : undefined;
+    const showHint = value.length === 0;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, backgroundColor: backgroundColor, paddingLeft: 1, overflow: "hidden", width: "100%", children: [_jsx(Text, { color: showHint ? theme.text.muted : theme.text.primary, children: showHint ? hint : value }), isActive ? _jsx(Text, { inverse: true, children: " " }) : null] }));
+}

package/dist/widgets/loop-form/WizardForm.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { useLoopFormValidation } from "../../shared/hooks/useLoopFormValidation.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+import { sanitizePaste } from "../../shared/utils/paste.js";
+import { TextField } from "./TextField.js";
+export function WizardForm(props) {
+    const { title, steps, onComplete, onCancel, disabled = false } = props;
+    const [values, setValues] = useState({});
+    const [activeField, setActiveField] = useState(0);
+    const [validationErrors, setValidationErrors] = useState({});
+    const { validateField } = useLoopFormValidation();
+    const step = steps[activeField];
+    const valueFor = useCallback((s) => values[s.key] ?? s.defaultValue ?? "", [values]);
+    // Resolved values: raw values with defaults filled in.
+    // skip() functions must receive these so they work before the user touches a field.
+    const resolvedValues = useMemo(() => {
+        const result = {};
+        for (const s of steps)
+            result[s.key] = values[s.key] ?? s.defaultValue ?? "";
+        return result;
+    }, [steps, values]);
+    // Synchronous mirror of resolvedValues  updated inside setValue so
+    // findNextField sees the new value immediately, before React re-renders.
+    // Without this, onChange("Existing task") + onAdvance() run in the same
+    // tick: setValues queues a state update, but findNextField reads stale
+    // resolvedValues where taskMode is still "" → taskId is wrongly skipped.
+    const computeResolved = (raw) => {
+        const result = {};
+        for (const s of steps)
+            result[s.key] = raw[s.key] ?? s.defaultValue ?? "";
+        return result;
+    };
+    const resolvedValuesRef = useRef(computeResolved({}));
+    const setValue = useCallback((key, next) => {
+        resolvedValuesRef.current = computeResolved({ ...resolvedValuesRef.current, [key]: next });
+        setValues((prev) => ({ ...prev, [key]: next }));
+    }, [steps]);
+    const clearError = useCallback((key) => {
+        setValidationErrors((prev) => {
+            if (!(key in prev))
+                return prev;
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    }, []);
+    const setError = useCallback((key, msg) => {
+        setValidationErrors((prev) => ({ ...prev, [key]: msg }));
+    }, []);
+    const submit = useCallback(() => {
+        const errors = {};
+        for (const s of steps) {
+            if (s.skip && s.skip(resolvedValues))
+                continue;
+            const err = validateField(s.key, resolvedValues);
+            if (err)
+                errors[s.key] = err;
+            if (s.validate && !s.validate(valueFor(s))) {
+                errors[s.key] = s.validationError ?? t("wizard.validationError");
+            }
+        }
+        if (Object.keys(errors).length > 0) {
+            setValidationErrors(errors);
+            const firstErrorIdx = steps.findIndex((s) => s.key in errors);
+            if (firstErrorIdx >= 0)
+                setActiveField(firstErrorIdx);
+            return;
+        }
+        const missing = steps.find((s) => !s.skip?.(values) && s.required && !valueFor(s).trim());
+        if (missing) {
+            setActiveField(steps.indexOf(missing));
+            return;
+        }
+        const result = {};
+        for (const s of steps) {
+            if (s.skip && s.skip(resolvedValues))
+                continue;
+            result[s.key] = valueFor(s);
+        }
+        onComplete(result);
+    }, [steps, valueFor, onComplete, resolvedValues]);
+    const findNextField = useCallback((from, delta) => {
+        let next = from + delta;
+        const len = steps.length;
+        const vals = resolvedValuesRef.current;
+        while (next >= 0 && next < len) {
+            const candidate = steps[next];
+            if (!candidate.skip || !candidate.skip(vals))
+                return next;
+            next += delta;
+        }
+        return from;
+    }, [steps]);
+    const moveField = useCallback((delta) => {
+        if (step) {
+            const err = validateField(step.key, resolvedValues);
+            if (err) {
+                setError(step.key, err);
+                return;
+            }
+            if (step.validate) {
+                const value = valueFor(step);
+                if (!step.validate(value)) {
+                    setError(step.key, step.validationError ?? t("wizard.validationError"));
+                    return;
+                }
+            }
+            clearError(step.key);
+        }
+        const next = findNextField(activeField, delta);
+        if (next !== activeField)
+            setActiveField(next);
+    }, [step, valueFor, resolvedValues, activeField, findNextField, setError, clearError]);
+    const visibleSteps = steps.filter((s) => !s.skip || !s.skip(resolvedValues));
+    useInput((input, key) => {
+        if (input.includes("[<"))
+            return;
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        if (key.ctrl && input === "s") {
+            submit();
+            return;
+        }
+        if (key.ctrl && input === "y") {
+            if (step) {
+                copyToClipboard(valueFor(step));
+            }
+            return;
+        }
+        if (key.tab) {
+            moveField(key.shift ? -1 : 1);
+            return;
+        }
+        if (!step)
+            return;
+        if (step.renderCustom) {
+            // If onActivate is set, this is a "launch modal" field:
+            // Enter opens the modal, everything else is blocked.
+            if (step.onActivate) {
+                if (key.return)
+                    step.onActivate();
+            }
+            // If no onActivate, the renderCustom component owns its own useInput
+            // for text editing (Enter, arrows, backspace). WizardForm only handles
+            // Esc / Ctrl+S / Tab which are already caught above.
+            return;
+        }
+        // Text field editing
+        if (key.return) {
+            moveField(1);
+            return;
+        }
+        if (key.delete || key.backspace) {
+            setValue(step.key, valueFor(step).slice(0, -1));
+            return;
+        }
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~
+        if (input.includes("\x1b[200~")) {
+            setValue(step.key, valueFor(step) + sanitizePaste(input));
+            return;
+        }
+        // Multi-char containing CR/LF with no bracketed markers  ignore
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        // Multi-char printable input = unbracketed single-line paste (e.g. right-click)
+        if (input.length > 1 && !key.meta) {
+            setValue(step.key, valueFor(step) + sanitizePaste(input));
+            return;
+        }
+        if (input.length === 1 && input >= " " && input <= "~") {
+            setValue(step.key, valueFor(step) + input);
+        }
+    }, { isActive: !disabled });
+    const mid = Math.ceil(steps.length / 2);
+    const columns = [
+        [steps.slice(0, mid), 0],
+        [steps.slice(mid), mid],
+    ];
+    const filledCount = visibleSteps.filter((s) => valueFor(s).trim().length > 0).length;
+    function renderField(s, fieldIdx) {
+        const isActive = fieldIdx === activeField;
+        const val = valueFor(s);
+        if (s.skip && s.skip(resolvedValues))
+            return null;
+        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: isActive ? theme.accent.brand : theme.text.muted, bold: true, children: isActive ? "\u203a " : "  " }), _jsx(Text, { color: isActive ? theme.accent.brand : theme.text.secondary, bold: true, children: s.prompt }), s.required ? _jsx(Text, { color: theme.semantic.danger, children: "*" }) : null] }), _jsx(Box, { paddingLeft: 2, width: "100%", children: s.renderCustom ? (s.renderCustom({
+                        value: val,
+                        isActive,
+                        onChange: (next) => setValue(s.key, next),
+                        onAdvance: () => moveField(1),
+                    })) : (_jsx(TextField, { value: val, hint: s.hint, isActive: isActive })) }), validationErrors[s.key] ? (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: theme.semantic.danger, children: validationErrors[s.key] }) })) : null] }, s.key));
+    }
+    return (_jsxs(Box, { flexDirection: "column", backgroundColor: theme.bg.surface, paddingY: 1, paddingX: 2, flexGrow: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Text, { color: theme.accent.loop, bold: true, children: title }), _jsxs(Text, { color: theme.text.muted, children: [t("wizard.filled", { filled: filledCount, total: visibleSteps.length }), " . ", t("wizard.footerHints")] })] }), _jsx(Box, { flexDirection: "row", gap: 4, children: columns.map(([col, offset]) => (_jsx(Box, { flexDirection: "column", width: "50%", children: col.map((s, i) => renderField(s, i + offset)) }, offset))) })] }));
+}