fix: cache invalidation, wire missing keybindings, and UX polish

Fix P0 bug where UPDATE_STAGE_ARGS and TOGGLE_STAGE did not invalidate
cache entries, causing the inspector to show stale results after editing
a stage's arguments or toggling enabled state. Cache invalidation now
cascades to all downstream stages in the fork.

Wire missing keybindings: x (export pipe script), X (ExportPicker),
r (re-run from cursor), t (cycle inspector view), J/K (reorder stages),
v (export records to temp file), Ctrl+C (quit). Remove Phase 2+
shortcuts (f, b, i, p) from HelpPanel and StatusBar.

Additional UX fixes: auto-calculate RecordTable column widths from data,
show "N of M records (X%)" ratio in InspectorHeader, increase pipeline
panel width from 28 to 32.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: benbernard

src/tui/components/App.tsx

@@ -14,7 +14,9 @@ import type { CliRenderer } from "@opentui/core";
 import type { TuiOptions } from "../index.tsx";
 import type { PipelineAction, StageConfig } from "../model/types.ts";
 import { pipelineReducer, createInitialState } from "../model/reducer.ts";
-import { getCursorStage } from "../model/selectors.ts";
+import { getCursorStage, getCursorOutput, getDownstreamStages } from "../model/selectors.ts";
+import { exportAsPipeScript, exportAsChainCommand, copyToClipboard } from "../model/serialization.ts";
+import { ExportPicker, type ExportFormat } from "./modals/ExportPicker.tsx";
 import { TitleBar } from "./TitleBar.tsx";
 import { StageList } from "./StageList.tsx";
 import { InspectorPanel } from "./InspectorPanel.tsx";
@@ -34,7 +36,8 @@ type ModalState =
   | { kind: "addStage" }
   | { kind: "editStage" }
   | { kind: "confirmDelete"; stageId: string }
-  | { kind: "help" };
+  | { kind: "help" }
+  | { kind: "exportPicker" };
 
 export function App({ options, renderer }: AppProps) {
   const hasInput = Boolean(options.inputFile || options.sessionId);
@@ -86,6 +89,36 @@ export function App({ options, renderer }: AppProps) {
       dispatch({ type: "TOGGLE_FOCUS" });
       return;
     }
+    if (key.name === "c" && key.ctrl) {
+      renderer.destroy();
+      return;
+    }
+    if (key.raw === "x") {
+      const script = exportAsPipeScript(state);
+      void copyToClipboard(script).then((ok) => {
+        showStatus(ok ? "Copied pipe script!" : "Export: clipboard failed");
+      });
+      return;
+    }
+    if (key.raw === "X") {
+      setModal({ kind: "exportPicker" });
+      return;
+    }
+    if (key.raw === "v") {
+      const output = getCursorOutput(state);
+      if (output && output.records.length > 0) {
+        const tmpPath = `/tmp/recs-${Date.now()}.jsonl`;
+        const jsonl = output.records.map((r) => JSON.stringify(r.toJSON())).join("\n") + "\n";
+        void Bun.write(tmpPath, jsonl).then(() => {
+          void copyToClipboard(tmpPath).then(() => {
+            showStatus(`Records exported to ${tmpPath}`);
+          });
+        });
+      } else {
+        showStatus("No records to export");
+      }
+      return;
+    }
 
     // Pipeline panel keys
     if (state.focusedPanel === "pipeline") {
@@ -119,6 +152,29 @@ export function App({ options, renderer }: AppProps) {
         }
         return;
       }
+      if (key.raw === "r") {
+        if (state.cursorStageId) {
+          dispatch({ type: "INVALIDATE_STAGE", stageId: state.cursorStageId });
+          const downstream = getDownstreamStages(state, state.cursorStageId);
+          for (const s of downstream) {
+            dispatch({ type: "INVALIDATE_STAGE", stageId: s.id });
+          }
+          showStatus("Re-running from cursor...");
+        }
+        return;
+      }
+      if (key.raw === "J") {
+        if (state.cursorStageId) {
+          dispatch({ type: "REORDER_STAGE", stageId: state.cursorStageId, direction: "down" });
+        }
+        return;
+      }
+      if (key.raw === "K") {
+        if (state.cursorStageId) {
+          dispatch({ type: "REORDER_STAGE", stageId: state.cursorStageId, direction: "up" });
+        }
+        return;
+      }
       if (key.name === "return" || key.name === "tab") {
         dispatch({ type: "TOGGLE_FOCUS" });
         return;
@@ -131,6 +187,13 @@ export function App({ options, renderer }: AppProps) {
         dispatch({ type: "TOGGLE_FOCUS" });
         return;
       }
+      if (key.raw === "t") {
+        const modes = ["table", "prettyprint", "json"] as const;
+        const currentIdx = modes.indexOf(state.inspector.viewMode as typeof modes[number]);
+        const nextIdx = (currentIdx + 1) % modes.length;
+        dispatch({ type: "SET_VIEW_MODE", viewMode: modes[nextIdx]! });
+        return;
+      }
     }
   });
 
@@ -174,6 +237,31 @@ export function App({ options, renderer }: AppProps) {
     setModal({ kind: "none" });
   }, [modal, showStatus]);
 
+  const handleExportFormat = useCallback(
+    (format: ExportFormat) => {
+      setModal({ kind: "none" });
+      if (format === "pipe-script") {
+        const text = exportAsPipeScript(state);
+        void copyToClipboard(text).then((ok) => {
+          showStatus(ok ? "Copied pipe script!" : "Export: clipboard failed");
+        });
+      } else if (format === "chain-command") {
+        const text = exportAsChainCommand(state);
+        void copyToClipboard(text).then((ok) => {
+          showStatus(ok ? "Copied chain command!" : "Export: clipboard failed");
+        });
+      } else {
+        // save-file
+        const script = exportAsPipeScript(state);
+        const tmpPath = `/tmp/recs-pipeline-${Date.now()}.sh`;
+        void Bun.write(tmpPath, script).then(() => {
+          showStatus(`Saved to ${tmpPath}`);
+        });
+      }
+    },
+    [state, showStatus],
+  );
+
   if (!hasInput) {
     return (
       <box flexDirection="column" width="100%" height="100%">
@@ -230,6 +318,12 @@ export function App({ options, renderer }: AppProps) {
       {modal.kind === "help" && (
         <HelpPanel onClose={() => setModal({ kind: "none" })} />
       )}
+      {modal.kind === "exportPicker" && (
+        <ExportPicker
+          onSelect={handleExportFormat}
+          onCancel={() => setModal({ kind: "none" })}
+        />
+      )}
     </box>
   );
 }

src/tui/components/InspectorHeader.tsx

@@ -1,5 +1,5 @@
 import type { PipelineState } from "../model/types.ts";
-import { getCursorStage, getCursorOutput } from "../model/selectors.ts";
+import { getCursorStage, getCursorOutput, getActivePath, getStageOutput } from "../model/selectors.ts";
 
 export interface InspectorHeaderProps {
   state: PipelineState;
@@ -41,7 +41,21 @@ export function InspectorHeader({ state }: InspectorHeaderProps) {
     );
   }
 
-  const countStr = output ? `${output.recordCount} records` : "not cached";
+  // Get total record count from first stage for ratio display
+  const activePath = getActivePath(state);
+  const firstStage = activePath[0];
+  const firstOutput = firstStage ? getStageOutput(state, firstStage.id) : undefined;
+  const totalRecords = firstOutput?.recordCount;
+
+  let countStr: string;
+  if (!output) {
+    countStr = "not cached";
+  } else if (totalRecords && totalRecords > 0 && output.recordCount !== totalRecords) {
+    const pct = Math.round((output.recordCount / totalRecords) * 100);
+    countStr = `${output.recordCount} of ${totalRecords} records (${pct}%)`;
+  } else {
+    countStr = `${output.recordCount} records`;
+  }
   const cacheAge = output ? `, cached ${formatCacheAge(output.computedAt)}` : "";
 
   return (

src/tui/components/RecordTable.tsx

@@ -26,16 +26,29 @@ export function RecordTable({
     scrollOffset + maxRows,
   );
 
+  // Auto-calculate column widths from field names + data
+  const COL_MIN = 4;
+  const COL_MAX = 30;
+  const colWidths = fields.map((field) => {
+    let maxWidth = field.length;
+    for (const record of visibleRecords) {
+      const val = record.get(field);
+      const str = val === null || val === undefined ? "" : String(val);
+      maxWidth = Math.max(maxWidth, str.length);
+    }
+    return Math.min(Math.max(maxWidth, COL_MIN), COL_MAX);
+  });
+
   // Build header
-  const header = "#   " + fields.map((f) => f.padEnd(15).slice(0, 15)).join("  ");
+  const header = "#   " + fields.map((f, i) => f.padEnd(colWidths[i]!).slice(0, colWidths[i]!)).join("  ");
 
   // Build rows
   const rows = visibleRecords.map((record, idx) => {
     const rowNum = String(scrollOffset + idx + 1).padStart(3);
-    const cells = fields.map((field) => {
+    const cells = fields.map((field, i) => {
       const val = record.get(field);
       const str = val === null || val === undefined ? "" : String(val);
-      return str.padEnd(15).slice(0, 15);
+      return str.padEnd(colWidths[i]!).slice(0, colWidths[i]!);
     });
     return `${rowNum} ${cells.join("  ")}`;
   });

src/tui/components/StageList.tsx

@@ -13,7 +13,7 @@ export function StageList({ state }: StageListProps) {
 
   return (
     <box
-      width={28}
+      width={32}
       flexDirection="column"
       borderStyle="single"
       borderColor={isFocused ? "#FFFFFF" : "#555555"}

src/tui/components/StatusBar.tsx

@@ -12,7 +12,7 @@ export function StatusBar({ state, statusMessage }: StatusBarProps) {
   // Context-sensitive keybindings based on focused panel
   const keys =
     state.focusedPanel === "pipeline"
-      ? "a:add d:del e:edit u:undo x:export f:fork v:vim ?:help q:quit"
+      ? "a:add d:del e:edit J/K:move x:export v:vim u:undo ?:help q:quit"
       : "↑↓:scroll t:view /:search Tab:back";
 
   return (

src/tui/components/modals/HelpPanel.tsx

@@ -20,29 +20,27 @@ PIPELINE (left panel)
   d            Delete stage (with confirm)
   e            Edit stage arguments
   Space        Toggle stage enabled/disabled
+  J/K          Reorder stage down/up
+  r            Re-run from cursor stage
+  v            Export records to temp file
+  x            Export pipeline → clipboard
+  X            Export pipeline (choose format)
   Enter/Tab    Focus inspector panel
 
 INSPECTOR (right panel)
   ↑/k, ↓/j    Scroll records
   PgUp/PgDn    Page scroll
-  t            Cycle view: table → prettyprint → json → schema
+  t            Cycle view: table → prettyprint → json
   /            Search records
   Esc/Tab      Return to pipeline
 
 GLOBAL
   Tab          Toggle focus: pipeline ↔ inspector
-  f            Fork at cursor
-  b            Switch fork branch
-  i            Switch input file
-  r            Re-run from first stale stage
-  v            Open records in $EDITOR
-  x            Export pipeline (shell pipe script → clipboard)
-  X            Export pipeline (choose format)
   u            Undo last pipeline edit
   Ctrl+R       Redo last undone edit
-  p            Pin/unpin stage for selective caching
+  Ctrl+C       Quit
   ?            Toggle this help
-  q            Quit (auto-saves session)`;
+  q            Quit`;
 
 export function HelpPanel({ onClose }: HelpPanelProps) {
   useKeyboard((key) => {

src/tui/model/reducer.ts

@@ -5,6 +5,7 @@ import type {
   Stage,
   StageId,
   Fork,
+  CachedResult,
   CacheConfig,
   InspectorState,
 } from "./types.ts";
@@ -316,7 +317,9 @@ export function pipelineReducer(
         config: { ...stage.config, args: [...action.args] },
       });
 
-      return { ...state, stages };
+      const cache = invalidateStageAndDownstream(state.cache, state.forks, stage);
+
+      return { ...state, stages, cache };
     }
 
     // ── Toggle stage enabled ────────────────────────────────────
@@ -330,7 +333,9 @@ export function pipelineReducer(
         config: { ...stage.config, enabled: !stage.config.enabled },
       });
 
-      return { ...state, stages };
+      const cache = invalidateStageAndDownstream(state.cache, state.forks, stage);
+
+      return { ...state, stages, cache };
     }
 
     // ── Reorder stage ───────────────────────────────────────────
@@ -536,6 +541,13 @@ export function pipelineReducer(
           state.focusedPanel === "pipeline" ? "inspector" : "pipeline",
       };
 
+    // ── Inspector view mode ─────────────────────────────────────
+    case "SET_VIEW_MODE":
+      return {
+        ...state,
+        inspector: { ...state.inspector, viewMode: action.viewMode },
+      };
+
     default:
       return state;
   }
@@ -577,6 +589,37 @@ function rebuildLinksForFork(
   }
 }
 
+/**
+ * Remove cache entries for a stage and all downstream stages in the same fork.
+ * Called when a stage's config changes (args update, toggle enabled) to ensure
+ * the inspector doesn't show stale cached results.
+ */
+function invalidateStageAndDownstream(
+  cache: Map<string, CachedResult>,
+  forks: Map<string, Fork>,
+  stage: Stage,
+): Map<string, CachedResult> {
+  const fork = forks.get(stage.forkId);
+  if (!fork) return cache;
+
+  const idx = fork.stageIds.indexOf(stage.id);
+  if (idx === -1) return cache;
+
+  // This stage + all stages after it in the fork
+  const toInvalidate = new Set(fork.stageIds.slice(idx));
+
+  const newCache = new Map(cache);
+  for (const [key] of newCache) {
+    for (const sid of toInvalidate) {
+      if (key.endsWith(`:${sid}`)) {
+        newCache.delete(key);
+        break;
+      }
+    }
+  }
+  return newCache;
+}
+
 /**
  * Pre-check whether an action would be a no-op so we can skip the undo checkpoint.
  * Returns true if the action should be short-circuited (return state unchanged).

src/tui/model/types.ts

@@ -129,7 +129,8 @@ export type PipelineAction =
   | { type: "SET_ERROR"; stageId: StageId; message: string }
   | { type: "CLEAR_ERROR" }
   | { type: "SET_EXECUTING"; executing: boolean }
-  | { type: "TOGGLE_FOCUS" };
+  | { type: "TOGGLE_FOCUS" }
+  | { type: "SET_VIEW_MODE"; viewMode: InspectorState["viewMode"] };
 
 // ── File Size Warning ─────────────────────────────────────────────