@plainconceptsplatform/loop-task 2.6.0

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { t } from "../../shared/i18n/index.js";
+import { SelectValueField } from "../../shared/ui/SelectModal.js";
+import { CodeEditorPreview } from "../../features/code-editor/CodeEditorPreview.js";
+import { validateContext } from "../../core/context/validate-context.js";
+export function useCreateSteps(params) {
+    const { initial, selectedTaskId, resolvedTaskName, commandValue, contextValue, projects, setOpenSelect, setTaskPickerOpen, setCommandEditorOpen, setContextEditorOpen, fieldCallbacksRef, taskModeInitial, } = params;
+    return useMemo(() => {
+        const list = [
+            {
+                key: "interval",
+                prompt: t("wizard.intervalPrompt"),
+                hint: t("wizard.intervalHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: initial.interval ?? undefined,
+            },
+            {
+                key: "taskMode",
+                prompt: t("wizard.taskModePrompt"),
+                hint: t("board.hintTaskMode"),
+                required: true,
+                defaultValue: taskModeInitial,
+                onActivate: () => setOpenSelect("taskMode"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.taskMode = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.taskModePrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "taskId",
+                prompt: resolvedTaskName
+                    ? t("board.selectedTask", { name: resolvedTaskName })
+                    : t("board.chooseTask"),
+                hint: t("board.hintTask"),
+                required: true,
+                inputType: "text",
+                defaultValue: selectedTaskId ?? initial.taskId ?? undefined,
+                skip: (values) => !values.taskMode?.includes("Existing"),
+                onActivate: () => setTaskPickerOpen(true),
+                renderCustom: ({ isActive }) => (_jsx(SelectValueField, { label: resolvedTaskName, placeholder: t("board.chooseTask"), isActive: isActive })),
+            },
+            {
+                key: "command",
+                prompt: t("wizard.commandPrompt"),
+                hint: t("wizard.commandHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: commandValue || undefined,
+                skip: (values) => !!values.taskMode?.includes("Existing"),
+                onActivate: () => setCommandEditorOpen(true),
+                renderCustom: ({ isActive }) => (_jsx(CodeEditorPreview, { value: commandValue, hint: t("wizard.commandHint"), isActive: isActive, onActivate: () => setCommandEditorOpen(true) })),
+            },
+            {
+                key: "runNow",
+                prompt: t("wizard.runNowPrompt"),
+                hint: t("board.hintRunNow"),
+                required: true,
+                defaultValue: initial.runNow === "true" || initial.runNow === "yes"
+                    ? t("wizard.runNowNow")
+                    : t("wizard.runNowWait"),
+                skip: (values) => {
+                    const v = (values.interval ?? "").trim().toLowerCase();
+                    return v === "manual" || v === "0";
+                },
+                onActivate: () => setOpenSelect("runNow"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.runNow = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.runNowPrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "cwd",
+                prompt: t("wizard.cwdPrompt"),
+                hint: t("wizard.cwdHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: initial.cwd ?? undefined,
+            },
+            {
+                key: "description",
+                prompt: t("wizard.descriptionPrompt"),
+                hint: t("wizard.descriptionHint"),
+                required: true,
+                inputType: "text",
+                defaultValue: initial.description ?? undefined,
+            },
+            {
+                key: "maxRuns",
+                prompt: t("wizard.maxRunsPrompt"),
+                hint: t("wizard.maxRunsHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: initial.maxRuns ?? undefined,
+            },
+            {
+                key: "project",
+                prompt: t("wizard.projectPrompt"),
+                hint: t("wizard.projectHint"),
+                required: false,
+                defaultValue: projects.find((p) => p.id === (initial.project ?? "default"))?.name ?? projects[0]?.name,
+                onActivate: () => setOpenSelect("project"),
+                renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                    fieldCallbacksRef.current.project = { value, onChange, onAdvance };
+                    return (_jsx(SelectValueField, { label: value || null, placeholder: t("wizard.projectPrompt"), isActive: isActive }));
+                },
+            },
+            {
+                key: "context",
+                prompt: t("wizard.contextPrompt"),
+                hint: t("wizard.contextHint"),
+                required: false,
+                inputType: "text",
+                defaultValue: contextValue || undefined,
+                onActivate: () => setContextEditorOpen(true),
+                validate: (value) => {
+                    if (!value?.trim())
+                        return true;
+                    try {
+                        const parsed = JSON.parse(value);
+                        const result = validateContext(parsed);
+                        return result.valid;
+                    }
+                    catch {
+                        return false;
+                    }
+                },
+                validationError: t("wizard.contextInvalid"),
+                renderCustom: ({ isActive }) => (_jsx(CodeEditorPreview, { value: contextValue, hint: t("wizard.contextHint"), isActive: isActive, onActivate: () => setContextEditorOpen(true) })),
+            },
+        ];
+        return list;
+    }, [taskModeInitial, selectedTaskId, resolvedTaskName, initial, commandValue, contextValue, projects]);
+}

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

@@ -0,0 +1,94 @@
+import { useCallback } from "react";
+import { t } from "../../shared/i18n/index.js";
+import { parseDuration } from "../../duration.js";
+import { parseCommandLine, joinCommandLines } from "../../loop-config.js";
+import { validateContext } from "../../core/context/validate-context.js";
+export function useHandleComplete(params) {
+    const { selectedTaskId, mode, editId, currentProjectId, onDone, commandValue, projects, loopService, } = params;
+    return useCallback((values) => {
+        const intervalInput = values.interval ?? "";
+        if (!intervalInput.trim())
+            return;
+        let interval;
+        try {
+            interval = parseDuration(intervalInput.trim());
+        }
+        catch {
+            return;
+        }
+        const isManual = interval === 0;
+        const intervalHuman = isManual ? "manual" : intervalInput.trim();
+        const isExistingTask = !!values.taskMode?.includes("Existing");
+        if (isExistingTask && !selectedTaskId && !values.taskId?.trim())
+            return;
+        const cmdValue = values.command ?? commandValue;
+        if (!isExistingTask && !cmdValue.trim())
+            return;
+        const cmd = isExistingTask
+            ? ""
+            : joinCommandLines(cmdValue);
+        let cmdOnly = "";
+        let args = [];
+        if (cmd.trim()) {
+            try {
+                const tokens = parseCommandLine(cmd.trim());
+                cmdOnly = tokens[0] ?? "";
+                args = tokens.slice(1);
+            }
+            catch {
+                return;
+            }
+        }
+        const runNowValue = values.runNow === t("wizard.runNowNow");
+        const projectName = values.project ?? "";
+        const project = projects.find((p) => p.name === projectName);
+        const projectId = project?.id ?? currentProjectId;
+        let context;
+        const contextStr = (values.context ?? "").trim();
+        if (contextStr) {
+            try {
+                const parsed = JSON.parse(contextStr);
+                const result = validateContext(parsed);
+                if (result.valid) {
+                    context = result.context;
+                }
+            }
+            catch {
+                // invalid context, skip
+            }
+        }
+        const cwdInput = (values.cwd ?? "").trim();
+        const options = {
+            interval,
+            taskId: isExistingTask
+                ? (selectedTaskId ?? values.taskId?.trim() ?? null)
+                : null,
+            command: cmdOnly,
+            commandArgs: args,
+            commandRaw: isExistingTask ? undefined : cmdValue,
+            // On create, default an empty cwd to the current directory. On edit,
+            // preserve an empty cwd, the user deliberately cleared/kept it empty.
+            cwd: cwdInput || (mode === "edit" ? "" : process.cwd()),
+            immediate: isManual ? false : runNowValue,
+            maxRuns: (values.maxRuns ?? "").trim()
+                ? parseInt(values.maxRuns, 10)
+                : null,
+            verbose: false,
+            description: (values.description ?? "").trim(),
+            projectId,
+            offset: null,
+            context,
+        };
+        const desc = (values.description ?? "").trim() || [cmdOnly, ...args].join(" ").trim();
+        if (mode === "edit" && editId) {
+            loopService.update(editId, options, intervalHuman)
+                .then((id) => onDone(true, id, desc))
+                .catch(() => { });
+        }
+        else {
+            loopService.create(options, intervalHuman)
+                .then((id) => onDone(false, id, desc))
+                .catch(() => { });
+        }
+    }, [selectedTaskId, mode, editId, currentProjectId, onDone, commandValue, projects]);
+}

package/dist/widgets/project-form/ProjectForm.js

@@ -0,0 +1,83 @@
+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 "../loop-form/WizardForm.js";
+import { SelectModal, SelectValueField } from "../../shared/ui/SelectModal.js";
+import { PROJECT_COLORS, PROJECT_COLOR_KEYS } from "../../shared/config/constants.js";
+export function ProjectFormView(props) {
+    const { mode, editProject, onCancel, onDone } = props;
+    const projectService = useInject(TYPES.ProjectService);
+    const colorKeyFor = (color) => {
+        const found = PROJECT_COLOR_KEYS.find((k) => PROJECT_COLORS[k] === color);
+        return found ?? "cyan";
+    };
+    const [colorPickerOpen, setColorPickerOpen] = useState(false);
+    const colorFieldRef = useRef(null);
+    const colorOptions = useMemo(() => PROJECT_COLOR_KEYS.map((k) => ({ value: k, label: k })), []);
+    const steps = useMemo(() => [
+        {
+            key: "name",
+            prompt: t("project.wizard.namePrompt"),
+            hint: t("project.wizard.nameHint"),
+            required: true,
+            inputType: "text",
+            defaultValue: editProject?.name ?? undefined,
+        },
+        {
+            key: "color",
+            prompt: t("project.wizard.colorPrompt"),
+            hint: t("project.wizard.colorHint"),
+            required: true,
+            defaultValue: colorKeyFor(editProject?.color),
+            onActivate: () => setColorPickerOpen(true),
+            renderCustom: ({ value, isActive, onChange, onAdvance }) => {
+                colorFieldRef.current = { value, onChange, onAdvance };
+                return (_jsx(SelectValueField, { label: value || null, placeholder: t("project.wizard.colorPrompt"), isActive: isActive }));
+            },
+        },
+        {
+            key: "directory",
+            prompt: t("project.wizard.directoryPrompt"),
+            hint: t("project.wizard.directoryHint"),
+            required: false,
+            inputType: "text",
+            defaultValue: mode === "create" ? process.cwd() : (editProject?.directory || undefined),
+        },
+        {
+            key: "githubSource",
+            prompt: t("project.wizard.githubSourcePrompt"),
+            hint: t("project.wizard.githubSourceHint"),
+            required: false,
+            inputType: "text",
+            defaultValue: editProject?.githubSource || undefined,
+        },
+    ], [editProject, mode]);
+    const handleComplete = useCallback((values) => {
+        const name = (values.name ?? "").trim();
+        if (!name)
+            return;
+        const colorKey = values.color ?? "cyan";
+        const color = PROJECT_COLORS[colorKey] ?? PROJECT_COLORS.cyan;
+        const githubSource = values.githubSource?.trim() || undefined;
+        if (mode === "edit" && editProject) {
+            projectService.update(editProject.id, name, color, values.directory?.trim() || undefined, githubSource)
+                .then(() => onDone(true, name))
+                .catch(() => { });
+        }
+        else {
+            projectService.create(name, color, values.directory?.trim() || undefined, githubSource)
+                .then(() => onDone(false, name))
+                .catch(() => { });
+        }
+    }, [mode, editProject, onDone]);
+    const title = mode === "edit"
+        ? t("project.editTitle")
+        : t("project.createTitle");
+    return (_jsxs(_Fragment, { children: [_jsx(WizardForm, { title: title, steps: steps, onComplete: handleComplete, onCancel: onCancel, disabled: colorPickerOpen }), colorPickerOpen ? (_jsx(SelectModal, { title: t("project.wizard.colorPrompt"), options: colorOptions, initialValue: colorFieldRef.current?.value, onSelect: (option) => {
+                    colorFieldRef.current?.onChange(option.value);
+                    colorFieldRef.current?.onAdvance();
+                    setColorPickerOpen(false);
+                }, onClose: () => setColorPickerOpen(false) })) : null] }));
+}

package/dist/widgets/right-panel/Inspector.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { darkTheme as theme, statusColor } from "../../shared/ui/theme.js";
+import { describeLoop, commandLine, timeAgo, timeUntil, truncate } from "../../shared/ui/format.js";
+import { t } from "../../shared/i18n/index.js";
+function labelWidth(bp) {
+    return bp === "wide" ? 11 : 8;
+}
+function dividerLen(bp) {
+    if (bp === "wide")
+        return 40;
+    if (bp === "compact")
+        return 28;
+    return 18;
+}
+function Field(props) {
+    return (_jsxs(Box, { overflow: "hidden", children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(props.lw) }), _jsx(Text, { color: theme.text.primary, wrap: "truncate", children: props.children })] }));
+}
+function MutedField(props) {
+    return (_jsxs(Box, { overflow: "hidden", children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(props.lw) }), _jsx(Text, { color: theme.text.muted, wrap: "truncate", children: props.children })] }));
+}
+export function Inspector(props) {
+    const { loop, breakpoint = "wide" } = props;
+    const lw = labelWidth(breakpoint);
+    const divLen = dividerLen(breakpoint);
+    const DIVIDER = "\u2500".repeat(divLen);
+    const truncLen = breakpoint === "wide" ? 38 : breakpoint === "compact" ? 25 : 15;
+    if (!loop) {
+        return (_jsxs(Box, { flexDirection: "column", paddingY: 0, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorTitle") }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorEmpty") }) })] }));
+    }
+    const sColor = statusColor(loop.status);
+    const maxRunsLabel = loop.maxRuns ? String(loop.maxRuns) : t("board.unlimited");
+    const lastRun = loop.lastRunAt ? timeAgo(loop.lastRunAt) : t("format.dash");
+    const lastExit = loop.lastExitCode !== null ? String(loop.lastExitCode) : t("format.dash");
+    const nextRun = loop.nextRunAt ? t("format.timingNext", { timeAgo: timeUntil(loop.nextRunAt) }) : t("format.dash");
+    const fullCmd = truncate(commandLine(loop.command, loop.commandArgs), truncLen);
+    const desc = truncate(describeLoop(loop), truncLen);
+    // Fields omitted in compact/minimal to save vertical space
+    const showOptional = breakpoint === "wide";
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 0, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.inspectorTitle") }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [loop.isRecipe ? (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.semantic.warning, children: "Recipe".padEnd(lw) }), _jsx(Text, { color: theme.semantic.warning, children: loop.recipeFile ?? "" })] })) : null, _jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: t("board.fieldStatus").padEnd(lw) }), _jsx(Text, { color: sColor, children: loop.status })] }), _jsx(Field, { label: t("board.fieldRuns"), lw: lw, children: _jsxs(Text, { color: theme.text.primary, children: [loop.runCount, " / ", maxRunsLabel] }) }), _jsx(Field, { label: t("board.fieldInterval"), lw: lw, children: _jsx(Text, { color: theme.text.primary, children: loop.intervalHuman }) }), _jsx(Field, { label: t("board.fieldLastExit"), lw: lw, children: _jsx(Text, { color: theme.text.primary, children: lastExit }) }), showOptional ? (_jsx(Field, { label: t("board.fieldLastRun"), lw: lw, children: _jsx(Text, { color: theme.text.primary, children: lastRun }) })) : null, showOptional ? (_jsx(Field, { label: t("board.fieldNextRun"), lw: lw, children: _jsx(Text, { color: theme.text.primary, children: nextRun }) })) : null, (loop.silentChainCount ?? 0) > 0 ? (_jsx(Field, { label: t("board.fieldSilentChains"), lw: lw, children: _jsx(Text, { color: theme.text.muted, children: t("board.silentChainCount", { count: (loop.silentChainCount ?? 0).toLocaleString() }) }) })) : null, _jsx(MutedField, { label: t("board.fieldDesc"), lw: lw, children: desc }), _jsx(MutedField, { label: t("board.fieldCommand"), lw: lw, children: fullCmd })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: DIVIDER }) })] }));
+}

package/dist/widgets/right-panel/RightPanel.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useStdout } from "ink";
+import { darkTheme as theme, tabAccentColor } from "../../shared/ui/theme.js";
+import { t } from "../../shared/i18n/index.js";
+import { Inspector } from "./Inspector.js";
+import { RunHistory } from "./RunHistory.js";
+import { FocusableButton } from "../../shared/ui/FocusableButton.js";
+import { commandLine } from "../../shared/ui/format.js";
+export function RightPanel(props) {
+    const { isFocused, navActive = true, activeTab, breakpoint = "wide", loop, selectedRunIndex, onSelectRun, onOpenRun, selectedTask, allTasks, selectedProject, projectLoopCount, onProjectEdit, onProjectDelete, projects, } = props;
+    const borderColor = isFocused ? tabAccentColor(activeTab) : theme.border.default;
+    const { stdout } = useStdout();
+    const panelHeight = (stdout?.rows ?? 24) - 8;
+    const panelWidth = breakpoint === "wide" ? "40%" : "100%";
+    return (_jsx(Box, { flexDirection: "column", width: panelWidth, height: breakpoint === "wide" ? panelHeight : undefined, borderStyle: "single", borderColor: borderColor, children: activeTab === "projects" ? (_jsx(ProjectInspector, { project: selectedProject ?? null, loopCount: projectLoopCount ?? 0, onEdit: onProjectEdit, onDelete: onProjectDelete })) : activeTab === "tasks" ? (_jsx(TaskInspector, { task: selectedTask ?? null, allTasks: allTasks ?? [], breakpoint: breakpoint })) : (_jsxs(_Fragment, { children: [_jsx(Inspector, { loop: loop, projects: projects, breakpoint: breakpoint }), _jsx(RunHistory, { loop: loop, selectedRunIndex: selectedRunIndex, onSelectRun: onSelectRun, onOpenRun: onOpenRun, isFocused: isFocused, navActive: navActive, breakpoint: breakpoint })] })) }));
+}
+function TaskInspector(props) {
+    const { task, allTasks, breakpoint = "wide" } = props;
+    const divLen = breakpoint === "wide" ? 40 : breakpoint === "compact" ? 30 : 20;
+    const taskDivider = "\u2500".repeat(divLen);
+    if (!task) {
+        return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsx(Text, { color: theme.accent.task, bold: true, children: t("board.taskInspectorTitle") }), _jsx(Text, { color: theme.text.muted, children: taskDivider }), _jsx(Text, { color: theme.text.muted, children: t("board.taskInspectorEmpty") })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingY: 0, children: [_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.accent.task, bold: true, children: t("board.taskInspectorTitle") }) }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: taskDivider }) }), _jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [_jsx(Field, { label: t("board.taskFieldName"), children: _jsx(Text, { color: theme.accent.task, bold: true, children: task.name }) }), _jsx(Field, { label: t("board.taskFieldId"), children: _jsx(Text, { color: theme.text.primary, children: task.id }) }), breakpoint !== "minimal" ? (_jsx(Field, { label: t("board.taskFieldCommand"), children: _jsx(Text, { color: theme.text.primary, children: task.commandRaw
+                                ? task.commandRaw.split("\n").filter(Boolean).join(" ")
+                                : commandLine(task.command, task.commandArgs) }) })) : null, breakpoint === "wide" ? (_jsx(Field, { label: t("board.taskFieldCreated"), children: _jsx(Text, { color: theme.text.primary, children: task.createdAt.slice(0, 10) }) })) : null, _jsxs(Field, { label: t("board.taskFieldChain"), children: [task.onSuccessTaskId ? (_jsx(Text, { color: theme.semantic.success, children: "\u2713 " + (allTasks.find((t) => t.id === task.onSuccessTaskId)?.name ?? task.onSuccessTaskId) })) : null, task.onFailureTaskId ? (_jsx(Text, { color: theme.semantic.danger, children: " \u2192 " + (allTasks.find((t) => t.id === task.onFailureTaskId)?.name ?? task.onFailureTaskId) })) : null, !task.onSuccessTaskId && !task.onFailureTaskId ? (_jsx(Text, { color: theme.text.muted, children: t("board.taskNone") })) : null] }), _jsx(Field, { label: t("board.taskFieldSilent"), children: _jsx(Text, { color: task.silentChain ? theme.semantic.warning : theme.text.muted, children: task.silentChain ? t("board.silentChainYes") : t("board.silentChainNo") }) })] }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: taskDivider }) })] }));
+}
+const LABEL_WIDTH = 9;
+function Field(props) {
+    return (_jsxs(Box, { children: [_jsx(Text, { bold: true, color: theme.text.muted, children: props.label.padEnd(LABEL_WIDTH) }), props.children] }));
+}
+function ProjectInspector(props) {
+    const { project, loopCount, onEdit, onDelete } = props;
+    if (!project) {
+        return (_jsx(Box, { padding: 1, flexGrow: 1, children: _jsx(Text, { color: theme.text.muted, children: t("project.inspectorEmpty") }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: project.color, bold: true, children: "\u25CF" }), _jsx(Text, { color: theme.text.primary, bold: true, children: " " + project.name })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldId") }), _jsx(Text, { color: theme.text.secondary, children: project.id })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldLoops") }), _jsx(Text, { color: theme.text.secondary, children: t("project.loopCount", { count: String(loopCount) }) })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldCreated") }), _jsx(Text, { color: theme.text.secondary, children: project.createdAt.slice(0, 10) })] }), project.directory && (_jsxs(Box, { children: [_jsx(Text, { color: theme.text.muted, children: t("project.fieldDirectory") }), _jsx(Text, { color: theme.text.secondary, children: project.directory })] })), project.isSystem && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.semantic.warning, children: t("project.systemLabel") }) })), !project.isSystem && (_jsxs(Box, { marginTop: 1, flexDirection: "row", children: [onEdit && (_jsx(FocusableButton, { label: `${t("project.editProjectLabel")} (${t("project.keyEditHint")})`, color: theme.accent.project, onPress: onEdit })), onDelete && (_jsx(FocusableButton, { label: `${t("project.deleteProjectLabel")} (${t("project.keyDeleteHint")})`, color: theme.semantic.danger, variant: "danger", onPress: onDelete }))] }))] }));
+}

package/dist/widgets/right-panel/RunHistory.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput, useStdout } from "ink";
+import { ScrollList } from "ink-scroll-list";
+import { darkTheme as theme } from "../../shared/ui/theme.js";
+import { formatRunTime, formatRunDuration, formatFileSize } from "../../shared/ui/format.js";
+import { t } from "../../shared/i18n/index.js";
+import { useMouseScroll } from "../../shared/hooks/useMouseScroll.js";
+function runIcon(run) {
+    if (run.status === "running")
+        return "\u21bb";
+    return run.exitCode === 0 ? "\u2713" : "\u2717";
+}
+function runIconColor(run) {
+    if (run.status === "running")
+        return theme.accent.loop;
+    return run.exitCode === 0 ? theme.semantic.success : theme.semantic.danger;
+}
+function chainLabelMax(bp) {
+    if (bp === "wide")
+        return 28;
+    if (bp === "compact")
+        return 16;
+    return 8;
+}
+function truncateChainLabel(label, maxLen) {
+    if (label.length <= maxLen)
+        return label;
+    const ellipsis = "...";
+    const keep = maxLen - ellipsis.length;
+    return label.slice(0, keep) + ellipsis;
+}
+export function groupRunsByCycle(runs, bp = "wide") {
+    const byRun = new Map();
+    for (const r of runs) {
+        const group = byRun.get(r.runNumber);
+        if (group)
+            group.push(r);
+        else
+            byRun.set(r.runNumber, [r]);
+    }
+    const result = [];
+    for (const group of byRun.values()) {
+        if (group.length === 1) {
+            result.push(group[0]);
+            continue;
+        }
+        const first = group[0];
+        const last = group[group.length - 1];
+        const anyRunning = group.some((r) => r.status === "running");
+        const totalDuration = group.reduce((sum, r) => sum + r.duration, 0);
+        const totalLogSize = group.reduce((sum, r) => sum + r.logSize, 0);
+        const chainNames = group
+            .map((r) => r.chainName)
+            .filter((n) => Boolean(n));
+        const chainLabel = chainNames.length > 0
+            ? truncateChainLabel(`\u2192 ${chainNames.join(" \u2192 ")}`, chainLabelMax(bp))
+            : undefined;
+        result.push({
+            runNumber: first.runNumber,
+            startedAt: first.startedAt,
+            exitCode: anyRunning ? -1 : last.exitCode,
+            duration: totalDuration,
+            logSize: totalLogSize,
+            status: anyRunning ? "running" : "completed",
+            logOffset: first.logOffset,
+            chainGroupId: first.chainGroupId,
+            chainName: chainLabel,
+        });
+    }
+    return result;
+}
+const SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+function sparkline(durations) {
+    if (durations.length === 0)
+        return "";
+    const max = Math.max(...durations, 1);
+    const min = Math.min(...durations, 0);
+    const range = max - min || 1;
+    return durations.map((d) => {
+        const level = Math.round(((d - min) / range) * (SPARK_CHARS.length - 1));
+        return SPARK_CHARS[level] ?? SPARK_CHARS[0];
+    }).join("");
+}
+function computeTrends(runs) {
+    if (runs.length === 0) {
+        return { sparkline: "", avgDuration: 0, successStreak: 0, failureStreak: 0, lastFailureAgo: null };
+    }
+    const recent = runs.slice(-20);
+    const durations = recent.map((r) => r.duration).filter((d) => d > 0);
+    const avgDuration = durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+    let successStreak = 0;
+    let failureStreak = 0;
+    for (let i = runs.length - 1; i >= 0; i--) {
+        const r = runs[i];
+        if (r.exitCode === 0 && failureStreak === 0)
+            successStreak++;
+        else if (r.exitCode !== 0 && successStreak === 0)
+            failureStreak++;
+        else
+            break;
+    }
+    let lastFailureAgo = null;
+    for (let i = runs.length - 1; i >= 0; i--) {
+        if (runs[i].exitCode !== 0) {
+            const diff = Date.now() - new Date(runs[i].startedAt).getTime();
+            const hours = Math.floor(diff / 3600000);
+            const mins = Math.floor(diff / 60000);
+            lastFailureAgo = hours > 0 ? `${hours}h ago` : `${mins}m ago`;
+            break;
+        }
+    }
+    return {
+        sparkline: sparkline(durations),
+        avgDuration: Math.round(avgDuration),
+        successStreak,
+        failureStreak,
+        lastFailureAgo,
+    };
+}
+export function RunHistory(props) {
+    const { loop, selectedRunIndex, onSelectRun, onOpenRun, isFocused, navActive = true, breakpoint = "wide" } = props;
+    const { stdout } = useStdout();
+    const terminalHeight = stdout?.rows ?? 24;
+    const LIMIT = Math.max(3, terminalHeight - 22);
+    const runs = groupRunsByCycle(loop?.runHistory ?? [], breakpoint);
+    const reversed = [...runs].reverse();
+    const n = reversed.length;
+    const showSize = breakpoint === "wide";
+    const timePad = breakpoint === "wide" ? 10 : 8;
+    const durPad = breakpoint === "wide" ? 10 : 7;
+    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 = selectedRunIndex <= 0 ? n - 1 : selectedRunIndex - 1;
+            onSelectRun(next);
+            return;
+        }
+        if (key.downArrow || input === "j") {
+            const next = selectedRunIndex >= n - 1 ? 0 : selectedRunIndex + 1;
+            onSelectRun(next);
+            return;
+        }
+        if (key.ctrl && key.return) {
+            const run = reversed[selectedRunIndex];
+            if (run)
+                onOpenRun(run);
+            return;
+        }
+    }, { isActive: isFocused && navActive });
+    useMouseScroll({
+        onScrollUp: () => {
+            if (n === 0 || !(isFocused && navActive))
+                return;
+            const next = selectedRunIndex <= 0 ? n - 1 : selectedRunIndex - 1;
+            onSelectRun(next);
+        },
+        onScrollDown: () => {
+            if (n === 0 || !(isFocused && navActive))
+                return;
+            const next = selectedRunIndex >= n - 1 ? 0 : selectedRunIndex + 1;
+            onSelectRun(next);
+        },
+        isActive: isFocused && navActive,
+    });
+    const title = isFocused ? t("board.runHistoryTitleHint") : t("board.runHistoryTitle");
+    const trends = computeTrends(runs);
+    function renderRun(run, isSelected) {
+        const fg = isSelected ? theme.text.inverse : theme.text.primary;
+        const time = formatRunTime(run.startedAt);
+        const duration = formatRunDuration(run.duration);
+        const size = formatFileSize(run.logSize);
+        const icon = runIcon(run);
+        const iconColor = runIconColor(run);
+        const chain = run.chainName ?? "";
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { color: fg, children: time.padEnd(timePad) }), _jsxs(Text, { color: isSelected ? theme.text.inverse : iconColor, children: [icon, " "] }), _jsx(Text, { color: fg, children: duration.padEnd(durPad) }), showSize ? _jsx(Text, { color: fg, children: size.padEnd(8) }) : null, _jsx(Text, { color: fg, children: chain })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsxs(Box, { paddingLeft: 1, paddingRight: 1, justifyContent: "space-between", children: [_jsx(Text, { color: theme.text.muted, children: title }), (trends.failureStreak > 0 || trends.lastFailureAgo) ? (_jsxs(Text, { color: theme.semantic.warning, children: [trends.failureStreak > 0 ? t("board.runHistoryFailStreak", { count: String(trends.failureStreak) }) : "", trends.failureStreak > 0 && trends.lastFailureAgo ? " " : "", trends.lastFailureAgo ? t("board.runHistoryLastFail", { ago: trends.lastFailureAgo }) : ""] })) : null] }), reversed.length === 0 ? (_jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryEmpty") }) })) : (_jsxs(Box, { flexDirection: "column", children: [trends.sparkline ? (_jsx(Box, { paddingLeft: 1, marginBottom: 0, children: breakpoint !== "minimal" ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.text.muted, children: "Durations: " }), _jsx(Text, { color: theme.accent.loop, children: trends.sparkline }), _jsxs(Text, { color: theme.text.muted, children: [" avg:", formatRunDuration(trends.avgDuration), " "] }), trends.successStreak > 0 ? (_jsxs(Text, { color: theme.semantic.success, children: ["streak:", trends.successStreak, " ok"] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.accent.loop, children: trends.sparkline }), _jsxs(Text, { color: theme.text.muted, children: [" avg:", formatRunDuration(trends.avgDuration)] })] })) })) : null, _jsxs(Box, { paddingLeft: 1, children: [_jsx(Text, { color: theme.text.muted, children: t("board.runHistoryTime").padEnd(timePad) }), _jsx(Text, { color: theme.text.muted, children: "  " }), _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryDuration").padEnd(durPad) }), showSize ? _jsx(Text, { color: theme.text.muted, children: t("board.runHistorySize").padEnd(8) }) : null, _jsx(Text, { color: theme.text.muted, children: t("board.runHistoryDesc") })] }), _jsx(ScrollList, { selectedIndex: selectedRunIndex, height: LIMIT, children: reversed.map((run, i) => {
+                            const isSelected = i === selectedRunIndex;
+                            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 }), renderRun(run, isSelected)] }, i));
+                        }) })] }))] }));
+}