improved a lot of things

packages/app/public/features/agent-bridge.html

@@ -313,7 +313,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -339,7 +339,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -351,7 +351,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">MCP channel to<br>Cursor, Claude Code<br>&amp; more.</h1>
     <p class="subtitle reveal">Agent Bridge exposes your entire Origin Graph through the Model Context Protocol — so Cursor, Claude Code, and any MCP-compatible agent can read your component tree, run diffs, and propose changes without leaving the editor.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -792,7 +792,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">Give your agents<br>real context.</h2>
     <p class="cta-sub">Connect Cursor or Claude Code to your live Origin Graph in under five minutes. No hallucinated docs — just your actual codebase, queryable from any MCP agent.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/features/completion-zone.html

@@ -283,7 +283,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -309,7 +309,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -321,7 +321,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">AI-filled design,<br>constrained to your system.</h1>
     <p class="subtitle reveal">Describe a component in plain language. Completion Zone generates it using only tokens, variants, and patterns that already exist in your design system — no hallucinated styles, no drift.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -484,7 +484,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.</li>
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1.5L8.1 5.4 12 6.5l-3.9 1.1L7 11.5 5.9 7.6 2 6.5l3.9-1.1z"/><circle cx="11" cy="2.5" r="1" fill="currentColor" opacity="0.5"/></svg></span>Generates real code, not images — the output is a live component on your artboard, not a static screenshot.</li>
       </ul>
-      <a href="#" class="btn btn-primary">Request early access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
 
     <!-- Two-column comparison visual -->
@@ -728,7 +728,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">Fill the gaps in your<br>design system.</h2>
     <p class="cta-sub">Early access is free. Connect your Origin Graph and run your first completion in under two minutes.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/features/integrations.html

@@ -286,7 +286,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -312,7 +312,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -324,7 +324,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">Connect your<br>entire workflow.</h1>
     <p class="subtitle reveal">Originmain integrates with GitHub, Figma, Linear, Slack, VS Code, Cursor, TypeScript, and React — so every part of your design-to-code pipeline is connected, without changing how you work.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -756,7 +756,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">Your whole stack,<br>finally connected.</h2>
     <p class="cta-sub">Connect GitHub and Figma in under two minutes. Every other integration is one click from the dashboard.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/features/intent-diff.html

@@ -310,7 +310,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -336,7 +336,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -348,7 +348,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">Ship component-level<br>diffs, not redlines.</h1>
     <p class="subtitle reveal">Every design change is expressed as a structured diff of props, styles, and tree — not a screenshot comparison. Reviewers see exactly what changed and why.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -460,7 +460,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></span>Output is a standard unified patch string — parseable by any diff tooling in your stack.</li>
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1.5" y="4" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/><rect x="6" y="2.5" width="6.5" height="7.5" rx="1.3" stroke="currentColor" stroke-width="1.3"/></svg></span>CI/CD can consume the patch directly — block merges, post PR comments, or trigger alerts on specific prop changes.</li>
       </ul>
-      <a href="#" class="btn btn-primary">Request early access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
     <div class="feat-vis feat-vis-dark reveal">
       <div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;overflow:hidden;">
@@ -663,7 +663,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">No more redline hell.<br>Ship the diff.</h2>
     <p class="cta-sub">Every design change expressed as a structured, machine-readable, component-level diff. Early access is free.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/features/live-artboard.html

@@ -270,7 +270,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -296,7 +296,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -308,7 +308,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">Your app,<br>live on the canvas.</h1>
     <p class="subtitle reveal">Not a mockup. Not a screenshot. Every artboard is a real iframe render of your actual component tree — running your real code, connected to your real data.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -418,7 +418,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>The full fiber tree is mapped — every component, hook, and context value.</li>
         <li><span class="feat-pt-icon">⚡</span>Hot module reload propagates instantly. The canvas always reflects the current build.</li>
       </ul>
-      <a href="#" class="btn btn-primary">Request early access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
     <div class="feat-vis feat-vis-dark reveal">
       <div style="position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:8px;overflow:hidden;">
@@ -575,7 +575,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">See your app<br>live on the canvas.</h2>
     <p class="cta-sub">Early access is free. Connect your first artboard in under two minutes.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/features/origin-graph.html

@@ -274,7 +274,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-actions">
       <a href="#" class="btn btn-secondary" style="padding:7px 16px;font-size:.875rem">Log in</a>
-      <a href="#" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary" style="padding:8px 18px;font-size:.875rem">Get Started</a>
       <button class="nav-burger" id="nav-burger" aria-label="Menu"><span></span><span></span><span></span></button>
     </div>
   </div>
@@ -300,7 +300,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     </ul>
     <div class="nav-mobile-ctas">
       <a href="#" class="btn btn-secondary">Log in</a>
-      <a href="#" class="btn btn-primary">Request Access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
   </div>
 </nav>
@@ -312,7 +312,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h1 class="d1 reveal">Every component,<br>indexed and queryable.</h1>
     <p class="subtitle reveal">The Origin Graph is a living knowledge graph of your entire component ecosystem — relationships, history, usage, and design tokens — all queryable in real time.</p>
     <div class="page-hero-ctas reveal">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="#how-it-works" class="btn btn-outline-white btn-lg">See how it works ↓</a>
     </div>
   </div>
@@ -503,7 +503,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>Affected nodes are ranked by depth: direct consumers first, transitive next.</li>
         <li><span class="feat-pt-icon"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><circle cx="7" cy="2.5" r="1.5" fill="currentColor"/><circle cx="2.5" cy="11" r="1.5" fill="currentColor"/><circle cx="11.5" cy="11" r="1.5" fill="currentColor"/><path d="M6.2 3.8L3.2 9.6M7.8 3.8l3 5.8M3.8 11h6.4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/></svg></span>The result feeds directly into Intent Diff, so every PR ships with a complete blast-radius audit.</li>
       </ul>
-      <a href="#" class="btn btn-primary">Request early access</a>
+      <a href="/sign-up" class="btn btn-primary">Get Started</a>
     </div>
     <div class="feat-vis feat-vis-dark reveal">
       <div style="position:absolute;inset:0;padding:28px;display:flex;flex-direction:column;overflow:hidden;">
@@ -697,7 +697,7 @@ footer{background:#08080C;border-top:1px solid rgba(255,255,255,0.06);padding:72
     <h2 class="cta-headline">Your component graph,<br>always up to date.</h2>
     <p class="cta-sub">Early access is free. Connect your repo and the first full graph index runs in under a minute.</p>
     <div class="cta-actions">
-      <a href="#" class="btn btn-white btn-lg">Request Early Access</a>
+      <a href="/sign-up" class="btn btn-white btn-lg">Get Started Free</a>
       <a href="/" class="btn btn-outline-white btn-lg">Back to overview</a>
     </div>
   </div>

packages/app/public/marketing.html

@@ -2398,7 +2398,7 @@ footer {
           <li><span class="px-check">✓</span> Linear + Slack integration</li>
           <li><span class="px-check">✓</span> Multiplayer canvas</li>
         </ul>
-        <a href="/sign-up" class="btn btn-blue btn-full">Request early access</a>
+        <a href="/sign-up" class="btn btn-blue btn-full">Get Started Free</a>
       </div>
       <div class="px-card">
         <div class="px-tier">Enterprise</div>

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

@@ -3,7 +3,6 @@
 import { useRef, useEffect, useCallback } from 'react';
 import { useViewport } from '@/store/viewport';
 import { useCanvas } from '@/store/canvas';
-import { useWorkspace } from '@/hooks/useWorkspace';
 import { useArtboards } from '@/hooks/useArtboards';
 import { Artboard } from './Artboard';
 
@@ -12,10 +11,8 @@ export function Canvas() {
   const panX          = useViewport((s) => s.panX);
   const panY          = useViewport((s) => s.panY);
   const zoom          = useViewport((s) => s.zoom);
-  const { activeTool, selectArtboard } = useCanvas();
+  const { activeTool, selectArtboard, workspaceId } = useCanvas();
-
+  const { artboards } = useArtboards(workspaceId ?? undefined);
-  const { data: workspace } = useWorkspace();
-  const { artboards } = useArtboards(workspace?.id);
 
   const isPanning = useRef(false);
   const lastPos   = useRef({ x: 0, y: 0 });

packages/app/src/components/chrome/AppChrome.tsx

@@ -19,6 +19,12 @@ interface AppChromeProps {
 
 export function AppChrome({ workspaceId, projectId, workspaceName, projectName }: AppChromeProps) {
   const selectedArtboardId = useCanvas((s) => s.selectedArtboardId);
+  const setContext = useCanvas((s) => s.setContext);
+
+  // Push workspace/project IDs into the store so Canvas and Navigator can read them.
+  useEffect(() => {
+    if (workspaceId && projectId) setContext(workspaceId, projectId);
+  }, [workspaceId, projectId, setContext]);
 
   useEffect(() => {
     function onKeyDown(e: KeyboardEvent) {
@@ -37,24 +43,28 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [selectedArtboardId]);
-  const showBreadcrumb = workspaceId && projectId;
+
+  const showBreadcrumb = Boolean(workspaceId && projectId);
 
   return (
+    // Outer flex-column: breadcrumb on top (fixed height), inner grid fills the rest.
+    // Breadcrumb lives OUTSIDE the grid so the Toolbar/panel gridRow placements
+    // never shift regardless of whether the breadcrumb is visible.
     <div
       style={{
-        display: 'grid',
+        display: 'flex',
-        gridTemplateRows: showBreadcrumb ? '36px 44px 1fr' : '44px 1fr',
+        flexDirection: 'column',
-        gridTemplateColumns: '220px 1fr 272px',
         height: '100dvh',
         overflow: 'hidden',
         background: '#0C0C10',
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       }}
     >
-      {/* Breadcrumb bar — spans all 3 columns, only shown when project context is set */}
+      {/* ── Breadcrumb bar ─────────────────────────────────── */}
       {showBreadcrumb && (
         <div style={{
-          gridColumn: '1 / -1',
+          height: 36,
+          flexShrink: 0,
           background: '#0A0A0E',
           borderBottom: '1px solid rgba(255,255,255,0.06)',
           display: 'flex', alignItems: 'center',
@@ -87,17 +97,29 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
 
           <div style={{ flex: 1 }} />
 
-          {/* User avatar in the top-right corner of canvas */}
           <div style={{ transform: 'scale(0.8)', transformOrigin: 'right center' }}>
             <UserButton />
           </div>
         </div>
       )}
 
+      {/* ── Inner grid: Toolbar (row 1) + panels (row 2) ─── */}
+      {/* Rows are always 44px + 1fr — breadcrumb never enters this grid. */}
+      <div
+        style={{
+          flex: 1,
+          minHeight: 0,
+          display: 'grid',
+          gridTemplateRows: '44px 1fr',
+          gridTemplateColumns: '220px 1fr 272px',
+          overflow: 'hidden',
+        }}
+      >
         <Toolbar />
         <ArtboardNavigator />
         <Canvas />
         <Inspector />
       </div>
+    </div>
   );
 }

packages/app/src/components/navigator/ArtboardNavigator.tsx

@@ -5,7 +5,6 @@ import { useFileTree, FileTree } from '@pierre/trees/react';
 import { themeToTreeStyles } from '@pierre/trees';
 import { SquareRegular } from '@fluentui/react-icons';
 import { useCanvas } from '@/store/canvas';
-import { useWorkspace } from '@/hooks/useWorkspace';
 import { useArtboards } from '@/hooks/useArtboards';
 
 const FILE_PATHS = [
@@ -48,9 +47,8 @@ const treeThemeStyles = themeToTreeStyles({
 });
 
 export function ArtboardNavigator() {
-  const { selectedArtboardId, selectArtboard } = useCanvas();
+  const { selectedArtboardId, selectArtboard, workspaceId } = useCanvas();
-  const { data: workspace } = useWorkspace();
+  const { artboards } = useArtboards(workspaceId ?? undefined);
-  const { artboards } = useArtboards(workspace?.id);
 
   const { model } = useFileTree({
     paths: FILE_PATHS,

packages/app/src/store/canvas.ts

@@ -5,13 +5,20 @@ export type Tool = 'select' | 'pan' | 'artboard' | 'zone';
 interface CanvasStore {
   activeTool: Tool;
   selectedArtboardId: string | null;
+  /** Workspace/project context set by AppChrome on mount. */
+  workspaceId: string | null;
+  projectId: string | null;
   setActiveTool: (tool: Tool) => void;
   selectArtboard: (id: string | null) => void;
+  setContext: (workspaceId: string, projectId: string) => void;
 }
 
 export const useCanvas = create<CanvasStore>((set) => ({
   activeTool: 'select',
-  selectedArtboardId: 'dashboard-card',
+  selectedArtboardId: null,
+  workspaceId: null,
+  projectId: null,
   setActiveTool: (tool) => set({ activeTool: tool }),
   selectArtboard: (id) => set({ selectedArtboardId: id }),
+  setContext: (workspaceId, projectId) => set({ workspaceId, projectId }),
 }));