improved a lot of things

packages/app/src/app/api/agent-bridge/route.ts

@@ -3,7 +3,7 @@
 // Authentication: Bearer <workspace_token> (HMAC-SHA256, issued by issueWorkspaceToken).
 
 import { NextRequest, NextResponse } from 'next/server';
-import { verifyWorkspaceToken, TOOL_MAP } from '@originmain/agent-bridge';
+import { verifyWorkspaceToken, TOOL_MAP, getToolList } from '@originmain/agent-bridge';
 import type { JsonRpcRequest, ToolContext } from '@originmain/agent-bridge';
 import {
   getDiffsByStatus,
@@ -47,12 +47,10 @@ export async function POST(req: NextRequest) {
   }
 
   // tools/list — meta-endpoint; return available tools without executing one.
+  // MCP spec requires each entry to include inputSchema so clients can
+  // construct valid tool calls without out-of-band documentation.
   if (body.method === 'tools/list') {
-    const tools = [...TOOL_MAP.values()].map(t => ({
+    return NextResponse.json({ jsonrpc: '2.0', id: body.id, result: { tools: getToolList() } });
-      name: t.name,
-      description: t.description,
-    }));
-    return NextResponse.json({ jsonrpc: '2.0', id: body.id, result: { tools } });
   }
 
   // ── Dispatch ────────────────────────────────────────────────────────────────

packages/app/src/app/api/design-language/route.ts

@@ -17,7 +17,7 @@ export async function GET(req: NextRequest) {
   try {
     const db = serverClient();
     const file = await getActiveDesignLanguageFile(db, workspaceId);
-    if (!file) return NextResponse.json(null, { status: 204 });
+    if (!file) return NextResponse.json(null);
     return NextResponse.json(file);
   } catch (err) {
     const message = err instanceof Error ? err.message : 'Unknown error';

packages/app/src/components/canvas/Artboard.tsx

@@ -55,8 +55,12 @@ export function Artboard({ id, label, x, y, width, height, renderUrl }: Artboard
   }, [localFiberRoot, selectComponent]);
 
   // ── Drag to reposition ─────────────────────────────────────────────────────
-  const isDragging = useRef(false);
+  const isDragging    = useRef(false);
-  const dragStart  = useRef({ mouseX: 0, mouseY: 0, artX: 0, artY: 0 });
+  const dragStart     = useRef({ mouseX: 0, mouseY: 0, artX: 0, artY: 0 });
+  // dragOffsetRef carries the live offset into the onUp closure, avoiding the
+  // stale-state problem that occurs when useCallback captures dragOffset before
+  // any mousemove events have fired.
+  const dragOffsetRef = useRef({ dx: 0, dy: 0 });
   const [dragOffset, setDragOffset] = useState({ dx: 0, dy: 0 });
 
   const onLabelMouseDown = useCallback((e: React.MouseEvent) => {
@@ -65,6 +69,7 @@ export function Artboard({ id, label, x, y, width, height, renderUrl }: Artboard
     e.stopPropagation();
     e.preventDefault();
     isDragging.current = true;
+    dragOffsetRef.current = { dx: 0, dy: 0 };
     const { zoom, panX, panY } = useViewport.getState();
     dragStart.current = {
       mouseX: (e.clientX - panX) / zoom,
@@ -79,10 +84,13 @@ export function Artboard({ id, label, x, y, width, height, renderUrl }: Artboard
       const { zoom: z, panX: px, panY: py } = useViewport.getState();
       const curX = (mv.clientX - px) / z;
       const curY = (mv.clientY - py) / z;
-      setDragOffset({
+      const offset = {
         dx: curX - dragStart.current.mouseX,
         dy: curY - dragStart.current.mouseY,
-      });
+      };
+      // Update the ref first so onUp always reads the final position.
+      dragOffsetRef.current = offset;
+      setDragOffset(offset);
     };
 
     const onUp = () => {
@@ -91,8 +99,10 @@ export function Artboard({ id, label, x, y, width, height, renderUrl }: Artboard
       window.removeEventListener('mousemove', onMove);
       window.removeEventListener('mouseup', onUp);
 
-      const newX = Math.round(dragStart.current.artX + dragOffset.dx);
+      // Read the final offset from the ref — never stale regardless of when
-      const newY = Math.round(dragStart.current.artY + dragOffset.dy);
+      // useCallback last reconstructed onLabelMouseDown.
+      const newX = Math.round(dragStart.current.artX + dragOffsetRef.current.dx);
+      const newY = Math.round(dragStart.current.artY + dragOffsetRef.current.dy);
 
       // Persist position
       fetch(`/api/artboards/${id}`, {
@@ -104,12 +114,13 @@ export function Artboard({ id, label, x, y, width, height, renderUrl }: Artboard
       }).then(() => {
         queryClient.invalidateQueries({ queryKey: ['artboards', workspaceId, projectId ?? undefined] });
         setDragOffset({ dx: 0, dy: 0 });
+        dragOffsetRef.current = { dx: 0, dy: 0 };
       }).catch(console.error);
     };
 
     window.addEventListener('mousemove', onMove);
     window.addEventListener('mouseup', onUp);
-  }, [id, x, y, width, height, renderUrl, workspaceId, projectId, queryClient, dragOffset.dx, dragOffset.dy]);
+  }, [id, x, y, width, height, renderUrl, workspaceId, projectId, queryClient]);
 
   // ── Inline rename ──────────────────────────────────────────────────────────
   const [renaming, setRenaming] = useState(false);

packages/app/src/components/shell/ProjectSettingsForm.tsx

@@ -62,7 +62,7 @@ export function ProjectSettingsForm({
   memberRole,
 }: ProjectSettingsFormProps) {
   const router = useRouter();
-  const isOwnerOrDev = memberRole === 'OWNER' || memberRole === 'DEVELOPER' || memberRole === 'DESIGNER';
+  const isOwnerOrDev = memberRole === 'OWNER' || memberRole === 'ENGINEER' || memberRole === 'DESIGNER';
 
   /* ── Form state ── */
   const [name, setName]               = useState(initialName);
@@ -229,7 +229,7 @@ export function ProjectSettingsForm({
                 border: '1px solid rgba(239,68,68,0.35)', background: 'transparent',
                 color: '#EF4444', cursor: deleteConfirm.trim() === initialName.trim() ? 'pointer' : 'not-allowed',
                 flexShrink: 0,
-                opacity: deleteConfirm.trim() !== name.trim() || deleting ? 0.4 : 1,
+                opacity: deleteConfirm.trim() !== initialName.trim() || deleting ? 0.4 : 1,
               }}
             >
               {deleting ? 'Deleting…' : 'Delete project'}

packages/live-sdk/src/hook.ts

@@ -4,7 +4,7 @@
 // import time; any later installation is too late.
 //
 // Full bidirectional protocol:
-//   Renderer → Host : READY, FIBER_TREE_UPDATE, COMPONENT_SELECTED, ERROR
+//   Renderer → Host : READY, FIBER_TREE_UPDATE, COMPONENT_SELECTED, COMPONENT_DESELECTED, ERROR
 //   Host → Renderer : SET_DESIGN_TOKENS, NAVIGATE, SELECT_COMPONENT, DESELECT
 //
 // Node IDs are stable path strings: "Component:idx/Child:idx/…"
@@ -57,8 +57,11 @@ function installFiberHook(): void {
   }
 
   // ── Runtime state ─────────────────────────────────────────────────────────
-  let currentTree: SerializedNode | null = null;
+  // nodeMap: nodeId → { domRect (snapshot), fiber (live reference for re-measurement) }
-  const nodeMap = new Map<string, { domRect: DomRect | null }>();
+  let nodeMap = new Map<string, { domRect: DomRect | null; fiber: FiberLike }>();
+  // fiberMap: fiber object → nodeId for O(1) hit-test lookup via __reactFiber$ DOM keys.
+  // A null value means the fiber is unnamed/transparent and not directly selectable.
+  let fiberMap = new WeakMap<object, string | null>();
   let selectedNodeId: string | null = null;
   let highlightEl: HTMLElement | null = null;
 
@@ -93,9 +96,13 @@ function installFiberHook(): void {
       const root = args[1] as { current: FiberLike } | undefined;
       if (!root?.current) return;
 
+      // Reset both maps before each walk so stale entries from the previous tree
+      // don't accumulate. fiberMap is a WeakMap so it self-cleans, but nodeMap
+      // must be rebuilt from scratch on every commit.
+      nodeMap  = new Map();
+      fiberMap = new WeakMap();
+
       const tree = serializeFiber(root.current, '');
-      currentTree = tree;
-      rebuildNodeMap(tree);
       post({ type: 'FIBER_TREE_UPDATE', root: tree });
       // Re-sync the highlight ring after each React commit (component may move).
       if (selectedNodeId) updateHighlight();
@@ -105,6 +112,12 @@ function installFiberHook(): void {
   };
 
   // ── Fiber serialization (stable path-based IDs) ───────────────────────────
+  // ID format: "ComponentName:siblingIndex/ChildName:siblingIndex/..."
+  //
+  // IMPORTANT: unnamed fibers (Fragment, Context.Provider, React.memo wrappers)
+  // are transparent — their children are collected directly into their parent's
+  // children array. Returning only the first named child (old approach) caused
+  // entire subtrees to vanish from the tree.
 
   function serializeFiber(
     fiber: FiberLike | null,
@@ -114,14 +127,13 @@ function installFiberHook(): void {
 
     const name = getDisplayName(fiber);
     if (!name) {
-      // Unnamed fiber — skip level but keep walking children.
+      // Unnamed root fiber (HostRoot) — collectChildren handles Fragment recursively.
-      let child = fiber.child;
+      const children: SerializedNode[] = [];
-      while (child) {
+      collectChildren(fiber, parentId, children);
-        const s = serializeFiber(child, parentId);
+      if (children.length === 1) return children[0];
-        if (s) return s;
+      if (children.length === 0) return null;
-        child = child.sibling;
+      // Multiple named children at root — wrap in a synthetic root node.
-      }
+      return { id: '__root__', name: '__root__', props: {}, children };
-      return null;
     }
 
     const nodeId = (parentId ? parentId + '/' : '') + name + ':' + String(fiber.index);
@@ -134,13 +146,31 @@ function installFiberHook(): void {
     };
     if (rect) node.domRect = rect;
 
+    // Register in both maps for O(1) lookup.
+    nodeMap.set(nodeId, { domRect: rect, fiber });
+    fiberMap.set(fiber, nodeId);
+
+    collectChildren(fiber, nodeId, node.children);
+    return node;
+  }
+
+  // Collect all named descendants of fiber.child into out[], transparently
+  // flattening unnamed intermediates (Fragments, Providers, wrappers).
+  function collectChildren(fiber: FiberLike, parentId: string, out: SerializedNode[]): void {
     let child = fiber.child;
     while (child) {
-      const serialized = serializeFiber(child, nodeId);
+      const name = getDisplayName(child);
-      if (serialized) node.children.push(serialized);
+      if (name) {
+        const serialized = serializeFiber(child, parentId);
+        if (serialized) out.push(serialized);
+      } else {
+        // Unnamed (Fragment / Context / Provider / forwardRef wrapper etc.):
+        // mark as non-selectable and flatten children directly into our level.
+        fiberMap.set(child, null);
+        collectChildren(child, parentId, out);
+      }
       child = child.sibling;
     }
-    return node;
   }
 
   function getDisplayName(fiber: FiberLike): string | null {
@@ -187,25 +217,21 @@ function installFiberHook(): void {
     return out;
   }
 
-  // ── Node map: flat O(1) lookup by stable ID ───────────────────────────────
-
-  function rebuildNodeMap(node: SerializedNode | null): void {
-    nodeMap.clear();
-    fillMap(node);
-  }
-
-  function fillMap(node: SerializedNode | null): void {
-    if (!node) return;
-    nodeMap.set(node.id, { domRect: node.domRect ?? null });
-    for (const child of node.children) fillMap(child);
-  }
-
   // ── Highlight overlay (blue ring inside the iframe) ───────────────────────
+  // updateHighlight re-measures from the live fiber stateNode so the ring stays
+  // accurate even after scroll (between React commits).
 
   function updateHighlight(): void {
     const info = selectedNodeId ? nodeMap.get(selectedNodeId) : undefined;
-    if (info?.domRect) renderHighlight(info.domRect);
+    if (!info) { removeHighlight(); return; }
-    else removeHighlight();
+
+    // Re-measure from the live DOM element for scroll accuracy.
+    const rect = getDomRect(info.fiber) ?? info.domRect;
+    if (rect && rect.width > 0 && rect.height > 0) {
+      renderHighlight(rect);
+    } else {
+      removeHighlight();
+    }
   }
 
   function renderHighlight(rect: DomRect): void {
@@ -235,40 +261,60 @@ function installFiberHook(): void {
     }
   }
 
-  // ── Click-to-select (capturing phase) ────────────────────────────────────
+  // Re-measure on scroll so the ring follows the element without needing
-
+  // a React commit (which only fires on state/prop changes).
-  document.addEventListener('click', (event: MouseEvent) => {
+  window.addEventListener('scroll', () => {
-    const node = findDeepestAt(currentTree, event.clientX, event.clientY);
+    if (selectedNodeId) updateHighlight();
-    if (node?.domRect) {
-      post({ type: 'COMPONENT_SELECTED', nodeId: node.id, rect: node.domRect });
-    }
   }, true);
 
-  function findDeepestAt(
+  // ── Click-to-select (capturing phase) ────────────────────────────────────
-    node: SerializedNode | null,
+  // Uses document.elementFromPoint to get the live DOM element at the click
-    x: number,
+  // position (accurate even after scroll), then walks the React fiber tree
-    y: number,
+  // upward via __reactFiber$ keys to find the nearest tracked component.
-  ): SerializedNode | null {
-    if (!node) return null;
-    const r   = node.domRect;
-    const hit = r && x >= r.x && x <= r.x + r.width && y >= r.y && y <= r.y + r.height;
 
-    if (hit) {
+  function getFiberKey(el: Element): string | null {
-      for (const child of node.children) {
+    const keys = Object.keys(el);
-        const deeper = findDeepestAt(child, x, y);
+    for (let i = 0; i < keys.length; i++) {
-        if (deeper) return deeper;
+      if (keys[i].startsWith('__reactFiber$')) return keys[i];
-      }
-      return node;
-    }
-
-    // No hit — still check children for overflow:visible scenarios.
-    for (const child of node.children) {
-      const found = findDeepestAt(child, x, y);
-      if (found) return found;
     }
     return null;
   }
 
+  document.addEventListener('click', (event: MouseEvent) => {
+    // Ignore clicks on our own highlight overlay.
+    if (event.target === highlightEl) return;
+
+    const el = document.elementFromPoint(event.clientX, event.clientY);
+
+    // Walk the DOM upward, trying to find a tracked React fiber at each level.
+    let current: Element | null = el;
+    while (current && current !== document.documentElement) {
+      const fiberKey = getFiberKey(current);
+      if (fiberKey) {
+        // Walk the fiber's return (parent) chain to find the nearest tracked node.
+        let fiber: FiberLike | null =
+          (current as unknown as Record<string, unknown>)[fiberKey] as FiberLike | null;
+        while (fiber) {
+          const nodeId = fiberMap.get(fiber);
+          if (nodeId) {
+            // Re-measure from the live element for accurate post-scroll rect.
+            const liveEl = fiber.stateNode;
+            if (liveEl && typeof liveEl === 'object' && 'getBoundingClientRect' in liveEl) {
+              const r = (liveEl as Element).getBoundingClientRect();
+              post({ type: 'COMPONENT_SELECTED', nodeId, rect: { x: r.x, y: r.y, width: r.width, height: r.height } });
+              return;
+            }
+          }
+          fiber = fiber.return;
+        }
+      }
+      current = current.parentElement;
+    }
+
+    // Nothing found — clear the selection.
+    post({ type: 'COMPONENT_DESELECTED' });
+  }, true);
+
   // ── Host → Renderer message handler ──────────────────────────────────────
 
   window.addEventListener('message', (event: MessageEvent) => {
@@ -327,6 +373,8 @@ interface FiberLike {
   index: number;
   child: FiberLike | null;
   sibling: FiberLike | null;
+  /** Parent fiber — needed for click-to-select chain walk via __reactFiber$ keys. */
+  return: FiberLike | null;
   stateNode: unknown;
   memoizedProps: Record<string, unknown> | null;
 }

packages/renderer/src/protocol.ts

@@ -28,8 +28,7 @@ export type HostMessage =
   | { type: 'SET_DESIGN_TOKENS'; tokens: Record<string, string> }
   | { type: 'NAVIGATE'; path: string }
   | { type: 'SELECT_COMPONENT'; nodeId: string }
-  | { type: 'DESELECT' }
+  | { type: 'DESELECT' };
-  | { type: 'INJECT_FIBER_HOOK' };
 
 export interface HostEnvelope {
   source: typeof HOST_SOURCE;