@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/projects/ProjectList.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useListMotion } from "../../lib/use-list-motion.js";
+import { useDeferredListOrder } from "../../lib/use-deferred-list-order.js";
+import { ListActivityNotice } from "../ListActivityNotice.js";
+import { FoldLine, SectionHead, useOpenFolds } from "../ListSections.js";
+import { EmptyState } from "../ui/index.js";
+import { ProjectListItem } from "./ProjectListItem.js";
+const projectId = (project) => project.row.id;
+export function ProjectList({ projects, orderScope = "projects", selectedProjectId, maximumLifetimeCost, homeDirectory, currentTimestamp, ingestActive, runtimes, projectBackfills, pending, onProjectSelect, sections = null, }) {
+    const folds = useOpenFolds(sections, projectId, selectedProjectId);
+    // A folded section's rows are the reader's to open, so they never wait on
+    // the held geometry: only the open runs go through it.
+    const positions = sections === null
+        ? projects.map(project => ({ id: project.row.id, day: null }))
+        : sections.flatMap(entry => entry.section.fold !== undefined ? [] :
+            entry.rows.map(project => ({ id: project.row.id, day: null, section: entry.index })));
+    const layout = useDeferredListOrder(positions, orderScope);
+    const motionRef = useListMotion(JSON.stringify(layout.items), orderScope, layout.scrollRef);
+    const byId = new Map(projects.map(project => [project.row.id, project]));
+    const visible = layout.items.flatMap(item => byId.get(item.id) ?? []);
+    const drawRow = (project) => (_jsx(ProjectListItem, { project: project, maximumLifetimeCost: maximumLifetimeCost, isSelected: project.row.id === selectedProjectId, homeDirectory: homeDirectory, currentTimestamp: currentTimestamp, ingestActive: ingestActive, runtimeStates: runtimes?.filter((runtime) => project.agents.some((agent) => agent.kind === runtime.kind)).map((runtime) => runtime.state), backfill: projectBackfills.get(project.row.id) ?? null, onProjectSelect: onProjectSelect }, project.row.id));
+    const sectioned = sections === null ? null : sections.flatMap((entry) => {
+        if (entry.section.fold !== undefined) {
+            if (entry.rows.length === 0 && entry.section.fold.count === undefined)
+                return [];
+            const open = folds.isOpen(entry.section.key);
+            return [
+                _jsx(FoldLine, { arranged: entry, open: open, onToggle: () => folds.toggle(entry.section.key) }, `section:${entry.section.key}`),
+                ...(open ? entry.rows.map(drawRow) : []),
+            ];
+        }
+        const rows = layout.items.flatMap(position => position.section === entry.index ? byId.get(position.id) ?? [] : []);
+        if (rows.length === 0)
+            return [];
+        return [
+            ...(entry.section.title === undefined ? [] : [
+                _jsx(SectionHead, { sectionKey: entry.section.key, children: entry.section.title }, `section:${entry.section.key}`),
+            ]),
+            ...rows.map(drawRow),
+        ];
+    });
+    return (_jsxs("div", { className: "ah-list-view", ...layout.hostProps, children: [_jsxs("div", { className: "ah-scroll ah-motion-list", ref: motionRef, onScroll: layout.onScroll, children: [sectioned ?? visible.map(drawRow), projects.length === 0 && !pending && (_jsx(EmptyState, { title: "No projects yet", description: "rosettad has not indexed any project yet \u2014 leave it serving and this fills in." }))] }), _jsx(ListActivityNotice, { pending: layout.pending, onShow: layout.apply, noun: "projects" })] }));
+}

package/dist/components/projects/ProjectListItem.d.ts

@@ -0,0 +1,19 @@
+import type { ProjectBackfill, BackfillState } from "@vibefield/rosetta-protocol";
+import type { ProjectViewModel } from "../../lib/model.js";
+export interface ProjectListItemProps {
+    readonly project: ProjectViewModel;
+    /** Maximum lifetime estimated spend (micro-USD) across the complete
+     * project collection, not a filtered subset. */
+    readonly maximumLifetimeCost: number;
+    readonly isSelected: boolean;
+    readonly homeDirectory: string | null;
+    readonly currentTimestamp: number;
+    /** Canonical publication is still pending, so aggregate figures wait. */
+    readonly ingestActive: boolean;
+    readonly runtimeStates?: readonly BackfillState[] | undefined;
+    /** This project's row in the daemon's per-project backfill fold; null
+     * before the plan settles, and on a daemon too old to carry it. */
+    readonly backfill: ProjectBackfill | null;
+    readonly onProjectSelect: (projectId: string) => void;
+}
+export declare function ProjectListItem({ project, maximumLifetimeCost, isSelected, homeDirectory, currentTimestamp, ingestActive, runtimeStates, backfill, onProjectSelect, }: ProjectListItemProps): import("react").JSX.Element;

package/dist/components/projects/ProjectListItem.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentBadges } from "../../lib/agents.js";
+import { progressBytes } from "../../lib/ingest-activity.js";
+import { projectBackfillProgress } from "../../lib/ingest.js";
+import { lastActive, tildePath, tokenText } from "../../lib/format.js";
+import { coverage, fmtUsd, spendDescription } from "../../lib/spend.js";
+import { useHostInputs } from "../../host-inputs.js";
+import { HostAct } from "../HostAct.js";
+import { ProjectActivitySparkline } from "./ProjectActivitySparkline.js";
+/** The row's "how much": estimated spend (§4.1.3). A partial figure is a
+ * lower bound and says so with `+`; usage with no list price at all reads
+ * `n/p` rather than a claimed $0. */
+function SpendFigure({ spend, unknown, description, }) {
+    const state = coverage(spend);
+    const figure = spend.costMicroUsd === null ? null : fmtUsd(spend.costMicroUsd);
+    return (_jsxs("span", { className: "ah-project-list-item__token-figure", "data-coverage": state, title: unknown ? undefined : description, children: [_jsx("b", { children: unknown ? "—" : figure === null ? (state === "unavailable" ? "n/p" : "—") : figure.n }), _jsx("i", { children: unknown || figure === null ? "" : `${figure.u}${state === "partial" ? "+" : ""}` })] }));
+}
+export function ProjectListItem({ project, maximumLifetimeCost, isSelected, homeDirectory, currentTimestamp, ingestActive, runtimeStates, backfill, onProjectSelect, }) {
+    // The cooking card: identity (name, path, agents) renders as itself from
+    // the first skim; only the quantitative slots carry the processing state.
+    const isCooking = ingestActive || !project.statsReady;
+    // Fill the accent from observed bytes when the source plan has a known
+    // total. Unknown work keeps a quiet accent and an explicit stage label.
+    const ingestFill = isCooking && backfill !== null
+        ? projectBackfillProgress(backfill)
+        : null;
+    const cookingLabel = isCooking
+        ? backfill !== null
+            ? backfill.sessions_done >= backfill.sessions_total
+                ? "Preparing activity summaries"
+                : runtimeStates?.includes("streaming")
+                    ? ingestFill !== null
+                        ? `Reading conversations · ${Math.floor(ingestFill * 100)}%`
+                        : `Reading conversations · ${progressBytes(backfill.bytes_streamed)}`
+                    : runtimeStates?.some((state) => state === "preparing" || state === "applying")
+                        ? "Organizing conversations" : "Waiting for conversations"
+            : project.readiness === "ready" ? "Preparing activity summaries" : "Waiting for conversations"
+        : null;
+    const lifetimeCost = project.lifetimeSpend.costMicroUsd ?? 0;
+    const spendShare = maximumLifetimeCost > 0
+        ? (lifetimeCost / maximumLifetimeCost) * 100
+        : 0;
+    const spendLabel = spendDescription(project.lifetimeSpend, tokenText);
+    const lastActiveLabel = project.lastActiveMs === null
+        ? null
+        : lastActive(project.lastActiveMs, currentTimestamp);
+    const workspacePath = project.row.root_paths[0]
+        ? tildePath(project.row.root_paths[0], homeDirectory)
+        : "No workspace recorded";
+    // R2: the host's marks, second line and live count, drawn and never read.
+    const decoration = useHostInputs().projectRow?.(project.row.id) ?? null;
+    const marks = decoration?.marks ?? null;
+    const line = decoration?.line ?? null;
+    const live = decoration?.live !== undefined && decoration.live > 0 ? decoration.live : null;
+    // H4: the host's act at the row's end (pin, hide), or its rows.
+    const act = decoration?.act ?? null;
+    const className = `ah-project-list-item${isSelected ? " is-selected" : ""}`;
+    const style = {
+        "--project-color": project.tint,
+        "--spend-share": `${spendShare.toFixed(2)}%`,
+        ...(ingestFill !== null
+            ? { "--ingest-fill": `${(ingestFill * 100).toFixed(1)}%` }
+            : {}),
+    };
+    const accessibleName = `${project.row.name} · ${isCooking && project.lifetimeTokens === 0
+        ? "activity summaries pending"
+        : `${spendLabel} · ${tokenText(project.lifetimeTokens)} lifetime tokens`}${lastActiveLabel ? ` · last active ${lastActiveLabel}` : ""}${live !== null ? ` · ${live} live` : ""}${cookingLabel ? ` · ${cookingLabel}` : ""}`;
+    // With an act the row holds two buttons, and a button cannot hold another:
+    // the row becomes a box, one button covers it (the selection, named as the
+    // row always was), and the act sits above it. The rest is drawn for the eye.
+    const shown = act === null ? undefined : true;
+    const time = live !== null ? (_jsxs("span", { className: "ah-last", "data-live": "", title: `${live} live now`, "aria-hidden": shown, children: [live, " live"] })) : lastActiveLabel !== null && (_jsx("span", { className: "ah-last", "data-live": lastActiveLabel === "now" ? "" : undefined, title: `Last active ${lastActiveLabel}`, "aria-hidden": shown, children: lastActiveLabel }));
+    const body = (_jsxs(_Fragment, { children: [_jsx("i", { className: "ah-project-list-item__accent" }), _jsxs("span", { className: "ah-project-list-item__header", "aria-hidden": shown, children: [_jsx("strong", { title: project.row.name, children: project.row.name }), _jsx(AgentBadges, { shares: project.agents })] }), _jsxs("span", { className: "ah-project-list-item__path", "data-marks": marks !== null ? "" : undefined, "aria-hidden": shown, children: [marks !== null && _jsx("span", { className: "ah-project-list-item__marks", children: marks }), _jsx("small", { title: workspacePath, children: workspacePath })] }), line !== null && _jsx("span", { className: "ah-project-list-item__line", "aria-hidden": shown, children: line }), cookingLabel && _jsx("span", { className: "ah-project-list-item__progress", "aria-hidden": shown, children: cookingLabel }), _jsxs("span", { className: "ah-project-list-item__footer", children: [_jsxs("span", { className: "ah-project-list-item__metrics", "data-cooking": isCooking ? "" : undefined, title: cookingLabel ?? undefined, "aria-hidden": shown, children: [_jsx(ProjectActivitySparkline, { values: project.recentTokenBuckets }), _jsx(SpendFigure, { spend: project.lifetimeSpend, unknown: isCooking && project.lifetimeTokens === 0, description: `${spendLabel} · ${tokenText(project.lifetimeTokens)} tokens` })] }), act === null ? time : (_jsxs("span", { className: "ah-project-list-item__end", children: [_jsx(HostAct, { act: act, place: "row" }), time] }))] })] }));
+    if (act === null) {
+        return (_jsx("button", { type: "button", className: className, "data-motion-key": project.row.id, "data-cooking": isCooking ? "" : undefined, "data-fill": ingestFill !== null ? "" : undefined, "data-line": line !== null ? "" : undefined, style: style, "aria-current": isSelected ? "true" : undefined, "aria-label": accessibleName, onClick: () => onProjectSelect(project.row.id), children: body }));
+    }
+    return (_jsxs("div", { className: className, "data-motion-key": project.row.id, "data-cooking": isCooking ? "" : undefined, "data-fill": ingestFill !== null ? "" : undefined, "data-line": line !== null ? "" : undefined, "data-host-act": "", style: style, children: [_jsx("button", { type: "button", className: "ah-project-list-item__hit", "aria-current": isSelected ? "true" : undefined, "aria-label": accessibleName, onClick: () => onProjectSelect(project.row.id) }), body] }));
+}

package/dist/components/projects/ProjectsColumn.d.ts

@@ -0,0 +1,19 @@
+import type { IngestProgress } from "@vibefield/rosetta-protocol";
+import type { ProjectViewModel } from "../../lib/model.js";
+import type { ActivityOrder } from "../../lib/activity-order.js";
+import type { IngestActivity } from "../../lib/ingest-activity.js";
+export type ProjectSort = "recent" | "token";
+export interface ProjectsColumnProps {
+    readonly projects: readonly ProjectViewModel[];
+    readonly activityOrder: ActivityOrder;
+    readonly selectedProjectId: string | null;
+    readonly sort: ProjectSort;
+    readonly onSortChange: (sort: ProjectSort) => void;
+    readonly homeDirectory: string | null;
+    readonly currentTimestamp: number;
+    /** The daemon's cold-start block; null on a daemon too old to carry it. */
+    readonly ingest: IngestProgress | null;
+    readonly activity: IngestActivity | null;
+    readonly onProjectSelect: (projectId: string) => void;
+}
+export declare function ProjectsColumn({ projects, activityOrder, selectedProjectId, sort, onSortChange, homeDirectory, currentTimestamp, ingest, activity, onProjectSelect, }: ProjectsColumnProps): import("react").JSX.Element;

package/dist/components/projects/ProjectsColumn.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { isCensusRunning, isIngestActive, projectBackfills } from "../../lib/ingest.js";
+import { UNASSIGNED_PROJECT_ID } from "../../lib/model.js";
+import { compareActivityRanks } from "../../lib/activity-order.js";
+import { PortfolioSummaryPanel } from "../SummaryPanels.js";
+import { ListSummaryHeader, ListToolbar, SegmentedControl } from "../ui/index.js";
+import { IngestStatus } from "../IngestStatus.js";
+import { ProjectList } from "./ProjectList.js";
+import { useHostInputs } from "../../host-inputs.js";
+import { arrangeSections } from "../../lib/sections.js";
+import { FilterChips } from "../FilterChips.js";
+const PROJECT_SORT_OPTIONS = [
+    { value: "recent", label: "recent" },
+    { value: "token", label: "token" },
+];
+export function ProjectsColumn({ projects, activityOrder, selectedProjectId, sort, onSortChange, homeDirectory, currentTimestamp, ingest, activity, onProjectSelect, }) {
+    const ingestActive = isIngestActive(ingest);
+    // Metadata can arrive progressively; the status panel explains this
+    // without covering projects that are already available.
+    const censusRunning = isCensusRunning(ingest);
+    // The daemon's per-project fold: each cooking card draws its own byte
+    // meter from this, so progress reads at the row you actually care about.
+    const backfills = useMemo(() => projectBackfills(ingest), [ingest]);
+    // "Spend" is estimated USD (§4.1.3); tokens only break ties, so wholly
+    // unpriced projects still order among themselves.
+    const maximumLifetimeCost = useMemo(() => projects.reduce((maximum, project) => Math.max(maximum, project.lifetimeSpend.costMicroUsd ?? 0), 0), [projects]);
+    const visibleProjects = useMemo(() => [...projects].sort((left, right) => sort === "recent"
+        ? compareActivityRanks(activityOrder.projects.get(left.row.id === UNASSIGNED_PROJECT_ID ? null : left.row.id)?.rankAt ?? null, activityOrder.projects.get(right.row.id === UNASSIGNED_PROJECT_ID ? null : right.row.id)?.rankAt ?? null, left.row.id, right.row.id)
+        : (right.lifetimeSpend.costMicroUsd ?? 0) - (left.lifetimeSpend.costMicroUsd ?? 0)
+            || right.lifetimeTokens - left.lifetimeTokens || left.row.id.localeCompare(right.row.id)), [projects, sort, activityOrder]);
+    // R3: the host's sections over the room's own order.
+    const { projectSections, projectFilters } = useHostInputs();
+    const sections = useMemo(() => (projectSections === undefined ? null : arrangeSections(projectSections, visibleProjects, (p) => p.row.id)), [projectSections, visibleProjects]);
+    return (_jsxs("div", { className: "ah-col", children: [activity !== null ? (_jsx(ListSummaryHeader, { label: "Projects", count: projects.length, singularNoun: "project" })) : (_jsx(PortfolioSummaryPanel, { projects: projects, selectedProjectId: selectedProjectId, ingestActive: ingestActive, censusRunning: censusRunning, onProjectSelect: onProjectSelect })), _jsx(IngestStatus, { activity: activity }), _jsxs(ListToolbar, { children: [projectFilters !== undefined && projectFilters.length > 0 && _jsx(FilterChips, { filters: projectFilters }), _jsx(SegmentedControl, { value: sort, options: PROJECT_SORT_OPTIONS, accessibleLabel: "Rank projects by", className: "ah-sortseg", onValueChange: onSortChange })] }), _jsx("div", { className: "ah-veilhost", children: _jsx(ProjectList, { projects: visibleProjects, orderScope: `projects:${sort}`, selectedProjectId: selectedProjectId, maximumLifetimeCost: maximumLifetimeCost, homeDirectory: homeDirectory, currentTimestamp: currentTimestamp, ingestActive: ingestActive, runtimes: ingest?.runtimes, projectBackfills: backfills, pending: censusRunning, onProjectSelect: onProjectSelect, sections: sections }) })] }));
+}

package/dist/components/projects/index.d.ts

@@ -0,0 +1,8 @@
+export { ProjectActivitySparkline } from "./ProjectActivitySparkline.js";
+export type { ProjectActivitySparklineProps } from "./ProjectActivitySparkline.js";
+export { ProjectList } from "./ProjectList.js";
+export type { ProjectListProps } from "./ProjectList.js";
+export { ProjectListItem } from "./ProjectListItem.js";
+export type { ProjectListItemProps } from "./ProjectListItem.js";
+export { ProjectsColumn } from "./ProjectsColumn.js";
+export type { ProjectSort, ProjectsColumnProps } from "./ProjectsColumn.js";

package/dist/components/projects/index.js

@@ -0,0 +1,4 @@
+export { ProjectActivitySparkline } from "./ProjectActivitySparkline.js";
+export { ProjectList } from "./ProjectList.js";
+export { ProjectListItem } from "./ProjectListItem.js";
+export { ProjectsColumn } from "./ProjectsColumn.js";

package/dist/components/search/MatchStepper.d.ts

@@ -0,0 +1,9 @@
+export interface MatchStepperProps {
+    readonly query: string;
+    /** Zero-based position of the current match. */
+    readonly at: number;
+    readonly total: number;
+    readonly onStep: (delta: 1 | -1) => void;
+    readonly onDismiss: () => void;
+}
+export declare function MatchStepper({ query, at, total, onStep, onDismiss }: MatchStepperProps): import("react").JSX.Element;

package/dist/components/search/MatchStepper.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The stepper — what the sheet leaves behind when a hit lands. The head of
+// the transcript says what the reader is doing (`debounce · 3 of 7`) and lets
+// them walk the session's other matches without reopening the sheet, the way
+// an editor's find bar walks a file. ⌘G / ⇧⌘G are the platform's own
+// find-next / find-previous; the arrows are the same acts with a pointer.
+import { CloseGlyph } from "../../lib/icons.js";
+import { shortcutLabel } from "./shortcut.js";
+function Chevron({ direction }) {
+    return (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: direction === "up" ? "M4 10l4-4 4 4" : "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+export function MatchStepper({ query, at, total, onStep, onDismiss }) {
+    return (_jsxs("div", { className: "ah-stepper", role: "group", "aria-label": `${total} ${total === 1 ? "match" : "matches"} for ${query} in this session`, children: [_jsx("b", { title: query, children: query }), _jsxs("span", { className: "tnum", "aria-live": "polite", children: [at + 1, " of ", total] }), _jsx("button", { type: "button", "aria-label": `Previous match (${shortcutLabel("G", true)})`, title: `Previous match · ${shortcutLabel("G", true)}`, disabled: total <= 1, onClick: () => onStep(-1), children: _jsx(Chevron, { direction: "up" }) }), _jsx("button", { type: "button", "aria-label": `Next match (${shortcutLabel("G")})`, title: `Next match · ${shortcutLabel("G")}`, disabled: total <= 1, onClick: () => onStep(1), children: _jsx(Chevron, { direction: "down" }) }), _jsx("button", { type: "button", "aria-label": "Stop stepping through matches", title: "Done", onClick: onDismiss, children: _jsx(CloseGlyph, {}) })] }));
+}

package/dist/components/search/SearchLauncher.d.ts

@@ -0,0 +1,12 @@
+export interface SearchLauncherProps {
+    /** The remembered query, or "" when nothing is being searched. */
+    readonly query: string;
+    /** The honest scope, e.g. `Search 6,720 sessions across 9 agents`. */
+    readonly placeholder: string;
+    /** The key the host binds to open the sheet, as printed (`searchKeyLegend`);
+     * null prints none — the room never names a key the host does not bind. */
+    readonly shortcut: string | null;
+    readonly onOpen: () => void;
+    readonly onClear: () => void;
+}
+export declare function SearchLauncher({ query, placeholder, shortcut, onOpen, onClear }: SearchLauncherProps): import("react").JSX.Element;

package/dist/components/search/SearchLauncher.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The launcher — the door in the strip. It looks like the field it replaced
+// (same pill, same glyph, same words) and sits where DESIGN.md §10 seats the
+// file pill: centred in the drag strip, clear of the traffic lights. It does
+// not take text; pressing it grows it into the sheet. When a search is
+// active it says so in primary ink, because a filtered room should never
+// look like an unfiltered one (design record §09: the scope of a search is
+// not the reader's to guess).
+import { SearchGlyph } from "../../lib/icons.js";
+export function SearchLauncher({ query, placeholder, shortcut, onOpen, onClear }) {
+    const active = query !== "";
+    return (_jsxs("div", { className: "ah-launcher", "data-active": active || undefined, children: [_jsxs("button", { type: "button", className: "ah-launcher__open", "aria-haspopup": "dialog", "aria-label": active ? `Searching for ${query} — press to change` : placeholder, title: active ? `Searching for ${query}` : undefined, onClick: onOpen, children: [_jsx(SearchGlyph, {}), _jsx("span", { className: "ah-launcher__text", children: active ? query : placeholder }), shortcut !== null && (_jsx("kbd", { className: "ah-kbd", "aria-hidden": "true", children: shortcut }))] }), active && (_jsx("button", { type: "button", className: "ah-launcher__clear", "aria-label": "Clear the search", onClick: onClear, children: "\u00D7" }))] }));
+}

package/dist/components/search/SearchSheet.d.ts

@@ -0,0 +1,29 @@
+import type { SearchBuildProgress, SearchHit, SearchReadiness, SessionRow } from "@vibefield/rosetta-protocol";
+import type { SearchFeed } from "../../lib/hooks.js";
+import type { ProjectViewModel } from "../../lib/model.js";
+import type { SearchResultsViewModel } from "../../lib/search-results.js";
+import type { SearchFilters } from "../../lib/search-sheet.js";
+export interface SearchSheetProps {
+    readonly open: boolean;
+    readonly onClose: () => void;
+    readonly query: string;
+    readonly onQuery: (query: string) => void;
+    readonly filters: SearchFilters;
+    readonly onFilters: (filters: SearchFilters) => void;
+    readonly feed: SearchFeed;
+    readonly results: SearchResultsViewModel | null;
+    readonly readiness: SearchReadiness | null;
+    readonly progress: SearchBuildProgress | null;
+    readonly canonicalReady: boolean | null;
+    readonly ingestPaused: boolean;
+    /** Runtime families the daemon reads, for the agent chip and the scope line. */
+    readonly agentKinds: readonly string[];
+    /** The selected project, so the sheet can offer to stay inside it. */
+    readonly currentProject: ProjectViewModel | null;
+    readonly homeDirectory: string | null;
+    readonly nowMs: number;
+    readonly getRuntimeKind: (runtimeId: string) => string;
+    readonly onOpenHit: (session: SessionRow, hit: SearchHit) => void;
+}
+export declare function headDomId(sessionId: string): string;
+export declare function SearchSheet({ open, onClose, query, onQuery, filters, onFilters, feed, results, readiness, progress, canonicalReady, ingestPaused, agentKinds, currentProject, homeDirectory, nowMs, getRuntimeKind, onOpenHit, }: SearchSheetProps): import("react").JSX.Element;

package/dist/components/search/SearchSheet.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The search sheet — the door in the strip, grown into the tool it opens.
+//
+// A top-attached sheet (DESIGN.md §8's docs explorer, one level wider): the
+// field where the launcher was, a scope row that says what is being searched,
+// a list the keyboard walks, and a foot that tells the truth with numbers.
+// Radix owns what a dialog must not get wrong — the portal, the focus trap,
+// Escape, the outside press — and the input owns the cursor, APG combobox
+// style: focus never leaves the field; `aria-activedescendant` names the row.
+//
+// What lands where is `lib/search-sheet.ts`; this file only draws it.
+import * as Dialog from "@radix-ui/react-dialog";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { AgentMark, agentLabel } from "../../lib/agents.js";
+import { dayLabel } from "../../lib/format.js";
+import { sessionLastActive } from "../../lib/session-activity.js";
+import { SEARCH_LIMIT } from "../../lib/hooks.js";
+import { SearchGlyph } from "../../lib/icons.js";
+import { parseSnippet } from "../../lib/model.js";
+import { KIND_FILTER_OPTIONS, buildSheetLines, cleanSnippet, forgetQuery, hitWhen, isCursorKey, kindWord, moveCursor, moveSection, readRecentQueries, sessionCrumb, stateSentence, } from "../../lib/search-sheet.js";
+import { ActivityGlyph } from "../transcript/glyphs.js";
+import { SegmentedControl } from "../ui/index.js";
+import { hasPrimaryModifier } from "./shortcut.js";
+import { useRoom, useRoomOverlay, useRoomPortal } from "../../room-context.js";
+const LIST_ID = "ah-sheet-listbox";
+/** Who said it, drawn the way the transcript draws them: the prompt is the
+ * one filled shape, a reply wears the agent's mark, activity the ledger's
+ * glyph, and everything else a quiet dot. */
+function WhoGlyph({ kind, runtimeKind }) {
+    switch (kind) {
+        case "user":
+            return _jsx("i", { className: "ah-sheet__you" });
+        case "agent":
+            return _jsx(AgentMark, { kind: runtimeKind });
+        case "tool_use":
+            return _jsx(ActivityGlyph, {});
+        case "thinking":
+            return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: [_jsx("circle", { cx: "3.5", cy: "8", r: "1.4" }), _jsx("circle", { cx: "8", cy: "8", r: "1.4" }), _jsx("circle", { cx: "12.5", cy: "8", r: "1.4" })] }));
+        default:
+            return _jsx("i", { className: "ah-sheet__dot" });
+    }
+}
+export function headDomId(sessionId) {
+    return `ah-sheet-head-${sessionId}`;
+}
+function HeadLine({ head, runtimeKind, nowMs, }) {
+    const crumb = sessionCrumb(head.session);
+    return (_jsxs("div", { id: headDomId(head.session.id), className: "ah-sheet__head", role: "presentation", style: { "--tint": head.project.tint }, children: [_jsx("i", { "aria-hidden": "true" }), _jsxs("span", { className: "ah-sheet__crumb", children: [_jsx("b", { children: head.project.row.name }), _jsx("i", { "aria-hidden": "true", children: "\u203A" }), _jsx("span", { "data-mono": crumb.mono || undefined, title: crumb.mono ? `Native session ${head.session.native_session_id}` : crumb.text, children: crumb.text })] }), _jsx(AgentMark, { kind: runtimeKind }), _jsxs("span", { className: "ah-sheet__headmeta", children: [_jsxs("span", { children: [head.hitCount, " ", head.hitCount === 1 ? "hit" : "hits"] }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsx("span", { children: dayLabel(sessionLastActive(head.session), nowMs) })] })] }));
+}
+function OptionRow({ option, active, home, nowMs, runtimeKind, onHover, onOpen, }) {
+    const { hit, project, session } = option;
+    const parts = parseSnippet(cleanSnippet(hit.snippet, home));
+    const who = kindWord(hit.kind, agentLabel(runtimeKind));
+    const when = hitWhen(hit.at, nowMs);
+    const crumb = sessionCrumb(session);
+    const spoken = parts.map((part) => part.text).join("");
+    return (_jsxs("div", { id: option.id, role: "option", "aria-selected": active, "aria-label": `${who}: ${spoken} · ${when} · ${project.row.name} › ${crumb.text}`, className: "ah-sheet__row", onPointerMove: onHover, onClick: onOpen, children: [_jsx("span", { className: "ah-sheet__who", title: who, "aria-hidden": "true", children: _jsx(WhoGlyph, { kind: hit.kind, runtimeKind: runtimeKind }) }), _jsx("p", { className: "ah-sheet__snippet", children: parts.map((part, at) => part.mark ? _jsx("mark", { children: part.text }, at) : _jsx("span", { children: part.text }, at)) }), _jsx("span", { className: "ah-sheet__when", children: when })] }));
+}
+function Quiet({ title, children }) {
+    return (_jsxs("div", { className: "ah-sheet__quiet", role: "presentation", children: [_jsx("strong", { children: title }), _jsx("p", { children: children })] }));
+}
+const GRAMMAR_HINT = (_jsxs(_Fragment, { children: ["Every word must match. Put a phrase in quotes to match it exactly \u2014 ", _jsx("code", { children: "\"cargo test\"" }), ". Opening a result lands the transcript on that message."] }));
+export function SearchSheet({ open, onClose, query, onQuery, filters, onFilters, feed, results, readiness, progress, canonicalReady, ingestPaused, agentKinds, currentProject, homeDirectory, nowMs, getRuntimeKind, onOpenHit, }) {
+    useRoomOverlay(open);
+    const container = useRoomPortal();
+    const { storage } = useRoom();
+    const inputRef = useRef(null);
+    const { lines, options } = useMemo(() => buildSheetLines(results), [results]);
+    const emptyQuery = query.trim() === "";
+    const [recent, setRecent] = useState([]);
+    const [active, setActive] = useState(-1);
+    // A keyboard move scrolls the cursor into view; a pointer move must not,
+    // or the list would crawl under a resting mouse.
+    const movedBy = useRef("keyboard");
+    useEffect(() => {
+        if (open)
+            setRecent(readRecentQueries(storage));
+    }, [open]);
+    // New rows → the first one is the cursor, so Enter lands at once. Keyed on
+    // the rows' identities, not the array: the model is rebuilt on every clock
+    // tick, and a cursor that jumped home every thirty seconds would be a bug.
+    const walking = emptyQuery ? recent.length : options.length;
+    const rowsKey = emptyQuery ? `recent\n${recent.join("\n")}` : options.map((o) => o.id).join("\n");
+    useEffect(() => {
+        movedBy.current = "keyboard";
+        setActive(rowsKey === "" || rowsKey === "recent\n" ? -1 : 0);
+    }, [rowsKey]);
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (movedBy.current !== "keyboard" || active < 0)
+            return;
+        const id = emptyQuery ? `ah-sheet-recent-${active}` : options[active]?.id;
+        const list = listRef.current;
+        const row = id === undefined ? null : document.getElementById(id);
+        if (list === null || row === null)
+            return;
+        // The list scrolls itself; `scrollIntoView` would also nudge the sheet.
+        const frame = list.getBoundingClientRect();
+        const rect = row.getBoundingClientRect();
+        const top = rect.top - frame.top + list.scrollTop;
+        const headroom = 30; // a pinned head sits over the first rows
+        if (rect.top < frame.top + headroom)
+            list.scrollTop = top - headroom;
+        else if (rect.bottom > frame.bottom)
+            list.scrollTop = top - (list.clientHeight - rect.height) + 4;
+    }, [active, emptyQuery, options]);
+    const hover = (index) => {
+        if (index === active)
+            return;
+        movedBy.current = "pointer";
+        setActive(index);
+    };
+    // A chip is pressed with the pointer and then forgotten: the field takes
+    // focus back, so the next keystroke searches and Enter still opens a row.
+    const narrow = (next) => {
+        onFilters(next);
+        inputRef.current?.focus();
+    };
+    const onKeyDown = (event) => {
+        // ⌘↑ / ⌘↓ jump a whole session, the way VS Code's sticky separators and
+        // Raycast's sections let the keyboard past a long group.
+        if (!emptyQuery &&
+            hasPrimaryModifier(event) &&
+            (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+            if (options.length === 0)
+                return;
+            event.preventDefault();
+            movedBy.current = "keyboard";
+            const direction = event.key === "ArrowDown" ? 1 : -1;
+            setActive((current) => moveSection(current, direction, options));
+            return;
+        }
+        if (isCursorKey(event.key)) {
+            if (walking === 0)
+                return;
+            event.preventDefault();
+            movedBy.current = "keyboard";
+            const key = event.key;
+            setActive((current) => moveCursor(current, key, walking));
+            return;
+        }
+        if (event.key !== "Enter" || event.nativeEvent.isComposing)
+            return;
+        event.preventDefault();
+        if (emptyQuery) {
+            const remembered = recent[active];
+            if (remembered !== undefined)
+                onQuery(remembered);
+            return;
+        }
+        const option = options[active];
+        if (option !== undefined)
+            onOpenHit(option.session, option.hit);
+    };
+    const building = readiness !== null && readiness !== "ready";
+    const sentence = stateSentence({
+        query: feed.query,
+        error: feed.error,
+        readiness,
+        progress,
+        canonicalReady,
+        ingestPaused,
+        counts: results?.counts ?? null,
+        limit: SEARCH_LIMIT,
+    });
+    const meter = building && progress !== null && progress.documents_total > 0
+        ? `${Math.min(100, Math.max(2, (100 * progress.documents_done) / progress.documents_total)).toFixed(1)}%`
+        : building
+            ? "8%"
+            : null;
+    const scopeLine = agentKinds.length === 0 ? "your whole agentic past" : `across ${agentKinds.join(" · ")}`;
+    const activeId = emptyQuery
+        ? active >= 0 && recent[active] !== undefined
+            ? `ah-sheet-recent-${active}`
+            : undefined
+        : options[active]?.id;
+    const scopeOptions = useMemo(() => {
+        if (currentProject === null)
+            return null;
+        const tint = { "--tint": currentProject.tint };
+        return [
+            { value: "everywhere", label: "everywhere" },
+            {
+                value: "project",
+                label: (_jsxs(_Fragment, { children: [_jsx("i", { style: tint, "aria-hidden": "true" }), currentProject.row.name] })),
+                accessibleLabel: `only ${currentProject.row.name}`,
+            },
+        ];
+    }, [currentProject]);
+    let body;
+    if (emptyQuery) {
+        body = (_jsxs(_Fragment, { children: [recent.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "ah-sheet__recent-head", role: "presentation", children: "Recent searches" }), recent.map((remembered, index) => (_jsxs("div", { id: `ah-sheet-recent-${index}`, role: "option", "aria-selected": index === active, className: "ah-sheet__recent", onPointerMove: () => hover(index), onClick: () => onQuery(remembered), children: [_jsx(SearchGlyph, {}), _jsx("span", { children: remembered }), _jsx("button", { type: "button", className: "ah-sheet__forget", "aria-label": `Forget ${remembered}`, tabIndex: -1, onClick: (event) => {
+                                        event.stopPropagation();
+                                        setRecent(forgetQuery(storage, remembered));
+                                    }, children: "\u00D7" })] }, remembered)))] })), _jsx(Quiet, { title: recent.length > 0 ? "Or search for something new" : "Search your whole agentic past", children: GRAMMAR_HINT })] }));
+    }
+    else if (lines.length === 0) {
+        body = feed.error !== null ? (_jsx(Quiet, { title: "Search failed", children: feed.error })) : building && results === null ? (_jsx(Quiet, { title: canonicalReady ? "Search is still being prepared" : "History is still being imported", children: sentence })) : results !== null ? (_jsxs(Quiet, { title: "Nothing matched", children: ["No indexed message contains every word of ", _jsx("code", { children: feed.query }), ". Try fewer words, or a phrase in quotes."] })) : null;
+    }
+    else {
+        // One labelled group per session: the head names it for assistive
+        // technology, and bounding the sticky head to its group is what lets the
+        // next session's head push it away instead of painting over it.
+        const groups = [];
+        for (const line of lines) {
+            if (line.type === "head")
+                groups.push({ head: line, rows: [] });
+            else
+                groups[groups.length - 1]?.rows.push(line);
+        }
+        body = groups.map(({ head, rows }) => (_jsxs("div", { role: "group", "aria-labelledby": headDomId(head.session.id), className: "ah-sheet__group", children: [_jsx(HeadLine, { head: head, runtimeKind: getRuntimeKind(head.session.runtime_id), nowMs: nowMs }), rows.map((line) => (_jsx(OptionRow, { option: line, active: line.index === active, home: homeDirectory, nowMs: nowMs, runtimeKind: getRuntimeKind(line.session.runtime_id), onHover: () => hover(line.index), onOpen: () => onOpenHit(line.session, line.hit) }, line.key)))] }, head.key)));
+    }
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: (next) => {
+            if (!next)
+                onClose();
+        }, children: _jsxs(Dialog.Portal, { container: container, children: [_jsx(Dialog.Overlay, { className: "ah-layer ah-sheet__backdrop", "data-ah-sheet": "" }), _jsxs(Dialog.Content, { className: "ah-layer ah-sheet", "aria-describedby": undefined, onOpenAutoFocus: (event) => {
+                        // The field takes focus with its remembered text selected, so
+                        // typing replaces the last search and the arrows edit it.
+                        event.preventDefault();
+                        const input = inputRef.current;
+                        input?.focus();
+                        input?.select();
+                    }, children: [_jsx(Dialog.Title, { className: "ah-visually-hidden", children: "Search your whole agentic past" }), _jsxs("div", { className: "ah-sheet__field", children: [_jsx(SearchGlyph, {}), _jsx("input", { ref: inputRef, type: "text", enterKeyHint: "search", role: "combobox", "aria-expanded": "true", "aria-controls": LIST_ID, "aria-activedescendant": activeId, "aria-autocomplete": "list", "aria-label": "Search your whole agentic past", placeholder: "Search your whole agentic past", autoComplete: "off", spellCheck: false, value: query, onChange: (event) => onQuery(event.target.value), onKeyDown: onKeyDown }), query !== "" && (_jsx("button", { type: "button", className: "ah-sheet__clear", "aria-label": "Clear the search", onClick: () => {
+                                        onQuery("");
+                                        inputRef.current?.focus();
+                                    }, children: "\u00D7" })), _jsx("kbd", { className: "ah-kbd", "aria-hidden": "true", children: "esc" })] }), _jsxs("div", { className: "ah-sheet__scope", children: [scopeOptions !== null && (_jsx(SegmentedControl, { value: filters.scope, options: scopeOptions, accessibleLabel: "Where to search", onValueChange: (scope) => narrow({ ...filters, scope }) })), _jsx(SegmentedControl, { value: filters.kind, options: KIND_FILTER_OPTIONS, accessibleLabel: "Which kind of message", onValueChange: (kind) => narrow({ ...filters, kind }) }), agentKinds.length > 1 && (_jsxs("select", { className: "ah-chipselect", "data-set": filters.agent !== null || undefined, "aria-label": "Which agent", value: filters.agent ?? "", onChange: (event) => narrow({
+                                        ...filters,
+                                        agent: event.target.value === "" ? null : event.target.value,
+                                    }), children: [_jsx("option", { value: "", children: "any agent" }), agentKinds.map((kind) => (_jsx("option", { value: kind, children: agentLabel(kind) }, kind)))] }))] }), _jsx("div", { ref: listRef, className: "ah-sheet__list", id: LIST_ID, role: "listbox", "aria-label": emptyQuery ? "Recent searches" : "Search results", "data-stale": feed.searching && results !== null ? "" : undefined, children: body }), _jsxs("div", { className: "ah-sheet__foot", children: [meter !== null && (_jsx("div", { className: "ah-meter", "aria-hidden": "true", children: _jsx("i", { style: { width: meter } }) })), _jsx("span", { className: "ah-sheet__count", role: "status", "aria-live": "polite", "data-tone": feed.error !== null ? "warn" : undefined, children: feed.searching && results === null && !emptyQuery ? "searching…" : sentence }), _jsx("span", { className: "ah-sheet__scopeline", title: scopeLine, children: scopeLine }), _jsxs("span", { className: "ah-sheet__keys", "aria-hidden": "true", children: [_jsxs("span", { children: [_jsx("kbd", { className: "ah-kbd", children: "\u2191\u2193" }), " move"] }), _jsxs("span", { children: [_jsx("kbd", { className: "ah-kbd", children: "\u21B5" }), " open"] }), _jsxs("span", { children: [_jsx("kbd", { className: "ah-kbd", children: "esc" }), " close"] })] })] })] })] }) }));
+}

package/dist/components/search/index.d.ts

@@ -0,0 +1,8 @@
+export { SearchSheet } from "./SearchSheet.js";
+export type { SearchSheetProps } from "./SearchSheet.js";
+export { SearchLauncher } from "./SearchLauncher.js";
+export type { SearchLauncherProps } from "./SearchLauncher.js";
+export { MatchStepper } from "./MatchStepper.js";
+export type { MatchStepperProps } from "./MatchStepper.js";
+export { emptyTranscriptPrompt, hasPrimaryModifier, searchKeyLegend, shortcutLabel } from "./shortcut.js";
+export type { SearchShortcut } from "./shortcut.js";

package/dist/components/search/index.js

@@ -0,0 +1,4 @@
+export { SearchSheet } from "./SearchSheet.js";
+export { SearchLauncher } from "./SearchLauncher.js";
+export { MatchStepper } from "./MatchStepper.js";
+export { emptyTranscriptPrompt, hasPrimaryModifier, searchKeyLegend, shortcutLabel } from "./shortcut.js";

package/dist/components/search/shortcut.d.ts

@@ -0,0 +1,25 @@
+/** `⌘K` on a Mac, `Ctrl K` elsewhere — the label follows the modifier the
+ * handler actually listens for. */
+export declare function isMacPlatform(): boolean;
+export declare function shortcutLabel(key: string, shift?: boolean): string;
+/** The primary modifier of a keyboard event on this platform. */
+export declare function hasPrimaryModifier(event: KeyboardEvent | {
+    metaKey: boolean;
+    ctrlKey: boolean;
+}): boolean;
+/** What a host says about the key that opens its search sheet (RO-14). The
+ * room binds no key of its own — the host's window does (rosetta's app binds
+ * ⌘K) — so the room prints only what the host says it binds: undefined, the
+ * room's own label for ⌘K (`shortcutLabel("K")`); a label, that label; null,
+ * no key at all. */
+export type SearchShortcut = {
+    readonly label: string;
+} | null | undefined;
+/** The legend the launcher prints, or null for none: no search, or a host
+ * that binds no key. */
+export declare function searchKeyLegend(search: {
+    readonly shortcut?: SearchShortcut;
+} | null): string | null;
+/** The empty transcript's own sentence: it names a key only when the
+ * launcher prints one, so it never names a key the host does not bind. */
+export declare function emptyTranscriptPrompt(legend: string | null): string;

package/dist/components/search/shortcut.js

@@ -0,0 +1,32 @@
+/** `⌘K` on a Mac, `Ctrl K` elsewhere — the label follows the modifier the
+ * handler actually listens for. */
+export function isMacPlatform() {
+    if (typeof navigator === "undefined")
+        return true;
+    return /Mac|iPhone|iPad/.test(navigator.platform) || /Mac/.test(navigator.userAgent);
+}
+export function shortcutLabel(key, shift = false) {
+    const mac = isMacPlatform();
+    const parts = [mac ? "⌘" : "Ctrl", shift ? (mac ? "⇧" : "Shift") : null, key].filter((part) => part !== null);
+    return mac ? parts.join("") : parts.join(" ");
+}
+/** The primary modifier of a keyboard event on this platform. */
+export function hasPrimaryModifier(event) {
+    return isMacPlatform() ? event.metaKey : event.ctrlKey;
+}
+/** The legend the launcher prints, or null for none: no search, or a host
+ * that binds no key. */
+export function searchKeyLegend(search) {
+    if (search === null)
+        return null;
+    if (search.shortcut === undefined)
+        return shortcutLabel("K");
+    return search.shortcut === null ? null : search.shortcut.label;
+}
+/** The empty transcript's own sentence: it names a key only when the
+ * launcher prints one, so it never names a key the host does not bind. */
+export function emptyTranscriptPrompt(legend) {
+    return legend === null
+        ? "Pick a session."
+        : `Pick a session — or press ${legend} to search, which is the front door.`;
+}