diff --git a/apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx b/apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx
index e71160e44..16bb6445f 100644
--- a/apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx
+++ b/apps/docs/app/(diffs)/_components/WorkerPoolContext.tsx
@@ -60,6 +60,7 @@ const HighlighterOptions: WorkerInitializationRenderOptions = {
     'cpp',
     'css',
     'go',
+    'markdown',
     'python',
     'rust',
     'sh',
diff --git a/apps/docs/app/(diffs)/_examples/ArbitraryFiles/ArbitraryFiles.tsx b/apps/docs/app/(diffs)/_examples/ArbitraryFiles/ArbitraryFiles.tsx
index 4b18a1ce4..ea5c9c23d 100644
--- a/apps/docs/app/(diffs)/_examples/ArbitraryFiles/ArbitraryFiles.tsx
+++ b/apps/docs/app/(diffs)/_examples/ArbitraryFiles/ArbitraryFiles.tsx
@@ -21,16 +21,15 @@ export function ArbitraryFiles({ prerenderedDiff }: ArbitraryFilesProps) {
         title="Diff arbitrary files"
         description={
           <>
-            In addition to rendering standard Git diffs and patches, you can
-            pass any two files in <code>@pierre/diffs</code> and get a diff
-            between them. This is especially useful when comparing across
+            You can also pass any two files in <code>@pierre/diffs</code> to
+            diff them. This is especially useful when comparing across
             generative snapshots where linear history isn't always available.
-            Edit the css below to see the diff.
+            Edit the CSS files below to see the diff.
           </>
         }
       />
 
-      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div className="flex flex-col gap-4">
         <div className="relative">
           <FileLabel>before.css</FileLabel>
           <FileTextarea
@@ -54,7 +53,7 @@ export function ArbitraryFiles({ prerenderedDiff }: ArbitraryFilesProps) {
         {...prerenderedDiff}
         oldFile={oldFile}
         newFile={newFile}
-        className="diff-container"
+        className="diff-container min-h-80"
       />
     </div>
   );
@@ -84,7 +83,7 @@ function FileTextarea({ value, onChange, className = '' }: FileTextareaProps) {
     <textarea
       value={value}
       onChange={onChange}
-      className={`bg-muted h-40 w-full resize-none rounded-lg border px-4 pt-10 font-mono text-sm ${className}`}
+      className={`bg-muted field-sizing-content min-h-40 w-full resize-none rounded-lg border px-4 pt-10 font-mono text-sm ${className}`}
       spellCheck={false}
     />
   );
diff --git a/apps/docs/app/(diffs)/_examples/ArbitraryFiles/constants.ts b/apps/docs/app/(diffs)/_examples/ArbitraryFiles/constants.ts
index ec92e3cc0..bca57a90b 100644
--- a/apps/docs/app/(diffs)/_examples/ArbitraryFiles/constants.ts
+++ b/apps/docs/app/(diffs)/_examples/ArbitraryFiles/constants.ts
@@ -9,6 +9,11 @@ export const ARBITRARY_DIFF_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     contents: `.pizza {
   display: flex;
   justify-content: center;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 8px;
+  background: #fff;
 }
 `,
   },
@@ -16,6 +21,11 @@ export const ARBITRARY_DIFF_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     name: 'example.css',
     contents: `.pizza {
   display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--surface);
 }
 `,
   },
diff --git a/apps/docs/app/(diffs)/_examples/CustomHeader/CustomHeader.tsx b/apps/docs/app/(diffs)/_examples/CustomHeader/CustomHeader.tsx
index 8df618d25..e6a091e53 100644
--- a/apps/docs/app/(diffs)/_examples/CustomHeader/CustomHeader.tsx
+++ b/apps/docs/app/(diffs)/_examples/CustomHeader/CustomHeader.tsx
@@ -41,8 +41,10 @@ export function CustomHeader({ prerenderedDiff }: CustomHeaderProps) {
         title="Custom headers"
         description={
           <>
-            Switch between lightweight header metadata and a fully custom header
-            rendered inside the built-in <code>data-diffs-header</code> shell.
+            Customize your <code>File</code> or <code>FileDiff</code> headers
+            with two options: inserting additional header metadata, or a fully
+            custom header rendered inside the built-in{' '}
+            <code>data-diffs-header</code> shell.
           </>
         }
       />
diff --git a/apps/docs/app/(diffs)/_examples/CustomHeader/constants.ts b/apps/docs/app/(diffs)/_examples/CustomHeader/constants.ts
index 84a9fdb92..2c30a54d2 100644
--- a/apps/docs/app/(diffs)/_examples/CustomHeader/constants.ts
+++ b/apps/docs/app/(diffs)/_examples/CustomHeader/constants.ts
@@ -49,16 +49,12 @@ struct AppConfig {
         self.enableLogging = true
     }
 
-    func headers(token: String? = nil) -> [String: String] {
-        var headers = [
+    func headers() -> [String: String] {
+        return [
             "Content-Type": "application/json",
             "Accept": "application/json",
             "X-API-Version": "2.0"
         ]
-        if let token = token {
-            headers["Authorization"] = "Bearer \\(token)"
-        }
-        return headers
     }
 }
 `,
@@ -70,7 +66,7 @@ export const CUSTOM_HEADER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   options: {
     theme: DEFAULT_THEMES,
     themeType: 'dark',
-    diffStyle: 'split',
+    diffStyle: 'unified',
     disableBackground: false,
     unsafeCSS: CustomScrollbarCSS,
   },
diff --git a/apps/docs/app/(diffs)/_examples/ShikiThemes/constants.ts b/apps/docs/app/(diffs)/_examples/ShikiThemes/constants.ts
index b5a3022a7..b157e1a78 100644
--- a/apps/docs/app/(diffs)/_examples/ShikiThemes/constants.ts
+++ b/apps/docs/app/(diffs)/_examples/ShikiThemes/constants.ts
@@ -37,7 +37,7 @@ fn add(a: i32, b: i32) -> i32 {
 `,
   },
   options: {
-    diffStyle: 'split',
+    diffStyle: 'unified',
     theme: DEFAULT_THEMES,
     unsafeCSS: CustomScrollbarCSS,
     enableLineSelection: true,
diff --git a/apps/docs/app/(diffs)/_examples/TokenHover/constants.ts b/apps/docs/app/(diffs)/_examples/TokenHover/constants.ts
index 0da7c8e8c..ac5d67466 100644
--- a/apps/docs/app/(diffs)/_examples/TokenHover/constants.ts
+++ b/apps/docs/app/(diffs)/_examples/TokenHover/constants.ts
@@ -11,9 +11,8 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   flex-direction: column;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 2rem 1.5rem;
   max-width: 960px;
-  margin: 0 auto;
+  margin-inline: auto;
 }
 
 .card-grid .card {
@@ -24,14 +23,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
   background-color: var(--color-surface);
   border-radius: 8px;
   border: 1px solid transparent;
-  transition: box-shadow 0.2s, border-color 0.2s;
-  cursor: pointer;
-}
-
-.card-grid .card h3 {
-  font-size: 1rem;
-  line-height: 1.4;
-  margin: 0;
 }
 
 .card-grid .card:hover {
@@ -60,10 +51,8 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
-    padding-block: 2rem;
-    padding-inline: 1.5rem;
     max-width: 960px;
-    margin: 0 auto;
+    margin-inline: auto;
     margin-trim: in-flow;
   }
 
@@ -75,8 +64,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     background-color: var(--color-surface);
     border-radius: 8px;
     border: 1px solid transparent;
-    transition: box-shadow 0.2s, border-color 0.2s;
-    cursor: pointer;
 
     &:hover {
       border: 1px solid var(--color-border);
@@ -86,15 +73,6 @@ export const TOKEN_HOVER_EXAMPLE: PreloadMultiFileDiffOptions<undefined> = {
     &:focus-visible {
       outline: 2px solid var(--color-accent);
     }
-
-    h3 {
-      font-size: 1rem;
-      line-height: 1.4;
-      margin: 0;
-      text-wrap: balance;
-      text-box-trim: trim-start;
-      text-box-edge: cap alphabetic;
-    }
   }
 
   @container cards (min-width: 640px) {
diff --git a/apps/docs/app/(diffs)/_home/AgentDemoSection.tsx b/apps/docs/app/(diffs)/_home/AgentDemoSection.tsx
new file mode 100644
index 000000000..d4f8c26b3
--- /dev/null
+++ b/apps/docs/app/(diffs)/_home/AgentDemoSection.tsx
@@ -0,0 +1,37 @@
+import { AgentUi } from './AgentUi';
+import { FeatureHeader } from '@/components/FeatureHeader';
+
+interface AgentDemoSectionProps {
+  // Server-rendered, already-highlighted diff HTML keyed by file path. Built in
+  // Home.tsx so the embedded card paints highlighted on first load and hydrates
+  // without an SSR/client mismatch.
+  prerenderedDiffs: Record<string, string>;
+}
+
+// Homepage embed of the agent-review surface: a single-file, diff-only card.
+// Always dark (the snapshot is prerendered dark and matching it avoids theme
+// flashing), so there's no light/dark toggle. It reuses the homepage's shared
+// worker pool for highlighting.
+export function AgentDemoSection({ prerenderedDiffs }: AgentDemoSectionProps) {
+  return (
+    <div className="space-y-5">
+      <FeatureHeader
+        id="edit"
+        isBeta
+        title="Edit diffs and code"
+        description={
+          <>
+            Enable edit mode in any <code>File</code> or <code>FileDiff</code>{' '}
+            component with the <code>EditorProvider</code>. Includes support for
+            selection management, auto-indention, undo history, find-in-file,
+            lint markers, and more. Pairs nicely with <code>@pierre/trees</code>{' '}
+            for <abbr title="Agentic User Interface">AUI</abbr> style
+            experiences.
+          </>
+        }
+      />
+
+      <AgentUi prerenderedDiffs={prerenderedDiffs} />
+    </div>
+  );
+}
diff --git a/apps/docs/app/(diffs)/_home/AgentUi.tsx b/apps/docs/app/(diffs)/_home/AgentUi.tsx
new file mode 100644
index 000000000..581a47aac
--- /dev/null
+++ b/apps/docs/app/(diffs)/_home/AgentUi.tsx
@@ -0,0 +1,382 @@
+'use client';
+
+import { DEFAULT_THEMES } from '@pierre/diffs';
+import { Editor } from '@pierre/diffs/editor';
+import { EditorProvider, FileDiff } from '@pierre/diffs/react';
+import { IconArrow, IconChevronSm, IconSparkle } from '@pierre/icons';
+import { FileTree, type FileTreeRowDecoration } from '@pierre/trees';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import './agent-ui.css';
+import {
+  AUI_SESSIONS,
+  type AuiChangedFile,
+  type AuiSession,
+  getFileDiff,
+  getSessionDirectoryPaths,
+  getSessionGitStatus,
+  getSessionPaths,
+} from './mockData';
+
+// The editor's stylesheet flattens every line number to one neutral colour
+// (`--diffs-editor-line-number-fg`) and is injected as an unlayered <style>,
+// so it overrides the library's per-line colouring (which lives in @layer
+// base). We adopt this extra, higher-specificity unlayered sheet into the
+// editor's shadow root to restore jade/red numbers for added and deleted
+// lines, while leaving the active/selected line to the editor's own styling.
+const LINE_NUMBER_COLOR_CSS = `
+[data-column-number][data-line-type='change-addition']:not([data-selected-line]):not([data-active]) {
+  color: var(--diffs-addition-base);
+}
+[data-column-number][data-line-type='change-deletion']:not([data-selected-line]):not([data-active]) {
+  color: var(--diffs-deletion-base);
+}
+`;
+
+let lineNumberColorSheet: CSSStyleSheet | null = null;
+function getLineNumberColorSheet(): CSSStyleSheet | null {
+  if (typeof CSSStyleSheet === 'undefined') {
+    return null;
+  }
+  if (lineNumberColorSheet == null) {
+    lineNumberColorSheet = new CSSStyleSheet();
+    lineNumberColorSheet.replaceSync(LINE_NUMBER_COLOR_CSS);
+  }
+  return lineNumberColorSheet;
+}
+
+// Renders the active session's changed files as a @pierre/trees FileTree, with
+// git-status colours and per-row +/- decorations. The tree is an imperative web
+// component, so it's created in an effect and torn down on session change.
+function ChangesTree({
+  session,
+  activePath,
+  onSelect,
+}: {
+  session: AuiSession;
+  activePath: string | null;
+  onSelect: (path: string) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const treeRef = useRef<FileTree | null>(null);
+  const onSelectRef = useRef(onSelect);
+  onSelectRef.current = onSelect;
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (container == null) {
+      return;
+    }
+
+    const filesByPath = new Map<string, AuiChangedFile>(
+      session.changedFiles.map((file) => [file.path, file])
+    );
+    const tree = new FileTree({
+      paths: getSessionPaths(session),
+      gitStatus: getSessionGitStatus(session),
+      initialExpandedPaths: getSessionDirectoryPaths(session),
+      density: 'compact',
+      renderRowDecoration: ({ item }): FileTreeRowDecoration | null => {
+        const file = filesByPath.get(item.path);
+        if (file == null) {
+          return null;
+        }
+        // `light-dark()` resolves against the tree host's color-scheme, which we
+        // pin to the demo's own toggle, so jade/red adapt across light and dark.
+        // Skip a zero count entirely so rows only show the side that changed.
+        const parts: { text: string; color: string }[] = [];
+        if (file.additions > 0) {
+          parts.push({
+            text: `+${String(file.additions)}`,
+            color: 'light-dark(#0f9d6b, #34d399)',
+          });
+        }
+        if (file.deletions > 0) {
+          const prefix = parts.length > 0 ? '\u00a0' : '';
+          parts.push({
+            text: `${prefix}\u2212${String(file.deletions)}`,
+            color: 'light-dark(#dc2626, #f87171)',
+          });
+        }
+        if (parts.length === 0) {
+          return null;
+        }
+        return {
+          text: parts.map((part) => part.text).join(''),
+          title: `${String(file.additions)} additions, ${String(file.deletions)} deletions`,
+          parts,
+        };
+      },
+      onSelectionChange: (selectedPaths) => {
+        for (let index = selectedPaths.length - 1; index >= 0; index -= 1) {
+          const path = selectedPaths[index];
+          if (!path.endsWith('/')) {
+            onSelectRef.current(path);
+            break;
+          }
+        }
+      },
+    });
+    treeRef.current = tree;
+    container.innerHTML = '';
+    tree.render({ fileTreeContainer: container });
+
+    return () => {
+      tree.cleanUp();
+      treeRef.current = null;
+    };
+  }, [session]);
+
+  // Inline color-scheme beats the tree's `:host { color-scheme: light dark }`,
+  // pinning its light-dark() colours to the demo's dark mode.
+  useEffect(() => {
+    if (containerRef.current != null) {
+      containerRef.current.style.colorScheme = 'dark';
+    }
+  }, [session]);
+
+  // Keep the highlighted row matched to the active file.
+  useEffect(() => {
+    const tree = treeRef.current;
+    if (tree == null || activePath == null) {
+      return;
+    }
+    const item = tree.getItem(activePath);
+    if (item == null) {
+      return;
+    }
+    for (const selectedPath of tree.getSelectedPaths()) {
+      if (selectedPath !== activePath) {
+        tree.getItem(selectedPath)?.deselect();
+      }
+    }
+    if (!item.isSelected()) {
+      item.select();
+    }
+  }, [activePath, session]);
+
+  return <div ref={containerRef} className="aui-tree" />;
+}
+
+export interface AgentUiProps {
+  // Highlight themes the surrounding worker pool was initialized with. Defaults
+  // to the shared homepage pool's themes.
+  theme?: { dark: string; light: string };
+  // Server-rendered diff HTML keyed by file path. When present the matching
+  // FileDiff hydrates from this markup (already syntax-highlighted) instead of
+  // waiting on the client worker, which also avoids an SSR/client mismatch.
+  prerenderedDiffs?: Record<string, string>;
+}
+
+// The demo is always dark: the snapshot is prerendered dark and matching it
+// avoids theme flashing, so there is no light/dark toggle.
+export function AgentUi({
+  theme = DEFAULT_THEMES,
+  prerenderedDiffs,
+}: AgentUiProps) {
+  const session = AUI_SESSIONS[0];
+
+  const [activePath, setActivePath] = useState<string | null>(
+    () => session.changedFiles[0]?.path ?? null
+  );
+
+  // Persisted in-editor edits keyed by path, so switching files keeps the
+  // agent's tweaked output.
+  const editsRef = useRef<Map<string, string>>(new Map());
+  // The editor's debounced onChange fires without a path argument, so we track
+  // the live target here.
+  const activeTargetRef = useRef<string | null>(null);
+  useEffect(() => {
+    activeTargetRef.current = activePath;
+  }, [activePath]);
+
+  const editor = useMemo(
+    () =>
+      new Editor({
+        enabledSelectionAction: true,
+        renderSelectionAction({
+          close,
+          getSelectionText,
+          replaceSelectionText,
+        }) {
+          const container = document.createElement('div');
+          const button = document.createElement('button');
+          container.className = 'aui-selection-action';
+          button.type = 'button';
+          button.textContent = 'Wrap selection in TODO()';
+          button.addEventListener('click', () => {
+            replaceSelectionText(`TODO(${getSelectionText()})`);
+            close();
+          });
+          container.append(button);
+          return container;
+        },
+        onChange(file) {
+          const target = activeTargetRef.current;
+          if (target == null) {
+            return;
+          }
+          editsRef.current.set(target, file.contents);
+        },
+      }),
+    []
+  );
+
+  // The changes tree shows one file at a time; selecting a file swaps the
+  // active surface.
+  const openFile = useCallback((path: string) => {
+    setActivePath(path);
+  }, []);
+
+  const activeFile: AuiChangedFile | null = useMemo(
+    () =>
+      activePath != null
+        ? (session.changedFiles.find((file) => file.path === activePath) ??
+          null)
+        : null,
+    [session, activePath]
+  );
+
+  const editKey = activeFile?.path ?? '';
+
+  // Rebuild the diff surface whenever the active file changes, substituting any
+  // persisted edits for the snapshot's `after`.
+  const fileDiff = useMemo(
+    () =>
+      activeFile != null
+        ? getFileDiff(activeFile, editsRef.current.get(editKey))
+        : null,
+    [activeFile, editKey]
+  );
+
+  // Server-rendered, already-highlighted HTML for the active diff. Only safe
+  // when the file is unedited so the markup matches `fileDiff`.
+  const activePrerenderedHTML =
+    activePath != null && editsRef.current.get(editKey) == null
+      ? prerenderedDiffs?.[activePath]
+      : undefined;
+
+  const breadcrumbSegments = activePath != null ? activePath.split('/') : [];
+
+  // Re-adopt the jade/red line-number override whenever the diff surface is
+  // rebuilt (each file switch remounts the diffs-container with a fresh shadow
+  // root).
+  const surfaceWrapRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const sheet = getLineNumberColorSheet();
+    if (sheet == null) {
+      return;
+    }
+    const container = surfaceWrapRef.current?.querySelector('.aui-surface');
+    const shadowRoot = container?.shadowRoot;
+    if (shadowRoot == null) {
+      return;
+    }
+    if (!shadowRoot.adoptedStyleSheets.includes(sheet)) {
+      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];
+    }
+  }, [activePath]);
+
+  return (
+    <EditorProvider editor={editor}>
+      <div className="aui" data-theme-type="dark" data-embedded="true">
+        <div className="aui-body">
+          <section className="aui-center">
+            <header className="aui-center-header">
+              <nav className="aui-breadcrumb" aria-label="File path">
+                {breadcrumbSegments.length > 0 ? (
+                  breadcrumbSegments.map((segment, index) => (
+                    <span
+                      // Path segments are positional; index keys are stable here.
+                      key={`${segment}-${String(index)}`}
+                      className="aui-crumb"
+                      data-leaf={
+                        index === breadcrumbSegments.length - 1
+                          ? 'true'
+                          : undefined
+                      }
+                    >
+                      {segment}
+                    </span>
+                  ))
+                ) : (
+                  <span className="aui-crumb">No file selected</span>
+                )}
+              </nav>
+            </header>
+
+            <div className="aui-surface-wrap" ref={surfaceWrapRef}>
+              {activeFile != null && fileDiff != null ? (
+                <FileDiff
+                  key={activePath}
+                  fileDiff={fileDiff}
+                  className="aui-surface"
+                  options={{
+                    theme,
+                    themeType: 'dark',
+                    disableFileHeader: true,
+                    overflow: 'wrap',
+                    diffStyle: 'unified',
+                  }}
+                  prerenderedHTML={activePrerenderedHTML}
+                  contentEditable
+                />
+              ) : (
+                <div className="aui-empty">
+                  Select a changed file to review.
+                </div>
+              )}
+            </div>
+
+            <div className="aui-composer">
+              <textarea
+                className="aui-composer-input"
+                placeholder="Ask for changes, @mention files, or run commands…"
+                rows={2}
+                disabled
+              />
+              <div className="aui-composer-toolbar">
+                <button type="button" className="aui-composer-select" disabled>
+                  <IconSparkle className="opacity-50" />
+                  Agent
+                  <IconChevronSm className="opacity-50" />
+                </button>
+                <button type="button" className="aui-composer-select" disabled>
+                  Mythos 5
+                  <IconChevronSm className="opacity-50" />
+                </button>
+                <button
+                  type="button"
+                  className="aui-composer-send ml-auto"
+                  aria-label="Send"
+                  disabled
+                >
+                  <IconArrow className="rotate-[90deg]" />
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <aside className="aui-changes">
+            <div className="aui-changes-tabs" role="tablist">
+              <button type="button" role="tab" disabled>
+                All files
+              </button>
+              <button type="button" role="tab" aria-selected="true">
+                Changes
+              </button>
+              <button type="button" role="tab" disabled>
+                Checks
+              </button>
+            </div>
+            <ChangesTree
+              session={session}
+              activePath={activePath}
+              onSelect={openFile}
+            />
+          </aside>
+        </div>
+      </div>
+    </EditorProvider>
+  );
+}
diff --git a/apps/docs/app/(diffs)/_home/Home.tsx b/apps/docs/app/(diffs)/_home/Home.tsx
index e9c274d71..8f47086fb 100644
--- a/apps/docs/app/(diffs)/_home/Home.tsx
+++ b/apps/docs/app/(diffs)/_home/Home.tsx
@@ -1,5 +1,5 @@
+import { DEFAULT_THEMES } from '@pierre/diffs';
 import {
-  preloadFile,
   preloadFileDiff,
   preloadMultiFileDiff,
   preloadUnresolvedFile,
@@ -22,11 +22,6 @@ import { FONT_STYLES } from '../_examples/FontStyles/constants';
 import { FontStyles } from '../_examples/FontStyles/FontStyles';
 import { LINE_SELECTION_EXAMPLE } from '../_examples/LineSelection/constants';
 import { LineSelection } from '../_examples/LineSelection/LineSelection';
-import {
-  LIVE_EDITOR_EXAMPLE,
-  LIVE_EDITOR_FILE_EXAMPLE,
-} from '../_examples/LiveEditor/constants';
-import { LiveEditor } from '../_examples/LiveEditor/LiveEditor';
 import { MERGE_CONFLICT_EXAMPLE } from '../_examples/MergeConflict/constants';
 import { MergeConflict } from '../_examples/MergeConflict/MergeConflict';
 import { SHIKI_THEMES } from '../_examples/ShikiThemes/constants';
@@ -35,6 +30,8 @@ import { SPLIT_UNIFIED } from '../_examples/SplitUnified/constants';
 import { SplitUnified } from '../_examples/SplitUnified/SplitUnified';
 import { TOKEN_HOVER_EXAMPLE } from '../_examples/TokenHover/constants';
 import { TokenHover } from '../_examples/TokenHover/TokenHover';
+import { AgentDemoSection } from './AgentDemoSection';
+import { AUI_SESSIONS, getFileDiff } from './mockData';
 import { HeadingAnchors } from '@/components/docs/HeadingAnchors';
 import Footer from '@/components/Footer';
 import { Header } from '@/components/Header';
@@ -43,7 +40,6 @@ import { PierreCompanySection } from '@/components/PierreCompanySection';
 import type { ProductId } from '@/lib/product-config';
 
 const PRODUCT_ID: ProductId = 'diffs';
-
 export default function Home() {
   return (
     <WorkerPoolContext>
@@ -52,18 +48,21 @@ export default function Home() {
         <Hero productId={PRODUCT_ID} />
         <HeadingAnchors />
         <section className="space-y-12 pb-8">
+          <EditorSection />
           <SplitUnifiedSection />
-          <LiveEditorSection />
-          <ShikiThemesSection />
           <DiffStylesSection />
-          <FontStylesSection />
-          <CustomHunkSeparatorsSection />
-          <CustomHeaderSection />
           <MergeConflictSection />
           <AnnotationsSection />
           <AcceptRejectSection />
           <LineSelectionSection />
           <TokenHoverSection />
+
+          <hr />
+
+          <ShikiThemesSection />
+          <FontStylesSection />
+          <CustomHunkSeparatorsSection />
+          <CustomHeaderSection />
           <ArbitraryFilesSection />
         </section>
         <PierreCompanySection />
@@ -73,22 +72,32 @@ export default function Home() {
   );
 }
 
-async function SplitUnifiedSection() {
-  return (
-    <SplitUnified prerenderedDiff={await preloadMultiFileDiff(SPLIT_UNIFIED)} />
+// Server-renders the embedded editor demo's diffs. We pick the live AUI
+// session and prerender each changed file's diff with the demo's default dark
+// theme so the card paints highlighted on first load and hydrates cleanly.
+async function EditorSection() {
+  const session = AUI_SESSIONS[0];
+  const entries = await Promise.all(
+    session.changedFiles.map(async (file) => {
+      const result = await preloadFileDiff({
+        fileDiff: getFileDiff(file),
+        options: {
+          theme: DEFAULT_THEMES,
+          themeType: 'dark',
+          disableFileHeader: true,
+          overflow: 'wrap',
+          diffStyle: 'unified',
+        },
+      });
+      return [file.path, result.prerenderedHTML] as const;
+    })
   );
+  return <AgentDemoSection prerenderedDiffs={Object.fromEntries(entries)} />;
 }
 
-async function LiveEditorSection() {
-  const [prerenderedDiff, prerenderedFile] = await Promise.all([
-    preloadMultiFileDiff(LIVE_EDITOR_EXAMPLE),
-    preloadFile(LIVE_EDITOR_FILE_EXAMPLE),
-  ]);
+async function SplitUnifiedSection() {
   return (
-    <LiveEditor
-      prerenderedDiff={prerenderedDiff}
-      prerenderedFile={prerenderedFile}
-    />
+    <SplitUnified prerenderedDiff={await preloadMultiFileDiff(SPLIT_UNIFIED)} />
   );
 }
 
diff --git a/apps/docs/app/(diffs)/_home/agent-ui.css b/apps/docs/app/(diffs)/_home/agent-ui.css
new file mode 100644
index 000000000..5f4156a53
--- /dev/null
+++ b/apps/docs/app/(diffs)/_home/agent-ui.css
@@ -0,0 +1,274 @@
+/* Scoped agent-UI chrome for the homepage agent-review demo. Everything lives
+   under `.aui` so it never leaks into the rest of the docs app. Colours use
+   light-dark(); the `.aui[data-theme-type]` rules pin color-scheme to the
+   demo's own toggle. The UI sits in normal page flow as a fixed-height card. */
+.aui {
+  --ide-surface: light-dark(#ffffff, #070707);
+  --ide-panel: light-dark(#f8f8f8, #0f0f10);
+  --ide-border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.07));
+  --ide-fg: light-dark(#18181b, #e4e4e7);
+  --ide-fg-muted: light-dark(#71717a, #a1a1aa);
+  --ide-tab-active: light-dark(#ffffff, #1c1c1f);
+  --ide-tab-hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.05));
+  --ide-accent: light-dark(#2563eb, #3b82f6);
+
+  display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  height: 560px;
+  max-height: 72vh;
+  border: 1px solid var(--ide-border);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+  background-color: var(--ide-surface);
+  color: var(--ide-fg);
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
+  font-size: 13px;
+}
+
+.aui[data-theme-type='light'] {
+  color-scheme: light;
+}
+
+.aui[data-theme-type='dark'] {
+  color-scheme: dark;
+}
+
+/* Give the demo more room on desktop. */
+@media (width >= 1024px) {
+  .aui {
+    height: 760px;
+    max-height: 75vh;
+  }
+}
+
+.aui button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.aui code {
+  font-family: var(--font-berkeley-mono), monospace;
+  font-size: 0.9em;
+  padding: 1px 4px;
+  border-radius: 4px;
+  background-color: var(--ide-tab-hover);
+}
+
+.aui-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 380px;
+  min-height: 0;
+}
+
+/* --- Center column ------------------------------------------------------- */
+
+.aui-center {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.aui-center-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  height: 44px;
+  padding-inline: 12px;
+  border-bottom: 1px solid var(--ide-border);
+}
+
+.aui-breadcrumb {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 14px;
+  color: var(--ide-fg-muted);
+}
+
+.aui-crumb:not(:last-child)::after {
+  content: '/';
+  margin-inline: 2px;
+  opacity: 0.5;
+}
+
+.aui-crumb[data-leaf='true'] {
+  color: var(--ide-fg);
+  font-weight: 500;
+}
+
+.aui-surface-wrap {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.aui-surface {
+  display: block;
+}
+
+.aui-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--ide-fg-muted);
+}
+
+.aui-selection-action {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.aui-selection-action button {
+  padding: 4px 10px;
+  border-radius: 6px;
+  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  background-color: color-mix(in srgb, currentColor 8%, transparent);
+  color: inherit;
+  font-size: 12px;
+}
+
+.aui-composer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 12px;
+  padding: 10px 10px 8px;
+  border: 1px solid var(--ide-border);
+  border-radius: 12px;
+  background-color: var(--ide-panel);
+}
+
+.aui-composer:focus-within {
+  border-color: var(--ide-accent);
+}
+
+.aui-composer-input {
+  width: 100%;
+  min-height: 40px;
+  padding: 2px 4px;
+  border: none;
+  background: none;
+  color: var(--ide-fg);
+  font-size: 13px;
+  font-family: inherit;
+  line-height: 1.5;
+  resize: none;
+}
+
+.aui-composer-input:focus {
+  outline: none;
+}
+
+.aui-composer-input::placeholder {
+  color: var(--ide-fg-muted);
+}
+
+.aui-composer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.aui-composer-select,
+.aui-composer-send {
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--ide-fg-muted);
+
+  &[disabled] {
+    cursor: default;
+  }
+}
+
+.aui-composer-select {
+  gap: 5px;
+  height: 28px;
+  padding-inline: 8px;
+  background-color: var(--ide-tab-hover);
+  font-size: 12px;
+}
+
+.aui-composer-send {
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background-color: var(--ide-accent);
+  color: #ffffff;
+
+  &[disabled] {
+    opacity: 0.6;
+  }
+}
+
+/* --- Right changes panel ------------------------------------------------- */
+
+.aui-changes {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-left: 1px solid var(--ide-border);
+  background-color: var(--ide-panel);
+}
+
+.aui-changes-tabs {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 44px;
+  padding-inline: 10px;
+  border-bottom: 1px solid var(--ide-border);
+}
+
+.aui-changes-tabs button {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--ide-fg-muted);
+  font-size: 12px;
+}
+
+.aui-changes-tabs button[aria-selected='true'] {
+  background-color: var(--ide-tab-active);
+  color: var(--ide-fg);
+}
+
+.aui-changes-tabs button[disabled] {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.aui-tree {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-top: 6px;
+}
+
+/* --- Mobile -------------------------------------------------------------- */
+
+/* On narrow screens there isn't room for the changes sidebar, so collapse to a
+   single full-width column showing just the active file. Placed last so it wins
+   over the base `.aui-body`/`.aui-changes` rules above (media queries don't add
+   specificity). */
+@media (width < 640px) {
+  .aui-body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .aui-changes {
+    display: none;
+  }
+}
diff --git a/apps/docs/app/(diffs)/_home/mockData.generated.ts b/apps/docs/app/(diffs)/_home/mockData.generated.ts
new file mode 100644
index 000000000..46dad6e29
--- /dev/null
+++ b/apps/docs/app/(diffs)/_home/mockData.generated.ts
@@ -0,0 +1,74 @@
+// AUTO-GENERATED by apps/docs/scripts/generate-aui-mock-data.ts. Do not edit by
+// hand. Re-run the generator to refresh this snapshot from the live repo.
+import type { AuiSession } from './mockData';
+
+export const GENERATED_AUI_SESSIONS: AuiSession[] = [
+  {
+    id: 'aui-self',
+    title: 'Add agent-review demo',
+    subtitle: 'Ready for review',
+    status: 'review',
+    changedFiles: [
+      {
+        path: 'apps/docs/app/(diffs)/_home/AgentUi.tsx',
+        status: 'modified',
+        before:
+          "'use client';\n\nimport { DEFAULT_THEMES } from '@pierre/diffs';\nimport { Editor } from '@pierre/diffs/editor';\nimport { EditorProvider, FileDiff } from '@pierre/diffs/react';\nimport { IconArrow, IconChevronSm, IconSparkle } from '@pierre/icons';\nimport { FileTree, type FileTreeRowDecoration } from '@pierre/trees';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport './agent-ui.css';\nimport {\n  AUI_SESSIONS,\n  type AuiChangedFile,\n  type AuiSession,\n  getFileDiff,\n  getSessionDirectoryPaths,\n  getSessionGitStatus,\n  getSessionPaths,\n} from './mockData';\n\nexport type ThemeType = 'light' | 'dark';\n\n// The editor's stylesheet flattens every line number to one neutral colour\n// (`--diffs-editor-line-number-fg`) and is injected as an unlayered <style>,\n// so it overrides the library's per-line colouring (which lives in @layer\n// base). We adopt this extra, higher-specificity unlayered sheet into the\n// editor's shadow root to restore jade/red numbers for added and deleted\n// lines, while leaving the active/selected line to the editor's own styling.\nconst LINE_NUMBER_COLOR_CSS = `\n[data-column-number][data-line-type='change-addition']:not([data-selected-line]):not([data-active]) {\n  color: var(--diffs-addition-base);\n}\n[data-column-number][data-line-type='change-deletion']:not([data-selected-line]):not([data-active]) {\n  color: var(--diffs-deletion-base);\n}\n`;\n\nlet lineNumberColorSheet: CSSStyleSheet | null = null;\nfunction getLineNumberColorSheet(): CSSStyleSheet | null {\n  if (typeof CSSStyleSheet === 'undefined') {\n    return null;\n  }\n  if (lineNumberColorSheet == null) {\n    lineNumberColorSheet = new CSSStyleSheet();\n    lineNumberColorSheet.replaceSync(LINE_NUMBER_COLOR_CSS);\n  }\n  return lineNumberColorSheet;\n}\n\n// Renders the active session's changed files as a @pierre/trees FileTree, with\n// git-status colours and per-row +/- decorations. The tree is an imperative web\n// component, so it's created in an effect and torn down on session change.\nfunction ChangesTree({\n  session,\n  activePath,\n  themeType,\n  onSelect,\n}: {\n  session: AuiSession;\n  activePath: string | null;\n  themeType: ThemeType;\n  onSelect: (path: string) => void;\n}) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const treeRef = useRef<FileTree | null>(null);\n  const onSelectRef = useRef(onSelect);\n  onSelectRef.current = onSelect;\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n\n    const filesByPath = new Map<string, AuiChangedFile>(\n      session.changedFiles.map((file) => [file.path, file])\n    );\n    const tree = new FileTree({\n      paths: getSessionPaths(session),\n      gitStatus: getSessionGitStatus(session),\n      initialExpandedPaths: getSessionDirectoryPaths(session),\n      density: 'compact',\n      renderRowDecoration: ({ item }): FileTreeRowDecoration | null => {\n        const file = filesByPath.get(item.path);\n        if (file == null) {\n          return null;\n        }\n        // `light-dark()` resolves against the tree host's color-scheme, which we\n        // pin to the demo's own toggle, so jade/red adapt across light and dark.\n        // Skip a zero count entirely so rows only show the side that changed.\n        const parts: { text: string; color: string }[] = [];\n        if (file.additions > 0) {\n          parts.push({\n            text: `+${String(file.additions)}`,\n            color: 'light-dark(#0f9d6b, #34d399)',\n          });\n        }\n        if (file.deletions > 0) {\n          const prefix = parts.length > 0 ? '\\u00a0' : '';\n          parts.push({\n            text: `${prefix}\\u2212${String(file.deletions)}`,\n            color: 'light-dark(#dc2626, #f87171)',\n          });\n        }\n        if (parts.length === 0) {\n          return null;\n        }\n        return {\n          text: parts.map((part) => part.text).join(''),\n          title: `${String(file.additions)} additions, ${String(file.deletions)} deletions`,\n          parts,\n        };\n      },\n      onSelectionChange: (selectedPaths) => {\n        for (let index = selectedPaths.length - 1; index >= 0; index -= 1) {\n          const path = selectedPaths[index];\n          if (!path.endsWith('/')) {\n            onSelectRef.current(path);\n            break;\n          }\n        }\n      },\n    });\n    treeRef.current = tree;\n    container.innerHTML = '';\n    tree.render({ fileTreeContainer: container });\n\n    return () => {\n      tree.cleanUp();\n      treeRef.current = null;\n    };\n  }, [session]);\n\n  // Inline color-scheme beats the tree's `:host { color-scheme: light dark }`,\n  // flipping its light-dark() colours with our toggle.\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.style.colorScheme = themeType;\n    }\n  }, [themeType, session]);\n\n  // Keep the highlighted row matched to the active file.\n  useEffect(() => {\n    const tree = treeRef.current;\n    if (tree == null || activePath == null) {\n      return;\n    }\n    const item = tree.getItem(activePath);\n    if (item == null) {\n      return;\n    }\n    for (const selectedPath of tree.getSelectedPaths()) {\n      if (selectedPath !== activePath) {\n        tree.getItem(selectedPath)?.deselect();\n      }\n    }\n    if (!item.isSelected()) {\n      item.select();\n    }\n  }, [activePath, session]);\n\n  return <div ref={containerRef} className=\"aui-tree\" />;\n}\n\nexport interface AgentUiProps {\n  // Theme is controlled by the parent so the toggle can live outside the\n  // component (the homepage section renders its own button group).\n  themeType: ThemeType;\n  // Highlight themes the surrounding worker pool was initialized with. Defaults\n  // to the shared homepage pool's themes.\n  theme?: { dark: string; light: string };\n  // Server-rendered diff HTML keyed by file path. When present the matching\n  // FileDiff hydrates from this markup (already syntax-highlighted) instead of\n  // waiting on the client worker, which also avoids an SSR/client mismatch.\n  prerenderedDiffs?: Record<string, string>;\n}\n\nexport function AgentUi({\n  themeType,\n  theme = DEFAULT_THEMES,\n  prerenderedDiffs,\n}: AgentUiProps) {\n  const session = AUI_SESSIONS[0];\n\n  const [activePath, setActivePath] = useState<string | null>(\n    () => session.changedFiles[0]?.path ?? null\n  );\n\n  // Persisted in-editor edits keyed by path, so switching files keeps the\n  // agent's tweaked output.\n  const editsRef = useRef<Map<string, string>>(new Map());\n  // The editor's debounced onChange fires without a path argument, so we track\n  // the live target here.\n  const activeTargetRef = useRef<string | null>(null);\n  useEffect(() => {\n    activeTargetRef.current = activePath;\n  }, [activePath]);\n\n  const editor = useMemo(\n    () =>\n      new Editor({\n        enabledSelectionAction: true,\n        renderSelectionAction({ close, getSelectionText, replaceSelectionText }) {\n          const container = document.createElement('div');\n          const button = document.createElement('button');\n          container.className = 'aui-selection-action';\n          button.type = 'button';\n          button.textContent = 'Wrap selection in TODO()';\n          button.addEventListener('click', () => {\n            replaceSelectionText(`TODO(${getSelectionText()})`);\n            close();\n          });\n          container.append(button);\n          return container;\n        },\n        onChange(file) {\n          const target = activeTargetRef.current;\n          if (target == null) {\n            return;\n          }\n          editsRef.current.set(target, file.contents);\n        },\n      }),\n    []\n  );\n\n  // The changes tree shows one file at a time; selecting a file swaps the\n  // active surface.\n  const openFile = useCallback((path: string) => {\n    setActivePath(path);\n  }, []);\n\n  const activeFile: AuiChangedFile | null = useMemo(\n    () =>\n      activePath != null\n        ? (session.changedFiles.find((file) => file.path === activePath) ??\n          null)\n        : null,\n    [session, activePath]\n  );\n\n  const editKey = activeFile?.path ?? '';\n\n  // Rebuild the diff surface whenever the active file changes, substituting any\n  // persisted edits for the snapshot's `after`.\n  const fileDiff = useMemo(\n    () =>\n      activeFile != null\n        ? getFileDiff(activeFile, editsRef.current.get(editKey))\n        : null,\n    [activeFile, editKey]\n  );\n\n  // Server-rendered, already-highlighted HTML for the active diff. The snapshot\n  // is generated in dark mode, so only reuse it while the demo is in dark mode\n  // (otherwise a freshly opened file would flash dark before re-highlighting).\n  // It's also only safe when the file is unedited so the markup matches\n  // `fileDiff`.\n  const activePrerenderedHTML =\n    themeType === 'dark' &&\n    activePath != null &&\n    editsRef.current.get(editKey) == null\n      ? prerenderedDiffs?.[activePath]\n      : undefined;\n\n  const breadcrumbSegments = activePath != null ? activePath.split('/') : [];\n\n  // Re-adopt the jade/red line-number override whenever the diff surface is\n  // rebuilt (each file switch remounts the diffs-container with a fresh shadow\n  // root).\n  const surfaceWrapRef = useRef<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const sheet = getLineNumberColorSheet();\n    if (sheet == null) {\n      return;\n    }\n    const container = surfaceWrapRef.current?.querySelector('.aui-surface');\n    const shadowRoot = container?.shadowRoot;\n    if (shadowRoot == null) {\n      return;\n    }\n    if (!shadowRoot.adoptedStyleSheets.includes(sheet)) {\n      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];\n    }\n  }, [activePath]);\n\n  return (\n    <EditorProvider editor={editor}>\n      <div className=\"aui\" data-theme-type={themeType} data-embedded=\"true\">\n        <div className=\"aui-body\">\n          <section className=\"aui-center\">\n            <header className=\"aui-center-header\">\n              <nav className=\"aui-breadcrumb\" aria-label=\"File path\">\n                {breadcrumbSegments.length > 0 ? (\n                  breadcrumbSegments.map((segment, index) => (\n                    <span\n                      // Path segments are positional; index keys are stable here.\n                      key={`${segment}-${String(index)}`}\n                      className=\"aui-crumb\"\n                      data-leaf={\n                        index === breadcrumbSegments.length - 1\n                          ? 'true'\n                          : undefined\n                      }\n                    >\n                      {segment}\n                    </span>\n                  ))\n                ) : (\n                  <span className=\"aui-crumb\">No file selected</span>\n                )}\n              </nav>\n            </header>\n\n            <div className=\"aui-surface-wrap\" ref={surfaceWrapRef}>\n              {activeFile != null && fileDiff != null ? (\n                <FileDiff\n                  key={activePath}\n                  fileDiff={fileDiff}\n                  className=\"aui-surface\"\n                  options={{\n                    theme,\n                    themeType,\n                    disableFileHeader: true,\n                    overflow: 'wrap',\n                    diffStyle: 'unified',\n                  }}\n                  prerenderedHTML={activePrerenderedHTML}\n                  contentEditable\n                />\n              ) : (\n                <div className=\"aui-empty\">\n                  Select a changed file to review.\n                </div>\n              )}\n            </div>\n\n            <div className=\"aui-composer\">\n              <textarea\n                className=\"aui-composer-input\"\n                placeholder=\"Ask for changes, @mention files, or run commands…\"\n                rows={2}\n                disabled\n              />\n              <div className=\"aui-composer-toolbar\">\n                <button type=\"button\" className=\"aui-composer-select\" disabled>\n                  <IconSparkle className=\"opacity-50\" />\n                  Agent\n                  <IconChevronSm className=\"opacity-50\" />\n                </button>\n                <button type=\"button\" className=\"aui-composer-select\" disabled>\n                  Mythos 5\n                  <IconChevronSm className=\"opacity-50\" />\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"aui-composer-send ml-auto\"\n                  aria-label=\"Send\"\n                  disabled\n                >\n                  <IconArrow className=\"rotate-[90deg]\" />\n                </button>\n              </div>\n            </div>\n          </section>\n\n          <aside className=\"aui-changes\">\n            <div className=\"aui-changes-tabs\" role=\"tablist\">\n              <button type=\"button\" role=\"tab\" disabled>\n                All files\n              </button>\n              <button type=\"button\" role=\"tab\" aria-selected=\"true\">\n                Changes\n              </button>\n              <button type=\"button\" role=\"tab\" disabled>\n                Checks\n              </button>\n            </div>\n            <ChangesTree\n              session={session}\n              activePath={activePath}\n              themeType={themeType}\n              onSelect={openFile}\n            />\n          </aside>\n        </div>\n      </div>\n    </EditorProvider>\n  );\n}\n",
+        after:
+          "'use client';\n\nimport { DEFAULT_THEMES } from '@pierre/diffs';\nimport { Editor } from '@pierre/diffs/editor';\nimport { EditorProvider, FileDiff } from '@pierre/diffs/react';\nimport { IconArrow, IconChevronSm, IconSparkle } from '@pierre/icons';\nimport { FileTree, type FileTreeRowDecoration } from '@pierre/trees';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport './agent-ui.css';\nimport {\n  AUI_SESSIONS,\n  type AuiChangedFile,\n  type AuiSession,\n  getFileDiff,\n  getSessionDirectoryPaths,\n  getSessionGitStatus,\n  getSessionPaths,\n} from './mockData';\n\n// The editor's stylesheet flattens every line number to one neutral colour\n// (`--diffs-editor-line-number-fg`) and is injected as an unlayered <style>,\n// so it overrides the library's per-line colouring (which lives in @layer\n// base). We adopt this extra, higher-specificity unlayered sheet into the\n// editor's shadow root to restore jade/red numbers for added and deleted\n// lines, while leaving the active/selected line to the editor's own styling.\nconst LINE_NUMBER_COLOR_CSS = `\n[data-column-number][data-line-type='change-addition']:not([data-selected-line]):not([data-active]) {\n  color: var(--diffs-addition-base);\n}\n[data-column-number][data-line-type='change-deletion']:not([data-selected-line]):not([data-active]) {\n  color: var(--diffs-deletion-base);\n}\n`;\n\nlet lineNumberColorSheet: CSSStyleSheet | null = null;\nfunction getLineNumberColorSheet(): CSSStyleSheet | null {\n  if (typeof CSSStyleSheet === 'undefined') {\n    return null;\n  }\n  if (lineNumberColorSheet == null) {\n    lineNumberColorSheet = new CSSStyleSheet();\n    lineNumberColorSheet.replaceSync(LINE_NUMBER_COLOR_CSS);\n  }\n  return lineNumberColorSheet;\n}\n\n// Renders the active session's changed files as a @pierre/trees FileTree, with\n// git-status colours and per-row +/- decorations. The tree is an imperative web\n// component, so it's created in an effect and torn down on session change.\nfunction ChangesTree({\n  session,\n  activePath,\n  onSelect,\n}: {\n  session: AuiSession;\n  activePath: string | null;\n  onSelect: (path: string) => void;\n}) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const treeRef = useRef<FileTree | null>(null);\n  const onSelectRef = useRef(onSelect);\n  onSelectRef.current = onSelect;\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (container == null) {\n      return;\n    }\n\n    const filesByPath = new Map<string, AuiChangedFile>(\n      session.changedFiles.map((file) => [file.path, file])\n    );\n    const tree = new FileTree({\n      paths: getSessionPaths(session),\n      gitStatus: getSessionGitStatus(session),\n      initialExpandedPaths: getSessionDirectoryPaths(session),\n      density: 'compact',\n      renderRowDecoration: ({ item }): FileTreeRowDecoration | null => {\n        const file = filesByPath.get(item.path);\n        if (file == null) {\n          return null;\n        }\n        // `light-dark()` resolves against the tree host's color-scheme, which we\n        // pin to the demo's own toggle, so jade/red adapt across light and dark.\n        // Skip a zero count entirely so rows only show the side that changed.\n        const parts: { text: string; color: string }[] = [];\n        if (file.additions > 0) {\n          parts.push({\n            text: `+${String(file.additions)}`,\n            color: 'light-dark(#0f9d6b, #34d399)',\n          });\n        }\n        if (file.deletions > 0) {\n          const prefix = parts.length > 0 ? '\\u00a0' : '';\n          parts.push({\n            text: `${prefix}\\u2212${String(file.deletions)}`,\n            color: 'light-dark(#dc2626, #f87171)',\n          });\n        }\n        if (parts.length === 0) {\n          return null;\n        }\n        return {\n          text: parts.map((part) => part.text).join(''),\n          title: `${String(file.additions)} additions, ${String(file.deletions)} deletions`,\n          parts,\n        };\n      },\n      onSelectionChange: (selectedPaths) => {\n        for (let index = selectedPaths.length - 1; index >= 0; index -= 1) {\n          const path = selectedPaths[index];\n          if (!path.endsWith('/')) {\n            onSelectRef.current(path);\n            break;\n          }\n        }\n      },\n    });\n    treeRef.current = tree;\n    container.innerHTML = '';\n    tree.render({ fileTreeContainer: container });\n\n    return () => {\n      tree.cleanUp();\n      treeRef.current = null;\n    };\n  }, [session]);\n\n  // Inline color-scheme beats the tree's `:host { color-scheme: light dark }`,\n  // pinning its light-dark() colours to the demo's dark mode.\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.style.colorScheme = 'dark';\n    }\n  }, [session]);\n\n  // Keep the highlighted row matched to the active file.\n  useEffect(() => {\n    const tree = treeRef.current;\n    if (tree == null || activePath == null) {\n      return;\n    }\n    const item = tree.getItem(activePath);\n    if (item == null) {\n      return;\n    }\n    for (const selectedPath of tree.getSelectedPaths()) {\n      if (selectedPath !== activePath) {\n        tree.getItem(selectedPath)?.deselect();\n      }\n    }\n    if (!item.isSelected()) {\n      item.select();\n    }\n  }, [activePath, session]);\n\n  return <div ref={containerRef} className=\"aui-tree\" />;\n}\n\nexport interface AgentUiProps {\n  // Highlight themes the surrounding worker pool was initialized with. Defaults\n  // to the shared homepage pool's themes.\n  theme?: { dark: string; light: string };\n  // Server-rendered diff HTML keyed by file path. When present the matching\n  // FileDiff hydrates from this markup (already syntax-highlighted) instead of\n  // waiting on the client worker, which also avoids an SSR/client mismatch.\n  prerenderedDiffs?: Record<string, string>;\n}\n\n// The demo is always dark: the snapshot is prerendered dark and matching it\n// avoids theme flashing, so there is no light/dark toggle.\nexport function AgentUi({ theme = DEFAULT_THEMES, prerenderedDiffs }: AgentUiProps) {\n  const session = AUI_SESSIONS[0];\n\n  const [activePath, setActivePath] = useState<string | null>(\n    () => session.changedFiles[0]?.path ?? null\n  );\n\n  // Persisted in-editor edits keyed by path, so switching files keeps the\n  // agent's tweaked output.\n  const editsRef = useRef<Map<string, string>>(new Map());\n  // The editor's debounced onChange fires without a path argument, so we track\n  // the live target here.\n  const activeTargetRef = useRef<string | null>(null);\n  useEffect(() => {\n    activeTargetRef.current = activePath;\n  }, [activePath]);\n\n  const editor = useMemo(\n    () =>\n      new Editor({\n        enabledSelectionAction: true,\n        renderSelectionAction({ close, getSelectionText, replaceSelectionText }) {\n          const container = document.createElement('div');\n          const button = document.createElement('button');\n          container.className = 'aui-selection-action';\n          button.type = 'button';\n          button.textContent = 'Wrap selection in TODO()';\n          button.addEventListener('click', () => {\n            replaceSelectionText(`TODO(${getSelectionText()})`);\n            close();\n          });\n          container.append(button);\n          return container;\n        },\n        onChange(file) {\n          const target = activeTargetRef.current;\n          if (target == null) {\n            return;\n          }\n          editsRef.current.set(target, file.contents);\n        },\n      }),\n    []\n  );\n\n  // The changes tree shows one file at a time; selecting a file swaps the\n  // active surface.\n  const openFile = useCallback((path: string) => {\n    setActivePath(path);\n  }, []);\n\n  const activeFile: AuiChangedFile | null = useMemo(\n    () =>\n      activePath != null\n        ? (session.changedFiles.find((file) => file.path === activePath) ??\n          null)\n        : null,\n    [session, activePath]\n  );\n\n  const editKey = activeFile?.path ?? '';\n\n  // Rebuild the diff surface whenever the active file changes, substituting any\n  // persisted edits for the snapshot's `after`.\n  const fileDiff = useMemo(\n    () =>\n      activeFile != null\n        ? getFileDiff(activeFile, editsRef.current.get(editKey))\n        : null,\n    [activeFile, editKey]\n  );\n\n  // Server-rendered, already-highlighted HTML for the active diff. Only safe\n  // when the file is unedited so the markup matches `fileDiff`.\n  const activePrerenderedHTML =\n    activePath != null && editsRef.current.get(editKey) == null\n      ? prerenderedDiffs?.[activePath]\n      : undefined;\n\n  const breadcrumbSegments = activePath != null ? activePath.split('/') : [];\n\n  // Re-adopt the jade/red line-number override whenever the diff surface is\n  // rebuilt (each file switch remounts the diffs-container with a fresh shadow\n  // root).\n  const surfaceWrapRef = useRef<HTMLDivElement | null>(null);\n  useEffect(() => {\n    const sheet = getLineNumberColorSheet();\n    if (sheet == null) {\n      return;\n    }\n    const container = surfaceWrapRef.current?.querySelector('.aui-surface');\n    const shadowRoot = container?.shadowRoot;\n    if (shadowRoot == null) {\n      return;\n    }\n    if (!shadowRoot.adoptedStyleSheets.includes(sheet)) {\n      shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];\n    }\n  }, [activePath]);\n\n  return (\n    <EditorProvider editor={editor}>\n      <div className=\"aui\" data-theme-type=\"dark\" data-embedded=\"true\">\n        <div className=\"aui-body\">\n          <section className=\"aui-center\">\n            <header className=\"aui-center-header\">\n              <nav className=\"aui-breadcrumb\" aria-label=\"File path\">\n                {breadcrumbSegments.length > 0 ? (\n                  breadcrumbSegments.map((segment, index) => (\n                    <span\n                      // Path segments are positional; index keys are stable here.\n                      key={`${segment}-${String(index)}`}\n                      className=\"aui-crumb\"\n                      data-leaf={\n                        index === breadcrumbSegments.length - 1\n                          ? 'true'\n                          : undefined\n                      }\n                    >\n                      {segment}\n                    </span>\n                  ))\n                ) : (\n                  <span className=\"aui-crumb\">No file selected</span>\n                )}\n              </nav>\n            </header>\n\n            <div className=\"aui-surface-wrap\" ref={surfaceWrapRef}>\n              {activeFile != null && fileDiff != null ? (\n                <FileDiff\n                  key={activePath}\n                  fileDiff={fileDiff}\n                  className=\"aui-surface\"\n                  options={{\n                    theme,\n                    themeType: 'dark',\n                    disableFileHeader: true,\n                    overflow: 'wrap',\n                    diffStyle: 'unified',\n                  }}\n                  prerenderedHTML={activePrerenderedHTML}\n                  contentEditable\n                />\n              ) : (\n                <div className=\"aui-empty\">\n                  Select a changed file to review.\n                </div>\n              )}\n            </div>\n\n            <div className=\"aui-composer\">\n              <textarea\n                className=\"aui-composer-input\"\n                placeholder=\"Ask for changes, @mention files, or run commands…\"\n                rows={2}\n                disabled\n              />\n              <div className=\"aui-composer-toolbar\">\n                <button type=\"button\" className=\"aui-composer-select\" disabled>\n                  <IconSparkle className=\"opacity-50\" />\n                  Agent\n                  <IconChevronSm className=\"opacity-50\" />\n                </button>\n                <button type=\"button\" className=\"aui-composer-select\" disabled>\n                  Mythos 5\n                  <IconChevronSm className=\"opacity-50\" />\n                </button>\n                <button\n                  type=\"button\"\n                  className=\"aui-composer-send ml-auto\"\n                  aria-label=\"Send\"\n                  disabled\n                >\n                  <IconArrow className=\"rotate-[90deg]\" />\n                </button>\n              </div>\n            </div>\n          </section>\n\n          <aside className=\"aui-changes\">\n            <div className=\"aui-changes-tabs\" role=\"tablist\">\n              <button type=\"button\" role=\"tab\" disabled>\n                All files\n              </button>\n              <button type=\"button\" role=\"tab\" aria-selected=\"true\">\n                Changes\n              </button>\n              <button type=\"button\" role=\"tab\" disabled>\n                Checks\n              </button>\n            </div>\n            <ChangesTree\n              session={session}\n              activePath={activePath}\n              onSelect={openFile}\n            />\n          </aside>\n        </div>\n      </div>\n    </EditorProvider>\n  );\n}\n",
+        additions: 11,
+        deletions: 26,
+      },
+      {
+        path: 'apps/docs/app/(diffs)/_home/AgentDemoSection.tsx',
+        status: 'modified',
+        before:
+          '\'use client\';\n\nimport { IconColorDark, IconColorLight } from \'@pierre/icons\';\nimport { useState } from \'react\';\n\nimport { AgentUi, type ThemeType } from \'./AgentUi\';\nimport { FeatureHeader } from \'@/components/FeatureHeader\';\nimport { ButtonGroup, ButtonGroupItem } from \'@/components/ui/button-group\';\n\ninterface AgentDemoSectionProps {\n  // Server-rendered, already-highlighted diff HTML keyed by file path. Built in\n  // Home.tsx so the embedded card paints highlighted on first load and hydrates\n  // without an SSR/client mismatch.\n  prerenderedDiffs: Record<string, string>;\n}\n\n// Homepage embed of the /aui agent review surface. It trims the standalone page\n// down to a single-file, diff-only card and lifts the light/dark control out\n// into an icon-only button group beside the section heading. It reuses the\n// homepage\'s shared worker pool, so it highlights with the pool\'s default\n// themes rather than the /aui page\'s soft themes.\nexport function AgentDemoSection({ prerenderedDiffs }: AgentDemoSectionProps) {\n  // The homepage demo always opens in dark mode regardless of the docs theme;\n  // visitors can flip it with the button group above the card.\n  const [themeType, setThemeType] = useState<ThemeType>(\'dark\');\n\n  return (\n    <div className="space-y-5">\n      <div className="flex flex-wrap items-start justify-between gap-4">\n        <FeatureHeader\n          id="edit"\n          isBeta\n          title="Edit diffs and code"\n          description={\n            <>\n              Enable edit mode in any <code>File</code> or <code>FileDiff</code>{\' \'}\n              component with the <code>EditorProvider</code>. Includes support\n              for selection management, auto-indention, undo history,\n              find-in-file, lint markers, and more. Pairs nicely with{\' \'}\n              <code>@pierre/trees</code> for{\' \'}\n              <abbr title="Agentic User Interface">AUI</abbr> style experiences.\n            </>\n          }\n        />\n        <ButtonGroup\n          value={themeType}\n          onValueChange={(value) => setThemeType(value as ThemeType)}\n          aria-label="Theme"\n        >\n          <ButtonGroupItem value="light" aria-label="Light">\n            <IconColorLight className="size-4" />\n          </ButtonGroupItem>\n          <ButtonGroupItem value="dark" aria-label="Dark">\n            <IconColorDark className="size-4" />\n          </ButtonGroupItem>\n        </ButtonGroup>\n      </div>\n\n      <AgentUi themeType={themeType} prerenderedDiffs={prerenderedDiffs} />\n    </div>\n  );\n}\n',
+        after:
+          "import { AgentUi } from './AgentUi';\nimport { FeatureHeader } from '@/components/FeatureHeader';\n\ninterface AgentDemoSectionProps {\n  // Server-rendered, already-highlighted diff HTML keyed by file path. Built in\n  // Home.tsx so the embedded card paints highlighted on first load and hydrates\n  // without an SSR/client mismatch.\n  prerenderedDiffs: Record<string, string>;\n}\n\n// Homepage embed of the agent-review surface: a single-file, diff-only card.\n// Always dark (the snapshot is prerendered dark and matching it avoids theme\n// flashing), so there's no light/dark toggle. It reuses the homepage's shared\n// worker pool for highlighting.\nexport function AgentDemoSection({ prerenderedDiffs }: AgentDemoSectionProps) {\n  return (\n    <div className=\"space-y-5\">\n      <FeatureHeader\n        id=\"edit\"\n        isBeta\n        title=\"Edit diffs and code\"\n        description={\n          <>\n            Enable edit mode in any <code>File</code> or <code>FileDiff</code>{' '}\n            component with the <code>EditorProvider</code>. Includes support for\n            selection management, auto-indention, undo history, find-in-file,\n            lint markers, and more. Pairs nicely with <code>@pierre/trees</code>{' '}\n            for <abbr title=\"Agentic User Interface\">AUI</abbr> style\n            experiences.\n          </>\n        }\n      />\n\n      <AgentUi prerenderedDiffs={prerenderedDiffs} />\n    </div>\n  );\n}\n",
+        additions: 21,
+        deletions: 46,
+      },
+      {
+        path: 'apps/docs/app/(diffs)/_home/mockData.ts',
+        status: 'modified',
+        before:
+          "import { type FileDiffMetadata, parseDiffFromFile } from '@pierre/diffs';\nimport type { GitStatus, GitStatusEntry } from '@pierre/trees';\n\nimport { GENERATED_AUI_SESSIONS } from './mockData.generated';\n\n// Lifecycle of an agent run.\nexport type AuiSessionStatus = 'running' | 'review' | 'done';\n\n// A single file the agent changed in a session. `before`/`after` are full file\n// snapshots (real repo contents for the live session) from which we derive the\n// diff, the tree's git status, and the +/- decoration counts.\nexport interface AuiChangedFile {\n  path: string;\n  status: GitStatus;\n  before: string;\n  after: string;\n  additions: number;\n  deletions: number;\n}\n\nexport interface AuiSession {\n  id: string;\n  title: string;\n  subtitle?: string;\n  status: AuiSessionStatus;\n  changedFiles: AuiChangedFile[];\n}\n\n// The live session(s) come from the generated snapshot of this repo.\nexport const AUI_SESSIONS: AuiSession[] = GENERATED_AUI_SESSIONS;\n\n// The flat path list the FileTree renders for a session.\nexport function getSessionPaths(session: AuiSession): string[] {\n  return session.changedFiles.map((file) => file.path);\n}\n\n// Every directory id (FileTree dir ids end with `/`) that appears in a session,\n// used to seed the tree fully expanded so all changed files are visible.\nexport function getSessionDirectoryPaths(session: AuiSession): string[] {\n  const dirs = new Set<string>();\n  for (const file of session.changedFiles) {\n    const segments = file.path.split('/');\n    let prefix = '';\n    for (let index = 0; index < segments.length - 1; index += 1) {\n      prefix += `${segments[index]}/`;\n      dirs.add(prefix);\n    }\n  }\n  return [...dirs];\n}\n\n// The git status colouring the FileTree applies per row.\nexport function getSessionGitStatus(session: AuiSession): GitStatusEntry[] {\n  return session.changedFiles.map((file) => ({\n    path: file.path,\n    status: file.status,\n  }));\n}\n\n// Builds the diff metadata (@pierre/diffs) for one changed file. `nextAfter`\n// lets the caller substitute live in-editor edits for the snapshot's `after`.\nexport function getFileDiff(\n  file: AuiChangedFile,\n  nextAfter?: string\n): FileDiffMetadata {\n  return parseDiffFromFile(\n    { name: file.path, contents: file.before },\n    { name: file.path, contents: nextAfter ?? file.after }\n  );\n}\n",
+        after:
+          "import { type FileDiffMetadata, parseDiffFromFile } from '@pierre/diffs';\nimport type { GitStatus, GitStatusEntry } from '@pierre/trees';\n\nimport { GENERATED_AUI_SESSIONS } from './mockData.generated';\n\n// Lifecycle of an agent run.\nexport type AuiSessionStatus = 'running' | 'review' | 'done';\n\n// A single file the agent changed in a session. `before`/`after` are full file\n// snapshots (real repo contents for the live session) from which we derive the\n// diff, the tree's git status, and the +/- decoration counts.\nexport interface AuiChangedFile {\n  path: string;\n  status: GitStatus;\n  before: string;\n  after: string;\n  additions: number;\n  deletions: number;\n}\n\nexport interface AuiSession {\n  id: string;\n  title: string;\n  subtitle?: string;\n  status: AuiSessionStatus;\n  changedFiles: AuiChangedFile[];\n}\n\n// The live session(s) come from the generated snapshot of this repo.\nexport const AUI_SESSIONS: AuiSession[] = GENERATED_AUI_SESSIONS;\n\n// The flat path list the FileTree renders for a session.\nexport function getSessionPaths(session: AuiSession): string[] {\n  return session.changedFiles.map((file) => file.path);\n}\n\n// Every directory id (FileTree dir ids end with `/`) that appears in a session,\n// used to seed the tree fully expanded so all changed files are visible.\nexport function getSessionDirectoryPaths(session: AuiSession): string[] {\n  const dirs = new Set<string>();\n  for (const file of session.changedFiles) {\n    const segments = file.path.split('/');\n    let prefix = '';\n    for (let index = 0; index < segments.length - 1; index += 1) {\n      prefix += `${segments[index]}/`;\n      dirs.add(prefix);\n    }\n  }\n  return [...dirs];\n}\n\n// The git status colouring the FileTree applies per row.\nexport function getSessionGitStatus(session: AuiSession): GitStatusEntry[] {\n  return session.changedFiles.map((file) => ({\n    path: file.path,\n    status: file.status,\n  }));\n}\n\n// Builds the diff metadata (@pierre/diffs) for one changed file. `nextAfter`\n// lets the caller substitute live in-editor edits for the snapshot's `after`.\nexport function getFileDiff(\n  file: AuiChangedFile,\n  nextAfter?: string\n): FileDiffMetadata {\n  return parseDiffFromFile(\n    { name: file.path, contents: file.before },\n    { name: file.path, contents: nextAfter ?? file.after }\n  );\n}\n",
+        additions: 70,
+        deletions: 0,
+      },
+      {
+        path: 'apps/docs/app/(diffs)/_home/agent-ui.css',
+        status: 'modified',
+        before:
+          "/* Scoped agent-UI chrome for the homepage agent-review demo. Everything lives\n   under `.aui` so it never leaks into the rest of the docs app. Colours use\n   light-dark(); the `.aui[data-theme-type]` rules pin color-scheme to the\n   demo's own toggle. The UI sits in normal page flow as a fixed-height card. */\n.aui {\n  --ide-surface: light-dark(#ffffff, #070707);\n  --ide-panel: light-dark(#f8f8f8, #0f0f10);\n  --ide-border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.07));\n  --ide-fg: light-dark(#18181b, #e4e4e7);\n  --ide-fg-muted: light-dark(#71717a, #a1a1aa);\n  --ide-tab-active: light-dark(#ffffff, #1c1c1f);\n  --ide-tab-hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.05));\n  --ide-accent: light-dark(#2563eb, #3b82f6);\n\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  height: 560px;\n  max-height: 72vh;\n  border: 1px solid var(--ide-border);\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);\n  background-color: var(--ide-surface);\n  color: var(--ide-fg);\n  font-family: var(--font-geist-sans), system-ui, sans-serif;\n  font-size: 13px;\n}\n\n.aui[data-theme-type='light'] {\n  color-scheme: light;\n}\n\n.aui[data-theme-type='dark'] {\n  color-scheme: dark;\n}\n\n/* Give the demo more room on desktop. */\n@media (width >= 1024px) {\n  .aui {\n    height: 760px;\n    max-height: 75vh;\n  }\n}\n\n.aui button {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.aui code {\n  font-family: var(--font-berkeley-mono), monospace;\n  font-size: 0.9em;\n  padding: 1px 4px;\n  border-radius: 4px;\n  background-color: var(--ide-tab-hover);\n}\n\n.aui-body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 380px;\n  min-height: 0;\n}\n\n/* --- Center column ------------------------------------------------------- */\n\n.aui-center {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n\n.aui-center-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 44px;\n  padding-inline: 12px;\n  border-bottom: 1px solid var(--ide-border);\n}\n\n.aui-breadcrumb {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  font-size: 14px;\n  color: var(--ide-fg-muted);\n}\n\n.aui-crumb:not(:last-child)::after {\n  content: '/';\n  margin-inline: 2px;\n  opacity: 0.5;\n}\n\n.aui-crumb[data-leaf='true'] {\n  color: var(--ide-fg);\n  font-weight: 500;\n}\n\n.aui-surface-wrap {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.aui-surface {\n  display: block;\n}\n\n.aui-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--ide-fg-muted);\n}\n\n.aui-selection-action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 0;\n}\n\n.aui-selection-action button {\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);\n  background-color: color-mix(in srgb, currentColor 8%, transparent);\n  color: inherit;\n  font-size: 12px;\n}\n\n.aui-composer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 12px;\n  padding: 10px 10px 8px;\n  border: 1px solid var(--ide-border);\n  border-radius: 12px;\n  background-color: var(--ide-panel);\n}\n\n.aui-composer:focus-within {\n  border-color: var(--ide-accent);\n}\n\n.aui-composer-input {\n  width: 100%;\n  min-height: 40px;\n  padding: 2px 4px;\n  border: none;\n  background: none;\n  color: var(--ide-fg);\n  font-size: 13px;\n  font-family: inherit;\n  line-height: 1.5;\n  resize: none;\n}\n\n.aui-composer-input:focus {\n  outline: none;\n}\n\n.aui-composer-input::placeholder {\n  color: var(--ide-fg-muted);\n}\n\n.aui-composer-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.aui-composer-select,\n.aui-composer-send {\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  border-radius: 9px;\n  background: none;\n  color: var(--ide-fg-muted);\n\n  &[disabled] {\n    cursor: default;\n  }\n}\n\n.aui-composer-select {\n  gap: 5px;\n  height: 28px;\n  padding-inline: 8px;\n  background-color: var(--ide-tab-hover);\n  font-size: 12px;\n}\n\n.aui-composer-send {\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  background-color: var(--ide-accent);\n  color: #ffffff;\n\n  &[disabled] {\n    opacity: 0.6;\n  }\n}\n\n/* --- Right changes panel ------------------------------------------------- */\n\n.aui-changes {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  border-left: 1px solid var(--ide-border);\n  background-color: var(--ide-panel);\n}\n\n.aui-changes-tabs {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 44px;\n  padding-inline: 10px;\n  border-bottom: 1px solid var(--ide-border);\n}\n\n.aui-changes-tabs button {\n  padding: 4px 10px;\n  border: none;\n  border-radius: 6px;\n  background-color: transparent;\n  color: var(--ide-fg-muted);\n  font-size: 12px;\n}\n\n.aui-changes-tabs button[aria-selected='true'] {\n  background-color: var(--ide-tab-active);\n  color: var(--ide-fg);\n}\n\n.aui-changes-tabs button[disabled] {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.aui-tree {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding-top: 6px;\n}\n\n/* --- Mobile -------------------------------------------------------------- */\n\n/* On narrow screens there isn't room for the changes sidebar, so collapse to a\n   single full-width column showing just the active file. Placed last so it wins\n   over the base `.aui-body`/`.aui-changes` rules above (media queries don't add\n   specificity). */\n@media (width < 640px) {\n  .aui-body {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .aui-changes {\n    display: none;\n  }\n}\n",
+        after:
+          "/* Scoped agent-UI chrome for the homepage agent-review demo. Everything lives\n   under `.aui` so it never leaks into the rest of the docs app. Colours use\n   light-dark(); the `.aui[data-theme-type]` rules pin color-scheme to the\n   demo's own toggle. The UI sits in normal page flow as a fixed-height card. */\n.aui {\n  --ide-surface: light-dark(#ffffff, #070707);\n  --ide-panel: light-dark(#f8f8f8, #0f0f10);\n  --ide-border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.07));\n  --ide-fg: light-dark(#18181b, #e4e4e7);\n  --ide-fg-muted: light-dark(#71717a, #a1a1aa);\n  --ide-tab-active: light-dark(#ffffff, #1c1c1f);\n  --ide-tab-hover: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.05));\n  --ide-accent: light-dark(#2563eb, #3b82f6);\n\n  display: grid;\n  grid-template-rows: minmax(0, 1fr);\n  height: 560px;\n  max-height: 72vh;\n  border: 1px solid var(--ide-border);\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);\n  background-color: var(--ide-surface);\n  color: var(--ide-fg);\n  font-family: var(--font-geist-sans), system-ui, sans-serif;\n  font-size: 13px;\n}\n\n.aui[data-theme-type='light'] {\n  color-scheme: light;\n}\n\n.aui[data-theme-type='dark'] {\n  color-scheme: dark;\n}\n\n/* Give the demo more room on desktop. */\n@media (width >= 1024px) {\n  .aui {\n    height: 760px;\n    max-height: 75vh;\n  }\n}\n\n.aui button {\n  font-family: inherit;\n  cursor: pointer;\n}\n\n.aui code {\n  font-family: var(--font-berkeley-mono), monospace;\n  font-size: 0.9em;\n  padding: 1px 4px;\n  border-radius: 4px;\n  background-color: var(--ide-tab-hover);\n}\n\n.aui-body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 380px;\n  min-height: 0;\n}\n\n/* --- Center column ------------------------------------------------------- */\n\n.aui-center {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  min-height: 0;\n}\n\n.aui-center-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 44px;\n  padding-inline: 12px;\n  border-bottom: 1px solid var(--ide-border);\n}\n\n.aui-breadcrumb {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  overflow: hidden;\n  font-size: 14px;\n  color: var(--ide-fg-muted);\n}\n\n.aui-crumb:not(:last-child)::after {\n  content: '/';\n  margin-inline: 2px;\n  opacity: 0.5;\n}\n\n.aui-crumb[data-leaf='true'] {\n  color: var(--ide-fg);\n  font-weight: 500;\n}\n\n.aui-surface-wrap {\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.aui-surface {\n  display: block;\n}\n\n.aui-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  color: var(--ide-fg-muted);\n}\n\n.aui-selection-action {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 8px 0;\n}\n\n.aui-selection-action button {\n  padding: 4px 10px;\n  border-radius: 6px;\n  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);\n  background-color: color-mix(in srgb, currentColor 8%, transparent);\n  color: inherit;\n  font-size: 12px;\n}\n\n.aui-composer {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  margin: 12px;\n  padding: 10px 10px 8px;\n  border: 1px solid var(--ide-border);\n  border-radius: 12px;\n  background-color: var(--ide-panel);\n}\n\n.aui-composer:focus-within {\n  border-color: var(--ide-accent);\n}\n\n.aui-composer-input {\n  width: 100%;\n  min-height: 40px;\n  padding: 2px 4px;\n  border: none;\n  background: none;\n  color: var(--ide-fg);\n  font-size: 13px;\n  font-family: inherit;\n  line-height: 1.5;\n  resize: none;\n}\n\n.aui-composer-input:focus {\n  outline: none;\n}\n\n.aui-composer-input::placeholder {\n  color: var(--ide-fg-muted);\n}\n\n.aui-composer-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.aui-composer-select,\n.aui-composer-send {\n  display: inline-flex;\n  align-items: center;\n  border: 0;\n  border-radius: 9px;\n  background: none;\n  color: var(--ide-fg-muted);\n\n  &[disabled] {\n    cursor: default;\n  }\n}\n\n.aui-composer-select {\n  gap: 5px;\n  height: 28px;\n  padding-inline: 8px;\n  background-color: var(--ide-tab-hover);\n  font-size: 12px;\n}\n\n.aui-composer-send {\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  background-color: var(--ide-accent);\n  color: #ffffff;\n\n  &[disabled] {\n    opacity: 0.6;\n  }\n}\n\n/* --- Right changes panel ------------------------------------------------- */\n\n.aui-changes {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  border-left: 1px solid var(--ide-border);\n  background-color: var(--ide-panel);\n}\n\n.aui-changes-tabs {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 44px;\n  padding-inline: 10px;\n  border-bottom: 1px solid var(--ide-border);\n}\n\n.aui-changes-tabs button {\n  padding: 4px 10px;\n  border: none;\n  border-radius: 6px;\n  background-color: transparent;\n  color: var(--ide-fg-muted);\n  font-size: 12px;\n}\n\n.aui-changes-tabs button[aria-selected='true'] {\n  background-color: var(--ide-tab-active);\n  color: var(--ide-fg);\n}\n\n.aui-changes-tabs button[disabled] {\n  cursor: default;\n  opacity: 0.6;\n}\n\n.aui-tree {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding-top: 6px;\n}\n\n/* --- Mobile -------------------------------------------------------------- */\n\n/* On narrow screens there isn't room for the changes sidebar, so collapse to a\n   single full-width column showing just the active file. Placed last so it wins\n   over the base `.aui-body`/`.aui-changes` rules above (media queries don't add\n   specificity). */\n@media (width < 640px) {\n  .aui-body {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  .aui-changes {\n    display: none;\n  }\n}\n",
+        additions: 274,
+        deletions: 0,
+      },
+      {
+        path: 'apps/docs/scripts/generate-aui-mock-data.ts',
+        status: 'modified',
+        before:
+          "#!/usr/bin/env bun\nimport { execFileSync } from 'node:child_process';\nimport { readFileSync, writeFileSync } from 'node:fs';\nimport { resolve as resolvePath } from 'node:path';\n\n// Builds the canned data for the homepage agent-review demo from THIS repo, so\n// the diffs shown in the card are real code. The single live session is\n// self-referential: it's the agent \"building\" the demo, and its changed files\n// are the actual source files the demo is made of.\n//\n// Output is a committed snapshot (no runtime fs/git, so it works on Vercel). It\n// can drift from the live repo over time; re-run to refresh:\n//\n//   bun apps/docs/scripts/generate-aui-mock-data.ts\n\nconst repoRoot = resolvePath(import.meta.dirname, '../../..');\nconst outputPath = resolvePath(\n  repoRoot,\n  'apps/docs/app/(diffs)/_home/mockData.generated.ts'\n);\n\n// The source files that make up the homepage agent-review demo. The generated\n// blob itself is deliberately excluded to avoid self-nesting and bloat.\nconst SELF_SESSION_FILES = [\n  'apps/docs/app/(diffs)/_home/AgentUi.tsx',\n  'apps/docs/app/(diffs)/_home/AgentDemoSection.tsx',\n  'apps/docs/app/(diffs)/_home/mockData.ts',\n  'apps/docs/app/(diffs)/_home/agent-ui.css',\n  'apps/docs/scripts/generate-aui-mock-data.ts',\n  '.agents/skills/agent-ui/SKILL.md',\n] as const;\n\ninterface GeneratedChangedFile {\n  path: string;\n  status: 'added' | 'modified';\n  before: string;\n  after: string;\n  additions: number;\n  deletions: number;\n}\n\ninterface GeneratedSession {\n  id: string;\n  title: string;\n  subtitle: string;\n  status: 'running' | 'review' | 'done';\n  changedFiles: GeneratedChangedFile[];\n}\n\n// Returns the file contents at HEAD, or null when the path is new (not tracked\n// in the last commit).\nfunction gitShowHead(path: string): string | null {\n  try {\n    return execFileSync('git', ['show', `HEAD:${path}`], {\n      cwd: repoRoot,\n      encoding: 'utf8',\n      maxBuffer: 64 * 1024 * 1024,\n    });\n  } catch {\n    return null;\n  }\n}\n\n// Parses `git diff --numstat HEAD` for a single path. Returns null when git has\n// nothing to report (e.g. an untracked new file).\nfunction gitNumstat(\n  path: string\n): { additions: number; deletions: number } | null {\n  try {\n    const out = execFileSync('git', ['diff', '--numstat', 'HEAD', '--', path], {\n      cwd: repoRoot,\n      encoding: 'utf8',\n    }).trim();\n    if (out.length === 0) {\n      return null;\n    }\n    const [additions, deletions] = out.split('\\n')[0].split('\\t');\n    if (additions === '-' || deletions === '-') {\n      return null;\n    }\n    return { additions: Number(additions), deletions: Number(deletions) };\n  } catch {\n    return null;\n  }\n}\n\nfunction countLines(contents: string): number {\n  if (contents.length === 0) {\n    return 0;\n  }\n  const lines = contents.split('\\n');\n  return contents.endsWith('\\n') ? lines.length - 1 : lines.length;\n}\n\nfunction buildChangedFile(path: string): GeneratedChangedFile {\n  const after = readFileSync(resolvePath(repoRoot, path), 'utf8');\n  const head = gitShowHead(path);\n  const status: GeneratedChangedFile['status'] =\n    head == null ? 'added' : 'modified';\n  const before = head ?? '';\n  const numstat = gitNumstat(path);\n  const additions = numstat?.additions ?? countLines(after);\n  const deletions = numstat?.deletions ?? 0;\n  return { path, status, before, after, additions, deletions };\n}\n\nconst selfSession: GeneratedSession = {\n  id: 'aui-self',\n  title: 'Add agent-review demo',\n  subtitle: 'Ready for review',\n  status: 'review',\n  changedFiles: SELF_SESSION_FILES.map((path) => {\n    console.log(`[aui] capturing ${path}`);\n    return buildChangedFile(path);\n  }),\n};\n\nconst sessions: GeneratedSession[] = [selfSession];\n\nconst header = `// AUTO-GENERATED by apps/docs/scripts/generate-aui-mock-data.ts. Do not edit by\n// hand. Re-run the generator to refresh this snapshot from the live repo.\nimport type { AuiSession } from './mockData';\n\nexport const GENERATED_AUI_SESSIONS: AuiSession[] = `;\n\nwriteFileSync(\n  outputPath,\n  `${header}${JSON.stringify(sessions, null, 2)};\\n`,\n  'utf8'\n);\n\nconst totalFiles = sessions.reduce(\n  (count, session) => count + session.changedFiles.length,\n  0\n);\nconsole.log(\n  `[aui] wrote ${String(sessions.length)} session(s), ${String(totalFiles)} files -> ${outputPath}`\n);\n",
+        after:
+          "#!/usr/bin/env bun\nimport { execFileSync } from 'node:child_process';\nimport { readFileSync, writeFileSync } from 'node:fs';\nimport { resolve as resolvePath } from 'node:path';\n\n// Builds the canned data for the homepage agent-review demo from THIS repo, so\n// the diffs shown in the card are real code. The single live session is\n// self-referential: it's the agent \"building\" the demo, and its changed files\n// are the actual source files the demo is made of.\n//\n// Output is a committed snapshot (no runtime fs/git, so it works on Vercel). It\n// can drift from the live repo over time; re-run to refresh:\n//\n//   bun apps/docs/scripts/generate-aui-mock-data.ts\n\nconst repoRoot = resolvePath(import.meta.dirname, '../../..');\nconst outputPath = resolvePath(\n  repoRoot,\n  'apps/docs/app/(diffs)/_home/mockData.generated.ts'\n);\n\n// The source files that make up the homepage agent-review demo. The generated\n// blob itself is deliberately excluded to avoid self-nesting and bloat.\nconst SELF_SESSION_FILES = [\n  'apps/docs/app/(diffs)/_home/AgentUi.tsx',\n  'apps/docs/app/(diffs)/_home/AgentDemoSection.tsx',\n  'apps/docs/app/(diffs)/_home/mockData.ts',\n  'apps/docs/app/(diffs)/_home/agent-ui.css',\n  'apps/docs/scripts/generate-aui-mock-data.ts',\n  '.agents/skills/agent-ui/SKILL.md',\n] as const;\n\ninterface GeneratedChangedFile {\n  path: string;\n  status: 'added' | 'modified';\n  before: string;\n  after: string;\n  additions: number;\n  deletions: number;\n}\n\ninterface GeneratedSession {\n  id: string;\n  title: string;\n  subtitle: string;\n  status: 'running' | 'review' | 'done';\n  changedFiles: GeneratedChangedFile[];\n}\n\n// Returns the file contents at HEAD, or null when the path is new (not tracked\n// in the last commit).\nfunction gitShowHead(path: string): string | null {\n  try {\n    return execFileSync('git', ['show', `HEAD:${path}`], {\n      cwd: repoRoot,\n      encoding: 'utf8',\n      maxBuffer: 64 * 1024 * 1024,\n    });\n  } catch {\n    return null;\n  }\n}\n\n// Parses `git diff --numstat HEAD` for a single path. Returns null when git has\n// nothing to report (e.g. an untracked new file).\nfunction gitNumstat(\n  path: string\n): { additions: number; deletions: number } | null {\n  try {\n    const out = execFileSync('git', ['diff', '--numstat', 'HEAD', '--', path], {\n      cwd: repoRoot,\n      encoding: 'utf8',\n    }).trim();\n    if (out.length === 0) {\n      return null;\n    }\n    const [additions, deletions] = out.split('\\n')[0].split('\\t');\n    if (additions === '-' || deletions === '-') {\n      return null;\n    }\n    return { additions: Number(additions), deletions: Number(deletions) };\n  } catch {\n    return null;\n  }\n}\n\nfunction countLines(contents: string): number {\n  if (contents.length === 0) {\n    return 0;\n  }\n  const lines = contents.split('\\n');\n  return contents.endsWith('\\n') ? lines.length - 1 : lines.length;\n}\n\nfunction buildChangedFile(path: string): GeneratedChangedFile {\n  const after = readFileSync(resolvePath(repoRoot, path), 'utf8');\n  const head = gitShowHead(path);\n  const status: GeneratedChangedFile['status'] =\n    head == null ? 'added' : 'modified';\n  const before = head ?? '';\n  const numstat = gitNumstat(path);\n  const additions = numstat?.additions ?? countLines(after);\n  const deletions = numstat?.deletions ?? 0;\n  return { path, status, before, after, additions, deletions };\n}\n\nconst selfSession: GeneratedSession = {\n  id: 'aui-self',\n  title: 'Add agent-review demo',\n  subtitle: 'Ready for review',\n  status: 'review',\n  changedFiles: SELF_SESSION_FILES.map((path) => {\n    console.log(`[aui] capturing ${path}`);\n    return buildChangedFile(path);\n  }),\n};\n\nconst sessions: GeneratedSession[] = [selfSession];\n\nconst header = `// AUTO-GENERATED by apps/docs/scripts/generate-aui-mock-data.ts. Do not edit by\n// hand. Re-run the generator to refresh this snapshot from the live repo.\nimport type { AuiSession } from './mockData';\n\nexport const GENERATED_AUI_SESSIONS: AuiSession[] = `;\n\nwriteFileSync(\n  outputPath,\n  `${header}${JSON.stringify(sessions, null, 2)};\\n`,\n  'utf8'\n);\n\nconst totalFiles = sessions.reduce(\n  (count, session) => count + session.changedFiles.length,\n  0\n);\nconsole.log(\n  `[aui] wrote ${String(sessions.length)} session(s), ${String(totalFiles)} files -> ${outputPath}`\n);\n",
+        additions: 138,
+        deletions: 0,
+      },
+      {
+        path: '.agents/skills/agent-ui/SKILL.md',
+        status: 'modified',
+        before:
+          "---\nname: agent-ui\ndescription:\n  Use when building or changing the homepage agent-review demo in apps/docs, its\n  mock-data generator, the Conductor-style diff/changes layout, or editable\n  diffs wiring @pierre/diffs FileDiff with @pierre/trees FileTree in the Next.js\n  docs app.\n---\n\n# Agent UI (homepage demo)\n\nA Conductor-style agent-review card embedded on the diffs homepage (the first\nsection below the hero). It frames the editor as an agent window: a center\neditable diff viewer (`@pierre/diffs`) and a right changed-files panel\n(`@pierre/trees`). All data is canned, so it runs on Vercel without runtime\nfilesystem/git access. There is no standalone route — the component is only\nrendered as a homepage section.\n\nThe demo is intentionally self-referential: the single live session, \"Add\nagent-review demo\", shows the actual source files the demo is built from.\n\n## Files\n\n- `apps/docs/app/(diffs)/_home/AgentUi.tsx` — `'use client'`. The interactive\n  component (`AgentUi`). Wraps the diff surface in `EditorProvider`, renders the\n  breadcrumb, the editable `FileDiff`, the static composer, and the right\n  `ChangesTree`. Theme is controlled by the parent via the `themeType` prop.\n- `apps/docs/app/(diffs)/_home/AgentDemoSection.tsx` — `'use client'`. The\n  homepage section wrapper: `FeatureHeader`, an icon-only light/dark\n  `ButtonGroup` (defaults the card to dark), and `<AgentUi />`.\n- `apps/docs/app/(diffs)/_home/Home.tsx` — `AgentReviewSection` is an async\n  server component that SSR-prerenders each changed file's diff\n  (`preloadFileDiff`, dark theme) and passes them to `AgentDemoSection` as\n  `prerenderedDiffs`.\n- `apps/docs/app/(diffs)/_home/mockData.ts` — `AuiSession` / `AuiChangedFile`\n  types, derive helpers (`getSessionPaths`, `getSessionDirectoryPaths`,\n  `getSessionGitStatus`, `getFileDiff`), and the exported `AUI_SESSIONS`.\n- `apps/docs/app/(diffs)/_home/mockData.generated.ts` — AUTO-GENERATED snapshot\n  of real repo file contents. Do not edit by hand.\n- `apps/docs/scripts/generate-aui-mock-data.ts` — bun + git generator that\n  writes `mockData.generated.ts`.\n- `apps/docs/app/(diffs)/_home/agent-ui.css` — all chrome, scoped under `.aui`\n  so it never leaks into the rest of the docs app.\n\n## Mock data\n\nRegenerate the snapshot from the live repo:\n\n```bash\nbun apps/docs/scripts/generate-aui-mock-data.ts\n```\n\nThe generator enumerates `SELF_SESSION_FILES` (the demo's source files,\nexcluding the generated blob itself). For each file: `after` = on-disk contents,\n`before` = `git show HEAD:<path>` (or `''` if new), `status` = `added` |\n`modified`, and `additions`/`deletions` from `git diff --numstat HEAD` (falling\nback to a line count for untracked new files). It is a committed snapshot —\ndrift over time is acceptable; re-run to refresh.\n\n## Editable diffs\n\n- Worker pool: the homepage provides a shared `WorkerPoolContext` (see\n  `_components/WorkerPoolContext.tsx`) initialized with `DEFAULT_THEMES` and\n  `useTokenTransformer: true` (required for editing). `AgentUi` defaults its\n  `theme` prop to `DEFAULT_THEMES` to match that pool.\n- The center surface is the React `FileDiff` with `contentEditable` inside\n  `EditorProvider`, which auto-attaches the editor. It is keyed by the active\n  path so it remounts when the file changes. Options: `disableFileHeader`,\n  `overflow: 'wrap'`, `diffStyle: 'unified'`.\n- `getFileDiff(file, nextAfter)` builds `FileDiffMetadata` via\n  `parseDiffFromFile(before, after)`. Edits are persisted in a ref keyed by path\n  (the editor's debounced `onChange` has no path arg, so the live target is\n  tracked in `activeTargetRef`), so switching files keeps the agent's tweaked\n  output.\n- SSR: `AgentUi` reuses `prerenderedDiffs[path]` as `prerenderedHTML` only while\n  the demo is in dark mode (the snapshot is dark) and the file is unedited, so\n  the card paints highlighted on first load and hydrates cleanly.\n- Line numbers: the editor stylesheet flattens line-number colour to one neutral\n  value (and is unlayered, so it beats the library's `@layer base` per-line\n  colours). `AgentUi` adopts an extra higher-specificity sheet into the diff's\n  shadow root to restore jade/red numbers for added/deleted lines.\n- Changed-files tree: `ChangesTree` creates an imperative `@pierre/trees`\n  `FileTree` in an effect (recreated per session), seeded fully expanded via\n  `initialExpandedPaths`, with `gitStatus` colours and per-row `+adds −dels` via\n  `renderRowDecoration` (jade/red, zero counts hidden). Selecting a file swaps\n  the active surface; the active file is mirrored back into the tree selection.\n\n## Theme\n\nSelf-contained light/dark toggle lives in `AgentDemoSection` (defaults to dark)\nand is passed into `AgentUi` via `themeType`. On the `.aui` root,\n`data-theme-type` pins `color-scheme`; the tree's `:host { color-scheme }` is\noverridden by setting the container's inline `style.colorScheme`. It never\ntouches the docs `<html>` theme.\n\n## Layout\n\n`.aui` is a fixed-height card (taller on `width >= 1024px`). The body is a\ntwo-column grid (diff + 380px changes panel). On `width < 640px` the changes\nsidebar is hidden and the diff goes full-width (single-file view).\n\n## Static chrome\n\nThe composer (textarea + Agent/Mythos selectors + send) and the All files /\nChecks tabs are non-functional, present only for screenshot fidelity.\n\n## Verification\n\nFrom the repo root: `bun run format`, `bun run lint`, `bun run lint:css`. From\n`apps/docs`: `bun run tsc`. Then load the homepage and check file select, inline\nediting, the theme toggle, and the mobile single-file layout.\n",
+        after:
+          "---\nname: agent-ui\ndescription:\n  Use when building or changing the homepage agent-review demo in apps/docs, its\n  mock-data generator, the Conductor-style diff/changes layout, or editable\n  diffs wiring @pierre/diffs FileDiff with @pierre/trees FileTree in the Next.js\n  docs app.\n---\n\n# Agent UI (homepage demo)\n\nA Conductor-style agent-review card embedded on the diffs homepage (the first\nsection below the hero). It frames the editor as an agent window: a center\neditable diff viewer (`@pierre/diffs`) and a right changed-files panel\n(`@pierre/trees`). All data is canned, so it runs on Vercel without runtime\nfilesystem/git access. There is no standalone route — the component is only\nrendered as a homepage section.\n\nThe demo is intentionally self-referential: the single live session, \"Add\nagent-review demo\", shows the actual source files the demo is built from.\n\n## Files\n\n- `apps/docs/app/(diffs)/_home/AgentUi.tsx` — `'use client'`. The interactive\n  component (`AgentUi`). Wraps the diff surface in `EditorProvider`, renders the\n  breadcrumb, the editable `FileDiff`, the static composer, and the right\n  `ChangesTree`. Theme is controlled by the parent via the `themeType` prop.\n- `apps/docs/app/(diffs)/_home/AgentDemoSection.tsx` — `'use client'`. The\n  homepage section wrapper: `FeatureHeader`, an icon-only light/dark\n  `ButtonGroup` (defaults the card to dark), and `<AgentUi />`.\n- `apps/docs/app/(diffs)/_home/Home.tsx` — `AgentReviewSection` is an async\n  server component that SSR-prerenders each changed file's diff\n  (`preloadFileDiff`, dark theme) and passes them to `AgentDemoSection` as\n  `prerenderedDiffs`.\n- `apps/docs/app/(diffs)/_home/mockData.ts` — `AuiSession` / `AuiChangedFile`\n  types, derive helpers (`getSessionPaths`, `getSessionDirectoryPaths`,\n  `getSessionGitStatus`, `getFileDiff`), and the exported `AUI_SESSIONS`.\n- `apps/docs/app/(diffs)/_home/mockData.generated.ts` — AUTO-GENERATED snapshot\n  of real repo file contents. Do not edit by hand.\n- `apps/docs/scripts/generate-aui-mock-data.ts` — bun + git generator that\n  writes `mockData.generated.ts`.\n- `apps/docs/app/(diffs)/_home/agent-ui.css` — all chrome, scoped under `.aui`\n  so it never leaks into the rest of the docs app.\n\n## Mock data\n\nRegenerate the snapshot from the live repo:\n\n```bash\nbun apps/docs/scripts/generate-aui-mock-data.ts\n```\n\nThe generator enumerates `SELF_SESSION_FILES` (the demo's source files,\nexcluding the generated blob itself). For each file: `after` = on-disk contents,\n`before` = `git show HEAD:<path>` (or `''` if new), `status` = `added` |\n`modified`, and `additions`/`deletions` from `git diff --numstat HEAD` (falling\nback to a line count for untracked new files). It is a committed snapshot —\ndrift over time is acceptable; re-run to refresh.\n\n## Editable diffs\n\n- Worker pool: the homepage provides a shared `WorkerPoolContext` (see\n  `_components/WorkerPoolContext.tsx`) initialized with `DEFAULT_THEMES` and\n  `useTokenTransformer: true` (required for editing). `AgentUi` defaults its\n  `theme` prop to `DEFAULT_THEMES` to match that pool.\n- The center surface is the React `FileDiff` with `contentEditable` inside\n  `EditorProvider`, which auto-attaches the editor. It is keyed by the active\n  path so it remounts when the file changes. Options: `disableFileHeader`,\n  `overflow: 'wrap'`, `diffStyle: 'unified'`.\n- `getFileDiff(file, nextAfter)` builds `FileDiffMetadata` via\n  `parseDiffFromFile(before, after)`. Edits are persisted in a ref keyed by path\n  (the editor's debounced `onChange` has no path arg, so the live target is\n  tracked in `activeTargetRef`), so switching files keeps the agent's tweaked\n  output.\n- SSR: `AgentUi` reuses `prerenderedDiffs[path]` as `prerenderedHTML` only while\n  the demo is in dark mode (the snapshot is dark) and the file is unedited, so\n  the card paints highlighted on first load and hydrates cleanly.\n- Line numbers: the editor stylesheet flattens line-number colour to one neutral\n  value (and is unlayered, so it beats the library's `@layer base` per-line\n  colours). `AgentUi` adopts an extra higher-specificity sheet into the diff's\n  shadow root to restore jade/red numbers for added/deleted lines.\n- Changed-files tree: `ChangesTree` creates an imperative `@pierre/trees`\n  `FileTree` in an effect (recreated per session), seeded fully expanded via\n  `initialExpandedPaths`, with `gitStatus` colours and per-row `+adds −dels` via\n  `renderRowDecoration` (jade/red, zero counts hidden). Selecting a file swaps\n  the active surface; the active file is mirrored back into the tree selection.\n\n## Theme\n\nSelf-contained light/dark toggle lives in `AgentDemoSection` (defaults to dark)\nand is passed into `AgentUi` via `themeType`. On the `.aui` root,\n`data-theme-type` pins `color-scheme`; the tree's `:host { color-scheme }` is\noverridden by setting the container's inline `style.colorScheme`. It never\ntouches the docs `<html>` theme.\n\n## Layout\n\n`.aui` is a fixed-height card (taller on `width >= 1024px`). The body is a\ntwo-column grid (diff + 380px changes panel). On `width < 640px` the changes\nsidebar is hidden and the diff goes full-width (single-file view).\n\n## Static chrome\n\nThe composer (textarea + Agent/Mythos selectors + send) and the All files /\nChecks tabs are non-functional, present only for screenshot fidelity.\n\n## Verification\n\nFrom the repo root: `bun run format`, `bun run lint`, `bun run lint:css`. From\n`apps/docs`: `bun run tsc`. Then load the homepage and check file select, inline\nediting, the theme toggle, and the mobile single-file layout.\n",
+        additions: 111,
+        deletions: 0,
+      },
+    ],
+  },
+];
diff --git a/apps/docs/app/(diffs)/_home/mockData.ts b/apps/docs/app/(diffs)/_home/mockData.ts
new file mode 100644
index 000000000..ded45f697
--- /dev/null
+++ b/apps/docs/app/(diffs)/_home/mockData.ts
@@ -0,0 +1,70 @@
+import { type FileDiffMetadata, parseDiffFromFile } from '@pierre/diffs';
+import type { GitStatus, GitStatusEntry } from '@pierre/trees';
+
+import { GENERATED_AUI_SESSIONS } from './mockData.generated';
+
+// Lifecycle of an agent run.
+export type AuiSessionStatus = 'running' | 'review' | 'done';
+
+// A single file the agent changed in a session. `before`/`after` are full file
+// snapshots (real repo contents for the live session) from which we derive the
+// diff, the tree's git status, and the +/- decoration counts.
+export interface AuiChangedFile {
+  path: string;
+  status: GitStatus;
+  before: string;
+  after: string;
+  additions: number;
+  deletions: number;
+}
+
+export interface AuiSession {
+  id: string;
+  title: string;
+  subtitle?: string;
+  status: AuiSessionStatus;
+  changedFiles: AuiChangedFile[];
+}
+
+// The live session(s) come from the generated snapshot of this repo.
+export const AUI_SESSIONS: AuiSession[] = GENERATED_AUI_SESSIONS;
+
+// The flat path list the FileTree renders for a session.
+export function getSessionPaths(session: AuiSession): string[] {
+  return session.changedFiles.map((file) => file.path);
+}
+
+// Every directory id (FileTree dir ids end with `/`) that appears in a session,
+// used to seed the tree fully expanded so all changed files are visible.
+export function getSessionDirectoryPaths(session: AuiSession): string[] {
+  const dirs = new Set<string>();
+  for (const file of session.changedFiles) {
+    const segments = file.path.split('/');
+    let prefix = '';
+    for (let index = 0; index < segments.length - 1; index += 1) {
+      prefix += `${segments[index]}/`;
+      dirs.add(prefix);
+    }
+  }
+  return [...dirs];
+}
+
+// The git status colouring the FileTree applies per row.
+export function getSessionGitStatus(session: AuiSession): GitStatusEntry[] {
+  return session.changedFiles.map((file) => ({
+    path: file.path,
+    status: file.status,
+  }));
+}
+
+// Builds the diff metadata (@pierre/diffs) for one changed file. `nextAfter`
+// lets the caller substitute live in-editor edits for the snapshot's `after`.
+export function getFileDiff(
+  file: AuiChangedFile,
+  nextAfter?: string
+): FileDiffMetadata {
+  return parseDiffFromFile(
+    { name: file.path, contents: file.before },
+    { name: file.path, contents: nextAfter ?? file.after }
+  );
+}
diff --git a/apps/docs/components/Hero.tsx b/apps/docs/components/Hero.tsx
index 6359eee37..5aa1e4fb8 100644
--- a/apps/docs/components/Hero.tsx
+++ b/apps/docs/components/Hero.tsx
@@ -59,7 +59,7 @@ export function Hero({ productId }: HeroProps) {
           </>
         )}
         {product.packageName === '' && <>{product.description} </>}
-        Made with love by{' '}
+        Made by{' '}
         <Link
           target="_blank"
           href="https://pierre.computer"
diff --git a/apps/docs/lib/product-config.ts b/apps/docs/lib/product-config.ts
index b3d5b1938..a83f2948a 100644
--- a/apps/docs/lib/product-config.ts
+++ b/apps/docs/lib/product-config.ts
@@ -21,9 +21,9 @@ export const PRODUCTS: Record<ProductId, ProductConfig> = {
   diffs: {
     id: 'diffs',
     name: 'Diffs',
-    tagline: 'A diff rendering library',
+    tagline: 'Render diffs and\u00A0code, now with edit',
     description:
-      "@pierre/diffs is an open source diff and code rendering library. It's built on Shiki for syntax highlighting and theming, is super customizable, and comes packed with features.",
+      '@pierre/diffs is an open source diff and code rendering library. Built on Shiki for syntax highlighting and theming, super customizable, and packed with features.',
     llmsDescription:
       'An open source diff and code rendering library for the web. Built on Shiki for syntax highlighting, with React and vanilla JS APIs, virtualization, SSR support, and extensive theming.',
     basePath: '',
diff --git a/apps/docs/scripts/generate-aui-mock-data.ts b/apps/docs/scripts/generate-aui-mock-data.ts
new file mode 100644
index 000000000..ba5ff26df
--- /dev/null
+++ b/apps/docs/scripts/generate-aui-mock-data.ts
@@ -0,0 +1,138 @@
+#!/usr/bin/env bun
+import { execFileSync } from 'node:child_process';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve as resolvePath } from 'node:path';
+
+// Builds the canned data for the homepage agent-review demo from THIS repo, so
+// the diffs shown in the card are real code. The single live session is
+// self-referential: it's the agent "building" the demo, and its changed files
+// are the actual source files the demo is made of.
+//
+// Output is a committed snapshot (no runtime fs/git, so it works on Vercel). It
+// can drift from the live repo over time; re-run to refresh:
+//
+//   bun apps/docs/scripts/generate-aui-mock-data.ts
+
+const repoRoot = resolvePath(import.meta.dirname, '../../..');
+const outputPath = resolvePath(
+  repoRoot,
+  'apps/docs/app/(diffs)/_home/mockData.generated.ts'
+);
+
+// The source files that make up the homepage agent-review demo. The generated
+// blob itself is deliberately excluded to avoid self-nesting and bloat.
+const SELF_SESSION_FILES = [
+  'apps/docs/app/(diffs)/_home/AgentUi.tsx',
+  'apps/docs/app/(diffs)/_home/AgentDemoSection.tsx',
+  'apps/docs/app/(diffs)/_home/mockData.ts',
+  'apps/docs/app/(diffs)/_home/agent-ui.css',
+  'apps/docs/scripts/generate-aui-mock-data.ts',
+  '.agents/skills/agent-ui/SKILL.md',
+] as const;
+
+interface GeneratedChangedFile {
+  path: string;
+  status: 'added' | 'modified';
+  before: string;
+  after: string;
+  additions: number;
+  deletions: number;
+}
+
+interface GeneratedSession {
+  id: string;
+  title: string;
+  subtitle: string;
+  status: 'running' | 'review' | 'done';
+  changedFiles: GeneratedChangedFile[];
+}
+
+// Returns the file contents at HEAD, or null when the path is new (not tracked
+// in the last commit).
+function gitShowHead(path: string): string | null {
+  try {
+    return execFileSync('git', ['show', `HEAD:${path}`], {
+      cwd: repoRoot,
+      encoding: 'utf8',
+      maxBuffer: 64 * 1024 * 1024,
+    });
+  } catch {
+    return null;
+  }
+}
+
+// Parses `git diff --numstat HEAD` for a single path. Returns null when git has
+// nothing to report (e.g. an untracked new file).
+function gitNumstat(
+  path: string
+): { additions: number; deletions: number } | null {
+  try {
+    const out = execFileSync('git', ['diff', '--numstat', 'HEAD', '--', path], {
+      cwd: repoRoot,
+      encoding: 'utf8',
+    }).trim();
+    if (out.length === 0) {
+      return null;
+    }
+    const [additions, deletions] = out.split('\n')[0].split('\t');
+    if (additions === '-' || deletions === '-') {
+      return null;
+    }
+    return { additions: Number(additions), deletions: Number(deletions) };
+  } catch {
+    return null;
+  }
+}
+
+function countLines(contents: string): number {
+  if (contents.length === 0) {
+    return 0;
+  }
+  const lines = contents.split('\n');
+  return contents.endsWith('\n') ? lines.length - 1 : lines.length;
+}
+
+function buildChangedFile(path: string): GeneratedChangedFile {
+  const after = readFileSync(resolvePath(repoRoot, path), 'utf8');
+  const head = gitShowHead(path);
+  const status: GeneratedChangedFile['status'] =
+    head == null ? 'added' : 'modified';
+  const before = head ?? '';
+  const numstat = gitNumstat(path);
+  const additions = numstat?.additions ?? countLines(after);
+  const deletions = numstat?.deletions ?? 0;
+  return { path, status, before, after, additions, deletions };
+}
+
+const selfSession: GeneratedSession = {
+  id: 'aui-self',
+  title: 'Add agent-review demo',
+  subtitle: 'Ready for review',
+  status: 'review',
+  changedFiles: SELF_SESSION_FILES.map((path) => {
+    console.log(`[aui] capturing ${path}`);
+    return buildChangedFile(path);
+  }),
+};
+
+const sessions: GeneratedSession[] = [selfSession];
+
+const header = `// AUTO-GENERATED by apps/docs/scripts/generate-aui-mock-data.ts. Do not edit by
+// hand. Re-run the generator to refresh this snapshot from the live repo.
+import type { AuiSession } from './mockData';
+
+export const GENERATED_AUI_SESSIONS: AuiSession[] = `;
+
+writeFileSync(
+  outputPath,
+  `${header}${JSON.stringify(sessions, null, 2)};\n`,
+  'utf8'
+);
+
+const totalFiles = sessions.reduce(
+  (count, session) => count + session.changedFiles.length,
+  0
+);
+console.log(
+  `[aui] wrote ${String(sessions.length)} session(s), ${String(totalFiles)} files -> ${outputPath}`
+);
diff --git a/packages/trees/src/model/publicTypes.ts b/packages/trees/src/model/publicTypes.ts
index e723463e9..cf1cc7c73 100644
--- a/packages/trees/src/model/publicTypes.ts
+++ b/packages/trees/src/model/publicTypes.ts
@@ -411,9 +411,20 @@ export interface FileTreeCompositionOptions {
   header?: FileTreeHeaderCompositionOptions;
 }
 
+// A run of decoration text with an optional CSS color. Used to render a single
+// decoration with multiple independently colored pieces (e.g. green additions
+// and red deletions in one cell).
+export interface FileTreeRowDecorationTextPart {
+  text: string;
+  color?: string;
+}
+
 export interface FileTreeRowDecorationText {
   text: string;
   title?: string;
+  // When provided, the decoration renders these colored parts instead of the
+  // plain `text`. `text` is still used as the accessible/fallback string.
+  parts?: readonly FileTreeRowDecorationTextPart[];
 }
 
 export interface FileTreeRowDecorationIcon {
diff --git a/packages/trees/src/render/FileTreeView.tsx b/packages/trees/src/render/FileTreeView.tsx
index c1d09be8f..886fe77f8 100644
--- a/packages/trees/src/render/FileTreeView.tsx
+++ b/packages/trees/src/render/FileTreeView.tsx
@@ -783,6 +783,17 @@ function renderRowDecoration(
   }
 
   if ('text' in decoration) {
+    if (decoration.parts != null) {
+      return (
+        <span title={decoration.title}>
+          {decoration.parts.map((part, index) => (
+            <span key={index} style={{ color: part.color }}>
+              {part.text}
+            </span>
+          ))}
+        </span>
+      );
+    }
     return <span title={decoration.title}>{decoration.text}</span>;
   }