agentic-orchestrator 0.1.27 → 0.2.0

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

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import type { FeatureConflictSummary } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface ConflictStatusCardProps {
+  conflictSummary: FeatureConflictSummary;
+  onViewConflicts: () => void;
+}
+
+export function ConflictStatusCard({ conflictSummary, onViewConflicts }: ConflictStatusCardProps) {
+  const fileCount = conflictSummary.conflicting_files.length;
+  const statusLabel = conflictSummary.reconciler_active
+    ? 'Reconciler: active'
+    : conflictSummary.resolution_status === 'pending'
+      ? 'Reconciler: idle'
+      : `Status: ${conflictSummary.resolution_status}`;
+
+  return (
+    <div className={styles.card} style={{ marginBottom: '0.75rem' }}>
+      <div className={styles.cardHeader}>
+        <strong>Merge Conflicts</strong>
+      </div>
+      <div className={styles.cardBody} style={{ fontSize: '0.85rem' }}>
+        <p style={{ margin: '0 0 0.25rem 0' }}>
+          {fileCount} conflicting file{fileCount === 1 ? '' : 's'}
+        </p>
+        <p style={{ margin: '0 0 0.25rem 0' }}>{statusLabel}</p>
+        {conflictSummary.queue_position != null && (
+          <p style={{ margin: '0 0 0.25rem 0' }}>
+            Queue position: #{conflictSummary.queue_position}
+          </p>
+        )}
+        <button
+          onClick={onViewConflicts}
+          style={{
+            marginTop: '0.5rem',
+            padding: '0.3rem 0.8rem',
+            borderRadius: '4px',
+            border: '1px solid var(--border)',
+            background: 'var(--bg-card)',
+            cursor: 'pointer',
+            fontSize: '0.85rem',
+          }}
+        >
+          View Conflicts
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { MergeQueueCard } from '@/components/focus/MergeQueueCard';
+import { OperationalSummaryCard } from '@/components/focus/OperationalSummaryCard';
+import { PinnedActions } from '@/components/focus/PinnedActions';
+import { ProgressSnapshotCard } from '@/components/focus/ProgressSnapshotCard';
+import { UsageBurnChart } from '@/components/focus/UsageBurnChart';
+import { buildDashboardFeatureHref } from '@/lib/dashboard-utils.js';
+import { PrStatusCard } from '@/components/pr-status-card';
+import type { HealthDiagnosis } from '@/lib/health-diagnosis.js';
+import type { FocusPinnedAction, FocusTabId } from '@/lib/focus-view.js';
+import type { FeatureDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface ContextSidebarProps {
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  actions: FocusPinnedAction[];
+  activeRole: string | null;
+  activeTab: FocusTabId;
+  detail: FeatureDetail | null;
+  diagnosis: HealthDiagnosis;
+  mergeStrategy: 'merge_commit' | 'squash' | 'rebase';
+  onMergeStrategyChange: (value: 'merge_commit' | 'squash' | 'rebase') => void;
+  onReviewMessageChange: (value: string) => void;
+  onSelectTab: (tabId: FocusTabId) => void;
+  onTokenChange: (value: string) => void;
+  project: string;
+  refreshDetail: (featureId: string) => Promise<void>;
+  refreshStatus: () => Promise<void>;
+  reviewMessage: string;
+  token: string;
+  unresolvedDependencies: string[];
+}
+
+export function ContextSidebar({
+  addToast,
+  actions,
+  activeRole,
+  activeTab,
+  detail,
+  diagnosis,
+  mergeStrategy,
+  onMergeStrategyChange,
+  onReviewMessageChange,
+  onSelectTab,
+  onTokenChange,
+  project,
+  refreshDetail,
+  refreshStatus,
+  reviewMessage,
+  token,
+  unresolvedDependencies,
+}: ContextSidebarProps) {
+  return (
+    <aside className={styles.focusSidebar}>
+      <OperationalSummaryCard
+        addToast={addToast}
+        detail={detail}
+        diagnosis={diagnosis}
+        activeRole={activeRole}
+        project={project}
+        refreshDetail={refreshDetail}
+        refreshStatus={refreshStatus}
+      />
+      <ProgressSnapshotCard
+        plannerTabTarget={
+          detail?.feature.phase === 'intake' || detail?.feature.resume_status === 'intake'
+            ? 'intake'
+            : 'planning'
+        }
+        progress={detail?.plan_progress}
+        verification={detail?.verification_summary}
+        usage={detail?.usage_burn}
+        onSelectTab={onSelectTab}
+      />
+      <PinnedActions
+        actions={actions}
+        activeTab={activeTab}
+        mergeStrategy={mergeStrategy}
+        onMergeStrategyChange={onMergeStrategyChange}
+        onReviewMessageChange={onReviewMessageChange}
+        onSelectTab={onSelectTab}
+        onTokenChange={onTokenChange}
+        reviewMessage={reviewMessage}
+        token={token}
+      />
+      <UsageBurnChart projection={detail?.usage_burn} />
+      {detail?.feature.pr ? <PrStatusCard pr={detail.feature.pr} /> : null}
+      {detail?.merge_queue ? <MergeQueueCard queue={detail.merge_queue} project={project} /> : null}
+      {unresolvedDependencies.length > 0 ? (
+        <section className={styles.section}>
+          <h3 className={styles.sectionTitle}>Dependencies</h3>
+          <ul className={styles.planList}>
+            {unresolvedDependencies.map((dependency) => (
+              <li key={dependency} className={styles.planListItem}>
+                <a
+                  className={styles.linkButton}
+                  href={buildDashboardFeatureHref(dependency, project)}
+                >
+                  {dependency}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : null}
+    </aside>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import type { HealthDiagnosis, HealthDiagnosisCause } from '@/lib/health-diagnosis.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface DiagnosisPanelProps {
+  diagnosis: HealthDiagnosis;
+}
+
+function renderCause(cause: HealthDiagnosisCause): JSX.Element {
+  return (
+    <article key={cause.code} className={styles.focusDiagnosisCause}>
+      <div className={styles.reviewTitleWrap}>
+        <strong>{cause.title}</strong>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>{cause.code}</span>
+      </div>
+      <p className={styles.metaText}>{cause.detail}</p>
+      {cause.metadata?.stepName ? (
+        <p className={styles.metaText}>Gate step: {cause.metadata.stepName}</p>
+      ) : null}
+      {cause.metadata?.command ? (
+        <p className={styles.metaText}>Command: {cause.metadata.command}</p>
+      ) : null}
+      {cause.metadata?.dependencies && cause.metadata.dependencies.length > 0 ? (
+        <ul className={styles.planList}>
+          {cause.metadata.dependencies.map((dependency) => (
+            <li key={dependency} className={styles.planListItem}>
+              {dependency}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {cause.metadata?.outputTail && cause.metadata.outputTail.length > 0 ? (
+        <pre className={styles.preContent}>{cause.metadata.outputTail.join('\n')}</pre>
+      ) : null}
+    </article>
+  );
+}
+
+export function DiagnosisPanel({ diagnosis }: DiagnosisPanelProps) {
+  if (diagnosis.severity === 'healthy' || !diagnosis.primary) {
+    return null;
+  }
+
+  const secondaryLabel =
+    diagnosis.secondary.length === 1
+      ? 'Show 1 other signal'
+      : `Show ${diagnosis.secondary.length} other signals`;
+
+  return (
+    <section className={`${styles.section} ${styles.focusDiagnosisPanel}`}>
+      <div className={styles.reviewTitleWrap}>
+        <h3 className={styles.sectionTitle}>Health Diagnosis</h3>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>{diagnosis.severity}</span>
+      </div>
+
+      {renderCause(diagnosis.primary)}
+
+      {diagnosis.secondary.length > 0 ? (
+        <details className={styles.section}>
+          <summary className={styles.sectionSummary}>{secondaryLabel}</summary>
+          <div className={styles.focusDiagnosisCauseList}>
+            {diagnosis.secondary.map((cause) => renderCause(cause))}
+          </div>
+        </details>
+      ) : null}
+    </section>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { resolveRecommendedAction } from '@/lib/focus-detail-derivations.js';
+import type { FeatureDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface FeatureDecisionBannerProps {
+  detail: FeatureDetail;
+}
+
+function bannerClass(
+  readiness: NonNullable<FeatureDetail['verification_summary']>['readiness'],
+): string {
+  if (readiness === 'ready') {
+    return styles.focusDecisionBannerReady;
+  }
+  if (readiness === 'blocked') {
+    return styles.focusDecisionBannerBlocked;
+  }
+  if (readiness === 'at_risk') {
+    return styles.focusDecisionBannerRisk;
+  }
+  return styles.focusDecisionBannerNeutral;
+}
+
+function formatTimestamp(value: string | null | undefined): string {
+  if (!value) {
+    return 'unknown';
+  }
+  const parsed = Date.parse(value);
+  if (Number.isNaN(parsed)) {
+    return value;
+  }
+  return new Date(parsed).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function FeatureDecisionBanner({ detail }: FeatureDecisionBannerProps) {
+  const summary = detail.verification_summary;
+  const blocker = summary?.blockers[0];
+  const readiness = summary?.readiness ?? 'unknown';
+
+  return (
+    <section
+      className={`${styles.section} ${styles.focusDecisionBanner} ${bannerClass(readiness)}`}
+    >
+      <div className={styles.focusDecisionHeadline}>
+        <strong>
+          {readiness === 'ready'
+            ? 'Ready to merge'
+            : readiness === 'blocked'
+              ? 'Blocked'
+              : readiness === 'at_risk'
+                ? 'Not ready'
+                : 'Unknown state'}
+        </strong>
+        <span className={styles.metaText}>
+          evaluated {formatTimestamp(summary?.last_evaluated_at)}
+        </span>
+      </div>
+      <p className={styles.operationalNarrative}>
+        {blocker?.detail ?? 'No explicit blocker is recorded in the current verification summary.'}
+      </p>
+      <p className={styles.metaText}>{resolveRecommendedAction(detail)}</p>
+    </section>
+  );
+}

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

@@ -0,0 +1,167 @@
+'use client';
+
+import React, { useState } from 'react';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureQuestion } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface FeatureQuestionAnswerPanelProps {
+  featureId: string;
+  project: string;
+  question: FeatureQuestion;
+  onAnswered: () => Promise<void>;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  compact?: boolean;
+}
+
+function expectedSchema(question: FeatureQuestion): string | null {
+  return question.expected_answer?.schema && Object.keys(question.expected_answer.schema).length > 0
+    ? JSON.stringify(question.expected_answer.schema, null, 2)
+    : null;
+}
+
+export function FeatureQuestionAnswerPanel({
+  featureId,
+  project,
+  question,
+  onAnswered,
+  addToast,
+  compact = false,
+}: FeatureQuestionAnswerPanelProps) {
+  const [message, setMessage] = useState('');
+  const [sending, setSending] = useState(false);
+  const schema = expectedSchema(question);
+  const resumeTarget = question.resume_phase ?? question.resume_status ?? question.phase ?? null;
+
+  const send = async () => {
+    if (message.trim().length === 0 || sending) {
+      return;
+    }
+
+    setSending(true);
+    try {
+      const response = await fetch(
+        `/api/features/${featureId}/questions/${question.question_id}/answer${projectQuery(project)}`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            answer: message.trim(),
+            answered_by: 'dashboard',
+          }),
+        },
+      );
+      const body = (await response.json()) as {
+        ok: boolean;
+        error?: { message?: string };
+        data?: { resume_status?: string | null };
+      };
+      if (!body.ok) {
+        addToast(body.error?.message ?? 'Failed to send answer', 'error');
+        return;
+      }
+
+      addToast(
+        body.data?.resume_status === 'intake'
+          ? 'Answer sent. Feature queued to resume intake.'
+          : 'Answer sent. Feature queued to resume execution.',
+        'success',
+      );
+      setMessage('');
+      await onAnswered();
+    } catch {
+      addToast('Failed to send answer', 'error');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div className={compact ? styles.inlineQuestionPanel : styles.focusTabStack}>
+      <p className={styles.metaText}>{question.prompt}</p>
+      <div className={styles.focusOverviewGrid}>
+        <div className={styles.summaryMetricCard}>
+          <span className={styles.summaryMetricLabel}>Role / Phase</span>
+          <strong className={styles.summaryMetricValue}>
+            {question.role} / {question.phase}
+          </strong>
+        </div>
+        {resumeTarget ? (
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Resume Target</span>
+            <strong className={styles.summaryMetricValue}>{resumeTarget}</strong>
+          </div>
+        ) : null}
+        {question.ambiguity_id ? (
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Ambiguity</span>
+            <strong className={styles.summaryMetricValue}>{question.ambiguity_id}</strong>
+          </div>
+        ) : null}
+        {question.obligation_ids && question.obligation_ids.length > 0 ? (
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Obligations</span>
+            <strong className={`${styles.summaryMetricValue} ${styles.wrapAnywhere}`}>
+              {question.obligation_ids.join(', ')}
+            </strong>
+          </div>
+        ) : null}
+      </div>
+
+      {Object.keys(question.details).length > 0 ? (
+        <ul className={styles.planList}>
+          {Object.entries(question.details).map(([key, value]) => (
+            <li key={key} className={styles.planListItem}>
+              {key}: {typeof value === 'string' ? value : JSON.stringify(value)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+
+      {question.expected_answer?.choices?.length ? (
+        <div className={styles.inlineActions}>
+          {question.expected_answer.choices.map((choice) => (
+            <button
+              key={choice}
+              type="button"
+              className={styles.button}
+              disabled={sending}
+              onClick={() => setMessage(choice)}
+            >
+              {choice}
+            </button>
+          ))}
+        </div>
+      ) : null}
+
+      {schema ? (
+        <div className={styles.focusTabStack}>
+          <p className={styles.metaText}>Expected answer format</p>
+          <pre className={styles.preformattedBlock}>{schema}</pre>
+        </div>
+      ) : null}
+
+      <label className={styles.label} htmlFor={`human-input-message-${question.question_id}`}>
+        Response
+      </label>
+      <textarea
+        id={`human-input-message-${question.question_id}`}
+        className={styles.textarea}
+        placeholder="Type your response..."
+        rows={compact ? 3 : 4}
+        value={message}
+        onChange={(event) => setMessage(event.target.value)}
+      />
+      <button
+        type="button"
+        className={`${styles.button} ${styles.buttonSuccess}`}
+        onClick={() => {
+          void send();
+        }}
+        disabled={sending || message.trim().length === 0}
+      >
+        {sending ? 'Sending...' : 'Send Answer'}
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import Link from 'next/link';
+import type { FeatureDetail } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface FocusHeaderProps {
+  boardHref: string;
+  detail: FeatureDetail | null;
+  featureId: string;
+  project: string;
+  statusLabel: string;
+}
+
+function phaseBadgeClass(phase: FeatureDetail['feature']['phase']): string {
+  if (phase === 'ready_to_merge' || phase === 'merged') {
+    return `${styles.badge} ${styles.badgePass}`;
+  }
+  if (phase === 'blocked') {
+    return `${styles.badge} ${styles.badgeFail}`;
+  }
+  if (phase === 'qa' || phase === 'building') {
+    return `${styles.badge} ${styles.badgePending}`;
+  }
+  return `${styles.badge} ${styles.badgeNeutral}`;
+}
+
+export function FocusHeader({
+  boardHref,
+  detail,
+  featureId,
+  project,
+  statusLabel,
+}: FocusHeaderProps) {
+  const phase = detail?.feature.phase ?? 'unknown';
+
+  return (
+    <header className={styles.focusHeader}>
+      <div className={styles.titleBlock}>
+        <span className={styles.eyebrow}>Feature Focus</span>
+        <h1 className={`${styles.pageTitle} ${styles.wrapAnywhere}`}>{featureId}</h1>
+        <p className={styles.pageSubtitle}>
+          {project.length > 0 ? `${project} • ` : ''}Status: {statusLabel}
+        </p>
+      </div>
+      <div className={styles.inlineActions}>
+        <span className={phaseBadgeClass(phase)}>Phase {phase}</span>
+        <span className={`${styles.badge} ${styles.badgeNeutral}`}>Status {statusLabel}</span>
+        <Link href={boardHref} className={styles.linkButton}>
+          Back To Board
+        </Link>
+      </div>
+    </header>
+  );
+}