recappi 0.1.54 → 0.1.55

package/dist/index.js

@@ -59,18 +59,18 @@ function applyRecordingEventToTelemetry(telemetry, event) {
   }
   if (event.type === "audio.level") {
     const level = levelFromRmsDb(event.rmsDb);
-    const levelDb3 = typeof event.rmsDb === "number" && Number.isFinite(event.rmsDb) ? event.rmsDb : void 0;
+    const levelDb4 = typeof event.rmsDb === "number" && Number.isFinite(event.rmsDb) ? event.rmsDb : void 0;
     if (event.input === "microphone") {
       return {
         ...telemetry,
         level: { ...telemetry.level, mic: level },
-        levelDb: { ...telemetry.levelDb, ...levelDb3 != null ? { mic: levelDb3 } : {} }
+        levelDb: { ...telemetry.levelDb, ...levelDb4 != null ? { mic: levelDb4 } : {} }
       };
     }
     return {
       ...telemetry,
       level: { ...telemetry.level, system: level },
-      levelDb: { ...telemetry.levelDb, ...levelDb3 != null ? { system: levelDb3 } : {} }
+      levelDb: { ...telemetry.levelDb, ...levelDb4 != null ? { system: levelDb4 } : {} }
     };
   }
   if (event.type === "error") {
@@ -199,8 +199,8 @@ function jobDetail(item) {
   if (item.status === "running") {
     const fraction = transcribeFraction(item);
     if (fraction != null) {
-      const pct = Math.round(fraction * 100);
-      return `${progressBar(fraction)} ${String(pct).padStart(3)}%  ${formatClockMs(
+      const pct2 = Math.round(fraction * 100);
+      return `${progressBar(fraction)} ${String(pct2).padStart(3)}%  ${formatClockMs(
         item.processedDurationMs
       )} / ${formatClockMs(item.recording?.durationMs)}`;
     }
@@ -591,704 +591,436 @@ var init_LiveCaptionsScreen = __esm({
   }
 });
 
-// src/tui/RecordingHeroScreen.tsx
-import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
-import { Box as Box2, Text as Text2, useInput as useInput2 } from "ink";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function waveRowsFor(terminalRows) {
-  return terminalRows >= 30 ? 5 : 3;
+// src/tui/AccountView.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function AccountView({
+  status,
+  nowMs = Date.now()
+}) {
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "\u2039 Account" }),
+    status === "loading" || status === void 0 ? /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Loading account\u2026" }) }) : status === "error" ? /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { color: "red", children: "Couldn't load account status" }) }) : !status.loggedIn ? /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx5(Text3, { color: "yellow", children: "Not signed in" }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `origin  ${status.origin}` }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Run `recappi auth login` to sign in." })
+    ] }) : /* @__PURE__ */ jsx5(AccountBody, { status, nowMs }),
+    /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "r refresh \xB7 esc back \xB7 q quit" }) })
+  ] });
 }
-function litCount(level, rows) {
-  const amp = Math.max(0, Math.min(1, level));
-  if (amp <= 0.028) return 0;
-  return Math.max(1, Math.min(rows, Math.ceil(Math.pow(amp, 0.58) * rows)));
+function AccountBody({
+  status,
+  nowMs
+}) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs3(Text3, { children: [
+        /* @__PURE__ */ jsx5(Text3, { color: "green", children: "\u25CF " }),
+        /* @__PURE__ */ jsx5(Text3, { bold: true, children: status.email ?? status.userId ?? "Signed in" })
+      ] }),
+      status.email && status.userId ? /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: status.userId }) : null,
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `origin  ${status.origin}` })
+    ] }),
+    status.billing ? /* @__PURE__ */ jsx5(Usage, { billing: status.billing, nowMs }) : null,
+    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsx5(Text3, { bold: true, dimColor: true, children: "LOCAL STORE" }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, wrap: "truncate-middle", children: status.localStore.path }),
+      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
+        `${status.localStore.accountScopedArtifacts} artifact${status.localStore.accountScopedArtifacts === 1 ? "" : "s"} for this account`,
+        status.localStore.unattributedArtifacts > 0 ? ` \xB7 ${status.localStore.unattributedArtifacts} unattributed` : ""
+      ] })
+    ] })
+  ] });
 }
-function litCounts(samples, width, rows) {
-  if (width <= 0) return [];
-  const tail = samples.slice(-width);
-  return [...Array(Math.max(0, width - tail.length)).fill(0), ...tail].map((v) => litCount(v, rows));
+function Usage({
+  billing,
+  nowMs
+}) {
+  const minutesCap = billing.minutesCap;
+  const minutesUsed = billing.minutesUsed;
+  const storageCap = billing.storageCapBytes;
+  return /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
+    /* @__PURE__ */ jsx5(Text3, { bold: true, dimColor: true, children: "USAGE" }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Plan " }),
+      /* @__PURE__ */ jsx5(Text3, { bold: true, children: billing.tier })
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Minutes " }),
+      minutesCap != null ? /* @__PURE__ */ jsx5(Text3, { color: billing.isOverMinutes ? "red" : "cyan", children: `${progressBar(minutesUsed / Math.max(1, minutesCap), 12)} ` }) : null,
+      /* @__PURE__ */ jsx5(Text3, { color: billing.isOverMinutes ? "red" : void 0, children: `${Math.round(minutesUsed)}` }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: ` / ${minutesCap != null ? Math.round(minutesCap) : "\u221E"} min` }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `   (batch ${Math.round(billing.batchMinutesUsed)} \xB7 live ${Math.round(billing.realtimeMinutesUsed)})` })
+    ] }),
+    /* @__PURE__ */ jsxs3(Text3, { children: [
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Storage " }),
+      storageCap != null ? /* @__PURE__ */ jsx5(Text3, { color: billing.isOverStorage ? "red" : "cyan", children: `${progressBar(billing.storageBytes / Math.max(1, storageCap), 12)} ` }) : null,
+      /* @__PURE__ */ jsx5(Text3, { color: billing.isOverStorage ? "red" : void 0, children: formatBytes2(billing.storageBytes) }),
+      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: ` / ${storageCap != null ? formatBytes2(storageCap) : "\u221E"}` })
+    ] }),
+    billing.isOverMinutes || billing.isOverStorage ? /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
+      billing.isOverMinutes ? "Over minutes limit. " : "",
+      billing.isOverStorage ? "Over storage limit." : ""
+    ] }) : null,
+    /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `Period ${periodText(billing, nowMs)}` })
+  ] });
 }
-function levelDb(level) {
-  if (level <= 0.03) return "silent";
-  return `${Math.round(level * 60 - 60)} dB`;
+function periodText(billing, nowMs) {
+  const remainingMs = epochToMs(billing.periodEnd) - nowMs;
+  if (!Number.isFinite(remainingMs) || remainingMs <= 0) return "\u2014";
+  const days = Math.floor(remainingMs / 864e5);
+  if (days >= 1) return `${days}d left`;
+  return `${formatClockMs(remainingMs)} left`;
 }
-function MeterRow({
+function epochToMs(value) {
+  return value > 1e12 ? value : value * 1e3;
+}
+var init_AccountView = __esm({
+  "src/tui/AccountView.tsx"() {
+    "use strict";
+    init_format();
+  }
+});
+
+// src/tui/chrome.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Header({ active }) {
+  return /* @__PURE__ */ jsxs4(Box4, { children: [
+    /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "green", children: [
+      "\u25CF Recappi",
+      "   "
+    ] }),
+    /* @__PURE__ */ jsx6(Tab, { num: "1", label: "Overview", active: active === "overview" }),
+    /* @__PURE__ */ jsx6(Tab, { num: "2", label: "Jobs", active: active === "jobs" }),
+    /* @__PURE__ */ jsx6(Tab, { num: "3", label: "Account", active: active === "account" })
+  ] });
+}
+function Tab({
+  num,
   label,
-  samples,
-  level,
-  paused,
-  width,
-  rows
+  active
 }) {
-  const silent = level <= 0.03;
-  const cols = litCounts(samples, width, rows);
-  const litColor = paused ? "gray" : "cyan";
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs2(Box2, { width: width + 9, children: [
-      /* @__PURE__ */ jsx3(Box2, { width: 9, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: label }) }),
-      /* @__PURE__ */ jsx3(Box2, { flexGrow: 1, justifyContent: "flex-end", children: !paused && silent ? /* @__PURE__ */ jsx3(Text2, { color: "yellow", children: "silent" }) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: paused ? "paused" : levelDb(level) }) })
-    ] }),
-    Array.from({ length: rows }, (_, r) => {
-      const fromBottom = rows - r;
-      return /* @__PURE__ */ jsx3(Text2, { children: cols.map(
-        (c, i) => c >= fromBottom ? /* @__PURE__ */ jsx3(Text2, { color: litColor, children: c === fromBottom ? "\u2022" : "\u25CF" }, i) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\xB7" }, i)
-      ) }, r);
-    })
+  if (active) {
+    return /* @__PURE__ */ jsx6(Text4, { bold: true, inverse: true, color: "cyan", children: ` ${num} ${label} ` });
+  }
+  return /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+    " ",
+    /* @__PURE__ */ jsx6(Text4, { color: "cyan", children: num }),
+    ` ${label} `
   ] });
 }
-function ProgressBar({ fraction, width = 12 }) {
-  const f = Math.max(0, Math.min(1, fraction));
-  const filled = Math.round(f * width);
-  return /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
-    "\u2593".repeat(filled),
-    /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2591".repeat(Math.max(0, width - filled)) })
+function Footer({ keys }) {
+  const segments = keys.split(" \xB7 ");
+  return /* @__PURE__ */ jsx6(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx6(Text4, { children: segments.map((segment, i) => {
+    const space = segment.indexOf(" ");
+    const key = space === -1 ? segment : segment.slice(0, space);
+    const desc = space === -1 ? "" : segment.slice(space);
+    return /* @__PURE__ */ jsxs4(Text4, { children: [
+      i > 0 ? /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: " \xB7 " }) : null,
+      /* @__PURE__ */ jsx6(Text4, { color: "cyan", children: key }),
+      /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: desc })
+    ] }, `${segment}-${i}`);
+  }) }) });
+}
+var init_chrome = __esm({
+  "src/tui/chrome.tsx"() {
+    "use strict";
+  }
+});
+
+// src/tui/JobRow.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function JobRow({
+  item,
+  selected,
+  spinnerFrame
+}) {
+  const style = statusStyle(item.status);
+  const glyph = statusGlyph(item.status, spinnerFrame);
+  const title = item.recording?.title ?? item.recordingId;
+  return /* @__PURE__ */ jsxs5(Box5, { children: [
+    /* @__PURE__ */ jsx7(Box5, { width: 3, children: /* @__PURE__ */ jsx7(Text5, { color: "cyan", children: selected ? "\u25B8" : "" }) }),
+    /* @__PURE__ */ jsx7(Box5, { width: 2, children: /* @__PURE__ */ jsx7(Text5, { color: style.color, children: glyph }) }),
+    /* @__PURE__ */ jsx7(Box5, { width: 13, children: /* @__PURE__ */ jsx7(Text5, { color: style.color, children: style.label }) }),
+    /* @__PURE__ */ jsx7(Box5, { width: 26, children: /* @__PURE__ */ jsx7(Text5, { bold: selected, wrap: "truncate-end", children: title }) }),
+    /* @__PURE__ */ jsx7(Text5, { dimColor: !selected, children: jobDetail(item) })
   ] });
 }
-function stoppedPhase(artifact) {
-  if (!artifact) return null;
-  if (artifact.uploadStatus === "uploading") {
-    return { label: "Uploading to Recappi Cloud", fraction: artifact.uploadProgress };
+var init_JobRow = __esm({
+  "src/tui/JobRow.tsx"() {
+    "use strict";
+    init_format();
   }
-  if (artifact.uploadStatus === "queued") return { label: "Queued to upload" };
-  if (artifact.transcriptionStatus === "processing") {
-    return { label: "Transcribing", fraction: artifact.transcriptionProgress };
+});
+
+// src/tui/JobsView.tsx
+import { Box as Box6, Text as Text6 } from "ink";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function JobsView({
+  items,
+  selectedIndex,
+  spinnerFrame
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx8(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text6, { dimColor: true, children: "No transcription jobs yet \u2014 run: recappi upload <file> --transcribe" }) });
   }
-  return null;
+  return /* @__PURE__ */ jsx8(Box6, { marginTop: 1, flexDirection: "column", children: items.map((item, index) => /* @__PURE__ */ jsx8(
+    JobRow,
+    {
+      item,
+      selected: index === selectedIndex,
+      spinnerFrame
+    },
+    item.jobId
+  )) });
 }
-function RecordingHeroScreen({
-  telemetry,
-  artifact,
-  captions,
-  canTranscribe = false,
-  canPause = false,
-  now = () => Date.now()
-}) {
-  const size = useTerminalSize();
-  const [tick, setTick] = useState3(() => now());
-  const [waveSys, setWaveSys] = useState3([]);
-  const [waveMic, setWaveMic] = useState3([]);
-  const [captionMode, setCaptionMode] = useState3("both");
-  const lastAppendRef = useRef(0);
-  useInput2((input) => {
-    if (input === "c") {
-      setCaptionMode((m) => m === "both" ? "source" : m === "source" ? "translation" : "both");
-    }
-  });
-  useEffect2(() => {
-    if (telemetry.level == null) return;
-    const t = now();
-    if (t - lastAppendRef.current < WAVE_THROTTLE_MS) return;
-    lastAppendRef.current = t;
-    setWaveSys((w) => [...w.slice(-512), telemetry.level.system ?? 0]);
-    setWaveMic((w) => [...w.slice(-512), telemetry.level.mic ?? 0]);
-  }, [telemetry.level]);
-  useEffect2(() => {
-    const id = setInterval(() => setTick(now()), 1e3);
-    return () => clearInterval(id);
-  }, []);
-  const elapsed = telemetry.startedAtMs != null ? formatClockMs(Math.max(0, tick - telemetry.startedAtMs)) : "00:00";
-  const innerWidth = Math.max(10, size.columns - 4);
-  if (telemetry.status === "stopped") {
-    const handoff = stoppedHandoffCopy(artifact, canTranscribe);
-    const phase = stoppedPhase(artifact);
-    const meta3 = [
-      telemetry.durationMs != null ? formatClockMs(telemetry.durationMs) : null,
-      formatBytes2(telemetry.sizeBytes) || null
-    ].filter(Boolean).join(" \xB7 ");
-    const saved = artifact?.uploadStatus === "uploaded" ? "\u2713 Saved to Recappi Cloud" : "\u2713 Saved to your Mac";
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "recappi \xB7 Recording" }),
-      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx3(Text2, { color: "green", children: saved }),
-        meta3 ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: meta3 }) : null,
-        telemetry.savedPath ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, wrap: "truncate-middle", children: telemetry.savedPath }) : null
-      ] }),
-      phase ? /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
-        /* @__PURE__ */ jsx3(Text2, { color: "cyan", children: `\u25D0 ${phase.label}` }),
-        phase.fraction != null ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Text2, { children: "   " }),
-          /* @__PURE__ */ jsx3(ProgressBar, { fraction: phase.fraction }),
-          /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: ` ${Math.round(phase.fraction * 100)}%` })
-        ] }) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2026" })
-      ] }) : null,
-      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx3(Text2, { color: handoff.tone === "red" ? "red" : handoff.tone === "green" ? "green" : void 0, dimColor: handoff.tone === "dim", children: handoff.text }),
-        artifact?.error ? /* @__PURE__ */ jsx3(Text2, { color: "red", wrap: "truncate-end", children: artifact.error }) : null
-      ] })
-    ] });
-  }
-  if (telemetry.status === "error") {
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
-      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "recappi \xB7 Recording" }),
-      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { color: "red", children: telemetry.error ? `Recording error: ${telemetry.error}` : "Recording error" }) }),
-      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "esc back" }) })
-    ] });
+var init_JobsView = __esm({
+  "src/tui/JobsView.tsx"() {
+    "use strict";
+    init_JobRow();
   }
-  const paused = telemetry.status === "paused";
-  const starting = telemetry.status === "starting" || telemetry.status === "stopping";
-  const badge = paused ? "\u23F8 PAUSED" : starting ? "\u2026" : "\u23FA REC";
-  const meterW = Math.max(10, Math.min(72, innerWidth - 20));
-  const sizeStr = telemetry.sizeBytes ? formatBytes2(telemetry.sizeBytes) : "";
-  const context = [telemetry.sourceLabel, telemetry.micEnabled ? "Microphone" : null, sizeStr || null].filter(Boolean).join("  \xB7  ");
-  const waveRows = waveRowsFor(size.rows);
-  const meterBlockRows = (telemetry.micEnabled ? 2 : 1) * (waveRows + 1) + (telemetry.micEnabled ? 1 : 0);
-  const fixedRows = 8 + meterBlockRows;
-  const captionRows = Math.max(2, size.rows - fixedRows);
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs2(Text2, { children: [
-      /* @__PURE__ */ jsx3(Text2, { bold: true, color: "green", children: "recappi" }),
-      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: " \xB7 Recording" })
-    ] }),
-    /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, paddingX: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs2(Text2, { children: [
-        /* @__PURE__ */ jsx3(Text2, { bold: true, color: paused ? "yellow" : "red", children: badge }),
-        /* @__PURE__ */ jsx3(Text2, { children: "   " }),
-        /* @__PURE__ */ jsx3(Text2, { bold: true, children: elapsed })
-      ] }),
-      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, flexDirection: "column", children: telemetry.level == null ? (
-        // No level telemetry yet — honest activity, not a flat meter that
-        // reads as silence (the elapsed timer above proves it's live).
-        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: paused ? "Paused" : `Capturing audio${".".repeat(Math.floor(tick / 1e3) % 3 + 1)}` })
-      ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx3(MeterRow, { label: "System", samples: waveSys, level: telemetry.level.system ?? 0, paused, width: meterW, rows: waveRows }),
-        telemetry.micEnabled ? /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(MeterRow, { label: "Mic", samples: waveMic, level: telemetry.level.mic ?? 0, paused, width: meterW, rows: waveRows }) }) : null
-      ] }) }),
-      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: context }) }),
-      captions ? /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx3(Text2, { bold: true, dimColor: true, children: "LIVE CAPTIONS" }),
-        /* @__PURE__ */ jsx3(HeroCaptions, { state: captions, maxRows: captionRows, width: innerWidth, mode: captionMode })
-      ] }) : null
-    ] }),
-    /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
-      "q stop & save",
-      canPause ? ` \xB7 p ${paused ? "resume" : "pause"}` : "",
-      captions ? " \xB7 c captions" : ""
-    ] }) })
-  ] });
+});
+
+// src/tui/RecordingRow.tsx
+import { Box as Box7, Text as Text7 } from "ink";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function recordingTitle2(item) {
+  const named = (item.title || item.summaryTitle || "").trim();
+  if (named && !UUID_RE.test(named)) return named;
+  return "Untitled";
 }
-function wrappedRows(text, width) {
-  return Math.max(1, Math.ceil(displayWidth(text) / Math.max(1, width)));
+function recordingProcessingState(item, jobStatus, spinnerFrame) {
+  if (item.status === "uploading") return { glyph: "\u2191", color: "cyan" };
+  if (item.status === "failed" || jobStatus === "failed") return { glyph: "\u2717", color: "red" };
+  if (jobStatus === "running") return { glyph: spinnerChar(spinnerFrame), color: "cyan" };
+  if (jobStatus === "queued") return { glyph: "\u25CB", color: "yellow" };
+  if (item.status === "aborted") return { glyph: "\u2022", color: "gray" };
+  if (item.activeTranscriptId) return { glyph: "\u2713", color: "green" };
+  return { glyph: "\xB7", color: "gray" };
 }
-function captionColumn(items, maxRows, width, dim) {
-  const budget = Math.max(1, maxRows);
-  const chosen = [];
-  let used = 0;
-  for (let i = items.length - 1; i >= 0; i--) {
-    const h = wrappedRows(items[i].text, width);
-    if (used + h > budget && chosen.length > 0) break;
-    chosen.unshift(items[i]);
-    used += h;
-  }
-  return chosen.map((it) => /* @__PURE__ */ jsx3(Text2, { dimColor: dim, wrap: "wrap", children: it.text }, it.key));
+function recordingLayout(columns) {
+  const usable = Math.max(20, columns - 2);
+  const showWhen = usable >= 54;
+  const title = Math.max(
+    10,
+    usable - MARKER_W - GLYPH_W - LENGTH_W - (showWhen ? WHEN_W : 0) - DL_W
+  );
+  return { title, showWhen };
 }
-function HeroCaptions({
-  state,
-  maxRows,
-  width,
-  mode
+function RecordingRow({
+  item,
+  selected,
+  nowMs,
+  columns,
+  jobStatus,
+  spinnerFrame = 0,
+  downloaded = false
 }) {
-  const hasPartial = Boolean(state.partial && state.partial.length > 0);
-  const captionError = state.status === "error" ? `Captions unavailable: ${state.error ?? "Live captions unavailable."}` : null;
-  if (state.lines.length === 0 && !hasPartial) {
-    return /* @__PURE__ */ jsx3(Text2, { color: captionError ? "yellow" : void 0, dimColor: !captionError, children: captionError ?? (state.status === "live" ? "Listening for speech\u2026" : liveCaptionStatusLabel(state.status)) });
-  }
-  const sourceItems = state.lines.map((l) => ({
-    key: `${l.id}-s`,
-    text: `${l.speaker ? `${l.speaker}: ` : ""}${trimLead(l.text)}`
-  }));
-  if (hasPartial) sourceItems.push({ key: "sp", text: trimLead(state.partial) });
-  const translationItems = state.lines.filter((l) => l.translation).map((l) => ({ key: `${l.id}-t`, text: trimLead(l.translation) }));
-  if (state.translationPartial) translationItems.push({ key: "tp", text: trimLead(state.translationPartial) });
-  const errLine = captionError ? /* @__PURE__ */ jsx3(Text2, { color: "yellow", wrap: "wrap", children: captionError }) : null;
-  const hasTranslation = translationItems.length > 0;
-  if (mode === "source" || !hasTranslation) {
-    return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      captionColumn(sourceItems, maxRows, width, false),
-      errLine
-    ] });
-  }
-  if (mode === "translation") {
-    return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      captionColumn(translationItems, maxRows, width, false),
-      errLine
-    ] });
-  }
-  const gap = 2;
-  const colW = Math.max(12, Math.floor((width - gap) / 2));
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", children: [
-      /* @__PURE__ */ jsxs2(Box2, { width: colW, flexDirection: "column", marginRight: gap, children: [
-        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "ORIGINAL" }),
-        captionColumn(sourceItems, Math.max(1, maxRows - 1), colW, false)
-      ] }),
-      /* @__PURE__ */ jsxs2(Box2, { width: colW, flexDirection: "column", children: [
-        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "TRANSLATION" }),
-        captionColumn(translationItems, Math.max(1, maxRows - 1), colW, false)
-      ] })
-    ] }),
-    errLine
+  const { title, showWhen } = recordingLayout(columns);
+  const { glyph, color } = recordingProcessingState(item, jobStatus, spinnerFrame);
+  const duration3 = item.durationMs ? formatClockMs(item.durationMs) : "\u2014";
+  return /* @__PURE__ */ jsxs6(Box7, { children: [
+    /* @__PURE__ */ jsx9(Box7, { width: MARKER_W, children: /* @__PURE__ */ jsx9(Text7, { color: "cyan", children: selected ? "\u25B8" : "" }) }),
+    /* @__PURE__ */ jsx9(Box7, { width: GLYPH_W, children: /* @__PURE__ */ jsx9(Text7, { color, children: glyph }) }),
+    /* @__PURE__ */ jsx9(Box7, { width: title, children: /* @__PURE__ */ jsx9(Text7, { bold: selected, wrap: "truncate-end", children: recordingTitle2(item) }) }),
+    /* @__PURE__ */ jsx9(Box7, { width: LENGTH_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { dimColor: true, children: duration3 }) }),
+    showWhen ? /* @__PURE__ */ jsx9(Box7, { width: WHEN_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { dimColor: true, children: formatAge(item.createdAt, nowMs) }) }) : null,
+    /* @__PURE__ */ jsx9(Box7, { width: DL_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { color: "green", children: downloaded ? "\u2913" : "" }) })
   ] });
 }
-function stoppedHandoffCopy(artifact, canTranscribe) {
-  if (artifact?.uploadStatus === "uploading" || artifact?.transcriptionStatus === "processing") {
-    return { text: "esc run in background", tone: "dim" };
-  }
-  if (artifact?.transcriptionStatus === "queued") {
-    return { text: "Transcription queued \xB7 \u23CE open recording \xB7 n not now", tone: "green" };
-  }
-  if (artifact?.transcriptionStatus === "ready") {
-    return { text: "Transcription ready \xB7 \u23CE open recording \xB7 n not now", tone: "green" };
-  }
-  if (artifact?.uploadStatus === "failed" || artifact?.transcriptionStatus === "failed") {
-    return { text: "Transcription failed \xB7 \u23CE retry \xB7 n not now", tone: "red" };
+var UUID_RE, MARKER_W, GLYPH_W, LENGTH_W, WHEN_W, DL_W;
+var init_RecordingRow = __esm({
+  "src/tui/RecordingRow.tsx"() {
+    "use strict";
+    init_format();
+    UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+    MARKER_W = 3;
+    GLYPH_W = 2;
+    LENGTH_W = 8;
+    WHEN_W = 9;
+    DL_W = 3;
   }
-  if (!canTranscribe || !artifact?.audioPath) {
-    return { text: "Saved locally \xB7 n back", tone: "dim" };
+});
+
+// src/tui/RecordingsView.tsx
+import React5 from "react";
+import { Box as Box8, Text as Text8 } from "ink";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function RecordingsView({
+  items,
+  selectedIndex,
+  nowMs,
+  columns,
+  jobStatusByRecording,
+  downloadedRecordingIds,
+  spinnerFrame = 0
+}) {
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx10(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text8, { dimColor: true, children: "No recordings yet \u2014 run: recappi upload <file>" }) });
   }
-  return { text: "Starting transcription\u2026", tone: "normal" };
+  return /* @__PURE__ */ jsx10(Box8, { marginTop: 1, flexDirection: "column", children: items.map((item, index) => {
+    const bucket = dateBucket(item.createdAt, nowMs);
+    const showHeader = index === 0 || bucket !== dateBucket(items[index - 1].createdAt, nowMs);
+    return /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
+      showHeader ? /* @__PURE__ */ jsx10(Box8, { marginTop: index === 0 ? 0 : 1, children: /* @__PURE__ */ jsx10(Text8, { bold: true, dimColor: true, children: bucket }) }) : null,
+      /* @__PURE__ */ jsx10(
+        RecordingRow,
+        {
+          item,
+          selected: index === selectedIndex,
+          nowMs,
+          columns,
+          jobStatus: jobStatusByRecording?.get(item.recordingId),
+          downloaded: downloadedRecordingIds?.has(item.recordingId) ?? false,
+          spinnerFrame
+        }
+      )
+    ] }, item.recordingId);
+  }) });
 }
-var WAVE_THROTTLE_MS, trimLead;
-var init_RecordingHeroScreen = __esm({
-  "src/tui/RecordingHeroScreen.tsx"() {
+var init_RecordingsView = __esm({
+  "src/tui/RecordingsView.tsx"() {
     "use strict";
+    init_RecordingRow();
     init_format();
-    init_liveCaptions();
-    init_terminal();
-    WAVE_THROTTLE_MS = 220;
-    trimLead = (s) => s.replace(/^\s+/, "");
   }
 });
 
-// src/tui/AccountView.tsx
-import { Box as Box3, Text as Text3 } from "ink";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function AccountView({
-  status,
-  nowMs = Date.now()
-}) {
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "\u2039 Account" }),
-    status === "loading" || status === void 0 ? /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Loading account\u2026" }) }) : status === "error" ? /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { color: "red", children: "Couldn't load account status" }) }) : !status.loggedIn ? /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx5(Text3, { color: "yellow", children: "Not signed in" }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `origin  ${status.origin}` }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Run `recappi auth login` to sign in." })
-    ] }) : /* @__PURE__ */ jsx5(AccountBody, { status, nowMs }),
-    /* @__PURE__ */ jsx5(Box3, { marginTop: 1, children: /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "r refresh \xB7 esc back \xB7 q quit" }) })
-  ] });
+// src/tui/RecordingPeek.tsx
+import { Box as Box9, Text as Text9 } from "ink";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function RecordingPeek({
+  item,
+  summary,
+  nowMs,
+  width
+}) {
+  return /* @__PURE__ */ jsx11(Box9, { width, borderStyle: "round", borderColor: "gray", paddingX: 1, flexDirection: "column", children: !item ? /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "No selection" }) : /* @__PURE__ */ jsx11(PeekBody, { item, summary, nowMs }) });
 }
-function AccountBody({
-  status,
+function PeekBody({
+  item,
+  summary,
   nowMs
 }) {
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs3(Text3, { children: [
-        /* @__PURE__ */ jsx5(Text3, { color: "green", children: "\u25CF " }),
-        /* @__PURE__ */ jsx5(Text3, { bold: true, children: status.email ?? status.userId ?? "Signed in" })
-      ] }),
-      status.email && status.userId ? /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: status.userId }) : null,
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `origin  ${status.origin}` })
+  const style = recordingStatusStyle(item.status);
+  const meta3 = [
+    item.durationMs ? formatClockMs(item.durationMs) : null,
+    formatBytes2(item.sizeBytes) || null,
+    formatAge(item.createdAt, nowMs)
+  ].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(Text9, { bold: true, wrap: "truncate-end", children: recordingTitle2(item) }),
+    /* @__PURE__ */ jsxs8(Box9, { children: [
+      /* @__PURE__ */ jsx11(Text9, { color: style.color, children: `${style.glyph} ${style.label}` }),
+      meta3 ? /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: `  ${meta3}` }) : null
     ] }),
-    status.billing ? /* @__PURE__ */ jsx5(Usage, { billing: status.billing, nowMs }) : null,
-    /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-      /* @__PURE__ */ jsx5(Text3, { bold: true, dimColor: true, children: "LOCAL STORE" }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, wrap: "truncate-middle", children: status.localStore.path }),
-      /* @__PURE__ */ jsxs3(Text3, { dimColor: true, children: [
-        `${status.localStore.accountScopedArtifacts} artifact${status.localStore.accountScopedArtifacts === 1 ? "" : "s"} for this account`,
-        status.localStore.unattributedArtifacts > 0 ? ` \xB7 ${status.localStore.unattributedArtifacts} unattributed` : ""
-      ] })
-    ] })
+    /* @__PURE__ */ jsx11(Box9, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx11(SummarySection, { item, summary }) }),
+    /* @__PURE__ */ jsx11(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "\u23CE open \xB7 t transcript" }) })
   ] });
 }
-function Usage({
-  billing,
-  nowMs
+function SummarySection({
+  item,
+  summary
 }) {
-  const minutesCap = billing.minutesCap;
-  const minutesUsed = billing.minutesUsed;
-  const storageCap = billing.storageCapBytes;
-  return /* @__PURE__ */ jsxs3(Box3, { marginTop: 1, flexDirection: "column", children: [
-    /* @__PURE__ */ jsx5(Text3, { bold: true, dimColor: true, children: "USAGE" }),
-    /* @__PURE__ */ jsxs3(Text3, { children: [
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Plan " }),
-      /* @__PURE__ */ jsx5(Text3, { bold: true, children: billing.tier })
-    ] }),
-    /* @__PURE__ */ jsxs3(Text3, { children: [
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Minutes " }),
-      minutesCap != null ? /* @__PURE__ */ jsx5(Text3, { color: billing.isOverMinutes ? "red" : "cyan", children: `${progressBar(minutesUsed / Math.max(1, minutesCap), 12)} ` }) : null,
-      /* @__PURE__ */ jsx5(Text3, { color: billing.isOverMinutes ? "red" : void 0, children: `${Math.round(minutesUsed)}` }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: ` / ${minutesCap != null ? Math.round(minutesCap) : "\u221E"} min` }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `   (batch ${Math.round(billing.batchMinutesUsed)} \xB7 live ${Math.round(billing.realtimeMinutesUsed)})` })
-    ] }),
-    /* @__PURE__ */ jsxs3(Text3, { children: [
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: "Storage " }),
-      storageCap != null ? /* @__PURE__ */ jsx5(Text3, { color: billing.isOverStorage ? "red" : "cyan", children: `${progressBar(billing.storageBytes / Math.max(1, storageCap), 12)} ` }) : null,
-      /* @__PURE__ */ jsx5(Text3, { color: billing.isOverStorage ? "red" : void 0, children: formatBytes2(billing.storageBytes) }),
-      /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: ` / ${storageCap != null ? formatBytes2(storageCap) : "\u221E"}` })
-    ] }),
-    billing.isOverMinutes || billing.isOverStorage ? /* @__PURE__ */ jsxs3(Text3, { color: "red", children: [
-      billing.isOverMinutes ? "Over minutes limit. " : "",
-      billing.isOverStorage ? "Over storage limit." : ""
-    ] }) : null,
-    /* @__PURE__ */ jsx5(Text3, { dimColor: true, children: `Period ${periodText(billing, nowMs)}` })
+  if (!item.activeTranscriptId) return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "No transcript yet" });
+  if (summary === "loading" || summary === void 0) return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "Loading summary\u2026" });
+  if (summary === "error") return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "(summary unavailable)" });
+  if (summary.status !== "succeeded" || !summary.tldr) {
+    return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: `Summary ${summary.status}` });
+  }
+  const points = (summary.keyPoints ?? []).slice(0, 3);
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(Text9, { bold: true, dimColor: true, children: "SUMMARY" }),
+    /* @__PURE__ */ jsx11(Text9, { children: summary.tldr }),
+    points.length > 0 ? /* @__PURE__ */ jsx11(Box9, { marginTop: 1, flexDirection: "column", children: points.map((point, i) => /* @__PURE__ */ jsx11(Text9, { dimColor: true, wrap: "truncate-end", children: `\u2022 ${point}` }, i)) }) : null
   ] });
 }
-function periodText(billing, nowMs) {
-  const remainingMs = epochToMs(billing.periodEnd) - nowMs;
-  if (!Number.isFinite(remainingMs) || remainingMs <= 0) return "\u2014";
-  const days = Math.floor(remainingMs / 864e5);
-  if (days >= 1) return `${days}d left`;
-  return `${formatClockMs(remainingMs)} left`;
-}
-function epochToMs(value) {
-  return value > 1e12 ? value : value * 1e3;
-}
-var init_AccountView = __esm({
-  "src/tui/AccountView.tsx"() {
+var init_RecordingPeek = __esm({
+  "src/tui/RecordingPeek.tsx"() {
     "use strict";
     init_format();
+    init_RecordingRow();
   }
 });
 
-// src/tui/chrome.tsx
-import { Box as Box4, Text as Text4 } from "ink";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function Header({ active }) {
-  return /* @__PURE__ */ jsxs4(Box4, { children: [
-    /* @__PURE__ */ jsxs4(Text4, { bold: true, color: "green", children: [
-      "\u25CF Recappi",
-      "   "
-    ] }),
-    /* @__PURE__ */ jsx6(Tab, { num: "1", label: "Overview", active: active === "overview" }),
-    /* @__PURE__ */ jsx6(Tab, { num: "2", label: "Jobs", active: active === "jobs" }),
-    /* @__PURE__ */ jsx6(Tab, { num: "3", label: "Account", active: active === "account" })
-  ] });
-}
-function Tab({
-  num,
-  label,
-  active
+// src/tui/OverviewView.tsx
+import { Box as Box10, Text as Text10 } from "ink";
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function OverviewView({
+  recordings,
+  jobs,
+  stats,
+  selectedIndex,
+  spinnerFrame,
+  nowMs,
+  columns,
+  jobStatusByRecording,
+  downloadedRecordingIds,
+  peekItem,
+  peekSummary,
+  showPeek = false,
+  peekWidth = 0
 }) {
-  if (active) {
-    return /* @__PURE__ */ jsx6(Text4, { bold: true, inverse: true, color: "cyan", children: ` ${num} ${label} ` });
-  }
-  return /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
-    " ",
-    /* @__PURE__ */ jsx6(Text4, { color: "cyan", children: num }),
-    ` ${label} `
+  const jobCounts = countJobs(jobs);
+  const running = stats?.jobs.running ?? jobCounts.running;
+  const queued = stats?.jobs.queued ?? jobCounts.queued;
+  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs9(Box10, { children: [
+      /* @__PURE__ */ jsx12(Text10, { bold: true, children: stats?.recordings.total ?? recordings.length }),
+      /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: " recordings" }),
+      stats?.recordings.ready != null ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
+        /* @__PURE__ */ jsx12(Text10, { color: "green", children: `${stats.recordings.ready} ready` })
+      ] }) : null,
+      running > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
+        /* @__PURE__ */ jsx12(Text10, { color: "cyan", children: `${running} transcribing` })
+      ] }) : null,
+      queued > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
+        /* @__PURE__ */ jsx12(Text10, { color: "yellow", children: `${queued} queued` })
+      ] }) : null,
+      stats?.recordings.totalDurationMs != null ? /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: `  \xB7  ${formatClockMs(stats.recordings.totalDurationMs)} transcribed` }) : null
+    ] }),
+    /* @__PURE__ */ jsxs9(Box10, { flexDirection: "row", alignItems: "flex-start", children: [
+      /* @__PURE__ */ jsx12(Box10, { flexGrow: 1, flexDirection: "column", children: /* @__PURE__ */ jsx12(
+        RecordingsView,
+        {
+          items: recordings,
+          selectedIndex,
+          nowMs,
+          columns: showPeek ? Math.max(20, columns - peekWidth - 1) : columns,
+          jobStatusByRecording,
+          downloadedRecordingIds,
+          spinnerFrame
+        }
+      ) }),
+      showPeek ? /* @__PURE__ */ jsx12(Box10, { marginLeft: 1, marginTop: 1, children: /* @__PURE__ */ jsx12(RecordingPeek, { item: peekItem, summary: peekSummary, nowMs, width: peekWidth }) }) : null
+    ] })
   ] });
 }
-function Footer({ keys }) {
-  const segments = keys.split(" \xB7 ");
-  return /* @__PURE__ */ jsx6(Box4, { marginTop: 1, children: /* @__PURE__ */ jsx6(Text4, { children: segments.map((segment, i) => {
-    const space = segment.indexOf(" ");
-    const key = space === -1 ? segment : segment.slice(0, space);
-    const desc = space === -1 ? "" : segment.slice(space);
-    return /* @__PURE__ */ jsxs4(Text4, { children: [
-      i > 0 ? /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: " \xB7 " }) : null,
-      /* @__PURE__ */ jsx6(Text4, { color: "cyan", children: key }),
-      /* @__PURE__ */ jsx6(Text4, { dimColor: true, children: desc })
-    ] }, `${segment}-${i}`);
-  }) }) });
-}
-var init_chrome = __esm({
-  "src/tui/chrome.tsx"() {
+var init_OverviewView = __esm({
+  "src/tui/OverviewView.tsx"() {
     "use strict";
+    init_RecordingsView();
+    init_RecordingPeek();
+    init_format();
   }
 });
 
-// src/tui/JobRow.tsx
-import { Box as Box5, Text as Text5 } from "ink";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function JobRow({
+// src/tui/JobDetailView.tsx
+import { Box as Box11, Text as Text11 } from "ink";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function JobDetailView({
   item,
-  selected,
-  spinnerFrame
+  origin,
+  spinnerFrame,
+  nowMs
 }) {
   const style = statusStyle(item.status);
-  const glyph = statusGlyph(item.status, spinnerFrame);
-  const title = item.recording?.title ?? item.recordingId;
-  return /* @__PURE__ */ jsxs5(Box5, { children: [
-    /* @__PURE__ */ jsx7(Box5, { width: 3, children: /* @__PURE__ */ jsx7(Text5, { color: "cyan", children: selected ? "\u25B8" : "" }) }),
-    /* @__PURE__ */ jsx7(Box5, { width: 2, children: /* @__PURE__ */ jsx7(Text5, { color: style.color, children: glyph }) }),
-    /* @__PURE__ */ jsx7(Box5, { width: 13, children: /* @__PURE__ */ jsx7(Text5, { color: style.color, children: style.label }) }),
-    /* @__PURE__ */ jsx7(Box5, { width: 26, children: /* @__PURE__ */ jsx7(Text5, { bold: selected, wrap: "truncate-end", children: title }) }),
-    /* @__PURE__ */ jsx7(Text5, { dimColor: !selected, children: jobDetail(item) })
-  ] });
-}
-var init_JobRow = __esm({
-  "src/tui/JobRow.tsx"() {
-    "use strict";
-    init_format();
-  }
-});
-
-// src/tui/JobsView.tsx
-import { Box as Box6, Text as Text6 } from "ink";
-import { jsx as jsx8 } from "react/jsx-runtime";
-function JobsView({
-  items,
-  selectedIndex,
-  spinnerFrame
-}) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx8(Box6, { marginTop: 1, children: /* @__PURE__ */ jsx8(Text6, { dimColor: true, children: "No transcription jobs yet \u2014 run: recappi upload <file> --transcribe" }) });
-  }
-  return /* @__PURE__ */ jsx8(Box6, { marginTop: 1, flexDirection: "column", children: items.map((item, index) => /* @__PURE__ */ jsx8(
-    JobRow,
-    {
-      item,
-      selected: index === selectedIndex,
-      spinnerFrame
-    },
-    item.jobId
-  )) });
-}
-var init_JobsView = __esm({
-  "src/tui/JobsView.tsx"() {
-    "use strict";
-    init_JobRow();
-  }
-});
-
-// src/tui/RecordingRow.tsx
-import { Box as Box7, Text as Text7 } from "ink";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function recordingTitle2(item) {
-  const named = (item.title || item.summaryTitle || "").trim();
-  if (named && !UUID_RE.test(named)) return named;
-  return "Untitled";
-}
-function recordingProcessingState(item, jobStatus, spinnerFrame) {
-  if (item.status === "uploading") return { glyph: "\u2191", color: "cyan" };
-  if (item.status === "failed" || jobStatus === "failed") return { glyph: "\u2717", color: "red" };
-  if (jobStatus === "running") return { glyph: spinnerChar(spinnerFrame), color: "cyan" };
-  if (jobStatus === "queued") return { glyph: "\u25CB", color: "yellow" };
-  if (item.status === "aborted") return { glyph: "\u2022", color: "gray" };
-  if (item.activeTranscriptId) return { glyph: "\u2713", color: "green" };
-  return { glyph: "\xB7", color: "gray" };
-}
-function recordingLayout(columns) {
-  const usable = Math.max(20, columns - 2);
-  const showWhen = usable >= 54;
-  const title = Math.max(
-    10,
-    usable - MARKER_W - GLYPH_W - LENGTH_W - (showWhen ? WHEN_W : 0) - DL_W
-  );
-  return { title, showWhen };
-}
-function RecordingRow({
-  item,
-  selected,
-  nowMs,
-  columns,
-  jobStatus,
-  spinnerFrame = 0,
-  downloaded = false
-}) {
-  const { title, showWhen } = recordingLayout(columns);
-  const { glyph, color } = recordingProcessingState(item, jobStatus, spinnerFrame);
-  const duration3 = item.durationMs ? formatClockMs(item.durationMs) : "\u2014";
-  return /* @__PURE__ */ jsxs6(Box7, { children: [
-    /* @__PURE__ */ jsx9(Box7, { width: MARKER_W, children: /* @__PURE__ */ jsx9(Text7, { color: "cyan", children: selected ? "\u25B8" : "" }) }),
-    /* @__PURE__ */ jsx9(Box7, { width: GLYPH_W, children: /* @__PURE__ */ jsx9(Text7, { color, children: glyph }) }),
-    /* @__PURE__ */ jsx9(Box7, { width: title, children: /* @__PURE__ */ jsx9(Text7, { bold: selected, wrap: "truncate-end", children: recordingTitle2(item) }) }),
-    /* @__PURE__ */ jsx9(Box7, { width: LENGTH_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { dimColor: true, children: duration3 }) }),
-    showWhen ? /* @__PURE__ */ jsx9(Box7, { width: WHEN_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { dimColor: true, children: formatAge(item.createdAt, nowMs) }) }) : null,
-    /* @__PURE__ */ jsx9(Box7, { width: DL_W, justifyContent: "flex-end", children: /* @__PURE__ */ jsx9(Text7, { color: "green", children: downloaded ? "\u2913" : "" }) })
-  ] });
-}
-var UUID_RE, MARKER_W, GLYPH_W, LENGTH_W, WHEN_W, DL_W;
-var init_RecordingRow = __esm({
-  "src/tui/RecordingRow.tsx"() {
-    "use strict";
-    init_format();
-    UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-    MARKER_W = 3;
-    GLYPH_W = 2;
-    LENGTH_W = 8;
-    WHEN_W = 9;
-    DL_W = 3;
-  }
-});
-
-// src/tui/RecordingsView.tsx
-import React5 from "react";
-import { Box as Box8, Text as Text8 } from "ink";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-function RecordingsView({
-  items,
-  selectedIndex,
-  nowMs,
-  columns,
-  jobStatusByRecording,
-  downloadedRecordingIds,
-  spinnerFrame = 0
-}) {
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx10(Box8, { marginTop: 1, children: /* @__PURE__ */ jsx10(Text8, { dimColor: true, children: "No recordings yet \u2014 run: recappi upload <file>" }) });
-  }
-  return /* @__PURE__ */ jsx10(Box8, { marginTop: 1, flexDirection: "column", children: items.map((item, index) => {
-    const bucket = dateBucket(item.createdAt, nowMs);
-    const showHeader = index === 0 || bucket !== dateBucket(items[index - 1].createdAt, nowMs);
-    return /* @__PURE__ */ jsxs7(React5.Fragment, { children: [
-      showHeader ? /* @__PURE__ */ jsx10(Box8, { marginTop: index === 0 ? 0 : 1, children: /* @__PURE__ */ jsx10(Text8, { bold: true, dimColor: true, children: bucket }) }) : null,
-      /* @__PURE__ */ jsx10(
-        RecordingRow,
-        {
-          item,
-          selected: index === selectedIndex,
-          nowMs,
-          columns,
-          jobStatus: jobStatusByRecording?.get(item.recordingId),
-          downloaded: downloadedRecordingIds?.has(item.recordingId) ?? false,
-          spinnerFrame
-        }
-      )
-    ] }, item.recordingId);
-  }) });
-}
-var init_RecordingsView = __esm({
-  "src/tui/RecordingsView.tsx"() {
-    "use strict";
-    init_RecordingRow();
-    init_format();
-  }
-});
-
-// src/tui/RecordingPeek.tsx
-import { Box as Box9, Text as Text9 } from "ink";
-import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function RecordingPeek({
-  item,
-  summary,
-  nowMs,
-  width
-}) {
-  return /* @__PURE__ */ jsx11(Box9, { width, borderStyle: "round", borderColor: "gray", paddingX: 1, flexDirection: "column", children: !item ? /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "No selection" }) : /* @__PURE__ */ jsx11(PeekBody, { item, summary, nowMs }) });
-}
-function PeekBody({
-  item,
-  summary,
-  nowMs
-}) {
-  const style = recordingStatusStyle(item.status);
-  const meta3 = [
-    item.durationMs ? formatClockMs(item.durationMs) : null,
-    formatBytes2(item.sizeBytes) || null,
-    formatAge(item.createdAt, nowMs)
-  ].filter(Boolean).join(" \xB7 ");
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(Text9, { bold: true, wrap: "truncate-end", children: recordingTitle2(item) }),
-    /* @__PURE__ */ jsxs8(Box9, { children: [
-      /* @__PURE__ */ jsx11(Text9, { color: style.color, children: `${style.glyph} ${style.label}` }),
-      meta3 ? /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: `  ${meta3}` }) : null
-    ] }),
-    /* @__PURE__ */ jsx11(Box9, { marginTop: 1, flexDirection: "column", children: /* @__PURE__ */ jsx11(SummarySection, { item, summary }) }),
-    /* @__PURE__ */ jsx11(Box9, { marginTop: 1, children: /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "\u23CE open \xB7 t transcript" }) })
-  ] });
-}
-function SummarySection({
-  item,
-  summary
-}) {
-  if (!item.activeTranscriptId) return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "No transcript yet" });
-  if (summary === "loading" || summary === void 0) return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "Loading summary\u2026" });
-  if (summary === "error") return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: "(summary unavailable)" });
-  if (summary.status !== "succeeded" || !summary.tldr) {
-    return /* @__PURE__ */ jsx11(Text9, { dimColor: true, children: `Summary ${summary.status}` });
-  }
-  const points = (summary.keyPoints ?? []).slice(0, 3);
-  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
-    /* @__PURE__ */ jsx11(Text9, { bold: true, dimColor: true, children: "SUMMARY" }),
-    /* @__PURE__ */ jsx11(Text9, { children: summary.tldr }),
-    points.length > 0 ? /* @__PURE__ */ jsx11(Box9, { marginTop: 1, flexDirection: "column", children: points.map((point, i) => /* @__PURE__ */ jsx11(Text9, { dimColor: true, wrap: "truncate-end", children: `\u2022 ${point}` }, i)) }) : null
-  ] });
-}
-var init_RecordingPeek = __esm({
-  "src/tui/RecordingPeek.tsx"() {
-    "use strict";
-    init_format();
-    init_RecordingRow();
-  }
-});
-
-// src/tui/OverviewView.tsx
-import { Box as Box10, Text as Text10 } from "ink";
-import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-function OverviewView({
-  recordings,
-  jobs,
-  stats,
-  selectedIndex,
-  spinnerFrame,
-  nowMs,
-  columns,
-  jobStatusByRecording,
-  downloadedRecordingIds,
-  peekItem,
-  peekSummary,
-  showPeek = false,
-  peekWidth = 0
-}) {
-  const jobCounts = countJobs(jobs);
-  const running = stats?.jobs.running ?? jobCounts.running;
-  const queued = stats?.jobs.queued ?? jobCounts.queued;
-  return /* @__PURE__ */ jsxs9(Box10, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsxs9(Box10, { children: [
-      /* @__PURE__ */ jsx12(Text10, { bold: true, children: stats?.recordings.total ?? recordings.length }),
-      /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: " recordings" }),
-      stats?.recordings.ready != null ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
-        /* @__PURE__ */ jsx12(Text10, { color: "green", children: `${stats.recordings.ready} ready` })
-      ] }) : null,
-      running > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
-        /* @__PURE__ */ jsx12(Text10, { color: "cyan", children: `${running} transcribing` })
-      ] }) : null,
-      queued > 0 ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: "  \xB7  " }),
-        /* @__PURE__ */ jsx12(Text10, { color: "yellow", children: `${queued} queued` })
-      ] }) : null,
-      stats?.recordings.totalDurationMs != null ? /* @__PURE__ */ jsx12(Text10, { dimColor: true, children: `  \xB7  ${formatClockMs(stats.recordings.totalDurationMs)} transcribed` }) : null
-    ] }),
-    /* @__PURE__ */ jsxs9(Box10, { flexDirection: "row", alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsx12(Box10, { flexGrow: 1, flexDirection: "column", children: /* @__PURE__ */ jsx12(
-        RecordingsView,
-        {
-          items: recordings,
-          selectedIndex,
-          nowMs,
-          columns: showPeek ? Math.max(20, columns - peekWidth - 1) : columns,
-          jobStatusByRecording,
-          downloadedRecordingIds,
-          spinnerFrame
-        }
-      ) }),
-      showPeek ? /* @__PURE__ */ jsx12(Box10, { marginLeft: 1, marginTop: 1, children: /* @__PURE__ */ jsx12(RecordingPeek, { item: peekItem, summary: peekSummary, nowMs, width: peekWidth }) }) : null
-    ] })
-  ] });
-}
-var init_OverviewView = __esm({
-  "src/tui/OverviewView.tsx"() {
-    "use strict";
-    init_RecordingsView();
-    init_RecordingPeek();
-    init_format();
-  }
-});
-
-// src/tui/JobDetailView.tsx
-import { Box as Box11, Text as Text11 } from "ink";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-function JobDetailView({
-  item,
-  origin,
-  spinnerFrame,
-  nowMs
-}) {
-  const style = statusStyle(item.status);
-  const links = resolveJobLinks(item, origin);
+  const links = resolveJobLinks(item, origin);
   const title = item.recording?.title ?? item.recordingId;
   return /* @__PURE__ */ jsxs10(Box11, { flexDirection: "column", paddingX: 1, children: [
     /* @__PURE__ */ jsxs10(Text11, { dimColor: true, children: [
@@ -1374,9 +1106,9 @@ function StatusLine({
     const fraction = transcribeFraction(item);
     const elapsed = item.startedAt ? `  \xB7  ${formatClockMs(nowMs - item.startedAt)} elapsed` : "";
     if (fraction != null) {
-      const pct = Math.round(fraction * 100);
+      const pct2 = Math.round(fraction * 100);
       return /* @__PURE__ */ jsxs10(Text11, { children: [
-        `${progressBar(fraction)} ${pct}%  ${formatClockMs(item.processedDurationMs)} / ${formatClockMs(
+        `${progressBar(fraction)} ${pct2}%  ${formatClockMs(item.processedDurationMs)} / ${formatClockMs(
           item.recording?.durationMs
         )}`,
         /* @__PURE__ */ jsx13(Text11, { dimColor: true, children: elapsed })
@@ -1898,14 +1630,201 @@ var init_RecordSetupView = __esm({
   }
 });
 
-// src/tui/AppShell.tsx
-import { useCallback, useEffect as useEffect4, useRef as useRef3, useState as useState7 } from "react";
-import { Box as Box16, Text as Text16, useApp, useInput as useInput7 } from "ink";
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
-function recordErrorCopy(code, message) {
-  switch (code) {
-    case "record.helper_unavailable":
-      return {
+// src/tui/RecordFrame.tsx
+import { useState as useState7 } from "react";
+import { Box as Box16, Text as Text16, useInput as useInput7 } from "ink";
+import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
+function levelDb3(level) {
+  if (level <= 0.03) return "silent";
+  return `${Math.round(level * 60 - 60)} dB`;
+}
+function CompactMeter({ label, level }) {
+  const width = 12;
+  const filled = Math.max(0, Math.min(width, Math.round(Math.max(0, Math.min(1, level)) * width)));
+  const silent = level <= 0.03;
+  return /* @__PURE__ */ jsxs15(Text16, { children: [
+    /* @__PURE__ */ jsxs15(Text16, { dimColor: true, children: [
+      label,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx18(Text16, { color: silent ? "yellow" : "cyan", children: "\u25CF".repeat(filled) }),
+    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "\xB7".repeat(width - filled) }),
+    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: `  ${levelDb3(level)}` })
+  ] });
+}
+function CaptionColumn({
+  lines,
+  width,
+  rows,
+  dim,
+  scrollBack = 0
+}) {
+  const end = lines.length - Math.min(scrollBack, Math.max(0, lines.length - 1));
+  const chosen = [];
+  let used = 0;
+  for (let i = end - 1; i >= 0; i--) {
+    const h = wrappedRows2(lines[i], width);
+    if (used + h > rows && chosen.length > 0) break;
+    chosen.unshift(lines[i]);
+    used += h;
+  }
+  return /* @__PURE__ */ jsx18(Box16, { width, flexDirection: "column", children: chosen.length === 0 ? /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "Listening for speech\u2026" }) : chosen.map((l, i) => /* @__PURE__ */ jsx18(Text16, { dimColor: dim, wrap: "wrap", children: l }, i)) });
+}
+function outcomeLine(telemetry, artifact) {
+  if (telemetry.status === "recording" || telemetry.status === "starting") {
+    return "Recording\u2026 stop to auto-save + transcribe + summarize";
+  }
+  const up = artifact?.uploadStatus;
+  const tr = artifact?.transcriptionStatus;
+  if (up === "uploading") return `Uploading to Recappi Cloud\u2026 ${pct(artifact?.uploadProgress)}`;
+  if (tr === "processing") return `Transcribing\u2026 ${pct(artifact?.transcriptionProgress)}`;
+  if (tr === "ready") return "Transcript ready \xB7 \u23CE open \xB7 T re-transcribe";
+  if (up === "failed" || tr === "failed") {
+    return artifact?.error ? `Cloud handoff failed \xB7 ${artifact.error}` : "Cloud handoff failed \xB7 T retry";
+  }
+  return "Saved \xB7 \u23CE open";
+}
+function pct(f) {
+  return f == null ? "" : `${Math.round(Math.max(0, Math.min(1, f)) * 100)}%`;
+}
+function RecordFrame({
+  telemetry,
+  captions,
+  artifact,
+  recordings = [],
+  selectedIndex = 0,
+  title = "New recording",
+  recordingId,
+  jobId,
+  nowMs = Date.now(),
+  spinnerFrame = 0
+}) {
+  const size = useTerminalSize();
+  const [captionMode, setCaptionMode] = useState7("both");
+  const [scrollBack, setScrollBack] = useState7(0);
+  const PAGE = 8;
+  useInput7((input, key) => {
+    if (input === "c") {
+      setCaptionMode((m) => m === "both" ? "source" : m === "source" ? "translation" : "both");
+    } else if (key.upArrow || input === "k") setScrollBack((s) => s + 1);
+    else if (key.downArrow || input === "j") setScrollBack((s) => Math.max(0, s - 1));
+    else if (key.pageUp || input === "b") setScrollBack((s) => s + PAGE);
+    else if (key.pageDown || input === " ") setScrollBack((s) => Math.max(0, s - PAGE));
+    else if (input === "g") setScrollBack(Number.MAX_SAFE_INTEGER);
+    else if (input === "G") setScrollBack(0);
+  });
+  const elapsed = telemetry.startedAtMs != null ? formatClockMs(Math.max(0, nowMs - telemetry.startedAtMs)) : "00:00";
+  const recording = telemetry.status === "recording" || telemetry.status === "starting";
+  const stateLabel = recording ? "\u23FA REC" : telemetry.status === "paused" ? "\u23F8 PAUSED" : telemetry.status === "stopped" ? "\u25A0 STOPPED" : "\u2026";
+  const ids = [recordingId, jobId].filter(Boolean).join(" \xB7 ");
+  const innerWidth = Math.max(20, size.columns - 2);
+  const listWidth = Math.min(20, Math.max(14, Math.floor(innerWidth * 0.22)));
+  const rightWidth = Math.max(20, innerWidth - listWidth - 3);
+  const captionRows = Math.max(3, size.rows - 10);
+  const sourceLines = captions ? [
+    ...captions.lines.map((l) => `${l.speaker ? `${l.speaker}: ` : ""}${trimLead2(l.text)}`),
+    ...captions.partial ? [trimLead2(captions.partial)] : []
+  ] : [];
+  const translationLines = captions ? [
+    ...captions.lines.filter((l) => l.translation).map((l) => trimLead2(l.translation)),
+    ...captions.translationPartial ? [trimLead2(captions.translationPartial)] : []
+  ] : [];
+  const status = telemetry.sizeBytes ? formatBytes2(telemetry.sizeBytes) : "";
+  const sourceLine = [telemetry.sourceLabel, telemetry.micEnabled ? "Microphone" : null, status || null].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", paddingX: 1, height: size.rows, children: [
+    /* @__PURE__ */ jsxs15(Box16, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ jsxs15(Text16, { children: [
+        /* @__PURE__ */ jsx18(Text16, { bold: true, color: "green", children: "recappi" }),
+        /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: " \xB7 Recording" })
+      ] }),
+      /* @__PURE__ */ jsxs15(Text16, { children: [
+        /* @__PURE__ */ jsx18(Text16, { bold: true, color: recording ? "red" : "gray", children: stateLabel }),
+        /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: `  ${elapsed}${ids ? ` \xB7 ${ids}` : ""}` })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "\u2500".repeat(innerWidth) }),
+    /* @__PURE__ */ jsxs15(Box16, { flexGrow: 1, children: [
+      /* @__PURE__ */ jsxs15(Box16, { width: listWidth, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: `RECORDINGS \xB7 ${recordings.length}` }),
+        /* @__PURE__ */ jsx18(Box16, { marginTop: 1, flexDirection: "column", children: recordings.slice(0, Math.max(1, size.rows - 8)).map((rec, i) => {
+          const st = recordingProcessingState(rec, void 0, spinnerFrame);
+          const sel = i === selectedIndex;
+          return /* @__PURE__ */ jsxs15(Box16, { children: [
+            /* @__PURE__ */ jsx18(Box16, { width: 2, children: /* @__PURE__ */ jsx18(Text16, { color: "cyan", children: sel ? "\u25B8" : "" }) }),
+            /* @__PURE__ */ jsx18(Box16, { width: 2, children: /* @__PURE__ */ jsx18(Text16, { color: st.color, children: st.glyph }) }),
+            /* @__PURE__ */ jsx18(Box16, { width: listWidth - 4, children: /* @__PURE__ */ jsx18(Text16, { bold: sel, wrap: "truncate-end", children: recordingTitle2(rec) }) })
+          ] }, rec.recordingId);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx18(Box16, { width: 3, flexDirection: "column", alignItems: "center", children: Array.from({ length: Math.max(1, size.rows - 6) }, (_, i) => /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "\u2502" }, i)) }),
+      /* @__PURE__ */ jsxs15(Box16, { width: rightWidth, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx18(Text16, { bold: true, wrap: "truncate-end", children: title }),
+        /* @__PURE__ */ jsx18(Text16, { dimColor: true, wrap: "truncate-end", children: sourceLine }),
+        telemetry.level ? /* @__PURE__ */ jsxs15(Box16, { children: [
+          /* @__PURE__ */ jsx18(CompactMeter, { label: "System", level: telemetry.level.system ?? 0 }),
+          telemetry.micEnabled ? /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "    " }) : null,
+          telemetry.micEnabled ? /* @__PURE__ */ jsx18(CompactMeter, { label: "Mic", level: telemetry.level.mic ?? 0 }) : null
+        ] }) : /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "Capturing audio\u2026" }),
+        /* @__PURE__ */ jsxs15(Box16, { marginTop: 1, flexDirection: "column", flexGrow: 1, children: [
+          /* @__PURE__ */ jsxs15(Box16, { children: [
+            captionMode !== "translation" ? /* @__PURE__ */ jsx18(Box16, { width: captionMode === "both" ? Math.floor((rightWidth - 3) / 2) : rightWidth, children: /* @__PURE__ */ jsx18(Text16, { bold: true, dimColor: true, children: "ORIGINAL" }) }) : null,
+            captionMode === "both" ? /* @__PURE__ */ jsx18(Box16, { width: 3 }) : null,
+            captionMode !== "source" ? /* @__PURE__ */ jsx18(Text16, { bold: true, dimColor: true, children: "TRANSLATION" }) : null,
+            scrollBack > 0 ? /* @__PURE__ */ jsx18(Text16, { color: "yellow", children: "   \u23F8 scrolled \xB7 G live" }) : null
+          ] }),
+          /* @__PURE__ */ jsxs15(Box16, { children: [
+            captionMode !== "translation" ? /* @__PURE__ */ jsx18(
+              CaptionColumn,
+              {
+                lines: sourceLines,
+                width: captionMode === "both" ? Math.floor((rightWidth - 3) / 2) : rightWidth,
+                rows: captionRows,
+                scrollBack
+              }
+            ) : null,
+            captionMode === "both" ? /* @__PURE__ */ jsx18(Box16, { width: 3, flexDirection: "column", children: Array.from({ length: Math.min(captionRows, 12) }, (_, i) => /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "\u2502" }, i)) }) : null,
+            captionMode !== "source" ? /* @__PURE__ */ jsx18(
+              CaptionColumn,
+              {
+                lines: translationLines,
+                width: captionMode === "both" ? Math.floor((rightWidth - 3) / 2) : rightWidth,
+                rows: captionRows,
+                dim: true,
+                scrollBack
+              }
+            ) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs15(Box16, { marginTop: 1, children: [
+          /* @__PURE__ */ jsx18(Text16, { bold: true, dimColor: true, children: "OUTCOME " }),
+          /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: outcomeLine(telemetry, artifact) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "\u2500".repeat(innerWidth) }),
+    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: `q stop & save \xB7 c captions (${captionMode}) \xB7 \u2191\u2193 scroll \xB7 G live \xB7 T re-transcribe \xB7 1 overview 2 jobs 3 account` })
+  ] });
+}
+var trimLead2, wrappedRows2;
+var init_RecordFrame = __esm({
+  "src/tui/RecordFrame.tsx"() {
+    "use strict";
+    init_format();
+    init_RecordingRow();
+    init_terminal();
+    trimLead2 = (s) => s.replace(/^\s+/, "");
+    wrappedRows2 = (text, width) => Math.max(1, Math.ceil(displayWidth(text) / Math.max(1, width)));
+  }
+});
+
+// src/tui/AppShell.tsx
+import { useCallback, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
+import { Box as Box17, Text as Text17, useApp, useInput as useInput8 } from "ink";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
+function recordErrorCopy(code, message) {
+  switch (code) {
+    case "record.helper_unavailable":
+      return {
         title: "This CLI install is missing its local recorder.",
         detail: "Run npm install -g recappi@latest, or use npx -y recappi@latest.",
         tone: "yellow"
@@ -2019,6 +1938,11 @@ function transcriptionStatusFromJob(status) {
       return "not_started";
   }
 }
+function recordFrameTitle(recordings, recordingId) {
+  if (!recordingId) return "New recording";
+  const recording = recordings.find((item) => item.recordingId === recordingId);
+  return recording ? recordingTitle2(recording) : "New recording";
+}
 function permissionItemsFromRecordError(data) {
   const sidecarError = isRecord8(data) ? data : void 0;
   const sidecarData = isRecord8(sidecarError?.data) ? sidecarError.data : void 0;
@@ -2059,6 +1983,7 @@ function AppShell({
   startLiveRecord,
   startRecordSetupPreview,
   transcribeRecordingArtifact,
+  onRetranscribe,
   initialView = "overview",
   openUrl: openUrl2,
   copyText: copyText2,
@@ -2068,34 +1993,34 @@ function AppShell({
 }) {
   const { exit } = useApp();
   const size = useTerminalSize();
-  const [jobs, setJobs] = useState7([]);
-  const [recordings, setRecordings] = useState7([]);
-  const [recordingsNextCursor, setRecordingsNextCursor] = useState7(null);
-  const [recordingsTotalCount, setRecordingsTotalCount] = useState7(void 0);
-  const [stats, setStats] = useState7(void 0);
-  const [accountStatus, setAccountStatus] = useState7("loading");
-  const [origin, setOrigin] = useState7("");
-  const [stack, setStack] = useState7([{ kind: initialView }]);
-  const [selected, setSelected] = useState7(0);
-  const [spinnerFrame, setSpinnerFrame] = useState7(0);
-  const [loadingMoreRecordings, setLoadingMoreRecordings] = useState7(false);
-  const [loadError, setLoadError] = useState7(void 0);
-  const [notice, setNotice] = useState7(void 0);
-  const [summaryCache, setSummaryCache] = useState7(() => /* @__PURE__ */ new Map());
-  const [transcriptCache, setTranscriptCache] = useState7(
+  const [jobs, setJobs] = useState8([]);
+  const [recordings, setRecordings] = useState8([]);
+  const [recordingsNextCursor, setRecordingsNextCursor] = useState8(null);
+  const [recordingsTotalCount, setRecordingsTotalCount] = useState8(void 0);
+  const [stats, setStats] = useState8(void 0);
+  const [accountStatus, setAccountStatus] = useState8("loading");
+  const [origin, setOrigin] = useState8("");
+  const [stack, setStack] = useState8([{ kind: initialView }]);
+  const [selected, setSelected] = useState8(0);
+  const [spinnerFrame, setSpinnerFrame] = useState8(0);
+  const [loadingMoreRecordings, setLoadingMoreRecordings] = useState8(false);
+  const [loadError, setLoadError] = useState8(void 0);
+  const [notice, setNotice] = useState8(void 0);
+  const [summaryCache, setSummaryCache] = useState8(() => /* @__PURE__ */ new Map());
+  const [transcriptCache, setTranscriptCache] = useState8(
     () => /* @__PURE__ */ new Map()
   );
-  const [audioCache, setAudioCache] = useState7(() => /* @__PURE__ */ new Map());
-  const [downloadedIds, setDownloadedIds] = useState7(() => /* @__PURE__ */ new Set());
-  const [liveRecord, setLiveRecord] = useState7(void 0);
-  const [recordSetupInputs, setRecordSetupInputs] = useState7({
+  const [audioCache, setAudioCache] = useState8(() => /* @__PURE__ */ new Map());
+  const [downloadedIds, setDownloadedIds] = useState8(() => /* @__PURE__ */ new Set());
+  const [liveRecord, setLiveRecord] = useState8(void 0);
+  const [recordSetupInputs, setRecordSetupInputs] = useState8({
     sources: DEFAULT_RECORDING_SOURCES,
     microphones: []
   });
-  const [recordSetupSelection, setRecordSetupSelection] = useState7(
+  const [recordSetupSelection, setRecordSetupSelection] = useState8(
     DEFAULT_RECORDING_SELECTION
   );
-  const [recordSetupLevels, setRecordSetupLevels] = useState7({
+  const [recordSetupLevels, setRecordSetupLevels] = useState8({
     bySourceId: {},
     byMicrophoneId: {}
   });
@@ -2399,6 +2324,65 @@ function AppShell({
       setNotice("Transcription failed. Press enter to retry.");
     }
   }, [liveRecord, refresh, transcribeRecordingArtifact]);
+  const retranscribeStoppedRecording = useCallback(async () => {
+    const current = liveRecord;
+    if (current?.kind !== "stopped") return;
+    const artifact = current.artifact;
+    if (!artifact?.recordingId) {
+      setNotice("This recording is not in Recappi Cloud yet.");
+      return;
+    }
+    if (!onRetranscribe) {
+      setNotice("Re-transcribe is not available in this CLI session.");
+      return;
+    }
+    setLiveRecord({
+      ...current,
+      artifact: {
+        ...artifact,
+        uploadStatus: "uploaded",
+        uploadProgress: 1,
+        transcriptionStatus: "queued",
+        transcriptionProgress: void 0,
+        error: void 0
+      }
+    });
+    try {
+      const data = await onRetranscribe(artifact.recordingId);
+      setLiveRecord((latest) => {
+        const base = latest?.kind === "stopped" && latest.artifact?.recordingId === artifact.recordingId ? latest : current;
+        return {
+          ...base,
+          artifact: {
+            ...artifact,
+            ...base.artifact ?? {},
+            recordingId: data.recordingId,
+            jobId: data.jobId,
+            ...data.transcriptId ? { transcriptId: data.transcriptId } : {},
+            uploadStatus: "uploaded",
+            uploadProgress: 1,
+            transcriptionStatus: transcriptionStatusFromJob(data.status),
+            ...data.status === "succeeded" ? { transcriptionProgress: 1 } : {}
+          }
+        };
+      });
+      setNotice(
+        data.status === "succeeded" ? "Re-transcription ready." : data.status === "running" ? "Re-transcription running." : data.status === "failed" ? "Re-transcription failed. Press T to retry." : "Re-transcription queued."
+      );
+      await refresh({ resetRecordings: true });
+    } catch {
+      setLiveRecord({
+        ...current,
+        artifact: {
+          ...artifact,
+          uploadStatus: "uploaded",
+          transcriptionStatus: "failed",
+          error: "Could not start re-transcription. Please try again."
+        }
+      });
+      setNotice("Re-transcription failed. Press T to retry.");
+    }
+  }, [liveRecord, onRetranscribe, refresh]);
   useEffect4(() => {
     if (liveRecord?.kind !== "stopped") return;
     const artifact = liveRecord.artifact;
@@ -2556,7 +2540,7 @@ function AppShell({
     setNotice(void 0);
   };
   const back = () => setStack((st) => st.length > 1 ? st.slice(0, -1) : st);
-  useInput7((input, key) => {
+  useInput8((input, key) => {
     setNotice(void 0);
     if (screen.kind === "recordSetup") {
       if (input === "q" || key.leftArrow) back();
@@ -2575,6 +2559,10 @@ function AppShell({
         void transcribeStoppedRecording();
         return;
       }
+      if (liveRecord?.kind === "stopped" && input === "T") {
+        void retranscribeStoppedRecording();
+        return;
+      }
       if (liveRecord?.kind === "stopped" && input === "n") {
         void stopLiveRecord();
         return;
@@ -2651,18 +2639,18 @@ function AppShell({
     }
   });
   if (screen.kind === "transcript") {
-    return /* @__PURE__ */ jsx18(TranscriptView, { loading: screen.loading, data: screen.data, error: screen.error });
+    return /* @__PURE__ */ jsx19(TranscriptView, { loading: screen.loading, data: screen.data, error: screen.error });
   }
   if (screen.kind === "jobDetail") {
     const job = jobs.find((j) => j.jobId === screen.jobId);
-    if (!job) return /* @__PURE__ */ jsx18(Missing, { label: "Job" });
-    return /* @__PURE__ */ jsx18(Detail, { notice, children: /* @__PURE__ */ jsx18(JobDetailView, { item: job, origin, spinnerFrame, nowMs: now() }) });
+    if (!job) return /* @__PURE__ */ jsx19(Missing, { label: "Job" });
+    return /* @__PURE__ */ jsx19(Detail, { notice, children: /* @__PURE__ */ jsx19(JobDetailView, { item: job, origin, spinnerFrame, nowMs: now() }) });
   }
   if (screen.kind === "recordingDetail") {
     const rec = recordings.find((r) => r.recordingId === screen.recordingId);
-    if (!rec) return /* @__PURE__ */ jsx18(Missing, { label: "Recording" });
+    if (!rec) return /* @__PURE__ */ jsx19(Missing, { label: "Recording" });
     const detailTranscript = rec.activeTranscriptId ? transcriptCache.get(rec.activeTranscriptId) : void 0;
-    return /* @__PURE__ */ jsx18(Detail, { notice, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(Detail, { notice, children: /* @__PURE__ */ jsx19(
       RecordingDetailView,
       {
         item: rec,
@@ -2673,7 +2661,7 @@ function AppShell({
     ) });
   }
   if (screen.kind === "recordSetup") {
-    return /* @__PURE__ */ jsx18(Box16, { flexDirection: "column", height: size.rows, paddingX: 1, children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(Box17, { flexDirection: "column", height: size.rows, paddingX: 1, children: /* @__PURE__ */ jsx19(
       RecordSetupView,
       {
         model: recordSetupModel,
@@ -2686,32 +2674,42 @@ function AppShell({
   }
   if (screen.kind === "record") {
     if (liveRecord?.kind === "live" && liveRecord.session.mode === "live_captions") {
-      return /* @__PURE__ */ jsx18(LiveCaptionsScreen, { source: liveRecord.session.source, now });
+      return /* @__PURE__ */ jsx19(LiveCaptionsScreen, { source: liveRecord.session.source, now });
     }
     if (liveRecord?.kind === "live" || liveRecord?.kind === "starting" || liveRecord?.kind === "stopping" || liveRecord?.kind === "stopped") {
-      return /* @__PURE__ */ jsx18(Detail, { notice, children: /* @__PURE__ */ jsx18(
-        RecordingHeroScreen,
+      return /* @__PURE__ */ jsx19(Detail, { notice, children: /* @__PURE__ */ jsx19(
+        RecordFrame,
         {
           telemetry: liveRecord.telemetry,
           captions: liveRecord.kind === "live" || liveRecord.kind === "stopping" ? liveRecord.captions : void 0,
           artifact: liveRecord.kind === "stopped" ? liveRecord.artifact : void 0,
-          canTranscribe: Boolean(transcribeRecordingArtifact),
-          now
+          recordings,
+          selectedIndex: liveRecord.kind === "stopped" && liveRecord.artifact?.recordingId ? Math.max(
+            0,
+            recordings.findIndex(
+              (item) => item.recordingId === liveRecord.artifact?.recordingId
+            )
+          ) : 0,
+          title: liveRecord.kind === "stopped" && liveRecord.artifact?.recordingId ? recordFrameTitle(recordings, liveRecord.artifact.recordingId) : "New recording",
+          recordingId: liveRecord.kind === "stopped" ? liveRecord.artifact?.recordingId : void 0,
+          jobId: liveRecord.kind === "stopped" ? liveRecord.artifact?.jobId : void 0,
+          nowMs: now(),
+          spinnerFrame
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", height: size.rows, paddingX: 1, children: [
-      /* @__PURE__ */ jsx18(Box16, { flexGrow: 1, flexDirection: "column", paddingX: 1, paddingTop: 1, children: liveRecord?.kind === "error" ? (() => {
+    return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", height: size.rows, paddingX: 1, children: [
+      /* @__PURE__ */ jsx19(Box17, { flexGrow: 1, flexDirection: "column", paddingX: 1, paddingTop: 1, children: liveRecord?.kind === "error" ? (() => {
         if (liveRecord.code === "record.permission_required") {
-          return /* @__PURE__ */ jsx18(PermissionPreflightView, { items: permissionItemsFromRecordError(liveRecord.data) });
+          return /* @__PURE__ */ jsx19(PermissionPreflightView, { items: permissionItemsFromRecordError(liveRecord.data) });
         }
         const copy = recordErrorCopy(liveRecord.code, liveRecord.message);
-        return /* @__PURE__ */ jsxs15(Fragment6, { children: [
-          /* @__PURE__ */ jsx18(Text16, { color: copy.tone, children: copy.title }),
-          copy.detail ? /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: copy.detail }) : null
+        return /* @__PURE__ */ jsxs16(Fragment6, { children: [
+          /* @__PURE__ */ jsx19(Text17, { color: copy.tone, children: copy.title }),
+          copy.detail ? /* @__PURE__ */ jsx19(Text17, { dimColor: true, children: copy.detail }) : null
         ] });
-      })() : /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "Starting recording\u2026" }) }),
-      /* @__PURE__ */ jsx18(Footer, { keys: "r retry \xB7 o settings \xB7 q / esc / \u2190 back" })
+      })() : /* @__PURE__ */ jsx19(Text17, { dimColor: true, children: "Starting recording\u2026" }) }),
+      /* @__PURE__ */ jsx19(Footer, { keys: "r retry \xB7 o settings \xB7 q / esc / \u2190 back" })
     ] });
   }
   const tab = screen.kind === "jobs" ? "jobs" : screen.kind === "account" ? "account" : "overview";
@@ -2729,7 +2727,7 @@ function AppShell({
     const showPeek = size.columns >= 100;
     const peekWidth = showPeek ? 34 : 0;
     const listColumns = showPeek ? Math.max(30, size.columns - peekWidth - 3) : size.columns;
-    body = /* @__PURE__ */ jsx18(
+    body = /* @__PURE__ */ jsx19(
       OverviewView,
       {
         recordings: recordings.slice(win.start, win.end),
@@ -2749,11 +2747,11 @@ function AppShell({
     );
   } else if (screen.kind === "account") {
     position = "";
-    body = /* @__PURE__ */ jsx18(AccountView, { status: accountStatus, nowMs: now() });
+    body = /* @__PURE__ */ jsx19(AccountView, { status: accountStatus, nowMs: now() });
   } else {
     const win = listWindow(selected, jobs.length, Math.max(3, size.rows - 4));
     position = jobs.length ? `${selected + 1} / ${jobs.length}` : "0";
-    body = /* @__PURE__ */ jsx18(
+    body = /* @__PURE__ */ jsx19(
       JobsView,
       {
         items: jobs.slice(win.start, win.end),
@@ -2763,34 +2761,34 @@ function AppShell({
     );
   }
   const footerKeys = screen.kind === "jobs" ? `${position}  \xB7  \u2191\u2193 select \xB7 \u23CE job \xB7 t transcript \xB7 n record \xB7 1 overview \xB7 3 account \xB7 r refresh \xB7 q quit` : screen.kind === "account" ? "Account  \xB7  n record \xB7 1 overview \xB7 2 jobs \xB7 r refresh \xB7 q quit" : `${position}  \xB7  \u2191\u2193 scroll \xB7 \u23CE open \xB7 t transcript \xB7 n record \xB7 2 jobs \xB7 3 account \xB7 r refresh \xB7 q quit`;
-  return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", height: size.rows, paddingX: 1, children: [
-    /* @__PURE__ */ jsx18(Header, { active: tab }),
-    /* @__PURE__ */ jsxs15(Box16, { flexGrow: 1, flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", height: size.rows, paddingX: 1, children: [
+    /* @__PURE__ */ jsx19(Header, { active: tab }),
+    /* @__PURE__ */ jsxs16(Box17, { flexGrow: 1, flexDirection: "column", children: [
       body,
-      loadError && jobs.length === 0 && recordings.length === 0 ? /* @__PURE__ */ jsx18(Box16, { marginTop: 1, children: /* @__PURE__ */ jsxs15(Text16, { color: "red", children: [
+      loadError && jobs.length === 0 && recordings.length === 0 ? /* @__PURE__ */ jsx19(Box17, { marginTop: 1, children: /* @__PURE__ */ jsxs16(Text17, { color: "red", children: [
         "! ",
         loadError
       ] }) }) : null
     ] }),
-    /* @__PURE__ */ jsx18(Footer, { keys: footerKeys })
+    /* @__PURE__ */ jsx19(Footer, { keys: footerKeys })
   ] });
 }
 function Detail({
   notice,
   children
 }) {
-  return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", children: [
+  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", children: [
     children,
-    notice ? /* @__PURE__ */ jsx18(Box16, { paddingX: 1, children: /* @__PURE__ */ jsx18(Text16, { color: "green", children: notice }) }) : null
+    notice ? /* @__PURE__ */ jsx19(Box17, { paddingX: 1, children: /* @__PURE__ */ jsx19(Text17, { color: "green", children: notice }) }) : null
   ] });
 }
 function Missing({ label }) {
-  return /* @__PURE__ */ jsxs15(Box16, { flexDirection: "column", paddingX: 1, children: [
-    /* @__PURE__ */ jsxs15(Text16, { dimColor: true, children: [
+  return /* @__PURE__ */ jsxs16(Box17, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs16(Text17, { dimColor: true, children: [
       label,
       " no longer in the list."
     ] }),
-    /* @__PURE__ */ jsx18(Text16, { dimColor: true, children: "esc back \xB7 q quit" })
+    /* @__PURE__ */ jsx19(Text17, { dimColor: true, children: "esc back \xB7 q quit" })
   ] });
 }
 var RECORDINGS_PAGE_SIZE, RECORDINGS_PREFETCH_REMAINING;
@@ -2807,10 +2805,11 @@ var init_AppShell = __esm({
     init_LiveCaptionsScreen();
     init_PermissionPreflightView();
     init_RecordSetupView();
-    init_RecordingHeroScreen();
+    init_RecordFrame();
     init_liveCaptions();
     init_recordingCore();
     init_format();
+    init_RecordingRow();
     init_terminal();
     RECORDINGS_PAGE_SIZE = 50;
     RECORDINGS_PREFETCH_REMAINING = 8;
@@ -2828,7 +2827,7 @@ __export(tui_exports, {
   runDashboard: () => runDashboard,
   useTerminalSize: () => useTerminalSize
 });
-import React10 from "react";
+import React11 from "react";
 import { render as render2 } from "ink";
 import { spawn as spawn3 } from "child_process";
 function openUrl(url2) {
@@ -2849,7 +2848,7 @@ function copyText(text) {
 async function runDashboard(deps) {
   const renderApp = deps.renderApp ?? render2;
   const app = renderApp(
-    React10.createElement(AppShell, {
+    React11.createElement(AppShell, {
       fetchJobs: deps.fetchJobs,
       fetchTranscript: deps.fetchTranscript,
       fetchRecordings: deps.fetchRecordings,
@@ -20972,7 +20971,270 @@ function createFifo(path6) {
 
 // src/record.tsx
 init_LiveCaptionsScreen();
-init_RecordingHeroScreen();
+
+// src/tui/RecordingHeroScreen.tsx
+init_format();
+init_liveCaptions();
+init_terminal();
+import { useEffect as useEffect2, useRef, useState as useState3 } from "react";
+import { Box as Box2, Text as Text2, useInput as useInput2 } from "ink";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var WAVE_THROTTLE_MS = 220;
+function waveRowsFor(terminalRows) {
+  return terminalRows >= 30 ? 5 : 3;
+}
+function litCount(level, rows) {
+  const amp = Math.max(0, Math.min(1, level));
+  if (amp <= 0.028) return 0;
+  return Math.max(1, Math.min(rows, Math.ceil(Math.pow(amp, 0.58) * rows)));
+}
+function litCounts(samples, width, rows) {
+  if (width <= 0) return [];
+  const tail = samples.slice(-width);
+  return [...Array(Math.max(0, width - tail.length)).fill(0), ...tail].map((v) => litCount(v, rows));
+}
+function levelDb(level) {
+  if (level <= 0.03) return "silent";
+  return `${Math.round(level * 60 - 60)} dB`;
+}
+function MeterRow({
+  label,
+  samples,
+  level,
+  paused,
+  width,
+  rows
+}) {
+  const silent = level <= 0.03;
+  const cols = litCounts(samples, width, rows);
+  const litColor = paused ? "gray" : "cyan";
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs2(Box2, { width: width + 9, children: [
+      /* @__PURE__ */ jsx3(Box2, { width: 9, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: label }) }),
+      /* @__PURE__ */ jsx3(Box2, { flexGrow: 1, justifyContent: "flex-end", children: !paused && silent ? /* @__PURE__ */ jsx3(Text2, { color: "yellow", children: "silent" }) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: paused ? "paused" : levelDb(level) }) })
+    ] }),
+    Array.from({ length: rows }, (_, r) => {
+      const fromBottom = rows - r;
+      return /* @__PURE__ */ jsx3(Text2, { children: cols.map(
+        (c, i) => c >= fromBottom ? /* @__PURE__ */ jsx3(Text2, { color: litColor, children: c === fromBottom ? "\u2022" : "\u25CF" }, i) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\xB7" }, i)
+      ) }, r);
+    })
+  ] });
+}
+function ProgressBar({ fraction, width = 12 }) {
+  const f = Math.max(0, Math.min(1, fraction));
+  const filled = Math.round(f * width);
+  return /* @__PURE__ */ jsxs2(Text2, { color: "cyan", children: [
+    "\u2593".repeat(filled),
+    /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2591".repeat(Math.max(0, width - filled)) })
+  ] });
+}
+function stoppedPhase(artifact) {
+  if (!artifact) return null;
+  if (artifact.uploadStatus === "uploading") {
+    return { label: "Uploading to Recappi Cloud", fraction: artifact.uploadProgress };
+  }
+  if (artifact.uploadStatus === "queued") return { label: "Queued to upload" };
+  if (artifact.transcriptionStatus === "processing") {
+    return { label: "Transcribing", fraction: artifact.transcriptionProgress };
+  }
+  return null;
+}
+function RecordingHeroScreen({
+  telemetry,
+  artifact,
+  captions,
+  canTranscribe = false,
+  canPause = false,
+  now = () => Date.now()
+}) {
+  const size = useTerminalSize();
+  const [tick, setTick] = useState3(() => now());
+  const [waveSys, setWaveSys] = useState3([]);
+  const [waveMic, setWaveMic] = useState3([]);
+  const [captionMode, setCaptionMode] = useState3("both");
+  const lastAppendRef = useRef(0);
+  useInput2((input) => {
+    if (input === "c") {
+      setCaptionMode((m) => m === "both" ? "source" : m === "source" ? "translation" : "both");
+    }
+  });
+  useEffect2(() => {
+    if (telemetry.level == null) return;
+    const t = now();
+    if (t - lastAppendRef.current < WAVE_THROTTLE_MS) return;
+    lastAppendRef.current = t;
+    setWaveSys((w) => [...w.slice(-512), telemetry.level.system ?? 0]);
+    setWaveMic((w) => [...w.slice(-512), telemetry.level.mic ?? 0]);
+  }, [telemetry.level]);
+  useEffect2(() => {
+    const id = setInterval(() => setTick(now()), 1e3);
+    return () => clearInterval(id);
+  }, []);
+  const elapsed = telemetry.startedAtMs != null ? formatClockMs(Math.max(0, tick - telemetry.startedAtMs)) : "00:00";
+  const innerWidth = Math.max(10, size.columns - 4);
+  if (telemetry.status === "stopped") {
+    const handoff = stoppedHandoffCopy(artifact, canTranscribe);
+    const phase = stoppedPhase(artifact);
+    const meta3 = [
+      telemetry.durationMs != null ? formatClockMs(telemetry.durationMs) : null,
+      formatBytes2(telemetry.sizeBytes) || null
+    ].filter(Boolean).join(" \xB7 ");
+    const saved = artifact?.uploadStatus === "uploaded" ? "\u2713 Saved to Recappi Cloud" : "\u2713 Saved to your Mac";
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "recappi \xB7 Recording" }),
+      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx3(Text2, { color: "green", children: saved }),
+        meta3 ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: meta3 }) : null,
+        telemetry.savedPath ? /* @__PURE__ */ jsx3(Text2, { dimColor: true, wrap: "truncate-middle", children: telemetry.savedPath }) : null
+      ] }),
+      phase ? /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, children: [
+        /* @__PURE__ */ jsx3(Text2, { color: "cyan", children: `\u25D0 ${phase.label}` }),
+        phase.fraction != null ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3(Text2, { children: "   " }),
+          /* @__PURE__ */ jsx3(ProgressBar, { fraction: phase.fraction }),
+          /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: ` ${Math.round(phase.fraction * 100)}%` })
+        ] }) : /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "\u2026" })
+      ] }) : null,
+      /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx3(Text2, { color: handoff.tone === "red" ? "red" : handoff.tone === "green" ? "green" : void 0, dimColor: handoff.tone === "dim", children: handoff.text }),
+        artifact?.error ? /* @__PURE__ */ jsx3(Text2, { color: "red", wrap: "truncate-end", children: artifact.error }) : null
+      ] })
+    ] });
+  }
+  if (telemetry.status === "error") {
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "recappi \xB7 Recording" }),
+      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { color: "red", children: telemetry.error ? `Recording error: ${telemetry.error}` : "Recording error" }) }),
+      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "esc back" }) })
+    ] });
+  }
+  const paused = telemetry.status === "paused";
+  const starting = telemetry.status === "starting" || telemetry.status === "stopping";
+  const badge = paused ? "\u23F8 PAUSED" : starting ? "\u2026" : "\u23FA REC";
+  const meterW = Math.max(10, Math.min(72, innerWidth - 20));
+  const sizeStr = telemetry.sizeBytes ? formatBytes2(telemetry.sizeBytes) : "";
+  const context = [telemetry.sourceLabel, telemetry.micEnabled ? "Microphone" : null, sizeStr || null].filter(Boolean).join("  \xB7  ");
+  const waveRows = waveRowsFor(size.rows);
+  const meterBlockRows = (telemetry.micEnabled ? 2 : 1) * (waveRows + 1) + (telemetry.micEnabled ? 1 : 0);
+  const fixedRows = 8 + meterBlockRows;
+  const captionRows = Math.max(2, size.rows - fixedRows);
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", paddingX: 1, children: [
+    /* @__PURE__ */ jsxs2(Text2, { children: [
+      /* @__PURE__ */ jsx3(Text2, { bold: true, color: "green", children: "recappi" }),
+      /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: " \xB7 Recording" })
+    ] }),
+    /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, paddingX: 1, flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs2(Text2, { children: [
+        /* @__PURE__ */ jsx3(Text2, { bold: true, color: paused ? "yellow" : "red", children: badge }),
+        /* @__PURE__ */ jsx3(Text2, { children: "   " }),
+        /* @__PURE__ */ jsx3(Text2, { bold: true, children: elapsed })
+      ] }),
+      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, flexDirection: "column", children: telemetry.level == null ? (
+        // No level telemetry yet — honest activity, not a flat meter that
+        // reads as silence (the elapsed timer above proves it's live).
+        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: paused ? "Paused" : `Capturing audio${".".repeat(Math.floor(tick / 1e3) % 3 + 1)}` })
+      ) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx3(MeterRow, { label: "System", samples: waveSys, level: telemetry.level.system ?? 0, paused, width: meterW, rows: waveRows }),
+        telemetry.micEnabled ? /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(MeterRow, { label: "Mic", samples: waveMic, level: telemetry.level.mic ?? 0, paused, width: meterW, rows: waveRows }) }) : null
+      ] }) }),
+      /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: context }) }),
+      captions ? /* @__PURE__ */ jsxs2(Box2, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx3(Text2, { bold: true, dimColor: true, children: "LIVE CAPTIONS" }),
+        /* @__PURE__ */ jsx3(HeroCaptions, { state: captions, maxRows: captionRows, width: innerWidth, mode: captionMode })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx3(Box2, { marginTop: 1, children: /* @__PURE__ */ jsxs2(Text2, { dimColor: true, children: [
+      "q stop & save",
+      canPause ? ` \xB7 p ${paused ? "resume" : "pause"}` : "",
+      captions ? " \xB7 c captions" : ""
+    ] }) })
+  ] });
+}
+var trimLead = (s) => s.replace(/^\s+/, "");
+function wrappedRows(text, width) {
+  return Math.max(1, Math.ceil(displayWidth(text) / Math.max(1, width)));
+}
+function captionColumn(items, maxRows, width, dim) {
+  const budget = Math.max(1, maxRows);
+  const chosen = [];
+  let used = 0;
+  for (let i = items.length - 1; i >= 0; i--) {
+    const h = wrappedRows(items[i].text, width);
+    if (used + h > budget && chosen.length > 0) break;
+    chosen.unshift(items[i]);
+    used += h;
+  }
+  return chosen.map((it) => /* @__PURE__ */ jsx3(Text2, { dimColor: dim, wrap: "wrap", children: it.text }, it.key));
+}
+function HeroCaptions({
+  state,
+  maxRows,
+  width,
+  mode
+}) {
+  const hasPartial = Boolean(state.partial && state.partial.length > 0);
+  const captionError = state.status === "error" ? `Captions unavailable: ${state.error ?? "Live captions unavailable."}` : null;
+  if (state.lines.length === 0 && !hasPartial) {
+    return /* @__PURE__ */ jsx3(Text2, { color: captionError ? "yellow" : void 0, dimColor: !captionError, children: captionError ?? (state.status === "live" ? "Listening for speech\u2026" : liveCaptionStatusLabel(state.status)) });
+  }
+  const sourceItems = state.lines.map((l) => ({
+    key: `${l.id}-s`,
+    text: `${l.speaker ? `${l.speaker}: ` : ""}${trimLead(l.text)}`
+  }));
+  if (hasPartial) sourceItems.push({ key: "sp", text: trimLead(state.partial) });
+  const translationItems = state.lines.filter((l) => l.translation).map((l) => ({ key: `${l.id}-t`, text: trimLead(l.translation) }));
+  if (state.translationPartial) translationItems.push({ key: "tp", text: trimLead(state.translationPartial) });
+  const errLine = captionError ? /* @__PURE__ */ jsx3(Text2, { color: "yellow", wrap: "wrap", children: captionError }) : null;
+  const hasTranslation = translationItems.length > 0;
+  if (mode === "source" || !hasTranslation) {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      captionColumn(sourceItems, maxRows, width, false),
+      errLine
+    ] });
+  }
+  if (mode === "translation") {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      captionColumn(translationItems, maxRows, width, false),
+      errLine
+    ] });
+  }
+  const gap = 2;
+  const colW = Math.max(12, Math.floor((width - gap) / 2));
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Box2, { flexDirection: "row", children: [
+      /* @__PURE__ */ jsxs2(Box2, { width: colW, flexDirection: "column", marginRight: gap, children: [
+        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "ORIGINAL" }),
+        captionColumn(sourceItems, Math.max(1, maxRows - 1), colW, false)
+      ] }),
+      /* @__PURE__ */ jsxs2(Box2, { width: colW, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx3(Text2, { dimColor: true, children: "TRANSLATION" }),
+        captionColumn(translationItems, Math.max(1, maxRows - 1), colW, false)
+      ] })
+    ] }),
+    errLine
+  ] });
+}
+function stoppedHandoffCopy(artifact, canTranscribe) {
+  if (artifact?.uploadStatus === "uploading" || artifact?.transcriptionStatus === "processing") {
+    return { text: "esc run in background", tone: "dim" };
+  }
+  if (artifact?.transcriptionStatus === "queued") {
+    return { text: "Transcription queued \xB7 \u23CE open recording \xB7 n not now", tone: "green" };
+  }
+  if (artifact?.transcriptionStatus === "ready") {
+    return { text: "Transcription ready \xB7 \u23CE open recording \xB7 n not now", tone: "green" };
+  }
+  if (artifact?.uploadStatus === "failed" || artifact?.transcriptionStatus === "failed") {
+    return { text: "Transcription failed \xB7 \u23CE retry \xB7 n not now", tone: "red" };
+  }
+  if (!canTranscribe || !artifact?.audioPath) {
+    return { text: "Saved locally \xB7 n back", tone: "dim" };
+  }
+  return { text: "Starting transcription\u2026", tone: "normal" };
+}
+
+// src/record.tsx
 init_liveCaptions();
 import { jsx as jsx4 } from "react/jsx-runtime";
 var SIDECAR_COMMAND_ENV = "RECAPPI_MINI_SIDECAR";