@vibefield/rosetta-room 0.0.0-stage → 0.1.1

package/dist/components/transcript/Thinking.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { firstLine, spanText } from "../../lib/transcript/index.js";
+import { useFoldPreference } from "./fold-preference.js";
+import { LineChevron, ThoughtGlyph } from "./glyphs.js";
+import { useRowDisclosure } from "./disclosure-state.js";
+export function Thinking({ text, spanMs, domId, timelineId, hit, anchor }) {
+    const [open, setOpen] = useState(false);
+    const label = spanMs === null || spanMs < 1000
+        ? "more · reasoning"
+        : `more · reasoning, ${spanText(spanMs)}`;
+    return (_jsxs("div", { className: "tr-seg tr-think", "data-open": open, id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, children: [anchor, _jsx("div", { className: "tr-think__text", children: text.split(/\n{2,}/).map((paragraph, at) => paragraph.trim() === "" ? null : _jsx("p", { children: paragraph }, at)) }), _jsx("button", { type: "button", className: "tr-think__more", "aria-expanded": open, onClick: () => setOpen((value) => !value), children: open ? "less" : label })] }));
+}
+/**
+ * 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 function ThoughtLine({ text, spanMs, domId, timelineId, hit, anchor, forceOpen = false, embedded = false, }) {
+    // §05 — the room's activity act is the default, a press is an override,
+    // and the next press of the act clears it — as the run's head does.
+    const everyRunOpen = !useFoldPreference().folded;
+    const [override, setOverride] = useRowDisclosure(domId, !embedded && everyRunOpen);
+    const actRef = useRef(everyRunOpen);
+    useEffect(() => {
+        if (actRef.current === everyRunOpen)
+            return;
+        actRef.current = everyRunOpen;
+        if (!embedded)
+            setOverride(everyRunOpen);
+    }, [everyRunOpen, embedded, setOverride]);
+    useEffect(() => {
+        if (forceOpen || hit)
+            setOverride(true);
+    }, [forceOpen, hit]);
+    const isOpen = override || forceOpen;
+    const span = spanMs === null || spanMs < 1000 ? null : spanText(spanMs);
+    // A thought may open with a blank line; the head names the first line
+    // that says something.
+    const lead = text.trimStart();
+    const toggle = () => setOverride(!isOpen);
+    return (_jsxs("div", { className: "tr-seg tr-ledger tr-thought", id: domId, "data-timeline-id": timelineId, "data-hit": hit || undefined, children: [anchor, _jsxs("div", { className: "tr-line", role: "button", tabIndex: 0, "aria-expanded": isOpen, "data-thought": "", onClick: toggle, onKeyDown: (event) => {
+                    if (event.key !== "Enter" && event.key !== " ")
+                        return;
+                    event.preventDefault();
+                    toggle();
+                }, children: [_jsx("span", { className: "tr-line__g", children: _jsx(ThoughtGlyph, {}) }), _jsx("span", { className: "tr-line__v", children: "Thought" }), _jsx("span", { className: "tr-line__o", title: firstLine(lead, 400), children: firstLine(lead) }), _jsxs("span", { className: "tr-line__r", children: [span !== null && _jsx("span", { children: span }), _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] })] }), isOpen && (_jsx("div", { className: "tr-think", "data-open": "true", children: _jsx("div", { className: "tr-think__text", children: text.split(/\n{2,}/).map((paragraph, at) => paragraph.trim() === "" ? null : _jsx("p", { children: paragraph }, at)) }) }))] }));
+}

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

@@ -0,0 +1,9 @@
+import type { TimelineMeta as TimelineMetaValue, TimelineMetaArtifact, TimelineMetaPlan, TimelineMetaTask, TimelineMetaWorkflow } from "@vibefield/rosetta-protocol";
+export interface TimelineMetaProps {
+    readonly meta: TimelineMetaValue;
+    readonly onOpenTask: (task: TimelineMetaTask) => void;
+    readonly onOpenWorkflow: (workflow: TimelineMetaWorkflow) => void;
+    readonly onOpenPlan: (plan: TimelineMetaPlan) => void;
+    readonly onOpenArtifact: (artifact: TimelineMetaArtifact) => void;
+}
+export declare function TimelineMeta({ meta, onOpenTask, onOpenWorkflow, onOpenPlan, onOpenArtifact, }: TimelineMetaProps): import("react").JSX.Element | null;

package/dist/components/transcript/TimelineMeta.js

@@ -0,0 +1,161 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// §05A — timeline_meta is the map back into the transcript, never a second
+// rendering of it. Up to four non-empty launchers share one non-modal island;
+// tasks and Workflow runs land on retained messages, while file rows hand off
+// to the room's existing viewer.
+import { useEffect, useId, useRef, useState } from "react";
+import { clockShort, fmtBytes } from "../../lib/format.js";
+import { FamilyGlyph, LineChevron } from "./glyphs.js";
+import { availableTimelineMetaKinds, resolveTimelineMetaKind, recordedTaskDuration, recordedWorkflowDuration, } from "./timeline-meta-state.js";
+const GLYPH = { tasks: "task", workflows: "bolt", plans: "doc", artifacts: "box" };
+function exactCount(meta, kind) {
+    return (meta[kind] ?? []).length;
+}
+function titleCase(value) {
+    return value.replaceAll("_", " ").replace(/^./, (letter) => letter.toUpperCase());
+}
+function taskState(task) {
+    if (task.status === "in_progress")
+        return "running";
+    if (task.status === "failed" || task.status === "cancelled")
+        return "failed";
+    return task.status ?? "unknown";
+}
+function taskStatus(task) {
+    return task.status === null ? "State not recorded" : titleCase(task.status);
+}
+function spanText(milliseconds) {
+    const seconds = Math.max(0, Math.floor(milliseconds / 1_000));
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ${String(seconds % 60).padStart(2, "0")}s`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 48)
+        return `${hours}h ${String(minutes % 60).padStart(2, "0")}m`;
+    return `${Math.floor(hours / 24)}d ${hours % 24}h`;
+}
+function workflowState(workflow) {
+    if (workflow.status === "running")
+        return "running";
+    if (workflow.status === "failed")
+        return "failed";
+    return workflow.status;
+}
+function fileType(name) {
+    const extension = name.split(".").pop();
+    return extension === undefined || extension === name ? "File" : extension.toUpperCase();
+}
+function EmptyPanel({ kind }) {
+    return _jsxs("p", { className: "tr-meta-empty", children: ["No ", kind, " recorded in this session."] });
+}
+function TaskPanel({ tasks, onOpen, }) {
+    if (tasks.length === 0)
+        return _jsx(EmptyPanel, { kind: "tasks" });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-meta-listhead", children: [_jsx("span", { children: "Task \u00B7 last recorded state \u00B7 started" }), _jsx("span", { children: "Duration" })] }), _jsx("ol", { className: "tr-meta-list", "aria-label": "Full task list", children: tasks.map((task) => {
+                    const status = taskStatus(task);
+                    const started = task.started_at === null ? "start not recorded" : `started ${clockShort(task.started_at)}`;
+                    const durationMs = recordedTaskDuration(task);
+                    const duration = durationMs === null ? "—" : spanText(durationMs);
+                    const openable = task.timeline_id !== null;
+                    return (_jsx("li", { children: _jsxs("button", { className: "tr-meta-row", type: "button", "data-state": taskState(task), disabled: !openable, "aria-label": `${task.subject}, ${status}, ${started}, duration ${duration}${openable ? "; jump to task message" : "; no task message anchor recorded"}`, onClick: () => onOpen(task), children: [_jsx("span", { className: "tr-meta-status", "aria-hidden": "true", children: task.status === "completed" ? "✓" : "" }), _jsxs("span", { className: "tr-meta-row__body", children: [_jsx("span", { className: "tr-meta-row__name", children: task.subject }), _jsxs("span", { className: "tr-meta-row__meta", children: [status, " \u00B7 ", started] })] }), _jsx("span", { className: "tr-meta-row__value", children: duration }), _jsx("span", { className: "tr-meta-row__chev", children: _jsx(LineChevron, {}) })] }) }, task.id));
+                }) })] }));
+}
+function WorkflowPanel({ workflows, onOpen, }) {
+    if (workflows.length === 0)
+        return _jsx(EmptyPanel, { kind: "workflows" });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-meta-listhead", children: [_jsx("span", { children: "Workflow \u00B7 last recorded state \u00B7 started" }), _jsx("span", { children: "Duration" })] }), _jsx("ol", { className: "tr-meta-list", "aria-label": "Workflow runs", children: workflows.map((workflow) => {
+                    const status = titleCase(workflow.status);
+                    const started = workflow.started_at === null
+                        ? "start not recorded"
+                        : `started ${clockShort(workflow.started_at)}`;
+                    const durationMs = recordedWorkflowDuration(workflow);
+                    const duration = durationMs === null ? "—" : spanText(durationMs);
+                    const workers = workflow.worker_count === null
+                        ? "worker count not recorded"
+                        : `${workflow.worker_count} ${workflow.worker_count === 1 ? "worker" : "workers"}`;
+                    const openable = workflow.timeline_id !== null;
+                    return (_jsx("li", { children: _jsxs("button", { className: "tr-meta-row", type: "button", "data-kind": "workflow", "data-state": workflowState(workflow), disabled: !openable, "aria-label": `${workflow.name}, ${status}, ${started}, ${workers}, duration ${duration}${openable ? "; jump to workflow message" : "; no workflow message anchor recorded"}`, onClick: () => onOpen(workflow), children: [_jsx("span", { className: "tr-meta-status", "aria-hidden": "true", children: workflow.status === "completed" ? "✓" : "" }), _jsxs("span", { className: "tr-meta-row__body", children: [_jsx("span", { className: "tr-meta-row__name", children: workflow.name }), _jsxs("span", { className: "tr-meta-row__meta", children: [status, " \u00B7 ", started, " \u00B7 ", workers] })] }), _jsx("span", { className: "tr-meta-row__value", children: duration }), _jsx("span", { className: "tr-meta-row__chev", children: _jsx(LineChevron, {}) })] }) }, workflow.id));
+                }) })] }));
+}
+function PlanPanel({ plans, onOpen, }) {
+    if (plans.length === 0)
+        return _jsx(EmptyPanel, { kind: "plans" });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-meta-listhead", children: [_jsx("span", { children: "Plan file \u00B7 updated" }), _jsx("span", { children: "Size" })] }), _jsx("ol", { className: "tr-meta-list", "aria-label": "Plan files", children: plans.map((plan) => (_jsx("li", { children: _jsxs("button", { className: "tr-meta-row", type: "button", "aria-label": `Open ${plan.name} in file viewer`, onClick: () => onOpen(plan), children: [_jsx("span", { className: "tr-meta-file", children: _jsx(FamilyGlyph, { glyph: "doc" }) }), _jsxs("span", { className: "tr-meta-row__body", children: [_jsx("span", { className: "tr-meta-row__name", children: plan.name }), _jsxs("span", { className: "tr-meta-row__meta", children: [fileType(plan.name), " \u00B7 ", plan.updated_at === null ? "update time not recorded" : `updated ${clockShort(plan.updated_at)}`] })] }), _jsx("span", { className: "tr-meta-row__value", children: fmtBytes(plan.byte_len) }), _jsx("span", { className: "tr-meta-row__chev", children: _jsx(LineChevron, {}) })] }) }, plan.id))) })] }));
+}
+function ArtifactPanel({ artifacts, onOpen, }) {
+    if (artifacts.length === 0)
+        return _jsx(EmptyPanel, { kind: "artifacts" });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "tr-meta-listhead", children: [_jsx("span", { children: "Artifact \u00B7 created" }), _jsx("span", { children: "Size" })] }), _jsx("ol", { className: "tr-meta-list", "aria-label": "Artifact files", children: artifacts.map((artifact) => (_jsx("li", { children: _jsxs("button", { className: "tr-meta-row", type: "button", "aria-label": `Open ${artifact.name} in file viewer`, onClick: () => onOpen(artifact), children: [_jsx("span", { className: "tr-meta-file", children: _jsx(FamilyGlyph, { glyph: "doc" }) }), _jsxs("span", { className: "tr-meta-row__body", children: [_jsx("span", { className: "tr-meta-row__name", children: artifact.name }), _jsxs("span", { className: "tr-meta-row__meta", children: [titleCase(artifact.artifact_kind), " \u00B7 ", artifact.created_at === null ? "creation time not recorded" : `created ${clockShort(artifact.created_at)}`] })] }), _jsx("span", { className: "tr-meta-row__value", children: artifact.byte_len === null ? "—" : fmtBytes(artifact.byte_len) }), _jsx("span", { className: "tr-meta-row__chev", children: _jsx(LineChevron, {}) })] }) }, artifact.id))) })] }));
+}
+export function TimelineMeta({ meta, onOpenTask, onOpenWorkflow, onOpenPlan, onOpenArtifact, }) {
+    const [active, setActive] = useState(null);
+    const rootRef = useRef(null);
+    const launcherRefs = useRef({});
+    const id = useId().replaceAll(":", "");
+    const availableKinds = availableTimelineMetaKinds(meta);
+    const visibleActive = resolveTimelineMetaKind(active, availableKinds);
+    useEffect(() => {
+        if (active !== visibleActive)
+            setActive(visibleActive);
+    }, [active, visibleActive]);
+    useEffect(() => {
+        if (visibleActive === null)
+            return;
+        const pointerDown = (event) => {
+            if (!rootRef.current?.contains(event.target))
+                setActive(null);
+        };
+        const keyDown = (event) => {
+            if (event.key !== "Escape")
+                return;
+            event.preventDefault();
+            const selected = visibleActive;
+            setActive(null);
+            launcherRefs.current[selected]?.focus();
+        };
+        document.addEventListener("pointerdown", pointerDown);
+        document.addEventListener("keydown", keyDown);
+        return () => {
+            document.removeEventListener("pointerdown", pointerDown);
+            document.removeEventListener("keydown", keyDown);
+        };
+    }, [visibleActive]);
+    const selectTab = (kind) => setActive(kind);
+    const moveTab = (kind, direction) => {
+        const index = availableKinds.indexOf(kind);
+        const next = availableKinds[(index + direction + availableKinds.length) % availableKinds.length];
+        if (next === undefined)
+            return;
+        setActive(next);
+        document.getElementById(`${id}-tab-${next}`)?.focus();
+    };
+    if (availableKinds.length === 0)
+        return null;
+    return (_jsxs("div", { className: "tr-meta", ref: rootRef, children: [_jsx("div", { className: "tr-meta-launchers", role: "group", "aria-label": "Session work", children: availableKinds.map((kind) => {
+                    const count = exactCount(meta, kind);
+                    return (_jsxs("button", { ref: (element) => { launcherRefs.current[kind] = element; }, className: "tr-meta-launch", type: "button", "aria-label": `${titleCase(kind)}, ${count}`, "aria-expanded": visibleActive === kind, "aria-controls": `${id}-popover`, onClick: () => setActive((current) => current === kind ? null : kind), children: [_jsx(FamilyGlyph, { glyph: GLYPH[kind] }), _jsx("span", { className: "tr-meta-launch__count", children: count })] }, kind));
+                }) }), visibleActive !== null && (_jsxs("div", { className: "tr-meta-popover", id: `${id}-popover`, role: "dialog", "aria-modal": "false", "aria-label": "Session work index", children: [_jsxs("div", { className: "tr-meta-top", children: [_jsx("div", { className: "tr-meta-tabs", role: "tablist", "aria-label": "Session work type", children: availableKinds.map((kind) => (_jsx("button", { className: "tr-meta-tab", id: `${id}-tab-${kind}`, type: "button", role: "tab", "aria-selected": visibleActive === kind, "aria-controls": `${id}-panel`, tabIndex: visibleActive === kind ? 0 : -1, onClick: () => selectTab(kind), onKeyDown: (event) => {
+                                        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                                            return;
+                                        event.preventDefault();
+                                        moveTab(kind, event.key === "ArrowRight" ? 1 : -1);
+                                    }, children: titleCase(kind) }, kind))) }), _jsx("button", { className: "tr-meta-close", type: "button", "aria-label": "Close session work", onClick: () => {
+                                    const selected = visibleActive;
+                                    setActive(null);
+                                    launcherRefs.current[selected]?.focus();
+                                }, children: _jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "m4.5 4.5 7 7M11.5 4.5l-7 7" }) }) })] }), _jsxs("div", { className: "tr-meta-panel", id: `${id}-panel`, role: "tabpanel", "aria-labelledby": `${id}-tab-${visibleActive}`, children: [visibleActive === "tasks" && (_jsx(TaskPanel, { tasks: meta.tasks, onOpen: (task) => {
+                                    setActive(null);
+                                    onOpenTask(task);
+                                } })), visibleActive === "workflows" && (_jsx(WorkflowPanel, { workflows: meta.workflows, onOpen: (workflow) => {
+                                    setActive(null);
+                                    onOpenWorkflow(workflow);
+                                } })), visibleActive === "plans" && (_jsx(PlanPanel, { plans: meta.plans, onOpen: (plan) => {
+                                    setActive(null);
+                                    onOpenPlan(plan);
+                                } })), visibleActive === "artifacts" && (_jsx(ArtifactPanel, { artifacts: meta.artifacts, onOpen: (artifact) => {
+                                    setActive(null);
+                                    onOpenArtifact(artifact);
+                                } }))] })] }))] }));
+}

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

@@ -0,0 +1,10 @@
+import "../../styles/transcript-loading.css";
+export declare function TranscriptLoading({ error, waitingForTeam, seeking, canContinue, indexing, onRetry, onContinue }: {
+    readonly error: string | null;
+    readonly waitingForTeam: boolean;
+    readonly seeking: boolean;
+    readonly canContinue: boolean;
+    readonly indexing: boolean;
+    readonly onRetry: () => void;
+    readonly onContinue: () => void;
+}): import("react").JSX.Element;

package/dist/components/transcript/TranscriptLoading.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../styles/transcript-loading.css";
+export function TranscriptLoading({ error, waitingForTeam, seeking, canContinue, indexing, onRetry, onContinue }) {
+    const label = error !== null ? "Couldn’t load messages"
+        : waitingForTeam ? "Loading team messages…"
+            : seeking ? "Finding message…"
+                : indexing ? "Preparing messages…" : "Loading messages…";
+    return _jsx("div", { className: "tr-loading", "data-error": error !== null || undefined, children: _jsxs("div", { className: "tr-loading__body", children: [_jsxs("div", { className: "tr-loading__sketch", "aria-hidden": "true", children: [_jsxs("div", { className: "tr-loading__prompt", children: [_jsx("i", {}), _jsx("i", {})] }), _jsxs("div", { className: "tr-loading__reply", children: [_jsxs("div", { className: "tr-loading__byline", children: [_jsx("b", {}), _jsx("i", {})] }), _jsx("i", {}), _jsx("i", {}), _jsx("i", {})] }), _jsxs("div", { className: "tr-loading__fold", children: [_jsx("b", { children: "\u203A" }), _jsx("i", {})] })] }), _jsxs("div", { className: "tr-loading__status", role: "status", "aria-live": "polite", "aria-atomic": "true", children: [error === null && _jsx("div", { className: "tr-loading__meter", "aria-hidden": "true", children: _jsx("i", {}) }), _jsx("strong", { children: label }), error !== null && _jsx("p", { children: error })] }), error !== null ? _jsx("button", { type: "button", onClick: onRetry, children: "Try again" })
+                    : canContinue && _jsx("button", { type: "button", onClick: onContinue, children: "Read available messages" })] }) });
+}

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

@@ -0,0 +1,8 @@
+import type { FetchFact, SourceFact } from "../../lib/transcript/index.js";
+export declare function SourceList({ sources, total }: {
+    readonly sources: readonly SourceFact[];
+    readonly total: number | null;
+}): import("react").JSX.Element;
+export declare function FetchDetails({ fetches }: {
+    readonly fetches: readonly FetchFact[];
+}): import("react").JSX.Element;

package/dist/components/transcript/WebDetail.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { useSetSiteIconsEnabled, useSiteIconsEnabled } from "../../lib/transcript/favicons.js";
+import { webAddress } from "../../lib/transcript/web-address.js";
+import { Favicon } from "./Favicon.js";
+/** One shared preference, exposed beside the content it controls. */
+function SiteIconsSetting() {
+    const enabled = useSiteIconsEnabled();
+    const setSiteIconsEnabled = useSetSiteIconsEnabled();
+    return (_jsxs("label", { className: "tr-site-icons", title: "Load icons directly from their sites. Applies to all web activity.", children: [_jsx("input", { type: "checkbox", checked: enabled, onChange: (event) => setSiteIconsEnabled(event.target.checked) }), "Fetch site icons"] }));
+}
+const SOURCE_PREVIEW_LIMIT = 24;
+export function SourceList({ sources, total }) {
+    const [expanded, setExpanded] = useState(false);
+    const shown = expanded ? sources : sources.slice(0, SOURCE_PREVIEW_LIMIT);
+    const omitted = total === null ? null : Math.max(0, total - sources.length);
+    return (_jsxs(_Fragment, { children: [shown.length > 0 && (_jsx("ul", { className: "tr-src", children: shown.map((source, at) => {
+                    const address = webAddress(source.url);
+                    const title = source.title || source.url;
+                    const content = (_jsxs(_Fragment, { children: [_jsx(Favicon, { host: address?.host ?? null }), _jsx("span", { className: "title", children: title }), _jsx("span", { className: "dom", children: address?.host ?? "unknown site" })] }));
+                    return (_jsx("li", { children: address ? (_jsx("a", { className: "tr-src__row", href: address.href, target: "_blank", rel: "noreferrer", title: `${title}\n${source.url}`, children: content })) : (_jsx("span", { className: "tr-src__row", title: source.url, children: content })) }, `${source.url}-${at}`));
+                }) })), sources.length === 0 && (_jsx("p", { className: "tr-web-note", children: total === 0 ? "No sources found." : "No source details recorded." })), sources.length > SOURCE_PREVIEW_LIMIT && (_jsx("button", { className: "tr-web-more", type: "button", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? "Show fewer sources" : `Show all ${sources.length} recorded sources` })), omitted !== null && omitted > 0 && (_jsxs("p", { className: "tr-web-note", children: [omitted, " additional ", omitted === 1 ? "source was" : "sources were", " not retained."] })), total === null && sources.length > 0 && (_jsx("p", { className: "tr-web-note", children: "Some source details were not recorded." })), _jsx(SiteIconsSetting, {})] }));
+}
+export function FetchDetails({ fetches }) {
+    return (_jsxs(_Fragment, { children: [fetches.map((fetch, at) => {
+                const address = webAddress(fetch.url);
+                return (_jsxs("dl", { className: "tr-kv tr-fetch", children: [fetch.url !== null && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "url" }), _jsx("dd", { children: address ? (_jsx("a", { href: address.href, target: "_blank", rel: "noreferrer", children: fetch.url })) : fetch.url })] })), fetch.title !== null && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "title" }), _jsxs("dd", { "data-prose": "", children: [_jsx(Favicon, { host: address?.host ?? null }), " ", fetch.title] })] })), fetch.status !== null && _jsxs(_Fragment, { children: [_jsx("dt", { children: "status" }), _jsxs("dd", { children: ["HTTP ", fetch.status] })] }), fetch.url === null && fetch.title === null && fetch.status === null && (_jsxs(_Fragment, { children: [_jsx("dt", { children: "page" }), _jsx("dd", { children: "No page details recorded." })] }))] }, at));
+            }), _jsx(SiteIconsSetting, {})] }));
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import type { PathFact, WorkflowAttemptFact, WorkflowFact } from "../../lib/transcript/index.js";
+export interface WorkflowChildThread {
+    readonly childSessionId: string;
+    readonly node: ReactNode;
+}
+export declare function WorkflowDetail({ fact, attempts, children: childThreads, onOpenPath, }: {
+    readonly fact: WorkflowFact;
+    readonly attempts: readonly WorkflowAttemptFact[];
+    readonly children: readonly WorkflowChildThread[];
+    readonly onOpenPath?: ((path: PathFact) => void) | undefined;
+}): import("react").JSX.Element;

package/dist/components/transcript/Workflow.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AgentMark } from "../../lib/agents.js";
+import { clock, tokenText } from "../../lib/format.js";
+import { useReadingSession, useRoom } from "../../room-context.js";
+import { canonicalText, firstLine, workflowRuntime, workflowWorkerState, } from "../../lib/transcript/index.js";
+import { LineChevron } from "./glyphs.js";
+import { PathList } from "./detail-parts.js";
+function elapsed(ms) {
+    const seconds = Math.max(0, Math.round(ms / 1000));
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const rest = seconds % 60;
+    if (minutes < 60)
+        return rest === 0 ? `${minutes}m` : `${minutes}m ${rest}s`;
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    return mins === 0 ? `${hours}h` : `${hours}h ${String(mins).padStart(2, "0")}m`;
+}
+function quantity(value, one, many = `${one}s`) {
+    return `${value} ${value === 1 ? one : many}`;
+}
+function workerUsage(worker) {
+    if (worker.cached)
+        return "cached";
+    const parts = [
+        worker.duration_ms === null ? null : elapsed(worker.duration_ms),
+        worker.tokens === null ? null : tokenText(worker.tokens),
+        worker.tool_calls === null ? null : quantity(worker.tool_calls, "tool"),
+    ].filter((part) => part !== null);
+    return parts.length === 0 ? null : parts.join(" · ");
+}
+function friendlyModel(model) {
+    const match = /^claude-(opus|sonnet|haiku)-(\d+)(?:[-.](\d+))?(?:-|$)/i.exec(model);
+    if (match === null)
+        return model;
+    const family = match[1][0].toUpperCase() + match[1].slice(1).toLowerCase();
+    return `${family} ${match[2]}${match[3] === undefined ? "" : `.${match[3]}`}`;
+}
+function RuntimeLine({ runtime }) {
+    return (_jsxs("span", { className: "wf-worker__runtime", children: [_jsx("span", { className: "wf-worker__basis", children: runtime.basis }), " ", _jsx("b", { children: friendlyModel(runtime.model) }), " ", _jsxs("span", { children: ["\u00B7 ", runtime.effort === "unknown" ? "effort unknown" : `${runtime.effort} effort`] })] }));
+}
+function workerDescription(worker) {
+    return worker.result_preview ?? worker.last_tool_summary ?? worker.prompt_preview;
+}
+function workerDescriptionLine(description) {
+    return firstLine(description.replace(/^#{1,6}\s+/, ""), 72);
+}
+function WorkerRow({ worker, run, child, }) {
+    const [open, setOpen] = useState(false);
+    const runtime = workflowRuntime(worker, run.default_model);
+    const state = workflowWorkerState(worker, run.status);
+    const description = workerDescription(worker);
+    const expandable = child !== null || description !== null || worker.error !== null;
+    const visualState = state === "error" ? "failed" : state === "running" ? "running" : undefined;
+    const body = worker.error ?? description;
+    const summary = (_jsxs(_Fragment, { children: [_jsx("span", { className: "tr-line__g tm-avatar", "aria-hidden": "true", children: _jsx(AgentMark, { kind: "claude-code" }) }), _jsx("span", { className: "tr-line__v", title: worker.label, children: worker.label }), _jsx("span", { className: "tr-line__o", title: description ?? undefined, children: description === null ? "no summary recorded" : workerDescriptionLine(description) }), _jsxs("span", { className: "tr-line__r", children: [_jsx("span", { className: visualState === "failed" || visualState === "running" ? "why" : undefined, children: state }), expandable && _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] }), _jsx(RuntimeLine, { runtime: runtime }), workerUsage(worker) !== null && _jsx("span", { className: "wf-worker__usage", children: workerUsage(worker) })] }));
+    if (!expandable) {
+        return _jsx("div", { className: "tr-line wf-worker", "data-state": visualState, children: summary });
+    }
+    return (_jsxs("details", { className: "wf-worker-thread", open: open, onToggle: (event) => setOpen(event.currentTarget.open), children: [_jsx("summary", { className: "tr-line wf-worker", "data-state": visualState, children: summary }), _jsxs("div", { className: "wf-worker__detail", children: [body !== null && (_jsx("div", { className: "wf-worker__result", "data-state": worker.error === null ? undefined : "failed", children: _jsx("p", { children: body }) })), open && child] })] }));
+}
+function phaseGroups(run) {
+    const known = new Set();
+    const groups = run.phases.map((phase) => {
+        known.add(phase.index);
+        return {
+            index: phase.index,
+            title: phase.title,
+            detail: phase.detail,
+            workers: run.workers.filter((worker) => worker.phase_index === phase.index),
+        };
+    });
+    const orphaned = run.workers.filter((worker) => worker.phase_index === null || !known.has(worker.phase_index));
+    if (orphaned.length > 0) {
+        groups.push({
+            index: groups.length === 0 ? 1 : Math.max(...groups.map((group) => group.index)) + 1,
+            title: "Other workers",
+            detail: "phase was not recorded",
+            workers: orphaned,
+        });
+    }
+    return groups;
+}
+function Phase({ phase, run, current, children, }) {
+    const [open, setOpen] = useState(current);
+    const done = phase.workers.filter((worker) => worker.state === "done").length;
+    const errors = phase.workers.filter((worker) => worker.state === "error").length;
+    const count = `${done}/${phase.workers.length}${errors === 0 ? "" : ` · ${errors} error${errors === 1 ? "" : "s"}`}`;
+    return (_jsxs("details", { className: "wf-phase", open: open, onToggle: (event) => setOpen(event.currentTarget.open), children: [_jsxs("summary", { className: "wf-phase__head", children: [_jsx("span", { className: "wf-phase__index", children: phase.index }), _jsxs("span", { className: "wf-phase__name", children: [_jsx("strong", { children: phase.title }), phase.detail !== null && _jsx("span", { title: phase.detail, children: phase.detail })] }), _jsx("span", { className: "wf-phase__count", children: count }), _jsx("span", { className: "chev", children: _jsx(LineChevron, {}) })] }), _jsx("div", { className: "wf-phase__workers", children: phase.workers.length === 0 ? (_jsx("p", { className: "wf-empty", children: "No workers recorded for this phase" })) : phase.workers.map((worker) => (_jsx(WorkerRow, { worker: worker, run: run, child: worker.child_session_id === null ? null : (children.get(worker.child_session_id) ?? null) }, `${worker.index}-${worker.key ?? worker.label}`))) })] }));
+}
+function attemptOutcome(attempt, latest, run) {
+    if (latest && run !== null && run.status !== "unknown")
+        return run.status;
+    switch (attempt.status) {
+        case "succeeded": return "completed";
+        case "pending":
+        case "running": return "running";
+        case "timed_out": return "timed out";
+        case "cancelled": return "cancelled";
+        case "interrupted": return "interrupted";
+        case "denied": return "denied";
+        case "failed": return "failed";
+        case "unknown": return "status unknown";
+    }
+}
+function Attempts({ attempts, run, }) {
+    if (attempts.length === 0)
+        return null;
+    const total = Math.max(run?.attempt_total_count ?? 0, attempts.length);
+    const omitted = total - attempts.length;
+    return (_jsxs("section", { className: "wf-attempts", "aria-label": "Workflow attempts", children: [_jsx("span", { className: "wf-section-label", children: "Attempts" }), omitted > 0 && (_jsxs("p", { className: "wf-empty", children: [quantity(omitted, "earlier attempt"), " omitted from this view"] })), attempts.map((attempt, at) => {
+                const outcome = attemptOutcome(attempt, at === attempts.length - 1, run);
+                const state = ["failed", "denied", "timed out"].includes(outcome)
+                    ? "failed"
+                    : outcome === "running" ? "running" : undefined;
+                const measured = attempt.durationMs ?? (at === attempts.length - 1 ? run?.usage.duration_ms ?? null : null);
+                return (_jsxs("div", { className: "wf-attempt", "data-state": state, title: attempt.taskId ?? undefined, children: [_jsx("i", { className: "wf-attempt__dot", "aria-hidden": "true" }), _jsxs("strong", { children: ["Attempt ", attempt.attempt] }), _jsxs("span", { className: "wf-attempt__launch", children: [attempt.resumed ? "resume" : "async launch", attempt.at === null ? "" : ` · ${clock(attempt.at)}`] }), _jsxs("span", { className: "wf-attempt__outcome", children: [outcome, measured === null ? "" : ` · ${elapsed(measured)}`] })] }, attempt.timelineId));
+            })] }));
+}
+function fieldLabel(key) {
+    return key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replaceAll("_", " ").toLowerCase();
+}
+function resultFields(text) {
+    try {
+        const value = JSON.parse(text);
+        if (value === null || Array.isArray(value) || typeof value !== "object")
+            return [];
+        return Object.entries(value).slice(0, 16).map(([key, item]) => ({
+            label: fieldLabel(key),
+            value: typeof item === "string" ? item : JSON.stringify(item),
+        }));
+    }
+    catch {
+        return [];
+    }
+}
+function FullResult({ canonical }) {
+    const [open, setOpen] = useState(false);
+    const [loaded, setLoaded] = useState(null);
+    const member = canonical.type === "member" ? canonical : null;
+    const { sessions } = useRoom();
+    const readingSession = useReadingSession();
+    useEffect(() => {
+        if (!open
+            || member === null
+            || (loaded?.digest === member.asset.digest && loaded.text !== null))
+            return;
+        const controller = new AbortController();
+        const digest = member.asset.digest;
+        setLoaded({ digest, text: null, error: null });
+        const read = readingSession === null
+            ? Promise.reject(new Error("No session is open to read the stored result"))
+            : sessions.run(readingSession, (client) => client.readTextAsset(member.asset, controller.signal));
+        void read.then((text) => setLoaded({ digest, text, error: null }), (error) => {
+            if (controller.signal.aborted)
+                return;
+            setLoaded({
+                digest,
+                text: null,
+                error: error instanceof Error ? error.message : "stored result is unavailable",
+            });
+        });
+        return () => controller.abort();
+    }, [member, open, sessions, readingSession]);
+    const body = canonical.type === "inline"
+        ? canonical.text
+        : loaded?.digest !== canonical.asset.digest
+            ? "Loading full result…"
+            : loaded.error ?? loaded.text ?? "Loading full result…";
+    return (_jsxs("details", { className: "wf-full-result", open: open, onToggle: (event) => setOpen(event.currentTarget.open), children: [_jsx("summary", { className: "wf-action", children: "View full result" }), open && _jsx("pre", { className: "tr-diag", children: body })] }));
+}
+function Result({ fact, onOpenPath, }) {
+    const run = fact.action.run ?? null;
+    const canonical = run?.result ?? fact.action.callback_result ?? null;
+    const text = canonical === null ? null : canonicalText(canonical);
+    const allFields = canonical?.type === "inline" ? resultFields(canonical.text) : [];
+    const resourcePaths = new Set(fact.resources.flatMap((resource) => resource.resource.type === "file" ? [resource.resource.path] : []));
+    const fields = allFields.filter((field) => !(field.label === "final doc" && resourcePaths.has(field.value)));
+    const resourceLabel = allFields.some((field) => field.label === "final doc" && resourcePaths.has(field.value)) && fact.resources.length === 1
+        ? "final document"
+        : "files";
+    const journal = run?.journal ?? [];
+    const loadedStarted = journal.filter((observation) => observation.kind === "started").length;
+    const loadedReturned = journal.filter((observation) => observation.kind === "result").length;
+    const journalTotal = Math.max(run?.journal_total_count ?? 0, journal.length);
+    const started = Math.max(run?.journal_started_count ?? 0, loadedStarted);
+    const returned = Math.max(run?.journal_result_count ?? 0, loadedReturned);
+    const error = run?.error === null || run?.error === undefined ? null : canonicalText(run.error);
+    if (text === null && fact.resources.length === 0 && error === null)
+        return null;
+    return (_jsxs("section", { className: "wf-result", "aria-label": "Workflow result", children: [_jsx("span", { className: "wf-section-label", children: "Result" }), fact.resources.length > 0 && (_jsxs("div", { className: "wf-result__resources", children: [_jsx("span", { children: resourceLabel }), _jsx(PathList, { paths: fact.resources, total: fact.resources.length, onOpenPath: onOpenPath })] })), fields.length > 0 ? (_jsx("dl", { className: "wf-output", children: fields.map((field) => (_jsxs("div", { className: "wf-output__row", children: [_jsx("dt", { children: field.label }), _jsx("dd", { className: field.label === "verdict" ? "wf-output__verdict" : undefined, children: field.value })] }, field.label))) })) : text !== null ? (canonical !== null && _jsx(FullResult, { canonical: canonical })) : null, error !== null && _jsx("pre", { className: "tr-diag wf-result__error", children: error }), _jsxs("div", { className: "wf-result__foot", children: [_jsxs("span", { children: ["terminal evidence \u00B7 ", run === null ? "correlated task notification" : "run snapshot + correlated task notification", journalTotal === 0 ? "" : ` · journal ${started} started, ${returned} results`] }), fields.length > 0 && canonical !== null && _jsx(FullResult, { canonical: canonical })] })] }));
+}
+export function WorkflowDetail({ fact, attempts, children: childThreads, onOpenPath, }) {
+    const run = fact.action.run ?? null;
+    const childMap = new Map(childThreads.map((child) => [child.childSessionId, child.node]));
+    const name = run?.name ?? fact.action.name ?? "dynamic workflow";
+    const groups = run === null ? [] : phaseGroups(run);
+    const activePhase = groups.find((phase) => phase.workers.some((worker) => worker.state === "progress"));
+    const initialPhase = activePhase?.index ?? groups.at(-1)?.index ?? null;
+    const workerCount = run?.usage.agent_count ?? run?.workers.length ?? null;
+    const finished = run?.updated_at ?? null;
+    return (_jsxs("div", { className: "wf-run__detail", children: [_jsxs("div", { className: "wf-run__mast", children: [_jsxs("div", { className: "wf-run__title", children: [_jsx("strong", { children: name }), (run?.run_id ?? fact.action.run_id) !== null && (_jsx("span", { className: "wf-run__id", children: run?.run_id ?? fact.action.run_id })), finished !== null && (_jsxs("span", { className: "wf-run__finished", children: [run?.status === "running" ? "updated" : "finished", " ", clock(finished)] }))] }), fact.objective !== null && _jsx("p", { className: "wf-run__objective", children: fact.objective }), _jsxs("div", { className: "wf-run__facts", children: [workerCount !== null && _jsxs("span", { children: [_jsx("b", { children: workerCount }), " workers"] }), run !== null && _jsxs("span", { children: [_jsx("b", { children: run.phases.length }), " phases"] }), run?.usage.tokens !== null && run?.usage.tokens !== undefined && _jsxs("span", { children: [_jsx("b", { children: tokenText(run.usage.tokens) }), " tokens"] }), run?.usage.tool_calls !== null && run?.usage.tool_calls !== undefined && _jsxs("span", { children: [_jsx("b", { children: run.usage.tool_calls }), " tools"] }), _jsxs("span", { className: "wf-run__actions", children: [fact.script !== null && (_jsx("button", { className: "wf-action", type: "button", disabled: fact.script.read === undefined || onOpenPath === undefined, onClick: () => {
+                                            if (fact.script !== null)
+                                                onOpenPath?.(fact.script);
+                                        }, children: "View workflow script" })), run !== null && run.logs.length > 0 && (_jsxs("details", { className: "wf-logs", children: [_jsx("summary", { className: "wf-action", children: quantity(run.logs.length, "log") }), _jsx("pre", { className: "tr-diag", children: run.logs.join("\n") })] }))] })] })] }), _jsx(Attempts, { attempts: attempts, run: run }), run !== null && groups.length > 0 && (_jsxs("section", { className: "wf-phases", "aria-label": "Workflow phases", children: [_jsx("span", { className: "wf-section-label", children: "Phases" }), groups.map((phase) => (_jsx(Phase, { phase: phase, run: run, current: phase.index === initialPhase, children: childMap }, `${phase.index}-${phase.title}`)))] })), _jsx(Result, { fact: fact, onOpenPath: onOpenPath }), run === null && fact.action.arguments !== null && fact.objective === null && (_jsx("pre", { className: "tr-diag", children: canonicalText(fact.action.arguments) }))] }));
+}

package/dist/components/transcript/activity-plan.d.ts

@@ -0,0 +1,84 @@
+import type { TimelineEntry } from "@vibefield/rosetta-protocol";
+import type { LedgerLine } from "../../lib/transcript/ledger.js";
+import type { Prompt, ResponseHead, Segment } from "../../lib/transcript/turns.js";
+import type { PlannedSitting } from "./document-plan.js";
+export type ActivityItem = {
+    readonly kind: "tool";
+    readonly key: string;
+    readonly line: LedgerLine;
+} | {
+    readonly kind: "prompt";
+    readonly key: string;
+    readonly prompt: Prompt;
+} | Exclude<Segment, {
+    kind: "ledger" | "prose";
+}>;
+export type ReadingBlock = {
+    readonly kind: "prompt";
+    readonly key: string;
+    readonly prompts: readonly Prompt[];
+    readonly at: number | null;
+} | {
+    readonly kind: "reply";
+    readonly key: string;
+    readonly segment: Extract<Segment, {
+        kind: "prose";
+    }>;
+    readonly head: ResponseHead | null;
+    readonly at: number | null;
+} | {
+    readonly kind: "activity";
+    readonly key: string;
+    readonly items: readonly ActivityItem[];
+    readonly rows: readonly TimelineEntry[];
+    readonly partial: boolean;
+    readonly at: number | null;
+} | {
+    readonly kind: "request";
+    readonly key: string;
+    readonly item: ActivityItem;
+    readonly at: number | null;
+} | {
+    readonly kind: "gap";
+    readonly key: string;
+    readonly count: number;
+    readonly at: number | null;
+} | {
+    readonly kind: "watermark";
+    readonly key: string;
+    readonly at: number | null;
+};
+export interface ReadingSitting {
+    /** React identity is separate from the canonical day-navigation anchor. */
+    readonly renderKey?: string;
+    readonly sitting: PlannedSitting["sitting"];
+    readonly blocks: readonly ReadingBlock[];
+}
+export declare function activityRows(item: ActivityItem): readonly TimelineEntry[];
+export declare function activityRowKey(row: TimelineEntry): string;
+/** Tool lines must already have been cut at these boundaries before coalescing. */
+export declare function activityCuts(rows: readonly TimelineEntry[], watermark: number | null, displayedRows?: readonly TimelineEntry[]): {
+    gaps: Map<string, number>;
+    watermarkId: string | null;
+    cutBefore: Set<string>;
+};
+export declare function activityPlan(plan: readonly PlannedSitting[], options: {
+    readonly gaps: ReadonlyMap<string, number>;
+    readonly watermarkId: string | null;
+    readonly partial: boolean;
+}): ReadingSitting[];
+export interface ActivitySummary {
+    readonly nouns: readonly {
+        readonly key: string;
+        readonly text: string;
+        readonly names: readonly string[];
+        readonly more: number;
+    }[];
+    readonly failed: number;
+    readonly interrupted: number;
+    readonly cancelled: number;
+    readonly runningRows: readonly TimelineEntry[];
+    readonly firstAt: number | null;
+    readonly lastAt: number | null;
+}
+export declare function summarizeActivity(items: readonly ActivityItem[]): ActivitySummary;