@a83/orbiter-admin 0.2.0

package/README.md

@@ -0,0 +1,115 @@
+# @a83/orbiter-admin
+
+Standalone admin UI for Orbiter CMS. A self-contained Node.js server — no Astro required.
+
+---
+
+## What it is
+
+Orbiter stores everything in a single `.pod` file (SQLite). This package is the admin interface: a Hono HTTP server that reads and writes that file. It runs independently from your public site, on its own port or subdomain.
+
+```
+content.pod  ←  shared file
+     ↑                  ↑
+orbiter-admin      orbiter-integration
+(this package)     (Astro, reads at build time)
+```
+
+---
+
+## Start
+
+```bash
+ORBITER_POD=/absolute/path/to/content.pod npm start
+```
+
+Development (auto-reload on changes):
+
+```bash
+ORBITER_POD=/absolute/path/to/content.pod npm run dev
+```
+
+Opens at **http://localhost:4322**
+
+> Use an absolute path. The server changes its working directory internally, so relative paths break.
+
+---
+
+## Demo
+
+```bash
+# From the monorepo root
+npm run seed
+ORBITER_POD=$(pwd)/apps/demo/demo.pod npm run dev --workspace=packages/admin
+```
+
+Login: `admin` / `admin`
+
+---
+
+## Env vars
+
+| Variable        | Required | Default       | Description                              |
+|-----------------|----------|---------------|------------------------------------------|
+| `ORBITER_POD`   | yes      | —             | Absolute path to the `.pod` file         |
+| `PORT`          | no       | `4322`        | HTTP port                                |
+| `ADMIN_ORIGIN`  | no       | `localhost:4321,localhost:4322` | Allowed CORS origins (comma-separated) |
+
+---
+
+## What's inside
+
+**Dashboard** — entry counts, recently edited content, notes, to-do list, build trigger.
+
+**Collections** — browse and manage entries per collection.
+
+**Editor** — all schema fields rendered as inputs, autosave, version history, draft/published toggle. Inline image blocks with float alignment (left/right/center/full). Video embedding — YouTube, Vimeo, Wistia, direct mp4/webm URL. Media picker with cloud URL import (Dropbox, Google Drive, OneDrive). Relation picker, conditional field visibility.
+
+**Media library** — upload, browse and manage files. Stored as BLOBs in the pod. Images, video, PDF, any file type.
+
+**Schema** — add, reorder, and remove fields on any collection. Live changes, no restart.
+
+**Settings** — site name, URL, locale, API token, build webhook, theme.
+
+**Users** — manage admin users (admin role only).
+
+**Import** — WordPress WXR importer.
+
+---
+
+## Themes
+
+Three themes, two schemes (dark / light), two layouts (classic / glass).
+
+| Theme       | Character                              |
+|-------------|----------------------------------------|
+| Space       | Dark: space station HUD — cyan + blue  |
+|             | Light: solar command — ice blue        |
+| Zen         | Japandi — slate, mauve, moss           |
+| Catppuccin  | Mocha (dark) / Latte (light)           |
+
+Glass layout is the default — frosted panels, backdrop blur, animated gradient background.
+
+Preference saved to `localStorage`.
+
+---
+
+## Health check
+
+```bash
+curl http://localhost:4322/health
+# {"ok":true,"pod":"/path/to/content.pod"}
+```
+
+---
+
+## Part of Orbiter
+
+| Package | Description |
+|---------|-------------|
+| `@a83/orbiter-core` | SQLite engine, pod management, auth |
+| `@a83/orbiter-integration` | Astro integration, `orbiter:collections` virtual module |
+| `@a83/orbiter-admin` | This package — standalone admin server |
+| `@a83/orbiter-cli` | `orbiter init`, `add-user`, `export`, `pack`, `unpack` |
+
+**orbiter.sh** · MIT · [github.com/aeon022/orbiter](https://github.com/aeon022/orbiter)

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@a83/orbiter-admin",
+  "version": "0.2.0",
+  "description": "Standalone admin server for Orbiter CMS",
+  "type": "module",
+  "main": "./src/server.js",
+  "scripts": {
+    "start": "node src/server.js",
+    "dev": "node --watch src/server.js"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [
+    "astro",
+    "cms",
+    "sqlite",
+    "headless-cms",
+    "orbiter"
+  ],
+  "author": "ABTEILUNG83",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aeon022/orbiter.git",
+    "directory": "packages/admin"
+  },
+  "dependencies": {
+    "@a83/orbiter-core": "^0.2.0",
+    "@hono/node-server": "^1.14.4",
+    "hono": "^4.7.11"
+  }
+}

package/public/admin-utils.js

@@ -0,0 +1,302 @@
+// Orbiter Admin Utilities — port of packages/integration/src/admin-utils.js
+// Dark mode (html.dark class) + Space theme (html.theme-space class) + Command Palette
+
+(function () {
+
+  // ── Dark mode ────────────────────────────────────────────────────────
+  if (localStorage.getItem('orb-dark') === '1') {
+    document.documentElement.classList.add('dark');
+  }
+
+  function darkLabel(isDark) { return isDark ? '○ light' : '● dark'; }
+
+  window.__orbToggleDark = function () {
+    var dark = document.documentElement.classList.toggle('dark');
+    localStorage.setItem('orb-dark', dark ? '1' : '0');
+    var btn = document.getElementById('orb-dark-btn');
+    if (btn) btn.textContent = darkLabel(dark);
+  };
+
+  function syncDarkBtn() {
+    var btn = document.getElementById('orb-dark-btn');
+    if (btn) btn.textContent = darkLabel(document.documentElement.classList.contains('dark'));
+  }
+
+  // ── Theme ────────────────────────────────────────────────────────────
+  var THEMES = ['space'];
+
+  var _savedTheme = localStorage.getItem('orb-theme') || '';
+  if (_savedTheme) document.documentElement.classList.add('theme-' + _savedTheme);
+
+  if (_savedTheme === 'space' && !document.querySelector('link[href*="Space+Mono"]')) {
+    var _fl = document.createElement('link');
+    _fl.rel = 'stylesheet';
+    _fl.href = 'https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap';
+    document.head.appendChild(_fl);
+  }
+
+  window.__orbSetTheme = function (theme) {
+    THEMES.forEach(function (t) { document.documentElement.classList.remove('theme-' + t); });
+    localStorage.setItem('orb-theme', theme);
+    if (theme) document.documentElement.classList.add('theme-' + theme);
+    if (theme === 'space' && !document.querySelector('link[href*="Space+Mono"]')) {
+      var fl2 = document.createElement('link');
+      fl2.rel = 'stylesheet';
+      fl2.href = 'https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap';
+      document.head.appendChild(fl2);
+    }
+    document.querySelectorAll('[data-theme-btn]').forEach(function (btn) {
+      var active = btn.dataset.themeBtn === theme;
+      btn.style.borderColor = active ? 'var(--gold)' : 'var(--line)';
+      btn.style.color       = active ? 'var(--gold)' : 'var(--muted)';
+      btn.style.background  = active ? 'var(--gold-bg)' : 'transparent';
+    });
+  };
+
+  document.addEventListener('DOMContentLoaded', function () {
+    syncDarkBtn();
+
+    var cur = localStorage.getItem('orb-theme') || '';
+    document.querySelectorAll('[data-theme-btn]').forEach(function (btn) {
+      var active = btn.dataset.themeBtn === cur;
+      btn.style.borderColor = active ? 'var(--gold)' : 'var(--line)';
+      btn.style.color       = active ? 'var(--gold)' : 'var(--muted)';
+      btn.style.background  = active ? 'var(--gold-bg)' : 'transparent';
+    });
+  });
+
+  // ── Sidebar sub-menus ────────────────────────────────────────────────
+  window.__orbToggleNav = function (colId) {
+    var sub  = document.getElementById('nav-sub-' + colId);
+    var chev = document.getElementById('chev-' + colId);
+    if (!sub) return;
+    var open = sub.style.display !== 'none';
+    sub.style.display = open ? 'none' : '';
+    if (chev) chev.textContent = open ? '▸' : '▾';
+    try {
+      var state = JSON.parse(localStorage.getItem('orb_nav') || '{}');
+      state[colId] = !open;
+      localStorage.setItem('orb_nav', JSON.stringify(state));
+    } catch {}
+  };
+
+  document.addEventListener('DOMContentLoaded', function () {
+    try {
+      var state = JSON.parse(localStorage.getItem('orb_nav') || '{}');
+      Object.keys(state).forEach(function (colId) {
+        var sub  = document.getElementById('nav-sub-' + colId);
+        var chev = document.getElementById('chev-' + colId);
+        if (!sub) return;
+        if (!state[colId] && sub.querySelector('.active')) return;
+        sub.style.display = state[colId] ? '' : 'none';
+        if (chev) chev.textContent = state[colId] ? '▾' : '▸';
+      });
+    } catch {}
+  });
+
+  // ── Sign out ─────────────────────────────────────────────────────────
+  window.__orbSignOut = async function () {
+    await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' }).catch(function () {});
+    window.location.replace('/login.html');
+  };
+
+  // ── Breadcrumbs ───────────────────────────────────────────────────────
+  window.__orbBreadcrumbs = function (crumbs) {
+    var el = document.getElementById('topbar-breadcrumb');
+    if (!el || !crumbs.length) return;
+    el.innerHTML = crumbs.map(function (c, i) {
+      var sep = i > 0 ? '<span class="sep">/</span>' : '';
+      var item = c.href
+        ? '<a href="' + c.href + '">' + c.label + '</a>'
+        : '<span class="current">' + c.label + '</span>';
+      return sep + item;
+    }).join('');
+  };
+
+  // ── Command Palette ──────────────────────────────────────────────────
+  var palette    = null;
+  var palInput   = null;
+  var palResults = null;
+  var palOpen    = false;
+  var palIdx     = -1;
+  var palTimer   = null;
+
+  var NAV = [
+    { title: 'Dashboard', href: '/dashboard.html', hint: 'nav' },
+    { title: 'Media',     href: '/media.html',     hint: 'nav' },
+    { title: 'Schema',    href: '/schema.html',    hint: 'nav' },
+    { title: 'Build',     href: '/build.html',     hint: 'nav' },
+    { title: 'Settings',  href: '/settings.html',  hint: 'nav' },
+  ];
+
+  function buildPalette() {
+    palette = document.createElement('div');
+    palette.style.cssText = 'position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.5);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;';
+
+    var box = document.createElement('div');
+    box.style.cssText = 'width:520px;max-width:calc(100vw - 32px);background:var(--bg2);border:1px solid var(--line);box-shadow:0 20px 60px rgba(0,0,0,0.2);font-family:var(--mono);overflow:hidden;';
+
+    var inputRow = document.createElement('div');
+    inputRow.style.cssText = 'display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line);';
+
+    var prompt = document.createElement('span');
+    prompt.textContent = '›';
+    prompt.style.cssText = 'color:var(--muted);font-size:14px;margin-right:10px;flex-shrink:0;';
+
+    palInput = document.createElement('input');
+    palInput.type = 'text';
+    palInput.placeholder = 'Search, navigate…';
+    palInput.style.cssText = 'flex:1;border:none;outline:none;background:transparent;padding:14px 0;font-size:13px;color:var(--text);font-family:var(--mono);';
+
+    var hint = document.createElement('span');
+    hint.textContent = 'esc';
+    hint.style.cssText = 'font-size:9px;color:var(--muted);border:1px solid var(--line);padding:2px 6px;letter-spacing:0.06em;';
+
+    inputRow.appendChild(prompt);
+    inputRow.appendChild(palInput);
+    inputRow.appendChild(hint);
+
+    palResults = document.createElement('div');
+    palResults.style.cssText = 'max-height:340px;overflow-y:auto;';
+
+    box.appendChild(inputRow);
+    box.appendChild(palResults);
+    palette.appendChild(box);
+
+    palette.addEventListener('mousedown', function (e) { if (e.target === palette) closePalette(); });
+    palInput.addEventListener('input', function () { clearTimeout(palTimer); palTimer = setTimeout(runSearch, 120); });
+    palInput.addEventListener('keydown', handlePalKey);
+    document.body.appendChild(palette);
+  }
+
+  window.__orbOpenPalette = openPalette;
+
+  function openPalette() {
+    if (!palette) buildPalette();
+    palOpen = true;
+    palette.style.display = 'flex';
+    palInput.value = '';
+    palIdx = -1;
+    renderResults(NAV, []);
+    setTimeout(function () { palInput.focus(); }, 10);
+  }
+
+  function closePalette() {
+    if (!palette) return;
+    palOpen = false;
+    palette.style.display = 'none';
+  }
+
+  function handlePalKey(e) {
+    if (e.key === 'Escape')    { e.preventDefault(); closePalette(); return; }
+    if (e.key === 'ArrowDown') { e.preventDefault(); movePal(1);  return; }
+    if (e.key === 'ArrowUp')   { e.preventDefault(); movePal(-1); return; }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      var active = palResults.querySelector('.pal-item.pal-active');
+      if (active) window.location.href = active.dataset.href;
+    }
+  }
+
+  function movePal(dir) {
+    var items = palResults.querySelectorAll('.pal-item');
+    if (!items.length) return;
+    palIdx = Math.max(-1, Math.min(items.length - 1, palIdx + dir));
+    items.forEach(function (el, i) {
+      el.classList.toggle('pal-active', i === palIdx);
+      el.style.background = i === palIdx ? 'var(--accent-bg)' : '';
+    });
+  }
+
+  function palRow(item) {
+    var el = document.createElement('a');
+    el.href = item.href;
+    el.dataset.href = item.href;
+    el.className = 'pal-item';
+    el.style.cssText = 'display:flex;align-items:center;gap:12px;padding:9px 16px;text-decoration:none;border-bottom:1px solid var(--line2);transition:background 0.08s;cursor:pointer;';
+    el.addEventListener('mouseenter', function () {
+      palIdx = Array.from(palResults.querySelectorAll('.pal-item')).indexOf(el);
+      palResults.querySelectorAll('.pal-item').forEach(function (x) { x.style.background = ''; x.classList.remove('pal-active'); });
+      el.style.background = 'var(--accent-bg)';
+      el.classList.add('pal-active');
+    });
+
+    var icon = document.createElement('div');
+    icon.style.cssText = 'width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);flex-shrink:0;';
+    icon.textContent = item.hint === 'action' ? '→' : item.hint === 'nav' ? '◈' : item.status === 'published' ? '▪' : '▫';
+
+    var main = document.createElement('div');
+    main.style.cssText = 'flex:1;min-width:0;';
+
+    var title = document.createElement('div');
+    title.style.cssText = 'font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+    title.textContent = item.title;
+    main.appendChild(title);
+
+    if (item.collLabel) {
+      var sub = document.createElement('div');
+      sub.style.cssText = 'font-size:9px;color:var(--muted);margin-top:1px;';
+      sub.textContent = item.collLabel + ' · ' + item.slug;
+      main.appendChild(sub);
+    }
+
+    var badge = document.createElement('div');
+    badge.style.cssText = 'font-size:9px;color:var(--muted);flex-shrink:0;';
+    badge.textContent = item.hint || item.status || '';
+
+    el.appendChild(icon);
+    el.appendChild(main);
+    el.appendChild(badge);
+    return el;
+  }
+
+  function renderResults(navItems, entryItems) {
+    palResults.innerHTML = '';
+    palIdx = -1;
+
+    if (navItems.length) {
+      var navSec = document.createElement('div');
+      navSec.style.cssText = 'font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);padding:8px 16px 4px;';
+      navSec.textContent = 'Navigation';
+      palResults.appendChild(navSec);
+      navItems.forEach(function (item) { palResults.appendChild(palRow(item)); });
+    }
+
+    if (entryItems.length) {
+      var entrySec = document.createElement('div');
+      entrySec.style.cssText = 'font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);padding:8px 16px 4px;border-top:1px solid var(--line);';
+      entrySec.textContent = 'Entries';
+      palResults.appendChild(entrySec);
+      entryItems.forEach(function (item) { palResults.appendChild(palRow(item)); });
+    }
+
+    if (!navItems.length && !entryItems.length) {
+      var empty = document.createElement('div');
+      empty.style.cssText = 'padding:20px 16px;font-size:11px;color:var(--muted);text-align:center;';
+      empty.textContent = 'No results';
+      palResults.appendChild(empty);
+    }
+  }
+
+  async function runSearch() {
+    var q = palInput.value.trim();
+    if (!q) { renderResults(NAV, []); return; }
+    try {
+      var res  = await fetch('/api/search?q=' + encodeURIComponent(q), { credentials: 'include' });
+      var json = await res.json();
+      var navMatches = NAV.filter(function (n) { return n.title.toLowerCase().includes(q.toLowerCase()); });
+      renderResults(navMatches, (json.results || []).map(function (r) {
+        return { title: r.title || r.slug, href: '/editor.html?collection=' + r.collection_id + '&slug=' + r.slug, collLabel: r.collection_id, slug: r.slug, status: r.status };
+      }));
+    } catch {}
+  }
+
+  // Cmd+K (Mac) or Ctrl+K (other)
+  document.addEventListener('keydown', function (e) {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      palOpen ? closePalette() : openPalette();
+    }
+  });
+
+})();

package/public/build.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Orbiter Admin — Build</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Space+Grotesk:wght@300;400;500;600&family=Noto+Serif+JP:wght@200;300&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css" />
+  <script src="/theme.js"></script>
+  <style>
+    .build-card { background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; max-width:520px; }
+    .build-status { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
+    .build-dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex-shrink:0; }
+    .build-dot.configured { background:var(--jade); }
+    .build-dot.unconfigured { background:var(--muted); }
+    .build-label { font-size:12px; color:var(--text); }
+    .build-meta { font-size:10px; color:var(--muted); margin-bottom:24px; }
+    .build-last { font-size:10px; color:var(--muted); margin-top:12px; }
+    .banner { padding:8px 16px; font-size:10px; display:flex; align-items:center; gap:6px; border-radius:var(--radius); margin-bottom:14px; max-width:520px; }
+    .banner-ok  { background:var(--jade-bg); color:var(--jade); border:1px solid rgba(45,139,106,.2); }
+    .banner-ok::before { content:"✓"; }
+    .banner-err { background:rgba(139,38,53,.07); color:var(--red); border:1px solid rgba(139,38,53,.15); }
+    .banner-err::before { content:"✕"; }
+    .config-hint { font-size:11px; color:var(--muted); margin-top:12px; line-height:1.7; }
+    .config-hint a { color:var(--accent); text-decoration:none; }
+    .config-hint a:hover { text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header class="topbar">
+      <a class="logo" href="/dashboard.html"><div class="logo-mark">OR</div>Orbiter</a>
+      <div class="topbar-right">
+        <button class="search-trigger" id="search-btn" title="Search (⌘K)">
+          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+          Search <kbd>⌘K</kbd>
+        </button>
+        <button class="scheme-toggle" id="scheme-toggle" title="Toggle scheme">◐</button>
+        <span class="user" id="topbar-user"></span>
+        <span class="logout" id="logout-btn">Sign out</span>
+      </div>
+    </header>
+    <nav class="sidebar">
+      <div class="nav-section">Content</div>
+      <a class="nav-item" href="/dashboard.html"><span class="nav-icon">◈</span>Dashboard</a>
+      <a class="nav-item" href="/collections.html"><span class="nav-icon">⊞</span>Collections</a>
+      <div class="nav-section">Assets</div>
+      <a class="nav-item" href="/media.html"><span class="nav-icon">⊟</span>Media</a>
+      <div class="nav-section">System</div>
+      <a class="nav-item" href="/schema.html"><span class="nav-icon">◈</span>Schema</a>
+      <a class="nav-item active" href="/build.html"><span class="nav-icon">▲</span>Build</a>
+      <a class="nav-item" href="/settings.html"><span class="nav-icon">◎</span>Settings</a>
+      <a class="nav-item admin-only" href="/users.html" style="display:none"><span class="nav-icon">◉</span>Users</a>
+      <div class="sidebar-footer">
+        <div class="pod-name" id="pod-name">content.pod</div>
+        <div class="pod-info" id="pod-info"></div>
+        <div class="pod-status"><span class="pod-dot"></span>pod synced</div>
+      </div>
+    </nav>
+    <main class="main">
+      <div class="page-header">
+        <h1 class="page-title">Build</h1>
+        <p class="page-sub" id="last-triggered"></p>
+      </div>
+      <div id="banner" class="banner" style="display:none"></div>
+      <div id="content"><div class="empty"><div class="spinner"></div></div></div>
+    
+  <script type="module">
+    const me = await fetch('/api/auth/me',{credentials:'include'}).then(r=>r.json()).catch(()=>null);
+    if (!me?.user) { location.replace('/login.html'); }
+    document.getElementById('topbar-user').textContent = me.user.username;
+    if (me.user.role==='admin') document.querySelectorAll('.admin-only').forEach(el=>el.style.display='');
+    document.getElementById('logout-btn').addEventListener('click',async()=>{
+      await fetch('/api/auth/logout',{method:'POST',credentials:'include'});
+      location.replace('/login.html');
+    });
+
+    function showBanner(cls, text) {
+      const el = document.getElementById('banner');
+      el.className = 'banner ' + cls;
+      el.textContent = text;
+      el.style.display = '';
+      setTimeout(()=>el.style.display='none', 4000);
+    }
+
+    const status = await fetch('/api/build/status',{credentials:'include'}).then(r=>r.json()).catch(()=>({configured:false,lastTriggered:null}));
+    const lastEl = document.getElementById('last-triggered');
+    lastEl.textContent = status.lastTriggered ? `Last: ${new Date(status.lastTriggered).toLocaleString()}` : 'Never triggered';
+
+    const wrap = document.getElementById('content');
+    wrap.innerHTML = `
+      <div class="build-card">
+        <div class="build-status">
+          <div class="build-dot ${status.configured?'configured':'unconfigured'}"></div>
+          <div class="build-label">${status.configured ? 'Webhook configured' : 'No webhook configured'}</div>
+        </div>
+        ${status.configured
+          ? `<div class="build-meta">Triggering a build will POST to the configured webhook URL.</div>
+             <button class="btn btn-primary" id="trigger-btn" style="min-width:160px;">▲ Trigger build</button>
+             ${status.lastTriggered ? `<div class="build-last">Last triggered: ${new Date(status.lastTriggered).toLocaleString()}</div>` : ''}`
+          : `<div class="config-hint">
+               No webhook URL is configured. To enable build triggers, add a webhook URL in
+               <a href="/settings.html">Settings → Build</a>.
+             </div>`
+        }
+      </div>
+    `;
+
+    document.getElementById('trigger-btn')?.addEventListener('click', async btn=>{
+      btn = document.getElementById('trigger-btn');
+      btn.disabled = true;
+      btn.textContent = 'Triggering…';
+      const res = await fetch('/api/build/trigger',{method:'POST',credentials:'include'});
+      const json = await res.json();
+      btn.disabled = false;
+      btn.textContent = '▲ Trigger build';
+      if (res.ok) showBanner('banner-ok','Build triggered');
+      else showBanner('banner-err', json.error ?? 'Webhook error');
+    });
+  </script>
+</main>
+  </div>
+  <script src="/search.js"></script>
+  <script src="/sidebar.js"></script>
+  <script src="/router.js"></script>
+</body>
+</html>