collabmd 0.1.21 → 0.1.25

package/docker-compose.yml

@@ -6,7 +6,19 @@ services:
     environment:
       HOST: 0.0.0.0
       PORT: 1234
+      AUTH_STRATEGY: ${AUTH_STRATEGY:-none}
+      AUTH_PASSWORD: ${AUTH_PASSWORD:-}
+      AUTH_SESSION_COOKIE_NAME: ${AUTH_SESSION_COOKIE_NAME:-collabmd_auth}
+      AUTH_SESSION_SECRET: ${AUTH_SESSION_SECRET:-}
+      PUBLIC_BASE_URL: ${PUBLIC_BASE_URL:-http://localhost:1234}
+      AUTH_OIDC_CLIENT_ID: ${AUTH_OIDC_CLIENT_ID:-}
+      AUTH_OIDC_CLIENT_SECRET: ${AUTH_OIDC_CLIENT_SECRET:-}
+      AUTH_OIDC_ALLOWED_EMAILS: ${AUTH_OIDC_ALLOWED_EMAILS:-}
+      AUTH_OIDC_ALLOWED_DOMAINS: ${AUTH_OIDC_ALLOWED_DOMAINS:-}
+      BASE_PATH: ${BASE_PATH:-}
+      PUBLIC_WS_BASE_URL: ${PUBLIC_WS_BASE_URL:-}
       PLANTUML_SERVER_URL: http://plantuml:8080
+      COLLABMD_VAULT_DIR: ${COLLABMD_VAULT_DIR:-/data}
       COLLABMD_GIT_REPO_URL: ${COLLABMD_GIT_REPO_URL:-}
       COLLABMD_GIT_SSH_PRIVATE_KEY_FILE: ${COLLABMD_GIT_SSH_PRIVATE_KEY_FILE:-}
       COLLABMD_GIT_SSH_PRIVATE_KEY_B64: ${COLLABMD_GIT_SSH_PRIVATE_KEY_B64:-}
@@ -25,7 +37,7 @@ services:
     volumes:
       - type: bind
         source: ${HOST_VAULT_DIR:-./data/vault}
-        target: /data
+        target: ${COLLABMD_VAULT_DIR:-/data}
       # Optional: mount secret files when using file-based SSH auth.
       # - type: bind
       #   source: ${HOST_SSH_KEY_FILE}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "collabmd",
-  "version": "0.1.21",
+  "version": "0.1.25",
   "type": "module",
   "description": "Collaborative markdown vault — like Obsidian, but online. Serve any directory of markdown files for realtime collaborative editing.",
   "repository": {
@@ -14,8 +14,8 @@
   "files": [
     "README.md",
     "bin/",
+    "dist/",
     "docker-compose.yml",
-    "public/",
     "scripts/cloudflare-tunnel.mjs",
     "scripts/local-plantuml-compose.mjs",
     "server.js",
@@ -26,9 +26,11 @@
   },
   "scripts": {
     "prepack": "npm run build",
-    "build": "node scripts/build-client.mjs",
+    "build": "vite build",
     "capture:readme-assets": "node scripts/capture-readme-assets.mjs",
-    "check": "npm run build && npm run lint && npm run test:guardrails && npm run test:unit",
+    "check": "npm run lint && npm run test:guardrails && npm run test:unit && npm run test:browser",
+    "dev:client": "vite",
+    "dev:server": "node bin/collabmd.js --no-tunnel",
     "homebrew:formula": "node scripts/render-homebrew-formula.mjs",
     "lint": "eslint .",
     "plantuml:up": "node scripts/local-plantuml-compose.mjs up",
@@ -36,7 +38,8 @@
     "start": "npm run build && node bin/collabmd.js",
     "start:local-plantuml": "npm run build && node bin/collabmd.js --local-plantuml",
     "start:prod": "node bin/collabmd.js",
-    "test": "npm run test:unit && npm run test:e2e",
+    "test": "npm run test:unit && npm run test:browser && npm run test:e2e",
+    "test:browser": "vitest run --config vitest.config.mjs --browser=chromium",
     "test:e2e": "playwright test",
     "test:e2e:headed": "playwright test --headed",
     "test:guardrails": "node --test tests/node/architecture-boundaries.test.js tests/node/facade-structure.test.js",
@@ -71,6 +74,7 @@
     "lib0": "^0.2.0",
     "markdown-it": "^14.1.0",
     "mermaid": "^11.13.0",
+    "openid-client": "^6.8.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "ws": "^8.0.0",
@@ -86,8 +90,11 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.58.2",
-    "esbuild": "^0.27.3",
+    "@vitest/browser": "^4.1.0",
+    "@vitest/browser-playwright": "^4.1.0",
     "eslint": "^9.22.0",
-    "globals": "^16.0.0"
+    "globals": "^16.0.0",
+    "vite": "^8.0.1",
+    "vitest": "^4.1.0"
   }
 }

package/src/client/app/excalidraw-editor-entry.js

@@ -0,0 +1,4 @@
+import { ensureRuntimeConfigLoaded } from '../infrastructure/runtime-config-loader.js';
+
+await ensureRuntimeConfigLoaded();
+await import('../excalidraw-editor.js');

package/{public → src/client/app}/excalidraw-editor.html

@@ -4,7 +4,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Excalidraw — CollabMD</title>
-  <link rel="stylesheet" href="./assets/js/excalidraw-editor.css">
   <style>
     * { margin: 0; padding: 0; box-sizing: border-box; }
     html, body { width: 100%; height: 100%; overflow: hidden; background: transparent; }
@@ -20,12 +19,11 @@
     }
     .loading-state.error { color: #e55; }
   </style>
-  <script src="./app-config.js"></script>
 </head>
 <body>
   <div id="root">
     <div class="loading-state" id="loadingState">Loading Excalidraw...</div>
   </div>
-  <script type="module" src="./assets/js/excalidraw-editor.js"></script>
+  <script type="module" src="./excalidraw-editor-entry.js"></script>
 </body>
 </html>

package/src/client/app/index.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="description" content="CollabMD — collaborative markdown vault. Edit markdown files together in realtime.">
+  <title>CollabMD — Collaborative Markdown Vault</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='2' y='4' width='18' height='24' rx='3' fill='%23818cf8'/><rect x='12' y='4' width='18' height='24' rx='3' fill='%234f46e5' opacity='0.8'/><path d='M18 12h6M18 16h6M18 20h4' stroke='white' stroke-width='1.5' stroke-linecap='round'/></svg>">
+  <script>
+    if (
+      window.location.hash.includes('file=')
+      || window.location.hash.includes('git-diff=')
+      || window.location.hash.includes('git-file-preview=')
+    ) {
+      document.documentElement.setAttribute('data-initial-file-requested', 'true');
+    }
+  </script>
+</head>
+<body>
+  <a href="#editorContainer" class="sr-only skip-link">Skip to editor</a>
+
+  <div class="app-shell">
+    <!-- ========== SIDEBAR ========== -->
+    <aside id="sidebar" class="sidebar">
+      <div class="sidebar-header">
+        <div class="sidebar-brand">
+          <svg width="20" height="20" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <rect x="6" y="8" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.12"/>
+            <rect x="22" y="10" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.25"/>
+            <path d="M14 20l4 10 1.5-4 4-1.5L14 20z" fill="var(--color-primary)" opacity="0.7"/>
+            <path d="M38 28l-4-10-1.5 4-4 1.5L38 28z" fill="var(--color-primary)"/>
+          </svg>
+          <span class="sidebar-title">CollabMD</span>
+        </div>
+        <div class="sidebar-actions">
+          <button class="ui-icon-button sidebar-close-btn" id="sidebarClose" aria-label="Close sidebar" title="Close sidebar">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+          <button class="ui-icon-button" id="newFileBtn" aria-label="New file" title="New file">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          </button>
+          <button class="ui-icon-button" id="newDrawingBtn" aria-label="New drawing" title="New Excalidraw drawing">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg>
+          </button>
+          <button class="ui-icon-button" id="newMermaidBtn" aria-label="New Mermaid diagram" title="New Mermaid diagram">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1"/><path d="M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1"/><path d="M8 10.5h8"/><path d="M8 13.5h8"/><path d="M10 8.5v7"/><path d="M14 8.5v7"/></svg>
+          </button>
+          <button class="ui-icon-button" id="newPlantumlBtn" aria-label="New PlantUML diagram" title="New PlantUML diagram">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="6" rx="1"/><rect x="14" y="4" width="7" height="6" rx="1"/><rect x="8.5" y="14" width="7" height="6" rx="1"/><path d="M10 7h4"/><path d="M17.5 10v2.5"/><path d="M6.5 10v2.5"/><path d="M6.5 12.5h11"/></svg>
+          </button>
+          <button class="ui-icon-button" id="newFolderBtn" aria-label="New folder" title="New folder">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><line x1="9" y1="14" x2="15" y2="14"/></svg>
+          </button>
+          <button class="ui-icon-button" id="refreshFilesBtn" aria-label="Refresh" title="Refresh file list">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
+          </button>
+        </div>
+      </div>
+      <div class="ui-nav-tabs hidden" id="sidebarTabs">
+        <button class="ui-nav-tab active" id="filesSidebarTab" type="button">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+          Files
+        </button>
+        <button class="ui-nav-tab hidden" id="gitSidebarTab" type="button">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3"/><circle cx="6" cy="6" r="3"/><path d="M13 6h3a2 2 0 0 1 2 2v7"/><path d="M6 9v12"/></svg>
+          Git
+        </button>
+      </div>
+      <div class="sidebar-search" id="fileSearch">
+        <input type="text" class="sidebar-search-input" id="fileSearchInput" placeholder="Search files..." autocomplete="off" spellcheck="false" aria-label="Search files">
+      </div>
+      <div class="sidebar-search hidden" id="gitSearch">
+        <input type="text" class="sidebar-search-input" id="gitSearchInput" placeholder="Search changes..." autocomplete="off" spellcheck="false" aria-label="Search changed files">
+      </div>
+      <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
+      <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
+    </aside>
+
+    <!-- ========== MAIN AREA ========== -->
+    <main class="main-area" id="mainContent">
+      <!-- Toolbar -->
+      <header class="toolbar" role="banner">
+        <div class="toolbar-left">
+          <button class="ui-button btn btn-ghost ui-toolbar-button" id="sidebarToggle" aria-label="Toggle sidebar" title="Toggle sidebar">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
+          </button>
+          <div class="toolbar-room-info">
+            <span class="toolbar-room-name" id="activeFileName">CollabMD</span>
+            <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge" id="userCount"></span>
+            <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge hidden" id="toolbarDiffBadge">Diff</span>
+            <span class="ui-pill-badge ui-pill-badge--accent toolbar-badge hidden" id="gitOperationStatus" aria-live="polite" aria-atomic="true"></span>
+          </div>
+        </div>
+
+        <div class="toolbar-center" id="toolbarCenter">
+          <div class="ui-segmented-control view-toggle" role="group" aria-label="View mode">
+            <button class="ui-segmented-btn view-btn active" data-view="split" aria-label="Split view" aria-pressed="true" title="Split view">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
+            </button>
+            <button class="ui-segmented-btn view-btn" data-view="editor" aria-label="Editor only" aria-pressed="false" title="Editor only">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="8" y1="8" x2="16" y2="8"/><line x1="8" y1="12" x2="14" y2="12"/><line x1="8" y1="16" x2="12" y2="16"/></svg>
+            </button>
+            <button class="ui-segmented-btn view-btn" data-view="preview" aria-label="Preview only" aria-pressed="false" title="Preview only">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="toolbar-right">
+          <button class="ui-button btn btn-ghost ui-toolbar-button mobile-view-toggle" id="mobileViewToggle" aria-label="Toggle editor/preview" title="Toggle view">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+            <span class="ui-toolbar-button-label">Preview</span>
+          </button>
+
+          <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
+
+          <button class="ui-button btn btn-ghost ui-toolbar-button toolbar-overflow-toggle" id="toolbarOverflowToggle" aria-label="Open more actions" aria-expanded="false" title="More actions">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="1"/>
+              <circle cx="19" cy="12" r="1"/>
+              <circle cx="5" cy="12" r="1"/>
+            </svg>
+          </button>
+
+          <div class="toolbar-overflow-menu" id="toolbarOverflowMenu">
+            <button class="ui-button btn btn-ghost ui-toolbar-button hidden" id="fileHistoryBtn" aria-label="Open file history" title="View file history">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M3 12a9 9 0 1 0 3-6.7"/>
+                <path d="M3 4v5h5"/>
+                <path d="M12 7v5l3 3"/>
+              </svg>
+              <span class="ui-toolbar-button-label" id="fileHistoryBtnLabel">History</span>
+            </button>
+
+            <button class="ui-button btn btn-ghost ui-toolbar-button ui-toolbar-button--name" id="editNameBtn" aria-label="Set name. Change display name" title="Change display name">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 1 1 3 3L7 19l-4 1 1-4Z"/></svg>
+              <span class="ui-toolbar-button-label ui-toolbar-button-text" id="currentUserName">Set name</span>
+            </button>
+
+            <div class="chat-container" id="chatContainer">
+              <button class="ui-button btn btn-ghost ui-toolbar-button chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                <span class="ui-toolbar-button-label">Chat</span>
+                <span class="ui-pill-badge ui-pill-badge--solid ui-pill-badge--count chat-toggle-badge hidden" id="chatToggleBadge">0</span>
+              </button>
+              <div class="toast-container chat-toast-container" id="chatToastContainer" aria-live="polite" aria-atomic="true"></div>
+
+              <section class="chat-panel hidden" id="chatPanel" aria-label="Team chat">
+                <div class="chat-panel-header">
+                  <div>
+                    <h2 class="chat-panel-title">Team chat</h2>
+                    <p class="chat-panel-status" id="chatStatus">Syncing...</p>
+                  </div>
+                  <button class="ui-button ui-button--compact ui-pill-button ui-action-pill ui-action-pill--surface btn btn-secondary chat-notification-action" id="chatNotificationBtn" type="button">Enable alerts</button>
+                </div>
+
+                <div class="chat-empty-state" id="chatEmptyState">
+                  Temporary room chat for whoever is online right now.
+                </div>
+                <div class="chat-messages hidden" id="chatMessages" role="log" aria-live="polite" aria-relevant="additions text"></div>
+
+                <form class="chat-form" id="chatForm">
+                  <input type="text" class="input chat-input" id="chatInput" placeholder="Send a quick update..." autocomplete="off" spellcheck="true" maxlength="280" aria-label="Team chat message">
+                  <button type="submit" class="ui-button btn btn-primary chat-send-btn">Send</button>
+                </form>
+              </section>
+            </div>
+
+            <button class="ui-button btn btn-ghost ui-toolbar-button" id="shareBtn" aria-label="Share. Copy link" title="Share link">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+              <span class="ui-toolbar-button-label">Share</span>
+            </button>
+            <button class="ui-button btn btn-ghost ui-toolbar-button" id="themeToggleBtn" data-theme-toggle aria-label="Toggle theme" title="Toggle theme">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
+              <span class="ui-toolbar-button-label">Theme</span>
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <!-- Empty state (no file selected) -->
+      <div id="emptyState" class="empty-state">
+        <div class="empty-state-content">
+          <div class="empty-state-logo" aria-hidden="true">
+            <svg width="48" height="48" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="6" y="8" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.12"/>
+              <rect x="22" y="10" width="28" height="38" rx="4" stroke="var(--color-primary)" stroke-width="2" fill="var(--color-primary)" fill-opacity="0.25"/>
+              <path d="M14 20l4 10 1.5-4 4-1.5L14 20z" fill="var(--color-primary)" opacity="0.7"/>
+              <path d="M38 28l-4-10-1.5 4-4 1.5L38 28z" fill="var(--color-primary)"/>
+            </svg>
+          </div>
+          <h2 class="empty-state-title">Welcome to CollabMD</h2>
+          <p class="empty-state-desc">Open a file from the sidebar, or get started quickly:</p>
+          <div class="empty-state-actions">
+            <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateNewFileBtn">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+              New File
+            </button>
+            <button class="ui-button btn btn-secondary empty-state-btn" id="emptyStateSearchBtn">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+              Search Everything
+              <kbd class="empty-state-kbd">⌘K</kbd>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Editor page (shown when a file is open) -->
+      <div id="editor-page" class="editor-page hidden">
+        <div class="editor-layout" id="editorLayout" data-view="split">
+          <div class="editor-pane" id="editorPane">
+            <div class="pane-header">
+              <div class="pane-header-meta">
+                <span class="pane-label">Editor</span>
+                <span class="pane-label-meta" id="lineInfo">Ln 1, Col 1</span>
+              </div>
+              <div class="pane-header-actions">
+                <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost hidden" id="commentSelectionBtn" aria-label="Comment current line or selection" title="Comment current line or selection">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span class="ui-action-label">Comment</span>
+                </button>
+                <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost" id="toggleWrapBtn" aria-label="Disable line wrap" title="Disable line wrap">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M3 6h14a4 4 0 1 1 0 8H9"/>
+                    <path d="m9 10-4 4 4 4"/>
+                    <path d="M3 18h7"/>
+                  </svg>
+                  <span id="wrapToggleLabel">Wrap on</span>
+                </button>
+              </div>
+            </div>
+            <div id="markdownToolbar" class="markdown-toolbar hidden" role="toolbar" aria-label="Markdown formatting"></div>
+            <div id="editorContainer" class="editor-container">
+              <div class="editor-loading" id="editorLoading">
+                <div class="skeleton-line skeleton-line--title skeleton-line--break"></div>
+                <div class="skeleton-line skeleton-line--full"></div>
+                <div class="skeleton-line skeleton-line--ninety"></div>
+                <div class="skeleton-line skeleton-line--ninety-five"></div>
+                <div class="skeleton-line skeleton-line--eighty skeleton-line--break"></div>
+                <div class="skeleton-line skeleton-line--full"></div>
+                <div class="skeleton-line skeleton-line--eighty-five"></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="resizer" id="resizer" role="separator" aria-orientation="vertical" tabindex="0" aria-label="Resize editor and preview" aria-controls="editorPane previewPane" aria-valuemin="20" aria-valuemax="80" aria-valuenow="50"></div>
+
+          <div class="preview-pane" id="previewPane">
+            <div class="pane-header">
+              <span class="pane-label">Preview</span>
+              <div class="pane-header-actions">
+                <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost hidden" id="commentsToggle" aria-label="Toggle comments" title="Toggle comments">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                  </svg>
+                  <span class="ui-action-label">Comments</span>
+                </button>
+                <button class="ui-button ui-button--compact ui-button--toggle btn btn-ghost" id="outlineToggle" aria-label="Toggle outline" title="Toggle outline">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="15" y2="12"/><line x1="3" y1="18" x2="18" y2="18"/></svg>
+                </button>
+              </div>
+            </div>
+            <div class="preview-body">
+              <div id="previewContainer" class="preview-container">
+                <div id="previewContent" class="preview-content"></div>
+                <div id="backlinksInlinePanel" class="backlinks-panel backlinks-panel-inline hidden">
+                  <button type="button" class="backlinks-header" aria-expanded="false">
+                    <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    <span class="backlinks-toggle">0 Linked Mentions</span>
+                    <span class="backlinks-count"></span>
+                  </button>
+                  <div class="backlinks-body" aria-hidden="true" inert>
+                    <div class="backlinks-list"></div>
+                  </div>
+                </div>
+              </div>
+              <div id="backlinksPanel" class="backlinks-panel-layer hidden">
+                <div class="backlinks-panel backlinks-panel-dock" data-backlinks-variant="dock">
+                  <button type="button" class="backlinks-header" aria-expanded="false">
+                    <svg class="backlinks-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
+                    <span class="backlinks-toggle">0 Linked Mentions</span>
+                    <span class="backlinks-count"></span>
+                  </button>
+                  <div class="backlinks-body" aria-hidden="true" inert>
+                    <div class="backlinks-list"></div>
+                  </div>
+                </div>
+              </div>
+              <aside id="commentsDrawer" class="comments-drawer hidden" aria-label="Comments">
+                <div class="comments-drawer-header">
+                  <span class="comments-drawer-title">Comments</span>
+                </div>
+                <div id="commentsDrawerEmpty" class="comments-drawer-empty">
+                  Add a comment from the editor or the preview bubbles.
+                </div>
+                <div id="commentsDrawerList" class="comments-drawer-list"></div>
+              </aside>
+              <aside id="outlinePanel" class="outline-panel hidden" aria-label="Document outline">
+                <div class="outline-header">
+                  <span class="outline-title">Outline</span>
+                </div>
+                <nav id="outlineNav" class="outline-nav"></nav>
+              </aside>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="diff-page" class="diff-page hidden">
+        <div class="diff-toolbar">
+          <div class="diff-toolbar-left">
+            <div class="diff-file-nav">
+              <button class="ui-icon-button ui-action-icon" id="diffPrevBtn" type="button" disabled aria-label="Previous changed file">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
+              </button>
+              <span class="diff-file-indicator" id="diffFileIndicator">0 / 0 files</span>
+              <button class="ui-icon-button ui-action-icon" id="diffNextBtn" type="button" disabled aria-label="Next changed file">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
+              </button>
+            </div>
+            <div class="diff-toolbar-actions">
+              <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary diff-back-btn hidden" id="diffBackToHistoryBtn" type="button">
+                Back to History
+              </button>
+              <div class="diff-toolbar-actions-group diff-toolbar-actions-group-git" id="diffGitActionsGroup" role="group" aria-label="Git file actions">
+                <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary" id="diffPrimaryActionBtn" type="button" disabled>
+                  Stage
+                </button>
+                <button class="ui-button ui-action-button ui-action-button--wide btn btn-primary" id="diffCommitBtn" type="button" disabled>
+                  Commit Staged
+                </button>
+              </div>
+              <span class="diff-toolbar-actions-divider" id="diffToolbarDivider" aria-hidden="true"></span>
+              <div class="diff-toolbar-actions-group" id="diffEditorActionsGroup" role="group" aria-label="Navigation actions">
+                <button class="ui-button ui-action-button ui-action-button--surface ui-action-button--wide btn btn-secondary diff-open-editor-btn" id="diffOpenEditorBtn" type="button" disabled>
+                  Open in Editor
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="diff-toolbar-right">
+            <div class="diff-stats" id="diffStats">
+              <span class="ui-stat-token ui-stat-token--add diff-stats-add">+0</span>
+              <span class="ui-stat-token ui-stat-token--del diff-stats-del">-0</span>
+            </div>
+            <div class="ui-segmented-control diff-layout-toggle hidden" id="diffLayoutToggle" role="group" aria-label="Commit diff layout">
+              <button class="ui-segmented-btn view-btn diff-layout-btn" data-diff-layout="stacked" type="button">Stacked</button>
+              <button class="ui-segmented-btn view-btn diff-layout-btn active" data-diff-layout="focused" type="button">Focused</button>
+            </div>
+            <div class="ui-segmented-control diff-mode-toggle" role="group" aria-label="Diff view mode">
+              <button class="ui-segmented-btn view-btn diff-mode-btn active" data-diff-mode="unified" type="button">Unified</button>
+              <button class="ui-segmented-btn view-btn diff-mode-btn" data-diff-mode="split" type="button">Split</button>
+            </div>
+          </div>
+        </div>
+        <div class="diff-scroll" id="diffScroll">
+          <div class="diff-content" id="diffContent"></div>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <dialog class="app-dialog" id="displayNameDialog">
+    <form class="app-dialog-form" id="displayNameForm" method="dialog">
+      <div class="app-dialog-header">
+        <h2 class="app-dialog-title" id="displayNameTitle">Update display name</h2>
+        <p class="app-dialog-copy" id="displayNameCopy">Your name will be visible to everyone editing this vault.</p>
+      </div>
+      <label class="app-dialog-field" for="displayNameInput">
+        <span class="app-dialog-label">Name</span>
+        <input type="text" class="input" id="displayNameInput" name="displayName" maxlength="24" autocomplete="nickname" spellcheck="false" required>
+      </label>
+      <div class="app-dialog-actions">
+        <button type="button" class="ui-button btn btn-secondary" id="displayNameCancel">Cancel</button>
+        <button type="submit" class="ui-button btn btn-primary" id="displayNameSubmit">Save name</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog class="app-dialog" id="fileActionDialog">
+    <form class="app-dialog-form" id="fileActionForm" method="dialog">
+      <div class="app-dialog-header">
+        <h2 class="app-dialog-title" id="fileActionTitle">Create file</h2>
+        <p class="app-dialog-copy" id="fileActionCopy">Add a new file to the vault.</p>
+      </div>
+      <label class="app-dialog-field" id="fileActionField" for="fileActionInput">
+        <span class="app-dialog-label" id="fileActionLabel">Path</span>
+        <input type="text" class="input" id="fileActionInput" name="fileActionValue" autocomplete="off" spellcheck="false" required>
+        <span class="app-dialog-hint" id="fileActionHint" hidden></span>
+      </label>
+      <p class="app-dialog-note" id="fileActionNote" hidden></p>
+      <div class="app-dialog-actions">
+        <button type="button" class="ui-button btn btn-secondary" id="fileActionCancel">Cancel</button>
+        <button type="submit" class="ui-button btn btn-primary" id="fileActionSubmit">Create</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog class="app-dialog" id="gitCommitDialog">
+    <form class="app-dialog-form" id="gitCommitForm" method="dialog">
+      <div class="app-dialog-header">
+        <h2 class="app-dialog-title" id="gitCommitTitle">Commit staged changes</h2>
+        <p class="app-dialog-copy" id="gitCommitCopy">All staged changes will be included.</p>
+      </div>
+      <label class="app-dialog-field" for="gitCommitInput">
+        <span class="app-dialog-label">Commit message</span>
+        <input type="text" class="input" id="gitCommitInput" name="gitCommitMessage" autocomplete="off" spellcheck="true" required>
+      </label>
+      <div class="app-dialog-actions">
+        <button type="button" class="ui-button btn btn-secondary" id="gitCommitCancel">Cancel</button>
+        <button type="submit" class="ui-button btn btn-primary" id="gitCommitSubmit">Commit staged changes</button>
+      </div>
+    </form>
+  </dialog>
+
+  <dialog class="app-dialog" id="gitResetDialog">
+    <form class="app-dialog-form" method="dialog">
+      <div class="app-dialog-header">
+        <h2 class="app-dialog-title" id="gitResetTitle">Reset file</h2>
+        <p class="app-dialog-copy" id="gitResetCopy">Restore this file from the current checked-out branch. If that branch does not contain the file, it will be deleted locally.</p>
+      </div>
+      <div class="app-dialog-field">
+        <label class="app-dialog-label" for="gitResetFileName">File</label>
+        <input class="input app-dialog-input" id="gitResetFileName" type="text" readonly>
+      </div>
+      <div class="app-dialog-note is-danger">
+        Local file content and staged changes for this path will be discarded.
+      </div>
+      <div class="app-dialog-actions">
+        <button class="ui-button btn btn-secondary" id="gitResetCancel" type="button">Cancel</button>
+        <button class="ui-button btn btn-danger" id="gitResetSubmit" type="button">Reset File</button>
+      </div>
+    </form>
+  </dialog>
+
+  <div class="tab-lock-overlay hidden" id="tabLockOverlay" role="dialog" aria-modal="true" aria-labelledby="tabLockTitle">
+    <div class="tab-lock-card">
+      <span class="tab-lock-kicker">Single active tab</span>
+      <h2 class="tab-lock-title" id="tabLockTitle">This vault is active in another tab</h2>
+      <p class="tab-lock-copy" id="tabLockCopy">To avoid duplicate presence and chat, only one tab can stay connected at a time. Use the other tab, or take over the session here.</p>
+      <div class="tab-lock-actions">
+        <button type="button" class="ui-button btn btn-primary btn-lg" id="tabLockTakeoverBtn">Take over here</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Toast notifications -->
+  <div class="toast-container" id="toastContainer"></div>
+
+  <!-- Quick Switcher (Cmd+K) -->
+  <div class="qs-overlay" id="quickSwitcher">
+    <div class="qs-modal">
+      <div class="qs-input-wrap">
+        <svg class="qs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input type="text" class="qs-input" id="quickSwitcherInput" placeholder="Search files..." autocomplete="off" spellcheck="false">
+        <kbd class="qs-kbd">esc</kbd>
+      </div>
+      <div class="qs-results" id="quickSwitcherResults"></div>
+      <div class="qs-hint" id="quickSwitcherHint">Type to search files</div>
+    </div>
+  </div>
+  <script type="module" src="./main-entry.js"></script>
+</body>
+</html>

package/src/client/app/main-entry.js

@@ -0,0 +1,24 @@
+import darkHighlightThemeUrl from '../assets/vendor/highlight/github-dark.min.css?url';
+import lightHighlightThemeUrl from '../assets/vendor/highlight/github.min.css?url';
+import '../styles/base.css';
+import '../styles/style.css';
+
+import { ensureRuntimeConfigLoaded } from '../infrastructure/runtime-config-loader.js';
+
+function ensureHighlightThemeStylesheet() {
+  let themeStylesheet = document.getElementById('hljs-theme');
+  if (!(themeStylesheet instanceof HTMLLinkElement)) {
+    themeStylesheet = document.createElement('link');
+    themeStylesheet.id = 'hljs-theme';
+    themeStylesheet.rel = 'stylesheet';
+    document.head.append(themeStylesheet);
+  }
+
+  themeStylesheet.href = darkHighlightThemeUrl;
+  themeStylesheet.dataset.darkHref = darkHighlightThemeUrl;
+  themeStylesheet.dataset.lightHref = lightHighlightThemeUrl;
+}
+
+await ensureRuntimeConfigLoaded();
+ensureHighlightThemeStylesheet();
+await import('../main.js');