@open-mercato/ui 0.6.2-develop.3446.1.bd060c6017 → 0.6.2-develop.3467.1.2a1818709d

package/src/ai/AiChat.tsx

@@ -16,12 +16,14 @@ import {
   CircleDashed,
   Copy,
   Database,
+  Download,
   FileQuestion,
   GitBranch,
   Handshake,
   Lightbulb,
   ListChecks,
   Loader2,
+  Maximize2,
   Paperclip,
   Plus,
   Search,
@@ -38,6 +40,13 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
 import { Alert, AlertDescription, AlertTitle } from '../primitives/alert'
 import { Button } from '../primitives/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../primitives/dialog'
 import { IconButton } from '../primitives/icon-button'
 import { Label } from '../primitives/label'
 import { Textarea } from '../primitives/textarea'
@@ -638,6 +647,128 @@ function ReasoningPanel({ text, streaming }: { text: string; streaming: boolean
   )
 }
 
+function getAttachmentImageUrl(file: AiChatMessageFile): string | null {
+  if (file.id) return `/api/attachments/image/${encodeURIComponent(file.id)}`
+  return file.previewUrl ?? null
+}
+
+function getAttachmentDownloadUrl(file: AiChatMessageFile): string | null {
+  if (file.id) return `/api/attachments/file/${encodeURIComponent(file.id)}?download=1`
+  return file.previewUrl ?? null
+}
+
+function MessageFileAttachment({ file }: { file: AiChatMessageFile }) {
+  const t = useT()
+  const [zoomOpen, setZoomOpen] = React.useState(false)
+  const imageUrl = file.previewUrl ? getAttachmentImageUrl(file) : null
+  const downloadUrl = getAttachmentDownloadUrl(file)
+  const downloadLabel = t('ai_assistant.chat.downloadFile', 'Download {name}').replace(
+    '{name}',
+    file.name,
+  )
+  const zoomLabel = t('ai_assistant.chat.zoomImage', 'Open {name} preview').replace(
+    '{name}',
+    file.name,
+  )
+
+  if (!file.previewUrl) {
+    return (
+      <span className="inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs">
+        <Paperclip className="size-3 shrink-0" aria-hidden />
+        <span className="max-w-[180px] truncate">{file.name}</span>
+        {downloadUrl ? (
+          <IconButton
+            asChild
+            variant="ghost"
+            size="xs"
+            className="-mr-1 size-5 shrink-0"
+          >
+            <a href={downloadUrl} download={file.name} aria-label={downloadLabel}>
+              <Download className="size-3" aria-hidden />
+            </a>
+          </IconButton>
+        ) : null}
+      </span>
+    )
+  }
+
+  return (
+    <>
+      <div className="group/file relative max-w-full">
+        <button
+          type="button"
+          className="block max-w-full rounded-md border border-border bg-muted/30 focus-visible:outline-none focus-visible:shadow-focus"
+          onClick={() => setZoomOpen(true)}
+          aria-label={zoomLabel}
+          data-ai-chat-image-preview=""
+        >
+          <img
+            src={file.previewUrl}
+            alt={file.name}
+            className="max-h-32 max-w-[200px] rounded-md object-cover"
+          />
+          <span className="pointer-events-none absolute right-1 top-1 inline-flex size-6 items-center justify-center rounded-md bg-background/90 text-muted-foreground opacity-0 shadow-xs transition-opacity group-hover/file:opacity-100 group-focus-within/file:opacity-100">
+            <Maximize2 className="size-3.5" aria-hidden />
+          </span>
+        </button>
+        {downloadUrl ? (
+          <IconButton
+            asChild
+            variant="white"
+            size="xs"
+            className="absolute bottom-1 right-1 opacity-0 shadow-xs transition-opacity group-hover/file:opacity-100 group-focus-within/file:opacity-100"
+          >
+            <a
+              href={downloadUrl}
+              download={file.name}
+              aria-label={downloadLabel}
+              onClick={(event) => event.stopPropagation()}
+              data-ai-chat-file-download=""
+            >
+              <Download className="size-3.5" aria-hidden />
+            </a>
+          </IconButton>
+        ) : null}
+      </div>
+
+      <Dialog open={zoomOpen} onOpenChange={setZoomOpen}>
+        <DialogContent className="gap-3 p-4 sm:max-w-[min(96vw,960px)]">
+          <DialogHeader className="min-w-0 pr-16">
+            <DialogTitle className="truncate text-sm">{file.name}</DialogTitle>
+            <DialogDescription className="sr-only">
+              {t('ai_assistant.chat.imagePreviewDialogDescription', 'Image preview')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="relative flex min-h-0 items-center justify-center overflow-auto rounded-md bg-muted/30 p-2">
+            <img
+              src={imageUrl ?? file.previewUrl}
+              alt={file.name}
+              className="max-h-[75vh] max-w-full object-contain"
+            />
+            {downloadUrl ? (
+              <IconButton
+                asChild
+                variant="white"
+                size="sm"
+                className="absolute bottom-3 right-3 shadow-xs"
+              >
+                <a
+                  href={downloadUrl}
+                  download={file.name}
+                  aria-label={downloadLabel}
+                  data-ai-chat-file-download=""
+                >
+                  <Download className="size-4" aria-hidden />
+                </a>
+              </IconButton>
+            ) : null}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
+
 function MessageRow({
   message,
   registry,
@@ -737,24 +868,9 @@ function MessageRow({
         </div>
         {message.files && message.files.length > 0 ? (
           <div className="flex flex-wrap gap-2 py-1">
-            {message.files.map((file, i) =>
-              file.previewUrl ? (
-                <img
-                  key={i}
-                  src={file.previewUrl}
-                  alt={file.name}
-                  className="max-h-32 max-w-[200px] rounded-md border border-border object-cover"
-                />
-              ) : (
-                <span
-                  key={i}
-                  className="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs"
-                >
-                  <Paperclip className="size-3" aria-hidden />
-                  {file.name}
-                </span>
-              ),
-            )}
+            {message.files.map((file, i) => (
+              <MessageFileAttachment key={`${file.id ?? file.name}:${i}`} file={file} />
+            ))}
           </div>
         ) : null}
         {isAssistant && message.reasoning ? (
@@ -1030,10 +1146,9 @@ export function AiChat({
     attachmentId?: string
     /**
      * Base64 data URL of the image (capped by PREVIEW_DATA_URL_MAX_BYTES).
-     * Stored on the message so the preview survives a reload — durable
-     * server URLs were intentionally avoided because the LLM provider can
-     * never reach a localhost dev URL anyway, and HTTP fetches add latency
-     * the chat doesn't need.
+     * Stored on the local message for immediate previews; once the transcript
+     * is loaded from server storage the attachment id is used to rebuild a
+     * same-origin thumbnail URL.
      */
     previewDataUrl?: string
     error?: string
@@ -1255,6 +1370,7 @@ export function AiChat({
         const isImage = entry.file.type.startsWith('image/')
         const fallback = isImage ? URL.createObjectURL(entry.file) : undefined
         return {
+          id: entry.attachmentId,
           name: entry.file.name,
           type: entry.file.type,
           previewUrl: isImage ? (entry.previewDataUrl ?? fallback) : undefined,

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__/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