loop-task 2.0.3 → 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] }));
 }

package/dist/tui/utils/syntax.js

@@ -0,0 +1,128 @@
+const OPERATORS = new Set(["|", "&&", "||", ";", ">", ">>", "<"]);
+/**
+ * Scan a command line into tokens, preserving whitespace runs as
+ * "whitespace" tokens. Used by highlightSegments for rendering.
+ */
+function scanTokens(line) {
+    if (!line)
+        return [];
+    const tokens = [];
+    let i = 0;
+    const len = line.length;
+    while (i < len) {
+        // Whitespace run — preserve it as a token
+        if (line[i] === " " || line[i] === "\t") {
+            let j = i;
+            while (j < len && (line[j] === " " || line[j] === "\t"))
+                j++;
+            tokens.push({ type: "whitespace", value: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Try to match multi-char operators first (&&, ||, >>)
+        let opMatch;
+        for (const op of OPERATORS) {
+            if (op.length > 1 && line.slice(i, i + op.length) === op) {
+                opMatch = op;
+                break;
+            }
+        }
+        if (opMatch) {
+            tokens.push({ type: "operator", value: opMatch });
+            i += opMatch.length;
+            continue;
+        }
+        // Try to match single-char operators
+        if (OPERATORS.has(line[i])) {
+            tokens.push({ type: "operator", value: line[i] });
+            i++;
+            continue;
+        }
+        // Quoted string
+        if (line[i] === '"' || line[i] === "'") {
+            const quote = line[i];
+            let j = i + 1;
+            while (j < len && line[j] !== quote) {
+                // Handle escaped quote
+                if (line[j] === "\\" && j + 1 < len) {
+                    j += 2;
+                }
+                else {
+                    j++;
+                }
+            }
+            // Include closing quote if found
+            if (j < len && line[j] === quote)
+                j++;
+            tokens.push({ type: "string", value: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Unquoted word — consume until whitespace or operator
+        let j = i;
+        while (j < len) {
+            if (line[j] === " " || line[j] === "\t")
+                break;
+            // Check for multi-char operator boundary
+            let isOpBoundary = false;
+            for (const op of OPERATORS) {
+                if (op.length > 1 && line.slice(j, j + op.length) === op) {
+                    isOpBoundary = true;
+                    break;
+                }
+            }
+            if (isOpBoundary)
+                break;
+            // Check for single-char operator boundary
+            if (OPERATORS.has(line[j])) {
+                break;
+            }
+            // Check for quoted string start
+            if (line[j] === '"' || line[j] === "'")
+                break;
+            j++;
+        }
+        const raw = line.slice(i, j);
+        tokens.push(classifyWord(raw));
+        i = j;
+    }
+    return tokens;
+}
+/**
+ * Tokenize a command line for syntax highlighting purposes.
+ * This is a cosmetic tokenizer — the real parsing for execution
+ * lives in src/loop-config.ts parseCommandLine.
+ *
+ * Whitespace is not returned (use highlightSegments for rendering
+ * that needs to preserve spacing).
+ */
+export function tokenizeCommand(line) {
+    return scanTokens(line).filter((tok) => tok.type !== "whitespace");
+}
+/**
+ * Produce colored segments for a command line, preserving whitespace
+ * exactly so token-by-token rendering does not collapse spaces.
+ */
+export function highlightSegments(line, colors, whitespaceColor) {
+    return scanTokens(line).map((tok) => ({
+        value: tok.value,
+        color: tok.type === "whitespace" ? whitespaceColor : colors[tok.type],
+    }));
+}
+function classifyWord(value) {
+    // Flag: --something (long flag)
+    if (value.startsWith("--") && value.length > 2) {
+        return { type: "flag", value };
+    }
+    // Flag: -f (single letter flag, not negative number like -1)
+    if (value.startsWith("-") &&
+        value.length === 2 &&
+        /[a-zA-Z]/.test(value[1])) {
+        return { type: "flag", value };
+    }
+    // Flag: -abc (combined short flags like -xyz)
+    if (value.startsWith("-") && value.length > 1 && /^[a-zA-Z]+$/.test(value.slice(1))) {
+        return { type: "flag", value };
+    }
+    return { type: "word", value };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loop-task",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Loop engineering toolkit. Run any command on a cadence, in the background, managed from a terminal board. Schedule tests, builds, syncs, or agent prompts.",
   "type": "module",
   "bin": {

package/dist/tui/components/InlineCommandEditor.js

@@ -1,143 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { Box, Text, useInput } from "ink";
-import { darkTheme as theme } from "../theme.js";
-import { t } from "../../i18n/index.js";
-import { copyToClipboard } from "../../shared/clipboard.js";
-import { sanitizePaste } from "../utils/paste.js";
-const MAX_VISIBLE = 8;
-export function InlineCommandEditor({ value, hint, isActive, onChange, }) {
-    const [lines, setLines] = useState(() => value ? value.split("\n") : [""]);
-    const [cursorRow, setCursorRow] = useState(0);
-    const [cursorCol, setCursorCol] = useState(0);
-    const emit = useCallback((nextLines) => {
-        onChange(nextLines.join("\n"));
-    }, [onChange]);
-    useInput((input, key) => {
-        // Ctrl+Y: copy full command text
-        if (key.ctrl && input === "y") {
-            copyToClipboard(value);
-            return;
-        }
-        // Let WizardForm handle these
-        if (key.ctrl || key.escape || key.tab)
-            return;
-        if (key.return) {
-            const next = [...lines];
-            const line = next[cursorRow] ?? "";
-            next.splice(cursorRow, 1, line.slice(0, cursorCol), line.slice(cursorCol));
-            setLines(next);
-            setCursorRow((r) => r + 1);
-            setCursorCol(0);
-            emit(next);
-            return;
-        }
-        if (key.upArrow) {
-            if (cursorRow > 0) {
-                setCursorRow((r) => r - 1);
-                setCursorCol((c) => Math.min(c, (lines[cursorRow - 1] ?? "").length));
-            }
-            return;
-        }
-        if (key.downArrow) {
-            if (cursorRow < lines.length - 1) {
-                setCursorRow((r) => r + 1);
-                setCursorCol((c) => Math.min(c, (lines[cursorRow + 1] ?? "").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;
-        }
-        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);
-                setLines(next);
-                setCursorCol((c) => c - 1);
-                emit(next);
-            }
-            else if (cursorRow > 0) {
-                const next = [...lines];
-                const prev = next[cursorRow - 1] ?? "";
-                const cur = next[cursorRow] ?? "";
-                next.splice(cursorRow - 1, 2, prev + cur);
-                setLines(next);
-                setCursorRow((r) => r - 1);
-                setCursorCol(prev.length);
-                emit(next);
-            }
-            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);
-                setLines(next);
-                setCursorCol((c) => c + pasted.length);
-                emit(next);
-            }
-            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) {
-            const pasted = sanitizePaste(input);
-            if (pasted) {
-                const next = [...lines];
-                const line = next[cursorRow] ?? "";
-                next[cursorRow] = line.slice(0, cursorCol) + pasted + line.slice(cursorCol);
-                setLines(next);
-                setCursorCol((c) => c + pasted.length);
-                emit(next);
-            }
-            return;
-        }
-        if (input.length === 1 && input >= " " && input <= "~") {
-            const next = [...lines];
-            const line = next[cursorRow] ?? "";
-            next[cursorRow] = line.slice(0, cursorCol) + input + line.slice(cursorCol);
-            setLines(next);
-            setCursorCol((c) => c + 1);
-            emit(next);
-        }
-    }, { isActive });
-    const scrollStart = Math.max(0, cursorRow - MAX_VISIBLE + 1);
-    const visible = lines.slice(scrollStart, scrollStart + MAX_VISIBLE);
-    const lineNumWidth = String(lines.length).length;
-    const isEmpty = lines.length === 1 && lines[0] === "";
-    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: isActive ? theme.accent.brand : theme.border.dim, backgroundColor: isActive ? theme.bg.input : undefined, width: "100%", paddingX: 1, children: [isEmpty && !isActive ? (_jsx(Text, { color: theme.text.muted, children: hint })) : (visible.map((line, visIdx) => {
-                const rowIdx = scrollStart + visIdx;
-                const isCursor = isActive && 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) : "";
-                    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));
-                }
-                return (_jsxs(Box, { children: [_jsxs(Text, { color: theme.text.muted, children: [lineNum, " "] }), _jsx(Text, { color: theme.text.secondary, children: line })] }, rowIdx));
-            })), isActive ? (_jsx(Box, { marginTop: 0, children: _jsx(Text, { color: theme.text.muted, children: t("cmdEditor.inlineHint") }) })) : null] }));
-}