loop-task 1.1.0 → 1.4.0

package/dist/board/App.js

@@ -0,0 +1,340 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { applyLoopFilters, cycleSortMode, cycleStatusFilter, defaultFilters, } from "./state.js";
+import { ToastStack, useToasts } from "./toast.js";
+import { t } from "../i18n/index.js";
+import { useLoopPolling } from "./hooks/useLoopPolling.js";
+import { useLogStream } from "./hooks/useLogStream.js";
+import { useBoardKeybindings } from "./hooks/useBoardKeybindings.js";
+import { useTaskKeybindings } from "./hooks/useTaskKeybindings.js";
+import { Header } from "./components/Header.js";
+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 { HelpModal } from "./components/HelpModal.js";
+import { Footer } from "./components/Footer.js";
+import { ConfirmModal } from "./components/ConfirmModal.js";
+import { CreateView, createInitialValues } from "./components/CreateForm.js";
+import { TaskForm } from "./components/TaskForm.js";
+import { TaskNavigator, TaskInspector, TaskActionButtons } from "./components/TaskBrowser.js";
+import { TaskFilterBar } from "./components/TaskFilterBar.js";
+import { LogModal } from "./components/LogModal.js";
+import { ProjectsModal } from "./components/ProjectsModal.js";
+import { ProjectsPage } from "./components/ProjectsPage.js";
+import { fetchRunLog, deleteLoop, pauseLoop, resumeLoop, stopLoop, playLoop, triggerLoop, listTasks, deleteTask, listProjects } from "./daemon.js";
+import { useBreakpoint } from "./hooks/useBreakpoint.js";
+import { useRouter } from "./router.js";
+const BOARD_REFRESH_DELAY_MS = 150;
+const VIEW_TO_MODE = {
+    create: "create",
+    "task-create": "task",
+    "task-edit": "task",
+    "task-list": "task",
+    projects: "projects",
+};
+function resolveMode(confirm, searchActive, helpOpen, view) {
+    if (confirm)
+        return "confirm";
+    if (searchActive)
+        return "search";
+    if (helpOpen)
+        return "help";
+    return VIEW_TO_MODE[view] ?? "normal";
+}
+function viewKey(view, editTarget, editTask) {
+    if (view === "create")
+        return `${view}:${editTarget?.id ?? "new"}`;
+    if (view === "task-edit")
+        return `${view}:${editTask?.id ?? "new"}`;
+    return view;
+}
+export function App(props) {
+    const { loops, daemonStatus, refresh } = useLoopPolling();
+    const { view, stack, push, replace, pop } = useRouter("board");
+    const [filters, setFilters] = useState(defaultFilters);
+    const [sort, setSort] = useState("description");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [searchActive, setSearchActive] = useState(false);
+    const [helpOpen, setHelpOpen] = useState(false);
+    const [confirm, setConfirm] = useState(null);
+    const [confirmChoice, setConfirmChoice] = useState(0);
+    const [editTarget, setEditTarget] = useState(null);
+    const [editTask, setEditTask] = useState(null);
+    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([]);
+    const createProjectTriggerRef = useRef(null);
+    const [currentProjectId, setCurrentProjectId] = useState(() => {
+        try {
+            return localStorage.getItem("loop-current-project") ?? "all";
+        }
+        catch {
+            return "all";
+        }
+    });
+    const [projectsModalOpen, setProjectsModalOpen] = useState(false);
+    const { toasts, push: pushToast } = useToasts();
+    const breakpoint = useBreakpoint();
+    const visible = useMemo(() => applyLoopFilters(currentProjectId === "all" ? loops : loops.filter((l) => (l.projectId ?? "default") === currentProjectId), filters, sort), [loops, filters, sort, currentProjectId]);
+    const clampedIndex = Math.min(selectedIndex, Math.max(0, visible.length - 1));
+    const selected = visible[clampedIndex] ?? null;
+    const selectedId = selected?.id ?? null;
+    const selectedDesc = selected?.description ?? "";
+    const prevSelectedId = useRef(null);
+    if (selectedId !== prevSelectedId.current) {
+        prevSelectedId.current = selectedId;
+        setSelectedRunIndex(0);
+    }
+    useEffect(() => {
+        setSelectedAction(0);
+    }, [selected?.id]);
+    const { destroy: destroyLogSocket } = useLogStream(selectedId, view, (error) => pushToast("error", t("board.logStreamError", { message: error.message })));
+    const filteredTasks = useMemo(() => {
+        if (!taskQuery)
+            return tasks;
+        const q = taskQuery.toLowerCase();
+        return tasks.filter((t) => `${t.id} ${t.name} ${t.command}`.toLowerCase().includes(q));
+    }, [tasks, taskQuery]);
+    const taskClampedIndex = Math.min(taskSelectedIndex, Math.max(0, filteredTasks.length - 1));
+    const selectedTask = filteredTasks[taskClampedIndex] ?? null;
+    async function refreshTasks() {
+        try {
+            setTasks(await listTasks());
+        }
+        catch { /* ignore */ }
+    }
+    useState(() => { void refreshTasks(); });
+    async function refreshProjects() {
+        try {
+            setProjects(await listProjects());
+        }
+        catch { /* ignore */ }
+    }
+    useState(() => { void refreshProjects(); });
+    useEffect(() => {
+        try {
+            localStorage.setItem("loop-current-project", currentProjectId);
+        }
+        catch { }
+    }, [currentProjectId]);
+    function runAction(label, action) {
+        return async () => {
+            try {
+                await action();
+                setTimeout(() => { void refresh(); }, BOARD_REFRESH_DELAY_MS);
+                pushToast("success", label);
+            }
+            catch (error) {
+                pushToast("error", error instanceof Error ? error.message : String(error));
+            }
+        };
+    }
+    function handleOpenRunLog(run) {
+        if (!selectedId)
+            return;
+        setLogModalRun(run);
+        if (run.status === "running") {
+            setLogModalLoading(false);
+            setLogModalLines([]);
+            return;
+        }
+        setLogModalLoading(true);
+        setLogModalLines([]);
+        fetchRunLog(selectedId, run.runNumber)
+            .then((log) => {
+            setLogModalLines(log ? log.split("\n") : []);
+            setLogModalLoading(false);
+        })
+            .catch(() => {
+            setLogModalLines([]);
+            setLogModalLoading(false);
+        });
+    }
+    function confirmAction(msg, toast, fn) {
+        setConfirmChoice(0);
+        setConfirm({ message: msg, action: runAction(toast, fn) });
+    }
+    function handleAction(action) {
+        if (!selected || !selectedId)
+            return;
+        if (action === "edit") {
+            setEditTarget(selected);
+            push("create");
+            return;
+        }
+        if (action === "delete") {
+            confirmAction(t("board.confirmDelete", { desc: selectedDesc }), t("board.toastDeleted", { desc: selectedDesc }), () => deleteLoop(selectedId));
+            return;
+        }
+        if (action === "pause-or-play") {
+            if (selected.status === "waiting") {
+                confirmAction(t("board.confirmPause", { desc: selectedDesc }), t("board.toastPaused", { desc: selectedDesc }), () => pauseLoop(selectedId));
+            }
+            else if (selected.status === "paused") {
+                confirmAction(t("board.confirmResume", { desc: selectedDesc }), t("board.toastResumed", { desc: selectedDesc }), () => resumeLoop(selectedId));
+            }
+            else {
+                confirmAction(t("board.confirmPlay", { desc: selectedDesc }), t("board.toastPlayed", { desc: selectedDesc }), () => playLoop(selectedId));
+            }
+            return;
+        }
+        if (action === "stop") {
+            confirmAction(t("board.confirmStop", { desc: selectedDesc }), t("board.toastStopped", { desc: selectedDesc }), () => stopLoop(selectedId));
+            return;
+        }
+        if (action === "play") {
+            const isPaused = selected.status === "paused";
+            const msgKey = isPaused ? "board.confirmResume" : "board.confirmPlay";
+            const toastKey = isPaused ? "board.toastResumed" : "board.toastPlayed";
+            const fn = isPaused ? () => resumeLoop(selectedId) : () => playLoop(selectedId);
+            confirmAction(t(msgKey, { desc: selectedDesc }), t(toastKey, { desc: selectedDesc }), fn);
+            return;
+        }
+        if (action === "trigger") {
+            confirmAction(t("board.confirmTrigger", { desc: selectedDesc }), t("board.toastTriggered", { desc: selectedDesc }), () => triggerLoop(selectedId));
+            return;
+        }
+    }
+    function handleTaskAction(action) {
+        if (!selectedTask)
+            return;
+        if (action === "select") {
+            if (!stack.includes("create") && !stack.includes("task-edit"))
+                return;
+            setPendingTaskSelection({ id: selectedTask.id, name: selectedTask.name });
+            pop();
+            pushToast("success", t("board.toastTaskSelected", { desc: selectedTask.name }));
+            return;
+        }
+        if (action === "edit") {
+            setEditTask(selectedTask);
+            push("task-edit");
+            return;
+        }
+        if (action === "delete") {
+            setConfirmChoice(0);
+            setConfirm({
+                message: t("board.confirmDeleteTask", { desc: selectedTask.name }),
+                action: async () => {
+                    await deleteTask(selectedTask.id);
+                    await refreshTasks();
+                    setTaskSelectedIndex((i) => Math.max(0, i - 1));
+                    pushToast("success", t("board.toastTaskDeleted", { desc: selectedTask.name }));
+                },
+            });
+        }
+    }
+    const cancelCreate = () => { setEditTarget(null); setPendingTaskSelection(null); pop(); };
+    const cancelTask = () => { setEditTask(null); pop(); };
+    const cancelTaskList = () => pop();
+    function handleChooseTask() {
+        void refreshTasks();
+        push("task-list");
+    }
+    function handleCreateTask() {
+        setEditTask(null);
+        push("task-create");
+    }
+    const onCreateDone = (updated, _id, desc) => {
+        setEditTarget(null);
+        setPendingTaskSelection(null);
+        pop();
+        pushToast("success", updated ? t("board.toastUpdated", { desc }) : t("board.toastStarted", { desc }));
+        setTimeout(() => { void refresh(); }, BOARD_REFRESH_DELAY_MS);
+    };
+    const onTaskDone = (updated, id) => {
+        setEditTask(null);
+        void refreshTasks();
+        pop();
+        pushToast("success", updated ? t("board.toastTaskUpdated", { id }) : t("board.toastTaskCreated", { id }));
+    };
+    useBoardKeybindings({
+        confirm,
+        confirmChoice,
+        setConfirm,
+        setConfirmChoice,
+        helpOpen,
+        setHelpOpen,
+        searchActive,
+        setSearchActive,
+        view,
+        push,
+        pop,
+        setEditTarget,
+        setEditTask,
+        selected,
+        visibleCount: visible.length,
+        setSelectedIndex,
+        setFilters,
+        setSort,
+        onQuit: props.onQuit,
+        destroyLogSocket,
+        logModalRun,
+        setLogModalRun,
+        logModalLines,
+        selectedRunIndex,
+        setSelectedRunIndex,
+        selectedRunCount: selected?.runHistory?.length ?? 0,
+        focusedPanel,
+        setFocusedPanel,
+        selectedAction,
+        setSelectedAction,
+        onAction: handleAction,
+        onOpenRunLog: handleOpenRunLog,
+        refreshTasks,
+        onViewTasks: () => { void refreshTasks(); push("task-list"); },
+        onViewProjects: () => push("projects"),
+        onAddLoop: () => { setEditTarget(null); push("create"); },
+        onSelectProject: () => setProjectsModalOpen(true),
+    });
+    useTaskKeybindings({
+        confirm,
+        view,
+        tasks: filteredTasks,
+        taskSelectedIndex,
+        setTaskSelectedIndex,
+        taskSelectedAction,
+        setTaskSelectedAction,
+        taskFocusedPanel,
+        setTaskFocusedPanel,
+        taskSearchActive,
+        setTaskSearchActive,
+        taskQuery,
+        setTaskQuery,
+        onTaskAction: handleTaskAction,
+        onCancel: cancelTaskList,
+        onCreateTask: handleCreateTask,
+        selectable: stack.includes("create") || stack.includes("task-edit"),
+    });
+    const counts = {
+        total: loops.length,
+        running: loops.filter((l) => l.status === "running").length,
+        waiting: loops.filter((l) => l.status === "waiting").length,
+        paused: loops.filter((l) => l.status === "paused").length,
+        idle: loops.filter((l) => l.status === "idle").length,
+    };
+    const 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") {
+                    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") })) : view === "task-list" ? (_jsx(TaskFilterBar, { query: taskQuery, searchActive: taskSearchActive, focusedPanel: taskFocusedPanel })) : null, _jsx("box", { style: { flexGrow: 1, backgroundColor: "#0b0b0b" }, children: view === "create" ? (_jsx(CreateView, { mode: editTarget ? "edit" : "create", editId: 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; } })) : (_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) {
+                                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, {}) : 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/board-log.js

@@ -0,0 +1,18 @@
+import fs from "node:fs";
+import { getBoardLogFile, getDataDir } from "../config/paths.js";
+function formatError(error) {
+    if (error instanceof Error) {
+        return error.stack ?? `${error.name}: ${error.message}`;
+    }
+    return typeof error === "string" ? error : JSON.stringify(error);
+}
+export function boardLog(message, error) {
+    try {
+        fs.mkdirSync(getDataDir(), { recursive: true });
+        const suffix = error === undefined ? "" : `\n${formatError(error)}\n`;
+        fs.appendFileSync(getBoardLogFile(), `${new Date().toISOString()} ${message}${suffix}`);
+    }
+    catch {
+        // best effort crash logging only
+    }
+}

package/dist/board/components/ActionButtons.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { t } from "../../i18n/index.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+export function getActions(status) {
+    const actions = [
+        { key: "edit", label: t("board.actionEdit") },
+        { key: "delete", label: t("board.actionDelete") },
+    ];
+    if (status === "waiting") {
+        actions.push({ key: "pause", label: t("board.actionPause") });
+        actions.push({ key: "stop", label: t("board.actionStop") });
+    }
+    else if (status === "paused") {
+        actions.push({ key: "stop", label: t("board.actionStop") });
+        actions.push({ key: "play", label: t("board.actionPlay") });
+    }
+    else if (status === "idle" || status === "stopped") {
+        actions.push({ key: "play", label: t("board.actionPlay") });
+    }
+    if (status !== "running") {
+        actions.push({ key: "trigger", label: t("board.actionTrigger") });
+    }
+    return actions;
+}
+export function getActionKeys(status) {
+    return getActions(status).map((a) => a.key);
+}
+export function getActionCount(status) {
+    return getActions(status).length;
+}
+export function ActionButtons(props) {
+    const { loop, focused, selectedAction, onAction } = props;
+    if (!loop) {
+        return (_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, backgroundColor: "#0b0b0b", justifyContent: "center", alignItems: "center" }, children: _jsx("text", { fg: "#9ca3af", children: t("board.noActions") }) }));
+    }
+    const actions = getActions(loop.status);
+    return (_jsx("box", { border: true, borderColor: focused ? "#38bdf8" : undefined, style: { flexDirection: "row", height: 3, flexShrink: 0, paddingLeft: 1, backgroundColor: "#0b0b0b", alignItems: "center" }, children: actions.map((action, i) => (_jsx(ActionButton, { label: action.label, selected: focused && selectedAction === i, onMouseDown: () => onAction(action.key) }, action.key))) }));
+}
+function ActionButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const fg = props.selected ? "#ffffff" : isHovered ? "#e5e7eb" : "#9ca3af";
+    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 }) }) }));
+}

package/dist/board/components/BoardButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useHoverState } from "../hooks/useHoverState.js";
+const PRIMARY_REST = "#1e3a5f";
+const PRIMARY_HOVER = "#2a4f7a";
+const PRIMARY_FOCUSED = "#1e3a8a";
+const DEFAULT_HOVER = "#334155";
+const DEFAULT_FOCUSED = "#374151";
+export function BoardButton(props) {
+    const { label, onMouseDown, focused, variant = "default", marginRight } = props;
+    const { isHovered, hoverProps } = useHoverState();
+    let bg;
+    const fg = "#e5e7eb";
+    let border;
+    if (variant === "primary") {
+        if (focused) {
+            bg = PRIMARY_FOCUSED;
+            border = "#38bdf8";
+        }
+        else if (isHovered) {
+            bg = PRIMARY_HOVER;
+        }
+        else {
+            bg = PRIMARY_REST;
+        }
+    }
+    else if (variant === "danger") {
+        if (focused) {
+            bg = "#7f1d1d";
+            border = "#f87171";
+        }
+        else if (isHovered) {
+            bg = "#7f1d1d";
+        }
+        else {
+            bg = "#0b0b0b";
+        }
+    }
+    else {
+        if (focused) {
+            bg = DEFAULT_FOCUSED;
+            border = "#38bdf8";
+        }
+        else if (isHovered) {
+            bg = DEFAULT_HOVER;
+        }
+        else {
+            bg = "#0b0b0b";
+        }
+    }
+    return (_jsx("box", { border: true, onMouseDown: onMouseDown, borderColor: border, style: {
+            paddingLeft: 2,
+            paddingRight: 2,
+            marginRight,
+            backgroundColor: bg,
+            justifyContent: "center",
+            alignItems: "center",
+        }, ...hoverProps, children: _jsx("text", { fg: fg, children: _jsx("strong", { children: label }) }) }));
+}

package/dist/board/components/ConfirmModal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTerminalDimensions } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { useHoverState } from "../hooks/useHoverState.js";
+import { HOVER_BG } from "../../config/constants.js";
+export function ConfirmModal(props) {
+    const { message, choice, onYes, onNo } = props;
+    const { width } = useTerminalDimensions();
+    return (_jsx("box", { style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            justifyContent: "center",
+            alignItems: "center",
+            zIndex: 100,
+        }, children: _jsxs("box", { title: t("board.confirmTitle"), border: true, style: {
+                flexDirection: "column",
+                padding: 1,
+                minWidth: Math.min(44, width - 4),
+                backgroundColor: "#111827",
+            }, children: [_jsx("text", { children: message }), _jsx("text", { children: " " }), _jsxs("box", { style: { flexDirection: "row", justifyContent: "center" }, children: [_jsx(ConfirmButton, { label: t("board.yes"), onMouseDown: onYes, selected: choice === 1, width: 12, marginRight: 1 }), _jsx(ConfirmButton, { label: t("board.no"), onMouseDown: onNo, selected: choice === 0, width: 12 })] })] }) }));
+}
+function ConfirmButton(props) {
+    const { isHovered, hoverProps } = useHoverState();
+    const bg = props.selected ? "#1e3a8a" : isHovered ? HOVER_BG : undefined;
+    const borderColor = props.selected ? "#38bdf8" : undefined;
+    return (_jsx("box", { border: true, onMouseDown: props.onMouseDown, borderColor: borderColor, style: {
+            width: props.width,
+            backgroundColor: bg,
+            justifyContent: "center",
+            alignItems: "center",
+            marginRight: props.marginRight,
+        }, ...hoverProps, children: _jsx("text", { fg: "#e5e7eb", children: _jsx("strong", { children: props.label }) }) }));
+}