@q9labsai/chalk-react-native 4.1.15 → 4.1.17

package/src/components/native-space-view/SpaceChatAttachment.tsx

@@ -0,0 +1,105 @@
+import type { ChatAttachment } from "@q9labsai/chalk-client";
+import { useEffect, useState } from "react";
+import { Image, Pressable, StyleSheet, Text, View } from "react-native";
+
+import { Theme } from "../../ui/theme";
+
+export function SpaceChatAttachment({ attachment, isLocal, onOpen, resolveUrl }: { readonly attachment: ChatAttachment; readonly isLocal: boolean; readonly onOpen: (attachmentId: string) => void; readonly resolveUrl: (attachmentId: string) => Promise<string | null> }): React.JSX.Element {
+  const isImage = attachment.mimeType.startsWith("image/");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [previewFailed, setPreviewFailed] = useState(false);
+  const [retryGeneration, setRetryGeneration] = useState(0);
+
+  useEffect(() => {
+    if (!isImage || previewUrl || previewFailed) return;
+    let cancelled = false;
+    void resolveUrl(attachment.attachmentId).then(
+      (url) => {
+        if (cancelled) return;
+        if (!url) {
+          reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
+          setPreviewFailed(true);
+          return;
+        }
+        setPreviewUrl(url);
+        setPreviewFailed(false);
+      },
+      () => {
+        if (cancelled) return;
+        reportAttachmentPreviewFailure(attachment.attachmentId, "resolve");
+        setPreviewFailed(true);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [attachment.attachmentId, isImage, previewFailed, previewUrl, resolveUrl, retryGeneration]);
+
+  if (!isImage) {
+    return (
+      <Pressable accessibilityRole="link" onPress={() => onOpen(attachment.attachmentId)} style={({ pressed }) => [styles.attachmentLink, pressed && styles.pressed]}>
+        <Text numberOfLines={1} style={[styles.attachment, isLocal && styles.localText]}>
+          {attachment.fileName}
+        </Text>
+      </Pressable>
+    );
+  }
+
+  if (previewFailed) {
+    return (
+      <View style={styles.previewError}>
+        <Text accessibilityLiveRegion="polite" style={[styles.previewErrorText, isLocal && styles.localText]}>
+          Image preview unavailable
+        </Text>
+        <Pressable
+          accessibilityLabel={`Retry preview for ${attachment.fileName}`}
+          accessibilityRole="button"
+          style={styles.retryButton}
+          onPress={() => {
+            setPreviewFailed(false);
+            setPreviewUrl(null);
+            setRetryGeneration((current) => current + 1);
+          }}
+        >
+          <Text style={[styles.retry, isLocal && styles.localText]}>Retry preview</Text>
+        </Pressable>
+      </View>
+    );
+  }
+
+  if (!previewUrl) return <Text style={[styles.previewLoading, isLocal && styles.localText]}>Loading {attachment.fileName}…</Text>;
+
+  return (
+    <Pressable accessibilityLabel={`Open ${attachment.fileName}`} accessibilityRole="imagebutton" onPress={() => onOpen(attachment.attachmentId)} style={({ pressed }) => [styles.imagePreviewButton, pressed && styles.pressed]}>
+      <Image
+        accessibilityLabel={attachment.fileName}
+        onError={() => {
+          reportAttachmentPreviewFailure(attachment.attachmentId, "render");
+          setPreviewFailed(true);
+          setPreviewUrl(null);
+        }}
+        resizeMode="cover"
+        source={{ uri: previewUrl }}
+        style={styles.imagePreview}
+      />
+    </Pressable>
+  );
+}
+
+function reportAttachmentPreviewFailure(attachmentId: string, operation: "render" | "resolve"): void {
+  console.warn("Chat attachment preview unavailable.", { attachmentId, operation });
+}
+
+const styles = StyleSheet.create({
+  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
+  attachment: { color: Theme.colors.information, fontSize: 14 },
+  imagePreviewButton: { borderRadius: Theme.radius.sm, marginTop: Theme.spacing.sm, maxWidth: "100%", overflow: "hidden" },
+  imagePreview: { height: 160, width: 240 },
+  previewLoading: { color: Theme.colors.ink2, fontSize: 13, marginTop: Theme.spacing.sm },
+  previewError: { borderColor: Theme.colors.line, borderRadius: Theme.radius.sm, borderWidth: 1, marginTop: Theme.spacing.sm, width: 240, maxWidth: "100%", minHeight: 160, justifyContent: "center", alignItems: "center", padding: Theme.spacing.md },
+  previewErrorText: { color: Theme.colors.ink2, fontSize: 13 },
+  retryButton: { minHeight: 44, justifyContent: "center", paddingHorizontal: Theme.spacing.sm },
+  retry: { color: Theme.colors.information, fontSize: 13, fontWeight: "700", marginTop: 6 },
+  localText: { color: Theme.colors.surface },
+  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
+});

package/src/components/native-space-view/SpaceChatSheet.tsx

@@ -6,6 +6,7 @@ import { FlatList, KeyboardAvoidingView, Platform, Pressable, StyleSheet, Text,
 
 import { Theme } from "../../ui/theme";
 import { formatChatTimestamp } from "./space-progressive-surface-helpers";
+import { SpaceChatAttachment } from "./SpaceChatAttachment";
 import { InitialsAvatar } from "./SpaceSurfacePrimitives";
 import type { SpaceController } from "./space-progressive-surface-types";
 
@@ -31,7 +32,7 @@ export function SpaceChatSheet({ controller }: { readonly controller: SpaceContr
           const sequence = viewableItems.at(-1)?.item.sequence;
           if (sequence) controller.markChatMessageVisible(sequence);
         }}
-        renderItem={({ item }) => <ChatMessage isLocal={item.senderId === localParticipantId} message={item} onOpenAttachment={controller.openChatAttachment} />}
+        renderItem={({ item }) => <ChatMessage isLocal={item.senderId === localParticipantId} message={item} onOpenAttachment={controller.openChatAttachment} resolveAttachmentUrl={controller.resolveChatAttachmentUrl} />}
         showsVerticalScrollIndicator={false}
       />
       {controller.chat.pendingMessages.map((message) => (
@@ -97,7 +98,17 @@ export function SpaceChatSheet({ controller }: { readonly controller: SpaceContr
   );
 }
 
-function ChatMessage({ isLocal, message, onOpenAttachment }: { readonly isLocal: boolean; readonly message: SpaceController["chat"]["messages"][number]; readonly onOpenAttachment: (attachmentId: string) => void }): React.JSX.Element {
+function ChatMessage({
+  isLocal,
+  message,
+  onOpenAttachment,
+  resolveAttachmentUrl,
+}: {
+  readonly isLocal: boolean;
+  readonly message: SpaceController["chat"]["messages"][number];
+  readonly onOpenAttachment: (attachmentId: string) => void;
+  readonly resolveAttachmentUrl: (attachmentId: string) => Promise<string | null>;
+}): React.JSX.Element {
   const timestamp = formatChatTimestamp(message.timestamp);
   return (
     <View style={[styles.messageRow, isLocal && styles.messageRowLocal]}>
@@ -107,11 +118,7 @@ function ChatMessage({ isLocal, message, onOpenAttachment }: { readonly isLocal:
         <View style={[styles.bubble, isLocal ? styles.localBubble : styles.remoteBubble]}>
           {message.text ? <Text style={[styles.messageText, isLocal && styles.localMessageText]}>{message.text}</Text> : null}
           {message.attachments.map((attachment) => (
-            <Pressable accessibilityRole="link" key={attachment.attachmentId} onPress={() => onOpenAttachment(attachment.attachmentId)} style={({ pressed }) => [styles.attachmentLink, pressed && styles.pressed]}>
-              <Text numberOfLines={1} style={[styles.attachment, isLocal && styles.localMessageText]}>
-                {attachment.fileName}
-              </Text>
-            </Pressable>
+            <SpaceChatAttachment attachment={attachment} isLocal={isLocal} key={attachment.attachmentId} onOpen={onOpenAttachment} resolveUrl={resolveAttachmentUrl} />
           ))}
         </View>
         <Text style={[styles.timestamp, isLocal && styles.timestampLocal]}>{timestamp}</Text>
@@ -150,8 +157,6 @@ const styles = StyleSheet.create({
   localBubble: { backgroundColor: Theme.colors.ink, borderColor: Theme.colors.ink, borderTopRightRadius: 5 },
   messageText: { color: Theme.colors.ink, fontSize: 17, lineHeight: 24 },
   localMessageText: { color: Theme.colors.surface },
-  attachmentLink: { justifyContent: "center", marginTop: 4, maxWidth: "100%", minHeight: 32 },
-  attachment: { color: Theme.colors.information, fontSize: 14 },
   timestamp: { color: Theme.colors.ink3, fontSize: 12, marginTop: 5, paddingHorizontal: 4 },
   timestampLocal: { textAlign: "right" },
   readBy: { color: Theme.colors.ink3, fontSize: 11, marginTop: 3, paddingHorizontal: 4 },

package/src/components/native-space-view/SpaceMoreSheet.tsx

@@ -19,10 +19,11 @@ interface MoreAction {
   readonly icon?: SpaceIcon;
   readonly symbol?: string;
   readonly wash?: string;
+  readonly unavailableReason?: string;
   readonly onPress: () => void;
 }
 
-export function SpaceMoreSheet({ controller, onOpenSettings }: { readonly controller: SpaceController; readonly onOpenSettings: () => void }): React.JSX.Element {
+export function SpaceMoreSheet({ controller, onOpenSettings, onOpenFeedback }: { readonly controller: SpaceController; readonly onOpenSettings: () => void; readonly onOpenFeedback?: () => void }): React.JSX.Element {
   const close = () => controller.setActionsOpen(false);
   const actions: MoreAction[] = [
     {
@@ -77,12 +78,13 @@ export function SpaceMoreSheet({ controller, onOpenSettings }: { readonly contro
       : []),
     ...(controller.canParticipants ? [{ id: "people", label: "People", icon: UserGroupIcon, onPress: () => controller.openPanel("participants") }] : []),
     ...(controller.canChat ? [{ id: "chat", label: "Chat", icon: Chat01Icon, onPress: () => controller.openPanel("chat") }] : []),
-    ...(controller.canScreenShare
+    ...(controller.canScreenShare || controller.screenShare.isLocalSharing || controller.screenShareUnavailableReason
       ? [
           {
             id: "screen-share",
             label: controller.screenShare.isLocalSharing ? "Stop sharing" : "Present screen",
             icon: ComputerScreenShareIcon,
+            unavailableReason: controller.screenShare.isLocalSharing ? undefined : (controller.screenShareUnavailableReason ?? undefined),
             onPress: () => {
               close();
               controller.toggleScreenShare();
@@ -99,6 +101,19 @@ export function SpaceMoreSheet({ controller, onOpenSettings }: { readonly contro
         onOpenSettings();
       },
     },
+    ...(onOpenFeedback
+      ? [
+          {
+            id: "feedback",
+            label: "Feedback",
+            symbol: "✉",
+            onPress: () => {
+              close();
+              onOpenFeedback();
+            },
+          },
+        ]
+      : []),
   ];
 
   return (
@@ -110,11 +125,23 @@ export function SpaceMoreSheet({ controller, onOpenSettings }: { readonly contro
           <Text style={styles.title}>More</Text>
           <ScrollView contentContainerStyle={styles.actionGrid} showsVerticalScrollIndicator={false}>
             {actions.map((action) => (
-              <Pressable accessibilityLabel={action.label} accessibilityRole="button" key={action.id} onPress={action.onPress} style={({ pressed }) => [styles.action, pressed && styles.actionPressed]}>
+              <Pressable
+                accessibilityLabel={action.label}
+                accessibilityHint={action.unavailableReason}
+                accessibilityRole="button"
+                accessibilityState={{ disabled: Boolean(action.unavailableReason) }}
+                disabled={Boolean(action.unavailableReason)}
+                key={action.id}
+                onPress={action.onPress}
+                style={({ pressed }) => [styles.action, pressed && styles.actionPressed]}
+              >
                 <IconTile icon={action.icon} symbol={action.symbol} wash={action.wash ?? Theme.colors.surfaceMuted} />
-                <Text numberOfLines={2} style={styles.actionLabel}>
-                  {action.label}
-                </Text>
+                <View style={styles.actionCopy}>
+                  <Text numberOfLines={2} style={styles.actionLabel}>
+                    {action.label}
+                  </Text>
+                  {action.unavailableReason ? <Text style={styles.actionDetail}>{action.unavailableReason}</Text> : null}
+                </View>
               </Pressable>
             ))}
           </ScrollView>
@@ -155,6 +182,8 @@ const styles = StyleSheet.create({
   actionGrid: { flexDirection: "row", flexWrap: "wrap", gap: Theme.spacing.md, padding: Theme.spacing.lg, paddingBottom: Theme.spacing.md },
   action: { alignItems: "center", backgroundColor: Theme.colors.surfaceMuted, borderColor: Theme.colors.line, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.md, minHeight: 76, paddingHorizontal: Theme.spacing.md, width: "47.8%" },
   actionLabel: { color: Theme.colors.ink, flex: 1, fontSize: 15, fontWeight: "600", lineHeight: 20 },
+  actionCopy: { flex: 1, gap: Theme.spacing.xs },
+  actionDetail: { color: Theme.colors.ink2, fontSize: 12, lineHeight: 17 },
   actionPressed: { opacity: 0.72, transform: [{ scale: 0.985 }] },
   leaveButton: { alignItems: "center", borderColor: Theme.colors.dangerBackground, borderRadius: Theme.radius.md, borderWidth: 1, flexDirection: "row", gap: Theme.spacing.sm, justifyContent: "center", marginHorizontal: Theme.spacing.lg, minHeight: 52, paddingHorizontal: Theme.spacing.lg },
   leaveText: { color: Theme.colors.error, fontSize: 16, fontWeight: "700" },

package/src/components/native-space-view/SpaceTopBar.android.tsx

@@ -1,3 +1,4 @@
+import type { Recording } from "@q9labsai/chalk-client";
 import UserGroupIcon from "@hugeicons/core-free-icons/dist/esm/UserGroupIcon";
 import { HugeiconsIcon } from "@hugeicons/react-native";
 import { Image, Platform, StyleSheet, Text, View } from "react-native";
@@ -10,9 +11,10 @@ export interface SpaceTopBarProps {
   participantCount: number;
   formattedDuration: string;
   logoUrl?: string;
+  recording?: Recording | null;
 }
 
-export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl }: SpaceTopBarProps): React.JSX.Element {
+export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl, recording }: SpaceTopBarProps): React.JSX.Element {
   const theme = useNativeTheme();
   return (
     <View style={[styles.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }]}>
@@ -26,6 +28,11 @@ export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDurat
           <Text style={[styles.timerText, { color: theme.colors.mutedForeground }]}>{formattedDuration}</Text>
         </View>
       </View>
+      {recording && recording.status !== "stopped" ? (
+        <Text accessibilityLiveRegion="polite" style={[styles.timerText, { color: theme.colors.error }]}>
+          {recordingLabels[recording.status]}
+        </Text>
+      ) : null}
       <View style={[styles.topBarRight, { backgroundColor: theme.colors.surface }]}>
         <HugeiconsIcon icon={UserGroupIcon} size={14} color={theme.colors.foreground} />
         <Text style={[styles.topBarCount, { color: theme.colors.foreground }]}>{participantCount}</Text>
@@ -34,6 +41,14 @@ export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDurat
   );
 }
 
+const recordingLabels = {
+  starting: "Starting recording…",
+  recording: "Recording",
+  stopping: "Stopping recording…",
+  stopped: "Recording stopped",
+  failed: "Recording failed",
+};
+
 export { SpaceTopBarAndroid as SpaceTopBar };
 
 const styles = StyleSheet.create({

package/src/components/native-space-view/screen-share-availability.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { resolveNativeScreenShareAvailability } from "./screen-share-availability";
+
+describe("native screen sharing availability", () => {
+  it.each(["ios", "android"])("allows capture on a supported physical %s runtime", (platform) => {
+    expect(resolveNativeScreenShareAvailability({ featureEnabled: true, platform, simulator: false, captureAvailable: true }).enabled).toBe(true);
+  });
+  it.each([
+    { featureEnabled: false, platform: "ios", simulator: false, captureAvailable: true },
+    { featureEnabled: true, platform: "ios", simulator: true, captureAvailable: true },
+    { featureEnabled: true, platform: "android", simulator: false, captureAvailable: false },
+    { featureEnabled: true, platform: "windows", simulator: false, captureAvailable: true },
+  ])("explains an unavailable runtime: $platform", (input) => {
+    expect(resolveNativeScreenShareAvailability(input)).toMatchObject({ enabled: false, detail: expect.any(String), reason: expect.any(String) });
+  });
+});

package/src/components/native-space-view/screen-share-availability.ts

@@ -4,7 +4,7 @@ export interface NativeScreenShareAvailability {
   detail: string | null;
 }
 
-export function resolveNativeScreenShareAvailability({ featureEnabled }: { featureEnabled: boolean }): NativeScreenShareAvailability {
+export function resolveNativeScreenShareAvailability({ featureEnabled, platform, simulator, captureAvailable }: { featureEnabled: boolean; platform: string; simulator: boolean; captureAvailable: boolean }): NativeScreenShareAvailability {
   if (!featureEnabled) {
     return {
       enabled: false,
@@ -13,6 +13,9 @@ export function resolveNativeScreenShareAvailability({ featureEnabled }: { featu
     };
   }
 
+  if (simulator) return { enabled: false, reason: "simulator", detail: "Screen sharing requires a physical device." };
+  if ((platform !== "ios" && platform !== "android") || !captureAvailable) return { enabled: false, reason: "runtime-unsupported", detail: "Screen sharing is unavailable in this app runtime. Use a supported native build or share from the web app." };
+
   return {
     enabled: true,
     reason: null,

package/src/components/native-space-view/space-chat-attachments.test.ts

@@ -0,0 +1,26 @@
+import type { ChatUploadFile } from "@q9labsai/chalk-client";
+import { describe, expect, it } from "vitest";
+
+import { describeChatUploadFile } from "./space-chat-attachments";
+
+describe("describeChatUploadFile", () => {
+  it("describes a lazy native picker file that also exposes bytes", () => {
+    const file: ChatUploadFile = new LazyNativeFileWithBytes();
+
+    expect(describeChatUploadFile(file)).toMatchObject({ fileName: "mobile-photo.png", mimeType: "image/png", byteLength: 7 });
+  });
+});
+
+class LazyNativeFileWithBytes {
+  readonly name = "mobile-photo.png";
+  readonly type = "image/png";
+  readonly size = 7;
+
+  arrayBuffer(): Promise<ArrayBuffer> {
+    return Promise.resolve(new ArrayBuffer(this.size));
+  }
+
+  bytes(): Promise<Uint8Array> {
+    return Promise.resolve(new Uint8Array(this.size));
+  }
+}

package/src/components/native-space-view/space-chat-attachments.ts

@@ -11,10 +11,8 @@ export interface NativeChatFileDraft {
 }
 
 export function describeChatUploadFile(file: ChatUploadFile): NativeChatFileDraft {
-  if ("bytes" in file) {
-    return { file, fileName: file.fileName, mimeType: file.mimeType, byteLength: file.bytes.byteLength };
-  }
-  return { file, fileName: file.name, mimeType: file.type, byteLength: file.size };
+  if ("arrayBuffer" in file) return { file, fileName: file.name, mimeType: file.type, byteLength: file.size };
+  return { file, fileName: file.fileName, mimeType: file.mimeType, byteLength: file.bytes.byteLength };
 }
 
 export function validateChatFileDraft(draft: NativeChatFileDraft): string | null {

package/src/components/native-space-view/useSpaceViewController.ts

@@ -1,9 +1,10 @@
 import type { ChatSendInput, Reaction } from "@q9labsai/chalk-client";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Alert, Linking } from "react-native";
+import { Alert, Linking, Platform } from "react-native";
+import { mediaDevices } from "@cloudflare/react-native-webrtc";
 
 import { useSpaceClient } from "../../context/space-client-context";
-import { useChat as useSpaceChat, useMedia as useSpaceMedia, useParticipants as useSpaceParticipants, useReactions as useSpaceReactions, useSelf, useWhiteboard } from "../../hooks/space-hooks";
+import { useChat as useSpaceChat, useMedia as useSpaceMedia, useParticipants as useSpaceParticipants, useReactions as useSpaceReactions, useSelf, useWhiteboard, useRecording, useConnection } from "../../hooks/space-hooks";
 import { getNativeJourneyContext } from "../../telemetry";
 import type { NativeChatMessage, NativeParticipant, NativeReaction } from "../../ui/native-types";
 import { isIosSimulator } from "../../utils/ios-simulator";
@@ -29,6 +30,9 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
   const chatSlice = useSpaceChat();
   const reactionSlice = useSpaceReactions();
   const whiteboardSlice = useWhiteboard();
+  const recording = useRecording().current;
+  const connection = useConnection();
+
   const journeyContext = getNativeJourneyContext(client);
   const [actionsOpen, setActionsOpen] = useState(false);
   const [reactionPickerOpen, setReactionPickerOpen] = useState(false);
@@ -55,7 +59,7 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
         return {
           ...participant,
           id: participant.participantId,
-          audioEnabled: local ? media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting" : participant.media.microphone === "active",
+          audioEnabled: local ? media.local.microphone.state === "enabled" : participant.media.microphone === "active",
           videoEnabled: local ? media.local.camera.state === "enabled" || media.local.camera.state === "requesting" : participant.media.camera === "active",
           audioTrack: local ? media.local.microphone.track : (remoteMedia.find((publication) => publication.source === "microphone")?.track ?? null),
           videoTrack: local ? media.local.camera.track : (remoteMedia.find((publication) => publication.source === "camera")?.track ?? null),
@@ -175,7 +179,7 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
   const canClear = canWhiteboard && self.can("manageWhiteboard");
   const whiteboardTransport = useMemo(() => client.whiteboard.transport(), [client.whiteboard, whiteboardSlice.engine.status]);
   const canEndEpisode = self.can("endEpisode");
-  const screenShareAvailability = useMemo(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false }), [features?.screenShare]);
+  const screenShareAvailability = useMemo(() => resolveNativeScreenShareAvailability({ featureEnabled: features?.screenShare !== false, platform: Platform.OS, simulator: isIosSimulator(), captureAvailable: typeof mediaDevices.getDisplayMedia === "function" }), [features?.screenShare]);
   const capabilities = useMemo(
     () => ({
       canEndEpisode,
@@ -297,12 +301,24 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
     });
   }, [chat, chatAttachments, chatDraft, client.chat.files, run]);
 
+  const resolveChatAttachmentUrl = useCallback(
+    async (attachmentId: string) => {
+      const attachment = chatSlice.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
+      return attachment ? client.chat.files.resolveUrl(attachment) : null;
+    },
+    [chatSlice.messages, client.chat.files],
+  );
+
   return {
+    recording,
+    canManageRecording: self.can("manageRecording"),
+    canToggleRecording: connection.status === "live" && recording?.status !== "starting" && recording?.status !== "stopping",
+    toggleRecording: () => void run(() => (recording?.status === "recording" ? client.recording.stop() : client.recording.start())),
     simulatorMediaDisabled: isIosSimulator(),
     spaceName: spaceName || "Space",
     panel: spacePanels.panel,
     selfName: self.displayName || "Participant",
-    isMuted: !(media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting"),
+    isMuted: media.local.microphone.state !== "enabled",
     isCameraOff: !(media.local.camera.state === "enabled" || media.local.camera.state === "requesting"),
     handRaised: interactionState.isHandRaised,
     raisedHandCount: interactionState.raisedHandCount,
@@ -321,6 +337,7 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
     canChat: capabilities.canChat,
     canParticipants: capabilities.canParticipants,
     canScreenShare: capabilities.canScreenShare,
+    screenShareUnavailableReason: features?.screenShare !== false && self.can("publishScreen") ? screenShareAvailability.detail : null,
     canReactions: capabilities.canReactions,
     canHandRaise: capabilities.canHandRaise,
     canInvite: capabilities.canInvite,
@@ -337,7 +354,7 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
     participants: spaceParticipants,
     settings: {
       displayName: self.displayName ?? "",
-      microphoneEnabled: media.local.microphone.state === "enabled" || media.local.microphone.state === "requesting",
+      microphoneEnabled: media.local.microphone.state === "enabled",
       cameraEnabled: media.local.camera.state === "enabled" || media.local.camera.state === "requesting",
       devices: media.devices,
       selection: media.selection,
@@ -373,9 +390,12 @@ export function useSpaceViewController({ spaceName, inviteLink, layout: controll
       void run(() => interactionState.sendReaction(reaction));
     },
     sendChatMessage,
+    resolveChatAttachmentUrl,
     openChatAttachment: (attachmentId: string) => {
-      const attachment = chat.messages.flatMap((message) => message.attachments).find((candidate) => candidate.attachmentId === attachmentId);
-      if (attachment) void run(() => Linking.openURL(client.chat.files.url(attachment)));
+      void run(async () => {
+        const url = await resolveChatAttachmentUrl(attachmentId);
+        if (url) await Linking.openURL(url);
+      });
     },
     markChatMessageVisible: (sequence: string) => void run(() => chat.markAsRead(sequence)),
     admitParticipant: (requestId: string) => void run(() => client.participants.admit(requestId)),

package/src/feedback/native-capture.ts

@@ -0,0 +1,62 @@
+import type { FeedbackScreenshotCapture, FeedbackScreenshotUnavailable } from "@q9labsai/chalk-client";
+import { Platform, type View } from "react-native";
+import { captureRef } from "react-native-view-shot";
+
+export type FeedbackCaptureTarget = React.RefObject<View | null>;
+
+export type FeedbackCaptureSize = Readonly<{
+  width: number;
+  height: number;
+}>;
+
+const MAX_SCREENSHOT_BYTES = 450 * 1024;
+const MAX_SCREENSHOT_WIDTH = 1_920;
+const MAX_SCREENSHOT_HEIGHT = 1_080;
+
+export async function captureNativeFeedbackView(target: FeedbackCaptureTarget, size: FeedbackCaptureSize): Promise<FeedbackScreenshotCapture | FeedbackScreenshotUnavailable> {
+  if (Platform.OS === "macos") return { state: "unavailable", failure_code: "unsupported" };
+  if (!target.current) return { state: "unavailable", failure_code: "capture_failed" };
+
+  const outputSize = boundedOutputSize(size);
+  if (!outputSize) return { state: "unavailable", failure_code: "capture_failed" };
+  try {
+    const captured = await captureRef(target, {
+      format: "jpg",
+      quality: 0.72,
+      result: "base64",
+      ...outputSize,
+    });
+    const dataBase64 = normalizeBase64(captured);
+    if (!dataBase64) return { state: "unavailable", failure_code: "capture_failed" };
+    if (base64ByteLength(dataBase64) > MAX_SCREENSHOT_BYTES) return { state: "unavailable", failure_code: "too_large" };
+
+    return {
+      state: "captured",
+      mime_type: "image/jpeg",
+      width: outputSize.width,
+      height: outputSize.height,
+      captured_at: new Date().toISOString(),
+      data_base64: dataBase64,
+    };
+  } catch {
+    return { state: "unavailable", failure_code: "capture_failed" };
+  }
+}
+
+function boundedOutputSize(size: FeedbackCaptureSize): Readonly<{ width: number; height: number }> | undefined {
+  if (!Number.isFinite(size.width) || !Number.isFinite(size.height) || size.width <= 0 || size.height <= 0) return undefined;
+  const scale = Math.min(1, MAX_SCREENSHOT_WIDTH / size.width, MAX_SCREENSHOT_HEIGHT / size.height);
+  return {
+    width: Math.max(1, Math.floor(size.width * scale)),
+    height: Math.max(1, Math.floor(size.height * scale)),
+  };
+}
+
+function normalizeBase64(value: string): string {
+  return value.replace(/^data:[^;]+;base64,/u, "").replaceAll(/\s/gu, "");
+}
+
+function base64ByteLength(value: string): number {
+  const padding = value.endsWith("==") ? 2 : value.endsWith("=") ? 1 : 0;
+  return Math.floor((value.length * 3) / 4) - padding;
+}

package/src/feedback/native-evidence.ts

@@ -0,0 +1,37 @@
+import type { FeedbackEvidenceInput, FeedbackPlatformKind } from "@q9labsai/chalk-client";
+import { Platform } from "react-native";
+
+import { getDeviceInfo } from "../runtime";
+
+export function createNativeFeedbackEvidence(): FeedbackEvidenceInput {
+  const device = getDeviceInfo({ scriptUrl: null });
+  const kind = feedbackPlatformKind(Platform.OS);
+  const osName = boundedString(device.systemName ?? device.platform ?? kind);
+  const osVersion = boundedString(device.osVersion);
+  const deviceModel = boundedString(device.model);
+  const reactNativeVersion = boundedString(device.reactNativeVersion);
+  const deviceClass = kind === "macos" ? "desktop" : device.interfaceIdiom === "pad" ? "tablet" : "phone";
+
+  return {
+    sdk: { client: "@q9labsai/chalk-client", ...(reactNativeVersion ? { react_native: reactNativeVersion } : {}) },
+    platform: {
+      kind,
+      ...(osName ? { os_name: osName } : {}),
+      ...(osVersion ? { os_version: osVersion } : {}),
+      device_class: deviceClass,
+      ...(deviceModel ? { device_model: deviceModel } : {}),
+    },
+  };
+}
+
+function feedbackPlatformKind(platform: string): FeedbackPlatformKind {
+  if (platform === "ios") return "ios";
+  if (platform === "macos") return "macos";
+  return "android";
+}
+
+function boundedString(value: string | null): string | undefined {
+  const normalized = value?.trim();
+  if (!normalized) return undefined;
+  return normalized.slice(0, 64);
+}

package/src/hooks/space-hooks.ts

@@ -34,6 +34,10 @@ export function useReactions(): SpaceSnapshot["reactions"] {
   return useSpaceSlice("reactions");
 }
 
+export function useRecording(): SpaceSnapshot["recording"] {
+  return useSpaceSlice("recording");
+}
+
 export function useWhiteboard(): SpaceSnapshot["whiteboard"] {
   return useSpaceSlice("whiteboard");
 }

package/src/index.ts

@@ -6,7 +6,7 @@ export { Logo } from "./components/logo/Logo";
 export type { LogoMotion, LogoProps, LogoVariant } from "./components/logo/Logo";
 export { ChalkProvider, useSpaceClient } from "./context/space-client-context";
 export type { ChalkProviderProps } from "./context/space-client-context";
-export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useSelf, useWhiteboard } from "./hooks/space-hooks";
+export { useCan, useChat, useConnection, useMedia, useParticipants, useReactions, useRecording, useSelf, useWhiteboard } from "./hooks/space-hooks";
 export { Theme, createNativeTheme } from "./ui/theme";
 export { extractSpaceInviteFromLink, getClipboardInviteSuggestion, parseSpaceInviteLink } from "./invites";
 export type { SpaceInviteLink } from "./invites";

package/src/space-client/create-native-space-client.ts

@@ -16,6 +16,7 @@ import {
   type ReactNativeAsyncStorage,
 } from "@q9labsai/chalk-client";
 import { createSpaceClientForPlatform, type SpaceClientPlatform } from "@q9labsai/chalk-client/effect";
+import type { FeedbackSource } from "@q9labsai/chalk-client";
 import type { SpaceClient } from "@q9labsai/chalk-client";
 import { RTCPeerConnection, mediaDevices } from "@cloudflare/react-native-webrtc";
 import { AppState } from "react-native";
@@ -41,6 +42,7 @@ export type NativeSpaceClientOptions = {
   readonly syncStartupTimeoutMs?: number;
   readonly storage?: ReactNativeAsyncStorage;
   readonly telemetry?: TelemetryJourney;
+  readonly feedbackSource?: FeedbackSource;
 };
 
 export function createNativeSpaceClient(options: NativeSpaceClientOptions): SpaceClient {
@@ -86,6 +88,8 @@ export function createNativeSpaceClient(options: NativeSpaceClientOptions): Spac
       initialMicrophoneEnabled: options.microphone,
       initialCameraEnabled: options.camera,
       onConnectionDiagnostic: (event) => journey?.recordDiagnostic(connectionDiagnostic(event)),
+      ...(journey ? { recordReconnect: (observation) => journey.recordDiagnostic(observation) } : {}),
+      feedbackSource: options.feedbackSource ?? "embedded",
     },
   );
   bindNativeAuthenticatedTelemetry(client, journey);
@@ -150,6 +154,7 @@ function createMediaClient(apiBaseURL: string, input: MediaFactoryInput, fetch:
     participantId: subject.participantId,
     transport: createCloudflareSFUHTTPTransport({
       apiBaseURL,
+      telemetry: input.telemetry,
       credential: () => authenticatedNativeCredential(input.credential, journey),
       tenantId: subject.tenantId,
       spaceId: subject.spaceId,
@@ -169,6 +174,7 @@ function createMediaClient(apiBaseURL: string, input: MediaFactoryInput, fetch:
       observePeerConnection?.(connection as unknown as RtcPeerConnection);
       return connection as unknown as globalThis.RTCPeerConnection;
     },
+    recordReconnect: input.recordReconnect,
     onError: input.onFailure,
     onScreenEnded: input.onScreenEnded,
   });
@@ -224,6 +230,7 @@ function createSyncClient(syncURL: string, input: SyncFactoryInput, lifecycle: R
     lifecycle,
     webSocket,
     telemetry: input.telemetry,
+    recordReconnect: input.recordReconnect,
     ...(storage ? { pendingStore: new AsyncStorageV1PendingTargetStore({ scope, storage }) } : {}),
   });
 }

package/src/whiteboard/embedded-whiteboard-viewport.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+import { createEmbeddedWhiteboardViewport } from "./embedded-whiteboard-viewport";
+
+describe("native embedded whiteboard viewport", () => {
+  it("uses the measured Board rectangle rather than the device window", () => {
+    expect(createEmbeddedWhiteboardViewport(640, 420, 2)).toEqual({ width: 640, height: 420, scale: 2 });
+  });
+
+  it("waits for a usable layout", () => {
+    expect(createEmbeddedWhiteboardViewport(0, 420, 2)).toBeNull();
+  });
+});