@lostgradient/cinder 0.6.0 → 0.8.0

package/src/components/chat/message/chat-message.svelte

@@ -0,0 +1,861 @@
+<script lang="ts" module>
+/**
+ * Role labels for display purposes.
+ * Maps message roles to human-readable labels.
+ */
+export const ROLE_LABELS = {
+    user: 'You',
+    assistant: 'Assistant',
+    system: 'System',
+    developer: 'Developer',
+    'tool-call': 'Tool Call',
+    'tool-result': 'Tool Result',
+    snapshot: 'Snapshot',
+};
+</script>
+
+<script lang="ts">
+import { classNames } from '../../../utilities/class-names.ts';
+import { deriveMessageParts, getMessageText } from '../utilities/utilities.js';
+import Pencil from 'lucide-svelte/icons/pencil';
+import RotateCcw from 'lucide-svelte/icons/rotate-ccw';
+import CopyButton from '../../copy-button/copy-button.svelte';
+import ChatMessagePartsRenderer from './chat-message-parts-renderer.svelte';
+let { message, toolCallPairs = [], expanded = $bindable(true), class: className, searchMatch = false, actions, status, messagePart, showDefaultActions = true, streaming = false, overrideContent, onexpandedchange, onretry, onedit, approvedToolCallIds, deniedToolCallIds, onapprove, ondeny, reasoning, steps, suggestions, reasoningExpanded = false, onreasoning, toolCallExpanded = $bindable(false), ontoolcalltoggle, onsuggestionselect, tabindex, ...rest } = $props();
+// Edit state
+let isEditing = $state(false);
+let editContent = $state('');
+const canEdit = $derived(message.role === 'user' && onedit !== undefined && !streaming);
+function startEditing() {
+    editContent = textContent;
+    isEditing = true;
+}
+function cancelEditing() {
+    isEditing = false;
+    editContent = '';
+}
+function saveEdit() {
+    const trimmedContent = editContent.trim();
+    if (trimmedContent && trimmedContent !== textContent) {
+        onedit?.({ messageId: message.id, content: trimmedContent });
+    }
+    isEditing = false;
+    editContent = '';
+}
+function handleEditKeyDown(event) {
+    if (event.key === 'Escape') {
+        event.preventDefault();
+        cancelEditing();
+    }
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        saveEdit();
+    }
+}
+// Detect failed delivery status from transient metadata
+const deliveryStatus = $derived(message.metadata?.['_deliveryStatus']);
+const isFailed = $derived(deliveryStatus === 'failed');
+// Derived values for content processing. `textContent` drives message chrome
+// (copy, edit, the Show more/less control) — the rendered body itself flows
+// through deriveMessageParts + the parts renderer below.
+const textContent = $derived(getMessageText(message));
+const roleLabel = $derived(ROLE_LABELS[message.role] ?? message.role);
+// Role detection — kept for wrapper-level layout + a11y (data-tool-pair,
+// aria-label). The body branches that used to live here are now derived parts.
+const isToolCall = $derived(message.role === 'tool-call');
+// Find matching tool pair for tool-call messages. Resolved here (the container
+// hands down the pairs for this message) and threaded into deriveMessageParts
+// so the bridge stays pure; also gates the data-tool-pair wrapper styling.
+const toolPair = $derived.by(() => {
+    if (!isToolCall || !message.toolCall)
+        return null;
+    return toolCallPairs.find((pair) => pair.call.id === message.toolCall?.id) ?? null;
+});
+// The cinder-owned render parts for this message. The streaming override and
+// expanded state are resolved into the parts here so the renderer + part
+// components stay dumb (no override/streaming plumbing leaks into them).
+// C3: approval id sets are threaded in so tool-approval parts derive their
+// `approved` state without mutating the transcript.
+const messageParts = $derived(deriveMessageParts(message, {
+    toolCallPair: toolPair ?? undefined,
+    overrideContent,
+    streaming,
+    expanded,
+    approvedToolCallIds,
+    deniedToolCallIds,
+    // C4: reasoning and steps are UI-only overlays derived from metadata or
+    // explicit per-message props; never written back to the transcript.
+    reasoning,
+    steps,
+    // C5: suggestions are UI-only overlays; never written back to the transcript.
+    suggestions,
+}));
+// Whether this message has a markdown body part — gates the Show more/less
+// control (a tool-call/tool-result message has no markdown body to truncate).
+const hasMarkdownBody = $derived(messageParts.some((part) => part.type === 'markdown'));
+// Split the parts so the rendered DOM matches the historical structure: body
+// parts (text/markdown/tool) live inside `.chat-message-body`, image parts
+// render as a sibling AFTER it — exactly where MessageAttachments used to sit,
+// so the flex layout and spacing are unchanged.
+const bodyParts = $derived(messageParts.filter((part) => part.type !== 'image'));
+const imageParts = $derived(messageParts.filter((part) => part.type === 'image'));
+// Content truncation threshold (characters)
+const TRUNCATE_THRESHOLD = 500;
+// Accessibility IDs
+const messageId = $derived(`message-${message.id}`);
+const roleId = $derived(`${messageId}-role`);
+function toggleExpanded() {
+    expanded = !expanded;
+    onexpandedchange?.(expanded);
+}
+// Local fallback so a standalone <ChatMessage> (used outside <Chat>, with no
+// ontoolcalltoggle wired up) still has a working disclosure — mirrors
+// toggleExpanded above. When Chat DOES own this message's disclosure, it
+// passes toolCallExpanded down one-way (not bind:) and reads/writes its own
+// state via ontoolcalltoggle; this local flip is then a harmless echo that
+// gets overwritten by the container's next render. onexpandedchange also
+// fires here (not just ontoolcalltoggle) to preserve the pre-split contract,
+// where a single expanded/onexpandedchange pair covered every disclosure on
+// the message, including tool-call cards.
+function toggleToolCallExpanded() {
+    toolCallExpanded = !toolCallExpanded;
+    ontoolcalltoggle?.();
+    onexpandedchange?.(toolCallExpanded);
+}
+</script>
+
+<div
+  class={classNames('chat-message-wrapper', className)}
+  data-role={message.role}
+  data-hidden={message.hidden || undefined}
+  data-failed={isFailed || undefined}
+  data-search-match={searchMatch || undefined}
+  data-tool-pair={isToolCall && toolPair ? '' : undefined}
+  {...rest}
+>
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <article
+    id={messageId}
+    class="chat-message"
+    aria-labelledby={isToolCall && toolPair ? undefined : roleId}
+    aria-label={isToolCall && toolPair ? `Tool call: ${toolPair.call.name}` : undefined}
+    {tabindex}
+  >
+    <header class="chat-message-header">
+      <span id={roleId} class="chat-message-role">{roleLabel}</span>
+      {#if status}
+        <div class="chat-message-status">
+          {@render status()}
+        </div>
+      {/if}
+    </header>
+
+    <div class="chat-message-body">
+      {#if isEditing}
+        <!-- Edit mode replaces the body parts with a textarea, but attachments
+             stay visible (they were never inside the editable body). -->
+        <div class="chat-message-edit">
+          <!-- svelte-ignore a11y_autofocus -->
+          <textarea
+            class="chat-message-edit-textarea"
+            bind:value={editContent}
+            onkeydown={handleEditKeyDown}
+            autofocus
+            aria-label="Edit message content"
+            rows={Math.min(Math.max(editContent.split('\n').length, 2), 10)}
+          ></textarea>
+          <div class="chat-message-edit-actions">
+            <button type="button" class="chat-message-edit-save" onclick={saveEdit}>
+              Save & Resend
+            </button>
+            <button type="button" class="chat-message-edit-cancel" onclick={cancelEditing}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      {:else}
+        <!-- Replaces the historical role-branch body: every body render shape
+             (tool call, tool result, markdown text) flows through the cinder-
+             owned parts spine. The renderer keeps stable DOM identity across
+             streaming updates via per-part keys, so the markdown body never
+             remounts as its text grows. Image parts render below, as a sibling
+             of this body div, matching the historical structure. -->
+        <ChatMessagePartsRenderer
+          parts={bodyParts}
+          {messagePart}
+          expanded={toolCallExpanded}
+          ontoggle={toggleToolCallExpanded}
+          {onapprove}
+          {ondeny}
+          {reasoningExpanded}
+          {onreasoning}
+          {onsuggestionselect}
+        />
+
+        {#if hasMarkdownBody && textContent.length > TRUNCATE_THRESHOLD}
+          <button type="button" class="chat-message-expand" onclick={toggleExpanded}>
+            {expanded ? 'Show less' : 'Show more'}
+          </button>
+        {/if}
+      {/if}
+    </div>
+
+    {#if imageParts.length > 0}
+      <!-- Images render through the grouped default path (the attachment grid
+           lays out by total count); they do not flow through `messagePart`. -->
+      <ChatMessagePartsRenderer parts={imageParts} />
+    {/if}
+
+    {#if isFailed && onretry}
+      <div class="chat-message-failed-actions">
+        <span class="chat-message-failed-label" role="alert">Failed to send</span>
+        <button type="button" class="chat-message-retry" onclick={() => onretry(message.id)}>
+          <RotateCcw class="cinder-icon-xs" />
+          Retry
+        </button>
+      </div>
+    {/if}
+  </article>
+
+  {#if actions || (showDefaultActions && textContent) || canEdit}
+    <footer class="chat-message-footer" role="none">
+      <div class="chat-message-actions" role="group" aria-label="Message actions">
+        {#if actions}
+          {@render actions()}
+        {/if}
+        {#if showDefaultActions && textContent}
+          <CopyButton
+            value={textContent}
+            label="Copy message"
+            copiedLabel="Copied!"
+            iconOnly
+            confirmDuration={2000}
+            class="chat-message-action-button chat-message-copy"
+          />
+        {/if}
+        {#if canEdit}
+          <button
+            type="button"
+            class="chat-message-action-button chat-message-edit-button"
+            onclick={startEditing}
+            aria-label="Edit message"
+          >
+            <Pencil class="cinder-icon-xs" />
+          </button>
+        {/if}
+      </div>
+    </footer>
+  {/if}
+</div>
+
+<style>
+  /* Wrapper — handles layout positioning, width constraints, and hover delegation.
+   * position: relative anchors the absolutely-positioned action footer below. */
+  .chat-message-wrapper {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: fit-content;
+    /* Cap at 80% of container OR 48rem (768px) for readability on wide screens */
+    max-width: min(80%, 48rem);
+  }
+
+  /* Bubble — visual container for the message content */
+  .chat-message {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-2) var(--cinder-space-3);
+    border-radius: var(--cinder-radius-lg);
+    background: var(--cinder-surface);
+
+    /* Performance: Skip rendering for off-screen messages in long conversations.
+     * content-visibility: auto tells browser to skip layout/paint for off-screen elements.
+     * contain-intrinsic-size: auto <fallback> uses cached height after render, fallback before.
+     *
+     * Trade-off: Before messages are rendered, scrollHeight uses the fallback estimate.
+     * This can affect isAtBottom calculations for variable-height content (images, code blocks).
+     * The 180px fallback is conservative to minimize scroll metric inaccuracy.
+     * Once scrolled into view, actual heights are cached and metrics become accurate. */
+    content-visibility: auto;
+    contain-intrinsic-size: auto 180px;
+  }
+
+  /* Escape hatch for a deliberate programmatic scroll-to-bottom
+     (use-chat-scroll-state.svelte.ts): while `.chat-timeline` carries
+     `data-cinder-force-visible`, every row lays out at its real height up
+     front instead of the 180px estimate above. Without this, off-screen rows
+     resize as they cross into view DURING an animated scrollTo(), which
+     shifts content under a fixed pixel target and reads as a jerk right as
+     the scroll finishes. */
+  :global(.chat-timeline[data-cinder-force-visible]) .chat-message {
+    content-visibility: visible;
+  }
+
+  /* Focus visible style for keyboard navigation */
+  .chat-message:focus {
+    outline: none;
+  }
+
+  .chat-message:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  /* Search match highlight — subtle accent-tinted ring */
+  .chat-message-wrapper[data-search-match] .chat-message {
+    outline: 2px solid color-mix(in oklch, var(--cinder-accent), transparent 40%);
+    outline-offset: 2px;
+    background: color-mix(in oklch, var(--cinder-accent), transparent 92%);
+  }
+
+  /* Role-based alignment (on wrapper) and visual styling (on bubble) */
+  .chat-message-wrapper[data-role='user'] {
+    margin-inline-start: auto;
+    /* Anchor for absolutely-positioned user-message header (see below). */
+    position: relative;
+  }
+
+  .chat-message-wrapper[data-role='user'] .chat-message {
+    /* Distinctive user bubble - subtle blue tint */
+    background: var(
+      --user-message-background,
+      color-mix(in oklch, var(--cinder-accent), transparent 88%)
+    );
+    border-radius: var(--cinder-radius-lg) var(--cinder-radius-lg) var(--cinder-radius-sm)
+      var(--cinder-radius-lg);
+  }
+
+  .chat-message-wrapper[data-role='assistant'] {
+    margin-inline-end: auto;
+  }
+
+  .chat-message-wrapper[data-role='assistant'] .chat-message {
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-lg) var(--cinder-radius-lg) var(--cinder-radius-lg)
+      var(--cinder-radius-sm);
+    box-shadow: var(--cinder-shadow-sm);
+  }
+
+  .chat-message-wrapper[data-role='system'] {
+    margin-inline: auto;
+    max-width: min(90%, 48rem);
+  }
+
+  .chat-message-wrapper[data-role='system'] .chat-message {
+    background: var(--cinder-color-info-bg);
+    color: var(--cinder-color-info-fg);
+    text-align: center;
+  }
+
+  .chat-message-wrapper[data-role='developer'] {
+    margin-inline-end: auto;
+  }
+
+  .chat-message-wrapper[data-role='developer'] .chat-message {
+    background: var(--cinder-color-warning-bg);
+    color: var(--cinder-color-warning-fg);
+  }
+
+  .chat-message-wrapper[data-role='tool-call'],
+  .chat-message-wrapper[data-role='tool-result'] {
+    margin-inline-end: auto;
+    min-width: min(18rem, 100%);
+    max-width: min(100%, 48rem);
+  }
+
+  .chat-message-wrapper[data-role='tool-call'] .chat-message,
+  .chat-message-wrapper[data-role='tool-result'] .chat-message {
+    background: var(--cinder-surface-inset);
+    font-family: var(--cinder-font-mono);
+    font-size: var(--cinder-text-sm);
+  }
+
+  /* When a tool-call has a paired result, ToolCallGroup is the canonical card.
+   * Strip the outer bubble shell (background, border, padding, role label, footer)
+   * so the unified card is the only visible boundary. The wrapper expands
+   * within the same readability cap as regular bubbles — chat bubbles hug
+   * their content, but a tool-call card is structural data that benefits
+   * from horizontal room without stretching across the entire timeline. */
+  .chat-message-wrapper[data-tool-pair] {
+    width: min(80%, 48rem);
+  }
+
+  .chat-message-wrapper[data-tool-pair] .chat-message {
+    background: none;
+    border: none;
+    padding: 0;
+    border-radius: 0;
+    gap: 0;
+    font-family: inherit;
+    font-size: inherit;
+  }
+
+  .chat-message-wrapper[data-tool-pair] .chat-message-header {
+    display: none;
+  }
+
+  .chat-message-wrapper[data-tool-pair] .chat-message-footer {
+    display: none;
+  }
+
+  .chat-message-wrapper[data-role='snapshot'] {
+    margin-inline: auto;
+  }
+
+  .chat-message-wrapper[data-role='snapshot'] .chat-message {
+    background: var(--cinder-surface-inset);
+    opacity: 0.7;
+  }
+
+  .chat-message-wrapper[data-hidden] .chat-message {
+    /* Use visual styling that maintains WCAG AA contrast ratios */
+    border: 1px dashed var(--cinder-border-muted);
+    background: color-mix(in oklch, var(--cinder-surface), var(--cinder-border-muted) 10%);
+  }
+
+  .chat-message-wrapper[data-hidden] .chat-message::before {
+    content: 'Hidden';
+    display: inline-block;
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text-muted);
+    padding: var(--cinder-space-0-5) var(--cinder-space-1);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-border-muted);
+    border-radius: var(--cinder-radius-sm);
+    margin-inline-end: var(--cinder-space-2);
+  }
+
+  /* Header */
+  .chat-message-header {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    flex-wrap: wrap;
+  }
+
+  .chat-message-role {
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--cinder-text-muted);
+  }
+
+  /* Take the header OUT of the bubble's flex flow for user messages so the
+     bubble's row gap is not allocated for an empty header row, which would
+     create visible empty space above the message text. `position: absolute`
+     removes it from the flex axis entirely (flex `gap` applies only to
+     in-flow children) while keeping it in the accessibility tree with its
+     implicit role intact — `display: contents` would strip that role.
+     The role label is already visually hidden via .chat-message-role below;
+     do NOT clip the whole header, or any `status` snippet a consumer passes
+     (e.g. "sending…", "failed") would also disappear. Anchor the header to
+     the bubble's top-right so status content stays visible without
+     displacing the message text. */
+  .chat-message-wrapper[data-role='user'] .chat-message-header {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Hide role label for user messages since alignment makes it clear */
+  .chat-message-wrapper[data-role='user'] .chat-message-role {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .chat-message-status {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+  }
+
+  /* Body */
+  /* Flex column so stacked body parts (e.g. a tool-call card followed by a
+     tool-approval prompt, or a step list + reasoning block + final markdown
+     answer) get visible breathing room between them via `gap`. Without this,
+     parts are plain block children with zero margin and sit flush against
+     each other. */
+  .chat-message-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-3);
+    font-size: var(--cinder-text-base);
+    line-height: 1.6;
+  }
+
+  /* Tool-result body styling moved to tool-result-part.svelte alongside its
+     markup (the parts spine now owns that body shape). */
+
+  .chat-message-expand {
+    /* .chat-message-body is a flex column now (for inter-part gap); without
+       this, the default flex align-items:stretch would balloon this button to
+       the container's full width instead of shrinking to its label. */
+    align-self: flex-start;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-0-5);
+    padding: var(--cinder-space-0-5) var(--cinder-space-1);
+    min-height: var(--cinder-touch-target-min);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-accent-text);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  .chat-message-expand:hover {
+    text-decoration: underline;
+  }
+
+  .chat-message-expand:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  /* Failed message styling */
+  .chat-message-wrapper[data-failed] .chat-message {
+    border: 1px solid var(--cinder-color-danger-border);
+    background: var(--cinder-color-danger-bg);
+  }
+
+  .chat-message-failed-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--cinder-space-2);
+    margin-top: var(--cinder-space-1);
+  }
+
+  .chat-message-failed-label {
+    font-size: var(--cinder-text-xs);
+    color: var(--cinder-danger);
+    font-weight: var(--cinder-font-medium);
+  }
+
+  .chat-message-retry {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cinder-space-1);
+    padding: var(--cinder-space-0-5) var(--cinder-space-2);
+    min-height: var(--cinder-touch-target-min);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-danger);
+    background: transparent;
+    border: 1px solid var(--cinder-color-danger-border);
+    border-radius: var(--cinder-radius-sm);
+    cursor: pointer;
+    transition:
+      background var(--cinder-duration-fast) var(--cinder-ease-standard),
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .chat-message-retry:hover {
+      background: var(--cinder-color-danger-bg);
+      border-color: var(--cinder-danger);
+    }
+  }
+
+  .chat-message-retry:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  /* Footer — absolutely positioned outside the bubble's flow so revealing it on
+   * hover/focus does not change the bubble's height. Default geometry: below the
+   * bubble at the leading edge, which works for any role. The user/assistant
+   * rules below override this to put the icon beside the bubble on the
+   * center-facing edge. Roles like developer / system / unpaired tool-result
+   * inherit this default and place the footer below the bubble.
+   * LTR-only: the left/right physical properties below assume left-to-right layout.
+   * RTL support is a follow-up that swaps to inset-inline-start/end. */
+  .chat-message-footer {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: max-content;
+    margin-top: var(--cinder-space-1);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  /* User bubbles are right-aligned; copy icon sits to their LEFT (toward chat center).
+   * The footer is anchored to the wrapper's bottom edge AND to the bubble's
+   * outer edge horizontally; the action button inside aligns its own bottom
+   * with the wrapper bottom so it sits flush with the bubble bottom.
+   * padding (not margin) creates a hover bridge so the pointer never leaves a
+   * hovered surface while crossing from bubble to icon. */
+  .chat-message-wrapper[data-role='user'] .chat-message-footer {
+    top: auto;
+    bottom: 0;
+    left: auto;
+    right: 100%;
+    margin-top: 0;
+    display: flex;
+    align-items: flex-end;
+    /* Padding stays physical to match the physical `right: 100%` placement
+       above; the whole block is the LTR-only fast path called out in the
+       comment at the top of this section. */
+    /* stylelint-disable-next-line csstools/use-logical */
+    padding-right: var(--cinder-space-1);
+  }
+
+  /* Assistant bubbles are left-aligned; copy icon sits to their RIGHT. */
+  .chat-message-wrapper[data-role='assistant'] .chat-message-footer {
+    top: auto;
+    bottom: 0;
+    left: 100%;
+    right: auto;
+    margin-top: 0;
+    display: flex;
+    align-items: flex-end;
+    /* stylelint-disable-next-line csstools/use-logical */
+    padding-left: var(--cinder-space-1);
+  }
+
+  .chat-message-wrapper:hover .chat-message-footer,
+  .chat-message-wrapper:focus-within .chat-message-footer {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .chat-message-actions {
+    display: flex;
+    gap: var(--cinder-space-1);
+  }
+
+  /* Narrow viewports: every role falls back to below-bubble where horizontal
+   * space is tight. Each selector explicitly matches the same specificity as
+   * the role-specific desktop rules above ([data-role='…'] = 0-1-1), so the
+   * media query actually wins inside its breakpoint. */
+  @media (max-width: 480px) {
+    .chat-message-wrapper[data-role='user'] .chat-message-footer,
+    .chat-message-wrapper[data-role='assistant'] .chat-message-footer,
+    .chat-message-wrapper[data-role='system'] .chat-message-footer,
+    .chat-message-wrapper[data-role='developer'] .chat-message-footer,
+    .chat-message-wrapper[data-role='tool-call'] .chat-message-footer,
+    .chat-message-wrapper[data-role='tool-result'] .chat-message-footer,
+    .chat-message-wrapper[data-role='snapshot'] .chat-message-footer {
+      top: 100%;
+      inset-inline-start: 0;
+      inset-inline-end: auto;
+      transform: none;
+      padding-inline: 0;
+      margin-top: var(--cinder-space-1);
+    }
+  }
+
+  /* Touch devices: always show actions */
+  @media (hover: none) or (pointer: coarse) {
+    .chat-message-footer {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  /* Shared base for the built-in copy and edit action buttons — small
+   * icon-only affordances. The icon size comes from the `cinder-icon-xs` class on the
+   * SVG (defined in styles/utilities.css). A transparent border reserves layout
+   * space so the touch-context border swap below does not shift the icon.
+   *
+   * These rules use :global() because the copy button is rendered by the
+   * CopyButton child component — Svelte's scoped hash would not reach an
+   * element whose <button> lives in a different component's template. The edit
+   * button is still a native button in this template and matches via class
+   * name either way. */
+  :global(.chat-message-action-button) {
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    min-width: var(--cinder-touch-target-min);
+    min-height: var(--cinder-touch-target-min);
+    padding: 0;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: var(--cinder-radius-sm);
+    color: var(--cinder-text-muted);
+    cursor: pointer;
+    transition:
+      color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
+      background var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    :global(.chat-message-action-button:hover) {
+      color: var(--cinder-text);
+      background: var(--cinder-surface-hover);
+    }
+  }
+
+  :global(.chat-message-action-button:focus-visible) {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  /* Touch devices: without hover discoverability, bare icons read as
+   * decoration. Give the action buttons a resting surface + border so they look
+   * tappable. Placed after the base rule so it wins at equal specificity; the
+   * transparent base border reserves the space, so this only swaps color — no
+   * layout shift. */
+  @media (hover: none) or (pointer: coarse) {
+    :global(.chat-message-action-button) {
+      background: var(--cinder-surface-raised);
+      border-color: var(--cinder-border);
+    }
+  }
+
+  /* Copy success state overrides the shared color.
+   * CopyButton uses `data-cinder-copied` when the copy succeeds.
+   * Keep `.chat-message-copy-success` as a selector alias so existing
+   * external callers that target it continue to work. */
+  :global(.chat-message-copy[data-cinder-copied]) {
+    color: var(--cinder-success);
+  }
+
+  /* CopyButton renders cinder-icon-sm (16px) icons by default. Override to cinder-icon-xs
+   * (14px) to match the sibling edit/retry action buttons in the chat footer. */
+  :global(.chat-message-copy svg) {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+
+  @media (hover: hover) {
+    :global(.chat-message-copy[data-cinder-copied]:hover) {
+      color: var(--cinder-color-success-fg);
+      background: var(--cinder-color-success-bg);
+    }
+  }
+
+  /* Edit mode */
+  .chat-message-edit {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cinder-space-2);
+  }
+
+  .chat-message-edit-textarea {
+    width: 100%;
+    padding: var(--cinder-space-2);
+    font-family: inherit;
+    font-size: var(--cinder-text-base);
+    line-height: 1.6;
+    color: var(--cinder-text);
+    background: var(--cinder-surface);
+    border: 1px solid var(--cinder-accent);
+    border-radius: var(--cinder-radius-md);
+    resize: vertical;
+    outline: none;
+  }
+
+  .chat-message-edit-textarea:focus {
+    outline: var(--cinder-ring-width) solid transparent;
+    outline-offset: var(--cinder-ring-offset);
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .chat-message-edit-actions {
+    display: flex;
+    gap: var(--cinder-space-2);
+    align-items: center;
+  }
+
+  .chat-message-edit-save {
+    padding: var(--cinder-space-1) var(--cinder-space-3);
+    min-height: var(--cinder-touch-target-min);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-accent-contrast);
+    background: var(--cinder-accent);
+    border: none;
+    border-radius: var(--cinder-radius-sm);
+    cursor: pointer;
+    transition: background var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .chat-message-edit-save:hover {
+      background: color-mix(in oklch, var(--cinder-accent), black 15%);
+    }
+  }
+
+  .chat-message-edit-save:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  .chat-message-edit-cancel {
+    padding: var(--cinder-space-1) var(--cinder-space-3);
+    min-height: var(--cinder-touch-target-min);
+    font-size: var(--cinder-text-xs);
+    font-weight: var(--cinder-font-medium);
+    color: var(--cinder-text-muted);
+    background: transparent;
+    border: 1px solid var(--cinder-border);
+    border-radius: var(--cinder-radius-sm);
+    cursor: pointer;
+    transition:
+      background var(--cinder-duration-fast) var(--cinder-ease-standard),
+      color var(--cinder-duration-fast) var(--cinder-ease-standard);
+  }
+
+  @media (hover: hover) {
+    .chat-message-edit-cancel:hover {
+      color: var(--cinder-text);
+      background: var(--cinder-surface-hover);
+    }
+  }
+
+  .chat-message-edit-cancel:focus-visible {
+    outline: var(--cinder-ring-width) solid transparent;
+    box-shadow: var(--_cinder-focus-ring-shadow);
+  }
+
+  /* Responsive sizing for narrow viewports */
+  @media (max-width: 480px) {
+    .chat-message-wrapper {
+      /* On narrow screens, allow messages to use more of the width */
+      max-width: 95%;
+    }
+
+    .chat-message {
+      padding: var(--cinder-space-2) var(--cinder-space-3);
+    }
+  }
+
+  /* Forced-colors: box-shadow rings are suppressed in Windows High Contrast Mode,
+     so repaint the reserved transparent outline channel with a system color.
+     Text-entry focus uses Highlight; pressable regions use ButtonText.
+     Placed after the base rules per the focus-ring policy's cascade note. */
+  @media (forced-colors: active) {
+    .chat-message-edit-textarea:focus {
+      outline: var(--cinder-ring-width) solid Highlight;
+      outline-offset: 1px;
+    }
+
+    .chat-message:focus-visible,
+    .chat-message-expand:focus-visible,
+    .chat-message-retry:focus-visible,
+    :global(.chat-message-action-button:focus-visible),
+    .chat-message-edit-save:focus-visible,
+    .chat-message-edit-cancel:focus-visible {
+      outline: var(--cinder-ring-width) solid ButtonText;
+      outline-offset: 3px;
+    }
+  }
+</style>