@cueloop/client 0.1.0-alpha.77 → 0.1.0-alpha.78

package/src/components/session-tree.ts

@@ -33,7 +33,7 @@ export function projectName(workspace: WorkspaceKey): string {
 export type InboxRow =
   | { kind: "section"; id: string; label: string }
   | { kind: "project"; id: string; label: string }
-  | { kind: "thread"; id: string; session: Thread; selectionIndex: number };
+  | { kind: "thread"; id: string; session: Thread; selectionIndex: number; depth: number };
 
 export interface GroupedInbox {
   rows: InboxRow[];
@@ -78,14 +78,14 @@ export function groupInbox(
 
   const rows: InboxRow[] = [];
   const ordered: Thread[] = [];
-  const pushThread = (session: Thread): void => {
-    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length });
+  const pushThread = (session: Thread, depth: number): void => {
+    rows.push({ kind: "thread", id: session.id, session, selectionIndex: ordered.length, depth });
     ordered.push(session);
   };
 
   if (pinned.length > 0) {
     rows.push({ kind: "section", id: "section:pinned", label: "Starred" });
-    for (const session of pinned) pushThread(session);
+    for (const session of pinned) pushThread(session, 1);
   }
 
   const projectEntries = [...projects.entries()].sort((a, b) => a[1].name.localeCompare(b[1].name));
@@ -93,13 +93,14 @@ export function groupInbox(
     rows.push({ kind: "section", id: "section:projects", label: "Projects" });
     for (const [key, project] of projectEntries) {
       rows.push({ kind: "project", id: `project:${key}`, label: project.name });
-      for (const session of project.sessions) pushThread(session);
+      // a project's threads cascade one level under its name
+      for (const session of project.sessions) pushThread(session, 2);
     }
   }
 
   if (standalone.length > 0) {
     rows.push({ kind: "section", id: "section:threads", label: "Threads" });
-    for (const session of standalone) pushThread(session);
+    for (const session of standalone) pushThread(session, 1);
   }
 
   return { rows, ordered };

package/src/components/stories-app.tsx

@@ -13,9 +13,10 @@ import { ThemeProvider } from "./theme-context";
 import { buildStoryTree, loadStories, type LoadedStory } from "./story";
 import { PaneGrid } from "./PaneGrid";
 import { ShellHeader } from "./ShellHeader";
+import { AnsiScreen } from "./AnsiScreen";
 import { Tree } from "./primitives/Tree";
 import { NERD } from "./primitives/icons";
-import { allFolderIds, flattenTree } from "./primitives/tree-model";
+import { flattenTree } from "./primitives/tree-model";
 
 interface StoriesAppProps {
   stories: LoadedStory[];
@@ -30,8 +31,8 @@ function StoriesApp({ stories, onExit }: StoriesAppProps): React.ReactNode {
   );
   const firstStoryId = `${stories[0]!.moduleTitle}/${stories[0]!.storyName}`;
 
-  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(() =>
-    allFolderIds(treeNodes),
+  const [expandedIds, setExpandedIds] = useState<ReadonlySet<string>>(
+    () => new Set(treeNodes.filter((node) => node.children !== undefined).map((node) => node.id)),
   );
   const [selectedId, setSelectedId] = useState(firstStoryId);
   const [openedId, setOpenedId] = useState(firstStoryId);
@@ -126,7 +127,15 @@ function StoriesApp({ stories, onExit }: StoriesAppProps): React.ReactNode {
             <scrollbox style={{ flexGrow: 1, paddingLeft: 1, paddingTop: 1 }} focused={false}>
               {/* remount per story so component-local state never leaks across */}
               <box key={openedId} style={{ flexDirection: "column" }}>
-                {opened.story.render()}
+                {opened.story.ansi ? (
+                  <AnsiScreen
+                    ansi={opened.story.ansi()}
+                    cols={opened.story.size?.width ?? 80}
+                    rows={opened.story.size?.height ?? 24}
+                  />
+                ) : (
+                  opened.story.render?.()
+                )}
               </box>
             </scrollbox>
           ) : (

package/src/components/stories.test.tsx

@@ -5,10 +5,12 @@
  * stories file fails the harness, so the safety net cannot silently thin.
  */
 
+import React from "react";
 import { describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import { RGBA } from "@opentui/core";
 import { componentFilesMissingStories, loadStories } from "./story";
+import { AnsiScreen } from "./AnsiScreen";
 import { allowEventLoopUpdates } from "../test-support";
 
 const stories = await loadStories();
@@ -34,9 +36,14 @@ describe("stories catalog", () => {
     test(`${moduleTitle}/${storyName} renders, snapshots, and carries its colors`, async () => {
       // Arrange
       const size = story.size ?? { width: 80, height: 24 };
+      const node = story.ansi ? (
+        <AnsiScreen ansi={story.ansi()} cols={size.width} rows={size.height} />
+      ) : (
+        story.render!()
+      );
 
       // Act
-      const setup = await testRender(story.render(), size);
+      const setup = await testRender(node, size);
 
       allowEventLoopUpdates();
       await setup.waitForVisualIdle();

package/src/components/story-tree.test.ts

@@ -1,12 +1,12 @@
 import { describe, expect, test } from "bun:test";
-import { buildStoryTree, type LoadedStory } from "./story";
+import { buildStoryTree, type LoadedStory, type StorySection } from "./story";
 import type { TreeNode } from "./primitives/tree-model";
 
 /** A story object whose render is never invoked in these structural tests. */
 const STUB = { render: () => null };
 
-function story(moduleTitle: string, storyName: string): LoadedStory {
-  return { moduleTitle, storyName, story: STUB };
+function story(moduleTitle: string, storyName: string, section: StorySection = "App"): LoadedStory {
+  return { section, moduleTitle, storyName, story: STUB };
 }
 
 function childLabels(node: TreeNode): string[] {
@@ -14,19 +14,31 @@ function childLabels(node: TreeNode): string[] {
 }
 
 describe("buildStoryTree", () => {
-  test("splits moduleTitle on / into nested folders keyed by their path", () => {
+  test("groups the top level by section", () => {
+    const tree = buildStoryTree([
+      story("Primitives/Tree", "Default"),
+      story("Collaborator Join", "JoinSplash", "SSH"),
+    ]);
+
+    expect(tree.map((node) => [node.id, node.label])).toEqual([
+      ["App", "App"],
+      ["SSH", "SSH"],
+    ]);
+  });
+
+  test("splits moduleTitle on / into nested folders under the section", () => {
     // Arrange
     const stories = [story("Primitives/Tree", "Default"), story("Layout/AppShell", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
+    const app = buildStoryTree(stories)[0]!;
 
     // Assert
-    expect(tree.map((node) => [node.id, node.label])).toEqual([
-      ["Primitives", "Primitives"],
-      ["Layout", "Layout"],
+    expect(app.children!.map((node) => [node.id, node.label])).toEqual([
+      ["App/Primitives", "Primitives"],
+      ["App/Layout", "Layout"],
     ]);
-    expect(tree[0]!.children!.map((node) => node.id)).toEqual(["Primitives/Tree"]);
+    expect(app.children![0]!.children!.map((node) => node.id)).toEqual(["App/Primitives/Tree"]);
   });
 
   test("groups sibling components under one shared parent folder", () => {
@@ -34,11 +46,11 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Tree", "Default"), story("Primitives/Card", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
+    const app = buildStoryTree(stories)[0]!;
 
     // Assert
-    expect(tree).toHaveLength(1);
-    expect(childLabels(tree[0]!)).toEqual(["Tree", "Card"]);
+    expect(app.children).toHaveLength(1);
+    expect(childLabels(app.children![0]!)).toEqual(["Tree", "Card"]);
   });
 
   test("nests to the full depth of the moduleTitle path", () => {
@@ -46,13 +58,12 @@ describe("buildStoryTree", () => {
     const stories = [story("A/B/C", "Only")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const a = tree[0]!;
+    const a = buildStoryTree(stories)[0]!.children![0]!;
     const b = a.children![0]!;
 
     // Assert
-    expect([a.id, b.id]).toEqual(["A", "A/B"]);
-    expect(b.children![0]!.id).toBe("A/B/C");
+    expect([a.id, b.id]).toEqual(["App/A", "App/A/B"]);
+    expect(b.children![0]!.id).toBe("App/A/B/C");
   });
 
   test("adds each story as a leaf keyed `${moduleTitle}/${storyName}` under its component", () => {
@@ -60,11 +71,10 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Tree", "Empty"), story("Primitives/Tree", "Deep")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const component = tree[0]!.children![0]!;
+    const component = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
-    expect(component.id).toBe("Primitives/Tree");
+    expect(component.id).toBe("App/Primitives/Tree");
     expect(component.children!.map((leaf) => [leaf.id, leaf.label])).toEqual([
       ["Primitives/Tree/Empty", "Empty"],
       ["Primitives/Tree/Deep", "Deep"],
@@ -76,8 +86,7 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Card", "Card")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const hoisted = tree[0]!.children![0]!;
+    const hoisted = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
     expect(hoisted.children).toBeUndefined();
@@ -90,11 +99,10 @@ describe("buildStoryTree", () => {
     const stories = [story("Primitives/Card", "Default")];
 
     // Act
-    const tree = buildStoryTree(stories);
-    const component = tree[0]!.children![0]!;
+    const component = buildStoryTree(stories)[0]!.children![0]!.children![0]!;
 
     // Assert
-    expect(component.id).toBe("Primitives/Card");
+    expect(component.id).toBe("App/Primitives/Card");
     expect(component.children!.map((leaf) => leaf.id)).toEqual(["Primitives/Card/Default"]);
   });
 });

package/src/components/story.ts

@@ -15,7 +15,9 @@ export interface StoryMeta {
 }
 
 export interface Story {
-  render: () => React.ReactNode;
+  render?: () => React.ReactNode;
+  /** Raw ANSI to paint through AnsiScreen instead of a React tree; exactly one of render or ansi is set. */
+  ansi?: () => string;
   /**
    * Colors (hex tokens) that must appear among the rendered frame's styled
    * spans - the color regression net for color-bearing stories.
@@ -25,18 +27,21 @@ export interface Story {
   size?: { width: number; height: number };
 }
 
+export type StorySection = "App" | "SSH";
+
 export interface LoadedStory {
+  section: StorySection;
   moduleTitle: string;
   storyName: string;
   story: Story;
 }
 
 export function isStory(value: unknown): value is Story {
+  if (typeof value !== "object" || value === null) return false;
+
   return (
-    typeof value === "object" &&
-    value !== null &&
-    "render" in value &&
-    typeof value.render === "function"
+    ("render" in value && typeof value.render === "function") ||
+    ("ansi" in value && typeof value.ansi === "function")
   );
 }
 
@@ -49,22 +54,34 @@ function isStoryMeta(value: unknown): value is StoryMeta {
   );
 }
 
-/** Import every *.stories.tsx next to the components and flatten the exports. */
-export async function loadStories(): Promise<LoadedStory[]> {
-  const glob = new Bun.Glob("**/*.stories.tsx");
-  const files = [...glob.scanSync({ cwd: import.meta.dir })].sort();
-  const loaded: LoadedStory[] = [];
+const GATEWAY_SRC_DIR = `${import.meta.dir}/../../../gateway/src`;
+
+async function collectStories(
+  dir: string,
+  pattern: string,
+  section: StorySection,
+  loaded: LoadedStory[],
+): Promise<void> {
+  const glob = new Bun.Glob(pattern);
+  const files = [...glob.scanSync({ cwd: dir })].sort();
 
   for (const file of files) {
-    const moduleExports = await import(`${import.meta.dir}/${file}`);
+    const moduleExports = await import(`${dir}/${file}`);
     const meta = moduleExports["meta"];
-    const moduleTitle = isStoryMeta(meta) ? meta.title : file.replace(/\.stories\.tsx$/, "");
+    const moduleTitle = isStoryMeta(meta) ? meta.title : file.replace(/\.stories\.tsx?$/, "");
 
     for (const [exportName, exported] of Object.entries(moduleExports)) {
       if (exportName === "meta" || !isStory(exported)) continue;
-      loaded.push({ moduleTitle, storyName: exportName, story: exported });
+      loaded.push({ section, moduleTitle, storyName: exportName, story: exported });
     }
   }
+}
+
+export async function loadStories(): Promise<LoadedStory[]> {
+  const loaded: LoadedStory[] = [];
+
+  await collectStories(import.meta.dir, "**/*.stories.tsx", "App", loaded);
+  await collectStories(GATEWAY_SRC_DIR, "**/*.stories.ts", "SSH", loaded);
 
   return loaded;
 }
@@ -102,11 +119,11 @@ export function buildStoryTree(stories: LoadedStory[]): TreeNode[] {
   const roots: TreeNode[] = [];
   const foldersByPath = new Map<string, StoryTreeFolder>();
 
-  for (const { moduleTitle, storyName } of stories) {
+  for (const { section, moduleTitle, storyName } of stories) {
     let siblings = roots;
     let path = "";
 
-    for (const segment of moduleTitle.split("/")) {
+    for (const segment of [section, ...moduleTitle.split("/")]) {
       path = path === "" ? segment : `${path}/${segment}`;
       let folder = foldersByPath.get(path);
       if (folder === undefined) {

package/src/diff-intraline.test.ts

@@ -1,5 +1,11 @@
-import { describe, expect, test } from "bun:test";
-import { intralineRunsByRow, wordLevelChanges, type IntralineRun } from "./diff-intraline";
+import { describe, expect, spyOn, test } from "bun:test";
+import * as intraline from "./diff-intraline";
+import {
+  createIntralineResolver,
+  intralineRunsByRow,
+  wordLevelChanges,
+  type IntralineRun,
+} from "./diff-intraline";
 import type { DiffRow } from "./view-diff";
 
 function line(kind: DiffRow["kind"], text: string): DiffRow {
@@ -163,3 +169,70 @@ describe("intralineRunsByRow", () => {
     expect(changedText(runsByRow.get(3)!)).toBe("FOUR");
   });
 });
+
+describe("createIntralineResolver", () => {
+  test("resolves each row to the same runs the eager pass would, on demand", () => {
+    // Arrange - context around two separate change blocks
+    const rows = [
+      line("ctx", "header"),
+      line("del", "one two"),
+      line("add", "one TWO"),
+      line("ctx", "middle"),
+      line("del", "alpha beta"),
+      line("add", "alpha GAMMA"),
+      line("ctx", "footer"),
+    ];
+    const eager = intralineRunsByRow(rows);
+
+    // Act
+    const resolver = createIntralineResolver(rows);
+
+    // Assert - lazy row-by-row output matches the eager map, including undefined for context rows
+    for (let index = 0; index < rows.length; index++) {
+      expect(resolver.runsForRow(index)).toEqual(eager.get(index));
+    }
+  });
+
+  test("a second call for the same row returns the cached runs", () => {
+    const rows = [line("del", "one two"), line("add", "one TWO")];
+    const resolver = createIntralineResolver(rows);
+
+    expect(resolver.runsForRow(0)).toBe(resolver.runsForRow(0));
+  });
+
+  // The performance guard: a virtualized diff must word-diff only the change blocks whose rows are on
+  // screen. This is deterministic (a call count, not a wall-clock), so it fails on any machine if a
+  // future change makes the resolver eager again - the regression the nav-latency benchmark would show.
+  test("word-diffs only the accessed block, not the whole diff", () => {
+    // Arrange - 50 independent change blocks, each a single del/add pair separated by context
+    const rows: DiffRow[] = [];
+
+    for (let block = 0; block < 50; block++) {
+      rows.push(
+        line("ctx", `ctx ${block}`),
+        line("del", `old ${block}`),
+        line("add", `new ${block}`),
+      );
+    }
+    const spy = spyOn(intraline, "wordLevelChanges");
+
+    try {
+      // Act - the eager pass word-diffs every block
+      spy.mockClear();
+      intralineRunsByRow(rows);
+      const eagerCalls = spy.mock.calls.length;
+
+      // Act - the resolver word-diffs only the one block whose row is asked for
+      spy.mockClear();
+      const resolver = createIntralineResolver(rows);
+      resolver.runsForRow(1); // a row in block 0
+      const oneBlockCalls = spy.mock.calls.length;
+
+      // Assert - eager pays for all 50 blocks; lazy pays for one
+      expect(eagerCalls).toBe(50);
+      expect(oneBlockCalls).toBe(1);
+    } finally {
+      spy.mockRestore();
+    }
+  });
+});

package/src/diff-intraline.ts

@@ -36,16 +36,16 @@ function stripTrailingNewline(text: string): string {
   return text.replace(/\n$/, "");
 }
 
-/**
- * Char-precise intra-line runs for modified diff rows. Within a change block - a
- * run of deletions immediately followed by additions - lines are aligned to their
- * real counterpart (see alignedPairs) and each matched pair is word-diffed so the
- * removed/added words are marked changed. Rows with no counterpart (pure add, pure
- * delete, or an unmatched line in a shifted block) are omitted, so the caller
- * renders those as a single run. Each row's runs concatenate back to that row's text.
- */
-export function intralineRunsByRow(rows: DiffRow[]): Map<number, IntralineRun[]> {
-  const runsByRow = new Map<number, IntralineRun[]>();
+/** A change block: a run of deletion rows immediately followed by addition rows. */
+interface IntralineBlock {
+  deletionStart: number;
+  additionStart: number;
+  end: number;
+}
+
+/** The change blocks in row order, found in one cheap pass (no word diff yet). */
+function intralineBlocks(rows: DiffRow[]): IntralineBlock[] {
+  const blocks: IntralineBlock[] = [];
   let index = 0;
 
   while (index < rows.length) {
@@ -59,22 +59,91 @@ export function intralineRunsByRow(rows: DiffRow[]): Map<number, IntralineRun[]>
     const additionStart = index;
 
     while (index < rows.length && rows[index]!.kind === "add") index++;
-    const deletionTexts = rows
-      .slice(deletionStart, additionStart)
-      .map((row) => stripTrailingNewline(row.text));
-    const additionTexts = rows
-      .slice(additionStart, index)
-      .map((row) => stripTrailingNewline(row.text));
-
-    for (const [deletionOffset, additionOffset] of alignedPairs(deletionTexts, additionTexts)) {
-      const changes = wordLevelChanges(
-        deletionTexts[deletionOffset]!,
-        additionTexts[additionOffset]!,
-      );
-
-      runsByRow.set(deletionStart + deletionOffset, sideRuns(changes, "removed"));
-      runsByRow.set(additionStart + additionOffset, sideRuns(changes, "added"));
-    }
+    blocks.push({ deletionStart, additionStart, end: index });
+  }
+
+  return blocks;
+}
+
+/** Word-diff one change block into [rowIndex, runs] pairs; unmatched rows get no entry. */
+function blockRunEntries(rows: DiffRow[], block: IntralineBlock): Array<[number, IntralineRun[]]> {
+  const deletionTexts = rows
+    .slice(block.deletionStart, block.additionStart)
+    .map((row) => stripTrailingNewline(row.text));
+  const additionTexts = rows
+    .slice(block.additionStart, block.end)
+    .map((row) => stripTrailingNewline(row.text));
+  const entries: Array<[number, IntralineRun[]]> = [];
+
+  for (const [deletionOffset, additionOffset] of alignedPairs(deletionTexts, additionTexts)) {
+    const changes = wordLevelChanges(
+      deletionTexts[deletionOffset]!,
+      additionTexts[additionOffset]!,
+    );
+
+    entries.push([block.deletionStart + deletionOffset, sideRuns(changes, "removed")]);
+    entries.push([block.additionStart + additionOffset, sideRuns(changes, "added")]);
+  }
+
+  return entries;
+}
+
+/** The change block whose rows cover `rowIndex`, by binary search over the ordered blocks. */
+function blockContaining(blocks: IntralineBlock[], rowIndex: number): number | undefined {
+  let low = 0;
+  let high = blocks.length - 1;
+
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    const block = blocks[mid]!;
+
+    if (rowIndex < block.deletionStart) high = mid - 1;
+    else if (rowIndex >= block.end) low = mid + 1;
+    else return mid;
+  }
+
+  return undefined;
+}
+
+/** A row's intra-line runs, resolved on demand. */
+export interface IntralineResolver {
+  runsForRow(rowIndex: number): IntralineRun[] | undefined;
+}
+
+/**
+ * Char-precise intra-line runs for modified diff rows, computed lazily. The change blocks are found
+ * up front in one cheap pass; a block is word-diffed only when a row inside it is first asked for,
+ * so a virtualized diff pays for the rows on screen, not for the whole file. Within a change block -
+ * deletions immediately followed by additions - lines align to their real counterpart (alignedPairs)
+ * and each matched pair is word-diffed; unmatched rows get no runs, so the caller renders those whole.
+ */
+export function createIntralineResolver(rows: DiffRow[]): IntralineResolver {
+  const blocks = intralineBlocks(rows);
+  const computed = new Set<number>();
+  const runsByRow = new Map<number, IntralineRun[]>();
+
+  return {
+    runsForRow(rowIndex) {
+      const blockIndex = blockContaining(blocks, rowIndex);
+
+      if (blockIndex === undefined) return undefined;
+      if (!computed.has(blockIndex)) {
+        computed.add(blockIndex);
+        for (const [row, runs] of blockRunEntries(rows, blocks[blockIndex]!))
+          runsByRow.set(row, runs);
+      }
+
+      return runsByRow.get(rowIndex);
+    },
+  };
+}
+
+/** Every modified row's intra-line runs, eagerly. Prefer createIntralineResolver on a hot path. */
+export function intralineRunsByRow(rows: DiffRow[]): Map<number, IntralineRun[]> {
+  const runsByRow = new Map<number, IntralineRun[]>();
+
+  for (const block of intralineBlocks(rows)) {
+    for (const [row, runs] of blockRunEntries(rows, block)) runsByRow.set(row, runs);
   }
 
   return runsByRow;

package/src/keymap.test.ts

@@ -59,8 +59,8 @@ describe("submit overlay", () => {
   const keyState = state({ overlay: "submit" });
   const table: [string, Intent[]][] = [
     ["escape", [{ type: "closeOverlay" }]],
-    ["return", [{ type: "submitVerdict" }]],
-    ["enter", [{ type: "submitVerdict" }]],
+    ["return", []],
+    ["enter", []],
     ["left", [{ type: "cycleVerdict", direction: -1 }]],
     ["right", [{ type: "cycleVerdict", direction: 1 }]],
     ["j", []],

package/src/keymap.ts

@@ -193,7 +193,6 @@ function submitOverlayGrammar(state: KeyState, key: KeyInput): Intent[] {
   const name = key.name;
 
   if (name === "escape") return [{ type: "closeOverlay" }];
-  if (name === "return" || name === "enter") return [{ type: "submitVerdict" }];
   if (name === "left" || name === "right") {
     return [{ type: "cycleVerdict", direction: name === "left" ? -1 : 1 }];
   }

package/src/pasted-image.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import { imagePlaceholder, looksLikeBinaryPaste } from "./pasted-image";
+
+function bytesOf(...values: number[]): Uint8Array {
+  return Uint8Array.from(values);
+}
+
+describe("looksLikeBinaryPaste", () => {
+  test("plain text pastes stay text", () => {
+    expect(looksLikeBinaryPaste(new TextEncoder().encode("just a normal comment"))).toBe(false);
+  });
+
+  test("multi-line text with tabs and newlines stays text", () => {
+    expect(
+      looksLikeBinaryPaste(new TextEncoder().encode("line one\n\tline two\r\nline three")),
+    ).toBe(false);
+  });
+
+  test("unicode text stays text", () => {
+    expect(looksLikeBinaryPaste(new TextEncoder().encode("café — naïve — 日本語 — 🎉"))).toBe(
+      false,
+    );
+  });
+
+  test("a PNG signature is binary", () => {
+    expect(looksLikeBinaryPaste(bytesOf(0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a))).toBe(
+      true,
+    );
+  });
+
+  test("a JPEG signature is binary", () => {
+    expect(looksLikeBinaryPaste(bytesOf(0xff, 0xd8, 0xff, 0xe0, 0x00, 0x10))).toBe(true);
+  });
+
+  test("a GIF signature is binary", () => {
+    expect(looksLikeBinaryPaste(new TextEncoder().encode("GIF89a\x01\x02"))).toBe(true);
+  });
+
+  test("a WEBP signature is binary", () => {
+    expect(
+      looksLikeBinaryPaste(bytesOf(0x52, 0x49, 0x46, 0x46, 1, 2, 3, 4, 0x57, 0x45, 0x42, 0x50)),
+    ).toBe(true);
+  });
+
+  test("a NUL byte marks binary", () => {
+    expect(looksLikeBinaryPaste(bytesOf(0x68, 0x69, 0x00, 0x74, 0x68, 0x65, 0x72, 0x65))).toBe(
+      true,
+    );
+  });
+
+  test("a burst of control bytes marks binary", () => {
+    expect(looksLikeBinaryPaste(bytesOf(0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08))).toBe(
+      true,
+    );
+  });
+
+  test("an empty paste is not binary", () => {
+    expect(looksLikeBinaryPaste(new Uint8Array())).toBe(false);
+  });
+});
+
+describe("imagePlaceholder", () => {
+  test("numbers each pasted image", () => {
+    expect(imagePlaceholder(1)).toBe("[Image #1]");
+    expect(imagePlaceholder(2)).toBe("[Image #2]");
+  });
+});