@tangle-network/sandbox-ui 0.111.2 → 0.112.0

package/dist/{chunk-5M67IFVI.js → chunk-ISTJTUHJ.js}

@@ -325,8 +325,8 @@ function GitStatusBadge({ status }) {
     }
   );
 }
-function DiffStatsBadge({ stats }) {
-  return /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 font-mono text-xs", children: [
+function DiffStatsBadge({ stats, className }) {
+  return /* @__PURE__ */ jsxs2("span", { className: cn("inline-flex items-center gap-1.5 font-mono text-xs", className), children: [
     /* @__PURE__ */ jsxs2("span", { className: "text-[var(--code-success,#10B981)]", children: [
       "+",
       stats.added
@@ -7280,15 +7280,19 @@ var DIFF_OPTIONS = {
   themeType: "dark",
   stickyHeader: true
 };
-function DiffView({ filename, baseline, current, className }) {
+function DiffView({ filename, baseline, current, showFileHeader = true, className }) {
   const patch = React7.useMemo(
     () => buildUnifiedPatch(filename, baseline, current),
     [filename, baseline, current]
   );
+  const options = React7.useMemo(
+    () => showFileHeader ? DIFF_OPTIONS : { ...DIFF_OPTIONS, disableFileHeader: true },
+    [showFileHeader]
+  );
   if (!patch) {
     return /* @__PURE__ */ jsx7("div", { className: cn("flex h-full items-center justify-center bg-surface-container", className), children: /* @__PURE__ */ jsx7("p", { className: "text-sm text-muted-foreground", children: "No changes \u2014 baseline and working copy are identical." }) });
   }
-  return /* @__PURE__ */ jsx7("div", { className: cn("h-full min-h-0 overflow-auto bg-surface-container text-[13px]", className), children: /* @__PURE__ */ jsx7(PatchDiff, { patch, options: DIFF_OPTIONS }) });
+  return /* @__PURE__ */ jsx7("div", { className: cn("h-full min-h-0 overflow-auto bg-surface-container text-[13px]", className), children: /* @__PURE__ */ jsx7(PatchDiff, { patch, options }) });
 }
 
 // src/workbench/preview-view.tsx
@@ -7511,9 +7515,322 @@ function SandboxArtifactPane({
   );
 }
 
+// src/workbench/changes-pane.tsx
+import * as React10 from "react";
+import { GitBranch, RefreshCw } from "lucide-react";
+import { Button, Skeleton, Textarea } from "@tangle-network/ui/primitives";
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var 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) };
+}
+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);
+}
+var SKELETON_ROWS = [0, 1, 2, 3];
+function ChangesPane({
+  branch,
+  ahead = 0,
+  behind = 0,
+  files,
+  selectedPath,
+  onSelectFile,
+  loading = false,
+  error,
+  onRefresh,
+  onCommit,
+  onPush,
+  busy,
+  onOpenFile,
+  className
+}) {
+  const idPrefix = React10.useId();
+  const listRef = React10.useRef(null);
+  const rowRefs = React10.useRef(/* @__PURE__ */ new Map());
+  const [message, setMessage] = React10.useState("");
+  const [actionError, setActionError] = React10.useState(null);
+  const [pending, setPending] = React10.useState(null);
+  const inFlight = busy ?? pending;
+  const totals = React10.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;
+  React10.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 = React10.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 = React10.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 = React10.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 = React10.useCallback(
+    (event) => {
+      if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        void runCommit();
+      }
+    },
+    [runCommit]
+  );
+  const canCommit = files.length > 0 && message.trim().length > 0 && inFlight == null;
+  const canPush = ahead > 0 && inFlight == null;
+  const contents = React10.useMemo(() => selected ? resolveContents(selected) : null, [selected]);
+  const stats = React10.useMemo(
+    () => contents ? computeDiffStats(contents.baseline, contents.current) : void 0,
+    [contents]
+  );
+  const patch = React10.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__ */ jsxs7("div", { className: cn("flex h-full min-h-0 flex-col text-foreground", className), children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "flex min-h-[38px] shrink-0 items-center gap-2 border-b bg-surface-container-low px-3 py-1",
+          BORDER
+        ),
+        children: [
+          /* @__PURE__ */ jsx10(GitBranch, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground", "aria-hidden": true }),
+          loading && branch == null ? /* @__PURE__ */ jsx10(Skeleton, { className: "h-4 w-24 rounded-full" }) : branch == null ? /* @__PURE__ */ jsx10("span", { className: "text-xs text-muted-foreground", children: "no commits yet" }) : /* @__PURE__ */ jsx10("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__ */ jsxs7("span", { className: "flex items-center gap-1.5 font-mono text-xs text-muted-foreground", children: [
+            ahead > 0 && /* @__PURE__ */ jsxs7("span", { "aria-label": `${ahead} ahead`, children: [
+              "\u2191",
+              ahead
+            ] }),
+            behind > 0 && /* @__PURE__ */ jsxs7("span", { "aria-label": `${behind} behind`, children: [
+              "\u2193",
+              behind
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs7("div", { className: "ml-auto flex items-center gap-3", children: [
+            files.length > 0 && /* @__PURE__ */ jsx10(DiffStatsBadge, { stats: totals }),
+            onRefresh && /* @__PURE__ */ jsx10(
+              "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 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/60",
+                children: /* @__PURE__ */ jsx10(RefreshCw, { className: cn("h-3.5 w-3.5", loading && "animate-spin") })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: cn("flex max-h-[40%] shrink-0 flex-col border-b", BORDER), "aria-busy": loading || void 0, children: [
+      error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "px-3 py-2 text-xs text-[var(--surface-danger-text)]", children: error }),
+      loading && /* @__PURE__ */ jsxs7("div", { className: "space-y-1 px-3 py-2", "data-testid": "changes-skeleton", children: [
+        /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Loading changes\u2026" }),
+        SKELETON_ROWS.map((row) => /* @__PURE__ */ jsx10(Skeleton, { className: "h-6 w-full" }, row))
+      ] }),
+      showEmpty && /* @__PURE__ */ jsx10("p", { className: "px-3 py-6 text-center text-xs text-muted-foreground", children: "No changes in the working tree." }),
+      showList && /* @__PURE__ */ jsx10(
+        "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__ */ jsxs7(
+              "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(
+                  "flex cursor-pointer items-center gap-2 px-3 py-1.5 text-xs transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-primary/60",
+                  isSelected ? "bg-surface-container-high" : "hover:bg-surface-container"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1 truncate font-mono", title: file.path, children: [
+                    dir && /* @__PURE__ */ jsx10("span", { className: "text-muted-foreground", children: dir }),
+                    /* @__PURE__ */ jsx10("span", { className: "text-foreground", children: base })
+                  ] }),
+                  /* @__PURE__ */ jsx10(GitStatusBadge, { status: file.status }),
+                  /* @__PURE__ */ jsx10(
+                    DiffStatsBadge,
+                    {
+                      stats: { added: file.additions, removed: file.deletions },
+                      className: "w-[5.5rem] justify-end tabular-nums"
+                    }
+                  )
+                ]
+              },
+              file.path
+            );
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "flex min-h-0 flex-1 flex-col", children: selected ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx10(PanelHeader, { filename: selected.path, gitStatus: selected.status, stats, copyText: patch, children: onOpenFile && /* @__PURE__ */ jsx10(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "h-7 px-2",
+          onClick: () => onOpenFile(selected.path),
+          children: "Open"
+        }
+      ) }),
+      contents ? /* @__PURE__ */ jsx10(
+        DiffView,
+        {
+          filename: selected.path,
+          baseline: contents.baseline,
+          current: contents.current,
+          showFileHeader: false,
+          className: "flex-1"
+        }
+      ) : /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-muted-foreground", role: "status", children: "Loading diff\u2026" })
+    ] }) : showList && /* @__PURE__ */ jsx10("p", { className: "px-3 py-3 text-xs text-muted-foreground", children: "Select a file to read its diff." }) }),
+    (onCommit || onPush) && /* @__PURE__ */ jsxs7("div", { className: cn("shrink-0 space-y-2 border-t bg-surface-container-low p-3", BORDER), children: [
+      onCommit && /* @__PURE__ */ jsx10(
+        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__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        onCommit && /* @__PURE__ */ jsx10(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            disabled: !canCommit,
+            loading: inFlight === "commit",
+            onClick: () => void runCommit(),
+            children: "Commit"
+          }
+        ),
+        onPush && /* @__PURE__ */ jsxs7(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "secondary",
+            disabled: !canPush,
+            loading: inFlight === "push",
+            onClick: () => void runPush(),
+            children: [
+              "Push",
+              ahead > 0 && /* @__PURE__ */ jsxs7("span", { className: "font-mono text-muted-foreground", children: [
+                "\u2191",
+                ahead
+              ] })
+            ]
+          }
+        )
+      ] }),
+      actionError && /* @__PURE__ */ jsx10("p", { role: "alert", className: "text-xs text-[var(--surface-danger-text)]", children: actionError })
+    ] })
+  ] });
+}
+
 export {
   PillTabs,
   GitStatusBadge,
+  DiffStatsBadge,
   PanelHeader,
   resolveLanguage,
   BRAND_PRISM_THEME,
@@ -7524,5 +7841,6 @@ export {
   buildUnifiedPatch,
   DiffView,
   PreviewView,
-  SandboxArtifactPane
+  SandboxArtifactPane,
+  ChangesPane
 };

package/dist/globals.css

@@ -847,6 +847,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -898,6 +901,9 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
+  .max-h-\[40\%\] {
+    max-height: 40%;
+  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -919,6 +925,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[3\.5rem\] {
+    min-height: 3.5rem;
+  }
   .min-h-\[6rem\] {
     min-height: 6rem;
   }
@@ -1102,6 +1111,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[5\.5rem\] {
+    width: 5.5rem;
+  }
   .w-\[17px\] {
     width: 17px;
   }
@@ -1135,6 +1147,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[440px\] {
+    width: 440px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -4124,6 +4139,9 @@
     .hover\:bg-red-700:hover {
       background-color: var(--color-red-700);
     }
+    .hover\:bg-surface-container:hover {
+      background-color: var(--color-surface-container);
+    }
     .hover\:bg-surface-container-high:hover {
       background-color: var(--color-surface-container-high);
     }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { ArtifactPane, ArtifactPaneProps, Avatar, AvatarFallback, AvatarImage, B
 export { L as Logo, a as LogoProps, T as TangleKnot } from './logo-CaIvk3J1.js';
 export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-network/ui/markdown';
 export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, WorkspacePaneHeader, WorkspacePaneHeaderProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
-export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
+export { ArtifactView, BRAND_PRISM_THEME, ChangedFile, ChangesPane, ChangesPaneProps, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffStatsBadge, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
 export { AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport } from './chat.js';

package/dist/index.js

@@ -135,8 +135,10 @@ import {
 } from "./chunk-D5VXCWUG.js";
 import {
   BRAND_PRISM_THEME,
+  ChangesPane,
   CodeSurface,
   CodeView,
+  DiffStatsBadge,
   DiffView,
   FileBreadcrumb,
   GitStatusBadge,
@@ -147,7 +149,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-5M67IFVI.js";
+} from "./chunk-ISTJTUHJ.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -383,6 +385,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  ChangesPane,
   ChatContainer,
   ChatMessage,
   ClusterStatusBar,
@@ -406,6 +409,7 @@ export {
   DialogTitle,
   DialogTrigger,
   DiffPreview,
+  DiffStatsBadge,
   DiffView,
   DirectoryPane,
   DropZone,

package/dist/styles.css

@@ -847,6 +847,9 @@
   .h-\[640px\] {
     height: 640px;
   }
+  .h-\[720px\] {
+    height: 720px;
+  }
   .h-\[var\(--avatar-size\)\] {
     height: var(--avatar-size);
   }
@@ -898,6 +901,9 @@
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
+  .max-h-\[40\%\] {
+    max-height: 40%;
+  }
   .max-h-\[70vh\] {
     max-height: 70vh;
   }
@@ -919,6 +925,9 @@
   .min-h-\[2px\] {
     min-height: 2px;
   }
+  .min-h-\[3\.5rem\] {
+    min-height: 3.5rem;
+  }
   .min-h-\[6rem\] {
     min-height: 6rem;
   }
@@ -1102,6 +1111,9 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[5\.5rem\] {
+    width: 5.5rem;
+  }
   .w-\[17px\] {
     width: 17px;
   }
@@ -1135,6 +1147,9 @@
   .w-\[420px\] {
     width: 420px;
   }
+  .w-\[440px\] {
+    width: 440px;
+  }
   .w-\[480px\] {
     width: 480px;
   }
@@ -4124,6 +4139,9 @@
     .hover\:bg-red-700:hover {
       background-color: var(--color-red-700);
     }
+    .hover\:bg-surface-container:hover {
+      background-color: var(--color-surface-container);
+    }
     .hover\:bg-surface-container-high:hover {
       background-color: var(--color-surface-container-high);
     }

package/dist/workbench.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
-import { RichFileTreeGitEntry, RichFileTreeGitStatus } from '@tangle-network/ui/files';
+import { RichFileTreeGitStatus, RichFileTreeGitEntry } from '@tangle-network/ui/files';
 import { E as ExposedPort } from './ports-list-CDIvTNnX.js';
 
 /** Which surface the artifact pane is currently showing. */
@@ -67,6 +67,47 @@ interface SandboxArtifactPaneProps {
     className?: string;
     style?: CSSProperties;
 }
+/**
+ * One entry of the sandbox's git working tree, as the Changes pane lists it.
+ * `additions` / `deletions` are the numstat counts the sidecar's
+ * `GET /git/diff` reports per file.
+ *
+ * `baseline` / `current` are the file contents the diff is drawn from and are
+ * absent until the consumer resolves them for the selected file. Which of the
+ * two counts as "resolved" follows the status: an added or untracked file has
+ * no baseline and diffs against the empty string once `current` is present; a
+ * deleted file has no working copy and diffs against the empty string once
+ * `baseline` is present; every other status waits for both.
+ */
+interface ChangedFile {
+    path: string;
+    status: RichFileTreeGitStatus;
+    additions: number;
+    deletions: number;
+    /** Present once the consumer has resolved contents for the selected file. */
+    baseline?: string;
+    current?: string;
+}
+interface ChangesPaneProps {
+    /** Current branch; `null` when the tree has no commits yet or is not a repository. */
+    branch: string | null;
+    ahead?: number;
+    behind?: number;
+    files: ChangedFile[];
+    selectedPath?: string;
+    onSelectFile?: (path: string) => void;
+    loading?: boolean;
+    error?: string | null;
+    onRefresh?: () => void;
+    /** Stage everything and commit. Resolve on success; reject with an Error the pane shows inline. */
+    onCommit?: (message: string) => Promise<void>;
+    onPush?: () => Promise<void>;
+    /** Which action is in flight; the pane disables the other and shows a spinner on this one. */
+    busy?: "commit" | "push" | null;
+    /** Open the file as a workbench artifact (the product wires this to its artifact opener). */
+    onOpenFile?: (path: string) => void;
+    className?: string;
+}
 
 /**
  * Blueprint-grade artifact workbench. Composes the sandbox-ui substrate
@@ -78,6 +119,21 @@ interface SandboxArtifactPaneProps {
  */
 declare function SandboxArtifactPane({ artifact, paths, gitStatus, showTree, ports, previewUrl, terminal, activeView, defaultView, onViewChange, onFileSelect, onExposePort, onRemovePort, className, style, }: SandboxArtifactPaneProps): React.JSX.Element;
 
+/**
+ * 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.
+ */
+declare function ChangesPane({ branch, ahead, behind, files, selectedPath, onSelectFile, loading, error, onRefresh, onCommit, onPush, busy, onOpenFile, className, }: ChangesPaneProps): React.JSX.Element;
+
 interface PillTabItem<T extends string> {
     value: T;
     label: string;
@@ -124,6 +180,11 @@ declare function buildUnifiedPatch(filename: string, baseline: string, current:
 declare function GitStatusBadge({ status }: {
     status: RichFileTreeGitStatus;
 }): React.JSX.Element;
+/** `+added −removed` line counts in mono; the same pair the Changes list prints per file. */
+declare function DiffStatsBadge({ stats, className }: {
+    stats: DiffStats;
+    className?: string;
+}): React.JSX.Element;
 interface PanelHeaderProps {
     filename: string;
     gitStatus?: RichFileTreeGitStatus;
@@ -182,6 +243,12 @@ interface DiffViewProps {
     filename: string;
     baseline: string;
     current: string;
+    /**
+     * The renderer's own sticky file header (name + counts). On by default; a
+     * host whose chrome already names the file, such as the Changes pane under
+     * its `PanelHeader`, turns it off so the name is not printed twice.
+     */
+    showFileHeader?: boolean;
     className?: string;
 }
 /**
@@ -189,7 +256,7 @@ interface DiffViewProps {
  * with jsdiff's `createTwoFilesPatch` (baseline → current); the renderer owns
  * hunking, intra-line word diffing, gutters, and syntax highlighting.
  */
-declare function DiffView({ filename, baseline, current, className }: DiffViewProps): React.JSX.Element;
+declare function DiffView({ filename, baseline, current, showFileHeader, className }: DiffViewProps): React.JSX.Element;
 
 interface PreviewViewProps {
     /** Origin to load in the preview iframe. */
@@ -223,4 +290,4 @@ interface CodeSurfaceProps {
  */
 declare function CodeSurface({ code, filename, language, showLineNumbers, className, }: CodeSurfaceProps): React.JSX.Element;
 
-export { type ArtifactView, BRAND_PRISM_THEME, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffView, type DiffViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };
+export { type ArtifactView, BRAND_PRISM_THEME, type ChangedFile, ChangesPane, type ChangesPaneProps, CodeSurface, type CodeSurfaceProps, CodeView, type CodeViewProps, type DiffStats, DiffStatsBadge, DiffView, type DiffViewProps, FileBreadcrumb, type FileBreadcrumbProps, GitStatusBadge, PanelHeader, type PanelHeaderProps, type PillTabItem, PillTabs, type PillTabsProps, PreviewView, type PreviewViewProps, type SandboxArtifact, SandboxArtifactPane, type SandboxArtifactPaneProps, type SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage };

package/dist/workbench.js

@@ -1,7 +1,9 @@
 import {
   BRAND_PRISM_THEME,
+  ChangesPane,
   CodeSurface,
   CodeView,
+  DiffStatsBadge,
   DiffView,
   FileBreadcrumb,
   GitStatusBadge,
@@ -12,7 +14,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-5M67IFVI.js";
+} from "./chunk-ISTJTUHJ.js";
 import "./chunk-PZVUIUUW.js";
 import "./chunk-K4Q4E7D7.js";
 import "./chunk-OMUIPJQZ.js";
@@ -25,8 +27,10 @@ import "./chunk-EI44GEQ5.js";
 import "./chunk-CZ7CSFO4.js";
 export {
   BRAND_PRISM_THEME,
+  ChangesPane,
   CodeSurface,
   CodeView,
+  DiffStatsBadge,
   DiffView,
   FileBreadcrumb,
   GitStatusBadge,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.111.2",
+  "version": "0.112.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",