Upload folder using huggingface_hub

PLANS.md

@@ -109,3 +109,4 @@ Note: see `docs/PASSWORD_MANAGER_SCOPE.md` for the current (non-vault) stance an
 - Open App and Login should point to login page.
 - Provider setting on path /app should be only on settings page.
 - Forget password not working. Fix.
+- Remove provider settings from dashboard UI (configure via `DEFAULT_*` secrets).

TASKS.md

@@ -22,6 +22,7 @@ Legend:
 ## P2 — UI/UX, settings, admin, landing
 - [x] Landing + route split (`/` landing, `/login`, `/app`) and UI redirects updated.
 - [x] Add `/docs` page and route `Get started` there.
+- [x] Publish docs + API docs endpoints (`/api/app-docs`, `/api/docs`).
 - [x] Split `static/dashboard.html` into JS/CSS files (`static/dashboard.js`, `static/dashboard.css`).
 - [x] Theme tokens shared across login + dashboard (single source of truth via `static/theme.css`).
 - [x] Separate Settings vs Admin pages (route-focused `/settings` and `/admin` views).

app/routes/base.py

@@ -3,13 +3,21 @@ from __future__ import annotations
 import os
 from pathlib import Path
 
-from fastapi import APIRouter
+from fastapi import APIRouter, HTTPException
 from fastapi.responses import FileResponse
 
 router = APIRouter()
 
 _ROOT = Path(__file__).resolve().parents[2]
 _STATIC = _ROOT / "static"
+_DOCS_ROOT = _ROOT / "docs"
+
+_DOC_PAGES: dict[str, tuple[str, Path]] = {
+    "architecture": ("Architecture", _DOCS_ROOT / "ARCHITECTURE.md"),
+    "troubleshooting": ("Troubleshooting", _DOCS_ROOT / "TROUBLESHOOTING.md"),
+    "security-deployment": ("Security deployment", _DOCS_ROOT / "SECURITY_DEPLOYMENT.md"),
+    "password-manager-scope": ("Password manager scope", _DOCS_ROOT / "PASSWORD_MANAGER_SCOPE.md"),
+}
 
 
 def _config_payload() -> dict:
@@ -31,6 +39,30 @@ async def get_config():
 async def get_api_config():
     return _config_payload()
 
+
+@router.get("/api/app-docs")
+async def list_app_docs():
+    return {
+        "pages": [
+            {"slug": slug, "title": title}
+            for slug, (title, _path) in sorted(_DOC_PAGES.items(), key=lambda kv: kv[1][0].lower())
+        ]
+    }
+
+
+@router.get("/api/app-docs/{slug}")
+async def get_app_doc(slug: str):
+    entry = _DOC_PAGES.get(slug)
+    if not entry:
+        raise HTTPException(status_code=404, detail="Doc not found")
+    title, path = entry
+    try:
+        markdown = path.read_text(encoding="utf-8")
+    except FileNotFoundError as e:
+        raise HTTPException(status_code=404, detail="Doc not found") from e
+    return {"slug": slug, "title": title, "markdown": markdown}
+
+
 @router.get("/")
 async def read_index():
     return FileResponse(str(_STATIC / "landing.html"))

app/server.py

@@ -106,7 +106,12 @@ async def lifespan(app: FastAPI):
 
 def create_app() -> FastAPI:
     _ensure_supabase_asset()
-    app = FastAPI(lifespan=lifespan)
+    app = FastAPI(
+        lifespan=lifespan,
+        docs_url="/api/docs",
+        redoc_url="/api/redoc",
+        openapi_url="/api/openapi.json",
+    )
 
     @app.exception_handler(StarletteHTTPException)
     async def _http_exception_handler(_request, exc: StarletteHTTPException):

static/dashboard.html

@@ -140,16 +140,16 @@
                         <h2 class="text-lg font-semibold text-gray-100">Getting started</h2>
                         <p class="text-sm text-gray-400 mt-1">A quick checklist to get productive in under a minute.</p>
                     </div>
-                    <button onclick="switchMode('chat'); openSettings();"
+                    <button onclick="window.location.href = routeUrl('settings');"
                         class="shrink-0 px-3 py-2 bg-gray-700 rounded-lg hover:bg-gray-600 text-sm font-medium transition">
-                        Provider Settings
+                        Settings
                     </button>
                 </div>
 
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4">
                     <div class="p-3 rounded-xl bg-gray-900/40 border border-gray-700">
-                        <div class="text-sm font-semibold text-gray-200">1) Pick a provider</div>
-                        <div class="text-sm text-gray-400 mt-1">Open Chat → Settings → choose a preset, set Base URL + API key, fetch models.</div>
+                        <div class="text-sm font-semibold text-gray-200">1) Configure provider</div>
+                        <div class="text-sm text-gray-400 mt-1">Set <code>DEFAULT_BASE_URL</code> + <code>DEFAULT_API_KEY</code> in deployment secrets. Use the Model box in chat to override.</div>
                     </div>
                     <div class="p-3 rounded-xl bg-gray-900/40 border border-gray-700">
                         <div class="text-sm font-semibold text-gray-200">2) Start chatting</div>
@@ -225,55 +225,10 @@
                         <button onclick="closeSettings()" class="text-gray-400 hover:text-white px-2 py-1 rounded hover:bg-white/10">&times;</button>
                     </div>
                     <div id="settings-content" class="p-4 space-y-4 overflow-y-auto" style="max-height: calc(100% - 56px);">
-                        <div class="space-y-3">
-                            <div>
-                                <label class="block text-xs font-semibold text-gray-400 mb-1 uppercase">Saved Providers</label>
-                                <div class="flex gap-2">
-                                    <select id="saved-providers" onchange="loadSelectedProvider(this.value)"
-                                        class="flex-grow bg-gray-700 text-sm rounded border border-gray-600 p-2 text-white outline-none focus:border-blue-500">
-                                        <option value="">Select...</option>
-                                    </select>
-                                    <button onclick="saveProvider()"
-                                        class="bg-green-600 hover:bg-green-700 text-white px-2 rounded text-xs">Save</button>
-                                    <button onclick="deleteProvider()"
-                                        class="bg-red-600 hover:bg-red-700 text-white px-2 rounded text-xs">Del</button>
-                                </div>
-                            </div>
-                            <div>
-                                <label class="block text-xs font-semibold text-gray-400 mb-1 uppercase">Provider Preset</label>
-                                <div class="flex gap-2">
-                                    <select id="provider-presets" onchange="applyProviderPreset(this.value)"
-                                        class="flex-grow bg-gray-700 text-sm rounded border border-gray-600 p-2 text-white outline-none focus:border-blue-500">
-                                        <option value="">Select preset...</option>
-                                    </select>
-                                    <button onclick="applyProviderPreset(document.getElementById('provider-presets').value)"
-                                        class="bg-gray-600 hover:bg-gray-700 text-white px-2 rounded text-xs">Apply</button>
-                                </div>
-                            </div>
-                            <div>
-                                <label class="block text-xs font-semibold text-gray-400 mb-1 uppercase">API Key</label>
-                                <input type="password" id="chat-api-key" placeholder="sk-..."
-                                    class="w-full bg-gray-700 text-sm rounded border border-gray-600 p-2 text-white outline-none focus:border-blue-500">
-                                <div class="text-xs text-gray-500 mt-1">Stored per-user when you click Save.</div>
-                            </div>
-                            <div class="grid grid-cols-2 gap-3">
-                                <div>
-                                    <label class="block text-xs font-semibold text-gray-400 mb-1 uppercase">Base URL</label>
-                                    <input type="text" id="chat-base-url" placeholder="https://api..."
-                                        class="w-full bg-gray-700 text-sm rounded border border-gray-600 p-2 text-white outline-none focus:border-blue-500">
-                                </div>
-                                <div>
-                                    <label class="block text-xs font-semibold text-gray-400 mb-1 uppercase">Model</label>
-                                    <div class="flex gap-1">
-                                        <input type="text" id="chat-model"
-                                            class="w-full bg-gray-700 text-sm rounded border border-gray-600 p-2 text-white outline-none focus:border-blue-500"
-                                            list="model-list">
-                                        <datalist id="model-list"></datalist>
-                                        <button onclick="fetchModels()"
-                                            class="bg-blue-600 hover:bg-blue-700 text-white px-2 rounded text-xs">↻</button>
-                                    </div>
-                                </div>
-                            </div>
+                        <div class="bg-gray-800/40 border border-gray-700 rounded-lg px-3 py-2">
+                            <div class="text-sm text-gray-100">Chat provider</div>
+                            <div class="text-xs text-gray-400 mt-0.5">Configured via deployment secrets (<code>DEFAULT_BASE_URL</code>, <code>DEFAULT_API_KEY</code>, <code>DEFAULT_MODEL</code>).</div>
+                            <div class="text-xs text-gray-500 mt-1">Use the Model input in the chat bar to override per-message.</div>
                         </div>
 
                         <div class="pt-4 border-t border-gray-700">
@@ -336,7 +291,7 @@
                                 </div>
                             </div>
                             <div class="text-xs text-gray-400 mb-2">
-                                Uses OpenAI Codex SDK locally (separate from your chat provider settings). Device auth is available in the terminal: <code>codex login --device-auth</code>.
+                                Uses OpenAI Codex SDK locally (separate from chat). Device auth is available in the terminal: <code>codex login --device-auth</code>.
                             </div>
                             <div class="grid grid-cols-2 gap-3">
                                 <div>
@@ -723,7 +678,7 @@
                             <div id="chat-history" class="flex-grow p-4 overflow-y-auto space-y-4 scroll-smooth">
                                 <div id="chat-empty-state" class="text-center text-gray-500 mt-10">
                                     <div class="text-lg font-semibold text-gray-300">Start a conversation</div>
-                                    <div class="text-sm text-gray-500 mt-1">Pick a provider in Settings, then send a message.</div>
+                                    <div class="text-sm text-gray-500 mt-1" id="chat-empty-hint">Configure <code>DEFAULT_BASE_URL</code>, then send a message.</div>
                                 </div>
                             </div>
 
@@ -745,6 +700,7 @@
                                     <input id="chat-model-quick" type="text" list="model-list" placeholder="Model"
                                         class="bg-gray-700 h-10 w-44 px-2 rounded-lg border border-gray-600 text-sm text-white outline-none focus:border-blue-500 hidden sm:block"
                                         onchange="setQuickModel(this.value)" title="Model" />
+                                    <datalist id="model-list"></datalist>
                                     <input id="chat-file-input" type="file" accept="image/*" multiple class="hidden" />
                                     <button onclick="document.getElementById('chat-file-input').click()"
                                         class="bg-gray-700 h-10 w-10 rounded-lg hover:bg-gray-600 transition inline-flex items-center justify-center text-gray-200"

static/dashboard.js

@@ -1,4 +1,5 @@
 let supabase;
+        let appConfig = {};
         // --- Multi-Terminal Logic ---
         let terminals = {}; // { id: { term, fitAddon, ws, containerId, scope } }
         let activeTerminalId = null; // scope: 'main'
@@ -469,6 +470,17 @@ let supabase;
             throw lastError || new Error('Config fetch failed');
         }
 
+        function updateChatEmptyHint() {
+            const el = document.getElementById('chat-empty-hint');
+            if (!el) return;
+            const baseUrl = (appConfig?.default_base_url || '').trim();
+            if (!baseUrl) {
+                el.innerHTML = 'Configure <code>DEFAULT_BASE_URL</code> in deployment secrets, then send a message.';
+                return;
+            }
+            el.textContent = 'Send a message to start.';
+        }
+
         async function getAccessToken() {
             const direct = (window.__sbAccessToken || '').trim();
             if (direct) return direct;
@@ -1132,6 +1144,7 @@ let supabase;
         async function init() {
             try {
                 const config = await fetchConfig();
+                appConfig = config || {};
                 if (!config.supabase_url || !config.supabase_key) throw new Error('Supabase Config Missing');
                 await requireSupabaseLibrary();
                 supabase = window.__supabaseClient || window.supabase.createClient(config.supabase_url, config.supabase_key);
@@ -1148,6 +1161,7 @@ let supabase;
                 const savedTheme = localStorage.getItem('theme_v1');
                 if (savedTheme) applyTheme(savedTheme);
                 else applyTheme('dark');
+                updateChatEmptyHint();
 
                 // Admin/UI capabilities
                 const me = await loadMe();
@@ -1170,7 +1184,7 @@ let supabase;
                 if (localStorage.getItem('auth_allow_signup_v1') == null) {
                     localStorage.setItem('auth_allow_signup_v1', '1');
                 }
-                // Codex SDK defaults (separate from chat provider)
+                // Codex SDK defaults (separate from chat)
                 if (localStorage.getItem('codex_sdk_base_url_v1') == null) {
                     // Leave blank by default. For device-auth, Codex CLI uses its own auth flow
                     // and default endpoints; setting a base URL without an API key can cause 401s.
@@ -1361,26 +1375,8 @@ let supabase;
                     });
                 }
 
-                // Apply defaults if fields are empty
-                if (config.default_base_url && !document.getElementById('chat-base-url').value) {
-                    document.getElementById('chat-base-url').value = config.default_base_url;
-                }
-                if (config.default_api_key && !document.getElementById('chat-api-key').value) {
-                    document.getElementById('chat-api-key').value = config.default_api_key;
-                }
-                if (config.default_model && !document.getElementById('chat-model').value) {
-                    document.getElementById('chat-model').value = config.default_model;
-                }
-
-                // Populate model picker from the configured base URL
-                const baseUrlEl = document.getElementById('chat-base-url');
-                if (baseUrlEl) {
-                    baseUrlEl.addEventListener('change', () => fetchModels().catch(() => { }));
-                    baseUrlEl.addEventListener('blur', () => fetchModels().catch(() => { }));
-                }
+                syncQuickModelFromSettings();
                 fetchModels().catch(() => { });
-
-                loadProviders();
                 await initNotes();
                 await loadChatHistoryList();
                 createTerminalTab(); // Init first tab
@@ -2246,9 +2242,11 @@ let supabase;
             if (currentSessionId) await supabase.from('chat_messages').insert({ session_id: currentSessionId, role: 'user', content: message || (parts.length ? '[attachment]' : '') });
 
             // AI Request
-            const apiKey = document.getElementById('chat-api-key').value;
-            const baseUrl = document.getElementById('chat-base-url').value;
-            const model = document.getElementById('chat-model').value;
+            const provider = getProviderInputs();
+            if (!provider.baseUrl) {
+                alert('Chat provider is not configured. Set DEFAULT_BASE_URL (and DEFAULT_API_KEY) in deployment secrets.');
+                return;
+            }
             const aiMsgEl = addMessageToUI('assistant', '...');
             let aiContent = '';
 
@@ -2258,7 +2256,7 @@ let supabase;
                 const res = await fetch('/api/chat', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ messages: chatHistory, apiKey, baseUrl, model }),
+                    body: JSON.stringify({ messages: chatHistory, apiKey: provider.apiKey, baseUrl: provider.baseUrl, model: provider.model }),
                     signal: chatAbortController.signal
                 });
 
@@ -2325,23 +2323,31 @@ let supabase;
             if (sel) sel.value = t;
         }
 
+        function getQuickModelOverride() {
+            return (localStorage.getItem('chat_model_override_v1') || '').trim();
+        }
+
+        function getEffectiveChatModel() {
+            return getQuickModelOverride() || (appConfig?.default_model || '').trim() || 'gpt-3.5-turbo';
+        }
+
         function setQuickModel(model) {
             const m = (model || '').trim();
-            if (!m) return;
-            const main = document.getElementById('chat-model');
-            if (main) main.value = m;
+            if (m) localStorage.setItem('chat_model_override_v1', m);
+            else localStorage.removeItem('chat_model_override_v1');
+            const next = getEffectiveChatModel();
             const quick = document.getElementById('chat-model-quick');
-            if (quick) quick.value = m;
+            if (quick) quick.value = next;
             const agentQuick = document.getElementById('agent-model-quick');
-            if (agentQuick) agentQuick.value = m;
+            if (agentQuick) agentQuick.value = next;
         }
 
         function syncQuickModelFromSettings() {
-            const main = document.getElementById('chat-model');
+            const next = getEffectiveChatModel();
             const quick = document.getElementById('chat-model-quick');
+            if (quick && !quick.value) quick.value = next;
             const agentQuick = document.getElementById('agent-model-quick');
-            if (main && quick) quick.value = main.value || '';
-            if (main && agentQuick) agentQuick.value = main.value || '';
+            if (agentQuick && !agentQuick.value) agentQuick.value = next;
         }
 
         function getCodexThreadId() {
@@ -2675,8 +2681,6 @@ let supabase;
             renderAgentAttachments();
             scrollAgentToBottom();
 
-            const model = document.getElementById('chat-model').value;
-
             const aiMsgEl = addAgentMessageToUI('assistant', '...');
             let aiContent = '';
             try {
@@ -2825,12 +2829,12 @@ let supabase;
                     renderMarkdownInto(aiMsgEl, aiContent || (progress.length ? progress.slice(-18).join('\n') : ''));
                     agentChatHistory.push({ role: 'assistant', content: aiContent || '' });
                 } else {
-                    const apiKey = document.getElementById('chat-api-key').value;
-                    const baseUrl = document.getElementById('chat-base-url').value;
+                    const provider = getProviderInputs();
+                    if (!provider.baseUrl) throw new Error('Chat provider is not configured (DEFAULT_BASE_URL).');
                     const res = await fetch('/api/chat', {
                         method: 'POST',
                         headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ messages: agentChatHistory, apiKey, baseUrl, model }),
+                        body: JSON.stringify({ messages: agentChatHistory, apiKey: provider.apiKey, baseUrl: provider.baseUrl, model: provider.model }),
                         signal: agentAbortController.signal
                     });
                     const reader = res.body.getReader();
@@ -3254,8 +3258,7 @@ let supabase;
 
         // --- Provider & Models ---
         async function fetchModels({ quiet = true } = {}) {
-            const apiKey = document.getElementById('chat-api-key')?.value || '';
-            const baseUrl = document.getElementById('chat-base-url')?.value || '';
+            const { apiKey, baseUrl } = getProviderInputs();
             if (!baseUrl) return;
 
             const res = await fetch('/api/proxy/models', {
@@ -3282,10 +3285,14 @@ let supabase;
                 list.appendChild(opt);
             });
 
-            const modelEl = document.getElementById('chat-model');
-            if (modelEl && !modelEl.value && ids[0]) {
-                modelEl.value = ids[0];
-                syncQuickModelFromSettings();
+            const hasOverride = !!getQuickModelOverride();
+            const hasDefault = !!(appConfig?.default_model || '').trim();
+            if (!hasOverride && !hasDefault && ids[0]) {
+                localStorage.setItem('chat_model_override_v1', ids[0]);
+                const quick = document.getElementById('chat-model-quick');
+                if (quick && !quick.value) quick.value = ids[0];
+                const agentQuick = document.getElementById('agent-model-quick');
+                if (agentQuick && !agentQuick.value) agentQuick.value = ids[0];
             }
 
             if (!quiet) alert(`Fetched ${ids.length} models.`);
@@ -4782,9 +4789,9 @@ let supabase;
 
         function getProviderInputs() {
             return {
-                apiKey: document.getElementById('chat-api-key')?.value || '',
-                baseUrl: document.getElementById('chat-base-url')?.value || '',
-                model: document.getElementById('chat-model')?.value || 'gpt-3.5-turbo',
+                apiKey: (appConfig?.default_api_key || '').trim(),
+                baseUrl: (appConfig?.default_base_url || '').trim(),
+                model: getEffectiveChatModel(),
             };
         }
 

static/docs.html

@@ -32,43 +32,118 @@
   </header>
 
   <main class="mx-auto max-w-4xl px-5 py-10">
-    <div class="prose prose-invert max-w-none">
-      <h1>Get started</h1>
-      <p>This app uses <strong>Supabase Auth</strong>. In Hugging Face Spaces, configure secrets first.</p>
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+      <aside class="md:col-span-1">
+        <div class="text-xs font-semibold text-gray-400 uppercase">Docs</div>
+        <div id="docs-nav" class="mt-2 space-y-1 text-sm"></div>
+        <div class="mt-6 text-xs font-semibold text-gray-400 uppercase">API</div>
+        <div class="mt-2 space-y-1 text-sm">
+          <a class="text-blue-300 hover:text-blue-200" href="/api/docs">API docs (Swagger)</a>
+          <a class="text-blue-300 hover:text-blue-200" href="/api/openapi.json">OpenAPI JSON</a>
+        </div>
+      </aside>
 
-      <h2>Hugging Face Spaces setup</h2>
-      <ol>
-        <li>Go to <strong>Settings → Variables and secrets → Secrets</strong>.</li>
-        <li>Set:
-          <ul>
-            <li><code>SUPABASE_URL</code></li>
-            <li><code>SUPABASE_KEY</code> (anon key) or <code>SUPABASE_ANON_KEY</code></li>
-          </ul>
-        </li>
-        <li>Restart the Space.</li>
-      </ol>
+      <article id="docs-content" class="md:col-span-3 prose prose-invert max-w-none">
+        <h1>Get started</h1>
+        <p>This app uses <strong>Supabase Auth</strong>. In Hugging Face Spaces, configure secrets first.</p>
 
-      <h2>Login / Register</h2>
-      <ul>
-        <li>Open <a href="/login">/login</a> and sign in.</li>
-        <li>To return to the app automatically, use <a href="/login?next=%2Fapp">/login?next=/app</a>.</li>
-      </ul>
+        <h2>Hugging Face Spaces setup</h2>
+        <ol>
+          <li>Go to <strong>Settings → Variables and secrets → Secrets</strong>.</li>
+          <li>Set:
+            <ul>
+              <li><code>SUPABASE_URL</code></li>
+              <li><code>SUPABASE_KEY</code> (anon key) or <code>SUPABASE_ANON_KEY</code></li>
+              <li><code>DEFAULT_BASE_URL</code> (OpenAI-compatible, e.g. <code>https://router.huggingface.co/v1</code>)</li>
+              <li><code>DEFAULT_API_KEY</code> (optional)</li>
+            </ul>
+          </li>
+          <li>Restart the Space.</li>
+        </ol>
 
-      <h2>Password reset</h2>
-      <ul>
-        <li>Ensure Supabase Auth redirect URLs include <code>/login</code> for your Space domain.</li>
-        <li>The login page supports both recovery link formats (<code>#access_token=…</code> and <code>?code=…</code>).</li>
-      </ul>
+        <h2>Login / Register</h2>
+        <ul>
+          <li>Open <a href="/login">/login</a> and sign in.</li>
+          <li>To return to the app automatically, use <a href="/login?next=%2Fapp">/login?next=/app</a>.</li>
+        </ul>
 
-      <h2>More docs</h2>
-      <ul>
-        <li><a href="https://github.com/Akt-AI/autonomy-labs/blob/main/README.md" target="_blank" rel="noreferrer">README</a></li>
-        <li><a href="https://github.com/Akt-AI/autonomy-labs/blob/main/docs/TROUBLESHOOTING.md" target="_blank" rel="noreferrer">Troubleshooting</a></li>
-        <li><a href="https://github.com/Akt-AI/autonomy-labs/blob/main/docs/SECURITY_DEPLOYMENT.md" target="_blank" rel="noreferrer">Security deployment</a></li>
-      </ul>
+        <h2>Password reset</h2>
+        <ul>
+          <li>Ensure Supabase Auth redirect URLs include <code>/login</code> for your Space domain.</li>
+          <li>The login page supports both recovery link formats (<code>#access_token=…</code> and <code>?code=…</code>).</li>
+        </ul>
+      </article>
     </div>
   </main>
+
+  <script>
+    const navEl = document.getElementById('docs-nav');
+    const contentEl = document.getElementById('docs-content');
+    let cachedStart = null;
+
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text == null ? '' : String(text);
+      return div.innerHTML;
+    }
+
+    function showStart() {
+      if (cachedStart != null) {
+        contentEl.innerHTML = cachedStart;
+      }
+    }
+
+    async function showDoc(slug) {
+      const res = await fetch(`/api/app-docs/${encodeURIComponent(slug)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      const title = data?.title || slug;
+      const markdown = data?.markdown || '';
+      contentEl.innerHTML = `
+        <h1>${escapeHtml(title)}</h1>
+        <p><a href="#" id="docs-back">← Back</a></p>
+        <pre class="whitespace-pre-wrap bg-black/30 border border-white/10 rounded-xl p-4 text-sm">${escapeHtml(markdown)}</pre>
+      `;
+      const back = document.getElementById('docs-back');
+      if (back) back.onclick = (e) => { e.preventDefault(); showStart(); };
+    }
+
+    async function loadNav() {
+      if (!navEl || !contentEl) return;
+      cachedStart = contentEl.innerHTML;
+      navEl.innerHTML = '<div class="text-gray-500 text-sm">Loading…</div>';
+      try {
+        const res = await fetch('/api/app-docs');
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const data = await res.json();
+        const pages = Array.isArray(data?.pages) ? data.pages : [];
+        if (!pages.length) {
+          navEl.innerHTML = '<div class="text-gray-500 text-sm">No docs found.</div>';
+          return;
+        }
+        navEl.innerHTML = '';
+        pages.forEach((p) => {
+          const a = document.createElement('a');
+          a.href = '#';
+          a.className = 'block px-2 py-1 rounded-lg hover:bg-white/5 text-gray-200';
+          a.textContent = p.title || p.slug;
+          a.onclick = async (e) => {
+            e.preventDefault();
+            try {
+              await showDoc(p.slug);
+            } catch (err) {
+              alert(`Failed to load doc: ${err?.message || err}`);
+            }
+          };
+          navEl.appendChild(a);
+        });
+      } catch (err) {
+        navEl.innerHTML = '<div class="text-red-300 text-sm">Failed to load docs API.</div>';
+      }
+    }
+
+    loadNav();
+  </script>
 </body>
 
 </html>
-