@kenkaiiii/ggcoder 4.3.206 → 4.3.208

package/dist/ui/components/GoalOverlay.js

@@ -1,9 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Box, Text, useInput } from "ink";
-import { randomUUID } from "node:crypto";
 import { basename } from "node:path";
-import { createGoalRun, formatGoalPrerequisiteInstruction, goalHasBlockingPrerequisites, isBlockingGoalPrerequisite, loadGoalRuns, saveGoalRuns, summarizeGoalCountsFromRuns, } from "../../core/goal-store.js";
+import { formatGoalPrerequisiteInstruction, goalHasBlockingPrerequisites, isBlockingGoalPrerequisite, loadGoalRuns, saveGoalRuns, summarizeGoalCountsFromRuns, } from "../../core/goal-store.js";
 import { useTerminalSize } from "../hooks/useTerminalSize.js";
 import { useTheme } from "../theme/theme.js";
 const GOAL_LOGO = [" ▄▀▀▀ ▄▀▀▀", " █ ▀█ █ ▀█", " ▀▄▄▀ ▀▄▄▀"];
@@ -63,10 +62,203 @@ export function formatGoalVerifierSummary(run) {
         return "verifier described";
     return "no verifier";
 }
+export function getGoalReadinessText(run) {
+    if (goalHasBlockingPrerequisites(run))
+        return "needs user input";
+    if (run.status === "running" || run.status === "verifying")
+        return "work in progress";
+    if (run.status === "passed")
+        return "verified";
+    if (run.verifier?.command)
+        return "ready to verify";
+    if (run.tasks.length > 0)
+        return "ready to run";
+    return "drafting plan";
+}
+export function formatGoalProgressText(run) {
+    const prereqTotal = run.prerequisites.length;
+    const prereqMet = run.prerequisites.filter((item) => item.status === "met").length;
+    const taskTotal = run.tasks.length;
+    const taskDone = run.tasks.filter((item) => item.status === "done").length;
+    const prereq = prereqTotal > 0 ? `prereqs ${prereqMet}/${prereqTotal}` : "no prereqs";
+    const tasks = taskTotal > 0 ? `tasks ${taskDone}/${taskTotal}` : "no tasks";
+    return `${prereq} · ${tasks}`;
+}
 export function getGoalStatusCountsText(runs) {
     const counts = summarizeGoalCountsFromRuns(runs);
     return `${counts.passed} passed · ${counts.running} running · ${counts.pending} pending · ${counts.blocked} blocked`;
 }
+export function clampGoalScrollOffset(offset, itemCount, viewportRows) {
+    const visibleRows = Math.max(1, Math.floor(viewportRows));
+    const maxOffset = Math.max(0, itemCount - visibleRows);
+    if (!Number.isFinite(offset))
+        return 0;
+    return Math.min(Math.max(0, Math.floor(offset)), maxOffset);
+}
+export function getGoalOverlayViewportRows(terminalRows, reservedRows = 8) {
+    if (!Number.isFinite(terminalRows))
+        return 8;
+    return Math.max(4, Math.floor(terminalRows) - reservedRows);
+}
+export function getGoalScrollOffsetForSelection({ selectedIndex, currentOffset, itemCount, viewportRows, }) {
+    const selected = clampGoalSelectedIndex(selectedIndex, itemCount);
+    const offset = clampGoalScrollOffset(currentOffset, itemCount, viewportRows);
+    const rows = Math.max(1, Math.floor(viewportRows));
+    if (selected < offset)
+        return selected;
+    if (selected >= offset + rows)
+        return clampGoalScrollOffset(selected - rows + 1, itemCount, rows);
+    return offset;
+}
+export function getGoalDetailRowCount(run) {
+    let count = 2;
+    count += 1 + Math.max(1, run.successCriteria.length);
+    if (run.prerequisites.length > 0) {
+        count += 1;
+        for (const prerequisite of run.prerequisites) {
+            count += 1;
+            if (isBlockingGoalPrerequisite(prerequisite) || prerequisite.evidence)
+                count += 1;
+        }
+    }
+    count += 1;
+    if (run.tasks.length === 0) {
+        count += 1;
+    }
+    else {
+        for (const task of run.tasks) {
+            count += 1;
+            if (task.lastSummary)
+                count += 1;
+        }
+    }
+    if (run.harness.length > 0)
+        count += 1 + run.harness.length;
+    if (run.evidencePlan.length > 0)
+        count += 1 + run.evidencePlan.length;
+    if (run.verifier)
+        count += 2;
+    if (run.blockers.length > 0)
+        count += 1 + run.blockers.length;
+    if (run.evidence.length > 0)
+        count += 1 + Math.min(5, run.evidence.length);
+    return count;
+}
+export function getGoalCardExtraRowCount(run) {
+    let count = 0;
+    if (goalHasBlockingPrerequisites(run))
+        count += 1;
+    else if (run.status === "running" || run.status === "verifying")
+        count += 1;
+    if (run.blockers.length > 0)
+        count += 1;
+    return count;
+}
+export function getGoalListCardRowCount({ run }) {
+    const compactCardRows = 1 + // title/status row
+        2 + // compact summary rows
+        getGoalCardExtraRowCount(run);
+    const marginRows = 1;
+    return compactCardRows + marginRows;
+}
+function compareGoalListWindows({ candidate, current, selectedIndex, }) {
+    if (!current)
+        return candidate;
+    const candidateCount = candidate.end - candidate.start;
+    const currentCount = current.end - current.start;
+    if (candidateCount !== currentCount)
+        return candidateCount > currentCount ? candidate : current;
+    if (candidate.rowsUsed !== current.rowsUsed)
+        return candidate.rowsUsed > current.rowsUsed ? candidate : current;
+    const candidateBalance = Math.abs(selectedIndex - candidate.start - (candidate.end - selectedIndex - 1));
+    const currentBalance = Math.abs(selectedIndex - current.start - (current.end - selectedIndex - 1));
+    if (candidateBalance !== currentBalance)
+        return candidateBalance < currentBalance ? candidate : current;
+    return candidate.start > current.start ? candidate : current;
+}
+export function getGoalListWindow({ runs, selectedIndex, viewportRows, }) {
+    const rows = Number.isFinite(viewportRows) ? Math.max(1, Math.floor(viewportRows)) : 8;
+    const fixedRows = 1;
+    if (runs.length === 0) {
+        return { start: 0, end: 0, hiddenBefore: 0, hiddenAfter: 0, rowsUsed: fixedRows };
+    }
+    const selected = clampGoalSelectedIndex(selectedIndex, runs.length);
+    let best = null;
+    for (let start = 0; start <= selected; start++) {
+        let cardRows = 0;
+        for (let end = start + 1; end <= runs.length; end++) {
+            const index = end - 1;
+            const run = runs[index];
+            if (!run)
+                continue;
+            cardRows += getGoalListCardRowCount({ run });
+            if (end <= selected)
+                continue;
+            const hiddenBefore = start;
+            const hiddenAfter = runs.length - end;
+            const indicatorRows = (hiddenBefore > 0 ? 1 : 0) + (hiddenAfter > 0 ? 1 : 0);
+            const rowsUsed = fixedRows + indicatorRows + cardRows;
+            if (rowsUsed > rows)
+                continue;
+            best = compareGoalListWindows({
+                candidate: { start, end, hiddenBefore, hiddenAfter, rowsUsed },
+                current: best,
+                selectedIndex: selected,
+            });
+        }
+    }
+    if (best)
+        return best;
+    const start = selected;
+    const end = selected + 1;
+    const hiddenBefore = start;
+    const hiddenAfter = runs.length - end;
+    const indicatorRows = (hiddenBefore > 0 ? 1 : 0) + (hiddenAfter > 0 ? 1 : 0);
+    const run = runs[selected];
+    const cardRows = run ? getGoalListCardRowCount({ run }) : 0;
+    return {
+        start,
+        end,
+        hiddenBefore,
+        hiddenAfter,
+        rowsUsed: fixedRows + indicatorRows + cardRows,
+    };
+}
+export function getGoalExpandedDetailViewportRows({ viewportRows, cardExtraRows, }) {
+    const rows = Number.isFinite(viewportRows) ? Math.max(1, Math.floor(viewportRows)) : 8;
+    const selectedCardRows = 1 + Math.max(0, Math.floor(cardExtraRows));
+    const fixedRows = 1 + // Goals heading
+        selectedCardRows +
+        2 + // selected card border
+        1 + // detail top margin
+        1; // selected card bottom margin
+    return Math.max(1, rows - fixedRows);
+}
+export function clampGoalDetailScrollOffset(offset, detailRowCount, viewportRows) {
+    const visibleRows = Math.max(1, Math.floor(viewportRows));
+    const scrolledBodyRows = Math.max(1, visibleRows - 1);
+    const maxOffset = Math.max(0, detailRowCount - scrolledBodyRows);
+    if (!Number.isFinite(offset))
+        return 0;
+    return Math.min(Math.max(0, Math.floor(offset)), maxOffset);
+}
+export function getGoalDetailScrollWindow({ detailRowCount, scrollOffset, viewportRows, }) {
+    const rows = Math.max(1, Math.floor(viewportRows));
+    const start = clampGoalDetailScrollOffset(scrollOffset, detailRowCount, rows);
+    const topIndicatorRows = start > 0 && rows > 2 ? 1 : 0;
+    let bodyRows = Math.max(1, rows - topIndicatorRows);
+    let hiddenAfter = Math.max(0, detailRowCount - start - bodyRows);
+    if (hiddenAfter > 0 && bodyRows > 1) {
+        bodyRows -= 1;
+        hiddenAfter = Math.max(0, detailRowCount - start - bodyRows);
+    }
+    return {
+        start,
+        end: Math.min(detailRowCount, start + bodyRows),
+        hiddenBefore: start,
+        hiddenAfter,
+    };
+}
 export function sortGoalRunsForOverlay(runs) {
     return [...runs].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
 }
@@ -116,6 +308,21 @@ function statusColor(status) {
             return "";
     }
 }
+export function getGoalCardStatusColor({ status, selected, primaryColor, textColor, }) {
+    return statusColor(status) || (selected ? primaryColor : textColor);
+}
+export function getGoalCardTitleColor({ selected, primaryColor, textColor, }) {
+    return selected ? primaryColor : textColor;
+}
+function verifierSummaryColor(run, fallbackColor) {
+    if (run.verifier?.lastResult)
+        return verifierStatusColor(run.verifier.lastResult.status);
+    if (run.verifier?.command)
+        return "cyan";
+    if (run.verifier?.description)
+        return "magenta";
+    return fallbackColor;
+}
 function taskStatusColor(status) {
     switch (status) {
         case "done":
@@ -141,6 +348,40 @@ function prerequisiteStatusColor(status) {
             return "cyan";
     }
 }
+function evidencePlanStatusColor(status) {
+    switch (status) {
+        case "ready":
+            return "green";
+        case "blocked":
+            return "yellow";
+        case "planned":
+            return "cyan";
+    }
+}
+function verifierStatusColor(status) {
+    switch (status) {
+        case "pass":
+            return "green";
+        case "fail":
+            return "red";
+        case "unknown":
+            return "yellow";
+    }
+}
+function evidenceKindColor(kind) {
+    switch (kind) {
+        case "command":
+            return "cyan";
+        case "file":
+            return "blue";
+        case "log":
+            return "yellow";
+        case "screenshot":
+            return "magenta";
+        case "summary":
+            return "green";
+    }
+}
 export function getGoalDetailTaskHeading(run) {
     return run.prerequisites.length > 0 ? "2. Worker tasks" : "Worker tasks";
 }
@@ -156,6 +397,10 @@ export function formatGoalTaskDetailSummary(summary) {
         return "";
     return firstLine.length > 180 ? `${firstLine.slice(0, 177)}…` : firstLine;
 }
+function truncateGoalDetailText(text, maxLength = 220) {
+    const collapsed = text.replace(/\s+/g, " ").trim();
+    return collapsed.length > maxLength ? `${collapsed.slice(0, maxLength - 1)}…` : collapsed;
+}
 function GoalHeader({ cwd, runs, agentRunning, }) {
     const theme = useTheme();
     const { columns } = useTerminalSize();
@@ -166,11 +411,83 @@ function GoalHeader({ cwd, runs, agentRunning, }) {
     }
     return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, width: columns, children: [_jsxs(Box, { children: [_jsx(GoalGradientText, { text: GOAL_LOGO[0] }), _jsx(Text, { children: GAP }), _jsx(Text, { color: GOAL_SUCCESS, bold: true, children: "Goal Pane" }), agentRunning && _jsx(Text, { color: GOAL_ACTIVE, children: " (agent running)" })] }), _jsxs(Box, { children: [_jsx(GoalGradientText, { text: GOAL_LOGO[1] }), _jsx(Text, { children: GAP }), _jsx(Text, { color: theme.textDim, wrap: "truncate", children: displayPath })] }), _jsxs(Box, { children: [_jsx(GoalGradientText, { text: GOAL_LOGO[2] }), _jsx(Text, { children: GAP }), _jsxs(Text, { children: [_jsxs(Text, { color: GOAL_SUCCESS, children: [counts.passed, " passed"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: GOAL_ACTIVE, children: [counts.running, " active"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: theme.text, children: [counts.pending, " pending"] }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsxs(Text, { color: GOAL_ACTIVE, children: [counts.blocked, " blocked"] })] })] })] }));
 }
-function GoalDetail({ run }) {
+function StatusChip({ label, color }) {
+    return (_jsxs(Text, { color: color, bold: true, children: ["\u25D6 ", label, " \u25D7"] }));
+}
+function GoalDetail({ run, maxRows, scrollOffset, }) {
     const theme = useTheme();
-    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, children: [run.prerequisites.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: theme.textDim, bold: true, children: getGoalUserPrerequisiteHeading(run) }), run.prerequisites.map((prerequisite) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: prerequisiteStatusColor(prerequisite.status), children: ["[", prerequisite.status, "]"] }), _jsxs(Text, { color: theme.text, children: [" ", prerequisite.label] }), isBlockingGoalPrerequisite(prerequisite) ? (_jsx(Text, { color: theme.warning, children: " \u00B7 required from user" })) : null] }), isBlockingGoalPrerequisite(prerequisite) ? (_jsxs(Text, { color: theme.textDim, wrap: "wrap", children: ["  ", formatGoalPrerequisiteInstruction(prerequisite)] })) : prerequisite.evidence ? (_jsxs(Text, { color: theme.textDim, wrap: "wrap", children: ["  ", prerequisite.evidence] })) : null] }, prerequisite.id)))] })) : null, _jsx(Text, { color: theme.textDim, bold: true, children: getGoalDetailTaskHeading(run) }), run.tasks.length === 0 ? (_jsx(Text, { color: theme.textDim, children: goalHasBlockingPrerequisites(run)
-                    ? "Waiting for user prerequisites before worker tasks can begin."
-                    : "No worker tasks yet." })) : (run.tasks.map((task) => (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsxs(Text, { color: taskStatusColor(task.status), children: ["[", task.status, "]"] }), _jsxs(Text, { color: theme.text, children: [" ", task.title] }), _jsxs(Text, { color: theme.textDim, children: [" \u00B7 attempts ", task.attempts] }), task.workerId ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 worker ", task.workerId] }) : null] }), task.lastSummary ? (_jsxs(Text, { color: theme.textDim, children: [" ", formatGoalTaskDetailSummary(task.lastSummary)] })) : null] }, task.id))))] }));
+    const rows = [
+        _jsxs(Text, { children: [_jsx(Text, { color: theme.primary, bold: true, children: "Goal" }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsx(Text, { color: statusColor(run.status) || theme.secondary, children: getGoalReadinessText(run) }), _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", formatGoalProgressText(run)] })] }, "goal-heading"),
+        _jsx(Text, { color: theme.text, children: truncateGoalDetailText(run.goal || run.title) }, "goal-text"),
+        _jsx(Text, { color: theme.primary, bold: true, children: "Success criteria" }, "success-heading"),
+    ];
+    if (run.successCriteria.length === 0) {
+        rows.push(_jsx(Text, { color: theme.textDim, children: "- none recorded" }, "success-none"));
+    }
+    else {
+        for (const [index, criterion] of run.successCriteria.entries()) {
+            rows.push(_jsxs(Text, { children: [_jsx(Text, { color: "green", children: "\u2713 " }), _jsx(Text, { color: theme.text, children: truncateGoalDetailText(criterion) })] }, `success-${index}`));
+        }
+    }
+    if (run.prerequisites.length > 0) {
+        rows.push(_jsx(Text, { color: theme.primary, bold: true, children: getGoalUserPrerequisiteHeading(run) }, "prereq-heading"));
+        for (const prerequisite of run.prerequisites) {
+            rows.push(_jsxs(Text, { children: [_jsxs(Text, { color: prerequisiteStatusColor(prerequisite.status), children: ["\u25CF ", prerequisite.status] }), _jsxs(Text, { color: theme.text, bold: isBlockingGoalPrerequisite(prerequisite), children: [" ", prerequisite.label] }), isBlockingGoalPrerequisite(prerequisite) ? (_jsx(Text, { color: theme.warning, children: " \u00B7 user action required" })) : null] }, `prereq-${prerequisite.id}`));
+            if (isBlockingGoalPrerequisite(prerequisite)) {
+                rows.push(_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: ["\u2514\u2500 ", formatGoalPrerequisiteInstruction(prerequisite)] }, `prereq-${prerequisite.id}-instruction`));
+            }
+            else if (prerequisite.evidence) {
+                rows.push(_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: ["\u2514\u2500 ", prerequisite.evidence] }, `prereq-${prerequisite.id}-evidence`));
+            }
+        }
+    }
+    rows.push(_jsx(Text, { color: theme.primary, bold: true, children: getGoalDetailTaskHeading(run) }, "task-heading"));
+    if (run.tasks.length === 0) {
+        rows.push(_jsx(Text, { color: theme.textDim, children: goalHasBlockingPrerequisites(run)
+                ? "⏸ Waiting for prerequisites before workers can start."
+                : "✨ No worker tasks yet — run the goal to generate focused work." }, "no-tasks"));
+    }
+    else {
+        for (const task of run.tasks) {
+            rows.push(_jsxs(Text, { children: [_jsxs(Text, { color: taskStatusColor(task.status), children: ["\u25CF ", task.status] }), _jsxs(Text, { color: theme.text, children: [" ", task.title] }), _jsxs(Text, { color: theme.textDim, children: [" \u00B7 try ", task.attempts] }), task.workerId ? _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", task.workerId] }) : null] }, `task-${task.id}`));
+            if (task.lastSummary) {
+                rows.push(_jsxs(Text, { color: theme.textDim, wrap: "truncate", children: ["\u2514\u2500 ", formatGoalTaskDetailSummary(task.lastSummary)] }, `task-${task.id}-summary`));
+            }
+        }
+    }
+    if (run.harness.length > 0) {
+        rows.push(_jsx(Text, { color: theme.primary, bold: true, children: "Harness" }, "harness-heading"));
+        for (const item of run.harness) {
+            rows.push(_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "\u25E6 " }), _jsx(Text, { color: theme.text, children: item.label }), item.command ? _jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", item.command] }) : null, !item.command && item.path ? _jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", item.path] }) : null] }, `harness-${item.id}`));
+        }
+    }
+    if (run.evidencePlan.length > 0) {
+        rows.push(_jsx(Text, { color: theme.primary, bold: true, children: "Evidence plan" }, "evidence-plan-heading"));
+        for (const item of run.evidencePlan) {
+            rows.push(_jsxs(Text, { children: [_jsxs(Text, { color: evidencePlanStatusColor(item.status), children: ["\u25CF ", item.status] }), _jsxs(Text, { color: theme.text, children: [" \u00B7 ", item.label] }), item.command ? _jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", item.command] }) : null, !item.command && item.path ? _jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", item.path] }) : null] }, `evidence-plan-${item.id}`));
+        }
+    }
+    if (run.verifier) {
+        rows.push(_jsx(Text, { color: theme.primary, bold: true, children: "Verifier" }, "verifier-heading"), _jsxs(Text, { wrap: "truncate", children: [run.verifier.lastResult ? (_jsxs(Text, { color: verifierStatusColor(run.verifier.lastResult.status), children: ["\u25CF ", formatGoalVerifierSummary(run)] })) : (_jsxs(Text, { color: run.verifier.command ? "cyan" : theme.textDim, children: ["\u25CF ", formatGoalVerifierSummary(run)] })), run.verifier.command ? (_jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", run.verifier.command] })) : null] }, "verifier-summary"));
+    }
+    if (run.blockers.length > 0) {
+        rows.push(_jsx(Text, { color: theme.warning, bold: true, children: "Blockers" }, "blockers-heading"));
+        for (const [index, blocker] of run.blockers.entries()) {
+            rows.push(_jsxs(Text, { color: theme.warning, children: ["- ", truncateGoalDetailText(blocker)] }, `blocker-${index}`));
+        }
+    }
+    if (run.evidence.length > 0) {
+        rows.push(_jsx(Text, { color: theme.primary, bold: true, children: "Recent evidence" }, "evidence-heading"));
+        for (const item of run.evidence.slice(-5)) {
+            rows.push(_jsxs(Text, { children: [_jsxs(Text, { color: evidenceKindColor(item.kind), children: ["[", item.kind, "]"] }), _jsxs(Text, { color: theme.text, children: [" ", item.label] }), item.path ? _jsxs(Text, { color: theme.secondary, children: [" \u00B7 ", item.path] }) : null] }, `evidence-${item.id}`));
+        }
+    }
+    const window = getGoalDetailScrollWindow({
+        detailRowCount: rows.length,
+        scrollOffset,
+        viewportRows: maxRows,
+    });
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, paddingLeft: 2, height: maxRows, overflowY: "hidden", children: [window.hiddenBefore > 0 ? (_jsxs(Text, { color: theme.secondary, children: ["\u2191 ", window.hiddenBefore, " detail row(s) above \u00B7 PgUp"] })) : null, rows.slice(window.start, window.end), window.hiddenAfter > 0 ? (_jsxs(Text, { color: theme.secondary, children: ["\u2193 ", window.hiddenAfter, " more detail row(s) \u00B7 PgDn"] })) : null] }));
 }
 export function GoalOverlay({ cwd, onClose, onRunGoal, onVerifyGoal, onPauseGoal, agentRunning, }) {
     const theme = useTheme();
@@ -179,8 +496,8 @@ export function GoalOverlay({ cwd, onClose, onRunGoal, onVerifyGoal, onPauseGoal
     const [loaded, setLoaded] = useState(false);
     const [expandedRunId, setExpandedRunId] = useState(null);
     const [mode, setMode] = useState("normal");
-    const [inputText, setInputText] = useState("");
     const [status, setStatus] = useState("");
+    const [detailScrollOffset, setDetailScrollOffset] = useState(0);
     const statusTimer = useRef(null);
     const saveTimer = useRef(null);
     const lastPersistedRunsRef = useRef([]);
@@ -235,46 +552,39 @@ export function GoalOverlay({ cwd, onClose, onRunGoal, onVerifyGoal, onPauseGoal
             void saveGoalRuns(cwd, runs);
         }, 100);
     }, [cwd, loaded, runs]);
+    const { rows } = useTerminalSize();
+    const viewportRows = getGoalOverlayViewportRows(rows);
     const selectedRun = runs[selectedIndex];
     const expandedRun = selectedRun && selectedRun.id === expandedRunId ? selectedRun : null;
+    const selectedCardExtraRows = selectedRun ? getGoalCardExtraRowCount(selectedRun) : 0;
+    const expandedCardExtraRows = expandedRun ? selectedCardExtraRows : 0;
+    const detailViewportRows = expandedRun
+        ? getGoalExpandedDetailViewportRows({
+            viewportRows,
+            cardExtraRows: expandedCardExtraRows,
+        })
+        : 0;
+    const listWindow = expandedRun
+        ? null
+        : getGoalListWindow({
+            runs,
+            selectedIndex,
+            viewportRows,
+        });
+    const scrollOffset = expandedRun ? selectedIndex : (listWindow?.start ?? 0);
+    const visibleRuns = expandedRun
+        ? [expandedRun]
+        : runs.slice(listWindow?.start ?? 0, listWindow?.end ?? 0);
+    const hiddenBefore = expandedRun ? 0 : (listWindow?.hiddenBefore ?? 0);
+    const hiddenAfter = expandedRun ? 0 : (listWindow?.hiddenAfter ?? 0);
+    const detailRowCount = expandedRun ? getGoalDetailRowCount(expandedRun) : 0;
+    useEffect(() => {
+        setDetailScrollOffset(0);
+    }, [expandedRunId]);
+    useEffect(() => {
+        setDetailScrollOffset((offset) => clampGoalDetailScrollOffset(offset, detailRowCount, detailViewportRows));
+    }, [detailRowCount, detailViewportRows]);
     useInput((input, key) => {
-        if (mode === "adding") {
-            if (key.escape) {
-                setMode("normal");
-                setInputText("");
-                return;
-            }
-            if (key.return) {
-                const text = inputText.trim();
-                if (text) {
-                    const run = createGoalRun(cwd, {
-                        id: randomUUID(),
-                        title: text.slice(0, 80),
-                        goal: text,
-                        status: "draft",
-                        successCriteria: [],
-                        prerequisites: [],
-                        harness: [],
-                        tasks: [],
-                        evidence: [],
-                        blockers: [],
-                    });
-                    setRuns((previousRuns) => sortGoalRunsForOverlay([run, ...previousRuns]));
-                    setSelectedIndex(0);
-                    showStatus("Draft goal added");
-                }
-                setMode("normal");
-                setInputText("");
-                return;
-            }
-            if (key.backspace || key.delete) {
-                setInputText((previous) => previous.slice(0, -1));
-                return;
-            }
-            if (input && !key.ctrl && !key.meta)
-                setInputText((previous) => previous + input);
-            return;
-        }
         if (mode === "confirmDelete") {
             if (key.escape || input === "n") {
                 setMode("normal");
@@ -293,6 +603,30 @@ export function GoalOverlay({ cwd, onClose, onRunGoal, onVerifyGoal, onPauseGoal
             onClose();
             return;
         }
+        if (expandedRun && (key.pageUp || input === "[")) {
+            setDetailScrollOffset((offset) => clampGoalDetailScrollOffset(offset - Math.max(1, detailViewportRows - 1), detailRowCount, detailViewportRows));
+            return;
+        }
+        if (expandedRun && (key.pageDown || input === "]")) {
+            setDetailScrollOffset((offset) => clampGoalDetailScrollOffset(offset + Math.max(1, detailViewportRows - 1), detailRowCount, detailViewportRows));
+            return;
+        }
+        if (expandedRun && key.home) {
+            setDetailScrollOffset(0);
+            return;
+        }
+        if (expandedRun && key.end) {
+            setDetailScrollOffset(clampGoalDetailScrollOffset(detailRowCount, detailRowCount, detailViewportRows));
+            return;
+        }
+        if (expandedRun && (key.upArrow || input === "k")) {
+            setDetailScrollOffset((offset) => clampGoalDetailScrollOffset(offset - 1, detailRowCount, detailViewportRows));
+            return;
+        }
+        if (expandedRun && (key.downArrow || input === "j")) {
+            setDetailScrollOffset((offset) => clampGoalDetailScrollOffset(offset + 1, detailRowCount, detailViewportRows));
+            return;
+        }
         if (key.upArrow || input === "k") {
             setSelectedIndex((index) => clampGoalSelectedIndex(index - 1, runs.length));
             return;
@@ -317,20 +651,25 @@ export function GoalOverlay({ cwd, onClose, onRunGoal, onVerifyGoal, onPauseGoal
             onPauseGoal(selectedRun);
             return;
         }
-        if (input === "a") {
-            setMode("adding");
-            setInputText("");
-            return;
-        }
         if (input === "x" && selectedRun) {
             setMode("confirmDelete");
             showStatus("Archive goal? y/n");
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(GoalHeader, { cwd: cwd, runs: runs, agentRunning: agentRunning }), agentRunning ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.textDim, children: "Agent is running; Goal pane stays available without resetting chat." }) })) : null, !loaded ? (_jsx(Text, { color: theme.textDim, children: "Loading goals\u2026" })) : runs.length === 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: theme.textDim, children: "No goals. Run /goal <objective> or press (a)dd." }), mode === "adding" ? _jsxs(Text, { color: theme.primary, children: ["New goal: ", inputText] }) : null] })) : (_jsxs(Box, { flexDirection: "column", children: [runs.map((run, index) => {
+    return (_jsxs(Box, { flexDirection: "column", height: rows, overflow: "hidden", children: [_jsx(GoalHeader, { cwd: cwd, runs: runs, agentRunning: agentRunning }), agentRunning ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: theme.textDim, children: "Agent is running; Goal pane stays available without resetting chat." }) })) : null, !loaded ? (_jsx(Box, { borderStyle: "round", borderColor: theme.textDim, paddingX: 1, children: _jsx(Text, { color: theme.textDim, children: "Loading goals\u2026" }) })) : runs.length === 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "round", borderColor: theme.primary, paddingX: 1, paddingY: 1, children: [_jsx(Text, { color: theme.primary, bold: true, children: "Start a durable Goal run" }), _jsx(Text, { color: theme.textDim, children: "No goals yet. Ask the agent to start a durable Goal." }), _jsx(Text, { color: theme.textDim, children: "Prerequisites, worker tasks, evidence, and verifier results will appear in this pane." })] })) : (_jsxs(Box, { flexDirection: "column", height: viewportRows, overflowY: "hidden", children: [_jsx(Text, { color: theme.textDim, bold: true, children: "Goals" }), hiddenBefore > 0 ? (_jsxs(Text, { color: theme.textDim, children: ["\u2191 ", hiddenBefore, " earlier goal", hiddenBefore === 1 ? "" : "s"] })) : null, visibleRuns.map((run, visibleIndex) => {
+                        const index = scrollOffset + visibleIndex;
                         const selected = index === selectedIndex;
                         const blocked = goalHasBlockingPrerequisites(run);
-                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: selected ? theme.primary : theme.textDim, children: selected ? "❯ " : "  " }), _jsxs(Text, { color: statusColor(run.status) || (selected ? theme.primary : theme.text), children: ["[", run.status, "]"] }), _jsxs(Text, { color: selected ? theme.primary : theme.text, bold: selected, children: [" ", run.title] }), _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", run.id.slice(0, 8)] }), blocked ? _jsx(Text, { color: theme.warning, children: " \u00B7 blocked" }) : null] }), _jsxs(Text, { color: theme.textDim, children: ["    ", formatGoalPrerequisiteSummary(run), " \u00B7 ", formatGoalTaskSummary(run), " \u00B7", " ", formatGoalVerifierSummary(run)] }), run.blockers.length > 0 ? (_jsxs(Text, { color: theme.warning, children: ["    ", "blocker: ", run.blockers[0]] })) : null, expandedRun?.id === run.id ? _jsx(GoalDetail, { run: run }) : null] }, run.id));
-                    }), mode === "adding" ? _jsxs(Text, { color: theme.primary, children: ["New goal: ", inputText] }) : null] })), _jsx(Box, { marginTop: 1, children: mode === "confirmDelete" ? (_jsx(Text, { color: theme.warning, children: "Confirm archive selected goal: y/n" })) : mode === "adding" ? (_jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { color: theme.primary, children: "Enter" }), " add · ", _jsx(Text, { color: theme.primary, children: "ESC" }), " cancel"] })) : (_jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { color: theme.primary, children: "\u2191\u2193" }), " move · (", _jsx(Text, { color: theme.primary, children: "d" }), ")etail · (", _jsx(Text, { color: theme.primary, children: "r" }), ")un · (", _jsx(Text, { color: theme.primary, children: "v" }), ")erify · (", _jsx(Text, { color: theme.primary, children: "p" }), ")ause · (", _jsx(Text, { color: theme.primary, children: "a" }), ")dd · (", _jsx(Text, { color: theme.primary, children: "x" }), ")archive · ", _jsx(Text, { color: theme.primary, children: "ESC" }), " close"] })) }), status ? (_jsx(Box, { children: _jsx(Text, { color: theme.secondary, children: status }) })) : null] }));
+                        return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: expandedRun?.id === run.id ? "round" : undefined, borderColor: expandedRun?.id === run.id ? theme.primary : undefined, paddingX: expandedRun?.id === run.id ? 1 : 0, children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: selected ? theme.primary : theme.textDim, children: selected ? "❯ " : "  " }), _jsx(StatusChip, { label: run.status, color: getGoalCardStatusColor({
+                                                status: run.status,
+                                                selected,
+                                                primaryColor: theme.primary,
+                                                textColor: theme.text,
+                                            }) }), _jsxs(Text, { color: getGoalCardTitleColor({
+                                                selected,
+                                                primaryColor: theme.primary,
+                                                textColor: theme.text,
+                                            }), bold: selected, children: [" ", run.title] }), _jsxs(Text, { color: theme.textDim, children: [" \u00B7 ", run.id.slice(0, 8)] })] }), expandedRun?.id === run.id ? null : (_jsxs(_Fragment, { children: [_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.textDim, children: selected ? "  " : "    " }), _jsx(Text, { color: statusColor(run.status) || theme.secondary, children: getGoalReadinessText(run) }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsx(Text, { color: theme.text, children: formatGoalProgressText(run) }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsx(Text, { color: verifierSummaryColor(run, theme.textDim), children: formatGoalVerifierSummary(run) })] }), _jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: theme.textDim, children: selected ? "  " : "    " }), _jsx(Text, { color: goalHasBlockingPrerequisites(run) ? theme.warning : GOAL_SUCCESS, children: formatGoalPrerequisiteSummary(run) }), _jsx(Text, { color: theme.textDim, children: " \u00B7 " }), _jsx(Text, { color: run.tasks.length > 0 ? GOAL_SUCCESS : theme.text, children: formatGoalTaskSummary(run) })] })] })), blocked ? (_jsxs(Text, { color: theme.warning, wrap: "truncate", children: [selected ? "  " : "    ", "\u26A0 prerequisite needed before workers continue"] })) : run.status === "running" || run.status === "verifying" ? (_jsxs(Text, { color: GOAL_ACTIVE, wrap: "truncate", children: [selected ? "  " : "    ", "\u25CF active \u2014 watching worker/verifier progress"] })) : null, run.blockers.length > 0 ? (_jsxs(Text, { color: theme.warning, wrap: "truncate", children: [selected ? "  " : "    ", "blocker: ", run.blockers[0]] })) : null, expandedRun?.id === run.id ? (_jsx(GoalDetail, { run: run, maxRows: detailViewportRows, scrollOffset: detailScrollOffset })) : null] }, run.id));
+                    }), hiddenAfter > 0 ? (_jsxs(Text, { color: theme.textDim, children: ["\u2193 ", hiddenAfter, " later goal", hiddenAfter === 1 ? "" : "s"] })) : null] })), _jsx(Box, { marginTop: 1, children: mode === "confirmDelete" ? (_jsx(Text, { color: theme.warning, children: "Confirm archive selected goal: y/n" })) : (_jsxs(Text, { color: theme.textDim, children: [_jsx(Text, { color: theme.primary, children: "\u2191\u2193/jk" }), expandedRun ? " scroll detail · " : " select · ", _jsx(Text, { color: theme.primary, children: "Enter/d" }), expandedRun ? " close detail · " : " detail · ", expandedRun ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: theme.primary, children: "PgUp/PgDn" }), " page detail · "] })) : null, _jsx(Text, { color: theme.primary, children: "r" }), " run · ", _jsx(Text, { color: theme.primary, children: "v" }), " verify · ", _jsx(Text, { color: theme.primary, children: "p" }), " pause · ", _jsx(Text, { color: theme.primary, children: "x" }), " archive · ", _jsx(Text, { color: theme.primary, children: "Esc" }), " close"] })) }), status ? (_jsx(Box, { children: _jsx(Text, { color: theme.secondary, children: status }) })) : null] }));
 }
 //# sourceMappingURL=GoalOverlay.js.map