@plainconceptsplatform/loop-task 2.6.0

package/dist/features/overlays/ExportModal.js

@@ -0,0 +1,51 @@
+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 { EXPORT_MAX_PREVIEW_LINES } from "../../shared/config/constants.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.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) => {
+        // Bracketed paste: content wrapped in ESC[200~ ... ESC[201~. Must come
+        // before the escape check  the leading ESC trips key.escape and would
+        // close the modal on a right-click paste.
+        if (input.includes("\x1b[200~")) {
+            return;
+        }
+        if (input.includes("[<")) {
+            return;
+        }
+        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;
+        }
+    });
+    useMouseScroll({
+        onScrollUp: () => setScrollOffset((o) => Math.max(0, o - 1)),
+        onScrollDown: () => setScrollOffset((o) => Math.min(o + 1, maxScroll)),
+    });
+    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/features/overlays/HelpGuideModal.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { Modal } from "../../shared/ui/Modal.js";
+import { t } from "../../shared/i18n/index.js";
+export function HelpGuideModal(props) {
+    useInput((_input, key) => {
+        if (_input.includes("[<"))
+            return;
+        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/features/overlays/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 "../../shared/ui/theme.js";
+import { Modal } from "../../shared/ui/Modal.js";
+import { t } from "../../shared/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/features/overlays/OverlayStack.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogModal } from "../../widgets/log-modal/LogModal.js";
+import { CommandsBrowserModal } from "../../widgets/commands-browser/CommandsBrowserModal.js";
+import { ContextHelpModal } from "./ContextHelpModal.js";
+import { ExportModal } from "./ExportModal.js";
+import { DiagramModal } from "./DiagramModal.js";
+import { ToastStack } from "../../shared/ui/Toast.js";
+export function OverlayStack(props) {
+    return (_jsxs(_Fragment, { children: [props.commandsBrowserOpen ? (_jsx(CommandsBrowserModal, { context: props.commandContext, onClose: props.onCommandsBrowserClose, onExecute: props.onCommandsBrowserExecute })) : null, props.contextHelpOpen ? _jsx(ContextHelpModal, { onClose: props.onContextHelpClose }) : null, props.exportModal ? (_jsx(ExportModal, { json: props.exportModal.json, filePath: props.exportModal.filePath, error: props.exportModal.error, onClose: props.onExportModalClose, onCopy: props.onExportCopy })) : null, props.diagramModal ? (_jsx(DiagramModal, { diagramText: props.diagramModal, onClose: props.onDiagramModalClose })) : null, props.logModalRun ? (_jsx(LogModal, { loopId: props.logModalLoopId, run: props.logModalRun, logLines: props.logModalLines, loading: props.logModalLoading, onClose: props.onLogModalClose, onCopy: props.onLogCopy })) : null, _jsx(ToastStack, { toasts: props.toasts })] }));
+}

package/dist/features/overlays/ProjectsModal.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+export function ProjectsModal(props) {
+    const { projects, loops, currentProjectId, onSelect, onClose } = props;
+    const [selectedIndex, setSelectedIndex] = React.useState(() => {
+        const allIdx = projects.findIndex((p) => p.id === "all");
+        if (allIdx >= 0)
+            return allIdx;
+        const currentIdx = projects.findIndex((p) => p.id === currentProjectId);
+        return currentIdx >= 0 ? currentIdx : 0;
+    });
+    useInput((input, key) => {
+        if (input.includes("[<"))
+            return;
+        if (key.upArrow) {
+            setSelectedIndex((i) => i <= 0 ? projects.length - 1 : i - 1);
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((i) => i >= projects.length - 1 ? 0 : i + 1);
+        }
+        else if (key.return) {
+            const project = projects[selectedIndex];
+            if (project)
+                onSelect(project.id);
+        }
+        else if (key.escape) {
+            onClose();
+        }
+    });
+    const loopCount = (pid) => loops.filter((l) => (l.projectId ?? "default") === pid).length;
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", width: "100%", children: _jsxs(Box, { borderStyle: "round", borderColor: theme.accent.brand, backgroundColor: theme.bg.elevated, flexDirection: "column", paddingX: 2, paddingY: 1, minWidth: 40, maxWidth: 60, children: [_jsx(Text, { color: theme.accent.brand, bold: true, children: t("project.filterTitle") }), projects.map((project, i) => {
+                    const isSelected = i === selectedIndex;
+                    const isActive = project.id === currentProjectId;
+                    const prefix = isSelected ? "\u203a " : "  ";
+                    const bg = isSelected ? theme.bg.active : undefined;
+                    const fg = isSelected ? theme.text.inverse : isActive ? theme.accent.brand : theme.text.primary;
+                    return (_jsx(Box, { backgroundColor: bg, children: _jsxs(Text, { color: fg, children: [prefix, _jsx(Text, { color: project.color ?? theme.text.primary, children: "\u25cf " }), project.name, " ", _jsxs(Text, { color: theme.text.muted, children: ["(", loopCount(project.id), ")"] })] }) }, project.id));
+                }), _jsxs(Text, { color: theme.text.muted, children: ["\n", t("board.logModalEscClose")] })] }) }));
+}

package/dist/features/overlays/TaskPickerModal.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+const MAX_VISIBLE = 10;
+export function TaskPickerModal(props) {
+    const [query, setQuery] = useState("");
+    const [cursor, setCursor] = useState(0);
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return props.tasks;
+        return props.tasks.filter((task) => task.name.toLowerCase().includes(q) ||
+            task.command.toLowerCase().includes(q));
+    }, [props.tasks, query]);
+    const clampedCursor = filtered.length > 0 ? cursor % filtered.length : 0;
+    const selectAt = useCallback((idx) => {
+        const task = filtered[idx];
+        if (task)
+            props.onSelect(task);
+    }, [filtered, props]);
+    useInput((input, key) => {
+        if (input.includes("[<"))
+            return;
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (key.return) {
+            selectAt(clampedCursor);
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((prev) => prev <= 0 ? Math.max(0, filtered.length - 1) : prev - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((prev) => prev >= filtered.length - 1 ? 0 : prev + 1);
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setQuery((prev) => prev.slice(0, -1));
+            setCursor(0);
+            return;
+        }
+        if (key.ctrl)
+            return;
+        if (input.length === 1 && input >= " " && input <= "~") {
+            setQuery((prev) => prev + input);
+            setCursor(0);
+        }
+    });
+    const start = Math.max(0, clampedCursor - Math.floor(MAX_VISIBLE / 2));
+    const end = Math.min(filtered.length, start + MAX_VISIBLE);
+    const visible = filtered.slice(start, end);
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 60, height: Math.min(20, visible.length + 8), flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: theme.accent.task, paddingX: 1, paddingY: 0, children: [_jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { color: theme.accent.task, bold: true, children: t("taskPicker.title") }), _jsx(Text, { color: theme.text.muted, children: "esc" })] }), _jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: theme.text.muted, children: "\u203a " }), _jsx(Text, { color: query ? theme.text.primary : theme.text.muted, children: query || t("taskPicker.searchPlaceholder") }), _jsx(Text, { inverse: true, children: " " })] }), _jsx(Box, { flexDirection: "column", marginTop: 0, children: visible.length === 0 ? (_jsx(Text, { color: theme.text.muted, children: t("taskPicker.empty") })) : (visible.map((task, visIdx) => {
+                        const realIdx = start + visIdx;
+                        const isSelected = realIdx === clampedCursor;
+                        return (_jsxs(Box, { backgroundColor: isSelected ? theme.bg.active : undefined, children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: isSelected ? "\u276f " : "  " }), _jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: task.name }), _jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: " " + task.command })] }, task.id));
+                    })) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.text.muted, children: [filtered.length, "/", props.tasks.length] }), _jsx(Text, { color: theme.text.muted, children: t("taskPicker.hint") })] })] }) }));
+}

package/dist/features/overlays/WelcomeScreen.js

@@ -0,0 +1,74 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useInput } from "ink";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { useInject } from "../../shared/hooks/useInject.js";
+import { TYPES } from "../../shared/services/types.js";
+import { parseDuration } from "../../duration.js";
+const EXAMPLES = [
+    { label: "Run tests every 30m", interval: "30m", command: "npm", args: ["test"] },
+    { label: "Watch for GitHub issues every 5m", interval: "5m", command: "gh", args: ["issue", "list"] },
+    { label: "Sync deps every hour", interval: "1h", command: "npm", args: ["outdated"] },
+];
+export function WelcomeScreen(props) {
+    const loopService = useInject(TYPES.LoopService);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [creating, setCreating] = React.useState(null);
+    const items = [...EXAMPLES.map((e) => e.label), "Create empty loop"];
+    useInput((_input, key) => {
+        if (_input.includes("[<"))
+            return;
+        if (creating)
+            return;
+        if (key.upArrow) {
+            setSelectedIndex((i) => i <= 0 ? items.length - 1 : i - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((i) => i >= items.length - 1 ? 0 : i + 1);
+            return;
+        }
+        if (key.return) {
+            if (selectedIndex === EXAMPLES.length) {
+                props.onCreateEmpty();
+                return;
+            }
+            const example = EXAMPLES[selectedIndex];
+            if (example) {
+                setCreating(example.label);
+                const options = {
+                    interval: parseDuration(example.interval),
+                    taskId: null,
+                    command: example.command,
+                    commandArgs: example.args,
+                    cwd: "",
+                    immediate: false,
+                    maxRuns: null,
+                    verbose: false,
+                    description: example.label,
+                    projectId: "default",
+                    offset: null,
+                };
+                loopService.create(options, example.interval)
+                    .then(() => props.onRefresh())
+                    .then(() => props.onCreateLoop())
+                    .catch(() => setCreating(null));
+            }
+            return;
+        }
+        if (_input === "n") {
+            props.onCreateEmpty();
+            return;
+        }
+        if (_input === "h") {
+            return;
+        }
+    });
+    return (_jsx(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center", flexGrow: 1, children: _jsxs(Box, { borderStyle: "round", borderColor: theme.accent.brand, backgroundColor: theme.bg.surface, paddingX: 4, paddingY: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.accent.brand, bold: true, children: ["\n", "Welcome to loop-task!", "\n"] }), _jsx(Text, { color: theme.text.secondary, children: "Loop engineering: define a purpose," }), _jsxs(Text, { color: theme.text.secondary, children: ["give it an interval, let it iterate.", "\n"] }), _jsxs(Text, { color: theme.text.muted, children: ["No loops yet. Here are some examples:", "\n"] }), items.map((label, i) => {
+                    const isSelected = i === selectedIndex;
+                    const bg = isSelected ? theme.bg.active : undefined;
+                    const fg = isSelected ? theme.text.inverse : theme.text.primary;
+                    const prefix = isSelected ? "\u203a " : "  ";
+                    return (_jsx(Box, { backgroundColor: bg, children: _jsxs(Text, { color: fg, children: [prefix, label] }) }, label));
+                }), _jsxs(Text, { color: theme.text.muted, children: ["\n", "or press 'n' to create a custom loop"] }), _jsx(Text, { color: theme.text.muted, children: "press 'h' for keyboard shortcuts (from main view)" }), creating ? (_jsxs(Text, { color: theme.accent.brand, children: ["\n", "Creating: ", creating, "..."] })) : null] }) }));
+}

package/dist/features/overlays/useOverlayStack.js

@@ -0,0 +1,55 @@
+import { useMemo } from "react";
+import { t } from "../../shared/i18n/index.js";
+import { resolveInputOwner } from "../../shared/ui/state.js";
+export function useOverlayStack(context) {
+    const { confirmState, setConfirmState, searchState, setSearchState, setSearchValue, logModalRun, setLogModalRun, logModalLoopId: _logModalLoopId, setLogModalLoopId, commandsBrowserOpen, setCommandsBrowserOpen, exportModal, setExportModal, diagramModal, setDiagramModal, contextHelpOpen, setContextHelpOpen, view, pop, onQuit, exit, commandBarHasText, commandBarDropdownOpen, } = context;
+    const popLayer = () => {
+        if (confirmState) {
+            setConfirmState(null);
+            return true;
+        }
+        if (searchState?.active) {
+            setSearchState(null);
+            setSearchValue("");
+            return true;
+        }
+        if (logModalRun) {
+            setLogModalRun(null);
+            setLogModalLoopId(null);
+            return true;
+        }
+        if (commandsBrowserOpen) {
+            setCommandsBrowserOpen(false);
+            return true;
+        }
+        if (exportModal) {
+            setExportModal(null);
+            return true;
+        }
+        if (diagramModal) {
+            setDiagramModal(null);
+            return true;
+        }
+        if (contextHelpOpen) {
+            setContextHelpOpen(false);
+            return true;
+        }
+        if (view !== "board") {
+            pop();
+            return true;
+        }
+        setConfirmState({
+            prompt: t("confirm.quit"),
+            onConfirm: () => { onQuit(); exit(); },
+        });
+        return true;
+    };
+    const anyModalOpen = !!(logModalRun || commandsBrowserOpen || exportModal || diagramModal);
+    const commandInputDisabled = anyModalOpen;
+    const inputOwner = useMemo(() => resolveInputOwner({
+        modalOpen: !!(logModalRun || commandsBrowserOpen || exportModal || diagramModal || contextHelpOpen || confirmState || searchState?.active),
+        commandBarHasText,
+        commandBarDropdownOpen,
+    }), [logModalRun, commandsBrowserOpen, exportModal, diagramModal, contextHelpOpen, confirmState, searchState?.active, commandBarHasText, commandBarDropdownOpen]);
+    return { popLayer, anyModalOpen, commandInputDisabled, inputOwner };
+}

package/dist/features/state/useAppState.js

@@ -0,0 +1,151 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { applyLoopFilters, defaultFilters } from "../../entities/loops/filters.js";
+import { applyProjectFilters, defaultProjectFilters } from "../../entities/projects/filters.js";
+import { POLL_MS } from "../../shared/config/constants.js";
+export function useAppState(loops, pushToast, refresh, loopService, taskService, projectService, logService, _view, _push, _pop) {
+    const [activeTab, setActiveTab] = useState("loops");
+    const [focusedPanel, setFocusedPanel] = useState("left");
+    const [filters, setFilters] = useState(defaultFilters);
+    const [sort, setSort] = useState("description");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [editTarget, setEditTarget] = useState(null);
+    const [cloneMode, setCloneMode] = useState(false);
+    const [editTask, setEditTask] = useState(null);
+    const [editProject, setEditProject] = useState(null);
+    const [pendingTaskSelection, setPendingTaskSelection] = useState(null);
+    const [selectedRunIndex, setSelectedRunIndex] = useState(0);
+    const [logModalRun, setLogModalRun] = useState(null);
+    const [logModalLoopId, setLogModalLoopId] = useState(null);
+    const [logModalLines, setLogModalLines] = useState([]);
+    const [logModalLoading, setLogModalLoading] = useState(false);
+    const [tasks, setTasks] = useState([]);
+    const [taskSelectedIndex, setTaskSelectedIndex] = useState(0);
+    const [taskQuery, setTaskQuery] = useState("");
+    const [projects, setProjects] = useState([]);
+    const [currentProjectId, setCurrentProjectId] = useState("all");
+    const [projectSelectedIndex, setProjectSelectedIndex] = useState(0);
+    const [projectFilters, setProjectFilters] = useState(defaultProjectFilters);
+    const [commandsBrowserOpen, setCommandsBrowserOpen] = useState(false);
+    const [contextHelpOpen, setContextHelpOpen] = useState(false);
+    const [exportModal, setExportModal] = useState(null);
+    const [diagramModal, setDiagramModal] = useState(null);
+    const [confirmState, setConfirmState] = useState(null);
+    const [searchState, setSearchState] = useState(null);
+    const [searchValue, setSearchValue] = useState("");
+    const [debugMode, setDebugMode] = useState(false);
+    const [debugEntries, setDebugEntries] = useState([]);
+    const [chordState, setChordState] = useState(null);
+    const [commandBarHasText, setCommandBarHasText] = useState(false);
+    const [commandBarDropdownOpen, setCommandBarDropdownOpen] = useState(false);
+    const visible = useMemo(() => applyLoopFilters(currentProjectId === "all" ? loops : loops.filter((l) => (l.projectId ?? "default") === currentProjectId), filters, sort, projects), [loops, filters, sort, currentProjectId, projects]);
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, visible.length - 1));
+    const selected = visible[clampedIndex] ?? null;
+    const selectedId = selected?.id ?? null;
+    useEffect(() => { setSelectedRunIndex(0); }, [selected?.id]);
+    const filteredTasks = useMemo(() => {
+        const sorted = [...tasks].sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+        if (!taskQuery)
+            return sorted;
+        const q = taskQuery.toLowerCase();
+        return sorted.filter((t) => `${t.id} ${t.name} ${t.command}`.toLowerCase().includes(q));
+    }, [tasks, taskQuery]);
+    const taskClampedIndex = Math.min(taskSelectedIndex, Math.max(0, filteredTasks.length - 1));
+    const selectedTask = filteredTasks[taskClampedIndex] ?? null;
+    const filteredProjects = useMemo(() => applyProjectFilters(projects, loops, projectFilters), [projects, loops, projectFilters]);
+    const projectClampedIndex = Math.min(projectSelectedIndex, Math.max(0, filteredProjects.length - 1));
+    const selectedProjectEntity = filteredProjects[projectClampedIndex] ?? null;
+    const projectLoopCount = selectedProjectEntity
+        ? loops.filter((l) => (l.projectId ?? "default") === selectedProjectEntity.id).length
+        : 0;
+    async function refreshTasks() {
+        try {
+            setTasks(await taskService.list());
+        }
+        catch { /* ignore */ }
+    }
+    async function refreshProjects() {
+        try {
+            setProjects(await projectService.list());
+        }
+        catch { /* ignore */ }
+    }
+    useEffect(() => { void refreshTasks(); void refreshProjects(); }, []);
+    useEffect(() => {
+        const timer = setInterval(() => { void refreshTasks(); void refreshProjects(); }, POLL_MS);
+        return () => clearInterval(timer);
+    }, []);
+    function runAction(label, action) {
+        return async () => {
+            try {
+                await action();
+                void refresh();
+                pushToast("success", label);
+            }
+            catch (error) {
+                pushToast("error", error instanceof Error ? error.message : String(error));
+            }
+        };
+    }
+    function handleOpenRunLog(run) {
+        if (!selectedId)
+            return;
+        setLogModalRun(run);
+        setLogModalLoopId(selectedId);
+        if (run.status === "running") {
+            setLogModalLoading(false);
+            setLogModalLines([]);
+            return;
+        }
+        setLogModalLoading(true);
+        setLogModalLines([]);
+        logService.fetchRunLog(selectedId, run.runNumber)
+            .then((log) => { setLogModalLines(log ? log.split("\n").map((l) => l.replace(/\r$/, "")) : []); setLogModalLoading(false); })
+            .catch((err) => { setLogModalLines([]); setLogModalLoading(false); pushToast("error", err.message ?? "Failed to load log"); });
+    }
+    const leftPanelQuery = searchState?.active ? searchValue : activeTab === "tasks" ? taskQuery : filters.query;
+    const handleSearchChange = useCallback((value) => {
+        setSearchValue(value);
+        if (activeTab === "tasks")
+            setTaskQuery(value);
+        else
+            setFilters((prev) => ({ ...prev, query: value }));
+    }, [activeTab]);
+    const handleSearchSubmit = useCallback(() => { setSearchState(null); }, []);
+    const handleSearchCancel = useCallback(() => {
+        setSearchValue("");
+        if (activeTab === "tasks")
+            setTaskQuery("");
+        else
+            setFilters((prev) => ({ ...prev, query: "" }));
+        setSearchState(null);
+    }, [activeTab]);
+    const counts = {
+        total: loops.length, running: loops.filter((l) => l.status === "running").length,
+        waiting: loops.filter((l) => l.status === "waiting").length, paused: loops.filter((l) => l.status === "paused").length,
+        idle: loops.filter((l) => l.status === "idle").length,
+    };
+    const tabCounts = { loops: loops.length, tasks: tasks.length, projects: projects.length };
+    return {
+        activeTab, setActiveTab, focusedPanel, setFocusedPanel,
+        filters, setFilters, sort, setSort, selectedIndex, setSelectedIndex,
+        editTarget, setEditTarget, cloneMode, setCloneMode,
+        editTask, setEditTask, editProject, setEditProject,
+        pendingTaskSelection, setPendingTaskSelection, selectedRunIndex, setSelectedRunIndex,
+        logModalRun, setLogModalRun, logModalLoopId, setLogModalLoopId,
+        logModalLines, setLogModalLines, logModalLoading, setLogModalLoading,
+        tasks, setTasks, taskSelectedIndex, setTaskSelectedIndex, taskQuery, setTaskQuery,
+        projects, setProjects, currentProjectId, setCurrentProjectId,
+        projectSelectedIndex, setProjectSelectedIndex, projectFilters, setProjectFilters,
+        commandsBrowserOpen, setCommandsBrowserOpen, contextHelpOpen, setContextHelpOpen,
+        exportModal, setExportModal, diagramModal, setDiagramModal, confirmState, setConfirmState,
+        searchState, setSearchState, searchValue, setSearchValue,
+        debugMode, setDebugMode, debugEntries, setDebugEntries,
+        chordState, setChordState, commandBarHasText, setCommandBarHasText, commandBarDropdownOpen, setCommandBarDropdownOpen,
+        visible, clampedIndex, selected, selectedId,
+        filteredTasks, taskClampedIndex, selectedTask,
+        filteredProjects, projectClampedIndex, selectedProjectEntity, projectLoopCount,
+        refreshTasks, refreshProjects, runAction, handleOpenRunLog,
+        leftPanelQuery, handleSearchChange, handleSearchSubmit, handleSearchCancel,
+        counts, tabCounts,
+    };
+}

package/dist/logger.js

@@ -0,0 +1,25 @@
+export class Logger {
+    constructor(verbose = false) {
+        this.verbose = verbose;
+    }
+    info(message) {
+        console.log(message);
+    }
+    error(message) {
+        console.error(message);
+    }
+    success(message) {
+        console.log(message);
+    }
+    debug(message) {
+        if (this.verbose) {
+            console.log(`[verbose] ${message}`);
+        }
+    }
+    warn(message) {
+        console.warn(message);
+    }
+    timestamp() {
+        return new Date().toISOString();
+    }
+}