@haywoodmarx/agent-pager 0.1.0

package/dist/src/tui/message-views.js

@@ -0,0 +1,515 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
+import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/react";
+import { useState } from "react";
+import { isTuiExpirable } from "../operator/agent-projection.js";
+import { OPERATOR_PROTOCOL_VERSION, } from "../operator/protocol.js";
+import { Line, Overlay, PaneBar, Rule, SCROLLBAR_RESERVED_COLUMNS, VERTICAL_SCROLL_STYLE, WRAPPED_TEXT_SCROLL_STYLE, fitOverlayColumns, useTuiModel, } from "./chrome.js";
+import { AGENT_TRAFFIC_COLUMNS, MESSAGE_LABEL_GUTTER, MINIMUM_MESSAGE_BODY_ROWS, MESSAGE_LOG_COLUMNS, SELECTION_GUTTER_GLYPH, WORKSPACE_TRAFFIC_COLUMNS, agentColor, agentHandle, agentAddress, agentLogScope, deliveryColor, deliveryGlyph, describeCommandOutcome, findTuiMessage, fitBarLeading, formatClock, formatClockSeconds, PANE_BAR_INSET_COLUMNS, padCells, padCellsBeforeColumn, padCellsEnd, selectedMessage, selectTuiTraffic, stepWrappingIndex, trafficSubject, trafficTime, trafficType, trafficTypeColumnWidth, truncateCells, } from "./presentation.js";
+/* eslint-enable jsdoc/require-jsdoc -- The port and property declarations end here. */
+/**
+ * Render a distinct, renderer-neutral description for each traffic protocol member.
+ * @param entry - Traffic row of either member; identities are printed raw rather than as handles.
+ * @returns One line giving a delivery's state glyph, endpoints and message id, or an audit's glyph, target and the word ping.
+ */
+export function formatTuiTraffic(entry) {
+    switch (entry.kind) {
+        case "accepted_delivery":
+            return `${deliveryGlyph(entry.state)} ${entry.fromAgentId} → ${entry.toAgentId} ${entry.messageId}`;
+        case "ping_audit":
+            return `⍾ broker → ${entry.targetAgentId} ping`;
+    }
+}
+/**
+ * Move the agent-log selection one row without wrapping past either end.
+ * @param model - Model owning the local view state.
+ * @param direction - Row step the operator asked for.
+ * @returns Whether the log consumed the step.
+ */
+export function stepTuiTrafficSelection(model, direction) {
+    const rows = selectTuiTraffic(model.state);
+    if (rows.length === 0)
+        return false;
+    const current = rows.findIndex((entry) => entry.trafficId === model.state.view.trafficId);
+    const step = current < 0 ? 0 : current + (direction === "up" ? -1 : 1);
+    if (step < 0 || step > rows.length - 1)
+        return false;
+    const next = rows[step];
+    if (!next)
+        return false;
+    model.viewTraffic(next);
+    model.updateView((view) => ({ ...view, focus: "agent_log", followAgentLog: false }));
+    return true;
+}
+/**
+ * Select the newest row of the agent log for an operator arriving with nothing chosen.
+ *
+ * Follow is turned on rather than preserved: the selection lands on the tail, so the operator is at
+ * the position follow tracks and has not scrolled away from it.
+ * @param model - Operator model whose view selection is advanced.
+ * @returns Whether a row was available to select.
+ */
+export function selectNewestTuiTraffic(model) {
+    const rows = selectTuiTraffic(model.state);
+    const newest = rows[rows.length - 1];
+    if (newest)
+        model.viewTraffic(newest);
+    model.updateView((view) => ({ ...view, followAgentLog: true }));
+    return newest !== undefined;
+}
+/**
+ * Render traffic rows and keep tail-follow state behind the model boundary.
+ * @param properties - Model, palette, whether agents are coloured, and the pane's columns.
+ * @returns A column heading over scrolling rows, or over a placeholder when the selection scopes no traffic.
+ */
+export function AgentTrafficLog({ model, theme, colorEnabled = true, width = MESSAGE_LOG_COLUMNS, }) {
+    const state = useTuiModel(model);
+    const traffic = selectTuiTraffic(state);
+    const scope = agentLogScope(state);
+    const focused = state.view.focus === "agent_log";
+    const select = (entry) => {
+        model.viewTraffic(entry);
+        model.updateView((view) => ({
+            ...view,
+            focus: "agent_log",
+            overlay: closeOtherMessageOverlay(view.overlay, entry),
+        }));
+    };
+    const pause = () => {
+        model.updateView((view) => ({ ...view, followAgentLog: false }));
+    };
+    const openContext = (entry) => {
+        select(entry);
+        if (entry.kind === "accepted_delivery")
+            model.updateView((view) => ({
+                ...view,
+                overlay: { kind: "context_menu", target: "message", messageId: entry.messageId },
+                overlayReturnFocus: view.focus,
+                contextActionIndex: 0,
+            }));
+    };
+    useKeyboard((key) => {
+        // An overlay the shell owns takes the keyboard whole, so this pane answers nothing behind one.
+        if (model.state.view.overlay.kind !== "none")
+            return;
+        if (model.state.view.focus !== "agent_log")
+            return;
+        if (key.name === "f")
+            model.updateView((view) => ({ ...view, followAgentLog: true }));
+        if (key.name === "a") {
+            const selected = selectTuiTraffic(model.state).find((entry) => entry.trafficId === model.state.view.trafficId);
+            if (selected)
+                openContext(selected);
+        }
+    });
+    return (_jsxs("box", { flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, children: [_jsx(Line, { children: _jsx("text", { fg: theme.structure.rulesAndLabels, children: trafficHeadingRow(scope.kind, width - 2 - SCROLLBAR_RESERVED_COLUMNS) }) }), _jsx(Rule, { theme: theme }), traffic.length === 0 ? (_jsx(Centered, { theme: theme, text: "no messages" })) : (_jsx("scrollbox", { flexGrow: 1, focused: focused, stickyScroll: state.view.followAgentLog, stickyStart: "bottom", onMouseScroll: pause, style: VERTICAL_SCROLL_STYLE, children: traffic.map((entry) => (_jsx(TrafficRow, { entry: entry, state: state, theme: theme, colorEnabled: colorEnabled, scope: scope.kind, width: width - 2 - SCROLLBAR_RESERVED_COLUMNS, onSelect: select, onContext: openContext }, entry.trafficId))) }))] }));
+}
+/**
+ * Render the selected accepted delivery's metadata, lifecycle, scrolling body, and full-body affordance.
+ * @param properties - Model, palette, body reader, whether agents are coloured, the pane's columns, and the rows the body block takes, including its subject and spacer rows.
+ * @returns The message log pane content, or a placeholder when no delivery is selected.
+ */
+export function MessageDetail({ model, theme, body, colorEnabled = true, width: paneWidth = MESSAGE_LOG_COLUMNS, bodyRows = MINIMUM_MESSAGE_BODY_ROWS, }) {
+    const state = useTuiModel(model);
+    const message = selectedMessage(state);
+    const focused = state.view.focus === "message_log";
+    useKeyboard((key) => {
+        if (model.state.view.overlay.kind !== "none")
+            return;
+        const selected = selectedMessage(model.state);
+        if (key.name === "o" &&
+            (model.state.view.focus === "message_log" || model.state.view.focus === "agent_log") &&
+            selected)
+            model.updateView((view) => ({
+                ...view,
+                overlay: { kind: "full_message", messageId: selected.messageId },
+                overlayReturnFocus: view.focus,
+            }));
+    });
+    if (!message)
+        return _jsx(Centered, { theme: theme, text: "no message selected" });
+    const content = body.read(message);
+    const bodyText = content.display;
+    const width = paneWidth - 2;
+    const type = trafficType(message);
+    const repository = state.snapshot?.repositories.find((entry) => entry.id === state.snapshot?.agents.find((agent) => agent.id === message.fromAgentId)?.repository.repositoryId);
+    return (_jsxs("box", { flexDirection: "column", flexGrow: 1, onMouseDown: () => {
+            model.updateView((view) => ({ ...view, focus: "message_log" }));
+        }, children: [_jsxs("box", { flexDirection: "column", flexShrink: 0, paddingLeft: 1, paddingRight: 1, children: [_jsx(MetadataRow, { label: "from", value: agentAddress(state, message.fromAgentId), color: colorEnabled ? agentColor(message.fromAgentId, theme) : theme.structure.bodyText, theme: theme, width: width }), _jsx(MetadataRow, { label: "to", value: agentAddress(state, message.toAgentId), color: colorEnabled ? agentColor(message.toAgentId, theme) : theme.structure.bodyText, theme: theme, width: width }), _jsx(MetadataRow, { label: "workspace", value: repository ? repository.name : message.workspaceId, color: theme.structure.bodyText, theme: theme, width: width }), _jsx(MetadataRow, { label: "type", value: type, color: theme.structure.bodyText, theme: theme, width: width })] }), _jsx(Rule, { theme: theme }), _jsxs("box", { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", paddingLeft: 1, paddingRight: 1, children: [_jsx(Line, { children: _jsx("text", { fg: theme.structure.rulesAndLabels, children: "LIFECYCLE" }) }), _jsx(Line, {}), _jsx("scrollbox", { flexGrow: 1, focused: focused, stickyScroll: true, stickyStart: "bottom", style: VERTICAL_SCROLL_STYLE, children: message.lifecycle.map((entry, index) => (_jsx(Line, { children: _jsxs("text", { fg: lifecycleColor(entry, index === message.lifecycle.length - 1, theme), children: [_jsx("span", { fg: theme.structure.rulesAndLabels, children: padCells(formatClockSeconds(entry.at), MESSAGE_LABEL_GUTTER) }), truncateCells(entry.type, width - MESSAGE_LABEL_GUTTER - SCROLLBAR_RESERVED_COLUMNS)] }) }, entry.id))) })] }), _jsx(Rule, { theme: theme }), _jsxs("box", { flexDirection: "column", flexShrink: 0, overflow: "hidden", paddingLeft: 1, paddingRight: 1, children: [_jsx(Line, { children: _jsx("text", { fg: theme.structure.rulesAndLabels, children: truncateCells(trafficSubject(message), width) }) }), _jsx(Line, {}), _jsx("scrollbox", { height: Math.max(1, bodyRows - 2), focused: focused, style: WRAPPED_TEXT_SCROLL_STYLE, children: _jsx("text", { wrapMode: "word", fg: theme.structure.emphasis, children: bodyText }) })] })] }));
+}
+/**
+ * Render the full-body, message context, and expire confirmation overlays at the terminal root.
+ * @param properties - Model whose overlay state chooses what renders, and the body, copy and command ports the overlays use.
+ * @returns The open message overlay, or nothing when the open overlay is not a message overlay or its message has left the projection.
+ */
+export function MessageOverlays(properties) {
+    const state = useTuiModel(properties.model);
+    const overlay = state.view.overlay;
+    if (overlay.kind === "full_message") {
+        const message = findTuiMessage(state, overlay.messageId);
+        return message ? _jsx(FullMessageOverlay, { ...properties, message: message }) : null;
+    }
+    if (overlay.kind === "expire_confirm") {
+        const message = findTuiMessage(state, overlay.messageId);
+        return message ? _jsx(ExpireConfirmOverlay, { ...properties, message: message }) : null;
+    }
+    return overlay.kind === "context_menu" && overlay.target === "message" ? (_jsx(MessageContextOverlay, { ...properties })) : null;
+}
+function MetadataRow({ label, value, color, theme, width, }) {
+    return (_jsx(Line, { children: _jsxs("text", { fg: color, children: [_jsx("span", { fg: theme.structure.rulesAndLabels, children: padCells(label, MESSAGE_LABEL_GUTTER) }), truncateCells(value, width - MESSAGE_LABEL_GUTTER)] }) }));
+}
+function fixedTrafficColumnsWithoutType(scope) {
+    return scope === "agent"
+        ? AGENT_TRAFFIC_COLUMNS.state +
+            AGENT_TRAFFIC_COLUMNS.time +
+            AGENT_TRAFFIC_COLUMNS.direction +
+            AGENT_TRAFFIC_COLUMNS.peer
+        : WORKSPACE_TRAFFIC_COLUMNS.state +
+            WORKSPACE_TRAFFIC_COLUMNS.time +
+            WORKSPACE_TRAFFIC_COLUMNS.from +
+            WORKSPACE_TRAFFIC_COLUMNS.arrow +
+            WORKSPACE_TRAFFIC_COLUMNS.to;
+}
+function trafficTypeColumnMax(scope) {
+    return scope === "agent" ? AGENT_TRAFFIC_COLUMNS.type : WORKSPACE_TRAFFIC_COLUMNS.type;
+}
+/** Blank standing where each row shows its selection glyph, keeping the heading over its columns. */
+const SELECTION_GUTTER_HEADING = " ";
+/**
+ * Report the cells a traffic row's columns share.
+ *
+ * One cell is spent before the first column, on the selection glyph a row shows and its heading
+ * reserves, so the columns cannot have the row's full width.
+ * @param rowWidth - Cells the row occupies, already inset by its pane's padding and scrollbar.
+ * @returns Cells the columns may divide between them.
+ */
+function trafficColumnRoom(rowWidth) {
+    return Math.max(0, rowWidth - 1);
+}
+/**
+ * Report the cells the type column takes in one scope at one row width.
+ * @param scope - Whether a workspace or a single agent scopes the list.
+ * @param rowWidth - Cells the row occupies, already inset by its pane's padding and scrollbar.
+ * @returns Cells the type column occupies, zero where the row cannot afford it.
+ */
+function trafficTypeColumn(scope, rowWidth) {
+    return trafficTypeColumnWidth(fixedTrafficColumnsWithoutType(scope), trafficTypeColumnMax(scope), trafficColumnRoom(rowWidth));
+}
+function fixedTrafficColumns(scope, rowWidth) {
+    return fixedTrafficColumnsWithoutType(scope) + trafficTypeColumn(scope, rowWidth);
+}
+/**
+ * Render the traffic table's column heading.
+ *
+ * Each row reserves a leading cell for the selection glyph outside its column layout, so the heading
+ * reserves the same cell; without it every heading label sits one cell left of the column it names.
+ * @param scope - Whether a workspace or a single agent scopes the list.
+ * @param rowWidth - Character cells the row occupies, deciding whether the type column is shown.
+ * @returns The heading line, aligned to the rows beneath it.
+ */
+function trafficHeadingRow(scope, rowWidth) {
+    const typeColumnWidth = trafficTypeColumn(scope, rowWidth);
+    const type = typeColumnWidth === 0 ? "" : padCellsBeforeColumn("TYPE", typeColumnWidth);
+    if (scope === "agent")
+        return `${SELECTION_GUTTER_HEADING}${" ".repeat(AGENT_TRAFFIC_COLUMNS.state)}${padCells("TIME", AGENT_TRAFFIC_COLUMNS.time)}${padCellsBeforeColumn("PEER", AGENT_TRAFFIC_COLUMNS.peer)}${center("DIR", AGENT_TRAFFIC_COLUMNS.direction)}${type}SUBJECT`;
+    return `${SELECTION_GUTTER_HEADING}${" ".repeat(WORKSPACE_TRAFFIC_COLUMNS.state)}${padCells("TIME", WORKSPACE_TRAFFIC_COLUMNS.time)}${padCellsEnd("FROM", WORKSPACE_TRAFFIC_COLUMNS.from)}${center("→", WORKSPACE_TRAFFIC_COLUMNS.arrow)}${padCellsBeforeColumn("TO", WORKSPACE_TRAFFIC_COLUMNS.to)}${type}`;
+}
+function TrafficRow({ entry, state, theme, colorEnabled, scope, width, onSelect, onContext, }) {
+    const selected = state.view.trafficId === entry.trafficId;
+    const glyph = trafficGlyph(entry, theme);
+    const type = trafficType(entry);
+    const subject = trafficSubject(entry);
+    const typeColumnWidth = trafficTypeColumn(scope, width);
+    const focused = state.view.focus === "agent_log";
+    const filled = selected && focused;
+    const rowColor = filled
+        ? theme.structure.selection.text
+        : entry.kind === "ping_audit"
+            ? theme.structure.rulesAndLabels
+            : theme.structure.bodyText;
+    const peerColor = (agentId) => filled || !colorEnabled || agentId === null ? rowColor : agentColor(agentId, theme);
+    return (_jsxs("box", { height: 1, flexDirection: "row", onMouseDown: (event) => {
+            if (event.button === 2)
+                onContext(entry);
+            else
+                onSelect(entry);
+        }, children: [_jsx("text", { fg: theme.structure.selection.background, children: selected ? SELECTION_GUTTER_GLYPH : " " }), _jsx("box", { flexGrow: 1, flexDirection: "row", ...(filled ? { backgroundColor: theme.structure.selection.background } : {}), children: _jsxs("text", { fg: rowColor, children: [_jsx("span", { fg: glyph.color, children: padCells(` ${glyph.glyph} `, WORKSPACE_TRAFFIC_COLUMNS.state) }), padCells(formatClock(trafficTime(entry)), WORKSPACE_TRAFFIC_COLUMNS.time), scope === "agent" ? (_jsx(AgentScopeCells, { entry: entry, state: state, rowColor: rowColor, peerColor: peerColor })) : (_jsx(WorkspaceScopeCells, { entry: entry, state: state, peerColor: peerColor })), typeColumnWidth === 0 ? "" : padCellsBeforeColumn(type, typeColumnWidth), scope === "agent"
+                            ? truncateCells(subject, Math.max(0, trafficColumnRoom(width) - fixedTrafficColumns(scope, width)))
+                            : ""] }) })] }));
+}
+function WorkspaceScopeCells({ entry, state, peerColor, }) {
+    const from = trafficFrom(entry, state);
+    const to = trafficTo(entry, state);
+    return (_jsxs(_Fragment, { children: [_jsx("span", { fg: peerColor(from.agentId), children: padCellsEnd(from.label, WORKSPACE_TRAFFIC_COLUMNS.from) }), center("→", WORKSPACE_TRAFFIC_COLUMNS.arrow), _jsx("span", { fg: peerColor(to.agentId), children: padCellsBeforeColumn(to.label, WORKSPACE_TRAFFIC_COLUMNS.to) })] }));
+}
+function AgentScopeCells({ entry, state, rowColor, peerColor, }) {
+    const selection = state.view.selection;
+    const selectedAgentId = selection?.kind === "agent" ? selection.agentId : null;
+    const from = trafficFrom(entry, state);
+    const to = trafficTo(entry, state);
+    const outbound = from.agentId !== null && from.agentId === selectedAgentId;
+    const peer = outbound ? to : from;
+    return (_jsxs(_Fragment, { children: [_jsx("span", { fg: peerColor(peer.agentId), children: padCellsBeforeColumn(peer.label, AGENT_TRAFFIC_COLUMNS.peer) }), _jsx("span", { fg: rowColor, children: center(outbound ? "←" : "→", AGENT_TRAFFIC_COLUMNS.direction) })] }));
+}
+function FullMessageOverlay({ model, theme, body, copyFallback, message, colorEnabled = true, }) {
+    const state = useTuiModel(model);
+    const renderer = useRenderer();
+    const bodyView = body.read(message);
+    const [copyStatus, setCopyStatus] = useState(null);
+    useKeyboard((key) => {
+        if (key.name === "escape" || key.name === "o")
+            model.updateView((view) => ({ ...view, focus: view.overlayReturnFocus, overlay: { kind: "none" } }));
+        if (key.name === "y")
+            setCopyStatus(copyRaw(renderer, bodyView.rawCopy, copyFallback));
+    });
+    const bodyText = bodyView.display;
+    const width = FULL_MESSAGE_COLUMNS - 2;
+    const terminal = useTerminalDimensions();
+    // The border takes one cell on each side of the fitted overlay.
+    const barColumns = fitOverlayColumns(FULL_MESSAGE_COLUMNS, terminal.width) - 2;
+    const clock = formatClockSeconds(message.acceptedAt);
+    const from = agentHandle(state, message.fromAgentId);
+    const to = agentHandle(state, message.toAgentId);
+    const type = trafficType(message);
+    // The time is what the operator cannot get elsewhere in this overlay, so the endpoints go first.
+    const showRoute = Array.from(`${type} ${from} → ${to} · ${clock}`).length <= barColumns - PANE_BAR_INSET_COLUMNS;
+    const trailing = showRoute ? `${from} → ${to} · ${clock}` : clock;
+    return (_jsxs(Overlay, { theme: theme, width: FULL_MESSAGE_COLUMNS, height: FULL_MESSAGE_ROWS, children: [_jsx(PaneBar, { left: _jsx("text", { fg: theme.structure.rulesAndLabels, children: fitBarLeading(type, barColumns, trailing) }), right: _jsxs("text", { fg: theme.structure.rulesAndLabels, children: [showRoute ? (_jsxs(_Fragment, { children: [_jsx("span", { fg: colorEnabled ? agentColor(message.fromAgentId, theme) : theme.structure.rulesAndLabels, children: from }), " → ", _jsx("span", { fg: colorEnabled ? agentColor(message.toAgentId, theme) : theme.structure.rulesAndLabels, children: to }), " · "] })) : null, clock] }) }), _jsx(Rule, { theme: theme }), _jsx("box", { flexDirection: "column", flexShrink: 0, paddingLeft: 1, paddingRight: 1, children: _jsx(Line, { children: _jsx("text", { fg: theme.structure.rulesAndLabels, children: truncateCells(trafficSubject(message), width) }) }) }), _jsx(Rule, { theme: theme }), _jsx("box", { flexDirection: "column", flexGrow: 1, paddingLeft: 1, paddingRight: 1, overflow: "hidden", children: _jsx("scrollbox", { flexGrow: 1, focused: true, style: WRAPPED_TEXT_SCROLL_STYLE, children: _jsx("text", { selectable: true, wrapMode: "word", fg: theme.structure.emphasis, children: bodyText }) }) }), _jsx(Rule, { theme: theme }), _jsx(PaneBar, { left: _jsx("text", { fg: theme.structure.rulesAndLabels, children: copyHint(copyStatus) }), right: null })] }));
+}
+/**
+ * Actions the message context menu offers, in display order.
+ *
+ * An index that names none of them does nothing.
+ */
+export const MESSAGE_CONTEXT_ACTIONS = ["open", "copy", "expire"];
+const MESSAGE_CONTEXT_LABELS = {
+    open: "open full message",
+    copy: "copy raw",
+    expire: "expire message",
+};
+function MessageContextOverlay({ model, theme, body, copyFallback }) {
+    const state = useTuiModel(model);
+    const [copyStatus, setCopyStatus] = useState(null);
+    const renderer = useRenderer();
+    const overlay = state.view.overlay;
+    const message = overlay.kind === "context_menu" && overlay.target === "message"
+        ? findTuiMessage(state, overlay.messageId)
+        : undefined;
+    const close = () => {
+        model.updateView((view) => ({ ...view, focus: view.overlayReturnFocus, overlay: { kind: "none" } }));
+    };
+    const act = (action) => {
+        const current = model.state.view.overlay;
+        if (current.kind !== "context_menu" || current.target !== "message")
+            return;
+        const target = findTuiMessage(model.state, current.messageId);
+        if (!target)
+            return;
+        switch (action) {
+            case "open":
+                model.updateView((view) => ({ ...view, overlay: { kind: "full_message", messageId: target.messageId } }));
+                return;
+            case "copy":
+                setCopyStatus(copyRaw(renderer, body.read(target).rawCopy, copyFallback));
+                return;
+            case "expire":
+                if (!isTuiExpirable(target))
+                    return;
+                model.updateView((view) => ({ ...view, overlay: { kind: "expire_confirm", messageId: target.messageId } }));
+        }
+    };
+    useKeyboard((key) => {
+        const current = model.state.view.overlay;
+        if (current.kind !== "context_menu" || current.target !== "message")
+            return;
+        if (key.name === "escape")
+            close();
+        if (key.name === "up" || key.name === "down")
+            model.updateView((view) => ({
+                ...view,
+                contextActionIndex: stepWrappingIndex(view.contextActionIndex, key.name === "up" ? "up" : "down", MESSAGE_CONTEXT_ACTIONS.length),
+            }));
+        if (key.name === "enter" || key.name === "return") {
+            const action = MESSAGE_CONTEXT_ACTIONS[model.state.view.contextActionIndex];
+            if (action)
+                act(action);
+        }
+    });
+    return (_jsxs(Overlay, { theme: theme, width: CONTEXT_OVERLAY_COLUMNS, children: [MESSAGE_CONTEXT_ACTIONS.map((action, index) => (_jsxs("box", { flexDirection: "column", children: [action === "expire" ? _jsx(Rule, { theme: theme }) : null, _jsx(ContextRow, { theme: theme, selected: index === state.view.contextActionIndex, label: MESSAGE_CONTEXT_LABELS[action], role: action !== "expire"
+                            ? "ordinary"
+                            : message !== undefined && isTuiExpirable(message)
+                                ? "destructive"
+                                : "unavailable", onActivate: () => {
+                            act(action);
+                        } })] }, action))), copyStatus === null ? null : (_jsx("text", { fg: copyStatus === "unavailable" ? theme.states.failed : theme.states.complete, children: copyStatus === "unavailable" ? " copy unavailable" : " copied" }))] }));
+}
+/** Keys the expire confirmation advertises in its footer. */
+const EXPIRE_CONFIRM_FOOTER_KEYS = "⏎ expire  esc cancel";
+/**
+ * Ask again before expiring a message, and submit exactly once when the answer comes.
+ *
+ * The overlay closes in the same handler that submits, so the key that answered cannot answer twice
+ * while the command is still in flight.
+ * @param properties - Shared message collaborators and the delivery being expired.
+ * @returns - The confirmation overlay.
+ */
+function ExpireConfirmOverlay({ model, theme, commands, message, }) {
+    const terminal = useTerminalDimensions();
+    // Border and padding take two cells on each side of the fitted overlay.
+    const idColumns = fitOverlayColumns(EXPIRE_OVERLAY_COLUMNS, terminal.width) - 4;
+    useKeyboard((key) => {
+        const overlay = model.state.view.overlay;
+        if (overlay.kind !== "expire_confirm")
+            return;
+        if (key.name !== "escape" && key.name !== "enter" && key.name !== "return")
+            return;
+        const submitting = key.name !== "escape";
+        model.updateView((view) => ({ ...view, focus: view.overlayReturnFocus, overlay: { kind: "none" } }));
+        if (submitting)
+            void submitExpiry(model, commands, overlay.messageId);
+    });
+    return (_jsxs(Overlay, { theme: theme, width: EXPIRE_OVERLAY_COLUMNS, children: [_jsx(PaneBar, { left: _jsx("text", { fg: theme.states.failed, children: "expire this message?" }), right: null }), _jsx(Rule, { theme: theme }), _jsx("box", { flexDirection: "column", paddingLeft: 1, paddingRight: 1, children: splitCells(message.messageId, idColumns).map((line, index) => (_jsx(Line, { children: _jsx("text", { fg: theme.structure.bodyText, children: line }) }, index))) }), _jsx(Rule, { theme: theme }), _jsx(PaneBar, { left: _jsx("text", { fg: theme.structure.rulesAndLabels, children: EXPIRE_CONFIRM_FOOTER_KEYS }), right: null })] }));
+}
+/**
+ * Submit one expiry and report an outcome the operator would otherwise never see.
+ *
+ * A refusal arrives as an admitted result rather than a thrown error, so nothing on the surface
+ * changes when the broker declines: the diagnostics log is where that answer is put.
+ * @param model - Model owning the command port and the diagnostics log.
+ * @param commands - Correlation identities and the clock the command itself is stamped with.
+ * @param messageId - Delivery the operator asked to expire.
+ */
+async function submitExpiry(model, commands, messageId) {
+    const command = { type: "expire_message", messageId };
+    let result;
+    try {
+        result = await model.execute({
+            protocolVersion: OPERATOR_PROTOCOL_VERSION,
+            commandId: commands.commandId(),
+            issuedAt: commands.issuedAt(),
+            command,
+        });
+    }
+    catch {
+        const outcome = describeCommandOutcome(model.state, command, null);
+        model.reportDiagnostic(outcome.severity, "command", outcome.summary);
+        return;
+    }
+    const outcome = describeCommandOutcome(model.state, command, result);
+    model.reportDiagnostic(outcome.severity, "command", outcome.summary);
+    try {
+        commands.observe(result);
+    }
+    catch {
+        model.reportDiagnostic("error", "command", "expire answered, but observing its result failed");
+    }
+}
+/**
+ * Render one context-menu row.
+ *
+ * An unavailable row keeps its dim colour while highlighted, so the highlight cannot make it read as
+ * an action the menu would perform.
+ * @param properties - Palette, highlight, label, what the row does, and its activation.
+ * @returns - One menu row.
+ */
+function ContextRow({ theme, selected, label, role, onActivate, }) {
+    const color = role === "unavailable"
+        ? theme.structure.rulesAndLabels
+        : selected
+            ? theme.structure.selection.text
+            : role === "destructive"
+                ? theme.states.failed
+                : theme.structure.emphasis;
+    return (_jsx("box", { height: 1, ...(selected ? { backgroundColor: theme.structure.selection.background } : {}), onMouseDown: onActivate, children: _jsx("text", { fg: color, children: ` ${label}` }) }));
+}
+/**
+ * Guard OSC52 with OpenTUI's exact capability probe before emitting a clipboard sequence.
+ * @param renderer - Renderer whose capability probe and OSC52 write are used.
+ * @param rawCopy - Exact text to place on the clipboard.
+ * @param fallback - Native copy used when the terminal cannot take OSC52 or the write fails.
+ * @returns How the copy was performed, or that it could not be.
+ */
+export function copyRaw(renderer, rawCopy, fallback) {
+    return renderer.isOsc52Supported() && renderer.copyToClipboardOSC52(rawCopy)
+        ? "osc52"
+        : fallback.copyUnavailable(rawCopy);
+}
+const FULL_MESSAGE_COLUMNS = 96;
+const FULL_MESSAGE_ROWS = 28;
+const CONTEXT_OVERLAY_COLUMNS = 26;
+const EXPIRE_OVERLAY_COLUMNS = 46;
+function copyHint(status) {
+    if (status === null)
+        return "y copy raw  esc close";
+    return status === "unavailable" ? "copy unavailable  esc close" : "copied  esc close";
+}
+/**
+ * Close a message overlay once the traffic log selects a row other than the message it names.
+ *
+ * This is the log's rule on its own; it holds whatever the shell does with selection while an overlay
+ * is open.
+ * @param overlay - Overlay currently open.
+ * @param entry - Row the operator selected.
+ * @returns - The same overlay, or a closed one where it names another message.
+ */
+function closeOtherMessageOverlay(overlay, entry) {
+    const named = overlay.kind === "full_message" ||
+        overlay.kind === "expire_confirm" ||
+        (overlay.kind === "context_menu" && overlay.target === "message")
+        ? overlay.messageId
+        : null;
+    if (named === null)
+        return overlay;
+    return entry.kind === "accepted_delivery" && entry.messageId === named ? overlay : { kind: "none" };
+}
+/**
+ * Break text into rows of a fixed width wherever the width falls, for identities that hold no spaces
+ * to wrap at and must be shown whole.
+ * @param value - Text to lay out.
+ * @param width - Character cells each row holds.
+ * @returns - Rows in order, the last one possibly shorter.
+ */
+function splitCells(value, width) {
+    if (width <= 0)
+        return [];
+    const cells = Array.from(value);
+    const rows = [];
+    for (let start = 0; start < cells.length; start += width)
+        rows.push(cells.slice(start, start + width).join(""));
+    return rows;
+}
+function center(value, width) {
+    const left = Math.max(0, Math.floor((width - value.length) / 2));
+    return `${" ".repeat(left)}${value}`.padEnd(width);
+}
+function trafficGlyph(entry, theme) {
+    switch (entry.kind) {
+        case "accepted_delivery":
+            return { glyph: deliveryGlyph(entry.state), color: deliveryColor(entry.state, theme) };
+        case "ping_audit":
+            return { glyph: "⍾", color: theme.structure.rulesAndLabels };
+    }
+}
+function trafficFrom(entry, state) {
+    switch (entry.kind) {
+        case "accepted_delivery":
+            return { label: agentHandle(state, entry.fromAgentId), agentId: entry.fromAgentId };
+        case "ping_audit":
+            return { label: "broker", agentId: null };
+    }
+}
+function trafficTo(entry, state) {
+    switch (entry.kind) {
+        case "accepted_delivery":
+            return { label: agentHandle(state, entry.toAgentId), agentId: entry.toAgentId };
+        case "ping_audit":
+            return { label: agentHandle(state, entry.targetAgentId), agentId: entry.targetAgentId };
+    }
+}
+function lifecycleColor(entry, last, theme) {
+    if (entry.state === null)
+        return theme.structure.rulesAndLabels;
+    return last ? deliveryColor(entry.state, theme) : theme.structure.bodyText;
+}
+function Centered({ theme, text }) {
+    return (_jsx("box", { flexGrow: 1, justifyContent: "center", alignItems: "center", children: _jsx("text", { fg: theme.structure.rulesAndLabels, children: text }) }));
+}