nebulosity 1.0.0 → 1.1.0

package/app/map/DetailPanel.tsx

@@ -1,27 +1,43 @@
 "use client";
 
-import { memo, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
-import { IconArrowLeft, IconArrowRight, IconCode, IconFile, IconFolder, IconX } from "@tabler/icons-react";
+import { memo, useCallback, useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
+import { IconArrowLeft, IconArrowRight, IconFile, IconFolder, IconX } from "@tabler/icons-react";
 import type { AreaCount, DescribeResponse, LevelResponse, MapNode, SummarizeResponse, SymbolInfo } from "@/lib/contracts";
 import { api, ApiError, demoGithub, type GitHubSource } from "./api";
-import { formatCompact, formatCount } from "./format";
+import { SIDE_COLOR } from "./emphasis";
+import { formatCount } from "./format";
+import {
+    barWidth,
+    childTitle,
+    declarationPlace,
+    defaultTab,
+    githubFolderLink,
+    importsTitle,
+    inspectorName,
+    inspectorTitle,
+    kindBeforeDescribe,
+    largestCount,
+    sizeLine,
+    type InspectorTab,
+} from "./inspector";
 import { noDeclarationsText } from "./labels";
 import { editorLink, githubLink } from "./links";
 import { DEMO } from "./mode";
-import { PANEL_WIDTH } from "./narrow";
 import { nameOf, shortPath } from "./paths";
 import { measureAfterPaint } from "./perf";
 import { linkedFrom, portalCaption, portalLinks } from "./portals";
-import { failureFor, summaryLine, wantsSummary } from "./summaries";
+import { askKey, failureFor, summaryLine, summaryNotes, wantsSummary } from "./summaries";
 import SourceViewer from "./SourceViewer";
 import { inlineCode, splitSummary } from "./text";
 
 type DetailPanelProps = {
-    /** The selection: a file, a folder, the repo, or one of the level's portals. */
+    /** The selection: a file, a folder, the repo, or one of the level's portals. Or, with onScreenFolder, the folder on screen. */
     path: string;
     level: LevelResponse;
     /** Moves when the index changes; the panel then refetches. */
     indexVersion: number;
+    /** The summaries stage is off (no API key in the Map's process), so a summary an older prompt wrote isn't asked for (P11). */
+    summariesOff: boolean;
     /** Go to the level holding a path and select it there. */
     onFocus: (targetPath: string) => void;
     onOpen: (folder: string) => void;
@@ -29,37 +45,53 @@ type DetailPanelProps = {
     onTurnPage: (page: number) => void;
     onClose: () => void;
     /**
-     * Inside VS Code's panel only: a declaration opens at its line in the editor instead of the source viewer, which
-     * "View source" still opens (design §4.4).
+     * Inside VS Code's panel only: "Open in VS Code", here and in the source viewer (at the line it shows), asks the
+     * editor over the bridge. A declaration shows in the source viewer, as in a browser tab (the owner, 2026-10-29).
      */
     onOpenInEditor?: (path: string, line?: number) => void;
-    /**
-     * Covering the whole canvas (narrow.ts's panelLayout): then it fills the Map's width, whatever that is as the window
-     * resizes. Beside the canvas it's PANEL_WIDTH wide, and the canvas's controls move left by as much.
-     */
-    covers: boolean;
+    /** Where MapView put it (app/map/shell.ts's InspectorPlace, without "none"): beside the canvas, under it, over it as a drawer, or over all of it. */
+    placement: "beside" | "below" | "drawer" | "cover";
+    /** Nothing is selected and the panel describes the folder on screen: then it has no close button. */
+    onScreenFolder?: boolean;
     /** The Map's error line, shown as the panel's last row while the panel covers the canvas it would sit on. */
     alert?: string;
 };
 
+/** Rows shown before "+N more": enough to act on without scrolling. */
+const PREVIEW = 8;
+
+/** The one primary button, Open folder (the mockup's .primary): the accent is for meaning, and this is the way in. */
+const PRIMARY = "inline-flex h-7 shrink-0 items-center whitespace-nowrap rounded-[5px] bg-accent px-3 text-[13px] font-semibold text-on-accent hover:brightness-110";
+/** Every other action, and the doorway's go-to-page buttons (the mockup's .secondary). */
+const SECONDARY = "inline-flex h-7 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-[5px] border border-border px-3 text-[13px] text-text hover:border-text-3";
+/** A control inside prose: Full summary, Show less, Try again (the mockup's .more). */
+const TEXT_LINK = "text-text underline decoration-text-3 underline-offset-2 hover:decoration-text";
+/** "+N more" and "Show fewer" under a list, quieter than the rows they unfold. */
+const QUIET = "mt-1 rounded-[5px] px-2 py-1 text-[12.5px] text-text-2 hover:text-text";
+
 /**
- * In a short window (under 480 px tall) the whole panel scrolls, its header too, so the body isn't left a few lines
- * under a header that never moves; the error row stays pinned to the bottom.
+ * The body under the name. One column that scrolls on its own, the header staying put. Under the canvas, in a panel at
+ * least 720 px wide, two columns side by side that each scroll (the summary and actions, then the tabs), as collapse
+ * option C's render at 820 × 900 has it. The queries go by the panel's own width (@container on the frame), not the
+ * window's, since the explorer and the canvas share the window with it.
+ *
+ * In a short window (under 480 px tall) the whole panel scrolls, its header too (SHORT_FRAME), so the body isn't left a
+ * few lines, or none under the Map's error row, beneath a header that never moves; the error row stays pinned to the
+ * bottom. Under the canvas the window is at least 640 px tall (shell.ts), so the two columns never meet this.
  */
+const BODY = "min-h-0 flex-1 overflow-y-auto pb-4 [@media(height<480px)]:flex-none [@media(height<480px)]:overflow-visible";
 const SHORT_FRAME = "[@media(height<480px)]:overflow-y-auto";
-const SHORT_BODY = "[@media(height<480px)]:flex-none [@media(height<480px)]:overflow-visible";
-
-/** Chips and rows shown before "+N more" or "View all": enough to act on without scrolling. */
-const PREVIEW = 8;
-
-const KIND_LABELS: Record<DescribeResponse["kind"], string> = { repo: "Repository", folder: "Folder", file: "File" };
+// one row as tall as the body (grid-rows-1 is minmax(0, 1fr)), so each column scrolls instead of the body
+const BODY_TWO = "@min-[720px]:grid @min-[720px]:grid-cols-2 @min-[720px]:grid-rows-1 @min-[720px]:pb-0";
+const COLUMN_TWO = "@min-[720px]:min-h-0 @min-[720px]:overflow-y-auto @min-[720px]:pb-4";
 
 /**
- * The details panel (VISUAL_REFRESH.md §5), top to bottom: what kind of thing it is, its name, its size, a short
- * summary that expands, what it depends on and what uses it (chips that focus the Map), and what's inside. A missing
- * or out-of-date summary is asked for once ("summarize now", PIVOT_SPEC.md §5.3), and the panel says so while it's
- * refreshing. A portal gets its own panel (PortalPanel). MapView remounts the panel for each selection (key), so
- * nothing leaks from one target to the next.
+ * The inspector (the Workbench redesign, 2026-10-27; mockup3.html's .insp), top to bottom: the name in the code font
+ * and its size, the tagline and a summary that expands, the actions that fit the target, then tabs for what it uses,
+ * what uses it, and what's inside, each row a name, a count and a bar. A missing or out-of-date summary, or one an older
+ * prompt wrote, is asked for once ("summarize now", PIVOT_SPEC.md §5.3), and the panel says so while it's refreshing.
+ * A portal gets its own panel (PortalPanel). MapView places it (beside, under or over the canvas) and remounts it for
+ * each selection (key), so nothing leaks from one target to the next.
  */
 function DetailPanel(props: DetailPanelProps){
     const portal = props.level.nodes.find((n) => n.path === props.path && n.kind === "portal");
@@ -71,54 +103,61 @@ export default memo(DetailPanel);
 
 type PanelFrameProps = {
     path: string;
-    covers: boolean;
+    placement: DetailPanelProps["placement"];
+    onScreenFolder?: boolean;
     alert?: string;
-    kindLabel: string;
     name: string;
+    /** The name's hover title: the whole path, which the name alone doesn't show. It holds the name too. */
     title: string;
-    subtitle: string;
-    /** Under the name: the stats line and its actions. */
-    header?: ReactNode;
+    /** Under the name: the sizes, or a doorway's caption. */
+    meta?: string;
     onClose: () => void;
     children: ReactNode;
 };
 
 /**
- * The panel's frame: the kind, the name, the path under it, a close button, then the header's extras and the body, and
- * the Map's error line as its last row while it covers the canvas (so the row never hides the end of the body).
+ * The panel's frame. It fills whatever MapView put it in. The name and the close button stay put while the body under
+ * them scrolls, and the Map's error line is its last row while it covers the canvas (so the row never hides the end of
+ * the body). Under the canvas its border is on top, everywhere else on its left.
  */
-function PanelFrame({ path, covers, alert, kindLabel, name, title, subtitle, header, onClose, children }: PanelFrameProps){
+function PanelFrame({ path, placement, onScreenFolder = false, alert, name, title, meta, onClose, children }: PanelFrameProps){
     return (
-        <aside data-panel={path} style={{ width: covers ? "100%" : PANEL_WIDTH }} className={`pointer-events-auto absolute inset-y-0 right-0 z-10 flex flex-col border-l border-hairline bg-panel ${SHORT_FRAME}`}>
-            <header className="border-b border-hairline px-4 py-4">
-                <div className="flex items-start justify-between gap-3">
-                    <div className="min-w-0">
-                        <div className="text-[12px] leading-4 text-text-2">{kindLabel}</div>
-                        <h2 className="mt-1 truncate text-[18px] font-medium leading-6 text-text" title={title}>{name}</h2>
-                        <div className="truncate font-mono text-[12px] leading-4 text-text-2" title={subtitle}>{subtitle}</div>
-                    </div>
-                    <button type="button" onClick={onClose} aria-label="Close the panel" className="shrink-0 rounded-md p-1 text-text-2 hover:bg-surface hover:text-text">
+        <aside
+            data-panel={path}
+            data-placement={placement}
+            data-on-screen={onScreenFolder || undefined}
+            className={`@container pointer-events-auto flex h-full min-h-0 w-full min-w-0 flex-col border-divider bg-panel ${SHORT_FRAME} ${placement === "below" ? "border-t" : "border-l"}`}
+        >
+            <header className="flex shrink-0 items-start justify-between gap-2 px-4 pb-3 pt-4">
+                <div className="min-w-0">
+                    <h2 className="truncate font-mono text-[15px] font-medium leading-5 text-text" title={title}>{name}</h2>
+                    {meta && <p className="mt-0.5 text-[12.5px] leading-[18px] text-text-2">{meta}</p>}
+                </div>
+                {/* describing the folder on screen, it's part of the layout rather than something opened, so it stays */}
+                {!onScreenFolder && (
+                    <button type="button" onClick={onClose} aria-label="Close the panel" className="-mr-1 shrink-0 rounded-[5px] p-1 text-text-2 hover:bg-node hover:text-text">
                         <IconX aria-hidden size={16} stroke={1.75} />
                     </button>
-                </div>
-                {header}
+                )}
             </header>
             {children}
-            {/* in a short window, where the whole panel scrolls, it stays pinned over the rows scrolling under it */}
-            {alert && <p role="alert" data-covers className="pointer-events-none sticky bottom-0 shrink-0 border-t border-hairline bg-panel px-4 py-2 text-center text-[13px] text-danger [overflow-wrap:anywhere]">{alert}</p>}
+            {alert && <p role="alert" data-covers className="pointer-events-none sticky bottom-0 shrink-0 border-t border-divider bg-panel px-4 py-2 text-center text-[13px] text-danger [overflow-wrap:anywhere]">{alert}</p>}
         </aside>
     );
 }
 
 /** A file, a folder or the repo: described by the server (GET /api/describe). */
-function TargetPanel({ path, level, indexVersion, onFocus, onOpen, onClose, onOpenInEditor, covers, alert }: DetailPanelProps){
+function TargetPanel({ path, level, indexVersion, summariesOff, onFocus, onOpen, onClose, onOpenInEditor, placement, onScreenFolder, alert }: DetailPanelProps){
     const target = path;
     const [data, setData] = useState<DescribeResponse | null>(null);
     const [error, setError] = useState<ApiError | null>(null);
     const [fresh, setFresh] = useState<SummarizeResponse | null>(null);
     const [summaryError, setSummaryError] = useState<ApiError | null>(null);
     const [refreshing, setRefreshing] = useState(false);
-    // keys already asked for: "<path>@<index version>", or the bare path once the server answered NOT_READY
+    // the tab on screen: picked from the first answer (defaultTab), then kept while this panel is open, refetches too
+    const [tab, setTab] = useState<InspectorTab | null>(null);
+    // keys already asked for (askKey): "<path>@<index version>" or "<path>@older", or the bare path once the server
+    // answered NOT_READY
     const asked = useRef(new Set<string>());
     // the demo's source links go to GitHub at the commit the index was built from (ADR-049)
     const [github, setGithub] = useState<GitHubSource | null>(null);
@@ -130,7 +169,7 @@ function TargetPanel({ path, level, indexVersion, onFocus, onOpen, onClose, onOp
     useEffect(() => {
         const controller = new AbortController();
         api.describe(target, controller.signal).then(
-            (next) => { setData(next); setError(null); },
+            (next) => { setData(next); setError(null); setTab((current) => current ?? defaultTab(next)); },
             (err: unknown) => { if (err instanceof ApiError) setError(err); },
         );
         return () => controller.abort();
@@ -154,17 +193,18 @@ function TargetPanel({ path, level, indexVersion, onFocus, onOpen, onClose, onOp
         );
     };
 
-    // "summarize now", once per target and index version: the server joins a request already running (ADR-033).
-    // After a NOT_READY answer, once per target: the index moves with every child summary the worker writes, and each
-    // move would otherwise ask again for a folder that still isn't ready. Reselecting it asks afresh (a new panel).
-    // The static demo has no server to ask, so it never does (ADR-049).
+    // "summarize now" for a summary that's missing, out of date or in the older style (wantsSummary), once per target
+    // and index version, or once per panel for the older style alone (askKey): the server joins a request already
+    // running (ADR-033). After a NOT_READY answer, once per target: the index moves with every child summary the worker
+    // writes, and each move would otherwise ask again for a folder that still isn't ready. Reselecting it asks afresh
+    // (a new panel). The static demo has no server to ask, so it never does (ADR-049).
     useEffect(() => {
-        if (DEMO || data === null || !wantsSummary(data.summaryStatus)) return;
-        const key = `${data.path}@${data.indexVersion}`;
+        if (DEMO || data === null || !wantsSummary(data, summariesOff)) return;
+        const key = askKey(data);
         if (asked.current.has(data.path) || asked.current.has(key)) return;
         asked.current.add(key);
         summarize(data.path, () => asked.current.add(data.path));
-    }, [data]);
+    }, [data, summariesOff]);
 
     const retry = (): void => {
         if (data === null) return;
@@ -172,53 +212,56 @@ function TargetPanel({ path, level, indexVersion, onFocus, onOpen, onClose, onOp
         summarize(data.path);
     };
 
-    const name = nameOf(target, level.repo);
-    const kindLabel = data ? KIND_LABELS[data.kind] : "";
+    const kind = data?.kind ?? kindBeforeDescribe(target, level);
     // the source viewer (owner review): closed, open on the whole file, or open on a declaration's lines
     const [viewing, setViewing] = useState<{ lines?: { start: number; end: number } } | null>(null);
     const closeViewer = useCallback(() => setViewing(null), []);
+    const two = placement === "below";
+    const failed = error && <p className="text-[13px] text-danger [overflow-wrap:anywhere]">{error.message}</p>;
 
     return (
         <PanelFrame
             path={path}
+            placement={placement}
+            onScreenFolder={onScreenFolder}
             alert={alert}
-            covers={covers}
-            kindLabel={kindLabel}
-            name={name}
-            title={target || name}
-            subtitle={target || "(repo root)"}
-            header={data && (
-                <Stats
-                    data={data}
-                    github={github}
-                    onOpen={onOpen}
-                    onViewSource={() => setViewing({})}
-                    onOpenInEditor={onOpenInEditor && (() => onOpenInEditor(data.path))}
-                />
-            )}
+            name={inspectorName(target, level.repo, kind)}
+            title={inspectorTitle(target, level.repo, kind)}
+            meta={data ? sizeLine(data) : undefined}
             onClose={onClose}
         >
-            <div className={`flex-1 space-y-6 overflow-y-auto px-4 py-4 text-[14px] leading-normal text-text ${SHORT_BODY}`}>
-                {error && <p className="text-danger">{error.message}</p>}
-                {!data && !error && <p className="text-text-2">Loading…</p>}
-                {data && (
-                    <Details
-                        data={data}
-                        fresh={fresh}
-                        refreshing={refreshing}
-                        summaryError={summaryError}
-                        onRetry={retry}
-                        onFocus={onFocus}
-                        onOpen={onOpen}
-                        onViewLines={DEMO
-                            ? (start, end) => { if (github) window.open(githubLink(github, data.path, { start, end }), "_blank", "noreferrer"); }
-                            : onOpenInEditor
-                                // the real editor is right there (design §4.4)
-                                ? (start) => onOpenInEditor(data.path, start)
-                                : (start, end) => setViewing({ lines: { start, end } })}
-                    />
-                )}
-            </div>
+            {data
+                ? (
+                    <div className={`${BODY} ${two ? BODY_TWO : ""}`}>
+                        <div className={`flex flex-col gap-3 px-4 ${two ? `${COLUMN_TWO} @min-[720px]:pr-3` : ""}`}>
+                            {failed}
+                            <Summary data={data} fresh={fresh} refreshing={refreshing} summaryError={summaryError} onRetry={retry} />
+                            <Actions
+                                data={data}
+                                github={github}
+                                onScreenFolder={onScreenFolder ?? false}
+                                onOpen={onOpen}
+                                onViewSource={() => setViewing({})}
+                                onOpenInEditor={onOpenInEditor && (() => onOpenInEditor(data.path))}
+                            />
+                        </div>
+                        <div className={`px-4 pt-4 ${two ? `${COLUMN_TWO} @min-[720px]:pl-3 @min-[720px]:pt-1` : ""}`}>
+                            <Relations
+                                data={data}
+                                tab={tab ?? defaultTab(data)}
+                                onTab={setTab}
+                                onFocus={onFocus}
+                                onOpen={onOpen}
+                                // inside VS Code's panel too, a declaration shows in View source, whose Open in VS Code
+                                // opens the editor at its line: nothing but an Open moves the editor (the owner, 2026-10-29)
+                                onViewLines={DEMO
+                                    ? (start, end) => { if (github) window.open(githubLink(github, data.path, { start, end }), "_blank", "noreferrer"); }
+                                    : (start, end) => setViewing({ lines: { start, end } })}
+                            />
+                        </div>
+                    </div>
+                )
+                : <div className={`${BODY} px-4`}>{failed || <p className="text-[13px] text-text-2">Loading…</p>}</div>}
             {viewing && data?.kind === "file" && (
                 <SourceViewer
                     path={data.path}
@@ -235,11 +278,12 @@ type Linked = { path: string; count: number };
 
 /**
  * A portal selected: the page (or pages) behind it, a way to go there, and which boxes on this page have lines to it,
- * each a link that selects that box. Everything comes from the level on screen; there's nothing to fetch.
+ * each a row that selects that box. Everything comes from the level on screen; there's nothing to fetch.
  */
-function PortalPanel({ portal, path, level, onFocus, onTurnPage, onClose, covers, alert }: DetailPanelProps & { portal: MapNode }){
+function PortalPanel({ portal, path, level, onFocus, onTurnPage, onClose, placement, onScreenFolder, alert }: DetailPanelProps & { portal: MapNode }){
     const links = portalLinks(level.edges, portal.path);
     const linked = linkedFrom(level, portal.path);
+    const largest = largestCount(linked);
     const pages = portal.page !== undefined ? [portal.page] : portal.pages ?? [];
     const byPath = new Map(level.nodes.map((n) => [n.path, n]));
 
@@ -250,27 +294,21 @@ function PortalPanel({ portal, path, level, onFocus, onTurnPage, onClose, covers
     return (
         <PanelFrame
             path={path}
+            placement={placement}
+            onScreenFolder={onScreenFolder}
             alert={alert}
-            covers={covers}
-            kindLabel={pages.length === 1 ? "Page" : "Pages"}
             name={portal.name}
-            title={portal.name}
-            subtitle={`${level.path || "(repo root)"} · page ${level.page + 1} of ${level.pageCount}`}
-            header={<p className="mt-3 text-[13px] text-text-2">{portalCaption(portal, links)} with this page</p>}
+            title={`${portal.name} of ${level.path || nameOf("", level.repo)}`}
+            meta={`${portalCaption(portal, links)} with this page`}
             onClose={onClose}
         >
-            <div className={`flex-1 space-y-6 overflow-y-auto px-4 py-4 text-[14px] leading-normal text-text ${SHORT_BODY}`}>
+            <div className={`${BODY} space-y-4 px-4`}>
                 <section aria-label="Go to">
-                    {pages.length > 1 && <SectionTitle title="Pages behind this doorway" count={pages.length} />}
+                    {pages.length > 1 && <ListHeading title="Pages behind this doorway" count={pages.length} />}
                     <ul className="flex flex-wrap gap-2">
                         {pages.map((p) => (
                             <li key={p}>
-                                <button
-                                    type="button"
-                                    data-go-page={p}
-                                    onClick={() => onTurnPage(p)}
-                                    className="inline-flex items-center gap-1.5 rounded-md border border-control/60 px-3 py-1.5 text-[13px] text-control hover:border-control"
-                                >
+                                <button type="button" data-go-page={p} onClick={() => onTurnPage(p)} className={SECONDARY}>
                                     {p < level.page && <IconArrowLeft aria-hidden size={14} stroke={1.75} />}
                                     {pages.length === 1 ? `Go to page ${p + 1}` : `Page ${p + 1}`}
                                     {p > level.page && <IconArrowRight aria-hidden size={14} stroke={1.75} />}
@@ -280,36 +318,38 @@ function PortalPanel({ portal, path, level, onFocus, onTurnPage, onClose, covers
                     </ul>
                 </section>
 
-                <Rows title="Linked from this page" items={linked} empty="No lines from this page." render={({ path: boxPath, count }: Linked) => (
-                    <li key={boxPath}>
-                        <button
-                            type="button"
-                            data-linked={boxPath}
-                            title={`${boxPath}: ${formatCount(count)} import${count === 1 ? "" : "s"} with ${portal.name}`}
+                <section aria-label="Linked from this page">
+                    <ListHeading title="Linked from this page" count={linked.length} />
+                    <Preview items={linked} empty="No lines from this page." render={({ path: boxPath, count }: Linked) => (
+                        <BarRow
+                            key={boxPath}
+                            linked={boxPath}
+                            name={byPath.get(boxPath)?.name ?? boxPath}
+                            count={count}
+                            largest={largest}
+                            title={`${importsTitle(boxPath, count)} with ${portal.name}`}
                             onClick={() => onFocus(boxPath)}
-                            className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-surface"
-                        >
-                            <BoxIcon box={byPath.get(boxPath)} />
-                            <span className="min-w-0 flex-1 truncate">{byPath.get(boxPath)?.name ?? boxPath}</span>
-                            <span className="shrink-0 text-[12px] text-text-2">{formatCount(count)}</span>
-                        </button>
-                    </li>
-                )} />
+                        />
+                    )} />
+                </section>
             </div>
         </PanelFrame>
     );
 }
 
-/** A folder's or a file's icon, as on the Map. */
-function BoxIcon({ box }: { box: MapNode | undefined }){
-    const folder = box?.kind === "folder";
-    const Icon = folder ? IconFolder : IconFile;
-    return <Icon aria-hidden size={16} stroke={1.75} className={`shrink-0 ${folder ? "text-folder" : "text-text-2"}`} />;
+/** A list's heading in the doorway's panel, drawn like a tab row with nothing to switch: the title, its count, a divider. */
+function ListHeading({ title, count }: { title: string; count: number }){
+    return (
+        <h3 className="mb-2 border-b border-divider pb-2 pt-1.5 text-[13px] font-normal text-text">
+            {title} <span className="text-text-2">{formatCount(count)}</span>
+        </h3>
+    );
 }
 
-type StatsProps = {
+type ActionsProps = {
     data: DescribeResponse;
     github: GitHubSource | null;
+    onScreenFolder: boolean;
     onOpen: (folder: string) => void;
     onViewSource: () => void;
     /** Inside VS Code's panel only: "Open in VS Code" asks the editor over the bridge, since the panel can't follow a vscode:// link. */
@@ -317,208 +357,266 @@ type StatsProps = {
 };
 
 /**
- * "10,276 files · 3.4M lines", what changed since it was summarized, and the one action that fits the target. For a
- * file, the app offers its source and the editor; the demo has neither, so it links to GitHub at the indexed commit.
+ * What you can do with the target, as buttons. A folder gets Open folder, the one primary button, unless it's the folder
+ * already on screen. For a file the app offers its source and the editor; the demo has neither, so it links to GitHub
+ * at the indexed commit, a folder and the repo too.
  */
-function Stats({ data, github, onOpen, onViewSource, onOpenInEditor }: StatsProps){
-    const lines = `${formatCompact(data.stats.lineCount)} ${data.stats.lineCount === 1 ? "line" : "lines"}`;
-    const size = data.kind === "file" ? lines : `${formatCount(data.stats.fileCount)} ${data.stats.fileCount === 1 ? "file" : "files"} · ${lines}`;
+function Actions({ data, github, onScreenFolder, onOpen, onViewSource, onOpenInEditor }: ActionsProps){
+    const file = data.kind === "file";
+    const open = data.kind === "folder" && !onScreenFolder;
+    const onGithub = DEMO && github !== null;
+    if (!open && !onGithub && !(file && !DEMO)) return null;
+
     return (
-        <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-[13px] text-text-2">
-            <span>{size}</span>
-            {data.stalePaths > 0 && <span>{formatCount(data.stalePaths)} changed since summarized</span>}
-            {data.kind === "folder" && (
-                <button type="button" onClick={() => onOpen(data.path)} className="text-control underline underline-offset-2 hover:text-text">Open folder</button>
-            )}
-            {data.kind === "file" && DEMO && github && (
-                <a href={githubLink(github, data.path)} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-control underline underline-offset-2 hover:text-text">
-                    <IconCode aria-hidden size={14} stroke={1.75} />View on GitHub
+        <div className="flex flex-wrap gap-2">
+            {open && <button type="button" onClick={() => onOpen(data.path)} className={PRIMARY}>Open folder</button>}
+            {onGithub && (
+                <a href={file ? githubLink(github, data.path) : githubFolderLink(github, data.path)} target="_blank" rel="noreferrer" className={SECONDARY}>
+                    View on GitHub
                 </a>
             )}
-            {data.kind === "file" && !DEMO && (
+            {file && !DEMO && (
                 <>
-                    <button type="button" onClick={onViewSource} className="inline-flex items-center gap-1 text-control underline underline-offset-2 hover:text-text">
-                        <IconCode aria-hidden size={14} stroke={1.75} />View source
-                    </button>
+                    <button type="button" onClick={onViewSource} className={SECONDARY}>View source</button>
                     {onOpenInEditor
                         // the webview's sandbox stops a vscode:// link inside the panel, so the editor is asked instead
-                        ? <button type="button" onClick={onOpenInEditor} className="text-control underline underline-offset-2 hover:text-text">Open in VS Code</button>
-                        : <a href={editorLink(data)} className="text-control underline underline-offset-2 hover:text-text">Open in VS Code</a>}
+                        ? <button type="button" onClick={onOpenInEditor} className={SECONDARY}>Open in VS Code</button>
+                        : <a href={editorLink(data)} className={SECONDARY}>Open in VS Code</a>}
                 </>
             )}
         </div>
     );
 }
 
-type DetailsProps = {
+type SummaryProps = {
     data: DescribeResponse;
     fresh: SummarizeResponse | null;
     refreshing: boolean;
     summaryError: ApiError | null;
     onRetry: () => void;
-    onFocus: (targetPath: string) => void;
-    onOpen: (folder: string) => void;
-    /** Opens the source viewer on a declaration's lines. */
-    onViewLines: (start: number, end: number) => void;
 };
 
-function Details({ data, fresh, refreshing, summaryError, onRetry, onFocus, onOpen, onViewLines }: DetailsProps){
-    return (
-        <>
-            <Summary data={data} fresh={fresh} refreshing={refreshing} summaryError={summaryError} onRetry={onRetry} />
-
-            <section aria-label="Relationships" className="space-y-4">
-                {/* the three-task test's tester took a while to find these and to match them to the arrows: say it */}
-                <Chips title="Depends on" note="What this box uses: its arrows point to these · by number of imports" items={data.uses} empty="Imports nothing outside itself." onFocus={onFocus} />
-                <Chips title="Used by" note="What uses this box: their arrows point here · by number of imports, test files included" items={data.usedBy} empty="Nothing outside it imports it." onFocus={onFocus} />
-            </section>
-
-            {data.children && (
-                <Rows title="Contents" items={data.children} render={(child: MapNode) => (
-                    <ChildRow key={child.path} child={child} onFocus={onFocus} onOpen={onOpen} />
-                )} />
-            )}
-
-            {data.symbols && (
-                <Rows title="Declarations" items={data.symbols} empty={noDeclarationsText(data)} render={(symbol: SymbolInfo) => (
-                    <li key={`${symbol.name}:${symbol.startLine}`}>
-                        <button
-                            type="button"
-                            title={`Show ${symbol.name} in the source`}
-                            onClick={() => onViewLines(symbol.startLine, symbol.endLine)}
-                            className="flex w-full items-baseline justify-between gap-3 rounded-md px-2 py-1 text-left hover:bg-surface"
-                        >
-                            <span className={`truncate font-mono text-[13px] ${symbol.exported ? "text-text" : "text-text-2"}`}>{symbol.name}</span>
-                            <span className="shrink-0 text-[12px] text-text-2">{symbol.kind} · line {symbol.startLine}</span>
-                        </button>
-                    </li>
-                )} />
-            )}
-        </>
-    );
-}
-
-type SummaryProps = Pick<DetailsProps, "data" | "fresh" | "refreshing" | "summaryError" | "onRetry">;
-
-/** The tagline and the first sentence; "Read full summary" shows the rest and "Show less" folds it back. */
+/**
+ * The tagline and the summary's lead, its first paragraph, or its first sentence when it's one block (splitSummary).
+ * "Full summary" at the end of it shows the rest as paragraphs, and "Show less" at the end of the last one folds it
+ * back. However many paragraphs, they wrap in the panel's width and scroll with its body, with no height of their own.
+ * Under them, quietly, whether it's refreshing, out of date, or failed (with Try again).
+ */
 function Summary({ data, fresh, refreshing, summaryError, onRetry }: SummaryProps){
     const [expanded, setExpanded] = useState(false);
     // a "summarize now" answer is newer than the description it was asked from
     const shown = fresh ?? data;
     const { lead, rest } = splitSummary(shown.summary ?? "");
     const failure = failureFor(shown.summaryError, summaryError);
+    const placeholder = shown.tagline ? "" : summaryLine(shown.summaryStatus, summaryError);
+    const paragraphs = lead === "" ? [] : expanded ? [lead, ...rest.split(/\n\s*\n/)] : [lead];
+    const { notes, testsNote } = summaryNotes(shown, data.kind, refreshing);
+    const hasNotes = notes.length > 0 || testsNote || failure !== null;
 
     return (
         // a long identifier or path (inline code is one unbroken word) breaks anywhere rather than run past the panel's
         // edge; wherever a line has a space to break at, it still breaks there
-        <section aria-label="Summary" className="[overflow-wrap:anywhere]">
-            {shown.tagline
-                ? <p className="text-[15px] font-medium leading-snug text-title"><Rich text={shown.tagline} /></p>
-                : <p className="text-text-2">{summaryLine(shown.summaryStatus, summaryError)}</p>}
-            {lead && <p className="mt-2 text-text-body"><Rich text={lead} /></p>}
-            {rest && expanded && rest.split(/\n\s*\n/).map((paragraph, i) => <p key={i} className="mt-2 text-text-body"><Rich text={paragraph} /></p>)}
-            {/* it folds back, so a long summary doesn't push the rest of the panel away for good (owner review) */}
-            {rest && (
-                <button
-                    type="button"
-                    aria-expanded={expanded}
-                    onClick={() => setExpanded((open) => !open)}
-                    className="mt-2 text-[13px] text-control underline underline-offset-2 hover:text-text"
-                >
-                    {expanded ? "Show less" : "Read full summary"}
-                </button>
+        <section aria-label="Summary" className="space-y-3 [overflow-wrap:anywhere]">
+            {shown.tagline && <p className="text-[13px] font-semibold leading-[18px] text-text"><Rich text={shown.tagline} /></p>}
+            {placeholder && <p className="text-[13px] leading-[1.55] text-text-2">{placeholder}</p>}
+            {paragraphs.length > 0 && (
+                <div className="space-y-2 text-[13px] leading-[1.55] text-text-2">
+                    {paragraphs.map((paragraph, i) => (
+                        <p key={i}>
+                            <Rich text={paragraph} />
+                            {/* it folds back, so a long summary doesn't push the tabs away for good (owner review) */}
+                            {rest && i === paragraphs.length - 1 && (
+                                <>
+                                    {" "}
+                                    <button type="button" aria-expanded={expanded} onClick={() => setExpanded((open) => !open)} className={TEXT_LINK}>
+                                        {expanded ? "Show less" : "Full summary"}
+                                    </button>
+                                </>
+                            )}
+                        </p>
+                    ))}
+                </div>
+            )}
+            {hasNotes && (
+                <div className="space-y-1 text-[12.5px] leading-[18px] text-text-2">
+                    {notes.map((note) => <p key={note}>{note}</p>)}
+                    {testsNote && <p className="text-[12px] text-text-3">Import counts in this summary leave out test files.</p>}
+                    {failure && (
+                        <p className="text-danger">
+                            {failure}{" "}
+                            <button type="button" onClick={onRetry} className={TEXT_LINK}>Try again</button>
+                        </p>
+                    )}
+                </div>
             )}
-            <div className="mt-2 space-y-1 text-[13px] text-text-2">
-                {refreshing && shown.tagline && <p>Refreshing…</p>}
-                {shown.summaryStatus === "stale" && !refreshing && <p>Out of date: this changed since it was summarized.</p>}
-                {/* the summary was written from an "Imported by" line that counts tests apart; "Used by" below counts them */}
-                {shown.summary && data.kind === "file" && <p className="text-[12px]">Import counts in this summary leave out test files.</p>}
-                {failure && (
-                    <p className="text-danger">
-                        {failure}{" "}
-                        <button type="button" onClick={onRetry} className="text-control underline underline-offset-2 hover:text-text">Try again</button>
-                    </p>
-                )}
-            </div>
         </section>
     );
 }
 
 /**
- * Prose with its `identifiers` as inline code (VISUAL_REFRESH.md §5): the code font and lavender on a chip. The chips
- * were dropped once for an outside critique ("noisy"), and the owner asked for them back: they make names easy to spot.
- * A chip broken across two lines (Summary breaks a long one anywhere) keeps its rounded padding on both.
+ * Prose with its `identifiers` as inline code: the code font in the text color, with no chip behind it (the approved
+ * mockup's `.summary code`, 2026-10-27). The brighter color and the code font are enough to spot a name in the gray
+ * prose. The chips behind them made the summary read busy beside the new rows and bars.
  */
 function Rich({ text }: { text: string }){
     return (
         <>
             {inlineCode(text).map((part, i) => part.code
-                ? <code key={i} className="rounded-md bg-code-bg box-decoration-clone px-1 font-mono text-[13px] text-code">{part.text}</code>
+                ? <code key={i} className="font-mono text-[12px] text-text">{part.text}</code>
                 : <span key={i}>{part.text}</span>)}
         </>
     );
 }
 
-function SectionTitle({ title, count, note, large = false }: { title: string; count: number; note?: string; large?: boolean }){
+/** Hover titles on the tabs: the old panel's notes, said once. The three-task test's tester matched them to the arrows slowly. */
+const TAB_TITLES: Record<InspectorTab, string | undefined> = {
+    uses: "What this uses, by number of imports. Its arrows point to these.",
+    usedBy: "What uses this, by number of imports, test files included. Their arrows point here.",
+    inside: undefined,
+};
+
+type RelationsProps = {
+    data: DescribeResponse;
+    tab: InspectorTab;
+    onTab: (tab: InspectorTab) => void;
+    onFocus: (targetPath: string) => void;
+    onOpen: (folder: string) => void;
+    /** Opens the source viewer on a declaration's lines (or the editor, or GitHub). */
+    onViewLines: (start: number, end: number) => void;
+};
+
+/**
+ * The tabs (the mockup's .tabs): Uses, Used by, and Contents for a folder or Declarations for a file, each with its
+ * count. A real tab list: the arrow keys, Home and End move between the tabs, and only the one on screen is in the Tab
+ * order. They wrap onto a second line in a very narrow panel rather than run past its edge.
+ */
+function Relations({ data, tab, onTab, onFocus, onOpen, onViewLines }: RelationsProps){
+    const id = useId();
+    const file = data.kind === "file";
+    const tabs: { id: InspectorTab; label: string; count: number }[] = [
+        { id: "uses", label: "Uses", count: data.uses.length },
+        { id: "usedBy", label: "Used by", count: data.usedBy.length },
+        { id: "inside", label: file ? "Declarations" : "Contents", count: (file ? data.symbols?.length : data.children?.length) ?? 0 },
+    ];
+
+    const onKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+        const at = tabs.findIndex((t) => t.id === tab);
+        const next = event.key === "ArrowRight" ? (at + 1) % tabs.length
+            : event.key === "ArrowLeft" ? (at - 1 + tabs.length) % tabs.length
+            : event.key === "Home" ? 0
+            : event.key === "End" ? tabs.length - 1
+            : -1;
+        if (next === -1) return;
+        // the Map's own ← and → turn the page: these keys are the tabs' while a tab has the focus
+        event.preventDefault();
+        event.stopPropagation();
+        onTab(tabs[next].id);
+        event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]')[next]?.focus();
+    };
+
     return (
-        <div className="mb-2">
-            <h3 className={`${large ? "text-[15px]" : "text-[13px]"} font-medium text-text`}>
-                {title} <span className="font-normal text-text-2">{formatCount(count)}</span>
-            </h3>
-            {note && <p className="text-[12px] text-text-2">{note}</p>}
+        <div>
+            <div role="tablist" aria-label="Relationships" onKeyDown={onKeyDown} className="flex flex-wrap gap-x-[18px] border-b border-divider @max-[260px]:gap-x-3">
+                {tabs.map((t) => {
+                    const on = t.id === tab;
+                    return (
+                        <button
+                            key={t.id}
+                            type="button"
+                            role="tab"
+                            id={`${id}-${t.id}`}
+                            data-tab={t.id}
+                            aria-selected={on}
+                            aria-controls={`${id}-panel`}
+                            tabIndex={on ? 0 : -1}
+                            title={TAB_TITLES[t.id]}
+                            onClick={() => onTab(t.id)}
+                            // Uses and Used by are underlined in the color their lines take on the Map, Contents in the accent
+                            className={`relative whitespace-nowrap pb-2 pt-1.5 text-[13px] ${on
+                                ? `text-text after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-[1px] ${t.id === "inside" ? "after:bg-accent" : SIDE_COLOR[t.id].underline}`
+                                : "text-text-2 hover:text-text"}`}
+                        >
+                            {t.label} {formatCount(t.count)}
+                        </button>
+                    );
+                })}
+            </div>
+            <div role="tabpanel" id={`${id}-panel`} aria-labelledby={`${id}-${tab}`} className="pt-2">
+                {tab === "uses" && <Areas key="uses" items={data.uses} empty="Imports nothing outside itself." onFocus={onFocus} />}
+                {tab === "usedBy" && <Areas key="usedBy" items={data.usedBy} empty="Nothing outside it imports it." onFocus={onFocus} usedBy />}
+                {tab === "inside" && file && (
+                    <Preview items={data.symbols ?? []} empty={noDeclarationsText(data)} render={(symbol: SymbolInfo) => (
+                        <DeclarationRow key={`${symbol.name}:${symbol.startLine}`} symbol={symbol} onViewLines={onViewLines} />
+                    )} />
+                )}
+                {tab === "inside" && !file && (
+                    <Preview items={data.children ?? []} empty="Nothing inside." render={(child: MapNode) => (
+                        <ChildRow key={child.path} child={child} onFocus={onFocus} onOpen={onOpen} />
+                    )} />
+                )}
+            </div>
         </div>
     );
 }
 
-type ChipsProps = { title: string; note: string; items: readonly AreaCount[]; empty: string; onFocus: (targetPath: string) => void };
+/** Uses or Used by: each area a row that focuses it on the Map, its bar measured against the tab's largest. */
+function Areas({ items, empty, onFocus, usedBy = false }: { items: readonly AreaCount[]; empty: string; onFocus: (targetPath: string) => void; usedBy?: boolean }){
+    const largest = largestCount(items);
+    return (
+        <Preview items={items} empty={empty} render={(area: AreaCount) => (
+            <BarRow
+                key={area.path}
+                chip={area.path}
+                name={shortPath(area.path)}
+                count={area.count}
+                largest={largest}
+                title={importsTitle(area.path, area.count)}
+                onClick={() => onFocus(area.path)}
+                usedBy={usedBy}
+            />
+        )} />
+    );
+}
+
+type BarRowProps = {
+    name: string;
+    count: number;
+    largest: number;
+    /** Holds the name, so a name cut off with an ellipsis can be read in full. */
+    title: string;
+    onClick: () => void;
+    /** data-chip, on Uses and Used by rows. */
+    chip?: string;
+    /** data-linked, on a doorway's rows. */
+    linked?: string;
+    /** A Used by row: its bar in the gold its line takes on the Map, where every other row's is lilac. */
+    usedBy?: boolean;
+};
 
 /**
- * "Depends on" / "Used by" as chips (§5): each focuses that area on the Map. The first 8, "+N more", then "Show fewer".
- * A chip is at most 360 px wide, or the panel's width in a narrow window, and its name truncates (the title has it).
+ * A row with a bar (the mockup's .irow): the name in the code font, cut off with an ellipsis, the count on the right,
+ * and under both a 3 px bar as long as the count is against the largest in its list.
  */
-function Chips({ title, note, items, empty, onFocus }: ChipsProps){
-    const [all, setAll] = useState(false);
-    const shown = all ? items : items.slice(0, PREVIEW);
+function BarRow({ name, count, largest, title, onClick, chip, linked, usedBy = false }: BarRowProps){
     return (
-        <div>
-            <SectionTitle title={title} count={items.length} note={note} large />
-            {items.length === 0
-                ? <p className="text-[13px] text-text-2">{empty}</p>
-                : (
-                    <ul className="flex flex-wrap gap-2">
-                        {shown.map((area) => (
-                            <li key={area.path} className="min-w-0">
-                                <button
-                                    type="button"
-                                    data-chip={area.path}
-                                    title={`${area.path}: ${formatCount(area.count)} import${area.count === 1 ? "" : "s"}`}
-                                    onClick={() => onFocus(area.path)}
-                                    className="flex max-w-[min(360px,100%)] items-center gap-2 rounded-md border border-border bg-surface px-2 py-1 text-[13px] text-text hover:border-text-2"
-                                >
-                                    <span className="truncate">{shortPath(area.path)}</span>
-                                    <span className="shrink-0 text-text-2">{formatCount(area.count)}</span>
-                                </button>
-                            </li>
-                        ))}
-                        {items.length > PREVIEW && (
-                            <li>
-                                <button
-                                    type="button"
-                                    aria-expanded={all}
-                                    onClick={() => setAll((open) => !open)}
-                                    className="rounded-md border border-dashed border-border px-2 py-1 text-[13px] text-text-2 hover:text-text"
-                                >
-                                    {all ? "Show fewer" : `+${formatCount(items.length - PREVIEW)} more`}
-                                </button>
-                            </li>
-                        )}
-                    </ul>
-                )}
-        </div>
+        <li>
+            <button
+                type="button"
+                data-chip={chip}
+                data-linked={linked}
+                title={title}
+                onClick={onClick}
+                className="grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-x-2.5 rounded-[5px] px-2 py-1.5 text-left hover:bg-node"
+            >
+                <span className="truncate font-mono text-[12.5px] leading-[18px] text-text">{name}</span>
+                <span className="text-[11.5px] leading-4 text-text-2">{formatCount(count)}</span>
+                <span aria-hidden className={`col-span-2 mt-[5px] h-[3px] rounded-[2px] ${SIDE_COLOR[usedBy ? "usedBy" : "uses"].fill}`} style={{ width: `${barWidth(count, largest)}%` }} />
+            </button>
+        </li>
     );
 }
 
-/** A child in Contents: a folder goes into it, a file is selected on the Map (§5). */
+/** A child in Contents: a folder goes into it, a file is selected on the Map. Its icon is the explorer's. */
 function ChildRow({ child, onFocus, onOpen }: { child: MapNode; onFocus: (targetPath: string) => void; onOpen: (folder: string) => void }){
     const folder = child.kind === "folder";
     const Icon = folder ? IconFolder : IconFile;
@@ -527,46 +625,59 @@ function ChildRow({ child, onFocus, onOpen }: { child: MapNode; onFocus: (target
             <button
                 type="button"
                 data-child={child.path}
-                title={child.tagline ? `${child.path}: ${child.tagline}` : child.path}
+                title={childTitle(child)}
                 onClick={() => (folder ? onOpen(child.path) : onFocus(child.path))}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-surface"
+                className="grid w-full grid-cols-[14px_minmax(0,1fr)_auto] items-center gap-x-2 rounded-[5px] px-2 py-1.5 text-left hover:bg-node"
             >
-                <Icon aria-hidden size={16} stroke={1.75} className={`shrink-0 ${folder ? "text-folder" : "text-text-2"}`} />
-                <span className="min-w-0 flex-1 truncate">{child.name}</span>
-                {folder && <span className="shrink-0 text-[12px] text-text-2">{formatCount(child.fileCount)} {child.fileCount === 1 ? "file" : "files"}</span>}
+                <Icon aria-hidden size={14} stroke={1.75} className="text-text-3" />
+                <span className={`truncate font-mono text-[12.5px] leading-[18px] text-text ${folder ? "" : "col-span-2"}`}>{child.name}</span>
+                {folder && <span className="text-[11.5px] leading-4 text-text-2">{formatCount(child.fileCount)}</span>}
             </button>
         </li>
     );
 }
 
-type RowsProps<T> = {
-    title: string;
+/**
+ * A declaration in a file: its name in the code font (brighter when it's exported), and its kind and line on the right.
+ * The name keeps at least 6 characters before the place moves under it, right-aligned, in a very narrow panel.
+ */
+function DeclarationRow({ symbol, onViewLines }: { symbol: SymbolInfo; onViewLines: (start: number, end: number) => void }){
+    return (
+        <li>
+            <button
+                type="button"
+                title={`Show ${symbol.name} in the source`}
+                onClick={() => onViewLines(symbol.startLine, symbol.endLine)}
+                className="flex w-full flex-wrap items-baseline gap-x-3 rounded-[5px] px-2 py-1.5 text-left hover:bg-node"
+            >
+                <span className={`min-w-0 flex-[1_1_6ch] truncate font-mono text-[12.5px] leading-[18px] ${symbol.exported ? "text-text" : "text-text-2"}`}>{symbol.name}</span>
+                <span className="ml-auto shrink-0 whitespace-nowrap text-[11.5px] leading-4 text-text-2">{declarationPlace(symbol)}</span>
+            </button>
+        </li>
+    );
+}
+
+type PreviewProps<T> = {
     items: readonly T[];
+    /** Said in place of the list when it has no rows. */
+    empty: string;
     render: (item: T) => ReactNode;
-    empty?: string;
 };
 
-/** A titled list: the first 8, then "View all" shows the rest and "Show fewer" folds it back. */
-function Rows<T>({ title, items, render, empty }: RowsProps<T>){
+/** A list's first 8 rows, then "+N more" shows the rest and "Show fewer" folds it back. */
+function Preview<T>({ items, empty, render }: PreviewProps<T>){
     const [all, setAll] = useState(false);
-    if (items.length === 0 && empty === undefined) return null;
+    if (items.length === 0) return <p className="px-2 py-1.5 text-[13px] text-text-2">{empty}</p>;
 
     return (
-        <section aria-label={title}>
-            <SectionTitle title={title} count={items.length} />
-            {items.length === 0
-                ? <p className="text-[13px] text-text-2">{empty}</p>
-                : <ul className="-mx-2">{(all ? items : items.slice(0, PREVIEW)).map(render)}</ul>}
+        <>
+            {/* a plain block, not a grid: an auto grid track would widen to a long declaration's whole name */}
+            <ul className="space-y-0.5">{(all ? items : items.slice(0, PREVIEW)).map(render)}</ul>
             {items.length > PREVIEW && (
-                <button
-                    type="button"
-                    aria-expanded={all}
-                    onClick={() => setAll((open) => !open)}
-                    className="mt-2 text-[13px] text-control underline underline-offset-2 hover:text-text"
-                >
-                    {all ? "Show fewer" : `View all ${formatCount(items.length)}`}
+                <button type="button" aria-expanded={all} onClick={() => setAll((open) => !open)} className={QUIET}>
+                    {all ? "Show fewer" : `+${formatCount(items.length - PREVIEW)} more`}
                 </button>
             )}
-        </section>
+        </>
     );
 }