@open-mercato/ui 0.6.4-develop.3944.1.4100aa7fbe → 0.6.4-develop.3962.1.70f30e284c

package/src/ai/__tests__/AiChatSessions.test.tsx

@@ -0,0 +1,228 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, screen, waitFor } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import {
+  emitOrganizationScopeChanged,
+} from '@open-mercato/shared/lib/frontend/organizationEvents'
+import {
+  AiChatSessionsProvider,
+  LEGACY_STORAGE_KEY,
+  useAiChatSessions,
+} from '../AiChatSessions'
+
+jest.mock('../conversation-store', () => {
+  const actual = jest.requireActual('../conversation-store') as Record<string, unknown>
+  return {
+    ...actual,
+    listAiServerConversations: jest.fn(async () => null),
+    createAiServerConversation: jest.fn(async () => null),
+    updateAiServerConversation: jest.fn(async () => null),
+  }
+})
+
+import {
+  listAiServerConversations,
+  createAiServerConversation,
+} from '../conversation-store'
+
+const listMock = listAiServerConversations as jest.MockedFunction<typeof listAiServerConversations>
+const createMock = createAiServerConversation as jest.MockedFunction<typeof createAiServerConversation>
+
+const KEY_PREFIX = 'om-ai-chat-sessions-v1'
+
+function scopedKey(tenantId: string | null, organizationId: string | null): string {
+  return `${KEY_PREFIX}:${tenantId ?? 'no-tenant'}:${organizationId ?? 'no-org'}`
+}
+
+function CreateSessionButton({ agentId }: { agentId: string }) {
+  const sessions = useAiChatSessions()
+  return (
+    <button type="button" onClick={() => sessions.createSession(agentId)}>
+      Create session
+    </button>
+  )
+}
+
+function SessionCount({ agentId }: { agentId: string }) {
+  const sessions = useAiChatSessions()
+  const open = sessions.getOpenSessions(agentId)
+  return <span data-testid="session-count">{open.length}</span>
+}
+
+function Harness({ agentId }: { agentId: string }) {
+  return (
+    <AiChatSessionsProvider>
+      <CreateSessionButton agentId={agentId} />
+      <SessionCount agentId={agentId} />
+    </AiChatSessionsProvider>
+  )
+}
+
+describe('<AiChatSessionsProvider> — tenant/org scope isolation', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    listMock.mockReset()
+    listMock.mockResolvedValue(null)
+    createMock.mockReset()
+    createMock.mockResolvedValue(null)
+    // Reset scope to a known starting point. The module-level state in
+    // organizationEvents persists across tests in the same file.
+    act(() => {
+      emitOrganizationScopeChanged({ tenantId: 'T1', organizationId: 'O1' })
+    })
+  })
+
+  afterEach(() => {
+    window.localStorage.clear()
+  })
+
+  it('does not read or write the legacy unscoped key', async () => {
+    window.localStorage.setItem(
+      LEGACY_STORAGE_KEY,
+      JSON.stringify({
+        sessions: [
+          {
+            id: 'legacy-session',
+            agentId: 'assistant',
+            conversationId: 'legacy-conv',
+            createdAt: 1,
+            lastUsedAt: 1,
+            status: 'open',
+          },
+        ],
+        activeByAgent: { assistant: 'legacy-session' },
+      }),
+    )
+
+    renderWithProviders(<Harness agentId="assistant" />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('session-count').textContent).toBe('0')
+    })
+
+    expect(window.localStorage.getItem(LEGACY_STORAGE_KEY)).not.toBeNull()
+  })
+
+  it('writes new sessions to the tenant/org scoped key', async () => {
+    renderWithProviders(<Harness agentId="assistant" />)
+
+    act(() => {
+      screen.getByRole('button', { name: 'Create session' }).click()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('session-count').textContent).toBe('1')
+    })
+
+    const scoped = window.localStorage.getItem(scopedKey('T1', 'O1'))
+    expect(scoped).not.toBeNull()
+    const parsed = JSON.parse(scoped!) as { sessions: Array<{ agentId: string }> }
+    expect(parsed.sessions).toHaveLength(1)
+    expect(parsed.sessions[0].agentId).toBe('assistant')
+
+    expect(window.localStorage.getItem(scopedKey('T2', 'O2'))).toBeNull()
+  })
+
+  it('rehydrates from the new scope on scope change (no flash of previous-scope data)', async () => {
+    // Seed BOTH scopes' buckets with distinct session counts so we can
+    // observe the swap.
+    window.localStorage.setItem(
+      scopedKey('T1', 'O1'),
+      JSON.stringify({
+        sessions: [
+          {
+            id: 's1',
+            agentId: 'assistant',
+            conversationId: 'c1',
+            createdAt: 1,
+            lastUsedAt: 1,
+            status: 'open',
+          },
+          {
+            id: 's2',
+            agentId: 'assistant',
+            conversationId: 'c2',
+            createdAt: 2,
+            lastUsedAt: 2,
+            status: 'open',
+          },
+        ],
+        activeByAgent: { assistant: 's1' },
+      }),
+    )
+    window.localStorage.setItem(
+      scopedKey('T2', 'O2'),
+      JSON.stringify({
+        sessions: [
+          {
+            id: 's3',
+            agentId: 'assistant',
+            conversationId: 'c3',
+            createdAt: 3,
+            lastUsedAt: 3,
+            status: 'open',
+          },
+        ],
+        activeByAgent: { assistant: 's3' },
+      }),
+    )
+
+    renderWithProviders(<Harness agentId="assistant" />)
+
+    await waitFor(() => {
+      expect(screen.getByTestId('session-count').textContent).toBe('2')
+    })
+
+    act(() => {
+      emitOrganizationScopeChanged({ tenantId: 'T2', organizationId: 'O2' })
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('session-count').textContent).toBe('1')
+    })
+
+    // T1/O1 bucket must remain untouched after the swap.
+    const t1Raw = window.localStorage.getItem(scopedKey('T1', 'O1'))
+    expect(t1Raw).not.toBeNull()
+    const t1Parsed = JSON.parse(t1Raw!) as { sessions: unknown[] }
+    expect(t1Parsed.sessions).toHaveLength(2)
+  })
+
+  it('refires the server conversation list on scope change', async () => {
+    renderWithProviders(<Harness agentId="assistant" />)
+
+    await waitFor(() => {
+      expect(listMock).toHaveBeenCalledTimes(1)
+    })
+
+    act(() => {
+      emitOrganizationScopeChanged({ tenantId: 'T2', organizationId: 'O2' })
+    })
+
+    await waitFor(() => {
+      expect(listMock).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('falls back to the no-tenant/no-org bucket when scope is unresolved', async () => {
+    act(() => {
+      emitOrganizationScopeChanged({ tenantId: null, organizationId: null })
+    })
+
+    renderWithProviders(<Harness agentId="assistant" />)
+
+    act(() => {
+      screen.getByRole('button', { name: 'Create session' }).click()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('session-count').textContent).toBe('1')
+    })
+
+    expect(window.localStorage.getItem(scopedKey(null, null))).not.toBeNull()
+  })
+})

package/src/ai/__tests__/AiDock.test.tsx

@@ -11,11 +11,21 @@ import { AiDockProvider, useAiDock, type AiDockedAssistant } from '../AiDock'
 jest.mock('../AiChat', () => {
   const ReactModule = require('react') as typeof import('react')
   return {
-    AiChat: ({ agent, defaultCompactFooter }: { agent: string; defaultCompactFooter?: boolean }) =>
+    AiChat: ({
+      agent,
+      defaultCompactFooter,
+      onConversationNotFound,
+    }: {
+      agent: string
+      defaultCompactFooter?: boolean
+      onConversationNotFound?: () => void
+    }) =>
       ReactModule.createElement('div', {
         'data-testid': 'ai-chat',
         'data-agent': agent,
         'data-default-compact-footer': defaultCompactFooter ? 'true' : 'false',
+        'data-has-conversation-not-found-handler': typeof onConversationNotFound === 'function' ? 'true' : 'false',
+        onClick: () => onConversationNotFound?.(),
       }),
   }
 })
@@ -132,4 +142,24 @@ describe('<AiDockProvider>', () => {
       expect(screen.getByTestId('ai-chat')).toHaveAttribute('data-default-compact-footer', 'true')
     })
   })
+
+  it('wires onConversationNotFound so a stale session closes (no perpetual blank chat)', async () => {
+    renderWithProviders(<Harness />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Dock assistant' }))
+
+    const chat = await waitFor(() => screen.getByTestId('ai-chat'))
+    expect(chat).toHaveAttribute('data-has-conversation-not-found-handler', 'true')
+
+    // Fire the not-found callback via the mocked AiChat's onClick.
+    fireEvent.click(chat)
+
+    // After closeSession, the active session disappears; DockedChatBody
+    // schedules ensureSession in an effect, so for one tick the AiChat
+    // surface should be torn down before the new session mounts.
+    await waitFor(() => {
+      const next = screen.queryByTestId('ai-chat')
+      if (next === chat) throw new Error('stale chat surface should have unmounted')
+    })
+  })
 })

package/src/ai/__tests__/conversation-store.test.ts

@@ -1,4 +1,4 @@
-import { listAiServerConversations } from '../conversation-store'
+import { listAiServerConversations, loadAiServerTranscript } from '../conversation-store'
 
 describe('AI conversation store', () => {
   const originalFetch = global.fetch
@@ -26,4 +26,77 @@ describe('AI conversation store', () => {
       }),
     )
   })
+
+  describe('loadAiServerTranscript', () => {
+    it('returns ok=true with parsed data on 200', async () => {
+      const payload = {
+        conversation: {
+          conversationId: 'conv-1',
+          agentId: 'agent-1',
+          title: null,
+          status: 'open',
+          visibility: 'private',
+          pageContext: null,
+          createdAt: '2026-05-28T00:00:00Z',
+          updatedAt: '2026-05-28T00:00:00Z',
+          lastMessageAt: null,
+          importedFromLocalAt: null,
+          isOwner: true,
+        },
+        messages: [],
+        nextCursor: null,
+      }
+      global.fetch = jest.fn(async () => new Response(JSON.stringify(payload), { status: 200 })) as unknown as typeof fetch
+
+      const result = await loadAiServerTranscript('conv-1')
+
+      expect(result).toEqual({ ok: true, data: payload })
+    })
+
+    it('returns ok=false notFound=true on 404 (stale conversationId from previous scope)', async () => {
+      global.fetch = jest.fn(async () => new Response('{"error":"not found"}', { status: 404 })) as unknown as typeof fetch
+
+      const result = await loadAiServerTranscript('conv-from-old-scope')
+
+      expect(result).toEqual({ ok: false, notFound: true })
+    })
+
+    it('returns ok=false notFound=false on 503 (transient transport failure)', async () => {
+      global.fetch = jest.fn(async () => new Response('{"error":"upstream"}', { status: 503 })) as unknown as typeof fetch
+
+      const result = await loadAiServerTranscript('conv-1')
+
+      expect(result).toEqual({ ok: false, notFound: false })
+    })
+
+    it('returns ok=false notFound=false on 403 (no scope membership)', async () => {
+      global.fetch = jest.fn(async () => new Response('{"error":"forbidden"}', { status: 403 })) as unknown as typeof fetch
+
+      const result = await loadAiServerTranscript('conv-1')
+
+      expect(result).toEqual({ ok: false, notFound: false })
+    })
+
+    it('returns ok=false notFound=false when fetch throws', async () => {
+      global.fetch = jest.fn(async () => {
+        throw new TypeError('Failed to fetch')
+      }) as unknown as typeof fetch
+
+      const result = await loadAiServerTranscript('conv-1')
+
+      expect(result).toEqual({ ok: false, notFound: false })
+    })
+
+    it('forwards the limit option as a query string', async () => {
+      const fetchMock = jest.fn(async () => new Response('{}', { status: 404 }))
+      global.fetch = fetchMock as unknown as typeof fetch
+
+      await loadAiServerTranscript('conv-1', { limit: 25 })
+
+      expect(fetchMock).toHaveBeenCalledWith(
+        '/api/ai_assistant/ai/conversations/conv-1?limit=25',
+        expect.any(Object),
+      )
+    })
+  })
 })

package/src/ai/conversation-store.ts

@@ -50,6 +50,21 @@ export interface AiServerImportResponse {
   skippedMessageCount: number
 }
 
+/**
+ * Discriminated result of {@link loadAiServerTranscript}. Callers must
+ * distinguish 404 (the conversation does not exist for the current scope —
+ * e.g. it belonged to a previous tenant/org) from other failures (network
+ * down, server error) because the recovery strategies are opposite:
+ *  - `notFound: true`  → drop the local cache, optionally surface a
+ *                         not-found callback. NEVER import local messages
+ *                         onto the new scope.
+ *  - `notFound: false` → preserve local state and retry later.
+ */
+export type LoadTranscriptResult =
+  | { ok: true; data: AiServerTranscriptResponse }
+  | { ok: false; notFound: true }
+  | { ok: false; notFound: false }
+
 function readString(value: unknown): string | null {
   return typeof value === 'string' && value.length > 0 ? value : null
 }
@@ -147,13 +162,14 @@ export async function updateAiServerConversation(
 export async function loadAiServerTranscript(
   conversationId: string,
   options: { limit?: number } = {},
-): Promise<AiServerTranscriptResponse | null> {
+): Promise<LoadTranscriptResult> {
   const params = new URLSearchParams()
   params.set('limit', String(options.limit ?? 100))
   const result = await requestJson<AiServerTranscriptResponse>(
     `${CONVERSATIONS_ENDPOINT}/${encodeURIComponent(conversationId)}?${params.toString()}`,
   )
-  return result.ok ? result.data : null
+  if (result.ok) return { ok: true, data: result.data }
+  return { ok: false, notFound: result.status === 404 }
 }
 
 export async function importAiLocalConversation(input: {

package/src/ai/useAiChat.ts

@@ -118,6 +118,15 @@ export interface UseAiChatInput {
    * configured default (no override sent).
    */
   modelOverride?: string | null
+  /**
+   * Called when the server returns 404 for the active `conversationId`.
+   * Used by hosts to remove a stale session entry (e.g. the AI dock
+   * closes the session tab) when a conversation no longer exists for the
+   * current tenant/org scope. A 404 here distinguishes a missing
+   * conversation from a transient transport failure — the hook never
+   * imports local messages onto the new scope when this fires.
+   */
+  onConversationNotFound?: () => void
 }
 
 export interface AiChatErrorEnvelope {
@@ -779,7 +788,7 @@ async function readErrorEnvelope(response: Response): Promise<AiChatErrorEnvelop
 }
 
 export function useAiChat(input: UseAiChatInput): UseAiChatResult {
-  const { agent, apiPath, pageContext, attachmentIds, debug, initialMessages, onError, conversationId: conversationIdInput, providerOverride, modelOverride } = input
+  const { agent, apiPath, pageContext, attachmentIds, debug, initialMessages, onError, conversationId: conversationIdInput, providerOverride, modelOverride, onConversationNotFound } = input
 
   // Minted once on mount when the caller does not supply a conversationId.
   // The ref keeps the id stable across re-renders and is reused for every
@@ -925,10 +934,11 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
     const localCandidate = readPersistedSession(agent, persistKey)
 
     async function hydrateFromServer(): Promise<void> {
-      const transcript = await loadAiServerTranscript(effectiveConversationId, { limit: 100 })
+      const transcriptResult = await loadAiServerTranscript(effectiveConversationId, { limit: 100 })
       if (cancelled || latestStatusRef.current !== 'idle') return
 
-      if (transcript) {
+      if (transcriptResult.ok) {
+        const transcript = transcriptResult.data
         if (typeof transcript.conversation.isOwner === 'boolean') {
           setIsOwner(transcript.conversation.isOwner)
         }
@@ -942,8 +952,25 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
         }
       }
 
+      // 404 — the conversation does not exist for the current tenant/org
+      // scope (e.g. the user switched scope and the stale conversationId
+      // came from the previous bucket's localStorage). Self-heal: drop
+      // the local cache, signal the host so it can prune its session
+      // registry, and NEVER fall through to importAiLocalConversation —
+      // that would silently write the previous scope's messages onto the
+      // new scope's server.
+      if (!transcriptResult.ok && transcriptResult.notFound) {
+        updateMessages([])
+        clearPersistedSession(agent, persistKey)
+        onConversationNotFoundRef.current?.()
+        return
+      }
+
       if (!localCandidate || localCandidate.messages.length === 0) {
-        if (!transcript) {
+        if (!transcriptResult.ok) {
+          // Transient transport failure (network down, 5xx, …). Mint a
+          // new server-side record optimistically; the next idle hydrate
+          // will reconcile.
           void createAiServerConversation({
             agentId: agent,
             conversationId: effectiveConversationId,
@@ -991,6 +1018,10 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
   React.useEffect(() => {
     onErrorRef.current = onError
   }, [onError])
+  const onConversationNotFoundRef = React.useRef(onConversationNotFound)
+  React.useEffect(() => {
+    onConversationNotFoundRef.current = onConversationNotFound
+  }, [onConversationNotFound])
 
   const emitError = React.useCallback((envelope: AiChatErrorEnvelope) => {
     if (mountedRef.current) {

package/src/backend/__tests__/lazy-heavy-libraries.test.ts

@@ -47,4 +47,57 @@ describe('heavy libraries are lazy-loaded', () => {
     expect(source).not.toMatch(/from\s+['"]remark-gfm['"]/)
     expect(source).toMatch(/markdownToPlainText/)
   })
+
+  it('BarChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/BarChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/BarChartImpl['"]\)/)
+  })
+
+  it('LineChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/LineChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/LineChartImpl['"]\)/)
+  })
+
+  it('PieChart wrapper does not statically import recharts', () => {
+    const source = read('packages/ui/src/backend/charts/PieChart.tsx')
+    expect(source).not.toMatch(/^[^\n/]*import\s+[^'\n]+from\s+['"]recharts['"]/m)
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/PieChartImpl['"]\)/)
+  })
+
+  it('recharts is only imported by the chart *Impl modules', () => {
+    const impls = ['BarChartImpl', 'LineChartImpl', 'PieChartImpl']
+    for (const name of impls) {
+      const source = read(`packages/ui/src/backend/charts/${name}.tsx`)
+      expect(source).toMatch(/from\s+['"]recharts['"]/)
+    }
+  })
+
+  it('WorkflowGraph wrapper has only type-only @xyflow/react imports', () => {
+    const source = read(
+      'packages/core/src/modules/workflows/components/WorkflowGraph.tsx',
+    )
+    expect(source).not.toMatch(
+      /^[^\n/]*import\s+(?!type\b)[^'\n]+from\s+['"]@xyflow\/react['"]/m,
+    )
+    expect(source).toMatch(/next\/dynamic/)
+    expect(source).toMatch(/import\(['"]\.\/WorkflowGraphImpl['"]\)/)
+  })
+
+  it('WorkflowGraphImpl owns the @xyflow/react runtime import and CSS', () => {
+    const source = read(
+      'packages/core/src/modules/workflows/components/WorkflowGraphImpl.tsx',
+    )
+    expect(source).toMatch(/from\s+['"]@xyflow\/react['"]/)
+    expect(source).toMatch(/['"]@xyflow\/react\/dist\/style\.css['"]/)
+  })
+
+  it('globals.css no longer eagerly imports @xyflow/react styles', () => {
+    const source = read('apps/mercato/src/app/globals.css')
+    expect(source).not.toMatch(/@xyflow\/react\/dist\/style\.css/)
+  })
 })

package/src/backend/charts/BarChart.tsx

@@ -1,18 +1,8 @@
 "use client"
 
 import * as React from 'react'
-import {
-  BarChart as RechartsBarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-} from 'recharts'
+import dynamic from 'next/dynamic'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
-import { ChartTooltipContent, resolveChartColor } from './ChartUtils'
 
 export type BarChartDataItem = Record<string, string | number | null | undefined>
 
@@ -43,6 +33,15 @@ function defaultValueFormatter(value: number): string {
   return value.toLocaleString(undefined, { maximumFractionDigits: 2 })
 }
 
+const BarChartImpl = dynamic(() => import('./BarChartImpl'), {
+  ssr: false,
+  loading: () => (
+    <div className="flex h-40 sm:h-48 items-center justify-center">
+      <Spinner className="h-6 w-6 text-muted-foreground" />
+    </div>
+  ),
+})
+
 export function BarChart({
   title,
   data,
@@ -59,10 +58,6 @@ export function BarChart({
   emptyMessage = 'No data available',
   categoryLabels,
 }: BarChartProps) {
-  const getBarColor = (idx: number): string => {
-    return resolveChartColor(colors?.[idx], idx)
-  }
-
   const hasWrapper = !!title
   const wrapperClass = hasWrapper ? `rounded-lg border bg-card p-4 ${className}` : className
 
@@ -99,66 +94,20 @@ export function BarChart({
     )
   }
 
-  const isHorizontal = layout === 'horizontal'
-  const chartHeight = isHorizontal ? Math.max(200, data.length * 28) : 200
-
-  const chartContent = (
-    <ResponsiveContainer width="100%" height={chartHeight}>
-        <RechartsBarChart
-          data={data}
-          layout={isHorizontal ? 'vertical' : 'horizontal'}
-          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
-        >
-          {showGridLines && (
-            <CartesianGrid strokeDasharray="3 3" stroke="hsl(var(--border))" />
-          )}
-          <XAxis
-            type={isHorizontal ? 'number' : 'category'}
-            dataKey={isHorizontal ? undefined : index}
-            tickFormatter={isHorizontal ? valueFormatter : undefined}
-            tick={{ fontSize: 11 }}
-          />
-          <YAxis
-            type={isHorizontal ? 'category' : 'number'}
-            dataKey={isHorizontal ? index : undefined}
-            tickFormatter={isHorizontal ? undefined : valueFormatter}
-            width={isHorizontal ? 90 : 50}
-            interval={0}
-            tick={{ fontSize: 10 }}
-          />
-          <Tooltip
-            content={
-              <ChartTooltipContent
-                valueFormatter={valueFormatter}
-                categoryLabels={categoryLabels}
-                labelFormatter={(label, payload) => {
-                  const entry = payload?.[0] as { payload?: BarChartDataItem } | undefined
-                  const item = entry?.payload
-                  return item?.[index] ? String(item[index]) : label
-                }}
-              />
-            }
-            cursor={{ fill: 'hsl(var(--muted))', opacity: 0.2 }}
-          />
-          {showLegend && categories.length > 1 && (
-            <Legend verticalAlign="top" height={36} />
-          )}
-          {categories.map((category, idx) => (
-            <Bar
-              key={category}
-              dataKey={category}
-              fill={getBarColor(idx)}
-              radius={isHorizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]}
-            />
-          ))}
-        </RechartsBarChart>
-      </ResponsiveContainer>
-  )
-
   return (
     <div className={wrapperClass}>
       {title && <h3 className="mb-4 text-base font-medium text-card-foreground">{title}</h3>}
-      {chartContent}
+      <BarChartImpl
+        data={data}
+        index={index}
+        categories={categories}
+        colors={colors}
+        layout={layout}
+        valueFormatter={valueFormatter}
+        showLegend={showLegend}
+        showGridLines={showGridLines}
+        categoryLabels={categoryLabels}
+      />
     </div>
   )
 }