@datalayer/agent-runtimes 1.5.90 → 1.5.91

package/lib/components/teams/transcript/SequenceDiagram.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The transcript as a sequence diagram (SCENES S2-02), drawn by mermaid
+ * from {@link sequenceDiagramPlan}'s source. mermaid is loaded when the
+ * view opens (`import('mermaid')`), never with the graph; the drawing is
+ * themed from Primer's tokens, light and dark; a click on an arrow or a
+ * note selects its line, and the selected one is drawn heavier.
+ *
+ * @module components/teams/transcript/SequenceDiagram
+ */
+import type { JSX } from 'react';
+import { type SequenceCastMember } from './sequenceDiagramRules';
+import type { TranscriptRowsLines } from './TranscriptViewsTypes';
+/** What of mermaid the diagram uses: so that a test gives a stand-in. */
+export type MermaidLike = {
+    initialize: (config: Record<string, unknown>) => void;
+    render: (id: string, source: string) => Promise<{
+        svg: string;
+        bindFunctions?: (element: Element) => void;
+    }>;
+};
+/** mermaid, loaded once the view opens: its own chunk. */
+export declare const loadMermaid: () => Promise<MermaidLike>;
+export type SequenceDiagramProps = TranscriptRowsLines & {
+    /** The cast, in the order the participants stand: the members, then the systems. */
+    cast?: readonly SequenceCastMember[];
+    /** The selected line's key: its arrow is drawn heavier. */
+    selected?: string | null;
+    /** An arrow or a note was clicked: its line's key. */
+    onSelect?: (key: string) => void;
+    /** What is said while there is no line. */
+    emptyText?: string;
+    /** How tall it grows before it scrolls, in pixels. */
+    maxHeight?: number;
+    /** How mermaid is loaded: `import('mermaid')` unless a test says. */
+    load?: () => Promise<MermaidLike>;
+};
+/** The transcript as a sequence diagram, drawn by mermaid when the view opens. */
+export declare function SequenceDiagram({ lines, cast, selected, onSelect, emptyText, maxHeight, load, }: SequenceDiagramProps): JSX.Element;
+export default SequenceDiagram;

package/lib/components/teams/transcript/SequenceDiagram.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { Spinner, Text, useTheme } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { sequenceDiagramPlan, } from './sequenceDiagramRules.js';
+/** mermaid, loaded once the view opens: its own chunk. */
+export const loadMermaid = async () => {
+    const loaded = await import('mermaid');
+    return loaded.default;
+};
+/** Primer's tokens the drawing is themed from, each with what it is for. */
+const TOKENS = {
+    background: ['--bgColor-default', 'canvas.default', '#ffffff'],
+    surface: ['--bgColor-muted', 'canvas.subtle', '#f6f8fa'],
+    text: ['--fgColor-default', 'fg.default', '#1f2328'],
+    muted: ['--fgColor-muted', 'fg.muted', '#59636e'],
+    border: ['--borderColor-default', 'border.default', '#d0d7de'],
+    accent: ['--bgColor-accent-muted', 'accent.subtle', '#ddf4ff'],
+    accentBorder: ['--borderColor-accent-emphasis', 'accent.emphasis', '#0969da'],
+    attention: ['--bgColor-attention-muted', 'attention.subtle', '#fff8c5'],
+};
+/** A token's value: the CSS variable on the element, else the theme's colour, else the default. */
+function paletteOf(element, colors) {
+    const styles = getComputedStyle(element);
+    const fromTheme = (path) => {
+        let value = colors;
+        for (const step of path.split('.')) {
+            value =
+                value && typeof value === 'object'
+                    ? value[step]
+                    : undefined;
+        }
+        return typeof value === 'string' ? value : undefined;
+    };
+    return Object.fromEntries(Object.entries(TOKENS).map(([name, [variable, path, fallback]]) => [
+        name,
+        styles.getPropertyValue(variable).trim() || fromTheme(path) || fallback,
+    ]));
+}
+let renderSequence = 0;
+/** Everything mermaid draws a message with, in document order: the arrow's text and its line. */
+const MESSAGE_PARTS = 'text.messageText, [class^="messageLine"]';
+const NOTE_PARTS = 'text.noteText, rect.note';
+/** The transcript as a sequence diagram, drawn by mermaid when the view opens. */
+export function SequenceDiagram({ lines, cast = [], selected, onSelect, emptyText = 'What the scene says and does draws here, arrow by arrow.', maxHeight, load = loadMermaid, }) {
+    const target = useRef(null);
+    const reactId = useId();
+    const { theme, resolvedColorScheme } = useTheme();
+    const [state, setState] = useState('loading');
+    const [error, setError] = useState();
+    const plan = useMemo(() => sequenceDiagramPlan(lines, cast), [lines, cast]);
+    const fontFamily = theme
+        ?.fonts?.normal;
+    const colors = theme
+        ?.colors;
+    useEffect(() => {
+        const element = target.current;
+        if (!element || lines.length === 0) {
+            return undefined;
+        }
+        let active = true;
+        setState('loading');
+        setError(undefined);
+        const draw = async () => {
+            const mermaid = await load();
+            if (!active) {
+                return;
+            }
+            const palette = paletteOf(element, colors);
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: 'strict',
+                theme: 'base',
+                fontFamily: fontFamily || 'system-ui, sans-serif',
+                themeVariables: {
+                    darkMode: resolvedColorScheme?.includes('dark') ?? false,
+                    background: palette.background,
+                    primaryColor: palette.surface,
+                    primaryTextColor: palette.text,
+                    primaryBorderColor: palette.border,
+                    secondaryColor: palette.accent,
+                    tertiaryColor: palette.background,
+                    lineColor: palette.muted,
+                    textColor: palette.text,
+                    actorBkg: palette.surface,
+                    actorBorder: palette.border,
+                    actorTextColor: palette.text,
+                    actorLineColor: palette.border,
+                    signalColor: palette.muted,
+                    signalTextColor: palette.text,
+                    labelBoxBkgColor: palette.surface,
+                    labelBoxBorderColor: palette.border,
+                    labelTextColor: palette.text,
+                    loopTextColor: palette.text,
+                    noteBkgColor: palette.attention,
+                    noteBorderColor: palette.border,
+                    noteTextColor: palette.text,
+                    activationBkgColor: palette.accent,
+                    activationBorderColor: palette.accentBorder,
+                    sequenceNumberColor: palette.text,
+                },
+                sequence: { useMaxWidth: true, mirrorActors: false },
+            });
+            // StrictMode runs the effect twice before the first drawing settles,
+            // and mermaid keeps temporary DOM under this id: each attempt its own.
+            renderSequence += 1;
+            const id = `dla-sequence-${reactId.replace(/[^a-zA-Z0-9_-]/g, '')}-${renderSequence}`;
+            const result = await mermaid.render(id, plan.source);
+            if (!active || !target.current) {
+                return;
+            }
+            target.current.innerHTML = result.svg;
+            result.bindFunctions?.(target.current);
+            setState('drawn');
+        };
+        void draw().catch((reason) => {
+            if (active) {
+                setState('error');
+                setError(reason instanceof Error ? reason.message : String(reason));
+            }
+        });
+        return () => {
+            active = false;
+            element.replaceChildren();
+        };
+    }, [
+        plan,
+        colors,
+        fontFamily,
+        resolvedColorScheme,
+        lines.length,
+        load,
+        reactId,
+    ]);
+    // The selected line's arrow or note, marked on the drawing as it stands.
+    useEffect(() => {
+        const element = target.current;
+        if (!element || state !== 'drawn') {
+            return;
+        }
+        for (const part of element.querySelectorAll('[data-transcript-selected]')) {
+            part.removeAttribute('data-transcript-selected');
+        }
+        if (!selected) {
+            return;
+        }
+        const arrow = plan.arrows.indexOf(selected);
+        const note = plan.notes.indexOf(selected);
+        const texts = element.querySelectorAll(arrow >= 0 ? 'text.messageText' : 'text.noteText');
+        const strokes = element.querySelectorAll(arrow >= 0 ? '[class^="messageLine"]' : 'rect.note');
+        const index = arrow >= 0 ? arrow : note;
+        if (index < 0) {
+            return;
+        }
+        texts[index]?.setAttribute('data-transcript-selected', 'text');
+        strokes[index]?.setAttribute('data-transcript-selected', 'stroke');
+    }, [selected, plan, state]);
+    const onClick = (event) => {
+        if (!onSelect || !target.current) {
+            return;
+        }
+        const hit = event.target?.closest(`${MESSAGE_PARTS}, ${NOTE_PARTS}`);
+        if (!hit) {
+            return;
+        }
+        const isNote = hit.matches(NOTE_PARTS);
+        const parts = [
+            ...target.current.querySelectorAll(isNote ? NOTE_PARTS : MESSAGE_PARTS),
+        ];
+        // Each message is a text and a line, each note a rect and a text: two parts each, in order.
+        const index = Math.floor(parts.indexOf(hit) / 2);
+        const key = (isNote ? plan.notes : plan.arrows)[index];
+        if (key) {
+            onSelect(key);
+        }
+    };
+    if (lines.length === 0) {
+        return (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-sequence-diagram": "empty", children: emptyText }));
+    }
+    return (_jsxs(Box, { "data-sequence-diagram": state, "data-sequence-arrows": plan.arrows.length, children: [state === 'loading' && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, py: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Drawing the sequence\u2026" })] })), state === 'error' && (_jsxs(Text, { as: "p", sx: { color: 'danger.fg', fontSize: 1, m: 0 }, "data-sequence-error": "", children: ["The sequence could not be drawn: ", error] })), _jsx(Box, { ref: target, role: "img", "aria-label": "Sequence diagram of the transcript", onClick: onClick, sx: {
+                    ...(maxHeight ? { maxHeight, overflow: 'auto' } : {}),
+                    '& svg': { maxWidth: '100%', height: 'auto' },
+                    '& text.messageText, & text.noteText, & [class^="messageLine"], & rect.note': {
+                        cursor: onSelect ? 'pointer' : undefined,
+                    },
+                    '& [data-transcript-selected="text"]': { fontWeight: 700 },
+                    '& [data-transcript-selected="stroke"]': { strokeWidth: 3 },
+                } })] }));
+}
+export default SequenceDiagram;

package/lib/components/teams/transcript/TranscriptDetail.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The drill-down (SCENES S3-01): the selected line's span — the words sent
+ * and answered, a tool's name, arguments and result when the span recorded
+ * them, when it started and ended, its status and an error's message, the
+ * span and trace ids, and for a coding harness's step what the Shield
+ * decided and by which rule — and *Open in the Inspector*. For a line read from a
+ * recording, it says there is no span to open.
+ *
+ * @module components/teams/transcript/TranscriptDetail
+ */
+import type { JSX } from 'react';
+import type { OtelSpan } from '@datalayer/core/lib/otel/types';
+import { type SceneTranscriptLine } from '../sceneTranscriptRules';
+import { type TranscriptSpanIds } from './transcriptDetailRules';
+export type TranscriptDetailProps = {
+    line: SceneTranscriptLine;
+    /** Its span; none for a line read from a recording. */
+    span?: OtelSpan;
+    /** The Inspector's page for a span, when the site has one: account-scoped, no trailing slash. */
+    inspectorHref?: (ids: TranscriptSpanIds) => string | undefined;
+    /** Opens the Inspector over the page on the span. */
+    onOpenInspector?: (ids: TranscriptSpanIds) => void;
+    onClose?: () => void;
+};
+/** The detail of a line, from its span. */
+export declare function TranscriptDetail({ line, span, inspectorHref, onOpenInspector, onClose, }: TranscriptDetailProps): JSX.Element;
+export default TranscriptDetail;

package/lib/components/teams/transcript/TranscriptDetail.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Heading, Label, Link, Text } from '@primer/react';
+import { XIcon } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { ChatMarkdown } from '../../../chat/messages/ChatMarkdown.js';
+import { lineHeading, timeText, } from '../sceneTranscriptRules.js';
+import { durationText } from './transcriptRows.js';
+import { NO_SPAN_TEXT, transcriptDetailOf, } from './transcriptDetailRules.js';
+/** One labelled part of the detail. */
+function Part({ label, children, mono, }) {
+    return (_jsxs(Box, { "data-transcript-detail-part": label.toLowerCase(), children: [_jsx(Text, { as: "div", sx: { color: 'fg.muted', fontSize: 0, fontWeight: 600, mb: 1 }, children: label }), _jsx(Box, { sx: {
+                    fontSize: 1,
+                    overflowWrap: 'anywhere',
+                    ...(mono
+                        ? { fontFamily: 'mono', fontSize: 0, whiteSpace: 'pre-wrap', m: 0 }
+                        : {}),
+                }, as: mono ? 'pre' : 'div', children: children })] }));
+}
+/** The detail of a line, from its span. */
+export function TranscriptDetail({ line, span, inspectorHref, onOpenInspector, onClose, }) {
+    const detail = transcriptDetailOf(line, span);
+    const href = detail.ids && inspectorHref ? inspectorHref(detail.ids) : undefined;
+    const status = detail.status;
+    return (_jsxs(Box, { "data-transcript-detail": line.key, "data-transcript-detail-status": status, display: "flex", flexDirection: "column", gap: 3, p: 3, borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.default", minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, children: [_jsxs(Box, { minWidth: 0, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, m: 0, overflowWrap: 'anywhere' }, children: lineHeading(line) }), _jsxs(Box, { display: "flex", gap: 1, mt: 1, flexWrap: "wrap", children: [_jsx(Label, { size: "small", children: line.kind }), _jsx(Label, { size: "small", variant: status === 'failed'
+                                            ? 'danger'
+                                            : status === 'running'
+                                                ? 'accent'
+                                                : 'success', children: status })] })] }), onClose && (_jsx(Button, { size: "small", variant: "invisible", "aria-label": "Close the detail", onClick: onClose, leadingVisual: XIcon, "data-transcript-detail-close": "" }))] }), !span && (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-transcript-detail-recorded": "", children: NO_SPAN_TEXT })), detail.shield && (_jsx(Part, { label: "The Shield", children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, "data-transcript-detail-shield": detail.shield.decision, children: [_jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", children: [_jsx(Label, { size: "small", variant: detail.shield.decision === 'deny'
+                                        ? 'danger'
+                                        : detail.shield.decision === 'ask'
+                                            ? 'attention'
+                                            : 'success', children: detail.shield.said || 'no decision' }), detail.shield.rule && (_jsxs(Text, { "data-transcript-detail-rule": "", children: [`by the rule \u2018${detail.shield.rule}\u2019`, detail.shield.scope ? ` (${detail.shield.scope})` : ''] }))] }), (detail.shield.decidedBy || detail.shield.harness) && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: [
+                                detail.shield.decidedBy
+                                    ? `decided by the ${detail.shield.decidedBy}`
+                                    : '',
+                                detail.shield.harness ? `for ${detail.shield.harness}` : '',
+                            ]
+                                .filter(Boolean)
+                                .join(', ') })), (detail.shield.path || detail.shield.command) && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: detail.shield.command ?? detail.shield.path }))] }) })), detail.tool ? (_jsxs(_Fragment, { children: [_jsx(Part, { label: "Tool", mono: true, children: detail.tool.name }), detail.tool.arguments && (_jsx(Part, { label: "Arguments", mono: true, children: detail.tool.arguments })), detail.tool.result && (_jsx(Part, { label: "Result", mono: true, children: detail.tool.result }))] })) : (_jsxs(_Fragment, { children: [(detail.sent ?? (line.kind === 'asked' ? line.text : undefined)) && (_jsx(Part, { label: "Sent", children: _jsx(ChatMarkdown, { text: detail.sent ?? line.text, density: "compact" }) })), (detail.answered ??
+                        (line.kind === 'said' ? line.text : undefined)) && (_jsx(Part, { label: "Answered", children: _jsx(ChatMarkdown, { text: detail.answered ?? line.text, density: "compact" }) }))] })), detail.error && (_jsx(Part, { label: "Error", children: _jsx(Text, { sx: { color: 'danger.fg' }, "data-transcript-detail-error": "", children: detail.error }) })), _jsxs(Part, { label: "When", mono: true, children: [`started ${timeText(detail.startedAt ?? line.at)}`, detail.endedAt !== undefined
+                        ? `\nended   ${timeText(detail.endedAt)}`
+                        : status === 'running'
+                            ? '\nstill running'
+                            : '', detail.durationMs !== undefined
+                        ? `\ntook    ${durationText(detail.durationMs)}`
+                        : ''] }), detail.ids && (_jsxs(Part, { label: "Ids", mono: true, children: [`span   ${detail.ids.spanId}\ntrace  ${detail.ids.traceId}`, detail.ids.parentSpanId ? `\nparent ${detail.ids.parentSpanId}` : ''] })), detail.ids && (onOpenInspector || href) && (_jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [onOpenInspector && (_jsx(Button, { size: "small", onClick: () => onOpenInspector(detail.ids), "data-transcript-detail-inspector": "", children: "Open in the Inspector" })), href && (_jsx(Link, { href: href, target: "_blank", rel: "noopener", sx: { fontSize: 1 }, "data-transcript-detail-trace": "", children: "The trace" }))] }))] }));
+}
+export default TranscriptDetail;

package/lib/components/teams/transcript/TranscriptTable.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The transcript as a table (SCENES S2-01), Primer's `DataTable`: time,
+ * from → to, over A2A or MCP, kind, text, how long, state. Sortable by time
+ * (an open call last among its ties), a failed row marked, a click on a row
+ * selects its line.
+ *
+ * @module components/teams/transcript/TranscriptTable
+ */
+import type { JSX } from 'react';
+import type { TranscriptRowsLines } from './TranscriptViewsTypes';
+export type TranscriptTableProps = TranscriptRowsLines & {
+    /** The selected line's key. */
+    selected?: string | null;
+    /** A row was clicked: its line's key. */
+    onSelect?: (key: string) => void;
+    /** What is said while there is no line. */
+    emptyText?: string;
+    /** How tall it grows before it scrolls, in pixels. */
+    maxHeight?: number;
+};
+/** The transcript as a table, with a click on a row selecting its line. */
+export declare function TranscriptTable({ lines, selected, onSelect, emptyText, maxHeight, }: TranscriptTableProps): JSX.Element;
+export default TranscriptTable;

package/lib/components/teams/transcript/TranscriptTable.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from 'react';
+import { Label, Text } from '@primer/react';
+import { DataTable, Table } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { timeText } from '../sceneTranscriptRules.js';
+import { compareByTime, durationText, OVER_WORDS, STATE_WORDS, transcriptRows, } from './transcriptRows.js';
+/** The state, as a label: failed in red, running in the accent, done quiet. */
+function StateLabel({ row }) {
+    const variant = row.state === 'failed'
+        ? 'danger'
+        : row.state === 'open'
+            ? 'accent'
+            : row.exchangeFailed
+                ? 'attention'
+                : 'secondary';
+    return (_jsx(Label, { variant: variant, size: "small", "data-transcript-state": row.state, children: row.state === 'done' && row.exchangeFailed
+            ? 'exchange failed'
+            : STATE_WORDS[row.state] }));
+}
+const COLUMNS = [
+    {
+        id: 'at',
+        header: 'Time',
+        field: 'at',
+        sortBy: compareByTime,
+        width: 'auto',
+        renderCell: row => (_jsx(Text, { as: "time", sx: { fontFamily: 'mono', fontSize: 0, whiteSpace: 'nowrap' }, dateTime: new Date(row.at).toISOString(), children: timeText(row.at) })),
+    },
+    {
+        id: 'who',
+        header: 'From → To',
+        field: 'from',
+        width: 'auto',
+        renderCell: row => (_jsx(Text, { sx: { fontWeight: 600, whiteSpace: 'nowrap' }, children: row.to ? `${row.from} → ${row.to}` : row.from })),
+    },
+    {
+        id: 'over',
+        header: 'Over',
+        field: 'over',
+        width: 'auto',
+        renderCell: row => (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: row.over ? OVER_WORDS[row.over] : '—' })),
+    },
+    {
+        id: 'kind',
+        header: 'Kind',
+        field: 'kind',
+        width: 'auto',
+        renderCell: row => _jsx(Text, { sx: { fontSize: 0 }, children: row.kind }),
+    },
+    {
+        id: 'text',
+        header: 'Text',
+        field: 'text',
+        width: 'grow',
+        renderCell: row => (_jsxs(Box, { as: "span", "data-transcript-row": row.id, sx: {
+                display: 'block',
+                fontFamily: row.kind === 'called' ? 'mono' : undefined,
+                color: row.state === 'failed' ? 'danger.fg' : undefined,
+                overflowWrap: 'anywhere',
+                whiteSpace: 'normal',
+            }, children: [row.text, row.state === 'open' ? '…' : ''] })),
+    },
+    {
+        id: 'duration',
+        header: 'Duration',
+        field: 'durationMs',
+        align: 'end',
+        width: 'auto',
+        renderCell: row => (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, whiteSpace: 'nowrap' }, children: durationText(row.durationMs) })),
+    },
+    {
+        id: 'state',
+        header: 'State',
+        field: 'state',
+        width: 'auto',
+        renderCell: row => _jsx(StateLabel, { row: row }),
+    },
+];
+/** The transcript as a table, with a click on a row selecting its line. */
+export function TranscriptTable({ lines, selected, onSelect, emptyText = 'What the scene says and does shows here, row by row.', maxHeight, }) {
+    const title = useId();
+    const rows = useMemo(() => transcriptRows(lines), [lines]);
+    // A click anywhere on a row: the row's line, found from the text cell's mark.
+    const onClick = (event) => {
+        if (!onSelect) {
+            return;
+        }
+        const target = event.target;
+        const tr = target?.closest('tr');
+        const marked = tr?.querySelector('[data-transcript-row]');
+        const key = marked?.dataset.transcriptRow;
+        if (key) {
+            onSelect(key);
+        }
+    };
+    if (rows.length === 0) {
+        return (_jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, "data-transcript-table": "", children: emptyText }));
+    }
+    return (_jsx(Box, { "data-transcript-table": "", "data-transcript-rows": rows.length, onClick: onClick, sx: {
+            ...(maxHeight ? { maxHeight, overflow: 'auto' } : {}),
+            '& tr': { cursor: onSelect ? 'pointer' : undefined },
+            ...(selected
+                ? {
+                    [`& tr:has([data-transcript-row="${CSS.escape(selected)}"])`]: {
+                        backgroundColor: 'accent.subtle',
+                    },
+                }
+                : {}),
+        }, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: title, children: "Transcript" }), _jsx(DataTable, { "aria-labelledby": title, data: rows, columns: COLUMNS, cellPadding: "condensed", initialSortColumn: "at", initialSortDirection: "ASC" })] }) }));
+}
+export default TranscriptTable;

package/lib/components/teams/transcript/TranscriptViews.d.ts

@@ -0,0 +1,66 @@
+/**
+ * The three views of a transcript under one switch (SCENES S2-03): Lines
+ * (`SceneTranscript`), Table (`TranscriptTable`) and Sequence
+ * (`SequenceDiagram`), with the filter they share (members, kinds, *failed
+ * only*, failed first), the selection they share (a line, a row, an arrow:
+ * the same {@link TranscriptSelection}, handed to the page for the stage),
+ * the drill-down beside the view on a wide stage and under it on a narrow
+ * one (`TranscriptDetail`, S3-01), *Copy* of the view (the lines as text,
+ * the table as Markdown, the diagram as its source) and *Export JSON*
+ * (S3-03).
+ *
+ * @module components/teams/transcript/TranscriptViews
+ */
+import type { JSX } from 'react';
+import type { OtelLiveTracer } from '@datalayer/core/lib/otel/live';
+import type { OtelSpan } from '@datalayer/core/lib/otel/types';
+import { type SceneTranscriptLine, type SceneTranscriptMember } from '../sceneTranscriptRules';
+import { type MermaidLike } from './SequenceDiagram';
+import { type SequenceCastMember } from './sequenceDiagramRules';
+import { type TranscriptSpanIds } from './transcriptDetailRules';
+import { type TranscriptSelection } from './selection';
+import type { TranscriptViewChoice } from './TranscriptViewsTypes';
+export type TranscriptViewsProps = {
+    /** The lines, in order. */
+    lines: readonly SceneTranscriptLine[];
+    /** The members, in the order the diagram's participants stand, with their connections. */
+    members?: readonly SceneTranscriptMember[];
+    /** The spans the lines were read from: the drill-down reads a line's. */
+    spans?: readonly OtelSpan[];
+    /** Or the tracer they are recorded into. */
+    tracer?: OtelLiveTracer | null;
+    /** The lines come from a recording: the drill-down says there is no span. Said by itself when neither spans nor a tracer is given. */
+    recorded?: boolean;
+    /** The scene, by id: the export's file name. */
+    scene?: string;
+    /** The selected line's key, held by the page; with `onSelect`. */
+    selected?: string | null;
+    /** The selection changed: a line, or none. */
+    onSelect?: (selection: TranscriptSelection | null) => void;
+    /** Which view shows first: the lines unless said. */
+    defaultView?: TranscriptViewChoice;
+    /** The view, held by the page; with `onViewChange`. */
+    view?: TranscriptViewChoice;
+    onViewChange?: (view: TranscriptViewChoice) => void;
+    /** What is said while there is no line yet. */
+    emptyText?: string;
+    /** How tall a view grows before it scrolls, in pixels. */
+    maxHeight?: number;
+    /** The Inspector's page for a span, when the site has one. */
+    inspectorHref?: (ids: TranscriptSpanIds) => string | undefined;
+    /** Opens the Inspector over the page on the span. */
+    onOpenInspector?: (ids: TranscriptSpanIds) => void;
+    /** The clipboard: `navigator.clipboard.writeText` unless a test gives one. */
+    writeText?: (text: string) => Promise<void>;
+    /** How a file is handed to the browser: a download unless a test says. */
+    download?: (name: string, text: string) => void;
+    /** How mermaid is loaded (`SequenceDiagram`). */
+    loadMermaid?: () => Promise<MermaidLike>;
+};
+/** The cast as the diagram stands it: the members, then every system they reach. */
+export declare function sequenceCastOf(members: readonly SceneTranscriptMember[]): SequenceCastMember[];
+/** What the view copies: the lines as text, the table as Markdown, the diagram as its source. */
+export declare function copyTextOf(view: TranscriptViewChoice, lines: readonly SceneTranscriptLine[], cast: readonly SequenceCastMember[]): string;
+/** The three views, the filter, the selection, the drill-down, Copy and Export. */
+export declare function TranscriptViews({ lines, members, spans, tracer, recorded, scene, selected, onSelect, defaultView, view, onViewChange, emptyText, maxHeight, inspectorHref, onOpenInspector, writeText, download, loadMermaid, }: TranscriptViewsProps): JSX.Element;
+export default TranscriptViews;

package/lib/components/teams/transcript/TranscriptViews.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { ActionList, ActionMenu, Button, Checkbox, FormControl, SegmentedControl, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useOtelLiveSpans } from '@datalayer/core/lib/otel/live/index.js';
+import { SceneTranscript } from '../SceneTranscript.js';
+import { transcriptText, } from '../sceneTranscriptRules.js';
+import { SequenceDiagram } from './SequenceDiagram.js';
+import { sequenceDiagramOf, } from './sequenceDiagramRules.js';
+import { TranscriptDetail } from './TranscriptDetail.js';
+import { spanOfLine } from './transcriptDetailRules.js';
+import { downloadText, transcriptFileName, transcriptJson, } from './transcriptExport.js';
+import { filterLines, namesOf, transcriptMarkdown, transcriptRows, } from './transcriptRows.js';
+import { TranscriptTable } from './TranscriptTable.js';
+import { selectionOfLine } from './selection.js';
+const KINDS = ['asked', 'called', 'said'];
+const KIND_WORDS = {
+    asked: 'Asked',
+    called: 'Called',
+    said: 'Said',
+};
+const VIEW_WORDS = {
+    lines: 'Lines',
+    table: 'Table',
+    sequence: 'Sequence',
+};
+const COPY_WORDS = {
+    lines: 'Copy as text',
+    table: 'Copy as Markdown',
+    sequence: 'Copy as mermaid',
+};
+/** How long *Copied* stays, in milliseconds. */
+const COPIED_MS = 1500;
+const NO_MEMBERS = [];
+/** The cast as the diagram stands it: the members, then every system they reach. */
+export function sequenceCastOf(members) {
+    const cast = members.map(member => ({
+        name: member.name,
+    }));
+    for (const member of members) {
+        for (const connection of member.connections ?? []) {
+            if (!cast.some(one => one.name === connection.label)) {
+                cast.push({ name: connection.label, system: true });
+            }
+        }
+    }
+    return cast;
+}
+/** What the view copies: the lines as text, the table as Markdown, the diagram as its source. */
+export function copyTextOf(view, lines, cast) {
+    switch (view) {
+        case 'table':
+            return transcriptMarkdown(transcriptRows(lines));
+        case 'sequence':
+            return sequenceDiagramOf(lines, cast);
+        default:
+            return transcriptText(lines);
+    }
+}
+/** The three views, the filter, the selection, the drill-down, Copy and Export. */
+export function TranscriptViews({ lines, members = NO_MEMBERS, spans, tracer, recorded, scene, selected, onSelect, defaultView = 'lines', view, onViewChange, emptyText, maxHeight = 360, inspectorHref, onOpenInspector, writeText, download = downloadText, loadMermaid, }) {
+    const [ownView, setOwnView] = useState(defaultView);
+    const shown = view ?? ownView;
+    const choose = (next) => {
+        setOwnView(next);
+        onViewChange?.(next);
+    };
+    const [ownSelected, setOwnSelected] = useState(null);
+    const selectedKey = selected !== undefined ? selected : ownSelected;
+    const select = useCallback((key) => {
+        setOwnSelected(key);
+        const line = key ? lines.find(one => one.key === key) : undefined;
+        onSelect?.(line ? selectionOfLine(line) : null);
+    }, [lines, onSelect]);
+    const [filter, setFilter] = useState({});
+    const [copied, setCopied] = useState(false);
+    const liveSpans = useOtelLiveSpans(spans ? null : tracer);
+    const allSpans = spans ?? liveSpans;
+    const isRecording = recorded ?? (!spans && !tracer);
+    const names = useMemo(() => namesOf(lines), [lines]);
+    const kept = useMemo(() => filterLines(lines, filter), [lines, filter]);
+    const cast = useMemo(() => sequenceCastOf(members), [members]);
+    const selectedLine = selectedKey
+        ? lines.find(line => line.key === selectedKey)
+        : undefined;
+    const selectedSpan = selectedLine && !isRecording
+        ? spanOfLine(selectedLine, allSpans)
+        : undefined;
+    const toggle = (list, value) => list?.includes(value)
+        ? list.filter(one => one !== value)
+        : [...(list ?? []), value];
+    const onCopy = async () => {
+        const write = writeText ??
+            (text => globalThis.navigator?.clipboard?.writeText(text) ?? Promise.resolve());
+        try {
+            await write(copyTextOf(shown, kept, cast));
+            setCopied(true);
+            setTimeout(() => setCopied(false), COPIED_MS);
+        }
+        catch {
+            // The clipboard refused: the view is still on screen.
+        }
+    };
+    const onExport = () => download(transcriptFileName(scene), transcriptJson(kept, { scene }));
+    const narrowed = Boolean(filter.members?.length || filter.kinds?.length || filter.failedOnly);
+    return (_jsxs(Box, { "data-transcript-views": shown, "data-transcript-kept": kept.length, "data-transcript-recorded": isRecording ? '' : undefined, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", mb: 2, children: [_jsx(SegmentedControl, { "aria-label": "Transcript view", size: "small", children: Object.keys(VIEW_WORDS).map(choice => (_jsx(SegmentedControl.Button, { selected: shown === choice, "aria-pressed": shown === choice, onClick: () => choose(choice), "data-transcript-view-choice": choice, children: VIEW_WORDS[choice] }, choice))) }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", "data-transcript-filter": "members", children: filter.members?.length
+                                    ? `Members (${filter.members.length})`
+                                    : 'Members' }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsxs(ActionList, { selectionVariant: "multiple", children: [names.map(name => (_jsx(ActionList.Item, { selected: Boolean(filter.members?.includes(name)), onSelect: () => setFilter(prior => ({
+                                                ...prior,
+                                                members: toggle(prior.members, name),
+                                            })), "data-transcript-member": name, children: name }, name))), names.length === 0 && (_jsx(ActionList.Item, { disabled: true, children: "No one yet" }))] }) })] }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", "data-transcript-filter": "kinds", children: filter.kinds?.length ? `Kinds (${filter.kinds.length})` : 'Kinds' }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "multiple", children: KINDS.map(kind => (_jsx(ActionList.Item, { selected: Boolean(filter.kinds?.includes(kind)), onSelect: () => setFilter(prior => ({
+                                            ...prior,
+                                            kinds: toggle(prior.kinds, kind),
+                                        })), "data-transcript-kind": kind, children: KIND_WORDS[kind] }, kind))) }) })] }), _jsxs(FormControl, { sx: { alignItems: 'center' }, children: [_jsx(Checkbox, { checked: Boolean(filter.failedOnly), onChange: event => setFilter(prior => ({
+                                    ...prior,
+                                    failedOnly: event.target.checked,
+                                })), "data-transcript-failed-only": "" }), _jsx(FormControl.Label, { sx: { fontSize: 0, fontWeight: 'normal' }, children: "Failed only" })] }), _jsxs(FormControl, { sx: { alignItems: 'center' }, children: [_jsx(Checkbox, { checked: Boolean(filter.failedFirst), onChange: event => setFilter(prior => ({
+                                    ...prior,
+                                    failedFirst: event.target.checked,
+                                })), "data-transcript-failed-first": "" }), _jsx(FormControl.Label, { sx: { fontSize: 0, fontWeight: 'normal' }, children: "Failed first" })] }), _jsx(Box, { flex: 1 }), kept.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", onClick: () => void onCopy(), "data-transcript-copy": shown, children: copied ? 'Copied' : COPY_WORDS[shown] }), _jsx(Button, { size: "small", onClick: onExport, "data-transcript-export": "", children: "Export JSON" })] }))] }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gap: 3,
+                    alignItems: 'start',
+                    gridTemplateColumns: selectedLine
+                        ? ['1fr', '1fr', 'minmax(0, 1fr) minmax(280px, 340px)']
+                        : '1fr',
+                }, children: [_jsxs(Box, { minWidth: 0, children: [shown === 'lines' && (_jsx(SceneTranscript, { lines: kept, emptyText: narrowed && lines.length
+                                    ? 'No line matches the filter.'
+                                    : emptyText, maxHeight: maxHeight, copy: false, selected: selectedKey, onSelect: select })), shown === 'table' && (_jsx(TranscriptTable, { lines: kept, emptyText: narrowed && lines.length
+                                    ? 'No row matches the filter.'
+                                    : emptyText, maxHeight: maxHeight, selected: selectedKey, onSelect: select })), shown === 'sequence' && (_jsx(SequenceDiagram, { lines: kept, cast: cast, emptyText: narrowed && lines.length
+                                    ? 'No arrow matches the filter.'
+                                    : emptyText, maxHeight: maxHeight, selected: selectedKey, onSelect: select, ...(loadMermaid ? { load: loadMermaid } : {}) }))] }), selectedLine && (_jsx(TranscriptDetail, { line: selectedLine, span: selectedSpan, inspectorHref: inspectorHref, onOpenInspector: onOpenInspector, onClose: () => select(null) }))] })] }));
+}
+export default TranscriptViews;