@vibefield/rosetta-room 0.0.0-stage → 0.1.0

package/dist/components/transcript/HeadOfDocument.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// §08 — the head line, the pull bar, the failure sentences, the session start.
+//
+// A marker that counts, in the marker family's bare-text form, plus one
+// instrument: the veil's colourless bar. The line measures the SESSION; the
+// scrollbar measures the loaded document. Everything it renders comes from
+// `describeHead`, so what it draws is provable without a DOM.
+import { clock } from "../../lib/format.js";
+import { describeHead } from "../../lib/transcript/head-state.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 function sessionStartLabel(startedAt) {
+    if (startedAt === null || !Number.isFinite(startedAt))
+        return null;
+    const words = new Date(startedAt).toLocaleDateString("en-GB", {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+    });
+    return `${words} · ${clock(startedAt)}`;
+}
+/** 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 function TopFade() {
+    return _jsx("div", { className: "tr-frost", "aria-hidden": "true" });
+}
+function HeadLine({ view, onRetry }) {
+    return (_jsxs("div", { className: "tr-top", "data-state": view.state, children: [_jsxs("div", { className: "tr-top__line", children: [view.lead !== "" && _jsx("span", { children: view.lead }), view.figure !== null && _jsx("b", { children: view.figure }), view.trail !== "" && _jsx("span", { children: view.trail }), view.retry && (_jsx("button", { type: "button", onClick: onRetry, children: "retry" }))] }), view.bar && (_jsx("div", { className: "tr-top__bar", children: _jsx("i", { style: view.fill === null ? undefined : { width: view.fill } }) }))] }));
+}
+export function HeadOfDocument({ feed, pull, startedAt, finding }) {
+    const view = describeHead({
+        earlier: feed.earlier,
+        above: feed.earlierAbove,
+        pull,
+        finding: finding ?? null,
+        startLabel: sessionStartLabel(startedAt),
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(HeadLine, { view: view, onRetry: feed.retryEarlier }), feed.earlierNotice !== null && (
+            // Losing the place is stated, not hidden. Muted, never red — nothing
+            // was destroyed; the tail the reader is looking at is already current.
+            _jsx("div", { className: "tr-top", "data-state": "rewritten", children: _jsx("div", { className: "tr-top__line", children: _jsx("span", { children: feed.earlierNotice.message }) }) }))] }));
+}

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

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+import type { AttachmentFact, LedgerLine, LedgerMember, PathFact, RunSummary, TeamMemberPresentation, WorkflowAttemptFact } from "../../lib/transcript/index.js";
+import type { WorkflowChildThread } from "./Workflow.js";
+export interface LineProps {
+    readonly line: LedgerLine;
+    readonly domId: string;
+    readonly hit: boolean;
+    /** A live session below the watermark: the only place the green breath is
+     * honest (§04's status rows). */
+    readonly alive: boolean;
+    /** Force the line open — a search hit landed inside it. */
+    readonly forceOpen: boolean;
+    /** The child runs this line owns, already built (§03 F). */
+    readonly subthreads: readonly WorkflowChildThread[];
+    readonly workflowAttempts: readonly WorkflowAttemptFact[];
+    readonly hasChildren: boolean;
+    /** A later contact with an already-mounted worker navigates to the original
+     * disclosure instead of opening an empty duplicate. */
+    readonly onOpenLinkedChild: (() => void) | null;
+    readonly onOpenPath: (path: PathFact) => void;
+}
+export declare function Line({ line, domId, hit, alive, forceOpen, subthreads, workflowAttempts, hasChildren, onOpenLinkedChild, onOpenPath, }: LineProps): import("react").JSX.Element;
+export interface LedgerProps {
+    /** A §04B group owns the outer fold; these are its existing tool rows. */
+    readonly embedded?: boolean;
+    /** The ladder in order: lines, and the thoughts, markers and summaries
+     * that happened between them (R-1). */
+    readonly members: readonly LedgerMember[];
+    readonly summary: RunSummary;
+    /** The margin anchor of a closed run, drawn by the caller (T-4). */
+    readonly anchor?: ReactNode;
+    readonly domIdOf: (timelineId: string) => string;
+    readonly highlightedTimelineId: string | null;
+    /** The reader is being sent to a row inside this run. */
+    readonly focusTimelineId: string | null;
+    readonly alive: (line: LedgerLine) => boolean;
+    readonly subthreadsFor: (line: LedgerLine) => readonly WorkflowChildThread[];
+    readonly workflowAttemptsFor: (line: LedgerLine) => readonly WorkflowAttemptFact[];
+    readonly hasChildren: (line: LedgerLine) => boolean;
+    /** A search hit landed inside a CHILD run this line owns: the line has to
+     * open for the subthread to mount at all, so the reader is not sent to an
+     * element that does not exist yet. */
+    readonly childFocused: (line: LedgerLine) => boolean;
+    /** The already-anchored worker named by a later delegate/resume line. */
+    readonly linkedChildId: (line: LedgerLine) => string | null;
+    readonly onOpenLinkedChild: (childId: string) => void;
+    /** A proven team delegate replaces the generic delegate sentence with its
+     * roster operation. Ordinary Agent workers return null and keep Line. */
+    readonly teamMemberFor: (line: LedgerLine) => TeamMemberPresentation | null;
+    readonly onOpenPath: (path: PathFact) => void;
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+}
+export declare function Ledger({ embedded, members, summary, anchor, domIdOf, highlightedTimelineId, focusTimelineId, alive, subthreadsFor, workflowAttemptsFor, hasChildren, childFocused, linkedChildId, onOpenLinkedChild, teamMemberFor, onOpenPath, onOpenAttachment, }: LedgerProps): import("react").JSX.Element;

package/dist/components/transcript/Ledger.js

@@ -0,0 +1,182 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { clock } from "../../lib/format.js";
+import { objectText, spanText } from "../../lib/transcript/index.js";
+import { activityImages } from "../../lib/transcript/images.js";
+import { Attachments } from "./Attachments.js";
+import { FaviconStack, Favicon } from "./Favicon.js";
+import { FailGlyph, FamilyGlyph, LineChevron } from "./glyphs.js";
+import { useFoldPreference } from "./fold-preference.js";
+import { useRowDisclosure } from "./disclosure-state.js";
+import { hasDetail, LineDetail } from "./LineDetail.js";
+import { Marker, SummaryNote } from "./Marker.js";
+import { TeamInvocation } from "./Team.js";
+import { Thinking } from "./Thinking.js";
+const TONE_CLASS = {
+    plain: undefined,
+    dir: "dir",
+    query: "q",
+    aside: "in",
+};
+function ObjectParts({ parts }) {
+    return (_jsx(_Fragment, { children: parts.map((part, at) => {
+            const className = TONE_CLASS[part.tone];
+            return className === undefined ? (_jsx("span", { children: part.text }, at)) : (_jsx("span", { className: className, children: part.text }, at));
+        }) }));
+}
+export function Line({ line, domId, hit, alive, forceOpen, subthreads, workflowAttempts, hasChildren, onOpenLinkedChild, onOpenPath, }) {
+    const [open, setOpen] = useRowDisclosure(domId, line.openByDefault);
+    useEffect(() => {
+        if (forceOpen || hit)
+            setOpen(true);
+    }, [forceOpen, hit, setOpen]);
+    const navigatesToChild = onOpenLinkedChild !== null;
+    const pressable = navigatesToChild || hasChildren || hasDetail(line.detail, line.diagnostic);
+    const isOpen = !navigatesToChild && pressable && (open || forceOpen);
+    const running = line.state === "running" && alive;
+    const state = line.state === "failed"
+        ? "failed"
+        : line.state === "running"
+            ? running
+                ? "running"
+                : "muted"
+            : line.state === "muted"
+                ? "muted"
+                : undefined;
+    const sources = line.detail.kind === "sources" ? line.detail.sources : null;
+    const fetched = line.detail.kind === "fetch" ? line.detail.fetch : null;
+    const stamp = line.at === null ? null : clock(line.at);
+    const toggle = () => {
+        if (navigatesToChild) {
+            onOpenLinkedChild();
+            return;
+        }
+        if (pressable)
+            setOpen((value) => !value);
+    };
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-line", id: domId, "data-timeline-id": line.rows[0]?.timeline_id, "data-state": state, "data-hit": hit || undefined, "data-web": line.family.startsWith("web_") ? line.family : undefined, "data-page-title": fetched?.title ? true : undefined, role: pressable ? "button" : undefined, tabIndex: pressable ? 0 : undefined, "aria-expanded": !navigatesToChild && pressable ? isOpen : undefined, "aria-controls": !navigatesToChild && hasDetail(line.detail, line.diagnostic) ? `${domId}-detail` : undefined, "aria-label": navigatesToChild ? `${line.verb}: open original worker subthread` : undefined, onClick: toggle, onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    toggle();
+                }, children: [_jsx("span", { className: "tr-line__g", children: line.state === "failed" ? (_jsx(FailGlyph, {})) : running ? (_jsx("i", { className: "tr-dot" })) : (_jsx(FamilyGlyph, { glyph: line.glyph })) }), _jsx("span", { className: "tr-line__v", children: line.verb }), _jsx("span", { className: "tr-line__o", title: objectText(line.object), children: _jsx(ObjectParts, { parts: line.object }) }), _jsxs("span", { className: "tr-line__r", children: [sources !== null && sources.length > 0 && (_jsx(FaviconStack, { hosts: sources.map((source) => source.host) })), line.result !== null && (_jsx("span", { className: line.resultTone === "failed" || line.resultTone === "running" ? "why" : undefined, children: line.result })), fetched !== null && fetched.title !== null && (_jsxs(_Fragment, { children: [_jsx(Favicon, { host: fetched.host }), _jsx("span", { className: "ttl", title: fetched.title, children: fetched.title })] })), stamp !== null && _jsx("span", { className: "t", children: line.elided ? `→ ${stamp}` : stamp }), pressable && (_jsx("span", { className: "chev", children: _jsx(LineChevron, {}) }))] })] }), isOpen && (_jsxs(_Fragment, { children: [(() => {
+                        const body = (_jsx(LineDetail, { detail: line.detail, diagnostic: line.diagnostic, workflowChildren: line.detail.kind === "workflow" ? subthreads : [], workflowAttempts: workflowAttempts, onOpenPath: onOpenPath }));
+                        // `LineDetail` answers null when the family has nothing honest to
+                        // show; a delegate whose child IS the detail is exactly that case.
+                        return hasDetail(line.detail, line.diagnostic) ? (_jsx("div", { className: "tr-detail", id: `${domId}-detail`, children: body })) : null;
+                    })(), line.detail.kind === "workflow" ? null : subthreads.map((thread) => thread.node)] }))] }));
+    return line.family.startsWith("web_") ? _jsx("div", { className: "tr-web", children: content }) : content;
+}
+const TEAM_START_BURST_MS = 5 * 60_000;
+function sameStartBurst(first, candidate) {
+    if (candidate.operation !== "add" || candidate.team !== first.team)
+        return false;
+    if (first.row.at === null || candidate.row.at === null)
+        return true;
+    return candidate.row.at >= first.row.at && candidate.row.at - first.row.at <= TEAM_START_BURST_MS;
+}
+function rowsOf(member) {
+    return member.kind === "line" ? member.line.rows : [member.row];
+}
+export function Ledger({ embedded = false, members, summary, anchor, domIdOf, highlightedTimelineId, focusTimelineId, alive, subthreadsFor, workflowAttemptsFor, hasChildren, childFocused, linkedChildId, onOpenLinkedChild, teamMemberFor, onOpenPath, onOpenAttachment, }) {
+    const images = useMemo(() => activityImages(members), [members]);
+    const inside = (member) => (member.kind === "line" && childFocused(member.line)) ||
+        (focusTimelineId !== null &&
+            rowsOf(member).some((row) => row.timeline_id === focusTimelineId));
+    const focusInside = members.some(inside);
+    // §05 — the room's activity act is the DEFAULT every run follows: closed,
+    // or open while the act holds every run open. A press on the head is an
+    // override (`true`/`false`); the next press of the act clears it.
+    const everyRunOpen = !useFoldPreference().folded;
+    // Activity follows the room from its first line. A live run that grows
+    // keeps any explicit override, so it never closes on its own (R-5).
+    // Speech, such as a question, has no summary head and stays open.
+    const [override, setOverride] = useState(() => summary.closedByDefault ? null : true);
+    const actRef = useRef(everyRunOpen);
+    useEffect(() => {
+        if (actRef.current === everyRunOpen)
+            return;
+        actRef.current = everyRunOpen;
+        setOverride(null);
+    }, [everyRunOpen]);
+    useEffect(() => {
+        if (focusInside)
+            setOverride(true);
+    }, [focusInside]);
+    // A landing rings a row after scrolling to it, and the column scrolled
+    // before this ladder was shown. Open on the ring, then bring the row in.
+    const highlightInside = highlightedTimelineId !== null &&
+        members.some((member) => rowsOf(member).some((row) => row.timeline_id === highlightedTimelineId));
+    const domIdRef = useRef(domIdOf);
+    domIdRef.current = domIdOf;
+    useEffect(() => {
+        if (embedded || !highlightInside || highlightedTimelineId === null)
+            return;
+        setOverride(true);
+        const frame = window.requestAnimationFrame(() => {
+            document
+                .getElementById(domIdRef.current(highlightedTimelineId))
+                ?.scrollIntoView({ block: "center" });
+        });
+        return () => window.cancelAnimationFrame(frame);
+    }, [embedded, highlightInside, highlightedTimelineId]);
+    const drawn = [];
+    // Every member read below sits under a bound against members.length: the
+    // loop's own, or the burst's `index + 1 < members.length`.
+    const memberAt = (index) => members[index];
+    for (let index = 0; index < members.length; index += 1) {
+        const member = memberAt(index);
+        if (member.kind !== "line") {
+            // Inside the ladder every member keeps the form it had as a segment.
+            const rowId = member.row.timeline_id;
+            const hit = highlightedTimelineId === rowId;
+            if (member.kind === "thinking") {
+                drawn.push(_jsx(Thinking, { text: member.text, spanMs: member.spanMs, domId: domIdOf(rowId), timelineId: rowId, hit: hit, anchor: null }, member.key));
+            }
+            else if (member.kind === "marker") {
+                drawn.push(_jsx(Marker, { text: member.text, tone: member.tone, domId: domIdOf(rowId), timelineId: rowId, hit: hit }, member.key));
+            }
+            else {
+                drawn.push(_jsx(SummaryNote, { purpose: member.purpose, text: member.text, domId: domIdOf(rowId), timelineId: rowId, hit: hit }, member.key));
+            }
+            continue;
+        }
+        const line = member.line;
+        const teamMember = teamMemberFor(line);
+        if (teamMember !== null) {
+            const burst = [teamMember];
+            if (teamMember.operation === "start" || teamMember.operation === "known") {
+                while (index + 1 < members.length) {
+                    const next = memberAt(index + 1);
+                    if (next.kind !== "line")
+                        break;
+                    const candidate = teamMemberFor(next.line);
+                    if (candidate === null || !sameStartBurst(teamMember, candidate))
+                        break;
+                    burst.push(candidate);
+                    index += 1;
+                }
+            }
+            drawn.push(_jsx(TeamInvocation, { members: burst, domIdOf: domIdOf, highlightedTimelineId: highlightedTimelineId, focusTimelineId: focusTimelineId }, teamMember.row.timeline_id));
+            continue;
+        }
+        const key = line.rows[0]?.timeline_id ?? line.key;
+        const linkedChild = linkedChildId(line);
+        drawn.push(_jsx(Line, { line: line, domId: domIdOf(key), hit: highlightedTimelineId !== null &&
+                line.rows.some((row) => row.timeline_id === highlightedTimelineId), alive: alive(line), forceOpen: inside(member), subthreads: subthreadsFor(line), workflowAttempts: workflowAttemptsFor(line), hasChildren: hasChildren(line), onOpenLinkedChild: linkedChild === null ? null : () => onOpenLinkedChild(linkedChild), onOpenPath: onOpenPath }, line.key));
+    }
+    // Activity gets a summary even for one line; speech has no outer fold.
+    const closed = !embedded && summary.closedByDefault;
+    // R-5: the green breath only in a live session below the watermark, and
+    // then the head carries the line that is happening.
+    const running = summary.running !== null && alive(summary.running) ? summary.running : null;
+    const span = summary.spanMs !== null && summary.spanMs >= 1000 ? spanText(summary.spanMs) : null;
+    const expanded = override ?? (everyRunOpen || focusInside);
+    const toggle = () => setOverride(!expanded);
+    return (_jsxs("div", { className: embedded ? "tr-activity-tools" : closed ? "tr-seg tr-ledger" : "tr-ledger", children: [closed ? anchor : null, closed ? _jsxs("div", { className: "tr-line tr-fold", role: "button", tabIndex: 0, "aria-expanded": expanded, "data-state": running === null ? undefined : "running", onClick: toggle, onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    toggle();
+                }, children: [_jsx("span", { className: "tr-line__g chev", children: running === null ? _jsx(LineChevron, {}) : _jsx("i", { className: "tr-dot" }) }), _jsxs("span", { className: "tr-line__v", children: [summary.nouns.map((noun, index) => (_jsxs(Fragment, { children: [index > 0 && " · ", noun.text, noun.names.length > 0 && (_jsxs(_Fragment, { children: [" ", _jsxs("span", { className: "names", children: [noun.names.join(", "), noun.more > 0 ? ` … ${noun.more} more` : ""] })] }))] }, noun.family))), running !== null && (_jsxs("span", { className: "cur", children: [summary.nouns.length > 0 && " · ", running.verb, " ", _jsx("span", { className: "tr-line__o", children: objectText(running.object) })] }))] }), _jsxs("span", { className: "tr-line__r", children: [summary.failed > 0 && _jsxs("b", { children: [summary.failed, " failed"] }), summary.errors > 0 && (_jsxs("b", { children: [summary.errors, " ", summary.errors === 1 ? "error" : "errors"] })), span !== null && (_jsx("span", { className: running === null ? undefined : "why", children: running === null ? span : `${span} → …` }))] })] }) : null, !embedded && _jsx(Attachments, { facts: images, onOpenAttachment: onOpenAttachment }), _jsx("div", { className: closed ? "tr-ladder" : undefined, children: drawn })] }));
+}

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { LedgerDetail, PathFact } from "../../lib/transcript/index.js";
+import type { WorkflowChildThread } from "./Workflow.js";
+export interface LineDetailProps {
+    readonly detail: LedgerDetail;
+    /** The bounded failure text. Never the tool's output. */
+    readonly diagnostic: string | null;
+    /** The delegate's child run, resolved by the document and passed in — this
+     * module knows the shape of a detail, not the shape of a session tree. */
+    readonly subthread?: ReactNode;
+    /** Workflow children stay attached to their own worker row instead of
+     * becoming an undifferentiated stack below the run document. */
+    readonly workflowChildren?: readonly WorkflowChildThread[];
+    readonly workflowAttempts?: readonly import("../../lib/transcript/index.js").WorkflowAttemptFact[];
+    /** The document owns the viewer; detail rows only report which exact path
+     * the reader pressed. */
+    readonly onOpenPath?: ((path: PathFact) => void) | undefined;
+}
+/** The body of one open line. Returns null when the family has nothing honest
+ * to show, which is what makes the line unpressable in `Ledger`. */
+export declare function LineDetail({ detail, diagnostic, subthread, workflowChildren, workflowAttempts, onOpenPath, }: LineDetailProps): import("react").JSX.Element | null;
+/** Whether pressing the line has anything to open. Keeps the DOM honest: a
+ * line that opens into nothing is not focusable and does not take a press. */
+export declare function hasDetail(detail: LedgerDetail, diagnostic: string | null): boolean;

package/dist/components/transcript/LineDetail.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { resourceDisplay } from "../../lib/transcript/index.js";
+import { CommandList, DiffDetail, Document, Fields, Findings, Participants, PathList, Questions, Tasks, LIST_CAP, } from "./detail-parts.js";
+import { SourceList, FetchDetails } from "./WebDetail.js";
+import { WorkflowDetail } from "./Workflow.js";
+function LocationList({ locations, total, }) {
+    const shown = locations.slice(0, LIST_CAP);
+    return (_jsxs("ul", { className: "tr-paths", children: [shown.map((location, at) => (_jsxs("li", { children: [resourceDisplay(location.resource, {}), location.line !== null && `:${location.line}`, location.summary !== null && _jsx("span", { className: "n", children: location.summary })] }, at))), total > shown.length && _jsxs("li", { className: "tr-more", children: ["\u2026 ", total - shown.length, " more"] })] }));
+}
+/** The body of one open line. Returns null when the family has nothing honest
+ * to show, which is what makes the line unpressable in `Ledger`. */
+export function LineDetail({ detail, diagnostic, subthread, workflowChildren = [], workflowAttempts = [], onOpenPath, }) {
+    const body = (() => {
+        switch (detail.kind) {
+            case "none":
+                return null;
+            case "paths":
+                return (_jsxs(_Fragment, { children: [detail.description !== undefined && _jsx("p", { className: "tr-text", children: detail.description }), _jsx(PathList, { paths: detail.paths, total: detail.total, onOpenPath: onOpenPath })] }));
+            case "locations":
+                return _jsx(LocationList, { locations: detail.locations, total: detail.total });
+            case "sources":
+                return _jsx(SourceList, { sources: detail.sources, total: detail.total });
+            case "fetch":
+                return _jsx(FetchDetails, { fetches: [detail.fetch] });
+            case "fetches":
+                return _jsx(FetchDetails, { fetches: detail.fetches });
+            case "diff":
+                return _jsx(DiffDetail, { deltas: detail.deltas, diffstat: detail.diffstat });
+            case "command":
+                return _jsx(CommandList, { commands: detail.commands, code: false });
+            case "code":
+                return _jsx(CommandList, { commands: detail.commands, code: true });
+            case "names":
+                return (_jsxs("ul", { className: "tr-paths", children: [detail.names.slice(0, LIST_CAP).map((name, at) => (_jsx("li", { children: name }, at))), detail.total > Math.min(detail.names.length, LIST_CAP) && (_jsxs("li", { className: "tr-more", children: ["\u2026 ", detail.total - Math.min(detail.names.length, LIST_CAP), " more"] }))] }));
+            case "tasks":
+                return (_jsx(Tasks, { tasks: detail.tasks, total: detail.total, changedTaskId: detail.changedTaskId, change: detail.change }));
+            case "text":
+                return _jsx("p", { className: "tr-text", children: detail.text });
+            case "questions":
+                return _jsx(Questions, { questions: detail.questions, answers: detail.answers });
+            case "findings":
+                return _jsx(Findings, { findings: detail.findings, total: detail.total });
+            case "document":
+                return _jsx(Document, { document: detail.document });
+            case "fields":
+                return (_jsxs(_Fragment, { children: [_jsx(Fields, { fields: detail.fields }), detail.resources.length > 0 && (_jsx(PathList, { paths: detail.resources, total: detail.resources.length }))] }));
+            case "delegate":
+                return detail.delegate.orphanSummary === null ? null : (
+                // The child was never indexed, so the record draws its result
+                // summary as prose rather than an empty subthread.
+                _jsx("p", { className: "tr-text", children: detail.delegate.orphanSummary }));
+            case "workflow":
+                return (_jsx(WorkflowDetail, { fact: detail.workflow, attempts: workflowAttempts, children: workflowChildren, onOpenPath: onOpenPath }));
+            case "participants":
+                return (_jsx(Participants, { participants: detail.participants, total: detail.total, body: detail.body }));
+            case "diagnostic":
+                return _jsx("pre", { className: "tr-diag", children: detail.diagnostic });
+        }
+    })();
+    // A failure always opens to its bounded diagnostic, even when the family
+    // already had something to say (§04: shell opens into the command, its cwd,
+    // AND on failure the diagnostic).
+    const extra = diagnostic !== null && detail.kind !== "diagnostic" ? (_jsx("pre", { className: "tr-diag", children: diagnostic })) : null;
+    if (body === null && extra === null && subthread === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [body, extra, subthread] }));
+}
+/** Whether pressing the line has anything to open. Keeps the DOM honest: a
+ * line that opens into nothing is not focusable and does not take a press. */
+export function hasDetail(detail, diagnostic) {
+    if (diagnostic !== null)
+        return true;
+    switch (detail.kind) {
+        case "none":
+            return false;
+        case "delegate":
+            return detail.delegate.childSessionId !== null || detail.delegate.orphanSummary !== null;
+        default:
+            return true;
+    }
+}

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

@@ -0,0 +1,33 @@
+import type { SummaryPurpose } from "@vibefield/rosetta-protocol";
+export interface MarkerProps {
+    readonly text: string;
+    /** A runtime error is the one marker that takes hue (T-5). */
+    readonly tone?: "plain" | "failed";
+    readonly domId?: string;
+    readonly timelineId?: string;
+    readonly hit?: boolean;
+}
+export declare function Marker({ text, tone, domId, timelineId, hit }: MarkerProps): import("react").JSX.Element;
+/** D33's line, kept: rows arriving after you did start here. Green, because
+ * this is the one marker that says something is alive. */
+export declare function Watermark({ text, title }: {
+    readonly text: string;
+    readonly title?: string;
+}): import("react").JSX.Element;
+/** A known unknown, and pressable because it should name its reason (§9).
+ * The count is an ORDINAL discontinuity inside the loaded document — rows the
+ * projection has, that this page does not. It is never drawn at the head,
+ * where the head line already states what is above. */
+export declare function GapMarker({ count, onPress, }: {
+    readonly count: number;
+    readonly onPress: () => void;
+}): import("react").JSX.Element;
+/** The session summary — a footnote at the end, not a state; and, inside a
+ * run, one member of its ladder. The same drawing in both places. */
+export declare function SummaryNote({ purpose, text, domId, timelineId, hit, }: {
+    readonly purpose: SummaryPurpose;
+    readonly text: string;
+    readonly domId: string;
+    readonly timelineId: string;
+    readonly hit: boolean;
+}): import("react").JSX.Element;

package/dist/components/transcript/Marker.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Marker({ text, tone = "plain", domId, timelineId, hit }) {
+    return (_jsx("div", { className: tone === "failed" ? "tr-mark tr-mark--error" : "tr-mark", id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, children: text }));
+}
+/** D33's line, kept: rows arriving after you did start here. Green, because
+ * this is the one marker that says something is alive. */
+export function Watermark({ text, title }) {
+    return (_jsx("div", { className: "tr-mark tr-mark--live", title: title, children: text }));
+}
+/** A known unknown, and pressable because it should name its reason (§9).
+ * The count is an ORDINAL discontinuity inside the loaded document — rows the
+ * projection has, that this page does not. It is never drawn at the head,
+ * where the head line already states what is above. */
+export function GapMarker({ count, onPress, }) {
+    return (_jsxs("button", { type: "button", className: "tr-mark tr-mark--gap", onClick: onPress, children: ["gap \u00B7 ", count, " ", count === 1 ? "message" : "messages", " not indexed"] }));
+}
+/** The session summary — a footnote at the end, not a state; and, inside a
+ * run, one member of its ladder. The same drawing in both places. */
+export function SummaryNote({ purpose, text, domId, timelineId, hit, }) {
+    return (_jsxs("div", { className: "tr-summary", id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, children: [_jsxs("span", { className: "eyebrow", children: [purpose, " summary"] }), text] }));
+}

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

@@ -0,0 +1,12 @@
+import type { FullMessage } from "./message-file-source.js";
+import type { ProseProps } from "./Prose.js";
+import "../../styles/message-preview.css";
+/** The column owns one viewer, including messages inside nested worker runs. */
+export declare const MessageViewerContext: import("react").Context<((message: FullMessage) => void) | null>;
+export declare function MessagePreview({ messageKey, role, title, recordedText, matched, ...prose }: ProseProps & {
+    readonly messageKey: string;
+    readonly role: FullMessage["role"];
+    readonly title?: string | undefined;
+    readonly recordedText?: FullMessage["recordedText"] | undefined;
+    readonly matched?: boolean | undefined;
+}): import("react").JSX.Element;

package/dist/components/transcript/MessagePreview.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { MESSAGE_PREVIEW_CHARACTERS, messageExcerpt } from "./message-preview.js";
+import { Prose } from "./Prose.js";
+import "../../styles/message-preview.css";
+/** The column owns one viewer, including messages inside nested worker runs. */
+export const MessageViewerContext = createContext(null);
+export function MessagePreview({ messageKey, role, title, recordedText, matched = false, ...prose }) {
+    const openMessage = useContext(MessageViewerContext);
+    const [matchedKey, setMatchedKey] = useState(matched ? messageKey : null);
+    useEffect(() => { if (matched)
+        setMatchedKey(messageKey); }, [matched, messageKey]);
+    const { text } = prose;
+    const member = recordedText?.type === "member" ? recordedText : null;
+    const viewportRef = useRef(null);
+    const contentRef = useRef(null);
+    const widthRef = useRef(0);
+    const [fit, setFit] = useState({ text, budget: MESSAGE_PREVIEW_CHARACTERS });
+    const budget = fit.text === text ? fit.budget : MESSAGE_PREVIEW_CHARACTERS;
+    const excerpt = useMemo(() => messageExcerpt(text, budget), [text, budget]);
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        const content = contentRef.current;
+        if (viewport === null || content === null || openMessage === null)
+            return;
+        const measureWidth = viewport.closest(".tr-seg") ?? viewport;
+        const measure = () => {
+            const width = measureWidth.clientWidth;
+            if (width === 0)
+                return; // An unopened worker ladder has no measure yet.
+            if (widthRef.current > 0 && Math.abs(width - widthRef.current) > 1) {
+                widthRef.current = width;
+                setFit({ text, budget: MESSAGE_PREVIEW_CHARACTERS });
+                return;
+            }
+            widthRef.current = width;
+            const limit = Number.parseFloat(getComputedStyle(viewport).maxHeight);
+            const height = content.offsetHeight;
+            if (!Number.isFinite(limit) || height <= limit + 1 || excerpt.text.length === 0)
+                return;
+            // Remove text from the rendered tree, rather than leave invisible links
+            // and copy buttons behind a CSS clip. Shortening always makes progress;
+            // headings, lists, tables and code all count toward the same height.
+            const next = Math.max(0, Math.floor(excerpt.text.length * limit / height) - 48);
+            setFit({ text, budget: next });
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(measureWidth);
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, [text, excerpt.text, openMessage]);
+    // A document rendered without its column still has readable, complete text.
+    // Production documents always inherit the column's viewer capability.
+    if (openMessage === null)
+        return _jsx(Prose, { ...prose });
+    return (_jsxs("div", { className: "tr-message", "data-omitted": excerpt.omitted || member !== null || undefined, children: [_jsx("div", { className: "tr-message__viewport", ref: viewportRef, children: _jsx("div", { className: "tr-message__content", ref: contentRef, children: _jsx(Prose, { ...prose, text: excerpt.text, imageMarkerSource: text, excerpt: excerpt.omitted || member !== null }) }) }), (excerpt.omitted || member !== null) && (_jsx("div", { className: "tr-message__footer", children: _jsx("button", { type: "button", className: "tr-message__open", "aria-haspopup": "dialog", onClick: () => openMessage({ key: messageKey, role, title, text, recordedText, attachments: prose.imageAttachments }), children: matchedKey === messageKey ? "View match in full message" : "View full message" }) }))] }));
+}

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

@@ -0,0 +1,20 @@
+import type { AttachmentFact, Prompt as PromptModel } from "../../lib/transcript/index.js";
+export interface PromptPanelProps {
+    readonly prompt: PromptModel;
+    readonly domId: string;
+    readonly landed: boolean;
+    readonly onReceipt: (message: string) => void;
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+}
+/** The panel alone, so a cluster can stack several inside one segment. */
+export declare function PromptPanel({ prompt, domId, landed, onReceipt, onOpenAttachment, }: PromptPanelProps): import("react").JSX.Element;
+export interface PromptProps {
+    /** One conversational prompt, or adjacent successful setting commands. */
+    readonly prompts: readonly PromptModel[];
+    readonly domIdOf: (timelineId: string) => string;
+    readonly landedTimelineId: string | null;
+    readonly focusTimelineId?: string | null;
+    readonly onReceipt: (message: string) => void;
+    readonly onOpenAttachment: (fact: AttachmentFact, row?: readonly AttachmentFact[]) => void;
+}
+export declare function Prompt({ prompts, domIdOf, landedTimelineId, focusTimelineId, onReceipt, onOpenAttachment, }: PromptProps): import("react").JSX.Element | null;

package/dist/components/transcript/Prompt.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { firstLine } from "../../lib/transcript/index.js";
+import { clock } from "../../lib/format.js";
+import { Anchor } from "./Anchor.js";
+import { AuthoredMessage } from "./AuthoredMessage.js";
+import { messageAttachments } from "../../lib/transcript/images.js";
+import { SegmentActs } from "./Prose.js";
+import { ActivityEvent } from "./Activity.js";
+import { FamilyGlyph } from "./glyphs.js";
+/** The panel alone, so a cluster can stack several inside one segment. */
+export function PromptPanel({ prompt, domId, landed, onReceipt, onOpenAttachment, }) {
+    return (_jsx("div", { className: landed ? "tr-prompt-message is-landed" : "tr-prompt-message", id: domId, "data-timeline-id": prompt.row.timeline_id, children: _jsx(AuthoredMessage, { text: prompt.text, attachments: prompt.attachments, recordedText: prompt.row.body.type === "user" ? prompt.row.body.text : null, messageKey: `${prompt.row.session_id}:${prompt.row.timeline_id}`, role: "user", onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, renderText: content => content !== null || prompt.attachments.length === 0
+                ? _jsx("div", { className: "tr-prompt", children: content ?? _jsx("p", { className: "tr-quiet", children: "no text recorded" }) })
+                : null }) }));
+}
+function senderLabel(sender) {
+    if (sender === "coordinator")
+        return "Claude Code";
+    return sender.startsWith("@") ? sender : `@${sender}`;
+}
+function MachinePrompt({ prompt, domId, onReceipt, onOpenAttachment, hit, forceOpen, }) {
+    const machine = prompt.machine ?? { label: "Assignment", sender: null };
+    const recordedText = prompt.row.body.type === "collaboration" ? prompt.row.body.event.body
+        : prompt.row.body.type === "user" ? prompt.row.body.text : null;
+    const facts = [
+        machine.label,
+        machine.sender === null ? null : `from ${senderLabel(machine.sender)}`,
+        prompt.at === null ? null : clock(prompt.at),
+    ].filter((fact) => fact !== null);
+    return (_jsxs(ActivityEvent, { domId: domId, timelineId: prompt.row.timeline_id, label: machine.label, summary: machine.sender === null ? undefined : `from ${senderLabel(machine.sender)}`, at: prompt.at, hit: hit, forceOpen: forceOpen, glyph: _jsx(FamilyGlyph, { glyph: "delegate" }), children: [_jsx("span", { className: "tr-assignment__head", children: facts.join(" · ") }), prompt.text === null && recordedText?.type !== "member" ? (_jsx("span", { className: "tr-quiet", children: "no message body recorded" })) : (_jsx(AuthoredMessage, { messageKey: `${prompt.row.session_id}:${prompt.row.timeline_id}`, role: "agent", attachments: messageAttachments(prompt.row), imagesOutside: true, onOpenAttachment: onOpenAttachment, matched: hit, title: `${machine.label}${machine.sender === null ? "" : ` from ${senderLabel(machine.sender)}`}`, text: prompt.text ?? "", recordedText: recordedText, onReceipt: onReceipt }))] }));
+}
+function CommandPrompt({ prompt, domId }) {
+    if (prompt.setting !== null) {
+        return (_jsxs("div", { className: "tr-setting", id: domId, "data-setting": prompt.setting.kind, title: prompt.command ?? undefined, "aria-label": `${prompt.setting.label}: ${prompt.setting.value}`, children: [_jsx("span", { className: "tr-setting__label", children: prompt.setting.label }), _jsx("span", { className: "tr-setting__value", children: prompt.setting.value })] }));
+    }
+    return (_jsxs("div", { className: "tr-cmd", id: domId, children: [_jsx("code", { children: prompt.command }), prompt.commandOutput !== null && _jsx("span", { children: firstLine(prompt.commandOutput, 160) })] }));
+}
+export function Prompt({ prompts, domIdOf, landedTimelineId, focusTimelineId = null, onReceipt, onOpenAttachment, }) {
+    const first = prompts[0];
+    if (first === undefined)
+        return null;
+    const clustered = prompts.length > 1;
+    // The anchor sits against the first thing in the segment, and a pill is
+    // half a panel's height — so the offset follows what actually opens it.
+    const allCommands = prompts.every((prompt) => prompt.isCommand && prompt.command !== null);
+    const allMachine = prompts.every((prompt) => prompt.machine !== null || prompt.fromParent);
+    const text = prompts
+        .map((prompt) => prompt.text)
+        .filter((value) => value !== null)
+        .join("\n\n");
+    return (_jsxs("div", { className: clustered ? "tr-seg tr-cluster" : "tr-seg", "data-prompt": allCommands || allMachine ? undefined : "", "data-command": allCommands ? "" : undefined, "data-machine": allMachine ? "" : undefined, "data-timeline-id": first.row.timeline_id, children: [_jsx(Anchor, { at: first.at, sessionId: first.row.session_id, timelineId: first.row.timeline_id, onReceipt: onReceipt }), prompts.map((prompt) => 
+            // §03 H — a prompt that is a local command wears a pill instead of a
+            // panel, and its `command_output` rides beside it. One object.
+            prompt.machine !== null || prompt.fromParent ? (_jsx(MachinePrompt, { prompt: prompt, domId: domIdOf(prompt.row.timeline_id), onReceipt: onReceipt, onOpenAttachment: onOpenAttachment, hit: landedTimelineId === prompt.row.timeline_id, forceOpen: focusTimelineId === prompt.row.timeline_id }, prompt.key)) : prompt.isCommand && prompt.command !== null ? (_jsx(CommandPrompt, { prompt: prompt, domId: domIdOf(prompt.row.timeline_id) }, prompt.key)) : (_jsx(PromptPanel, { prompt: prompt, domId: domIdOf(prompt.row.timeline_id), landed: landedTimelineId === prompt.row.timeline_id, onReceipt: onReceipt, onOpenAttachment: onOpenAttachment }, prompt.key))), !allCommands && !allMachine && _jsx(SegmentActs, { text: text, onReceipt: onReceipt })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { AttachmentFact } from "../../lib/transcript/index.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 declare function SegmentActs({ text, onReceipt, }: {
+    readonly text: string;
+    readonly onReceipt: (message: string) => void;
+}): import("react").JSX.Element | null;
+export interface ProseProps {
+    readonly text: string;
+    readonly onReceipt: (message: string) => void;
+    readonly imageAttachments?: readonly AttachmentFact[];
+    /** Ranges are relative to the complete message, including in a preview. */
+    readonly imageMarkerSource?: string;
+    readonly onOpenAttachment?: (fact: AttachmentFact) => void;
+    /** An excerpt may end inside a fence; do not offer to copy partial code. */
+    readonly excerpt?: boolean;
+}
+export declare function Prose({ text, onReceipt, imageAttachments, imageMarkerSource, onOpenAttachment, excerpt, }: ProseProps): import("react").JSX.Element;