agentic-orchestrator 0.1.25 → 0.1.26

package/packages/web-dashboard/src/components/agent-pipeline-stepper.tsx

@@ -0,0 +1,100 @@
+import type { AgentPipelineStatus, RoleStatus } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface AgentPipelineStepperProps {
+  status?: AgentPipelineStatus;
+}
+
+function normalizeRoleStatus(value: RoleStatus | undefined): RoleStatus {
+  return value ?? 'unknown';
+}
+
+function roleLabel(role: 'planner' | 'builder' | 'qa'): string {
+  if (role === 'planner') {
+    return 'Planner';
+  }
+  if (role === 'builder') {
+    return 'Builder';
+  }
+  return 'QA';
+}
+
+function statusLabel(status: RoleStatus): string {
+  if (status === 'ready') {
+    return 'Ready';
+  }
+  if (status === 'running') {
+    return 'Running';
+  }
+  if (status === 'blocked') {
+    return 'Blocked';
+  }
+  if (status === 'done') {
+    return 'Done';
+  }
+  return 'Unknown';
+}
+
+function statusClass(status: RoleStatus): string {
+  if (status === 'done') {
+    return styles.stepDone;
+  }
+  if (status === 'running') {
+    return styles.stepRunning;
+  }
+  if (status === 'blocked') {
+    return styles.stepBlocked;
+  }
+  if (status === 'ready') {
+    return styles.stepReady;
+  }
+  return styles.stepUnknown;
+}
+
+function statusIcon(status: RoleStatus): string {
+  if (status === 'done') {
+    return '✓';
+  }
+  if (status === 'running') {
+    return '…';
+  }
+  if (status === 'blocked') {
+    return '!';
+  }
+  if (status === 'ready') {
+    return '○';
+  }
+  return '?';
+}
+
+export function AgentPipelineStepper({ status }: AgentPipelineStepperProps) {
+  const normalized: AgentPipelineStatus = {
+    planner: normalizeRoleStatus(status?.planner),
+    builder: normalizeRoleStatus(status?.builder),
+    qa: normalizeRoleStatus(status?.qa),
+  };
+
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Agent Pipeline</h3>
+      <ol className={styles.pipelineStepper} aria-label="Agent pipeline stepper">
+        {(['planner', 'builder', 'qa'] as const).map((role) => {
+          const current = normalized[role];
+          return (
+            <li key={role} className={`${styles.pipelineStep} ${statusClass(current)}`}>
+              <span
+                className={`${styles.pipelineIcon} ${current === 'running' ? styles.pipelineIconRunning : ''}`}
+                aria-hidden="true"
+              >
+                {statusIcon(current)}
+              </span>
+              <span>
+                <strong>{roleLabel(role)}</strong> <span>{statusLabel(current)}</span>
+              </span>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/dependency-chains.tsx

@@ -0,0 +1,58 @@
+import { Fragment } from 'react';
+import styles from '@/styles/dashboard.module.css';
+
+interface DependencyEntry {
+  feature_id: string;
+  depends_on_unresolved: string[];
+}
+
+interface DependencyChainsProps {
+  chains: DependencyEntry[];
+  onSelectFeature: (featureId: string) => void;
+}
+
+export function DependencyChains({ chains, onSelectFeature }: DependencyChainsProps) {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>Dependency Chains</h2>
+      {chains.length === 0 ? (
+        <p className={styles.metaText}>No unresolved dependency chains.</p>
+      ) : (
+        <ul className={styles.planList}>
+          {chains.map((entry) => (
+            <li key={entry.feature_id} className={styles.planListItem}>
+              <button
+                type="button"
+                className={styles.listHeaderButton}
+                onClick={() => onSelectFeature(entry.feature_id)}
+              >
+                {entry.feature_id}
+              </button>
+              <span className={styles.metaText}> {' -> depends on -> '} </span>
+              {entry.depends_on_unresolved.length === 0 ? (
+                <span className={styles.metaText}>unknown</span>
+              ) : (
+                <span className={styles.inlineActions}>
+                  {entry.depends_on_unresolved.map((dependency, index) => (
+                    <Fragment key={dependency}>
+                      <button
+                        type="button"
+                        className={styles.listHeaderButton}
+                        onClick={() => onSelectFeature(dependency)}
+                      >
+                        {dependency}
+                      </button>
+                      {index < entry.depends_on_unresolved.length - 1 ? (
+                        <span className={styles.metaText}>, </span>
+                      ) : null}
+                    </Fragment>
+                  ))}
+                </span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/detail-panel.tsx

@@ -1,14 +1,34 @@
-import { useEffect, useMemo, useState } from 'react';
-import { formatElapsedTime, projectQuery } from '@/lib/dashboard-utils.js';
-import type { FeatureDetail, FeatureLog, FeatureLogEntry } from '@/lib/types.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  buildDashboardFeatureHref,
+  formatElapsedTime,
+  projectQuery,
+} from '@/lib/dashboard-utils.js';
+import type {
+  CostSummary,
+  FeatureDetail,
+  FeatureLog,
+  FeatureLogEntry,
+  QaTestIndex,
+  ReviewBrief,
+} from '@/lib/types.js';
 import styles from '@/styles/dashboard.module.css';
+import { AgentPipelineStepper } from '@/components/agent-pipeline-stepper';
 import { ConfirmationModal } from '@/components/confirmation-modal';
 import { DiffViewer } from '@/components/diff-viewer';
 import { EvidenceViewer } from '@/components/evidence-viewer';
+import { FeatureCostPanel } from '@/components/feature-cost-panel';
 import { GateResults } from '@/components/gate-results';
+import { GateStepDrilldown } from '@/components/gate-step-drilldown';
 import { HumanInputPanel } from '@/components/human-input-panel';
 import { PlanViewer } from '@/components/plan-viewer';
+import { PlanRevisionTimeline } from '@/components/plan-revision-timeline';
+import { PlanRiskAnnotations } from '@/components/plan-risk-annotations';
+import { PlanScopeTree } from '@/components/plan-scope-tree';
 import { PrStatusCard } from '@/components/pr-status-card';
+import { QaCoverageMap } from '@/components/qa-coverage-map';
+import { ReviewBriefPanel } from '@/components/review-brief-panel';
+import { VerificationSignals } from '@/components/verification-signals';
 
 type ReviewAction =
   | 'review.approve'
@@ -25,6 +45,9 @@ interface ActionResponse {
 interface DetailPanelProps {
   detail: FeatureDetail | null;
   project: string;
+  unresolvedDependencies?: string[];
+  flakySuspects?: string[];
+  isFocusView?: boolean;
   onClose: () => void;
   refreshDetail: (featureId: string) => Promise<void>;
   refreshStatus: () => Promise<void>;
@@ -51,6 +74,12 @@ const DEFAULT_HISTORY: HistoryState = {
   total: 0,
 };
 
+interface ApiEnvelope<TData> {
+  ok: boolean;
+  data?: TData;
+  error?: { code?: string; message?: string; retryable?: boolean };
+}
+
 async function callAction(
   action: ReviewAction,
   featureId: string,
@@ -68,6 +97,9 @@ async function callAction(
 export function DetailPanel({
   detail,
   project,
+  unresolvedDependencies = [],
+  flakySuspects = [],
+  isFocusView = false,
   onClose,
   refreshDetail,
   refreshStatus,
@@ -82,11 +114,18 @@ export function DetailPanel({
   const [history, setHistory] = useState<HistoryState>(DEFAULT_HISTORY);
   const [nowMs, setNowMs] = useState(Date.now());
   const [submitting, setSubmitting] = useState(false);
+  const [cost, setCost] = useState<CostSummary | null>(detail?.cost ?? null);
+  const [qaIndex, setQaIndex] = useState<QaTestIndex | null>(detail?.qa_test_index ?? null);
+  const [reviewBrief, setReviewBrief] = useState<ReviewBrief | null>(detail?.review_brief ?? null);
+  const [budgetLimitUsd, setBudgetLimitUsd] = useState<number | null>(null);
+  const costCacheRef = useRef<Map<string, { expiresAt: number; value: CostSummary | null }>>(
+    new Map(),
+  );
 
   useEffect(() => {
     const interval = setInterval(() => {
       setNowMs(Date.now());
-    }, 1000);
+    }, 5000);
     return () => clearInterval(interval);
   }, []);
 
@@ -142,6 +181,126 @@ export function DetailPanel({
     };
   }, [detail, project]);
 
+  useEffect(() => {
+    let cancelled = false;
+    void (async () => {
+      try {
+        const response = await fetch(`/api/policy/budget${projectQuery(project)}`);
+        const body = (await response.json()) as ApiEnvelope<{
+          per_feature_limit_usd?: number | null;
+        }>;
+        if (cancelled) {
+          return;
+        }
+        setBudgetLimitUsd(
+          body.ok && typeof body.data?.per_feature_limit_usd === 'number'
+            ? body.data.per_feature_limit_usd
+            : null,
+        );
+      } catch {
+        if (!cancelled) {
+          setBudgetLimitUsd(null);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [project]);
+
+  useEffect(() => {
+    if (!detail) {
+      setCost(null);
+      setQaIndex(null);
+      setReviewBrief(null);
+      return;
+    }
+
+    const featureId = detail.feature.feature_id;
+    setCost(detail.cost ?? null);
+    setQaIndex(detail.qa_test_index ?? null);
+    setReviewBrief(detail.review_brief ?? null);
+
+    const controller = new AbortController();
+    let cancelled = false;
+
+    const fetchCost = async () => {
+      const cacheKey = `${project}:${featureId}`;
+      const cached = costCacheRef.current.get(cacheKey);
+      if (cached && cached.expiresAt > Date.now()) {
+        setCost(cached.value);
+        return;
+      }
+
+      try {
+        const response = await fetch(`/api/features/${featureId}/cost${projectQuery(project)}`, {
+          signal: controller.signal,
+        });
+        const body = (await response.json()) as ApiEnvelope<CostSummary>;
+        if (cancelled) {
+          return;
+        }
+        if (body.ok && body.data) {
+          setCost(body.data);
+          costCacheRef.current.set(cacheKey, {
+            expiresAt: Date.now() + 60_000,
+            value: body.data,
+          });
+          return;
+        }
+        setCost(null);
+      } catch {
+        if (!cancelled) {
+          setCost(null);
+        }
+      }
+    };
+
+    const fetchQaIndex = async () => {
+      try {
+        const response = await fetch(
+          `/api/features/${featureId}/test-index${projectQuery(project)}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as ApiEnvelope<QaTestIndex>;
+        if (!cancelled) {
+          setQaIndex(body.ok && body.data ? body.data : null);
+        }
+      } catch {
+        if (!cancelled) {
+          setQaIndex(null);
+        }
+      }
+    };
+
+    const fetchReviewBrief = async () => {
+      try {
+        const response = await fetch(
+          `/api/features/${featureId}/review-brief${projectQuery(project)}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as ApiEnvelope<ReviewBrief>;
+        if (!cancelled) {
+          setReviewBrief(body.ok && body.data ? body.data : null);
+        }
+      } catch {
+        if (!cancelled) {
+          setReviewBrief(null);
+        }
+      }
+    };
+
+    void fetchCost();
+    void fetchQaIndex();
+    void fetchReviewBrief();
+
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [detail, project]);
+
   const phase = detail?.feature.phase ?? 'unknown';
 
   const shouldShowPlan = phase === 'planning' || phase === 'building';
@@ -235,6 +394,9 @@ export function DetailPanel({
           <h2 className={styles.panelTitle}>{detail.feature.feature_id}</h2>
           <p className={styles.metaText}>Phase: {phase}</p>
           <p className={styles.metaText}>Status: {detail.feature.status}</p>
+          {unresolvedDependencies.length > 0 ? (
+            <p className={styles.metaText}>Substate: Awaiting Dependencies</p>
+          ) : null}
           <p className={styles.metaText}>Branch: {detail.feature.branch ?? '-'}</p>
           <p className={styles.metaText}>Time in phase: {timeInPhase}</p>
           {detail.feature.activity_state === 'active' ? (
@@ -246,6 +408,50 @@ export function DetailPanel({
         </button>
       </header>
 
+      <div className={styles.inlineActions}>
+        <a
+          href={`/feature/${detail.feature.feature_id}${projectQuery(project)}`}
+          className={styles.linkButton}
+        >
+          Open Focus View
+        </a>
+      </div>
+
+      <AgentPipelineStepper status={detail.feature.role_status} />
+      <FeatureCostPanel cost={cost} budgetLimitUsd={budgetLimitUsd} />
+      {detail.feature.status === 'paused_budget' ? (
+        <div className={styles.banner}>Budget exhausted</div>
+      ) : null}
+      <VerificationSignals feature={detail.feature} plan={detail.plan} />
+      <PlanRevisionTimeline
+        plan={detail.plan}
+        featurePlanVersion={detail.feature.plan_version}
+        featureRevisionOf={detail.feature.revision_of}
+        featureRevisionReason={detail.feature.revision_reason}
+      />
+      <PlanRiskAnnotations plan={detail.plan} expandedByDefault={phase === 'ready_to_merge'} />
+      <PlanScopeTree plan={detail.plan} />
+      {unresolvedDependencies.length > 0 ? (
+        <div className={styles.section}>
+          <h3 className={styles.sectionTitle}>Unresolved Dependencies</h3>
+          <ul className={styles.planList}>
+            {unresolvedDependencies.map((dependency) => (
+              <li key={dependency} className={styles.planListItem}>
+                <a
+                  className={styles.linkButton}
+                  href={buildDashboardFeatureHref(dependency, project)}
+                >
+                  {dependency}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+      {phase === 'ready_to_merge' || phase === 'qa' ? (
+        <ReviewBriefPanel brief={reviewBrief} />
+      ) : null}
+
       {detail.feature.activity_state === 'waiting_input' ? (
         <HumanInputPanel
           featureId={detail.feature.feature_id}
@@ -262,6 +468,10 @@ export function DetailPanel({
 
       {shouldShowPlan ? <PlanViewer plan={detail.plan} /> : null}
       {shouldShowGates ? <GateResults feature={detail.feature} /> : null}
+      {shouldShowGates ? <GateStepDrilldown evidence={detail.gate_evidence} /> : null}
+      {phase === 'qa' || phase === 'ready_to_merge' ? (
+        <QaCoverageMap qaIndex={qaIndex} flakySuspects={flakySuspects} />
+      ) : null}
       {shouldShowDiff ? <DiffViewer diff={detail.diff} /> : null}
       {shouldShowEvidence ? (
         <EvidenceViewer
@@ -299,7 +509,7 @@ export function DetailPanel({
       ) : null}
 
       {phase === 'ready_to_merge' ? (
-        <div className={styles.section}>
+        <div className={`${styles.section} ${isFocusView ? styles.stickyReviewFooter : ''}`}>
           <h3 className={styles.sectionTitle}>Review Actions</h3>
           <label className={styles.label} htmlFor="review-message">
             Review message

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

@@ -12,6 +12,7 @@ interface FeatureCardProps {
   feature: FeatureSummary;
   isSelected: boolean;
   isFocused: boolean;
+  awaitingDependencies?: boolean;
   onSelect: (featureId: string) => void;
   onFocus: (featureId: string) => void;
 }
@@ -86,6 +87,7 @@ export function FeatureCard({
   feature,
   isSelected,
   isFocused,
+  awaitingDependencies = false,
   onSelect,
   onFocus,
 }: FeatureCardProps) {
@@ -139,6 +141,9 @@ export function FeatureCard({
         <span className={`${styles.badge} ${styles.badgeNeutral}`}>
           activity {feature.activity_state ?? 'unknown'}
         </span>
+        {awaitingDependencies ? (
+          <span className={`${styles.badge} ${styles.badgePending}`}>Awaiting Dependencies</span>
+        ) : null}
       </div>
     </button>
   );

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

@@ -0,0 +1,66 @@
+import type { CostSummary } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface FeatureCostPanelProps {
+  cost: CostSummary | null | undefined;
+  budgetLimitUsd?: number | null;
+}
+
+function budgetClass(ratio: number): string {
+  if (ratio >= 1) {
+    return styles.badgeFail;
+  }
+  if (ratio > 0.85) {
+    return styles.badgeFail;
+  }
+  if (ratio > 0.6) {
+    return styles.badgePending;
+  }
+  return styles.badgePass;
+}
+
+export function FeatureCostPanel({ cost, budgetLimitUsd = 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>
+      </div>
+    );
+  }
+
+  const hasLimit = typeof budgetLimitUsd === 'number' && budgetLimitUsd > 0;
+  const ratio = hasLimit ? cost.estimated_cost_usd / budgetLimitUsd : 0;
+  const stateLabel = hasLimit
+    ? ratio >= 1
+      ? 'Exceeded'
+      : ratio > 0.85
+        ? 'Critical'
+        : ratio > 0.6
+          ? 'Warning'
+          : 'Normal'
+    : 'No Limit';
+
+  return (
+    <details className={styles.section}>
+      <summary className={styles.sectionSummary}>Feature Budget Meter</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>
+      <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>
+        {hasLimit ? (
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {Math.min(999, Math.max(0, Math.round(ratio * 100)))}% of ${budgetLimitUsd.toFixed(2)}
+          </span>
+        ) : (
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            No per-feature budget limit configured
+          </span>
+        )}
+      </div>
+    </details>
+  );
+}