anentrypoint-design 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/community-app.js

@@ -6,6 +6,7 @@
 // data and receives action callbacks.
 //
 // Adapter contract (all fields optional; the app degrades when one is absent):
+//   adapter.brandName  // string shown in the topbar brand span; defaults to 'app'
 //   adapter.get() -> snapshot {
 //     channels, categories, servers, currentChannel, currentServerId, homeMode,
 //     messages,  // each message may carry reactions: [{emoji, count, users?, you?}]
@@ -60,6 +61,10 @@ export function mountCommunityApp(root, adapter = {}) {
     const get = typeof adapter.get === 'function' ? adapter.get : () => ({});
     const A = adapter.actions || {};
     const H = adapter.helpers || {};
+    // The topbar brand name was hardcoded 'zellous' -- a design-system
+    // component should not bake in one consumer's name. Any host can supply
+    // its own via adapter.brandName; 'app' is a neutral, non-branded fallback.
+    const brandName = adapter.brandName || 'app';
     const avatarColor = H.avatarColor || (() => 'var(--accent)');
     const initial = H.initial || ((n) => String(n || '?').slice(0, 1).toUpperCase());
     const formatTime = H.formatTime || ((t) => new Date(t || Date.now()).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' }));
@@ -235,7 +240,7 @@ export function mountCommunityApp(root, adapter = {}) {
             h('a', { href: '#app-main', class: 'skip-link' }, 'skip to main content'),
             // top bar (sole app chrome above the chat-head)
             h('header', { class: 'app-topbar' },
-                h('span', { class: 'brand' }, 'zellous', h('span', { class: 'slash' }, ' / '), h('span', {}, ch.name || 'general')),
+                h('span', { class: 'brand' }, brandName, h('span', { class: 'slash' }, ' / '), h('span', {}, ch.name || 'general')),
                 h('span', {}),
                 h('nav', {},
                     h('a', { href: '../', title: 'Home', onclick: (e) => { if (A.goHome) { e.preventDefault(); A.goHome(); } } }, 'home'),

package/src/components/content/charts.js

@@ -6,7 +6,7 @@ import * as webjsx from '../../../vendor/webjsx/index.js';
 import { Icon } from '../shell.js';
 const h = webjsx.createElement;
 
-// items: [n, label] or [n, label, {delta, tone: 'up'|'down', spark: number[], invert}]
+// items: [n, label] or [n, label, {delta, tone: 'up'|'down', spark: number[], invert, glyph}]
 // meta is optional and additive — every existing 2-tuple call site is untouched.
 // `tone` always drives the arrow glyph (it mirrors the delta's own arithmetic
 // sign, so the arrow never contradicts the figure beside it). `invert` is a
@@ -15,12 +15,16 @@ const h = webjsx.createElement;
 // relative to tone while the arrow direction is left alone — a rising error
 // rate still shows an up-arrow (the number went up) but in the bad/danger
 // color, not the good/success color the raw arithmetic sign would imply.
+// `meta.glyph` is an optional icon NAME (resolved via Icon()) giving each
+// tile a small identifying glyph in its top-right corner — purely additive,
+// omitted call sites render exactly as before (no icon slot in the DOM).
 export function Kpi({ items = [], emptyText = 'no metrics yet' }) {
     if (!items.length) return h('div', { class: 'empty' }, emptyText);
     return h('div', { class: 'kpi' }, ...items.map(([n, l, meta], i) => {
         const isUp = meta && meta.tone !== 'down';
         const good = meta && meta.invert ? !isUp : isUp;
         return h('div', { key: i, class: 'kpi-card' },
+            meta && meta.glyph ? h('div', { class: 'kpi-glyph' }, Icon(meta.glyph, { size: 16 })) : null,
             h('div', { class: 'num' }, String(n)),
             h('div', { class: 'lbl' }, l),
             meta && (meta.delta != null || meta.spark)

package/src/components/content/table.js

@@ -29,11 +29,11 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
     // component has no opinion on comparator/locale/type - it only renders the
     // control and current state). A docstudio-style dense admin table needs
     // sortable columns; Table previously had no way to express that at all.
-    const thFor = (hd, i) => {
-        if (!sortable || !onSort) return h('th', { key: i, scope: 'col' }, hd);
+    const thFor = (hd, i, isNum) => {
+        if (!sortable || !onSort) return h('th', { key: i, scope: 'col', class: isNum ? 'is-num' : null }, hd);
         const isActive = sortKey === i;
         const ariaSort = isActive ? (sortDir === 'desc' ? 'descending' : 'ascending') : 'none';
-        return h('th', { key: i, scope: 'col', 'aria-sort': ariaSort },
+        return h('th', { key: i, scope: 'col', 'aria-sort': ariaSort, class: isNum ? 'is-num' : null },
             h('button', { type: 'button', class: 'ds-table-sort-btn' + (isActive ? ' is-active' : ''), onclick: () => onSort(i) },
                 h('span', { class: 'ds-table-sort-label' }, hd),
                 isActive ? Icon(sortDir === 'desc' ? 'chevron-down' : 'chevron-up', { size: 12 }) : null));
@@ -50,13 +50,23 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
     // NOTE this fires only when the table actually overflows, which is
     // viewport-dependent — it reproduces at 1024x768 but not at 1280x900,
     // which is why it surfaced only in CI's viewport.
+    // A column is numeric when every row's value in it is a plain
+    // integer/decimal (optionally signed) — checked across the whole column,
+    // not per-cell, so a mixed column (e.g. one row's count rendered as a
+    // Chip vnode) never right-aligns only some of its cells.
+    const NUM_RE = /^-?\d+(\.\d+)?$/;
+    const isNumericCol = (j) => rows.every((row) => {
+        const c = row[j];
+        return c != null && typeof c !== 'object' && NUM_RE.test(String(c).trim());
+    });
+    const numericCols = headers.map((_, j) => isNumericCol(j));
     return h('div', {
         class: wrapClass,
         tabindex: '0',
         role: 'group',
         'aria-label': 'table, scrollable',
     }, h('table', {},
-        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => thFor(hd, i)))),
+        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => thFor(hd, i, numericCols[i])))),
         h('tbody', {}, ...rows.map((row, i) => h('tr', {
             key: i,
             class: onRowClick ? 'clickable' : '',
@@ -64,7 +74,7 @@ export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothin
             // Space scrolls by default — preventDefault on Space (and Enter) so
             // keyboard activation matches click without page jump.
             ...(onRowClick ? { tabindex: '0', role: 'button', 'aria-label': 'open ' + labelFor(row, i), onkeydown: (e) => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); onRowClick(i); } } } : {})
-        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c)))))))));
+        }, ...row.map((c, j) => h('td', { key: j, class: numericCols[j] ? 'is-num' : null }, c == null ? '' : (typeof c === 'object' ? c : String(c)))))))));
 }
 
 // HealthTable — generic health-check table: given an arbitrary

package/src/components/freddie/pages-telemetry.js

@@ -69,7 +69,7 @@ export const logs = makePage((ctx) => {
         return [
             PageHeader({
                 title: 'logs', lede: 'live JSONL log tail — /api/logs/stream',
-                right: s.connected ? Chip({ tone: 'ok', children: 'live' }) : Chip({ tone: 'miss', children: 'reconnecting…' }),
+                right: s.connected ? Chip({ tone: 'live', children: 'live' }) : Chip({ tone: 'miss', children: 'reconnecting…' }),
             }),
             s.wsError ? refreshError(s.wsError) : null,
             h('div', { class: 'ds-toolbar' },

package/src/components/shell/atoms.js

@@ -154,8 +154,12 @@ export function Lede({ children }) {
 
 export function Dot({ tone = 'on' }) {
     const isOn = tone === 'on' || tone === 'live';
-    const cls = 'ds-dot ' + (isOn ? 'ds-dot-on' : 'ds-dot-off');
-    const statusLabel = isOn ? 'on status indicator' : 'off status indicator';
+    // 'live' gets its own visual modifier (ds-dot-live, sky hue) layered on
+    // top of ds-dot-on so a live-broadcast indicator is never visually
+    // identical to a plain "this thing is on" status dot — same split
+    // rationale as .chip.tone-live / .ds-badge.tone-live.
+    const cls = 'ds-dot ' + (isOn ? 'ds-dot-on' : 'ds-dot-off') + (tone === 'live' ? ' ds-dot-live' : '');
+    const statusLabel = tone === 'live' ? 'live status indicator' : (isOn ? 'on status indicator' : 'off status indicator');
     // Drawn as a CSS circle (.ds-dot) — no decorative text glyph.
     return h('span', { class: cls, role: 'img', 'aria-label': statusLabel });
 }

package/src/css/app-shell/hero-content.css

@@ -348,6 +348,12 @@ table tr.clickable:focus-visible {
   outline-offset: -2px;
 }
 table tr.clickable:focus-visible td { background: var(--bg-2); }
+/* Non-clickable (static) rows still get a subtle hover cue — most dashboard
+   tables (freddie's sessions-by-platform/model, tool distribution, commands)
+   never pass onRowClick, so they had zero row-hover feedback at all. A dim
+   hover on ANY row (not just .clickable) reads as "you're scanning this
+   row" without implying it's actionable. */
+table tr:not(.clickable):hover td { background: color-mix(in oklab, var(--bg-2) 60%, transparent); }
 
 /* Table() striped/compact opt-in density modifiers (webgeist g-table parity).
    Scoped under .ds-table-wrap so they never leak onto an unrelated bare
@@ -355,8 +361,15 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-table-wrap.is-striped table tr:nth-child(even) td { background: var(--bg-2); }
 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):hover td,
 .ds-table-wrap.is-striped table tr.clickable:nth-child(even):focus-visible td { background: var(--bg-3, var(--bg-2)); }
+.ds-table-wrap.is-striped table tr:not(.clickable):nth-child(even):hover td { background: color-mix(in oklab, var(--bg-3, var(--bg-2)) 60%, transparent); }
 .ds-table-wrap.is-compact table th { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
 .ds-table-wrap.is-compact table td { padding: var(--space-1-5, 5px) var(--space-2, 8px); }
+/* Numeric-column right-alignment: Table() (content/table.js) tags a cell
+   td.is-num when its raw content is a plain integer/decimal, so digit
+   columns (session counts, tool counts, etc.) line up on the ones place
+   instead of ragged-left like prose columns. th.is-num mirrors it on the
+   matching header so the label sits over its column. */
+table td.is-num, table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }
 
 /* ============================================================
    Changelog
@@ -419,6 +432,9 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 .ds-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; vertical-align: middle; }
 .ds-dot-on  { color: var(--green-2); }
 .ds-dot-off { color: var(--fg-3); }
+/* live is a distinct hue from a plain "on" dot — see .chip.tone-live's
+   comment for the success-vs-live rationale. */
+.ds-dot-live { color: var(--sky); }
 .ds-dot-live { color: var(--green-2); }
 .ds-dot-idle { color: var(--fg-3); }
 
@@ -436,6 +452,26 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
   padding: var(--space-3);
   background: var(--bg-2);
   border-radius: var(--r-1);
+  /* A thin border + hover elevation gives the tile real edges and a "this is
+     a distinct object" affordance instead of a flat color patch that blends
+     into the surrounding panel — matches the "no border, no hover state"
+     gap named against the stat tiles. */
+  border: 1px solid var(--rule);
+  position: relative;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+.kpi-card:hover {
+  border-color: color-mix(in oklab, var(--accent) 40%, var(--rule));
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.12));
+}
+.kpi-glyph {
+  position: absolute;
+  top: var(--space-2);
+  right: var(--space-2);
+  color: var(--fg-3);
+  opacity: 0.6;
+  display: inline-flex;
 }
 .kpi-card .num {
   font-family: var(--ff-body); font-weight: 600;

package/src/css/app-shell/primitives.css

@@ -96,9 +96,19 @@
    workspace rail item-count badge (atoms.js Badge size="sm"). */
 .ds-badge.ds-badge--sm { min-width: var(--icon-xs); height: var(--icon-xs); padding: 0 var(--space-1); font-size: var(--fs-nano); }
 .ds-badge.ds-badge--lg { min-width: 22px; height: 22px; padding: 0 var(--space-2); font-size: var(--fs-tiny); }
-.ds-badge.tone-green, .ds-badge.tone-live, .ds-badge.tone-success {
+.ds-badge.tone-green, .ds-badge.tone-success {
   background: var(--green-tint); color: var(--green-deep);
 }
+/* tone-live is its own hue (sky), split out of the success/green group:
+   "live/broadcasting now" and "operation succeeded" are different facts and
+   read identically when both borrow the brand's accent green — a LIVE badge
+   next to an "ok" chip must not look like the same state. --sky is already
+   used for informational surfaces (ds-alert-info, audio-file icons) and is
+   never pinned by the thebird brand's `--accent:var(--green)!important`
+   override, so it stays visually distinct under every accent preset. */
+.ds-badge.tone-live {
+  background: color-mix(in oklab, var(--sky) 22%, var(--bg)); color: var(--sky);
+}
 .ds-badge.tone-flame, .ds-badge.tone-error {
   background: var(--flame); color: var(--on-color);
 }
@@ -128,9 +138,36 @@
   text-transform: none; letter-spacing: 0; font-weight: 500;
   border-radius: var(--r-0); padding: var(--space-half) var(--space-2);
 }
-.chip.tone-green, .chip.tone-live, .chip.tone-success, .chip.tone-ok {
+.chip.tone-green, .chip.tone-success, .chip.tone-ok {
   background: var(--green-tint); color: var(--green-deep);
 }
+/* tone-live: its own sky hue, split from tone-ok/tone-success — see the
+   .ds-badge.tone-live comment above for the rationale. A small pulsing dot
+   precedes the label so "live" reads as an active broadcast state, not a
+   static status chip. */
+.chip.tone-live {
+  background: color-mix(in oklab, var(--sky) 16%, var(--bg));
+  color: var(--sky);
+  position: relative;
+  padding-left: 22px;
+}
+.chip.tone-live::before {
+  content: '';
+  position: absolute;
+  left: 10px; top: 50%;
+  width: 6px; height: 6px;
+  border-radius: 50%;
+  background: var(--sky);
+  transform: translateY(-50%);
+  animation: chip-live-pulse 1.6s ease-in-out infinite;
+}
+@keyframes chip-live-pulse {
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in oklab, var(--sky) 50%, transparent); }
+  50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chip.tone-live::before { animation: none; }
+}
 .chip.tone-flame, .chip.tone-error, .chip.tone-miss {
   background: var(--flame); color: var(--on-color);
 }

package/src/kits/os/freddie/pages-tools.js

@@ -12,18 +12,18 @@ export function makeToolsPages(ctx) {
         async analytics(h0) {
             const list = await h0.pi.sessions.list();
             const tools = [...h0.pi.tools.values()];
-            const byPlatform = list.reduce((a, s) => { const k = s.platform || '?'; a[k] = (a[k] || 0) + 1; return a; }, {});
-            const byModel = list.reduce((a, s) => { const k = s.model || '?'; a[k] = (a[k] || 0) + 1; return a; }, {});
+            const byPlatform = list.reduce((a, s) => { const k = s.platform || 'unknown'; a[k] = (a[k] || 0) + 1; return a; }, {});
+            const byModel = list.reduce((a, s) => { const k = s.model || 'unknown'; a[k] = (a[k] || 0) + 1; return a; }, {});
             const byToolset = tools.reduce((a, t) => { (a[t.toolset || 'core'] = a[t.toolset || 'core'] || []).push(t.name); return a; }, {});
             return [
                 Kpi({ items: [[list.length, 'sessions'], [tools.length, 'tools']] }),
                 Panel({ title: 'sessions by platform', children: Object.keys(byPlatform).length === 0
                     ? EmptyState({ text: 'no data', glyph: Icon('activity') })
-                    : Table({ headers: ['platform', 'count'], rows: Object.entries(byPlatform).sort((a, b) => b[1] - a[1]) }) }),
+                    : Table({ headers: ['platform', 'count'], striped: true, rows: Object.entries(byPlatform).sort((a, b) => b[1] - a[1]) }) }),
                 Panel({ title: 'sessions by model', children: Object.keys(byModel).length === 0
                     ? EmptyState({ text: 'no data', glyph: Icon('circle-dot') })
-                    : Table({ headers: ['model', 'count'], rows: Object.entries(byModel).sort((a, b) => b[1] - a[1]) }) }),
-                Panel({ title: 'tool distribution', children: Table({ headers: ['toolset', 'count', 'tools'],
+                    : Table({ headers: ['model', 'count'], striped: true, rows: Object.entries(byModel).sort((a, b) => b[1] - a[1]) }) }),
+                Panel({ title: 'tool distribution', children: Table({ headers: ['toolset', 'count', 'tools'], striped: true,
                     rows: Object.entries(byToolset).map(([k, v]) => [k, v.length, v.slice(0, 4).join(', ') + (v.length > 4 ? '…' : '')]) }) }),
             ];
         },
@@ -65,7 +65,7 @@ export function makeToolsPages(ctx) {
                 }) }),
                 Panel({ title: 'scheduled jobs', count: list.length, children: list.length === 0
                     ? EmptyState({ text: 'no cron jobs — add one above', glyph: Icon('circle') })
-                    : Table({ headers: ['id', 'cron', 'prompt', 'enabled'],
+                    : Table({ headers: ['id', 'cron', 'prompt', 'enabled'], striped: true,
                         rows: list.map(j => [j.id, j.cron, (j.prompt || '').slice(0, 40), j.enabled ? 'yes' : 'no']) }) }),
             ];
         },
@@ -77,7 +77,7 @@ export function makeToolsPages(ctx) {
                 list.length === 0 ? EmptyState({ text: 'no skills loaded — add SKILL.md files to ~/.freddie/skills/', glyph: Icon('square') }) : null,
                 ...Object.entries(byCat).map(([cat, ss]) => Panel({ title: cat, count: ss.length,
                     children: ss.length === 0 ? EmptyState({ text: 'none', glyph: Icon('square') })
-                        : Table({ headers: ['name', 'description'], rows: ss.map(s => [skillLabel(s), (s.description || '').slice(0, 120)]) }) })),
+                        : Table({ headers: ['name', 'description'], striped: true, rows: ss.map(s => [skillLabel(s), (s.description || '').slice(0, 120)]) }) })),
             ].filter(Boolean);
         },
         async config(h0) {
@@ -97,7 +97,7 @@ export function makeToolsPages(ctx) {
                     },
                 }) }),
                 Panel({ title: 'commands', count: commands.length,
-                    children: Table({ headers: ['name', 'category', 'description'], rows: commands.map(c => [c.name, c.category || '', c.description || '']) }) }),
+                    children: Table({ headers: ['name', 'category', 'description'], striped: true, rows: commands.map(c => [c.name, c.category || '', c.description || '']) }) }),
                 Panel({ title: 'active config', children: pre(cfg) }),
             ];
         },

package/src/kits/os/freddie-dashboard.css

@@ -57,9 +57,9 @@
    --------------------------------------------------------------------- */
 .fd-chat-config { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding-bottom: var(--space-3, 12px); border-bottom: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); margin-bottom: var(--space-3, 12px); }
 .fd-chat-config .fd-chat-field { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 120px; }
-.fd-chat-config .fd-chat-field > label { font-family: var(--os-mono, monospace); font-size: 10px; opacity: 0.6; letter-spacing: 0.05em; text-transform: uppercase; }
+.fd-chat-config .fd-chat-field > label { font-family: var(--os-mono, monospace); font-size: var(--fs-nano, 11px); opacity: 0.6; letter-spacing: 0.05em; text-transform: uppercase; }
 .fd-chat-config .fd-chat-field > input,
-.fd-chat-config .fd-chat-field > select { width: 100%; box-sizing: border-box; padding: var(--space-1-75) var(--space-2); background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); font: inherit; font-size: 12px; }
+.fd-chat-config .fd-chat-field > select { width: 100%; box-sizing: border-box; padding: var(--space-1-75) var(--space-2); background: var(--panel-1, transparent); color: var(--fg, inherit); border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-0); font: inherit; font-size: var(--fs-tiny, 12px); }
 .fd-chat-config .fd-chat-field > input:focus-visible,
 .fd-chat-config .fd-chat-field > select:focus-visible { outline: 2px solid var(--os-accent, #247420); outline-offset: 0; border-color: color-mix(in oklab, var(--os-accent, #247420) 60%, transparent); }
 .fd-chat-config .fd-chat-row { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
@@ -68,5 +68,5 @@
 .app-fd ds-chat.fd-dashboard-chat { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
 
 .fd-chat-actions { display: inline-flex; gap: var(--space-1, 4px); align-items: center; }
-.fd-chat-actions .btn-secondary { background: transparent; color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, transparent); cursor: pointer; padding: var(--space-hair) var(--space-2); border-radius: var(--r-0); font: inherit; font-size: 12px; }
+.fd-chat-actions .btn-secondary { background: transparent; color: var(--danger, #c0392b); border: 1px solid color-mix(in oklab, var(--danger, #c0392b) 40%, transparent); cursor: pointer; padding: var(--space-hair) var(--space-2); border-radius: var(--r-0); font: inherit; font-size: var(--fs-tiny, 12px); }
 .fd-chat-actions .btn-secondary:hover { background: color-mix(in oklab, var(--danger, #c0392b) 10%, transparent); }

package/src/kits/os/freddie-dashboard.js

@@ -64,7 +64,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
         const route = allRoutes.find(r => r.path === state.active) || ROUTES[1];
         return AppShell({
             topbar: Topbar({ brand: 'assistant', leaf: 'dashboard', items: [], active: '' }),
-            crumb: Crumb({ trail: ['assistant', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'ok', children: 'live' }) }),
+            crumb: Crumb({ trail: ['assistant', instance.id], leaf: route.path, right: state.error ? Chip({ tone: 'miss', children: 'error' }) : Chip({ tone: 'live', children: 'live' }) }),
             side: buildSide(),
             main: state.body || EmptyState({ text: loadingText || 'loading…', glyph: Icon('circle') }),
             status: Status({ left: ['ds-247420 · webjsx · ' + allRoutes.length + ' routes', 'instance=' + instance.id], right: [state.ts] }),

package/src/kits/os/theme.css

@@ -99,6 +99,23 @@ html, body {
     text-rendering: optimizeLegibility;
 }
 
+/* ---- Desktop wallpaper ----
+ * A flat --os-bg-0 fill behind the window layer reads as an empty/unfinished
+ * void once windows are moved aside. A very subtle two-stop radial wash
+ * (barely above the base tone, no imagery/texture asset to fetch or theme)
+ * gives the desktop depth without competing with window chrome — scoped to
+ * .ds-247420 .wm-root specifically (the actual desktop viewport BEHIND
+ * windows), not the page background used by bare/non-OS surfaces. */
+.ds-247420 .wm-root {
+    background:
+        radial-gradient(ellipse 120% 80% at 20% -10%, color-mix(in oklab, var(--os-accent) 6%, transparent), transparent 60%),
+        radial-gradient(ellipse 100% 70% at 100% 100%, color-mix(in oklab, var(--os-accent) 4%, transparent), transparent 55%),
+        var(--os-bg-0);
+}
+@media (prefers-reduced-transparency: reduce) {
+    .ds-247420 .wm-root { background: var(--os-bg-0); }
+}
+
 /* ---- Global focus-visible ring ----
    Baseline accent-colored outline for every keyboard-focusable element
    (inputs/textareas/buttons/links/contenteditable, including the terminal's
@@ -192,6 +209,13 @@ html, body {
 .os-btn:focus-visible { background: var(--panel-hover, var(--os-bg-2)); }
 .os-btn .ic { color: var(--os-accent); display: inline-flex; width: 16px; height: 16px; }
 .os-btn .ic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; }
+/* Filled/duotone active-state icon treatment: an active nav icon otherwise
+ * looks visually IDENTICAL to its inactive sibling (only the container
+ * background changes) — a soft `fill:currentColor` wash behind the same
+ * stroke-only glyph gives active items real duotone weight, matching the
+ * "filled/duotone treatment for active items" ask. fill-opacity keeps the
+ * glyph legible over the wash rather than solid-filling the whole path. */
+.os-btn.active .ic svg, .os-btn[aria-pressed="true"] .ic svg { fill: currentColor; fill-opacity: 0.18; }
 
 .os-menu {
     position: absolute;
@@ -451,6 +475,7 @@ html, body {
 .os-rail-btn:active { background: var(--panel-select, var(--os-accent-soft)); }
 .os-rail-btn .ic { color: var(--os-accent); display: inline-flex; }
 .os-rail-btn .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
+.os-rail-btn:active .ic svg { fill: currentColor; fill-opacity: 0.18; }
 
 .os-drawer {
     position: fixed;
@@ -518,6 +543,7 @@ html, body {
 .os-drawer-tile:active, .os-drawer-tile.active { background: var(--panel-select, var(--os-accent-soft)); }
 .os-drawer-tile .ic { color: var(--os-accent); display: inline-flex; }
 .os-drawer-tile .ic svg { width: 32px; height: 32px; fill: none; stroke: currentColor; }
+.os-drawer-tile:active .ic svg, .os-drawer-tile.active .ic svg { fill: currentColor; fill-opacity: 0.18; }
 .os-drawer-tile .lbl { color: var(--os-fg); font-weight: 600; }
 
 .os-spacer { flex: 1 1 auto; }