konpeki 0.1.1 → 0.2.0

package/src/app/App.tsx

@@ -28,7 +28,8 @@ import {
 import { clearStoredDraft, loadDraft, persistDraft } from "../lib/storage.ts";
 import { diagramDefinition } from "../../composition/visualizations.ts";
 import { Canvas } from "../components/Canvas.tsx";
-import { LeftPanel } from "../components/LeftPanel.tsx";
+import { BuildOrb } from "../components/BuildOrb.tsx";
+import { LeftPanel, type LeftPanelView } from "../components/LeftPanel.tsx";
 import { Presentation } from "../components/Presentation.tsx";
 import {
   RightPanel,
@@ -39,6 +40,8 @@ import { exampleDraft } from "../lib/examples.ts";
 import { exportPagePNG } from "../lib/export-png.ts";
 import { fileSessionToken } from "../lib/file-session.ts";
 import { useFileSession } from "../lib/use-file-session.ts";
+import { RevisionNotes } from "../components/RevisionNotes.tsx";
+import type { ReviewTarget } from "../lib/review.ts";
 
 const sessionToken = fileSessionToken();
 
@@ -72,9 +75,11 @@ export function App() {
   const [error, setError] = useState(loaded.error ?? "");
   const [notice, setNotice] = useState<{
     message: string;
+    tone: "neutral" | "error";
   }>();
   const [toastClosing, setToastClosing] = useState(false);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
+  const [leftView, setLeftView] = useState<LeftPanelView>("pages");
   const [rightCollapsed, setRightCollapsed] = useState(false);
   const [rightView, setRightView] = useState<RightPanelView>("settings");
   const [vectorEditRequest, setVectorEditRequest] = useState(0);
@@ -152,6 +157,21 @@ export function App() {
     }, 280);
     return () => window.clearTimeout(timer);
   }, [toastClosing]);
+  useEffect(() => {
+    const narrow = window.matchMedia("(max-width: 1200px)");
+    const compact = window.matchMedia("(max-width: 900px)");
+    const adaptPanels = () => {
+      setRightCollapsed(narrow.matches);
+      setLeftCollapsed(compact.matches);
+    };
+    adaptPanels();
+    narrow.addEventListener("change", adaptPanels);
+    compact.addEventListener("change", adaptPanels);
+    return () => {
+      narrow.removeEventListener("change", adaptPanels);
+      compact.removeEventListener("change", adaptPanels);
+    };
+  }, []);
   useEffect(() => {
     function keydown(event: KeyboardEvent) {
       if (presenting || fileSession.building) return;
@@ -163,12 +183,13 @@ export function App() {
       const slideRename =
         target instanceof HTMLInputElement &&
         target.getAttribute("aria-label") === "Page name";
+      const noteEditing = target instanceof HTMLTextAreaElement && target.id === "revision-note";
       if (event.key === "Escape" && !editable && vectorSelection) {
         setVectorSelection(undefined);
         return;
       }
       if (modifier && !event.altKey && event.key.toLowerCase() === "z") {
-        if (slideRename) return;
+        if (slideRename || noteEditing) return;
         event.preventDefault();
         setHistory((current) =>
           event.shiftKey ? redoHistory(current) : undoHistory(current),
@@ -180,7 +201,7 @@ export function App() {
         !event.altKey &&
         event.key.toLowerCase() === "y"
       ) {
-        if (slideRename) return;
+        if (slideRename || noteEditing) return;
         event.preventDefault();
         setHistory(redoHistory);
         return;
@@ -211,9 +232,9 @@ export function App() {
     window.addEventListener("keydown", keydown);
     return () => window.removeEventListener("keydown", keydown);
   }, [draft, presenting, selected, vectorSelection, fileSession.building]);
-  function showNotice(message: string) {
+  function showNotice(message: string, tone: "neutral" | "error" = "neutral") {
     setToastClosing(false);
-    setNotice({ message: message.replace(/\.$/, "") });
+    setNotice({ message: message.replace(/\.$/, ""), tone });
   }
   function updateDraft(
     next: Draft,
@@ -253,7 +274,7 @@ export function App() {
   function addNewSlide() {
     const result = appendSlide(draft);
     if (!result.slideId) {
-      showNotice("Could not add a page until the composition is valid.");
+      showNotice("Could not add a page until the composition is valid.", "error");
       return;
     }
     focusAfterHistory.current = true;
@@ -265,7 +286,7 @@ export function App() {
   }
   function removeExistingSlide(id: string) {
     if (draft.slides.length === 1) {
-      showNotice("A document needs at least one page.");
+      showNotice("A document needs at least one page.", "error");
       return;
     }
     const index = draft.slides.findIndex((item) => item.id === id);
@@ -400,7 +421,7 @@ export function App() {
   function remove(id: string) {
     const issue = componentRemovalIssue(draft, id, slide.id);
     if (issue) {
-      showNotice(issue);
+      showNotice(issue, "error");
       return;
     }
     const index = slide.components.findIndex((component) => component.id === id);
@@ -414,14 +435,34 @@ export function App() {
     updateDraft(next, { selected: nextSelected });
     showNotice("Component deleted.");
   }
+  function selectNoteTarget(target: ReviewTarget & { id?: string }) {
+    const page = draft.slides.find(s => s.id === target.slideId);
+    if (!page) return;
+    selectSlide(page.id);
+    setLeftCollapsed(false);
+    setLeftView("notes");
+    const component = page.components.find(c => c.id === target.componentId);
+    if (component) {
+      selectComponent(component.id);
+      if (target.elementId && component.customVisual?.format === "vector" && component.customVisual.elements.some(e => e.id === target.elementId))
+        setVectorSelection({ componentId: component.id, elementId: target.elementId });
+    }
+    if (target.id) requestAnimationFrame(() => document.getElementById(`note-${target.id}`)?.scrollIntoView({ block: "nearest" }));
+  }
   async function requestBuild() {
     try {
-      const instruction = selected
+      const instruction = fileSession.review.notes.some(note => !note.resolved)
+        ? "Apply the attached revision notes to their named targets. Preserve unrelated human edits. Validate and inspect the result, then acknowledge this request with konpeki finish."
+        : selected
         ? "Review the selected component in context and build it from the current saved composition."
         : "Review the current slides and build them from the current saved composition.";
-      await fileSession.build(instruction, slide.id, selected);
+      const requested = await fileSession.build(instruction, slide.id, selected, vectorSelection?.componentId === selected ? vectorSelection?.elementId : undefined);
+      if (requested) {
+        setNotice(undefined);
+        setToastClosing(false);
+      }
     } catch (requestError) {
-      showNotice(requestError instanceof Error ? requestError.message : "Could not send the build request.");
+      showNotice(requestError instanceof Error ? requestError.message : "Could not send the build request.", "error");
     }
   }
   async function openComposition(file: File) {
@@ -429,12 +470,12 @@ export function App() {
     try {
       raw = await file.text();
     } catch {
-      showNotice("Could not read that composition file.");
+      showNotice("Could not read that composition file.", "error");
       return;
     }
     const parsed = parseCompositionJSON(raw);
     if (!parsed.ok) {
-      showNotice(`Could not open: ${parsed.message}`);
+      showNotice(`Could not open: ${parsed.message}`, "error");
       return;
     }
     focusAfterHistory.current = true;
@@ -451,6 +492,7 @@ export function App() {
       const issue = validation.issues[0];
       showNotice(
         `Cannot present: ${issue?.path || "document"} ${issue?.message || "is invalid"}.`,
+        "error",
       );
       return;
     }
@@ -476,6 +518,7 @@ export function App() {
     } catch (exportError) {
       showNotice(
         `Could not export PNG: ${exportError instanceof Error ? exportError.message : "Unknown error"}`,
+        "error",
       );
     } finally {
       setExportBusy(false);
@@ -496,6 +539,9 @@ export function App() {
     }
   }
   const selectedComponent = slide.components.find((c) => c.id === selected);
+  const buildState = fileSession.building
+    ? fileSession.review.request?.status === "working" ? "working" : "ready"
+    : undefined;
   function useComponentTool(kind: CompositionComponent["kind"]) {
     add(kind);
   }
@@ -549,6 +595,7 @@ export function App() {
           onPresent={present}
           fileStatus={loaded.fileSession ? fileSession.status : undefined}
           building={fileSession.building}
+          buildState={buildState}
           onBuild={loaded.fileSession ? () => { void requestBuild(); } : undefined}
           onSelectTool={() => selectComponent()}
           onComponentTool={useComponentTool}
@@ -556,6 +603,17 @@ export function App() {
         <div className="editor-content" inert={fileSession.building} aria-busy={fileSession.building}>
         <LeftPanel
           draft={draft}
+          view={leftView}
+          onView={setLeftView}
+          revisionNotes={loaded.fileSession && <RevisionNotes
+            document={draft}
+            target={{ slideId: slide.id, ...(selected ? { componentId: selected } : {}), ...(vectorSelection?.componentId === selected && vectorSelection?.elementId ? { elementId: vectorSelection.elementId } : {}) }}
+            review={fileSession.review}
+            disabled={fileSession.building || fileSession.status !== "saved"}
+            onAdd={fileSession.addNote}
+            onRemove={fileSession.removeNote}
+            onSelect={selectNoteTarget}
+          />}
           activeSlideId={slide.id}
           collapsed={leftCollapsed}
           onSelectSlide={selectSlide}
@@ -564,6 +622,8 @@ export function App() {
         />
         <Canvas
           key={slide.id}
+          revisionNotes={fileSession.review.notes.filter(note => !note.resolved)}
+          onSelectNote={selectNoteTarget}
           draft={draft}
           activeSlideId={slide.id}
           selected={selected}
@@ -652,9 +712,23 @@ export function App() {
         {fileSession.building && (
           <div className="stage build-loading" role="status" aria-live="polite">
             <div className="build-loading-card">
-              <div className="build-loading-track" aria-hidden="true" />
-              <strong>Waiting for agent</strong>
-              <span>Your canvas will refresh when changes arrive.</span>
+              <div className="build-nebula"><BuildOrb active nebula /></div>
+              {buildState === "working" ? <>
+                <strong>Agent working</strong>
+                <span>Updating this composition. Editing resumes when the request finishes.</span>
+              </> : <>
+                <strong>Request ready</strong>
+                <span>Copy the handoff prompt to ask your coding agent to apply these changes.</span>
+                <button type="button" className="primary" onClick={async () => {
+                  try {
+                    await navigator.clipboard.writeText("Pick up my pending Konpeki request and apply the changes.");
+                    showNotice("Prompt copied");
+                  } catch {
+                    showNotice("Could not copy. Ask your coding agent to pick up your pending Konpeki request", "error");
+                  }
+                }}>Copy prompt</button>
+              </>}
+              <button type="button" onClick={() => { void fileSession.cancel().catch(error => showNotice(error.message, "error")); }}>Cancel request</button>
             </div>
           </div>
         )}
@@ -667,9 +741,9 @@ export function App() {
         />
       )}
       <div
-        className={`toast ${notice ? "visible" : ""} ${toastClosing ? "closing" : ""}`}
+        className={`toast ${notice ? "visible" : ""} ${notice?.tone === "error" ? "error" : ""} ${toastClosing ? "closing" : ""}`}
       >
-        <span role="status" aria-live="polite">
+        <span role={notice?.tone === "error" ? "alert" : "status"} aria-live={notice?.tone === "error" ? "assertive" : "polite"}>
           {notice?.message}
         </span>
       </div>

package/src/components/BuildOrb.tsx

@@ -0,0 +1,40 @@
+import type { CSSProperties } from "react";
+
+/** Decorative, deterministic particles: no timers or animation dependency. */
+export function BuildOrb({ active = false, nebula = false }: { active?: boolean; nebula?: boolean }) {
+  const count = nebula ? 96 : 24;
+  return <svg className={`build-orb${active ? " active" : ""}${nebula ? " nebula" : ""}`} viewBox="0 0 100 100" aria-hidden="true">
+    {Array.from({ length: count }, (_, i) => {
+      const angle = i / count * Math.PI * 2 - Math.PI / 2;
+      const y = nebula ? 34 * (2 * (i + 0.5) / count - 1) : Math.sin(angle) * 34;
+      const radius = Math.sqrt(34 ** 2 - y ** 2);
+      const x = nebula ? Math.cos(i * 2.39996) * radius : Math.cos(angle) * 34;
+      const squareEdge = i / count * 4;
+      const squareVertices = [[-28, -28], [28, -28], [28, 28], [-28, 28]];
+      const squareFrom = squareVertices[Math.floor(squareEdge) % 4];
+      const squareTo = squareVertices[(Math.floor(squareEdge) + 1) % 4];
+      const squareT = squareEdge % 1;
+      const edge = i / count * 3;
+      const vertices = [[0, -36], [32, 24], [-32, 24]];
+      const from = vertices[Math.floor(edge) % 3];
+      const to = vertices[(Math.floor(edge) + 1) % 3];
+      const t = edge % 1;
+      const hexEdge = i / count * 6;
+      const hexAngle = Math.floor(hexEdge) * Math.PI / 3 - Math.PI / 2;
+      const hexT = hexEdge % 1;
+      const style = {
+        "--x": `${x}px`, "--y": `${y}px`,
+        "--sx": `${squareFrom[0] + (squareTo[0] - squareFrom[0]) * squareT}px`,
+        "--sy": `${squareFrom[1] + (squareTo[1] - squareFrom[1]) * squareT}px`,
+        "--tx": `${from[0] + (to[0] - from[0]) * t}px`,
+        "--ty": `${from[1] + (to[1] - from[1]) * t}px`,
+        "--hx": `${34 * ((1 - hexT) * Math.cos(hexAngle) + hexT * Math.cos(hexAngle + Math.PI / 3))}px`,
+        "--hy": `${34 * ((1 - hexT) * Math.sin(hexAngle) + hexT * Math.sin(hexAngle + Math.PI / 3))}px`,
+        "--radius": `${radius}px`,
+        "--phase": `${-i * 2.39996 / (2 * Math.PI) * 12}s`,
+        opacity: nebula ? 0.65 : 1,
+      } as CSSProperties;
+      return <circle key={i} cx="50" cy="50" r={nebula ? 0.8 + (i % 3) * 0.45 : 2.5} style={style} />;
+    })}
+  </svg>;
+}

package/src/components/Canvas.tsx

@@ -26,6 +26,7 @@ import { composerPalette, themeLabel } from "../lib/theme.ts";
 import { getTheme } from "../../design/themes/index.ts";
 import { resolveVectorAttribute } from "../../composition/theme-tokens.ts";
 import { DiagramTypeIcon } from "./DiagramTypeIcon.tsx";
+import type { RevisionNote } from "../lib/review.ts";
 
 type ResizeCorner = "nw" | "ne" | "sw" | "se";
 
@@ -656,6 +657,8 @@ export function Canvas({
   onEditEnd,
   onAdd,
   onNotice,
+  revisionNotes = [],
+  onSelectNote,
 }: {
   mode?: "edit" | "present";
   draft: Draft;
@@ -673,6 +676,8 @@ export function Canvas({
     at: { x: number; y: number },
   ) => void;
   onNotice: (message: string) => void;
+  revisionNotes?: RevisionNote[];
+  onSelectNote?: (note: RevisionNote) => void;
 }) {
   const interactive = mode === "edit";
   const slide = getSlide(draft, activeSlideId);
@@ -1139,6 +1144,18 @@ export function Canvas({
                 </div>
               );
             })}
+          {interactive && revisionNotes.map((note, index) => {
+            if (note.slideId !== slide.id || note.resolved) return null;
+            const component = slide.components.find(c => c.id === note.componentId);
+            if (note.componentId && !component) return null;
+            const rect = component?.preferredRect;
+            const previous = revisionNotes.slice(0, index).filter(n => !n.resolved && n.slideId === note.slideId && n.componentId === note.componentId).length;
+            return <button key={note.id} type="button" className="revision-pin"
+              aria-label={`Revision note ${index + 1}: ${note.text}`} title={note.text}
+              style={{ left: rect ? `clamp(0px, calc(${(rect.x + rect.width) * 100 / slide.canvas.width}% - ${64 + previous * 44}px), calc(100% - 40px))` : `${3 + previous * 44}px`, top: rect ? `max(0px, calc(${rect.y * 100 / slide.canvas.height}% - 32px))` : "3px", zIndex: slide.paintOrder.length + 4 }}
+              onPointerDown={event => event.stopPropagation()}
+              onClick={event => { event.stopPropagation(); onSelectNote?.(note); }}>{index + 1}</button>;
+          })}
           {slide.pageNumber?.style !== "none" && (
             <span
               className={`slide-page-number color-${slide.pageNumber?.color ?? "muted"}`}

package/src/components/InspectorPanel.tsx

@@ -57,6 +57,29 @@ const optionLabels: Record<string, string> = {
   "full-grid": "Full grid",
 };
 
+function VectorActionIcon({ action }: { action: "backward" | "forward" | "delete" }) {
+  return (
+    <svg className="vector-action-icon" viewBox="0 0 20 20" aria-hidden="true">
+      {action === "delete" ? (
+        <>
+          <path d="M4 5h12M8 2.75h4M6 5l.65 11h6.7L14 5" />
+          <path d="M8.25 8v5M11.75 8v5" />
+        </>
+      ) : (
+        <>
+          <rect x="3" y="7" width="8" height="8" rx="1.5" />
+          <path d="M7 4h6a2 2 0 0 1 2 2v6" />
+          {action === "backward" ? (
+            <path d="m12.5 10 2.5 2.5 2.5-2.5" />
+          ) : (
+            <path d="m12.5 6.5 2.5-2.5 2.5 2.5" />
+          )}
+        </>
+      )}
+    </svg>
+  );
+}
+
 function previewCount(key: string, value: string) {
   if (key === "tableStyle") return 6;
   if (key !== "layout") return 4;
@@ -524,7 +547,7 @@ export function InspectorPanel({
           </dl>
           {component.customVisual.format !== "vector" && (
             <p className="field-help">
-              This legacy SVG is an opaque compatibility fallback. Ask an agent to convert it to editable vector elements.
+              This SVG is opaque to the editor. Ask an agent to convert it to editable vector elements.
             </p>
           )}
           {vectorVisual && (
@@ -552,6 +575,8 @@ export function InspectorPanel({
                       <button
                         key={direction}
                         type="button"
+                        aria-label={direction === -1 ? "Send backward" : "Bring forward"}
+                        title={direction === -1 ? "Send backward" : "Bring forward"}
                         disabled={moveVectorElement(vectorVisual.elements, vectorElement.id, direction) === vectorVisual.elements}
                         onClick={() => onComponent({
                           ...component,
@@ -560,10 +585,16 @@ export function InspectorPanel({
                             elements: moveVectorElement(vectorVisual.elements, vectorElement.id, direction),
                           },
                         })}
-                      >{direction === -1 ? "Send backward" : "Bring forward"}</button>
+                      >
+                        <VectorActionIcon action={direction === -1 ? "backward" : "forward"} />
+                        {direction === -1 ? "Back" : "Forward"}
+                      </button>
                     ))}
                     <button
                       type="button"
+                      className="vector-delete-action"
+                      aria-label="Delete element"
+                      title="Delete element"
                       onClick={() => {
                         onComponent({
                           ...component,
@@ -574,7 +605,10 @@ export function InspectorPanel({
                         });
                         onSelectVectorElement(undefined);
                       }}
-                    >Delete element</button>
+                    >
+                      <VectorActionIcon action="delete" />
+                      Delete
+                    </button>
                   </div>
                   {(vectorElement.kind === "text" || vectorElement.kind === "tspan") && (
                     <Field label="Text">

package/src/components/LeftPanel.tsx

@@ -1,10 +1,12 @@
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import type {
   CompositionSlide,
   ThemeMode,
 } from "../../composition/types.ts";
 import type { Draft } from "../lib/model.ts";
 
+export type LeftPanelView = "pages" | "notes";
+
 function ThumbnailCanvas({
   slide,
   themeMode,
@@ -50,6 +52,9 @@ export function LeftPanel({
   draft,
   activeSlideId,
   collapsed,
+  view,
+  onView,
+  revisionNotes,
   onSelectSlide,
   onAddSlide,
   onRemoveSlide,
@@ -57,6 +62,9 @@ export function LeftPanel({
   draft: Draft;
   activeSlideId: string;
   collapsed: boolean;
+  view: LeftPanelView;
+  onView: (view: LeftPanelView) => void;
+  revisionNotes?: ReactNode;
   onSelectSlide: (id: string) => void;
   onAddSlide: () => void;
   onRemoveSlide: (id: string) => void;
@@ -64,9 +72,13 @@ export function LeftPanel({
   return (
     <aside className={`left-panel${collapsed ? " collapsed" : ""}`} aria-label="Workspace panel" inert={collapsed}>
       <div className="panel-toolbar">
-        <span className="panel-heading">Pages</span>
+        {revisionNotes ? <div className="panel-tabs" aria-label="Left panel view">
+          {(["pages", "notes"] as const).map(tab => <button key={tab} type="button"
+            aria-pressed={view === tab} className={view === tab ? "active" : ""}
+            onClick={() => onView(tab)}>{tab === "pages" ? "Pages" : "Notes"}</button>)}
+        </div> : <span className="panel-heading">Pages</span>}
       </div>
-      <div className="slide-list">
+      <div className="slide-list" hidden={!!revisionNotes && view !== "pages"}>
         {draft.slides.map((item, index) => (
           <div key={item.id} className="slide-thumbnail-item">
             <button
@@ -102,6 +114,7 @@ export function LeftPanel({
           <span aria-hidden="true">+</span>
         </button>
       </div>
+      {revisionNotes && <div className="left-notes" hidden={view !== "notes"}>{revisionNotes}</div>}
     </aside>
   );
 }

package/src/components/RevisionNotes.tsx

@@ -0,0 +1,56 @@
+import { useState } from "react";
+import type { CompositionDocument } from "../../composition/types.ts";
+import { componentInstanceLabel } from "../lib/model.ts";
+import { activeRequest, type ReviewState, type ReviewTarget } from "../lib/review.ts";
+
+export function RevisionNotes({ document, target, review, disabled, onAdd, onRemove, onSelect }: {
+  document: CompositionDocument;
+  target: ReviewTarget;
+  review: ReviewState;
+  disabled: boolean;
+  onAdd: (target: ReviewTarget, text: string) => Promise<void>;
+  onRemove: (id: string) => Promise<void>;
+  onSelect: (target: ReviewTarget) => void;
+}) {
+  const [drafts, setDrafts] = useState<Record<string, string>>({});
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const key = JSON.stringify(target);
+  const text = drafts[key] ?? "";
+  function label(value: ReviewTarget) {
+    const slide = document.slides.find(s => s.id === value.slideId);
+    if (!slide) return "Deleted page";
+    const component = slide.components.find(c => c.id === value.componentId);
+    if (value.componentId && !component) return `${slide.name} · Deleted component`;
+    const name = component ? componentInstanceLabel(slide.components, component.id) : "Page";
+    const element = value.elementId && component?.customVisual?.format === "vector"
+      ? component.customVisual.elements.find(e => e.id === value.elementId) : undefined;
+    return `${slide.name} · ${name}${value.elementId ? ` · ${element ? value.elementId : "Deleted element"}` : ""}`;
+  }
+  async function run(action: () => Promise<void>) {
+    setSaving(true); setError("");
+    try { await action(); }
+    catch (error) { setError(error instanceof Error ? error.message : "Could not save revision note"); }
+    finally { setSaving(false); }
+  }
+  const pending = review.notes.filter(n => !n.resolved);
+  return <section className="revision-notes" aria-label="Revision notes">
+    <form onSubmit={event => { event.preventDefault(); void run(async () => {
+      await onAdd(target, text);
+      setDrafts(current => ({ ...current, [key]: "" }));
+    }); }}>
+      <label htmlFor="revision-note">Request a change</label>
+      <p className="revision-note-scope">{label(target)}</p>
+      <textarea id="revision-note" value={text} maxLength={4000} rows={3} placeholder="Describe what to change…" disabled={disabled || saving}
+        onChange={event => setDrafts(current => ({ ...current, [key]: event.target.value }))} />
+      <div className="revision-note-submit"><button type="submit" disabled={disabled || saving || !text.trim()}>{saving ? "Saving…" : "Add note"}</button></div>
+    </form>
+    {error && <p role="alert" className="revision-note-error">{error}</p>}
+    <p className="revision-note-count">{pending.length} pending</p>
+    {pending.length > 0 && <ol className="revision-note-list">{pending.map((note, i) => <li key={note.id} id={`note-${note.id}`}>
+      <button type="button" className="revision-note-target" onClick={() => onSelect(note)}><span>{i + 1}</span>{label(note)}</button>
+      <p>{note.text}</p>
+      <button type="button" className="revision-note-remove" disabled={disabled || saving || activeRequest(review.request)} aria-label={`Remove note ${i + 1}`} onClick={() => { void run(() => onRemove(note.id)); }}>Remove</button>
+    </li>)}</ol>}
+  </section>;
+}

package/src/components/WorkspaceChrome.tsx

@@ -2,6 +2,7 @@ import type { RefObject } from "react";
 import type { CompositionComponent } from "../../composition/types.ts";
 import { componentLabels } from "../lib/model.ts";
 import mark from "../assets/konpeki-mark.png";
+import { BuildOrb } from "./BuildOrb.tsx";
 
 const dockItems: {
   kind: CompositionComponent["kind"];
@@ -65,6 +66,7 @@ export function WorkspaceChrome({
   onPresent,
   fileStatus,
   building,
+  buildState,
   onBuild,
   onSelectTool,
   onComponentTool,
@@ -84,6 +86,7 @@ export function WorkspaceChrome({
   onPresent: () => void;
   fileStatus?: "loading" | "saved" | "saving" | "conflict" | "error";
   building: boolean;
+  buildState?: "ready" | "working";
   onBuild?: () => void;
   onSelectTool: () => void;
   onComponentTool: (kind: CompositionComponent["kind"]) => void;
@@ -149,12 +152,11 @@ export function WorkspaceChrome({
             <path d="m7 14 3.5-4 3 3 2-2 2.5 3M12 16v5m-3-3 3 3 3-3" />
           </svg>
         </button>
-        <button type="button" onClick={onPresent} disabled={building}>
+        <button type="button" className="icon-only" aria-label="Present" title="Present" onClick={onPresent} disabled={building}>
           <svg viewBox="0 0 24 24" aria-hidden="true">
             <rect x="3" y="4" width="18" height="12" rx="2" />
             <path d="M12 16v5m-4 0h8M10 7l5 3-5 3Z" />
           </svg>
-          Present
         </button>
         {onBuild && (
           <button
@@ -164,10 +166,8 @@ export function WorkspaceChrome({
             aria-busy={building}
             onClick={onBuild}
           >
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="m5 19 10-10 3 3L8 22Zm10-10 2-2 3 3-2 2M5 3v6M2 6h6m10-5v4m-2-2h4" />
-            </svg>
-            <span>{building ? "Building…" : "Build it"}</span>
+            <BuildOrb active={building} />
+            <span className="build-label">{buildState === "ready" ? "Request ready" : buildState === "working" ? "Agent working" : "Build it"}</span>
           </button>
         )}
       </div>

package/src/lib/examples/react-page-migration.json

@@ -1,5 +1,5 @@
 {
-  "schema": "konpeki-composition/v14",
+  "schema": "konpeki-composition/v1",
   "title": "Parcel Relay — migrated React deck",
   "theme": {
     "id": "plex",

package/src/lib/export-png.ts

@@ -48,7 +48,7 @@ export async function exportPagePNG(
   });
   clone
     .querySelectorAll(
-      ".resize-handle, .guide, .vector-handles, .inline-intent-editor",
+      ".resize-handle, .guide, .vector-handles, .inline-intent-editor, .revision-pin",
     )
     .forEach((node) => node.remove());
   const rect = source.getBoundingClientRect();
@@ -56,6 +56,9 @@ export async function exportPagePNG(
   clone.style.height = `${rect.height}px`;
   clone.style.margin = "0";
   clone.style.overflow = "hidden";
+  // Loading feedback belongs to the editor, never to the exported artwork.
+  clone.style.filter = "none";
+  clone.style.opacity = "1";
   const fontRules = Array.from(document.styleSheets).flatMap((sheet) =>
     Array.from(sheet.cssRules).filter(
       (rule): rule is CSSFontFaceRule => rule instanceof CSSFontFaceRule,

package/src/lib/file-session.ts

@@ -1,9 +1,11 @@
 import type { CompositionDocument } from "../../composition/types.ts";
+import type { ReviewState, ReviewTarget } from "./review.ts";
 
 export type FileSessionDocument = {
   document: CompositionDocument;
   revision: string;
   name: string;
+  review: ReviewState;
 };
 
 export class FileSessionError extends Error {
@@ -65,10 +67,21 @@ export function sendBuildRequest(
     instruction: string;
     slideId: string;
     componentId?: string;
+    elementId?: string;
   },
 ) {
-  return request<{ ok: true }>(token, "/build", {
+  return request<ReviewState>(token, "/build", {
     method: "POST",
     body: JSON.stringify(requestBody),
   });
 }
+
+export function addNote(token: string, target: ReviewTarget, text: string) {
+  return request<ReviewState>(token, "/notes", { method: "POST", body: JSON.stringify({ ...target, text }) });
+}
+export function removeNote(token: string, id: string) {
+  return request<ReviewState>(token, "/notes", { method: "DELETE", body: JSON.stringify({ id }) });
+}
+export function cancelRequest(token: string, id: string) {
+  return request<ReviewState>(token, "/cancel", { method: "POST", body: JSON.stringify({ id }) });
+}