agentic-orchestrator 0.1.27 → 0.2.0

package/packages/web-dashboard/src/components/filter-bar.tsx

@@ -1,14 +1,11 @@
-import { COLUMN_ORDER } from '@/lib/dashboard-utils.js';
-import type { DashboardFilterState } from '@/lib/dashboard-utils.js';
+import React from 'react';
+import { FILTERABLE_PHASE_ORDER, type DashboardFilterState } from '@/lib/dashboard-utils.js';
 import type { FeatureSummary } from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
-import type { RefObject } from 'react';
 
 interface FilterBarProps {
   filters: DashboardFilterState;
   onFiltersChange: (next: DashboardFilterState) => void;
-  onClearFilters: () => void;
-  searchInputRef: RefObject<HTMLInputElement>;
 }
 
 const ACTIVITY_OPTIONS: NonNullable<FeatureSummary['activity_state']>[] = [
@@ -24,42 +21,13 @@ function toggleString(list: string[], value: string): string[] {
   return list.includes(value) ? list.filter((item) => item !== value) : [...list, value];
 }
 
-export function FilterBar({
-  filters,
-  onFiltersChange,
-  onClearFilters,
-  searchInputRef,
-}: FilterBarProps) {
+export function FilterBar({ filters, onFiltersChange }: FilterBarProps) {
   return (
-    <section className={styles.filterBar} aria-label="Filters">
-      <div className={styles.filterRow}>
-        <input
-          ref={searchInputRef}
-          type="search"
-          className={styles.filterSearch}
-          placeholder="Search feature id"
-          value={filters.searchText}
-          onChange={(event) =>
-            onFiltersChange({
-              ...filters,
-              searchText: event.target.value,
-              quickFilter: null,
-            })
-          }
-        />
-        <button
-          type="button"
-          className={`${styles.button} ${styles.buttonGhost}`}
-          onClick={onClearFilters}
-        >
-          Clear Filters
-        </button>
-      </div>
-
+    <div className={styles.advancedFilterGrid}>
       <div className={styles.filterRow}>
         <span className={styles.label}>Phase</span>
         <div className={styles.filterGroup}>
-          {COLUMN_ORDER.map((column) => {
+          {FILTERABLE_PHASE_ORDER.map((column) => {
             const isOn = filters.phases.includes(column.phase ?? 'unknown');
             return (
               <button
@@ -129,7 +97,7 @@ export function FilterBar({
           }
           aria-pressed={filters.gateFailuresOnly}
         >
-          Gate Failures Only
+          Gate Failures
         </button>
         <button
           type="button"
@@ -148,6 +116,6 @@ export function FilterBar({
           CI Not Success
         </button>
       </div>
-    </section>
+    </div>
   );
 }

package/packages/web-dashboard/src/components/focus/ActionableRiskList.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { ActionableRiskItem } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface ActionableRiskListProps {
+  risks: ActionableRiskItem[] | null | undefined;
+}
+
+function severityClass(severity: ActionableRiskItem['severity']): string {
+  if (severity === 'high') {
+    return `${styles.badge} ${styles.badgeFail}`;
+  }
+  if (severity === 'medium') {
+    return `${styles.badge} ${styles.badgePending}`;
+  }
+  return `${styles.badge} ${styles.badgeNeutral}`;
+}
+
+export function ActionableRiskList({ risks }: ActionableRiskListProps) {
+  const items = risks ?? [];
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Actionable Risks</h3>
+      {items.length === 0 ? (
+        <p className={styles.metaText}>No plan risks are currently recorded.</p>
+      ) : (
+        <ul className={styles.planList}>
+          {items.map((risk) => (
+            <li key={risk.id} className={styles.planListItem}>
+              <div className={styles.badgeRow}>
+                <span className={severityClass(risk.severity)}>{risk.severity}</span>
+                <strong>{risk.statement}</strong>
+              </div>
+              <p className={styles.metaText}>Why it matters: {risk.impact}</p>
+              <p className={styles.metaText}>Mitigation: {risk.mitigation}</p>
+              <p className={styles.metaText}>
+                Owner: {risk.owner_role ?? 'unknown'} · Freshness: {risk.freshness}
+                {risk.derived ? ' · derived' : ''}
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/focus/AgentRolePerformanceCard.tsx

@@ -0,0 +1,200 @@
+import React from 'react';
+import type { AgentRolePerformanceCardData, AgentRolePerformanceMetric } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface AgentRolePerformanceCardProps {
+  card: AgentRolePerformanceCardData;
+}
+
+type MetricKey = keyof AgentRolePerformanceCardData['metrics'];
+
+function roleAccentClass(role: AgentRolePerformanceCardData['role']): string {
+  if (role === 'planner') {
+    return styles.rolePerformancePlanner;
+  }
+  if (role === 'builder') {
+    return styles.rolePerformanceBuilder;
+  }
+  return styles.rolePerformanceQa;
+}
+
+function metricBadgeClass(ratio: number | null): string {
+  if (ratio == null) {
+    return styles.badgeNeutral;
+  }
+  if (ratio > 2.5) {
+    return styles.badgeFail;
+  }
+  if (ratio > 1.5) {
+    return styles.badgePending;
+  }
+  if (ratio >= 0.75 && ratio <= 1.25) {
+    return styles.badgePass;
+  }
+  return styles.badgeNeutral;
+}
+
+function metricBadgeLabel(ratio: number | null): string {
+  if (ratio == null) {
+    return 'n/a';
+  }
+  if (ratio >= 0.75 && ratio <= 1.25) {
+    return '✓';
+  }
+  const rounded = ratio.toFixed(1);
+  if (ratio > 1) {
+    return `↑ ${rounded}x`;
+  }
+  return `↓ ${rounded}x`;
+}
+
+function formatDurationMs(value: number | null): string {
+  if (value == null || !Number.isFinite(value)) {
+    return '-';
+  }
+  const rounded = Math.max(0, Math.round(value));
+  const totalSeconds = Math.floor(rounded / 1000);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) {
+    return `${hours}h ${minutes}m`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds.toString().padStart(2, '0')}s`;
+  }
+  return `${seconds}s`;
+}
+
+function formatCount(value: number | null): string {
+  if (value == null || !Number.isFinite(value)) {
+    return '-';
+  }
+  if (Number.isInteger(value)) {
+    return value.toLocaleString('en-US');
+  }
+  return value.toLocaleString('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  });
+}
+
+function formatMetricValue(metricKey: MetricKey, value: number | null): string {
+  if (metricKey === 'elapsed_ms') {
+    return formatDurationMs(value);
+  }
+  return formatCount(value);
+}
+
+function metricLabel(metricKey: MetricKey): string {
+  if (metricKey === 'elapsed_ms') {
+    return 'Runtime';
+  }
+  if (metricKey === 'request_count') {
+    return 'Requests';
+  }
+  if (metricKey === 'patch_count') {
+    return 'Patches';
+  }
+  return 'Plan submissions';
+}
+
+function shouldRenderMetric(
+  metric: AgentRolePerformanceMetric,
+  role: AgentRolePerformanceCardData['role'],
+): boolean {
+  const actual = metric.actual ?? 0;
+  const average = metric.average ?? 0;
+  if (actual === 0 && average === 0) {
+    return role === 'planner';
+  }
+  return true;
+}
+
+function providerModelLabel(card: AgentRolePerformanceCardData): string {
+  if (!card.provider && !card.model) {
+    return 'provider pending';
+  }
+  if (!card.provider) {
+    return card.model ?? 'provider pending';
+  }
+  if (!card.model) {
+    return card.provider;
+  }
+  if (card.model.startsWith(card.provider)) {
+    return card.model;
+  }
+  return `${card.provider}-${card.model}`;
+}
+
+function comparisonWidths(metric: AgentRolePerformanceMetric): { actual: number; average: number } {
+  const actual = metric.actual ?? 0;
+  const average = metric.average ?? 0;
+  const maxValue = Math.max(actual, average, 1);
+  return {
+    actual: Math.max(8, Math.round((actual / maxValue) * 100)),
+    average: Math.max(8, Math.round((average / maxValue) * 100)),
+  };
+}
+
+export function AgentRolePerformanceCard({ card }: AgentRolePerformanceCardProps) {
+  const renderedMetrics = (
+    Object.entries(card.metrics) as Array<[MetricKey, AgentRolePerformanceMetric]>
+  ).filter(([, metric]) => shouldRenderMetric(metric, card.role));
+
+  return (
+    <details
+      className={`${styles.section} ${styles.rolePerformanceCard} ${roleAccentClass(card.role)}`}
+    >
+      <summary className={styles.rolePerformanceSummary}>
+        <div className={styles.rolePerformanceIdentity}>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {card.role.toUpperCase()}
+          </span>
+          <strong className={styles.rolePerformanceLabel}>{providerModelLabel(card)}</strong>
+        </div>
+        <span className={`${styles.badge} ${metricBadgeClass(card.metrics.elapsed_ms.ratio)}`}>
+          {metricBadgeLabel(card.metrics.elapsed_ms.ratio)}
+        </span>
+      </summary>
+
+      <p className={styles.metaText}>{card.summary}</p>
+
+      <div className={styles.rolePerformanceMetricList}>
+        {renderedMetrics.map(([metricKey, metric]) => {
+          const widths = comparisonWidths(metric);
+          return (
+            <div key={metricKey} className={styles.rolePerformanceMetric}>
+              <div className={styles.rolePerformanceMetricHeader}>
+                <span className={styles.rolePerformanceMetricLabel}>{metricLabel(metricKey)}</span>
+                <span className={`${styles.badge} ${metricBadgeClass(metric.ratio)}`}>
+                  {metricBadgeLabel(metric.ratio)}
+                </span>
+              </div>
+              <div className={styles.rolePerformanceMetricValues}>
+                <span>{formatMetricValue(metricKey, metric.actual)}</span>
+                <span className={styles.metaText}>
+                  avg: {formatMetricValue(metricKey, metric.average)}
+                </span>
+              </div>
+              <div className={styles.rolePerformanceTrack}>
+                <div
+                  className={styles.rolePerformanceActualBar}
+                  style={{ width: `${widths.actual}%` }}
+                />
+                <div
+                  className={styles.rolePerformanceAverageBar}
+                  style={{ width: `${widths.average}%` }}
+                />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <p className={styles.metaText}>
+        Sample size: {card.sample_size.toLocaleString('en-US')} historical runs
+      </p>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/focus/BlockedGuidanceBanner.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import React from 'react';
+import {
+  decodeBlockedGuidance,
+  getCategoryIcon,
+  getSeverityColor,
+  type BlockedAction,
+  type BlockedGuidance,
+} from '@/lib/blocked-state-guidance.js';
+import type { FeatureSummary } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface BlockedGuidanceBannerProps {
+  feature: FeatureSummary;
+  onAction?: (action: BlockedAction) => void;
+  compact?: boolean;
+}
+
+export function BlockedGuidanceBanner({ feature, onAction, compact }: BlockedGuidanceBannerProps) {
+  if (feature.phase !== 'blocked') {
+    return null;
+  }
+
+  const guidance = decodeBlockedGuidance(feature);
+
+  if (compact) {
+    return <CompactBanner guidance={guidance} />;
+  }
+
+  return <FullBanner guidance={guidance} onAction={onAction} />;
+}
+
+function CompactBanner({ guidance }: { guidance: BlockedGuidance }) {
+  const icon = getCategoryIcon(guidance.category);
+  const color = getSeverityColor(guidance.severity);
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '0.35rem',
+        fontSize: '0.8rem',
+        color,
+        fontWeight: 500,
+      }}
+    >
+      <span>{icon}</span>
+      <span>{guidance.summary}</span>
+      {guidance.autoRecoverable && (
+        <span style={{ fontSize: '0.7rem', opacity: 0.7 }}>(auto-recoverable)</span>
+      )}
+    </span>
+  );
+}
+
+function FullBanner({
+  guidance,
+  onAction,
+}: {
+  guidance: BlockedGuidance;
+  onAction?: (action: BlockedAction) => void;
+}) {
+  const icon = getCategoryIcon(guidance.category);
+  const color = getSeverityColor(guidance.severity);
+
+  return (
+    <div
+      className={styles.card}
+      style={{
+        borderLeft: `3px solid ${color}`,
+        marginBottom: '0.75rem',
+      }}
+    >
+      <div
+        className={styles.cardHeader}
+        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+      >
+        <span style={{ fontSize: '1.1rem' }}>{icon}</span>
+        <strong>{guidance.summary}</strong>
+        {guidance.autoRecoverable && (
+          <span
+            style={{
+              fontSize: '0.7rem',
+              background: '#dbeafe',
+              color: '#1e40af',
+              padding: '0.1rem 0.4rem',
+              borderRadius: '8px',
+              marginLeft: '0.5rem',
+            }}
+          >
+            auto-recoverable
+          </span>
+        )}
+      </div>
+      <div className={styles.cardBody}>
+        <p style={{ margin: '0 0 0.75rem 0', fontSize: '0.85rem', lineHeight: 1.5 }}>
+          {guidance.explanation}
+        </p>
+        {guidance.actions.length > 0 && (
+          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            {guidance.actions.map((action, idx) => (
+              <button
+                key={idx}
+                onClick={() => onAction?.(action)}
+                title={action.description}
+                style={{
+                  padding: '0.3rem 0.75rem',
+                  borderRadius: '4px',
+                  border: idx === 0 ? 'none' : '1px solid var(--border)',
+                  background: idx === 0 ? color : 'var(--bg-card)',
+                  color: idx === 0 ? 'white' : 'inherit',
+                  cursor: onAction ? 'pointer' : 'default',
+                  fontSize: '0.82rem',
+                }}
+              >
+                {action.label}
+              </button>
+            ))}
+          </div>
+        )}
+        {guidance.actions.some((a) => a.cliCommand) && (
+          <details style={{ marginTop: '0.5rem', fontSize: '0.78rem' }}>
+            <summary style={{ cursor: 'pointer', opacity: 0.7 }}>CLI commands</summary>
+            <div style={{ marginTop: '0.25rem' }}>
+              {guidance.actions
+                .filter((a) => a.cliCommand)
+                .map((a, idx) => (
+                  <code
+                    key={idx}
+                    style={{
+                      display: 'block',
+                      background: 'var(--bg-code, #f5f5f5)',
+                      padding: '0.25rem 0.5rem',
+                      borderRadius: '4px',
+                      marginBottom: '0.15rem',
+                    }}
+                  >
+                    {a.cliCommand}
+                  </code>
+                ))}
+            </div>
+          </details>
+        )}
+      </div>
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/focus/CheckpointInspector.tsx

@@ -0,0 +1,123 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { DiffViewer } from '@/components/diff-viewer';
+import { parseUnifiedDiff, projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureCheckpoint } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface CheckpointInspectorProps {
+  checkpoint: FeatureCheckpoint | null;
+  featureId: string;
+  project: string;
+}
+
+interface CheckpointDiffResponse {
+  ok: boolean;
+  data?: {
+    checkpoint: FeatureCheckpoint;
+    diff: string;
+  };
+  error?: { message?: string };
+}
+
+export function CheckpointInspector({ checkpoint, featureId, project }: CheckpointInspectorProps) {
+  const [diff, setDiff] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [fileFilter, setFileFilter] = useState<string>('');
+
+  useEffect(() => {
+    if (!checkpoint) {
+      setDiff('');
+      return;
+    }
+    const controller = new AbortController();
+    setError(null);
+    setDiff('');
+    void (async () => {
+      try {
+        const suffix = projectQuery(project);
+        const joiner = suffix.length > 0 ? '&' : '?';
+        const response = await fetch(
+          `/api/features/${featureId}/checkpoint-diff${suffix}${joiner}checkpoint_id=${encodeURIComponent(checkpoint.checkpoint_id)}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as CheckpointDiffResponse;
+        if (!body.ok || !body.data) {
+          setError(body.error?.message ?? 'Unable to load checkpoint diff');
+          setDiff('');
+          return;
+        }
+        setDiff(body.data.diff);
+      } catch {
+        if (!controller.signal.aborted) {
+          setError('Unable to load checkpoint diff');
+          setDiff('');
+        }
+      }
+    })();
+    return () => controller.abort();
+  }, [checkpoint, featureId, project]);
+
+  const files = useMemo(() => parseUnifiedDiff(diff), [diff]);
+
+  useEffect(() => {
+    if (!files.some((file) => file.filePath === fileFilter)) {
+      setFileFilter(files[0]?.filePath ?? '');
+    }
+  }, [fileFilter, files]);
+
+  if (!checkpoint) {
+    return (
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>Checkpoint Inspector</h3>
+        <p className={styles.metaText}>
+          Select a checkpoint to inspect its diff and validation state.
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className={styles.section}>
+      <div className={styles.reviewTitleWrap}>
+        <div>
+          <h3 className={styles.sectionTitle}>Checkpoint Inspector</h3>
+          <p className={styles.metaText}>{checkpoint.checkpoint_id}</p>
+        </div>
+        {files.length > 0 ? (
+          <select
+            className={styles.actionSelect}
+            value={fileFilter}
+            onChange={(event) => setFileFilter(event.target.value)}
+          >
+            {files.map((file) => (
+              <option key={file.filePath} value={file.filePath}>
+                {file.filePath}
+              </option>
+            ))}
+          </select>
+        ) : null}
+      </div>
+      <div className={styles.badgeRow}>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+          {checkpoint.validation_status}
+        </span>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+          {checkpoint.files_changed.length} file(s)
+        </span>
+      </div>
+      {checkpoint.violations.length > 0 ? (
+        <ul className={styles.planList}>
+          {checkpoint.violations.map((violation) => (
+            <li key={violation} className={styles.planListItem}>
+              {violation}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {error ? <p className={styles.metaText}>{error}</p> : null}
+      {!error ? <DiffViewer diff={diff} fileFilter={fileFilter} /> : null}
+    </section>
+  );
+}