Makelore 2.0 initial clean snapshot

tests/unit/execution-graph-card.test.tsx

@@ -0,0 +1,117 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ExecutionGraphCard } from '@/pages/Chat/ExecutionGraphCard';
+import { getToolVisibilityId } from '@/pages/Chat/chat-transcript';
+import type { TaskStep } from '@/pages/Chat/task-visualization';
+
+vi.mock('react-i18next', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('react-i18next')>();
+  return {
+    ...actual,
+    useTranslation: () => ({
+      t: (key: string) => key,
+    }),
+  };
+});
+
+describe('ExecutionGraphCard', () => {
+  it('drives the real graph step detail from the shared visibility set', () => {
+    const visibilityId = getToolVisibilityId('msg_assistant', 'tool-read', 0);
+    const onStepExpandedChange = vi.fn();
+    const step: TaskStep = {
+      id: 'tool-read',
+      visibilityId,
+      label: 'read',
+      status: 'completed',
+      kind: 'tool',
+      detail: '{"file":"README.md"}',
+      depth: 1,
+    };
+    const { rerender } = render(
+      <ExecutionGraphCard
+        agentLabel="Makelore"
+        steps={[step]}
+        active={false}
+        expanded
+        expandedStepIds={new Set()}
+        onStepExpandedChange={onStepExpandedChange}
+      />,
+    );
+
+    expect(screen.queryByText(/README\.md/)).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /read/i }));
+    expect(onStepExpandedChange).toHaveBeenCalledWith(visibilityId, true);
+
+    rerender(
+      <ExecutionGraphCard
+        agentLabel="Makelore"
+        steps={[step]}
+        active={false}
+        expanded
+        expandedStepIds={new Set([visibilityId])}
+        onStepExpandedChange={onStepExpandedChange}
+      />,
+    );
+    expect(screen.getByText(/"file": "README\.md"/)).toBeInTheDocument();
+  });
+
+  it('notifies the parent when an uncontrolled active graph auto-collapses', () => {
+    const onExpandedChange = vi.fn();
+    const step: TaskStep = {
+      id: 'tool-read',
+      label: 'read',
+      status: 'running',
+      kind: 'tool',
+      detail: '{"file":"README.md"}',
+      depth: 1,
+    };
+    const { rerender } = render(
+      <ExecutionGraphCard
+        agentLabel="娉ュ湡"
+        steps={[step]}
+        active
+        onExpandedChange={onExpandedChange}
+      />,
+    );
+    expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute(
+      'data-collapsed',
+      'false',
+    );
+
+    rerender(
+      <ExecutionGraphCard
+        agentLabel="娉ュ湡"
+        steps={[{ ...step, status: 'completed' }]}
+        active={false}
+        onExpandedChange={onExpandedChange}
+      />,
+    );
+
+    expect(screen.getByTestId('chat-execution-graph')).toHaveAttribute(
+      'data-collapsed',
+      'true',
+    );
+    expect(onExpandedChange).toHaveBeenCalledWith(false);
+  });
+
+  it('notifies the parent when a completed uncontrolled graph mounts collapsed', () => {
+    const onExpandedChange = vi.fn();
+    render(
+      <ExecutionGraphCard
+        agentLabel="娉ュ湡"
+        steps={[{
+          id: 'tool-read',
+          label: 'read',
+          status: 'completed',
+          kind: 'tool',
+          detail: '{"file":"README.md"}',
+          depth: 1,
+        }]}
+        active={false}
+        onExpandedChange={onExpandedChange}
+      />,
+    );
+
+    expect(onExpandedChange).toHaveBeenCalledWith(false);
+  });
+});