@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/sessions/SessionList.d.ts

@@ -0,0 +1,24 @@
+import type { SessionRow } from "@vibefield/rosetta-protocol";
+import type { ArrangedSection } from "../../lib/sections.js";
+import type { SessionFacts } from "./types.js";
+export interface SessionListProps {
+    /** Sessions in display order, normally newest first. */
+    readonly sessions: readonly SessionRow[];
+    readonly factsBySessionId: ReadonlyMap<string, SessionFacts>;
+    readonly getRuntimeKind: (runtimeId: string) => string;
+    readonly selectedSessionId: string | null;
+    readonly currentTimestamp: number;
+    /** A backfill is running — unindexed sessions cook rather than lie. */
+    readonly duringBackfill: boolean;
+    /** The census is still naming sessions: the empty state yields to the
+     * section's veil, because only the ready may claim emptiness. */
+    readonly pending: boolean;
+    readonly emptyState?: {
+        readonly title: string;
+        readonly description: string;
+    } | undefined;
+    readonly onSessionSelect: (session: SessionRow) => void;
+    /** The host's sections (R3), arranged; null draws the days it always did. */
+    readonly sections?: readonly ArrangedSection<SessionRow>[] | null | undefined;
+}
+export declare function SessionList(props: SessionListProps): import("react").JSX.Element;

package/dist/components/sessions/SessionList.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dayLabel } from "../../lib/format.js";
+import { sessionLastActive } from "../../lib/session-activity.js";
+import { useListMotion } from "../../lib/use-list-motion.js";
+import { activityDay } from "../../lib/activity-order.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 { SessionListItem } from "./SessionListItem.js";
+const sessionId = (session) => session.id;
+function groupSessionsByDay(positions, sessions, currentTimestamp) {
+    const groups = [];
+    for (const { id, day } of positions) {
+        const session = sessions.get(id);
+        if (!session)
+            continue;
+        const label = dayLabel(day, currentTimestamp);
+        const currentGroup = groups.at(-1);
+        if (currentGroup?.day === day) {
+            currentGroup.sessions.push(session);
+        }
+        else {
+            groups.push({ day, label, sessions: [session] });
+        }
+    }
+    return groups;
+}
+export function SessionList(props) {
+    const scope = `browse:${props.sessions[0]?.project_id ?? "empty"}`;
+    const sections = props.sections ?? null;
+    const folds = useOpenFolds(sections, sessionId, props.selectedSessionId);
+    const position = (session) => ({ id: session.id, day: activityDay(sessionLastActive(session)) });
+    // 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 layout = useDeferredListOrder(sections === null
+        ? props.sessions.map(position)
+        : sections.flatMap(entry => entry.section.fold !== undefined ? [] :
+            entry.rows.map(session => ({ ...position(session), section: entry.index }))), scope);
+    const byId = new Map(props.sessions.map(session => [session.id, session]));
+    const days = groupSessionsByDay(layout.items, byId, props.currentTimestamp);
+    const motionRef = useListMotion(JSON.stringify(layout.items), scope, layout.scrollRef);
+    const drawRow = (session) => (_jsx(SessionListItem, { session: session, facts: props.factsBySessionId.get(session.id) ?? null, runtimeKind: props.getRuntimeKind(session.runtime_id), isSelected: session.id === props.selectedSessionId, currentTimestamp: props.currentTimestamp, duringBackfill: props.duringBackfill, onSessionSelect: props.onSessionSelect }, `session:${session.id}`));
+    // Headers and rows share one key space. Moving from Yesterday to Today
+    // preserves the actual button, its keyboard focus and its animation.
+    const drawDays = (groups, keyPrefix) => groups.flatMap((group) => [
+        _jsx("div", { className: "ah-day", children: group.sessions.some(session => activityDay(sessionLastActive(session)) !== group.day)
+                ? "Activity updated" : group.label }, `day:${keyPrefix}${group.day}`),
+        ...group.sessions.map(drawRow),
+    ]);
+    const drawRun = (entry, rows) => entry.order === "room"
+        ? drawDays(groupSessionsByDay(rows.map(position), byId, props.currentTimestamp), `${entry.index}:`)
+        : rows.map(drawRow);
+    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 ? drawRun(entry, entry.rows) : []),
+            ];
+        }
+        const rows = layout.items.flatMap(item => item.section === entry.index ? byId.get(item.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}`),
+            ]),
+            ...drawRun(entry, rows),
+        ];
+    });
+    return (_jsxs("div", { className: "ah-list-view", ...layout.hostProps, children: [_jsxs("div", { className: "ah-scroll ah-session-list ah-motion-list", ref: motionRef, onScroll: layout.onScroll, children: [sectioned ?? drawDays(days, ""), props.sessions.length === 0 && !props.pending && (_jsx(EmptyState, { title: props.emptyState?.title ?? "No sessions here yet", description: props.emptyState?.description ??
+                            "Sessions appear as rosettad reads this project's agent stores." }))] }), _jsx(ListActivityNotice, { pending: layout.pending, onShow: layout.apply, noun: "sessions" })] }));
+}

package/dist/components/sessions/SessionListItem.d.ts

@@ -0,0 +1,13 @@
+import type { SessionRow } from "@vibefield/rosetta-protocol";
+import type { SessionFacts } from "./types.js";
+export interface SessionListItemProps {
+    readonly session: SessionRow;
+    readonly facts: SessionFacts | null;
+    readonly runtimeKind: string;
+    readonly isSelected: boolean;
+    readonly currentTimestamp: number;
+    /** A backfill is running — an unindexed session's dot says "indexing". */
+    readonly duringBackfill: boolean;
+    readonly onSessionSelect: (session: SessionRow) => void;
+}
+export declare function SessionListItem({ session, facts, runtimeKind, isSelected, currentTimestamp, duringBackfill, onSessionSelect, }: SessionListItemProps): import("react").JSX.Element;

package/dist/components/sessions/SessionListItem.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AgentMark } from "../../lib/agents.js";
+import { duration, lastActive, tokenText } from "../../lib/format.js";
+import { isSessionCooking } from "../../lib/ingest.js";
+import { sessionLastActive } from "../../lib/session-activity.js";
+import { spendDescription, spendText } from "../../lib/spend.js";
+import { getSessionStatus, getSessionTitle } from "./session-display.js";
+import { useHostInputs } from "../../host-inputs.js";
+import { HostAct } from "../HostAct.js";
+export function SessionListItem({ session, facts, runtimeKind, isSelected, currentTimestamp, duringBackfill, onSessionSelect, }) {
+    const status = getSessionStatus(session, duringBackfill);
+    // The cooking card: identity is real from the skim; the figure slots are
+    // what is still unknown, and they alone carry the processing state. A
+    // facts row whose figures have not landed — a cooking session still
+    // counting from zero — is not a claim: the shimmer keeps the slot.
+    const cookingState = isSessionCooking(session);
+    const landedFacts = facts !== null && (facts.messages > 0 || !cookingState) ? facts : null;
+    const isCooking = cookingState && landedFacts === null;
+    const title = getSessionTitle(session);
+    const lastActiveLabel = lastActive(sessionLastActive(session), currentTimestamp);
+    const roleLabel = session.role === "main" ? null : session.role;
+    const accessibleMetadata = [
+        roleLabel === null ? null : `${roleLabel} session`,
+        landedFacts === null ? null : `${landedFacts.messages} messages`,
+        landedFacts !== null && landedFacts.tokens > 0
+            ? `${tokenText(landedFacts.tokens)} tokens`
+            : null,
+        landedFacts !== null && landedFacts.tokens > 0
+            ? spendDescription(landedFacts.spend, tokenText)
+            : null,
+    ].filter((value) => value !== null);
+    const spendFigure = landedFacts !== null && landedFacts.tokens > 0
+        ? spendText(landedFacts.spend)
+        : null;
+    // R4: the host's id slot, and its act or the reason at the row's end.
+    const decoration = useHostInputs().sessionRow?.(session) ?? null;
+    const hostId = decoration?.id ?? null;
+    const act = decoration?.act ?? null;
+    const reason = act === null ? (decoration?.reason ?? null) : null;
+    const className = `ah-session-list-item${isSelected ? " is-selected" : ""}`;
+    const accessibleName = [
+        title,
+        status.label,
+        ...accessibleMetadata,
+        `last active ${lastActiveLabel}`,
+    ].join(" · ");
+    // 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 last = (_jsx("span", { className: "ah-last", "data-live": lastActiveLabel === "now" ? "" : undefined, "aria-hidden": shown, children: lastActiveLabel }));
+    const idSlot = hostId === null ? (_jsx("span", { className: "ah-session-list-item__native-id", title: `Native session ${session.native_session_id}`, children: _jsx("span", { children: session.native_session_id.slice(0, 18) }) })) : (_jsx("span", { className: "ah-session-list-item__native-id", "data-host": "", title: decoration?.idTitle, "aria-hidden": shown, children: hostId }));
+    const body = (_jsxs(_Fragment, { children: [_jsx("i", { className: "ah-session-list-item__status", "data-tone": status.tone ?? undefined, "data-live": status.isLive ? "" : undefined, title: status.label, "aria-hidden": "true" }), _jsxs("span", { className: "ah-session-list-item__header", "aria-hidden": shown, children: [_jsx("strong", { title: title, children: title }), _jsx(AgentMark, { kind: runtimeKind })] }), _jsxs("span", { className: "ah-session-list-item__metadata", "aria-hidden": shown, children: [roleLabel !== null && (_jsxs(_Fragment, { children: [_jsx("span", { children: roleLabel }), _jsx("span", { children: "\u00B7" })] })), landedFacts !== null && (_jsxs(_Fragment, { children: [_jsxs("span", { children: [landedFacts.messages, " msgs"] }), _jsx("span", { children: "\u00B7" })] })), isCooking && (_jsxs(_Fragment, { children: [_jsx("span", { className: "ah-cook", "aria-hidden": "true" }), _jsx("span", { children: "\u00B7" })] })), _jsx("span", { title: "Span of recorded conversation activity", children: session.activity ? duration(session.activity.first_at, session.activity.last_at) : "—" }), landedFacts !== null && landedFacts.tokens > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { children: tokenText(landedFacts.tokens) })] })), landedFacts !== null && spendFigure !== null && (_jsxs(_Fragment, { children: [_jsx("span", { children: "\u00B7" }), _jsx("span", { title: spendDescription(landedFacts.spend, tokenText), children: spendFigure })] }))] }), _jsxs("span", { className: "ah-session-list-item__footer", children: [idSlot, act === null && reason === null ? last : (_jsxs("span", { className: "ah-session-list-item__end", children: [act !== null ? _jsx(HostAct, { act: act, place: "row" }) : (_jsx("span", { className: "ah-session-list-item__reason", children: reason })), last] }))] })] }));
+    if (act === null) {
+        return (_jsx("button", { type: "button", className: className, "data-motion-key": session.id, "data-role": session.role, "data-cooking": isCooking ? "" : undefined, "aria-current": isSelected ? "true" : undefined, "aria-label": accessibleName, onClick: () => onSessionSelect(session), children: body }));
+    }
+    return (_jsxs("div", { className: className, "data-motion-key": session.id, "data-role": session.role, "data-cooking": isCooking ? "" : undefined, "data-host-act": "", children: [_jsx("button", { type: "button", className: "ah-session-list-item__hit", "aria-current": isSelected ? "true" : undefined, "aria-label": accessibleName, onClick: () => onSessionSelect(session) }), body] }));
+}

package/dist/components/sessions/SessionsColumn.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { IngestProgress, SessionRow, UsageResponse } from "@vibefield/rosetta-protocol";
+import type { RoomAct } from "../../host-inputs.js";
+import type { ProjectViewModel } from "../../lib/model.js";
+import type { SessionFacts } from "./types.js";
+export interface SessionsColumnProps {
+    readonly project: ProjectViewModel | null;
+    /** Browse-mode sessions in display order. */
+    readonly sessions: readonly SessionRow[];
+    readonly factsBySessionId: ReadonlyMap<string, SessionFacts>;
+    readonly getRuntimeKind: (runtimeId: string) => string;
+    readonly selectedSessionId: string | null;
+    readonly usage: UsageResponse | null;
+    readonly activityGridStartTimestamp: number;
+    readonly currentTimestamp: number;
+    /** The daemon's cold-start block; null on a daemon too old to carry it. */
+    readonly ingest: IngestProgress | null;
+    /** `null` means the browser build has no desktop worktree integration. */
+    readonly isWorktreeVisible: boolean | null;
+    readonly onToggleWorktree: () => void;
+    readonly onSessionSelect: (session: SessionRow) => void;
+    /** R5: the host's acts after the head's own, and its card under the head. */
+    readonly hostActs?: readonly RoomAct[] | null | undefined;
+    readonly hostCard?: ReactNode;
+}
+export declare function SessionsColumn({ project, sessions, factsBySessionId, getRuntimeKind, selectedSessionId, usage, activityGridStartTimestamp, currentTimestamp, ingest, isWorktreeVisible, onToggleWorktree, onSessionSelect, hostActs, hostCard, }: SessionsColumnProps): import("react").JSX.Element;

package/dist/components/sessions/SessionsColumn.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useHostInputs } from "../../host-inputs.js";
+import { arrangeSections } from "../../lib/sections.js";
+import { FilterChips } from "../FilterChips.js";
+import { isCensusRunning, isIngestActive } from "../../lib/ingest.js";
+import { ProjectSummaryPanel } from "../SummaryPanels.js";
+import { ListSummaryHeader, ListToolbar } from "../ui/index.js";
+import { SessionList } from "./SessionList.js";
+export function SessionsColumn({ project, sessions, factsBySessionId, getRuntimeKind, selectedSessionId, usage, activityGridStartTimestamp, currentTimestamp, ingest, isWorktreeVisible, onToggleWorktree, onSessionSelect, hostActs = null, hostCard = null, }) {
+    const ingestActive = isIngestActive(ingest);
+    const censusRunning = isCensusRunning(ingest);
+    // R3: the host's sections over this project's sessions, in the room's order.
+    const { sessionSections, sessionFilters } = useHostInputs();
+    const projectId = project?.row.id ?? null;
+    const sections = useMemo(() => {
+        const given = projectId === null ? null : (sessionSections?.(projectId) ?? null);
+        return given === null ? null : arrangeSections(given, sessions, (session) => session.id);
+    }, [sessionSections, projectId, sessions]);
+    // R7: the host's chips over this project's list.
+    const filters = projectId === null ? null : (sessionFilters?.(projectId) ?? null);
+    // The head counts what the list holds: with sections, what they draw.
+    const visibleSessionCount = sections === null
+        ? sessions.length
+        : sections.reduce((total, entry) => total + entry.rows.length, 0);
+    return (_jsxs("div", { className: "ah-col", children: [project === null ? (_jsx(ListSummaryHeader, { label: "Sessions", count: visibleSessionCount, singularNoun: "session" })) : (_jsx(ProjectSummaryPanel, { project: project, visibleSessionCount: visibleSessionCount, usage: usage, activityGridStartTimestamp: activityGridStartTimestamp, currentTimestamp: currentTimestamp, ingestActive: ingestActive, censusRunning: censusRunning, isWorktreeVisible: isWorktreeVisible, onToggleWorktree: onToggleWorktree, hostActs: hostActs })), project !== null && hostCard !== null && hostCard !== undefined && hostCard !== false && (_jsx("div", { className: "ah-hostcard", children: hostCard })), filters !== null && filters.length > 0 && (_jsx(ListToolbar, { children: _jsx(FilterChips, { filters: filters }) })), censusRunning && _jsx("p", { className: "ah-ingest-note", children: "More conversations will appear as discovery finishes." }), _jsx("div", { className: "ah-veilhost", children: _jsx(SessionList, { sessions: sessions, factsBySessionId: factsBySessionId, getRuntimeKind: getRuntimeKind, selectedSessionId: selectedSessionId, currentTimestamp: currentTimestamp, duringBackfill: ingestActive, pending: censusRunning, emptyState: project === null
+                        ? {
+                            title: "No project selected",
+                            description: "Pick a project to browse its sessions.",
+                        }
+                        : undefined, onSessionSelect: onSessionSelect, sections: sections }) })] }));
+}

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

@@ -0,0 +1,9 @@
+export { getSessionStatus, getSessionTitle } from "./session-display.js";
+export type { SessionStatus } from "./session-display.js";
+export { SessionList } from "./SessionList.js";
+export type { SessionListProps } from "./SessionList.js";
+export { SessionListItem } from "./SessionListItem.js";
+export type { SessionListItemProps } from "./SessionListItem.js";
+export { SessionsColumn } from "./SessionsColumn.js";
+export type { SessionsColumnProps } from "./SessionsColumn.js";
+export type { SessionFacts, } from "./types.js";

package/dist/components/sessions/index.js

@@ -0,0 +1,4 @@
+export { getSessionStatus, getSessionTitle } from "./session-display.js";
+export { SessionList } from "./SessionList.js";
+export { SessionListItem } from "./SessionListItem.js";
+export { SessionsColumn } from "./SessionsColumn.js";

package/dist/components/sessions/session-display.d.ts

@@ -0,0 +1,8 @@
+import type { SessionRow } from "@vibefield/rosetta-protocol";
+export interface SessionStatus {
+    readonly tone: "green" | "orange" | null;
+    readonly isLive: boolean;
+    readonly label: string;
+}
+export declare function getSessionStatus(session: SessionRow, duringBackfill?: boolean): SessionStatus;
+export declare function getSessionTitle(session: SessionRow): string;

package/dist/components/sessions/session-display.js

@@ -0,0 +1,18 @@
+export function getSessionStatus(session, duringBackfill = false) {
+    switch (session.stream_state) {
+        case "streaming":
+            // This is ingestion completeness, never evidence of an active agent.
+            return {
+                tone: "orange",
+                isLive: false,
+                label: duringBackfill ? "indexing" : "history incomplete",
+            };
+        case "pending":
+            return { tone: "orange", isLive: false, label: "not yet indexed" };
+        default:
+            return { tone: null, isLive: false, label: "history indexed" };
+    }
+}
+export function getSessionTitle(session) {
+    return session.title ?? session.summary ?? session.native_session_id;
+}

package/dist/components/sessions/types.d.ts

@@ -0,0 +1,7 @@
+import type { Spend } from "../../lib/spend.js";
+export interface SessionFacts {
+    readonly tokens: number;
+    readonly messages: number;
+    /** List-price spend across the session's subagent tree. */
+    readonly spend: Spend;
+}

package/dist/components/sessions/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/transcript/Activity.d.ts

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+import type { TimelineEntry } from "@vibefield/rosetta-protocol";
+import type { ActivityItem } from "./activity-plan.js";
+import type { AttachmentFact, Segment } from "../../lib/transcript/index.js";
+import type { EarlierState } from "../../lib/transcript/head-state.js";
+import "../../styles/transcript-activity.css";
+export declare function revealActivityTarget(element: HTMLElement): void;
+export declare function ActivityGroup({ items, rows, partial, forceOpen, highlightedId, alive, onOpenAttachment, onReceipt, earlier, onLoadEarlier, teamLoading, teamError, onRetryTeam, children }: {
+    readonly items: readonly ActivityItem[];
+    readonly rows: readonly TimelineEntry[];
+    readonly partial: boolean;
+    readonly earlier: EarlierState;
+    readonly onLoadEarlier: () => void;
+    readonly teamLoading: boolean;
+    readonly teamError: string | null;
+    readonly onRetryTeam: () => void;
+    readonly forceOpen: boolean;
+    readonly highlightedId: string | null;
+    readonly alive: (row: TimelineEntry) => boolean;
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+    readonly onReceipt: (text: string) => void;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+/** The second disclosure is independent of the room's outer fold preference. */
+export declare function ActivityEvent({ domId, timelineId, label, summary, at, glyph, hit, forceOpen, failed, children }: {
+    readonly domId: string;
+    readonly timelineId: string;
+    readonly label: string;
+    readonly summary?: ReactNode;
+    readonly at?: number | null;
+    readonly glyph?: ReactNode;
+    readonly hit?: boolean;
+    readonly forceOpen?: boolean;
+    readonly failed?: boolean;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+export declare function ContextEvent({ segment, domId, hit, forceOpen, onReceipt }: {
+    readonly segment: Extract<Segment, {
+        kind: "marker" | "summary";
+    }>;
+    readonly domId: string;
+    readonly hit: boolean;
+    readonly forceOpen: boolean;
+    readonly onReceipt: (text: string) => void;
+}): import("react").JSX.Element;

package/dist/components/transcript/Activity.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef } from "react";
+import { clock } from "../../lib/format.js";
+import { activityRowKey, summarizeActivity } from "./activity-plan.js";
+import { useGroupDisclosure, useRowDisclosure } from "./disclosure-state.js";
+import { useFoldPreference } from "./fold-preference.js";
+import { FamilyGlyph, LineChevron } from "./glyphs.js";
+import { MessagePreview } from "./MessagePreview.js";
+import { timelineImages } from "../../lib/transcript/images.js";
+import { ActivityImagesContext, Attachments, useAttachmentActions } from "./Attachments.js";
+import { scrollRowTo } from "./scroll-to-row.js";
+import "../../styles/transcript-activity.css";
+export function revealActivityTarget(element) {
+    if (element.getClientRects().length === 0)
+        return;
+    const scroller = element.closest(".tr-scroll");
+    if (scroller !== null)
+        scrollRowTo(scroller, element, "center");
+    const target = element.matches("button, summary, [tabindex]") ? element
+        : element.querySelector("summary, button, [tabindex]");
+    target?.focus({ preventScroll: true });
+}
+export function ActivityGroup({ items, rows, partial, forceOpen, highlightedId, alive, onOpenAttachment, onReceipt, earlier, onLoadEarlier, teamLoading, teamError, onRetryTeam, children }) {
+    const preference = useFoldPreference();
+    const keys = rows.map(activityRowKey);
+    const [override, setOverride] = useGroupDisclosure(keys, preference.revision);
+    const expanded = override ?? (!preference.folded || forceOpen || highlightedId !== null);
+    const listId = useId();
+    const root = useRef(null);
+    useEffect(() => {
+        if (forceOpen || highlightedId !== null)
+            setOverride(true);
+        // Arrival patches change keys, but must not reopen a deliberately shut run.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [forceOpen, highlightedId]);
+    useEffect(() => {
+        if (highlightedId === null || !expanded)
+            return;
+        const frame = requestAnimationFrame(() => {
+            const target = root.current?.querySelector(`[id][data-timeline-id="${CSS.escape(highlightedId)}"]`);
+            if (target !== null && target !== undefined)
+                revealActivityTarget(target);
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [expanded, highlightedId]);
+    const summary = useMemo(() => summarizeActivity(items), [items]);
+    const images = useMemo(() => timelineImages(rows), [rows]);
+    const { open: openImage, reveal } = useAttachmentActions(onOpenAttachment, onReceipt, images);
+    const running = summary.runningRows.some(alive);
+    const text = summary.nouns.map(noun => [noun.text, noun.names.join(", "), noun.more > 0 ? `… ${noun.more} more` : ""].filter(Boolean).join(" ")).join(" · ");
+    const range = summary.firstAt === null ? null : summary.lastAt === null || summary.firstAt === summary.lastAt
+        ? clock(summary.firstAt) : `${clock(summary.firstAt)}–${clock(summary.lastAt)}`;
+    const label = [partial ? "More activity to load" : null, teamLoading ? "Loading team activity" : null, text, summary.failed > 0 ? `${summary.failed} failed` : null,
+        summary.interrupted > 0 ? `${summary.interrupted} interrupted` : null,
+        summary.cancelled > 0 ? `${summary.cancelled} cancelled` : null, running ? "Running" : null, range].filter(Boolean).join(" · ");
+    return _jsxs("div", { className: "tr-seg tr-activity", ref: root, "data-partial": partial || undefined, children: [_jsxs("button", { type: "button", className: "tr-line tr-fold tr-activity__head", "aria-expanded": expanded, "aria-controls": listId, "aria-label": label, title: label, onClick: () => {
+                    if (!expanded && partial)
+                        onLoadEarlier();
+                    setOverride(!expanded);
+                }, children: [_jsx("span", { className: "tr-line__g chev", children: _jsx(LineChevron, {}) }), _jsxs("span", { className: "tr-line__v", children: [partial && _jsx("span", { children: "More activity to load \u00B7 " }), teamLoading && _jsx("span", { children: "Loading team activity \u00B7 " }), summary.nouns.map((noun, index) => _jsxs("span", { children: [index > 0 && " · ", noun.text, noun.names.length > 0 && _jsxs(_Fragment, { children: [" ", _jsxs("span", { className: "names", children: [noun.names.join(", "), noun.more > 0 ? ` … ${noun.more} more` : ""] })] })] }, noun.key))] }), _jsxs("span", { className: "tr-line__r", children: [summary.failed > 0 && _jsxs("b", { children: [summary.failed, " failed"] }), summary.interrupted > 0 && _jsxs("span", { children: [summary.interrupted, " interrupted"] }), summary.cancelled > 0 && _jsxs("span", { children: [summary.cancelled, " cancelled"] }), running && _jsxs("span", { className: "tr-activity__running", children: [_jsx("i", { "aria-hidden": "true" }), "Running"] }), range !== null && _jsx("span", { className: "t", children: range })] })] }), _jsx(Attachments, { facts: images, onOpenAttachment: openImage, reveal: reveal }), _jsx(ActivityImagesContext.Provider, { value: openImage, children: _jsxs("div", { id: listId, className: "tr-activity__list", hidden: !expanded, children: [partial && _jsx("div", { className: "tr-activity__loading", role: "status", children: earlier.kind === "fetching" || earlier.kind === "revealing" ? "Loading earlier activity…" : _jsxs(_Fragment, { children: [_jsx("span", { children: earlier.kind === "failed" ? "Could not load earlier activity." : "This activity continues in earlier history." }), _jsx("button", { type: "button", onClick: onLoadEarlier, children: earlier.kind === "failed" ? "Retry" : "Load more activity" })] }) }), (teamLoading || teamError !== null) && _jsxs("div", { className: "tr-activity__loading", role: "status", children: [_jsx("span", { children: teamError !== null ? "Could not load team messages." : "Loading team messages…" }), teamError !== null && _jsx("button", { type: "button", onClick: onRetryTeam, children: "Retry" })] }), children] }) })] });
+}
+/** The second disclosure is independent of the room's outer fold preference. */
+export function ActivityEvent({ domId, timelineId, label, summary, at, glyph, hit = false, forceOpen = false, failed = false, children }) {
+    const [open, setOpen] = useRowDisclosure(domId);
+    useEffect(() => { if (hit || forceOpen)
+        setOpen(true); }, [hit, forceOpen, setOpen]);
+    return _jsxs("details", { className: "tr-activity-event", id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, "data-failed": failed || undefined, open: open || forceOpen, onToggle: event => setOpen(event.currentTarget.open), children: [_jsxs("summary", { children: [_jsx("span", { className: "tr-activity-event__glyph", children: glyph ?? _jsx(FamilyGlyph, { glyph: "doc" }) }), _jsxs("span", { className: "tr-activity-event__label", children: [_jsx("strong", { children: label }), summary !== undefined && _jsx("span", { children: summary })] }), at != null && _jsx("time", { children: clock(at) }), _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] }), (open || forceOpen) && _jsx("div", { className: "tr-activity-event__body", children: children })] });
+}
+export function ContextEvent({ segment, domId, hit, forceOpen, onReceipt }) {
+    const summary = segment.kind === "summary";
+    const label = summary ? `${segment.purpose} summary` : "Session notice";
+    const canonical = segment.row.body.type === "summary" ? segment.row.body.text
+        : segment.kind === "marker" && segment.notice.type === "command_output" ? segment.notice.output : null;
+    return _jsx(ActivityEvent, { domId: domId, timelineId: segment.row.timeline_id, label: label, summary: summary ? undefined : segment.text, at: segment.at, hit: hit, forceOpen: forceOpen, failed: segment.kind === "marker" && segment.tone === "failed", children: _jsx("div", { className: "tr-prose", children: _jsx(MessagePreview, { messageKey: domId, role: "agent", title: label, matched: hit, text: segment.text, recordedText: canonical, onReceipt: onReceipt }) }) });
+}

package/dist/components/transcript/Anchor.d.ts

@@ -0,0 +1,8 @@
+export interface AnchorProps {
+    readonly at: number | null;
+    /** `<session>#<timeline_id>` — what the clipboard gets. */
+    readonly sessionId: string;
+    readonly timelineId: string;
+    readonly onReceipt: (text: string) => void;
+}
+export declare function Anchor({ at, sessionId, timelineId, onReceipt }: AnchorProps): import("react").JSX.Element | null;

package/dist/components/transcript/Anchor.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// T-4 — every segment stays pointable-at.
+//
+// Decided Q3 A: the time lives in the MARGIN when the column has one, and is
+// revealed on hover when it does not. That is a container query, not a media
+// query, because the margin appears and disappears with the rail, not with the
+// window — `.tr-col` is the container and `transcript.css` holds the rule.
+//
+// The anchor keeps its precision: a pill says the day and the minute of
+// resumption, the anchor keeps HH:MM:SS. Time decomposes — day, sitting,
+// second — and no level repeats another's fact.
+import { clock } from "../../lib/format.js";
+export function Anchor({ at, sessionId, timelineId, onReceipt }) {
+    if (at === null)
+        return null;
+    const stamp = clock(at);
+    return (_jsx("button", { type: "button", className: "tr-anchor", title: "Copy an anchor to this message", onClick: () => {
+            navigator.clipboard
+                .writeText(`${sessionId}#${timelineId}`)
+                .then(() => onReceipt(`Anchor copied · ${stamp}`))
+                .catch(() => onReceipt("The clipboard refused the anchor"));
+        }, children: stamp }));
+}

package/dist/components/transcript/Attachments.d.ts

@@ -0,0 +1,21 @@
+import type { AttachmentFact } from "../../lib/transcript/index.js";
+import type { AttachmentOpener } from "./attachment-gallery.js";
+import "../../styles/attachments.css";
+/** Explicitly shared only by messages whose images are gathered in this run. */
+export declare const ActivityImagesContext: import("react").Context<AttachmentOpener | null>;
+export declare function useAttachmentActions(onOpenAttachment: AttachmentOpener, onReceipt: (text: string) => void, facts: readonly AttachmentFact[]): {
+    open: AttachmentOpener;
+    reveal: {
+        key: string;
+        request: number;
+    } | null;
+};
+export declare function attachmentStatus(fact: AttachmentFact): string;
+export declare function Attachments({ facts, onOpenAttachment, reveal }: {
+    readonly facts: readonly AttachmentFact[];
+    readonly reveal?: {
+        readonly key: string;
+        readonly request: number;
+    } | null;
+    readonly onOpenAttachment: AttachmentOpener;
+}): import("react").JSX.Element | null;

package/dist/components/transcript/Attachments.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useId, useLayoutEffect, useRef, useState } from "react";
+import { fmtBytes } from "../../lib/format.js";
+import { useAttachmentReader } from "./attachment-file-source.js";
+import { useImageUrl, useImageVisibility } from "../file-viewer/image-resource.js";
+import "../../styles/attachments.css";
+/** Explicitly shared only by messages whose images are gathered in this run. */
+export const ActivityImagesContext = createContext(null);
+export function useAttachmentActions(onOpenAttachment, onReceipt, facts) {
+    const [reveal, setReveal] = useState(null);
+    const attachments = useAttachmentReader();
+    const open = (fact, row = facts) => {
+        if (attachments.canOpen(fact))
+            onOpenAttachment(fact, row);
+        else {
+            setReveal(old => ({ key: fact.key, request: (old?.request ?? 0) + 1 }));
+            onReceipt(attachmentStatus(fact));
+        }
+    };
+    return { open, reveal };
+}
+export function attachmentStatus(fact) {
+    const source = fact.ref?.source;
+    if (source?.type === "unavailable") {
+        switch (source.reason) {
+            case "omitted": return "Image omitted from the recording";
+            case "invalid_data": return "Recorded image data is invalid";
+            case "unsupported_media": return "Image format is not supported";
+            case "not_recorded": return "Image data was not recorded";
+        }
+    }
+    return "Image data was not recorded";
+}
+function Tile({ fact, index, onOpen }) {
+    const [failedUrl, setFailedUrl] = useState(null);
+    const [attempt, setAttempt] = useState(0);
+    const figureRef = useRef(null);
+    const openRef = useRef(null);
+    const retryRef = useRef(null);
+    const restoreFocus = useRef(false);
+    const visible = useImageVisibility(figureRef);
+    const attachments = useAttachmentReader();
+    const resource = fact.kind === "image" ? attachments.imageResource(fact) : null;
+    const { url, pending } = useImageUrl(resource, window.devicePixelRatio > 2 ? "tile2x" : "tile", attempt);
+    // A source that could not address a recorded image failed to load it, the
+    // same fact to a reader as a broken response, and Retry asks it again.
+    const refused = resource !== null && !pending && url === null;
+    const failed = refused || (url !== null && failedUrl === url);
+    useLayoutEffect(() => {
+        if (!restoreFocus.current)
+            return;
+        (failed ? retryRef.current : openRef.current)?.focus({ preventScroll: true });
+        restoreFocus.current = false;
+    }, [attempt, failed]);
+    const label = fact.ref?.label ?? `${fact.kind === "image" ? "Image" : "Attachment"} ${index + 1}`;
+    const details = [label, fact.name, fact.caption, fact.byteLen === null ? null : fmtBytes(fact.byteLen)].filter(Boolean).join(" · ");
+    return _jsx("figure", { ref: figureRef, "data-attachment-id": fact.key, title: details, children: resource === null || failed ? (_jsxs("div", { className: "tr-att__tile tr-att__tile--missing", tabIndex: -1, "aria-label": details, children: [_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.3", "aria-hidden": "true", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "4" }), _jsx("circle", { cx: "8", cy: "8", r: "1.5" }), _jsx("path", { d: "m3 17 5-5 4 4 3-3 6 6" })] }), _jsx("span", { children: failed ? "Could not load image" : fact.kind === "image" ? attachmentStatus(fact) : "Attachment preview unavailable" }), failed && _jsx("button", { type: "button", ref: retryRef, className: "tr-att__retry", onClick: () => {
+                        restoreFocus.current = true;
+                        setAttempt(value => value + 1);
+                        setFailedUrl(null);
+                    }, children: "Retry" })] })) : (_jsx("button", { type: "button", ref: openRef, className: "tr-att__tile", "aria-label": `Open ${label}${fact.name ? ` — ${fact.name}` : ""}`, "aria-haspopup": "dialog", onClick: () => onOpen(fact), children: visible && url !== null && _jsx("img", { src: url, alt: fact.name ?? label, decoding: "async", onError: () => {
+                    restoreFocus.current = Boolean(figureRef.current?.contains(document.activeElement));
+                    setFailedUrl(url);
+                } }, url) })) });
+}
+/** Scroll just this rail: image navigation must never move the room or transcript. */
+function revealTile(rail, tile) {
+    const bounds = rail.getBoundingClientRect();
+    const target = tile.getBoundingClientRect();
+    if (target.left < bounds.left + 4)
+        rail.scrollLeft += target.left - bounds.left - 4;
+    else if (target.right > bounds.right - 4)
+        rail.scrollLeft += target.right - bounds.right + 4;
+}
+export function Attachments({ facts, onOpenAttachment, reveal }) {
+    const id = useId();
+    const attachments = useAttachmentReader();
+    const gallery = useRef(null);
+    const handledReveal = useRef(undefined);
+    const [edges, setEdges] = useState({ before: false, after: false });
+    useLayoutEffect(() => {
+        const rail = gallery.current;
+        if (!rail)
+            return;
+        const update = () => {
+            const before = rail.scrollLeft > 2;
+            const after = rail.scrollLeft + rail.clientWidth < rail.scrollWidth - 2;
+            setEdges(old => old.before === before && old.after === after ? old : { before, after });
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(rail);
+        rail.addEventListener("scroll", update, { passive: true });
+        return () => { observer.disconnect(); rail.removeEventListener("scroll", update); };
+    }, [facts.length]);
+    useLayoutEffect(() => {
+        if (!reveal || handledReveal.current === reveal || !gallery.current)
+            return;
+        const figure = [...gallery.current.querySelectorAll("[data-attachment-id]")]
+            .find(element => element.dataset.attachmentId === reveal.key);
+        const target = figure?.querySelector(".tr-att__tile");
+        if (!target)
+            return;
+        target.focus({ preventScroll: true });
+        revealTile(gallery.current, target);
+        // A missing-image mention may sit far above its strip in the full message.
+        // Keep vertical scrolling inside the nearest reading surface.
+        const scroller = gallery.current.closest(".ah-fileview__scroll, .tr-scroll");
+        if (scroller) {
+            const bounds = scroller.getBoundingClientRect();
+            const rect = target.getBoundingClientRect();
+            if (rect.top < bounds.top)
+                scroller.scrollTop += rect.top - bounds.top - 12;
+            else if (rect.bottom > bounds.bottom)
+                scroller.scrollTop += rect.bottom - bounds.bottom + 12;
+        }
+        handledReveal.current = reveal;
+    }, [reveal, facts]);
+    if (facts.length === 0)
+        return null;
+    const page = (direction) => gallery.current?.scrollBy({ left: direction * gallery.current.clientWidth * 0.8,
+        behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth" });
+    return _jsxs("div", { className: "tr-attachments", role: "group", "aria-label": `${facts.length} ${facts.length === 1 ? "attachment" : "attachments"}`, children: [_jsx("div", { className: "tr-att", id: id, ref: gallery, onFocusCapture: event => {
+                    const tile = event.target.closest(".tr-att__tile");
+                    if (tile && gallery.current)
+                        revealTile(gallery.current, tile);
+                }, onKeyDown: event => {
+                    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key) || !gallery.current)
+                        return;
+                    const tiles = [...gallery.current.querySelectorAll(".tr-att__tile")];
+                    const index = tiles.findIndex(tile => tile.contains(event.target));
+                    if (index < 0)
+                        return;
+                    event.preventDefault();
+                    const next = event.key === "Home" ? 0 : event.key === "End" ? tiles.length - 1 : Math.max(0, Math.min(tiles.length - 1, index + (event.key === "ArrowRight" ? 1 : -1)));
+                    tiles[next]?.focus({ preventScroll: true });
+                }, children: facts.map((fact, index) => _jsx(Tile, { fact: fact, index: index, onOpen: selected => onOpenAttachment(selected, facts) }, `${fact.key}:${attachments.assetUrl(fact) ?? "reference"}`)) }), (edges.before || edges.after) && _jsx("button", { className: "tr-att__nav tr-att__nav--previous", type: "button", "aria-label": "Previous images", "aria-disabled": !edges.before, "data-edge": !edges.before || undefined, "aria-controls": id, onClick: () => page(-1), children: "\u2039" }), (edges.before || edges.after) && _jsx("button", { className: "tr-att__nav tr-att__nav--next", type: "button", "aria-label": "Next images", "aria-disabled": !edges.after, "data-edge": !edges.after || undefined, "aria-controls": id, onClick: () => page(1), children: "\u203A" })] });
+}