@pragma-sh/scratchpad 0.1.0

package/dist/ui.js

@@ -0,0 +1,1313 @@
+// src/index.ts
+export * from "@pragma-sh/sdk";
+function bridge() {
+  const value = globalThis.pragmaScratchpad;
+  if (!value) {
+    throw new Error("@pragma-sh/scratchpad can only prompt agents inside a Pragma scratchpad");
+  }
+  return value;
+}
+function scratchpadBridge() {
+  return bridge();
+}
+async function promptAgent(text, options = {}) {
+  const value = text.trim();
+  if (!value)
+    return false;
+  const host = bridge();
+  const firstResult = await host.promptAgent(value);
+  if (firstResult === "sent")
+    return true;
+  if (firstResult === "cancelled")
+    return false;
+  const attach = () => host.requestAgentAttachment();
+  const customResult = await options.onMissingAgent?.({ text: value, attach });
+  const attached = options.onMissingAgent ? customResult === true : await attach();
+  if (!attached)
+    return false;
+  const retryResult = await host.promptAgent(value);
+  if (retryResult === "sent")
+    return true;
+  if (retryResult === "cancelled")
+    return false;
+  throw new Error("Selected agent tab is no longer available");
+}
+
+// src/styles.ts
+var SCRATCHPAD_STYLE_ELEMENT_ID = "pragma-scratchpad-styles";
+var SCRATCHPAD_STYLES = `
+.pragma-card {
+  display: grid;
+  gap: 0.75rem;
+  margin: 1rem 0;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--border, #3f3f46);
+  border-radius: var(--radius-lg, 10px);
+  background: var(--card, #18181b);
+  color: var(--card-foreground, #fafafa);
+  box-shadow: var(--shadow-raised, 0 1px 2px rgb(0 0 0 / 0.3));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.8125rem;
+  line-height: 1.55;
+}
+.pragma-card > :first-child { margin-top: 0; }
+.pragma-card > :last-child { margin-bottom: 0; }
+
+.pragma-eyebrow {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--muted-foreground, #a1a1aa);
+}
+.pragma-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--card-foreground, #fafafa);
+}
+.pragma-hint { font-size: 0.75rem; color: var(--muted-foreground, #a1a1aa); }
+.pragma-stack { display: grid; gap: 0.5rem; }
+.pragma-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
+.pragma-row--between { justify-content: space-between; }
+.pragma-row--end { justify-content: flex-end; }
+.pragma-empty {
+  padding: 0.75rem;
+  border: 1px dashed var(--border, #3f3f46);
+  border-radius: var(--radius-md, 8px);
+  font-size: 0.75rem;
+  color: var(--muted-foreground, #a1a1aa);
+  text-align: center;
+}
+.pragma-chip {
+  padding: 0.0625rem 0.375rem;
+  border-radius: var(--radius-sm, 6px);
+  background: var(--muted, #27272a);
+  color: var(--muted-foreground, #a1a1aa);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.6875rem;
+}
+
+.pragma-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  min-height: 2rem;
+  padding: 0 0.75rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 8px);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
+}
+.pragma-button:focus-visible { outline: 2px solid var(--ring, #22d3ee); outline-offset: 2px; }
+.pragma-button:disabled { cursor: not-allowed; opacity: 0.5; }
+.pragma-button--sm { min-height: 1.75rem; padding: 0 0.5rem; font-size: 0.75rem; }
+.pragma-button--primary {
+  background: var(--primary, #2563eb);
+  color: var(--primary-foreground, #fafafa);
+}
+.pragma-button--primary:hover:not(:disabled) { background: var(--primary-hover, #1d4ed8); }
+.pragma-button--secondary {
+  background: var(--secondary, #27272a);
+  color: var(--secondary-foreground, #fafafa);
+}
+.pragma-button--secondary:hover:not(:disabled) { background: var(--accent, #3f3f46); }
+.pragma-button--outline {
+  border-color: var(--input, #3f3f46);
+  background: transparent;
+  color: var(--foreground, #fafafa);
+}
+.pragma-button--outline:hover:not(:disabled) {
+  background: var(--accent, #27272a);
+  color: var(--accent-foreground, #fafafa);
+}
+.pragma-button--ghost { background: transparent; color: var(--muted-foreground, #a1a1aa); }
+.pragma-button--ghost:hover:not(:disabled) {
+  background: var(--accent, #27272a);
+  color: var(--accent-foreground, #fafafa);
+}
+.pragma-button--danger {
+  background: var(--destructive, #ef4444);
+  color: var(--destructive-foreground, #fafafa);
+}
+.pragma-button--danger:hover:not(:disabled) { filter: brightness(1.08); }
+
+.pragma-input,
+.pragma-textarea {
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border: 1px solid var(--input, #3f3f46);
+  border-radius: var(--radius-md, 8px);
+  background: var(--background, #09090b);
+  color: var(--foreground, #fafafa);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  transition: border-color 0.12s ease;
+}
+.pragma-input::placeholder,
+.pragma-textarea::placeholder { color: var(--muted-foreground, #71717a); }
+.pragma-input:focus-visible,
+.pragma-textarea:focus-visible {
+  border-color: var(--ring, #22d3ee);
+  outline: 2px solid var(--ring, #22d3ee);
+  outline-offset: -1px;
+}
+.pragma-input:disabled,
+.pragma-textarea:disabled { cursor: not-allowed; opacity: 0.5; }
+.pragma-textarea { min-height: 5rem; resize: vertical; }
+
+/*
+ * Choice list shared by every AskQuestion shape: a circular radio for a single
+ * answer, a square checkbox for multi-select. The native control is restyled
+ * (\`appearance: none\`) rather than replaced, so keyboard roving, labels and
+ * form semantics keep working inside the sandboxed frame.
+ */
+.pragma-choices { display: grid; gap: 0.25rem; }
+.pragma-choice {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.4375rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  transition: background-color 0.12s ease, border-color 0.12s ease;
+}
+.pragma-choice:hover { background: var(--accent, #27272a); }
+.pragma-choice--checked {
+  border-color: color-mix(in oklab, var(--primary, #2563eb) 45%, transparent);
+  background: color-mix(in oklab, var(--primary, #2563eb) 10%, transparent);
+}
+.pragma-choice:has(:disabled) { cursor: not-allowed; opacity: 0.5; }
+.pragma-choice:has(:disabled):hover { background: transparent; }
+.pragma-choice__control {
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-content: center;
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  border: 1px solid var(--input, #3f3f46);
+  background: var(--background, #09090b);
+  cursor: inherit;
+  transition: background-color 0.12s ease, border-color 0.12s ease;
+}
+.pragma-choice__control--radio { border-radius: 999px; }
+.pragma-choice__control--check { border-radius: var(--radius-sm, 6px); }
+.pragma-choice__control:focus-visible { outline: 2px solid var(--ring, #22d3ee); outline-offset: 2px; }
+.pragma-choice__control:checked { border-color: var(--primary, #2563eb); }
+.pragma-choice__control--radio:checked::after {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 999px;
+  background: var(--primary, #2563eb);
+}
+.pragma-choice__control--check:checked { background: var(--primary, #2563eb); }
+.pragma-choice__control--check:checked::after {
+  content: "";
+  width: 0.3125rem;
+  height: 0.5625rem;
+  margin-top: -0.125rem;
+  border: solid var(--primary-foreground, #fafafa);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.pragma-choice__label { flex: 1; min-width: 0; font-size: 0.8125rem; }
+/* The "Other" row swaps its text for this field, so it has to sit on the row. */
+.pragma-choice__other {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.8125rem;
+  cursor: text;
+}
+
+.pragma-progress {
+  appearance: none;
+  width: 100%;
+  height: 0.375rem;
+  border: 0;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--muted, #27272a);
+  color: var(--pragma-tone, var(--primary, #22d3ee));
+}
+.pragma-progress::-webkit-progress-bar { background: var(--muted, #27272a); border-radius: 999px; }
+.pragma-progress::-webkit-progress-value {
+  background: var(--pragma-tone, var(--primary, #22d3ee));
+  border-radius: 999px;
+  transition: width 0.25s ease;
+}
+.pragma-progress::-moz-progress-bar {
+  background: var(--pragma-tone, var(--primary, #22d3ee));
+  border-radius: 999px;
+}
+
+.pragma-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.0625rem 0.4375rem;
+  border: 1px solid currentColor;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted-foreground, #a1a1aa);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1.5;
+}
+.pragma-badge--primary { color: var(--primary, #22d3ee); }
+.pragma-badge--success { color: var(--success, #22c55e); }
+.pragma-badge--warning { color: var(--warning, #eab308); }
+.pragma-badge--danger { color: var(--destructive, #ef4444); }
+
+.pragma-whiteboard__open {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-md, 8px);
+  background: transparent;
+  cursor: pointer;
+}
+.pragma-whiteboard__open:focus-visible {
+  outline: 2px solid var(--ring, #22d3ee);
+  outline-offset: 2px;
+}
+.pragma-whiteboard__open:hover .pragma-whiteboard__image {
+  border-color: var(--primary, #22d3ee);
+}
+.pragma-whiteboard__image {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 36rem;
+  object-fit: contain;
+  border: 1px solid var(--border, #3f3f46);
+  border-radius: var(--radius-md, 8px);
+  background: var(--background, #09090b);
+  transition: border-color 0.15s ease;
+}
+.pragma-whiteboard__error {
+  margin: 0;
+  color: var(--destructive, #ef4444);
+  font-size: 0.75rem;
+}
+
+/*
+ * Side-by-side diff modelled on the desktop's \`@codemirror/merge\` view: one
+ * scroll container so both panes stay row-aligned, a line-number gutter per
+ * pane, whole-line tinting for inserted/deleted lines and a stronger tint on
+ * the words that actually changed (the equivalent of \`cm-changedText\`).
+ */
+.pragma-diff {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  max-height: 24rem;
+  overflow-y: auto;
+  border: 1px solid var(--border, #3f3f46);
+  border-radius: var(--radius-md, 8px);
+  background: var(--background, #09090b);
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 0.75rem;
+  line-height: 1.6;
+  --pragma-diff-added: var(--diff-added, #22c55e);
+  --pragma-diff-removed: var(--diff-removed, #ef4444);
+}
+@media (max-width: 34rem) { .pragma-diff { grid-template-columns: minmax(0, 1fr); } }
+.pragma-diff__pane { min-width: 0; overflow-x: auto; }
+.pragma-diff__pane--after { border-left: 1px solid var(--border, #3f3f46); }
+@media (max-width: 34rem) {
+  .pragma-diff__pane--after {
+    border-left: 0;
+    border-top: 1px solid var(--border, #3f3f46);
+  }
+}
+.pragma-diff__label {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.25rem 0.625rem;
+  border-bottom: 1px solid var(--border, #3f3f46);
+  background: var(--card, #18181b);
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.pragma-diff__pane--before .pragma-diff__label { color: var(--pragma-diff-removed); }
+.pragma-diff__pane--after .pragma-diff__label { color: var(--pragma-diff-added); }
+
+.pragma-diff__lines { display: grid; padding: 0.25rem 0; min-width: max-content; }
+.pragma-diff__line {
+  display: grid;
+  grid-template-columns: 2.75rem minmax(0, 1fr);
+  min-height: 1.6em;
+  white-space: pre;
+}
+.pragma-diff__gutter {
+  padding-right: 0.625rem;
+  color: var(--muted-foreground, #71717a);
+  opacity: 0.7;
+  text-align: right;
+  user-select: none;
+}
+.pragma-diff__text { padding-right: 0.75rem; font: inherit; }
+.pragma-diff__line--removed {
+  background: color-mix(in oklab, var(--pragma-diff-removed) 12%, transparent);
+}
+.pragma-diff__line--added {
+  background: color-mix(in oklab, var(--pragma-diff-added) 12%, transparent);
+}
+.pragma-diff__pane--before .pragma-diff__line--changed {
+  background: color-mix(in oklab, var(--pragma-diff-removed) 12%, transparent);
+}
+.pragma-diff__pane--after .pragma-diff__line--changed {
+  background: color-mix(in oklab, var(--pragma-diff-added) 12%, transparent);
+}
+.pragma-diff__line--spacer { background: var(--muted, #27272a); opacity: 0.35; }
+.pragma-diff__pane--before .pragma-diff__changed {
+  background: color-mix(in oklab, var(--pragma-diff-removed) 30%, transparent);
+}
+.pragma-diff__pane--after .pragma-diff__changed {
+  background: color-mix(in oklab, var(--pragma-diff-added) 30%, transparent);
+}
+
+.pragma-progress-row { display: grid; gap: 0.3125rem; }
+.pragma-progress-row + .pragma-progress-row {
+  padding-top: 0.625rem;
+  border-top: 1px solid var(--border, #3f3f46);
+}
+.pragma-progress-row__name {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+function ensureScratchpadStyles() {
+  if (typeof document === "undefined")
+    return;
+  if (document.getElementById(SCRATCHPAD_STYLE_ELEMENT_ID))
+    return;
+  const element = document.createElement("style");
+  element.id = SCRATCHPAD_STYLE_ELEMENT_ID;
+  element.textContent = SCRATCHPAD_STYLES;
+  document.head.append(element);
+}
+
+// src/primitives.tsx
+import { jsx } from "react/jsx-runtime";
+var TONE_VARIABLE = {
+  neutral: "var(--muted-foreground)",
+  primary: "var(--primary)",
+  success: "var(--success)",
+  warning: "var(--warning)",
+  danger: "var(--destructive)"
+};
+function classNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function Button({
+  className,
+  size = "md",
+  type = "button",
+  variant = "secondary",
+  ...rest
+}) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("button", {
+    ...rest,
+    className: classNames("pragma-button", `pragma-button--${variant}`, size === "sm" && "pragma-button--sm", className),
+    type
+  });
+}
+function Input({
+  className,
+  ...rest
+}) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("input", {
+    ...rest,
+    className: classNames("pragma-input", className)
+  });
+}
+function Textarea({
+  className,
+  ...rest
+}) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("textarea", {
+    ...rest,
+    className: classNames("pragma-textarea", className)
+  });
+}
+function Progress({
+  className,
+  style,
+  tone = "primary",
+  ...rest
+}) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("progress", {
+    ...rest,
+    className: classNames("pragma-progress", className),
+    style: { ["--pragma-tone"]: TONE_VARIABLE[tone], ...style }
+  });
+}
+function Card({ className, ...rest }) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("section", {
+    ...rest,
+    className: classNames("pragma-card", className)
+  });
+}
+function Badge({ className, tone = "neutral", ...rest }) {
+  ensureScratchpadStyles();
+  return /* @__PURE__ */ jsx("span", {
+    ...rest,
+    className: classNames("pragma-badge", tone !== "neutral" && `pragma-badge--${tone}`, className)
+  });
+}
+
+// src/ui.tsx
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+
+// src/diff.ts
+var MAX_DP_CELLS = 250000;
+function spacer(facing) {
+  return { key: `spacer-${facing}`, number: null, kind: "spacer", segments: [] };
+}
+function alignDiffLines(before, after) {
+  const rows = [];
+  let beforeNumber = 0;
+  let afterNumber = 0;
+  let removed = [];
+  let added = [];
+  const flush = () => {
+    const paired = Math.min(removed.length, added.length);
+    for (let index = 0;index < paired; index += 1) {
+      const [left, right] = changedSegments(removed[index] ?? "", added[index] ?? "");
+      beforeNumber += 1;
+      afterNumber += 1;
+      rows.push({
+        before: { key: `b${beforeNumber}`, number: beforeNumber, kind: "changed", segments: left },
+        after: { key: `a${afterNumber}`, number: afterNumber, kind: "changed", segments: right }
+      });
+    }
+    for (const text of removed.slice(paired)) {
+      beforeNumber += 1;
+      rows.push({
+        before: {
+          key: `b${beforeNumber}`,
+          number: beforeNumber,
+          kind: "removed",
+          segments: wholeLine(text)
+        },
+        after: spacer(beforeNumber)
+      });
+    }
+    for (const text of added.slice(paired)) {
+      afterNumber += 1;
+      rows.push({
+        before: spacer(afterNumber),
+        after: {
+          key: `a${afterNumber}`,
+          number: afterNumber,
+          kind: "added",
+          segments: wholeLine(text)
+        }
+      });
+    }
+    removed = [];
+    added = [];
+  };
+  for (const edit of diffSequences(splitLines(before), splitLines(after))) {
+    if (edit.kind === "remove") {
+      removed.push(edit.value);
+      continue;
+    }
+    if (edit.kind === "insert") {
+      added.push(edit.value);
+      continue;
+    }
+    flush();
+    beforeNumber += 1;
+    afterNumber += 1;
+    rows.push({
+      before: {
+        key: `b${beforeNumber}`,
+        number: beforeNumber,
+        kind: "same",
+        segments: wholeLine(edit.value)
+      },
+      after: {
+        key: `a${afterNumber}`,
+        number: afterNumber,
+        kind: "same",
+        segments: wholeLine(edit.value)
+      }
+    });
+  }
+  flush();
+  return rows;
+}
+function splitLines(text) {
+  const normalized = text.replace(/\r\n/g, `
+`).replace(/\n$/, "");
+  return normalized === "" ? [] : normalized.split(`
+`);
+}
+function wholeLine(text) {
+  return text === "" ? [] : [{ text, changed: false }];
+}
+function changedSegments(before, after) {
+  const left = [];
+  const right = [];
+  for (const edit of diffSequences(splitWords(before), splitWords(after))) {
+    if (edit.kind !== "insert") {
+      push(left, edit.value, edit.kind === "remove");
+    }
+    if (edit.kind !== "remove") {
+      push(right, edit.value, edit.kind === "insert");
+    }
+  }
+  return [left, right];
+}
+function push(segments, text, changed) {
+  const last = segments.at(-1);
+  if (last && last.changed === changed) {
+    last.text += text;
+    return;
+  }
+  segments.push({ text, changed });
+}
+function splitWords(line) {
+  return line.split(/(\s+)/).filter((part) => part !== "");
+}
+function diffSequences(a, b) {
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) {
+    start += 1;
+  }
+  let end = 0;
+  while (end < a.length - start && end < b.length - start && a[a.length - 1 - end] === b[b.length - 1 - end]) {
+    end += 1;
+  }
+  const head = a.slice(0, start).map((value) => ({ kind: "equal", value }));
+  const tail = a.slice(a.length - end).map((value) => ({ kind: "equal", value }));
+  const midA = a.slice(start, a.length - end);
+  const midB = b.slice(start, b.length - end);
+  return [...head, ...diffMiddle(midA, midB), ...tail];
+}
+function replaceAll(a, b) {
+  return [
+    ...a.map((value) => ({ kind: "remove", value })),
+    ...b.map((value) => ({ kind: "insert", value }))
+  ];
+}
+function lcsTable(a, b) {
+  const width = b.length + 1;
+  const lengths = new Uint32Array((a.length + 1) * width);
+  for (let i = a.length - 1;i >= 0; i -= 1) {
+    for (let j = b.length - 1;j >= 0; j -= 1) {
+      lengths[i * width + j] = a[i] === b[j] ? (lengths[(i + 1) * width + j + 1] ?? 0) + 1 : Math.max(lengths[(i + 1) * width + j] ?? 0, lengths[i * width + j + 1] ?? 0);
+    }
+  }
+  return lengths;
+}
+function diffMiddle(a, b) {
+  if (a.length === 0 || b.length === 0 || a.length * b.length > MAX_DP_CELLS) {
+    return replaceAll(a, b);
+  }
+  return walkLcsTable(a, b, lcsTable(a, b));
+}
+function walkLcsTable(a, b, lengths) {
+  const width = b.length + 1;
+  const edits = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length && j < b.length) {
+    const left = a[i];
+    const right = b[j];
+    if (left === right) {
+      edits.push({ kind: "equal", value: left });
+      i += 1;
+      j += 1;
+    } else if ((lengths[(i + 1) * width + j] ?? 0) >= (lengths[i * width + j + 1] ?? 0)) {
+      edits.push({ kind: "remove", value: left });
+      i += 1;
+    } else {
+      edits.push({ kind: "insert", value: right });
+      j += 1;
+    }
+  }
+  return [...edits, ...replaceAll(a.slice(i), b.slice(j))];
+}
+
+// src/question.ts
+var OTHER_VALUE = "pragma:other";
+function toggleChoice(current, value, multiple) {
+  if (!multiple)
+    return [value];
+  return current.includes(value) ? current.filter((entry) => entry !== value) : [...current, value];
+}
+function composeAnswer(selected, other) {
+  return selected.map((value) => value === OTHER_VALUE ? other.trim() : value).filter((value) => value !== "").join(", ");
+}
+
+// src/ui.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var EMPTY_OPTIONS = [];
+function Whiteboard({ id, refreshIntervalMs = 3000 }) {
+  const [snapshot, setSnapshot] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const versionRef = useRef(undefined);
+  const darkRef = useRef(undefined);
+  const mountedRef = useRef(true);
+  const inFlightRef = useRef(false);
+  const openWhiteboard = globalThis.pragmaScratchpad?.openWhiteboard;
+  const open = () => {
+    if (!openWhiteboard)
+      return;
+    openWhiteboard(id).catch((cause) => {
+      if (mountedRef.current)
+        setError(cause instanceof Error ? cause.message : String(cause));
+    });
+  };
+  const refresh = useCallback(async () => {
+    if (inFlightRef.current)
+      return;
+    inFlightRef.current = true;
+    try {
+      const dark = document.documentElement.classList.contains("dark");
+      const knownVersion = darkRef.current === dark ? versionRef.current : undefined;
+      const next = await scratchpadBridge().getWhiteboardSnapshot(id, knownVersion, dark);
+      if (!mountedRef.current)
+        return;
+      if (next) {
+        versionRef.current = next.version;
+        darkRef.current = dark;
+        setSnapshot(next);
+      }
+      setError(null);
+    } catch (cause) {
+      if (mountedRef.current)
+        setError(cause instanceof Error ? cause.message : String(cause));
+    } finally {
+      inFlightRef.current = false;
+      if (mountedRef.current)
+        setLoading(false);
+    }
+  }, [id]);
+  useEffect(() => {
+    mountedRef.current = true;
+    inFlightRef.current = false;
+    versionRef.current = undefined;
+    darkRef.current = undefined;
+    setSnapshot(null);
+    setLoading(true);
+    refresh();
+    const interval = refreshIntervalMs > 0 ? globalThis.setInterval(() => void refresh(), Math.max(1000, refreshIntervalMs)) : null;
+    return () => {
+      mountedRef.current = false;
+      if (interval !== null)
+        globalThis.clearInterval(interval);
+    };
+  }, [refresh, refreshIntervalMs]);
+  return /* @__PURE__ */ jsxs(Card, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-row pragma-row--between",
+        children: [
+          /* @__PURE__ */ jsxs("div", {
+            children: [
+              /* @__PURE__ */ jsx2("span", {
+                className: "pragma-eyebrow",
+                children: "Whiteboard"
+              }),
+              /* @__PURE__ */ jsx2("p", {
+                className: "pragma-title",
+                children: snapshot?.title ?? id
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs("div", {
+            className: "pragma-row",
+            children: [
+              /* @__PURE__ */ jsx2(Badge, {
+                children: "Read only"
+              }),
+              openWhiteboard ? /* @__PURE__ */ jsx2(Button, {
+                onClick: open,
+                size: "sm",
+                variant: "ghost",
+                children: "Open"
+              }) : null,
+              /* @__PURE__ */ jsx2(Button, {
+                disabled: loading,
+                onClick: () => void refresh(),
+                size: "sm",
+                variant: "ghost",
+                children: "Refresh"
+              })
+            ]
+          })
+        ]
+      }),
+      error ? /* @__PURE__ */ jsx2("p", {
+        className: "pragma-whiteboard__error",
+        role: "alert",
+        children: error
+      }) : snapshot ? openWhiteboard ? /* @__PURE__ */ jsx2("button", {
+        "aria-label": `Open ${snapshot.title} whiteboard`,
+        className: "pragma-whiteboard__open",
+        onClick: open,
+        type: "button",
+        children: /* @__PURE__ */ jsx2("img", {
+          alt: `${snapshot.title} whiteboard`,
+          className: "pragma-whiteboard__image",
+          src: snapshot.dataUrl
+        })
+      }) : /* @__PURE__ */ jsx2("img", {
+        alt: `${snapshot.title} whiteboard`,
+        className: "pragma-whiteboard__image",
+        src: snapshot.dataUrl
+      }) : /* @__PURE__ */ jsx2("div", {
+        className: "pragma-empty",
+        children: "Loading whiteboard..."
+      })
+    ]
+  });
+}
+function useAgentAction(options) {
+  const [pending, setPending] = useState(false);
+  const run = async (text, onSent) => {
+    if (pending)
+      return false;
+    setPending(true);
+    try {
+      const delivered = await promptAgent(text, options);
+      if (delivered)
+        await onSent();
+      return delivered;
+    } finally {
+      setPending(false);
+    }
+  };
+  return { pending, run };
+}
+function AskQuestion({
+  question,
+  type = "options",
+  options = EMPTY_OPTIONS,
+  allowOpenResponse = false,
+  submitLabel = "Send answer",
+  onAnswer,
+  onMissingAgent
+}) {
+  const [sent, setSent] = useState(null);
+  const { pending, run } = useAgentAction({ onMissingAgent });
+  const submit = (value) => run(`Answer to scratchpad question "${question}": ${value}`, async () => {
+    await onAnswer?.(value);
+    setSent(value);
+  });
+  return /* @__PURE__ */ jsxs(Card, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-row pragma-row--between",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "pragma-eyebrow",
+            children: "Question"
+          }),
+          sent === null ? null : /* @__PURE__ */ jsx2(Badge, {
+            tone: "success",
+            children: "Answered"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("p", {
+        className: "pragma-title",
+        children: question
+      }),
+      sent === null ? /* @__PURE__ */ jsx2(AskQuestionControls, {
+        allowOpenResponse,
+        options,
+        pending,
+        submit,
+        submitLabel,
+        type
+      }) : /* @__PURE__ */ jsx2(SettledNotice, {
+        detail: `Answered “${sent}”.`,
+        label: "Answer again",
+        onReset: () => setSent(null)
+      })
+    ]
+  });
+}
+function AskQuestionControls({
+  allowOpenResponse,
+  options,
+  pending,
+  submit,
+  submitLabel,
+  type
+}) {
+  if (type === "text") {
+    return /* @__PURE__ */ jsx2(AskQuestionForm, {
+      pending,
+      submit,
+      submitLabel
+    });
+  }
+  return /* @__PURE__ */ jsx2(AskQuestionChoices, {
+    allowOpenResponse,
+    choices: type === "yes-no" ? YES_NO_OPTIONS : options,
+    multiple: type === "multi-select",
+    pending,
+    submit,
+    submitLabel
+  });
+}
+var YES_NO_OPTIONS = [{ label: "Yes" }, { label: "No" }];
+var OTHER_OPTION = { label: "Other", value: OTHER_VALUE };
+function choiceValue(option) {
+  return option.value ?? option.label;
+}
+function AskQuestionChoices({
+  allowOpenResponse,
+  choices,
+  multiple,
+  pending,
+  submit,
+  submitLabel
+}) {
+  const group = useId();
+  const [selected, setSelected] = useState([]);
+  const [other, setOther] = useState("");
+  const items = allowOpenResponse ? [...choices, OTHER_OPTION] : choices;
+  const toggle = (value) => setSelected((current) => toggleChoice(current, value, multiple));
+  const answer = composeAnswer(selected, other);
+  const send = () => {
+    if (!answer)
+      return;
+    submit(answer).then((delivered) => {
+      if (delivered) {
+        setSelected([]);
+        setOther("");
+      }
+      return delivered;
+    });
+  };
+  return /* @__PURE__ */ jsxs("form", {
+    className: "pragma-stack",
+    onSubmit: (event) => {
+      event.preventDefault();
+      send();
+    },
+    children: [
+      /* @__PURE__ */ jsx2("div", {
+        className: "pragma-choices",
+        role: choiceGroupRole(multiple),
+        children: items.map((option) => /* @__PURE__ */ jsx2(ChoiceRow, {
+          checked: selected.includes(choiceValue(option)),
+          disabled: pending,
+          group,
+          multiple,
+          onOtherChange: setOther,
+          onSelect: toggle,
+          option,
+          other
+        }, choiceValue(option)))
+      }),
+      /* @__PURE__ */ jsx2(ChoiceSubmit, {
+        answer,
+        label: submitLabel,
+        pending
+      })
+    ]
+  });
+}
+function choiceGroupRole(multiple) {
+  return multiple ? "group" : "radiogroup";
+}
+function ChoiceSubmit({
+  answer,
+  label,
+  pending
+}) {
+  return /* @__PURE__ */ jsx2("div", {
+    className: "pragma-row pragma-row--end",
+    children: /* @__PURE__ */ jsx2(Button, {
+      disabled: pending || !answer,
+      type: "submit",
+      variant: "primary",
+      children: pending ? "Sending…" : label
+    })
+  });
+}
+function ChoiceRow(props) {
+  const { checked, disabled, group, multiple, onOtherChange, onSelect, option, other } = props;
+  const value = choiceValue(option);
+  const isOtherField = value === OTHER_VALUE && checked;
+  return /* @__PURE__ */ jsx2(Choice, {
+    checked,
+    disabled,
+    label: isOtherField ? /* @__PURE__ */ jsx2(Input, {
+      className: "pragma-choice__other",
+      disabled,
+      onClick: (event) => event.stopPropagation(),
+      onChange: (event) => onOtherChange(event.target.value),
+      placeholder: "Answer in your own words",
+      value: other
+    }) : option.label,
+    multiple,
+    name: group,
+    onSelect: () => onSelect(value)
+  });
+}
+function Choice({
+  checked,
+  disabled,
+  label,
+  multiple,
+  name,
+  onSelect
+}) {
+  const shape = multiple ? "check" : "radio";
+  return /* @__PURE__ */ jsxs("label", {
+    className: `pragma-choice${checked ? " pragma-choice--checked" : ""}`,
+    children: [
+      /* @__PURE__ */ jsx2("input", {
+        checked,
+        className: `pragma-choice__control pragma-choice__control--${shape}`,
+        disabled,
+        name,
+        onChange: onSelect,
+        type: multiple ? "checkbox" : "radio"
+      }),
+      /* @__PURE__ */ jsx2("span", {
+        className: "pragma-choice__label",
+        children: label
+      })
+    ]
+  });
+}
+function AskQuestionForm({
+  pending,
+  submit,
+  submitLabel
+}) {
+  const [answer, setAnswer] = useState("");
+  const send = () => {
+    const value = answer.trim();
+    if (!value)
+      return;
+    submit(value).then((delivered) => {
+      if (delivered)
+        setAnswer("");
+      return delivered;
+    });
+  };
+  return /* @__PURE__ */ jsxs("form", {
+    className: "pragma-stack",
+    onSubmit: (event) => {
+      event.preventDefault();
+      send();
+    },
+    children: [
+      /* @__PURE__ */ jsx2(Textarea, {
+        disabled: pending,
+        onChange: (event) => setAnswer(event.target.value),
+        placeholder: "Type your answer",
+        value: answer
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: "pragma-row pragma-row--end",
+        children: /* @__PURE__ */ jsx2(Button, {
+          disabled: pending || !answer.trim(),
+          type: "submit",
+          variant: "primary",
+          children: pending ? "Sending…" : submitLabel
+        })
+      })
+    ]
+  });
+}
+function DiffReview({
+  title = "Review change",
+  before,
+  after,
+  file,
+  onDecision,
+  onMissingAgent
+}) {
+  const [decision, setDecision] = useState(null);
+  const { pending, run } = useAgentAction({ onMissingAgent });
+  const decide = (accepted) => run(`Scratchpad diff${file ? ` for ${file}` : ""} was ${verdict(accepted)}.`, async () => {
+    await onDecision?.(accepted);
+    setDecision(accepted);
+  });
+  return /* @__PURE__ */ jsxs(Card, {
+    children: [
+      /* @__PURE__ */ jsx2(DiffHeader, {
+        decision,
+        file,
+        title
+      }),
+      /* @__PURE__ */ jsx2(DiffPanes, {
+        after,
+        before
+      }),
+      decision === null ? /* @__PURE__ */ jsx2(DiffActions, {
+        decide,
+        pending
+      }) : /* @__PURE__ */ jsx2(SettledNotice, {
+        detail: `Change ${verdict(decision)}.`,
+        label: "Decide again",
+        onReset: () => setDecision(null)
+      })
+    ]
+  });
+}
+function DiffHeader({
+  decision,
+  file,
+  title
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "pragma-row pragma-row--between",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-row",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "pragma-title",
+            children: title
+          }),
+          file ? /* @__PURE__ */ jsx2("code", {
+            className: "pragma-chip",
+            children: file
+          }) : null
+        ]
+      }),
+      decision === null ? null : /* @__PURE__ */ jsx2(Badge, {
+        tone: decision ? "success" : "danger",
+        children: verdictLabel(decision)
+      })
+    ]
+  });
+}
+function DiffActions({
+  decide,
+  pending
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "pragma-row pragma-row--end",
+    children: [
+      /* @__PURE__ */ jsx2(Button, {
+        disabled: pending,
+        onClick: () => void decide(false),
+        variant: "outline",
+        children: "Reject"
+      }),
+      /* @__PURE__ */ jsx2(Button, {
+        disabled: pending,
+        onClick: () => void decide(true),
+        variant: "primary",
+        children: "Accept"
+      })
+    ]
+  });
+}
+function verdict(accepted) {
+  return accepted ? "accepted" : "rejected";
+}
+function verdictLabel(accepted) {
+  return accepted ? "Accepted" : "Rejected";
+}
+function DiffPanes({ after, before }) {
+  const rows = useMemo(() => alignDiffLines(before, after), [before, after]);
+  return /* @__PURE__ */ jsxs("div", {
+    className: "pragma-diff",
+    children: [
+      /* @__PURE__ */ jsx2(DiffPane, {
+        label: "Before",
+        lines: rows.map((row) => row.before),
+        side: "before"
+      }),
+      /* @__PURE__ */ jsx2(DiffPane, {
+        label: "After",
+        lines: rows.map((row) => row.after),
+        side: "after"
+      })
+    ]
+  });
+}
+function segmentNodes(line) {
+  let column = 0;
+  return line.segments.map((segment) => {
+    const key = `${line.key}:${column}`;
+    column += segment.text.length;
+    return /* @__PURE__ */ jsx2("span", {
+      className: segment.changed ? "pragma-diff__changed" : undefined,
+      children: segment.text
+    }, key);
+  });
+}
+function DiffPane({
+  label,
+  lines,
+  side
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: `pragma-diff__pane pragma-diff__pane--${side}`,
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-diff__label",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            children: label
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            children: side === "before" ? "−" : "+"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        className: "pragma-diff__lines",
+        children: lines.map((line) => /* @__PURE__ */ jsxs("div", {
+          className: `pragma-diff__line pragma-diff__line--${line.kind}`,
+          children: [
+            /* @__PURE__ */ jsx2("span", {
+              "aria-hidden": line.number === null,
+              className: "pragma-diff__gutter",
+              children: line.number ?? ""
+            }),
+            /* @__PURE__ */ jsx2("code", {
+              className: "pragma-diff__text",
+              children: segmentNodes(line)
+            })
+          ]
+        }, line.key))
+      })
+    ]
+  });
+}
+function SettledNotice({
+  detail,
+  label,
+  onReset
+}) {
+  return /* @__PURE__ */ jsxs("div", {
+    className: "pragma-row pragma-row--between",
+    children: [
+      /* @__PURE__ */ jsx2("span", {
+        className: "pragma-hint",
+        children: detail
+      }),
+      /* @__PURE__ */ jsx2(Button, {
+        onClick: onReset,
+        size: "sm",
+        variant: "ghost",
+        children: label
+      })
+    ]
+  });
+}
+function AgentProgress({
+  tabIds,
+  title = "Agent progress"
+}) {
+  const [entries, setEntries] = useState([]);
+  const key = tabIds.join(" ");
+  const tabIdsRef = useRef(tabIds);
+  tabIdsRef.current = tabIds;
+  useEffect(() => scratchpadBridge().subscribeAgentProgress(tabIdsRef.current, setEntries), [key]);
+  return /* @__PURE__ */ jsxs(Card, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-row pragma-row--between",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "pragma-title",
+            children: title
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: "pragma-hint",
+            children: [
+              entries.length,
+              " ",
+              entries.length === 1 ? "tab" : "tabs"
+            ]
+          })
+        ]
+      }),
+      entries.length === 0 ? /* @__PURE__ */ jsx2("p", {
+        className: "pragma-empty",
+        children: "No agent tabs are reporting yet."
+      }) : /* @__PURE__ */ jsx2("div", {
+        className: "pragma-stack",
+        children: entries.map((entry) => /* @__PURE__ */ jsx2(AgentProgressRow, {
+          entry
+        }, entry.tabId))
+      })
+    ]
+  });
+}
+function AgentProgressRow({ entry }) {
+  const meta = STATUS_META[entry.status];
+  return /* @__PURE__ */ jsxs("div", {
+    className: "pragma-progress-row",
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        className: "pragma-row pragma-row--between",
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "pragma-progress-row__name",
+            children: entry.title ?? entry.agent ?? entry.tabId
+          }),
+          /* @__PURE__ */ jsx2(Badge, {
+            tone: meta.tone,
+            children: meta.label
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx2(Progress, {
+        max: 100,
+        tone: meta.tone,
+        value: meta.value
+      })
+    ]
+  });
+}
+var STATUS_META = {
+  running: { label: "Running", tone: "primary", value: 40 },
+  attention: { label: "Needs attention", tone: "warning", value: 70 },
+  done: { label: "Done", tone: "success", value: 100 },
+  cleared: { label: "Idle", tone: "neutral", value: 100 }
+};
+export {
+  Whiteboard,
+  Textarea,
+  Progress,
+  Input,
+  DiffReview,
+  Card,
+  Button,
+  Badge,
+  AskQuestion,
+  AgentProgress
+};