loop-task 2.1.4 → 2.1.5

package/dist/shared/ui/state.js

@@ -0,0 +1,9 @@
+export { defaultFilters, applyLoopFilters, cycleSortMode, cycleStatusFilter } from "../../entities/loops/filters.js";
+export { defaultProjectFilters, applyProjectFilters, cycleProjectSortMode, cycleProjectHasLoopsFilter, cycleProjectIsSystemFilter } from "../../entities/projects/filters.js";
+export function resolveInputOwner(state) {
+    if (state.modalOpen)
+        return "modal";
+    if (state.commandBarHasText || state.commandBarDropdownOpen)
+        return "commandBar";
+    return "panel";
+}

package/dist/{tui → shared}/utils/paste.js

@@ -1,5 +1,5 @@
-import { PASTE_MAX_CHARS } from "../../config/constants.js";
-import { CODE_EDITOR_WRAP_LENGTH } from "../../config/constants.js";
+import { PASTE_MAX_CHARS } from "../config/constants.js";
+import { CODE_EDITOR_WRAP_LENGTH } from "../config/constants.js";
 export function sanitizePaste(raw) {
     return raw
         .replace(/\x1b\[20[01]~/g, "")

package/dist/{tui → shared}/utils/validation.js

@@ -1,7 +1,7 @@
 import fs from "node:fs";
 import { parseDuration } from "../../duration.js";
 import { parseMaxRuns } from "../../loop-config.js";
-import { t } from "../../i18n/index.js";
+import { t } from "../i18n/index.js";
 const validators = {
     name(value) {
         if (!value.trim())

package/dist/widgets/command-input/CommandDropdown.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+export function renderInputLine(value, cursorOffset) {
+    if (value.length === 0) {
+        return "\x1b[7m \x1b[27m";
+    }
+    let result = "";
+    for (let i = 0; i < value.length; i++) {
+        if (i === cursorOffset) {
+            result += "\x1b[7m" + value[i] + "\x1b[27m";
+        }
+        else {
+            result += value[i];
+        }
+    }
+    if (cursorOffset >= value.length) {
+        result += "\x1b[7m \x1b[27m";
+    }
+    return result;
+}
+function renderHighlightedLabel(label, matchRanges, isFocused) {
+    if (matchRanges.length === 0) {
+        return isFocused
+            ? `\x1b[38;2;251;191;36m${label}\x1b[39m`
+            : label;
+    }
+    let result = "";
+    let pos = 0;
+    for (const range of matchRanges) {
+        if (pos < range.start) {
+            const segment = label.slice(pos, range.start);
+            result += isFocused
+                ? `\x1b[38;2;251;191;36m${segment}\x1b[39m`
+                : segment;
+        }
+        const matched = label.slice(range.start, range.end);
+        result += `\x1b[1m\x1b[38;2;251;191;36m${matched}\x1b[39m\x1b[22m`;
+        pos = range.end;
+    }
+    if (pos < label.length) {
+        const segment = label.slice(pos);
+        result += isFocused
+            ? `\x1b[38;2;251;191;36m${segment}\x1b[39m`
+            : segment;
+    }
+    return result;
+}
+export function CommandDropdown({ state, rankedFiltered, }) {
+    if (!state.isOpen || state.isLoading || state.error)
+        return null;
+    const filtered = rankedFiltered;
+    const visibleOptions = filtered.slice(state.visibleFromIndex, state.visibleToIndex);
+    if (visibleOptions.length === 0) {
+        if (state.inputValue.length > 0) {
+            return (_jsx(Box, { paddingLeft: 3, position: "absolute", bottom: 3, borderStyle: "single", borderColor: theme.border.dim, children: _jsx(Text, { color: theme.text.muted, children: t("cmdInput.noMatches") }) }));
+        }
+        return null;
+    }
+    const aboveCount = state.visibleFromIndex;
+    const belowCount = filtered.length - state.visibleToIndex;
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 3, position: "absolute", bottom: 3, children: [aboveCount > 0 && (_jsx(Text, { color: theme.text.muted, children: `  \u2191 ${aboveCount} more` })), visibleOptions.map((match, i) => {
+                const actualIndex = state.visibleFromIndex + i;
+                const isFocused = actualIndex === state.focusedIndex;
+                const label = renderHighlightedLabel(match.option.label, match.matchRanges, isFocused);
+                return (_jsxs(Box, { backgroundColor: isFocused ? theme.bg.active : undefined, children: [_jsx(Text, { color: isFocused ? theme.text.inverse : theme.text.muted, children: isFocused ? "\u276f " : "  " }), _jsx(Text, { color: isFocused ? theme.text.inverse : undefined, children: label })] }, match.option.value));
+            }), belowCount > 0 && (_jsx(Text, { color: theme.text.muted, children: `  \u2193 ${belowCount} more` }))] }));
+}

package/dist/widgets/command-input/CommandInput.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { useAutocompleteState, } from "ink-combobox";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { buildCommands, rankCommands } from "../../features/commands/commands.js";
+import { COMMAND_INPUT_DROPDOWN_MAX_VISIBLE, COMMAND_INPUT_HEIGHT, } from "../../shared/config/constants.js";
+import { sanitizePaste } from "../../shared/utils/paste.js";
+import { CommandDropdown, renderInputLine } from "./CommandDropdown.js";
+import { HintBar, KeyHint } from "./HintBar.js";
+import { ConfirmMode, SearchMode } from "./InputModes.js";
+export { sanitizePaste } from "../../shared/utils/paste.js";
+function CommandMode({ context, onCommand, onCopy, onPanelAction, disabled, navOwner, onInputStateChange, }) {
+    const commands = useMemo(() => buildCommands(context), [context]);
+    const options = useMemo(() => commands.map((cmd) => ({ label: cmd.label, value: cmd.value })), [commands]);
+    const { state, dispatch } = useAutocompleteState({
+        options,
+        visibleOptionCount: COMMAND_INPUT_DROPDOWN_MAX_VISIBLE,
+        onSelect: onCommand,
+    });
+    const rankedFiltered = useMemo(() => {
+        const fo = state.filteredOptions;
+        if (fo.length === 0 || state.inputValue.length === 0)
+            return fo;
+        const byValue = new Map();
+        for (const m of fo)
+            byValue.set(m.option.value, m);
+        const ranked = rankCommands(state.inputValue, fo.map((m) => ({ label: m.option.label, value: m.option.value })));
+        return ranked
+            .map((opt) => byValue.get(opt.value))
+            .filter((m) => m !== undefined);
+    }, [state.filteredOptions, state.inputValue]);
+    useEffect(() => {
+        onInputStateChange?.(state.inputValue.length > 0, state.isOpen);
+    }, [state.inputValue, state.isOpen, onInputStateChange]);
+    const insertText = useCallback((text) => {
+        for (const ch of text)
+            dispatch({ type: "INSERT_TEXT", text: ch });
+    }, [dispatch]);
+    const clearInput = useCallback(() => {
+        dispatch({ type: "MOVE_CURSOR_END" });
+        for (let i = 0; i < state.inputValue.length; i++)
+            dispatch({ type: "DELETE_BACKWARD" });
+    }, [dispatch, state.inputValue.length]);
+    useInput((input, key) => {
+        if (input.includes("\x1b[200~")) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        if ((key.ctrl && input === "u") || input === "\x15") {
+            clearInput();
+            return;
+        }
+        if (key.ctrl)
+            return;
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        if (navOwner === "panel" && state.inputValue.length === 0 && !state.isOpen) {
+            if (input === "j" || input === "k" || key.upArrow || key.downArrow) {
+                return;
+            }
+        }
+        if (onCopy && input === "c" && !state.isOpen) {
+            onCopy();
+            return;
+        }
+        if (key.escape) {
+            dispatch({ type: "CLOSE" });
+            if (state.inputValue.length > 0) {
+                clearInput();
+            }
+            return;
+        }
+        if (key.return) {
+            if (state.isOpen && rankedFiltered.length > 0 && state.focusedIndex < rankedFiltered.length) {
+                const focused = rankedFiltered[state.focusedIndex];
+                dispatch({ type: "CLOSE" });
+                for (let i = 0; i <= state.inputValue.length; i++) {
+                    dispatch({ type: "DELETE_BACKWARD" });
+                }
+                onCommand(focused.option.value);
+            }
+            else if (state.inputValue.length === 0) {
+                onPanelAction?.();
+            }
+            return;
+        }
+        if (key.tab) {
+            dispatch({ type: "ACCEPT" });
+            return;
+        }
+        if (key.downArrow) {
+            dispatch({ type: "FOCUS_NEXT" });
+            return;
+        }
+        if (key.upArrow) {
+            dispatch({ type: "FOCUS_PREV" });
+            return;
+        }
+        if (key.backspace || key.delete) {
+            dispatch({ type: "DELETE_BACKWARD" });
+            return;
+        }
+        if (key.leftArrow) {
+            dispatch({ type: "MOVE_CURSOR_LEFT" });
+            return;
+        }
+        if (key.rightArrow) {
+            dispatch({ type: "MOVE_CURSOR_RIGHT" });
+            return;
+        }
+        if (input.length > 1 && !key.meta) {
+            insertText(sanitizePaste(input));
+            return;
+        }
+        if (input.length === 1 && !key.ctrl && !key.meta && !key.return && !key.tab && !key.escape && input >= " " && input <= "~") {
+            dispatch({ type: "INSERT_TEXT", text: input });
+        }
+    }, { isActive: !disabled });
+    const isEmpty = state.inputValue.length === 0;
+    const cursor = "\x1b[7m \x1b[27m";
+    const inputContent = isEmpty ? cursor : renderInputLine(state.inputValue, state.cursorOffset);
+    return (_jsxs(_Fragment, { children: [_jsx(CommandDropdown, { state: state, rankedFiltered: rankedFiltered }), _jsxs(Box, { children: [_jsx(Text, { color: theme.accent.brand, children: "│ " }), isEmpty ? (_jsx(Text, { color: theme.text.muted, children: t("cmdInput.placeholder") })) : (_jsx(Text, { children: inputContent }))] }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsxs(Box, { children: [_jsx(KeyHint, { keyLabel: "enter", action: "edit/logs" }), _jsx(KeyHint, { keyLabel: "ctrl+u", action: "clear" }), _jsx(KeyHint, { keyLabel: "c", action: "copy" }), _jsx(KeyHint, { keyLabel: "tab", action: "panels" }), _jsx(KeyHint, { keyLabel: "ctrl+\u2190\u2192", action: "tabs" }), _jsx(KeyHint, { keyLabel: "ctrl+p", action: "commands" })] }) })] }));
+}
+export function CommandInput(props) {
+    const { context, onCommand, confirmState, searchState, searchValue, onSearchChange, onSearchSubmit, onSearchCancel, onConfirmYes, onConfirmCancel, onCopy, onPanelAction, navOwner, onInputStateChange, } = props;
+    return (_jsx(Box, { flexDirection: "column", height: COMMAND_INPUT_HEIGHT, borderStyle: "single", borderColor: theme.border.dim, paddingY: 1, children: searchState?.active ? (_jsx(SearchMode, { value: searchValue, onSearchChange: onSearchChange, onSearchSubmit: onSearchSubmit, onSearchCancel: onSearchCancel, disabled: props.disabled })) : confirmState === null ? (_jsx(CommandMode, { context: context, onCommand: onCommand, onCopy: onCopy, onPanelAction: onPanelAction, disabled: props.disabled, navOwner: navOwner, onInputStateChange: onInputStateChange })) : (_jsx(ConfirmMode, { confirmState: confirmState, onConfirmYes: onConfirmYes, onConfirmCancel: onConfirmCancel, disabled: props.disabled })) }));
+}

package/dist/widgets/command-input/HintBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+export function HintBar({ leftHint, rightHint, }) {
+    return (_jsxs(Box, { justifyContent: "space-between", paddingX: 1, children: [_jsx(Box, { children: leftHint }), _jsx(Box, { children: rightHint })] }));
+}
+export function KeyHint({ keyLabel, action }) {
+    return (_jsxs(Box, { marginRight: 2, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: keyLabel }), _jsx(Text, { color: theme.text.muted, children: " " + action })] }));
+}

package/dist/widgets/command-input/InputModes.js

@@ -0,0 +1,68 @@
+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 "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { HintBar, KeyHint } from "./HintBar.js";
+export function ConfirmMode({ confirmState, onConfirmYes, onConfirmCancel, disabled, }) {
+    const [value, setValue] = useState("");
+    useInput((input, key) => {
+        if (key.ctrl)
+            return;
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        if (key.escape) {
+            setValue("");
+            onConfirmCancel();
+            return;
+        }
+        if (key.return) {
+            if (value.toLowerCase() === "yes") {
+                setValue("");
+                onConfirmYes();
+            }
+            else {
+                setValue("");
+                onConfirmCancel();
+            }
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setValue((v) => v.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && input.length === 1) {
+            setValue((v) => v + input);
+            return;
+        }
+    }, { isActive: !disabled });
+    const cursor = "\x1b[7m \x1b[27m";
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.semantic.danger, children: "│ " }), _jsx(Text, { color: theme.text.muted, children: confirmState.prompt + " " }), value.length > 0 ? (_jsx(Text, { children: value + cursor })) : (_jsx(Text, { children: cursor }))] }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsx(KeyHint, { keyLabel: "enter", action: "confirm" }) })] }));
+}
+export function SearchMode({ value, onSearchChange, onSearchSubmit, onSearchCancel, disabled, }) {
+    useInput((input, key) => {
+        if (key.ctrl)
+            return;
+        if (input.length > 1 && (input.includes("\r") || input.includes("\n")))
+            return;
+        if (key.escape) {
+            onSearchCancel();
+            return;
+        }
+        if (key.return) {
+            onSearchSubmit();
+            return;
+        }
+        if (key.backspace || key.delete) {
+            onSearchChange(value.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta && input.length === 1) {
+            onSearchChange(value + input);
+            return;
+        }
+    }, { isActive: !disabled });
+    const placeholder = t("cmdInput.searchPlaceholder");
+    const cursor = "\x1b[7m \x1b[27m";
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Text, { color: theme.accent.project, children: "│ " }), value.length > 0 ? (_jsx(Text, { children: value + cursor })) : (_jsx(Text, { color: theme.text.muted, children: placeholder }))] }), _jsx(HintBar, { leftHint: _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7\u00b7 " }), _jsx(KeyHint, { keyLabel: "esc", action: "cancel" })] }), rightHint: _jsx(KeyHint, { keyLabel: "enter", action: "apply" }) })] }));
+}

package/dist/{tui/components → widgets/commands-browser}/CommandsBrowserModal.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
 import { Box, Text, useInput } from "ink";
-import { darkTheme as theme } from "../theme.js";
-import { t } from "../../i18n/index.js";
-import { buildTabCommands } from "../commands.js";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { buildTabCommands } from "../../features/commands/commands.js";
 const CATEGORY_ORDER = ["global", "filters", "loop", "task", "project"];
 function categoryLabel(cat) {
     switch (cat) {

package/dist/{tui/components → widgets/header}/Header.js

@@ -1,9 +1,9 @@
 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 { darkTheme as theme } from "../../shared/ui/theme.js";
+import { HEADER_COMPACT_WIDTH } from "../../shared/config/constants.js";
+import { t } from "../../shared/i18n/index.js";
 import { TabBar } from "./TabBar.js";
 const VERSION = "v" + (process.env.npm_package_version ?? "dev");
 function daemonSymbol(status) {

package/dist/{tui/components → widgets/header}/TabBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from "ink";
-import { darkTheme as theme } from "../theme.js";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
 const TAB_DEFS = [
     { key: "loops", label: "Loops", color: theme.accent.loop },
     { key: "tasks", label: "Tasks", color: theme.accent.task },

package/dist/{tui/components → widgets/left-panel}/LeftPanel.js

@@ -1,11 +1,11 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
-import { darkTheme as theme, tabAccentColor } from "../theme.js";
-import { t } from "../../i18n/index.js";
+import { darkTheme as theme, tabAccentColor } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
 import { Navigator } from "./Navigator.js";
 import { TaskNavigator } from "./TaskBrowser.js";
-import { FocusableList } from "./FocusableList.js";
+import { FocusableList } from "../../shared/ui/FocusableList.js";
 function Chip(props) {
     const { label, value, highlighted } = props;
     return (_jsxs(Text, { color: highlighted ? theme.text.primary : theme.text.muted, children: [label, " ", value] }));

package/dist/{tui/components → widgets/left-panel}/Navigator.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Text, useInput } from "ink";
 import Spinner from "ink-spinner";
 import { ScrollList } from "ink-scroll-list";
-import { darkTheme as theme, statusColor } from "../theme.js";
-import { describeLoop, sinceLabel, statusLabel, timingLabel, truncate } from "../format.js";
-import { t } from "../../i18n/index.js";
+import { darkTheme as theme, statusColor } from "../../shared/ui/theme.js";
+import { describeLoop, sinceLabel, statusLabel, timingLabel, truncate } from "../../shared/ui/format.js";
+import { t } from "../../shared/i18n/index.js";
 const DESC_WIDTH = 32;
 const SINCE_WIDTH = 13;
 const RUNS_WIDTH = 4;

package/dist/{tui/components → widgets/left-panel}/ProjectsPage.js

@@ -1,41 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
-import { Box, Text, useInput, useFocus } from "ink";
-import { darkTheme as theme } from "../theme.js";
-import { FocusableList } from "./FocusableList.js";
-import { FocusableButton } from "./FocusableButton.js";
-import { Modal } from "./Modal.js";
-import { t } from "../../i18n/index.js";
-import { deleteProject } from "../daemon.js";
-function loopCountFor(loops, projectId, defaultProjectId, knownProjectIds) {
-    const direct = loops.filter((l) => l.projectId === projectId).length;
-    if (projectId === defaultProjectId) {
-        const orphans = loops.filter((l) => !knownProjectIds.has(l.projectId)).length;
-        return direct + orphans;
-    }
-    return direct;
-}
-function DeleteConfirm(props) {
-    return (_jsxs(Modal, { title: t("project.deleteTitle"), onClose: props.onCancel, width: 50, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.text.primary, children: t("project.deleteConfirm", { name: props.project.name }) }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.deleteWarning", { count: props.loopCount }) }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(FocusableButton, { label: t("board.yes"), color: theme.semantic.danger, onPress: props.onConfirm, variant: "danger" }), _jsx(FocusableButton, { label: t("board.no"), color: theme.text.secondary, onPress: props.onCancel })] })] }));
-}
-function ListFocusWrapper(props) {
-    const { isFocused } = useFocus();
-    if (props.projects.length === 0) {
-        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) }));
-    }
-    const nameWidth = 20;
-    const loopsWidth = 12;
-    const headerSeparator = " \u00B7 ";
-    return (_jsxs(React.Fragment, { children: [_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: theme.text.muted, children: " ".concat(t("project.headerName").padEnd(nameWidth)) }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, String(t("project.headerLoops")).padEnd(loopsWidth)] }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, t("project.headerCreated")] })] }), _jsx(FocusableList, { items: props.projects, selectedIndex: props.selectedIndex, isFocused: isFocused, limit: 10, onSelect: props.onSelect, onActivate: props.onActivate, renderItem: (project, isSelected) => {
-                    const count = loopCountFor(props.loops, project.id, props.defaultProjectId, props.knownProjectIds);
-                    const fg = isSelected ? theme.text.inverse : theme.text.primary;
-                    const countFg = isSelected ? theme.text.inverse : theme.text.muted;
-                    return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: project.color, children: "\u25CF" }), _jsxs(Text, { color: fg, children: [" ", project.name.padEnd(nameWidth - 1)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, String(count).padEnd(loopsWidth)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, project.createdAt] })] }));
-                } }), props.children] }));
-}
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { FocusableButton } from "../../shared/ui/FocusableButton.js";
+import { t } from "../../shared/i18n/index.js";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { DeleteConfirm, ListFocusWrapper, loopCountFor } from "./ProjectsPageParts.js";
 export function ProjectsPage(props) {
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [subModal, setSubModal] = useState("none");
+    const projectService = useInject(TYPES.ProjectService);
     const defaultProject = props.projects.find((p) => p.isDefault) ?? null;
     const defaultProjectId = defaultProject?.id ?? null;
     const knownProjectIds = new Set(props.projects.map((p) => p.id));
@@ -71,7 +46,7 @@ export function ProjectsPage(props) {
         if (!selected)
             return;
         try {
-            await deleteProject(selected.id);
+            await projectService.delete(selected.id);
             props.onToast(t("project.toastDeleted", { name: selected.name }));
             await props.onRefresh();
             setSubModal("none");

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useFocus } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { FocusableList } from "../../shared/ui/FocusableList.js";
+import { FocusableButton } from "../../shared/ui/FocusableButton.js";
+import { Modal } from "../../shared/ui/Modal.js";
+import { t } from "../../shared/i18n/index.js";
+export function loopCountFor(loops, projectId, defaultProjectId, knownProjectIds) {
+    const direct = loops.filter((l) => l.projectId === projectId).length;
+    if (projectId === defaultProjectId) {
+        const orphans = loops.filter((l) => !knownProjectIds.has(l.projectId)).length;
+        return direct + orphans;
+    }
+    return direct;
+}
+export function DeleteConfirm(props) {
+    return (_jsxs(Modal, { title: t("project.deleteTitle"), onClose: props.onCancel, width: 50, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.text.primary, children: t("project.deleteConfirm", { name: props.project.name }) }) }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.deleteWarning", { count: props.loopCount }) }) }), _jsxs(Box, { marginTop: 1, children: [_jsx(FocusableButton, { label: t("board.yes"), color: theme.semantic.danger, onPress: props.onConfirm, variant: "danger" }), _jsx(FocusableButton, { label: t("board.no"), color: theme.text.secondary, onPress: props.onCancel })] })] }));
+}
+export function ListFocusWrapper(props) {
+    const { isFocused } = useFocus();
+    if (props.projects.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) }));
+    }
+    const nameWidth = 20;
+    const loopsWidth = 12;
+    const headerSeparator = " \u00B7 ";
+    return (_jsxs(React.Fragment, { children: [_jsxs(Box, { paddingX: 1, marginBottom: 0, children: [_jsx(Text, { color: theme.text.muted, children: " ".concat(t("project.headerName").padEnd(nameWidth)) }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, String(t("project.headerLoops")).padEnd(loopsWidth)] }), _jsxs(Text, { color: theme.text.muted, children: [headerSeparator, t("project.headerCreated")] })] }), _jsx(FocusableList, { items: props.projects, selectedIndex: props.selectedIndex, isFocused: isFocused, limit: 10, onSelect: props.onSelect, onActivate: props.onActivate, renderItem: (project, isSelected) => {
+                    const count = loopCountFor(props.loops, project.id, props.defaultProjectId, props.knownProjectIds);
+                    const fg = isSelected ? theme.text.inverse : theme.text.primary;
+                    const countFg = isSelected ? theme.text.inverse : theme.text.muted;
+                    return (_jsxs(React.Fragment, { children: [_jsx(Text, { color: project.color, children: "\u25CF" }), _jsxs(Text, { color: fg, children: [" ", project.name.padEnd(nameWidth - 1)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, String(count).padEnd(loopsWidth)] }), _jsxs(Text, { color: countFg, children: [headerSeparator, project.createdAt] })] }));
+                } }), props.children] }));
+}

package/dist/{tui/components → widgets/left-panel}/TaskBrowser.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text, useInput } from "ink";
 import { ScrollList } from "ink-scroll-list";
-import { darkTheme as theme } from "../theme.js";
-import { commandLine } from "../format.js";
-import { t } from "../../i18n/index.js";
-import { FocusableButton } from "./FocusableButton.js";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { commandLine } from "../../shared/ui/format.js";
+import { t } from "../../shared/i18n/index.js";
+import { FocusableButton } from "../../shared/ui/FocusableButton.js";
 const NAME_WIDTH = 24;
 const COMMAND_WIDTH = 32;
 const LIMIT = 15;

package/dist/{tui/components → widgets/log-modal}/LogModal.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { darkTheme as theme } from "../theme.js";
-import { t } from "../../i18n/index.js";
-import { streamRunLog } from "../daemon.js";
-import { formatDate } from "../format.js";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { formatDate } from "../../shared/ui/format.js";
 import { copyToClipboard } from "../../shared/clipboard.js";
 const MAX_VISIBLE_LINES = 20;
 function colorForLine(line, run) {
@@ -30,6 +31,7 @@ export function LogModal(props) {
     const [searchQuery, setSearchQuery] = useState("");
     const [follow, setFollow] = useState(true);
     const [scrollOffset, setScrollOffset] = useState(0);
+    const logService = useInject(TYPES.LogService);
     useEffect(() => {
         setLines(props.logLines);
     }, [props.logLines]);
@@ -39,11 +41,11 @@ export function LogModal(props) {
         if (props.run.status !== "running")
             return;
         setStreaming(true);
-        const socket = streamRunLog(props.loopId, props.run.runNumber, (line) => setLines((prev) => [...prev, line]), () => setStreaming(false), () => setStreaming(false));
+        const socket = logService.streamRunLog(props.loopId, props.run.runNumber, (line) => setLines((prev) => [...prev, line]), () => setStreaming(false), () => setStreaming(false));
         return () => {
             socket.destroy();
         };
-    }, [props.loopId, props.run.runNumber, props.run.status]);
+    }, [props.loopId, props.run.runNumber, props.run.status, logService]);
     const filtered = searchQuery
         ? lines.filter((l) => l.toLowerCase().includes(searchQuery.toLowerCase()))
         : lines;

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

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState, useRef } from "react";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { t } from "../../shared/i18n/index.js";
+import { WizardForm } from "./WizardForm.js";
+import { TaskPickerModal } from "../../features/overlays/TaskPickerModal.js";
+import { SelectModal } from "../../shared/ui/SelectModal.js";
+import { CodeEditorModal } from "../../features/code-editor/CodeEditorModal.js";
+import { useCreateSteps } from "./useCreateSteps.js";
+import { useHandleComplete } from "./useHandleComplete.js";
+export function CreateView(props) {
+    const { mode, editId, initial, selectedTaskId, selectedTaskName, tasks, currentProjectId, onCancel, onDone, onChooseTask, } = props;
+    const loopService = useInject(TYPES.LoopService);
+    const [taskPickerOpen, setTaskPickerOpen] = useState(false);
+    const [openSelect, setOpenSelect] = useState(null);
+    const [commandEditorOpen, setCommandEditorOpen] = useState(false);
+    const [commandValue, setCommandValue] = useState(initial.command ?? "");
+    const fieldCallbacksRef = useRef({});
+    const taskModeInitial = initial.taskMode === "existing" ? "Existing task" : "Inline command";
+    const resolvedTaskName = useMemo(() => {
+        const tid = selectedTaskId ?? initial.taskId;
+        if (!tid)
+            return null;
+        const displayName = selectedTaskName ?? tasks.find((t) => t.id === tid)?.name;
+        if (displayName)
+            return `${displayName} (${tid.slice(0, 8)})`;
+        return `${tid.slice(0, 8)}`;
+    }, [selectedTaskName, selectedTaskId, initial.taskId, tasks]);
+    const steps = useCreateSteps({
+        initial,
+        selectedTaskId,
+        resolvedTaskName,
+        commandValue,
+        projects: props.projects,
+        setOpenSelect,
+        setTaskPickerOpen,
+        setCommandEditorOpen,
+        fieldCallbacksRef,
+        taskModeInitial,
+    });
+    const handleComplete = useHandleComplete({
+        selectedTaskId,
+        mode,
+        editId,
+        currentProjectId,
+        onDone,
+        commandValue,
+        projects: props.projects,
+        loopService,
+    });
+    const selectOptionsFor = useCallback((field) => {
+        if (field === "taskMode") {
+            return [t("wizard.taskModeInline"), t("wizard.taskModeExisting")].map((v) => ({ value: v, label: v }));
+        }
+        if (field === "runNow") {
+            return [t("wizard.runNowWait"), t("wizard.runNowNow")].map((v) => ({ value: v, label: v }));
+        }
+        return props.projects.map((p) => ({ value: p.name, label: p.name }));
+    }, [props.projects]);
+    const selectTitleFor = (field) => field === "taskMode" ? t("wizard.taskModePrompt")
+        : field === "runNow" ? t("wizard.runNowPrompt")
+            : t("wizard.projectPrompt");
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: mode === "edit" ? t("wizard.editLoop") : t("wizard.newLoop"), steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: taskPickerOpen || openSelect !== null || commandEditorOpen }), taskPickerOpen ? (_jsx(TaskPickerModal, { tasks: tasks, onSelect: (task) => {
+                    onChooseTask({ id: task.id, name: task.name });
+                    setTaskPickerOpen(false);
+                }, onClose: () => setTaskPickerOpen(false) })) : null, openSelect ? (_jsx(SelectModal, { title: selectTitleFor(openSelect), options: selectOptionsFor(openSelect), initialValue: fieldCallbacksRef.current[openSelect]?.value, onSelect: (option) => {
+                    fieldCallbacksRef.current[openSelect]?.onChange(option.value);
+                    fieldCallbacksRef.current[openSelect]?.onAdvance();
+                    setOpenSelect(null);
+                }, onClose: () => setOpenSelect(null) })) : null, commandEditorOpen ? (_jsx(CodeEditorModal, { initialValue: commandValue, onSave: (v) => {
+                    setCommandValue(v);
+                    setCommandEditorOpen(false);
+                }, onCancel: () => setCommandEditorOpen(false) })) : null] }));
+}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+export function TextField({ value, hint, isActive, }) {
+    const borderColor = isActive ? theme.accent.brand : theme.border.dim;
+    const backgroundColor = isActive ? theme.bg.input : undefined;
+    const showHint = value.length === 0;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: borderColor, backgroundColor: backgroundColor, paddingLeft: 1, overflow: "hidden", width: "100%", children: [_jsx(Text, { color: showHint ? theme.text.muted : theme.text.primary, children: showHint ? hint : value }), isActive ? _jsx(Text, { inverse: true, children: " " }) : null] }));
+}