agentic-orchestrator 0.1.2 → 0.1.4

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

@@ -0,0 +1,393 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import type { DashboardStatusPayload, FeatureDetail, FeatureSummary, SSEEvent } from '@/lib/types';
+
+type ReviewAction = 'review.approve' | 'review.deny' | 'review.request_changes';
+type ProjectEntry = { name: string; path: string };
+
+const COLUMN_ORDER: Array<{ title: string; phase: FeatureSummary['phase'] }> = [
+  { title: 'Planning', phase: 'planning' },
+  { title: 'Building', phase: 'building' },
+  { title: 'QA', phase: 'qa' },
+  { title: 'Ready To Merge', phase: 'ready_to_merge' },
+  { title: 'Blocked', phase: 'blocked' },
+  { title: 'Merged', phase: 'merged' }
+];
+
+function columnColor(phase: FeatureSummary['phase']): string {
+  switch (phase) {
+    case 'planning':
+      return '#3b82f6';
+    case 'building':
+      return '#f97316';
+    case 'qa':
+      return '#facc15';
+    case 'ready_to_merge':
+      return '#10b981';
+    case 'blocked':
+      return '#ef4444';
+    case 'merged':
+      return '#64748b';
+    default:
+      return '#334155';
+  }
+}
+
+function projectQuery(project: string): string {
+  return project.length > 0 ? `?project=${encodeURIComponent(project)}` : '';
+}
+
+async function jsonFetch<T>(input: string, init?: RequestInit): Promise<T> {
+  const response = await fetch(input, init);
+  return (await response.json()) as T;
+}
+
+function StatusBadge({ status }: { status: string }) {
+  return (
+    <span
+      style={{
+        fontSize: 11,
+        textTransform: 'uppercase',
+        color: '#cbd5e1',
+        background: '#0f172a',
+        padding: '2px 6px',
+        borderRadius: 6,
+        border: '1px solid #334155'
+      }}
+    >
+      {status}
+    </span>
+  );
+}
+
+function ActivityBadge({ activity }: { activity?: FeatureSummary['activity_state'] }) {
+  const label = activity ?? 'unknown';
+  return (
+    <span
+      style={{
+        fontSize: 11,
+        textTransform: 'uppercase',
+        color: '#93c5fd',
+        background: '#0b2239',
+        padding: '2px 6px',
+        borderRadius: 6,
+        border: '1px solid #1d4ed8'
+      }}
+    >
+      {label}
+    </span>
+  );
+}
+
+export default function Dashboard() {
+  const [payload, setPayload] = useState<DashboardStatusPayload>({
+    index: { active: [], blocked: [], merged: [], blocked_queue: [] },
+    features: []
+  });
+  const [connected, setConnected] = useState(false);
+  const [selectedFeatureId, setSelectedFeatureId] = useState<string | null>(null);
+  const [detail, setDetail] = useState<FeatureDetail | null>(null);
+  const [approvalToken, setApprovalToken] = useState('approved');
+  const [reviewMessage, setReviewMessage] = useState('');
+  const [actionResult, setActionResult] = useState<string>('');
+  const [projects, setProjects] = useState<ProjectEntry[]>([]);
+  const [project, setProject] = useState('');
+
+  const refreshDetail = useCallback(
+    async (featureId: string) => {
+      const res = await jsonFetch<{ ok: boolean; data?: FeatureDetail }>(
+        `/api/features/${featureId}${projectQuery(project)}`
+      );
+      if (res.ok && res.data) {
+        setDetail(res.data);
+      }
+    },
+    [project]
+  );
+
+  const refreshStatus = useCallback(async () => {
+    const response = await jsonFetch<{ ok: boolean; data?: DashboardStatusPayload }>(
+      `/api/status${projectQuery(project)}`
+    );
+    if (response.ok && response.data) {
+      setPayload(response.data);
+    }
+  }, [project]);
+
+  useEffect(() => {
+    void (async () => {
+      const response = await jsonFetch<{ ok: boolean; data?: { projects: ProjectEntry[] } }>('/api/projects');
+      if (response.ok && response.data) {
+        setProjects(response.data.projects ?? []);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const queryProject = params.get('project');
+    if (queryProject) {
+      setProject(queryProject);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshStatus();
+    const es = new EventSource(`/api/events${projectQuery(project)}`);
+    es.onopen = () => setConnected(true);
+    es.onmessage = (event: MessageEvent<string>) => {
+      try {
+        const parsed = JSON.parse(event.data) as SSEEvent;
+        if (parsed.type === 'snapshot') {
+          if (parsed.payload) {
+            setPayload(parsed.payload);
+          }
+        }
+      } catch {
+        // ignore malformed events
+      }
+    };
+    es.onerror = () => setConnected(false);
+    return () => es.close();
+  }, [project, refreshStatus]);
+
+  useEffect(() => {
+    if (selectedFeatureId) {
+      void refreshDetail(selectedFeatureId);
+    }
+  }, [selectedFeatureId, refreshDetail]);
+
+  const featuresByPhase = useMemo(() => {
+    const byPhase = new Map<FeatureSummary['phase'], FeatureSummary[]>();
+    for (const column of COLUMN_ORDER) {
+      byPhase.set(column.phase, []);
+    }
+    for (const feature of payload.features) {
+      const phase = feature.phase ?? 'unknown';
+      if (!byPhase.has(phase)) {
+        byPhase.set(phase, []);
+      }
+      byPhase.get(phase)?.push(feature);
+    }
+    for (const [phase, items] of byPhase.entries()) {
+      byPhase.set(
+        phase,
+        [...items].sort((a, b) => a.feature_id.localeCompare(b.feature_id))
+      );
+    }
+    return byPhase;
+  }, [payload.features]);
+
+  const triggerReview = useCallback(
+    async (action: ReviewAction) => {
+      if (!selectedFeatureId) {
+        return;
+      }
+      const body: Record<string, unknown> = {
+        action,
+        feature_id: selectedFeatureId,
+        message: reviewMessage
+      };
+      if (action === 'review.approve') {
+        body.approval_token = approvalToken;
+      }
+      if (action === 'review.deny') {
+        body.reason = reviewMessage || 'Denied in dashboard review panel.';
+      }
+
+      const result = await jsonFetch<{ ok: boolean; error?: { message?: string } }>(
+        `/api/actions${projectQuery(project)}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body)
+        }
+      );
+
+      if (result.ok) {
+        setActionResult(`${action} completed`);
+        await refreshStatus();
+        await refreshDetail(selectedFeatureId);
+      } else {
+        setActionResult(result.error?.message ?? `${action} failed`);
+      }
+    },
+    [approvalToken, project, refreshDetail, refreshStatus, reviewMessage, selectedFeatureId]
+  );
+
+  const triggerCheckout = useCallback(
+    async (action: 'checkout' | 'restore') => {
+      if (!selectedFeatureId) {
+        return;
+      }
+      const result = await jsonFetch<{ ok: boolean; error?: { message?: string } }>(
+        `/api/features/${selectedFeatureId}/checkout${projectQuery(project)}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ action, stash_changes: true })
+        }
+      );
+      setActionResult(result.ok ? `${action} completed` : result.error?.message ?? `${action} failed`);
+    },
+    [project, selectedFeatureId]
+  );
+
+  return (
+    <div style={{ maxWidth: 1600, margin: '0 auto', padding: 24 }}>
+      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, alignItems: 'center' }}>
+        <div>
+          <h1 style={{ fontSize: 28, fontWeight: 700, color: '#f8fafc' }}>AOP Dashboard</h1>
+          <p style={{ fontSize: 12, color: '#94a3b8' }}>
+            {connected ? 'Live updates connected' : 'Disconnected from event stream'}
+          </p>
+        </div>
+        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
+          <label style={{ fontSize: 12, color: '#94a3b8' }}>Project</label>
+          <select
+            value={project}
+            onChange={(event) => {
+              const next = event.target.value;
+              setProject(next);
+              const url = new URL(window.location.href);
+              if (next) {
+                url.searchParams.set('project', next);
+              } else {
+                url.searchParams.delete('project');
+              }
+              window.history.replaceState(null, '', url.toString());
+            }}
+            style={{ background: '#0f172a', color: '#e2e8f0', border: '1px solid #334155', padding: '6px 8px' }}
+          >
+            <option value="">Current Repo</option>
+            {projects.map((entry) => (
+              <option key={entry.name} value={entry.name}>
+                {entry.name}
+              </option>
+            ))}
+          </select>
+          <div style={{ width: 10, height: 10, borderRadius: '50%', background: connected ? '#10b981' : '#ef4444' }} />
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(220px, 1fr))', gap: 12 }}>
+          {COLUMN_ORDER.map((column) => {
+            const features = featuresByPhase.get(column.phase) ?? [];
+            return (
+              <section key={column.title} style={{ background: '#1e293b', borderRadius: 12, padding: 12 }}>
+                <header style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
+                  <strong style={{ color: '#f1f5f9', fontSize: 13 }}>{column.title}</strong>
+                  <span style={{ color: '#94a3b8', fontSize: 11 }}>{features.length}</span>
+                </header>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {features.map((feature) => (
+                    <button
+                      key={feature.feature_id}
+                      onClick={() => setSelectedFeatureId(feature.feature_id)}
+                      style={{
+                        textAlign: 'left',
+                        borderRadius: 10,
+                        border: selectedFeatureId === feature.feature_id ? '1px solid #e2e8f0' : '1px solid #334155',
+                        background: '#0f172a',
+                        padding: 10,
+                        borderLeft: `4px solid ${columnColor(feature.phase)}`,
+                        cursor: 'pointer'
+                      }}
+                    >
+                      <div style={{ color: '#f8fafc', fontSize: 13, marginBottom: 4 }}>{feature.feature_id}</div>
+                      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
+                        <StatusBadge status={feature.status} />
+                        <ActivityBadge activity={feature.activity_state} />
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </section>
+            );
+          })}
+        </div>
+
+        <aside style={{ background: '#1e293b', borderRadius: 12, padding: 14 }}>
+          {!detail ? (
+            <div style={{ color: '#94a3b8', fontSize: 13 }}>Select a feature to inspect details, evidence, and review actions.</div>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              <h2 style={{ color: '#f8fafc', fontSize: 16 }}>{detail.feature.feature_id}</h2>
+              <StatusBadge status={detail.feature.status} />
+              <div style={{ color: '#cbd5e1', fontSize: 12 }}>
+                Branch: {detail.feature.branch ?? 'unknown'}
+              </div>
+              <div style={{ color: '#cbd5e1', fontSize: 12 }}>
+                Activity: {detail.feature.activity_state ?? 'unknown'}
+              </div>
+              <div style={{ color: '#cbd5e1', fontSize: 12 }}>
+                Plan version: {detail.plan?.plan_version != null ? String(detail.plan.plan_version) : 'n/a'}
+              </div>
+              {detail.feature.pr ? (
+                <div style={{ color: '#cbd5e1', fontSize: 12 }}>
+                  PR: #{detail.feature.pr.number ?? 'n/a'} | CI: {detail.feature.pr.ci_status ?? 'none'} | Review:{' '}
+                  {detail.feature.pr.review_decision ?? 'none'} | Merge Score: {detail.feature.pr.merge_score ?? 0}
+                </div>
+              ) : null}
+
+              <textarea
+                value={reviewMessage}
+                onChange={(event) => setReviewMessage(event.target.value)}
+                placeholder="Review feedback"
+                rows={4}
+                style={{ background: '#0f172a', color: '#e2e8f0', border: '1px solid #334155', padding: 8, borderRadius: 8 }}
+              />
+              <input
+                value={approvalToken}
+                onChange={(event) => setApprovalToken(event.target.value)}
+                placeholder="approval token"
+                style={{ background: '#0f172a', color: '#e2e8f0', border: '1px solid #334155', padding: 8, borderRadius: 8 }}
+              />
+
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                <button onClick={() => void triggerReview('review.approve')}>Approve</button>
+                <button onClick={() => void triggerReview('review.deny')}>Deny</button>
+                <button onClick={() => void triggerReview('review.request_changes')}>Request Changes</button>
+                <button onClick={() => void triggerCheckout('checkout')}>Checkout Branch</button>
+                <button onClick={() => void triggerCheckout('restore')}>Restore Branch</button>
+              </div>
+
+              {actionResult ? <div style={{ color: '#93c5fd', fontSize: 12 }}>{actionResult}</div> : null}
+
+              <details>
+                <summary style={{ cursor: 'pointer', color: '#e2e8f0' }}>Diff</summary>
+                <pre
+                  style={{
+                    marginTop: 8,
+                    maxHeight: 180,
+                    overflow: 'auto',
+                    background: '#0f172a',
+                    border: '1px solid #334155',
+                    padding: 8
+                  }}
+                >
+                  {detail.diff || 'No diff artifact available.'}
+                </pre>
+              </details>
+
+              <details>
+                <summary style={{ cursor: 'pointer', color: '#e2e8f0' }}>Evidence</summary>
+                <ul style={{ marginTop: 8, paddingLeft: 18 }}>
+                  {detail.evidence.map((artifact) => (
+                    <li key={artifact.name} style={{ marginBottom: 4 }}>
+                      <a href={`/api/features/${detail.feature.feature_id}/evidence/${artifact.name}${projectQuery(project)}`}>
+                        {artifact.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </details>
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}

package/packages/web-dashboard/src/lib/aop-client.ts

@@ -0,0 +1,244 @@
+import { readdir, readFile, stat } from 'node:fs/promises';
+import path from 'node:path';
+import YAML from 'yaml';
+import { getProjectByName, readMultiProjectConfig } from './multi-project-config';
+import type {
+  DashboardStatusPayload,
+  EvidenceArtifact,
+  FeatureDetail,
+  FeaturesIndex,
+  FeatureSummary
+} from './types.js';
+
+const AOP_ROOT = process.env.AOP_ROOT ?? process.cwd();
+
+interface ParsedFrontMatter {
+  frontMatter: Record<string, unknown>;
+  body: string;
+}
+
+const STATUS_TO_PHASE: Record<string, FeatureSummary['phase']> = {
+  planning: 'planning',
+  building: 'building',
+  qa: 'qa',
+  ready_to_merge: 'ready_to_merge',
+  merged: 'merged',
+  blocked: 'blocked',
+  failed: 'blocked',
+  paused_budget: 'blocked'
+};
+
+function parseFrontMatter(raw: string): ParsedFrontMatter {
+  const normalized = raw.replace(/\r\n/g, '\n');
+  const match = normalized.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (!match) {
+    return { frontMatter: {}, body: normalized };
+  }
+  const frontMatter = (YAML.parse(match[1]) ?? {}) as Record<string, unknown>;
+  return { frontMatter, body: normalized.slice(match[0].length) };
+}
+
+function normalizeFeatureSummary(
+  featureId: string,
+  frontMatter: Record<string, unknown>,
+  index: FeaturesIndex,
+  repoRoot = AOP_ROOT
+): FeatureSummary {
+  const status = typeof frontMatter.status === 'string' ? frontMatter.status : 'unknown';
+  const blockedQueue = Array.isArray(index.blocked_queue) ? index.blocked_queue.map((entry) => entry.feature_id) : [];
+  const phase =
+    index.merged?.includes(featureId)
+      ? 'merged'
+      : index.blocked?.includes(featureId) || blockedQueue.includes(featureId)
+        ? 'blocked'
+        : STATUS_TO_PHASE[status] ?? (index.active?.includes(featureId) ? 'planning' : 'unknown');
+  const branchRaw =
+    typeof frontMatter.worktree_branch === 'string'
+      ? frontMatter.worktree_branch
+      : typeof frontMatter.branch === 'string'
+        ? frontMatter.branch
+        : null;
+  return {
+    id: featureId,
+    feature_id: featureId,
+    status,
+    phase,
+    plan_version: typeof frontMatter.plan_version === 'number' ? frontMatter.plan_version : undefined,
+    locks_held: Array.isArray(frontMatter.locks) ? (frontMatter.locks as string[]) : undefined,
+    gate_profile: typeof frontMatter.gate_profile === 'string' ? frontMatter.gate_profile : undefined,
+    branch: branchRaw,
+    worktree_path:
+      typeof frontMatter.worktree_path === 'string'
+        ? frontMatter.worktree_path
+        : path.join(repoRoot, '.worktrees', featureId),
+    last_updated: typeof frontMatter.last_updated === 'string' ? frontMatter.last_updated : undefined,
+    status_reason: typeof frontMatter.status_reason === 'string' ? frontMatter.status_reason : undefined,
+    activity_state:
+      typeof frontMatter.activity_state === 'string' ? (frontMatter.activity_state as FeatureSummary['activity_state']) : undefined,
+    activity_last_event_at:
+      typeof frontMatter.activity_last_event_at === 'string' ? frontMatter.activity_last_event_at : undefined,
+    activity_detected_via:
+      typeof frontMatter.activity_detected_via === 'string'
+        ? (frontMatter.activity_detected_via as FeatureSummary['activity_detected_via'])
+        : undefined,
+    pr:
+      frontMatter.pr && typeof frontMatter.pr === 'object'
+        ? (frontMatter.pr as FeatureSummary['pr'])
+        : null
+  };
+}
+
+export function getAopRoot(): string {
+  return AOP_ROOT;
+}
+
+export async function resolveProjectRoot(projectName?: string | null): Promise<string> {
+  const normalized = typeof projectName === 'string' ? projectName.trim() : '';
+  if (!normalized) {
+    return AOP_ROOT;
+  }
+
+  const config = await readMultiProjectConfig(AOP_ROOT);
+  if (!config) {
+    return AOP_ROOT;
+  }
+  const project = getProjectByName(config, normalized);
+  return project?.path ?? AOP_ROOT;
+}
+
+export function getFeatureRoot(featureId: string, repoRoot = AOP_ROOT): string {
+  return path.join(repoRoot, '.aop', 'features', featureId);
+}
+
+export async function readFeaturesIndex(repoRoot = AOP_ROOT): Promise<FeaturesIndex> {
+  const indexPath = path.join(repoRoot, '.aop', 'features', 'index.json');
+  try {
+    const raw = await readFile(indexPath, 'utf-8');
+    return JSON.parse(raw) as FeaturesIndex;
+  } catch {
+    return { active: [], blocked: [], merged: [], blocked_queue: [] };
+  }
+}
+
+export async function readFeatureState(featureId: string, repoRoot = AOP_ROOT): Promise<FeatureSummary | null> {
+  const statePath = path.join(getFeatureRoot(featureId, repoRoot), 'state.md');
+  try {
+    const raw = await readFile(statePath, 'utf-8');
+    const { frontMatter } = parseFrontMatter(raw);
+    return normalizeFeatureSummary(featureId, frontMatter, { active: [], blocked: [], merged: [], blocked_queue: [] }, repoRoot);
+  } catch {
+    return null;
+  }
+}
+
+export async function readFeaturePlan(featureId: string, repoRoot = AOP_ROOT): Promise<Record<string, unknown> | null> {
+  const planPath = path.join(getFeatureRoot(featureId, repoRoot), 'plan.json');
+  try {
+    const raw = await readFile(planPath, 'utf-8');
+    return JSON.parse(raw) as Record<string, unknown>;
+  } catch {
+    return null;
+  }
+}
+
+export async function readFeatureDiff(featureId: string, repoRoot = AOP_ROOT): Promise<string> {
+  const diffPath = path.join(getFeatureRoot(featureId, repoRoot), 'evidence', 'diff.patch');
+  try {
+    return await readFile(diffPath, 'utf-8');
+  } catch {
+    return '';
+  }
+}
+
+export async function listEvidenceArtifacts(featureId: string, repoRoot = AOP_ROOT): Promise<EvidenceArtifact[]> {
+  const evidenceDir = path.join(getFeatureRoot(featureId, repoRoot), 'evidence');
+  try {
+    const files = await readdir(evidenceDir);
+    const artifacts: EvidenceArtifact[] = [];
+    for (const file of files.sort((a, b) => a.localeCompare(b))) {
+      const fullPath = path.join(evidenceDir, file);
+      const fileStat = await stat(fullPath);
+      if (!fileStat.isFile()) {
+        continue;
+      }
+      artifacts.push({
+        name: file,
+        path: fullPath,
+        updated_at: fileStat.mtime.toISOString()
+      });
+    }
+    return artifacts;
+  } catch {
+    return [];
+  }
+}
+
+export async function readEvidenceArtifact(
+  featureId: string,
+  artifactName: string,
+  repoRoot = AOP_ROOT
+): Promise<string | null> {
+  const sanitized = path.basename(artifactName);
+  if (sanitized !== artifactName) {
+    return null;
+  }
+  const artifactPath = path.join(getFeatureRoot(featureId, repoRoot), 'evidence', sanitized);
+  try {
+    return await readFile(artifactPath, 'utf-8');
+  } catch {
+    return null;
+  }
+}
+
+export async function readDashboardStatus(repoRoot = AOP_ROOT): Promise<DashboardStatusPayload> {
+  const index = await readFeaturesIndex(repoRoot);
+  const allFeatureIds = new Set<string>([
+    ...(index.active ?? []),
+    ...(index.blocked ?? []),
+    ...(index.merged ?? []),
+    ...((index.blocked_queue ?? []).map((entry) => entry.feature_id))
+  ]);
+
+  const features: FeatureSummary[] = [];
+  for (const featureId of [...allFeatureIds].sort((a, b) => a.localeCompare(b))) {
+    const statePath = path.join(getFeatureRoot(featureId, repoRoot), 'state.md');
+    try {
+      const raw = await readFile(statePath, 'utf-8');
+      const { frontMatter } = parseFrontMatter(raw);
+      features.push(normalizeFeatureSummary(featureId, frontMatter, index, repoRoot));
+    } catch {
+      const blockedQueue = Array.isArray(index.blocked_queue) ? index.blocked_queue.map((entry) => entry.feature_id) : [];
+      features.push({
+        id: featureId,
+        feature_id: featureId,
+        status: index.merged?.includes(featureId) ? 'merged' : index.blocked?.includes(featureId) ? 'blocked' : 'unknown',
+        phase:
+          index.merged?.includes(featureId)
+            ? 'merged'
+            : index.blocked?.includes(featureId) || blockedQueue.includes(featureId)
+              ? 'blocked'
+              : index.active?.includes(featureId)
+                ? 'planning'
+                : 'unknown',
+        branch: null,
+        worktree_path: null,
+        pr: null
+      });
+    }
+  }
+
+  return { index, features };
+}
+
+export async function readFeatureDetail(featureId: string, repoRoot = AOP_ROOT): Promise<FeatureDetail | null> {
+  const feature = await readFeatureState(featureId, repoRoot);
+  if (!feature) {
+    return null;
+  }
+  return {
+    feature,
+    plan: await readFeaturePlan(featureId, repoRoot),
+    diff: await readFeatureDiff(featureId, repoRoot),
+    evidence: await listEvidenceArtifacts(featureId, repoRoot)
+  };
+}