konpeki 0.1.1 → 0.2.0

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;
 };
 
@@ -27,6 +31,8 @@ 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);
@@ -52,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;
@@ -78,12 +85,15 @@ export function useFileSession(
       if (!state.current.ready || state.current.drain || submittingBuild.current) return;
       const revision = state.current.revision;
       void loadFileSession(token).then((remote) => {
-        if (cancelled || state.current.drain || submittingBuild.current || revision !== state.current.revision || remote.revision === 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) {
-          finishBuild();
           setStatus("conflict");
           callbacksRef.current.onNotice(
             "The file changed elsewhere. Neither version was overwritten.",
+            "error",
           );
           return;
         }
@@ -94,13 +104,11 @@ export function useFileSession(
         };
         setStatus("saved");
         callbacksRef.current.onExternalChange(remote.document);
-        finishBuild();
       }).catch(() => {
         if (cancelled || submittingBuild.current || revision !== state.current.revision) return;
         setStatus("error");
         if (buildPending.current) {
-          finishBuild();
-          callbacksRef.current.onNotice("Could not load the agent result. Check the local file service.");
+          callbacksRef.current.onNotice("Could not load the agent result. Check the local file service.", "error");
         }
       });
     }, 1000);
@@ -115,8 +123,25 @@ export function useFileSession(
     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);
@@ -149,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;
       }
     }
@@ -161,8 +189,10 @@ export function useFileSession(
     instruction: string,
     slideId: string,
     componentId?: string,
+    elementId?: string,
   ) {
     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);
@@ -172,12 +202,13 @@ export function useFileSession(
         finishBuild();
         return false;
       }
-      await sendBuildRequest(token, {
+      receiveReview(await sendBuildRequest(token, {
         revision,
         instruction,
         slideId,
         ...(componentId ? { componentId } : {}),
-      });
+        ...(elementId ? { elementId } : {}),
+      }));
       return true;
     } catch (error) {
       finishBuild();
@@ -187,5 +218,10 @@ export function useFileSession(
     }
   }
 
-  return { status, build, building };
+  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,8 +141,9 @@
 
 .action-island button.icon-only {
   flex: none;
-  width: 34px;
-  padding: 0 8px;
+  width: 40px;
+  padding: 0;
+  justify-content: center;
 }
 
 .action-island button.primary {
@@ -163,46 +164,78 @@
   position: relative;
   overflow: hidden;
   justify-content: center;
-  flex: 1;
+  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: linear-gradient(110deg, #155e75, #2449aa, #7535a5, #a82d62, #155e75);
-  background-size: 300% 100%;
-  color: white;
+  background: white;
+  color: #2449aa;
   opacity: 1;
   cursor: wait;
-  animation: build-colors 4s linear infinite;
 }
 
-.build-button.building::after,
-.build-loading-track::after {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent, #ffffff50, transparent);
-  transform: translateX(-100%);
-  animation: build-sweep 1.8s ease-in-out infinite;
-  content: "";
+.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; }
 
-.build-button.building::after {
-  top: auto;
-  height: 3px;
+@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; }
 }
 
-@keyframes build-sweep {
-  to { transform: translateX(100%); }
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .action-island button.build-button.building,
-  .build-button.building::after,
-  .build-loading-track::after {
+  .build-button.building .build-label,
+  .build-orb.active circle,
+  .build-orb.nebula circle,
+  .build-orb.nebula,
+  .build-nebula::before {
     animation: none;
   }
 }
@@ -218,6 +251,11 @@
   stroke-width: 1.7;
 }
 
+.action-island .build-button .build-orb {
+  width: 20px;
+  height: 20px;
+}
+
 .component-dock {
   bottom: 20px;
   left: 50%;
@@ -236,6 +274,7 @@
   gap: 1px;
   padding: 4px 7px;
   border-color: transparent;
+  border-radius: 10px;
   color: var(--ui-text);
   font-size: 11px;
 }
@@ -260,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;
+  }
+}

package/src/styles/feedback.css

@@ -20,7 +20,7 @@
   max-width: min(520px, max(240px, calc(100vw - 744px)), calc(100vw - 40px));
   z-index: 50;
 }
-.toast > [role="status"] {
+.toast > span {
   min-width: 0;
   overflow-wrap: anywhere;
 }
@@ -32,6 +32,24 @@
   pointer-events: none;
   animation: toast-exit 180ms ease-in both;
 }
+.toast.error {
+  border-color: #e4b5b5;
+  background: #fff7f7;
+  color: #8d1717;
+  box-shadow: 0 0 0 1px #b13d3d14, 0 4px 16px #5f11110d;
+}
+.toast.error::before {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #b13d3d;
+  color: white;
+  content: "!";
+  font-weight: 600;
+}
 @keyframes toast-enter {
   from {
     opacity: 0;

package/src/styles/left-panel.css

@@ -1,3 +1,44 @@
+.left-notes {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+.revision-notes { padding: 18px 16px; }
+.revision-note-submit {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+.revision-note-count,
+.revision-note-scope {
+  color: var(--ui-muted);
+  font-size: 11px;
+  line-height: 1.5;
+}
+.revision-note-count { margin: 20px 0 8px; }
+.revision-notes label { font-size: 12px; }
+.revision-note-scope {
+  margin: 6px 0 8px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--ui-selected);
+  color: #31596d;
+  overflow-wrap: anywhere;
+}
+.revision-notes textarea { width: 100%; resize: vertical; min-height: 72px; font-size: 12px; line-height: 1.5; }
+.revision-notes textarea { border-color: transparent; border-radius: 6px; background: #f4f4f5; }
+.revision-notes textarea:hover { border-color: #d4d4d8; }
+.revision-note-submit { margin-top: 8px; justify-content: flex-end; }
+.revision-note-submit button { min-height: 40px; white-space: nowrap; font-size: 12px; }
+.revision-note-list { list-style: none; margin: 0; padding: 0; }
+.revision-note-list li { padding: 12px 0; border-top: 1px solid var(--ui-border); }
+.revision-note-target { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 40px; padding: 6px 0; border: 0; background: none; text-align: left; font-size: 11px; overflow-wrap: anywhere; }
+.revision-note-target > span { color: var(--ui-muted); }
+.revision-note-list p { font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+.revision-note-remove { display: inline-flex; align-items: center; min-height: 40px; border: 0; padding: 6px 0; background: none; color: var(--ui-muted); font-size: 11px; }
+.revision-note-error { color: #a02020; font-size: 12px; }
+
 .slide-list {
   flex: 1;
   min-height: 0;
@@ -24,8 +65,8 @@
 
 .slide-thumbnail.selected,
 .slide-thumbnail.selected:hover {
-  border-color: #86868b;
-  background: #f4f4f5;
+  border-color: color-mix(in srgb, var(--accent) 45%, white);
+  background: var(--ui-selected);
 }
 
 .slide-thumbnail:focus-visible {
@@ -42,10 +83,10 @@
 
 .remove-slide {
   position: absolute;
-  right: 8px;
-  bottom: 7px;
-  width: 26px;
-  height: 26px;
+  right: 2px;
+  bottom: 0;
+  width: 40px;
+  height: 40px;
   padding: 0;
   border-color: transparent;
   border-radius: 5px;
@@ -64,7 +105,7 @@
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 38px;
+  min-height: 40px;
   margin-top: 8px;
   border-style: dashed;
   color: var(--ui-muted);