agentic-orchestrator 0.1.25 → 0.1.26

package/packages/web-dashboard/src/components/run-health-panel.tsx

@@ -0,0 +1,85 @@
+import type { RuntimeSession } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface RunHealthPanelProps {
+  runtime: RuntimeSession | undefined;
+  nowMs: number;
+}
+
+function ageSeconds(iso: string | null | undefined, nowMs: number): number | null {
+  if (!iso) {
+    return null;
+  }
+  const parsed = Date.parse(iso);
+  if (Number.isNaN(parsed)) {
+    return null;
+  }
+  return Math.max(0, Math.floor((nowMs - parsed) / 1000));
+}
+
+function formatSeconds(value: number | null): string {
+  if (value == null) {
+    return '-';
+  }
+  const minutes = Math.floor(value / 60);
+  const seconds = value % 60;
+  return `${minutes}m ${seconds}s`;
+}
+
+function healthFromHeartbeat(heartbeatAgeSec: number | null): {
+  label: 'Healthy' | 'Degraded' | 'Critical';
+  className: string;
+} {
+  if (heartbeatAgeSec == null) {
+    return { label: 'Critical', className: styles.badgeFail };
+  }
+  if (heartbeatAgeSec > 120) {
+    return { label: 'Critical', className: styles.badgeFail };
+  }
+  if (heartbeatAgeSec >= 30) {
+    return { label: 'Degraded', className: styles.badgePending };
+  }
+  return { label: 'Healthy', className: styles.badgePass };
+}
+
+export function RunHealthPanel({ runtime, nowMs }: RunHealthPanelProps) {
+  if (!runtime) {
+    return (
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Run Health</h2>
+        <p className={styles.metaText}>No active orchestrator run.</p>
+      </section>
+    );
+  }
+
+  const heartbeatAgeSec = ageSeconds(runtime.last_heartbeat_at ?? null, nowMs);
+  const startedAgeSec = ageSeconds(runtime.started_at ?? null, nowMs);
+  const leaseRemainingSec = (() => {
+    if (!runtime.lease_expires_at) {
+      return null;
+    }
+    const parsed = Date.parse(runtime.lease_expires_at);
+    if (Number.isNaN(parsed)) {
+      return null;
+    }
+    return Math.max(0, Math.floor((parsed - nowMs) / 1000));
+  })();
+  const health = healthFromHeartbeat(heartbeatAgeSec);
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>Run Health</h2>
+      <div className={styles.badgeRow}>
+        <span className={`${styles.badge} ${health.className}`}>{health.label}</span>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+          {runtime.provider ?? 'unknown'} / {runtime.model ?? 'unknown'}
+        </span>
+      </div>
+      <p className={styles.metaText}>Run: {runtime.run_id ?? '-'}</p>
+      <p className={styles.metaText}>Owner: {runtime.owner_instance_id ?? '-'}</p>
+      <p className={styles.metaText}>Uptime: {formatSeconds(startedAgeSec)}</p>
+      <p className={styles.metaText}>Heartbeat age: {formatSeconds(heartbeatAgeSec)}</p>
+      <p className={styles.metaText}>Lease remaining: {formatSeconds(leaseRemainingSec)}</p>
+    </section>
+  );
+}

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

@@ -1,13 +1,37 @@
+import Link from 'next/link';
 import styles from '@/styles/dashboard.module.css';
-import type { DashboardSummaryCounts, QuickFilterKey } from '@/lib/dashboard-utils.js';
+import {
+  sparklinePath,
+  sparklinePoints,
+  type DashboardSummaryCounts,
+  type QuickFilterKey,
+} from '@/lib/dashboard-utils.js';
 
 interface SummaryBarProps {
   counts: DashboardSummaryCounts;
   activeQuickFilter: QuickFilterKey | null;
   onQuickFilter: (key: QuickFilterKey) => void;
+  mergeHistogram14d?: number[];
+  totalCostTodayUsd?: number;
+  analyticsHref: string;
 }
 
-export function SummaryBar({ counts, activeQuickFilter, onQuickFilter }: SummaryBarProps) {
+function formatCost(value: number | undefined): string {
+  if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+    return '$0.00';
+  }
+  return `$${value.toFixed(2)}`;
+}
+
+export function SummaryBar({
+  counts,
+  activeQuickFilter,
+  onQuickFilter,
+  mergeHistogram14d = [],
+  totalCostTodayUsd,
+  analyticsHref,
+}: SummaryBarProps) {
+  const trendPoints = sparklinePoints(mergeHistogram14d, 180, 40);
   const tiles: Array<{
     key: QuickFilterKey;
     label: string;
@@ -60,6 +84,39 @@ export function SummaryBar({ counts, activeQuickFilter, onQuickFilter }: Summary
           </button>
         );
       })}
+      <Link href={analyticsHref} className={styles.summaryTile} aria-label="Open cost analytics">
+        <span className={styles.summaryLabel}>Cost Today</span>
+        <span className={styles.summaryValue}>{formatCost(totalCostTodayUsd)}</span>
+        <span className={styles.summaryLabel}>Server aggregate</span>
+      </Link>
+      <Link href={analyticsHref} className={styles.summaryTile} aria-label="Open analytics">
+        <span className={styles.summaryLabel}>Throughput (14d)</span>
+        {mergeHistogram14d.length > 0 ? (
+          <svg
+            viewBox="0 0 180 40"
+            width="100%"
+            height={40}
+            role="img"
+            aria-label="14 day merge trend sparkline"
+          >
+            <path d={sparklinePath(mergeHistogram14d, 180, 40)} fill="none" stroke="#7fc6ff" />
+            {trendPoints.map((point) => (
+              <circle
+                key={`trend-point-${point.index}`}
+                className={styles.sparklinePoint}
+                cx={point.x}
+                cy={point.y}
+                r={3}
+              >
+                <title>{`Day ${point.index + 1}: ${point.value} merges`}</title>
+              </circle>
+            ))}
+          </svg>
+        ) : (
+          <span className={styles.metaText}>No merge trend yet</span>
+        )}
+        <span className={styles.summaryLabel}>Open analytics</span>
+      </Link>
     </section>
   );
 }

package/packages/web-dashboard/src/components/verification-signals.tsx

@@ -0,0 +1,167 @@
+import type { FeatureSummary } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface VerificationSignalsProps {
+  feature: FeatureSummary;
+  plan: Record<string, unknown> | null;
+}
+
+type VerificationState = 'verified' | 'at_risk' | 'unverified';
+
+interface SignalItem {
+  label: string;
+  status: VerificationState;
+  reason: string;
+  evidence_ref?: string;
+}
+
+function parseCriteria(
+  plan: Record<string, unknown> | null,
+): Array<string | Record<string, unknown>> {
+  if (!plan) {
+    return [];
+  }
+  const candidates = [plan.acceptance_criteria, plan.acceptance, plan.criteria, plan.outcomes];
+  for (const candidate of candidates) {
+    if (Array.isArray(candidate)) {
+      return candidate.filter(
+        (item): item is string | Record<string, unknown> =>
+          typeof item === 'string' || (item != null && typeof item === 'object'),
+      );
+    }
+  }
+  return [];
+}
+
+function gateHasFailure(feature: FeatureSummary): boolean {
+  const gates = feature.gates;
+  if (!gates || typeof gates !== 'object') {
+    return false;
+  }
+  return Object.values(gates).some((value) => String(value).toLowerCase() === 'fail');
+}
+
+function baseStatus(feature: FeatureSummary): VerificationState {
+  if (gateHasFailure(feature) || feature.phase === 'blocked') {
+    return 'at_risk';
+  }
+  if (feature.phase === 'ready_to_merge' || feature.phase === 'merged') {
+    return 'verified';
+  }
+  return 'unverified';
+}
+
+function parseSignalItem(
+  item: string | Record<string, unknown>,
+  fallbackState: VerificationState,
+): SignalItem {
+  if (typeof item === 'string') {
+    return {
+      label: item,
+      status: fallbackState,
+      reason:
+        fallbackState === 'verified'
+          ? 'Verified by current artifact evidence.'
+          : fallbackState === 'at_risk'
+            ? 'Gate or status signals indicate risk.'
+            : 'Insufficient artifact evidence recorded yet.',
+    };
+  }
+
+  const label =
+    typeof item.label === 'string'
+      ? item.label
+      : typeof item.criterion === 'string'
+        ? item.criterion
+        : typeof item.text === 'string'
+          ? item.text
+          : 'Acceptance criterion';
+  const statusRaw = typeof item.status === 'string' ? item.status.toLowerCase() : '';
+  const status: VerificationState =
+    statusRaw === 'verified' || statusRaw === 'pass'
+      ? 'verified'
+      : statusRaw === 'at_risk' || statusRaw === 'risk' || statusRaw === 'fail'
+        ? 'at_risk'
+        : statusRaw === 'unverified' || statusRaw === 'unknown'
+          ? 'unverified'
+          : fallbackState;
+  const reason =
+    typeof item.reason === 'string'
+      ? item.reason
+      : status === 'verified'
+        ? 'Verified by current artifact evidence.'
+        : status === 'at_risk'
+          ? 'Gate or status signals indicate risk.'
+          : 'Insufficient artifact evidence recorded yet.';
+  const evidenceRef =
+    typeof item.evidence_ref === 'string'
+      ? item.evidence_ref
+      : typeof item.evidence === 'string'
+        ? item.evidence
+        : undefined;
+  return { label, status, reason, evidence_ref: evidenceRef };
+}
+
+function statusClass(status: VerificationState): string {
+  if (status === 'verified') {
+    return styles.badgePass;
+  }
+  if (status === 'at_risk') {
+    return styles.badgeFail;
+  }
+  return styles.badgeNeutral;
+}
+
+function statusLabel(status: VerificationState): string {
+  if (status === 'verified') {
+    return 'Verified';
+  }
+  if (status === 'at_risk') {
+    return 'At Risk';
+  }
+  return 'Unverified';
+}
+
+export function VerificationSignals({ feature, plan }: VerificationSignalsProps) {
+  const fallbackState = baseStatus(feature);
+  const criteria = parseCriteria(plan);
+  const signals =
+    criteria.length > 0
+      ? criteria.map((item) => parseSignalItem(item, fallbackState))
+      : [
+          {
+            label: 'Acceptance criteria evidence',
+            status: fallbackState,
+            reason: 'No explicit acceptance criteria list found in plan.',
+          } satisfies SignalItem,
+        ];
+
+  const verifiedCount = signals.filter((item) => item.status === 'verified').length;
+  const atRiskCount = signals.filter((item) => item.status === 'at_risk').length;
+  const unverifiedCount = signals.filter((item) => item.status === 'unverified').length;
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>Verification Signals</summary>
+      <p className={styles.metaText}>
+        {verifiedCount} verified, {atRiskCount} at risk, {unverifiedCount} unverified.
+      </p>
+      <ul className={styles.planList}>
+        {signals.map((signal, index) => (
+          <li key={`${signal.label}-${index}`} className={styles.planListItem}>
+            <div className={styles.badgeRow}>
+              <span className={`${styles.badge} ${statusClass(signal.status)}`}>
+                {statusLabel(signal.status)}
+              </span>
+              <span>{signal.label}</span>
+            </div>
+            <p className={styles.metaText}>{signal.reason}</p>
+            {signal.evidence_ref ? (
+              <p className={styles.metaText}>Evidence: {signal.evidence_ref}</p>
+            ) : null}
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}

package/packages/web-dashboard/src/lib/analytics-utils.ts

@@ -0,0 +1,3 @@
+export function shouldPollAnalytics(tabHidden: boolean): boolean {
+  return !tabHidden;
+}