@marktiderman/genesis-chat 0.2.0 → 0.2.2

package/src/native/__tests__/video-media.test.tsx

@@ -12,8 +12,11 @@ import type { ChatNativeModules } from "../modules";
 import { invertedRows, type ThreadRow } from "../rows";
 import { ChatVideoPlayer, videoState } from "../video-player";
 import { ChatVideoRecorder } from "../video-recorder";
-import { claimPlayback, activePlaybackId, releasePlayback } from "../voice-player";
-import { ChatAttachmentCard, isOpenableHref, splitCardAttachments } from "../attachment-cards";
+import { claimPlayback, activePlaybackId, pauseChatPlayback, releasePlayback } from "../voice-player";
+import { AppState } from "react-native";
+import { inboxRow } from "../inbox-screen";
+import { chatNativeCopy } from "../copy";
+import { attachmentPreview, ChatAttachmentCard, isOpenableHref, messagePreview, splitCardAttachments, type ChatCardContext } from "../attachment-cards";
 import { useChatComposer } from "../use-composer";
 import { createVideoUploads } from "../video-upload";
 import { VideoUploadTray } from "../video-upload-tray";
@@ -51,7 +54,10 @@ function fakeVideo() {
     }),
   };
   const enterFullscreen = vi.fn(async () => undefined);
-  const VideoView = forwardRef<unknown, { testID?: string }>(function VideoView({ testID }, ref) {
+  const view: { props: { onFullscreenEnter?: () => void; onFullscreenExit?: () => void } | null } = { props: null };
+  const VideoView = forwardRef<unknown, { testID?: string; onFullscreenEnter?: () => void; onFullscreenExit?: () => void }>(function VideoView(props, ref) {
+    const { testID } = props;
+    view.props = props;
     useImperativeHandle(ref, () => ({ enterFullscreen }));
     return <div data-testid={testID} />;
   });
@@ -65,7 +71,7 @@ function fakeVideo() {
     }),
     VideoView,
   };
-  return { video: video as unknown as ChatNativeModules["video"], player, enterFullscreen, sources };
+  return { video: video as unknown as ChatNativeModules["video"], player, enterFullscreen, sources, view };
 }
 
 function fakeCamera(granted = true) {
@@ -155,6 +161,44 @@ describe("ChatVideoPlayer", () => {
     expect(screen.getByTestId("v-broken").getAttribute("aria-label")).toBe("This video can't play right now.");
   });
 
+  it("pauses when the app goes to the background, and when it unmounts", () => {
+    const { video, player } = fakeVideo();
+    const view = render(withModules({ video }, <ChatVideoPlayer id="a5" uri="https://x/v.mp4" provider="storage" status="ready" durationMs={3000} testID="v" />));
+    fireEvent.click(screen.getByTestId("v-poster"));
+    expect(player.pause).not.toHaveBeenCalled();
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("inactive"));
+    expect(player.pause).not.toHaveBeenCalled(); // Control Center, a system alert: it plays on
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("background"));
+    expect(player.pause).toHaveBeenCalledTimes(1);
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("active"));
+    view.unmount();
+    expect(player.pause).toHaveBeenCalledTimes(2);
+  });
+
+  it("plays on in full screen, which Android reports as the app going to the background", () => {
+    const { video, player, view } = fakeVideo();
+    render(withModules({ video }, <ChatVideoPlayer id="a7" uri="https://x/v.mp4" provider="storage" status="ready" durationMs={3000} testID="v" />));
+    fireEvent.click(screen.getByTestId("v-poster"));
+    act(() => view.props?.onFullscreenEnter?.());
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("background"));
+    expect(player.pause).not.toHaveBeenCalled();
+    act(() => view.props?.onFullscreenExit?.());
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("background"));
+    expect(player.pause).toHaveBeenCalledTimes(1);
+    act(() => (AppState as unknown as { __emit: (s: string) => void }).__emit("active"));
+  });
+
+  it("is paused by pauseChatPlayback, which leaves another screen's alone", () => {
+    const { video, player } = fakeVideo();
+    render(withModules({ video }, <ChatVideoPlayer id="a6" uri="https://x/v.mp4" provider="storage" status="ready" durationMs={3000} testID="v" />));
+    fireEvent.click(screen.getByTestId("v-poster"));
+    act(() => void pauseChatPlayback(["other"]));
+    expect(player.pause).not.toHaveBeenCalled();
+    act(() => void pauseChatPlayback((id) => id === "a6"));
+    expect(player.pause).toHaveBeenCalledTimes(1);
+    expect(screen.getByTestId("v-play").getAttribute("aria-label")).toBe("Play video");
+  });
+
   it("renders nothing without expo-video (the bubble keeps its row)", () => {
     const { container } = render(<ChatVideoPlayer id="a" uri="https://x" durationMs={1} />);
     expect(container.innerHTML).toBe("");
@@ -319,6 +363,39 @@ describe("the bubble", () => {
     expect(onOpenAttachment).toHaveBeenCalledTimes(2);
   });
 
+  it("tells a kind the card is the sender's own, so it can drop its button there", () => {
+    const checkIn = attachment({ id: "c1", kind: "check_in", provider: "none", providerId: null, status: "ready", ref: {} });
+    const action = vi.fn((_a: ChatAttachment, ctx?: ChatCardContext) => (ctx?.mine ? null : { label: "Answer" }));
+    const subtitle = vi.fn((_a: ChatAttachment, ctx?: ChatCardContext) => (ctx?.mine ? "Sent" : null));
+    const kinds = { check_in: { title: () => "Check-in", subtitle, action } };
+    const theirs = render(withModules({}, <MessageBubble row={row({ attachments: [checkIn] })} me={ME} urls={{}} group={false} reducedMotion attachmentKinds={kinds} onOpenAttachment={vi.fn()} testID="b" />));
+    expect(screen.getByTestId("b-card-0-action").textContent).toBe("Answer");
+    theirs.unmount();
+    render(withModules({}, <MessageBubble row={row({ senderId: ME, attachments: [checkIn] })} me={ME} urls={{}} group={false} reducedMotion attachmentKinds={kinds} onOpenAttachment={vi.fn()} testID="b" />));
+    expect(screen.queryByTestId("b-card-0-action")).toBeNull();
+    expect(screen.getByTestId("b-card-0").textContent).toContain("Sent");
+    expect(screen.getByTestId("b-bubble").getAttribute("data-a11y-actions") ?? "").not.toContain("card-0");
+    expect(action).toHaveBeenLastCalledWith(checkIn, { mine: true });
+  });
+
+  it("previews an app kind by its title, not as Attachment (inbox and the long-press sheet)", () => {
+    const kinds = { check_in: { title: () => "Check-in" } };
+    expect(attachmentPreview("", "check_in", kinds)).toBe("Check-in");
+    expect(attachmentPreview("", "check_in", undefined)).toBe("Attachment");
+    expect(attachmentPreview("how did it go?", "check_in", kinds)).toBe("how did it go?");
+    expect(attachmentPreview("**", "check_in", kinds)).toBe("Check-in"); // only markdown marks: no text
+    expect(attachmentPreview("", "check_in", kinds, true)).toBe("Message deleted");
+    expect(attachmentPreview("", "check_in", { check_in: { title: (a) => `Check-in ${String(a.ref.week)}`, label: "Check-in" } })).toBe("Check-in");
+    expect(attachmentPreview("", "check_in", { check_in: { title: () => { throw new Error("x"); } } })).toBe("Attachment");
+    const m = row({ attachments: [attachment({ id: "c1", kind: "check_in", provider: "none", ref: {} })] }).item;
+    expect(messagePreview((m as { message: ChatMessage }).message, kinds)).toBe("Check-in");
+    const inbox = inboxRow(
+      { conversationId: "c", kind: "direct", title: "Sam", otherUserId: null, unread: 0, mentioned: false, lastMessageAt: null, lastMessage: { id: "m", seq: 1, senderId: SAM, kind: "text", body: "", deleted: false, createdAt: "", attachment: "check_in" } } as never,
+      { me: ME, copy: chatNativeCopy, person: () => undefined, kinds },
+    );
+    expect(inbox.preview).toBe("Check-in");
+  });
+
   it("shows a hosted video still on its way as Processing, not an empty bubble", () => {
     const pending = {
       clientId: "c9", senderId: ME, createdAt: "2026-10-25T10:00:00Z", status: "sending" as const, files: [],

package/src/native/attachment-cards.tsx

@@ -5,12 +5,21 @@
  * button runs the kind's `onPress`; else the app's `onOpenAttachment` (open the form in the
  * app's own screen); else its `href`, when it is https. The bubble offers the same button as
  * a VoiceOver action (`cardAction`), since an accessible bubble hides what is inside it.
+ *
+ * The kind's `title`, `subtitle` and `action` get a second argument, `{ mine }` (`ChatCardContext`):
+ * true on the sender's own card, so a kind can drop its button there (you don't answer your own
+ * check-in). Previews (the inbox, the long-press sheet) name a card by its kind's `label`, else
+ * its title, not "Attachment".
  */
 import { Linking, View } from "react-native";
 import { NativeButton, NativeIcon, NativeText } from "@marktiderman/genesis-ui-native/components";
 import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
 import type { ChatAttachment, ChatMessage } from "../core/types";
-import type { ChatAttachmentKind } from "../react/index";
+import type { ChatAttachmentKind, ChatCardContext } from "../react/index";
+import { attachmentPreview, callAttachmentKind as call, cardTitle, messagePreview } from "../react/previews";
+
+export type { ChatCardContext };
+export { attachmentPreview, cardTitle, messagePreview };
 import { fill } from "./copy";
 import { useChatNative } from "./context";
 import { ON_TINT_FILL, ON_TINT_FILL_STRONG } from "./media-colors";
@@ -42,10 +51,16 @@ export function isOpenableHref(href: string | null | undefined): href is string
 }
 
 /** What a card does: the kind's own handler, else the app's, else an https href; null without a button. */
-export function cardAction(kind: ChatAttachmentKind | undefined, attachment: ChatAttachment, message: ChatMessage, onOpenAttachment?: OpenAttachment): { label: string; run: () => void } | null {
+export function cardAction(
+  kind: ChatAttachmentKind | undefined,
+  attachment: ChatAttachment,
+  message: ChatMessage,
+  onOpenAttachment?: OpenAttachment,
+  ctx: ChatCardContext = { mine: false },
+): { label: string; run: () => void } | null {
   let action: ReturnType<NonNullable<ChatAttachmentKind["action"]>> = null;
   try {
-    action = kind?.action?.(attachment);
+    action = call(kind, "action", attachment, ctx);
   } catch {
     return null;
   }
@@ -70,15 +85,16 @@ export function ChatAttachmentCard({ attachment, message, kind, mine = false, on
   const colors = useThemeRoles();
   let title = "";
   let subtitle: string | null | undefined = null;
+  const ctx: ChatCardContext = { mine };
   try {
-    title = kind.title(attachment);
-    subtitle = kind.subtitle?.(attachment);
+    title = call(kind, "title", attachment, ctx) ?? "";
+    subtitle = call(kind, "subtitle", attachment, ctx);
   } catch (e) {
     // An app's kind that throws shows as a plain card, and says so in development.
     if (typeof __DEV__ !== "undefined" && __DEV__) console.warn(`[genesis-chat] attachment kind "${attachment.kind}" threw:`, e);
   }
   title = title || attachment.name || attachment.kind;
-  const action = cardAction(kind, attachment, message, onOpenAttachment);
+  const action = cardAction(kind, attachment, message, onOpenAttachment, ctx);
   const fg = mine ? "text-primary-foreground" : undefined;
   return (
     <View

package/src/native/inbox-screen.tsx

@@ -9,9 +9,9 @@
 import { useCallback, useMemo, useState } from "react";
 import { NativeAvatar } from "@marktiderman/genesis-ui-native/components";
 import { InboxPage, type InboxItem, type InboxPageProps } from "@marktiderman/genesis-ui-native/layouts";
-import { previewText } from "../core/thread";
 import type { ChatInboxItem } from "../core/types";
-import { chatKeys, useChat, useInbox, usePeople } from "../react/index";
+import { chatKeys, useChat, useInbox, usePeople, type ChatAttachmentKind } from "../react/index";
+import { attachmentPreview } from "./attachment-cards";
 import { useQueryClient } from "@tanstack/react-query";
 import type { ChatNativeCopy } from "./copy";
 import { initials, useChatNative, type ChatPerson } from "./context";
@@ -37,12 +37,18 @@ export interface ChatInboxScreenProps {
 /** An inbox row from a conversation. Exported for apps that build their own list. */
 export function inboxRow(
   item: ChatInboxItem,
-  ctx: { me: string; copy: ChatNativeCopy; person: (id: string | null) => ChatPerson | undefined },
+  ctx: {
+    me: string;
+    copy: ChatNativeCopy;
+    person: (id: string | null) => ChatPerson | undefined;
+    /** The app's attachment kinds: a last message that is a card reads as its title ("Check-in"). */
+    kinds?: Record<string, ChatAttachmentKind>;
+  },
 ): Omit<InboxItem, "onPress" | "swipeActions"> {
   const other = item.otherUserId ? ctx.person(item.otherUserId) : undefined;
   const title = item.title ?? other?.name ?? ctx.copy.untitled;
   const last = item.lastMessage;
-  const text = last ? previewText(displayBody(last.body), last.attachment, last.deleted) : "";
+  const text = last ? attachmentPreview(displayBody(last.body), last.attachment, ctx.kinds, last.deleted) : "";
   const preview = last && text && last.senderId === ctx.me && last.kind !== "system" ? `${ctx.copy.youPrefix}${text}` : text;
   return {
     id: item.conversationId,
@@ -57,7 +63,7 @@ export function inboxRow(
 }
 
 export function ChatInboxScreen({ onOpen, onStart, kind, kinds, excludeKinds, archived, pageProps, testID = "chat-inbox" }: ChatInboxScreenProps) {
-  const { client, userId } = useChat();
+  const { client, userId, attachmentKinds } = useChat();
   const queryClient = useQueryClient();
   const { copy, person: known } = useChatNative();
   const inbox = useInbox({ kind, kinds, excludeKinds, archived });
@@ -82,7 +88,7 @@ export function ChatInboxScreen({ onOpen, onStart, kind, kinds, excludeKinds, ar
   }, [queryClient]);
 
   const items: InboxItem[] = inbox.items.map((item) => ({
-    ...inboxRow(item, { me: userId, copy, person }),
+    ...inboxRow(item, { me: userId, copy, person, kinds: attachmentKinds }),
     onPress: () => onOpen(item.conversationId),
     swipeActions: [
       ...(item.unread > 0 ? [{ id: "read", label: copy.markRead, onPress: () => void client.markRead(item.conversationId).then(settle, settle) }] : []),

package/src/native/index.ts

@@ -32,7 +32,7 @@ export { ChatStartSheet, ChatStartButton, type ChatStartPerson, type ChatStartSh
 export { ChatComposer, type ChatComposerProps } from "./composer";
 export { MessageBubble, displayBody, formatClock, type MessageBubbleProps } from "./message-bubble";
 export { MessageActionsSheet, type MessageActionsSheetProps } from "./message-actions-sheet";
-export { VoiceNotePlayer, claimPlayback, releasePlayback, activePlaybackId, toggleVoiceNote, cycleVoiceNoteRate, usePlayingVoiceNote, scrubSeconds, waveformBars, barsThatFit, type VoiceNotePlayerProps } from "./voice-player";
+export { VoiceNotePlayer, claimPlayback, releasePlayback, pauseChatPlayback, activePlaybackId, toggleVoiceNote, cycleVoiceNoteRate, usePlayingVoiceNote, scrubSeconds, waveformBars, barsThatFit, type VoiceNotePlayerProps } from "./voice-player";
 export { MessageAttachments, attachmentPaths, type BubbleAttachment } from "./media";
 export {
   ChatMediaViewer,
@@ -72,7 +72,7 @@ export { ChatVideoPlayer, videoState, videoSource, muxStreamUrl, muxPosterUrl, t
 export { chunkedPut, fileSource, nextOffset, createVideoUploads, videoUploads, type VideoUploadError, type MintedUpload, useVideoUploads, recordedVideoFile, VIDEO_CHUNK_BYTES, type ByteSource, type ChunkedPutOptions, type RecordedVideo, type VideoUploadTask, type VideoUploads, type StartVideoInput, type OutboxSend } from "./video-upload";
 export { VideoUploadTray, type VideoUploadTrayProps } from "./video-upload-tray";
 export { ChatLinkPreviewCard, previewToShow, linkPreviewIds, openChatLink, linkHost, type ChatLinkPreviewCardProps } from "./link-preview";
-export { ChatAttachmentCard, splitCardAttachments, isOpenableHref, cardAction, type ChatAttachmentCardProps, type OpenAttachment } from "./attachment-cards";
+export { ChatAttachmentCard, splitCardAttachments, isOpenableHref, cardAction, cardTitle, attachmentPreview, messagePreview, type ChatAttachmentCardProps, type ChatCardContext, type OpenAttachment } from "./attachment-cards";
 export { ChatNativeProvider, useChatNative, initials, type ChatNativeProviderProps, type ChatNativeContextValue, type ChatPerson } from "./context";
 export { chatNativeCopy, resolveChatCopy, fill, type ChatNativeCopy, type ChatNativeCopyOverrides } from "./copy";
 export {

package/src/native/message-actions-sheet.tsx

@@ -9,7 +9,9 @@ import { useEffect, useState } from "react";
 import { Alert, Pressable, View } from "react-native";
 import { NativeIcon, NativeListItem, NativeSheet, NativeText, type NativeIconName } from "@marktiderman/genesis-ui-native/components";
 import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
-import { previewText, summarizeReactions } from "../core/thread";
+import { summarizeReactions } from "../core/thread";
+import type { ChatAttachmentKind } from "../react/index";
+import { messagePreview } from "./attachment-cards";
 import type { ChatMessage } from "../core/types";
 import { QUICK_REACTIONS, canReactTo, messageActionsFor, type MessageActionContext, type MessageActionId } from "./actions";
 import { fill } from "./copy";
@@ -22,12 +24,14 @@ export interface MessageActionsSheetProps {
   onClose: () => void;
   onReact: (message: ChatMessage, emoji: string, on: boolean) => void;
   onAction: (message: ChatMessage, action: MessageActionId) => void;
+  /** The app's attachment kinds (`ChatProvider attachmentKinds`): the caption names a card by its title. */
+  attachmentKinds?: Record<string, ChatAttachmentKind>;
   testID?: string;
 }
 
 const ICONS: Record<MessageActionId, NativeIconName> = { reply: "reply", copy: "copy", pin: "pin", unpin: "pin", delete: "trash" };
 
-export function MessageActionsSheet({ message, context, onClose, onReact, onAction, testID = "chat-message-actions" }: MessageActionsSheetProps) {
+export function MessageActionsSheet({ message, context, onClose, onReact, onAction, attachmentKinds, testID = "chat-message-actions" }: MessageActionsSheetProps) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
   const actions = message ? messageActionsFor(message, context) : [];
@@ -67,9 +71,10 @@ export function MessageActionsSheet({ message, context, onClose, onReact, onActi
         />
         </View>
       ) : message ? (
-        <View style={{ gap: 12, paddingBottom: 8, paddingHorizontal: 16 }}>
-          <NativeText numberOfLines={2} preset="body-sm" style={{ color: colors.secondaryLabel, paddingHorizontal: 4 }}>
-            {previewText(message.body, message.attachments[0]?.kind, Boolean(message.deletedAt))}
+        // Room at the top: the iOS page sheet has no grabber, and its rounded corner clipped the caption.
+        <View style={{ gap: 12, paddingTop: 20, paddingBottom: 8, paddingHorizontal: 16 }}>
+          <NativeText testID={`${testID}-caption`} numberOfLines={2} preset="body-sm" style={{ color: colors.secondaryLabel, paddingHorizontal: 4 }}>
+            {messagePreview(message, attachmentKinds)}
           </NativeText>
           {canReactTo(message, context) ? (
             <View accessibilityRole="toolbar" style={{ flexDirection: "row", justifyContent: "space-between" }}>

package/src/native/message-bubble.tsx

@@ -17,7 +17,7 @@ import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
 import { previewText, summarizeReactions } from "../core/thread";
 import type { ChatLinkPreview, ChatMessage, PendingFile } from "../core/types";
 import type { ChatAttachmentKind } from "../react/index";
-import { cardAction, ChatAttachmentCard, splitCardAttachments, type OpenAttachment } from "./attachment-cards";
+import { cardAction, cardTitle, ChatAttachmentCard, splitCardAttachments, type OpenAttachment } from "./attachment-cards";
 import { ChatLinkPreviewCard, linkHost, openChatLink } from "./link-preview";
 import { cycleVideoRate, fullScreenVideo, toggleVideo, toggleVideoMute, usePlayingVideo } from "./video-player";
 import { fill } from "./copy";
@@ -113,7 +113,7 @@ function MessageBubbleImpl(props: MessageBubbleProps) {
   const photos = attachments.filter((a) => a.kind === "image" && a.uri && props.onOpenImage);
   const videos = attachments.filter((a) => a.kind === "video" && modules.video && (a.uri || a.playbackId));
   const playingVideo = usePlayingVideo(videos.map((a) => a.key));
-  const cardActions = message ? cards.map((a) => cardAction(kinds?.[a.kind], a, message, props.onOpenAttachment)) : [];
+  const cardActions = message ? cards.map((a) => cardAction(kinds?.[a.kind], a, message, props.onOpenAttachment, { mine })) : [];
   const playingVoice = usePlayingVoiceNote(voices.map((a) => a.key));
 
   // ---- Swipe to reply ----
@@ -166,7 +166,7 @@ function MessageBubbleImpl(props: MessageBubbleProps) {
     senderName,
     message?.deletedAt ? copy.deleted : displayBody(body),
     attachments.map((a) => (a.kind === "image" ? copy.photo : a.kind === "voice" ? copy.voice : a.kind === "video" ? copy.video : copy.file)).join(", "),
-    cards.map((a) => cardTitle(kinds?.[a.kind], a)).join(", "),
+    cards.map((a) => cardTitle(kinds?.[a.kind], a, { mine })).join(", "),
     preview ? fill(copy.linkPreview, { title: preview.title?.trim() || linkHost(preview.url), site: preview.siteName?.trim() || linkHost(preview.url) }) : null,
     time,
     message?.editedAt ? copy.edited : null,
@@ -362,13 +362,5 @@ function SmallAction({ label, onPress, color, testID }: { label: string; onPress
   );
 }
 
-/** A card's title for the bubble's label (an app kind that throws reads as its name). */
-function cardTitle(kind: ChatAttachmentKind | undefined, a: ChatMessage["attachments"][number]): string {
-  try {
-    return kind?.title(a) || a.name || a.kind;
-  } catch {
-    return a.name || a.kind;
-  }
-}
 
 export const MessageBubble = memo(MessageBubbleImpl);

package/src/native/modules.ts

@@ -201,6 +201,8 @@ export interface ExpoVideoLike {
     contentFit?: "contain" | "cover" | "fill";
     nativeControls?: boolean;
     allowsPictureInPicture?: boolean;
+    onFullscreenEnter?: () => void;
+    onFullscreenExit?: () => void;
     testID?: string;
   }>;
 }

package/src/native/schedule-sheet.tsx

@@ -24,9 +24,9 @@ import {
 } from "@marktiderman/genesis-ui-native/components";
 import { useThemeRoles } from "@marktiderman/genesis-ui-native/hooks";
 import { isSchedulable, scheduleLabel, scheduleQuickPicks } from "../core/extras";
-import { previewText } from "../core/thread";
 import type { ScheduleInput, ScheduledMessage } from "../core/types";
-import { useScheduled } from "../react/index";
+import { useChat, useScheduled, type ChatAttachmentKind } from "../react/index";
+import { attachmentPreview } from "./attachment-cards";
 import { toSend, type ComposerState } from "./composer-state";
 import { haptic } from "./modules";
 import type { ChatComposerHandle } from "./use-composer";
@@ -148,11 +148,7 @@ export function ChatScheduleSheet({ open, onOpenChange, onSchedule, now, testID
   };
 
   return (
-    <NativeSheet
-      open={open}
-      onOpenChange={onOpenChange}
-      testID={testID}
-    >
+    <NativeSheet open={open} onOpenChange={onOpenChange} fitContent testID={testID}>
       <View style={{ paddingVertical: 8 }}>
         <View style={{ paddingHorizontal: 16, paddingBottom: 8, gap: 4 }}>
           <NativeText preset="h4" accessibilityRole="header">
@@ -234,12 +230,30 @@ export function ChatScheduledList({ conversationId, conversationTitle, testID =
   );
 }
 
+/**
+ * Cancel's (or Remove's) label on a scheduled row: the message's text as well as its time, so
+ * each row's button says which message it takes back.
+ */
+export function scheduledActionLabel(
+  item: ScheduledMessage,
+  copy: Pick<ReturnType<typeof useChatNative>["copy"], "scheduledCancel" | "scheduledRemove" | "scheduledFor">,
+  kinds?: Record<string, ChatAttachmentKind>,
+): string {
+  const text = attachmentPreview(displayBody(item.body), item.attachments[0]?.kind ?? null, kinds);
+  // Cut by character, not UTF-16 unit, so an emoji isn't split.
+  const chars = Array.from(text);
+  const short = chars.length > 60 ? `${chars.slice(0, 59).join("")}…` : text;
+  if (item.status === "failed") return [copy.scheduledRemove, short].filter(Boolean).join(", ");
+  return [copy.scheduledCancel, short, fill(copy.scheduledFor, { when: scheduleLabel(item.sendAt) })].filter(Boolean).join(", ");
+}
+
 function ScheduledRow({ item, where, onCancel, testID }: { item: ScheduledMessage; where: string | null; onCancel: () => void; testID: string }) {
   const { copy } = useChatNative();
   const colors = useThemeRoles();
+  const { attachmentKinds } = useChat();
   const failed = item.status === "failed";
   const when = failed ? copy.scheduledCouldntSend : scheduleLabel(item.sendAt);
-  const text = previewText(displayBody(item.body), item.attachments[0]?.kind ?? null);
+  const text = attachmentPreview(displayBody(item.body), item.attachments[0]?.kind ?? null, attachmentKinds);
   return (
     <View testID={testID} style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingLeft: 16, paddingRight: 4, paddingVertical: 8, minHeight: 56 }}>
       <NativeIcon name={failed ? "warning" : "clock"} size={18} color={failed ? colors.destructive : colors.secondaryLabel} />
@@ -261,7 +275,7 @@ function ScheduledRow({ item, where, onCancel, testID }: { item: ScheduledMessag
         <Pressable
           testID={`${testID}-cancel`}
           accessibilityRole="button"
-          accessibilityLabel={failed ? `${copy.scheduledRemove}, ${text}` : `${copy.scheduledCancel}, ${fill(copy.scheduledFor, { when })}`}
+          accessibilityLabel={scheduledActionLabel(item, copy, attachmentKinds)}
           onPress={onCancel}
           style={{ minHeight: 44, minWidth: 44, paddingHorizontal: 12, alignItems: "center", justifyContent: "center" }}
         >

package/src/native/search-screen.tsx

@@ -7,7 +7,7 @@
  * (`ChatThreadScreen jumpTo`, which loads earlier pages until it is there). The same rules as
  * the web's `ChatSearch`.
  */
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import { AccessibilityInfo, FlatList, Pressable, View } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
 import { NativeBadge, NativeEmptyState, NativeIcon, NativeSearchBar, NativeSkeleton, NativeText } from "@marktiderman/genesis-ui-native/components";
@@ -123,12 +123,10 @@ export function ChatSearchScreen({ conversationId, onOpen, conversationTitle, de
             const where = conversationId ? null : fill(copy.searchIn, { name: titleOf(h.conversationId) });
             const when = formatInboxTime(new Date(h.createdAt), now());
             return (
-              <Pressable
+              <HitRow
                 testID={`${testID}-hit-${h.messageId}`}
-                accessibilityRole="button"
                 accessibilityLabel={[who, where, when, h.inTranscript ? copy.transcript : null, snippetText(h.snippet)].filter(Boolean).join(", ")}
                 onPress={() => onOpen(h)}
-                style={({ pressed }: { pressed: boolean }) => ({ minHeight: 56, paddingHorizontal: 16, paddingVertical: 10, gap: 4, backgroundColor: pressed ? colors.fill : "transparent" })}
               >
                 <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
                   <NativeText preset="label" numberOfLines={1} style={{ flexShrink: 1 }}>
@@ -158,7 +156,7 @@ export function ChatSearchScreen({ conversationId, onOpen, conversationTitle, de
                     <SearchSnippet snippet={h.snippet} />
                   </View>
                 </View>
-              </Pressable>
+              </HitRow>
             );
           }}
         />
@@ -166,3 +164,26 @@ export function ChatSearchScreen({ conversationId, onOpen, conversationTitle, de
     </SafeAreaView>
   );
 }
+
+/**
+ * One result's row. A static style, with the pressed state kept here: with a `style` function
+ * the row's padding wasn't applied in the starter on iOS 27 (the name and time touched the
+ * screen's edges).
+ */
+function HitRow({ testID, accessibilityLabel, onPress, children }: { testID: string; accessibilityLabel: string; onPress: () => void; children: ReactNode }) {
+  const colors = useThemeRoles();
+  const [pressed, setPressed] = useState(false);
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={{ minHeight: 56, paddingHorizontal: 16, paddingVertical: 10, gap: 4, backgroundColor: pressed ? colors.fill : "transparent" }}
+    >
+      {children}
+    </Pressable>
+  );
+}

package/src/native/thread-screen.tsx

@@ -52,6 +52,7 @@ import { ChatPhotoViewer, galleryFor, type ChatPhoto } from "./photo-viewer";
 import { MessageActionsSheet } from "./message-actions-sheet";
 import { displayBody, MessageBubble } from "./message-bubble";
 import { haptic } from "./modules";
+import { pauseChatPlayback } from "./voice-player";
 import { buildThreadRows, type ThreadRow } from "./rows";
 
 /** How long an upload minted for a thrown-away take is kept for the next one. */
@@ -79,6 +80,12 @@ export interface ChatThreadScreenProps {
   availability?: boolean;
   /** An app attachment card's button (a form, a check-in), when its kind gives no `onPress`. */
   onOpenAttachment?: OpenAttachment;
+  /**
+   * Whether the screen is the one shown (the navigator's `useIsFocused()`). When it turns false a
+   * video or voice note of this thread that is playing pauses: switching tab keeps the screen
+   * mounted. Default true.
+   */
+  focused?: boolean;
   testID?: string;
 }
 
@@ -133,7 +140,7 @@ export function nearBottom(m: { contentOffset: { y: number }; contentSize: { hei
 }
 
 export function ChatThreadScreen(props: ChatThreadScreenProps) {
-  const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, testID = "chat-thread" } = props;
+  const { conversationId, threadRootId = null, keyboardVerticalOffset, onOpenAttachment, jumpTo, topic: topicProp, showTopics = false, scheduling = true, availability = true, focused = true, testID = "chat-thread" } = props;
   const chat = useChat();
   const { userId, videoUpload, attachmentKinds, outbox } = chat;
   // Off unless the app turns it on: an og:image fetched from the phone tells its site who reads it.
@@ -209,6 +216,16 @@ export function ChatThreadScreen(props: ChatThreadScreenProps) {
   const rows = useMemo(() => buildThreadRows(conv.items, { me: userId, firstUnreadId: conv.firstUnreadId, group }), [conv.items, userId, conv.firstUnreadId, group]);
   const paths = useMemo(() => conv.items.flatMap((i) => (i.type === "message" ? attachmentPaths(i.message.attachments) : [])), [conv.items]);
   const urls = useFileUrls(paths);
+  // Out of sight (another tab, a screen pushed over it): what this thread is playing pauses.
+  // Players are keyed by attachment id, or `<clientId>:…` while the message is still sending.
+  const itemsNow = useRef(conv.items);
+  itemsNow.current = conv.items;
+  useEffect(() => {
+    if (focused) return;
+    pauseChatPlayback((id) =>
+      itemsNow.current.some((i) => (i.type === "message" ? i.message.attachments.some((a) => a.id === id) : i.type === "pending" && id.startsWith(`${i.pending.clientId}:`))),
+    );
+  }, [focused]);
   const byId = useMemo(() => new Map(conv.messages.map((m) => [m.id, m])), [conv.messages]);
   const linkIds = useMemo(() => linkPreviewIds(conv.messages), [conv.messages]);
   const previews = useLinkPreviews(linkIds);
@@ -321,7 +338,16 @@ export function ChatThreadScreen(props: ChatThreadScreenProps) {
     loadUntil,
     scrollTo: (index, id) => {
       jumpingTo.current = { id, tries: 0 };
-      requestAnimationFrame(() => listRef.current?.scrollToIndex?.({ index, animated: !reducedMotion, viewPosition: 0.5 }));
+      const scroll = (at: number) => listRef.current?.scrollToIndex?.({ index: at, animated: !reducedMotion, viewPosition: 0.5 });
+      requestAnimationFrame(() => scroll(index));
+      // Once more after the first layout: with the message already loaded (the thread was opened
+      // before), the jump runs on the first frame, and FlashList's start-at-the-bottom placement,
+      // which comes after it, would win and leave the thread at the bottom.
+      if (retryTimer.current) clearTimeout(retryTimer.current);
+      retryTimer.current = setTimeout(() => {
+        const at = rowIndexOf(rowsNow.current, id);
+        if (at >= 0) scroll(at);
+      }, 250);
     },
     onStart: () => {
       atBottom.current = false;
@@ -447,7 +473,7 @@ export function ChatThreadScreen(props: ChatThreadScreenProps) {
               <LoadingThread testID={`${testID}-loading`} />
             ) : empty ? (
               <View style={{ flex: 1, justifyContent: "center" }}>
-                <NativeEmptyState variant="first-run" title={copy.threadEmptyTitle} body={copy.threadEmptyBody} testID={`${testID}-empty`} />
+                <NativeEmptyState variant="first-run" title={copy.threadEmptyTitle} body={currentTopic?.closedAt ? copy.topicClosedNotice : copy.threadEmptyBody} testID={`${testID}-empty`} />
               </View>
             ) : (
               <List
@@ -534,6 +560,7 @@ export function ChatThreadScreen(props: ChatThreadScreenProps) {
           onClose={() => setActionsFor(null)}
           onReact={react}
           onAction={onAction}
+          attachmentKinds={attachmentKinds}
           testID={`${testID}-actions`}
         />
         <ChatPhotoViewer photos={viewer?.photos ?? null} initialIndex={viewer?.index} onClose={() => setViewer(null)} testID={`${testID}-viewer`} />