@seed-ship/mcp-ui-solid 3.0.0 → 3.0.2

package/src/components/ScratchpadPanel.tsx

@@ -36,7 +36,7 @@ export interface ScratchpadPanelProps {
 
 const STATUS_BADGES: Record<ScratchpadState['status'], { label: string; class: string }> = {
   loading: { label: 'Loading...', class: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' },
-  ready: { label: 'Ready', class: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' },
+  ready: { label: 'Action available', class: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-900/30 dark:text-cyan-400' },
   waiting_human: { label: 'Your turn', class: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 animate-pulse' },
   processing: { label: 'Processing...', class: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' },
   complete: { label: 'Complete', class: 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' },
@@ -63,10 +63,49 @@ export const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {
     console.log(`[ScratchpadPanel:${props.state.id}] ${event}`, data || '')
   }
 
+  // ─── DX1: Proactive console messages (always, not just debug) ───
+
+  const VALID_TRANSITIONS: Record<string, string[]> = {
+    loading: ['processing', 'waiting_human', 'error'],
+    waiting_human: ['processing', 'ready', 'complete', 'error'],
+    processing: ['ready', 'complete', 'error', 'waiting_human'],
+    ready: ['processing', 'complete', 'error', 'waiting_human'],
+    complete: [],
+    error: ['processing', 'ready', 'waiting_human'],
+  }
+  let prevStatus = props.state.status
+
+  // Etape 1: create log
+  console.info(
+    `%c[MCP-UI] Scratchpad created%c id=${props.state.id} sections=${props.state.sections?.length || 0} status=${props.state.status}${props.pinned ? ' pinned=true' : ''}`,
+    'color: #10b981; font-weight: bold', 'color: inherit'
+  )
+
+  // Etape 3: status transitions + Etape 4: auto-close info
+  createEffect(() => {
+    const newStatus = props.state.status
+    if (newStatus !== prevStatus) {
+      console.info(`%c[MCP-UI] Scratchpad status%c ${props.state.id}: ${prevStatus} → ${newStatus}`, 'color: #3b82f6; font-weight: bold', 'color: inherit')
+      if (!VALID_TRANSITIONS[prevStatus]?.includes(newStatus)) {
+        console.warn(`[MCP-UI] Scratchpad ${props.state.id}: unusual transition ${prevStatus} → ${newStatus}. Expected: ${VALID_TRANSITIONS[prevStatus]?.join(', ') || 'none (terminal)'}`)
+      }
+      prevStatus = newStatus
+    }
+    // Etape 4
+    if (props.autoCloseDelay && newStatus !== 'complete') {
+      console.info(`[MCP-UI] Scratchpad ${props.state.id}: autoCloseDelay=${props.autoCloseDelay}ms but status='${newStatus}' — auto-close will NOT trigger.`)
+    }
+  })
+
   // Action aliases that auto-close the scratchpad
   const CLOSE_ALIASES = new Set(['done', 'close', 'dismiss', 'validate', 'cancel', 'sufficient'])
 
   const handleAction = (action: string, data?: unknown) => {
+    // DX1 Etape 5: action dispatch
+    console.info(`%c[MCP-UI] Action dispatched%c value='${action}' asyncAction=${!!props.asyncAction}`, 'color: #f59e0b; font-weight: bold', 'color: inherit')
+    if (!props.asyncAction && /^(try_alt:|retry|fetch|load)/.test(action)) {
+      console.warn(`[MCP-UI] ScratchpadPanel: action '${action}' looks async but asyncAction prop is not set. The button will NOT show a loading state.`)
+    }
     debugLog('onAction', { action, asyncAction: props.asyncAction, data })
     if (props.asyncAction && !CLOSE_ALIASES.has(action)) {
       setLoadingAction(action)
@@ -123,7 +162,7 @@ export const ScratchpadPanel: Component<ScratchpadPanelProps> = (props) => {
         props.state.status === 'waiting_human'
           ? 'border-blue-300 dark:border-blue-600'
           : 'border-gray-200 dark:border-gray-700'
-      }`}
+      } ${props.pinned ? 'sticky top-0 z-40' : ''}`}
       style={{ animation: 'scratchpad-slide-down 0.2s ease-out' }}
     >
       {/* Header */}
@@ -503,6 +542,9 @@ const EmbeddedFormSection: Component<{
         .filter(([, v]) => v !== undefined && v !== '' && !(Array.isArray(v) && v.length === 0))
     )
 
+    // DX1 Etape 7: form submit log
+    console.info(`%c[MCP-UI] Form submitted%c section=${props.sectionId} fields=${Object.keys(values).join(',')}`, 'color: #8b5cf6; font-weight: bold', 'color: inherit')
+
     if (props.onSubmit) {
       props.onSubmit(props.sectionId, values)
     } else {
@@ -547,7 +589,7 @@ const EnrichedStepsSection: Component<{
     <div class="space-y-3">
       <For each={stepsData().steps}>
         {(step: any) => (
-          <div class={`rounded-lg ${step.status === 'active' ? 'bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3' : 'px-1'}`}>
+          <div class={`rounded-lg ${step.status === 'active' ? 'bg-blue-50/50 dark:bg-blue-900/10 border border-blue-200 dark:border-blue-800 p-3 animate-pulse' : 'px-1'}`}>
             <div class={`flex items-center gap-2 text-sm font-medium ${
               step.status === 'done' ? 'text-green-600 dark:text-green-400'
               : step.status === 'active' ? 'text-blue-600 dark:text-blue-400'
@@ -822,7 +864,7 @@ const StepperProgressSection: Component<{ content: unknown }> = (props) => {
               </Show>
               <div class={`flex items-center gap-1 px-2 py-1 rounded text-xs ${
                 step.status === 'done' ? 'bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400'
-                : step.status === 'active' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium'
+                : step.status === 'active' ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 font-medium animate-pulse'
                 : step.status === 'error' ? 'bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-400'
                 : 'text-gray-400'
               }`}>
@@ -849,7 +891,10 @@ const ErrorSectionRenderer: Component<{
   const [showDetails, setShowDetails] = createSignal(false)
   const data = () => {
     const c = props.content as any
-    return { message: c?.message || 'Error', severity: c?.severity || 'error', retryAction: c?.retryAction, retryLabel: c?.retryLabel || 'Retry', details: c?.details, timestamp: c?.timestamp }
+    const d = { message: c?.message || 'Error', severity: c?.severity || 'error', retryAction: c?.retryAction, retryLabel: c?.retryLabel || 'Retry', details: c?.details, timestamp: c?.timestamp }
+    // DX1 Etape 8
+    console.info(`%c[MCP-UI] Error section rendered%c severity=${d.severity} retry=${!!d.retryAction}`, 'color: #ef4444; font-weight: bold', 'color: inherit')
+    return d
   }
   const isWarning = () => data().severity === 'warning'