@tangle-network/ui 6.0.0 → 8.0.0

package/src/run/tool-call-feed.stories.tsx

@@ -1,294 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToolCallFeed, type FeedSegment } from './tool-call-feed'
-
-// -- Fixtures --
-
-const debuggingSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "I'll investigate the failing test and fix it. Let me start by finding the relevant files.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Exploration',
-    calls: [
-      {
-        id: 'tc-glob-1',
-        type: 'glob',
-        label: 'Find **/*.test.{ts,tsx}',
-        status: 'success',
-        duration: 28,
-        output: 'src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts',
-      },
-      {
-        id: 'tc-read-1',
-        type: 'read',
-        label: 'Read src/run/run-group.test.ts',
-        status: 'success',
-        duration: 55,
-        detail: 'src/run/run-group.test.ts',
-        output: "import { render } from '@testing-library/react'\nimport { RunGroup } from './run-group'\n\ndescribe('RunGroup', () => {\n  it('renders tool parts', () => { ... })\n})",
-      },
-      {
-        id: 'tc-read-2',
-        type: 'read',
-        label: 'Read src/run/run-group.tsx',
-        status: 'success',
-        duration: 61,
-        detail: 'src/run/run-group.tsx',
-        output: 'const allParts = useMemo(() => {\n  const parts = []\n  for (const msg of run.messages) {\n    const msgParts = partMap[msg.id] ?? []\n    ...',
-      },
-    ],
-  },
-  {
-    kind: 'text',
-    content: "I see the issue. The test is passing `undefined` for `partMap` in one of the cases, but the component always expects a `Record<string, SessionPart[]>`. Let me check the test setup.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-grep-1',
-      type: 'grep',
-      label: 'Search for partMap in run-group.test.ts',
-      status: 'success',
-      duration: 44,
-      output: 'src/run/run-group.test.ts:18:  render(<RunGroup run={mockRun} partMap={undefined} collapsed={false} onToggle={jest.fn()} />)',
-    },
-  },
-  {
-    kind: 'text',
-    content: "Found it — the test is passing `partMap={undefined}`. The prop type should default to `{}` rather than requiring the caller to pass a defined value. I'll add a default parameter.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-edit-1',
-      type: 'edit',
-      label: 'Edit src/run/run-group.tsx',
-      status: 'success',
-      duration: 38,
-      detail: 'Added partMap = {} default',
-    },
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'tc-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run src/run/run-group.test.ts',
-      status: 'success',
-      duration: 1240,
-      output: ' ✓ src/run/run-group.test.ts (3)\n\nTest Files  1 passed (1)\n     Tests  3 passed (3)\n  Duration  1.24s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'All tests pass. The fix was a one-line change: adding `partMap = {}` as a default parameter so callers that omit it (or pass `undefined`) get a safe empty map rather than a crash.',
-  },
-]
-
-const multiPhaseSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "I'll refactor the `formatDuration` utility to support minutes, add tests, and verify the full suite still passes.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Read current implementation',
-    calls: [
-      {
-        id: 'mp-read-1',
-        type: 'read',
-        label: 'Read src/utils/format.ts',
-        status: 'success',
-        duration: 42,
-        output: "export function formatDuration(ms: number): string {\n  if (ms < 1000) return `${ms}ms`\n  return `${(ms / 1000).toFixed(1)}s`\n}",
-      },
-      {
-        id: 'mp-read-2',
-        type: 'read',
-        label: 'Read src/utils/format.test.ts',
-        status: 'success',
-        duration: 38,
-        output: "describe('formatDuration', () => {\n  it('returns ms for sub-second values', ...)\n  it('returns seconds for 1000-59999ms', ...)\n})",
-      },
-    ],
-  },
-  {
-    kind: 'tool_group',
-    title: 'Implement changes',
-    calls: [
-      {
-        id: 'mp-write-1',
-        type: 'write',
-        label: 'Write src/utils/format.ts',
-        status: 'success',
-        duration: 51,
-        detail: 'Added minutes branch and truncateText helper',
-      },
-      {
-        id: 'mp-write-2',
-        type: 'write',
-        label: 'Write src/utils/format.test.ts',
-        status: 'success',
-        duration: 48,
-        detail: 'Added 3 new test cases for minutes and truncation',
-      },
-    ],
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'mp-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run',
-      status: 'success',
-      duration: 1870,
-      output: 'Test Files  3 passed (3)\n     Tests  18 passed (18)\n  Duration  1.87s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'Done. `formatDuration` now returns `"2m 14s"` for values over 60 seconds. All 18 tests pass including the 3 new cases.',
-  },
-]
-
-const streamingSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "Let me run the full test suite and check for any issues.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'stream-bash-1',
-      type: 'bash',
-      label: 'pnpm test --run',
-      status: 'running',
-    },
-  },
-]
-
-const errorSession: FeedSegment[] = [
-  {
-    kind: 'text',
-    content: "Attempting to build the project.",
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'err-bash-1',
-      type: 'bash',
-      label: 'pnpm build',
-      status: 'error',
-      duration: 3200,
-      detail: 'Build failed with TypeScript errors',
-      output: `error TS2322: Type 'string | undefined' is not assignable to type 'string'.\n  src/utils/format.ts:8:5\n\nerror TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'.\n  src/run/run-item-primitives.tsx:6:48\n\nFound 2 errors.`,
-    },
-  },
-  {
-    kind: 'text',
-    content: "Two TypeScript errors. The first is in `format.ts` — I need to add a null guard before calling `.toFixed()`. The second is in `run-item-primitives.tsx` — `startTime` can be undefined per the `ToolTime` type.",
-  },
-  {
-    kind: 'tool_group',
-    title: 'Apply fixes',
-    calls: [
-      {
-        id: 'err-edit-1',
-        type: 'edit',
-        label: 'Edit src/utils/format.ts',
-        status: 'success',
-        duration: 35,
-        detail: 'Added undefined guard on ms parameter',
-      },
-      {
-        id: 'err-edit-2',
-        type: 'edit',
-        label: 'Edit src/run/run-item-primitives.tsx',
-        status: 'success',
-        duration: 29,
-        detail: 'Changed startTime prop type to number (non-optional at callsite)',
-      },
-    ],
-  },
-  {
-    kind: 'tool_call',
-    call: {
-      id: 'err-bash-2',
-      type: 'bash',
-      label: 'pnpm build',
-      status: 'success',
-      duration: 4100,
-      output: 'dist/index.js  42.3 kB\ndist/index.js.map  88.1 kB\n✓ built in 4.10s',
-    },
-  },
-  {
-    kind: 'text',
-    content: 'Build succeeds. Both TypeScript errors resolved.',
-  },
-]
-
-// --
-
-const meta: Meta<typeof ToolCallFeed> = {
-  title: 'Run/ToolCallFeed',
-  component: ToolCallFeed,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ToolCallFeed>
-
-export const DebuggingSession: Story = {
-  name: 'Debugging a failing test',
-  args: { segments: debuggingSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const MultiPhaseRefactor: Story = {
-  name: 'Multi-phase refactor',
-  args: { segments: multiPhaseSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const Streaming: Story = {
-  name: 'In-progress (running)',
-  args: { segments: streamingSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const BuildErrorAndFix: Story = {
-  name: 'Build error → fix → success',
-  args: { segments: errorSession },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-    </div>
-  ),
-}
-
-export const Empty: Story = {
-  args: { segments: [] },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallFeed {...args} />
-      <p className="text-sm text-muted-foreground italic">(empty feed — renders nothing)</p>
-    </div>
-  ),
-}

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

@@ -1,198 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { ToolCallStep, ToolCallGroup } from './tool-call-step'
-
-const meta: Meta<typeof ToolCallStep> = {
-  title: 'Run/ToolCallStep',
-  component: ToolCallStep,
-  parameters: {
-    layout: 'fullscreen',
-    backgrounds: { default: 'dark' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof ToolCallStep>
-
-// -- Single step stories --
-
-export const BashSuccess: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm test --run --reporter=verbose',
-    status: 'success',
-    duration: 1420,
-    output: `Test Files  2 passed (2)\n     Tests  15 passed (15)\n  Duration  1.42s`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const BashRunning: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm build',
-    status: 'running',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const BashError: Story = {
-  args: {
-    type: 'bash',
-    label: 'pnpm test --run',
-    status: 'error',
-    duration: 890,
-    detail: 'src/components/RunGroup.test.tsx',
-    output: `FAIL src/components/RunGroup.test.tsx\n  ● RunGroup › renders tool parts\n\n    TypeError: Cannot read properties of undefined (reading 'map')\n      at RunGroup (src/run/run-group.tsx:42:40)`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const ReadFile: Story = {
-  args: {
-    type: 'read',
-    label: 'Read src/run/run-group.tsx',
-    status: 'success',
-    duration: 62,
-    detail: '/home/user/project/src/run/run-group.tsx',
-    output: `import { memo, useMemo } from 'react'\nexport const RunGroup = memo(({ run, partMap, ...`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const WriteFile: Story = {
-  args: {
-    type: 'write',
-    label: 'Write src/utils/format.ts',
-    status: 'success',
-    duration: 45,
-    detail: '/home/user/project/src/utils/format.ts',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const EditFile: Story = {
-  args: {
-    type: 'edit',
-    label: 'Edit src/run/run-group.tsx',
-    status: 'success',
-    duration: 38,
-    detail: 'Replaced 3 lines at L42',
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const GlobFind: Story = {
-  args: {
-    type: 'glob',
-    label: 'Find **/*.test.ts',
-    status: 'success',
-    duration: 28,
-    output: `src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const GrepSearch: Story = {
-  args: {
-    type: 'grep',
-    label: 'Search for partMap\\[',
-    status: 'success',
-    duration: 44,
-    output: `src/run/run-group.tsx:184:  const msgParts = partMap[msg.id] ?? []\nsrc/hooks/useRunGroup.ts:44:  setPartMap(prev => ({ ...prev, [msgId]: parts }))`,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-export const NoExpandable: Story = {
-  name: 'No detail/output (not expandable)',
-  args: {
-    type: 'bash',
-    label: 'git add -p',
-    status: 'success',
-    duration: 120,
-  },
-  render: (args) => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallStep {...args} />
-    </div>
-  ),
-}
-
-// -- Group stories --
-
-export const GroupedToolCalls: Story = {
-  name: 'ToolCallGroup — exploration phase',
-  render: () => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallGroup title="Exploration">
-        <ToolCallStep type="glob" label="Find **/*.test.ts" status="success" duration={28} output="src/utils/format.test.ts\nsrc/utils/tool-display.test.ts\nsrc/run/run-group.test.ts" />
-        <ToolCallStep type="read" label="Read src/run/run-group.tsx" status="success" duration={62} detail="Checking for partMap access patterns" output="export const RunGroup = memo(({ run, partMap, ..." />
-        <ToolCallStep type="grep" label="Search for partMap\[" status="success" duration={44} output="src/run/run-group.tsx:184\nsrc/hooks/useRunGroup.ts:44" />
-      </ToolCallGroup>
-    </div>
-  ),
-}
-
-export const MixedStatuses: Story = {
-  name: 'Mixed statuses in a group',
-  render: () => (
-    <div className="p-6 max-w-2xl">
-      <ToolCallGroup title="Test cycle">
-        <ToolCallStep type="bash" label="pnpm test --run src/utils/" status="success" duration={890} />
-        <ToolCallStep type="edit" label="Edit src/run/run-group.tsx" status="success" duration={38} />
-        <ToolCallStep type="bash" label="pnpm test --run" status="error" duration={740} output="FAIL src/run/run-group.test.ts\n  ● 1 test failed" />
-        <ToolCallStep type="bash" label="pnpm test --run" status="running" />
-      </ToolCallGroup>
-    </div>
-  ),
-}
-
-export const AllTypes: Story = {
-  render: () => (
-    <div className="p-6 max-w-2xl space-y-2">
-      <p className="text-xs font-mono uppercase tracking-widest text-muted-foreground px-1 pb-1">All tool types</p>
-      <ToolCallStep type="bash" label="npm run build" status="success" duration={4200} />
-      <ToolCallStep type="read" label="Read package.json" status="success" duration={18} />
-      <ToolCallStep type="write" label="Write dist/index.js" status="success" duration={55} />
-      <ToolCallStep type="edit" label="Edit tsconfig.json" status="success" duration={30} />
-      <ToolCallStep type="glob" label="Find src/**/*.tsx" status="success" duration={22} />
-      <ToolCallStep type="grep" label="Search for export default" status="success" duration={66} />
-      <ToolCallStep type="list" label="List node_modules/.cache" status="success" duration={14} />
-      <ToolCallStep type="download" label="Download schema.json" status="success" duration={380} />
-      <ToolCallStep type="inspect" label="Inspect bundle size" status="running" />
-      <ToolCallStep type="audit" label="Audit dependencies" status="error" duration={1100} />
-    </div>
-  ),
-}