@kortix/ui 0.14.8 → 0.14.10

package/dist/session/turn/channel-brand.d.ts

@@ -10,13 +10,18 @@ import type { ChannelPlatform } from './channel-message.js';
  * The hues are the platforms' own brand colors, not themeable tokens — which
  * is why they live here as named constants rather than as classes. Slack has
  * none to tint a label with: its mark is four colors and its wordmark is the
- * text color, black or white. It was Material pink (#E91E63).
+ * text color, black or white. It was Material pink (#E91E63). Email is no
+ * brand: its envelope and its label take the text color too.
  */
 export declare const CHANNEL_BRAND_COLOR: Record<ChannelPlatform, string | undefined>;
-/** The platform's own mark, in its brand colors. */
+/**
+ * The platform's own mark, in its brand colors. Email draws the envelope an
+ * email session wears in the sidebar. A platform this build does not know (a
+ * newer `@kortix/shared`) draws a neutral chat glyph, never another brand.
+ */
 export declare function ChannelBrandMark({ platform, className, }: {
     platform: ChannelPlatform;
     className?: string;
 }): import("react").JSX.Element;
-/** The platform's display name; only Teams has a catalog string (its full name). */
+/** The platform's display name: Teams (its full name) and Email have catalog strings, the brands are their own words. */
 export declare function channelPlatformLabel(platform: ChannelPlatform, tI18nComplete: UiTranslator): string;

package/dist/session/turn/channel-brand.js

@@ -1,5 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { ChatCircleIcon } from '@phosphor-icons/react';
+import { Email } from '../../internal/icons/email.js';
 import { MicrosoftTeams } from '../../internal/icons/microsoft-teams.js';
 import { Slack } from '../../internal/icons/slack.js';
 /**
@@ -12,23 +14,37 @@ import { Slack } from '../../internal/icons/slack.js';
  * The hues are the platforms' own brand colors, not themeable tokens — which
  * is why they live here as named constants rather than as classes. Slack has
  * none to tint a label with: its mark is four colors and its wordmark is the
- * text color, black or white. It was Material pink (#E91E63).
+ * text color, black or white. It was Material pink (#E91E63). Email is no
+ * brand: its envelope and its label take the text color too.
  */
 export const CHANNEL_BRAND_COLOR = {
     Telegram: '#29B6F6',
     Slack: undefined,
     Teams: '#5B5FC7',
+    Email: undefined,
 };
 const TELEGRAM_PATH = 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z';
-/** The platform's own mark, in its brand colors. */
+/**
+ * The platform's own mark, in its brand colors. Email draws the envelope an
+ * email session wears in the sidebar. A platform this build does not know (a
+ * newer `@kortix/shared`) draws a neutral chat glyph, never another brand.
+ */
 export function ChannelBrandMark({ platform, className = 'size-3.5 shrink-0', }) {
     if (platform === 'Teams')
         return _jsx(MicrosoftTeams, { className: className });
     if (platform === 'Slack')
         return _jsx(Slack, { className: className });
+    if (platform === 'Email')
+        return _jsx(Email, { className: className });
+    if (platform !== 'Telegram')
+        return _jsx(ChatCircleIcon, { className: className, "aria-hidden": "true" });
     return (_jsx("svg", { className: className, viewBox: "0 0 24 24", fill: CHANNEL_BRAND_COLOR.Telegram, "aria-hidden": "true", children: _jsx("path", { d: TELEGRAM_PATH }) }));
 }
-/** The platform's display name; only Teams has a catalog string (its full name). */
+/** The platform's display name: Teams (its full name) and Email have catalog strings, the brands are their own words. */
 export function channelPlatformLabel(platform, tI18nComplete) {
-    return platform === 'Teams' ? tI18nComplete.raw('texta7b52b269a23') : platform;
+    if (platform === 'Teams')
+        return tI18nComplete.raw('texta7b52b269a23');
+    if (platform === 'Email')
+        return tI18nComplete.raw('text969ccbd3cf63');
+    return platform;
 }

package/dist/session/turn/message-author.d.ts

@@ -44,4 +44,12 @@ export declare function stoppedByName(data: SessionMessageAuthors | undefined, m
 export declare function awaitsAgent(prompt: {
     no_reply?: boolean;
 }): boolean;
+/**
+ * The user messages the viewer may edit and rewind to: their own, with no
+ * other person's message after it (a rewind deletes everything after the
+ * target). An agent's message, or one with no recorded author, belongs to the
+ * thread's starter and never blocks a later rewind. The server applies the same
+ * rule (`rewind-authority.ts`). Null with no viewer id: nothing to filter on.
+ */
+export declare function rewindableMessageIds(messageIds: readonly string[], authors: ReadonlyMap<string, SessionMessageAuthor>, viewerId: string | undefined, starterId: string | null | undefined): Set<string> | null;
 export {};

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

@@ -73,3 +73,27 @@ export function stoppedByName(data, messageId, viewerId) {
 export function awaitsAgent(prompt) {
     return !prompt.no_reply;
 }
+/**
+ * The user messages the viewer may edit and rewind to: their own, with no
+ * other person's message after it (a rewind deletes everything after the
+ * target). An agent's message, or one with no recorded author, belongs to the
+ * thread's starter and never blocks a later rewind. The server applies the same
+ * rule (`rewind-authority.ts`). Null with no viewer id: nothing to filter on.
+ */
+export function rewindableMessageIds(messageIds, authors, viewerId, starterId) {
+    if (viewerId === undefined)
+        return null;
+    const allowed = new Set();
+    for (let i = messageIds.length - 1; i >= 0; i--) {
+        const author = authors.get(messageIds[i]);
+        if (author?.kind === 'member') {
+            if (author.user_id !== viewerId)
+                break;
+            allowed.add(messageIds[i]);
+        }
+        else if (!starterId || starterId === viewerId) {
+            allowed.add(messageIds[i]);
+        }
+    }
+    return allowed;
+}

package/dist/session/turn/message-row.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+/**
+ * A message body's type: the app's default `text-sm` at 500. A row's markdown
+ * answer is set to `text-sm` too (`MessageRow`'s body), so a prompt, its answer
+ * and the channel row of the same prompt read at one size and weight. The 600
+ * name above it, at the same size, carries the row's hierarchy.
+ */
+export declare const MESSAGE_TEXT_CLASS = "text-foreground text-sm leading-relaxed font-medium";
+/**
+ * One message in a channel or a thread: the author's 36px avatar in a fixed
+ * gutter, the name and the time on one baseline, the body under them. The
+ * channel timeline and the thread panel draw every row with it, so a reply
+ * reads the same as the message it answers.
+ *
+ * A `compact` row continues the author's previous message: no avatar, no
+ * name. Its time shows in the gutter on hover, inside the gutter's own width,
+ * so it never touches the body.
+ *
+ * The hover fill is instant: a dense list re-hovers too often to animate.
+ */
+export declare function MessageRow({ avatar, name, time, compact, selected, toolbar, className, children, }: {
+    /** The 36px avatar: `UserAvatar size="lg"` for a person, `EntityAvatar size="lg"` for an agent. */
+    avatar?: ReactNode;
+    name?: ReactNode;
+    /** `label` beside the name; `gutter` (a shorter form) in a compact row's gutter; `title`, the full date, in the hover hint. */
+    time?: {
+        iso: string;
+        label: string;
+        gutter?: string;
+        title: string;
+    } | null;
+    compact?: boolean;
+    selected?: boolean;
+    /** The row's actions, floating at its top-right on hover or keyboard focus. */
+    toolbar?: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The floating action group at a row's top-right. Transparent, not unmounted,
+ * so Tab reaches its buttons and their focus reveals it. `p-[2px]`: the group
+ * is `rounded-lg` (10px), so 2px of inset gives the `rounded-md` (8px)
+ * buttons concentric corners. Its buttons are `icon-sm` (h-7), so the group is
+ * ~32px tall; `-top-3.5` sits it on the row's top edge, half above it.
+ *
+ * A thread's first message is the one row whose overhang is cut off (its turn
+ * paints with `content-visibility: auto`, which clips to the turn): that row
+ * moves the group inside with `[&_[data-slot=row-toolbar]]:top-0.5`.
+ */
+export declare function RowToolbar({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+import Hint from '../../primitives/hint.js';
+/**
+ * A message body's type: the app's default `text-sm` at 500. A row's markdown
+ * answer is set to `text-sm` too (`MessageRow`'s body), so a prompt, its answer
+ * and the channel row of the same prompt read at one size and weight. The 600
+ * name above it, at the same size, carries the row's hierarchy.
+ */
+export const MESSAGE_TEXT_CLASS = 'text-foreground text-sm leading-relaxed font-medium';
+/**
+ * One message in a channel or a thread: the author's 36px avatar in a fixed
+ * gutter, the name and the time on one baseline, the body under them. The
+ * channel timeline and the thread panel draw every row with it, so a reply
+ * reads the same as the message it answers.
+ *
+ * A `compact` row continues the author's previous message: no avatar, no
+ * name. Its time shows in the gutter on hover, inside the gutter's own width,
+ * so it never touches the body.
+ *
+ * The hover fill is instant: a dense list re-hovers too often to animate.
+ */
+export function MessageRow({ avatar, name, time, compact = false, selected = false, toolbar, className, children, }) {
+    return (_jsxs("div", { "data-slot": "message-row", className: cn('group/message hover:bg-hover relative flex gap-2 px-5', 
+        // Baseline: a compact row's gutter time sits on the body's first line.
+        compact ? 'items-baseline py-0.5' : 'items-start pt-2 pb-1.5', selected && 'bg-active hover:bg-active', className), children: [_jsx("div", { className: "w-10 shrink-0 [&_[data-slot=avatar]]:rounded-md [&_[data-slot=avatar]]:after:hidden", children: compact ? (time ? (_jsx(Hint, { label: time.title, side: "top", sideOffset: 6, children: _jsx("time", { dateTime: time.iso, className: "text-muted-foreground invisible block cursor-default text-right text-xs font-normal whitespace-nowrap tabular-nums group-focus-within/message:visible group-hover/message:visible", children: time.gutter ?? time.label }) })) : null) : (avatar) }), _jsxs("div", { className: "min-w-0 flex-1 [&_.kortix-markdown]:text-sm", children: [compact ? null : (_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "text-foreground truncate text-sm font-semibold", children: name }), time ? (
+                            // The full date in the app's tooltip, not the browser's `title`.
+                            _jsx(Hint, { label: time.title, side: "top", sideOffset: 6, children: _jsx("time", { dateTime: time.iso, className: "text-muted-foreground shrink-0 cursor-default text-xs font-normal tabular-nums", children: time.label }) })) : null] })), children] }), toolbar ? _jsx(RowToolbar, { children: toolbar }) : null] }));
+}
+/**
+ * The floating action group at a row's top-right. Transparent, not unmounted,
+ * so Tab reaches its buttons and their focus reveals it. `p-[2px]`: the group
+ * is `rounded-lg` (10px), so 2px of inset gives the `rounded-md` (8px)
+ * buttons concentric corners. Its buttons are `icon-sm` (h-7), so the group is
+ * ~32px tall; `-top-3.5` sits it on the row's top edge, half above it.
+ *
+ * A thread's first message is the one row whose overhang is cut off (its turn
+ * paints with `content-visibility: auto`, which clips to the turn): that row
+ * moves the group inside with `[&_[data-slot=row-toolbar]]:top-0.5`.
+ */
+export function RowToolbar({ children }) {
+    return (_jsx("div", { "data-slot": "row-toolbar", className: "bg-popover pointer-events-none absolute -top-3.5 right-5 z-10 flex items-center rounded-lg border p-[2px] opacity-0 shadow-md group-focus-within/message:pointer-events-auto group-focus-within/message:opacity-100 group-hover/message:pointer-events-auto group-hover/message:opacity-100 has-[[data-state=open]]:pointer-events-auto has-[[data-state=open]]:opacity-100", children: children }));
+}

package/dist/session/turn/plan-anchor.d.ts

@@ -20,7 +20,7 @@
  * is live, and `chatPlanAnchorId` turns this whole module off for the other.
  * See `action-panel/easy/plan-card.tsx`.
  *
- * No React import. Every rule here is unit-tested in plan-anchor.test.ts.
+ * No React import.
  */
 import { type SessionLogTurn } from '@kortix/sdk';
 /**

package/dist/session/turn/plan-anchor.js

@@ -20,7 +20,7 @@
  * is live, and `chatPlanAnchorId` turns this whole module off for the other.
  * See `action-panel/easy/plan-card.tsx`.
  *
- * No React import. Every rule here is unit-tested in plan-anchor.test.ts.
+ * No React import.
  */
 import { shouldShowToolPart, toolKind } from '@kortix/sdk';
 /**

package/dist/session/turn/user-message.d.ts

@@ -29,13 +29,15 @@ export declare function ChannelOrigin({ info, platform }: {
 }): import("react").JSX.Element;
 /**
  * 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`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and 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 declare function ChannelMessage({ info, actions, }: {
+export declare function ChannelMessage({ info, attachments, actions, }: {
     info: ChannelMessageInfo;
+    attachments?: NormalizedAttachment[];
     actions?: React.ReactNode;
 }): import("react").JSX.Element;
 export interface NormalizedAttachment {
@@ -248,7 +250,13 @@ export declare function UserMessageBubble({ canExpand, expanded, onToggle, fullW
  * Shared with `OptimisticTurn` so the pending turn and the server turn cannot
  * drift — the same reason `MessageAttachments` is shared.
  */
-export declare function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, }: {
+export declare function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, toolbar, }: {
+    /**
+     * A message row (`TranscriptRowsContext`): the row's header shows the time,
+     * so the buttons float in its toolbar and only the delivery status stays in
+     * the flow.
+     */
+    toolbar?: boolean;
     /** Epoch milliseconds, or `null` when the backend never stamped one. */
     timestamp: number | null;
     /** Omitted when there is nothing to copy — the row then carries meta alone

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

@@ -6,13 +6,15 @@ 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 { MESSAGE_TEXT_CLASS, RowToolbar } from './message-row.js';
+import { TranscriptRowsContext } from '../thread/transcript-rows.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 { channelPromptTail, isChannelFileLabel, expandPastedContent, neutralizePastedTags, sanitizePromptUploadFilename, serializePromptWithPastes, splitPastedContent, } from '../../_vendor/kortix-shared.js';
+import { useContext, 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';
@@ -97,15 +99,16 @@ export function ChannelOrigin({ info, platform }) {
 }
 /**
  * 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`.
+ * Telegram): a source pill — mark, platform, sender — over the files the
+ * sender sent (the strip a composer upload gets) and 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, }) {
+export function ChannelMessage({ info, attachments = [], 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] }));
+    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 }) }), _jsx(MessageAttachments, { attachments: attachments }), info.messageText && !(attachments.length > 0 && isChannelFileLabel(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
@@ -672,7 +675,7 @@ export function UserMessageBubble({ canExpand, expanded, onToggle, fullWidth, te
  * 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, }) {
+export function UserMessageActions({ timestamp, copyText, messageId, rewindPromptText, onRewind, rewindDisabled, deliveryStatus, toolbar = false, }) {
     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.
@@ -681,6 +684,15 @@ export function UserMessageActions({ timestamp, copyText, messageId, rewindPromp
     // Nothing to say and nothing to do — don't leave an empty row behind.
     if (!hasMeta && !copyText && !deliveryStatus)
         return null;
+    const buttons = 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: toolbar ? 'icon-sm' : 'icon-xs', 
+                    // 24px visible, 40px target — grown with a pseudo-element so the
+                    // dense action row keeps its rhythm.
+                    className: toolbar ? undefined : 'hit-area-2', "aria-label": tI18nComplete.raw('text673d6a594efa'), onClick: () => onRewind?.(messageId, rewindPromptText ?? ''), children: _jsx(PencilSimpleIcon, { weight: "regular", className: cn('text-foreground', toolbar ? 'size-3.5' : 'size-4') }) }) })), _jsx(CopyButton, { code: copyText, size: toolbar ? 'md' : 'sm', 
+                // In a row's toolbar every glyph is 14px (`size-3.5`), the channel row's too.
+                className: toolbar ? 'focus-visible:ring-ring focus-visible:ring-2 [&_svg]:size-3.5!' : undefined, hintSide: "top", label: tI18nComplete.raw('texte21f935f11d7') })] })) : null;
+    if (toolbar) {
+        return (_jsxs(_Fragment, { children: [deliveryStatus, buttons ? _jsx(RowToolbar, { children: buttons }) : 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
@@ -710,10 +722,7 @@ export function UserMessageActions({ timestamp, copyText, messageId, rewindPromp
                 // 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] }));
+                '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 }) })), buttons] }), deliveryStatus] }));
 }
 // ============================================================================
 // Inline edit-from-here editor
@@ -892,6 +901,11 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // 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]);
+    // Its files: the `<file>` tags Kortix wrote after the sender's text, and nothing else. A tag the sender
+    // typed is text; the image block pi records for a tag repeats it, and names no path when the sender typed one.
+    const channelAttachments = useMemo(() => channelMessageInfo
+        ? normalizeAttachments([], parseFileReferences(channelPromptTail(rawText, channelMessageInfo.platform)).files)
+        : [], [channelMessageInfo, rawText]);
     // Detect trigger_event in user message
     const triggerEventInfo = useMemo(() => parseTriggerEvent(rawText), [rawText]);
     // A reminder fire: platform-written `[REMINDER …]` header + the reminder text.
@@ -908,7 +922,8 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // `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 rows = useContext(TranscriptRowsContext) !== null;
+    const actions = (_jsx(UserMessageActions, { toolbar: rows, 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);
@@ -1052,7 +1067,7 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     }
     // Channel messages (Slack / Microsoft Teams / Telegram): a branded card with the sender
     if (channelMessageInfo) {
-        return _jsx(ChannelMessage, { info: channelMessageInfo, actions: actions });
+        return _jsx(ChannelMessage, { info: channelMessageInfo, attachments: channelAttachments, actions: actions });
     }
     if (reminderInfo) {
         return _jsx(ReminderMessage, { info: reminderInfo, actions: actions });
@@ -1074,6 +1089,11 @@ export function UserMessage({ message, author, showAuthor, agentNames, commandIn
     // 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.
+    // A message row: the row draws the author and the time, so the message is
+    // its text, left-aligned and unboxed, with its files under it.
+    if (rows) {
+        return (_jsxs("div", { className: "flex w-full min-w-0 flex-col items-start gap-1.5", children: [(bodyText || quotedPieces || effectiveCommandInfo) && (_jsx("div", { className: cn(MESSAGE_TEXT_CLASS, 'w-full min-w-0 whitespace-pre-wrap wrap-anywhere select-text'), children: quotedPieces ? (_jsx(QuotedMessageBody, { pieces: quotedPieces, renderText: renderQuotedRun })) : (_jsxs(_Fragment, { children: [commandLead, renderSegments(segments)] })) })), (allAttachments.length > 0 || uploadStatus?.state === 'failed') && (_jsx(MessageAttachments, { attachments: allAttachments, status: uploadStatus, onOpenPastedContent: onOpenPastedContent })), systemNotifications.length > 0 && !effectiveCommandInfo && (_jsx("div", { className: "flex w-full flex-col gap-1.5", children: withContentKeys(systemNotifications, (n) => `mixed-${n.tag}`).map(({ key, item }) => (_jsx(SystemNotificationCard, { notification: item }, key))) })), actions] }));
+    }
     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