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

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

@@ -0,0 +1,130 @@
+'use client'
+
+import * as React from 'react'
+import { Wrench, AlertTriangle, Loader2, Check, X } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { PendingToolCall } from '../../types'
+
+interface ToolCallConfirmationProps {
+  toolCall: PendingToolCall
+  onApprove: () => void
+  onReject: () => void
+}
+
+const DESTRUCTIVE_PATTERNS = [/^delete/i, /^remove/i, /\.delete$/i, /\.remove$/i]
+
+function isDestructive(toolName: string): boolean {
+  return DESTRUCTIVE_PATTERNS.some((p) => p.test(toolName))
+}
+
+export function ToolCallConfirmation({
+  toolCall,
+  onApprove,
+  onReject,
+}: ToolCallConfirmationProps) {
+  const destructive = isDestructive(toolCall.toolName)
+
+  // Show different UI based on status
+  if (toolCall.status === 'executing') {
+    return (
+      <div className="bg-muted/50 rounded-lg p-3 border animate-pulse">
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin text-primary" />
+          <span className="text-sm">Executing {toolCall.toolName}...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (toolCall.status === 'completed') {
+    return (
+      <div className="bg-emerald-50 dark:bg-emerald-900/20 rounded-lg p-3 border border-emerald-200 dark:border-emerald-800">
+        <div className="flex items-center gap-2">
+          <Check className="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
+          <span className="text-sm text-emerald-800 dark:text-emerald-200">
+            {toolCall.toolName} completed successfully
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  if (toolCall.status === 'error') {
+    return (
+      <div className="bg-destructive/10 rounded-lg p-3 border border-destructive/20">
+        <div className="flex items-center gap-2">
+          <X className="h-4 w-4 text-destructive" />
+          <span className="text-sm text-destructive">
+            {toolCall.toolName} failed: {toolCall.error || 'Unknown error'}
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  if (toolCall.status === 'rejected') {
+    return (
+      <div className="bg-muted/30 rounded-lg p-3 border opacity-60">
+        <div className="flex items-center gap-2">
+          <X className="h-4 w-4 text-muted-foreground" />
+          <span className="text-sm text-muted-foreground line-through">
+            {toolCall.toolName} cancelled
+          </span>
+        </div>
+      </div>
+    )
+  }
+
+  // Pending state - show confirmation UI
+  return (
+    <div
+      className={cn(
+        'rounded-lg p-3 border',
+        destructive
+          ? 'bg-destructive/5 border-destructive/20'
+          : 'bg-muted/50 border-border'
+      )}
+    >
+      <div className="flex items-center gap-2 mb-2">
+        {destructive ? (
+          <AlertTriangle className="h-4 w-4 text-destructive" />
+        ) : (
+          <Wrench className="h-4 w-4 text-primary" />
+        )}
+        <span className="font-medium text-sm">
+          {destructive ? 'Destructive action requested' : 'AI wants to execute:'}
+        </span>
+      </div>
+
+      <div className="font-mono text-xs bg-background rounded p-2 mb-3 overflow-auto max-h-32">
+        <div className={cn('font-medium', destructive ? 'text-destructive' : 'text-primary')}>
+          {toolCall.toolName}
+        </div>
+        {toolCall.args && Object.keys(toolCall.args).length > 0 && (
+          <pre className="text-muted-foreground mt-1 whitespace-pre-wrap break-all">
+            {JSON.stringify(toolCall.args, null, 2)}
+          </pre>
+        )}
+      </div>
+
+      {destructive && (
+        <p className="text-xs text-destructive mb-3">This action may not be reversible.</p>
+      )}
+
+      <div className="flex gap-2">
+        <Button size="sm" variant="outline" onClick={onReject} className="flex-1">
+          Cancel
+        </Button>
+        <Button
+          size="sm"
+          variant={destructive ? 'destructive' : 'default'}
+          onClick={onApprove}
+          className="flex-1"
+        >
+          {destructive ? 'Delete' : 'Execute'}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,57 @@
+'use client'
+
+import * as React from 'react'
+import { Wrench, Check, X, Loader2 } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { ToolCall } from '../../types'
+import { humanizeToolName } from '../../utils/toolMatcher'
+
+interface ToolCallDisplayProps {
+  toolCall: ToolCall
+}
+
+export function ToolCallDisplay({ toolCall }: ToolCallDisplayProps) {
+  const displayName = humanizeToolName(toolCall.toolName)
+
+  return (
+    <div className="flex items-start gap-3 py-2 px-3 bg-muted/50 rounded-lg my-2">
+      <div
+        className={cn(
+          'flex items-center justify-center w-6 h-6 rounded shrink-0',
+          toolCall.status === 'completed' && 'bg-green-100 text-green-600',
+          toolCall.status === 'error' && 'bg-red-100 text-red-600',
+          toolCall.status === 'running' && 'bg-blue-100 text-blue-600',
+          toolCall.status === 'pending' && 'bg-gray-100 text-gray-600'
+        )}
+      >
+        {toolCall.status === 'running' && <Loader2 className="h-3 w-3 animate-spin" />}
+        {toolCall.status === 'completed' && <Check className="h-3 w-3" />}
+        {toolCall.status === 'error' && <X className="h-3 w-3" />}
+        {toolCall.status === 'pending' && <Wrench className="h-3 w-3" />}
+      </div>
+
+      <div className="flex-1 min-w-0 text-xs">
+        <div className="font-medium text-foreground">{displayName}</div>
+
+        {Object.keys(toolCall.args).length > 0 && (
+          <div className="text-muted-foreground mt-1">
+            <code className="bg-muted px-1 rounded">
+              {JSON.stringify(toolCall.args, null, 0).slice(0, 100)}
+              {JSON.stringify(toolCall.args).length > 100 && '...'}
+            </code>
+          </div>
+        )}
+
+        {toolCall.status === 'completed' && toolCall.result !== undefined && (
+          <div className="text-green-600 mt-1">
+            Result: {typeof toolCall.result === 'object' ? 'Success' : String(toolCall.result)}
+          </div>
+        )}
+
+        {toolCall.status === 'error' && toolCall.error && (
+          <div className="text-red-600 mt-1">Error: {toolCall.error}</div>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,125 @@
+'use client'
+
+import * as React from 'react'
+import { useRef, useEffect } from 'react'
+import { Loader2 } from 'lucide-react'
+import Markdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { Button } from '@open-mercato/ui/primitives/button'
+import type { ToolInfo, ChatMessage, PendingToolCall, OpenCodeQuestion } from '../../types'
+import { MessageBubble } from './MessageBubble'
+import { ToolCallConfirmation } from './ToolCallConfirmation'
+
+interface ToolChatPageProps {
+  tool: ToolInfo | null  // Can be null for general chat
+  messages: ChatMessage[]
+  pendingToolCalls: PendingToolCall[]
+  isStreaming: boolean
+  isThinking?: boolean
+  onApproveToolCall: (toolCallId: string) => Promise<void>
+  onRejectToolCall: (toolCallId: string) => void
+  pendingQuestion?: OpenCodeQuestion | null
+  onAnswerQuestion?: (answer: number) => Promise<void>
+}
+
+export function ToolChatPage({
+  tool,
+  messages,
+  pendingToolCalls,
+  isStreaming,
+  isThinking = false,
+  onApproveToolCall,
+  onRejectToolCall,
+  pendingQuestion,
+  onAnswerQuestion,
+}: ToolChatPageProps) {
+  const bottomRef = useRef<HTMLDivElement>(null)
+
+  // Auto-scroll to bottom on new messages (debounced)
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      bottomRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
+    }, 100)
+
+    return () => clearTimeout(timeoutId)
+  }, [messages, pendingToolCalls, isStreaming, isThinking, pendingQuestion])
+
+  return (
+    <div className="p-3 space-y-3">
+      {/* Tool description header - only shown if tool is selected */}
+      {tool && (
+        <div className="-mx-3 -mt-3 mb-3 px-3 py-2 border-b bg-muted/20">
+          <p className="text-xs text-muted-foreground line-clamp-2">{tool.description}</p>
+        </div>
+      )}
+
+      {/* Chat messages */}
+      <div className="space-y-3">
+        {messages.map((message) => (
+          <MessageBubble key={message.id} message={message} />
+        ))}
+
+        {/* Only show tool calls that require user action (pending dangerous tools or errors) */}
+        {pendingToolCalls
+          .filter((tc) => tc.status === 'pending' || tc.status === 'error')
+          .map((toolCall) => (
+            <ToolCallConfirmation
+              key={toolCall.id}
+              toolCall={toolCall}
+              onApprove={() => onApproveToolCall(toolCall.id)}
+              onReject={() => onRejectToolCall(toolCall.id)}
+            />
+          ))}
+
+        {/* OpenCode confirmation question */}
+        {pendingQuestion && pendingQuestion.questions[0] && (
+          <div className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg space-y-3">
+            <div className="flex items-center gap-2 text-amber-600 dark:text-amber-400 text-sm font-medium">
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <span>{pendingQuestion.questions[0].header || 'Confirmation Required'}</span>
+            </div>
+            <div className="text-sm prose prose-sm dark:prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&_p]:my-1 [&_strong]:font-semibold">
+              <Markdown remarkPlugins={[remarkGfm]}>
+                {pendingQuestion.questions[0].question}
+              </Markdown>
+            </div>
+            <div className="flex gap-2 flex-wrap">
+              {pendingQuestion.questions[0].options.map((option, index) => (
+                <Button
+                  key={index}
+                  variant={index === 0 ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => onAnswerQuestion?.(index)}
+                  disabled={isStreaming}
+                >
+                  {option.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Thinking indicator - OpenCode is processing */}
+        {isThinking && !pendingQuestion && (
+          <div className="flex items-center gap-2 py-3 px-3 bg-muted/50 rounded-lg text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span>Agent is working...</span>
+          </div>
+        )}
+
+        {/* Streaming indicator - fallback for non-thinking streaming */}
+        {isStreaming && !isThinking && !pendingQuestion && messages[messages.length - 1]?.role !== 'assistant' && (
+          <div className="flex items-center gap-2 py-2 text-muted-foreground text-sm">
+            <Loader2 className="h-4 w-4 animate-spin" />
+            <span>AI is responding...</span>
+          </div>
+        )}
+
+        {/* Scroll anchor */}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  )
+}

package/src/frontend/components/CommandPalette/index.ts

@@ -0,0 +1,14 @@
+export { CommandPalette } from './CommandPalette'
+export { CommandPaletteProvider, useCommandPaletteContext } from './CommandPaletteProvider'
+export { CommandPaletteWrapper } from './CommandPaletteWrapper'
+export { CommandInput } from './CommandInput'
+export { CommandItem } from './CommandItem'
+export { MessageBubble } from './MessageBubble'
+export { ToolCallDisplay } from './ToolCallDisplay'
+
+// Raycast-style components
+export { CommandHeader } from './CommandHeader'
+export { CommandFooter } from './CommandFooter'
+export { ToolChatPage } from './ToolChatPage'
+export { ToolCallConfirmation } from './ToolCallConfirmation'
+export { DebugPanel } from './DebugPanel'

package/src/frontend/constants.ts

@@ -0,0 +1,35 @@
+export const COMMAND_PALETTE_SHORTCUT = {
+  key: 'k',
+  meta: true, // Cmd on Mac, Ctrl on Windows/Linux
+} as const
+
+export const RECENT_ACTIONS_KEY = 'om:command-palette:recent-actions'
+export const MAX_RECENT_ACTIONS = 10
+
+export const NATURAL_LANGUAGE_PATTERNS = [
+  /^(what|how|why|when|where|who|can you|please|help|show me|find|search|list|create|update|delete)/i,
+  /\?$/,
+  /^(i want|i need|i'd like)/i,
+] as const
+
+export const MODULE_ICONS: Record<string, string> = {
+  customers: 'users',
+  catalog: 'package',
+  sales: 'shopping-cart',
+  search: 'search',
+  auth: 'lock',
+  dictionaries: 'book',
+  directory: 'folder',
+  currencies: 'dollar-sign',
+  feature_toggles: 'toggle-left',
+} as const
+
+export const ACTION_ICONS: Record<string, string> = {
+  create: 'plus',
+  update: 'edit',
+  delete: 'trash',
+  search: 'search',
+  query: 'search',
+  get: 'eye',
+  list: 'list',
+} as const

package/src/frontend/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useCommandPalette } from './useCommandPalette'
+export { useMcpTools } from './useMcpTools'
+export { usePageContext } from './usePageContext'
+export { useRecentActions } from './useRecentActions'
+export { useRecentTools } from './useRecentTools'