agent-canvas 0.1.27 → 0.1.28

package/daemon/client/ReviewerIdentityDialog.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, useRef } from "react";
+
+/**
+ * Modal shown in shared mode when a reviewer submits feedback without a
+ * cached identity. Asks for a display name that will appear on the
+ * reviewer's annotations when they land in the canvas author's local view.
+ *
+ * Identity is persisted in localStorage so the prompt only appears once
+ * per browser per share worker origin. The id is a random UUID — never
+ * tied to any authenticated account, just enough to group annotations by
+ * the same reviewer across revisions.
+ */
+interface ReviewerIdentityDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: (name: string) => void;
+}
+
+export function ReviewerIdentityDialog({ open, onClose, onSubmit }: ReviewerIdentityDialogProps) {
+  const [name, setName] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (open) {
+      setName("");
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const trimmed = name.trim();
+  const valid = trimmed.length >= 1 && trimmed.length <= 80;
+
+  const handleSubmit = () => {
+    if (!valid) return;
+    onSubmit(trimmed);
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-bg-surface border border-border-medium rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-sm font-medium text-text-primary font-body">
+            Your name
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-6 h-6 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors"
+          >
+            <span className="text-xs">&#x2715;</span>
+          </button>
+        </div>
+
+        <p className="text-[13px] text-text-secondary font-body mb-3 leading-relaxed">
+          Before you leave feedback, please enter a name so the canvas author
+          knows who reviewed it. This is stored locally in your browser.
+        </p>
+
+        <input
+          ref={inputRef}
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") handleSubmit(); }}
+          maxLength={80}
+          placeholder="e.g. Alice"
+          className="w-full px-3 py-2 text-[13px] font-body bg-bg-input border border-border-medium rounded text-text-primary placeholder:text-text-disabled focus:outline-none focus:border-accent-blue"
+        />
+
+        <div className="flex justify-end gap-2 mt-4">
+          <button
+            onClick={onClose}
+            className="px-3 py-1.5 text-[12px] font-body font-medium rounded text-text-secondary hover:text-text-primary hover:bg-bg-elevated transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSubmit}
+            disabled={!valid}
+            className="px-3 py-1.5 text-[12px] font-body font-medium rounded bg-accent-blue text-white hover:opacity-90 transition-opacity disabled:opacity-50"
+          >
+            Submit feedback
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/daemon/client/SessionSwitcher.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from "react";
+import { FS_AVAILABLE } from "./clientApi";
 
 interface SessionInfo {
   id: string;
@@ -26,6 +27,10 @@ export function SessionSwitcher({ currentSessionId, projectRoot }: SessionSwitch
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    // /api/sessions only exists on the local daemon. In shared mode we skip
+    // the switcher entirely (it's hidden by the parent), but guard the poll
+    // just in case this component is mounted — nothing to switch to.
+    if (!FS_AVAILABLE) return;
     const fetchSessions = async () => {
       try {
         const res = await fetch("/api/sessions");

package/daemon/client/ShareDialog.tsx

@@ -0,0 +1,230 @@
+import React, { useState, useEffect, useCallback } from "react";
+
+export interface ShareEntry {
+  shareId: string;
+  url: string;
+  revision: number;
+  createdAt: string;
+  ownerToken?: string;
+  expiresAt?: string;
+  lastFeedbackAt?: string;
+}
+
+interface ShareDialogProps {
+  sessionId: string;
+  revision: number;
+  open: boolean;
+  shareEnabled: boolean;
+  existingShares: ShareEntry[];
+  onClose: () => void;
+  onShareCreated: (share: ShareEntry) => void;
+  onShareRevoked: (shareId: string) => void;
+}
+
+/**
+ * Modal dialog for sharing a canvas revision to the cloud.
+ *
+ * Flow: user clicks Share → this dialog opens → user clicks "Create link"
+ * → POST to daemon → daemon uploads snapshot to CF Worker → daemon returns
+ * ShareEntry → dialog shows the URL with copy-to-clipboard.
+ *
+ * If a share already exists for this revision, the existing URL is shown
+ * immediately. Owner can revoke (delete on the worker side) via the
+ * stored ownerToken.
+ */
+export function ShareDialog({
+  sessionId,
+  revision,
+  open,
+  shareEnabled,
+  existingShares,
+  onClose,
+  onShareCreated,
+  onShareRevoked,
+}: ShareDialogProps) {
+  const [loading, setLoading] = useState(false);
+  const [revoking, setRevoking] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const shareForRev = existingShares.find((s) => s.revision === revision);
+
+  useEffect(() => {
+    if (!open) {
+      setLoading(false);
+      setRevoking(false);
+      setError(null);
+      setCopied(false);
+    }
+  }, [open]);
+
+  const createShare = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/session/${sessionId}/revision/${revision}/share`, {
+        method: "POST",
+      });
+      const data = await res.json() as any;
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || `HTTP ${res.status}`);
+      }
+      onShareCreated(data.share as ShareEntry);
+    } catch (e: any) {
+      setError(e.message || String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [sessionId, revision, onShareCreated]);
+
+  const revoke = useCallback(async (shareId: string) => {
+    if (!window.confirm("Revoke this share link? Reviewers will no longer be able to view or comment.")) return;
+    setRevoking(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/session/${sessionId}/shares/${shareId}/revoke`, {
+        method: "POST",
+      });
+      const data = await res.json() as any;
+      if (!res.ok || !data.ok) {
+        throw new Error(data.error || `HTTP ${res.status}`);
+      }
+      onShareRevoked(shareId);
+    } catch (e: any) {
+      setError(e.message || String(e));
+    } finally {
+      setRevoking(false);
+    }
+  }, [sessionId, onShareRevoked]);
+
+  const copyUrl = useCallback((url: string) => {
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, []);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={onClose}
+    >
+      <div
+        className="bg-bg-surface border border-border-medium rounded-lg shadow-xl w-full max-w-md mx-4 p-5"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-sm font-medium text-text-primary font-body">
+            Share this revision
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-6 h-6 flex items-center justify-center rounded text-text-tertiary hover:text-text-secondary hover:bg-bg-elevated transition-colors"
+          >
+            <span className="text-xs">&#x2715;</span>
+          </button>
+        </div>
+
+        {!shareEnabled ? (
+          <div className="text-[13px] text-text-secondary font-body space-y-2">
+            <p>Canvas sharing is not configured.</p>
+            <p className="text-text-tertiary">
+              Set <code className="px-1 py-0.5 rounded bg-bg-elevated text-text-primary text-[11px]">CANVAS_SHARE_ENDPOINT</code> to the URL of a deployed{" "}
+              <code className="px-1 py-0.5 rounded bg-bg-elevated text-text-primary text-[11px]">canvas-share</code> worker and restart the daemon.
+            </p>
+          </div>
+        ) : shareForRev ? (
+          <div className="space-y-3">
+            <p className="text-[13px] text-text-secondary font-body">
+              This revision is shared:
+            </p>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                readOnly
+                value={shareForRev.url}
+                className="flex-1 px-2 py-1.5 text-[12px] font-mono bg-bg-input border border-border-medium rounded text-text-primary"
+                onFocus={(e) => e.currentTarget.select()}
+              />
+              <button
+                onClick={() => copyUrl(shareForRev.url)}
+                className="px-3 py-1.5 text-[12px] font-body font-medium rounded bg-accent-blue text-white hover:opacity-90 transition-opacity whitespace-nowrap"
+              >
+                {copied ? "Copied!" : "Copy"}
+              </button>
+            </div>
+            {shareForRev.expiresAt && (
+              <p className="text-[11px] text-text-tertiary font-body">
+                Expires {new Date(shareForRev.expiresAt).toLocaleDateString()}.
+              </p>
+            )}
+            <p className="text-[11px] text-text-tertiary font-body">
+              Anyone with this link can view and leave feedback. Reviewer
+              feedback will appear in your annotation sidebar within seconds.
+            </p>
+            <div className="flex items-center justify-between pt-1">
+              <button
+                onClick={createShare}
+                disabled={loading || revoking}
+                className="text-[11px] text-text-tertiary hover:text-text-secondary font-body underline disabled:opacity-50"
+              >
+                {loading ? "Creating..." : "Create a new link"}
+              </button>
+              {shareForRev.ownerToken && (
+                <button
+                  onClick={() => revoke(shareForRev.shareId)}
+                  disabled={loading || revoking}
+                  className="text-[11px] text-accent-red hover:opacity-80 font-body underline disabled:opacity-50"
+                >
+                  {revoking ? "Revoking..." : "Revoke link"}
+                </button>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <p className="text-[13px] text-text-secondary font-body">
+              Create a public link to this revision. Anyone with the link can
+              view the canvas and leave feedback. Reviewer feedback will sync
+              back here automatically.
+            </p>
+            <button
+              onClick={createShare}
+              disabled={loading}
+              className="w-full px-3 py-2 text-[13px] font-body font-medium rounded bg-accent-blue text-white hover:opacity-90 transition-opacity disabled:opacity-50"
+            >
+              {loading ? "Creating share link..." : "Create share link"}
+            </button>
+          </div>
+        )}
+
+        {error && (
+          <div className="mt-3 px-3 py-2 rounded bg-accent-red/10 border border-accent-red/20 text-[12px] text-accent-red font-body">
+            {error}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Small share icon button for toolbar use. */
+export function ShareButton({ onClick, title = "Share this revision", hasShare }: { onClick: () => void; title?: string; hasShare?: boolean }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`group p-1.5 transition-colors ${hasShare ? "text-accent-blue hover:opacity-80" : "text-text-tertiary hover:text-text-secondary"}`}
+      title={title}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="18" cy="5" r="3"/>
+        <circle cx="6" cy="12" r="3"/>
+        <circle cx="18" cy="19" r="3"/>
+        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
+        <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
+      </svg>
+    </button>
+  );
+}

package/daemon/client/clientApi.ts

@@ -0,0 +1,142 @@
+/**
+ * Client API layer — abstracts over daemon-local vs. shared (CF Worker)
+ * modes. Every fetch-adjacent function in the client should go through
+ * this module instead of hardcoding URLs, so shared mode works without
+ * scattering branches across components.
+ *
+ * Mode is determined once at module load by checking
+ * `window.__CANVAS_SHARE__`, which the CF Worker injects into the HTML
+ * shell it serves. Local daemon never sets this, so the app defaults to
+ * local mode.
+ */
+
+declare global {
+  interface Window {
+    __CANVAS_SHARE__?: {
+      shareId: string;
+      mode: "shared";
+    };
+  }
+}
+
+export interface SharedModeInfo {
+  isShared: true;
+  shareId: string;
+}
+
+export interface LocalModeInfo {
+  isShared: false;
+  sessionId: string;
+}
+
+export type ModeInfo = SharedModeInfo | LocalModeInfo;
+
+/** One-time detection. In shared mode the daemon-provided sessionId from
+ *  the URL path is ignored in favor of the worker-injected shareId. */
+export function detectMode(): ModeInfo {
+  if (typeof window !== "undefined" && window.__CANVAS_SHARE__?.shareId) {
+    return { isShared: true, shareId: window.__CANVAS_SHARE__.shareId };
+  }
+  // Local: session id is the path suffix /s/:sessionId
+  const sessionId = typeof window !== "undefined"
+    ? window.location.pathname.replace("/s/", "")
+    : "";
+  return { isShared: false, sessionId };
+}
+
+export const MODE: ModeInfo = detectMode();
+
+/** Build a canonical id-ish string used as React keys / identifiers. */
+export function getIdentifier(): string {
+  return MODE.isShared ? MODE.shareId : MODE.sessionId;
+}
+
+// --- URL builders -----------------------------------------------------------
+
+/** Metadata endpoint (revisions, canvas files, project root). */
+export function metaUrl(): string {
+  if (MODE.isShared) return `/s/${MODE.shareId}/meta`;
+  return `/api/session/${MODE.sessionId}/meta`;
+}
+
+/** Compiled canvas JS module for a given filename (+ optional revision). */
+export function canvasJsUrl(filename: string, revision?: number): string {
+  const jsName = filename.replace(/\.jsx$/, ".js");
+  if (MODE.isShared) {
+    return `/s/${MODE.shareId}/canvas/${encodeURIComponent(jsName)}`;
+  }
+  const rev = revision ? `?rev=${revision}&t=${Date.now()}` : `?t=${Date.now()}`;
+  return `/api/session/${MODE.sessionId}/canvas/${encodeURIComponent(jsName)}${rev}`;
+}
+
+/** Upload endpoint for annotation images. */
+export function uploadUrl(): string {
+  if (MODE.isShared) return `/s/${MODE.shareId}/upload`;
+  return `/api/session/${MODE.sessionId}/upload`;
+}
+
+// --- Feedback submission ----------------------------------------------------
+
+/**
+ * Local-mode author info used when submitting feedback in shared mode.
+ * Prompted on first submit and cached in localStorage.
+ */
+const REVIEWER_KEY = "canvas-reviewer-identity";
+
+export function getReviewerIdentity(): { id: string; name: string } | null {
+  try {
+    const raw = localStorage.getItem(REVIEWER_KEY);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+export function setReviewerIdentity(name: string): { id: string; name: string } {
+  let existing = getReviewerIdentity();
+  if (!existing) {
+    existing = { id: crypto.randomUUID?.() || String(Date.now()), name };
+  } else {
+    existing.name = name;
+  }
+  localStorage.setItem(REVIEWER_KEY, JSON.stringify(existing));
+  return existing;
+}
+
+/**
+ * Shape submitted by the shared-mode client when a reviewer submits
+ * feedback. Matches the worker's `FeedbackPostBody`.
+ */
+export interface SharedFeedbackPayload {
+  author: { id: string; name: string };
+  revision: number;
+  annotations: Array<Record<string, unknown>>;
+  generalNote?: string;
+}
+
+/**
+ * Submit feedback in shared mode. Throws on HTTP error. Caller is
+ * responsible for collecting + prompting for the reviewer's name before
+ * invoking this.
+ */
+export async function submitSharedFeedback(payload: SharedFeedbackPayload): Promise<void> {
+  if (!MODE.isShared) throw new Error("submitSharedFeedback called outside shared mode");
+  const res = await fetch(`/s/${MODE.shareId}/feedback`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(`Feedback submission failed: ${res.status} ${text}`);
+  }
+}
+
+// --- Feature flags ----------------------------------------------------------
+
+/** Are daemon-only filesystem endpoints (file tree, file viewer) available? */
+export const FS_AVAILABLE: boolean = !MODE.isShared;
+
+/** Is live WebSocket session updates available? */
+export const WS_AVAILABLE: boolean = !MODE.isShared;

package/daemon/client/runtime.ts

@@ -12,6 +12,22 @@ export interface AnnotationContext {
   lineEnd?: number;
 }
 
+/** Identifies the person who created an annotation. For local annotations
+ *  this is the daemon owner (unset). For remote annotations it carries the
+ *  reviewer's self-reported name + stable anonymous id assigned by the worker. */
+export interface AnnotationAuthor {
+  id: string;
+  name: string;
+}
+
+/** An image or other file attached to an annotation. Replaces the legacy
+ *  `images: string[]` pattern with a richer shape that can point to either
+ *  a local upload (daemon) or a remote blob (CF Worker R2). */
+export interface AnnotationAttachment {
+  url: string;
+  mime?: string;
+}
+
 export interface Annotation {
   id: string;
   snippet: string;
@@ -20,7 +36,13 @@ export interface Annotation {
   filePath?: string;
   canvasFile?: string;
   context?: AnnotationContext;
+  /** @deprecated use `attachments` — kept for localStorage backward compat */
   images?: string[];
+  attachments?: AnnotationAttachment[];
+  /** "remote" annotations come from a shared view and are read-only locally. */
+  source?: "local" | "remote";
+  /** Only set for source === "remote". */
+  author?: AnnotationAuthor;
 }
 
 export interface PlanResponse {