agentic-orchestrator 0.1.25 → 0.1.26

package/packages/web-dashboard/src/components/feature-list-view.tsx

@@ -0,0 +1,336 @@
+import Link from 'next/link';
+import { useEffect, useMemo, useState } from 'react';
+import { buildFeatureFocusHref, formatRelativeTime, getGateMap } from '@/lib/dashboard-utils.js';
+import type { FeatureSummary } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface FeatureListViewProps {
+  features: FeatureSummary[];
+  project: string;
+  selectedFeatureId: string | null;
+  focusedFeatureId: string | null;
+  onSelectFeature: (featureId: string) => void;
+  onFocusFeature: (featureId: string) => void;
+}
+
+type SortColumn = 'feature_id' | 'phase' | 'status' | 'updated';
+type SortDirection = 'asc' | 'desc';
+
+const LIST_PAGINATION_THRESHOLD = 150;
+const LIST_PAGE_SIZE = 100;
+
+function compareFeatures(
+  left: FeatureSummary,
+  right: FeatureSummary,
+  column: SortColumn,
+  direction: SortDirection,
+): number {
+  const multiplier = direction === 'asc' ? 1 : -1;
+  if (column === 'feature_id') {
+    return left.feature_id.localeCompare(right.feature_id) * multiplier;
+  }
+  if (column === 'phase') {
+    return (
+      String(left.phase ?? 'unknown').localeCompare(String(right.phase ?? 'unknown')) * multiplier
+    );
+  }
+  if (column === 'status') {
+    return left.status.localeCompare(right.status) * multiplier;
+  }
+  const leftMs = left.last_updated ? Date.parse(left.last_updated) : 0;
+  const rightMs = right.last_updated ? Date.parse(right.last_updated) : 0;
+  return (leftMs - rightMs) * multiplier;
+}
+
+function pageForIndex(index: number): number {
+  return Math.floor(index / LIST_PAGE_SIZE);
+}
+
+export function FeatureListView({
+  features,
+  project,
+  selectedFeatureId,
+  focusedFeatureId,
+  onSelectFeature,
+  onFocusFeature,
+}: FeatureListViewProps) {
+  const [sortColumn, setSortColumn] = useState<SortColumn>('updated');
+  const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
+  const [page, setPage] = useState(0);
+  const [openActionMenuFeatureId, setOpenActionMenuFeatureId] = useState<string | null>(null);
+
+  const sorted = useMemo(() => {
+    return [...features].sort((left, right) =>
+      compareFeatures(left, right, sortColumn, sortDirection),
+    );
+  }, [features, sortColumn, sortDirection]);
+
+  const paginationEnabled = sorted.length > LIST_PAGINATION_THRESHOLD;
+  const totalPages = paginationEnabled ? Math.ceil(sorted.length / LIST_PAGE_SIZE) : 1;
+  const currentPage = Math.min(page, totalPages - 1);
+  const pageStart = paginationEnabled ? currentPage * LIST_PAGE_SIZE : 0;
+  const pageEnd = paginationEnabled
+    ? Math.min(sorted.length, pageStart + LIST_PAGE_SIZE)
+    : sorted.length;
+  const visibleRows = sorted
+    .slice(pageStart, pageEnd)
+    .map((feature, localIndex) => ({ feature, globalIndex: pageStart + localIndex }));
+
+  const updateSort = (column: SortColumn) => {
+    if (sortColumn === column) {
+      setSortDirection((current) => (current === 'asc' ? 'desc' : 'asc'));
+      return;
+    }
+    setSortColumn(column);
+    setSortDirection(column === 'updated' ? 'desc' : 'asc');
+  };
+
+  const sortStateLabel = (column: SortColumn): 'none' | 'ascending' | 'descending' => {
+    if (sortColumn !== column) {
+      return 'none';
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+  };
+
+  useEffect(() => {
+    setPage((current) => Math.min(current, Math.max(0, totalPages - 1)));
+  }, [totalPages]);
+
+  useEffect(() => {
+    setPage(0);
+  }, [sortColumn, sortDirection]);
+
+  useEffect(() => {
+    if (!paginationEnabled) {
+      return;
+    }
+    const trackedFeatureId = focusedFeatureId ?? selectedFeatureId;
+    if (!trackedFeatureId) {
+      return;
+    }
+    const index = sorted.findIndex((feature) => feature.feature_id === trackedFeatureId);
+    if (index < 0) {
+      return;
+    }
+    const nextPage = pageForIndex(index);
+    setPage((current) => (current === nextPage ? current : nextPage));
+  }, [focusedFeatureId, paginationEnabled, selectedFeatureId, sorted]);
+
+  if (sorted.length === 0) {
+    return (
+      <section className={styles.section} aria-label="Feature list view">
+        <h2 className={styles.sectionTitle}>List View</h2>
+        <p className={styles.metaText}>No features match current filters.</p>
+      </section>
+    );
+  }
+
+  return (
+    <section className={styles.section} aria-label="Feature list view">
+      <h2 className={styles.sectionTitle}>List View</h2>
+      {paginationEnabled ? (
+        <div className={styles.listPagination}>
+          <span className={styles.metaText}>
+            Showing {pageStart + 1}-{pageEnd} of {sorted.length} features
+          </span>
+          <div className={styles.inlineActions}>
+            <button
+              type="button"
+              className={styles.button}
+              onClick={() => setPage((current) => Math.max(0, current - 1))}
+              disabled={currentPage === 0}
+            >
+              Previous
+            </button>
+            <span className={styles.metaText}>
+              Page {currentPage + 1} of {totalPages}
+            </span>
+            <button
+              type="button"
+              className={styles.button}
+              onClick={() => setPage((current) => Math.min(totalPages - 1, current + 1))}
+              disabled={currentPage >= totalPages - 1}
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      ) : null}
+      <div className={styles.tableWrapper}>
+        <table className={styles.listTable}>
+          <thead>
+            <tr>
+              <th aria-sort={sortStateLabel('feature_id')}>
+                <button
+                  type="button"
+                  className={styles.listHeaderButton}
+                  onClick={() => updateSort('feature_id')}
+                >
+                  Feature
+                </button>
+              </th>
+              <th aria-sort={sortStateLabel('phase')}>
+                <button
+                  type="button"
+                  className={styles.listHeaderButton}
+                  onClick={() => updateSort('phase')}
+                >
+                  Phase
+                </button>
+              </th>
+              <th aria-sort={sortStateLabel('status')}>
+                <button
+                  type="button"
+                  className={styles.listHeaderButton}
+                  onClick={() => updateSort('status')}
+                >
+                  Status
+                </button>
+              </th>
+              <th aria-sort={sortStateLabel('updated')}>
+                <button
+                  type="button"
+                  className={styles.listHeaderButton}
+                  onClick={() => updateSort('updated')}
+                >
+                  Updated
+                </button>
+              </th>
+              <th>Gates</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {visibleRows.map(({ feature, globalIndex }) => {
+              const gates = getGateMap(feature);
+              const selected = selectedFeatureId === feature.feature_id;
+              const focused = focusedFeatureId === feature.feature_id;
+              const actionMenuOpen = openActionMenuFeatureId === feature.feature_id;
+              return (
+                <tr
+                  key={feature.feature_id}
+                  tabIndex={focused ? 0 : -1}
+                  className={[
+                    styles.listRow,
+                    selected ? styles.listRowSelected : '',
+                    focused ? styles.listRowFocused : '',
+                  ].join(' ')}
+                  onFocus={() => onFocusFeature(feature.feature_id)}
+                  onClick={() => onSelectFeature(feature.feature_id)}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      onSelectFeature(feature.feature_id);
+                      return;
+                    }
+                    if (event.key === 'ArrowDown') {
+                      event.preventDefault();
+                      const nextIndex = Math.min(globalIndex + 1, sorted.length - 1);
+                      const next = sorted[nextIndex];
+                      if (next) {
+                        if (paginationEnabled) {
+                          setPage(pageForIndex(nextIndex));
+                        }
+                        onFocusFeature(next.feature_id);
+                      }
+                      return;
+                    }
+                    if (event.key === 'ArrowUp') {
+                      event.preventDefault();
+                      const nextIndex = Math.max(globalIndex - 1, 0);
+                      const next = sorted[nextIndex];
+                      if (next) {
+                        if (paginationEnabled) {
+                          setPage(pageForIndex(nextIndex));
+                        }
+                        onFocusFeature(next.feature_id);
+                      }
+                    }
+                  }}
+                >
+                  <td>{feature.feature_id}</td>
+                  <td>{feature.phase ?? 'unknown'}</td>
+                  <td>{feature.status}</td>
+                  <td>{formatRelativeTime(feature.last_updated)}</td>
+                  <td>
+                    <span className={styles.metaText}>
+                      fast:{gates.fast} full:{gates.full} merge:{gates.merge}
+                    </span>
+                  </td>
+                  <td>
+                    <div className={styles.listActions}>
+                      <button
+                        type="button"
+                        className={styles.button}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onSelectFeature(feature.feature_id);
+                        }}
+                      >
+                        Open
+                      </button>
+                      <div
+                        className={styles.listActionMenuWrap}
+                        onBlur={(event) => {
+                          const nextFocus = event.relatedTarget as Node | null;
+                          if (!event.currentTarget.contains(nextFocus)) {
+                            setOpenActionMenuFeatureId((current) =>
+                              current === feature.feature_id ? null : current,
+                            );
+                          }
+                        }}
+                      >
+                        <button
+                          type="button"
+                          className={`${styles.button} ${styles.buttonGhost}`}
+                          aria-haspopup="menu"
+                          aria-expanded={actionMenuOpen}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setOpenActionMenuFeatureId((current) =>
+                              current === feature.feature_id ? null : feature.feature_id,
+                            );
+                          }}
+                        >
+                          Actions
+                        </button>
+                        {actionMenuOpen ? (
+                          <div
+                            className={styles.listActionMenu}
+                            role="menu"
+                            aria-label="Feature actions"
+                          >
+                            <button
+                              type="button"
+                              className={styles.listActionMenuItem}
+                              role="menuitem"
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                onSelectFeature(feature.feature_id);
+                                setOpenActionMenuFeatureId(null);
+                              }}
+                            >
+                              Open In Board
+                            </button>
+                            <Link
+                              href={buildFeatureFocusHref(feature.feature_id, project)}
+                              className={styles.listActionMenuItem}
+                              role="menuitem"
+                              onClick={() => setOpenActionMenuFeatureId(null)}
+                            >
+                              Open Focus View
+                            </Link>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/gate-step-drilldown.tsx

@@ -0,0 +1,92 @@
+import type { GateRunEvidence } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface GateStepDrilldownProps {
+  evidence: GateRunEvidence | null | undefined;
+}
+
+function stepBadgeClass(status: string): string {
+  const normalized = status.toLowerCase();
+  if (normalized === 'pass') {
+    return styles.badgePass;
+  }
+  if (normalized === 'fail') {
+    return styles.badgeFail;
+  }
+  return styles.badgeNeutral;
+}
+
+function overallClass(status: string): string {
+  const normalized = status.toLowerCase();
+  if (normalized === 'pass' || normalized === 'success') {
+    return styles.badgePass;
+  }
+  if (normalized === 'fail' || normalized === 'error') {
+    return styles.badgeFail;
+  }
+  return styles.badgeNeutral;
+}
+
+export function GateStepDrilldown({ evidence }: GateStepDrilldownProps) {
+  if (!evidence) {
+    return (
+      <div className={styles.section}>
+        <h3 className={styles.sectionTitle}>Gate Step Drill-Down</h3>
+        <p className={styles.metaText}>No gate step evidence recorded yet.</p>
+      </div>
+    );
+  }
+
+  if (!Array.isArray(evidence.steps) || evidence.steps.length === 0) {
+    return (
+      <details className={styles.section}>
+        <summary className={styles.sectionSummary}>Gate Step Drill-Down</summary>
+        <p className={styles.metaText}>Unknown gate artifact shape. Rendering raw evidence.</p>
+        <pre className={styles.preContent}>{JSON.stringify(evidence.raw ?? evidence, null, 2)}</pre>
+      </details>
+    );
+  }
+
+  const firstFailedIndex = evidence.steps.findIndex((step) => step.status === 'fail');
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>Gate Step Drill-Down</summary>
+      <div className={styles.badgeRow}>
+        <span className={`${styles.badge} ${overallClass(evidence.overall)}`}>
+          Overall {evidence.overall}
+        </span>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>Mode {evidence.mode}</span>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+          Profile {evidence.profile ?? 'unknown'}
+        </span>
+      </div>
+
+      {evidence.steps.map((step, index) => (
+        <details
+          key={`${step.name}-${index}`}
+          className={styles.section}
+          open={index === firstFailedIndex}
+        >
+          <summary className={styles.sectionSummary}>
+            <span className={`${styles.badge} ${stepBadgeClass(step.status)}`}>{step.status}</span>{' '}
+            {step.name}
+          </summary>
+          <p className={styles.metaText}>Command: {step.command || '(not recorded)'}</p>
+          <p className={styles.metaText}>
+            Exit code: {step.exit_code ?? 'unknown'} • Duration:{' '}
+            {typeof step.duration_ms === 'number' ? `${step.duration_ms}ms` : 'unknown'}
+          </p>
+          {step.output_tail && step.output_tail.length > 0 ? (
+            <details>
+              <summary className={styles.sectionSummary}>
+                Output tail ({step.output_tail.length} lines)
+              </summary>
+              <pre className={styles.preContent}>{step.output_tail.join('\n')}</pre>
+            </details>
+          ) : null}
+        </details>
+      ))}
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/kanban-board.tsx

@@ -8,6 +8,7 @@ interface KanbanBoardProps {
   hasActiveFilters: boolean;
   selectedFeatureId: string | null;
   focusedFeatureId: string | null;
+  dependencyBlockedFeatureIds: Set<string>;
   onSelectFeature: (featureId: string) => void;
   onFocusFeature: (featureId: string) => void;
 }
@@ -31,6 +32,7 @@ export function KanbanBoard({
   hasActiveFilters,
   selectedFeatureId,
   focusedFeatureId,
+  dependencyBlockedFeatureIds,
   onSelectFeature,
   onFocusFeature,
 }: KanbanBoardProps) {
@@ -58,6 +60,7 @@ export function KanbanBoard({
                     feature={feature}
                     isSelected={selectedFeatureId === feature.feature_id}
                     isFocused={focusedFeatureId === feature.feature_id}
+                    awaitingDependencies={dependencyBlockedFeatureIds.has(feature.feature_id)}
                     onSelect={onSelectFeature}
                     onFocus={onFocusFeature}
                   />

package/packages/web-dashboard/src/components/live-event-feed.tsx

@@ -0,0 +1,60 @@
+import type { FeedEvent } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface LiveEventFeedProps {
+  events: FeedEvent[];
+  paused: boolean;
+  onTogglePause: () => void;
+  onClear: () => void;
+}
+
+function severityClass(severity: FeedEvent['severity']): string {
+  if (severity === 'success') {
+    return styles.badgePass;
+  }
+  if (severity === 'warning') {
+    return styles.badgePending;
+  }
+  if (severity === 'error') {
+    return styles.badgeFail;
+  }
+  return styles.badgeNeutral;
+}
+
+export function LiveEventFeed({ events, paused, onTogglePause, onClear }: LiveEventFeedProps) {
+  return (
+    <details className={styles.section}>
+      <summary className={styles.sectionSummary}>Live Event Feed ({events.length})</summary>
+      <div className={styles.inlineActions}>
+        <button type="button" className={styles.button} onClick={onTogglePause}>
+          {paused ? 'Resume' : 'Pause'}
+        </button>
+        <button
+          type="button"
+          className={`${styles.button} ${styles.buttonGhost}`}
+          onClick={onClear}
+        >
+          Clear
+        </button>
+      </div>
+      {events.length === 0 ? (
+        <p className={styles.metaText}>No recent cross-feature events.</p>
+      ) : (
+        <ul className={styles.logList}>
+          {events.map((event) => (
+            <li key={event.id} className={styles.logListItem}>
+              <div className={styles.badgeRow}>
+                <span className={`${styles.badge} ${severityClass(event.severity)}`}>
+                  {event.severity}
+                </span>
+                <span className={`${styles.badge} ${styles.badgeNeutral}`}>{event.type}</span>
+                <span className={styles.metaText}>{event.timestamp}</span>
+              </div>
+              <p className={styles.metaText}>{event.message}</p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/lock-resource-map.tsx

@@ -0,0 +1,73 @@
+import type { LockLease } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface LockResourceMapProps {
+  locks: LockLease[];
+  nowMs: number;
+  onSelectFeature: (featureId: string) => void;
+}
+
+function remainingText(expiresAt: string | null, nowMs: number): string {
+  if (!expiresAt) {
+    return '-';
+  }
+  const parsed = Date.parse(expiresAt);
+  if (Number.isNaN(parsed)) {
+    return '-';
+  }
+  const seconds = Math.max(0, Math.floor((parsed - nowMs) / 1000));
+  const minutes = Math.floor(seconds / 60);
+  return `${minutes}m ${seconds % 60}s`;
+}
+
+export function LockResourceMap({ locks, nowMs, onSelectFeature }: LockResourceMapProps) {
+  return (
+    <section className={styles.section}>
+      <h2 className={styles.sectionTitle}>Lock Resource Map</h2>
+      {locks.length === 0 ? (
+        <p className={styles.metaText}>No active lock leases.</p>
+      ) : (
+        <div className={styles.tableWrapper}>
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th>Resource</th>
+                <th>Holder</th>
+                <th>Expires in</th>
+                <th>Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {locks.map((lock) => (
+                <tr key={lock.resource}>
+                  <td>{lock.resource}</td>
+                  <td>
+                    {lock.holder ? (
+                      <button
+                        type="button"
+                        className={styles.listHeaderButton}
+                        onClick={() => onSelectFeature(lock.holder!)}
+                      >
+                        {lock.holder}
+                      </button>
+                    ) : (
+                      <span className={styles.metaText}>-</span>
+                    )}
+                  </td>
+                  <td>{remainingText(lock.expires_at, nowMs)}</td>
+                  <td>
+                    {lock.is_stale ? (
+                      <span className={`${styles.badge} ${styles.badgeFail}`}>Stale lease</span>
+                    ) : (
+                      <span className={`${styles.badge} ${styles.badgePass}`}>Active</span>
+                    )}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}

package/packages/web-dashboard/src/components/plan-revision-timeline.tsx

@@ -0,0 +1,55 @@
+import styles from '@/styles/dashboard.module.css';
+
+interface PlanRevisionTimelineProps {
+  plan: Record<string, unknown> | null;
+  featurePlanVersion?: number;
+  featureRevisionOf?: number | null;
+  featureRevisionReason?: string | null;
+}
+
+function asText(value: unknown, fallback = '-'): string {
+  if (typeof value === 'string' && value.trim().length > 0) {
+    return value;
+  }
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  return fallback;
+}
+
+export function PlanRevisionTimeline({
+  plan,
+  featurePlanVersion,
+  featureRevisionOf,
+  featureRevisionReason,
+}: PlanRevisionTimelineProps) {
+  const planVersion =
+    typeof plan?.plan_version === 'number' ? plan.plan_version : (featurePlanVersion ?? null);
+  const revisionOf =
+    typeof plan?.revision_of === 'number' ? plan.revision_of : (featureRevisionOf ?? null);
+  const revisionReason =
+    typeof plan?.revision_reason === 'string'
+      ? plan.revision_reason
+      : (featureRevisionReason ?? null);
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.sectionSummary}>Plan Revision History</summary>
+      <ul className={styles.planList}>
+        <li className={styles.planListItem}>
+          <strong>Current plan version:</strong> {asText(planVersion)}
+        </li>
+        <li className={styles.planListItem}>
+          <strong>Revision of:</strong>{' '}
+          {revisionOf == null ? 'No prior revision metadata' : String(revisionOf)}
+        </li>
+        <li className={styles.planListItem}>
+          <strong>Revision reason:</strong>{' '}
+          {revisionReason && revisionReason.trim().length > 0
+            ? revisionReason
+            : 'Only current plan metadata is retained'}
+        </li>
+      </ul>
+    </details>
+  );
+}