@pruddiman/hem 0.0.1-beta-5671db0

package/dist/progress.js

@@ -0,0 +1,644 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Ink React components for terminal UI — auth prompts, dashboard, phase display.
+ *
+ * Components:
+ *   - AuthPrompt           — First-run 4-option select menu
+ *   - ApiKeyInput          — Provider select + API key text entry
+ *   - FreeModelPicker      — Free model list with data security annotations
+ *   - ConfigPrompt         — Project config provider/model selection
+ *   - App                  — Root dashboard component holding ProgressState
+ *   - Header               — Version + model display
+ *   - PhaseRow             — Single pipeline phase with status indicator
+ *   - GenerationDashboard  — Multi-line group status during generation phase
+ *   - GroupRow             — Single file group with spinner/status/label
+ *   - Summary              — Final success/failure report with timing
+ *
+ * Reference: plan.md lines 310-351 (Terminal UI Architecture),
+ *            contracts/cli-interface.md lines 93-127, 148-189.
+ */
+import React, { useState, useCallback, useRef } from "react";
+import { render as inkRender, Box, Text, useInput, useStdout } from "ink";
+import Spinner from "ink-spinner";
+import { formatElapsed } from "./helpers/format.js";
+/** The four auth options shown on first run. */
+const AUTH_OPTIONS = [
+    {
+        value: "oauth",
+        label: "Log in with a provider (recommended)",
+        description: "Opens your browser to authenticate with Claude, GitHub Copilot, OpenAI, etc.",
+    },
+    {
+        value: "api-key",
+        label: "Enter an API key",
+        description: "Manually paste an API key for any supported provider.",
+    },
+    {
+        value: "free",
+        label: "Use free models",
+        description: "Try free models from Opencode. No account required to start.",
+    },
+    {
+        value: "exit",
+        label: "Exit",
+        description: "Set up later and come back.",
+    },
+];
+/**
+ * First-run authentication prompt.
+ *
+ * Renders a 4-option interactive select menu using arrow keys + Enter.
+ */
+export function AuthPrompt({ onSelect }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Read through a ref inside useInput so a fast ENTER right after an
+    // arrow-key press sees the new index, not the closure's stale snapshot.
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => prev < AUTH_OPTIONS.length - 1 ? prev + 1 : prev);
+        }
+        else if (key.return) {
+            onSelect(AUTH_OPTIONS[selectedIndexRef.current].value);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "No LLM provider configured. Choose how to get started:"] }) }), AUTH_OPTIONS.map((option, index) => {
+                const isSelected = index === selectedIndex;
+                const pointer = isSelected ? "\u276F" : " ";
+                return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsx(Text, { children: _jsxs(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: [pointer, " ", option.label] }) }), _jsx(Text, { children: _jsxs(Text, { dimColor: true, children: ["      ", option.description] }) }), index < AUTH_OPTIONS.length - 1 && _jsx(Text, { children: "" })] }, option.value));
+            })] }));
+}
+/**
+ * API key entry component.
+ *
+ * Two-step flow:
+ * 1. Select a provider from a list using arrow keys + Enter.
+ * 2. Type/paste the API key and press Enter to submit.
+ */
+export function ApiKeyInput({ providers, onSubmit, }) {
+    const [phase, setPhase] = useState("select-provider");
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [selectedProvider, setSelectedProvider] = useState("");
+    const [keyBuffer, setKeyBuffer] = useState("");
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+    useInput((input, key) => {
+        if (phase === "select-provider") {
+            if (key.upArrow) {
+                setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+            }
+            else if (key.downArrow) {
+                setSelectedIndex((prev) => prev < providers.length - 1 ? prev + 1 : prev);
+            }
+            else if (key.return && providers.length > 0) {
+                setSelectedProvider(providers[selectedIndexRef.current]);
+                setPhase("enter-key");
+            }
+        }
+        else if (phase === "enter-key") {
+            if (key.return) {
+                if (keyBuffer.length > 0) {
+                    onSubmit(selectedProvider, keyBuffer);
+                }
+            }
+            else if (key.backspace || key.delete) {
+                setKeyBuffer((prev) => prev.slice(0, -1));
+            }
+            else if (!key.ctrl && !key.meta && input && !key.tab && !key.escape) {
+                setKeyBuffer((prev) => prev + input);
+            }
+        }
+    });
+    if (phase === "select-provider") {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "Select a provider:"] }) }), providers.map((provider, index) => {
+                    const isSelected = index === selectedIndex;
+                    const pointer = isSelected ? "\u276F" : " ";
+                    return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: [pointer, " ", provider] }) }, provider));
+                })] }));
+    }
+    // Phase: enter-key
+    const maskedKey = keyBuffer.length > 0
+        ? keyBuffer.slice(0, 4) + "\u2022".repeat(Math.max(0, keyBuffer.length - 4))
+        : "";
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "Enter API key for", " ", _jsx(Text, { bold: true, color: "cyan", children: selectedProvider }), ":"] }) }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: ["  \u276F ", maskedKey, _jsx(Text, { dimColor: true, children: "_" })] }) }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "Press Enter to submit"] }) })] }));
+}
+/**
+ * OAuth provider selection component.
+ */
+export function OAuthProviderSelect({ providers, onSelect, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => prev < providers.length - 1 ? prev + 1 : prev);
+        }
+        else if (key.return && providers.length > 0) {
+            onSelect(providers[selectedIndexRef.current]);
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "Select a provider to log in with:"] }) }), providers.map((provider, index) => {
+                const isSelected = index === selectedIndex;
+                const pointer = isSelected ? "\u276F" : " ";
+                return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: [pointer, " ", provider.name] }) }, provider.id));
+            }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "This will open your browser to complete authentication."] }) })] }));
+}
+/**
+ * OAuth waiting indicator component.
+ */
+export function OAuthWaiting({ providerName, url, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "Opening browser to authenticate with", " ", _jsx(Text, { bold: true, color: "cyan", children: providerName }), "..."] }) }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "If your browser doesn't open, visit:"] }) }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "blue", children: ["  ", url] }) }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "Waiting for authentication to complete..."] }) })] }));
+}
+/**
+ * Format the data retention annotation for a model.
+ * @internal
+ */
+function retentionAnnotation(model) {
+    switch (model.dataRetention) {
+        case "zero-retention":
+            return { text: "Free \u00B7 Zero data retention \u2713", color: "green" };
+        case "may-train":
+            return {
+                text: "Free \u00B7 Data may be used for training \u26A0",
+                color: "yellow",
+            };
+        case "unknown":
+        default:
+            return { text: "Free \u00B7 Data retention unknown", color: undefined };
+    }
+}
+/**
+ * Free model selection component.
+ */
+export function FreeModelPicker({ models, onSelect, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((prev) => prev < models.length - 1 ? prev + 1 : prev);
+        }
+        else if (key.return && models.length > 0) {
+            onSelect(models[selectedIndexRef.current]);
+        }
+    });
+    // Find the longest model name for alignment.
+    const maxNameLen = models.reduce((max, m) => Math.max(max, m.name.length), 0);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", "Available free models:"] }) }), models.map((model, index) => {
+                const isSelected = index === selectedIndex;
+                const pointer = isSelected ? "\u276F" : " ";
+                const annotation = retentionAnnotation(model);
+                const padding = " ".repeat(Math.max(1, maxNameLen - model.name.length + 4));
+                return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: [_jsxs(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: [pointer, " ", model.name] }), _jsx(Text, { children: padding }), _jsx(Text, { color: annotation.color, children: annotation.text })] }) }, model.id));
+            }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { color: "yellow", children: ["  ", "\u26A0", " Models marked with ", "\u26A0", " may use your code for model training"] }) }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "yellow", children: ["    ", "during their free period. For proprietary code, choose a"] }) }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { color: "yellow", children: ["    ", "zero-retention model or log in with a paid provider."] }) }), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "Note: Free model availability is fetched live and may change."] }) })] }));
+}
+/**
+ * Interactive provider/model selection prompt for project configuration.
+ *
+ * Renders a list of provider/model options using arrow keys + Enter,
+ * following the same navigation pattern as AuthPrompt.
+ */
+export function ConfigPrompt({ options, onSelect, title, maxVisible, }) {
+    const [navState, setNavState] = useState({ selectedIndex: 0, viewportStart: 0 });
+    const { selectedIndex, viewportStart } = navState;
+    const { stdout } = useStdout();
+    // Mirror selectedIndex into a ref so the ENTER branch below reads the latest
+    // value even when fired between an arrow-key press and the next render.
+    const selectedIndexRef = useRef(selectedIndex);
+    selectedIndexRef.current = selectedIndex;
+    // Fixed overhead: header(2) + footer(2) + up-indicator(1) + down-indicator(1) = 6
+    const terminalRows = stdout?.rows ?? 24;
+    const maxVis = maxVisible ?? Math.max(3, Math.floor((terminalRows - 6) / 2));
+    // Use functional updater form so rapid key presses don't read stale state.
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setNavState((prev) => {
+                if (prev.selectedIndex <= 0)
+                    return prev;
+                const next = prev.selectedIndex - 1;
+                const newViewport = next < prev.viewportStart ? next : prev.viewportStart;
+                return { selectedIndex: next, viewportStart: newViewport };
+            });
+        }
+        else if (key.downArrow) {
+            setNavState((prev) => {
+                if (prev.selectedIndex >= options.length - 1)
+                    return prev;
+                const next = prev.selectedIndex + 1;
+                const newViewport = next >= prev.viewportStart + maxVis ? next - maxVis + 1 : prev.viewportStart;
+                return { selectedIndex: next, viewportStart: newViewport };
+            });
+        }
+        else if (key.return && options.length > 0) {
+            onSelect(options[selectedIndexRef.current].value);
+        }
+    });
+    const visibleOptions = options.slice(viewportStart, viewportStart + maxVis);
+    const hasAbove = viewportStart > 0;
+    const hasBelow = viewportStart + maxVis < options.length;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["  ", title ?? "Select a provider and model for this project:"] }) }), hasAbove && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "\u2191 ", viewportStart, " more above"] }) })), visibleOptions.map((option, i) => {
+                const index = viewportStart + i;
+                const isSelected = index === selectedIndex;
+                const pointer = isSelected ? "\u276F" : " ";
+                return (_jsxs(Box, { flexDirection: "column", marginLeft: 2, children: [_jsx(Text, { children: _jsxs(Text, { color: isSelected ? "cyan" : undefined, bold: isSelected, children: [pointer, " ", option.label] }) }), option.description && (_jsx(Text, { children: _jsxs(Text, { dimColor: true, children: ["      ", option.description] }) })), i < visibleOptions.length - 1 && _jsx(Text, { children: "" })] }, `${option.value.providerID}/${option.value.modelID}`));
+            }), hasBelow && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "\u2193 ", options.length - viewportStart - maxVis, " more below"] }) })), _jsx(Box, { marginTop: 1, marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["  ", "Use arrow keys to navigate, Enter to confirm."] }) })] }));
+}
+/** Ordered pipeline phases for display. */
+const PIPELINE_PHASES = [
+    {
+        key: "discovery",
+        label: "discovery",
+        description: (s) => `Found ${s.totalFiles} files${s.binaryFilesSkipped > 0 ? ` (${s.binaryFilesSkipped} binary skipped)` : ""}`,
+    },
+    {
+        key: "grouping",
+        label: "grouping",
+        description: (s) => `${s.totalGroups} groups (${s.featureGroups} feature, ${s.layerGroups} layer)`,
+    },
+    {
+        key: "exploration",
+        label: "exploration",
+        description: (s) => {
+            const total = s.explorationStatuses.length;
+            if (total === 0)
+                return "Pending";
+            const completed = s.explorationStatuses.filter((g) => g.status === "completed").length;
+            const failed = s.explorationStatuses.filter((g) => g.status === "failed").length;
+            const active = s.explorationStatuses.filter((g) => g.status === "generating").length;
+            const hasSubAgents = s.explorationStatuses.some((g) => g.subAgentProgress && g.subAgentProgress.total > 1);
+            let base = `Exploring: ${completed}/${total} groups complete`;
+            if (hasSubAgents) {
+                let totalAgents = 0;
+                let completedAgents = 0;
+                for (const g of s.explorationStatuses) {
+                    if (g.subAgentProgress) {
+                        totalAgents += g.subAgentProgress.total;
+                        completedAgents += g.subAgentProgress.completed;
+                    }
+                }
+                base += `, ${completedAgents}/${totalAgents} agents`;
+            }
+            if (failed > 0)
+                return `${base} (${failed} failed)`;
+            if (active > 0)
+                return `${base} (${active} active)`;
+            return base;
+        },
+    },
+    {
+        key: "generation",
+        label: "generation",
+        description: (s) => {
+            const activeCount = s.groupStatuses.filter((g) => g.status === "generating").length;
+            const hasSubAgents = s.groupStatuses.some((g) => g.subAgentProgress && g.subAgentProgress.total > 1);
+            let base = `${s.completedSessions}/${s.totalPages} complete`;
+            if (hasSubAgents) {
+                let totalAgents = 0;
+                let completedAgents = 0;
+                for (const g of s.groupStatuses) {
+                    if (g.subAgentProgress) {
+                        totalAgents += g.subAgentProgress.total;
+                        completedAgents += g.subAgentProgress.completed;
+                    }
+                }
+                base += `, ${completedAgents}/${totalAgents} agents`;
+            }
+            return activeCount > 0 ? `${base} (${activeCount} active)` : base;
+        },
+    },
+    {
+        key: "organization",
+        label: "organization",
+        description: () => "Reviewing and reorganizing documentation",
+    },
+    {
+        key: "crossref",
+        label: "cross-references",
+        description: () => "Adding inter-document links",
+    },
+    {
+        key: "architecture",
+        label: "architecture",
+        description: () => "Generating architecture overview",
+    },
+    {
+        key: "indexing",
+        label: "indexing",
+        description: (s) => s.indexFiles.length > 0 ? s.indexFiles.join(", ") : "Pending",
+    },
+];
+/** The ordered phase keys for comparison. */
+const PHASE_ORDER = PIPELINE_PHASES.map((p) => p.key);
+/**
+ * Get the numeric index of a phase in the pipeline order.
+ * @internal
+ */
+function phaseIndex(phase) {
+    const idx = PHASE_ORDER.indexOf(phase);
+    return idx >= 0 ? idx : PHASE_ORDER.length;
+}
+/**
+ * Header component.
+ */
+export function Header({ modelLabel, providerLabel }) {
+    return (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Hem v1.0.0" }), _jsxs(Text, { children: [" ", "\u00B7", " "] }), _jsx(Text, { bold: true, children: providerLabel }), _jsxs(Text, { dimColor: true, children: [" / ", modelLabel] })] }));
+}
+/**
+ * Renders a single pipeline phase row with status indicator.
+ */
+export function PhaseRow({ label, description, status, }) {
+    return (_jsxs(Box, { children: [_jsxs(Text, { children: [_jsxs(Text, { color: status === "active" ? "cyan" : status === "done" ? "green" : undefined, children: ["[", label, "]"] }), "  ", description, "  "] }), status === "active" && (_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) })), status === "done" && _jsx(Text, { color: "green", children: "\u2713" }), status === "pending" && _jsx(Text, { dimColor: true, children: "Pending" })] }));
+}
+/**
+ * Renders a single file group row within the generation dashboard.
+ *
+ * Uses `groupId` as the display identifier and `label` as the description.
+ */
+export function GroupRow({ group }) {
+    switch (group.status) {
+        case "generating":
+            return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: _jsx(Spinner, { type: "dots" }) }), " ", _jsx(Text, { children: group.groupId }), "  ", _jsx(Text, { dimColor: true, children: group.subAgentProgress && group.subAgentProgress.total > 1
+                                ? `Generating... (${group.subAgentProgress.completed}/${group.subAgentProgress.total} agents)`
+                                : "Generating..." })] }) }));
+        case "completed":
+            return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u2713" }), " ", _jsx(Text, { children: group.groupId }), "  ", _jsxs(Text, { dimColor: true, children: [group.label, group.subAgentProgress && group.subAgentProgress.total > 1
+                                    ? ` (${group.subAgentProgress.total} agents)`
+                                    : ""] })] }) }));
+        case "failed":
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: "red", children: "\u2717" }), " ", _jsx(Text, { children: group.groupId }), "  ", _jsx(Text, { color: "red", children: "Failed" })] }) }), group.error && (_jsx(Box, { marginLeft: 4, children: _jsx(Text, { dimColor: true, children: group.error }) }))] }));
+        case "queued":
+        default:
+            return (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), " ", _jsx(Text, { dimColor: true, children: group.groupId }), "  ", _jsx(Text, { dimColor: true, children: group.subAgentProgress && group.subAgentProgress.total > 1
+                                ? `Queued (${group.subAgentProgress.total} agents)`
+                                : "Queued" })] }) }));
+    }
+}
+/**
+ * Renders the exploration phase dashboard showing per-group exploration progress.
+ */
+export function ExplorationDashboard({ explorationStatuses, }) {
+    const hasSubAgents = explorationStatuses.some((g) => g.subAgentProgress && g.subAgentProgress.total > 1);
+    let subAgentSummary;
+    if (hasSubAgents) {
+        let totalAgents = 0;
+        let completedAgents = 0;
+        for (const g of explorationStatuses) {
+            if (g.subAgentProgress) {
+                totalAgents += g.subAgentProgress.total;
+                completedAgents += g.subAgentProgress.completed;
+            }
+        }
+        subAgentSummary = `${completedAgents}/${totalAgents} sub-agents complete`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [subAgentSummary && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: subAgentSummary }) })), explorationStatuses.map((group) => (_jsx(GroupRow, { group: group }, group.groupId)))] }));
+}
+/**
+ * Renders the generation phase dashboard showing progress for each group.
+ */
+export function GenerationDashboard({ groupStatuses, completedSessions, totalPages, }) {
+    const hasSubAgents = groupStatuses.some((g) => g.subAgentProgress && g.subAgentProgress.total > 1);
+    let subAgentSummary;
+    if (hasSubAgents) {
+        let totalAgents = 0;
+        let completedAgents = 0;
+        for (const g of groupStatuses) {
+            if (g.subAgentProgress) {
+                totalAgents += g.subAgentProgress.total;
+                completedAgents += g.subAgentProgress.completed;
+            }
+        }
+        subAgentSummary = `${completedAgents}/${totalAgents} sub-agents complete`;
+    }
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [subAgentSummary && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { dimColor: true, children: subAgentSummary }) })), groupStatuses.map((group) => (_jsx(GroupRow, { group: group }, group.groupId)))] }));
+}
+/**
+ * Renders the final summary after pipeline completion.
+ */
+export function Summary({ totalPages, failedSessions, startedAt, completedAt, warnings, }) {
+    const elapsed = completedAt
+        ? formatElapsed(startedAt, completedAt)
+        : "...";
+    const successCount = totalPages - failedSessions;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [failedSessions === 0 ? (_jsxs(Text, { color: "green", children: ["\u2713", " Documentation generated (", successCount, " pages, ", elapsed, ")"] })) : (_jsxs(Text, { color: "yellow", children: ["\u26A0", " Documentation generated with errors (", successCount, "/", totalPages, " pages, ", elapsed, ")"] })), warnings.length > 0 && (_jsx(Box, { flexDirection: "column", marginLeft: 2, children: warnings.map((warning, index) => (_jsxs(Text, { dimColor: true, children: ["Warnings: ", warning] }, index))) }))] }));
+}
+/**
+ * Root dashboard component.
+ */
+export function App({ initialState, onStateRef }) {
+    const [state, setState] = useState(initialState);
+    const setterRef = useCallback((partial) => {
+        setState((prev) => ({ ...prev, ...partial }));
+    }, []);
+    React.useEffect(() => {
+        onStateRef(setterRef);
+    }, [onStateRef, setterRef]);
+    const currentPhaseIdx = phaseIndex(state.phase);
+    const isComplete = state.phase === "complete";
+    const isError = state.phase === "error";
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Header, { modelLabel: state.modelLabel, providerLabel: state.providerLabel }), PIPELINE_PHASES.map((phase) => {
+                const idx = phaseIndex(phase.key);
+                let status;
+                if (isComplete || isError) {
+                    status = idx <= currentPhaseIdx ? "done" : "pending";
+                    if (phase.key === "generation" && state.totalPages === 0 && !isComplete) {
+                        status = "pending";
+                    }
+                }
+                else if (idx < currentPhaseIdx) {
+                    status = "done";
+                }
+                else if (idx === currentPhaseIdx) {
+                    status = "active";
+                }
+                else {
+                    status = "pending";
+                }
+                // Override exploration phase status based on the explicit completion flag
+                // rather than phase-index comparison, because the streaming pipeline may
+                // advance to "generation" while exploration is still running.
+                if (phase.key === "exploration") {
+                    if (state.explorationComplete) {
+                        status = "done";
+                    }
+                    else if (state.explorationStatuses.length > 0) {
+                        status = "active";
+                    }
+                }
+                return (_jsx(PhaseRow, { label: phase.label, description: phase.description(state), status: status }, phase.key));
+            }), !state.explorationComplete && state.explorationStatuses.length > 0 && (_jsx(ExplorationDashboard, { explorationStatuses: state.explorationStatuses })), state.phase === "generation" && state.groupStatuses.length > 0 && (_jsx(GenerationDashboard, { groupStatuses: state.groupStatuses, completedSessions: state.completedSessions, totalPages: state.totalPages })), (isComplete || isError) && (_jsx(Summary, { totalPages: state.totalPages, failedSessions: state.failedSessions, startedAt: state.startedAt, completedAt: state.completedAt, warnings: state.warnings }))] }));
+}
+// ── LogDashboard ─────────────────────────────────────────────────────
+/**
+ * Non-interactive log-style dashboard for piped output and CI environments.
+ */
+export class LogDashboard {
+    state;
+    log;
+    verbose;
+    loggedGroupStarts = new Set();
+    loggedGroupCompletions = new Set();
+    loggedExplorationStarts = new Set();
+    loggedExplorationCompletions = new Set();
+    constructor(initialState, log = console.log, verbose = false) {
+        this.state = { ...initialState };
+        this.log = log;
+        this.verbose = verbose;
+        this.log(`[info] Provider: ${this.state.providerLabel}, Model: ${this.state.modelLabel}`);
+    }
+    updateState(partial) {
+        const prevPhase = this.state.phase;
+        const prevGroupStatuses = this.state.groupStatuses;
+        const prevExplorationStatuses = this.state.explorationStatuses;
+        this.state = { ...this.state, ...partial };
+        if (partial.phase !== undefined && partial.phase !== prevPhase) {
+            this.logPhaseTransition(prevPhase);
+        }
+        if (partial.groupStatuses !== undefined) {
+            this.logGroupChanges(prevGroupStatuses);
+        }
+        if (partial.explorationStatuses !== undefined) {
+            this.logExplorationChanges(prevExplorationStatuses);
+        }
+    }
+    logPhaseTransition(prevPhase) {
+        const s = this.state;
+        if (!this.verbose) {
+            switch (prevPhase) {
+                case "discovery":
+                    this.log(`[discovery] Found ${s.totalFiles} files` +
+                        (s.binaryFilesSkipped > 0
+                            ? ` (${s.binaryFilesSkipped} binary skipped)`
+                            : ""));
+                    break;
+                case "grouping":
+                    this.log(`[grouping] ${s.totalGroups} groups (${s.featureGroups} feature, ${s.layerGroups} layer)`);
+                    break;
+                case "exploration": {
+                    const total = s.explorationStatuses.length;
+                    const completed = s.explorationStatuses.filter((g) => g.status === "completed").length;
+                    const failed = s.explorationStatuses.filter((g) => g.status === "failed").length;
+                    if (total > 0) {
+                        const base = `[exploration] ${completed}/${total} groups explored`;
+                        this.log(failed > 0 ? `${base} (${failed} failed)` : base);
+                    }
+                    break;
+                }
+                case "indexing":
+                    if (s.indexFiles.length > 0) {
+                        this.log(`[indexing] Generated ${s.indexFiles.join(", ")}`);
+                    }
+                    break;
+            }
+        }
+        if (s.phase === "complete" || s.phase === "error") {
+            const elapsed = s.completedAt
+                ? formatElapsed(s.startedAt, s.completedAt)
+                : "...";
+            const successCount = s.totalPages - s.failedSessions;
+            this.log(`Done: ${successCount} pages generated in ${elapsed}`);
+        }
+    }
+    logGroupChanges(_prevStatuses) {
+        for (const group of this.state.groupStatuses) {
+            if (group.status === "generating" &&
+                !this.loggedGroupStarts.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(`[generation] Starting ${group.label}...${agentInfo}`);
+                this.loggedGroupStarts.add(group.groupId);
+            }
+            if (group.status === "completed" &&
+                !this.loggedGroupCompletions.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.completed}/${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(`[generation] Completed ${group.label}${agentInfo}`);
+                this.loggedGroupCompletions.add(group.groupId);
+            }
+            if (group.status === "failed" &&
+                !this.loggedGroupCompletions.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.completed}/${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(`[generation] Failed ${group.label}${agentInfo}`);
+                this.loggedGroupCompletions.add(group.groupId);
+            }
+        }
+    }
+    logExplorationChanges(_prevStatuses) {
+        for (const group of this.state.explorationStatuses) {
+            if (group.status === "generating" &&
+                !this.loggedExplorationStarts.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(`[exploration] Starting ${group.label}...${agentInfo}`);
+                this.loggedExplorationStarts.add(group.groupId);
+            }
+            if (group.status === "completed" &&
+                !this.loggedExplorationCompletions.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.completed}/${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(`[exploration] Completed ${group.label}${agentInfo}`);
+                this.loggedExplorationCompletions.add(group.groupId);
+            }
+            if (group.status === "failed" &&
+                !this.loggedExplorationCompletions.has(group.groupId)) {
+                const agentInfo = group.subAgentProgress && group.subAgentProgress.total > 1
+                    ? ` (${group.subAgentProgress.completed}/${group.subAgentProgress.total} agents)`
+                    : "";
+                this.log(group.error
+                    ? `[exploration] Failed ${group.label}${agentInfo}: ${group.error}`
+                    : `[exploration] Failed ${group.label}${agentInfo}`);
+                this.loggedExplorationCompletions.add(group.groupId);
+            }
+        }
+    }
+    waitUntilExit() {
+        return Promise.resolve();
+    }
+}
+/**
+ * Creates the progress dashboard and returns a state updater function
+ * and a `waitUntilExit` promise.
+ */
+export function renderDashboard(initialState, verbose) {
+    if (verbose || !process.stdout.isTTY) {
+        const logDashboard = new LogDashboard(initialState, console.log, verbose ?? false);
+        return {
+            updateState: (partial) => logDashboard.updateState(partial),
+            waitUntilExit: () => logDashboard.waitUntilExit(),
+        };
+    }
+    let stateUpdater;
+    const instance = inkRender(_jsx(App, { initialState: initialState, onStateRef: (setter) => {
+            stateUpdater = setter;
+        } }));
+    return {
+        updateState: (partial) => {
+            if (stateUpdater) {
+                stateUpdater(partial);
+            }
+        },
+        waitUntilExit: async () => {
+            // Allow React to commit the final state update and Ink to render
+            // the completed frame (spinners → checkmarks) before tearing down.
+            // Ink throttles renders to ~16ms, so 32ms covers two frames.
+            await new Promise((resolve) => setTimeout(resolve, 32));
+            instance.unmount();
+            return instance.waitUntilExit();
+        },
+    };
+}