agent-canvas 0.2.1 → 0.7.0

package/daemon/client/ReviewerIdentityDialog.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from 'react'
 
 /**
  * Modal shown in shared mode when a reviewer submits feedback without a
@@ -11,85 +11,86 @@ import React, { useState, useEffect, useRef } from "react";
  * the same reviewer across revisions.
  */
 interface ReviewerIdentityDialogProps {
-  open: boolean;
-  onClose: () => void;
-  onSubmit: (name: string) => void;
+	open: boolean
+	onClose: () => void
+	onSubmit: (name: string) => void
 }
 
 export function ReviewerIdentityDialog({ open, onClose, onSubmit }: ReviewerIdentityDialogProps) {
-  const [name, setName] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
+	const [name, setName] = useState('')
+	const inputRef = useRef<HTMLInputElement>(null)
 
-  useEffect(() => {
-    if (open) {
-      setName("");
-      setTimeout(() => inputRef.current?.focus(), 50);
-    }
-  }, [open]);
+	useEffect(() => {
+		if (open) {
+			setName('')
+			setTimeout(() => inputRef.current?.focus(), 50)
+		}
+	}, [open])
 
-  if (!open) return null;
+	if (!open) return null
 
-  const trimmed = name.trim();
-  const valid = trimmed.length >= 1 && trimmed.length <= 80;
+	const trimmed = name.trim()
+	const valid = trimmed.length >= 1 && trimmed.length <= 80
 
-  const handleSubmit = () => {
-    if (!valid) return;
-    onSubmit(trimmed);
-  };
+	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>
+	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>
+				<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"
-        />
+				<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>
-  );
+				<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/RevisionSelect.tsx

@@ -1,113 +1,129 @@
-import React, { useEffect, useState, useRef, useContext } from "react";
-import { RevisionContext, RevisionInfo } from "@fabrika/canvas-kernel/client";
+import { RevisionContext, RevisionInfo } from '@fabrika/canvas-kernel/client'
+import { useContext, useEffect, useRef, useState } from 'react'
 
 /** Format a revision for the trigger button: label or "Round N" */
 function revisionButtonLabel(r: RevisionInfo) {
-  return r.label || `Round ${r.revision}`;
+	return r.label || `Round ${r.revision}`
 }
 
 /** Format relative time from ISO string */
 function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime();
-  const seconds = Math.floor(diff / 1000);
-  if (seconds < 60) return "just now";
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ago`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-  const days = Math.floor(hours / 24);
-  return `${days}d ago`;
+	const diff = Date.now() - new Date(iso).getTime()
+	const seconds = Math.floor(diff / 1000)
+	if (seconds < 60) return 'just now'
+	const minutes = Math.floor(seconds / 60)
+	if (minutes < 60) return `${minutes}m ago`
+	const hours = Math.floor(minutes / 60)
+	if (hours < 24) return `${hours}h ago`
+	const days = Math.floor(hours / 24)
+	return `${days}d ago`
 }
 
 interface RevisionSelectProps {
-  value: number;
-  onChange: (rev: number) => void;
-  /** Accent color for the trigger text */
-  accent?: "default" | "red" | "green" | "amber";
-  /** Extra class on the trigger button */
-  className?: string;
+	value: number
+	onChange: (rev: number) => void
+	/** Accent color for the trigger text */
+	accent?: 'default' | 'red' | 'green' | 'amber'
+	/** Extra class on the trigger button */
+	className?: string
 }
 
-export function RevisionSelect({ value, onChange, accent = "default", className }: RevisionSelectProps) {
-  const { currentRevision, revisions } = useContext(RevisionContext);
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+export function RevisionSelect({ value, onChange, accent = 'default', className }: RevisionSelectProps) {
+	const { currentRevision, revisions } = useContext(RevisionContext)
+	const [open, setOpen] = useState(false)
+	const ref = useRef<HTMLDivElement>(null)
 
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
+	useEffect(() => {
+		if (!open) return
+		const handler = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+		}
+		document.addEventListener('mousedown', handler)
+		return () => document.removeEventListener('mousedown', handler)
+	}, [open])
 
-  const selected = revisions.find((r) => r.revision === value);
+	const selected = revisions.find((r) => r.revision === value)
 
-  const accentClasses = {
-    default: "text-text-secondary hover:text-text-primary",
-    red: "text-accent-red",
-    green: "text-accent-green",
-    amber: "text-accent-amber bg-highlight-selected",
-  };
+	const accentClasses = {
+		default: 'text-text-secondary hover:text-text-primary',
+		red: 'text-accent-red',
+		green: 'text-accent-green',
+		amber: 'text-accent-amber bg-highlight-selected',
+	}
 
-  return (
-    <div className="relative" ref={ref}>
-      <button
-        onClick={() => setOpen(!open)}
-        className={`flex items-center gap-1.5 text-[12px] font-body font-medium px-2 py-1 rounded-md transition-colors hover:bg-bg-elevated ${accentClasses[accent]} ${className || ""}`}
-      >
-        {selected ? revisionButtonLabel(selected) : `Round ${value}`}
-        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" className={`text-text-tertiary transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
-          <path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-      </button>
+	return (
+		<div className="relative" ref={ref}>
+			<button
+				onClick={() => setOpen(!open)}
+				className={`flex items-center gap-1.5 text-[12px] font-body font-medium px-2 py-1 rounded-md transition-colors hover:bg-bg-elevated ${
+					accentClasses[accent]
+				} ${className || ''}`}
+			>
+				{selected ? revisionButtonLabel(selected) : `Round ${value}`}
+				<svg
+					width="10"
+					height="10"
+					viewBox="0 0 10 10"
+					fill="none"
+					className={`text-text-tertiary transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
+				>
+					<path d="M2.5 4l2.5 2.5L7.5 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+				</svg>
+			</button>
 
-      {open && (
-        <div className="absolute top-full left-0 mt-1 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 max-h-80 overflow-y-auto">
-          {[...revisions].reverse().map((r) => (
-            <button
-              key={r.revision}
-              onClick={() => { onChange(r.revision); setOpen(false); }}
-              className={`w-full flex items-center gap-2 px-3 py-2 text-[12px] font-body transition-colors ${
-                r.revision === value
-                  ? "bg-bg-surface text-text-primary"
-                  : "text-text-secondary hover:bg-bg-surface hover:text-text-primary"
-              }`}
-            >
-              <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
-                r.revision === currentRevision ? "bg-accent-green" : r.hasFeedback ? "bg-accent-amber" : "bg-border-hover"
-              }`} />
-              <span className="flex-1 text-left truncate">
-                {r.label ? (
-                  <>{r.label} <span className="text-text-tertiary">#{r.revision}</span></>
-                ) : (
-                  <>Round {r.revision}</>
-                )}
-              </span>
-              <span className="text-[10px] text-text-tertiary flex-shrink-0 flex items-center gap-1.5">
-                {(() => {
-                  const stats = r.canvasFiles?.reduce((acc, cf) => {
-                    if (cf.diffStats) { acc.added += cf.diffStats.added; acc.removed += cf.diffStats.removed; }
-                    return acc;
-                  }, { added: 0, removed: 0 });
-                  if (stats && (stats.added > 0 || stats.removed > 0)) {
-                    return (
-                      <span className="font-mono">
-                        <span className="text-accent-green">+{stats.added}</span>
-                        {" "}
-                        <span className="text-accent-red">-{stats.removed}</span>
-                      </span>
-                    );
-                  }
-                  return null;
-                })()}
-                {r.revision === currentRevision ? "current" : r.hasFeedback ? "sent" : relativeTime(r.createdAt)}
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
+			{open && (
+				<div className="absolute top-full left-0 mt-1 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 max-h-80 overflow-y-auto">
+					{[...revisions].reverse().map((r) => (
+						<button
+							key={r.revision}
+							onClick={() => {
+								onChange(r.revision)
+								setOpen(false)
+							}}
+							className={`w-full flex items-center gap-2 px-3 py-2 text-[12px] font-body transition-colors ${
+								r.revision === value
+									? 'bg-bg-surface text-text-primary'
+									: 'text-text-secondary hover:bg-bg-surface hover:text-text-primary'
+							}`}
+						>
+							<span
+								className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${
+									r.revision === currentRevision ? 'bg-accent-green' : r.hasFeedback ? 'bg-accent-amber' : 'bg-border-hover'
+								}`}
+							/>
+							<span className="flex-1 text-left truncate">
+								{r.label
+									? (
+										<>
+											{r.label} <span className="text-text-tertiary">#{r.revision}</span>
+										</>
+									)
+									: <>Round {r.revision}</>}
+							</span>
+							<span className="text-[10px] text-text-tertiary flex-shrink-0 flex items-center gap-1.5">
+								{(() => {
+									const stats = r.canvasFiles?.reduce((acc, cf) => {
+										if (cf.diffStats) {
+											acc.added += cf.diffStats.added
+											acc.removed += cf.diffStats.removed
+										}
+										return acc
+									}, { added: 0, removed: 0 })
+									if (stats && (stats.added > 0 || stats.removed > 0)) {
+										return (
+											<span className="font-mono">
+												<span className="text-accent-green">+{stats.added}</span> <span className="text-accent-red">-{stats.removed}</span>
+											</span>
+										)
+									}
+									return null
+								})()}
+								{r.revision === currentRevision ? 'current' : r.hasFeedback ? 'sent' : relativeTime(r.createdAt)}
+							</span>
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
 }

package/daemon/client/SessionSwitcher.tsx

@@ -1,98 +1,98 @@
-import React, { useEffect, useState, useRef } from "react";
-import { FS_AVAILABLE } from "./clientApi";
+import { useEffect, useRef, useState } from 'react'
+import { FS_AVAILABLE } from './clientApi'
 
 interface SessionInfo {
-  id: string;
-  projectRoot?: string;
-  currentRevision: number;
-  updatedAt: string;
+	id: string
+	projectRoot?: string
+	currentRevision: number
+	updatedAt: string
 }
 
 function sessionDisplayName(id: string, projectRoot?: string): string {
-  if (projectRoot) {
-    const parts = projectRoot.replace(/\/+$/, "").split("/");
-    return parts[parts.length - 1] || id;
-  }
-  return id.length > 30 ? id.slice(0, 30) + "..." : id;
+	if (projectRoot) {
+		const parts = projectRoot.replace(/\/+$/, '').split('/')
+		return parts[parts.length - 1] || id
+	}
+	return id.length > 30 ? id.slice(0, 30) + '...' : id
 }
 
 interface SessionSwitcherProps {
-  currentSessionId: string;
-  projectRoot?: string;
+	currentSessionId: string
+	projectRoot?: string
 }
 
 export function SessionSwitcher({ currentSessionId, projectRoot }: SessionSwitcherProps) {
-  const [sessions, setSessions] = useState<SessionInfo[]>([]);
-  const [open, setOpen] = useState(false);
-  const ref = useRef<HTMLDivElement>(null);
+	const [sessions, setSessions] = useState<SessionInfo[]>([])
+	const [open, setOpen] = useState(false)
+	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");
-        const data = await res.json() as SessionInfo[];
-        setSessions((prev) => {
-          const next = JSON.stringify(data);
-          return JSON.stringify(prev) === next ? prev : data;
-        });
-      } catch {}
-    };
-    fetchSessions();
-    const interval = setInterval(fetchSessions, 5000);
-    return () => clearInterval(interval);
-  }, []);
+	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')
+				const data = await res.json() as SessionInfo[]
+				setSessions((prev) => {
+					const next = JSON.stringify(data)
+					return JSON.stringify(prev) === next ? prev : data
+				})
+			} catch {}
+		}
+		fetchSessions()
+		const interval = setInterval(fetchSessions, 5000)
+		return () => clearInterval(interval)
+	}, [])
 
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open]);
+	useEffect(() => {
+		if (!open) return
+		const handler = (e: MouseEvent) => {
+			if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false)
+		}
+		document.addEventListener('mousedown', handler)
+		return () => document.removeEventListener('mousedown', handler)
+	}, [open])
 
-  const otherSessions = sessions.filter((s) => s.id !== currentSessionId);
-  const displayName = sessionDisplayName(currentSessionId, projectRoot);
+	const otherSessions = sessions.filter((s) => s.id !== currentSessionId)
+	const displayName = sessionDisplayName(currentSessionId, projectRoot)
 
-  return (
-    <div className="relative" ref={ref}>
-      <div className="flex items-center gap-1.5 font-body text-body font-medium">
-        <a
-          href={`/s/${currentSessionId}`}
-          className="text-text-primary hover:text-text-secondary transition-colors"
-        >
-          {displayName}
-        </a>
-        {otherSessions.length > 0 && (
-          <button
-            onClick={() => setOpen(!open)}
-            className="flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors"
-          >
-            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}>
-              <path d="M3 5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
-          </button>
-        )}
-      </div>
+	return (
+		<div className="relative" ref={ref}>
+			<div className="flex items-center gap-1.5 font-body text-body font-medium">
+				<a
+					href={`/s/${currentSessionId}`}
+					className="text-text-primary hover:text-text-secondary transition-colors"
+				>
+					{displayName}
+				</a>
+				{otherSessions.length > 0 && (
+					<button
+						onClick={() => setOpen(!open)}
+						className="flex items-center justify-center text-text-tertiary hover:text-text-secondary transition-colors"
+					>
+						<svg width="12" height="12" viewBox="0 0 12 12" fill="none" className={`transition-transform duration-200 ${open ? 'rotate-180' : ''}`}>
+							<path d="M3 5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+						</svg>
+					</button>
+				)}
+			</div>
 
-      {open && otherSessions.length > 0 && (
-        <div className="absolute top-full left-0 mt-2 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 overflow-hidden">
-          {otherSessions.map((s) => (
-            <a
-              key={s.id}
-              href={`/s/${s.id}`}
-              className="flex items-center gap-2.5 px-4 py-2.5 text-body font-body text-text-secondary hover:bg-bg-surface hover:text-text-primary transition-colors"
-            >
-              <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${s.currentRevision > 0 ? "bg-accent-green" : "bg-border-hover"}`} />
-              <span className="truncate">{sessionDisplayName(s.id, s.projectRoot)}</span>
-            </a>
-          ))}
-        </div>
-      )}
-    </div>
-  );
+			{open && otherSessions.length > 0 && (
+				<div className="absolute top-full left-0 mt-2 w-64 bg-bg-elevated border border-border-hover rounded-lg shadow-lg z-50 py-1 overflow-hidden">
+					{otherSessions.map((s) => (
+						<a
+							key={s.id}
+							href={`/s/${s.id}`}
+							className="flex items-center gap-2.5 px-4 py-2.5 text-body font-body text-text-secondary hover:bg-bg-surface hover:text-text-primary transition-colors"
+						>
+							<span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${s.currentRevision > 0 ? 'bg-accent-green' : 'bg-border-hover'}`} />
+							<span className="truncate">{sessionDisplayName(s.id, s.projectRoot)}</span>
+						</a>
+					))}
+				</div>
+			)}
+		</div>
+	)
 }