anentrypoint-design 1.0.9 → 1.0.11

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

@@ -80,7 +80,23 @@ body.canvas-host { background: transparent !important; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
 .app-topbar > nav { margin-left: auto; }
-.app-topbar > .app-topbar-theme { flex: 0 0 auto; }
+/* Utility cluster grouping: the theme toggle sits after the repo-info nav
+   links with no visual separation between the two groups, so the row read
+   as one undifferentiated strip of controls. A thin inset rule plus extra
+   left gap reads as "these are a distinct utility group", matching the
+   subtle divider already used between .app-status segments. */
+.app-topbar > .app-topbar-theme {
+  flex: 0 0 auto;
+  margin-left: var(--space-2);
+  padding-left: var(--space-3);
+  position: relative;
+}
+.app-topbar > .app-topbar-theme::before {
+  content: ''; position: absolute; left: 0; top: 50%;
+  transform: translateY(-50%);
+  width: 1px; height: 18px;
+  background: var(--rule-strong);
+}
 .app-topbar nav { display: flex; gap: var(--space-1); font-size: var(--fs-sm); flex-wrap: wrap; }
 .app-topbar nav a { flex: 0 0 auto; }
 .app-topbar nav a {
@@ -171,6 +187,15 @@ body.canvas-host { background: transparent !important; }
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   min-width: 0; flex: 0 1 auto;
 }
+/* Ancestor trail segments previously had no rule of their own and simply
+   inherited .app-crumb's base --fg-3 — the same tone the separators sit on
+   top of (before their own 0.5 opacity dims them further). That leaves only
+   two visually distinct tiers in practice (dim separator, bold leaf) rather
+   than three, since the ancestor tone reads as "default text colour", not a
+   deliberate middle step. --fg-3 is the crumb bar's OWN base, so explicitly
+   restating it here is the anchor for the 3-tier read: separator (--fg-3 at
+   0.5 opacity, dimmest) < ancestor (--fg-3, mid) < leaf (--fg bold, brightest). */
+.app-crumb > span:not(.sep):not(.leaf):not(.crumb-right) { color: var(--fg-3); }
 .app-crumb .leaf { color: var(--fg); font-weight: 600; flex: 0 1 auto; }
 .app-crumb .crumb-right { margin-left: auto; color: var(--fg-3); flex: 0 0 auto; }
 
@@ -189,6 +214,15 @@ body.canvas-host { background: transparent !important; }
 .app-side-shell {
   background: var(--bg); overflow-y: auto; min-height: 0;
   scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
+  /* Bottom-edge fade: a rail longer than the viewport otherwise shows only
+     the thin scrollbar track as its sole "there is more below" cue. Mirrors
+     the horizontal fade already used by .os-instances (src/kits/os/theme.css)
+     for its own overflow edge, oriented top-to-bottom for this vertical
+     scroller. The top edge stays fully opaque (rows start flush under the
+     topbar with no need to hint upward scroll on initial load); only the
+     trailing 24px softens toward transparent. */
+  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
+  mask-image: linear-gradient(to bottom, black calc(100% - 24px), transparent);
 }
 .app-side-shell::-webkit-scrollbar { width: 8px; }
 .app-side-shell::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: var(--r-pill, 999px); }

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

@@ -44,6 +44,16 @@ export function makeCorePages(ctx) {
             const tools = h0.pi.tools.size;
             const skills = h0.pi.skills.size;
             const health = (typeof h0.pi.health === 'function') ? h0.pi.health() : { ok: true };
+            // Epoch-ms fields (ts, or any *At/*Time-suffixed key) render as raw
+            // 13-digit numbers otherwise -- unreadable and gives no sense of
+            // recency. Format as a locale timestamp; anything that doesn't
+            // parse as a plausible epoch-ms value falls through to String(v)
+            // unchanged so this never mangles a genuine small integer.
+            const isEpochMsKey = (k) => k === 'ts' || /(At|Time)$/.test(k);
+            const fmtHealthValue = (k, v) => {
+                if (isEpochMsKey(k) && typeof v === 'number' && v > 1e12) return new Date(v).toLocaleString();
+                return String(v);
+            };
             return [
                 Hero({ title: 'assistant', body: 'open js agent harness — in-page agent runtime.', accent: h0.version || 'web' }),
                 Kpi({ items: [[sessions.length, 'sessions'], [tools, 'tools'], [skills, 'skills']] }),
@@ -55,7 +65,7 @@ export function makeCorePages(ctx) {
                     ['set api key', 'keys tab -> click chip to set value'],
                     ['add cron',    'cron tab -> form'],
                 ] }) }),
-                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, String(v)]) }) }),
+                Panel({ title: 'host', children: Receipt({ rows: Object.entries(health).map(([k, v]) => [k, fmtHealthValue(k, v)]) }) }),
             ];
         },
         async sessions(h0) {
@@ -79,7 +89,7 @@ export function makeCorePages(ctx) {
                 Kpi({ items: [[list.length, 'sessions']] }),
                 Panel({ title: 'recent sessions', count: list.length, children: list.length === 0
                     ? EmptyState({ text: 'no sessions yet — open chat and send a message', glyph: Icon('thread') })
-                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], rows }) }),
+                    : Table({ headers: ['id', 'title', 'platform', 'model', 'cwd', 'skill', ''], striped: true, rows }) }),
             ];
         },
         async agents(h0) {
@@ -88,7 +98,7 @@ export function makeCorePages(ctx) {
                 Kpi({ items: [[a.count || 0, 'active'], [a.turns || 0, 'turns']] }),
                 Panel({ title: 'agent overview', children: Receipt({ rows: [
                     ['total turns', String(a.turns || 0)],
-                    ['active session', a.active || '(none)'],
+                    ['active session', a.active || '—'],
                     ['last activity', a.last_activity ? new Date(a.last_activity).toLocaleString() : '—'],
                 ] }) }),
             ];

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

@@ -14,7 +14,7 @@ export function makeOsPages(ctx) {
                 Kpi({ items: [[list.length, 'instances'], [activeId || '—', 'active']] }),
                 Panel({ title: 'instances', count: list.length, children: list.length === 0
                     ? EmptyState({ text: 'no instances', glyph: Icon('square') })
-                    : Table({ headers: ['id', 'active', 'shells', 'windows'],
+                    : Table({ headers: ['id', 'active', 'shells', 'windows'], striped: true,
                         rows: list.map(i => [i.id, i.id === activeId ? Icon('circle') : '', String((i.shells || []).length), String((i.windows || []).length)]) }) }),
             ];
         },
@@ -25,7 +25,7 @@ export function makeOsPages(ctx) {
                 Kpi({ items: [[wins.length, 'windows'], [focused ? (focused.id || focused.title || '?') : '—', 'focused']] }),
                 Panel({ title: 'windows', count: wins.length, children: wins.length === 0
                     ? EmptyState({ text: 'no windows open', glyph: Icon('square') })
-                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'],
+                    : Table({ headers: ['id', 'title', 'min', 'max', 'pos'], striped: true,
                         rows: wins.map(w => [w.id || '?', w.title || '', w.min ? Icon('circle') : '', w.max ? Icon('circle') : '',
                             (w.el ? `${w.el.offsetLeft},${w.el.offsetTop} ${w.el.offsetWidth}×${w.el.offsetHeight}` : '')]) }) }),
             ];

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

@@ -19,6 +19,13 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
     const state = { active: 'home', ts: new Date().toLocaleTimeString(), body: null, error: null };
     let host = instance.host || null;
     const allRoutes = osSurfaces ? [...ROUTES, ...OS_ROUTE_DEFS] : ROUTES;
+    // Bumped on every setActive() and captured by loadActive() before its
+    // first await; a resolving page whose generation no longer matches the
+    // live one is a stale in-flight nav (user clicked a second page before
+    // the first's async page() resolved) and must not overwrite state.body —
+    // otherwise the crumb/side (synchronous) shows the new page while the
+    // main content silently keeps whichever page happened to resolve last.
+    let navGeneration = 0;
 
     async function ensureHost() {
         if (host) return host;
@@ -27,7 +34,7 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
         return host;
     }
 
-    function setActive(p) { state.active = p; rerender(); }
+    function setActive(p) { state.active = p; navGeneration++; rerender(); }
     if (typeof window !== 'undefined') window.__fd_nav = setActive;
 
     function rerender() { webjsx.applyDiff(root, view()); loadActive(); }
@@ -72,15 +79,19 @@ export function createFreddieDashboard({ instance, bootHost, osSurfaces, loading
     }
 
     async function loadActive() {
+        const myGeneration = navGeneration;
+        let body, error = null;
         try {
             const h0 = await ensureHost();
             const page = PAGES[state.active] || PAGES.home;
-            state.body = await page(h0, instance);
-            state.error = null;
+            body = await page(h0, instance);
         } catch (e) {
-            state.error = String(e && e.stack || e);
-            state.body = Panel({ title: 'error', children: pre(state.error) });
+            error = String(e && e.stack || e);
+            body = Panel({ title: 'error', children: pre(error) });
         }
+        if (myGeneration !== navGeneration) return; // superseded by a later nav click
+        state.body = body;
+        state.error = error;
         state.ts = new Date().toLocaleTimeString();
         webjsx.applyDiff(root, view());
     }

package/src/kits/os/theme.css

@@ -105,12 +105,24 @@ html, body {
  * (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. */
+ * windows), not the page background used by bare/non-OS surfaces.
+ * A faint repeating dot-grid is layered on top of the wash: the radial wash
+ * alone reads as a barely-perceptible tint over a large empty area (the
+ * reported "huge empty dark canvas" below a single default window), while a
+ * grid of low-opacity dots gives the eye actual anchor points across that
+ * space without competing with window chrome or requiring an image asset. */
 .ds-247420 .wm-root {
-    background:
+    /* Split into background-image/-color longhands, NOT the `background`
+       shorthand: some engines fail to parse a multi-layer gradient list
+       shorthand-form when any layer's color-stop uses color-mix() — the
+       whole declaration is dropped and the canvas silently renders flat.
+       The longhand form parses these same layers correctly. */
+    background-image:
+        radial-gradient(circle, color-mix(in oklab, var(--os-fg) 6%, transparent) 1px, transparent 1px),
         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);
+        radial-gradient(ellipse 100% 70% at 100% 100%, color-mix(in oklab, var(--os-accent) 4%, transparent), transparent 55%);
+    background-color: var(--os-bg-0);
+    background-size: 28px 28px, auto, auto;
 }
 @media (prefers-reduced-transparency: reduce) {
     .ds-247420 .wm-root { background: var(--os-bg-0); }
@@ -354,6 +366,8 @@ html, body {
     border-radius: var(--radius-lg, var(--r-3));
     box-shadow: var(--shadow-2);
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
 }
 .ds-247420 .wm-win.wm-focused {
     border-color: color-mix(in oklab, var(--os-fg) 28%, transparent);
@@ -364,6 +378,8 @@ html, body {
     background: var(--os-bg-2);
     border: none;
     padding: var(--space-2) var(--space-2-75);
+    display: flex;
+    align-items: center;
     gap: var(--space-2-5);
     transition: background 120ms ease;
 }
@@ -442,7 +458,12 @@ html, body {
         linear-gradient(135deg, transparent 0 45%, currentColor 45% 55%, transparent 55% 100%),
         linear-gradient(135deg, transparent 0 70%, currentColor 70% 80%, transparent 80% 100%);
 }
-.ds-247420 .wm-body { background: var(--os-bg-1); }
+.ds-247420 .wm-body {
+    background: var(--os-bg-1);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
 
 .os-side-rail {
     position: fixed;
@@ -593,6 +614,18 @@ html, body {
 .app-frame { width: 100%; height: 100%; border: 0; background: var(--os-bg-0); }
 .app-iframe { width: 100%; height: 100%; border: 0; display: block; }
 .app-iframe.web { background: #ffffff; } /* intentional: white canvas for embedded external web content that expects white */
+/* Browser-pane empty state (about:blank): a bare framed iframe with no
+ * content is a large dead rectangle -- this placeholder fills that space
+ * with a real affordance until a navigation lands. Hidden the instant the
+ * pane's own url stops being about:blank (docs/browser-pane.js). */
+.bp-empty {
+  width: 100%; height: 100%;
+  display: flex; align-items: center; justify-content: center;
+  color: var(--os-fg-3);
+  font: var(--fs-sm) var(--os-font);
+  background: var(--os-bg-1);
+  text-align: center;
+}
 .app-text-cursor { }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -936,7 +969,11 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sess-badge {
   display: inline-flex; align-items: center; justify-content: center;
   min-width: 16px; height: 14px; padding: 0 var(--space-1);
-  border-radius: var(--radius-sm, var(--r-0));
+  /* A neutral window-COUNT chip, not a notification/alert badge -- a small
+   * corner radius (--r-0, 4px) reads as a rectangular count pill, distinct
+   * from the fully-round .tb-sess-dot presence indicator elsewhere in this
+   * chip, so the two don't get visually conflated. */
+  border-radius: var(--r-0);
   background: color-mix(in oklab, var(--fg) 14%, transparent);
   font-size: var(--fs-pico); font-weight: 600; line-height: 1;
 }
@@ -1071,6 +1108,10 @@ html.ds-247420 { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-t
 .ds-247420 .tb-sessions-card-actions { display: flex; gap: var(--space-1-75); margin-top: var(--space-1); }
 .ds-247420 .tb-sessions-card-actions button { flex: 1; height: 24px; font-size: var(--fs-nano); padding: 0 var(--space-2); border-radius: var(--radius-sm, var(--r-0)); border: 1px solid color-mix(in oklab, var(--fg) 16%, transparent); background: transparent; color: inherit; cursor: pointer; font-family: inherit; }
 .ds-247420 .tb-sessions-card-actions button:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); }
+/* Baseline (non-hover) danger tint so the destructive action reads as
+ * distinct at rest, not only on hover -- otherwise Delete is visually
+ * identical to Active/Export until the pointer happens to land on it. */
+.ds-247420 .tb-sessions-card-actions button.danger { color: var(--color-danger); border-color: color-mix(in oklab, var(--color-danger) 40%, transparent); }
 .ds-247420 .tb-sessions-card-actions button.danger:hover { background: var(--color-danger); color: var(--on-color); border-color: var(--color-danger); }
 .ds-247420 .tb-sessions-empty-mid { padding: 40px; text-align: center; opacity: 0.6; font-size: var(--fs-tiny); }
 

package/src/page-html/client-script.js

@@ -35,9 +35,15 @@ function heroNode(hero) {
       hero.body || hero.subheading,
       hero.accent ? h('span', { class: 'ds-hero-accent' }, ' ' + hero.accent) : null,
     ) : null,
+    // Every hero CTA is a plain <a href> that navigates away from this page
+    // (GitHub, the portfolio site, ...), never an in-page action -- so the
+    // trailing arrow is appended here once, at the render layer, rather than
+    // hand-typed per label in content yaml where it could drift out of sync
+    // with the "navigates away = arrow" rule used elsewhere (row ctas,
+    // signin's in-page submit buttons).
     Array.isArray(hero.ctas) && hero.ctas.length
       ? h('div', { class: 'ds-hero-actions' }, ...hero.ctas.map((c, i) =>
-          h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, c.label || c.cta || 'go')))
+          h('a', { key: i, class: i === 0 ? 'btn btn-accent' : 'btn btn-ghost', href: c.href || '#' }, (c.label || c.cta || 'go') + ' ->')))
       : null,
     badgeRow,
   );
@@ -56,8 +62,18 @@ function showcaseNode(showcase) {
     C.Btn({ key: 'b1', variant: 'primary', children: 'Primary' }),
     C.Btn({ key: 'b2', variant: 'default', children: 'Default' }),
     C.Btn({ key: 'b3', variant: 'ghost', children: 'Ghost' }),
-    C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' }),
+    // .ds-showcase-btn-danger-group gives Danger its own visually separated
+    // cluster (extra leading gap + a hairline divider) instead of sitting in
+    // the same uniform-gap row as Primary -- two similarly-weighted filled
+    // buttons side by side otherwise compete for "the one action to take"
+    // with nothing marking Danger as the deliberately-set-apart one.
+    h('span', { key: 'b4-group', class: 'ds-showcase-btn-danger-group' },
+      C.Btn({ key: 'b4', variant: 'danger', children: 'Danger' })),
   );
+  // Hue documents STATUS, not decoration: green = shipping/live, blue = pre-
+  // release/in-flux, purple = newly added. Badge (not a bespoke pill) carries
+  // the '0 violations' count so every status indicator in this row is one of
+  // the two real chip-family components, never a one-off styled span.
   const chipRow = h('div', { class: 'ds-showcase-row' },
     C.Chip({ key: 'c1', tone: 'green', children: 'Live' }),
     C.Chip({ key: 'c2', tone: 'blue', children: 'Beta' }),

package/src/page-html/page-styles.js

@@ -106,6 +106,16 @@ a.row:hover .ds-row-arrow { opacity: 1 }
   letter-spacing: 0.06em; color: var(--fg-3, #6b6b6b);
 }
 .ds-showcase-row { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; }
+/* Sets Danger apart from Primary/Default/Ghost in the button showcase row: an
+   extra left margin beyond the row's own gap, plus a hairline divider, so a
+   danger action never reads as just one more same-weight choice beside the
+   primary action. */
+.ds-showcase-btn-danger-group {
+  display: inline-flex; align-items: center;
+  margin-left: var(--space-3, 16px);
+  padding-left: var(--space-3, 16px);
+  border-left: 1px solid var(--rule, rgba(0,0,0,.12));
+}
 /* Card-grid layout (panel.layout === 'cards'): a browsable gallery of tiles
    instead of a dense text-row list, opt-in per panel via home.yaml's
    kits.layout: cards. */

package/types/components.d.ts

@@ -267,7 +267,7 @@ export declare function Lede(props?: LedeProps): VNode;
  */
 export interface DotProps {
     /** @default 'on' */
-    tone?: 'on' | 'live' | (string & {});
+    tone?: 'on' | 'live' | 'warn' | (string & {});
 }
 export declare function Dot(props?: DotProps): VNode;