claudish 7.2.0 → 7.3.0

package/dist/index.js

@@ -33157,7 +33157,7 @@ var init_vision_proxy = __esm(() => {
 });
 
 // src/version.ts
-var VERSION = "7.2.0";
+var VERSION = "7.3.0";
 
 // src/telemetry.ts
 var exports_telemetry = {};
@@ -54328,23 +54328,34 @@ async function probeLink(proxyUrl, link, timeoutMs) {
       signal: AbortSignal.timeout(timeoutMs)
     });
   } catch (e) {
-    const latencyMs2 = Date.now() - startedAt;
+    const latencyMs = Date.now() - startedAt;
     const name = e?.name || "";
     const msg = String(e?.message || e);
     if (name === "TimeoutError" || name === "AbortError" || /timeout/i.test(msg)) {
-      return { state: "timeout", latencyMs: latencyMs2, errorMessage: msg };
+      return { state: "timeout", latencyMs, errorMessage: msg };
     }
-    return { state: "network-error", latencyMs: latencyMs2, errorMessage: msg };
+    return { state: "network-error", latencyMs, errorMessage: msg };
   }
-  const latencyMs = Date.now() - startedAt;
+  const ttfbMs = Date.now() - startedAt;
   if (!response.ok) {
     const body = await safeReadBody(response);
-    return annotateOAuthHint(classifyHttpError(response.status, body, latencyMs), link.provider, isOAuth);
-  }
-  const streamResult = await consumeProbeStream(response, timeoutMs);
+    return annotateOAuthHint(classifyHttpError(response.status, body, ttfbMs), link.provider, isOAuth);
+  }
+  const streamResult = await consumeProbeStream(response, timeoutMs, startedAt);
+  const totalMs = Date.now() - startedAt;
+  let timing;
+  if (streamResult.state === "live" && streamResult.ttftMs !== undefined && !streamResult.truncated) {
+    const ttftMs = streamResult.ttftMs;
+    const tokens = streamResult.tokens ?? 0;
+    const streamMs = Math.max(STREAM_MS_FLOOR, totalMs - ttftMs);
+    const tokensPerSec = tokens > 0 ? tokens / streamMs * 1000 : 0;
+    timing = { ttfbMs, ttftMs, totalMs, tokens, tokensPerSec };
+  }
+  const { ttftMs: _ttft, tokens: _tok, truncated: _trunc, ...rest } = streamResult;
   return annotateOAuthHint({
-    ...streamResult,
-    latencyMs: Date.now() - startedAt
+    ...rest,
+    latencyMs: totalMs,
+    timing
   }, link.provider, isOAuth);
 }
 function annotateOAuthHint(result, provider, isOAuth) {
@@ -54428,7 +54439,7 @@ function extractErrorMessage(body) {
     return;
   return trimmed.length > 160 ? `${trimmed.slice(0, 157)}...` : trimmed;
 }
-async function consumeProbeStream(response, timeoutMs) {
+async function consumeProbeStream(response, timeoutMs, startedAt) {
   const body = response.body;
   if (!body) {
     return { state: "error", errorMessage: "empty response body" };
@@ -54437,11 +54448,19 @@ async function consumeProbeStream(response, timeoutMs) {
   const decoder = new TextDecoder;
   let buffered = "";
   const deadline = Date.now() + timeoutMs;
+  let ttftMs;
+  let sawContent = false;
+  let textChars = 0;
+  let reportedTokens;
+  let errorVerdict = null;
+  let completed = false;
   try {
     while (Date.now() < deadline) {
       const { value, done } = await reader.read();
-      if (done)
+      if (done) {
+        completed = true;
         break;
+      }
       buffered += decoder.decode(value, { stream: true });
       const events = buffered.split(`
 
@@ -54449,29 +54468,71 @@ async function consumeProbeStream(response, timeoutMs) {
       buffered = events.pop() ?? "";
       for (const event of events) {
         const verdict = interpretSseEvent(event);
-        if (verdict === "live") {
-          try {
-            await reader.cancel();
-          } catch {}
-          return { state: "live" };
+        if (verdict && typeof verdict === "object" && verdict.state !== "live") {
+          errorVerdict = verdict;
+          break;
         }
-        if (verdict && verdict.state !== "live") {
-          try {
-            await reader.cancel();
-          } catch {}
-          return verdict;
+        const acct = accountStreamEvent(event);
+        if (acct.contentDelta) {
+          if (ttftMs === undefined)
+            ttftMs = Date.now() - startedAt;
+          sawContent = true;
         }
+        if (acct.textChars)
+          textChars += acct.textChars;
+        if (acct.outputTokens !== undefined)
+          reportedTokens = acct.outputTokens;
       }
+      if (errorVerdict)
+        break;
     }
   } catch (e) {
-    return {
-      state: "network-error",
-      errorMessage: String(e?.message || e)
-    };
+    if (!sawContent) {
+      return { state: "network-error", errorMessage: String(e?.message || e) };
+    }
+  } finally {
+    try {
+      await reader.cancel();
+    } catch {}
   }
+  if (errorVerdict)
+    return errorVerdict;
+  if (sawContent) {
+    const tokens = reportedTokens ?? Math.max(1, Math.round(textChars / 4));
+    return { state: "live", ttftMs, tokens, truncated: !completed };
+  }
+  return { state: "error", errorMessage: "stream ended without content" };
+}
+function accountStreamEvent(rawEvent) {
+  let dataPayload = "";
+  for (const line of rawEvent.split(`
+`)) {
+    if (line.startsWith("data:"))
+      dataPayload += line.slice(5).trim();
+  }
+  if (!dataPayload || dataPayload === "[DONE]") {
+    return { contentDelta: false, textChars: 0 };
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(dataPayload);
+  } catch {
+    return { contentDelta: false, textChars: 0 };
+  }
+  let textChars = 0;
+  let contentDelta = false;
+  const text = parsed?.delta?.text ?? (Array.isArray(parsed?.choices) ? parsed.choices[0]?.delta?.content : undefined);
+  if (typeof text === "string" && text.length > 0) {
+    contentDelta = true;
+    textChars = text.length;
+  } else if (parsed?.type === "content_block_delta" || parsed?.type === "content_block_start") {
+    contentDelta = true;
+  }
+  const outputTokens = parsed?.usage?.output_tokens ?? parsed?.message?.usage?.output_tokens ?? parsed?.usage?.completion_tokens;
   return {
-    state: "error",
-    errorMessage: "stream ended without content"
+    contentDelta,
+    textChars,
+    outputTokens: typeof outputTokens === "number" ? outputTokens : undefined
   };
 }
 function interpretSseEvent(rawEvent) {
@@ -54562,7 +54623,7 @@ function isReadyState(state) {
 function isFailureState(state) {
   return state === "auth-failed" || state === "model-not-found" || state === "rate-limited" || state === "server-error" || state === "timeout" || state === "network-error" || state === "error";
 }
-var OAUTH_PROVIDERS2, PROBE_PROMPT = "ping", PROBE_MAX_TOKENS = 1;
+var STREAM_MS_FLOOR = 50, OAUTH_PROVIDERS2, PROBE_PROMPT = "Count from one to twenty in words, one per line.", PROBE_MAX_TOKENS = 64;
 var init_probe_live = __esm(() => {
   OAUTH_PROVIDERS2 = new Set(["vertex", "gemini-codeassist"]);
 });
@@ -54583,7 +54644,108 @@ var init_probe_runner = __esm(() => {
 
 // src/tui/theme.ts
 import { createTextAttributes } from "@opentui/core";
-var C, bold, A;
+function latencyBucket(ms) {
+  const v = Math.max(0, ms);
+  for (const b of LATENCY_BUCKETS) {
+    if (v < b.maxMs)
+      return b;
+  }
+  return LATENCY_BUCKETS[LATENCY_BUCKETS.length - 1];
+}
+function formatLatency(ms) {
+  if (ms < 1000)
+    return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+function latencyBg(ms) {
+  return latencyBucket(ms).hex;
+}
+function latencyBgAnsi(ms) {
+  const hex3 = latencyBucket(ms).hex;
+  const r = parseInt(hex3.slice(1, 3), 16);
+  const g = parseInt(hex3.slice(3, 5), 16);
+  const b = parseInt(hex3.slice(5, 7), 16);
+  return `\x1B[48;2;${r};${g};${b}m`;
+}
+function hexToAnsiBg(hex3) {
+  const r = parseInt(hex3.slice(1, 3), 16);
+  const g = parseInt(hex3.slice(3, 5), 16);
+  const b = parseInt(hex3.slice(5, 7), 16);
+  return `\x1B[48;2;${r};${g};${b}m`;
+}
+function hexToAnsiFg(hex3) {
+  const r = parseInt(hex3.slice(1, 3), 16);
+  const g = parseInt(hex3.slice(3, 5), 16);
+  const b = parseInt(hex3.slice(5, 7), 16);
+  return `\x1B[38;2;${r};${g};${b}m`;
+}
+function throughputFg(tokensPerSec) {
+  if (tokensPerSec >= 100)
+    return C.brightGreen;
+  if (tokensPerSec >= 40)
+    return C.orange;
+  return "#9e2b2b";
+}
+function timelineBarCells(totalMs, maxTotalMs, barWidth) {
+  if (barWidth <= 0)
+    return 0;
+  const denom = maxTotalMs > 0 ? maxTotalMs : 1;
+  const raw2 = Math.round(barWidth * Math.max(0, totalMs) / denom);
+  return Math.min(barWidth, Math.max(1, raw2));
+}
+function splitStageCells(ttfbMs, ttftMs, totalMs, barCells) {
+  const net = Math.max(0, ttfbMs);
+  const srv = Math.max(0, ttftMs - ttfbMs);
+  const str = Math.max(0, totalMs - ttftMs);
+  const durations = [net, srv, str];
+  const sum = net + srv + str;
+  if (barCells <= 0)
+    return { network: 0, server: 0, streaming: 0 };
+  if (sum <= 0) {
+    return { network: barCells, server: 0, streaming: 0 };
+  }
+  const exact = durations.map((d) => barCells * d / sum);
+  const floors = exact.map((e) => Math.floor(e));
+  let used = floors[0] + floors[1] + floors[2];
+  let leftover = barCells - used;
+  const remainders = exact.map((e, i) => ({ i, rem: e - Math.floor(e) })).sort((a, b) => b.rem - a.rem);
+  for (let k = 0;k < leftover; k++) {
+    floors[remainders[k % 3].i] += 1;
+  }
+  if (barCells >= 3) {
+    for (let i = 0;i < 3; i++) {
+      if (durations[i] > 0 && floors[i] === 0) {
+        let donor = 0;
+        for (let j = 1;j < 3; j++) {
+          if (floors[j] > floors[donor])
+            donor = j;
+        }
+        if (floors[donor] > 1) {
+          floors[donor] -= 1;
+          floors[i] += 1;
+        }
+      }
+    }
+  }
+  used = floors[0] + floors[1] + floors[2];
+  leftover = barCells - used;
+  if (leftover !== 0) {
+    let big = 0;
+    for (let j = 1;j < 3; j++)
+      if (durations[j] > durations[big])
+        big = j;
+    floors[big] = Math.max(0, floors[big] + leftover);
+  }
+  return { network: floors[0], server: floors[1], streaming: floors[2] };
+}
+function tokBarCells(tokensPerSec, maxTokPerSec, tokWidth) {
+  if (tokWidth <= 0)
+    return 0;
+  const denom = maxTokPerSec > 0 ? maxTokPerSec : 1;
+  const raw2 = Math.round(tokWidth * Math.max(0, tokensPerSec) / denom);
+  return Math.min(tokWidth, Math.max(0, raw2));
+}
+var C, bold, A, LATENCY_BUCKETS, latencyFg = "#ffffff", LATENCY_FG_ANSI = "\x1B[38;2;255;255;255m", ANSI_RESET = "\x1B[0m", STAGE_BG, STAGE_FG, STAGE_BG_ANSI;
 var init_theme2 = __esm(() => {
   C = {
     bg: "#000000",
@@ -54610,17 +54772,42 @@ var init_theme2 = __esm(() => {
     tabActiveFg: "#ffffff",
     tabInactiveFg: "#0088ff",
     pillKeyBg: "#2d6e3e",
-    pillOauthBg: "#1f6d75"
+    pillOauthBg: "#1f6d75",
+    chipKeyBg: "#3a3a3a",
+    chipLabelBg: "#222222"
   };
   bold = createTextAttributes({ bold: true });
   A = {
     bold,
     boldIf: (enabled) => enabled ? bold : undefined
   };
+  LATENCY_BUCKETS = [
+    { maxMs: 500, hex: "#1f8f3b" },
+    { maxMs: 1000, hex: "#2d6e3e" },
+    { maxMs: 3000, hex: "#8a7d1e" },
+    { maxMs: 6000, hex: "#b5651d" },
+    { maxMs: Infinity, hex: "#9e2b2b" }
+  ];
+  STAGE_BG = {
+    network: "#00b3c4",
+    server: "#2563ff",
+    streaming: "#ffcc00"
+  };
+  STAGE_FG = {
+    network: C.cyan,
+    server: C.blue,
+    streaming: C.yellow
+  };
+  STAGE_BG_ANSI = {
+    network: hexToAnsiBg(STAGE_BG.network),
+    server: hexToAnsiBg(STAGE_BG.server),
+    streaming: hexToAnsiBg(STAGE_BG.streaming)
+  };
 });
 
 // src/probe/probe-tui-app.tsx
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { jsxDEV, Fragment } from "@opentui/react/jsx-dev-runtime";
 
 class ProbeStore {
@@ -54637,6 +54824,12 @@ class ProbeStore {
     for (const fn of this.listeners)
       fn();
   }
+  setResults(results) {
+    this.setState((prev) => ({ ...prev, results, phase: "done" }));
+  }
+  setActiveTab(tab) {
+    this.setState((prev) => ({ ...prev, activeTab: tab }));
+  }
   subscribe(fn) {
     this.listeners.add(fn);
     return () => {
@@ -54659,6 +54852,61 @@ function useAnimationFrame(active) {
   }, [active]);
   return frame;
 }
+function deriveLayout(width) {
+  if (width < 60) {
+    return { barWidth: 0, tokWidth: 0, showBreakdown: false, pillFallback: true };
+  }
+  if (width < 80) {
+    return {
+      barWidth: TIMELINE_BAR_NARROW,
+      tokWidth: 0,
+      showBreakdown: false,
+      pillFallback: false
+    };
+  }
+  if (width < 100) {
+    return {
+      barWidth: TIMELINE_BAR_FULL,
+      tokWidth: 0,
+      showBreakdown: true,
+      pillFallback: false
+    };
+  }
+  return {
+    barWidth: TIMELINE_BAR_FULL,
+    tokWidth: TOK_BAR_FULL,
+    showBreakdown: true,
+    pillFallback: false
+  };
+}
+function computeRowWidth(layout, maxNameLen) {
+  let w = 4 + 5 + 2 + maxNameLen + 2;
+  if (layout.pillFallback) {
+    w += TOTAL_COL + 2 + 25;
+    return w;
+  }
+  w += layout.barWidth + 2 + TOTAL_COL;
+  if (layout.showBreakdown) {
+    w += BREAKDOWN_COL;
+  } else {
+    w += 2;
+  }
+  if (layout.tokWidth > 0) {
+    w += layout.tokWidth + 1;
+  }
+  w += TOK_VALUE_COL;
+  return w;
+}
+function padStartSafe(s, n) {
+  if (s.length >= n)
+    return s.slice(s.length - n);
+  return " ".repeat(n - s.length) + s;
+}
+function breakdownNum(ms) {
+  if (ms >= 1000)
+    return formatLatency(ms);
+  return `${Math.round(Math.max(0, ms))}`;
+}
 function formatElapsed(ms) {
   const seconds = Math.floor(ms / 1000);
   const mins = Math.floor(seconds / 60);
@@ -54743,7 +54991,7 @@ function Banner() {
     ]
   }, undefined, true, undefined, this);
 }
-function StepIndicator({ step }) {
+function StepLine({ steps }) {
   const iconMap = {
     pending: "\u25CB",
     running: "\u25CC",
@@ -54756,103 +55004,267 @@ function StepIndicator({ step }) {
     done: C.green,
     error: C.red
   };
+  if (steps.length === 0)
+    return /* @__PURE__ */ jsxDEV("text", {
+      children: " "
+    }, undefined, false, undefined, this);
+  const active = steps.find((s) => s.status === "running" || s.status === "error") ?? steps[steps.length - 1];
   return /* @__PURE__ */ jsxDEV("text", {
     children: [
       /* @__PURE__ */ jsxDEV("span", {
         children: "  "
       }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV("span", {
-        fg: colorMap[step.status],
+      steps.map((s, i) => /* @__PURE__ */ jsxDEV("span", {
+        fg: colorMap[s.status],
         children: [
-          iconMap[step.status],
-          " ",
-          step.name
+          iconMap[s.status],
+          i < steps.length - 1 ? " " : ""
         ]
-      }, undefined, true, undefined, this)
+      }, `${s.name}-${i}`, true, undefined, this)),
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "  "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: colorMap[active.status],
+        children: active.name
+      }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
 function ProgressBar({
   link,
   animFrame,
-  maxNameLen
+  maxNameLen,
+  layout,
+  maxTotalMs,
+  maxTokPerSec,
+  isRunFastest
 }) {
   const elapsedMs = link.status === "waiting" ? 0 : link.startTime ? (link.endTime ?? Date.now()) - link.startTime : 0;
   const elapsed = formatElapsed(elapsedMs);
-  let bar;
-  let barColor;
-  let statusText;
-  let statusColor;
-  switch (link.status) {
-    case "waiting":
-      bar = "\u2591".repeat(BAR_WIDTH);
-      barColor = C.dim;
-      statusText = "\u23F3 waiting...";
-      statusColor = C.dim;
-      break;
-    case "probing": {
-      let animated = "";
-      for (let i = 0;i < BAR_WIDTH; i++) {
-        animated += ANIM_FRAMES[(animFrame + i) % ANIM_FRAMES.length];
-      }
-      bar = animated;
-      barColor = C.cyan;
-      statusText = "probing...";
-      statusColor = C.cyan;
-      break;
-    }
-    case "live": {
-      const latency = link.endTime && link.startTime ? link.endTime - link.startTime : 0;
-      bar = "\u2588".repeat(BAR_WIDTH);
-      barColor = C.green;
-      statusText = `\u2713 live \xB7 ${latency}ms`;
-      statusColor = C.green;
-      break;
-    }
-    case "failed":
-      bar = "\u2717".repeat(BAR_WIDTH);
-      barColor = C.red;
-      statusText = `\u2717 ${stripAnsi2(link.error || "failed")}`;
-      statusColor = C.red;
-      break;
-  }
   const displayName = padEndSafe(link.displayName, maxNameLen);
-  return /* @__PURE__ */ jsxDEV("text", {
+  const prefix = /* @__PURE__ */ jsxDEV(Fragment, {
     children: [
       /* @__PURE__ */ jsxDEV("span", {
         fg: C.dim,
         children: `    ${elapsed}  `
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
-        fg: barColor,
-        children: bar
+        fg: C.fg,
+        children: displayName
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
         fg: C.dim,
         children: "  "
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  if (layout.pillFallback) {
+    if (link.status === "live") {
+      const latency = link.timing?.totalMs ?? elapsedMs;
+      return /* @__PURE__ */ jsxDEV("text", {
+        children: [
+          prefix,
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.green,
+            children: "\u2713 live \xB7 "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: latencyFg,
+            bg: latencyBg(latency),
+            children: ` ${formatLatency(latency)} `
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this);
+    }
+    return /* @__PURE__ */ jsxDEV("text", {
+      children: [
+        prefix,
+        renderNonLiveStatus(link, false)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  if (link.status !== "live" || !link.timing) {
+    return /* @__PURE__ */ jsxDEV("text", {
+      children: [
+        prefix,
+        renderTimelineSlot(link, animFrame, layout.barWidth),
+        /* @__PURE__ */ jsxDEV("span", {
+          fg: C.dim,
+          children: "  "
+        }, undefined, false, undefined, this),
+        renderNonLiveStatus(link, true)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const t = link.timing;
+  const barCells = timelineBarCells(t.totalMs, maxTotalMs, layout.barWidth);
+  const stages = splitStageCells(t.ttfbMs, t.ttftMs, t.totalMs, barCells);
+  const trackCells = Math.max(0, layout.barWidth - barCells);
+  const netMs = Math.max(0, t.ttfbMs);
+  const srvMs = Math.max(0, t.ttftMs - t.ttfbMs);
+  const strMs = Math.max(0, t.totalMs - t.ttftMs);
+  const tokColor = throughputFg(t.tokensPerSec);
+  const tokCells = layout.tokWidth > 0 ? tokBarCells(t.tokensPerSec, maxTokPerSec, layout.tokWidth) : 0;
+  const tokTrack = Math.max(0, layout.tokWidth - tokCells);
+  const tokValue = padStartSafe(`${Math.round(t.tokensPerSec)} t/s`, TOK_VALUE_COL);
+  const netStr = padStartSafe(breakdownNum(netMs), STAGE_NUM_W);
+  const srvStr = padStartSafe(breakdownNum(srvMs), STAGE_NUM_W);
+  const strStr = padStartSafe(breakdownNum(strMs), STAGE_NUM_W);
+  return /* @__PURE__ */ jsxDEV("text", {
+    children: [
+      prefix,
+      stages.network > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.network,
+        children: " ".repeat(stages.network)
+      }, undefined, false, undefined, this),
+      stages.server > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.server,
+        children: " ".repeat(stages.server)
+      }, undefined, false, undefined, this),
+      stages.streaming > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.streaming,
+        children: " ".repeat(stages.streaming)
+      }, undefined, false, undefined, this),
+      trackCells > 0 && /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: TRACK_CHAR.repeat(trackCells)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
-        fg: C.fg,
-        children: displayName
+        fg: C.dim,
+        children: "  "
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
+        fg: C.white,
+        children: padStartSafe(formatLatency(t.totalMs), TOTAL_COL)
+      }, undefined, false, undefined, this),
+      layout.showBreakdown && /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  net "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.network,
+            children: netStr
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " srv "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.server,
+            children: srvStr
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " str "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.streaming,
+            children: strStr
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      layout.tokWidth > 0 && /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  "
+          }, undefined, false, undefined, this),
+          tokCells > 0 && /* @__PURE__ */ jsxDEV("span", {
+            fg: tokColor,
+            children: BAR_FILL.repeat(tokCells)
+          }, undefined, false, undefined, this),
+          tokTrack > 0 && /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: TRACK_CHAR.repeat(tokTrack)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " "
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      layout.tokWidth === 0 && /* @__PURE__ */ jsxDEV("span", {
         fg: C.dim,
         children: "  "
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("span", {
-        fg: statusColor,
-        children: statusText
+        fg: tokColor,
+        children: tokValue
+      }, undefined, false, undefined, this),
+      isRunFastest && /* @__PURE__ */ jsxDEV("span", {
+        fg: C.brightGreen,
+        children: " \u25CF"
       }, undefined, false, undefined, this)
     ]
   }, undefined, true, undefined, this);
 }
+function renderTimelineSlot(link, animFrame, barWidth) {
+  if (barWidth <= 0)
+    return null;
+  switch (link.status) {
+    case "probing": {
+      let animated = "";
+      for (let i = 0;i < barWidth; i++) {
+        animated += ANIM_FRAMES[(animFrame + i) % ANIM_FRAMES.length];
+      }
+      return /* @__PURE__ */ jsxDEV("span", {
+        fg: C.cyan,
+        children: animated
+      }, undefined, false, undefined, this);
+    }
+    case "failed":
+      return /* @__PURE__ */ jsxDEV("span", {
+        fg: C.red,
+        children: padEndSafe(`\u2717 ${stripAnsi2(link.error || "failed")}`, barWidth)
+      }, undefined, false, undefined, this);
+    case "waiting":
+    default:
+      return /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "\u2591".repeat(barWidth)
+      }, undefined, false, undefined, this);
+  }
+}
+function renderNonLiveStatus(link, hasSlot) {
+  switch (link.status) {
+    case "probing": {
+      const elapsedMs = link.startTime ? Date.now() - link.startTime : 0;
+      return /* @__PURE__ */ jsxDEV("span", {
+        fg: C.cyan,
+        children: `\u23F3 probing ${formatElapsed(elapsedMs)}`
+      }, undefined, false, undefined, this);
+    }
+    case "failed":
+      return hasSlot ? /* @__PURE__ */ jsxDEV("span", {
+        fg: C.red,
+        children: "\u2717"
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+        fg: C.red,
+        children: `\u2717 ${stripAnsi2(link.error || "failed")}`
+      }, undefined, false, undefined, this);
+    case "waiting":
+    default:
+      return /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "\u23F3 waiting\u2026"
+      }, undefined, false, undefined, this);
+  }
+}
 function ModelGroup({
   model,
   links,
   animFrame,
   maxNameLen,
   rowWidth,
-  isLast
+  isLast,
+  layout,
+  maxTotalMs,
+  maxTokPerSec,
+  fastestLinkId
 }) {
   const headerWidth = rowWidth - 2;
   const totalPad = Math.max(0, headerWidth - model.length);
@@ -54884,14 +55296,500 @@ function ModelGroup({
       links.map((link) => /* @__PURE__ */ jsxDEV(ProgressBar, {
         link,
         animFrame,
-        maxNameLen
+        maxNameLen,
+        layout,
+        maxTotalMs,
+        maxTokPerSec,
+        isRunFastest: fastestLinkId === link.id
       }, link.id, false, undefined, this))
     ]
   }, undefined, true, undefined, this);
 }
-function ProbeApp({ store }) {
+function TabBar({ activeTab }) {
+  const tab = (label, active) => /* @__PURE__ */ jsxDEV("span", {
+    bg: active ? C.tabActiveBg : C.tabInactiveBg,
+    fg: active ? C.tabActiveFg : C.tabInactiveFg,
+    attributes: active ? A.bold : undefined,
+    children: `  ${label}  `
+  }, undefined, false, undefined, this);
+  return /* @__PURE__ */ jsxDEV("box", {
+    flexDirection: "column",
+    paddingTop: 1,
+    paddingBottom: 1,
+    children: /* @__PURE__ */ jsxDEV("text", {
+      children: [
+        /* @__PURE__ */ jsxDEV("span", {
+          fg: C.dim,
+          children: "  "
+        }, undefined, false, undefined, this),
+        tab("1 Leaderboard", activeTab === "leaderboard"),
+        /* @__PURE__ */ jsxDEV("span", {
+          children: " "
+        }, undefined, false, undefined, this),
+        tab("2 Details", activeTab === "details")
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function Legend({ rowWidth }) {
+  const ruleWidth = Math.max(1, Math.min(rowWidth, 120));
+  return /* @__PURE__ */ jsxDEV("box", {
+    flexDirection: "column",
+    children: [
+      /* @__PURE__ */ jsxDEV("text", {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            bg: STAGE_BG.network,
+            children: "  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.network,
+            children: " net "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            bg: STAGE_BG.server,
+            children: "  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.server,
+            children: " srv "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            bg: STAGE_BG.streaming,
+            children: "  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.streaming,
+            children: " str "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "\xB7\xB7 idle  \xB7  bar = total time (shared scale) \xB7 tok/s color = absolute"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("text", {
+        children: /* @__PURE__ */ jsxDEV("span", {
+          fg: C.dim,
+          children: "  " + "\u2500".repeat(ruleWidth)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function formatContextWindow(ctx) {
+  if (ctx <= 0)
+    return "0";
+  if (ctx >= 1e6)
+    return `${(ctx / 1e6).toFixed(1)}M`;
+  return `${Math.round(ctx / 1000)}K`;
+}
+function ruleKeyForModel(model) {
+  const at = model.indexOf("@");
+  return at >= 0 ? model.slice(at + 1) : model;
+}
+function detailRowWidth(provW, layout) {
+  let w = 2 + 1 + 1 + provW + 2 + 1 + 2;
+  w += layout.barWidth + 2 + TOTAL_COL;
+  if (layout.showBreakdown)
+    w += BREAKDOWN_COL;
+  else
+    w += 2;
+  if (layout.tokWidth > 0)
+    w += layout.tokWidth + 1;
+  w += TOK_VALUE_COL;
+  return w;
+}
+function shortFailureReason(probe, hasCreds) {
+  if (!probe)
+    return hasCreds ? "not probed" : "key missing";
+  if (probe.state === "key-missing")
+    return "key missing";
+  return stripAnsi2(describeProbeState(probe));
+}
+function DetailLinkRow({
+  link,
+  isWinner,
+  provW,
+  layout,
+  maxTotalMs,
+  maxTokPerSec
+}) {
+  const probe = link.probe;
+  const isLive = probe?.state === "live" && !!probe.timing;
+  const winnerMark = isWinner ? /* @__PURE__ */ jsxDEV("span", {
+    fg: C.brightGreen,
+    children: "\u25CF"
+  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
+    children: " "
+  }, undefined, false, undefined, this);
+  const provider = /* @__PURE__ */ jsxDEV("span", {
+    fg: C.fg,
+    children: padEndSafe(link.displayName, provW)
+  }, undefined, false, undefined, this);
+  const lead = /* @__PURE__ */ jsxDEV(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "  "
+      }, undefined, false, undefined, this),
+      winnerMark,
+      /* @__PURE__ */ jsxDEV("span", {
+        children: " "
+      }, undefined, false, undefined, this),
+      provider,
+      /* @__PURE__ */ jsxDEV("span", {
+        children: "  "
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  if (!isLive || !probe?.timing) {
+    return /* @__PURE__ */ jsxDEV("text", {
+      children: [
+        lead,
+        /* @__PURE__ */ jsxDEV("span", {
+          fg: C.red,
+          children: "\u2717  "
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV("span", {
+          fg: C.red,
+          children: shortFailureReason(probe, link.hasCredentials)
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this);
+  }
+  const t = probe.timing;
+  const barCells = timelineBarCells(t.totalMs, maxTotalMs, layout.barWidth);
+  const stages = splitStageCells(t.ttfbMs, t.ttftMs, t.totalMs, barCells);
+  const trackCells = Math.max(0, layout.barWidth - barCells);
+  const netMs = Math.max(0, t.ttfbMs);
+  const srvMs = Math.max(0, t.ttftMs - t.ttfbMs);
+  const strMs = Math.max(0, t.totalMs - t.ttftMs);
+  const netStr = padStartSafe(breakdownNum(netMs), STAGE_NUM_W);
+  const srvStr = padStartSafe(breakdownNum(srvMs), STAGE_NUM_W);
+  const strStr = padStartSafe(breakdownNum(strMs), STAGE_NUM_W);
+  const tokColor = throughputFg(t.tokensPerSec);
+  const tokCells = layout.tokWidth > 0 ? tokBarCells(t.tokensPerSec, maxTokPerSec, layout.tokWidth) : 0;
+  const tokTrack = Math.max(0, layout.tokWidth - tokCells);
+  const tokValue = padStartSafe(`${Math.round(t.tokensPerSec)} t/s`, TOK_VALUE_COL);
+  return /* @__PURE__ */ jsxDEV("text", {
+    children: [
+      lead,
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: C.green,
+        children: "\u2713  "
+      }, undefined, false, undefined, this),
+      stages.network > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.network,
+        children: " ".repeat(stages.network)
+      }, undefined, false, undefined, this),
+      stages.server > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.server,
+        children: " ".repeat(stages.server)
+      }, undefined, false, undefined, this),
+      stages.streaming > 0 && /* @__PURE__ */ jsxDEV("span", {
+        bg: STAGE_BG.streaming,
+        children: " ".repeat(stages.streaming)
+      }, undefined, false, undefined, this),
+      trackCells > 0 && /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: TRACK_CHAR.repeat(trackCells)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "  "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: C.white,
+        children: padStartSafe(formatLatency(t.totalMs), TOTAL_COL)
+      }, undefined, false, undefined, this),
+      layout.showBreakdown && /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  net "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.network,
+            children: netStr
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " srv "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.server,
+            children: srvStr
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " str "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: STAGE_FG.streaming,
+            children: strStr
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      layout.tokWidth > 0 && /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  "
+          }, undefined, false, undefined, this),
+          tokCells > 0 && /* @__PURE__ */ jsxDEV("span", {
+            fg: tokColor,
+            children: BAR_FILL.repeat(tokCells)
+          }, undefined, false, undefined, this),
+          tokTrack > 0 && /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: TRACK_CHAR.repeat(tokTrack)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " "
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      layout.tokWidth === 0 && /* @__PURE__ */ jsxDEV("span", {
+        fg: C.dim,
+        children: "  "
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("span", {
+        fg: tokColor,
+        children: tokValue
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DetailModel({
+  result,
+  provW,
+  headerW,
+  layout,
+  maxTotalMs,
+  maxTokPerSec,
+  isLast
+}) {
+  const winnerIdx = result.links.findIndex((l) => l.probe?.state === "live" && !!l.probe.timing);
+  const winner = winnerIdx >= 0 ? result.links[winnerIdx] : undefined;
+  const gap = Math.max(2, headerW - result.model.length - result.routingExplanation.length - 2);
+  const wiring = result.wiring;
+  const wireLine = winner && wiring ? `wire (${winner.displayName}): ${wiring.effectiveStreamFormat} \xB7 ${wiring.modelTranslator} \xB7 ${formatContextWindow(wiring.contextWindow)} ctx` : "wire: \u2014";
+  const routeChain = result.links.map((l) => l.displayName).join(" \u2192 ");
+  const liveLinks = result.links.filter((l) => l.probe?.state === "live" && !!l.probe.timing);
+  let fastestByLatency;
+  let fastestByTput;
+  for (const l of liveLinks) {
+    const t = l.probe.timing;
+    if (!fastestByLatency || t.totalMs < fastestByLatency.probe.timing.totalMs) {
+      fastestByLatency = l;
+    }
+    if (!fastestByTput || t.tokensPerSec > fastestByTput.probe.timing.tokensPerSec) {
+      fastestByTput = l;
+    }
+  }
+  const winnerT = winner?.probe?.timing;
+  const candidates = [];
+  if (winner && winnerT) {
+    if (fastestByLatency && fastestByLatency !== winner && fastestByLatency.probe.timing.totalMs < winnerT.totalMs) {
+      candidates.push({
+        link: fastestByLatency,
+        factor: winnerT.totalMs / Math.max(1, fastestByLatency.probe.timing.totalMs),
+        axis: "latency"
+      });
+    }
+    if (fastestByTput && fastestByTput !== winner && fastestByTput.probe.timing.tokensPerSec > winnerT.tokensPerSec && winnerT.tokensPerSec > 0) {
+      candidates.push({
+        link: fastestByTput,
+        factor: fastestByTput.probe.timing.tokensPerSec / winnerT.tokensPerSec,
+        axis: "throughput"
+      });
+    }
+  }
+  const suggestion = candidates.sort((a, b) => b.factor - a.factor)[0];
+  const showSuggestion = !!suggestion;
+  const ruleKey = ruleKeyForModel(result.model);
+  return /* @__PURE__ */ jsxDEV("box", {
+    flexDirection: "column",
+    marginBottom: isLast ? 0 : 1,
+    children: [
+      /* @__PURE__ */ jsxDEV("text", {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.cyan,
+            attributes: A.bold,
+            children: result.model
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: " ".repeat(gap)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: result.routingExplanation
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      result.links.map((link, i) => /* @__PURE__ */ jsxDEV(DetailLinkRow, {
+        link,
+        isWinner: i === winnerIdx,
+        provW,
+        layout,
+        maxTotalMs,
+        maxTokPerSec
+      }, `${result.model}:${link.provider}:${i}`, false, undefined, this)),
+      /* @__PURE__ */ jsxDEV("text", {
+        children: /* @__PURE__ */ jsxDEV("span", {
+          fg: C.dim,
+          children: `  ${wireLine}`
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("text", {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: "  route: "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.fgMuted,
+            children: routeChain || "\u2014"
+          }, undefined, false, undefined, this),
+          winner && /* @__PURE__ */ jsxDEV(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV("span", {
+                fg: C.dim,
+                children: "  \xB7  uses "
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                fg: C.green,
+                children: winner.displayName
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                fg: C.dim,
+                children: " (first credentialed live link)"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      showSuggestion && /* @__PURE__ */ jsxDEV("text", {
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.yellow,
+            attributes: A.bold,
+            children: "  \u26A1 "
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.fg,
+            children: suggestion.link.displayName
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.green,
+            children: ` is ${suggestion.factor.toFixed(1)}\xD7 faster ${suggestion.axis === "latency" ? "end-to-end" : "throughput"}`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: suggestion.axis === "latency" ? ` (${formatLatency(suggestion.link.probe.timing.totalMs)} vs ${formatLatency(winnerT.totalMs)})` : ` (${Math.round(suggestion.link.probe.timing.tokensPerSec)} vs ${Math.round(winnerT.tokensPerSec)} t/s)`
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.dim,
+            children: ` \u2014 add routing: `
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            fg: C.cyan,
+            children: `"${ruleKey}": ["${suggestion.link.provider}"]`
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DetailsView({
+  results,
+  layout,
+  termWidth,
+  maxTotalMs,
+  maxTokPerSec
+}) {
+  const provW = Math.min(22, Math.max(8, ...results.flatMap((r) => r.links.map((l) => l.displayName.length))));
+  const headerW = Math.max(24, Math.min(detailRowWidth(provW, layout), (termWidth || 100) - 3));
+  return /* @__PURE__ */ jsxDEV("box", {
+    flexDirection: "column",
+    children: results.map((r, idx) => /* @__PURE__ */ jsxDEV(DetailModel, {
+      result: r,
+      provW,
+      headerW,
+      layout,
+      maxTotalMs,
+      maxTokPerSec,
+      isLast: idx === results.length - 1
+    }, r.model, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+function ProbeApp({
+  store,
+  onQuit
+}) {
   const state = useProbeStore(store);
-  const animFrame = useAnimationFrame(true);
+  const animFrame = useAnimationFrame(state.phase === "live");
+  const { height: termHeight, width: termWidth } = useTerminalDimensions();
+  const isDone = state.phase === "done";
+  const listScrollRef = useRef2(null);
+  useKeyboard((key) => {
+    if (isDone) {
+      if (key.name === "q" || key.name === "escape") {
+        onQuit?.();
+        return;
+      }
+      if (key.name === "tab") {
+        store.setActiveTab(store.getState().activeTab === "leaderboard" ? "details" : "leaderboard");
+        return;
+      }
+      if (key.name === "1") {
+        store.setActiveTab("leaderboard");
+        return;
+      }
+      if (key.name === "2") {
+        store.setActiveTab("details");
+        return;
+      }
+    }
+    const sb = listScrollRef.current;
+    if (!sb)
+      return;
+    const page = Math.max(1, sb.viewport.height - 1);
+    switch (key.name) {
+      case "up":
+      case "k":
+        sb.scrollBy(-1);
+        break;
+      case "down":
+      case "j":
+        sb.scrollBy(1);
+        break;
+      case "pageup":
+        sb.scrollBy(-page);
+        break;
+      case "pagedown":
+      case "space":
+        sb.scrollBy(page);
+        break;
+      case "home":
+        sb.scrollTo(0);
+        break;
+      case "end":
+        sb.scrollTo(sb.content.height);
+        break;
+      case "g":
+        sb.scrollTo(key.shift ? sb.content.height : 0);
+        break;
+    }
+  });
   const groups = [];
   for (const link of state.links) {
     let group = groups.find((g) => g.model === link.model);
@@ -54902,36 +55800,105 @@ function ProbeApp({ store }) {
     group.links.push(link);
   }
   const maxNameLen = Math.min(25, Math.max(...state.links.map((l) => l.displayName.length), 12));
-  const rowWidth = 4 + 5 + 2 + BAR_WIDTH + 2 + maxNameLen + 2 + 25;
+  const layout = deriveLayout(termWidth || 100);
+  const rowWidth = computeRowWidth(layout, maxNameLen);
+  let maxTotalMs = 1;
+  let maxTokPerSec = 1;
+  let fastestLinkId = null;
+  let fastestTokPerSec = -Infinity;
+  for (const link of state.links) {
+    if (link.status !== "live" || !link.timing)
+      continue;
+    const t = link.timing;
+    if (t.totalMs > maxTotalMs)
+      maxTotalMs = t.totalMs;
+    const streamMs = Math.max(STREAM_MS_FLOOR, t.totalMs - t.ttftMs);
+    const scaledTps = t.tokens > 0 ? t.tokens / streamMs * 1000 : 0;
+    if (scaledTps > maxTokPerSec)
+      maxTokPerSec = scaledTps;
+    if (t.tokensPerSec > fastestTokPerSec) {
+      fastestTokPerSec = t.tokensPerSec;
+      fastestLinkId = link.id;
+    }
+  }
+  if (fastestTokPerSec <= 0)
+    fastestLinkId = null;
+  const showDetails = isDone && state.activeTab === "details";
+  const stepsRows = isDone ? 0 : state.steps.length > 0 ? 1 : 0;
+  const tabBarRows = isDone ? TAB_BAR_ROWS : 0;
+  const legendRows = showDetails ? 0 : LEGEND_ROWS;
+  const listH = Math.max(MIN_LIST_H, termHeight - BANNER_ROWS - stepsRows - tabBarRows - legendRows - SCROLL_HINT_ROWS);
+  const sbForHint = listScrollRef.current;
+  const overflow = sbForHint ? sbForHint.content.height > sbForHint.viewport.height : true;
+  const scrollKeys = "\u2191\u2193 scroll \xB7 PgUp/PgDn page \xB7 g/G top/bottom";
+  const footerHint = isDone ? "  " + (overflow ? scrollKeys + " \xB7 " : "") + "Tab/1/2 switch \xB7 q quit" : "  " + (overflow ? scrollKeys : "");
   return /* @__PURE__ */ jsxDEV("box", {
     flexDirection: "column",
     children: [
-      /* @__PURE__ */ jsxDEV(Banner, {}, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV("box", {
         flexDirection: "column",
-        paddingY: 1,
-        children: state.steps.map((step, i) => /* @__PURE__ */ jsxDEV(StepIndicator, {
-          step
-        }, `${step.name}-${i}`, false, undefined, this))
+        height: BANNER_ROWS,
+        children: /* @__PURE__ */ jsxDEV(Banner, {}, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      groups.length > 0 ? /* @__PURE__ */ jsxDEV("box", {
+      isDone ? /* @__PURE__ */ jsxDEV(TabBar, {
+        activeTab: state.activeTab
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("box", {
         flexDirection: "column",
-        children: groups.map((g, idx) => /* @__PURE__ */ jsxDEV(ModelGroup, {
-          model: g.model,
-          links: g.links,
-          animFrame,
-          maxNameLen,
-          rowWidth,
-          isLast: idx === groups.length - 1
-        }, g.model, false, undefined, this))
-      }, undefined, false, undefined, this) : null
+        children: /* @__PURE__ */ jsxDEV(StepLine, {
+          steps: state.steps
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      groups.length > 0 ? /* @__PURE__ */ jsxDEV(Fragment, {
+        children: [
+          !showDetails && /* @__PURE__ */ jsxDEV("box", {
+            flexDirection: "column",
+            height: LEGEND_ROWS,
+            children: /* @__PURE__ */ jsxDEV(Legend, {
+              rowWidth
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("scrollbox", {
+            ref: listScrollRef,
+            scrollX: false,
+            scrollY: true,
+            focused: true,
+            style: { height: listH },
+            children: showDetails ? /* @__PURE__ */ jsxDEV(DetailsView, {
+              results: state.results,
+              layout,
+              termWidth,
+              maxTotalMs,
+              maxTokPerSec
+            }, undefined, false, undefined, this) : groups.map((g, idx) => /* @__PURE__ */ jsxDEV(ModelGroup, {
+              model: g.model,
+              links: g.links,
+              animFrame,
+              maxNameLen,
+              rowWidth,
+              isLast: idx === groups.length - 1,
+              layout,
+              maxTotalMs,
+              maxTokPerSec,
+              fastestLinkId
+            }, g.model, false, undefined, this))
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("text", {
+            children: /* @__PURE__ */ jsxDEV("span", {
+              fg: C.dim,
+              children: footerHint
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this) : null
     ]
-  }, undefined, true, undefined, this);
+  }, state.phase, true, undefined, this);
 }
-var ANIM_FRAMES, BAR_WIDTH = 20;
+var ANIM_FRAMES, TIMELINE_BAR_FULL = 24, TIMELINE_BAR_NARROW = 12, TOK_BAR_FULL = 14, TOTAL_COL = 7, STAGE_NUM_W = 6, BREAKDOWN_COL, TOK_VALUE_COL = 7, TRACK_CHAR = "\xB7", BAR_FILL = "\u2588", BANNER_ROWS = 7, SCROLL_HINT_ROWS = 1, LEGEND_ROWS = 2, MIN_LIST_H = 4, TAB_BAR_ROWS = 2;
 var init_probe_tui_app = __esm(() => {
   init_theme2();
+  init_probe_live();
   ANIM_FRAMES = ["\u2593", "\u2592", "\u2591", "\u2592"];
+  BREAKDOWN_COL = 16 + 3 * STAGE_NUM_W;
 });
 
 // src/probe/probe-tui-runtime.tsx
@@ -54942,13 +55909,25 @@ async function startProbeTui(initial) {
   const renderer = await createCliRenderer({
     stdout: process.stderr,
     useAlternateScreen: false,
-    useMouse: false,
+    useMouse: true,
     exitOnCtrlC: true
   });
   const store = new ProbeStore(initial);
+  let resolveQuit;
+  const quitPromise = new Promise((resolve3) => {
+    resolveQuit = resolve3;
+  });
+  let quit = false;
+  const onQuit = () => {
+    if (quit)
+      return;
+    quit = true;
+    resolveQuit();
+  };
   const root = createRoot(renderer);
   root.render(/* @__PURE__ */ jsxDEV2(ProbeApp, {
-    store
+    store,
+    onQuit
   }, undefined, false, undefined, this));
   let destroyed = false;
   const shutdown = async () => {
@@ -54962,7 +55941,7 @@ async function startProbeTui(initial) {
       renderer.destroy();
     } catch {}
   };
-  return { store, shutdown };
+  return { store, waitForQuit: () => quitPromise, shutdown };
 }
 var init_probe_tui_runtime = __esm(() => {
   init_probe_tui_app();
@@ -55024,6 +56003,104 @@ function wordWrap(text, maxWidth) {
     lines.push(current);
   return lines;
 }
+function computeBarScales(results) {
+  let maxTokPerSec = 1;
+  const liveTotals = [];
+  const consider = (probe) => {
+    if (!probe || probe.state !== "live" || !probe.timing)
+      return;
+    const t = probe.timing;
+    liveTotals.push(t.totalMs);
+    const streamMs = Math.max(STREAM_MS_FLOOR, t.totalMs - t.ttftMs);
+    const scaledTps = t.tokens > 0 ? t.tokens / streamMs * 1000 : 0;
+    if (scaledTps > maxTokPerSec)
+      maxTokPerSec = scaledTps;
+  };
+  for (const r of results) {
+    consider(r.directProbe);
+    for (const c of r.chain ?? [])
+      consider(c.probe);
+  }
+  let maxTotalMs = 1;
+  if (liveTotals.length > 0) {
+    const sorted = [...liveTotals].sort((a, b) => a - b);
+    const rawMax = sorted[sorted.length - 1];
+    maxTotalMs = Math.max(1, rawMax);
+    if (sorted.length >= 3) {
+      const median = sorted[Math.floor((sorted.length - 1) / 2)];
+      const secondSlowest = sorted[sorted.length - 2];
+      const cap = Math.max(secondSlowest, 3 * median);
+      maxTotalMs = Math.max(1, Math.min(rawMax, cap));
+    }
+  }
+  return { maxTotalMs, maxTokPerSec };
+}
+function padStartSafe2(s, n) {
+  if (s.length >= n)
+    return s.slice(s.length - n);
+  return " ".repeat(n - s.length) + s;
+}
+function padEnd(s, n) {
+  const vis = visibleLength(s);
+  if (vis >= n)
+    return s;
+  return s + " ".repeat(n - vis);
+}
+function breakdownNum2(ms) {
+  if (ms >= 1000)
+    return formatLatency(ms);
+  return `${Math.round(Math.max(0, ms))}`;
+}
+function buildBarsLine(timing, scales, isFastest, usable) {
+  const t = timing;
+  const showTokBar = usable >= PRINTER_BARS_FULL_WIDTH;
+  const showBreakdown = usable >= PRINTER_BARS_FULL_WIDTH || usable >= PRINTER_BARS_NOTOK_WIDTH;
+  const barCells = timelineBarCells(t.totalMs, scales.maxTotalMs, PRINTER_BAR_WIDTH);
+  const stages = splitStageCells(t.ttfbMs, t.ttftMs, t.totalMs, barCells);
+  const trackCells = Math.max(0, PRINTER_BAR_WIDTH - barCells);
+  let timeline = "";
+  if (stages.network > 0) {
+    timeline += `${STAGE_BG_ANSI.network}${" ".repeat(stages.network)}${ANSI_RESET}`;
+  }
+  if (stages.server > 0) {
+    timeline += `${STAGE_BG_ANSI.server}${" ".repeat(stages.server)}${ANSI_RESET}`;
+  }
+  if (stages.streaming > 0) {
+    timeline += `${STAGE_BG_ANSI.streaming}${" ".repeat(stages.streaming)}${ANSI_RESET}`;
+  }
+  if (trackCells > 0) {
+    timeline += `${pc.dim}${PRINTER_TRACK.repeat(trackCells)}${pc.reset}`;
+  }
+  const total = `${LATENCY_FG_ANSI}${padStartSafe2(formatLatency(t.totalMs), 7)}${pc.reset}`;
+  let breakdown = "";
+  if (showBreakdown) {
+    const netMs = Math.max(0, t.ttfbMs);
+    const srvMs = Math.max(0, t.ttftMs - t.ttfbMs);
+    const strMs = Math.max(0, t.totalMs - t.ttftMs);
+    const netFg = hexToAnsiFg(STAGE_FG.network);
+    const srvFg = hexToAnsiFg(STAGE_FG.server);
+    const strFg = hexToAnsiFg(STAGE_FG.streaming);
+    breakdown = `${pc.dim}  net ${pc.reset}${netFg}${padStartSafe2(breakdownNum2(netMs), STAGE_NUM_W2)}${pc.reset}` + `${pc.dim} srv ${pc.reset}${srvFg}${padStartSafe2(breakdownNum2(srvMs), STAGE_NUM_W2)}${pc.reset}` + `${pc.dim} str ${pc.reset}${strFg}${padStartSafe2(breakdownNum2(strMs), STAGE_NUM_W2)}${pc.reset}`;
+  }
+  const tokFg = hexToAnsiFg(throughputFg(t.tokensPerSec));
+  let tokBar = "";
+  if (showTokBar) {
+    const tokCells = tokBarCells(t.tokensPerSec, scales.maxTokPerSec, PRINTER_TOK_WIDTH);
+    const tokTrack = Math.max(0, PRINTER_TOK_WIDTH - tokCells);
+    if (tokCells > 0) {
+      tokBar += `${tokFg}${PRINTER_BAR_FILL.repeat(tokCells)}${pc.reset}`;
+    }
+    if (tokTrack > 0) {
+      tokBar += `${pc.dim}${PRINTER_TRACK.repeat(tokTrack)}${pc.reset}`;
+    }
+    tokBar = `  ${tokBar} `;
+  } else {
+    tokBar = "  ";
+  }
+  const tokValue = `${tokFg}${padStartSafe2(`${Math.round(t.tokensPerSec)} t/s`, PRINTER_TOK_VALUE_W)}${pc.reset}`;
+  const crown = isFastest ? ` ${pc.brightGreen}\u25CF${pc.reset}` : "";
+  return `${timeline}  ${total}${breakdown}${tokBar}${tokValue}${crown}`;
+}
 function summaryColor(live, total) {
   if (total === 0 || live === 0)
     return pc.red;
@@ -55039,7 +56116,7 @@ function shortStatusLabel(probe, hasCreds, hint) {
   }
   switch (probe.state) {
     case "live":
-      return `${pc.green}\u2713 ${probe.latencyMs}ms${pc.reset}`;
+      return `${pc.green}\u2713 ${LATENCY_FG_ANSI}${latencyBgAnsi(probe.latencyMs)} ${formatLatency(probe.latencyMs)} ${pc.reset}`;
     case "key-missing":
       return `${pc.dim}${pc.red}\u25CB missing${pc.reset}`;
     case "auth-failed":
@@ -55161,6 +56238,7 @@ function buildRowData(result, isLiveProbe) {
     if (entry.probe && isFailureState(entry.probe.state) && entry.probe.errorMessage) {
       errorDetail = stripAnsi3(entry.probe.errorMessage).replace(/\s+/g, " ").trim();
     }
+    const barsTiming = entry.probe?.state === "live" && entry.probe.timing ? entry.probe.timing : undefined;
     return {
       num: `${i + 1}`,
       provider: entry.displayName,
@@ -55168,7 +56246,8 @@ function buildRowData(result, isLiveProbe) {
       status,
       errorDetail,
       fastest: isFastest,
-      slowest: isSlowest
+      slowest: isSlowest,
+      barsTiming
     };
   });
 }
@@ -55187,13 +56266,15 @@ function buildDirectRowData(result) {
   if (probe && isFailureState(probe.state) && probe.errorMessage) {
     errorDetail = stripAnsi3(probe.errorMessage).replace(/\s+/g, " ").trim();
   }
+  const barsTiming = probe?.state === "live" && probe.timing ? probe.timing : undefined;
   return [
     {
       num: "1",
       provider: result.nativeProvider,
       spec: `${result.nativeProvider}@${result.model}`,
       status,
-      errorDetail
+      errorDetail,
+      barsTiming
     }
   ];
 }
@@ -55216,7 +56297,7 @@ function computeCardWidth(rows, widths, topTitleVis, topSummaryVis, footerVis) {
     width = maxAllowed;
   return width;
 }
-function formatContextWindow(ctx) {
+function formatContextWindow2(ctx) {
   if (ctx <= 0)
     return "0K";
   if (ctx >= 1e6)
@@ -55238,7 +56319,7 @@ function buildKeyLine(activeEntry, directKeyVar) {
   return `${pc.bold}Key${pc.reset}  ${pc.dim}\u2014${pc.reset}`;
 }
 function buildWireLine(wiring, activeProvider) {
-  const ctx = formatContextWindow(wiring.contextWindow);
+  const ctx = formatContextWindow2(wiring.contextWindow);
   const head = activeProvider ? `${activeProvider} \u2192 ` : "";
   return `${pc.bold}Wire${pc.reset} ${head}${wiring.effectiveStreamFormat} \xB7 ${wiring.modelTranslator} \xB7 ${ctx}`;
 }
@@ -55273,7 +56354,7 @@ function computeRequiredWidth(result, isLiveProbe, directKeyVar) {
   const layout = buildCardLayout(result, isLiveProbe, directKeyVar);
   return computeCardWidth(layout.rows, layout.widths, visibleLength(layout.titleStyled), visibleLength(layout.summaryStyled), layout.footerVis);
 }
-function renderCard(result, isLiveProbe, w, width, directKeyVar) {
+function renderCard(result, isLiveProbe, w, width, scales, directKeyVar) {
   const layout = buildCardLayout(result, isLiveProbe, directKeyVar);
   const {
     rows,
@@ -55308,6 +56389,17 @@ function renderCard(result, isLiveProbe, w, width, directKeyVar) {
     ];
     w(renderRow(cells, widths, width, bg) + `
 `);
+    if (r.barsTiming) {
+      const innerUsable = width - 2 - CARD_PADDING_LEFT - CARD_PADDING_RIGHT;
+      const barsIndent = 4;
+      const barsUsable = innerUsable - barsIndent;
+      if (barsUsable >= PRINTER_BARS_MIN_WIDTH) {
+        const barsLine = buildBarsLine(r.barsTiming, scales, false, barsUsable);
+        const body = `${" ".repeat(barsIndent)}${barsLine}`;
+        w(renderTextLine(body, width, bg) + `
+`);
+      }
+    }
     if (r.errorDetail) {
       const innerUsable = width - 2 - CARD_PADDING_LEFT - CARD_PADDING_RIGHT;
       const errorIndent = 4;
@@ -55357,18 +56449,172 @@ function renderCard(result, isLiveProbe, w, width, directKeyVar) {
   w(renderBorderBottom(width) + `
 `);
 }
+function renderLegend(w) {
+  const net = STAGE_BG_ANSI.network;
+  const srv = STAGE_BG_ANSI.server;
+  const str = STAGE_BG_ANSI.streaming;
+  const netFg = hexToAnsiFg(STAGE_FG.network);
+  const srvFg = hexToAnsiFg(STAGE_FG.server);
+  const strFg = hexToAnsiFg(STAGE_FG.streaming);
+  w(`  ${pc.dim}Stages:${pc.reset}  ` + `${net}  ${ANSI_RESET}${netFg} network${pc.reset}   ` + `${srv}  ${ANSI_RESET}${srvFg} server${pc.reset}   ` + `${str}  ${ANSI_RESET}${strFg} streaming${pc.reset}   ` + `${pc.dim}\xB7\xB7 idle${pc.reset}
+`);
+  w(`  ${pc.dim}bar length = total time, shared scale (slowest = full bar)  \xB7  ` + `tok/s scaled to fastest${pc.reset}
+`);
+  w(`
+`);
+}
+function pickRepresentative(result) {
+  for (const entry of result.chain ?? []) {
+    if (entry.probe?.state === "live" && entry.probe.timing) {
+      return { model: result.model, provider: entry.displayName, timing: entry.probe.timing };
+    }
+  }
+  const direct = result.directProbe;
+  if (direct?.state === "live" && direct.timing) {
+    return { model: result.model, provider: result.nativeProvider, timing: direct.timing };
+  }
+  return { model: result.model, provider: result.nativeProvider };
+}
+function renderLeaderboard(results, scales, maxWidth, w) {
+  const reps = results.map(pickRepresentative);
+  const live = reps.filter((r) => r.timing).sort((a, b) => a.timing.totalMs - b.timing.totalMs);
+  const unavailable = reps.filter((r) => !r.timing);
+  if (live.length === 0)
+    return;
+  const allNames = reps.map((r) => r.model);
+  const rawNameW = Math.max(5, ...allNames.map((n) => n.length));
+  const nameW = Math.min(rawNameW, 28);
+  const allProviders = reps.map((r) => r.provider);
+  const rawProvW = Math.max(8, ...allProviders.map((p) => p.length));
+  const provW = Math.min(rawProvW, 18);
+  const rankW = Math.max(1, String(live.length).length);
+  const MARGIN = 2;
+  const leadW = MARGIN + rankW + 1 + 1 + 1 + nameW + 1 + provW + 1;
+  const LB_TIMELINE = PRINTER_BAR_WIDTH + 2 + 7;
+  const LB_BREAKDOWN = 2 + STAGE_NUM_W2 + 1 + STAGE_NUM_W2 + 1 + STAGE_NUM_W2;
+  const LB_TOKBAR = 2 + PRINTER_TOK_WIDTH + 1;
+  const LB_TOK_VALUE = PRINTER_TOK_VALUE_W;
+  const LB_FULL = LB_TIMELINE + LB_BREAKDOWN + LB_TOKBAR + LB_TOK_VALUE;
+  const LB_NOTOK = LB_TIMELINE + LB_BREAKDOWN + 2 + LB_TOK_VALUE;
+  const width = Math.min(maxWidth, leadW + LB_FULL);
+  const barsBudget = Math.max(0, width - leadW);
+  const showTokBar = barsBudget >= LB_FULL;
+  const showBreakdown = barsBudget >= LB_NOTOK;
+  const margin = " ".repeat(MARGIN);
+  const netFg = hexToAnsiFg(STAGE_FG.network);
+  const srvFg = hexToAnsiFg(STAGE_FG.server);
+  const strFg = hexToAnsiFg(STAGE_FG.streaming);
+  w(`${margin}${pc.bold}${pc.cyan}Leaderboard${pc.reset}${pc.dim} \u2014 fastest model first${pc.reset}
+`);
+  const rankHdr = " ".repeat(rankW) + "   ";
+  const nameHdr = padEnd(`${pc.dim}MODEL${pc.reset}`, nameW);
+  const provHdr = padEnd(`${pc.dim}PROVIDER${pc.reset}`, provW);
+  let header = `${margin}${rankHdr}${nameHdr} ${provHdr} ${pc.dim}${padEnd("TIMELINE", PRINTER_BAR_WIDTH)}${pc.reset}  ${pc.dim}${padStartSafe2("TOTAL", 7)}${pc.reset}`;
+  if (showBreakdown) {
+    header += `${pc.dim}  ${padEnd("net", STAGE_NUM_W2)} ${padEnd("srv", STAGE_NUM_W2)} ${padEnd("str", STAGE_NUM_W2)}${pc.reset}`;
+  }
+  if (showTokBar) {
+    header += `${pc.dim}  ${padEnd("tok/s", PRINTER_TOK_WIDTH)} ${padStartSafe2("", PRINTER_TOK_VALUE_W)}${pc.reset}`;
+  } else {
+    header += `${pc.dim}  ${padStartSafe2("tok/s", PRINTER_TOK_VALUE_W)}${pc.reset}`;
+  }
+  w(header + `
+`);
+  live.forEach((row, idx) => {
+    const t = row.timing;
+    const isFastest = idx === 0;
+    const rankStr = padStartSafe2(String(idx + 1), rankW);
+    const dot = isFastest ? `${pc.brightGreen}\u25CF${pc.reset}` : " ";
+    const name = padEnd(`${pc.bold}${truncate2(row.model, nameW)}${pc.reset}`, nameW);
+    const prov = padEnd(`${pc.dim}${truncate2(row.provider, provW)}${pc.reset}`, provW);
+    const barCells = timelineBarCells(t.totalMs, scales.maxTotalMs, PRINTER_BAR_WIDTH);
+    const stages = splitStageCells(t.ttfbMs, t.ttftMs, t.totalMs, barCells);
+    const trackCells = Math.max(0, PRINTER_BAR_WIDTH - barCells);
+    let timeline = "";
+    if (stages.network > 0)
+      timeline += `${STAGE_BG_ANSI.network}${" ".repeat(stages.network)}${ANSI_RESET}`;
+    if (stages.server > 0)
+      timeline += `${STAGE_BG_ANSI.server}${" ".repeat(stages.server)}${ANSI_RESET}`;
+    if (stages.streaming > 0)
+      timeline += `${STAGE_BG_ANSI.streaming}${" ".repeat(stages.streaming)}${ANSI_RESET}`;
+    if (trackCells > 0)
+      timeline += `${pc.dim}${PRINTER_TRACK.repeat(trackCells)}${pc.reset}`;
+    const total = `${LATENCY_FG_ANSI}${padStartSafe2(formatLatency(t.totalMs), 7)}${pc.reset}`;
+    let breakdown = "";
+    if (showBreakdown) {
+      const netMs = Math.max(0, t.ttfbMs);
+      const srvMs = Math.max(0, t.ttftMs - t.ttfbMs);
+      const strMs = Math.max(0, t.totalMs - t.ttftMs);
+      breakdown = `  ${netFg}${padStartSafe2(breakdownNum2(netMs), STAGE_NUM_W2)}${pc.reset}` + ` ${srvFg}${padStartSafe2(breakdownNum2(srvMs), STAGE_NUM_W2)}${pc.reset}` + ` ${strFg}${padStartSafe2(breakdownNum2(strMs), STAGE_NUM_W2)}${pc.reset}`;
+    }
+    const tokFg = hexToAnsiFg(throughputFg(t.tokensPerSec));
+    let tokBar = "  ";
+    if (showTokBar) {
+      const tokCells = tokBarCells(t.tokensPerSec, scales.maxTokPerSec, PRINTER_TOK_WIDTH);
+      const tokTrack = Math.max(0, PRINTER_TOK_WIDTH - tokCells);
+      let bar = "";
+      if (tokCells > 0)
+        bar += `${tokFg}${PRINTER_BAR_FILL.repeat(tokCells)}${pc.reset}`;
+      if (tokTrack > 0)
+        bar += `${pc.dim}${PRINTER_TRACK.repeat(tokTrack)}${pc.reset}`;
+      tokBar = `  ${bar} `;
+    }
+    const tokValue = `${tokFg}${padStartSafe2(`${Math.round(t.tokensPerSec)} t/s`, PRINTER_TOK_VALUE_W)}${pc.reset}`;
+    w(`${margin}${rankStr} ${dot} ${name} ${prov} ${timeline}  ${total}${breakdown}${tokBar}${tokValue}
+`);
+  });
+  for (const row of unavailable) {
+    const rankStr = " ".repeat(rankW);
+    const name = padEnd(`${pc.dim}${truncate2(row.model, nameW)}${pc.reset}`, nameW);
+    const prov = padEnd(`${pc.dim}${truncate2(row.provider, provW)}${pc.reset}`, provW);
+    w(`${margin}${rankStr}   ${name} ${prov} ${pc.dim}\u2014 no live route${pc.reset}
+`);
+  }
+  const rowVis = leadW - MARGIN + LB_TIMELINE + (showBreakdown ? LB_BREAKDOWN : 0) + (showTokBar ? LB_TOKBAR : 2) + LB_TOK_VALUE;
+  const ruleW = Math.max(10, rowVis);
+  w(`${margin}${pc.dim}${"\u2500".repeat(ruleW)}${pc.reset}
+`);
+  w(`
+`);
+}
+function printLeaderboardScrollback(results, isLiveProbe) {
+  const w = process.stderr.write.bind(process.stderr);
+  const anyTimedLive = results.some((r) => r.directProbe?.state === "live" && r.directProbe.timing !== undefined) || results.some((r) => (r.chain ?? []).some((c) => c.probe?.state === "live" && c.probe.timing !== undefined));
+  if (!isLiveProbe || !anyTimedLive)
+    return;
+  const scales = computeBarScales(results);
+  const termCols = process.stderr.columns ?? process.stdout.columns ?? 100;
+  const maxAllowed = Math.max(MIN_CARD_WIDTH, termCols - 4);
+  w(`
+`);
+  renderLeaderboard(results, scales, maxAllowed, w);
+}
 function printProbeResults(results, isLiveProbe) {
   const w = process.stderr.write.bind(process.stderr);
   w(`
 `);
+  const scales = computeBarScales(results);
+  const anyTimedLive = results.some((r) => r.directProbe?.state === "live" && r.directProbe.timing !== undefined) || results.some((r) => (r.chain ?? []).some((c) => c.probe?.state === "live" && c.probe.timing !== undefined));
+  if (isLiveProbe && anyTimedLive) {
+    renderLegend(w);
+  }
   const requiredWidths = results.map((r) => computeRequiredWidth(r, isLiveProbe));
   const termCols = process.stderr.columns ?? process.stdout.columns ?? 100;
   const maxAllowed = Math.max(MIN_CARD_WIDTH, termCols - 4);
   let globalWidth = requiredWidths.reduce((a, b) => Math.max(a, b), MIN_CARD_WIDTH);
   if (globalWidth > maxAllowed)
     globalWidth = maxAllowed;
+  const showedLeaderboard = isLiveProbe && anyTimedLive;
+  if (showedLeaderboard) {
+    renderLeaderboard(results, scales, maxAllowed, w);
+  }
+  if (showedLeaderboard) {
+    w(`  ${pc.bold}${pc.cyan}Details${pc.reset}${pc.dim} \u2014 per-model routing chains${pc.reset}
+
+`);
+  }
   for (const result of results) {
-    renderCard(result, isLiveProbe, w, globalWidth);
+    renderCard(result, isLiveProbe, w, globalWidth, scales);
     w(`
 `);
   }
@@ -55377,9 +56623,10 @@ function printProbeResults(results, isLiveProbe) {
   w(`
 `);
 }
-var pc, ANSI_RE2, MIN_CARD_WIDTH = 60, CARD_PADDING_LEFT = 2, CARD_PADDING_RIGHT = 2;
+var pc, ANSI_RE2, PRINTER_BAR_WIDTH = 24, PRINTER_TOK_WIDTH = 14, PRINTER_TRACK = "\xB7", PRINTER_BAR_FILL = "\u2588", STAGE_NUM_W2 = 6, PRINTER_TOK_VALUE_W = 9, PRINTER_BARS_FULL_WIDTH, PRINTER_BARS_NOTOK_WIDTH, PRINTER_BARS_MIN_WIDTH, MIN_CARD_WIDTH = 60, CARD_PADDING_LEFT = 2, CARD_PADDING_RIGHT = 2;
 var init_probe_results_printer = __esm(() => {
   init_probe_live();
+  init_theme2();
   pc = {
     reset: "\x1B[0m",
     bold: "\x1B[1m",
@@ -55394,6 +56641,9 @@ var init_probe_results_printer = __esm(() => {
     bgSlowest: "\x1B[48;5;95m"
   };
   ANSI_RE2 = /\x1b\[[0-9;]*[A-Za-z]/g;
+  PRINTER_BARS_FULL_WIDTH = 24 + 2 + 7 + 34 + 17 + 9;
+  PRINTER_BARS_NOTOK_WIDTH = 24 + 2 + 7 + 34 + 2 + 9;
+  PRINTER_BARS_MIN_WIDTH = 24 + 2 + 7 + 2 + 9;
 });
 
 // src/cli.ts
@@ -56228,6 +57478,46 @@ async function probeModelRouting(models, jsonOutput, options = { live: true, tim
     });
     return { parsed, chain, chainDetails };
   }
+  function buildRoutingExplanation(parsed, chain) {
+    if (chain.source === "direct") {
+      return `explicit \xB7 ${parsed.provider} (direct)`;
+    }
+    if (chain.source === "custom-rules" && chain.matchedPattern) {
+      return `custom-rules \xB7 matched \`${chain.matchedPattern}\``;
+    }
+    if (chain.source === "auto-chain") {
+      if (chain.matchedPattern && chain.matchedPattern !== "*") {
+        return `auto-chain \xB7 default rule \`${chain.matchedPattern}\``;
+      }
+      return "auto-chain \xB7 catch-all \u2192 openrouter";
+    }
+    return chain.source;
+  }
+  function buildResultLinks(parsed, chainDetails, directProbe) {
+    if (chainDetails.length === 0) {
+      const directProviderDef = getProviderByName(parsed.provider);
+      const directKeyInfo = API_KEY_MAP[parsed.provider];
+      const directHasCreds = directProviderDef?.isLocal ? isLocalProviderEnabled(parsed.provider) : directKeyInfo?.envVar ? !!process.env[directKeyInfo.envVar] || (directKeyInfo.aliases?.some((a) => !!process.env[a]) ?? false) : true;
+      return [
+        {
+          provider: parsed.provider,
+          displayName: directProviderDef?.displayName ?? parsed.provider,
+          modelId: parsed.model,
+          hasCredentials: directHasCreds,
+          credentialHint: directProviderDef?.isLocal && !directHasCreds ? "enable local provider in global config" : directKeyInfo?.envVar,
+          probe: directProbe
+        }
+      ];
+    }
+    return chainDetails.map((c) => ({
+      provider: c.provider,
+      displayName: c.displayName,
+      modelId: c.modelSpec.includes("@") ? c.modelSpec.slice(c.modelSpec.indexOf("@") + 1) : c.modelSpec,
+      hasCredentials: c.hasCredentials,
+      credentialHint: c.credentialHint,
+      probe: c.probe
+    }));
+  }
   async function computeWiring(chainDetails, parsedModel) {
     const firstReadyRoute = chainDetails.find((c) => c.hasCredentials);
     if (!firstReadyRoute)
@@ -56360,7 +57650,10 @@ async function probeModelRouting(models, jsonOutput, options = { live: true, tim
   }
   const initialState = {
     steps: [],
-    links: []
+    links: [],
+    phase: "live",
+    results: [],
+    activeTab: "leaderboard"
   };
   const tui = await startProbeTui(initialState);
   const addStep = (name, status) => {
@@ -56467,7 +57760,11 @@ async function probeModelRouting(models, jsonOutput, options = { live: true, tim
           errorMessage: String(e instanceof Error ? e.message : e)
         }));
         if (result.state === "live") {
-          updateLink(link.id, { status: "live", endTime: Date.now() });
+          updateLink(link.id, {
+            status: "live",
+            endTime: Date.now(),
+            timing: result.timing
+          });
         } else {
           updateLink(link.id, {
             status: "failed",
@@ -56485,8 +57782,10 @@ async function probeModelRouting(models, jsonOutput, options = { live: true, tim
     }
     const isLiveProbe = !!liveProxy;
     const printable = [];
+    const results = [];
     for (const { modelInput, parsed, chain, chainDetails } of modelChains) {
       const wiring = await computeWiring(chainDetails, parsed.model);
+      const directProbe = directProbeResults.get(modelInput);
       printable.push({
         model: modelInput,
         nativeProvider: parsed.provider,
@@ -56502,18 +57801,42 @@ async function probeModelRouting(models, jsonOutput, options = { live: true, tim
           provenance: c.provenance,
           probe: c.probe
         })),
-        directProbe: directProbeResults.get(modelInput),
+        directProbe,
+        wiring
+      });
+      results.push({
+        model: modelInput,
+        nativeProvider: parsed.provider,
+        isExplicit: parsed.isExplicitProvider,
+        routingSource: chain.source,
+        matchedPattern: chain.matchedPattern,
+        routingExplanation: buildRoutingExplanation(parsed, chain),
+        links: buildResultLinks(parsed, chainDetails, directProbe),
         wiring
       });
     }
-    if (liveProxy) {
-      try {
-        await liveProxy.shutdown();
-      } catch {}
-      liveProxy = null;
+    const interactive = !!process.stdout.isTTY && !!process.stderr.isTTY;
+    if (interactive) {
+      if (liveProxy) {
+        try {
+          await liveProxy.shutdown();
+        } catch {}
+        liveProxy = null;
+      }
+      tui.store.setResults(results);
+      await tui.waitForQuit();
+      await tui.shutdown();
+      printLeaderboardScrollback(printable, isLiveProbe);
+    } else {
+      if (liveProxy) {
+        try {
+          await liveProxy.shutdown();
+        } catch {}
+        liveProxy = null;
+      }
+      await tui.shutdown();
+      printProbeResults(printable, isLiveProbe);
     }
-    await tui.shutdown();
-    printProbeResults(printable, isLiveProbe);
   } finally {
     if (liveProxy) {
       try {
@@ -58045,7 +59368,7 @@ var init_providers = __esm(() => {
 });
 
 // src/tui/constants.ts
-var COMMON_MODELS, PROVIDER_PREFIXES, CHAIN_PROVIDERS, HEADER_H = 1, TABS_H = 3, FOOTER_H = 1, DETAIL_H = 7, VERSION2 = "v5.16";
+var COMMON_MODELS, PROVIDER_PREFIXES, CHAIN_PROVIDERS, HEADER_H = 2, TABS_H = 3, FOOTER_H = 1, DETAIL_H = 7;
 var init_constants3 = __esm(() => {
   init_providers();
   COMMON_MODELS = [
@@ -58239,6 +59562,7 @@ function useProfileWizard(args) {
   const [suggestions, setSuggestions] = useState4([]);
   const [suggestionIndex, setSuggestionIndex] = useState4(-1);
   const [providerPickerIndex, setProviderPickerIndex] = useState4(0);
+  const [scopeCursor, setScopeCursor] = useState4(0);
   const [providerPickerReturnMode, setProviderPickerReturnMode] = useState4("edit_profile_opus");
   const saveModelField = useCallback2((currentMode, fieldVal) => {
     const val = fieldVal.trim() === "auto" ? undefined : fieldVal.trim();
@@ -58304,6 +59628,7 @@ function useProfileWizard(args) {
   const startNewProfile = useCallback2(() => {
     setEditProfileValue("");
     setProfileScope("global");
+    setScopeCursor(0);
     setMode("pick_profile_scope");
     setStatusMsg(null);
   }, [setMode, setStatusMsg]);
@@ -58322,9 +59647,19 @@ function useProfileWizard(args) {
   }, [setMode, setStatusMsg]);
   const pickScope = useCallback2((scope) => {
     setProfileScope(scope);
+    setScopeCursor(scope === "global" ? 0 : 1);
     setEditProfileValue("");
     setMode("new_profile");
   }, [setMode]);
+  const pickScopeAtCursor = useCallback2(() => {
+    pickScope(scopeCursor === 0 ? "global" : "project");
+  }, [pickScope, scopeCursor]);
+  const setScopeCursorVerb = useCallback2((index) => {
+    setScopeCursor(index === 0 ? 0 : 1);
+  }, []);
+  const setProviderPickerIndexVerb = useCallback2((index) => {
+    setProviderPickerIndex(index < 0 ? 0 : index);
+  }, []);
   const cancelPickScope = useCallback2(() => {
     setMode("browse");
   }, [setMode]);
@@ -58519,8 +59854,12 @@ function useProfileWizard(args) {
     suggestions,
     suggestionIndex,
     providerPickerIndex,
+    scopeCursor,
     startNewProfile,
     pickScope,
+    pickScopeAtCursor,
+    setScopeCursor: setScopeCursorVerb,
+    setProviderPickerIndex: setProviderPickerIndexVerb,
     cancelPickScope,
     startEditExisting,
     newProfileSubmit,
@@ -58561,7 +59900,7 @@ var init_useProfileWizard = __esm(() => {
 
 // src/tui/components/TabBar.tsx
 import { jsxDEV as jsxDEV3 } from "@opentui/react/jsx-dev-runtime";
-function TabBar({ activeTab, statusMsg, width }) {
+function TabBar2({ activeTab, statusMsg }) {
   const tabs = [
     { label: "Providers", value: "providers", num: "1" },
     { label: "Profiles", value: "profiles", num: "2" },
@@ -58614,11 +59953,11 @@ function TabBar({ activeTab, statusMsg, width }) {
       /* @__PURE__ */ jsxDEV3("box", {
         height: 1,
         paddingX: 1,
-        children: /* @__PURE__ */ jsxDEV3("text", {
-          children: /* @__PURE__ */ jsxDEV3("span", {
-            fg: C.tabActiveBg,
-            children: "\u2500".repeat(Math.max(0, width - 2))
-          }, undefined, false, undefined, this)
+        children: /* @__PURE__ */ jsxDEV3("box", {
+          flexGrow: 1,
+          border: ["top"],
+          borderStyle: "single",
+          borderColor: C.tabActiveBg
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV3("box", {
@@ -58691,26 +60030,8 @@ function Footer({ activeTab, mode, probeMode, providerCaps }) {
     if (showRemove)
       keys.push([C.red, "x", "remove"]);
     keys.push([C.dim, "q", "quit"]);
-  } else if (activeTab === "profiles" && mode === "pick_profile_scope") {
-    keys = [
-      [C.green, "g", "global"],
-      [C.cyan, "p", "project"],
-      [C.red, "Esc", "cancel"]
-    ];
-  } else if (activeTab === "profiles" && mode === "pick_provider_prefix") {
-    keys = [
-      [C.blue, "\u2191\u2193", "navigate"],
-      [C.green, "Enter", "select prefix"],
-      [C.red, "Esc", "back"]
-    ];
   } else if (activeTab === "profiles" && isProfileEditMode) {
-    keys = [
-      [C.green, "Enter", "save field"],
-      [C.blue, "Tab", "provider picker"],
-      [C.blue, "\u2191\u2193", "suggestion"],
-      [C.yellow, "a", "auto-route"],
-      [C.red, "Esc", "cancel"]
-    ];
+    keys = [[C.dim, "wizard", "follow the panel above"]];
   } else if (activeTab === "profiles") {
     keys = [
       [C.blue, "\u2191\u2193", "navigate"],
@@ -58752,24 +60073,22 @@ function Footer({ activeTab, mode, probeMode, providerCaps }) {
     paddingX: 1,
     backgroundColor: C.bgAlt,
     children: /* @__PURE__ */ jsxDEV4("text", {
-      children: keys.map(([color, key, label], i) => /* @__PURE__ */ jsxDEV4("span", {
+      children: keys.map(([_color, key, label], i) => /* @__PURE__ */ jsxDEV4("span", {
         children: [
           i > 0 && /* @__PURE__ */ jsxDEV4("span", {
-            fg: C.dim,
-            children: " \u2502 "
+            children: "  "
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV4("span", {
-            fg: color,
+            fg: C.fg,
+            bg: C.chipKeyBg,
             attributes: A.bold,
-            children: key
+            children: ` ${key} `
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV4("span", {
             fg: C.fgMuted,
-            children: [
-              " ",
-              label
-            ]
-          }, undefined, true, undefined, this)
+            bg: C.chipLabelBg,
+            children: `${label} `
+          }, undefined, false, undefined, this)
         ]
       }, i, true, undefined, this))
     }, undefined, false, undefined, this)
@@ -58807,13 +60126,21 @@ function ProvidersContent({
   displayProviders,
   providerIndex,
   testResults,
-  width,
   contentH,
   isInputMode,
   animTick
 }) {
-  const listH = contentH - 4;
-  let separatorRendered = false;
+  const firstUnreadyIdx = displayProviders.findIndex((p) => providerAuthSource(p, config3) === null);
+  const hasDivider = firstUnreadyIdx >= 0;
+  const listH = contentH - 4 - (hasDivider ? 1 : 0);
+  const scrollOffset = (() => {
+    if (listH <= 0 || displayProviders.length <= listH)
+      return 0;
+    if (providerIndex < listH)
+      return 0;
+    const maxOffset = displayProviders.length - listH;
+    return Math.min(providerIndex - listH + 1, maxOffset);
+  })();
   const getRow = (p, idx) => {
     const auth = providerAuthSource(p, config3);
     const caps = providerAuthCapabilities(p, config3);
@@ -58836,9 +60163,7 @@ function ProvidersContent({
     } else {
       keyDisplay = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
     }
-    const isFirstUnready = !isReady && !separatorRendered;
-    if (isFirstUnready)
-      separatorRendered = true;
+    const isFirstUnready = idx === firstUnreadyIdx;
     let statusFg = isReady ? C.green : C.dim;
     let statusText = p.isLocal ? isReady ? "enabled" : "disabled" : isReady ? "ready" : "not set";
     if (tr) {
@@ -58863,17 +60188,23 @@ function ProvidersContent({
       children: [
         isFirstUnready && /* @__PURE__ */ jsxDEV5("box", {
           height: 1,
+          flexDirection: "row",
           paddingX: 1,
-          children: /* @__PURE__ */ jsxDEV5("text", {
-            children: /* @__PURE__ */ jsxDEV5("span", {
-              fg: C.dim,
-              children: [
-                "\u2500 not configured ",
-                "\u2500".repeat(Math.max(0, width - 22))
-              ]
-            }, undefined, true, undefined, this)
-          }, undefined, false, undefined, this)
-        }, undefined, false, undefined, this),
+          children: [
+            /* @__PURE__ */ jsxDEV5("text", {
+              children: /* @__PURE__ */ jsxDEV5("span", {
+                fg: C.dim,
+                children: "\u2500 not configured "
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV5("box", {
+              flexGrow: 1,
+              border: ["top"],
+              borderStyle: "single",
+              borderColor: C.dim
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
         /* @__PURE__ */ jsxDEV5("box", {
           height: 1,
           flexGrow: 1,
@@ -59006,7 +60337,7 @@ function ProvidersContent({
       /* @__PURE__ */ jsxDEV5("box", {
         flexDirection: "column",
         style: { flexGrow: 1 },
-        children: displayProviders.slice(0, listH).map(getRow)
+        children: displayProviders.slice(scrollOffset, scrollOffset + listH).map((p, i) => getRow(p, scrollOffset + i))
       }, undefined, false, undefined, this),
       /* @__PURE__ */ jsxDEV5("text", {
         height: 1,
@@ -59339,20 +60670,45 @@ var init_ProviderDetail = __esm(() => {
 
 // src/tui/components/ProfilesContent.tsx
 import { jsxDEV as jsxDEV7, Fragment as Fragment4 } from "@opentui/react/jsx-dev-runtime";
+function stepLabel(mode) {
+  const idx = WIZARD_STEPS.indexOf(mode);
+  const stepNo = idx >= 0 ? idx + 1 : 0;
+  const prefix = stepNo > 0 ? `Step ${stepNo} of ${TOTAL_STEPS} \u2014 ` : "";
+  switch (mode) {
+    case "pick_profile_scope":
+      return { title: "New Profile", header: `${prefix}Choose scope` };
+    case "new_profile":
+      return { title: "New Profile", header: `${prefix}Profile name` };
+    case "edit_profile_opus":
+      return { title: "New Profile", header: `${prefix}opus model` };
+    case "edit_profile_sonnet":
+      return { title: "New Profile", header: `${prefix}sonnet model` };
+    case "edit_profile_haiku":
+      return { title: "New Profile", header: `${prefix}haiku model` };
+    case "edit_profile_subagent":
+      return { title: "New Profile", header: `${prefix}subagent model (optional)` };
+    case "pick_provider_prefix":
+      return { title: "Choose provider", header: "Pick a provider prefix" };
+    default:
+      return { title: "New Profile", header: "" };
+  }
+}
 function ProfilesContent({
   config: config3,
   activeTab,
   mode,
   profileScope,
   profileIndex,
-  editProfileName,
   editProfileValue,
   suggestions,
   suggestionIndex,
   providerPickerIndex,
-  contentH
+  contentH,
+  onScopeChange,
+  onPrefixChange
 }) {
   const isProfileEditMode = mode === "new_profile" || mode === "pick_profile_scope" || mode === "pick_provider_prefix" || mode === "edit_profile_opus" || mode === "edit_profile_sonnet" || mode === "edit_profile_haiku" || mode === "edit_profile_subagent";
+  const isTextStep = mode === "new_profile" || mode === "edit_profile_opus" || mode === "edit_profile_sonnet" || mode === "edit_profile_haiku" || mode === "edit_profile_subagent";
   const globalCfg = config3;
   const localCfg = loadLocalConfig();
   const localProfileNames = localCfg ? new Set(Object.keys(localCfg.profiles)) : new Set;
@@ -59367,7 +60723,17 @@ function ProfilesContent({
   }
   const activeProfileName = globalCfg.defaultProfile;
   const listH = contentH - 2;
-  const editPromptLabel = mode === "new_profile" ? `New ${profileScope} profile \u2014 name:` : mode === "pick_profile_scope" ? "Scope for new profile:" : mode === "pick_provider_prefix" ? "Select provider:" : mode === "edit_profile_opus" ? `${editProfileName} \u2014 opus model:` : mode === "edit_profile_sonnet" ? `${editProfileName} \u2014 sonnet model:` : mode === "edit_profile_haiku" ? `${editProfileName} \u2014 haiku model:` : mode === "edit_profile_subagent" ? `${editProfileName} \u2014 subagent model (optional):` : null;
+  const { title: modalTitle, header: modalHeader } = stepLabel(mode);
+  const scopeOptions = [
+    { name: "global    ~/.claudish/config.json", description: "", value: "global" },
+    { name: "project   ./.claudish.json", description: "", value: "project" }
+  ];
+  const prefixColW = PROVIDER_PREFIXES.reduce((max, p) => Math.max(max, p.prefix.length), 0) + 2;
+  const prefixOptions = PROVIDER_PREFIXES.map((p) => ({
+    name: `${p.prefix.padEnd(prefixColW)}${p.displayName}`,
+    description: "",
+    value: p.prefix
+  }));
   return /* @__PURE__ */ jsxDEV7("box", {
     height: contentH,
     border: true,
@@ -59472,97 +60838,69 @@ function ProfilesContent({
           children: "  No project-level profiles (.claudish.json)"
         }, undefined, false, undefined, this)
       }, undefined, false, undefined, this),
-      isProfileEditMode && editPromptLabel && /* @__PURE__ */ jsxDEV7("box", {
+      isProfileEditMode && /* @__PURE__ */ jsxDEV7("box", {
+        border: true,
+        borderStyle: "rounded",
+        borderColor: C.blue,
+        title: modalTitle,
+        titleAlignment: "left",
+        backgroundColor: C.bg,
         flexDirection: "column",
-        paddingTop: 1,
+        paddingX: 1,
+        marginTop: 1,
         children: [
           /* @__PURE__ */ jsxDEV7("text", {
             children: /* @__PURE__ */ jsxDEV7("span", {
-              fg: C.blue,
+              fg: C.cyan,
               attributes: A.bold,
-              children: editPromptLabel + " "
+              children: modalHeader
             }, undefined, false, undefined, this)
           }, undefined, false, undefined, this),
           mode === "pick_profile_scope" && /* @__PURE__ */ jsxDEV7("box", {
             flexDirection: "column",
+            paddingTop: 1,
             children: [
-              /* @__PURE__ */ jsxDEV7("box", {
-                height: 1,
-                flexDirection: "row",
-                children: [
-                  /* @__PURE__ */ jsxDEV7("box", {
-                    width: 16,
-                    height: 1,
-                    backgroundColor: C.bgHighlight,
-                    paddingX: 1,
-                    children: /* @__PURE__ */ jsxDEV7("text", {
-                      children: [
-                        /* @__PURE__ */ jsxDEV7("span", {
-                          fg: C.green,
-                          attributes: A.bold,
-                          children: "g"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV7("span", {
-                          fg: C.white,
-                          children: " global"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV7("box", {
-                    width: 2
-                  }, undefined, false, undefined, this),
-                  /* @__PURE__ */ jsxDEV7("box", {
-                    width: 16,
-                    height: 1,
-                    paddingX: 1,
-                    children: /* @__PURE__ */ jsxDEV7("text", {
-                      children: [
-                        /* @__PURE__ */ jsxDEV7("span", {
-                          fg: C.cyan,
-                          attributes: A.bold,
-                          children: "p"
-                        }, undefined, false, undefined, this),
-                        /* @__PURE__ */ jsxDEV7("span", {
-                          fg: C.fgMuted,
-                          children: " project (.claudish.json)"
-                        }, undefined, false, undefined, this)
-                      ]
-                    }, undefined, true, undefined, this)
-                  }, undefined, false, undefined, this)
-                ]
-              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV7("select", {
+                options: scopeOptions,
+                focused: true,
+                showDescription: false,
+                wrapSelection: true,
+                onChange: onScopeChange,
+                backgroundColor: C.bg,
+                textColor: C.fgMuted,
+                selectedBackgroundColor: C.bgHighlight,
+                selectedTextColor: C.white,
+                height: scopeOptions.length
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("text", {
+                children: /* @__PURE__ */ jsxDEV7("span", {
+                  fg: C.dim,
+                  children: " "
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV7("text", {
                 children: [
-                  /* @__PURE__ */ jsxDEV7("span", {
-                    fg: C.green,
-                    attributes: A.bold,
-                    children: [
-                      "g",
-                      " "
-                    ]
-                  }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "global \xB7 "
+                    children: "\u2191\u2193 move \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
-                    fg: C.cyan,
+                    fg: C.green,
                     attributes: A.bold,
                     children: [
-                      "p",
+                      "\u23CE",
                       " "
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "project \xB7 "
+                    children: "next \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.red,
                     attributes: A.bold,
                     children: [
-                      "Esc",
+                      "esc",
                       " "
                     ]
                   }, undefined, true, undefined, this),
@@ -59576,63 +60914,51 @@ function ProfilesContent({
           }, undefined, true, undefined, this),
           mode === "pick_provider_prefix" && /* @__PURE__ */ jsxDEV7("box", {
             flexDirection: "column",
+            paddingTop: 1,
             children: [
-              PROVIDER_PREFIXES.slice(0, 8).map((p, idx) => /* @__PURE__ */ jsxDEV7("box", {
-                height: 1,
-                backgroundColor: idx === providerPickerIndex ? C.bgHighlight : C.bg,
-                children: /* @__PURE__ */ jsxDEV7("text", {
-                  children: [
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      fg: idx === providerPickerIndex ? C.white : C.dim,
-                      children: " "
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      fg: idx === providerPickerIndex ? C.cyan : C.fgMuted,
-                      attributes: A.boldIf(idx === providerPickerIndex),
-                      children: p.prefix.padEnd(14).substring(0, 14)
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      fg: C.dim,
-                      children: "  "
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV7("span", {
-                      fg: idx === providerPickerIndex ? C.fgMuted : C.dim,
-                      children: p.displayName
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this)
-              }, p.name, false, undefined, this)),
+              /* @__PURE__ */ jsxDEV7("select", {
+                options: prefixOptions,
+                focused: true,
+                showDescription: false,
+                wrapSelection: true,
+                selectedIndex: providerPickerIndex,
+                onChange: onPrefixChange,
+                backgroundColor: C.bg,
+                textColor: C.fgMuted,
+                selectedBackgroundColor: C.bgHighlight,
+                selectedTextColor: C.cyan,
+                height: Math.min(8, prefixOptions.length),
+                showScrollIndicator: true
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV7("text", {
+                children: /* @__PURE__ */ jsxDEV7("span", {
+                  fg: C.dim,
+                  children: " "
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this),
               /* @__PURE__ */ jsxDEV7("text", {
                 children: [
-                  /* @__PURE__ */ jsxDEV7("span", {
-                    fg: C.blue,
-                    attributes: A.bold,
-                    children: [
-                      "\u2191\u2193",
-                      " "
-                    ]
-                  }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "navigate \xB7 "
+                    children: "\u2191\u2193 move \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.green,
                     attributes: A.bold,
                     children: [
-                      "Enter",
+                      "\u23CE",
                       " "
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "select prefix \xB7 "
+                    children: "select \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.red,
                     attributes: A.bold,
                     children: [
-                      "Esc",
+                      "esc",
                       " "
                     ]
                   }, undefined, true, undefined, this),
@@ -59644,9 +60970,23 @@ function ProfilesContent({
               }, undefined, true, undefined, this)
             ]
           }, undefined, true, undefined, this),
-          mode !== "pick_profile_scope" && mode !== "pick_provider_prefix" && /* @__PURE__ */ jsxDEV7("box", {
+          isTextStep && /* @__PURE__ */ jsxDEV7("box", {
             flexDirection: "column",
+            paddingTop: 1,
             children: [
+              mode === "new_profile" && /* @__PURE__ */ jsxDEV7("text", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: C.fgMuted,
+                    children: "scope: "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: profileScope === "project" ? C.cyan : C.green,
+                    attributes: A.bold,
+                    children: profileScope
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
               /* @__PURE__ */ jsxDEV7("text", {
                 children: [
                   /* @__PURE__ */ jsxDEV7("span", {
@@ -59704,7 +61044,34 @@ function ProfilesContent({
                   }, s, false, undefined, this);
                 })
               }, undefined, false, undefined, this),
-              editProfileValue === "auto" ? /* @__PURE__ */ jsxDEV7("text", {
+              mode === "new_profile" ? /* @__PURE__ */ jsxDEV7("text", {
+                children: [
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: C.green,
+                    attributes: A.bold,
+                    children: [
+                      "\u23CE",
+                      " "
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: C.fgMuted,
+                    children: "next \xB7 "
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: C.red,
+                    attributes: A.bold,
+                    children: [
+                      "esc",
+                      " "
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV7("span", {
+                    fg: C.fgMuted,
+                    children: "cancel"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this) : editProfileValue === "auto" ? /* @__PURE__ */ jsxDEV7("text", {
                 children: [
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.yellow,
@@ -59716,25 +61083,25 @@ function ProfilesContent({
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "\u2014 claudish will use the routing table \xB7 "
+                    children: "\u2014 uses routing table \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.green,
                     attributes: A.bold,
                     children: [
-                      "Enter",
+                      "\u23CE",
                       " "
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "to confirm \xB7 "
+                    children: "next \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.red,
                     attributes: A.bold,
                     children: [
-                      "Esc",
+                      "esc",
                       " "
                     ]
                   }, undefined, true, undefined, this),
@@ -59749,25 +61116,25 @@ function ProfilesContent({
                     fg: C.green,
                     attributes: A.bold,
                     children: [
-                      "Enter",
+                      "\u23CE",
                       " "
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "save \xB7 "
+                    children: "next \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.blue,
                     attributes: A.bold,
                     children: [
-                      "Tab",
+                      "\u21E5",
                       " "
                     ]
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: editProfileValue === "" ? "pick provider \xB7 " : "autocomplete \xB7 "
+                    children: editProfileValue === "" ? "provider \xB7 " : "complete \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.blue,
@@ -59779,7 +61146,7 @@ function ProfilesContent({
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "suggestion \xB7 "
+                    children: "pick \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.yellow,
@@ -59791,13 +61158,13 @@ function ProfilesContent({
                   }, undefined, true, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.fgMuted,
-                    children: "auto-route \xB7 "
+                    children: "auto \xB7 "
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV7("span", {
                     fg: C.red,
                     attributes: A.bold,
                     children: [
-                      "Esc",
+                      "esc",
                       " "
                     ]
                   }, undefined, true, undefined, this),
@@ -59814,10 +61181,20 @@ function ProfilesContent({
     ]
   }, undefined, true, undefined, this);
 }
+var WIZARD_STEPS, TOTAL_STEPS;
 var init_ProfilesContent = __esm(() => {
   init_theme2();
   init_constants3();
   init_profile_config();
+  WIZARD_STEPS = [
+    "pick_profile_scope",
+    "new_profile",
+    "edit_profile_opus",
+    "edit_profile_sonnet",
+    "edit_profile_haiku",
+    "edit_profile_subagent"
+  ];
+  TOTAL_STEPS = WIZARD_STEPS.length;
 });
 
 // src/tui/components/ProfileDetail.tsx
@@ -59920,7 +61297,7 @@ var init_ProfileDetail = __esm(() => {
 });
 
 // src/tui/components/RoutingContent.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { jsxDEV as jsxDEV9, Fragment as Fragment6 } from "@opentui/react/jsx-dev-runtime";
 function chainStr(chain) {
   return chain.join(" \u2192 ");
@@ -59943,8 +61320,8 @@ function RoutingContent({
   editingExistingScope,
   routingScopeCursor
 }) {
-  const rulesScrollRef = useRef2(null);
-  const chainScrollRef = useRef2(null);
+  const rulesScrollRef = useRef3(null);
+  const chainScrollRef = useRef3(null);
   useEffect3(() => {
     const sb = rulesScrollRef.current;
     if (!sb || mergedRules.length === 0)
@@ -61132,12 +62509,12 @@ var init_PrivacyDetail = __esm(() => {
 });
 
 // src/tui/App.tsx
-import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import { useKeyboard as useKeyboard2, useRenderer, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
 import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useState as useState5 } from "react";
 import { jsxDEV as jsxDEV13, Fragment as Fragment7 } from "@opentui/react/jsx-dev-runtime";
 function App({ requestLogin } = {}) {
   const renderer = useRenderer();
-  const { width, height: height2 } = useTerminalDimensions();
+  const { width, height: height2 } = useTerminalDimensions2();
   const [config3, setConfig] = useState5(() => loadConfig());
   const [bufStats, setBufStats] = useState5(() => getBufferStats());
   const [providerIndex, setProviderIndex] = useState5(0);
@@ -61186,7 +62563,6 @@ function App({ requestLogin } = {}) {
   const { probeMode, probeModel, probeResults } = probe;
   const wizard = useProfileWizard({ mode, setMode, refreshConfig, setStatusMsg });
   const {
-    editProfileName,
     editProfileValue,
     profileScope,
     suggestions,
@@ -61238,7 +62614,6 @@ function App({ requestLogin } = {}) {
     return out;
   }, [config3.routing, JSON.stringify(loadLocalConfig()?.routing ?? {})]);
   const profileName = config3.defaultProfile || "default";
-  const readyCount = PROVIDERS.filter((p) => !!(config3.apiKeys?.[p.apiKeyEnvVar] || process.env[p.apiKeyEnvVar])).length;
   const runProbeTest = useCallback3(async (prov) => {
     const provName = prov.name;
     setTestResults((prev) => ({ ...prev, [provName]: { status: "testing" } }));
@@ -61322,7 +62697,7 @@ function App({ requestLogin } = {}) {
       }));
     }
   }, []);
-  useKeyboard((key) => {
+  useKeyboard2((key) => {
     if (key.ctrl && key.name === "c")
       return quit();
     if (probeMode === "input") {
@@ -61549,10 +62924,8 @@ function App({ requestLogin } = {}) {
       return;
     }
     if (mode === "pick_profile_scope") {
-      if (key.raw === "g" || key.raw === "G") {
-        wizard.pickScope("global");
-      } else if (key.raw === "p" || key.raw === "P") {
-        wizard.pickScope("project");
+      if (key.name === "return" || key.name === "enter") {
+        wizard.pickScopeAtCursor();
       } else if (key.name === "escape") {
         wizard.cancelPickScope();
       }
@@ -61571,11 +62944,7 @@ function App({ requestLogin } = {}) {
       return;
     }
     if (mode === "pick_provider_prefix") {
-      if (key.name === "up" || key.name === "k") {
-        wizard.prefixPickerUp();
-      } else if (key.name === "down" || key.name === "j") {
-        wizard.prefixPickerDown();
-      } else if (key.name === "return" || key.name === "enter") {
+      if (key.name === "return" || key.name === "enter") {
         wizard.prefixPickerSubmit();
       } else if (key.name === "escape") {
         wizard.prefixPickerCancel();
@@ -61920,61 +63289,64 @@ function App({ requestLogin } = {}) {
     children: [
       /* @__PURE__ */ jsxDEV13("box", {
         height: HEADER_H,
-        flexDirection: "row",
+        flexDirection: "column",
         backgroundColor: C.bgAlt,
         paddingX: 1,
-        children: /* @__PURE__ */ jsxDEV13("text", {
-          children: [
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.white,
-              attributes: A.bold,
-              children: "claudish"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.dim,
-              children: " \u2500 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.blue,
-              attributes: A.bold,
-              children: VERSION2
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.dim,
-              children: " \u2500 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.orange,
-              attributes: A.bold,
+        children: [
+          /* @__PURE__ */ jsxDEV13("box", {
+            height: 1,
+            flexDirection: "row",
+            children: /* @__PURE__ */ jsxDEV13("text", {
               children: [
-                "\u2605 ",
-                profileName
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.white,
+                  attributes: A.bold,
+                  children: "claudish"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.dim,
+                  children: " \u2500 "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.blue,
+                  attributes: A.bold,
+                  children: `v${VERSION}`
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.dim,
+                  children: " \u2500 "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.fgMuted,
+                  children: "by MadAppGang"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.dim,
+                  children: " \u2500 "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.fgMuted,
+                  children: "profile: "
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV13("span", {
+                  fg: C.orange,
+                  attributes: A.bold,
+                  children: `[${profileName}]`
+                }, undefined, false, undefined, this)
               ]
-            }, undefined, true, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.dim,
-              children: " \u2500 "
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.green,
-              attributes: A.bold,
-              children: readyCount
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.fgMuted,
-              children: " providers configured"
-            }, undefined, false, undefined, this),
-            /* @__PURE__ */ jsxDEV13("span", {
-              fg: C.dim,
-              children: "\u2500".repeat(Math.max(1, width - 38 - profileName.length - VERSION2.length))
-            }, undefined, false, undefined, this)
-          ]
-        }, undefined, true, undefined, this)
-      }, undefined, false, undefined, this),
-      /* @__PURE__ */ jsxDEV13(TabBar, {
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV13("box", {
+            flexGrow: 1,
+            border: ["bottom"],
+            borderStyle: "single",
+            borderColor: C.dim
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV13(TabBar2, {
         activeTab,
-        statusMsg,
-        width
+        statusMsg
       }, undefined, false, undefined, this),
       activeTab === "providers" && /* @__PURE__ */ jsxDEV13(Fragment7, {
         children: [
@@ -61983,7 +63355,6 @@ function App({ requestLogin } = {}) {
             displayProviders,
             providerIndex,
             testResults,
-            width,
             contentH,
             isInputMode,
             animTick
@@ -62013,13 +63384,14 @@ function App({ requestLogin } = {}) {
             mode,
             profileScope,
             profileIndex,
-            editProfileName,
             editProfileValue,
             suggestions,
             suggestionIndex,
             providerPickerIndex,
             width,
-            contentH
+            contentH,
+            onScopeChange: wizard.setScopeCursor,
+            onPrefixChange: wizard.setProviderPickerIndex
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV13(ProfileDetail, {
             config: config3,