lowlander 0.5.0 → 0.6.1

package/build/dashboard/client/main.js

@@ -1,6 +1,8 @@
 import A from 'aberdeen';
-import { current as route, go } from 'aberdeen/route';
+import * as route from 'aberdeen/route';
+import * as S from 'staffa';
 import { Connection } from 'lowlander/client';
+import { openCreateModal, openEditModal, openDeleteConfirm } from './crud.js';
 const SETTINGS_KEY = 'lowlander-dashboard';
 function loadSettings() {
     try {
@@ -26,29 +28,29 @@ const $state = A.proxy({
     authed: false,
     indexRefreshKey: 0,
     connecting: false,
+    connection: undefined,
 });
-let connection;
 let api;
 let authProxy;
-// URL-backed state helpers (reactive via A.route.current.search)
+// URL-backed state — reactive via aberdeen/route
 const url = {
-    get debug() { return route.search.debug === '1'; },
+    get debug() { return route.current.search.debug === '1'; },
     set debug(v) { setSearch('debug', v ? '1' : ''); },
-    get model() { return route.search.model || ''; },
+    get model() { return route.current.search.model || ''; },
     set model(v) { setSearch('model', v); },
-    get index() { return route.search.index || ''; },
+    get index() { return route.current.search.index || ''; },
     set index(v) { setSearch('index', v); },
-    get search() { return route.search.search || ''; },
+    get search() { return route.current.search.search || ''; },
     set search(v) { setSearch('search', v); },
-    get reverse() { return route.search.reverse === '1'; },
+    get reverse() { return route.current.search.reverse === '1'; },
     set reverse(v) { setSearch('reverse', v ? '1' : ''); },
-    get limit() { return parseInt(route.search.limit || '10', 10) || 10; },
+    get limit() { return parseInt(route.current.search.limit || '10', 10) || 10; },
     set limit(v) { setSearch('limit', v === 10 ? '' : String(v)); },
-    get pk() { return route.search.pk || ''; },
+    get pk() { return route.current.search.pk || ''; },
     set pk(v) { setSearch('pk', v); },
 };
 function setSearch(k, v) {
-    const s = route.search;
+    const s = route.current.search;
     if (v === '' || v === undefined)
         delete s[k];
     else
@@ -56,74 +58,46 @@ function setSearch(k, v) {
 }
 function effectiveIndex() { return url.index || '(primary)'; }
 function effectivePk() { return url.pk === '-' ? '' : url.pk; }
-let tableClass = '';
-function styles() {
-    A.setSpacingCssVars();
-    A.cssVars.bg = '#0f1117';
-    A.cssVars.panel = '#181b24';
-    A.cssVars.panel2 = '#1f2330';
-    A.cssVars.fg = '#e5e7eb';
-    A.cssVars.muted = '#94a3b8';
-    A.cssVars.accent = '#60a5fa';
-    A.cssVars.accent2 = '#34d399';
-    A.cssVars.danger = '#f87171';
-    A.cssVars.border = '#2a2f3d';
-    A.insertGlobalCss({
-        'html,body': 'm:0 p:0 bg:$bg fg:$fg font-family: -apple-system, system-ui, sans-serif; font-size:14px; h:100vh',
-        'body': 'display:flex flex-direction:column',
-        'a': 'color:$accent text-decoration:none cursor:pointer',
-        'a:hover': 'text-decoration:underline',
-        'input,select,textarea,button': 'font-family:inherit font-size:inherit',
-        'input[type=text],input[type=password],input:not([type]),select,textarea': 'bg:$panel2 fg:$fg border: 1px solid $border; r:4px p: 6px 8px; outline:none box-sizing:border-box w:100%',
-        'input:focus,textarea:focus,select:focus': 'border-color:$accent',
-        'button': 'bg:$accent fg:#0b1220 border:0 r:4px p: 6px 12px; cursor:pointer font-weight:600',
-        'button:hover': 'opacity:0.9',
-        'button.ghost': 'bg:transparent fg:$accent border: 1px solid $border;',
-        'code,pre': 'font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12.5px',
-        'pre': 'bg:#0b0d14 p:$3 r:6px overflow:auto m:0',
-        '.tag': 'display:inline-block bg:$panel2 fg:$muted p: 1px 6px; r:3px font-size:11px ml:$1',
-        '.sidebarSel': 'bg:#1e3251 box-shadow: inset 3px 0 0 $accent;',
-        '.row': 'display:flex gap:$2 align-items:center',
-        '.col': 'display:flex flex-direction:column gap:$2',
-        'ul': 'margin-block-start:0 margin-block-end:0',
-    });
-    tableClass = A.insertCss({
-        '&': 'w:100% border-collapse:collapse font-size:12.5px',
-        '& th,& td': 'text-align:left p: 4px 8px; border-bottom: 1px solid $border; vertical-align:top',
-        '& th': 'bg:$panel2 fg:$muted font-weight:600',
-        '& tbody tr': 'cursor:default',
-        '& tbody tr:hover': 'bg:#ffffff08',
-        '& tbody tr.selectable': 'cursor:pointer',
-        '& tbody tr.selected': 'bg:#1e3251',
-        '& tbody tr.selected td:first-child': 'border-left: 3px solid $accent; padding-left: 5px;',
-    });
-}
+// Table styling — Staffa provides the base (border-collapse, th/td padding/borders,
+// thead stronger border). We only add size, cursor, hover, and selection states.
+const tableClass = A.insertCss({
+    '&': 'w:100% font-size:12.5px',
+    '& tbody tr': 'cursor:default',
+    '& tbody tr:hover': 'background: color-mix(in srgb, $s-fg 5%, transparent);',
+    '& tbody tr.selectable': 'cursor:pointer',
+    '& tbody tr.selected': 'background: color-mix(in srgb, $s-accent 15%, transparent);',
+    '& tbody tr.selected td:first-child': 'border-left: 3px solid $s-accent; padding-left: 5px;',
+});
+// ─── Login ───────────────────────────────────────────────────────────────────
 function login() {
-    A(() => {
-        if ($state.connecting) {
-            A('div', 'display:flex align-items:center justify-content:center h:100vh fg:$muted', '#Connecting…');
-            return;
-        }
-        A('div', 'display:flex align-items:center justify-content:center h:100vh', () => {
-            A('form', 'bg:$panel p:$4 r:8px w:360px border: 1px solid $border; display:flex flex-direction:column gap:$3', 'submit=', (e) => { e.preventDefault(); attemptLogin(); }, () => {
-                A('h2#Lowlander Dashboard', 'm:0');
-                A('label', () => {
-                    A('span#WebSocket URL', 'fg:$muted display:block mb:$1');
-                    A('input type=text bind=', A.ref($state, 'wsUrl'));
-                });
-                A('label', () => {
-                    A('span#Password', 'fg:$muted display:block mb:$1');
-                    A('input type=password bind=', A.ref($state, 'password'), 'autofocus=');
-                });
-                A(() => {
-                    if ($state.loginError)
-                        A('div', 'fg:$danger', () => A('text=', $state.loginError));
-                });
-                A('button type=submit', () => {
-                    A(() => A($state.connected && !$state.authed ? 'text=Checking…' : 'text="Log in"'));
+    S.main({
+        title: 'Lowlander Dashboard',
+        maxWidth: '24rem',
+        content: () => {
+            A(() => {
+                if ($state.connecting && !$state.connection?.getError()) {
+                    A('p', 'text-align:center fg:$s-fg-muted', '#Connecting…');
+                    return;
+                }
+                S.form({
+                    submit: () => attemptLogin(),
+                    content: () => {
+                        S.textline({ label: 'WebSocket URL', bind: A.ref($state, 'wsUrl') });
+                        S.textline({ label: 'Password', type: 'password', bind: A.ref($state, 'password'), inputAttrs: 'autofocus=autofocus' });
+                        A(() => {
+                            const err = $state.connection?.getError() || $state.loginError;
+                            if (err)
+                                A('p', 'fg:$s-danger m:0', 'text=', err);
+                        });
+                    },
+                    actions: () => S.button({
+                        content: $state.connected && !$state.authed ? 'Checking…' : 'Log in',
+                        type: 'submit',
+                        disabled: $state.connected && !$state.authed,
+                    }),
                 });
             });
-        });
+        },
     });
 }
 async function attemptLogin() {
@@ -131,12 +105,12 @@ async function attemptLogin() {
     $state.loginError = '';
     saveSettings({ wsUrl: $state.wsUrl, password: $state.password });
     try {
-        if (connection)
-            connection.ws?.close?.();
+        if ($state.connection)
+            $state.connection.ws?.close?.();
     }
     catch { }
-    connection = new Connection($state.wsUrl);
-    api = connection.api;
+    $state.connection = new Connection($state.wsUrl);
+    api = $state.connection.api;
     $state.connected = false;
     $state.authed = false;
     const proxy = api._dashboard($state.password);
@@ -152,7 +126,7 @@ async function attemptLogin() {
         $state.loginError = err?.message || 'Login failed';
         $state.connected = false;
         $state.authed = false;
-        connection = undefined;
+        $state.connection = undefined;
         api = undefined;
         authProxy = undefined;
     }
@@ -163,125 +137,125 @@ function logout() {
     $state.password = '';
     saveSettings({ wsUrl: $state.wsUrl, password: '' });
     try {
-        connection?.ws?.close?.();
+        $state.connection?.ws?.close?.();
     }
     catch { }
-    connection = undefined;
+    $state.connection = undefined;
     api = undefined;
     authProxy = undefined;
 }
-function sidebar() {
-    A('aside', 'w:280px bg:$panel border-right: 1px solid $border; display:flex flex-direction:column overflow:hidden', () => {
-        A('div', 'p:$3 border-bottom: 1px solid $border; display:flex justify-content:space-between align-items:center', () => {
-            A('strong#Lowlander');
-            A('button.ghost#Logout', 'click=', () => logout());
-        });
-        A('div', 'overflow:auto flex:1 p:$2', () => {
-            if (!authProxy)
-                return;
-            sidebarModels();
-            A('div', 'border-top: 1px solid $border; mt:$2 pt:$2', () => {
-                A('div', 'p: 6px 8px; r:4px cursor:pointer', 'click=', () => { go({ path: route.path, search: { debug: '1' } }); }, () => {
-                    A(() => A('.sidebarSel=', url.debug));
-                    A('div', 'display:flex justify-content:space-between align-items:baseline', () => {
-                        A('span#⬡ WarpSocket debug');
-                    });
-                });
-            });
-        });
-    });
-}
-function sidebarModels() {
+// ─── Dashboard (authenticated) ───────────────────────────────────────────────
+// Sidebar nav: reactive model list. Rendered as a Content function so drawMenu
+// calls it inside a reactive scope; models.busy/.value/.error drive re-renders.
+const navModels = () => {
     const models = authProxy.serverProxy.listModels();
     A(() => {
         if (models.busy) {
-            A('div', 'fg:$muted', '#Loading…');
+            A('p', 'p:$2 fg:$s-fg-muted font-size:0.9em m:0', '#Loading…');
             return;
         }
         if (models.error) {
-            A('div', 'fg:$danger', 'text=', models.error.message);
+            A('p', 'p:$2 fg:$s-danger font-size:0.9em m:0', 'text=', models.error.message);
             return;
         }
-        const list = models.value || [];
-        for (const m of list) {
-            A('div', 'p: 6px 8px; r:4px cursor:pointer', 'click=', () => { go({ path: route.path, search: { model: m.tableName } }); }, () => {
-                A(() => A('.sidebarSel=', !url.debug && url.model === m.tableName));
-                A('div', 'display:flex justify-content:space-between align-items:baseline', () => {
-                    A('span', 'text=', m.tableName);
-                    A('span.tag', 'text=', `${m.fieldCount}f ${m.indexCount}i ${m.streamTypeCount}s`);
-                });
+        for (const m of (models.value ?? [])) {
+            A('button.s-menu-item type=button', 'justify-content:space-between', () => {
+                A(() => { if (!url.debug && url.model === m.tableName)
+                    A('aria-current=page'); });
+                A('click=', () => route.go({ path: route.current.path, search: { model: m.tableName } }));
+                A('span', 'text=', m.tableName);
+                A('span', 'font-size:0.78em opacity:0.65', 'text=', `${m.fieldCount}f ${m.indexCount}i ${m.streamTypeCount}s`);
             });
         }
     });
-}
-function mainArea() {
-    A('main', 'flex:1 overflow:auto p:$4', () => {
-        if (!authProxy)
-            return;
-        if (url.debug)
-            debugView();
-        else if (url.model)
-            modelDetail();
-        else
-            A('div', 'fg:$muted p:$4 text-align:center', '#Select a model from the sidebar');
+};
+const navDebug = () => {
+    A('button.s-menu-item type=button', () => {
+        A(() => { if (url.debug)
+            A('aria-current=page'); });
+        A('click=', () => route.go({ path: route.current.path, search: { debug: '1' } }));
+        A('span.s-menu-icon aria-hidden=true #⬡');
+        A('#WarpSocket debug');
+    });
+};
+function dashboard() {
+    S.main({
+        icon: '⬡',
+        title: 'Lowlander',
+        menu: () => S.button({ content: 'Logout', attrs: '.neutral .outlined .small', click: logout }),
+        nav: { items: [navModels, { separator: true }, navDebug] },
+        content: () => {
+            if (url.debug)
+                debugView();
+            else if (url.model)
+                modelDetail();
+            else
+                A('p', 'fg:$s-fg-muted text-align:center mt:$4', '#Select a model from the sidebar');
+        },
     });
 }
+// ─── Model detail ─────────────────────────────────────────────────────────────
 function modelDetail() {
     const name = url.model;
     const info = authProxy.serverProxy.getModel(name);
     A(() => {
         if (info.busy) {
-            A('div', 'fg:$muted', '#Loading…');
+            A('p', 'fg:$s-fg-muted', '#Loading…');
             return;
         }
         if (info.error) {
-            A('div', 'fg:$danger', 'text=', info.error.message);
+            A('p', 'fg:$s-danger', 'text=', info.error.message);
             return;
         }
         const m = info.value;
         if (!m)
             return;
-        A('h2', 'm:0 mb:$2', 'text=', m.tableName);
-        A('section', 'mb:$4', () => {
-            A('h3#Fields', 'm:0 mb:$2 fg:$muted font-weight:600');
-            A('table', tableClass, () => {
-                A('thead tr', () => { A('th#Name'); A('th#Type'); A('th#Linked'); A('th#Default'); A('th#Description'); });
-                A('tbody', () => {
-                    for (const f of m.fields) {
-                        A('tr', () => {
-                            A('td', () => A('code', 'text=', f.name));
-                            A('td', 'fg:$accent2', 'text=', f.type.display);
-                            A('td', () => { const lm = f.type.linkedModel; if (lm)
-                                modelLink(lm); });
-                            A('td', 'text=', f.hasDefault ? '✓' : '');
-                            A('td', 'fg:$muted', 'text=', f.description || '');
-                        });
-                    }
+        S.box({
+            header: m.tableName,
+            content: () => {
+                A('table', tableClass, () => {
+                    A('thead tr', () => { A('th#Name'); A('th#Type'); A('th#Linked'); A('th#Default'); A('th#Description'); });
+                    A('tbody', () => {
+                        for (const f of m.fields) {
+                            A('tr', () => {
+                                A('td', () => A('code', 'text=', f.name));
+                                A('td', 'fg:$s-success', 'text=', f.type.display);
+                                A('td', () => { const lm = f.type.linkedModel; if (lm)
+                                    modelLink(lm); });
+                                A('td', 'text=', f.hasDefault ? '✓' : '');
+                                A('td', 'fg:$s-fg-muted', 'text=', f.description || '');
+                            });
+                        }
+                    });
                 });
-            });
+            },
         });
-        A('section', 'mb:$4', () => {
-            A('h3#Indexes', 'm:0 mb:$2 fg:$muted font-weight:600');
-            indexesTable(m);
+        S.box({
+            header: 'Indexes',
+            content: () => indexesTable(m),
         });
         A(() => {
             const cur = effectiveIndex();
             const idx = m.indexes.find((i) => i.name === cur);
             if (!idx)
                 return;
-            A('section', 'mb:$4', () => {
-                A('h3', 'm:0 mb:$2 fg:$muted font-weight:600', 'text=', `Data for ${cur}`);
-                indexBrowser(m, idx);
+            S.box({
+                header: () => {
+                    A('span', 'flex:1', 'text=', `Data · ${cur}`);
+                    S.button({ content: '+ New', attrs: '.outlined .small', click: () => {
+                            openCreateModal(authProxy, m.tableName, m.fields, () => { $state.indexRefreshKey++; });
+                        } });
+                },
+                content: () => indexBrowser(m, idx),
             });
         });
         if (m.streamTypes.length)
-            A('section', 'mb:$4', () => {
-                A('h3#Stream types', 'm:0 mb:$2 fg:$muted font-weight:600');
-                streamTypesTable(m);
+            S.box({
+                header: 'Stream types',
+                content: () => streamTypesTable(m),
             });
     });
 }
-// Render a clickable link to another model
 function modelLink(modelName, pk, display) {
     A('a', 'click=', (e) => {
         e.preventDefault();
@@ -291,7 +265,7 @@ function modelLink(modelName, pk, display) {
             search.search = jsonStringify(pk);
             search.limit = 1;
         }
-        go({ path: route.path, search });
+        route.go({ path: route.current.path, search });
     }, 'text=', display ?? modelName);
 }
 function jsonStringify(v) {
@@ -318,7 +292,7 @@ function indexesTable(m) {
                 }, () => {
                     A(() => A('.selected=', effectiveIndex() === idx.name));
                     A('td', () => A('code', 'text=', idx.name));
-                    A('td', 'fg:$accent2', 'text=', idx.info.kind);
+                    A('td', 'fg:$s-success', 'text=', idx.info.kind);
                     A('td', 'text=', idx.info.fields.join(', ') || '(computed)');
                 });
             }
@@ -352,7 +326,7 @@ function streamTypesTable(m) {
 }
 function streamFieldsInline(sel, fieldByName) {
     if (sel === true) {
-        A('span', 'fg:$muted', '#(scalar)');
+        A('span', 'fg:$s-fg-muted', '#(scalar)');
         return;
     }
     if (!sel || typeof sel !== 'object') {
@@ -360,20 +334,20 @@ function streamFieldsInline(sel, fieldByName) {
         return;
     }
     for (const [k, v] of Object.entries(sel)) {
-        if (v === true) {
-            A('div', 'text=', k);
-        }
-        else if (typeof v === 'number') {
+        if (typeof v === 'number') {
             const linked = fieldByName[k]?.type?.linkedModel;
-            A(`div #${k}→`, () => {
+            A(`div#${k}→`, () => {
                 if (linked)
                     modelLink(linked, undefined, v.toString());
                 else
                     A('#?');
             });
         }
+        else if (v === false) {
+            A(`div#${k}*`);
+        }
         else {
-            A(`div #${k}={...}`);
+            A(`div#${k}`);
         }
     }
 }
@@ -381,7 +355,7 @@ function streamLiveCell(modelName, streamTypeId) {
     A(() => {
         const pkRaw = effectivePk();
         if (!pkRaw) {
-            A('span', 'fg:$muted', '#(select a row)');
+            A('span', 'fg:$s-fg-muted', '#(select a row)');
             return;
         }
         let pk;
@@ -394,64 +368,69 @@ function streamLiveCell(modelName, streamTypeId) {
         const $stream = authProxy.serverProxy.streamRecord(modelName, streamTypeId, pk);
         A(() => {
             if ($stream.busy) {
-                A('span', 'fg:$muted', '#…');
+                A('span', 'fg:$s-fg-muted', '#…');
                 return;
             }
             if ($stream.error) {
-                A('span', 'fg:$danger', 'text=', $stream.error.message);
+                A('span', 'fg:$s-danger', 'text=', $stream.error.message);
                 return;
             }
             A.dump($stream.value);
         });
     });
 }
+// ─── Index browser ────────────────────────────────────────────────────────────
 function indexBrowser(m, idx) {
     const modelName = m.tableName;
     const indexName = idx.name;
-    A('div', 'display:flex flex-direction:column', () => {
-        A('div', 'display:flex flex-wrap:wrap gap:$2 align-items:center mb:$2', () => {
-            A('input type=text flex:1 min-w:200px placeholder=search', 'value=', A.peek(() => url.search), 'input=', (e) => { url.search = e.target.value; url.limit = 10; });
-            A('label', 'display:flex align-items:center gap:$1 white-space:nowrap', () => {
-                A('input type=checkbox', 'checked=', url.reverse, 'change=', (e) => url.reverse = e.target.checked);
-                A('span', 'fg:$muted', '#reverse');
-            });
-            A('button.ghost', 'p: 2px 8px; font-size:11px', '#↺ refresh', 'click=', () => $state.indexRefreshKey++);
+    const searchBind = {
+        get value() { return url.search; },
+        set value(v) { url.search = String(v); url.limit = 10; },
+    };
+    const reverseBind = {
+        get value() { return url.reverse; },
+        set value(v) { url.reverse = Boolean(v); },
+    };
+    A('div', 'display:flex flex-direction:column gap:$3', () => {
+        A('div', 'display:flex flex-wrap:wrap gap:$2 align-items:center', () => {
+            S.textline({ placeholder: 'search', attrs: 'flex:1 min-w:180px', bind: searchBind });
+            S.checkbox({ label: 'reverse', bind: reverseBind });
+            S.button({ content: '↺', attrs: '.outlined .small', ariaLabel: 'Refresh',
+                click: () => $state.indexRefreshKey++ });
         });
         A(() => {
             void $state.indexRefreshKey;
-            const opts = {
-                search: parseMaybe(url.search),
-                reverse: url.reverse,
-                limit: url.limit,
-            };
+            const opts = { search: parseMaybe(url.search), reverse: url.reverse, limit: url.limit };
             const rows = authProxy.serverProxy.findRecords(modelName, indexName, opts);
             A(() => {
                 if (rows.busy) {
-                    A('div', 'fg:$muted', '#Loading…');
+                    A('p', 'fg:$s-fg-muted', '#Loading…');
                     return;
                 }
                 if (rows.error) {
-                    A('div', 'fg:$danger', 'text=', rows.error.message);
+                    A('p', 'fg:$s-danger', 'text=', rows.error.message);
                     return;
                 }
                 const r = rows.value;
                 if (!r)
                     return;
-                // Auto-select first row when no explicit selection
                 if (!url.pk && r.rows.length > 0) {
                     url.pk = jsonStringify(r.rows[0].pk);
                     return;
                 }
-                A('div', 'fg:$muted mb:$2 font-size:12px', 'text=', `${r.rows.length} rows (scanned ${r.scanned})`);
+                A('p', 'fg:$s-fg-muted font-size:0.85em m:0', 'text=', `${r.rows.length} rows (scanned ${r.scanned})`);
                 if (!r.rows.length) {
-                    A('div', 'fg:$muted', '#(empty)');
+                    A('p', 'fg:$s-fg-muted m:0', '#(empty)');
                     return;
                 }
                 A('div', 'overflow:auto', () => {
                     A('table', tableClass, () => {
                         const cols = Object.keys(r.rows[0].values);
-                        A('thead tr', () => { for (const c of cols)
-                            A('th', 'text=', c); });
+                        A('thead tr', () => {
+                            for (const c of cols)
+                                A('th', 'text=', c);
+                            A('th', 'w:1px');
+                        });
                         A('tbody', () => {
                             for (const row of r.rows) {
                                 const pkStr = jsonStringify(row.pk);
@@ -460,19 +439,37 @@ function indexBrowser(m, idx) {
                                     for (const c of cols) {
                                         A('td', () => A.dump(wrapForDump(row.values[c])));
                                     }
+                                    A('td', 'text-align:right white-space:nowrap', () => {
+                                        S.button({ content: '✎', attrs: '.outlined .small mr:$1',
+                                            ariaLabel: 'Edit', click: (e) => {
+                                                e.stopPropagation();
+                                                openEditModal(authProxy, modelName, m.fields, row.pk, row.values, () => {
+                                                    $state.indexRefreshKey++;
+                                                });
+                                            },
+                                        });
+                                        S.button({ content: '✕', attrs: '.danger .outlined .small',
+                                            ariaLabel: 'Delete', click: (e) => {
+                                                e.stopPropagation();
+                                                openDeleteConfirm(authProxy, modelName, row.pk, pkStr, () => {
+                                                    $state.indexRefreshKey++;
+                                                    if (effectivePk() === pkStr)
+                                                        url.pk = '-';
+                                                });
+                                            },
+                                        });
+                                    });
                                 });
                             }
                         });
                     });
                 });
-                // 'more' button
                 if (r.rows.length >= url.limit) {
-                    A('div', 'mt:$2', () => {
-                        A('button.ghost', 'p: 2px 8px; font-size:11px', 'click=', () => {
-                            const cur = url.limit;
-                            url.limit = Math.min(cur * 5, cur + 250);
-                        }, () => A('span', 'text=', `+ more (currently limit ${url.limit})`));
-                    });
+                    A(() => S.button({
+                        content: `+ more (currently limit ${url.limit})`,
+                        attrs: '.outlined .small',
+                        click: () => { const cur = url.limit; url.limit = Math.min(cur * 5, cur + 250); },
+                    }));
                 }
             });
         });
@@ -509,57 +506,56 @@ function parseMaybe(s) {
     catch { }
     return s;
 }
+// ─── Debug view ───────────────────────────────────────────────────────────────
 function debugView() {
-    const $mode = A.proxy({ v: 'channels' });
-    A('h2#WarpSocket debug', 'm:0 mb:$3');
-    A('div', '.row mb:$3', () => {
-        for (const t of ['channels', 'sockets', 'workers', 'kv']) {
-            A('button click=', () => $mode.v = t, () => {
-                A(() => A($mode.v === t ? 'bg:$accent fg:#0b1220' : 'bg:$panel2 fg:$fg border: 1px solid $border;'));
-                A('text=', t);
-            });
-        }
-    });
-    A(() => {
-        const debugInfo = authProxy.serverProxy.getDebugState($mode.v);
-        A(() => {
-            if (debugInfo.busy) {
-                A('div', 'fg:$muted', '#Loading…');
-                return;
-            }
-            if (debugInfo.error) {
-                A('div', 'fg:$danger', 'text=', debugInfo.error.message);
-                return;
-            }
-            const data = A.unproxy(debugInfo.value);
-            if (!data)
-                return;
-            const keySet = new Set();
-            for (const obj of Object.values(data)) {
-                if (obj && typeof obj === 'object' && !(obj instanceof Uint8Array))
-                    for (const k of Object.keys(obj))
-                        keySet.add(k);
-            }
-            const cols = [...keySet];
-            A('div', 'overflow:auto', () => {
-                A('table', tableClass, () => {
-                    A('thead tr', () => {
-                        A('th##');
-                        for (const k of cols)
-                            A('th', 'text=', k);
-                    });
-                    A('tbody', () => {
-                        for (const [idx, obj] of Object.entries(data)) {
-                            A('tr', () => {
-                                A('td', () => A('code', 'text=', idx));
+    const $mode = A.proxy({ value: 'channels' });
+    S.tabs({
+        bind: $mode,
+        tabs: ['channels', 'sockets', 'workers', 'kv'].map(t => ({
+            id: t,
+            label: t,
+            content: () => {
+                const debugInfo = authProxy.serverProxy.getDebugState(t);
+                A(() => {
+                    if (debugInfo.busy) {
+                        A('p', 'fg:$s-fg-muted', '#Loading…');
+                        return;
+                    }
+                    if (debugInfo.error) {
+                        A('p', 'fg:$s-danger', 'text=', debugInfo.error.message);
+                        return;
+                    }
+                    const data = A.unproxy(debugInfo.value);
+                    if (!data)
+                        return;
+                    const keySet = new Set();
+                    for (const obj of Object.values(data)) {
+                        if (obj && typeof obj === 'object' && !(obj instanceof Uint8Array))
+                            for (const k of Object.keys(obj))
+                                keySet.add(k);
+                    }
+                    const cols = [...keySet];
+                    A('div', 'overflow:auto', () => {
+                        A('table', tableClass, () => {
+                            A('thead tr', () => {
+                                A('th##');
                                 for (const k of cols)
-                                    A('td', 'font-size:12px font-family:monospace', 'text=', debugCellText(obj?.[k]));
+                                    A('th', 'text=', k);
                             });
-                        }
+                            A('tbody', () => {
+                                for (const [idx, obj] of Object.entries(data)) {
+                                    A('tr', () => {
+                                        A('td', () => A('code', 'text=', idx));
+                                        for (const k of cols)
+                                            A('td', 'font-size:12px font-family:monospace', 'text=', debugCellText(obj?.[k]));
+                                    });
+                                }
+                            });
+                        });
                     });
                 });
-            });
-        });
+            },
+        })),
     });
 }
 function debugCellText(value) {
@@ -570,7 +566,6 @@ function debugCellText(value) {
     if (typeof value === 'object') {
         if (value.type === 'Buffer' && Array.isArray(value.data))
             return escapeBytes(value.data);
-        // Buffer-like (proxied Uint8Array): sequential integer keys
         const keys = Object.keys(value);
         if (!Array.isArray(value) && keys.length > 0 && keys.length <= 4096 && keys.every((k, i) => k === String(i))) {
             const arr = [];
@@ -606,16 +601,13 @@ function escapeBytes(bytes) {
     }
     return s;
 }
-styles();
+// ─── Mount ────────────────────────────────────────────────────────────────────
 A.mount(document.body, () => {
     if (!$state.authed) {
         login();
         return;
     }
-    A('div', 'display:flex flex-direction:row h:100vh w:100vw overflow:hidden', () => {
-        sidebar();
-        mainArea();
-    });
+    dashboard();
 });
 if ($state.password) {
     attemptLogin();