@tangle-network/ui 7.0.0 → 8.1.0

package/src/run/assistant-run-shell.tsx

@@ -0,0 +1,115 @@
+import { type ReactNode } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown, ChevronRight, Loader2, Sparkles } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface AssistantRunShellProps {
+  /** Header label, e.g. the agent name or "Tools". */
+  label: string;
+  /** Terse stat line beside the label, e.g. "3 tools, 2s thinking". */
+  summary?: string;
+  /** One-line preview shown next to the label AND below the header when collapsed. */
+  collapsedPreview?: string;
+  /** Small trailing glyphs before the status pill (e.g. category badges). */
+  badges?: ReactNode;
+  /** Drives the status pill and header spinner. */
+  isStreaming?: boolean;
+  collapsed: boolean;
+  onToggle: () => void;
+  /** Actions rendered outside the collapse trigger, right of the header. */
+  headerActions?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * The collapsible "assistant run" container shared by `RunGroup` (session-model
+ * driven) and `AgentTimeline` (declarative item list). Owns the header
+ * (label · summary · badges · status pill · chevron), the collapsed preview, and
+ * the Radix collapse — so both transcripts fold agent activity the same way and
+ * there is one implementation of a run, not two. It renders only chrome; callers
+ * pass the run body (tool rows, reasoning, text) as `children`.
+ */
+export function AssistantRunShell({
+  label,
+  summary,
+  collapsedPreview,
+  badges,
+  isStreaming,
+  collapsed,
+  onToggle,
+  headerActions,
+  children,
+  className,
+}: AssistantRunShellProps) {
+  return (
+    <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
+      <div
+        className={cn(
+          "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none",
+          className,
+        )}
+      >
+        <div className="flex items-start gap-3 px-3 py-2.5">
+          <Collapsible.Trigger asChild>
+            <button
+              type="button"
+              className="w-full rounded-[20px] bg-transparent px-0 py-0 text-left transition-colors hover:bg-transparent"
+            >
+              <div className="flex items-center gap-2">
+                <span className="font-semibold text-foreground text-sm">{label}</span>
+
+                {summary ? (
+                  <span className="text-[11px] text-muted-foreground">{summary}</span>
+                ) : null}
+                {collapsed && collapsedPreview ? (
+                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
+                    {collapsedPreview}
+                  </span>
+                ) : null}
+
+                <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {badges}
+
+                  {isStreaming ? (
+                    <span className="inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]">
+                      <Loader2 className="h-2.5 w-2.5 animate-spin" />
+                      Running
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground">
+                      <Sparkles className="h-2.5 w-2.5" />
+                      Done
+                    </span>
+                  )}
+
+                  {collapsed ? (
+                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
+                  ) : (
+                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+            </button>
+          </Collapsible.Trigger>
+
+          {headerActions ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
+              {headerActions}
+            </div>
+          ) : null}
+        </div>
+
+        {collapsed && collapsedPreview ? (
+          <div className="line-clamp-2 px-4 pb-4 text-sm leading-6 text-muted-foreground">
+            {collapsedPreview}
+          </div>
+        ) : null}
+
+        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
+          <div className="border-t border-[var(--border-subtle)] px-4 pb-4 pt-3">{children}</div>
+        </Collapsible.Content>
+      </div>
+    </Collapsible.Root>
+  );
+}

package/src/run/index.ts

@@ -1,4 +1,5 @@
 export { RunGroup, type RunGroupProps } from "./run-group";
+export { AssistantRunShell, type AssistantRunShellProps } from "./assistant-run-shell";
 export { InlineToolItem, type InlineToolItemProps } from "./inline-tool-item";
 export {
   InlineThinkingItem,
@@ -9,5 +10,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/run-group.tsx

@@ -1,10 +1,7 @@
 import { memo, useMemo, type ComponentType, type ReactNode } from "react";
-import * as Collapsible from "@radix-ui/react-collapsible";
 import {
   Bot,
   Loader2,
-  ChevronDown,
-  ChevronRight,
   Terminal,
   FileEdit,
   FileSearch,
@@ -13,10 +10,8 @@ import {
   Globe,
   ClipboardList,
   Settings,
-  Sparkles,
   type LucideProps,
 } from "lucide-react";
-import { cn } from "../lib/utils";
 import { formatDuration } from "../utils/format";
 import type { Run, ToolCategory } from "../types/run";
 import type { SessionPart, ToolPart, ReasoningPart } from "../types/parts";
@@ -24,6 +19,7 @@ import type { AgentBranding } from "../types/branding";
 import type { CustomToolRenderer } from "../types/tool-display";
 import { InlineToolItem } from "./inline-tool-item";
 import { InlineThinkingItem } from "./inline-thinking-item";
+import { AssistantRunShell } from "./assistant-run-shell";
 import { Markdown } from "../markdown/markdown";
 import {
   OpenUIArtifactRenderer,
@@ -393,73 +389,16 @@ export const RunGroup = memo(
     }
 
     return (
-      <Collapsible.Root open={!collapsed} onOpenChange={() => onToggle()}>
-        <div className="rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none">
-        {/* Header */}
-        <div className="flex items-start gap-3 px-3 py-2.5">
-          <Collapsible.Trigger asChild>
-            <button
-              className={cn(
-                "w-full rounded-[20px] px-0 py-0 text-left transition-colors",
-                "bg-transparent hover:bg-transparent",
-              )}
-            >
-              <div className="flex items-center gap-2">
-                <span className={cn("font-semibold text-sm", branding.textClass)}>
-                  {branding.label}
-                </span>
-
-                {renderSummary(run) ? (
-                  <span className="text-[11px] text-muted-foreground">{renderSummary(run)}</span>
-                ) : null}
-                {collapsed && run.summaryText ? (
-                  <span className="min-w-0 truncate text-[11px] text-foreground/70">
-                    {run.summaryText}
-                  </span>
-                ) : null}
-
-                <div className="ml-auto flex shrink-0 items-center gap-1.5">
-                  <CategoryBadges categories={stats.toolCategories} />
-
-                  {isStreaming ? (
-                    <span className="inline-flex items-center gap-1 rounded-full border border-[var(--border-accent)] bg-[var(--accent-surface-soft)] px-2 py-px text-[10px] font-semibold uppercase text-[var(--accent-text)]">
-                      <Loader2 className="h-2.5 w-2.5 animate-spin" />
-                      Running
-                    </span>
-                  ) : (
-                    <span className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-px text-[10px] font-semibold uppercase text-muted-foreground">
-                      <Sparkles className="h-2.5 w-2.5" />
-                      Done
-                    </span>
-                  )}
-
-                  {!collapsed ? (
-                    <ChevronDown className="h-3.5 w-3.5 text-muted-foreground" />
-                  ) : (
-                    <ChevronRight className="h-3.5 w-3.5 text-muted-foreground" />
-                  )}
-                </div>
-              </div>
-            </button>
-          </Collapsible.Trigger>
-
-          {headerActions ? (
-            <div className="flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1">
-              {headerActions}
-            </div>
-          ) : null}
-        </div>
-
-        {/* Summary text when collapsed */}
-        {collapsed && run.summaryText && (
-          <div className="px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2">
-            {run.summaryText}
-          </div>
-        )}
-
-        {/* Expanded content */}
-        <Collapsible.Content className="overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
-          <div className={cn("border-t border-[var(--border-subtle)] px-4 pb-4 pt-3")}>
+      <AssistantRunShell
+        label={branding.label}
+        summary={renderSummary(run) || undefined}
+        collapsedPreview={run.summaryText ?? undefined}
+        badges={<CategoryBadges categories={stats.toolCategories} />}
+        isStreaming={isStreaming}
+        collapsed={collapsed}
+        onToggle={onToggle}
+        headerActions={headerActions}
+      >
             {allParts.map(({ part, msgId, index }, partIndex) => {
               const key = `${msgId}-${index}`;
 
@@ -549,10 +488,7 @@ export const RunGroup = memo(
                 </div>
               );
             })}
-          </div>
-        </Collapsible.Content>
-        </div>
-      </Collapsible.Root>
+      </AssistantRunShell>
     );
   },
 );

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/chat/chat-input.stories.tsx

@@ -1,142 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ChatInput, type PendingFile } from './chat-input'
-
-const meta: Meta<typeof ChatInput> = {
-  title: 'Chat/ChatInput',
-  component: ChatInput,
-  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
-  decorators: [
-    (Story) => (
-      <div className="w-[680px]">
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    onSend: (msg, files) => console.log('send', msg, files),
-    onCancel: () => console.log('cancel'),
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ChatInput>
-
-export const Empty: Story = {
-  name: 'Empty — ready',
-}
-
-export const WithModelSelector: Story = {
-  name: 'With model selector',
-  args: {
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-export const WithAttachButtons: Story = {
-  name: 'With attach buttons',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    onAttachFolder: (files) => console.log('attach folder', files),
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-export const Streaming: Story = {
-  name: 'Streaming — stop button active',
-  args: {
-    isStreaming: true,
-    onCancel: () => console.log('cancel'),
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-export const Disabled: Story = {
-  name: 'Disabled',
-  args: {
-    disabled: true,
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-const sampleFiles: PendingFile[] = [
-  { id: 'f1', name: 'dataset.csv', size: 204800, type: 'file', status: 'ready' },
-  { id: 'f2', name: 'report.pdf', size: 1572864, type: 'file', status: 'uploading' },
-]
-
-export const WithFilesAttached: Story = {
-  name: 'With file attachments',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    pendingFiles: sampleFiles,
-    onRemoveFile: (id) => console.log('remove', id),
-    modelLabel: 'claude-sonnet-4-6',
-    onModelClick: () => console.log('model click'),
-  },
-}
-
-const folderFiles: PendingFile[] = [
-  { id: 'd1', name: 'my-project', size: 0, type: 'folder', fileCount: 42, status: 'ready' },
-  { id: 'f3', name: 'notes.txt', size: 1024, type: 'file', status: 'ready' },
-]
-
-export const WithFolderAttached: Story = {
-  name: 'With folder + file',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    onAttachFolder: (files) => console.log('attach folder', files),
-    pendingFiles: folderFiles,
-    onRemoveFile: (id) => console.log('remove', id),
-    modelLabel: 'claude-sonnet-4-6',
-  },
-}
-
-export const WithErrorFile: Story = {
-  name: 'With error attachment',
-  args: {
-    onAttach: (files) => console.log('attach', files),
-    pendingFiles: [
-      { id: 'e1', name: 'too-large.zip', size: 524288000, type: 'file', status: 'error' },
-      { id: 'f4', name: 'config.json', size: 2048, type: 'file', status: 'ready' },
-    ],
-    onRemoveFile: (id) => console.log('remove', id),
-  },
-}
-
-export const CustomPlaceholder: Story = {
-  name: 'Custom placeholder',
-  args: {
-    placeholder: 'Describe the data transformation you need…',
-    onAttach: (files) => console.log('attach', files),
-    modelLabel: 'gpt-4o',
-  },
-}
-
-/** Static drag-over overlay preview */
-export const DragOverPreview: Story = {
-  name: 'Drag-over overlay (static preview)',
-  render: (args) => (
-    <div className="w-[680px] px-4 py-3 relative">
-      {/* Drag overlay replica */}
-      <div className="absolute inset-0 z-10 flex items-center justify-center rounded-[28px] border-2 border-dashed border-blue-400 bg-blue-500/8 backdrop-blur-sm pointer-events-none mx-4 my-3">
-        <div className="text-center">
-          <div className="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-xl bg-blue-500/15">
-            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-blue-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-              <polyline points="17 8 12 3 7 8" />
-              <line x1="12" y1="3" x2="12" y2="15" />
-            </svg>
-          </div>
-          <p className="text-sm font-semibold text-white">Drop files to add context</p>
-          <p className="mt-1 text-xs text-zinc-400">Files will be attached to your next message.</p>
-        </div>
-      </div>
-      {/* Underlying input (blurred) */}
-      <ChatInput {...args} onAttach={() => {}} />
-    </div>
-  ),
-  args: {},
-}