@workerdeck/react 0.7.0 → 0.11.0

package/build/index.mjs

@@ -1,7 +1,10 @@
-import { useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { ENGINE_CAPABILITIES, PROTOCOL_VERSION } from "@workerdeck/protocol";
+import { WorkerDeckError } from "@workerdeck/client";
 //#region src/transcript.ts
 const initialTranscriptState = {
 	status: "starting",
+	capabilities: ENGINE_CAPABILITIES.claude,
 	items: [],
 	pendingApprovals: [],
 	totalCostUsd: 0,
@@ -45,6 +48,7 @@ function upsert(items, item) {
 * haven't set yet; the event stream stays authoritative.
 */
 function seedFromSessionInfo(state, info) {
+	const engine = info.engine ?? state.engine;
 	return {
 		...state,
 		status: state.lastSeq === 0 ? info.status : state.status,
@@ -52,9 +56,29 @@ function seedFromSessionInfo(state, info) {
 		permissionMode: state.permissionMode ?? info.permissionMode,
 		cwd: state.cwd ?? info.cwd,
 		sdkSessionId: state.sdkSessionId ?? info.sdkSessionId,
-		engine: info.engine ?? state.engine
+		engine,
+		capabilities: info.capabilities ?? ENGINE_CAPABILITIES[engine ?? "claude"],
+		session: info
 	};
 }
+/**
+* The session's rate-limit windows in reading order: the session window, the
+* weekly window, then whichever per-model weekly windows it reports.
+*
+* Discovered rather than hardcoded — the SDK's set of windows is an open union
+* and has grown before — but ordered, so the first two always mean the same
+* thing. A window with no `utilization` is *unknown*, not zero, and is dropped
+* entirely rather than drawn as an empty bar that reads as "plenty left".
+*/
+function rateLimitWindows(state) {
+	const all = Object.entries(state.rateLimits ?? {}).filter(([, info]) => info.utilization !== void 0).map(([key, info]) => ({
+		key,
+		info
+	}));
+	const named = ["five_hour", "seven_day"].flatMap((key) => all.filter((w) => w.key === key));
+	const perModel = all.filter((w) => w.key.startsWith("seven_day_")).sort((a, b) => a.key.localeCompare(b.key));
+	return [...named, ...perModel];
+}
 function applyEvent(state, event) {
 	if (event.seq <= state.lastSeq) return state;
 	const base = {
@@ -77,7 +101,23 @@ function applyEvent(state, event) {
 		case "capabilities": return {
 			...base,
 			models: event.models,
-			commands: event.commands
+			commands: event.commands,
+			defaultModel: event.defaultModel ?? base.defaultModel
+		};
+		case "skills": return {
+			...base,
+			skills: event.skills
+		};
+		case "file_produced": return {
+			...base,
+			producedFiles: {
+				...base.producedFiles,
+				[event.path]: {
+					fileId: event.fileId,
+					...event.mediaType ? { mediaType: event.mediaType } : {},
+					...event.bytes !== void 0 ? { bytes: event.bytes } : {}
+				}
+			}
 		};
 		case "model_changed": return event.model === void 0 ? base : {
 			...base,
@@ -99,9 +139,14 @@ function applyEvent(state, event) {
 				rateLimits: {
 					...base.rateLimits,
 					[key]: event.info
-				}
+				},
+				rateLimitsUpdatedAt: event.ts
 			};
 		}
+		case "plan_info": return {
+			...base,
+			subscriptionType: event.subscriptionType
+		};
 		case "user_message": {
 			let items = base.items;
 			for (const block of contentToBlocks(event.message.content)) if (block.type === "tool_result") {
@@ -127,7 +172,8 @@ function applyEvent(state, event) {
 				else items = upsert(items, {
 					kind: "user",
 					id: event.uuid ?? `user-${event.seq}`,
-					text
+					text,
+					attachments: event.attachments
 				});
 			}
 			return {
@@ -298,10 +344,14 @@ function applyEvent(state, event) {
 function reduce(state, action) {
 	return action.type === "attached" ? seedFromSessionInfo(state, action.session) : applyEvent(state, action);
 }
+/** Failed attempts in a row before "reconnecting…" stops being the honest word.
+* Three is ~3.5s of backoff — past a blip. Matches the iOS client. */
+const OFFLINE_AFTER_ATTEMPTS = 3;
 /** Attach to a session and maintain live transcript state. Detaches on unmount. */
 function useClaudeSession(client, sessionId, options) {
 	const [state, dispatch] = useReducer(reduce, initialTranscriptState);
-	const [connected, setConnected] = useState(false);
+	const [connection, setConnection] = useState("reconnecting");
+	const [protocolMismatch, setProtocolMismatch] = useState();
 	const [handleState, setHandleState] = useState();
 	const handleRef = useRef(null);
 	const onProtocolErrorRef = useRef(options?.onProtocolError);
@@ -312,8 +362,12 @@ function useClaudeSession(client, sessionId, options) {
 		handleRef.current = handle;
 		setHandleState(handle);
 		const offEvent = handle.on("event", (event) => dispatch(event));
-		const offAttached = handle.on("attached", (frame) => dispatch(frame));
-		const offConn = handle.on("connectionChange", setConnected);
+		const offAttached = handle.on("attached", (frame) => {
+			dispatch(frame);
+			setProtocolMismatch(frame.protocolVersion === PROTOCOL_VERSION ? void 0 : frame.protocolVersion);
+		});
+		const offConn = handle.on("connectionChange", (open) => setConnection(open ? "live" : "reconnecting"));
+		const offRetry = handle.on("reconnectAttempt", (attempts) => setConnection(attempts >= OFFLINE_AFTER_ATTEMPTS ? "offline" : "reconnecting"));
 		const offProtocolError = handle.on("protocolError", (message) => {
 			onProtocolErrorRef.current?.(message);
 		});
@@ -321,28 +375,981 @@ function useClaudeSession(client, sessionId, options) {
 			offEvent();
 			offAttached();
 			offConn();
+			offRetry();
 			offProtocolError();
 			handle.detach();
 			handleRef.current = null;
 			setHandleState(void 0);
+			setConnection("reconnecting");
+			setProtocolMismatch(void 0);
 		};
 	}, [client, sessionId]);
+	const models = useProfileModelFallback(client, sessionId, state);
+	const connected = connection === "live";
+	const reconnectNow = useCallback(() => handleRef.current?.reconnectNow(), []);
 	return useMemo(() => ({
 		state,
 		connected,
+		connection,
+		protocolMismatch,
+		models,
+		effectiveModel: state.model ?? state.defaultModel,
 		handle: handleState,
-		send: (text) => handleRef.current?.send(text),
+		send: (text, attachmentIds) => handleRef.current?.send(text, attachmentIds),
 		approve: (requestId, updatedInput) => handleRef.current?.approve(requestId, updatedInput),
-		deny: (requestId, message) => handleRef.current?.deny(requestId, message),
+		deny: (requestId, message, interrupt) => handleRef.current?.deny(requestId, message, interrupt),
 		interrupt: () => handleRef.current?.interrupt(),
 		setPermissionMode: (mode) => handleRef.current?.setPermissionMode(mode),
 		setModel: (model) => handleRef.current?.setModel(model),
-		closeSession: () => handleRef.current?.closeSession()
+		closeSession: () => handleRef.current?.closeSession(),
+		reconnectNow
 	}), [
 		state,
 		connected,
-		handleState
+		connection,
+		protocolMismatch,
+		models,
+		handleState,
+		reconnectNow
+	]);
+}
+/**
+* The session's profile catalog, fetched once and only when it could matter —
+* i.e. when the engine has reported no models of its own.
+*
+* Fire-and-forget on purpose: an empty catalog is exactly the state a picker
+* already handles, so a failed or 404'd `/profiles` (a server predating them)
+* degrades to the old behaviour rather than raising an error about a list the
+* operator may never open.
+*/
+function useProfileModelFallback(client, sessionId, state) {
+	const [catalog, setCatalog] = useState([]);
+	const profile = state.session?.profile;
+	const reported = state.models;
+	const hasReported = !!reported?.length;
+	useEffect(() => setCatalog([]), [sessionId]);
+	useEffect(() => {
+		if (!profile || hasReported) return;
+		let cancelled = false;
+		client.listProfiles().then((response) => {
+			if (!cancelled) setCatalog(response.profiles.find((p) => p.name === profile)?.models ?? []);
+		}).catch(() => {});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		client,
+		profile,
+		hasReported
+	]);
+	return hasReported ? reported : catalog;
+}
+//#endregion
+//#region src/use-attachments.ts
+/**
+* How a media type reaches a model, in the capability record's vocabulary.
+* `undefined` means this build can't classify it — the upload still goes,
+* because the gateway's vocabulary is the authoritative one.
+*/
+function attachmentKind(mediaType) {
+	const type = mediaType.split(";")[0].trim().toLowerCase();
+	if (type.startsWith("image/")) return "image";
+	if (type === "application/pdf") return "pdf";
+	if (type.startsWith("text/")) return "text";
+	if (TEXTUAL_TYPES.has(type)) return "text";
+}
+/** Textual types whose media type doesn't start with `text/` — mirrors core. */
+const TEXTUAL_TYPES = new Set([
+	"application/json",
+	"application/xml",
+	"application/yaml",
+	"application/x-yaml",
+	"application/toml",
+	"application/javascript",
+	"application/typescript",
+	"application/x-sh",
+	"application/sql"
+]);
+/** Longest edge an image is downscaled to before upload. Anthropic's own
+* recommendation, and the same number the iOS client uses — a phone photo is
+* several times this in each direction and costs tokens for nothing. */
+const MAX_IMAGE_EDGE = 1568;
+/**
+* Stage, upload and track files for the next message of a session.
+*
+* Refusals happen as early as they can be known: a kind the capability record
+* forswears never reaches the network (the gateway would 415 it), and everything
+* else is the gateway's call — its vocabulary is authoritative, so an unknown
+* media type is uploaded rather than guessed at.
+*/
+function useAttachments(client, sessionId, { capabilities, engine }) {
+	const [items, setItems] = useState([]);
+	const [error, setError] = useState();
+	const counter = useRef(0);
+	/** The originals, kept so a failed upload can be retried without re-picking. */
+	const fileByKey = useRef(/* @__PURE__ */ new Map());
+	/** Mirrors the live preview URLs so unmount can revoke them all — an unmount
+	* with blobs outstanding is a leak the GC does not clean up. */
+	const previewUrls = useRef([]);
+	previewUrls.current = items.flatMap((item) => item.previewUrl ? [item.previewUrl] : []);
+	const accepts = capabilities.attachments;
+	useEffect(() => () => {
+		for (const url of previewUrls.current) URL.revokeObjectURL(url);
+	}, []);
+	const patch = useCallback((key, next) => {
+		setItems((current) => current.map((item) => item.key === key ? {
+			...item,
+			...next
+		} : item));
+	}, []);
+	const upload = useCallback((key, file) => {
+		if (!sessionId) return;
+		patch(key, {
+			status: "uploading",
+			error: void 0
+		});
+		(async () => {
+			try {
+				const data = await prepare(file);
+				const uploaded = await client.uploadAttachment(sessionId, {
+					name: file.name,
+					mediaType: data.mediaType,
+					data: data.body
+				});
+				patch(key, {
+					status: "ready",
+					id: uploaded.id,
+					bytes: uploaded.bytes ?? file.size
+				});
+			} catch (e) {
+				patch(key, {
+					status: "failed",
+					error: e instanceof Error ? e.message : "Upload failed"
+				});
+			}
+		})();
+	}, [
+		client,
+		patch,
+		sessionId
+	]);
+	const add = useCallback((files) => {
+		const staged = [];
+		const pending = [];
+		for (const file of files) {
+			const mediaType = file.type || "application/octet-stream";
+			const kind = attachmentKind(mediaType);
+			if (kind && !accepts.includes(kind)) {
+				setError(`The ${engine ?? "claude"} engine does not take ${kind} attachments.`);
+				continue;
+			}
+			const key = `att-${++counter.current}`;
+			staged.push({
+				key,
+				name: file.name,
+				mediaType,
+				bytes: file.size,
+				previewUrl: kind === "image" ? URL.createObjectURL(file) : void 0,
+				status: "uploading"
+			});
+			pending.push({
+				key,
+				file
+			});
+		}
+		if (staged.length === 0) return;
+		setItems((current) => [...current, ...staged]);
+		fileByKey.current = new Map([...fileByKey.current, ...pending.map(({ key, file }) => [key, file])]);
+		for (const { key, file } of pending) upload(key, file);
+	}, [
+		accepts,
+		engine,
+		upload
+	]);
+	const forget = useCallback((keys) => {
+		setItems((current) => {
+			for (const item of current) if (keys.includes(item.key) && item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+			return current.filter((item) => !keys.includes(item.key));
+		});
+		for (const key of keys) fileByKey.current.delete(key);
+	}, []);
+	const remove = useCallback((key) => forget([key]), [forget]);
+	const clear = useCallback(() => {
+		setItems((current) => {
+			for (const item of current) if (item.previewUrl) URL.revokeObjectURL(item.previewUrl);
+			return [];
+		});
+		fileByKey.current.clear();
+	}, []);
+	const retry = useCallback((key) => {
+		const file = fileByKey.current.get(key);
+		if (file) upload(key, file);
+	}, [upload]);
+	return useMemo(() => ({
+		items,
+		readyIds: items.flatMap((item) => item.id ? [item.id] : []),
+		uploading: items.some((item) => item.status === "uploading"),
+		hasFailure: items.some((item) => item.status === "failed"),
+		accept: acceptAttribute(accepts),
+		disabled: accepts.length === 0 || !sessionId,
+		add,
+		retry,
+		remove,
+		clear,
+		error,
+		dismissError: () => setError(void 0)
+	}), [
+		items,
+		accepts,
+		sessionId,
+		add,
+		retry,
+		remove,
+		clear,
+		error
+	]);
+}
+/** What a file input should offer. The full set keeps the open door (anything —
+* the gateway refuses the rest with a clear message); a narrower record narrows
+* the browsing too, so most refusals never happen. */
+function acceptAttribute(kinds) {
+	if (kinds.length === 0) return "";
+	const parts = [];
+	if (kinds.includes("image")) parts.push("image/*");
+	if (kinds.includes("pdf")) parts.push("application/pdf");
+	if (kinds.includes("text")) parts.push("text/*", ".md", ".json", ".yaml", ".yml", ".toml");
+	return kinds.length === 3 ? "" : parts.join(",");
+}
+const imaging = globalThis;
+/**
+* The bytes to upload, and the type they are.
+*
+* Oversized images are redrawn to {@link MAX_IMAGE_EDGE} first: a modern phone
+* photo is 4000px on its long edge, which costs tokens for detail no model
+* reads, and often exceeds the gateway's per-file cap outright. Everything else
+* — and anything the browser can't decode — is uploaded as-is, so a failure here
+* is never worse than not trying.
+*/
+async function prepare(file) {
+	const mediaType = file.type || "application/octet-stream";
+	const { createImageBitmap, document } = imaging;
+	if (!createImageBitmap || !document || !mediaType.startsWith("image/")) return {
+		body: file,
+		mediaType
+	};
+	if (mediaType === "image/gif") return {
+		body: file,
+		mediaType
+	};
+	try {
+		const bitmap = await createImageBitmap(file);
+		const longest = Math.max(bitmap.width, bitmap.height);
+		if (longest <= MAX_IMAGE_EDGE) {
+			bitmap.close();
+			return {
+				body: file,
+				mediaType
+			};
+		}
+		const scale = MAX_IMAGE_EDGE / longest;
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.round(bitmap.width * scale);
+		canvas.height = Math.round(bitmap.height * scale);
+		const context = canvas.getContext("2d");
+		if (!context) {
+			bitmap.close();
+			return {
+				body: file,
+				mediaType
+			};
+		}
+		context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+		bitmap.close();
+		const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", .85));
+		return blob ? {
+			body: blob,
+			mediaType: "image/jpeg"
+		} : {
+			body: file,
+			mediaType
+		};
+	} catch {
+		return {
+			body: file,
+			mediaType
+		};
+	}
+}
+//#endregion
+//#region src/prompt-tokens.ts
+/** Characters a command name may contain after the slash. Deliberately excludes
+* `/`, so an absolute path pasted into a message (`/Users/me/…`) is not mistaken
+* for a command; `:` is in because namespaced skills (`dev:wrapup`) are spelled
+* that way. */
+const COMMAND_BODY = /^[A-Za-z0-9\-_.:]+$/;
+/** Trailing punctuation that belongs to the sentence, not the token — so
+* "see @README.md." styles the path and leaves the period alone. */
+const SENTENCE_TAIL = new Set([
+	".",
+	",",
+	";",
+	":",
+	"!",
+	"?",
+	")",
+	"]",
+	"}",
+	"\"",
+	"'"
+]);
+/**
+* Every token in a sent message.
+*
+* Stricter than what a composer completes: a bare `@` is a token being typed, but
+* in a sent message it is just an at sign.
+*/
+function scanPromptTokens(text) {
+	const tokens = [];
+	const words = /\S+/g;
+	let match;
+	while ((match = words.exec(text)) !== null) {
+		const word = match[0];
+		const kind = word[0] === "@" ? "file" : word[0] === "/" ? "command" : void 0;
+		if (!kind) continue;
+		let end = match.index + word.length;
+		while (end > match.index && SENTENCE_TAIL.has(text[end - 1])) end--;
+		const body = text.slice(match.index + 1, end);
+		if (!body) continue;
+		if (kind === "command" && !COMMAND_BODY.test(body)) continue;
+		tokens.push({
+			kind,
+			start: match.index,
+			end,
+			text: text.slice(match.index, end)
+		});
+	}
+	return tokens;
+}
+//#endregion
+//#region src/host-tree.ts
+/**
+* Flatten the loaded directories into the rows the tree shows.
+*
+* Pure, so the interesting part of a file tree — which nodes are visible at what
+* depth once a few directories are expanded and one of them is still loading —
+* is testable without a DOM or a gateway.
+*
+* Only *expanded* directories contribute children, and only if their listing has
+* arrived. An expanded-but-unlisted directory yields its own row with
+* `loading: true` and no children: expansion is a request the user already made,
+* so the row must say the answer is coming rather than look like an empty folder.
+*/
+function flattenHostTree(root, dirs, expanded) {
+	const rows = [];
+	const walk = (dir, depth) => {
+		const state = dirs.get(dir);
+		if (!state) return;
+		for (const entry of state.entries) {
+			if (entry.type !== "dir") {
+				rows.push({
+					entry,
+					depth
+				});
+				continue;
+			}
+			const isExpanded = expanded.has(entry.path);
+			const childState = dirs.get(entry.path);
+			rows.push({
+				entry,
+				depth,
+				expanded: isExpanded,
+				loading: isExpanded && !childState,
+				truncated: isExpanded ? childState?.truncated : void 0
+			});
+			if (isExpanded && childState) walk(entry.path, depth + 1);
+		}
+	};
+	walk(root, 0);
+	return rows;
+}
+/**
+* Every ancestor of `path` below `root`, outermost first — the directories that
+* must be expanded for `path` to be on screen.
+*
+* Returns `[]` when `path` is not under `root` rather than guessing: revealing a
+* file the tree cannot contain is a no-op, not an error worth raising, and the
+* caller has no better answer either.
+*
+* The prefix test is on a **path boundary** (`root` + `/`), so `/src/app` is not
+* treated as living under `/src/a`.
+*/
+function ancestorsWithin(root, path) {
+	const base = root.endsWith("/") ? root.slice(0, -1) : root;
+	if (path === base || !path.startsWith(`${base}/`)) return [];
+	const rest = path.slice(base.length + 1).split("/");
+	const out = [];
+	let current = base;
+	for (const segment of rest.slice(0, -1)) {
+		current = `${current}/${segment}`;
+		out.push(current);
+	}
+	return out;
+}
+//#endregion
+//#region src/use-host-files.ts
+/**
+* Fuzzy file search rooted at a session's working directory — what an `@file`
+* picker needs.
+*
+* Deliberately session-scoped: the server's `hostFiles.roots` are the security
+* boundary, but what someone wants while talking to an agent is *this* project's
+* tree, so this never offers the roots list.
+*
+* A gateway that answers 404 once has answered for the session: host files are
+* either configured or they aren't, and the answer will not change while the cwd
+* holds. Asking again on every character would be a request per keystroke for a
+* feature that does not exist here.
+*/
+function useHostFileSearch(client, cwd) {
+	const [unsupported, setUnsupported] = useState(false);
+	const lastCwd = useRef(cwd);
+	useEffect(() => {
+		if (lastCwd.current !== cwd) {
+			lastCwd.current = cwd;
+			setUnsupported(false);
+		}
+	}, [cwd]);
+	const search = useCallback(async (query, options) => {
+		if (!cwd || unsupported) return [];
+		try {
+			const response = await client.findHostFiles(cwd, query, options?.limit ?? 8);
+			return options?.signal?.aborted ? [] : response.matches;
+		} catch (e) {
+			if (e instanceof WorkerDeckError && e.status === 404) setUnsupported(true);
+			return [];
+		}
+	}, [
+		client,
+		cwd,
+		unsupported
+	]);
+	return {
+		available: !!cwd && !unsupported,
+		search
+	};
+}
+/**
+* Whether host files are served here, and whether they may be written.
+*
+* One request per client, cached for the life of the hook: the roots and the
+* write flag are gateway configuration, not session state, and they do not
+* change while the tab is open.
+*/
+function useHostFileRoots(client) {
+	const [result, setResult] = useState({
+		available: false,
+		canWrite: false
+	});
+	useEffect(() => {
+		let cancelled = false;
+		client.listHostRoots().then((response) => {
+			if (!cancelled) setResult({
+				available: true,
+				canWrite: response.canWrite
+			});
+		}).catch(() => {
+			if (!cancelled) setResult({
+				available: false,
+				canWrite: false
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [client]);
+	return result;
+}
+/**
+* An expandable file tree rooted at a session's working directory.
+*
+* Rooted at the cwd rather than at `/fs/roots` for the same reason
+* {@link useHostFileSearch} is: the roots are the *security* boundary the server
+* enforces on every request, but what someone wants while watching an agent work
+* is this project's tree. The roots may well be broader; showing them would
+* offer navigation to directories the session has nothing to do with.
+*
+* Listings are cached per directory and kept across a collapse, so reopening a
+* folder is instant and does not re-ask. That staleness is deliberate and
+* bounded: `refresh` exists, and knowing when to call it is the *next* problem
+* (the agent is editing this same tree), not something a tree can guess.
+*
+* Like the search hook, a 404 is answered once for the session: host files are
+* either configured here or they are not.
+*/
+function useHostFileTree(client, cwd) {
+	const [dirs, setDirs] = useState(() => /* @__PURE__ */ new Map());
+	const [expanded, setExpanded] = useState(() => /* @__PURE__ */ new Set());
+	const [unsupported, setUnsupported] = useState(false);
+	const [error, setError] = useState();
+	const lastCwd = useRef(cwd);
+	useEffect(() => {
+		if (lastCwd.current === cwd) return;
+		lastCwd.current = cwd;
+		setDirs(/* @__PURE__ */ new Map());
+		setExpanded(/* @__PURE__ */ new Set());
+		setUnsupported(false);
+		setError(void 0);
+	}, [cwd]);
+	const alive = useRef(true);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const requested = useRef(/* @__PURE__ */ new Set());
+	const list = useCallback((target, { force = false } = {}) => {
+		if (unsupported) return;
+		if (!force && requested.current.has(target)) return;
+		requested.current.add(target);
+		client.listHostDir(target).then((response) => {
+			if (!alive.current) return;
+			setDirs((previous) => {
+				const next = new Map(previous);
+				next.set(target, {
+					entries: response.entries,
+					truncated: response.truncated
+				});
+				return next;
+			});
+		}).catch((e) => {
+			if (!alive.current) return;
+			requested.current.delete(target);
+			if (e instanceof WorkerDeckError && e.status === 404) {
+				setUnsupported(true);
+				return;
+			}
+			setError(e instanceof Error ? e.message : "Could not read that directory");
+		});
+	}, [client, unsupported]);
+	useEffect(() => {
+		if (cwd) list(cwd);
+	}, [cwd, list]);
+	const toggle = useCallback((path) => {
+		setExpanded((previous) => {
+			const next = new Set(previous);
+			if (next.has(path)) next.delete(path);
+			else next.add(path);
+			return next;
+		});
+		list(path);
+	}, [list]);
+	const reveal = useCallback((path) => {
+		if (!cwd) return;
+		const ancestors = ancestorsWithin(cwd, path);
+		if (ancestors.length === 0) return;
+		for (const dir of ancestors) list(dir);
+		setExpanded((previous) => {
+			const next = new Set(previous);
+			for (const dir of ancestors) next.add(dir);
+			return next;
+		});
+	}, [cwd, list]);
+	const refresh = useCallback((path) => {
+		const target = path ?? cwd;
+		if (!target) return;
+		setError(void 0);
+		list(target, { force: true });
+	}, [cwd, list]);
+	const rows = useMemo(() => cwd ? flattenHostTree(cwd, dirs, expanded) : [], [
+		cwd,
+		dirs,
+		expanded
 	]);
+	return {
+		available: !!cwd && !unsupported,
+		root: cwd,
+		rows,
+		loading: !!cwd && !unsupported && !dirs.has(cwd) && !error,
+		error,
+		toggle,
+		reveal,
+		refresh
+	};
+}
+//#endregion
+//#region src/use-session-info.ts
+/**
+* The registry's record of one session, over REST.
+*
+* Separate from {@link useClaudeSession} on purpose: that hook attaches a
+* WebSocket and streams a transcript, which is far more than a caller needs to
+* know a session's `cwd` or title — and a second attach would be a second
+* client on the bridge, which is the one thing the bridge's "asks the first
+* attached client" rule cannot tolerate.
+*
+* Fetched once per session id. The record is registry state, not a live feed;
+* anything that changes during a run arrives on the session's event stream.
+*/
+function useSessionInfo(client, sessionId) {
+	const [info, setInfo] = useState();
+	const [loading, setLoading] = useState(!!sessionId);
+	const [error, setError] = useState();
+	useEffect(() => {
+		if (!sessionId) {
+			setInfo(void 0);
+			setLoading(false);
+			setError(void 0);
+			return;
+		}
+		let cancelled = false;
+		setLoading(true);
+		setError(void 0);
+		setInfo(void 0);
+		client.getSession(sessionId).then((next) => {
+			if (cancelled) return;
+			setInfo(next);
+			setLoading(false);
+		}).catch((e) => {
+			if (cancelled) return;
+			setError(e instanceof Error ? e.message : "Session not found");
+			setLoading(false);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [client, sessionId]);
+	return {
+		info,
+		loading,
+		error
+	};
+}
+//#endregion
+//#region src/open-files.ts
+/** Whether a tab has edits that are not on disk. Derived, so typing something
+* and undoing it back leaves the tab clean — which is what an editor should do
+* and what a boolean flag set on first keystroke would get wrong. */
+function isDirty(file) {
+	return file.draft !== void 0 && file.draft !== file.content;
+}
+/** What a tab would write: its edits if it has any, else what it read. */
+function currentText(file) {
+	return file.draft ?? file.content ?? "";
+}
+const initialOpenFilesState = { files: [] };
+/**
+* The tab strip and the editor's whole behaviour, as a pure function.
+*
+* The rules worth stating, because they are the ones a naive implementation
+* gets wrong:
+*
+* - **Opening an open path never re-reads it.** It focuses the tab. Re-reading
+*   would silently discard that tab's unsaved edits on a double click.
+* - **Closing the focused tab focuses its right-hand neighbour**, falling back
+*   to the left when it was last. Focusing "the first tab" instead is what makes
+*   closing several tabs in a row jump the user around.
+* - **A successful save is applied against the text that was sent**, not against
+*   the tab's current text. Typing during a save is normal; treating the write's
+*   completion as "the tab is now clean" would silently drop those keystrokes.
+* - **Nothing here discards edits implicitly.** `revert` and `loaded` are the
+*   only two things that clear a draft, and both are the direct result of
+*   someone asking for it. The conditional write exists so a browser edit cannot
+*   clobber the agent mid-run; this holds the same line in the other direction.
+*
+* Late results are addressed by path and dropped if that tab is gone, so a slow
+* read of a closed file cannot resurrect it.
+*/
+function openFilesReducer(state, action) {
+	switch (action.type) {
+		case "open": {
+			if (state.files.some((f) => f.path === action.path)) return state.activePath === action.path ? state : {
+				...state,
+				activePath: action.path
+			};
+			const file = {
+				path: action.path,
+				name: baseName(action.path),
+				status: "loading"
+			};
+			return {
+				files: [...state.files, file],
+				activePath: action.path
+			};
+		}
+		case "close": {
+			const index = state.files.findIndex((f) => f.path === action.path);
+			if (index === -1) return state;
+			const files = state.files.filter((f) => f.path !== action.path);
+			if (state.activePath !== action.path) return {
+				...state,
+				files
+			};
+			return {
+				files,
+				activePath: (files[index] ?? files[index - 1])?.path
+			};
+		}
+		case "closeAll": return initialOpenFilesState;
+		case "activate":
+			if (!state.files.some((f) => f.path === action.path)) return state;
+			return state.activePath === action.path ? state : {
+				...state,
+				activePath: action.path
+			};
+		case "loaded": return patch(state, action.path, () => ({
+			path: action.path,
+			name: baseName(action.path),
+			status: action.encoding === "utf8" ? "ready" : "binary",
+			content: action.encoding === "utf8" ? action.content : void 0,
+			bytes: action.bytes,
+			hash: action.hash,
+			modifiedAt: action.modifiedAt
+		}));
+		case "failed": return patch(state, action.path, (file) => ({
+			...file,
+			status: "error",
+			error: action.error
+		}));
+		case "edit": return patch(state, action.path, (file) => file.status === "ready" ? {
+			...file,
+			draft: action.content
+		} : file);
+		case "revert": return patch(state, action.path, (file) => ({
+			...file,
+			draft: void 0,
+			saveError: void 0,
+			conflict: false
+		}));
+		case "saveStart": return patch(state, action.path, (file) => ({
+			...file,
+			saving: true,
+			saveError: void 0,
+			conflict: false
+		}));
+		case "saved": return patch(state, action.path, (file) => ({
+			...file,
+			saving: false,
+			saveError: void 0,
+			conflict: false,
+			content: action.content,
+			bytes: action.bytes,
+			hash: action.hash,
+			modifiedAt: action.modifiedAt,
+			draft: file.draft === action.content ? void 0 : file.draft
+		}));
+		case "saveFailed": return patch(state, action.path, (file) => ({
+			...file,
+			saving: false,
+			saveError: action.error,
+			conflict: action.conflict ?? false
+		}));
+		case "dismissConflict": return patch(state, action.path, (file) => ({
+			...file,
+			conflict: false,
+			saveError: void 0
+		}));
+	}
+}
+/** Replace one file in place, preserving tab order; a no-op if it was closed
+* while the request was in flight. */
+function patch(state, path, next) {
+	const index = state.files.findIndex((f) => f.path === path);
+	if (index === -1) return state;
+	const current = state.files[index];
+	const updated = next(current);
+	if (updated === current) return state;
+	const files = state.files.slice();
+	files[index] = updated;
+	return {
+		...state,
+		files
+	};
+}
+/** Last path segment. Trailing slashes are not expected here — these are file
+* paths from `/fs/list` and `/fs/find` — but a bare `/` should still show as
+* something rather than as an empty tab. */
+function baseName(path) {
+	const trimmed = path.endsWith("/") ? path.slice(0, -1) : path;
+	return trimmed.slice(trimmed.lastIndexOf("/") + 1) || trimmed || path;
+}
+//#endregion
+//#region src/use-open-files.ts
+/**
+* The open-file tabs of a workspace: which files are open, which one is focused,
+* the bytes behind each, and the edits on top of them.
+*
+* Reads are fired from an effect keyed on "which tabs are still loading" rather
+* than from `open` itself, so the reducer stays pure and a tab that was opened,
+* closed and reopened does not carry a stale in-flight request with it.
+*
+* Deliberately **not** given the session's cwd: a tab is an absolute host path,
+* and where it came from — the tree, a search hit, a path in the transcript — is
+* the caller's business. Containment is the server's job on every `/fs/read` and
+* `/fs/write`, not something re-derived here from a directory this hook would
+* have to trust.
+*/
+function useOpenFiles(client) {
+	const [state, dispatch] = useReducer(openFilesReducer, initialOpenFilesState);
+	const requested = useRef(/* @__PURE__ */ new Set());
+	const alive = useRef(true);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const latest = useRef(state);
+	useEffect(() => {
+		latest.current = state;
+	}, [state]);
+	const pending = state.files.filter((f) => f.status === "loading").map((f) => f.path).join("\n");
+	const read = useCallback((path) => client.readHostFile(path).then((response) => {
+		if (!alive.current) return void 0;
+		dispatch({
+			type: "loaded",
+			path,
+			content: response.content,
+			encoding: response.encoding,
+			bytes: response.bytes,
+			hash: response.hash,
+			modifiedAt: response.modifiedAt
+		});
+		return response;
+	}), [client]);
+	useEffect(() => {
+		for (const path of pending ? pending.split("\n") : []) {
+			if (requested.current.has(path)) continue;
+			requested.current.add(path);
+			read(path).catch((e) => {
+				if (!alive.current) return;
+				dispatch({
+					type: "failed",
+					path,
+					error: e instanceof Error ? e.message : "Could not read that file"
+				});
+			});
+		}
+	}, [read, pending]);
+	const open = useCallback((path) => dispatch({
+		type: "open",
+		path
+	}), []);
+	const close = useCallback((path) => {
+		requested.current.delete(path);
+		dispatch({
+			type: "close",
+			path
+		});
+	}, []);
+	const closeAll = useCallback(() => {
+		requested.current.clear();
+		dispatch({ type: "closeAll" });
+	}, []);
+	const activate = useCallback((path) => dispatch({
+		type: "activate",
+		path
+	}), []);
+	const edit = useCallback((path, content) => dispatch({
+		type: "edit",
+		path,
+		content
+	}), []);
+	const revert = useCallback((path) => dispatch({
+		type: "revert",
+		path
+	}), []);
+	const dismissConflict = useCallback((path) => dispatch({
+		type: "dismissConflict",
+		path
+	}), []);
+	const reload = useCallback((path) => {
+		requested.current.add(path);
+		read(path).catch((e) => {
+			if (!alive.current) return;
+			dispatch({
+				type: "failed",
+				path,
+				error: e instanceof Error ? e.message : "Could not re-read that file"
+			});
+		});
+	}, [read]);
+	/** One conditional write. Shared by `save` and `overwrite`, which differ only
+	* in where the hash came from. */
+	const write = useCallback(async (path, text, expectedHash) => {
+		try {
+			const response = await client.writeHostFile({
+				path,
+				content: text,
+				expectedHash
+			});
+			if (!alive.current) return;
+			dispatch({
+				type: "saved",
+				path,
+				content: text,
+				bytes: response.bytes,
+				hash: response.hash,
+				modifiedAt: response.modifiedAt
+			});
+		} catch (e) {
+			if (!alive.current) return;
+			const conflict = e instanceof WorkerDeckError && e.status === 409;
+			dispatch({
+				type: "saveFailed",
+				path,
+				conflict,
+				error: conflict ? "This file changed on disk since you opened it." : e instanceof Error ? e.message : "Could not save that file"
+			});
+		}
+	}, [client]);
+	const save = useCallback(async (path) => {
+		const file = latest.current.files.find((f) => f.path === path);
+		if (!file || file.saving || !isDirty(file)) return;
+		dispatch({
+			type: "saveStart",
+			path
+		});
+		await write(path, currentText(file), file.hash);
+	}, [write]);
+	const overwrite = useCallback(async (path) => {
+		const file = latest.current.files.find((f) => f.path === path);
+		if (!file || file.saving) return;
+		const mine = currentText(file);
+		dispatch({
+			type: "saveStart",
+			path
+		});
+		try {
+			const fresh = await client.readHostFile(path);
+			if (!alive.current) return;
+			await write(path, mine, fresh.hash);
+		} catch (e) {
+			if (!alive.current) return;
+			dispatch({
+				type: "saveFailed",
+				path,
+				error: e instanceof Error ? e.message : "Could not save that file"
+			});
+		}
+	}, [client, write]);
+	const active = useMemo(() => state.files.find((f) => f.path === state.activePath), [state.files, state.activePath]);
+	const hasUnsaved = useMemo(() => state.files.some(isDirty), [state.files]);
+	return {
+		...state,
+		active,
+		hasUnsaved,
+		open,
+		close,
+		closeAll,
+		activate,
+		edit,
+		save,
+		revert,
+		reload,
+		overwrite,
+		dismissConflict
+	};
 }
 //#endregion
 //#region src/tool-host.ts
@@ -515,6 +1522,85 @@ function useToolCallHost(handle, options = {}) {
 	return { executions };
 }
 //#endregion
-export { applyEvent, createToolCallHost, initialTranscriptState, seedFromSessionInfo, useClaudeSession, useToolCallHost };
+//#region src/recap.ts
+/**
+* Summarize the items from `fromIndex` onward — the boundary being the number
+* of items that existed when the session was last looked at.
+*
+* An out-of-range boundary is clamped rather than rejected: a transcript can
+* *shrink* (a `/clear`, a fresh attach after a compaction), and the honest
+* reading of "you last saw 40 items, there are now 12" is "everything here is
+* new", not a negative count.
+*/
+function summarizeSince(state, fromIndex) {
+	const start = Math.max(0, Math.min(fromIndex, state.items.length));
+	const fresh = state.items.slice(start);
+	const toolCounts = /* @__PURE__ */ new Map();
+	let turns = 0;
+	let replies = 0;
+	let tools = 0;
+	let files = 0;
+	let errors = 0;
+	for (const item of fresh) switch (item.kind) {
+		case "turn_result":
+			turns += 1;
+			if (item.isError) errors += 1;
+			break;
+		case "assistant_text":
+			replies += 1;
+			break;
+		case "tool_call":
+			tools += 1;
+			toolCounts.set(item.name, (toolCounts.get(item.name) ?? 0) + 1);
+			if (item.status === "failed" || item.result?.isError) errors += 1;
+			break;
+		case "file_delivered":
+			files += 1;
+			break;
+		case "notice":
+			if (item.level === "error") errors += 1;
+			break;
+		default: break;
+	}
+	const toolNames = [...toolCounts.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([name]) => name);
+	const pending = state.pendingApprovals?.length ?? 0;
+	return {
+		turns,
+		replies,
+		tools,
+		toolNames,
+		files,
+		errors,
+		pending,
+		any: turns + replies + tools + files + errors + pending > 0
+	};
+}
+/**
+* The recap as one line of text, in the order a person reads it: what got done,
+* what it used, what went wrong, what is waiting.
+*
+* Returns `undefined` when there is nothing to say, so a caller can render the
+* row or not on the value alone.
+*/
+function recapLine(summary) {
+	if (!summary.any) return void 0;
+	const parts = [];
+	if (summary.turns > 0) parts.push(plural(summary.turns, "turn"));
+	else if (summary.replies > 0) parts.push(plural(summary.replies, "reply", "replies"));
+	if (summary.tools > 0) {
+		const named = summary.toolNames.slice(0, 3).join(", ");
+		const rest = summary.toolNames.length - 3;
+		parts.push(`${plural(summary.tools, "tool call")}${named ? ` (${named}${rest > 0 ? `, +${rest}` : ""})` : ""}`);
+	}
+	if (summary.files > 0) parts.push(plural(summary.files, "file"));
+	if (summary.errors > 0) parts.push(plural(summary.errors, "error"));
+	if (summary.pending > 0) parts.push(`${plural(summary.pending, "approval")} waiting`);
+	return parts.join(" · ");
+}
+function plural(count, one, many = `${one}s`) {
+	return `${count} ${count === 1 ? one : many}`;
+}
+//#endregion
+export { ancestorsWithin, applyEvent, attachmentKind, createToolCallHost, currentText, flattenHostTree, initialOpenFilesState, initialTranscriptState, isDirty, openFilesReducer, rateLimitWindows, recapLine, scanPromptTokens, seedFromSessionInfo, summarizeSince, useAttachments, useClaudeSession, useHostFileRoots, useHostFileSearch, useHostFileTree, useOpenFiles, useSessionInfo, useToolCallHost };
 
 //# sourceMappingURL=index.mjs.map