@tangle-network/ui 6.0.0 → 8.0.0

package/dist/run.js

@@ -1,19 +1,17 @@
-import "./chunk-LQS34IGP.js";
+import "./chunk-47XH56SV.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-O6NUUCT2.js";
+} from "./chunk-IWQZXL6A.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-LASW7CYH.js";
+} from "./chunk-QIRVZMQY.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
-  ToolCallGroup,
-  ToolCallStep
-} from "./chunk-EOGJX2TU.js";
+  LiveDuration
+} from "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-52Y3FMFI.js";
@@ -30,7 +28,5 @@ export {
   LiveDuration,
   RunGroup,
   ToolCallFeed,
-  ToolCallGroup,
-  ToolCallStep,
   parseToolEvent
 };

package/dist/sdk-hooks.d.ts

@@ -4,7 +4,7 @@ import { R as Run, G as GroupedMessage } from './run-PfLmDAox.js';
 import { S as SessionMessage } from './message-BHWbxBtT.js';
 import { S as SessionPart } from './parts-dj7AcUg0.js';
 import { R as RegisterActiveSessionOptions, g as ActiveSessionTransportMode, c as ActiveSessionConnectionState } from './active-sessions-store-CeOmXgv5.js';
-import { F as FeedSegment } from './tool-call-feed-Bs3MyQMT.js';
+import { F as FeedSegment } from './tool-call-feed-D9iofJgW.js';
 import 'nanostores';
 import 'react/jsx-runtime';
 

package/dist/sdk-hooks.js

@@ -5,15 +5,15 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-PN3S2MTV.js";
+} from "./chunk-DLSGUNRD.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
 } from "./chunk-AZWDI2JG.js";
-import "./chunk-O6NUUCT2.js";
-import "./chunk-EOGJX2TU.js";
+import "./chunk-IWQZXL6A.js";
+import "./chunk-RKQDBRTC.js";
 import "./chunk-ULDNFLIM.js";
 import "./chunk-AAUNOHVL.js";
 import "./chunk-ZRVH3WCA.js";

package/dist/{tool-call-feed-Bs3MyQMT.d.ts → tool-call-feed-D9iofJgW.d.ts}

@@ -1,29 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
 
 type ToolCallType = "bash" | "read" | "write" | "edit" | "glob" | "grep" | "list" | "download" | "inspect" | "audit" | "unknown";
 type ToolCallStatus = "running" | "success" | "error";
-interface ToolCallStepProps {
-    type: ToolCallType;
-    label: string;
-    status: ToolCallStatus;
-    detail?: string;
-    output?: string;
-    /** Override syntax highlighting language; inferred from detail path if omitted */
-    language?: string;
-    duration?: number;
-    className?: string;
-}
-declare function ToolCallStep({ type, label, status, detail, output, language, duration, className, }: ToolCallStepProps): react_jsx_runtime.JSX.Element;
-/**
- * ToolCallGroup — groups multiple tool calls under a heading.
- */
-interface ToolCallGroupProps {
-    title?: string;
-    children: ReactNode;
-    className?: string;
-}
-declare function ToolCallGroup({ title, children, className }: ToolCallGroupProps): react_jsx_runtime.JSX.Element;
 
 interface ToolCallData {
     id: string;
@@ -65,4 +43,4 @@ declare function parseToolEvent(event: {
     data: Record<string, unknown>;
 }): ToolCallData | null;
 
-export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, ToolCallGroup as c, type ToolCallGroupProps as d, type ToolCallStatus as e, ToolCallStep as f, type ToolCallStepProps as g, type ToolCallType as h, parseToolEvent as p };
+export { type FeedSegment as F, type ToolCallData as T, ToolCallFeed as a, type ToolCallFeedProps as b, type ToolCallStatus as c, type ToolCallType as d, parseToolEvent as p };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "6.0.0",
+  "version": "8.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
     "react-router": "^7",
-    "@tangle-network/brand": "^0.7.0"
+    "@tangle-network/brand": "^0.8.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/chat/chat-container.tsx

@@ -1,7 +1,6 @@
 import {
   memo,
   type ReactNode,
-  useCallback,
   useMemo,
   useRef,
 } from "react";
@@ -20,7 +19,6 @@ import {
   AgentTimeline,
   type AgentTimelineItem,
 } from "./agent-timeline";
-import { ChatInput, type PendingFile } from "./chat-input";
 import { InlineThinkingItem } from "../run/inline-thinking-item";
 import { getToolDisplayMetadata } from "../utils/tool-display";
 import {
@@ -29,27 +27,21 @@ import {
   type OpenUIComponentNode,
 } from "../openui/openui-artifact-renderer";
 
+/**
+ * Transcript-only container: message list + auto-scroll. Composers are
+ * composed BELOW this by the app (the canonical one is `AgentComposer` in
+ * `@tangle-network/sandbox-ui`) — this component never renders an input.
+ */
 export interface ChatContainerProps {
   messages: SessionMessage[];
   partMap: Record<string, SessionPart[]>;
   isStreaming: boolean;
-  onSend?: (text: string) => void;
-  onCancel?: () => void;
   branding?: AgentBranding;
-  placeholder?: string;
   className?: string;
-  /** Hide the input area (useful for read-only views). */
-  hideInput?: boolean;
   /** Custom renderer for tool details. Return ReactNode to override, null to use default. */
   renderToolDetail?: CustomToolRenderer;
   /** Presentation mode for the session view. */
   presentation?: "runs" | "timeline";
-  modelLabel?: string;
-  onModelClick?: () => void;
-  pendingFiles?: PendingFile[];
-  onRemoveFile?: (id: string) => void;
-  onAttach?: (files: FileList) => void;
-  disabled?: boolean;
   /** Callback when an OpenUI action button is pressed within inline OpenUI blocks. */
   onOpenUIAction?: (action: OpenUIAction) => void;
   /** Enable rendering OpenUI schemas inline in the chat timeline. Defaults to true. */
@@ -355,7 +347,7 @@ function buildTimelineItems(
 }
 
 /**
- * Full chat container: message list + auto-scroll + input area.
+ * Chat transcript container: message list + auto-scroll.
  * Orchestrates useRunGroups, useRunCollapseState, and useAutoScroll.
  */
 export const ChatContainer = memo(
@@ -363,20 +355,10 @@ export const ChatContainer = memo(
     messages,
     partMap,
     isStreaming,
-    onSend,
-    onCancel,
     branding,
-    placeholder = "Type a message...",
     className,
-    hideInput = false,
     renderToolDetail,
     presentation = "runs",
-    modelLabel,
-    onModelClick,
-    pendingFiles,
-    onRemoveFile,
-    onAttach,
-    disabled = false,
     onOpenUIAction,
     enableOpenUI = true,
     renderRunActions,
@@ -404,13 +386,6 @@ export const ChatContainer = memo(
       [messages, partMap, isStreaming, onOpenUIAction, enableOpenUI],
     );
 
-    const handleSend = useCallback(
-      (text: string) => {
-        onSend?.(text);
-      },
-      [onSend],
-    );
-
     return (
       <div className={cn("flex h-full flex-col", className)}>
         {/* Message area */}
@@ -462,23 +437,6 @@ export const ChatContainer = memo(
             </button>
           </div>
         )}
-
-        {/* Input area */}
-        {!hideInput && onSend && (
-          <ChatInput
-            onSend={handleSend}
-            onCancel={onCancel}
-            isStreaming={isStreaming}
-            placeholder={placeholder}
-            modelLabel={modelLabel}
-            onModelClick={onModelClick}
-            pendingFiles={pendingFiles}
-            onRemoveFile={onRemoveFile}
-            onAttach={onAttach}
-            disabled={disabled}
-            className="shrink-0 border-t border-border bg-background"
-          />
-        )}
       </div>
     );
   },

package/src/chat/chat-message.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChatMessage } from './chat-message'
-import { ToolCallStep } from '../run/tool-call-step'
+import { InlineToolItem } from '../run/inline-tool-item'
+import type { ToolPart } from '../types/parts'
 
 const meta: Meta<typeof ChatMessage> = {
   title: 'Chat/ChatMessage',
@@ -26,6 +27,30 @@ type Story = StoryObj<typeof ChatMessage>
 const ts = (offsetMinutes = 0) =>
   new Date(Date.now() - offsetMinutes * 60 * 1000)
 
+const readToolPart: ToolPart = {
+  type: 'tool',
+  id: 'chat-read',
+  tool: 'read',
+  state: {
+    status: 'completed',
+    input: { file_path: 'src/hooks/useFetchData.ts' },
+    output: `export function useFetchData<T>(url: string) {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  // ...`,
+    time: { start: Date.now() - 1200, end: Date.now() - 1152 },
+  },
+}
+
+const searchToolPart: ToolPart = {
+  type: 'tool',
+  id: 'chat-search',
+  tool: 'grep',
+  state: {
+    status: 'completed',
+    input: { pattern: 'cache', path: 'src/hooks/useFetchData.ts' },
+    output: 'No cache layer found. Data fetched on every mount.',
+    time: { start: Date.now() - 900, end: Date.now() - 888 },
+  },
+}
+
 export const UserMessage: Story = {
   args: {
     role: 'user',
@@ -117,20 +142,8 @@ export const AssistantWithToolCalls: Story = {
     content: 'Let me read the current implementation first.',
     toolCalls: (
       <div className="mt-3 space-y-2">
-        <ToolCallStep
-          type="read"
-          label="Read src/hooks/useFetchData.ts"
-          status="success"
-          output={`export function useFetchData<T>(url: string) {\n  const [data, setData] = useState<T | null>(null)\n  const [loading, setLoading] = useState(true)\n  // ...`}
-          duration={48}
-        />
-        <ToolCallStep
-          type="grep"
-          label="Search for cache references"
-          status="success"
-          output="No cache layer found. Data fetched on every mount."
-          duration={12}
-        />
+        <InlineToolItem part={readToolPart} groupPosition="first" />
+        <InlineToolItem part={searchToolPart} groupPosition="last" />
       </div>
     ),
     timestamp: ts(1),

package/src/chat/chat-message.tsx

@@ -6,7 +6,6 @@
  */
 
 import { type ReactNode } from "react";
-import { User, Bot } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Markdown } from "../markdown/markdown";
 
@@ -28,10 +27,6 @@ export interface ChatMessageProps {
   assistantLabel?: string;
   /** Hide the role label row entirely */
   hideRoleLabel?: boolean;
-  /** Hide the avatar icon */
-  hideAvatar?: boolean;
-  /** Custom avatar element (replaces default User/Bot icon) */
-  avatar?: ReactNode;
 }
 
 export function ChatMessage({
@@ -44,36 +39,28 @@ export function ChatMessage({
   userLabel = "You",
   assistantLabel = "Agent",
   hideRoleLabel,
-  hideAvatar,
-  avatar,
 }: ChatMessageProps) {
   const isUser = role === "user";
 
   return (
     <div
       className={cn(
-        "flex gap-3",
-        isUser ? "flex-row-reverse" : "flex-row",
+        "flex flex-col gap-1",
+        isUser ? "items-end" : "items-start",
         className,
       )}
     >
-      {/* Avatar */}
-      {!hideAvatar && (
-        avatar ? (
-          <div className="mt-0.5 shrink-0">{avatar}</div>
-        ) : (
-          <div
-            className={cn(
-              "mt-0.5 flex shrink-0 items-center justify-center rounded-[calc(var(--radius-md)+2px)] border",
-              "h-[var(--avatar-size)] w-[var(--avatar-size)]",
-              isUser
-                ? "border-border bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
-                : "border-border bg-muted text-[var(--brand-cool)]",
-            )}
-          >
-            {isUser ? <User className="h-3.5 w-3.5" /> : <Bot className="h-3.5 w-3.5" />}
-          </div>
-        )
+      {!hideRoleLabel && (
+        <div className={cn("flex items-center gap-2 px-1", isUser && "flex-row-reverse")}>
+          <span className="font-medium text-foreground text-xs">
+            {isUser ? userLabel : assistantLabel}
+          </span>
+          {timestamp && (
+            <span className="text-muted-foreground text-xs">
+              {formatTime(timestamp)}
+            </span>
+          )}
+        </div>
       )}
 
       {/* Bubble */}
@@ -86,20 +73,6 @@ export function ChatMessage({
             : "border-border bg-card",
         )}
       >
-        {/* Role label + timestamp */}
-        {!hideRoleLabel && (
-          <div className={cn("flex items-center gap-2", isUser && "flex-row-reverse")}>
-            <span className="text-[var(--font-size-xs)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.14em)] text-foreground">
-              {isUser ? userLabel : assistantLabel}
-            </span>
-            {timestamp && (
-              <span className="text-[var(--font-size-xs)] text-muted-foreground">
-                {formatTime(timestamp)}
-              </span>
-            )}
-          </div>
-        )}
-
         {/* Message body */}
         {isUser ? (
           <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)] text-foreground">

package/src/chat/index.ts

@@ -2,7 +2,6 @@ export { ChatContainer, type ChatContainerProps } from "./chat-container";
 export { MessageList, type MessageListProps } from "./message-list";
 export { UserMessage, type UserMessageProps } from "./user-message";
 export { ChatMessage, type ChatMessageProps, type MessageRole } from "./chat-message";
-export { ChatInput, type ChatInputProps, type PendingFile } from "./chat-input";
 export { ThinkingIndicator, type ThinkingIndicatorProps } from "./thinking-indicator";
 export {
   AgentTimeline,

package/src/markdown/markdown.stories.tsx

@@ -39,7 +39,7 @@ pnpm add @tangle/sandbox-ui
 Import the components you need:
 
 \`\`\`tsx
-import { ChatInput, DropZone, UploadProgress } from '@tangle/sandbox-ui'
+import { AgentComposer, DropZone, UploadProgress } from '@tangle-network/sandbox-ui'
 \`\`\`
 
 > **Note:** Components assume a Tailwind CSS v4 setup with the design tokens

package/src/run/index.ts

@@ -9,5 +9,8 @@ export {
   type ExpandedToolDetailProps,
 } from "./expanded-tool-detail";
 export { LiveDuration } from "./run-item-primitives";
-export { ToolCallStep, ToolCallGroup, type ToolCallStepProps, type ToolCallGroupProps, type ToolCallType, type ToolCallStatus } from "./tool-call-step";
+// ToolCallStep/ToolCallGroup are internal adapters over InlineToolItem (used by
+// AgentTimeline + ToolCallFeed); only their status/type vocabulary is public
+// because ToolCallData references it.
+export { type ToolCallType, type ToolCallStatus } from "./tool-call-step";
 export { ToolCallFeed, parseToolEvent, type ToolCallFeedProps, type ToolCallData, type FeedSegment } from "./tool-call-feed";

package/src/run/inline-tool-item.tsx

@@ -115,7 +115,7 @@ export const InlineToolItem = memo(
                 className,
               )}
             >
-              <div className="flex items-center gap-2 px-2.5 py-1.5">
+              <div className="flex items-center gap-2.5 px-3 py-2.5">
                 <div className={cn(
                   "shrink-0",
                   isRunning && "text-primary",
@@ -151,13 +151,13 @@ export const InlineToolItem = memo(
                     </span>
                   ) : null}
                   {isError ? (
-                    <span className="rounded-full border border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] px-1.5 py-px text-[10px] font-semibold uppercase text-[var(--surface-danger-text)]">
-                      Failed
+                    <span className="text-[10px] font-medium text-[var(--surface-danger-text)]">
+                      failed
                     </span>
                   ) : null}
                   {isRunning ? (
-                    <span className="rounded-full border border-[var(--border-accent)] bg-primary/10 px-1.5 py-px text-[10px] font-semibold uppercase text-primary">
-                      Running
+                    <span className="text-[10px] font-medium text-primary">
+                      running
                     </span>
                   ) : null}
                   {open ? (

package/src/run/run-group.tsx

@@ -58,23 +58,17 @@ function AssistantShell({
   children: ReactNode;
 }) {
   return (
-    <div className="flex gap-2.5">
-      <div className="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white">
-        <Bot className="h-3.5 w-3.5" />
-      </div>
-
-      <div className={ASSISTANT_SHELL}>
-        <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]">
-          <span>{branding.label}</span>
-          {isStreaming ? (
-            <span className="inline-flex items-center gap-1.5 text-[var(--text-muted)]">
-              <Loader2 className="h-3 w-3 animate-spin" />
-              Thinking
-            </span>
-          ) : null}
-        </div>
-        {children}
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-2 px-1 font-medium text-muted-foreground text-xs">
+        <span>{branding.label}</span>
+        {isStreaming ? (
+          <span className="inline-flex items-center gap-1.5">
+            <Loader2 className="h-3 w-3 animate-spin" />
+            Thinking
+          </span>
+        ) : null}
       </div>
+      <div className={ASSISTANT_SHELL}>{children}</div>
     </div>
   );
 }
@@ -411,15 +405,7 @@ export const RunGroup = memo(
               )}
             >
               <div className="flex items-center gap-2">
-                <div
-                  className={cn(
-                    "flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white",
-                  )}
-                >
-                  <Bot className="h-3.5 w-3.5" />
-                </div>
-
-                <span className={cn("text-sm font-semibold", branding.textClass)}>
+                <span className={cn("font-semibold text-sm", branding.textClass)}>
                   {branding.label}
                 </span>
 

package/src/run/tool-call-step.tsx

@@ -1,11 +1,9 @@
 /**
- * ToolCallStep — a single agent tool invocation as a collapsible activity step.
- *
- * Now a thin adapter over the canonical `InlineToolItem`: it maps the flat
- * `ToolCallData`-style props (label / status / detail / output / duration) onto
- * a `ToolPart` and delegates rendering, so the timeline feed (`AgentTimeline`,
- * `ToolCallFeed`) and the run group share ONE row implementation and one look.
- * The bespoke row markup is gone; only the prop adapter remains.
+ * ToolCallStep — internal adapter over the canonical `InlineToolItem` row.
+ * Maps flat `ToolCallData`-style props (label / status / detail / output /
+ * duration) onto a `ToolPart` so `AgentTimeline` and `ToolCallFeed` share the
+ * one row implementation. Not exported publicly; only the `ToolCallType` /
+ * `ToolCallStatus` vocabulary is (via `ToolCallData`).
  */
 
 import { type ReactNode } from "react";

package/src/stories/theme-showcase.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InlineToolItem } from "../run/inline-tool-item";
+import type { ToolPart } from "../types/parts";
+
+const meta: Meta = {
+  title: "Foundations/Theme Showcase",
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+type Story = StoryObj;
+
+const THEMES: { name: string; theme?: string }[] = [
+  { name: "Tangle (neutral)", theme: undefined }, // default :root dark
+  { name: "Tangle · light", theme: "tangle-light" },
+  { name: "Aubergine (bazaar)", theme: "aubergine" },
+  { name: "Aubergine · light", theme: "aubergine-light" },
+  { name: "Experimental green", theme: "arena" },
+  { name: "Experimental green · light", theme: "arena-light" },
+];
+
+const NOW = Date.now();
+
+const themeToolParts: ToolPart[] = [
+  {
+    type: "tool",
+    id: "theme-read",
+    tool: "read",
+    state: {
+      status: "completed",
+      input: { file_path: "src/batch-writer.ts" },
+      time: { start: NOW - 3100, end: NOW - 2500 },
+    },
+  },
+  {
+    type: "tool",
+    id: "theme-search",
+    tool: "grep",
+    state: {
+      status: "completed",
+      input: { pattern: "await sleep\\(" },
+      time: { start: NOW - 2200, end: NOW - 1800 },
+    },
+  },
+  {
+    type: "tool",
+    id: "theme-build",
+    tool: "bash",
+    state: {
+      status: "error",
+      input: { command: "pnpm test" },
+      error: "1 failing test",
+      time: { start: NOW - 1600, end: NOW - 400 },
+    },
+  },
+];
+
+function Cell({ name, theme }: { name: string; theme?: string }) {
+  return (
+    <div
+      data-theme={theme}
+      className="flex flex-col gap-3 rounded-2xl border border-border bg-background p-5"
+    >
+      <div className="flex items-center justify-between">
+        <span className="font-semibold text-foreground text-sm">{name}</span>
+        <span className="font-medium text-muted-foreground text-xs">
+          {theme?.includes("light") ? "Light" : "Dark"}
+        </span>
+      </div>
+
+      <div className="space-y-1.5 rounded-xl border border-[var(--border-subtle)] bg-surface-container-high p-3">
+        <div className="flex items-center gap-2">
+          <span className="size-2 rounded-full bg-primary" />
+          <span className="font-semibold text-foreground text-xs">Agent</span>
+          <span className="text-[11px] text-muted-foreground">4 tools · 3s</span>
+        </div>
+        {themeToolParts.map((part, index) => (
+          <InlineToolItem
+            key={part.id}
+            part={part}
+            groupPosition={index === 0 ? "first" : index === themeToolParts.length - 1 ? "last" : "middle"}
+          />
+        ))}
+      </div>
+
+      <p className="text-muted-foreground text-xs leading-relaxed">
+        Body copy on the canvas. Surfaces separate by fill; the border is a quiet edge.
+      </p>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="rounded-lg bg-primary px-3 py-1.5 font-medium text-primary-foreground text-xs"
+        >
+          Primary
+        </button>
+        <button
+          type="button"
+          className="rounded-lg border border-border bg-muted px-3 py-1.5 font-medium text-foreground text-xs"
+        >
+          Secondary
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const AllThemes: Story = {
+  render: () => (
+    <div className="min-h-screen bg-[#0a0a0c] p-6">
+      <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+        {THEMES.map((t) => (
+          <Cell key={t.name} name={t.name} theme={t.theme} />
+        ))}
+      </div>
+    </div>
+  ),
+};