@mcp-b/react-components 0.6.5 → 0.7.1

package/dist/components/ThinkChatToolPanels.js

@@ -0,0 +1,355 @@
+import { ActivityOutput, ActivityPanel } from "./Activity.js";
+import { Tab, TabPanel, Tabs, TabsList } from "./Tabs.js";
+import { t as CodeBlock } from "../CodeBlock-D9koxDA7.js";
+import { BrowserLiveView } from "./BrowserLiveView.js";
+import { displayUrl } from "./ThinkChatToolParts.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getToolName } from "ai";
+//#region src/components/ThinkChatToolPanels.tsx
+function renderDeniedPanel(label, reason) {
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label,
+		text: reason,
+		status: "denied",
+		error: true
+	});
+}
+function numberLines(content, from = 1) {
+	const lines = content.split("\n");
+	const width = String(from + lines.length - 1).length;
+	return lines.map((line, i) => `${String(from + i).padStart(width)}  ${line}`).join("\n");
+}
+function prefixLines(text, prefix) {
+	return text.split("\n").map((line) => `${prefix}${line}`).join("\n");
+}
+/** Default panels for the Think workspace tools, Claude Code-style: read/write
+show the file with line numbers, edit shows a mini diff, list/find/grep
+show their result lists, bash gets the shell panel. Everything is typed by
+the upstream tool contract. */
+function ThinkChatWorkspacePanel({ part }) {
+	if (part.type === "tool-bash") return /* @__PURE__ */ jsx(ThinkChatShellPanel, { part });
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: getToolName(part),
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel(getToolName(part), part.approval.reason);
+	switch (part.type) {
+		case "tool-read": {
+			const label = part.input?.path ?? "file";
+			const output = part.state === "output-available" ? part.output : void 0;
+			if (output && "error" in output) return /* @__PURE__ */ jsx(ActivityPanel, {
+				label,
+				text: output.error,
+				status: "error",
+				error: true
+			});
+			if (output && "content" in output) return /* @__PURE__ */ jsx(ActivityPanel, {
+				label,
+				text: output.content,
+				status: `${output.totalLines} lines`
+			});
+			if (output) return /* @__PURE__ */ jsx(ActivityPanel, {
+				label,
+				text: `${output.name} · ${output.mediaType} · ${output.sizeBytes} bytes`
+			});
+			return /* @__PURE__ */ jsx(ActivityPanel, { label });
+		}
+		case "tool-write": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.path ?? "file",
+				text: part.input?.content ? numberLines(part.input.content) : void 0,
+				status: output ? `${output.lines} lines written` : void 0
+			});
+		}
+		case "tool-edit": {
+			const input = part.input;
+			const output = part.state === "output-available" ? part.output : void 0;
+			const status = !output ? void 0 : output.error ? output.error : output.created ? "created" : output.fuzzyMatch ? "replaced (fuzzy match)" : "replaced";
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: input?.path ?? "file",
+				status,
+				error: Boolean(output?.error),
+				children: input?.old_string !== void 0 && input.new_string !== void 0 ? /* @__PURE__ */ jsxs(ActivityOutput, { children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "activity__diff-del",
+						children: prefixLines(input.old_string, "- ")
+					}),
+					"\n",
+					/* @__PURE__ */ jsx("span", {
+						className: "activity__diff-add",
+						children: prefixLines(input.new_string, "+ ")
+					})
+				] }) : null
+			});
+		}
+		case "tool-list": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.path ?? "/",
+				text: output?.entries.join("\n"),
+				status: output ? `${output.count} entries` : void 0
+			});
+		}
+		case "tool-find": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			const files = Array.isArray(output?.files) ? output.files.map(String) : [];
+			const count = typeof output?.count === "number" ? output.count : files.length;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.pattern ?? "files",
+				text: files.join("\n"),
+				status: output ? `${count} files${output.truncated ? " (truncated)" : ""}` : void 0
+			});
+		}
+		case "tool-grep": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			const matches = Array.isArray(output?.matches) ? output.matches.map((m) => typeof m === "string" ? m : m.context ?? JSON.stringify(m)) : [];
+			const status = output && typeof output.totalMatches === "number" ? `${output.totalMatches} matches in ${String(output.filesWithMatches)} files` : void 0;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.query ?? "search",
+				text: matches.join("\n"),
+				status
+			});
+		}
+		default: return null;
+	}
+}
+/** Skill panels show what the model actually received: the activated skill's
+body, the resource text, or the script result. */
+function ThinkChatSkillPanel({ part }) {
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: getToolName(part),
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel(getToolName(part), part.approval.reason);
+	switch (part.type) {
+		case "tool-activate_skill": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.name ?? "skill",
+				text: output
+			});
+		}
+		case "tool-read_skill_resource": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.path ?? "resource",
+				text: output
+			});
+		}
+		case "tool-run_skill_script": {
+			const output = part.state === "output-available" ? part.output : void 0;
+			const text = output === void 0 ? void 0 : typeof output === "string" ? output : JSON.stringify(output, null, 2);
+			return /* @__PURE__ */ jsx(ActivityPanel, {
+				label: part.input?.path ?? "script",
+				text
+			});
+		}
+	}
+}
+function ThinkChatFetchPanel({ part }) {
+	const label = part.input?.url ?? part.input?.path ?? "fetch";
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label,
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel(label, part.approval.reason);
+	const output = part.state === "output-available" ? part.output : void 0;
+	if (!output) return /* @__PURE__ */ jsx(ActivityPanel, { label });
+	if (!output.ok) return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: output.finalUrl ?? label,
+		text: output.message,
+		status: output.code,
+		error: true
+	});
+	const body = output.body ?? (output.json !== void 0 ? JSON.stringify(output.json, null, 2) : output.path ? `saved to ${output.path}` : "");
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: output.finalUrl,
+		text: body || void 0,
+		status: `${output.status} · ${output.bytes} bytes${output.truncated ? " (truncated)" : ""}`
+	});
+}
+function findBrowserResultMedia(value, depth = 0) {
+	const media = {};
+	const visit = (node, level) => {
+		if (level > 4 || node === null) return;
+		if (typeof node === "string") {
+			if (!media.liveViewUrl && node.includes("live.browser.run")) media.liveViewUrl = node;
+			else if (!media.screenshot && node.startsWith("data:image/")) media.screenshot = node;
+			return;
+		}
+		if (Array.isArray(node)) {
+			for (const item of node) visit(item, level + 1);
+			return;
+		}
+		if (typeof node === "object") {
+			const record = node;
+			if (media.expiresInMs === void 0 && typeof record.url === "string" && typeof record.expiresInMs === "number") media.expiresInMs = record.expiresInMs;
+			for (const item of Object.values(record)) visit(item, level + 1);
+		}
+	};
+	visit(value, depth);
+	return media;
+}
+function ExecuteCodeView({ code, output, hideResult }) {
+	const sections = [
+		output && "logs" in output && output.logs?.length ? output.logs.join("\n") : "",
+		output?.status === "error" ? output.error : "",
+		output?.status === "paused" ? formatPendingActions(output.pending) : "",
+		output?.status === "completed" && output.result !== void 0 && !hideResult ? typeof output.result === "string" ? output.result : JSON.stringify(output.result, null, 2) : ""
+	].filter(Boolean);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [code ? /* @__PURE__ */ jsx(CodeBlock, {
+		className: "activity__code-block",
+		code,
+		language: "ts"
+	}) : null, sections.length ? /* @__PURE__ */ jsx(ActivityOutput, { children: sections.join("\n\n") }) : null] });
+}
+function formatPendingActions(pending) {
+	return pending.map((action) => {
+		const args = action.args === void 0 ? "" : JSON.stringify(action.args);
+		return `awaiting approval: ${action.connector}.${action.method}(${args})`;
+	}).join("\n");
+}
+function executeStatusText(output) {
+	if (!output) return void 0;
+	return output.status === "paused" ? "paused · needs approval" : output.status;
+}
+/** The codemode execute tool as an activity panel: highlighted TypeScript
+plus logs, result, and the paused pending-approval list. */
+function ThinkChatExecutePanel({ part }) {
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel("Code", part.approval.reason);
+	const output = part.state === "output-available" ? part.output : void 0;
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Code",
+		status: executeStatusText(output),
+		error: output?.status === "error",
+		children: /* @__PURE__ */ jsx(ExecuteCodeView, {
+			code: part.input?.code ?? "",
+			output
+		})
+	});
+}
+function ThinkChatBrowserPanel({ part }) {
+	const [seenAt] = React.useState(() => Date.now());
+	if (part.state === "output-error") return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Browser",
+		text: part.errorText,
+		status: "error",
+		error: true
+	});
+	if (part.state === "output-denied") return renderDeniedPanel("Browser", part.approval.reason);
+	if (part.type === "tool-browser_execute") {
+		const output = part.state === "output-available" ? part.output : void 0;
+		const code = part.input?.code ?? "";
+		const media = output?.status === "completed" ? findBrowserResultMedia(output.result) : {};
+		const hasMedia = Boolean(media.liveViewUrl || media.screenshot);
+		const browserView = media.liveViewUrl ? /* @__PURE__ */ jsx(BrowserLiveView, {
+			url: media.liveViewUrl,
+			expiresAt: seenAt + (media.expiresInMs ?? 300 * 1e3),
+			fallback: media.screenshot ? /* @__PURE__ */ jsx("img", {
+				src: media.screenshot,
+				alt: "Last browser state"
+			}) : void 0
+		}) : media.screenshot ? /* @__PURE__ */ jsx("img", {
+			className: "activity__browser-screenshot",
+			src: media.screenshot,
+			alt: "Browser screenshot"
+		}) : null;
+		const codeView = /* @__PURE__ */ jsx(ExecuteCodeView, {
+			code,
+			output,
+			hideResult: hasMedia
+		});
+		return /* @__PURE__ */ jsx(ActivityPanel, {
+			label: "Browser",
+			status: executeStatusText(output),
+			error: output?.status === "error",
+			children: browserView && code ? /* @__PURE__ */ jsxs(Tabs, {
+				className: "activity__browser-tabs",
+				defaultValue: "browser",
+				children: [
+					/* @__PURE__ */ jsxs(TabsList, {
+						variant: "line",
+						children: [/* @__PURE__ */ jsx(Tab, {
+							value: "browser",
+							children: "Preview"
+						}), /* @__PURE__ */ jsx(Tab, {
+							value: "code",
+							children: "Code"
+						})]
+					}),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "browser",
+						children: browserView
+					}),
+					/* @__PURE__ */ jsx(TabPanel, {
+						value: "code",
+						children: codeView
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [browserView, codeView] })
+		});
+	}
+	const output = part.state === "output-available" ? part.output : void 0;
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: displayUrl(part.input?.url) || "page",
+		text: output === void 0 ? void 0 : typeof output === "string" ? output : Array.isArray(output) ? output.map((item) => typeof item === "string" ? item : JSON.stringify(item)).join("\n") : JSON.stringify(output, null, 2),
+		status: part.type === "tool-browser_links" && Array.isArray(output) ? `${output.length} links` : void 0
+	});
+}
+function ThinkChatShellPanel({ part }) {
+	const output = part.state === "output-available" ? part.output : void 0;
+	const errorText = part.state === "output-error" ? part.errorText : "";
+	const deniedReason = part.state === "output-denied" ? part.approval.reason ?? "denied" : "";
+	const failed = Boolean(errorText) || Boolean(deniedReason) || output !== void 0 && (output.exitCode !== 0 || Boolean(output.errors?.length));
+	return /* @__PURE__ */ jsx(ActivityPanel, {
+		label: "Shell",
+		text: formatBashPanelText(part.input, output, errorText || deniedReason),
+		status: output !== void 0 || errorText || deniedReason ? getBashStatusText(output, errorText, deniedReason) : void 0,
+		error: failed
+	});
+}
+function formatBashPanelText(input, output, errorText) {
+	return [
+		input?.script?.trim() ? `$ bash\n${input.script}` : "",
+		output?.stdout,
+		output?.stderr,
+		errorText,
+		output?.skippedFiles?.length ? ["skipped files", ...output.skippedFiles].join("\n") : "",
+		output?.errors?.length ? ["sync errors", ...output.errors].join("\n") : "",
+		output ? formatChangedFiles(output.changedFiles) : ""
+	].filter(Boolean).join("\n\n");
+}
+function formatChangedFiles(changedFiles) {
+	if (!changedFiles) return "";
+	const lines = [
+		...changedFiles.created.map((path) => `created ${path}`),
+		...changedFiles.updated.map((path) => `updated ${path}`),
+		...changedFiles.deleted.map((path) => `deleted ${path}`),
+		...changedFiles.directoriesCreated.map((path) => `created directory ${path}`),
+		...changedFiles.directoriesDeleted.map((path) => `deleted directory ${path}`)
+	];
+	return lines.length ? ["workspace changes", ...lines].join("\n") : "";
+}
+function getBashStatusText(output, errorText, deniedReason) {
+	if (errorText) return "error";
+	if (deniedReason) return "denied";
+	if (output?.errors?.length) return "sync errors";
+	if (output && output.exitCode !== 0) return `exit ${output.exitCode}`;
+	return "success";
+}
+//#endregion
+export { ThinkChatBrowserPanel, ThinkChatExecutePanel, ThinkChatFetchPanel, ThinkChatSkillPanel, ThinkChatWorkspacePanel };

package/dist/components/ThinkChatToolParts.d.ts

@@ -0,0 +1,2 @@
+import { _ as isThinkChatActivityPart, a as ThinkBashToolOutput, c as ThinkWorkspaceToolName, d as isBrowserToolPart, f as isExecuteToolPart, g as isSkillToolPart, h as isPartWorking, i as SkillToolPart, l as WorkspaceToolPart, m as isPartFailed, n as ExecuteToolPart, o as ThinkBashToolPart, p as isFetchToolPart, r as FetchToolPart, s as ThinkChatPart, t as BrowserToolPart, u as displayUrl, v as isWorkspaceToolPart } from "../ThinkChatToolParts-DnUiZgCC.js";
+export { BrowserToolPart, ExecuteToolPart, FetchToolPart, SkillToolPart, ThinkBashToolOutput, ThinkBashToolPart, ThinkChatPart, ThinkWorkspaceToolName, WorkspaceToolPart, displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };

package/dist/components/ThinkChatToolParts.js

@@ -0,0 +1,66 @@
+import { getStaticToolName, getToolName, isReasoningUIPart, isStaticToolUIPart, isToolUIPart } from "ai";
+import { getToolPartState } from "@cloudflare/think/react";
+//#region src/components/ThinkChatToolParts.ts
+const WORKSPACE_TOOL_NAMES = new Set([
+	"read",
+	"write",
+	"edit",
+	"list",
+	"find",
+	"grep",
+	"delete",
+	"bash"
+]);
+function isWorkspaceToolPart(part) {
+	return isStaticToolUIPart(part) && WORKSPACE_TOOL_NAMES.has(getStaticToolName(part));
+}
+const SKILL_TOOL_NAMES = new Set([
+	"activate_skill",
+	"read_skill_resource",
+	"run_skill_script"
+]);
+function isSkillToolPart(part) {
+	return isStaticToolUIPart(part) && SKILL_TOOL_NAMES.has(getStaticToolName(part));
+}
+function isFetchToolPart(part) {
+	return isStaticToolUIPart(part) && getStaticToolName(part).startsWith("fetch_");
+}
+const BROWSER_TOOL_NAMES = new Set([
+	"browser_execute",
+	"browser_markdown",
+	"browser_extract",
+	"browser_links",
+	"browser_scrape",
+	"browser_content"
+]);
+function isBrowserToolPart(part) {
+	return isStaticToolUIPart(part) && BROWSER_TOOL_NAMES.has(getStaticToolName(part));
+}
+function isExecuteToolPart(part) {
+	return isStaticToolUIPart(part) && getStaticToolName(part) === "execute";
+}
+/** Agent work (reasoning, tool calls, step boundaries) vs. content shown to the user. */
+function isThinkChatActivityPart(part, excludeTools) {
+	if (part === void 0) return false;
+	if (isToolUIPart(part) && excludeTools?.has(getToolName(part))) return false;
+	return part.type === "step-start" || isReasoningUIPart(part) || isToolUIPart(part);
+}
+/** In-flight: the stream opened this part but hasn't delivered its result yet. */
+function isPartWorking(part) {
+	if (isReasoningUIPart(part)) return part.state === "streaming";
+	if (isToolUIPart(part)) {
+		const state = getToolPartState(part);
+		return state === "loading" || state === "streaming" || state === "waiting-approval";
+	}
+	return false;
+}
+/** Errored or denied — upstream's simplified tool-part state vocabulary. */
+function isPartFailed(part) {
+	const state = getToolPartState(part);
+	return state === "error" || state === "denied";
+}
+function displayUrl(url) {
+	return url ? url.replace(/^https?:\/\//, "") : "";
+}
+//#endregion
+export { displayUrl, isBrowserToolPart, isExecuteToolPart, isFetchToolPart, isPartFailed, isPartWorking, isSkillToolPart, isThinkChatActivityPart, isWorkspaceToolPart };

package/dist/components/ThinkFullApp.d.ts

@@ -0,0 +1,23 @@
+import { WorkspaceSource } from "./WorkspaceExplorer.js";
+import { ThinkApprovalStub, ThinkChatMessagesProps, ThinkChatProviderProps } from "./ThinkChat.js";
+import * as React from "react";
+
+//#region src/components/ThinkFullApp.d.ts
+interface ThinkFullAppProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** ThinkChat state and actions used by the chat surface. */
+  chat: ThinkChatProviderProps["chat"];
+  /** Optional Think agent stub used to resolve pending approval state. */
+  agentStub?: ThinkApprovalStub;
+  /** Optional workspace source shown in the file explorer pane. */
+  workspace?: WorkspaceSource;
+  /** Root path passed to the workspace explorer. */
+  workspaceRoot?: string;
+  /** Message rendering labels and approval overrides for ThinkChat. */
+  messages?: ThinkChatMessagesProps;
+}
+/** Combines ThinkChat with an optional resizable workspace file explorer shell. */
+declare function ThinkFullApp(props: ThinkFullAppProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkFullApp, ThinkFullAppProps };

package/dist/components/ThinkFullApp.js

@@ -0,0 +1,175 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { h as FileIcon, n as ArrowLeftIcon } from "../icons-BAlTbWWP.js";
+import { Button } from "./Button.js";
+import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
+import { ThinkChat, useThinkPendingApprovals } from "./ThinkChat.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkFullApp.tsx
+const filesPanelDefaultWidth = 340;
+const filesPanelMinWidth = 300;
+const filesPanelMaxWidth = 600;
+const filesPanelKeyboardStep = 24;
+function clampFilesPanelWidth(width) {
+	return Math.min(filesPanelMaxWidth, Math.max(filesPanelMinWidth, width));
+}
+function beginFilesPanelResize(event, current, apply) {
+	event.preventDefault();
+	const startX = event.clientX;
+	const onMove = (move) => {
+		apply(clampFilesPanelWidth(current - (move.clientX - startX)));
+	};
+	const onUp = () => {
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerup", onUp);
+		document.body.classList.remove("is-resizing-columns");
+	};
+	document.body.classList.add("is-resizing-columns");
+	window.addEventListener("pointermove", onMove);
+	window.addEventListener("pointerup", onUp);
+}
+function WorkspacePanel({ onBack, source, root }) {
+	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
+		className: "think-full-app__workbench",
+		workspace: useWorkspace({
+			source,
+			root
+		}),
+		title: onBack ? /* @__PURE__ */ jsxs("span", {
+			className: "think-full-app__workspace-title",
+			children: [/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				color: "neutral",
+				size: "icon-sm",
+				className: "think-full-app__workspace-back",
+				"aria-label": "Show chat",
+				onClick: onBack,
+				children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+			}), /* @__PURE__ */ jsx("span", { children: "Workspace" })]
+		}) : void 0
+	});
+}
+/** Combines ThinkChat with an optional resizable workspace file explorer shell. */
+function ThinkFullApp(props) {
+	if (!props.agentStub) return /* @__PURE__ */ jsx(ThinkFullAppLayout, { ...props });
+	return /* @__PURE__ */ jsx(ThinkFullAppWithApprovals, {
+		...props,
+		agentStub: props.agentStub
+	});
+}
+function ThinkFullAppWithApprovals({ agentStub, chat, messages, ...props }) {
+	const approvals = useThinkPendingApprovals(agentStub, `${chat.messages.length}:${chat.status}`);
+	const resolvedMessages = React.useMemo(() => ({
+		...messages,
+		executionApprovals: messages?.executionApprovals ?? approvals.executionApprovals,
+		pendingApprovals: messages?.pendingApprovals ?? approvals.pendingApprovals
+	}), [
+		approvals.executionApprovals,
+		approvals.pendingApprovals,
+		messages
+	]);
+	return /* @__PURE__ */ jsx(ThinkFullAppLayout, {
+		...props,
+		chat,
+		messages: resolvedMessages
+	});
+}
+function ThinkFullAppLayout({ chat, className, messages, ref, style, workspace, workspaceRoot, ...props }) {
+	const hasWorkspace = workspace !== void 0;
+	const [mobileView, setMobileView] = React.useState("chat");
+	const [filesPanelWidth, setFilesPanelWidth] = React.useState(filesPanelDefaultWidth);
+	const activeMobileView = hasWorkspace && mobileView === "files" ? "files" : "chat";
+	const isMobileFilesView = activeMobileView === "files";
+	const rootStyle = {
+		...style,
+		"--think-full-app-files-w": `${filesPanelWidth}px`
+	};
+	const resizeFilesPanelBy = (delta) => {
+		setFilesPanelWidth((current) => clampFilesPanelWidth(current + delta));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cx("think-full-app", className),
+		"data-has-files": hasWorkspace ? "true" : "false",
+		"data-mobile-view": activeMobileView,
+		style: rootStyle,
+		...props,
+		children: [
+			hasWorkspace && !isMobileFilesView ? /* @__PURE__ */ jsx("header", {
+				className: "think-full-app__mobile-header",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					color: "neutral",
+					size: "icon-sm",
+					className: "think-full-app__mobile-action",
+					"aria-label": "Show files",
+					onClick: () => setMobileView("files"),
+					children: /* @__PURE__ */ jsx(FileIcon, {})
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("section", {
+				className: "think-full-app__chat-surface",
+				"aria-label": "Chat",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__chat",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "think-full-app__chat-inner",
+						children: [/* @__PURE__ */ jsx(ThinkChat.Provider, {
+							chat,
+							children: /* @__PURE__ */ jsx(ThinkChat.Messages, { ...messages })
+						}), chat.error ? /* @__PURE__ */ jsxs("div", {
+							className: "think-full-app__error",
+							role: "alert",
+							children: [chat.error.message, /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: () => chat.clearError(),
+								children: "Dismiss"
+							})]
+						}) : null]
+					})
+				})
+			}),
+			workspace ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "separator",
+				"aria-label": "Resize file panel",
+				"aria-orientation": "vertical",
+				"aria-valuemin": filesPanelMinWidth,
+				"aria-valuemax": filesPanelMaxWidth,
+				"aria-valuenow": filesPanelWidth,
+				className: "think-full-app__resizer",
+				onPointerDown: (event) => beginFilesPanelResize(event, filesPanelWidth, setFilesPanelWidth),
+				onKeyDown: (event) => {
+					if (event.key === "ArrowLeft") {
+						event.preventDefault();
+						resizeFilesPanelBy(filesPanelKeyboardStep);
+					} else if (event.key === "ArrowRight") {
+						event.preventDefault();
+						resizeFilesPanelBy(-24);
+					} else if (event.key === "Home") {
+						event.preventDefault();
+						setFilesPanelWidth(filesPanelMinWidth);
+					} else if (event.key === "End") {
+						event.preventDefault();
+						setFilesPanelWidth(filesPanelMaxWidth);
+					}
+				}
+			}), /* @__PURE__ */ jsx("aside", {
+				className: "think-full-app__aside",
+				"aria-label": "File explorer",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "think-full-app__files-slot",
+					children: /* @__PURE__ */ jsx(WorkspacePanel, {
+						source: workspace,
+						root: workspaceRoot,
+						onBack: () => setMobileView("chat")
+					})
+				})
+			})] }) : null
+		]
+	});
+}
+//#endregion
+export { ThinkFullApp };

package/dist/components/WebPreview.js

@@ -1,5 +1,5 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BCNawx-T.js";
+import { k as RefreshIcon, n as ArrowLeftIcon, o as ChevronDownIcon, r as ArrowRightIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
 import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { Badge } from "./Badge.js";

package/dist/components/WorkspaceExplorer.d.ts

@@ -1,7 +1,7 @@
 import { A as CodeBlockLanguage } from "../CodeBlock-CxQXv3C4.js";
 import * as React from "react";
-import { FileInfo, Workspace } from "@cloudflare/shell";
 import { WorkspaceLike } from "@cloudflare/think/tools/workspace";
+import { FileInfo, Workspace } from "@cloudflare/shell";
 
 //#region src/components/WorkspaceExplorer.d.ts
 /** Workspace summary, as returned by `Workspace.getWorkspaceInfo()` upstream. */

package/dist/components/WorkspaceExplorer.js

@@ -1,8 +1,8 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { O as RefreshIcon, k as SearchIcon, m as FileIcon, n as ArrowLeftIcon } from "../icons-BCNawx-T.js";
+import { A as SearchIcon, h as FileIcon, k as RefreshIcon, n as ArrowLeftIcon } from "../icons-BAlTbWWP.js";
 import { Button } from "./Button.js";
-import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-BK0sOAbV.js";
-import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BWQZ0FSi.js";
+import { a as CodeBlockCopyButton, i as CodeBlockContent, n as CodeBlockActions, o as CodeBlockFilename, p as CodeBlockTitle, r as CodeBlockContainer, s as CodeBlockHeader, t as CodeBlock } from "../CodeBlock-D9koxDA7.js";
+import { i as FileTreeFolder, r as FileTreeFile, t as FileTree } from "../FileTree-BdK93Uuu.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/WorkspaceExplorer.tsx

package/dist/components/icons.d.ts

@@ -1,2 +1,2 @@
-import { A as SearchIcon, C as MonitorIcon, D as PlayIcon, E as PencilIcon, F as WrenchIcon, I as XIcon, M as SquareIcon, N as TerminalIcon, O as PlusIcon, P as WarningIcon, S as MinusIcon, T as PauseIcon, _ as IconProps, a as CheckIcon, b as LinkIcon, c as ChevronRightIcon, d as DownloadIcon, f as EyeIcon, g as FolderOpenIcon, h as FolderIcon, i as ArrowUpIcon, j as SpinnerIcon, k as RefreshIcon, l as CopyIcon, m as FileIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeOffIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as ImageIcon, w as PaperclipIcon, x as MaximizeIcon, y as InfoIcon } from "../icons-BYpJY6L2.js";
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };
+import { A as RefreshIcon, C as MinusIcon, D as PencilIcon, E as PauseIcon, F as WarningIcon, I as WrenchIcon, L as XIcon, M as SpinnerIcon, N as SquareIcon, O as PlayIcon, P as TerminalIcon, S as MaximizeIcon, T as PaperclipIcon, _ as FolderOpenIcon, a as CheckIcon, b as InfoIcon, c as ChevronRightIcon, d as DownloadIcon, f as EllipsisIcon, g as FolderIcon, h as FileIcon, i as ArrowUpIcon, j as SearchIcon, k as PlusIcon, l as CopyIcon, m as EyeOffIcon, n as ArrowLeftIcon, o as ChevronDownIcon, p as EyeIcon, r as ArrowRightIcon, s as ChevronLeftIcon, t as ArrowDownIcon, u as DotIcon, v as IconProps, w as MonitorIcon, x as LinkIcon, y as ImageIcon } from "../icons-BRI54ATJ.js";
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CopyIcon, DotIcon, DownloadIcon, EllipsisIcon, EyeIcon, EyeOffIcon, FileIcon, FolderIcon, FolderOpenIcon, IconProps, ImageIcon, InfoIcon, LinkIcon, MaximizeIcon, MinusIcon, MonitorIcon, PaperclipIcon, PauseIcon, PencilIcon, PlayIcon, PlusIcon, RefreshIcon, SearchIcon, SpinnerIcon, SquareIcon, TerminalIcon, WarningIcon, WrenchIcon, XIcon };