agent-canvas 0.1.0

package/daemon/client/CompareView.tsx

@@ -0,0 +1,333 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { RevisionSelect } from "./RevisionSelect";
+import { runDomDiff } from "./domDiff";
+import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
+
+interface CompareViewProps {
+  initialLeft: number;
+  initialRight: number;
+  sessionId: string;
+  onExit: () => void;
+}
+
+type CompareMode = "unified" | "side-by-side";
+
+export function CompareView({ initialLeft, initialRight, sessionId, onExit }: CompareViewProps) {
+  const [leftRev, setLeftRev] = useState(initialLeft);
+  const [rightRev, setRightRev] = useState(initialRight);
+  const [mode, setMode] = useState<CompareMode>("unified");
+  const [hasChanges, setHasChanges] = useState(true);
+  const [diffDone, setDiffDone] = useState(false);
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-3 border-b border-border-subtle bg-bg-surface flex-shrink-0">
+        <div className="flex items-center gap-3">
+          <span className="text-[13px] font-body font-medium text-text-primary">Compare</span>
+          <RevisionSelect value={leftRev} onChange={setLeftRev} accent="red" />
+          <span className="text-text-tertiary text-[13px]">&rarr;</span>
+          <RevisionSelect value={rightRev} onChange={setRightRev} accent="green" />
+          {diffDone && !hasChanges && (
+            <span className="text-[11px] font-body text-text-tertiary bg-bg-elevated px-2 py-0.5 rounded">
+              No changes
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-4">
+          {/* Mode toggle */}
+          <div className="flex items-center bg-bg-elevated rounded-md p-0.5">
+            <button
+              onClick={() => setMode("unified")}
+              className={`text-[11px] font-body px-2.5 py-1 rounded transition-colors ${
+                mode === "unified"
+                  ? "bg-bg-surface text-text-primary font-medium shadow-sm"
+                  : "text-text-tertiary hover:text-text-secondary"
+              }`}
+            >
+              Unified
+            </button>
+            <button
+              onClick={() => setMode("side-by-side")}
+              className={`text-[11px] font-body px-2.5 py-1 rounded transition-colors ${
+                mode === "side-by-side"
+                  ? "bg-bg-surface text-text-primary font-medium shadow-sm"
+                  : "text-text-tertiary hover:text-text-secondary"
+              }`}
+            >
+              Side-by-side
+            </button>
+          </div>
+
+          {/* Sync scroll — only in side-by-side mode */}
+          {mode === "side-by-side" && <SyncScrollCheckbox />}
+
+          <button
+            onClick={onExit}
+            className="text-[12px] font-body font-medium text-text-secondary hover:text-text-primary px-3 py-1.5 rounded-md hover:bg-bg-elevated transition-colors"
+          >
+            Exit Compare
+          </button>
+        </div>
+      </div>
+
+      {mode === "unified" ? (
+        <UnifiedView
+          key={`unified-${leftRev}-${rightRev}`}
+          sessionId={sessionId}
+          leftRev={leftRev}
+          rightRev={rightRev}
+          onDiffResult={(done, changes) => { setDiffDone(done); setHasChanges(changes); }}
+        />
+      ) : (
+        <SideBySideView
+          key={`sbs-${leftRev}-${rightRev}`}
+          sessionId={sessionId}
+          leftRev={leftRev}
+          rightRev={rightRev}
+          onDiffResult={(done, changes) => { setDiffDone(done); setHasChanges(changes); }}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ── Sync scroll checkbox (lifted out to avoid re-render issues) ── */
+
+function SyncScrollCheckbox() {
+  const [checked, setChecked] = useState(true);
+  // Store in a ref accessible to SideBySideView via DOM attribute
+  useEffect(() => {
+    document.documentElement.dataset.syncScroll = checked ? "1" : "0";
+    return () => { delete document.documentElement.dataset.syncScroll; };
+  }, [checked]);
+
+  return (
+    <label className="flex items-center gap-1.5 cursor-pointer select-none">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => setChecked(e.target.checked)}
+        className="accent-accent-amber w-3.5 h-3.5"
+      />
+      <span className="text-[11px] font-body text-text-secondary">Sync scroll</span>
+    </label>
+  );
+}
+
+/* ── Unified view ── */
+
+interface ViewProps {
+  sessionId: string;
+  leftRev: number;
+  rightRev: number;
+  onDiffResult: (done: boolean, hasChanges: boolean) => void;
+}
+
+function UnifiedView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps) {
+  const oldRef = useRef<HTMLDivElement>(null);
+  const newRef = useRef<HTMLDivElement>(null);
+  const unifiedRef = useRef<HTMLDivElement>(null);
+  const [leftReady, setLeftReady] = useState(false);
+  const [rightReady, setRightReady] = useState(false);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    if (!leftReady || !rightReady || done) return;
+    if (!oldRef.current || !newRef.current) return;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!oldRef.current || !newRef.current || !unifiedRef.current) return;
+
+        const oldTree = extractBlockTree(oldRef.current);
+        const newTree = extractBlockTree(newRef.current);
+        const matches = matchBlocks(oldTree, newTree);
+        const { fragment, hasChanges } = buildUnifiedDom(matches);
+
+        unifiedRef.current.innerHTML = "";
+        unifiedRef.current.appendChild(fragment);
+        setDone(true);
+        onDiffResult(true, hasChanges);
+      });
+    });
+  }, [leftReady, rightReady, done]);
+
+  return (
+    <div className="flex-1 min-h-0 overflow-y-auto">
+      {/* Offscreen source panels */}
+      <div style={{ position: "absolute", left: -9999, visibility: "hidden" as const, pointerEvents: "none" as const, width: 720 }}>
+        <ComparePanelRenderer
+          ref={oldRef}
+          sessionId={sessionId}
+          revision={leftRev}
+          onReady={() => setLeftReady(true)}
+        />
+        <ComparePanelRenderer
+          ref={newRef}
+          sessionId={sessionId}
+          revision={rightRev}
+          onReady={() => setRightReady(true)}
+        />
+      </div>
+
+      {/* Visible output */}
+      <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
+        {!done && (
+          <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">
+            Loading...
+          </div>
+        )}
+        <div ref={unifiedRef} />
+      </div>
+    </div>
+  );
+}
+
+/* ── Side-by-side view ── */
+
+function SideBySideView({ sessionId, leftRev, rightRev, onDiffResult }: ViewProps) {
+  const oldRef = useRef<HTMLDivElement>(null);
+  const newRef = useRef<HTMLDivElement>(null);
+  const [leftReady, setLeftReady] = useState(false);
+  const [rightReady, setRightReady] = useState(false);
+  const [done, setDone] = useState(false);
+
+  const leftPanelRef = useRef<HTMLDivElement>(null);
+  const rightPanelRef = useRef<HTMLDivElement>(null);
+  const isSyncing = useRef(false);
+
+  // Run diff
+  useEffect(() => {
+    if (!leftReady || !rightReady || done) return;
+    if (!oldRef.current || !newRef.current) return;
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (!oldRef.current || !newRef.current) return;
+        const changed = runDomDiff(oldRef.current, newRef.current);
+        setDone(true);
+        onDiffResult(true, changed);
+      });
+    });
+  }, [leftReady, rightReady, done]);
+
+  // Sync scroll
+  useEffect(() => {
+    const left = leftPanelRef.current;
+    const right = rightPanelRef.current;
+    if (!left || !right) return;
+
+    const handleSync = (source: HTMLDivElement, target: HTMLDivElement) => {
+      if (document.documentElement.dataset.syncScroll === "0") return;
+      if (isSyncing.current) return;
+      isSyncing.current = true;
+      const sourceMax = source.scrollHeight - source.clientHeight;
+      const targetMax = target.scrollHeight - target.clientHeight;
+      if (sourceMax > 0 && targetMax > 0) {
+        target.scrollTop = (source.scrollTop / sourceMax) * targetMax;
+      }
+      requestAnimationFrame(() => { isSyncing.current = false; });
+    };
+
+    const onLeft = () => handleSync(left, right);
+    const onRight = () => handleSync(right, left);
+    left.addEventListener("scroll", onLeft);
+    right.addEventListener("scroll", onRight);
+    return () => {
+      left.removeEventListener("scroll", onLeft);
+      right.removeEventListener("scroll", onRight);
+    };
+  }, []);
+
+  return (
+    <div className="flex flex-1 min-h-0">
+      <div ref={leftPanelRef} className="w-1/2 overflow-y-auto border-r border-border-subtle">
+        <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
+          <ComparePanelRenderer
+            ref={oldRef}
+            sessionId={sessionId}
+            revision={leftRev}
+            onReady={() => setLeftReady(true)}
+          />
+        </div>
+      </div>
+      <div ref={rightPanelRef} className="w-1/2 overflow-y-auto">
+        <div className="max-w-[720px] mx-auto px-6 pt-8 pb-32">
+          <ComparePanelRenderer
+            ref={newRef}
+            sessionId={sessionId}
+            revision={rightRev}
+            onReady={() => setRightReady(true)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Panel renderer ── */
+
+interface ComparePanelRendererProps {
+  sessionId: string;
+  revision: number;
+  onReady: () => void;
+}
+
+const ComparePanelRenderer = React.forwardRef<HTMLDivElement, ComparePanelRendererProps>(
+  ({ sessionId, revision, onReady }, ref) => {
+    const [PlanComponent, setPlanComponent] = useState<React.ComponentType | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+      setLoading(true);
+      setError(null);
+      import(`/api/session/${sessionId}/plan.js?rev=${revision}&t=${Date.now()}`)
+        .then((mod) => {
+          setPlanComponent(() => mod.default);
+          setLoading(false);
+        })
+        .catch((e) => {
+          setError(e.message);
+          setLoading(false);
+        });
+    }, [sessionId, revision]);
+
+    useEffect(() => {
+      if (!PlanComponent) return;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          onReady();
+        });
+      });
+    }, [PlanComponent]);
+
+    if (loading) {
+      return (
+        <div className="flex items-center justify-center h-64 text-text-tertiary font-body text-body">
+          Loading...
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="bg-accent-red-muted rounded-lg p-5">
+          <h3 className="font-body font-semibold text-accent-red mb-2">Error</h3>
+          <pre className="text-code font-mono text-text-secondary whitespace-pre-wrap">{error}</pre>
+        </div>
+      );
+    }
+
+    if (!PlanComponent) {
+      return <div className="text-text-tertiary text-center py-8 font-body text-body">No plan loaded</div>;
+    }
+
+    return (
+      <div ref={ref}>
+        <PlanComponent />
+      </div>
+    );
+  }
+);

package/daemon/client/FileBrowser.tsx

@@ -0,0 +1,188 @@
+import React, { useEffect, useState, useContext, useCallback } from "react";
+import { SessionContext } from "#canvas/runtime";
+import { useAnnotations } from "./AnnotationProvider";
+import { ActiveViewContext } from "./App";
+import { FileIcon } from "./FileIcon";
+
+interface TreeEntry { name: string; type: "file" | "dir"; }
+interface DirState { entries: TreeEntry[]; expanded: boolean; loaded: boolean; }
+
+export function FileBrowser({ embedded }: { embedded?: boolean } = {}) {
+  const sessionId = useContext(SessionContext);
+  const { annotations, addAnnotation } = useAnnotations();
+  const { setActiveView } = useContext(ActiveViewContext);
+  const [collapsed, setCollapsed] = useState(false);
+  const [dirs, setDirs] = useState<Record<string, DirState>>({});
+
+  const fileAnnotations = annotations.filter((a) => a.filePath);
+  const annCountMap = new Map<string, number>();
+  for (const a of fileAnnotations) {
+    annCountMap.set(a.filePath!, (annCountMap.get(a.filePath!) || 0) + 1);
+  }
+  const annotatedFiles = [...annCountMap.keys()];
+
+  const loadDir = async (path: string) => {
+    const res = await fetch(`/api/tree?session=${sessionId}&path=${encodeURIComponent(path)}`);
+    const data = await res.json() as any;
+    if (data.entries) setDirs((prev) => ({ ...prev, [path]: { entries: data.entries, expanded: true, loaded: true } }));
+  };
+
+  useEffect(() => { if (!collapsed && !dirs[""]) loadDir(""); }, [collapsed]);
+
+  const toggleDir = (path: string) => {
+    if (dirs[path]?.loaded) setDirs((prev) => ({ ...prev, [path]: { ...prev[path], expanded: !prev[path].expanded } }));
+    else loadDir(path);
+  };
+
+  const openFile = (path: string) => {
+    setActiveView({ type: "file", path });
+  };
+
+  const addWholeFile = async (path: string) => {
+    const res = await fetch(`/api/file?session=${sessionId}&path=${encodeURIComponent(path)}`);
+    const data = await res.json() as any;
+    if (!data.error) {
+      const preview = data.content.split("\n").slice(0, 3).join("\n") + (data.content.split("\n").length > 3 ? "\n..." : "");
+      addAnnotation(preview, "Include this file for context", path);
+    }
+  };
+
+  const addWholeDir = async (path: string) => {
+    // Load dir if needed, then add all files
+    let entries: TreeEntry[] = [];
+    if (dirs[path]?.loaded) {
+      entries = dirs[path].entries;
+    } else {
+      const res = await fetch(`/api/tree?session=${sessionId}&path=${encodeURIComponent(path)}`);
+      const data = await res.json() as any;
+      if (data.entries) entries = data.entries;
+    }
+    await Promise.all(
+      entries
+        .filter((entry) => entry.type === "file")
+        .map((entry) => addWholeFile(path ? `${path}/${entry.name}` : entry.name))
+    );
+  };
+
+  const getAnnCount = (path: string) => annCountMap.get(path) || 0;
+
+  const renderTree = (basePath: string, depth: number = 0): React.ReactNode => {
+    const dir = dirs[basePath];
+    if (!dir?.expanded) return null;
+    return dir.entries.map((entry) => {
+      const fullPath = basePath ? `${basePath}/${entry.name}` : entry.name;
+      const annCount = getAnnCount(fullPath);
+
+      return (
+        <div key={fullPath}>
+          <div
+            className="group/item flex items-center py-[3px] hover:bg-bg-elevated text-[13px] font-body cursor-default transition-colors duration-100"
+            style={{ paddingLeft: `${16 + depth * 16}px`, paddingRight: "8px" }}
+          >
+            {entry.type === "dir" ? (
+              <>
+                <span onClick={() => toggleDir(fullPath)} className="flex items-center gap-1.5 flex-1 text-text-secondary hover:text-text-primary cursor-pointer truncate">
+                  <FileIcon name={entry.name} type="dir" expanded={dirs[fullPath]?.expanded} />
+                  <span className="truncate">{entry.name}</span>
+                </span>
+                <button
+                  onClick={(e) => { e.stopPropagation(); addWholeDir(fullPath); }}
+                  className="text-[11px] text-text-tertiary hover:text-text-secondary opacity-0 group-hover/item:opacity-100 transition-opacity px-1 flex-shrink-0"
+                  title="Add all files in folder"
+                >
+                  +
+                </button>
+              </>
+            ) : (
+              <>
+                <span
+                  onClick={() => openFile(fullPath)}
+                  className={`flex-1 truncate cursor-pointer flex items-center gap-1.5 ${annCount > 0 ? "text-text-primary" : "text-text-secondary hover:text-text-primary"}`}
+                >
+                  <FileIcon name={entry.name} type="file" />
+                  <span className="truncate">{entry.name}</span>
+                </span>
+                {/* Right side: annotation badge + add button */}
+                <div className="flex items-center gap-1 flex-shrink-0 ml-1">
+                  {annCount > 0 && (
+                    <span className="text-[10px] font-medium bg-badge-bg text-accent-amber px-1.5 py-px rounded-full min-w-[18px] text-center">
+                      {annCount}
+                    </span>
+                  )}
+                  <button
+                    onClick={(e) => { e.stopPropagation(); addWholeFile(fullPath); }}
+                    className="text-[11px] text-text-tertiary hover:text-text-secondary opacity-0 group-hover/item:opacity-100 transition-opacity px-1"
+                    title="Add file to context"
+                  >
+                    +
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+          {entry.type === "dir" && renderTree(fullPath, depth + 1)}
+        </div>
+      );
+    });
+  };
+
+  if (embedded) {
+    return (
+      <>
+        <div className="flex items-center justify-between px-4 pt-3 pb-2 flex-shrink-0">
+          <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary font-body">Files</span>
+        </div>
+        <div className="flex-1 overflow-y-auto">{renderTree("")}</div>
+        {annotatedFiles.length > 0 && (
+          <div className="border-t border-border-subtle px-4 py-3 flex-shrink-0">
+            <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body mb-1.5">Referenced</div>
+            {annotatedFiles.map((f) => (
+              <div key={f} onClick={() => openFile(f)} className="flex items-center justify-between text-[12px] font-body text-text-secondary hover:text-text-primary cursor-pointer py-0.5">
+                <span className="truncate">{f.split("/").pop()}</span>
+                <span className="text-[10px] font-medium bg-badge-bg text-accent-amber px-1.5 py-px rounded-full min-w-[18px] text-center flex-shrink-0 ml-1">
+                  {getAnnCount(f)}
+                </span>
+              </div>
+            ))}
+          </div>
+        )}
+      </>
+    );
+  }
+
+  if (collapsed) {
+    return (
+      <div className="hidden lg:flex w-8 border-r border-border-subtle bg-bg-surface flex-col items-center flex-shrink-0">
+        <button onClick={() => setCollapsed(false)} className="mt-3 p-1 text-text-tertiary hover:text-text-secondary transition-colors">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="hidden lg:flex w-60 border-r border-border-subtle bg-bg-surface flex-col flex-shrink-0 overflow-hidden">
+      <div className="flex items-center justify-between px-4 pt-4 pb-3 flex-shrink-0">
+        <span className="text-[11px] font-medium uppercase tracking-widest text-text-tertiary font-body">Files</span>
+        <button onClick={() => setCollapsed(true)} className="text-text-tertiary hover:text-text-secondary transition-colors p-0.5">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3l-4 4 4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto">{renderTree("")}</div>
+
+      {annotatedFiles.length > 0 && (
+        <div className="border-t border-border-subtle px-4 py-3 flex-shrink-0">
+          <div className="text-[10px] uppercase tracking-widest text-text-tertiary font-body mb-1.5">Referenced</div>
+          {annotatedFiles.map((f) => (
+            <div key={f} onClick={() => openFile(f)} className="flex items-center justify-between text-[12px] font-body text-text-secondary hover:text-text-primary cursor-pointer py-0.5">
+              <span className="truncate">{f.split("/").pop()}</span>
+              <span className="text-[10px] font-medium bg-badge-bg text-accent-amber px-1.5 py-px rounded-full min-w-[18px] text-center flex-shrink-0 ml-1">
+                {getAnnCount(f)}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/daemon/client/FileIcon.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+interface FileIconProps {
+  name: string;
+  type: "file" | "dir";
+  expanded?: boolean;
+  className?: string;
+}
+
+const extColors: Record<string, string> = {
+  // TypeScript / JavaScript
+  ts: "#3178c6", tsx: "#3178c6", js: "#e8a32e", jsx: "#4ba0c8",
+  // Web
+  html: "#e34c26", css: "#264de4", scss: "#c69",
+  // Data
+  json: "#7a7568", yaml: "#cb171e", yml: "#cb171e", toml: "#9c4221",
+  // Systems
+  rs: "#dea584", go: "#00add8", c: "#6a6a6a", cpp: "#f34b7d", h: "#6a6a6a",
+  // Scripting
+  py: "#3572a5", rb: "#cc342d", sh: "#5a8c3c", bash: "#5a8c3c",
+  // Markup / docs
+  md: "#3573b5", txt: "#6b6560",
+  // Config
+  lock: "#6b6560", gitignore: "#6b6560",
+  // Images
+  svg: "#d9952e", png: "#6a9c2e", jpg: "#6a9c2e", gif: "#6a9c2e",
+};
+
+const extLabels: Record<string, string> = {
+  ts: "TS", tsx: "TX", js: "JS", jsx: "JX",
+  py: "PY", rs: "RS", go: "GO", rb: "RB",
+  json: "{}", yaml: "YM", yml: "YM", toml: "TM",
+  html: "<>", css: "#", scss: "#",
+  md: "M↓", sh: "$", bash: "$",
+  c: "C", cpp: "C+", h: "H",
+  svg: "◇", png: "▣", jpg: "▣",
+};
+
+export function FileIcon({ name, type, expanded, className = "" }: FileIconProps) {
+  if (type === "dir") {
+    return (
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" className={`flex-shrink-0 ${className}`}>
+        {expanded ? (
+          <path d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z" style={{ fill: "var(--color-folder-fill-active)", stroke: "var(--color-folder-stroke-active)" }} strokeWidth="1" />
+        ) : (
+          <path d="M1.5 3.5h5l1.5 1.5h6.5v8h-13z" style={{ fill: "var(--color-folder-fill)", stroke: "var(--color-folder-stroke)" }} strokeWidth="1" />
+        )}
+      </svg>
+    );
+  }
+
+  const ext = name.includes(".") ? name.split(".").pop()!.toLowerCase() : "";
+  const color = extColors[ext] || "#6b6560";
+  const label = extLabels[ext];
+
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" className={`flex-shrink-0 ${className}`}>
+      {/* File shape with folded corner */}
+      <path d="M2 1.5h8l3.5 3.5v9.5a1 1 0 01-1 1H3a1 1 0 01-1-1v-12a1 1 0 011-1z" fill={color} opacity="0.85" />
+      <path d="M10 1.5v2.5a1 1 0 001 1h2.5" fill="none" stroke="white" strokeWidth="0.5" opacity="0.5" />
+      {label && (
+        <text
+          x="8"
+          y="11.5"
+          textAnchor="middle"
+          fill="white"
+          fontSize="5.5"
+          fontFamily="monospace"
+          fontWeight="600"
+        >
+          {label}
+        </text>
+      )}
+    </svg>
+  );
+}