agentic-orchestrator 0.1.28 → 0.2.0

package/packages/web-dashboard/src/components/focus/CheckpointRail.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import type { FeatureCheckpoint, FeatureCheckpointsPage } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface CheckpointRailProps {
+  page: FeatureCheckpointsPage | null;
+  selectedCheckpointId: string | null;
+  onSelect: (checkpoint: FeatureCheckpoint) => void;
+  onNewest: () => void;
+  onOlder: () => void;
+  onNewer: () => void;
+}
+
+function formatTimestamp(value: string): string {
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) {
+    return value;
+  }
+  return new Date(parsed).toLocaleString([], {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function checkpointHeadline(checkpoint: FeatureCheckpoint): string {
+  return formatTimestamp(checkpoint.timestamp);
+}
+
+function checkpointDetail(checkpoint: FeatureCheckpoint): string {
+  return `${checkpoint.checkpoint_id} · ${checkpoint.validation_status} · ${checkpoint.files_changed.length} file${checkpoint.files_changed.length === 1 ? '' : 's'}`;
+}
+
+export function CheckpointRail({
+  page,
+  selectedCheckpointId,
+  onSelect,
+  onNewest,
+  onOlder,
+  onNewer,
+}: CheckpointRailProps) {
+  const items = page?.items ?? [];
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Checkpoint Rail</span>
+          <p className={styles.collapsibleSummaryDetail}>
+            Browse recorded checkpoints in reverse chronological order.
+          </p>
+        </div>
+        <div className={styles.collapsibleSummaryMeta}>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {page?.total_count ?? items.length} shown
+          </span>
+          {typeof page?.suppressed_count === 'number' && page.suppressed_count > 0 ? (
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {page.suppressed_count} hidden idle
+            </span>
+          ) : null}
+        </div>
+      </summary>
+      <div className={styles.collapsibleBody}>
+        <div className={styles.inlineActions}>
+          <button type="button" className={styles.linkButton} onClick={onNewest}>
+            Newest
+          </button>
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={onNewer}
+            disabled={!page?.prev_cursor}
+          >
+            Newer
+          </button>
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={onOlder}
+            disabled={!page?.next_cursor}
+          >
+            Older
+          </button>
+        </div>
+        {items.length === 0 ? (
+          <p className={styles.metaText}>No checkpoints recorded for this feature yet.</p>
+        ) : (
+          <div className={styles.focusTabStack}>
+            {items.map((checkpoint) => (
+              <button
+                key={checkpoint.checkpoint_id}
+                type="button"
+                aria-pressed={selectedCheckpointId === checkpoint.checkpoint_id}
+                className={`${styles.runHistoryRow}${selectedCheckpointId === checkpoint.checkpoint_id ? ` ${styles.runHistoryRowActive}` : ''}`}
+                onClick={() => onSelect(checkpoint)}
+              >
+                <div className={styles.runtimeEntryTitle}>
+                  <strong>{checkpointHeadline(checkpoint)}</strong>
+                  <p className={styles.metaText}>{checkpointDetail(checkpoint)}</p>
+                </div>
+                <div className={styles.badgeRow}>
+                  <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+                    {checkpoint.validation_status}
+                  </span>
+                  <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+                    {checkpoint.files_changed.length} file(s)
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/focus/CheckpointScrubber.tsx

@@ -0,0 +1,249 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { DiffViewer } from '@/components/diff-viewer';
+import { parseUnifiedDiff, projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureCheckpoint } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface CheckpointScrubberProps {
+  featureId: string;
+  project: string;
+  checkpoints: FeatureCheckpoint[];
+}
+
+function checkpointBadgeClass(status: FeatureCheckpoint['validation_status']): string {
+  if (status === 'valid') {
+    return styles.badgePass;
+  }
+  if (status === 'invalid') {
+    return styles.badgeFail;
+  }
+  return styles.badgePending;
+}
+
+function filterDiff(diff: string, filePath: string): string {
+  if (filePath === '__all__') {
+    return diff;
+  }
+  const files = parseUnifiedDiff(diff).filter((file) => file.filePath === filePath);
+  return files
+    .map((file) =>
+      [
+        file.header,
+        ...file.hunks.flatMap((hunk) => [hunk.header, ...hunk.lines.map((line) => line.raw)]),
+      ].join('\n'),
+    )
+    .join('\n');
+}
+
+function formatUtcTimestamp(value: string): string {
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) {
+    return value;
+  }
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'UTC',
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: false,
+  });
+  return `${formatter.format(new Date(parsed))} UTC`;
+}
+
+interface CheckpointDiffResponse {
+  ok: boolean;
+  data?: {
+    checkpoint: FeatureCheckpoint;
+    diff: string;
+  };
+  error?: { message?: string };
+}
+
+export function CheckpointScrubber({ featureId, project, checkpoints }: CheckpointScrubberProps) {
+  const ordered = useMemo(
+    () =>
+      [...checkpoints].sort(
+        (left, right) => Date.parse(left.timestamp) - Date.parse(right.timestamp),
+      ),
+    [checkpoints],
+  );
+  const [selectedIndex, setSelectedIndex] = useState(ordered.length - 1);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [diff, setDiff] = useState('');
+  const [diffError, setDiffError] = useState<string | null>(null);
+  const [diffLoading, setDiffLoading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState('__all__');
+
+  useEffect(() => {
+    setSelectedIndex(Math.max(ordered.length - 1, 0));
+  }, [ordered.length]);
+
+  useEffect(() => {
+    if (!isPlaying || ordered.length < 2) {
+      return undefined;
+    }
+    const timer = window.setInterval(() => {
+      setSelectedIndex((current) => {
+        if (current >= ordered.length - 1) {
+          setIsPlaying(false);
+          return current;
+        }
+        return current + 1;
+      });
+    }, 1200);
+    return () => window.clearInterval(timer);
+  }, [isPlaying, ordered.length]);
+
+  const selected = ordered[selectedIndex];
+  const files = useMemo(() => parseUnifiedDiff(diff), [diff]);
+
+  useEffect(() => {
+    if (!selected) {
+      setDiff('');
+      setDiffError(null);
+      return;
+    }
+    const controller = new AbortController();
+    setDiffLoading(true);
+    setDiffError(null);
+    setDiff('');
+    void (async () => {
+      try {
+        const suffix = projectQuery(project);
+        const joiner = suffix.length > 0 ? '&' : '?';
+        const response = await fetch(
+          `/api/features/${featureId}/checkpoint-diff${suffix}${joiner}checkpoint_id=${encodeURIComponent(selected.checkpoint_id)}`,
+          { signal: controller.signal },
+        );
+        const body = (await response.json()) as CheckpointDiffResponse;
+        if (!body.ok || !body.data) {
+          setDiffError(body.error?.message ?? 'Unable to load checkpoint diff');
+          setDiff('');
+          return;
+        }
+        setDiff(body.data.diff);
+      } catch {
+        if (!controller.signal.aborted) {
+          setDiffError('Unable to load checkpoint diff');
+          setDiff('');
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setDiffLoading(false);
+        }
+      }
+    })();
+    return () => controller.abort();
+  }, [featureId, project, selected]);
+
+  useEffect(() => {
+    const filePaths = files.map((file) => file.filePath);
+    const availableFiles = filePaths.length > 0 ? filePaths : (selected?.files_changed ?? []);
+    if (!availableFiles.includes(selectedFile) && selectedFile !== '__all__') {
+      setSelectedFile('__all__');
+    }
+  }, [files, selected?.files_changed, selectedFile]);
+
+  const visibleDiff = diff ? filterDiff(diff, selectedFile) : '';
+  const availableFiles =
+    files.length > 0 ? files.map((file) => file.filePath) : (selected?.files_changed ?? []);
+
+  if (ordered.length < 2 || !selected) {
+    return null;
+  }
+
+  return (
+    <details className={styles.section} open>
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Code Evolution</span>
+          <p className={styles.collapsibleSummaryDetail}>
+            Inspect checkpoint-to-checkpoint repo diffs over time.
+          </p>
+        </div>
+        <div className={styles.collapsibleSummaryMeta}>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            Checkpoint {selectedIndex + 1} / {ordered.length}
+          </span>
+        </div>
+      </summary>
+      <div className={styles.collapsibleBody}>
+        <div className={styles.reviewSessionRows}>
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={() => setSelectedIndex((current) => Math.max(0, current - 1))}
+          >
+            ◀
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={ordered.length - 1}
+            value={selectedIndex}
+            onChange={(event) => setSelectedIndex(Number.parseInt(event.target.value, 10))}
+          />
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={() => setSelectedIndex((current) => Math.min(ordered.length - 1, current + 1))}
+          >
+            ▶
+          </button>
+          <button
+            type="button"
+            className={styles.linkButton}
+            onClick={() => setIsPlaying((current) => !current)}
+          >
+            {isPlaying ? 'Pause' : 'Play'}
+          </button>
+        </div>
+        <div className={styles.badgeRow}>
+          <span className={`${styles.badge} ${checkpointBadgeClass(selected.validation_status)}`}>
+            {selected.validation_status}
+          </span>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {selected.files_changed.length} files changed
+          </span>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {formatUtcTimestamp(selected.timestamp)}
+          </span>
+        </div>
+        <p className={styles.metaText}>{selected.checkpoint_id}</p>
+        {selected.violations.length > 0 ? (
+          <div className={styles.banner}>{selected.violations.join(' • ')}</div>
+        ) : null}
+        <label className={styles.label}>
+          File filter
+          <select
+            className={styles.actionSelect}
+            value={selectedFile}
+            onChange={(event) => setSelectedFile(event.target.value)}
+          >
+            <option value="__all__">All files</option>
+            {availableFiles.map((filePath) => (
+              <option key={filePath} value={filePath}>
+                {filePath}
+              </option>
+            ))}
+          </select>
+        </label>
+        {diffLoading ? <p className={styles.metaText}>Loading checkpoint diff…</p> : null}
+        {diffError ? <p className={styles.metaText}>{diffError}</p> : null}
+        {!diffLoading && !diffError && visibleDiff ? <DiffViewer diff={visibleDiff} /> : null}
+        {!diffLoading && !diffError && !visibleDiff ? (
+          <ul className={styles.planList}>
+            {selected.files_changed.map((filePath) => (
+              <li key={filePath} className={styles.planListItem}>
+                {filePath}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+      </div>
+    </details>
+  );
+}

package/packages/web-dashboard/src/components/focus/CollisionApprovalBanner.tsx

@@ -0,0 +1,192 @@
+'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';
+
+interface CollisionApprovalBannerProps {
+  feature: FeatureSummary;
+  project: string;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  onApproved: () => void;
+}
+
+export function CollisionApprovalBanner({
+  feature,
+  project,
+  addToast,
+  onApproved,
+}: CollisionApprovalBannerProps) {
+  const collision = feature.collision;
+  if (!collision) {
+    return null;
+  }
+
+  return (
+    <section
+      className={styles.section}
+      style={{ borderLeft: '3px solid #f59e0b', background: 'rgba(248, 190, 45, 0.06)' }}
+    >
+      <div className={styles.cardHeader} style={{ marginBottom: '0.5rem' }}>
+        <strong style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
+          <span>&#x26A0;&#xFE0F;</span> Plan Collision Detected
+        </strong>
+      </div>
+
+      <p style={{ fontSize: '0.85rem', lineHeight: 1.5, margin: '0 0 0.75rem 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>
+        . Approve the overlap to unblock execution.
+      </p>
+
+      {collision.file_paths.length > 0 && (
+        <details style={{ marginBottom: '0.75rem', fontSize: '0.8rem' }}>
+          <summary style={{ cursor: 'pointer', fontWeight: 500 }}>
+            Overlapping files ({collision.file_paths.length})
+          </summary>
+          <ul
+            style={{
+              margin: '0.25rem 0 0 0',
+              paddingLeft: '1.2rem',
+              fontSize: '0.78rem',
+              fontFamily: 'var(--font-mono, monospace)',
+            }}
+          >
+            {collision.file_paths.slice(0, 20).map((filePath) => (
+              <li key={filePath}>{filePath}</li>
+            ))}
+            {collision.file_paths.length > 20 && (
+              <li style={{ opacity: 0.7 }}>+{collision.file_paths.length - 20} more</li>
+            )}
+          </ul>
+        </details>
+      )}
+
+      {collision.with_feature_ids.map((withId) => (
+        <CollisionApprovalForm
+          key={withId}
+          featureId={feature.feature_id}
+          withFeatureId={withId}
+          project={project}
+          addToast={addToast}
+          onApproved={onApproved}
+        />
+      ))}
+    </section>
+  );
+}
+
+function CollisionApprovalForm({
+  featureId,
+  withFeatureId,
+  project,
+  addToast,
+  onApproved,
+}: {
+  featureId: string;
+  withFeatureId: string;
+  project: string;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  onApproved: () => 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 — feature will resume`, 'success');
+        setReason('');
+        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 (
+    <div
+      style={{
+        display: 'flex',
+        gap: '0.5rem',
+        alignItems: 'flex-end',
+        marginBottom: '0.5rem',
+      }}
+    >
+      <div style={{ flex: 1 }}>
+        <label
+          style={{ display: 'block', fontSize: '0.78rem', fontWeight: 500, marginBottom: '0.2rem' }}
+        >
+          Approve overlap with <code style={{ fontSize: '0.76rem' }}>{withFeatureId}</code>
+        </label>
+        <input
+          type="text"
+          value={reason}
+          onChange={(e) => setReason(e.target.value)}
+          placeholder="Reason for approval (e.g. coordinated refactor)"
+          disabled={submitting}
+          style={{
+            width: '100%',
+            padding: '0.35rem 0.5rem',
+            borderRadius: '4px',
+            border: '1px solid var(--border)',
+            fontSize: '0.82rem',
+            background: 'var(--bg-card, #fff)',
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              void handleApprove();
+            }
+          }}
+        />
+      </div>
+      <button
+        type="button"
+        onClick={() => void handleApprove()}
+        disabled={submitting || reason.trim().length === 0}
+        style={{
+          padding: '0.35rem 0.75rem',
+          borderRadius: '4px',
+          border: 'none',
+          background: submitting ? '#9ca3af' : '#f59e0b',
+          color: 'white',
+          cursor: submitting ? 'wait' : 'pointer',
+          fontSize: '0.82rem',
+          fontWeight: 500,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {submitting ? 'Approving\u2026' : 'Approve & Resume'}
+      </button>
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/focus/CollisionRadar.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { buildDashboardFeatureHref } from '@/lib/dashboard-utils.js';
+import type { CollisionEntry, CollisionRadarSnapshot } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface CollisionRadarProps {
+  model: CollisionRadarSnapshot | null | undefined;
+  project: string;
+}
+
+function riskBadgeClass(risk: CollisionEntry['risk']): string {
+  if (risk === 'high') {
+    return styles.badgeFail;
+  }
+  if (risk === 'medium') {
+    return styles.badgePending;
+  }
+  return styles.badgeNeutral;
+}
+
+function riskLabel(risk: CollisionEntry['risk']): string {
+  if (risk === 'high') {
+    return 'HIGH';
+  }
+  if (risk === 'medium') {
+    return 'MED';
+  }
+  return 'LOW';
+}
+
+function summaryLine(model: CollisionRadarSnapshot): string {
+  const parts: string[] = [];
+  if (model.high_count > 0) {
+    parts.push(`${model.high_count} high-risk`);
+  }
+  if (model.medium_count > 0) {
+    parts.push(`${model.medium_count} medium-risk`);
+  }
+  if (parts.length === 0) {
+    return `${model.low_count} low-risk overlaps detected`;
+  }
+  return `${parts.join(' · ')} conflicts detected`;
+}
+
+export function CollisionRadar({ model, project }: CollisionRadarProps) {
+  const [showLowRisk, setShowLowRisk] = useState(false);
+
+  const entries = model?.entries ?? [];
+  const lowRiskCount = model?.low_count ?? 0;
+  const hasElevatedEntries = entries.some((entry) => entry.risk !== 'low');
+  const visibleEntries = useMemo(
+    () => entries.filter((entry) => showLowRisk || !hasElevatedEntries || entry.risk !== 'low'),
+    [entries, hasElevatedEntries, showLowRisk],
+  );
+
+  if (!model || entries.length === 0) {
+    return null;
+  }
+
+  const highestImpact = entries.find((entry) => entry.risk === 'high') ?? entries[0] ?? null;
+
+  return (
+    <details className={styles.section}>
+      <summary className={styles.collapsibleSummary}>
+        <div className={styles.collapsibleSummaryTitleGroup}>
+          <span className={styles.collapsibleSummaryHeading}>Collision Radar</span>
+          <p className={styles.collapsibleSummaryDetail}>
+            {summaryLine(model)}
+            {highestImpact ? ` Highest impact path: ${highestImpact.path}.` : ''}
+          </p>
+        </div>
+        <span
+          className={`${styles.badge} ${styles.badgeNeutral} ${styles.collisionRadarSummaryBadge}`}
+        >
+          {entries.length} overlaps
+        </span>
+      </summary>
+      <div className={styles.collapsibleBody}>
+        <p className={styles.metaText}>
+          {highestImpact?.risk === 'high'
+            ? 'Most likely merge blocker: an exact-file overlap.'
+            : highestImpact?.risk === 'medium'
+              ? 'Primary concern: nearby work in the same directory.'
+              : 'Current overlaps are watch-list items only.'}
+        </p>
+        <ul className={styles.collisionRadarList}>
+          {visibleEntries.map((entry) => (
+            <li
+              key={entry.path}
+              className={styles.collisionRadarItem}
+              data-risk={entry.risk}
+              style={{ paddingLeft: `${Math.min(2.25, entry.depth * 0.7)}rem` }}
+            >
+              <div className={styles.collisionRadarRow}>
+                <span className={styles.collisionRadarPath}>{entry.path}</span>
+                <span className={`${styles.badge} ${riskBadgeClass(entry.risk)}`}>
+                  {riskLabel(entry.risk)}
+                </span>
+              </div>
+              <p className={styles.metaText}>
+                {entry.risk === 'high'
+                  ? 'merge conflict likely'
+                  : entry.risk === 'medium'
+                    ? 'same area, low direct conflict'
+                    : 'watch list'}
+              </p>
+              <div className={styles.collisionRadarCompeting}>
+                {entry.competing_features.map((featureId) => (
+                  <a
+                    key={`${entry.path}:${featureId}`}
+                    className={styles.linkButton}
+                    href={buildDashboardFeatureHref(featureId, project)}
+                  >
+                    {featureId}
+                  </a>
+                ))}
+              </div>
+            </li>
+          ))}
+        </ul>
+        {lowRiskCount > 0 && hasElevatedEntries ? (
+          <button
+            type="button"
+            className={styles.linkButton}
+            aria-expanded={showLowRisk}
+            onClick={() => setShowLowRisk((current) => !current)}
+          >
+            {showLowRisk ? 'Hide low risk' : `Show all ${entries.length} files`}
+          </button>
+        ) : null}
+      </div>
+    </details>
+  );
+}