Upload folder using huggingface_hub

docs/README.md

@@ -0,0 +1,203 @@
+# ColorRM Pro
+
+A real-time collaborative PDF annotation and drawing application built with modern web technologies.
+
+## Architecture Overview
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                         Frontend                                 │
+│  ┌──────────────────────────────────────────────────────────┐   │
+│  │                    color_rm.html                          │   │
+│  │  ┌─────────────┐  ┌─────────────┐  ┌─────────────────┐   │   │
+│  │  │ ColorRm     │  │ ColorRm     │  │ ColorRm         │   │   │
+│  │  │ Session.js  │──│ Renderer.js │──│ LiveSync.js     │   │   │
+│  │  └─────────────┘  └─────────────┘  └─────────────────┘   │   │
+│  └──────────────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────────────┘
+                              │
+                              ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                         Backend                                  │
+│  ┌──────────────────────┐    ┌─────────────────────────────┐    │
+│  │  Cloudflare Workers  │    │  HuggingFace Spaces         │    │
+│  │  ┌────────────────┐  │    │  ┌───────────────────────┐  │    │
+│  │  │ worker.ts      │  │    │  │ Vite Dev Server       │  │    │
+│  │  │ - API Routes   │  │    │  │ - Static files        │  │    │
+│  │  │ - R2 Storage   │  │    │  │ - PDF Convert (7861)  │  │    │
+│  │  └────────────────┘  │    │  └───────────────────────┘  │    │
+│  │  ┌────────────────┐  │    └─────────────────────────────┘    │
+│  │  │ Durable Objects│  │                                        │
+│  │  │ - ColorRm DO   │  │    ┌─────────────────────────────┐    │
+│  │  └────────────────┘  │    │  Liveblocks                 │    │
+│  └──────────────────────┘    │  - Real-time sync           │    │
+│                              │  - Presence                  │    │
+│                              │  - Room management           │    │
+│                              └─────────────────────────────┘    │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+## Key Modules
+
+### Frontend (`public/scripts/modules/`)
+
+| Module | Description |
+|--------|-------------|
+| `ColorRmSession.js` | Main application controller. Handles state, tools, page management, import/export |
+| `ColorRmRenderer.js` | Canvas rendering engine. Draws strokes, shapes, images, handles transformations |
+| `ColorRmStorage.js` | IndexedDB and R2 storage. Manages local persistence and cloud sync |
+| `ColorRmLiveSync.js` | Liveblocks integration. Real-time collaboration, cursors, history sync |
+| `ColorRmSvgImporter.js` | SVG parsing and import. Converts SVG elements to ColorRM history items |
+| `ColorRmSvgExporter.js` | SVG export. Renders history to vector SVG format |
+
+### Backend (`worker/`)
+
+| File | Description |
+|------|-------------|
+| `worker.ts` | Main Cloudflare Worker entry point. Routes API requests |
+| `colorRmAssets.ts` | R2 storage handlers for pages, history, modifications |
+| `pdfToSvg.ts` | PDF conversion job management (placeholder for CF Workers) |
+| `ColorRmDurableObject.ts` | Durable Object for room state management |
+
+### Commands (`cmd/`)
+
+| Script | Description |
+|--------|-------------|
+| `pdf_convert_server.mjs` | Local PDF to SVG server using pdf2svg binary |
+| `hf_init.mjs` | HuggingFace authentication initialization |
+| `hf_backup.mjs` | Periodic backup to HuggingFace Hub |
+| `hf_restore.mjs` | Restore from HuggingFace Hub on startup |
+
+## Data Flow
+
+### SVG Import Flow
+
+```
+1. User selects SVG file
+   │
+2. ColorRmSvgImporter.importSvg() parses SVG
+   │
+3. Elements are classified:
+   ├── Images/Text → Rasterized to background blob
+   └── Strokes/Shapes → Kept as vector history items
+   │
+4. Page object created with blob + history
+   │
+5. Sync to cloud:
+   ├── Blob → R2 via _uploadPageBlob()
+   ├── History → R2 via /api/color_rm/history/:sessionId/:pageId
+   └── Structure → Liveblocks via _syncPageStructureToLive()
+   │
+6. Other users receive notification via Liveblocks
+   │
+7. Other users fetch page blob from R2
+```
+
+### History Sync (Delta Architecture)
+
+For pages with base history (SVG imports):
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│                    R2 Storage (Base)                         │
+│  /api/color_rm/history/:sessionId/:pageId                   │
+│  - Original SVG items (large, stored once)                  │
+└─────────────────────────────────────────────────────────────┘
+                              +
+┌─────────────────────────────────────────────────────────────┐
+│                 Liveblocks (Deltas Only)                     │
+│  - New strokes added by users                               │
+│  - Modifications to base items (position, color, etc.)      │
+└─────────────────────────────────────────────────────────────┘
+                              =
+┌─────────────────────────────────────────────────────────────┐
+│                    Final Rendered Page                       │
+│  BaseHistory + Deltas + Modifications                       │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### Thresholds
+
+| Condition | Threshold | Action |
+|-----------|-----------|--------|
+| SVG page history | > 400 items | Use R2 for base, Liveblocks for deltas |
+| Regular page history | > 2000 items | Convert to hybrid R2/Liveblocks |
+| Modifications | > 100 items | Store in R2, sync metadata via Liveblocks |
+
+## API Endpoints
+
+### Page Management
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/color_rm/page/:sessionId/:pageId` | Upload page blob |
+| GET | `/api/color_rm/page/:sessionId/:pageId` | Download page blob |
+| DELETE | `/api/color_rm/page/:sessionId/:pageId` | Delete page |
+
+### History
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/api/color_rm/history/:sessionId/:pageId` | Upload base history |
+| GET | `/api/color_rm/history/:sessionId/:pageId` | Get base history |
+
+### Page Structure
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/api/color_rm/page_structure/:sessionId` | Get page order |
+| POST | `/api/color_rm/page_structure/:sessionId` | Update page order |
+
+### PDF Conversion (Local Server)
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| POST | `/convert/pdf` | Upload PDF for conversion |
+| GET | `/convert/status/:jobId` | Check conversion status |
+| GET | `/convert/page/:jobId/:pageNum` | Download converted SVG page |
+
+## Development
+
+### Local Development
+
+```bash
+npm install
+npm run dev
+```
+
+### HuggingFace Spaces Deployment
+
+The Dockerfile runs:
+1. `hf_init.mjs` - Authenticate with HF
+2. `hf_restore.mjs` - Restore previous state
+3. `npm run dev` - Vite dev server (port 7860)
+4. `hf_backup.mjs` - Periodic backup worker
+5. `pdf_convert_server.mjs` - PDF conversion (port 7861)
+
+### Environment Variables
+
+| Variable | Description |
+|----------|-------------|
+| `HF_TOKEN` | HuggingFace API token |
+| `LIVEBLOCKS_SECRET_KEY` | Liveblocks API key |
+| `PORT` | Dev server port (default: 7860) |
+
+## Tools
+
+| Tool | Shortcut | Description |
+|------|----------|-------------|
+| Move | V | Select and move objects |
+| Hand | H | Pan the canvas |
+| Lasso | L | Free-form selection |
+| Pen | P | Freehand drawing |
+| Shape | S | Draw shapes (rect, ellipse, arrow, etc.) |
+| Text | T | Add text annotations |
+| Eraser | E | Erase strokes |
+| Box/Capture | B | Capture region to clipboard |
+
+## Collaboration Features
+
+- **Real-time cursors**: See other users' cursors
+- **Live history sync**: Strokes appear instantly for all users
+- **Page structure sync**: Page order synchronized across users
+- **Presence indicators**: See who's online in the room

public/color_rm.html

@@ -38,24 +38,24 @@
             -webkit-font-smoothing: antialiased;
         }
 
-        /* UI Components - Touch Optimized */
+        /* UI Components - Vercel Style */
         .btn {
-            background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-main);
-            padding: 10px 14px; border-radius: 6px; font-size: 0.875rem; font-weight: 500;
-            cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.15s;
-            min-height: 44px; /* Touch target minimum */
+            background: #0a0a0a; border: 1px solid #262626; color: #fafafa;
+            padding: 10px 14px; border-radius: 8px; font-size: 0.875rem; font-weight: 500;
+            cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s;
+            min-height: 40px;
             -webkit-tap-highlight-color: transparent;
         }
-        .btn:hover { background: #1a1a1a; border-color: #555; }
-        .btn:active { transform: scale(0.97); background: #222; }
-        .btn.active { background: var(--primary); border-color: var(--primary); color: #000; }
+        .btn:hover { background: #171717; border-color: #333; }
+        .btn:active { transform: scale(0.98); background: #1a1a1a; }
+        .btn.active { background: #fafafa; border-color: #fafafa; color: #000; }
         .btn:disabled { opacity: 0.4; cursor: not-allowed; }
-        .btn-primary { background: var(--primary); border-color: var(--primary); color: #000; }
-        .btn-primary:hover { background: #e0e0e0; }
-        .btn-primary:active { background: #ccc; transform: scale(0.97); }
-        .btn-sm { padding: 8px 12px; font-size: 0.8rem; min-height: 36px; }
-        .btn-icon { width: 44px; height: 44px; justify-content: center; padding: 0; }
-        
+        .btn-primary { background: #fafafa; border-color: #fafafa; color: #000; font-weight: 600; }
+        .btn-primary:hover { background: #e5e5e5; border-color: #e5e5e5; }
+        .btn-primary:active { background: #d4d4d4; transform: scale(0.98); }
+        .btn-sm { padding: 6px 10px; font-size: 0.8rem; min-height: 32px; border-radius: 6px; }
+        .btn-icon { width: 36px; height: 36px; justify-content: center; padding: 0; min-height: 36px; }
+
         /* Sidebar Tabs - Touch Optimized */
         .sb-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--bg-panel); flex-shrink: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
         .sb-tabs::-webkit-scrollbar { display: none; }
@@ -140,7 +140,7 @@
         .shape-btn:active { transform: scale(0.92); background: #111; }
         .shape-btn.active { background: #fff; color: #000; border-color: #fff; }
 
-        header { height: 56px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; z-index: 50; flex-shrink: 0; }
+        header { height: 52px; background: #000; border-bottom: 1px solid #1a1a1a; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 50; flex-shrink: 0; }
         
         .workspace { display: flex; flex: 1; overflow: hidden; position: relative; }
 
@@ -210,10 +210,10 @@
         .picker-header { padding: 12px; background: #111; border-bottom: 1px solid #333; cursor: move; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
         .picker-body { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
 
-        /* Modals */
-        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(4px); z-index: 200; display: none; place-items: center; }
-        .card { background: #000; padding: 32px; border-radius: 8px; border: 1px solid #333; max-width: 440px; width: 90%; display: flex; flex-direction: column; max-height: 90vh; box-shadow: 0 8px 30px rgba(0,0,0,0.5); }
-        
+        /* Modals - Vercel Style */
+        .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); z-index: 200; display: none; place-items: center; }
+        .card { background: #000; padding: 24px; border-radius: 12px; border: 1px solid #1a1a1a; max-width: 440px; width: 90%; display: flex; flex-direction: column; max-height: 90vh; box-shadow: 0 16px 70px rgba(0,0,0,0.5); }
+
         /* Loader Style */
         .spinner { width: 32px; height: 32px; border: 2px solid #333; border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
         @keyframes spin { 100% { transform: rotate(360deg); } }
@@ -302,14 +302,39 @@
         .opt-input { background: #000; border: 1px solid #333; color: white; padding: 8px 12px; border-radius: 4px; font-size: 0.8rem; outline: none; }
         .opt-input:focus { border-color: #fff; }
 
-        /* Session List */
-        .session-item { position: relative; padding: 16px; border-bottom: 1px solid #222; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
-        .session-item:hover { background: #0a0a0a; }
+        /* Session List - Vercel Style */
+        .session-item {
+            position: relative;
+            padding: 14px 16px;
+            margin-bottom: 8px;
+            border-radius: 8px;
+            background: #0a0a0a;
+            border: 1px solid #1a1a1a;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: all 0.15s;
+        }
+        .session-item:hover {
+            background: #111;
+            border-color: #262626;
+        }
+        .session-item .session-name {
+            font-weight: 500;
+            font-size: 0.9rem;
+            color: #fafafa;
+        }
+        .session-item .session-meta {
+            font-size: 0.75rem;
+            color: #666;
+            margin-top: 4px;
+        }
         .session-checkbox { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; cursor: pointer; display: none; accent-color: var(--accent); border: 1px solid #444; border-radius: 4px; }
         .active-multi .session-checkbox { display: block; }
-        .session-item.selected { background: rgba(0, 112, 243, 0.1); border-left: 2px solid var(--accent); }
+        .session-item.selected { background: rgba(0, 112, 243, 0.08); border-color: #0070f3; }
         .active-multi .session-item { padding-left: 44px; }
-        .multi-delete-bar { display: none; justify-content: space-between; align-items: center; background: #111; border: 1px solid #333; padding: 12px; border-radius: 4px; margin-top: 16px; }
+        .multi-delete-bar { display: none; justify-content: space-between; align-items: center; background: #0a0a0a; border: 1px solid #262626; padding: 12px 16px; border-radius: 8px; }
         .multi-delete-bar.show { display: flex; }
 
         /* Remote Cursors */
@@ -620,55 +645,57 @@
         </div>
     </div>
     
-    <!-- Dashboard -->
+    <!-- Dashboard - Vercel-like Clean Design -->
     <div id="dashboardModal" class="overlay">
-        <div class="card" style="max-width: 450px;">
-            <div style="display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px;">
-                <h2 style="margin:0">🎨 ColorRM Pro</h2>
-                <button onclick="UI.hideDashboard()" style="background:none; border:none; color:#888; cursor:pointer;"><i class="bi bi-x-lg"></i></button>
+        <div class="card" style="max-width: 520px; padding: 0; overflow: hidden;">
+            <!-- Header -->
+            <div style="padding: 24px 24px 20px; border-bottom: 1px solid #1a1a1a;">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <div style="display: flex; align-items: center; gap: 12px;">
+                        <svg width="24" height="24" viewBox="0 0 76 65" fill="#fff"><path d="M37.5274 0L75.0548 65H0L37.5274 0Z"></path></svg>
+                        <span style="font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em;">Projects</span>
+                    </div>
+                    <button onclick="UI.hideDashboard()" style="background: none; border: none; color: #666; cursor: pointer; padding: 8px; border-radius: 6px; transition: 0.15s;" onmouseover="this.style.background='#1a1a1a'" onmouseout="this.style.background='none'">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
             </div>
 
-            <div style="background:rgba(255,255,255,0.03); padding:10px; border-radius:8px; margin-bottom:15px; font-size:0.8rem; border:1px solid var(--border);">
-                <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
-                    <span style="color:#888;">My User ID:</span>
-                    <span id="dashUserId" style="color:var(--accent); font-family:monospace;"></span>
+            <!-- Create New -->
+            <div style="padding: 20px 24px; border-bottom: 1px solid #1a1a1a;">
+                <div style="display: flex; gap: 10px;">
+                    <input type="text" id="newProjectName" placeholder="Project name..." style="flex: 1; background: #0a0a0a; border: 1px solid #262626; padding: 12px 14px; color: white; border-radius: 8px; font-size: 0.9rem; transition: border-color 0.15s;" onfocus="this.style.borderColor='#404040'" onblur="this.style.borderColor='#262626'">
+                    <button class="btn btn-primary" onclick="window.App.createNewProject()" style="padding: 12px 20px; border-radius: 8px; font-weight: 600;">Create</button>
                 </div>
-                <div style="display:flex; justify-content:space-between;">
-                    <span style="color:#888;">Active Project:</span>
-                    <span id="dashProjId" style="color:var(--primary); font-family:monospace;"></span>
+                <div style="display: flex; gap: 8px; margin-top: 12px;">
+                    <button id="importBtn" class="btn" style="flex: 1; justify-content: center; background: #0a0a0a; border-color: #262626; font-size: 0.85rem; padding: 10px;">
+                        <i class="bi bi-plus-lg"></i> Import
+                    </button>
+                    <button class="btn" onclick="window.App.createFolder()" style="background: #0a0a0a; border-color: #262626; padding: 10px 14px;" title="New Folder">
+                        <i class="bi bi-folder-plus"></i>
+                    </button>
                 </div>
             </div>
 
-            <div style="display:flex; gap:10px; margin-bottom:15px;">
-                <input type="text" id="newProjectName" placeholder="New Project Name" style="flex:1; background:var(--bg-body); border:1px solid var(--border); padding:10px; color:white; border-radius:6px;">
-                <button class="btn btn-primary" onclick="window.App.createNewProject()">Create</button>
-                <button class="btn" onclick="window.App.createFolder()" title="New Folder" style="width:40px; justify-content:center;"><i class="bi bi-folder-plus"></i></button>
-            </div>
-            <div style="display:flex; gap:10px; margin-bottom:15px;">
-                <button id="importBtn" class="btn" style="flex:1; justify-content:center; border-color:#444;">
-                    <i class="bi bi-file-earmark-plus"></i> Import Files
-                </button>
-                <button class="btn" onclick="window.PDFLibrary?.show((pdf) => { const file = new File([pdf.blob], pdf.name + '.pdf', { type: 'application/pdf' }); window.App?.handleImport({ target: { files: [file] } }, false); })" style="flex:1; justify-content:center; border-color:#444;">
-                    <i class="bi bi-folder-plus"></i> Open Library
-                </button>
-            </div>
-
-            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
-                <h4 style="color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; margin:0;">Recent Projects</h4>
-                <div style="display:flex; gap:8px;">
-                    <button class="btn btn-sm" onclick="window.App.reuploadBaseFile()" title="Repair Server File"><i class="bi bi-cloud-upload"></i> Restore</button>
-                    <button id="dashEditBtn" class="btn btn-sm" onclick="window.App.toggleMultiSelect()"><i class="bi bi-pencil-square"></i> Edit</button>
+            <!-- Project List -->
+            <div style="padding: 16px 24px 8px;">
+                <div style="display: flex; justify-content: space-between; align-items: center;">
+                    <span style="font-size: 0.75rem; color: #666; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;">Recent</span>
+                    <button id="dashEditBtn" class="btn btn-sm" onclick="window.App.toggleMultiSelect()" style="background: transparent; border: none; color: #666; padding: 4px 8px; font-size: 0.75rem;">
+                        <i class="bi bi-pencil"></i> Edit
+                    </button>
                 </div>
             </div>
-            
-            <div id="sessionList" class="session-list" style="flex:1; overflow:auto; min-height:200px; border-top:1px solid var(--border);"></div>
-
-            <div id="multiDeleteBar" class="multi-delete-bar">
-                <span id="multiDeleteCount" style="font-size:0.8rem; color:#ef4444; font-weight:600;">0 selected</span>
-                <div style="display:flex; gap:8px;">
-                    <button class="btn btn-sm" onclick="window.App.selectAllSessions()" style="background:none; border-color:#444;">All</button>
-                    <button class="btn btn-sm" onclick="window.App.showMoveModal()" style="background:none; border-color:#444;">Move</button>
-                    <button class="btn btn-sm" onclick="window.App.deleteSelectedSessions()" style="background:#ef4444; border-color:#ef4444; color:white;">Delete</button>
+
+            <div id="sessionList" class="session-list" style="flex: 1; overflow: auto; min-height: 240px; max-height: 360px; padding: 0 24px 24px;"></div>
+
+            <!-- Multi-select Bar -->
+            <div id="multiDeleteBar" class="multi-delete-bar" style="margin: 0 24px 24px; border-radius: 8px; background: #0a0a0a;">
+                <span id="multiDeleteCount" style="font-size: 0.8rem; color: #888; font-weight: 500;">0 selected</span>
+                <div style="display: flex; gap: 8px;">
+                    <button class="btn btn-sm" onclick="window.App.selectAllSessions()" style="background: transparent; border-color: #333; color: #888;">All</button>
+                    <button class="btn btn-sm" onclick="window.App.showMoveModal()" style="background: transparent; border-color: #333; color: #888;">Move</button>
+                    <button class="btn btn-sm" onclick="window.App.deleteSelectedSessions()" style="background: #dc2626; border-color: #dc2626; color: white;">Delete</button>
                 </div>
             </div>
         </div>
@@ -837,26 +864,25 @@
     </div>
 
     <header>
-        <div style="display:flex; align-items:center; gap:16px;">
-            <a href="/" class="btn btn-icon" title="Back to Hub" style="text-decoration:none; color:white; background:transparent; border:none; padding:0; width:auto; height:auto;">
-                <svg width="22" height="22" viewBox="0 0 76 65" fill="#fff"><path d="M37.5274 0L75.0548 65H0L37.5274 0Z"></path></svg>
+        <div style="display:flex; align-items:center; gap:12px;">
+            <a href="/" class="btn btn-icon" title="Home" style="text-decoration:none; color:white; background:transparent; border:none; padding:0;">
+                <svg width="20" height="20" viewBox="0 0 76 65" fill="#fff"><path d="M37.5274 0L75.0548 65H0L37.5274 0Z"></path></svg>
             </a>
-            <button class="btn btn-icon" title="Share URL" onclick="window.App?.shareSession()" style="background:transparent; border:none; color:#888;"><i class="bi bi-share"></i></button>
-            <div style="width:1px; height:24px; background:#333;"></div>
-            <span style="font-weight:700; font-size:0.95rem; letter-spacing:-0.02em;" id="headerTitle">ColorRM Pro</span>
-            <div id="syncStatus" style="font-size:0.7rem; color:#888; margin-left:8px; display:flex; align-items:center; gap:6px; font-weight:600; text-transform:uppercase;"></div>
-            <button id="syncToggle" class="btn btn-icon" title="Toggle Sync (currently ON)" onclick="window.App?.toggleSync()" style="background:transparent; border:none; color:#4ade80; font-size:0.85rem; padding:4px 8px;">
-                <i class="bi bi-cloud-check"></i>
-            </button>
+            <div style="width:1px; height:20px; background:#262626;"></div>
+            <span style="font-weight:600; font-size:0.9rem; letter-spacing:-0.02em; color:#fafafa;" id="headerTitle">Untitled</span>
+            <div id="syncStatus" style="display:flex; align-items:center; gap:6px;">
+                <button id="syncToggle" title="Sync status" onclick="window.App?.toggleSync()" style="background:transparent; border:none; color:#4ade80; cursor:pointer; padding:4px; display:flex; align-items:center;">
+                    <i class="bi bi-cloud-check"></i>
+                </button>
+            </div>
         </div>
-        <div style="display:flex; gap:12px;">
-            <button class="btn btn-icon" title="Undo (Ctrl+Z)" onclick="window.App?.undo()" style="background:transparent; border:none;"><i class="bi bi-arrow-counterclockwise"></i></button>
-            <button class="btn btn-icon" title="Redo (Ctrl+Shift+Z)" onclick="window.App?.redo()" style="background:transparent; border:none;"><i class="bi bi-arrow-clockwise"></i></button>
-            <button class="btn btn-icon" title="Keyboard Shortcuts (?)" onclick="window.App?.showShortcutsHelp()" style="background:transparent; border:none;"><i class="bi bi-keyboard"></i></button>
-            <div style="width:1px; height:24px; background:#333; margin:0 4px;"></div>
-            <button class="btn" onclick="window.UI?.showDashboard()" style="background:transparent; border:1px solid #333; font-weight:600;">Projects</button>
-            <button class="btn" id="splitViewToggle" onclick="window.App?.toggleSplitView()" style="background:transparent; border:1px solid #333; font-weight:600;" title="Toggle Split View Mode"><i class="bi bi-diagram-2"></i> Split</button>
-            <button class="btn btn-primary" onclick="window.UI?.showExportModal()" style="font-weight:700;">Export</button>
+        <div style="display:flex; gap:8px; align-items:center;">
+            <button class="btn btn-icon" title="Undo" onclick="window.App?.undo()" style="background:transparent; border:none; color:#888;"><i class="bi bi-arrow-counterclockwise"></i></button>
+            <button class="btn btn-icon" title="Redo" onclick="window.App?.redo()" style="background:transparent; border:none; color:#888;"><i class="bi bi-arrow-clockwise"></i></button>
+            <div style="width:1px; height:20px; background:#262626;"></div>
+            <button class="btn btn-icon" title="Share" onclick="window.App?.shareSession()" style="background:transparent; border:none; color:#888;"><i class="bi bi-share"></i></button>
+            <button class="btn" onclick="window.UI?.showDashboard()" style="background:transparent; border:1px solid #262626; color:#fafafa; font-weight:500; padding:8px 14px;">Projects</button>
+            <button class="btn btn-primary" onclick="window.UI?.showExportModal()" style="font-weight:600; padding:8px 16px;">Export</button>
         </div>
     </header>