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

package/src/ai/conversation-store.ts

@@ -0,0 +1,244 @@
+"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',
+        ...(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/useAiChat.ts

@@ -4,6 +4,12 @@ import * as React from 'react'
 import { createAiAgentTransport } from '@open-mercato/ai-assistant/modules/ai_assistant/lib/agent-transport'
 import { apiFetch } from '../backend/utils/api'
 import type { LoopTracePanelTrace } from './LoopTracePanel'
+import {
+  createAiServerConversation,
+  importAiLocalConversation,
+  loadAiServerTranscript,
+  serverMessageToChatMessage,
+} from './conversation-store'
 
 /**
  * Chat message shape used by {@link AiChat}. Kept intentionally minimal so the
@@ -12,6 +18,7 @@ import type { LoopTracePanelTrace } from './LoopTracePanel'
  * shape for `messages`.
  */
 export interface AiChatMessageFile {
+  id?: string
   name: string
   type: string
   previewUrl?: string
@@ -166,6 +173,7 @@ function makeConversationId(): string {
 }
 
 const SESSION_STORAGE_PREFIX = 'om-ai-chat:'
+const SESSION_IMPORT_MARKER_PREFIX = 'om-ai-chat-imported:'
 const SESSION_STORAGE_VERSION = 1
 const SESSION_UPDATED_EVENT = 'om-ai-chat-session-updated'
 const SESSION_STREAM_STATE_EVENT = 'om-ai-chat-session-stream-state'
@@ -247,19 +255,20 @@ function writePersistedSession(
   if (typeof window === 'undefined') return
   try {
     // Strip transient blob/object preview URLs before persisting (they would
-    // not survive a reload). Self-contained `data:` URLs are kept so image
-    // previews come back unchanged after the chat is reopened — public
-    // attachment URLs are intentionally not used because the LLM provider
-    // cannot reach a localhost origin and we want a single durable shape
-    // that works for both transport and reload.
+    // not survive a reload). Self-contained `data:` URLs and same-origin
+    // attachment thumbnail URLs are durable enough for local fallback storage.
     const messages = session.messages.map((message) => {
       if (!message.files || message.files.length === 0) return message
-      const safeFiles = message.files.map(({ name, type, previewUrl }) => {
+      const safeFiles = message.files.map(({ id, name, type, previewUrl }) => {
         const durable =
-          typeof previewUrl === 'string' && previewUrl.startsWith('data:')
+          typeof previewUrl === 'string' &&
+          (previewUrl.startsWith('data:') ||
+            previewUrl.startsWith('/api/attachments/image/') ||
+            previewUrl.startsWith('/api/attachments/file/'))
             ? previewUrl
             : undefined
-        return durable ? { name, type, previewUrl: durable } : { name, type }
+        const base = id ? { id, name, type } : { name, type }
+        return durable ? { ...base, previewUrl: durable } : base
       })
       return { ...message, files: safeFiles }
     })
@@ -286,6 +295,28 @@ function clearPersistedSession(agent: string, conversationId?: string | null): v
   }
 }
 
+function getImportMarkerKey(agent: string, conversationId: string): string {
+  return `${SESSION_IMPORT_MARKER_PREFIX}${agent}:${conversationId}`
+}
+
+function hasImportMarker(agent: string, conversationId: string): boolean {
+  if (typeof window === 'undefined') return false
+  try {
+    return window.localStorage.getItem(getImportMarkerKey(agent, conversationId)) === '1'
+  } catch {
+    return false
+  }
+}
+
+function writeImportMarker(agent: string, conversationId: string): void {
+  if (typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(getImportMarkerKey(agent, conversationId), '1')
+  } catch {
+    // ignore local marker failures; the server import remains authoritative
+  }
+}
+
 function getTransportEndpoint(
   agent: string,
   apiPath?: string,
@@ -802,14 +833,19 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
   // Without this, closing the dock or switching agents while the assistant
   // is "Thinking" abandons the partial reply (issue #1816).
   const latestMessagesRef = React.useRef<AiChatMessage[]>(messages)
+  const latestStatusRef = React.useRef<'idle' | 'submitting' | 'streaming'>(status)
   const persistKeyRef = React.useRef<string | null>(null)
   const agentRef = React.useRef<string>(agent)
+  const pageContextRef = React.useRef<Record<string, unknown> | undefined>(pageContext)
   const effectiveConversationIdRef = React.useRef<string>(effectiveConversationId)
   const sessionStorageKeyRef = React.useRef<string>(sessionStorageKey)
   const mountedRef = React.useRef(true)
   React.useEffect(() => {
     latestMessagesRef.current = messages
   }, [messages])
+  React.useEffect(() => {
+    latestStatusRef.current = status
+  }, [status])
   React.useEffect(() => {
     persistKeyRef.current =
       typeof conversationIdInput === 'string' && conversationIdInput.length > 0
@@ -819,6 +855,9 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
   React.useEffect(() => {
     agentRef.current = agent
   }, [agent])
+  React.useEffect(() => {
+    pageContextRef.current = pageContext
+  }, [pageContext])
   React.useEffect(() => {
     effectiveConversationIdRef.current = effectiveConversationId
   }, [effectiveConversationId])
@@ -874,6 +913,53 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
     [persistSnapshot],
   )
 
+  React.useEffect(() => {
+    let cancelled = false
+    const localCandidate = readPersistedSession(agent, persistKey)
+
+    async function hydrateFromServer(): Promise<void> {
+      const transcript = await loadAiServerTranscript(effectiveConversationId, { limit: 100 })
+      if (cancelled || latestStatusRef.current !== 'idle') return
+
+      if (transcript) {
+        const serverMessages = transcript.messages
+          .map(serverMessageToChatMessage)
+          .filter((message): message is AiChatMessage => message !== null)
+        if (serverMessages.length > 0 || !localCandidate || localCandidate.messages.length === 0) {
+          updateMessages(serverMessages)
+          if (serverMessages.length > 0) persistSnapshot(serverMessages, true)
+          return
+        }
+      }
+
+      if (!localCandidate || localCandidate.messages.length === 0) {
+        if (!transcript) {
+          void createAiServerConversation({
+            agentId: agent,
+            conversationId: effectiveConversationId,
+            pageContext: pageContextRef.current ?? null,
+          })
+        }
+        return
+      }
+
+      if (hasImportMarker(agent, effectiveConversationId)) return
+      const imported = await importAiLocalConversation({
+        agentId: agent,
+        conversationId: effectiveConversationId,
+        pageContext: pageContextRef.current ?? null,
+        messages: localCandidate.messages,
+      })
+      if (cancelled || !imported) return
+      writeImportMarker(agent, effectiveConversationId)
+    }
+
+    void hydrateFromServer()
+    return () => {
+      cancelled = true
+    }
+  }, [agent, effectiveConversationId, persistKey, persistSnapshot, updateMessages])
+
   const setStatus = React.useCallback((next: 'idle' | 'submitting' | 'streaming') => {
     if (mountedRef.current) {
       setStatusInternal(next)
@@ -961,8 +1047,11 @@ export function useAiChat(input: UseAiChatInput): UseAiChatResult {
       const url = getTransportEndpoint(agent, apiPath, providerOverride, modelOverride)
       const body = {
         messages: outgoingHistory.map((message) => ({
+          id: message.id,
           role: message.role,
           content: message.content,
+          files: message.files,
+          uiParts: message.uiParts,
         })),
         pageContext,
         attachmentIds,

package/src/backend/AuthSessionGuard.tsx

@@ -0,0 +1,114 @@
+'use client'
+import * as React from 'react'
+import { apiCall } from './utils/apiCall'
+
+export const AUTH_IDENTITY_STORAGE_KEY = 'om:auth:identity'
+export const AUTH_IDENTITY_BROADCAST_CHANNEL = 'om-auth-identity'
+
+type FeatureCheckResponse = {
+  ok: boolean
+  granted?: string[]
+  userId?: string
+}
+
+export type AuthSessionGuardProps = {
+  serverUserId: string | null
+}
+
+export const __reload = {
+  fn: (): void => {
+    if (typeof window !== 'undefined') window.location.reload()
+  },
+}
+
+export function AuthSessionGuard({ serverUserId }: AuthSessionGuardProps) {
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    let cancelled = false
+    let reloadScheduled = false
+
+    const triggerReload = () => {
+      if (reloadScheduled) return
+      reloadScheduled = true
+      __reload.fn()
+    }
+
+    const checkIdentity = async () => {
+      if (cancelled || reloadScheduled) return
+      try {
+        const res = await apiCall<FeatureCheckResponse>('/api/auth/feature-check', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ features: [] }),
+          cache: 'no-store',
+        })
+        if (cancelled || reloadScheduled) return
+        if (res.status === 401) {
+          if (serverUserId) triggerReload()
+          return
+        }
+        if (!res.ok) return
+        const currentUserId = typeof res.result?.userId === 'string' ? res.result.userId : null
+        if (!currentUserId) return
+        if (currentUserId !== serverUserId) triggerReload()
+      } catch {
+        // network errors are ignored — next focus/storage event retries
+      }
+    }
+
+    const onVisibilityOrFocus = () => {
+      if (typeof document !== 'undefined' && document.visibilityState === 'hidden') return
+      void checkIdentity()
+    }
+
+    const onStorage = (event: StorageEvent) => {
+      if (event.key !== AUTH_IDENTITY_STORAGE_KEY) return
+      void checkIdentity()
+    }
+
+    let broadcastChannel: BroadcastChannel | null = null
+    if (typeof BroadcastChannel !== 'undefined') {
+      try {
+        broadcastChannel = new BroadcastChannel(AUTH_IDENTITY_BROADCAST_CHANNEL)
+        broadcastChannel.onmessage = () => { void checkIdentity() }
+      } catch {
+        broadcastChannel = null
+      }
+    }
+
+    window.addEventListener('focus', onVisibilityOrFocus)
+    document.addEventListener('visibilitychange', onVisibilityOrFocus)
+    window.addEventListener('storage', onStorage)
+
+    return () => {
+      cancelled = true
+      window.removeEventListener('focus', onVisibilityOrFocus)
+      document.removeEventListener('visibilitychange', onVisibilityOrFocus)
+      window.removeEventListener('storage', onStorage)
+      if (broadcastChannel) {
+        broadcastChannel.onmessage = null
+        broadcastChannel.close()
+      }
+    }
+  }, [serverUserId])
+
+  return null
+}
+
+export function notifyAuthIdentityChange(): void {
+  if (typeof window === 'undefined') return
+  try {
+    if (typeof BroadcastChannel !== 'undefined') {
+      const channel = new BroadcastChannel(AUTH_IDENTITY_BROADCAST_CHANNEL)
+      channel.postMessage('changed')
+      channel.close()
+    }
+  } catch {
+    // ignore — fall back to storage event below
+  }
+  try {
+    window.localStorage.setItem(AUTH_IDENTITY_STORAGE_KEY, String(Date.now()))
+  } catch {
+    // private mode / quota errors are non-fatal
+  }
+}

package/src/backend/__tests__/AuthSessionGuard.test.tsx

@@ -0,0 +1,150 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, render, waitFor } from '@testing-library/react'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import {
+  __reload,
+  AUTH_IDENTITY_STORAGE_KEY,
+  AuthSessionGuard,
+  notifyAuthIdentityChange,
+} from '../AuthSessionGuard'
+
+jest.mock('@open-mercato/ui/backend/utils/apiCall', () => ({
+  apiCall: jest.fn(),
+}))
+
+const apiCallMock = apiCall as jest.MockedFunction<typeof apiCall>
+
+const originalReload = __reload.fn
+
+function mockLocationReload() {
+  const reloadSpy = jest.fn()
+  __reload.fn = reloadSpy
+  return reloadSpy
+}
+
+function restoreLocation() {
+  __reload.fn = originalReload
+}
+
+function makeApiResult(payload: { status?: number; userId?: string | null }) {
+  const status = payload.status ?? 200
+  return {
+    ok: status >= 200 && status < 300,
+    status,
+    result: payload.userId !== undefined ? { ok: true, granted: [], userId: payload.userId } : null,
+    response: { ok: status < 400, status } as unknown as Response,
+    cacheStatus: null,
+  }
+}
+
+describe('AuthSessionGuard', () => {
+  beforeEach(() => {
+    apiCallMock.mockReset()
+  })
+
+  afterEach(() => {
+    restoreLocation()
+  })
+
+  it('reloads when the cookie identity differs from the server-rendered identity', async () => {
+    const reload = mockLocationReload()
+    apiCallMock.mockResolvedValue(makeApiResult({ userId: 'admin-id' }))
+
+    render(<AuthSessionGuard serverUserId="employee-id" />)
+
+    await act(async () => {
+      window.dispatchEvent(new Event('focus'))
+    })
+
+    await waitFor(() => {
+      expect(reload).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('reloads when the cookie session has been cleared but the page still has a user', async () => {
+    const reload = mockLocationReload()
+    apiCallMock.mockResolvedValue(makeApiResult({ status: 401 }))
+
+    render(<AuthSessionGuard serverUserId="employee-id" />)
+
+    await act(async () => {
+      window.dispatchEvent(new Event('focus'))
+    })
+
+    await waitFor(() => {
+      expect(reload).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('does not reload when the cookie identity still matches', async () => {
+    const reload = mockLocationReload()
+    apiCallMock.mockResolvedValue(makeApiResult({ userId: 'employee-id' }))
+
+    render(<AuthSessionGuard serverUserId="employee-id" />)
+
+    await act(async () => {
+      window.dispatchEvent(new Event('focus'))
+    })
+
+    await waitFor(() => {
+      expect(apiCallMock).toHaveBeenCalled()
+    })
+    expect(reload).not.toHaveBeenCalled()
+  })
+
+  it('does not poll while the tab is hidden', async () => {
+    mockLocationReload()
+    apiCallMock.mockResolvedValue(makeApiResult({ userId: 'employee-id' }))
+
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      get: () => 'hidden',
+    })
+
+    render(<AuthSessionGuard serverUserId="employee-id" />)
+
+    await act(async () => {
+      document.dispatchEvent(new Event('visibilitychange'))
+    })
+
+    expect(apiCallMock).not.toHaveBeenCalled()
+
+    Object.defineProperty(document, 'visibilityState', {
+      configurable: true,
+      get: () => 'visible',
+    })
+  })
+
+  it('reacts to cross-tab storage broadcasts', async () => {
+    const reload = mockLocationReload()
+    apiCallMock.mockResolvedValue(makeApiResult({ userId: 'admin-id' }))
+
+    render(<AuthSessionGuard serverUserId="employee-id" />)
+
+    await act(async () => {
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: AUTH_IDENTITY_STORAGE_KEY,
+          newValue: String(Date.now()),
+        }),
+      )
+    })
+
+    await waitFor(() => {
+      expect(reload).toHaveBeenCalledTimes(1)
+    })
+  })
+})
+
+describe('notifyAuthIdentityChange', () => {
+  it('writes a sentinel value to localStorage so other tabs receive a storage event', () => {
+    const setItemSpy = jest.spyOn(window.localStorage.__proto__, 'setItem')
+    notifyAuthIdentityChange()
+    expect(setItemSpy).toHaveBeenCalledWith(AUTH_IDENTITY_STORAGE_KEY, expect.any(String))
+    setItemSpy.mockRestore()
+  })
+})