@tangle-network/sandbox-ui 0.100.1 → 0.101.0

package/dist/chat.d.ts

@@ -145,6 +145,14 @@ interface ComposerFile {
     /** Shown on the chip when `status === "error"`. */
     errorMessage?: string;
 }
+/** Context the agent will see alongside the next message. */
+interface ComposerContextItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    /** Omit to render a non-removable chip. */
+    onRemove?: () => void;
+}
 interface AgentComposerProps {
     /** Composer text (controlled). */
     value: string;
@@ -171,6 +179,8 @@ interface AgentComposerProps {
     controls: React.ReactNode;
     /** Extra content left of the send button (token meter, cost, status). */
     trailing?: React.ReactNode;
+    /** Context the agent will see alongside the next message. */
+    contextItems?: ReadonlyArray<ComposerContextItem>;
     /**
      * Attachments are opt-in: pass `onAttach` to show the attach button, accept
      * drag-and-drop onto the composer, and render `attachments` as chips.
@@ -246,7 +256,7 @@ interface AgentComposerProps {
  * generic clipboard image blobs `pasted-image-<n>.<ext>`), a streaming Stop
  * button (`busy` + `onCancel`), and a Cmd/Ctrl+L focus shortcut.
  */
-declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, controls, trailing, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, mention, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): React.JSX.Element;
+declare function AgentComposer({ value, onChange, onSubmit, placeholder, disabled, busy, onCancel, controls, trailing, contextItems, onAttach, onAttachFolder, attachments, onRemoveFile, onRetryFile, accept, onRejectFiles, dropTitle, dropDescription, canSubmitWhileBusy, canSubmitAttachmentsOnly, mention, focusShortcut, minRows, maxHeight, className, sendLabel, autoFocus, }: AgentComposerProps): React.JSX.Element;
 
 /**
  * Visual contract for a rendered mention pill. The TipTap editor extension in
@@ -429,4 +439,4 @@ declare function createFetchTransport(opts: {
     fetchImpl?: typeof fetch;
 }): ArtifactAgentDockTransport;
 
-export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles };
+export { AgentComposer, type AgentComposerMention, type AgentComposerProps, type AgentProfileCapability, type AgentProfileDraft, type AgentProfileOption, AgentProfilePicker, type AgentProfilePickerProps, ArtifactAgentDock, type ArtifactAgentDockProps, type ArtifactAgentDockTransport, type ArtifactDockMessage, type ArtifactDockStreamEvent, type ArtifactKind, type ArtifactScope, type ComposerContextItem, type ComposerFile, type ComposerFileRejection, type ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, type MentionItem, type ReasoningLevel, type ReasoningLevelOption, ReasoningLevelPicker, type ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles };

package/dist/chat.js

@@ -16,7 +16,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   validateComposerFiles
-} from "./chunk-IWTLWBPZ.js";
+} from "./chunk-XIXYQNXD.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS

package/dist/{chunk-IWTLWBPZ.js → chunk-XIXYQNXD.js}

@@ -240,6 +240,7 @@ function AgentComposer({
   onCancel,
   controls,
   trailing,
+  contextItems = [],
   onAttach,
   onAttachFolder,
   attachments = [],
@@ -388,6 +389,34 @@ function AgentComposer({
           disabled && "opacity-60"
         ),
         children: [
+          contextItems.length > 0 && /* @__PURE__ */ jsx2(
+            "div",
+            {
+              "aria-label": "Message context",
+              className: "flex min-w-0 flex-wrap gap-1.5",
+              children: contextItems.map((item) => /* @__PURE__ */ jsxs2(
+                "span",
+                {
+                  className: "inline-flex min-w-0 max-w-full items-center gap-1.5 rounded-md border border-primary/30 bg-primary/10 px-2.5 py-1 text-primary text-xs",
+                  children: [
+                    item.icon && /* @__PURE__ */ jsx2("span", { className: "shrink-0", "aria-hidden": "true", children: item.icon }),
+                    /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: item.label }),
+                    item.onRemove && /* @__PURE__ */ jsx2(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": `Remove context ${item.label}`,
+                        onClick: item.onRemove,
+                        className: "shrink-0 rounded p-0.5 text-primary/70 transition-colors hover:text-primary focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                        children: /* @__PURE__ */ jsx2(X, { className: "size-3" })
+                      }
+                    )
+                  ]
+                },
+                item.id
+              ))
+            }
+          ),
           attachments.length > 0 && /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => {
             const isError = file.status === "error";
             const isPending = file.status === "pending";

package/dist/globals.css

@@ -4965,6 +4965,8 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
+    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
   --shadow-status-running: none;
   --shadow-status-creating: none;
   --shadow-status-error: none;

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, Ap
 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 { 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 { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles } from './chat.js';
+export { AgentComposer, AgentComposerMention, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerContextItem, ComposerFile, ComposerFileRejection, ComposerFileValidationConfig, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, MENTION_PILL_CLASS, MentionItem, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isAcceptedType, validateComposerFiles } from './chat.js';
 export { HarnessType, modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
 export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';

package/dist/index.js

@@ -88,7 +88,7 @@ import {
   modelProvider,
   snapHarnessToModel,
   validateComposerFiles
-} from "./chunk-IWTLWBPZ.js";
+} from "./chunk-XIXYQNXD.js";
 import {
   TOOL_CATEGORY_ICONS,
   cn,

package/dist/styles.css

@@ -4965,6 +4965,8 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
+    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
   --shadow-status-running: none;
   --shadow-status-creating: none;
   --shadow-status-error: none;

package/dist/tokens.css

@@ -319,6 +319,18 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
+  /* The lift above --shadow-dropdown, for a surface that covers the page
+     rather than sitting beside it: a drawer, a modal, a floating dock.
+     Two layers — a tight contact shadow plus a wide ambient one.
+     Alone among the shadows this is derived from --hsl-foreground instead of
+     a fixed rgba, so it INVERTS with the theme. That is what makes it work in
+     dark: a black shadow on a dark canvas renders as nothing (see the ladder
+     note at the top of this file), while the foreground is near-white there,
+     so the same declaration reads as a soft halo. One definition therefore
+     serves both themes and the light block does not restate it. */
+  --shadow-overlay:
+    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
+    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
   --shadow-status-running: none;
   --shadow-status-creating: none;
   --shadow-status-error: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.100.1",
+  "version": "0.101.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -119,7 +119,7 @@
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <2.0.0",
     "@tangle-network/agent-interface": ">=0.36.0 <0.48.0",
-    "@tangle-network/brand": "^1.4.0",
+    "@tangle-network/brand": "^1.5.0",
     "@tangle-network/ui": "^11.0.0",
     "@tanstack/react-query": "^5.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
@@ -191,7 +191,7 @@
     "@storybook/react-vite": "^10.5.4",
     "@tailwindcss/postcss": "^4.3.3",
     "@tangle-network/agent-interface": "0.47.0",
-    "@tangle-network/brand": "^1.4.0",
+    "@tangle-network/brand": "^1.5.0",
     "@tangle-network/ui": "^11.2.0",
     "@tanstack/react-query": "^5.101.4",
     "@testing-library/dom": "^10.4.1",