fix: fail closed on unusable Codex auth during sandbox auth merge

When reusing a Codex sandbox, the workspace-restore step now performs
an auth-merge check before adopting the sandbox's auth.json. The merge
fails closed when:

- host or sandbox Codex auth is unusable (missing token or account)
- the subscription payload shapes differ between host and sandbox
- subscription account identities do not match

Additional hardening: node absence on PATH during the embedded decision
script now exits non-zero instead of silently falling through. Co-change
comments link parseAuth (the embedded script) to hasUsableAuthPayload
(codex-home.ts) so a future auth-format change cannot silently diverge
between the two implementations.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

packages/plugins/examples/plugin-kitchen-sink-example/README.md

@@ -0,0 +1,33 @@
+# @paperclipai/plugin-kitchen-sink-example
+
+Kitchen Sink is the first-party reference plugin that demonstrates nearly the full currently implemented Paperclip plugin surface in one package.
+
+It is intentionally broad:
+
+- full plugin page
+- dashboard widget
+- project and issue surfaces
+- comment surfaces
+- sidebar surfaces
+- settings page
+- worker bridge data/actions
+- events, jobs, webhooks, tools, streams
+- state, entities, assets, metrics, activity
+- local workspace and process demos
+
+This plugin is for local development, contributor onboarding, and runtime regression testing. It is not meant as a production plugin template to ship unchanged.
+
+## Install
+
+```sh
+pnpm --filter @paperclipai/plugin-kitchen-sink-example build
+pnpm paperclipai plugin install ./packages/plugins/examples/plugin-kitchen-sink-example
+```
+
+Or install it from the Paperclip plugin manager as a bundled example once this repo is built.
+
+## Notes
+
+- Local workspace and process demos are trusted-only and default to safe, curated commands.
+- The plugin settings page lets you toggle optional demo surfaces and local runtime behavior.
+- Some SDK-defined host surfaces still depend on the Paperclip host wiring them visibly; this package aims to exercise the currently mounted ones and make the rest obvious.

packages/plugins/examples/plugin-kitchen-sink-example/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@paperclipai/plugin-kitchen-sink-example",
+  "version": "0.1.0",
+  "description": "Reference plugin that demonstrates the full Paperclip plugin surface area in one package",
+  "type": "module",
+  "private": true,
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "paperclipPlugin": {
+    "manifest": "./dist/manifest.js",
+    "worker": "./dist/worker.js",
+    "ui": "./dist/ui/"
+  },
+  "scripts": {
+    "prebuild": "pnpm --filter @paperclipai/plugin-sdk ensure-build-deps",
+    "build": "tsc && node ./scripts/build-ui.mjs",
+    "clean": "rm -rf dist",
+    "typecheck": "pnpm --filter @paperclipai/plugin-sdk ensure-build-deps && tsc --noEmit"
+  },
+  "dependencies": {
+    "@paperclipai/plugin-sdk": "workspace:*",
+    "@paperclipai/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "esbuild": "^0.28.1",
+    "@types/node": "^22.19.21",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^5.7.3"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

packages/plugins/examples/plugin-kitchen-sink-example/scripts/build-ui.mjs

@@ -0,0 +1,24 @@
+import esbuild from "esbuild";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const packageRoot = path.resolve(__dirname, "..");
+
+await esbuild.build({
+  entryPoints: [path.join(packageRoot, "src/ui/index.tsx")],
+  outfile: path.join(packageRoot, "dist/ui/index.js"),
+  bundle: true,
+  format: "esm",
+  platform: "browser",
+  target: ["es2022"],
+  sourcemap: true,
+  external: [
+    "react",
+    "react-dom",
+    "react/jsx-runtime",
+    "@paperclipai/plugin-sdk/ui",
+  ],
+  logLevel: "info",
+});

packages/plugins/examples/plugin-kitchen-sink-example/src/constants.ts

@@ -0,0 +1,115 @@
+import type { PluginLauncherRegistration } from "@paperclipai/plugin-sdk";
+
+export const PLUGIN_ID = "paperclip-kitchen-sink-example";
+export const PLUGIN_VERSION = "0.1.0";
+export const PAGE_ROUTE = "kitchensink";
+
+export const SLOT_IDS = {
+  page: "kitchen-sink-page",
+  settingsPage: "kitchen-sink-settings-page",
+  companySettingsPage: "kitchen-sink-company-settings-page",
+  dashboardWidget: "kitchen-sink-dashboard-widget",
+  sidebar: "kitchen-sink-sidebar-link",
+  sidebarPanel: "kitchen-sink-sidebar-panel",
+  projectSidebarItem: "kitchen-sink-project-link",
+  projectTab: "kitchen-sink-project-tab",
+  issueTab: "kitchen-sink-issue-tab",
+  taskDetailView: "kitchen-sink-task-detail",
+  toolbarButton: "kitchen-sink-toolbar-action",
+  contextMenuItem: "kitchen-sink-context-action",
+  commentAnnotation: "kitchen-sink-comment-annotation",
+  commentContextMenuItem: "kitchen-sink-comment-action",
+} as const;
+
+export const EXPORT_NAMES = {
+  page: "KitchenSinkPage",
+  settingsPage: "KitchenSinkSettingsPage",
+  companySettingsPage: "KitchenSinkCompanySettingsPage",
+  dashboardWidget: "KitchenSinkDashboardWidget",
+  sidebar: "KitchenSinkSidebarLink",
+  sidebarPanel: "KitchenSinkSidebarPanel",
+  projectSidebarItem: "KitchenSinkProjectSidebarItem",
+  projectTab: "KitchenSinkProjectTab",
+  issueTab: "KitchenSinkIssueTab",
+  taskDetailView: "KitchenSinkTaskDetailView",
+  toolbarButton: "KitchenSinkToolbarButton",
+  contextMenuItem: "KitchenSinkContextMenuItem",
+  commentAnnotation: "KitchenSinkCommentAnnotation",
+  commentContextMenuItem: "KitchenSinkCommentContextMenuItem",
+  launcherModal: "KitchenSinkLauncherModal",
+} as const;
+
+export const JOB_KEYS = {
+  heartbeat: "demo-heartbeat",
+} as const;
+
+export const WEBHOOK_KEYS = {
+  demo: "demo-ingest",
+} as const;
+
+export const TOOL_NAMES = {
+  echo: "echo",
+  companySummary: "company-summary",
+  createIssue: "create-issue",
+} as const;
+
+export const STREAM_CHANNELS = {
+  progress: "progress",
+  agentChat: "agent-chat",
+} as const;
+
+export const SAFE_COMMANDS = [
+  {
+    key: "pwd",
+    label: "Print workspace path",
+    command: "pwd",
+    args: [] as string[],
+    description: "Prints the current workspace directory.",
+  },
+  {
+    key: "ls",
+    label: "List workspace files",
+    command: "ls",
+    args: ["-la"] as string[],
+    description: "Lists files in the selected workspace.",
+  },
+  {
+    key: "git-status",
+    label: "Git status",
+    command: "git",
+    args: ["status", "--short", "--branch"] as string[],
+    description: "Shows git status for the selected workspace.",
+  },
+] as const;
+
+export type SafeCommandKey = (typeof SAFE_COMMANDS)[number]["key"];
+
+export const DEFAULT_CONFIG = {
+  showSidebarEntry: true,
+  showSidebarPanel: true,
+  showProjectSidebarItem: true,
+  showCommentAnnotation: true,
+  showCommentContextMenuItem: true,
+  enableWorkspaceDemos: true,
+  enableProcessDemos: false,
+  secretRefExample: "",
+  httpDemoUrl: "https://httpbin.org/anything",
+  allowedCommands: SAFE_COMMANDS.map((command) => command.key),
+  workspaceScratchFile: ".paperclip-kitchen-sink-demo.txt",
+} as const;
+
+export const RUNTIME_LAUNCHER: PluginLauncherRegistration = {
+  id: "kitchen-sink-runtime-launcher",
+  displayName: "Kitchen Sink Modal",
+  description: "Demonstrates runtime launcher registration from the worker.",
+  placementZone: "toolbarButton",
+  entityTypes: ["project", "issue"],
+  action: {
+    type: "openModal",
+    target: EXPORT_NAMES.launcherModal,
+  },
+  render: {
+    environment: "hostOverlay",
+    bounds: "wide",
+  },
+};

packages/plugins/examples/plugin-kitchen-sink-example/src/index.ts

@@ -0,0 +1,2 @@
+export { default as manifest } from "./manifest.js";
+export { default as worker } from "./worker.js";

packages/plugins/examples/plugin-kitchen-sink-example/src/manifest.ts

@@ -0,0 +1,298 @@
+import type { PaperclipPluginManifestV1 } from "@paperclipai/plugin-sdk";
+import {
+  DEFAULT_CONFIG,
+  EXPORT_NAMES,
+  JOB_KEYS,
+  PAGE_ROUTE,
+  PLUGIN_ID,
+  PLUGIN_VERSION,
+  SLOT_IDS,
+  TOOL_NAMES,
+  WEBHOOK_KEYS,
+} from "./constants.js";
+
+const manifest: PaperclipPluginManifestV1 = {
+  id: PLUGIN_ID,
+  apiVersion: 1,
+  version: PLUGIN_VERSION,
+  displayName: "Kitchen Sink (Example)",
+  description: "Reference plugin that demonstrates the current Paperclip plugin API surface, UI surfaces, bridge actions, events, jobs, webhooks, tools, local workspace access, and runtime diagnostics in one place.",
+  author: "Paperclip",
+  categories: ["ui", "automation", "workspace", "connector"],
+  capabilities: [
+    "companies.read",
+    "projects.read",
+    "project.workspaces.read",
+    "issues.read",
+    "issues.create",
+    "issues.update",
+    "issue.comments.read",
+    "issue.comments.create",
+    "agents.read",
+    "agents.pause",
+    "agents.resume",
+    "agents.invoke",
+    "agent.sessions.create",
+    "agent.sessions.list",
+    "agent.sessions.send",
+    "agent.sessions.close",
+    "goals.read",
+    "goals.create",
+    "goals.update",
+    "activity.log.write",
+    "metrics.write",
+    "telemetry.track",
+    "plugin.state.read",
+    "plugin.state.write",
+    "events.subscribe",
+    "events.emit",
+    "jobs.schedule",
+    "webhooks.receive",
+    "http.outbound",
+    "secrets.read-ref",
+    "agent.tools.register",
+    "instance.settings.register",
+    "ui.sidebar.register",
+    "ui.page.register",
+    "ui.detailTab.register",
+    "ui.dashboardWidget.register",
+    "ui.commentAnnotation.register",
+    "ui.action.register",
+  ],
+  entrypoints: {
+    worker: "./dist/worker.js",
+    ui: "./dist/ui",
+  },
+  instanceConfigSchema: {
+    type: "object",
+    properties: {
+      showSidebarEntry: {
+        type: "boolean",
+        title: "Show Sidebar Entry",
+        default: DEFAULT_CONFIG.showSidebarEntry,
+      },
+      showSidebarPanel: {
+        type: "boolean",
+        title: "Show Sidebar Panel",
+        default: DEFAULT_CONFIG.showSidebarPanel,
+      },
+      showProjectSidebarItem: {
+        type: "boolean",
+        title: "Show Project Sidebar Item",
+        default: DEFAULT_CONFIG.showProjectSidebarItem,
+      },
+      showCommentAnnotation: {
+        type: "boolean",
+        title: "Show Comment Annotation",
+        default: DEFAULT_CONFIG.showCommentAnnotation,
+      },
+      showCommentContextMenuItem: {
+        type: "boolean",
+        title: "Show Comment Action",
+        default: DEFAULT_CONFIG.showCommentContextMenuItem,
+      },
+      enableWorkspaceDemos: {
+        type: "boolean",
+        title: "Enable Workspace Demos",
+        default: DEFAULT_CONFIG.enableWorkspaceDemos,
+      },
+      enableProcessDemos: {
+        type: "boolean",
+        title: "Enable Process Demos",
+        default: DEFAULT_CONFIG.enableProcessDemos,
+        description: "Allows curated local child-process demos in project workspaces.",
+      },
+      secretRefExample: {
+        type: "string",
+        title: "Secret Reference Example",
+        default: DEFAULT_CONFIG.secretRefExample,
+      },
+      httpDemoUrl: {
+        type: "string",
+        title: "HTTP Demo URL",
+        default: DEFAULT_CONFIG.httpDemoUrl,
+      },
+      allowedCommands: {
+        type: "array",
+        title: "Allowed Process Commands",
+        items: {
+          type: "string",
+          enum: DEFAULT_CONFIG.allowedCommands,
+        },
+        default: DEFAULT_CONFIG.allowedCommands,
+      },
+      workspaceScratchFile: {
+        type: "string",
+        title: "Workspace Scratch File",
+        default: DEFAULT_CONFIG.workspaceScratchFile,
+      },
+    },
+  },
+  jobs: [
+    {
+      jobKey: JOB_KEYS.heartbeat,
+      displayName: "Demo Heartbeat",
+      description: "Periodic demo job that records plugin runtime activity.",
+      schedule: "*/15 * * * *",
+    },
+  ],
+  webhooks: [
+    {
+      endpointKey: WEBHOOK_KEYS.demo,
+      displayName: "Demo Ingest",
+      description: "Accepts arbitrary webhook payloads and records the latest delivery in plugin state.",
+    },
+  ],
+  tools: [
+    {
+      name: TOOL_NAMES.echo,
+      displayName: "Kitchen Sink Echo",
+      description: "Returns the provided message and the current run context.",
+      parametersSchema: {
+        type: "object",
+        properties: {
+          message: { type: "string" },
+        },
+        required: ["message"],
+      },
+    },
+    {
+      name: TOOL_NAMES.companySummary,
+      displayName: "Kitchen Sink Company Summary",
+      description: "Summarizes the current company using the Paperclip domain APIs.",
+      parametersSchema: {
+        type: "object",
+        properties: {},
+      },
+    },
+    {
+      name: TOOL_NAMES.createIssue,
+      displayName: "Kitchen Sink Create Issue",
+      description: "Creates an issue in the current project from an agent tool call.",
+      parametersSchema: {
+        type: "object",
+        properties: {
+          title: { type: "string" },
+          description: { type: "string" },
+        },
+        required: ["title"],
+      },
+    },
+  ],
+  ui: {
+    slots: [
+      {
+        type: "page",
+        id: SLOT_IDS.page,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.page,
+        routePath: PAGE_ROUTE,
+      },
+      {
+        type: "settingsPage",
+        id: SLOT_IDS.settingsPage,
+        displayName: "Kitchen Sink Settings",
+        exportName: EXPORT_NAMES.settingsPage,
+      },
+      {
+        type: "companySettingsPage",
+        id: SLOT_IDS.companySettingsPage,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.companySettingsPage,
+        routePath: "kitchen-sink",
+      },
+      {
+        type: "dashboardWidget",
+        id: SLOT_IDS.dashboardWidget,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.dashboardWidget,
+      },
+      {
+        type: "sidebar",
+        id: SLOT_IDS.sidebar,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.sidebar,
+      },
+      {
+        type: "sidebarPanel",
+        id: SLOT_IDS.sidebarPanel,
+        displayName: "Kitchen Sink Panel",
+        exportName: EXPORT_NAMES.sidebarPanel,
+      },
+      {
+        type: "projectSidebarItem",
+        id: SLOT_IDS.projectSidebarItem,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.projectSidebarItem,
+        entityTypes: ["project"],
+      },
+      {
+        type: "detailTab",
+        id: SLOT_IDS.projectTab,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.projectTab,
+        entityTypes: ["project"],
+      },
+      {
+        type: "detailTab",
+        id: SLOT_IDS.issueTab,
+        displayName: "Kitchen Sink",
+        exportName: EXPORT_NAMES.issueTab,
+        entityTypes: ["issue"],
+      },
+      {
+        type: "taskDetailView",
+        id: SLOT_IDS.taskDetailView,
+        displayName: "Kitchen Sink Task View",
+        exportName: EXPORT_NAMES.taskDetailView,
+        entityTypes: ["issue"],
+      },
+      {
+        type: "toolbarButton",
+        id: SLOT_IDS.toolbarButton,
+        displayName: "Kitchen Sink Action",
+        exportName: EXPORT_NAMES.toolbarButton,
+        entityTypes: ["project", "issue"],
+      },
+      {
+        type: "contextMenuItem",
+        id: SLOT_IDS.contextMenuItem,
+        displayName: "Kitchen Sink Context",
+        exportName: EXPORT_NAMES.contextMenuItem,
+        entityTypes: ["project", "issue"],
+      },
+      {
+        type: "commentAnnotation",
+        id: SLOT_IDS.commentAnnotation,
+        displayName: "Kitchen Sink Comment Annotation",
+        exportName: EXPORT_NAMES.commentAnnotation,
+        entityTypes: ["comment"],
+      },
+      {
+        type: "commentContextMenuItem",
+        id: SLOT_IDS.commentContextMenuItem,
+        displayName: "Kitchen Sink Comment Action",
+        exportName: EXPORT_NAMES.commentContextMenuItem,
+        entityTypes: ["comment"],
+      },
+    ],
+    launchers: [
+      {
+        id: "kitchen-sink-launcher",
+        displayName: "Kitchen Sink Modal",
+        placementZone: "toolbarButton",
+        entityTypes: ["project", "issue"],
+        action: {
+          type: "openModal",
+          target: EXPORT_NAMES.launcherModal,
+        },
+        render: {
+          environment: "hostOverlay",
+          bounds: "wide",
+        },
+      },
+    ],
+  },
+};
+
+export default manifest;

packages/plugins/examples/plugin-kitchen-sink-example/src/ui/AsciiArtAnimation.tsx

@@ -0,0 +1,363 @@
+import { useEffect, useRef } from "react";
+
+const CHARS = [" ", ".", "·", "▪", "▫", "○"] as const;
+const TARGET_FPS = 24;
+const FRAME_INTERVAL_MS = 1000 / TARGET_FPS;
+
+const PAPERCLIP_SPRITES = [
+  [
+    "  ╭────╮ ",
+    " ╭╯╭──╮│ ",
+    " │ │  ││ ",
+    " │ │  ││ ",
+    " │ │  ││ ",
+    " │ │  ││ ",
+    " │ ╰──╯│ ",
+    " ╰─────╯ ",
+  ],
+  [
+    " ╭─────╮ ",
+    " │╭──╮╰╮ ",
+    " ││  │ │ ",
+    " ││  │ │ ",
+    " ││  │ │ ",
+    " ││  │ │ ",
+    " │╰──╯ │ ",
+    " ╰────╯  ",
+  ],
+] as const;
+
+type PaperclipSprite = (typeof PAPERCLIP_SPRITES)[number];
+
+interface Clip {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  life: number;
+  maxLife: number;
+  drift: number;
+  sprite: PaperclipSprite;
+  width: number;
+  height: number;
+}
+
+function measureChar(container: HTMLElement): { w: number; h: number } {
+  const span = document.createElement("span");
+  span.textContent = "M";
+  span.style.cssText =
+    "position:absolute;visibility:hidden;white-space:pre;font-size:11px;font-family:monospace;line-height:1;";
+  container.appendChild(span);
+  const rect = span.getBoundingClientRect();
+  container.removeChild(span);
+  return { w: rect.width, h: rect.height };
+}
+
+function spriteSize(sprite: PaperclipSprite): { width: number; height: number } {
+  let width = 0;
+  for (const row of sprite) width = Math.max(width, row.length);
+  return { width, height: sprite.length };
+}
+
+export function AsciiArtAnimation() {
+  const preRef = useRef<HTMLPreElement>(null);
+  const frameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!preRef.current) return;
+    const preEl: HTMLPreElement = preRef.current;
+    const motionMedia = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let isVisible = document.visibilityState !== "hidden";
+    let loopActive = false;
+    let lastRenderAt = 0;
+    let tick = 0;
+    let cols = 0;
+    let rows = 0;
+    let charW = 7;
+    let charH = 11;
+    let trail = new Float32Array(0);
+    let colWave = new Float32Array(0);
+    let rowWave = new Float32Array(0);
+    let clipMask = new Uint16Array(0);
+    let clips: Clip[] = [];
+    let lastOutput = "";
+
+    function toGlyph(value: number): string {
+      const clamped = Math.max(0, Math.min(0.999, value));
+      const idx = Math.floor(clamped * CHARS.length);
+      return CHARS[idx] ?? " ";
+    }
+
+    function rebuildGrid() {
+      const nextCols = Math.max(0, Math.ceil(preEl.clientWidth / Math.max(1, charW)));
+      const nextRows = Math.max(0, Math.ceil(preEl.clientHeight / Math.max(1, charH)));
+      if (nextCols === cols && nextRows === rows) return;
+
+      cols = nextCols;
+      rows = nextRows;
+      const cellCount = cols * rows;
+      trail = new Float32Array(cellCount);
+      colWave = new Float32Array(cols);
+      rowWave = new Float32Array(rows);
+      clipMask = new Uint16Array(cellCount);
+      clips = clips.filter((clip) => {
+        return (
+          clip.x > -clip.width - 2 &&
+          clip.x < cols + 2 &&
+          clip.y > -clip.height - 2 &&
+          clip.y < rows + 2
+        );
+      });
+      lastOutput = "";
+    }
+
+    function drawStaticFrame() {
+      if (cols <= 0 || rows <= 0) {
+        preEl.textContent = "";
+        return;
+      }
+
+      const grid = Array.from({ length: rows }, () => Array.from({ length: cols }, () => " "));
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const ambient = (Math.sin(c * 0.11 + r * 0.04) + Math.cos(r * 0.08 - c * 0.02)) * 0.18 + 0.22;
+          grid[r]![c] = toGlyph(ambient);
+        }
+      }
+
+      const gapX = 18;
+      const gapY = 13;
+      for (let baseRow = 1; baseRow < rows - 9; baseRow += gapY) {
+        const startX = Math.floor(baseRow / gapY) % 2 === 0 ? 2 : 10;
+        for (let baseCol = startX; baseCol < cols - 10; baseCol += gapX) {
+          const sprite = PAPERCLIP_SPRITES[(baseCol + baseRow) % PAPERCLIP_SPRITES.length]!;
+          for (let sr = 0; sr < sprite.length; sr++) {
+            const line = sprite[sr]!;
+            for (let sc = 0; sc < line.length; sc++) {
+              const ch = line[sc] ?? " ";
+              if (ch === " ") continue;
+              const row = baseRow + sr;
+              const col = baseCol + sc;
+              if (row < 0 || row >= rows || col < 0 || col >= cols) continue;
+              grid[row]![col] = ch;
+            }
+          }
+        }
+      }
+
+      const output = grid.map((line) => line.join("")).join("\n");
+      preEl.textContent = output;
+      lastOutput = output;
+    }
+
+    function spawnClip() {
+      const sprite = PAPERCLIP_SPRITES[Math.floor(Math.random() * PAPERCLIP_SPRITES.length)]!;
+      const size = spriteSize(sprite);
+      const edge = Math.random();
+      let x = 0;
+      let y = 0;
+      let vx = 0;
+      let vy = 0;
+
+      if (edge < 0.68) {
+        x = Math.random() < 0.5 ? -size.width - 1 : cols + 1;
+        y = Math.random() * Math.max(1, rows - size.height);
+        vx = x < 0 ? 0.04 + Math.random() * 0.05 : -(0.04 + Math.random() * 0.05);
+        vy = (Math.random() - 0.5) * 0.014;
+      } else {
+        x = Math.random() * Math.max(1, cols - size.width);
+        y = Math.random() < 0.5 ? -size.height - 1 : rows + 1;
+        vx = (Math.random() - 0.5) * 0.014;
+        vy = y < 0 ? 0.028 + Math.random() * 0.034 : -(0.028 + Math.random() * 0.034);
+      }
+
+      clips.push({
+        x,
+        y,
+        vx,
+        vy,
+        life: 0,
+        maxLife: 260 + Math.random() * 220,
+        drift: (Math.random() - 0.5) * 1.2,
+        sprite,
+        width: size.width,
+        height: size.height,
+      });
+    }
+
+    function stampClip(clip: Clip, alpha: number) {
+      const baseCol = Math.round(clip.x);
+      const baseRow = Math.round(clip.y);
+      for (let sr = 0; sr < clip.sprite.length; sr++) {
+        const line = clip.sprite[sr]!;
+        const row = baseRow + sr;
+        if (row < 0 || row >= rows) continue;
+        for (let sc = 0; sc < line.length; sc++) {
+          const ch = line[sc] ?? " ";
+          if (ch === " ") continue;
+          const col = baseCol + sc;
+          if (col < 0 || col >= cols) continue;
+          const idx = row * cols + col;
+          const stroke = ch === "│" || ch === "─" ? 0.8 : 0.92;
+          trail[idx] = Math.max(trail[idx] ?? 0, alpha * stroke);
+          clipMask[idx] = ch.charCodeAt(0);
+        }
+      }
+    }
+
+    function step(time: number) {
+      if (!loopActive) return;
+      frameRef.current = requestAnimationFrame(step);
+      if (time - lastRenderAt < FRAME_INTERVAL_MS || cols <= 0 || rows <= 0) return;
+
+      const delta = Math.min(2, lastRenderAt === 0 ? 1 : (time - lastRenderAt) / 16.6667);
+      lastRenderAt = time;
+      tick += delta;
+
+      const cellCount = cols * rows;
+      const targetCount = Math.max(3, Math.floor(cellCount / 2200));
+      while (clips.length < targetCount) spawnClip();
+
+      for (let i = 0; i < trail.length; i++) trail[i] *= 0.92;
+      clipMask.fill(0);
+
+      for (let i = clips.length - 1; i >= 0; i--) {
+        const clip = clips[i]!;
+        clip.life += delta;
+
+        const wobbleX = Math.sin((clip.y + clip.drift + tick * 0.12) * 0.09) * 0.0018;
+        const wobbleY = Math.cos((clip.x - clip.drift - tick * 0.09) * 0.08) * 0.0014;
+        clip.vx = (clip.vx + wobbleX) * 0.998;
+        clip.vy = (clip.vy + wobbleY) * 0.998;
+
+        clip.x += clip.vx * delta;
+        clip.y += clip.vy * delta;
+
+        if (
+          clip.life >= clip.maxLife ||
+          clip.x < -clip.width - 2 ||
+          clip.x > cols + 2 ||
+          clip.y < -clip.height - 2 ||
+          clip.y > rows + 2
+        ) {
+          clips.splice(i, 1);
+          continue;
+        }
+
+        const life = clip.life / clip.maxLife;
+        const alpha = life < 0.12 ? life / 0.12 : life > 0.88 ? (1 - life) / 0.12 : 1;
+        stampClip(clip, alpha);
+      }
+
+      for (let c = 0; c < cols; c++) colWave[c] = Math.sin(c * 0.08 + tick * 0.06);
+      for (let r = 0; r < rows; r++) rowWave[r] = Math.cos(r * 0.1 - tick * 0.05);
+
+      let output = "";
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          const idx = r * cols + c;
+          const clipChar = clipMask[idx];
+          if (clipChar > 0) {
+            output += String.fromCharCode(clipChar);
+            continue;
+          }
+
+          const ambient = 0.2 + colWave[c]! * 0.08 + rowWave[r]! * 0.06 + Math.sin((c + r) * 0.1 + tick * 0.035) * 0.05;
+          output += toGlyph((trail[idx] ?? 0) + ambient);
+        }
+        if (r < rows - 1) output += "\n";
+      }
+
+      if (output !== lastOutput) {
+        preEl.textContent = output;
+        lastOutput = output;
+      }
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const measured = measureChar(preEl);
+      charW = measured.w || 7;
+      charH = measured.h || 11;
+      rebuildGrid();
+      if (motionMedia.matches || !isVisible) {
+        drawStaticFrame();
+      }
+    });
+
+    function startLoop() {
+      if (loopActive) return;
+      loopActive = true;
+      lastRenderAt = 0;
+      frameRef.current = requestAnimationFrame(step);
+    }
+
+    function stopLoop() {
+      loopActive = false;
+      if (frameRef.current !== null) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    }
+
+    function syncMode() {
+      if (motionMedia.matches || !isVisible) {
+        stopLoop();
+        drawStaticFrame();
+      } else {
+        startLoop();
+      }
+    }
+
+    function handleVisibility() {
+      isVisible = document.visibilityState !== "hidden";
+      syncMode();
+    }
+
+    const measured = measureChar(preEl);
+    charW = measured.w || 7;
+    charH = measured.h || 11;
+    rebuildGrid();
+    resizeObserver.observe(preEl);
+    motionMedia.addEventListener("change", syncMode);
+    document.addEventListener("visibilitychange", handleVisibility);
+    syncMode();
+
+    return () => {
+      stopLoop();
+      resizeObserver.disconnect();
+      motionMedia.removeEventListener("change", syncMode);
+      document.removeEventListener("visibilitychange", handleVisibility);
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        height: "320px",
+        minHeight: "320px",
+        maxHeight: "350px",
+        background: "#1d1d1d",
+        color: "#f2efe6",
+        overflow: "hidden",
+        borderRadius: "12px",
+        border: "1px solid color-mix(in srgb, var(--border) 75%, transparent)",
+      }}
+    >
+      <pre
+        ref={preRef}
+        aria-hidden="true"
+        style={{
+          margin: 0,
+          width: "100%",
+          height: "100%",
+          padding: "14px",
+          fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace",
+          fontSize: "11px",
+          lineHeight: 1,
+          whiteSpace: "pre",
+          userSelect: "none",
+        }}
+      />
+    </div>
+  );
+}

packages/plugins/examples/plugin-kitchen-sink-example/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2023", "DOM"],
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}