@wrongstack/tui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { useReducer, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useReducer, useRef, useEffect, useMemo } from 'react';
 import { render, useApp, Box, useStdout, Static, Text, useInput } from 'ink';
 import * as path2 from 'path';
 import * as fs2 from 'fs/promises';
@@ -187,15 +187,20 @@ function padCell(text, width, align) {
   }
   return text + " ".repeat(pad);
 }
-function History({ entries, streamingText }) {
+function History({ entries, streamingText, toolStream }) {
   const { stdout } = useStdout();
   const termWidth = stdout?.columns ?? 80;
   const tail = streamingText ? tailForDisplay(streamingText, MAX_STREAM_DISPLAY_CHARS) : "";
+  const toolTail = toolStream && toolStream.text ? tailForDisplay(toolStream.text, MAX_STREAM_DISPLAY_CHARS) : "";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Static, { items: entries, children: (entry) => /* @__PURE__ */ jsx(Box, { marginBottom: entry.kind === "turn-summary" ? 1 : 0, children: /* @__PURE__ */ jsx(Entry, { entry, termWidth }) }, entry.id) }),
     tail ? /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(Text, { dimColor: true, children: "> " }),
       /* @__PURE__ */ jsx(Text, { children: tail })
+    ] }) : null,
+    toolTail ? /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: `\u25C6 ${toolStream.name} ` }),
+      /* @__PURE__ */ jsx(Text, { children: toolTail })
     ] }) : null
   ] });
 }
@@ -212,18 +217,19 @@ function tailForDisplay(text, maxChars) {
 function DiffBlock({ rows, hidden }) {
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginLeft: 4, marginTop: 0, children: [
     rows.map((row, i) => {
+      const key = i;
       if (row.kind === "hunk") {
-        return /* @__PURE__ */ jsx(Text, { color: "cyan", dimColor: true, children: row.text }, i);
+        return /* @__PURE__ */ jsx(Text, { color: "cyan", dimColor: true, children: row.text }, key);
       }
       if (row.kind === "meta") {
-        return /* @__PURE__ */ jsx(Text, { dimColor: true, children: row.text }, i);
+        return /* @__PURE__ */ jsx(Text, { dimColor: true, children: row.text }, key);
       }
       if (row.kind === "ctx") {
-        return /* @__PURE__ */ jsx(Text, { dimColor: true, children: row.text }, i);
+        return /* @__PURE__ */ jsx(Text, { dimColor: true, children: row.text }, key);
       }
       const bg = row.kind === "add" ? "green" : "red";
       const fg = row.kind === "add" ? "black" : "white";
-      return /* @__PURE__ */ jsx(Text, { backgroundColor: bg, color: fg, children: row.text }, i);
+      return /* @__PURE__ */ jsx(Text, { backgroundColor: bg, color: fg, children: row.text }, key);
     }),
     hidden > 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, italic: true, children: `  \u2026 ${hidden} more line${hidden === 1 ? "" : "s"}` }) : null
   ] });
@@ -254,15 +260,13 @@ function Entry({ entry, termWidth }) {
           ] }) : null,
           /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \xB7  ${fmtDuration(entry.durationMs)}` })
         ] }),
-        outLines.map((line, i) => {
-          const isLast = i === outLines.length - 1 && !diff;
-          const prefix = isLast ? "  \u2514\u2500 " : "  \u251C\u2500 ";
-          const errish = !entry.ok || line.startsWith("!");
-          return /* @__PURE__ */ jsxs(Text, { children: [
-            /* @__PURE__ */ jsx(Text, { dimColor: true, children: prefix }),
-            /* @__PURE__ */ jsx(Text, { color: errish ? "red" : void 0, dimColor: !errish, children: line })
-          ] }, i);
-        }),
+        outLines.map((line, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: tool output lines are static, index is stable
+          /* @__PURE__ */ jsxs(Text, { children: [
+            /* @__PURE__ */ jsx(Text, { dimColor: true, children: i === outLines.length - 1 && !diff ? "  \u2514\u2500 " : "  \u251C\u2500 " }),
+            /* @__PURE__ */ jsx(Text, { color: !entry.ok || line.startsWith("!") ? "red" : void 0, dimColor: entry.ok && !line.startsWith("!"), children: line })
+          ] }, i)
+        )),
         diff ? /* @__PURE__ */ jsx(DiffBlock, { rows: diff.rows, hidden: diff.hidden }) : null
       ] });
     }
@@ -274,6 +278,30 @@ function Entry({ entry, termWidth }) {
       return /* @__PURE__ */ jsx(Text, { color: "red", children: entry.text });
     case "turn-summary":
       return /* @__PURE__ */ jsx(Text, { dimColor: true, children: entry.text });
+    case "confirm":
+      return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, borderBottom: false, paddingX: 1, children: [
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Confirm" }),
+          /* @__PURE__ */ jsx(Text, { children: "  " }),
+          /* @__PURE__ */ jsx(Text, { bold: true, children: entry.toolName })
+        ] }),
+        entry.input && typeof entry.input === "object" ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: Object.entries(entry.input).filter(([k]) => k !== "content" && k !== "new_string").map(([k, v]) => `${k}: ${String(v).slice(0, 80)}`).join("  ") }) : null,
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
+        /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "green", children: "[\u21B5]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " yes    " }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Esc]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " no    " }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "[Ctrl+A]" }),
+          /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+            " always (",
+            entry.suggestedPattern,
+            ")    "
+          ] }),
+          /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Ctrl+D]" }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: " deny" })
+        ] }) })
+      ] });
     case "banner":
       return /* @__PURE__ */ jsx(Banner, { entry });
   }
@@ -306,6 +334,15 @@ function Banner({
             entry.model
           ] })
         ] }),
+        entry.family ? /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "      family    " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: entry.family })
+        ] }) : null,
+        entry.keyTail ? /* @__PURE__ */ jsxs(Text, { children: [
+          /* @__PURE__ */ jsx(Text, { color: "cyan", children: "      key       " }),
+          /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u25CF\u25CF\u25CF\u2026" }),
+          /* @__PURE__ */ jsx(Text, { children: entry.keyTail })
+        ] }) : null,
         /* @__PURE__ */ jsxs(Text, { children: [
           /* @__PURE__ */ jsx(Text, { color: "cyan", children: "      cwd       " }),
           /* @__PURE__ */ jsx(Text, { dimColor: true, children: cwdShort })
@@ -888,7 +925,7 @@ function scanNumberedRange(text) {
   let count = 0;
   for (const line of text.split("\n")) {
     const m = line.match(/^\s*(\d+)→/);
-    if (m && m[1]) {
+    if (m?.[1]) {
       const n = Number.parseInt(m[1], 10);
       if (Number.isFinite(n)) {
         if (first === void 0) first = n;
@@ -928,27 +965,21 @@ function Input({
   const before = value.slice(0, cursor);
   const at = value.slice(cursor, cursor + 1) || " ";
   const after = value.slice(cursor + 1);
-  const borderColor = disabled ? "red" : value.length > 0 ? "cyan" : "gray";
+  const promptColor = disabled ? "red" : "cyan";
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    placeholders.map((p, i) => /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
-      "  \u21B3 ",
-      p
-    ] }, i)),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        borderStyle: "round",
-        borderColor,
-        paddingX: 1,
-        width: "100%",
-        children: /* @__PURE__ */ jsxs(Text, { children: [
-          /* @__PURE__ */ jsx(Text, { color: "cyan", children: prompt }),
-          before,
-          /* @__PURE__ */ jsx(Text, { inverse: true, children: at }),
-          after
-        ] })
-      }
-    ),
+    placeholders.map((p, i) => (
+      // biome-ignore lint/suspicious/noArrayIndexKey: placeholders are append-only, index is stable
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "  \u21B3 ",
+        p
+      ] }, i)
+    )),
+    /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { color: promptColor, children: prompt }),
+      before,
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: at }),
+      after
+    ] }),
     hint ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint }) : null
   ] });
 }
@@ -1186,6 +1217,117 @@ function SlashMenu({ query, matches, selected }) {
     matches.length === 0 && /* @__PURE__ */ jsx(Text, { dimColor: true, children: "No matching commands" })
   ] });
 }
+function ModelPicker({
+  step,
+  providerOptions,
+  modelOptions,
+  selected,
+  pickedProviderId,
+  hint
+}) {
+  if (step === "provider") {
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: "\u2501\u2501 Switch model \u2014 Step 1/2: Pick provider \u2501\u2501" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \xB7 Enter select \xB7 Esc cancel" }),
+      providerOptions.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "(no providers with keys \u2014 add one via `wstack auth`)" }) : providerOptions.map((p, i) => /* @__PURE__ */ jsxs(Text, { color: i === selected ? "cyan" : void 0, inverse: i === selected, children: [
+        i === selected ? "\u203A " : "  ",
+        /* @__PURE__ */ jsx(Text, { bold: true, children: p.id.padEnd(28) }),
+        /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          " [",
+          p.family,
+          "]"
+        ] }),
+        /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+          "  ",
+          p.models.length,
+          " model",
+          p.models.length === 1 ? "" : "s"
+        ] })
+      ] }, p.id)),
+      hint ? /* @__PURE__ */ jsx(Text, { color: "yellow", children: hint }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs(Text, { color: "cyan", bold: true, children: [
+      "\u2501\u2501 Switch model \u2014 Step 2/2: Pick model",
+      " ",
+      "(",
+      pickedProviderId,
+      ") \u2501\u2501"
+    ] }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2191/\u2193 navigate \xB7 Enter select \xB7 Esc back \xB7 Ctrl-C cancel" }),
+    modelOptions.length === 0 ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: "(no models known for this provider)" }) : modelOptions.map((id, i) => /* @__PURE__ */ jsxs(Text, { color: i === selected ? "cyan" : void 0, inverse: i === selected, children: [
+      i === selected ? "\u203A " : "  ",
+      id
+    ] }, id)),
+    hint ? /* @__PURE__ */ jsx(Text, { color: "yellow", children: hint }) : null
+  ] });
+}
+function stringifyInput(input) {
+  if (!input || typeof input !== "object") return "";
+  const obj = input;
+  return Object.entries(obj).filter(([k]) => k !== "content" && k !== "new_string").map(([k, v]) => `${k}: ${truncate(JSON.stringify(v), 80)}`).join("  ");
+}
+function truncate(s, max) {
+  return s.length <= max ? s : `${s.slice(0, max - 1)}\u2026`;
+}
+function hasDiff(input) {
+  return Boolean(
+    input && typeof input === "object" && "diff" in input
+  );
+}
+function renderDiffLine(line) {
+  const prefix = line.startsWith("+") ? "green" : line.startsWith("-") ? "red" : line.startsWith("@@") ? "cyan" : void 0;
+  return /* @__PURE__ */ jsxs(Text, { color: prefix, children: [
+    line,
+    "\n"
+  ] }, line);
+}
+function renderDiff(diff) {
+  const lines = diff.split("\n").filter((l) => l.length > 0).slice(0, 20);
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", paddingX: 2, children: lines.map((l) => renderDiffLine(l)) });
+}
+function ConfirmPrompt({ toolName, input, suggestedPattern, onDecision }) {
+  useInput((_, key) => {
+    if (key.return) {
+      onDecision("yes");
+    } else if (key.escape) {
+      onDecision("no");
+    } else if (key.ctrl && _.toLowerCase() === "a") {
+      onDecision("always");
+    } else if (key.ctrl && _.toLowerCase() === "d") {
+      onDecision("deny");
+    }
+  });
+  const inputSummary = stringifyInput(input);
+  const showDiff = hasDiff(input);
+  const inp = input;
+  const diff = typeof inp?.diff === "string" ? inp.diff : "";
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", borderStyle: "single", borderTop: false, borderLeft: false, borderRight: false, borderBottom: false, paddingX: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Confirm" }),
+      /* @__PURE__ */ jsx(Text, { children: "  " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, children: toolName })
+    ] }),
+    inputSummary ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: inputSummary }) : null,
+    showDiff && diff ? /* @__PURE__ */ jsx(Box, { flexDirection: "column", marginY: 1, children: renderDiff(diff) }) : null,
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "row", children: /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "green", children: "[\u21B5]" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " yes    " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Esc]" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " no    " }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "[Ctrl+A]" }),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        " always (",
+        suggestedPattern,
+        ")    "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "red", children: "[Ctrl+D]" }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: " deny" })
+    ] }) })
+  ] });
+}
 var IGNORED_DIRS = /* @__PURE__ */ new Set([
   "node_modules",
   ".git",
@@ -1344,7 +1486,9 @@ function runCmd(cmd, args) {
   return new Promise((resolve) => {
     const child = spawn(cmd, args, { stdio: ["ignore", "pipe", "pipe"] });
     let out = "";
-    child.stdout.on("data", (c) => out += String(c));
+    child.stdout.on("data", (c) => {
+      out += String(c);
+    });
     child.on("error", () => resolve(null));
     child.on("exit", (code) => resolve(code === 0 ? out : null));
   });
@@ -1577,6 +1721,26 @@ function reducer(state, action) {
       }
       return state;
     }
+    case "toolStreamAppend": {
+      const cur = state.toolStream;
+      if (cur && cur.toolUseId === action.toolUseId) {
+        return {
+          ...state,
+          toolStream: { ...cur, text: cur.text + action.text }
+        };
+      }
+      return {
+        ...state,
+        toolStream: { toolUseId: action.toolUseId, name: action.name, text: action.text }
+      };
+    }
+    case "toolStreamClear": {
+      if (state.toolStream === null) return state;
+      const t = state.toolStream;
+      if (action.toolUseId !== void 0 && action.toolUseId !== t.toolUseId) return state;
+      if (action.name !== void 0 && action.toolUseId === void 0 && action.name !== t.name) return state;
+      return { ...state, toolStream: null };
+    }
     case "enqueue": {
       const item = { ...action.item, id: state.nextQueueId };
       return {
@@ -1632,6 +1796,72 @@ function reducer(state, action) {
       const entry = next === 0 ? "" : state.inputHistory[next - 1] ?? "";
       return { ...state, historyIndex: next, buffer: entry, cursor: entry.length };
     }
+    case "modelPickerOpen":
+      return {
+        ...state,
+        modelPicker: {
+          open: true,
+          step: "provider",
+          providerOptions: action.providers,
+          modelOptions: [],
+          selected: 0,
+          hint: void 0
+        }
+      };
+    case "modelPickerClose":
+      return {
+        ...state,
+        modelPicker: {
+          open: false,
+          step: "provider",
+          providerOptions: [],
+          modelOptions: [],
+          selected: 0
+        }
+      };
+    case "modelPickerMove": {
+      if (!state.modelPicker.open) return state;
+      const len = state.modelPicker.step === "provider" ? state.modelPicker.providerOptions.length : state.modelPicker.modelOptions.length;
+      if (len === 0) return state;
+      const next = (state.modelPicker.selected + action.delta + len) % len;
+      return {
+        ...state,
+        modelPicker: { ...state.modelPicker, selected: next }
+      };
+    }
+    case "modelPickerPickProvider":
+      return {
+        ...state,
+        modelPicker: {
+          ...state.modelPicker,
+          step: "model",
+          modelOptions: action.models,
+          selected: 0,
+          pickedProviderId: action.providerId,
+          hint: void 0
+        }
+      };
+    case "modelPickerBack":
+      return {
+        ...state,
+        modelPicker: {
+          ...state.modelPicker,
+          step: "provider",
+          modelOptions: [],
+          selected: 0,
+          pickedProviderId: void 0,
+          hint: void 0
+        }
+      };
+    case "modelPickerHint":
+      return {
+        ...state,
+        modelPicker: { ...state.modelPicker, hint: action.text }
+      };
+    case "confirmOpen":
+      return { ...state, confirm: action.info };
+    case "confirmClose":
+      return { ...state, confirm: null };
   }
 }
 var PASTE_THRESHOLD_CHARS = 200;
@@ -1647,10 +1877,16 @@ function App({
   yolo = false,
   appVersion,
   provider,
+  family,
+  keyTail,
+  getPickableProviders,
+  switchProviderAndModel,
   effectiveMaxContext,
   onExit
 }) {
   const { exit } = useApp();
+  const [liveModel, setLiveModel] = useState(model);
+  const [liveProvider, setLiveProvider] = useState(provider ?? "agent");
   const [state, dispatch] = useReducer(reducer, {
     entries: banner ? [
       {
@@ -1659,13 +1895,16 @@ function App({
         version: appVersion ?? "dev",
         provider: provider ?? "agent",
         model,
-        cwd: agent.ctx.cwd
+        cwd: agent.ctx.cwd,
+        family,
+        keyTail
       }
     ] : [],
     buffer: "",
     cursor: 0,
     placeholders: [],
     streamingText: "",
+    toolStream: null,
     status: "idle",
     interrupts: 0,
     hint: "",
@@ -1676,7 +1915,15 @@ function App({
     queue: [],
     nextQueueId: 1,
     inputHistory: [],
-    historyIndex: 0
+    historyIndex: 0,
+    modelPicker: {
+      open: false,
+      step: "provider",
+      providerOptions: [],
+      modelOptions: [],
+      selected: 0
+    },
+    confirm: null
   });
   const builderRef = useRef(null);
   if (builderRef.current === null) {
@@ -1890,6 +2137,23 @@ function App({
       slashRegistry.unregister("queue");
     };
   }, [slashRegistry]);
+  useEffect(() => {
+    if (!getPickableProviders || !switchProviderAndModel) return;
+    const cmd = {
+      name: "model",
+      aliases: ["provider", "switch"],
+      description: "Pick a provider + model interactively (two-step).",
+      async run() {
+        const providers = await getPickableProviders();
+        dispatch({ type: "modelPickerOpen", providers });
+        return { message: void 0 };
+      }
+    };
+    slashRegistry.register(cmd);
+    return () => {
+      slashRegistry.unregister("model");
+    };
+  }, [slashRegistry, getPickableProviders, switchProviderAndModel]);
   useEffect(() => {
     const FLUSH_MS = 100;
     const flush = () => {
@@ -1908,6 +2172,15 @@ function App({
     const offToolStart = events.on("tool.started", (e) => {
       dispatch({ type: "toolStarted", id: e.id, name: e.name });
     });
+    const offToolProgress = events.on("tool.progress", (e) => {
+      if (e.event.type !== "partial_output" || !e.event.text) return;
+      dispatch({
+        type: "toolStreamAppend",
+        toolUseId: e.id,
+        name: e.name,
+        text: e.event.text
+      });
+    });
     const offTool = events.on("tool.executed", (e) => {
       dispatch({
         type: "addEntry",
@@ -1921,6 +2194,7 @@ function App({
         }
       });
       dispatch({ type: "toolEnded", name: e.name });
+      dispatch({ type: "toolStreamClear", name: e.name });
     });
     const offRetry = events.on("provider.retry", (e) => {
       const secs = (e.delayMs / 1e3).toFixed(e.delayMs >= 1e3 ? 1 : 2);
@@ -1935,12 +2209,35 @@ function App({
         entry: { kind: "error", text: e.description }
       });
     });
+    const offConfirmNeeded = events.on("tool.confirm_needed", (e) => {
+      dispatch({
+        type: "addEntry",
+        entry: {
+          kind: "confirm",
+          toolName: e.tool.name,
+          input: e.input,
+          suggestedPattern: e.suggestedPattern
+        }
+      });
+      dispatch({
+        type: "confirmOpen",
+        info: {
+          toolUseId: e.toolUseId,
+          toolName: e.tool.name,
+          input: e.input,
+          suggestedPattern: e.suggestedPattern,
+          resolve: e.resolve
+        }
+      });
+    });
     return () => {
       offDelta();
       offToolStart();
+      offToolProgress();
       offTool();
       offRetry();
       offProvErr();
+      offConfirmNeeded();
       if (flushTimerRef.current) clearTimeout(flushTimerRef.current);
     };
   }, [events]);
@@ -1985,6 +2282,53 @@ function App({
   }, [state.interrupts, state.status, exit, onExit]);
   const handleKey = async (input, key) => {
     if (state.status === "aborting") return;
+    if (state.modelPicker.open) {
+      if (key.escape) {
+        if (state.modelPicker.step === "model") {
+          dispatch({ type: "modelPickerBack" });
+        } else {
+          dispatch({ type: "modelPickerClose" });
+        }
+        return;
+      }
+      if (key.upArrow) {
+        dispatch({ type: "modelPickerMove", delta: -1 });
+        return;
+      }
+      if (key.downArrow) {
+        dispatch({ type: "modelPickerMove", delta: 1 });
+        return;
+      }
+      if (key.return) {
+        if (state.modelPicker.step === "provider") {
+          const opt = state.modelPicker.providerOptions[state.modelPicker.selected];
+          if (!opt) return;
+          dispatch({
+            type: "modelPickerPickProvider",
+            providerId: opt.id,
+            models: opt.models
+          });
+          return;
+        }
+        const providerId = state.modelPicker.pickedProviderId;
+        const modelId = state.modelPicker.modelOptions[state.modelPicker.selected];
+        if (!providerId || !modelId) return;
+        const err = switchProviderAndModel?.(providerId, modelId);
+        if (err) {
+          dispatch({ type: "modelPickerHint", text: err });
+          return;
+        }
+        setLiveProvider(providerId);
+        setLiveModel(modelId);
+        dispatch({
+          type: "addEntry",
+          entry: { kind: "info", text: `Switched to ${providerId} / ${modelId}.` }
+        });
+        dispatch({ type: "modelPickerClose" });
+        return;
+      }
+      return;
+    }
     if (state.slashPicker.open) {
       if (key.escape) {
         dispatch({ type: "slashPickerClose" });
@@ -2118,25 +2462,26 @@ function App({
     }
     if (!input || key.ctrl || key.meta) return;
     let bracketedPaste = false;
+    let cleanInput = input;
     if (input.includes("\x1B[200~") || input.includes("\x1B[201~")) {
-      input = input.replace(/\x1b\[200~/g, "").replace(/\x1b\[201~/g, "");
+      cleanInput = input.replace(/\x1b\[200~/g, "").replace(/\x1b\[201~/g, "");
       bracketedPaste = true;
     }
-    if (bracketedPaste || input.length > PASTE_THRESHOLD_CHARS || input.includes("\n")) {
+    if (bracketedPaste || cleanInput.length > PASTE_THRESHOLD_CHARS || cleanInput.includes("\n")) {
       const builder = builderRef.current;
       if (!builder) return;
-      const ph = await builder.appendPaste(input);
+      const ph = await builder.appendPaste(cleanInput);
       if (ph) {
-        const lineCount = input.split("\n").length;
+        const lineCount = cleanInput.split("\n").length;
         dispatch({ type: "addPlaceholder", ph: `${ph} (${lineCount} lines)` });
       } else {
-        const next2 = state.buffer.slice(0, state.cursor) + input + state.buffer.slice(state.cursor);
-        dispatch({ type: "setBuffer", buffer: next2, cursor: state.cursor + input.length });
+        const next2 = state.buffer.slice(0, state.cursor) + cleanInput + state.buffer.slice(state.cursor);
+        dispatch({ type: "setBuffer", buffer: next2, cursor: state.cursor + cleanInput.length });
       }
       return;
     }
-    const next = state.buffer.slice(0, state.cursor) + input + state.buffer.slice(state.cursor);
-    dispatch({ type: "setBuffer", buffer: next, cursor: state.cursor + input.length });
+    const next = state.buffer.slice(0, state.cursor) + cleanInput + state.buffer.slice(state.cursor);
+    dispatch({ type: "setBuffer", buffer: next, cursor: state.cursor + cleanInput.length });
   };
   const runBlocks = async (blocks) => {
     const ctrl = new AbortController();
@@ -2149,7 +2494,7 @@ function App({
       const result = await agent.run(blocks, { signal: ctrl.signal });
       const streamed = streamingTextRef.current;
       const text = result.status === "done" && result.finalText ? result.finalText : streamed;
-      if (text && text.trim()) {
+      if (text?.trim()) {
         dispatch({ type: "addEntry", entry: { kind: "assistant", text } });
       }
       streamingTextRef.current = "";
@@ -2162,12 +2507,11 @@ function App({
       if (result.status === "aborted") {
         dispatch({ type: "addEntry", entry: { kind: "warn", text: "Aborted." } });
       } else if (result.status === "failed") {
+        const err = result.error;
+        const text2 = err ? `Failed [${err.severity}${err.recoverable ? ", recoverable" : ""}]: ${err.describe()}` : "Failed.";
         dispatch({
           type: "addEntry",
-          entry: {
-            kind: "error",
-            text: `Failed: ${result.error instanceof Error ? result.error.message : String(result.error)}`
-          }
+          entry: { kind: "error", text: text2 }
         });
       } else if (result.status === "max_iterations") {
         dispatch({
@@ -2215,6 +2559,10 @@ function App({
         if (res?.message) {
           dispatch({ type: "addEntry", entry: { kind: "info", text: res.message } });
         }
+        const ctxModel = agent.ctx.model;
+        if (ctxModel && ctxModel !== liveModel) setLiveModel(ctxModel);
+        const ctxProviderId = agent.ctx.provider?.id;
+        if (ctxProviderId && ctxProviderId !== liveProvider) setLiveProvider(ctxProviderId);
         if (res?.exit) {
           exit();
           onExit(0);
@@ -2253,7 +2601,7 @@ function App({
     return "";
   }, [state.buffer, state.status, state.picker.open]);
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(History, { entries: state.entries, streamingText: state.streamingText }),
+    /* @__PURE__ */ jsx(History, { entries: state.entries, streamingText: state.streamingText, toolStream: state.toolStream }),
     /* @__PURE__ */ jsx(
       Input,
       {
@@ -2281,10 +2629,30 @@ function App({
         selected: state.slashPicker.selected
       }
     ) : null,
+    state.modelPicker.open ? /* @__PURE__ */ jsx(
+      ModelPicker,
+      {
+        step: state.modelPicker.step,
+        providerOptions: state.modelPicker.providerOptions,
+        modelOptions: state.modelPicker.modelOptions,
+        selected: state.modelPicker.selected,
+        pickedProviderId: state.modelPicker.pickedProviderId,
+        hint: state.modelPicker.hint
+      }
+    ) : null,
+    state.confirm ? /* @__PURE__ */ jsx(
+      ConfirmPrompt,
+      {
+        toolName: state.confirm.toolName,
+        input: state.confirm.input,
+        suggestedPattern: state.confirm.suggestedPattern,
+        onDecision: state.confirm.resolve
+      }
+    ) : null,
     /* @__PURE__ */ jsx(
       StatusBar,
       {
-        model,
+        model: `${liveProvider}/${liveModel}`,
         state: state.status,
         tokenCounter,
         hint: renderRunningTools(state.runningTools) || state.hint,
@@ -2403,6 +2771,10 @@ async function runTui(opts) {
           yolo: opts.yolo,
           appVersion: opts.appVersion,
           provider: opts.provider,
+          family: opts.family,
+          keyTail: opts.keyTail,
+          getPickableProviders: opts.getPickableProviders,
+          switchProviderAndModel: opts.switchProviderAndModel,
           effectiveMaxContext: opts.effectiveMaxContext,
           onExit
         }),