farai 0.1.6 → 0.1.8

package/dist/cli/index.js

@@ -3635,7 +3635,7 @@ function proxyConfig(value) {
 }
 function resolveProxyConfig(config) {
   return {
-    transparent: config.proxy?.transparent === true,
+    transparent: config.proxy?.transparent !== false,
     ports: config.proxy?.ports?.length ? config.proxy.ports : DEFAULT_TRANSPARENT_PROXY_PORTS
   };
 }
@@ -3960,7 +3960,7 @@ function atomicWriteFile(path, content, mode) {
 var DEFAULT_TRANSPARENT_PROXY_PORTS, LSP_SERVER_IDS, DEFAULT_CONFIG_TEMPLATE = `model = "big-pickle"
 
 [proxy]
-transparent = false
+transparent = true
 
 [mcp_servers.mitmproxy-mcp]
 command = "mitmproxy-mcp"
@@ -24103,6 +24103,17 @@ var init_tool_call_journal = () => {};
 import { createHash as createHash4 } from "crypto";
 import { existsSync as existsSync12, mkdirSync as mkdirSync6, realpathSync as realpathSync3, writeFileSync as writeFileSync7 } from "fs";
 import { isAbsolute as isAbsolute4, join as join16, relative as relative6 } from "path";
+function shouldBufferInitialTextStream(text) {
+  if (isInternalMetaReasoning(text))
+    return true;
+  if (text.includes(`
+`))
+    return false;
+  const normalized = text.trimStart().toLowerCase().replace(/\s+/g, " ");
+  if (!normalized)
+    return false;
+  return INTERNAL_META_STREAM_PREFIXES.some((prefix) => prefix.startsWith(normalized));
+}
 
 class AgentRuntime {
   turnControllers = new Map;
@@ -25037,7 +25048,7 @@ class AgentRuntime {
     this.autoCompactFailures.delete(sessionId);
     this.fileState.clear(sessionId);
     for (const turn of this.store.listTurns(sessionId, 1000)) {
-      this.streamingParts.delete(turn.id);
+      this.deleteStreamingParts(turn.id);
     }
     return this.store.clearSessionChat(sessionId);
   }
@@ -25752,7 +25763,7 @@ This completion is already terminal and was delivered automatically. Do not call
       } else if (action.kind === "respond") {
         sawResponse = true;
         if (hasToolAction && isInternalMetaReasoning(action.text)) {
-          this.discardStreamingText(turn.id);
+          this.discardStreamingText(session.id, turn.id);
           shouldContinue = true;
           continue;
         }
@@ -25789,7 +25800,7 @@ This completion is already terminal and was delivered automatically. Do not call
       });
     const request = buildChatRequest(plannerInput, requestController.signal);
     let lastError = "";
-    this.streamingParts.delete(turn.id);
+    this.deleteStreamingParts(turn.id);
     try {
       for (let attempt = 1;; attempt += 1) {
         this.emitPlannerAttempt(session, turn, assistantMessage, plannerName, attempt, plannerInput, context);
@@ -25928,7 +25939,7 @@ This completion is already terminal and was delivered automatically. Do not call
               shouldContinue: shouldContinue2
             };
           }
-          this.prepareStreamingRetry(turn.id);
+          this.prepareStreamingRetry(session.id, turn.id);
           const retry = plannerRetryState(error, attempt, dispatched.length === 0);
           const errorPayload = {
             turnId: turn.id,
@@ -25997,7 +26008,7 @@ This completion is already terminal and was delivered automatically. Do not call
         const rawRespondText = content.trim();
         const respondText = dispatched.length > 0 && isInternalMetaReasoning(rawRespondText) ? "" : rawRespondText;
         if (!respondText && rawRespondText && dispatched.length > 0)
-          this.discardStreamingText(turn.id);
+          this.discardStreamingText(session.id, turn.id);
         const outcomes = await Promise.all(dispatched);
         const toolCancelled = outcomes.some((outcome) => outcome.cancelled);
         for (const outcome of outcomes) {
@@ -26151,9 +26162,11 @@ This completion is already terminal and was delivered automatically. Do not call
           rationale: ""
         });
       if (state) {
+        state.reasoningAccum = "";
+        this.publishStreamingReasoning(session.id, turn.id, state);
         delete state.reasoningPartId;
         delete state.reasoningAccum;
-        delete state.lastReasoningRender;
+        delete state.lastReasoningPersist;
       }
       return;
     }
@@ -26162,13 +26175,15 @@ This completion is already terminal and was delivered automatically. Do not call
       rationale
     });
     if (state?.reasoningPartId) {
+      state.reasoningAccum = rationale;
+      this.publishStreamingReasoning(session.id, turn.id, state);
       this.store.updatePartPayload(state.reasoningPartId, {
         planner: plannerName,
         rationale
       });
       delete state.reasoningPartId;
       delete state.reasoningAccum;
-      delete state.lastReasoningRender;
+      delete state.lastReasoningPersist;
     } else {
       this.store.addPart({
         sessionId: session.id,
@@ -26186,6 +26201,8 @@ This completion is already terminal and was delivered automatically. Do not call
     responses.push(text);
     const streamed = this.streamingParts.get(turn.id);
     if (streamed?.textPartId) {
+      streamed.textAccum = text;
+      this.publishStreamingText(session.id, turn.id, streamed);
       this.store.updatePartPayload(streamed.textPartId, {
         text
       });
@@ -26669,6 +26686,40 @@ This completion is already terminal and was delivered automatically. Do not call
       };
     }
   }
+  deleteStreamingParts(turnId) {
+    this.streamingParts.delete(turnId);
+  }
+  publishStreamingText(sessionId, turnId, state) {
+    if (!state.textPartId)
+      return;
+    this.store.publishTransientEvent({
+      id: id(),
+      sessionId,
+      type: "stream_text",
+      payload: {
+        turnId,
+        partId: state.textPartId,
+        text: state.textAccum
+      },
+      createdAt: nowIso()
+    });
+  }
+  publishStreamingReasoning(sessionId, turnId, state) {
+    if (!state.reasoningPartId)
+      return;
+    const rationale = normalizeReasoningSummary(state.reasoningAccum ?? "");
+    this.store.publishTransientEvent({
+      id: id(),
+      sessionId,
+      type: "stream_reasoning",
+      payload: {
+        turnId,
+        partId: state.reasoningPartId,
+        rationale
+      },
+      createdAt: nowIso()
+    });
+  }
   applyStreamEvent(session, turn, assistantMessage, event) {
     const now = Date.now();
     const state = this.streamingParts.get(turn.id) ?? {
@@ -26693,26 +26744,39 @@ This completion is already terminal and was delivered automatically. Do not call
           }
         });
         state.reasoningPartId = part.id;
-        state.lastReasoningRender = now;
-      } else if (now - (state.lastReasoningRender ?? 0) >= STREAM_RENDER_INTERVAL_MS) {
+        state.lastReasoningPersist = now;
+      } else if (now - (state.lastReasoningPersist ?? 0) >= STREAM_PERSIST_INTERVAL_MS) {
         this.store.updatePartPayload(state.reasoningPartId, {
           rationale
         });
-        state.lastReasoningRender = now;
+        state.lastReasoningPersist = now;
       }
+      this.publishStreamingReasoning(session.id, turn.id, state);
       this.streamingParts.set(turn.id, state);
       return;
     }
     state.textAccum += event.delta;
     if (!state.textPartId) {
-      if (isInternalMetaReasoning(state.textAccum)) {
+      if (shouldBufferInitialTextStream(state.textAccum)) {
         this.streamingParts.set(turn.id, state);
         return;
       }
-      if (state.textAccum.length < 80 && !state.textAccum.includes(`
-`)) {
-        this.streamingParts.set(turn.id, state);
-        return;
+      if (!state.reasoningPartId && state.reasoningAccum) {
+        const rationale = normalizeReasoningSummary(state.reasoningAccum);
+        if (rationale) {
+          const reasoningPart = this.store.addPart({
+            sessionId: session.id,
+            turnId: turn.id,
+            messageId: assistantMessage.id,
+            type: "reasoning_summary",
+            payload: {
+              rationale
+            }
+          });
+          state.reasoningPartId = reasoningPart.id;
+          state.lastReasoningPersist = now;
+          this.publishStreamingReasoning(session.id, turn.id, state);
+        }
       }
       const part = this.store.addPart({
         sessionId: session.id,
@@ -26724,30 +26788,17 @@ This completion is already terminal and was delivered automatically. Do not call
         }
       });
       state.textPartId = part.id;
-      state.lastTextRender = now;
       state.lastTextPersist = now;
     } else if (now - (state.lastTextPersist ?? 0) >= STREAM_PERSIST_INTERVAL_MS) {
       this.store.updatePartPayload(state.textPartId, {
         text: state.textAccum
       });
-      state.lastTextRender = now;
       state.lastTextPersist = now;
-    } else if (now - (state.lastTextRender ?? 0) >= STREAM_RENDER_INTERVAL_MS) {
-      this.store.publishTransientEvent({
-        id: id(),
-        sessionId: session.id,
-        type: "stream_text",
-        payload: {
-          partId: state.textPartId,
-          text: state.textAccum
-        },
-        createdAt: nowIso()
-      });
-      state.lastTextRender = now;
     }
+    this.publishStreamingText(session.id, turn.id, state);
     this.streamingParts.set(turn.id, state);
   }
-  discardStreamingText(turnId) {
+  discardStreamingText(sessionId, turnId) {
     const state = this.streamingParts.get(turnId);
     if (!state)
       return;
@@ -26756,11 +26807,11 @@ This completion is already terminal and was delivered automatically. Do not call
         text: ""
       });
     state.textAccum = "";
+    this.publishStreamingText(sessionId, turnId, state);
     delete state.textPartId;
-    delete state.lastTextRender;
     delete state.lastTextPersist;
   }
-  prepareStreamingRetry(turnId) {
+  prepareStreamingRetry(sessionId, turnId) {
     const state = this.streamingParts.get(turnId);
     if (!state)
       return;
@@ -26773,11 +26824,13 @@ This completion is already terminal and was delivered automatically. Do not call
         rationale: ""
       });
     state.textAccum = "";
+    state.reasoningAccum = "";
+    this.publishStreamingText(sessionId, turnId, state);
+    this.publishStreamingReasoning(sessionId, turnId, state);
     delete state.reasoningPartId;
     delete state.reasoningAccum;
-    delete state.lastReasoningRender;
-    state.lastTextRender = Date.now();
-    state.lastTextPersist = state.lastTextRender;
+    delete state.lastReasoningPersist;
+    state.lastTextPersist = Date.now();
   }
   async planWithRetry(planner, input, session, turn, assistantMessage, context, timeoutMs, allowEmpty = false) {
     let lastError = "";
@@ -26786,7 +26839,7 @@ This completion is already terminal and was delivered automatically. Do not call
       release,
       timedOut
     } = this.registerTurnController(turn.id, timeoutMs);
-    this.streamingParts.delete(turn.id);
+    this.deleteStreamingParts(turn.id);
     const onStreamEvent = (event) => this.applyStreamEvent(session, turn, assistantMessage, event);
     try {
       for (let attempt = 1;; attempt += 1) {
@@ -26813,7 +26866,7 @@ This completion is already terminal and was delivered automatically. Do not call
             lastError = "cancelled";
             break;
           }
-          this.prepareStreamingRetry(turn.id);
+          this.prepareStreamingRetry(session.id, turn.id);
           const retry = plannerRetryState(error, attempt, true);
           const errorPayload = {
             turnId: turn.id,
@@ -26935,7 +26988,7 @@ This completion is already terminal and was delivered automatically. Do not call
       } : {}
     });
     this.modelCallsByTurn.delete(turn.id);
-    this.streamingParts.delete(turn.id);
+    this.deleteStreamingParts(turn.id);
     this.fireHooks({
       id: turn.sessionId
     }, "turn.stop", undefined, {
@@ -28405,7 +28458,7 @@ function sameExistingPath(left, right) {
     return false;
   }
 }
-var REASONING_MAX_BYTES2, STREAM_RENDER_INTERVAL_MS = 100, STREAM_PERSIST_INTERVAL_MS = 2000, LIVE_OUTPUT_MAX_BYTES, LIVE_OUTPUT_FLUSH_INTERVAL_MS = 150, LIVE_OUTPUT_INITIAL_DELAY_MS = 320, TOOL_HUMAN_RESULT_MAX_BYTES, LOOP_SUPERVISION_NO_PROGRESS_STEPS = 12, LOOP_SUPERVISION_STEER_INTERVAL = 5, LOOP_PATTERN_MAX_PERIOD = 8, PROGRESS_ACTION_TOOLS, AUTO_COMPACTION_CONTINUATION = "[internal continuation after context compaction: Continue the active user task from the compacted prior context. Do not repeat, regenerate, or explain the summary. Resume with the exact next useful action.]", WRAPUP_MODEL_TIMEOUT_MS = 15000, DEFAULT_SHUTDOWN_GRACE_PERIOD_MS = 2000, RUNTIME_LEASE_MS = 60000, RUNTIME_HEARTBEAT_MS = 15000, RESTART_TOOL_ERROR = "Interrupted by runtime restart; tool execution was not replayed.", STEP_LIMIT_WRAPUP_DIRECTIVE = "You have reached the maximum number of steps allowed for this turn, so tools are no longer available. Do not attempt to call any tool. In a few sentences, summarize what you accomplished, the key findings or evidence so far, any blockers, and the single most useful next step. This is your final message for this turn.", TIME_LIMIT_WRAPUP_DIRECTIVE = "You have reached the interactive wall-clock budget for this turn, so tools are no longer available. Do not attempt to call any tool. Concisely summarize completed work, proven evidence, active background jobs, remaining uncertainty, and the single best next action. This is your final message for this turn.", IneffectiveCompactionError, ModelCallDeadlineError, PlannerOutputValidationError;
+var REASONING_MAX_BYTES2, STREAM_PERSIST_INTERVAL_MS = 2000, LIVE_OUTPUT_MAX_BYTES, LIVE_OUTPUT_FLUSH_INTERVAL_MS = 150, LIVE_OUTPUT_INITIAL_DELAY_MS = 320, TOOL_HUMAN_RESULT_MAX_BYTES, LOOP_SUPERVISION_NO_PROGRESS_STEPS = 12, LOOP_SUPERVISION_STEER_INTERVAL = 5, LOOP_PATTERN_MAX_PERIOD = 8, PROGRESS_ACTION_TOOLS, AUTO_COMPACTION_CONTINUATION = "[internal continuation after context compaction: Continue the active user task from the compacted prior context. Do not repeat, regenerate, or explain the summary. Resume with the exact next useful action.]", WRAPUP_MODEL_TIMEOUT_MS = 15000, DEFAULT_SHUTDOWN_GRACE_PERIOD_MS = 2000, RUNTIME_LEASE_MS = 60000, RUNTIME_HEARTBEAT_MS = 15000, RESTART_TOOL_ERROR = "Interrupted by runtime restart; tool execution was not replayed.", STEP_LIMIT_WRAPUP_DIRECTIVE = "You have reached the maximum number of steps allowed for this turn, so tools are no longer available. Do not attempt to call any tool. In a few sentences, summarize what you accomplished, the key findings or evidence so far, any blockers, and the single most useful next step. This is your final message for this turn.", TIME_LIMIT_WRAPUP_DIRECTIVE = "You have reached the interactive wall-clock budget for this turn, so tools are no longer available. Do not attempt to call any tool. Concisely summarize completed work, proven evidence, active background jobs, remaining uncertainty, and the single best next action. This is your final message for this turn.", INTERNAL_META_STREAM_PREFIXES, IneffectiveCompactionError, ModelCallDeadlineError, PlannerOutputValidationError;
 var init_runtime = __esm(() => {
   init_sqlite_store();
   init_registry4();
@@ -28453,6 +28506,7 @@ var init_runtime = __esm(() => {
   LIVE_OUTPUT_MAX_BYTES = 2 * 1024;
   TOOL_HUMAN_RESULT_MAX_BYTES = 24 * 1024;
   PROGRESS_ACTION_TOOLS = new Set(["http_request", "subdomain_enum", "dir_enum", "port_scan", "nmap_scan", "fs_edit", "fs_write", "patch_apply", "code_write_script", "campaign_verify", "campaign_test", "callback_oast", "exploit_search"]);
+  INTERNAL_META_STREAM_PREFIXES = ["the user", "user asked", "user wants", "user requested", "user said", "per my", "per the", "my communication", "my instruction", "my instructions", "my rules", "my task", "according to my", "according to the", "the tool search", "tool_search", "there's no dedicated tool", "there is no dedicated tool", "there's no specific tool", "there is no specific tool", "there's no matching tool", "there is no matching tool", "i have access to", "let me inspect the available tool", "let me check the available tool", "let me search the available tool", "i should report", "i will report", "i need to report", "i must report", "i can report", "we should report", "we will report", "we need to report", "we must report", "we can report"];
   IneffectiveCompactionError = class IneffectiveCompactionError extends Error {
     constructor(preTokens, postTokens) {
       super(`compaction did not reduce active context: ${preTokens} -> ${postTokens} estimated tokens`);
@@ -32644,6 +32698,17 @@ function createRuntimePort(runtime, options = {}) {
       return;
     if (evt.type === "snapshot.changed" && pending.some((item) => item.type === "snapshot.changed" && item.sessionId === evt.sessionId))
       return;
+    const streamIdentity = transientStreamIdentity(evt);
+    if (streamIdentity) {
+      const existing = pending.length - 1;
+      if (existing >= 0 && transientStreamIdentity(pending[existing]) === streamIdentity)
+        pending[existing] = evt;
+      else
+        pending.push(evt);
+      if (!flushTimer)
+        flushTimer = setTimeout(flush, BATCH_DEBOUNCE_MS);
+      return;
+    }
     if (evt.type === "activity.changed") {
       const existing = pending.findIndex((item) => item.type === "activity.changed" && item.sessionId === evt.sessionId);
       if (existing >= 0)
@@ -32976,16 +33041,32 @@ function createRuntimePort(runtime, options = {}) {
               }
             });
           } catch {
-            mcpResult = await callMcpServerTool({
-              workspace: session.workspace,
-              configWorkspace: runtime.workspace,
-              session,
-              server: "mitmproxy-mcp",
-              tool: "get_traffic_summary",
-              args: {
-                limit: options2.limit ?? 300
-              }
-            });
+            try {
+              mcpResult = await callMcpServerTool({
+                workspace: session.workspace,
+                configWorkspace: runtime.workspace,
+                session,
+                server: "mitmproxy-mcp",
+                tool: "get_flow_summary_v2",
+                args: {
+                  limit: options2.limit ?? 300,
+                  ...options2.kind ? {
+                    kind: options2.kind
+                  } : {}
+                }
+              });
+            } catch {
+              mcpResult = await callMcpServerTool({
+                workspace: session.workspace,
+                configWorkspace: runtime.workspace,
+                session,
+                server: "mitmproxy-mcp",
+                tool: "get_traffic_summary",
+                args: {
+                  limit: options2.limit ?? 300
+                }
+              });
+            }
           }
           const flows = proxyFlowsFromMcpTrafficSummary(mcpResult, options2);
           if (flows.length > 0 || listMcpServerStatuses(activeSessionId).some((status2) => status2.name === "mitmproxy-mcp" && status2.running))
@@ -33018,6 +33099,21 @@ function createRuntimePort(runtime, options = {}) {
             if (detail)
               return detail;
           } catch {}
+          try {
+            const compatibleResult = await callMcpServerTool({
+              workspace: session.workspace,
+              configWorkspace: runtime.workspace,
+              session,
+              server: "mitmproxy-mcp",
+              tool: "inspect_flow_v2",
+              args: {
+                flow_id: id2
+              }
+            });
+            const compatibleDetail = proxyFlowDetailFromMcpInspect(compatibleResult);
+            if (compatibleDetail)
+              return compatibleDetail;
+          } catch {}
           const legacyResult = await callMcpServerTool({
             workspace: session.workspace,
             configWorkspace: runtime.workspace,
@@ -33249,6 +33345,16 @@ function createRuntimePort(runtime, options = {}) {
     }
   };
 }
+function transientStreamIdentity(event) {
+  if (event.type !== "event.appended")
+    return;
+  if (event.event.type !== "stream_text" && event.event.type !== "stream_reasoning")
+    return;
+  const payload = event.event.payload;
+  if (typeof payload?.turnId !== "string" || typeof payload.partId !== "string")
+    return;
+  return `${event.sessionId}:${payload.turnId}:${event.event.type}:${payload.partId}`;
+}
 function storeChangeIdentity(change) {
   switch (change.kind) {
     case "part":
@@ -34292,19 +34398,6 @@ function createActions(store, setStore) {
     errorSet(message) {
       setStore("ui", "lastError", message);
     },
-    streamTextUpdated(partId, text) {
-      setStore(produce((s) => {
-        for (const message of s.snapshot.messages) {
-          const part = message.parts.find((item) => item.id === partId);
-          if (!part)
-            continue;
-          part.payload = {
-            text
-          };
-          return;
-        }
-      }));
-    },
     toolInputPreviewUpdated(preview) {
       setStore(produce((s) => {
         const index = s.snapshot.toolInputPreviews.findIndex((item) => item.id === preview.id);
@@ -34746,9 +34839,11 @@ async function handleTuiEvent(evt, ctx) {
   }
   switch (evt.type) {
     case "turn.started":
+      ctx.onTurnStarted?.(evt.turnId);
       ctx.actions.turnStarted(evt.turnId, evt.startedAt);
       break;
     case "turn.finished":
+      ctx.onTurnFinished?.(evt.turnId);
       ctx.actions.turnFinished(evt.turnId);
       await refreshSnapshot(evt.sessionId);
       queueMicrotask(() => {
@@ -34779,8 +34874,14 @@ async function handleTuiEvent(evt, ctx) {
       }
       if (evt.event.type === "stream_text") {
         const payload = evt.event.payload;
-        if (typeof payload?.partId === "string" && typeof payload.text === "string") {
-          ctx.actions.streamTextUpdated(payload.partId, payload.text);
+        if (typeof payload?.turnId === "string" && typeof payload.partId === "string" && typeof payload.text === "string") {
+          ctx.onStreamText?.(payload.partId, payload.text, payload.turnId);
+        }
+      }
+      if (evt.event.type === "stream_reasoning") {
+        const payload = evt.event.payload;
+        if (typeof payload?.turnId === "string" && typeof payload.partId === "string" && typeof payload.rationale === "string") {
+          ctx.onStreamReasoning?.(payload.partId, payload.rationale, payload.turnId);
         }
       }
       const detail = statusDetailFor(evt.event);
@@ -34986,6 +35087,243 @@ var init_runtime2 = __esm(() => {
   RuntimeContext = createContext();
 });
 
+// src/agent-tui/transcript/stream-engine.ts
+function createTranscriptStreamEngine() {
+  const [state, setState] = createStore({
+    text: {},
+    reasoning: {},
+    diagnostics: {
+      revision: 0,
+      flushes: 0,
+      coalescedUpdates: 0,
+      lastIntervalMs: BASE_FRAME_INTERVAL_MS,
+      lastFlushAt: undefined
+    }
+  });
+  const pending = new Map;
+  let activeTurnId;
+  let timer;
+  let timerDueAt = 0;
+  let lastFlushAt = 0;
+  let updatesSinceFlush = 0;
+  let coalescedUpdates = 0;
+  let currentInterval = BASE_FRAME_INTERVAL_MS;
+  let acceptingUpdates = false;
+  let disposed = false;
+  function key(kind, partId) {
+    return `${kind}:${partId}`;
+  }
+  function intervalFor(contentLength, updateCount) {
+    const sizePressure = Math.log2(1 + contentLength / 4096) * 8;
+    const updatePressure = Math.max(0, updateCount - 3) * 2;
+    return Math.round(Math.max(MIN_FRAME_INTERVAL_MS, Math.min(MAX_FRAME_INTERVAL_MS, BASE_FRAME_INTERVAL_MS + sizePressure + updatePressure)));
+  }
+  function schedule() {
+    if (disposed || pending.size === 0)
+      return;
+    const now = Date.now();
+    const maxLength = Math.max(0, ...[...pending.values()].map((entry) => entry.content.length));
+    const interval = intervalFor(maxLength, updatesSinceFlush);
+    currentInterval = interval;
+    const elapsed = now - lastFlushAt;
+    if (lastFlushAt === 0 || elapsed >= interval) {
+      flush();
+      return;
+    }
+    const dueAt = lastFlushAt + interval;
+    if (timer && dueAt <= timerDueAt)
+      return;
+    if (timer)
+      clearTimeout(timer);
+    timerDueAt = dueAt;
+    timer = setTimeout(flush, Math.max(0, dueAt - now));
+  }
+  function flush() {
+    if (disposed)
+      return;
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    timerDueAt = 0;
+    if (pending.size === 0)
+      return;
+    const entries = [...pending.values()];
+    pending.clear();
+    const now = Date.now();
+    lastFlushAt = now;
+    updatesSinceFlush = 0;
+    setState(produce((draft) => {
+      draft.diagnostics.revision += 1;
+      draft.diagnostics.flushes += 1;
+      draft.diagnostics.coalescedUpdates = coalescedUpdates;
+      draft.diagnostics.lastIntervalMs = currentInterval;
+      draft.diagnostics.lastFlushAt = now;
+      const revision = draft.diagnostics.revision;
+      for (const entry of entries) {
+        const target = entry.kind === "text" ? draft.text : draft.reasoning;
+        target[entry.partId] = {
+          content: entry.content,
+          revision
+        };
+      }
+    }));
+  }
+  function clearVisible() {
+    pending.clear();
+    updatesSinceFlush = 0;
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    timerDueAt = 0;
+    setState(produce((draft) => {
+      draft.text = {};
+      draft.reasoning = {};
+    }));
+  }
+  function update(kind, partId, content, turnId) {
+    if (disposed || !acceptingUpdates || turnId !== activeTurnId)
+      return;
+    const pendingKey = key(kind, partId);
+    const existing = pending.get(pendingKey);
+    const visible = kind === "text" ? state.text[partId]?.content : state.reasoning[partId]?.content;
+    if (existing?.content === content || !existing && visible === content)
+      return;
+    if (existing)
+      coalescedUpdates += 1;
+    pending.set(pendingKey, {
+      kind,
+      partId,
+      content
+    });
+    updatesSinceFlush += 1;
+    schedule();
+  }
+  function durableContent(messages, partId, kind) {
+    for (const message of messages) {
+      const part = message.parts.find((candidate2) => candidate2.id === partId);
+      if (!part)
+        continue;
+      if (kind === "text") {
+        if (typeof part.payload === "string")
+          return part.payload;
+        if (part.payload && typeof part.payload === "object" && "text" in part.payload) {
+          const value = part.payload.text;
+          return typeof value === "string" ? value : undefined;
+        }
+        return;
+      }
+      if (part.payload && typeof part.payload === "object") {
+        const payload = part.payload;
+        if (typeof payload.rationale === "string")
+          return payload.rationale;
+        if (typeof payload.text === "string")
+          return payload.text;
+      }
+      return typeof part.payload === "string" ? part.payload : undefined;
+    }
+    return;
+  }
+  function reconciliationRemovals(kind, visible, messages) {
+    const removals = [];
+    for (const [partId, entry] of Object.entries(visible)) {
+      const durable = durableContent(messages, partId, kind);
+      if (durable === entry.content)
+        removals.push(partId);
+    }
+    return removals;
+  }
+  function reconcile2(messages, runningTurnId) {
+    if (disposed)
+      return;
+    if (!runningTurnId) {
+      clearVisible();
+      activeTurnId = undefined;
+      acceptingUpdates = false;
+      return;
+    }
+    if (activeTurnId && activeTurnId !== runningTurnId) {
+      clearVisible();
+      lastFlushAt = 0;
+      currentInterval = BASE_FRAME_INTERVAL_MS;
+    }
+    if (activeTurnId !== runningTurnId)
+      acceptingUpdates = true;
+    activeTurnId = runningTurnId;
+    const textRemovals = reconciliationRemovals("text", state.text, messages);
+    const reasoningRemovals = reconciliationRemovals("reasoning", state.reasoning, messages);
+    if (textRemovals.length === 0 && reasoningRemovals.length === 0)
+      return;
+    setState(produce((draft) => {
+      for (const partId of textRemovals)
+        delete draft.text[partId];
+      for (const partId of reasoningRemovals)
+        delete draft.reasoning[partId];
+    }));
+  }
+  function beginTurn(turnId) {
+    if (disposed)
+      return;
+    if (activeTurnId !== turnId) {
+      clearVisible();
+      lastFlushAt = 0;
+      currentInterval = BASE_FRAME_INTERVAL_MS;
+    }
+    activeTurnId = turnId;
+    acceptingUpdates = true;
+  }
+  function finishTurn(turnId) {
+    if (disposed || activeTurnId !== turnId)
+      return;
+    flush();
+    acceptingUpdates = false;
+  }
+  function reset2() {
+    if (disposed)
+      return;
+    clearVisible();
+    activeTurnId = undefined;
+    acceptingUpdates = false;
+    lastFlushAt = 0;
+    coalescedUpdates = 0;
+    currentInterval = BASE_FRAME_INTERVAL_MS;
+    setState("diagnostics", {
+      revision: 0,
+      flushes: 0,
+      coalescedUpdates: 0,
+      lastIntervalMs: BASE_FRAME_INTERVAL_MS,
+      lastFlushAt: undefined
+    });
+  }
+  function dispose2() {
+    if (disposed)
+      return;
+    clearVisible();
+    disposed = true;
+  }
+  return {
+    state,
+    beginTurn,
+    finishTurn,
+    update,
+    updateText(partId, content, turnId) {
+      update("text", partId, content, turnId);
+    },
+    updateReasoning(partId, content, turnId) {
+      update("reasoning", partId, content, turnId);
+    },
+    reconcile: reconcile2,
+    reset: reset2,
+    flush,
+    dispose: dispose2
+  };
+}
+var MIN_FRAME_INTERVAL_MS = 24, BASE_FRAME_INTERVAL_MS = 24, MAX_FRAME_INTERVAL_MS = 96;
+var init_stream_engine = __esm(() => {
+  init_store2();
+});
+
 // src/agent-tui/reasoning.ts
 function parseReasoning(text) {
   const trimmed = normalizeReasoningSummary(text);
@@ -36475,6 +36813,34 @@ var init_renderers2 = __esm(() => {
   TOOL_DETAIL_MAX_BYTES = 32 * 1024;
 });
 
+// src/agent-tui/transcript/projection.ts
+function createTranscriptProjection(store, width) {
+  const historyMessages = createMemo(() => {
+    const runningTurnId = store.snapshot.runningTurnId;
+    return runningTurnId ? store.snapshot.messages.filter((message) => message.turnId !== runningTurnId) : store.snapshot.messages;
+  });
+  const activeMessages = createMemo(() => {
+    const runningTurnId = store.snapshot.runningTurnId;
+    return runningTurnId ? store.snapshot.messages.filter((message) => message.turnId === runningTurnId) : [];
+  });
+  const activeMessageIds = createMemo(() => new Set(activeMessages().map((message) => message.id)));
+  const historyToolCalls = createMemo(() => {
+    const runningTurnId = store.snapshot.runningTurnId;
+    return runningTurnId ? store.snapshot.toolCalls.filter((toolCall) => toolCall.turnId !== runningTurnId && (!toolCall.messageId || !activeMessageIds().has(toolCall.messageId))) : store.snapshot.toolCalls;
+  });
+  const activeToolCalls = createMemo(() => {
+    const runningTurnId = store.snapshot.runningTurnId;
+    return runningTurnId ? store.snapshot.toolCalls.filter((toolCall) => toolCall.turnId === runningTurnId || (toolCall.messageId ? activeMessageIds().has(toolCall.messageId) : toolCall.turnId === undefined)) : [];
+  });
+  const historyRows = createMemo(() => projectMessagesToRows(historyMessages(), width(), undefined, historyToolCalls()));
+  const activeRows = createMemo(() => projectMessagesToRows(activeMessages(), width(), store.snapshot.runningTurnId, activeToolCalls(), store.snapshot.toolInputPreviews));
+  return createMemo(() => [...historyRows(), ...activeRows()]);
+}
+var init_projection = __esm(() => {
+  init_solid();
+  init_renderers2();
+});
+
 // src/agent-tui/context/store.tsx
 function proxyRefreshQuery() {
   return {
@@ -36493,6 +36859,7 @@ function TuiStoreProvider(props) {
     setStore: _set,
     actions
   } = createFaraiStore(workspace);
+  const transcript = createTranscriptStreamEngine();
   let statusTimer;
   const proxyRefreshes = new Map;
   const mcpRefreshes = new Map;
@@ -36514,7 +36881,7 @@ function TuiStoreProvider(props) {
         actions.updateNoticeSet(notice);
     });
   }
-  const timelineRows = createMemo(() => projectMessagesToRows(store.snapshot.messages, Math.max(1, dims().width - 4), store.snapshot.runningTurnId, store.snapshot.toolCalls, store.snapshot.toolInputPreviews));
+  const timelineRows = createTranscriptProjection(store, () => Math.max(1, dims().width - 4));
   function setStatusDetail(detail, timeoutMs) {
     if (disposed)
       return;
@@ -36582,6 +36949,7 @@ function TuiStoreProvider(props) {
       if (disposed || store.activeSessionId !== sid || snapshotGenerations.get(sid) !== generation)
         return;
       actions.snapshotApplied(snapshot);
+      transcript.reconcile(snapshot.messages, snapshot.runningTurnId);
       for (const entry2 of promptHistoryFromMessages(snapshot.messages)) {
         actions.promptHistoryAdd(entry2, "session");
       }
@@ -36611,12 +36979,16 @@ function TuiStoreProvider(props) {
       return;
     if (sessionId === store.activeSessionId)
       return;
+    transcript.reset();
     actions.activeSessionSet(sessionId);
     const pendingSubmission = promptSubmissions.get(sessionId);
     if (pendingSubmission)
       pendingSubmission.generation = actions.promptSubmissionStarted();
     props.onActiveSessionChange?.(sessionId);
     port.setActiveSession(sessionId);
+    const runningTurnId = port.getRunningTurnId?.(sessionId);
+    if (runningTurnId)
+      transcript.beginTurn(runningTurnId);
     try {
       await requestSnapshotRefresh(sessionId);
     } catch (error) {
@@ -37113,9 +37485,11 @@ function TuiStoreProvider(props) {
     setStatusDetail,
     refreshSnapshot: requestSnapshotRefresh,
     refreshSessions,
-    onSnapshot: () => {
-      return;
-    }
+    onSnapshot: (snapshot) => transcript.reconcile(snapshot.messages, snapshot.runningTurnId),
+    onTurnStarted: (turnId) => transcript.beginTurn(turnId),
+    onTurnFinished: (turnId) => transcript.finishTurn(turnId),
+    onStreamText: (partId, text, turnId) => transcript.updateText(partId, text, turnId),
+    onStreamReasoning: (partId, rationale, turnId) => transcript.updateReasoning(partId, rationale, turnId)
   }, (error) => {
     if (!disposed)
       actions.errorSet(error instanceof Error ? error.message : String(error));
@@ -37123,8 +37497,9 @@ function TuiStoreProvider(props) {
   const off = port.event.on((event) => {
     if (disposed)
       return;
-    if (event.type === "store.changed" || event.type === "store.batch")
+    if (event.type === "store.changed" || event.type === "store.batch" || event.type === "turn.started") {
       invalidateSnapshot(event.sessionId);
+    }
     eventDispatcher.dispatch(event);
   });
   onCleanup(() => {
@@ -37135,6 +37510,7 @@ function TuiStoreProvider(props) {
     mcpOverlayGeneration += 1;
     off();
     eventDispatcher.dispose();
+    transcript.dispose();
     if (statusTimer)
       clearTimeout(statusTimer);
   });
@@ -37180,6 +37556,7 @@ function TuiStoreProvider(props) {
     store,
     actions,
     timelineRows,
+    transcript,
     submitPrompt,
     submitUserInput,
     answerUserInputQuestion,
@@ -37264,7 +37641,8 @@ var init_store4 = __esm(() => {
   init_solid();
   init_store3();
   init_runtime2();
-  init_renderers2();
+  init_stream_engine();
+  init_projection();
   StoreContext = createContext();
 });
 
@@ -38398,6 +38776,18 @@ function routeSlash(key) {
   }
 }
 function routeBase(key, ctx) {
+  if (key.meta) {
+    if (key.name === "1")
+      return consumed({
+        kind: "mainTab.set",
+        tab: "chat"
+      });
+    if (key.name === "2")
+      return consumed({
+        kind: "mainTab.set",
+        tab: "proxy"
+      });
+  }
   if (key.ctrl) {
     switch (key.name) {
       case "1":
@@ -39846,7 +40236,10 @@ function KeyboardController() {
     for (const message of [...tui.store.snapshot.messages].reverse()) {
       if (message.role !== "assistant")
         continue;
-      const parts = message.parts.map((part) => {
+      const parts = message.parts.filter((part) => part.type === "text").map((part) => {
+        const streamed = tui.transcript.state.text[part.id]?.content;
+        if (streamed !== undefined)
+          return streamed;
         if (typeof part.payload === "string")
           return part.payload;
         if (part.payload && typeof part.payload === "object" && "text" in part.payload) {
@@ -40044,10 +40437,8 @@ function args(value) {
 
 // src/agent-tui/transcript/cells/user-cell.tsx
 function UserPrompt(props) {
-  const dims = useTerminalDimensions();
   const lines = createMemo(() => stripOuterBlankLines2(sanitizeText2(props.row.text)).split(`
 `));
-  const width = () => Math.max(1, dims().width);
   return (() => {
     var _el$ = createElement("box");
     insert(_el$, createComponent2(For, {
@@ -40062,7 +40453,8 @@ function UserPrompt(props) {
         insert(_el$4, line || " ");
         effect((_p$) => {
           var _v$ = {
-            width: width(),
+            width: "100%",
+            minWidth: 0,
             flexDirection: "row",
             backgroundColor: COLOR.userMessageBg
           }, _v$2 = index() === 0 ? COLOR.accent : COLOR.dim, _v$3 = COLOR.text;
@@ -40079,7 +40471,8 @@ function UserPrompt(props) {
       })()
     }));
     effect((_$p) => setProp(_el$, "style", {
-      width: width(),
+      width: "100%",
+      minWidth: 0,
       flexDirection: "column",
       marginTop: 1,
       marginBottom: 1,
@@ -40099,7 +40492,6 @@ var init_user_cell = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid();
-  init_solid2();
   init_theme();
 });
 
@@ -40244,11 +40636,13 @@ function AssistantMessage(props) {
     insertNode(_el$, _el$2);
     setProp(_el$, "style", {
       flexDirection: "column",
+      flexShrink: 0,
       marginBottom: 1
     });
     insertNode(_el$2, _el$3);
     setProp(_el$2, "style", {
       flexDirection: "row",
+      flexShrink: 0,
       minWidth: 0
     });
     insert(_el$2, createComponent2(TranscriptMarker, {
@@ -40264,23 +40658,23 @@ function AssistantMessage(props) {
       minWidth: 0
     });
     setProp(_el$4, "width", "100%");
+    setProp(_el$4, "streaming", true);
+    setProp(_el$4, "internalBlockMode", "top-level");
     setProp(_el$4, "tableOptions", {
       style: "columns",
       widthMode: "content",
       cellPaddingX: 1
     });
     effect((_p$) => {
-      var _v$ = props.row.text, _v$2 = props.row.streaming, _v$3 = syntax(), _v$4 = COLOR.markdownText;
+      var _v$ = props.streamedText ?? props.row.text, _v$2 = syntax(), _v$3 = COLOR.markdownText;
       _v$ !== _p$.e && (_p$.e = setProp(_el$4, "content", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = setProp(_el$4, "streaming", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = setProp(_el$4, "syntaxStyle", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = setProp(_el$4, "fg", _v$4, _p$.o));
+      _v$2 !== _p$.t && (_p$.t = setProp(_el$4, "syntaxStyle", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = setProp(_el$4, "fg", _v$3, _p$.a));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined,
-      o: undefined
+      a: undefined
     });
     return _el$;
   })();
@@ -40359,18 +40753,24 @@ function ReasoningRow(props) {
   const tui = useTuiStore();
   const dims = useTerminalDimensions();
   const expanded = () => Boolean(tui.store.ui.expandedCells[props.row.id]);
-  const label = () => truncateLine2(props.row.title === "reasoning" ? "thinking" : props.row.title, Math.max(1, dims().width - 4));
+  const content = createMemo(() => props.streamedReasoning === undefined ? {
+    title: props.row.title,
+    body: props.row.body
+  } : parseReasoning(props.streamedReasoning));
+  const label = () => truncateLine2(content().title === "reasoning" ? "thinking" : content().title, Math.max(1, dims().width - 4));
   const toggleClick = createPrimaryClickGesture(() => tui.actions.cellExpandedToggle(props.row.id));
   return (() => {
     var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text");
     insertNode(_el$, _el$2);
     setProp(_el$, "style", {
       flexDirection: "column",
+      flexShrink: 0,
       marginBottom: 1
     });
     insertNode(_el$2, _el$3);
     setProp(_el$2, "style", {
-      flexDirection: "row"
+      flexDirection: "row",
+      flexShrink: 0
     });
     spread(_el$2, toggleClick, true);
     insert(_el$2, createComponent2(TranscriptMarker, {
@@ -40384,24 +40784,24 @@ function ReasoningRow(props) {
     insert(_el$3, label);
     insert(_el$, createComponent2(Show, {
       get when() {
-        return memo2(() => !!expanded())() && props.row.body.trim();
+        return memo2(() => !!expanded())() && content().body.trim();
       },
       get children() {
         return createComponent2(ExpandedPanel, {
           get children() {
             var _el$4 = createElement("markdown");
+            setProp(_el$4, "streaming", true);
+            setProp(_el$4, "internalBlockMode", "top-level");
             effect((_p$) => {
-              var _v$ = props.row.body, _v$2 = props.row.streaming, _v$3 = syntax(), _v$4 = COLOR.dim;
+              var _v$ = content().body, _v$2 = syntax(), _v$3 = COLOR.dim;
               _v$ !== _p$.e && (_p$.e = setProp(_el$4, "content", _v$, _p$.e));
-              _v$2 !== _p$.t && (_p$.t = setProp(_el$4, "streaming", _v$2, _p$.t));
-              _v$3 !== _p$.a && (_p$.a = setProp(_el$4, "syntaxStyle", _v$3, _p$.a));
-              _v$4 !== _p$.o && (_p$.o = setProp(_el$4, "fg", _v$4, _p$.o));
+              _v$2 !== _p$.t && (_p$.t = setProp(_el$4, "syntaxStyle", _v$2, _p$.t));
+              _v$3 !== _p$.a && (_p$.a = setProp(_el$4, "fg", _v$3, _p$.a));
               return _p$;
             }, {
               e: undefined,
               t: undefined,
-              a: undefined,
-              o: undefined
+              a: undefined
             });
             return _el$4;
           }
@@ -40430,6 +40830,7 @@ var init_reasoning_cell = __esm(() => {
   init_expanded_panel();
   init_transcript_marker();
   init_mouse();
+  init_reasoning();
 });
 
 // src/agent-tui/filetype.ts
@@ -42094,12 +42495,18 @@ function FaraiRow(props) {
       return createComponent2(AssistantMessage, {
         get row() {
           return props.row;
+        },
+        get streamedText() {
+          return props.streamedText;
         }
       });
     case "thinking":
       return createComponent2(ReasoningRow, {
         get row() {
           return props.row;
+        },
+        get streamedReasoning() {
+          return props.streamedReasoning;
         }
       });
     case "tool":
@@ -42225,7 +42632,16 @@ function Transcript() {
       byId
     };
   });
-  const rawRows = createMemo(() => tui.store.snapshot.messages.flatMap((message) => message.parts.map((part) => `${message.role}.${part.type} ${formatPayload(part.payload, 16000)}`)));
+  const rawRows = createMemo(() => tui.store.snapshot.messages.flatMap((message) => message.parts.map((part) => {
+    const streamText = tui.transcript.state.text[part.id]?.content;
+    const streamReasoning = tui.transcript.state.reasoning[part.id]?.content;
+    const payload = streamText !== undefined ? {
+      text: streamText
+    } : streamReasoning !== undefined ? {
+      rationale: streamReasoning
+    } : part.payload;
+    return `${message.role}.${part.type} ${formatPayload(payload, 16000)}`;
+  })));
   createEffect(() => {
     const request = tui.store.ui.messageNavigation;
     const userIds = transcriptRows().filter((row) => row.kind === "user").map((row) => row.id);
@@ -42242,6 +42658,7 @@ function Transcript() {
     typeof _ref$ === "function" ? use(_ref$, _el$) : scrollRef = _el$;
     setProp(_el$, "stickyScroll", true);
     setProp(_el$, "stickyStart", "bottom");
+    setProp(_el$, "viewportCulling", true);
     setProp(_el$, "scrollbarOptions", {
       visible: false
     });
@@ -42307,6 +42724,12 @@ function Transcript() {
               children: (id2) => createComponent2(TranscriptRow, {
                 get row() {
                   return indexedRows().byId.get(id2);
+                },
+                get streamedText() {
+                  return tui.transcript.state.text[id2]?.content;
+                },
+                get streamedReasoning() {
+                  return tui.transcript.state.reasoning[id2]?.content;
                 }
               })
             });
@@ -42422,12 +42845,19 @@ function TranscriptRow(props) {
     var _el$1 = createElement("box");
     setProp(_el$1, "style", {
       flexDirection: "column",
+      flexShrink: 0,
       paddingLeft: isUser ? 0 : 1,
       paddingRight: isUser ? 0 : 1
     });
     insert(_el$1, createComponent2(FaraiRow, {
       get row() {
         return props.row;
+      },
+      get streamedText() {
+        return props.streamedText;
+      },
+      get streamedReasoning() {
+        return props.streamedReasoning;
       }
     }));
     effect((_$p) => setProp(_el$1, "id", props.row.id, _$p));
@@ -42456,6 +42886,7 @@ var init_transcript = __esm(() => {
 // src/agent-tui/surfaces/center-surface.tsx
 function CenterSurfaceView(props) {
   const tui = useTuiStore();
+  const dims = useTerminalDimensions();
   const loader = createSurfaceLoader(() => props.frame);
   const title = () => surfaceTitle(props.frame);
   const kindLabel = () => props.frame.kind;
@@ -42497,13 +42928,13 @@ function CenterSurfaceView(props) {
       minWidth: 0
     });
     insertNode(_el$4, createTextNode(`\u203A `));
-    insert(_el$6, () => truncateLine2(title(), 96));
+    insert(_el$6, () => truncateLine2(title(), Math.max(4, dims().width - terminalWidth(kindLabel()) - 10)));
     insert(_el$7, kindLabel);
     insertNode(_el$8, _el$9);
     setProp(_el$8, "style", {
       height: 1
     });
-    insert(_el$9, () => surfaceSubtitle(props.frame));
+    insert(_el$9, () => truncateLine2(surfaceSubtitle(props.frame), Math.max(1, dims().width - 4)));
     insert(_el$, createComponent2(Show, {
       get when() {
         return props.frame.kind === "proxy_flow";
@@ -42797,7 +43228,7 @@ function WebSocketFlowView(props) {
   let lastScrollSequence = 0;
   const selectedIndex = createMemo(() => Math.min(Math.max(0, tui.store.ui.proxyWebSocketMessageIndex), Math.max(0, props.flow.messages.length - 1)));
   const selectedMessage = createMemo(() => props.flow.messages[selectedIndex()]);
-  const contentWidth = () => Math.max(36, dims().width - (props.compact ? 4 : 8));
+  const contentWidth = () => Math.max(1, dims().width - (props.compact ? 4 : 8));
   const inspectorGap = () => dims().height >= 22 ? 1 : 0;
   createEffect(() => {
     const flowId = props.flow.id;
@@ -43470,7 +43901,8 @@ function ProxyLogView() {
   });
   const defaultListHeight = () => Math.max(7, Math.min(14, Math.floor(dims().height * 0.34)));
   const listHeight = () => clampProxyListHeight(listHeightOverride() ?? defaultListHeight(), dims().height);
-  const tableWidth = () => Math.max(30, dims().width - 4);
+  const compactHeight = () => dims().height < 20;
+  const tableWidth = () => Math.max(1, dims().width - 4);
   const beginListResize = (event) => {
     if (event.button !== 0)
       return;
@@ -43578,22 +44010,9 @@ function ProxyLogView() {
     });
   });
   return (() => {
-    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$5 = createElement("box"), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$8 = createElement("scrollbox"), _el$9 = createElement("box"), _el$0 = createElement("text"), _el$1 = createElement("text"), _el$10 = createElement("box"), _el$11 = createElement("text"), _el$12 = createElement("box");
+    var _el$ = createElement("box"), _el$2 = createElement("box"), _el$3 = createElement("text"), _el$5 = createElement("box"), _el$6 = createElement("box"), _el$7 = createElement("text"), _el$8 = createElement("scrollbox");
     insertNode(_el$, _el$2);
     insertNode(_el$, _el$5);
-    insertNode(_el$, _el$9);
-    insertNode(_el$, _el$10);
-    insertNode(_el$, _el$12);
-    setProp(_el$, "style", {
-      flexGrow: 1,
-      flexShrink: 1,
-      minHeight: 0,
-      flexDirection: "column",
-      paddingTop: 1,
-      paddingBottom: 1,
-      paddingLeft: 2,
-      paddingRight: 2
-    });
     setProp(_el$, "onMouseDrag", resizeList);
     setProp(_el$, "onMouseDragEnd", finishListResize);
     setProp(_el$, "onMouseUp", finishListResize);
@@ -43650,8 +44069,8 @@ function ProxyLogView() {
             flexDirection: "column",
             marginTop: 1
           });
-          insert(_el$14, () => `no ${tui.store.ui.proxyFilter === "all" ? "captured proxy" : tui.store.ui.proxyFilter} flows yet`);
-          insert(_el$15, () => proxyHint().toLowerCase());
+          insert(_el$14, () => truncate2(`no ${tui.store.ui.proxyFilter === "all" ? "captured proxy" : tui.store.ui.proxyFilter} flows yet`, tableWidth()));
+          insert(_el$15, () => truncate2(proxyHint().toLowerCase(), tableWidth()));
           effect((_p$) => {
             var _v$7 = COLOR.dim, _v$8 = COLOR.dim;
             _v$7 !== _p$.e && (_p$.e = setProp(_el$14, "fg", _v$7, _p$.e));
@@ -43700,103 +44119,140 @@ function ProxyLogView() {
         });
       }
     }));
-    insertNode(_el$9, _el$0);
-    insertNode(_el$9, _el$1);
-    setProp(_el$9, "style", {
-      height: 1,
-      flexShrink: 0,
-      flexDirection: "row",
-      justifyContent: "space-between",
-      marginTop: 1
-    });
-    insert(_el$0, () => truncate2(selectedFlow() && selectedPresentation() ? `${selectedPresentation().kind} \xB7 ${selectedPresentation().method} ${selectedFlow().url}` : "no flow selected", Math.max(8, tableWidth() - 20)));
-    insert(_el$1, () => truncate2(detailLoading() ? "loading detail" : detailError() ?? "", 18));
-    insertNode(_el$10, _el$11);
-    setProp(_el$10, "style", {
-      height: 1,
-      flexShrink: 0,
-      alignItems: "center",
-      justifyContent: "flex-start"
-    });
-    setProp(_el$10, "onMouseDown", beginListResize);
-    setProp(_el$11, "selectable", false);
-    insert(_el$11, () => "\u2500".repeat(Math.max(1, dims().width - 4)));
-    setProp(_el$12, "style", {
-      flexGrow: 1,
-      minHeight: 0,
-      flexDirection: "column",
-      paddingTop: 1
-    });
-    insert(_el$12, createComponent2(Show, {
+    insert(_el$, createComponent2(Show, {
       get when() {
-        return detail();
+        return !compactHeight();
       },
-      get fallback() {
-        return (() => {
-          var _el$17 = createElement("box"), _el$18 = createElement("text");
-          insertNode(_el$17, _el$18);
-          setProp(_el$17, "style", {
-            flexDirection: "column"
+      get children() {
+        return [(() => {
+          var _el$9 = createElement("box"), _el$0 = createElement("text"), _el$1 = createElement("text");
+          insertNode(_el$9, _el$0);
+          insertNode(_el$9, _el$1);
+          setProp(_el$9, "style", {
+            height: 1,
+            flexShrink: 0,
+            flexDirection: "row",
+            justifyContent: "space-between",
+            marginTop: 1
           });
-          insertNode(_el$18, createTextNode(`select a flow to inspect protocol-aware details`));
-          effect((_$p) => setProp(_el$18, "fg", COLOR.dim, _$p));
-          return _el$17;
-        })();
-      },
-      children: (flow) => (() => {
-        var _el$20 = createElement("box");
-        setProp(_el$20, "style", {
-          flexGrow: 1,
-          minHeight: 0,
-          flexDirection: "column"
-        });
-        insert(_el$20, createComponent2(Show, {
-          get when() {
-            return isSummaryOnly(flow());
-          },
-          get children() {
-            var _el$21 = createElement("box"), _el$22 = createElement("text");
-            insertNode(_el$21, _el$22);
-            setProp(_el$21, "style", {
-              height: 1,
-              flexShrink: 0,
-              marginBottom: 1
-            });
-            insertNode(_el$22, createTextNode(`full body unavailable; showing captured metadata`));
-            effect((_$p) => setProp(_el$22, "fg", COLOR.warning, _$p));
-            return _el$21;
-          }
-        }), null);
-        insert(_el$20, createComponent2(ProxyFlowSplitView, {
-          get flow() {
-            return flow();
-          },
-          compact: true
-        }), null);
-        return _el$20;
-      })()
-    }));
+          insert(_el$0, () => truncate2(selectedFlow() && selectedPresentation() ? `${selectedPresentation().kind} \xB7 ${selectedPresentation().method} ${selectedFlow().url}` : "no flow selected", Math.max(8, tableWidth() - 20)));
+          insert(_el$1, () => truncate2(detailLoading() ? "loading detail" : detailError() ?? "", 18));
+          effect((_p$) => {
+            var _v$ = COLOR.dim, _v$2 = detailLoading() ? COLOR.accent : detailError() ? COLOR.error : COLOR.dim;
+            _v$ !== _p$.e && (_p$.e = setProp(_el$0, "fg", _v$, _p$.e));
+            _v$2 !== _p$.t && (_p$.t = setProp(_el$1, "fg", _v$2, _p$.t));
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$9;
+        })(), (() => {
+          var _el$10 = createElement("box"), _el$11 = createElement("text");
+          insertNode(_el$10, _el$11);
+          setProp(_el$10, "style", {
+            height: 1,
+            flexShrink: 0,
+            alignItems: "center",
+            justifyContent: "flex-start"
+          });
+          setProp(_el$10, "onMouseDown", beginListResize);
+          setProp(_el$11, "selectable", false);
+          insert(_el$11, () => "\u2500".repeat(Math.max(1, dims().width - 4)));
+          effect((_$p) => setProp(_el$11, "fg", dividerDragging() ? COLOR.accent : COLOR.border, _$p));
+          return _el$10;
+        })(), (() => {
+          var _el$12 = createElement("box");
+          setProp(_el$12, "style", {
+            flexGrow: 1,
+            minHeight: 0,
+            flexDirection: "column",
+            paddingTop: 1
+          });
+          insert(_el$12, createComponent2(Show, {
+            get when() {
+              return detail();
+            },
+            get fallback() {
+              return (() => {
+                var _el$17 = createElement("box"), _el$18 = createElement("text");
+                insertNode(_el$17, _el$18);
+                setProp(_el$17, "style", {
+                  flexDirection: "column"
+                });
+                insertNode(_el$18, createTextNode(`select a flow to inspect protocol-aware details`));
+                effect((_$p) => setProp(_el$18, "fg", COLOR.dim, _$p));
+                return _el$17;
+              })();
+            },
+            children: (flow) => (() => {
+              var _el$20 = createElement("box");
+              setProp(_el$20, "style", {
+                flexGrow: 1,
+                minHeight: 0,
+                flexDirection: "column"
+              });
+              insert(_el$20, createComponent2(Show, {
+                get when() {
+                  return isSummaryOnly(flow());
+                },
+                get children() {
+                  var _el$21 = createElement("box"), _el$22 = createElement("text");
+                  insertNode(_el$21, _el$22);
+                  setProp(_el$21, "style", {
+                    height: 1,
+                    flexShrink: 0,
+                    marginBottom: 1
+                  });
+                  insertNode(_el$22, createTextNode(`full body unavailable; showing captured metadata`));
+                  effect((_$p) => setProp(_el$22, "fg", COLOR.warning, _$p));
+                  return _el$21;
+                }
+              }), null);
+              insert(_el$20, createComponent2(ProxyFlowSplitView, {
+                get flow() {
+                  return flow();
+                },
+                compact: true
+              }), null);
+              return _el$20;
+            })()
+          }));
+          return _el$12;
+        })()];
+      }
+    }), null);
     effect((_p$) => {
-      var _v$ = COLOR.text, _v$2 = {
+      var _v$3 = {
+        flexGrow: 1,
+        flexShrink: 1,
+        minHeight: 0,
+        flexDirection: "column",
+        paddingTop: compactHeight() ? 0 : 1,
+        paddingBottom: compactHeight() ? 0 : 1,
+        paddingLeft: 2,
+        paddingRight: 2
+      }, _v$4 = COLOR.text, _v$5 = compactHeight() ? {
+        flexGrow: 1,
+        flexShrink: 1,
+        minHeight: 0,
+        flexDirection: "column"
+      } : {
         height: listHeight(),
         flexShrink: 0,
         flexDirection: "column",
         marginTop: 1
-      }, _v$3 = COLOR.dim, _v$4 = COLOR.dim, _v$5 = detailLoading() ? COLOR.accent : detailError() ? COLOR.error : COLOR.dim, _v$6 = dividerDragging() ? COLOR.accent : COLOR.border;
-      _v$ !== _p$.e && (_p$.e = setProp(_el$3, "fg", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = setProp(_el$5, "style", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = setProp(_el$7, "fg", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = setProp(_el$0, "fg", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = setProp(_el$1, "fg", _v$5, _p$.i));
-      _v$6 !== _p$.n && (_p$.n = setProp(_el$11, "fg", _v$6, _p$.n));
+      }, _v$6 = COLOR.dim;
+      _v$3 !== _p$.e && (_p$.e = setProp(_el$, "style", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = setProp(_el$3, "fg", _v$4, _p$.t));
+      _v$5 !== _p$.a && (_p$.a = setProp(_el$5, "style", _v$5, _p$.a));
+      _v$6 !== _p$.o && (_p$.o = setProp(_el$7, "fg", _v$6, _p$.o));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined,
-      i: undefined,
-      n: undefined
+      o: undefined
     });
     return _el$;
   })();
@@ -43931,6 +44387,9 @@ function isSummaryOnly(flow) {
   return !flow.response && flow.answerCount > 0;
 }
 function proxyHeaderLine(width) {
+  if (width < 38) {
+    return truncate2([pad("", 2), pad("method", 8), "host / path"].join(""), width);
+  }
   if (width < 96) {
     return truncate2([pad("", 2), pad("proto", 7), pad("method", 8), pad("sts", 5), "host / path"].join(""), width);
   }
@@ -43950,10 +44409,11 @@ function proxyFlowTablePresentation(flow, filter) {
 function ProxyRow(props) {
   const pathWidth = () => Math.max(18, props.width - 98);
   const compactTarget = () => truncate2(`${props.flow.host}${props.flow.path || "/"}`, Math.max(8, props.width - 22));
+  const narrowTarget = () => truncate2(`${props.flow.host}${props.flow.path || "/"}`, Math.max(1, props.width - 10));
   const presentation = () => proxyFlowTablePresentation(props.flow, props.filter);
   return createComponent2(Show, {
     get when() {
-      return props.width >= 96;
+      return props.width >= 38;
     },
     get fallback() {
       return [(() => {
@@ -43965,91 +44425,119 @@ function ProxyRow(props) {
       })(), (() => {
         var _el$38 = createElement("text");
         setProp(_el$38, "selectable", false);
-        insert(_el$38, () => pad(presentation().kind, 7));
-        effect((_$p) => setProp(_el$38, "fg", COLOR.dim, _$p));
+        insert(_el$38, () => pad(presentation().method, 8));
+        effect((_$p) => setProp(_el$38, "fg", methodColor(presentation().method), _$p));
         return _el$38;
       })(), (() => {
         var _el$39 = createElement("text");
         setProp(_el$39, "selectable", false);
-        insert(_el$39, () => pad(presentation().method, 8));
-        effect((_$p) => setProp(_el$39, "fg", methodColor(presentation().method), _$p));
+        insert(_el$39, narrowTarget);
+        effect((_$p) => setProp(_el$39, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
         return _el$39;
-      })(), (() => {
-        var _el$40 = createElement("text");
-        setProp(_el$40, "selectable", false);
-        insert(_el$40, () => pad(String(props.flow.status ?? "-"), 5));
-        effect((_$p) => setProp(_el$40, "fg", statusColor(props.flow.status), _$p));
-        return _el$40;
-      })(), (() => {
-        var _el$41 = createElement("text");
-        setProp(_el$41, "selectable", false);
-        insert(_el$41, compactTarget);
-        effect((_$p) => setProp(_el$41, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
-        return _el$41;
       })()];
     },
     get children() {
-      return [(() => {
-        var _el$27 = createElement("text");
-        setProp(_el$27, "selectable", false);
-        insert(_el$27, () => pad(props.selected ? ">" : "", 2));
-        effect((_$p) => setProp(_el$27, "fg", props.selected ? COLOR.accent : COLOR.dim, _$p));
-        return _el$27;
-      })(), (() => {
-        var _el$28 = createElement("text");
-        setProp(_el$28, "selectable", false);
-        insert(_el$28, () => pad(shortTime(props.flow.timestamp), 9));
-        effect((_$p) => setProp(_el$28, "fg", COLOR.dim, _$p));
-        return _el$28;
-      })(), (() => {
-        var _el$29 = createElement("text");
-        setProp(_el$29, "selectable", false);
-        insert(_el$29, () => pad(presentation().kind, 7));
-        effect((_$p) => setProp(_el$29, "fg", COLOR.dim, _$p));
-        return _el$29;
-      })(), (() => {
-        var _el$30 = createElement("text");
-        setProp(_el$30, "selectable", false);
-        insert(_el$30, () => pad(presentation().method, 8));
-        effect((_$p) => setProp(_el$30, "fg", methodColor(presentation().method), _$p));
-        return _el$30;
-      })(), (() => {
-        var _el$31 = createElement("text");
-        setProp(_el$31, "selectable", false);
-        insert(_el$31, () => pad(String(props.flow.status ?? "-"), 5));
-        effect((_$p) => setProp(_el$31, "fg", statusColor(props.flow.status), _$p));
-        return _el$31;
-      })(), (() => {
-        var _el$32 = createElement("text");
-        setProp(_el$32, "selectable", false);
-        insert(_el$32, () => pad(truncate2(props.flow.host, 29), 30));
-        effect((_$p) => setProp(_el$32, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
-        return _el$32;
-      })(), (() => {
-        var _el$33 = createElement("text");
-        setProp(_el$33, "selectable", false);
-        insert(_el$33, () => pad(truncate2(props.flow.path || "/", pathWidth() - 1), pathWidth()));
-        effect((_$p) => setProp(_el$33, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
-        return _el$33;
-      })(), (() => {
-        var _el$34 = createElement("text");
-        setProp(_el$34, "selectable", false);
-        insert(_el$34, () => pad(truncate2(normalizeContentType(props.flow.contentType), 15), 16));
-        effect((_$p) => setProp(_el$34, "fg", COLOR.dim, _$p));
-        return _el$34;
-      })(), (() => {
-        var _el$35 = createElement("text");
-        setProp(_el$35, "selectable", false);
-        insert(_el$35, () => pad(formatBytes(props.flow.responseBytes ?? props.flow.requestBytes), 8));
-        effect((_$p) => setProp(_el$35, "fg", COLOR.dim, _$p));
-        return _el$35;
-      })(), (() => {
-        var _el$36 = createElement("text");
-        setProp(_el$36, "selectable", false);
-        insert(_el$36, () => formatDuration(props.flow.durationMs));
-        effect((_$p) => setProp(_el$36, "fg", COLOR.dim, _$p));
-        return _el$36;
-      })()];
+      return createComponent2(Show, {
+        get when() {
+          return props.width >= 96;
+        },
+        get fallback() {
+          return [(() => {
+            var _el$40 = createElement("text");
+            setProp(_el$40, "selectable", false);
+            insert(_el$40, () => pad(props.selected ? ">" : "", 2));
+            effect((_$p) => setProp(_el$40, "fg", props.selected ? COLOR.accent : COLOR.dim, _$p));
+            return _el$40;
+          })(), (() => {
+            var _el$41 = createElement("text");
+            setProp(_el$41, "selectable", false);
+            insert(_el$41, () => pad(presentation().kind, 7));
+            effect((_$p) => setProp(_el$41, "fg", COLOR.dim, _$p));
+            return _el$41;
+          })(), (() => {
+            var _el$42 = createElement("text");
+            setProp(_el$42, "selectable", false);
+            insert(_el$42, () => pad(presentation().method, 8));
+            effect((_$p) => setProp(_el$42, "fg", methodColor(presentation().method), _$p));
+            return _el$42;
+          })(), (() => {
+            var _el$43 = createElement("text");
+            setProp(_el$43, "selectable", false);
+            insert(_el$43, () => pad(String(props.flow.status ?? "-"), 5));
+            effect((_$p) => setProp(_el$43, "fg", statusColor(props.flow.status), _$p));
+            return _el$43;
+          })(), (() => {
+            var _el$44 = createElement("text");
+            setProp(_el$44, "selectable", false);
+            insert(_el$44, compactTarget);
+            effect((_$p) => setProp(_el$44, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
+            return _el$44;
+          })()];
+        },
+        get children() {
+          return [(() => {
+            var _el$27 = createElement("text");
+            setProp(_el$27, "selectable", false);
+            insert(_el$27, () => pad(props.selected ? ">" : "", 2));
+            effect((_$p) => setProp(_el$27, "fg", props.selected ? COLOR.accent : COLOR.dim, _$p));
+            return _el$27;
+          })(), (() => {
+            var _el$28 = createElement("text");
+            setProp(_el$28, "selectable", false);
+            insert(_el$28, () => pad(shortTime(props.flow.timestamp), 9));
+            effect((_$p) => setProp(_el$28, "fg", COLOR.dim, _$p));
+            return _el$28;
+          })(), (() => {
+            var _el$29 = createElement("text");
+            setProp(_el$29, "selectable", false);
+            insert(_el$29, () => pad(presentation().kind, 7));
+            effect((_$p) => setProp(_el$29, "fg", COLOR.dim, _$p));
+            return _el$29;
+          })(), (() => {
+            var _el$30 = createElement("text");
+            setProp(_el$30, "selectable", false);
+            insert(_el$30, () => pad(presentation().method, 8));
+            effect((_$p) => setProp(_el$30, "fg", methodColor(presentation().method), _$p));
+            return _el$30;
+          })(), (() => {
+            var _el$31 = createElement("text");
+            setProp(_el$31, "selectable", false);
+            insert(_el$31, () => pad(String(props.flow.status ?? "-"), 5));
+            effect((_$p) => setProp(_el$31, "fg", statusColor(props.flow.status), _$p));
+            return _el$31;
+          })(), (() => {
+            var _el$32 = createElement("text");
+            setProp(_el$32, "selectable", false);
+            insert(_el$32, () => pad(truncate2(props.flow.host, 29), 30));
+            effect((_$p) => setProp(_el$32, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
+            return _el$32;
+          })(), (() => {
+            var _el$33 = createElement("text");
+            setProp(_el$33, "selectable", false);
+            insert(_el$33, () => pad(truncate2(props.flow.path || "/", pathWidth() - 1), pathWidth()));
+            effect((_$p) => setProp(_el$33, "fg", props.selected ? COLOR.accent : COLOR.text, _$p));
+            return _el$33;
+          })(), (() => {
+            var _el$34 = createElement("text");
+            setProp(_el$34, "selectable", false);
+            insert(_el$34, () => pad(truncate2(normalizeContentType(props.flow.contentType), 15), 16));
+            effect((_$p) => setProp(_el$34, "fg", COLOR.dim, _$p));
+            return _el$34;
+          })(), (() => {
+            var _el$35 = createElement("text");
+            setProp(_el$35, "selectable", false);
+            insert(_el$35, () => pad(formatBytes(props.flow.responseBytes ?? props.flow.requestBytes), 8));
+            effect((_$p) => setProp(_el$35, "fg", COLOR.dim, _$p));
+            return _el$35;
+          })(), (() => {
+            var _el$36 = createElement("text");
+            setProp(_el$36, "selectable", false);
+            insert(_el$36, () => formatDuration(props.flow.durationMs));
+            effect((_$p) => setProp(_el$36, "fg", COLOR.dim, _$p));
+            return _el$36;
+          })()];
+        }
+      });
     }
   });
 }
@@ -44219,9 +44707,10 @@ function Composer() {
             const command = () => fitTerminal(option.title, commandWidth());
             const desc = () => truncateLine2(option.description ?? "", descWidth());
             return (() => {
-              var _el$9 = createElement("box"), _el$0 = createElement("text"), _el$1 = createElement("text");
+              var _el$9 = createElement("box"), _el$0 = createElement("text"), _el$1 = createElement("text"), _el$10 = createElement("text");
               insertNode(_el$9, _el$0);
               insertNode(_el$9, _el$1);
+              insertNode(_el$9, _el$10);
               setProp(_el$9, "style", {
                 flexDirection: "row"
               });
@@ -44233,17 +44722,21 @@ function Composer() {
                 composer.focus();
               });
               setProp(_el$0, "selectable", false);
-              insert(_el$0, () => `  ${command()}`);
+              insert(_el$0, () => active() ? "\u203A " : "  ");
               setProp(_el$1, "selectable", false);
-              insert(_el$1, desc);
+              insert(_el$1, command);
+              setProp(_el$10, "selectable", false);
+              insert(_el$10, desc);
               effect((_p$) => {
-                var _v$0 = active() ? COLOR.accent : COLOR.text, _v$1 = COLOR.dim;
+                var _v$0 = active() ? COLOR.accent : COLOR.dim, _v$1 = active() ? COLOR.accent : COLOR.text, _v$10 = COLOR.dim;
                 _v$0 !== _p$.e && (_p$.e = setProp(_el$0, "fg", _v$0, _p$.e));
                 _v$1 !== _p$.t && (_p$.t = setProp(_el$1, "fg", _v$1, _p$.t));
+                _v$10 !== _p$.a && (_p$.a = setProp(_el$10, "fg", _v$10, _p$.a));
                 return _p$;
               }, {
                 e: undefined,
-                t: undefined
+                t: undefined,
+                a: undefined
               });
               return _el$9;
             })();
@@ -44300,6 +44793,7 @@ var init_composer2 = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid2();
+  init_solid2();
   init_solid();
   init_solid2();
   init_store4();
@@ -44687,6 +45181,8 @@ var init_footer = __esm(() => {
 // src/agent-tui/bottom-pane/pending-input-preview.tsx
 function PendingInputPreview() {
   const tui = useTuiStore();
+  const dims = useTerminalDimensions();
+  const contentWidth = () => Math.max(1, dims().width - 4);
   return createComponent2(Show, {
     get when() {
       return tui.store.snapshot.pendingSteers.length > 0 || tui.store.snapshot.queuedPrompts.length > 0;
@@ -44703,7 +45199,10 @@ function PendingInputPreview() {
         get children() {
           return [(() => {
             var _el$2 = createElement("text");
-            insertNode(_el$2, createTextNode(`\u2022 steering at the next safe boundary`));
+            insert(_el$2, (() => {
+              var _c$ = memo2(() => dims().width >= 42);
+              return () => _c$() ? "\u2022 steering at the next safe boundary" : `\u2022 ${tui.store.snapshot.pendingSteers.length} steering`;
+            })());
             effect((_$p) => setProp(_el$2, "fg", COLOR.dim, _$p));
             return _el$2;
           })(), createComponent2(For, {
@@ -44711,20 +45210,20 @@ function PendingInputPreview() {
               return tui.store.snapshot.pendingSteers.slice(0, 3);
             },
             children: (item) => (() => {
-              var _el$8 = createElement("text");
-              insert(_el$8, () => `  \u21B3 ${truncateLine2(item.text.replace(/\s+/g, " "), 110)}`);
-              effect((_$p) => setProp(_el$8, "fg", COLOR.dim, _$p));
-              return _el$8;
+              var _el$6 = createElement("text");
+              insert(_el$6, () => `  \u21B3 ${truncateLine2(item.text.replace(/\s+/g, " "), contentWidth())}`);
+              effect((_$p) => setProp(_el$6, "fg", COLOR.dim, _$p));
+              return _el$6;
             })()
           }), createComponent2(Show, {
             get when() {
               return tui.store.snapshot.pendingSteers.length > 3;
             },
             get children() {
-              var _el$4 = createElement("text");
-              insert(_el$4, () => `  \u2026 ${tui.store.snapshot.pendingSteers.length - 3} more`);
-              effect((_$p) => setProp(_el$4, "fg", COLOR.dim, _$p));
-              return _el$4;
+              var _el$3 = createElement("text");
+              insert(_el$3, () => `  \u2026 ${tui.store.snapshot.pendingSteers.length - 3} more`);
+              effect((_$p) => setProp(_el$3, "fg", COLOR.dim, _$p));
+              return _el$3;
             }
           })];
         }
@@ -44735,29 +45234,32 @@ function PendingInputPreview() {
         },
         get children() {
           return [(() => {
-            var _el$5 = createElement("text");
-            insertNode(_el$5, createTextNode(`\u2022 queued follow-ups \xB7 \u2191 edit latest`));
-            effect((_$p) => setProp(_el$5, "fg", COLOR.dim, _$p));
-            return _el$5;
+            var _el$4 = createElement("text");
+            insert(_el$4, (() => {
+              var _c$2 = memo2(() => dims().width >= 42);
+              return () => _c$2() ? "\u2022 queued follow-ups \xB7 \u2191 edit latest" : `\u2022 ${tui.store.snapshot.queuedPrompts.length} queued \xB7 \u2191 edit`;
+            })());
+            effect((_$p) => setProp(_el$4, "fg", COLOR.dim, _$p));
+            return _el$4;
           })(), createComponent2(For, {
             get each() {
               return tui.store.snapshot.queuedPrompts.slice(0, 3);
             },
             children: (item, index) => (() => {
-              var _el$9 = createElement("text");
-              insert(_el$9, () => `  ${index() + 1}. ${truncateLine2(item.text.replace(/\s+/g, " "), 110)}`);
-              effect((_$p) => setProp(_el$9, "fg", COLOR.dim, _$p));
-              return _el$9;
+              var _el$7 = createElement("text");
+              insert(_el$7, () => `  ${index() + 1}. ${truncateLine2(item.text.replace(/\s+/g, " "), contentWidth())}`);
+              effect((_$p) => setProp(_el$7, "fg", COLOR.dim, _$p));
+              return _el$7;
             })()
           }), createComponent2(Show, {
             get when() {
               return tui.store.snapshot.queuedPrompts.length > 3;
             },
             get children() {
-              var _el$7 = createElement("text");
-              insert(_el$7, () => `  \u2026 ${tui.store.snapshot.queuedPrompts.length - 3} more`);
-              effect((_$p) => setProp(_el$7, "fg", COLOR.dim, _$p));
-              return _el$7;
+              var _el$5 = createElement("text");
+              insert(_el$5, () => `  \u2026 ${tui.store.snapshot.queuedPrompts.length - 3} more`);
+              effect((_$p) => setProp(_el$5, "fg", COLOR.dim, _$p));
+              return _el$5;
             }
           })];
         }
@@ -44774,7 +45276,6 @@ var init_pending_input_preview = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid2();
-  init_solid2();
   init_solid();
   init_store4();
   init_renderers2();
@@ -44784,15 +45285,18 @@ var init_pending_input_preview = __esm(() => {
 // src/agent-tui/bottom-pane/status-indicator.tsx
 function StatusIndicator(props) {
   const tui = useTuiStore();
+  const dims = useTerminalDimensions();
   const detail = () => {
     const value = tui.store.ui.statusDetail;
     return value && value !== "working" && !isFooterStatusDetail(value) ? ` \u2022 ${value}` : "";
   };
   const text = () => {
-    if (props.activity)
-      return `\u2022 ${props.activity} (${fmtElapsed(props.elapsed)}${detail()} \u2022 esc to interrupt)`.toLowerCase();
+    if (props.activity) {
+      const value2 = dims().width >= 56 ? `\u2022 ${props.activity} (${fmtElapsed(props.elapsed)}${detail()} \u2022 esc to interrupt)` : `\u2022 ${props.activity} ${fmtElapsed(props.elapsed)} \xB7 esc interrupt`;
+      return truncateLine2(value2.toLowerCase(), Math.max(1, dims().width));
+    }
     const value = tui.store.ui.statusDetail;
-    return (value && value !== "working" && !isFooterStatusDetail(value) ? `\u2022 ${value}` : "").toLowerCase();
+    return truncateLine2((value && value !== "working" && !isFooterStatusDetail(value) ? `\u2022 ${value}` : "").toLowerCase(), Math.max(1, dims().width));
   };
   return (() => {
     var _el$ = createElement("box"), _el$2 = createElement("text");
@@ -44812,7 +45316,9 @@ var init_status_indicator = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid2();
+  init_solid2();
   init_store4();
+  init_renderers2();
   init_theme();
   init_footer_state();
 });
@@ -44846,13 +45352,14 @@ function displayRows(matches, selectedId) {
 
 // src/agent-tui/overlays/selection-row.tsx
 function SelectionMenuHint(props) {
+  const dims = useTerminalDimensions();
   return (() => {
     var _el$ = createElement("box"), _el$2 = createElement("text");
     insertNode(_el$, _el$2);
     setProp(_el$, "style", {
       marginTop: 1
     });
-    insert(_el$2, () => `  ${props.text}`);
+    insert(_el$2, () => `  ${truncateLine2(props.text, Math.max(1, dims().width - 2))}`);
     effect((_$p) => setProp(_el$2, "fg", COLOR.dim, _$p));
     return _el$;
   })();
@@ -44917,6 +45424,7 @@ var init_selection_row = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid();
+  init_solid2();
   init_mouse();
   init_renderers2();
   init_theme();
@@ -45419,9 +45927,7 @@ function AgentsOverlay(props) {
             const status2 = () => agentStatusLine(item(), current(), now());
             const titleWidth = () => Math.max(8, props.width - terminalWidth(status2()) - 10);
             const metadata = () => item().role === "main" ? ["main thread", item().model].filter(Boolean).join(" \xB7 ") : [`${"  ".repeat(Math.max(0, item().depth - 1))}${item().lane ?? "general"}`, item().mode === "detached" ? "background" : "attached", item().model].filter(Boolean).join(" \xB7 ");
-            const select = (event) => {
-              if (!isPrimaryClick(event))
-                return;
+            const select = () => {
               const enabled = props.matches.filter((match) => !match.option.disabled);
               const index = enabled.findIndex((match) => match.option.id === row.option.id);
               if (props.frame.expandedId === row.option.id) {
@@ -45431,11 +45937,22 @@ function AgentsOverlay(props) {
               tui.actions.overlaySetIndex(index, enabled.length);
               tui.actions.agentDetailToggle(row.option.id);
             };
+            const selectClick = createPrimaryClickGesture(select);
             return (() => {
               var _el$32 = createElement("box"), _el$33 = createElement("box"), _el$34 = createElement("text"), _el$35 = createElement("text"), _el$36 = createElement("text"), _el$37 = createElement("text"), _el$38 = createElement("text");
               insertNode(_el$32, _el$33);
               insertNode(_el$32, _el$38);
-              setProp(_el$32, "onMouseUp", select);
+              spread(_el$32, mergeProps3({
+                get style() {
+                  return {
+                    width: "100%",
+                    flexDirection: "column",
+                    paddingLeft: 1,
+                    paddingRight: 1,
+                    backgroundColor: row.selected ? COLOR.panelActive : COLOR.panel
+                  };
+                }
+              }, selectClick), true);
               insertNode(_el$33, _el$34);
               insertNode(_el$33, _el$35);
               insertNode(_el$33, _el$36);
@@ -45481,27 +45998,19 @@ function AgentsOverlay(props) {
                 }
               }), null);
               effect((_p$) => {
-                var _v$13 = {
-                  width: "100%",
-                  flexDirection: "column",
-                  paddingLeft: 1,
-                  paddingRight: 1,
-                  backgroundColor: row.selected ? COLOR.panelActive : COLOR.panel
-                }, _v$14 = row.selected ? COLOR.accent : COLOR.dim, _v$15 = agentColor(item()), _v$16 = COLOR.text, _v$17 = COLOR.dim, _v$18 = COLOR.dim;
-                _v$13 !== _p$.e && (_p$.e = setProp(_el$32, "style", _v$13, _p$.e));
-                _v$14 !== _p$.t && (_p$.t = setProp(_el$34, "fg", _v$14, _p$.t));
-                _v$15 !== _p$.a && (_p$.a = setProp(_el$35, "fg", _v$15, _p$.a));
-                _v$16 !== _p$.o && (_p$.o = setProp(_el$36, "fg", _v$16, _p$.o));
-                _v$17 !== _p$.i && (_p$.i = setProp(_el$37, "fg", _v$17, _p$.i));
-                _v$18 !== _p$.n && (_p$.n = setProp(_el$38, "fg", _v$18, _p$.n));
+                var _v$13 = row.selected ? COLOR.accent : COLOR.dim, _v$14 = agentColor(item()), _v$15 = COLOR.text, _v$16 = COLOR.dim, _v$17 = COLOR.dim;
+                _v$13 !== _p$.e && (_p$.e = setProp(_el$34, "fg", _v$13, _p$.e));
+                _v$14 !== _p$.t && (_p$.t = setProp(_el$35, "fg", _v$14, _p$.t));
+                _v$15 !== _p$.a && (_p$.a = setProp(_el$36, "fg", _v$15, _p$.a));
+                _v$16 !== _p$.o && (_p$.o = setProp(_el$37, "fg", _v$16, _p$.o));
+                _v$17 !== _p$.i && (_p$.i = setProp(_el$38, "fg", _v$17, _p$.i));
                 return _p$;
               }, {
                 e: undefined,
                 t: undefined,
                 a: undefined,
                 o: undefined,
-                i: undefined,
-                n: undefined
+                i: undefined
               });
               return _el$32;
             })();
@@ -45679,6 +46188,7 @@ var init_list_overlay = __esm(() => {
   init_solid2();
   init_solid2();
   init_solid2();
+  init_solid2();
   init_solid();
   init_solid2();
   init_overlay_options();
@@ -46242,32 +46752,42 @@ function ModelProviderWizard() {
           children: (row) => {
             const selected = () => wizard().protocol === row[0];
             return (() => {
-              var _el$19 = createElement("box"), _el$20 = createElement("text"), _el$21 = createElement("text"), _el$22 = createElement("text");
+              var _el$19 = createElement("box"), _el$20 = createElement("text"), _el$21 = createElement("text");
               insertNode(_el$19, _el$20);
               insertNode(_el$19, _el$21);
-              insertNode(_el$19, _el$22);
               setProp(_el$19, "style", {
                 flexDirection: "row"
               });
-              setProp(_el$19, "onMouseUp", () => tui.actions.modelProviderWizardPatch({
-                protocol: row[0]
-              }));
+              setProp(_el$19, "onMouseUp", (event) => {
+                if (isPrimaryClick(event))
+                  tui.actions.modelProviderWizardPatch({
+                    protocol: row[0]
+                  });
+              });
               setProp(_el$20, "selectable", false);
               insert(_el$20, () => selected() ? "\u203A " : "  ");
               setProp(_el$21, "selectable", false);
               insert(_el$21, () => row[1]);
-              setProp(_el$22, "selectable", false);
-              insert(_el$22, () => `  ${row[2]}`);
+              insert(_el$19, createComponent2(Show, {
+                get when() {
+                  return dims().width >= 56;
+                },
+                get children() {
+                  var _el$22 = createElement("text");
+                  setProp(_el$22, "selectable", false);
+                  insert(_el$22, () => `  ${row[2]}`);
+                  effect((_$p) => setProp(_el$22, "fg", COLOR.dim, _$p));
+                  return _el$22;
+                }
+              }), null);
               effect((_p$) => {
-                var _v$18 = selected() ? COLOR.accent : COLOR.dim, _v$19 = COLOR.text, _v$20 = COLOR.dim;
+                var _v$18 = selected() ? COLOR.accent : COLOR.dim, _v$19 = COLOR.text;
                 _v$18 !== _p$.e && (_p$.e = setProp(_el$20, "fg", _v$18, _p$.e));
                 _v$19 !== _p$.t && (_p$.t = setProp(_el$21, "fg", _v$19, _p$.t));
-                _v$20 !== _p$.a && (_p$.a = setProp(_el$22, "fg", _v$20, _p$.a));
                 return _p$;
               }, {
                 e: undefined,
-                t: undefined,
-                a: undefined
+                t: undefined
               });
               return _el$19;
             })();
@@ -46295,7 +46815,7 @@ function ModelProviderWizard() {
     setProp(_el$8, "style", {
       marginTop: 1
     });
-    insert(_el$9, () => `  ${wizardHint(wizard().field, wizard().busy)}`);
+    insert(_el$9, () => `  ${truncateLine2(wizardHint(wizard().field, wizard().busy), Math.max(1, dims().width - 2))}`);
     effect((_p$) => {
       var _v$ = COLOR.text, _v$2 = COLOR.dim, _v$3 = COLOR.dim;
       _v$ !== _p$.e && (_p$.e = setProp(_el$3, "fg", _v$, _p$.e));
@@ -46312,7 +46832,9 @@ function ModelProviderWizard() {
 }
 function ProviderReview() {
   const tui = useTuiStore();
+  const dims = useTerminalDimensions();
   const wizard = () => tui.store.ui.modelProviderWizard;
+  const width = () => Math.max(1, dims().width - 2);
   return (() => {
     var _el$23 = createElement("box"), _el$24 = createElement("text"), _el$25 = createElement("text"), _el$26 = createElement("text"), _el$27 = createElement("text");
     insertNode(_el$23, _el$24);
@@ -46324,23 +46846,17 @@ function ProviderReview() {
       marginTop: 1,
       paddingLeft: 2
     });
-    insert(_el$24, () => wizard().id || "unnamed provider");
-    insert(_el$25, () => wizard().baseUrl || "base url missing");
-    insert(_el$26, () => `${modelProviderProtocolLabel(wizard().protocol)} \xB7 ${wizard().model || "discover models automatically"}`);
-    insert(_el$27, (() => {
-      var _c$ = memo2(() => !!wizard().apiKey);
-      return () => _c$() ? "new api key will be stored securely" : memo2(() => !!wizard().removeCredential)() ? "stored api key will be removed" : wizard().credentialStored ? "stored api key will be retained" : "no api key";
-    })());
+    insert(_el$24, () => truncateLine2(wizard().id || "unnamed provider", width()));
+    insert(_el$25, () => truncateLine2(wizard().baseUrl || "base url missing", width()));
+    insert(_el$26, () => truncateLine2(`${modelProviderProtocolLabel(wizard().protocol)} \xB7 ${wizard().model || "discover models automatically"}`, width()));
+    insert(_el$27, () => truncateLine2(wizard().apiKey ? "new api key will be stored securely" : wizard().removeCredential ? "stored api key will be removed" : wizard().credentialStored ? "stored api key will be retained" : "no api key", width()));
     insert(_el$23, createComponent2(Show, {
       get when() {
         return wizard().probe;
       },
       get children() {
         var _el$28 = createElement("text");
-        insert(_el$28, (() => {
-          var _c$2 = memo2(() => !!wizard().probe?.ok);
-          return () => _c$2() ? `probe ready \xB7 ${wizard().probe?.models.length} models \xB7 ${wizard().probe?.latencyMs}ms` : `probe failed \xB7 ${wizard().probe?.error ?? "unknown error"}`;
-        })());
+        insert(_el$28, () => truncateLine2(wizard().probe?.ok ? `probe ready \xB7 ${wizard().probe?.models.length} models \xB7 ${wizard().probe?.latencyMs}ms` : `probe failed \xB7 ${wizard().probe?.error ?? "unknown error"}`, width()));
         effect((_$p) => setProp(_el$28, "fg", wizard().probe?.ok ? COLOR.success : COLOR.error, _$p));
         return _el$28;
       }
@@ -46357,11 +46873,11 @@ function ProviderReview() {
       }
     }), null);
     effect((_p$) => {
-      var _v$21 = COLOR.text, _v$22 = COLOR.dim, _v$23 = COLOR.dim, _v$24 = COLOR.dim;
-      _v$21 !== _p$.e && (_p$.e = setProp(_el$24, "fg", _v$21, _p$.e));
-      _v$22 !== _p$.t && (_p$.t = setProp(_el$25, "fg", _v$22, _p$.t));
-      _v$23 !== _p$.a && (_p$.a = setProp(_el$26, "fg", _v$23, _p$.a));
-      _v$24 !== _p$.o && (_p$.o = setProp(_el$27, "fg", _v$24, _p$.o));
+      var _v$20 = COLOR.text, _v$21 = COLOR.dim, _v$22 = COLOR.dim, _v$23 = COLOR.dim;
+      _v$20 !== _p$.e && (_p$.e = setProp(_el$24, "fg", _v$20, _p$.e));
+      _v$21 !== _p$.t && (_p$.t = setProp(_el$25, "fg", _v$21, _p$.t));
+      _v$22 !== _p$.a && (_p$.a = setProp(_el$26, "fg", _v$22, _p$.a));
+      _v$23 !== _p$.o && (_p$.o = setProp(_el$27, "fg", _v$23, _p$.o));
       return _p$;
     }, {
       e: undefined,
@@ -46425,6 +46941,7 @@ var init_model_provider_wizard = __esm(() => {
   init_model_provider_state();
   init_theme();
   init_renderers2();
+  init_mouse();
 });
 
 // src/agent-tui/bottom-pane/model-provider-removal.tsx
@@ -46514,6 +47031,7 @@ function BottomPane() {
   const tui = useTuiStore();
   const exit = useExit();
   const composer = useComposerControl();
+  const dims = useTerminalDimensions();
   const [elapsed, setElapsed] = createSignal(0);
   let tick;
   const frame = () => tui.store.ui.overlayStack.at(-1);
@@ -46613,10 +47131,10 @@ function BottomPane() {
         return tui.store.ui.lastError;
       },
       children: (error) => (() => {
-        var _el$4 = createElement("text");
-        insert(_el$4, () => `\u2022 error \xB7 ${truncateLine2(error(), 160)}`);
-        effect((_$p) => setProp(_el$4, "fg", COLOR.error, _$p));
-        return _el$4;
+        var _el$3 = createElement("text");
+        insert(_el$3, () => `\u2022 error \xB7 ${truncateLine2(error(), Math.max(1, dims().width - 10))}`);
+        effect((_$p) => setProp(_el$3, "fg", COLOR.error, _$p));
+        return _el$3;
       })()
     }), null);
     insert(_el$, createComponent2(Show, {
@@ -46633,7 +47151,7 @@ function BottomPane() {
       },
       get children() {
         var _el$2 = createElement("text");
-        insertNode(_el$2, createTextNode(`  question pending \xB7 ctrl+q answer \xB7 chat input remains available`));
+        insert(_el$2, () => dims().width >= 64 ? "  question pending \xB7 ctrl+q answer \xB7 chat input remains available" : "  question pending \xB7 ctrl+q answer");
         effect((_$p) => setProp(_el$2, "fg", COLOR.warning, _$p));
         return _el$2;
       }
@@ -46726,57 +47244,92 @@ function BottomPane() {
 }
 function ProxyTabFooter() {
   const tui = useTuiStore();
+  const dims = useTerminalDimensions();
+  const layout = () => proxyTabFooterLayout(dims().width, tui.store.ui.proxyFilter);
   return (() => {
-    var _el$5 = createElement("box"), _el$6 = createElement("text"), _el$8 = createElement("text");
-    insertNode(_el$5, _el$6);
-    insertNode(_el$5, _el$8);
-    setProp(_el$5, "style", {
+    var _el$4 = createElement("box"), _el$5 = createElement("text"), _el$6 = createElement("text");
+    insertNode(_el$4, _el$5);
+    insertNode(_el$4, _el$6);
+    setProp(_el$4, "style", {
       height: 1,
       flexDirection: "row",
       justifyContent: "space-between",
       paddingLeft: 1,
       paddingRight: 1
     });
-    insertNode(_el$6, createTextNode(`\u2191\u2193 flow \xB7 tab detail \xB7 p/n ws msg \xB7 \u2190\u2192 filter \xB7 a/h/w tabs \xB7 ctrl+1 chat`));
-    insert(_el$8, () => `proxy \xB7 ${tui.store.ui.proxyFilter}`);
+    insert(_el$5, () => layout().left);
+    insert(_el$6, () => layout().right);
     effect((_p$) => {
       var _v$ = COLOR.dim, _v$2 = COLOR.dim;
-      _v$ !== _p$.e && (_p$.e = setProp(_el$6, "fg", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = setProp(_el$8, "fg", _v$2, _p$.t));
+      _v$ !== _p$.e && (_p$.e = setProp(_el$5, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = setProp(_el$6, "fg", _v$2, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$5;
+    return _el$4;
   })();
 }
 function CenterSurfaceFooter(props) {
+  const dims = useTerminalDimensions();
+  const layout = () => centerSurfaceFooterLayout(props.frame, dims().width);
   return (() => {
-    var _el$9 = createElement("box"), _el$0 = createElement("text"), _el$1 = createElement("text");
-    insertNode(_el$9, _el$0);
-    insertNode(_el$9, _el$1);
-    setProp(_el$9, "style", {
+    var _el$7 = createElement("box"), _el$8 = createElement("text"), _el$9 = createElement("text");
+    insertNode(_el$7, _el$8);
+    insertNode(_el$7, _el$9);
+    setProp(_el$7, "style", {
       height: 1,
       flexDirection: "row",
       justifyContent: "space-between",
       paddingLeft: 1,
       paddingRight: 1
     });
-    insert(_el$0, () => centerSurfaceFooter(props.frame).toLowerCase());
-    insert(_el$1, () => props.frame.kind.toLowerCase());
+    insert(_el$8, () => layout().left);
+    insert(_el$9, () => layout().right);
     effect((_p$) => {
       var _v$3 = COLOR.dim, _v$4 = COLOR.dim;
-      _v$3 !== _p$.e && (_p$.e = setProp(_el$0, "fg", _v$3, _p$.e));
-      _v$4 !== _p$.t && (_p$.t = setProp(_el$1, "fg", _v$4, _p$.t));
+      _v$3 !== _p$.e && (_p$.e = setProp(_el$8, "fg", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = setProp(_el$9, "fg", _v$4, _p$.t));
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$9;
+    return _el$7;
   })();
 }
+function proxyTabFooterLayout(width, filter) {
+  const hint = width >= 88 ? "\u2191\u2193 flow \xB7 tab detail \xB7 p/n ws msg \xB7 \u2190\u2192 filter \xB7 a/h/w tabs \xB7 alt+1 chat" : width >= 56 ? "alt+1 chat \xB7 \u2191\u2193 flow \xB7 tab detail \xB7 \u2190\u2192 filter" : width >= 32 ? "alt+1 chat \xB7 \u2191\u2193 flow" : "alt+1 chat";
+  return fitFooterLine(hint, [{
+    id: "proxy",
+    kind: "message",
+    text: `proxy \xB7 ${filter}`
+  }], Math.max(0, width - 2));
+}
+function centerSurfaceFooterLayout(frame, width) {
+  const hint = width >= 64 ? centerSurfaceFooter(frame).toLowerCase() : compactCenterSurfaceFooter(frame);
+  return fitFooterLine(hint, [{
+    id: "surface",
+    kind: "message",
+    text: frame.kind.toLowerCase()
+  }], Math.max(0, width - 2));
+}
+function compactCenterSurfaceFooter(frame) {
+  switch (frame.kind) {
+    case "report":
+      return "esc back \xB7 s save";
+    case "container":
+      return "esc back \xB7 t toggle \xB7 r refresh";
+    case "confirm":
+      return "esc cancel \xB7 enter confirm";
+    case "proxy_flow":
+      return "esc back \xB7 tab pane";
+    case "alert":
+    case "detail":
+      return "esc back";
+  }
+}
 var init_bottom_pane = __esm(() => {
   init_solid2();
   init_solid2();
@@ -46863,6 +47416,9 @@ ${note.text}`).join(`
       return [createComponent2(KeyboardController, {}), (() => {
         var _el$ = createElement("box"), _el$2 = createElement("box");
         insertNode(_el$, _el$2);
+        setProp(_el$, "minHeight", 0);
+        setProp(_el$, "overflow", "hidden");
+        setProp(_el$, "flexDirection", "column");
         insert(_el$, createComponent2(MainTabs, {}), _el$2);
         setProp(_el$2, "id", "main-surface-viewport");
         setProp(_el$2, "style", {
@@ -46896,13 +47452,17 @@ ${note.text}`).join(`
           })
         }));
         insert(_el$, createComponent2(BottomPane, {}), null);
-        effect((_$p) => setProp(_el$, "style", {
-          width: dims().width,
-          height: dims().height,
-          minHeight: 0,
-          overflow: "hidden",
-          flexDirection: "column"
-        }, _$p));
+        effect((_p$) => {
+          var _v$ = dims().width, _v$2 = dims().height, _v$3 = COLOR.bg;
+          _v$ !== _p$.e && (_p$.e = setProp(_el$, "width", _v$, _p$.e));
+          _v$2 !== _p$.t && (_p$.t = setProp(_el$, "height", _v$2, _p$.t));
+          _v$3 !== _p$.a && (_p$.a = setProp(_el$, "backgroundColor", _v$3, _p$.a));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined
+        });
         return _el$;
       })()];
     }
@@ -46945,10 +47505,10 @@ function MainTabs() {
     });
     insert(_el$8, () => `[2] proxy${proxyCount() ? ` (${proxyCount()})` : ""}`);
     effect((_p$) => {
-      var _v$ = active() === "chat" ? COLOR.accent : COLOR.dim, _v$2 = COLOR.dim, _v$3 = active() === "proxy" ? COLOR.accent : COLOR.dim;
-      _v$ !== _p$.e && (_p$.e = setProp(_el$4, "fg", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = setProp(_el$6, "fg", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = setProp(_el$8, "fg", _v$3, _p$.a));
+      var _v$4 = active() === "chat" ? COLOR.accent : COLOR.dim, _v$5 = COLOR.dim, _v$6 = active() === "proxy" ? COLOR.accent : COLOR.dim;
+      _v$4 !== _p$.e && (_p$.e = setProp(_el$4, "fg", _v$4, _p$.e));
+      _v$5 !== _p$.t && (_p$.t = setProp(_el$6, "fg", _v$5, _p$.t));
+      _v$6 !== _p$.a && (_p$.a = setProp(_el$8, "fg", _v$6, _p$.a));
       return _p$;
     }, {
       e: undefined,
@@ -47186,9 +47746,37 @@ __export(exports_agent_tui, {
   formatResumeHint: () => formatResumeHint,
   ensureSession: () => ensureSession,
   createRuntimePort: () => createRuntimePort,
+  createDeferredResizeHandler: () => createDeferredResizeHandler,
   SessionResolutionError: () => SessionResolutionError
 });
-import { createCliRenderer as createCliRenderer2 } from "@opentui/core";
+import { createCliRenderer as createCliRenderer2, RGBA } from "@opentui/core";
+function createDeferredResizeHandler(resize, readSize, schedule = (callback) => setTimeout(callback, 0), cancel = clearTimeout) {
+  let timer;
+  let disposed = false;
+  const onResize2 = () => {
+    if (disposed)
+      return;
+    if (timer !== undefined)
+      cancel(timer);
+    timer = schedule(() => {
+      timer = undefined;
+      if (disposed)
+        return;
+      const size = readSize();
+      if (size)
+        resize(size.width, size.height);
+    });
+  };
+  return {
+    onResize: onResize2,
+    dispose: () => {
+      disposed = true;
+      if (timer !== undefined)
+        cancel(timer);
+      timer = undefined;
+    }
+  };
+}
 async function runOpenTui(input) {
   const capabilities = input.capabilities ?? {
     compact: true,
@@ -47293,29 +47881,24 @@ async function destroyRenderer(renderer) {
   } catch {}
 }
 async function createManagedRenderer(onDestroy) {
-  const existingListeners = new Set(process.listeners("SIGWINCH"));
   const renderer = await createCliRenderer2({
     autoFocus: false,
+    backgroundColor: COLOR.bg,
     exitOnCtrlC: false,
     onDestroy
   });
-  const rendererListeners = process.listeners("SIGWINCH").filter((listener) => !existingListeners.has(listener));
-  for (const listener of rendererListeners)
-    process.off("SIGWINCH", listener);
-  if (rendererListeners.length === 0)
-    return {
-      renderer,
-      disposeResize: () => {}
-    };
-  const onResize2 = () => {
-    const size = validTerminalSize(process.stdout.columns, process.stdout.rows);
-    if (size)
-      renderer.resize(size.width, size.height);
-  };
-  process.on("SIGWINCH", onResize2);
+  const resize = createDeferredResizeHandler((width, height) => {
+    renderer.resize(width, height);
+    renderer.currentRenderBuffer.clear(RGBA.fromInts(1, 1, 1, 255));
+    renderer.requestRender();
+  }, () => validTerminalSize(process.stdout.columns, process.stdout.rows));
+  process.on("SIGWINCH", resize.onResize);
   return {
     renderer,
-    disposeResize: () => process.off("SIGWINCH", onResize2)
+    disposeResize: () => {
+      process.off("SIGWINCH", resize.onResize);
+      resize.dispose();
+    }
   };
 }
 function validTerminalSize(columns, rows) {
@@ -47387,6 +47970,7 @@ var init_agent_tui = __esm(() => {
   init_session_title();
   init_session_catalog();
   init_update_check();
+  init_theme();
   SessionResolutionError = class SessionResolutionError extends Error {
     constructor(query, workspace, sessions2) {
       const recent = sessions2.slice(0, 5).map((session) => `  ${session.id}  ${session.title?.trim() || DEFAULT_SESSION_TITLE}`).join(`
@@ -49967,5 +50551,5 @@ Examples:
 `);
 }
 
-//# debugId=231A9E4A58F7AFCB64756E2164756E21
+//# debugId=B089044398C9A98564756E2164756E21
 //# sourceMappingURL=index.js.map