@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/components/Transcript.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import type { SessionRow } from "@vibefield/rosetta-protocol";
+import type { TimelineFeed } from "../lib/hooks.js";
+import type { ProjectViewModel } from "../lib/model.js";
+import type { ThreadFocus } from "./transcript/thread-index.js";
+import type { RoomHeadActs } from "../host-inputs.js";
+export type { ThreadFocus } from "./transcript/thread-index.js";
+/** The stepper's face: the query, where the reader is, how many there are. */
+export interface MatchStepperState {
+    readonly query: string;
+    readonly at: number;
+    readonly total: number;
+}
+export interface TranscriptColumnProps {
+    readonly session: SessionRow | null;
+    /** The cold backfill is running — threaded to every watermark. */
+    readonly duringBackfill: boolean;
+    /** Full metadata topology. Only roots are navigable, but descendants are
+     * needed here to build the embedded thread tree. */
+    readonly sessions: readonly SessionRow[];
+    readonly project: ProjectViewModel | null;
+    readonly feed: TimelineFeed;
+    readonly focus: ThreadFocus | null;
+    readonly onFocusConsumed: () => void;
+    readonly onReceipt: (text: string) => void;
+    /** The sentence under "No session open": the host's, or the room's own,
+     * which names a search key only when the host binds one (RO-14). */
+    readonly emptyPrompt: ReactNode;
+    /** The search sheet's tail: this session's matches, walked from the head. */
+    readonly stepper: MatchStepperState | null;
+    readonly onStepMatch: (delta: 1 | -1) => void;
+    readonly onDismissStepper: () => void;
+    /** The session's runtime, for the reply's mark and name (T-4). */
+    readonly getRuntimeKind: (runtimeId: string) => string;
+    readonly homeDirectory: string | null;
+    readonly onOpenThread?: (sessionId: string) => void;
+    readonly onBackToParent?: (() => void) | null;
+    /** The reader (PK3): the document alone, read-only. No head band and no
+     * acts — no session work, no day menu, no "Latest", no dialog — and a
+     * landing stays marked rather than fading. */
+    readonly reader?: boolean | undefined;
+    /** R5: the host's acts in the head, before the activity act, or its reason
+     * after the range. */
+    readonly headActs?: RoomHeadActs | null | undefined;
+}
+export declare function TranscriptColumn(props: TranscriptColumnProps): import("react").JSX.Element;

package/dist/components/Transcript.js

@@ -0,0 +1,358 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Column ④ — the transcript: a document, not a chat log.
+//
+// The column is the frame; the document inside it is `components/transcript`.
+// What lives here is what belongs to the COLUMN rather than to the reading:
+// the head band and its two acts, the scroller and the four things pinned to
+// it (the top fade, the day pill's menu, the earlier receipt, the live tail's
+// notice), the match stepper the search sheet leaves in the head, and the
+// focus landing that brings a search hit home.
+//
+// Its props are App.tsx's contract and have not moved, except for the two
+// facts the record's own drawing needs: the session's runtime (the reply's
+// mark and name, T-4) and the viewer's home directory (a path is drawn
+// relative to the session's cwd, then home-relative — never the eleven leading
+// characters that are the same on every line).
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { clockShort } from "../lib/format.js";
+import { useHeadOfDocument } from "../lib/transcript/head-of-document.js";
+import { useTranscriptTail } from "../lib/transcript/use-transcript-tail.js";
+import { useTranscriptOpening } from "../lib/transcript/use-transcript-opening.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { MatchStepper } from "./search/index.js";
+import { getSessionTitle } from "./sessions/session-display.js";
+import { DayMenu, markStuckPills } from "./transcript/DayPill.js";
+import { TranscriptDocument } from "./transcript/Document.js";
+import { TranscriptLoading } from "./transcript/TranscriptLoading.js";
+import { useTranscriptModel } from "./transcript/document-model.js";
+import { useFoldPreference } from "./transcript/fold-preference.js";
+import { MessageViewerContext } from "./transcript/MessagePreview.js";
+import { ThreadNavigationContext } from "./transcript/thread-navigation.js";
+import { handleForMessage, messageFileSource } from "./transcript/message-file-source.js";
+import { attachmentStatus } from "./transcript/Attachments.js";
+import { AuthoredMessage } from "./transcript/AuthoredMessage.js";
+import { ActivityGlyph } from "./transcript/glyphs.js";
+import { HeadOfDocument, TopFade } from "./transcript/HeadOfDocument.js";
+import { ReceiptPill } from "./transcript/ReceiptPill.js";
+import { TimelineMeta } from "./transcript/TimelineMeta.js";
+import { buildThreadIndex, messageDomId } from "./transcript/thread-index.js";
+import { ColumnHeading, EmptyState } from "./ui/index.js";
+import { FileViewerDialog } from "./file-viewer/index.js";
+import { ImageGalleryDialog } from "./file-viewer/ImageGalleryDialog.js";
+import { useAttachmentReader } from "./transcript/attachment-file-source.js";
+import { attachmentGallery, createAttachmentGallerySource } from "./transcript/attachment-gallery.js";
+import { handleForReadPath, transcriptReadFileSource, } from "./transcript/read-file-source.js";
+import { handleForTimelineMetaArtifact, handleForTimelineMetaPlan, timelineMetaFileSource, } from "./transcript/timeline-meta-file-source.js";
+import { scrollRowTo } from "./transcript/scroll-to-row.js";
+import { HostAct } from "./HostAct.js";
+import { activityCuts } from "./transcript/activity-plan.js";
+import { ReadingSessionProvider, useRoom } from "../room-context.js";
+/** The receipt lands beneath a pinned day pill, never over it (§08).
+ * Measured rather than guessed: the scroller starts 46px down (the head band),
+ * a pinned pill occupies 58–80, and the first pill still in the flow starts at
+ * 124. 88 is the one band that clears both. */
+const RECEIPT_TOP = 88;
+export function TranscriptColumn(props) {
+    // Selection owns the document's disclosures, overlays and opening state.
+    // Reset them in the selection commit, before the previous session can paint.
+    return (_jsx(ReadingSessionProvider, { value: props.session?.id ?? null, children: _jsx(SessionTranscript, { ...props }, props.session?.id ?? "no-session") }));
+}
+function SessionTranscript({ session, duringBackfill, sessions, project, feed, focus, onFocusConsumed, onReceipt, emptyPrompt, stepper, onStepMatch, onDismissStepper, getRuntimeKind, homeDirectory, onOpenThread, onBackToParent, reader = false, headActs = null, }) {
+    const { sessions: leases, host } = useRoom();
+    const listBrowsers = useMemo(() => host?.browsers?.bind(host), [host]);
+    const openInBrowser = useMemo(() => (host === null ? null : (name, bytes, browserId) => host.openInBrowser(name, bytes, browserId)), [host]);
+    const attachments = useAttachmentReader();
+    const gallerySource = useMemo(() => createAttachmentGallerySource(attachments), [attachments]);
+    const threadNavigation = useMemo(() => ({ depth: 0, open: onOpenThread ?? null }), [onOpenThread]);
+    const scrollRef = useRef(null);
+    const focusAfterOpening = useRef(false);
+    const [highlightedTimelineId, setHighlightedTimelineId] = useState(null);
+    const [menu, setMenu] = useState(null);
+    const [viewerTarget, setViewerTarget] = useState(null);
+    const [imageGallery, setImageGallery] = useState(null);
+    const [metaFocus, setMetaFocus] = useState(null);
+    const viewerRequest = useRef(0);
+    const anchorRequest = useRef(0);
+    const focusTries = useRef(0);
+    // One exact read per landing target, before any blind walk.
+    const anchorTried = useRef(null);
+    const index = useMemo(() => buildThreadIndex(sessions), [sessions]);
+    const fold = useFoldPreference();
+    const requestedTimelineId = focus !== null && focus.sessionId === session?.id ? focus.timelineId : null;
+    const targetTimelineId = requestedTimelineId ?? metaFocus?.timelineId ?? null;
+    const targetIsMeta = requestedTimelineId === null && metaFocus !== null;
+    const cuts = useMemo(() => activityCuts(feed.rows, feed.watermark), [feed.rows, feed.watermark]);
+    const model = useTranscriptModel(feed.rows, session, homeDirectory, Date.now(), { cutBefore: cuts.cutBefore });
+    const opening = useTranscriptOpening(feed.snapshotReady, focus !== null || metaFocus !== null);
+    const loading = session !== null && opening.visible;
+    useEffect(() => {
+        if (loading || !focusAfterOpening.current)
+            return;
+        focusAfterOpening.current = false;
+        scrollRef.current?.focus({ preventScroll: true });
+    }, [loading]);
+    // §08 — the head of the document: approach fetches and holds, the pull
+    // reveals, and the landing keeps the reader exactly where they were.
+    const headOfDocument = useHeadOfDocument(scrollRef, feed, {
+        enabled: session !== null && !loading,
+    });
+    const tail = useTranscriptTail(scrollRef, session?.id ?? null, session !== null, focus !== null || metaFocus !== null, loading);
+    const displayedLayout = useRef(null);
+    const onTimelineLayout = useCallback((layout) => {
+        displayedLayout.current = layout;
+        tail.onLayout(layout);
+        opening.onLayout(layout);
+    }, [tail.onLayout, opening.onLayout, loading]);
+    useEffect(() => () => {
+        // A keyed session change unmounts this scope; invalidate any exact reads
+        // that could otherwise deliver a receipt after the reader has moved on.
+        viewerRequest.current += 1;
+        anchorRequest.current += 1;
+    }, []);
+    const openAttachment = (fact, row) => {
+        // The reader opens nothing over its host: it shows the document as it is.
+        if (reader)
+            return;
+        viewerRequest.current += 1;
+        if (!attachments.canOpen(fact)) {
+            onReceipt(attachmentStatus(fact));
+            return;
+        }
+        if (viewerTarget?.message === undefined)
+            setViewerTarget(null);
+        setImageGallery(attachmentGallery(attachments, fact, row));
+    };
+    const openMessage = useCallback((message) => {
+        viewerRequest.current += 1;
+        setViewerTarget({ handle: handleForMessage(message),
+            source: message.recordedText?.type === "member" ? attachments.fileSource : messageFileSource, message });
+    }, [attachments]);
+    const openReadPath = (path, previewBytes, name) => {
+        if (reader)
+            return;
+        const request = (viewerRequest.current += 1);
+        void handleForReadPath(leases, path, previewBytes, name)
+            .then((handle) => {
+            if (request !== viewerRequest.current)
+                return;
+            if (handle === null) {
+                onReceipt("That row did not record an openable file");
+                return;
+            }
+            setViewerTarget({ handle, source: transcriptReadFileSource });
+        })
+            .catch((error) => {
+            if (request !== viewerRequest.current)
+                return;
+            onReceipt(error instanceof Error ? error.message : "Could not open that recorded file");
+        });
+    };
+    const openMetaFile = (load, unavailable) => {
+        const request = (viewerRequest.current += 1);
+        void load()
+            .then((handle) => {
+            if (request !== viewerRequest.current)
+                return;
+            setViewerTarget({ handle, source: timelineMetaFileSource });
+        })
+            .catch((error) => {
+            if (request !== viewerRequest.current)
+                return;
+            onReceipt(error instanceof Error ? error.message : unavailable);
+        });
+    };
+    const openMetaPlan = (plan) => {
+        if (session === null)
+            return;
+        openMetaFile(() => handleForTimelineMetaPlan(leases, session.id, plan), "Could not open that recorded plan");
+    };
+    const openMetaArtifact = (artifact) => {
+        if (session === null)
+            return;
+        openMetaFile(() => handleForTimelineMetaArtifact(leases, session.id, artifact), "Could not open that recorded artifact");
+    };
+    const openMetaTimeline = (timelineId, label, kind) => {
+        if (timelineId === null) {
+            onReceipt(`That ${kind} has no recorded message anchor`);
+            return;
+        }
+        const land = () => {
+            focusTries.current = 0;
+            setMetaFocus({ timelineId, label, kind });
+        };
+        if (model.representatives.has(timelineId)) {
+            land();
+            return;
+        }
+        const request = (anchorRequest.current += 1);
+        void feed.loadAnchor(timelineId)
+            .then((loaded) => {
+            if (request !== anchorRequest.current || !loaded)
+                return;
+            land();
+        })
+            .catch((error) => {
+            if (request !== anchorRequest.current)
+                return;
+            onReceipt(error instanceof Error ? error.message : `Could not load that ${kind} message`);
+        });
+    };
+    const openMetaTask = (task) => {
+        openMetaTimeline(task.timeline_id, task.subject, "task");
+    };
+    const openMetaWorkflow = (workflow) => {
+        openMetaTimeline(workflow.timeline_id, workflow.name, "workflow");
+    };
+    useEffect(() => {
+        focusTries.current = 0;
+        anchorTried.current = null;
+        // Only a NEW target clears the ring. Consuming the focus sets the target
+        // to null, and clearing on that would wipe the ring in the same frame it
+        // was drawn — the landing would scroll and then show nothing.
+        if (targetTimelineId !== null)
+            setHighlightedTimelineId(null);
+    }, [targetTimelineId]);
+    useEffect(() => {
+        // Wait for the subscription to have DELIVERED, not merely opened: a feed
+        // that has not had its first snapshot reports nothing above it, and acting
+        // on that would tell the reader a row is older than the loaded history
+        // one frame before the history exists.
+        if (targetTimelineId === null ||
+            session === null ||
+            !feed.snapshotReady ||
+            (feed.status !== "live" && feed.status !== "resyncing")) {
+            return;
+        }
+        // A fold draws several rows as one line, so the landing goes to the
+        // element that CONTAINS the row rather than failing to find its own.
+        const drawnBy = model.representatives.get(targetTimelineId) ?? null;
+        if (drawnBy !== null) {
+            const displayed = displayedLayout.current?.sessionId === session.id ? displayedLayout.current : null;
+            const element = displayed?.elementForAnchor?.(targetTimelineId)
+                ?? document.getElementById(messageDomId(session.id, drawnBy));
+            const scroller = scrollRef.current;
+            if (element && scroller) {
+                tail.pause();
+                // Scroll the transcript's own scroller, never `scrollIntoView`: that
+                // walks every ancestor, and the room's overflow-hidden frame would
+                // quietly scroll the search strip out of the window (seen 2026-09-09).
+                if (element.getClientRects().length > 0)
+                    scrollRowTo(scroller, element, "center");
+                setHighlightedTimelineId(element.dataset.timelineId ?? drawnBy);
+                if (targetIsMeta) {
+                    onReceipt(`Landed on the ${metaFocus.kind} message · ${metaFocus.label}`);
+                    setMetaFocus(null);
+                }
+                else {
+                    onFocusConsumed();
+                }
+                if (!reader)
+                    window.setTimeout(() => setHighlightedTimelineId(null), 1500);
+            }
+            return;
+        }
+        // timeline_meta resolves exact anchors before setting focus.
+        if (targetIsMeta) {
+            const kind = metaFocus.kind;
+            setMetaFocus(null);
+            onReceipt(`That ${kind} message is no longer available`);
+            return;
+        }
+        // A search landing asks for its row exactly, once — the same read the
+        // work index uses — and only walks blindly if that row lands but no line
+        // draws it yet.
+        if (anchorTried.current !== targetTimelineId) {
+            anchorTried.current = targetTimelineId;
+            const request = (anchorRequest.current += 1);
+            void feed.loadAnchor(targetTimelineId)
+                .then((loaded) => {
+                if (request !== anchorRequest.current || loaded)
+                    return;
+                onFocusConsumed();
+                onReceipt("That message is no longer available");
+            })
+                .catch((error) => {
+                if (request !== anchorRequest.current)
+                    return;
+                onFocusConsumed();
+                onReceipt(error instanceof Error ? error.message : "Could not load that message");
+            });
+            return;
+        }
+        if (feed.earlier.kind !== "none" && focusTries.current < 8) {
+            focusTries.current += 1;
+            feed.loadEarlier();
+        }
+        else if (feed.earlier.kind === "none") {
+            if (targetIsMeta)
+                setMetaFocus(null);
+            else
+                onFocusConsumed();
+            onReceipt("That message is older than the loaded history");
+        }
+    }, [targetTimelineId, targetIsMeta, metaFocus, session, feed, model, onFocusConsumed, onReceipt, reader]);
+    // The pill pins while the reader is inside its day, and returns to its
+    // hairline the moment that day scrolls back into view.
+    useEffect(() => {
+        markStuckPills(scrollRef.current);
+    }, [model.plan]);
+    const range = (() => {
+        if (!session)
+            return "";
+        if (!session.activity)
+            return "Activity time unknown";
+        return `${clockShort(session.activity.first_at)} → ${clockShort(session.activity.last_at)}`;
+    })();
+    const jumpToDay = (day) => {
+        setMenu(null);
+        const scroller = scrollRef.current;
+        if (scroller === null)
+            return;
+        const target = scroller.querySelector(`[data-sitting-key="${CSS.escape(day.firstSittingKey)}"]`);
+        if (target === null)
+            return;
+        // Section-relative offsets do not survive a sticky pill; the rects do.
+        tail.pause();
+        scroller.scrollTo({
+            top: target.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop - 4,
+            behavior: prefersReducedMotion() ? "instant" : "smooth",
+        });
+        const prompt = target.querySelector(".tr-prompt");
+        if (prompt === null)
+            return;
+        prompt.classList.add("is-landed");
+        window.setTimeout(() => prompt.classList.remove("is-landed"), 1400);
+    };
+    return (_jsx(ThreadNavigationContext.Provider, { value: threadNavigation, children: _jsx(MessageViewerContext.Provider, { value: reader ? null : openMessage, children: _jsxs("div", { className: "ah-col ah-col--measure", style: { position: "relative" }, "data-fold": fold.folded ? "on" : "off", children: [!reader && _jsxs("header", { children: [onBackToParent && _jsx("button", { type: "button", className: "tr-parent-link", title: "Back to parent transcript", "aria-label": "Back to parent transcript", onClick: onBackToParent, children: "\u2190" }), session === null ? (_jsx("div", { className: "ah-colhead", children: _jsx("span", { className: "ah-eyebrow", children: "Transcript" }) })) : (_jsx(ColumnHeading, { name: getSessionTitle(session), tint: project?.tint ?? null, count: loading ? null : feed.rows.length, countTitle: `${feed.rows.length} messages loaded` })), _jsxs("span", { className: "ah-headacts", children: [stepper !== null && session !== null ? (_jsx(MatchStepper, { query: stepper.query, at: stepper.at, total: stepper.total, onStep: onStepMatch, onDismiss: onDismissStepper })) : (_jsx("span", { className: "ah-caption tnum", children: range })), session !== null && headActs !== null && headActs.reason !== undefined && headActs.reason !== null && (_jsx("span", { className: "ah-caption ah-headreason", children: headActs.reason })), session !== null && headActs?.acts?.map((act) => _jsx(HostAct, { act: act, place: "pill" }, act.key)), session !== null && (
+                                    // §05 — the activity act, beside the range. Folded is the default;
+                                    // the reader who wants the build log gets it in one press, and the
+                                    // preference is per room, not per run.
+                                    _jsx("button", { type: "button", className: "ah-iconbtn", "aria-pressed": fold.folded, title: fold.folded
+                                            ? "Activity: conversation — show activity"
+                                            : "Activity: showing activity — return to conversation", onClick: fold.toggle, children: _jsx(ActivityGlyph, {}) }))] })] }), _jsxs("div", { className: "tr-stage", "data-ready": !loading || undefined, children: [_jsxs("div", { className: "tr-surface", inert: loading, "aria-hidden": loading || undefined, children: [!reader && session !== null && feed.timelineMeta !== null && (_jsx(TimelineMeta, { meta: feed.timelineMeta, onOpenTask: openMetaTask, onOpenWorkflow: openMetaWorkflow, onOpenPlan: openMetaPlan, onOpenArtifact: openMetaArtifact })), _jsxs("div", { className: "ah-scroll tr-scroll", "data-flush": "", ref: scrollRef, tabIndex: 0, role: "region", "aria-label": "Session messages", "aria-busy": loading, onScroll: () => markStuckPills(scrollRef.current), children: [_jsx(TopFade, {}), session === null ? (_jsx(EmptyState, { title: "No session open", description: emptyPrompt })) : (_jsx("div", { className: "tr-col", children: _jsx("div", { className: "tr", children: _jsx(TranscriptDocument, { session: session, model: model, feed: feed, duringBackfill: duringBackfill, index: index, focus: focus, highlightedTimelineId: highlightedTimelineId, onFocusConsumed: onFocusConsumed, onReceipt: onReceipt, onOpenAttachment: openAttachment, onOpenPath: openReadPath, getRuntimeKind: getRuntimeKind, homeDirectory: homeDirectory, onTimelineLayout: onTimelineLayout, onPillPress: reader ? null : (element, dayKey) => {
+                                                            const frame = element.closest(".ah-col");
+                                                            if (frame === null)
+                                                                return;
+                                                            const top = element.getBoundingClientRect().bottom - frame.getBoundingClientRect().top + 6;
+                                                            setMenu((open) => (open === null ? { top, dayKey } : null));
+                                                        }, head: _jsx(HeadOfDocument, { feed: feed, pull: headOfDocument.pull, startedAt: session.activity?.first_at ?? null, finding: targetTimelineId === null ? null : "an anchor" }) }) }) }))] })] }), loading && _jsx(TranscriptLoading, { error: feed.snapshotReady ? null : feed.error ?? null, waitingForTeam: opening.waitingForTeam, seeking: focus !== null, canContinue: feed.snapshotReady && (opening.waitingForTeam || focus !== null), indexing: duringBackfill && session.stream_state !== "indexed", onRetry: () => { focusAfterOpening.current = true; feed.retry(); }, onContinue: () => {
+                                    focusAfterOpening.current = true;
+                                    if (focus !== null)
+                                        onFocusConsumed();
+                                    tail.latest();
+                                    opening.continueReading();
+                                } })] }), menu !== null && (_jsx(DayMenu, { days: model.days, currentDayKey: menu.dayKey, top: menu.top, onJump: jumpToDay, onDismiss: () => setMenu(null) })), _jsx(ReceiptPill, { receipt: headOfDocument.receipt, top: RECEIPT_TOP }), !reader && session !== null && (_jsxs("button", { type: "button", className: "ah-newpill", "data-visible": (!loading && tail.away) || undefined, "data-unread": tail.unseen > 0 || undefined, inert: loading || !tail.away, "aria-hidden": loading || !tail.away, "aria-label": tail.unseen > 0
+                            ? `Scroll to latest · ${tail.unseen} new ${tail.unseen === 1 ? "message" : "messages"}`
+                            : "Scroll to latest message", onClick: () => {
+                            // Keep keyboard navigation on the reading surface after the
+                            // button fades, instead of leaving focus on an inert control.
+                            scrollRef.current?.focus({ preventScroll: true });
+                            tail.latest();
+                        }, children: [_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8 3v10m-4-4 4 4 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { children: tail.unseen > 0 ? `${tail.unseen} new ${tail.unseen === 1 ? "message" : "messages"}` : "Latest" }), tail.unseen > 0 && _jsx("i", { "aria-hidden": "true" })] })), !reader && _jsx("span", { className: "ah-tail-announcement", role: "status", "aria-live": "polite", "aria-atomic": "true", children: tail.away && tail.unseen > 0
+                            ? `${tail.unseen} new ${tail.unseen === 1 ? "message" : "messages"}. Scroll to latest to read.`
+                            : "" }), !reader && _jsx(FileViewerDialog, { renderMarkdown: viewerTarget?.message === undefined ? undefined : (text) => _jsx(AuthoredMessage, { text: text, messageKey: viewerTarget.message.key, role: viewerTarget.message.role, preview: false, attachments: viewerTarget.message.attachments ?? [], onOpenAttachment: openAttachment, onReceipt: onReceipt }), handle: viewerTarget?.handle ?? null, source: viewerTarget?.source ?? attachments.fileSource, tint: project?.tint ?? null, homeDirectory: homeDirectory, onClose: () => {
+                            viewerRequest.current += 1;
+                            setViewerTarget(null);
+                            setImageGallery(null);
+                        }, onReceipt: onReceipt, listBrowsers: listBrowsers, openInBrowser: openInBrowser }), !reader && imageGallery && _jsx(ImageGalleryDialog, { ...imageGallery, source: gallerySource, tint: project?.tint ?? null, homeDirectory: homeDirectory, onClose: () => setImageGallery(null), onReceipt: onReceipt, listBrowsers: listBrowsers, openInBrowser: openInBrowser })] }) }) }));
+}

package/dist/components/charts/ActivityChartDetail.d.ts

@@ -0,0 +1,13 @@
+import type { CalendarHeatmapData } from "./types.js";
+import "../../styles/activity-chart.css";
+export interface ActivityChartDetailProps {
+    readonly projectId: string;
+    readonly name: string;
+    readonly color: string;
+    readonly data: CalendarHeatmapData;
+    readonly today: string;
+    readonly offsetMinutes: number;
+    readonly currentTimestamp: number;
+    readonly modelColors: Readonly<Record<string, string>>;
+}
+export declare function ActivityChartDetail({ projectId, name, color, data, today, offsetMinutes, currentTimestamp, modelColors, }: ActivityChartDetailProps): import("react").JSX.Element;

package/dist/components/charts/ActivityChartDetail.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useState } from "react";
+import { CalendarHeatmap } from "./CalendarHeatmap.js";
+import { DayActivityChart } from "./DayActivityChart.js";
+import { createActivityDetails } from "../../lib/activity-details.js";
+import { useDayUsage } from "../../lib/use-day-usage.js";
+import { tokenText } from "../../lib/format.js";
+import "../../styles/activity-chart.css";
+const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function dateLabel(key, weekday = false, year = false) {
+    return new Date(`${key}T12:00:00`).toLocaleDateString("en-US", {
+        ...(weekday ? { weekday: "short" } : {}),
+        ...(weekday || year ? { year: "numeric" } : {}),
+        month: "short", day: "numeric",
+    });
+}
+export function ActivityChartDetail({ projectId, name, color, data, today, offsetMinutes, currentTimestamp, modelColors, }) {
+    const [selectedId, setSelectedId] = useState(null);
+    const [preview, setPreview] = useState(null);
+    const [calendarElement, setCalendarElement] = useState(null);
+    const [calendarWidth, setCalendarWidth] = useState(1000);
+    const [calendarPage, setCalendarPage] = useState(null);
+    useLayoutEffect(() => {
+        const node = calendarElement;
+        if (!node)
+            return;
+        // A visited tab stays mounted while hidden; retain its calendar page layout.
+        const measure = () => { if (node.clientWidth > 0)
+            setCalendarWidth(node.clientWidth); };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [calendarElement]);
+    const details = useMemo(() => createActivityDetails(data, today), [data, today]);
+    const currentIsBest = Boolean(details.currentRun && details.currentRun.start === details.bestRun?.start);
+    const availableDays = details.days.filter(day => day.value !== null);
+    const selectedDay = availableDays.find(day => day.id === selectedId)
+        ?? availableDays.filter(day => day.value > 0).at(-1) ?? availableDays.at(-1) ?? null;
+    const selectedIndex = availableDays.findIndex(day => day.id === selectedDay?.id);
+    // Page weeks only when the window cannot keep the day targets readable.
+    // Day selection and the previous/next-day actions follow their calendar page.
+    const maxWeeks = Math.max(1, Math.floor((calendarWidth - 30) / 16));
+    const pageCount = Math.max(1, Math.ceil(details.calendar.weeks.length / maxWeeks));
+    const weeksPerPage = Math.max(1, Math.ceil(details.calendar.weeks.length / pageCount));
+    const selectedWeek = details.calendar.weeks.findIndex(week => week.days.some(day => day.id === selectedDay?.id));
+    const page = Math.min(pageCount - 1, calendarPage ?? Math.floor(Math.max(0, selectedWeek) / weeksPerPage));
+    const visibleCalendar = { weeks: details.calendar.weeks.slice(page * weeksPerPage, (page + 1) * weeksPerPage) };
+    const calendarLayoutWidth = Math.min(calendarWidth, Math.max(300, visibleCalendar.weeks.length * 16 + 30));
+    const usage = useDayUsage(projectId, selectedDay?.id ?? null, offsetMinutes);
+    const modelRows = usage.data?.models ?? [];
+    const hourlyTotal = modelRows.reduce((sum, row) => sum + row.tokens, 0);
+    const selectDay = (day) => { setSelectedId(day.id); setPreview(null); setCalendarPage(null); };
+    const markers = {};
+    for (const day of details.days) {
+        const current = details.currentRun && day.id >= details.currentRun.start && day.id <= details.currentRun.end;
+        const best = details.bestRun && day.id >= details.bestRun.start && day.id <= details.bestRun.end;
+        if (current || best)
+            markers[day.id] = current && best ? "both" : current ? "current" : "best";
+    }
+    const jumpToRun = (run) => {
+        setSelectedId(run.end);
+        setPreview(null);
+        setCalendarPage(null);
+    };
+    return _jsxs("div", { className: "ah-activity", style: { "--activity-color": color }, children: [_jsxs("section", { className: "ah-activity__calendar", "aria-labelledby": "activity-calendar-title", children: [_jsxs("div", { className: "ah-activity__toolbar", children: [_jsxs("div", { children: [_jsx("h2", { id: "activity-calendar-title", children: "Daily activity" }), _jsxs("p", { children: [dateLabel(details.start, false, true), " \u2013 ", dateLabel(details.end, false, true), " \u00B7 ", details.activeDayCount, " active days"] })] }), pageCount > 1 && _jsxs("div", { className: "ah-activity__calendar-nav", "aria-label": "Calendar pages", children: [_jsx("button", { type: "button", "aria-label": "Earlier calendar weeks", disabled: page === 0, onClick: () => { setCalendarPage(page - 1); setPreview(null); }, children: "\u2190" }), _jsxs("span", { children: [page + 1, "/", pageCount] }), _jsx("button", { type: "button", "aria-label": "Later calendar weeks", disabled: page === pageCount - 1, onClick: () => { setCalendarPage(page + 1); setPreview(null); }, children: "\u2192" })] })] }), _jsx("div", { className: "ah-activity__calendar-scroll", ref: setCalendarElement, children: _jsxs("div", { className: "ah-activity__calendar-layout", style: {
+                                "--activity-weeks": visibleCalendar.weeks.length,
+                                "--activity-footer-width": `${Math.max(0, calendarLayoutWidth - 30)}px`,
+                                width: calendarLayoutWidth,
+                            }, children: [_jsx("div", { className: "ah-activity__weekdays", "aria-hidden": "true", children: WEEKDAYS.map(day => _jsx("span", { children: day }, day)) }), _jsx(CalendarHeatmap, { data: visibleCalendar, color: color, ariaLabel: `Daily token activity for ${name}. Use arrow keys to navigate days.`, summary: preview ? `${dateLabel(preview.id)} · ${tokenText(preview.value)} tokens`
+                                        : "Select a day", selectedDayId: selectedDay?.id, onDaySelect: selectDay, onDayPreview: setPreview, dayMarkers: markers })] }) }), _jsxs("div", { className: "ah-activity__runs", "aria-label": "Activity runs in the 53-week history", children: [details.currentRun && _jsxs("button", { type: "button", className: "ah-activity__run", "data-run-link": "current", title: `${dateLabel(details.currentRun.start, false, true)} – ${dateLabel(details.currentRun.end, false, true)}`, onClick: () => jumpToRun(details.currentRun), children: [_jsx("i", { "data-kind": currentIsBest ? "both" : "current" }), _jsxs("span", { children: [currentIsBest ? "Current & longest run" : "Current run", " ", _jsxs("b", { children: [details.currentRun.length, " days"] })] }), _jsxs("small", { children: [dateLabel(details.currentRun.start), " \u2013 ", dateLabel(details.currentRun.end)] })] }), details.bestRun && !currentIsBest && _jsxs("button", { type: "button", className: "ah-activity__run", "data-run-link": "best", title: `${dateLabel(details.bestRun.start, false, true)} – ${dateLabel(details.bestRun.end, false, true)}`, onClick: () => jumpToRun(details.bestRun), children: [_jsx("i", { "data-kind": "best" }), _jsxs("span", { children: ["Longest run ", _jsxs("b", { children: [details.bestRun.length, " days"] })] }), _jsxs("small", { children: [dateLabel(details.bestRun.start), " \u2013 ", dateLabel(details.bestRun.end)] })] }), details.busiestDay && _jsxs("button", { type: "button", className: "ah-activity__jump", onClick: () => selectDay(details.busiestDay), children: ["Busiest day ", _jsx("span", { children: dateLabel(details.busiestDay.id) })] })] })] }), _jsxs("section", { className: "ah-activity__day", "aria-labelledby": "activity-day-title", "aria-busy": Boolean(selectedDay && usage.status === "loading"), children: [_jsxs("div", { className: "ah-activity__dayhead", children: [_jsxs("div", { children: [_jsx("h2", { id: "activity-day-title", children: selectedDay ? dateLabel(selectedDay.id, true) : "No recorded days" }), _jsx("p", { children: selectedDay ? `${tokenText(usage.status === "ready" && hourlyTotal > 0 ? hourlyTotal : selectedDay.value)} tokens · hourly activity by model · local time`
+                                            : "Activity will appear here when usage is recorded." })] }), _jsxs("div", { className: "ah-activity__daynav", children: [_jsx("button", { type: "button", "aria-label": "Previous recorded day", disabled: selectedIndex <= 0, onClick: () => selectDay(availableDays[selectedIndex - 1]), children: "\u2190" }), _jsx("button", { type: "button", "aria-label": "Next recorded day", disabled: selectedIndex < 0 || selectedIndex >= availableDays.length - 1, onClick: () => selectDay(availableDays[selectedIndex + 1]), children: "\u2192" })] })] }), !selectedDay ? _jsx("div", { className: "ah-activity__empty", children: "Choose a recorded day in the calendar to explore it." })
+                        : usage.status === "loading" ? _jsx("div", { className: "ah-activity__empty", role: "status", children: "Loading hourly activity\u2026" })
+                            : usage.status === "error" ? _jsxs("div", { className: "ah-activity__empty", role: "status", children: [_jsx("strong", { children: "Hourly activity couldn\u2019t be loaded" }), _jsx("span", { children: "Try loading this day again." }), _jsx("button", { type: "button", onClick: usage.retry, children: "Retry" })] })
+                                : hourlyTotal === 0 ? _jsxs("div", { className: "ah-activity__empty", children: [_jsx("strong", { children: selectedDay.value === 0 ? "No token activity on this day" : "Hourly breakdown unavailable" }), _jsx("span", { children: selectedDay.value === 0 ? "Choose another day to see when and which models were used."
+                                                : "The calendar has a daily total, but no hourly usage was returned for this day." })] })
+                                    : _jsxs(_Fragment, { children: [_jsx(DayActivityChart, { rows: modelRows, modelColors: modelColors, lastHour: selectedDay.id === today ? new Date(currentTimestamp).getHours() : 23 }, selectedDay.id), hourlyTotal !== selectedDay.value && _jsx("p", { className: "ah-activity__updated", children: "Usage has changed since the calendar was loaded." })] })] })] });
+}

package/dist/components/charts/CalendarHeatmap.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { CalendarHeatmapCellData, CalendarHeatmapData } from "./types.js";
+export interface CalendarHeatmapProps {
+    readonly data: CalendarHeatmapData;
+    readonly color: string;
+    readonly ariaLabel: string;
+    readonly summary?: ReactNode;
+    readonly lowIntensityLabel?: string;
+    readonly highIntensityLabel?: string;
+    /** Supplying a selection handler enables keyboard and pointer inspection. */
+    readonly selectedDayId?: string | undefined;
+    readonly onDaySelect?: (day: CalendarHeatmapCellData) => void;
+    readonly onDayPreview?: (day: CalendarHeatmapCellData | null) => void;
+    readonly dayMarkers?: Readonly<Record<string, "current" | "best" | "both">>;
+}
+export declare function CalendarHeatmap({ data, color, ariaLabel, summary, lowIntensityLabel, highIntensityLabel, selectedDayId, onDaySelect, onDayPreview, dayMarkers, }: CalendarHeatmapProps): import("react").JSX.Element;

package/dist/components/charts/CalendarHeatmap.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+const MAX_INTENSITY_LEVEL = 4;
+const INTENSITY_LEVELS = [0, 1, 2, 3, 4];
+function getIntensityLevel(value, peak) {
+    if (!Number.isFinite(value) || value <= 0 || peak <= 0)
+        return 0;
+    const ratio = value / peak;
+    if (ratio > 0.66)
+        return 4;
+    if (ratio > 0.4)
+        return 3;
+    if (ratio > 0.18)
+        return 2;
+    return 1;
+}
+export function CalendarHeatmap({ data, color, ariaLabel, summary, lowIntensityLabel = "less", highIntensityLabel = "more", selectedDayId, onDaySelect, onDayPreview, dayMarkers, }) {
+    const availableDays = useMemo(() => data.weeks.flatMap((week) => week.days).filter((day) => day.value !== null), [data]);
+    const tabbableDayId = availableDays.find((day) => day.id === selectedDayId)?.id
+        ?? availableDays.at(-1)?.id;
+    const peak = useMemo(() => data.weeks.reduce((maximum, week) => week.days.reduce((weekMaximum, day) => day.value === null || !Number.isFinite(day.value)
+        ? weekMaximum
+        : Math.max(weekMaximum, day.value), maximum), 0), [data]);
+    return (_jsxs("div", { className: "ah-calendar-heatmap", style: { "--heatmap-color": color }, children: [_jsx("div", { className: "ah-calendar-heatmap__axis", "aria-hidden": "true", children: data.weeks.map((week, weekIndex) => week.label ? (_jsx("span", { style: { left: `${((weekIndex / data.weeks.length) * 100).toFixed(2)}%` }, children: week.label }, week.id)) : null) }), _jsx("div", { className: "ah-calendar-heatmap__grid", role: onDaySelect ? "group" : "img", "aria-label": ariaLabel, onMouseLeave: () => onDayPreview?.(null), children: data.weeks.map((week) => (_jsx("span", { className: "ah-calendar-heatmap__week", "aria-hidden": onDaySelect ? undefined : true, children: week.days.map((day) => {
+                        const intensity = day.value === null ? 0 : getIntensityLevel(day.value, peak);
+                        if (onDaySelect && day.value !== null) {
+                            return (_jsx("button", { type: "button", className: "ah-calendar-heatmap__cell", "data-day": day.id, "data-run": dayMarkers?.[day.id], "data-empty": day.value === 0 ? "" : undefined, style: { "--heatmap-intensity": intensity }, "aria-label": day.label, "aria-pressed": selectedDayId === day.id, tabIndex: tabbableDayId === day.id ? 0 : -1, onClick: () => onDaySelect(day), onMouseEnter: () => onDayPreview?.(day), onFocus: () => onDayPreview?.(day), onBlur: () => onDayPreview?.(null), onKeyDown: (event) => {
+                                    const calendarDays = data.weeks.flatMap((week) => week.days);
+                                    const index = calendarDays.findIndex((entry) => entry.id === day.id);
+                                    const offsets = {
+                                        ArrowUp: -1, ArrowDown: 1, ArrowLeft: -7, ArrowRight: 7,
+                                    };
+                                    const targetIndex = event.key === "Home"
+                                        ? calendarDays.findIndex((entry) => entry.id === availableDays[0]?.id)
+                                        : event.key === "End"
+                                            ? calendarDays.findIndex((entry) => entry.id === availableDays.at(-1)?.id)
+                                            : event.key in offsets ? index + offsets[event.key] : null;
+                                    if (targetIndex === null)
+                                        return;
+                                    event.preventDefault();
+                                    const direction = targetIndex < index ? -1 : 1;
+                                    let target = Math.max(0, Math.min(calendarDays.length - 1, targetIndex));
+                                    while (calendarDays[target]?.value === null)
+                                        target += direction;
+                                    const next = calendarDays[target];
+                                    if (!next || next.value === null)
+                                        return;
+                                    onDaySelect(next);
+                                    event.currentTarget.closest(".ah-calendar-heatmap__grid")
+                                        ?.querySelector(`[data-day="${next.id}"]`)?.focus();
+                                } }, day.id));
+                        }
+                        return (_jsx("span", { className: "ah-calendar-heatmap__cell", "data-empty": day.value === 0 ? "" : undefined, "data-unavailable": day.value === null ? "" : undefined, style: { "--heatmap-intensity": intensity }, title: day.label }, day.id));
+                    }) }, week.id))) }), _jsxs("div", { className: "ah-calendar-heatmap__footer", children: [summary === undefined ? _jsx("span", {}) : _jsx("span", { children: summary }), _jsxs("span", { className: "ah-calendar-heatmap__legend", "aria-hidden": "true", children: [lowIntensityLabel, INTENSITY_LEVELS.map((level) => (_jsx("i", { "data-empty": level === 0 ? "" : undefined, style: { "--heatmap-intensity": Math.min(level, MAX_INTENSITY_LEVEL) } }, level))), highIntensityLabel] })] })] }));
+}

package/dist/components/charts/DayActivityChart.d.ts

@@ -0,0 +1,8 @@
+import type { ModelHour } from "@vibefield/rosetta-protocol";
+/** Smooth curves pass through the hourly samples on a shared token scale.
+ * Dashed future guides carry no estimated usage or gradient fill. */
+export declare function DayActivityChart({ rows, lastHour, modelColors }: {
+    readonly rows: readonly ModelHour[];
+    readonly lastHour?: number;
+    readonly modelColors?: Readonly<Record<string, string>>;
+}): import("react").JSX.Element;