loop-task 1.5.5 → 2.0.0

package/dist/tui/components/ExportModal.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { t } from "../../i18n/index.js";
+import { EXPORT_MAX_PREVIEW_LINES } from "../../config/constants.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+const VISIBLE_LINES = 20;
+export function ExportModal(props) {
+    const lines = props.json.split("\n");
+    const totalLines = lines.length;
+    const truncated = totalLines > EXPORT_MAX_PREVIEW_LINES;
+    const displayLines = truncated ? lines.slice(0, EXPORT_MAX_PREVIEW_LINES) : lines;
+    const maxScroll = Math.max(0, displayLines.length - VISIBLE_LINES);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    useInput((input, key) => {
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (key.downArrow) {
+            setScrollOffset((o) => Math.min(o + 1, maxScroll));
+            return;
+        }
+        if (key.upArrow) {
+            setScrollOffset((o) => Math.max(0, o - 1));
+            return;
+        }
+        if (input === "c" && !key.ctrl) {
+            copyToClipboard(props.json);
+            props.onCopy?.();
+            return;
+        }
+    });
+    const visible = displayLines.slice(scrollOffset, scrollOffset + VISIBLE_LINES);
+    return (_jsxs(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: theme.accent.brand, paddingX: 2, paddingY: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.accent.brand, bold: true, children: t("export.modalTitle") }) }), props.error ? (_jsx(Box, { flexGrow: 1, children: _jsx(Text, { color: theme.semantic.danger, children: t("export.error", { message: props.error }) }) })) : (_jsxs(_Fragment, { children: [props.filePath ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.accent.brand, children: t("export.filePath", { path: props.filePath }) }) })) : null, _jsxs(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", children: [visible.map((line, i) => (_jsx(Text, { color: theme.text.primary, wrap: "truncate", children: line }, scrollOffset + i))), truncated ? (_jsx(Text, { color: theme.text.muted, children: t("export.truncated", { total: String(totalLines) }) })) : null] })] })), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsx(Text, { color: theme.text.muted, children: t("export.hint") }), _jsxs(Text, { color: theme.text.muted, children: ["[", scrollOffset, "-", scrollOffset + visible.length, "/", totalLines, "]"] })] })] }));
+}

package/dist/tui/components/FilterBar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, 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 { FocusableButton } from "./FocusableButton.js";
+import { FocusableInput } from "./FocusableInput.js";
+export function FilterBar(props) {
+    const { filters, sort, onStatusCycle, onSortCycle, onSelectProject, currentProjectName, onQueryChange, onSearchDismiss, } = props;
+    const statusLabel = `${t("board.statusFilterTitle")} ${filters.status}`;
+    const sortLabel = `${t("board.sortTitle")} ${sort}`;
+    const projectLabel = currentProjectName ?? t("project.showAll");
+    return (_jsxs(Box, { flexDirection: "column", height: 4, children: [_jsxs(Box, { children: [_jsx(Box, { width: currentProjectName ? 36 : 48, children: _jsx(FocusableInput, { value: filters.query, onChange: onQueryChange, onSubmit: onSearchDismiss, placeholder: t("board.searchPlaceholder") }) }), onSelectProject ? (_jsx(Box, { marginLeft: 1, children: _jsx(FocusableButton, { label: projectLabel, color: theme.accent.project, onPress: onSelectProject }) })) : null, _jsx(Box, { marginLeft: 1, children: _jsx(FocusableButton, { label: statusLabel, color: theme.accent.focus, onPress: onStatusCycle }) }), _jsx(Box, { marginLeft: 1, children: _jsx(FocusableButton, { label: sortLabel, color: theme.accent.focus, onPress: onSortCycle }) })] }), _jsx(Box, { children: _jsx(Text, { color: theme.text.muted, children: t("board.searchEmpty") }) })] }));
+}

package/dist/tui/components/FocusableButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useFocus, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+export function FocusableButton(props) {
+    const { label, color, onPress, variant = "default" } = props;
+    const { isFocused } = useFocus();
+    useInput((_input, key) => {
+        if (key.return) {
+            onPress?.();
+        }
+    }, { isActive: isFocused });
+    const accent = variant === "danger" ? theme.semantic.danger : color;
+    const textColor = isFocused ? theme.text.inverse : accent;
+    const indicator = isFocused ? "› " : "  ";
+    return (_jsx(Box, { backgroundColor: isFocused ? theme.bg.active : undefined, paddingX: 1, marginRight: 1, flexShrink: 0, children: _jsx(Text, { color: textColor, bold: true, children: indicator + label }) }));
+}

package/dist/tui/components/FocusableInput.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { sanitizePaste } from "../utils/paste.js";
+export function FocusableInput(props) {
+    const { value, onChange, onSubmit } = props;
+    const placeholder = props.placeholder ?? "type here...";
+    const { isFocused } = useFocus();
+    const [cursorOffset, setCursorOffset] = useState(value.length);
+    const insertText = useCallback((text) => {
+        const before = value.slice(0, cursorOffset);
+        const after = value.slice(cursorOffset);
+        const next = before + text + after;
+        onChange(next);
+        setCursorOffset(before.length + text.length);
+    }, [value, cursorOffset, onChange]);
+    useInput((input, key) => {
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~
+        if (input.includes("\x1b[200~")) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        if (key.ctrl || key.escape)
+            return;
+        // Multi-char containing CR/LF with no bracketed markers — ignore
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        if (key.return) {
+            onSubmit?.(value);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            if (cursorOffset > 0) {
+                const next = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset);
+                onChange(next);
+                setCursorOffset((c) => c - 1);
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            if (cursorOffset > 0)
+                setCursorOffset((c) => c - 1);
+            return;
+        }
+        if (key.rightArrow) {
+            if (cursorOffset < value.length)
+                setCursorOffset((c) => c + 1);
+            return;
+        }
+        // Multi-char printable input = unbracketed single-line paste (e.g. right-click)
+        if (input.length > 1 && !key.meta) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        // Single printable char
+        if (input.length === 1 && input >= " " && input <= "~") {
+            insertText(input);
+        }
+    }, { isActive: isFocused });
+    const borderColor = isFocused ? theme.accent.brand : theme.border.dim;
+    const backgroundColor = isFocused ? theme.bg.input : undefined;
+    const showPlaceholder = value.length === 0;
+    // Render value with cursor
+    const before = value.slice(0, cursorOffset);
+    const cursorChar = cursorOffset < value.length ? value[cursorOffset] : " ";
+    const after = cursorOffset < value.length ? value.slice(cursorOffset + 1) : "";
+    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, backgroundColor: backgroundColor, paddingLeft: 1, overflow: "hidden", children: [showPlaceholder ? (_jsx(Text, { color: theme.text.muted, children: placeholder })) : (_jsxs(Text, { color: theme.text.primary, children: [before, _jsx(Text, { inverse: true, children: cursorChar }), after] })), isFocused && showPlaceholder ? _jsx(Text, { inverse: true, children: " " }) : null] }));
+}

package/dist/tui/components/FocusableList.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+export function FocusableList(props) {
+    const { items, renderItem, onSelect, onActivate, selectedIndex, isFocused, navActive = true, limit, } = props;
+    const n = items.length;
+    useInput((input, key) => {
+        if (n === 0)
+            return;
+        if (key.upArrow || input === "k") {
+            const next = selectedIndex <= 0 ? n - 1 : selectedIndex - 1;
+            onSelect(next);
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            const next = selectedIndex >= n - 1 ? 0 : selectedIndex + 1;
+            onSelect(next);
+            return;
+        }
+        if (key.return) {
+            onActivate(selectedIndex);
+            return;
+        }
+    }, { isActive: isFocused && navActive });
+    const { visible, localSelected } = useMemo(() => {
+        if (n === 0)
+            return { visible: [], localSelected: 0 };
+        const eff = Math.min(limit, n);
+        if (n <= eff) {
+            return { visible: items, localSelected: selectedIndex };
+        }
+        const offset = Math.floor(eff / 2);
+        const r = (((selectedIndex - offset) % n) + n) % n;
+        const rotated = [...items.slice(r), ...items.slice(0, r)];
+        return { visible: rotated.slice(0, eff), localSelected: offset };
+    }, [items, selectedIndex, limit, n]);
+    if (n === 0) {
+        throw new Error("FocusableList requires at least one item");
+    }
+    return (_jsx(Box, { flexDirection: "column", children: visible.map((item, i) => {
+            const isSelected = i === localSelected;
+            const indicator = isSelected ? "\u203a " : "  ";
+            return (_jsxs(Box, { backgroundColor: isSelected ? (isFocused && navActive ? theme.bg.active : isFocused ? theme.bg.hover : undefined) : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: indicator }), renderItem(item, isSelected)] }, i));
+        }) }));
+}

package/dist/tui/components/FocusableSearchSelect.js

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

package/dist/tui/components/Footer.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+function modeBadgeColor(mode) {
+    switch (mode) {
+        case "normal": return "#38bdf8";
+        case "search": return "#38bdf8";
+        case "create": return "#38bdf8";
+        case "task": return "#a78bfa";
+        case "help": return "#38bdf8";
+        case "confirm": return "#f87171";
+        case "projects": return "#34d399";
+    }
+}
+function modeLabelText(mode) {
+    switch (mode) {
+        case "normal": return "Loops";
+        case "search": return "Search";
+        case "create": return "Create";
+        case "task": return "Tasks";
+        case "help": return "Help";
+        case "confirm": return "Confirm";
+        case "projects": return "Projects";
+    }
+}
+function modeHints(mode) {
+    switch (mode) {
+        case "normal": return "Tab:panel  /:search  h:help  Ctrl+C:quit";
+        case "search": return "Enter:apply  Esc:cancel";
+        case "create": return "Tab:next  Enter:save  Esc:cancel";
+        case "task": return "Tab:next  Enter:save  Esc:cancel";
+        case "help": return "Esc:close";
+        case "confirm": return "arrows:choose  Enter:confirm  y/n  Esc:cancel";
+        case "projects": return "Tab:navigate  n:new  e:edit  d:delete  Esc:back";
+    }
+}
+export function Footer(props) {
+    const badgeColor = modeBadgeColor(props.mode);
+    const label = modeLabelText(props.mode);
+    const hints = modeHints(props.mode);
+    return (_jsxs(Box, { height: 1, justifyContent: "space-between", children: [_jsx(Box, { children: _jsxs(Text, { backgroundColor: badgeColor, color: theme.bg.base, bold: true, children: [" ", label, " "] }) }), _jsx(Box, { children: _jsx(Text, { color: theme.text.muted, children: hints }) })] }));
+}

package/dist/tui/components/Header.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useStdout } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { HEADER_COMPACT_WIDTH } from "../../config/constants.js";
+import { t } from "../../i18n/index.js";
+import { TabBar } from "./TabBar.js";
+function daemonSymbol(status) {
+    switch (status) {
+        case "connected": return "\u25CF";
+        case "starting": return "\u25CB";
+        case "error": return "\u2717";
+    }
+}
+function daemonColor(status) {
+    switch (status) {
+        case "connected": return theme.semantic.success;
+        case "starting": return theme.semantic.warning;
+        case "error": return theme.semantic.danger;
+    }
+}
+function daemonText(status) {
+    switch (status) {
+        case "connected": return "connected";
+        case "starting": return "starting";
+        case "error": return "offline";
+    }
+}
+export function Header(props) {
+    const { stdout } = useStdout();
+    const width = stdout?.columns ?? 80;
+    const compact = width < HEADER_COMPACT_WIDTH;
+    const entries = [
+        { label: t("board.runningLabel"), value: props.counts.running, color: theme.semantic.success },
+        { label: t("board.waitingLabel"), value: props.counts.waiting, color: theme.accent.loop },
+        { label: t("board.pausedLabel"), value: props.counts.paused, color: theme.semantic.warning },
+        { label: t("board.idleLabel"), value: props.counts.idle, color: theme.semantic.idle },
+    ];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: theme.accent.brand, bold: true, children: t("board.appName") }), _jsx(Text, { color: daemonColor(props.daemonStatus), children: daemonSymbol(props.daemonStatus) }), _jsx(Text, { color: theme.text.secondary, children: daemonText(props.daemonStatus) }), !compact && entries.map((e) => e.value > 0 ? (_jsxs(React.Fragment, { children: [_jsx(Text, { color: theme.text.muted, children: e.label }), _jsx(Text, { color: e.color, children: e.value })] }, e.label)) : null)] }), _jsx(TabBar, { activeTab: props.activeTab, onTabChange: props.onTabChange, counts: props.tabCounts })] }), _jsx(Box, { children: _jsx(Text, { color: theme.border.default, children: "\u2500".repeat(width) }) })] }));
+}

package/dist/tui/components/HelpGuideModal.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { Modal } from "./Modal.js";
+import { t } from "../../i18n/index.js";
+export function HelpGuideModal(props) {
+    useInput((_input, key) => {
+        if (key.escape || _input === "q") {
+            props.onClose();
+        }
+    });
+    const sections = [
+        { title: "", body: t("helpGuide.intro") },
+        { title: t("helpGuide.commands"), body: t("helpGuide.examples") },
+        { title: t("helpGuide.allCommands"), body: t("helpGuide.allCommands") },
+        { title: t("helpGuide.confirm"), body: t("helpGuide.confirm") },
+        { title: t("helpGuide.navigation"), body: t("helpGuide.navigation") },
+        { title: t("helpGuide.ctrl"), body: t("helpGuide.ctrl") },
+    ];
+    return (_jsxs(Modal, { title: t("helpGuide.title"), onClose: props.onClose, width: "70%", children: [sections.map((section, i) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [section.title.length > 0 ? (_jsx(Text, { color: theme.accent.brand, bold: true, children: section.title })) : null, _jsx(Text, { color: theme.text.primary, children: section.body })] }, i))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.text.muted, children: t("helpGuide.esc") }) })] }));
+}

package/dist/tui/components/HelpModal.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../theme.js";
+import { Modal } from "./Modal.js";
+import { t } from "../../i18n/index.js";
+function helpEntries(view) {
+    switch (view) {
+        case "board":
+            return [
+                { key: t("board.helpKeyMove"), desc: t("board.helpMoveSelection") },
+                { key: t("board.helpKeyEnter"), desc: t("board.helpToggleDetail") },
+                { key: t("board.helpKeyN"), desc: t("board.helpCreate") },
+                { key: t("board.helpKeyE"), desc: t("board.helpEdit") },
+                { key: t("board.helpKeyP"), desc: t("board.helpPauseResume") },
+                { key: t("board.helpKeyX"), desc: t("board.helpForceRun") },
+                { key: t("board.helpKeyD"), desc: t("board.helpDelete") },
+                { key: t("board.helpKeySlash"), desc: t("board.helpSearch") },
+                { key: t("board.helpKeyF"), desc: t("board.helpCycleFilter") },
+                { key: t("board.helpKeyS"), desc: t("board.helpCycleSort") },
+                { key: t("board.helpKeyLeftRight"), desc: t("board.helpSwitchPanel") },
+                { key: t("board.helpKeyH"), desc: t("board.helpToggleHelp") },
+                { key: t("board.helpKeyEsc"), desc: t("board.helpBack") },
+                { key: t("board.helpKeyQ"), desc: t("board.helpQuit") },
+            ];
+        case "tasks":
+            return [
+                { key: t("board.helpKeyMove"), desc: t("board.helpMoveSelection") },
+                { key: t("board.helpKeyEnter"), desc: t("board.taskActionSelect") },
+                { key: t("board.helpKeyN"), desc: t("board.helpCreateTask") },
+                { key: t("board.helpKeyE"), desc: t("board.taskActionEdit") },
+                { key: t("board.helpKeyD"), desc: t("board.actionDelete") },
+                { key: t("board.helpKeyH"), desc: t("board.helpToggleHelp") },
+                { key: t("board.helpKeyEsc"), desc: t("board.helpBack") },
+                { key: t("board.helpKeyQ"), desc: t("board.helpQuit") },
+            ];
+        case "projects":
+            return [
+                { key: t("board.helpKeyMove"), desc: t("board.helpMoveSelection") },
+                { key: t("board.helpKeyEnter"), desc: t("project.editProjectLabel") },
+                { key: t("board.helpKeyN"), desc: t("project.keyNewHint") },
+                { key: t("board.helpKeyE"), desc: t("project.keyEditHint") },
+                { key: t("board.helpKeyD"), desc: t("project.keyDeleteHint") },
+                { key: t("board.helpKeyH"), desc: t("board.helpToggleHelp") },
+                { key: t("board.helpKeyEsc"), desc: t("board.helpBack") },
+                { key: t("board.helpKeyQ"), desc: t("board.helpQuit") },
+            ];
+        default:
+            return [
+                { key: t("board.hintKeyTab"), desc: t("board.hintNextField") },
+                { key: t("board.helpKeyEnter"), desc: t("board.hintApply") },
+                { key: t("board.helpKeyEsc"), desc: t("board.hintCancel") },
+                { key: t("board.helpKeyQ"), desc: t("board.helpQuit") },
+            ];
+    }
+}
+export function HelpModal(props) {
+    const entries = helpEntries(props.view);
+    return (_jsx(Modal, { title: "Shortcuts", onClose: props.onClose, width: "60%", children: entries.map((entry, i) => (_jsxs(Box, { children: [_jsx(Text, { color: theme.accent.brand, children: entry.key.padEnd(16) }), _jsx(Text, { color: theme.text.primary, children: entry.desc })] }, i))) }));
+}

package/dist/tui/components/InlineCommandEditor.js

@@ -0,0 +1,143 @@
+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] }));
+}

package/dist/tui/components/Inspector.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme, statusColor } from "../theme.js";
+import { describeLoop, commandLine, timeAgo, timeUntil } from "../format.js";
+import { t } from "../../i18n/index.js";
+const LABEL_WIDTH = 11;
+function Field(props) {
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(LABEL_WIDTH) }), _jsx(Text, { color: theme.text.primary, children: props.children })] }));
+}
+const DIVIDER = "\u2500".repeat(40);
+/** Muted-label field for identity block (de-emphasized). */
+function MutedField(props) {
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(LABEL_WIDTH) }), _jsx(Text, { color: theme.text.muted, children: props.children })] }));
+}
+export function Inspector(props) {
+    const { loop } = props;
+    if (!loop) {
+        return (_jsxs(Box, { flexDirection: "column", paddingY: 0, 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: DIVIDER }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorEmpty") }) })] }));
+    }
+    const sColor = statusColor(loop.status);
+    const maxRunsLabel = loop.maxRuns ? String(loop.maxRuns) : t("board.unlimited");
+    const lastRun = loop.lastRunAt ? timeAgo(loop.lastRunAt) : t("format.dash");
+    const lastExit = loop.lastExitCode !== null ? String(loop.lastExitCode) : t("format.dash");
+    const nextRun = loop.nextRunAt ? t("format.timingNext", { timeAgo: timeUntil(loop.nextRunAt) }) : t("format.dash");
+    const pid = loop.pid ? String(loop.pid) : t("format.dash");
+    // Dedupe: when description matches the full command line, skip Command field
+    const fullCmd = commandLine(loop.command, loop.commandArgs);
+    const desc = describeLoop(loop);
+    const showCommand = desc !== fullCmd;
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 0, 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: DIVIDER }) }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: t("board.fieldStatus").padEnd(LABEL_WIDTH) }), _jsx(Text, { color: sColor, children: loop.status })] }), _jsx(Field, { label: t("board.fieldLastExit"), children: _jsx(Text, { color: theme.text.primary, children: lastExit }) }), _jsx(Field, { label: t("board.fieldLastRun"), children: _jsx(Text, { color: theme.text.primary, children: lastRun }) }), _jsx(Field, { label: t("board.fieldNextRun"), children: _jsx(Text, { color: theme.text.primary, children: nextRun }) }), _jsx(Field, { label: t("board.fieldRuns"), children: _jsxs(Text, { color: theme.text.primary, children: [loop.runCount, " / ", maxRunsLabel] }) }), _jsx(Field, { label: t("board.fieldInterval"), children: _jsx(Text, { color: theme.text.primary, children: loop.intervalHuman }) }), _jsx(Field, { label: t("board.fieldDir"), children: _jsx(Text, { color: theme.text.primary, children: loop.cwd }) }), _jsx(MutedField, { label: t("board.fieldId"), children: loop.id }), _jsx(MutedField, { label: t("board.fieldDesc"), children: desc }), showCommand && _jsx(MutedField, { label: t("board.fieldCommand"), children: fullCmd }), _jsx(MutedField, { label: t("board.fieldTask"), children: loop.taskId ?? t("format.dash") }), _jsx(MutedField, { label: t("board.fieldPid"), children: pid })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) })] }));
+}