agent-canvas 0.1.3 → 0.1.4

package/bin/agent-canvas.ts

@@ -285,10 +285,6 @@ async function ensureDaemon(): Promise<void> {
 
   child.unref();
 
-  if (child.pid) {
-    writeFileSync(PID_FILE, String(child.pid));
-  }
-
   for (let i = 0; i < 30; i++) {
     await new Promise((r) => setTimeout(r, 100));
     if (await isDaemonRunning()) {

package/daemon/client/App.tsx

@@ -143,6 +143,7 @@ function App() {
   const [openFiles, setOpenFiles] = useState<string[]>([]);
   const wsRef = useRef<WebSocket | null>(null);
 
+  const [projectRoot, setProjectRoot] = useState<string | undefined>();
   const [mobileSidebar, setMobileSidebar] = useState(false);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
@@ -150,14 +151,19 @@ function App() {
   // Dynamic document title
   useEffect(() => {
     const parts = ["Agent Canvas"];
-    if (sessionId) parts.push(sessionId);
+    if (projectRoot) {
+      const segments = projectRoot.replace(/\/+$/, "").split("/");
+      parts.push(segments[segments.length - 1] || sessionId);
+    } else if (sessionId) {
+      parts.push(sessionId);
+    }
     if (activeView.type === "file") {
       parts.push(activeView.path.split("/").pop() || activeView.path);
     } else if (compareRevision) {
       parts.push("Compare");
     }
     document.title = parts.join(" — ");
-  }, [sessionId, activeView, compareRevision]);
+  }, [sessionId, projectRoot, activeView, compareRevision]);
 
   // Scroll position restore per view
   const scrollPositions = useRef<Map<string, number>>(new Map());
@@ -206,6 +212,7 @@ function App() {
           setSelectedRevision(data.currentRevision);
           setRevisions(data.revisions || []);
         }
+        if (data.projectRoot) setProjectRoot(data.projectRoot);
       })
       .catch(() => {});
   }, [sessionId]);
@@ -259,7 +266,7 @@ function App() {
           <ActiveViewCtx.Provider value={{ setActiveView }}>
             <div className="min-h-screen bg-bg-base">
               {/* Left panel — fixed to viewport */}
-              <LeftPanel sessionId={sessionId} connected={connected} onMobileSidebar={() => setMobileSidebar(!mobileSidebar)} collapsed={leftCollapsed} onToggle={() => setLeftCollapsed((c) => !c)} />
+              <LeftPanel sessionId={sessionId} projectRoot={projectRoot} connected={connected} onMobileSidebar={() => setMobileSidebar(!mobileSidebar)} collapsed={leftCollapsed} onToggle={() => setLeftCollapsed((c) => !c)} />
 
               {/* Right panel — fixed to viewport, resizable (hidden in compare mode) */}
               {compareRevision === null && (
@@ -283,7 +290,7 @@ function App() {
                 {/* Mobile top bar — only visible < lg */}
                 <div className="lg:hidden sticky top-0 z-20 flex items-center justify-between px-4 py-2 border-b border-border-subtle bg-bg-surface">
                   <div className="flex items-center gap-2">
-                    <SessionSwitcher currentSessionId={sessionId} />
+                    <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />
                     <span className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-accent-green" : "bg-accent-red"}`} />
                   </div>
                   <div className="flex items-center gap-1">
@@ -367,7 +374,7 @@ function App() {
   );
 }
 
-function LeftPanel({ sessionId, connected, onMobileSidebar, collapsed, onToggle }: { sessionId: string; connected: boolean; onMobileSidebar: () => void; collapsed: boolean; onToggle: () => void }) {
+function LeftPanel({ sessionId, projectRoot, connected, onMobileSidebar, collapsed, onToggle }: { sessionId: string; projectRoot?: string; connected: boolean; onMobileSidebar: () => void; collapsed: boolean; onToggle: () => void }) {
   return (
     <>
       {/* Collapsed toggle button */}
@@ -390,7 +397,7 @@ function LeftPanel({ sessionId, connected, onMobileSidebar, collapsed, onToggle
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className="text-text-tertiary flex-shrink-0">
               <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
             </svg>
-            <SessionSwitcher currentSessionId={sessionId} />
+            <SessionSwitcher currentSessionId={sessionId} projectRoot={projectRoot} />
             <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${connected ? "bg-accent-green" : "bg-accent-red"}`} />
             <button
               onClick={onToggle}

package/daemon/client/SessionSwitcher.tsx

@@ -2,15 +2,25 @@ import React, { useEffect, useState, useRef } from "react";
 
 interface SessionInfo {
   id: string;
-  version: number;
+  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;
+}
+
 interface SessionSwitcherProps {
   currentSessionId: string;
+  projectRoot?: string;
 }
 
-export function SessionSwitcher({ currentSessionId }: SessionSwitcherProps) {
+export function SessionSwitcher({ currentSessionId, projectRoot }: SessionSwitcherProps) {
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -37,7 +47,7 @@ export function SessionSwitcher({ currentSessionId }: SessionSwitcherProps) {
   }, [open]);
 
   const otherSessions = sessions.filter((s) => s.id !== currentSessionId);
-  const displayName = currentSessionId.length > 30 ? currentSessionId.slice(0, 30) + "..." : currentSessionId;
+  const displayName = sessionDisplayName(currentSessionId, projectRoot);
 
   return (
     <div className="relative" ref={ref}>
@@ -62,7 +72,7 @@ export function SessionSwitcher({ currentSessionId }: SessionSwitcherProps) {
               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">{s.id}</span>
+              <span className="truncate">{sessionDisplayName(s.id, s.projectRoot)}</span>
             </a>
           ))}
         </div>

package/daemon/client/components/Mermaid.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
+import ReactDOM from "react-dom";
 import { useAnnotations, Annotation } from "#canvas/runtime";
 import { AnnotationCreatePopover } from "../Popover";
 
@@ -12,12 +13,154 @@ interface NodePopoverState {
   prefix: string;
 }
 
+const ZOOM_STEP = 0.2;
+const ZOOM_MIN = 0.25;
+const ZOOM_MAX = 4;
+
+function ZoomToolbar({ zoom, onZoomIn, onZoomOut, onZoomReset, onFullscreen }: {
+  zoom: number;
+  onZoomIn: () => void;
+  onZoomOut: () => void;
+  onZoomReset: () => void;
+  onFullscreen?: () => void;
+}) {
+  const btnClass = "flex items-center justify-center w-7 h-7 rounded hover:bg-bg-elevated text-text-secondary hover:text-text-primary transition-colors";
+  return (
+    <div className="flex items-center gap-0.5 bg-bg-surface border border-border-subtle rounded-md px-1 py-0.5" style={{ fontSize: "12px" }}>
+      <button className={btnClass} onClick={onZoomOut} title="Zoom out" disabled={zoom <= ZOOM_MIN}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </button>
+      <button className="px-1.5 h-7 rounded hover:bg-bg-elevated text-text-tertiary hover:text-text-primary transition-colors tabular-nums" onClick={onZoomReset} title="Reset zoom">
+        {Math.round(zoom * 100)}%
+      </button>
+      <button className={btnClass} onClick={onZoomIn} title="Zoom in" disabled={zoom >= ZOOM_MAX}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+      </button>
+      {onFullscreen && (
+        <>
+          <div className="w-px h-4 bg-border-subtle mx-0.5" />
+          <button className={btnClass} onClick={onFullscreen} title="Fullscreen">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+function useZoom(initialZoom = 1) {
+  const [zoom, setZoom] = useState(initialZoom);
+  const zoomIn = useCallback(() => setZoom(z => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2))), []);
+  const zoomOut = useCallback(() => setZoom(z => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2))), []);
+  const zoomReset = useCallback(() => setZoom(1), []);
+  return { zoom, zoomIn, zoomOut, zoomReset, setZoom };
+}
+
+function MermaidFullscreenModal({ svgHtml, source, onClose }: {
+  svgHtml: string;
+  source: string;
+  onClose: () => void;
+}) {
+  const modalContentRef = useRef<HTMLDivElement>(null);
+  const { zoom, zoomIn, zoomOut, zoomReset, setZoom } = useZoom(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const dragging = useRef<{ startX: number; startY: number; panX: number; panY: number } | null>(null);
+
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+
+  // Wheel zoom
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+    setZoom(z => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, +(z + delta).toFixed(2))));
+  }, [setZoom]);
+
+  // Pan via mouse drag
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 0) return;
+    dragging.current = { startX: e.clientX, startY: e.clientY, panX: pan.x, panY: pan.y };
+    e.preventDefault();
+  }, [pan]);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!dragging.current) return;
+    setPan({
+      x: dragging.current.panX + (e.clientX - dragging.current.startX),
+      y: dragging.current.panY + (e.clientY - dragging.current.startY),
+    });
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    dragging.current = null;
+  }, []);
+
+  const handleResetView = useCallback(() => {
+    zoomReset();
+    setPan({ x: 0, y: 0 });
+  }, [zoomReset]);
+
+  return ReactDOM.createPortal(
+    <div
+      style={{ position: "fixed", inset: 0, zIndex: 9999, background: "var(--color-bg-base)", display: "flex", flexDirection: "column" }}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      {/* Header bar */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border-subtle" style={{ flexShrink: 0, background: "var(--color-bg-surface)" }}>
+        <span className="text-body text-text-secondary" style={{ fontSize: "13px" }}>Mermaid Diagram</span>
+        <div className="flex items-center gap-2">
+          <ZoomToolbar zoom={zoom} onZoomIn={zoomIn} onZoomOut={zoomOut} onZoomReset={handleResetView} />
+          <button
+            className="flex items-center justify-center w-8 h-8 rounded hover:bg-bg-elevated text-text-secondary hover:text-text-primary transition-colors"
+            onClick={onClose}
+            title="Close (Esc)"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+          </button>
+        </div>
+      </div>
+      {/* Diagram area */}
+      <div
+        style={{ flex: 1, overflow: "hidden", cursor: dragging.current ? "grabbing" : "grab" }}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+      >
+        <div
+          ref={modalContentRef}
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+            transformOrigin: "center center",
+            transition: dragging.current ? "none" : "transform 0.1s ease-out",
+          }}
+          dangerouslySetInnerHTML={{ __html: svgHtml }}
+        />
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 export function Mermaid({ children }: MermaidProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
+  const [showFullscreen, setShowFullscreen] = useState(false);
+  const [svgHtml, setSvgHtml] = useState("");
   const source = typeof children === "string" ? children : String(children ?? "");
   const { annotations, addAnnotationWithId, activeAnnotationId, setActiveAnnotationId } = useAnnotations();
   const [nodePopover, setNodePopover] = useState<NodePopoverState | null>(null);
+  const { zoom, zoomIn, zoomOut, zoomReset, setZoom } = useZoom(1);
 
   const annotationsRef = useRef(annotations);
   annotationsRef.current = annotations;
@@ -47,6 +190,7 @@ export function Mermaid({ children }: MermaidProps) {
         const { svg } = await mermaid.render(id, source.trim());
         if (!cancelled && containerRef.current) {
           containerRef.current.innerHTML = svg;
+          setSvgHtml(svg);
           setupNodeAnnotations(containerRef.current, (el, snippet, prefix) => handleNodeClickRef.current(el, snippet, prefix));
           highlightAnnotatedNodes(containerRef.current, annotationsRef.current);
         }
@@ -75,6 +219,14 @@ export function Mermaid({ children }: MermaidProps) {
     }
   }, [annotations, activeAnnotationId]);
 
+  // Wheel zoom on inline diagram
+  const handleWheel = useCallback((e: React.WheelEvent) => {
+    if (!e.ctrlKey && !e.metaKey) return;
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -ZOOM_STEP : ZOOM_STEP;
+    setZoom(z => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, +(z + delta).toFixed(2))));
+  }, [setZoom]);
+
   if (error) {
     return (
       <div className="bg-accent-red-muted rounded-md p-4 mt-3 text-body text-accent-red">
@@ -88,7 +240,31 @@ export function Mermaid({ children }: MermaidProps) {
 
   return (
     <>
-      <div ref={containerRef} className="mt-3 flex justify-center overflow-x-auto mermaid-container" data-md="mermaid" data-md-source={source.trim()} />
+      <div className="mt-3 mermaid-container" data-md="mermaid" data-md-source={source.trim()}>
+        {/* Zoom toolbar */}
+        <div className="flex justify-end mb-1">
+          <ZoomToolbar
+            zoom={zoom}
+            onZoomIn={zoomIn}
+            onZoomOut={zoomOut}
+            onZoomReset={zoomReset}
+            onFullscreen={() => setShowFullscreen(true)}
+          />
+        </div>
+        {/* Zoomable diagram */}
+        <div style={{ overflow: "auto", maxHeight: "70vh" }} onWheel={handleWheel}>
+          <div
+            ref={containerRef}
+            className="flex justify-center"
+            style={{
+              transform: `scale(${zoom})`,
+              transformOrigin: "top center",
+              transition: "transform 0.1s ease-out",
+              minHeight: zoom < 1 ? undefined : undefined,
+            }}
+          />
+        </div>
+      </div>
       {nodePopover && (
         <AnnotationCreatePopover
           anchorEl={nodePopover.anchorEl}
@@ -108,6 +284,13 @@ export function Mermaid({ children }: MermaidProps) {
           onCancel={() => setNodePopover(null)}
         />
       )}
+      {showFullscreen && svgHtml && (
+        <MermaidFullscreenModal
+          svgHtml={svgHtml}
+          source={source}
+          onClose={() => setShowFullscreen(false)}
+        />
+      )}
     </>
   );
 }
@@ -188,6 +371,57 @@ function setupNodeAnnotations(
     if (!text) continue;
     makeClickable(msgText as SVGElement, () => text, "Edge");
   }
+
+  // ER diagram: entities
+  for (const entity of container.querySelectorAll(".entityBox")) {
+    const group = entity.closest("g") as SVGElement | null;
+    if (!group || group.hasAttribute("data-clickable")) continue;
+    const labelEl = group.querySelector(".entityLabel");
+    if (!labelEl) continue;
+    group.setAttribute("data-clickable", "true");
+    makeClickable(group, () => labelEl.textContent?.trim() || "Entity", "Node");
+  }
+
+  // ER diagram: relationship labels
+  for (const label of container.querySelectorAll(".relationshipLabel")) {
+    const text = label.textContent?.trim();
+    if (!text) continue;
+    const group = label.closest("g") as SVGElement | null;
+    const target = group || label as SVGElement;
+    if (target.hasAttribute("data-clickable")) continue;
+    target.setAttribute("data-clickable", "true");
+    makeClickable(target, () => text, "Edge");
+  }
+
+  // Class diagram: class groups
+  for (const classGroup of container.querySelectorAll(".classGroup")) {
+    const el = classGroup as SVGElement;
+    if (el.hasAttribute("data-clickable")) continue;
+    const labelEl = el.querySelector(".classTitle, .classTitleText, text");
+    if (!labelEl) continue;
+    el.setAttribute("data-clickable", "true");
+    makeClickable(el, () => labelEl.textContent?.trim() || "Class", "Node");
+  }
+
+  // State diagram: states
+  for (const state of container.querySelectorAll(".statediagram-state")) {
+    const el = state as SVGElement;
+    if (el.hasAttribute("data-clickable")) continue;
+    const labelEl = el.querySelector(".state-title, text");
+    if (!labelEl) continue;
+    el.setAttribute("data-clickable", "true");
+    makeClickable(el, () => labelEl.textContent?.trim() || "State", "Node");
+  }
+
+  // Mindmap: nodes
+  for (const node of container.querySelectorAll(".mindmap-node")) {
+    const el = node as SVGElement;
+    if (el.hasAttribute("data-clickable")) continue;
+    const labelEl = el.querySelector(".mindmap-node-label, text");
+    if (!labelEl) continue;
+    el.setAttribute("data-clickable", "true");
+    makeClickable(el, () => labelEl.textContent?.trim() || "Node", "Node");
+  }
 }
 
 function highlightAnnotatedNodes(container: HTMLElement, annotations: Annotation[], activeId?: string | null) {
@@ -274,4 +508,57 @@ function highlightAnnotatedNodes(container: HTMLElement, annotations: Annotation
     el.style.outlineOffset = "2px";
     el.style.borderRadius = "4px";
   }
+
+  // Helper for group-based highlights (ER entities, class groups, states, mindmap nodes)
+  const highlightGroups = (
+    selector: string,
+    labelSelector: string,
+    findGroup: (el: Element) => SVGElement | null,
+  ) => {
+    for (const el of container.querySelectorAll(selector)) {
+      const group = findGroup(el);
+      if (!group || group.hasAttribute("data-annotated")) continue;
+      const labelEl = group.querySelector(labelSelector);
+      const text = labelEl?.textContent?.trim();
+      if (!text || !annotatedSnippets.has(text)) continue;
+      const annId = annotatedSnippets.get(text)!;
+      group.setAttribute("data-annotated", annId);
+      const isActive = annId === activeId;
+      const target = group.querySelector("rect, circle, ellipse, polygon") as SVGElement || group;
+      target.style.outline = isActive
+        ? "2px solid var(--color-highlight-border)"
+        : "2px solid var(--color-highlight-annotation)";
+      target.style.outlineOffset = "2px";
+      target.style.borderRadius = "4px";
+    }
+  };
+
+  // ER diagram: entities
+  highlightGroups(".entityBox", ".entityLabel", (el) => el.closest("g") as SVGElement | null);
+
+  // ER diagram: relationship labels
+  for (const label of container.querySelectorAll(".relationshipLabel")) {
+    const group = label.closest("g") as SVGElement | null;
+    const target = group || label as SVGElement;
+    if (target.hasAttribute("data-annotated")) continue;
+    const text = label.textContent?.trim();
+    if (!text || !annotatedSnippets.has(text)) continue;
+    const annId = annotatedSnippets.get(text)!;
+    target.setAttribute("data-annotated", annId);
+    const isActive = annId === activeId;
+    (target as SVGElement).style.outline = isActive
+      ? "2px solid var(--color-highlight-border)"
+      : "2px solid var(--color-highlight-annotation)";
+    (target as SVGElement).style.outlineOffset = "2px";
+    (target as SVGElement).style.borderRadius = "4px";
+  }
+
+  // Class diagram
+  highlightGroups(".classGroup", ".classTitle, .classTitleText, text", (el) => el as SVGElement);
+
+  // State diagram
+  highlightGroups(".statediagram-state", ".state-title, text", (el) => el as SVGElement);
+
+  // Mindmap
+  highlightGroups(".mindmap-node", ".mindmap-node-label, text", (el) => el as SVGElement);
 }