@defai.digital/cli 13.4.4 → 13.4.7

package/dist/web/dashboard.js

@@ -431,7 +431,6 @@ export function createDashboardHTML() {
     }
 
     .provider-latency.fast { color: var(--accent-green); }
-    .provider-latency.medium { color: var(--accent-yellow); }
     .provider-latency.slow { color: var(--accent-red); }
 
     /* Agent list */
@@ -553,6 +552,26 @@ export function createDashboardHTML() {
       cursor: pointer;
     }
 
+    .refresh-button {
+      padding: 8px 16px;
+      background: var(--accent-blue);
+      border: none;
+      border-radius: 6px;
+      color: white;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background 0.2s, opacity 0.2s;
+    }
+
+    .refresh-button:hover:not(:disabled) {
+      background: var(--accent-blue-hover, #2563eb);
+    }
+
+    .refresh-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
     .history-table {
       width: 100%;
       border-collapse: collapse;
@@ -1485,6 +1504,17 @@ export function createDashboardHTML() {
       .conversation-message .metadata-badges {
         opacity: 1 !important;
       }
+
+      .conversation-message .message-bubble {
+        padding: 16px !important;
+      }
+    }
+
+    /* Remove border from last conversation message */
+    .conversation-message:last-child {
+      border-bottom: none !important;
+      margin-bottom: 0 !important;
+      padding-bottom: 0 !important;
     }
 
     @media (max-width: 480px) {
@@ -1621,6 +1651,10 @@ export function createDashboardHTML() {
         'discussion.provider': '\\u25C6',  // ◆ Provider response
         'discussion.consensus': '\\u2726', // ✦ Consensus reached
         'discussion.end': '\\u2713',
+        // Workflow/Agent step events
+        'workflow.start': '\\u25B6',
+        'workflow.step': '\\u2699',        // ⚙ Step execution
+        'workflow.end': '\\u25A0',
         'memory.write': '\\u270E',
         'memory.read': '\\u25B7',
         'error': '\\u26A0',
@@ -1948,9 +1982,10 @@ export function createDashboardHTML() {
       };
 
       // Render expanded details
-      const renderDetails = (startEvent, endEvent) => {
+      const renderDetails = (startEvent, endEvent, eventType) => {
         const payload = { ...(startEvent?.payload || {}), ...(endEvent?.payload || {}) };
         const context = { ...(startEvent?.context || {}), ...(endEvent?.context || {}) };
+        const type = eventType || startEvent?.type || endEvent?.type || '';
 
         const detailItems = [];
 
@@ -1989,6 +2024,69 @@ export function createDashboardHTML() {
           detailItems.push({ label: 'Votes', value: voteStr });
         }
 
+        // workflow.step event details (Agent execution steps)
+        if (type === 'workflow.step') {
+          if (payload.stepId) detailItems.push({ label: 'Step', value: payload.stepId });
+          if (payload.stepIndex !== undefined) detailItems.push({ label: 'Index', value: \`#\${payload.stepIndex + 1}\` });
+          if (payload.provider) detailItems.push({ label: 'Provider', value: payload.provider });
+          if (context.tokenUsage) {
+            const usage = context.tokenUsage;
+            if (usage.total) detailItems.push({ label: 'Tokens', value: usage.total.toLocaleString() });
+            else if (usage.input || usage.output) {
+              detailItems.push({ label: 'Tokens', value: \`\${(usage.input || 0).toLocaleString()} in / \${(usage.output || 0).toLocaleString()} out\` });
+            }
+          }
+        }
+
+        // Agent-specific details (from enriched run.end payload)
+        if (payload.agentDisplayName) detailItems.push({ label: 'Agent', value: payload.agentDisplayName });
+        if (payload.inputTask && !payload.topic) {
+          const taskPreview = String(payload.inputTask).substring(0, 150);
+          detailItems.push({ label: 'Task', value: taskPreview + (payload.inputTask.length > 150 ? '...' : '') });
+        }
+        if (payload.tokenUsage && typeof payload.tokenUsage === 'object') {
+          const usage = payload.tokenUsage;
+          if (usage.total) detailItems.push({ label: 'Tokens', value: usage.total.toLocaleString() });
+          else if (usage.input || usage.output) {
+            detailItems.push({ label: 'Tokens', value: \`\${(usage.input || 0).toLocaleString()} in / \${(usage.output || 0).toLocaleString()} out\` });
+          }
+        }
+
+        // Research-specific details
+        if (payload.tool?.startsWith('research')) {
+          if (payload.query) {
+            const queryPreview = String(payload.query).substring(0, 150);
+            detailItems.push({ label: 'Query', value: queryPreview + (payload.query.length > 150 ? '...' : '') });
+          }
+          if (payload.sourceCount !== undefined) detailItems.push({ label: 'Sources', value: payload.sourceCount });
+          if (payload.confidence !== undefined) detailItems.push({ label: 'Confidence', value: \`\${(payload.confidence * 100).toFixed(0)}%\` });
+          if (payload.url) detailItems.push({ label: 'URL', value: payload.url });
+          if (payload.title) detailItems.push({ label: 'Title', value: payload.title });
+          if (payload.reliability) detailItems.push({ label: 'Reliability', value: payload.reliability });
+          if (payload.contentLength) detailItems.push({ label: 'Content', value: \`\${payload.contentLength.toLocaleString()} chars\` });
+        }
+
+        // Review-specific details
+        if (payload.tool?.startsWith('review')) {
+          if (payload.focus) detailItems.push({ label: 'Focus', value: payload.focus });
+          if (payload.summary?.verdict) detailItems.push({ label: 'Verdict', value: payload.summary.verdict });
+          if (payload.summary?.healthScore !== undefined) {
+            detailItems.push({ label: 'Health', value: \`\${(payload.summary.healthScore * 100).toFixed(0)}%\` });
+          }
+          if (payload.summary?.bySeverity) {
+            const sev = payload.summary.bySeverity;
+            const parts = [];
+            if (sev.critical) parts.push(\`\${sev.critical} critical\`);
+            if (sev.warning) parts.push(\`\${sev.warning} warning\`);
+            if (sev.suggestion) parts.push(\`\${sev.suggestion} suggestion\`);
+            if (sev.note) parts.push(\`\${sev.note} note\`);
+            if (parts.length > 0) detailItems.push({ label: 'Issues', value: parts.join(', ') });
+          }
+          if (payload.filesReviewedCount !== undefined) detailItems.push({ label: 'Files', value: payload.filesReviewedCount });
+          if (payload.linesAnalyzed !== undefined) detailItems.push({ label: 'Lines', value: payload.linesAnalyzed.toLocaleString() });
+          if (payload.providerId) detailItems.push({ label: 'Provider', value: payload.providerId });
+        }
+
         if (payload.error) detailItems.push({ label: 'Error', value: typeof payload.error === 'object' ? payload.error.message : payload.error, isError: true });
 
         if (detailItems.length === 0) return null;
@@ -2137,7 +2235,7 @@ export function createDashboardHTML() {
                     </div>
                   )}
 
-                  {isExpanded && renderDetails(event, endEvent)}
+                  {isExpanded && renderDetails(event, endEvent, baseType)}
                 </div>
               </div>
             );
@@ -2609,57 +2707,104 @@ export function createDashboardHTML() {
         }
         // For 'discuss' command: topic as input, responses grouped by provider with multi-round support
         else if (traceData.commandType === 'discuss') {
-          // Get the discussion topic and configured round count
+          // Get the discussion topic
           const topic = traceData.input?.topic;
-          const configuredRounds = traceData.input?.rounds || 1;
-
-          // Provider responses: {provider: [response1, response2, ...]} or {provider: "single response"}
-          const responses = traceData.output?.responses;
-          if (responses && typeof responses === 'object') {
-            Object.entries(responses).forEach(([provider, providerResponses]) => {
-              const exchanges = [];
 
-              // Handle both array (multi-round) and string (single response) formats
-              const responseArray = Array.isArray(providerResponses)
-                ? providerResponses
-                : [providerResponses];
+          // Use providerConversations for real prompt/response content (preferred)
+          // Falls back to output.responses if providerConversations not available
+          if (traceData.providerConversations && traceData.providerConversations.length > 0) {
+            // Group by provider
+            const providerMap = {};
+            traceData.providerConversations.forEach(conv => {
+              if (!providerMap[conv.provider]) {
+                providerMap[conv.provider] = [];
+              }
+              providerMap[conv.provider].push(conv);
+            });
 
-              responseArray.forEach((response, roundIndex) => {
-                const roundNum = roundIndex + 1;
+            // Build exchanges for each provider
+            Object.entries(providerMap).forEach(([provider, conversations]) => {
+              const exchanges = [];
+              // Sort by round then timestamp
+              const sorted = conversations.sort((a, b) => {
+                if (a.round !== b.round) return a.round - b.round;
+                return new Date(a.timestamp).getTime() - new Date(b.timestamp).getTime();
+              });
 
-                // Add the prompt/ask for this round
-                if (roundNum === 1) {
-                  // Round 1: The original topic
+              sorted.forEach((conv, idx) => {
+                // Add the actual prompt
+                if (conv.prompt) {
                   exchanges.push({
-                    input: topic || 'Discussion topic',
+                    input: conv.prompt,
                     output: null,
-                    roundLabel: \`Ask \${roundNum}\`
-                  });
-                } else {
-                  // Rounds 2+: Cross-discussion prompt
-                  exchanges.push({
-                    input: \`Round \${roundNum}: Respond to other providers' perspectives from the previous round.\`,
-                    output: null,
-                    roundLabel: \`Ask \${roundNum}\`
+                    roundLabel: \`Ask \${conv.round}\`
                   });
                 }
-
-                // Add the response/reply for this round
-                if (response) {
+                // Add the response
+                if (conv.content) {
                   exchanges.push({
                     input: null,
-                    output: response,
-                    roundLabel: \`Reply \${roundNum}\`
+                    output: conv.content,
+                    latencyMs: conv.durationMs,
+                    roundLabel: \`Reply \${conv.round}\`
                   });
                 }
               });
 
-              groups.push({
-                provider: provider,
-                exchanges
-              });
+              if (exchanges.length > 0) {
+                groups.push({ provider, exchanges });
+              }
             });
           }
+          // Fallback: use output.responses (legacy format)
+          else {
+            const responses = traceData.output?.responses;
+            if (responses && typeof responses === 'object') {
+              Object.entries(responses).forEach(([provider, providerResponses]) => {
+                const exchanges = [];
+
+                // Handle both array (multi-round) and string (single response) formats
+                const responseArray = Array.isArray(providerResponses)
+                  ? providerResponses
+                  : [providerResponses];
+
+                responseArray.forEach((response, roundIndex) => {
+                  const roundNum = roundIndex + 1;
+
+                  // Add the prompt/ask for this round
+                  if (roundNum === 1) {
+                    // Round 1: The original topic
+                    exchanges.push({
+                      input: topic || 'Discussion topic',
+                      output: null,
+                      roundLabel: \`Ask \${roundNum}\`
+                    });
+                  } else {
+                    // Rounds 2+: Cross-discussion prompt
+                    exchanges.push({
+                      input: \`Round \${roundNum}: Respond to other providers' perspectives from the previous round.\`,
+                      output: null,
+                      roundLabel: \`Ask \${roundNum}\`
+                    });
+                  }
+
+                  // Add the response/reply for this round
+                  if (response) {
+                    exchanges.push({
+                      input: null,
+                      output: response,
+                      roundLabel: \`Reply \${roundNum}\`
+                    });
+                  }
+                });
+
+                groups.push({
+                  provider: provider,
+                  exchanges
+                });
+              });
+            }
+          }
 
           // Show synthesis/consensus if available
           const synthesisText = traceData.output?.synthesis;
@@ -2694,20 +2839,56 @@ export function createDashboardHTML() {
         }
         // For 'agent' command: task as initial input, then workflow steps
         else if (traceData.commandType === 'agent') {
-          // Initial task
+          // Get trace-level provider as fallback (from run.end finalProvider)
+          const traceProvider = traceData.provider || traceData.output?.finalProvider;
+
+          // Initial task - show agent name and provider
           const task = traceData.input?.task;
           if (task) {
             const taskContent = typeof task === 'object' ? task.task || JSON.stringify(task) : task;
+            const agentHeader = traceProvider
+              ? \`Agent: \${traceData.input?.agentId || 'unknown'} (via \${traceProvider})\`
+              : \`Agent: \${traceData.input?.agentId || 'unknown'}\`;
             groups.push({
-              provider: \`Agent: \${traceData.input?.agentId || 'unknown'}\`,
+              provider: agentHeader,
               exchanges: [{ input: taskContent, output: null }]
             });
           }
 
-          // Workflow steps with prompt/response
-          if (traceData.workflowSteps && traceData.workflowSteps.length > 0) {
+          // Use agentStepConversations for real LLM content (preferred, from workflow.step events)
+          if (traceData.agentStepConversations && traceData.agentStepConversations.length > 0) {
+            traceData.agentStepConversations.forEach((step, idx) => {
+              // Use step provider, fallback to trace-level provider, then 'unknown'
+              const stepProvider = step.provider || traceProvider || 'unknown';
+              const exchanges = [];
+
+              // Add response content if available
+              if (step.content) {
+                exchanges.push({
+                  input: null,
+                  output: step.content,
+                  latencyMs: step.durationMs,
+                  success: step.success,
+                  error: step.error,
+                  tokenCount: step.tokenCount,
+                  roundLabel: \`Step \${step.stepIndex + 1}\`
+                });
+              }
+
+              if (exchanges.length > 0) {
+                groups.push({
+                  provider: stepProvider,
+                  stepId: step.stepId || \`Step \${idx + 1}\`,
+                  exchanges
+                });
+              }
+            });
+          }
+          // Fallback: use workflowSteps (legacy format without LLM content)
+          else if (traceData.workflowSteps && traceData.workflowSteps.length > 0) {
             traceData.workflowSteps.forEach((step, idx) => {
-              const stepProvider = step.provider || 'claude';
+              // Use step provider, fallback to trace-level provider, then 'unknown'
+              const stepProvider = step.provider || traceProvider || 'unknown';
               const exchanges = [];
 
               // Add prompt if available
@@ -2741,18 +2922,158 @@ export function createDashboardHTML() {
             });
           }
 
-          // Final result
+          // Final result (or use finalContent from run.end payload)
           const result = traceData.output?.result;
-          if (result) {
-            const resultContent = typeof result === 'object'
-              ? (result.content || JSON.stringify(result, null, 2))
-              : result;
+          const finalContent = traceData.output?.finalContent;
+          const displayResult = result || finalContent;
+          if (displayResult) {
+            const resultContent = typeof displayResult === 'object'
+              ? (displayResult.content || JSON.stringify(displayResult, null, 2))
+              : displayResult;
             groups.push({
               provider: 'Final Result',
               exchanges: [{ input: null, output: resultContent }]
             });
           }
         }
+        // For 'review' command: show review summary and findings
+        else if (traceData.commandType === 'review' || traceData.workflowId?.startsWith('review')) {
+          const output = traceData.output || {};
+          const input = traceData.input || {};
+          const summary = output.summary;
+          const comments = output.comments || [];
+          const filesReviewed = output.filesReviewed || [];
+          // Get provider from output or top-level trace data
+          const reviewProvider = output.providerId || traceData.provider;
+
+          // Review parameters
+          const paths = input.paths || [];
+          const focus = input.focus || 'all';
+          const pathsText = Array.isArray(paths) ? paths.join(', ') : paths;
+
+          // Show provider in the header if available
+          const headerLabel = reviewProvider
+            ? \`Code Review (\${focus}) via \${reviewProvider}\`
+            : \`Code Review (\${focus})\`;
+
+          groups.push({
+            provider: headerLabel,
+            exchanges: [{
+              input: \`Review \${pathsText}\`,
+              output: null
+            }]
+          });
+
+          // Summary section
+          if (summary) {
+            const severityLine = summary.bySeverity
+              ? \`Critical: \${summary.bySeverity.critical || 0}, Warning: \${summary.bySeverity.warning || 0}, Suggestion: \${summary.bySeverity.suggestion || 0}, Note: \${summary.bySeverity.note || 0}\`
+              : '';
+            const summaryText = [
+              \`**Verdict**: \${summary.verdict || 'N/A'}\`,
+              \`**Health Score**: \${summary.healthScore !== undefined ? (summary.healthScore * 100).toFixed(0) + '%' : 'N/A'}\`,
+              severityLine ? \`**Issues**: \${severityLine}\` : '',
+              \`**Files Reviewed**: \${output.filesReviewedCount || filesReviewed.length}\`,
+              \`**Lines Analyzed**: \${output.linesAnalyzed?.toLocaleString() || 'N/A'}\`,
+            ].filter(Boolean).join('\\n');
+
+            groups.push({
+              provider: 'Summary',
+              exchanges: [{ input: null, output: summaryText }]
+            });
+          }
+
+          // Issues found
+          if (comments.length > 0) {
+            const issuesText = comments.map((c, idx) => {
+              const severityIcon = c.severity === 'critical' ? '🔴' :
+                                   c.severity === 'warning' ? '🟠' :
+                                   c.severity === 'suggestion' ? '🟡' : '🔵';
+              const location = c.file ? \`\${c.file}\${c.line ? ':' + c.line : ''}\` : '';
+              return [
+                \`### \${severityIcon} \${c.title || 'Issue ' + (idx + 1)}\`,
+                location ? \`**Location**: \${location}\` : '',
+                c.category ? \`**Category**: \${c.category}\` : '',
+                c.body ? \`\\n\${c.body}\` : '',
+                c.suggestion ? \`\\n**Suggestion**: \${c.suggestion}\` : '',
+                c.confidence ? \`\\n*Confidence: \${(c.confidence * 100).toFixed(0)}%*\` : '',
+              ].filter(Boolean).join('\\n');
+            }).join('\\n\\n---\\n\\n');
+
+            groups.push({
+              provider: \`Issues Found (\${output.commentCount || comments.length})\`,
+              exchanges: [{ input: null, output: issuesText }]
+            });
+          } else if (output.commentCount === 0) {
+            groups.push({
+              provider: 'Result',
+              exchanges: [{ input: null, output: '✅ No issues found! Code looks good.' }]
+            });
+          }
+
+          // Files reviewed
+          if (filesReviewed.length > 0 && filesReviewed.length <= 20) {
+            const filesText = filesReviewed.map((f, idx) => \`\${idx + 1}. \${f}\`).join('\\n');
+            groups.push({
+              provider: 'Files Reviewed',
+              exchanges: [{ input: null, output: filesText }]
+            });
+          }
+        }
+        // For 'research' command: query as input, sources and synthesis as output
+        else if (traceData.commandType === 'research' || traceData.workflowId?.startsWith('research')) {
+          const output = traceData.output || {};
+          const query = output.query || traceData.input?.query;
+          const sources = output.sources || [];
+          const synthesis = output.synthesis;
+          const confidence = output.confidence;
+          const codeExamples = output.codeExamples || [];
+
+          // Research query
+          if (query) {
+            groups.push({
+              provider: 'Research Query',
+              exchanges: [{ input: query, output: null }]
+            });
+          }
+
+          // Sources found
+          if (sources.length > 0) {
+            const sourcesText = sources.map((s, idx) => {
+              const reliability = s.reliability ? \` [\${s.reliability}]\` : '';
+              const relevance = s.relevanceScore ? \` (relevance: \${(s.relevanceScore * 100).toFixed(0)}%)\` : '';
+              return \`\${idx + 1}. **\${s.title || 'Untitled'}**\${reliability}\${relevance}\\n   \${s.url || 'No URL'}\\n   \${s.snippet ? s.snippet.substring(0, 200) + (s.snippet.length > 200 ? '...' : '') : ''}\`;
+            }).join('\\n\\n');
+
+            groups.push({
+              provider: \`Sources (\${sources.length})\`,
+              exchanges: [{ input: null, output: sourcesText }]
+            });
+          }
+
+          // Code examples
+          if (codeExamples.length > 0) {
+            const codeText = codeExamples.map((code, idx) => {
+              const lang = code.language || 'code';
+              const content = typeof code === 'string' ? code : (code.content || code.code || JSON.stringify(code));
+              return \`**Example \${idx + 1}** (\${lang}):\\n\\\`\\\`\\\`\${lang}\\n\${content}\\n\\\`\\\`\\\`\`;
+            }).join('\\n\\n');
+
+            groups.push({
+              provider: \`Code Examples (\${codeExamples.length})\`,
+              exchanges: [{ input: null, output: codeText }]
+            });
+          }
+
+          // Synthesis result
+          if (synthesis) {
+            const confidenceText = confidence !== undefined ? \` (Confidence: \${(confidence * 100).toFixed(0)}%)\` : '';
+            groups.push({
+              provider: 'Synthesis' + confidenceText,
+              exchanges: [{ input: 'Synthesized answer from all sources', output: synthesis }]
+            });
+          }
+        }
 
         return groups;
       };
@@ -2966,24 +3287,27 @@ export function createDashboardHTML() {
             onMouseEnter={() => setShowMeta(true)}
             onMouseLeave={() => setShowMeta(false)}
             style={{
-              marginBottom: '24px',
+              marginBottom: '32px',
+              paddingBottom: '24px',
+              borderBottom: '1px solid var(--border-color)',
             }}
           >
             <div className="message-container" style={{
               display: 'flex',
-              gap: '12px',
+              gap: '16px',
             }}>
               {/* Avatar - hidden on mobile via CSS class */}
               <div className="message-avatar" style={{
-                width: '36px',
-                height: '36px',
+                width: '44px',
+                height: '44px',
                 borderRadius: '50%',
-                background: isAsk ? 'rgba(88, 166, 255, 0.15)' : 'rgba(63, 185, 80, 0.15)',
+                background: isAsk ? 'rgba(88, 166, 255, 0.2)' : 'rgba(63, 185, 80, 0.2)',
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-                fontSize: '16px',
+                fontSize: '20px',
                 flexShrink: 0,
+                border: isAsk ? '2px solid rgba(88, 166, 255, 0.3)' : '2px solid rgba(63, 185, 80, 0.3)',
               }}>
                 {isAsk ? '👤' : '🤖'}
               </div>
@@ -2994,16 +3318,18 @@ export function createDashboardHTML() {
                 <div style={{
                   display: 'flex',
                   alignItems: 'center',
-                  gap: '8px',
-                  marginBottom: '8px',
+                  gap: '12px',
+                  marginBottom: '12px',
                   flexWrap: 'wrap',
                 }}>
                   <span style={{
-                    fontSize: '13px',
-                    fontWeight: 600,
+                    fontSize: '14px',
+                    fontWeight: 700,
                     color: isAsk ? 'var(--accent-blue)' : 'var(--accent-green)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.05em',
                   }}>
-                    {label}
+                    {isAsk ? '📤 ' : '📥 '}{label}
                   </span>
 
                   {/* Metadata badges - hidden by default, show on hover */}
@@ -3042,19 +3368,21 @@ export function createDashboardHTML() {
                 <div
                   className="message-bubble"
                   style={{
-                    background: isAsk ? 'rgba(88, 166, 255, 0.06)' : 'var(--bg-tertiary)',
-                    border: isAsk ? '1px solid rgba(88, 166, 255, 0.15)' : '1px solid var(--border-color)',
-                    borderLeft: \`4px solid \${isAsk ? 'var(--accent-blue)' : 'var(--accent-green)'}\`,
-                    padding: '16px',
+                    background: isAsk ? 'rgba(88, 166, 255, 0.08)' : 'rgba(63, 185, 80, 0.04)',
+                    border: isAsk ? '1px solid rgba(88, 166, 255, 0.2)' : '1px solid rgba(63, 185, 80, 0.15)',
+                    borderLeft: \`5px solid \${isAsk ? 'var(--accent-blue)' : 'var(--accent-green)'}\`,
+                    padding: '20px 24px',
                     borderRadius: '4px 12px 12px 4px',
-                    maxWidth: '75ch',
+                    maxWidth: '100%',
+                    boxShadow: isAsk ? '0 2px 8px rgba(88, 166, 255, 0.08)' : '0 2px 8px rgba(0, 0, 0, 0.1)',
                   }}
                 >
                   {/* Rendered content with code blocks */}
                   <div style={{
-                    fontSize: '14px',
-                    lineHeight: '1.7',
+                    fontSize: '15px',
+                    lineHeight: '1.8',
                     color: 'var(--text-primary)',
+                    letterSpacing: '0.01em',
                   }}>
                     {contentParts.map((part, idx) => {
                       if (part.type === 'code') {
@@ -3064,6 +3392,7 @@ export function createDashboardHTML() {
                         <div key={idx} style={{
                           whiteSpace: 'pre-wrap',
                           wordBreak: 'break-word',
+                          marginBottom: idx < contentParts.length - 1 ? '12px' : 0,
                         }}>
                           {part.content}
                         </div>
@@ -3185,24 +3514,58 @@ export function createDashboardHTML() {
               <span>Events: {trace.summary?.eventCount || trace.eventCount}</span>
               {trace.durationMs && <span>Duration: {trace.durationMs}ms</span>}
               {trace.commandType && <span>Type: {trace.commandType}</span>}
+              {/* Provider info - prominently displayed */}
+              {trace.provider && (
+                <span style={{
+                  background: 'var(--accent-blue)',
+                  color: 'white',
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  fontWeight: 600,
+                }}>
+                  Provider: {trace.provider}
+                </span>
+              )}
+              {trace.model && <span>Model: {trace.model}</span>}
+              {/* For discuss: show providers list */}
+              {trace.commandType === 'discuss' && trace.input?.providers && Array.isArray(trace.input.providers) && (
+                <span style={{
+                  background: 'var(--accent-purple)',
+                  color: 'white',
+                  padding: '2px 8px',
+                  borderRadius: '4px',
+                  fontWeight: 600,
+                }}>
+                  Providers: {trace.input.providers.join(', ')}
+                </span>
+              )}
+              {/* PRD-2026-003: Show classification badge if available */}
+              {trace.classification && (
+                <ClassificationHealthBadge classification={trace.classification} showDetails={true} />
+              )}
             </div>
           </div>
 
           {/* Provider Sub-tabs for Conversations */}
           {providerKeys.length > 0 && (
-            <div className="card" style={{ marginBottom: 16 }}>
-              <div className="card-header" style={{ borderBottom: 'none', paddingBottom: 0 }}>
-                <span className="card-title">Conversations</span>
-                <span className="card-badge">{providerKeys.length} provider{providerKeys.length !== 1 ? 's' : ''}</span>
+            <div className="card" style={{ marginBottom: 16, border: '2px solid var(--accent-purple)', borderRadius: '12px' }}>
+              <div className="card-header" style={{ borderBottom: 'none', paddingBottom: 0, background: 'rgba(163, 113, 247, 0.08)' }}>
+                <span className="card-title" style={{ fontSize: '18px', display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  💬 Conversations
+                </span>
+                <span className="card-badge" style={{ background: 'var(--accent-purple)', color: 'white' }}>
+                  {providerKeys.length} provider{providerKeys.length !== 1 ? 's' : ''}
+                </span>
               </div>
 
               {/* Provider tabs */}
               <div style={{
                 display: 'flex',
-                gap: 0,
-                borderBottom: '1px solid var(--border-color)',
-                padding: '0 16px',
-                overflowX: 'auto'
+                gap: '8px',
+                padding: '12px 16px',
+                overflowX: 'auto',
+                background: 'var(--bg-tertiary)',
+                borderBottom: '2px solid var(--border-color)',
               }}>
                 {providerKeys.map(providerKey => {
                   const group = providerGroups[providerKey];
@@ -3215,34 +3578,43 @@ export function createDashboardHTML() {
                       key={providerKey}
                       onClick={() => setActiveProviderTab(providerKey)}
                       style={{
-                        padding: '12px 16px',
-                        background: 'transparent',
-                        border: 'none',
-                        borderBottom: isActive ? '2px solid var(--accent-blue)' : '2px solid transparent',
-                        color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
+                        padding: '10px 16px',
+                        background: isActive ? 'var(--accent-blue)' : 'var(--bg-secondary)',
+                        border: isActive ? '2px solid var(--accent-blue)' : '2px solid var(--border-color)',
+                        borderRadius: '8px',
+                        color: isActive ? 'white' : 'var(--text-secondary)',
                         cursor: 'pointer',
                         fontSize: 13,
-                        fontWeight: isActive ? 600 : 400,
+                        fontWeight: 600,
                         display: 'flex',
                         alignItems: 'center',
-                        gap: 8,
+                        gap: 10,
                         whiteSpace: 'nowrap',
-                        transition: 'all 0.15s ease'
+                        transition: 'all 0.15s ease',
+                        boxShadow: isActive ? '0 2px 8px rgba(88, 166, 255, 0.3)' : 'none',
                       }}
                     >
                       <span style={{
-                        background: isActive ? 'var(--accent-purple)' : 'var(--bg-tertiary)',
-                        color: isActive ? 'white' : 'var(--text-secondary)',
-                        padding: '2px 8px',
-                        borderRadius: 4,
-                        fontSize: 11,
-                        fontWeight: 600
+                        background: isActive ? 'rgba(255, 255, 255, 0.2)' : 'var(--bg-tertiary)',
+                        color: isActive ? 'white' : 'var(--text-primary)',
+                        padding: '4px 10px',
+                        borderRadius: 6,
+                        fontSize: 12,
+                        fontWeight: 700,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.03em',
                       }}>
                         {providerKey}
                       </span>
-                      <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                      <span style={{
+                        fontSize: 12,
+                        color: isActive ? 'rgba(255, 255, 255, 0.9)' : 'var(--text-muted)',
+                        background: isActive ? 'rgba(255, 255, 255, 0.15)' : 'var(--bg-tertiary)',
+                        padding: '3px 8px',
+                        borderRadius: 4,
+                      }}>
                         {askCount > 0 && \`\${askCount} ask\`}
-                        {askCount > 0 && replyCount > 0 && ' / '}
+                        {askCount > 0 && replyCount > 0 && ' · '}
                         {replyCount > 0 && \`\${replyCount} reply\`}
                       </span>
                     </button>
@@ -3255,7 +3627,13 @@ export function createDashboardHTML() {
                 <section
                   aria-label="Chat History"
                   role="log"
-                  style={{ padding: 16 }}
+                  style={{
+                    padding: '24px',
+                    background: 'var(--bg-secondary)',
+                    borderRadius: '0 0 8px 8px',
+                    maxHeight: '80vh',
+                    overflowY: 'auto',
+                  }}
                 >
                   {providerGroups[effectiveActiveTab].model && (
                     <div style={{
@@ -3296,12 +3674,16 @@ export function createDashboardHTML() {
                     <div style={{
                       color: 'var(--text-muted)',
                       textAlign: 'center',
-                      padding: '48px 24px',
+                      padding: '64px 32px',
                       background: 'var(--bg-tertiary)',
-                      borderRadius: '8px',
+                      borderRadius: '12px',
+                      border: '2px dashed var(--border-color)',
                     }}>
-                      <div style={{ fontSize: '24px', marginBottom: '8px', opacity: 0.5 }}>💬</div>
-                      <div>No conversation data available</div>
+                      <div style={{ fontSize: '48px', marginBottom: '16px', opacity: 0.3 }}>💬</div>
+                      <div style={{ fontSize: '16px', fontWeight: 500 }}>No conversation data available</div>
+                      <div style={{ fontSize: '13px', marginTop: '8px', opacity: 0.7 }}>
+                        Conversation history will appear here when available
+                      </div>
                     </div>
                   )}
                 </section>
@@ -3424,6 +3806,40 @@ export function createDashboardHTML() {
         );
       }
 
+      const formatDuration = (ms) => {
+        if (!ms) return '-';
+        if (ms < 1000) return \`\${ms}ms\`;
+        if (ms < 60000) return \`\${(ms / 1000).toFixed(1)}s\`;
+        return \`\${(ms / 60000).toFixed(1)}m\`;
+      };
+
+      const formatTime = (isoString) => {
+        if (!isoString) return '-';
+        const date = new Date(isoString);
+        return date.toLocaleString();
+      };
+
+      const getStepTypeIcon = (type) => {
+        switch (type) {
+          case 'prompt': return '💬';
+          case 'tool': return '🔧';
+          case 'conditional': return '🔀';
+          case 'loop': return '🔄';
+          case 'parallel': return '⚡';
+          case 'delegate': return '👥';
+          default: return '📋';
+        }
+      };
+
+      const getStatusColor = (status) => {
+        switch (status) {
+          case 'success': return 'var(--accent-green)';
+          case 'failure': return 'var(--accent-red)';
+          case 'running': return 'var(--accent-blue)';
+          default: return 'var(--text-muted)';
+        }
+      };
+
       return (
         <div>
           <button className="back-button" onClick={onBack}>
@@ -3435,11 +3851,219 @@ export function createDashboardHTML() {
               <span>ID: {workflow.workflowId}</span>
               <span>Version: {workflow.version}</span>
               <span>Steps: {(workflow.steps && workflow.steps.length) || 0}</span>
+              {workflow.executionCount > 0 && (
+                <span>Executions: {workflow.executionCount}</span>
+              )}
             </div>
             {workflow.description && (
               <p style={{ marginTop: 8, color: 'var(--text-secondary)' }}>{workflow.description}</p>
             )}
           </div>
+
+          {/* Metadata section */}
+          {workflow.metadata && (
+            <div className="card" style={{ marginBottom: 16 }}>
+              <div className="card-header">
+                <span className="card-title">Metadata</span>
+              </div>
+              <div style={{ padding: '12px 16px', display: 'flex', flexWrap: 'wrap', gap: 16 }}>
+                {workflow.metadata.category && (
+                  <div>
+                    <span style={{ color: 'var(--text-muted)', fontSize: 11 }}>Category</span>
+                    <div style={{ color: 'var(--accent-blue)', fontWeight: 500 }}>{workflow.metadata.category}</div>
+                  </div>
+                )}
+                {workflow.metadata.tags && workflow.metadata.tags.length > 0 && (
+                  <div>
+                    <span style={{ color: 'var(--text-muted)', fontSize: 11 }}>Tags</span>
+                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 2 }}>
+                      {workflow.metadata.tags.map((tag, i) => (
+                        <span key={i} style={{
+                          background: 'var(--bg-tertiary)',
+                          padding: '2px 8px',
+                          borderRadius: 4,
+                          fontSize: 11,
+                          color: 'var(--text-secondary)'
+                        }}>{tag}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {workflow.metadata.requiredAbilities && workflow.metadata.requiredAbilities.length > 0 && (
+                  <div>
+                    <span style={{ color: 'var(--text-muted)', fontSize: 11 }}>Required Abilities</span>
+                    <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 2 }}>
+                      {workflow.metadata.requiredAbilities.map((ability, i) => (
+                        <span key={i} style={{
+                          background: 'rgba(163, 113, 247, 0.15)',
+                          padding: '2px 8px',
+                          borderRadius: 4,
+                          fontSize: 11,
+                          color: 'var(--accent-purple)'
+                        }}>{ability}</span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Workflow Steps with details */}
+          <div className="card" style={{ marginBottom: 16 }}>
+            <div className="card-header">
+              <span className="card-title">Workflow Steps ({workflow.steps?.length || 0})</span>
+            </div>
+            <div style={{ padding: '8px 0' }}>
+              {workflow.steps && workflow.steps.map((step, index) => (
+                <div key={step.stepId} style={{
+                  padding: '12px 16px',
+                  borderBottom: index < workflow.steps.length - 1 ? '1px solid var(--border-color)' : 'none'
+                }}>
+                  <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
+                    <div style={{
+                      width: 32,
+                      height: 32,
+                      borderRadius: 8,
+                      background: 'var(--bg-tertiary)',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      fontSize: 16,
+                      flexShrink: 0
+                    }}>
+                      {getStepTypeIcon(step.type)}
+                    </div>
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <span style={{ fontWeight: 500 }}>{step.name}</span>
+                        <span style={{
+                          background: 'var(--bg-tertiary)',
+                          padding: '2px 6px',
+                          borderRadius: 4,
+                          fontSize: 10,
+                          color: 'var(--text-muted)',
+                          textTransform: 'uppercase'
+                        }}>{step.type}</span>
+                        {step.timeout && (
+                          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                            ⏱ {formatDuration(step.timeout)}
+                          </span>
+                        )}
+                      </div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)', fontFamily: 'monospace', marginTop: 2 }}>
+                        {step.stepId}
+                      </div>
+                      {/* Step configuration details */}
+                      {step.config && (
+                        <div style={{
+                          marginTop: 8,
+                          padding: 10,
+                          background: 'var(--bg-primary)',
+                          borderRadius: 6,
+                          fontSize: 12
+                        }}>
+                          {step.config.agentId && (
+                            <div style={{ marginBottom: 4 }}>
+                              <span style={{ color: 'var(--text-muted)' }}>Agent: </span>
+                              <span style={{ color: 'var(--accent-blue)' }}>{step.config.agentId}</span>
+                            </div>
+                          )}
+                          {step.config.tool && (
+                            <div style={{ marginBottom: 4 }}>
+                              <span style={{ color: 'var(--text-muted)' }}>Tool: </span>
+                              <span style={{ color: 'var(--accent-green)' }}>{step.config.tool}</span>
+                            </div>
+                          )}
+                          {step.config.prompt && (
+                            <div>
+                              <span style={{ color: 'var(--text-muted)' }}>Prompt: </span>
+                              <pre style={{
+                                margin: '4px 0 0 0',
+                                padding: 8,
+                                background: 'var(--bg-secondary)',
+                                borderRadius: 4,
+                                fontSize: 11,
+                                color: 'var(--text-secondary)',
+                                whiteSpace: 'pre-wrap',
+                                wordBreak: 'break-word',
+                                maxHeight: 150,
+                                overflow: 'auto'
+                              }}>{step.config.prompt}</pre>
+                            </div>
+                          )}
+                          {step.config.args && Object.keys(step.config.args).length > 0 && (
+                            <div style={{ marginTop: 4 }}>
+                              <span style={{ color: 'var(--text-muted)' }}>Args: </span>
+                              <code style={{
+                                fontSize: 11,
+                                color: 'var(--text-secondary)',
+                                background: 'var(--bg-secondary)',
+                                padding: '2px 4px',
+                                borderRadius: 2
+                              }}>{JSON.stringify(step.config.args)}</code>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {/* Dependencies */}
+                      {step.dependencies && step.dependencies.length > 0 && (
+                        <div style={{ marginTop: 6, fontSize: 11, color: 'var(--text-muted)' }}>
+                          Depends on: {step.dependencies.join(', ')}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Recent Executions */}
+          {workflow.recentExecutions && workflow.recentExecutions.length > 0 && (
+            <div className="card" style={{ marginBottom: 16 }}>
+              <div className="card-header">
+                <span className="card-title">Recent Executions ({workflow.executionCount})</span>
+              </div>
+              <div style={{ padding: '8px 0' }}>
+                {workflow.recentExecutions.map((exec, index) => (
+                  <div key={exec.traceId} style={{
+                    padding: '10px 16px',
+                    borderBottom: index < workflow.recentExecutions.length - 1 ? '1px solid var(--border-color)' : 'none',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                  }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span style={{
+                        width: 8,
+                        height: 8,
+                        borderRadius: '50%',
+                        background: getStatusColor(exec.status)
+                      }}></span>
+                      <span style={{ fontFamily: 'monospace', fontSize: 12, color: 'var(--text-secondary)' }}>
+                        {exec.traceId.slice(0, 8)}
+                      </span>
+                      <span style={{
+                        fontSize: 10,
+                        padding: '2px 6px',
+                        borderRadius: 4,
+                        background: exec.status === 'success' ? 'rgba(63, 185, 80, 0.15)' :
+                                   exec.status === 'failure' ? 'rgba(248, 81, 73, 0.15)' : 'var(--bg-tertiary)',
+                        color: getStatusColor(exec.status)
+                      }}>{exec.status}</span>
+                    </div>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 12, color: 'var(--text-muted)' }}>
+                      <span>{formatDuration(exec.durationMs)}</span>
+                      <span>{formatTime(exec.startTime)}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Visual DAG */}
           <div className="card">
             <div className="card-header">
               <span className="card-title">Workflow DAG</span>
@@ -3457,6 +4081,23 @@ export function createDashboardHTML() {
       const [currentPage, setCurrentPage] = useState(0);
       const pageSize = 20;
 
+      // Provider colors matching the Provider Usage histogram
+      const providerColors = {
+        claude: { bg: 'rgba(255, 145, 77, 0.15)', color: 'var(--accent-orange)' },
+        grok: { bg: 'rgba(163, 113, 247, 0.15)', color: 'var(--accent-purple)' },
+        gemini: { bg: 'rgba(88, 166, 255, 0.15)', color: 'var(--accent-blue)' },
+        codex: { bg: 'rgba(63, 185, 80, 0.15)', color: 'var(--accent-green)' },
+        opencode: { bg: 'rgba(63, 185, 185, 0.15)', color: 'var(--accent-cyan)' },
+        antigravity: { bg: 'rgba(255, 200, 77, 0.15)', color: '#ffc84d' },
+        cursor: { bg: 'rgba(88, 166, 255, 0.15)', color: 'var(--accent-blue)' },
+        'local-llm': { bg: 'rgba(163, 163, 163, 0.15)', color: 'var(--text-secondary)' },
+      };
+
+      const getProviderStyle = (provider) => {
+        const lowerProvider = provider?.toLowerCase() || '';
+        return providerColors[lowerProvider] || { bg: 'var(--bg-secondary)', color: 'var(--text-secondary)' };
+      };
+
       const filteredTraces = traces.filter(trace => {
         if (filter !== 'all' && trace.status !== filter) return false;
         if (search && !trace.traceId.toLowerCase().includes(search.toLowerCase()) &&
@@ -3539,6 +4180,7 @@ export function createDashboardHTML() {
               <thead>
                 <tr>
                   <th>Name</th>
+                  <th>Providers</th>
                   <th>Status</th>
                   <th>Events</th>
                   <th>Duration</th>
@@ -3548,12 +4190,12 @@ export function createDashboardHTML() {
               <tbody>
                 {paginatedTraces.length === 0 ? (
                   <tr>
-                    <td colSpan="5" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
+                    <td colSpan="6" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
                       <div className="table-empty-state">
                         <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>📋</div>
                         <div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>No traces found</div>
                         <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>
-                          {statusFilter === 'all'
+                          {filter === 'all'
                             ? 'Run an agent or workflow to see execution traces here'
                             : 'Try changing the status filter to see more results'}
                         </div>
@@ -3565,7 +4207,44 @@ export function createDashboardHTML() {
                     <tr key={trace.traceId} onClick={() => onSelectTrace(trace.traceId)}>
                       <td style={{ fontFamily: 'monospace' }} title={trace.traceId}>{trace.name || trace.traceId.slice(0, 12) + '...'}</td>
                       <td>
-                        <span className={\`history-status \${trace.status}\`}>
+                        {trace.providers && trace.providers.length > 0 ? (
+                          <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
+                            {trace.providers.slice(0, 3).map(provider => {
+                              const style = getProviderStyle(provider);
+                              return (
+                                <span
+                                  key={provider}
+                                  style={{
+                                    padding: '2px 8px',
+                                    borderRadius: '10px',
+                                    background: style.bg,
+                                    color: style.color,
+                                    fontSize: '10px',
+                                    fontWeight: 600,
+                                    border: \`1px solid \${style.color}30\`,
+                                    whiteSpace: 'nowrap',
+                                  }}
+                                >
+                                  {provider}
+                                </span>
+                              );
+                            })}
+                            {trace.providers.length > 3 && (
+                              <span style={{
+                                padding: '2px 6px',
+                                color: 'var(--text-muted)',
+                                fontSize: '10px',
+                              }}>
+                                +{trace.providers.length - 3}
+                              </span>
+                            )}
+                          </div>
+                        ) : (
+                          <span style={{ color: 'var(--text-muted)', fontSize: '11px' }}>-</span>
+                        )}
+                      </td>
+                      <td>
+                        <span className={\`history-status \${trace.status}\`}>
                           <StatusIcon status={trace.status} />
                           {trace.status}
                         </span>
@@ -3642,9 +4321,28 @@ export function createDashboardHTML() {
     }
 
     // Full-page Providers view
-    function ProvidersView({ providers }) {
+    function ProvidersView({ providers: initialProviders }) {
       const [filter, setFilter] = useState('all');
       const [search, setSearch] = useState('');
+      const [refreshing, setRefreshing] = useState(false);
+      const [providers, setProviders] = useState(initialProviders);
+      const [lastRefresh, setLastRefresh] = useState(null);
+
+      const handleRefresh = async () => {
+        setRefreshing(true);
+        try {
+          const response = await fetch('/api/providers/refresh', { method: 'POST' });
+          const result = await response.json();
+          if (result.success && result.data?.providers) {
+            setProviders(result.data.providers);
+            setLastRefresh(new Date().toLocaleTimeString());
+          }
+        } catch (err) {
+          console.error('Failed to refresh providers:', err);
+        } finally {
+          setRefreshing(false);
+        }
+      };
 
       const filteredProviders = providers.filter(provider => {
         if (filter === 'available' && !provider.available) return false;
@@ -3674,6 +4372,19 @@ export function createDashboardHTML() {
               <option value="available">Available ({availableCount})</option>
               <option value="unavailable">Unavailable ({providers.length - availableCount})</option>
             </select>
+            <button
+              className="refresh-button"
+              onClick={handleRefresh}
+              disabled={refreshing}
+              title="Check provider health (sends test prompt to each provider)"
+            >
+              {refreshing ? '⏳ Checking...' : '🔄 Refresh Status'}
+            </button>
+            {lastRefresh && (
+              <span style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginLeft: '0.5rem' }}>
+                Last refresh: {lastRefresh}
+              </span>
+            )}
           </div>
 
           <div className="card">
@@ -3682,14 +4393,13 @@ export function createDashboardHTML() {
                 <tr>
                   <th>Provider</th>
                   <th>Status</th>
-                  <th>Latency</th>
-                  <th>Last Check</th>
+                  <th>Response Time</th>
                 </tr>
               </thead>
               <tbody>
                 {filteredProviders.length === 0 ? (
                   <tr>
-                    <td colSpan="4" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
+                    <td colSpan="3" style={{ padding: '3rem 1rem', textAlign: 'center' }}>
                       <div className="table-empty-state">
                         <div style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>🔌</div>
                         <div style={{ fontWeight: 500, marginBottom: '0.25rem' }}>No providers found</div>
@@ -3717,15 +4427,11 @@ export function createDashboardHTML() {
                       <td style={{ fontFamily: 'monospace' }}>
                         <span className={\`provider-latency \${
                           !provider.latencyMs ? '' :
-                          provider.latencyMs < 100 ? 'fast' :
-                          provider.latencyMs < 300 ? 'medium' : 'slow'
+                          provider.latencyMs < 5000 ? 'fast' : 'slow'
                         }\`}>
                           {provider.latencyMs ? \`\${provider.latencyMs}ms\` : '-'}
                         </span>
                       </td>
-                      <td style={{ color: 'var(--text-muted)' }}>
-                        {provider.lastCheck ? formatRelativeTime(provider.lastCheck) : '-'}
-                      </td>
                     </tr>
                   ))
                 )}
@@ -4151,8 +4857,7 @@ export function createDashboardHTML() {
                   </div>
                   <span className={\`provider-latency \${
                     !provider.latencyMs ? '' :
-                    provider.latencyMs < 100 ? 'fast' :
-                    provider.latencyMs < 300 ? 'medium' : 'slow'
+                    provider.latencyMs < 5000 ? 'fast' : 'slow'
                   }\`}>
                     {provider.latencyMs ? \`\${provider.latencyMs}ms\` : '-'}
                   </span>
@@ -4245,9 +4950,48 @@ export function createDashboardHTML() {
           <div className="card" style={{ marginBottom: 16 }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
               <div>
-                <h2 style={{ margin: 0, marginBottom: 8, color: 'var(--text-primary)' }}>
-                  {agent.displayName || agent.agentId}
-                </h2>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
+                  <h2 style={{ margin: 0, color: 'var(--text-primary)' }}>
+                    {agent.displayName || agent.agentId}
+                  </h2>
+                  {/* PRD-2026-004: Meta-agent badges */}
+                  {agent.metaAgent && (
+                    <span style={{
+                      padding: '2px 8px',
+                      borderRadius: 10,
+                      background: 'rgba(163, 113, 247, 0.2)',
+                      color: 'var(--accent-purple)',
+                      fontSize: 11,
+                      fontWeight: 600,
+                    }}>
+                      🎯 Meta-Agent
+                    </span>
+                  )}
+                  {agent.archetype && (
+                    <span style={{
+                      padding: '2px 8px',
+                      borderRadius: 10,
+                      background: 'rgba(88, 166, 255, 0.2)',
+                      color: 'var(--accent-blue)',
+                      fontSize: 11,
+                      fontWeight: 600,
+                    }}>
+                      🏗️ Archetype
+                    </span>
+                  )}
+                  {agent.category && (
+                    <span style={{
+                      padding: '2px 8px',
+                      borderRadius: 10,
+                      background: 'rgba(139, 148, 158, 0.15)',
+                      color: 'var(--text-muted)',
+                      fontSize: 11,
+                      textTransform: 'capitalize',
+                    }}>
+                      {agent.category}
+                    </span>
+                  )}
+                </div>
                 <p style={{ margin: 0, color: 'var(--text-secondary)', maxWidth: 600 }}>
                   {agent.description}
                 </p>
@@ -4349,6 +5093,239 @@ export function createDashboardHTML() {
             </div>
           )}
 
+          {/* PRD-2026-004: Orchestration Relationships */}
+          {(agent.orchestrates?.length > 0 || agent.canDelegateToArchetypes?.length > 0 || agent.canDelegateToMetaAgents?.length > 0 || agent.replaces?.length > 0) && (
+            <div className="card" style={{ marginBottom: 16 }}>
+              <h3 style={{ margin: 0, marginBottom: 16, fontSize: 14, color: 'var(--text-secondary)' }}>
+                🔗 Orchestration
+              </h3>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+                {agent.orchestrates?.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>Orchestrates</div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                      {agent.orchestrates.map((id, idx) => (
+                        <span key={idx} style={{
+                          padding: '4px 10px',
+                          borderRadius: 12,
+                          background: 'rgba(163, 113, 247, 0.15)',
+                          color: 'var(--accent-purple)',
+                          fontSize: 12,
+                        }}>
+                          {id}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {agent.canDelegateToArchetypes?.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>Can Delegate to Archetypes</div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                      {agent.canDelegateToArchetypes.map((id, idx) => (
+                        <span key={idx} style={{
+                          padding: '4px 10px',
+                          borderRadius: 12,
+                          background: 'rgba(88, 166, 255, 0.15)',
+                          color: 'var(--accent-blue)',
+                          fontSize: 12,
+                        }}>
+                          {id}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {agent.canDelegateToMetaAgents?.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>Can Delegate to Meta-Agents</div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                      {agent.canDelegateToMetaAgents.map((id, idx) => (
+                        <span key={idx} style={{
+                          padding: '4px 10px',
+                          borderRadius: 12,
+                          background: 'rgba(163, 113, 247, 0.15)',
+                          color: 'var(--accent-purple)',
+                          fontSize: 12,
+                        }}>
+                          {id}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {agent.replaces?.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>Replaces (Legacy Agents)</div>
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                      {agent.replaces.map((id, idx) => (
+                        <span key={idx} style={{
+                          padding: '4px 10px',
+                          borderRadius: 12,
+                          background: 'rgba(139, 148, 158, 0.15)',
+                          color: 'var(--text-muted)',
+                          fontSize: 12,
+                          textDecoration: 'line-through',
+                        }}>
+                          {id}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* PRD-2026-004: Task Classifier Config */}
+          {agent.taskClassifier && (
+            <div className="card" style={{ marginBottom: 16 }}>
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
+                <h3 style={{ margin: 0, fontSize: 14, color: 'var(--text-secondary)' }}>
+                  🎯 Task Classifier
+                </h3>
+                <span style={{
+                  padding: '2px 8px',
+                  borderRadius: 10,
+                  background: agent.taskClassifier.enabled !== false ? 'rgba(63, 185, 80, 0.2)' : 'rgba(139, 148, 158, 0.2)',
+                  color: agent.taskClassifier.enabled !== false ? 'var(--accent-green)' : 'var(--text-muted)',
+                  fontSize: 11,
+                }}>
+                  {agent.taskClassifier.enabled !== false ? 'Enabled' : 'Disabled'}
+                </span>
+              </div>
+              {agent.taskClassifier.defaultWorkflow && (
+                <div style={{ marginBottom: 16, padding: 12, background: 'var(--bg-tertiary)', borderRadius: 8 }}>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 4 }}>Default Workflow</div>
+                  <code style={{ color: 'var(--accent-cyan)', fontSize: 13 }}>{agent.taskClassifier.defaultWorkflow}</code>
+                </div>
+              )}
+              {agent.taskClassifier.rules?.length > 0 && (
+                <div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 8 }}>
+                    Classification Rules ({agent.taskClassifier.rules.length})
+                  </div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    {agent.taskClassifier.rules
+                      .sort((a, b) => (b.priority ?? 50) - (a.priority ?? 50))
+                      .map((rule, idx) => {
+                        const priority = rule.priority ?? 50;
+                        return (
+                        <div key={idx} style={{
+                          padding: 12,
+                          background: 'var(--bg-tertiary)',
+                          borderRadius: 8,
+                          borderLeft: \`3px solid \${
+                            priority >= 80 ? 'var(--accent-red)' :
+                            priority >= 70 ? 'var(--accent-orange)' :
+                            'var(--accent-blue)'
+                          }\`,
+                        }}>
+                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
+                            <span style={{
+                              padding: '2px 8px',
+                              borderRadius: 10,
+                              background: 'rgba(88, 166, 255, 0.15)',
+                              color: 'var(--accent-blue)',
+                              fontSize: 11,
+                              fontWeight: 500,
+                            }}>
+                              {rule.taskType}
+                            </span>
+                            <span style={{
+                              padding: '2px 8px',
+                              borderRadius: 10,
+                              background: priority >= 80 ? 'rgba(248, 81, 73, 0.15)' :
+                                         priority >= 70 ? 'rgba(227, 179, 65, 0.15)' :
+                                         'rgba(139, 148, 158, 0.15)',
+                              color: priority >= 80 ? 'var(--accent-red)' :
+                                     priority >= 70 ? 'var(--accent-orange)' :
+                                     'var(--text-muted)',
+                              fontSize: 10,
+                            }}>
+                              Priority: {priority}
+                            </span>
+                          </div>
+                          <div style={{ marginBottom: 4 }}>
+                            <code style={{ fontSize: 11, color: 'var(--accent-purple)', wordBreak: 'break-all' }}>
+                              /{rule.pattern}/i
+                            </code>
+                          </div>
+                          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                            → {rule.workflow}
+                          </div>
+                        </div>
+                      );})}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* PRD-2026-004: Capability Mappings */}
+          {agent.capabilityMappings?.length > 0 && (
+            <div className="card" style={{ marginBottom: 16 }}>
+              <h3 style={{ margin: 0, marginBottom: 16, fontSize: 14, color: 'var(--text-secondary)' }}>
+                📋 Capability Mappings ({agent.capabilityMappings.length})
+              </h3>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                {agent.capabilityMappings.map((mapping, idx) => (
+                  <div key={idx} style={{
+                    padding: 12,
+                    background: 'var(--bg-tertiary)',
+                    borderRadius: 8,
+                  }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
+                      <span style={{
+                        padding: '2px 8px',
+                        borderRadius: 10,
+                        background: 'rgba(88, 166, 255, 0.15)',
+                        color: 'var(--accent-blue)',
+                        fontSize: 11,
+                        fontWeight: 500,
+                      }}>
+                        {mapping.taskType}
+                      </span>
+                      {mapping.priority !== undefined && (
+                        <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                          Priority: {mapping.priority}
+                        </span>
+                      )}
+                    </div>
+                    {mapping.description && (
+                      <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginBottom: 8 }}>
+                        {mapping.description}
+                      </div>
+                    )}
+                    {mapping.abilities?.length > 0 && (
+                      <div style={{ marginBottom: 8 }}>
+                        <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>Abilities:</div>
+                        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                          {mapping.abilities.map((ability, i) => (
+                            <span key={i} style={{
+                              padding: '2px 6px',
+                              borderRadius: 8,
+                              background: 'rgba(63, 185, 80, 0.15)',
+                              color: 'var(--accent-green)',
+                              fontSize: 10,
+                            }}>
+                              {ability}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                    {mapping.workflowRef && (
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                        Workflow: <code style={{ color: 'var(--accent-cyan)' }}>{mapping.workflowRef}</code>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
           {/* Workflow Steps */}
           {agent.workflow?.length > 0 && (
             <div className="card" style={{ marginBottom: 16 }}>
@@ -4482,10 +5459,39 @@ export function createDashboardHTML() {
                   onClick={() => onSelectAgent(agent.agentId)}
                   style={{ cursor: 'pointer' }}
                 >
-                  <span className="agent-name" title={agent.description}>
-                    {agent.displayName || agent.agentId}
-                  </span>
-                  <span style={{ color: agent.enabled ? 'var(--accent-green)' : 'var(--text-muted)' }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
+                    <span className="agent-name" title={agent.description || ''} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {agent.displayName || agent.agentId}
+                    </span>
+                    {/* PRD-2026-004: Meta-agent badges */}
+                    {agent.metaAgent && (
+                      <span style={{
+                        padding: '1px 6px',
+                        borderRadius: 8,
+                        background: 'rgba(163, 113, 247, 0.2)',
+                        color: 'var(--accent-purple)',
+                        fontSize: 9,
+                        fontWeight: 600,
+                        flexShrink: 0,
+                      }}>
+                        META
+                      </span>
+                    )}
+                    {agent.archetype && (
+                      <span style={{
+                        padding: '1px 6px',
+                        borderRadius: 8,
+                        background: 'rgba(88, 166, 255, 0.2)',
+                        color: 'var(--accent-blue)',
+                        fontSize: 9,
+                        fontWeight: 600,
+                        flexShrink: 0,
+                      }}>
+                        ARCH
+                      </span>
+                    )}
+                  </div>
+                  <span style={{ color: agent.enabled ? 'var(--accent-green)' : 'var(--text-muted)', flexShrink: 0 }}>
                     {agent.enabled ? 'active' : 'disabled'}
                   </span>
                 </div>
@@ -4542,6 +5548,24 @@ export function createDashboardHTML() {
 
     // Traces card component (clickable)
     function TracesCard({ traces, onSelectTrace }) {
+      // Provider colors matching the Provider Usage histogram
+      const providerColors = {
+        claude: { bg: 'rgba(255, 145, 77, 0.15)', color: 'var(--accent-orange)' },
+        grok: { bg: 'rgba(163, 113, 247, 0.15)', color: 'var(--accent-purple)' },
+        gemini: { bg: 'rgba(88, 166, 255, 0.15)', color: 'var(--accent-blue)' },
+        codex: { bg: 'rgba(63, 185, 80, 0.15)', color: 'var(--accent-green)' },
+        opencode: { bg: 'rgba(63, 185, 185, 0.15)', color: 'var(--accent-cyan)' },
+        antigravity: { bg: 'rgba(255, 200, 77, 0.15)', color: '#ffc84d' },
+        cursor: { bg: 'rgba(88, 166, 255, 0.15)', color: 'var(--accent-blue)' },
+        'local-llm': { bg: 'rgba(163, 163, 163, 0.15)', color: 'var(--text-secondary)' },
+      };
+
+      const getProviderStyle = (provider) => {
+        const lowerProvider = provider?.toLowerCase() || '';
+        const colors = providerColors[lowerProvider] || { bg: 'var(--bg-secondary)', color: 'var(--text-secondary)' };
+        return colors;
+      };
+
       const formatDuration = (ms) => {
         if (!ms) return null;
         if (ms < 1000) return \`\${Math.round(ms)}ms\`;
@@ -4708,7 +5732,7 @@ export function createDashboardHTML() {
                       </span>
                     </div>
 
-                    {/* Providers row */}
+                    {/* Providers row - colored bubbles */}
                     {trace.providers && trace.providers.length > 0 && (
                       <div style={{
                         display: 'flex',
@@ -4716,21 +5740,25 @@ export function createDashboardHTML() {
                         marginTop: '6px',
                         flexWrap: 'wrap',
                       }}>
-                        {trace.providers.slice(0, 4).map(provider => (
-                          <span
-                            key={provider}
-                            style={{
-                              padding: '2px 6px',
-                              borderRadius: '4px',
-                              background: 'var(--bg-secondary)',
-                              color: 'var(--text-secondary)',
-                              fontSize: '10px',
-                              fontWeight: 500,
-                            }}
-                          >
-                            {provider}
-                          </span>
-                        ))}
+                        {trace.providers.slice(0, 4).map(provider => {
+                          const style = getProviderStyle(provider);
+                          return (
+                            <span
+                              key={provider}
+                              style={{
+                                padding: '2px 8px',
+                                borderRadius: '10px',
+                                background: style.bg,
+                                color: style.color,
+                                fontSize: '10px',
+                                fontWeight: 600,
+                                border: \`1px solid \${style.color}30\`,
+                              }}
+                            >
+                              {provider}
+                            </span>
+                          );
+                        })}
                         {trace.providers.length > 4 && (
                           <span style={{
                             padding: '2px 6px',
@@ -4944,6 +5972,293 @@ export function createDashboardHTML() {
       );
     }
 
+    // PRD-2026-003: Classification Health Badge
+    // Compact badge showing classification confidence and guard status
+    function ClassificationHealthBadge({ classification, showDetails = false }) {
+      if (!classification) {
+        return null;
+      }
+
+      const { taskType, confidence, guardResults } = classification;
+      const guardPassRate = guardResults && guardResults.length > 0
+        ? guardResults.filter(g => g.passed).length / guardResults.length
+        : 1.0;
+
+      // Determine badge color based on confidence
+      const getConfidenceLevel = (conf) => {
+        if (conf >= 0.8) return { color: 'var(--accent-green)', label: 'high', bg: 'rgba(63, 185, 80, 0.15)' };
+        if (conf >= 0.6) return { color: 'var(--accent-yellow)', label: 'medium', bg: 'rgba(210, 153, 34, 0.15)' };
+        return { color: 'var(--accent-red)', label: 'low', bg: 'rgba(248, 81, 73, 0.15)' };
+      };
+
+      const confidenceLevel = getConfidenceLevel(confidence || 0);
+      const guardStatus = guardPassRate >= 0.95 ? 'pass' : guardPassRate >= 0.5 ? 'partial' : 'fail';
+
+      const badgeStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        padding: '2px 8px',
+        borderRadius: '12px',
+        fontSize: '11px',
+        fontWeight: 500,
+        background: confidenceLevel.bg,
+        color: confidenceLevel.color,
+      };
+
+      if (!showDetails) {
+        // Compact mode - just show task type with confidence indicator
+        return (
+          <span style={badgeStyle} title={\`\${taskType} (confidence: \${((confidence || 0) * 100).toFixed(0)}%)\`}>
+            🎯 {taskType}
+          </span>
+        );
+      }
+
+      // Detailed mode - show confidence and guard status
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <span style={badgeStyle}>
+            🎯 {taskType}
+          </span>
+          <span style={{
+            ...badgeStyle,
+            background: confidenceLevel.bg,
+            color: confidenceLevel.color,
+          }}>
+            {((confidence || 0) * 100).toFixed(0)}% conf
+          </span>
+          {guardResults && guardResults.length > 0 && (
+            <span style={{
+              ...badgeStyle,
+              background: guardStatus === 'pass' ? 'rgba(63, 185, 80, 0.15)' :
+                         guardStatus === 'partial' ? 'rgba(210, 153, 34, 0.15)' :
+                         'rgba(248, 81, 73, 0.15)',
+              color: guardStatus === 'pass' ? 'var(--accent-green)' :
+                     guardStatus === 'partial' ? 'var(--accent-yellow)' :
+                     'var(--accent-red)',
+            }}>
+              🛡️ {guardResults.filter(g => g.passed).length}/{guardResults.length}
+            </span>
+          )}
+        </div>
+      );
+    }
+
+    // PRD-2026-003: Task Classification Card
+    function TaskClassificationCard({ classification }) {
+      if (!classification || classification.totalClassifications === 0) {
+        return null; // Don't show card if no classification data
+      }
+
+      const {
+        totalClassifications,
+        byTaskType,
+        guardPassRate,
+        averageConfidence,
+        fallbackRate,
+        sampleSize,
+      } = classification;
+
+      const taskTypes = Object.entries(byTaskType || {}).sort((a, b) => b[1] - a[1]);
+      const topTaskTypes = taskTypes.slice(0, 5);
+
+      const getConfidenceColor = (confidence) => {
+        if (confidence >= 0.8) return 'var(--accent-green)';
+        if (confidence >= 0.6) return 'var(--accent-yellow)';
+        return 'var(--accent-red)';
+      };
+
+      const getGuardColor = (rate) => {
+        if (rate >= 0.95) return 'var(--accent-green)';
+        if (rate >= 0.8) return 'var(--accent-yellow)';
+        return 'var(--accent-red)';
+      };
+
+      const statBoxStyle = {
+        background: 'var(--bg-tertiary)',
+        borderRadius: '8px',
+        padding: '16px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+      };
+
+      const iconStyle = {
+        width: '32px',
+        height: '32px',
+        borderRadius: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: '16px',
+        marginBottom: '4px',
+      };
+
+      return (
+        <div className="card">
+          <div className="card-header">
+            <span className="card-title">Task Classification (PRD-2026-003)</span>
+            <span style={{
+              background: 'var(--accent-purple)',
+              color: 'white',
+              padding: '2px 8px',
+              borderRadius: '12px',
+              fontSize: '11px',
+              fontWeight: 500,
+            }}>
+              {totalClassifications} classified
+            </span>
+          </div>
+
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gap: '12px',
+            marginTop: '12px'
+          }}>
+            {/* Total Classifications */}
+            <div style={statBoxStyle}>
+              <div style={{ ...iconStyle, background: 'rgba(163, 113, 247, 0.15)' }}>
+                <span style={{ color: 'var(--accent-purple)' }}>🎯</span>
+              </div>
+              <div style={{ fontSize: '28px', fontWeight: 700, color: 'var(--text-primary)', lineHeight: 1 }}>
+                {totalClassifications}
+              </div>
+              <div style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: 500 }}>Classifications</div>
+            </div>
+
+            {/* Average Confidence */}
+            <div style={statBoxStyle}>
+              <div style={{ ...iconStyle, background: 'rgba(63, 185, 80, 0.15)' }}>
+                <span style={{ color: 'var(--accent-green)' }}>📊</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+                <span style={{ fontSize: '28px', fontWeight: 700, color: getConfidenceColor(averageConfidence), lineHeight: 1 }}>
+                  {(averageConfidence * 100).toFixed(0)}
+                </span>
+                <span style={{ fontSize: '14px', color: 'var(--text-muted)' }}>%</span>
+              </div>
+              <div style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: 500 }}>Avg Confidence</div>
+              <div style={{
+                height: '4px',
+                background: 'var(--bg-secondary)',
+                borderRadius: '2px',
+                overflow: 'hidden',
+                marginTop: '4px'
+              }}>
+                <div style={{
+                  height: '100%',
+                  width: \`\${averageConfidence * 100}%\`,
+                  background: getConfidenceColor(averageConfidence),
+                  borderRadius: '2px',
+                  transition: 'width 0.3s ease'
+                }}></div>
+              </div>
+            </div>
+
+            {/* Guard Pass Rate */}
+            <div style={statBoxStyle}>
+              <div style={{ ...iconStyle, background: 'rgba(56, 211, 159, 0.15)' }}>
+                <span style={{ color: 'var(--accent-cyan)' }}>🛡️</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+                <span style={{ fontSize: '28px', fontWeight: 700, color: getGuardColor(guardPassRate), lineHeight: 1 }}>
+                  {(guardPassRate * 100).toFixed(0)}
+                </span>
+                <span style={{ fontSize: '14px', color: 'var(--text-muted)' }}>%</span>
+              </div>
+              <div style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: 500 }}>Guard Pass Rate</div>
+              <div style={{
+                height: '4px',
+                background: 'var(--bg-secondary)',
+                borderRadius: '2px',
+                overflow: 'hidden',
+                marginTop: '4px'
+              }}>
+                <div style={{
+                  height: '100%',
+                  width: \`\${guardPassRate * 100}%\`,
+                  background: getGuardColor(guardPassRate),
+                  borderRadius: '2px',
+                  transition: 'width 0.3s ease'
+                }}></div>
+              </div>
+            </div>
+
+            {/* Fallback Rate */}
+            <div style={statBoxStyle}>
+              <div style={{ ...iconStyle, background: 'rgba(248, 81, 73, 0.15)' }}>
+                <span style={{ color: 'var(--accent-red)' }}>⚠️</span>
+              </div>
+              <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px' }}>
+                <span style={{ fontSize: '28px', fontWeight: 700, color: fallbackRate > 0.1 ? 'var(--accent-yellow)' : 'var(--accent-green)', lineHeight: 1 }}>
+                  {(fallbackRate * 100).toFixed(0)}
+                </span>
+                <span style={{ fontSize: '14px', color: 'var(--text-muted)' }}>%</span>
+              </div>
+              <div style={{ fontSize: '12px', color: 'var(--text-muted)', fontWeight: 500 }}>Fallback Rate</div>
+              <div style={{ fontSize: '10px', color: 'var(--text-muted)', marginTop: '2px' }}>
+                No mapping selected
+              </div>
+            </div>
+          </div>
+
+          {/* Task Type Distribution */}
+          {topTaskTypes.length > 0 && (
+            <div style={{ marginTop: '16px' }}>
+              <div style={{ fontSize: '12px', color: 'var(--text-muted)', marginBottom: '8px', fontWeight: 500 }}>
+                Task Type Distribution
+              </div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
+                {topTaskTypes.map(([taskType, count]) => {
+                  const percentage = (count / totalClassifications) * 100;
+                  // PRD-2026-004: Task type colors including new types
+                  const taskTypeColors = {
+                    implementation: 'var(--accent-blue)',
+                    debugging: 'var(--accent-red)',
+                    refactoring: 'var(--accent-orange)',
+                    testing: 'var(--accent-green)',
+                    documentation: 'var(--accent-cyan)',
+                    analysis: 'var(--accent-purple)',
+                    review: 'var(--accent-yellow)',
+                    deployment: '#f85149',      // Red-orange for deploy actions
+                    research: '#a371f7',        // Purple for research
+                    unknown: 'var(--text-muted)',
+                  };
+                  const barColor = taskTypeColors[taskType] || 'var(--accent-purple)';
+                  return (
+                    <div key={taskType} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                      <div style={{ width: '100px', fontSize: '12px', color: 'var(--text-secondary)', textTransform: 'capitalize' }}>
+                        {taskType}
+                      </div>
+                      <div style={{ flex: 1, height: '8px', background: 'var(--bg-secondary)', borderRadius: '4px', overflow: 'hidden' }}>
+                        <div style={{
+                          height: '100%',
+                          width: \`\${percentage}%\`,
+                          background: barColor,
+                          borderRadius: '4px',
+                          transition: 'width 0.3s ease'
+                        }}></div>
+                      </div>
+                      <div style={{ width: '60px', fontSize: '11px', color: 'var(--text-muted)', textAlign: 'right' }}>
+                        {count} ({percentage.toFixed(0)}%)
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+              {taskTypes.length > 5 && (
+                <div style={{ fontSize: '10px', color: 'var(--text-muted)', marginTop: '8px' }}>
+                  +{taskTypes.length - 5} more task types
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      );
+    }
+
     // Main Dashboard component
     function Dashboard() {
       const [view, setView] = useState('dashboard');
@@ -5204,6 +6519,8 @@ export function createDashboardHTML() {
 
               <ExecutionStatsCard traces={data.traces || []} />
 
+              <TaskClassificationCard classification={data.classification} />
+
               <TracesCard traces={data.traces || []} onSelectTrace={handleSelectTrace} />
             </section>
           )}