feat: stream files as binary frames over WebSocket (#659)

Replace base64-in-JSON file transfers with binary WebSocket frames to
unblock the JS thread when assistant markdown messages contain images.
Receive cost (JSON.parse over multi-MB base64) and persist cost (base64
re-encode to disk) both removed.

- Split daemon-client `exploreFileSystem` into `listDirectory` + `readFile`;
  `readFile` returns `{ bytes, mime, size, modifiedAt }`. Encoding stays
  private to the seam.
- New `packages/server/src/shared/binary-frames/` module hosts terminal
  frames (moved from `terminal-stream-protocol.ts`) and new file-transfer
  opcodes (`FileBegin` / `FileChunk` / `FileEnd`) with request-id correlation.
- Add optional `acceptBinary` to `FileExplorerRequestSchema`. New daemons
  emit binary frames when set; legacy JSON path remains for old clients.
  Compat fallback lives only inside `readFile`.
- New `persistAttachmentFromBytes` writes bytes directly: native via
  `expo-file-system` `File.write(Uint8Array)`, web via Blob -> IndexedDB,
  desktop via new `write_attachment_bytes` IPC. `persistAttachmentFromBase64`
  removed.
This commit is contained in:
Mohamed Boudra
2026-05-02 14:02:27 +08:00
committed by GitHub
parent b6c43088fb
commit bb889dae99
44 changed files with 1630 additions and 436 deletions
@@ -14,6 +14,21 @@ const fileSystemMock = vi.hoisted(() => ({
readAsStringAsync: vi.fn(async () => "AAECAw=="),
deleteAsync: vi.fn(async () => {}),
readDirectoryAsync: vi.fn(async () => []),
fileWrite: vi.fn((_uri: string, _content: Uint8Array) => {}),
}));
vi.mock("expo-file-system", () => ({
File: class {
uri: string;
constructor(uri: string) {
this.uri = uri;
}
write(content: Uint8Array) {
fileSystemMock.fileWrite(this.uri, content);
}
},
}));
vi.mock("expo-file-system/legacy", () => ({
@@ -37,9 +52,10 @@ describe("local file attachment store", () => {
fileSystemMock.readAsStringAsync.mockClear();
fileSystemMock.deleteAsync.mockClear();
fileSystemMock.readDirectoryAsync.mockClear();
fileSystemMock.fileWrite.mockClear();
});
it("writes raw base64 sources directly to the managed file path", async () => {
it("writes raw byte sources directly to the managed file path", async () => {
const store = createLocalFileAttachmentStore({
storageType: "native-file",
baseDirectoryName: "preview-assets",
@@ -50,14 +66,14 @@ describe("local file attachment store", () => {
id: "preview_8_test",
mimeType: "image/png",
fileName: "result.png",
source: { kind: "base64", base64: "AAECAw==" },
source: { kind: "bytes", bytes: new Uint8Array([0, 1, 2, 3]) },
});
expect(fileSystemMock.writeAsStringAsync).toHaveBeenCalledWith(
expect(fileSystemMock.fileWrite).toHaveBeenCalledWith(
"file:///cache/preview-assets/preview_8_test.png",
"AAECAw==",
{ encoding: "base64" },
new Uint8Array([0, 1, 2, 3]),
);
expect(fileSystemMock.writeAsStringAsync).not.toHaveBeenCalled();
expect(attachment).toMatchObject({
id: "preview_8_test",
mimeType: "image/png",
@@ -1,3 +1,4 @@
import { File } from "expo-file-system";
import * as FileSystem from "expo-file-system/legacy";
import {
type AttachmentStore,
@@ -6,7 +7,6 @@ import {
type SaveAttachmentInput,
} from "@/attachments/types";
import {
blobToBase64,
fileUriToPath,
generateAttachmentId,
getFileExtensionFromName,
@@ -45,6 +45,15 @@ async function ensureDirectory(uri: string): Promise<void> {
await FileSystem.makeDirectoryAsync(uri, { intermediates: true });
}
async function dataUrlToBytes(dataUrl: string): Promise<Uint8Array> {
const response = await fetch(dataUrl);
return new Uint8Array(await response.arrayBuffer());
}
async function blobToBytes(blob: Blob): Promise<Uint8Array> {
return new Uint8Array(await blob.arrayBuffer());
}
async function writeFromSource(input: {
source: SaveAttachmentInput["source"];
targetUri: string;
@@ -59,30 +68,16 @@ async function writeFromSource(input: {
return;
}
let bytes: Uint8Array;
if (input.source.kind === "data_url") {
const parsed = parseDataUrl(input.source.dataUrl);
const mimeType = normalizeMimeType(parsed.mimeType || input.mimeType);
const base64 = parsed.base64;
await FileSystem.writeAsStringAsync(input.targetUri, base64, {
encoding: FileSystem.EncodingType.Base64,
});
if (mimeType !== input.mimeType) {
return;
}
return;
bytes = await dataUrlToBytes(input.source.dataUrl);
} else if (input.source.kind === "blob") {
bytes = await blobToBytes(input.source.blob);
} else {
bytes = input.source.bytes;
}
if (input.source.kind === "base64") {
await FileSystem.writeAsStringAsync(input.targetUri, input.source.base64, {
encoding: FileSystem.EncodingType.Base64,
});
return;
}
const base64 = await blobToBase64(input.source.blob);
await FileSystem.writeAsStringAsync(input.targetUri, base64, {
encoding: FileSystem.EncodingType.Base64,
});
new File(input.targetUri).write(bytes);
}
function attachmentUri(metadata: AttachmentMetadata): string {
+9 -8
View File
@@ -1,7 +1,7 @@
import { afterEach, describe, expect, it } from "vitest";
import type { AttachmentMetadata, AttachmentStore, SaveAttachmentInput } from "@/attachments/types";
import { __setAttachmentStoreForTests } from "./store";
import { encodeAttachmentsForSend, persistAttachmentFromBase64 } from "./service";
import { encodeAttachmentsForSend, persistAttachmentFromBytes } from "./service";
function createAttachment(input: Partial<AttachmentMetadata> = {}): AttachmentMetadata {
return {
@@ -54,19 +54,20 @@ describe("attachment service", () => {
__setAttachmentStoreForTests(null);
});
it("persists raw base64 without requiring a data URL wrapper", async () => {
it("persists raw bytes without requiring a base64 wrapper", async () => {
const store = createRecordingStore();
__setAttachmentStoreForTests(store);
const bytes = new Uint8Array([0, 1, 2, 3]);
const attachment = await persistAttachmentFromBase64({
id: "att_base64",
base64: "AAECAw==",
const attachment = await persistAttachmentFromBytes({
id: "att_bytes",
bytes,
mimeType: "image/png",
fileName: "image.png",
});
expect(attachment).toEqual({
id: "att_base64",
id: "att_bytes",
mimeType: "image/png",
storageType: "web-indexeddb",
storageKey: "att_1",
@@ -76,10 +77,10 @@ describe("attachment service", () => {
});
expect(store.savedSources).toEqual([
{
id: "att_base64",
id: "att_bytes",
mimeType: "image/png",
fileName: "image.png",
source: { kind: "base64", base64: "AAECAw==" },
source: { kind: "bytes", bytes },
},
]);
});
+3 -3
View File
@@ -31,8 +31,8 @@ export async function persistAttachmentFromDataUrl(input: {
});
}
export async function persistAttachmentFromBase64(input: {
base64: string;
export async function persistAttachmentFromBytes(input: {
bytes: Uint8Array;
mimeType?: string;
fileName?: string | null;
id?: string;
@@ -42,7 +42,7 @@ export async function persistAttachmentFromBase64(input: {
id: input.id,
mimeType: input.mimeType,
fileName: input.fileName,
source: { kind: "base64", base64: input.base64 },
source: { kind: "bytes", bytes: input.bytes },
});
}
+1 -1
View File
@@ -33,7 +33,7 @@ export type UserComposerAttachment = Exclude<ComposerAttachment, { kind: "review
export type WorkspaceComposerAttachment = Extract<ComposerAttachment, { kind: "review" }>;
export type AttachmentDataSource =
| { kind: "base64"; base64: string }
| { kind: "bytes"; bytes: Uint8Array }
| { kind: "blob"; blob: Blob }
| { kind: "data_url"; dataUrl: string }
| { kind: "file_uri"; uri: string };
@@ -0,0 +1,112 @@
import { afterEach, beforeEach, describe, expect, it } from "vitest";
import { createIndexedDbAttachmentStore } from "./indexeddb-attachment-store";
type Listener = () => void;
class FakeRequest<T = unknown> {
result!: T;
error: Error | null = null;
private listeners = new Map<string, Listener[]>();
addEventListener(event: string, listener: Listener): void {
this.listeners.set(event, [...(this.listeners.get(event) ?? []), listener]);
}
emit(event: string): void {
for (const listener of this.listeners.get(event) ?? []) {
listener();
}
}
}
class FakeObjectStore {
constructor(private readonly onPut: (record: unknown) => void) {}
put(record: unknown): FakeRequest<unknown> {
this.onPut(record);
const request = new FakeRequest<unknown>();
queueMicrotask(() => request.emit("success"));
return request;
}
}
class FakeTransaction {
error: Error | null = null;
constructor(private readonly store: FakeObjectStore) {}
objectStore(): FakeObjectStore {
return this.store;
}
addEventListener(): void {}
}
class FakeDatabase {
readonly objectStoreNames = {
contains: () => true,
};
constructor(private readonly store: FakeObjectStore) {}
createObjectStore(): void {}
transaction(): FakeTransaction {
return new FakeTransaction(this.store);
}
close(): void {}
}
describe("indexeddb attachment store", () => {
let storedRecord: unknown;
beforeEach(() => {
storedRecord = null;
Object.defineProperty(globalThis, "indexedDB", {
configurable: true,
value: {
open: () => {
const store = new FakeObjectStore((record) => {
storedRecord = record;
});
const request = new FakeRequest<FakeDatabase>();
request.result = new FakeDatabase(store);
queueMicrotask(() => request.emit("success"));
return request;
},
} as unknown as IDBFactory,
});
});
afterEach(() => {
Reflect.deleteProperty(globalThis, "indexedDB");
});
it("stores raw byte sources as a Blob", async () => {
const store = createIndexedDbAttachmentStore();
const bytes = new Uint8Array([0, 1, 2, 3]);
const attachment = await store.save({
id: "att_bytes",
mimeType: "image/png",
fileName: "image.png",
source: { kind: "bytes", bytes },
});
expect(storedRecord).toEqual({
id: "att_bytes",
blob: new Blob([bytes], { type: "image/png" }),
createdAt: expect.any(Number),
fileName: "image.png",
});
expect(attachment).toMatchObject({
id: "att_bytes",
mimeType: "image/png",
storageType: "web-indexeddb",
storageKey: "att_bytes",
fileName: "image.png",
byteSize: 4,
});
});
});
@@ -74,17 +74,18 @@ function runTx<T>(
});
}
function base64ToBlob(input: { base64: string; mimeType: string }): Blob {
const binary = atob(input.base64);
const bytes = new Uint8Array(binary.length);
for (let index = 0; index < binary.length; index += 1) {
bytes[index] = binary.charCodeAt(index);
}
return new Blob([bytes], { type: input.mimeType });
}
async function sourceToBlob(input: SaveAttachmentInput): Promise<{ blob: Blob; mimeType: string }> {
const source = input.source;
if (source.kind === "bytes") {
const mimeType = normalizeMimeType(input.mimeType);
const buffer = new ArrayBuffer(source.bytes.byteLength);
new Uint8Array(buffer).set(source.bytes);
return {
blob: new Blob([buffer], { type: mimeType }),
mimeType,
};
}
if (source.kind === "blob") {
const mimeType = normalizeMimeType(input.mimeType ?? source.blob.type);
const blob =
@@ -105,14 +106,6 @@ async function sourceToBlob(input: SaveAttachmentInput): Promise<{ blob: Blob; m
};
}
if (source.kind === "base64") {
const mimeType = normalizeMimeType(input.mimeType);
return {
blob: base64ToBlob({ base64: source.base64, mimeType }),
mimeType,
};
}
const response = await fetch(source.uri);
const blob = await response.blob();
const mimeType = normalizeMimeType(input.mimeType ?? blob.type);