@plainconceptsplatform/loop-task 2.6.0

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

@@ -0,0 +1,133 @@
+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;
+        }
+        // Swallow SGR mouse sequences — handled by useMouseScroll
+        if (input.includes("[<")) {
+            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,72 @@
+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 (input.includes("[<"))
+            return;
+        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 (input.includes("[<"))
+            return;
+        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/widgets/commands-browser/CommandsBrowserModal.js

@@ -0,0 +1,85 @@
+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 "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { buildTabCommands } from "../../features/commands/commands.js";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.js";
+const CATEGORY_ORDER = ["global", "filters", "loop", "task", "project"];
+function categoryLabel(cat) {
+    switch (cat) {
+        case "global": return t("cmdsBrowser.groupGlobal");
+        case "filters": return t("cmdsBrowser.groupFilters");
+        case "loop": return t("cmdsBrowser.groupLoop");
+        case "task": return t("cmdsBrowser.groupTask");
+        case "project": return t("cmdsBrowser.groupProject");
+    }
+}
+const MAX_VISIBLE = 16;
+export function CommandsBrowserModal(props) {
+    const allCommands = useMemo(() => buildTabCommands(props.context), [props.context]);
+    const flatItems = useMemo(() => {
+        const items = [];
+        for (const cat of CATEGORY_ORDER) {
+            const cmds = allCommands.filter((c) => c.category === cat).sort((a, b) => a.label.localeCompare(b.label));
+            if (cmds.length === 0)
+                continue;
+            items.push({ command: { label: categoryLabel(cat), value: `__header_${cat}`, hint: "", tier: "global", category: cat }, isHeader: true, category: cat });
+            for (const cmd of cmds) {
+                items.push({ command: cmd, isHeader: false, category: cat });
+            }
+        }
+        return items;
+    }, [allCommands]);
+    const selectableIndices = useMemo(() => {
+        return flatItems
+            .map((item, i) => ({ item, i }))
+            .filter(({ item }) => !item.isHeader)
+            .map(({ i }) => i);
+    }, [flatItems]);
+    const [cursor, setCursor] = useState(0);
+    const currentFlatIdx = selectableIndices[cursor] ?? 0;
+    useInput((input, key) => {
+        if (input.includes("[<")) {
+            return;
+        }
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setCursor((prev) => prev <= 0 ? Math.max(0, selectableIndices.length - 1) : prev - 1);
+            return;
+        }
+        if (key.downArrow) {
+            setCursor((prev) => prev >= selectableIndices.length - 1 ? 0 : prev + 1);
+            return;
+        }
+        if (key.return) {
+            const flatIdx = selectableIndices[cursor];
+            if (flatIdx !== undefined) {
+                const item = flatItems[flatIdx];
+                if (item && !item.isHeader) {
+                    props.onExecute(item.command.value);
+                }
+            }
+            return;
+        }
+    });
+    useMouseScroll({
+        onScrollUp: () => setCursor((prev) => prev <= 0 ? Math.max(0, selectableIndices.length - 1) : prev - 1),
+        onScrollDown: () => setCursor((prev) => prev >= selectableIndices.length - 1 ? 0 : prev + 1),
+    });
+    const windowStart = Math.max(0, currentFlatIdx - Math.floor(MAX_VISIBLE / 2));
+    const windowEnd = Math.min(flatItems.length, windowStart + MAX_VISIBLE);
+    const visibleItems = flatItems.slice(windowStart, windowEnd);
+    return (_jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", justifyContent: "center", alignItems: "center", children: _jsxs(Box, { width: 56, flexDirection: "column", backgroundColor: theme.bg.elevated, borderStyle: "round", borderColor: theme.border.dim, paddingX: 1, paddingY: 0, children: [_jsxs(Box, { justifyContent: "space-between", paddingY: 0, children: [_jsx(Text, { bold: true, color: theme.text.primary, children: t("cmdsBrowser.title") }), _jsx(Text, { color: theme.text.muted, children: "esc" })] }), _jsx(Box, { flexDirection: "column", children: visibleItems.map((item, visIdx) => {
+                        const realIdx = windowStart + visIdx;
+                        const isSelected = realIdx === currentFlatIdx;
+                        if (item.isHeader) {
+                            return (_jsx(Box, { marginTop: realIdx === 0 ? 0 : 1, children: _jsx(Text, { color: theme.accent.brand, bold: true, children: item.command.label }) }, item.command.value));
+                        }
+                        const shortcut = item.command.shortcut ?? "";
+                        return (_jsxs(Box, { backgroundColor: isSelected ? theme.bg.active : undefined, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.primary, children: "  " + item.command.label }), item.command.hint.length > 0 ? (_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: "  " + item.command.hint.slice(0, 20) })) : null] }), shortcut.length > 0 ? (_jsx(Text, { color: isSelected ? theme.text.inverse : theme.text.muted, children: shortcut })) : null] }, `${item.command.value}-${realIdx}`));
+                    }) }), _jsx(Box, { marginTop: 1, justifyContent: "center", children: _jsx(Text, { color: theme.text.muted, children: t("cmdsBrowser.hint") }) })] }) }));
+}

package/dist/widgets/header/Header.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Box, Text, useStdout } from "ink";
+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) {
+    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";
+    }
+}
+function ServiceStatus({ label, enabled, online }) {
+    // Unknown until the daemon is reachable and reports the setting.
+    const known = online && enabled !== undefined;
+    const on = known && enabled === true;
+    const color = !known
+        ? theme.text.muted
+        : on
+            ? theme.semantic.success
+            : theme.semantic.danger;
+    const symbol = !known ? "\u25CB" : on ? "\u25CF" : "\u25CB";
+    return (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text.muted, children: label }), _jsx(Text, { color: color, children: symbol })] }));
+}
+export function Header(props) {
+    const { stdout } = useStdout();
+    const width = stdout?.columns ?? 80;
+    const compact = width < HEADER_COMPACT_WIDTH;
+    const online = props.daemonStatus === "connected";
+    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: theme.text.muted, children: VERSION }), _jsx(Text, { color: daemonColor(props.daemonStatus), children: daemonSymbol(props.daemonStatus) }), _jsx(Text, { color: theme.text.secondary, children: daemonText(props.daemonStatus) }), _jsx(ServiceStatus, { label: "api", enabled: props.httpApiEnabled, online: online }), _jsx(ServiceStatus, { label: "mcp", enabled: props.mcpApiEnabled, online: online }), _jsx(ServiceStatus, { label: "otel", enabled: props.telemetryEnabled, online: online }), !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/widgets/header/TabBar.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+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 },
+    { key: "projects", label: "Projects", color: theme.accent.project },
+];
+export function tabColor(tab) {
+    return TAB_DEFS.find((t) => t.key === tab)?.color ?? theme.accent.brand;
+}
+export function TabBar(props) {
+    const { activeTab, counts } = props;
+    return (_jsx(Box, { gap: 1, children: TAB_DEFS.map((tab) => {
+            const isActive = tab.key === activeTab;
+            const count = counts?.[tab.key];
+            const label = count !== undefined ? `${tab.label} ${count}` : tab.label;
+            return (_jsx(Box, { children: _jsx(Text, { color: isActive ? theme.text.inverse : theme.text.muted, backgroundColor: isActive ? tab.color : undefined, bold: isActive, children: ` ${label} ` }) }, tab.key));
+        }) }));
+}

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

@@ -0,0 +1,34 @@
+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 "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { Navigator } from "./Navigator.js";
+import { TaskNavigator } from "./TaskBrowser.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] }));
+}
+export function LeftPanel(props) {
+    const { isFocused, navActive = true, activeTab, query, loops, selectedIndex, filters, sort, breakpoint, projects, onSelect, onActivate, tasks, taskSelectedIndex, onTaskSelect, onTaskActivate, currentProjectName, projectFilters, projectSelectedIndex = 0, onProjectSelect, onProjectActivate, projectLoops, } = props;
+    const accentColor = tabAccentColor(activeTab);
+    const borderColor = isFocused ? accentColor : theme.border.default;
+    const hasFilter = query.length > 0;
+    const loopCountFor = (projectId) => (projectLoops ?? loops).filter((l) => l.projectId === projectId).length;
+    const panelWidth = breakpoint === "wide" ? "60%" : "100%";
+    return (_jsxs(Box, { flexDirection: "column", width: panelWidth, flexShrink: 0, borderStyle: "single", borderColor: borderColor, children: [_jsxs(Box, { paddingLeft: 1, gap: 1, children: [hasFilter ? (_jsx(Text, { color: accentColor, children: t("board.chipFilter", { query }) })) : null, activeTab === "loops" ? (_jsxs(_Fragment, { children: [_jsx(Chip, { label: t("board.chipProject"), value: currentProjectName ?? t("board.chipAll"), highlighted: currentProjectName != null }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipStatus"), value: filters.status, highlighted: filters.status !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipSort"), value: sort, highlighted: sort !== "description" })] })) : null, activeTab === "projects" && projectFilters ? (_jsxs(_Fragment, { children: [projectFilters.query.length > 0 ? (_jsx(Text, { color: accentColor, children: t("board.chipSearch", { query: projectFilters.query }) })) : null, _jsx(Chip, { label: t("board.chipLoops"), value: projectFilters.hasLoops, highlighted: projectFilters.hasLoops !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipType"), value: projectFilters.isSystem, highlighted: projectFilters.isSystem !== "all" }), _jsx(Text, { color: theme.text.muted, children: "\u00B7" }), _jsx(Chip, { label: t("board.chipSort"), value: projectFilters.sort, highlighted: projectFilters.sort !== "name" })] })) : null] }), activeTab === "loops" ? (_jsx(Navigator, { visible: loops, total: loops.length, selectedIndex: selectedIndex, breakpoint: breakpoint, projects: projects, onSelect: onSelect, onActivate: onActivate, isFocused: isFocused, navActive: navActive })) : activeTab === "tasks" ? (_jsx(TaskNavigator, { visible: tasks, total: tasks.length, selectedIndex: taskSelectedIndex, query: query, onSelect: onTaskSelect, onActivate: onTaskActivate, isFocused: isFocused, navActive: navActive, allTasks: tasks, projects: projects })) : (_jsx(ProjectNavigator, { projects: projects, loops: projectLoops ?? loops, selectedIndex: projectSelectedIndex, onSelect: onProjectSelect ?? (() => { }), onActivate: onProjectActivate ?? (() => { }), isFocused: isFocused, navActive: navActive, loopCountFor: loopCountFor }))] }));
+}
+function ProjectNavigator(props) {
+    const { projects, selectedIndex, onSelect, onActivate, isFocused, navActive = true, loopCountFor } = props;
+    if (projects.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) }));
+    }
+    return (_jsx(FocusableList, { items: projects, selectedIndex: selectedIndex, isFocused: isFocused, navActive: navActive, limit: 15, onSelect: onSelect, onActivate: onActivate, renderItem: (project, isSelected) => {
+            const count = loopCountFor(project.id);
+            const fg = isSelected ? theme.text.inverse : theme.text.primary;
+            const countFg = isSelected ? theme.text.inverse : theme.text.muted;
+            const createdFg = 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(18)] }), _jsxs(Text, { color: countFg, children: [String(count).padStart(3), " "] }), _jsx(Text, { color: createdFg, children: project.createdAt.slice(0, 10) })] }));
+        } }));
+}

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import Spinner from "ink-spinner";
+import { ScrollList } from "ink-scroll-list";
+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";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.js";
+const DESC_WIDTH_WIDE = 32;
+const DESC_WIDTH_COMPACT = 20;
+const DESC_WIDTH_MINIMAL = 14;
+const SINCE_WIDTH = 13;
+const RUNS_WIDTH = 4;
+const STATUS_WIDTH = 8;
+const COL_GAP = 1;
+const LIMIT = 15;
+function descWidth(bp) {
+    if (bp === "wide")
+        return DESC_WIDTH_WIDE;
+    if (bp === "compact")
+        return DESC_WIDTH_COMPACT;
+    return DESC_WIDTH_MINIMAL;
+}
+export function Navigator(props) {
+    const { visible, total, selectedIndex, projects, onSelect, onActivate, isFocused, navActive = true, breakpoint = "wide" } = props;
+    const n = visible.length;
+    const dw = descWidth(breakpoint);
+    const showSince = breakpoint === "wide";
+    const showTiming = breakpoint !== "minimal";
+    useInput((input, key) => {
+        if (n === 0)
+            return;
+        // Swallow SGR mouse sequences so they don't interfere
+        if (input.includes("[<")) {
+            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.ctrl && key.return) {
+            onActivate(selectedIndex);
+            return;
+        }
+    }, { isActive: isFocused && navActive });
+    useMouseScroll({
+        onScrollUp: () => {
+            if (n === 0 || !(isFocused && navActive))
+                return;
+            const next = selectedIndex <= 0 ? n - 1 : selectedIndex - 1;
+            onSelect(next);
+        },
+        onScrollDown: () => {
+            if (n === 0 || !(isFocused && navActive))
+                return;
+            const next = selectedIndex >= n - 1 ? 0 : selectedIndex + 1;
+            onSelect(next);
+        },
+        isActive: isFocused && navActive,
+    });
+    const title = t("board.navigatorCount", {
+        visible: String(visible.length),
+        total: String(total),
+    });
+    function projectColor(loop) {
+        const proj = projects.find((p) => p.id === loop.projectId);
+        return proj?.color ?? theme.text.muted;
+    }
+    function projectName(loop) {
+        const proj = projects.find((p) => p.id === loop.projectId);
+        return proj?.name ?? "Default";
+    }
+    function isFailed(loop) {
+        return loop.lastExitCode !== null && loop.lastExitCode !== 0;
+    }
+    function renderLoop(loop, isSelected) {
+        const rawDesc = describeLoop(loop);
+        const prefix = breakpoint === "minimal" ? "" : `${projectName(loop)}: `;
+        const desc = truncate(`${prefix}${rawDesc}`, dw);
+        const since = sinceLabel(loop);
+        const timing = timingLabel(loop);
+        const failed = isFailed(loop);
+        const sColor = failed ? theme.semantic.danger : statusColor(loop.status);
+        const sLabel = statusLabel(loop.status);
+        const recipeBadge = loop.isRecipe ? "R " : "";
+        const statusText = `${recipeBadge}${sLabel}`;
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        const dotChar = failed ? "\u2717 " : "\u25cf ";
+        const dotColor = failed
+            ? theme.semantic.danger
+            : isSelected
+                ? theme.text.inverse
+                : projectColor(loop);
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: dotColor, children: dotChar }), _jsx(Text, { color: fg, children: desc.padEnd(dw + COL_GAP) }), showSince ? _jsx(Text, { color: fg, children: since.padEnd(SINCE_WIDTH + COL_GAP) }) : null, _jsx(Text, { color: fg, children: String(loop.runCount).padStart(RUNS_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: isSelected ? theme.text.inverse : sColor, children: statusText.padEnd(STATUS_WIDTH + 1 + COL_GAP) }), showTiming ? _jsx(Text, { color: fg, children: timing }) : null, loop.status === "running" ? (_jsxs(Text, { color: theme.semantic.success, children: [" ", _jsx(Spinner, { type: "dots" })] })) : null] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: title }) }), visible.length === 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.noMatch") }) })) : (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: t("board.headerDescription").padEnd(dw + COL_GAP) }), showSince ? _jsx(Text, { color: theme.text.muted, children: t("board.headerSince").padEnd(SINCE_WIDTH + COL_GAP) }) : null, _jsx(Text, { color: theme.text.muted, children: t("board.headerRuns").padStart(RUNS_WIDTH) + " ".repeat(COL_GAP) }), _jsx(Text, { color: theme.text.muted, children: t("board.headerStatus").padEnd(STATUS_WIDTH + COL_GAP) }), showTiming ? _jsx(Text, { color: theme.text.muted, children: t("board.headerTiming") }) : null] }), _jsx(Box, { paddingLeft: 1, children: _jsx(ScrollList, { selectedIndex: selectedIndex, height: LIMIT, children: visible.map((loop, i) => {
+                                const isSelected = i === selectedIndex;
+                                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 }), renderLoop(loop, isSelected)] }, i));
+                            }) }) })] }))] }));
+}

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+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));
+    const selected = props.projects[selectedIndex];
+    const loopCount = selected
+        ? loopCountFor(props.loops, selected.id, defaultProjectId, knownProjectIds)
+        : 0;
+    useInput((input, key) => {
+        if (subModal !== "none")
+            return;
+        if (input.includes("[<"))
+            return;
+        if (key.escape) {
+            props.onClose();
+            return;
+        }
+        if (input === "n") {
+            if (props.onNavigateCreate) {
+                props.onNavigateCreate();
+            }
+            return;
+        }
+        if (input === "e" && selected) {
+            if (props.onNavigateEdit) {
+                props.onNavigateEdit(selected);
+            }
+            return;
+        }
+        if (input === "d" && selected) {
+            setSubModal("delete");
+            return;
+        }
+    });
+    async function handleDelete() {
+        if (!selected)
+            return;
+        try {
+            await projectService.delete(selected.id);
+            props.onToast(t("project.toastDeleted", { name: selected.name }));
+            await props.onRefresh();
+            setSubModal("none");
+            setSelectedIndex(0);
+        }
+        catch (e) {
+            props.onToast(e.message);
+        }
+    }
+    if (subModal === "delete" && selected) {
+        return (_jsx(DeleteConfirm, { project: selected, loopCount: loopCount, onConfirm: handleDelete, onCancel: () => setSubModal("none") }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: _jsxs(Box, { children: [_jsxs(Box, { width: "40%", flexDirection: "column", children: [_jsx(Box, { borderStyle: "single", borderColor: theme.accent.project, paddingX: 1, children: _jsx(Text, { color: theme.accent.project, bold: true, children: t("project.projectsTitle") }) }), props.projects.length === 0 ? (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) })) : (_jsx(ListFocusWrapper, { projects: props.projects, loops: props.loops, defaultProjectId: defaultProjectId, knownProjectIds: knownProjectIds, selectedIndex: selectedIndex, onSelect: setSelectedIndex, onActivate: (idx) => {
+                                setSelectedIndex(idx);
+                                if (props.onNavigateEdit) {
+                                    const p = props.projects[idx];
+                                    if (p)
+                                        props.onNavigateEdit(p);
+                                }
+                            }, children: null }))] }), _jsx(Box, { flexGrow: 1, flexDirection: "column", marginLeft: 1, children: selected ? (_jsxs(React.Fragment, { children: [_jsxs(Box, { borderStyle: "single", borderColor: theme.accent.brand, padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: selected.color, bold: true, children: "\u25CF" }), _jsx(Text, { color: theme.text.primary, bold: true, children: " " + selected.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "ID:       " }), _jsx(Text, { color: theme.text.secondary, children: selected.id })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "Created:  " }), _jsx(Text, { color: theme.text.secondary, children: selected.createdAt })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "Loops:    " }), _jsx(Text, { color: theme.text.secondary, children: t("project.loopCount", { count: loopCount }) })] }), selected.directory ? (_jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldDirectory") }), _jsx(Text, { color: theme.text.secondary, children: selected.directory })] })) : null, selected.directory ? (_jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: "Dir:      " }), _jsx(Text, { color: theme.text.secondary, children: selected.directory })] })) : null, selected.isSystem && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.systemLabel") }) }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsx(FocusableButton, { label: `${t("project.editProjectLabel")} (${t("project.keyEditHint")})`, color: theme.accent.brand, onPress: () => {
+                                                    if (props.onNavigateEdit && selected) {
+                                                        props.onNavigateEdit(selected);
+                                                    }
+                                                } }), _jsx(FocusableButton, { label: `${t("project.deleteProjectLabel")} (${t("project.keyDeleteHint")})`, color: theme.semantic.danger, variant: "danger", onPress: () => setSubModal("delete") })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.text.muted, children: `${t("project.keyNewHint")} | ${t("project.keyEditHint")} | ${t("project.keyDeleteHint")}` }) })] })] })) : (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.noLoops") }) })) })] }) }));
+}

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] }));
+}