improved a lot of things

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

@@ -1,6 +1,8 @@
 'use client';
 
 import { useEffect } from 'react';
+import Link from 'next/link';
+import { UserButton } from '@clerk/nextjs';
 import { Toolbar } from './Toolbar';
 import { ArtboardNavigator } from '../navigator/ArtboardNavigator';
 import { Canvas } from '../canvas/Canvas';
@@ -8,7 +10,14 @@ import { Inspector } from '../inspector/Inspector';
 import { useHistory } from '@/store/history';
 import { useCanvas } from '@/store/canvas';
 
-export function AppChrome() {
+interface AppChromeProps {
+  workspaceId?: string;
+  projectId?: string;
+  workspaceName?: string;
+  projectName?: string;
+}
+
+export function AppChrome({ workspaceId, projectId, workspaceName, projectName }: AppChromeProps) {
   const selectedArtboardId = useCanvas((s) => s.selectedArtboardId);
 
   useEffect(() => {
@@ -28,11 +37,13 @@ export function AppChrome() {
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
   }, [selectedArtboardId]);
+  const showBreadcrumb = workspaceId && projectId;
+
   return (
     <div
       style={{
         display: 'grid',
-        gridTemplateRows: '44px 1fr',
+        gridTemplateRows: showBreadcrumb ? '36px 44px 1fr' : '44px 1fr',
         gridTemplateColumns: '220px 1fr 272px',
         height: '100dvh',
         overflow: 'hidden',
@@ -40,6 +51,49 @@ export function AppChrome() {
         fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
       }}
     >
+      {/* Breadcrumb bar — spans all 3 columns, only shown when project context is set */}
+      {showBreadcrumb && (
+        <div style={{
+          gridColumn: '1 / -1',
+          background: '#0A0A0E',
+          borderBottom: '1px solid rgba(255,255,255,0.06)',
+          display: 'flex', alignItems: 'center',
+          padding: '0 14px', gap: 0,
+        }}>
+          {/* Logo */}
+          <Link href="/workspaces" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', marginRight: 4 }}>
+            <span style={{ fontSize: '0.75rem', fontWeight: 700, letterSpacing: '-0.01em', color: 'rgba(255,255,255,0.6)' }}>
+              Origin<span style={{ color: '#3385FF' }}>main</span>
+            </span>
+          </Link>
+
+          <span style={{ color: 'rgba(255,255,255,0.2)', margin: '0 6px', fontSize: '0.75rem' }}>/</span>
+
+          <Link href="/workspaces" style={{ textDecoration: 'none', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', fontWeight: 500 }}>
+            Workspaces
+          </Link>
+
+          <span style={{ color: 'rgba(255,255,255,0.2)', margin: '0 6px', fontSize: '0.75rem' }}>/</span>
+
+          <Link href={`/workspace/${workspaceId}`} style={{ textDecoration: 'none', fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', fontWeight: 500 }}>
+            {workspaceName ?? 'Workspace'}
+          </Link>
+
+          <span style={{ color: 'rgba(255,255,255,0.2)', margin: '0 6px', fontSize: '0.75rem' }}>/</span>
+
+          <span style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.75)', fontWeight: 600 }}>
+            {projectName ?? 'Canvas'}
+          </span>
+
+          <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>
+      )}
+
       <Toolbar />
       <ArtboardNavigator />
       <Canvas />

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

@@ -0,0 +1,59 @@
+'use client';
+
+import Link from 'next/link';
+import { UserButton } from '@clerk/nextjs';
+
+interface Crumb { label: string; href?: string }
+
+interface AppHeaderProps {
+  breadcrumbs?: Crumb[];
+}
+
+export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
+  return (
+    <header style={{
+      position: 'sticky', top: 0, zIndex: 100,
+      height: 56,
+      background: 'rgba(255,255,255,0.92)',
+      backdropFilter: 'blur(12px)',
+      borderBottom: '1px solid rgba(0,0,0,0.07)',
+      display: 'flex', alignItems: 'center',
+      padding: '0 24px',
+      gap: 0,
+    }}>
+      {/* Logo */}
+      <Link href="/workspaces" style={{ textDecoration: 'none', flexShrink: 0 }}>
+        <span style={{ fontSize: '1rem', fontWeight: 700, letterSpacing: '-0.02em', color: '#0A0A0A' }}>
+          Origin<span style={{ color: '#0066FF' }}>main</span>
+        </span>
+      </Link>
+
+      {/* Breadcrumbs */}
+      {breadcrumbs.map((crumb, i) => (
+        <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
+          <span style={{ margin: '0 8px', color: '#D4D4D8', fontSize: '0.875rem' }}>/</span>
+          {crumb.href ? (
+            <Link href={crumb.href} style={{
+              fontSize: '0.875rem', fontWeight: 500,
+              color: '#71717A', textDecoration: 'none',
+              transition: 'color 0.1s',
+            }}
+              onMouseEnter={e => (e.currentTarget.style.color = '#0A0A0A')}
+              onMouseLeave={e => (e.currentTarget.style.color = '#71717A')}
+            >
+              {crumb.label}
+            </Link>
+          ) : (
+            <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#0A0A0A' }}>
+              {crumb.label}
+            </span>
+          )}
+        </span>
+      ))}
+
+      <div style={{ flex: 1 }} />
+
+      <UserButton />
+    </header>
+  );
+}