@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/transcript/Document.js

@@ -0,0 +1,503 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// The document — §03's anatomy, drawn.
+//
+// Primary speech stays visible; adjacent secondary events share one activity
+// fold (§04B), after ownership and team chronology. Blocks retain their
+// sittings (§07), because a sticky pill's containing
+// block is its parent and only a section per sitting makes the next pill push
+// the previous one OUT instead of stacking on it.
+//
+// Everything the shipped column did keeps working here: the live watermark,
+// the focus landing from a search hit, subthreads interleaved by timestamp for
+// a parent-only link and anchored under their own delegate line when the link
+// is proven, and the honest states for a session the daemon has not reached.
+import { Fragment, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { collaborationStamp, linkedChildSessionIds, participantPresentation, runtimeProfile, runSummary, standaloneWorkerSessions, taskBoundedReportWork, teamMemberPresentations, teamChronology, teamParticipants, teamSessionIds, workerThreadLinks, workflowAttemptIndex, workflowAttemptsFor, } from "../../lib/transcript/index.js";
+import { useTeamTimelines } from "../../lib/hooks.js";
+import { useRoom } from "../../room-context.js";
+import { lastActive } from "../../lib/format.js";
+import { sessionLastActive } from "../../lib/session-activity.js";
+import { withinHistoryWindow } from "../../lib/transcript/history-window.js";
+import { EmptyState } from "../ui/index.js";
+import { Anchor } from "./Anchor.js";
+import { DayPill, Sitting } from "./DayPill.js";
+import { transcriptModel } from "./document-model.js";
+import { activityCuts, activityPlan, activityRows } from "./activity-plan.js";
+import { retainReadingIdentity } from "./reading-identity.js";
+import { ActivityGroup, ContextEvent, revealActivityTarget } from "./Activity.js";
+import { messageAttachments } from "../../lib/transcript/images.js";
+import { DisclosureState } from "./disclosure-state.js";
+import { ThreadNavigationContext } from "./thread-navigation.js";
+import { Ledger } from "./Ledger.js";
+import { GapMarker, Marker, Watermark } from "./Marker.js";
+import { Compaction } from "./Compaction.js";
+import { Prompt } from "./Prompt.js";
+import { SegmentActs } from "./Prose.js";
+import { AuthoredMessage } from "./AuthoredMessage.js";
+import { ResponseHead } from "./ResponseHead.js";
+import { Subthread } from "./Subthread.js";
+import { messageDomId, sessionContains } from "./thread-index.js";
+import { ThoughtLine } from "./Thinking.js";
+import { KnownTeamRoster, TeamEvent, TeamWorkthread } from "./Team.js";
+/** Mounted only by an open work disclosure; ordinary team traffic carries no private work. */
+function LazyReportWork({ report, ...props }) {
+    const [rows, setRows] = useState(null);
+    const [error, setError] = useState(null);
+    const { sessions } = useRoom();
+    useEffect(() => {
+        const controller = new AbortController();
+        setRows(null);
+        setError(null);
+        void sessions.run(report.session_id, (client) => client.reportWork(report.session_id, report.timeline_id, controller.signal)).then((rows) => { if (!controller.signal.aborted)
+            setRows(rows); }, (error) => { if (!controller.signal.aborted)
+            setError(error instanceof Error ? error.message : "The recorded work is unavailable"); });
+        return () => controller.abort();
+    }, [report, sessions]);
+    if (error !== null)
+        return _jsx("p", { className: "tr-quiet", children: error });
+    if (rows === null)
+        return _jsx("p", { className: "tr-quiet", children: "Loading recorded work\u2026" });
+    const work = taskBoundedReportWork(report, rows);
+    if (work === null)
+        return _jsx("p", { className: "tr-quiet", children: "The recorded work is no longer available." });
+    return (_jsxs(_Fragment, { children: [_jsxs("p", { className: "tr-quiet", children: [work.actionCount, " ", work.actionCount === 1 ? "action" : "actions"] }), _jsx(ReportWorkDocument, { ...props, rows: work.rows, startedAt: work.startedAt, endedAt: work.endedAt })] }));
+}
+function staticTimelineFeed(rows) {
+    const nothing = () => undefined;
+    return {
+        rows: [...rows],
+        snapshotReady: true,
+        error: null,
+        retry: nothing,
+        timelineMeta: null,
+        status: "live",
+        watermark: null,
+        earlier: { kind: "none" },
+        earlierNotice: null,
+        earlierAbove: 0,
+        landed: null,
+        holdEarlier: nothing,
+        revealEarlier: nothing,
+        retryEarlier: nothing,
+        dismissEarlierNotice: nothing,
+        canLoadEarlier: false,
+        loadEarlier: nothing,
+        loadAnchor: async () => false,
+    };
+}
+function ReportWorkDocument({ session, rows, name, color, runtime, startedAt, endedAt, index, onReceipt, onOpenAttachment, onOpenPath, getRuntimeKind, homeDirectory, }) {
+    const boundedSession = useMemo(() => ({ ...session, stream_state: "indexed" }), [session]);
+    const feed = useMemo(() => staticTimelineFeed(rows), [rows]);
+    const model = useMemo(() => transcriptModel(rows, boundedSession, homeDirectory, Date.now()), [rows, boundedSession, homeDirectory]);
+    const scopedIndex = useMemo(() => {
+        const linked = new Set(rows.flatMap((row) => linkedChildSessionIds(row)));
+        const childrenByParent = new Map(index.childrenByParent);
+        childrenByParent.set(session.id, (index.childrenByParent.get(session.id) ?? []).filter((child) => linked.has(child.id)));
+        return { byId: index.byId, childrenByParent };
+    }, [rows, session.id, index]);
+    return (_jsx(TeamWorkthread, { name: name, color: color, runtime: runtime, startedAt: startedAt, endedAt: endedAt, children: _jsx(TranscriptDocument, { session: boundedSession, model: model, feed: feed, duringBackfill: false, index: scopedIndex, focus: null, highlightedTimelineId: null, onFocusConsumed: () => undefined, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, onOpenPath: onOpenPath, getRuntimeKind: getRuntimeKind, homeDirectory: homeDirectory, onPillPress: null, nested: true }) }));
+}
+export function TranscriptDocument({ session, model: baseModel, feed, duringBackfill, index, focus, highlightedTimelineId: parentHighlightedTimelineId, onFocusConsumed, onReceipt, onOpenAttachment, onOpenPath, getRuntimeKind, homeDirectory, onPillPress, head, nested = false, onTimelineLayout, }) {
+    const { sessions } = useRoom();
+    const navigation = useContext(ThreadNavigationContext);
+    const childNavigation = useMemo(() => ({ ...navigation, depth: navigation.depth + 1 }), [navigation]);
+    const runtimeKind = getRuntimeKind(session.runtime_id);
+    // Stream state describes indexing. Only newly arriving conversation rows
+    // can receive an activity accent, and it expires with recorded activity.
+    const recentActivity = !duringBackfill &&
+        lastActive(sessionLastActive(session), Date.now()) === "now";
+    const directChildren = index.childrenByParent.get(session.id) ?? [];
+    const teamIds = useMemo(() => teamSessionIds(session.id, directChildren, feed.rows), [session.id, directChildren, feed.rows]);
+    const teamIdSet = useMemo(() => new Set(teamIds), [teamIds]);
+    const teamFeed = useTeamTimelines(sessions, teamIds);
+    const hasEarlier = !feed.snapshotReady || feed.earlier.kind !== "none";
+    const chronology = useMemo(() => teamChronology(feed.rows, teamFeed.rowsBySession, { hasEarlier, ready: feed.snapshotReady }), [feed.rows, teamFeed.rowsBySession, hasEarlier, feed.snapshotReady]);
+    const displayedRows = chronology.rows;
+    const cuts = useMemo(() => activityCuts(feed.rows, feed.watermark, displayedRows), [feed.rows, feed.watermark, displayedRows]);
+    const model = useMemo(() => {
+        const derived = displayedRows === feed.rows
+            ? baseModel
+            : transcriptModel(displayedRows, session, homeDirectory, Date.now(), {
+                sharedCollaborationSessionIds: teamIdSet,
+                cutBefore: cuts.cutBefore,
+            });
+        if (chronology.duplicateRepresentatives.size === 0)
+            return { ...derived, gaps: cuts.gaps };
+        return {
+            ...derived,
+            gaps: cuts.gaps,
+            representatives: new Map([
+                ...derived.representatives,
+                ...chronology.duplicateRepresentatives,
+            ]),
+        };
+    }, [
+        displayedRows,
+        feed.rows,
+        baseModel,
+        session,
+        homeDirectory,
+        teamIdSet,
+        chronology.duplicateRepresentatives,
+        cuts,
+    ]);
+    const previousReading = useRef(null);
+    const reading = useMemo(() => retainReadingIdentity(previousReading.current?.sessionId === session.id ? previousReading.current.reading : [], activityPlan(model.plan, {
+        gaps: cuts.gaps, watermarkId: cuts.watermarkId, partial: !feed.snapshotReady || feed.earlier.kind !== "none",
+    })), [session.id, model.plan, cuts, feed.snapshotReady, feed.earlier.kind]);
+    useLayoutEffect(() => { previousReading.current = { sessionId: session.id, reading }; }, [session.id, reading]);
+    const workflowAttempts = useMemo(() => workflowAttemptIndex(displayedRows), [displayedRows]);
+    const teamMembers = useMemo(() => teamMemberPresentations(feed.rows, index.byId, teamFeed.rowsBySession, teamFeed.responseRuntimesBySession, feed.snapshotReady && feed.earlier.kind === "none"), [
+        feed.rows,
+        feed.snapshotReady,
+        feed.earlier.kind,
+        index.byId,
+        teamFeed.rowsBySession,
+        teamFeed.responseRuntimesBySession,
+    ]);
+    const knownTeamSessions = useMemo(() => directChildren.filter((child) => teamIdSet.has(child.id)), [directChildren, teamIdSet]);
+    const participants = useMemo(() => teamParticipants(teamMembers, knownTeamSessions, teamFeed.rowsBySession, teamFeed.responseRuntimesBySession), [
+        teamMembers,
+        knownTeamSessions,
+        teamFeed.rowsBySession,
+        teamFeed.responseRuntimesBySession,
+    ]);
+    const sessionByTimelineId = useMemo(() => new Map(displayedRows.map((row) => [row.timeline_id, row.session_id])), [displayedRows]);
+    const focusTimelineId = focus !== null && (focus.sessionId === session.id || teamIdSet.has(focus.sessionId))
+        ? (chronology.duplicateRepresentatives.get(focus.timelineId) ?? focus.timelineId)
+        : null;
+    const domIdOf = (timelineId) => messageDomId(sessionByTimelineId.get(timelineId) ?? session.id, timelineId);
+    useLayoutEffect(() => {
+        onTimelineLayout?.({
+            sessionId: session.id,
+            rows: displayedRows,
+            observedRows: [...feed.rows, ...[...teamFeed.rowsBySession.values()].flat()],
+            ready: feed.snapshotReady && (feed.rows[0]?.session_id ?? session.id) === session.id,
+            initialReady: teamFeed.historyReady || teamFeed.historyError !== null,
+            readySessionIds: [session.id, ...(teamFeed.historyReady ? teamIds : [])],
+            elementForRow: (row) => document.getElementById(messageDomId(row.session_id, row.timeline_id)),
+            elementForAnchor: (timelineId) => {
+                const representative = model.representatives.get(timelineId) ?? timelineId;
+                return document.getElementById(messageDomId(sessionByTimelineId.get(representative) ?? session.id, representative));
+            },
+        });
+    }, [onTimelineLayout, session.id, displayedRows, feed.snapshotReady, feed.rows, teamFeed.historyReady, teamFeed.historyError, teamFeed.rowsBySession, teamIds, model.representatives, sessionByTimelineId]);
+    const teamFocus = focus !== null && teamIdSet.has(focus.sessionId) ? focus : null;
+    const [teamHighlight, setTeamHighlight] = useState(null);
+    const teamFocusRequest = useRef(null);
+    const highlightedTimelineId = teamHighlight ?? parentHighlightedTimelineId;
+    useEffect(() => {
+        if (focus === null || focus.sessionId !== session.id)
+            return;
+        const drawnBy = chronology.duplicateRepresentatives.get(focus.timelineId);
+        if (drawnBy === undefined)
+            return;
+        const element = document.getElementById(messageDomId(sessionByTimelineId.get(drawnBy) ?? session.id, drawnBy));
+        if (element === null)
+            return;
+        revealActivityTarget(element);
+        setTeamHighlight(drawnBy);
+        onFocusConsumed();
+        window.setTimeout(() => setTeamHighlight(null), 1500);
+    }, [
+        focus,
+        session.id,
+        chronology.duplicateRepresentatives,
+        sessionByTimelineId,
+        onFocusConsumed,
+    ]);
+    useEffect(() => {
+        if (teamFocus === null) {
+            teamFocusRequest.current = null;
+            return;
+        }
+        const drawnBy = model.representatives.get(teamFocus.timelineId) ?? null;
+        if (drawnBy !== null) {
+            const element = document.getElementById(messageDomId(sessionByTimelineId.get(drawnBy) ?? session.id, drawnBy));
+            if (element !== null) {
+                revealActivityTarget(element);
+                setTeamHighlight(drawnBy);
+                onFocusConsumed();
+                window.setTimeout(() => setTeamHighlight(null), 1500);
+            }
+            return;
+        }
+        const source = teamFeed.rowsBySession
+            .get(teamFocus.sessionId)
+            ?.find((row) => row.timeline_id === teamFocus.timelineId);
+        if (source?.body.type === "collaboration" && source.body.event.channel === "coordinator" &&
+            source.body.event.kind === "assignment") {
+            onFocusConsumed();
+            onReceipt("That message is private team context, not shared team chronology");
+            return;
+        }
+        // A known delivery outside the current parent window needs its surrounding
+        // conversation. Never draw a floating, apparently complete history island.
+        if (!feed.snapshotReady)
+            return;
+        if (!teamFeed.historyReady) {
+            if (teamFeed.historyError !== null) {
+                onFocusConsumed();
+                onReceipt("Could not load that team message. Retry the team history in the conversation.");
+            }
+            return;
+        }
+        if (source !== undefined && feed.earlier.kind !== "none") {
+            if (feed.earlier.kind === "idle" || feed.earlier.kind === "held")
+                feed.loadEarlier();
+            if (feed.earlier.kind === "failed" && teamFocusRequest.current !== teamFocus.timelineId) {
+                teamFocusRequest.current = teamFocus.timelineId;
+                onReceipt("Could not load the surrounding conversation. Retry loading earlier history.");
+            }
+            return;
+        }
+        onFocusConsumed();
+        onReceipt("That team message is no longer available");
+    }, [
+        teamFocus,
+        teamFeed.historyReady,
+        teamFeed.historyError,
+        teamFeed.rowsBySession,
+        feed,
+        model,
+        onFocusConsumed,
+        onReceipt,
+        session.id,
+        sessionByTimelineId,
+    ]);
+    // Children this document owns. A proven `child_session_id` anchors an
+    // ordinary Agent worker under its earliest line. Team members are consumed
+    // above as roster + shared chronology and must never open duplicate threads.
+    const workerChildren = directChildren.filter((child) => !teamIdSet.has(child.id));
+    const ledgerLines = useMemo(() => model.turns.flatMap((turn) => turn.segments.flatMap((segment) => (segment.kind === "ledger" ? segment.lines : []))), [model]);
+    const workerLinks = useMemo(() => workerThreadLinks(ledgerLines, session.id, index.byId, teamIdSet), [ledgerLines, session.id, index.byId, teamIdSet]);
+    // Protocol-v14 daemons built before workflow child references were added
+    // omit `child_session_ids`. Resolve their lightweight workflow anchors once
+    // so a rolling client upgrade remains exact instead of guessing from a
+    // worker's arbitrary agent type/title. New daemons never take this path.
+    const legacyWorkflowRows = useMemo(() => (feed.timelineMeta?.workflows ?? [])
+        .filter((workflow) => workflow.child_session_ids === undefined)
+        .map((workflow) => ({ id: workflow.id, timelineId: workflow.timeline_id })), [feed.timelineMeta]);
+    const legacyWorkflowKey = `${session.id}\u0002${legacyWorkflowRows
+        .map((workflow) => `${workflow.id}\u0000${workflow.timelineId ?? ""}`)
+        .join("\u0001")}`;
+    const [legacyWorkflowIndex, setLegacyWorkflowIndex] = useState(null);
+    useEffect(() => {
+        if (legacyWorkflowRows.length === 0) {
+            setLegacyWorkflowIndex(null);
+            return;
+        }
+        let current = true;
+        const anchors = legacyWorkflowRows.flatMap((workflow) => workflow.timelineId === null ? [] : [workflow.timelineId]);
+        void Promise.allSettled(anchors.map(async (timelineId) => {
+            const row = await sessions.run(session.id, (client) => client.timelineEntry(session.id, timelineId));
+            return linkedChildSessionIds(row);
+        })).then((results) => {
+            if (!current)
+                return;
+            const ids = new Set(results.flatMap((result) => result.status === "fulfilled" ? result.value : []));
+            setLegacyWorkflowIndex({
+                key: legacyWorkflowKey,
+                ids,
+                complete: anchors.length === legacyWorkflowRows.length
+                    && results.every((result) => result.status === "fulfilled"),
+            });
+        });
+        return () => {
+            current = false;
+        };
+    }, [legacyWorkflowKey, session.id, sessions]);
+    const indexedWorkflowChildren = useMemo(() => {
+        const ids = new Set((feed.timelineMeta?.workflows ?? []).flatMap((workflow) => workflow.child_session_ids ?? []));
+        const legacyReady = feed.timelineMeta !== null
+            && (legacyWorkflowRows.length === 0
+                || (legacyWorkflowIndex?.key === legacyWorkflowKey && legacyWorkflowIndex.complete));
+        if (legacyWorkflowIndex?.key === legacyWorkflowKey) {
+            for (const id of legacyWorkflowIndex.ids)
+                ids.add(id);
+        }
+        if (!legacyReady) {
+            // Until every old-daemon anchor answers, fail closed only for children
+            // whose sidecar proves delegation but supplies no ordinary Agent tool
+            // owner. Exact ordinary workers and parent-only children still render.
+            for (const child of workerChildren) {
+                if (child.delegation !== null
+                    && child.delegation.parent_tool_native_id == null)
+                    ids.add(child.id);
+            }
+        }
+        return ids;
+    }, [
+        feed.timelineMeta,
+        legacyWorkflowIndex,
+        legacyWorkflowKey,
+        legacyWorkflowRows.length,
+        workerChildren,
+    ]);
+    const floating = standaloneWorkerSessions(workerChildren, workerLinks, indexedWorkflowChildren).filter(child => feed.snapshotReady &&
+        (!hasEarlier || child.delegation?.parent_tool_native_id == null) &&
+        withinHistoryWindow(child.activity?.first_at ?? child.started_at, feed.rows, hasEarlier));
+    useEffect(() => {
+        if (focus === null || !hasEarlier || !feed.snapshotReady)
+            return;
+        const child = workerChildren.find(child => sessionContains(child.id, focus.sessionId, index.byId));
+        if (child === undefined || workerLinks.anchorRowByChild.has(child.id) || floating.some(row => row.id === child.id))
+            return;
+        if (feed.earlier.kind === "idle" || feed.earlier.kind === "held")
+            feed.loadEarlier();
+    }, [focus, hasEarlier, feed, workerChildren, workerLinks, floating, index.byId]);
+    const [revealedWorker, setRevealedWorker] = useState(null);
+    const revealRequest = useRef(0);
+    const revealLinkedWorker = (childId) => {
+        const anchorTimelineId = workerLinks.anchorRowByChild.get(childId);
+        if (anchorTimelineId === undefined)
+            return;
+        revealRequest.current += 1;
+        setRevealedWorker({ childId, anchorTimelineId, request: revealRequest.current });
+    };
+    useEffect(() => {
+        if (revealedWorker === null)
+            return;
+        const frame = window.requestAnimationFrame(() => {
+            const element = document.getElementById(messageDomId(session.id, revealedWorker.anchorTimelineId));
+            if (element !== null)
+                revealActivityTarget(element);
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [revealedWorker, session.id]);
+    const renderChild = (child, anchored) => (_jsx(Subthread, { session: child, anchored: anchored, duringBackfill: duringBackfill, index: index, focus: focus, onFocusConsumed: onFocusConsumed, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, onOpenPath: onOpenPath, getRuntimeKind: getRuntimeKind, homeDirectory: homeDirectory }, child.id));
+    const reportWorkFor = (row) => {
+        if (row.body.type !== "collaboration")
+            return null;
+        const event = row.body.event;
+        if (event.kind !== "report" || event.source_session_id === null || event.source_response_id === null
+            || event.work_start_timeline_id === null || event.work_end_timeline_id === null)
+            return null;
+        const memberSession = index.byId.get(event.source_session_id);
+        if (memberSession === undefined || !teamIdSet.has(memberSession.id))
+            return null;
+        const participant = participantPresentation(participants, event.sender, event.team);
+        return {
+            actionCount: null,
+            startedAt: null,
+            endedAt: null,
+            content: _jsx(LazyReportWork, { report: row, session: memberSession, name: event.sender, color: event.color ?? participant?.color ?? null, runtime: participant?.runtime ?? runtimeProfile([], memberSession.delegation?.configured_model ?? null, teamFeed.responseRuntimesBySession.get(memberSession.id) ?? []), index: index, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, onOpenPath: onOpenPath, getRuntimeKind: getRuntimeKind, homeDirectory: homeDirectory }, `${row.session_id}:${row.timeline_id}`),
+        };
+    };
+    const renderSegment = (segment, embedded = false) => {
+        const rowId = segment.kind === "ledger" ? segment.rows[0].timeline_id : segment.row.timeline_id;
+        const hit = highlightedTimelineId === rowId;
+        switch (segment.kind) {
+            case "ledger":
+                return (_jsx(Ledger, { embedded: embedded, members: segment.members, summary: segment.summary, anchor: !embedded && segment.summary.closedByDefault ? (_jsx(Anchor, { at: segment.at, sessionId: segment.rows[0].session_id, timelineId: rowId, onReceipt: onReceipt })) : null, domIdOf: domIdOf, highlightedTimelineId: highlightedTimelineId, focusTimelineId: focusTimelineId, alive: (line) => recentActivity &&
+                        line.rows[0].session_id === session.id &&
+                        feed.watermark !== null && line.rows[0].ordinal > feed.watermark, hasChildren: (line) => (workerLinks.childrenByRow.get(line.rows[0].timeline_id) ?? []).length > 0, childFocused: (line) => (focus !== null &&
+                        (workerLinks.childrenByRow.get(line.rows[0].timeline_id) ?? []).some((child) => sessionContains(child.id, focus.sessionId, index.byId))) ||
+                        (revealedWorker !== null &&
+                            (workerLinks.childrenByRow.get(line.rows[0].timeline_id) ?? []).some((child) => child.id === revealedWorker.childId)), subthreadsFor: (line) => (workerLinks.childrenByRow.get(line.rows[0].timeline_id) ?? []).map((child) => ({ childSessionId: child.id, node: renderChild(child, true) })), workflowAttemptsFor: (line) => workflowAttemptsFor(workflowAttempts, line.rows[0]), linkedChildId: (line) => workerLinks.referencedChildIdsByRow.get(line.rows[0].timeline_id)?.[0] ?? null, onOpenLinkedChild: revealLinkedWorker, teamMemberFor: (line) => line.rows
+                        .map((row) => teamMembers.get(row.timeline_id) ?? null)
+                        .find((member) => member !== null) ?? null, onOpenPath: onOpenPath, onOpenAttachment: onOpenAttachment }, segment.key));
+            case "thinking":
+                // A thought alone is a run of one, drawn as its line (Q10 A).
+                return (_jsx(ThoughtLine, { text: segment.text, embedded: embedded, spanMs: segment.spanMs, domId: domIdOf(rowId), timelineId: rowId, hit: hit, forceOpen: focusTimelineId === rowId, anchor: _jsx(Anchor, { at: segment.at, sessionId: segment.row.session_id, timelineId: rowId, onReceipt: onReceipt }) }, segment.key));
+            case "marker":
+                if (segment.notice.type === "permission_requested")
+                    return _jsx(Marker, { text: segment.text, tone: segment.tone, domId: domIdOf(rowId), timelineId: rowId, hit: hit }, segment.key);
+                return _jsx(ContextEvent, { segment: segment, domId: domIdOf(rowId), hit: hit, forceOpen: focusTimelineId === rowId, onReceipt: onReceipt }, segment.key);
+            case "summary":
+                return _jsx(ContextEvent, { segment: segment, domId: domIdOf(rowId), hit: hit, forceOpen: focusTimelineId === rowId, onReceipt: onReceipt }, segment.key);
+            case "compaction":
+                return (_jsx(Compaction, { text: segment.text, domId: domIdOf(rowId), timelineId: rowId, hit: segment.rows.some((row) => row.timeline_id === highlightedTimelineId), forceOpen: segment.rows.some((row) => row.timeline_id === focusTimelineId), onReceipt: onReceipt }, segment.key));
+            case "prose":
+                return (_jsxs("div", { className: "tr-seg tr-prose ah-syntax", id: domIdOf(rowId), "data-timeline-id": rowId, "data-hit": hit || undefined, children: [_jsx(Anchor, { at: segment.at, sessionId: segment.row.session_id, timelineId: rowId, onReceipt: onReceipt }), _jsx(AuthoredMessage, { text: segment.text, attachments: segment.attachments, recordedText: segment.row.body.type === "agent" ? segment.row.body.text : null, messageKey: `${segment.row.session_id}:${rowId}`, role: "agent", onReceipt: onReceipt, onOpenAttachment: onOpenAttachment }), segment.citationLabels.length > 0 && (_jsx("p", { className: "tr-cites", children: segment.citationLabels.map((label, at) => (_jsx("span", { children: label }, at))) })), _jsx(SegmentActs, { text: segment.text ?? "", onReceipt: onReceipt })] }, segment.key));
+            case "collaboration": {
+                const sourceMember = teamIdSet.has(segment.row.session_id)
+                    ? index.byId.get(segment.row.session_id)
+                    : undefined;
+                const inferredRecipient = segment.event.channel === "coordinator" && segment.event.recipient === null
+                    ? (sourceMember?.title ?? sourceMember?.native_session_id ?? null)
+                    : segment.event.recipient;
+                const event = inferredRecipient === segment.event.recipient
+                    ? segment.event
+                    : { ...segment.event, recipient: inferredRecipient };
+                const participant = participantPresentation(participants, event.sender, event.team);
+                const recipientParticipant = participantPresentation(participants, event.recipient, event.team);
+                const stamp = collaborationStamp(segment.row);
+                return (_jsx(TeamEvent, { event: event, attachments: messageAttachments(segment.row), onOpenAttachment: onOpenAttachment, at: stamp.at, timeBasis: stamp.basis, domId: domIdOf(rowId), timelineId: rowId, participant: participant, recipientParticipant: recipientParticipant, hit: hit, forceOpen: focusTimelineId === rowId, reportWork: reportWorkFor(segment.row), onReceipt: onReceipt }, segment.key));
+            }
+        }
+    };
+    const showPills = model.sittings.length > 1;
+    let floatingAt = 0;
+    const drainFloating = (until) => {
+        const out = [];
+        while (floatingAt < floating.length &&
+            (until === null || floating[floatingAt].started_at <= until)) {
+            out.push(renderChild(floating[floatingAt], false));
+            floatingAt += 1;
+        }
+        return out;
+    };
+    const renderTools = (items, embedded) => {
+        const lines = items.map(item => item.line);
+        const rows = lines.flatMap(line => line.rows);
+        return renderSegment({ kind: "ledger", key: items[0].key, at: rows[0].at, rows, lines,
+            members: lines.map(line => ({ kind: "line", key: line.key, line })), summary: runSummary(lines) }, embedded);
+    };
+    const renderItem = (item) => {
+        if (item.kind === "tool")
+            return renderTools([item], false);
+        if (item.kind !== "prompt")
+            return renderSegment(item, true);
+        const row = item.prompt.row;
+        if (row.body.type === "collaboration")
+            return renderSegment({ kind: "collaboration", key: item.key,
+                row, at: row.at, event: row.body.event }, true);
+        return _jsx(Prompt, { prompts: [item.prompt], domIdOf: domIdOf, landedTimelineId: highlightedTimelineId, focusTimelineId: focusTimelineId, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment }, item.key);
+    };
+    const renderItems = (items) => {
+        const nodes = [];
+        let tools = [];
+        const flush = () => { if (tools.length > 0)
+            nodes.push(renderTools(tools, true)); tools = []; };
+        for (const item of items) {
+            if (item.kind === "tool")
+                tools.push(item);
+            else {
+                flush();
+                nodes.push(renderItem(item));
+            }
+        }
+        flush();
+        return nodes;
+    };
+    const childIsFocused = (item) => item.kind === "tool" &&
+        (workerLinks.childrenByRow.get(item.line.rows[0].timeline_id) ?? []).some(child => (focus !== null && sessionContains(child.id, focus.sessionId, index.byId)) || child.id === revealedWorker?.childId);
+    const renderBlock = (block) => {
+        switch (block.kind) {
+            case "gap": return _jsx(GapMarker, { count: block.count, onPress: () => onReceipt(`${block.count} ${block.count === 1 ? "message is" : "messages are"} in the session but not in this page`) });
+            case "watermark": return _jsx(Watermark, { text: "received since opening" });
+            case "prompt": return _jsx("div", { className: "tr-turn tr-reading-prompt", children: _jsx(Prompt, { prompts: block.prompts, domIdOf: domIdOf, landedTimelineId: highlightedTimelineId, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment }) });
+            case "reply": return _jsxs("div", { className: block.head === null ? "tr-reading-reply" : "tr-resp tr-reading-reply", children: [block.head !== null && _jsx(ResponseHead, { head: block.head, runtimeKind: runtimeKind, open: recentActivity && block.head.endedAt === null }), renderSegment(block.segment)] });
+            case "request": return renderItem(block.item);
+            case "activity": {
+                const hit = highlightedTimelineId !== null && block.rows.some(row => row.timeline_id === highlightedTimelineId)
+                    ? highlightedTimelineId : null;
+                const forceOpen = block.items.some(item => childIsFocused(item) ||
+                    activityRows(item).some(row => row.timeline_id === focusTimelineId));
+                return _jsx(ActivityGroup, { items: block.items, rows: block.rows, partial: block.partial, forceOpen: forceOpen, earlier: feed.earlier, onLoadEarlier: feed.loadEarlier, teamLoading: !teamFeed.historyReady, teamError: teamFeed.historyError, onRetryTeam: teamFeed.retry, onOpenAttachment: onOpenAttachment, onReceipt: onReceipt, highlightedId: hit, alive: row => recentActivity && row.session_id === session.id &&
+                        feed.watermark !== null && row.ordinal > feed.watermark, children: renderItems(block.items) });
+            }
+        }
+    };
+    const partialParentHistory = !feed.snapshotReady || feed.earlier.kind !== "none";
+    const hasSafeRosterLine = [...teamMembers.values()].some((member) => member.operation === "known");
+    const showKnownTeam = knownTeamSessions.length > 0 &&
+        (teamMembers.size === 0 || (partialParentHistory && !hasSafeRosterLine));
+    const empty = model.plan.length === 0 && floating.length === 0 && !showKnownTeam;
+    return (_jsx(ThreadNavigationContext.Provider, { value: childNavigation, children: _jsxs(DisclosureState, { children: [head, showKnownTeam && (_jsx(KnownTeamRoster, { sessions: knownTeamSessions, rowsBySession: teamFeed.rowsBySession, responseRuntimesBySession: teamFeed.responseRuntimesBySession, historyReady: teamFeed.historyReady, historyError: teamFeed.historyError, onRetry: teamFeed.retry })), reading.map(({ sitting, blocks, renderKey }) => (_jsxs(Sitting, { sitting: sitting, children: [showPills && (_jsx(DayPill, { sitting: sitting, onPress: (event) => onPillPress?.(event.currentTarget, sitting.dayKey) })), blocks.map(block => _jsxs(Fragment, { children: [drainFloating(block.at), renderBlock(block)] }, block.key))] }, renderKey ?? sitting.key))), drainFloating(null), empty &&
+                    feed.snapshotReady &&
+                    (nested ? (_jsx("p", { className: "tr-quiet", children: session.stream_state === "indexed"
+                            ? "No readable messages in this subthread."
+                            : "This subthread has not been indexed yet." })) : session.stream_state !== "indexed" ? (_jsx(EmptyState, { title: duringBackfill ? "Indexing history" : "History not yet available", description: "No readable messages have been indexed for this session yet.", children: duringBackfill && _jsx("div", { className: "ah-meter", children: _jsx("i", { style: { width: "8%" } }) }) })) : (_jsx(EmptyState, { title: "Nothing readable yet", description: "This session has no readable timeline rows in the index." }))), session.stream_state === "streaming" && (_jsx("div", { className: "tr-mark", title: "Some source records have not been fully indexed", children: duringBackfill ? "indexing history" : "history incomplete" }))] }, session.id) }));
+}

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

@@ -0,0 +1,32 @@
+import "../../styles/favicon.css";
+export interface FaviconProps {
+    /** The site, e.g. `developer.mozilla.org`. Null draws the globe, which is
+     * what a source with no parseable url honestly is. */
+    readonly host: string | null;
+    /** Pixels. 14 is the record's size and the only one the room uses today. */
+    readonly size?: number;
+}
+/**
+ * One site's icon: its own, in colour, on a hairline ring — or the globe.
+ *
+ * The globe covers four different facts that are one fact to a reader: the
+ * setting is off, the shell refused the host, the site has no icon, or this
+ * is a browser tab with no shell to ask. None of them is an error worth a
+ * reader's attention, so none of them says so.
+ */
+export declare function Favicon({ host, size }: FaviconProps): import("react").JSX.Element;
+export interface FaviconStackProps {
+    /** The sources' hosts, in the order the search returned them. */
+    readonly hosts: readonly (string | null)[];
+    /** How many to draw. Three is the record's stack. */
+    readonly max?: number;
+}
+/**
+ * The first few sites of a search, overlapping, at a line's right edge.
+ *
+ * It is a summary, not a list: the count beside it is what says how many
+ * there were, and the stack says what kind of places they were. Duplicate
+ * hosts collapse — five MDN pages are one site, and five identical icons
+ * would claim otherwise.
+ */
+export declare function FaviconStack({ hosts, max }: FaviconStackProps): import("react").JSX.Element | null;

package/dist/components/transcript/Favicon.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A web line's site icon, and the stack of them at a line's edge.
+//
+// The design record's rule, in one sentence: the icon is content, so it keeps
+// its colour — and it lives in the source list and in a small stack at the
+// line's right, never in the glyph slot, which stays monoline. A site whose
+// icon was not fetched wears the globe.
+//
+// Everything upstream of drawing lives in `lib/transcript/favicons.ts`: the
+// setting, the shared per-host map, and the ask that the Electron shell
+// answers. This file only decides what a result LOOKS like.
+import { useState } from "react";
+import { useFavicon } from "../../lib/transcript/favicons.js";
+import "../../styles/favicon.css";
+/** The globe, on this room's 16-unit grid at stroke 1.5 — the same drawing
+ * the design record used for a web line, which is deliberate: the fallback
+ * for "no icon" is the glyph the line already wears.
+ *
+ * It lives here rather than in `lib/icons.tsx` only because that file is
+ * being edited elsewhere this session; it belongs there. */
+function GlobeGlyph() {
+    return (_jsxs("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: [_jsx("circle", { cx: "8", cy: "8", r: "5.5" }), _jsx("path", { d: "M2.5 8h11M8 2.5c2.2 2.2 2.2 8.8 0 11M8 2.5c-2.2 2.2-2.2 8.8 0 11" })] }));
+}
+/**
+ * One site's icon: its own, in colour, on a hairline ring — or the globe.
+ *
+ * The globe covers four different facts that are one fact to a reader: the
+ * setting is off, the shell refused the host, the site has no icon, or this
+ * is a browser tab with no shell to ask. None of them is an error worth a
+ * reader's attention, so none of them says so.
+ */
+export function Favicon({ host, size = 14 }) {
+    const { src, state } = useFavicon(host);
+    const [failedSrc, setFailedSrc] = useState(null);
+    // The host is the label because it is the fact the icon stands for; the
+    // title beside it in a source list is the same information twice.
+    const label = host ?? "unknown site";
+    // A custom property, so one rule sizes the plate, the ring and the image
+    // together; the default lives in the stylesheet rather than here.
+    const style = size === 14 ? undefined : { "--tr-fav-size": `${size}px` };
+    if (state === "ready" && src !== null && src !== failedSrc) {
+        return (_jsx("span", { className: "tr-fav", style: style, title: label, children: _jsx("img", { src: src, alt: "", loading: "lazy", decoding: "async", draggable: false, onError: () => setFailedSrc(src) }) }));
+    }
+    if (state === "loading") {
+        return _jsx("span", { className: "tr-fav tr-fav--loading", style: style, "aria-hidden": "true" });
+    }
+    return (_jsx("span", { className: "tr-fav tr-fav--globe", style: style, title: label, children: _jsx(GlobeGlyph, {}) }));
+}
+/**
+ * The first few sites of a search, overlapping, at a line's right edge.
+ *
+ * It is a summary, not a list: the count beside it is what says how many
+ * there were, and the stack says what kind of places they were. Duplicate
+ * hosts collapse — five MDN pages are one site, and five identical icons
+ * would claim otherwise.
+ */
+export function FaviconStack({ hosts, max = 3 }) {
+    if (max <= 0)
+        return null;
+    const seen = [];
+    for (const host of hosts) {
+        if (host !== null && seen.includes(host))
+            continue;
+        seen.push(host);
+        if (seen.length === max)
+            break;
+    }
+    if (seen.length === 0)
+        return null;
+    return (_jsx("span", { className: "tr-favs", children: seen.map((host, index) => (_jsx(Favicon, { host: host }, host ?? `unknown-${index}`))) }));
+}

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

@@ -0,0 +1,19 @@
+import type { TimelineFeed } from "../../lib/hooks.js";
+import "../../styles/transcript-head.css";
+/** `Mon 31 Aug · 23:18:12` — the session's first second, said as a fact.
+ *  Absolute, never "Today": the start of a session is a date, not a distance. */
+export declare function sessionStartLabel(startedAt: number | null): string | null;
+/** The top fade — one sticky, zero-height element at the head of the scroller
+ *  whose pseudo-element paints the gradient. Mount it as the FIRST child of
+ *  `.ah-scroll`; `useHeadOfDocument` writes `--frost` onto the scroller. */
+export declare function TopFade(): import("react").JSX.Element;
+export interface HeadOfDocumentProps {
+    readonly feed: TimelineFeed;
+    /** The accumulator, 0..1, from `useHeadOfDocument`. */
+    readonly pull: number;
+    /** First recorded conversation activity, for the session-start line. */
+    readonly startedAt: number | null;
+    /** The clock an anchor search is paging toward, while one runs. */
+    readonly finding?: string | null;
+}
+export declare function HeadOfDocument({ feed, pull, startedAt, finding }: HeadOfDocumentProps): import("react").JSX.Element;