@tangle-network/ui 11.6.0 → 11.7.0

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-XROQW5J7.js";
+} from "./chunk-4ENFLPWQ.js";
 import {
   addMessage,
   addParts,
@@ -118,7 +118,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-EJ5NBW7V.js";
+} from "./chunk-LDLOJKPC.js";
 import {
   Avatar,
   AvatarFallback,
@@ -146,28 +146,29 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-RKC3GXHE.js";
+} from "./chunk-VDCZHOOO.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-AZWDI2JG.js";
-import "./chunk-LQS34IGP.js";
+} from "./chunk-UYTRNR7Z.js";
+import {
+  LiveDuration
+} from "./chunk-LFVF2HFB.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-XPYPZMYT.js";
+} from "./chunk-6RIX7M27.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-R5GVQDL3.js";
+} from "./chunk-CVX53NCC.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-J2G7KCYH.js";
+} from "./chunk-XT4JMYVB.js";
 import {
   TOOL_CATEGORY_ICONS,
   formatBytes,
@@ -177,7 +178,7 @@ import {
   getToolDisplayMetadata,
   getToolErrorText,
   truncateText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
 import {
   CommandPreview,
   DiffPreview,
@@ -187,6 +188,9 @@ import {
   WebSearchPreview,
   WriteFilePreview
 } from "./chunk-AAUNOHVL.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import "./chunk-RQGKSCEZ.js";
 import {
   OpenUIArtifactRenderer
@@ -364,6 +368,7 @@ export {
   TerminalDisplay,
   TerminalInput,
   TerminalLine,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ThinkingIndicator,

package/dist/primitives.d.ts

@@ -192,6 +192,20 @@ declare function SkeletonTable({ rows }: {
     rows?: number;
 }): react_jsx_runtime.JSX.Element;
 
+interface TextShimmerProps {
+    children: ReactNode;
+    className?: string;
+    /** One sweep across the text, in milliseconds. */
+    durationMs?: number;
+}
+/**
+ * Inline text with a gradient-mask sweep — the in-flight signal for a run row
+ * label ("Thinking…", a tool verb while its call is running). Carries the
+ * styles it needs, so a consumer that only scans this package for Tailwind
+ * classes still gets the animation.
+ */
+declare function TextShimmer({ children, className, durationMs, }: TextShimmerProps): react_jsx_runtime.JSX.Element;
+
 interface Toast {
     id: string;
     title: string;
@@ -506,4 +520,4 @@ interface FilterFieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const FilterField: React$1.ForwardRefExoticComponent<FilterFieldProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, FilterField, type FilterFieldProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Metric, type MetricProps, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };

package/dist/primitives.js

@@ -50,7 +50,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-EJ5NBW7V.js";
+} from "./chunk-LDLOJKPC.js";
 import {
   Avatar,
   AvatarFallback,
@@ -71,6 +71,9 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./chunk-34A66VBG.js";
+import {
+  TextShimmer
+} from "./chunk-L57WRIND.js";
 import {
   Badge,
   Card,
@@ -194,6 +197,7 @@ export {
   TerminalDisplay,
   TerminalInput,
   TerminalLine,
+  TextShimmer,
   Textarea,
   ThemeToggle,
   ToastContainer,

package/dist/run.d.ts

@@ -30,28 +30,31 @@ declare const RunGroup: React.MemoExoticComponent<({ run, partMap, collapsed, on
 
 type RunRowStatus = "running" | "success" | "error" | "idle";
 /**
- * Trailing status indicator shared by every run row: a spinner while running,
- * a green/red dot on terminal states, nothing when idle. Status is shown here
- * — it never replaces the row's semantic lead icon.
+ * Trailing status indicator shared by every run row. Only `error` draws a
+ * mark (a red dot). Success is silence, and a running row carries its state in
+ * the title — a `TextShimmer` sweep — so neither renders anything here.
  */
 declare function RunRowStatusDot({ status }: {
     status: RunRowStatus;
 }): react_jsx_runtime.JSX.Element | null;
 interface RunRowShellProps {
-    /** Semantic lead glyph — always visible; never replaced by status. */
+    /** Semantic lead glyph (14px). At rest it is the row's only ornament; on
+     *  hover and while open the expand chevron takes its slot. */
     icon: ReactNode;
     /** Row title. A string in the common case; a node when the title carries its
-     *  own treatment (e.g. an active-state shimmer sweep) — it renders inline in
-     *  the shell's title slot either way. */
+     *  own treatment — a running row passes `<TextShimmer>` here, which is the
+     *  whole in-flight signal (the shell draws no spinner). */
     title: ReactNode;
     /** Secondary inline text (tool path/command, or a reasoning preview). */
     description?: string;
     /** Render the description in mono (tools) vs prose (reasoning). */
     descriptionMono?: boolean;
     status?: RunRowStatus;
-    /** Live-ticks a duration while running. */
+    /** @deprecated The shell no longer ticks a live duration while running; the
+     *  running state lives in the title (`TextShimmer`). Accepted and ignored so
+     *  existing callers keep compiling. */
     startTime?: number;
-    /** Static duration shown once the row is no longer running. */
+    /** Static duration, revealed on hover once the row is no longer running. */
     durationMs?: number;
     /** Radius shaping when rows are stacked into a group. */
     groupPosition?: "single" | "first" | "middle" | "last";
@@ -68,12 +71,13 @@ interface RunRowShellProps {
     children?: ReactNode;
 }
 /**
- * Shared shell for the agent activity rows (reasoning + tool). Owns the
- * bordered container, the lead icon badge, title/description, the trailing
- * meta cluster (duration + status + chevron) and the collapsible body, so
- * both row kinds read as one family instead of two bespoke layouts.
+ * Shared shell for the agent activity rows (reasoning + tool). A quiet
+ * one-liner at rest — bare glyph, muted title and description, no fill, no
+ * border — that becomes a bordered card only while open. The border is always
+ * present (transparent at rest) so hover and expand never shift layout.
+ * Both row kinds render through it so they read as one family.
  */
-declare function RunRowShell({ icon, title, description, descriptionMono, status, startTime, durationMs, groupPosition, collapsedError, actions, open: openProp, onOpenChange, defaultOpen, className, contentClassName, children, }: RunRowShellProps): react_jsx_runtime.JSX.Element;
+declare function RunRowShell({ icon, title, description, descriptionMono, status, durationMs, groupPosition, collapsedError, actions, open: openProp, onOpenChange, defaultOpen, className, contentClassName, children, }: RunRowShellProps): react_jsx_runtime.JSX.Element;
 
 interface InlineToolItemProps {
     part: ToolPart;
@@ -88,10 +92,11 @@ interface InlineToolItemProps {
     description?: string;
 }
 /**
- * Compact single-line tool call display. Shows a category icon, title,
- * description, duration and status, and expands on click to show
- * ExpandedToolDetail. Rendered through the shared RunRowShell so it stays
- * consistent with the reasoning row.
+ * Compact single-line tool call display: a category glyph, the tool verb, and
+ * the path or command it acted on. While the call runs the verb shimmers;
+ * once it completes the row goes quiet (duration on hover, a red dot only on
+ * error). Expands on click to show ExpandedToolDetail. Rendered through the
+ * shared RunRowShell so it stays consistent with the reasoning row.
  */
 declare const InlineToolItem: React.MemoExoticComponent<({ part, renderToolDetail, groupPosition, className, contentClassName, actions, title: titleOverride, description: descriptionOverride, }: InlineToolItemProps) => react_jsx_runtime.JSX.Element>;
 

package/dist/run.js

@@ -1,21 +1,23 @@
-import "./chunk-LQS34IGP.js";
+import {
+  LiveDuration
+} from "./chunk-LFVF2HFB.js";
 import {
   ToolCallFeed,
   parseToolEvent
-} from "./chunk-XPYPZMYT.js";
+} from "./chunk-6RIX7M27.js";
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-R5GVQDL3.js";
+} from "./chunk-CVX53NCC.js";
 import {
   ExpandedToolDetail,
   InlineToolItem,
-  LiveDuration,
   RunRowShell,
   RunRowStatusDot
-} from "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
+} from "./chunk-XT4JMYVB.js";
+import "./chunk-EIUE5GV2.js";
 import "./chunk-AAUNOHVL.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-3M7BPSSW.js";
 import "./chunk-GYPQXTJU.js";
 import "./chunk-MKTSMWVD.js";

package/dist/sdk-hooks.js

@@ -5,17 +5,18 @@ import {
   useSSEStream,
   useSdkSession,
   useToolCallStream
-} from "./chunk-XROQW5J7.js";
+} from "./chunk-4ENFLPWQ.js";
 import "./chunk-OEX7NZE3.js";
 import {
   useAutoScroll,
   useRunCollapseState,
   useRunGroups
-} from "./chunk-AZWDI2JG.js";
-import "./chunk-XPYPZMYT.js";
-import "./chunk-J2G7KCYH.js";
-import "./chunk-ULDNFLIM.js";
+} from "./chunk-UYTRNR7Z.js";
+import "./chunk-6RIX7M27.js";
+import "./chunk-XT4JMYVB.js";
+import "./chunk-EIUE5GV2.js";
 import "./chunk-AAUNOHVL.js";
+import "./chunk-L57WRIND.js";
 import "./chunk-ZRVH3WCA.js";
 import "./chunk-P5F43A65.js";
 import "./chunk-WUQDUBJG.js";

package/dist/utils.d.ts

@@ -36,6 +36,12 @@ declare function timeAgo(ts: number): string;
 
 declare const TOOL_CATEGORY_ICONS: Record<ToolCategory, string>;
 declare function getToolCategory(toolName: string): ToolCategory;
+/**
+ * Title is the bare verb ("Read", "Edit", "Shell"); the path, command, pattern
+ * or query lives in `description` only, so a row prints its subject once.
+ * `targetPath` / `commandSnippet` carry the untruncated value for consumers
+ * that need it (diff headers, expanded detail).
+ */
 declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
 /** Extract error text from a tool part, if any. */
 declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;

package/dist/utils.js

@@ -11,7 +11,7 @@ import {
   getToolDisplayMetadata,
   getToolErrorText,
   truncateText
-} from "./chunk-ULDNFLIM.js";
+} from "./chunk-EIUE5GV2.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.6.0",
+  "version": "11.7.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/chat/agent-timeline.stories.tsx

@@ -3,6 +3,9 @@ import { useState } from 'react'
 import { Code, FileText } from 'lucide-react'
 import { AgentTimeline } from './agent-timeline'
 import type { AgentTimelineItem } from './agent-timeline'
+import { ChatContainer } from './chat-container'
+import type { SessionMessage } from '../types/message'
+import type { SessionPart } from '../types/parts'
 
 const meta: Meta<typeof AgentTimeline> = {
   title: 'Chat/AgentTimeline',
@@ -52,8 +55,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-1',
       type: 'glob',
-      label: 'Find **/*.ts in src/',
+      label: 'Find',
       status: 'success',
+      detail: 'src/**/*.ts',
       output:
         'src/index.ts\nsrc/types.ts\nsrc/utils/format.ts\nsrc/utils/parse.ts',
       duration: 18,
@@ -65,8 +69,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-2',
       type: 'read',
-      label: 'Read src/types.ts',
+      label: 'Read',
       status: 'success',
+      detail: 'src/types.ts',
       output:
         '// Existing types\nexport type Maybe<T> = T | null | undefined\nexport type Nullable<T> = T | null',
       duration: 31,
@@ -86,8 +91,9 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-3',
       type: 'write',
-      label: 'Write src/types.ts',
+      label: 'Write',
       status: 'success',
+      detail: 'src/types.ts',
       output: 'File written — 47 lines added.',
       duration: 22,
     },
@@ -98,7 +104,7 @@ const codingSession: AgentTimelineItem[] = [
     call: {
       id: 'tc-4',
       type: 'bash',
-      label: 'npx tsc --noEmit',
+      label: 'Shell',
       status: 'success',
       detail: 'npx tsc --noEmit --strict',
       output: '✓ No type errors',
@@ -201,8 +207,9 @@ export const WhileThinking: Story = {
         call: {
           id: 'tc-1',
           type: 'glob',
-          label: 'Find **/*.ts in src/',
+          label: 'Find',
           status: 'success',
+          detail: 'src/**/*.ts',
           duration: 14,
         },
       },
@@ -234,24 +241,27 @@ export const WithToolGroup: Story = {
           {
             id: 'tc-1',
             type: 'read',
-            label: 'Read src/routes/users.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/users.ts',
             output: "router.get('/', authMiddleware, listUsers)\nrouter.post('/', authMiddleware, createUser)",
             duration: 24,
           },
           {
             id: 'tc-2',
             type: 'read',
-            label: 'Read src/routes/sessions.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/sessions.ts',
             output: "router.get('/', listSessions) // missing auth!\nrouter.delete('/:id', authMiddleware, deleteSession)",
             duration: 19,
           },
           {
             id: 'tc-3',
             type: 'read',
-            label: 'Read src/routes/health.ts',
+            label: 'Read',
             status: 'success',
+            detail: 'src/routes/health.ts',
             output: "router.get('/', healthCheck) // intentionally public",
             duration: 11,
           },
@@ -305,7 +315,7 @@ export const WithError: Story = {
         call: {
           id: 'tc-1',
           type: 'bash',
-          label: 'pnpm test',
+          label: 'Shell',
           status: 'error',
           detail: 'pnpm test --run',
           output:
@@ -351,8 +361,9 @@ export const WithArtifact: Story = {
         call: {
           id: 'tc-1',
           type: 'write',
-          label: 'Write openapi.yaml',
+          label: 'Write',
           status: 'success',
+          detail: 'openapi.yaml',
           output: '187 lines written.',
           duration: 44,
         },
@@ -438,3 +449,145 @@ export const StatusTones: Story = {
     ],
   },
 }
+
+// ---------------------------------------------------------------------------
+// Full transcript through ChatContainer — the real consumer path. Tool titles
+// and descriptions come from `getToolDisplayMetadata`, so this story shows the
+// row grammar a product sees (not hand-written labels): prose, reasoning, a
+// tool sequence, a running row, an error row, and a streaming reply.
+// ---------------------------------------------------------------------------
+
+const transcriptMessages: SessionMessage[] = [
+  { id: 'u-1', role: 'user', time: { created: NOW - 240_000 } },
+  { id: 'a-1', role: 'assistant', time: { created: NOW - 230_000 } },
+  { id: 'u-2', role: 'user', time: { created: NOW - 60_000 } },
+  { id: 'a-2', role: 'assistant', time: { created: NOW - 50_000 } },
+]
+
+const transcriptParts: Record<string, SessionPart[]> = {
+  'u-1': [
+    {
+      type: 'text',
+      text: 'The retry loop in `src/batch-writer.ts` hammers the API when the token expires. Add jittered backoff and make sure the tests cover it.',
+    },
+  ],
+  'a-1': [
+    {
+      type: 'reasoning',
+      text: 'The loop retries immediately on 401. I should read the writer, find where the delay is computed, add exponential backoff with jitter, and extend the existing test.',
+      time: { start: NOW - 229_000, end: NOW - 226_000 },
+    },
+    {
+      type: 'tool',
+      id: 't-1',
+      tool: 'read',
+      state: {
+        status: 'completed',
+        input: { file_path: 'src/batch-writer.ts' },
+        output: 'export async function flush(batch: Row[]) {\n  for (let attempt = 0; attempt < 5; attempt++) {\n    try { return await post(batch) } catch (err) { /* retry */ }\n  }\n}',
+        time: { start: NOW - 225_000, end: NOW - 224_960 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-2',
+      tool: 'grep',
+      state: {
+        status: 'completed',
+        input: { pattern: 'flush\\(', path: 'src/' },
+        output: 'src/batch-writer.ts:12\nsrc/batch-writer.test.ts:8\nsrc/batch-writer.test.ts:31',
+        time: { start: NOW - 224_000, end: NOW - 223_970 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-3',
+      tool: 'edit',
+      state: {
+        status: 'completed',
+        input: {
+          file_path: 'src/batch-writer.ts',
+          old_string: '} catch (err) { /* retry */ }',
+          new_string: '} catch (err) {\n      await sleep(backoff(attempt))\n    }',
+        },
+        output: 'Applied 1 edit',
+        time: { start: NOW - 223_000, end: NOW - 222_980 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-4',
+      tool: 'bash',
+      state: {
+        status: 'completed',
+        input: { command: 'pnpm vitest run src/batch-writer.test.ts' },
+        output: ' ✓ src/batch-writer.test.ts (3)\n\nTest Files  1 passed (1)\n     Tests  3 passed (3)',
+        time: { start: NOW - 222_000, end: NOW - 219_600 },
+      },
+    },
+    {
+      type: 'text',
+      text: 'Added `backoff(attempt)` — exponential from 200ms with ±25% jitter, capped at 5s — and the writer now waits before each retry. The existing three tests still pass.',
+    },
+  ],
+  'u-2': [
+    {
+      type: 'text',
+      text: 'Now add a test that proves the jitter actually spreads the retries.',
+    },
+  ],
+  'a-2': [
+    {
+      type: 'tool',
+      id: 't-5',
+      tool: 'write',
+      state: {
+        status: 'completed',
+        input: {
+          file_path: 'src/batch-writer.jitter.test.ts',
+          content: "import { backoff } from './batch-writer'\n\ntest('jitter spreads retries', () => {\n  const delays = new Set(Array.from({ length: 50 }, () => backoff(2)))\n  expect(delays.size).toBeGreaterThan(10)\n})",
+        },
+        output: 'File written',
+        time: { start: NOW - 49_000, end: NOW - 48_970 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-6',
+      tool: 'bash',
+      state: {
+        status: 'error',
+        input: { command: 'pnpm vitest run src/batch-writer.jitter.test.ts' },
+        error: "Cannot find module './batch-writer' — did you mean './batch-writer.ts'? (resolve.extensions does not include .ts in this config)",
+        time: { start: NOW - 48_000, end: NOW - 46_800 },
+      },
+    },
+    {
+      type: 'tool',
+      id: 't-7',
+      tool: 'bash',
+      state: {
+        status: 'running',
+        input: { command: 'pnpm vitest run src/batch-writer.jitter.test.ts --config vitest.config.ts' },
+        time: { start: NOW - 3_000 },
+      },
+    },
+    {
+      type: 'text',
+      text: 'The first run failed on module resolution — the test runner was picking up the root config. Re-running with the package config',
+    },
+  ],
+}
+
+export const FullTranscript: Story = {
+  render: () => (
+    <div className="h-screen">
+      <ChatContainer
+        presentation="timeline"
+        messages={transcriptMessages}
+        partMap={transcriptParts}
+        isStreaming
+      />
+    </div>
+  ),
+}