loop-task 1.5.0 → 1.5.1

package/README.md

@@ -290,29 +290,28 @@ gh issue edit {{number}} --add-label "refining" --remove-label "to refine"
 
 interpolated: `gh issue edit 123 --add-label "refining" --remove-label "to refine"`
 
-**Task 3** (chain, onSuccess): Rewrite with AI
+**Task 3** (chain, onSuccess): Rewrite with AI (edits the issue directly)
 
 ```bash
-opencode run "Rewrite this GitHub issue as a detailed user story using project context and return only JSON with fields title and body." --model "opencode/big-pickle"
+opencode run "Rewrite this GitHub issue as a detailed user story using project context. Update the issue title and body directly using gh issue edit. Issue number: {{number}} Original title: {{title}} Original body: {{body}}" --model "opencode/big-pickle"
 ```
 
-stdout: `{"title":"As a user, I want to log in securely","body":"## Acceptance Criteria\n- Login form validates email\n- ..."}`
-context: `{ number: 123, title: "As a user, I want to log in securely", body: "## Acceptance Criteria\n- ..." }`
+interpolated: `opencode run "Rewrite this GitHub issue as a detailed user story using project context. Update the issue title and body directly using gh issue edit. Issue number: 123 Original title: Fix login Original body: It doesn't work" --model "opencode/big-pickle"`
 
-**Task 4** (chain, onSuccess): Apply the rewrite and relabel
+**Task 4** (chain, onSuccess): Relabel as ready to implement
 
 ```bash
-gh issue edit {{number}} --title "{{title}}" --body "{{body}}" --remove-label "refining" --add-label "to implement"
+gh issue edit {{number}} --remove-label "refining" --add-label "to implement"
 ```
 
-interpolated: `gh issue edit 123 --title "As a user, I want to log in securely" --body "## Acceptance Criteria\n- ..." --remove-label "refining" --add-label "to implement"`
+interpolated: `gh issue edit 123 --remove-label "refining" --add-label "to implement"`
 
 ### How it works
 
 1. Task 1 queries the issue and emits a JSON object with `number`, `title`, and `body` via `--jq`. The primary task cannot use `{{key}}` interpolation because the chain context is empty when it runs.
 2. Task 2 receives `{{number}}` interpolated from task 1's context. It relabels the issue from "to refine" to "refining" - no re-query needed.
-3. Task 3 runs opencode, which finds the issue by the "refining" label and rewrites it. It outputs a new JSON object with updated `title` and `body`. Since it uses the same key names, the context is updated with the new values (merge with last-writer-wins).
-4. Task 4 receives `{{number}}` (still 123 from task 1), `{{title}}` and `{{body}}` (now the rewritten versions from task 3). It applies the edits and relabels the issue as "to implement" - no re-query needed.
+3. Task 3 runs opencode, which finds the issue by the "refining" label and rewrites it in place using `gh issue edit`. The AI agent edits the issue directly - no need to parse its stdout as JSON.
+4. Task 4 receives `{{number}}` (still 123 from task 1) and relabels the issue as "to implement" - no re-query needed.
 
 ### Wrapping values with --jq
 
@@ -324,6 +323,50 @@ gh issue list --label "to refine" --json number,title --jq '{number: .[0].number
 
 This stores `{ "number": 123, "title": "Fix login" }` in context instead of overwriting `output`.
 
+### Example: Issue Implementation Chain
+
+A four-task chain that finds an issue to implement, marks it in-progress, runs an AI agent to implement it, then closes it - all without re-querying:
+
+**Task 1** (primary): Find an issue to implement (or exit if one is already in progress)
+
+```bash
+gh issue list --label "implementing" --limit 1 --json number --jq 'length == 0' | grep -q true && gh issue list --label "to implement" --limit 1 --json number,title,body --jq '{number: .[0].number, title: .[0].title, body: .[0].body}'
+```
+
+stdout: `{"number":456,"title":"Add dark mode toggle","body":"Users want a dark theme"}`
+context: `{ number: 456, title: "Add dark mode toggle", body: "Users want a dark theme" }`
+
+If an issue with the "implementing" label already exists, `length == 0` returns `false`, `grep -q true` fails, and the `&&` short-circuits - the chain does not fire. The loop waits for the next iteration.
+
+**Task 2** (chain, onSuccess): Mark as in-progress
+
+```bash
+gh issue edit {{number}} --add-label "implementing" --remove-label "to implement"
+```
+
+interpolated: `gh issue edit 456 --add-label "implementing" --remove-label "to implement"`
+
+**Task 3** (chain, onSuccess): Implement with AI agent
+
+```bash
+git fetch origin && git checkout main && git reset --hard origin/main && opencode run "Implement this GitHub issue using /ob-autopilot and return only JSON with fields title and body after implementation is completed, merged to main, pushed to origin and the issue has been referenced in GitHub. Issue title: {{title}} Issue body: {{body}}" --model "opencode/big-pickle"
+```
+
+interpolated: `git fetch origin && git checkout main && git reset --hard origin/main && opencode run "Implement this GitHub issue using /ob-autopilot ... Issue title: Add dark mode toggle Issue body: Users want a dark theme" --model "opencode/big-pickle"`
+
+stdout: `{"title":"Add dark mode toggle","body":"Implemented dark mode toggle with CSS variables..."}`
+context: `{ number: 456, title: "Add dark mode toggle", body: "Implemented dark mode toggle..." }`
+
+**Task 4** (chain, onSuccess): Verify sync and close the issue
+
+```bash
+git push && git fetch origin && [ "$(git rev-parse HEAD)" = "$(git rev-parse origin/main)" ] && gh issue edit {{number}} --remove-label "implementing" && gh issue close {{number}}
+```
+
+interpolated: `git push && git fetch origin && [ "$(git rev-parse HEAD)" = "$(git rev-parse origin/main)" ] && gh issue edit 456 --remove-label "implementing" && gh issue close 456`
+
+The `git rev-parse` check ensures local and remote are in sync before closing - if the push failed or remote is ahead, the command fails and the issue stays open.
+
 ## Development
 
 Requires [Bun](https://bun.sh) >= 1.2 for package management and the board, and [Node.js](https://nodejs.org) >= 20 for the CLI and daemon.

package/dist/board/App.js

@@ -12,7 +12,7 @@ import { FilterBar } from "./components/FilterBar.js";
 import { Navigator } from "./components/Navigator.js";
 import { Inspector } from "./components/Inspector.js";
 import { RunHistory } from "./components/RunHistory.js";
-import { ActionButtons } from "./components/ActionButtons.js";
+import { ActionButtons, getActionKeys } from "./components/ActionButtons.js";
 import { HelpModal } from "./components/HelpModal.js";
 import { ContextHelpModal } from "./components/ContextHelpModal.js";
 import { Footer } from "./components/Footer.js";
@@ -28,6 +28,7 @@ import { fetchRunLog, deleteLoop, pauseLoop, resumeLoop, stopLoop, playLoop, tri
 import { useBreakpoint } from "./hooks/useBreakpoint.js";
 import { useRouter } from "./router.js";
 import { POLL_MS } from "../config/constants.js";
+import { useTabNav } from "./hooks/useTabNav.js";
 const VIEW_TO_MODE = {
     create: "create",
     "task-create": "task",
@@ -68,14 +69,12 @@ export function App(props) {
     const [pendingTaskSelection, setPendingTaskSelection] = useState(null);
     const [selectedRunIndex, setSelectedRunIndex] = useState(0);
     const [selectedAction, setSelectedAction] = useState(0);
-    const [focusedPanel, setFocusedPanel] = useState("loops");
     const [logModalRun, setLogModalRun] = useState(null);
     const [logModalLines, setLogModalLines] = useState([]);
     const [logModalLoading, setLogModalLoading] = useState(false);
     const [tasks, setTasks] = useState([]);
     const [taskSelectedIndex, setTaskSelectedIndex] = useState(0);
     const [taskSelectedAction, setTaskSelectedAction] = useState(0);
-    const [taskFocusedPanel, setTaskFocusedPanel] = useState("tasks");
     const [taskSearchActive, setTaskSearchActive] = useState(false);
     const [taskQuery, setTaskQuery] = useState("");
     const [projects, setProjects] = useState([]);
@@ -282,6 +281,30 @@ export function App(props) {
         pop();
         pushToast("success", updated ? t("board.toastTaskUpdated", { id }) : t("board.toastTaskCreated", { id }));
     };
+    const FORM_VIEWS = ["create", "task-create", "task-edit"];
+    const isFormView = FORM_VIEWS.includes(view);
+    const actionKeys = selected ? getActionKeys(selected.status) : [];
+    const actionItems = actionKeys.map((k) => `action-${k}`);
+    const boardItems = ["search", "project-filter", "status", "sort", "header-1", "header-2", "header-3", "navigator", "run-history", ...actionItems];
+    const taskItems = ["task-search", "header-1", "header-2", "header-3", "task-list", ...(["select", "edit", "delete"].map((k) => `task-action-${k}`))];
+    const projectItems = ["header-1", "header-2", "header-3"];
+    const navItems = isFormView ? [] : view === "task-list" ? taskItems : view === "projects" ? projectItems : boardItems;
+    const { focusedItem: navFocused, setFocusIndex: setNavIndex, enabled: navEnabled } = useTabNav(navItems);
+    const HEADER_MAP = { "header-1": "header-tasks", "header-2": "header-projects", "header-3": "header-new" };
+    const isHeaderFocused = navFocused === "header-1" || navFocused === "header-2" || navFocused === "header-3";
+    const derivedFocusedPanel = isHeaderFocused ? HEADER_MAP[navFocused] : navFocused ?? "loops";
+    const actionIdx = navFocused?.startsWith("action-") ? actionKeys.indexOf(navFocused.slice("action-".length)) : -1;
+    const derivedSelectedAction = actionIdx >= 0 ? actionIdx : selectedAction;
+    const taskActionIdx = navFocused?.startsWith("task-action-") ? ["select", "edit", "delete"].indexOf(navFocused.slice("task-action-".length)) : -1;
+    const derivedTaskAction = taskActionIdx >= 0 ? taskActionIdx : taskSelectedAction;
+    const taskPanelMap = {
+        "task-search": "search",
+        "task-list": "tasks",
+        "task-action-select": "actions",
+        "task-action-edit": "actions",
+        "task-action-delete": "actions",
+    };
+    const derivedTaskPanel = (navFocused ? taskPanelMap[navFocused] : undefined) ?? "tasks";
     useBoardKeybindings({
         confirm,
         confirmChoice,
@@ -309,9 +332,13 @@ export function App(props) {
         selectedRunIndex,
         setSelectedRunIndex,
         selectedRunCount: selected?.runHistory?.length ?? 0,
-        focusedPanel,
-        setFocusedPanel,
-        selectedAction,
+        focusedPanel: derivedFocusedPanel,
+        setFocusedPanel: ((p) => {
+            const navIdx = navItems.indexOf(p);
+            if (navIdx >= 0)
+                setNavIndex(navIdx);
+        }),
+        selectedAction: derivedSelectedAction,
         setSelectedAction,
         onAction: handleAction,
         onOpenRunLog: handleOpenRunLog,
@@ -329,10 +356,23 @@ export function App(props) {
         tasks: filteredTasks,
         taskSelectedIndex,
         setTaskSelectedIndex,
-        taskSelectedAction,
-        setTaskSelectedAction,
-        taskFocusedPanel,
-        setTaskFocusedPanel,
+        taskSelectedAction: derivedTaskAction,
+        setTaskSelectedAction: ((updater) => {
+            const nextIdx = typeof updater === "function" ? updater(derivedTaskAction) : updater;
+            const taskActions = ["select", "edit", "delete"];
+            const actionKey = taskActions[nextIdx];
+            if (actionKey) {
+                const navIdx = navItems.indexOf(`task-action-${actionKey}`);
+                if (navIdx >= 0)
+                    setNavIndex(navIdx);
+            }
+        }),
+        taskFocusedPanel: derivedTaskPanel,
+        setTaskFocusedPanel: ((p) => {
+            const navIdx = navItems.indexOf(p === "search" ? "task-search" : p === "actions" ? "task-actions" : "task-list");
+            if (navIdx >= 0)
+                setNavIndex(navIdx);
+        }),
         taskSearchActive,
         setTaskSearchActive,
         taskQuery,
@@ -340,10 +380,8 @@ export function App(props) {
         onTaskAction: handleTaskAction,
         onCancel: cancelTaskList,
         onCreateTask: handleCreateTask,
-        onEnterHeader: (direction) => {
-            setFocusedPanel(direction === "right" ? "header-tasks" : "header-new");
-        },
         onToggleContextHelp: () => setContextHelpOpen((v) => !v),
+        headerFocused: isHeaderFocused,
         selectable: stack.includes("create") || stack.includes("task-edit"),
     });
     const counts = {
@@ -354,16 +392,14 @@ export function App(props) {
         idle: loops.filter((l) => l.status === "idle").length,
     };
     const mode = resolveMode(confirm, searchActive || taskSearchActive, helpOpen, view);
-    return (_jsxs("box", { style: { flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#0b0b0b" }, children: [_jsx(Header, { daemonStatus: daemonStatus, counts: counts, view: view, focusedPanel: focusedPanel, onViewLoops: () => replace("board"), onViewTasks: () => { void refreshTasks(); push("task-list"); }, onViewProjects: () => push("projects"), onAddLoop: () => { setEditTarget(null); push("create"); }, onAddTask: () => { setEditTask(null); push("task-create"); }, onAddProject: () => { if (view === "projects") {
+    return (_jsxs("box", { style: { flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#0b0b0b" }, children: [_jsx(Header, { daemonStatus: daemonStatus, counts: counts, view: view, focusedPanel: derivedFocusedPanel, onViewLoops: () => replace("board"), onViewTasks: () => { void refreshTasks(); push("task-list"); }, onViewProjects: () => push("projects"), onAddLoop: () => { setEditTarget(null); push("create"); }, onAddTask: () => { setEditTask(null); push("task-create"); }, onAddProject: () => { if (view === "projects") {
                     createProjectTriggerRef.current?.();
                 }
                 else {
                     push("projects");
-                } } }), view === "board" ? (_jsx(FilterBar, { filters: filters, sort: sort, searchActive: searchActive, focusedPanel: focusedPanel, onStatusCycle: () => setFilters((prev) => ({ ...prev, status: cycleStatusFilter(prev.status) })), onSortCycle: () => setSort(cycleSortMode(sort)), onSelectProject: () => setProjectsModalOpen(true), currentProjectName: currentProjectId === "all" ? t("project.showAll") : (projects.find(p => p.id === currentProjectId)?.name ?? "Default"), onQueryChange: (value) => setFilters((prev) => ({ ...prev, query: value })), onSearchActivate: () => setSearchActive(true), onSearchDismiss: () => { setSearchActive(false); setFocusedPanel("loops"); } })) : view === "task-list" ? (_jsx(TaskFilterBar, { query: taskQuery, searchActive: taskSearchActive, focusedPanel: taskFocusedPanel, onQueryChange: setTaskQuery, onSearchActivate: () => setTaskSearchActive(true), onSearchDismiss: () => { setTaskSearchActive(false); setTaskFocusedPanel("tasks"); } })) : null, _jsx("box", { style: { flexGrow: 1, backgroundColor: "#0b0b0b" }, children: view === "create" ? (_jsx(CreateView, { mode: editTarget && !cloneMode ? "edit" : "create", editId: editTarget && !cloneMode ? editTarget.id : null, initial: createInitialValues(editTarget, currentProjectId), selectedTaskId: pendingTaskSelection?.id ?? null, selectedTaskName: pendingTaskSelection?.name ?? null, projects: projects, currentProjectId: currentProjectId, onCancel: cancelCreate, onDone: onCreateDone, onChooseTask: handleChooseTask })) : TASK_FORM_VIEWS.has(view) ? (_jsx(TaskForm, { mode: view === "task-edit" ? "edit" : "create", editTask: editTask, onCancel: cancelTask, onDone: onTaskDone })) : view === "task-list" ? (_jsxs("box", { style: { flexDirection: breakpoint === "narrow" ? "column" : "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(TaskNavigator, { visible: filteredTasks, total: tasks.length, selectedIndex: taskClampedIndex, focused: taskFocusedPanel === "tasks", query: taskQuery, onSelect: (index) => { setTaskSelectedIndex(index); setTaskFocusedPanel("tasks"); }, onActivate: (index) => { setTaskSelectedIndex(index); setEditTask(filteredTasks[index] ?? null); push("task-edit"); } }), _jsxs("box", { style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx(TaskInspector, { task: selectedTask }, `ti-${selectedTask?.id}`), _jsx(TaskActionButtons, { task: selectedTask, focused: taskFocusedPanel === "actions", selectedAction: taskSelectedAction, selectable: stack.includes("create") || stack.includes("task-edit"), onAction: handleTaskAction }, `tab-${selectedTask?.id}`)] })] })) : view === "projects" ? (_jsx(ProjectsPage, { projects: projects, loops: loops, onClose: () => pop(), onRefresh: refreshProjects, onOpenCreate: (trigger) => { createProjectTriggerRef.current = trigger; }, onEnterHeader: (direction) => {
-                        setFocusedPanel(direction === "right" ? "header-tasks" : "header-new");
-                    } })) : (_jsxs("box", { style: { flexDirection: breakpoint === "narrow" ? "column" : "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(Navigator, { visible: visible, total: loops.length, selectedIndex: clampedIndex, filters: filters, sort: sort, breakpoint: breakpoint, focused: focusedPanel === "loops", projects: projects, onSelect: (index) => { setSelectedIndex(index); setFocusedPanel("loops"); }, onActivate: (index) => { setSelectedIndex(index); const loop = visible[index]; if (loop) {
+                } } }), view === "board" ? (_jsx(FilterBar, { filters: filters, sort: sort, searchActive: searchActive, focusedPanel: derivedFocusedPanel, onStatusCycle: () => setFilters((prev) => ({ ...prev, status: cycleStatusFilter(prev.status) })), onSortCycle: () => setSort(cycleSortMode(sort)), onSelectProject: () => setProjectsModalOpen(true), currentProjectName: currentProjectId === "all" ? t("project.showAll") : (projects.find(p => p.id === currentProjectId)?.name ?? "Default"), onQueryChange: (value) => setFilters((prev) => ({ ...prev, query: value })), onSearchActivate: () => setSearchActive(true), onSearchDismiss: () => { setSearchActive(false); } })) : view === "task-list" ? (_jsx(TaskFilterBar, { query: taskQuery, searchActive: taskSearchActive, focusedPanel: derivedTaskPanel, onQueryChange: setTaskQuery, onSearchActivate: () => setTaskSearchActive(true), onSearchDismiss: () => { setTaskSearchActive(false); } })) : null, _jsx("box", { style: { flexGrow: 1, backgroundColor: "#0b0b0b" }, children: view === "create" ? (_jsx(CreateView, { mode: editTarget && !cloneMode ? "edit" : "create", editId: editTarget && !cloneMode ? editTarget.id : null, initial: createInitialValues(editTarget, currentProjectId), selectedTaskId: pendingTaskSelection?.id ?? null, selectedTaskName: pendingTaskSelection?.name ?? null, projects: projects, currentProjectId: currentProjectId, onCancel: cancelCreate, onDone: onCreateDone, onChooseTask: handleChooseTask })) : TASK_FORM_VIEWS.has(view) ? (_jsx(TaskForm, { mode: view === "task-edit" ? "edit" : "create", editTask: editTask, onCancel: cancelTask, onDone: onTaskDone })) : view === "task-list" ? (_jsxs("box", { style: { flexDirection: breakpoint === "narrow" ? "column" : "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(TaskNavigator, { visible: filteredTasks, total: tasks.length, selectedIndex: taskClampedIndex, focused: derivedTaskPanel === "tasks", query: taskQuery, onSelect: (index) => { setTaskSelectedIndex(index); }, onActivate: (index) => { setTaskSelectedIndex(index); setEditTask(filteredTasks[index] ?? null); push("task-edit"); } }), _jsxs("box", { style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx(TaskInspector, { task: selectedTask }, `ti-${selectedTask?.id}`), _jsx(TaskActionButtons, { task: selectedTask, focused: taskActionIdx >= 0, selectedAction: derivedTaskAction, selectable: stack.includes("create") || stack.includes("task-edit"), onAction: handleTaskAction }, `tab-${selectedTask?.id}`)] })] })) : view === "projects" ? (_jsx(ProjectsPage, { projects: projects, loops: loops, headerFocused: isHeaderFocused, onClose: () => pop(), onRefresh: refreshProjects, onOpenCreate: (trigger) => { createProjectTriggerRef.current = trigger; }, onEnterHeader: () => { } })) : (_jsxs("box", { style: { flexDirection: breakpoint === "narrow" ? "column" : "row", flexGrow: 1, backgroundColor: "#0b0b0b" }, children: [_jsx(Navigator, { visible: visible, total: loops.length, selectedIndex: clampedIndex, filters: filters, sort: sort, breakpoint: breakpoint, focused: derivedFocusedPanel === "loops" || derivedFocusedPanel === "navigator", projects: projects, onSelect: (index) => setSelectedIndex(index), onActivate: (index) => { setSelectedIndex(index); const loop = visible[index]; if (loop) {
                                 setEditTarget(loop);
                                 push("create");
-                            } } }), _jsxs("box", { style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx(Inspector, { loop: selected }), _jsx(RunHistory, { loop: selected, selectedRunIndex: selectedRunIndex, focused: focusedPanel === "runs", onSelectRun: (index) => { setSelectedRunIndex(index); setFocusedPanel("runs"); }, onOpenRun: handleOpenRunLog }), _jsx(ActionButtons, { loop: selected, focused: focusedPanel === "actions", selectedAction: selectedAction, onAction: handleAction })] })] })) }, viewKey(view, editTarget, editTask)), _jsx(Footer, { mode: mode }), confirm ? (_jsx(ConfirmModal, { message: confirm.message, choice: confirmChoice, onYes: () => { const action = confirm.action; setConfirm(null); void action(); }, onNo: () => setConfirm(null) })) : null, helpOpen ? _jsx(HelpModal, { view: view }) : null, contextHelpOpen ? _jsx(ContextHelpModal, { onClose: () => setContextHelpOpen(false) }) : null, logModalRun ? (_jsx(LogModal, { loopId: selectedId, run: logModalRun, logLines: logModalLines, loading: logModalLoading, onClose: () => setLogModalRun(null) })) : null, projectsModalOpen ? (_jsx(ProjectsModal, { projects: projects, loops: loops, currentProjectId: currentProjectId, onSelect: (id) => { setCurrentProjectId(id); setProjectsModalOpen(false); }, onClose: () => setProjectsModalOpen(false) })) : null, _jsx(ToastStack, { toasts: toasts })] }));
+                            } } }), _jsxs("box", { style: { flexDirection: "column", flexGrow: 1, backgroundColor: "#0b0b0b", overflow: "hidden" }, children: [_jsx(Inspector, { loop: selected }), _jsx(RunHistory, { loop: selected, selectedRunIndex: selectedRunIndex, focused: derivedFocusedPanel === "runs" || derivedFocusedPanel === "run-history", onSelectRun: (index) => setSelectedRunIndex(index), onOpenRun: handleOpenRunLog }), _jsx(ActionButtons, { loop: selected, focused: actionIdx >= 0, selectedAction: derivedSelectedAction, onAction: handleAction })] })] })) }, viewKey(view, editTarget, editTask)), _jsx(Footer, { mode: mode }), confirm ? (_jsx(ConfirmModal, { message: confirm.message, choice: confirmChoice, onYes: () => { const action = confirm.action; setConfirm(null); void action(); }, onNo: () => setConfirm(null) })) : null, helpOpen ? _jsx(HelpModal, { view: view }) : null, contextHelpOpen ? _jsx(ContextHelpModal, { onClose: () => setContextHelpOpen(false) }) : null, logModalRun ? (_jsx(LogModal, { loopId: selectedId, run: logModalRun, logLines: logModalLines, loading: logModalLoading, onClose: () => setLogModalRun(null) })) : null, projectsModalOpen ? (_jsx(ProjectsModal, { projects: projects, loops: loops, currentProjectId: currentProjectId, onSelect: (id) => { setCurrentProjectId(id); setProjectsModalOpen(false); }, onClose: () => setProjectsModalOpen(false) })) : null, _jsx(ToastStack, { toasts: toasts })] }));
 }
 const TASK_FORM_VIEWS = new Set(["task-create", "task-edit"]);

package/dist/board/components/CreateForm.js

@@ -8,6 +8,7 @@ import { commandLine } from "../format.js";
 import { createLoop, updateLoop, listTasks } from "../daemon.js";
 import { useHoverState } from "../hooks/useHoverState.js";
 import { useInputShortcuts } from "../hooks/useInputShortcuts.js";
+import { useTabNav } from "../hooks/useTabNav.js";
 import { SearchSelect } from "./SearchSelect.js";
 import { HOVER_BG } from "../../config/constants.js";
 export const TASK_MODE_INLINE = "inline";
@@ -45,25 +46,10 @@ export function CreateView(props) {
         project: props.initial.project ?? props.currentProjectId ?? "default",
     });
     const valuesRef = useRef(values);
-    const [focusIndex, setFocusIndex] = useState(0);
     const [error, setError] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [selectedTaskName, setSelectedTaskName] = useState(props.selectedTaskName ?? null);
     const inputRef = useRef(null);
-    useInputShortcuts(() => {
-        if (focusIndex >= saveIndex)
-            return null;
-        return inputRef.current;
-    });
-    useState(() => {
-        if (values.taskId && !selectedTaskName) {
-            void listTasks().then((tasks) => {
-                const found = tasks.find((t) => t.id === values.taskId);
-                if (found)
-                    setSelectedTaskName(found.name);
-            }).catch(() => { });
-        }
-    });
     const { width: termWidth } = useTerminalDimensions();
     const btnWidth = Math.max(10, Math.min(14, Math.floor(termWidth / 6)));
     const isInline = values.taskMode === TASK_MODE_INLINE;
@@ -77,9 +63,22 @@ export function CreateView(props) {
             return !isInline;
         return true;
     });
-    const chooseTaskIdx = filteredFields.indexOf("taskId");
-    const saveIndex = filteredFields.length;
-    const cancelIndex = filteredFields.length + 1;
+    const navItems = [...filteredFields, "save", "cancel"];
+    const { setFocusIndex, focusedItem, isFocused } = useTabNav(navItems);
+    useInputShortcuts(() => {
+        if (focusedItem === "save" || focusedItem === "cancel")
+            return null;
+        return inputRef.current;
+    });
+    useState(() => {
+        if (values.taskId && !selectedTaskName) {
+            void listTasks().then((tasks) => {
+                const found = tasks.find((t) => t.id === values.taskId);
+                if (found)
+                    setSelectedTaskName(found.name);
+            }).catch(() => { });
+        }
+    });
     function updateValues(next) {
         valuesRef.current = next;
         setValues(next);
@@ -91,57 +90,29 @@ export function CreateView(props) {
         setSelectedTaskName(props.selectedTaskName ?? props.selectedTaskId);
     }
     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 = filteredFields[focusIndex];
-            if (field === "project")
-                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" || key.name === " ") {
-            const field = filteredFields[focusIndex];
-            if (field === "taskMode") {
+            if (focusedItem === "taskMode") {
                 const next = valuesRef.current.taskMode === TASK_MODE_INLINE ? TASK_MODE_EXISTING : TASK_MODE_INLINE;
                 updateValues({ ...valuesRef.current, taskMode: next });
                 key.preventDefault();
                 return;
             }
-            if (field === "runNow") {
+            if (focusedItem === "runNow") {
                 const next = valuesRef.current.runNow === "y" ? "n" : "y";
                 updateValues({ ...valuesRef.current, runNow: next });
                 key.preventDefault();
                 return;
             }
-            if (focusIndex === chooseTaskIdx && !isInline) {
+            if (focusedItem === "taskId" && !isInline) {
                 props.onChooseTask();
                 key.preventDefault();
                 return;
             }
-            if (focusIndex === saveIndex) {
+            if (focusedItem === "save") {
                 void submit(valuesRef.current);
                 key.preventDefault();
             }
-            else if (focusIndex === cancelIndex) {
+            else if (focusedItem === "cancel") {
                 props.onCancel();
                 key.preventDefault();
             }
@@ -270,8 +241,8 @@ export function CreateView(props) {
     return (_jsxs("box", { title: title, border: true, style: { flexDirection: "column", flexGrow: 1, padding: 1, backgroundColor: "#0b0b0b" }, children: [_jsxs("box", { style: { flexDirection: "column", marginBottom: 1 }, children: [_jsx("text", { fg: "#9ca3af", children: t("board.exampleHeading") }), _jsx("text", { fg: "#d1d5db", children: t("board.exampleFull") })] }), _jsx("box", { style: { flexDirection: "column", flexGrow: 1 }, children: Array.from({ length: Math.ceil(filteredFields.length / 2) }, (_, row) => {
                     const leftField = filteredFields[row * 2];
                     const rightField = row * 2 + 1 < filteredFields.length ? filteredFields[row * 2 + 1] : null;
-                    return (_jsxs("box", { style: { flexDirection: "row", marginBottom: 1 }, children: [_jsx(FormRow, { field: leftField, index: row * 2, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, fields: filteredFields, onChooseTask: props.onChooseTask, inputRef: inputRef, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(FormRow, { field: rightField, index: row * 2 + 1, focusIndex: focusIndex, values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, fields: filteredFields, onChooseTask: props.onChooseTask, 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(FormRow, { field: leftField, index: row * 2, isFocused: isFocused(leftField), values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, onChooseTask: props.onChooseTask, inputRef: inputRef, style: { width: "50%", paddingRight: 1 } }), rightField ? (_jsx(FormRow, { field: rightField, index: row * 2 + 1, isFocused: isFocused(rightField), values: values, valuesRef: valuesRef, updateValues: updateValues, setFocusIndex: setFocusIndex, submit: submit, labels: labels, hints: hints, examples: examples, taskModeOptions: taskModeOptions, runNowOptions: runNowOptions, projectOptions: projectOptions, selectedTaskName: selectedTaskName, onChooseTask: props.onChooseTask, 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: 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 HoverButton(props) {
     const { isHovered, hoverProps } = useHoverState();
@@ -280,9 +251,8 @@ function HoverButton(props) {
     return (_jsx("box", { border: true, onMouseDown: props.onMouseDown, borderColor: borderColor, style: { width: props.width, justifyContent: "center", alignItems: "center", marginRight: props.marginRight, backgroundColor: bg }, ...hoverProps, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: props.label }) }) }));
 }
 function FormRow(props) {
-    const { field, index, focusIndex, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, examples, taskModeOptions, runNowOptions, projectOptions, selectedTaskName, fields, onChooseTask, inputRef, style } = props;
+    const { field, index, isFocused, values, valuesRef, updateValues, setFocusIndex, submit, labels, hints, examples, taskModeOptions, runNowOptions, projectOptions, selectedTaskName, onChooseTask, inputRef, style } = props;
     const { isHovered, hoverProps } = useHoverState();
-    const isFocused = focusIndex === index;
     const isToggleField = field === "taskMode" || field === "runNow";
     const isTaskButton = field === "taskId";
     const isProjectField = field === "project";
@@ -293,12 +263,5 @@ function FormRow(props) {
                     return (_jsx("box", { onMouseDown: () => updateValues({ ...valuesRef.current, [field]: opt.value }), style: { backgroundColor: isActive ? "#1e3a8a" : undefined, paddingLeft: 1, paddingRight: 1, marginRight: 1 }, ...hoverProps, children: _jsx("text", { fg: isActive ? "#ffffff" : isHovered ? "#e5e7eb" : "#9ca3af", children: _jsx("strong", { children: opt.name }) }) }, opt.value));
                 }) })) : isTaskButton ? (_jsx("box", { border: true, borderColor: isFocused ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", paddingLeft: 1 }, onMouseDown: () => { setFocusIndex(index); onChooseTask(); }, children: _jsx("text", { fg: values.taskId ? "#4ade80" : "#9ca3af", children: values.taskId
                         ? t("board.selectedTask", { name: selectedTaskName ?? values.taskId })
-                        : t("board.chooseTask") }) })) : isProjectField ? (_jsx(SearchSelect, { options: projectOptions, value: values.project, onChange: (v) => updateValues({ ...valuesRef.current, project: 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: examples[field] ? t("board.placeholderExample", { example: examples[field] }) : t("board.placeholderBlank"), onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => {
-                        if (index < fields.length - 1) {
-                            setFocusIndex(index + 1);
-                        }
-                        else {
-                            void submit(valuesRef.current);
-                        }
-                    } }) }))] }));
+                        : t("board.chooseTask") }) })) : isProjectField ? (_jsx(SearchSelect, { options: projectOptions, value: values.project, onChange: (v) => updateValues({ ...valuesRef.current, project: 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: examples[field] ? t("board.placeholderExample", { example: examples[field] }) : t("board.placeholderBlank"), onInput: (value) => updateValues({ ...valuesRef.current, [field]: value }), onSubmit: () => { void submit(valuesRef.current); } }) }))] }));
 }

package/dist/board/components/CreateProjectModal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useState } from "react";
+import { useTabNav } from "../hooks/useTabNav.js";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { t } from "../../i18n/index.js";
 import { createProject } from "../daemon.js";
@@ -12,15 +13,8 @@ export function CreateProjectModal(props) {
     const [selectedColorKey, setSelectedColorKey] = useState(defaultColorKey);
     const [error, setError] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [focusField, setFocusField] = useState("name");
+    const { focusedItem: focusField, setFocusIndex } = useTabNav(["name", "color", "save", "cancel"]);
     useKeyboard((key) => {
-        if (key.name === "tab") {
-            const order = ["name", "color", "save", "cancel"];
-            const idx = order.indexOf(focusField);
-            const next = key.shift ? order[(idx - 1 + order.length) % order.length] : order[(idx + 1) % order.length];
-            setFocusField(next ?? "name");
-            return;
-        }
         if (key.name === "escape") {
             onCancel();
             return;
@@ -34,14 +28,11 @@ export function CreateProjectModal(props) {
             return;
         }
         if (focusField === "color") {
-            if (key.name === "left") {
-                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
-                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx - 1 + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
-                return;
-            }
-            if (key.name === "right") {
+            if (key.name === "left" || key.name === "right") {
                 const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
-                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + 1) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                const dir = key.name === "left" ? -1 : 1;
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + dir + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                key.preventDefault();
                 return;
             }
         }
@@ -81,9 +72,9 @@ export function CreateProjectModal(props) {
                 padding: 1,
                 minWidth: Math.min(44, width - 4),
                 backgroundColor: "#111827",
-            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: "My Project", onInput: (value) => setName(value), onSubmit: () => setFocusField("color") }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
+            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: "My Project", onInput: (value) => setName(value) }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
                         const isActive = selectedColorKey === colorKey;
-                        return (_jsx("box", { onMouseDown: () => { setFocusField("color"); setSelectedColorKey(colorKey); }, style: {
+                        return (_jsx("box", { onMouseDown: () => { setFocusIndex(1); setSelectedColorKey(colorKey); }, style: {
                                 backgroundColor: isActive ? "#1e3a8a" : undefined,
                                 paddingLeft: 1,
                                 paddingRight: 1,

package/dist/board/components/EditProjectModal.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
 import { useState } from "react";
+import { useTabNav } from "../hooks/useTabNav.js";
 import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { t } from "../../i18n/index.js";
 import { updateProject } from "../daemon.js";
@@ -14,15 +15,8 @@ export function EditProjectModal(props) {
     });
     const [error, setError] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const [focusField, setFocusField] = useState("name");
+    const { focusedItem: focusField, setFocusIndex } = useTabNav(["name", "color", "save", "cancel"]);
     useKeyboard((key) => {
-        if (key.name === "tab") {
-            const order = ["name", "color", "save", "cancel"];
-            const idx = order.indexOf(focusField);
-            const next = key.shift ? order[(idx - 1 + order.length) % order.length] : order[(idx + 1) % order.length];
-            setFocusField(next ?? "name");
-            return;
-        }
         if (key.name === "escape") {
             onCancel();
             return;
@@ -36,14 +30,11 @@ export function EditProjectModal(props) {
             return;
         }
         if (focusField === "color") {
-            if (key.name === "left") {
-                const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
-                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx - 1 + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
-                return;
-            }
-            if (key.name === "right") {
+            if (key.name === "left" || key.name === "right") {
                 const idx = PROJECT_COLOR_KEYS.indexOf(selectedColorKey);
-                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + 1) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                const dir = key.name === "left" ? -1 : 1;
+                setSelectedColorKey(PROJECT_COLOR_KEYS[(idx + dir + PROJECT_COLOR_KEYS.length) % PROJECT_COLOR_KEYS.length] ?? selectedColorKey);
+                key.preventDefault();
                 return;
             }
         }
@@ -83,9 +74,9 @@ export function EditProjectModal(props) {
                 padding: 1,
                 minWidth: Math.min(44, width - 4),
                 backgroundColor: "#111827",
-            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: project.name, onInput: (value) => setName(value), onSubmit: () => setFocusField("color") }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
+            }, children: [_jsx("text", { fg: focusField === "name" ? "#38bdf8" : "#e5e7eb", children: t("project.labelName") }), _jsx("text", { fg: "#6b7280", children: t("project.hintName") }), _jsx("box", { border: true, borderColor: focusField === "name" ? "#38bdf8" : undefined, style: { height: 3, backgroundColor: "#0b0b0b", marginBottom: 1 }, children: _jsx("input", { focused: focusField === "name", value: name, placeholder: project.name, onInput: (value) => setName(value) }) }), _jsx("text", { fg: focusField === "color" ? "#38bdf8" : "#e5e7eb", children: t("project.labelColor") }), _jsx("text", { fg: "#6b7280", children: t("project.hintColor") }), _jsx("box", { border: true, borderColor: focusField === "color" ? "#38bdf8" : undefined, style: { height: 3, flexDirection: "row", backgroundColor: "#0b0b0b", alignItems: "center", marginBottom: 1 }, children: PROJECT_COLOR_KEYS.map((colorKey) => {
                         const isActive = selectedColorKey === colorKey;
-                        return (_jsx("box", { onMouseDown: () => { setFocusField("color"); setSelectedColorKey(colorKey); }, style: {
+                        return (_jsx("box", { onMouseDown: () => { setFocusIndex(1); setSelectedColorKey(colorKey); }, style: {
                                 backgroundColor: isActive ? "#1e3a8a" : undefined,
                                 paddingLeft: 1,
                                 paddingRight: 1,

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,25 @@ 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 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 +50,37 @@ 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");
+        if (key.name === "up" || key.name === "down") {
+            if (focusedItem !== "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 (focusedItem === "list") {
+                setFocusIndex(1);
             }
-            else {
-                runAction(selectedAction);
+            else if (focusedItem === "edit") {
+                if (selectedProject && !selectedProject.isSystem)
+                    setSubModal("edit");
+            }
+            else if (focusedItem === "delete") {
+                if (selectedProject && !selectedProject.isSystem)
+                    setSubModal("delete");
             }
             key.preventDefault();
             return;
@@ -102,12 +109,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/TaskForm.js

@@ -6,6 +6,7 @@ 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 { HOVER_BG } from "../../config/constants.js";
 import { SearchSelect } from "./SearchSelect.js";
 const taskFields = ["name", "command", "onSuccessTaskId", "onFailureTaskId"];
@@ -23,20 +24,20 @@ 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);
     useInputShortcuts(() => {
-        if (focusIndex >= saveIndex)
-            return null;
-        return inputRef.current;
+        if (focusedItem != null && focusedItem !== "save" && focusedItem !== "cancel") {
+            return inputRef.current;
+        }
+        return null;
     });
-    const saveIndex = taskFields.length;
-    const cancelIndex = taskFields.length + 1;
     function updateValues(next) {
         valuesRef.current = next;
         setValues(next);
@@ -45,39 +46,12 @@ 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) {
+            if (focusedItem === "save") {
                 void submit(valuesRef.current);
                 key.preventDefault();
             }
-            else if (focusIndex === cancelIndex) {
+            else if (focusedItem === "cancel") {
                 props.onCancel();
                 key.preventDefault();
             }
@@ -151,15 +125,14 @@ 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, 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, 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, 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: () => {
+    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 })) : (_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { height: 3, 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);
                         }

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,

package/dist/board/hooks/useTabNav.js

@@ -0,0 +1,60 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useKeyboard } from "@opentui/react";
+export function useTabNav(items, options) {
+    const initial = options?.initialIndex ?? 0;
+    const [focusIndex, setFocusIndex] = useState(Math.min(initial, Math.max(0, items.length - 1)));
+    const [enabled, setEnabled] = useState(true);
+    const focusIndexRef = useRef(focusIndex);
+    focusIndexRef.current = focusIndex;
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    const onCycleOutRef = useRef(options?.onCycleOut);
+    onCycleOutRef.current = options?.onCycleOut;
+    const enabledRef = useRef(enabled);
+    enabledRef.current = enabled;
+    useEffect(() => {
+        setFocusIndex((i) => Math.min(i, Math.max(0, items.length - 1)));
+    }, [items.length]);
+    useKeyboard((key) => {
+        if (!enabledRef.current)
+            return;
+        if (key.name !== "tab")
+            return;
+        const currentItems = itemsRef.current;
+        const currentIdx = focusIndexRef.current;
+        const lastIndex = currentItems.length - 1;
+        if (lastIndex < 0)
+            return;
+        const direction = key.shift ? "left" : "right";
+        if (direction === "right") {
+            if (currentIdx >= lastIndex) {
+                if (onCycleOutRef.current) {
+                    onCycleOutRef.current("right");
+                }
+                else {
+                    setFocusIndex(0);
+                }
+            }
+            else {
+                setFocusIndex(currentIdx + 1);
+            }
+        }
+        else {
+            if (currentIdx <= 0) {
+                if (onCycleOutRef.current) {
+                    onCycleOutRef.current("left");
+                }
+                else {
+                    setFocusIndex(lastIndex);
+                }
+            }
+            else {
+                setFocusIndex(currentIdx - 1);
+            }
+        }
+        key.preventDefault();
+    });
+    const focusedItem = items[focusIndex];
+    const isFocused = useCallback((item) => item === focusedItem, [focusedItem]);
+    return { focusIndex, setFocusIndex, focusedItem, isFocused, enabled, setEnabled };
+}

package/dist/board/hooks/useTaskKeybindings.js

@@ -1,7 +1,6 @@
 import { useKeyboard } from "@opentui/react";
-import { nextTaskPanel } from "../components/TaskBrowser.js";
 export function useTaskKeybindings(params) {
-    const { confirm, view, tasks, taskSelectedIndex, setTaskSelectedIndex, taskSelectedAction, setTaskSelectedAction, taskFocusedPanel, setTaskFocusedPanel, taskSearchActive, setTaskSearchActive, taskQuery, setTaskQuery, onTaskAction, onCancel, onCreateTask, onEnterHeader, onToggleContextHelp, selectable = true, } = params;
+    const { confirm, view, tasks, taskSelectedIndex, setTaskSelectedIndex, taskSelectedAction, setTaskSelectedAction, taskFocusedPanel, setTaskFocusedPanel, taskSearchActive, setTaskSearchActive, taskQuery, setTaskQuery, onTaskAction, onCancel, onCreateTask, onToggleContextHelp, headerFocused = false, selectable = true, } = params;
     const taskActions = selectable
         ? ["select", "edit", "delete"]
         : ["edit", "delete"];
@@ -9,6 +8,8 @@ export function useTaskKeybindings(params) {
     useKeyboard((key) => {
         if (view !== "task-list")
             return;
+        if (headerFocused)
+            return;
         const name = key.name;
         if (confirm)
             return;
@@ -51,34 +52,6 @@ export function useTaskKeybindings(params) {
             key.preventDefault();
             return;
         }
-        if (name === "tab") {
-            const direction = key.shift ? "left" : "right";
-            if (taskFocusedPanel === "actions") {
-                if (direction === "left" && taskSelectedAction === 0) {
-                    setTaskFocusedPanel((p) => nextTaskPanel(p, "left"));
-                }
-                else if (direction === "right" && taskSelectedAction === taskActionCount - 1) {
-                    onEnterHeader("right");
-                    key.preventDefault();
-                    return;
-                }
-                else {
-                    setTaskSelectedAction((i) => direction === "right"
-                        ? Math.min(taskActionCount - 1, i + 1)
-                        : Math.max(0, i - 1));
-                }
-            }
-            else if (taskFocusedPanel === "search" && direction === "left") {
-                onEnterHeader("left");
-                key.preventDefault();
-                return;
-            }
-            else {
-                setTaskFocusedPanel((p) => nextTaskPanel(p, direction));
-            }
-            key.preventDefault();
-            return;
-        }
         if (taskFocusedPanel === "tasks") {
             if (name === "up" || name === "k") {
                 setTaskSelectedIndex((i) => Math.max(0, i - 1));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loop-task",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Loop engineering toolkit. Run any command on a cadence, in the background, managed from a terminal board. Schedule tests, builds, syncs, or agent prompts.",
   "type": "module",
   "bin": {