@kenkaiiii/ggcoder 4.3.200 → 4.3.202

package/dist/ui/App.js

@@ -35,7 +35,6 @@ import { EyesOverlay } from "./components/EyesOverlay.js";
 import { ThemeSelector } from "./components/ThemeSelector.js";
 import { BackgroundTasksBar } from "./components/BackgroundTasksBar.js";
 import { useTheme, useSetTheme } from "./theme/theme.js";
-import { useAnimationTick, useAnimationActive, deriveFrame, } from "./components/AnimationContext.js";
 import { useTerminalTitle } from "./hooks/useTerminalTitle.js";
 import { getGitBranch } from "../utils/git.js";
 import { getModel, getContextWindow, getMaxThinkingLevel } from "../core/model-registry.js";
@@ -45,7 +44,7 @@ import { log } from "../core/logger.js";
 import { getPendingUpdate, startPeriodicUpdateCheck, stopPeriodicUpdateCheck, } from "../core/auto-update.js";
 import { generateSessionTitle } from "../utils/session-title.js";
 import { SettingsManager } from "../core/settings-manager.js";
-import { shouldCompact, compact } from "../core/compaction/compactor.js";
+import { shouldCompact, compact, getCompactionReserveTokens, } from "../core/compaction/compactor.js";
 import { estimateConversationTokens } from "../core/compaction/token-estimator.js";
 import { PROMPT_COMMANDS, getPromptCommand } from "../core/prompt-commands.js";
 import { isFirstTimeSetup, markSetupAudited, getAnnouncedLanguages, markLanguagesAnnounced, } from "../core/setup-history.js";
@@ -93,6 +92,7 @@ function toErrorItem(err, id, contextPrefix) {
 }
 /** Tools that get aggregated into a single compact group when concurrent. */
 const AGGREGATABLE_TOOLS = new Set(["read", "grep", "find", "ls"]);
+const RUNNING_INDICATOR_ANIMATION_MS = 1_200;
 /**
  * Cap memory by replacing old items with tiny tombstones. Ink's <Static>
  * tracks rendered items by array length — the array must never shrink, but
@@ -858,8 +858,7 @@ export function App(props) {
             return injectRepoMapContext(stripped);
         }
         const contextWindow = getContextWindow(currentModel, contextWindowOptions);
-        const modelInfo = getModel(currentModel);
-        const reserveTokens = (modelInfo?.maxOutputTokens ?? 0) + 5_000;
+        const reserveTokens = getCompactionReserveTokens(props.maxTokens);
         const tokensFresh = lastActualTokensTimestampRef.current > lastCompactionTimeRef.current;
         const actualTokens = lastActualTokensRef.current > 0 && tokensFresh ? lastActualTokensRef.current : undefined;
         if (shouldCompact(stripped, contextWindow, threshold, actualTokens, reserveTokens)) {
@@ -1058,6 +1057,8 @@ export function App(props) {
         }, []),
         onToolStart: useCallback((toolCallId, name, args) => {
             log("INFO", "tool", `Tool call started: ${name}`, { id: toolCallId });
+            const startedAt = Date.now();
+            const animateUntil = startedAt + RUNNING_INDICATOR_ANIMATION_MS;
             // Flush completed items (assistant text, finished tools) to Static
             // before adding tool UI. Keeping both in the live area makes it tall
             // and causes Ink's cursor math to clip the top.
@@ -1103,7 +1104,10 @@ export function App(props) {
                         const next = [...prev];
                         next[groupIdx] = {
                             ...group,
-                            tools: [...group.tools, { toolCallId, name, args, status: "running" }],
+                            tools: [
+                                ...group.tools,
+                                { toolCallId, name, args, status: "running", animateUntil },
+                            ],
                         };
                         return next;
                     }
@@ -1111,7 +1115,7 @@ export function App(props) {
                         ...prev,
                         {
                             kind: "tool_group",
-                            tools: [{ toolCallId, name, args, status: "running" }],
+                            tools: [{ toolCallId, name, args, status: "running", animateUntil }],
                             id: getId(),
                         },
                     ];
@@ -1120,7 +1124,7 @@ export function App(props) {
             else {
                 setLiveItems((prev) => [
                     ...prev,
-                    { kind: "tool_start", toolCallId, name, args, id: getId() },
+                    { kind: "tool_start", toolCallId, name, args, id: getId(), startedAt, animateUntil },
                 ]);
             }
         }, []),
@@ -1273,6 +1277,8 @@ export function App(props) {
         }, []),
         onServerToolCall: useCallback((id, name, input) => {
             log("INFO", "server_tool", `Server tool call: ${name}`, { id });
+            const startedAt = Date.now();
+            const animateUntil = startedAt + RUNNING_INDICATOR_ANIMATION_MS;
             // Flush completed items (including assistant text) to Static before
             // adding server tool UI — same rationale as onToolStart.
             setLiveItems((prev) => {
@@ -1287,7 +1293,8 @@ export function App(props) {
                         serverToolCallId: id,
                         name,
                         input,
-                        startedAt: Date.now(),
+                        startedAt,
+                        animateUntil,
                         id: getId(),
                     },
                 ];
@@ -1660,12 +1667,6 @@ export function App(props) {
             setEyesCount(isEyesActive(props.cwd) ? journalCount({ status: "open" }, props.cwd) : undefined);
         }
     }, [agentLoop.isRunning, props.cwd]);
-    // Animated thinking border — derived from global animation tick
-    useAnimationActive();
-    const animTick = useAnimationTick();
-    const thinkingBorderFrame = agentLoop.activityPhase === "thinking"
-        ? deriveFrame(animTick, 1000, THINKING_BORDER_COLORS.length)
-        : 0;
     const handleSubmit = useCallback(async (input, inputImages = [], pasteInfo) => {
         const trimmed = input.trim();
         if (trimmed.startsWith("/")) {
@@ -2224,13 +2225,13 @@ export function App(props) {
             case "assistant":
                 return (_jsx(AssistantMessage, { text: item.text, thinking: item.thinking, thinkingMs: item.thinkingMs, planMode: item.planMode }, item.id));
             case "tool_start":
-                return (_jsx(ToolExecution, { status: "running", name: item.name, args: item.args, progressOutput: item.progressOutput }, item.id));
+                return (_jsx(ToolExecution, { status: "running", name: item.name, args: item.args, progressOutput: item.progressOutput, animateUntil: item.animateUntil }, item.id));
             case "tool_done":
                 return (_jsx(ToolExecution, { status: "done", name: item.name, args: item.args, result: item.result, isError: item.isError, details: item.details }, item.id));
             case "tool_group":
                 return _jsx(ToolGroupExecution, { tools: item.tools }, item.id);
             case "server_tool_start":
-                return (_jsx(ServerToolExecution, { status: "running", name: item.name, input: item.input, startedAt: item.startedAt }, item.id));
+                return (_jsx(ServerToolExecution, { status: "running", name: item.name, input: item.input, startedAt: item.startedAt, animateUntil: item.animateUntil }, item.id));
             case "server_tool_done":
                 return (_jsx(ServerToolExecution, { status: "done", name: item.name, input: item.input, durationMs: item.durationMs, resultType: item.resultType }, item.id));
             case "error": {
@@ -2244,30 +2245,15 @@ export function App(props) {
             case "plan_transition":
                 return (_jsx(Box, { marginTop: 1, flexShrink: 1, children: _jsxs(Text, { color: theme.planPrimary, bold: true, wrap: "wrap", children: [item.active ? "● " : "● ", item.text] }) }, item.id));
             case "thinking_transition": {
-                // Borderless. While in liveItems the glyph color cycles through the
-                // shared TRANSITION_COLORS gradient (~500ms per color). Once the item
-                // flushes to <Static>, its last-rendered color sticks — re-renders
-                // don't propagate into scrollback. Cheap: the animation timer is
-                // already running for the activity indicator.
-                const glyphFrame = item.active
-                    ? deriveFrame(animTick, 500, THINKING_BORDER_COLORS.length)
-                    : 0;
-                const glyphColor = item.active ? THINKING_BORDER_COLORS[glyphFrame] : theme.textDim;
+                const glyphColor = item.active ? THINKING_BORDER_COLORS[0] : theme.textDim;
                 return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "✻ " }), _jsx(Text, { color: item.active ? theme.accent : theme.textDim, bold: true, children: item.active ? "Thinking ON" : "Thinking OFF" })] }, item.id));
             }
             case "model_transition": {
-                // Same animated-gradient pattern as thinking_transition, distinct
-                // glyph (▸) and primary-blue model name so the two transitions read
-                // as related but different.
-                const glyphFrame = deriveFrame(animTick, 500, THINKING_BORDER_COLORS.length);
-                const glyphColor = THINKING_BORDER_COLORS[glyphFrame];
+                const glyphColor = THINKING_BORDER_COLORS[0];
                 return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "▸ " }), _jsx(Text, { color: theme.textDim, children: "Switched to " }), _jsx(Text, { color: theme.primary, bold: true, children: item.modelName })] }, item.id));
             }
             case "theme_transition": {
-                // Same family as model/thinking transitions. The ◐ glyph (half-filled
-                // circle) reads as the light/dark dichotomy.
-                const glyphFrame = deriveFrame(animTick, 500, THINKING_BORDER_COLORS.length);
-                const glyphColor = THINKING_BORDER_COLORS[glyphFrame];
+                const glyphColor = THINKING_BORDER_COLORS[0];
                 return (_jsxs(Box, { marginTop: 1, flexShrink: 1, children: [_jsx(Text, { color: glyphColor, bold: true, children: "◐ " }), _jsx(Text, { color: theme.textDim, children: "Theme switched to " }), _jsx(Text, { color: theme.primary, bold: true, children: item.themeName })] }, item.id));
             }
             case "plan_event": {
@@ -2293,7 +2279,7 @@ export function App(props) {
                                     ? ` (+${item.imageCount} image${item.imageCount > 1 ? "s" : ""})`
                                     : ""] })] }, item.id));
             case "compacting":
-                return _jsx(CompactionSpinner, {}, item.id);
+                return _jsx(CompactionSpinner, { staticDisplay: true }, item.id);
             case "compacted":
                 return (_jsx(CompactionDone, { originalCount: item.originalCount, newCount: item.newCount, tokensBefore: item.tokensBefore, tokensAfter: item.tokensAfter }, item.id));
             case "duration":
@@ -2694,9 +2680,7 @@ export function App(props) {
                         log("ERROR", "error", errMsg);
                         setLiveItems((prev) => [...prev, toErrorItem(err, getId())]);
                     });
-                } })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 1, children: [liveItems.map((item) => renderItem(item)), _jsx(StreamingArea, { isRunning: agentLoop.isRunning, streamingText: agentLoop.streamingText, streamingThinking: agentLoop.streamingThinking, thinkingMs: agentLoop.thinkingMs, planMode: planMode })] }), agentLoop.isRunning && agentLoop.activityPhase !== "idle" ? (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: agentLoop.activityPhase === "thinking"
-                            ? THINKING_BORDER_COLORS[thinkingBorderFrame]
-                            : "transparent", paddingLeft: 1, paddingRight: 1, width: columns, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, runStartRef: agentLoop.runStartRef, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, thinkingEnabled: thinkingEnabled, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode, retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length }) })) : agentLoop.stallError ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.warning, children: "⚠ API provider stream interrupted — retries exhausted." }), _jsx(Text, { color: theme.textDim, children: "  Your conversation is preserved. Send a message to continue." })] })) : (doneStatus &&
+                } })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, paddingRight: 1, children: [liveItems.map((item) => renderItem(item)), _jsx(StreamingArea, { isRunning: agentLoop.isRunning, streamingText: agentLoop.streamingText, streamingThinking: agentLoop.streamingThinking, thinkingMs: agentLoop.thinkingMs, planMode: planMode })] }), agentLoop.isRunning && agentLoop.activityPhase !== "idle" ? (_jsx(Box, { marginTop: 1, borderStyle: "round", borderColor: agentLoop.activityPhase === "thinking" ? THINKING_BORDER_COLORS[0] : "transparent", paddingLeft: 1, paddingRight: 1, width: columns, children: _jsx(ActivityIndicator, { phase: agentLoop.activityPhase, elapsedMs: agentLoop.elapsedMs, runStartRef: agentLoop.runStartRef, thinkingMs: agentLoop.thinkingMs, isThinking: agentLoop.isThinking, thinkingEnabled: thinkingEnabled, tokenEstimate: agentLoop.streamedTokenEstimate, charCountRef: agentLoop.charCountRef, realTokensAccumRef: agentLoop.realTokensAccumRef, userMessage: lastUserMessage, activeToolNames: agentLoop.activeToolCalls.map((tc) => tc.name), planMode: planMode, retryInfo: agentLoop.retryInfo, planDone: planSteps.filter((s) => s.completed).length, planTotal: planSteps.length, staticDisplay: true }) })) : agentLoop.stallError ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: theme.warning, children: "⚠ API provider stream interrupted — retries exhausted." }), _jsx(Text, { color: theme.textDim, children: "  Your conversation is preserved. Send a message to continue." })] })) : (doneStatus &&
                         !agentLoop.isRunning && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.success, children: ["✻ ", doneStatus.verb, " ", formatDuration(doneStatus.durationMs)] }) }))), agentLoop.queuedCount > 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.accent, children: ["⏳ ", agentLoop.queuedCount, " message", agentLoop.queuedCount > 1 ? "s" : "", " queued"] }) })), _jsx(InputArea, { onSubmit: handleSubmit, onAbort: handleAbort, disabled: agentLoop.isRunning, isActive: !taskBarFocused && !overlay, onDownAtEnd: handleFocusTaskBar, onShiftTab: handleToggleThinking, onToggleTasks: () => {
                             // While the agent is running, skip the screen-clear + staticKey
                             // bump that would otherwise wipe the chat history from scrollback.