@tangle-network/sandbox-ui 0.116.8 → 0.117.0

package/README.md

@@ -89,6 +89,53 @@ Pass service-observed `readiness` and enforced `access` to show their status ins
 Show process and port state beside the pane if your runtime exposes those separately.
 Do not infer either state from the preview URL or iframe load.
 
+### Show a shared agent messaging connection
+
+Use `AgentMessagingConnection` in any app that enrolls a member with a private agent target and a shared messaging route.
+The host owns authentication, the member grant, canonical target resolution, and route readiness.
+
+```tsx
+import {
+  AgentMessagingConnection,
+  type AgentEnrollmentViewState,
+  type SharedMessagingRouteViewState,
+} from "@tangle-network/sandbox-ui/connections";
+
+type MessagingConnectionProps = {
+  enrollment: AgentEnrollmentViewState;
+  route: SharedMessagingRouteViewState;
+  enroll: () => Promise<void>;
+  openMessages: () => void;
+  refresh: () => Promise<void>;
+};
+
+export function MessagingConnection({
+  enrollment,
+  route,
+  enroll,
+  openMessages,
+  refresh,
+}: MessagingConnectionProps) {
+  return (
+    <AgentMessagingConnection
+      enrollment={enrollment}
+      route={route}
+      onEnroll={enroll}
+      onOpenMessages={openMessages}
+      onRetry={refresh}
+    />
+  );
+}
+```
+
+Report `eligible` only after the host checks the member's current grant.
+Report `enrolled` only after it resolves the authorized, canonical private agent target.
+Give the component display labels, not raw enrollment, instance, sandbox, or session IDs.
+Report route `ready` only when the shared route is valid for this application and member.
+An attached provider line on its own does not prove that state.
+The component never attaches, buys, or reassigns a provider identity.
+It shows a messaging action only when both the target and route are confirmed.
+
 ### Fonts
 
 sandbox-ui references the following font families in its design tokens but does **not** bundle them — consumer apps must load the fonts themselves. This is deliberate: a URL `@import` inside a library CSS bundle breaks when downstream apps chain-import the stylesheet (see CHANGELOG 0.10.9 for the full reasoning).
@@ -375,6 +422,8 @@ For that, compose directly from:
 
 Retheming is absolutely supported, but the documentation was thinner than it should be. The token layer is strong; the higher-level surfaces are themeable, but more opinionated. For a radically different product look, prefer keeping the token contract and wrapping the higher-level workbench/chat surfaces rather than fighting every internal class.
 
+`DiffView` from `/workbench` defaults to a dark code theme. If the host app offers a light/dark switch, pass its selected theme as `themeType`. The diff renderer updates when that value changes.
+
 ## Docs
 
 | Guide | Description |
@@ -389,6 +438,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 | `/chat` | ChatContainer, ChatInput, ChatMessage, AgentTimeline, ThinkingIndicator |
 | `/run` | ToolCallFeed, RunGroup, InlineToolItem, ExpandedToolDetail |
 | `/workspace` | SandboxWorkbench, WorkspaceLayout, DirectoryPane, RuntimePane, StatusBar |
+| `/workbench` | DiffView, ChangesPane, CodeView, artifact and preview components |
 | `/openui` | OpenUIArtifactRenderer and schema types for structured artifact rendering |
 | `/files` | FileTree, FilePreview, FileTabs, FileArtifactPane |
 | `/workbench/embedded-app` | EmbeddedAppView and preview status types without terminal or editor modules |

package/dist/{WorkflowGraph-B-NsdYz_.js → WorkflowGraph-CzWs8P7y.js}

@@ -1,6 +1,6 @@
 import { r as modelBrandFor, t as ModelBrandStack } from "./model-brand-hMyDTUqB.js";
 import { a as buildWorkflowGraph, c as triggerNodeIndex, d as providerLabel, f as shortModel, g as fmtTokens, h as fmtDuration, l as wfEdgeId, m as fmtCost, o as isStructuralKind, p as clampPreview, t as COMPACT_NODE_SIZE, u as worstSeverity } from "./model-I-NIxeM-.js";
-import { t as ProviderIcon } from "./provider-logo-DjqmConF.js";
+import { t as ProviderIcon } from "./provider-logo-BiuiO_c2.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { AlertTriangle, Bell, Box, Cable, Camera, Circle, Clock, Code, GitBranch, Maximize2, Minimize2, Plus, Repeat, ScanSearch, Sparkles, UserCheck, Webhook, X, Zap } from "lucide-react";

package/dist/chat.js

@@ -1,2 +1,2 @@
-import { a as ThinkingIndicator, c as createFetchTransport, d as AgentProfilePicker, f as DEFAULT_REASONING_LEVEL_OPTIONS, i as MessageList, l as modelProvider, m as ReasoningLevelPicker, n as ChatContainer, o as UserMessage, p as HARNESS_REASONING_OPTIONS, r as ChatMessage, s as ArtifactAgentDock, t as AgentTimeline, u as snapHarnessToModel } from "./chat-BOvFAe6p.js";
+import { a as ThinkingIndicator, c as createFetchTransport, d as AgentProfilePicker, f as DEFAULT_REASONING_LEVEL_OPTIONS, i as MessageList, l as modelProvider, m as ReasoningLevelPicker, n as ChatContainer, o as UserMessage, p as HARNESS_REASONING_OPTIONS, r as ChatMessage, s as ArtifactAgentDock, t as AgentTimeline, u as snapHarnessToModel } from "./chat-Ci6Xi1rd.js";
 export { AgentProfilePicker, AgentTimeline, ArtifactAgentDock, ChatContainer, ChatMessage, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MessageList, ReasoningLevelPicker, ThinkingIndicator, UserMessage, createFetchTransport, modelProvider, snapHarnessToModel };

package/dist/connections-DDRGYDvF.js

@@ -0,0 +1,180 @@
+import { Button } from "@tangle-network/ui/primitives";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { cn } from "@tangle-network/ui/utils";
+import { AlertCircle, CheckCircle2, Loader2, MessageSquare, ShieldCheck } from "lucide-react";
+//#region src/connections/agent-messaging-connection.tsx
+function AgentStatus({ enrollment }) {
+	switch (enrollment.status) {
+		case "checking": return /* @__PURE__ */ jsx("span", { children: "Checking access…" });
+		case "eligible": return /* @__PURE__ */ jsx("span", { children: "Not connected" });
+		case "enrolling": return /* @__PURE__ */ jsx("span", { children: "Connecting your agent…" });
+		case "enrolled": return /* @__PURE__ */ jsxs("span", { children: [
+			"Connected to ",
+			/* @__PURE__ */ jsx("strong", {
+				className: "font-medium text-foreground",
+				children: enrollment.target.agentLabel
+			}),
+			enrollment.target.workspaceLabel && /* @__PURE__ */ jsxs(Fragment, { children: [" in ", enrollment.target.workspaceLabel] })
+		] });
+		case "forbidden": return /* @__PURE__ */ jsx("span", { children: enrollment.message ?? "You cannot connect this agent." });
+		case "error": return /* @__PURE__ */ jsx("span", { children: enrollment.message ?? "Could not check agent access." });
+	}
+}
+function RouteStatus({ enrollment, route }) {
+	switch (route.status) {
+		case "checking": return /* @__PURE__ */ jsx("span", { children: "Checking messaging…" });
+		case "pending": return /* @__PURE__ */ jsx("span", { children: route.message ?? "Setting up messaging…" });
+		case "ready": return enrollment.status === "enrolled" ? /* @__PURE__ */ jsxs("span", { children: [
+			"Ready on ",
+			/* @__PURE__ */ jsx("strong", {
+				className: "font-medium text-foreground",
+				children: route.channelLabel
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "block break-words",
+				children: route.destinationLabel
+			})
+		] }) : enrollment.status === "eligible" ? /* @__PURE__ */ jsx("span", { children: "Connect your agent to use messaging." }) : /* @__PURE__ */ jsx("span", { children: "Agent connection is unconfirmed." });
+		case "unavailable": return /* @__PURE__ */ jsx("span", { children: route.message ?? "Messaging is unavailable right now." });
+		case "forbidden": return /* @__PURE__ */ jsx("span", { children: route.message ?? "You cannot use messaging in this app." });
+		case "error": return /* @__PURE__ */ jsx("span", { children: route.message ?? "Could not check messaging." });
+	}
+}
+function AgentMessagingConnection({ enrollment, route, onEnroll, onOpenMessages, onRetry, className }) {
+	const [submitting, setSubmitting] = React$1.useState(false);
+	const [actionError, setActionError] = React$1.useState(null);
+	const submittingRef = React$1.useRef(false);
+	const canMessage = enrollment.status === "enrolled" && route.status === "ready";
+	const canRetry = enrollment.status === "error" || route.status === "error";
+	React$1.useEffect(() => {
+		setActionError(null);
+	}, [enrollment.status, route.status]);
+	async function enroll() {
+		if (enrollment.status !== "eligible" || submittingRef.current) return;
+		submittingRef.current = true;
+		setSubmitting(true);
+		setActionError(null);
+		try {
+			await onEnroll();
+		} catch {
+			setActionError("Could not connect the agent. Try again.");
+		} finally {
+			submittingRef.current = false;
+			setSubmitting(false);
+		}
+	}
+	async function retry() {
+		if (!onRetry || submittingRef.current) return;
+		submittingRef.current = true;
+		setSubmitting(true);
+		setActionError(null);
+		try {
+			await onRetry();
+		} catch {
+			setActionError("Could not check messaging. Try again.");
+		} finally {
+			submittingRef.current = false;
+			setSubmitting(false);
+		}
+	}
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Agent messaging connection",
+		className: cn("rounded-xl border border-border bg-card p-4 text-sm text-foreground sm:p-5", className),
+		children: [
+			/* @__PURE__ */ jsx("h2", {
+				className: "mb-4 text-base font-semibold",
+				children: "Agent messaging"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "divide-y divide-border rounded-lg border border-border",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex gap-3 p-3 sm:p-4",
+					children: [
+						/* @__PURE__ */ jsx(ShieldCheck, {
+							"aria-hidden": "true",
+							className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: "Private agent"
+							}), /* @__PURE__ */ jsx("p", {
+								"aria-live": "polite",
+								className: "mt-0.5 break-words text-muted-foreground",
+								children: /* @__PURE__ */ jsx(AgentStatus, { enrollment })
+							})]
+						}),
+						enrollment.status === "enrolled" && /* @__PURE__ */ jsx(CheckCircle2, {
+							"aria-label": "Connected",
+							className: "ml-auto h-4 w-4 shrink-0 text-[var(--code-success)]"
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-3 p-3 sm:p-4",
+					children: [
+						/* @__PURE__ */ jsx(MessageSquare, {
+							"aria-hidden": "true",
+							className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "font-medium",
+								children: "Messaging"
+							}), /* @__PURE__ */ jsx("p", {
+								"aria-live": "polite",
+								className: "mt-0.5 break-words text-muted-foreground",
+								children: /* @__PURE__ */ jsx(RouteStatus, {
+									enrollment,
+									route
+								})
+							})]
+						}),
+						canMessage && /* @__PURE__ */ jsx(CheckCircle2, {
+							"aria-label": "Ready",
+							className: "ml-auto h-4 w-4 shrink-0 text-[var(--code-success)]"
+						})
+					]
+				})]
+			}),
+			(enrollment.status === "eligible" || canMessage || canRetry && onRetry) && /* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex flex-wrap items-center gap-3",
+				children: [
+					enrollment.status === "eligible" && /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						onClick: enroll,
+						disabled: submitting,
+						children: [submitting ? /* @__PURE__ */ jsx(Loader2, {
+							"aria-hidden": "true",
+							className: "mr-2 h-4 w-4 animate-spin"
+						}) : null, submitting ? "Connecting agent…" : "Connect agent"]
+					}),
+					canMessage && onOpenMessages && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						onClick: onOpenMessages,
+						children: "Open messages"
+					}),
+					canRetry && onRetry && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: retry,
+						disabled: submitting,
+						children: submitting ? "Checking…" : "Check again"
+					})
+				]
+			}),
+			actionError && /* @__PURE__ */ jsxs("p", {
+				role: "alert",
+				className: "mt-3 flex items-center gap-2 text-[var(--code-error)]",
+				children: [/* @__PURE__ */ jsx(AlertCircle, {
+					"aria-hidden": "true",
+					className: "h-4 w-4 shrink-0"
+				}), actionError]
+			})
+		]
+	});
+}
+//#endregion
+export { AgentMessagingConnection as t };

package/dist/connections.d.ts

@@ -0,0 +1,2 @@
+import { a as SharedMessagingRouteViewState, i as AgentTargetSummary, n as AgentMessagingConnection, r as AgentMessagingConnectionProps, t as AgentEnrollmentViewState } from "./index-ClRHbsoX.js";
+export { type AgentEnrollmentViewState, AgentMessagingConnection, type AgentMessagingConnectionProps, type AgentTargetSummary, type SharedMessagingRouteViewState };

package/dist/connections.js

@@ -0,0 +1,2 @@
+import { t as AgentMessagingConnection } from "./connections-DDRGYDvF.js";
+export { AgentMessagingConnection };