@kortix/ui 0.0.0-stage → 0.14.4

package/dist/session/turn/user-message.js

@@ -0,0 +1,1089 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { attachmentMime } from '../../internal/lib/attachment-mime.js';
+import { AttachmentPreview } from './attachment-preview.js';
+import { getFileCategory } from '../../files/viewer/preview-policy.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { MessageSenderAbove } from '../participants/session-participants.js';
+import { MessageAuthorLabel } from './message-author-label.js';
+import { errorToast } from '../../primitives/toast.js';
+import { fetchSessionAttachment, isSessionAttachmentRef, } from '@kortix/sdk';
+/** Moved from session-chat.tsx (`UserMessageRow`) so the turn module owns the
+ *  user-message card. Full-width card, no reference chips. */
+import { useTranslations } from '../../i18n/index.js';
+import { expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { PencilSimpleIcon, AlarmIcon, ChatsTeardropIcon, LightningIcon, } from '@phosphor-icons/react';
+import { CopyButton } from '../../markdown/copy-button.js';
+import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+import { InlineMeta } from '../../primitives/inline-meta.js';
+import Loading from '../../primitives/loading.js';
+import { PreviewImage, PreviewImageContent, PreviewImageTrigger, } from '../../primitives/preview-image.js';
+import { detectCommandFromText } from '../thread/detect-command.js';
+import { useSandboxImageSrc } from '../media/sandbox-image.js';
+import { cn } from '../../lib/utils.js';
+import { getFilename } from '../../internal/lib/utils/file-utils.js';
+import { stripKortixSystemTags } from '../../internal/lib/utils/kortix-system-tags.js';
+import { useKortixComputerStore } from '../../internal/stores/kortix-computer-store.js';
+import { openTabAndNavigate } from '../../internal/stores/tab-store.js';
+import { useUiShallowNavigate } from '../../providers/ui-provider.js';
+import { AttachmentRemoveButton, AttachmentTile, PASTE_PREVIEW_CHARS, TILE_INTERACTIVE, TILE_SURFACE, isPreviewableImage, } from '../composer/attachment-tile.js';
+import { MentionChip } from '../thread/mention-chip.js';
+import { releaseSentAttachmentPreview, sentAttachmentPreview, } from '../composer/sent-attachment-previews.js';
+import { uploadedFileRefXml } from '../composer/uploaded-file-refs.js';
+import { buildMentionSegments, } from '../thread/mention-segments.js';
+import { parseChannelMessage, slackConversationName } from './channel-message.js';
+import { SourceCard, SourcePill } from './source-pill.js';
+import { useChannelBindings } from '../../internal/hooks/use-channel-bindings.js';
+import { useSessionIds } from '../../providers/session-ids.js';
+import { CHANNEL_BRAND_COLOR, ChannelBrandMark, channelPlatformLabel } from './channel-brand.js';
+import { parseAgentMentionReferences, parseFileMentionReferences, parseFileReferences, parseProjectReferences, parseReplyContexts, parseSessionReferences, parseSystemNotifications, parseReminderPrompt, parseRoomDigest, parseRoomPrompt, parseTriggerEvent, QUOTE_MARKER_RE, quoteMarker, splitAtQuoteMarkers, stripReplyContexts, stripSystemPtyText, SystemNotificationCard, } from '../thread/message-parsing.js';
+import { useProjectSessionHref } from '../../internal/lib/navigation/session-href.js';
+import { MessageTimeLabel } from './message-time-label.js';
+import { PlanCard, useHasPlan } from './plan-card.js';
+// Channel brand colors + marks live in ./channel-brand.tsx, shared with the
+// outgoing reply card the bash tool renders for `teams send` & co.
+/**
+ * Stable content-derived React keys for immutable parsed lists whose items
+ * carry no id. Duplicate content gets an occurrence suffix so keys stay
+ * unique; the lists never reorder (they are pure derivations of one message
+ * text), so occurrence order is part of an item's identity.
+ */
+function withContentKeys(items, contentOf) {
+    const seen = new Map();
+    return items.map((item) => {
+        const content = contentOf(item);
+        const n = seen.get(content) ?? 0;
+        seen.set(content, n + 1);
+        return { key: n === 0 ? content : `${content}~${n}`, item };
+    });
+}
+/**
+ * Exported so `optimistic-turn.tsx` imports these instead of keeping its own
+ * copy. It used to keep one, "matching this file" by comment only — the two
+ * drifted on background shade once already (fixed), then drifted again on
+ * padding/radius (`px-3 py-2.5 rounded-lg` vs `px-4.5 py-3.5 rounded-xl`),
+ * which is a visible bubble-size jump the instant a sent message's optimistic
+ * turn hands over to the real server turn. A shared constant makes that
+ * handover a no-op instead of a maintenance promise.
+ */
+export const BUBBLE_TEXT = cn('text-[0.9rem] leading-[22px] font-medium', 'wrap-break-word whitespace-pre-wrap select-text');
+// `muted`, the well surface, in both modes. Light mode used to borrow
+// `sidebar`, which most palettes set equal to the canvas (`pure-light` and
+// every generated light theme), so the bubble vanished into the page.
+export const BUBBLE_SURFACE = cn('bg-muted text-foreground flex max-w-full flex-col px-3.5 py-2.5 select-none rounded-lg');
+/**
+ * Where a channel message came from, in the pill's hover card: the platform,
+ * the channel or chat it was posted in, and who posted it. A Slack prompt
+ * written before channel names were recorded carries a bare id (`C0DEV`); the
+ * project's Slack bindings name it, read only while this card is open. A Teams
+ * conversation id names nothing a person reads, so Teams shows no channel row.
+ */
+export function ChannelOrigin({ info, platform }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const projectId = useSessionIds().projectId ?? null;
+    const bareSlackId = info.platform === 'Slack' && /^[CDG][A-Z0-9]+$/.test(info.context);
+    const { data } = useChannelBindings(bareSlackId ? projectId : null);
+    const binding = bareSlackId
+        ? data?.bindings.find((b) => b.platform === 'slack' && b.channelId === info.context)
+        : undefined;
+    const channel = info.platform === 'Teams' ? '' : (binding && slackConversationName(binding)) || info.context;
+    return (_jsx(SourceCard, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3.5 shrink-0" }), title: platform, rows: [
+            { label: tI18nComplete('textce4683e7013a'), value: channel },
+            { label: tI18nComplete('text218197693424'), value: info.userName },
+        ] }));
+}
+/**
+ * A message that arrived from a chat channel (Slack / Microsoft Teams /
+ * Telegram): a source pill — mark, platform, sender — over the same bubble a
+ * typed message gets. Every `@name` in the text (`@Kortix`, `@KortixDev`,
+ * `@here`) is a `MentionChip`, the chip the composer draws, static because a
+ * channel mention opens nothing here. Exported for `channel-message-card.test.tsx`.
+ */
+export function ChannelMessage({ info, actions, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const platform = channelPlatformLabel(info.platform, tI18nComplete);
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [_jsx(SourcePill, { mark: _jsx(ChannelBrandMark, { platform: info.platform, className: "size-3 shrink-0" }), source: platform, sourceColor: CHANNEL_BRAND_COLOR[info.platform], sender: info.userName, card: _jsx(ChannelOrigin, { info: info, platform: platform }) }), info.messageText && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: buildMentionSegments({ text: info.messageText }).map((segment, i) => segment.type ? (_jsx(MentionChip, { kind: "user", label: segment.text.slice(1) }, i)) : (_jsx("span", { children: segment.text }, i))) }) })), actions] }));
+}
+/**
+ * A prompt the platform wrote — a reminder fire or a trigger fire — drawn the
+ * way a channel message is: a source pill over the plain bubble, so every
+ * prompt a person did not type carries the same mark. One layout for both.
+ */
+function PlatformPromptMessage({ pill, text, actions, ...data }) {
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", ...data, children: [pill, text && (_jsx("div", { className: cn(BUBBLE_SURFACE, 'max-w-[80%]'), children: _jsx("div", { className: BUBBLE_TEXT, children: text }) })), actions] }));
+}
+/**
+ * A reminder fire (`[REMINDER reminder.<id> …]`). The pill says Reminder and
+ * whether it repeats; its card carries the id and a link to the project's
+ * reminders for this session.
+ */
+function ReminderMessage({ info, actions }) {
+    const t = useTranslations('reminders');
+    const ids = useSessionIds();
+    const manageHref = ids.projectId && ids.sessionId ? uiRoutes().customize(ids.projectId, `reminders?session=${ids.sessionId}`) : null;
+    return (_jsx(PlatformPromptMessage, { "data-testid": "reminder-turn", "data-reminder-id": info.id, text: info.prompt, actions: actions, pill: _jsx(SourcePill, { mark: _jsx(AlarmIcon, { className: "size-3 shrink-0", "aria-hidden": true }), source: t('cardLabel'), sender: info.recurring ? t('cardRecurring') : t('cardOneTime'), card: _jsx(SourceCard, { mark: _jsx(AlarmIcon, { className: "size-3.5 shrink-0", "aria-hidden": true }), title: t('cardLabel'), footer: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-muted-foreground truncate font-mono", children: info.id }), manageHref && (_jsx(HoverPrefetchLink, { href: manageHref, className: "text-foreground shrink-0 font-medium underline-offset-2 hover:underline", children: t('cardManage') }))] }) }) }) }));
+}
+/**
+ * A room message (`[room dev · #42 · from …]`, `[direct message · #3 · from …]`).
+ * The pill names the room and the sender; the card carries the seq. The bubble
+ * shows the message text only: the reply instructions in the footer are for
+ * the agent, not the reader. The parsed text has no room id, so there is no link.
+ */
+function RoomMessage({ info, actions }) {
+    const t = useTranslations('rooms');
+    const source = info.room;
+    const sender = info.senderKind === 'session' ? t('agentSender', { name: info.sender }) : info.sender;
+    return (_jsx(PlatformPromptMessage, { "data-testid": "room-turn", "data-room-seq": String(info.seq), text: info.text, actions: actions, pill: _jsx(SourcePill, { mark: _jsx(ChatsTeardropIcon, { className: "size-3 shrink-0", "aria-hidden": true }), source: source, sender: sender, card: _jsx(SourceCard, { mark: _jsx(ChatsTeardropIcon, { className: "size-3.5 shrink-0", "aria-hidden": true }), title: t('cardRoom', { name: source }), rows: [
+                    { label: t('cardFrom'), value: sender },
+                    { label: t('cardMessage'), value: `#${info.seq}` },
+                    { label: t('cardReplyTo'), value: info.replyTo ? `#${info.replyTo}` : null },
+                ] }) }) }));
+}
+/**
+ * A room digest: room traffic not addressed to this agent, batched into one
+ * turn. The pill names the room and the count; the bubble lists each message's
+ * sender and first line.
+ */
+function RoomDigestMessage({ info, actions }) {
+    const t = useTranslations('rooms');
+    const range = info.fromSeq === info.toSeq ? `#${info.toSeq}` : `#${info.fromSeq}–#${info.toSeq}`;
+    const count = t('digestCount', { count: info.count });
+    const lines = info.lines.map((line) => `#${line.seq} ${line.sender}: ${line.text}`);
+    if (info.more)
+        lines.push(t('digestMore', { count: info.more }));
+    return (_jsx(PlatformPromptMessage, { "data-testid": "room-digest-turn", text: lines.join('\n'), actions: actions, pill: _jsx(SourcePill, { mark: _jsx(ChatsTeardropIcon, { className: "size-3 shrink-0", "aria-hidden": true }), source: info.room, sender: count, card: _jsx(SourceCard, { mark: _jsx(ChatsTeardropIcon, { className: "size-3.5 shrink-0", "aria-hidden": true }), title: t('cardRoom', { name: info.room }), rows: [{ label: t('cardMessage'), value: range }] }) }) }));
+}
+/** A trigger fire (`<trigger_event>{…}</trigger_event>`): the trigger's name in the pill, the prompt in the bubble. */
+function TriggerMessage({ info, actions }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const name = info.data?.trigger || tI18nComplete.raw('text512618790549');
+    const manual = Boolean(info.data?.data?.manual);
+    const source = tI18nComplete.raw('text8b9c643731c9');
+    return (_jsx(PlatformPromptMessage, { "data-testid": "trigger-turn", text: info.prompt, actions: actions, pill: _jsx(SourcePill, { mark: _jsx(LightningIcon, { className: "size-3 shrink-0", "aria-hidden": true }), source: source, sender: name, card: _jsx(SourceCard, { mark: _jsx(LightningIcon, { className: "size-3.5 shrink-0", "aria-hidden": true }), title: source, footer: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "text-foreground truncate font-mono", children: name }), manual && (_jsx("span", { className: "text-muted-foreground shrink-0", children: tI18nComplete.raw('textb0b9fe24ffa9') }))] }) }) }) }));
+}
+/** The tile of one paste. Keyed by the paste id, so the optimistic and sent turns draw the same tile. */
+export function pastedAttachment(paste) {
+    return { key: `pasted:${paste.id}`, filename: 'Pasted text', pasted: paste };
+}
+/**
+ * Shift every quote marker in `text` by `offset`. Text parsed on its own has
+ * markers counting from 0; appended after `offset` earlier quotes, its markers
+ * must index the combined list.
+ */
+function offsetQuoteMarkers(text, offset) {
+    if (offset === 0)
+        return text;
+    return text.replace(new RegExp(QUOTE_MARKER_RE), (_marker, index) => quoteMarker(offset + Number(index)));
+}
+/**
+ * Where the `/command` chip sits in a quoted command body — see
+ * `quotedPieces` in `UserMessage`. A private-use character, like the quote
+ * markers: never typed, not whitespace, untouched by every parser.
+ */
+const COMMAND_SLOT = '\uE002';
+/** A prompt block's visible text: a text block the harness did not write. Ignored text is a harness block. */
+function visibleText(block) {
+    return block.type === 'text' && !block.synthetic ? block.text : undefined;
+}
+/**
+ * Parse visible text blocks once while retaining each upload reference's source
+ * block. The source index lets the attachment normalizer merge references and
+ * native file blocks without changing their persisted order.
+ */
+function parseAttachmentContent(blocks) {
+    const rawTexts = [];
+    const cleanTexts = [];
+    const uploads = [];
+    const quotes = [];
+    const pastes = [];
+    blocks.forEach((block, sourcePartIndex) => {
+        const blockText = visibleText(block);
+        if (!blockText?.trim())
+            return;
+        // Pastes come out FIRST: a paste is the user's text, so a `<file>` or
+        // `<reply_context>` inside one is paste content, not a ref. They also come
+        // out before `stripSystemPtyText`, which collapses blank-line runs: a
+        // shorter body no longer matches its `chars` and the tile shows as raw XML.
+        const pasted = splitPastedContent(blockText);
+        const rawPartText = stripSystemPtyText(pasted.text);
+        pastes.push(...pasted.pastes);
+        rawTexts.push(rawPartText);
+        // Each part is parsed on its own, so its markers count from 0. Shift them
+        // by the quotes already collected, or part 2's first marker would name
+        // part 1's first quote.
+        const parsedReply = parseReplyContexts(rawPartText);
+        const partText = offsetQuoteMarkers(parsedReply.cleanText, quotes.length);
+        quotes.push(...parsedReply.quotes);
+        const parsedFiles = parseFileReferences(partText);
+        cleanTexts.push(parsedFiles.cleanText);
+        uploads.push(...parsedFiles.files.map((file) => ({
+            ...file,
+            sourcePartIndex,
+        })));
+    });
+    return {
+        rawText: rawTexts.join('\n'),
+        textAfterFiles: cleanTexts.join('\n'),
+        quotes,
+        uploads,
+        pastes,
+    };
+}
+/**
+ * The attachment strip's input, merged in original message-block order. A file
+ * is an attachment block or a text/plain or directory mention (a harness `file` block).
+ *
+ * A sent ref is keyed by its attachment identity. Any other upload is keyed by
+ * POSITION first, then its path: three screenshots pasted in one message are
+ * all named `image.png`, and path-only keys made React collapse them.
+ *
+ * A user attachment is never pending. A ref with no path is a file the runtime
+ * does not hold yet; it draws its sent picture or its name, never a spinner.
+ */
+export function normalizeAttachments(blocks, uploads) {
+    const normalized = [];
+    const uploadsByPart = new Map();
+    const unpositionedUploads = [];
+    uploads.forEach((file, index) => {
+        if (file.sourcePartIndex === undefined) {
+            unpositionedUploads.push({ file, index });
+            return;
+        }
+        const references = uploadsByPart.get(file.sourcePartIndex) ?? [];
+        references.push({ file, index });
+        uploadsByPart.set(file.sourcePartIndex, references);
+    });
+    const addUpload = (file, index) => {
+        normalized.push({
+            key: file.attachment ? `attachment:${file.attachment}` : `upload:${index}:${file.path}`,
+            ...(file.attachment && !isSessionAttachmentRef(file.attachment) ? { id: file.attachment } : {}),
+            filename: file.filename || getFilename(file.path),
+            mime: file.mime,
+            src: isSessionAttachmentRef(file.attachment) ? file.attachment : file.path || undefined,
+            path: file.path || undefined,
+        });
+    };
+    // An image a `<file>` tag names (`source_path`, pi) draws once, through its tag.
+    const tagPaths = new Set(uploads.map((file) => file.path));
+    blocks.forEach((block, sourcePartIndex) => {
+        const file = block.type === 'attachment' && block.source_path && tagPaths.has(block.source_path)
+            ? undefined
+            : block.type === 'attachment'
+                ? { mime: block.mime, filename: block.name, url: block.url }
+                : block.type === 'harness' && block.kind === 'file'
+                    ? block.data
+                    : undefined;
+        if (file) {
+            normalized.push({
+                key: block.id,
+                filename: file.filename || 'File',
+                mime: file.mime,
+                src: file.url,
+            });
+        }
+        for (const { file, index } of uploadsByPart.get(sourcePartIndex) ?? []) {
+            addUpload(file, index);
+        }
+    });
+    for (const { file, index } of unpositionedUploads)
+        addUpload(file, index);
+    return normalized;
+}
+/**
+ * The strip of a message this tab sent: its submitted list in send order, each
+ * entry keyed by its attachment identity.
+ *
+ * An entry draws the delivered tile that matches it (same identity, else the
+ * next unclaimed tile with the same filename), or its own tile until that part
+ * renders. The runtime streams the text part before the file parts, so the
+ * strip never shrinks and no tile remounts. Unclaimed delivered tiles follow.
+ * A reload has no submitted list and draws what arrived.
+ */
+export function mergeSentAttachments(arrived, sent) {
+    if (!sent?.length)
+        return arrived;
+    const unclaimed = [...arrived];
+    const claim = (entry) => {
+        let index = entry.id ? unclaimed.findIndex((tile) => tile.id === entry.id) : -1;
+        if (index < 0) {
+            // The API stores a sanitized name for an attachment and a trimmed name for an inline part.
+            const names = new Set([
+                entry.filename,
+                entry.filename.trim(),
+                sanitizePromptUploadFilename(entry.filename),
+            ]);
+            index = unclaimed.findIndex((tile) => !tile.id && names.has(tile.filename));
+        }
+        return index < 0 ? undefined : unclaimed.splice(index, 1)[0];
+    };
+    const drawn = sent.map((entry, index) => {
+        const tile = claim(entry);
+        const identity = entry.id
+            ? { key: `attachment:${entry.id}`, id: entry.id }
+            : { key: `sent:${index}:${entry.filename}` };
+        return tile
+            ? { ...tile, ...identity }
+            : { ...identity, filename: entry.filename, mime: entry.mime };
+    });
+    return [...drawn, ...unclaimed];
+}
+/**
+ * Attachments shown before the grid collapses into a `+N` tile.
+ *
+ * Whole rows of four, because the cap exists to bound HEIGHT and a cap that
+ * leaves a half-filled tail trades one ragged shape for another.
+ */
+const ATTACHMENT_TILE_CAP = 8;
+export { ATTACHMENT_TILE_CAP };
+/**
+ * How much of the attachment block to show.
+ *
+ * That is the whole decision. Images and files are the SAME square tile, so
+ * there is no kind to branch on, no order to group, and no per-kind cap — the
+ * grid lays attachments out exactly as the user attached them.
+ */
+export function planAttachmentGrid(attachments, expanded) {
+    if (expanded || attachments.length <= ATTACHMENT_TILE_CAP) {
+        return { visible: attachments, hidden: 0 };
+    }
+    return {
+        visible: attachments.slice(0, ATTACHMENT_TILE_CAP),
+        hidden: attachments.length - ATTACHMENT_TILE_CAP,
+    };
+}
+/** A picture tile: a previewable image with a delivered source or a sent identity. */
+const isImageAttachment = (file) => isPreviewableImage(file.filename, file.mime) && Boolean(file.src || file.id);
+// `AttachmentTile` (name top-left, extension badge bottom-left, or the picture
+// itself) lives in `../composer/attachment-tile` — shared with the composer's preview so
+// the two can never drift apart. See that module for why.
+/**
+ * An image attachment: a square tile that opens full-size on click.
+ *
+ * Source order: the picture the composer showed (a file this tab sent, from
+ * the first frame), then the delivered source. The delivered source loads
+ * offscreen, and the tile swaps to it only after `img.decode()` resolves, so it
+ * never passes through a spinner or a name tile. With neither (a reload, bytes
+ * still loading) the tile is the named tile and swaps once when they decode.
+ *
+ * Resolving the src here (rather than handing the path to `SandboxImage`) gives
+ * the lightbox the URL the tile shows, at any tile size.
+ */
+function AttachmentImage({ file, className }) {
+    // Read at mount: the cache revokes this URL once the delivered source decodes.
+    const [sentPreview] = useState(() => sentAttachmentPreview(file.id));
+    const { resolvedSrc } = useSandboxImageSrc(file.src ?? '');
+    // With no sent picture on screen, bytes the browser already holds show on the first frame. A
+    // sent picture stays until the delivered source decodes. HEIC may not decode here, so it waits.
+    const decodedSrc = useDecodedImageSrc(resolvedSrc, !sentPreview && !isHeicImage(file));
+    const shownSrc = decodedSrc ?? sentPreview;
+    useEffect(() => {
+        if (decodedSrc && file.id)
+            releaseSentAttachmentPreview(file.id);
+    }, [decodedSrc, file.id]);
+    if (!shownSrc) {
+        return _jsx(AttachmentTile, { filename: file.filename, mime: file.mime, className: className });
+    }
+    return (_jsxs(PreviewImage, { children: [_jsx(PreviewImageTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: (e) => e.stopPropagation(), className: cn(TILE_SURFACE, TILE_INTERACTIVE, className), children: _jsx(AttachmentTile, { filename: file.filename, mime: file.mime, imageSrc: shownSrc, className: "border-0 bg-transparent" }) }) }), _jsx(PreviewImageContent, { fileContent: shownSrc, fileName: file.filename, fullscreen: true })] }));
+}
+/** Bytes the browser already holds: an inline part or a local object URL. */
+const IN_BROWSER_SOURCE = /^(data|blob):/i;
+const isHeicImage = (file) => /^image\/hei[cf]\b/i.test(file.mime ?? '') || /\.hei[cf]$/i.test(file.filename);
+/**
+ * `src` once it can show without a visible swap. With `showBytesNow`, a `data:` or `blob:`
+ * source shows on the first frame. Any other source decodes offscreen first; until then the
+ * last decoded source, or null.
+ */
+function useDecodedImageSrc(src, showBytesNow) {
+    const [decoded, setDecoded] = useState(null);
+    const now = showBytesNow && !!src && IN_BROWSER_SOURCE.test(src);
+    useEffect(() => {
+        if (!src || now)
+            return;
+        let cancelled = false;
+        const image = new Image();
+        image.src = src;
+        image.decode().then(() => {
+            if (!cancelled)
+                setDecoded(src);
+        }, 
+        // Undecodable here (a HEIC echo, a broken file): keep what is on screen.
+        () => { });
+        return () => {
+            cancelled = true;
+        };
+    }, [src, now]);
+    return now ? src : decoded;
+}
+function StoredAttachmentFile({ file }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const category = getFileCategory(file.filename, attachmentMime(file.mime === 'application/octet-stream' ? undefined : file.mime, file.filename));
+    const canPreview = ['text', 'code', 'html', 'csv', 'pdf'].includes(category);
+    const load = useMemo(() => async () => {
+        if (isSessionAttachmentRef(file.src))
+            return fetchSessionAttachment(file.src);
+        const url = sentAttachmentPreview(file.id);
+        if (!url)
+            throw new Error('Attachment is unavailable');
+        const response = await fetch(url);
+        if (!response.ok)
+            throw new Error('Could not load attachment');
+        return response.blob();
+    }, [file.src, file.id]);
+    const [downloading, setDownloading] = useState(false);
+    const download = async () => {
+        if (downloading)
+            return;
+        setDownloading(true);
+        try {
+            const stored = isSessionAttachmentRef(file.src);
+            const url = stored
+                ? URL.createObjectURL(await fetchSessionAttachment(file.src))
+                : sentAttachmentPreview(file.id);
+            if (!url)
+                return;
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = file.filename;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            if (stored)
+                setTimeout(() => URL.revokeObjectURL(url), 30_000);
+        }
+        catch (error) {
+            errorToast(error instanceof Error ? error.message : tI18nComplete('text7f755292bf51'));
+        }
+        finally {
+            setDownloading(false);
+        }
+    };
+    return (_jsxs("div", { "aria-busy": downloading, children: [_jsx(AttachmentTile, { filename: file.filename, mime: file.mime, className: downloading ? 'cursor-wait' : undefined, onOpen: () => (canPreview ? setPreviewOpen(true) : void download()) }), previewOpen && (_jsx(AttachmentPreview, { name: file.filename, mime: file.mime ?? '', load: load, onClose: () => setPreviewOpen(false) }))] }));
+}
+export function MessageAttachments({ attachments, status, onOpenPastedContent, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tComposerAttachments = useTranslations('hardcodedUi.composerAttachments');
+    const openFileInComputer = useKortixComputerStore((s) => s.openFileInComputer);
+    const [expanded, setExpanded] = useState(false);
+    const { visible, hidden } = planAttachmentGrid(attachments, expanded);
+    // A sent message never shows upload chrome: no spinner, no progress, no
+    // status text. A failed send is the one state a tile cannot show, so only it
+    // gets a line: "Couldn't send", then the reason when one is known. A kept
+    // send with no files (a text-only send delivered detached) gets the line too.
+    const failed = status?.state === 'failed' ? status : null;
+    if (visible.length === 0 && !failed)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col items-end gap-1.5", children: [visible.length > 0 && (_jsx("ul", { className: "flex max-w-md flex-wrap justify-end gap-2", children: visible.map((file, index) => {
+                    // The LAST visible tile carries the overflow count over its own
+                    // contents, so the grid never shows a blank slot — the count is an
+                    // overlay, not a placeholder. It opens the rest instead of the file, so
+                    // it is a plain button: nesting one inside the preview trigger would be
+                    // two buttons deep and invalid.
+                    if (hidden > 0 && index === visible.length - 1) {
+                        return (_jsx("li", { className: "contents", children: _jsxs("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    setExpanded(true);
+                                }, "aria-label": tI18nComplete('textf9c98eec768a', {
+                                    value0: hidden,
+                                    value1: hidden === 1 ? '' : 's',
+                                }), className: cn(TILE_SURFACE, TILE_INTERACTIVE, 'text-muted-foreground flex items-center justify-center text-sm font-medium'), children: ["+", hidden] }) }, file.key));
+                    }
+                    const { pasted } = file;
+                    if (pasted) {
+                        return (_jsx("li", { className: "contents", children: _jsx(AttachmentTile, { filename: file.filename, preview: pasted.text.slice(0, PASTE_PREVIEW_CHARS), onOpen: onOpenPastedContent
+                                    ? () => onOpenPastedContent(pasted.id, pasted.text)
+                                    : undefined }) }, file.key));
+                    }
+                    if (isImageAttachment(file)) {
+                        return (_jsx("li", { className: "contents", children: _jsx(AttachmentImage, { file: file }) }, file.key));
+                    }
+                    if (isSessionAttachmentRef(file.src) || sentAttachmentPreview(file.id)) {
+                        return _jsx("li", { className: "contents", children: _jsx(StoredAttachmentFile, { file: file }) }, file.key);
+                    }
+                    const canOpen = Boolean(file.path);
+                    return (_jsx("li", { className: "contents", children: _jsx(AttachmentTile, { filename: file.filename, mime: file.mime, onOpen: canOpen ? () => openFileInComputer(file.path) : undefined }) }, file.key));
+                }) })), failed && (
+            // Right-aligned under the strip, on the same rail as the tiles. Muted
+            // text, not a status card: the WORDS carry the failure, so it needs no
+            // colour the palette does not have.
+            _jsxs("p", { className: "text-muted-foreground max-w-md text-right text-xs leading-tight", role: "alert", children: [tComposerAttachments('couldNotSend'), failed.message && _jsx("span", { className: "block", children: failed.message })] })), failed?.onRetry && (_jsx(Button, { type: "button", variant: "ghost", size: "xs", onClick: failed.onRetry, children: tI18nComplete('text942087cc2d41') }))] }));
+}
+// ============================================================================
+// Inline reply quotes
+// ============================================================================
+/**
+ * Key each mention segment by its character offset in the text — stable
+ * across renders, unlike an array index.
+ */
+function keyMentionSegments(segs) {
+    const keyed = [];
+    let offset = 0;
+    for (const seg of segs) {
+        keyed.push({ ...seg, key: `${offset}-${seg.type ?? 'text'}` });
+        offset += seg.text.length;
+    }
+    return keyed;
+}
+/**
+ * A message body with its `<reply_context>` quotes drawn where they were
+ * written — quote, reply, quote, reply — instead of one quote pinned
+ * above the text.
+ *
+ * Shared by the sent bubble and `OptimisticTurn`, so the optimistic → echo
+ * swap draws the same markup and cannot jump. `renderText` draws one text run
+ * (mention chips included); this component owns only the order, the quote
+ * treatment and the spacing.
+ *
+ * A quote is a rule, not a card. A filled, bordered banner sitting on the
+ * already-filled bubble made two nested surfaces, and the louder one was the
+ * quote rather than the message the reader came for. `line-clamp-2` wraps to a
+ * second line and ends cleanly, and the full text stays in the DOM to copy.
+ *
+ * `gap-2` is the old quote's `mb-2`, moved to the parent so every gap has one
+ * owner: quote → reply, reply → quote and quote → quote are all the same step.
+ * `BUBBLE_TEXT` sits on each text run, not on the column: a quote inside the
+ * `font-medium whitespace-pre-wrap` run would inherit both.
+ */
+export function QuotedMessageBody({ pieces, renderText, }) {
+    return (_jsx("div", { className: "flex flex-col gap-2", children: pieces.map((piece, position) => {
+            if (piece.kind === 'quote') {
+                return (_jsx("blockquote", { className: "border-border border-l-2 pl-2.5", children: _jsx("p", { className: "text-muted-foreground line-clamp-2 text-sm leading-5", children: piece.text }) }, `quote-${piece.index}`));
+            }
+            // Two text runs are never adjacent — a quote always separates them —
+            // so "the run after quote N" is a unique, content-stable key.
+            const previous = pieces[position - 1];
+            const after = previous?.kind === 'quote' ? previous.index : 'start';
+            return (_jsx("div", { className: BUBBLE_TEXT, children: renderText(piece.text) }, `text-after-${after}`));
+        }) }));
+}
+/**
+ * The text the inline edit-from-here editor starts from. That editor is a
+ * plain `<textarea>` (`UserMessageEditor`), not the composer, so it has no
+ * quote list to hold a `<reply_context>` block — it would show raw XML.
+ * Quotes are dropped; the reply text stays, in order.
+ */
+export function editablePromptText(copyText, command) {
+    if (command) {
+        // A command's args carry its quotes and pastes too (the composer writes
+        // them ahead of the args). The pastes stay as the editor's tiles.
+        const args = command.args ? stripReplyContexts(splitPastedContent(command.args).text) : '';
+        return `/${command.name}${args ? ` ${args}` : ''}`;
+    }
+    const withoutReply = stripReplyContexts(splitPastedContent(copyText).text);
+    const withoutUploads = parseFileReferences(withoutReply).cleanText;
+    const withoutProjects = parseProjectReferences(withoutUploads).cleanText;
+    const withoutFiles = parseFileMentionReferences(withoutProjects).cleanText;
+    const withoutAgents = parseAgentMentionReferences(withoutFiles).cleanText;
+    const withoutSessions = parseSessionReferences(withoutAgents).cleanText;
+    return stripKortixSystemTags(withoutSessions).trim();
+}
+/**
+ * What an edited prompt sends again for the attachments the editor kept.
+ *
+ * A saved copy (`kortix-attachment://`) or a native file part rides as a URL
+ * part; the API writes a saved copy into the sandbox again. An upload whose
+ * saved copy is missing is still in the sandbox, so its `<file>` ref is resent
+ * as text, joined under the trimmed `text` (refs alone when the text is blank).
+ * A tile with neither source has nothing to resend. A kept paste is written
+ * back as its `<pasted_content>` block, ahead of the text, as the composer does.
+ */
+export function editResendAttachments(kept, text) {
+    const files = [];
+    const refs = [];
+    const pastes = [];
+    for (const { src, path, filename, mime: kind, pasted } of kept) {
+        if (pasted) {
+            pastes.push(pasted);
+            continue;
+        }
+        const mime = kind || 'application/octet-stream';
+        if (src && (isSessionAttachmentRef(src) || !path)) {
+            const isImage = isPreviewableImage(filename, mime);
+            files.push({ kind: 'remote', url: src, filename, mime, isImage });
+        }
+        else if (path) {
+            refs.push(uploadedFileRefXml({ path, mime, filename }));
+        }
+    }
+    const joined = refs.join('\n');
+    const body = text.trim();
+    const withRefs = joined ? (body ? `${body}\n\n${joined}` : joined) : text;
+    return { files, text: serializePromptWithPastes(withRefs, pastes) };
+}
+// ============================================================================
+// The bubble
+// ============================================================================
+/**
+ * The message bubble, including the clamp and its expand affordance.
+ *
+ * The expand control is the "Show more" button, not the bubble. The bubble used to carry
+ * `role="button"` + `tabIndex={0}` whenever the text was clamped, and it
+ * contains `MentionChip` buttons — a file or session chip that opens what it
+ * names. Interactive content inside a `role="button"` is invalid for a reason
+ * that bites in practice: assistive technology flattens a button's subtree into
+ * its accessible name, so the chips stopped existing as controls, while still
+ * being tab stops in the browser — a bubble that a keyboard user could enter,
+ * tab through, and never operate.
+ *
+ * A real `<button>` carries a name (its visible "Show more" text), state
+ * (`aria-expanded`) and a target (`aria-controls` → the clamped region). It is
+ * the ONLY toggle. The bubble itself used to toggle on click, and selecting
+ * text to copy from a long prompt opened or closed it at random: a drag that
+ * ends inside the bubble is a click.
+ *
+ * Exported, and taking `canExpand` as a PROP rather than measuring it, because
+ * the measurement is a `ResizeObserver` in `UserMessage` that only exists in a
+ * browser. Under `renderToStaticMarkup` — the only render this app can test —
+ * effects never commit, so `canExpand` is permanently `false` and every
+ * assertion about the clamped bubble would pass no matter what the clamped
+ * branch renders. The seam is what makes the expanded/collapsed markup able to
+ * fail at all.
+ */
+export function UserMessageBubble({ canExpand, expanded, onToggle, fullWidth, textId, textRef, quoted, tail = false, children, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    return (_jsxs("div", { className: cn(BUBBLE_SURFACE, 'relative overflow-hidden', 
+        // 4px: `--radius` (10) minus 6, the corner under the sender's avatar.
+        tail && 'rounded-tr-[calc(var(--radius)-6px)]', fullWidth ? 'w-full' : 'w-fit'), children: [children && (_jsxs("div", { className: "relative", children: [_jsx("div", { ref: textRef, id: textId, className: cn('max-w-full min-w-0', !quoted && BUBBLE_TEXT, !expanded && 'max-h-[200px] overflow-hidden'), children: children }), canExpand && !expanded && (_jsx("div", { className: "from-muted pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent" }))] })), children && canExpand && (_jsx("button", { type: "button", "aria-expanded": expanded, "aria-controls": textId, onClick: onToggle, className: "text-muted-foreground hover:text-foreground hit-area-x-2  hit-area-r-20 hit-area-y-2 focus-visible:ring-ring mt-1.5 self-start rounded-sm text-xs font-medium transition-colors duration-(--duration-normal) focus-visible:ring-2 focus-visible:outline-none print:hidden", children: expanded ? tI18nComplete.raw('text94ea9b1d33a0') : tI18nComplete.raw('textf5c9bd131486') }))] }));
+}
+// ============================================================================
+// User message meta — when it was sent, what you can do
+// ============================================================================
+/**
+ * The line under a user bubble: when it was sent and what you can do to it —
+ * one row, right-aligned against the same rail as the bubble.
+ *
+ * ONE row, deliberately, and the whole row reveals on hover. The transcript is
+ * the message thread — a timestamp on every turn, permanently, is chrome
+ * competing with the conversation. Putting it on the same reveal as the
+ * actions keeps the quiet reading intact and puts the "when" exactly where a
+ * reader already goes to act on a message.
+ *
+ * The reveal is `opacity`, never mount/unmount, so the row occupies its height
+ * either way and hovering a turn never reflows the thread.
+ *
+ * `focus-within` matches the assistant turn's action bar: anything that only
+ * appears on hover is unreachable by keyboard otherwise. The timestamp is a
+ * `<time datetime=…>` element, so its machine-readable value stays in the
+ * accessibility tree regardless of the visual reveal.
+ *
+ * Shared with `OptimisticTurn` so the pending turn and the server turn cannot
+ * drift — the same reason `MessageAttachments` is shared.
+ */
+export function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    // Copy stays available while the agent is busy / rewind is locked.
+    // Only edit-from-here is gated — hiding the whole bar was wrong.
+    const canRewind = Boolean(onRewind && messageId && !rewindDisabled);
+    const hasMeta = timestamp !== null;
+    // Nothing to say and nothing to do — don't leave an empty row behind.
+    if (!hasMeta && !copyText && !deliveryStatus)
+        return null;
+    return (
+    // The fade sits on the ROW, so the timestamp and the buttons reveal
+    // together as one object rather than a label with controls growing out of
+    // it. `opacity`, never mounting: the row holds its height whether or not
+    // the pointer is over the turn, so nothing in the transcript reflows.
+    // The status word (when there is one) sits OUTSIDE the fade: it is the
+    // one thing on this row a user must not have to hover to learn. It is the
+    // LAST child, pinned to the right edge: the faded group still takes its
+    // width, and the server stamp lands while a prompt is still `delivering`,
+    // so a status to its left slid 56px for a frame before it vanished.
+    _jsxs("div", { className: "flex w-full items-center justify-end gap-2", children: [_jsxs("div", { className: cn('flex items-center gap-2 transition-opacity duration-normal', 
+                // `max-md:opacity-100` — the reveal is a DESKTOP affordance only.
+                //
+                // A touch screen has no hover, so under 768px this row would sit
+                // at zero opacity for the whole session: the timestamp, Copy and
+                // Edit-from-here all present, all invisible, all unreachable.
+                // Worse than absent, because the row still holds its height.
+                //
+                // Touch browsers also emulate `:hover` on tap and leave it stuck
+                // on the last-tapped element until you tap elsewhere — so the
+                // pre-fix behavior was not "never shows", it was "one arbitrary
+                // turn's actions stay lit while every other turn's stay hidden".
+                //
+                // Appended rather than folded into the desktop classes on
+                // purpose: the only utility it truly conflicts with is the bare
+                // `opacity-0`, and a variant always sorts after its bare
+                // counterpart. The two `opacity-100` variants it sits beside
+                // agree with it, so no ordering assumption is being made and the
+                // desktop string is unchanged.
+                'opacity-0 group-hover/turn:opacity-100 focus-within:opacity-100 max-md:opacity-100'), children: [hasMeta && (_jsx(InlineMeta, { children: timestamp !== null && _jsx(MessageTimeLabel, { timestamp: timestamp }) })), copyText && (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [canRewind && (_jsx(Hint, { label: tI18nComplete.raw('textc72e5d059e24'), side: "top", align: "center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", 
+                                    // 24px visible, 40px target — grown with a pseudo-element so the
+                                    // dense action row keeps its rhythm.
+                                    className: "hit-area-2", "aria-label": tI18nComplete.raw('text673d6a594efa'), onClick: () => onRewind?.(messageId, rewindPromptText ?? ''), children: _jsx(PencilSimpleIcon, { weight: "regular", className: "text-foreground size-4" }) }) })), _jsx(CopyButton, { code: copyText, size: "sm", hintSide: "top", label: tI18nComplete.raw('texte21f935f11d7') })] }))] }), deliveryStatus] }));
+}
+// ============================================================================
+// Inline edit-from-here editor
+// ============================================================================
+/**
+ * The full-width editor that REPLACES the bubble while an edit-from-here is
+ * being composed — the ChatGPT pattern. It replaced a `ConfirmDialog`: the
+ * dialog made the user confirm an abstract "rewind" before they had typed
+ * anything, when the real decision point is Send. Cancel restores the bubble
+ * untouched; nothing has happened yet, so there is nothing to confirm.
+ *
+ * Send is the commit: the parent stages the session rewind and delivers the
+ * edited text as the replacement prompt, which is what truncates every turn
+ * below this message.
+ *
+ * The surface is `BUBBLE_SURFACE` stretched to the full column width, so the
+ * bubble reads as "opening up" into its editable form rather than being
+ * swapped for foreign chrome. `select-text` overrides the surface's
+ * `select-none` — this is now an input, not a transcript artifact.
+ */
+export function UserMessageEditor({ initialText, attachments = [], pending, onCancel, onSend, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [draft, setDraft] = useState(initialText);
+    const [kept, setKept] = useState(attachments);
+    const editorRef = useRef(null);
+    // Text is required, attachments or not: a text-less replacement prompt does
+    // not commit the staged rewind, so the original turn would stay (KRTX-962).
+    const canSend = Boolean(draft.trim()) && !pending;
+    // Focus with the caret at the END on mount — autofocus alone puts it at the
+    // start, and an edit almost always continues the sentence.
+    useEffect(() => {
+        const el = editorRef.current;
+        if (!el)
+            return;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+    }, []);
+    // Grow with the content. `height = auto` first so the textarea can also
+    // SHRINK when lines are deleted — scrollHeight never reports smaller than
+    // the current box. The class caps it at 50vh and scrolls from there.
+    useEffect(() => {
+        const el = editorRef.current;
+        if (!el)
+            return;
+        el.style.height = 'auto';
+        el.style.height = `${el.scrollHeight}px`;
+    }, [draft]);
+    return (_jsxs("div", { className: cn(BUBBLE_SURFACE, 'w-full gap-2 py-3 select-text'), children: [kept.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2", children: kept.map((file) => (_jsx("li", { className: "contents", children: _jsxs("div", { className: "group relative", children: [file.pasted ? (_jsx(AttachmentTile, { filename: file.filename, preview: file.pasted.text.slice(0, PASTE_PREVIEW_CHARS) })) : isImageAttachment(file) ? (_jsx(AttachmentImage, { file: file })) : (_jsx(AttachmentTile, { filename: file.filename, mime: file.mime })), !pending && (_jsx(AttachmentRemoveButton, { filename: file.pasted ? 'pasted text' : file.filename, onRemove: () => setKept((all) => all.filter((f) => f.key !== file.key)) }))] }) }, file.key))) })), _jsx("textarea", { ref: editorRef, value: draft, onChange: (e) => setDraft(e.target.value), onKeyDown: (e) => {
+                    if (e.key === 'Escape' && !pending) {
+                        e.preventDefault();
+                        onCancel();
+                        return;
+                    }
+                    // Same contract as the composer: Enter sends, Shift+Enter breaks the
+                    // line. The IME guard keeps a Japanese/Chinese conversion commit
+                    // from firing the send.
+                    if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
+                        e.preventDefault();
+                        if (canSend)
+                            onSend(draft, kept);
+                    }
+                }, "aria-label": tI18nComplete.raw('text9757ccd5ef12'), className: cn(BUBBLE_TEXT, 'max-h-[50vh] w-full resize-none overflow-y-auto bg-transparent outline-none') }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "secondary", size: "sm", disabled: pending, onClick: onCancel, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "button", size: "sm", disabled: !canSend, onClick: () => canSend && onSend(draft, kept), children: [pending && _jsx(Loading, { variant: "spokes", className: "size-3.5 shrink-0" }), tI18nComplete.raw('textf6f4688ff23d')] })] })] }));
+}
+// ============================================================================
+// User Message
+// ============================================================================
+/** The message's own text blocks, joined: what the edit-from-here editor starts from. */
+function messagePromptText(blocks) {
+    const lines = [];
+    for (const block of blocks) {
+        const blockText = visibleText(block);
+        if (blockText === undefined)
+            continue;
+        const stripped = stripSystemPtyText(blockText);
+        if (stripped.trim())
+            lines.push(stripped);
+    }
+    return lines.join('\n').trim();
+}
+/** What "Copy message" copies: the prompt with each paste as its text, not its XML. */
+export function userMessageCopyText(blocks) {
+    return expandPastedContent(messagePromptText(blocks));
+}
+export function UserMessage({ message, author, showAuthor, agentNames, commandInfo, commands, sessionId, ownsPlan, onRewind, rewindDisabled = false, editingText, editPending, onEditCancel, onEditSend, deliveryStatus, pendingAttachments, uploadStatus, pendingText, onOpenPastedContent, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const openFileInComputer = useKortixComputerStore((s) => s.openFileInComputer);
+    // Extract visible text and file references in original block order. This must
+    // keep the source block index because a later native file cannot move ahead
+    // of workspace references that appeared in earlier text blocks.
+    const { rawText, textAfterFiles, quotes, uploads: uploadedFiles, pastes: partPastes, } = useMemo(() => parseAttachmentContent(message.blocks), [message.blocks]);
+    const { cleanText: textAfterProjects } = useMemo(() => parseProjectReferences(textAfterFiles), [textAfterFiles]);
+    const { cleanText: textAfterFileMentions, files: fileMentionRefs } = useMemo(() => parseFileMentionReferences(textAfterProjects), [textAfterProjects]);
+    const { cleanText: textAfterAgentMentions, agents: agentMentionRefs } = useMemo(() => parseAgentMentionReferences(textAfterFileMentions), [textAfterFileMentions]);
+    const { cleanText: textAfterSessions, sessions: sessionRefs } = useMemo(() => parseSessionReferences(textAfterAgentMentions), [textAfterAgentMentions]);
+    // System notification XML — parsed LAST so all other XML subsystems
+    // (file refs, session refs, reply context, etc.) consume their tags first.
+    // Whatever XML blocks remain are system notifications.
+    const { cleanText: text, notifications: systemNotifications } = useMemo(() => parseSystemNotifications(textAfterSessions), [textAfterSessions]);
+    // Silence unused-variable warnings — these parsed refs are currently only
+    // consumed as stripping side-effects.
+    void fileMentionRefs;
+    void agentMentionRefs;
+    // Both attachment routes, drawn as one strip. `uploadedFiles` used to be
+    // parsed and then discarded — see `normalizeAttachments`.
+    const fileAttachments = useMemo(() => mergeSentAttachments(normalizeAttachments(message.blocks, uploadedFiles), pendingAttachments), [message.blocks, uploadedFiles, pendingAttachments]);
+    /**
+     * Whether THIS turn draws the plan.
+     *
+     * `ownsPlan` alone is not the answer: `planAnchorMessageId` falls back to the
+     * last turn when no turn ever wrote todos, so a session with zero todos still
+     * nominates an owner. (It is also already false on every turn while the Easy
+     * panel is drawing the plan — see `chatPlanAnchorId`.) `useHasPlan` is the
+     * second half — it asks the runtime
+     * whether a plan exists at all, on the same query key the `todo.updated` SSE
+     * event writes, so the card appears the moment the agent writes its first
+     * todo and never appears for a session that has none.
+     *
+     * The bubble itself hugs its text either way; only the column cap moves.
+     */
+    // Called UNCONDITIONALLY. `ownsPlan && useHasPlan(...)` short-circuits, so
+    // the hook would go uncalled whenever `ownsPlan` is false — and the anchor
+    // moves between turns as the agent re-plans, so React would see the hook
+    // count change on a live component. Read first, combine second.
+    const hasPlan = useHasPlan(sessionId);
+    const showPlan = ownsPlan && hasPlan;
+    // Resolve effective command info: use runtime-tracked info or fall back to template matching
+    const effectiveCommandInfo = useMemo(
+    // `rawText` has the typed tags restored for display. The args are split for
+    // pastes again below, so they go back to the wire form first: a typed
+    // `<pasted_content>` must never parse as a tile.
+    () => commandInfo ?? detectCommandFromText(neutralizePastedTags(rawText), commands), [commandInfo, rawText, commands]);
+    /**
+     * What the bubble actually says.
+     *
+     * For a command message that is the command's ARGUMENTS, not `text` — a
+     * command's `text` is the fully expanded template the runtime sent (often
+     * the whole `.md` file), which is exactly why `detectCommandFromText`
+     * extracts args in the first place. The command itself is drawn as a chip
+     * ahead of this, matching the composer, where the chip contributes no text
+     * of its own and the rest of the line IS the args (`editor/serialize.ts`).
+     *
+     * Declared here, above the overflow-measuring effect that lists it as a
+     * dependency — a `const` read from a dependency array before its own
+     * initializer runs is a TDZ throw, not a stale value.
+     */
+    // The composer writes a command's pastes into its args and `split.before`
+    // (`planDraftSubmission`), so both halves lose their blocks here.
+    const commandSplit = commandInfo?.split;
+    const commandBefore = useMemo(() => splitPastedContent(commandSplit?.before ?? ''), [commandSplit?.before]);
+    const commandArgs = useMemo(() => splitPastedContent(effectiveCommandInfo?.args ?? ''), [effectiveCommandInfo?.args]);
+    const bodyText = effectiveCommandInfo
+        ? commandSplit
+            ? commandSplit.after
+            : commandArgs.text
+        : // While this message has no text part of its own (the store is swapping
+            // in the runtime's echo), the sender's copy keeps the bubble on screen.
+            text || (pendingText ?? '');
+    // Pastes lead the strip, as in the composer. A command carries each one up to
+    // three times (template, args, `split.before`): one tile per paste id.
+    const allAttachments = useMemo(() => {
+        const seen = new Set();
+        const pastes = [...partPastes, ...commandBefore.pastes, ...commandArgs.pastes].filter((paste) => {
+            if (seen.has(paste.id))
+                return false;
+            seen.add(paste.id);
+            return true;
+        });
+        return pastes.length > 0 ? [...pastes.map(pastedAttachment), ...fileAttachments] : fileAttachments;
+    }, [partPastes, commandBefore.pastes, commandArgs.pastes, fileAttachments]);
+    const promptText = useMemo(() => messagePromptText(message.blocks), [message.blocks]);
+    const copyText = useMemo(() => expandPastedContent(promptText), [promptText]);
+    const rewindPromptText = useMemo(() => {
+        return editablePromptText(promptText, effectiveCommandInfo);
+    }, [promptText, effectiveCommandInfo]);
+    // Detect a channel message (Slack / Microsoft Teams / Telegram): the API
+    // scaffolds these prompts with ids and turn instructions the person never
+    // typed, so the card shows only the platform, the sender, and their words.
+    const channelMessageInfo = useMemo(() => parseChannelMessage(rawText), [rawText]);
+    // Detect trigger_event in user message
+    const triggerEventInfo = useMemo(() => parseTriggerEvent(rawText), [rawText]);
+    // A reminder fire: platform-written `[REMINDER …]` header + the reminder text.
+    const reminderInfo = useMemo(() => parseReminderPrompt(rawText), [rawText]);
+    // A room message (flag `agent_rooms`): `[room <name> · #<seq> · from …]` or `[direct message · …]`.
+    const roomInfo = useMemo(() => parseRoomPrompt(rawText), [rawText]);
+    // A batched digest of room traffic: `[room <name> · #a–#b · N new messages]`.
+    const roomDigestInfo = useMemo(() => parseRoomDigest(rawText), [rawText]);
+    // `messageCreatedAt`'s rule on the record's ISO time: a missing or non-positive time is no time.
+    const createdAt = Date.parse(message.created_at);
+    // Built once and rendered by every branch below — channel card, trigger card,
+    // command card, bubble — so all four carry the same meta line.
+    //
+    // `copyText` is gated on `onRewind` to keep the buttons exactly as they were:
+    // a read-only turn shows no controls. The row itself still renders, because
+    // the timestamp is meta, not a control, and should not vanish with them.
+    const actions = (_jsx(UserMessageActions, { timestamp: Number.isFinite(createdAt) && createdAt > 0 ? createdAt : null, copyText: copyText && onRewind ? copyText : undefined, messageId: message.message_id, rewindPromptText: rewindPromptText, onRewind: onRewind, rewindDisabled: rewindDisabled, deliveryStatus: deliveryStatus }));
+    const [expanded, setExpanded] = useState(false);
+    const [canExpand, setCanExpand] = useState(false);
+    const textRef = useRef(null);
+    // Use ResizeObserver + rAF to reliably detect overflow after layout settles
+    useEffect(() => {
+        const el = textRef.current;
+        if (!el || expanded)
+            return;
+        const measure = () => {
+            setCanExpand(el.scrollHeight > el.clientHeight + 2);
+        };
+        // Measure after next frame to ensure layout is computed
+        const rafId = requestAnimationFrame(measure);
+        // Also observe resize changes (font loads, container resize, etc.)
+        const ro = new ResizeObserver(measure);
+        ro.observe(el);
+        return () => {
+            cancelAnimationFrame(rafId);
+            ro.disconnect();
+        };
+    }, [bodyText, expanded]);
+    /**
+     * Server-located mention spans. Deliberately dropped for a command message:
+     * these offsets index the full template text, and `bodyText` is a slice of
+     * it, so they would point at the wrong characters. The regex fill in
+     * `buildMentionSegments` covers the args either way.
+     */
+    // Agent mention spans only. A file mention's span is not read: the v1 render
+    // never reached one (every file part went to the attachment strip), so the
+    // regex fill in `buildMentionSegments` draws file chips.
+    const sourceRefs = useMemo(() => {
+        if (effectiveCommandInfo)
+            return [];
+        return message.blocks.flatMap((block) => {
+            if (block.type !== 'harness' || block.kind !== 'agent')
+                return [];
+            const source = block.data.source;
+            return source?.start !== undefined && source?.end !== undefined
+                ? [{ start: source.start, end: source.end, type: 'agent' }]
+                : [];
+        });
+    }, [effectiveCommandInfo, message.blocks]);
+    const sessionTitles = useMemo(() => sessionRefs.map((s) => s.title), [sessionRefs]);
+    // Build highlighted text segments — see `../thread/mention-segments.ts`. The walk
+    // used to live inline here and in `optimistic-turn.tsx`, and the two copies
+    // had already diverged.
+    const segments = useMemo(() => keyMentionSegments(buildMentionSegments({
+        text: bodyText,
+        sourceRefs,
+        sessionTitles,
+        agentNames,
+    })), [bodyText, sourceRefs, sessionTitles, agentNames]);
+    /**
+     * The body split at its reply quotes, or `null` for a message without any —
+     * that message keeps the single-run render below, unchanged.
+     *
+     * A quoted message drops `sourceRefs`, for the reason a command message
+     * does: the server's offsets index the raw part text, and every stripped
+     * block (a quote most of all) moved the characters under them. Each text
+     * run gets the regex fill in `buildMentionSegments`, which finds the same
+     * `@` mentions from the run's own text.
+     *
+     * A command message is parsed from its own halves, not from the part text:
+     * the composer writes its quotes into the args and into `split.before`, as
+     * raw `<reply_context>` blocks ahead of the chip (older messages can hold
+     * them on either side). The part text is
+     * the expanded template, which repeats the args — so the part's `quotes`
+     * are ignored here, or every quote would draw twice. `COMMAND_SLOT` marks
+     * where the chip goes between the two halves.
+     */
+    const quotedPieces = useMemo(() => {
+        if (effectiveCommandInfo) {
+            const before = parseReplyContexts(commandBefore.text);
+            const after = parseReplyContexts(bodyText);
+            if (before.quotes.length === 0 && after.quotes.length === 0)
+                return null;
+            return splitAtQuoteMarkers(before.cleanText + COMMAND_SLOT + offsetQuoteMarkers(after.cleanText, before.quotes.length), [...before.quotes, ...after.quotes]);
+        }
+        if (quotes.length === 0)
+            return null;
+        return splitAtQuoteMarkers(bodyText, quotes);
+    }, [quotes, effectiveCommandInfo, commandBefore.text, bodyText]);
+    const sessionHref = useProjectSessionHref();
+    const shallowNavigate = useUiShallowNavigate();
+    const openSessionMention = (raw) => {
+        // `/projects/<id>/sessions/<id>`, not `/sessions/<id>`. The latter is not a
+        // route — the tab stays mounted so the click looks fine, but the URL it
+        // writes into history 404s on reload or Back. See `session-href.ts`.
+        // Direct session ID (ses_...) — navigate without title lookup
+        if (raw.startsWith('ses_')) {
+            const href = sessionHref(raw);
+            if (!href)
+                return;
+            openTabAndNavigate({
+                id: raw,
+                title: tI18nComplete.raw('text6959b4159575'),
+                type: 'session',
+                href,
+            }, undefined, shallowNavigate);
+            return;
+        }
+        const ref = sessionRefs.find((s) => s.title === raw);
+        if (!ref)
+            return;
+        const href = sessionHref(ref.id);
+        if (!href)
+            return;
+        openTabAndNavigate({
+            id: ref.id,
+            title: ref.title || 'Session',
+            type: 'session',
+            href,
+        }, undefined, shallowNavigate);
+    };
+    /* The `/command` chip sits exactly where it was typed — leading the line,
+       between two words, or trailing — because that is where the composer drew
+       it. `split.before` is the prose that preceded the chip; without it every
+       command message rebuilt as `/name` + args and a chip typed mid-sentence
+       silently jumped to the front. */
+    const commandLead = effectiveCommandInfo ? (_jsxs(_Fragment, { children: [commandBefore.text ? _jsxs("span", { children: [commandBefore.text, " "] }) : null, _jsx(MentionChip, { kind: "command", label: effectiveCommandInfo.name }), bodyText ? ' ' : null] })) : null;
+    const renderSegments = (segs) => segs.map((seg) => seg.type === 'file' ? (_jsx(MentionChip, { kind: "file", label: seg.text.replace(/^@/, ''), onClick: () => openFileInComputer(seg.text.replace(/^@/, '')) }, seg.key)) : seg.type === 'session' ? (_jsx(MentionChip, { kind: "session", label: seg.text.replace(/^@/, ''), onClick: () => openSessionMention(seg.text.replace(/^@/, '')) }, seg.key)) : seg.type === 'agent' ? (
+    // Static: an agent is named, not navigable. Same surface,
+    // no press affordance it cannot honour.
+    _jsx(MentionChip, { kind: "agent", label: seg.text.replace(/^@/, '') }, seg.key)) : (_jsx("span", { children: seg.text }, seg.key)));
+    const renderRunSegments = (runText) => renderSegments(keyMentionSegments(buildMentionSegments({ text: runText, sessionTitles, agentNames })));
+    /** One text run of a quoted body. The run holding `COMMAND_SLOT` draws the
+     *  chip there, with the same spacing `commandLead` uses. */
+    const renderQuotedRun = (runText) => {
+        const slot = runText.indexOf(COMMAND_SLOT);
+        if (slot === -1 || !effectiveCommandInfo)
+            return renderRunSegments(runText);
+        const lead = runText.slice(0, slot);
+        const rest = runText.slice(slot + COMMAND_SLOT.length);
+        return (_jsxs(_Fragment, { children: [lead ? _jsxs("span", { children: [lead, " "] }) : null, _jsx(MentionChip, { kind: "command", label: effectiveCommandInfo.name }), rest ? ' ' : null, renderRunSegments(rest)] }));
+    };
+    // Editing replaces the WHOLE message column — bubble, attachments, meta row —
+    // with the full-width editor, ChatGPT-style. Placed after every hook above so
+    // the hook count never changes when editing starts or ends.
+    if (editingText != null && onEditSend && onEditCancel) {
+        return (_jsx(UserMessageEditor, { initialText: editingText, attachments: allAttachments, pending: editPending, onCancel: onEditCancel, onSend: (text, kept) => onEditSend(message.message_id, text, kept) }));
+    }
+    // Channel messages (Slack / Microsoft Teams / Telegram): a branded card with the sender
+    if (channelMessageInfo) {
+        return _jsx(ChannelMessage, { info: channelMessageInfo, actions: actions });
+    }
+    if (reminderInfo) {
+        return _jsx(ReminderMessage, { info: reminderInfo, actions: actions });
+    }
+    if (roomInfo) {
+        return _jsx(RoomMessage, { info: roomInfo, actions: actions });
+    }
+    if (roomDigestInfo) {
+        return _jsx(RoomDigestMessage, { info: roomDigestInfo, actions: actions });
+    }
+    if (triggerEventInfo) {
+        return _jsx(TriggerMessage, { info: triggerEventInfo, actions: actions });
+    }
+    // A `/command` message used to return early here as a bordered card with a
+    // terminal icon and its args in muted 12px underneath. That card was the
+    // whole complaint: the composer draws the command as an inline chip leading
+    // the sentence (`composer/editor/mention-node.ts`), and sending the message
+    // swapped it for different chrome, a different type scale, and — because the
+    // branch returned before the main path — silently dropped the message's
+    // attachments. A command is now just a message whose first token is a chip,
+    // so it falls through to the one bubble below.
+    return (
+    // The whole message is ONE right-aligned column capped at 80%, so the
+    // bubble, its attachments and its actions all hang off the same rail and
+    // wrap against the same edge. The old root was a full-width stretching
+    // column, which is why attachments spanned the transcript on the far left
+    // while the bubble sat right.
+    // A plan is the one thing that overrides the cap: a checklist reads as a
+    // panel, not as something trailing off the end of a sentence.
+    _jsxs("div", { className: cn('ml-auto flex w-full flex-col items-end gap-2 self-end', 
+        // The bubble hugs its own text (`w-fit`), so lifting the cap widens
+        // ONLY the plan card — the message itself does not stretch.
+        showPlan ? 'max-w-full' : 'max-w-[80%]'), children: [showAuthor && author?.kind === 'session' && _jsx(MessageAuthorLabel, { author: author }), (allAttachments.length > 0 || uploadStatus?.state === 'failed') && (_jsx(MessageAttachments, { attachments: allAttachments, status: uploadStatus, onOpenPastedContent: onOpenPastedContent })), systemNotifications.length > 0 && !effectiveCommandInfo && (_jsx("div", { className: "mt-1 flex w-full flex-col gap-1.5", children: withContentKeys(systemNotifications, (n) => `mixed-${n.tag}`).map(({ key, item }) => (_jsx(SystemNotificationCard, { notification: item }, key))) })), (bodyText || quotedPieces || effectiveCommandInfo) && (_jsx(MessageSenderAbove, { sender: showAuthor && author?.kind === 'member' ? author : null, children: _jsx(UserMessageBubble, { tail: showAuthor && author?.kind === 'member', canExpand: canExpand, expanded: expanded, onToggle: () => setExpanded(!expanded), textId: `${message.message_id}-text`, textRef: textRef, quoted: Boolean(quotedPieces), children: quotedPieces ? (_jsx(QuotedMessageBody, { pieces: quotedPieces, renderText: renderQuotedRun })) : ((bodyText || effectiveCommandInfo) && (_jsxs(_Fragment, { children: [commandLead, renderSegments(segments)] }))) }) })), actions, showPlan && (_jsx("div", { className: "w-full", children: _jsx(PlanCard, { sessionId: sessionId }) }))] }));
+}