From 8979fa1946ce1602257890d66bac5588af0d7428 Mon Sep 17 00:00:00 2001
From: Evanfeenstra <evanfeenstra@gmail.com>
Date: Tue, 10 Nov 2026 20:57:33 -0800
Subject: [PATCH 1/2] Store front: a redesign, and the Concepts as a tree
 instead of 752 chips

The store (`?store=1`, index.stakwork.ai) wore the admin console's 12 px
type and palette, and a package's page listed every Concept it carries as
a chip: openlaw/legal-desk's page was 32,500 px tall.

- Concepts are one tree everywhere (`ConceptTree`): the roots with their
  counts, a branch opened in place and its children drawn only then, a
  filter over every page. The package page and the Concepts page share
  it; "Under this page" and search results are rows, 24 at a time.
  `conceptChildren` (store-links.ts, tested) is the tree's branches.
- The top search returns the matching Concept pages as well as packages;
  `/` focuses it.
- The look: its own scale and a darker palette (the shell's variables
  redefined on `.store`), a hero with the index's counts, cards, a
  package header with a stat strip that jumps to each part, workflows as
  rows that open to their inputs, steps and agent tools, a sticky aside,
  skeletons while a read is out, a phone layout. A "For agents" block
  carries the one line that adds the store to an MCP client.
- `GET /index/packages/:publisher/:name?docs=0` leaves each Concept
  page's text out (`withoutConceptDocs`); the store reads a package that
  way. legal-desk's page was 2.7 MB of JSON for a tree drawn from names.
- `STRUT_DEV_INDEX=<url> npm run dev` (web/vite.config.ts; the `store`
  entry in .claude/launch.json) runs this checkout's store over a
  deployed index's open reads.
---
 .claude/launch.json           |   6 +
 AGENTS.md                     |   8 +-
 specs/API.md                  |   2 +-
 src/createStrut.ts            |   8 +-
 src/packages/index.test.ts    |  10 +-
 src/packages/index.ts         |  10 +-
 web/src/api.ts                |   4 +-
 web/src/components/Store.tsx  | 573 ++++++++++++++++++++----------
 web/src/icons.tsx             |  12 +
 web/src/store-links.test.ts   |  10 +-
 web/src/store-links.ts        |  19 +
 web/src/styles/components.css | 646 +++++++++++++++++++++++++++-------
 web/vite.config.ts            |   6 +-
 13 files changed, 974 insertions(+), 340 deletions(-)

diff --git a/.claude/launch.json b/.claude/launch.json
index 91e9a66a..f5547550 100644
--- a/.claude/launch.json
+++ b/.claude/launch.json
@@ -6,6 +6,12 @@
       "runtimeExecutable": "npm",
       "runtimeArgs": ["--prefix", "web", "run", "dev"],
       "port": 5173
+    },
+    {
+      "name": "store",
+      "runtimeExecutable": "env",
+      "runtimeArgs": ["STRUT_DEV_INDEX=https://index.stakwork.ai", "npm", "--prefix", "web", "run", "dev", "--", "--port", "5183", "--strictPort"],
+      "port": 5183
     }
   ]
 }
diff --git a/AGENTS.md b/AGENTS.md
index f44c5fbc..8dc87ba8 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -261,7 +261,7 @@ strut/
         ├── attachments.ts # the chat composer's files read for `POST /chat` (a PNG/JPEG past 1568 px scaled down first; the server's limits checked early)
         ├── automation-form.ts # the Automations editor's flat form state ⇄ trigger draft (pure; no calendar math — the server owns that)
         ├── earnings.ts    # Earnings' pure parts (plans/paid-runs.md §8; tested): fmtUsd / fmtSats, subjectLabel, the ranges, priceLine, withdrawBlocked (why Withdraw is off), maxWithdrawMsat, readWithdrawInvoice (the invoice read with src/payments/bolt11.ts and its fee cap from fee.ts — what the person confirms is what the route checks; the network left to the wallet), withdrawRefusal (a refusal said for a person)
-        ├── store-links.ts # the STORE FRONT's pure parts (plans/marketplace.md §7; tested): parseStoreView / storeQuery (what `?store=1&pkg=|concept=|q=` names), the DEEP LINK out of the store — `installLink(strut, { pkg, index: { key, url } })` → `<strut>/?install=<name>&index=<key>&index_url=<catalog url>`, `parseInstallLink` (the shell's side), `indexIdOf` (the id a strut files a followed index under: its host), `normalizeStrutUrl` — and the folds the page draws from the open reads: `appsOf` (the hits' apps first, by title), `conceptRoots` (the tree's roots with how much sits under each), `canWords`
+        ├── store-links.ts # the STORE FRONT's pure parts (plans/marketplace.md §7; tested): parseStoreView / storeQuery (what `?store=1&pkg=|concept=|q=` names), the DEEP LINK out of the store — `installLink(strut, { pkg, index: { key, url } })` → `<strut>/?install=<name>&index=<key>&index_url=<catalog url>`, `parseInstallLink` (the shell's side), `indexIdOf` (the id a strut files a followed index under: its host), `normalizeStrutUrl` — and the folds the page draws from the open reads: `appsOf` (the hits' apps first, by title), `conceptRoots` (the tree's roots with how much sits under each), `conceptChildren` (the pages under each page, by name: what the tree opens a level at a time), `canWords`
         ├── store-run.ts   # the store's RUN FORM, its pure parts (plans/paid-runs.md §10 "The store"; tested): `priceWords` / `priceBadge` / `priceNotes` (free, fixed, metered, both; the reserve; what recent runs were charged), `runFields` (a workflow's `input:` block as the Run popover draws it — run-inputs.ts `bindingsFromInputBlock` — or a step's input JSON Schema), `inputOf` (the values as an input: empty left out, numbers and JSON read, a required one asked for), `httpCallResult` (a publisher's HTTP answer in the shape `callPaying` reads: 2xx its body, 402 `{ payment_required }`, else an error with its code and `Retry-After`), `newLaunchKey` (one per press), the runs a tab launched (`loadRuns` / `rememberRun`, `RUNS_KEPT`), `runFileUrl` (a run's file on its publisher, the run token as `?t=`), the sessionStorage keys per publisher
         ├── store-purse.ts # what the store page holds per publisher's server (browser glue over ./visitor-pay and ./store-run): `storePurse(base)` — the purse (credential, spares, invoices shown) and the runs launched there in this page's `sessionStorage` (`strut.store.purse:<base>`, `strut.store.runs:<base>`), one claim keeper per server resumed at load (`api.liveClaim`), one sheet at a time (`payInTurn`); `payWith` — show a challenge's sheet with its invoice claimed from that moment, a top-up replacing the credential it carries from
         ├── package-release.ts # the Packages tab's pure parts (plans/packages-ux.md): pickerGroups (the workflows a package may take, by category — an installed package's, a seed's and a service's left out), sidebarGroups / nameInGroup / installedTitle (the sidebar's groups: an installed package's workflows a group of its own, drawn from `GET /packages` and never written — its segment as the label, its version beside it, each workflow by its name inside the package), comesAlong (what a dry build carries beyond the picks, the picks it leaves to the host, and `needs` — its `leftToInstaller`, shown once as "Needs on the installing strut"), picksFromRelease (what a release held, as the names here; a Concept the release carried alone, `alone` on its items, picked alone again), packageLabel, nextVersion (the last number up by one), PACKAGE_NAME, PACKAGE_SEGMENT (tested)
@@ -285,7 +285,7 @@ strut/
         │   ├── AppHost.tsx           # an app's page, hosted (plans/apps.md §7.3): the version's files listed (`useFileScope` mints the token), `dist/index.html` fetched under it (the server writes the app's identity into it), the TEXT framed as the srcdoc of `<iframe sandbox="allow-scripts allow-downloads allow-forms">` — an opaque origin, never `allow-same-origin`, no src with a credential; `allow-forms` so a `<form onSubmit>` fires its handler (the CSP's `form-action 'none'` still refuses the submission); never a `blob:` URL, whose document has its creator's `location.origin` and the whole URL as its pathname, which kills a validator in the MCP SDK's bundle at module time — with the relay (../app-host) connected over the frame's window BEFORE the document loads. The canvas area when an app is selected (the sidebar's Apps section, `?app=`), or the whole window with `&solo=1` (SoloApp.tsx) — in both inside AppWithPanel.tsx, so a file or another app the page links to opens beside it — an app of this strut there under a version chip (`panelChip`, app-versions.ts) listing its versions to VIEW in place, never to make live; the topbar shows its title, a chip with the live version and the drafts waiting (`v8 · live · 3 drafts`) that opens AppVersionsFlyout.tsx, a **Tab** toggle beside it (`PUT /apps/:name/pin`: shown as a tab in the hosts that list this workspace's apps; the sidebar's Apps list puts pinned apps first, marked `tab`) and **Edit with the builder** (the chat with the app named); a page's `ui/message` is sent on the builder chat; an `app_publish` in the chat reloads the frame. `app` is a workspace app `{ name, version }`. A visitor's priced launch shows PaymentSheet.tsx OVER the frame (never in it): the price in dollars and sats, what it is for, the invoice as a QR code (`qrcode-generator`) with Copy, waiting on the relay's claim (which outlives the sheet: a phone that pays after Cancel still buys credit), Cancel, a new invoice when one expired; the credential goes to the relay, which sends the page's call again
         │   ├── AppVersionsFlyout.tsx # an app's Versions (plans/app-releases.md), the topbar's version chip: the mode ("Every publish goes live" / "Hold a version"), the live version (since when, by whom), one row per version newest first — live, was live, draft (web/src/app-versions.ts, tested) — with View (this browser only: the frame shows it under a banner with Make live and Back to live), Make live, or Restore for a version that was live (its newest release); every change asks first; release ids only in History. No workflow version numbers: the lock's `behind` and `floating` are not shown until runs keep to the lock (work item 2)
         │   ├── AppUsageFlyout.tsx    # an app's Usage (`GET /apps/:name/usage`, src/apps/monitor.ts), the topbar's **Usage** button beside the app's version chip: the live version's warnings first (each with its fix and, for an app here, **Ask the builder to fix it** — a chat draft the person sends), calls per minute over the hour, the day by step type, earlier versions' warnings dim; refreshed every 10 s while open. The warning dot (`.usage-dot`) sits on the app's sidebar row, the Apps title and the Usage button while `GET /apps` carries `warnings`; the shell re-reads this strut's apps every 30 s for it
-        │   ├── Store.tsx             # the STORE FRONT (`?store=1`, plans/marketplace.md §7; specs/API.md §14.3): an index strut's public page, rendered ALONE in place of the shell for anyone with no credential, over the open reads alone (`api.storeCatalog` / `storeSearch` / `storePackage` / `storeConcepts` / `storeConcept`: a plain fetch, never the key) — Browse (the apps across the hits first, each a package's face off `detail`; the packages; the Concept roots; the publishers off the signed card; a footer saying it is all derived), a package's page (apps, the workflows table with inputs and what each reaches — the `spends` / `acts` / `code` chips, `CanChips` — the steps with secrets and lint, the Concepts, the README; the aside: needs, the publisher's key, releases and channels), the Concept pages as a wiki (tree, docs, children, in which packages). Nothing installs here: **Install into your strut** is `installLink` into the visitor's own strut ("Your strut", kept in localStorage; else asked, the name to paste beside it). On a strut without the role: "Not a store". LIVE items (plans/public-surface.md §8): the index's live rows (`PUT /index/live/:prefix { url }`, the card's `live` map beside `publishers`, read at the row and every crawl; `GET /index/live`) show as **Live apps** and **Live workflows and steps** on Browse, each a page read from its publisher's `/public` in the visitor's browser (an app framed from `?app=&solo=1&public=1` with "Open full page"; a workflow's inputs, steps and recent runs; a step's fields and source), and a Concept only a live view holds reads its docs from there. A live workflow or step anyone may RUN (plans/paid-runs.md §10 "The store"; its price badge on Browse off the index's `run`) gets, read fresh from its publisher's `/public` `runnable` (a runnable-only item's definition 404s and is said not to be public), a PRICE card (`priceWords`, the reserve, what recent runs were charged) and a **Run** (or **Call**) form drawn from its input (`RunPanel`, ConfigField over web/src/store-run.ts `runFields`): the launch goes to the publisher from the visitor's browser with no credential of anyone's, one `key` per press sent again with every retry (after a payment, after a dropped request — a call is never sent twice); a 402 shows PaymentSheet.tsx and the paying loop is ../visitor-pay's `callPaying` over the HTTP answers (`httpCallResult`, whose errors carry their `code` and `status`, so only the door's own 401 `invalid_token` drops the credential — never a step's failure that mentions it, which is never sent again); the credit and every invoice shown live per publisher in this page's `sessionStorage` (web/src/store-purse.ts), claimed until it settles or ends whether or not the sheet is open; the runs this tab launched are read back with their run tokens until they end (`RunView`: status, output, files, what it was charged; a run that ended with its charge pending says so, `runEnded`), and the credit line refreshes then; the credit lives in the tab, and **Your credit lives in this tab** shows the credential on request (Copy) and takes one pasted back (checked with `GET /public/credit`) — never in a URL
+        │   ├── Store.tsx             # the STORE FRONT (`?store=1`, plans/marketplace.md §7; specs/API.md §14.3): an index strut's public page, rendered ALONE in place of the shell for anyone with no credential, over the open reads alone (`api.storeCatalog` / `storeSearch` / `storePackage` / `storeConcepts` / `storeConcept`: a plain fetch, never the key) — Browse (a hero with the index's counts; the apps across the hits first, each a package's face off `detail`; the packages; the Concept roots as cards; the publishers off the signed card; the one line that adds the store to an MCP client; a footer saying it is all derived; a search, `/` to focus it, returns the matching packages and Concept pages), a package's page (read with `?docs=0`; its counts as a strip that jumps to each part; apps; the workflows as rows that open to their inputs, steps and agent tools, with what each reaches — the `spends` / `acts` / `code` chips, `CanChips`; the steps with secrets and lint; the Concepts as a TREE, `ConceptTree`: the roots with their counts, a branch opened in place and its children drawn only then, a filter over every page through `src/search.ts` — never one flat list, a package carries hundreds; the README; the aside: needs, the publisher's key, releases and channels), the Concept pages as a wiki (the same tree as the index; a page's docs, its children as rows 24 at a time, in which packages). Its own scale and a darker palette: components.css redefines the shell's palette variables on `.store`, so the shared `.btn`, `.badge` and `.md-view` follow. Nothing installs here: **Install into your strut** is `installLink` into the visitor's own strut ("Your strut", kept in localStorage; else asked, the name to paste beside it). On a strut without the role: "Not a store". LIVE items (plans/public-surface.md §8): the index's live rows (`PUT /index/live/:prefix { url }`, the card's `live` map beside `publishers`, read at the row and every crawl; `GET /index/live`) show as **Live apps** and **Live workflows and steps** on Browse, each a page read from its publisher's `/public` in the visitor's browser (an app framed from `?app=&solo=1&public=1` with "Open full page"; a workflow's inputs, steps and recent runs; a step's fields and source), and a Concept only a live view holds reads its docs from there. A live workflow or step anyone may RUN (plans/paid-runs.md §10 "The store"; its price badge on Browse off the index's `run`) gets, read fresh from its publisher's `/public` `runnable` (a runnable-only item's definition 404s and is said not to be public), a PRICE card (`priceWords`, the reserve, what recent runs were charged) and a **Run** (or **Call**) form drawn from its input (`RunPanel`, ConfigField over web/src/store-run.ts `runFields`): the launch goes to the publisher from the visitor's browser with no credential of anyone's, one `key` per press sent again with every retry (after a payment, after a dropped request — a call is never sent twice); a 402 shows PaymentSheet.tsx and the paying loop is ../visitor-pay's `callPaying` over the HTTP answers (`httpCallResult`, whose errors carry their `code` and `status`, so only the door's own 401 `invalid_token` drops the credential — never a step's failure that mentions it, which is never sent again); the credit and every invoice shown live per publisher in this page's `sessionStorage` (web/src/store-purse.ts), claimed until it settles or ends whether or not the sheet is open; the runs this tab launched are read back with their run tokens until they end (`RunView`: status, output, files, what it was charged; a run that ended with its charge pending says so, `runEnded`), and the credit line refreshes then; the credit lives in the tab, and **Your credit lives in this tab** shows the credential on request (Copy) and takes one pasted back (checked with `GET /public/credit`) — never in a URL
         │   ├── AppRail.tsx           # the COLLAPSED sidebar (the toggle beside "strut", `sidebarCollapsed` in localStorage): one tile per app — two letters, a hue from its key, pinned first, the usage dot — its title in a tooltip fixed to the window; a click opens the app. The sections stay mounted, hidden, so each keeps its scroll
         │   ├── AppWithPanel.tsx      # an app's page with a SIDE PANEL beside it (plans/jamie-app.md §4, §4.1): what the app cannot show in its own document (`frame-src 'none'`, `run/files` 2 MB) it hands over as a strut deep link through `ui/open-link`, and this host opens `?artifact=<served path>` (`isServedFilePath`: a job's files, a run's artifacts, a peer's read-through) through ArtifactViewer (`solo` + `onClose`) and `?app=<key>` (another app, a peer's too) through AppHost under a title bar, instead of navigating away — the page keeps its frame and its state. `panelTarget` (app-links.ts) decides; a new link replaces the panel's content (an app's new input in place), ✕ closes it, its left edge resizes it (`WidthResizer`, `--app-panel-width` on `.app-split`, `strut.appPanelWidth` in localStorage), and in a container under 760 px it lies over the page (a container query). The panel's own app links the same way. A link to the page itself, a workflow, a run or a job goes to the caller's `onNavigate` as before. Not in the address bar: a reload closes it. No panel for a visitor's page. Used by the canvas-area host (app.tsx) and SoloApp.tsx, not by the job timeline's or the viewer's app
         │   ├── MemberApps.tsx        # a MEMBER's page (plans/member-rights.md): the apps here (`GET /apps`, strut/views left out, strut/jamie first, then pinned, then by title), each opening alone as `?app=<name>&solo=1` — what a member who opens strut directly gets instead of the shell
@@ -373,6 +373,10 @@ cd strut/web
 npm install
 npm run dev                 # Vite on :5173, proxies API to :3000
 
+# The store front (`?store=1`) of this checkout over a deployed index's open reads
+# (web/vite.config.ts proxies `/index` there; `.claude/launch.json`'s `store` runs it on :5183):
+cd strut/web && STRUT_DEV_INDEX=https://index.stakwork.ai npm run dev   # → http://localhost:5173/?store=1
+
 # Web UI (production build, served by engine)
 cd strut/web && npm run build  # outputs web/dist/
 cd strut && npm run dev        # serves API + UI on :3000
diff --git a/specs/API.md b/specs/API.md
index 4cfe27fc..81241456 100644
--- a/specs/API.md
+++ b/specs/API.md
@@ -2289,7 +2289,7 @@ installed it, it can be a mirror. `file:`, `pk:` and `git+` refs resolve
 | POST   | `/index/requests/:id/refuse` | `{ reason }` → the refusal: the request dropped, and a re-send from that key for that name answered with `reason` for 30 days, without a fetch. Full scope; 404 `listing_unknown` |
 | GET    | `/index/catalog[?digest=]` | The INDEX card as served (RFC 8785 bytes, sealed under `strut-index\n` by the index key; `ETag`, `If-None-Match` → 304; `cache-control: public`): `{ v, key, seq, publishers, urls?, sig }`. **Open to anyone.** A reader checks it with `readCard(bytes, { key, kind: "index" })`; 404 before the first row |
 | GET    | `/index/packages?q=&limit=` | `{ packages: IndexHit[] }` — every listed publisher's public packages, each at its newest release not yanked: `{ package, publisher, key, urls, version, digest, description?, license?, requires?, detail? }`; `q` as the sidebar's matcher (every word in the name, description or publisher), at most `limit` (100; ≤ 500). `detail` is the release's archive as the index READ it at the crawl (`src/packages/detail.ts`, below): `{ apps: [{ name, title, description?, icon?, can }], workflows, steps, concepts (counts), secrets, can: { spends, acts, code }, readme }` — absent until the archive has been fetched. **Open to anyone**; derived and unsigned — an install re-verifies against the publisher |
-| GET    | `/index/packages/:publisher/:name` | `IndexPackage`: `{ package, publisher, key, urls, description?, releases (newest first, yanked kept), channels: { "<public channel>": digest }, readAt, detail?, detailError? }`. `detail` is the newest release not yanked read off its archive — `PackageDetail`: `{ digest, version, derivedAt, readme?, apps: [{ name, title, description?, icon?, grants: { workflows, steps }, can, files }], workflows: [{ name, description?, inputs: [{ name, type, required, description?, default? }], steps, grants, can, secrets, peer?, sealed?, claims?, error? }], steps: [{ name, helper?, description?, effect?, secrets, lint: [string], bytes, claims? }], concepts: [{ name, description?, parent?, docs? }], secrets, can, files, bytes }` (names inside the package; `can` = what running it reaches: `spends` an `agent` / `llm` step, `acts` a step declaring `effect: "write"`, `code` an `exec` or one of the package's own steps; the steps' facts are regexes over the source, the lint `src/step-lint.ts`'s findings — a reading, never a check); `detailError` says why there is none (the archive not fetched yet, or unreadable). **Open to anyone**; 404 when no listed publisher's catalog has it |
+| GET    | `/index/packages/:publisher/:name` | `IndexPackage`: `{ package, publisher, key, urls, description?, releases (newest first, yanked kept), channels: { "<public channel>": digest }, readAt, detail?, detailError? }`. `detail` is the newest release not yanked read off its archive — `PackageDetail`: `{ digest, version, derivedAt, readme?, apps: [{ name, title, description?, icon?, grants: { workflows, steps }, can, files }], workflows: [{ name, description?, inputs: [{ name, type, required, description?, default? }], steps, grants, can, secrets, peer?, sealed?, claims?, error? }], steps: [{ name, helper?, description?, effect?, secrets, lint: [string], bytes, claims? }], concepts: [{ name, description?, parent?, docs? }], secrets, can, files, bytes }` (names inside the package; `can` = what running it reaches: `spends` an `agent` / `llm` step, `acts` a step declaring `effect: "write"`, `code` an `exec` or one of the package's own steps; the steps' facts are regexes over the source, the lint `src/step-lint.ts`'s findings — a reading, never a check); `detailError` says why there is none (the archive not fetched yet, or unreadable). `?docs=0` leaves each Concept page's `docs` out (the store's read: a page's text is `/index/concepts/:name`'s). **Open to anyone**; 404 when no listed publisher's catalog has it |
 | GET    | `/index/concepts?q=` | `{ concepts: IndexConcept[] }` — every Concept page across the crawled packages AND the live rows' public trees, one per name: `{ name, description?, parent?, packages: [{ package, version }], live?: [{ publisher, url }] }` (the first package by name gives the description and parent, then a live tree's; a page only a live view holds has `packages: []`, and its docs are read from `<url>/public/concepts/<name>`; `q` over names and descriptions). **Open to anyone** |
 | GET    | `/index/concepts/:name` | `IndexConceptPage`: the entry plus `docs?` (the first package's text), `children: [{ name, description? }]` (the pages naming this one as parent) and `parents` (nearest first). **Open to anyone**; 404 when no listed package carries it |
 | GET    | `/llms.txt` | On an index strut, the store as ONE markdown page for an agent that fetches URLs (llmstxt.org; `llmsTxt`, `src/packages/index-tools.ts`), `text/markdown`: an H1 naming the index, a blockquote saying what it is (derived, unsigned past the card, an install re-verifies against the publisher), how an agent reaches it (the `claude mcp add` line for `/index/mcp`) and that a PERSON installs; then `## Reads` (the five open routes above, each a link), `## Packages` (every listed package at its newest release — `- [publisher/name](…/index/packages/publisher/name): description — version; N workflows, M steps, K apps; needs SECRET; spends (model calls), acts on the world, runs code`), `## Concepts` (every page the packages carry, each a link to `/index/concepts/<name>`, its parent and packages) and `## Optional` (the store page `?store=1` when the index serves the UI), and, when this strut also lets anyone run something, `# Run on this server` with §17.8's run and tool lists. **Open to anyone**. On a strut without the role it is the public view's page (§17.8), and `404` when nothing is public |
diff --git a/src/createStrut.ts b/src/createStrut.ts
index 12263c60..7103f3ce 100644
--- a/src/createStrut.ts
+++ b/src/createStrut.ts
@@ -111,7 +111,7 @@ import { packArchive } from "./packages/archive.js";
 import { buildPackage, type BuildRequest } from "./packages/build.js";
 import { PUBLISHER_FILE, PUBLISHER_NAME, catalogStore, moveChannel, publicCatalogStore, publishRelease, publisherStore } from "./packages/publisher.js";
 import { SUBSCRIPTIONS_FILE, createSubscriptions, subscriptionProblem, type Subscription, type Subscriptions } from "./packages/subscriptions.js";
-import { createPackageIndex, indexDir, indexRowProblem, liveRowProblem, type PackageIndex } from "./packages/index.js";
+import { createPackageIndex, indexDir, indexRowProblem, liveRowProblem, withoutConceptDocs, type PackageIndex } from "./packages/index.js";
 import { INDEXES_FILE, createIndexes, indexSubscriptionProblem, parseIndexesEnv, type IndexSubscription, type PackageIndexes, type PackagesCapability } from "./packages/indexes.js";
 import { PUBLISHER_PREFIX, Z32_KEY, releaseFor, type IndexLiveRow, type IndexRow } from "./packages/card.js";
 import { LISTING_MAX_BYTES, hostPatternProblem, perMinute } from "./packages/listing.js";
@@ -4731,7 +4731,11 @@ export async function createStrut<TServices = unknown>(
     app.get("/index/packages/:publisher/:name", async (c) => {
       const name = `${c.req.param("publisher")}/${c.req.param("name")}`;
       const page = await index.package(name);
-      return page ? c.json(page, 200, { "cache-control": "public, no-cache" }) : c.json({ error: `no listed publisher's catalog has ${name}` }, 404);
+      if (!page) return c.json({ error: `no listed publisher's catalog has ${name}` }, 404);
+      // `?docs=0`: without each Concept page's text. The store draws a
+      // package's tree from names alone and reads one page's docs from
+      // `/index/concepts/:name`; a package of 750 pages is megabytes of them.
+      return c.json(c.req.query("docs") === "0" ? withoutConceptDocs(page) : page, 200, { "cache-control": "public, no-cache" });
     });
     // The Concept pages across every crawled package (plans/marketplace.md
     // §7, the store): the tree, and one page with its docs.
diff --git a/src/packages/index.test.ts b/src/packages/index.test.ts
index c947cc4a..41e7d797 100644
--- a/src/packages/index.test.ts
+++ b/src/packages/index.test.ts
@@ -22,7 +22,7 @@ import { MemoryRunStore } from "../store.js";
 import { WorkspaceManager } from "../workspace.js";
 import { INDEX_DOMAIN, readCard, type IndexCatalog } from "./card.js";
 import { buildIndexTools, indexInstructions, llmsTxt } from "./index-tools.js";
-import { createPackageIndex, type IndexConcept, type IndexConceptPage, type IndexHit, type IndexInfo, type IndexPackage } from "./index.js";
+import { createPackageIndex, withoutConceptDocs, type IndexConcept, type IndexConceptPage, type IndexHit, type IndexInfo, type IndexPackage } from "./index.js";
 import { packArchive } from "./archive.js";
 import { PackageCache } from "./cache.js";
 import { canonicalJson, keyFromSeed, sealCard, type Catalog } from "./card.js";
@@ -232,6 +232,7 @@ describe("the package index", () => {
     assert.equal((await search("linear acme")).length, 1, "every word, in the name or the publisher");
     assert.equal((await fetch(`${indexUrl}/index/packages/acme/notion`)).status, 404);
     const page = (await (await fetch(`${indexUrl}/index/packages/acme/linear`)).json()) as IndexPackage;
+    assert.deepEqual(await (await fetch(`${indexUrl}/index/packages/acme/linear?docs=0`)).json(), page, "docs=0 leaves out only Concept pages' text, and this package has none");
     assert.equal(page.package, "acme/linear");
     assert.deepEqual(page.releases.map((r) => r.version), ["1.0.0"]);
     assert.deepEqual(page.channels, { public: linear.digest });
@@ -564,6 +565,13 @@ describe("the concept tree across the crawled packages", () => {
     assert.deepEqual((await index.concepts("civil")).map((c) => [c.name, c.parents]), [["Civil procedure", ["Law"]]]);
     assert.deepEqual((await index.package("openlaw/civil"))!.detail!.concepts.find((c) => c.name === "Civil procedure")!.parents, ["Law"]);
 
+    // The store's read of a package (`?docs=0`): the tree's names and parents, no page's text.
+    const whole = (await index.package("openlaw/civil"))!;
+    assert.match(whole.detail!.concepts.find((c) => c.name === "Statute of limitations")!.docs!, /How long you have/);
+    const slim = withoutConceptDocs(whole);
+    assert.deepEqual(slim.detail!.concepts.map((c) => [c.name, c.parents, "docs" in c]), whole.detail!.concepts.map((c) => [c.name, c.parents, false]));
+    assert.deepEqual({ ...slim, detail: undefined }, { ...whole, detail: undefined }, "nothing else of the page changes");
+
     // The index's tools (./index-tools.ts) over the same functions: the page a model reads (Concept docs left out), the tree, one page — each linking its store page when a store is served.
     const server = await toolsetServer({ tools: buildIndexTools(index, { store: "https://store.example" }), instructions: indexInstructions({ publicUrl: "https://store.example", store: "https://store.example" }) });
     const [clientSide, serverSide] = InMemoryTransport.createLinkedPair();
diff --git a/src/packages/index.ts b/src/packages/index.ts
index e1ceab1b..5a9252df 100644
--- a/src/packages/index.ts
+++ b/src/packages/index.ts
@@ -25,7 +25,7 @@ import { fetchArchive } from "./archive.js";
 import type { PackageCache } from "./cache.js";
 import { CARD_VERSION, PUBLISHER_PREFIX, Z32_KEY, canonicalJson, keyFromSeed, releaseFor, sealCard, type Catalog, type CatalogRelease, type IndexCatalog, type IndexLiveRow, type IndexRow, type UnsignedIndexCatalog } from "./card.js";
 export type { IndexLiveRow, IndexRow } from "./card.js";
-import { derivePackageDetail, summarizeDetail, type DetailSummary, type PackageDetail, type StepFacts } from "./detail.js";
+import { derivePackageDetail, summarizeDetail, type ConceptDetail, type DetailSummary, type PackageDetail, type StepFacts } from "./detail.js";
 export type { AppDetail, ConceptDetail, DetailSummary, PackageCan, PackageDetail, StepDetail, WorkflowDetail } from "./detail.js";
 import { fetchCatalog, releaseUrls } from "./pk.js";
 import { CatalogStore, type CatalogFile } from "./publisher.js";
@@ -204,6 +204,14 @@ export interface IndexPackage {
   detailError?: string;
 }
 
+/** A package's page without its Concept pages' text: what a reader that
+ *  draws the tree from names needs (the store, `?docs=0`; a model's brief
+ *  page). One page's docs are `concept(name)`'s. */
+export function withoutConceptDocs<T extends { detail?: PackageDetail }>(page: T): Omit<T, "detail"> & { detail?: Omit<PackageDetail, "concepts"> & { concepts: Array<Omit<ConceptDetail, "docs">> } } {
+  const { detail, ...rest } = page;
+  return detail ? { ...rest, detail: { ...detail, concepts: detail.concepts.map(({ docs: _docs, ...c }) => c) } } : rest;
+}
+
 /** One Concept page as the index knows it: across every crawled package. */
 export interface IndexConcept {
   name: string;
diff --git a/web/src/api.ts b/web/src/api.ts
index db2afc5a..6ceafede 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -2778,7 +2778,9 @@ async function storeJSON<T>(path: string): Promise<T> {
 }
 export const storeCatalog = () => storeJSON<IndexCard>("/index/catalog");
 export const storeSearch = (q = "", limit = 200) => storeJSON<{ packages: StoreHit[] }>(`/index/packages?q=${encodeURIComponent(q)}&limit=${limit}`).then((r) => r.packages);
-export const storePackage = (pkg: string) => storeJSON<StorePackage>(`/index/packages/${pkg.split("/").map(encodeURIComponent).join("/")}`);
+/** A package's page, without its Concept pages' text (`docs=0`): the tree is
+ *  drawn from names, and a page's docs are `storeConcept`'s. */
+export const storePackage = (pkg: string) => storeJSON<StorePackage>(`/index/packages/${pkg.split("/").map(encodeURIComponent).join("/")}?docs=0`);
 export const storeConcepts = (q = "") => storeJSON<{ concepts: StoreConcept[] }>(`/index/concepts?q=${encodeURIComponent(q)}`).then((r) => r.concepts);
 export const storeConcept = (name: string) => storeJSON<StoreConceptPage>(`/index/concepts/${encodeURIComponent(name)}`);
 /** Where this index's card is served, for the link into a strut: what the
diff --git a/web/src/components/Store.tsx b/web/src/components/Store.tsx
index b16d4c36..da425c24 100644
--- a/web/src/components/Store.tsx
+++ b/web/src/components/Store.tsx
@@ -1,10 +1,13 @@
-import { useEffect, useMemo, useState } from "preact/hooks";
+import type { ComponentChildren } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { searchWorkflows } from "../../../src/search.js";
 import * as api from "../api";
 import { formatBytes } from "../attachments";
 import { errorMessage } from "../helpers";
 import { GAME_ALLOW, GAME_SANDBOX, declaredAllow } from "../frame-permissions";
 import { load, remove, save } from "../storage";
-import { appsOf, canWords, conceptRoots, installLink, liveAppUrl, liveBase, normalizeStrutUrl, parseStoreView, shortKey, storeQuery, type InstallLink, type LiveKind, type StoreView } from "../store-links";
+import { ArrowRightIcon, ChevronRightIcon, SearchIcon } from "../icons";
+import { appsOf, canWords, conceptChildren, conceptRoots, installLink, liveAppUrl, liveBase, normalizeStrutUrl, parseStoreView, shortKey, storeQuery, type InstallLink, type LiveKind, type StoreView } from "../store-links";
 import { CopyButton } from "./CopyButton";
 import { Markdown } from "./Markdown";
 import { shortDigest } from "./PackagesPanel";
@@ -67,6 +70,7 @@ export function Store() {
   const [card, setCard] = useState<api.IndexCard | null | undefined>(undefined);
   const [cardError, setCardError] = useState<string | null>(null);
   const [target, setTarget] = useState<string | null>(() => load<string | null>(TARGET_KEY, null));
+  const search = useRef<HTMLInputElement>(null);
   useEffect(() => {
     api.storeCatalog().then(setCard, (err) => {
       setCard(null);
@@ -80,6 +84,18 @@ export function Store() {
       : view.view === "live" ? `${view.name} · ${view.publisher} · strut store`
       : "strut store";
   }, [view]);
+  // "/" puts the cursor in the search box, from anywhere but another field.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "/" || e.metaKey || e.ctrlKey || e.altKey) return;
+      const t = e.target as HTMLElement | null;
+      if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+      e.preventDefault();
+      search.current?.focus();
+    };
+    addEventListener("keydown", onKey);
+    return () => removeEventListener("keydown", onKey);
+  }, []);
   const setStrut = (url: string | null) => {
     if (url) save(TARGET_KEY, url);
     else remove(TARGET_KEY);
@@ -95,8 +111,8 @@ export function Store() {
           <span class="brand-dot" /> strut <span class="store-brand-sub">store</span>
         </button>
         <nav class="store-nav">
-          <button class={`store-nav-link${view.view === "browse" && !view.q ? " is-active" : ""}`} onClick={() => go({ view: "browse" })}>Apps & packages</button>
-          <button class={`store-nav-link${view.view === "concept" ? " is-active" : ""}`} onClick={() => go({ view: "concept", concept: "" })} title="Every Concept page the listed packages carry">Concepts</button>
+          <button class={`store-nav-link${view.view === "browse" || view.view === "package" || view.view === "live" ? " is-active" : ""}`} onClick={() => go({ view: "browse" })}>Apps & packages</button>
+          <button class={`store-nav-link${view.view === "concept" ? " is-active" : ""}`} onClick={() => go({ view: "concept", concept: "" })} title="The knowledge the listed packages carry">Concepts</button>
         </nav>
         <form
           class="store-search"
@@ -106,7 +122,9 @@ export function Store() {
             go(q.trim() ? { view: "browse", q: q.trim() } : { view: "browse" });
           }}
         >
-          <input name="q" type="search" placeholder="Search packages" defaultValue={view.view === "browse" ? view.q ?? "" : ""} key={view.view === "browse" ? view.q ?? "" : "x"} aria-label="Search packages" />
+          <SearchIcon size={14} />
+          <input ref={search} name="q" type="search" placeholder="Search packages and concepts" defaultValue={view.view === "browse" ? view.q ?? "" : ""} key={view.view === "browse" ? view.q ?? "" : "x"} aria-label="Search packages and concepts" />
+          <kbd title="Press / to search">/</kbd>
         </form>
         <YourStrut target={target} onChange={setStrut} />
       </header>
@@ -125,14 +143,17 @@ export function Store() {
       </main>
 
       <footer class="store-foot">
-        {card && (
-          <span title={card.key}>
-            Index <code>{shortKey(card.key)}</code> · card seq {card.seq}
+        <span>Everything here is derived from publishers' signed catalogs and archives. An install re-verifies against the publisher, never against this page.</span>
+        <span class="store-foot-meta">
+          {card && (
+            <span title={card.key}>
+              index <code>{shortKey(card.key)}</code> · seq {card.seq}
+            </span>
+          )}
+          <a href="llms.txt">llms.txt</a>
+          <span>
+            MCP <code>/index/mcp</code>
           </span>
-        )}
-        <span>Everything on this page is derived from publishers' signed catalogs and archives. An install re-verifies against the publisher, never against this page.</span>
-        <span>
-          For an agent: <a href="llms.txt">llms.txt</a> · MCP at <code>/index/mcp</code>
         </span>
       </footer>
     </div>
@@ -153,8 +174,9 @@ function YourStrut(props: { target: string | null; onChange: (url: string | null
   };
   if (!editing) {
     return (
-      <button class="btn btn-sm store-strut" onClick={() => { setDraft(props.target ?? ""); setEditing(true); }} title={props.target ? `Install links open ${props.target}` : "Name your strut server once: Install then opens it"}>
-        {props.target ? `Your strut · ${props.target.replace(/^https?:\/\//, "")}` : "Your strut"}
+      <button class={`store-strut${props.target ? " is-set" : ""}`} onClick={() => { setDraft(props.target ?? ""); setEditing(true); }} title={props.target ? `Install opens ${props.target}` : "Name your strut server once: Install then opens it"}>
+        <span class="store-strut-dot" />
+        {props.target ? props.target.replace(/^https?:\/\//, "") : "Your strut server"}
       </button>
     );
   }
@@ -195,7 +217,7 @@ function InstallButton(props: { pkg: string; target: string | null; link: (pkg:
         </form>
       )}
       <div class="store-paste">
-        Or, in your strut server's Publish dialog, on the Packages tab, find <code>{props.pkg}</code> <CopyButton value={props.pkg} label="Copy the package name" />
+        Or find <code>{props.pkg}</code> <CopyButton value={props.pkg} label="Copy the package name" /> in your strut server's Publish dialog, on the Packages tab.
       </div>
     </div>
   );
@@ -214,50 +236,165 @@ function AppTile(props: { app: { name: string; title: string; icon?: string } })
   return <span class="store-app-tile" title={props.app.icon ? `icon: ${props.app.icon}` : undefined}>{initials}</span>;
 }
 
+/** While a read is out: the shape of what comes, never a bare word. */
+function Loading() {
+  return <div class="store-skel" role="status" aria-label="Loading"><span /><span /><span /></div>;
+}
+
+function SectionHead(props: { title: string; count?: number; hint?: string; children?: ComponentChildren }) {
+  return (
+    <div class="store-section-head">
+      <h2>{props.title}{props.count !== undefined && <span class="store-count">{props.count}</span>}</h2>
+      {props.hint && <span class="store-section-hint">{props.hint}</span>}
+      {props.children}
+    </div>
+  );
+}
+
+/** One number of a stat strip; with `onClick`, a jump to what it counts. */
+function Stat(props: { n: number | undefined; label: string; onClick?: () => void }) {
+  const body = (
+    <>
+      <span class="store-stat-n">{props.n === undefined ? "–" : props.n.toLocaleString()}</span>
+      <span class="store-stat-l">{props.label}</span>
+    </>
+  );
+  return props.onClick ? <button class="store-stat" onClick={props.onClick}>{body}</button> : <div class="store-stat">{body}</div>;
+}
+
+// ── Concepts, as rows and as a tree ─────────────────────────────────────────
+
+type ConceptLine = { name: string; description?: string };
+type TreeConcept = ConceptLine & { parents?: readonly string[] };
+const LIST_CAP = 24;
+
+/** A page: its name, and as much of its description as the line holds. */
+function ConceptRow(props: { c: ConceptLine; go: (v: StoreView) => void }) {
+  return (
+    <button class="store-node-link" onClick={() => props.go({ view: "concept", concept: props.c.name })} title={props.c.description}>
+      <span class="store-node-name">{props.c.name}</span>
+      {props.c.description && <span class="store-node-desc">{props.c.description}</span>}
+    </button>
+  );
+}
+
+/** Pages as rows, the first `LIST_CAP`; the rest behind one button. */
+function ConceptList(props: { items: readonly ConceptLine[]; go: (v: StoreView) => void }) {
+  const [all, setAll] = useState(false);
+  const shown = all ? props.items : props.items.slice(0, LIST_CAP);
+  return (
+    <div class="store-nodes">
+      {shown.map((c) => <ConceptRow key={c.name} c={c} go={props.go} />)}
+      {shown.length < props.items.length && <button class="store-more" onClick={() => setAll(true)}>Show all {props.items.length}</button>}
+    </div>
+  );
+}
+
+/** One page of the tree: a leaf opens its page; a branch opens in place,
+ *  its own page a click away. Children are drawn only once it is open. */
+function TreeNode(props: { c: TreeConcept; kids: Map<string, TreeConcept[]>; go: (v: StoreView) => void; count?: number; open?: boolean; path: readonly string[] }) {
+  // A page already on the way down is not drawn again under itself.
+  const children = (props.kids.get(props.c.name) ?? []).filter((k) => !props.path.includes(k.name));
+  const [open, setOpen] = useState(!!props.open);
+  if (children.length === 0) return <div class="store-node"><ConceptRow c={props.c} go={props.go} /></div>;
+  return (
+    <div class={`store-node is-branch${open ? " is-open" : ""}`}>
+      <div class="store-node-row">
+        <button class="store-node-link" onClick={() => setOpen(!open)} aria-expanded={open} title={props.c.description}>
+          <ChevronRightIcon size={14} class="store-node-chev" />
+          <span class="store-node-name">{props.c.name}</span>
+          <span class="store-count">{props.count ?? children.length}</span>
+          {props.c.description && <span class="store-node-desc">{props.c.description}</span>}
+        </button>
+        <button class="store-node-open" onClick={() => props.go({ view: "concept", concept: props.c.name })} title={`Read ${props.c.name}`}>Read <ArrowRightIcon size={12} /></button>
+      </div>
+      {open && (
+        <div class="store-node-kids">
+          {children.map((k) => <TreeNode key={k.name} c={k} kids={props.kids} go={props.go} path={[...props.path, props.c.name]} />)}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Concept pages as the tree their parents declare, a level at a time, with
+ *  a filter over all of them: 750 pages are four rows until one is opened. */
+function ConceptTree(props: { concepts: TreeConcept[]; go: (v: StoreView) => void; open?: boolean }) {
+  const [q, setQ] = useState("");
+  const roots = useMemo(() => conceptRoots(props.concepts), [props.concepts]);
+  const kids = useMemo(() => conceptChildren(props.concepts), [props.concepts]);
+  const found = useMemo(() => (q.trim() ? searchWorkflows(props.concepts, q) : null), [props.concepts, q]);
+  return (
+    <div class="store-tree">
+      {props.concepts.length > 12 && (
+        <label class="store-filter">
+          <SearchIcon size={13} />
+          <input type="search" value={q} placeholder={`Filter ${props.concepts.length.toLocaleString()} concepts`} onInput={(e) => setQ((e.target as HTMLInputElement).value)} aria-label="Filter concepts" />
+          {found && <span class="store-count">{found.length}</span>}
+        </label>
+      )}
+      {found ? (
+        found.length ? <ConceptList key={q} items={found} go={props.go} /> : <div class="auto-hint">No concept matches “{q.trim()}”.</div>
+      ) : (
+        <div class="store-nodes">
+          {roots.map(({ root, pages }) => <TreeNode key={root.name} c={root} kids={kids} go={props.go} count={pages} open={props.open} path={[]} />)}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // ── Browse ──────────────────────────────────────────────────────────────────
 
 function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: StoreView) => void }) {
   const [hits, setHits] = useState<api.StoreHit[] | null>(null);
   const [error, setError] = useState<string | null>(null);
+  // Every Concept page; with a search, the pages that match it.
   const [concepts, setConcepts] = useState<api.StoreConcept[] | null>(null);
   const [live, setLive] = useState<api.StoreLiveItem[]>([]);
   useEffect(() => {
     setHits(null);
+    setConcepts(null);
+    setError(null);
     api.storeSearch(props.q ?? "").then(setHits, (err) => setError(errorMessage(err)));
+    api.storeConcepts(props.q ?? "").then(setConcepts, () => setConcepts([]));
     api.storeLive(props.q ?? "").then(setLive, () => setLive([]));
   }, [props.q]);
   const liveApps = live.filter((i) => i.kind === "app");
   const liveFlows = live.filter((i) => i.kind === "workflow" || i.kind === "step");
-  useEffect(() => {
-    if (!props.q) api.storeConcepts().then(setConcepts, () => setConcepts([]));
-  }, [props.q]);
   const apps = useMemo(() => (hits ? appsOf(hits) : []), [hits]);
-  const roots = useMemo(() => (concepts ? conceptRoots(concepts) : []), [concepts]);
+  const roots = useMemo(() => (concepts && !props.q ? conceptRoots(concepts) : []), [concepts, props.q]);
   const publishers = Object.entries(props.card?.publishers ?? {}).sort(([a], [b]) => a.localeCompare(b));
-  const count = (n: number, w: string) => `${n} ${w}${n === 1 ? "" : "s"}`;
+  const count = (n: number, w: string) => `${n.toLocaleString()} ${w}${n === 1 ? "" : "s"}`;
+  const mcp = api.storeCatalogUrl(props.card ?? null).replace(/\/index\/catalog$/, "/index/mcp");
+  const add = `claude mcp add --transport http strut-store ${mcp}`;
   return (
     <>
       {!props.q && (
         <section class="store-hero">
-          <h1>Apps, workflows and knowledge for your strut server</h1>
-          <p>
-            Each package is a publisher's own, signed with its key; this index is the phone book that lists them.
-            {hits && concepts && ` ${count(apps.length, "app")}, ${count(hits.length, "package")}, ${count(concepts.length, "Concept page")}, ${count(publishers.length, "publisher")}.`}
-          </p>
+          <div class="store-eyebrow"><span class="store-pulse" /> Signed package index</div>
+          <h1>Apps, workflows and knowledge <span class="store-grad">for your strut server</span></h1>
+          <p>Every package here is signed by its publisher. Install one into your own strut server, and it is checked there against the publisher's key.</p>
+          <div class="store-stats">
+            <Stat n={hits ? apps.length : undefined} label={apps.length === 1 ? "App" : "Apps"} />
+            <Stat n={hits?.length} label={hits?.length === 1 ? "Package" : "Packages"} />
+            <Stat n={concepts?.length} label={concepts?.length === 1 ? "Concept" : "Concepts"} onClick={() => props.go({ view: "concept", concept: "" })} />
+            <Stat n={props.card ? publishers.length : undefined} label={publishers.length === 1 ? "Publisher" : "Publishers"} />
+          </div>
         </section>
       )}
       {props.q && (
-        <div class="store-section-head">
-          <h2>Packages matching “{props.q}”</h2>
+        <div class="store-results-head">
+          <h1>Results for “{props.q}”</h1>
           <button class="auto-link" onClick={() => props.go({ view: "browse" })}>Clear</button>
         </div>
       )}
       {error && <div class="auto-error">{error}</div>}
-      {hits === null && !error && <div class="auto-hint">Loading…</div>}
+      {hits === null && !error && <Loading />}
 
       {liveApps.length > 0 && (
         <section>
-          <div class="store-section-head"><h2>Live apps</h2><span class="auto-meta">On their publishers' servers, read-only: open one and look around</span></div>
+          <SectionHead title="Live apps" hint="Running on their publishers' servers, read-only: open one and look around" />
           <div class="store-grid">
             {liveApps.map((a) => (
               <button class="store-card" key={`${a.publisher}/${a.name}`} onClick={() => props.go({ view: "live", publisher: a.publisher, kind: "app", name: a.name })}>
@@ -269,6 +406,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
                   </div>
                 </div>
                 {a.description && <div class="store-card-desc">{a.description}</div>}
+                <div class="store-card-foot"><span class="store-card-go">Open <ArrowRightIcon size={13} /></span></div>
               </button>
             ))}
           </div>
@@ -277,22 +415,25 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {liveFlows.length > 0 && (
         <section>
-          <div class="store-section-head"><h2>Live workflows and steps</h2><span class="auto-meta">Read from their servers as they are now</span></div>
-          <div class="store-list">
+          <SectionHead title="Live workflows and steps" hint="Read from their servers as they are now" />
+          <div class="store-lines">
             {liveFlows.map((i) => (
-              <button class="store-row" key={`${i.publisher}/${i.kind}/${i.name}`} onClick={() => props.go({ view: "live", publisher: i.publisher, kind: i.kind as LiveKind, name: i.name })}>
-                <span class="store-row-main">
-                  <span class="package-name">{i.name}</span>
-                  <span class="badge">{i.kind}</span>
-                  {i.run && (
-                    <span class="badge badge-accent" title={`Anyone may run it there: ${priceWords({ kind: i.kind === "step" ? "step" : "workflow", ...i.run })}`}>
-                      run · {priceBadge(i.run)}
-                    </span>
-                  )}
-                  {i.runs && <span class="badge" title="Its runs are public too">with runs</span>}
-                  <span class="auto-meta">{i.publisher}</span>
+              <button class="store-line" key={`${i.publisher}/${i.kind}/${i.name}`} onClick={() => props.go({ view: "live", publisher: i.publisher, kind: i.kind as LiveKind, name: i.name })}>
+                <span class="store-line-main">
+                  <span class="store-line-title">
+                    <span class="package-name">{i.name}</span>
+                    <span class="badge">{i.kind}</span>
+                    {i.run && (
+                      <span class="badge badge-accent" title={`Anyone may run it there: ${priceWords({ kind: i.kind === "step" ? "step" : "workflow", ...i.run })}`}>
+                        run · {priceBadge(i.run)}
+                      </span>
+                    )}
+                    {i.runs && <span class="badge" title="Its runs are public too">with runs</span>}
+                    <span class="auto-meta">{i.publisher}</span>
+                  </span>
+                  {i.description && <span class="store-line-desc">{i.description}</span>}
                 </span>
-                {i.description && <span class="store-row-desc">{i.description}</span>}
+                <ArrowRightIcon size={14} class="store-line-go" />
               </button>
             ))}
           </div>
@@ -301,7 +442,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {hits && apps.length > 0 && (
         <section>
-          <div class="store-section-head"><h2>Apps</h2><span class="auto-meta">A package's face: install the package, open the app</span></div>
+          <SectionHead title="Apps" count={apps.length} hint="Install the package, open the app" />
           <div class="store-grid">
             {apps.map(({ pkg, version, app }) => (
               <button class="store-card" key={`${pkg}/${app.name}`} onClick={() => props.go({ view: "package", pkg })}>
@@ -313,7 +454,10 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
                   </div>
                 </div>
                 {app.description && <div class="store-card-desc">{app.description}</div>}
-                <div class="store-card-foot"><CanChips can={app.can} /></div>
+                <div class="store-card-foot">
+                  <CanChips can={app.can} />
+                  <span class="store-card-go">View <ArrowRightIcon size={13} /></span>
+                </div>
               </button>
             ))}
           </div>
@@ -322,35 +466,54 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {hits && (
         <section>
-          <div class="store-section-head"><h2>Packages</h2></div>
-          {hits.length === 0 && <div class="auto-hint">{props.q ? "Nothing matches." : "Nothing listed yet: the index has no publisher rows, or none has made a package public."}</div>}
-          <div class="store-list">
+          <SectionHead title="Packages" count={hits.length} />
+          {hits.length === 0 && <div class="auto-hint">{props.q ? "No package matches." : "Nothing listed yet: the index has no publisher rows, or none has made a package public."}</div>}
+          {hits.length > 0 && <div class="store-lines">
             {hits.map((h) => (
-              <button class="store-row" key={h.package} onClick={() => props.go({ view: "package", pkg: h.package })}>
-                <span class="store-row-main">
-                  <span class="package-name">{h.package}</span>
-                  <span class="package-version">{h.version}</span>
-                  {h.license && <span class="badge">{h.license}</span>}
-                  {h.detail && <CanChips can={h.detail.can} />}
-                </span>
-                {h.description && <span class="store-row-desc">{h.description}</span>}
-                <span class="auto-meta">
-                  {h.detail ? [count(h.detail.apps.length, "app"), count(h.detail.workflows, "workflow"), count(h.detail.steps, "step"), count(h.detail.concepts, "concept")].join(" · ") : "archive not read yet"}
-                  {h.detail?.secrets.length ? ` · needs ${h.detail.secrets.join(", ")}` : ""}
+              <button class="store-line" key={h.package} onClick={() => props.go({ view: "package", pkg: h.package })}>
+                <span class="store-line-main">
+                  <span class="store-line-title">
+                    <span class="package-name">{h.package}</span>
+                    <span class="package-version">{h.version}</span>
+                    {h.license && <span class="badge">{h.license}</span>}
+                    {h.detail && <CanChips can={h.detail.can} />}
+                  </span>
+                  {h.description && <span class="store-line-desc">{h.description}</span>}
+                  <span class="store-line-meta">
+                    {h.detail
+                      ? [count(h.detail.apps.length, "app"), count(h.detail.workflows, "workflow"), count(h.detail.steps, "step"), count(h.detail.concepts, "concept")].map((t) => <span key={t}>{t}</span>)
+                      : <span>archive not read yet</span>}
+                    {h.detail?.secrets.length ? <span title={h.detail.secrets.join(", ")}>needs {count(h.detail.secrets.length, "secret")}</span> : null}
+                  </span>
                 </span>
+                <ArrowRightIcon size={14} class="store-line-go" />
               </button>
             ))}
-          </div>
+          </div>}
         </section>
       )}
 
-      {!props.q && concepts && roots.length > 0 && (
+      {props.q && concepts && concepts.length > 0 && (
         <section>
-          <div class="store-section-head"><h2>Browse by concept</h2><span class="auto-meta">The knowledge the packages carry, as a tree</span></div>
-          <div class="store-chips">
+          <SectionHead title="Concepts" count={concepts.length} />
+          <ConceptList key={props.q} items={concepts} go={props.go} />
+        </section>
+      )}
+
+      {!props.q && roots.length > 0 && (
+        <section>
+          <SectionHead title="Knowledge" hint="The Concept pages the packages carry, as a tree">
+            <button class="auto-link store-section-link" onClick={() => props.go({ view: "concept", concept: "" })}>Browse the tree <ArrowRightIcon size={12} /></button>
+          </SectionHead>
+          <div class="store-grid">
             {roots.map(({ root, pages }) => (
-              <button class="store-chip" key={root.name} onClick={() => props.go({ view: "concept", concept: root.name })} title={root.description}>
-                {root.name} {pages > 0 && <span class="auto-meta">{pages}</span>}
+              <button class="store-card store-root" key={root.name} onClick={() => props.go({ view: "concept", concept: root.name })}>
+                <span class="store-card-name">{root.name}</span>
+                {root.description && <span class="store-card-desc">{root.description}</span>}
+                <span class="store-card-foot">
+                  <span class="auto-meta">{pages > 0 ? `${count(pages, "page")} under it` : "One page"}</span>
+                  <span class="store-card-go">Read <ArrowRightIcon size={13} /></span>
+                </span>
               </button>
             ))}
           </div>
@@ -359,21 +522,39 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {!props.q && publishers.length > 0 && (
         <section>
-          <div class="store-section-head"><h2>Publishers</h2><span class="auto-meta">The rows of the signed index card</span></div>
-          <div class="store-list">
+          <SectionHead title="Publishers" count={publishers.length} hint="Each signs its own packages with its key" />
+          <div class="store-lines">
             {publishers.map(([prefix, row]) => (
-              <div class="store-row is-static" key={prefix}>
-                <span class="store-row-main">
-                  <span class="package-name">{prefix}</span>
-                  <code class="package-digest" title={row.key}>{shortKey(row.key)}</code>
-                  {row.url && <a href={row.url} target="_blank" rel="noopener noreferrer" class="auto-link">{row.url.replace(/^https?:\/\//, "")}</a>}
+              <div class="store-line is-static" key={prefix}>
+                <span class="store-line-main">
+                  <span class="store-line-title">
+                    <span class="package-name">{prefix}</span>
+                    {row.url && <a href={row.url} target="_blank" rel="noopener noreferrer" class="auto-link">{row.url.replace(/^https?:\/\//, "")}</a>}
+                  </span>
+                  {row.description && <span class="store-line-desc">{row.description}</span>}
+                </span>
+                <span class="store-key" title={row.key}>
+                  <code>{shortKey(row.key)}</code> <CopyButton value={row.key} label="Copy the publisher's key" />
                 </span>
-                {row.description && <span class="store-row-desc">{row.description}</span>}
               </div>
             ))}
           </div>
         </section>
       )}
+
+      {!props.q && props.card && (
+        <section class="store-agents">
+          <div class="store-agents-text">
+            <h2>For agents</h2>
+            <p>The same catalog as three read tools over MCP, and as one page at <a href="llms.txt">llms.txt</a>. Installing stays a person's decision.</p>
+          </div>
+          <div class="store-cmd">
+            <span class="store-cmd-prompt">$</span>
+            <code>{add}</code>
+            <CopyButton value={add} label="Copy the command" />
+          </div>
+        </section>
+      )}
     </>
   );
 }
@@ -388,24 +569,27 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
     setError(null);
     api.storePackage(props.pkg).then(setPage, (err) => { setPage(null); setError(errorMessage(err)); });
   }, [props.pkg]);
-  if (page === undefined) return <div class="auto-hint">Loading…</div>;
+  if (page === undefined) return <Loading />;
   if (!page) return <div class="store-empty"><div class="store-empty-title">{props.pkg}</div><div class="auto-error">{error}</div></div>;
   const d = page.detail;
   const newest = page.releases.find((r) => !r.yanked);
   const held = (digest: string) => Object.entries(page.channels).filter(([, dg]) => dg === digest).map(([ch]) => ch);
   const [publisher, name] = props.pkg.split("/");
+  const steps = d?.steps.filter((s) => !s.helper).length ?? 0;
+  const jump = (id: string) => () => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
+  const n = (count: number, w: string) => `${count} ${w}${count === 1 ? "" : "s"}`;
   return (
     <article class="store-package">
       <nav class="store-crumbs">
         <button class="auto-link" onClick={() => props.go({ view: "browse" })}>Packages</button>
-        <span>›</span>
+        <span>/</span>
         <button class="auto-link" onClick={() => props.go({ view: "browse", q: publisher! })}>{publisher}</button>
-        <span>›</span>
+        <span>/</span>
         <span>{name}</span>
       </nav>
       <header class="store-package-head">
         <div class="store-package-title">
-          <h1>{props.pkg}</h1>
+          <h1><span class="store-dim">{publisher}/</span>{name}</h1>
           {page.description && <p class="store-package-desc">{page.description}</p>}
           <div class="store-package-chips">
             {newest && <span class="badge badge-accent">{newest.version}{held(newest.digest).length ? ` · ${held(newest.digest).join(", ")}` : ""}</span>}
@@ -419,12 +603,21 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
         </div>
       </header>
 
+      {d && (
+        <div class="store-stats">
+          <Stat n={d.apps.length} label={d.apps.length === 1 ? "App" : "Apps"} onClick={d.apps.length ? jump("store-apps") : undefined} />
+          <Stat n={d.workflows.length} label={d.workflows.length === 1 ? "Workflow" : "Workflows"} onClick={d.workflows.length ? jump("store-workflows") : undefined} />
+          <Stat n={steps} label={steps === 1 ? "Step" : "Steps"} onClick={d.steps.length ? jump("store-steps") : undefined} />
+          <Stat n={d.concepts.length} label={d.concepts.length === 1 ? "Concept" : "Concepts"} onClick={d.concepts.length ? jump("store-concepts") : undefined} />
+        </div>
+      )}
+
       <div class="store-package-body">
         <div class="store-package-main">
           {!d && <div class="auto-hint">{page.detailError ?? "The archive has not been read yet; what it holds shows once the index has."}</div>}
           {d && d.apps.length > 0 && (
-            <section>
-              <h2>Apps <span class="auto-meta">{d.apps.length}</span></h2>
+            <section id="store-apps">
+              <SectionHead title="Apps" count={d.apps.length} />
               <div class="store-grid">
                 {d.apps.map((a) => (
                   <div class="store-card is-static" key={a.name}>
@@ -446,85 +639,90 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
             </section>
           )}
           {d && d.workflows.length > 0 && (
-            <section>
-              <h2>Workflows <span class="auto-meta">{d.workflows.length}</span></h2>
-              <table class="store-table">
-                <thead><tr><th>Name</th><th>Does</th><th>Inputs</th><th>Steps</th></tr></thead>
-                <tbody>
-                  {d.workflows.map((w) => (
-                    <tr key={w.name}>
-                      <td>
-                        <code>{w.name}</code>
-                        {w.peer && <span class="badge" title="Another strut may launch it">peer{w.peer === "person" ? ": person" : ""}</span>}
-                        {w.sealed && <span class="badge badge-warning" title="The builder may never run or read it">sealed</span>}
-                        {w.description && <div class="auto-meta">{w.description}</div>}
-                        {w.error && <div class="auto-error">{w.error}</div>}
-                      </td>
-                      <td>
-                        <CanChips can={w.can} />
-                        {w.secrets.length > 0 && <div class="auto-meta">needs {w.secrets.join(", ")}</div>}
-                        {w.claims !== undefined && <div class="auto-meta">{w.claims} claim{w.claims === 1 ? "" : "s"} declared</div>}
-                      </td>
-                      <td>
+            <section id="store-workflows">
+              <SectionHead title="Workflows" count={d.workflows.length} hint="Open one for its inputs and the steps it runs" />
+              <div class="store-lines">
+                {d.workflows.map((w) => (
+                  <details class="store-acc" key={w.name}>
+                    <summary class="store-line">
+                      <ChevronRightIcon size={14} class="store-node-chev" />
+                      <span class="store-line-main">
+                        <span class="store-line-title">
+                          <span class="package-name">{w.name}</span>
+                          {w.peer && <span class="badge" title="Another strut may launch it">peer{w.peer === "person" ? ": person" : ""}</span>}
+                          {w.sealed && <span class="badge badge-warning" title="The builder may never run or read it">sealed</span>}
+                        </span>
+                        {w.description && <span class="store-line-desc">{w.description}</span>}
+                      </span>
+                      <CanChips can={w.can} />
+                      <span class="store-line-side">{n(w.inputs.length, "input")} · {n(w.steps.length, "step")}</span>
+                    </summary>
+                    <div class="store-acc-body">
+                      {w.error && <div class="auto-error">{w.error}</div>}
+                      <div>
+                        <h3>Inputs</h3>
                         {w.inputs.length === 0 ? <span class="auto-meta">any</span> : w.inputs.map((i) => (
                           <div key={i.name} class="store-input" title={i.description}>
                             <code>{i.name}</code> <span class="auto-meta">{i.type}{i.required ? "" : " · optional"}</span>
                           </div>
                         ))}
-                      </td>
-                      <td class="store-steps">{[...w.steps, ...w.grants.map((g) => `→ ${g}`)].map((s) => <code key={s}>{s}</code>)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                      </div>
+                      <div>
+                        <h3>Steps</h3>
+                        <div class="store-steps">{w.steps.map((s) => <code key={s}>{s}</code>)}</div>
+                        {w.grants.length > 0 && (
+                          <>
+                            <h3 title="The tools its agents may call">Agent tools</h3>
+                            <div class="store-steps">{w.grants.map((g) => <code key={g}>{g}</code>)}</div>
+                          </>
+                        )}
+                        {w.secrets.length > 0 && <div class="auto-meta store-acc-note">needs {w.secrets.join(", ")}</div>}
+                        {w.claims !== undefined && <div class="auto-meta store-acc-note">{w.claims} claim{w.claims === 1 ? "" : "s"} declared</div>}
+                      </div>
+                    </div>
+                  </details>
+                ))}
+              </div>
             </section>
           )}
           {d && d.steps.length > 0 && (
-            <section>
-              <h2>Steps <span class="auto-meta">{d.steps.filter((s) => !s.helper).length}</span></h2>
-              <table class="store-table">
-                <thead><tr><th>Name</th><th>Reads</th><th>Lint</th><th>Size</th></tr></thead>
-                <tbody>
-                  {d.steps.map((s) => (
-                    <tr key={s.name}>
-                      <td>
-                        <code>{s.name}</code>
+            <section id="store-steps">
+              <SectionHead title="Steps" count={steps} hint="TypeScript that runs inside the installing strut's process" />
+              <div class="store-lines">
+                {d.steps.map((s) => (
+                  <div class="store-line is-static" key={s.name}>
+                    <span class="store-line-main">
+                      <span class="store-line-title">
+                        <span class="package-name">{s.name}</span>
                         {s.helper && <span class="badge">helper</span>}
                         {s.effect && <span class="badge" title="As the step declares it">{s.effect === "write" ? "acts" : "reads"}</span>}
-                        {s.description && <div class="auto-meta">{s.description}</div>}
-                      </td>
-                      <td>{s.secrets.length ? s.secrets.map((n) => <code key={n}>{n} </code>) : <span class="auto-meta">no secret</span>}</td>
-                      <td>
-                        {s.lint.length === 0 ? <span class="badge badge-ok" title="Nothing past ctx.services: no child_process, fs, net, process.env or global fetch">clean</span> : (
-                          <details class="store-lint">
-                            <summary class="badge badge-warning">{s.lint.length} finding{s.lint.length === 1 ? "" : "s"}</summary>
-                            <ul>{s.lint.map((l, i) => <li key={i}>{l}</li>)}</ul>
-                          </details>
-                        )}
-                      </td>
-                      <td class="auto-meta">{formatBytes(s.bytes)}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              <div class="auto-hint">A step is TypeScript that runs inside the installing strut's process. The lint is a reading of its source, not a sandbox.</div>
+                        {s.secrets.map((k) => <code key={k} class="store-secret" title="A secret it reads">{k}</code>)}
+                      </span>
+                      {s.description && <span class="store-line-desc" title={s.description}>{s.description}</span>}
+                      {s.lint.length > 0 && (
+                        <details class="store-lint">
+                          <summary class="badge badge-warning">{s.lint.length} lint finding{s.lint.length === 1 ? "" : "s"}</summary>
+                          <ul>{s.lint.map((l, i) => <li key={i}>{l}</li>)}</ul>
+                        </details>
+                      )}
+                    </span>
+                    {s.lint.length === 0 && <span class="badge badge-ok" title="Nothing past ctx.services: no child_process, fs, net, process.env or global fetch">clean</span>}
+                    <span class="store-line-side">{formatBytes(s.bytes)}</span>
+                  </div>
+                ))}
+              </div>
+              <div class="auto-hint">The lint is a reading of each step's source, not a sandbox.</div>
             </section>
           )}
           {d && d.concepts.length > 0 && (
-            <section>
-              <h2>Concepts <span class="auto-meta">{d.concepts.length}</span></h2>
-              <div class="store-chips">
-                {d.concepts.map((c) => (
-                  <button class="store-chip" key={c.name} onClick={() => props.go({ view: "concept", concept: c.name })} title={c.description}>
-                    {c.name}{c.parents?.length ? <span class="auto-meta"> under {c.parents.join(", ")}</span> : null}
-                  </button>
-                ))}
-              </div>
+            <section id="store-concepts">
+              <SectionHead title="Concepts" count={d.concepts.length} hint="The knowledge it installs, as a tree: open a branch, or filter" />
+              <ConceptTree concepts={d.concepts} go={props.go} />
             </section>
           )}
           {d?.readme && (
             <section>
-              <h2>README</h2>
+              <SectionHead title="README" />
               <Markdown source={d.readme} class="md-view store-readme" />
             </section>
           )}
@@ -575,7 +773,7 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
 
 // ── Concepts ────────────────────────────────────────────────────────────────
 
-/** With a name: that page. Without: the tree's roots. */
+/** With a name: that page. Without: the whole tree. */
 function ConceptView(props: { name: string; target: string | null; link: (pkg: string) => InstallLink; go: (v: StoreView) => void; onNeedStrut: (url: string | null) => void }) {
   if (!props.name) return <ConceptIndex go={props.go} />;
   return <ConceptPage {...props} />;
@@ -587,37 +785,27 @@ function ConceptIndex(props: { go: (v: StoreView) => void }) {
   useEffect(() => {
     api.storeConcepts().then(setConcepts, (err) => setError(errorMessage(err)));
   }, []);
-  const roots = useMemo(() => (concepts ? conceptRoots(concepts) : []), [concepts]);
-  const byParent = useMemo(() => {
-    const m = new Map<string, api.StoreConcept[]>();
-    for (const c of concepts ?? []) for (const p of c.parents ?? []) m.set(p, [...(m.get(p) ?? []), c]);
-    return m;
-  }, [concepts]);
   return (
-    <section>
-      <div class="store-section-head"><h2>Concepts</h2><span class="auto-meta">The pages the listed packages carry, as the tree their front matter declares</span></div>
+    <section class="store-concepts">
+      <div class="store-results-head">
+        <h1>Concepts{concepts && concepts.length > 0 && <span class="store-count">{concepts.length.toLocaleString()}</span>}</h1>
+      </div>
+      <p class="store-package-desc">The knowledge the listed packages carry: pages an agent reads before it works, kept as a tree. Open a branch, or filter by words.</p>
       {error && <div class="auto-error">{error}</div>}
-      {concepts === null && !error && <div class="auto-hint">Loading…</div>}
+      {concepts === null && !error && <Loading />}
       {concepts?.length === 0 && <div class="auto-hint">No package listed here carries a Concept page yet.</div>}
-      <div class="store-tree">
-        {roots.map(({ root }) => (
-          <div class="store-tree-root" key={root.name}>
-            <button class="store-tree-link is-root" onClick={() => props.go({ view: "concept", concept: root.name })}>{root.name}</button>
-            {root.description && <span class="auto-meta"> {root.description}</span>}
-            <div class="store-tree-children">
-              {(byParent.get(root.name) ?? []).map((c) => (
-                <button class="store-tree-link" key={c.name} onClick={() => props.go({ view: "concept", concept: c.name })} title={c.description}>
-                  {c.name}{byParent.get(c.name)?.length ? <span class="auto-meta"> +{byParent.get(c.name)!.length}</span> : null}
-                </button>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
+      {concepts && concepts.length > 0 && <ConceptTree concepts={concepts} go={props.go} open />}
     </section>
   );
 }
 
+/** A page's text without a first heading that only repeats its name: the
+ *  page already has it as its title. */
+function withoutTitle(docs: string, name: string): string {
+  const m = /^\s*#\s+(.+?)\s*(?:\n|$)/.exec(docs);
+  return m && m[1]!.toLowerCase() === name.toLowerCase() ? docs.slice(m[0].length) : docs;
+}
+
 function ConceptPage(props: { name: string; target: string | null; link: (pkg: string) => InstallLink; go: (v: StoreView) => void; onNeedStrut: (url: string | null) => void }) {
   const [page, setPage] = useState<api.StoreConceptPage | null | undefined>(undefined);
   const [error, setError] = useState<string | null>(null);
@@ -637,7 +825,7 @@ function ConceptPage(props: { name: string; target: string | null; link: (pkg: s
       () => setLiveDocs(null),
     );
   }, [page]);
-  if (page === undefined) return <div class="auto-hint">Loading…</div>;
+  if (page === undefined) return <Loading />;
   if (!page) return <div class="store-empty"><div class="store-empty-title">{props.name}</div><div class="auto-error">{error}</div></div>;
   const first = page.packages[0];
   const docs = page.docs ?? liveDocs ?? undefined;
@@ -645,34 +833,33 @@ function ConceptPage(props: { name: string; target: string | null; link: (pkg: s
     <article class="store-concept">
       <nav class="store-crumbs">
         <button class="auto-link" onClick={() => props.go({ view: "concept", concept: "" })}>Concepts</button>
-        {[...page.parents].reverse().map((p) => (
-          <span key={p.name}><span>›</span> <button class="auto-link" onClick={() => props.go({ view: "concept", concept: p.name })} title={p.description}>{p.name}</button></span>
-        ))}
-        <span>›</span>
+        {[...page.parents].reverse().flatMap((p) => [
+          <span key={`/${p.name}`}>/</span>,
+          <button key={p.name} class="auto-link" onClick={() => props.go({ view: "concept", concept: p.name })} title={p.description}>{p.name}</button>,
+        ])}
+        <span>/</span>
         <span>{page.name}</span>
       </nav>
       <div class="store-package-body">
         <div class="store-package-main">
-          <h1>{page.name}</h1>
-          {page.description && <p class="store-package-desc">{page.description}</p>}
-          {page.packages.length > 0 && (
-            <div class="auto-meta">
-              From {page.packages.map((p, i) => <span key={p.package}>{i > 0 && ", "}<button class="auto-link" onClick={() => props.go({ view: "package", pkg: p.package })}>{p.package}</button> {p.version}</span>)}
-              {page.packages.length > 1 && " — the first's text is shown; installed side by side, each keeps its own page"}
-            </div>
-          )}
-          {page.live?.length ? (
-            <div class="auto-meta">Live on {page.live.map((l) => l.publisher).join(", ")}{!page.docs ? " — read from its server as it is now" : ""}</div>
-          ) : null}
-          {docs ? <Markdown source={docs} class="md-view store-readme" /> : liveDocs === undefined && page.live?.length && !page.docs ? <div class="auto-hint">Reading it from its server…</div> : <div class="auto-hint">This page has a name and a place in the tree, and no text yet.</div>}
+          <header class="store-concept-head">
+            <h1>{page.name}</h1>
+            {page.description && <p class="store-package-desc">{page.description}</p>}
+            {page.packages.length > 0 && (
+              <div class="auto-meta">
+                From {page.packages.map((p, i) => <span key={p.package}>{i > 0 && ", "}<button class="auto-link" onClick={() => props.go({ view: "package", pkg: p.package })}>{p.package}</button> {p.version}</span>)}
+                {page.packages.length > 1 && " — the first's text is shown; installed side by side, each keeps its own page"}
+              </div>
+            )}
+            {page.live?.length ? (
+              <div class="auto-meta">Live on {page.live.map((l) => l.publisher).join(", ")}{!page.docs ? " — read from its server as it is now" : ""}</div>
+            ) : null}
+          </header>
+          {docs ? <Markdown source={withoutTitle(docs, page.name)} class="md-view store-prose" /> : liveDocs === undefined && page.live?.length && !page.docs ? <div class="auto-hint">Reading it from its server…</div> : <div class="auto-hint">This page has a name and a place in the tree, and no text yet.</div>}
           {page.children.length > 0 && (
             <section>
-              <h2>Under this page <span class="auto-meta">{page.children.length}</span></h2>
-              <div class="store-chips">
-                {page.children.map((c) => (
-                  <button class="store-chip" key={c.name} onClick={() => props.go({ view: "concept", concept: c.name })} title={c.description}>{c.name}</button>
-                ))}
-              </div>
+              <SectionHead title="Under this page" count={page.children.length} />
+              <ConceptList key={page.name} items={page.children} go={props.go} />
             </section>
           )}
         </div>
@@ -680,7 +867,7 @@ function ConceptPage(props: { name: string; target: string | null; link: (pkg: s
           {first && (
             <section>
               <h3>Have it in your graph</h3>
-              <div class="auto-hint">Installing the package puts this page, and the tree it sits in, under your strut server's Concepts — where the builder and the job agents read it.</div>
+              <div class="auto-hint">Installing the package puts this page, and the tree it sits in, under your strut server's Concepts, where the builder and the job agents read it.</div>
               <InstallButton pkg={first.package} target={props.target} link={props.link} onNeedStrut={props.onNeedStrut} />
             </section>
           )}
@@ -717,13 +904,13 @@ function LivePage(props: { publisher: string; kind: LiveKind; name: string; card
   const crumbs = (
     <nav class="store-crumbs">
       <button class="auto-link" onClick={() => props.go({ view: "browse" })}>Store</button>
-      <span>›</span>
+      <span>/</span>
       <span>{props.publisher}</span>
-      <span>›</span>
+      <span>/</span>
       <span>{props.name}</span>
     </nav>
   );
-  if (props.card === undefined) return <div class="auto-hint">Loading…</div>;
+  if (props.card === undefined) return <Loading />;
   if (!base) {
     return (
       <div class="store-empty">
diff --git a/web/src/icons.tsx b/web/src/icons.tsx
index 563836f3..b1d7ec8e 100644
--- a/web/src/icons.tsx
+++ b/web/src/icons.tsx
@@ -347,3 +347,15 @@ export function SidebarIcon({ size = 16, ...rest }: IconProps) {
     </Outline>
   );
 }
+
+export function SearchIcon({ size = 14, ...rest }: IconProps) {
+  return <Outline size={size} rest={rest}><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></Outline>;
+}
+
+export function ChevronRightIcon({ size = 14, ...rest }: IconProps) {
+  return <Outline size={size} rest={rest}><path d="M9 6l6 6-6 6" /></Outline>;
+}
+
+export function ArrowRightIcon({ size = 14, ...rest }: IconProps) {
+  return <Outline size={size} rest={rest}><path d="M5 12h14M13 6l6 6-6 6" /></Outline>;
+}
diff --git a/web/src/store-links.test.ts b/web/src/store-links.test.ts
index bed11c4f..9aa58c70 100644
--- a/web/src/store-links.test.ts
+++ b/web/src/store-links.test.ts
@@ -1,6 +1,6 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { appsOf, canWords, conceptRoots, indexIdOf, installLink, liveAppUrl, liveBase, normalizeStrutUrl, parseInstallLink, parseStoreView, storeQuery } from "./store-links";
+import { appsOf, canWords, conceptChildren, conceptRoots, indexIdOf, installLink, liveAppUrl, liveBase, normalizeStrutUrl, parseInstallLink, parseStoreView, storeQuery } from "./store-links";
 
 const KEY = "y".repeat(52);
 
@@ -78,6 +78,14 @@ test("the apps across the hits come first, by title; the concept roots by how mu
     { name: "Orphan", parents: ["Nowhere"] },
   ]);
   assert.deepEqual(roots.map((r) => [r.root.name, r.pages]), [["Law", 3], ["Accounting", 1], ["Orphan", 0]], "a page with a parent in the list is no root, whichever of its parents it is");
+  const kids = conceptChildren([
+    { name: "Law" },
+    { name: "Tax", parents: ["Law"] },
+    { name: "Contracts", parents: ["Law"] },
+    { name: "Indemnity", parents: ["Contracts", "Tax", "Tax", "Nowhere"] },
+    { name: "Loop", parents: ["Loop"] },
+  ]);
+  assert.deepEqual([...kids].map(([p, list]) => [p, list.map((c) => c.name)]), [["Law", ["Contracts", "Tax"]], ["Contracts", ["Indemnity"]], ["Tax", ["Indemnity"]]], "sorted by name, under each parent once, never under a parent the list lacks or itself");
   assert.deepEqual(canWords(can), ["reads"]);
   assert.deepEqual(canWords({ spends: true, acts: true, code: false }), ["spends", "acts"]);
 });
diff --git a/web/src/store-links.ts b/web/src/store-links.ts
index 33169db5..a93c9074 100644
--- a/web/src/store-links.ts
+++ b/web/src/store-links.ts
@@ -164,6 +164,25 @@ export function conceptRoots<C extends { name: string; parents?: readonly string
     .sort((a, b) => b.pages - a.pages || a.root.name.localeCompare(b.root.name));
 }
 
+/** The Concept tree's branches: the pages under each page, by the parent's
+ *  name, sorted by name. A page with several parents is under each; a parent
+ *  the list lacks holds nothing. What the store's tree opens level by level,
+ *  so a package's 750 pages are never one flat list. */
+export function conceptChildren<C extends { name: string; parents?: readonly string[] }>(concepts: readonly C[]): Map<string, C[]> {
+  const names = new Set(concepts.map((c) => c.name));
+  const out = new Map<string, C[]>();
+  for (const c of concepts) {
+    for (const p of new Set(c.parents ?? [])) {
+      if (!names.has(p) || p === c.name) continue;
+      const list = out.get(p);
+      if (list) list.push(c);
+      else out.set(p, [c]);
+    }
+  }
+  for (const list of out.values()) list.sort((a, b) => a.name.localeCompare(b.name));
+  return out;
+}
+
 /** "spends · acts · code", or "reads" when a thing does none of them. */
 export function canWords(can: { spends: boolean; acts: boolean; code: boolean }): string[] {
   const out: string[] = [];
diff --git a/web/src/styles/components.css b/web/src/styles/components.css
index 2e9c305e..bcf1d424 100644
--- a/web/src/styles/components.css
+++ b/web/src/styles/components.css
@@ -4904,233 +4904,605 @@ input.package-search { width: 100%; margin-bottom: var(--sp-2); }
 
 /* ── The store front (`?store=1`, components/Store.tsx) ─────────────────────
    An index strut's public page, alone in the window: a scrolling document
-   in the UI's own palette, the apps first. */
+   on its own scale, darker than the shell. The shell's palette variables
+   are redefined on `.store`, so the shared pieces it draws (.btn, .badge,
+   .md-view, the copy button) follow with no second copy of their rules. */
 .store {
+  --bg: #05070b;
+  --surface: #0b1016;
+  --surface-2: #121922;
+  --border: rgba(148, 163, 184, 0.14);
+  --border-strong: rgba(148, 163, 184, 0.26);
+  --text: #edf1f7;
+  --text-muted: #96a2b6;
+  --text-dim: #66728b;
+  --r-md: 8px;
+  --r-lg: 14px;
+  /* The accent as channels, for glows; the one gradient; a panel's fill. */
+  --glow: 110, 168, 255;
+  --mint: #5eead4;
+  --grad: linear-gradient(100deg, #a9c9ff 0%, #6ea8ff 45%, var(--mint) 100%);
+  --panel: linear-gradient(180deg, rgba(148, 163, 184, 0.07), rgba(148, 163, 184, 0.02));
+  --tint: rgba(148, 163, 184, 0.06);
   height: 100vh;
   overflow: auto;
-  background: var(--bg);
-  color: var(--text);
   display: flex;
   flex-direction: column;
+  background: radial-gradient(900px 420px at 50% -160px, rgba(var(--glow), 0.22), transparent 70%), var(--bg);
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.55;
+  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
+}
+/* A fine grid behind the top of the page, fading out. */
+.store::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgba(148, 163, 184, 0.065) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(148, 163, 184, 0.065) 1px, transparent 1px);
+  background-size: 64px 64px;
+  background-position: center top;
+  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 10%, transparent 75%);
+  mask-image: radial-gradient(ellipse 75% 60% at 50% 0%, #000 10%, transparent 75%);
+}
+.store button:focus-visible, .store a:focus-visible, .store summary:focus-visible {
+  outline: 2px solid rgba(var(--glow), 0.8);
+  outline-offset: 2px;
 }
 .store-top {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 5;
+  flex: none;
   display: flex;
   align-items: center;
   gap: var(--sp-4);
-  height: var(--header-h);
-  padding: 0 var(--sp-5);
-  background: var(--surface);
+  height: 60px;
+  padding: 0 var(--sp-6);
+  background: rgba(5, 7, 11, 0.72);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  backdrop-filter: blur(16px) saturate(160%);
   border-bottom: 1px solid var(--border);
 }
 .store-brand {
   display: inline-flex;
   align-items: center;
-  gap: var(--sp-2);
+  gap: 10px;
   background: none;
   border: none;
   padding: 0;
   font: inherit;
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 700;
-  letter-spacing: -0.01em;
+  letter-spacing: -0.02em;
   color: var(--text);
   cursor: pointer;
 }
-.store-brand-sub { font-weight: 500; color: var(--text-muted); }
-.store-nav { display: flex; gap: var(--sp-1); }
+.store-brand .brand-dot { box-shadow: 0 0 0 3px rgba(var(--glow), 0.18), 0 0 14px rgba(var(--glow), 0.9); }
+.store-brand-sub {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+}
+.store-nav { display: flex; gap: 2px; }
 .store-nav-link {
   background: none;
   border: none;
-  padding: 4px 10px;
-  border-radius: var(--r-md);
+  padding: 6px 12px;
+  border-radius: 999px;
   font: inherit;
-  font-size: 12px;
+  font-size: 13px;
   color: var(--text-muted);
+  white-space: nowrap;
   cursor: pointer;
+  transition: color 120ms, background 120ms;
 }
-.store-nav-link:hover { color: var(--text); background: var(--surface-2); }
-.store-nav-link.is-active { color: var(--text); background: var(--surface-2); }
-.store-search { flex: 1; display: flex; justify-content: center; }
-.store-search input {
-  width: min(420px, 100%);
+.store-nav-link:hover { color: var(--text); }
+.store-nav-link.is-active { color: var(--text); background: rgba(148, 163, 184, 0.12); }
+/* One field shape: the search, the tree's filter. */
+.store-search, .store-filter {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 10px 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--tint);
+  color: var(--text-dim);
+  transition: border-color 120ms, box-shadow 120ms;
+}
+.store-search { flex: 1; max-width: 440px; margin: 0 auto; }
+.store-filter { max-width: 420px; }
+.store-search:focus-within, .store-filter:focus-within, .store-strut-form input:focus {
+  border-color: rgba(var(--glow), 0.6);
+  box-shadow: 0 0 0 3px rgba(var(--glow), 0.14);
+  outline: none;
+}
+.store-search input, .store-filter input {
+  flex: 1;
+  min-width: 0;
   font: inherit;
-  font-size: 12px;
-  background: var(--surface-2);
-  border: 1px solid var(--border-strong);
+  font-size: 13px;
+  background: none;
+  border: none;
+  outline: none;
   color: var(--text);
-  padding: 5px 10px;
-  border-radius: var(--r-md);
+  padding: 0;
+}
+.store-search input::placeholder, .store-filter input::placeholder { color: var(--text-dim); }
+.store-search kbd {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: 0 6px;
 }
-.store-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
-.store-strut { white-space: nowrap; }
+.store-search:focus-within kbd { visibility: hidden; }
+/* "Your strut server": where Install opens. */
+.store-strut {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: none;
+  color: var(--text-muted);
+  font: inherit;
+  font-size: 12.5px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color 120ms, border-color 120ms;
+}
+.store-strut:hover { color: var(--text); border-color: var(--border-strong); }
+.store-strut.is-set { color: var(--text); font-family: var(--font-mono); font-size: 12px; }
+.store-strut-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--text-dim); }
+.store-strut.is-set .store-strut-dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 8px rgba(34, 197, 94, 0.7); }
 .store-strut-form { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
 .store-strut-form input {
-  width: 240px;
+  width: 260px;
+  height: 32px;
   font: inherit;
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: 12.5px;
   background: var(--surface-2);
   border: 1px solid var(--border-strong);
   color: var(--text);
-  padding: 4px 8px;
+  padding: 0 10px;
   border-radius: var(--r-md);
 }
-.store-strut-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+/* The shared pieces, at the store's scale. */
+.store .btn { padding: 6px 14px; font-size: 12.5px; text-decoration: none; transition: background 120ms, border-color 120ms, box-shadow 160ms; }
+.store .btn-lg { padding: 11px 20px; font-size: 14px; border-radius: 10px; }
+.store .btn-primary { display: inline-flex; align-items: center; background: var(--text); border-color: var(--text); color: var(--bg); }
+.store .btn-primary:hover { background: #fff; box-shadow: 0 0 0 4px rgba(var(--glow), 0.18), 0 8px 30px -8px rgba(var(--glow), 0.7); }
+.store .btn-primary:disabled { opacity: 0.4; box-shadow: none; cursor: default; }
+.store .badge { padding: 2px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--text-muted); border: 1px solid var(--border); }
+.store .badge-accent { color: var(--accent-strong); border-color: rgba(var(--glow), 0.35); }
+.store .badge-ok { color: var(--ok); border-color: rgba(34, 197, 94, 0.3); }
+.store .badge-warning { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); }
+.store .badge-danger { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); }
+.store .auto-meta { font-size: 12px; }
+.store span.auto-meta { display: inline; }
+.store div.auto-meta, .store dd.auto-meta { display: block; }
+.store .auto-hint { font-size: 12.5px; }
+.store .auto-link { font-size: 13px; }
+.store .package-name { font-size: 14px; }
+.store .package-version { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
+.store-main code { font-size: 0.92em; }
+.store-main a, .store-foot a { color: var(--accent); text-decoration: none; }
+.store-main a:hover, .store-foot a:hover { text-decoration: underline; }
+.store-main a.btn:hover { text-decoration: none; }
 .store-main {
-  flex: 1;
+  position: relative;
+  flex: 1 0 auto;
   width: 100%;
-  max-width: 1120px;
+  max-width: 1180px;
   margin: 0 auto;
-  padding: var(--sp-5) var(--sp-5) var(--sp-6);
+  padding: 48px var(--sp-6) 72px;
   display: flex;
   flex-direction: column;
-  gap: var(--sp-6);
+  gap: 56px;
+}
+.store-main > * { animation: store-in 280ms ease both; }
+@keyframes store-in { from { opacity: 0; transform: translateY(6px); } }
+.store-main h1 { margin: 0; font-size: 34px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.15; }
+.store-main h2 { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
+.store-main h3 { margin: 0 0 var(--sp-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
+.store-main section { display: flex; flex-direction: column; gap: var(--sp-4); scroll-margin-top: 84px; }
+.store-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0;
+  line-height: 18px;
+  color: var(--text-muted);
+  padding: 0 7px;
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.12);
+  font-variant-numeric: tabular-nums;
 }
-.store-main h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
-.store-main h2 { margin: 0; font-size: 15px; font-weight: 600; }
-.store-main h3 { margin: 0 0 var(--sp-2); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
-.store-main section { display: flex; flex-direction: column; gap: var(--sp-3); }
-.store h1 .auto-meta, .store h2 .auto-meta, .store h3 .auto-meta, .store-tree .auto-meta, .store-chip .auto-meta, .store-card-title .auto-meta, .store-concept .auto-meta { display: inline; }
-.store-hero { gap: var(--sp-2); }
-.store-hero h1 { font-size: 26px; }
-.store-hero p { margin: 0; max-width: 720px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
+.store-dim { color: var(--text-dim); }
 .store-section-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
+.store-section-hint { font-size: 13px; color: var(--text-dim); }
+.store .store-section-link { margin-left: auto; }
+.store-results-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
+.store-results-head h1 { display: inline-flex; align-items: center; gap: 12px; }
 .store-empty { padding: var(--sp-6) 0; display: flex; flex-direction: column; gap: var(--sp-2); }
-.store-empty-title { font-size: 16px; font-weight: 600; }
-.store-foot {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sp-2) var(--sp-5);
-  padding: var(--sp-4) var(--sp-5);
-  border-top: 1px solid var(--border);
-  font-size: 11px;
+.store-empty-title { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
+/* While a read is out. */
+.store-skel { display: flex; flex-direction: column; gap: var(--sp-4); }
+.store-skel span {
+  height: 92px;
+  border-radius: var(--r-lg);
+  background: linear-gradient(100deg, rgba(148, 163, 184, 0.05) 30%, rgba(148, 163, 184, 0.12) 50%, rgba(148, 163, 184, 0.05) 70%);
+  background-size: 300% 100%;
+  animation: store-shimmer 1.6s linear infinite;
+}
+.store-skel span:first-child { height: 40px; width: 44%; }
+@keyframes store-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
+/* The hero. */
+.store-main .store-hero { gap: 20px; padding: 36px 0 4px; align-items: flex-start; }
+.store-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
   color: var(--text-muted);
-  line-height: 1.5;
+  padding: 5px 12px 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--tint);
+}
+.store-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: store-pulse 2.4s ease-out infinite; }
+@keyframes store-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55); }
+  70%, 100% { box-shadow: 0 0 0 8px rgba(94, 234, 212, 0); }
+}
+.store-hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.035em; }
+.store-grad { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
+.store-hero p { margin: 0; max-width: 620px; font-size: 16.5px; line-height: 1.6; color: var(--text-muted); }
+/* A strip of numbers: the index's, a package's. */
+.store-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  width: 100%;
+  max-width: 720px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: var(--panel);
+  overflow: hidden;
 }
-.store-foot code { font-family: var(--font-mono); }
-.store .btn-lg { padding: 8px 16px; font-size: 13px; }
-/* App cards. */
-.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
+.store-package > .store-stats { max-width: none; }
+.store-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding: 16px 20px;
+  background: none;
+  border: none;
+  border-left: 1px solid var(--border);
+  color: var(--text);
+  font: inherit;
+  text-align: left;
+}
+.store-stat:first-child { border-left: none; }
+button.store-stat { cursor: pointer; transition: background 120ms; }
+button.store-stat:hover { background: rgba(var(--glow), 0.08); }
+button.store-stat:hover .store-stat-l { color: var(--accent-strong); }
+.store-stat-n { font-size: 28px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.store-stat-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); transition: color 120ms; }
+/* Cards: apps, the Concept roots. */
+.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
 .store-card {
+  position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--sp-2);
+  gap: var(--sp-3);
   text-align: left;
   font: inherit;
   color: var(--text);
-  background: var(--surface);
+  background: var(--panel);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
-  padding: var(--sp-3);
+  padding: 20px;
   cursor: pointer;
+  overflow: hidden;
+  transition: border-color 160ms, transform 160ms, box-shadow 200ms;
 }
-.store-card:not(.is-static):hover { border-color: var(--border-strong); background: var(--surface-2); }
+/* A line of light along the top edge, on hover. */
+.store-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(var(--glow), 0.9), transparent);
+  opacity: 0;
+  transition: opacity 200ms;
+}
+.store-card:not(.is-static):hover { border-color: rgba(var(--glow), 0.45); transform: translateY(-2px); box-shadow: 0 18px 50px -24px rgba(var(--glow), 0.55); }
+.store-card:not(.is-static):hover::before { opacity: 1; }
 .store-card.is-static { cursor: default; }
-.store-card-head { display: flex; align-items: center; gap: var(--sp-3); }
+.store-card-head { display: flex; align-items: center; gap: 14px; }
 .store-app-tile {
   flex: none;
-  width: 40px;
-  height: 40px;
-  border-radius: var(--r-lg);
+  width: 46px;
+  height: 46px;
+  border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
-  color: var(--accent-strong);
-  background: rgba(110, 168, 255, 0.12);
-  border: 1px solid rgba(110, 168, 255, 0.25);
+  letter-spacing: 0.02em;
+  color: #fff;
+  background: linear-gradient(135deg, rgba(var(--glow), 0.55), rgba(94, 234, 212, 0.35));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 6px 18px -8px rgba(var(--glow), 0.8);
 }
 .store-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-.store-card-name { font-size: 13.5px; font-weight: 600; }
-.store-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
-.store-card-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
-.store-card code, .store-row code, .store-table code, .store-facts code, .store-paste code { font-family: var(--font-mono); font-size: 11px; }
-/* The package rows. */
-.store-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
-.store-row {
+.store-card-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
+.store-card-desc { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.store-card-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
+.store-card-go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-dim); transition: color 160ms, gap 160ms; }
+.store-card:not(.is-static):hover .store-card-go { color: var(--accent-strong); gap: 8px; }
+.store-root { gap: var(--sp-2); }
+/* Rows in one panel: packages, publishers, a package's workflows and steps. */
+.store-lines, .store-nodes {
   display: flex;
   flex-direction: column;
-  gap: 3px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-lg);
+  background: rgba(148, 163, 184, 0.03);
+  overflow: hidden;
+}
+.store-line {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-4);
+  width: 100%;
   text-align: left;
   font: inherit;
   color: var(--text);
   background: none;
   border: none;
-  border-bottom: 1px solid var(--border);
-  padding: var(--sp-3) var(--sp-2);
+  border-top: 1px solid var(--border);
+  padding: 16px 20px;
   cursor: pointer;
-}
-.store-row:not(.is-static):hover { background: var(--surface); }
-.store-row.is-static { cursor: default; }
-.store-row-main { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
-.store-row-desc { font-size: 12px; color: var(--text-muted); }
+  transition: background 120ms;
+}
+.store-lines > .store-line:first-child, .store-lines > .store-acc:first-child > .store-line { border-top: none; }
+.store-line:not(.is-static):hover { background: var(--tint); }
+.store-line.is-static { cursor: default; }
+.store-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
+.store-line-title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+.store-line-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.store-line-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
+.store-line-side { flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }
+.store-line-go { flex: none; color: var(--text-dim); transition: color 120ms, transform 160ms; }
+.store-line:hover .store-line-go { color: var(--accent-strong); transform: translateX(3px); }
+.store-key { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
+.store-secret { font-size: 11px; color: var(--text-muted); padding: 0 6px; border: 1px dashed var(--border-strong); border-radius: 5px; }
 /* What a thing reaches. */
-.store-can { display: inline-flex; gap: 4px; }
-.store-can-reads { color: var(--text-muted); }
-.store-can-spends { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.1); }
-.store-can-acts { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.1); }
-.store-can-code { color: var(--walk-step); border-color: rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.1); }
-/* Chips: concept roots, a package's pages. */
-.store-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
-.store-chip {
+.store-can { flex: none; display: inline-flex; gap: 4px; }
+.store .store-can-spends { color: var(--warning); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.1); }
+.store .store-can-acts { color: var(--danger); border-color: rgba(248, 113, 113, 0.3); background: rgba(248, 113, 113, 0.1); }
+.store .store-can-code { color: var(--mint); border-color: rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.1); }
+/* A workflow's row, opened: its inputs and the steps it runs. */
+.store-acc > summary { list-style: none; }
+.store-acc > summary::-webkit-details-marker { display: none; }
+.store-acc[open] > summary { background: var(--tint); }
+.store-node-chev { flex: none; color: var(--text-dim); transition: transform 140ms, color 140ms; }
+.store-acc[open] > summary .store-node-chev, .store-node.is-open > .store-node-row .store-node-chev { transform: rotate(90deg); color: var(--accent-strong); }
+.store-acc-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
+  gap: var(--sp-5);
+  padding: 16px 20px 20px 50px;
+  border-top: 1px dashed var(--border);
+}
+.store-acc-body h3:not(:first-child) { margin-top: var(--sp-4); }
+.store-acc-note { margin-top: var(--sp-3); }
+.store-input { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
+.store-steps { display: flex; flex-wrap: wrap; gap: 5px; }
+.store-steps code { font-size: 11.5px; color: var(--text-muted); background: rgba(148, 163, 184, 0.08); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }
+.store-lint { margin-top: 4px; }
+.store-lint summary { cursor: pointer; list-style: none; display: inline-flex; }
+.store-lint ul { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-muted); }
+/* The Concept tree: a level at a time, with a filter over every page. */
+.store-tree { display: flex; flex-direction: column; gap: var(--sp-3); }
+.store-node + .store-node, .store-nodes > .store-node-link + .store-node-link, .store-node-kids { border-top: 1px solid var(--border); }
+.store-node-row { display: flex; align-items: center; }
+.store-node-link {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 16px;
+  background: none;
+  border: none;
   font: inherit;
-  font-size: 12px;
+  font-size: 13.5px;
   color: var(--text);
-  background: var(--surface);
-  border: 1px solid var(--border);
+  text-align: left;
+  cursor: pointer;
+  transition: background 100ms;
+}
+.store-node-link:hover, .store-more:hover { background: var(--tint); }
+/* A leaf lines up with a branch's name, past where its chevron would be. */
+.store-node:not(.is-branch) > .store-node-link { padding-left: 40px; }
+.store-node-name { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.store-node.is-branch > .store-node-row .store-node-name { font-weight: 600; }
+.store-node-desc { flex: 1 1 0; min-width: 0; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.store-node-open {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-right: 10px;
+  padding: 3px 10px;
+  border: 1px solid transparent;
   border-radius: 999px;
-  padding: 4px 12px;
+  background: none;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition: color 120ms, border-color 120ms;
+}
+.store-node-open:hover { color: var(--accent-strong); border-color: rgba(var(--glow), 0.4); }
+.store-node-kids { margin-left: 22px; border-left: 1px solid var(--border); }
+.store-more {
+  padding: 10px 16px;
+  background: none;
+  border: none;
+  border-top: 1px solid var(--border);
+  font: inherit;
+  font-size: 12.5px;
+  color: var(--accent);
+  text-align: left;
   cursor: pointer;
 }
-.store-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
-/* A package's page. */
-.store-crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
-.store-crumbs .auto-link { font-size: 12px; }
-.store-package, .store-concept { display: flex; flex-direction: column; gap: var(--sp-5); }
-.store-package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
-.store-package-title { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
-.store-package-title h1 { font-family: var(--font-mono); font-size: 20px; }
-.store-package-desc { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; max-width: 640px; }
+/* A package's page, a Concept's, a live item's. */
+.store-crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }
+.store .store-crumbs .auto-link { color: var(--text-muted); }
+.store .store-crumbs .auto-link:hover { color: var(--accent-strong); }
+.store-package, .store-concept, .store-live { display: flex; flex-direction: column; gap: var(--sp-6); }
+.store-package-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sp-6);
+  flex-wrap: wrap;
+  padding: 28px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: radial-gradient(600px 220px at 0% 0%, rgba(var(--glow), 0.16), transparent 70%), var(--panel);
+}
+.store-package-title { flex: 1 1 420px; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
+.store-package-title h1 { font-family: var(--font-mono); font-size: 30px; letter-spacing: -0.03em; overflow-wrap: anywhere; }
+.store-package-desc { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 680px; }
 .store-package-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
-.store-package-install { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); }
-.store-install-ask { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
-.store-paste { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
-.store-package-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-6); align-items: start; }
-@media (max-width: 800px) { .store-package-body { grid-template-columns: minmax(0, 1fr); } }
-.store-package-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
-.store-package-aside { display: flex; flex-direction: column; gap: var(--sp-5); font-size: 12px; }
-.store-package-aside section { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
-.store-facts { margin: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px var(--sp-2); font-size: 12px; }
-.store-facts dt { color: var(--text-muted); }
-.store-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
+.store-package-install { flex: 0 1 340px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
+.store-install-ask { display: flex; flex-direction: column; gap: var(--sp-3); align-items: flex-start; }
+.store-paste { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
+.store-paste .copy-btn { vertical-align: middle; }
+.store-package-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
+.store-package-main { display: flex; flex-direction: column; gap: 44px; min-width: 0; }
+.store-concept-head { display: flex; flex-direction: column; gap: var(--sp-3); }
+.store-concept .store-package-main { gap: var(--sp-6); }
+.store-package-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--sp-4); font-size: 13px; }
+.store-main .store-package-aside section { gap: var(--sp-2); padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(148, 163, 184, 0.04); }
+.store-facts { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px var(--sp-2); font-size: 12.5px; }
+.store-facts dt { color: var(--text-dim); }
+.store-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
 .store-wrap { overflow-wrap: anywhere; }
 .store-releases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
 .store-releases li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
-.store-releases li.is-yanked .package-version { text-decoration: line-through; color: var(--text-muted); }
-.store-table { width: 100%; border-collapse: collapse; font-size: 12px; }
-.store-table th { text-align: left; font-weight: 500; font-size: 11px; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
-.store-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
-.store-table td .badge { margin-left: 6px; }
-.store-steps { display: flex; flex-wrap: wrap; gap: 4px; }
-.store-steps code { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 5px; }
-.store-input { display: flex; gap: 6px; align-items: baseline; }
-.store-lint summary { cursor: pointer; list-style: none; display: inline-block; }
-.store-lint ul { margin: var(--sp-1) 0 0; padding-left: 16px; color: var(--text-muted); }
-.store-readme { font-size: 13px; line-height: 1.55; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
-/* The concept tree. */
-.store-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); }
-.store-tree-root { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
-.store-tree-link { background: none; border: none; padding: 0; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; text-align: left; }
-.store-tree-link.is-root { font-size: 14px; font-weight: 600; }
-.store-tree-link:hover { color: var(--accent); }
-.store-tree-children { display: flex; flex-direction: column; gap: 3px; padding-left: var(--sp-3); border-left: 1px solid var(--border); margin-top: var(--sp-1); }
-@media (max-width: 640px) {
-  .store-top { flex-wrap: wrap; height: auto; padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
-  .store-main { padding: var(--sp-4); }
+.store-releases li.is-yanked .package-version { text-decoration: line-through; color: var(--text-dim); }
+/* Prose: a Concept's page, a README. */
+.store .md-view { font-size: 14.5px; line-height: 1.7; color: #d2d9e4; }
+.store .md-view p { margin-bottom: var(--sp-3); }
+.store .md-view .md-h { margin: 1.5em 0 0.5em; letter-spacing: -0.01em; }
+.store .md-view .md-h1 { font-size: 24px; letter-spacing: -0.02em; }
+.store .md-view .md-h2 { font-size: 19px; }
+.store .md-view .md-h3 { font-size: 16px; }
+.store .md-view .md-h4 { font-size: 14.5px; }
+.store .md-view .md-ul li, .store .md-view .md-ol li { margin-bottom: 4px; }
+.store .md-view .md-code-inline, .store .md-view .md-code-block { font-size: 12.5px; }
+.store .md-view .md-table { font-size: 13px; }
+.store-prose { max-width: 760px; }
+.store-readme { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-lg); background: rgba(148, 163, 184, 0.03); }
+/* For agents: the one line that adds the store to an MCP client. */
+.store-main .store-agents {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--sp-5) var(--sp-6);
+  padding: 28px;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: radial-gradient(520px 200px at 100% 0%, rgba(94, 234, 212, 0.1), transparent 70%), var(--panel);
+}
+.store-agents-text { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
+.store-agents-text p { margin: 0; max-width: 460px; font-size: 13.5px; color: var(--text-muted); }
+.store-cmd {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.45);
+  font-family: var(--font-mono);
+  font-size: 12.5px;
+}
+.store-cmd-prompt { color: var(--mint); user-select: none; }
+.store-cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: inherit; scrollbar-width: none; }
+.store-foot {
+  position: relative;
+  flex: none;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--sp-2) var(--sp-6);
+  padding: 20px var(--sp-6);
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.store-foot-meta { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
+.store-foot code { font-family: var(--font-mono); color: var(--text-muted); }
+@media (max-width: 900px) {
+  .store-package-body { grid-template-columns: minmax(0, 1fr); }
+  .store-package-aside { position: static; }
+}
+@media (max-width: 720px) {
+  .store-top { flex-wrap: wrap; height: auto; padding: var(--sp-3) var(--sp-4); gap: var(--sp-2) var(--sp-3); }
+  .store-nav { flex: 1; }
+  .store-search { order: 3; flex: 1 1 160px; min-width: 0; max-width: none; margin: 0; }
+  .store-strut, .store-strut-form { order: 4; }
+  .store-main { padding: var(--sp-5) var(--sp-4) 56px; gap: 44px; }
+  .store-main .store-hero { padding-top: var(--sp-3); }
+  .store-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .store-stat:nth-child(odd) { border-left: none; }
+  .store-stat:nth-child(n + 3) { border-top: 1px solid var(--border); }
+  .store-package-head, .store-main .store-agents { padding: 20px; }
+  .store-package-title h1 { font-size: 24px; }
+  .store-line { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: 14px 16px; }
+  .store-line-main { flex-basis: 100%; }
+  .store-acc > .store-line .store-line-main { flex-basis: calc(100% - 30px); }
+  .store-line-go { display: none; }
+  .store-acc-body { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
+  .store-node-name { white-space: normal; }
+  .store-node-desc { display: none; }
+  .store-foot { padding: var(--sp-4); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .store *, .store *::before { animation: none !important; transition: none !important; }
 }
 
 .prop-summary { color: var(--text-muted); margin-top: 4px; white-space: pre-wrap; }
@@ -5223,7 +5595,7 @@ input.package-search { width: 100%; margin-bottom: var(--sp-2); }
 
 /* ── The store's live items (Store.tsx LivePage) ─────────────────────────── */
 .store-live-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
-.store-live-frame { display: block; width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
+.store-live-frame { display: block; width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
 /* Running a live item (Store.tsx RunPanel, plans/paid-runs.md §10). */
 .store-price-main { font-size: 14px; font-weight: 600; margin-bottom: var(--sp-2); }
 .store-price .auto-hint { margin-top: var(--sp-1); }
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 03b3eb7f..c4c423f4 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -12,6 +12,10 @@ const sseConfigure = (proxy: any) => {
   });
 };
 
+// `STRUT_DEV_INDEX=https://index.stakwork.ai npm run dev`: the store front
+// (`?store=1`) of this checkout over a deployed index's open reads.
+const index = process.env.STRUT_DEV_INDEX;
+
 export default defineConfig({
   // Relative asset URLs so the built UI can be served from any mount path
   // (root or a sub-path like /lab) without a baked-in base. Pairs with the
@@ -64,7 +68,7 @@ export default defineConfig({
       "/packages": "http://localhost:3000",
       "/publisher": "http://localhost:3000",
       // The index role's open reads: the store front (`?store=1`).
-      "/index": "http://localhost:3000",
+      "/index": index ? { target: index, changeOrigin: true } : "http://localhost:3000",
       // Model downloads are SSE; /audio/stream is a WebSocket.
       "/audio": { target: "http://localhost:3000", ws: true, configure: sseConfigure },
       // An app's channel socket (plans/app-channels.md): a WebSocket.

From cdff833f00c9cb5cb7bd34c22e148c0c049d54a9 Mon Sep 17 00:00:00 2001
From: Evanfeenstra <evanfeenstra@gmail.com>
Date: Tue, 10 Nov 2026 21:20:13 -0800
Subject: [PATCH 2/2] Store front: no hero sentence, no section descriptions; a
 package's steps are titled Tools

- The hero is its label, its headline and the counts: the sentence under
  the headline is gone.
- No section carries a one-line description any more, on the home page or
  a package's page; `SectionHead` is a title, a count and what the caller
  puts beside them. The note under a package's steps about the lint goes
  with them (the `clean` badge's tooltip says what it read).
- A package's steps are titled Tools, as the shell's sidebar titles step
  types: the section, the stat, and the count in the home page's package
  row. A workflow's own "steps" keep the word: they are what it runs.
---
 AGENTS.md                     |  2 +-
 web/src/components/Store.tsx  | 25 +++++++++++--------------
 web/src/styles/components.css |  2 --
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 8dc87ba8..fe170bf6 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -285,7 +285,7 @@ strut/
         │   ├── AppHost.tsx           # an app's page, hosted (plans/apps.md §7.3): the version's files listed (`useFileScope` mints the token), `dist/index.html` fetched under it (the server writes the app's identity into it), the TEXT framed as the srcdoc of `<iframe sandbox="allow-scripts allow-downloads allow-forms">` — an opaque origin, never `allow-same-origin`, no src with a credential; `allow-forms` so a `<form onSubmit>` fires its handler (the CSP's `form-action 'none'` still refuses the submission); never a `blob:` URL, whose document has its creator's `location.origin` and the whole URL as its pathname, which kills a validator in the MCP SDK's bundle at module time — with the relay (../app-host) connected over the frame's window BEFORE the document loads. The canvas area when an app is selected (the sidebar's Apps section, `?app=`), or the whole window with `&solo=1` (SoloApp.tsx) — in both inside AppWithPanel.tsx, so a file or another app the page links to opens beside it — an app of this strut there under a version chip (`panelChip`, app-versions.ts) listing its versions to VIEW in place, never to make live; the topbar shows its title, a chip with the live version and the drafts waiting (`v8 · live · 3 drafts`) that opens AppVersionsFlyout.tsx, a **Tab** toggle beside it (`PUT /apps/:name/pin`: shown as a tab in the hosts that list this workspace's apps; the sidebar's Apps list puts pinned apps first, marked `tab`) and **Edit with the builder** (the chat with the app named); a page's `ui/message` is sent on the builder chat; an `app_publish` in the chat reloads the frame. `app` is a workspace app `{ name, version }`. A visitor's priced launch shows PaymentSheet.tsx OVER the frame (never in it): the price in dollars and sats, what it is for, the invoice as a QR code (`qrcode-generator`) with Copy, waiting on the relay's claim (which outlives the sheet: a phone that pays after Cancel still buys credit), Cancel, a new invoice when one expired; the credential goes to the relay, which sends the page's call again
         │   ├── AppVersionsFlyout.tsx # an app's Versions (plans/app-releases.md), the topbar's version chip: the mode ("Every publish goes live" / "Hold a version"), the live version (since when, by whom), one row per version newest first — live, was live, draft (web/src/app-versions.ts, tested) — with View (this browser only: the frame shows it under a banner with Make live and Back to live), Make live, or Restore for a version that was live (its newest release); every change asks first; release ids only in History. No workflow version numbers: the lock's `behind` and `floating` are not shown until runs keep to the lock (work item 2)
         │   ├── AppUsageFlyout.tsx    # an app's Usage (`GET /apps/:name/usage`, src/apps/monitor.ts), the topbar's **Usage** button beside the app's version chip: the live version's warnings first (each with its fix and, for an app here, **Ask the builder to fix it** — a chat draft the person sends), calls per minute over the hour, the day by step type, earlier versions' warnings dim; refreshed every 10 s while open. The warning dot (`.usage-dot`) sits on the app's sidebar row, the Apps title and the Usage button while `GET /apps` carries `warnings`; the shell re-reads this strut's apps every 30 s for it
-        │   ├── Store.tsx             # the STORE FRONT (`?store=1`, plans/marketplace.md §7; specs/API.md §14.3): an index strut's public page, rendered ALONE in place of the shell for anyone with no credential, over the open reads alone (`api.storeCatalog` / `storeSearch` / `storePackage` / `storeConcepts` / `storeConcept`: a plain fetch, never the key) — Browse (a hero with the index's counts; the apps across the hits first, each a package's face off `detail`; the packages; the Concept roots as cards; the publishers off the signed card; the one line that adds the store to an MCP client; a footer saying it is all derived; a search, `/` to focus it, returns the matching packages and Concept pages), a package's page (read with `?docs=0`; its counts as a strip that jumps to each part; apps; the workflows as rows that open to their inputs, steps and agent tools, with what each reaches — the `spends` / `acts` / `code` chips, `CanChips`; the steps with secrets and lint; the Concepts as a TREE, `ConceptTree`: the roots with their counts, a branch opened in place and its children drawn only then, a filter over every page through `src/search.ts` — never one flat list, a package carries hundreds; the README; the aside: needs, the publisher's key, releases and channels), the Concept pages as a wiki (the same tree as the index; a page's docs, its children as rows 24 at a time, in which packages). Its own scale and a darker palette: components.css redefines the shell's palette variables on `.store`, so the shared `.btn`, `.badge` and `.md-view` follow. Nothing installs here: **Install into your strut** is `installLink` into the visitor's own strut ("Your strut", kept in localStorage; else asked, the name to paste beside it). On a strut without the role: "Not a store". LIVE items (plans/public-surface.md §8): the index's live rows (`PUT /index/live/:prefix { url }`, the card's `live` map beside `publishers`, read at the row and every crawl; `GET /index/live`) show as **Live apps** and **Live workflows and steps** on Browse, each a page read from its publisher's `/public` in the visitor's browser (an app framed from `?app=&solo=1&public=1` with "Open full page"; a workflow's inputs, steps and recent runs; a step's fields and source), and a Concept only a live view holds reads its docs from there. A live workflow or step anyone may RUN (plans/paid-runs.md §10 "The store"; its price badge on Browse off the index's `run`) gets, read fresh from its publisher's `/public` `runnable` (a runnable-only item's definition 404s and is said not to be public), a PRICE card (`priceWords`, the reserve, what recent runs were charged) and a **Run** (or **Call**) form drawn from its input (`RunPanel`, ConfigField over web/src/store-run.ts `runFields`): the launch goes to the publisher from the visitor's browser with no credential of anyone's, one `key` per press sent again with every retry (after a payment, after a dropped request — a call is never sent twice); a 402 shows PaymentSheet.tsx and the paying loop is ../visitor-pay's `callPaying` over the HTTP answers (`httpCallResult`, whose errors carry their `code` and `status`, so only the door's own 401 `invalid_token` drops the credential — never a step's failure that mentions it, which is never sent again); the credit and every invoice shown live per publisher in this page's `sessionStorage` (web/src/store-purse.ts), claimed until it settles or ends whether or not the sheet is open; the runs this tab launched are read back with their run tokens until they end (`RunView`: status, output, files, what it was charged; a run that ended with its charge pending says so, `runEnded`), and the credit line refreshes then; the credit lives in the tab, and **Your credit lives in this tab** shows the credential on request (Copy) and takes one pasted back (checked with `GET /public/credit`) — never in a URL
+        │   ├── Store.tsx             # the STORE FRONT (`?store=1`, plans/marketplace.md §7; specs/API.md §14.3): an index strut's public page, rendered ALONE in place of the shell for anyone with no credential, over the open reads alone (`api.storeCatalog` / `storeSearch` / `storePackage` / `storeConcepts` / `storeConcept`: a plain fetch, never the key) — Browse (a hero with the index's counts; the apps across the hits first, each a package's face off `detail`; the packages; the Concept roots as cards; the publishers off the signed card; the one line that adds the store to an MCP client; a footer saying it is all derived; a search, `/` to focus it, returns the matching packages and Concept pages), a package's page (read with `?docs=0`; its counts as a strip that jumps to each part; apps; the workflows as rows that open to their inputs, steps and agent tools, with what each reaches — the `spends` / `acts` / `code` chips, `CanChips`; its steps, titled Tools as the shell's sidebar titles them, with secrets and lint; the Concepts as a TREE, `ConceptTree`: the roots with their counts, a branch opened in place and its children drawn only then, a filter over every page through `src/search.ts` — never one flat list, a package carries hundreds; the README; the aside: needs, the publisher's key, releases and channels), the Concept pages as a wiki (the same tree as the index; a page's docs, its children as rows 24 at a time, in which packages). Its own scale and a darker palette: components.css redefines the shell's palette variables on `.store`, so the shared `.btn`, `.badge` and `.md-view` follow. Nothing installs here: **Install into your strut** is `installLink` into the visitor's own strut ("Your strut", kept in localStorage; else asked, the name to paste beside it). On a strut without the role: "Not a store". LIVE items (plans/public-surface.md §8): the index's live rows (`PUT /index/live/:prefix { url }`, the card's `live` map beside `publishers`, read at the row and every crawl; `GET /index/live`) show as **Live apps** and **Live workflows and steps** on Browse, each a page read from its publisher's `/public` in the visitor's browser (an app framed from `?app=&solo=1&public=1` with "Open full page"; a workflow's inputs, steps and recent runs; a step's fields and source), and a Concept only a live view holds reads its docs from there. A live workflow or step anyone may RUN (plans/paid-runs.md §10 "The store"; its price badge on Browse off the index's `run`) gets, read fresh from its publisher's `/public` `runnable` (a runnable-only item's definition 404s and is said not to be public), a PRICE card (`priceWords`, the reserve, what recent runs were charged) and a **Run** (or **Call**) form drawn from its input (`RunPanel`, ConfigField over web/src/store-run.ts `runFields`): the launch goes to the publisher from the visitor's browser with no credential of anyone's, one `key` per press sent again with every retry (after a payment, after a dropped request — a call is never sent twice); a 402 shows PaymentSheet.tsx and the paying loop is ../visitor-pay's `callPaying` over the HTTP answers (`httpCallResult`, whose errors carry their `code` and `status`, so only the door's own 401 `invalid_token` drops the credential — never a step's failure that mentions it, which is never sent again); the credit and every invoice shown live per publisher in this page's `sessionStorage` (web/src/store-purse.ts), claimed until it settles or ends whether or not the sheet is open; the runs this tab launched are read back with their run tokens until they end (`RunView`: status, output, files, what it was charged; a run that ended with its charge pending says so, `runEnded`), and the credit line refreshes then; the credit lives in the tab, and **Your credit lives in this tab** shows the credential on request (Copy) and takes one pasted back (checked with `GET /public/credit`) — never in a URL
         │   ├── AppRail.tsx           # the COLLAPSED sidebar (the toggle beside "strut", `sidebarCollapsed` in localStorage): one tile per app — two letters, a hue from its key, pinned first, the usage dot — its title in a tooltip fixed to the window; a click opens the app. The sections stay mounted, hidden, so each keeps its scroll
         │   ├── AppWithPanel.tsx      # an app's page with a SIDE PANEL beside it (plans/jamie-app.md §4, §4.1): what the app cannot show in its own document (`frame-src 'none'`, `run/files` 2 MB) it hands over as a strut deep link through `ui/open-link`, and this host opens `?artifact=<served path>` (`isServedFilePath`: a job's files, a run's artifacts, a peer's read-through) through ArtifactViewer (`solo` + `onClose`) and `?app=<key>` (another app, a peer's too) through AppHost under a title bar, instead of navigating away — the page keeps its frame and its state. `panelTarget` (app-links.ts) decides; a new link replaces the panel's content (an app's new input in place), ✕ closes it, its left edge resizes it (`WidthResizer`, `--app-panel-width` on `.app-split`, `strut.appPanelWidth` in localStorage), and in a container under 760 px it lies over the page (a container query). The panel's own app links the same way. A link to the page itself, a workflow, a run or a job goes to the caller's `onNavigate` as before. Not in the address bar: a reload closes it. No panel for a visitor's page. Used by the canvas-area host (app.tsx) and SoloApp.tsx, not by the job timeline's or the viewer's app
         │   ├── MemberApps.tsx        # a MEMBER's page (plans/member-rights.md): the apps here (`GET /apps`, strut/views left out, strut/jamie first, then pinned, then by title), each opening alone as `?app=<name>&solo=1` — what a member who opens strut directly gets instead of the shell
diff --git a/web/src/components/Store.tsx b/web/src/components/Store.tsx
index da425c24..0c716c35 100644
--- a/web/src/components/Store.tsx
+++ b/web/src/components/Store.tsx
@@ -241,11 +241,10 @@ function Loading() {
   return <div class="store-skel" role="status" aria-label="Loading"><span /><span /><span /></div>;
 }
 
-function SectionHead(props: { title: string; count?: number; hint?: string; children?: ComponentChildren }) {
+function SectionHead(props: { title: string; count?: number; children?: ComponentChildren }) {
   return (
     <div class="store-section-head">
       <h2>{props.title}{props.count !== undefined && <span class="store-count">{props.count}</span>}</h2>
-      {props.hint && <span class="store-section-hint">{props.hint}</span>}
       {props.children}
     </div>
   );
@@ -374,7 +373,6 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
         <section class="store-hero">
           <div class="store-eyebrow"><span class="store-pulse" /> Signed package index</div>
           <h1>Apps, workflows and knowledge <span class="store-grad">for your strut server</span></h1>
-          <p>Every package here is signed by its publisher. Install one into your own strut server, and it is checked there against the publisher's key.</p>
           <div class="store-stats">
             <Stat n={hits ? apps.length : undefined} label={apps.length === 1 ? "App" : "Apps"} />
             <Stat n={hits?.length} label={hits?.length === 1 ? "Package" : "Packages"} />
@@ -394,7 +392,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {liveApps.length > 0 && (
         <section>
-          <SectionHead title="Live apps" hint="Running on their publishers' servers, read-only: open one and look around" />
+          <SectionHead title="Live apps" />
           <div class="store-grid">
             {liveApps.map((a) => (
               <button class="store-card" key={`${a.publisher}/${a.name}`} onClick={() => props.go({ view: "live", publisher: a.publisher, kind: "app", name: a.name })}>
@@ -415,7 +413,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {liveFlows.length > 0 && (
         <section>
-          <SectionHead title="Live workflows and steps" hint="Read from their servers as they are now" />
+          <SectionHead title="Live workflows and steps" />
           <div class="store-lines">
             {liveFlows.map((i) => (
               <button class="store-line" key={`${i.publisher}/${i.kind}/${i.name}`} onClick={() => props.go({ view: "live", publisher: i.publisher, kind: i.kind as LiveKind, name: i.name })}>
@@ -442,7 +440,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {hits && apps.length > 0 && (
         <section>
-          <SectionHead title="Apps" count={apps.length} hint="Install the package, open the app" />
+          <SectionHead title="Apps" count={apps.length} />
           <div class="store-grid">
             {apps.map(({ pkg, version, app }) => (
               <button class="store-card" key={`${pkg}/${app.name}`} onClick={() => props.go({ view: "package", pkg })}>
@@ -481,7 +479,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
                   {h.description && <span class="store-line-desc">{h.description}</span>}
                   <span class="store-line-meta">
                     {h.detail
-                      ? [count(h.detail.apps.length, "app"), count(h.detail.workflows, "workflow"), count(h.detail.steps, "step"), count(h.detail.concepts, "concept")].map((t) => <span key={t}>{t}</span>)
+                      ? [count(h.detail.apps.length, "app"), count(h.detail.workflows, "workflow"), count(h.detail.steps, "tool"), count(h.detail.concepts, "concept")].map((t) => <span key={t}>{t}</span>)
                       : <span>archive not read yet</span>}
                     {h.detail?.secrets.length ? <span title={h.detail.secrets.join(", ")}>needs {count(h.detail.secrets.length, "secret")}</span> : null}
                   </span>
@@ -502,7 +500,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {!props.q && roots.length > 0 && (
         <section>
-          <SectionHead title="Knowledge" hint="The Concept pages the packages carry, as a tree">
+          <SectionHead title="Knowledge">
             <button class="auto-link store-section-link" onClick={() => props.go({ view: "concept", concept: "" })}>Browse the tree <ArrowRightIcon size={12} /></button>
           </SectionHead>
           <div class="store-grid">
@@ -522,7 +520,7 @@ function Browse(props: { q?: string; card: api.IndexCard | undefined; go: (v: St
 
       {!props.q && publishers.length > 0 && (
         <section>
-          <SectionHead title="Publishers" count={publishers.length} hint="Each signs its own packages with its key" />
+          <SectionHead title="Publishers" count={publishers.length} />
           <div class="store-lines">
             {publishers.map(([prefix, row]) => (
               <div class="store-line is-static" key={prefix}>
@@ -607,7 +605,7 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
         <div class="store-stats">
           <Stat n={d.apps.length} label={d.apps.length === 1 ? "App" : "Apps"} onClick={d.apps.length ? jump("store-apps") : undefined} />
           <Stat n={d.workflows.length} label={d.workflows.length === 1 ? "Workflow" : "Workflows"} onClick={d.workflows.length ? jump("store-workflows") : undefined} />
-          <Stat n={steps} label={steps === 1 ? "Step" : "Steps"} onClick={d.steps.length ? jump("store-steps") : undefined} />
+          <Stat n={steps} label={steps === 1 ? "Tool" : "Tools"} onClick={d.steps.length ? jump("store-steps") : undefined} />
           <Stat n={d.concepts.length} label={d.concepts.length === 1 ? "Concept" : "Concepts"} onClick={d.concepts.length ? jump("store-concepts") : undefined} />
         </div>
       )}
@@ -640,7 +638,7 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
           )}
           {d && d.workflows.length > 0 && (
             <section id="store-workflows">
-              <SectionHead title="Workflows" count={d.workflows.length} hint="Open one for its inputs and the steps it runs" />
+              <SectionHead title="Workflows" count={d.workflows.length} />
               <div class="store-lines">
                 {d.workflows.map((w) => (
                   <details class="store-acc" key={w.name}>
@@ -687,7 +685,7 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
           )}
           {d && d.steps.length > 0 && (
             <section id="store-steps">
-              <SectionHead title="Steps" count={steps} hint="TypeScript that runs inside the installing strut's process" />
+              <SectionHead title="Tools" count={steps} />
               <div class="store-lines">
                 {d.steps.map((s) => (
                   <div class="store-line is-static" key={s.name}>
@@ -711,12 +709,11 @@ function PackagePage(props: { pkg: string; target: string | null; link: (pkg: st
                   </div>
                 ))}
               </div>
-              <div class="auto-hint">The lint is a reading of each step's source, not a sandbox.</div>
             </section>
           )}
           {d && d.concepts.length > 0 && (
             <section id="store-concepts">
-              <SectionHead title="Concepts" count={d.concepts.length} hint="The knowledge it installs, as a tree: open a branch, or filter" />
+              <SectionHead title="Concepts" count={d.concepts.length} />
               <ConceptTree concepts={d.concepts} go={props.go} />
             </section>
           )}
diff --git a/web/src/styles/components.css b/web/src/styles/components.css
index bcf1d424..81255d90 100644
--- a/web/src/styles/components.css
+++ b/web/src/styles/components.css
@@ -5137,7 +5137,6 @@ input.package-search { width: 100%; margin-bottom: var(--sp-2); }
 }
 .store-dim { color: var(--text-dim); }
 .store-section-head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
-.store-section-hint { font-size: 13px; color: var(--text-dim); }
 .store .store-section-link { margin-left: auto; }
 .store-results-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
 .store-results-head h1 { display: inline-flex; align-items: center; gap: 12px; }
@@ -5177,7 +5176,6 @@ input.package-search { width: 100%; margin-bottom: var(--sp-2); }
 }
 .store-hero h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.04; letter-spacing: -0.035em; }
 .store-grad { display: block; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
-.store-hero p { margin: 0; max-width: 620px; font-size: 16.5px; line-height: 1.6; color: var(--text-muted); }
 /* A strip of numbers: the index's, a package's. */
 .store-stats {
   display: grid;