konpeki 0.1.0 → 0.2.0

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;
@@ -100,6 +103,7 @@ export function WorkspaceChrome({
             aria-describedby={titleError ? "title-error" : undefined}
             name="composition-title"
             autoComplete="off"
+            disabled={building}
             value={title}
             onChange={(event) => onTitle(event.target.value, "title")}
             onBlur={onEditEnd}
@@ -140,7 +144,7 @@ export function WorkspaceChrome({
           className="icon-only"
           aria-label="Export PNG"
           title="Export active page as PNG"
-          disabled={exporting}
+          disabled={exporting || building}
           onClick={onExportPNG}
         >
           <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -148,29 +152,27 @@ 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}>
+        <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
             type="button"
-            className="primary"
+            className={`primary build-button ${building ? "building" : ""}`}
             disabled={fileStatus !== "saved" || building}
+            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>
-            {building ? "Building…" : "Build it"}
+            <BuildOrb active={building} />
+            <span className="build-label">{buildState === "ready" ? "Request ready" : buildState === "working" ? "Agent working" : "Build it"}</span>
           </button>
         )}
       </div>
 
-      <nav className="component-dock" aria-label="Canvas tools">
+      <nav className="component-dock" aria-label="Canvas tools" inert={building}>
         <button
           type="button"
           className={!selectedKind ? "active" : ""}

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 }) });
+}

package/src/lib/review.ts

@@ -0,0 +1,26 @@
+export type ReviewTarget = { slideId: string; componentId?: string; elementId?: string };
+export type RevisionNote = ReviewTarget & {
+  id: string;
+  text: string;
+  resolved: boolean;
+};
+export type BuildRequest = ReviewTarget & {
+  schema: "konpeki-build-request/v2";
+  id: string;
+  compositionPath: string;
+  revision: string;
+  instruction: string;
+  notes: RevisionNote[];
+  status: "submitted" | "working" | "done" | "needs-clarification" | "failed";
+  message?: string;
+  resultRevision?: string;
+};
+export type ReviewState = {
+  schema: "konpeki-review/v1";
+  version: number;
+  notes: RevisionNote[];
+  request?: BuildRequest;
+};
+export const emptyReview = (): ReviewState => ({ schema: "konpeki-review/v1", version: 0, notes: [] });
+export const activeRequest = (request?: BuildRequest) =>
+  request?.status === "submitted" || request?.status === "working";

package/src/lib/use-file-session.ts

@@ -2,7 +2,11 @@ import { useEffect, useRef, useState } from "react";
 import { canonicalJSON } from "../../composition/compile.ts";
 import { validateComposition } from "../../composition/validate.ts";
 import type { Draft } from "./model.ts";
+import { activeRequest, emptyReview, type ReviewState, type ReviewTarget } from "./review.ts";
 import {
+  addNote,
+  removeNote,
+  cancelRequest,
   FileSessionError,
   fileSessionToken,
   loadFileSession,
@@ -15,7 +19,7 @@ export type FileStatus = "loading" | "saved" | "saving" | "conflict" | "error";
 type Callbacks = {
   onOpen: (draft: Draft, name: string) => void;
   onExternalChange: (draft: Draft) => void;
-  onNotice: (message: string) => void;
+  onNotice: (message: string, tone?: "neutral" | "error") => void;
   onError: (message: string) => void;
 };
 
@@ -26,6 +30,11 @@ export function useFileSession(
 ) {
   const token = fileSessionToken();
   const [status, setStatus] = useState<FileStatus>(enabled ? "loading" : "saved");
+  const [building, setBuilding] = useState(false);
+  const [review, setReview] = useState<ReviewState>(emptyReview);
+  const reviewRef = useRef(review);
+  const buildPending = useRef(false);
+  const submittingBuild = useRef(false);
   const callbacksRef = useRef(callbacks);
   callbacksRef.current = callbacks;
   const draftRef = useRef(draft);
@@ -49,6 +58,7 @@ export function useFileSession(
         savedJSON: canonicalJSON(session.document),
       };
       setStatus("saved");
+      receiveReview(session.review);
       callbacksRef.current.onOpen(session.document, session.name);
     }).catch((error) => {
       if (cancelled) return;
@@ -72,13 +82,18 @@ export function useFileSession(
     if (!enabled || !token) return;
     let cancelled = false;
     const timer = window.setInterval(() => {
-      if (!state.current.ready || state.current.drain) return;
+      if (!state.current.ready || state.current.drain || submittingBuild.current) return;
+      const revision = state.current.revision;
       void loadFileSession(token).then((remote) => {
-        if (cancelled || remote.revision === state.current.revision) return;
+        if (cancelled || state.current.drain || submittingBuild.current || revision !== state.current.revision) return;
+        receiveReview(remote.review);
+        setStatus(current => current === "error" ? "saved" : current);
+        if (remote.revision === revision) return;
         if (canonicalJSON(draftRef.current) !== state.current.savedJSON) {
           setStatus("conflict");
           callbacksRef.current.onNotice(
             "The file changed elsewhere. Neither version was overwritten.",
+            "error",
           );
           return;
         }
@@ -90,7 +105,11 @@ export function useFileSession(
         setStatus("saved");
         callbacksRef.current.onExternalChange(remote.document);
       }).catch(() => {
-        if (!cancelled) setStatus("error");
+        if (cancelled || submittingBuild.current || revision !== state.current.revision) return;
+        setStatus("error");
+        if (buildPending.current) {
+          callbacksRef.current.onNotice("Could not load the agent result. Check the local file service.", "error");
+        }
       });
     }, 1000);
     return () => {
@@ -99,8 +118,30 @@ export function useFileSession(
     };
   }, [enabled, token]);
 
+  function finishBuild() {
+    buildPending.current = false;
+    setBuilding(false);
+  }
+
+  function receiveReview(next: ReviewState) {
+    if (next.version < reviewRef.current.version) return;
+    reviewRef.current = next;
+    setReview(next);
+    buildPending.current = activeRequest(next.request);
+    setBuilding(buildPending.current);
+  }
+
+  async function noteAction(action: () => Promise<ReviewState>, saveFirst = false) {
+    if (submittingBuild.current) throw new Error("Wait for the current save before submitting.");
+    submittingBuild.current = true;
+    try {
+      if (saveFirst && !await save(draftRef.current)) throw new Error("Save the composition before adding a note.");
+      receiveReview(await action());
+    } finally { submittingBuild.current = false; }
+  }
+
   function save(next: Draft): Promise<string | undefined> {
-    if (!token || !state.current.ready) return Promise.resolve(undefined);
+    if (!token || !state.current.ready || activeRequest(reviewRef.current.request)) return Promise.resolve(undefined);
     const serialized = canonicalJSON(next);
     if (serialized === state.current.savedJSON && !state.current.drain)
       return Promise.resolve(state.current.revision);
@@ -133,9 +174,12 @@ export function useFileSession(
         state.current.pending = undefined;
         const conflict = error instanceof FileSessionError && error.status === 409;
         setStatus(conflict ? "conflict" : "error");
-        callbacksRef.current.onNotice(conflict
-          ? "The composition changed outside this browser. Your edits were not overwritten."
-          : error instanceof Error ? error.message : "Could not save the composition file.");
+        callbacksRef.current.onNotice(
+          conflict
+            ? "The composition changed outside this browser. Your edits were not overwritten."
+            : error instanceof Error ? error.message : "Could not save the composition file.",
+          "error",
+        );
         return;
       }
     }
@@ -145,18 +189,39 @@ export function useFileSession(
     instruction: string,
     slideId: string,
     componentId?: string,
+    elementId?: string,
   ) {
-    if (!token) return false;
-    const revision = await save(draftRef.current);
-    if (!revision) return false;
-    await sendBuildRequest(token, {
-      revision,
-      instruction,
-      slideId,
-      ...(componentId ? { componentId } : {}),
-    });
-    return true;
+    if (!token || buildPending.current) return false;
+    if (submittingBuild.current) throw new Error("Wait for your note to finish saving before building.");
+    buildPending.current = true;
+    submittingBuild.current = true;
+    setBuilding(true);
+    try {
+      const revision = await save(draftRef.current);
+      if (!revision) {
+        finishBuild();
+        return false;
+      }
+      receiveReview(await sendBuildRequest(token, {
+        revision,
+        instruction,
+        slideId,
+        ...(componentId ? { componentId } : {}),
+        ...(elementId ? { elementId } : {}),
+      }));
+      return true;
+    } catch (error) {
+      finishBuild();
+      throw error;
+    } finally {
+      submittingBuild.current = false;
+    }
   }
 
-  return { status, build };
+  return {
+    status, build, building, review,
+    addNote: (target: ReviewTarget, text: string) => noteAction(() => addNote(token!, target, text), true),
+    removeNote: (id: string) => noteAction(() => removeNote(token!, id)),
+    cancel: () => noteAction(() => cancelRequest(token!, reviewRef.current.request!.id)),
+  };
 }

package/src/styles/base.css

@@ -3,6 +3,8 @@
   color: #202020;
   background: #f4f4f4;
   font-synthesis: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   --accent: #007bbb;
   --muted: #626262;
   --ui-bg: #f4f4f4;
@@ -39,6 +41,8 @@ button {
   color: inherit;
   background: #fff;
   padding: 7px 10px;
+  transition: background-color 120ms ease-out, border-color 120ms ease-out,
+    color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
 }
 button:hover:not(:disabled) {
   background: #f1f1f1;
@@ -62,6 +66,8 @@ select {
   background: #fff;
   color: var(--ui-text);
   padding: 7px 9px;
+  transition: background-color 120ms ease-out, border-color 120ms ease-out,
+    box-shadow 120ms ease-out;
 }
 input:hover,
 textarea:hover,
@@ -92,6 +98,16 @@ h2 {
   background: #383838;
   border-color: #383838;
 }
+.panel-toggle:active:not(:disabled),
+.action-island button:active:not(:disabled),
+.component-dock button:active:not(:disabled),
+.segmented-options button:active:not(:disabled),
+.theme-options button:active:not(:disabled),
+.appearance-options button:active:not(:disabled),
+.revision-note-submit button:active:not(:disabled),
+.revision-note-remove:active:not(:disabled) {
+  transform: scale(0.96);
+}
 .sr-only {
   position: absolute;
   width: 1px;

package/src/styles/canvas.css

@@ -192,8 +192,8 @@
 }
 .resize-handle {
   position: absolute;
-  width: 24px;
-  height: 24px;
+  width: 40px;
+  height: 40px;
   padding: 0;
   border: 0;
   background: transparent;
@@ -202,8 +202,8 @@
 }
 .resize-handle::after {
   position: absolute;
-  top: 9px;
-  left: 9px;
+  top: 17px;
+  left: 17px;
   width: 6px;
   height: 6px;
   border: 1px solid var(--accent);
@@ -215,23 +215,23 @@
   background: transparent;
 }
 .resize-nw {
-  top: -12px;
-  left: -12px;
+  top: -20px;
+  left: -20px;
   cursor: nwse-resize;
 }
 .resize-ne {
-  top: -12px;
-  right: -12px;
+  top: -20px;
+  right: -20px;
   cursor: nesw-resize;
 }
 .resize-sw {
-  bottom: -12px;
-  left: -12px;
+  bottom: -20px;
+  left: -20px;
   cursor: nesw-resize;
 }
 .resize-se {
-  right: -12px;
-  bottom: -12px;
+  right: -20px;
+  bottom: -20px;
   cursor: nwse-resize;
 }
 .guide {
@@ -266,3 +266,34 @@
   min-height: 100%;
   height: 100%;
 }
+.revision-pin {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    var(--accent) 0 10px,
+    var(--ui-surface) 10.5px 11.5px,
+    transparent 12px
+  );
+  color: white;
+  font: 500 11px "IBM Plex Sans", sans-serif;
+  box-shadow: none;
+  filter: drop-shadow(0 1px 2px #0003);
+}
+.revision-pin:hover:not(:disabled),
+.revision-pin:active:not(:disabled) {
+  border-color: transparent;
+  background: radial-gradient(
+    circle,
+    #006aa1 0 10px,
+    var(--ui-surface) 10.5px 11.5px,
+    transparent 12px
+  );
+}

package/src/styles/chrome.css

@@ -14,7 +14,7 @@
   top: 20px;
   left: 20px;
   width: 252px;
-  height: 56px;
+  height: 60px;
   gap: 10px;
   padding: 8px 10px;
   border-radius: 14px;
@@ -42,7 +42,7 @@
 }
 
 .document-title input {
-  height: 36px;
+  height: 40px;
   border-color: transparent;
   background: transparent;
   font-size: 13px;
@@ -125,7 +125,7 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 34px;
+  height: 40px;
   padding: 0 12px;
   border-radius: 7px;
   border-color: transparent;
@@ -141,17 +141,18 @@
 
 .action-island button.icon-only {
   flex: none;
-  width: 34px;
-  padding: 0 8px;
+  width: 40px;
+  padding: 0;
+  justify-content: center;
 }
 
 .action-island button.primary {
-  background: #202020;
-  color: white;
+  background: white;
+  color: var(--ui-text);
 }
 
 .action-island button.primary:hover:not(:disabled) {
-  background: #383838;
+  background: var(--ui-hover);
 }
 
 .action-island button.primary:disabled {
@@ -159,6 +160,86 @@
   color: var(--ui-muted);
 }
 
+.action-island .build-button {
+  position: relative;
+  overflow: hidden;
+  justify-content: center;
+  flex: none;
+  padding-inline: 9px;
+  white-space: nowrap;
+}
+
+.build-button .build-label {
+  min-width: 11ch;
+  text-align: left;
+}
+
+.action-island button.build-button.building {
+  background: white;
+  color: #2449aa;
+  opacity: 1;
+  cursor: wait;
+}
+
+.build-button.building .build-label {
+  background: linear-gradient(110deg, #155e75 10%, #2449aa 30%, #a82d62 45%, #87bdeb 50%, #7535a5 55%, #155e75 80%);
+  background-size: 250% 100%;
+  background-clip: text;
+  color: transparent;
+  animation: build-colors 3s linear infinite;
+}
+
+.build-orb circle {
+  fill: currentColor;
+  stroke: none;
+  transform: translate(var(--x), var(--y));
+}
+.build-orb.active circle {
+  animation: orb-shape 8s ease-in-out infinite;
+}
+.build-orb.nebula {
+  width: 100%;
+  height: 100%;
+  color: #4265ad;
+  transform: rotate(-18deg);
+}
+.build-orb.nebula circle {
+  animation: orb-sphere 12s ease-in-out infinite;
+  animation-delay: var(--phase);
+}
+.build-orb.nebula circle:nth-child(3n) { fill: #9772bb; }
+.build-orb.nebula circle:nth-child(3n + 1) { fill: #198faa; }
+
+@keyframes orb-shape {
+  0%, 10%, 100% { transform: translate(var(--x), var(--y)); }
+  25%, 35% { transform: translate(var(--tx), var(--ty)); }
+  50%, 60% { transform: translate(var(--sx), var(--sy)); }
+  75%, 85% { transform: translate(var(--hx), var(--hy)); }
+}
+@keyframes orb-sphere {
+  0%, 100% { transform: translate(var(--radius), var(--y)); opacity: 0.5; }
+  25% { transform: translate(0, var(--y)); opacity: 1; }
+  50% { transform: translate(calc(-1 * var(--radius)), var(--y)); opacity: 0.5; }
+  75% { transform: translate(0, var(--y)); opacity: 0.15; }
+}
+@keyframes orb-turn {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes build-colors {
+  to { background-position: 150% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .build-button.building .build-label,
+  .build-orb.active circle,
+  .build-orb.nebula circle,
+  .build-orb.nebula,
+  .build-nebula::before {
+    animation: none;
+  }
+}
+
 .action-island button svg {
   flex: none;
   width: 18px;
@@ -170,6 +251,11 @@
   stroke-width: 1.7;
 }
 
+.action-island .build-button .build-orb {
+  width: 20px;
+  height: 20px;
+}
+
 .component-dock {
   bottom: 20px;
   left: 50%;
@@ -188,6 +274,7 @@
   gap: 1px;
   padding: 4px 7px;
   border-color: transparent;
+  border-radius: 10px;
   color: var(--ui-text);
   font-size: 11px;
 }
@@ -212,3 +299,14 @@
     min-width: 55px;
   }
 }
+@media (max-width: 600px) {
+  .component-dock {
+    width: calc(100% - 24px);
+  }
+  .component-dock button {
+    flex: 1;
+    min-width: 0;
+    padding-inline: 3px;
+    font-size: 10px;
+  }
+}