@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/components/transcript/Prose.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// §03 C/E — the reply's own words.
+//
+// T-1 says the reply is BARE: no fill, no border, primary ink at 14/1.55 on
+// the 68ch measure. The markdown renderer is the one the file viewer already
+// uses (a tree of React elements, never `dangerouslySetInnerHTML`); the only
+// addition the record asks for is the code bar — the fence's language on the
+// left, a copy act on the right.
+//
+// The fences are split out here rather than inside `MarkdownBlocks` because
+// that renderer is shared with the file viewer, where a bar over every fence
+// in a README would be chrome the reader did not ask for. A fence nested in a
+// list or a quote keeps the plain rendering: the bar belongs to a block that
+// owns the measure, and one that does not is not that.
+import { useMemo, useState } from "react";
+import { attachmentMentions } from "../../lib/transcript/index.js";
+import { parseMarkdown } from "../file-viewer/markdown/index.js";
+import { MarkdownBlocks } from "../file-viewer/markdown/render.js";
+import { highlight, languageFor, PLAIN_TEXT } from "../file-viewer/syntax/index.js";
+import { markTerms, useMatchTerms } from "./reader-context.js";
+/** The hover acts. Today the room has exactly one honest act on a segment —
+ * copy — so that is what it draws; the record's chip and canvas belong to
+ * vibe-field, which this room is not. */
+export function SegmentActs({ text, onReceipt, }) {
+    if (text.trim() === "")
+        return null;
+    return (_jsx("div", { className: "tr-acts", children: _jsx("button", { type: "button", onClick: () => {
+                navigator.clipboard
+                    .writeText(text)
+                    .then(() => onReceipt("Copied"))
+                    .catch(() => onReceipt("The clipboard refused it"));
+            }, children: "copy" }) }));
+}
+function CodeBar({ language, text, onReceipt, excerpt = false, }) {
+    const [copied, setCopied] = useState(false);
+    const lines = useMemo(() => {
+        const resolved = language === null ? PLAIN_TEXT : (languageFor(`x.${language}`) ?? PLAIN_TEXT);
+        return highlight(text, resolved);
+    }, [language, text]);
+    return (_jsxs("div", { className: "tr-code", children: [_jsxs("div", { className: "tr-code__bar", children: [_jsx("span", { children: language ?? "text" }), !excerpt && _jsx("button", { type: "button", onClick: () => {
+                            navigator.clipboard
+                                .writeText(text)
+                                .then(() => {
+                                setCopied(true);
+                                onReceipt("Copied");
+                                window.setTimeout(() => setCopied(false), 1200);
+                            })
+                                .catch(() => onReceipt("The clipboard refused it"));
+                        }, children: copied ? "copied" : "copy" })] }), _jsx("pre", { children: _jsx("code", { children: lines.map((line, row) => (_jsxs("span", { children: [row > 0 && "\n", line.map((token, at) => token.kind === "plain" ? (_jsx("span", { children: token.text }, at)) : (_jsx("span", { "data-t": token.kind, children: token.text }, at)))] }, row))) }) })] }));
+}
+/** Runs of ordinary blocks go to the shared renderer; a top-level fence gets
+ * the bar. Splitting rather than mapping keeps list spacing intact. */
+function partition(blocks) {
+    const out = [];
+    let run = [];
+    for (const block of blocks) {
+        if (block.type === "code") {
+            if (run.length > 0) {
+                out.push(run);
+                run = [];
+            }
+            out.push(block);
+            continue;
+        }
+        run.push(block);
+    }
+    if (run.length > 0)
+        out.push(run);
+    return out;
+}
+function linkedAttachments(value, source, targets, onOpen) {
+    if (source === undefined)
+        return value;
+    const nodes = [];
+    let cursor = 0;
+    for (const target of targets) {
+        const start = source.indexOf(target.start);
+        const length = target.end - target.start;
+        // Only a complete, contiguous plain-text span can become a button. The
+        // parser never calls this for code or link labels; trims and escapes keep
+        // source positions instead of guessing from repeated rendered wording.
+        if (start < cursor || start + length > value.length || !source.slice(start, start + length).every((at, i) => at === target.start + i))
+            continue;
+        if (start > cursor)
+            nodes.push(value.slice(cursor, start));
+        const label = value.slice(start, start + length);
+        nodes.push(_jsx("button", { className: "tr-image-link", type: "button", "aria-label": `${label} — ${target.target.missing ? "image unavailable" : "open image"}`, "aria-haspopup": target.target.missing ? undefined : "dialog", title: `${target.target.missing ? "Image unavailable" : "Open image"}${target.target.name ? ` · ${target.target.name}` : ""}`, onClick: () => onOpen(target.target), children: label }, target.start));
+        cursor = start + length;
+    }
+    if (cursor === 0)
+        return value;
+    if (cursor < value.length)
+        nodes.push(value.slice(cursor));
+    return nodes;
+}
+export function Prose({ text, onReceipt, imageAttachments, imageMarkerSource = text, onOpenAttachment, excerpt = false, }) {
+    const trackSource = imageAttachments?.some(fact => fact.ref?.message_ranges?.length) ?? false;
+    const parts = useMemo(() => partition(parseMarkdown(text, trackSource)), [text, trackSource]);
+    const imageTargets = useMemo(() => attachmentMentions(imageMarkerSource, imageAttachments ?? []), [imageMarkerSource, imageAttachments]);
+    const linked = imageTargets.length > 0 && onOpenAttachment !== undefined
+        ? (value, source) => linkedAttachments(value, source, imageTargets, onOpenAttachment)
+        : undefined;
+    // A reader marks the words its search matched; anywhere else there are none.
+    const terms = useMatchTerms();
+    const renderText = terms.length === 0
+        ? linked
+        : (value, source) => markTerms(linked === undefined ? value : linked(value, source), terms);
+    return (_jsx(_Fragment, { children: parts.map((part, at) => Array.isArray(part) ? (_jsx(MarkdownBlocks, { blocks: part, renderText: renderText }, at)) : (_jsx(CodeBar, { language: part.language, text: part.text, onReceipt: onReceipt, excerpt: excerpt }, at))) }));
+}

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

@@ -0,0 +1,10 @@
+import "../../styles/transcript-head.css";
+export interface ReceiptPillProps {
+    readonly receipt: {
+        readonly count: number;
+        readonly seq: number;
+    } | null;
+    /** Pixels from the frame's top. Clear the pinned day pill. */
+    readonly top?: number;
+}
+export declare function ReceiptPill({ receipt, top }: ReceiptPillProps): import("react").JSX.Element | null;

package/dist/components/transcript/ReceiptPill.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../styles/transcript-head.css";
+export function ReceiptPill({ receipt, top = 120 }) {
+    if (receipt === null || receipt.count <= 0)
+        return null;
+    return (
+    // Keyed on the landing so a second receipt inside the first one's dwell
+    // remounts, and the pop plays again rather than sliding a number.
+    _jsxs("div", { className: "tr-headpill", style: { "--tr-headpill-top": `${top}px` }, children: [_jsx("i", {}), receipt.count, " earlier loaded"] }, receipt.seq));
+}

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

@@ -0,0 +1,9 @@
+import type { ResponseHead as HeadModel } from "../../lib/transcript/index.js";
+export interface ResponseHeadProps {
+    readonly head: HeadModel;
+    /** The session's runtime, e.g. `claude-code` — the mark and the name. */
+    readonly runtimeKind: string;
+    /** A live reply whose end has not landed reads `1m 12s → …` (§05). */
+    readonly open: boolean;
+}
+export declare function ResponseHead({ head, runtimeKind, open }: ResponseHeadProps): import("react").JSX.Element;

package/dist/components/transcript/ResponseHead.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// T-4 / §03 B — one head per response, never per message.
+//
+// Four CLAUDE-OPUS-5 eyebrows on one screen, each over one sentence, is the
+// shipped column's loudest mistake. The eyebrow appears ONCE per reply: the
+// agent's monochrome mark and name, the model and effort as a quiet caption,
+// and at the right the span and the reported tokens.
+//
+// Tokens are the agent's own figure and are never coerced to zero — an agent
+// that reported none says nothing here rather than claiming a total. The cost
+// beside them is the list-price equivalent (§4.1.3), marked `+` when part of
+// the reply has no list price.
+import { AgentMark, agentLabel } from "../../lib/agents.js";
+import { tokenText } from "../../lib/format.js";
+import { usdExact, usdText } from "../../lib/spend.js";
+import { spanText } from "../../lib/transcript/index.js";
+export function ResponseHead({ head, runtimeKind, open }) {
+    const caption = [head.model, head.effort === null ? null : `${head.effort} effort`]
+        .filter((piece) => piece !== null && piece !== "")
+        .join(" · ");
+    const span = head.spanMs === null ? null : spanText(head.spanMs);
+    // A reply with usage but no priced part still says so (`n/p`), never
+    // nothing: an unpriced model must not read as free.
+    const cost = head.cost;
+    const costText = cost === null
+        ? null
+        : cost.microUsd === null
+            ? "n/p"
+            : `${usdText(cost.microUsd)}${cost.partial ? "+" : ""}`;
+    const costTitle = cost === null
+        ? undefined
+        : cost.microUsd === null
+            ? "No list price for this reply's model"
+            : `${usdExact(cost.microUsd)} at API list prices${cost.partial ? " · a lower bound: part of this reply has no list price or no recorded output" : ""}`;
+    return (_jsxs("div", { className: "tr-head", children: [_jsx("span", { className: "mark", children: _jsx(AgentMark, { kind: runtimeKind }) }), agentLabel(runtimeKind), caption !== "" && _jsx("span", { className: "model", children: caption }), (span !== null || head.tokens !== null) && (_jsxs("span", { className: "facts", children: [span !== null && (open ? `${span} → …` : span), span !== null && head.tokens !== null && " · ", head.tokens !== null && _jsx("b", { children: tokenText(head.tokens) }), head.tokens !== null && costText !== null && " · ", costText !== null && _jsx("b", { title: costTitle, children: costText })] }))] }));
+}

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

@@ -0,0 +1,19 @@
+import type { SessionRow } from "@vibefield/rosetta-protocol";
+import type { AttachmentFact, PathFact } from "../../lib/transcript/index.js";
+import type { ThreadFocus, ThreadIndex } from "./thread-index.js";
+export interface SubthreadProps {
+    readonly session: SessionRow;
+    /** The link was proven, so this run sits under its own line rather than
+     * being interleaved by a start time nobody claimed causes anything. */
+    readonly anchored: boolean;
+    readonly duringBackfill: boolean;
+    readonly index: ThreadIndex;
+    readonly focus: ThreadFocus | null;
+    readonly onFocusConsumed: () => void;
+    readonly onReceipt: (text: string) => void;
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+    readonly onOpenPath: (path: PathFact) => void;
+    readonly getRuntimeKind: (runtimeId: string) => string;
+    readonly homeDirectory: string | null;
+}
+export declare function Subthread(props: SubthreadProps): import("react").JSX.Element;

package/dist/components/transcript/Subthread.js

@@ -0,0 +1,96 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// §03 F — the delegate's child run, in place.
+//
+// A proven `child_session_id` opens under its own ledger line, the grammar
+// one size down (13px), headed by the child's mark, name, role and range.
+// At depth three, open the child's document at the column's full measure.
+//
+// It stays LAZY. The line it hangs from is closed until pressed, so a parent
+// with nine delegations does not open nine websockets to draw nothing; the
+// component mounts when the line opens, and that is the subscription.
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { activityCuts } from "./activity-plan.js";
+import { revealActivityTarget } from "./Activity.js";
+import { clock } from "../../lib/format.js";
+import { AgentMark, agentLabel } from "../../lib/agents.js";
+import { useTimeline } from "../../lib/hooks.js";
+import { ReadingSessionProvider, useRoom } from "../../room-context.js";
+import { TranscriptDocument } from "./Document.js";
+import { useTranscriptModel } from "./document-model.js";
+import { messageDomId, sessionContains, subthreadTitle } from "./thread-index.js";
+import { ThreadNavigationContext } from "./thread-navigation.js";
+export function Subthread(props) {
+    const navigation = useContext(ThreadNavigationContext);
+    const detached = navigation.depth >= 3 && navigation.open !== null;
+    const onFocusPath = props.focus !== null && sessionContains(props.session.id, props.focus.sessionId, props.index.byId);
+    useEffect(() => {
+        if (detached && onFocusPath)
+            navigation.open?.(props.session.id);
+    }, [detached, onFocusPath, navigation.open, props.session.id]);
+    if (detached)
+        return _jsxs("button", { type: "button", className: "tr-child-link", onClick: () => navigation.open?.(props.session.id), children: ["Open child transcript ", _jsxs("span", { children: [subthreadTitle(props.session), " \u2197"] })] });
+    return _jsx(EmbeddedSubthread, { ...props });
+}
+function EmbeddedSubthread({ session, anchored, duringBackfill, index, focus, onFocusConsumed, onReceipt, onOpenAttachment, onOpenPath, getRuntimeKind, homeDirectory, }) {
+    const onFocusPath = focus !== null && sessionContains(session.id, focus.sessionId, index.byId);
+    // Anchored runs were revealed by pressing their own delegate line, so they
+    // open with it. A run placed only by its start time keeps a disclosure: a
+    // parent with nine of them must not open nine subscriptions to draw nothing.
+    const [open, setOpen] = useState(anchored || onFocusPath);
+    const shown = open || onFocusPath;
+    const { sessions } = useRoom();
+    const feed = useTimeline(sessions, shown ? session.id : 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 [highlightedTimelineId, setHighlightedTimelineId] = useState(null);
+    const focusTries = useRef(0);
+    const displayedLayout = useRef(null);
+    const onTimelineLayout = useCallback((layout) => { displayedLayout.current = layout; }, []);
+    const targetTimelineId = focus?.sessionId === session.id ? focus.timelineId : null;
+    useEffect(() => {
+        if (onFocusPath)
+            setOpen(true);
+    }, [onFocusPath]);
+    useEffect(() => {
+        focusTries.current = 0;
+        // Consuming the focus nulls the target; clearing here would wipe the ring
+        // in the frame it was drawn.
+        if (targetTimelineId !== null)
+            setHighlightedTimelineId(null);
+    }, [targetTimelineId]);
+    useEffect(() => {
+        // The same rule the column keeps: a feed that has not delivered yet says
+        // nothing is above it, and that is not evidence of anything.
+        if (targetTimelineId === null ||
+            (feed.status !== "live" && feed.status !== "resyncing")) {
+            return;
+        }
+        const drawnBy = model.representatives.get(targetTimelineId) ?? null;
+        if (drawnBy !== null) {
+            const element = displayedLayout.current?.elementForAnchor?.(targetTimelineId)
+                ?? document.getElementById(messageDomId(session.id, drawnBy));
+            if (element) {
+                revealActivityTarget(element);
+                setHighlightedTimelineId(element.dataset.timelineId ?? drawnBy);
+                onFocusConsumed();
+                window.setTimeout(() => setHighlightedTimelineId(null), 1500);
+            }
+            return;
+        }
+        // The anchor search still pages blindly upward — `loadEarlier` exists for
+        // exactly this, and it is the one caller the deprecation keeps.
+        if (feed.earlier.kind !== "none" && focusTries.current < 8) {
+            focusTries.current += 1;
+            feed.loadEarlier();
+        }
+        else if (feed.earlier.kind === "none") {
+            onFocusConsumed();
+            onReceipt("That subthread message is older than the loaded history");
+        }
+    }, [targetTimelineId, session.id, feed, model, onFocusConsumed, onReceipt]);
+    const kind = getRuntimeKind(session.runtime_id);
+    const range = session.activity
+        ? `${clock(session.activity.first_at)} → ${clock(session.activity.last_at)}`
+        : "Activity time unknown";
+    return (_jsxs("div", { className: "tr-sub", "data-anchored": anchored || undefined, children: [_jsxs("button", { type: "button", className: "tr-sub__head", "aria-expanded": shown, onClick: () => setOpen((value) => !value), children: [_jsx("span", { className: "mark", children: _jsx(AgentMark, { kind: kind }) }), _jsxs("span", { className: "tr-sub__name", title: subthreadTitle(session), children: [subthreadTitle(session), _jsxs("span", { className: "tr-sub__role", children: [" · ", agentLabel(kind), session.role === "main" ? "" : ` · ${session.role}`] })] }), _jsx("span", { className: "when", children: range })] }), shown && (_jsx(ReadingSessionProvider, { value: session.id, children: _jsxs("div", { className: "tr", children: [!feed.snapshotReady && _jsx("p", { className: "tr-quiet", role: "status", children: "Loading messages\u2026" }), feed.snapshotReady && feed.earlier.kind !== "none" && _jsx("div", { className: "tr-activity__loading", role: "status", children: feed.earlier.kind === "fetching" || feed.earlier.kind === "revealing" ? "Loading earlier messages…" : _jsxs(_Fragment, { children: [_jsx("span", { children: feed.earlier.kind === "failed" ? "Could not load earlier messages." : "Earlier messages are not loaded." }), _jsx("button", { type: "button", onClick: feed.loadEarlier, children: feed.earlier.kind === "failed" ? "Retry" : "Load earlier messages" })] }) }), _jsx(TranscriptDocument, { session: session, model: model, feed: feed, duringBackfill: duringBackfill, index: index, focus: onFocusPath ? focus : null, highlightedTimelineId: highlightedTimelineId, onFocusConsumed: onFocusConsumed, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, onOpenPath: onOpenPath, getRuntimeKind: getRuntimeKind, homeDirectory: homeDirectory, onPillPress: null, onTimelineLayout: onTimelineLayout, nested: true })] }) }))] }));
+}

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { CollaborationEvent, ParticipantColor, ResponseRuntime, SessionRow, TimelineEntry } from "@vibefield/rosetta-protocol";
+import type { AttachmentFact, CollaborationTimeBasis, RuntimeProfile, TeamMemberPresentation, TeamParticipantPresentation } from "../../lib/transcript/index.js";
+export declare function TeamWorkthread({ name, color, runtime, startedAt, endedAt, children, }: {
+    readonly name: string | null;
+    readonly color: ParticipantColor | null;
+    readonly runtime: RuntimeProfile;
+    readonly startedAt: number | null;
+    readonly endedAt: number | null;
+    readonly children: ReactNode;
+}): import("react").JSX.Element;
+export interface TeamInvocationProps {
+    readonly members: readonly TeamMemberPresentation[];
+    readonly domIdOf: (timelineId: string) => string;
+    readonly highlightedTimelineId: string | null;
+    readonly focusTimelineId: string | null;
+}
+/** One proven initial burst, or the first safe view of an older team, becomes
+ * one roster line. Later add/resume operations keep their own chronological
+ * line and put the member's model/effort at the edge. */
+export declare function TeamInvocation({ members, domIdOf, highlightedTimelineId, focusTimelineId, }: TeamInvocationProps): import("react").JSX.Element;
+/** A page can begin after the creation calls while metadata still proves the
+ * current roster. State is shown without fabricating a historical “Started”. */
+export declare function KnownTeamRoster({ sessions, rowsBySession, responseRuntimesBySession, historyReady, historyError, onRetry, }: {
+    readonly sessions: readonly SessionRow[];
+    readonly rowsBySession: ReadonlyMap<string, readonly TimelineEntry[]>;
+    readonly responseRuntimesBySession: ReadonlyMap<string, readonly ResponseRuntime[]>;
+    readonly historyReady: boolean;
+    readonly historyError: string | null;
+    readonly onRetry: () => void;
+}): import("react").JSX.Element;
+export interface TeamEventProps {
+    readonly event: CollaborationEvent;
+    readonly attachments: readonly AttachmentFact[];
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+    readonly at: number | null;
+    readonly timeBasis: CollaborationTimeBasis;
+    readonly domId: string;
+    readonly timelineId: string;
+    readonly participant: TeamParticipantPresentation | null;
+    readonly recipientParticipant?: TeamParticipantPresentation | null;
+    readonly hit: boolean;
+    readonly forceOpen: boolean;
+    readonly reportWork?: TeamReportWorkPresentation | null;
+    readonly onReceipt: (message: string) => void;
+}
+export interface TeamReportWorkPresentation {
+    readonly content: ReactNode;
+    readonly actionCount: number | null;
+    readonly startedAt: number | null;
+    readonly endedAt: number | null;
+}
+export declare function TeamEvent({ event, attachments, onOpenAttachment, at, timeBasis, domId, timelineId, participant, recipientParticipant, hit, forceOpen, reportWork, onReceipt, }: TeamEventProps): import("react").JSX.Element;

package/dist/components/transcript/Team.js

@@ -0,0 +1,185 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Agent Teams — an addressable roster and shared boundary messages.
+//
+// Participant colour is intentionally confined to Claude Code's small mark.
+// It identifies an @address; it never paints a rail, surface, status, or prose.
+import { useEffect, useState } from "react";
+import { AgentMark } from "../../lib/agents.js";
+import { clock } from "../../lib/format.js";
+import { canonicalText, firstLine, runtimeProfile, spanText } from "../../lib/transcript/index.js";
+import { AuthoredMessage } from "./AuthoredMessage.js";
+import { LineChevron } from "./glyphs.js";
+import { ActivityEvent } from "./Activity.js";
+import { useRowDisclosure } from "./disclosure-state.js";
+function address(name) {
+    if (name === null || name.trim() === "")
+        return "teammate";
+    return name.startsWith("@") ? name : `@${name}`;
+}
+function speaker(name) {
+    return name === "coordinator" ? "Claude Code" : address(name);
+}
+function TeamAvatar({ color, name, }) {
+    return (_jsx("span", { className: "tm-avatar", "data-member-color": color ?? undefined, "aria-hidden": "true", children: _jsx(AgentMark, { kind: "claude-code", note: name === null ? "Agent Team member" : speaker(name) }) }));
+}
+export function TeamWorkthread({ name, color, runtime, startedAt, endedAt, children, }) {
+    const range = startedAt === null
+        ? endedAt === null
+            ? null
+            : clock(endedAt)
+        : endedAt === null || endedAt === startedAt
+            ? clock(startedAt)
+            : `${clock(startedAt)} → ${clock(endedAt)}`;
+    const duration = startedAt !== null && endedAt !== null && endedAt >= startedAt
+        ? spanText(endedAt - startedAt)
+        : null;
+    return (_jsxs("div", { className: "tr-sub tm-workthread", "data-anchored": "true", "data-member-color": color ?? undefined, role: "region", "aria-label": `Proven work behind ${address(name)} result`, children: [_jsxs("div", { className: "tr-sub__head", children: [_jsx(TeamAvatar, { color: color, name: name }), _jsxs("span", { children: [_jsx("span", { className: "tm-workthread__name", children: address(name) }), _jsx("span", { className: "tm-workthread__kind", children: " \u00B7 exact task-bounded work slice" })] }), range !== null && _jsx("span", { className: "when", children: range })] }), _jsxs("div", { className: "tr", children: [_jsxs("div", { className: "tr-head", children: [_jsx("span", { className: "mark", children: _jsx(TeamAvatar, { color: color, name: name }) }), _jsx("span", { className: "tm-workthread__name", children: address(name) }), _jsx("span", { className: "model", children: runtime.label }), duration !== null && _jsx("span", { className: "facts", children: duration })] }), children, _jsxs("div", { className: "tm-workthread__end", children: [_jsx("span", { children: "result rendered above \u00B7 nested delivery copy suppressed" }), endedAt !== null && _jsx("time", { children: clock(endedAt) })] })] })] }));
+}
+function TeamMention({ member }) {
+    return _jsx(AddressMention, { name: member.name, color: member.color });
+}
+function AddressMention({ name, color, }) {
+    return (_jsxs("span", { className: "tm-mention", "data-member-color": color ?? undefined, children: [_jsx(TeamAvatar, { color: color, name: name }), speaker(name)] }));
+}
+function invocationRange(members) {
+    const stamps = members
+        .map((member) => member.row.at)
+        .filter((value) => value !== null);
+    if (stamps.length === 0)
+        return null;
+    const first = Math.min(...stamps);
+    const last = Math.max(...stamps);
+    return first === last ? clock(first) : `${clock(first)}–${clock(last)}`;
+}
+/** One proven initial burst, or the first safe view of an older team, becomes
+ * one roster line. Later add/resume operations keep their own chronological
+ * line and put the member's model/effort at the edge. */
+export function TeamInvocation({ members, domIdOf, highlightedTimelineId, focusTimelineId, }) {
+    const first = members[0];
+    const isRoster = first.operation === "start" || first.operation === "known";
+    const forceOpen = isRoster && members.some((member) => member.row.timeline_id === focusTimelineId || member.row.timeline_id === highlightedTimelineId);
+    const [open, setOpen] = useRowDisclosure(domIdOf(first.row.timeline_id));
+    useEffect(() => {
+        if (forceOpen)
+            setOpen(true);
+    }, [forceOpen]);
+    const expanded = isRoster && (open || forceOpen);
+    const range = invocationRange(members);
+    const hit = members.some((member) => member.row.timeline_id === highlightedTimelineId);
+    if (!isRoster) {
+        const verb = first.operation === "resume" ? "Resumed teammate" : "Added teammate";
+        return (_jsxs("div", { className: "tr-line tm-invocation", id: domIdOf(first.row.timeline_id), "data-timeline-id": first.row.timeline_id, "data-team-operation": first.operation, "data-member-color": first.color ?? undefined, "data-hit": hit || undefined, children: [_jsx("span", { className: "tr-line__g", children: _jsx(TeamAvatar, { color: first.color, name: first.name }) }), _jsx("span", { className: "tr-line__v", children: verb }), _jsxs("span", { className: "tr-line__o", title: first.objective, children: [_jsx(TeamMention, { member: first }), _jsxs("span", { className: "in", children: [" \u00B7 ", first.objective] })] }), _jsxs("span", { className: "tr-line__r", children: [_jsx("span", { className: "tm-runtime", children: first.runtime.label }), range !== null && _jsx("span", { className: "t", children: range })] })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-line tm-invocation", id: domIdOf(first.row.timeline_id), "data-timeline-id": first.row.timeline_id, "data-team-operation": first.operation, "data-hit": hit || undefined, role: "button", tabIndex: 0, "aria-expanded": expanded, onClick: () => setOpen((value) => !value), onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    setOpen((value) => !value);
+                }, children: [_jsx("span", { className: "tr-line__g tm-avatar-stack", "aria-label": "Agent Team members", children: members.slice(0, 3).map((member) => (_jsx(TeamAvatar, { color: member.color, name: member.name }, member.row.timeline_id))) }), _jsx("span", { className: "tr-line__v", children: first.operation === "start" ? "Started team" : "Team active" }), _jsx("span", { className: "tr-line__o", children: first.team }), _jsxs("span", { className: "tr-line__r", children: [_jsxs("span", { children: [members.length, " ", first.operation === "known" ? "known " : "", members.length === 1 ? "teammate" : "teammates"] }), range !== null && _jsx("span", { className: "t", children: range }), _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] })] }), expanded && (_jsxs("div", { className: "tm-roster", role: "region", "aria-label": `${first.team} roster`, children: [members.map((member, index) => (_jsxs("div", { className: "tm-roster__row", id: index === 0 ? undefined : domIdOf(member.row.timeline_id), "data-timeline-id": member.row.timeline_id, "data-member-color": member.color ?? undefined, "data-hit": member.row.timeline_id === highlightedTimelineId || undefined, children: [_jsx(TeamAvatar, { color: member.color, name: member.name }), _jsx("span", { className: "tm-roster__name", children: address(member.name) }), _jsx("span", { className: "tm-roster__job", title: member.objective, children: member.objective }), _jsx("span", { className: "tm-runtime", children: member.runtime.label })] }, member.row.timeline_id))), members.some((member) => member.color === null) && (_jsx("div", { className: "tm-note", children: "A missing native colour keeps the Claude mark neutral." })), first.operation === "known" && (_jsx("div", { className: "tm-note", children: "Team creation is above this page; this is the known roster, not a reconstructed start." }))] }))] }));
+}
+/** A page can begin after the creation calls while metadata still proves the
+ * current roster. State is shown without fabricating a historical “Started”. */
+export function KnownTeamRoster({ sessions, rowsBySession, responseRuntimesBySession, historyReady, historyError, onRetry, }) {
+    const [open, setOpen] = useState(false);
+    const team = sessions.find((session) => session.delegation?.team != null)?.delegation?.team;
+    return (_jsxs("div", { className: "tr-ledger tm-known", children: [_jsxs("div", { className: "tr-line", role: "button", tabIndex: 0, "aria-expanded": open, onClick: () => setOpen((value) => !value), onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    setOpen((value) => !value);
+                }, children: [_jsx("span", { className: "tr-line__g tm-avatar-stack", children: sessions.slice(0, 3).map((session) => (_jsx(TeamAvatar, { color: session.delegation?.color ?? null, name: session.title }, session.id))) }), _jsx("span", { className: "tr-line__v", children: "Team active" }), _jsxs("span", { className: "tr-line__o", children: [team == null ? "Agent Team" : team, " \u00B7 ", sessions.length, " known ", sessions.length === 1 ? "teammate" : "teammates"] }), _jsx("span", { className: "tr-line__r", children: _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) }) })] }), open && (_jsxs("div", { className: "tm-roster", role: "region", "aria-label": "Known Agent Team members", children: [sessions.map((session) => (_jsxs("div", { className: "tm-roster__row", children: [_jsx(TeamAvatar, { color: session.delegation?.color ?? null, name: session.title }), _jsx("span", { className: "tm-roster__name", children: address(session.title ?? session.native_session_id) }), _jsx("span", { className: "tm-roster__job", title: session.summary ?? undefined, children: session.summary ?? "objective not recorded on this page" }), _jsx("span", { className: "tm-runtime", children: runtimeProfile(rowsBySession.get(session.id) ?? [], session.delegation?.configured_model ?? null, responseRuntimesBySession.get(session.id) ?? []).label })] }, session.id))), _jsx("div", { className: "tm-note", children: historyError !== null ? _jsxs("span", { className: "tr-activity__loading", role: "status", children: ["Could not load team messages. ", _jsx("button", { type: "button", onClick: onRetry, children: "Retry" })] }) : historyReady
+                            ? "Creation is above this page; no historical start time is inferred."
+                            : "Loading complete delivered-message history; private teammate work stays closed." })] }))] }));
+}
+function eventBody(event) {
+    if (event.body !== null)
+        return canonicalText(event.body);
+    return event.summary;
+}
+function eventRoute(event) {
+    if (event.recipient !== null)
+        return `→ ${speaker(event.recipient)}`;
+    if (event.team !== null)
+        return `→ @${event.team}`;
+    return null;
+}
+function eventRuntime(participant) {
+    return participant?.runtime ?? {
+        basis: "unknown",
+        label: "runtime not recorded",
+        model: null,
+        effort: null,
+        profileCount: 0,
+    };
+}
+function TeamTime({ at, basis, className, }) {
+    if (at === null)
+        return null;
+    const arrivalFallback = basis === "observed_arrival";
+    return (_jsxs("time", { className: className, "data-time-basis": basis, title: arrivalFallback
+            ? "Delivery arrival time; native authored time was not recorded"
+            : "Native authored time", children: [clock(at), arrivalFallback && _jsx("span", { className: "tm-time-basis", children: " \u00B7 arrived" })] }));
+}
+function lifecycleText(event) {
+    const who = speaker(event.sender);
+    switch (event.kind) {
+        case "idle":
+            return event.status === "failed" ? `${who} is idle · failed` : `${who} is available`;
+        case "stop_requested":
+            return `stop requested by ${who}`;
+        case "stop_approved":
+            return `stop approved by ${who}`;
+        case "terminated":
+            return `${who} terminated`;
+        case "assignment":
+        case "message":
+        case "report":
+            return event.summary ?? event.kind;
+    }
+}
+function TeamReport({ event, attachments, onOpenAttachment, at, timeBasis, domId, timelineId, color, runtime, hit, forceOpen, work, onReceipt, }) {
+    const body = eventBody(event);
+    const [open, setOpen] = useRowDisclosure(domId);
+    const [workOpen, setWorkOpen] = useRowDisclosure(`${domId}:work`);
+    useEffect(() => {
+        if (forceOpen || hit)
+            setOpen(true);
+    }, [forceOpen, hit, setOpen]);
+    const pressable = true;
+    const expanded = pressable && (open || forceOpen);
+    const route = eventRoute(event);
+    const summary = event.summary ?? (body === null ? "result" : firstLine(body));
+    const workSpan = work?.startedAt !== null && work?.startedAt !== undefined && work.endedAt !== null
+        ? spanText(Math.max(0, work.endedAt - work.startedAt))
+        : null;
+    const workFacts = work === null
+        ? null
+        : [work.actionCount === null || work.actionCount === 0 ? "recorded work" : `${work.actionCount} ${work.actionCount === 1 ? "action" : "actions"}`, workSpan]
+            .filter((fact) => fact !== null)
+            .join(" · ");
+    return (_jsxs("div", { className: "tr-ledger tm-report", "data-member-color": color ?? undefined, children: [_jsxs("div", { className: "tr-line tm-report__line", id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, role: pressable ? "button" : undefined, tabIndex: pressable ? 0 : undefined, "aria-expanded": pressable ? expanded : undefined, onClick: () => pressable && setOpen((value) => !value), onKeyDown: (keyboardEvent) => {
+                    if (!pressable || (keyboardEvent.key !== "Enter" && keyboardEvent.key !== " "))
+                        return;
+                    keyboardEvent.preventDefault();
+                    setOpen((value) => !value);
+                }, children: [_jsx("span", { className: "tr-line__g", children: _jsx(TeamAvatar, { color: color, name: event.sender }) }), _jsx("span", { className: "tr-line__v", children: "Reported" }), _jsxs("span", { className: "tr-line__o", title: summary, children: [address(event.sender), route === null ? "" : ` ${route}`, " ", _jsxs("span", { className: "in", children: ["\u00B7 ", summary] })] }), _jsxs("span", { className: "tr-line__r", children: [_jsx("span", { className: "tm-runtime", children: runtime.label }), _jsx(TeamTime, { at: at, basis: timeBasis, className: "t" }), pressable && _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] })] }), expanded && (_jsxs("div", { className: "tr-detail tm-report__detail", role: "region", "aria-label": `Report from ${address(event.sender)}`, children: [_jsxs("div", { className: "tr-detail__bar", children: [_jsx("span", { className: "path", children: event.task_id === null ? "correlated team result" : `task result · ${event.task_id}` }), _jsx("span", { children: "one rendered delivery" })] }), body !== null ? (_jsx("div", { className: "tm-message__body tr-prose", children: _jsx(AuthoredMessage, { messageKey: domId, role: "agent", attachments: attachments, imagesOutside: true, onOpenAttachment: onOpenAttachment, matched: hit, title: `Team report from ${speaker(event.sender)}`, text: body, recordedText: event.body, onReceipt: onReceipt }) })) : _jsx("p", { className: "tr-quiet", children: "No message body recorded." }), work !== null && (_jsxs("div", { className: "tm-message__foot", children: [_jsxs("button", { className: "tm-work", type: "button", "aria-expanded": workOpen, onClick: () => setWorkOpen((value) => !value), children: [_jsx("span", { className: "chev", "aria-hidden": "true", children: _jsx(LineChevron, {}) }), _jsx("span", { children: "proven work behind this result" })] }), workFacts !== null && _jsx("span", { children: workFacts })] })), workOpen && work?.content] }))] }));
+}
+export function TeamEvent({ event, attachments, onOpenAttachment, at, timeBasis, domId, timelineId, participant, recipientParticipant = null, hit, forceOpen, reportWork = null, onReceipt, }) {
+    const color = event.color ?? participant?.color ?? null;
+    const runtime = eventRuntime(participant);
+    if (event.kind === "report") {
+        return (_jsx(TeamReport, { event: event, attachments: attachments, onOpenAttachment: onOpenAttachment, at: at, timeBasis: timeBasis, domId: domId, timelineId: timelineId, color: color, runtime: runtime, hit: hit, forceOpen: forceOpen, work: reportWork, onReceipt: onReceipt }));
+    }
+    if (!matchesMessage(event)) {
+        const failed = event.status === "failed";
+        return (_jsxs(ActivityEvent, { domId: domId, timelineId: timelineId, label: "Team update", summary: lifecycleText(event), at: at, hit: hit, forceOpen: forceOpen, failed: failed, glyph: _jsx(TeamAvatar, { color: color, name: event.sender }), children: [_jsx("p", { children: lifecycleText(event) }), _jsx(TeamTime, { at: at, basis: timeBasis }), eventBody(event) !== null && _jsx(AuthoredMessage, { messageKey: domId, role: "agent", title: "Team update", attachments: attachments, imagesOutside: true, onOpenAttachment: onOpenAttachment, matched: hit, text: eventBody(event) ?? "", recordedText: event.body, onReceipt: onReceipt })] }));
+    }
+    const body = eventBody(event);
+    const route = eventRoute(event);
+    const label = event.kind === "assignment" ? "Assignment" : event.channel === "peer" ? "Peer message"
+        : event.channel === "coordinator" ? "Coordinator follow-up" : "Team message";
+    return (_jsxs(ActivityEvent, { domId: domId, timelineId: timelineId, label: label, summary: `${speaker(event.sender)}${route === null ? "" : ` ${route}`}`, at: at, hit: hit, forceOpen: forceOpen, glyph: _jsx(TeamAvatar, { color: color, name: event.sender }), children: [_jsxs("header", { className: "tm-message__head", children: [_jsx("span", { className: "mark", children: _jsx(TeamAvatar, { color: color, name: event.sender }) }), _jsx("span", { className: "tm-message__who", children: speaker(event.sender) }), event.recipient !== null ? (_jsxs("span", { className: "tm-message__route", children: ["\u2192 ", _jsx(AddressMention, { name: event.recipient, color: recipientParticipant?.color ?? null })] })) : route !== null ? (_jsx("span", { className: "tm-message__route", children: route })) : null, _jsx("span", { className: "tm-message__kind", children: event.kind }), _jsx(TeamTime, { at: at, basis: timeBasis, className: "tm-message__time" })] }), event.summary !== null && event.body !== null && (_jsx("p", { className: "tm-message__subject", children: event.summary })), body !== null ? (_jsx("div", { className: "tm-message__body tr-prose", children: _jsx(AuthoredMessage, { messageKey: domId, role: "agent", attachments: attachments, imagesOutside: true, onOpenAttachment: onOpenAttachment, matched: hit, title: `${label} from ${speaker(event.sender)}`, text: body, recordedText: event.body, onReceipt: onReceipt }) })) : _jsx("p", { className: "tr-quiet", children: "No message body recorded." })] }));
+}
+function matchesMessage(event) {
+    return event.kind === "message" || event.kind === "assignment";
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface ThinkingProps {
+    readonly text: string;
+    readonly spanMs: number | null;
+    readonly domId: string;
+    readonly timelineId: string;
+    readonly hit: boolean;
+    /** The margin anchor, drawn by the caller so every segment builds it once. */
+    readonly anchor: ReactNode;
+}
+export declare function Thinking({ text, spanMs, domId, timelineId, hit, anchor }: ThinkingProps): import("react").JSX.Element;
+/**
+ * Q10 A (transcript-fold, 2026-09-08) — reasoning that stands alone between
+ * two paragraphs is a run of one, and a run of one is the line it already was:
+ * `Thought · its first words · the span`, on the ledger's rail, opening in
+ * place to the same muted prose the clamp holds. Inside a ladder `Thinking`
+ * keeps the clamp; this is the line form only. Q4 C moved one level down.
+ */
+export declare function ThoughtLine({ text, spanMs, domId, timelineId, hit, anchor, forceOpen, embedded, }: ThinkingProps & {
+    /** A landing inside this thought opens it, as a landing inside a line does:
+     * the matched words must be on the page, not one press away. */
+    readonly forceOpen?: boolean;
+    readonly embedded?: boolean;
+}): import("react").JSX.Element;