@open-mercato/ai-assistant 0.4.2-canary-c02407ff85

package/src/frontend/components/CommandPalette/CommandPalette.tsx

@@ -0,0 +1,276 @@
+'use client'
+
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+import { Command } from 'cmdk'
+import { Loader2, Send } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Dialog, DialogContent, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
+import { useCommandPaletteContext } from './CommandPaletteProvider'
+import { CommandInput } from './CommandInput'
+import { CommandHeader } from './CommandHeader'
+import { CommandFooter } from './CommandFooter'
+import { ToolChatPage } from './ToolChatPage'
+import { DebugPanel } from './DebugPanel'
+
+// Idle state - shown when palette is open but no query submitted
+function IdleState() {
+  return (
+    <div className="py-8 px-4 text-center text-muted-foreground">
+      <p className="mb-2">Ask me anything or describe what you want to do.</p>
+      <p className="text-sm">Examples:</p>
+      <ul className="text-sm mt-2 space-y-1">
+        <li>&quot;Search for customers in New York&quot;</li>
+        <li>&quot;Create a new product&quot;</li>
+        <li>&quot;Show me recent orders&quot;</li>
+      </ul>
+    </div>
+  )
+}
+
+// Routing indicator - shown while fast model analyzes intent
+function RoutingIndicator() {
+  return (
+    <div className="py-8 flex items-center justify-center gap-2">
+      <Loader2 className="h-4 w-4 animate-spin" />
+      <span className="text-sm text-muted-foreground">Analyzing request...</span>
+    </div>
+  )
+}
+
+export function CommandPalette() {
+  const {
+    state,
+    isThinking,
+    isSessionAuthorized,
+    messages,
+    pendingToolCalls,
+    selectedTool,
+    close,
+    setInputValue,
+    handleSubmit,
+    reset,
+    sendAgenticMessage,
+    approveToolCall,
+    rejectToolCall,
+    debugEvents,
+    showDebug,
+    setShowDebug,
+    clearDebugEvents,
+    pendingQuestion,
+    answerQuestion,
+  } = useCommandPaletteContext()
+
+  const {
+    isOpen,
+    phase,
+    inputValue,
+    isLoading,
+    isStreaming,
+    connectionStatus,
+  } = state
+
+  const [localInput, setLocalInput] = React.useState('')
+  const [chatInput, setChatInput] = React.useState('')
+  const chatInputRef = React.useRef<HTMLInputElement>(null)
+
+  // Reset local input when phase changes to idle
+  React.useEffect(() => {
+    if (phase === 'idle') {
+      setLocalInput('')
+      setChatInput('')
+    }
+  }, [phase])
+
+  // Focus chat input when entering chatting phase
+  React.useEffect(() => {
+    if (phase === 'chatting' || phase === 'confirming' || phase === 'executing') {
+      // Small delay to ensure DOM is ready
+      setTimeout(() => chatInputRef.current?.focus(), 50)
+    }
+  }, [phase])
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      close()
+    }
+  }
+
+  const handleInputSubmit = async () => {
+    const query = localInput.trim()
+    if (!query) return
+    setLocalInput('')
+    await handleSubmit(query)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && phase === 'idle' && localInput.trim()) {
+      e.preventDefault()
+      handleInputSubmit()
+    }
+  }
+
+  const handleChatSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!chatInput.trim() || isStreaming) return
+
+    const content = chatInput
+    setChatInput('')
+    await sendAgenticMessage(content)
+  }
+
+  const handleChatKeyDown = (e: React.KeyboardEvent) => {
+    // Prevent escape from bubbling to close the palette
+    if (e.key === 'Escape') {
+      e.stopPropagation()
+    }
+    // Submit on Enter (not Shift+Enter for multiline)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      if (chatInput.trim() && !isStreaming) {
+        const content = chatInput
+        setChatInput('')
+        sendAgenticMessage(content)
+      }
+    }
+  }
+
+  return (
+    <>
+      {/* Custom blur overlay when debug mode is on (since modal=false removes it) */}
+      {isOpen && showDebug && (
+        <div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm pointer-events-none" />
+      )}
+      <Dialog open={isOpen} onOpenChange={handleOpenChange} modal={!showDebug}>
+        <DialogContent
+          className={cn(
+            'fixed left-1/2 top-[10vh] z-50 -translate-x-1/2',
+            'w-full max-w-2xl p-0',
+            'rounded-xl border bg-background shadow-2xl',
+            'flex flex-col'
+          )}
+          style={{ maxHeight: 500, overflow: 'hidden' }}
+          onKeyDown={handleKeyDown}
+          onPointerDownOutside={(e) => {
+            // Prevent closing on outside click when debug mode is on
+            if (showDebug) {
+              e.preventDefault()
+            }
+          }}
+          onInteractOutside={(e) => {
+            // Prevent closing on outside interaction when debug mode is on
+            if (showDebug) {
+              e.preventDefault()
+            }
+          }}
+        >
+          {/* Visually hidden title for accessibility */}
+          <VisuallyHidden>
+            <DialogTitle>AI Command Palette</DialogTitle>
+          </VisuallyHidden>
+          <Command className="flex flex-col flex-1 min-h-0" shouldFilter={false}>
+            {/* Header - shows phase/tool info */}
+            <CommandHeader
+              phase={phase}
+              selectedTool={selectedTool}
+              onBack={reset}
+            />
+
+            {/* Input - shown in idle phase */}
+            {phase === 'idle' && (
+              <CommandInput
+                value={localInput}
+                onValueChange={setLocalInput}
+                mode="commands"
+                isLoading={isLoading}
+                placeholder="Ask me anything or describe what you want to do..."
+              />
+            )}
+
+            {/* Content area */}
+            <div className="flex-1 min-h-0 overflow-y-auto">
+              {phase === 'idle' && !localInput && <IdleState />}
+
+              {phase === 'routing' && <RoutingIndicator />}
+
+              {(phase === 'chatting' || phase === 'confirming' || phase === 'executing') && (
+                <ToolChatPage
+                  tool={selectedTool}
+                  messages={messages}
+                  pendingToolCalls={pendingToolCalls}
+                  isStreaming={isStreaming}
+                  isThinking={isThinking}
+                  onApproveToolCall={approveToolCall}
+                  onRejectToolCall={rejectToolCall}
+                  pendingQuestion={pendingQuestion}
+                  onAnswerQuestion={answerQuestion}
+                />
+              )}
+            </div>
+
+            {/* Chat input - shown in chatting phases */}
+            {(phase === 'chatting' || phase === 'confirming' || phase === 'executing') && (
+              <form onSubmit={handleChatSubmit} className="shrink-0 border-t p-3">
+                <div className="flex items-center gap-2">
+                  <input
+                    ref={chatInputRef}
+                    type="text"
+                    value={chatInput}
+                    onChange={(e) => setChatInput(e.target.value)}
+                    onKeyDown={handleChatKeyDown}
+                    placeholder="Describe what you want to do..."
+                    className={cn(
+                      'flex-1 bg-muted rounded-lg px-4 py-2 text-sm outline-none',
+                      'focus:ring-2 focus:ring-ring',
+                      'disabled:opacity-50'
+                    )}
+                    disabled={isStreaming}
+                  />
+                  <Button
+                    type="submit"
+                    size="icon"
+                    disabled={!chatInput.trim() || isStreaming}
+                  >
+                    {isStreaming ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Send className="h-4 w-4" />
+                    )}
+                  </Button>
+                </div>
+              </form>
+            )}
+
+            {/* Footer with connection status and keyboard hints */}
+            <CommandFooter
+              phase={phase}
+              connectionStatus={connectionStatus}
+              isSessionAuthorized={isSessionAuthorized}
+              showDebug={showDebug}
+              onToggleDebug={() => setShowDebug(!showDebug)}
+            />
+          </Command>
+        </DialogContent>
+      </Dialog>
+
+      {/* Debug panel - rendered via portal outside the dialog DOM tree */}
+      {isOpen && showDebug && typeof document !== 'undefined' && createPortal(
+        <div
+          data-debug-panel
+          className="fixed z-[9999] bg-gray-900 rounded-xl border border-gray-700 shadow-2xl flex flex-col overflow-hidden"
+          style={{ top: '80px', right: '20px', width: '400px', minWidth: '400px', maxWidth: '400px', maxHeight: 'calc(100vh - 100px)' }}
+        >
+          <DebugPanel
+            events={debugEvents}
+            onClear={clearDebugEvents}
+            isOpen={true}
+            onToggle={() => setShowDebug(false)}
+          />
+        </div>,
+        document.body
+      )}
+    </>
+  )
+}

package/src/frontend/components/CommandPalette/CommandPaletteProvider.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import * as React from 'react'
+import { createContext, useContext, useState, useEffect } from 'react'
+import type { PageContext, SelectedEntity } from '../../types'
+import { usePageContext } from '../../hooks/usePageContext'
+import { useCommandPalette } from '../../hooks/useCommandPalette'
+
+interface CommandPaletteProviderProps {
+  children: React.ReactNode
+  tenantId: string
+  organizationId: string | null
+  disableKeyboardShortcut?: boolean
+}
+
+type CommandPaletteContextValue = ReturnType<typeof useCommandPalette>
+
+const CommandPaletteContext = createContext<CommandPaletteContextValue | null>(null)
+
+export function CommandPaletteProvider({
+  children,
+  tenantId,
+  organizationId,
+  disableKeyboardShortcut = true,
+}: CommandPaletteProviderProps) {
+  const pageContext = usePageContext({ tenantId, organizationId })
+  const [selectedEntities, setSelectedEntities] = useState<SelectedEntity[]>([])
+
+  // Listen for DataTable selection events
+  useEffect(() => {
+    const handleSelectionChange = (event: CustomEvent<SelectedEntity[]>) => {
+      setSelectedEntities(event.detail || [])
+    }
+
+    window.addEventListener('om:selection-change', handleSelectionChange as EventListener)
+    return () => {
+      window.removeEventListener('om:selection-change', handleSelectionChange as EventListener)
+    }
+  }, [])
+
+  const commandPalette = useCommandPalette({
+    pageContext,
+    selectedEntities,
+    disableKeyboardShortcut,
+  })
+
+  return (
+    <CommandPaletteContext.Provider value={commandPalette}>
+      {children}
+    </CommandPaletteContext.Provider>
+  )
+}
+
+export function useCommandPaletteContext(): CommandPaletteContextValue {
+  const context = useContext(CommandPaletteContext)
+  if (!context) {
+    throw new Error('useCommandPaletteContext must be used within CommandPaletteProvider')
+  }
+  return context
+}

package/src/frontend/components/CommandPalette/CommandPaletteWrapper.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import * as React from 'react'
+import { CommandPaletteProvider } from './CommandPaletteProvider'
+import { CommandPalette } from './CommandPalette'
+
+interface CommandPaletteWrapperProps {
+  tenantId: string | null
+  organizationId: string | null
+}
+
+export function CommandPaletteWrapper({ tenantId, organizationId }: CommandPaletteWrapperProps) {
+  return (
+    <CommandPaletteProvider
+      tenantId={tenantId ?? ''}
+      organizationId={organizationId}
+    >
+      <CommandPalette />
+    </CommandPaletteProvider>
+  )
+}

package/src/frontend/components/CommandPalette/DebugPanel.tsx

@@ -0,0 +1,257 @@
+'use client'
+
+import * as React from 'react'
+import { Code, X, Trash2 } from 'lucide-react'
+import { JsonView } from 'react-json-view-lite'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export interface DebugEvent {
+  id: string
+  timestamp: Date
+  type: 'thinking' | 'tool-call' | 'tool-result' | 'text' | 'error' | 'done' | 'message' | 'connection' | 'metadata' | 'debug' | 'question' | 'session-authorized'
+  data: unknown
+}
+
+interface DebugPanelProps {
+  events: DebugEvent[]
+  onClear: () => void
+  isOpen: boolean
+  onToggle: () => void
+}
+
+export function DebugPanel({ events, onClear, isOpen, onToggle }: DebugPanelProps) {
+  const scrollRef = React.useRef<HTMLDivElement>(null)
+
+  // Filter out text events - only show tool calls, results, errors, etc.
+  const filteredEvents = React.useMemo(
+    () => events.filter((e) => e.type !== 'text'),
+    [events]
+  )
+
+  React.useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight
+    }
+  }, [filteredEvents])
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <div className="flex-shrink-0 flex items-center justify-between px-3 py-2 border-b border-gray-700">
+        <span className="text-xs font-medium text-gray-300">Debug Events ({filteredEvents.length})</span>
+        <div className="flex gap-2">
+          <button
+            onClick={onClear}
+            className="text-gray-400 hover:text-gray-200"
+            title="Clear events"
+          >
+            <Trash2 className="w-3 h-3" />
+          </button>
+          <button
+            onClick={onToggle}
+            className="text-gray-400 hover:text-gray-200"
+            title="Close debug panel"
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      </div>
+      <div ref={scrollRef} className="flex-1 min-h-0 overflow-y-auto p-2 space-y-1">
+        {filteredEvents.map((event) => (
+          <DebugEventRow key={event.id} event={event} />
+        ))}
+        {filteredEvents.length === 0 && (
+          <p className="text-xs text-gray-500 text-center py-4">No events yet</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// Recursively parse stringified JSON fields
+function parseNestedJson(data: unknown): unknown {
+  if (typeof data === 'string') {
+    try {
+      const parsed = JSON.parse(data)
+      return parseNestedJson(parsed)
+    } catch {
+      return data
+    }
+  }
+  if (Array.isArray(data)) {
+    return data.map(parseNestedJson)
+  }
+  if (data && typeof data === 'object') {
+    const result: Record<string, unknown> = {}
+    for (const [key, value] of Object.entries(data)) {
+      result[key] = parseNestedJson(value)
+    }
+    return result
+  }
+  return data
+}
+
+// Custom dark styles for better readability (no external CSS needed)
+const customDarkStyles: Record<string, string> = {
+  container: 'bg-transparent text-[11px] leading-relaxed font-mono',
+  basicChildStyle: 'pl-4 ml-0',
+  label: 'text-purple-400 mr-1',
+  nullValue: 'text-gray-500 italic',
+  undefinedValue: 'text-gray-500 italic',
+  stringValue: 'text-green-400',
+  booleanValue: 'text-yellow-400',
+  numberValue: 'text-blue-400',
+  otherValue: 'text-gray-300',
+  punctuation: 'text-gray-500',
+  collapseIcon: 'text-gray-400 cursor-pointer select-none mr-1',
+  expandIcon: 'text-gray-400 cursor-pointer select-none mr-1',
+  collapsedContent: 'text-gray-500',
+}
+
+function DebugEventRow({ event }: { event: DebugEvent }) {
+  const [expanded, setExpanded] = React.useState(false)
+  const typeColors: Record<string, string> = {
+    'thinking': 'text-orange-400',
+    'tool-call': 'text-blue-400',
+    'tool-result': 'text-green-400',
+    'text': 'text-gray-300',
+    'error': 'text-red-400',
+    'done': 'text-purple-400',
+    'message': 'text-yellow-400',
+    'connection': 'text-cyan-400',
+    'metadata': 'text-teal-400',
+    'debug': 'text-gray-500',
+    'question': 'text-amber-400',
+  }
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    }) + '.' + String(date.getMilliseconds()).padStart(3, '0')
+  }
+
+  // Parse nested JSON strings for better display
+  const parsedData = React.useMemo(() => parseNestedJson(event.data), [event.data])
+
+  return (
+    <div className="text-xs font-mono">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full text-left flex items-center gap-2 hover:bg-gray-800 rounded px-1 py-0.5"
+      >
+        <span className="text-gray-500 flex-shrink-0">
+          {formatTime(event.timestamp)}
+        </span>
+        <span className={cn('font-medium flex-shrink-0', typeColors[event.type] || 'text-gray-400')}>
+          {event.type}
+        </span>
+        <span className="text-gray-400 truncate flex-1">
+          {getEventPreview(event)}
+        </span>
+        <span className="text-gray-600 flex-shrink-0">
+          {expanded ? '▼' : '▶'}
+        </span>
+      </button>
+      {expanded && (
+        <div className="bg-gray-800 rounded p-2 mt-1 overflow-x-auto max-h-[300px] overflow-y-auto">
+          <JsonView
+            data={parsedData as object}
+            style={customDarkStyles}
+            shouldExpandNode={(level) => level < 2}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function getEventPreview(event: DebugEvent): string {
+  const data = event.data as Record<string, unknown>
+
+  if (event.type === 'thinking') {
+    return 'Agent is processing...'
+  }
+  if (event.type === 'tool-call') {
+    const toolName = data?.toolName as string || 'unknown'
+    const args = data?.args
+    const argsPreview = args ? JSON.stringify(args).substring(0, 40) : ''
+    return `${toolName}(${argsPreview}${argsPreview.length >= 40 ? '...' : ''})`
+  }
+  if (event.type === 'tool-result') {
+    const result = data?.result
+    const resultPreview = typeof result === 'string'
+      ? result.substring(0, 50)
+      : JSON.stringify(result)?.substring(0, 50)
+    return `→ ${resultPreview}${resultPreview && resultPreview.length >= 50 ? '...' : ''}`
+  }
+  if (event.type === 'text') {
+    const content = data?.content as string || ''
+    return content.substring(0, 50) + (content.length > 50 ? '...' : '')
+  }
+  if (event.type === 'error') {
+    return data?.error as string || 'Unknown error'
+  }
+  if (event.type === 'message') {
+    const role = data?.role as string || ''
+    const content = data?.content as string || ''
+    return `[${role}] ${content.substring(0, 40)}...`
+  }
+  if (event.type === 'connection') {
+    return data?.status as string || ''
+  }
+  if (event.type === 'metadata') {
+    const model = data?.model as string || ''
+    const tokens = data?.tokens as { input?: number; output?: number } | undefined
+    const durationMs = data?.durationMs as number | undefined
+    const parts: string[] = []
+    if (model) parts.push(model)
+    if (tokens) parts.push(`${tokens.input || 0}→${tokens.output || 0} tokens`)
+    if (durationMs) parts.push(`${(durationMs / 1000).toFixed(1)}s`)
+    return parts.join(' | ') || 'No metadata'
+  }
+  if (event.type === 'debug') {
+    const partType = data?.partType as string || 'unknown'
+    return `Unknown part: ${partType}`
+  }
+  if (event.type === 'question') {
+    // Use the enriched questionText field if available (added by frontend)
+    const questionText = (data?.questionText as string)
+      || (data?.question as { questions?: Array<{ question: string }> })?.questions?.[0]?.question
+      || (data?.header as string)
+      || 'Confirmation required'
+    return questionText.substring(0, 50) + (questionText.length > 50 ? '...' : '')
+  }
+  return ''
+}
+
+// Export a toggle button component for use in footer
+export function DebugToggleButton({
+  isOpen,
+  onToggle
+}: {
+  isOpen: boolean
+  onToggle: () => void
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        'flex items-center gap-1 text-xs transition-colors',
+        isOpen
+          ? 'text-blue-500 hover:text-blue-400'
+          : 'text-muted-foreground hover:text-foreground'
+      )}
+      title="Toggle debug panel"
+    >
+      <Code className="w-3 h-3" />
+      <span>{isOpen ? 'Hide Debug' : 'Debug'}</span>
+    </button>
+  )
+}

package/src/frontend/components/CommandPalette/MessageBubble.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+import { User, Bot } from 'lucide-react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { ChatMessage } from '../../types'
+
+interface MessageBubbleProps {
+  message: ChatMessage
+}
+
+export function MessageBubble({ message }: MessageBubbleProps) {
+  const isUser = message.role === 'user'
+
+  return (
+    <div
+      className={cn(
+        'flex gap-3 py-3',
+        isUser ? 'flex-row-reverse' : 'flex-row'
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-center w-8 h-8 rounded-full shrink-0',
+          isUser ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'
+        )}
+      >
+        {isUser ? <User className="h-4 w-4" /> : <Bot className="h-4 w-4" />}
+      </div>
+
+      <div
+        className={cn(
+          'flex-1 min-w-0 px-4 py-2 rounded-lg text-sm',
+          isUser
+            ? 'bg-primary text-primary-foreground ml-12'
+            : 'bg-muted text-foreground mr-12'
+        )}
+      >
+        {isUser ? (
+          <div className="whitespace-pre-wrap break-words">{message.content}</div>
+        ) : (
+          <div className={cn(
+            'prose prose-sm dark:prose-invert max-w-none break-words',
+            // Reset margins for first/last children
+            '[&>*:first-child]:mt-0 [&>*:last-child]:mb-0',
+            // Paragraph spacing - also handle plain text with whitespace-pre-line
+            '[&_p]:my-2 [&_p]:leading-relaxed [&_p]:whitespace-pre-line',
+            // List styling
+            '[&_ul]:my-2 [&_ul]:pl-4 [&_ol]:my-2 [&_ol]:pl-4',
+            '[&_li]:my-0.5 [&_li]:leading-relaxed',
+            // Headers
+            '[&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-3 [&_h1]:mb-2',
+            '[&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1',
+            '[&_h3]:text-sm [&_h3]:font-medium [&_h3]:mt-2 [&_h3]:mb-1',
+            // Code blocks
+            '[&_pre]:bg-background/50 [&_pre]:rounded [&_pre]:p-2 [&_pre]:my-2 [&_pre]:overflow-x-auto',
+            '[&_code]:bg-background/50 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs',
+            // Strong/emphasis
+            '[&_strong]:font-semibold [&_em]:italic',
+            // Blockquotes
+            '[&_blockquote]:border-l-2 [&_blockquote]:border-muted-foreground/30 [&_blockquote]:pl-3 [&_blockquote]:italic'
+          )}>
+            <Markdown remarkPlugins={[remarkGfm]}>
+              {message.content}
+            </Markdown>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}