@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/components/HostMenu.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A host's menu (`RoomMenu`), drawn as the room's popover rows from the
+// control that opens it: a head's act (R5), ③'s folder (R6), a list's chip
+// (R7), a row's act. The rows are the host's; their faces — the check, the
+// mark, the second line, the group heads, the filter past a count, a row's
+// own act — are the room's.
+//
+// The rows are drawn ABOVE the columns, in the room's root (`MenuLayer`):
+// every column clips what overflows it, so rows hung inside one lost whichever
+// edge crossed it. Anchored to their control, they flip above it when there
+// is more room there, and they are clamped inside the room's box.
+//
+// While it is open it listens for a press outside, for Escape, and for the
+// window's resize and scroll (to stay on its control); the arrow keys walk its
+// rows. It binds nothing while it is closed. Opened by a key, the chosen row
+// takes focus and wears the ring; opened by a pointer, the rows take focus
+// without a ring until a key moves in them.
+import { createContext, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+const CHECK = (_jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m3.5 8.5 3 3 6-7" }) }));
+/** The room's root, where its menus are drawn over every column. Absent (a
+ * part mounted outside a room), a menu hangs from its control as before. */
+const MenuLayerContext = createContext(null);
+export const MenuLayerProvider = MenuLayerContext.Provider;
+/** The edge the rows keep from the room's box, and from their control. */
+const MENU_MARGIN = 8;
+const MENU_GAP = 6;
+/** The rows' widest, wherever they open: a path past it ellipsizes. */
+const MENU_MAX_WIDTH = 360;
+/**
+ * Where the rows go, in the box's own coordinates: under their control
+ * (or over it, when there is more room there and not enough below), from the
+ * control's start or end edge, and never past the box's edges less a margin.
+ */
+export function placeMenu(control, box, menu, align) {
+    const boxWidth = box.right - box.left;
+    const boxHeight = box.bottom - box.top;
+    const width = Math.max(0, Math.min(menu.width, boxWidth - 2 * MENU_MARGIN));
+    const start = control.left - box.left;
+    const end = control.right - box.left;
+    const wanted = align === "end" ? end - width : start;
+    const left = Math.max(MENU_MARGIN, Math.min(boxWidth - MENU_MARGIN - width, wanted));
+    const below = boxHeight - MENU_MARGIN - (control.bottom - box.top + MENU_GAP);
+    const above = control.top - box.top - MENU_GAP - MENU_MARGIN;
+    const side = menu.height <= below || below >= above ? "below" : "above";
+    const room = Math.max(0, side === "below" ? below : above);
+    const height = Math.min(menu.height, room);
+    const top = side === "below" ? control.bottom - box.top + MENU_GAP : control.top - box.top - MENU_GAP - height;
+    return { left, top, width, room, side };
+}
+/** A control that opens the host's rows. */
+export function HostMenuButton({ menu, className, label, title, disabled, data, align = "start", children }) {
+    const [open, setOpen] = useState(null);
+    const rootRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    // A press that starts with a pointer opens without a ring; a key does not
+    // send a pointer first.
+    const pointerPress = useRef(false);
+    const layer = useContext(MenuLayerContext);
+    const id = useId();
+    useEffect(() => {
+        if (open === null)
+            return;
+        const pointerDown = (event) => {
+            const target = event.target;
+            if (rootRef.current?.contains(target) || menuRef.current?.contains(target))
+                return;
+            setOpen(null);
+        };
+        const keyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            setOpen(null);
+            triggerRef.current?.focus();
+        };
+        document.addEventListener("pointerdown", pointerDown);
+        document.addEventListener("keydown", keyDown);
+        return () => {
+            document.removeEventListener("pointerdown", pointerDown);
+            document.removeEventListener("keydown", keyDown);
+        };
+    }, [open]);
+    const rows = open === null ? null : (_jsx(HostMenuRows, { id: id, menu: menu, align: align, opened: open, control: triggerRef, layer: layer, menuRef: menuRef, onChosen: () => {
+            setOpen(null);
+            triggerRef.current?.focus();
+        } }));
+    return (_jsxs("span", { className: "ah-menuhost", ref: rootRef, children: [_jsx("button", { ref: triggerRef, type: "button", className: className, title: title, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open !== null, "aria-controls": open !== null ? id : undefined, disabled: disabled === true, ...data, onPointerDown: () => {
+                    pointerPress.current = true;
+                }, onClick: () => {
+                    const by = pointerPress.current ? "pointer" : "key";
+                    pointerPress.current = false;
+                    setOpen((current) => (current === null ? by : null));
+                }, children: children }), rows !== null && (layer === null ? rows : createPortal(rows, layer))] }));
+}
+function matches(item, term) {
+    return item.filterText === undefined || item.filterText.toLowerCase().includes(term);
+}
+function rectOf(element) {
+    const rect = element.getBoundingClientRect();
+    return { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom };
+}
+function HostMenuRows({ id, menu, align, opened, control, layer, menuRef, onChosen, }) {
+    const [filter, setFilter] = useState("");
+    const listRef = useRef(null);
+    const filterRef = useRef(null);
+    const total = menu.groups.reduce((count, group) => count + group.items.length, 0);
+    const filtering = menu.filterAfter !== undefined && total > menu.filterAfter;
+    const term = filter.trim().toLowerCase();
+    const groups = !filtering || term === ""
+        ? menu.groups
+        : menu.groups
+            .map((group) => ({ ...group, items: group.items.filter((item) => matches(item, term)) }))
+            .filter((group) => group.items.length > 0);
+    const radio = menu.groups.some((group) => group.items.some((item) => item.checked !== undefined));
+    const rows = () => [...(listRef.current?.querySelectorAll(".ah-menu__item:not(:disabled)") ?? [])];
+    // Placed in the room's box, before the first paint and whenever the window
+    // moves under it. Measured at its natural size, then held to the room it has.
+    useLayoutEffect(() => {
+        const element = menuRef.current;
+        if (layer === null || element === null)
+            return;
+        const place = () => {
+            const anchor = control.current;
+            if (anchor === null)
+                return;
+            const box = layer.getBoundingClientRect();
+            // a box drawn scaled (a host's recede) is measured in its own pixels
+            const scale = layer.offsetWidth > 0 ? box.width / layer.offsetWidth : 1;
+            const within = (rect) => ({
+                left: (rect.left - box.left) / scale,
+                top: (rect.top - box.top) / scale,
+                right: (rect.right - box.left) / scale,
+                bottom: (rect.bottom - box.top) / scale,
+            });
+            const frame = within(rectOf(layer));
+            element.style.maxHeight = "";
+            element.style.maxWidth = `${Math.max(0, Math.min(MENU_MAX_WIDTH, frame.right - frame.left - 2 * MENU_MARGIN))}px`;
+            const placed = placeMenu(within(rectOf(anchor)), frame, { width: element.offsetWidth, height: element.offsetHeight }, align);
+            element.style.left = `${placed.left}px`;
+            element.style.top = `${placed.top}px`;
+            element.style.maxHeight = `${placed.room}px`;
+            element.dataset.side = placed.side;
+        };
+        place();
+        window.addEventListener("resize", place);
+        window.addEventListener("scroll", place, true);
+        return () => {
+            window.removeEventListener("resize", place);
+            window.removeEventListener("scroll", place, true);
+        };
+    }, [layer, control, menuRef, align, groups.length, filtering]);
+    // Opening lands on the filter; else, by a key, on the chosen row (which
+    // wears the ring), and by a pointer on the rows themselves (no ring).
+    useLayoutEffect(() => {
+        if (filtering) {
+            filterRef.current?.focus();
+            return;
+        }
+        if (opened === "pointer") {
+            listRef.current?.focus();
+            return;
+        }
+        const all = rows();
+        (all.find((row) => row.getAttribute("aria-checked") === "true") ?? all[0])?.focus();
+        // once, on open
+    }, []);
+    const walk = (event) => {
+        const target = event.target;
+        // A row's own act is beside it: → reaches it, ← comes back.
+        if (event.key === "ArrowRight" && target.classList.contains("ah-menu__item")) {
+            const act = target.parentElement?.querySelector(":scope > .ah-menu__act:not(:disabled)");
+            if (act) {
+                event.preventDefault();
+                act.focus();
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft" && target.classList.contains("ah-menu__act")) {
+            event.preventDefault();
+            target.parentElement?.querySelector(":scope > .ah-menu__item")?.focus();
+            return;
+        }
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
+            return;
+        const all = rows();
+        if (all.length === 0)
+            return;
+        event.preventDefault();
+        const from = target.classList.contains("ah-menu__act")
+            ? target.parentElement?.querySelector(":scope > .ah-menu__item") ?? null
+            : target;
+        const at = all.indexOf(from);
+        const next = event.key === "Home" ? 0
+            : event.key === "End" ? all.length - 1
+                : event.key === "ArrowDown" ? (at + 1) % all.length
+                    : at <= 0 ? all.length - 1 : at - 1;
+        all[next]?.focus();
+    };
+    const item = (row) => {
+        const choice = (_jsxs("button", { type: "button", className: "ah-menu__item", role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? row.checked === true : undefined, "data-depth": row.depth === 1 ? "1" : undefined, "data-key": row.key, disabled: row.disabled === true, tabIndex: -1, onClick: () => {
+                row.onSelect?.();
+                onChosen();
+            }, children: [_jsx("span", { className: "ah-menu__check", children: row.checked === true ? CHECK : null }), row.mark !== undefined && _jsx("span", { className: "ah-menu__mark", children: row.mark }), _jsxs("span", { className: "ah-menu__body", children: [_jsx("span", { className: "ah-menu__label", children: row.label }), row.detail !== undefined && _jsx("span", { className: "ah-menu__detail", children: row.detail })] }), row.aside !== undefined && _jsx("span", { className: "ah-menu__aside", children: row.aside })] }, row.key));
+        const act = row.act;
+        if (act === undefined)
+            return choice;
+        // A row with its own act holds two buttons side by side, never one in another.
+        return (_jsxs("div", { className: "ah-menu__row", role: "none", "data-key": row.key, children: [choice, _jsx("button", { type: "button", className: "ah-menu__act", role: "menuitem", "data-act": act.key, title: act.label, "aria-label": act.label, disabled: act.disabled === true, tabIndex: -1, onClick: () => {
+                        act.onPress?.();
+                        onChosen();
+                    }, children: act.content })] }, row.key));
+    };
+    return (_jsxs("div", { className: "ah-menu", ref: menuRef, "data-align": align, "data-layer": layer === null ? undefined : "", onKeyDown: walk, children: [filtering && (_jsx("input", { ref: filterRef, className: "ah-menu__filter", type: "search", value: filter, placeholder: menu.filterPlaceholder ?? "Filter", "aria-label": menu.filterPlaceholder ?? "Filter", "aria-controls": id, onChange: (event) => setFilter(event.currentTarget.value) })), _jsxs("div", { className: "ah-menu__list", id: id, role: "menu", "aria-label": menu.label, ref: listRef, tabIndex: -1, children: [groups.map((group) => (_jsxs("div", { className: "ah-menu__group", role: "group", children: [group.title !== undefined && _jsx("div", { className: "ah-menu__title", children: group.title }), group.items.map(item)] }, group.key))), groups.length === 0 && _jsx("p", { className: "ah-menu__empty", children: menu.empty ?? "Nothing to choose" })] })] }));
+}

package/dist/components/IngestStatus.d.ts

@@ -0,0 +1,4 @@
+import type { IngestActivity } from "../lib/ingest-activity.js";
+export declare function IngestStatus({ activity }: {
+    readonly activity: IngestActivity | null;
+}): import("react").JSX.Element | null;

package/dist/components/IngestStatus.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { AgentMark, agentLabel } from "../lib/agents.js";
+import { runtimeActivity } from "../lib/ingest-activity.js";
+function ProgressMeter({ value, label, paused = false }) {
+    return _jsx("div", { className: "ah-ingest-meter", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value === null ? undefined : Math.floor(value * 100), "data-indeterminate": value === null ? "" : undefined, "data-paused": paused ? "" : undefined, children: _jsx("i", { style: value === null ? undefined : { width: `${value * 100}%` } }) });
+}
+export function IngestStatus({ activity }) {
+    const titleId = useId();
+    if (!activity)
+        return null;
+    const { phase, feed, footer, elapsed } = activity;
+    const interrupted = feed.connectionError !== null;
+    const ready = phase.key === "ready";
+    const paused = interrupted || !phase.active;
+    return (_jsxs("section", { className: "ah-ingest-status", "aria-labelledby": titleId, "data-state": interrupted ? "disconnected" : ready ? "complete" : phase.key, children: [_jsxs("div", { className: "ah-ingest-status__eyebrow", children: [_jsx("span", { children: ready ? "ALL SET" : "IMPORTING HISTORY" }), _jsx("span", { children: ready ? "✓" : `Step ${phase.step} of 4` })] }), _jsx("h3", { id: titleId, "aria-live": "polite", "aria-atomic": "true", children: interrupted ? "Progress updates paused" : phase.title }), _jsx("p", { className: "ah-ingest-status__detail", children: interrupted ? "Waiting for the background service. Reconnecting automatically…" : phase.detail }), _jsxs("div", { className: "ah-ingest-status__amount", children: [_jsx("span", { children: phase.amount }), phase.fraction !== null && !ready && _jsxs("b", { children: [Math.floor(phase.fraction * 100), "%"] })] }), _jsx(ProgressMeter, { value: phase.fraction, label: phase.title, paused: paused }, phase.key), _jsxs("div", { className: "ah-ingest-status__footer", children: [_jsx("span", { title: feed.connectionError ?? (footer.includes("No new") ? "The service is connected; its work counters have not changed." : undefined), children: footer }), _jsx("span", { children: elapsed })] }), !ready && (feed.ingest?.runtimes.length ?? 0) > 0 && _jsxs("details", { className: "ah-ingest-status__agents", children: [_jsxs("summary", { children: ["Agent details ", _jsx("span", { "aria-hidden": "true", children: "\u2304" })] }), _jsx("ul", { children: feed.ingest?.runtimes.map((runtime) => {
+                            const status = runtimeActivity(runtime, feed.ingest?.phase === "restoring");
+                            return _jsxs("li", { children: [_jsx(AgentMark, { kind: runtime.kind }), _jsxs("div", { children: [_jsxs("div", { className: "ah-ingest-status__agent-name", children: [_jsx("strong", { children: agentLabel(runtime.kind) }), runtime.state === "done" && _jsx("span", { "aria-label": "Ready to browse", children: "\u2713" })] }), _jsx("span", { className: "ah-ingest-status__agent-caption", children: status.label }), runtime.state !== "done" && _jsx(ProgressMeter, { value: status.fraction, label: `${agentLabel(runtime.kind)}: ${status.label}`, paused: paused || runtime.state === "queued" })] })] }, runtime.kind);
+                        }) })] })] }));
+}

package/dist/components/ListActivityNotice.d.ts

@@ -0,0 +1,5 @@
+export declare function ListActivityNotice({ pending, onShow, noun }: {
+    readonly pending: boolean;
+    readonly onShow: () => void;
+    readonly noun: "projects" | "sessions";
+}): import("react").JSX.Element;

package/dist/components/ListActivityNotice.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function ListActivityNotice({ pending, onShow, noun }) {
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "ah-list-update-status", role: "status", children: pending ? `New activity is available in ${noun}.` : "" }), _jsx("button", { type: "button", className: "ah-newpill ah-list-updates", "data-list-updates": "", "data-visible": pending ? "" : undefined, hidden: !pending, onClick: onShow, children: "Show recent activity" })] }));
+}

package/dist/components/ListSections.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+import type { ArrangedSection } from "../lib/sections.js";
+/** A section's head: the list's own break, in the host's words. */
+export declare function SectionHead({ sectionKey, children }: {
+    readonly sectionKey: string;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** A folded section's line: the host's words, the count, and the act that
+ * opens it. Open, the line stays as the section's head and closes it again. */
+export declare function FoldLine<T>({ arranged, open, onToggle, }: {
+    readonly arranged: ArrangedSection<T>;
+    readonly open: boolean;
+    readonly onToggle: () => void;
+}): import("react").JSX.Element;
+/** Which folded sections are open. Each starts folded; one holding the
+ * selected row opens, and after that the reader's press decides. */
+export declare function useOpenFolds<T>(arranged: readonly ArrangedSection<T>[] | null, idOf: (row: T) => string, selectedId: string | null): {
+    readonly isOpen: (key: string) => boolean;
+    readonly toggle: (key: string) => void;
+};

package/dist/components/ListSections.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A host's sections, drawn (R3): a head over each run, in the list's own day
+// face, and a foot section folded into one line that opens in place. The
+// rows themselves are the list's; this draws only what sits between them.
+import { useCallback, useEffect, useState } from "react";
+import { foldCount } from "../lib/sections.js";
+/** A section's head: the list's own break, in the host's words. */
+export function SectionHead({ sectionKey, children }) {
+    return (_jsx("div", { className: "ah-day ah-section", "data-section": sectionKey, children: children }));
+}
+/** A folded section's line: the host's words, the count, and the act that
+ * opens it. Open, the line stays as the section's head and closes it again. */
+export function FoldLine({ arranged, open, onToggle, }) {
+    const fold = arranged.section.fold;
+    return (_jsxs("button", { type: "button", className: "ah-fold", "data-section": arranged.section.key, "aria-expanded": open, onClick: onToggle, children: [_jsx("span", { className: "ah-fold__label", children: fold.label }), _jsx("span", { className: "ah-fold__count tnum", children: foldCount(arranged) }), !open && _jsx("span", { className: "ah-fold__act", children: fold.act })] }));
+}
+/** Which folded sections are open. Each starts folded; one holding the
+ * selected row opens, and after that the reader's press decides. */
+export function useOpenFolds(arranged, idOf, selectedId) {
+    const [opened, setOpened] = useState(() => new Set());
+    const holding = selectedId === null || arranged === null
+        ? null
+        : (arranged.find((entry) => entry.section.fold !== undefined && entry.rows.some((row) => idOf(row) === selectedId))
+            ?.section.key ?? null);
+    useEffect(() => {
+        if (holding === null)
+            return;
+        setOpened((current) => (current.has(holding) ? current : new Set([...current, holding])));
+    }, [holding, selectedId]);
+    const toggle = useCallback((key) => {
+        setOpened((current) => {
+            const next = new Set(current);
+            if (!next.delete(key))
+                next.add(key);
+            return next;
+        });
+    }, []);
+    return { isOpen: (key) => opened.has(key), toggle };
+}

package/dist/components/RenameHeading.d.ts

@@ -0,0 +1,9 @@
+import type { RoomRename } from "../host-inputs.js";
+export interface RenameHeadingProps {
+    readonly name: string;
+    readonly tint: string | null;
+    readonly count: number | null;
+    readonly countTitle?: string | undefined;
+    readonly rename: RoomRename;
+}
+export declare function RenameHeading({ name, tint, count, countTitle, rename }: RenameHeadingProps): import("react").JSX.Element;

package/dist/components/RenameHeading.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ②'s head with a host's rename (H4): the project's name is the control.
+// Pressed, it becomes a field holding the name; Enter commits, Escape — or
+// leaving the field — cancels, and a host that refuses says why right there,
+// in its own words, with the field still open. Until the host's catalog
+// brings the new name, the head names the project as the host last said.
+import { useEffect, useRef, useState } from "react";
+function failureWords(cause) {
+    const words = cause instanceof Error ? cause.message : typeof cause === "string" ? cause : "";
+    return words === "" ? "Could not rename" : `Could not rename — ${words}`;
+}
+export function RenameHeading({ name, tint, count, countTitle, rename }) {
+    const [edit, setEdit] = useState({ kind: "idle" });
+    const fieldRef = useRef(null);
+    const nameRef = useRef(null);
+    const label = rename.label ?? "Rename";
+    const alive = useRef(true);
+    useEffect(() => () => {
+        alive.current = false;
+    }, []);
+    const editing = edit.kind !== "idle";
+    useEffect(() => {
+        if (edit.kind !== "editing")
+            return;
+        fieldRef.current?.focus();
+    }, [edit.kind]);
+    const close = (refocus) => {
+        setEdit({ kind: "idle" });
+        if (refocus)
+            queueMicrotask(() => nameRef.current?.focus());
+    };
+    const commit = (draft) => {
+        const next = draft.trim();
+        if (next === "" || next === name) {
+            close(true);
+            return;
+        }
+        setEdit({ kind: "saving", draft });
+        let answer;
+        try {
+            answer = rename.onRename(next);
+        }
+        catch (cause) {
+            setEdit({ kind: "editing", draft, failure: failureWords(cause) });
+            return;
+        }
+        Promise.resolve(answer).then(() => {
+            if (alive.current)
+                close(true);
+        }, (cause) => {
+            if (alive.current)
+                setEdit({ kind: "editing", draft, failure: failureWords(cause) });
+        });
+    };
+    return (_jsxs("div", { className: "ah-colhead", "data-rename": editing ? edit.kind : "", children: [_jsx("i", { style: tint !== null ? { "--tint": tint } : undefined }), !editing ? (_jsx("button", { ref: nameRef, type: "button", className: "ah-rename", title: `${label} · ${name}`, "aria-label": `${label}: ${name}`, onClick: () => setEdit({ kind: "editing", draft: name, failure: null }), children: name })) : (_jsx("input", { ref: fieldRef, className: "ah-rename__field", value: edit.draft, "aria-label": label, "aria-invalid": edit.kind === "editing" && edit.failure !== null ? true : undefined, "aria-busy": edit.kind === "saving" ? true : undefined, readOnly: edit.kind === "saving", onFocus: (event) => event.currentTarget.select(), onChange: (event) => {
+                    const draft = event.currentTarget.value;
+                    setEdit((current) => (current.kind === "editing" ? { ...current, draft, failure: null } : current));
+                }, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if (edit.kind === "editing")
+                            commit(edit.draft);
+                    }
+                    else if (event.key === "Escape") {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        if (edit.kind === "editing")
+                            close(true);
+                    }
+                }, onBlur: () => {
+                    if (edit.kind === "editing")
+                        close(false);
+                } })), edit.kind === "editing" && edit.failure !== null ? (_jsx("span", { className: "ah-rename__failure", role: "alert", children: edit.failure })) : (count !== null && (_jsx("span", { className: "ah-bubble", title: countTitle, children: count })))] }));
+}

package/dist/components/SearchStrip.d.ts

@@ -0,0 +1,5 @@
+export declare function SearchStrip({ query, onQuery, scope, }: {
+    query: string;
+    onQuery: (q: string) => void;
+    scope: string;
+}): import("react").JSX.Element;

package/dist/components/SearchStrip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The room-level search strip: a line across the head of the room, never a
+// modal. The scope sentence names the vendors actually indexed (§9 — the
+// scope of a search is not the user's to guess).
+import { SearchGlyph } from "../lib/icons.js";
+export function SearchStrip({ query, onQuery, scope, }) {
+    return (_jsxs("div", { className: "ah-searchbar", children: [_jsxs("div", { className: "ah-search", children: [_jsx(SearchGlyph, {}), _jsx("input", { type: "search", value: query, placeholder: "Search your whole agentic past", "aria-label": "Search your whole agentic past", autoComplete: "off", spellCheck: false, onChange: (e) => onQuery(e.target.value) }), query !== "" && (_jsx("button", { type: "button", "aria-label": "Clear search", onClick: () => onQuery(""), children: "\u00D7" }))] }), _jsx("p", { className: "ah-scope", children: scope })] }));
+}

package/dist/components/SummaryMetrics.d.ts

@@ -0,0 +1,13 @@
+import type { Spend } from "../lib/spend.js";
+interface SummaryMetricsProps {
+    readonly sessionCount: number;
+    readonly messageCount: number;
+    readonly tokenCount: number;
+    readonly spend: Spend;
+    readonly pending: boolean;
+    /** Counts are lifetime totals; tokens and spend use this panel's window. */
+    readonly period: string;
+}
+/** Portfolio and project summaries use one row and one value renderer. */
+export declare function SummaryMetrics({ sessionCount, messageCount, tokenCount, spend, pending, period, }: SummaryMetricsProps): import("react").JSX.Element;
+export {};

package/dist/components/SummaryMetrics.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tokenText } from "../lib/format.js";
+import { coverage, spendDescription } from "../lib/spend.js";
+import { SummaryMetric } from "./ui/SummaryMetric.js";
+/** Portfolio and project summaries use one row and one value renderer. */
+export function SummaryMetrics({ sessionCount, messageCount, tokenCount, spend, pending, period, }) {
+    const state = coverage(spend);
+    return (_jsxs("div", { className: "ah-stats", children: [_jsx(SummaryMetric, { label: "sessions", value: sessionCount, unknown: pending && sessionCount === 0, title: `${sessionCount.toLocaleString()} sessions · all time` }), _jsx(SummaryMetric, { label: "messages", value: messageCount, unknown: pending && messageCount === 0, title: `${messageCount.toLocaleString()} messages · all time` }), _jsx(SummaryMetric, { label: "tokens", value: tokenCount, unknown: pending && tokenCount === 0, title: `${tokenCount.toLocaleString()} tokens · ${period}` }), _jsx(SummaryMetric, { label: "estimated cost", value: spend.costMicroUsd, unit: "usd", estimated: true, lowerBound: state === "partial", emptyValue: state === "unavailable" ? "n/p" : "—", unknown: pending && tokenCount === 0, title: `Estimated cost · ${spendDescription(spend, tokenText)}${state === "partial" ? " · lower bound" : ""} · ${period}` })] }));
+}

package/dist/components/SummaryPanels.d.ts

@@ -0,0 +1,35 @@
+import type { UsageResponse } from "@vibefield/rosetta-protocol";
+import type { ProjectViewModel } from "../lib/model.js";
+import type { RoomAct } from "../host-inputs.js";
+export interface ProjectSummaryPanelProps {
+    readonly project: ProjectViewModel;
+    readonly visibleSessionCount: number;
+    readonly usage: UsageResponse | null;
+    readonly activityGridStartTimestamp: number;
+    readonly currentTimestamp: number;
+    /** A backfill is running: figures for an unfinished project stay veiled.
+     * Once the phase is live a veil never descends again. */
+    readonly ingestActive: boolean;
+    /** The census itself is still running: the counts below this panel are
+     * incomplete, so its veil defers to the column's census veil instead of
+     * stacking a near-duplicate counting label on top of it. */
+    readonly censusRunning: boolean;
+    /** `null` means the browser build has no desktop worktree integration. */
+    readonly isWorktreeVisible: boolean | null;
+    readonly onToggleWorktree: () => void;
+    /** R5: the host's acts, after the head's own (New agent, the primary, last). */
+    readonly hostActs?: readonly RoomAct[] | null | undefined;
+}
+export declare function ProjectSummaryPanel({ project, visibleSessionCount, usage, activityGridStartTimestamp, currentTimestamp, ingestActive, censusRunning, isWorktreeVisible, onToggleWorktree, hostActs, }: ProjectSummaryPanelProps): import("react").JSX.Element;
+export interface PortfolioSummaryPanelProps {
+    readonly projects: readonly ProjectViewModel[];
+    readonly selectedProjectId: string | null;
+    /** A backfill is running: the portfolio's totals are still counting, so
+     * the whole panel stays veiled. It unveils last — the finale. */
+    readonly ingestActive: boolean;
+    /** The census is still naming sessions: defer to the column's census veil
+     * rather than stacking a second counting label above it. */
+    readonly censusRunning: boolean;
+    readonly onProjectSelect: (projectId: string) => void;
+}
+export declare function PortfolioSummaryPanel({ projects, selectedProjectId, ingestActive, censusRunning, onProjectSelect, }: PortfolioSummaryPanelProps): import("react").JSX.Element;

package/dist/components/SummaryPanels.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Project and portfolio summary panels decompose the ledger's totals at two
+// levels. The project panel heads column ②; the portfolio panel heads column
+// ①. Every chart derives from the same series as the ledger, so their figures
+// cannot disagree. When collapsed, each panel becomes its column header.
+import { useEffect, useMemo, useState } from "react";
+import { CalendarHeatmap, ProjectChartDialog, Streamgraph, Treemap } from "./charts/index.js";
+import { ColumnHeading, SegmentedControl, Veil } from "./ui/index.js";
+import { SummaryMetrics } from "./SummaryMetrics.js";
+import { calculateActivityStats, createCalendarHeatmapData, createModelUsageStreamgraphData, } from "../lib/chart-data.js";
+import { tokenText } from "../lib/format.js";
+import { createModelColors } from "../lib/model-labels.js";
+import { FullscreenGlyph, GitHubGlyph, StatsGlyph, TreeGlyph } from "../lib/icons.js";
+import { getCalendarDayKey, getViewerUtcOffsetMinutes } from "../lib/model.js";
+import { NO_SPEND, addSpend, coverage, usdText } from "../lib/spend.js";
+import { useRoom } from "../room-context.js";
+import { useHostInputs } from "../host-inputs.js";
+import { HostAct } from "./HostAct.js";
+import { RenameHeading } from "./RenameHeading.js";
+const MAX_TREEMAP_PROJECT_COUNT = 10;
+// Matches the project chart's 25px selector track, 9px gap, and 106px chart body.
+const SUMMARY_CHART_CONTENT_HEIGHT = 140;
+const PROJECT_CHART_OPTIONS = [
+    { value: "activity", label: "Overview" },
+    { value: "models", label: "Models" },
+];
+/* ── project summary panel (column ②'s header) ──────────────────────────── */
+function formatHourLabel(hour) {
+    if (hour === 0)
+        return "12 AM";
+    if (hour < 12)
+        return `${hour} AM`;
+    if (hour === 12)
+        return "12 PM";
+    return `${hour - 12} PM`;
+}
+export function ProjectSummaryPanel({ project, visibleSessionCount, usage, activityGridStartTimestamp, currentTimestamp, ingestActive, censusRunning, isWorktreeVisible, onToggleWorktree, hostActs = null, }) {
+    // Aggregate figures become available after canonical publication and
+    // their own requests finish, independently of transcript readiness.
+    const isVeiled = ingestActive || !project.statsReady;
+    const [isExpanded, setIsExpanded] = useState(true);
+    const [expandedChart, setExpandedChart] = useState(null);
+    useEffect(() => setExpandedChart(null), [project.row.id]);
+    const { initialSummaryTab } = useRoom();
+    const [activeChart, setActiveChart] = useState(initialSummaryTab);
+    const activityStats = useMemo(() => calculateActivityStats(project.dailyTokens, project.currentDayIndex), [project.currentDayIndex, project.dailyTokens]);
+    const heatmapData = useMemo(() => createCalendarHeatmapData(project.dailyTokens, activityGridStartTimestamp), [activityGridStartTimestamp, project.dailyTokens]);
+    const modelUsageData = useMemo(() => usage
+        ? createModelUsageStreamgraphData(usage, currentTimestamp)
+        : { domain: [], series: [] }, [currentTimestamp, usage]);
+    const peakHour = usage && usage.hours.length > 0
+        ? usage.hours.reduce((busiest, hour) => hour.tokens > busiest.tokens ? hour : busiest).hour
+        : null;
+    const primaryModelLabel = modelUsageData.series[0]?.label ?? null;
+    const modelColors = useMemo(() => createModelColors(usage?.models.map(row => row.model) ?? []), [usage]);
+    // The repo act opens a REMOTE. A git_repo that is a local path is a fact
+    // about discovery, not an address anyone can visit — no button for it.
+    // R9: a host that knows the address says it (null: no act).
+    const { repositoryUrl: hostRepositoryUrlOf, projectRename } = useHostInputs();
+    const hostRepositoryUrl = hostRepositoryUrlOf?.(project.row.id);
+    // H4: the host renames the project where its name is.
+    const rename = projectRename?.(project.row.id) ?? null;
+    const repositoryUrl = hostRepositoryUrl !== undefined
+        ? hostRepositoryUrl
+        : project.row.git_repo !== null && !project.row.git_repo.startsWith("/")
+            ? project.row.git_repo
+            : null;
+    return (_jsxs("div", { className: "ah-meta", style: { "--tint": project.tint }, children: [_jsxs("div", { className: "ah-meta__head", children: [rename === null ? (_jsx(ColumnHeading, { name: project.row.name, tint: project.tint, count: visibleSessionCount, countTitle: `${visibleSessionCount} sessions in this list` })) : (_jsx(RenameHeading, { name: project.row.name, tint: project.tint, count: visibleSessionCount, countTitle: `${visibleSessionCount} sessions in this list`, rename: rename }, project.row.id)), _jsxs("span", { className: "ah-meta__acts", children: [isWorktreeVisible !== null && (_jsx("button", { type: "button", className: "ah-iconbtn", "aria-pressed": isWorktreeVisible, title: isWorktreeVisible ? "Hide the worktree" : "Show the worktree", "aria-label": "Toggle the project worktree", onClick: onToggleWorktree, children: _jsx(TreeGlyph, {}) })), _jsx("button", { type: "button", className: "ah-iconbtn", "aria-pressed": isExpanded, title: isExpanded ? "Hide the figures" : "Show the figures", "aria-label": "Toggle the figures", onClick: () => setIsExpanded((current) => !current), children: _jsx(StatsGlyph, {}) }), repositoryUrl !== null && (_jsx("button", { type: "button", className: "ah-iconbtn", title: `Open ${repositoryUrl}`, "aria-label": "Open the git repository", onClick: () => window.open(repositoryUrl.includes("://")
+                                    ? repositoryUrl
+                                    : `https://${repositoryUrl}`), children: _jsx(GitHubGlyph, {}) })), hostActs?.map((act) => _jsx(HostAct, { act: act, place: "head" }, act.key))] })] }), isExpanded && (_jsxs("div", { className: "ah-meta__body ah-veilhost", children: [isVeiled && (_jsx(Veil, { label: ingestActive
+                            ? censusRunning ? "Discovering conversations…" : "Preparing activity summaries…"
+                            : "Loading activity summaries…", progress: null })), _jsx(SummaryMetrics, { sessionCount: project.rootSessionCount, messageCount: project.lifetimeMessages, tokenCount: project.tokensLast53Weeks, spend: project.spendLast53Weeks, pending: isVeiled, period: "53 weeks" }), _jsxs("div", { className: "ah-chartcard", children: [_jsx(SegmentedControl, { value: activeChart, options: PROJECT_CHART_OPTIONS, accessibleLabel: "Project chart", className: "ah-tabseg", onValueChange: setActiveChart }), _jsx("div", { className: "ah-tabbody", children: activeChart === "models" ? (_jsxs("div", { className: "ah-chart-launcher ah-chart-launcher--models", children: [_jsx(Streamgraph, { data: modelUsageData, title: "Tokens per day \u00B7 30 days", note: "no zero \u00B7 thickness is the total", ariaLabel: "Tokens per day by model over 30 days, shown as a wiggle-minimised streamgraph", emptyMessage: usage ? "No model-attributed usage in this window" : "Loading model usage…", formatValue: tokenText }), _jsx("button", { type: "button", className: "ah-chart-launcher__button", "aria-label": `Expand models chart for ${project.row.name}`, "aria-haspopup": "dialog", disabled: isVeiled || usage === null, onClick: () => setExpandedChart("models"), children: _jsxs("span", { className: "ah-chart-launcher__hint", children: [_jsx(FullscreenGlyph, {}), " Expand"] }) })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "ah-chart-launcher", children: [_jsx(CalendarHeatmap, { data: heatmapData, color: project.tint, ariaLabel: `Daily token activity for ${project.row.name} over 53 weeks`, summary: `${isVeiled && activityStats.activeDayCount === 0
+                                                        ? "—"
+                                                        : activityStats.activeDayCount} active days · 53 weeks` }), _jsx("button", { type: "button", className: "ah-chart-launcher__button", "aria-label": `Expand activity chart for ${project.row.name}`, "aria-haspopup": "dialog", disabled: isVeiled, onClick: () => setExpandedChart("activity"), children: _jsxs("span", { className: "ah-chart-launcher__hint", children: [_jsx(FullscreenGlyph, {}), " Expand"] }) })] }), _jsxs("p", { className: "ah-meta__facts", children: [_jsx("b", { children: isVeiled && activityStats.longestStreakLength === 0
+                                                        ? "—"
+                                                        : `${activityStats.currentStreakLength}d` }), " ", "streak \u00B7", " ", _jsx("b", { children: isVeiled && activityStats.longestStreakLength === 0
+                                                        ? "—"
+                                                        : `${activityStats.longestStreakLength}d` }), " ", "best", peakHour !== null && (_jsxs(_Fragment, { children: [" ", "\u00B7 peak ", _jsx("b", { children: formatHourLabel(peakHour) })] })), primaryModelLabel !== null && (_jsxs(_Fragment, { children: [" ", "\u00B7 mostly ", _jsx("b", { children: primaryModelLabel })] }))] })] })) })] })] })), expandedChart && _jsx(ProjectChartDialog, { projectId: project.row.id, name: project.row.name, color: project.tint, initialView: expandedChart, usage: usage, data: heatmapData, today: getCalendarDayKey(currentTimestamp), offsetMinutes: getViewerUtcOffsetMinutes(), currentTimestamp: currentTimestamp, modelColors: modelColors, onClose: () => setExpandedChart(null) })] }));
+}
+export function PortfolioSummaryPanel({ projects, selectedProjectId, ingestActive, censusRunning, onProjectSelect, }) {
+    const [isExpanded, setIsExpanded] = useState(true);
+    const summariesPending = ingestActive || projects.some((project) => !project.statsReady);
+    const summary = useMemo(() => {
+        // Match the project list's lifetime spend ranking, tokens breaking ties.
+        const treemapProjects = [...projects]
+            .filter((project) => (project.lifetimeSpend.costMicroUsd ?? 0) > 0)
+            .sort((left, right) => (right.lifetimeSpend.costMicroUsd ?? 0) - (left.lifetimeSpend.costMicroUsd ?? 0)
+            || right.lifetimeTokens - left.lifetimeTokens)
+            .slice(0, MAX_TREEMAP_PROJECT_COUNT);
+        const treemapData = {
+            items: treemapProjects.map((project) => ({
+                id: project.row.id,
+                label: project.row.name,
+                value: project.lifetimeSpend.costMicroUsd ?? 0,
+                color: project.tint,
+                // A lower bound when part of the project's usage has no list price or
+                // no recorded output (§4.1.3: partial coverage is always visible).
+                partial: coverage(project.lifetimeSpend) === "partial",
+            })),
+        };
+        // Projects the treemap cannot size: usage, none of it priced.
+        const unpricedOnlyProjects = projects.filter((project) => coverage(project.lifetimeSpend) === "unavailable").length;
+        return {
+            unpricedOnlyProjects,
+            sessionCount: projects.reduce((total, project) => total + project.rootSessionCount, 0),
+            messageCount: projects.reduce((total, project) => total + project.lifetimeMessages, 0),
+            tokenCount: projects.reduce((total, project) => total + project.lifetimeTokens, 0),
+            spend: projects.reduce((total, project) => addSpend(total, project.lifetimeSpend), NO_SPEND),
+            treemapData,
+        };
+    }, [projects]);
+    return (_jsxs("div", { className: "ah-meta", children: [_jsxs("div", { className: "ah-meta__head", children: [_jsx(ColumnHeading, { name: "Projects", tint: "var(--vf-text-tertiary)", title: null, count: projects.length, countTitle: `${projects.length} projects in this list` }), _jsx("span", { className: "ah-meta__acts", children: _jsx("button", { type: "button", className: "ah-iconbtn", "aria-pressed": isExpanded, title: isExpanded ? "Hide the figures" : "Show the figures", "aria-label": "Toggle the figures", onClick: () => setIsExpanded((current) => !current), children: _jsx(StatsGlyph, {}) }) })] }), isExpanded && (_jsxs("div", { className: "ah-meta__body ah-veilhost", children: [summariesPending && (_jsx(Veil, { label: ingestActive
+                            ? censusRunning ? "Discovering conversations…" : "Preparing activity summaries…"
+                            : "Loading activity summaries…", progress: null })), _jsx(SummaryMetrics, { sessionCount: summary.sessionCount, messageCount: summary.messageCount, tokenCount: summary.tokenCount, spend: summary.spend, pending: summariesPending, period: "all time" }), _jsxs("div", { className: "ah-chartcard", children: [_jsx(Treemap, { data: summary.treemapData, ariaLabel: "Top projects by lifetime estimated spend, where area represents share among displayed projects", emptyMessage: "No priced project usage", showFooter: false, height: SUMMARY_CHART_CONTENT_HEIGHT, minimumVisibleShare: 0, selectedItemId: selectedProjectId, onItemSelect: (item) => onProjectSelect(item.id), formatValue: usdText, getItemAccessibleLabel: (item, context) => `${item.label} · ${usdText(item.value)}${item.partial ? "+" : ""} estimated cost${item.partial ? " (a lower bound)" : ""} · ${(context.share * 100).toFixed(1)}% of displayed lifetime spend` }), summary.unpricedOnlyProjects > 0 && (_jsx("p", { className: "ah-treemap__empty", children: summary.unpricedOnlyProjects === 1
+                                    ? "1 project has usage with no list price and is not shown"
+                                    : `${summary.unpricedOnlyProjects} projects have usage with no list price and are not shown` }))] })] }))] }));
+}