agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/components/dashboard/attention-strip.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import {
+  TASK_FILTER_OPTIONS,
+  type DashboardSummaryCounts,
+  type QuickFilterKey,
+} from '@/lib/dashboard-utils.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface AttentionStripProps {
+  counts: DashboardSummaryCounts;
+  activeFilter: QuickFilterKey | null;
+  onSelectFilter: (key: QuickFilterKey) => void;
+}
+
+const COUNT_BY_KEY: Record<QuickFilterKey, keyof DashboardSummaryCounts> = {
+  needs_me: 'needsMe',
+  at_risk: 'atRisk',
+  ready: 'ready',
+  stalled: 'stalled',
+  waiting_on_dependencies: 'waitingOnDependencies',
+  waiting_on_ci: 'waitingOnCi',
+  recently_changed: 'recentlyChanged',
+  active: 'ready',
+  blocked: 'atRisk',
+  awaiting_input: 'needsMe',
+  ready_to_merge: 'ready',
+  ci_failing: 'atRisk',
+};
+
+export function AttentionStrip({ counts, activeFilter, onSelectFilter }: AttentionStripProps) {
+  return (
+    <section className={styles.attentionStrip} aria-label="Attention strip">
+      {TASK_FILTER_OPTIONS.map((item) => {
+        const count = counts[COUNT_BY_KEY[item.key]];
+        return (
+          <button
+            key={item.key}
+            type="button"
+            className={`${styles.attentionCard} ${
+              activeFilter === item.key ? styles.attentionCardActive : ''
+            }`}
+            onClick={() => onSelectFilter(item.key)}
+            aria-pressed={activeFilter === item.key}
+          >
+            <span className={styles.summaryLabel}>{item.label}</span>
+            <strong className={styles.summaryValue}>{count}</strong>
+          </button>
+        );
+      })}
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/collision-approval-drawer.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React, { useState } from 'react';
+import type { FeatureSummary } from '@/lib/types.js';
+import type { ApiEnvelope } from '@/lib/api-envelope.js';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import styles from '@/styles/dashboard.module.css';
+
+export interface CollisionDetail {
+  feature: FeatureSummary;
+  collision: NonNullable<FeatureSummary['collision']>;
+}
+
+interface CollisionApprovalDrawerProps {
+  detail: CollisionDetail | null;
+  project: string;
+  onClose: () => void;
+  onApproved: () => Promise<void> | void;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+}
+
+export function CollisionApprovalDrawer({
+  detail,
+  project,
+  onClose,
+  onApproved,
+  addToast,
+}: CollisionApprovalDrawerProps) {
+  if (!detail) {
+    return null;
+  }
+
+  const { feature, collision } = detail;
+
+  return (
+    <aside className={styles.triageDrawer}>
+      <div className={styles.panelHeader}>
+        <div>
+          <h2 className={styles.panelTitle}>Plan Collision</h2>
+          <p className={styles.metaText}>{feature.feature_id}</p>
+        </div>
+        <button type="button" className={styles.closeButton} onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>Collision Details</h3>
+        <p style={{ fontSize: '0.82rem', lineHeight: 1.5, margin: 0 }}>
+          This feature&rsquo;s plan overlaps with{' '}
+          <strong>
+            {collision.with_feature_ids.length === 1
+              ? collision.with_feature_ids[0]
+              : `${collision.with_feature_ids.length} other features`}
+          </strong>{' '}
+          on shared files. Approve the overlap to unblock execution.
+        </p>
+      </section>
+
+      {collision.file_paths.length > 0 && (
+        <section className={styles.section}>
+          <h3 className={styles.sectionTitle}>Overlapping Files ({collision.file_paths.length})</h3>
+          <ul
+            style={{
+              margin: 0,
+              paddingLeft: '1.2rem',
+              fontSize: '0.78rem',
+              fontFamily: 'var(--font-mono, monospace)',
+              lineHeight: 1.6,
+            }}
+          >
+            {collision.file_paths.slice(0, 30).map((filePath) => (
+              <li key={filePath}>{filePath}</li>
+            ))}
+            {collision.file_paths.length > 30 && (
+              <li style={{ opacity: 0.7 }}>+{collision.file_paths.length - 30} more</li>
+            )}
+          </ul>
+        </section>
+      )}
+
+      {collision.with_feature_ids.map((withId) => (
+        <ApprovalForm
+          key={withId}
+          featureId={feature.feature_id}
+          withFeatureId={withId}
+          project={project}
+          addToast={addToast}
+          onApproved={onApproved}
+        />
+      ))}
+    </aside>
+  );
+}
+
+function ApprovalForm({
+  featureId,
+  withFeatureId,
+  project,
+  addToast,
+  onApproved,
+}: {
+  featureId: string;
+  withFeatureId: string;
+  project: string;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  onApproved: () => Promise<void> | void;
+}) {
+  const [reason, setReason] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleApprove = async () => {
+    if (reason.trim().length === 0) {
+      addToast('Please provide a reason for the approval', 'error');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const res = await fetch(`/api/collisions/approve${projectQuery(project)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          feature_id: featureId,
+          with_feature_id: withFeatureId,
+          reason: reason.trim(),
+          resume: true,
+        }),
+      });
+      const envelope = (await res.json()) as ApiEnvelope<Record<string, unknown>>;
+      if (envelope.ok) {
+        addToast(`Collision with ${withFeatureId} approved`, 'success');
+        setReason('');
+        // Trigger a retry to resume execution after the collision unblock
+        try {
+          await fetch(`/api/actions${projectQuery(project)}`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ action: 'feature.retry', feature_id: featureId }),
+          });
+          addToast('Feature retry requested — execution will resume', 'info');
+        } catch {
+          addToast('Collision approved but retry failed — use aop retry to resume', 'info');
+        }
+        await onApproved();
+      } else {
+        addToast(
+          `Approval failed: ${'error' in envelope ? envelope.error.message : 'Unknown error'}`,
+          'error',
+        );
+      }
+    } catch {
+      addToast('Failed to submit collision approval', 'error');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <section className={styles.section}>
+      <h3 className={styles.sectionTitle}>Approve overlap with {withFeatureId}</h3>
+      <label className={styles.label} htmlFor={`collision-reason-${withFeatureId}`}>
+        Reason for approval
+      </label>
+      <textarea
+        id={`collision-reason-${withFeatureId}`}
+        className={styles.textarea}
+        value={reason}
+        onChange={(e) => setReason(e.target.value)}
+        placeholder="e.g. Coordinated refactor, intentional overlap"
+        disabled={submitting}
+        rows={2}
+      />
+      <div className={styles.inlineActions}>
+        <button
+          type="button"
+          className={`${styles.button} ${styles.buttonSuccess}`}
+          onClick={() => void handleApprove()}
+          disabled={submitting || reason.trim().length === 0}
+        >
+          {submitting ? 'Approving\u2026' : 'Approve & Resume'}
+        </button>
+      </div>
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/command-center-header.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import Link from 'next/link';
+import type { DashboardViewMode } from '@/lib/dashboard-utils.js';
+import type { ProjectListEntry } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface CommandCenterHeaderProps {
+  connected: boolean;
+  project: string;
+  projects: ProjectListEntry[];
+  viewMode: DashboardViewMode;
+  onProjectChange: (project: string) => void;
+  onViewModeChange: (viewMode: DashboardViewMode) => void;
+  analyticsHref: string;
+  launchHref: string;
+}
+
+function projectLabel(project: ProjectListEntry): string {
+  if (project.label && project.label.trim().length > 0) {
+    return project.label;
+  }
+  return project.name;
+}
+
+export function CommandCenterHeader({
+  connected,
+  project,
+  projects,
+  viewMode,
+  onProjectChange,
+  onViewModeChange,
+  analyticsHref,
+  launchHref,
+}: CommandCenterHeaderProps) {
+  const activeProject = projects.find((entry) => entry.name === project) ?? null;
+
+  return (
+    <header className={styles.commandCenterHeader}>
+      <div className={styles.commandCenterHeading}>
+        <p className={styles.eyebrow}>Triage-first command center</p>
+        <h1 className={styles.pageTitle}>AOP Dashboard</h1>
+        <p className={styles.pageSubtitle}>
+          {activeProject
+            ? `${projectLabel(activeProject)}${activeProject.environment ? ` • ${activeProject.environment}` : ''}`
+            : 'Current Repo'}
+        </p>
+      </div>
+
+      <div className={styles.commandCenterActions}>
+        <div className={styles.inlineActions}>
+          <button
+            type="button"
+            className={`${styles.button} ${viewMode === 'board' ? styles.buttonSuccess : ''}`}
+            onClick={() => onViewModeChange('board')}
+          >
+            Board
+          </button>
+          <button
+            type="button"
+            className={`${styles.button} ${viewMode === 'list' ? styles.buttonSuccess : ''}`}
+            onClick={() => onViewModeChange('list')}
+          >
+            List
+          </button>
+          <Link href={analyticsHref} className={styles.linkButton}>
+            Analytics
+          </Link>
+          <Link href={launchHref} className={styles.linkButton}>
+            Launch
+          </Link>
+        </div>
+
+        <div className={styles.projectPicker}>
+          <label className={styles.label} htmlFor="project-switcher">
+            Project
+          </label>
+          <select
+            id="project-switcher"
+            className={styles.select}
+            value={project}
+            onChange={(event) => onProjectChange(event.target.value)}
+          >
+            <option value="">Current Repo</option>
+            {projects.map((entry) => (
+              <option key={entry.name} value={entry.name}>
+                {projectLabel(entry)}
+              </option>
+            ))}
+          </select>
+          <span
+            className={`${styles.connectionDot} ${connected ? styles.connected : styles.disconnected}`}
+            aria-label={connected ? 'connected' : 'disconnected'}
+          />
+        </div>
+
+        {activeProject?.owner ? (
+          <p className={styles.metaText}>Owner: {activeProject.owner}</p>
+        ) : null}
+      </div>
+    </header>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/mainline-status-banner.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { ApiEnvelope } from '@/lib/api-envelope.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface MainlineStatus {
+  has_uncommitted_changes: boolean;
+  file_count: number;
+  branch: string;
+  summary: string;
+}
+
+interface MainlineStatusBannerProps {
+  project: string;
+}
+
+const POLL_INTERVAL_MS = 15_000;
+
+export function MainlineStatusBanner({ project }: MainlineStatusBannerProps) {
+  const [status, setStatus] = useState<MainlineStatus | null>(null);
+  const [dismissed, setDismissed] = useState(false);
+
+  const poll = useCallback(async () => {
+    try {
+      const res = await fetch(`/api/mainline/status${projectQuery(project)}`);
+      const envelope = (await res.json()) as ApiEnvelope<MainlineStatus>;
+      if (envelope.ok) {
+        setStatus(envelope.data);
+        // Reset dismissal when the problem goes away and comes back
+        if (!envelope.data.has_uncommitted_changes) {
+          setDismissed(false);
+        }
+      }
+    } catch {
+      // Non-fatal — banner simply stays hidden
+    }
+  }, [project]);
+
+  useEffect(() => {
+    void poll();
+    const interval = setInterval(() => void poll(), POLL_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [poll]);
+
+  if (!status?.has_uncommitted_changes || dismissed) {
+    return null;
+  }
+
+  return (
+    <div
+      className={styles.banner}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        margin: '0 0 0.5rem 0',
+      }}
+    >
+      <span style={{ fontSize: '1rem', flexShrink: 0 }}>&#x26A0;&#xFE0F;</span>
+      <span style={{ flex: 1 }}>
+        <strong>{status.summary}.</strong> Please commit your changes so we can merge feature
+        branches back into <code>{status.branch}</code> &mdash; we&rsquo;ll handle any merge
+        conflicts that arise.
+      </span>
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        style={{
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          fontSize: '1rem',
+          opacity: 0.6,
+          flexShrink: 0,
+        }}
+        title="Dismiss"
+      >
+        &times;
+      </button>
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/merged-archive.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { buildFeatureFocusHref, formatRelativeTime } from '@/lib/dashboard-utils.js';
+import type { FeatureSummary } from '@/lib/types.js';
+import Link from 'next/link';
+import styles from '@/styles/dashboard.module.css';
+
+interface MergedArchiveProps {
+  features: FeatureSummary[];
+  project: string;
+}
+
+export function MergedArchive({ features, project }: MergedArchiveProps) {
+  return (
+    <details className={styles.mergedArchive}>
+      <summary className={styles.sectionSummary}>Merged Archive ({features.length})</summary>
+      {features.length === 0 ? (
+        <p className={styles.metaText}>No merged features in the current selection.</p>
+      ) : (
+        <div className={styles.archiveList}>
+          {features.slice(0, 12).map((feature) => (
+            <Link
+              key={feature.feature_id}
+              href={buildFeatureFocusHref(feature.feature_id, project)}
+              className={styles.archiveItem}
+            >
+              <span>{feature.feature_id}</span>
+              <span className={styles.metaText}>
+                {formatRelativeTime(feature.last_meaningful_change_at ?? feature.last_updated)}
+              </span>
+            </Link>
+          ))}
+        </div>
+      )}
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/prioritized-queues.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { QuickLaunchPanel } from '@/components/quick-launch-panel';
+import { buildFeatureFocusHref, matchesQuickFilter } from '@/lib/dashboard-utils.js';
+import type { FeatureSummary } from '@/lib/types.js';
+import Link from 'next/link';
+import styles from '@/styles/dashboard.module.css';
+
+interface PrioritizedQueuesProps {
+  features: FeatureSummary[];
+  project: string;
+  onSelectFeature: (featureId: string) => void;
+  quickLaunch: {
+    visible: boolean;
+    launchHref: string;
+    available: boolean;
+    authorized: boolean;
+    disabledReason: string | null;
+  };
+}
+
+function topQueue(features: FeatureSummary[], key: Parameters<typeof matchesQuickFilter>[1]) {
+  return features.filter((feature) => matchesQuickFilter(feature, key)).slice(0, 4);
+}
+
+export function PrioritizedQueues({
+  features,
+  project,
+  onSelectFeature,
+  quickLaunch,
+}: PrioritizedQueuesProps) {
+  const needsMe = topQueue(features, 'needs_me');
+  const ready = topQueue(features, 'ready');
+  const blocked = topQueue(features, 'waiting_on_dependencies');
+
+  return (
+    <section className={styles.prioritizedQueues}>
+      <div className={styles.queueModule}>
+        <h2 className={styles.sectionTitle}>Needs Me</h2>
+        {needsMe.length === 0 ? (
+          <p className={styles.metaText}>No features waiting on operator input.</p>
+        ) : (
+          needsMe.map((feature) => (
+            <button
+              key={feature.feature_id}
+              type="button"
+              className={styles.queueItem}
+              onClick={() => onSelectFeature(feature.feature_id)}
+            >
+              <span>{feature.feature_id}</span>
+              <span className={styles.metaText}>
+                {feature.client_status_label ?? feature.status}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+
+      <div className={styles.queueModule}>
+        <h2 className={styles.sectionTitle}>Ready Queue</h2>
+        {ready.length === 0 ? (
+          <p className={styles.metaText}>No features are ready to merge.</p>
+        ) : (
+          ready.map((feature) => (
+            <Link
+              key={feature.feature_id}
+              href={buildFeatureFocusHref(feature.feature_id, project)}
+              className={styles.queueItem}
+            >
+              <span>{feature.feature_id}</span>
+              <span className={styles.metaText}>Open Focus</span>
+            </Link>
+          ))
+        )}
+      </div>
+
+      <div className={styles.queueModule}>
+        <h2 className={styles.sectionTitle}>Dependency Queue</h2>
+        {blocked.length === 0 ? (
+          <p className={styles.metaText}>No dependency-blocked work.</p>
+        ) : (
+          blocked.map((feature) => (
+            <button
+              key={feature.feature_id}
+              type="button"
+              className={styles.queueItem}
+              onClick={() => onSelectFeature(feature.feature_id)}
+            >
+              <span>{feature.feature_id}</span>
+              <span className={styles.metaText}>Waiting On Dependencies</span>
+            </button>
+          ))
+        )}
+      </div>
+
+      <QuickLaunchPanel {...quickLaunch} />
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/dashboard/reconciler-queue-card.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { ReconcilerQueueSnapshot } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface ReconcilerQueueCardProps {
+  project: string;
+  onSelectFeature?: (featureId: string) => void;
+}
+
+interface QueueResponse {
+  ok: boolean;
+  data?: ReconcilerQueueSnapshot;
+  error?: { message?: string };
+}
+
+export function ReconcilerQueueCard({ project, onSelectFeature }: ReconcilerQueueCardProps) {
+  const [queue, setQueue] = useState<ReconcilerQueueSnapshot | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchQueue = useCallback(async () => {
+    try {
+      const response = await fetch(`/api/reconciler/queue${projectQuery(project)}`);
+      const body = (await response.json()) as QueueResponse;
+      if (body.ok && body.data) {
+        setQueue(body.data);
+      }
+    } catch {
+      // Silently ignore — reconciler queue is optional
+    } finally {
+      setLoading(false);
+    }
+  }, [project]);
+
+  useEffect(() => {
+    void fetchQueue();
+    const interval = setInterval(() => void fetchQueue(), 10_000);
+    return () => clearInterval(interval);
+  }, [fetchQueue]);
+
+  if (loading || !queue) {
+    return null;
+  }
+
+  if (queue.idle && queue.queue.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={styles.card} style={{ marginBottom: '0.75rem' }}>
+      <div className={styles.cardHeader}>
+        <strong>Reconciler Queue</strong>
+        <span
+          style={{
+            display: 'inline-block',
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            background: queue.idle ? '#9ca3af' : '#22c55e',
+            marginLeft: '0.5rem',
+          }}
+        />
+      </div>
+      <div className={styles.cardBody} style={{ fontSize: '0.85rem' }}>
+        {queue.active_feature_id && (
+          <div style={{ marginBottom: '0.5rem' }}>
+            <span style={{ opacity: 0.7 }}>Active: </span>
+            <button
+              onClick={() => onSelectFeature?.(queue.active_feature_id!)}
+              style={{
+                background: 'none',
+                border: 'none',
+                color: 'var(--text-link, #3b82f6)',
+                cursor: 'pointer',
+                padding: 0,
+                textDecoration: 'underline',
+              }}
+            >
+              {queue.active_feature_id}
+            </button>
+          </div>
+        )}
+        {queue.queue.length > 0 && (
+          <div>
+            <span style={{ opacity: 0.7 }}>Queued ({queue.queue.length}):</span>
+            <ul style={{ margin: '0.25rem 0 0 1rem', padding: 0 }}>
+              {queue.queue.map((entry) => (
+                <li key={entry.feature_id} style={{ marginBottom: '0.15rem' }}>
+                  <button
+                    onClick={() => onSelectFeature?.(entry.feature_id)}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      color: 'var(--text-link, #3b82f6)',
+                      cursor: 'pointer',
+                      padding: 0,
+                      textDecoration: 'underline',
+                    }}
+                  >
+                    {entry.feature_id}
+                  </button>
+                  <span style={{ opacity: 0.7, marginLeft: '0.5rem' }}>
+                    ({entry.conflicting_files_count} files)
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}