rc4

Author: gglucass

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "headroom-desktop",
-  "version": "0.5.0-rc.3",
+  "version": "0.5.0-rc.4",
   "private": true,
   "type": "module",
   "scripts": {

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "headroom-desktop"
-version = "0.5.0-rc.3"
+version = "0.5.0-rc.4"
 description = "Headroom v1 local-first LLM optimization tray app"
 authors = ["Codex"]
 license = "MIT"

src-tauri/Cargo.lock

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Headroom",
-  "version": "0.5.0-rc.3",
+  "version": "0.5.0-rc.4",
   "identifier": "com.extraheadroom.headroom",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/Cargo.toml

@@ -1,6 +1,12 @@
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vitest";
-import { ActivityFeed, diffLines, formatRequestMessages, groupTransforms } from "./ActivityFeed";
+import {
+  ActivityFeed,
+  collapseDiff,
+  diffLines,
+  formatRequestMessages,
+  groupTransforms
+} from "./ActivityFeed";
 import type {
   ActivityFeedResponse,
   ActivityFeedSnapshot,
@@ -853,3 +859,23 @@ describe("diffLines", () => {
     expect(diffLines(huge, huge)).toBeNull(); // 6001^2 ≈ 36M > 30M cap
   });
 });
+
+describe("collapseDiff", () => {
+  it("collapses long unchanged runs while keeping context around changes", () => {
+    const original = Array.from({ length: 2000 }, (_, i) => String(i)).join("\n");
+    const compressed = Array.from({ length: 2000 }, (_, i) =>
+      i === 1000 ? "CHANGED" : String(i)
+    ).join("\n");
+    const collapsed = collapseDiff(diffLines(original, compressed)!, 3);
+    // The removed line survives and sits near the top of the collapsed output.
+    const delIdx = collapsed.findIndex((l) => l.type === "del" && l.text === "1000");
+    expect(delIdx).toBeGreaterThanOrEqual(0);
+    expect(delIdx).toBeLessThan(10);
+    // Thousands of identical lines are reduced to two skip markers.
+    expect(collapsed.filter((l) => l.type === "skip").length).toBe(2);
+    expect(collapsed.some((l) => l.type === "same" && l.text === "0")).toBe(false);
+    // Context lines immediately around the change are preserved.
+    expect(collapsed.some((l) => l.type === "same" && l.text === "999")).toBe(true);
+    expect(collapsed.some((l) => l.type === "same" && l.text === "1001")).toBe(true);
+  });
+});

src-tauri/tauri.conf.json

@@ -341,6 +341,102 @@ export function diffLines(a: string, b: string): DiffLine[] | null {
   return out;
 }
 
+export type CollapsedDiffLine = DiffLine | { type: "skip"; text: string };
+
+// Keep `context` unchanged lines around each change and collapse the rest, so
+// the removed (red) / added (green) lines are visible the moment the row opens
+// instead of buried under hundreds of identical context lines.
+const DIFF_CONTEXT = 3;
+
+export function collapseDiff(diff: DiffLine[], context = DIFF_CONTEXT): CollapsedDiffLine[] {
+  const keep = new Array(diff.length).fill(false);
+  for (let i = 0; i < diff.length; i++) {
+    if (diff[i].type === "same") continue;
+    for (let j = Math.max(0, i - context); j <= Math.min(diff.length - 1, i + context); j++) {
+      keep[j] = true;
+    }
+  }
+  const out: CollapsedDiffLine[] = [];
+  let i = 0;
+  while (i < diff.length) {
+    if (diff[i].type !== "same" || keep[i]) {
+      out.push(diff[i]);
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < diff.length && diff[j].type === "same" && !keep[j]) j++;
+    const n = j - i;
+    out.push({ type: "skip", text: `... ${n} unchanged line${n === 1 ? "" : "s"}` });
+    i = j;
+  }
+  return out;
+}
+
+// Unified line diff of original vs compressed request bodies, so pruned content
+// (red) and inserted truncation markers (green) pop instead of two near-identical
+// dumps. Returns dt/dd fragment for the detail grid. Shared by the transformation
+// and record rows.
+function CompressionDiff({
+  requestMessages,
+  compressedMessages,
+  inputTokensOriginal,
+  inputTokensOptimized
+}: {
+  requestMessages: TransformationRequestMessage[];
+  compressedMessages: TransformationRequestMessage[];
+  inputTokensOriginal?: number | null;
+  inputTokensOptimized?: number | null;
+}) {
+  const original = formatRequestMessages(requestMessages);
+  const compressed = formatRequestMessages(compressedMessages);
+  const diff = diffLines(original, compressed);
+  if (!diff) {
+    // Too large to diff — fall back to side-by-side dumps.
+    return (
+      <>
+        <dt>Request (original)</dt>
+        <dd>
+          <pre className="activity-feed__message-dump">{original}</pre>
+        </dd>
+        <dt>Request (compressed)</dt>
+        <dd>
+          <pre className="activity-feed__message-dump">{compressed}</pre>
+        </dd>
+      </>
+    );
+  }
+  return (
+    <>
+      <dt>
+        Compression diff
+        {inputTokensOriginal != null && inputTokensOptimized != null
+          ? ` (${inputTokensOriginal.toLocaleString()} → ${inputTokensOptimized.toLocaleString()} tokens)`
+          : ""}
+      </dt>
+      <dd>
+        <pre className="activity-feed__message-dump activity-feed__diff">
+          {collapseDiff(diff).map((line, idx) => (
+            <div
+              key={idx}
+              className={`activity-feed__diff-line activity-feed__diff-line--${line.type}`}
+            >
+              {line.type === "del"
+                ? "- "
+                : line.type === "add"
+                  ? "+ "
+                  : line.type === "skip"
+                    ? ""
+                    : "  "}
+              {line.text}
+            </div>
+          ))}
+        </pre>
+      </dd>
+    </>
+  );
+}
+
 function TransformationRow({ event }: { event: TransformationFeedEvent }) {
   const saved = event.tokensSaved ?? 0;
   const pct = event.savingsPercent ?? 0;
@@ -409,55 +505,12 @@ function TransformationRow({ event }: { event: TransformationFeedEvent }) {
         </>
       ) : null}
       {hasRequestMessages && hasCompressedMessages ? (
-        // New proxy shape: both sides present. Render a unified line diff so
-        // pruned content (red) and inserted truncation markers (green) pop —
-        // the two near-identical dumps were hard to tell apart at a glance.
-        (() => {
-          const original = formatRequestMessages(event.requestMessages!);
-          const compressed = formatRequestMessages(event.compressedMessages!);
-          const diff = diffLines(original, compressed);
-          const label = (
-            <dt>
-              Compression diff
-              {event.inputTokensOriginal != null && event.inputTokensOptimized != null
-                ? ` (${event.inputTokensOriginal.toLocaleString()} → ${event.inputTokensOptimized.toLocaleString()} tokens)`
-                : ""}
-            </dt>
-          );
-          if (!diff) {
-            // Too large to diff — fall back to side-by-side dumps.
-            return (
-              <>
-                <dt>Request (original)</dt>
-                <dd>
-                  <pre className="activity-feed__message-dump">{original}</pre>
-                </dd>
-                <dt>Request (compressed)</dt>
-                <dd>
-                  <pre className="activity-feed__message-dump">{compressed}</pre>
-                </dd>
-              </>
-            );
-          }
-          return (
-            <>
-              {label}
-              <dd>
-                <pre className="activity-feed__message-dump activity-feed__diff">
-                  {diff.map((line, idx) => (
-                    <div
-                      key={idx}
-                      className={`activity-feed__diff-line activity-feed__diff-line--${line.type}`}
-                    >
-                      {line.type === "del" ? "- " : line.type === "add" ? "+ " : "  "}
-                      {line.text}
-                    </div>
-                  ))}
-                </pre>
-              </dd>
-            </>
-          );
-        })()
+        <CompressionDiff
+          requestMessages={event.requestMessages!}
+          compressedMessages={event.compressedMessages!}
+          inputTokensOriginal={event.inputTokensOriginal}
+          inputTokensOptimized={event.inputTokensOptimized}
+        />
       ) : hasRequestMessages ? (
         // Legacy proxy shape: only `requestMessages` exists. Its content may
         // actually be the post-compression list (field was inconsistent
@@ -785,20 +838,12 @@ function RecordRow({ event }: { event: RecordEvent }) {
         </>
       ) : null}
       {hasRequestMessages && hasCompressedMessages ? (
-        <>
-          <dt>Request (original)</dt>
-          <dd>
-            <pre className="activity-feed__message-dump">
-              {formatRequestMessages(event.requestMessages!)}
-            </pre>
-          </dd>
-          <dt>Request (compressed)</dt>
-          <dd>
-            <pre className="activity-feed__message-dump">
-              {formatRequestMessages(event.compressedMessages!)}
-            </pre>
-          </dd>
-        </>
+        <CompressionDiff
+          requestMessages={event.requestMessages!}
+          compressedMessages={event.compressedMessages!}
+          inputTokensOriginal={event.inputTokensOriginal}
+          inputTokensOptimized={event.inputTokensOptimized}
+        />
       ) : hasRequestMessages ? (
         <>
           <dt>Request</dt>

src/components/ActivityFeed.test.tsx

@@ -5168,6 +5168,13 @@ html.window-hiding {
   color: var(--accent-strong);
 }
 
+.activity-feed__diff-line--skip {
+  color: var(--text-muted);
+  font-style: italic;
+  text-align: center;
+  user-select: none;
+}
+
 .activity-feed__detail-list {
   list-style: none;
   margin: 0;