@open-mercato/ai-assistant 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ai-assistant",
-  "version": "0.5.1-develop.2856.35de414092",
+  "version": "0.5.1-develop.2874.77704bccbd",
   "type": "module",
   "engines": {
     "node": ">=22.0.0"
@@ -98,12 +98,12 @@
     "zod-to-json-schema": "^3.25.2"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2856.35de414092",
-    "@open-mercato/ui": "0.5.1-develop.2856.35de414092",
+    "@open-mercato/shared": "0.5.1-develop.2874.77704bccbd",
+    "@open-mercato/ui": "0.5.1-develop.2874.77704bccbd",
     "zod": ">=3.23.0"
   },
   "devDependencies": {
-    "@open-mercato/cli": "0.5.1-develop.2856.35de414092",
+    "@open-mercato/cli": "0.5.1-develop.2874.77704bccbd",
     "tsx": "^4.21.0"
   },
   "publishConfig": {

package/src/frontend/components/AiDot/AiDot.tsx

@@ -25,13 +25,13 @@ export function AiDot({ onClick, isActive, hasMessages, position, className }: A
       type="button"
       onClick={onClick}
       className={cn(
-        'fixed z-50 group',
+        'fixed z-sticky group',
         'w-14 h-14 rounded-full',
         'flex items-center justify-center',
         'cursor-pointer',
         'transition-transform duration-200 ease-out',
         'hover:scale-110 active:scale-95',
-        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         className
       )}
       style={floatingPositionStyles[position]}

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

@@ -39,7 +39,7 @@ function KeyboardShortcut({ keys }: { keys: string[] }) {
           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'
+            'bg-muted px-1.5 text-overline font-medium text-muted-foreground'
           )}
         >
           {key}
@@ -69,7 +69,7 @@ export function CommandFooter({
   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="relative flex items-center justify-between px-3 py-2 border-t bg-muted/30 text-xs">
       <div className="flex items-center gap-3">
         <ConnectionIndicator status={connectionStatus} />
 

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

@@ -143,12 +143,12 @@ export function CommandPalette() {
     <>
       {/* 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" />
+        <div className="fixed inset-0 z-overlay 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',
+            'fixed left-1/2 top-[10vh] z-modal -translate-x-1/2',
             'w-full max-w-2xl p-0',
             'rounded-xl border bg-background shadow-2xl',
             'flex flex-col'
@@ -226,7 +226,7 @@ export function CommandPalette() {
                     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',
+                      'focus-visible:ring-2 focus-visible:ring-ring',
                       'disabled:opacity-50'
                     )}
                     disabled={isStreaming}
@@ -264,7 +264,7 @@ export function CommandPalette() {
       {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"
+          className="fixed z-top 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

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

@@ -96,7 +96,7 @@ function parseNestedJson(data: unknown): unknown {
 
 // Custom dark styles for better readability (no external CSS needed)
 const customDarkStyles: Record<string, string> = {
-  container: 'bg-transparent text-[11px] leading-relaxed font-mono',
+  container: 'bg-transparent text-overline leading-relaxed font-mono',
   basicChildStyle: 'pl-4 ml-0',
   label: 'text-purple-400 mr-1',
   nullValue: 'text-gray-500 italic',

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

@@ -55,8 +55,8 @@ export function MessageBubble({ message }: MessageBubbleProps) {
             '[&_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',
+            '[&_pre]:bg-background/80 [&_pre]:rounded [&_pre]:p-2 [&_pre]:my-2 [&_pre]:overflow-x-auto',
+            '[&_code]:bg-background/80 [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs',
             // Strong/emphasis
             '[&_strong]:font-semibold [&_em]:italic',
             // Blockquotes

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

@@ -39,10 +39,10 @@ export function ToolCallConfirmation({
 
   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="bg-status-success-bg rounded-lg p-3 border border-status-success-border">
         <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">
+          <Check className="h-4 w-4 text-status-success-icon" />
+          <span className="text-sm text-status-success-text">
             {toolCall.toolName} completed successfully
           </span>
         </div>

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

@@ -51,7 +51,7 @@ export function ToolChatPage({
     <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">
+        <div className="-mx-3 -mt-3 mb-3 px-3 py-2 border-b bg-muted/30">
           <p className="text-xs text-muted-foreground line-clamp-2">{tool.description}</p>
         </div>
       )}

package/src/frontend/components/DockableChat/DockableChat.tsx

@@ -244,7 +244,7 @@ export function DockableChat() {
       <>
         <div
           className={cn(
-            'fixed z-50',
+            'fixed z-modal',
             'rounded-xl border bg-background shadow-2xl',
             'flex flex-col',
             'transition-all duration-200 ease-out'
@@ -315,7 +315,7 @@ export function DockableChat() {
                     placeholder={t('ai_assistant.chat.describePlaceholder')}
                     className={cn(
                       'flex-1 bg-muted rounded-lg px-4 py-2 text-sm outline-none',
-                      'focus:ring-2 focus:ring-ring',
+                      'focus-visible:ring-2 focus-visible:ring-ring',
                       'disabled:opacity-50'
                     )}
                     disabled={isStreaming}
@@ -350,7 +350,7 @@ export function DockableChat() {
         {showDebug && (
           <div
             data-debug-panel
-            className="fixed z-[9999] bg-gray-900 rounded-xl border border-gray-700 shadow-2xl flex flex-col overflow-hidden"
+            className="fixed z-top bg-gray-900 rounded-xl border border-gray-700 shadow-2xl flex flex-col overflow-hidden"
             style={{
               top: '24px',
               left: '24px',
@@ -474,7 +474,7 @@ export function DockableChat() {
                     placeholder={t('ai_assistant.chat.describePlaceholder')}
                     className={cn(
                       'flex-1 bg-muted rounded-lg px-4 py-2 text-sm outline-none',
-                      'focus:ring-2 focus:ring-ring',
+                      'focus-visible:ring-2 focus-visible:ring-ring',
                       'disabled:opacity-50'
                     )}
                     disabled={isStreaming}

package/src/modules/ai_assistant/components/AiAssistantSettingsPageClient.tsx

@@ -189,7 +189,7 @@ function AiAssistantSettingsContent() {
           {/* OpenCode Server Status */}
           <div className={`p-4 rounded-lg border-2 ${
             health?.status === 'ok' && health.opencode?.healthy
-              ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-900/10'
+              ? 'border-status-success-border bg-status-success-bg'
               : 'border-destructive/50 bg-destructive/5'
           }`}>
             <div className="flex items-start justify-between">
@@ -200,7 +200,7 @@ function AiAssistantSettingsContent() {
                 </div>
                 <p className="text-xs text-muted-foreground mt-1">
                   {health?.status === 'ok' && health.opencode?.healthy ? (
-                    <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                    <span className="flex items-center gap-1 text-status-success-text">
                       <CheckCircle2 className="h-3 w-3" />
                       Connected
                     </span>
@@ -221,7 +221,7 @@ function AiAssistantSettingsContent() {
                 </p>
               </div>
               {health?.status === 'ok' && health.opencode?.healthy && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400 shrink-0">
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
                   <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
@@ -239,9 +239,9 @@ function AiAssistantSettingsContent() {
             return (
               <div className={`p-4 rounded-lg border-2 ${
                 mcpConnected
-                  ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-900/10'
+                  ? 'border-status-success-border bg-status-success-bg'
                   : mcpConnecting
-                    ? 'border-amber-500/50 bg-amber-50/50 dark:bg-amber-900/10'
+                    ? 'border-status-warning-border bg-status-warning-bg'
                     : 'border-destructive/50 bg-destructive/5'
               }`}>
                 <div className="flex items-start justify-between">
@@ -252,12 +252,12 @@ function AiAssistantSettingsContent() {
                     </div>
                     <p className="text-xs text-muted-foreground mt-1">
                       {mcpConnected ? (
-                        <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                        <span className="flex items-center gap-1 text-status-success-text">
                           <CheckCircle2 className="h-3 w-3" />
                           Connected
                         </span>
                       ) : mcpConnecting ? (
-                        <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400">
+                        <span className="flex items-center gap-1 text-status-warning-text">
                           <Loader2 className="h-3 w-3 animate-spin" />
                           Connecting...
                         </span>
@@ -273,7 +273,7 @@ function AiAssistantSettingsContent() {
                     </p>
                   </div>
                   {mcpConnected && (
-                    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400 shrink-0">
+                    <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
                       <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                         <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                       </svg>
@@ -287,7 +287,7 @@ function AiAssistantSettingsContent() {
           {/* Meilisearch Status */}
           <div className={`p-4 rounded-lg border-2 ${
             health?.search?.available
-              ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-900/10'
+              ? 'border-status-success-border bg-status-success-bg'
               : 'border-destructive/50 bg-destructive/5'
           }`}>
             <div className="flex items-start justify-between">
@@ -298,7 +298,7 @@ function AiAssistantSettingsContent() {
                 </div>
                 <p className="text-xs text-muted-foreground mt-1">
                   {health?.search?.available ? (
-                    <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                    <span className="flex items-center gap-1 text-status-success-text">
                       <CheckCircle2 className="h-3 w-3" />
                       Connected
                     </span>
@@ -314,7 +314,7 @@ function AiAssistantSettingsContent() {
                 </p>
               </div>
               {health?.search?.available && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400 shrink-0">
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon shrink-0">
                   <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
@@ -330,12 +330,12 @@ function AiAssistantSettingsContent() {
             <Key className="h-4 w-4 text-muted-foreground" />
             <span className="font-medium">MCP Authentication:</span>
             {settings?.mcpKeyConfigured ? (
-              <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 text-xs">
+              <span className="flex items-center gap-1 text-status-success-text text-xs">
                 <CheckCircle2 className="h-3 w-3" />
                 MCP_SERVER_API_KEY configured
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400 text-xs">
+              <span className="flex items-center gap-1 text-status-warning-text text-xs">
                 <XCircle className="h-3 w-3" />
                 MCP_SERVER_API_KEY not set
               </span>
@@ -353,12 +353,12 @@ function AiAssistantSettingsContent() {
             <span className="font-medium">LLM Provider:</span>
             <span className="font-medium">{provider?.name || 'Anthropic'}</span>
             {provider?.configured ? (
-              <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 text-xs">
+              <span className="flex items-center gap-1 text-status-success-text text-xs">
                 <CheckCircle2 className="h-3 w-3" />
                 {provider?.envKey} configured
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400 text-xs">
+              <span className="flex items-center gap-1 text-status-warning-text text-xs">
                 <XCircle className="h-3 w-3" />
                 {provider?.envKey || 'ANTHROPIC_API_KEY'} not set
               </span>

package/src/modules/ai_assistant/components/McpConfigDialog.tsx

@@ -162,9 +162,9 @@ export default function McpConfigDialog({ open, onOpenChange, mcpUrl }: Props) {
           )}
 
           {apiKey && (
-            <div className="flex items-start gap-2 p-3 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
-              <AlertTriangle className="h-4 w-4 text-amber-600 dark:text-amber-400 mt-0.5 shrink-0" />
-              <p className="text-sm text-amber-700 dark:text-amber-300">
+            <div className="flex items-start gap-2 p-3 bg-status-warning-bg rounded-lg border border-status-warning-border">
+              <AlertTriangle className="h-4 w-4 text-status-warning-icon mt-0.5 shrink-0" />
+              <p className="text-sm text-status-warning-text">
                 {t('ai_assistant.mcp.saveKeyWarning')}
               </p>
             </div>

package/src/modules/ai_assistant/frontend/components/AiAssistantSettingsPageClient.tsx

@@ -168,12 +168,12 @@ function AiAssistantSettingsContent() {
             <span className="text-muted-foreground">Provider:</span>
             <span className="font-medium">{provider?.name || 'Anthropic'}</span>
             {provider?.configured ? (
-              <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400 text-xs">
+              <span className="flex items-center gap-1 text-status-success-text text-xs">
                 <CheckCircle2 className="h-3 w-3" />
                 Configured
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400 text-xs">
+              <span className="flex items-center gap-1 text-status-warning-text text-xs">
                 <XCircle className="h-3 w-3" />
                 Not configured
               </span>
@@ -201,7 +201,7 @@ function AiAssistantSettingsContent() {
                     p.id === provider?.id
                       ? 'bg-primary text-primary-foreground'
                       : p.configured
-                        ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400'
+                        ? 'bg-status-success-bg text-status-success-text'
                         : 'bg-muted text-muted-foreground'
                   }`}
                 >
@@ -215,7 +215,7 @@ function AiAssistantSettingsContent() {
         )}
 
         <p className="text-xs text-muted-foreground mt-3">
-          Set <code className="font-mono text-[10px] bg-muted px-1 rounded">OPENCODE_PROVIDER</code> in .env to change provider (anthropic, openai, google).
+          Set <code className="font-mono text-overline bg-muted px-1 rounded">OPENCODE_PROVIDER</code> in .env to change provider (anthropic, openai, google).
         </p>
       </div>
 
@@ -229,12 +229,12 @@ function AiAssistantSettingsContent() {
           <div className="flex items-center gap-2 text-sm">
             <span className="text-muted-foreground">Full-Text Search:</span>
             {health?.search?.available ? (
-              <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+              <span className="flex items-center gap-1 text-status-success-text">
                 <CheckCircle2 className="h-3 w-3" />
                 Meilisearch connected
               </span>
             ) : (
-              <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400">
+              <span className="flex items-center gap-1 text-status-warning-text">
                 <XCircle className="h-3 w-3" />
                 Not available
               </span>
@@ -262,7 +262,7 @@ function AiAssistantSettingsContent() {
           {/* OpenCode Server Status */}
           <div className={`p-4 rounded-lg border-2 ${
             health?.status === 'ok' && health.opencode?.healthy
-              ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-900/10'
+              ? 'border-status-success-border bg-status-success-bg'
               : 'border-destructive/50 bg-destructive/5'
           }`}>
             <div className="flex items-start justify-between">
@@ -270,7 +270,7 @@ function AiAssistantSettingsContent() {
                 <p className="text-sm font-medium">OpenCode Server</p>
                 <p className="text-xs text-muted-foreground mt-1">
                   {health?.status === 'ok' && health.opencode?.healthy ? (
-                    <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                    <span className="flex items-center gap-1 text-status-success-text">
                       <CheckCircle2 className="h-3 w-3" />
                       Connected
                     </span>
@@ -291,7 +291,7 @@ function AiAssistantSettingsContent() {
                 </p>
               </div>
               {health?.status === 'ok' && health.opencode?.healthy && (
-                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400">
+                <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon">
                   <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                   </svg>
@@ -306,9 +306,9 @@ function AiAssistantSettingsContent() {
               key={name}
               className={`p-4 rounded-lg border-2 ${
                 mcpStatus.status === 'connected'
-                  ? 'border-emerald-500/50 bg-emerald-50/50 dark:bg-emerald-900/10'
+                  ? 'border-status-success-border bg-status-success-bg'
                   : mcpStatus.status === 'connecting'
-                    ? 'border-amber-500/50 bg-amber-50/50 dark:bg-amber-900/10'
+                    ? 'border-status-warning-border bg-status-warning-bg'
                     : 'border-destructive/50 bg-destructive/5'
               }`}
             >
@@ -317,12 +317,12 @@ function AiAssistantSettingsContent() {
                   <p className="text-sm font-medium">MCP Server</p>
                   <p className="text-xs text-muted-foreground mt-1">
                     {mcpStatus.status === 'connected' ? (
-                      <span className="flex items-center gap-1 text-emerald-600 dark:text-emerald-400">
+                      <span className="flex items-center gap-1 text-status-success-text">
                         <CheckCircle2 className="h-3 w-3" />
                         Connected
                       </span>
                     ) : mcpStatus.status === 'connecting' ? (
-                      <span className="flex items-center gap-1 text-amber-600 dark:text-amber-400">
+                      <span className="flex items-center gap-1 text-status-warning-text">
                         <Loader2 className="h-3 w-3 animate-spin" />
                         Connecting...
                       </span>
@@ -337,7 +337,7 @@ function AiAssistantSettingsContent() {
                   <p className="text-xs text-muted-foreground mt-1">localhost:3001</p>
                 </div>
                 {mcpStatus.status === 'connected' && (
-                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-900/40 dark:text-emerald-400">
+                  <div className="flex h-5 w-5 items-center justify-center rounded-full bg-status-success-bg text-status-success-icon">
                     <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={3}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                     </svg>
@@ -349,7 +349,7 @@ function AiAssistantSettingsContent() {
 
           {/* Show placeholder if no MCP info */}
           {(!health?.mcp || Object.keys(health.mcp).length === 0) && (
-            <div className="p-4 rounded-lg border-2 border-border bg-muted/20">
+            <div className="p-4 rounded-lg border-2 border-border bg-muted/30">
               <div>
                 <p className="text-sm font-medium">MCP Server</p>
                 <p className="text-xs text-muted-foreground mt-1">