@q9labsai/chalk-react-native 4.0.0

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

@@ -0,0 +1,97 @@
+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";
+import { Theme } from "../../ui/theme";
+import { useNativeTheme } from "../../ui/native-theme";
+
+export interface SpaceTopBarProps {
+  spaceName: string;
+  participantCount: number;
+  formattedDuration: string;
+  logoUrl?: string;
+}
+
+export function SpaceTopBarAndroid({ spaceName, participantCount, formattedDuration, logoUrl }: SpaceTopBarProps): React.JSX.Element {
+  const theme = useNativeTheme();
+  return (
+    <View style={[styles.topBar, { backgroundColor: theme.colors.darkCanvas, borderColor: theme.colors.border }]}>
+      <View style={styles.topBarLeft}>
+        {logoUrl ? <Image accessibilityLabel="Chalk" source={{ uri: logoUrl }} style={styles.logo} /> : null}
+        <View style={[styles.connectionDot, { backgroundColor: theme.colors.success }]} />
+        <Text style={[styles.topBarSpaceName, { color: theme.colors.foreground }]} numberOfLines={1}>
+          {spaceName}
+        </Text>
+        <View style={[styles.timerBadge, { backgroundColor: theme.colors.surface }]}>
+          <Text style={[styles.timerText, { color: theme.colors.mutedForeground }]}>{formattedDuration}</Text>
+        </View>
+      </View>
+      <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>
+      </View>
+    </View>
+  );
+}
+
+export { SpaceTopBarAndroid as SpaceTopBar };
+
+const styles = StyleSheet.create({
+  topBar: {
+    paddingTop: Platform.OS === "ios" ? 54 : 42,
+    paddingBottom: 14,
+    paddingHorizontal: 24,
+    backgroundColor: Theme.colors.darkCanvas,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderBottomWidth: 1,
+    borderColor: Theme.colors.whiteOverlay06,
+    width: "100%",
+  },
+  topBarLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    flex: 1,
+  },
+  logo: { width: 24, height: 24, borderRadius: 6 },
+  connectionDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: Theme.colors.success,
+  },
+  topBarSpaceName: {
+    color: Theme.colors.onDark,
+    fontSize: 14,
+    fontWeight: "800",
+    letterSpacing: -0.2,
+  },
+  timerBadge: {
+    backgroundColor: Theme.colors.whiteOverlay10,
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 6,
+    marginLeft: 4,
+  },
+  timerText: {
+    color: Theme.colors.whiteOverlay60,
+    fontSize: 11,
+    fontWeight: "700",
+    fontVariant: ["tabular-nums"],
+  },
+  topBarRight: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: Theme.colors.whiteOverlay08,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 10,
+  },
+  topBarCount: {
+    color: Theme.colors.onDark,
+    fontSize: 12,
+    fontWeight: "800",
+  },
+});

package/src/components/native-space-view/SpaceWhiteboardSurface.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it, vi } from "vitest";
+
+const nativeTheme = vi.hoisted(() => ({ colorScheme: "light" as "light" | "dark" }));
+
+vi.mock("react", () => ({
+  useCallback: <T,>(callback: T) => callback,
+}));
+vi.mock("react-native", () => ({
+  StyleSheet: { create: <Styles,>(styles: Styles) => styles },
+}));
+vi.mock("../../ui/native-theme", () => ({
+  useNativeTheme: () => nativeTheme,
+}));
+vi.mock("../EmbeddedWhiteboard", () => ({
+  EmbeddedWhiteboard: "EmbeddedWhiteboard",
+}));
+
+import type { SpaceWhiteboardState } from "./useSpaceViewPanels";
+import { forwardNativeSpaceWhiteboardFailure, forwardNativeSpaceWhiteboardMetric, shouldRenderNativeSpaceWhiteboard, SpaceWhiteboardSurface } from "./SpaceWhiteboardSurface";
+
+describe("SpaceWhiteboardSurface", () => {
+  it("renders only for an open canonical whiteboard transport", () => {
+    expect(shouldRenderNativeSpaceWhiteboard(controller({ isOpen: false, transport: null }))).toBe(false);
+    expect(shouldRenderNativeSpaceWhiteboard(controller({ isOpen: true, transport: null }))).toBe(false);
+    expect(
+      shouldRenderNativeSpaceWhiteboard(
+        controller({
+          isOpen: true,
+          transport: {} as NonNullable<SpaceWhiteboardState["transport"]>,
+        }),
+      ),
+    ).toBe(true);
+  });
+
+  it("forwards renderer metrics in production runtimes", () => {
+    const onMetric = vi.fn();
+    const metric = { name: "whiteboard.frame.delay_ms", value: 17 };
+
+    forwardNativeSpaceWhiteboardMetric(metric, onMetric);
+
+    expect(onMetric).toHaveBeenCalledWith(metric);
+  });
+
+  it("forwards renderer failures without relying on development logging", () => {
+    const onMetric = vi.fn();
+    forwardNativeSpaceWhiteboardFailure({ code: "renderer_load_failed", recoverable: true }, onMetric);
+    expect(onMetric).toHaveBeenCalledWith({
+      name: "whiteboard.renderer.failure",
+      value: 1,
+      attributes: { code: "renderer_load_failed", recoverable: true },
+    });
+
+    const element = SpaceWhiteboardSurface({ whiteboard: controller({ isOpen: true, transport: {} as NonNullable<SpaceWhiteboardState["transport"]>, onMetric }) });
+    element?.props.onError({ code: "renderer_stopped", message: "renderer stopped", recoverable: true });
+    expect(onMetric).toHaveBeenCalledTimes(2);
+  });
+
+  it("passes the active NativeTheme color scheme to the embedded renderer", () => {
+    nativeTheme.colorScheme = "light";
+    const lightElement = SpaceWhiteboardSurface({ whiteboard: controller({ isOpen: true, transport: {} as NonNullable<SpaceWhiteboardState["transport"]> }) });
+    expect(lightElement).toMatchObject({ props: { theme: "light" } });
+
+    nativeTheme.colorScheme = "dark";
+    const darkElement = SpaceWhiteboardSurface({ whiteboard: controller({ isOpen: true, transport: {} as NonNullable<SpaceWhiteboardState["transport"]> }) });
+    expect(darkElement).toMatchObject({ props: { theme: "dark" } });
+  });
+});
+
+function controller(overrides: Partial<SpaceWhiteboardState>): SpaceWhiteboardState {
+  return {
+    isOpen: false,
+    canDraw: false,
+    canClear: false,
+    elements: [],
+    openParticipants: [],
+    transport: null,
+    journeyId: "journey-test",
+    open: vi.fn(),
+    close: vi.fn(),
+    toggle: vi.fn(),
+    requestSync: vi.fn(),
+    clear: vi.fn(),
+    ...overrides,
+  };
+}

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

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+import { StyleSheet } from "react-native";
+
+import { EmbeddedWhiteboard } from "../EmbeddedWhiteboard";
+import type { WhiteboardMetric } from "../../telemetry";
+import { useNativeTheme } from "../../ui/native-theme";
+import type { SpaceWhiteboardState } from "./useSpaceViewPanels";
+
+export interface SpaceWhiteboardSurfaceProps {
+  readonly whiteboard: SpaceWhiteboardState;
+}
+
+export function shouldRenderNativeSpaceWhiteboard(whiteboard: SpaceWhiteboardState): whiteboard is SpaceWhiteboardState & {
+  readonly transport: NonNullable<SpaceWhiteboardState["transport"]>;
+} {
+  return whiteboard.isOpen && whiteboard.transport !== null;
+}
+
+export function forwardNativeSpaceWhiteboardMetric(metric: WhiteboardMetric, onMetric: SpaceWhiteboardState["onMetric"]): void {
+  onMetric?.(metric);
+}
+
+export function forwardNativeSpaceWhiteboardFailure(error: { readonly code: string; readonly recoverable: boolean }, onMetric: SpaceWhiteboardState["onMetric"]): void {
+  onMetric?.({
+    name: "whiteboard.renderer.failure",
+    value: 1,
+    attributes: { code: error.code, recoverable: error.recoverable },
+  });
+}
+
+export function SpaceWhiteboardSurface({ whiteboard }: SpaceWhiteboardSurfaceProps): React.JSX.Element | null {
+  const nativeTheme = useNativeTheme();
+  const handleError = useCallback(
+    (error: { readonly code: string; readonly message: string; readonly recoverable: boolean }) => {
+      forwardNativeSpaceWhiteboardFailure(error, whiteboard.onMetric);
+    },
+    [whiteboard.onMetric],
+  );
+  const handleMetric = useCallback(
+    (metric: WhiteboardMetric) => {
+      forwardNativeSpaceWhiteboardMetric(metric, whiteboard.onMetric);
+    },
+    [whiteboard.onMetric],
+  );
+
+  if (!shouldRenderNativeSpaceWhiteboard(whiteboard)) return null;
+
+  return (
+    <EmbeddedWhiteboard
+      canClear={whiteboard.canClear}
+      canDraw={whiteboard.canDraw}
+      journeyId={whiteboard.journeyId}
+      onError={handleError}
+      onMetric={handleMetric}
+      style={styles.surface}
+      theme={nativeTheme.colorScheme}
+      transport={whiteboard.transport}
+      {...(whiteboard.traceparent ? { traceparent: whiteboard.traceparent } : {})}
+      {...(whiteboard.tracestate ? { tracestate: whiteboard.tracestate } : {})}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  surface: {
+    flex: 1,
+    width: "100%",
+  },
+});

package/src/components/native-space-view/diagnostics.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+
+import { buildSpaceViewDiagnosticsSnapshot } from "./diagnostics";
+
+describe("buildSpaceViewDiagnosticsSnapshot", () => {
+  it("surfaces canonical feature and moderation availability", () => {
+    const snapshot = buildSpaceViewDiagnosticsSnapshot({
+      featureFlags: {
+        chat: true,
+        participants: true,
+        screenShare: false,
+        reactions: true,
+        handRaise: true,
+        whiteboard: true,
+      },
+      canEndEpisode: false,
+      participantCount: 2,
+      raisedHandCount: 0,
+      unreadChatCount: 0,
+      isScreenShareActive: false,
+      isLocalScreenSharing: false,
+      screenShareSharerParticipantId: null,
+    });
+
+    expect(snapshot.actionAvailability.screenShare).toMatchObject({
+      enabled: false,
+      reason: "feature-disabled",
+    });
+    expect(snapshot.actionAvailability.moderation.reason).toBe("capability-unavailable");
+  });
+});

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

@@ -0,0 +1,84 @@
+export interface SpaceViewFeatureFlags {
+  readonly chat: boolean;
+  readonly participants: boolean;
+  readonly screenShare: boolean;
+  readonly reactions: boolean;
+  readonly handRaise: boolean;
+  readonly whiteboard: boolean;
+}
+
+export interface SpaceViewActionAvailability {
+  readonly enabled: boolean;
+  readonly reason: string | null;
+  readonly detail: string | null;
+}
+
+export interface SpaceViewDiagnosticsSnapshot {
+  readonly canEndEpisode: boolean;
+  readonly participantCount: number;
+  readonly raisedHandCount: number;
+  readonly unreadChatCount: number;
+  readonly featureFlags: SpaceViewFeatureFlags;
+  readonly actionAvailability: {
+    readonly screenShare: SpaceViewActionAvailability & {
+      readonly isActive: boolean;
+      readonly isLocalSharing: boolean;
+      readonly sharerParticipantId: string | null;
+      readonly visibleInBottomDock: boolean;
+      readonly enabledInActionsSheet: boolean;
+    };
+    readonly reactions: SpaceViewActionAvailability;
+    readonly handRaise: SpaceViewActionAvailability;
+    readonly chat: SpaceViewActionAvailability;
+    readonly participants: SpaceViewActionAvailability;
+    readonly whiteboard: SpaceViewActionAvailability;
+    readonly moderation: SpaceViewActionAvailability;
+  };
+}
+
+export function buildSpaceViewDiagnosticsSnapshot(input: {
+  readonly featureFlags: SpaceViewFeatureFlags;
+  readonly canEndEpisode: boolean;
+  readonly participantCount: number;
+  readonly raisedHandCount: number;
+  readonly unreadChatCount: number;
+  readonly isScreenShareActive: boolean;
+  readonly isLocalScreenSharing: boolean;
+  readonly screenShareSharerParticipantId: string | null;
+  readonly canModerate: boolean;
+  readonly screenShareAvailability?: SpaceViewActionAvailability;
+}): SpaceViewDiagnosticsSnapshot {
+  const availability = (enabled: boolean, feature: keyof SpaceViewFeatureFlags) => (enabled ? enabledAction() : disabledAction(`features.${feature}=false`));
+  const screenShare = input.screenShareAvailability ?? availability(input.featureFlags.screenShare, "screenShare");
+  return {
+    canEndEpisode: input.canEndEpisode,
+    participantCount: input.participantCount,
+    raisedHandCount: input.raisedHandCount,
+    unreadChatCount: input.unreadChatCount,
+    featureFlags: input.featureFlags,
+    actionAvailability: {
+      screenShare: {
+        ...screenShare,
+        isActive: input.isScreenShareActive,
+        isLocalSharing: input.isLocalScreenSharing,
+        sharerParticipantId: input.screenShareSharerParticipantId,
+        visibleInBottomDock: false,
+        enabledInActionsSheet: screenShare.enabled,
+      },
+      reactions: availability(input.featureFlags.reactions, "reactions"),
+      handRaise: availability(input.featureFlags.handRaise, "handRaise"),
+      chat: availability(input.featureFlags.chat, "chat"),
+      participants: availability(input.featureFlags.participants, "participants"),
+      whiteboard: availability(input.featureFlags.whiteboard, "whiteboard"),
+      moderation: input.canModerate ? enabledAction() : { enabled: false, reason: "capability-unavailable", detail: "The local participant cannot moderate participants" },
+    },
+  };
+}
+
+function enabledAction(): SpaceViewActionAvailability {
+  return { enabled: true, reason: null, detail: null };
+}
+
+function disabledAction(detail: string): SpaceViewActionAvailability {
+  return { enabled: false, reason: "feature-disabled", detail };
+}

package/src/components/native-space-view/format-space-duration.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+
+import { formatSpaceDuration } from "./format-space-duration";
+
+describe("formatSpaceDuration", () => {
+  it.each([
+    [0, "0:00"],
+    [59, "0:59"],
+    [125, "2:05"],
+  ])("formats %s elapsed seconds", (secondsElapsed, expected) => {
+    expect(formatSpaceDuration(secondsElapsed)).toBe(expected);
+  });
+});

package/src/components/native-space-view/format-space-duration.ts

@@ -0,0 +1,3 @@
+export function formatSpaceDuration(secondsElapsed: number): string {
+  return `${Math.floor(secondsElapsed / 60)}:${String(secondsElapsed % 60).padStart(2, "0")}`;
+}

package/src/components/native-space-view/native-space-grid-keys.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+
+import { nativeSpaceGridKey } from "./native-space-grid-keys";
+
+describe("nativeSpaceGridKey", () => {
+  it("changes when the ordered participant ids change and identifies an empty page", () => {
+    expect(nativeSpaceGridKey("page", [{ id: "participant-a" }, { id: "participant-b" }] as never)).toBe("page-participant-a|participant-b");
+    expect(nativeSpaceGridKey("page", [{ id: "participant-b" }, { id: "participant-a" }] as never)).toBe("page-participant-b|participant-a");
+    expect(nativeSpaceGridKey("page", [])).toBe("page-empty");
+  });
+});

package/src/components/native-space-view/native-space-grid-keys.ts

@@ -0,0 +1,6 @@
+import type { SpaceParticipant } from "./types";
+
+export function nativeSpaceGridKey(prefix: string, participants: readonly SpaceParticipant[]): string {
+  const participantIds = participants.map((participant) => participant.id).join("|");
+  return `${prefix}-${participantIds || "empty"}`;
+}

package/src/components/native-space-view/native-space-page-store.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSpacePageStore } from "./native-space-page-store";
+
+describe("createSpacePageStore", () => {
+  it("keeps a non-negative page and notifies subscribers when it changes", () => {
+    const store = createSpacePageStore();
+    const listener = vi.fn();
+    const unsubscribe = store.subscribe(listener);
+
+    store.setPage(2);
+    store.setPage(2);
+    store.clampToPageCount(1);
+
+    expect(store.getSnapshot()).toBe(0);
+    expect(listener).toHaveBeenCalledTimes(2);
+
+    unsubscribe();
+    store.setPage(3);
+
+    expect(store.getSnapshot()).toBe(3);
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+});

package/src/components/native-space-view/native-space-page-store.ts

@@ -0,0 +1,41 @@
+export interface SpacePageStore {
+  getSnapshot(): number;
+  subscribe(listener: () => void): () => void;
+  setPage(page: number): void;
+  clampToPageCount(pageCount: number): void;
+}
+
+export function createSpacePageStore(): SpacePageStore {
+  let page = 0;
+  const listeners = new Set<() => void>();
+
+  return {
+    getSnapshot: () => page,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    setPage: (nextPage) => {
+      const nextPageIndex = Math.max(0, nextPage);
+      if (nextPageIndex === page) {
+        return;
+      }
+
+      page = nextPageIndex;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+    clampToPageCount: (pageCount) => {
+      const nextPageIndex = Math.min(page, Math.max(0, pageCount - 1));
+      if (nextPageIndex === page) {
+        return;
+      }
+
+      page = nextPageIndex;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+  };
+}

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

@@ -0,0 +1,21 @@
+export interface NativeScreenShareAvailability {
+  enabled: boolean;
+  reason: string | null;
+  detail: string | null;
+}
+
+export function resolveNativeScreenShareAvailability({ featureEnabled }: { featureEnabled: boolean }): NativeScreenShareAvailability {
+  if (!featureEnabled) {
+    return {
+      enabled: false,
+      reason: "feature-disabled",
+      detail: "features.screenShare=false in SpaceView props",
+    };
+  }
+
+  return {
+    enabled: true,
+    reason: null,
+    detail: null,
+  };
+}

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

@@ -0,0 +1,33 @@
+import { CHALK_CHAT_ATTACHMENT_LIMITS } from "@q9labsai/chalk-client";
+import { describe, expect, it, vi } from "vitest";
+
+import { normalizeChatFileDrafts, uploadAndSendNativeChatAttachments } from "./space-chat-attachments";
+
+describe("native Space chat attachments", () => {
+  it("accepts lazy file readers and enforces the client bounds", () => {
+    const result = normalizeChatFileDrafts([
+      { name: "note.txt", type: "text/plain", size: 5, arrayBuffer: async () => new TextEncoder().encode("hello").buffer },
+      { fileName: "image.png", mimeType: "image/png", bytes: new Uint8Array([1, 2]).buffer },
+    ]);
+
+    expect(result.error).toBeNull();
+    expect(result.files.map((file) => file.fileName)).toEqual(["note.txt", "image.png"]);
+  });
+
+  it("rejects unsupported types and excess staged files before upload", () => {
+    expect(normalizeChatFileDrafts([{ name: "script.js", type: "application/javascript", size: 1, arrayBuffer: async () => new ArrayBuffer(1) }])).toMatchObject({ files: [], error: "This file type is not supported in Space chat." });
+    const files = Array.from({ length: CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage + 1 }, (_, index) => ({ name: `note-${index}.txt`, type: "text/plain", size: 1, arrayBuffer: async () => new ArrayBuffer(1) }));
+    expect(normalizeChatFileDrafts(files)).toMatchObject({ files: [], error: `You can attach up to ${CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage} files per message.` });
+  });
+
+  it("uploads every staged file before sending an attachment-only message", async () => {
+    const files = normalizeChatFileDrafts([{ name: "note.txt", type: "text/plain", size: 1, arrayBuffer: async () => new ArrayBuffer(1) }]).files;
+    const upload = vi.fn(async () => ({ attachmentId: "note.txt", fileName: "note.txt", mimeType: "text/plain" as const, byteLength: 1 }));
+    const send = vi.fn(async () => undefined);
+
+    await uploadAndSendNativeChatAttachments(files, "", upload, send);
+
+    expect(upload).toHaveBeenCalledOnce();
+    expect(send).toHaveBeenCalledWith({ text: "", attachments: [{ attachmentId: "note.txt", fileName: "note.txt", mimeType: "text/plain", byteLength: 1 }] });
+  });
+});

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

@@ -0,0 +1,39 @@
+import { CHALK_CHAT_ATTACHMENT_LIMITS, CHALK_CHAT_ATTACHMENT_MIME_TYPES, type ChatAttachment, type ChatSendInput, type ChatUploadFile } from "@q9labsai/chalk-client";
+
+const allowedMimeTypes = new Set<string>(CHALK_CHAT_ATTACHMENT_MIME_TYPES);
+const encoder = new TextEncoder();
+
+export interface NativeChatFileDraft {
+  readonly file: ChatUploadFile;
+  readonly fileName: string;
+  readonly mimeType: string;
+  readonly byteLength: number;
+}
+
+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 };
+}
+
+export function validateChatFileDraft(draft: NativeChatFileDraft): string | null {
+  if (!draft.fileName || encoder.encode(draft.fileName).byteLength > CHALK_CHAT_ATTACHMENT_LIMITS.maximumFileNameBytes) return "This file name is too long.";
+  if (!Number.isSafeInteger(draft.byteLength) || draft.byteLength < 1 || draft.byteLength > CHALK_CHAT_ATTACHMENT_LIMITS.maximumByteLength) return "This file is too large or empty.";
+  if (!allowedMimeTypes.has(draft.mimeType)) return "This file type is not supported in Space chat.";
+  return null;
+}
+
+export function normalizeChatFileDrafts(files: readonly ChatUploadFile[]): { readonly files: readonly NativeChatFileDraft[]; readonly error: string | null } {
+  if (files.length > CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage) {
+    return { files: [], error: `You can attach up to ${CHALK_CHAT_ATTACHMENT_LIMITS.maximumPerMessage} files per message.` };
+  }
+  const drafts = files.map(describeChatUploadFile);
+  const error = drafts.map(validateChatFileDraft).find((message): message is string => message !== null) ?? null;
+  return error ? { files: [], error } : { files: drafts, error: null };
+}
+
+export async function uploadAndSendNativeChatAttachments(files: readonly NativeChatFileDraft[], text: string, upload: (file: ChatUploadFile) => Promise<ChatAttachment>, send: (input: ChatSendInput) => Promise<unknown>): Promise<void> {
+  const attachments = await Promise.all(files.map((draft) => upload(draft.file)));
+  await send({ text, ...(attachments.length ? { attachments } : {}) });
+}

package/src/components/native-space-view/space-panel-layout.ts

@@ -0,0 +1,10 @@
+export const phoneSpacePanelSheetFrame = {
+  height: "82%",
+  minHeight: 360,
+  overflow: "hidden",
+} as const;
+
+export const phoneSpacePanelContentFrame = {
+  flex: 1,
+  minHeight: 0,
+} as const;

package/src/components/native-space-view/space-progressive-surface-helpers.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+
+import { buildParticipantActionDescriptors, formatChatTimestamp } from "./space-progressive-surface-helpers";
+
+describe("space progressive surface helpers", () => {
+  it("only exposes capability-backed Participant actions", () => {
+    const actions = buildParticipantActionDescriptors({
+      canMuteParticipants: true,
+      canRequestMedia: false,
+      canStopParticipantCamera: false,
+      canStopParticipantScreenShare: false,
+      canRemoveParticipants: true,
+    });
+
+    expect(actions.map((action) => action.label)).toEqual(["Mute microphone", "Remove Participant"]);
+    expect(actions.at(-1)?.destructive).toBe(true);
+  });
+
+  it("formats valid chat timestamps and ignores empty metadata", () => {
+    expect(formatChatTimestamp(0)).toBe("");
+    expect(formatChatTimestamp(Number.NaN)).toBe("");
+    expect(formatChatTimestamp(Date.UTC(2026, 7, 4, 12, 34))).toMatch(/\d{1,2}:34/);
+  });
+});

package/src/components/native-space-view/space-progressive-surface-helpers.ts

@@ -0,0 +1,33 @@
+export type ParticipantActionKind = "mute" | "requestUnmute" | "requestCamera" | "stopCamera" | "stopScreenShare" | "remove";
+
+export interface ParticipantActionAvailability {
+  readonly canMuteParticipants: boolean;
+  readonly canRequestMedia: boolean;
+  readonly canStopParticipantCamera: boolean;
+  readonly canStopParticipantScreenShare: boolean;
+  readonly canRemoveParticipants: boolean;
+}
+
+export interface ParticipantActionDescriptor {
+  readonly kind: ParticipantActionKind;
+  readonly label: string;
+  readonly destructive?: boolean;
+}
+
+export function buildParticipantActionDescriptors(availability: ParticipantActionAvailability): readonly ParticipantActionDescriptor[] {
+  const actions: ParticipantActionDescriptor[] = [];
+  if (availability.canMuteParticipants) actions.push({ kind: "mute", label: "Mute microphone" });
+  if (availability.canRequestMedia) {
+    actions.push({ kind: "requestUnmute", label: "Ask to unmute" });
+    actions.push({ kind: "requestCamera", label: "Ask to turn on camera" });
+  }
+  if (availability.canStopParticipantCamera) actions.push({ kind: "stopCamera", label: "Stop camera" });
+  if (availability.canStopParticipantScreenShare) actions.push({ kind: "stopScreenShare", label: "Stop sharing" });
+  if (availability.canRemoveParticipants) actions.push({ kind: "remove", label: "Remove Participant", destructive: true });
+  return actions;
+}
+
+export function formatChatTimestamp(timestamp: number): string {
+  if (!Number.isFinite(timestamp) || timestamp <= 0) return "";
+  return new Date(timestamp).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}

package/src/components/native-space-view/space-progressive-surface-types.ts

@@ -0,0 +1,3 @@
+import type { useSpaceViewController } from "./useSpaceViewController";
+
+export type SpaceController = ReturnType<typeof useSpaceViewController>;