@orbytes/astrolab 0.3.0 → 0.4.0-next.2

package/src/Home.astro

@@ -1,47 +1,69 @@
 ---
-// Lab home — Astrobook's `home` component, given to it by the integration (../index.mjs).
-// Replaces the stock splash with the lab index: a row of tier cards (each opening its folder page
-// at <subpath>/browse/<tier>), then every story as a live thumbnail card grouped by tier, each
-// card carrying its derived pill — live slot, used-by, or nothing.
+// Lab home — Astrobook's `home` component, given to it by the integration (../index.mjs) and
+// rendered as the whole `/lab` document (./ui/components/app.astro).
 //
-// Everything drawn here comes from ./shell/lab-index.ts, which reads Astrobook's own story list
-// (so ids and URLs never drift from what it routes) and derives "live" from what the pages under
-// src/pages/ actually mount. The cards themselves are ./shell/CardGrid.astro, shared with the
-// folder pages.
+// A summary, not a gallery (redesigned 2026-09-24). The previous home drew every story in the lab
+// as a live <iframe> thumbnail — forty-odd full renders of the site, each loading its fonts and
+// stylesheets, before you could click anything. Those cards now live one tier at a time on the
+// tier pages, lazily; the home page is the counts and the one thing only this lab can tell you —
+// what is mounted on which page, in which slot, right now.
 import { execSync } from "node:child_process";
-import labConfig from "virtual:orbytes-lab/config.mjs";
-import CardGrid from "./shell/CardGrid.astro";
-import {
-  buildLabIndex,
-  labBase,
-  liveCountOf,
-  sortTiers,
-  STAGING_URL,
-  tierLabel,
-} from "./shell/lab-index";
+import Shell from "./chrome/Shell.astro";
+import Icon from "./chrome/Icon.astro";
+import { hrefs, labConfig, tasksBase } from "./chrome/model";
+import { componentsOf } from "./chrome/trees";
+import { rootDir, siteAssetsModel, sitePagesModel } from "./chrome/site-data";
+import { buildLabIndex, STAGING_URL, sortTiers, tierLabel } from "./shell/lab-index";
 
 const index = buildLabIndex();
-const tiers = sortTiers([...new Set(index.items.map((item) => item.tier))]).map((tier) => {
-  const items = index.items.filter((item) => item.tier === tier);
+const components = componentsOf(index);
+const pages = sitePagesModel();
+const assets = siteAssetsModel();
+
+const tiers = sortTiers([...new Set(components.map((c) => c.tier))]).map((tier) => {
+  const mods = components.filter((c) => c.tier === tier);
   return {
     tier,
     label: tierLabel(tier),
-    href: tier ? `${labBase}/browse/${tier}` : `${labBase}/browse`,
-    count: items.length,
-    live: liveCountOf(items),
-    items,
+    href: hrefs.tier(tier),
+    components: mods.length,
+    stories: mods.reduce((n, m) => n + m.stories.length, 0),
+    live: mods.filter((m) => m.live).length,
+    used: mods.filter((m) => !m.live && m.usedBy.length).length,
+    unused: mods.filter((m) => !m.live && !m.usedBy.length).length,
   };
 });
 
+// The pin board's counts, in dev only (tasksBase is null in every build).
+let tasks: { open: number; review: number } | null = null;
+if (tasksBase && labConfig.tasks) {
+  const { collectTickets, OPEN_STATUSES, READY_FOR_REVIEW } = await import("./pin/board.mjs");
+  try {
+    const { tickets } = collectTickets(labConfig.tasks.repoRoot, { backlogDir: labConfig.tasks.backlogDir });
+    tasks = {
+      open: tickets.filter((t: { status: string }) => OPEN_STATUSES.includes(t.status)).length,
+      review: tickets.filter((t: { status: string }) => t.status === READY_FOR_REVIEW).length,
+    };
+  } catch {
+    tasks = null;
+  }
+}
+
+// What is on the site: every page, and in slot order what it mounts, with the lab component it is.
+const byComponentFile = new Map(components.filter((c) => c.componentFile).map((c) => [c.componentFile!, c]));
+const onSite = pages
+  .filter((page) => page.mounts.length > 0)
+  .map((page) => ({
+    page,
+    slots: page.mounts.map((file, i) => ({ slot: i + 1, file, component: byComponentFile.get(file) ?? null })),
+  }));
+
 // Local branches → per-branch preview builds, when the consumer configured a URL template.
-// `previewUrlTemplate` is a string with a {branch} placeholder rather than a function because the
-// config crosses a virtual module and has to stay JSON-serialisable. No template, no branch list:
-// a host that does not build branches has nothing to link to.
 const previewTemplate = labConfig.previewUrlTemplate;
 let branches: string[] = [];
 if (previewTemplate) {
   try {
-    branches = execSync('git branch --format="%(refname:short)"', { encoding: "utf8" })
+    branches = execSync('git branch --format="%(refname:short)"', { encoding: "utf8", cwd: rootDir })
       .split("\n")
       .map((line) => line.trim())
       .filter(Boolean);
@@ -52,247 +74,127 @@ if (previewTemplate) {
 const previewAlias = (branch: string) =>
   (previewTemplate ?? "").replace(
     /\{branch\}/g,
-    branch
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, ""),
+    branch.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""),
   );
+const unusedAssets = assets.filter((a) => a.usedBy.length === 0).length;
 ---
 
-<div class="lab-home lab-chrome">
-  <header class="lab-home__header">
-    <p class="lab-home__eyebrow">// component lab</p>
-    <h1 class="lab-home__title">{labConfig.title}</h1>
-    <p class="lab-home__intro">
-      Every section, component and exploration in the build, rendered live. Cards open the story
-      in the dashboard; thumbnails are the bare renders themselves, scaled down. A white pill means
-      a page mounts that component right now, and names the page when it is not the home page. On
-      section versions a second pill says whether that version has been made responsive; tick it in
-      the sidebar. Where a deployed lab is configured, each card also links to the same story
-      there — the real minified build, which this dev server is not — and, locally, to the
-      component in VS Code.
-    </p>
-    {
-      STAGING_URL && (
-        <a class="lab-home__staging" href={STAGING_URL} target="_blank" rel="noopener">
-          Staging site
-          <span aria-hidden="true">&nbsp;&#8599;</span>
-        </a>
-      )
-    }
-  </header>
+<Shell title="Home" active="home" navbarClass="lab-navbar--listing">
+  <Fragment slot="navbar">
+    <div class="lab-listing-bar">
+      <h1 class="lab-listing-bar__title">Home</h1>
+      <p class="lab-listing-bar__counts">{labConfig.title}</p>
+      {
+        STAGING_URL && (
+          <a class="lab-btn lab-btn--sm lab-listing-bar__end" href={STAGING_URL} target="_blank" rel="noopener">
+            <Icon name="external" />
+            Staging
+          </a>
+        )
+      }
+    </div>
+  </Fragment>
+
+  <div class="lab-page">
+    <header class="lab-page__head">
+      <h2 class="lab-page__title">What is on this site</h2>
+      <p class="lab-page__lede">
+        Every page, section and component in the build, rendered live — and which of them the site
+        actually mounts right now, read from <code>src/pages/</code> rather than declared.
+      </p>
+    </header>
+
+    <div class="lab-stats">
+      <a class="lab-stat" href={hrefs.pages}>
+        <span class="lab-stat__head"><Icon name="pages" />Pages</span>
+        <span class="lab-stat__value">{pages.length}</span>
+        <span class="lab-stat__foot">
+          <span class="lab-pill">{onSite.length} with components</span>
+          {pages.some((p) => p.dynamic) && <span class="lab-pill">{pages.filter((p) => p.dynamic).length} dynamic</span>}
+        </span>
+      </a>
+      {
+        tiers.map((tier) => (
+          <a class="lab-stat" href={tier.href}>
+            <span class="lab-stat__head">
+              <Icon name={tier.tier === labConfig.sectionsTier ? "sections" : tier.tier === "components" ? "components" : "component"} />
+              {tier.label}
+            </span>
+            <span class="lab-stat__value">{tier.components}</span>
+            <span class="lab-stat__foot">
+              {tier.live > 0 && <span class="lab-pill lab-pill--live">{tier.live} live</span>}
+              {tier.used > 0 && <span class="lab-pill lab-pill--used">{tier.used} used</span>}
+              {tier.unused > 0 && <span class="lab-pill">{tier.unused} unused</span>}
+              <span class="lab-pill">{tier.stories} variant{tier.stories === 1 ? "" : "s"}</span>
+            </span>
+          </a>
+        ))
+      }
+      <a class="lab-stat" href={hrefs.assets}>
+        <span class="lab-stat__head"><Icon name="assets" />Assets</span>
+        <span class="lab-stat__value">{assets.length}</span>
+        <span class="lab-stat__foot">
+          {unusedAssets > 0 ? <span class="lab-pill lab-pill--unresponsive">{unusedAssets} unused</span> : <span class="lab-pill">all referenced</span>}
+        </span>
+      </a>
+      {
+        tasks && tasksBase && (
+          <a class="lab-stat" href={tasksBase}>
+            <span class="lab-stat__head"><Icon name="tasks" />Tasks</span>
+            <span class="lab-stat__value">{tasks.open}</span>
+            <span class="lab-stat__foot">
+              {tasks.review > 0 ? <span class="lab-pill lab-pill--brand">{tasks.review} ready for review</span> : <span class="lab-pill">open</span>}
+            </span>
+          </a>
+        )
+      }
+    </div>
 
-  <section class="lab-home__tiers">
     {
-      tiers.map((tier) => (
-        <a class="tier-card" href={tier.href}>
-          <span class="tier-card__eyebrow">// {tier.tier || "root"}</span>
-          <span class="tier-card__name">{tier.label}</span>
-          <span class="tier-card__meta">
-            <span>
-              {tier.count} stor{tier.count === 1 ? "y" : "ies"}
-            </span>
-            {tier.live > 0 && <span class="tier-card__live">{tier.live} live</span>}
-          </span>
-        </a>
+      onSite.map(({ page, slots }) => (
+        <section>
+          <h3 class="lab-section-title">
+            <a href={page.href}>{page.label}</a>
+            <small>{page.route} · {slots.length} mounted</small>
+          </h3>
+          <ol class="lab-slots">
+            {slots.map(({ slot, file, component }) => (
+              <li class="lab-slots__row">
+                <span class="lab-slots__n">{slot}</span>
+                {component ? (
+                  <a class="lab-slots__name" href={component.stories[0]!.dashboardUrl}>
+                    {component.moduleName}
+                    {component.version && <span class="lab-card__version">{component.version}</span>}
+                  </a>
+                ) : (
+                  <span class="lab-slots__name lab-slots__name--bare" title="Not in the lab — no *.stories.ts file for it">
+                    {file.split("/").pop()}
+                  </span>
+                )}
+                <span class="lab-slots__file lab-mono">{file}</span>
+              </li>
+            ))}
+          </ol>
+        </section>
       ))
     }
-  </section>
-
-  {
-    branches.length > 0 && (
-      <section class="lab-home__branches">
-        <h2 class="lab-home__group-title">Branches</h2>
-        <ul>
-          {branches.map((branch) => (
-            <li>
-              <code>{branch}</code>
-              <a href={previewAlias(branch)} target="_blank" rel="noopener">
-                branch preview
-              </a>
-            </li>
-          ))}
-        </ul>
-      </section>
-    )
-  }
-
-  {
-    tiers.map((tier) => (
-      <section class="lab-home__group">
-        <h2 class="lab-home__group-title">
-          <a href={tier.href}>{tier.label}</a>
-        </h2>
-        <CardGrid items={tier.items} />
-      </section>
-    ))
-  }
-</div>
-
-<style>
-  .lab-home {
-    background-color: var(--lab-color-bg);
-    color: var(--lab-color-text);
-    font-family: var(--lab-font-body);
-    min-height: 100%;
-    padding: 3em 2.5em 5em;
-  }
-
-  .lab-home__eyebrow {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    color: var(--lab-color-text-muted);
-    margin-bottom: 0.75em;
-  }
-
-  .lab-home__title {
-    font-family: var(--lab-font-heading);
-    color: var(--lab-color-text-strong);
-    font-size: 2.25em;
-    font-weight: 500;
-    letter-spacing: -0.5px;
-    margin-bottom: 0.4em;
-  }
-
-  .lab-home__intro {
-    max-width: 42em;
-    color: var(--lab-color-text-faint);
-    line-height: 1.55;
-    margin-bottom: 1.5em;
-  }
-
-  .lab-home__staging {
-    display: inline-block;
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    color: var(--lab-color-text-strong);
-    text-decoration: none;
-    border: 1px solid var(--lab-color-border);
-    border-left: 1px solid var(--lab-color-text-strong);
-    padding: 0.75em 1.25em;
-    transition: background-color var(--lab-transition), color var(--lab-transition);
-  }
-
-  .lab-home__staging:hover,
-  .lab-home__staging:focus-visible {
-    background-color: var(--lab-color-text-strong);
-    color: var(--lab-color-accent-text);
-  }
-
-  .lab-home__tiers {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
-    gap: 1em;
-    margin-top: 2.5em;
-  }
-
-  .tier-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-    text-decoration: none;
-    border: 1px solid var(--lab-color-border);
-    background-color: var(--lab-color-surface);
-    padding: 1.25em 1.5em;
-    transition: border-color var(--lab-transition);
-  }
-
-  .tier-card:hover,
-  .tier-card:focus-visible {
-    border-color: var(--lab-color-border-strong);
-  }
-
-  .tier-card__eyebrow {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 0.75em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .tier-card__name {
-    font-family: var(--lab-font-heading);
-    font-size: 1.4em;
-    font-weight: 500;
-    color: var(--lab-color-text-strong);
-  }
-
-  .tier-card__meta {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 1em;
-    font-family: var(--lab-font-mono);
-    font-size: 0.8em;
-    color: var(--lab-color-text-faint);
-  }
-
-  .tier-card__live {
-    font-weight: 500;
-    line-height: 1;
-    padding: 0.45em 0.85em;
-    border-radius: var(--lab-radius-pill);
-    background-color: var(--lab-color-accent);
-    color: var(--lab-color-accent-text);
-  }
-
-  .lab-home__branches {
-    margin-top: 2.5em;
-  }
-
-  .lab-home__branches ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .lab-home__branches li {
-    display: flex;
-    align-items: baseline;
-    gap: 1em;
-    padding: 0.5em 0;
-    border-bottom: 1px solid var(--lab-color-border);
-  }
 
-  .lab-home__branches code {
-    font-family: var(--lab-font-mono);
-    color: var(--lab-color-text-strong);
-  }
-
-  .lab-home__branches a {
-    font-family: var(--lab-font-mono);
-    font-size: 0.85em;
-    color: var(--lab-color-text-faint);
-    text-decoration: none;
-  }
-
-  .lab-home__branches a:hover,
-  .lab-home__branches a:focus-visible {
-    color: var(--lab-color-text-strong);
-    text-decoration: underline;
-  }
-
-  .lab-home__group {
-    margin-top: 3em;
-  }
-
-  .lab-home__group-title {
-    font-family: var(--lab-font-mono);
-    font-weight: 500;
-    font-size: 1em;
-    color: var(--lab-color-text-muted);
-    margin-bottom: 1em;
-    padding-bottom: 0.5em;
-    border-bottom: 1px solid var(--lab-color-border);
-  }
-
-  .lab-home__group-title a {
-    color: inherit;
-    text-decoration: none;
-  }
-
-  .lab-home__group-title a:hover,
-  .lab-home__group-title a:focus-visible {
-    color: var(--lab-color-text-strong);
-    text-decoration: underline;
-  }
-</style>
+    {
+      branches.length > 0 && (
+        <section>
+          <h3 class="lab-section-title">Branches</h3>
+          <ol class="lab-slots">
+            {branches.map((branch) => (
+              <li class="lab-slots__row">
+                <span class="lab-slots__name lab-mono">{branch}</span>
+                <a class="lab-slots__file" href={previewAlias(branch)} target="_blank" rel="noopener">
+                  branch preview ↗
+                </a>
+              </li>
+            ))}
+          </ol>
+        </section>
+      )
+    }
+  </div>
+</Shell>