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

package/package.json

@@ -0,0 +1,108 @@
+{
+  "name": "@open-mercato/ai-assistant",
+  "version": "0.4.2-canary-c02407ff85",
+  "type": "module",
+  "main": "./dist/index.js",
+  "scripts": {
+    "build": "node build.mjs",
+    "watch": "node watch.mjs",
+    "mcp:dev": "mercato ai_assistant mcp:dev",
+    "mcp:serve-http": "mercato ai_assistant mcp:serve-http"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./modules/ai_assistant": {
+      "types": "./src/modules/ai_assistant/index.ts",
+      "default": "./dist/modules/ai_assistant/index.js"
+    },
+    "./tools": {
+      "types": "./src/modules/ai_assistant/lib/tool-registry.ts",
+      "default": "./dist/modules/ai_assistant/lib/tool-registry.js"
+    },
+    "./types": {
+      "types": "./src/modules/ai_assistant/lib/types.ts",
+      "default": "./dist/modules/ai_assistant/lib/types.js"
+    },
+    "./ai-sdk": {
+      "types": "./src/modules/ai_assistant/lib/ai-sdk.ts",
+      "default": "./dist/modules/ai_assistant/lib/ai-sdk.js"
+    },
+    "./frontend": {
+      "types": "./src/frontend/index.ts",
+      "default": "./dist/frontend/index.js"
+    },
+    "./*.ts": {
+      "types": "./src/*.ts",
+      "default": "./dist/*.js"
+    },
+    "./*.tsx": {
+      "types": "./src/*.tsx",
+      "default": "./dist/*.js"
+    },
+    "./*.json": "./src/*.json",
+    "./*": {
+      "types": [
+        "./src/*.ts",
+        "./src/*.tsx"
+      ],
+      "default": "./dist/*.js"
+    },
+    "./*/*.json": "./src/*/*.json",
+    "./*/*": {
+      "types": [
+        "./src/*/*.ts",
+        "./src/*/*.tsx"
+      ],
+      "default": "./dist/*/*.js"
+    },
+    "./*/*/*.json": "./src/*/*/*.json",
+    "./*/*/*": {
+      "types": [
+        "./src/*/*/*.ts",
+        "./src/*/*/*.tsx"
+      ],
+      "default": "./dist/*/*/*.js"
+    },
+    "./*/*/*/*.json": "./src/*/*/*/*.json",
+    "./*/*/*/*": {
+      "types": [
+        "./src/*/*/*/*.ts",
+        "./src/*/*/*/*.tsx"
+      ],
+      "default": "./dist/*/*/*/*.js"
+    },
+    "./*/*/*/*/*.json": "./src/*/*/*/*/*.json",
+    "./*/*/*/*/*": {
+      "types": [
+        "./src/*/*/*/*/*.ts",
+        "./src/*/*/*/*/*.tsx"
+      ],
+      "default": "./dist/*/*/*/*/*.js"
+    }
+  },
+  "dependencies": {
+    "@ai-sdk/anthropic": "^3.0.12",
+    "@ai-sdk/google": "^1.2.6",
+    "@ai-sdk/openai": "^3.0.5",
+    "@modelcontextprotocol/sdk": "^1.25.2",
+    "ai": "^6.0.33",
+    "cmdk": "^1.0.0",
+    "framer-motion": "^11.0.0",
+    "react-json-view-lite": "^2.5.0",
+    "react-markdown": "^9.0.0",
+    "zod-to-json-schema": "^3.25.1"
+  },
+  "peerDependencies": {
+    "@open-mercato/shared": "0.4.2-canary-c02407ff85",
+    "@open-mercato/ui": "0.4.2-canary-c02407ff85",
+    "zod": ">=3.23.0"
+  },
+  "devDependencies": {
+    "@open-mercato/cli": "0.4.2-canary-c02407ff85",
+    "tsx": "^4.21.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "0.3.13"
+}

package/src/di.ts

@@ -0,0 +1,11 @@
+import type { AwilixContainer } from 'awilix'
+
+/**
+ * Register AI Assistant module services in the DI container.
+ *
+ * This is called by the app bootstrap to register package-level services.
+ */
+export async function register(container: AwilixContainer): Promise<void> {
+  const { register: registerModule } = await import('./modules/ai_assistant/di')
+  registerModule(container)
+}

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

@@ -0,0 +1,113 @@
+'use client'
+
+import * as React from 'react'
+import { Code, ShieldCheck } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { PalettePhase, ConnectionStatus } from '../../types'
+
+interface CommandFooterProps {
+  phase: PalettePhase
+  connectionStatus: ConnectionStatus
+  isSessionAuthorized?: boolean
+  showDebug?: boolean
+  onToggleDebug?: () => void
+}
+
+function ConnectionIndicator({ status }: { status: ConnectionStatus }) {
+  const statusConfig: Record<ConnectionStatus, { color: string; text: string }> = {
+    connected: { color: 'bg-emerald-500', text: 'Connected' },
+    connecting: { color: 'bg-yellow-500 animate-pulse', text: 'Connecting...' },
+    disconnected: { color: 'bg-gray-400', text: 'Disconnected' },
+    error: { color: 'bg-red-500', text: 'Error' },
+  }
+
+  const config = statusConfig[status]
+
+  return (
+    <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+      <div className={cn('h-1.5 w-1.5 rounded-full', config.color)} />
+      <span>{config.text}</span>
+    </div>
+  )
+}
+
+function KeyboardShortcut({ keys }: { keys: string[] }) {
+  return (
+    <div className="flex items-center gap-0.5">
+      {keys.map((key, i) => (
+        <kbd
+          key={i}
+          className={cn(
+            'inline-flex h-5 min-w-[20px] items-center justify-center rounded',
+            'bg-muted px-1.5 text-[10px] font-medium text-muted-foreground'
+          )}
+        >
+          {key}
+        </kbd>
+      ))}
+    </div>
+  )
+}
+
+export function CommandFooter({
+  phase,
+  connectionStatus,
+  isSessionAuthorized = false,
+  showDebug = false,
+  onToggleDebug,
+}: CommandFooterProps) {
+  const idleShortcuts = [
+    { label: 'Submit', keys: ['\u21B5'] },
+    { label: 'Close', keys: ['Esc'] },
+  ]
+
+  const chatShortcuts = [
+    { label: 'Send', keys: ['\u21B5'] },
+    { label: 'Back', keys: ['Esc'] },
+  ]
+
+  const shortcuts = phase === 'idle' ? idleShortcuts : chatShortcuts
+
+  return (
+    <div className="relative flex items-center justify-between px-3 py-2 border-t bg-muted/20 text-xs">
+      <div className="flex items-center gap-3">
+        <ConnectionIndicator status={connectionStatus} />
+
+        {/* Session authorization indicator */}
+        {isSessionAuthorized && (
+          <div className="flex items-center gap-1 text-xs text-emerald-600 dark:text-emerald-400">
+            <ShieldCheck className="h-3 w-3" />
+            <span>Authorized</span>
+          </div>
+        )}
+
+        {/* Debug toggle button */}
+        {onToggleDebug && (
+          <button
+            type="button"
+            onClick={onToggleDebug}
+            className={cn(
+              'flex items-center gap-1 transition-colors',
+              showDebug
+                ? 'text-blue-500 hover:text-blue-400'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+            title="Toggle debug panel"
+          >
+            <Code className="w-3 h-3" />
+            <span>{showDebug ? 'Hide Debug' : 'Debug'}</span>
+          </button>
+        )}
+      </div>
+
+      <div className="flex items-center gap-3">
+        {shortcuts.map((shortcut, i) => (
+          <div key={i} className="flex items-center gap-1.5 text-muted-foreground">
+            <span>{shortcut.label}</span>
+            <KeyboardShortcut keys={shortcut.keys} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,76 @@
+'use client'
+
+import * as React from 'react'
+import { ArrowLeft, Wrench, MessageSquare } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { PalettePhase, ToolInfo } from '../../types'
+
+interface CommandHeaderProps {
+  phase: PalettePhase
+  selectedTool: ToolInfo | null
+  onBack: () => void
+}
+
+export function CommandHeader({ phase, selectedTool, onBack }: CommandHeaderProps) {
+  // Only show header when not in idle phase
+  if (phase === 'idle') {
+    return null
+  }
+
+  // Show routing header
+  if (phase === 'routing') {
+    return (
+      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30">
+        <button
+          type="button"
+          onClick={onBack}
+          className={cn(
+            'flex items-center justify-center h-6 w-6 rounded-md',
+            'hover:bg-muted transition-colors',
+            'text-muted-foreground hover:text-foreground'
+          )}
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </button>
+        <span className="text-sm text-muted-foreground">Processing...</span>
+      </div>
+    )
+  }
+
+  // Show chatting/confirming/executing header
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30">
+      <button
+        type="button"
+        onClick={onBack}
+        className={cn(
+          'flex items-center justify-center h-6 w-6 rounded-md',
+          'hover:bg-muted transition-colors',
+          'text-muted-foreground hover:text-foreground'
+        )}
+      >
+        <ArrowLeft className="h-4 w-4" />
+      </button>
+
+      {selectedTool ? (
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <div className="flex items-center justify-center h-6 w-6 rounded bg-primary/10 text-primary">
+            <Wrench className="h-3 w-3" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{selectedTool.name}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          <div className="flex items-center justify-center h-6 w-6 rounded bg-primary/10 text-primary">
+            <MessageSquare className="h-3 w-3" />
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">Chat</p>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,50 @@
+'use client'
+
+import * as React from 'react'
+import { Command } from 'cmdk'
+import { Search, MessageSquare, Loader2 } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { CommandPaletteMode } from '../../types'
+
+interface CommandInputProps {
+  value: string
+  onValueChange: (value: string) => void
+  mode: CommandPaletteMode
+  isLoading?: boolean
+  placeholder?: string
+}
+
+export function CommandInput({ value, onValueChange, mode, isLoading, placeholder }: CommandInputProps) {
+  const defaultPlaceholder = mode === 'chat' ? 'Ask AI...' : 'Search commands or ask AI...'
+
+  return (
+    <div className="flex items-center gap-2 border-b px-4 py-3">
+      <div className="flex items-center justify-center w-5 h-5 text-muted-foreground">
+        {isLoading ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : mode === 'chat' ? (
+          <MessageSquare className="h-4 w-4" />
+        ) : (
+          <Search className="h-4 w-4" />
+        )}
+      </div>
+
+      <Command.Input
+        value={value}
+        onValueChange={onValueChange}
+        placeholder={placeholder || defaultPlaceholder}
+        className={cn(
+          'flex-1 bg-transparent text-sm outline-none',
+          'placeholder:text-muted-foreground'
+        )}
+        autoFocus
+      />
+
+      {mode === 'chat' && (
+        <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded">
+          AI
+        </span>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,111 @@
+'use client'
+
+import * as React from 'react'
+import { Command } from 'cmdk'
+import {
+  Plus,
+  Edit,
+  Trash,
+  Search,
+  Eye,
+  List,
+  Package,
+  Users,
+  ShoppingCart,
+  Calendar,
+  Lock,
+  BookOpen,
+  Folder,
+  DollarSign,
+  ToggleLeft,
+  Zap,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import type { ToolInfo } from '../../types'
+import { humanizeToolName } from '../../utils/toolMatcher'
+
+interface CommandItemProps {
+  tool: ToolInfo
+  isSelected: boolean
+  onSelect: () => void
+}
+
+const MODULE_ICONS: Record<string, LucideIcon> = {
+  customers: Users,
+  catalog: Package,
+  sales: ShoppingCart,
+  search: Search,
+  auth: Lock,
+  dictionaries: BookOpen,
+  directory: Folder,
+  currencies: DollarSign,
+  feature_toggles: ToggleLeft,
+}
+
+const ACTION_ICONS: Record<string, LucideIcon> = {
+  create: Plus,
+  update: Edit,
+  delete: Trash,
+  search: Search,
+  query: Search,
+  get: Eye,
+  list: List,
+}
+
+function getIcon(tool: ToolInfo): LucideIcon {
+  // First try to match action
+  const nameParts = tool.name.split('.')
+  const action = nameParts[nameParts.length - 1]
+  if (ACTION_ICONS[action]) {
+    return ACTION_ICONS[action]
+  }
+
+  // Then try module
+  const module = tool.module || nameParts[0]
+  if (MODULE_ICONS[module]) {
+    return MODULE_ICONS[module]
+  }
+
+  return Zap
+}
+
+export function CommandItem({ tool, isSelected, onSelect }: CommandItemProps) {
+  const Icon = getIcon(tool)
+  const displayName = humanizeToolName(tool.name)
+  const module = tool.module || tool.name.split('.')[0]
+
+  return (
+    <Command.Item
+      value={tool.name}
+      onSelect={onSelect}
+      className={cn(
+        'flex items-center gap-3 px-3 py-2 cursor-pointer rounded-md',
+        'text-sm text-foreground',
+        isSelected
+          ? 'bg-accent text-accent-foreground'
+          : 'hover:bg-accent/50'
+      )}
+    >
+      <div
+        className={cn(
+          'flex items-center justify-center w-8 h-8 rounded-md',
+          'bg-muted text-muted-foreground'
+        )}
+      >
+        <Icon className="h-4 w-4" />
+      </div>
+
+      <div className="flex-1 min-w-0">
+        <div className="font-medium truncate">{displayName}</div>
+        <div className="text-xs text-muted-foreground truncate">
+          {tool.description}
+        </div>
+      </div>
+
+      <span className="text-xs text-muted-foreground capitalize">
+        {module}
+      </span>
+    </Command.Item>
+  )
+}