loop-task 1.5.0 → 1.5.2

package/dist/board/components/ProjectsPage.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useKeyboard } from "@opentui/react";
 import { t } from "../../i18n/index.js";
 import { useHoverState } from "../hooks/useHoverState.js";
+import { useTabNav } from "../hooks/useTabNav.js";
 import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
 import { CreateProjectModal } from "./CreateProjectModal.js";
 import { EditProjectModal } from "./EditProjectModal.js";
 import { DeleteProjectConfirm } from "./DeleteProjectConfirm.js";
-const PROJECT_ACTION_COUNT = 2;
 function ProjectActionButton(props) {
     const { isHovered, hoverProps } = useHoverState();
     const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
@@ -15,11 +15,27 @@ function ProjectActionButton(props) {
     return (_jsx("box", { onMouseDown: props.onMouseDown, style: { backgroundColor: bg, paddingLeft: 1, paddingRight: 1, marginRight: 1 }, ...hoverProps, children: _jsx("text", { fg: fg, children: _jsx("strong", { children: props.label }) }) }));
 }
 export function ProjectsPage(props) {
-    const { projects, loops, onClose, onRefresh, onOpenCreate, onEnterHeader } = props;
+    const { projects, loops, headerFocused, onClose, onRefresh, onOpenCreate, onEnterHeader } = props;
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [subModal, setSubModal] = useState("none");
-    const [focusedPanel, setFocusedPanel] = useState("list");
-    const [selectedAction, setSelectedAction] = useState(0);
+    const navItems = ["list", "edit", "delete"];
+    const { setFocusIndex, focusedItem, isFocused } = useTabNav(navItems, {
+        onCycleOut: (dir) => {
+            if (dir === "right")
+                onEnterHeader?.("right");
+            else
+                onEnterHeader?.("left");
+        },
+    });
+    const focusedItemRef = useRef(focusedItem);
+    focusedItemRef.current = focusedItem;
+    const prevHeaderFocused = useRef(headerFocused);
+    useEffect(() => {
+        if (prevHeaderFocused.current && !headerFocused) {
+            setFocusIndex(0);
+        }
+        prevHeaderFocused.current = headerFocused;
+    }, [headerFocused]);
     // Expose create trigger to parent via callback
     useState(() => { onOpenCreate?.(() => setSubModal("create")); });
     const clampedIndex = Math.min(selectedIndex, Math.max(0, projects.length - 1));
@@ -36,44 +52,38 @@ export function ProjectsPage(props) {
     useKeyboard((key) => {
         if (subModal !== "none")
             return;
-        if (key.name === "up") {
-            if (focusedPanel === "list")
-                setSelectedIndex((i) => Math.max(0, i - 1));
-            else
-                setSelectedAction((a) => Math.max(0, a - 1));
-            key.preventDefault();
-            return;
-        }
-        if (key.name === "down") {
-            if (focusedPanel === "list")
-                setSelectedIndex((i) => Math.min(projects.length - 1, i + 1));
-            else
-                setSelectedAction((a) => Math.min(PROJECT_ACTION_COUNT - 1, a + 1));
-            key.preventDefault();
+        if (headerFocused)
             return;
-        }
-        if (key.name === "tab") {
-            const direction = key.shift ? "left" : "right";
-            if (focusedPanel === "list" && direction === "left") {
-                onEnterHeader?.("left");
+        const fi = focusedItemRef.current;
+        if (key.name === "up" || key.name === "down") {
+            if (fi !== "list") {
                 key.preventDefault();
                 return;
             }
-            if (focusedPanel === "actions" && direction === "right") {
-                onEnterHeader?.("right");
-                key.preventDefault();
-                return;
+            if (key.name === "up") {
+                setSelectedIndex((i) => Math.max(0, i - 1));
             }
-            setFocusedPanel((p) => (p === "list" ? "actions" : "list"));
+            else {
+                setSelectedIndex((i) => Math.min(projects.length - 1, i + 1));
+            }
+            key.preventDefault();
+            return;
+        }
+        if (key.name === "left" || key.name === "right") {
             key.preventDefault();
             return;
         }
         if (key.name === "return" || key.name === "enter") {
-            if (focusedPanel === "list") {
-                setFocusedPanel("actions");
+            if (fi === "list") {
+                setFocusIndex(1);
             }
-            else {
-                runAction(selectedAction);
+            else if (fi === "edit") {
+                if (selectedProject && !selectedProject.isSystem)
+                    setSubModal("edit");
+            }
+            else if (fi === "delete") {
+                if (selectedProject && !selectedProject.isSystem)
+                    setSubModal("delete");
             }
             key.preventDefault();
             return;
@@ -102,12 +112,12 @@ export function ProjectsPage(props) {
         { key: "edit", label: t("project.editProjectLabel") },
         { key: "delete", label: t("project.deleteProjectLabel") },
     ];
-    return (_jsxs("box", { style: { flexDirection: "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { title: t("project.projectsTitle"), border: true, borderColor: focusedPanel === "list" ? ENTITY_COLORS.project : "#1e3a2a", style: { width: "40%", flexDirection: "column", backgroundColor: "#0b0b0b", flexShrink: 0 }, children: [_jsxs("text", { fg: "#9ca3af", children: [t("project.keyNewHint"), " | ", t("project.keyEditHint"), " | ", t("project.keyDeleteHint")] }), projects.map((project, index) => {
+    return (_jsxs("box", { style: { flexDirection: "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { title: t("project.projectsTitle"), border: true, borderColor: focusedItem === "list" ? ENTITY_COLORS.project : "#1e3a2a", style: { width: "40%", flexDirection: "column", backgroundColor: "#0b0b0b", flexShrink: 0 }, children: [_jsxs("text", { fg: "#9ca3af", children: [t("project.keyNewHint"), " | ", t("project.keyEditHint"), " | ", t("project.keyDeleteHint")] }), projects.map((project, index) => {
                         const isSelected = index === clampedIndex;
                         const bg = isSelected ? "#1e3a8a" : undefined;
                         const count = loopCount(project.id);
-                        return (_jsx("box", { backgroundColor: bg, onMouseDown: () => { setSelectedIndex(index); setFocusedPanel("list"); }, style: { height: 1 }, children: _jsxs("text", { children: [isSelected ? "› " : "  ", _jsx("span", { fg: project.color, children: "\u25CF" }), ` ${project.name} `, _jsx("span", { fg: "#6b7280", children: `(${count})` })] }) }, project.id));
-                    })] }), _jsxs("box", { style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", padding: 1 }, children: selectedProject ? (_jsxs(_Fragment, { children: [_jsxs("text", { children: [_jsx("span", { fg: selectedProject.color, children: "\u25CF" }), ` `, _jsx("strong", { children: selectedProject.name })] }), _jsx("text", { fg: "#6b7280", children: t("project.loopCount", { count: String(loopCount(selectedProject.id)) }) }), selectedProject.isSystem ? (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) : null] })) : (_jsx("text", { fg: "#9ca3af", children: t("project.noLoops") })) }), _jsx("box", { border: true, borderColor: focusedPanel === "actions" ? ENTITY_COLORS.project : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, paddingLeft: 1, backgroundColor: "#0b0b0b", alignItems: "center", justifyContent: selectedProject?.isSystem ? "center" : "flex-start" }, children: selectedProject && !selectedProject.isSystem ? (actions.map((action, i) => (_jsx(ProjectActionButton, { label: action.label, selected: focusedPanel === "actions" && selectedAction === i, onMouseDown: () => { setFocusedPanel("actions"); runAction(i); } }, action.key)))) : (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) })] }), subModal === "create" ? (_jsx(CreateProjectModal, { onDone: async (project) => {
+                        return (_jsx("box", { backgroundColor: bg, onMouseDown: () => { setSelectedIndex(index); setFocusIndex(0); }, style: { height: 1 }, children: _jsxs("text", { children: [isSelected ? "› " : "  ", _jsx("span", { fg: project.color, children: "\u25CF" }), ` ${project.name} `, _jsx("span", { fg: "#6b7280", children: `(${count})` })] }) }, project.id));
+                    })] }), _jsxs("box", { style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { flexGrow: 1, flexDirection: "column", backgroundColor: "#0b0b0b", padding: 1 }, children: selectedProject ? (_jsxs(_Fragment, { children: [_jsxs("text", { children: [_jsx("span", { fg: selectedProject.color, children: "\u25CF" }), ` `, _jsx("strong", { children: selectedProject.name })] }), _jsx("text", { fg: "#6b7280", children: t("project.loopCount", { count: String(loopCount(selectedProject.id)) }) }), selectedProject.isSystem ? (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) : null] })) : (_jsx("text", { fg: "#9ca3af", children: t("project.noLoops") })) }), _jsx("box", { border: true, borderColor: focusedItem === "edit" || focusedItem === "delete" ? ENTITY_COLORS.project : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, paddingLeft: 1, backgroundColor: "#0b0b0b", alignItems: "center", justifyContent: selectedProject?.isSystem ? "center" : "flex-start" }, children: selectedProject && !selectedProject.isSystem ? (actions.map((action, i) => (_jsx(ProjectActionButton, { label: action.label, selected: isFocused(action.key), onMouseDown: () => { setFocusIndex(i + 1); runAction(i); } }, action.key)))) : (_jsx("text", { fg: "#9ca3af", children: t("project.systemLabel") })) })] }), subModal === "create" ? (_jsx(CreateProjectModal, { onDone: async (project) => {
                     setSubModal("none");
                     await onRefresh();
                     const newIndex = projects.findIndex((p) => p.id === project.id);

package/dist/board/components/SearchSelect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useRef, useState, useMemo } from "react";
+import { useRef, useState, useMemo, useEffect } from "react";
 import { useKeyboard } from "@opentui/react";
 import { t } from "../../i18n/index.js";
 import { useInputShortcuts } from "../hooks/useInputShortcuts.js";
@@ -11,7 +11,7 @@ export function SearchSelect(props) {
     const inputRef = useRef(null);
     const [filter, setFilter] = useState("");
     const [selectedIndex, setSelectedIndex] = useState(0);
-    useInputShortcuts(() => focused ? inputRef.current : null);
+    const [userNavigated, setUserNavigated] = useState(false);
     const filtered = useMemo(() => {
         if (!filter)
             return options;
@@ -19,41 +19,74 @@ export function SearchSelect(props) {
         return options.filter((o) => o.name.toLowerCase().includes(q) || o.value.toLowerCase().includes(q));
     }, [options, filter]);
     const currentIdx = filtered.findIndex((o) => o.value === value);
-    const safeSelected = currentIdx >= 0 ? currentIdx : selectedIndex;
-    const clampedSelected = Math.min(safeSelected, Math.max(0, filtered.length - 1));
+    const displaySelected = userNavigated ? selectedIndex : (currentIdx >= 0 ? currentIdx : 0);
+    const clampedSelected = Math.min(displaySelected, Math.max(0, filtered.length - 1));
+    const filteredRef = useRef(filtered);
+    filteredRef.current = filtered;
+    const selectedIdxRef = useRef(clampedSelected);
+    selectedIdxRef.current = clampedSelected;
+    const focusedRef = useRef(focused);
+    focusedRef.current = focused;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const filterRef = useRef(filter);
+    filterRef.current = filter;
+    useEffect(() => {
+        if (focused) {
+            setUserNavigated(false);
+            setSelectedIndex(currentIdx >= 0 ? currentIdx : 0);
+        }
+        else {
+            setFilter("");
+            setUserNavigated(false);
+        }
+    }, [focused]);
+    useInputShortcuts(() => focusedRef.current ? inputRef.current : null);
     useKeyboard((key) => {
-        if (!focused)
+        if (!focusedRef.current)
             return;
         const name = key.name;
         if (name === "up" || name === "k") {
-            if (filtered.length > 0) {
-                setSelectedIndex((i) => i <= 0 ? filtered.length - 1 : i - 1);
+            const list = filteredRef.current;
+            if (list.length > 0) {
+                const cur = selectedIdxRef.current;
+                const next = cur <= 0 ? list.length - 1 : cur - 1;
+                setSelectedIndex(next);
+                setUserNavigated(true);
             }
             key.preventDefault();
             key.stopPropagation();
             return;
         }
         if (name === "down" || name === "j") {
-            if (filtered.length > 0) {
-                setSelectedIndex((i) => i >= filtered.length - 1 ? 0 : i + 1);
+            const list = filteredRef.current;
+            if (list.length > 0) {
+                const cur = selectedIdxRef.current;
+                const next = cur >= list.length - 1 ? 0 : cur + 1;
+                setSelectedIndex(next);
+                setUserNavigated(true);
             }
             key.preventDefault();
             key.stopPropagation();
             return;
         }
         if (name === "return" || name === "enter") {
-            const option = filtered[clampedSelected];
+            const list = filteredRef.current;
+            const option = list[selectedIdxRef.current];
             if (option) {
-                onChange(option.value);
+                onChangeRef.current(option.value);
             }
             key.preventDefault();
             key.stopPropagation();
             return;
         }
         if (name === "escape") {
-            if (filter) {
+            if (filterRef.current) {
                 setFilter("");
                 setSelectedIndex(0);
+                setUserNavigated(false);
+                if (inputRef.current)
+                    inputRef.current.value = "";
             }
             key.preventDefault();
             key.stopPropagation();
@@ -62,32 +95,31 @@ export function SearchSelect(props) {
         if (name === "backspace") {
             setFilter((f) => f.slice(0, -1));
             setSelectedIndex(0);
+            setUserNavigated(false);
             key.preventDefault();
             key.stopPropagation();
             return;
         }
         if (key.ctrl)
             return;
+        let char = null;
         if (name && name.length === 1 && /[a-z0-9 _\-./]/i.test(name)) {
-            setFilter((f) => f + name);
-            setSelectedIndex(0);
-            key.preventDefault();
-            key.stopPropagation();
-            return;
+            char = name;
+        }
+        else if (key.sequence && key.sequence.length === 1 && /[a-z0-9 _\-./]/i.test(key.sequence)) {
+            char = key.sequence;
         }
-        if (key.sequence && key.sequence.length === 1 && /[a-z0-9 _\-./]/i.test(key.sequence)) {
-            setFilter((f) => f + key.sequence);
+        if (char) {
+            setFilter((f) => f + char);
             setSelectedIndex(0);
+            setUserNavigated(false);
             key.preventDefault();
             key.stopPropagation();
             return;
         }
     });
     const listHeight = Math.min(filtered.length, maxHeight);
-    return (_jsxs("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { style: { height: 3, flexDirection: "row", alignItems: "center" }, children: [_jsx("text", { fg: "#6b7280", children: "  / " }), _jsx("input", { ref: inputRef, focused: focused, value: filter, placeholder: placeholder, onInput: (v) => {
-                            setFilter(v);
-                            setSelectedIndex(0);
-                        } })] }), _jsx("box", { style: { flexDirection: "column", height: listHeight }, children: filtered.map((option, i) => {
+    return (_jsxs("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "column", backgroundColor: focused ? "#0f172a" : "#0b0b0b" }, children: [_jsxs("box", { style: { height: 3, flexDirection: "row", alignItems: "center", paddingLeft: 1 }, children: [_jsx("text", { fg: "#6b7280", children: "/ " }), _jsx("text", { fg: filter ? "#e5e7eb" : "#6b7280", children: filter || placeholder })] }), _jsx("box", { style: { flexDirection: "column", height: listHeight }, children: filtered.map((option, i) => {
                     const isSelected = i === clampedSelected;
                     const isActive = option.value === value;
                     const prefix = isSelected ? "› " : "  ";

package/dist/board/components/TaskBrowser.js

@@ -5,6 +5,7 @@ import { t } from "../../i18n/index.js";
 import { commandLine, truncate } from "../format.js";
 import { useHoverState } from "../hooks/useHoverState.js";
 import { HOVER_BG, ENTITY_COLORS } from "../../config/constants.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
 function fit(text, width) {
     if (width <= 0)
         return "";
@@ -67,12 +68,13 @@ function TaskNavRow(props) {
     return (_jsx("box", { id: id, onMouseDown: handleClick, backgroundColor: bg, ...hoverProps, children: _jsxs("text", { fg: fg, children: [isSelected ? "›" : " ", " ", fit(name, nameW), "  ", fit(truncCmd, cmdW), "  ", fit(chains, chainsW)] }) }));
 }
 export function TaskInspector(props) {
-    const { task } = props;
+    const { task, onCopy } = props;
     if (!task) {
         return (_jsx("box", { title: t("board.inspectorTitle"), border: true, style: { backgroundColor: "#0b0b0b" }, children: _jsx("text", { fg: "#9ca3af", children: t("board.inspectorEmpty") }) }));
     }
     const cmd = commandLine(task.command, task.commandArgs);
-    return (_jsxs("box", { title: t("board.inspectorTitle"), border: true, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsxs("text", { children: [_jsx("strong", { children: t("board.fieldId") }), " ", task.id] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelName") }), " ", task.name] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.fieldCommand") }), " ", cmd] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnSuccess") }), " ", task.onSuccessTaskId ?? t("board.taskNone")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnFailure") }), " ", task.onFailureTaskId ?? t("board.taskNone")] })] }));
+    const { isHovered, hoverProps } = useHoverState();
+    return (_jsxs("box", { title: t("board.inspectorTitle"), border: true, style: { flexDirection: "column", backgroundColor: "#0b0b0b" }, children: [_jsxs("text", { children: [_jsx("strong", { children: t("board.fieldId") }), " ", task.id] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelName") }), " ", task.name] }), _jsxs("box", { style: { flexDirection: "row" }, children: [_jsxs("text", { children: [_jsx("strong", { children: t("board.fieldCommand") }), " ", cmd] }), _jsx("box", { border: true, borderColor: isHovered ? "#38bdf8" : "#374151", onMouseDown: () => { copyToClipboard(cmd); onCopy?.(cmd); }, style: { paddingLeft: 1, paddingRight: 1, marginLeft: 1, backgroundColor: isHovered ? HOVER_BG : "#0b0b0b" }, ...hoverProps, children: _jsx("text", { fg: isHovered ? "#38bdf8" : "#6b7280", children: "\u2398" }) })] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnSuccess") }), " ", task.onSuccessTaskId ?? t("board.taskNone")] }), _jsxs("text", { children: [_jsx("strong", { children: t("board.taskLabelOnFailure") }), " ", task.onFailureTaskId ?? t("board.taskNone")] })] }));
 }
 export function TaskActionButtons(props) {
     const { task, focused, selectedAction, selectable = true, onAction } = props;

package/dist/board/components/TaskForm.js

@@ -6,6 +6,8 @@ import { t } from "../../i18n/index.js";
 import { createTask, updateTask, listTasks } from "../daemon.js";
 import { useHoverState } from "../hooks/useHoverState.js";
 import { useInputShortcuts } from "../hooks/useInputShortcuts.js";
+import { useTabNav } from "../hooks/useTabNav.js";
+import { copyToClipboard } from "../../shared/clipboard.js";
 import { HOVER_BG } from "../../config/constants.js";
 import { SearchSelect } from "./SearchSelect.js";
 const taskFields = ["name", "command", "onSuccessTaskId", "onFailureTaskId"];
@@ -23,20 +25,23 @@ function taskInitialValues(task) {
 export function TaskForm(props) {
     const [values, setValues] = useState(taskInitialValues(props.editTask));
     const valuesRef = useRef(values);
-    const [focusIndex, setFocusIndex] = useState(0);
     const [error, setError] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [allTasks, setAllTasks] = useState([]);
     const inputRef = useRef(null);
     const { width: termWidth } = useTerminalDimensions();
     const btnWidth = Math.max(10, Math.min(14, Math.floor(termWidth / 6)));
+    const navItems = [...taskFields, "save", "cancel"];
+    const { setFocusIndex, focusedItem, isFocused } = useTabNav(navItems);
+    const focusedItemRef = useRef(focusedItem);
+    focusedItemRef.current = focusedItem;
     useInputShortcuts(() => {
-        if (focusIndex >= saveIndex)
-            return null;
-        return inputRef.current;
+        const fi = focusedItemRef.current;
+        if (fi != null && fi !== "save" && fi !== "cancel" && fi !== "onSuccessTaskId" && fi !== "onFailureTaskId") {
+            return inputRef.current;
+        }
+        return null;
     });
-    const saveIndex = taskFields.length;
-    const cancelIndex = taskFields.length + 1;
     function updateValues(next) {
         valuesRef.current = next;
         setValues(next);
@@ -45,39 +50,13 @@ export function TaskForm(props) {
         void listTasks().then(setAllTasks).catch(() => { });
     });
     useKeyboard((key) => {
-        if (key.name === "tab") {
-            setFocusIndex((i) => {
-                const next = key.shift ? i - 1 : i + 1;
-                if (next < 0)
-                    return cancelIndex;
-                if (next > cancelIndex)
-                    return 0;
-                return next;
-            });
-            key.preventDefault();
-            return;
-        }
-        if (key.name === "up" || key.name === "down") {
-            const field = taskFields[focusIndex];
-            if (field === "onSuccessTaskId" || field === "onFailureTaskId")
-                return;
-            setFocusIndex((i) => {
-                const next = key.name === "up" ? i - 1 : i + 1;
-                if (next < 0)
-                    return cancelIndex;
-                if (next > cancelIndex)
-                    return 0;
-                return next;
-            });
-            key.preventDefault();
-            return;
-        }
         if (key.name === "return" || key.name === "enter") {
-            if (focusIndex === saveIndex) {
+            const fi = focusedItemRef.current;
+            if (fi === "save") {
                 void submit(valuesRef.current);
                 key.preventDefault();
             }
-            else if (focusIndex === cancelIndex) {
+            else if (fi === "cancel") {
                 props.onCancel();
                 key.preventDefault();
             }
@@ -151,22 +130,22 @@ export function TaskForm(props) {
     return (_jsxs("box", { title: title, border: true, style: { flexDirection: "column", flexGrow: 1, padding: 1, backgroundColor: "#0b0b0b" }, children: [_jsx("box", { style: { flexDirection: "column", flexGrow: 1 }, children: Array.from({ length: Math.ceil(taskFields.length / 2) }, (_, row) => {
                     const leftField = taskFields[row * 2];
                     const rightField = row * 2 + 1 < taskFields.length ? taskFields[row * 2 + 1] : null;
-                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(TaskFormRow, { field: leftField, index: row * 2, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, inputRef: inputRef, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(TaskFormRow, { field: rightField, index: row * 2 + 1, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, inputRef: inputRef, style: { width: "50%" } })) : (_jsx("box", { style: { width: "50%" } }))] }, row));
-                }) }), _jsxs("box", { style: { flexDirection: "row", height: 3, marginBottom: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(HoverButton, { label: isSubmitting ? t("board.saving") : props.mode === "edit" ? t("board.save") : t("board.create"), onMouseDown: () => void submit(valuesRef.current), selected: focusIndex === saveIndex, width: btnWidth, marginRight: 1 }), _jsx(HoverButton, { label: t("board.cancel"), onMouseDown: props.onCancel, selected: focusIndex === cancelIndex, width: btnWidth })] }), _jsx("text", { fg: "#9ca3af", children: t("board.formNav") }), error ? _jsx("text", { fg: "#f87171", children: error }) : null] }));
+                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(TaskFormRow, { field: leftField, index: row * 2, focused: isFocused(leftField), values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, inputRef: inputRef, onCopy: props.onCopy, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(TaskFormRow, { field: rightField, index: row * 2 + 1, focused: isFocused(rightField), values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, chainOptions: chainOptions, inputRef: inputRef, onCopy: props.onCopy, style: { width: "50%" } })) : (_jsx("box", { style: { width: "50%" } }))] }, row));
+                }) }), _jsxs("box", { style: { flexDirection: "row", height: 3, marginBottom: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(HoverButton, { label: isSubmitting ? t("board.saving") : props.mode === "edit" ? t("board.save") : t("board.create"), onMouseDown: () => void submit(valuesRef.current), selected: isFocused("save"), width: btnWidth, marginRight: 1 }), _jsx(HoverButton, { label: t("board.cancel"), onMouseDown: props.onCancel, selected: isFocused("cancel"), width: btnWidth })] }), _jsx("text", { fg: "#9ca3af", children: t("board.formNav") }), error ? _jsx("text", { fg: "#f87171", children: error }) : null] }));
 }
 function TaskFormRow(props) {
-    const { field, index, focusIndex, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, chainOptions, inputRef, style } = props;
-    const isFocused = focusIndex === index;
+    const { field, index, focused, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, chainOptions, inputRef, onCopy, style } = props;
     const isSelect = field === "onSuccessTaskId" || field === "onFailureTaskId";
     const selectOpts = isSelect ? chainOptions : [];
-    return (_jsxs("box", { style: { flexDirection: "column", ...style }, children: [_jsx("text", { fg: isFocused ? "#38bdf8" : "#e5e7eb", children: labels[field] }), _jsx("text", { fg: "#6b7280", children: hints[field] }), isSelect ? (_jsx(SearchSelect, { options: selectOpts, value: values[field], onChange: (v) => updateValues({ ...valuesRef.current, [field]: v }), focused: isFocused })) : (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b" }, children: _jsx("input", { ref: inputRef, focused: isFocused, value: values[field], placeholder: field === "command" ? t("board.exampleCommand") : "", onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
-                        if (index < taskFields.length - 1) {
-                            setFocusIndex(index + 1);
-                        }
-                        else {
-                            void submit(valuesRef.current);
-                        }
-                    } }) }))] }));
+    const copyHover = useHoverState();
+    return (_jsxs("box", { style: { flexDirection: "column", ...style }, children: [_jsx("text", { fg: focused ? "#38bdf8" : "#e5e7eb", children: labels[field] }), _jsx("text", { fg: "#6b7280", children: hints[field] }), isSelect ? (_jsx(SearchSelect, { options: selectOpts, value: values[field], onChange: (v) => updateValues({ ...valuesRef.current, [field]: v }), focused: focused })) : (_jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { height: 3, width: field === "command" ? "92%" : "100%", backgroundColor: "#0b0b0b" }, children: _jsx("input", { ref: inputRef, focused: focused, value: values[field], placeholder: field === "command" ? t("board.exampleCommand") : "", onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
+                                if (index < taskFields.length - 1) {
+                                    setFocusIndex(index + 1);
+                                }
+                                else {
+                                    void submit(valuesRef.current);
+                                }
+                            } }) }), field === "command" ? (_jsx("box", { border: true, borderColor: copyHover.isHovered ? "#38bdf8" : "#374151", onMouseDown: () => { copyToClipboard(valuesRef.current.command); onCopy?.(valuesRef.current.command); }, style: { width: "8%", height: 3, justifyContent: "center", alignItems: "center", backgroundColor: copyHover.isHovered ? HOVER_BG : "#0b0b0b" }, ...copyHover.hoverProps, children: _jsx("text", { fg: copyHover.isHovered ? "#38bdf8" : "#6b7280", children: "\u2398" }) })) : null] }))] }));
 }
 function HoverButton(props) {
     const { isHovered, hoverProps } = useHoverState();

package/dist/board/focus-context.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useRef, useEffect } from "react";
+import { useKeyboard } from "@opentui/react";
+const FocusContext = createContext(null);
+export function useFocusContext() {
+    return useContext(FocusContext);
+}
+export function FocusProvider(props) {
+    const itemsRef = useRef(new Map());
+    const [focusedOrder, setFocusedOrderState] = useState(null);
+    const [active, setActive] = useState(true);
+    useEffect(() => {
+        if (focusedOrder === null && itemsRef.current.size > 0) {
+            const minOrder = Math.min(...itemsRef.current.keys());
+            setFocusedOrderState(minOrder);
+        }
+    }, [itemsRef.current.size]);
+    const registerItem = useCallback((order, id) => {
+        itemsRef.current.set(order, { order, id });
+        if (focusedOrder === null) {
+            setFocusedOrderState(order);
+        }
+    }, [focusedOrder]);
+    const unregisterItem = useCallback((id) => {
+        for (const [order, entry] of itemsRef.current) {
+            if (entry.id === id) {
+                itemsRef.current.delete(order);
+                break;
+            }
+        }
+    }, []);
+    const setFocusedOrder = useCallback((order) => {
+        setFocusedOrderState(order);
+    }, []);
+    const isFocused = useCallback((order) => {
+        return focusedOrder === order;
+    }, [focusedOrder]);
+    const focusNext = useCallback(() => {
+        const orders = Array.from(itemsRef.current.keys()).sort((a, b) => a - b);
+        if (orders.length === 0)
+            return;
+        const currentIdx = orders.indexOf(focusedOrder ?? orders[0]);
+        const nextIdx = (currentIdx + 1) % orders.length;
+        setFocusedOrderState(orders[nextIdx]);
+    }, [focusedOrder]);
+    const focusPrev = useCallback(() => {
+        const orders = Array.from(itemsRef.current.keys()).sort((a, b) => a - b);
+        if (orders.length === 0)
+            return;
+        const currentIdx = orders.indexOf(focusedOrder ?? orders[0]);
+        const prevIdx = (currentIdx - 1 + orders.length) % orders.length;
+        setFocusedOrderState(orders[prevIdx]);
+    }, [focusedOrder]);
+    useKeyboard((key) => {
+        if (!active)
+            return;
+        if (key.name === "tab") {
+            if (key.shift) {
+                focusPrev();
+            }
+            else {
+                focusNext();
+            }
+            key.preventDefault();
+        }
+    });
+    const value = {
+        registerItem,
+        unregisterItem,
+        focusedOrder,
+        setFocusedOrder,
+        isFocused,
+        focusNext,
+        focusPrev,
+        active,
+    };
+    return _jsx(FocusContext.Provider, { value: value, children: props.children });
+}
+export function useFocusable(order, id) {
+    const ctx = useContext(FocusContext);
+    const registered = useRef(false);
+    useEffect(() => {
+        if (!ctx)
+            return;
+        ctx.registerItem(order, id);
+        registered.current = true;
+        return () => {
+            ctx.unregisterItem(id);
+        };
+    }, [ctx, order, id]);
+    if (!ctx) {
+        return { isFocused: false, setFocused: () => { } };
+    }
+    return {
+        isFocused: ctx.isFocused(order),
+        setFocused: () => ctx.setFocusedOrder(order),
+    };
+}

package/dist/board/hooks/useBoardKeybindings.js

@@ -118,14 +118,14 @@ const panelHandlers = {
     },
     "header-tasks": (key, p) => {
         if (key === "return" || key === "enter") {
-            p.onViewTasks?.();
+            p.onViewProjects?.();
             return true;
         }
         return false;
     },
     "header-projects": (key, p) => {
         if (key === "return" || key === "enter") {
-            p.onViewProjects?.();
+            p.onViewTasks?.();
             return true;
         }
         return false;
@@ -250,20 +250,6 @@ export function useBoardKeybindings(params) {
             key.preventDefault();
             return;
         }
-        if (name === "tab" && view !== "board") {
-            const HEADER_PANELS = ["header-tasks", "header-projects", "header-new"];
-            const isHeader = HEADER_PANELS.includes(focusedPanel);
-            const direction = key.shift ? "left" : "right";
-            if (isHeader) {
-                const idx = HEADER_PANELS.indexOf(focusedPanel);
-                const nextIdx = direction === "right"
-                    ? (idx + 1) % HEADER_PANELS.length
-                    : (idx - 1 + HEADER_PANELS.length) % HEADER_PANELS.length;
-                setFocusedPanel(HEADER_PANELS[nextIdx]);
-                key.preventDefault();
-                return;
-            }
-        }
         if (view !== "board" && (name === "return" || name === "enter")) {
             if (view === "task-list") {
                 if (focusedPanel === "header-tasks") {
@@ -294,7 +280,7 @@ export function useBoardKeybindings(params) {
                     return;
                 }
                 if (focusedPanel === "header-new") {
-                    onViewProjects?.();
+                    onAddLoop?.();
                     key.preventDefault();
                     return;
                 }
@@ -319,42 +305,14 @@ export function useBoardKeybindings(params) {
         }
         if (view !== "board")
             return;
-        if (name === "tab") {
-            const direction = key.shift ? "left" : "right";
-            if (focusedPanel === "actions") {
-                const actionCount = selected ? getActionCount(selected.status) : 0;
-                if (direction === "left" && selectedAction === 0) {
-                    setFocusedPanel((p) => nextPanel(p, "left"));
-                }
-                else if (direction === "right" && selectedAction === actionCount - 1) {
-                    setFocusedPanel((p) => nextPanel(p, "right"));
-                }
-                else {
-                    setSelectedAction((i) => direction === "right"
-                        ? Math.min(actionCount - 1, i + 1)
-                        : Math.max(0, i - 1));
-                }
-            }
-            else {
-                const next = nextPanel(focusedPanel, direction);
-                if (next === "actions") {
-                    setFocusedPanel("actions");
-                    setSelectedAction(0);
-                }
-                else {
-                    setFocusedPanel(next);
-                }
-            }
-            key.preventDefault();
-            return;
-        }
         const globalHandler = GLOBAL_KEYS[name];
         if (globalHandler) {
             globalHandler({ destroyLogSocket, onQuit, setHelpOpen, setEditTarget, setEditTask, push, onAction });
             key.preventDefault();
             return;
         }
-        const panelHandler = panelHandlers[focusedPanel];
+        const isActionPanel = typeof focusedPanel === "string" && focusedPanel.startsWith("action-");
+        const panelHandler = isActionPanel ? panelHandlers["actions"] : panelHandlers[focusedPanel];
         if (panelHandler?.(name, {
             setSearchActive, setFilters, setSort, setEditTarget, push,
             setSelectedIndex, setSelectedRunIndex, setFocusedPanel, selectedRunCount, selected,