@open-mercato/ui 0.6.2-develop.3461.1.605f31c2c9 → 0.6.2

package/src/ai/AiChatSessions.tsx

@@ -4,12 +4,10 @@
  * Multi-tab AI chat sessions.
  *
  * Each agent can have several concurrent conversation threads (sessions).
- * The provider stores their *metadata* — id, conversationId, optional
- * user-given name, timestamps, status — in localStorage, so closing and
- * re-opening the chat pane (or refreshing the page) restores the tabs and
- * their history. The actual messages live in `useAiChat`'s per-conversation
- * persistence slot keyed by `(agent, conversationId)`, which is why every
- * session gets its own UUID even when it shares an agent with the next tab.
+ * The provider mirrors session metadata from the server-side conversation
+ * store. localStorage remains a backward-compatible cache so existing browser
+ * sessions can be imported rather than orphaned, but the server is the source
+ * of truth whenever it is reachable.
  *
  * Sessions are partitioned into:
  *   - `open`   → currently shown in the tab strip
@@ -22,6 +20,12 @@
  */
 
 import * as React from 'react'
+import {
+  createAiServerConversation,
+  listAiServerConversations,
+  updateAiServerConversation,
+  type AiServerConversation,
+} from './conversation-store'
 
 const STORAGE_KEY = 'om-ai-chat-sessions-v1'
 const HISTORY_LIMIT = 50
@@ -135,6 +139,49 @@ function writePersisted(state: AiChatSessionsState): void {
   }
 }
 
+function serverConversationToSession(
+  conversation: AiServerConversation,
+  existing?: AiChatSession,
+): AiChatSession {
+  const createdAt = Date.parse(conversation.createdAt)
+  const updatedAt = Date.parse(conversation.lastMessageAt ?? conversation.updatedAt)
+  return {
+    id: existing?.id ?? conversation.conversationId,
+    agentId: conversation.agentId,
+    conversationId: conversation.conversationId,
+    name: conversation.title ?? existing?.name,
+    createdAt: Number.isFinite(createdAt) ? createdAt : existing?.createdAt ?? Date.now(),
+    lastUsedAt: Number.isFinite(updatedAt) ? updatedAt : existing?.lastUsedAt ?? Date.now(),
+    status: conversation.status,
+  }
+}
+
+function mergeServerConversations(
+  prev: AiChatSessionsState,
+  conversations: AiServerConversation[],
+): AiChatSessionsState {
+  const byConversationId = new Map(prev.sessions.map((session) => [session.conversationId, session]))
+  const serverSessions = conversations.map((conversation) =>
+    serverConversationToSession(conversation, byConversationId.get(conversation.conversationId)),
+  )
+  const serverIds = new Set(serverSessions.map((session) => session.conversationId))
+  const localOnly = prev.sessions.filter((session) => !serverIds.has(session.conversationId))
+  const sessions = [...serverSessions, ...localOnly]
+  const activeByAgent = { ...prev.activeByAgent }
+  const agentIds = new Set(sessions.map((session) => session.agentId))
+  for (const agentId of agentIds) {
+    const activeId = activeByAgent[agentId]
+    const active = sessions.find((session) => session.id === activeId)
+    if (active && active.status === 'open') continue
+    const nextOpen = sessions
+      .filter((session) => session.agentId === agentId && session.status === 'open')
+      .sort((a, b) => b.lastUsedAt - a.lastUsedAt)[0]
+    if (nextOpen) activeByAgent[agentId] = nextOpen.id
+    else delete activeByAgent[agentId]
+  }
+  return { sessions, activeByAgent }
+}
+
 export function AiChatSessionsProvider({ children }: { children: React.ReactNode }) {
   // Hydrate synchronously via a lazy initializer. The previous "empty
   // state + post-mount load effect" pattern had a window where the
@@ -153,6 +200,17 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
     writePersisted(state)
   }, [state])
 
+  React.useEffect(() => {
+    let cancelled = false
+    void listAiServerConversations({ limit: 100 }).then((conversations) => {
+      if (cancelled || !conversations) return
+      setState((prev) => mergeServerConversations(prev, conversations))
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   const update = React.useCallback(
     (mutator: (prev: AiChatSessionsState) => AiChatSessionsState) => {
       setState((prev) => mutator(prev))
@@ -197,6 +255,10 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
       lastUsedAt: Date.now(),
       status: 'open',
     }
+    void createAiServerConversation({
+      agentId: session.agentId,
+      conversationId: session.conversationId,
+    })
     update((prev) => ({
       sessions: [...prev.sessions, session],
       activeByAgent: { ...prev.activeByAgent, [agentId]: session.id },
@@ -206,6 +268,10 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
 
   const closeSession = React.useCallback(
     (sessionId: string) => {
+      const serverTarget = state.sessions.find((s) => s.id === sessionId)
+      if (serverTarget) {
+        void updateAiServerConversation(serverTarget.conversationId, { status: 'closed' })
+      }
       update((prev) => {
         const target = prev.sessions.find((s) => s.id === sessionId)
         if (!target) return prev
@@ -227,11 +293,15 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
         return { sessions, activeByAgent }
       })
     },
-    [update],
+    [state.sessions, update],
   )
 
   const reopenSession = React.useCallback(
     (sessionId: string) => {
+      const serverTarget = state.sessions.find((s) => s.id === sessionId)
+      if (serverTarget) {
+        void updateAiServerConversation(serverTarget.conversationId, { status: 'open' })
+      }
       update((prev) => {
         const target = prev.sessions.find((s) => s.id === sessionId)
         if (!target) return prev
@@ -244,7 +314,7 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
         }
       })
     },
-    [update],
+    [state.sessions, update],
   )
 
   const setActiveSession = React.useCallback(
@@ -267,6 +337,12 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
   const renameSession = React.useCallback(
     (sessionId: string, name: string) => {
       const trimmed = name.trim()
+      const serverTarget = state.sessions.find((s) => s.id === sessionId)
+      if (serverTarget) {
+        void updateAiServerConversation(serverTarget.conversationId, {
+          title: trimmed.length > 0 ? trimmed : null,
+        })
+      }
       update((prev) => ({
         ...prev,
         sessions: prev.sessions.map((s) =>
@@ -276,7 +352,7 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
         ),
       }))
     },
-    [update],
+    [state.sessions, update],
   )
 
   const touchSession = React.useCallback(
@@ -334,6 +410,10 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
             lastUsedAt: Date.now(),
             status: 'open',
           }
+          void createAiServerConversation({
+            agentId: mintedSession.agentId,
+            conversationId: mintedSession.conversationId,
+          })
         }
         resolved = mintedSession
         return {

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

@@ -54,5 +54,5 @@ describe('<AiAssistantLauncher>', () => {
 
     expect(await screen.findByRole('dialog', { name: 'AI assistants' })).toBeInTheDocument()
     expect(screen.getByText('Catalog Assistant')).toBeInTheDocument()
-  })
+  }, 60_000)
 })

package/src/ai/__tests__/AiChat.conversation.test.tsx

@@ -157,6 +157,92 @@ describe('<AiChat> conversationId threading (Step 5.15)', () => {
     const parsedBody = JSON.parse(init.body as string)
     expect(parsedBody.conversationId).toBe('conv-body-xyz')
   })
+
+  it('hydrates the transcript from server storage for an existing conversation', async () => {
+    const originalFetch = globalThis.fetch
+    const fetchMock = jest.fn(async () => ({
+      ok: true,
+      status: 200,
+      json: async () => ({
+        conversation: {
+          conversationId: 'conv-server-xyz',
+          agentId: 'customers.account_assistant',
+          title: null,
+          status: 'open',
+          visibility: 'private',
+          pageContext: null,
+          createdAt: '2026-05-18T10:00:00.000Z',
+          updatedAt: '2026-05-18T10:00:00.000Z',
+          lastMessageAt: '2026-05-18T10:00:00.000Z',
+          importedFromLocalAt: null,
+        },
+        messages: [
+          {
+            id: 'server-msg-1',
+            clientMessageId: 'client-msg-1',
+            role: 'user',
+            content: 'Server question',
+            uiParts: [],
+            attachmentIds: ['att-image-1'],
+            files: [
+              {
+                name: 'IMG_5328.JPEG',
+                mimeType: 'image/jpeg',
+              },
+            ],
+            model: null,
+            metadata: null,
+            createdAt: '2026-05-18T10:00:00.000Z',
+          },
+          {
+            id: 'server-msg-2',
+            clientMessageId: 'client-msg-2',
+            role: 'assistant',
+            content: 'Server answer',
+            uiParts: [],
+            attachmentIds: [],
+            files: [],
+            model: null,
+            metadata: null,
+            createdAt: '2026-05-18T10:00:01.000Z',
+          },
+        ],
+        nextCursor: null,
+      }),
+    })) as unknown as typeof fetch
+    globalThis.fetch = fetchMock
+
+    try {
+      renderWithProviders(
+        <AiChat agent="customers.account_assistant" conversationId="conv-server-xyz" />,
+        { dict },
+      )
+
+      expect(await screen.findByText('Server question')).toBeInTheDocument()
+      const image = await screen.findByRole('img', { name: 'IMG_5328.JPEG' })
+      expect(image).toHaveAttribute(
+        'src',
+        '/api/attachments/image/att-image-1?width=320&height=320&cropType=contain',
+      )
+      const download = screen.getByLabelText('Download IMG_5328.JPEG')
+      expect(download).toHaveAttribute(
+        'href',
+        '/api/attachments/file/att-image-1?download=1',
+      )
+      fireEvent.click(image)
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      expect(screen.getByRole('heading', { name: 'IMG_5328.JPEG' })).toBeInTheDocument()
+      const images = screen.getAllByRole('img', { name: 'IMG_5328.JPEG' })
+      expect(images[1]).toHaveAttribute('src', '/api/attachments/image/att-image-1')
+      expect(await screen.findByText('Server answer')).toBeInTheDocument()
+      expect(fetchMock).toHaveBeenCalledWith(
+        '/api/ai_assistant/ai/conversations/conv-server-xyz?limit=100',
+        expect.objectContaining({ credentials: 'include' }),
+      )
+    } finally {
+      globalThis.fetch = originalFetch
+    }
+  })
 })
 
 // <AiChat> mounts useAgentModels (Phase 4b) which hits /api/ai_assistant/ai/agents/<id>/models

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

@@ -185,6 +185,19 @@ function createErrorResponse(status: number, payload: Record<string, unknown>):
 describe('<AiChat>', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    const apiCallMock = apiCall as unknown as jest.Mock
+    apiCallMock.mockReset()
+    apiCallMock.mockResolvedValue({
+      ok: true,
+      status: 200,
+      result: {
+        agentId: 'customers.account_assistant',
+        allowRuntimeModelOverride: false,
+        defaultProviderId: 'openai',
+        defaultModelId: 'gpt-5-mini',
+        providers: [],
+      },
+    })
     window.localStorage.clear()
     lastResizeObserver = null
   })
@@ -238,7 +251,9 @@ describe('<AiChat>', () => {
         'Default: openai / gpt-5-mini',
       )
     })
-    expect(window.localStorage.getItem('om-ai-model-picker:customers.account_assistant')).toBeNull()
+    await waitFor(() => {
+      expect(window.localStorage.getItem('om-ai-model-picker:customers.account_assistant')).toBeNull()
+    })
   })
 
   it('does not send provider or model overrides while the model picker is on Default', async () => {
@@ -293,7 +308,7 @@ describe('<AiChat>', () => {
     expect(parsedUrl.searchParams.get('agent')).toBe('customers.deal_analyzer')
     expect(parsedUrl.searchParams.has('provider')).toBe(false)
     expect(parsedUrl.searchParams.has('model')).toBe(false)
-  })
+  }, 15_000)
 
   it('renders a compact footer before a constrained host is measured', async () => {
     const apiCallMock = apiCall as unknown as jest.Mock

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

@@ -0,0 +1,29 @@
+import { listAiServerConversations } from '../conversation-store'
+
+describe('AI conversation store', () => {
+  const originalFetch = global.fetch
+
+  afterEach(() => {
+    global.fetch = originalFetch
+    jest.restoreAllMocks()
+  })
+
+  it('suppresses auth redirects for optional conversation sync calls', async () => {
+    const fetchMock = jest.fn(async () => new Response(JSON.stringify({ error: 'Forbidden' }), { status: 403 }))
+    global.fetch = fetchMock as unknown as typeof fetch
+
+    await expect(listAiServerConversations({ limit: 100 })).resolves.toBeNull()
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/ai_assistant/ai/conversations?limit=100',
+      expect.objectContaining({
+        credentials: 'include',
+        headers: expect.objectContaining({
+          Accept: 'application/json',
+          'x-om-forbidden-redirect': '0',
+          'x-om-unauthorized-redirect': '0',
+        }),
+      }),
+    )
+  })
+})

package/src/ai/conversation-store.ts

@@ -0,0 +1,246 @@
+"use client"
+
+import type { AiChatMessage, AiChatMessageUiPart } from './useAiChat'
+
+const CONVERSATIONS_ENDPOINT = '/api/ai_assistant/ai/conversations'
+
+export interface AiServerConversation {
+  conversationId: string
+  agentId: string
+  title: string | null
+  status: 'open' | 'closed'
+  visibility: 'private' | 'shared' | 'organization'
+  pageContext: Record<string, unknown> | null
+  createdAt: string
+  updatedAt: string
+  lastMessageAt: string | null
+  importedFromLocalAt: string | null
+}
+
+export interface AiServerMessage {
+  id: string
+  clientMessageId: string | null
+  role: 'user' | 'assistant' | 'system'
+  content: string
+  uiParts: unknown[]
+  attachmentIds: string[]
+  files: Array<Record<string, unknown>>
+  model: string | null
+  metadata: Record<string, unknown> | null
+  createdAt: string
+}
+
+export interface AiServerConversationListResponse {
+  items: AiServerConversation[]
+  nextCursor: string | null
+}
+
+export interface AiServerTranscriptResponse {
+  conversation: AiServerConversation
+  messages: AiServerMessage[]
+  nextCursor: string | null
+}
+
+export interface AiServerImportResponse {
+  conversation: AiServerConversation
+  importedMessageCount: number
+  skippedMessageCount: number
+}
+
+function readString(value: unknown): string | null {
+  return typeof value === 'string' && value.length > 0 ? value : null
+}
+
+function buildAttachmentImagePreviewUrl(attachmentId: string): string {
+  const params = new URLSearchParams({
+    width: '320',
+    height: '320',
+    cropType: 'contain',
+  })
+  return `/api/attachments/image/${encodeURIComponent(attachmentId)}?${params.toString()}`
+}
+
+function getFetch(): typeof fetch | null {
+  const fetchImpl = (globalThis as typeof globalThis & { fetch?: typeof fetch }).fetch
+  return typeof fetchImpl === 'function' ? fetchImpl.bind(globalThis) : null
+}
+
+async function requestJson<T>(
+  input: string,
+  init?: RequestInit,
+): Promise<{ ok: true; status: number; data: T } | { ok: false; status: number; data: null }> {
+  const fetchImpl = getFetch()
+  if (!fetchImpl) return { ok: false, status: 0, data: null }
+  try {
+    const response = await fetchImpl(input, {
+      credentials: 'include',
+      ...init,
+      headers: {
+        Accept: 'application/json',
+        'x-om-forbidden-redirect': '0',
+        'x-om-unauthorized-redirect': '0',
+        ...(init?.body ? { 'Content-Type': 'application/json' } : {}),
+        ...(init?.headers ?? {}),
+      },
+    })
+    if (!response.ok) return { ok: false, status: response.status, data: null }
+    return { ok: true, status: response.status, data: (await response.json()) as T }
+  } catch {
+    return { ok: false, status: 0, data: null }
+  }
+}
+
+export async function listAiServerConversations(options: {
+  agentId?: string | null
+  status?: 'open' | 'closed' | null
+  limit?: number
+} = {}): Promise<AiServerConversation[] | null> {
+  const params = new URLSearchParams()
+  if (options.agentId) params.set('agent', options.agentId)
+  if (options.status) params.set('status', options.status)
+  params.set('limit', String(options.limit ?? 100))
+  const result = await requestJson<AiServerConversationListResponse>(
+    `${CONVERSATIONS_ENDPOINT}?${params.toString()}`,
+  )
+  return result.ok ? result.data.items : null
+}
+
+export async function createAiServerConversation(input: {
+  agentId: string
+  conversationId: string
+  title?: string | null
+  pageContext?: Record<string, unknown> | null
+}): Promise<AiServerConversation | null> {
+  const result = await requestJson<AiServerConversation>(CONVERSATIONS_ENDPOINT, {
+    method: 'POST',
+    body: JSON.stringify({
+      agentId: input.agentId,
+      conversationId: input.conversationId,
+      title: input.title ?? undefined,
+      pageContext: input.pageContext ?? undefined,
+    }),
+  })
+  return result.ok ? result.data : null
+}
+
+export async function updateAiServerConversation(
+  conversationId: string,
+  patch: {
+    title?: string | null
+    status?: 'open' | 'closed'
+    pageContext?: Record<string, unknown> | null
+  },
+): Promise<AiServerConversation | null> {
+  const result = await requestJson<AiServerConversation>(
+    `${CONVERSATIONS_ENDPOINT}/${encodeURIComponent(conversationId)}`,
+    {
+      method: 'PATCH',
+      body: JSON.stringify(patch),
+    },
+  )
+  return result.ok ? result.data : null
+}
+
+export async function loadAiServerTranscript(
+  conversationId: string,
+  options: { limit?: number } = {},
+): Promise<AiServerTranscriptResponse | null> {
+  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
+}
+
+export async function importAiLocalConversation(input: {
+  agentId: string
+  conversationId: string
+  title?: string | null
+  status?: 'open' | 'closed'
+  pageContext?: Record<string, unknown> | null
+  messages: AiChatMessage[]
+}): Promise<AiServerImportResponse | null> {
+  const result = await requestJson<AiServerImportResponse>(`${CONVERSATIONS_ENDPOINT}/import`, {
+    method: 'POST',
+    body: JSON.stringify({
+      conversation: {
+        conversationId: input.conversationId,
+        agentId: input.agentId,
+        title: input.title ?? undefined,
+        status: input.status ?? 'open',
+        pageContext: input.pageContext ?? undefined,
+      },
+      messages: input.messages.slice(-100).map((message) => ({
+        clientMessageId: message.id,
+        role: message.role,
+        content: message.content,
+        uiParts: message.uiParts ?? [],
+        files: (message.files ?? []).map((file) => ({
+          id: file.id,
+          name: file.name,
+          mimeType: file.type,
+        })),
+      })),
+    }),
+  })
+  return result.ok ? result.data : null
+}
+
+export function serverMessageToChatMessage(message: AiServerMessage): AiChatMessage | null {
+  if (message.role !== 'user' && message.role !== 'assistant') return null
+  const uiParts: AiChatMessageUiPart[] = []
+  message.uiParts.forEach((part, index) => {
+    if (!part || typeof part !== 'object') return
+    const value = part as Record<string, unknown>
+    const componentId =
+      typeof value.componentId === 'string'
+        ? value.componentId
+        : typeof value.type === 'string'
+          ? value.type
+          : null
+    if (!componentId) return
+    uiParts.push({
+      componentId,
+      payload: value.payload ?? value.props,
+      pendingActionId:
+        typeof value.pendingActionId === 'string' ? value.pendingActionId : undefined,
+      key:
+        typeof value.key === 'string'
+          ? value.key
+          : `${message.id}:${index}:${componentId}`,
+    })
+  })
+  return {
+    id: message.clientMessageId ?? message.id,
+    role: message.role,
+    content: message.content,
+    files: message.files
+      .map((file, index) => {
+        const name = readString(file.name)
+        if (!name) return null
+        const type =
+          typeof file.mimeType === 'string'
+            ? file.mimeType
+            : typeof file.type === 'string'
+              ? file.type
+              : 'application/octet-stream'
+        const id = readString(file.id) ?? readString(message.attachmentIds[index])
+        const rawPreviewUrl =
+          readString(file.previewUrl) ??
+          readString(file.thumbnailUrl) ??
+          readString(file.url)
+        const previewUrl = type.startsWith('image/')
+          ? rawPreviewUrl ?? (id ? buildAttachmentImagePreviewUrl(id) : undefined)
+          : undefined
+        return {
+          ...(id ? { id } : {}),
+          name,
+          type,
+          ...(previewUrl ? { previewUrl } : {}),
+        }
+      })
+      .filter((file): file is NonNullable<AiChatMessage['files']>[number] => file !== null),
+    uiParts,
+  }
+}

package/src/ai/parts/MutationPreviewCard.tsx

@@ -180,6 +180,7 @@ export function MutationPreviewCard(props: MutationPreviewCardProps) {
 
   const batch = Array.isArray(action?.records) && action!.records!.length > 0 ? action!.records! : null
   const summary = batch ? summarizeBatch(batch) : null
+  const hasReviewDetails = Boolean(batch)
 
   return (
     <section
@@ -242,7 +243,7 @@ export function MutationPreviewCard(props: MutationPreviewCardProps) {
         )}
       </div>
 
-      {expanded ? (
+      {expanded && hasReviewDetails ? (
         <div className="mt-3 rounded-md border border-border bg-muted/20 p-3" data-ai-mutation-preview-details>
           <FieldDiffCard
             fieldDiff={action?.fieldDiff ?? null}
@@ -252,25 +253,29 @@ export function MutationPreviewCard(props: MutationPreviewCardProps) {
       ) : null}
 
       <div className="mt-3 flex items-center justify-between gap-2">
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={() => setExpanded((value) => !value)}
-          data-ai-mutation-preview-review
-        >
-          <Eye className="size-4" aria-hidden />
-          <span>
-            {t(
-              'ai_assistant.chat.mutation_cards.preview.reviewDetails',
-              'Review details',
-            )}
-          </span>
-          <ChevronDown
-            className={`size-4 transition-transform ${expanded ? 'rotate-180' : ''}`}
-            aria-hidden
-          />
-        </Button>
+        {hasReviewDetails ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setExpanded((value) => !value)}
+            data-ai-mutation-preview-review
+          >
+            <Eye className="size-4" aria-hidden />
+            <span>
+              {t(
+                'ai_assistant.chat.mutation_cards.preview.reviewDetails',
+                'Review details',
+              )}
+            </span>
+            <ChevronDown
+              className={`size-4 transition-transform ${expanded ? 'rotate-180' : ''}`}
+              aria-hidden
+            />
+          </Button>
+        ) : (
+          <span aria-hidden />
+        )}
         <div className="flex items-center gap-2">
           <Button
             type="button"