agentic-orchestrator 0.1.25 → 0.1.26

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

@@ -1,14 +1,26 @@
 'use client';
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import { ConfirmationModal } from '@/components/confirmation-modal';
 import { CollisionQueue } from '@/components/collision-queue';
 import { DetailPanel } from '@/components/detail-panel';
+import { DependencyChains } from '@/components/dependency-chains';
+import { FeatureListView } from '@/components/feature-list-view';
 import { FilterBar } from '@/components/filter-bar';
 import { KanbanBoard } from '@/components/kanban-board';
+import { LiveEventFeed } from '@/components/live-event-feed';
+import { LockResourceMap } from '@/components/lock-resource-map';
+import { QuickLaunchPanel } from '@/components/quick-launch-panel';
+import { RunHealthPanel } from '@/components/run-health-panel';
 import { SummaryBar } from '@/components/summary-bar';
 import { ToastStack, useToast } from '@/components/toast';
 import {
+  applyDashboardRouteState,
   applyQuickFilter,
+  getNextFocusedFeatureId,
+  isQuickLaunchAffordanceVisible,
+  parseDashboardRouteState,
   COLUMN_ORDER,
   computeSummaryCounts,
   createDefaultFilters,
@@ -22,10 +34,24 @@ import type {
   FeatureSummary,
   SSEEvent,
 } from '@/lib/types.js';
+import {
+  appendFeedEvents,
+  deriveFeedEventsFromSnapshotDiff,
+  reduceLiveFeedState,
+  type LiveFeedState,
+} from '@/lib/live-feed.js';
 import styles from '@/styles/dashboard.module.css';
 
 type ProjectEntry = { name: string; path: string };
 type ProjectDefaults = { default_project?: string | null } | null;
+type QuickLaunchAvailability = {
+  available: boolean;
+  enabled: boolean;
+  authorized: boolean;
+  reason: string | null;
+};
+
+const FEATURE_ID_PATTERN = /^[a-z0-9](?:[a-z0-9_-]{1,126}[a-z0-9])?$/;
 
 async function jsonFetch<T>(input: string, init?: RequestInit): Promise<T> {
   const response = await fetch(input, init);
@@ -43,18 +69,69 @@ function sortFeatures(features: FeatureSummary[]): FeatureSummary[] {
   return [...features].sort((left, right) => left.feature_id.localeCompare(right.feature_id));
 }
 
+function createInitialFeedState(): LiveFeedState {
+  return { events: [], paused: false };
+}
+
 export default function Dashboard() {
   const [payload, setPayload] = useState<DashboardStatusPayload>(emptyStatusPayload());
   const [connected, setConnected] = useState(false);
   const [lastSnapshotAt, setLastSnapshotAt] = useState<number | null>(null);
+  const [nowMs, setNowMs] = useState(Date.now());
+  const [viewMode, setViewMode] = useState<'board' | 'list'>('board');
   const [selectedFeatureId, setSelectedFeatureId] = useState<string | null>(null);
   const [focusedFeatureId, setFocusedFeatureId] = useState<string | null>(null);
   const [detail, setDetail] = useState<FeatureDetail | null>(null);
   const [projects, setProjects] = useState<ProjectEntry[]>([]);
   const [project, setProject] = useState('');
   const [filters, setFilters] = useState(createDefaultFilters());
+  const [feedState, setFeedState] = useState<LiveFeedState>(createInitialFeedState());
+  const [quickLaunchAvailability, setQuickLaunchAvailability] = useState<QuickLaunchAvailability>({
+    available: false,
+    enabled: false,
+    authorized: false,
+    reason: null,
+  });
+  const [quickLaunchFeatureId, setQuickLaunchFeatureId] = useState('');
+  const [quickLaunchGoal, setQuickLaunchGoal] = useState('');
+  const [quickLaunchSubmitting, setQuickLaunchSubmitting] = useState(false);
+  const [quickLaunchConfirmOpen, setQuickLaunchConfirmOpen] = useState(false);
   const { notifications, addToast, dismissToast } = useToast();
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const previousPayloadRef = useRef<DashboardStatusPayload | null>(null);
+  const feedPausedRef = useRef(false);
+
+  const syncUrlState = useCallback(
+    (
+      options: {
+        featureId?: string | null;
+        view?: 'board' | 'list';
+        projectName?: string;
+        nextFilters?: ReturnType<typeof createDefaultFilters>;
+      },
+      method: 'push' | 'replace' = 'push',
+    ) => {
+      const url = new URL(window.location.href);
+      const nextFeature = options.featureId !== undefined ? options.featureId : selectedFeatureId;
+      const nextView = options.view ?? viewMode;
+      const nextProject = options.projectName !== undefined ? options.projectName : project;
+      const nextFilters = options.nextFilters ?? filters;
+
+      applyDashboardRouteState(url.searchParams, {
+        project: nextProject,
+        featureId: nextFeature,
+        viewMode: nextView,
+        filters: nextFilters,
+      });
+
+      if (method === 'replace') {
+        window.history.replaceState(null, '', url.toString());
+      } else {
+        window.history.pushState(null, '', url.toString());
+      }
+    },
+    [filters, project, selectedFeatureId, viewMode],
+  );
 
   const refreshDetail = useCallback(
     async (featureId: string) => {
@@ -74,6 +151,7 @@ export default function Dashboard() {
     );
     if (response.ok && response.data) {
       setPayload(response.data);
+      previousPayloadRef.current = response.data;
     }
   }, [project]);
 
@@ -105,18 +183,73 @@ export default function Dashboard() {
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    const queryProject = params.get('project');
-    if (queryProject) {
-      setProject(queryProject);
+    const routeState = parseDashboardRouteState(params);
+    if (params.has('project')) {
+      setProject(routeState.project);
     }
+    setSelectedFeatureId(routeState.featureId);
+    setFocusedFeatureId(routeState.featureId);
+    setViewMode(routeState.viewMode);
+    setFilters(routeState.filters);
+  }, []);
+
+  useEffect(() => {
+    const onPopState = () => {
+      const routeState = parseDashboardRouteState(new URLSearchParams(window.location.search));
+      setProject(routeState.project);
+      setViewMode(routeState.viewMode);
+      setSelectedFeatureId(routeState.featureId);
+      setFocusedFeatureId(routeState.featureId);
+      setFilters(routeState.filters);
+    };
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
   }, []);
 
   useEffect(() => {
     setSelectedFeatureId(null);
     setFocusedFeatureId(null);
     setDetail(null);
+    setFeedState(createInitialFeedState());
+    previousPayloadRef.current = null;
+  }, [project]);
+
+  useEffect(() => {
+    feedPausedRef.current = feedState.paused;
+  }, [feedState.paused]);
+
+  const refreshQuickLaunchAvailability = useCallback(async () => {
+    try {
+      const response = await jsonFetch<{
+        ok: boolean;
+        data?: { available?: boolean; enabled?: boolean; authorized?: boolean; reason?: string };
+      }>(`/api/run${projectQuery(project)}`);
+
+      if (response.ok && response.data) {
+        setQuickLaunchAvailability({
+          available: response.data.available === true,
+          enabled: response.data.enabled === true,
+          authorized: response.data.authorized === true,
+          reason: typeof response.data.reason === 'string' ? response.data.reason : null,
+        });
+        return;
+      }
+    } catch {
+      // fallback below
+    }
+
+    setQuickLaunchAvailability({
+      available: false,
+      enabled: false,
+      authorized: false,
+      reason: null,
+    });
   }, [project]);
 
+  useEffect(() => {
+    void refreshQuickLaunchAvailability();
+  }, [refreshQuickLaunchAvailability]);
+
   useEffect(() => {
     setConnected(false);
     setLastSnapshotAt(null);
@@ -130,6 +263,20 @@ export default function Dashboard() {
       try {
         const parsed = JSON.parse(event.data) as SSEEvent;
         if (parsed.type === 'snapshot' && parsed.payload) {
+          const nextPayload = parsed.payload;
+          if (!feedPausedRef.current) {
+            const derived = deriveFeedEventsFromSnapshotDiff(
+              previousPayloadRef.current,
+              nextPayload,
+            );
+            if (derived.length > 0) {
+              setFeedState((current) => ({
+                ...current,
+                events: appendFeedEvents(current.events, derived),
+              }));
+            }
+          }
+          previousPayloadRef.current = nextPayload;
           setPayload(parsed.payload);
           setConnected(true);
           setLastSnapshotAt(Date.now());
@@ -147,12 +294,14 @@ export default function Dashboard() {
 
   useEffect(() => {
     const interval = setInterval(() => {
+      const now = Date.now();
+      setNowMs(now);
       if (lastSnapshotAt == null) {
         setConnected(false);
         return;
       }
-      setConnected(Date.now() - lastSnapshotAt < 20_000);
-    }, 1000);
+      setConnected(now - lastSnapshotAt < 20_000);
+    }, 5000);
 
     return () => clearInterval(interval);
   }, [lastSnapshotAt]);
@@ -248,67 +397,30 @@ export default function Dashboard() {
       }
 
       const focusId = focusedFeatureId ?? allVisibleFeatureIds[0];
-      const currentColumnIndex = columnFeatureIds.findIndex((column) =>
-        column.featureIds.includes(focusId),
-      );
-      const currentColumn =
-        currentColumnIndex >= 0 ? columnFeatureIds[currentColumnIndex] : columnFeatureIds[0];
-      const currentRow = Math.max(0, currentColumn.featureIds.indexOf(focusId));
-
-      const moveWithinColumn = (offset: number) => {
-        const nextRow = Math.min(
-          currentColumn.featureIds.length - 1,
-          Math.max(0, currentRow + offset),
-        );
-        const nextFeatureId = currentColumn.featureIds[nextRow];
-        if (nextFeatureId) {
-          setFocusedFeatureId(nextFeatureId);
-        }
-      };
-
-      const moveAcrossColumns = (direction: 1 | -1) => {
-        let cursor = currentColumnIndex;
-        while (cursor >= 0 && cursor < columnFeatureIds.length) {
-          cursor += direction;
-          if (cursor < 0 || cursor >= columnFeatureIds.length) {
-            break;
-          }
-          const candidate = columnFeatureIds[cursor];
-          if (candidate.featureIds.length === 0) {
-            continue;
-          }
-          const nextRow = Math.min(currentRow, candidate.featureIds.length - 1);
-          const nextFeatureId = candidate.featureIds[nextRow];
-          if (nextFeatureId) {
-            setFocusedFeatureId(nextFeatureId);
-          }
-          break;
-        }
-      };
-
-      if (event.key === 'ArrowUp') {
-        event.preventDefault();
-        moveWithinColumn(-1);
-      } else if (event.key === 'ArrowDown') {
-        event.preventDefault();
-        moveWithinColumn(1);
-      } else if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        moveAcrossColumns(-1);
-      } else if (event.key === 'ArrowRight') {
+      if (
+        event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight'
+      ) {
         event.preventDefault();
-        moveAcrossColumns(1);
+        const arrowKey = event.key as 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight';
+        const nextFocus = getNextFocusedFeatureId(columnFeatureIds, focusId, arrowKey);
+        if (nextFocus) {
+          setFocusedFeatureId(nextFocus);
+        }
       } else if (event.key === 'Enter') {
         event.preventDefault();
         if (focusId) {
           setSelectedFeatureId(focusId);
+          syncUrlState({ featureId: focusId });
         }
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [allVisibleFeatureIds, columnFeatureIds, focusedFeatureId]);
+  }, [allVisibleFeatureIds, columnFeatureIds, focusedFeatureId, syncUrlState]);
 
   useEffect(() => {
     if (!selectedFeatureId) {
@@ -319,18 +431,113 @@ export default function Dashboard() {
     if (!exists) {
       setSelectedFeatureId(null);
       setDetail(null);
+      syncUrlState({ featureId: null }, 'replace');
     }
-  }, [payload.features, selectedFeatureId]);
+  }, [payload.features, selectedFeatureId, syncUrlState]);
 
   const summaryCounts = useMemo(() => computeSummaryCounts(payload), [payload]);
   const hasActiveFilters = filtersAreActive(filters);
+  const dependencyChains = useMemo(
+    () =>
+      Array.isArray(payload.dep_blocked)
+        ? payload.dep_blocked
+            .filter((item) => item.depends_on_unresolved.length > 0)
+            .sort((left, right) => left.feature_id.localeCompare(right.feature_id))
+        : [],
+    [payload.dep_blocked],
+  );
+  const dependencyMap = useMemo(() => {
+    const map = new Map<string, string[]>();
+    for (const entry of dependencyChains) {
+      map.set(entry.feature_id, entry.depends_on_unresolved);
+    }
+    return map;
+  }, [dependencyChains]);
+  const dependencyBlockedIds = useMemo(
+    () => new Set(dependencyChains.map((entry) => entry.feature_id)),
+    [dependencyChains],
+  );
+  const selectedDependencies = useMemo(() => {
+    if (!selectedFeatureId) {
+      return [];
+    }
+    return dependencyMap.get(selectedFeatureId) ?? [];
+  }, [dependencyMap, selectedFeatureId]);
+
+  const applyFilters = (
+    next: ReturnType<typeof createDefaultFilters>,
+    method: 'push' | 'replace' = 'replace',
+  ) => {
+    setFilters(next);
+    syncUrlState({ nextFilters: next }, method);
+  };
 
   const setQuickFilter = (key: Parameters<typeof applyQuickFilter>[0]) => {
     if (filters.quickFilter === key) {
-      setFilters(createDefaultFilters());
+      applyFilters(createDefaultFilters(), 'push');
+      return;
+    }
+    applyFilters(applyQuickFilter(key), 'push');
+  };
+
+  const requestQuickLaunch = () => {
+    const featureId = quickLaunchFeatureId.trim();
+    const goal = quickLaunchGoal.trim();
+    if (!FEATURE_ID_PATTERN.test(featureId)) {
+      addToast('feature_id must match /^[a-z0-9](?:[a-z0-9_-]{1,126}[a-z0-9])?$/', 'error');
+      return;
+    }
+    if (goal.length === 0) {
+      addToast('Goal is required', 'error');
       return;
     }
-    setFilters(applyQuickFilter(key));
+    setQuickLaunchConfirmOpen(true);
+  };
+
+  const confirmQuickLaunch = async () => {
+    if (quickLaunchSubmitting) {
+      return;
+    }
+    setQuickLaunchSubmitting(true);
+    try {
+      const response = await fetch(`/api/run${projectQuery(project)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          feature_id: quickLaunchFeatureId.trim(),
+          goal: quickLaunchGoal.trim(),
+          confirm_launch: true,
+        }),
+      });
+      const body = (await response.json()) as {
+        ok: boolean;
+        data?: { feature_id: string };
+        error?: { message?: string; code?: string };
+      };
+
+      if (!body.ok || !body.data) {
+        addToast(body.error?.message ?? 'Quick launch failed', 'error');
+        if (response.status === 403) {
+          await refreshQuickLaunchAvailability();
+        }
+        return;
+      }
+
+      addToast(`Launched ${body.data.feature_id}`, 'success');
+      setQuickLaunchFeatureId('');
+      setQuickLaunchGoal('');
+      setSelectedFeatureId(body.data.feature_id);
+      setFocusedFeatureId(body.data.feature_id);
+      syncUrlState({ featureId: body.data.feature_id });
+      await refreshStatus();
+      await refreshDetail(body.data.feature_id);
+      await refreshQuickLaunchAvailability();
+    } catch {
+      addToast('Quick launch failed', 'error');
+    } finally {
+      setQuickLaunchSubmitting(false);
+      setQuickLaunchConfirmOpen(false);
+    }
   };
 
   return (
@@ -344,6 +551,32 @@ export default function Dashboard() {
         </div>
 
         <div className={styles.metaControls}>
+          <Link href={`/analytics${projectQuery(project)}`} className={styles.linkButton}>
+            Analytics
+          </Link>
+          <div className={styles.inlineActions}>
+            <button
+              type="button"
+              className={`${styles.button} ${viewMode === 'board' ? styles.buttonSuccess : ''}`}
+              onClick={() => {
+                setViewMode('board');
+                syncUrlState({ view: 'board' });
+              }}
+            >
+              Board
+            </button>
+            <button
+              type="button"
+              className={`${styles.button} ${viewMode === 'list' ? styles.buttonSuccess : ''}`}
+              onClick={() => {
+                setViewMode('list');
+                syncUrlState({ view: 'list' });
+              }}
+            >
+              List
+            </button>
+          </div>
+
           <label className={styles.label} htmlFor="project-switcher">
             Project
           </label>
@@ -354,13 +587,7 @@ export default function Dashboard() {
             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());
+              syncUrlState({ projectName: next });
             }}
           >
             <option value="">Current Repo</option>
@@ -381,27 +608,88 @@ export default function Dashboard() {
         counts={summaryCounts}
         activeQuickFilter={filters.quickFilter}
         onQuickFilter={setQuickFilter}
+        mergeHistogram14d={payload.metrics?.merge_histogram_14d}
+        totalCostTodayUsd={payload.metrics?.total_cost_today_usd}
+        analyticsHref={`/analytics${projectQuery(project)}`}
       />
 
       <FilterBar
         filters={filters}
-        onFiltersChange={setFilters}
-        onClearFilters={() => setFilters(createDefaultFilters())}
+        onFiltersChange={(next) => applyFilters(next, 'replace')}
+        onClearFilters={() => applyFilters(createDefaultFilters(), 'push')}
         searchInputRef={searchInputRef}
       />
 
       <div className={styles.layout}>
         <div>
-          <KanbanBoard
-            featuresByPhase={featuresByPhase}
-            hasActiveFilters={hasActiveFilters}
-            selectedFeatureId={selectedFeatureId}
-            focusedFeatureId={focusedFeatureId}
-            onSelectFeature={(featureId) => {
-              setSelectedFeatureId(featureId);
-              setFocusedFeatureId(featureId);
-            }}
-            onFocusFeature={setFocusedFeatureId}
+          <div className={styles.operatorGrid}>
+            <RunHealthPanel runtime={payload.runtime} nowMs={nowMs} />
+            <LockResourceMap
+              locks={payload.lock_map ?? []}
+              nowMs={nowMs}
+              onSelectFeature={(featureId) => {
+                setSelectedFeatureId(featureId);
+                setFocusedFeatureId(featureId);
+                syncUrlState({ featureId });
+              }}
+            />
+            <DependencyChains
+              chains={dependencyChains}
+              onSelectFeature={(featureId) => {
+                setSelectedFeatureId(featureId);
+                setFocusedFeatureId(featureId);
+                syncUrlState({ featureId });
+              }}
+            />
+            <QuickLaunchPanel
+              visible={isQuickLaunchAffordanceVisible(quickLaunchAvailability)}
+              featureId={quickLaunchFeatureId}
+              goal={quickLaunchGoal}
+              submitting={quickLaunchSubmitting}
+              disabledReason={quickLaunchAvailability.reason}
+              onFeatureIdChange={setQuickLaunchFeatureId}
+              onGoalChange={setQuickLaunchGoal}
+              onRequestLaunch={requestQuickLaunch}
+            />
+          </div>
+
+          {viewMode === 'list' ? (
+            <FeatureListView
+              features={filteredFeatures}
+              project={project}
+              selectedFeatureId={selectedFeatureId}
+              focusedFeatureId={focusedFeatureId}
+              onSelectFeature={(featureId) => {
+                setSelectedFeatureId(featureId);
+                setFocusedFeatureId(featureId);
+                syncUrlState({ featureId });
+              }}
+              onFocusFeature={setFocusedFeatureId}
+            />
+          ) : (
+            <KanbanBoard
+              featuresByPhase={featuresByPhase}
+              hasActiveFilters={hasActiveFilters}
+              selectedFeatureId={selectedFeatureId}
+              focusedFeatureId={focusedFeatureId}
+              dependencyBlockedFeatureIds={dependencyBlockedIds}
+              onSelectFeature={(featureId) => {
+                setSelectedFeatureId(featureId);
+                setFocusedFeatureId(featureId);
+                syncUrlState({ featureId });
+              }}
+              onFocusFeature={setFocusedFeatureId}
+            />
+          )}
+          <LiveEventFeed
+            events={feedState.events}
+            paused={feedState.paused}
+            onTogglePause={() =>
+              setFeedState((current) => reduceLiveFeedState(current, { type: 'toggle_pause' }))
+            }
+            onClear={() =>
+              setFeedState((current) => reduceLiveFeedState(current, { type: 'clear' }))
+            }
           />
           <CollisionQueue queue={payload.index.blocked_queue ?? []} />
         </div>
@@ -409,9 +697,12 @@ export default function Dashboard() {
         <DetailPanel
           detail={detail}
           project={project}
+          unresolvedDependencies={selectedDependencies}
+          flakySuspects={payload.flaky_suspects ?? []}
           onClose={() => {
             setSelectedFeatureId(null);
             setDetail(null);
+            syncUrlState({ featureId: null });
           }}
           refreshDetail={refreshDetail}
           refreshStatus={refreshStatus}
@@ -419,6 +710,17 @@ export default function Dashboard() {
         />
       </div>
 
+      <ConfirmationModal
+        isOpen={quickLaunchConfirmOpen}
+        title={`Launch ${quickLaunchFeatureId.trim()}?`}
+        message={`Goal:\n${quickLaunchGoal.trim()}\n\nThis action starts a new orchestrator feature run.`}
+        confirmLabel="Confirm Launch"
+        onCancel={() => setQuickLaunchConfirmOpen(false)}
+        onConfirm={() => {
+          void confirmQuickLaunch();
+        }}
+      />
+
       <ToastStack notifications={notifications} onDismiss={dismissToast} />
     </div>
   );