@yjjeong/omg 0.1.0

package/dist/ui/components/App.js

@@ -0,0 +1,803 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Box, Text, useInput, useStdin, useStdout } from "ink";
+import { EventLog } from "./EventLog.js";
+import { CommandInput } from "./CommandInput.js";
+import { Dock } from "./Dock.js";
+import { StatusBar } from "./StatusBar.js";
+import { HintBar } from "./HintBar.js";
+import { HRule } from "./HRule.js";
+import { Welcome } from "./Welcome.js";
+import { shellActivityVerb } from "./Spinner.js";
+import { TabChip } from "./TabChip.js";
+import { setTheme, theme } from "../theme.js";
+import { sendPickerClose } from "../outbound.js";
+import { wantsAltScreen } from "../screenMode.js";
+import { parseMouseWheel } from "../mouse.js";
+import { isAskRequest, isPermissionRequest } from "../types.js";
+const CURSOR_LAYOUT_SETTLE_MS = 120;
+// Phase 248/295: cap the in-memory event log. Alt-screen front-trims its
+// bounded viewport; transcript mode never front-trims (that corrupts the
+// append-only <Static>) and instead checkpoints at idle — see
+// shouldCheckpointTranscript.
+const EVENTS_CAP = 5000;
+const EVENTS_TRIM = 1000;
+// Phase 310: transcript mode re-derives every group from the full events
+// array on each 32ms flush (groupEvents is O(events) and uncached), so the
+// repaint cost scales with events.length — the source of the "laggy after an
+// hour" creep. In normal-screen mode settled rows already live in native
+// scrollback, so we can checkpoint (drop the React log + remount <Static>)
+// far below EVENTS_CAP without losing any visible history. A low softcap
+// keeps N — and therefore per-flush cost — bounded across a long session.
+// Alt-screen keeps the 5000 cap (its viewport front-trims and PageUp reads
+// from this array, so it needs the deeper backlog).
+const TRANSCRIPT_EVENTS_SOFTCAP = 1200;
+// Phase 295: decide whether to checkpoint the transcript-mode event log.
+// In normal-screen mode settled rows are owned by native terminal
+// scrollback (Ink <Static> emitted them once), so once the React-side
+// log crosses the cap at an IDLE boundary we drop it wholesale and remount
+// <Static> with a fresh key: the old rows stay in scrollback (re-emitted
+// nowhere → no duplicate, no scroll jump) and the array restarts empty so
+// later appends stay strictly append-only. Never while streaming (the
+// live tail isn't settled yet) and never in alt-screen (its viewport
+// re-derives every frame and front-trims safely).
+export function shouldCheckpointTranscript(opts) {
+    return (!opts.altScreenMode &&
+        !opts.streaming &&
+        opts.eventsLength > (opts.cap ?? EVENTS_CAP));
+}
+// Phase 277: cheap value-equality for a single event/status field.
+// Status payloads are tiny (git info, tabsState, token counts) and the
+// cli emits each object with stable key order, so a structural compare
+// via JSON is sufficient to tell an unchanged 5s git refresh apart from
+// a real status change.
+function statusValueEqual(a, b) {
+    if (a === b)
+        return true;
+    if (typeof a !== "object" ||
+        typeof b !== "object" ||
+        a === null ||
+        b === null) {
+        return false;
+    }
+    return JSON.stringify(a) === JSON.stringify(b);
+}
+// Phase 67 layout (claude-code style):
+//   [ EventLog  ]           - scrolling event history
+//   [ Spinner   ]           - shown only while streaming
+//   [ Permission prompt? ]  - blocks input when active
+//   [ ─── HRule ]
+//   [ CommandInput ]        - ❯ prompt
+//   [ ─── HRule ]
+//   [ StatusBar ]           - role/provider/model/session/cwd/tokens
+//   [ HintBar   ]           - key hints
+export function App({ reader, onClose }) {
+    const [events, setEvents] = useState([]);
+    // Phase 305: repaint nonce. Toggled on every idle flush so the Ink
+    // output string changes even when the committed-group count doesn't
+    // grow (e.g. consecutive idle event/text events merge into the same
+    // Static group). A changed output string guarantees
+    // `output !== this.lastOutput` in Ink's else-if branch, which
+    // triggers throttledLog and redraws the dynamic chrome.
+    const [idleNonce, setIdleNonce] = useState(0);
+    const [pending, setPending] = useState([]);
+    const [asking, setAsking] = useState([]);
+    const [status, setStatus] = useState({ mode: "chat" });
+    // Phase 277: authoritative mirror of `status` for synchronous
+    // value-comparison in the event/status handler. setStatus is only
+    // ever called from that handler, so this ref stays in lockstep.
+    const statusRef = useRef(status);
+    // Phase 200a (F5.2): streaming label sits in state (changes on
+    // stream start/end only). The live char counter lives in a ref so
+    // each event/text chunk doesn't bump App's state — that used to
+    // re-render the whole tree per chunk and bypassed EventLog's memo.
+    // Spinner reads the ref on its own interval tick.
+    // Phase 200a (F5.2): streaming label sits in state (changes on
+    // stream start/end only). The live char counter lives in a ref so
+    // each event/text chunk doesn't bump App's state — that used to
+    // re-render the whole tree per chunk and bypassed EventLog's memo.
+    // Spinner reads the ref on its own interval tick.
+    //
+    // Phase 236c: this state still mirrors stream_start/end as before
+    // so single-tab callers and the stub renderer keep working without
+    // a tabsState snapshot. A follow-up useEffect (below, on
+    // status.activeTab change) cross-checks against tabsState — if the
+    // destination tab isn't actually running per the per-tab snapshot,
+    // we drop the stale streaming state so the spinner doesn't carry
+    // the previous tab's label and elapsed time across the switch.
+    const [streaming, setStreaming] = useState(null);
+    // Phase 304: mirror `streaming` into a ref so flushPending (a stable
+    // useCallback) can read the live value without a stale closure — it
+    // only nudges an idle redraw when no stream is active.
+    const streamingRef = useRef(false);
+    streamingRef.current = streaming !== null;
+    const streamingCharsRef = useRef(0);
+    // Phase 332: the Spinner's current work activity. A ref (like
+    // streamingCharsRef) so updating it as the turn moves through
+    // thinking → tool → streaming never re-renders App / disturbs the cursor.
+    const activityRef = useRef({ kind: "streaming" });
+    const [picker, setPicker] = useState(null);
+    // Phase 34: thinking visibility toggled by /think. Default visible.
+    const [thinkVisible, setThinkVisible] = useState(true);
+    // Phase 101: /verbose renders every tool card in full (no collapse).
+    const [verbose, setVerbose] = useState(false);
+    // Phase 308: /reasoning expands reasoning/thinking blocks inline (live
+    // progress) without the full /verbose tool-card blast. Off by default.
+    const [reasoningExpanded, setReasoningExpanded] = useState(false);
+    // Phase 270: EventLog uses append-only <Static> in normal-screen mode
+    // so settled transcript rows go to native terminal scrollback once,
+    // while only the live tail repaints. When the source log is replaced
+    // (/switch, /clear), bump this key because <Static> is intentionally
+    // append-only and indexes by item count.
+    const [eventLogResetKey, setEventLogResetKey] = useState(0);
+    // Phase 120: predicted next message (opt-in /predict). Shown as a
+    // ghost on the empty prompt; cleared when a new turn starts or the
+    // user submits.
+    const [prediction, setPrediction] = useState("");
+    // Phase 272: hardware cursor is safe only after the dynamic Ink
+    // layout has settled. In normal-screen transcript mode Ink writes
+    // <Static> rows outside the dynamic output, while useCursor
+    // positions are relative to that dynamic output. A child-measured
+    // cursor origin can therefore be one commit stale while EventLog,
+    // Dock, ask/permission pickers, or status chrome changes height.
+    // Hide the terminal cursor during those mutation windows and show
+    // it again only after one settled frame, matching full-screen TUIs'
+    // "draw frame, then place cursor" invariant.
+    const [cursorStable, setCursorStable] = useState(true);
+    const cursorSettleTimerRef = useRef(null);
+    const markCursorLayoutUnstable = useCallback(() => {
+        setCursorStable(false);
+        if (cursorSettleTimerRef.current) {
+            clearTimeout(cursorSettleTimerRef.current);
+        }
+        cursorSettleTimerRef.current = setTimeout(() => {
+            cursorSettleTimerRef.current = null;
+            setCursorStable(true);
+        }, CURSOR_LAYOUT_SETTLE_MS);
+    }, []);
+    useEffect(() => () => {
+        if (cursorSettleTimerRef.current) {
+            clearTimeout(cursorSettleTimerRef.current);
+            cursorSettleTimerRef.current = null;
+        }
+    }, []);
+    // Phase 186: latest active tab name in a ref so the reader handler
+    // (closure-captured at mount) can compare incoming predictions
+    // against the current tab without restating effect deps.
+    const activeTabRef = useRef(undefined);
+    useEffect(() => {
+        markCursorLayoutUnstable();
+        activeTabRef.current = status.activeTab;
+        // Switching tabs invalidates any in-flight prediction — the new
+        // tab will produce its own at its next turn end. Without this, the
+        // ghost from the tab we just left would linger on the new prompt.
+        setPrediction("");
+        // Phase 236c (audit): the streamed-char counter is a global ref.
+        // Pre-236c it only reset on `event/stream_start`; if the user
+        // switched tabs mid-stream, the counter kept the old tab's value
+        // and the new tab's chars piled on top — Spinner showed an
+        // inflated number that didn't match either tab. Reset on switch
+        // so each tab's spinner starts fresh.
+        streamingCharsRef.current = 0;
+        // Phase 236c (audit): TodoIndicator's source-of-truth is the most
+        // recent TodoWrite. event/tool_use_start from a background tab is
+        // already filtered out by pushNotif, but the previous tab's todos
+        // lingered after switching. Clear so the destination tab starts
+        // empty and re-populates when its next TodoWrite fires.
+        setTodos([]);
+        // Phase 250 (3rd-round audit): `streaming` (legacy) holds the
+        // last stream_start's label. When the user /switches to a tab
+        // whose stream_start they never saw (it fired while another tab
+        // was active and got filtered), the destination tab's spinner
+        // pulled the stale label from this ref. Drop it on every switch
+        // so Spinner falls back to its theme default until the next
+        // stream_start arrives for the now-active tab. Visibility +
+        // startedAt continue to come from tabsState (Phase 236c).
+        setStreaming(null);
+        // Phase 251 (3rd-round audit): session picker was App-level
+        // state (not per-tab). An open picker survived /switch and
+        // would render on the wrong tab — selecting a session there
+        // would rebuild THIS tab's adapter, not the originally-asking
+        // tab. Dismiss on switch + notify cli to clear its pending
+        // picker side-state.
+        setPicker((cur) => {
+            if (cur)
+                sendPickerClose();
+            return null;
+        });
+    }, [status.activeTab, markCursorLayoutUnstable]);
+    // Phase 81: active theme. The theme module owns the actual color
+    // state (components read theme.x.y at render); this state exists
+    // only to force the re-render after setTheme mutates the colors.
+    const [themeName, setThemeName] = useState("dark");
+    // Phase 98: latest TodoWrite tool input. The in-progress task is
+    // rendered above the prompt so the user can see what the agent is
+    // working on at a glance.
+    const [todos, setTodos] = useState([]);
+    const handleSetTheme = useCallback((next) => {
+        markCursorLayoutUnstable();
+        setTheme(next);
+        setThemeName(next);
+    }, [markCursorLayoutUnstable]);
+    const { isRawModeSupported } = useStdin();
+    const { stdout } = useStdout();
+    const rawModeSupported = Boolean(isRawModeSupported);
+    // Phase 236b: PageUp/PageDown slide a viewport over EventLog's
+    // grouped event list. `scrollOffset = 0` keeps the latest groups
+    // anchored at the bottom (default sticky-bottom). PageUp grows the
+    // offset → older groups come into view from the bottom of the
+    // window. Reset to 0 on tab switch (log_replace, below) so each tab
+    // starts at its newest event.
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const SCROLL_PAGE = 10;
+    const SCROLL_WHEEL = 3;
+    useInput((input, key) => {
+        const mouseWheel = parseMouseWheel(input);
+        if (mouseWheel) {
+            markCursorLayoutUnstable();
+            setScrollOffset((offset) => mouseWheel.direction === "up"
+                ? offset + SCROLL_WHEEL
+                : Math.max(0, offset - SCROLL_WHEEL));
+            return;
+        }
+        if (key.pageUp) {
+            markCursorLayoutUnstable();
+            setScrollOffset((o) => o + SCROLL_PAGE);
+            return;
+        }
+        if (key.pageDown) {
+            markCursorLayoutUnstable();
+            setScrollOffset((o) => Math.max(0, o - SCROLL_PAGE));
+            return;
+        }
+    }, { isActive: rawModeSupported });
+    // Phase 148: batch streamed event appends. A turn emits many tiny
+    // event/text chunks; appending each one immediately re-rendered (and
+    // re-grouped) the whole log per chunk, and Ink repainted the live
+    // region in place — read as flicker. We coalesce appends and flush at
+    // ~30fps, so the heavy EventLog re-renders at most ~30×/s regardless
+    // of chunk rate.
+    const pendingRef = useRef([]);
+    const flushTimerRef = useRef(null);
+    // Phase 248 (2nd-round audit): mirror the cli-side EVENTS_CAP from
+    // Phase 240. The cli caps t.events for memory, but App.events grew
+    // unbounded between /switches because each batch flush only
+    // appends. A single-tab session that never switches would balloon
+    // App.events indefinitely and eat heap with every streamed chunk.
+    // Trim from the front when we cross the cap; matches cli-side
+    // behavior so /switch round-trips don't appear to "shrink" the
+    // displayed history compared to live state.
+    const flushPending = useCallback(() => {
+        if (flushTimerRef.current) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+        }
+        if (pendingRef.current.length === 0)
+            return;
+        const batch = pendingRef.current;
+        pendingRef.current = [];
+        setEvents((prev) => {
+            const next = [...prev, ...batch];
+            // Phase 295: only the alt-screen bounded viewport front-trims here.
+            // Transcript mode must NOT — front-trimming the array <Static> reads
+            // breaks its append-only watermark, so Ink re-emits the tail and the
+            // terminal jumps (worse the longer the session). Transcript memory is
+            // bounded by the idle checkpoint effect instead.
+            if (wantsAltScreen() && next.length > EVENTS_CAP) {
+                next.splice(0, EVENTS_TRIM);
+            }
+            return next;
+        });
+        // Phase 304: when IDLE (no active stream), nudge a dynamic-region
+        // redraw. A lone idle append renders only the <Static> rows — Ink's
+        // static path clears the dynamic region (input/status) and skips
+        // redrawing it because the dynamic output string is unchanged, so the
+        // new text shows but the chrome blanks until the next state change
+        // (which is why /preset output only appeared after the user typed).
+        // markCursorLayoutUnstable flips a flag that changes the dynamic
+        // output → forces the redraw. Skipped while streaming: the spinner's
+        // heartbeat already repaints, and flipping the cursor flag mid-stream
+        // reintroduces the IME-compose flicker appendEvent deliberately avoids.
+        if (!streamingRef.current) {
+            // Phase 305: increment the repaint nonce so the Ink output string
+            // changes unconditionally, ensuring throttledLog rewrites the
+            // dynamic chrome even when the committed-group count is unchanged
+            // (consecutive idle event/text events merge into the same group).
+            setIdleNonce((n) => n + 1);
+            // Keep the cursor settle: suppresses then restores the hardware
+            // cursor so useCursor's position is re-measured after the static
+            // write rather than holding a stale Yoga origin.
+            markCursorLayoutUnstable();
+        }
+    }, [markCursorLayoutUnstable]);
+    const appendEvent = useCallback((msg) => {
+        // Transcript-only appends must not continually invalidate the
+        // bottom cursor while the agent streams. In alt-screen mode the
+        // EventLog is a bounded viewport above the anchored composer, so
+        // text growth does not move the input row. Layout-affecting
+        // chrome transitions (stream start/end, status, pickers, todos,
+        // tab switches) call markCursorLayoutUnstable at their source.
+        pendingRef.current.push(msg);
+        if (!flushTimerRef.current) {
+            flushTimerRef.current = setTimeout(() => {
+                flushTimerRef.current = null;
+                flushPending();
+            }, 32);
+        }
+    }, [flushPending]);
+    // Flush any batched appends on unmount so nothing is lost.
+    useEffect(() => () => flushPending(), [flushPending]);
+    useEffect(() => {
+        reader.onMessage((msg) => {
+            if (isAskRequest(msg)) {
+                markCursorLayoutUnstable();
+                setAsking((prev) => [...prev, msg]);
+                return;
+            }
+            if (isPermissionRequest(msg)) {
+                markCursorLayoutUnstable();
+                setPending((prev) => [...prev, msg]);
+                return;
+            }
+            // Status updates merge in; never go into the log.
+            if (msg.method === "event/status") {
+                // Phase 277: status pushes must not gratuitously disturb the
+                // hardware cursor, or macOS IME drops the Hangul compose to the
+                // bottom info bar whenever one lands mid-keystroke.
+                //
+                // Two guards:
+                //  1. Skip entirely when the delta is value-identical (e.g. the
+                //     5s git refresh on an unchanged tree) — avoids a needless
+                //     re-render + cursor settle while fully idle.
+                //  2. Only call markCursorLayoutUnstable() when a field that
+                //     actually changes chrome HEIGHT changed. `plan`/`ask`
+                //     toggle the TabChip row above the input, so they move it;
+                //     everything else (git, tokensIn/Out, tabsState counts,
+                //     model, ctx, sessionId…) renders into fixed-height chrome
+                //     and leaves the input row put. During a stream the cli
+                //     pushes token/tabsState updates constantly — marking on
+                //     those hid the cursor over and over, which is exactly what
+                //     bounced the IME compose to the info bar. Spinner/team
+                //     panel height transitions are still settled by their own
+                //     handlers (stream_start/stream_end, todos, pickers).
+                const params = msg.params;
+                const cur = statusRef.current;
+                let changed = false;
+                let layoutChanged = false;
+                for (const k of Object.keys(params)) {
+                    if (statusValueEqual(cur[k], params[k]))
+                        continue;
+                    changed = true;
+                    if (k === "plan" || k === "ask")
+                        layoutChanged = true;
+                }
+                if (!changed)
+                    return;
+                const next = { ...statusRef.current, ...msg.params };
+                statusRef.current = next;
+                if (layoutChanged)
+                    markCursorLayoutUnstable();
+                setStatus(next);
+                // Phase 332: while a team pipeline runs, the spinner shows the team
+                // phase (the per-role TeamStatusPanel carries the detail). Cleared
+                // when teamPhase empties.
+                const tp = typeof next.teamPhase === "string" ? next.teamPhase : "";
+                if (tp)
+                    activityRef.current = { kind: "team", detail: tp };
+                else if (activityRef.current.kind === "team")
+                    activityRef.current = { kind: "streaming" };
+                return;
+            }
+            if (msg.method === "event/stream_start") {
+                markCursorLayoutUnstable();
+                streamingCharsRef.current = 0;
+                // Phase 332: seed the activity from the start label so the spinner
+                // shows the work type immediately (then tool/thinking events refine).
+                const lbl = msg.params.label;
+                activityRef.current =
+                    lbl === "compacting"
+                        ? { kind: "compacting" }
+                        : lbl === "handing off"
+                            ? { kind: "handoff" }
+                            : { kind: "streaming" };
+                setStreaming({ label: msg.params.label });
+                // Phase 120: a new turn invalidates any pending prediction.
+                setPrediction("");
+                return;
+            }
+            if (msg.method === "event/predict") {
+                // Phase 120 + 186: transient — never recorded into the log.
+                // Drop predictions tagged with a tab that isn't the active one
+                // so a background tab's ghost can't leak into another tab's
+                // input prompt.
+                const owning = msg.params.tabName;
+                const active = activeTabRef.current;
+                if (owning && active && owning !== active)
+                    return;
+                setPrediction(msg.params.text);
+                return;
+            }
+            if (msg.method === "event/stream_end" || msg.method === "event/end") {
+                markCursorLayoutUnstable();
+                setStreaming(null);
+                if (msg.method === "event/end") {
+                    appendEvent(msg);
+                }
+                // Turn boundary — show the final state immediately, no lag.
+                flushPending();
+                return;
+            }
+            if (msg.method === "event/text") {
+                // Phase 94 / Phase 200a: tally streamed text for the Spinner's
+                // progress readout. Lives in a ref — the Spinner reads it on
+                // its own 80ms interval tick, so the per-chunk append doesn't
+                // need to bump App state.
+                const text = typeof msg.params?.text === "string" ? msg.params.text : "";
+                if (text)
+                    streamingCharsRef.current += text.length;
+                // Phase 332: text arriving = the model is producing its reply.
+                // Don't clobber a non-turn activity (compaction streams text too).
+                // Phase 336: do NOT flip a running "tool" back to streaming on text
+                // — a long build keeps its "building…" label until tool_use_end
+                // resets it. (Pre-336 a stray text chunk mid-tool reset the label to
+                // the bare model name, so a 7-min docker build read as "codex-cli
+                // gpt-5.5…" instead of "building…".) thinking→streaming still flips.
+                if (text && activityRef.current.kind === "thinking") {
+                    activityRef.current = { kind: "streaming" };
+                }
+            }
+            if (msg.method === "event/stream_progress") {
+                // Phase 318: compaction streams its summary in-process, so its
+                // output never hits event/text. Mirror the cumulative char count
+                // here so the "compacting…" Spinner shows real "↓ Ntok" motion.
+                // Set (not add) — the count is already cumulative. The Spinner
+                // reads the ref on its own tick, so no App re-render needed.
+                const chars = typeof msg.params?.chars === "number" ? msg.params.chars : 0;
+                streamingCharsRef.current = chars;
+                return;
+            }
+            // Phase 332: reflect the running tool in the spinner — esp. a long
+            // foreground build, which otherwise looks like a hang. TodoWrite is a
+            // meta tool (it has its own indicator) so it doesn't change activity.
+            if (msg.method === "event/tool_use_start") {
+                const tname = typeof msg.params?.name === "string" ? msg.params.name : "";
+                if (tname && tname !== "TodoWrite") {
+                    // Phase 336: extract the command for ANY shell tool that carries
+                    // one — not just claude's "Bash". codex's "shell"/run_shell and
+                    // gemini's shell all put it in input.command, so before this they
+                    // showed a bare "shell…" with no hint what was running.
+                    const tin = msg.params?.input;
+                    const cmd = typeof tin?.command === "string"
+                        ? tin.command.replace(/\s+/g, " ").trim()
+                        : "";
+                    // Phase 336: a recognizable build/test/install/deploy reads as a
+                    // verb ("building…") rather than a raw command — clearer while
+                    // omg just waits on a long external build. Otherwise show the cmd.
+                    const verb = cmd ? shellActivityVerb(cmd) : null;
+                    const detail = verb
+                        ? verb
+                        : cmd
+                            ? `${tname}: ${cmd.length > 48 ? cmd.slice(0, 47) + "…" : cmd}`
+                            : tname;
+                    activityRef.current = { kind: "tool", detail };
+                }
+            }
+            if (msg.method === "event/tool_use_end") {
+                // Tool finished → back to the model's reply (until the next signal).
+                if (activityRef.current.kind === "tool") {
+                    activityRef.current = { kind: "streaming" };
+                }
+            }
+            if (msg.method === "event/thinking" &&
+                activityRef.current.kind !== "tool") {
+                activityRef.current = { kind: "thinking" };
+            }
+            // Phase 98: capture TodoWrite calls so the in-progress task
+            // can render under the spinner. The host CLI's tool name is
+            // "TodoWrite"; input shape is { todos: [{content, status, activeForm}] }.
+            if (msg.method === "event/tool_use_start" &&
+                msg.params?.name === "TodoWrite") {
+                const raw = msg.params.input?.todos;
+                if (Array.isArray(raw)) {
+                    const parsed = [];
+                    for (const t of raw) {
+                        if (typeof t !== "object" || t === null)
+                            continue;
+                        const obj = t;
+                        const content = typeof obj.content === "string" ? obj.content : "";
+                        const status = obj.status;
+                        const activeForm = typeof obj.activeForm === "string" ? obj.activeForm : undefined;
+                        if (content &&
+                            (status === "pending" ||
+                                status === "in_progress" ||
+                                status === "completed")) {
+                            parsed.push({ content, status, activeForm });
+                        }
+                    }
+                    markCursorLayoutUnstable();
+                    setTodos(parsed);
+                }
+            }
+            if (msg.method === "event/session_picker") {
+                markCursorLayoutUnstable();
+                setPicker({
+                    provider: msg.params.provider,
+                    sessions: msg.params.sessions,
+                });
+                return;
+            }
+            if (msg.method === "event/log_replace") {
+                // Phase 47: a tab switch wants to swap the whole log. Replace
+                // wholesale in one render; Static commits past entries
+                // anyway, so this looks like one repaint.
+                // Phase 148: drop any batched appends queued for the tab we're
+                // leaving — the replacement is the new tab's full history.
+                // Phase 247 (2nd-round audit): clone the inbound array. The
+                // cli side passes `t.events` by reference. If we stored that
+                // reference in React state, the next pushNotif's
+                // `target.events.push(n)` would mutate the array React still
+                // believes is its state — and the very next flushPending's
+                // `setEvents(prev => [...prev, ...batch])` would see `prev`
+                // already containing `n` (from the mutation), then re-append
+                // `n` (from `batch`). Result: every event arriving within the
+                // first 32ms batch window after a /switch rendered TWICE in
+                // the chat. Cloning here decouples App.events from t.events
+                // so neither side mutates the other's view.
+                if (flushTimerRef.current) {
+                    clearTimeout(flushTimerRef.current);
+                    flushTimerRef.current = null;
+                }
+                markCursorLayoutUnstable();
+                pendingRef.current = [];
+                setEvents([...msg.params.events]);
+                setEventLogResetKey((k) => k + 1);
+                // Phase 236b: switching tabs resets the scroll viewport. The
+                // user's "where I was reading" is per-tab and Phase 236e will
+                // restore it; for now snap to the destination tab's latest.
+                setScrollOffset(0);
+                return;
+            }
+            appendEvent(msg);
+        });
+        if (onClose)
+            reader.onClose(onClose);
+    }, [reader, onClose, appendEvent, flushPending, markCursorLayoutUnstable]);
+    const addLocalText = useCallback((text) => {
+        markCursorLayoutUnstable();
+        flushPending(); // keep ordering with any batched stream output
+        setEvents((prev) => [
+            ...prev,
+            {
+                jsonrpc: "2.0",
+                method: "event/text",
+                params: { text },
+            },
+        ]);
+    }, [flushPending, markCursorLayoutUnstable]);
+    // Phase 115 → 225 (hotfix, root cause): the actual user_echo event
+    // now ships from cli.ts via pushNotif so tab.events is the source
+    // of truth — App still receives it through the normal ink stream
+    // and lands it via appendEvent. Pre-225 this callback inserted the
+    // echo into App's local events directly; tab.events never got it,
+    // and /switch's log_replace wiped the echo on return. We keep the
+    // hook so prediction is cleared on submit (transient UI concern
+    // that doesn't belong in cli.ts).
+    const addUserMessage = useCallback((_text) => {
+        markCursorLayoutUnstable();
+        flushPending();
+        setPrediction(""); // Phase 120: submitting consumes the prediction.
+    }, [flushPending, markCursorLayoutUnstable]);
+    const dequeueRequest = useCallback(() => {
+        markCursorLayoutUnstable();
+        setPending((prev) => prev.slice(1));
+    }, [markCursorLayoutUnstable]);
+    const dequeueAsk = useCallback(() => {
+        markCursorLayoutUnstable();
+        setAsking((prev) => prev.slice(1));
+    }, [markCursorLayoutUnstable]);
+    const clearEvents = useCallback(() => {
+        markCursorLayoutUnstable();
+        if (flushTimerRef.current) {
+            clearTimeout(flushTimerRef.current);
+            flushTimerRef.current = null;
+        }
+        pendingRef.current = [];
+        setEvents([]);
+        setTodos([]);
+        setEventLogResetKey((k) => k + 1);
+    }, [markCursorLayoutUnstable]);
+    const toggleThink = useCallback((force) => {
+        markCursorLayoutUnstable();
+        setThinkVisible((prev) => {
+            const next = force === undefined ? !prev : force;
+            // Echo state into the log so the change is visible in scrollback.
+            setEvents((es) => [
+                ...es,
+                {
+                    jsonrpc: "2.0",
+                    method: "event/text",
+                    params: {
+                        text: next
+                            ? "[think] ON — reasoning blocks will render.\n"
+                            : "[think] off — reasoning blocks hidden.\n",
+                    },
+                },
+            ]);
+            return next;
+        });
+    }, [markCursorLayoutUnstable]);
+    const head = pending[0];
+    const askHead = asking[0];
+    // Phase 236c: tabsState is the per-tab source-of-truth for running
+    // state. Pre-236c App.streaming was a free-floating mirror of the
+    // last stream_start/end on this stdin; on a tab switch it kept the
+    // prior tab's label + (via a useRef) startedAt and the spinner
+    // showed "1m 13s" on a tab that just opened. We splice tabsState
+    // back in by:
+    //   - reading the active tab's runningSince and forwarding it to
+    //     Spinner so the elapsed counter resets per tab;
+    //   - using `streamingFromTab` (below) when the local mirror is
+    //     out of sync — if tabsState says the active tab isn't running,
+    //     hide the spinner regardless of stale App.streaming. This
+    //     handles the case where the destination tab is idle but the
+    //     source tab is still emitting events App can't see.
+    const activeTabState = status.tabsState?.find((t) => t.name === status.activeTab);
+    const tabRunning = activeTabState?.running ?? null;
+    // If tabsState is unavailable (no status push yet, stub renderer,
+    // standalone unit tests) fall back to App.streaming — back-compat
+    // with the pre-236c mental model.
+    const streamingVisible = tabRunning === null ? streaming !== null : tabRunning;
+    const streamingForDock = streamingVisible
+        ? {
+            label: streaming?.label,
+            startedAt: activeTabState?.runningSince,
+        }
+        : null;
+    const altScreenMode = wantsAltScreen() && Boolean(stdout?.isTTY);
+    // Phase 295: transcript-mode memory checkpoint. Runs post-commit, so at
+    // an idle boundary the final group of the just-ended turn is already
+    // emitted to native scrollback (stream_end flushPending()s synchronously
+    // before this). Dropping the React log + remounting <Static> with a
+    // fresh key re-emits nothing (no dupe, no jump) and resets memory.
+    useEffect(() => {
+        if (!shouldCheckpointTranscript({
+            altScreenMode,
+            streaming: streaming !== null,
+            eventsLength: events.length,
+            cap: TRANSCRIPT_EVENTS_SOFTCAP,
+        })) {
+            return;
+        }
+        setEvents([]);
+        setEventLogResetKey((k) => k + 1);
+    }, [altScreenMode, streaming, events.length]);
+    const rootHeight = altScreenMode && typeof stdout?.rows === "number" && stdout.rows > 0
+        ? stdout.rows
+        : undefined;
+    // Cursor invariant: only place the terminal cursor after the final
+    // frame layout is stable. Codex/ratatui draws the frame and sets the
+    // cursor from the same resolved layout; Ink's useCursor needs the
+    // previous render's Yoga origin, so Dock/status/input-height
+    // transitions can be one frame stale. Hide during those short
+    // mutation windows in every screen mode.
+    //
+    // Phase 277: do NOT hard-hide the input cursor for the whole stream
+    // in normal-screen mode. The live tail grows while the agent works,
+    // nudging the input row down each frame — so the older code hid the
+    // cursor outright to avoid it chasing a stale row. But a user who
+    // types DURING a stream (queuing a message) needs the hardware
+    // cursor parked at the input, or macOS IME draws the Hangul compose
+    // preview at the cursor's resting position — below the HintBar.
+    // `suppressEmptyInputCursor` already hides the cursor while the input
+    // is empty (nothing to compose), so streaming-with-empty-input stays
+    // jitter-free; once the buffer is non-empty the cursor follows the
+    // input (origin is re-measured per render) so IME lands in the box.
+    const suppressInputHardwareCursor = !cursorStable;
+    const suppressEmptyInputCursor = !altScreenMode && streamingVisible;
+    const transcript = (_jsxs(_Fragment, { children: [events.length === 0 && (_jsx(Welcome, { provider: status.provider, model: status.model, cwd: status.cwd })), _jsx(EventLog, { events: events, thinkVisible: thinkVisible, reasoningExpanded: reasoningExpanded, streaming: streamingVisible, verbose: verbose, scrollOffset: scrollOffset, transcriptMode: !altScreenMode, transcriptResetKey: eventLogResetKey, 
+                // Codex-style UX keeps the visible cursor owned by the bottom
+                // composer. A moving assistant-tail block in the transcript
+                // reads like the chat cursor jumping while the agent works.
+                showLiveCursor: false })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: rootHeight, overflowY: altScreenMode ? "hidden" : "visible", children: [altScreenMode ? (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, justifyContent: "flex-end", overflowY: "hidden", children: transcript })) : (transcript), _jsx(Dock, { status: status, streaming: streamingForDock, streamedCharsRef: streamingCharsRef, activityRef: activityRef, todos: todos, askHead: askHead, permHead: head, sessionPicker: picker, isRawModeSupported: rawModeSupported, stableActivityHeight: altScreenMode, onAskResolved: dequeueAsk, onPermResolved: dequeueRequest, onSessionPickerClose: () => {
+                    markCursorLayoutUnstable();
+                    setPicker(null);
+                } }), _jsx(HRule, { ...upperRuleLabel(status) }), altScreenMode ? (_jsx(Box, { height: 1, overflowY: "hidden", children: _jsx(TabChip, { planMode: status.plan, askMode: status.ask, thinkVisible: thinkVisible }) })) : (_jsx(TabChip, { planMode: status.plan, askMode: status.ask, thinkVisible: thinkVisible })), rawModeSupported && !head && !askHead && !picker && (_jsx(CommandInput, { onLocalLine: addLocalText, onClearEvents: clearEvents, onToggleThink: toggleThink, cwd: status.cwd, onSetTheme: handleSetTheme, onUserMessage: addUserMessage, prediction: prediction, suppressCursorWhenEmpty: suppressEmptyInputCursor, suppressHardwareCursor: suppressInputHardwareCursor, fullscreenCursorMode: altScreenMode, onToggleVerbose: (force) => setVerbose((prev) => {
+                    markCursorLayoutUnstable();
+                    const next = force === undefined ? !prev : force;
+                    addLocalText(next
+                        ? "[verbose] ON — tool cards show full output."
+                        : "[verbose] off — tool cards collapse again.");
+                    return next;
+                }), onToggleReasoning: (force) => setReasoningExpanded((prev) => {
+                    markCursorLayoutUnstable();
+                    const next = force === undefined ? !prev : force;
+                    addLocalText(next
+                        ? "[reasoning] ON — reasoning shows expanded live (progress)."
+                        : "[reasoning] off — reasoning collapses to a header.");
+                    return next;
+                }) }, `input-${themeName}`)), _jsx(HRule, {}), altScreenMode ? (_jsx(Box, { height: 2, overflowY: "hidden", children: _jsx(StatusBar, { status: { ...status, thinkVisible } }) })) : (_jsx(StatusBar, { status: { ...status, thinkVisible } })), _jsxs(Box, { height: 1, overflowY: "hidden", children: [_jsx(HintBar, {}), _jsx(Text, { children: idleNonce % 2 ? "​" : "" })] })] }));
+}
+/** Phase 199 → 230: compose the upper-HRule chip from the status
+ *  snapshot. Phase 230 redesign — show ALL tab names as colored
+ *  segments (active = green, running = animated spinner glyph, ready
+ *  = `▒`, asking = `?`), plus the ctx-pressure warning when active.
+ *  Returns segment list for HRule's multi-color renderer. */
+const TAB_NAME_MAX = 10;
+function truncTab(name) {
+    if ([...name].length <= TAB_NAME_MAX)
+        return name;
+    return name.slice(0, TAB_NAME_MAX - 1) + "…";
+}
+function upperRuleLabel(status) {
+    const segs = [];
+    const tabs = status.tabsState ?? [];
+    const chipFg = theme.prompt.chipFg;
+    // Phase 230: every tab gets a segment. Active tab in green
+    // (status.tabColor / readyColor), running tabs prefixed by an
+    // animated spinner glyph, ready tabs by `▒`, asking by `?`. Idle
+    // background tabs render in default chip color so the eye still
+    // sees them but they don't compete for attention.
+    for (let i = 0; i < tabs.length; i++) {
+        if (i > 0) {
+            segs.push({ text: " · ", color: chipFg });
+        }
+        const t = tabs[i];
+        const isActive = t.name === status.activeTab;
+        if (t.running && !isActive) {
+            // Animated spinner glyph; HRule's own timer cycles it. We pass
+            // a placeholder text — HRule overrides with the current frame.
+            segs.push({
+                text: "⠋",
+                color: theme.spinner.color,
+                spinner: true,
+            });
+            segs.push({ text: " " + truncTab(t.name), color: chipFg });
+        }
+        else if (t.asking && !isActive) {
+            segs.push({ text: "? ", color: theme.status.askColor, bold: true });
+            segs.push({ text: truncTab(t.name), color: chipFg });
+        }
+        else if (t.ready && !isActive) {
+            segs.push({ text: "▒ ", color: theme.status.readyColor });
+            segs.push({ text: truncTab(t.name), color: chipFg });
+        }
+        else if (isActive) {
+            // Active tab in the readyColor green so "where am I" is the
+            // strongest visual signal in the chip. Bold further pops it.
+            segs.push({
+                text: truncTab(t.name),
+                color: theme.status.readyColor,
+                bold: true,
+            });
+        }
+        else {
+            // Idle non-active tab — dim color so the eye treats it as
+            // available-but-quiet.
+            segs.push({ text: truncTab(t.name), color: theme.status.labelColor });
+        }
+    }
+    // Phase 190/222: ctx warning piggybacks on the chip when occupancy
+    // is high. Cap display at "100%+" so a stale or wrongly-attributed
+    // token count doesn't surface "ctx 147%".
+    if (status.tokensIn && status.contextWindow && status.contextWindow > 0) {
+        const ratio = status.tokensIn / status.contextWindow;
+        if (ratio >= 0.7) {
+            const pct = Math.round(ratio * 100);
+            const label = pct > 100 ? "⚠ ctx 100%+" : `⚠ ctx ${pct}%`;
+            const ctxColor = ratio >= 0.9
+                ? theme.status.tokenCritColor
+                : theme.status.tokenWarnColor;
+            if (segs.length > 0)
+                segs.push({ text: " · ", color: chipFg });
+            segs.push({ text: label, color: ctxColor, bold: true });
+        }
+    }
+    if (segs.length === 0)
+        return {};
+    return {
+        rightSegments: segs,
+        rightLabelBg: theme.prompt.chipBg,
+    };
+}
+//# sourceMappingURL=App.js.map