@open-mercato/ui 0.6.2-develop.3406.1.2b403f40da → 0.6.2-develop.3446.1.bd060c6017

package/src/ai/AiChat.tsx

@@ -2,17 +2,32 @@
 
 import * as React from 'react'
 import {
+  Activity,
+  AlertTriangle,
+  BadgeQuestionMark,
   Bot,
+  ChartNoAxesCombined,
   Check,
   ChevronDown,
   ChevronRight,
+  Circle,
+  CircleAlert,
+  CircleCheck,
+  CircleDashed,
   Copy,
+  Database,
+  FileQuestion,
+  GitBranch,
+  Handshake,
   Lightbulb,
+  ListChecks,
   Loader2,
   Paperclip,
   Plus,
+  Search,
   Send,
   Square,
+  TrendingDown,
   User,
   Wrench,
   X,
@@ -42,6 +57,7 @@ import {
 } from './ui-part-registry'
 import {
   useAiChat,
+  type AiAgentTaskSnapshot,
   type AiChatMessage,
   type AiChatMessageFile,
   type AiChatMessageUiPart,
@@ -50,6 +66,7 @@ import {
 import { useAiChatUpload } from './useAiChatUpload'
 import { useAiShortcuts } from './useAiShortcuts'
 import { LoopTracePanel, type LoopTracePanelTrace } from './LoopTracePanel'
+import { AiIcon } from './AiIcon'
 
 // Cap inline previews so we do not blow past localStorage quota (~5MB on most
 // browsers). Images larger than this still upload + send to the LLM as inline
@@ -381,16 +398,116 @@ function safeStringify(value: unknown): string {
   }
 }
 
+function titleWords(value: string): string {
+  return value.replace(/\b[a-z]/g, (char) => char.toUpperCase())
+}
+
+function formatToolCaption(call: AiChatToolCallSnapshot): string {
+  const rawCaption = call.caption?.trim()
+  if (!rawCaption) return call.toolName
+  const caption = titleWords(rawCaption.replace(/\s*·\s*/g, ' - '))
+  return `${caption} (${call.toolName})`
+}
+
+/**
+ * Visible agent task plan rendered above raw tool-call rows. Phase 1
+ * implementation of spec `.ai/specs/2026-05-13-ai-chat-visible-task-plan.md`:
+ * compact, fixed-height rows with icon + label + status badge so the
+ * panel does not jump while streaming. Source of truth is the
+ * client-local `taskPlan` array on the assistant message.
+ */
+function AiChatTaskPlan({ tasks }: { tasks: AiAgentTaskSnapshot[] }) {
+  const t = useT()
+  if (!tasks || tasks.length === 0) return null
+  return (
+    <div
+      className="rounded-md border border-border bg-muted/30"
+      data-ai-chat-task-plan=""
+      data-ai-chat-task-plan-count={tasks.length}
+    >
+      <div className="flex items-center gap-2 border-b border-border/60 px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+        <ListChecks className="size-3.5 text-muted-foreground" aria-hidden />
+        <span>{t('ai_assistant.chat.taskPlanTitle', 'Plan')}</span>
+        <span className="ml-auto font-mono">{tasks.length}</span>
+      </div>
+      <ul className="divide-y divide-border/60" data-ai-chat-task-plan-list="">
+        {tasks.map((task) => (
+          <AiChatTaskRow key={task.id} task={task} />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function AiChatTaskRow({ task }: { task: AiAgentTaskSnapshot }) {
+  const t = useT()
+  const statusLabel =
+    task.state === 'running'
+      ? t('ai_assistant.chat.taskRunning', 'running…')
+      : task.state === 'done'
+        ? t('ai_assistant.chat.taskDone', 'done')
+        : task.state === 'failed'
+          ? t('ai_assistant.chat.taskFailed', 'failed')
+          : task.state === 'skipped'
+            ? t('ai_assistant.chat.taskSkipped', 'skipped')
+            : t('ai_assistant.chat.taskPending', 'pending')
+  const Icon =
+    task.state === 'running'
+      ? Loader2
+      : task.state === 'done'
+        ? CircleCheck
+        : task.state === 'failed'
+          ? CircleAlert
+          : task.state === 'skipped'
+            ? CircleDashed
+            : Circle
+  const iconClassName = cn(
+    'size-3.5 shrink-0',
+    task.state === 'running' && 'animate-spin text-muted-foreground',
+    task.state === 'done' && 'text-status-success-icon',
+    task.state === 'failed' && 'text-destructive',
+    task.state === 'skipped' && 'text-muted-foreground',
+    task.state === 'pending' && 'text-muted-foreground',
+  )
+  const statusBadgeClassName = cn(
+    'ml-auto text-[10px] uppercase tracking-wide',
+    task.state === 'done' && 'text-status-success-text',
+    task.state === 'failed' && 'text-destructive',
+    task.state !== 'done' && task.state !== 'failed' && 'text-muted-foreground',
+  )
+  return (
+    <li
+      className="flex h-7 items-center gap-2 px-2 text-xs"
+      data-ai-chat-task-id={task.id}
+      data-ai-chat-task-state={task.state}
+      data-ai-chat-task-source={task.source}
+      data-ai-chat-task-tool-call-id={task.toolCallId}
+    >
+      <Icon className={iconClassName} aria-hidden />
+      <span className="truncate" title={task.detail ?? task.label}>
+        {task.label}
+      </span>
+      <span className={statusBadgeClassName}>{statusLabel}</span>
+    </li>
+  )
+}
+
 function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
   const t = useT()
   const [openId, setOpenId] = React.useState<string | null>(null)
   if (!toolCalls || toolCalls.length === 0) return null
   return (
-    <div className="space-y-1" data-ai-chat-tool-calls="">
-      <div className="flex items-center justify-between px-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-        <span>{t('ai_assistant.chat.agentTasksTitle', 'Agent tasks')}</span>
-        <span>{toolCalls.length}</span>
+    <div
+      className="rounded-md border border-border bg-muted/30"
+      data-ai-chat-tool-calls=""
+      data-ai-chat-tool-call-count={toolCalls.length}
+    >
+      <div className="flex items-center gap-2 border-b border-border/60 px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+        <Wrench className="size-3.5 text-muted-foreground" aria-hidden />
+        <span>{t('ai_assistant.chat.agentTasksTitle', 'Tool calls')}</span>
+        <span className="ml-auto font-mono">{toolCalls.length}</span>
       </div>
+      <ul className="divide-y divide-border/60">
       {toolCalls.map((call) => {
         const isOpen = openId === call.id
         const isError = call.state === 'error'
@@ -402,19 +519,20 @@ function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
             ? t('ai_assistant.chat.toolRunning', 'running…')
             : t('ai_assistant.chat.toolDone', 'done')
         return (
-          <div
+          <li
             key={call.id}
             className={cn(
-              'rounded-md border border-border bg-muted/30',
-              isError ? 'border-destructive/40 bg-destructive/5' : '',
+              isError ? 'bg-destructive/5' : '',
             )}
             data-ai-chat-tool-call={call.toolName}
             data-ai-chat-tool-state={call.state}
           >
-            <button
+            <Button
+              variant="ghost"
+              size="2xs"
               type="button"
               onClick={() => setOpenId(isOpen ? null : call.id)}
-              className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-xs font-medium hover:bg-muted/60"
+              className="w-full justify-start rounded-none px-2 text-left hover:bg-muted/60"
             >
               {isOpen ? (
                 <ChevronDown className="size-3.5 text-muted-foreground" aria-hidden />
@@ -432,7 +550,9 @@ function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
                   aria-hidden
                 />
               )}
-              <span className="font-mono">{call.toolName}</span>
+              <span className="truncate" title={formatToolCaption(call)}>
+                {formatToolCaption(call)}
+              </span>
               <span
                 className={cn(
                   'ml-auto text-[10px] uppercase tracking-wide',
@@ -445,7 +565,7 @@ function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
               >
                 {statusLabel}
               </span>
-            </button>
+            </Button>
             {isOpen ? (
               <div className="space-y-1 border-t border-border/60 px-2 py-1.5 text-xs">
                 {call.input !== undefined ? (
@@ -473,9 +593,10 @@ function ToolCallList({ toolCalls }: { toolCalls: AiChatToolCallSnapshot[] }) {
                 ) : null}
               </div>
             ) : null}
-          </div>
+          </li>
         )
       })}
+      </ul>
     </div>
   )
 }
@@ -534,6 +655,10 @@ function MessageRow({
   const Icon = isAssistant ? Bot : User
   const [copied, setCopied] = React.useState(false)
   const copyTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+  const visibleTaskPlan =
+    isAssistant && message.taskPlan
+      ? message.taskPlan.filter((task) => task.source === 'agent')
+      : []
 
   React.useEffect(() => {
     return () => {
@@ -638,6 +763,9 @@ function MessageRow({
             streaming={message.reasoningStreaming === true}
           />
         ) : null}
+        {visibleTaskPlan.length > 0 ? (
+          <AiChatTaskPlan tasks={visibleTaskPlan} />
+        ) : null}
         {isAssistant && message.toolCalls && message.toolCalls.length > 0 ? (
           <ToolCallList toolCalls={message.toolCalls} />
         ) : null}
@@ -735,6 +863,49 @@ function AiUiPartRenderer({
   )
 }
 
+function getSuggestionIcon(suggestion: AiChatSuggestion): {
+  icon: React.ReactNode
+  name: string
+} {
+  if (suggestion.icon) return { icon: suggestion.icon, name: 'custom' }
+  const text = `${suggestion.label} ${suggestion.prompt}`.toLowerCase()
+  const iconClassName = 'size-4 text-foreground'
+  if (/\b(analy[sz]e|analysis|health|score|summary|summari[sz]e)\b/.test(text)) {
+    return { icon: <ChartNoAxesCombined className={iconClassName} />, name: 'analysis' }
+  }
+  if (/\b(at[-\s]?risk|risk|stalled|stale|overdue|danger)\b/.test(text)) {
+    return { icon: <AlertTriangle className={iconClassName} />, name: 'risk' }
+  }
+  if (/\bpipeline|stage|funnel\b/.test(text)) {
+    return { icon: <GitBranch className={iconClassName} />, name: 'pipeline' }
+  }
+  if (/\bdeal|opportunit(?:y|ies)\b/.test(text)) {
+    return { icon: <Handshake className={iconClassName} />, name: 'deal' }
+  }
+  if (/\bdata|access|record|records|schema\b/.test(text)) {
+    return { icon: <Database className={iconClassName} />, name: 'data' }
+  }
+  if (/\bwhat can you help|help me|capabilit(?:y|ies)\b/.test(text)) {
+    return { icon: <BadgeQuestionMark className={iconClassName} />, name: 'capabilities' }
+  }
+  if (/\bsuggest|try|idea|ideas|recommend\b/.test(text)) {
+    return { icon: <Lightbulb className={iconClassName} />, name: 'ideas' }
+  }
+  if (/\bhow do i|how to|use this|instructions?|guide\b/.test(text)) {
+    return { icon: <FileQuestion className={iconClassName} />, name: 'guide' }
+  }
+  if (/\bfind|search|show|list|lookup\b/.test(text)) {
+    return { icon: <Search className={iconClassName} />, name: 'search' }
+  }
+  if (/\bactivity|activities|timeline|recent\b/.test(text)) {
+    return { icon: <Activity className={iconClassName} />, name: 'activity' }
+  }
+  if (/\bdown|drop|declin|loss|lost\b/.test(text)) {
+    return { icon: <TrendingDown className={iconClassName} />, name: 'trend-down' }
+  }
+  return { icon: <AiIcon className={iconClassName} />, name: 'ai' }
+}
+
 function WelcomeState({
   title,
   description,
@@ -768,22 +939,25 @@ function WelcomeState({
       </div>
       {suggestions && suggestions.length > 0 ? (
         <div className="flex w-full max-w-md flex-col gap-2" data-ai-chat-suggestions="">
-          {suggestions.map((suggestion, index) => (
-            <button
-              key={index}
-              type="button"
-              className="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-2.5 text-left text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
-              onClick={() => onSuggestionClick(suggestion.prompt)}
-              data-ai-chat-suggestion={index}
-            >
-              {suggestion.icon ? (
+          {suggestions.map((suggestion, index) => {
+            const suggestionIcon = getSuggestionIcon(suggestion)
+            return (
+              <Button
+                variant="outline"
+                key={index}
+                type="button"
+                className="h-auto w-full justify-start whitespace-normal rounded-lg bg-card px-3 py-2.5 text-left text-sm"
+                onClick={() => onSuggestionClick(suggestion.prompt)}
+                data-ai-chat-suggestion={index}
+                data-ai-chat-suggestion-icon={suggestionIcon.name}
+              >
                 <span className="shrink-0 text-muted-foreground" aria-hidden>
-                  {suggestion.icon}
+                  {suggestionIcon.icon}
                 </span>
-              ) : null}
-              <span>{suggestion.label}</span>
-            </button>
-          ))}
+                <span>{suggestion.label}</span>
+              </Button>
+            )
+          })}
         </div>
       ) : null}
     </div>

package/src/ai/AiIcon.tsx

@@ -6,7 +6,7 @@ export function AiIcon({ className, ...props }: LucideProps) {
     <Sparkles
       aria-hidden
       {...props}
-      className={cn(className, 'text-accent-indigo')}
+      className={cn('text-accent-indigo', className)}
     />
   )
 }