@orbytes/astrolab 0.3.0 → 0.4.0-next.1

package/README.md

@@ -1,20 +1,21 @@
 # @orbytes/astrolab
 
-Two dev surfaces for an Astro site, in one package and one integration call.
-
-**The component lab** at `/lab` — an [Astrobook](https://github.com/ocavue/astrobook) shell. Every
-section, component and experiment in a build, rendered live, with the one thing a component
-playground normally cannot tell you — **which of these is actually on the site right now**, derived
-from the pages rather than declared.
-
-**The pin board** at `/pin` — click a rendered element on `astro dev`, leave a comment, and a
-markdown ticket plus a screenshot land on local disk for an agent to pick up
-([docs/PIN.md](./docs/PIN.md), contract at [docs/PIN-CONTRACT.md](./docs/PIN-CONTRACT.md)). It moved
-in from its own package on 2026-09-22, so the two install, configure and version as one thing. Dev
-only, switchable off with `pin: false`.
-
-It ships mostly **source**. The `.astro` files, and everything under `src/shell/`, `src/ui/` and
-`src/types/`, are compiled by the consumer's own Vite, the way Starlight ships its components —
+A local dev tool for an Astro site, in one package and one integration call. Everything runs on
+the site's own dev server at `/lab`; nothing leaves the machine.
+
+**The lab** — every page, section and component in the build, rendered live on a canvas you size,
+with the one thing a component playground normally cannot tell you: **which of these is actually on
+the site right now**, derived from the pages rather than declared. Its engine began as
+[Astrobook](https://github.com/ocavue/astrobook), vendored; its chrome is this package's own.
+
+**Tasks — the pin board** at `/lab/tasks` — click a rendered element on `astro dev`, leave a
+comment, and a markdown ticket plus a screenshot land on local disk for an agent to pick up
+([docs/PIN.md](./docs/PIN.md), contract at [docs/PIN-CONTRACT.md](./docs/PIN-CONTRACT.md)). Kanban and
+table views, in the lab's own sidebar. Dev only, switchable off with `pin: false`; `/pin`, its old
+address, redirects there.
+
+It ships mostly **source**. The `.astro` files, and everything under `src/chrome/`, `src/shell/`,
+`src/ui/` and `src/types/`, are compiled by the consumer's own Vite, the way Starlight ships its components —
 which is why the lab picks up the consumer's tokens, fonts and breakpoints in a story preview: it
 renders inside the consumer's pipeline. The one exception is `src/core/`, transpiled to `dist/` by
 `scripts/build-core.mjs` at `prepack` and `prepare`, because `astro.config.mjs` is loaded by Node's
@@ -76,8 +77,11 @@ export const Subtle = { args: { label: "See pricing", variant: "subtle" } };
 export const Strong = { args: { label: "Book a call", variant: "strong" } };
 ```
 
-Then `npm run dev` and open **`http://localhost:4321/lab`** — the home page lists every tier and
-renders every story live. `subpath` moves it; `directory` moves the stories.
+Then `npm run dev` and open **`http://localhost:4321/lab`**. `subpath` moves it; `directory` moves
+the stories.
+
+**Test versions** are published under the `next` tag while the redesign settles:
+`npm i -D @orbytes/astrolab@next`. `latest` stays on the last stable release until 1.0.
 
 **Peers.** Astro **7 or newer**, narrowed from `>=5.2.0` on 2026-09-22 when the pin board moved in:
 the board's dev-toolbar app imports `astro/client/dev-toolbar/apps/utils/highlight.js` and
@@ -167,10 +171,15 @@ than silent.
 
 ### What is vendored
 
-**Astrobook is not a dependency**, and neither is anything it used to pull in. All three of its
-packages are vendored at version `0.13.3` — the core into [`src/core/`](./src/core/), the UI into
-[`src/ui/`](./src/ui/), the types into [`src/types/`](./src/types/) — and `astro-theme-toggle` with
-them. Nothing outside Astro is installed, and there is nothing to keep in step but this folder.
+**Astrobook is not a dependency**, and neither is anything it used to pull in. Its core is vendored
+at version `0.13.3` into [`src/core/`](./src/core/), its types into [`src/types/`](./src/types/), and
+what the preview still needs of its UI into [`src/ui/`](./src/ui/) — the rest of that UI was retired
+by the redesign (2026-09-24), whose chrome is this package's own, in [`src/chrome/`](./src/chrome/).
+Nothing outside Astro is installed, and there is nothing to keep in step but this folder.
+
+The chrome bundles two third-party assets, each with its licence beside it: **Inter** (SIL OFL,
+[`src/chrome/fonts/`](./src/chrome/fonts/)) and **Lucide** icons (ISC,
+[`src/chrome/LICENSE-icons`](./src/chrome/LICENSE-icons)).
 
 Attribution, the upstream commit, and every deliberate divergence from it are recorded in
 [`src/core/LICENSE-astrobook`](./src/core/LICENSE-astrobook) (MIT, Copyright (c) 2024 ocavue; the
@@ -186,16 +195,16 @@ This package is MIT too; see [LICENSE](./LICENSE).
 and only the rendered story takes the site's styling. A site that wants a different-looking lab
 edits this package's source: there is no theme API and no token override, on purpose.
 
-So the chrome — layout, sidebar, search, the home and folder pages, the viewport configurator — is
-drawn by one stylesheet that ships with this package, [`src/ui/lab.css`](./src/ui/lab.css), in
-`--lab-*` tokens that cannot collide with a site's own, on a system font stack, with light and dark
-themes of its own. It never receives the `css` list or the `head` component.
+So the chrome — both sidebar levels, the navbar, every view — is drawn by one stylesheet that ships
+with this package, [`src/ui/lab.css`](./src/ui/lab.css), in `--lab-*` tokens that cannot collide with
+a site's own, in Inter, with light and dark themes of its own. It never receives the `css` list or
+the `head` component.
 
-The **preview** — the story at `/lab/stories/<id>`, and the story rendered inside
-`/lab/dashboard/<id>` — still gets both, because seeing a component as the real site renders it is
-the whole point. Isolation runs both ways: the chrome's stylesheet is not loaded on a bare story
-page, and a component styled by lab CSS the real site has never heard of would be a lab that lies.
-The mechanism, and what it costs, is documented at the top of `lab.css`.
+The **preview** — the bare story at `/lab/stories/<id>`, and the site's own pages — gets both,
+because seeing a component as the real site renders it is the whole point. Since the redesign the
+chrome only ever shows a preview **inside an `<iframe>`**, so the two never share a document: no
+chrome page carries a byte of the site's CSS, and the chrome's stylesheet never reaches a story.
+The preview also keeps its **own** light/dark, separate from the chrome's.
 
 ## Options
 
@@ -205,13 +214,14 @@ Every option is optional.
 | --- | --- | --- |
 | `directory` | `"src/lab"` | Where the stories live, relative to the project root. |
 | `subpath` | `"/lab"` | Where the lab is served. `""` serves it at the site root. |
-| `css` | `[]` | The site's token and base stylesheets. Astrobook injects them into its own pages; the lab's own pages (folder pages, viewport) pull the same list. |
-| `head` | — | A path to the site's own head component, rendered **inside** the lab's head. This is how fonts arrive: lab stories never render through the site's layout, so whatever that layout registers has to be repeated here. |
-| `title` | `"Component lab"` | The lab's name, on the home page and in the dashboard. |
+| `css` | `[]` | The site's token and base stylesheets. They reach the story **previews** only, never the lab's own chrome. |
+| `head` | — | A path to the site's own head component, rendered inside every story preview's head. This is how fonts arrive: stories never render through the site's layout, so whatever that layout registers has to be repeated here. |
+| `title` | `"Component lab"` | The site's name as the lab shows it — the tab title and the home page. |
 | `stagingUrl` | — | The deployed lab's base URL — the real minified build, which a dev server is not. Every card and the story header link to the same story there. Omit it and those links do not appear. |
 | `previewUrlTemplate` | — | A branch-preview URL with a `{branch}` placeholder, e.g. `"https://{branch}-my-site.workers.dev"`. The home page then lists the local git branches with a link each. Omit it and there is no branch list. It is a string, not a function, because the config crosses a virtual module and has to stay JSON-serialisable. |
 | `feedbucketKey` | — | Set it and every lab page carries the [Feedbucket](https://feedbucket.app) tag. The package takes a key or nothing: the consumer keeps its own staging gate, so pass the key only where the widget belongs. |
-| `tiers` | `["sections", "components", "explorations"]` | The tiers, in reading order. A tier is the first path segment under `directory`. |
+| `tiers` | `["sections", "components", "explorations"]` | The tiers, in reading order. A tier is the first path segment under `directory`. A tier with no stories is left out of the menu. |
+| `viewports` | the orbytes scale | The viewport's screen sizes: `design` widths (the device switch), `breakpoints` (the band readout and the presets) and named `devices`. See [Viewports](#viewports). |
 | `pin` | `true` | The pin board. `false` omits it entirely; an object is the board's own options — see below. |
 
 ### Tiers
@@ -236,26 +246,60 @@ tiers: [
 
 At most one tier holds each role.
 
+### Viewports
+
+```js
+viewports: {
+  design: [
+    { label: "Desktop", width: 1440, icon: "monitor" },
+    { label: "Phone", width: 390, icon: "phone" },   // icons: monitor, tablet, phone-landscape, phone
+  ],
+  breakpoints: [{ name: "desktop", min: 1024 }, { name: "mobile", min: 0 }],
+  devices: [{ label: "Pixel 8", width: 412, height: 915 }],
+}
+```
+
+Each key is optional and replaces its default whole. `breakpoints` are lower edges, widest first,
+the last one `0`; the presets offer both sides of every edge (1024 and 1023).
+
 ## What you get
 
-**`<subpath>/`** — the home page: a card per tier, then every story as a scaled-down live render.
+Two sidebar levels — the menu (Home; Site: Pages, one entry per tier, Assets; Tasks; Support and
+Settings) and a panel with a breadcrumb, a search box and a tree — and a main area with a navbar
+over the content.
+
+**`<subpath>/`** — Home: counts for pages, each tier, assets and open tasks, and every page's
+mounted components in slot order — what is on the site right now.
 
-**`<subpath>/browse/<path>`** — a folder page per folder in the tree, with a filter box.
+**`<subpath>/pages/<route>`** — the site's own pages, in a tree nested the way the routes nest, each
+shown on the viewport canvas at its real URL. `<subpath>/pages` lists them all.
 
-**`<subpath>/viewport/<story>`** — the viewport configurator. Drag, type or pick the frame's width
-and height, zoom independently of it, and read the breakpoint band. The viewport is in the URL
-(`?w=390&h=844&z=0.6`), so a link — or a screenshot tool — names the exact frame. `[` `]` step the
-width presets, `r` rotates, `f` fits, `0` is 1:1.
+**`<subpath>/browse/<tier>`** — a tier (Sections, Components, …): its components as cards with a live
+thumbnail and their pills, filterable by live / used / unused / responsive.
+
+**`<subpath>/dashboard/<story>`** — a component's page. The tree stops at the component; its stories
+are tabs (a dropdown past four), with previous/next buttons and `j`/`k` stepping through every story
+of the tier. The story renders on a **canvas**: pick a design width, type or drag the frame's size,
+rotate, pick a breakpoint edge or a device, zoom (Fit by default), and read the band. The viewport
+is in the URL (`?w=390&h=844&z=fit`), so a link names the exact frame. `[` `]` step the widths, `r`
+rotates, `f` fits, `0` is 100%. The pills open a **status menu** (where it is live, and the marks
+below); everything that leaves the lab (VS Code, full screen, staging, a link) is under ⋯.
+
+**`<subpath>/assets`** — every image under `src/` and `public/`, its size and dimensions, and which
+files reference it, so "what does nothing use?" is a filter.
+
+**`<subpath>/tasks`**, **`<subpath>/tasks/all`** — the pin board, dev only. See below.
 
 **`<subpath>/index.json`** — the whole index as a static file: every story with its id, URLs,
 files, tier/section/version, live slot, used-by list, tags and summary. Scripts and agent briefs
 read this instead of globbing.
 
-**The sidebar**, decorated: a **live** pill on every story a page actually mounts (`live · slot 3
-of 12`, or `live · /about, slot 3` when the page is not the home page), a **used by** pill on
-shared chrome, a **responsive** pill and two checkboxes on section versions, a cull switch in the
-header, and the search widened so `live`, `v1`, `responsive` or a tag all match. `⌘B` collapses the
-sidebar, `⌘K` focuses search, `j`/`k` walk the stories.
+**`<subpath>/viewport/<story>`** — the old viewport configurator's address, now a redirect to the
+component page, kept so old links still land.
+
+**Keys.** `⌘B` closes and opens the panel, `⌘⇧B` shrinks the menu to icons, `⌘.` does both,
+`⌘K` searches. With the panel closed, point at the canvas's left edge and the panel slides out over
+it without resizing the preview.
 
 **An unconditional `noindex`** on every lab page. Lab pages do not render through the site's
 layout, so they never inherit its staging `noindex` — this one is not gated on the environment, on
@@ -270,16 +314,16 @@ document order. Nothing is configured, so the pill cannot go stale.
 ## Marks
 
 Two JSON files under `directory`, both written by a **dev-only** API (`PUT /__lab/cull`,
-`PUT /__lab/responsive`) and both meant to be committed:
+`PUT /__lab/responsive`) and both meant to be committed. Both are ticked in a component's **status
+menu** (its pills, in the navbar):
 
 - **`responsive.json`** — `{ done, approved }` per section version. Responsive work is
-  approval-gated and neither fact is readable from the code, so both are ticked by hand in the
-  sidebar.
+  approval-gated and neither fact is readable from the code, so both are ticked by hand.
 - **`cull.json`** — `{ marked }`: stories in the cullable tier, marked for deletion.
 
 The API refuses anything outside the right tier, anything that is not a stories file on disk, and
 anything live or used by a live section — with the offender and the reason. In a build there is no
-dev server, so there is no write path at all and the switches hide themselves.
+dev server, so there is no write path at all and the boxes stay disabled.
 
 ### `orbytes-lab-cull`
 
@@ -303,9 +347,9 @@ directory that only the removal set imports — then refuses the whole run if an
 
 ## Parameters panel
 
-A component with something to tune declares it and renders no UI of its own. The panel is drawn by
-the viewport configurator, under the top bar, and only there — the dashboard and the bare story
-page show nothing.
+A component with something to tune declares it and renders no UI of its own. The panel is a drawer
+on the right of the component page's canvas, opened from the navbar's **Parameters** button, which
+exists only for a story that registered something — the bare story page shows nothing.
 
 ```ts
 import { registerLabParams } from "@orbytes/astrolab/params";
@@ -331,11 +375,13 @@ the readouts and the collapse are the panel's job, not the component's.
 Exported types: `LabParamControl`, `LabParamGroup`, `LabParamHandle`, `LabParamValue`,
 `LabParamValues`, `LabParamEntry`.
 
-## The pin board at `/pin`
+## Tasks — the pin board at `/lab/tasks`
 
-Dev only, on by default, and it needs no configuration: `orbytesLab()` already gives it the lab's
-resolved `subpath` so the board's own "Lab" link points wherever the lab actually is. Everything it
-does is in [docs/PIN.md](./docs/PIN.md); what matters at the integration boundary is here.
+Dev only, on by default, and it needs no configuration. Inside the lab it is two views in the lab's
+own chrome — **Kanban Board** at `<subpath>/tasks` and **All Tasks**, a sortable table, at
+`<subpath>/tasks/all` — with the statuses and their counts in the panel. `/pin`, its old address,
+redirects there. Everything it does is in [docs/PIN.md](./docs/PIN.md); what matters at the
+integration boundary is here.
 
 ```js
 orbytesLab({
@@ -355,16 +401,15 @@ orbytesLab({
 | `archiveDir` | `~/.orbytes/feedback-archive` | Canonical screenshot home; the repo copy is a hardlink into it. |
 | `project` | the checkout's folder name | The folder under `archiveDir` this project's screenshots live in. |
 | `shots` | `true` | `false` writes tickets and never loads playwright. |
-| `route` | `"/pin"` | Where the board is served. |
-| `links` | the lab's resolved subpath | The board's corner links. `[]` draws none. |
+| `route` | `"<subpath>/tasks"` | Where the board is served. On its own, without the lab, `"/pin"`. |
+| `links` | the lab's resolved subpath | The standalone board's corner links. `[]` draws none. |
 | `appId` / `appName` / `icon` | `"orbytes-pin"` / `"Pin"` / `"bug"` | The dev-toolbar app's identity. |
 
 Three things about it are worth knowing before they surprise you:
 
-- **`route` shadows a host page at the same path.** The board is middleware installed ahead of
-  Astro's own request handler, so a site with its own `src/pages/pin.astro` serves the board
-  instead — in dev, with nothing on screen to say why. The default stays `/pin` because it is the
-  address every document here names; a site that owns that path sets `pin: { route: "/__pin" }`.
+- **`/pin` still answers, in dev, with a redirect.** It is middleware installed ahead of Astro's own
+  request handler, so a site with its own `src/pages/pin.astro` gets the redirect instead of its
+  page — in dev only. Build output is unaffected.
 - **`project` defaults to the checkout's directory name**, which two clones of *different* repos
   under the same folder name silently share. One's `pin-007.png` overwrites the other's and both
   boards keep rendering. Set it explicitly where that is possible.
@@ -375,8 +420,8 @@ Three things about it are worth knowing before they surprise you:
 
 ### `orbytes-pin-gallery`
 
-The board is live at `/pin` and read fresh on every request, so this binary is only for the file: a
-snapshot that opens with no dev server running.
+The board is live at `/lab/tasks` and read fresh on every request, so this binary is only for the
+file: a snapshot that opens with no dev server running.
 
 ```sh
 orbytes-pin-gallery                        # → backlog/gallery.html

package/defaults.mjs

@@ -38,6 +38,67 @@ export const TIER_ROLES = {
   explorations: { cullable: true },
 };
 
+/**
+ * The screen sizes the viewport offers — a per-site setting (decided 2026-09-24), defaulting to the
+ * orbytes scale.
+ *
+ * - `design` — the widths the design is drawn at: the navbar's device switch, in this order. The
+ *   `icon` names one of the chrome's icons (monitor, tablet, phone-landscape, phone).
+ * - `breakpoints` — the lower edge of each CSS band, widest first; the last is 0. The readout
+ *   names the band the frame is in, and the presets offer both sides of every edge (992 and 991).
+ * - `devices` — named sizes that set width AND height.
+ *
+ * @typedef {{ label: string; width: number; icon: string }} DesignWidth
+ * @typedef {{ name: string; min: number }} Breakpoint
+ * @typedef {{ label: string; width: number; height: number }} Device
+ * @typedef {{ design: DesignWidth[]; breakpoints: Breakpoint[]; devices: Device[] }} Viewports
+ */
+/** @type {Viewports} */
+export const DEFAULT_VIEWPORTS = {
+  design: [
+    { label: "Desktop", width: 1440, icon: "monitor" },
+    { label: "Tablet", width: 834, icon: "tablet" },
+    { label: "Phone landscape", width: 550, icon: "phone-landscape" },
+    { label: "Phone", width: 390, icon: "phone" },
+  ],
+  breakpoints: [
+    { name: "desktop", min: 992 },
+    { name: "tablet", min: 768 },
+    { name: "phone landscape", min: 480 },
+    { name: "phone", min: 0 },
+  ],
+  devices: [
+    { label: "iPhone 15", width: 390, height: 844 },
+    { label: "iPhone 15 Pro Max", width: 430, height: 932 },
+    { label: "iPad", width: 834, height: 1194 },
+    { label: "iPad landscape", width: 1194, height: 834 },
+    { label: "MacBook", width: 1440, height: 900 },
+    { label: "Wide", width: 1920, height: 1080 },
+    { label: "Ultra-wide", width: 2560, height: 1080 },
+  ],
+};
+
+/** @param {unknown} value @returns {Viewports} */
+const resolveViewports = (value) => {
+  const given = value && typeof value === "object" ? /** @type {Partial<Viewports>} */ (value) : {};
+  const list = (v, fallback) => (Array.isArray(v) && v.length ? v : fallback);
+  return {
+    design: list(given.design, DEFAULT_VIEWPORTS.design).map((d) => ({
+      label: String(d.label ?? `${d.width}`),
+      width: Number(d.width),
+      icon: String(d.icon ?? "monitor"),
+    })),
+    breakpoints: list(given.breakpoints, DEFAULT_VIEWPORTS.breakpoints)
+      .map((b) => ({ name: String(b.name), min: Number(b.min) || 0 }))
+      .sort((a, b) => b.min - a.min),
+    devices: list(given.devices, DEFAULT_VIEWPORTS.devices).map((d) => ({
+      label: String(d.label),
+      width: Number(d.width),
+      height: Number(d.height),
+    })),
+  };
+};
+
 /** `./src/lab/` and `src/lab` both mean `src/lab`. @param {string} value */
 export const normaliseDirectory = (value) =>
   String(value)
@@ -89,6 +150,8 @@ const resolveTier = (tier) => {
  * @property {string | null} cullDir        `<directory>/<cullTier>/`, or null
  * @property {string} responsiveFile        `<directory>/responsive.json`
  * @property {string} cullFile              `<directory>/cull.json`
+ * @property {Viewports} viewports          the viewport's screen sizes (DEFAULT_VIEWPORTS)
+ * @property {null} tasks                   filled in by the integration when the pin board runs
  */
 
 /**
@@ -116,5 +179,7 @@ export function resolveLabOptions(options = {}) {
     cullDir: cull ? `${directory}/${cull.id}/` : null,
     responsiveFile: `${directory}/responsive.json`,
     cullFile: `${directory}/cull.json`,
+    viewports: resolveViewports(options.viewports),
+    tasks: null,
   };
 }

package/dist/core/virtual-module/virtual-routes.js

@@ -51,7 +51,18 @@ async function getVirtualRoutes(rootDir, codegenDir, logger, dashboardSubpath, p
 }
 function createVirtualRouteComponent(route) {
   const modName = `astrobook_module_${route.storyModule.id}`.replaceAll(/\W+/g, "_").replaceAll(/_+/g, "_").replace(/_+$/, "");
-  const page = route.props.hasSidebar ? STORY_PAGE : PREVIEW_PAGE;
+  if (route.props.hasSidebar) {
+    return `
+---
+// Automatically generated by Astrobook
+
+import StoryPage from '${STORY_PAGE}';
+---
+
+<StoryPage story={'${route.props.story}'} hasSidebar={true} />
+`.trim();
+  }
+  const page = PREVIEW_PAGE;
   return `
 ---
 // Automatically generated by Astrobook

package/docs/PIN-CONTRACT.md

@@ -182,6 +182,14 @@ site setting `pin: { route: "/__pin" }` got a panel that fetched a path the midd
 serve and showed an empty list — fixed 2026-09-22. One function normalises the trailing
 slash, `boardRoute`, and both the middleware and the toolbar read it, so they cannot disagree.
 
+**The board page moved into the lab on 2026-09-24.** Through `orbytesLab()` the route is
+`<subpath>/tasks` and the page there is an Astro page in the lab's chrome
+(`../src/chrome/views/Tasks.astro`), not this middleware's standalone document. The panel's contract
+with it is unchanged, because the page renders the SAME markup from the same function
+(`boardParts`): it still reads `[data-board]`, its `data-api`, every `[data-col][data-status]`, the
+`script.card-data` payloads and `.broken li code` off the page at `route`. A change to those
+selectors in `board.mjs` is a change to this contract.
+
 ## The status line — one line, not a log
 
 Decided 2026-09-22, replacing a running four-entry list that narrated every step. The log was

package/docs/PIN.md

@@ -1,8 +1,8 @@
 # The pin board
 
 Click a rendered element on `astro dev`, leave a comment, and get a markdown ticket plus a PNG on
-local disk for a Claude Code agent to pick up. Then work the tickets on a kanban at `/pin`, on the
-same dev server. No cloud, no API key, no MCP, no second process.
+local disk for a Claude Code agent to pick up. Then work the tickets on a kanban at `/lab/tasks`,
+in the lab, on the same dev server. No cloud, no API key, no MCP, no second process.
 
 It is for a **solo pass** — your own review of a site in dev, before anyone else sees it. It does
 not sync with whatever tool you use for review rounds with other people, and is not meant to
@@ -24,7 +24,7 @@ own port (`backlog browser`, 6420). That is the whole reason it is gone — the
 
 | Stop | Do instead |
 |---|---|
-| `backlog browser` | `npm run dev`, then `/pin` |
+| `backlog browser` | `npm run dev`, then `/lab/tasks` |
 | `backlog task edit <n> …` on a pin ticket | drag the card, or use the status menu in its detail panel |
 
 `backlog task edit` is the original defect, not an alternative. Any write through backlog.md
@@ -78,12 +78,23 @@ isCancelled(t.status);   // the archive test
 
 `isOpen()` is *not `Resolved` and not `Cancelled`* — one definition, shared by this board's chips
 and the in-page panel's Open tab, so the two cannot disagree by one ticket. `Cancelled` appears in
-neither tab: it is reachable on `/pin` only.
+neither tab: it is reachable on the board only.
 
-## The board at `/pin`
+## The board at `/lab/tasks`
+
+**In the lab since 2026-09-24** (decided that day: one URL, everything under `/lab`). The board is
+two views in the lab's own chrome — **Kanban Board** at `/lab/tasks` and **All Tasks**, a sortable
+table of every ticket, newest first, at `/lab/tasks/all` — with the statuses and their counts in
+the lab's panel; `/lab/tasks?status=Ready%20for%20review` opens the board filtered to one column.
+`/pin`, the board's address until then, redirects there. Both views are Astro pages the pin half
+injects in `astro dev` only, rendered from the same markup, stylesheet and script as the standalone
+file (`boardParts` in [`src/pin/board.mjs`](../src/pin/board.mjs)); the stylesheet is scoped with
+`@scope (.pin-board)` so it cannot restyle the chrome around it, and it takes the lab's palette and
+dark mode inside the lab.
 
 Six columns in the order above, read fresh from `backlog/tasks/` on every request. No build step,
-no regeneration; a refresh is the reload.
+no regeneration; a refresh is the reload. In the lab the columns keep a fixed width and the row
+scrolls sideways, rather than wrapping into a stack beside two sidebars.
 
 - **Ready for review is drawn to be seen**, because it is the human review queue and the whole
   reason the model changed — violet rule, violet dot, *waiting on you* under the name, a tinted panel
@@ -110,21 +121,19 @@ printed `0 ticket(s)` until 2026-09-22). It renders from the same module and is
 board is writable exactly when `renderBoard` is given an endpoint, and a `file://` page has nothing
 listening behind it.
 
-**The board's corner links** are an option (`links`), not the hardcoded `/` and `/lab` they were
-until 2026-09-22. Through `orbytesLab()` they are filled in from the lab's own resolved `subpath`,
-so the "Lab" link is derived from the value the routes are injected at rather than agreeing with it
-by luck.
+**The standalone board's corner links** are an option (`links`), not the hardcoded `/` and `/lab`
+they were until 2026-09-22. Inside the lab there are none — the lab's own menu is right there.
 
 ## The write path
 
 One endpoint, `POST <route>/api/ticket`, registered in `astro:server:setup` — which does not exist
 in a build, so it cannot reach `dist/`.
 
-**`route` shadows a host page at the same path.** The board and this endpoint are middleware,
-installed ahead of Astro's own request handler, so a site with its own `src/pages/pin.astro` gets
-the board instead of its page — in dev only, and with nothing on screen to explain it. The default
-stays `/pin`: it is the address every document here names. A site that owns
-that path sets `pin: { route: "/__pin" }`.
+**The endpoint, the screenshots and the `/pin` redirect are middleware**, installed ahead of
+Astro's own request handler, so they shadow a host page at the same path — in dev only. Through
+`orbytesLab()` the route is `<subpath>/tasks`, which no site page is likely to be; the one exposed
+address is `/pin`, which redirects. On its own, without the lab, the pin half still serves its
+standalone board at `route`, default `/pin`.
 
 ```json
 { "id": "PIN-004", "status": "Ready for review", "expect": { "status": "In Progress" } }
@@ -205,8 +214,8 @@ Pass these as `orbytesLab({ pin: { … } })`.
 | `archiveDir` | `~/.orbytes/feedback-archive` | Canonical screenshot home; the repo copy is a hardlink into it. |
 | `project` | the checkout's folder name | The folder under `archiveDir` this project's screenshots live in. Two clones of **different** repos under one folder name share an archive silently, one overwriting the other's `pin-007.png` — set it where that is possible. |
 | `shots` | `true` | `false` writes tickets and takes no screenshots. |
-| `route` | `"/pin"` | Where the board is served. `<route>/assets/*` serves its screenshots, `<route>/api/ticket` is the write endpoint. **It shadows a host page at that path** — see *The write path*. Trailing slashes are stripped. The toolbar app reads the resolved value too (it fetches the ticket list from it and its **Board ↗** button opens it), through the virtual module below — until 2026-09-22 it carried a literal `/pin`, so setting this left the panel fetching a path nothing serves. |
-| `links` | the lab's resolved subpath | The board's corner links, `[{ href, label }]`. `[]` draws none. |
+| `route` | `"<subpath>/tasks"` (`"/pin"` without the lab) | Where the board is served. `<route>/assets/*` serves its screenshots, `<route>/api/ticket` is the write endpoint; in the lab, `<route>` and `<route>/all` are the two views. Trailing slashes are stripped. The toolbar app reads the resolved value too (it fetches the ticket list from it and its **Board ↗** button opens it), through the virtual module below — until 2026-09-22 it carried a literal `/pin`, so setting this left the panel fetching a path nothing serves. |
+| `links` | the lab's resolved subpath | The standalone board's corner links, `[{ href, label }]`. `[]` draws none. |
 | `appId` / `appName` / `icon` | `"orbytes-pin"` / `"Pin"` / `"bug"` | The dev-toolbar app's identity. |
 
 ## What a ticket looks like
@@ -412,8 +421,9 @@ window, so clicking it again focuses that tab instead of opening another.
    app, no stamp.
 2. Both Vite plugins carry `apply: "serve"`, so they cannot load in a build even if they were
    registered.
-3. `astro:server:setup`, where every write lives — the ticket writer, the board and the
-   `/pin/api/ticket` endpoint — does not run in a build at all.
+3. `astro:server:setup`, where every write lives — the ticket writer, the screenshots and the
+   `<route>/api/ticket` endpoint — does not run in a build at all. The lab's two Tasks views are
+   injected past assertion 1, so they exist in `astro dev` and in no build.
 4. That hook returns early anyway when `astro:config:setup` stood down, so a host that runs the
    hooks in an order this package did not choose still gets nothing.
 

package/index.d.ts

@@ -23,14 +23,17 @@ export interface OrbytesLabOptions {
   directory?: string;
   /** Where the lab is served. Default `"/lab"`. */
   subpath?: string;
-  /** The consumer's token/stylesheet files, as Astrobook takes them. Default `[]`. */
+  /**
+   * The consumer's token/stylesheet files. They reach the PREVIEW only — the bare story each
+   * component page shows in its canvas — never the lab's own chrome. Default `[]`.
+   */
   css?: string[];
   /**
-   * A path to the consumer's own head component, rendered inside the lab's head — how fonts and
-   * anything else site-specific reach lab pages. Relative to the project root.
+   * A path to the consumer's own head component, rendered inside every story preview's head — how
+   * fonts and anything else site-specific reach the previews. Relative to the project root.
    */
   head?: string;
-  /** The lab's name, shown in the dashboard. Default `"Component lab"`. */
+  /** The site's name as the lab shows it (the tab title, the home page). Default `"Component lab"`. */
   title?: string;
   /**
    * The deployed lab's base URL — the real minified build, which a dev server is not. Every card
@@ -53,13 +56,32 @@ export interface OrbytesLabOptions {
    * the entry says otherwise.
    */
   tiers?: (string | LabTierOption)[];
+  /**
+   * The screen sizes the viewport offers. Every key is optional; an omitted one keeps the default
+   * (the orbytes scale).
+   */
+  viewports?: {
+    /**
+     * The widths the design is drawn at — the navbar's device switch, in order. `icon` is one of
+     * `monitor`, `tablet`, `phone-landscape`, `phone`.
+     * @default 1440 desktop · 834 tablet · 550 phone landscape · 390 phone
+     */
+    design?: { label: string; width: number; icon?: string }[];
+    /**
+     * The lower edge of each CSS band; the last is 0. The readout names the band the frame is in,
+     * and the presets offer both sides of every edge.
+     * @default desktop 992 · tablet 768 · phone landscape 480 · phone 0
+     */
+    breakpoints?: { name: string; min: number }[];
+    /** Named sizes that set width AND height. @default iPhone 15, iPad, MacBook, … */
+    devices?: { label: string; width: number; height: number }[];
+  };
   /**
    * The pin board — the dev-only click-to-ticket feedback half of this package (`docs/PIN.md`).
    *
-   * `true` or omitted ships it at `/pin` with its defaults; `false` omits it entirely, for a site
-   * that wants the component lab alone. An object is the pin integration's own options, and the
-   * lab fills in `links` from its RESOLVED `subpath` so the board's "Lab" link is derived rather
-   * than guessed — pass your own `links` to override that.
+   * `true` or omitted ships it at `<subpath>/tasks` (the lab's Kanban Board and All Tasks views),
+   * with `/pin` redirecting there; `false` omits it entirely, for a site that wants the lab alone.
+   * An object is the pin integration's own options.
    *
    * @default true
    */
@@ -95,11 +117,12 @@ export interface OrbytesPinOptions {
   shots?: boolean;
   /**
    * Where the board is served, dev only. `<route>/assets/*` serves its screenshots and
-   * `<route>/api/ticket` is the one write endpoint.
+   * `<route>/api/ticket` is the one write endpoint; through `orbytesLab()`, `<route>` and
+   * `<route>/all` are the lab's Kanban Board and All Tasks views.
    *
-   * It is MIDDLEWARE, installed ahead of Astro's own request handler, so it SHADOWS a host page at
-   * the same path — in dev, silently. A site with its own `/pin` page sets something else here.
-   * @default "/pin"
+   * Its asset and API paths are MIDDLEWARE, installed ahead of Astro's own request handler, so they
+   * shadow a host page at the same path — in dev, silently.
+   * @default "<subpath>/tasks" through orbytesLab(), "/pin" on its own
    */
   route?: string;
   /**
@@ -117,9 +140,10 @@ export interface OrbytesPinOptions {
 }
 
 /**
- * The orbytes component lab AND the pin board: the Astrobook core vendored into this package
- * (`src/core/`, 0.13.3), the lab shell around it, and the dev-only feedback board at `/pin`. Astro
- * flattens the returned array, so one entry in `integrations` configures all three.
+ * The orbytes lab AND the pin board: the Astrobook core vendored into this package
+ * (`src/core/`, 0.13.3), the lab's chrome around it, and the dev-only feedback board at
+ * `<subpath>/tasks`. Astro flattens the returned array, so one entry in `integrations` configures
+ * all three.
  *
  * `pin: false` returns the lab alone.
  */
@@ -206,7 +230,7 @@ export const OPEN_STATUSES: readonly PinStatus[];
 export function normaliseStatus(status: unknown): string;
 /** Open — neither accepted nor cancelled. `isOpen("Done")` is `false`. */
 export function isOpen(status: unknown): boolean;
-/** Archived. Every agent-facing read drops these; `/pin` is the one place they are visible. */
+/** Archived. Every agent-facing read drops these; the board is the one place they are visible. */
 export function isCancelled(status: unknown): boolean;
 /** May an agent START work on this ticket? Exactly one status says yes. */
 export function isAgentReady(status: unknown): boolean;