@tangle-network/sandbox-ui 0.137.1 → 0.138.0

package/dist/workbench-B3JL1qbt.js

@@ -0,0 +1,892 @@
+import { t as cn$1 } from "./utils-BER_bdgE.js";
+import { a as PortsList } from "./dashboard-ClKA3opr.js";
+import { n as TerminalView } from "./terminal-nUCznZRj.js";
+import { RichFileTree } from "./files.js";
+import { a as CodeSurface, n as buildUnifiedPatch, r as computeDiffStats, t as DiffView } from "./diff-view-A0O0Z_SR.js";
+import { n as PreviewView } from "./embedded-app-view-DXsoPale.js";
+import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Check, ChevronRight, Code2, Copy, FileCode2, GitBranch, GitCompare, Globe, Network, RefreshCw, SquareTerminal, WrapText } from "lucide-react";
+import { focusRing, focusRingInset } from "@tangle-network/ui/utils";
+// src/workbench/pill-tabs.tsx
+/**
+* Sliding-pill segmented control. Reimplemented from blueprint-agent's
+* framer-motion `PillTabs` with a measured CSS transform instead — no motion
+* dependency. A `ResizeObserver` re-measures on container resize and font
+* load so the indicator tracks the active tab exactly. Token-swapped onto the
+* sandbox-ui surface ladder.
+*/
+function PillTabs({ items, value, onChange, className, "aria-label": ariaLabel, idPrefix, panelId }) {
+	const containerRef = React$1.useRef(null);
+	const tabRefs = React$1.useRef(/* @__PURE__ */ new Map());
+	const [indicator, setIndicator] = React$1.useState(null);
+	const measure = React$1.useCallback(() => {
+		const container = containerRef.current;
+		const active = tabRefs.current.get(value);
+		if (!container || !active) return;
+		const c = container.getBoundingClientRect();
+		const a = active.getBoundingClientRect();
+		setIndicator({
+			left: a.left - c.left,
+			width: a.width
+		});
+	}, [value]);
+	React$1.useLayoutEffect(() => {
+		measure();
+	}, [measure, items]);
+	React$1.useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const ro = new ResizeObserver(() => measure());
+		ro.observe(container);
+		const raf = requestAnimationFrame(measure);
+		return () => {
+			ro.disconnect();
+			cancelAnimationFrame(raf);
+		};
+	}, [measure]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		role: "tablist",
+		"aria-label": ariaLabel,
+		className: cn$1("relative inline-flex items-center gap-0.5 rounded-full border border-[var(--md3-outline-variant)] bg-surface-container-low p-1", className),
+		children: [indicator && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "absolute top-1 bottom-1 rounded-full bg-surface-container-high shadow-[var(--shadow-card)] ring-1 ring-[var(--md3-outline-variant)] transition-[transform,width] duration-200 ease-out",
+			style: {
+				transform: `translateX(${indicator.left}px)`,
+				width: indicator.width,
+				left: 0
+			}
+		}), items.map((item) => {
+			const selected = item.value === value;
+			return /* @__PURE__ */ jsxs("button", {
+				ref: (el) => {
+					if (el) tabRefs.current.set(item.value, el);
+					else tabRefs.current.delete(item.value);
+				},
+				type: "button",
+				role: "tab",
+				id: idPrefix ? `${idPrefix}-${item.value}` : void 0,
+				"aria-controls": panelId,
+				"aria-selected": selected,
+				tabIndex: selected ? 0 : -1,
+				onClick: () => onChange(item.value),
+				onKeyDown: (event) => {
+					const index = items.findIndex((candidate) => candidate.value === item.value);
+					let nextIndex;
+					switch (event.key) {
+						case "ArrowRight":
+							nextIndex = (index + 1) % items.length;
+							break;
+						case "ArrowLeft":
+							nextIndex = (index - 1 + items.length) % items.length;
+							break;
+						case "Home":
+							nextIndex = 0;
+							break;
+						case "End":
+							nextIndex = items.length - 1;
+							break;
+						default: return;
+					}
+					event.preventDefault();
+					const next = items[nextIndex];
+					onChange(next.value);
+					const nextTab = tabRefs.current.get(next.value);
+					const container = containerRef.current;
+					if (!nextTab || !container) return;
+					nextTab.focus({ preventScroll: true });
+					const padding = getComputedStyle(container);
+					const target = nextTab.getBoundingClientRect();
+					const targetLeft = target.left - (Number.parseFloat(padding.paddingLeft) || 0);
+					const targetRight = target.right + (Number.parseFloat(padding.paddingRight) || 0);
+					for (let scrollport = container; scrollport; scrollport = scrollport.parentElement) {
+						if (![
+							"auto",
+							"scroll",
+							"hidden"
+						].includes(getComputedStyle(scrollport).overflowX)) continue;
+						const left = scrollport.getBoundingClientRect().left + scrollport.clientLeft;
+						const right = left + scrollport.clientWidth;
+						scrollport.scrollLeft += targetLeft < left ? targetLeft - left : targetRight > right ? targetRight - right : 0;
+						break;
+					}
+				},
+				className: cn$1("relative z-10 inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium whitespace-nowrap transition-colors", focusRing, selected ? "text-foreground" : "text-muted-foreground hover:text-foreground"),
+				children: [item.icon && /* @__PURE__ */ jsx("span", {
+					className: "flex h-3.5 w-3.5 items-center justify-center",
+					children: item.icon
+				}), item.label]
+			}, item.value);
+		})]
+	});
+}
+// src/workbench/panel-header.tsx
+const GIT_STATUS_META = {
+	added: {
+		label: "Added",
+		className: "bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]"
+	},
+	modified: {
+		label: "Modified",
+		className: "bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]"
+	},
+	deleted: {
+		label: "Deleted",
+		className: "bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
+	},
+	renamed: {
+		label: "Renamed",
+		className: "bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]"
+	},
+	untracked: {
+		label: "Untracked",
+		className: "bg-surface-container-high text-muted-foreground"
+	},
+	ignored: {
+		label: "Ignored",
+		className: "bg-surface-container-high text-muted-foreground"
+	}
+};
+function GitStatusBadge({ status }) {
+	const meta = GIT_STATUS_META[status];
+	return /* @__PURE__ */ jsx("span", {
+		className: cn$1("inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider", meta.className),
+		children: meta.label
+	});
+}
+/** `+added −removed` line counts in mono; the same pair the Changes list prints per file. */
+function DiffStatsBadge({ stats, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn$1("inline-flex items-center gap-1.5 font-mono text-xs", className),
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-[var(--code-success,#10B981)]",
+			children: ["+", stats.added]
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "text-[var(--code-error,#FF4D6D)]",
+			children: ["-", stats.removed]
+		})]
+	});
+}
+/**
+* Thin bordered chrome bar above the artifact body — filename, git-status
+* badge, optional diff counts, and a copy action. Ported in spirit from
+* blueprint-agent's `PanelHeader` (min-h, hairline bottom border, dense
+* horizontal rhythm), retoned to the sandbox-ui surface ladder.
+*/
+function PanelHeader({ filename, gitStatus, stats, copyText, children, className }) {
+	const [copied, setCopied] = React$1.useState(false);
+	const timer = React$1.useRef(null);
+	React$1.useEffect(() => () => {
+		if (timer.current) clearTimeout(timer.current);
+	}, []);
+	const handleCopy = React$1.useCallback(async () => {
+		if (copyText == null) return;
+		try {
+			await navigator.clipboard.writeText(copyText);
+			setCopied(true);
+			if (timer.current) clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), 2e3);
+		} catch (err) {
+			console.warn("Clipboard write failed:", err);
+		}
+	}, [copyText]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex min-h-[38px] items-center gap-2 border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-3 py-1", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono text-xs text-foreground",
+				children: filename
+			}),
+			gitStatus && /* @__PURE__ */ jsx(GitStatusBadge, { status: gitStatus }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-3",
+				children: [
+					stats && /* @__PURE__ */ jsx(DiffStatsBadge, { stats }),
+					children,
+					copyText != null && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: handleCopy,
+						"aria-label": "Copy to clipboard",
+						className: "inline-flex items-center gap-1.5 rounded-md border border-[var(--md3-outline-variant)] bg-surface-container px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
+						children: [copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5 text-[var(--surface-success-text)]" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" }), copied ? "Copied" : "Copy"]
+					})
+				]
+			})
+		]
+	});
+}
+// src/workbench/file-breadcrumb.tsx
+/**
+* Slim path breadcrumb for the code panel. Reimplemented (not ported) from
+* blueprint-agent's `FileBreadcrumb` — that one nests a `FileTree` dropdown per
+* segment and couples to the workbench store + framer-motion. Here the rail
+* already owns navigation, so this is a read-only trail: caret-separated parent
+* segments with a file-icon leaf.
+*/
+function FileBreadcrumb({ path, className }) {
+	const segments = path.split("/").filter(Boolean);
+	const leaf = segments[segments.length - 1] ?? path;
+	const parents = segments.slice(0, -1);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex min-h-[30px] items-center gap-1 overflow-hidden border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 text-xs text-muted-foreground", className),
+		children: [
+			/* @__PURE__ */ jsx(FileCode2, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+			parents.map((seg, i) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono",
+				children: seg
+			}), /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 opacity-50" })] }, `${seg}-${i}`)),
+			/* @__PURE__ */ jsx("span", {
+				className: "truncate font-mono text-foreground",
+				children: leaf
+			})
+		]
+	});
+}
+// src/workbench/code-view.tsx
+/**
+* Code surface: a fixed-width `RichFileTree` rail (with git-status
+* decorations) beside a breadcrumb-topped, syntax-highlighted read-only file
+* view. The rail owns navigation; selecting a path fans out to `onFileSelect`
+* so the host can swap the active artifact.
+*/
+function CodeView({ path, filename, content, language, paths, gitStatus, onFileSelect, showTree = true, defaultWrap = false, themeType, className }) {
+	const [narrowPane, setNarrowPane] = React$1.useState("code");
+	const [wrap, setWrap] = React$1.useState(defaultWrap);
+	const [copied, setCopied] = React$1.useState(false);
+	const [line, setLine] = React$1.useState();
+	const lineInput = React$1.useRef(null);
+	const lineCount = React$1.useMemo(() => content.split("\n").length, [content]);
+	React$1.useEffect(() => {
+		setLine(void 0);
+	}, [path]);
+	React$1.useEffect(() => {
+		if (!copied) return;
+		const timer = setTimeout(() => setCopied(false), 1500);
+		return () => clearTimeout(timer);
+	}, [copied]);
+	const copy = () => {
+		navigator.clipboard?.writeText(content).then(() => setCopied(true));
+	};
+	const goToLine = (event) => {
+		event.preventDefault();
+		const value = Math.round(Number(lineInput.current?.value));
+		if (Number.isFinite(value) && value >= 1) setLine(Math.min(value, lineCount));
+	};
+	const treePaths = React$1.useMemo(() => {
+		const list = paths && paths.length > 0 ? paths : [path];
+		return list.includes(path) ? list : [...list, path];
+	}, [paths, path]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn$1("sandbox-code-view h-full min-h-0 w-full", className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "sandbox-code-view-layout flex h-full min-h-0 w-full",
+			children: [
+				showTree && /* @__PURE__ */ jsxs("div", {
+					className: "sandbox-code-view-mobile-toolbar",
+					role: "group",
+					"aria-label": "Code view pane",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": narrowPane === "files",
+						onClick: () => setNarrowPane("files"),
+						className: focusRing,
+						children: "Files"
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-pressed": narrowPane === "code",
+						onClick: () => setNarrowPane("code"),
+						className: focusRing,
+						children: "Code"
+					})]
+				}),
+				showTree && /* @__PURE__ */ jsx("div", {
+					className: "sandbox-code-view-tree sandbox-tree-surface flex w-60 shrink-0 flex-col border-r border-[var(--md3-outline-variant)] bg-surface-container-lowest",
+					"data-mobile-open": narrowPane === "files",
+					children: /* @__PURE__ */ jsx(RichFileTree, {
+						paths: treePaths,
+						selectedPath: path,
+						onSelect: (next) => {
+							onFileSelect?.(next);
+							setNarrowPane("code");
+						},
+						gitStatus,
+						search: treePaths.length > 12,
+						height: "100%"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "sandbox-code-view-editor flex min-w-0 flex-1 flex-col bg-surface-container",
+					"data-mobile-hidden": showTree && narrowPane === "files",
+					onKeyDown: (event) => {
+						if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "g") {
+							event.preventDefault();
+							lineInput.current?.focus();
+							lineInput.current?.select();
+						}
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 items-center border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest",
+						children: [/* @__PURE__ */ jsx(FileBreadcrumb, {
+							path,
+							className: "min-w-0 flex-1 border-b-0"
+						}), /* @__PURE__ */ jsxs("form", {
+							onSubmit: goToLine,
+							className: "flex shrink-0 items-center gap-0.5 pr-1",
+							children: [
+								/* @__PURE__ */ jsx("input", {
+									ref: lineInput,
+									type: "number",
+									min: 1,
+									max: lineCount,
+									inputMode: "numeric",
+									placeholder: "Line",
+									"aria-label": "Go to line",
+									"aria-keyshortcuts": "Control+g Meta+g",
+									className: cn$1("h-6 w-14 rounded border border-transparent bg-transparent px-1.5 font-mono text-xs text-foreground placeholder:text-muted-foreground hover:border-border", focusRing)
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									"aria-pressed": wrap,
+									"aria-label": "Wrap lines",
+									title: "Wrap lines",
+									onClick: () => setWrap((value) => !value),
+									className: cn$1("h-6 w-6 p-0", wrap && "text-foreground bg-surface-container-high"),
+									children: /* @__PURE__ */ jsx(WrapText, { className: "h-3.5 w-3.5" })
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									"aria-label": copied ? "Copied" : "Copy file",
+									title: copied ? "Copied" : "Copy file",
+									onClick: copy,
+									className: "h-6 w-6 p-0",
+									children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3.5 w-3.5" })
+								})
+							]
+						})]
+					}), /* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1",
+						children: /* @__PURE__ */ jsx(CodeSurface, {
+							code: content,
+							filename,
+							language,
+							wrap,
+							line,
+							themeType
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+// src/workbench/sandbox-artifact-pane.tsx
+const VIEW_ORDER = [
+	"code",
+	"diff",
+	"preview",
+	"ports",
+	"terminal"
+];
+const VIEW_META = {
+	code: {
+		label: "Code",
+		icon: /* @__PURE__ */ jsx(Code2, { className: "h-3.5 w-3.5" })
+	},
+	diff: {
+		label: "Diff",
+		icon: /* @__PURE__ */ jsx(GitCompare, { className: "h-3.5 w-3.5" })
+	},
+	preview: {
+		label: "Preview",
+		icon: /* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" })
+	},
+	ports: {
+		label: "Ports",
+		icon: /* @__PURE__ */ jsx(Network, { className: "h-3.5 w-3.5" })
+	},
+	terminal: {
+		label: "Terminal",
+		icon: /* @__PURE__ */ jsx(SquareTerminal, { className: "h-3.5 w-3.5" })
+	}
+};
+const noop = () => {};
+/**
+* Blueprint-grade artifact workbench. Composes the sandbox-ui substrate
+* (`RichFileTree`, `PortsList`, `TerminalView`, `@pierre/diffs`) behind a
+* single pill-tab view switcher: Code · Diff · Preview · Ports · Terminal.
+* Tabs appear only when their data is present (Diff requires a differing
+* baseline; Preview a url; Ports a port list; Terminal a live binding), so the
+* chrome never shows a dead surface.
+*/
+function SandboxArtifactPane({ artifact, paths, gitStatus, showTree, ports, previewUrl, terminal, activeView, defaultView, onViewChange, onFileSelect, onExposePort, onRemovePort, className, style }) {
+	const hasDiff = artifact.baselineContent != null && artifact.baselineContent !== artifact.content;
+	const hasPreview = previewUrl != null && previewUrl !== "";
+	const hasPorts = ports != null;
+	const hasTerminal = terminal != null;
+	const available = React$1.useMemo(() => {
+		return VIEW_ORDER.filter((v) => {
+			if (v === "diff") return hasDiff;
+			if (v === "preview") return hasPreview;
+			if (v === "ports") return hasPorts;
+			if (v === "terminal") return hasTerminal;
+			return true;
+		});
+	}, [
+		hasDiff,
+		hasPreview,
+		hasPorts,
+		hasTerminal
+	]);
+	const [internalView, setInternalView] = React$1.useState(() => defaultView && (defaultView !== "diff" || hasDiff) ? defaultView : "code");
+	const tabIdPrefix = React$1.useId();
+	const panelId = `${tabIdPrefix}-panel`;
+	const controlled = activeView != null;
+	const requestedView = controlled ? activeView : internalView;
+	const view = available.includes(requestedView) ? requestedView : available[0];
+	const selectView = React$1.useCallback((next) => {
+		if (!controlled) setInternalView(next);
+		onViewChange?.(next);
+	}, [controlled, onViewChange]);
+	const tabs = React$1.useMemo(() => available.map((v) => ({
+		value: v,
+		label: VIEW_META[v].label,
+		icon: VIEW_META[v].icon
+	})), [available]);
+	const activeGitStatus = React$1.useMemo(() => gitStatus?.find((e) => e.path === artifact.path)?.status, [gitStatus, artifact.path]);
+	const stats = React$1.useMemo(() => hasDiff ? computeDiffStats(artifact.baselineContent ?? "", artifact.content) : void 0, [
+		hasDiff,
+		artifact.baselineContent,
+		artifact.content
+	]);
+	const copyText = React$1.useMemo(() => {
+		if (view === "diff" && hasDiff) return buildUnifiedPatch(artifact.filename, artifact.baselineContent ?? "", artifact.content);
+		if (view === "code" || view === "diff") return artifact.content;
+	}, [
+		view,
+		hasDiff,
+		artifact.filename,
+		artifact.baselineContent,
+		artifact.content
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex h-full min-h-0 flex-col overflow-hidden rounded-xl border border-[var(--md3-outline-variant)] bg-surface-container shadow-[var(--shadow-card)]", className),
+		style,
+		children: [
+			/* @__PURE__ */ jsx(PanelHeader, {
+				filename: artifact.filename,
+				gitStatus: activeGitStatus,
+				stats: view === "diff" ? stats : void 0,
+				copyText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 items-center overflow-x-auto border-b border-[var(--md3-outline-variant)] bg-surface-container-lowest px-3 py-1.5",
+				children: /* @__PURE__ */ jsx(PillTabs, {
+					items: tabs,
+					value: view,
+					onChange: selectView,
+					"aria-label": "Artifact view",
+					idPrefix: tabIdPrefix,
+					panelId
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				id: panelId,
+				role: "tabpanel",
+				"aria-labelledby": `${tabIdPrefix}-${view}`,
+				tabIndex: 0,
+				className: `min-h-0 flex-1 ${focusRingInset}`,
+				children: [
+					view === "code" && /* @__PURE__ */ jsx(CodeView, {
+						path: artifact.path,
+						filename: artifact.filename,
+						content: artifact.content,
+						language: artifact.language,
+						paths,
+						gitStatus,
+						showTree,
+						onFileSelect
+					}),
+					view === "diff" && hasDiff && /* @__PURE__ */ jsx(DiffView, {
+						filename: artifact.filename,
+						baseline: artifact.baselineContent ?? "",
+						current: artifact.content
+					}),
+					view === "preview" && hasPreview && /* @__PURE__ */ jsx(PreviewView, { url: previewUrl }),
+					view === "ports" && hasPorts && /* @__PURE__ */ jsx("div", {
+						className: "h-full overflow-auto bg-surface-container p-4",
+						children: /* @__PURE__ */ jsx(PortsList, {
+							ports,
+							onExposePort: onExposePort ?? noop,
+							onRemovePort
+						})
+					}),
+					view === "terminal" && hasTerminal && /* @__PURE__ */ jsx("div", {
+						className: "h-full bg-surface-container-lowest",
+						children: /* @__PURE__ */ jsx(TerminalView, {
+							apiUrl: terminal.apiUrl,
+							token: terminal.token,
+							connectionId: terminal.connectionId,
+							title: terminal.title,
+							subtitle: terminal.subtitle
+						})
+					})
+				]
+			})
+		]
+	});
+}
+// src/workbench/changes-pane.tsx
+const BORDER = "border-[var(--md3-outline-variant)]";
+function splitPath(path) {
+	const at = path.lastIndexOf("/");
+	if (at < 0) return {
+		dir: "",
+		base: path
+	};
+	return {
+		dir: path.slice(0, at + 1),
+		base: path.slice(at + 1)
+	};
+}
+/**
+* The contents a diff needs, or `null` while the consumer is still resolving
+* them. An added or untracked file has no baseline, a deleted file has no
+* working copy; each diffs against the empty string once its one side is
+* present. Every other status waits for both sides so a half-resolved
+* modification is never drawn as a wholesale rewrite.
+*/
+function resolveContents(file) {
+	const { status, baseline, current } = file;
+	if (status === "added" || status === "untracked") return current == null ? null : {
+		baseline: baseline ?? "",
+		current
+	};
+	if (status === "deleted") return baseline == null ? null : {
+		baseline,
+		current: current ?? ""
+	};
+	return baseline == null || current == null ? null : {
+		baseline,
+		current
+	};
+}
+function errorText(err) {
+	if (err instanceof Error && err.message) return err.message;
+	return String(err);
+}
+const SKELETON_ROWS = [
+	0,
+	1,
+	2,
+	3
+];
+/**
+* The sandbox's git working tree as a review surface: every changed file with
+* its line counts, the selected file's word-level diff beneath, and a commit
+* box in the footer. Data in, callbacks out — the pane never fetches; the
+* consumer feeds it the sidecar's `/git/status` + `/git/diff` and resolves
+* `baseline` / `current` for the file it is told was selected.
+*
+* The list is capped at 40% of the pane and scrolls, so the diff keeps its
+* room however many files changed. The row's own chrome is compact: the
+* workspace shell already gives its right pane the 56px `WorkspacePaneHeader`,
+* so this header nests beneath it at `PanelHeader` rhythm rather than adding a
+* second tall bar.
+*/
+function ChangesPane({ branch, ahead = 0, behind = 0, files, selectedPath, onSelectFile, loading = false, error, onRefresh, onCommit, onPush, busy, onOpenFile, className }) {
+	const idPrefix = React$1.useId();
+	const listRef = React$1.useRef(null);
+	const rowRefs = React$1.useRef(/* @__PURE__ */ new Map());
+	const [message, setMessage] = React$1.useState("");
+	const [actionError, setActionError] = React$1.useState(null);
+	const [pending, setPending] = React$1.useState(null);
+	const inFlight = busy ?? pending;
+	const totals = React$1.useMemo(() => {
+		let added = 0;
+		let removed = 0;
+		for (const f of files) {
+			added += f.additions;
+			removed += f.deletions;
+		}
+		return {
+			added,
+			removed
+		};
+	}, [files]);
+	const selectedIndex = selectedPath == null ? -1 : files.findIndex((f) => f.path === selectedPath);
+	const selected = selectedIndex >= 0 ? files[selectedIndex] : void 0;
+	React$1.useEffect(() => {
+		const list = listRef.current;
+		if (!list || selected == null) return;
+		if (!list.contains(document.activeElement)) return;
+		rowRefs.current.get(selected.path)?.focus();
+	}, [selected]);
+	const handleListKeyDown = React$1.useCallback((event) => {
+		if (files.length === 0 || !onSelectFile) return;
+		const last = files.length - 1;
+		let next = null;
+		switch (event.key) {
+			case "ArrowDown":
+				next = selectedIndex < 0 ? 0 : Math.min(selectedIndex + 1, last);
+				break;
+			case "ArrowUp":
+				next = selectedIndex < 0 ? last : Math.max(selectedIndex - 1, 0);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = last;
+				break;
+			case "Enter":
+			case " ":
+				next = selectedIndex < 0 ? 0 : selectedIndex;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		const file = files[next];
+		if (file) onSelectFile(file.path);
+	}, [
+		files,
+		onSelectFile,
+		selectedIndex
+	]);
+	const runCommit = React$1.useCallback(async () => {
+		const text = message.trim();
+		if (!onCommit || !text || inFlight) return;
+		setActionError(null);
+		setPending("commit");
+		try {
+			await onCommit(text);
+			setMessage("");
+		} catch (err) {
+			setActionError(errorText(err));
+		} finally {
+			setPending(null);
+		}
+	}, [
+		message,
+		onCommit,
+		inFlight
+	]);
+	const runPush = React$1.useCallback(async () => {
+		if (!onPush || inFlight) return;
+		setActionError(null);
+		setPending("push");
+		try {
+			await onPush();
+		} catch (err) {
+			setActionError(errorText(err));
+		} finally {
+			setPending(null);
+		}
+	}, [onPush, inFlight]);
+	const handleMessageKeyDown = React$1.useCallback((event) => {
+		if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+			event.preventDefault();
+			runCommit();
+		}
+	}, [runCommit]);
+	const canCommit = files.length > 0 && message.trim().length > 0 && inFlight == null;
+	const canPush = ahead > 0 && inFlight == null;
+	const contents = React$1.useMemo(() => selected ? resolveContents(selected) : null, [selected]);
+	const stats = React$1.useMemo(() => contents ? computeDiffStats(contents.baseline, contents.current) : void 0, [contents]);
+	const patch = React$1.useMemo(() => selected && contents ? buildUnifiedPatch(selected.path, contents.baseline, contents.current) : void 0, [selected, contents]);
+	const showList = !loading && files.length > 0;
+	const showEmpty = !loading && files.length === 0 && !error;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn$1("flex h-full min-h-0 flex-col text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn$1("flex min-h-[38px] shrink-0 items-center gap-2 border-b bg-surface-container-low px-3 py-1", BORDER),
+				children: [
+					/* @__PURE__ */ jsx(GitBranch, {
+						className: "h-3.5 w-3.5 shrink-0 text-muted-foreground",
+						"aria-hidden": true
+					}),
+					loading && branch == null ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-24 rounded-full" }) : branch == null ? /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-muted-foreground",
+						children: "no commits yet"
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "truncate rounded-full bg-surface-container-high px-2 py-0.5 font-mono text-xs text-foreground",
+						children: branch
+					}),
+					(ahead > 0 || behind > 0) && /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5 font-mono text-xs text-muted-foreground",
+						children: [ahead > 0 && /* @__PURE__ */ jsxs("span", {
+							"aria-label": `${ahead} ahead`,
+							children: ["↑", ahead]
+						}), behind > 0 && /* @__PURE__ */ jsxs("span", {
+							"aria-label": `${behind} behind`,
+							children: ["↓", behind]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ml-auto flex items-center gap-3",
+						children: [files.length > 0 && /* @__PURE__ */ jsx(DiffStatsBadge, { stats: totals }), onRefresh && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onRefresh,
+							"aria-label": "Refresh",
+							className: `rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground ${focusRing}`,
+							children: /* @__PURE__ */ jsx(RefreshCw, { className: cn$1("h-3.5 w-3.5", loading && "animate-spin") })
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cn$1("flex max-h-[40%] shrink-0 flex-col border-b", BORDER),
+				"aria-busy": loading || void 0,
+				children: [
+					error && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "px-3 py-2 text-xs text-[var(--surface-danger-text)]",
+						children: error
+					}),
+					loading && /* @__PURE__ */ jsxs("div", {
+						className: "space-y-1 px-3 py-2",
+						"data-testid": "changes-skeleton",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: "Loading changes…"
+						}), SKELETON_ROWS.map((row) => /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-full" }, row))]
+					}),
+					showEmpty && /* @__PURE__ */ jsx("p", {
+						className: "px-3 py-6 text-center text-xs text-muted-foreground",
+						children: "No changes in the working tree."
+					}),
+					showList && /* @__PURE__ */ jsx("ul", {
+						ref: listRef,
+						role: "listbox",
+						"aria-label": "Changed files",
+						"aria-activedescendant": selected ? `${idPrefix}-${selectedIndex}` : void 0,
+						onKeyDown: handleListKeyDown,
+						className: "min-h-0 overflow-y-auto py-1 focus:outline-none",
+						children: files.map((file, index) => {
+							const isSelected = index === selectedIndex;
+							const { dir, base } = splitPath(file.path);
+							const tabbable = isSelected || selectedIndex < 0 && index === 0;
+							return /* @__PURE__ */ jsxs("li", {
+								id: `${idPrefix}-${index}`,
+								ref: (el) => {
+									if (el) rowRefs.current.set(file.path, el);
+									else rowRefs.current.delete(file.path);
+								},
+								role: "option",
+								"aria-selected": isSelected,
+								tabIndex: tabbable ? 0 : -1,
+								onClick: () => onSelectFile?.(file.path),
+								className: cn$1("flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors", focusRingInset, isSelected ? "bg-surface-container-high" : "hover:bg-surface-container"),
+								children: [
+									/* @__PURE__ */ jsxs("span", {
+										className: "min-w-0 flex-1 truncate font-mono",
+										title: file.path,
+										children: [dir && /* @__PURE__ */ jsx("span", {
+											className: "text-muted-foreground",
+											children: dir
+										}), /* @__PURE__ */ jsx("span", {
+											className: "text-foreground",
+											children: base
+										})]
+									}),
+									/* @__PURE__ */ jsx(GitStatusBadge, { status: file.status }),
+									/* @__PURE__ */ jsx(DiffStatsBadge, {
+										stats: {
+											added: file.additions,
+											removed: file.deletions
+										},
+										className: "w-[5.5rem] justify-end tabular-nums"
+									})
+								]
+							}, file.path);
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-h-0 flex-1 flex-col",
+				children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PanelHeader, {
+					filename: selected.path,
+					gitStatus: selected.status,
+					stats,
+					copyText: patch,
+					children: onOpenFile && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						className: "h-7 px-2",
+						onClick: () => onOpenFile(selected.path),
+						children: "Open"
+					})
+				}), contents ? /* @__PURE__ */ jsx(DiffView, {
+					filename: selected.path,
+					baseline: contents.baseline,
+					current: contents.current,
+					showFileHeader: false,
+					className: "flex-1"
+				}) : selected.loadError ? /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-3 text-xs text-destructive",
+					role: "alert",
+					children: selected.loadError
+				}) : /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-3 text-xs text-muted-foreground",
+					role: "status",
+					children: "Loading diff…"
+				})] }) : showList && /* @__PURE__ */ jsx("p", {
+					className: "px-3 py-3 text-xs text-muted-foreground",
+					children: "Select a file to read its diff."
+				})
+			}),
+			(onCommit || onPush) && /* @__PURE__ */ jsxs("div", {
+				className: cn$1("shrink-0 space-y-2 border-t bg-surface-container-low p-3", BORDER),
+				children: [
+					onCommit && /* @__PURE__ */ jsx(Textarea, {
+						"aria-label": "Commit message",
+						placeholder: "Commit message",
+						rows: 2,
+						value: message,
+						onChange: (event) => setMessage(event.target.value),
+						onKeyDown: handleMessageKeyDown,
+						disabled: inFlight != null,
+						className: "min-h-[3.5rem] resize-none px-3 py-2 text-xs"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [onCommit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							size: "sm",
+							disabled: !canCommit,
+							loading: inFlight === "commit",
+							onClick: () => void runCommit(),
+							children: "Commit"
+						}), onPush && /* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							size: "sm",
+							variant: "secondary",
+							disabled: !canPush,
+							loading: inFlight === "push",
+							onClick: () => void runPush(),
+							children: ["Push", ahead > 0 && /* @__PURE__ */ jsxs("span", {
+								className: "font-mono text-muted-foreground",
+								children: ["↑", ahead]
+							})]
+						})]
+					}),
+					actionError && /* @__PURE__ */ jsx("p", {
+						role: "alert",
+						className: "text-xs text-[var(--surface-danger-text)]",
+						children: actionError
+					})
+				]
+			})
+		]
+	});
+}
+export { DiffStatsBadge as a, PillTabs as c, FileBreadcrumb as i, SandboxArtifactPane as n, GitStatusBadge as o, CodeView as r, PanelHeader as s, ChangesPane as t };