Skills: bound the diff and refuse a save that lost the race

Two defects in the review flow, both fixed at the root.

The diff allocated a dense longest-common-subsequence table over the whole
document, so a 12k-line skill cost gigabytes. It now normalizes newlines,
trims the identical head and tail before building anything, refuses the
quadratic walk past a hard cap (1500 changed lines per side, 400k
characters) with an honest "too large to show line by line" summary, and
collapses long unchanged runs to a single row. The table itself is
Int32Array-backed, so the capped worst case is about 9MB. The script is
computed once and both the rows and the change summary are read off that
one result.

The confirmed diff was computed against the version loaded when the page
opened, so a save could silently bury whoever published in between. A save
now carries the version it was reviewed against; PUT /:name refuses a
stale one with a 409, and the page re-reads, keeps the edit, and re-opens
the review against what is actually published, saying why.

Also: the buffer is newline-normalized so the bytes reviewed are the bytes
written, and the description is saved exactly as reviewed rather than
trimmed on the way out; side actions (visibility, restore, compare) report
failures next to themselves instead of replacing the page, and never reset
an unsaved edit; failures read through describeApiError rather than
rendering a server message, with a distinct "no skill named …" state for a
404; the new version read validates its id at the route and 404s a commit
that isn't in the skill's history rather than dating it to 1970; and the
versions list stacks at 1100px, as DESIGN.md specifies.

Claude-Session: https://claude.ai/code/session_01Shhie5zM8L54bLHq5gFQti

Author: TheGreatAxios

apps/web/src/pages/diff-view.tsx

@@ -1,43 +1,33 @@
 // One diff renderer for every surface that shows "what changed": the
 // save-confirmation step and the version comparison on a detail page both
-// mount this, so a diff always reads the same way. The line script itself
-// comes from `@corbits/text-diff`; this file is only its presentation.
+// mount this, so a diff always reads the same way. The line script comes
+// from `@corbits/text-diff`; this file is only its presentation, and it
+// computes the script exactly once per render — the change summary is read
+// off the same result the rows come from.
 
 import { Badge } from "@corbits/react-ui";
-import { diffLines, diffTotals, hasChanges } from "@corbits/text-diff";
+import { diffText } from "@corbits/text-diff";
 import type { DiffLine } from "@corbits/text-diff";
+import { useMemo } from "react";
 
 const MARKER: Record<DiffLine["kind"], string> = {
   context: " ",
   added: "+",
   removed: "-",
+  skipped: "⋯",
 };
 
 const ROW_CLASS: Record<DiffLine["kind"], string> = {
   context: "text-muted-foreground",
   added: "bg-success/10 text-foreground",
   removed: "bg-destructive/10 text-foreground",
+  skipped: "text-muted-foreground italic",
 };
 
 function lineNumber(value: number | null): string {
   return value === null ? "" : String(value);
 }
 
-export function DiffSummary({
-  before,
-  after,
-}: {
-  readonly before: string;
-  readonly after: string;
-}) {
-  const totals = diffTotals(diffLines(before, after));
-  return (
-    <p className="font-mono text-xs tabular-nums text-muted-foreground">
-      {`+${String(totals.added)} added, −${String(totals.removed)} removed`}
-    </p>
-  );
-}
-
 export function DiffView({
   before,
   after,
@@ -47,23 +37,45 @@ export function DiffView({
   readonly after: string;
   readonly unchangedNotice?: string;
 }) {
-  const lines = diffLines(before, after);
+  const diff = useMemo(() => diffText(before, after), [before, after]);
 
-  if (!hasChanges(lines)) {
+  if (diff.status === "identical") {
     return (
       <p className="text-sm text-muted-foreground" data-testid="diff-unchanged">
         {unchangedNotice}
       </p>
     );
   }
 
+  if (diff.status === "too-large") {
+    return (
+      <div className="flex flex-col gap-1" data-testid="diff-too-large">
+        <p className="text-sm text-foreground">
+          This change is too large to show line by line — showing a summary
+          only.
+        </p>
+        <p className="font-mono text-xs tabular-nums text-muted-foreground">
+          {`${String(diff.beforeLines)} lines before, ${String(
+            diff.afterLines,
+          )} after — ${String(diff.changedBeforeLines)} rewritten to ${String(
+            diff.changedAfterLines,
+          )}`}
+        </p>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-2" data-testid="diff-view">
-      <DiffSummary before={before} after={after} />
-      <div className="overflow-x-auto rounded-md border border-border bg-muted/30">
+      <p className="font-mono text-xs tabular-nums text-muted-foreground">
+        {`+${String(diff.totals.added)} added, −${String(
+          diff.totals.removed,
+        )} removed`}
+      </p>
+      <div className="max-h-96 overflow-auto rounded-md border border-border bg-muted/30">
         <table className="w-full border-collapse font-mono text-xs leading-relaxed">
           <tbody>
-            {lines.map((line, index) => (
+            {diff.lines.map((line, index) => (
               <tr
                 key={`${String(index)}:${line.kind}`}
                 className={ROW_CLASS[line.kind]}
@@ -78,7 +90,7 @@ export function DiffView({
                   {MARKER[line.kind]}
                 </td>
                 <td className="whitespace-pre-wrap break-words px-2 py-0.5">
-                  {line.text === "" ? " " : line.text}
+                  {line.text === "" ? " " : line.text}
                 </td>
               </tr>
             ))}