@oxy.so/bloom 4.19.1 → 4.20.0

package/src/ai-chat/AiChatControls.tsx

@@ -9,9 +9,11 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import type { Props as IconProps } from '../icons/shared';
+import { DISABLED_OPACITY } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useAiChatPlatform } from './context';
 import { dataHook, IS_WEB, type AiChatPalette } from './shared';
+import type { AiChatTurnAction } from './types';
 
 /**
  * The family's small interactive pieces, shared by the message, image, code
@@ -178,6 +180,8 @@ export function SurfaceAction({
   hoverBackground,
   palette,
   glyph,
+  active,
+  disabled = false,
   style,
   testID,
 }: {
@@ -194,11 +198,20 @@ export function SurfaceAction({
   hoverBackground: string;
   palette: AiChatPalette;
   glyph: (color: string) => React.ReactNode;
+  /**
+   * A toggle's state: `true` holds the hover surface and the primary glyph.
+   * Undefined for a plain button, which then carries no pressed state at all.
+   */
+  active?: boolean;
+  disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
+  const isToggle = active !== undefined;
   const tip = useHoverTooltip({ open: tooltipOpen, onOpenChange: onTooltipOpenChange });
-  const [hovered, setHovered] = useState(false);
+  const [hoveredRaw, setHovered] = useState(false);
+  const hovered = hoveredRaw && !disabled;
+  const lit = hovered || active === true;
   // A press focuses the control too; only keyboard focus should raise the tooltip.
   const pointerDown = useRef(false);
   const surface: WebCssStyle = {
@@ -207,7 +220,8 @@ export function SurfaceAction({
     alignItems: 'center',
     padding,
     borderRadius: radius,
-    backgroundColor: hovered ? hoverBackground : background,
+    backgroundColor: lit ? hoverBackground : background,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-ai-chat-ring': palette.ring,
   };
   return (
@@ -217,6 +231,12 @@ export function SurfaceAction({
         testID={testID}
         accessibilityRole="button"
         accessibilityLabel={label}
+        // BOTH spellings of the toggle state: react-native-web drops
+        // `accessibilityState` and React Native has no `aria-pressed`.
+        {...(isToggle ? { 'aria-pressed': active } : null)}
+        accessibilityState={{ disabled, ...(isToggle ? { selected: active } : null) }}
+        aria-disabled={disabled || undefined}
+        disabled={disabled}
         onPressIn={() => {
           pointerDown.current = true;
           tip.onHoverOut();
@@ -238,8 +258,43 @@ export function SurfaceAction({
         }}
         onBlur={() => tip.setOpen(false)}
         style={[surface, style]}>
-        {glyph(hovered ? palette.iconPrimary : palette.iconSecondary)}
+        {glyph(lit ? palette.iconPrimary : palette.iconSecondary)}
       </Pressable>
     </WithTooltip>
   );
 }
+
+/** The feedback row's button surface: 28 square, radius 8, p 6, tertiary → secondary-hover. */
+export function turnActionSurface(palette: AiChatPalette) {
+  return {
+    padding: 6,
+    radius: 8,
+    background: palette.tertiary,
+    hoverBackground: palette.secondaryHover,
+    palette,
+  };
+}
+
+/** One caller-supplied turn action, drawn as a feedback-row button. */
+export function TurnActionButton({
+  action,
+  palette,
+  testID,
+}: {
+  action: AiChatTurnAction;
+  palette: AiChatPalette;
+  testID?: string;
+}) {
+  const Icon = action.icon;
+  return (
+    <SurfaceAction
+      {...turnActionSurface(palette)}
+      testID={testID ? `${testID}-${action.key}` : undefined}
+      label={action.label}
+      onPress={action.onPress}
+      active={action.active}
+      disabled={action.disabled}
+      glyph={(color) => <Icon width={16} height={16} fill={color} />}
+    />
+  );
+}

package/src/ai-chat/AiChatFeedbackRowBase.tsx

@@ -5,9 +5,9 @@ import { RiCheckLine } from '../icons/remix/RiCheckLine';
 import { RiFileCopyLine } from '../icons/remix/RiFileCopyLine';
 import { RiThumbDownLine } from '../icons/remix/RiThumbDownLine';
 import { RiThumbUpLine } from '../icons/remix/RiThumbUpLine';
-import { SurfaceAction, SwapGlyph } from './AiChatControls';
+import { SurfaceAction, SwapGlyph, TurnActionButton, turnActionSurface } from './AiChatControls';
 import { CONFIRM_MS, useAiChatPalette, useAiChatWebCss } from './shared';
-import type { AiChatFeedbackRowProps } from './types';
+import type { AiChatCopyResult, AiChatFeedbackRowProps } from './types';
 
 const DEFAULT_LABELS = {
   like: 'Good response',
@@ -26,9 +26,12 @@ const DEFAULT_LABELS = {
  *   tooltip  a `sm` tooltip above, after a 200ms hover
  *   copy     the copy glyph blurs, scales to 75% and fades out as a check comes
  *            in (200ms ease-out); the tooltip is held open reading "Copied!"
- *            for 1.6s, then dismissed even if the pointer is still over it
+ *            for 1.6s, then dismissed even if the pointer is still over it — once
+ *            the copy HAPPENED: an async handler is waited for, and a `false`,
+ *            a throw or a rejection shows nothing
+ *   actions  the caller's extra buttons after copy, on the same surface
  */
-export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style, testID }: AiChatFeedbackRowProps) {
+export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, actions, labels, style, testID }: AiChatFeedbackRowProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
   const l = useMemo(() => ({ ...DEFAULT_LABELS, ...labels }), [labels]);
@@ -36,16 +39,20 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
   const [copyTooltipOpen, setCopyTooltipOpen] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  useEffect(
-    () => () => {
+  // The latest press: a slower, earlier copy settling late must not confirm.
+  const attempt = useRef(0);
+  const mounted = useRef(true);
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
       if (timer.current) clearTimeout(timer.current);
-    },
-    [],
-  );
+    };
+  }, []);
 
-  const copy = () => {
+  const confirm = () => {
     if (timer.current) clearTimeout(timer.current);
-    onCopy?.();
     setCopied(true);
     setCopyTooltipOpen(true);
     timer.current = setTimeout(() => {
@@ -54,14 +61,28 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
     }, CONFIRM_MS);
   };
 
-  const surface = {
-    padding: 6,
-    radius: 8,
-    background: palette.tertiary,
-    hoverBackground: palette.secondaryHover,
-    palette,
+  const copy = () => {
+    const id = ++attempt.current;
+    let result: AiChatCopyResult;
+    try {
+      result = onCopy?.();
+    } catch {
+      return;
+    }
+    if (isPromiseLike(result)) {
+      result.then(
+        (ok) => {
+          if (ok !== false && mounted.current && id === attempt.current) confirm();
+        },
+        () => undefined,
+      );
+      return;
+    }
+    if (result !== false) confirm();
   };
 
+  const surface = turnActionSurface(palette);
+
   return (
     <View testID={testID} style={[{ flexDirection: 'row', alignItems: 'center', gap: 6 }, style]}>
       <SurfaceAction
@@ -97,6 +118,13 @@ export function AiChatFeedbackRowBase({ onLike, onDislike, onCopy, labels, style
           </View>
         )}
       />
+      {actions?.map((action) => (
+        <TurnActionButton key={action.key} action={action} palette={palette} testID={testID} />
+      ))}
     </View>
   );
 }
+
+function isPromiseLike(value: unknown): value is PromiseLike<void | boolean> {
+  return typeof (value as PromiseLike<unknown> | null | undefined)?.then === 'function';
+}

package/src/ai-chat/AiChatMessages.tsx

@@ -3,6 +3,7 @@ import { View, type LayoutChangeEvent } from 'react-native';
 
 import { RiLinkM } from '../icons/remix/RiLinkM';
 import { Text } from '../typography';
+import { TurnActionButton } from './AiChatControls';
 import { AiChatFeedbackRowBase } from './AiChatFeedbackRowBase';
 import { RevealFade, RevealLine, RevealSequence, useRevealSlot } from './AiChatReveal';
 import { CARD_RADIUS, dataHook, IS_WEB, useAiChatPalette, useAiChatWebCss } from './shared';
@@ -23,6 +24,10 @@ import type {
  *   user       pushed right with a 6px bleed past the column (`-mr-1.5`), hugging
  *              its text up to half the column + 6; radius 16, background-primary,
  *              px 12 / py 11, shadow-card; body-regular text-primary, left-aligned
+ *   actions    under the user card, 8 below it and right-aligned: the feedback
+ *              row's buttons, 6 apart. On a web pointer they fade in (150ms)
+ *              while the turn is hovered or holds focus — opacity only, so they
+ *              stay tabbable and announced; always shown on native and touch
  *   assistant  full width, gap 8, body-regular text-primary; the feedback row last
  *   line       a paragraph; `secondary` tone for status lines
  *   bullets    disc markers outside a 21px indent, items 8 apart
@@ -55,12 +60,13 @@ function asBlocks(children: React.ReactNode): React.ReactNode {
   });
 }
 
-export function AiChatUserMessage({ children, animate = true, style, testID }: AiChatUserMessageProps) {
+export function AiChatUserMessageBase({ children, actions, animate = true, style, testID }: AiChatUserMessageProps) {
   useAiChatWebCss();
   const palette = useAiChatPalette();
   const [column, setColumn] = useState(0);
   return (
     <View
+      {...dataHook('bloomAiChatTurn')}
       testID={testID}
       onLayout={(event: LayoutChangeEvent) => setColumn(event.nativeEvent.layout.width)}
       style={[{ width: '100%', alignItems: 'flex-end' }, style]}>
@@ -80,6 +86,23 @@ export function AiChatUserMessage({ children, animate = true, style, testID }: A
         }}>
         <RevealSequence animate={animate}>{asBlocks(children)}</RevealSequence>
       </RevealFade>
+      {actions && actions.length > 0 ? (
+        <RevealFade animate={animate} style={{ marginTop: 8 }}>
+          <View
+            {...dataHook('bloomAiChatTurnActions')}
+            testID={testID ? `${testID}-actions` : undefined}
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+            {actions.map((action) => (
+              <TurnActionButton
+                key={action.key}
+                action={action}
+                palette={palette}
+                testID={testID ? `${testID}-actions` : undefined}
+              />
+            ))}
+          </View>
+        </RevealFade>
+      ) : null}
     </View>
   );
 }

package/src/ai-chat/bindAiChat.tsx

@@ -4,7 +4,7 @@ import { AiChatContainerBase } from './AiChatContainer';
 import { AiChatFeedbackRowBase } from './AiChatFeedbackRowBase';
 import { AiChatGalleryPanelBase } from './AiChatGalleryPanelBase';
 import { AiChatImageGenerationBase } from './AiChatImageGenerationBase';
-import { AiChatAssistantMessageBase } from './AiChatMessages';
+import { AiChatAssistantMessageBase, AiChatUserMessageBase } from './AiChatMessages';
 import { AiChatPlatformContext, type AiChatPlatform } from './context';
 import type {
   AiChatAssistantMessageProps,
@@ -12,6 +12,7 @@ import type {
   AiChatFeedbackRowProps,
   AiChatGalleryPanelProps,
   AiChatImageGenerationProps,
+  AiChatUserMessageProps,
 } from './types';
 
 /**
@@ -29,6 +30,15 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatFeedbackRow.displayName = 'AiChatFeedbackRow';
 
+  function AiChatUserMessage(props: AiChatUserMessageProps) {
+    return (
+      <AiChatPlatformContext.Provider value={platform}>
+        <AiChatUserMessageBase {...props} />
+      </AiChatPlatformContext.Provider>
+    );
+  }
+  AiChatUserMessage.displayName = 'AiChatUserMessage';
+
   function AiChatAssistantMessage(props: AiChatAssistantMessageProps) {
     return (
       <AiChatPlatformContext.Provider value={platform}>
@@ -65,5 +75,12 @@ export function bindAiChat(platform: AiChatPlatform) {
   }
   AiChatContainer.displayName = 'AiChatContainer';
 
-  return { AiChatFeedbackRow, AiChatAssistantMessage, AiChatImageGeneration, AiChatGalleryPanel, AiChatContainer };
+  return {
+    AiChatFeedbackRow,
+    AiChatUserMessage,
+    AiChatAssistantMessage,
+    AiChatImageGeneration,
+    AiChatGalleryPanel,
+    AiChatContainer,
+  };
 }

package/src/ai-chat/index.ts

@@ -4,6 +4,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -13,7 +14,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -27,6 +27,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -46,5 +47,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/index.web.ts

@@ -9,6 +9,7 @@ export {
   AiChatFeedbackRow,
   AiChatGalleryPanel,
   AiChatImageGeneration,
+  AiChatUserMessage,
 } from './AiChat.web';
 export { AiChatCodePanel } from './AiChatCodePanel';
 export { AiChatThread } from './AiChatContainer';
@@ -18,7 +19,6 @@ export {
   AiChatLinkChip,
   AiChatMessageLine,
   AiChatStrong,
-  AiChatUserMessage,
 } from './AiChatMessages';
 export { AiChatMobileHeader, AiChatResizeHandle, AiChatShell } from './AiChatShell';
 export { useAiChatChromeInsets, useAiChatShell } from './context';
@@ -32,6 +32,7 @@ export type {
   AiChatCodePanelProps,
   AiChatContainerLabels,
   AiChatContainerProps,
+  AiChatCopyResult,
   AiChatFeedbackLabels,
   AiChatFeedbackRowProps,
   AiChatGalleryPanelLabels,
@@ -51,5 +52,6 @@ export type {
   AiChatStrongProps,
   AiChatThreadHandle,
   AiChatThreadProps,
+  AiChatTurnAction,
   AiChatUserMessageProps,
 } from './types';

package/src/ai-chat/shared.ts

@@ -176,7 +176,7 @@ const STYLE_ID = 'bloom-ai-chat-web-css';
  * - the split-flap countdown's two leaves (`flap-fall` / `flap-rise`);
  * - the generated image's feathered radial reveal, a registered `--bloom-ai-reveal`
  *   percentage transitioning 0% → 132% over 1550ms;
- * - the resize grip's hover reveal;
+ * - the resize grip's hover reveal, and a user turn's actions (pointer only);
  * - the composer field's placeholder colour;
  * - a document-scrolled thread out of the browser's scroll anchoring.
  */
@@ -260,6 +260,14 @@ export const AI_CHAT_WEB_CSS = `
 [data-bloom-ai-chat-grip-pill="dragging"] { opacity: 1; }
 [data-bloom-ai-chat-grip] { cursor: col-resize; touch-action: none; outline: none; }
 [data-bloom-ai-chat-dragging="on"] { cursor: col-resize; user-select: none; }
+@media (hover: hover) {
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] {
+    opacity: 0;
+    transition: opacity ${TRANSITION_MS}ms ease;
+  }
+  [data-bloom-ai-chat-turn]:hover [data-bloom-ai-chat-turn-actions],
+  [data-bloom-ai-chat-turn]:focus-within [data-bloom-ai-chat-turn-actions] { opacity: 1; }
+}
 [data-bloom-ai-chat-chip] {
   display: inline-flex;
   max-width: calc(100% - 4px);
@@ -275,7 +283,8 @@ export const AI_CHAT_WEB_CSS = `
   [data-bloom-ai-chat-control],
   [data-bloom-ai-chat-tile] [data-bloom-ai-chat-scrim],
   [data-bloom-ai-chat-tile-image],
-  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill] { transition: none; }
+  [data-bloom-ai-chat-grip] [data-bloom-ai-chat-grip-pill],
+  [data-bloom-ai-chat-turn] [data-bloom-ai-chat-turn-actions] { transition: none; }
   [data-bloom-ai-chat-flap] { animation-duration: 1ms; animation-delay: 0ms; }
 }
 `;

package/src/ai-chat/types.ts

@@ -30,14 +30,47 @@ export interface AiChatFeedbackLabels {
   copied?: string;
 }
 
+/**
+ * What a copy handler reports. `void` (or `true`) is a copy that happened;
+ * `false` is one that did not. A promise is waited for: the confirmation shows
+ * once it resolves, and never if it resolves `false` or rejects.
+ */
+export type AiChatCopyResult = void | boolean | Promise<void | boolean>;
+
+/**
+ * One extra action on a turn — read aloud, regenerate, edit. Drawn with the
+ * feedback row's own button: a 16px glyph on a 28px square, a tooltip naming it.
+ */
+export interface AiChatTurnAction {
+  /** Stable React key, and the suffix of the button's `testID`. */
+  key: string;
+  /** The accessible name, and the tooltip's copy. */
+  label: string;
+  /** A Bloom icon component (`RiVolumeUpLine`, not `<RiVolumeUpLine />`). */
+  icon: AiChatIconComponent;
+  onPress: () => void;
+  /**
+   * Makes the action a TOGGLE (read aloud while it is speaking): `true` paints
+   * the hover surface and the primary glyph, and announces it pressed. Leave it
+   * undefined for a plain button — `false` announces "not pressed".
+   */
+  active?: boolean;
+  /** Dimmed to the shared disabled opacity, unfocusable, announced disabled. */
+  disabled?: boolean;
+}
+
 export interface AiChatFeedbackRowProps {
   onLike?: () => void;
   onDislike?: () => void;
   /**
-   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!" for
-   * 1.6s either way.
+   * Copy handler. The glyph swaps to a check and the tooltip reads "Copied!"
+   * for 1.6s once the copy has happened: at once for a handler that returns
+   * nothing (or `true`), after the promise resolves for an async one, and not
+   * at all when it returns or resolves `false`, throws or rejects.
    */
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
+  /** More buttons after copy, in order — read aloud, regenerate… */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   labels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -50,6 +83,13 @@ export interface AiChatFeedbackRowProps {
 export interface AiChatUserMessageProps {
   /** `AiChatMessageLine`s — or a string, wrapped in one. */
   children: ReactNode;
+  /**
+   * Buttons under the card, right-aligned — copy, edit. On a web pointer they
+   * fade in while the turn is hovered or holds focus; they stay in the tab order
+   * and the accessibility tree throughout, and on native (and touch web) they
+   * are always shown.
+   */
+  actions?: ReadonlyArray<AiChatTurnAction>;
   /** Skip the blur-in (a turn restored from history). Default `true`. */
   animate?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -64,7 +104,7 @@ export interface AiChatAssistantMessageProps {
   children: ReactNode;
   /** The like / dislike / copy row under the reply. Default `true`. */
   feedback?: boolean;
-  /** Feedback handlers and labels. */
+  /** Feedback handlers, extra `actions` and labels. */
   feedbackProps?: Omit<AiChatFeedbackRowProps, 'style' | 'testID'>;
   /** Skip the staggered blur-in. Default `true`. */
   animate?: boolean;
@@ -141,7 +181,7 @@ export interface AiChatImageGenerationProps {
   /** Feedback handlers under the landed image. */
   onLike?: () => void;
   onDislike?: () => void;
-  onCopy?: () => void;
+  onCopy?: () => AiChatCopyResult;
   labels?: AiChatImageGenerationLabels;
   feedbackLabels?: AiChatFeedbackLabels;
   style?: StyleProp<ViewStyle>;

package/src/composer-panel/AttachmentStrip.tsx

@@ -10,6 +10,8 @@ import Animated, {
 import Svg, { Path } from 'react-native-svg';
 
 import { mixColor } from '../button/shared';
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
 import { Text } from '../typography';
 import type { WebCssStyle } from '../styles/web-view-style';
 import {
@@ -101,6 +103,41 @@ function TileDismiss({
   );
 }
 
+/**
+ * A failed tile's retry: a 24px disc on the card surface where the kind glyph
+ * sits (3, 4), a 14px refresh glyph in the error foreground, text-primary on
+ * hover.
+ */
+function TileRetry({ label, onPress, palette }: { label: string; onPress: () => void; palette: ComposerPalette }) {
+  const [hovered, setHovered] = useState(false);
+  const style: WebCssStyle = {
+    position: 'absolute',
+    top: 3,
+    left: 3,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.surface,
+    cursor: 'pointer',
+    '--bloom-composer-ring': palette.focusRing,
+  };
+  return (
+    <Pressable
+      {...dataHook('bloomComposerControl', 'offset')}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      hitSlop={4}
+      style={style}>
+      <RiRefreshLine width={14} height={14} fill={hovered ? palette.text : palette.errorText} />
+    </Pressable>
+  );
+}
+
 /** The upload percentage's box: top 3 / right 3, blurring out as it fades. */
 function percentStyle(inFlight: boolean): WebCssStyle {
   return {
@@ -123,7 +160,9 @@ interface TileProps {
   attachment: ComposerPanelAttachment;
   palette: ComposerPalette;
   onRemove?: () => void;
+  onRetry?: () => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -134,9 +173,23 @@ interface TileProps {
  * percentage (9/16 medium, tabular; white over a photo, accent-500 otherwise)
  * sits at top 3 / right 3; once landed it blurs out as the dismiss blurs in on
  * the same spot.
+ *
+ * A FAILED tile (`error`) drops the ring and percentage and fills with the
+ * error subtle surface under an error-foreground border: the warning glyph (or
+ * the retry button) at (3, 4) and the message in 9/11 medium, two lines at
+ * most, from (5, 30). The dismiss shows as on a landed tile.
  */
-export const AttachmentTile = memo(function AttachmentTile({ attachment, palette, onRemove, removeLabel }: TileProps) {
-  const { progress } = attachment;
+export const AttachmentTile = memo(function AttachmentTile({
+  attachment,
+  palette,
+  onRemove,
+  onRetry,
+  removeLabel,
+  retryLabel,
+}: TileProps) {
+  const { error } = attachment;
+  const failed = !!error;
+  const progress = failed ? undefined : attachment.progress;
   const inFlight = progress !== undefined;
   const image = attachment.kind === 'image' ? attachment.src : undefined;
   const dash = inFlight && progress < 100 ? (Math.max(0, progress) / 100) * TILE_RING_LENGTH : TILE_RING_LENGTH + 2;
@@ -144,8 +197,8 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
 
   return (
     <View
-      accessibilityLabel={attachment.name}
-      {...(IS_WEB ? { title: attachment.name } : {})}
+      accessibilityLabel={failed ? `${attachment.name}: ${error}` : attachment.name}
+      {...(IS_WEB ? { title: failed ? `${attachment.name}: ${error}` : attachment.name } : {})}
       style={{
         position: 'relative',
         width: TILE,
@@ -153,7 +206,7 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         flexShrink: 0,
         borderRadius: TILE_RADIUS,
         borderWidth: 1,
-        borderColor: palette.tileBorder,
+        borderColor: failed ? palette.errorText : palette.tileBorder,
       }}>
       {image ? (
         <View
@@ -196,6 +249,41 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         </View>
       )}
 
+      {failed ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: TILE_RADIUS - 1,
+            backgroundColor: palette.errorSurface,
+          }}>
+          {onRetry ? null : (
+            <View style={{ position: 'absolute', top: 4, left: 3, width: 24, height: 24, alignItems: 'center', justifyContent: 'center' }}>
+              <RiErrorWarningLine width={20} height={20} fill={palette.errorText} />
+            </View>
+          )}
+          <Text
+            numberOfLines={2}
+            style={{
+              position: 'absolute',
+              top: 30,
+              left: 5,
+              right: 5,
+              // 9px has no type-ramp step; spelled out literally.
+              fontSize: 9,
+              lineHeight: 11,
+              fontWeight: '500',
+              color: palette.errorText,
+            }}>
+            {error}
+          </Text>
+          {onRetry ? <TileRetry label={`${retryLabel} ${attachment.name}`} onPress={onRetry} palette={palette} /> : null}
+        </View>
+      ) : null}
+
       {/* Upload ring over the border: the svg spans the border box. */}
       <View
         pointerEvents="none"
@@ -288,7 +376,9 @@ interface StripProps {
   attachments: ReadonlyArray<ComposerPanelAttachment>;
   palette: ComposerPalette;
   onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -296,7 +386,7 @@ interface StripProps {
  * scale 0.8 → 1, fade and un-blur on arrival over 280ms `cubic-bezier(0.22, 1,
  * 0.36, 1)`, and play it backwards on dismissal before leaving the row.
  */
-export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }: StripProps) {
+export function AttachmentStrip({ attachments, palette, onRemove, onRetry, removeLabel, retryLabel }: StripProps) {
   const [leaving, setLeaving] = useState<ReadonlyArray<ComposerPanelAttachment>>([]);
   const previous = useRef(attachments);
 
@@ -330,7 +420,9 @@ export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }:
             attachment={attachment}
             palette={palette}
             removeLabel={removeLabel}
+            retryLabel={retryLabel}
             onRemove={onRemove && !isLeaving ? () => onRemove(attachment.id) : undefined}
+            onRetry={onRetry && !isLeaving ? () => onRetry(attachment.id) : undefined}
           />
         </PresenceTile>
       ))}