From 6098c1f928adb2126fe6b6da1972128e60eefa18 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 14 Oct 2026 11:42:12 +0200
Subject: [PATCH] feat: add a change preview to the plugin UI kit

---
 lib/__tests__/plugin-ui-kit.test.tsx     |  9 ++++++++
 lib/plugin-sandbox/ui-kit/components.tsx | 27 ++++++++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/lib/__tests__/plugin-ui-kit.test.tsx b/lib/__tests__/plugin-ui-kit.test.tsx
index b4c4fb50e..81be9cbd2 100644
--- a/lib/__tests__/plugin-ui-kit.test.tsx
+++ b/lib/__tests__/plugin-ui-kit.test.tsx
@@ -77,10 +77,19 @@ describe('plugin UI kit components', () => {
       <kit.EmptyState icon="cloud" title="Nothing yet" />
       <kit.ListRow title="report.pdf" icon="report.pdf" meta={['1 MB']} />
       <kit.Badge tone="success">Sent</kit.Badge>
+      <kit.DiffView parts={[{ type: 'same', text: 'Hi' }]} />
     </>);
     for (const child of Array.from(container.children)) expect(child.classList.contains('bk'), child.outerHTML.slice(0, 60)).toBe(true);
   });
 
+  it('marks removed and added words in a change preview', () => {
+    const { container } = render(<kit.DiffView parts={[{ type: 'same', text: 'Hi ' }, { type: 'del', text: 'Bob' }, { type: 'add', text: 'Robert' }]} />);
+    expect(container.querySelector('del')).toHaveTextContent('Bob');
+    expect(container.querySelector('del')!.className).toContain('line-through');
+    expect(container.querySelector('ins')).toHaveTextContent('Robert');
+    expect(container.textContent).toBe('Hi BobRobert');
+  });
+
   it('draws a checkbox the user can toggle by its label', () => {
     const onChange = vi.fn();
     render(<kit.Checkbox checked={false} onChange={onChange} label="Send as link" hint="For files over 10 MB" />);
diff --git a/lib/plugin-sandbox/ui-kit/components.tsx b/lib/plugin-sandbox/ui-kit/components.tsx
index 670738f8a..690bae0c2 100644
--- a/lib/plugin-sandbox/ui-kit/components.tsx
+++ b/lib/plugin-sandbox/ui-kit/components.tsx
@@ -792,3 +792,30 @@ export function SidebarRow({ icon, label, detail, onClick, title }: { icon?: str
 export function SidebarEmpty({ children }: Children) {
   return <p className="bk px-4 py-2 text-sm text-muted-foreground">{children}</p>;
 }
+
+// ─── Changes ───────────────────────────────────────────────────
+
+export interface DiffPart {
+  type: 'same' | 'add' | 'del';
+  text: string;
+}
+
+/**
+ * A text with its changes marked: removed words struck through in red,
+ * added ones highlighted. For previews of a rewrite before it is applied.
+ * `streaming` shows a caret at the end while the text is still coming in.
+ */
+export function DiffView({ parts, streaming = false, label }: { parts: DiffPart[]; streaming?: boolean; label?: string }) {
+  return (
+    <div className="bk rounded-md border border-border bg-muted/30 p-3 text-sm text-foreground leading-relaxed whitespace-pre-wrap break-words" aria-label={label} aria-busy={streaming || undefined}>
+      {parts.map((p, i) => (
+        p.type === 'del'
+          ? <del key={i} className="rounded-sm bg-destructive/10 text-destructive line-through decoration-destructive/60">{p.text}</del>
+          : p.type === 'add'
+            ? <ins key={i} className="rounded-sm bg-success/15 text-foreground no-underline">{p.text}</ins>
+            : <span key={i}>{p.text}</span>
+      ))}
+      {streaming && <span className="ms-0.5 inline-block h-4 w-1.5 translate-y-0.5 animate-pulse rounded-sm bg-primary/60" aria-hidden="true" />}
+    </div>
+  );
+}