@q9labsai/chalk-react-native 4.1.14 → 4.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q9labsai/chalk-react-native",
-  "version": "4.1.14",
+  "version": "4.1.16",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -150,13 +150,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@q9labsai/chalk-client": "^4.1.14",
-    "@q9labsai/chalk-whiteboard": "^4.1.14",
-    "@q9labsai/facehash": "^4.1.14"
+    "@q9labsai/chalk-client": "^4.1.16",
+    "@q9labsai/chalk-whiteboard": "^4.1.16",
+    "@q9labsai/facehash": "^4.1.16"
   },
   "devDependencies": {
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.18",
+    "react-native-view-shot": "4.0.3",
     "react-native-webview": "13.16.1",
     "typescript": "^6.0.3"
   },
@@ -168,12 +169,13 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-svg": "^15.15.3",
+    "react-native-view-shot": "^4.0.3",
     "react-native-webview": "^13.16.1"
   },
   "scripts": {
-    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native && pnpm run build:types && pnpm run sync:whiteboard-assets",
+    "build": "rm -rf ./dist && tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external react-native-view-shot --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native && pnpm run build:types && pnpm run sync:whiteboard-assets",
     "build:types": "rm -f tsconfig.tsbuildinfo && tsc --build tsconfig.json",
-    "dev": "tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native --watch",
+    "dev": "tsup ./src/index.ts ./src/client.ts ./src/android.ts ./src/ios.ts ./src/ios-phone.ts ./src/ios-pad.ts ./src/macos.ts ./src/runtime.ts ./src/clipboard.ts ./src/diagnostics.ts ./src/invites.ts ./src/ui/theme.ts ./src/ui/appearance.ts --format esm --out-dir ./dist --platform browser --external react --external react-native --external react-native-webview --external react-native-view-shot --external @q9labsai/chalk-whiteboard --external @cloudflare/react-native-webrtc --external @cloudflare/realtimekit-react-native --watch",
     "sync:whiteboard-assets": "node ./scripts/sync-whiteboard-assets.mjs",
     "test": "pnpm exec vitest run",
     "check-types": "tsc --project tsconfig.check-types.json --noEmit",

package/src/components/Chalk.tsx

@@ -1,4 +1,4 @@
-import type { ChatUploadFile, ClientEventMap, GetAccess, SpaceClient } from "@q9labsai/chalk-client";
+import type { ChatUploadFile, ClientEventMap, FeedbackEvidenceInput, GetAccess, SpaceClient } from "@q9labsai/chalk-client";
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 
@@ -65,6 +65,7 @@ type ChalkCommonProps = ChalkCallbacks & {
   readonly layout?: SpaceLayout;
   readonly onLayoutChange?: (layout: SpaceLayout) => void;
   readonly onOpenDiagnostics?: () => void;
+  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
 };
 
 export type ChalkProps = ChalkCommonProps &
@@ -273,6 +274,7 @@ function SpaceExperience(props: ChalkProps): React.JSX.Element {
       logoUrl={props.logoUrl}
       onLayoutChange={props.onLayoutChange}
       onOpenDiagnostics={props.onOpenDiagnostics}
+      feedbackEvidence={props.feedbackEvidence}
       pickChatFiles={props.pickChatFiles}
       reconnecting={connection.status === "reconnecting"}
       spaceName={spaceName}
@@ -296,12 +298,13 @@ type NativeSpaceViewProps = {
   readonly logoUrl?: string;
   readonly onLayoutChange?: (layout: SpaceLayout) => void;
   readonly onOpenDiagnostics?: () => void;
+  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
   readonly pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;
   readonly reconnecting: boolean;
   readonly spaceName: string;
 };
 
-function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
+function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange, onOpenDiagnostics, feedbackEvidence, pickChatFiles, reconnecting, spaceName }: NativeSpaceViewProps): React.JSX.Element {
   const client = useSpaceClient();
   const theme = useNativeTheme();
 
@@ -316,6 +319,7 @@ function NativeSpaceView({ features, inviteLink, layout, logoUrl, onLayoutChange
         onLayoutChange={onLayoutChange}
         onLeave={() => client.leave()}
         onOpenDiagnostics={onOpenDiagnostics}
+        feedbackEvidence={feedbackEvidence}
         pickChatFiles={pickChatFiles}
         reconnecting={reconnecting}
         spaceName={spaceName}

package/src/components/EmbeddedWhiteboard.tsx

@@ -1,10 +1,11 @@
 import { ChalkWhiteboardController, type ChalkEmbeddedWhiteboardTransport, type ChalkEmbeddedWhiteboardViewport } from "@q9labsai/chalk-whiteboard/embedded";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, useWindowDimensions, View, type StyleProp, type ViewStyle } from "react-native";
+import { ActivityIndicator, Pressable, StyleSheet, Text, useWindowDimensions, View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from "react-native";
 import WebView, { type WebViewMessageEvent, type WebViewNavigation } from "react-native-webview";
 
 import { useNativeTheme } from "../ui/native-theme";
 import { isEmbeddedWhiteboardNavigationAllowed, rendererURLWithContext, resolveEmbeddedWhiteboardRendererURL } from "../whiteboard/embedded-whiteboard-assets";
+import { createEmbeddedWhiteboardViewport } from "../whiteboard/embedded-whiteboard-viewport";
 
 export interface EmbeddedWhiteboardProps {
   readonly transport: ChalkEmbeddedWhiteboardTransport;
@@ -51,7 +52,11 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
   const [loadAttempt, setLoadAttempt] = useState(0);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [compatibilityNotice, setCompatibilityNotice] = useState<string | null>(null);
-  const { width, height, scale } = useWindowDimensions();
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+  const { scale } = useWindowDimensions();
+  const viewport = useMemo<ChalkEmbeddedWhiteboardViewport | null>(() => createEmbeddedWhiteboardViewport(layout.width, layout.height, scale), [layout.height, layout.width, scale]);
+  const latestViewportRef = useRef(viewport);
+  latestViewportRef.current = viewport;
   onMetricRef.current = onMetric;
   onErrorRef.current = onError;
   onUserExportRef.current = onUserExport;
@@ -106,6 +111,7 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
       onUserExport: handleControllerUserExport,
     });
     controller.start();
+    if (latestViewportRef.current) controller.setViewport(latestViewportRef.current);
     controllerRef.current = controller;
     return () => {
       if (controllerRef.current === controller) controllerRef.current = null;
@@ -117,10 +123,13 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
     controllerRef.current?.setCapabilities({ canDraw, canClear });
   }, [canClear, canDraw]);
 
-  const viewport = useMemo<ChalkEmbeddedWhiteboardViewport>(() => ({ width, height, scale }), [height, scale, width]);
   useEffect(() => {
-    controllerRef.current?.setViewport(viewport);
+    if (viewport) controllerRef.current?.setViewport(viewport);
   }, [viewport]);
+  const handleLayout = useCallback((event: LayoutChangeEvent): void => {
+    const next = { width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height };
+    setLayout((current) => (current.width === next.width && current.height === next.height ? current : next));
+  }, []);
 
   const sourceURL = rendererURL ? rendererURLWithContext(rendererURL, { journeyId, rendererGeneration }) : null;
   const handleMessage = (event: WebViewMessageEvent): void => {
@@ -168,7 +177,7 @@ export function EmbeddedWhiteboard({ transport, journeyId, traceparent, tracesta
   }
 
   return (
-    <View style={[styles.container, style]} testID={testID}>
+    <View onLayout={handleLayout} style={[styles.container, style]} testID={testID}>
       <WebView
         key={rendererGeneration}
         ref={webViewRef}

package/src/components/SpaceView.shared.tsx

@@ -1,5 +1,7 @@
+import { useRef, useState } from "react";
 import { Alert, StyleSheet, Text, View } from "react-native";
 
+import { useSpaceClient } from "../context/space-client-context";
 import { Theme } from "../ui/theme";
 import { useNativeTheme } from "../ui/native-theme";
 import { getIosSimulatorMediaMessage } from "../utils/ios-simulator";
@@ -8,6 +10,8 @@ import type { SpaceViewProps } from "./SpaceView";
 import { SpaceGridAndroid } from "./native-space-view/SpaceGrid.android";
 import { SpaceBottomDockAndroid } from "./native-space-view/SpaceBottomDock.android";
 import { SpaceActionMenu, selectSpaceReaction } from "./native-space-view/SpaceActionMenu";
+import { FeedbackSheet } from "./native-space-view/FeedbackSheet";
+import type { FeedbackCaptureSize } from "../feedback/native-capture";
 import { SpaceStageAndroid } from "./native-space-view/SpaceStage.android";
 import { SpaceTopBarAndroid } from "./native-space-view/SpaceTopBar.android";
 import { SpaceWhiteboardSurface } from "./native-space-view/SpaceWhiteboardSurface";
@@ -17,7 +21,11 @@ import { useSpaceViewController } from "./native-space-view/useSpaceViewControll
 
 export function SpaceViewShared(props: SpaceViewProps): React.JSX.Element {
   const controller = useSpaceViewController(props);
+  const client = useSpaceClient();
   const theme = useNativeTheme();
+  const captureTarget = useRef<View>(null);
+  const [captureSize, setCaptureSize] = useState<FeedbackCaptureSize>({ width: 0, height: 0 });
+  const [feedbackRequested, setFeedbackRequested] = useState(false);
   const toggleMedia = (action: () => void) => {
     if (controller.simulatorMediaDisabled) {
       Alert.alert("Media unavailable", getIosSimulatorMediaMessage());
@@ -27,55 +35,58 @@ export function SpaceViewShared(props: SpaceViewProps): React.JSX.Element {
   };
 
   return (
-    <View style={[styles.space, { backgroundColor: theme.colors.darkCanvas }]}>
-      <SpaceTopBarAndroid formattedDuration={controller.formattedDuration} logoUrl={props.logoUrl} participantCount={controller.participantCount} spaceName={controller.spaceName} />
-      {props.reconnecting ? (
-        <View accessibilityLiveRegion="polite" style={[styles.recovery, { backgroundColor: theme.colors.primary }]}>
-          <Text style={[styles.recoveryText, { color: theme.colors.primaryForeground }]}>Reconnecting… controls will resume shortly.</Text>
+    <>
+      <View collapsable={false} onLayout={(event) => setCaptureSize({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height })} ref={captureTarget} style={[styles.space, { backgroundColor: theme.colors.darkCanvas }]}>
+        <SpaceTopBarAndroid recording={controller.recording} formattedDuration={controller.formattedDuration} logoUrl={props.logoUrl} participantCount={controller.participantCount} spaceName={controller.spaceName} />
+        {props.reconnecting ? (
+          <View accessibilityLiveRegion="polite" style={[styles.recovery, { backgroundColor: theme.colors.primary }]}>
+            <Text style={[styles.recoveryText, { color: theme.colors.primaryForeground }]}>Reconnecting… controls will resume shortly.</Text>
+          </View>
+        ) : null}
+        <View style={styles.stage}>
+          {controller.whiteboard.isOpen ? (
+            <SpaceWhiteboardSurface whiteboard={controller.whiteboard} />
+          ) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? (
+            <SpaceStageAndroid
+              activeReactions={controller.activeReactions}
+              handRaised={controller.handRaised}
+              isCompactViewport={controller.derived.isCompactViewport}
+              isMuted={controller.isMuted}
+              layoutMode={controller.layout.layout}
+              primaryContent={controller.derived.primaryContent}
+              raisedHandCount={controller.raisedHandCount}
+              screenShareTrack={controller.derived.screenShareTrack}
+              screenSharer={controller.derived.screenSharer}
+              selfName={controller.selfName}
+              stripParticipants={controller.derived.allParticipants}
+              whiteboard={{
+                isOpen: controller.whiteboard.isOpen,
+                canDraw: controller.whiteboard.canDraw,
+                elementCount: controller.whiteboard.elements.length,
+                participantCount: controller.whiteboard.openParticipants.length,
+              }}
+            />
+          ) : (
+            <SpaceGridAndroid gridPages={controller.derived.gridPages} participants={controller.derived.allParticipants} />
+          )}
         </View>
-      ) : null}
-      <View style={styles.stage}>
-        {controller.whiteboard.isOpen ? (
-          <SpaceWhiteboardSurface whiteboard={controller.whiteboard} />
-        ) : controller.derived.isStageMode || controller.layout.layout !== "grid" ? (
-          <SpaceStageAndroid
-            activeReactions={controller.activeReactions}
-            handRaised={controller.handRaised}
-            isCompactViewport={controller.derived.isCompactViewport}
-            isMuted={controller.isMuted}
-            layoutMode={controller.layout.layout}
-            primaryContent={controller.derived.primaryContent}
-            raisedHandCount={controller.raisedHandCount}
-            screenShareTrack={controller.derived.screenShareTrack}
-            screenSharer={controller.derived.screenSharer}
-            selfName={controller.selfName}
-            stripParticipants={controller.derived.allParticipants}
-            whiteboard={{
-              isOpen: controller.whiteboard.isOpen,
-              canDraw: controller.whiteboard.canDraw,
-              elementCount: controller.whiteboard.elements.length,
-              participantCount: controller.whiteboard.openParticipants.length,
-            }}
-          />
-        ) : (
-          <SpaceGridAndroid gridPages={controller.derived.gridPages} participants={controller.derived.allParticipants} />
-        )}
+        <SpaceBottomDockAndroid
+          isCameraOff={controller.isCameraOff}
+          isMuted={controller.isMuted}
+          onLeave={controller.handleLeave}
+          onOpenChat={controller.canChat ? () => controller.openPanel("chat") : undefined}
+          onOpenMore={() => controller.setActionsOpen(true)}
+          onToggleAudio={() => toggleMedia(controller.toggleAudio)}
+          onToggleVideo={() => toggleMedia(controller.toggleVideo)}
+          simulatorMediaDisabled={controller.simulatorMediaDisabled}
+          unreadChatCount={controller.chat.unreadCount}
+        />
+        <SpaceActionMenu controller={controller} onOpenDiagnostics={props.onOpenDiagnostics} onOpenFeedback={() => setFeedbackRequested(true)} />
+        {controller.panel === "settings" ? <SettingsSheet controller={controller} isOpen onClose={controller.closePanel} /> : <SpacePanelSheet controller={controller} />}
+        <ReactionPicker isOpen={controller.reactionPickerOpen} onClose={() => controller.setReactionPickerOpen(false)} onSelect={(reaction) => selectSpaceReaction(controller, reaction)} />
       </View>
-      <SpaceBottomDockAndroid
-        isCameraOff={controller.isCameraOff}
-        isMuted={controller.isMuted}
-        onLeave={controller.handleLeave}
-        onOpenChat={controller.canChat ? () => controller.openPanel("chat") : undefined}
-        onOpenMore={() => controller.setActionsOpen(true)}
-        onToggleAudio={() => toggleMedia(controller.toggleAudio)}
-        onToggleVideo={() => toggleMedia(controller.toggleVideo)}
-        simulatorMediaDisabled={controller.simulatorMediaDisabled}
-        unreadChatCount={controller.chat.unreadCount}
-      />
-      <SpaceActionMenu controller={controller} onOpenDiagnostics={props.onOpenDiagnostics} />
-      {controller.panel === "settings" ? <SettingsSheet controller={controller} isOpen onClose={controller.closePanel} /> : <SpacePanelSheet controller={controller} />}
-      <ReactionPicker isOpen={controller.reactionPickerOpen} onClose={() => controller.setReactionPickerOpen(false)} onSelect={(reaction) => selectSpaceReaction(controller, reaction)} />
-    </View>
+      <FeedbackSheet client={client} captureSize={captureSize} captureTarget={captureTarget} feedbackEvidence={props.feedbackEvidence} onClose={() => setFeedbackRequested(false)} requested={feedbackRequested} />
+    </>
   );
 }
 

package/src/components/SpaceView.tsx

@@ -1,4 +1,4 @@
-import type { ChatUploadFile } from "@q9labsai/chalk-client";
+import type { ChatUploadFile, FeedbackEvidenceInput } from "@q9labsai/chalk-client";
 import { resolvePlatformVariant } from "../platform/platform";
 import type { Layout } from "../ui/native-types";
 import { SpaceViewAndroid } from "./SpaceView.android";
@@ -30,6 +30,7 @@ export interface SpaceViewProps {
   onLeave: () => void | Promise<void>;
   onEndEpisode?: () => void | Promise<void>;
   onOpenDiagnostics?: () => void;
+  feedbackEvidence?: Partial<FeedbackEvidenceInput>;
   onDiagnosticsChange?: (snapshot: SpaceViewDiagnosticsSnapshot) => void;
   /** Selects files; the SDK owns bounds, upload, and send sequencing. */
   pickChatFiles?: () => Promise<readonly ChatUploadFile[]>;

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

@@ -0,0 +1,296 @@
+import type { FeedbackCategory, FeedbackEvidenceInput, FeedbackPrepared, FeedbackScreenshotCapture, FeedbackScreenshotUnavailable, SpaceClient } from "@q9labsai/chalk-client";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Image, KeyboardAvoidingView, Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View } from "react-native";
+
+import { useNativeTheme } from "../../ui/native-theme";
+import { Theme } from "../../ui/theme";
+import { createNativeFeedbackEvidence } from "../../feedback/native-evidence";
+import { captureNativeFeedbackView, type FeedbackCaptureSize, type FeedbackCaptureTarget } from "../../feedback/native-capture";
+
+type FeedbackScreenshot = FeedbackScreenshotCapture | FeedbackScreenshotUnavailable;
+
+export interface FeedbackSheetProps {
+  readonly client: SpaceClient;
+  readonly requested: boolean;
+  readonly captureTarget: FeedbackCaptureTarget;
+  readonly captureSize: FeedbackCaptureSize;
+  readonly feedbackEvidence?: Partial<FeedbackEvidenceInput>;
+  readonly onClose: () => void;
+}
+
+const categories: readonly FeedbackCategory[] = ["bug", "feature_request", "other"];
+
+export function FeedbackSheet({ client, requested, captureTarget, captureSize, feedbackEvidence, onClose }: FeedbackSheetProps): React.JSX.Element {
+  const theme = useNativeTheme();
+  const [visible, setVisible] = useState(false);
+  const [preparing, setPreparing] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [category, setCategory] = useState<FeedbackCategory>("bug");
+  const [message, setMessage] = useState("");
+  const [screenshot, setScreenshot] = useState<FeedbackScreenshot>({ state: "unavailable", failure_code: "capture_failed" });
+  const [prepared, setPrepared] = useState<FeedbackPrepared | undefined>();
+  const [error, setError] = useState<string | undefined>();
+  const [receiptId, setReceiptId] = useState<string | undefined>();
+  const evidence = useMemo(() => ({ ...createNativeFeedbackEvidence(), ...feedbackEvidence }), [feedbackEvidence]);
+  const prepareScreenshot = useCallback((nextScreenshot: FeedbackScreenshot) => client.feedback.prepare({ evidence, screenshot_provider: () => nextScreenshot }), [client.feedback, evidence]);
+
+  useEffect(() => {
+    if (!requested) {
+      setVisible(false);
+      return;
+    }
+
+    let active = true;
+    setPreparing(true);
+    setSending(false);
+    setCategory("bug");
+    setMessage("");
+    setError(undefined);
+    setReceiptId(undefined);
+    setPrepared(undefined);
+
+    const prepare = async (): Promise<void> => {
+      let captured: FeedbackScreenshot;
+      try {
+        captured = await captureNativeFeedbackView(captureTarget, captureSize);
+      } catch {
+        captured = { state: "unavailable", failure_code: "capture_failed" };
+      }
+      if (!active) return;
+      setScreenshot(captured);
+      try {
+        const nextPrepared = await prepareScreenshot(captured);
+        if (!active) return;
+        setPrepared(nextPrepared);
+      } catch (cause) {
+        if (!active) return;
+        setError(errorMessage(cause));
+      } finally {
+        if (active) {
+          setPreparing(false);
+          setVisible(true);
+        }
+      }
+    };
+
+    void prepare();
+    return () => {
+      active = false;
+    };
+  }, [captureSize, captureTarget, prepareScreenshot, requested]);
+
+  const close = useCallback(() => {
+    setVisible(false);
+    onClose();
+  }, [onClose]);
+
+  const refresh = useCallback(async () => {
+    if (preparing || sending) return;
+    setPreparing(true);
+    setPrepared(undefined);
+    setError(undefined);
+    let captured: FeedbackScreenshot;
+    try {
+      captured = await captureNativeFeedbackView(captureTarget, captureSize);
+    } catch {
+      captured = { state: "unavailable", failure_code: "capture_failed" };
+    }
+    setScreenshot(captured);
+    try {
+      setPrepared(await prepareScreenshot(captured));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setPreparing(false);
+    }
+  }, [captureSize, captureTarget, prepareScreenshot, preparing, sending]);
+
+  const removeScreenshot = useCallback(async () => {
+    if (preparing || sending) return;
+    const removed: FeedbackScreenshot = { state: "removed" };
+    setPreparing(true);
+    setPrepared(undefined);
+    setScreenshot(removed);
+    setError(undefined);
+    try {
+      setPrepared(await prepareScreenshot(removed));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setPreparing(false);
+    }
+  }, [prepareScreenshot, preparing, sending]);
+
+  const submit = useCallback(async () => {
+    if (sending || !message.trim()) return;
+    setSending(true);
+    setError(undefined);
+    try {
+      const request = prepared ?? (await prepareScreenshot(screenshot));
+      setPrepared(request);
+      const receipt = await request.send({ category, message });
+      setReceiptId(receipt.id);
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setSending(false);
+    }
+  }, [category, message, prepareScreenshot, prepared, screenshot, sending]);
+
+  const selectCategory = useCallback((nextCategory: FeedbackCategory) => {
+    setCategory(nextCategory);
+    setPrepared(undefined);
+  }, []);
+
+  const updateMessage = useCallback((nextMessage: string) => {
+    setMessage(nextMessage);
+    setPrepared(undefined);
+  }, []);
+
+  const screenshotUri = screenshotDataUri(screenshot);
+  const canSubmit = message.trim().length > 0 && !sending && !preparing && !receiptId;
+
+  return (
+    <Modal animationType="slide" onRequestClose={close} transparent visible={visible}>
+      <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={styles.overlay}>
+        <Pressable accessibilityLabel="Close Feedback" onPress={close} style={styles.backdrop} />
+        <View style={[styles.sheet, { backgroundColor: theme.colors.background }]}>
+          <View style={styles.header}>
+            <View style={styles.headerCopy}>
+              <Text accessibilityRole="header" style={[styles.title, { color: theme.colors.foreground }]}>
+                Feedback
+              </Text>
+              <Text style={[styles.subtitle, { color: theme.colors.mutedForeground }]}>Tell Chalk what happened. We receive this report with safe diagnostic context.</Text>
+            </View>
+            <Pressable accessibilityLabel="Close Feedback" accessibilityRole="button" disabled={sending} onPress={close} style={styles.closeButton}>
+              <Text style={[styles.closeText, { color: theme.colors.foreground }]}>×</Text>
+            </Pressable>
+          </View>
+
+          {receiptId ? (
+            <View style={styles.success}>
+              <Text style={[styles.successTitle, { color: theme.colors.foreground }]}>Feedback sent to Chalk</Text>
+              <Text style={[styles.subtitle, { color: theme.colors.mutedForeground }]}>Thanks. Chalk received your report.</Text>
+              <Pressable accessibilityRole="button" onPress={close} style={[styles.primaryButton, { backgroundColor: theme.colors.primary }]}>
+                <Text style={[styles.primaryButtonText, { color: theme.colors.primaryForeground }]}>Done</Text>
+              </Pressable>
+            </View>
+          ) : (
+            <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+              <Text style={[styles.label, { color: theme.colors.foreground }]}>Category</Text>
+              <View style={styles.categoryRow}>
+                {categories.map((option) => (
+                  <Pressable
+                    accessibilityRole="button"
+                    accessibilityState={{ selected: category === option }}
+                    key={option}
+                    onPress={() => selectCategory(option)}
+                    style={[styles.categoryButton, { borderColor: theme.colors.border }, category === option && { backgroundColor: theme.colors.primary, borderColor: theme.colors.primary }]}
+                  >
+                    <Text style={[styles.categoryText, { color: category === option ? theme.colors.primaryForeground : theme.colors.foreground }]}>{categoryLabel(option)}</Text>
+                  </Pressable>
+                ))}
+              </View>
+
+              <Text style={[styles.label, { color: theme.colors.foreground }]}>Message</Text>
+              <TextInput
+                accessibilityLabel="Feedback message"
+                editable={!sending}
+                maxLength={8_000}
+                multiline
+                onChangeText={updateMessage}
+                placeholder={category === "bug" ? "What went wrong?" : category === "feature_request" ? "What would help?" : "What should Chalk know?"}
+                placeholderTextColor={theme.colors.placeholder}
+                style={[styles.messageInput, { borderColor: theme.colors.border, color: theme.colors.foreground }]}
+                textAlignVertical="top"
+                value={message}
+              />
+
+              <Text style={[styles.label, { color: theme.colors.foreground }]}>Screenshot</Text>
+              {screenshotUri ? (
+                <View style={styles.thumbnailFrame}>
+                  <Image accessibilityLabel="Feedback screenshot preview" source={{ uri: screenshotUri }} style={styles.thumbnail} />
+                  <View style={styles.thumbnailActions}>
+                    <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void refresh()} style={styles.smallButton}>
+                      <Text style={[styles.smallButtonText, { color: theme.colors.primary }]}>Refresh</Text>
+                    </Pressable>
+                    <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void removeScreenshot()} style={styles.smallButton}>
+                      <Text style={[styles.smallButtonText, { color: theme.colors.error }]}>Remove</Text>
+                    </Pressable>
+                  </View>
+                </View>
+              ) : (
+                <View style={[styles.unavailable, { borderColor: theme.colors.border }]}>
+                  <Text style={[styles.unavailableText, { color: theme.colors.mutedForeground }]}>Screenshot unavailable. You can still send Feedback.</Text>
+                  <Pressable accessibilityRole="button" disabled={preparing || sending} onPress={() => void refresh()} style={styles.smallButton}>
+                    <Text style={[styles.smallButtonText, { color: theme.colors.primary }]}>Refresh</Text>
+                  </Pressable>
+                </View>
+              )}
+              {screenshot.state === "partial" ? <Text style={[styles.notice, { color: theme.colors.mutedForeground }]}>Some protected content may be missing from this screenshot.</Text> : null}
+              {preparing ? <Text style={[styles.notice, { color: theme.colors.mutedForeground }]}>Preparing Feedback…</Text> : null}
+              {error ? (
+                <Text accessibilityLiveRegion="polite" style={[styles.error, { color: theme.colors.error }]}>
+                  {error}
+                </Text>
+              ) : null}
+
+              <Pressable accessibilityRole="button" disabled={!canSubmit} onPress={() => void submit()} style={[styles.primaryButton, { backgroundColor: theme.colors.primary }, !canSubmit && styles.disabledButton]}>
+                <Text style={[styles.primaryButtonText, { color: theme.colors.primaryForeground }]}>{sending ? "Sending…" : "Send Feedback"}</Text>
+              </Pressable>
+              <Text style={[styles.footer, { color: theme.colors.mutedForeground }]}>Chalk includes safe Space state, journey, and diagnostic details. It never includes credentials, names, or message content outside this report. There is no reply channel.</Text>
+            </ScrollView>
+          )}
+        </View>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+}
+
+function screenshotDataUri(screenshot: FeedbackScreenshot): string | undefined {
+  if (screenshot.state !== "captured" && screenshot.state !== "partial") return undefined;
+  return `data:${screenshot.mime_type};base64,${screenshot.data_base64}`;
+}
+
+function categoryLabel(category: FeedbackCategory): string {
+  if (category === "feature_request") return "Feature request";
+  if (category === "bug") return "Bug";
+  return "Other";
+}
+
+function errorMessage(cause: unknown): string {
+  return cause instanceof Error ? cause.message : "Chalk could not send Feedback.";
+}
+
+const styles = StyleSheet.create({
+  overlay: { flex: 1, justifyContent: "flex-end", backgroundColor: Theme.colors.darkOverlay55 },
+  backdrop: { ...StyleSheet.absoluteFillObject },
+  sheet: { maxHeight: "92%", borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 36 },
+  header: { flexDirection: "row", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 20 },
+  headerCopy: { flex: 1, gap: 4 },
+  title: { ...Theme.typography.heading },
+  subtitle: { ...Theme.typography.body },
+  closeButton: { alignItems: "center", borderColor: Theme.colors.border, borderRadius: Theme.radius.full, borderWidth: 1, height: 36, justifyContent: "center", width: 36 },
+  closeText: { fontSize: 24, lineHeight: 26 },
+  content: { gap: 12, paddingBottom: 8 },
+  label: { ...Theme.typography.label, marginTop: 4 },
+  categoryRow: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  categoryButton: { borderRadius: 14, borderWidth: 1, paddingHorizontal: 13, paddingVertical: 10 },
+  categoryText: { fontSize: 14, fontWeight: "700" },
+  messageInput: { minHeight: 116, borderRadius: 14, borderWidth: 1, padding: 14, fontSize: 15, lineHeight: 21 },
+  thumbnailFrame: { borderRadius: 16, overflow: "hidden", borderWidth: 1, borderColor: Theme.colors.border },
+  thumbnail: { width: "100%", height: 170, backgroundColor: Theme.colors.surfaceMuted },
+  thumbnailActions: { flexDirection: "row", gap: 16, paddingHorizontal: 12, paddingVertical: 8 },
+  unavailable: { borderRadius: 14, borderWidth: 1, padding: 14, gap: 4 },
+  unavailableText: { ...Theme.typography.body },
+  smallButton: { alignSelf: "flex-start", paddingVertical: 6, paddingHorizontal: 2 },
+  smallButtonText: { fontSize: 14, fontWeight: "700" },
+  notice: { ...Theme.typography.meta },
+  error: { ...Theme.typography.meta, fontWeight: "700" },
+  primaryButton: { alignItems: "center", borderRadius: 14, justifyContent: "center", minHeight: 50, marginTop: 8, paddingHorizontal: 16 },
+  primaryButtonText: { fontSize: 16, fontWeight: "800" },
+  disabledButton: { opacity: 0.45 },
+  footer: { ...Theme.typography.meta, marginTop: 4 },
+  success: { gap: 12, paddingVertical: 28 },
+  successTitle: { ...Theme.typography.subheading },
+});

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

@@ -7,9 +7,9 @@ import type { useSpaceViewController } from "./useSpaceViewController";
 
 type Controller = ReturnType<typeof useSpaceViewController>;
 
-export function SpaceActionMenu({ controller, onOpenDiagnostics }: { readonly controller: Controller; readonly onOpenDiagnostics?: () => void }): React.JSX.Element {
+export function SpaceActionMenu({ controller, onOpenDiagnostics, onOpenFeedback }: { readonly controller: Controller; readonly onOpenDiagnostics?: () => void; readonly onOpenFeedback?: () => void }): React.JSX.Element {
   const theme = useNativeTheme();
-  const actions = [
+  const actions: { label: string; onPress: () => void; disabled?: boolean }[] = [
     ...(controller.canInvite ? [{ label: "Invite participants", onPress: controller.handleInviteParticipants }] : []),
     ...(controller.canParticipants ? [{ label: "Participants", onPress: () => controller.openPanel("participants") }] : []),
     ...(controller.canChat ? [{ label: "Chat", onPress: () => controller.openPanel("chat") }] : []),
@@ -27,6 +27,15 @@ export function SpaceActionMenu({ controller, onOpenDiagnostics }: { readonly co
           },
         ]
       : []),
+    ...(controller.canManageRecording
+      ? [
+          {
+            label: controller.recording?.status === "recording" ? "Stop recording" : "Start recording",
+            disabled: !controller.canToggleRecording,
+            onPress: controller.toggleRecording,
+          },
+        ]
+      : []),
     ...(controller.canSettings ? [{ label: "Settings", onPress: () => controller.openPanel("settings") }] : []),
     ...(onOpenDiagnostics
       ? [
@@ -39,6 +48,17 @@ export function SpaceActionMenu({ controller, onOpenDiagnostics }: { readonly co
           },
         ]
       : []),
+    ...(onOpenFeedback
+      ? [
+          {
+            label: "Feedback",
+            onPress: () => {
+              controller.setActionsOpen(false);
+              onOpenFeedback();
+            },
+          },
+        ]
+      : []),
     ...(["grid", "focus", "presentation"] as const).map((layout) => ({
       label: `${layout === "grid" ? "Grid" : layout === "focus" ? "Focus" : "Presentation"} layout${controller.layout.layout === layout ? " (selected)" : ""}`,
       onPress: () => {
@@ -53,7 +73,7 @@ export function SpaceActionMenu({ controller, onOpenDiagnostics }: { readonly co
         <View style={[styles.sheet, { backgroundColor: theme.colors.background }]}>
           <Text style={[styles.title, { color: theme.colors.foreground }]}>Space actions</Text>
           {actions.map((action) => (
-            <Pressable key={action.label} onPress={action.onPress} style={({ pressed }) => [styles.action, { backgroundColor: theme.colors.card }, pressed && styles.pressed]}>
+            <Pressable accessibilityRole="button" accessibilityState={{ disabled: action.disabled ?? false }} disabled={action.disabled} key={action.label} onPress={action.onPress} style={({ pressed }) => [styles.action, { backgroundColor: theme.colors.card }, pressed && styles.pressed]}>
               <Text style={[styles.actionText, { color: theme.colors.foreground }]}>{action.label}</Text>
             </Pressable>
           ))}