konpeki 0.1.0 → 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,15 +75,15 @@ export function App() {
   const [error, setError] = useState(loaded.error ?? "");
   const [notice, setNotice] = useState<{
     message: string;
-    undoableFor?: Draft;
+    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);
   const [presenting, setPresenting] = useState(false);
-  const [buildBusy, setBuildBusy] = useState(false);
   const [exportBusy, setExportBusy] = useState(false);
   const [vectorSelection, setVectorSelection] = useState<{
     componentId: string;
@@ -105,7 +108,6 @@ export function App() {
         ) ? current.present.activeSlideId : document.slides[0].id,
         selected: undefined,
       }));
-      showNotice("Agent changes loaded. Undo restores the previous composition.");
     },
     onNotice: showNotice,
     onError: setError,
@@ -144,7 +146,7 @@ export function App() {
   }, [draft, blocked, loaded.example, loaded.fileSession]);
   useEffect(() => {
     if (!notice) return;
-    const timer = window.setTimeout(() => setToastClosing(true), 5000);
+    const timer = window.setTimeout(() => setToastClosing(true), 3000);
     return () => window.clearTimeout(timer);
   }, [notice]);
   useEffect(() => {
@@ -155,9 +157,24 @@ 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) return;
+      if (presenting || fileSession.building) return;
       const modifier = event.metaKey || event.ctrlKey;
       const target = event.target;
       const editable =
@@ -166,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),
@@ -183,7 +201,7 @@ export function App() {
         !event.altKey &&
         event.key.toLowerCase() === "y"
       ) {
-        if (slideRename) return;
+        if (slideRename || noteEditing) return;
         event.preventDefault();
         setHistory(redoHistory);
         return;
@@ -213,10 +231,10 @@ export function App() {
     }
     window.addEventListener("keydown", keydown);
     return () => window.removeEventListener("keydown", keydown);
-  }, [draft, presenting, selected, vectorSelection]);
-  function showNotice(message: string, undoableFor?: Draft) {
+  }, [draft, presenting, selected, vectorSelection, fileSession.building]);
+  function showNotice(message: string, tone: "neutral" | "error" = "neutral") {
     setToastClosing(false);
-    setNotice({ message, undoableFor });
+    setNotice({ message: message.replace(/\.$/, ""), tone });
   }
   function updateDraft(
     next: Draft,
@@ -256,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;
@@ -268,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);
@@ -283,15 +301,11 @@ export function App() {
       activeSlideId: nextActiveSlideId,
       selected: id === slide.id ? undefined : selected,
     });
-    showNotice("Page deleted.", next);
+    showNotice("Page deleted.");
   }
   function finishEdit() {
     setHistory(finishHistoryEdit);
   }
-  function performUndo() {
-    focusAfterHistory.current = true;
-    setHistory(undoHistory);
-  }
   function performRedo() {
     focusAfterHistory.current = true;
     setHistory(redoHistory);
@@ -407,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);
@@ -419,20 +433,36 @@ export function App() {
         : selected;
     focusAfterHistory.current = true;
     updateDraft(next, { selected: nextSelected });
-    showNotice("Component deleted.", next);
+    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() {
-    setBuildBusy(true);
     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.";
-      if (!await fileSession.build(instruction, slide.id, selected)) return;
-      showNotice("Build request sent. The agent will reread this saved revision.");
+      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.");
-    } finally {
-      setBuildBusy(false);
+      showNotice(requestError instanceof Error ? requestError.message : "Could not send the build request.", "error");
     }
   }
   async function openComposition(file: File) {
@@ -440,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;
@@ -454,7 +484,7 @@ export function App() {
       selected: undefined,
     });
     setTitleError(false);
-    showNotice("Editable composition opened. Undo restores the previous document.", parsed.document);
+    showNotice("Editable composition opened. Undo restores the previous document.");
   }
   function present() {
     const validation = validateComposition(draft);
@@ -462,6 +492,7 @@ export function App() {
       const issue = validation.issues[0];
       showNotice(
         `Cannot present: ${issue?.path || "document"} ${issue?.message || "is invalid"}.`,
+        "error",
       );
       return;
     }
@@ -487,6 +518,7 @@ export function App() {
     } catch (exportError) {
       showNotice(
         `Could not export PNG: ${exportError instanceof Error ? exportError.message : "Unknown error"}`,
+        "error",
       );
     } finally {
       setExportBusy(false);
@@ -507,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);
   }
@@ -524,7 +559,7 @@ export function App() {
         </div>
       )}
       <div
-        className={`workspace ${leftCollapsed ? "left-collapsed" : ""} ${rightCollapsed ? "right-collapsed" : ""}`}
+        className={`workspace ${fileSession.building ? "is-building" : ""} ${leftCollapsed ? "left-collapsed" : ""} ${rightCollapsed ? "right-collapsed" : ""}`}
         aria-hidden={presenting || undefined}
         inert={presenting || undefined}
         onDragOver={(event) => {
@@ -533,6 +568,10 @@ export function App() {
           event.dataTransfer.dropEffect = "copy";
         }}
         onDrop={(event) => {
+          if (fileSession.building) {
+            event.preventDefault();
+            return;
+          }
           const file = event.dataTransfer.files[0];
           if (!file) return;
           event.preventDefault();
@@ -555,13 +594,26 @@ export function App() {
           exporting={exportBusy}
           onPresent={present}
           fileStatus={loaded.fileSession ? fileSession.status : undefined}
-          building={buildBusy}
+          building={fileSession.building}
+          buildState={buildState}
           onBuild={loaded.fileSession ? () => { void requestBuild(); } : undefined}
           onSelectTool={() => selectComponent()}
           onComponentTool={useComponentTool}
         />
+        <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}
@@ -570,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}
@@ -654,6 +708,30 @@ export function App() {
           }
           onEditEnd={finishEdit}
         />
+        </div>
+        {fileSession.building && (
+          <div className="stage build-loading" role="status" aria-live="polite">
+            <div className="build-loading-card">
+              <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>
+        )}
       </div>
       {presenting && (
         <Presentation
@@ -663,31 +741,11 @@ 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>
-        {notice?.undoableFor === draft && (
-          <button
-            type="button"
-            onClick={() => {
-              performUndo();
-              showNotice("Change undone.");
-            }}
-          >
-            Undo
-          </button>
-        )}
-        {notice && (
-          <button
-            type="button"
-            aria-label="Dismiss notification"
-            onClick={() => setToastClosing(true)}
-          >
-            ×
-          </button>
-        )}
       </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;
@@ -502,7 +525,6 @@ export function InspectorPanel({
       {component.customVisual && (
         <fieldset className="custom-visual-summary">
           <legend>Agent visual</legend>
-          <p>{component.customVisual.description}</p>
           <dl>
             <div>
               <dt>Source</dt>
@@ -523,11 +545,11 @@ export function InspectorPanel({
               <dd>{component.customVisual.fit ?? "contain"}</dd>
             </div>
           </dl>
-          <p className="field-help">
-            {component.customVisual.format === "vector"
-              ? "Select the visual and press Enter or choose Edit elements. Double-click an element to edit its text or attributes here. Only top-level line endpoints have drag handles; paths use attribute controls."
-              : "This legacy SVG is an opaque compatibility fallback. Ask an agent to convert it to editable vector elements."}
-          </p>
+          {component.customVisual.format !== "vector" && (
+            <p className="field-help">
+              This SVG is opaque to the editor. Ask an agent to convert it to editable vector elements.
+            </p>
+          )}
           {vectorVisual && (
             <>
               <Field label="Vector element">
@@ -553,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,
@@ -561,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,
@@ -575,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>;
+}