@tangle-network/ui 11.30.2 → 11.31.0

package/dist/run/approval-card.js

@@ -0,0 +1,162 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronRight, Circle, FileMinus, FilePen, FilePlus } from "lucide-react";
+//#region src/run/approval-card.tsx
+const CHANGE_ICON = {
+	added: FilePlus,
+	modified: FilePen,
+	deleted: FileMinus
+};
+function count(value, sign) {
+	return value === void 0 ? `${sign}–` : `${sign}${value}`;
+}
+/** Files and +/− line counts for a write, with totals when every count is known. */
+function ApprovalDiffSummary({ files, note }) {
+	const known = files.every((file) => file.additions !== void 0 && file.deletions !== void 0);
+	const additions = files.reduce((sum, file) => sum + (file.additions ?? 0), 0);
+	const deletions = files.reduce((sum, file) => sum + (file.deletions ?? 0), 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "rounded-lg border border-border",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2 text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: files.length === 1 ? "1 file" : `${files.length} files`
+			}), known ? /* @__PURE__ */ jsxs("span", {
+				className: "tabular-nums",
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-[var(--surface-success-text)]",
+						children: ["+", additions]
+					}),
+					" ",
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-[var(--surface-danger-text)]",
+						children: ["−", deletions]
+					})
+				]
+			}) : note && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground",
+				children: note
+			})]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "divide-y divide-border/70",
+			children: files.map((file) => {
+				const Icon = CHANGE_ICON[file.change ?? "modified"];
+				return /* @__PURE__ */ jsxs("li", {
+					className: "flex items-center justify-between gap-3 px-3 py-2 text-sm",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "flex min-w-0 items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							"aria-hidden": true,
+							className: "size-4 shrink-0 text-muted-foreground"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate font-mono text-foreground",
+							title: file.path,
+							children: file.path
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: "shrink-0 tabular-nums",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[var(--surface-success-text)]",
+								children: count(file.additions, "+")
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[var(--surface-danger-text)]",
+								children: count(file.deletions, "−")
+							})
+						]
+					})]
+				}, file.path);
+			})
+		})]
+	});
+}
+function PlanMarker({ state }) {
+	if (state === "done") return /* @__PURE__ */ jsx(Check, {
+		"aria-hidden": true,
+		className: "size-4 shrink-0 text-[var(--surface-success-text)]"
+	});
+	if (state === "current") return /* @__PURE__ */ jsx(ChevronRight, {
+		"aria-hidden": true,
+		className: "size-4 shrink-0 text-foreground"
+	});
+	return /* @__PURE__ */ jsx(Circle, {
+		"aria-hidden": true,
+		className: "size-3.5 shrink-0 text-muted-foreground"
+	});
+}
+/**
+* A request for a person to approve one action: what it does in plain words,
+* where, its step in a plan, the files it writes, and the raw request behind
+* a Details toggle. The caller owns the decision and supplies the actions.
+*/
+function ApprovalCard({ title, context, step, plan, diff, diffNote, details, status, actions, className, ...props }) {
+	return /* @__PURE__ */ jsxs("section", {
+		role: "group",
+		"aria-label": "Approval request",
+		...props,
+		className: cn("space-y-3 rounded-xl border border-border bg-card p-4 shadow-sm", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1",
+				children: [(step || context) && /* @__PURE__ */ jsxs("p", {
+					className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground",
+					children: [step && /* @__PURE__ */ jsxs("span", {
+						className: "rounded-md bg-muted px-2 py-0.5 font-medium text-foreground",
+						children: [
+							"Step ",
+							step.index,
+							" of ",
+							step.total
+						]
+					}), context && /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: context
+					})]
+				}), /* @__PURE__ */ jsx("h3", {
+					className: "text-base font-semibold leading-6 text-foreground",
+					children: title
+				})]
+			}),
+			plan && plan.length > 0 && /* @__PURE__ */ jsx("ol", {
+				className: "space-y-1.5",
+				"aria-label": "Plan",
+				children: plan.map((item, index) => /* @__PURE__ */ jsxs("li", {
+					"aria-current": item.state === "current" ? "step" : void 0,
+					className: cn("flex items-start gap-2 text-sm leading-6", item.state === "current" ? "font-medium text-foreground" : "text-muted-foreground"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "mt-1",
+						children: /* @__PURE__ */ jsx(PlanMarker, { state: item.state })
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0",
+						children: item.label
+					})]
+				}, index))
+			}),
+			diff && diff.length > 0 && /* @__PURE__ */ jsx(ApprovalDiffSummary, {
+				files: diff,
+				note: diffNote
+			}),
+			details !== void 0 && /* @__PURE__ */ jsxs("details", {
+				className: "group text-sm",
+				children: [/* @__PURE__ */ jsx("summary", {
+					className: "cursor-pointer select-none font-medium text-muted-foreground hover:text-foreground",
+					children: "Details"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "mt-2",
+					children: details
+				})]
+			}),
+			status,
+			actions && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-wrap gap-2",
+				children: actions
+			})
+		]
+	});
+}
+//#endregion
+export { ApprovalCard, ApprovalDiffSummary };

package/dist/run/run-phase-list.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+//#region src/run/run-phase-list.d.ts
+export interface RunPhase {
+  id: string;
+  /** The step or phase the work belongs to. */
+  title: ReactNode;
+  /** One line on what happened, such as "Read 12 files · ran 3 commands". */
+  summary?: ReactNode;
+  status?: "running" | "done" | "error";
+  /** The phase's individual steps, shown when expanded. */
+  content: ReactNode;
+}
+/** A turn's tool runs grouped by step, each collapsed to one summarizing line. */
+export declare function RunPhaseList({ phases, className }: {
+  phases: readonly RunPhase[];
+  className?: string;
+}): import("react").JSX.Element | null;
+//#endregion

package/dist/run/run-phase-list.js

@@ -0,0 +1,56 @@
+import { focusRing } from "../lib/focus.js";
+import { cn } from "../lib/utils.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, CircleAlert, Loader2 } from "lucide-react";
+//#region src/run/run-phase-list.tsx
+function PhaseRow({ phase }) {
+	const [open, setOpen] = useState(false);
+	const id = `run-phase-${phase.id}`;
+	return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-expanded": open,
+		"aria-controls": id,
+		onClick: () => setOpen(!open),
+		className: cn("flex w-full items-start gap-2 rounded-md py-1 text-left text-sm transition-colors hover:text-foreground", focusRing),
+		children: [
+			/* @__PURE__ */ jsx(ChevronRight, {
+				"aria-hidden": true,
+				className: cn("mt-1 size-4 shrink-0 text-muted-foreground transition-transform", open && "rotate-90")
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "min-w-0 flex-1 leading-6",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground",
+					children: phase.title
+				}), phase.summary && /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground",
+					children: [" · ", phase.summary]
+				})]
+			}),
+			phase.status === "running" && /* @__PURE__ */ jsx(Loader2, {
+				"aria-label": "Running",
+				className: "mt-1 size-4 shrink-0 animate-spin text-muted-foreground"
+			}),
+			phase.status === "error" && /* @__PURE__ */ jsx(CircleAlert, {
+				"aria-label": "Had an error",
+				className: "mt-1 size-4 shrink-0 text-[var(--surface-danger-text)]"
+			})
+		]
+	}), open && /* @__PURE__ */ jsx("div", {
+		id,
+		className: "mb-2 ml-6 mt-1",
+		children: phase.content
+	})] });
+}
+/** A turn's tool runs grouped by step, each collapsed to one summarizing line. */
+function RunPhaseList({ phases, className }) {
+	if (phases.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn("space-y-0.5", className),
+		"aria-label": "Tool runs",
+		children: phases.map((phase) => /* @__PURE__ */ jsx(PhaseRow, { phase }, phase.id))
+	});
+}
+//#endregion
+export { RunPhaseList };

package/dist/run/task-list.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from "react";
+//#region src/run/task-list.d.ts
+/** The states an agent's working checklist reports; unknown values read as to-do. */
+export type TaskStatus = "pending" | "in_progress" | "completed" | "cancelled" | "blocked" | "failed";
+export interface TaskListItem {
+  id: string;
+  title: string;
+  status: TaskStatus | (string & {});
+  priority?: string;
+  description?: string;
+}
+export interface TaskListProps {
+  items: readonly TaskListItem[];
+  /** Header title; "Tasks" by default. */
+  title?: ReactNode;
+  /** Trailing header content, such as a run state. */
+  meta?: ReactNode;
+  className?: string;
+}
+export declare function taskStatus(status: string): TaskStatus;
+/** Priority is worth a label only when the tasks disagree about it. */
+export declare function showsTaskPriority(items: readonly TaskListItem[]): boolean;
+/** "2 of 3 done": cancelled tasks leave the count rather than counting as done. */
+export declare function taskProgress(items: readonly TaskListItem[]): {
+  done: number;
+  total: number;
+};
+/**
+ * An agent's working checklist: a header with progress, each task's state as
+ * a toned pill, and priority shown only when the tasks differ in it.
+ */
+export declare function TaskList({ items, title, meta, className }: TaskListProps): import("react").JSX.Element;
+//#endregion

package/dist/run/task-list.js

@@ -0,0 +1,138 @@
+import { cn } from "../lib/utils.js";
+import { StatusPill } from "../primitives/status-pill.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/run/task-list.tsx
+const STATUS = {
+	pending: {
+		tone: "neutral",
+		label: "To do"
+	},
+	in_progress: {
+		tone: "running",
+		label: "In progress"
+	},
+	completed: {
+		tone: "success",
+		label: "Done"
+	},
+	cancelled: {
+		tone: "neutral",
+		label: "Cancelled"
+	},
+	blocked: {
+		tone: "warning",
+		label: "Blocked"
+	},
+	failed: {
+		tone: "danger",
+		label: "Failed"
+	}
+};
+const STATUS_ALIASES = {
+	todo: "pending",
+	open: "pending",
+	in_progress: "in_progress",
+	"in-progress": "in_progress",
+	active: "in_progress",
+	running: "in_progress",
+	done: "completed",
+	complete: "completed",
+	completed: "completed",
+	success: "completed",
+	cancelled: "cancelled",
+	canceled: "cancelled",
+	skipped: "cancelled",
+	blocked: "blocked",
+	failed: "failed",
+	error: "failed"
+};
+function taskStatus(status) {
+	const key = status.trim().toLowerCase();
+	return STATUS[key] ? key : STATUS_ALIASES[key] ?? "pending";
+}
+/** Priority is worth a label only when the tasks disagree about it. */
+function showsTaskPriority(items) {
+	return new Set(items.map((item) => item.priority?.trim().toLowerCase()).filter(Boolean)).size > 1;
+}
+/** "2 of 3 done": cancelled tasks leave the count rather than counting as done. */
+function taskProgress(items) {
+	const counted = items.filter((item) => taskStatus(item.status) !== "cancelled");
+	return {
+		done: counted.filter((item) => taskStatus(item.status) === "completed").length,
+		total: counted.length
+	};
+}
+function capitalized(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+/**
+* An agent's working checklist: a header with progress, each task's state as
+* a toned pill, and priority shown only when the tasks differ in it.
+*/
+function TaskList({ items, title = "Tasks", meta, className }) {
+	const showPriority = showsTaskPriority(items);
+	const { done, total } = taskProgress(items);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": typeof title === "string" ? title : "Tasks",
+		className: cn("rounded-xl border border-border bg-card p-4 shadow-sm", className),
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "mb-3 flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-baseline gap-2",
+					children: [/* @__PURE__ */ jsx("h3", {
+						className: "text-base font-semibold text-foreground",
+						children: title
+					}), total > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "text-sm text-muted-foreground",
+						children: [
+							done,
+							" of ",
+							total,
+							" done"
+						]
+					})]
+				}), meta]
+			}),
+			total > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mb-3 h-1.5 overflow-hidden rounded-full bg-muted",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "h-full rounded-full bg-[var(--surface-success-text)] transition-[width]",
+					style: { width: `${Math.round(done / total * 100)}%` }
+				})
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				className: "divide-y divide-border/70",
+				children: items.map((item, index) => {
+					const status = STATUS[taskStatus(item.status)];
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex items-start justify-between gap-3 py-2.5 first:pt-0 last:pb-0",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: cn("text-sm font-medium leading-6 text-foreground", taskStatus(item.status) === "cancelled" && "text-muted-foreground line-through"),
+								children: item.title
+							}), item.description && /* @__PURE__ */ jsx("p", {
+								className: "mt-0.5 text-sm leading-6 text-muted-foreground",
+								children: item.description
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex shrink-0 items-center gap-2",
+							children: [showPriority && item.priority && /* @__PURE__ */ jsx("span", {
+								className: "text-sm text-muted-foreground",
+								children: capitalized(item.priority.trim())
+							}), /* @__PURE__ */ jsx(StatusPill, {
+								tone: status.tone,
+								size: "md",
+								children: status.label
+							})]
+						})]
+					}, `${item.id}-${index}`);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { TaskList, showsTaskPriority, taskProgress, taskStatus };

package/dist/run.d.ts

@@ -6,4 +6,7 @@ import { InlineToolItem, InlineToolItemProps } from "./run/inline-tool-item.js";
 import { InlineThinkingItem, InlineThinkingItemProps } from "./run/inline-thinking-item.js";
 import { ExpandedToolDetail, ExpandedToolDetailProps } from "./run/expanded-tool-detail.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
-export { ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent };
+import { TaskList, TaskListItem, TaskListProps, TaskStatus, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
+import { ApprovalCard, ApprovalCardProps, ApprovalDiffFile, ApprovalDiffSummary, ApprovalPlanStep } from "./run/approval-card.js";
+import { RunPhase, RunPhaseList } from "./run/run-phase-list.js";
+export { ApprovalCard, type ApprovalCardProps, type ApprovalDiffFile, ApprovalDiffSummary, type ApprovalPlanStep, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, LiveDuration, RunGroup, type RunGroupProps, type RunPhase, RunPhaseList, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, TaskList, type TaskListItem, type TaskListProps, type TaskStatus, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };

package/dist/run.js

@@ -5,4 +5,7 @@ import { InlineThinkingItem } from "./run/inline-thinking-item.js";
 import { RunGroup } from "./run/run-group.js";
 import { LiveDuration } from "./run/run-item-primitives.js";
 import { ToolCallFeed, parseToolEvent } from "./run/tool-call-feed.js";
-export { ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunRowShell, RunRowStatusDot, ToolCallFeed, parseToolEvent };
+import { TaskList, showsTaskPriority, taskProgress, taskStatus } from "./run/task-list.js";
+import { ApprovalCard, ApprovalDiffSummary } from "./run/approval-card.js";
+import { RunPhaseList } from "./run/run-phase-list.js";
+export { ApprovalCard, ApprovalDiffSummary, ExpandedToolDetail, InlineThinkingItem, InlineToolItem, LiveDuration, RunGroup, RunPhaseList, RunRowShell, RunRowStatusDot, TaskList, ToolCallFeed, parseToolEvent, showsTaskPriority, taskProgress, taskStatus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.30.2",
+  "version": "11.31.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -140,17 +140,17 @@
     "lucide-react": "^1.48.0",
     "marked": "^18.0.14",
     "react-markdown": "^10.1.0",
-    "react-syntax-highlighter": "^16.1.1",
     "rehype-sanitize": "^6.0.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
+    "shiki": "^4.4.3",
     "tailwind-merge": "^3.7.0",
     "turndown": "^7.2.4"
   },
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.19.3",
+    "@tangle-network/brand": "^1.19.5",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -209,7 +209,6 @@
     "@tiptap/starter-kit": "^3.31.3",
     "@tiptap/y-tiptap": "^3.0.9",
     "@types/react": "^19.3.0",
-    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/turndown": "^5.0.6",
     "ajv": "8.17.1",
     "nanostores": "^1.5.4",

package/src/markdown/code-block.test.tsx

@@ -1,6 +1,5 @@
 import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { renderToString } from "react-dom/server";
-import SyntaxHighlighter from "react-syntax-highlighter";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { CodeBlock, CopyButton } from "./code-block";
 
@@ -16,12 +15,13 @@ afterEach(() => {
 describe("CodeBlock scoped semantic colors", () => {
   it("keeps code readable before the renderer loads, then applies live semantic colors and line numbers", async () => {
     const { container } = render(<CodeBlock code={'const message = "hello";'} language="javascript" showLineNumbers />);
-    expect(container.querySelector("pre code")?.textContent).toBe('const message = "hello";');
+    // Plain code already carries its line numbers, so highlighting shifts no layout.
+    expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
     // The highlighter loads asynchronously; under a full parallel run it can take longer than waitFor's 1s default.
     await waitFor(() => expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)"), { timeout: 10_000 });
     expect(container.innerHTML).toContain("var(--syntax-string, currentColor)");
     expect(container.innerHTML).toContain("var(--syntax-comment, currentColor)");
-    expect(container.querySelector(".react-syntax-highlighter-line-number")).not.toBeNull();
+    expect(container.querySelector("[data-line-number]")).not.toBeNull();
     expect(container.querySelector("pre code")?.textContent?.replace(/^1/, "")).toBe('const message = "hello";');
   });
 
@@ -66,32 +66,41 @@ describe("CodeBlock", () => {
     expect(container.querySelector("code")).not.toBeNull();
   });
 
-  it.each([
-    ["javascript", "const answer = 42;"],
-    ["js", "const answer = 42;"],
-    ["brainfuck", "++[>+++<-]"],
-    ["not-a-language", "const answer = 42;"],
-  ])("keeps the default highlighter's tokens for language %s", async (language, code) => {
-    const baseline = document.createElement("div");
-    baseline.innerHTML = renderToString(<SyntaxHighlighter language={language}>{code}</SyntaxHighlighter>);
-    const expected = Array.from(baseline.querySelectorAll("pre code span"), (span) => span.textContent);
-    expect(expected.length).toBeGreaterThan(0);
+  it.each(["javascript", "js", "ts", "tsx"])("highlights %s with Shiki into Brand syntax tokens", async (language) => {
+    const code = "const answer = 42; // the answer";
+    const { container } = render(<CodeBlock code={code} language={language} />);
+    await waitFor(() => expect(container.querySelector("[data-highlighted]")).not.toBeNull(), { timeout: 10_000 });
+    const tokens = Array.from(container.querySelectorAll("pre code span span"));
+    expect(tokens.length).toBeGreaterThan(3);
+    expect(container.innerHTML).toContain("var(--syntax-keyword, currentColor)");
+    expect(container.innerHTML).toContain("var(--syntax-comment, currentColor)");
+    expect(container.innerHTML).not.toContain("--shiki-");
+    expect(container.querySelector("pre code")?.textContent).toBe(code);
+  });
 
+  it.each(["brainfuck", "not-a-language", undefined])("keeps %s as readable plain text", (language) => {
+    const code = "++[>+++<-]";
     const { container } = render(<CodeBlock code={code} language={language} />);
-    await waitFor(() => expect(container.querySelectorAll("pre code span").length).toBe(expected.length));
-    expect(Array.from(container.querySelectorAll("pre code span"), (span) => span.textContent)).toEqual(expected);
+    expect(container.querySelector("[data-highlighted]")).toBeNull();
     expect(container.querySelector("pre code")?.textContent).toBe(code);
   });
 
-  it("preserves whitespace and line numbering after the renderer loads", async () => {
+  it("preserves whitespace and numbers every line", async () => {
     const code = "\tfirst  \n  second\n";
-    const baseline = document.createElement("div");
-    baseline.innerHTML = renderToString(<SyntaxHighlighter language="text" showLineNumbers>{code}</SyntaxHighlighter>);
     const { container } = render(<CodeBlock code={code} language="text" showLineNumbers />);
-    expect(container.querySelector("pre code")?.textContent).toBe(code);
-    await waitFor(() => expect(container.querySelectorAll(".react-syntax-highlighter-line-number").length)
-      .toBe(baseline.querySelectorAll(".react-syntax-highlighter-line-number").length));
-    expect(container.querySelector("pre code")?.textContent).toBe(baseline.querySelector("pre code")?.textContent);
+    const numbers = Array.from(container.querySelectorAll("[data-line-number]"), (node) => node.textContent);
+    expect(numbers).toEqual(["1", "2", "3"]);
+    const text = Array.from(container.querySelectorAll("pre code > span"), (line) =>
+      Array.from(line.childNodes).filter((node) => !(node instanceof HTMLElement && node.hasAttribute("data-line-number")))
+        .map((node) => node.textContent).join("")).join("");
+    expect(text).toBe(code);
+  });
+
+  it("names the file in the header beside the language", () => {
+    render(<CodeBlock code={"export {}"} language="ts" filename="src/lib/ctr.ts" />);
+    expect(screen.getByText("src/lib/ctr.ts")).toBeInTheDocument();
+    expect(screen.getByText("TypeScript")).toBeInTheDocument();
+    expect(screen.getByRole("region", { name: "src/lib/ctr.ts code" })).toBeInTheDocument();
   });
 
   it("uses `label` as the header text, overriding `language`", () => {
@@ -102,9 +111,9 @@ describe("CodeBlock", () => {
     expect(queryByText("typescript")).toBeNull();
   });
 
-  it("falls back to `language` for the header when no `label` is given", () => {
+  it("falls back to the language's name for the header when no `label` is given", () => {
     const { getByText } = render(<CodeBlock code={"x"} language="python" />);
-    expect(getByText("python")).toBeInTheDocument();
+    expect(getByText("Python")).toBeInTheDocument();
   });
 
   it("renders no header when neither label nor language is set", () => {
@@ -161,9 +170,9 @@ describe("CodeBlock", () => {
     expect(screen.getByRole("button", { name: "Copied" })).toBeTruthy();
   });
 
-  it("renders the header label at the 12px text-xs step", () => {
+  it("renders the header label at the 14px text-sm step", () => {
     const { getByText } = render(<CodeBlock code={"x"} label="YAML" />);
-    expect(getByText("YAML").className).toContain("text-xs");
+    expect(getByText("YAML").className).toContain("text-sm");
     expect(getByText("YAML").className).not.toContain("calc(");
   });