agentic-orchestrator 0.1.25 → 0.1.26

package/packages/web-dashboard/src/app/analytics/page.tsx

@@ -0,0 +1,451 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { shouldPollAnalytics } from '@/lib/analytics-utils.js';
+import { sparklinePath, sparklinePoints } from '@/lib/dashboard-utils.js';
+import styles from '@/styles/dashboard.module.css';
+import type { DashboardStatusPayload, ProviderAnalytics } from '@/lib/types.js';
+
+interface AnalyticsPayload {
+  providers: ProviderAnalytics[];
+  recent_outcomes: Array<{
+    feature_id: string;
+    status: string;
+    gate_pass: boolean;
+    retry_count: number;
+    duration_ms: number;
+    cost_usd: number;
+    recorded_at: string;
+  }>;
+}
+
+interface CollisionsPayload {
+  mode: 'matrix' | 'ranked_pairs';
+  matrix?: Array<{
+    feature_id: string;
+    with_feature_id: string;
+    collisions?: unknown;
+    fingerprint?: string;
+  }>;
+  ranked_pairs?: Array<{
+    feature_id: string;
+    with_feature_id: string;
+    count: number;
+    fingerprint: string;
+  }>;
+}
+
+type SortColumn =
+  | 'provider'
+  | 'model'
+  | 'total_features'
+  | 'success_rate'
+  | 'avg_cost_usd'
+  | 'avg_duration_ms'
+  | 'avg_retry_count';
+type SortDirection = 'asc' | 'desc';
+
+function queryParam(project: string): string {
+  return project.length > 0 ? `?project=${encodeURIComponent(project)}` : '';
+}
+
+function mergeTooltipLabel(index: number, total: number, merges: number): string {
+  const dayOffset = total - index - 1;
+  const day = new Date(Date.now() - dayOffset * 86_400_000);
+  const dayLabel = day.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+  return `${dayLabel}: ${merges} merges`;
+}
+
+export default function AnalyticsPage() {
+  const [project, setProject] = useState('');
+  const [analytics, setAnalytics] = useState<AnalyticsPayload>({
+    providers: [],
+    recent_outcomes: [],
+  });
+  const [collisions, setCollisions] = useState<CollisionsPayload | null>(null);
+  const [flaky, setFlaky] = useState<string[]>([]);
+  const [histogram, setHistogram] = useState<number[]>([]);
+  const [sortColumn, setSortColumn] = useState<SortColumn>('success_rate');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    setProject(params.get('project') ?? '');
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      const [analyticsRes, collisionsRes, flakyRes, statusRes] = await Promise.all([
+        fetch(`/api/analytics${queryParam(project)}`),
+        fetch(`/api/collisions${queryParam(project)}`),
+        fetch(`/api/flaky${queryParam(project)}`),
+        fetch(`/api/status${queryParam(project)}`),
+      ]);
+      const analyticsBody = (await analyticsRes.json()) as {
+        ok: boolean;
+        data?: AnalyticsPayload;
+      };
+      const collisionsBody = (await collisionsRes.json()) as {
+        ok: boolean;
+        data?: CollisionsPayload;
+      };
+      const flakyBody = (await flakyRes.json()) as {
+        ok: boolean;
+        data?: { suspects?: string[] };
+      };
+      const statusBody = (await statusRes.json()) as {
+        ok: boolean;
+        data?: DashboardStatusPayload;
+      };
+
+      if (cancelled) {
+        return;
+      }
+      setAnalytics(
+        analyticsBody.ok && analyticsBody.data
+          ? analyticsBody.data
+          : { providers: [], recent_outcomes: [] },
+      );
+      setCollisions(collisionsBody.ok ? (collisionsBody.data ?? null) : null);
+      setFlaky(
+        flakyBody.ok && Array.isArray(flakyBody.data?.suspects) ? flakyBody.data.suspects : [],
+      );
+      setHistogram(statusBody.ok ? (statusBody.data?.metrics?.merge_histogram_14d ?? []) : []);
+    };
+
+    void refresh();
+    const interval = setInterval(() => {
+      if (!shouldPollAnalytics(document.hidden)) {
+        return;
+      }
+      void refresh();
+    }, 30000);
+
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+    };
+  }, [project]);
+
+  const sortedProviders = useMemo(() => {
+    const copy = [...analytics.providers];
+    copy.sort((left, right) => {
+      const direction = sortDirection === 'asc' ? 1 : -1;
+      if (sortColumn === 'provider' || sortColumn === 'model') {
+        return String(left[sortColumn]).localeCompare(String(right[sortColumn])) * direction;
+      }
+      return (Number(left[sortColumn]) - Number(right[sortColumn])) * direction;
+    });
+    return copy;
+  }, [analytics.providers, sortColumn, sortDirection]);
+
+  const updateSort = (column: SortColumn) => {
+    if (sortColumn === column) {
+      setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'));
+      return;
+    }
+    setSortColumn(column);
+    setSortDirection(column === 'provider' || column === 'model' ? 'asc' : 'desc');
+  };
+
+  const sortState = (column: SortColumn): 'none' | 'ascending' | 'descending' => {
+    if (sortColumn !== column) {
+      return 'none';
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+  };
+
+  const sparkPath = sparklinePath(histogram, 280, 64);
+  const sparkPoints = sparklinePoints(histogram, 280, 64);
+  const collisionFeatures = useMemo(() => {
+    if (collisions?.mode !== 'matrix') {
+      return [];
+    }
+    const set = new Set<string>();
+    for (const item of collisions.matrix ?? []) {
+      set.add(item.feature_id);
+      set.add(item.with_feature_id);
+    }
+    return Array.from(set).sort((left, right) => left.localeCompare(right));
+  }, [collisions]);
+
+  const collisionMatrix = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        count: number;
+        dominantType: string;
+      }
+    >();
+    if (collisions?.mode !== 'matrix') {
+      return map;
+    }
+    for (const item of collisions.matrix ?? []) {
+      const key = `${item.feature_id}::${item.with_feature_id}`;
+      const payload = Array.isArray(item.collisions) ? item.collisions : [];
+      const count = payload.length;
+      const first = payload[0];
+      const dominantType =
+        first &&
+        typeof first === 'object' &&
+        typeof (first as Record<string, unknown>).type === 'string'
+          ? ((first as Record<string, unknown>).type as string)
+          : 'unknown';
+      map.set(key, { count, dominantType });
+      map.set(`${item.with_feature_id}::${item.feature_id}`, { count, dominantType });
+    }
+    return map;
+  }, [collisions]);
+
+  const collisionCellClass = (count: number): string => {
+    if (count >= 4) {
+      return styles.badgeFail;
+    }
+    if (count >= 2) {
+      return styles.badgePending;
+    }
+    if (count === 1) {
+      return styles.badgePass;
+    }
+    return styles.badgeNeutral;
+  };
+
+  return (
+    <div className={styles.dashboardRoot}>
+      <header className={styles.focusHeader}>
+        <div className={styles.titleBlock}>
+          <h1 className={styles.pageTitle}>Analytics</h1>
+          <p className={styles.pageSubtitle}>Provider performance and collision topology</p>
+        </div>
+        <div className={styles.inlineActions}>
+          <Link href={`/${queryParam(project)}`} className={styles.linkButton}>
+            Back To Board
+          </Link>
+        </div>
+      </header>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Throughput (14 days)</h2>
+        {sparkPath.length > 0 ? (
+          <svg
+            viewBox="0 0 280 64"
+            width="100%"
+            height={80}
+            role="img"
+            aria-label="14 day merge sparkline"
+          >
+            <path d={sparkPath} fill="none" stroke="#7fc6ff" strokeWidth={2} />
+            {sparkPoints.map((point) => (
+              <circle
+                key={`merge-point-${point.index}`}
+                className={styles.sparklinePoint}
+                cx={point.x}
+                cy={point.y}
+                r={4}
+              >
+                <title>{mergeTooltipLabel(point.index, sparkPoints.length, point.value)}</title>
+              </circle>
+            ))}
+          </svg>
+        ) : (
+          <p className={styles.metaText}>No merge data in the last 14 days.</p>
+        )}
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Provider Performance</h2>
+        <div className={styles.tableWrapper}>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th aria-sort={sortState('provider')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('provider')}
+                  >
+                    Provider
+                  </button>
+                </th>
+                <th aria-sort={sortState('model')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('model')}
+                  >
+                    Model
+                  </button>
+                </th>
+                <th aria-sort={sortState('total_features')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('total_features')}
+                  >
+                    Features
+                  </button>
+                </th>
+                <th aria-sort={sortState('success_rate')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('success_rate')}
+                  >
+                    Success
+                  </button>
+                </th>
+                <th aria-sort={sortState('avg_cost_usd')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('avg_cost_usd')}
+                  >
+                    Avg Cost
+                  </button>
+                </th>
+                <th aria-sort={sortState('avg_duration_ms')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('avg_duration_ms')}
+                  >
+                    Avg Duration
+                  </button>
+                </th>
+                <th aria-sort={sortState('avg_retry_count')}>
+                  <button
+                    type="button"
+                    className={styles.listHeaderButton}
+                    onClick={() => updateSort('avg_retry_count')}
+                  >
+                    Avg Retries
+                  </button>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedProviders.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className={styles.metaText}>
+                    No analytics outcomes recorded yet.
+                  </td>
+                </tr>
+              ) : (
+                sortedProviders.map((row) => (
+                  <tr key={`${row.provider}:${row.model}`}>
+                    <td>{row.provider}</td>
+                    <td>{row.model}</td>
+                    <td>{row.total_features}</td>
+                    <td>{(row.success_rate * 100).toFixed(1)}%</td>
+                    <td>${row.avg_cost_usd.toFixed(3)}</td>
+                    <td>{Math.round(row.avg_duration_ms)}ms</td>
+                    <td>{row.avg_retry_count.toFixed(2)}</td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Recent Outcomes</h2>
+        <ul className={styles.planList}>
+          {analytics.recent_outcomes.map((outcome) => (
+            <li
+              key={`${outcome.feature_id}-${outcome.recorded_at}`}
+              className={styles.planListItem}
+            >
+              {outcome.feature_id} • {outcome.status} • retries {outcome.retry_count} • $
+              {outcome.cost_usd.toFixed(3)}
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Collision Topology</h2>
+        {collisions?.mode === 'matrix' ? (
+          <div className={styles.tableWrapper}>
+            <div className={styles.badgeRow}>
+              <span className={`${styles.badge} ${styles.badgeNeutral}`}>Legend: 0 none</span>
+              <span className={`${styles.badge} ${styles.badgePass}`}>1 low</span>
+              <span className={`${styles.badge} ${styles.badgePending}`}>2-3 medium</span>
+              <span className={`${styles.badge} ${styles.badgeFail}`}>4+ high</span>
+            </div>
+            <p className={styles.metaText}>Hover a cell to view collision type and count.</p>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>Feature</th>
+                  {collisionFeatures.map((feature) => (
+                    <th key={`col-${feature}`}>{feature}</th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                {collisionFeatures.map((rowFeature) => (
+                  <tr key={`row-${rowFeature}`}>
+                    <th>{rowFeature}</th>
+                    {collisionFeatures.map((colFeature) => {
+                      if (rowFeature === colFeature) {
+                        return (
+                          <td key={`${rowFeature}:${colFeature}`}>
+                            <span className={`${styles.badge} ${styles.badgeNeutral}`}>-</span>
+                          </td>
+                        );
+                      }
+                      const pair = collisionMatrix.get(`${rowFeature}::${colFeature}`) ?? {
+                        count: 0,
+                        dominantType: 'none',
+                      };
+                      return (
+                        <td key={`${rowFeature}:${colFeature}`}>
+                          <span
+                            className={`${styles.badge} ${collisionCellClass(pair.count)}`}
+                            title={`Count: ${pair.count}, type: ${pair.dominantType}`}
+                          >
+                            {pair.count}
+                          </span>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <ul className={styles.planList}>
+            {(collisions?.ranked_pairs ?? []).map((item) => (
+              <li
+                key={`${item.feature_id}:${item.with_feature_id}`}
+                className={styles.planListItem}
+              >
+                {item.feature_id} ↔ {item.with_feature_id} ({item.count})
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      {flaky.length > 0 ? (
+        <section className={styles.section}>
+          <h2 className={styles.sectionTitle}>Flaky Suspects</h2>
+          <p className={styles.metaText}>
+            Probabilistic signal only. Treat this as triage guidance, not root-cause proof.
+          </p>
+          <ul className={styles.planList}>
+            {flaky.map((name) => (
+              <li key={name} className={styles.planListItem}>
+                {name}
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </div>
+  );
+}

package/packages/web-dashboard/src/app/api/analytics/route.ts

@@ -0,0 +1,62 @@
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { resolveProjectRoot } from '@/lib/aop-client.js';
+import { callOrchestratorTool } from '@/lib/orchestrator-tools.js';
+import type { ProviderAnalytics } from '@/lib/types.js';
+
+export const dynamic = 'force-dynamic';
+
+interface AnalyticsOutcome {
+  feature_id: string;
+  status: string;
+  gate_pass: boolean;
+  retry_count: number;
+  duration_ms: number;
+  cost_usd: number;
+  recorded_at: string;
+}
+
+export async function GET(req: Request): Promise<Response> {
+  const project = new URL(req.url).searchParams.get('project');
+  const repoRoot = await resolveProjectRoot(project);
+
+  const result = await callOrchestratorTool<{
+    aggregates?: ProviderAnalytics[];
+    outcomes?: AnalyticsOutcome[];
+  }>('performance.get_analytics', {}, { repoRoot });
+
+  if (!result.ok) {
+    return Response.json(
+      errorEnvelope(
+        result.error?.code ?? 'tool_unavailable',
+        result.error?.message ?? 'Unable to load analytics',
+        { retryable: result.error?.code === 'tool_timeout' },
+      ),
+      { status: 503 },
+    );
+  }
+
+  const aggregates = Array.isArray(result.data?.aggregates) ? result.data.aggregates : [];
+  const outcomes = Array.isArray(result.data?.outcomes) ? result.data.outcomes : [];
+  const recentOutcomes = outcomes
+    .slice(-20)
+    .reverse()
+    .map((item) => ({
+      feature_id: item.feature_id,
+      status: item.status,
+      gate_pass: item.gate_pass,
+      retry_count: item.retry_count,
+      duration_ms: item.duration_ms,
+      cost_usd: item.cost_usd,
+      recorded_at: item.recorded_at,
+    }));
+
+  return Response.json(
+    okEnvelope(
+      {
+        providers: aggregates,
+        recent_outcomes: recentOutcomes,
+      },
+      { source: 'tool' },
+    ),
+  );
+}

package/packages/web-dashboard/src/app/api/collisions/route.ts

@@ -0,0 +1,63 @@
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { resolveProjectRoot } from '@/lib/aop-client.js';
+import { callOrchestratorTool } from '@/lib/orchestrator-tools.js';
+
+export const dynamic = 'force-dynamic';
+
+interface CollisionItem {
+  feature_id: string;
+  with_feature_id: string;
+  collisions?: unknown;
+  fingerprint?: string;
+}
+
+function collisionCount(collisions: unknown): number {
+  if (!Array.isArray(collisions)) {
+    return 0;
+  }
+  return collisions.length;
+}
+
+export async function GET(req: Request): Promise<Response> {
+  const project = new URL(req.url).searchParams.get('project');
+  const repoRoot = await resolveProjectRoot(project);
+  const result = await callOrchestratorTool<{ collisions?: CollisionItem[] }>(
+    'collisions.scan',
+    {},
+    { repoRoot },
+  );
+
+  if (!result.ok) {
+    return Response.json(
+      errorEnvelope(
+        result.error?.code ?? 'tool_unavailable',
+        result.error?.message ?? 'Unable to load collisions',
+        { retryable: result.error?.code === 'tool_timeout' },
+      ),
+      { status: 503 },
+    );
+  }
+
+  const collisions = Array.isArray(result.data?.collisions) ? result.data.collisions : [];
+  const featureSet = new Set<string>();
+  for (const item of collisions) {
+    featureSet.add(item.feature_id);
+    featureSet.add(item.with_feature_id);
+  }
+
+  if (featureSet.size > 50) {
+    const rankedPairs = collisions
+      .map((item) => ({
+        feature_id: item.feature_id,
+        with_feature_id: item.with_feature_id,
+        count: collisionCount(item.collisions),
+        fingerprint: item.fingerprint ?? '',
+      }))
+      .sort((left, right) => right.count - left.count);
+    return Response.json(
+      okEnvelope({ mode: 'ranked_pairs', ranked_pairs: rankedPairs }, { source: 'tool' }),
+    );
+  }
+
+  return Response.json(okEnvelope({ mode: 'matrix', matrix: collisions }, { source: 'tool' }));
+}

package/packages/web-dashboard/src/app/api/features/[id]/cost/route.ts

@@ -0,0 +1,29 @@
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { readFeatureCost, readFeatureState, resolveProjectRoot } from '@/lib/aop-client.js';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> },
+): Promise<Response> {
+  const { id } = await params;
+  const project = new URL(req.url).searchParams.get('project');
+  const repoRoot = await resolveProjectRoot(project);
+  const feature = await readFeatureState(id, repoRoot);
+  if (!feature) {
+    return Response.json(errorEnvelope('feature_not_found', `Feature ${id} was not found`), {
+      status: 404,
+    });
+  }
+
+  const cost = await readFeatureCost(id, repoRoot);
+  if (!cost) {
+    return Response.json(
+      errorEnvelope('artifact_missing', `No cost data recorded yet for feature ${id}`),
+      { status: 404 },
+    );
+  }
+
+  return Response.json(okEnvelope(cost, { source: 'artifact' }));
+}

package/packages/web-dashboard/src/app/api/features/[id]/review-brief/route.ts

@@ -0,0 +1,31 @@
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { readFeatureReviewBrief, readFeatureState, resolveProjectRoot } from '@/lib/aop-client.js';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> },
+): Promise<Response> {
+  const { id } = await params;
+  const project = new URL(req.url).searchParams.get('project');
+  const repoRoot = await resolveProjectRoot(project);
+  const feature = await readFeatureState(id, repoRoot);
+  if (!feature) {
+    return Response.json(errorEnvelope('feature_not_found', `Feature ${id} was not found`), {
+      status: 404,
+    });
+  }
+
+  const brief = await readFeatureReviewBrief(id, repoRoot);
+  if (!brief) {
+    return Response.json(
+      errorEnvelope('artifact_missing', `Review brief not generated yet for feature ${id}`),
+      {
+        status: 404,
+      },
+    );
+  }
+
+  return Response.json(okEnvelope(brief, { source: 'artifact' }));
+}

package/packages/web-dashboard/src/app/api/features/[id]/route.ts

@@ -1,4 +1,5 @@
 import { readFeatureDetail, resolveProjectRoot } from '@/lib/aop-client.js';
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
 
 export const dynamic = 'force-dynamic';
 
@@ -11,13 +12,9 @@ export async function GET(
   const repoRoot = await resolveProjectRoot(project);
   const detail = await readFeatureDetail(id, repoRoot);
   if (!detail) {
-    return Response.json(
-      {
-        ok: false,
-        error: { code: 'feature_not_found', message: `Feature ${id} not found` },
-      },
-      { status: 404 },
-    );
+    return Response.json(errorEnvelope('feature_not_found', `Feature ${id} not found`), {
+      status: 404,
+    });
   }
-  return Response.json({ ok: true, data: detail });
+  return Response.json(okEnvelope(detail, { source: 'artifact' }));
 }

package/packages/web-dashboard/src/app/api/features/[id]/test-index/route.ts

@@ -0,0 +1,31 @@
+import { errorEnvelope, okEnvelope } from '@/lib/api-envelope.js';
+import { readFeatureQaTestIndex, readFeatureState, resolveProjectRoot } from '@/lib/aop-client.js';
+
+export const dynamic = 'force-dynamic';
+
+export async function GET(
+  req: Request,
+  { params }: { params: Promise<{ id: string }> },
+): Promise<Response> {
+  const { id } = await params;
+  const project = new URL(req.url).searchParams.get('project');
+  const repoRoot = await resolveProjectRoot(project);
+  const feature = await readFeatureState(id, repoRoot);
+  if (!feature) {
+    return Response.json(errorEnvelope('feature_not_found', `Feature ${id} was not found`), {
+      status: 404,
+    });
+  }
+
+  const qaIndex = await readFeatureQaTestIndex(id, repoRoot);
+  if (!qaIndex) {
+    return Response.json(
+      errorEnvelope('artifact_missing', `qa_test_index.json not found for feature ${id}`),
+      {
+        status: 404,
+      },
+    );
+  }
+
+  return Response.json(okEnvelope(qaIndex, { source: 'artifact' }));
+}