@open-mercato/ui 0.6.3-develop.3894.1.352abf4240 → 0.6.3

package/src/ai/AiChat.tsx

@@ -305,6 +305,18 @@ export interface AiChatProps {
   welcomeDescription?: string
   /** Initial compact composer state used before the footer has been measured. */
   defaultCompactFooter?: boolean
+  /** Optional extra action nodes rendered in the conversation header bar. */
+  headerActions?: React.ReactNode
+  /** Called once on mount (and on reset) with the effective conversation id. */
+  onConversationIdChange?: (conversationId: string) => void
+  /**
+   * Called when the server returns 404 for the active `conversationId`,
+   * e.g. when the id was carried over from a previous tenant/org scope
+   * and no longer exists. The host (typically the AI dock) should remove
+   * the corresponding session entry so the stale tab disappears instead
+   * of staying empty.
+   */
+  onConversationNotFound?: () => void
 }
 
 interface ServerEmittedUiPartRef {
@@ -773,16 +785,22 @@ function MessageRow({
   message,
   registry,
   onMutationRequested,
+  isOwner,
 }: {
   message: AiChatMessage
   registry?: AiUiPartRegistry
   onMutationRequested?: (pendingActionId: string) => void
+  /** Whether the current viewer owns the conversation. Used to label foreign user messages. */
+  isOwner?: boolean | null
 }) {
   const t = useT()
   const isAssistant = message.role === 'assistant'
+  const isOtherUsersMessage = !isAssistant && isOwner === false
   const label = isAssistant
     ? t('ai_assistant.chat.assistantRoleLabel', 'Assistant')
-    : t('ai_assistant.chat.userRoleLabel', 'You')
+    : isOtherUsersMessage
+      ? t('ai_assistant.chat.ownerRoleLabel', 'Owner')
+      : t('ai_assistant.chat.userRoleLabel', 'You')
   const Icon = isAssistant ? Bot : User
   const [copied, setCopied] = React.useState(false)
   const copyTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -1135,8 +1153,15 @@ export function AiChat({
   welcomeTitle,
   welcomeDescription,
   defaultCompactFooter = false,
+  headerActions,
+  onConversationIdChange,
+  onConversationNotFound,
 }: AiChatProps) {
   const t = useT()
+  const onConversationIdChangeRef = React.useRef(onConversationIdChange)
+  React.useLayoutEffect(() => {
+    onConversationIdChangeRef.current = onConversationIdChange
+  })
   const textareaRef = React.useRef<HTMLTextAreaElement | null>(null)
   const transcriptRef = React.useRef<HTMLDivElement | null>(null)
   const fileInputRef = React.useRef<HTMLInputElement | null>(null)
@@ -1261,12 +1286,17 @@ export function AiChat({
     conversationId,
     providerOverride: effectiveModelPickerValue?.providerId ?? null,
     modelOverride: effectiveModelPickerValue?.modelId ?? null,
+    onConversationNotFound,
   })
 
   const isStreaming = chat.status === 'streaming'
   const isSubmitting = chat.status === 'submitting'
   const isBusy = isStreaming || isSubmitting
 
+  React.useEffect(() => {
+    onConversationIdChangeRef.current?.(chat.conversationId)
+  }, [chat.conversationId])
+
   // Surface a "Thinking..." placeholder so the chat does not look frozen.
   // Visible whenever ANY of the following is true while a turn is in flight:
   //   (a) we're still in the submit phase before the first stream chunk
@@ -1569,6 +1599,7 @@ export function AiChat({
             </span>
           )}
         </div>
+        {headerActions ?? null}
         <IconButton
           type="button"
           variant="ghost"
@@ -1603,6 +1634,7 @@ export function AiChat({
               message={message}
               registry={activeRegistry}
               onMutationRequested={onMutationRequested}
+              isOwner={chat.isOwner}
             />
           ))
         )}
@@ -1639,8 +1671,16 @@ export function AiChat({
         </Alert>
       ) : null}
 
+      {chat.isOwner === false ? (
+        <div
+          className="flex items-center justify-center rounded-md border border-border bg-muted/30 px-3 py-3 text-xs text-muted-foreground"
+          data-ai-chat-read-only-notice=""
+        >
+          {t('ai_assistant.chat.readOnlyNotice', 'This is a shared conversation. You can read but not reply.')}
+        </div>
+      ) : null}
       <form
-        className="flex min-w-0 flex-col gap-2"
+        className={cn('flex min-w-0 flex-col gap-2', chat.isOwner === false && 'hidden')}
         onSubmit={(event) => {
           event.preventDefault()
           handleSubmit()

package/src/ai/AiChatSessions.tsx

@@ -20,6 +20,10 @@
  */
 
 import * as React from 'react'
+import {
+  getCurrentOrganizationScope,
+  subscribeOrganizationScopeChanged,
+} from '@open-mercato/shared/lib/frontend/organizationEvents'
 import {
   createAiServerConversation,
   listAiServerConversations,
@@ -27,9 +31,27 @@ import {
   type AiServerConversation,
 } from './conversation-store'
 
-const STORAGE_KEY = 'om-ai-chat-sessions-v1'
+/**
+ * Legacy app-global storage key used before tenant/org scoping.
+ *
+ * Kept only as a documented constant for grep / debugging. No code path
+ * reads or writes it any more — the legacy entry is intentionally
+ * abandoned (not migrated) because the origin scope of any data stored
+ * under this key is unknown; silently importing it into the wrong scope
+ * is worse than empty state. `listAiServerConversations` repopulates
+ * sessions from the authoritative server source on first load.
+ */
+export const LEGACY_STORAGE_KEY = 'om-ai-chat-sessions-v1'
+const STORAGE_KEY_PREFIX = 'om-ai-chat-sessions-v1'
 const HISTORY_LIMIT = 50
 
+function getScopedStorageKey(
+  tenantId: string | null | undefined,
+  organizationId: string | null | undefined,
+): string {
+  return `${STORAGE_KEY_PREFIX}:${tenantId ?? 'no-tenant'}:${organizationId ?? 'no-org'}`
+}
+
 export type AiChatSessionStatus = 'open' | 'closed'
 
 export interface AiChatSession {
@@ -86,10 +108,10 @@ function makeId(): string {
   return `${Date.now().toString(16)}-${rand()}-${rand()}`
 }
 
-function readPersisted(): AiChatSessionsState {
+function readPersisted(storageKey: string): AiChatSessionsState {
   if (typeof window === 'undefined') return { sessions: [], activeByAgent: {} }
   try {
-    const raw = window.localStorage.getItem(STORAGE_KEY)
+    const raw = window.localStorage.getItem(storageKey)
     if (!raw) return { sessions: [], activeByAgent: {} }
     const parsed = JSON.parse(raw) as Partial<AiChatSessionsState> | null
     const sessions = Array.isArray(parsed?.sessions)
@@ -130,10 +152,10 @@ function readPersisted(): AiChatSessionsState {
   }
 }
 
-function writePersisted(state: AiChatSessionsState): void {
+function writePersisted(storageKey: string, state: AiChatSessionsState): void {
   if (typeof window === 'undefined') return
   try {
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+    window.localStorage.setItem(storageKey, JSON.stringify(state))
   } catch {
     /* quota / privacy mode — drop silently */
   }
@@ -194,11 +216,34 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
   // server (no `window`), so SSR stays consistent with the bare-bones
   // shell — actual session-dependent UI only renders after a user
   // interaction opens a chat surface.
-  const [state, setState] = React.useState<AiChatSessionsState>(() => readPersisted())
+  //
+  // The storage key is scoped to the current tenant/organization so a
+  // scope switch in the topbar does not surface another tenant's
+  // sessions. `getCurrentOrganizationScope()` reads module-level state
+  // populated by the topbar before the provider mounts; a `null` scope
+  // (pre-resolution) lands in a harmless `no-tenant:no-org` bucket that
+  // the scope-change subscription below immediately corrects when the
+  // real scope arrives.
+  const [storageKey, setStorageKey] = React.useState<string>(() => {
+    const scope = getCurrentOrganizationScope()
+    return getScopedStorageKey(scope.tenantId, scope.organizationId)
+  })
+  const [state, setState] = React.useState<AiChatSessionsState>(() => readPersisted(storageKey))
+
+  React.useEffect(() => {
+    return subscribeOrganizationScopeChanged((detail) => {
+      const nextKey = getScopedStorageKey(detail.tenantId, detail.organizationId)
+      if (nextKey === storageKey) return
+      // React 18 batches both updates within the synchronous handler so
+      // there is no intermediate render with a mismatched key/state pair.
+      setStorageKey(nextKey)
+      setState(readPersisted(nextKey))
+    })
+  }, [storageKey])
 
   React.useEffect(() => {
-    writePersisted(state)
-  }, [state])
+    writePersisted(storageKey, state)
+  }, [storageKey, state])
 
   React.useEffect(() => {
     let cancelled = false
@@ -209,7 +254,7 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
     return () => {
       cancelled = true
     }
-  }, [])
+  }, [storageKey])
 
   const update = React.useCallback(
     (mutator: (prev: AiChatSessionsState) => AiChatSessionsState) => {
@@ -322,6 +367,7 @@ export function AiChatSessionsProvider({ children }: { children: React.ReactNode
       update((prev) => {
         const target = prev.sessions.find((s) => s.id === sessionId)
         if (!target || target.status !== 'open') return prev
+        if (prev.activeByAgent[target.agentId] === sessionId) return prev
         const sessions = prev.sessions.map((s) =>
           s.id === sessionId ? { ...s, lastUsedAt: Date.now() } : s,
         )

package/src/ai/AiDock.tsx

@@ -19,6 +19,7 @@ import { Maximize2, Minimize2, X } from 'lucide-react'
 import type { AiChatContextItem, AiChatSuggestion } from './AiChat'
 import { ChatPaneTabs } from './ChatPaneTabs'
 import { useAiChatSessions } from './AiChatSessions'
+import { ConversationShareButton } from './ConversationShareButton'
 import { IconButton } from '../primitives/icon-button'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
@@ -475,6 +476,16 @@ function DockedChatBody({ assistant }: { assistant: AiDockedAssistant }) {
     if (!session) sessions.ensureSession(assistant.agent)
   }, [assistant.agent, session, sessions])
 
+  const activeSessionId = session?.id ?? null
+  const handleConversationNotFound = React.useCallback(() => {
+    // The server returned 404 for this session's conversationId. The
+    // conversation does not exist in the current tenant/org scope (most
+    // commonly the user just switched scope and a stale id rode along in
+    // localStorage). Close the tab so the dock surfaces the empty state
+    // for the new scope rather than a perpetual blank chat.
+    if (activeSessionId) sessions.closeSession(activeSessionId)
+  }, [activeSessionId, sessions])
+
   return (
     <>
       <ChatPaneTabs agentId={assistant.agent} className="border-b" />
@@ -497,6 +508,8 @@ function DockedChatBody({ assistant }: { assistant: AiDockedAssistant }) {
               contextItems={assistant.contextItems}
               welcomeTitle={assistant.welcomeTitle}
               welcomeDescription={assistant.welcomeDescription}
+              headerActions={<ConversationShareButton conversationId={session.conversationId} />}
+              onConversationNotFound={handleConversationNotFound}
             />
           </React.Suspense>
         ) : null}

package/src/ai/ConversationShareButton.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import * as React from 'react'
+import { Share2 } from 'lucide-react'
+import { IconButton } from '../primitives/icon-button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { ConversationShareDialog } from './ConversationShareDialog'
+
+interface Props {
+  conversationId: string
+}
+
+export function ConversationShareButton({ conversationId }: Props) {
+  const t = useT()
+  const [dialogOpen, setDialogOpen] = React.useState(false)
+
+  return (
+    <>
+      <IconButton
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => setDialogOpen(true)}
+        aria-label={t('ai_assistant.share.shareButton', 'Share')}
+        title={t('ai_assistant.share.shareButton', 'Share')}
+        data-ai-chat-share-conversation=""
+      >
+        <Share2 className="size-4" aria-hidden />
+      </IconButton>
+      <ConversationShareDialog
+        open={dialogOpen}
+        onOpenChange={setDialogOpen}
+        conversationId={conversationId}
+      />
+    </>
+  )
+}
+
+export default ConversationShareButton

package/src/ai/ConversationShareDialog.tsx

@@ -0,0 +1,299 @@
+'use client'
+
+import * as React from 'react'
+import { UserPlus, X, Loader2 } from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../primitives/dialog'
+import { Button } from '../primitives/button'
+import { Input } from '../primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../primitives/select'
+import { apiCall } from '../backend/utils/apiCall'
+import { useCurrentUserId } from '../backend/utils/useCurrentUserId'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+interface Participant {
+  userId: string
+  role: string
+  lastReadAt: string | null
+  addedAt: string
+}
+
+interface UserOption {
+  id: string
+  email: string
+  name: string | null
+}
+
+interface Props {
+  open: boolean
+  onOpenChange: (next: boolean) => void
+  conversationId: string
+}
+
+export function ConversationShareDialog({ open, onOpenChange, conversationId }: Props) {
+  const t = useT()
+  const currentUserId = useCurrentUserId()
+  const [participants, setParticipants] = React.useState<Participant[]>([])
+  const [ownerUserId, setOwnerUserId] = React.useState<string | null>(null)
+  const [users, setUsers] = React.useState<UserOption[]>([])
+  const [canListUsers, setCanListUsers] = React.useState(true)
+  const [loading, setLoading] = React.useState(false)
+  const [loadingUsers, setLoadingUsers] = React.useState(false)
+  const [selectedUserId, setSelectedUserId] = React.useState('')
+  const [textUserId, setTextUserId] = React.useState('')
+  const [adding, setAdding] = React.useState(false)
+  const [removingId, setRemovingId] = React.useState<string | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+
+  const baseUrl = `/api/ai_assistant/ai/conversations/${conversationId}/participants`
+
+  const fetchParticipants = React.useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const res = await apiCall<{ participants: Participant[]; ownerUserId?: string | null }>(baseUrl)
+      if (!res.ok || !res.result) throw new Error('fetch failed')
+      setParticipants(res.result.participants.filter((p) => p.role !== 'owner'))
+      setOwnerUserId(res.result.ownerUserId ?? null)
+    } catch {
+      setError(t('common.error', 'Something went wrong.'))
+    } finally {
+      setLoading(false)
+    }
+  }, [conversationId, t])
+
+  const fetchUsers = React.useCallback(async () => {
+    setLoadingUsers(true)
+    try {
+      const res = await apiCall<{ items: UserOption[] }>('/api/auth/users?limit=200')
+      if (res.ok && res.result) {
+        setUsers(res.result.items)
+        setCanListUsers(true)
+      } else {
+        setCanListUsers(false)
+      }
+    } catch {
+      setCanListUsers(false)
+    } finally {
+      setLoadingUsers(false)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (open) {
+      setSelectedUserId('')
+      setTextUserId('')
+      setError(null)
+      void Promise.all([fetchParticipants(), fetchUsers()])
+    }
+  }, [open, fetchParticipants, fetchUsers])
+
+  const participantIds = React.useMemo(
+    () => new Set(participants.map((p) => p.userId)),
+    [participants],
+  )
+
+  const availableUsers = React.useMemo(
+    () =>
+      users.filter(
+        (u) => !participantIds.has(u.id) && u.id !== currentUserId && u.id !== ownerUserId,
+      ),
+    [users, participantIds, currentUserId, ownerUserId],
+  )
+
+  const activeUserId = canListUsers ? selectedUserId : textUserId.trim()
+
+  const handleAdd = React.useCallback(async () => {
+    if (!activeUserId) return
+    setAdding(true)
+    setError(null)
+    try {
+      const res = await apiCall<{ participant: Participant }>(baseUrl, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ userId: activeUserId, role: 'viewer' }),
+      })
+      if (!res.ok || !res.result) throw new Error('fetch failed')
+      setParticipants((prev) => {
+        const next = res.result!.participant
+        const exists = prev.find((p) => p.userId === next.userId)
+        if (exists) return prev.map((p) => (p.userId === next.userId ? next : p))
+        return [...prev, next]
+      })
+      setSelectedUserId('')
+      setTextUserId('')
+    } catch {
+      setError(t('common.error', 'Something went wrong.'))
+    } finally {
+      setAdding(false)
+    }
+  }, [activeUserId, baseUrl, t])
+
+  React.useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+        e.preventDefault()
+        if (activeUserId && !adding) void handleAdd()
+      }
+    }
+    if (open) document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [open, activeUserId, adding, handleAdd])
+
+  const handleRemove = async (userId: string) => {
+    setRemovingId(userId)
+    setError(null)
+    try {
+      await apiCall(`${baseUrl}/${userId}`, { method: 'DELETE', headers: { 'content-type': 'application/json' } })
+      setParticipants((prev) => prev.filter((p) => p.userId !== userId))
+    } catch {
+      setError(t('common.error', 'Something went wrong.'))
+    } finally {
+      setRemovingId(null)
+    }
+  }
+
+  const formatUserLabel = (u: UserOption) => (u.name ? `${u.name} — ${u.email}` : u.email)
+
+  const getUserLabel = (userId: string) => {
+    const u = users.find((u) => u.id === userId)
+    return u ? formatUserLabel(u) : userId
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {t('ai_assistant.share.dialogTitle', 'Share Conversation')}
+          </DialogTitle>
+          <DialogDescription>
+            {t(
+              'ai_assistant.share.dialogDescription',
+              'Share this conversation with other users. They will get read-only access.',
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex gap-2">
+            {canListUsers === false ? (
+              <Input
+                placeholder={t('ai_assistant.share.participantPlaceholder', 'User ID...')}
+                value={textUserId}
+                onChange={(e) => setTextUserId(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') { e.preventDefault(); void handleAdd() }
+                }}
+                className="flex-1"
+              />
+            ) : (
+              <Select
+                value={selectedUserId}
+                onValueChange={setSelectedUserId}
+                disabled={loadingUsers || availableUsers.length === 0}
+              >
+                <SelectTrigger className="flex-1">
+                  <SelectValue
+                    placeholder={
+                      loadingUsers
+                        ? t('common.loading', 'Loading...')
+                        : availableUsers.length === 0
+                          ? t('ai_assistant.share.allUsersAdded', 'All users already added')
+                          : t('ai_assistant.share.selectUser', 'Select a user...')
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableUsers.map((u) => (
+                    <SelectItem key={u.id} value={u.id}>
+                      {formatUserLabel(u)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+            <Button
+              type="button"
+              onClick={() => void handleAdd()}
+              disabled={!activeUserId || adding}
+              size="default"
+            >
+              {adding ? (
+                <Loader2 className="size-4 animate-spin" />
+              ) : (
+                <UserPlus className="size-4" />
+              )}
+              {t('ai_assistant.share.addParticipant', 'Add')}
+            </Button>
+          </div>
+
+          {error ? (
+            <p className="text-sm text-status-danger-text">{error}</p>
+          ) : null}
+
+          <div className="space-y-2 min-h-[60px]">
+            {loading ? (
+              <div className="flex items-center justify-center py-4">
+                <Loader2 className="size-5 animate-spin text-muted-foreground" />
+              </div>
+            ) : participants.length === 0 ? (
+              <p className="text-sm text-muted-foreground py-2">
+                {t(
+                  'ai_assistant.share.noParticipants',
+                  'No participants yet. Add someone to share this conversation.',
+                )}
+              </p>
+            ) : (
+              participants.map((p) => (
+                <div
+                  key={p.userId}
+                  className="flex items-center justify-between rounded-lg border border-border px-3 py-2"
+                >
+                  <div className="min-w-0 flex-1">
+                    <p className="truncate text-sm text-foreground">{getUserLabel(p.userId)}</p>
+                    <p className="text-xs text-muted-foreground capitalize">{p.role}</p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => void handleRemove(p.userId)}
+                    disabled={removingId === p.userId}
+                    aria-label={t('ai_assistant.share.removeParticipant', 'Remove')}
+                  >
+                    {removingId === p.userId ? (
+                      <Loader2 className="size-3 animate-spin" />
+                    ) : (
+                      <X className="size-4" />
+                    )}
+                  </Button>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+            {t('common.close', 'Close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default ConversationShareDialog

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

@@ -8,6 +8,12 @@ import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWith
 import { apiCall } from '../../backend/utils/apiCall'
 import { AiAssistantLauncher, AI_ASSISTANT_LAUNCHER_OPEN_EVENT } from '../AiAssistantLauncher'
 
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ replace: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams(),
+}))
+
 jest.mock('../../backend/utils/apiCall', () => ({
   apiCall: jest.fn(),
 }))