agentic-orchestrator 0.1.25 → 0.1.26

package/packages/web-dashboard/src/components/plan-risk-annotations.tsx

@@ -0,0 +1,63 @@
+import styles from '@/styles/dashboard.module.css';
+
+interface PlanRiskAnnotationsProps {
+  plan: Record<string, unknown> | null;
+  expandedByDefault?: boolean;
+}
+
+interface ParsedRisk {
+  severity: 'high' | 'medium' | 'low';
+  message: string;
+}
+
+function parseRisks(raw: unknown): ParsedRisk[] {
+  if (!Array.isArray(raw)) {
+    return [];
+  }
+  return raw
+    .map((item) => (typeof item === 'string' ? item.trim() : ''))
+    .filter((item) => item.length > 0)
+    .map((item) => {
+      const match = item.match(/^\[(high|medium|low)\]\s*(.+)$/i);
+      if (!match) {
+        return { severity: 'medium', message: item } as ParsedRisk;
+      }
+      return {
+        severity: match[1].toLowerCase() as ParsedRisk['severity'],
+        message: match[2].trim(),
+      };
+    });
+}
+
+function severityClass(severity: ParsedRisk['severity']): string {
+  if (severity === 'high') {
+    return styles.badgeFail;
+  }
+  if (severity === 'low') {
+    return styles.badgePass;
+  }
+  return styles.badgePending;
+}
+
+export function PlanRiskAnnotations({ plan, expandedByDefault = false }: PlanRiskAnnotationsProps) {
+  const risks = parseRisks(plan?.risk);
+  if (risks.length === 0) {
+    return null;
+  }
+
+  return (
+    <details className={styles.section} open={expandedByDefault}>
+      <summary className={styles.sectionSummary}>Plan Risks</summary>
+      <ul className={styles.planList}>
+        {risks.map((risk, index) => (
+          <li key={`${risk.message}-${index}`} className={styles.planListItem}>
+            <span className={`${styles.badge} ${severityClass(risk.severity)}`}>
+              {risk.severity}
+            </span>{' '}
+            {risk.message}
+          </li>
+        ))}
+      </ul>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/plan-scope-tree.tsx

@@ -0,0 +1,285 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import styles from '@/styles/dashboard.module.css';
+
+interface PlanScopeTreeProps {
+  plan: Record<string, unknown> | null;
+}
+
+type FileOperation = 'Created' | 'Modified' | 'Deleted';
+
+interface FileNode {
+  name: string;
+  path: string;
+  children: Map<string, FileNode>;
+  operations: Set<FileOperation>;
+}
+
+interface FileEntry {
+  path: string;
+  op: FileOperation;
+}
+
+const LARGE_TREE_NODE_THRESHOLD = 200;
+const TREE_ENTRY_CHUNK_SIZE = 120;
+
+function parseStringArray(value: unknown): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  return value.filter((item): item is string => typeof item === 'string');
+}
+
+function collectEntries(plan: Record<string, unknown>): FileEntry[] {
+  const filesRaw = plan.files;
+  const fileEntries: FileEntry[] = [];
+  if (Array.isArray(filesRaw)) {
+    for (const item of filesRaw) {
+      if (typeof item === 'string') {
+        fileEntries.push({ path: item, op: 'Modified' });
+      }
+    }
+    return fileEntries;
+  }
+
+  if (!filesRaw || typeof filesRaw !== 'object') {
+    return fileEntries;
+  }
+
+  const files = filesRaw as Record<string, unknown>;
+  for (const item of parseStringArray(files.create)) {
+    fileEntries.push({ path: item, op: 'Created' });
+  }
+  for (const item of parseStringArray(files.modify)) {
+    fileEntries.push({ path: item, op: 'Modified' });
+  }
+  for (const item of parseStringArray(files.delete)) {
+    fileEntries.push({ path: item, op: 'Deleted' });
+  }
+  return fileEntries;
+}
+
+function createRoot(): FileNode {
+  return {
+    name: '/',
+    path: '',
+    children: new Map(),
+    operations: new Set(),
+  };
+}
+
+function addEntry(root: FileNode, entry: FileEntry): void {
+  const parts = entry.path.split('/').filter((part) => part.length > 0);
+  if (parts.length === 0) {
+    return;
+  }
+  let node = root;
+  for (const part of parts) {
+    const nextPath = node.path.length > 0 ? `${node.path}/${part}` : part;
+    const existing = node.children.get(part);
+    if (existing) {
+      node = existing;
+      continue;
+    }
+    const created: FileNode = {
+      name: part,
+      path: nextPath,
+      children: new Map(),
+      operations: new Set(),
+    };
+    node.children.set(part, created);
+    node = created;
+  }
+  node.operations.add(entry.op);
+}
+
+function buildTree(entries: FileEntry[]): FileNode {
+  const root = createRoot();
+  for (const entry of entries) {
+    addEntry(root, entry);
+  }
+  return root;
+}
+
+function countTreeNodes(node: FileNode): number {
+  let count = 1;
+  for (const child of node.children.values()) {
+    count += countTreeNodes(child);
+  }
+  return count;
+}
+
+function operationClass(op: FileOperation): string {
+  if (op === 'Created') {
+    return styles.badgePass;
+  }
+  if (op === 'Deleted') {
+    return styles.badgeFail;
+  }
+  return styles.badgePending;
+}
+
+function operationLabel(op: FileOperation): string {
+  if (op === 'Created') {
+    return '+ Created';
+  }
+  if (op === 'Deleted') {
+    return '- Deleted';
+  }
+  return '~ Modified';
+}
+
+function renderNode(node: FileNode, depth: number): JSX.Element {
+  const children = [...node.children.values()].sort((left, right) =>
+    left.name.localeCompare(right.name),
+  );
+  const hasChildren = children.length > 0;
+  const badges = [...node.operations].sort((left, right) => left.localeCompare(right));
+
+  if (!hasChildren) {
+    return (
+      <li key={node.path} className={styles.planTreeLeaf}>
+        <span>{node.name}</span>
+        <span className={styles.badgeRow}>
+          {badges.map((op) => (
+            <span key={`${node.path}-${op}`} className={`${styles.badge} ${operationClass(op)}`}>
+              {operationLabel(op)}
+            </span>
+          ))}
+        </span>
+      </li>
+    );
+  }
+
+  return (
+    <li key={node.path} className={styles.planTreeBranch}>
+      <details open={depth < 2}>
+        <summary className={styles.sectionSummary}>{node.name}</summary>
+        <ul className={styles.planTreeList}>
+          {children.map((child) => renderNode(child, depth + 1))}
+        </ul>
+      </details>
+    </li>
+  );
+}
+
+export function PlanScopeTree({ plan }: PlanScopeTreeProps) {
+  const [chunkIndex, setChunkIndex] = useState(0);
+
+  const entries = useMemo(() => {
+    if (!plan) {
+      return [];
+    }
+    return collectEntries(plan);
+  }, [plan]);
+
+  const allowedAreas = useMemo(() => {
+    if (!plan) {
+      return [];
+    }
+    return parseStringArray(plan.allowed_areas);
+  }, [plan]);
+
+  const forbiddenAreas = useMemo(() => {
+    if (!plan) {
+      return [];
+    }
+    return parseStringArray(plan.forbidden_areas);
+  }, [plan]);
+
+  useEffect(() => {
+    setChunkIndex(0);
+  }, [plan, entries.length]);
+
+  const fullTreeNodeCount = useMemo(() => {
+    if (entries.length === 0) {
+      return 0;
+    }
+    const fullTree = buildTree(entries);
+    return Math.max(0, countTreeNodes(fullTree) - 1);
+  }, [entries]);
+
+  const chunkingEnabled = fullTreeNodeCount > LARGE_TREE_NODE_THRESHOLD;
+  const chunkCount = chunkingEnabled
+    ? Math.max(1, Math.ceil(entries.length / TREE_ENTRY_CHUNK_SIZE))
+    : 1;
+  const currentChunk = Math.min(chunkIndex, chunkCount - 1);
+  const chunkStart = chunkingEnabled ? currentChunk * TREE_ENTRY_CHUNK_SIZE : 0;
+  const chunkEnd = chunkingEnabled
+    ? Math.min(entries.length, chunkStart + TREE_ENTRY_CHUNK_SIZE)
+    : entries.length;
+  const visibleEntries = chunkingEnabled ? entries.slice(chunkStart, chunkEnd) : entries;
+
+  const rootChildren = useMemo(() => {
+    const root = buildTree(visibleEntries);
+    return [...root.children.values()].sort((left, right) => left.name.localeCompare(right.name));
+  }, [visibleEntries]);
+
+  if (!plan || entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>Plan Scope</summary>
+      <div className={styles.planPolicyGroup}>
+        <span className={styles.metaText}>Allowed Areas</span>
+        <div className={styles.badgeRow}>
+          {allowedAreas.length > 0 ? (
+            allowedAreas.map((area) => (
+              <span key={`allow-${area}`} className={`${styles.badge} ${styles.badgePass}`}>
+                Allowed {area}
+              </span>
+            ))
+          ) : (
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>None</span>
+          )}
+        </div>
+      </div>
+      <div className={styles.planPolicyGroup}>
+        <span className={styles.metaText}>Forbidden Areas</span>
+        <div className={styles.badgeRow}>
+          {forbiddenAreas.length > 0 ? (
+            forbiddenAreas.map((area) => (
+              <span key={`deny-${area}`} className={`${styles.badge} ${styles.badgeFail}`}>
+                Forbidden {area}
+              </span>
+            ))
+          ) : (
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>None</span>
+          )}
+        </div>
+      </div>
+      {chunkingEnabled ? (
+        <div className={styles.planTreePager} role="group" aria-label="Plan scope pagination">
+          <span className={styles.metaText}>
+            Large scope mode: showing files {chunkStart + 1}-{chunkEnd} of {entries.length}.
+          </span>
+          <div className={styles.inlineActions}>
+            <button
+              type="button"
+              className={styles.button}
+              onClick={() => setChunkIndex((current) => Math.max(0, current - 1))}
+              disabled={currentChunk === 0}
+            >
+              Previous
+            </button>
+            <span className={styles.metaText}>
+              Page {currentChunk + 1} of {chunkCount}
+            </span>
+            <button
+              type="button"
+              className={styles.button}
+              onClick={() => setChunkIndex((current) => Math.min(chunkCount - 1, current + 1))}
+              disabled={currentChunk >= chunkCount - 1}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      ) : null}
+      <ul className={styles.planTreeList}>{rootChildren.map((node) => renderNode(node, 0))}</ul>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/qa-coverage-map.tsx

@@ -0,0 +1,174 @@
+import { useMemo, useState } from 'react';
+import type { QaTestIndex } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface QaCoverageMapProps {
+  qaIndex: QaTestIndex | null | undefined;
+  flakySuspects?: string[] | null;
+}
+
+type StatusFilter = 'all' | 'failed' | 'pending_running' | 'waived' | 'passed';
+
+function statusClass(status: string): string {
+  if (status === 'passed') {
+    return styles.badgePass;
+  }
+  if (status === 'failed') {
+    return styles.badgeFail;
+  }
+  if (status === 'waived') {
+    return styles.badgeNeutral;
+  }
+  return styles.badgePending;
+}
+
+function statusText(status: string): string {
+  if (status === 'passed') {
+    return '[PASS] passed';
+  }
+  if (status === 'failed') {
+    return '[FAIL] failed';
+  }
+  if (status === 'waived') {
+    return '[WAIVED] waived';
+  }
+  if (status === 'running') {
+    return '[RUNNING] running';
+  }
+  return '[PENDING] pending';
+}
+
+export function QaCoverageMap({ qaIndex, flakySuspects }: QaCoverageMapProps) {
+  const [filter, setFilter] = useState<StatusFilter>('all');
+  const items = qaIndex?.items ?? [];
+  const flakySet = useMemo(
+    () => new Set((flakySuspects ?? []).map((item) => item.trim())),
+    [flakySuspects],
+  );
+
+  const filteredItems = useMemo(() => {
+    if (filter === 'all') {
+      return items;
+    }
+    if (filter === 'failed') {
+      return items.filter((item) => item.status === 'failed');
+    }
+    if (filter === 'pending_running') {
+      return items.filter((item) => item.status === 'pending' || item.status === 'running');
+    }
+    if (filter === 'waived') {
+      return items.filter((item) => item.status === 'waived');
+    }
+    return items.filter((item) => item.status === 'passed');
+  }, [items, filter]);
+
+  const flakyOverlap = useMemo(() => {
+    if (flakySet.size === 0) {
+      return [];
+    }
+    const overlaps = new Set<string>();
+    for (const item of items) {
+      if (item.status !== 'failed') {
+        continue;
+      }
+      for (const testName of item.required_tests) {
+        if (flakySet.has(testName)) {
+          overlaps.add(testName);
+        }
+      }
+    }
+    return Array.from(overlaps).sort((left, right) => left.localeCompare(right));
+  }, [items, flakySet]);
+
+  if (!qaIndex) {
+    return (
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>QA Coverage Map</h3>
+        <p className={styles.metaText}>QA index artifact missing.</p>
+      </div>
+    );
+  }
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>QA Coverage Map</summary>
+      <div className={styles.badgeRow}>
+        <button
+          type="button"
+          className={`${styles.filterToggle} ${filter === 'all' ? styles.filterToggleOn : ''}`}
+          onClick={() => setFilter('all')}
+        >
+          All
+        </button>
+        <button
+          type="button"
+          className={`${styles.filterToggle} ${filter === 'failed' ? styles.filterToggleOn : ''}`}
+          onClick={() => setFilter('failed')}
+        >
+          failed
+        </button>
+        <button
+          type="button"
+          className={`${styles.filterToggle} ${filter === 'pending_running' ? styles.filterToggleOn : ''}`}
+          onClick={() => setFilter('pending_running')}
+        >
+          pending/running
+        </button>
+        <button
+          type="button"
+          className={`${styles.filterToggle} ${filter === 'waived' ? styles.filterToggleOn : ''}`}
+          onClick={() => setFilter('waived')}
+        >
+          waived
+        </button>
+        <button
+          type="button"
+          className={`${styles.filterToggle} ${filter === 'passed' ? styles.filterToggleOn : ''}`}
+          onClick={() => setFilter('passed')}
+        >
+          passed
+        </button>
+      </div>
+      {flakyOverlap.length > 0 ? (
+        <div className={styles.banner}>
+          Probabilistic flaky signal: failing required tests overlap flaky suspects (
+          {flakyOverlap.join(', ')}).
+        </div>
+      ) : null}
+      <div className={styles.tableWrapper}>
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              <th>File</th>
+              <th>Status</th>
+              <th>Required tests</th>
+              <th>Last run</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredItems.length === 0 ? (
+              <tr>
+                <td colSpan={4} className={styles.metaText}>
+                  No rows for selected filter.
+                </td>
+              </tr>
+            ) : (
+              filteredItems.map((item) => (
+                <tr key={item.path}>
+                  <td>{item.path}</td>
+                  <td>
+                    <span className={`${styles.badge} ${statusClass(item.status)}`}>
+                      {statusText(item.status)}
+                    </span>
+                  </td>
+                  <td>{item.required_tests.length}</td>
+                  <td>{item.last_run_at ?? '-'}</td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/quick-launch-panel.tsx

@@ -0,0 +1,70 @@
+import styles from '@/styles/dashboard.module.css';
+
+interface QuickLaunchPanelProps {
+  visible: boolean;
+  featureId: string;
+  goal: string;
+  submitting: boolean;
+  disabledReason: string | null;
+  onFeatureIdChange: (value: string) => void;
+  onGoalChange: (value: string) => void;
+  onRequestLaunch: () => void;
+}
+
+export function QuickLaunchPanel({
+  visible,
+  featureId,
+  goal,
+  submitting,
+  disabledReason,
+  onFeatureIdChange,
+  onGoalChange,
+  onRequestLaunch,
+}: QuickLaunchPanelProps) {
+  if (!visible) {
+    return null;
+  }
+
+  const launchDisabled = submitting || featureId.trim().length === 0 || goal.trim().length === 0;
+
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>Quick Launch</h2>
+      <p className={styles.metaText}>
+        Create a new feature run with policy validation and explicit confirmation.
+      </p>
+      {disabledReason ? <p className={styles.metaText}>{disabledReason}</p> : null}
+      <label className={styles.label} htmlFor="quick-launch-feature-id">
+        Feature ID
+      </label>
+      <input
+        id="quick-launch-feature-id"
+        className={styles.input}
+        value={featureId}
+        onChange={(event) => onFeatureIdChange(event.target.value)}
+        placeholder="feature_checkout_flow"
+      />
+      <label className={styles.label} htmlFor="quick-launch-goal">
+        Goal
+      </label>
+      <textarea
+        id="quick-launch-goal"
+        className={styles.textarea}
+        rows={3}
+        value={goal}
+        onChange={(event) => onGoalChange(event.target.value)}
+        placeholder="Implement ..."
+      />
+      <div className={styles.inlineActions}>
+        <button
+          type="button"
+          className={`${styles.button} ${styles.buttonSuccess}`}
+          disabled={launchDisabled}
+          onClick={onRequestLaunch}
+        >
+          {submitting ? 'Launching...' : 'Launch Feature'}
+        </button>
+      </div>
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/review-brief-panel.tsx

@@ -0,0 +1,75 @@
+import type { ReviewBrief } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface ReviewBriefPanelProps {
+  brief: ReviewBrief | null | undefined;
+}
+
+function freshnessAge(generatedAt: string): string {
+  const parsed = Date.parse(generatedAt);
+  if (Number.isNaN(parsed)) {
+    return '-';
+  }
+  const ageMinutes = Math.max(0, Math.floor((Date.now() - parsed) / 60_000));
+  if (ageMinutes < 60) {
+    return `${ageMinutes}m ago`;
+  }
+  const ageHours = Math.floor(ageMinutes / 60);
+  return `${ageHours}h ago`;
+}
+
+export function ReviewBriefPanel({ brief }: ReviewBriefPanelProps) {
+  if (!brief) {
+    return (
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>Review Brief</h3>
+        <p className={styles.metaText}>Review brief not generated yet.</p>
+      </div>
+    );
+  }
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>Review Brief</summary>
+      <p className={styles.metaText}>
+        Generated: {brief.generated_at} ({freshnessAge(brief.generated_at)})
+      </p>
+      <ul className={styles.planList}>
+        <li className={styles.planListItem}>
+          <strong>Intent:</strong> {brief.intent_summary}
+        </li>
+        <li className={styles.planListItem}>
+          <strong>Scope:</strong> {brief.scope_summary}
+        </li>
+        <li className={styles.planListItem}>
+          <strong>Contract risk:</strong> {brief.contract_risk_summary}
+        </li>
+      </ul>
+      <div className={styles.badgeRow}>
+        {Object.entries(brief.gate_matrix).map(([key, value]) => (
+          <span key={key} className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {key}: {value}
+          </span>
+        ))}
+      </div>
+      {brief.unresolved_questions.length > 0 ? (
+        <ul className={styles.planList}>
+          {brief.unresolved_questions.map((question) => (
+            <li key={question} className={styles.planListItem}>
+              {question}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {brief.evidence_refs.length > 0 ? (
+        <ul className={styles.planList}>
+          {brief.evidence_refs.map((evidence) => (
+            <li key={evidence} className={styles.planListItem}>
+              {evidence}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </details>
+  );
+}