loop-task 2.0.2 → 2.0.4

package/dist/config/constants.js

@@ -81,3 +81,13 @@ export const HTTP_API_HOST = "127.0.0.1";
 export const EXPORT_MAX_PREVIEW_LINES = 200;
 export const CTRL_SHORTCUT_EDIT = "Ctrl+E";
 export const CTRL_SHORTCUT_DELETE = "Ctrl+D";
+// ── Code editor constants ──────────────────────────────────────────
+export const CODE_EDITOR_MAX_VISIBLE = 2;
+export const CODE_EDITOR_MODAL_HEIGHT = 20;
+export const CODE_EDITOR_UNDO_LIMIT = 50;
+export const CODE_EDITOR_SYNTAX_COLORS = {
+    flag: "#38bdf8",
+    string: "#4ade80",
+    operator: "#facc15",
+    word: "#e5e7eb",
+};

package/dist/i18n/en.json

@@ -276,6 +276,18 @@
     "cmdEditor.hint": "enter: new line . ctrl+s: save . esc: cancel",
     "cmdEditor.lines": "lines",
     "cmdEditor.inlineHint": "enter: new line . ctrl+v: paste . ctrl+y: copy . tab: next field . ctrl+s: save",
+    "codeEditor.title": "Command Editor",
+    "codeEditor.hint": "ctrl+s save . esc cancel . ctrl+z/ctrl+shift+z undo/redo",
+    "codeEditor.buttonCopy": "Copy",
+    "codeEditor.buttonPaste": "Paste",
+    "codeEditor.buttonClear": "Clear",
+    "codeEditor.buttonSave": "Save",
+    "codeEditor.previewLabel": "Will execute:",
+    "codeEditor.previewTruncated": "…",
+    "codeEditor.emptyPlaceholder": "Enter command...",
+    "codeEditor.fieldHint": "press enter to open editor",
+    "codeEditor.copied": "Copied!",
+    "codeEditor.cleared": "Cleared",
     "board.exampleInterval": "30m",
     "board.exampleCommand": "opencode run \"search missing translations and translate them, 3 maximum\" --model \"opencode/big-pickle\"",
     "board.exampleDescription": "translate missing strings",

package/dist/loop-config.js

@@ -54,6 +54,65 @@ export function parseCommandLine(input) {
     }
     return tokens;
 }
+export function joinCommandLines(text) {
+    // Quote-aware split: don't split on newlines inside quoted strings
+    const segments = [];
+    let current = "";
+    let quote = null;
+    for (let i = 0; i < text.length; i += 1) {
+        const char = text[i];
+        if (quote) {
+            if (char === quote) {
+                quote = null;
+            }
+            else if (char === "\\" && quote === '"' && i + 1 < text.length) {
+                current += char + text[i + 1];
+                i += 1;
+                continue;
+            }
+            current += char;
+            continue;
+        }
+        if (char === '"' || char === "'") {
+            quote = char;
+            current += char;
+            continue;
+        }
+        if (char === "\n") {
+            segments.push(current);
+            current = "";
+            continue;
+        }
+        current += char;
+    }
+    segments.push(current);
+    // Join segments according to backslash-continuation rules:
+    // - Empty/whitespace-only segments are dropped
+    // - Segment ending with \: backslash consumed, joins to next with NO added space
+    // - Segment NOT ending with \: joins to next with a single space
+    // Leading whitespace on each line is trimmed (indentation); trailing whitespace
+    // before \ is preserved (it's part of the content — e.g. separates tokens).
+    let result = "";
+    let prevContinued = false; // true if previous segment ended with \
+    for (const seg of segments) {
+        const trimmed = seg.trim();
+        if (trimmed === "")
+            continue;
+        const endsBackslash = trimmed.endsWith("\\");
+        const content = endsBackslash ? trimmed.slice(0, -1) : trimmed;
+        if (result === "") {
+            result = content;
+        }
+        else if (prevContinued) {
+            result += content;
+        }
+        else {
+            result += " " + content;
+        }
+        prevContinued = endsBackslash;
+    }
+    return result;
+}
 export function buildLoopOptions(intervalHuman, input = {}) {
     const command = input.command ?? "";
     const commandArgs = input.commandArgs ?? [];

package/dist/shared/useUndoRedo.js

@@ -0,0 +1,79 @@
+import { useState, useRef, useCallback } from "react";
+/**
+ * Pure undo/redo stack logic — exported for direct unit testing
+ * without needing React DOM or renderHook.
+ */
+export class UndoRedoStack {
+    value;
+    limit;
+    history = [];
+    future = [];
+    constructor(value, limit = 50) {
+        this.value = value;
+        this.limit = limit;
+    }
+    get canUndo() {
+        return this.history.length > 0;
+    }
+    get canRedo() {
+        return this.future.length > 0;
+    }
+    setValue(next) {
+        if (next === this.value)
+            return false;
+        this.history.push(this.value);
+        if (this.history.length > this.limit) {
+            this.history.shift();
+        }
+        this.future = [];
+        this.value = next;
+        return true;
+    }
+    undo() {
+        if (this.history.length === 0)
+            return false;
+        this.future.push(this.value);
+        this.value = this.history.pop();
+        return true;
+    }
+    redo() {
+        if (this.future.length === 0)
+            return false;
+        this.history.push(this.value);
+        this.value = this.future.pop();
+        return true;
+    }
+}
+export function useUndoRedo(initial, limit = 50) {
+    const [value, setValueState] = useState(initial);
+    const stackRef = useRef(new UndoRedoStack(initial, limit));
+    const setValue = useCallback((next) => {
+        setValueState((prev) => {
+            if (stackRef.current.setValue(next))
+                return next;
+            return prev;
+        });
+    }, [limit]);
+    const undo = useCallback(() => {
+        setValueState((prev) => {
+            if (stackRef.current.undo())
+                return stackRef.current.value;
+            return prev;
+        });
+    }, []);
+    const redo = useCallback(() => {
+        setValueState((prev) => {
+            if (stackRef.current.redo())
+                return stackRef.current.value;
+            return prev;
+        });
+    }, []);
+    return {
+        value,
+        setValue,
+        undo,
+        redo,
+        canUndo: stackRef.current.canUndo,
+        canRedo: stackRef.current.canRedo,
+    };
+}

package/dist/tui/components/CodeEditorModal.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useCallback, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { useUndoRedo } from "../../shared/useUndoRedo.js";
+import { highlightSegments } from "../utils/syntax.js";
+import { joinCommandLines } from "../../loop-config.js";
+import { copyToClipboard, readFromClipboard } from "../../shared/clipboard.js";
+import { sanitizePaste } from "../utils/paste.js";
+import { CODE_EDITOR_MODAL_HEIGHT, CODE_EDITOR_UNDO_LIMIT, CODE_EDITOR_SYNTAX_COLORS, } from "../../config/constants.js";
+// Lines available for the editor content area:
+// total height - title row - preview row - buttons row - 2 padding = -5
+const EDITOR_VISIBLE_LINES = CODE_EDITOR_MODAL_HEIGHT - 5;
+export function CodeEditorModal(props) {
+    const { initialValue, onSave, onCancel } = props;
+    const { value, setValue, undo, redo } = useUndoRedo(initialValue, CODE_EDITOR_UNDO_LIMIT);
+    const [cursorRow, setCursorRow] = useState(() => {
+        const lines = initialValue.split("\n");
+        return Math.max(0, lines.length - 1);
+    });
+    const [cursorCol, setCursorCol] = useState(() => {
+        const lines = initialValue.split("\n");
+        return (lines[lines.length - 1] ?? "").length;
+    });
+    const [flashMsg, setFlashMsg] = useState(null);
+    const lines = useMemo(() => (value ? value.split("\n") : [""]), [value]);
+    const lineCount = lines.length;
+    const lineNumWidth = String(lineCount).length;
+    // Flash message auto-clear
+    React.useEffect(() => {
+        if (flashMsg) {
+            const timer = setTimeout(() => setFlashMsg(null), 1500);
+            return () => clearTimeout(timer);
+        }
+    }, [flashMsg]);
+    // Scroll: keep cursor visible in the editor area
+    const scrollStart = useMemo(() => {
+        if (cursorRow < EDITOR_VISIBLE_LINES)
+            return 0;
+        return cursorRow - EDITOR_VISIBLE_LINES + 1;
+    }, [cursorRow]);
+    const visibleLines = useMemo(() => lines.slice(scrollStart, scrollStart + EDITOR_VISIBLE_LINES), [lines, scrollStart]);
+    // ---- Helper: apply a text mutation via setValue and update cursor ----
+    const applyMutation = useCallback((nextLines, newCursorRow, newCursorCol) => {
+        setValue(nextLines.join("\n"));
+        setCursorRow(newCursorRow);
+        setCursorCol(newCursorCol);
+    }, [setValue]);
+    // ---- Keyboard handling ----
+    useInput((input, key) => {
+        // Esc → cancel
+        if (key.escape) {
+            onCancel();
+            return;
+        }
+        // Ctrl+S → save
+        if (key.ctrl && input === "s") {
+            onSave(value);
+            return;
+        }
+        // Ctrl+Z → undo
+        if (key.ctrl && !key.shift && input === "z") {
+            undo();
+            return;
+        }
+        // Ctrl+Shift+Z → redo
+        if (key.ctrl && key.shift && input === "z") {
+            redo();
+            return;
+        }
+        // Ctrl+Y → copy (NOT redo)
+        if (key.ctrl && input === "y") {
+            copyToClipboard(value);
+            setFlashMsg(t("codeEditor.copied"));
+            return;
+        }
+        // Ctrl+V → paste from clipboard
+        if (key.ctrl && input === "v") {
+            const clip = readFromClipboard();
+            if (clip) {
+                const pasted = sanitizePaste(clip);
+                if (pasted) {
+                    const next = [...lines];
+                    const line = next[cursorRow] ?? "";
+                    next[cursorRow] =
+                        line.slice(0, cursorCol) + pasted + line.slice(cursorCol);
+                    applyMutation(next, cursorRow, cursorCol + pasted.length);
+                }
+            }
+            return;
+        }
+        // Shift+C → copy, Shift+V → paste, Shift+X → clear (button shortcuts)
+        if (key.shift && !key.ctrl && !key.meta && input === "C") {
+            copyToClipboard(value);
+            setFlashMsg(t("codeEditor.copied"));
+            return;
+        }
+        if (key.shift && !key.ctrl && !key.meta && input === "V") {
+            const clip = readFromClipboard();
+            if (clip) {
+                const pasted = sanitizePaste(clip);
+                if (pasted) {
+                    const next = [...lines];
+                    const line = next[cursorRow] ?? "";
+                    next[cursorRow] =
+                        line.slice(0, cursorCol) + pasted + line.slice(cursorCol);
+                    applyMutation(next, cursorRow, cursorCol + pasted.length);
+                }
+            }
+            return;
+        }
+        if (key.shift && !key.ctrl && !key.meta && input === "X") {
+            setValue("");
+            setCursorRow(0);
+            setCursorCol(0);
+            setFlashMsg(t("codeEditor.cleared"));
+            return;
+        }
+        // Enter → insert newline at cursor
+        if (key.return) {
+            const next = [...lines];
+            const line = next[cursorRow] ?? "";
+            next.splice(cursorRow, 1, line.slice(0, cursorCol), line.slice(cursorCol));
+            applyMutation(next, cursorRow + 1, 0);
+            return;
+        }
+        // Arrow keys
+        if (key.upArrow) {
+            if (cursorRow > 0) {
+                const newRow = cursorRow - 1;
+                setCursorRow(newRow);
+                setCursorCol((c) => Math.min(c, (lines[newRow] ?? "").length));
+            }
+            return;
+        }
+        if (key.downArrow) {
+            if (cursorRow < lines.length - 1) {
+                const newRow = cursorRow + 1;
+                setCursorRow(newRow);
+                setCursorCol((c) => Math.min(c, (lines[newRow] ?? "").length));
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            if (cursorCol > 0) {
+                setCursorCol((c) => c - 1);
+            }
+            else if (cursorRow > 0) {
+                setCursorRow((r) => r - 1);
+                setCursorCol((lines[cursorRow - 1] ?? "").length);
+            }
+            return;
+        }
+        if (key.rightArrow) {
+            const curLen = (lines[cursorRow] ?? "").length;
+            if (cursorCol < curLen) {
+                setCursorCol((c) => c + 1);
+            }
+            else if (cursorRow < lines.length - 1) {
+                setCursorRow((r) => r + 1);
+                setCursorCol(0);
+            }
+            return;
+        }
+        // Backspace / Delete
+        if (key.backspace || key.delete) {
+            if (cursorCol > 0) {
+                const next = [...lines];
+                const line = next[cursorRow] ?? "";
+                next[cursorRow] =
+                    line.slice(0, cursorCol - 1) + line.slice(cursorCol);
+                applyMutation(next, cursorRow, cursorCol - 1);
+            }
+            else if (cursorRow > 0) {
+                const next = [...lines];
+                const prev = next[cursorRow - 1] ?? "";
+                const cur = next[cursorRow] ?? "";
+                next.splice(cursorRow - 1, 2, prev + cur);
+                applyMutation(next, cursorRow - 1, prev.length);
+            }
+            return;
+        }
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~
+        if (input.includes("\x1b[200~")) {
+            const pasted = sanitizePaste(input);
+            if (pasted) {
+                const next = [...lines];
+                const line = next[cursorRow] ?? "";
+                next[cursorRow] =
+                    line.slice(0, cursorCol) + pasted + line.slice(cursorCol);
+                applyMutation(next, cursorRow, cursorCol + pasted.length);
+            }
+            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
+        if (input.length > 1 && !key.meta) {
+            const pasted = sanitizePaste(input);
+            if (pasted) {
+                const next = [...lines];
+                const line = next[cursorRow] ?? "";
+                next[cursorRow] =
+                    line.slice(0, cursorCol) + pasted + line.slice(cursorCol);
+                applyMutation(next, cursorRow, cursorCol + pasted.length);
+            }
+            return;
+        }
+        // Single printable char → insert at cursor
+        if (input.length === 1 && input >= " " && input <= "~") {
+            const next = [...lines];
+            const line = next[cursorRow] ?? "";
+            next[cursorRow] =
+                line.slice(0, cursorCol) + input + line.slice(cursorCol);
+            applyMutation(next, cursorRow, cursorCol + 1);
+        }
+    }, { isActive: true });
+    // ---- Live preview footer ----
+    const joined = joinCommandLines(value);
+    const innerWidth = 58;
+    const truncatedPreview = joined.length > innerWidth
+        ? joined.slice(0, innerWidth - 1) + t("codeEditor.previewTruncated")
+        : joined;
+    const accent = theme.accent.brand;
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 60, height: CODE_EDITOR_MODAL_HEIGHT, flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: accent, paddingX: 1, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: accent, bold: true, children: t("codeEditor.title") }), _jsxs(Text, { color: theme.text.muted, children: [lineCount, " ", t("cmdEditor.lines")] })] }), _jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: visibleLines.map((line, visIdx) => {
+                        const rowIdx = scrollStart + visIdx;
+                        const isCursor = rowIdx === cursorRow;
+                        const lineNum = String(rowIdx + 1).padStart(lineNumWidth, " ");
+                        if (isCursor) {
+                            const before = line.slice(0, cursorCol);
+                            const cur = cursorCol < line.length ? line[cursorCol] : " ";
+                            const after = cursorCol < line.length ? line.slice(cursorCol + 1) : "";
+                            // Cursor line: render with cursor (no syntax highlight on cursor line)
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: theme.text.muted, children: [lineNum, " "] }), _jsx(Text, { color: theme.text.primary, children: before }), _jsx(Text, { inverse: true, children: cur }), _jsx(Text, { color: theme.text.primary, children: after })] }, rowIdx));
+                        }
+                        // Non-cursor line: syntax highlighted (whitespace preserved)
+                        const segments = highlightSegments(line, CODE_EDITOR_SYNTAX_COLORS, theme.text.muted);
+                        if (segments.length === 0) {
+                            return (_jsxs(Box, { children: [_jsxs(Text, { color: theme.text.muted, children: [lineNum, " "] }), _jsx(Text, { children: " " })] }, rowIdx));
+                        }
+                        return (_jsxs(Box, { children: [_jsxs(Text, { color: theme.text.muted, children: [lineNum, " "] }), segments.map((seg, ti) => (_jsx(Text, { color: seg.color, children: seg.value }, ti)))] }, rowIdx));
+                    }) }), _jsxs(Box, { children: [_jsxs(Text, { color: theme.text.muted, children: [t("codeEditor.previewLabel"), " "] }), _jsx(Text, { color: theme.text.secondary, children: truncatedPreview || t("codeEditor.emptyPlaceholder") })] }), _jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { gap: 2, children: [_jsx(Text, { color: theme.accent.brand, children: t("codeEditor.buttonCopy") }), _jsx(Text, { color: theme.text.muted, children: "shift+c" }), _jsx(Text, { color: theme.accent.brand, children: t("codeEditor.buttonPaste") }), _jsx(Text, { color: theme.text.muted, children: "shift+v" }), _jsx(Text, { color: theme.accent.brand, children: t("codeEditor.buttonClear") }), _jsx(Text, { color: theme.text.muted, children: "shift+x" })] }), flashMsg ? (_jsx(Text, { color: theme.semantic.success, children: flashMsg })) : null] }), _jsx(Box, { children: _jsx(Text, { color: theme.text.muted, children: t("codeEditor.hint") }) })] }) }));
+}

package/dist/tui/components/CodeEditorPreview.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { CODE_EDITOR_MAX_VISIBLE } from "../../config/constants.js";
+export function CodeEditorPreview(props) {
+    const { value, hint, isActive, onActivate } = props;
+    const lines = value ? value.split("\n") : [];
+    const visibleLines = lines.slice(0, CODE_EDITOR_MAX_VISIBLE);
+    const truncated = lines.length > CODE_EDITOR_MAX_VISIBLE;
+    const hasValue = lines.length > 0;
+    void onActivate; // consumed by parent via useInput when active
+    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%", flexDirection: "column", children: hasValue ? (_jsxs(_Fragment, { children: [visibleLines.map((line, i) => (_jsx(Text, { color: theme.text.primary, children: line }, i))), truncated ? (_jsx(Text, { color: theme.text.muted, children: t("codeEditor.previewTruncated") })) : null] })) : (_jsx(Text, { color: theme.text.muted, children: hint })) }), isActive ? (_jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: theme.accent.brand, children: "› " }), _jsx(Text, { color: theme.text.muted, children: t("codeEditor.fieldHint") })] })) : null] }));
+}

package/dist/tui/components/CreateForm.js

@@ -5,14 +5,16 @@ 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 { CodeEditorPreview } from "./CodeEditorPreview.js";
+import { CodeEditorModal } from "./CodeEditorModal.js";
 import { parseDuration } from "../../duration.js";
-import { parseCommandLine } from "../../loop-config.js";
+import { parseCommandLine, joinCommandLines } 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 [commandEditorOpen, setCommandEditorOpen] = useState(false);
     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 —
@@ -74,11 +76,8 @@ export function CreateView(props) {
                 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);
-                    } })),
+                onActivate: () => setCommandEditorOpen(true),
+                renderCustom: ({ isActive }) => (_jsx(CodeEditorPreview, { value: commandValue, hint: t("wizard.commandHint"), isActive: isActive, onActivate: () => setCommandEditorOpen(true) })),
             },
             {
                 key: "runNow",
@@ -153,7 +152,7 @@ export function CreateView(props) {
             return;
         const cmd = isExistingTask
             ? ""
-            : cmdValue.split("\n").map((l) => l.trim()).filter(Boolean).join(" ");
+            : joinCommandLines(cmdValue);
         let cmdOnly = "";
         let args = [];
         if (cmd.trim()) {
@@ -212,12 +211,15 @@ export function CreateView(props) {
     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) => {
+    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 }), 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] }));
+                }, onClose: () => setOpenSelect(null) })) : null, commandEditorOpen ? (_jsx(CodeEditorModal, { initialValue: commandValue, onSave: (v) => {
+                    setCommandValue(v);
+                    setCommandEditorOpen(false);
+                }, onCancel: () => setCommandEditorOpen(false) })) : null] }));
 }

package/dist/tui/components/TaskForm.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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 { CodeEditorPreview } from "./CodeEditorPreview.js";
+import { CodeEditorModal } from "./CodeEditorModal.js";
 import { createTask, updateTask, listTasks } from "../daemon.js";
 import crypto from "node:crypto";
 import { t } from "../../i18n/index.js";
+import { joinCommandLines } from "../../loop-config.js";
 // ── Utility ─────────────────────────────────────────────────────────
 function parseArgs(cmd) {
     const tokens = [];
@@ -29,6 +31,7 @@ export function TaskForm(props) {
     }, []);
     const chainOptions = useMemo(() => [t("wizard.chainNone"), ...tasks.map((task) => task.name)], [tasks]);
     const chainSelectOptions = useMemo(() => chainOptions.map((v) => ({ value: v, label: v })), [chainOptions]);
+    const [commandEditorOpen, setCommandEditorOpen] = useState(false);
     const [openChainField, setOpenChainField] = useState(null);
     const chainFieldsRef = useRef({});
     const resolveChainId = useCallback((val) => {
@@ -60,10 +63,8 @@ export function TaskForm(props) {
                 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);
-                    } })),
+                onActivate: () => setCommandEditorOpen(true),
+                renderCustom: ({ isActive }) => (_jsx(CodeEditorPreview, { value: commandValue, hint: t("wizard.commandHint"), isActive: isActive, onActivate: () => setCommandEditorOpen(true) })),
             },
             {
                 key: "onSuccess",
@@ -94,11 +95,7 @@ export function TaskForm(props) {
     }, [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(" ");
+        const rawCommand = joinCommandLines(commandValue);
         if (!name || !rawCommand)
             return;
         const onSuccessTaskId = resolveChainId(values.onSuccess ?? "");
@@ -126,9 +123,12 @@ export function TaskForm(props) {
     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) => {
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: title, steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: openChainField !== null || commandEditorOpen }), 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] }));
+                }, onClose: () => setOpenChainField(null) })) : null, commandEditorOpen ? (_jsx(CodeEditorModal, { initialValue: commandValue, onSave: (v) => {
+                    setCommandValue(v);
+                    setCommandEditorOpen(false);
+                }, onCancel: () => setCommandEditorOpen(false) })) : null] }));
 }