agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/components/evidence-viewer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import * as React from 'react';
 import { projectQuery } from '@/lib/dashboard-utils.js';
 import type { EvidenceArtifact } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
@@ -34,14 +34,14 @@ async function readArtifact(url: string, name: string): Promise<string> {
 }
 
 export function EvidenceViewer({ featureId, evidence, project }: EvidenceViewerProps) {
-  const [expandedArtifact, setExpandedArtifact] = useState<string | null>(null);
-  const [payload, setPayload] = useState<EvidencePayload>({
+  const [expandedArtifact, setExpandedArtifact] = React.useState<string | null>(null);
+  const [payload, setPayload] = React.useState<EvidencePayload>({
     loading: false,
     content: '',
     error: null,
   });
 
-  useEffect(() => {
+  React.useEffect(() => {
     setExpandedArtifact(null);
     setPayload({ loading: false, content: '', error: null });
   }, [featureId]);
@@ -72,56 +72,70 @@ export function EvidenceViewer({ featureId, evidence, project }: EvidenceViewerP
   };
 
   return (
-    <div className={styles.section}>
-      <h3 className={styles.sectionTitle}>Evidence</h3>
-      {evidence.length === 0 ? (
-        <p className={styles.metaText}>No evidence artifacts found.</p>
-      ) : (
-        <ul className={styles.evidenceList}>
-          {evidence.map((artifact) => {
-            const isExpanded = expandedArtifact === artifact.name;
+    <details className={styles.section} open>
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Evidence</span>
+          <p className={styles.collapsibleSummaryDetail}>
+            Gate artifacts, raw outputs, and supporting files for this feature.
+          </p>
+        </div>
+        <div className={styles.collapsibleSummaryMeta}>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {evidence.length} artifact{evidence.length === 1 ? '' : 's'}
+          </span>
+        </div>
+      </summary>
+      <div className={styles.collapsibleBody}>
+        {evidence.length === 0 ? (
+          <p className={styles.metaText}>No evidence artifacts found.</p>
+        ) : (
+          <ul className={styles.evidenceList}>
+            {evidence.map((artifact) => {
+              const isExpanded = expandedArtifact === artifact.name;
 
-            return (
-              <li key={artifact.name} className={styles.evidenceRow}>
-                <div className={styles.evidenceRowHeader}>
-                  <a
-                    className={styles.linkButton}
-                    href={`/api/features/${featureId}/evidence/${artifact.name}${projectQuery(project)}`}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {artifact.name}
-                  </a>
-                  <div className={styles.inlineActions}>
-                    <span className={styles.metaText}>
-                      {new Date(artifact.updated_at).toLocaleString()}
-                    </span>
-                    <button
-                      type="button"
-                      className={`${styles.button} ${styles.buttonGhost}`}
-                      onClick={() => {
-                        void toggleArtifact(artifact.name);
-                      }}
+              return (
+                <li key={artifact.name} className={styles.evidenceRow}>
+                  <div className={styles.evidenceRowHeader}>
+                    <a
+                      className={styles.linkButton}
+                      href={`/api/features/${featureId}/evidence/${artifact.name}${projectQuery(project)}`}
+                      target="_blank"
+                      rel="noreferrer"
                     >
-                      {isExpanded ? 'Collapse' : 'Expand'}
-                    </button>
+                      {artifact.name}
+                    </a>
+                    <div className={styles.inlineActions}>
+                      <span className={styles.metaText}>
+                        {new Date(artifact.updated_at).toLocaleString()}
+                      </span>
+                      <button
+                        type="button"
+                        className={`${styles.button} ${styles.buttonGhost}`}
+                        onClick={() => {
+                          void toggleArtifact(artifact.name);
+                        }}
+                      >
+                        {isExpanded ? 'Collapse' : 'Expand'}
+                      </button>
+                    </div>
                   </div>
-                </div>
 
-                {isExpanded ? (
-                  payload.loading ? (
-                    <p className={styles.metaText}>Loading...</p>
-                  ) : payload.error ? (
-                    <p className={styles.metaText}>{payload.error}</p>
-                  ) : (
-                    <pre className={styles.evidenceContent}>{payload.content}</pre>
-                  )
-                ) : null}
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </div>
+                  {isExpanded ? (
+                    payload.loading ? (
+                      <p className={styles.metaText}>Loading...</p>
+                    ) : payload.error ? (
+                      <p className={styles.metaText}>{payload.error}</p>
+                    ) : (
+                      <pre className={styles.evidenceContent}>{payload.content}</pre>
+                    )
+                  ) : null}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </details>
   );
 }

package/packages/web-dashboard/src/components/feature-card.tsx

@@ -1,10 +1,12 @@
 import {
+  DISPLAYED_GATE_MODES,
   formatRelativeTime,
   getActivityDotClass,
   getGateMap,
   normalizeCiStatus,
   truncateText,
 } from '@/lib/dashboard-utils.js';
+import { BlockedGuidanceBanner } from '@/components/focus/BlockedGuidanceBanner';
 import type { FeatureSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
@@ -18,6 +20,9 @@ interface FeatureCardProps {
 }
 
 function phaseClassName(phase: FeatureSummary['phase']): string {
+  if (phase === 'intake') {
+    return styles.cardIntake;
+  }
   if (phase === 'planning') {
     return styles.cardPlanning;
   }
@@ -101,7 +106,16 @@ export function FeatureCard({
   if (feature.activity_state === 'active') {
     cardClasses.push(styles.cardActivePulse);
   }
+  if (feature.phase === 'merged') {
+    cardClasses.push(styles.cardMuted);
+  }
 
+  const isMainlineDivergence =
+    feature.status === 'blocked' &&
+    feature.recovery?.state === 'retrying' &&
+    feature.recovery.cause === 'mainline_divergence';
+  const isCollisionBlocked = feature.collision != null;
+  const isActiveMerge = feature.phase === 'ready_to_merge' && feature.activity_state === 'active';
   const gates = getGateMap(feature);
   const hasGateData = feature.gates && typeof feature.gates === 'object';
 
@@ -120,17 +134,58 @@ export function FeatureCard({
       </div>
 
       <div className={styles.cardMeta}>
-        <span>{formatRelativeTime(feature.last_updated)}</span>
-        <span>status {feature.status}</span>
+        <span>{formatRelativeTime(feature.phase_entered_at ?? feature.last_updated)}</span>
+        <span
+          style={
+            isActiveMerge
+              ? { display: 'inline-flex', alignItems: 'center', gap: '0.3rem' }
+              : undefined
+          }
+        >
+          {isActiveMerge && <span className={styles.spinnerSmall} />}
+          {(isMainlineDivergence || isCollisionBlocked) && (
+            <span style={{ color: '#f59e0b', marginRight: '0.25rem' }}>&#x26A0;</span>
+          )}
+          {feature.client_status_label ?? feature.status}
+        </span>
       </div>
 
+      {feature.phase === 'blocked' && (
+        <div className={styles.cardBlockedHint}>
+          <BlockedGuidanceBanner feature={feature} compact />
+        </div>
+      )}
+
+      {isCollisionBlocked && feature.phase !== 'blocked' && (
+        <div className={styles.cardBlockedHint}>
+          <span
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '0.35rem',
+              fontSize: '0.8rem',
+              color: '#f59e0b',
+              fontWeight: 500,
+            }}
+          >
+            <span>&#x26A0;</span>
+            <span>
+              Plan collision with{' '}
+              {feature.collision?.with_feature_ids.length === 1
+                ? feature.collision.with_feature_ids[0]
+                : `${feature.collision?.with_feature_ids.length ?? 0} features`}
+            </span>
+          </span>
+        </div>
+      )}
+
       {hasGateData ? (
         <div className={styles.badgeRow}>
-          <span className={`${styles.badge} ${gateBadgeClass(gates.fast)}`}>fast {gates.fast}</span>
-          <span className={`${styles.badge} ${gateBadgeClass(gates.full)}`}>full {gates.full}</span>
-          <span className={`${styles.badge} ${gateBadgeClass(gates.merge)}`}>
-            merge {gates.merge}
-          </span>
+          {DISPLAYED_GATE_MODES.map((mode) => (
+            <span key={mode} className={`${styles.badge} ${gateBadgeClass(gates[mode])}`}>
+              {mode} {gates[mode]}
+            </span>
+          ))}
         </div>
       ) : null}
 
@@ -141,10 +196,38 @@ export function FeatureCard({
         <span className={`${styles.badge} ${styles.badgeNeutral}`}>
           activity {feature.activity_state ?? 'unknown'}
         </span>
+        {feature.usage_tokens != null ? (
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {feature.usage_tokens.toLocaleString('en-US')} tokens
+          </span>
+        ) : null}
+        {feature.budget_state && feature.budget_state !== 'unknown' ? (
+          <span
+            className={`${styles.badge} ${
+              feature.budget_state === 'exceeded' || feature.budget_state === 'critical'
+                ? styles.badgeFail
+                : feature.budget_state === 'warning'
+                  ? styles.badgePending
+                  : styles.badgePass
+            }`}
+          >
+            budget {feature.budget_state}
+          </span>
+        ) : null}
         {awaitingDependencies ? (
           <span className={`${styles.badge} ${styles.badgePending}`}>Awaiting Dependencies</span>
         ) : null}
       </div>
+
+      {feature.attention_reasons && feature.attention_reasons.length > 0 ? (
+        <div className={styles.badgeRow}>
+          {feature.attention_reasons.slice(0, 3).map((reason) => (
+            <span key={reason} className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {reason}
+            </span>
+          ))}
+        </div>
+      ) : null}
     </button>
   );
 }

package/packages/web-dashboard/src/components/feature-cost-panel.tsx

@@ -1,9 +1,16 @@
-import type { CostSummary } from '@/lib/types.js';
+import React from 'react';
+import type {
+  CostSummary,
+  RoleUsageBreakdown,
+  TokenCostConversion,
+  UsageAvailability,
+} from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
 interface FeatureCostPanelProps {
   cost: CostSummary | null | undefined;
-  budgetLimitUsd?: number | null;
+  budgetLimitTokens?: number | null;
+  tokenCostConversion?: TokenCostConversion | null;
 }
 
 function budgetClass(ratio: number): string {
@@ -19,18 +26,80 @@ function budgetClass(ratio: number): string {
   return styles.badgePass;
 }
 
-export function FeatureCostPanel({ cost, budgetLimitUsd = null }: FeatureCostPanelProps) {
+function derivedUsd(
+  cost: CostSummary,
+  tokenCostConversion: TokenCostConversion | null | undefined,
+): number | null {
+  if (!tokenCostConversion) {
+    return null;
+  }
+  return (cost.tokens_used / 1000) * tokenCostConversion.usd_per_1k_tokens;
+}
+
+function availabilityLabel(status: UsageAvailability | null | undefined): string {
+  if (status === 'reported') {
+    return 'Reported';
+  }
+  if (status === 'estimated') {
+    return 'Estimated';
+  }
+  if (status === 'unavailable') {
+    return 'Unavailable';
+  }
+  return 'Unknown';
+}
+
+function availabilityBadgeClass(status: UsageAvailability | null | undefined): string {
+  if (status === 'reported') {
+    return styles.badgePass;
+  }
+  if (status === 'estimated') {
+    return styles.badgePending;
+  }
+  return styles.badgeNeutral;
+}
+
+function formatTokens(tokens: number | null): string {
+  if (tokens === null) {
+    return '-';
+  }
+  return tokens.toLocaleString('en-US');
+}
+
+function RoleUsageRow({ entry }: { entry: RoleUsageBreakdown }) {
+  return (
+    <tr>
+      <td className={styles.metaText}>{entry.role}</td>
+      <td className={styles.metaText}>
+        {entry.provider}/{entry.model}
+      </td>
+      <td className={styles.metaText}>{formatTokens(entry.total_tokens)}</td>
+      <td>
+        <span className={`${styles.badge} ${availabilityBadgeClass(entry.status)}`}>
+          {availabilityLabel(entry.status)}
+        </span>
+      </td>
+      <td className={styles.metaText}>{entry.invocation_count}</td>
+    </tr>
+  );
+}
+
+export function FeatureCostPanel({
+  cost,
+  budgetLimitTokens = null,
+  tokenCostConversion = null,
+}: FeatureCostPanelProps) {
   if (!cost) {
     return (
       <div className={styles.section}>
-        <h3 className={styles.sectionTitle}>Feature Budget Meter</h3>
-        <p className={styles.metaText}>No cost data recorded yet.</p>
+        <h3 className={styles.sectionTitle}>Feature Usage</h3>
+        <p className={styles.metaText}>No token usage recorded yet.</p>
       </div>
     );
   }
 
-  const hasLimit = typeof budgetLimitUsd === 'number' && budgetLimitUsd > 0;
-  const ratio = hasLimit ? cost.estimated_cost_usd / budgetLimitUsd : 0;
+  const hasLimit = typeof budgetLimitTokens === 'number' && budgetLimitTokens > 0;
+  const ratio = hasLimit ? cost.tokens_used / budgetLimitTokens : 0;
   const stateLabel = hasLimit
     ? ratio >= 1
       ? 'Exceeded'
@@ -40,27 +109,59 @@ export function FeatureCostPanel({ cost, budgetLimitUsd = null }: FeatureCostPan
           ? 'Warning'
           : 'Normal'
     : 'No Limit';
+  const usd = derivedUsd(cost, tokenCostConversion);
+  const byRole = cost.by_role ?? [];
 
   return (
     <details className={styles.section}>
-      <summary className={styles.sectionSummary}>Feature Budget Meter</summary>
+      <summary className={styles.sectionSummary}>Feature Usage</summary>
       <p className={styles.metaText}>Tokens: {cost.tokens_used.toLocaleString('en-US')}</p>
-      <p className={styles.metaText}>Estimated Cost: ${cost.estimated_cost_usd.toFixed(2)}</p>
+      {typeof usd === 'number' ? (
+        <p className={styles.metaText}>Derived USD: ${usd.toFixed(2)}</p>
+      ) : null}
       <p className={styles.metaText}>Last Recorded: {cost.recorded_at ?? '-'}</p>
       <div className={styles.badgeRow}>
         <span className={`${styles.badge} ${hasLimit ? budgetClass(ratio) : styles.badgeNeutral}`}>
           {stateLabel}
         </span>
+        <span className={`${styles.badge} ${availabilityBadgeClass(cost.aggregate_status)}`}>
+          Data: {availabilityLabel(cost.aggregate_status)}
+        </span>
         {hasLimit ? (
           <span className={`${styles.badge} ${styles.badgeNeutral}`}>
-            {Math.min(999, Math.max(0, Math.round(ratio * 100)))}% of ${budgetLimitUsd.toFixed(2)}
+            {Math.min(999, Math.max(0, Math.round(ratio * 100)))}% of{' '}
+            {budgetLimitTokens.toLocaleString('en-US')} tokens
           </span>
         ) : (
           <span className={`${styles.badge} ${styles.badgeNeutral}`}>
-            No per-feature budget limit configured
+            No per-feature token budget configured
           </span>
         )}
       </div>
+      {byRole.length > 0 ? (
+        <div>
+          <h4 className={styles.sectionTitle}>Per-Role Breakdown</h4>
+          <table className={styles.compactTable}>
+            <thead>
+              <tr>
+                <th className={styles.metaText}>Role</th>
+                <th className={styles.metaText}>Provider</th>
+                <th className={styles.metaText}>Tokens</th>
+                <th className={styles.metaText}>Status</th>
+                <th className={styles.metaText}>Invocations</th>
+              </tr>
+            </thead>
+            <tbody>
+              {byRole.map((entry) => (
+                <RoleUsageRow
+                  key={`${entry.role}-${entry.provider}-${entry.model}`}
+                  entry={entry}
+                />
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : null}
     </details>
   );
 }

package/packages/web-dashboard/src/components/feature-list-view.tsx

@@ -1,6 +1,11 @@
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
-import { buildFeatureFocusHref, formatRelativeTime, getGateMap } from '@/lib/dashboard-utils.js';
+import {
+  DISPLAYED_GATE_MODES,
+  buildFeatureFocusHref,
+  formatRelativeTime,
+  getGateMap,
+} from '@/lib/dashboard-utils.js';
 import type { FeatureSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
 
@@ -197,6 +202,8 @@ export function FeatureListView({
                 </button>
               </th>
               <th>Gates</th>
+              <th>Usage</th>
+              <th>Attention</th>
               <th>Actions</th>
             </tr>
           </thead>
@@ -250,11 +257,25 @@ export function FeatureListView({
                 >
                   <td>{feature.feature_id}</td>
                   <td>{feature.phase ?? 'unknown'}</td>
-                  <td>{feature.status}</td>
-                  <td>{formatRelativeTime(feature.last_updated)}</td>
+                  <td>{feature.client_status_label ?? feature.status}</td>
+                  <td>
+                    {formatRelativeTime(feature.last_meaningful_change_at ?? feature.last_updated)}
+                  </td>
+                  <td>
+                    <span className={styles.metaText}>
+                      {DISPLAYED_GATE_MODES.map((mode) => `${mode}:${gates[mode]}`).join(' ')}
+                    </span>
+                  </td>
+                  <td>
+                    <span className={styles.metaText}>
+                      {feature.usage_tokens != null
+                        ? `${feature.usage_tokens.toLocaleString('en-US')} tokens`
+                        : '-'}
+                    </span>
+                  </td>
                   <td>
                     <span className={styles.metaText}>
-                      fast:{gates.fast} full:{gates.full} merge:{gates.merge}
+                      {feature.attention_reasons?.slice(0, 2).join(', ') || '-'}
                     </span>
                   </td>
                   <td>