nebulosity 1.0.0 → 1.1.0

package/app/map/RepoMenu.tsx

@@ -12,15 +12,16 @@ const LIST_WIDTH = 320;
 
 type RepoMenuProps = { repo: string; onSwitched: () => void; /** Go to the repo's top level. */ onHome: () => void };
 
-/** A repo as the top bar names it: "owner / repo" from its origin, or its folder name (VISUAL_REFRESH.md §6). */
+/** A repo as the breadcrumb names it, in mono: "owner/repo" from its origin, or its folder name (ADR-070). */
 function RepoName({ entry, fallback }: { entry: RepoSummary | undefined; fallback: string }){
-    if (!entry?.remote) return <span title={fallback} className="truncate text-[15px] font-medium text-text">{fallback}</span>;
-    // on a narrow screen the owner (and its "/") gives way first, down to nothing, so the repo's own name keeps its room;
-    // the name truncates only once it alone is too wide. The whole name is the hover title.
+    if (!entry?.remote) return <span title={fallback} className="truncate text-text">{fallback}</span>;
+    // in a narrow window the owner gives way first, whole (the breadcrumb says when, by data-owner, and narrows it to
+    // nothing so it can still be measured; under 360 px it's gone), so the repo's own name keeps its room; the name
+    // truncates only once it alone is too wide. The whole name is the hover title.
     return (
-        <span title={`${entry.remote.owner} / ${entry.remote.name}`} className="flex min-w-0 items-baseline text-[15px]">
-            <span className="truncate pr-1 text-text-2 after:pl-1 after:content-['/']">{entry.remote.owner}</span>
-            <span className="max-w-full shrink-0 truncate font-medium text-text">{entry.remote.name}</span>
+        <span title={`${entry.remote.owner}/${entry.remote.name}`} className="flex min-w-0 items-baseline text-text">
+            <span data-repo-owner className="truncate after:content-['/'] group-data-[owner=hidden]/crumb:max-w-0 max-[360px]:hidden">{entry.remote.owner}</span>
+            <span className="max-w-full shrink-0 truncate">{entry.remote.name}</span>
         </span>
     );
 }
@@ -49,7 +50,7 @@ export default function RepoMenu({ repo, onSwitched, onHome }: RepoMenuProps){
     const name = repo.slice(repo.lastIndexOf("/") + 1);
     const label = <RepoName entry={list?.repos.find((r) => r.root === repo)} fallback={name} />;
     const home = (
-        <button type="button" data-testid="repo-name" onClick={onHome} title="Go to the top level" className="flex min-w-0 rounded-md px-1 hover:bg-surface">
+        <button type="button" data-testid="repo-name" onClick={onHome} title="Go to the top level" className="flex min-w-0 rounded-[4px] px-0.5 hover:bg-node">
             {label}
         </button>
     );
@@ -74,18 +75,18 @@ export default function RepoMenu({ repo, onSwitched, onHome }: RepoMenuProps){
                     }}
                     aria-label="Switch repository"
                     title="Switch repository"
-                    className="grid h-7 w-6 shrink-0 place-items-center rounded-md text-text-2 hover:bg-surface hover:text-text"
+                    className="grid h-6 w-5 shrink-0 place-items-center rounded-[4px] text-text-3 hover:bg-node hover:text-text"
                 >
                     <IconChevronDown aria-hidden size={14} stroke={1.75} />
                 </button>
             </div>
             {open && (
-                <ul data-testid="repo-list" data-covers style={listPlace} className="absolute top-9 z-30 overflow-y-auto rounded-lg border border-border bg-surface py-1 text-[13px]">
+                <ul data-testid="repo-list" data-covers style={listPlace} className="absolute top-8 z-30 overflow-y-auto rounded-md border border-border bg-panel py-1 font-sans text-[13px]">
                     {list.repos.map((r) => (
                         <li key={r.root}>
-                            <button type="button" onClick={() => pick(r.root)} className="block w-full px-3 py-2 text-left hover:bg-border">
+                            <button type="button" onClick={() => pick(r.root)} className="block w-full px-3 py-2 text-left hover:bg-node">
                                 <span className={r.root === repo ? "font-medium text-text" : "text-text"}>{r.remote ? `${r.remote.owner} / ${r.remote.name}` : r.name}</span>
-                                <span title={r.root} className="block truncate font-mono text-[12px] text-text-2">{r.root}</span>
+                                <span title={r.root} className="block truncate font-mono text-[12px] text-text-3">{r.root}</span>
                             </button>
                         </li>
                     ))}

package/app/map/RoutedEdge.tsx

@@ -2,33 +2,65 @@
 
 import { memo } from "react";
 import { BaseEdge, EdgeLabelRenderer, type Edge, type EdgeProps } from "@xyflow/react";
-import { midpointAlong, roundedPath, type Point } from "./routes";
+import { roundedPath, type Point } from "./routes";
+import { arrowHead } from "./weights";
 
-/** A line that follows its route (routes.ts) instead of React Flow's straight curve. */
-export type RoutedEdgeType = Edge<{ points: Point[] }, "routed">;
+/**
+ * A line that follows its route (routes.ts) instead of React Flow's straight curve. `width` goes by how many imports it
+ * carries (weights.ts), `color` by its tone, and `count` is the number written on it at `labelAt`, when it's one of the
+ * lines that carry theirs (weights.ts's labelledLines) and its count has a place clear of everything else (routes.ts's
+ * placeCounts). `headWidth` is the width its box's one arrowhead is sized for (weights.ts's boxHeadWidths), shared by
+ * every line into that box, else its own.
+ */
+export type RoutedEdgeData = { points: Point[]; width: number; color: string; count?: string; countStrong?: boolean; headWidth?: number; labelAt?: Point };
+export type RoutedEdgeType = Edge<RoutedEdgeData, "routed">;
+
+/** How far above the box's top edge the arrowhead's tip stops, so it never touches the border. */
+const TIP_GAP = 3;
 
 /**
- * One import line on the Map (VISUAL_REFRESH.md §4): drawn along the route the layout gave it, through the channels
- * and gutters between boxes, never across one. Without a route (it can't happen on a laid-out level, but React Flow
- * may draw before the routes arrive) it falls back to a straight line between the two handles.
+ * One import line on the Map (the Workbench redesign, ADR-070): drawn along the route the layout gave it, through the
+ * channels and gutters between boxes, never across one. Its head is filled and wider than the line on both sides, and
+ * the line stops inside the head's base, so the two read as one arrow at any width. Every route ends going down into
+ * its box's top, so the head always points down. Without a route (React Flow may draw before the routes arrive) it
+ * falls back to a straight line between the two handles.
  *
- * The hover label ("16 imports") is HTML above the boxes, not SVG beside the line: the lines sit under the boxes, and
- * a label drawn with them was cut off by any box it overlapped (owner review).
+ * The count is HTML above the boxes, not SVG beside the line: the lines sit under the boxes, and a label drawn with
+ * them was cut off by any box it overlapped (owner review). What a hovered line means, in words, is the canvas's hover
+ * card (LineCard), beside the pointer rather than on the line.
  */
-function RoutedEdge({ id, sourceX, sourceY, targetX, targetY, data, style, markerEnd, label, interactionWidth }: EdgeProps<RoutedEdgeType>){
-    const points = data && data.points.length >= 2 ? data.points : [{ x: sourceX, y: sourceY }, { x: targetX, y: targetY }];
-    const middle = midpointAlong(points);
+function RoutedEdge({ id, sourceX, sourceY, targetX, targetY, data, interactionWidth }: EdgeProps<RoutedEdgeType>){
+    const route = data && data.points.length >= 2 ? data.points : [{ x: sourceX, y: sourceY }, { x: targetX, y: targetY }];
+    const width = data?.width ?? 1;
+    const color = data?.color ?? "var(--edge-dim)";
+    // the lines into one box end at its one point under one head, so each draws that head, the same size whichever of
+    // them are drawn, and they coincide (the owner, 2026-10-28: a line that appears never changes its box's head)
+    const { half, length } = arrowHead(data?.headWidth ?? width);
+    const end = route[route.length - 1];
+    const tip = { x: end.x, y: end.y - TIP_GAP };
+    // the line stops a pixel inside the head's base, so no gap shows between them
+    const line = [...route.slice(0, -1), { x: tip.x, y: tip.y - length + 1 }];
+    // a count goes only where the Map placed it, clear of every other line, count and box (the owner, 2026-10-28)
+    const count = data?.labelAt !== undefined ? data.count : undefined;
+    const head = `M ${tip.x - half} ${tip.y - length} L ${tip.x + half} ${tip.y - length} L ${tip.x} ${tip.y} Z`;
     return (
         <>
-            <BaseEdge id={id} path={roundedPath(points)} style={style} markerEnd={markerEnd} interactionWidth={interactionWidth} />
-            {label && (
+            <BaseEdge
+                id={id}
+                path={roundedPath(line)}
+                style={{ stroke: color, strokeWidth: width, strokeLinecap: "butt", strokeLinejoin: "round" }}
+                interactionWidth={Math.max(interactionWidth ?? 20, width + 10)}
+            />
+            <path d={head} fill={color} stroke={color} strokeWidth={1} strokeLinejoin="round" className="pointer-events-none" />
+            {count && data?.labelAt && (
                 <EdgeLabelRenderer>
                     <div
                         data-edge-label={id}
-                        style={{ transform: `translate(-50%, -50%) translate(${middle.x}px, ${middle.y}px)`, zIndex: 1001 }}
-                        className="pointer-events-none absolute rounded-md border border-border bg-surface px-1.5 py-0.5 text-[12px] text-text"
+                        data-edge-count={count}
+                        style={{ transform: `translate(-50%, -50%) translate(${data.labelAt.x}px, ${data.labelAt.y}px)`, zIndex: 1001 }}
+                        className={`pointer-events-none absolute whitespace-nowrap rounded-[4px] border border-divider bg-canvas px-1.5 text-[11.5px] leading-[16px] tabular-nums ${data.countStrong ? "text-text" : "text-text-3"}`}
                     >
-                        {label}
+                        {count}
                     </div>
                 </EdgeLabelRenderer>
             )}

package/app/map/SearchPalette.tsx

@@ -93,9 +93,9 @@ export default function SearchPalette({ onPick, onClose }: SearchPaletteProps){
     return (
         <div className="pointer-events-auto fixed inset-0 z-30 bg-canvas/70" onClick={onClose}>
             <div role="dialog" aria-label="Search" onClick={(event) => event.stopPropagation()}
-                className="mx-auto mt-[12vh] w-[640px] max-w-[92vw] overflow-hidden rounded-lg border border-border bg-panel">
+                className="mx-auto mt-[12vh] w-[640px] max-w-[92vw] overflow-hidden rounded-[6px] border border-border bg-panel">
                 <div ref={aboveRef}>
-                    <div className="flex items-center gap-3 border-b border-hairline px-4">
+                    <div className="flex items-center gap-3 border-b border-divider px-4">
                         <IconSearch aria-hidden size={16} stroke={1.75} className="shrink-0 text-text-2" />
                         <input
                             ref={input}
@@ -126,17 +126,17 @@ export default function SearchPalette({ onPick, onClose }: SearchPaletteProps){
                                     data-hit={hit.path}
                                     onMouseEnter={() => setActive(i)}
                                     onClick={() => onPick(hit)}
-                                    className={`flex w-full gap-3 px-4 py-2 text-left ${i === current ? "bg-surface" : ""}`}
+                                    className={`flex w-full gap-3 px-4 py-2 text-left ${i === current ? "bg-row-sel" : "hover:bg-node"}`}
                                 >
                                     {hit.kind === "folder"
-                                        ? <IconFolder aria-hidden size={16} stroke={1.75} className="mt-0.5 shrink-0 text-folder" />
+                                        ? <IconFolder aria-hidden size={16} stroke={1.75} className="mt-0.5 shrink-0 text-glyph-dim" />
                                         : <IconFile aria-hidden size={16} stroke={1.75} className="mt-0.5 shrink-0 text-text-2" />}
                                     <span className="min-w-0 flex-1">
                                         <span title={hit.path} className="block truncate font-mono text-[13px] text-text">{hit.path}</span>
                                         {hit.tagline && <span title={hit.tagline} className="block truncate text-[13px] text-text-2">{hit.tagline}</span>}
                                         {hit.code && (
-                                            <span title={`${codeLabel(hit.code)}: ${hit.code.snippet}`} className="block truncate font-mono text-[12px] text-text-2">
-                                                {codeLabel(hit.code)}:{" "}
+                                            <span title={`${codeLabel(hit.code)}, ${hit.code.snippet}`} className="block truncate font-mono text-[12px] text-text-2">
+                                                {codeLabel(hit.code)},{" "}
                                                 {highlight
                                                     // highlightCode escapes the snippet, so this HTML is only its spans (syntax.ts)
                                                     ? <span className="syntax" dangerouslySetInnerHTML={{ __html: highlight(hit.code.snippet, languageFor(hit.path)) }} />

package/app/map/SourceViewer.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { IconExternalLink, IconFile, IconX } from "@tabler/icons-react";
+import { IconExternalLink, IconX } from "@tabler/icons-react";
 import type { SourceResponse } from "@/lib/contracts";
 import { api, ApiError } from "./api";
 import { formatCount } from "./format";
@@ -14,6 +14,9 @@ import { useScrollLock } from "./useScrollLock";
 /** Each line's height in px: the gutter, the code and the highlighted range all use it, so they line up. */
 const LINE_HEIGHT = 20;
 
+/** "Open in VS Code" as the inspector's secondary button (DetailPanel's SECONDARY), not an underlined link. */
+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";
+
 type SourceViewerProps = {
     path: string;
     /** The lines to highlight and scroll to: a declaration picked in the panel. */
@@ -83,51 +86,50 @@ export default function SourceViewer({ path, lines, onClose, onOpenInEditor }: S
                 aria-label={`Source of ${path}`}
                 onClick={(event) => event.stopPropagation()}
                 // a narrow window (under 600 px) gives it the whole width: 80% of it would leave too little code
-                className="absolute inset-y-0 right-0 flex w-[min(960px,80vw)] flex-col border-l border-hairline bg-panel max-[600px]:w-full"
+                className="absolute inset-y-0 right-0 flex w-[min(960px,80vw)] flex-col border-l border-divider bg-panel max-[600px]:w-full"
             >
-                <header className="flex items-start justify-between gap-3 border-b border-hairline px-4 py-3">
+                {/* the inspector's header: the name in the code font, the path, what's shown, and the editor as a button */}
+                <header className="flex shrink-0 items-start justify-between gap-2 border-b border-divider px-4 pb-3 pt-4">
                     <div className="min-w-0">
-                        <div className="flex items-center gap-2">
-                            <IconFile aria-hidden size={16} stroke={1.75} className="shrink-0 text-text-2" />
-                            <h2 title={path} className="truncate text-[15px] font-medium text-text">{nameOf(path, "")}</h2>
-                        </div>
-                        <div className="truncate font-mono text-[12px] text-text-2" title={path}>{path}</div>
-                        <div className="mt-1 flex flex-wrap items-center gap-x-3 text-[12px] text-text-2">
+                        <h2 title={path} className="truncate font-mono text-[15px] font-medium leading-5 text-text">{nameOf(path, "")}</h2>
+                        <div className="truncate font-mono text-[12px] leading-[18px] text-text-3" title={path}>{path}</div>
+                        <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-[12.5px] leading-[18px] text-text-2">
                             {source && <span>{formatCount(count)} {count === 1 ? "line" : "lines"}</span>}
                             {source?.truncated && <span>Only the first 1 MB is shown.</span>}
-                            {source && tooLargeToColor(text) && <span data-testid="source-plain">Shown without colors: too large to color quickly.</span>}
+                            {source && tooLargeToColor(text) && <span data-testid="source-plain">Shown without colors, too large to color quickly.</span>}
                             {lines && <span>Lines {lines.start}–{lines.end} highlighted</span>}
                             {editorHref && (onOpenInEditor
                                 ? (
-                                    <button type="button" onClick={() => onOpenInEditor(lines?.start)} className="inline-flex items-center gap-1 text-control underline underline-offset-2 hover:text-text">
+                                    <button type="button" onClick={() => onOpenInEditor(lines?.start)} className={SECONDARY}>
                                         Open in VS Code <IconExternalLink aria-hidden size={14} stroke={1.75} />
                                     </button>
                                 )
                                 : (
-                                    <a href={editorHref} className="inline-flex items-center gap-1 text-control underline underline-offset-2 hover:text-text">
+                                    <a href={editorHref} className={SECONDARY}>
                                         Open in VS Code <IconExternalLink aria-hidden size={14} stroke={1.75} />
                                     </a>
                                 ))}
                         </div>
                     </div>
-                    <button type="button" onClick={onClose} aria-label="Close the source" className="shrink-0 rounded-md p-1 text-text-2 hover:bg-surface hover:text-text">
+                    <button type="button" onClick={onClose} aria-label="Close the source" 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>
                 </header>
                 {/* long lines scroll sideways here, as in an editor (data-scroll-x: the layout check expects it) */}
-                <div ref={scroller} data-scroll-x className="flex-1 overflow-auto">
-                    {error && <p className="px-4 py-3 text-[13px] text-danger">{error.message}</p>}
+                <div ref={scroller} data-scroll-x className="min-h-0 flex-1 overflow-auto">
+                    {error && <p className="px-4 py-3 text-[13px] text-danger [overflow-wrap:anywhere]">{error.message}</p>}
                     {!source && !error && <p className="px-4 py-3 text-[13px] text-text-2">Loading…</p>}
                     {source && (
                         <div className="relative flex min-w-max font-mono text-[13px]" style={{ lineHeight: `${LINE_HEIGHT}px` }}>
                             {lines && (
                                 <div
                                     aria-hidden
-                                    className="absolute inset-x-0 bg-surface"
+                                    className="absolute inset-x-0 bg-node"
                                     style={{ top: (lines.start - 1) * LINE_HEIGHT + 12, height: (lines.end - lines.start + 1) * LINE_HEIGHT }}
                                 />
                             )}
-                            <pre aria-hidden className="sticky left-0 select-none bg-panel py-3 pl-4 pr-3 text-right text-text-2">
+                            {/* the line numbers stay put as the code scrolls sideways, quieter than the code, as in the editor */}
+                            <pre aria-hidden className="sticky left-0 select-none bg-panel py-3 pl-4 pr-3 text-right text-text-3">
                                 {Array.from({ length: count }, (_, i) => i + 1).join("\n")}
                             </pre>
                             {highlighted?.text === text

package/app/map/StatusBar.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import { useCallback, useEffect, useState, type CSSProperties } from "react";
+import type { IndexStatus, LiveEvent, StageName } from "@/lib/contracts";
+import { api, ApiError } from "./api";
+import { activityLabel, highlightedNote, newestTitle } from "./activity";
+import { ago, formatCount, headline, stageLabel, type Tone } from "./format";
+import { DEMO } from "./mode";
+import { placePopover, usePlaceOnResize } from "./popover";
+import { useDismiss } from "./useDismiss";
+
+type StatusBarProps = {
+    status: IndexStatus | null;
+    recent: readonly LiveEvent[];
+    connected: boolean;
+    /** How many places show_on_map has highlighted, which Clear lets go of (Esc too). */
+    highlightCount: number;
+    onClear: () => void;
+    /** The boxes on screen and the lines Strong links only hides, for the counts on the right. */
+    items: number;
+    weakHidden: number;
+    /** VS Code's slim form: only what VS Code's own bar lacks (the owner's pick, 2026-10-27). */
+    embedded: boolean;
+    /** A very short window: only the two dots, at the header's end (shell.ts). */
+    dots: boolean;
+};
+
+/** The indexed dot means indexed and nothing else; a failure or nothing indexed is the error color. */
+const DOTS: Record<Tone, string> = { ok: "bg-ok", busy: "bg-text-3", warn: "bg-danger", off: "bg-text-3" };
+const STAGES: readonly StageName[] = ["structure", "summaries", "embeddings"];
+/** The index menu's width at normal sizes, narrower only when the window is. */
+const MENU_WIDTH = 340;
+
+/**
+ * The status bar along the Map's bottom (the Workbench redesign, ADR-070), 24 px. Left: the index status with its dot
+ * (it opens the stages and Re-index), the repo's file count, and Claude Code's newest action as it works, with its
+ * orange dot; with show_on_map highlights up, how many and Clear. Right: the items on screen and the lines Strong links
+ * only hides, and the search shortcut. Inside VS Code's panel it's the slim form the owner picked: the index and Claude
+ * Code cells and the counts, VS Code's own bar having the rest.
+ *
+ * As the window narrows the cells give way in order, the shortcut under 1100 px, the counts under 800, the file count
+ * under 560, and the cells' words under 420, so the two dots, index and Claude Code, always stay (their titles say the
+ * rest). In a very short window the bar goes and the two dots move to the header's end.
+ */
+export default function StatusBar({ status, recent, connected, highlightCount, onClear, items, weakHidden, embedded, dots }: StatusBarProps){
+    // the clock lives in state, ticking every second: reading Date.now() during render isn't allowed
+    const [now, setNow] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => setNow(Date.now()), 1_000);
+        return () => clearInterval(timer);
+    }, []);
+    const newest = recent[0];
+    const live = newest !== undefined
+        ? { text: activityLabel(newest), title: newestTitle(recent, now), active: true }
+        : {
+            // the static demo never connects: say why the cell is quiet, instead of "Not connected" (ADR-049)
+            text: DEMO ? "Static demo, no live Claude Code channel" : connected ? "Claude Code, no tool calls yet" : "Claude Code isn't connected",
+            title: DEMO ? "In the app, Claude Code's tool calls show up here as it works. This static demo has no live channel." : connected ? "Claude Code is connected to the live channel" : "Claude Code isn't connected to the live channel",
+            active: false,
+        };
+    const liveDot = <span aria-hidden className={`h-1.5 w-1.5 shrink-0 rounded-full ${live.active ? "bg-agent" : connected ? "bg-text-3" : "border border-text-3"}`} />;
+
+    if (dots){
+        return (
+            <span className="flex shrink-0 items-center gap-2.5 pl-1">
+                <IndexCell status={status} compact />
+                <span title={`${live.text}. ${live.title}`} className="grid h-6 w-4 place-items-center">{liveDot}</span>
+            </span>
+        );
+    }
+
+    const highlights = highlightedNote(highlightCount);
+    return (
+        <footer data-testid="activity-bar" className="relative z-20 flex h-6 shrink-0 items-center gap-4 border-t border-divider bg-panel px-3 text-[11.5px] text-text-3">
+            <IndexCell status={status} compact={false} />
+            {!embedded && status !== null && (
+                <span className="shrink-0 whitespace-nowrap max-[560px]:hidden">{formatCount(status.stages.structure.total)} files</span>
+            )}
+            <span className="flex min-w-0 items-center gap-1.5" title={live.title}>
+                {liveDot}
+                <span className={`truncate max-[420px]:hidden ${live.active ? "text-text-2" : ""}`}>{live.text}</span>
+                {live.active && now > 0 && <span className="shrink-0 max-[800px]:hidden">{ago(Math.max(0, now - Date.parse(newest!.at)))}</span>}
+            </span>
+            {highlights !== null && (
+                <span className="flex shrink-0 items-center gap-2">
+                    <span className="max-[640px]:hidden">{highlights}</span>
+                    <button type="button" onClick={onClear} title="Clear Claude Code's highlights (Esc)" className="text-text-2 underline decoration-text-3 underline-offset-2 hover:text-text">Clear</button>
+                </span>
+            )}
+            <span className="ml-auto shrink-0 whitespace-nowrap max-[800px]:hidden">
+                {formatCount(items)} {items === 1 ? "item" : "items"}{weakHidden > 0 ? `, ${formatCount(weakHidden)} weak ${weakHidden === 1 ? "link" : "links"} hidden` : ""}
+            </span>
+            {!embedded && <span className="shrink-0 whitespace-nowrap max-[1100px]:hidden">Ctrl K to search</span>}
+        </footer>
+    );
+}
+
+/**
+ * The index status: its dot and, but in the compact form, the stage that most needs attention in a few words. It
+ * opens the stages with their counts and Re-index (POST /api/index) with its progress, upward from the bar and kept
+ * inside the window. The static demo's index is frozen, so there it says so instead (ADR-049).
+ */
+function IndexCell({ status, compact }: { status: IndexStatus | null; compact: boolean }){
+    const [open, setOpen] = useState(false);
+    const [reindex, setReindex] = useState<string | null>(null);
+    const ref = useDismiss<HTMLDivElement>(open, () => setOpen(false));
+    // at the header's end (a very short window) it opens downward, placed inside the window as it opens and as the
+    // window resizes, like the header's other popovers (popover.ts); in the bar it opens upward from the bar's start
+    const [place, setPlace] = useState<CSSProperties>({ right: 0, width: MENU_WIDTH });
+    const placeMenu = useCallback(() => {
+        if (ref.current) setPlace(placePopover(ref.current, MENU_WIDTH, "end"));
+    }, [ref]);
+    usePlaceOnResize(open && compact, placeMenu);
+    if (status === null) return null;
+    const head = headline(status);
+    const runReindex = (): void => {
+        setReindex("Starting…");
+        api.reindex((p) => setReindex(`${p.stage} ${formatCount(p.done)} / ${formatCount(p.total)}`)).then(
+            (done) => setReindex(`Re-indexed ${formatCount(done.files)} files in ${(done.totalMs / 1000).toFixed(1)} s`),
+            (err: unknown) => setReindex(err instanceof ApiError ? err.message : "The re-index failed"),
+        );
+    };
+    return (
+        <div ref={ref} className="relative flex min-w-0 shrink-0 items-center">
+            <button
+                type="button"
+                data-testid="status-pill"
+                onClick={() => {
+                    if (!open && compact) placeMenu();
+                    setOpen((o) => !o);
+                }}
+                aria-expanded={open}
+                title={`${head.text}. ${DEMO ? "The index status" : "The index status, and Re-index"}`}
+                className="flex min-w-0 items-center gap-1.5 rounded-[4px] px-0.5 hover:text-text"
+            >
+                <span aria-hidden className={`h-1.5 w-1.5 shrink-0 rounded-full ${DOTS[head.tone]}`} />
+                {!compact && <span className="truncate max-[420px]:hidden">{head.text}</span>}
+            </button>
+            {open && (
+                <div
+                    data-testid="status-menu"
+                    data-covers
+                    style={compact ? place : { width: `min(${MENU_WIDTH}px, calc(100vw - 24px))`, maxHeight: "calc(100vh - 80px)" }}
+                    className={`absolute z-30 space-y-3 overflow-y-auto rounded-md border border-border bg-panel p-3 text-[12px] text-text-2 ${compact ? "top-7" : "bottom-6 left-0"}`}
+                >
+                    {STAGES.map((name) => (
+                        <div key={name}>
+                            <div className="text-[13px] text-text">{stageLabel(name, status.stages[name])}</div>
+                            {status.stages[name].note && <div>{status.stages[name].note}</div>}
+                        </div>
+                    ))}
+                    <div className="flex items-center justify-between gap-3 border-t border-divider pt-3">
+                        {DEMO
+                            ? <span>A static demo, its index frozen when it was exported.</span>
+                            : (
+                                <>
+                                    <span className="truncate" title={reindex ?? `Index version ${status.indexVersion}`}>{reindex ?? `Index version ${status.indexVersion}`}</span>
+                                    <button type="button" onClick={runReindex} className="shrink-0 rounded-[5px] border border-border px-2 py-0.5 text-[12.5px] text-text hover:border-text-3">Re-index</button>
+                                </>
+                            )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/app/map/embed.ts

@@ -1,4 +1,4 @@
-import { BRIDGE_VERSION, type BridgeFromMap, type BridgeToMap } from "@/lib/contracts";
+import { BRIDGE_VERSION, type BridgeFromMap, type BridgeThemeColors, type BridgeToMap, type ThemeKind } from "@/lib/contracts";
 
 /**
  * The Map's side of the editor bridge (docs/API_CONTRACTS.md §20): when the Map is framed in a VS Code webview
@@ -24,6 +24,10 @@ export function isEmbedded(search: string): boolean {
 }
 
 const isPath = (value: unknown): value is string => typeof value === "string" && value.length <= MAX_PATH_LENGTH;
+
+const THEME_KINDS: ReadonlySet<string> = new Set<ThemeKind>(["dark", "light", "hc", "hc-light"]);
+/** A color as VS Code writes one (`#1f1f1f`, `rgba(128, 128, 128, 0.35)`): a short string. theme.ts reads it, or drops it. */
+const isColorText = (value: unknown): value is string => typeof value === "string" && value.length > 0 && value.length <= 64;
 /** A path to jump to, never "": the repo is no editor's file, and focus("") would push the top level onto the history. */
 const isTarget = (value: unknown): value is string => isPath(value) && value !== "";
 
@@ -32,7 +36,8 @@ const isTarget = (value: unknown): value is string => isPath(value) && value !==
  * null, and a result carries only the fields checked. A `follow` or `show` with an empty path is null. A `highlight`
  * keeps its first 50 paths and drops entries that are not paths (not strings, or over 1,024 characters) rather than
  * refusing the message; it reads no further than its first 1,000 entries. A hello of another bridge version is null: a
- * Map that gets another version ignores the hello.
+ * Map that gets another version ignores the hello. A `theme` needs one of the four kinds and its editor, side and fg
+ * colors as strings of at most 64 characters; its border, desc and focus are kept only when they're such strings too.
  */
 export function parseToMap(data: unknown): BridgeToMap | null {
     if (typeof data !== "object" || data === null) return null;
@@ -57,6 +62,21 @@ export function parseToMap(data: unknown): BridgeToMap | null {
         }
         case "nebulosity.clear":
             return { type: "nebulosity.clear" };
+        case "nebulosity.theme": {
+            if (typeof message.kind !== "string" || !THEME_KINDS.has(message.kind)) return null;
+            if (typeof message.colors !== "object" || message.colors === null) return null;
+            const given = message.colors as Record<string, unknown>;
+            const colors: Partial<BridgeThemeColors> = {};
+            // the three every theme has are required, the rest are kept only when they're short strings
+            for (const name of ["editor", "side", "fg"] as const){
+                if (!isColorText(given[name])) return null;
+                colors[name] = given[name];
+            }
+            for (const name of ["border", "desc", "focus"] as const){
+                if (isColorText(given[name])) colors[name] = given[name];
+            }
+            return { type: "nebulosity.theme", kind: message.kind as ThemeKind, colors: colors as BridgeThemeColors };
+        }
         default:
             return null;
     }