fix(publication): restore project-origin branding and demo assets (#6561)

* chore(publication): restore cleared first-party assets

* fix(branding): restore publication asset integrations

* fix(publication): tighten restoration provenance

PUBLICATION_ASSET_DECISIONS.md

@@ -67,3 +67,24 @@ SAN-191 reconciles references, font preferences, catalogs, tests and packaging.
 The service-worker cache version changes so activation deletes prior app caches.
 Omission is not a finding of infringement and does not grant permission to
 restore the removed originals.
+
+## Post-publication restoration review
+
+The historical SAN entries recorded above reflect the conservative posture adopted during publication migration. As noted in SAN-191, omission was not a finding of infringement. A subsequent maintainer review traced these 14 project-origin assets through repository history, recorded their repository provenance, and restored their byte-identical historical versions previously distributed by the project.
+
+The original SHA-256 hashes are recorded below. Ambiguous third-party assets (such as vendor marks and third-party libraries) remain deliberately omitted.
+
+- RESTORE-001: `assets/branding/odysseus-browser.jpg` (SHA-256: `96bc894113d3db1a8e19535047e85fef7bfe7e643d45973d6effb945dce667df`): README interface screenshot introduced by pewdiepie-archdaemon in commit "Refresh README screenshot".
+- RESTORE-002: `assets/branding/odysseus-wordmark.png` (SHA-256: `5e20708f9709735c66692c0cffc74734d61cfa256d48f9095c6870bcd53f4552`): README wordmark artwork introduced by pewdiepie-archdaemon in commit "Refresh README presentation".
+- RESTORE-003: `assets/branding/odysseus.jpg` (SHA-256: `cd5e87b12f1e9e7baca6a6c5e95012130c9e26c6e31526e864eaf17096fcd05e`): Project branding image from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon, used by build-macos-app.sh for launcher icon generation.
+- RESTORE-004: `website/bg.webm` (SHA-256: `157f732539a6072d55164da23d65afa9423782728dd067154867fcebb176fb35`): Landing page background video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-005: `website/chat.webm` (SHA-256: `d69f319192cec2cac1831e08ee99ae902398f1b163021e42b3fda05a0d7ab4d5`): Chat demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-006: `website/compare.webm` (SHA-256: `90d8c68dbc2ac3029b258598a7e2c2c5c8f5d6d702b9d31f0c729e5517093f51`): Model comparison demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-007: `website/document.webm` (SHA-256: `754e4ae071e9def5151749a03ad284cd41385354620fc8afea3c5c4f50f64a0d`): Document editor demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-008: `website/gallery.webm` (SHA-256: `b3bbe99c55b5cd1de32cb8e84fa31044761b7724a76a4bae4d4b0acaed7f3500`): Image gallery demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-009: `website/notes.webm` (SHA-256: `2a82b501271c4b60927e575bb22f8c986e3d1a4089a5518f84b46e534dea37d7`): Notes demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-010: `website/research.webm` (SHA-256: `2495a1a6cc1ea037f7460d065e3af6aacf091b240edebc436ce4bca5e83dab87`): Deep research demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-011: `website/theme.webm` (SHA-256: `6bd5a4140e9eeb9e06bee217319d331e9c8c873763fcb9040425fb38878b8410`): Theme demo video from commit e5c99a5eee62fc7df0e2dca5e46cbc87399047d6 ("Odysseus v1.0") by pewdiepie-archdaemon.
+- RESTORE-012: `static/icons/icon-192.png` (SHA-256: `d9f54e07d2a8dca6302125d84436176a26a056745c5adb29ef521345c161e359`): Project PWA icon (192x192) contributed in PR #428 (commit 615134851d5c17897b96bba43b7961a00770d45b), generated from the project logo SVG.
+- RESTORE-013: `static/icons/icon-512.png` (SHA-256: `785872b140da58087f23539ed187fe0f69de6eb9690abf995b10c93b5b518388`): Project PWA icon (512x512) contributed in PR #428 (commit 615134851d5c17897b96bba43b7961a00770d45b), generated from the project logo SVG.
+- RESTORE-014: `static/icons/icon-maskable-512.png` (SHA-256: `7ed567fe0de6b6b451eec35c8fb2b465d84a3b23945135c19c4fa388ac976449`): Project PWA maskable icon (512x512) contributed in PR #428 (commit 615134851d5c17897b96bba43b7961a00770d45b), generated from the project logo SVG.

README.md

@@ -1,4 +1,6 @@
-<h1 align="center">Odysseus</h1>
+<p align="center">
+  <img src="assets/branding/odysseus-wordmark.png" alt="Odysseus" width="238">
+</p>
 
 <p align="center">
   A self-hosted AI workspace for chat, agents, research, documents, email, notes, calendar, and local model workflows.
@@ -15,6 +17,10 @@
   <a href="https://repology.org/project/odysseus-ai/versions"><img src="https://repology.org/badge/vertical-allrepos/odysseus-ai.svg" alt="Packaging status"></a>
 </p>
 
+<p align="center">
+  <img src="assets/branding/odysseus-browser.jpg" alt="Odysseus interface">
+</p>
+
 ---
 
 ## Quick Start
@@ -53,7 +59,7 @@ Native installs, GPU notes, Windows/macOS instructions, HTTPS, and configuration
 
 ## Demo
 
-The [Odysseus landing page](https://odysseus-dev.github.io/odysseus/) gives a text-only overview of each feature. Its source lives under [`website/`](website/).
+A full hover-to-play tour lives on the [Odysseus landing page](https://odysseus-dev.github.io/odysseus/). Its source lives under [`website/`](website/).
 
 ## Contributing
 

build-macos-app.sh

@@ -27,8 +27,23 @@ echo "  port:        $PORT"
 rm -rf "$APP"
 mkdir -p "$APP/Contents/MacOS" "$APP/Contents/Resources"
 
-# Use the macOS default application icon; no branding-derived artwork is bundled.
-echo "  icon:        macOS default"
+# ── Icon (best effort) -- center-crop the branding image to a square .icns ──
+if [ -f "$REPO_DIR/assets/branding/odysseus.jpg" ] && command -v sips >/dev/null 2>&1; then
+  TMPIMG="$(mktemp -d)"
+  # Center-crop to a square, scale to 512 (sips' icns encoder caps at 512), and
+  # let sips emit the .icns directly: more robust across macOS versions than
+  # building an .iconset by hand.
+  sips -c 720 720 "$REPO_DIR/assets/branding/odysseus.jpg" --out "$TMPIMG/sq.png" >/dev/null 2>&1 || cp "$REPO_DIR/assets/branding/odysseus.jpg" "$TMPIMG/sq.png"
+  sips -z 512 512 "$TMPIMG/sq.png" --out "$TMPIMG/icon.png" >/dev/null 2>&1
+  if sips -s format icns "$TMPIMG/icon.png" --out "$APP/Contents/Resources/odysseus.icns" >/dev/null 2>&1; then
+    echo "  icon:        odysseus.icns"
+  else
+    echo "  icon:        (skipped - conversion failed)"
+  fi
+  rm -rf "$TMPIMG"
+else
+  echo "  icon:        (skipped - no assets/branding/odysseus.jpg)"
+fi
 cp -R "$REPO_DIR/licenses" "$APP/Contents/Resources/licenses"
 cp "$REPO_DIR/THIRD_PARTY_PROVENANCE.json" "$REPO_DIR/ACKNOWLEDGMENTS.md" "$APP/Contents/Resources/"
 
@@ -45,6 +60,7 @@ cat > "$APP/Contents/Info.plist" <<PLIST
     <key>CFBundleShortVersionString</key><string>1.0</string>
     <key>CFBundlePackageType</key>     <string>APPL</string>
     <key>CFBundleExecutable</key>      <string>$APP_NAME</string>
+    <key>CFBundleIconFile</key>        <string>odysseus</string>
     <key>LSMinimumSystemVersion</key>  <string>11.0</string>
     <key>NSHighResolutionCapable</key> <true/>
     <key>LSUIElement</key>             <false/>

specs/frontend.md

@@ -20,7 +20,7 @@ This spec covers the current browser app in:
 
 `/backgrounds` currently targets `static/backgrounds.html`; if that route remains, the file must exist or the route should be removed.
 
-The static PWA icon files (192px, 512px, maskable) were deliberately omitted from publication, and `static/icons/` is intentionally absent. `static/manifest.json` declares no `icons`, and neither `static/index.html` nor `static/login.html` ships a static `apple-touch-icon` link. Icons come from generated inline SVG at runtime: the `data:image/svg+xml` favicon, the `apple-touch-icon` link that `static/index.html` and `static/js/theme.js` create, and per-route Blob manifests whose `icons` point at that SVG. Do not reintroduce references to icon files that are not shipped.
+`static/manifest.json`, `static/index.html`, and `static/login.html` reference first-party PWA icon files under `static/icons/` (192px, 512px, and maskable). At runtime, route-specific manifests can also be generated as Blob URLs when supported, and per-route favicon links use generated inline SVG.
 
 ## Current Call Sites Include
 
@@ -81,7 +81,7 @@ Storage/secrets policy:
 - other static assets use cache-first with background refresh;
 - `CACHE_NAME` bumps and `PRECACHE` updates must accompany cache policy or shell asset changes.
 
-`static/manifest.json` owns default PWA metadata and intentionally has no `icons` entry. Route-specific manifests can be generated as Blob URLs when supported; their icons are the route's generated inline SVG, not files.
+`static/manifest.json` owns default PWA metadata, referencing the restored icons under `static/icons/`. Route-specific manifests can be generated as Blob URLs when supported; dynamic icons use the route's generated inline SVG, while the default manifest uses the static icons.
 
 KaTeX and Mermaid are self-hosted and lazy-loaded through memoized, retry-after-failure promises in `static/js/markdown.js`; math placeholders preserve source until KaTeX arrives, detached PDF export renders its own container, and Mermaid fetches only when a diagram exists. Pyodide remains a jsDelivr-loaded optional runtime, so offline/PWA behavior is not fully self-contained.
 

static/index.html

@@ -13,6 +13,7 @@
        in email bodies — was wrapping random digits in <a href="tel:..."> with
        browser-default styling that didn't match the Odysseus theme. -->
   <meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
+  <link rel="apple-touch-icon" href="/static/icons/icon-192.png">
   <script nonce="{{CSP_NONCE}}">
   window._odysseusLoadTime = Date.now();
   (function(){

static/login.html

@@ -6,6 +6,7 @@
 <title>Odysseus — Login</title>
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 4L16 22L6 22Z' fill='%23e06c75'/%3E%3Cpath d='M16 8L16 22L24 22Z' fill='%23e06c75' opacity='0.6'/%3E%3Cpath d='M4 24Q10 20 16 24Q22 28 28 24' stroke='%23e06c75' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
 <link rel="manifest" href="static/manifest.json">
+<link rel="apple-touch-icon" href="static/icons/icon-192.png">
 <script nonce="{{CSP_NONCE}}">
 (function(){
   function computeAppBasePath() {

static/manifest.json

@@ -7,5 +7,10 @@
   "display": "standalone",
   "orientation": "any",
   "background_color": "#282c34",
-  "theme_color": "#282c34"
+  "theme_color": "#282c34",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" },
+    { "src": "icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
 }

static/sw.js

@@ -7,7 +7,7 @@
 //   - Other static assets (images/fonts/libs): cache-first with bg refresh.
 //   - API / non-GET: never cached.
 // Bump CACHE_NAME whenever the precache list or SW logic changes.
-const CACHE_NAME = 'odysseus-v657-publication-plan-b';
+const CACHE_NAME = 'odysseus-v658-publication-assets-restore';
 
 // KaTeX resolves these from its own stylesheet, so caching the CSS without them
 // gives offline math fallback glyphs instead of proper typesetting.
@@ -134,6 +134,10 @@ const PRECACHE = [
   '/static/lib/katex/katex.min.js',
   '/static/lib/katex/katex.min.css',
   ...KATEX_FONTS,
+  '/static/manifest.json',
+  '/static/icons/icon-192.png',
+  '/static/icons/icon-512.png',
+  '/static/icons/icon-maskable-512.png',
 ];
 
 // Lazily-imported panel modules (js/panels.js). Not in index.html by design;

tests/publication_plan_b_browser.cjs

@@ -14,23 +14,57 @@ const { extractThemeBootstrap } = require('./helpers/theme_bootstrap.cjs');
     page.on('request', req => { if (/\.(webm|mp4)(?:$|\?)/.test(req.url())) mediaRequests.push(req.url()); });
     page.on('pageerror', e => errors.push(e.message));
     await page.goto(origin + '/website/index.html');
-    assert.equal(await page.locator('video, .preview-panel, .sec-bg-tint').count(), 0);
-    assert.equal(await page.locator('.feature-description').count(), 8);
-    for (const description of await page.locator('.feature-description .desc').allTextContents()) assert(description.trim());
+    // Landing page contains expected preview panels, preview videos, and background video
+    assert.equal(await page.locator('.preview-panel').count(), 8);
+    assert.equal(await page.locator('section#previews video').count(), 7);
+    assert.equal(await page.locator('section#how video.sec-bg').count(), 1);
+    assert.equal(await page.locator('section#how .sec-bg-tint').count(), 1);
+
+    // Expected video source paths exist and return 200
+    const expectedVideos = [
+      'chat.webm',
+      'research.webm',
+      'compare.webm',
+      'document.webm',
+      'notes.webm',
+      'gallery.webm',
+      'theme.webm',
+      'bg.webm',
+    ];
+    const videoSources = await page.locator('video source').evaluateAll(els => els.map(s => s.getAttribute('src')));
+    assert.deepEqual(videoSources.sort(), expectedVideos.slice().sort());
+    for (const src of expectedVideos) {
+      const videoRes = await page.request.get(origin + '/website/' + src);
+      assert.equal(videoRes.status(), 200, `Video source ${src} should return 200`);
+    }
+
+    // Feature and video layout does not overflow at desktop or mobile widths
     for (const width of [1280, 390]) {
       await page.setViewportSize({ width, height: 900 });
-      assert(await page.locator('.feature-description').first().isVisible());
+      assert(await page.locator('.preview-panel').first().isVisible());
       assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
     }
-    assert.deepEqual(mediaRequests, []);
     assert.deepEqual(errors, []);
 
+    // Manifest has valid icon entries that return successfully
     const manifest = await (await page.request.get(origin + '/static/manifest.json')).json();
     assert.equal(manifest.display, 'standalone');
-    assert(!manifest.icons);
+    assert(Array.isArray(manifest.icons) && manifest.icons.length === 3);
+    for (const icon of manifest.icons) {
+      assert(icon.src, 'Manifest icon entry must have src');
+      const iconUrl = new URL(icon.src, origin + '/static/manifest.json').href;
+      const iconRes = await page.request.get(iconUrl);
+      assert.equal(iconRes.status(), 200, `Manifest icon ${icon.src} should return 200`);
+    }
+
+    // Apple touch icon references in app HTML point to real files
     for (const filename of ['index.html', 'login.html']) {
       const html = await (await page.request.get(origin + '/static/' + filename)).text();
-      assert(!/<link[^>]+rel=["']apple-touch-icon/.test(html));
+      const match = html.match(/<link[^>]+rel=["']apple-touch-icon["'][^>]+href=["']([^"']+)["']/);
+      assert(match, `missing apple-touch-icon in ${filename}`);
+      const iconUrl = new URL(match[1], origin + '/').href;
+      const res = await page.request.get(iconUrl);
+      assert.equal(res.status(), 200, `Apple touch icon in ${filename} should return 200`);
     }
 
     // A small host DOM runs the actual export function and markdown renderer.

tests/test_publication_plan_b.py

@@ -30,23 +30,49 @@ def test_retained_artifacts_match_distributed_provenance_and_notices():
 
 def test_removed_resource_ledger_has_no_runtime_references():
     ledger = (ROOT / 'PUBLICATION_ASSET_DECISIONS.md').read_text()
-    removed = re.findall(r'^- SAN-\d+: `([^`]+)`$', ledger, re.M)
-    assert len(removed) == 21
-    # Inspect tracked text, including files omitted by parity-audit exclusions.
+    san_entries = re.findall(r'^- SAN-\d+: `([^`]+)`$', ledger, re.M)
+    assert len(san_entries) == 21
+
+    restore_entries = re.findall(r'^- RESTORE-\d+: `([^`]+)` \(SHA-256: `([a-f0-9]{64})`\)', ledger, re.M)
+    assert len(restore_entries) == 14
+
+    restored_paths = {path for path, _ in restore_entries}
+    for path, expected_sha in restore_entries:
+        target = ROOT / path
+        assert target.is_file(), f"restored asset missing on disk: {path}"
+        actual_sha = hashlib.sha256(target.read_bytes()).hexdigest()
+        assert actual_sha == expected_sha, f"sha256 mismatch for {path}"
+
+    still_omitted = [path for path in san_entries if path not in restored_paths]
+    assert len(still_omitted) == 7
+
+    expected_omitted_names = {
+        'GohuFont.ttf',
+        'html2pdf.bundle.min.js',
+        'qrcode.min.js',
+        'ollama-mark.png',
+        'ollama-mark-crop.png',
+        'sglang-logo.png',
+        'sglang-mark.png',
+    }
+    assert {Path(p).name for p in still_omitted} == expected_omitted_names
+
+    # Inspect tracked text for references to still-omitted resources.
     tracked = subprocess.check_output(['git', 'ls-files', '-z'], cwd=ROOT).decode().split('\0')
-    for path in removed:
-        assert not (ROOT / path).exists()
+    for path in still_omitted:
+        assert not (ROOT / path).exists(), f"omitted asset must not exist: {path}"
+        filename = Path(path).name
         for name in tracked:
-            if name == "PUBLICATION_ASSET_DECISIONS.md":
-                continue  # Historical ledger entries are intentionally non-resource references.
+            if name in {"PUBLICATION_ASSET_DECISIONS.md", "tests/test_publication_plan_b.py"}:
+                continue  # Historical ledger and test assertions are intentionally non-resource references.
             file = ROOT / name
             if not file.is_file():
                 continue
             try:
-                content = file.read_text()
+                content = file.read_text(encoding="utf-8")
             except UnicodeError:
                 continue
-            assert Path(path).name not in content, (path, name)
+            assert filename not in content, (path, name)
 
 
 def test_cold_catalog_and_refresh_use_mutable_data(monkeypatch, tmp_path):
@@ -113,12 +139,20 @@ def test_distribution_paths_include_all_notices():
     ignore = (ROOT / '.dockerignore').read_text()
     assert '!ACKNOWLEDGMENTS.md' in ignore
     manifest = json.loads((ROOT / 'static/manifest.json').read_text())
-    assert not manifest.get('icons')
+    assert manifest.get('icons')
     assert manifest['display'] == 'standalone'
+    expected_icons = [
+        {"src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable"},
+        {"src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable"},
+        {"src": "icons/icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable"},
+    ]
+    assert manifest['icons'] == expected_icons
+    for icon in manifest['icons']:
+        assert (ROOT / 'static' / icon['src']).is_file()
 
 
 def test_browser_publication_behaviors():
-    """Real Chromium DOM: text-only website, saved fonts, escaped print/math."""
+    """Real Chromium DOM: restored website media, saved fonts, escaped print/math."""
     if not shutil.which('node'):
         pytest.skip('Node is required')
     probe = subprocess.run(['node', '-e', "require.resolve('playwright')"], cwd=ROOT, capture_output=True)

tests/test_readme_ascii_fenced.py

@@ -1,8 +1,7 @@
 """Regression guard for the README title presentation.
 
 The original ASCII-art banner needed a code fence to preserve whitespace.
-Publication now opens with a centered text heading after omitting the wordmark
-artwork. Keep the title identity and the historical ASCII-fencing guard.
+Keep the wordmark title identity and the historical ASCII-fencing guard.
 """
 from pathlib import Path
 
@@ -19,9 +18,9 @@ def _fenced_segments(text: str):
     return parts[1::2]
 
 
-def test_readme_opens_with_text_title():
+def test_readme_opens_with_wordmark_title():
     head = "\n".join(README.read_text(encoding="utf-8").splitlines()[:15])
-    assert head.startswith('<h1 align="center">Odysseus</h1>'), "README must open with the Odysseus text title"
+    assert 'alt="Odysseus"' in head, "README must open with the Odysseus wordmark image"
 
 
 def test_reintroduced_ascii_banner_stays_fenced():

website/index.html

@@ -273,12 +273,87 @@
   .shot .frame-dots { position: absolute; top: 10px; left: 12px; display: flex; gap: 5px; }
   .shot .frame-dots i { width: 8px; height: 8px; border-radius: 50%; background: #39414d; display: inline-block; }
 
-  /* Feature descriptions */
-  .feature-descriptions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 36px; }
-  .feature-description { padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
-  .feature-description .t { display: flex; align-items: center; gap: 8px; font-weight: 700; }
-  .feature-description .ico { color: var(--accent); }
-  .feature-description .desc { display: block; margin-top: 8px; color: var(--muted); line-height: 1.6; }
+  /* Previews: expanding hover carousel that plays a video on hover/tap */
+  .previews { display: flex; align-items: center; gap: 12px; height: 480px; max-width: 1000px; margin: 36px auto 0; }
+  .preview-panel {
+    position: relative; flex: 1 1 0; min-width: 0; height: 360px; overflow: hidden;
+    border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer;
+    background: linear-gradient(180deg, var(--panel), var(--panel2));
+    transition: flex-grow .5s cubic-bezier(.2,.7,.2,1), height .5s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
+  }
+  .previews:hover .preview-panel { flex-grow: 0.55; height: 300px; }
+  .preview-panel:hover, .preview-panel:focus-visible, .preview-panel.is-active { flex-grow: 3.4 !important; height: 480px !important; border-color: var(--accent); }
+  .preview-panel .ph {
+    position: absolute; inset: 0; display: flex; flex-direction: column;
+    align-items: center; justify-content: center; gap: 10px;
+    color: var(--muted); font-size: 12.5px; opacity: 0.7; text-align: center; padding: 8px;
+  }
+  .preview-panel video {
+    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
+    z-index: 1; opacity: 0; transition: opacity .3s ease; background: transparent;
+  }
+  .preview-panel.has-video video { opacity: 1; }
+  /* These clips have their action on the left, so show the left edge instead of
+     the centered crop. */
+  .preview-panel:has(source[src="document.webm"]) video,
+  .preview-panel:has(source[src="notes.webm"]) video { object-position: right center; }
+  .preview-panel .label {
+    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 14px 16px;
+    background: linear-gradient(0deg, rgba(0,0,0,0.82), transparent);
+    color: var(--heading);
+    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
+  }
+  .preview-panel .label .t { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; font-size: 14px; }
+  .preview-panel .label .ico { color: var(--accent); flex-shrink: 0; }
+  .preview-panel .label .desc {
+    font-weight: 400; font-size: 12.5px; line-height: 1.35; color: rgba(255,255,255,0.82);
+    white-space: normal; max-height: 0; opacity: 0; overflow: hidden;
+    transition: max-height .4s ease, opacity .4s ease;
+  }
+  .preview-panel:hover .label .desc, .preview-panel:focus-visible .label .desc, .preview-panel.is-active .label .desc { max-height: 64px; opacity: 1; }
+  @media (max-width: 760px) {
+    .previews { flex-direction: column; height: auto; touch-action: pan-y; }
+    .preview-panel { height: 190px; flex: none; width: 100%; }
+    .preview-panel.is-active { height: 280px !important; }
+    .previews:hover .preview-panel, .preview-panel:hover { flex: none !important; }
+    .preview-panel .label .desc { max-height: 64px; opacity: 1; }
+  }
+
+  /* Fullscreen video background for a section: treated as an ambient, cinematic
+     backdrop (soft blur + slow drift) so it sets a mood without fighting the copy. */
+  .has-bg-video { position: relative; overflow: hidden; }
+  .has-bg-video .sec-bg {
+    position: absolute; inset: 0; width: 100%; height: 100%;
+    object-fit: cover; z-index: 0; pointer-events: none;
+    /* blur softens the busy frame; the extra scale hides the blurred edges */
+    filter: blur(4px) saturate(1.08) brightness(0.92);
+    transform: scale(1.12);
+    transform-origin: 55% 45%;
+    animation: bg-drift 36s ease-in-out infinite alternate;
+    will-change: transform;
+  }
+  @keyframes bg-drift {
+    from { transform: scale(1.12) translate(0, 0); }
+    to   { transform: scale(1.2) translate(-2.5%, -1.5%); }
+  }
+  .has-bg-video .sec-bg-tint {
+    position: absolute; inset: 0; z-index: 1; pointer-events: none;
+    background:
+      radial-gradient(900px 520px at 78% 18%, rgba(224,108,117,0.16), transparent 60%),
+      radial-gradient(760px 520px at 8% 88%, rgba(53,90,102,0.30), transparent 58%),
+      linear-gradient(180deg, rgba(17,17,17,0.86), rgba(17,17,17,0.62) 42%, rgba(17,17,17,0.92)),
+      radial-gradient(1200px 680px at 50% 46%, rgba(17,17,17,0.18), rgba(17,17,17,0.74));
+  }
+  .has-bg-video .wrap { position: relative; z-index: 2; }
+  /* Lift the copy off the moving backdrop. */
+  .has-bg-video .eyebrow,
+  .has-bg-video .h { text-shadow: 0 2px 22px rgba(0,0,0,0.7); }
+  .has-bg-video .sub { color: #b9e6f4; text-shadow: 0 1px 14px rgba(0,0,0,0.75); }
+  .hero.has-bg-video h1, .hero.has-bg-video .wordmark,
+  .hero.has-bg-video .lede, .hero.has-bg-video .slogan { text-shadow: 0 2px 22px rgba(0,0,0,0.72); }
+  @media (prefers-reduced-motion: reduce) {
+    .has-bg-video .sec-bg { animation: none; transform: scale(1.12); }
+  }
 
   /* Get started */
   .start {
@@ -523,28 +598,62 @@
     </div>
   </section>
 
-  <!-- FEATURE DESCRIPTIONS -->
-  <section id="features-overview">
+  <!-- PREVIEWS: hover/tap to expand + play -->
+  <section id="previews">
     <div class="wrap">
       <div class="center">
-        <h2 class="h">Explore the workspace</h2>
-        <p class="sub center">Tools for local AI and everyday work.</p>
+        <div class="eyebrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></svg>See it in action</div>
+        <h2 class="h">Hover or tap to take a closer look</h2>
+        <p class="sub center">Each panel expands and plays its preview when you hover or tap it. Swipe on mobile to move through them.</p>
       </div>
-      <div class="feature-descriptions">
-        <div class="feature-description"><span class="t"><svg class="ico" 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>Chat &amp; Agents</span><span class="desc">Talk to any local model, or give it tools and let the agent run.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" 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 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Cookbook</span><span class="desc">Download, serve, and manage local models across your machines.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>Deep Research</span><span class="desc">Ask once: it searches, reads sources, and writes back a cited report.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" width="16" height="16" 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="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg>Compare</span><span class="desc">Send one prompt to many models at once and watch them answer side by side.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>Documents</span><span class="desc">A document editor that puts you first — work on what you want, with AI help when you want it.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 2 2 4-4"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8M13 18h8"/></svg>Notes &amp; Tasks</span><span class="desc">Capture notes and to-dos, or let scheduled agents work and brief you after.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg>Image Gallery</span><span class="desc">Generate, edit, remove backgrounds, and inpaint in your own gallery.</span></div>
-        <div class="feature-description"><span class="t"><svg class="ico" 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 2.7 6.3 8.4a8 8 0 1 0 11.4 0z"/></svg>Themes</span><span class="desc">Restyle and make it yours — edit your own, or ask the agent to make one.</span></div>
+      <div class="previews">
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" 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>[ Chat &amp; Agents ]</span></div>
+          <video muted loop playsinline preload="none"><source src="chat.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" 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>Chat &amp; Agents</span><span class="desc">Talk to any local model, or give it tools and let the agent run.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg><span>[ Cookbook ]</span></div>
+          <div class="label"><span class="t"><svg class="ico" 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 2 2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>Cookbook</span><span class="desc">Download, serve, and manage local models across your machines.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg><span>[ Deep Research ]</span></div>
+          <video muted loop playsinline preload="none"><source src="research.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>Deep Research</span><span class="desc">Ask once: it searches, reads sources, and writes back a cited report.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="7" height="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg><span>[ Compare ]</span></div>
+          <video muted loop playsinline preload="none"><source src="compare.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" width="16" height="16" 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="16" rx="1"/><rect x="14" y="4" width="7" height="16" rx="1"/></svg>Compare</span><span class="desc">Send one prompt to many models at once and watch them answer side by side.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></svg><span>[ Documents ]</span></div>
+          <video muted loop playsinline preload="none"><source src="document.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M16 13H8M16 17H8M10 9H8"/></svg>Documents</span><span class="desc">A document editor that puts you first - work on what you want, with AI help when you want it.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 2 2 4-4"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8M13 18h8"/></svg><span>[ Notes &amp; Tasks ]</span></div>
+          <video muted loop playsinline preload="none"><source src="notes.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m3 7 2 2 4-4"/><path d="m3 17 2 2 4-4"/><path d="M13 6h8M13 18h8"/></svg>Notes &amp; Tasks</span><span class="desc">Capture notes and to-dos, or let scheduled agents work and brief you after.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg><span>[ Image Gallery ]</span></div>
+          <video muted loop playsinline preload="none"><source src="gallery.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.6-3.6a2 2 0 0 0-2.8 0L6 21"/></svg>Image Gallery</span><span class="desc">Generate, edit, remove backgrounds, and inpaint in your own gallery.</span></div>
+        </div>
+        <div class="preview-panel" tabindex="0">
+          <div class="ph"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z"/></svg><span>[ Themes ]</span></div>
+          <video muted loop playsinline preload="none"><source src="theme.webm" type="video/webm"></video>
+          <div class="label"><span class="t"><svg class="ico" 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 2.7 6.3 8.4a8 8 0 1 0 11.4 0z"/></svg>Themes</span><span class="desc">Restyle and make it yours - edit your own, or ask the agent to make one.</span></div>
+        </div>
       </div>
     </div>
   </section>
 
   <!-- HOW IT STARTED -->
-  <section id="how">
+  <section id="how" class="has-bg-video">
+    <video class="sec-bg" autoplay muted loop playsinline preload="auto"><source src="bg.webm" type="video/webm"></video>
+    <div class="sec-bg-tint"></div>
     <div class="wrap">
       <div class="eyebrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1z"/></svg>How it actually started</div>
       <h2 class="h">Uncompromised local LLM experience.</h2>
@@ -681,6 +790,72 @@
       }
     })();
 
+    // Previews: hovering/tapping a panel expands it (CSS) and plays its video; the
+    // video only becomes visible once it actually starts playing, so missing
+    // files just leave the labeled placeholder.
+    (function () {
+      var panels = [].slice.call(document.querySelectorAll('.preview-panel'));
+      if (!panels.length) return;
+      var active = -1;
+      function playPanel(p) {
+        var v = p.querySelector('video');
+        if (!v) return;
+        var pr = v.play();
+        if (pr && pr.catch) pr.catch(function () {});
+      }
+      function pausePanel(p) {
+        var v = p.querySelector('video');
+        if (v) v.pause();
+      }
+      function setActive(i, shouldPlay) {
+        active = (i + panels.length) % panels.length;
+        panels.forEach(function (panel, k) {
+          var on = k === active;
+          panel.classList.toggle('is-active', on);
+          panel.setAttribute('aria-expanded', on ? 'true' : 'false');
+          if (!on) pausePanel(panel);
+        });
+        if (shouldPlay !== false) playPanel(panels[active]);
+      }
+      panels.forEach(function (p, i) {
+        var v = p.querySelector('video');
+        if (v) {
+          v.addEventListener('playing', function () { p.classList.add('has-video'); });
+          v.addEventListener('pause', function () { /* keep last frame */ });
+        }
+        p.setAttribute('aria-expanded', 'false');
+        p.addEventListener('mouseenter', function () { setActive(i); });
+        p.addEventListener('focus', function () { setActive(i); });
+        p.addEventListener('mouseleave', function () {
+          if (!window.matchMedia || !window.matchMedia('(hover: none)').matches) {
+            p.classList.remove('is-active');
+            p.setAttribute('aria-expanded', 'false');
+            pausePanel(p);
+          }
+        });
+        p.addEventListener('blur', function () { pausePanel(p); });
+        p.addEventListener('click', function () { setActive(i); });
+      });
+      var strip = document.querySelector('.previews');
+      var sx = null, sy = null;
+      if (strip) {
+        strip.addEventListener('touchstart', function (e) {
+          if (!e.touches.length) return;
+          sx = e.touches[0].clientX;
+          sy = e.touches[0].clientY;
+        }, { passive: true });
+        strip.addEventListener('touchend', function (e) {
+          if (sx === null || sy === null || !e.changedTouches.length) return;
+          var dx = e.changedTouches[0].clientX - sx;
+          var dy = e.changedTouches[0].clientY - sy;
+          if (Math.abs(dx) > 42 && Math.abs(dx) > Math.abs(dy) * 1.25) {
+            setActive((active < 0 ? 0 : active) + (dx < 0 ? 1 : -1));
+          }
+          sx = sy = null;
+        }, { passive: true });
+      }
+    })();
+
     // Domino reveal: fade/slide each section in as it scrolls into view.
     (function () {
       var els = document.querySelectorAll('.hero, section');

website/setup.md

@@ -762,7 +762,7 @@ src/       llm_core, agent_loop, agent_tools, chat_processor, search/
 routes/    chat, session, document, memory, model … endpoints
 services/  docs, memory, search, hwfit (Cookbook) …
 static/    index.html + app.js + style.css + js/ (modular front-end)
-website/   text-only landing page (index.html)
+website/   landing page (index.html) + preview clips
 ```
 
 ## Data