agentic-orchestrator 0.1.27 → 0.2.0

package/packages/web-dashboard/src/components/focus/tabs/IntakeTab.tsx

@@ -0,0 +1,429 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { FeatureQuestionAnswerPanel } from '@/components/focus/FeatureQuestionAnswerPanel';
+import { PlannerArtifactViewer } from '@/components/focus/PlannerArtifactViewer';
+import { PlannerLifecycleHeader } from '@/components/focus/PlannerLifecycleHeader';
+import { projectQuery } from '@/lib/dashboard-utils.js';
+import type { FeatureIntakeWorkspace, FeatureQuestion } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+
+interface IntakeTabProps {
+  featureId: string;
+  project: string;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+  refreshDetail: (featureId: string) => Promise<void>;
+  refreshStatus: () => Promise<void>;
+  initialWorkspace?: FeatureIntakeWorkspace | null;
+}
+
+interface IntakeWorkspaceResponse {
+  ok: boolean;
+  data?: FeatureIntakeWorkspace;
+  error?: { message?: string };
+}
+
+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).toLocaleString([], {
+    month: 'short',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function promotionBasisLabel(value: string | null | undefined): string {
+  if (value === 'structured_spec') {
+    return 'Promoted directly from a structured spec';
+  }
+  if (value === 'questions_resolved') {
+    return 'Promoted after intake questions were resolved';
+  }
+  if (value === 'policy_approved_auto_promotion') {
+    return 'Auto-promoted by policy';
+  }
+  if (value === 'human_review_confirmed') {
+    return 'Promoted after explicit human review';
+  }
+  return 'No promotion basis recorded yet';
+}
+
+function answerLabel(question: FeatureQuestion | undefined): string {
+  if (!question) {
+    return 'Inspect';
+  }
+  return question.answer == null ? 'Answer' : 'Resolve';
+}
+
+export function IntakeTab({
+  featureId,
+  project,
+  addToast,
+  refreshDetail,
+  refreshStatus,
+  initialWorkspace = null,
+}: IntakeTabProps) {
+  const [workspace, setWorkspace] = useState<FeatureIntakeWorkspace | null>(initialWorkspace);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedQuestionId, setExpandedQuestionId] = useState<string | null>(null);
+
+  const loadWorkspace = async (signal?: AbortSignal) => {
+    try {
+      const response = await fetch(
+        `/api/features/${featureId}/intake-workspace${projectQuery(project)}`,
+        signal ? { signal } : undefined,
+      );
+      const body = (await response.json()) as IntakeWorkspaceResponse;
+      if (!body.ok || !body.data) {
+        setError(body.error?.message ?? 'Failed to load intake workspace');
+        return;
+      }
+      setWorkspace(body.data);
+      setError(null);
+    } catch {
+      if (!signal?.aborted) {
+        setError('Failed to load intake workspace');
+      }
+    }
+  };
+
+  useEffect(() => {
+    const controller = new AbortController();
+    void loadWorkspace(controller.signal);
+    return () => controller.abort();
+  }, [featureId, project]);
+
+  const openQuestionsById = useMemo(() => {
+    return new Map(
+      (workspace?.open_questions ?? []).map((question) => [question.question_id, question]),
+    );
+  }, [workspace?.open_questions]);
+
+  const handleAnswered = async () => {
+    await Promise.all([loadWorkspace(), refreshStatus(), refreshDetail(featureId)]);
+  };
+
+  if (!workspace) {
+    return (
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Intake</h2>
+        <p className={styles.metaText}>{error ?? 'Loading intake workspace…'}</p>
+      </section>
+    );
+  }
+
+  return (
+    <div className={styles.focusTabStack}>
+      <PlannerLifecycleHeader lifecycle={workspace.lifecycle} />
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>Requirements Intake Summary</h3>
+            <p className={styles.metaText}>
+              Intake status and promotion posture for the requirements contract.
+            </p>
+          </div>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {workspace.summary?.status?.replace(/_/g, ' ') ?? 'unknown'}
+          </span>
+        </div>
+        <div className={styles.focusOverviewGrid}>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Bootstrap Manifest</span>
+            <strong className={styles.summaryMetricValue}>
+              v{workspace.summary?.bootstrap_manifest_version ?? '-'}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Verified Manifest</span>
+            <strong className={styles.summaryMetricValue}>
+              v{workspace.summary?.verified_manifest_version ?? '-'}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Open Ambiguities</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.summary?.open_ambiguity_count ?? 0}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Questions</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.review?.questions_open ?? 0} open /{' '}
+              {workspace.review?.questions_resolved ?? 0} resolved
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Promotion Basis</span>
+            <strong className={`${styles.summaryMetricValue} ${styles.wrapAnywhere}`}>
+              {promotionBasisLabel(workspace.summary?.promotion_basis)}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Last Verified</span>
+            <strong className={styles.summaryMetricValue}>
+              {formatTimestamp(workspace.summary?.last_verified_at)}
+            </strong>
+          </div>
+        </div>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>Ambiguity Queue</h3>
+            <p className={styles.metaText}>
+              Open ambiguities block intake promotion until their linked questions are resolved.
+            </p>
+          </div>
+          <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+            {workspace.open_ambiguities.length} open
+          </span>
+        </div>
+
+        <div className={styles.focusTabStack}>
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Open</span>
+            {workspace.open_ambiguities.length === 0 ? (
+              <p className={styles.progressSnapshotNarrative}>No open ambiguities remain.</p>
+            ) : (
+              <div className={styles.focusTabStack}>
+                {workspace.open_ambiguities.map((ambiguity) => {
+                  const question =
+                    ambiguity.linked_open_question_id != null
+                      ? openQuestionsById.get(ambiguity.linked_open_question_id)
+                      : undefined;
+                  const expanded = question?.question_id === expandedQuestionId;
+                  return (
+                    <div key={ambiguity.id} className={styles.plannerQueueItem}>
+                      <div className={styles.reviewTitleWrap}>
+                        <div className={styles.focusTabStack}>
+                          <strong className={styles.wrapAnywhere}>{ambiguity.id}</strong>
+                          <p className={styles.metaText}>{ambiguity.summary}</p>
+                        </div>
+                        <div className={styles.badgeRow}>
+                          <span className={`${styles.badge} ${styles.badgeFail}`}>blocking</span>
+                          <span className={`${styles.badge} ${styles.badgeNeutral}`}>open</span>
+                          {question ? (
+                            <button
+                              type="button"
+                              className={styles.linkButton}
+                              onClick={() =>
+                                setExpandedQuestionId(expanded ? null : question.question_id)
+                              }
+                            >
+                              {answerLabel(question)}
+                            </button>
+                          ) : null}
+                        </div>
+                      </div>
+                      <p className={styles.metaText}>
+                        Obligations:{' '}
+                        {ambiguity.obligation_ids.length > 0
+                          ? ambiguity.obligation_ids.join(', ')
+                          : 'none linked'}
+                      </p>
+                      <p className={styles.metaText}>
+                        Linked question:{' '}
+                        {question ? question.question_id : 'no linked open intake question'}
+                      </p>
+                      {expanded && question ? (
+                        <div className={styles.progressTaskPanel}>
+                          <FeatureQuestionAnswerPanel
+                            featureId={featureId}
+                            project={project}
+                            question={question}
+                            onAnswered={handleAnswered}
+                            addToast={addToast}
+                            compact
+                          />
+                        </div>
+                      ) : null}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>Resolved</span>
+            {workspace.resolved_ambiguities.length === 0 ? (
+              <p className={styles.progressSnapshotNarrative}>
+                No ambiguities have been resolved yet.
+              </p>
+            ) : (
+              <div className={styles.focusTabStack}>
+                {workspace.resolved_ambiguities.map((ambiguity) => (
+                  <div key={ambiguity.id} className={styles.plannerQueueItem}>
+                    <div className={styles.reviewTitleWrap}>
+                      <strong className={styles.wrapAnywhere}>{ambiguity.id}</strong>
+                      <div className={styles.badgeRow}>
+                        <span className={`${styles.badge} ${styles.badgePass}`}>resolved</span>
+                      </div>
+                    </div>
+                    <p className={styles.metaText}>{ambiguity.summary}</p>
+                    <p className={styles.metaText}>
+                      Obligations:{' '}
+                      {ambiguity.obligation_ids.length > 0
+                        ? ambiguity.obligation_ids.join(', ')
+                        : 'none linked'}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {workspace.general_questions.length > 0 ? (
+          <div className={styles.progressTaskPanel}>
+            <span className={styles.summaryMetricLabel}>General Intake Questions</span>
+            <div className={styles.focusTabStack}>
+              {workspace.general_questions.map((question) => (
+                <div key={question.question_id} className={styles.plannerQueueItem}>
+                  <div className={styles.reviewTitleWrap}>
+                    <strong className={styles.wrapAnywhere}>{question.question_id}</strong>
+                    <button
+                      type="button"
+                      className={styles.linkButton}
+                      onClick={() =>
+                        setExpandedQuestionId(
+                          expandedQuestionId === question.question_id ? null : question.question_id,
+                        )
+                      }
+                    >
+                      {answerLabel(question)}
+                    </button>
+                  </div>
+                  <p className={styles.metaText}>{question.prompt}</p>
+                  {expandedQuestionId === question.question_id ? (
+                    <FeatureQuestionAnswerPanel
+                      featureId={featureId}
+                      project={project}
+                      question={question}
+                      onAnswered={handleAnswered}
+                      addToast={addToast}
+                      compact
+                    />
+                  ) : null}
+                </div>
+              ))}
+            </div>
+          </div>
+        ) : null}
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>Promotion Readiness</h3>
+            <p className={styles.metaText}>Can intake promote into execution planning right now?</p>
+          </div>
+          <span
+            className={`${styles.badge} ${
+              workspace.promotion_readiness.ready ? styles.badgePass : styles.badgeFail
+            }`}
+          >
+            {workspace.promotion_readiness.ready ? 'Ready' : 'Blocked'}
+          </span>
+        </div>
+        <div className={styles.focusOverviewGrid}>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Verified Manifest</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.promotion_readiness.verified_manifest_exists ? 'Present' : 'Missing'}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Open Questions</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.promotion_readiness.open_questions_remaining ? 'Yes' : 'No'}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Unresolved Ambiguities</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.promotion_readiness.unresolved_ambiguities_remaining ? 'Yes' : 'No'}
+            </strong>
+          </div>
+        </div>
+        <ul className={styles.planList}>
+          {workspace.promotion_readiness.blocker_reasons.length === 0 ? (
+            <li className={styles.planListItem}>No blockers remain.</li>
+          ) : (
+            workspace.promotion_readiness.blocker_reasons.map((reason) => (
+              <li key={reason} className={styles.planListItem}>
+                {reason}
+              </li>
+            ))
+          )}
+        </ul>
+      </section>
+
+      <section className={styles.section}>
+        <div className={styles.reviewTitleWrap}>
+          <div>
+            <h3 className={styles.sectionTitle}>What Changed During Intake</h3>
+            <p className={styles.metaText}>
+              Summary of the delta from bootstrap to verified requirements.
+            </p>
+          </div>
+        </div>
+        <div className={styles.focusOverviewGrid}>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Ambiguities Resolved</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.ambiguities_resolved}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Ambiguities Still Open</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.ambiguities_open}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Obligations Added</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.obligations_added}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Obligations Removed</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.obligations_removed}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Confidence Upgrades</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.confidence_upgrades}
+            </strong>
+          </div>
+          <div className={styles.summaryMetricCard}>
+            <span className={styles.summaryMetricLabel}>Confidence Downgrades</span>
+            <strong className={styles.summaryMetricValue}>
+              {workspace.manifest_delta.confidence_downgrades}
+            </strong>
+          </div>
+        </div>
+      </section>
+
+      <PlannerArtifactViewer
+        artifacts={workspace.artifacts}
+        featureId={featureId}
+        project={project}
+        title="Intake Artifacts"
+      />
+    </div>
+  );
+}

package/packages/web-dashboard/src/components/focus/tabs/OverviewTab.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { ActionableRiskList } from '@/components/focus/ActionableRiskList';
+import { BlockedGuidanceBanner } from '@/components/focus/BlockedGuidanceBanner';
+import type { FeatureDetail, FeatureQuestion, QaTestIndex, ReviewBrief } from '@/lib/types.js';
+import styles from '@/styles/dashboard.module.css';
+import { FeatureDecisionBanner } from '@/components/focus/FeatureDecisionBanner';
+import { HumanInputPanel } from '@/components/human-input-panel';
+import { QaCoverageMap } from '@/components/qa-coverage-map';
+import { ReviewBriefPanel } from '@/components/review-brief-panel';
+import { AgentRolePerformanceCard } from '@/components/focus/AgentRolePerformanceCard';
+import { CollisionRadar } from '@/components/focus/CollisionRadar';
+import { GenealogyTree } from '@/components/focus/GenealogyTree';
+import { RecentMaterialChanges } from '@/components/focus/RecentMaterialChanges';
+import { VerificationSummaryCard } from '@/components/focus/VerificationSummaryCard';
+import type { FocusTabId } from '@/lib/focus-view.js';
+
+interface OverviewTabProps {
+  detail: FeatureDetail | null;
+  project: string;
+  flakySuspects?: string[];
+  qaIndex?: QaTestIndex | null;
+  reviewBrief?: ReviewBrief | null;
+  onSelectTab?: (tabId: FocusTabId) => void;
+  refreshDetail: (featureId: string) => Promise<void>;
+  refreshStatus: () => Promise<void>;
+  addToast: (message: string, type?: 'success' | 'error' | 'info') => void;
+}
+
+function formatIntakeLabel(value: string | null | undefined): string {
+  if (!value) {
+    return 'unknown';
+  }
+  return value.replace(/_/g, ' ');
+}
+
+function intakeNarrative(detail: FeatureDetail): string {
+  const intake = detail.intake;
+  if (!intake) {
+    return 'No intake summary is available for this feature.';
+  }
+  if (intake.summary.status === 'awaiting_input') {
+    return 'Planner intake is waiting on operator clarification before it can promote a verified manifest.';
+  }
+  if (intake.summary.status === 'in_progress') {
+    return 'Planner intake is normalizing the spec into a verified requirements contract before execution planning begins.';
+  }
+  if (intake.summary.status === 'verified') {
+    return 'Requirements intake is verified and execution planning can proceed against the locked manifest.';
+  }
+  return 'Requirements intake has not started yet.';
+}
+
+function visibleOverviewQuestions(detail: FeatureDetail): FeatureQuestion[] {
+  return (detail.questions ?? []).filter(
+    (question) =>
+      question.status === 'open' &&
+      !(
+        question.resume_status === 'intake' ||
+        question.resume_phase === 'intake' ||
+        question.phase === 'intake'
+      ),
+  );
+}
+
+export function OverviewTab({
+  detail,
+  project,
+  flakySuspects = [],
+  qaIndex = null,
+  reviewBrief = null,
+  onSelectTab,
+  refreshDetail,
+  refreshStatus,
+  addToast,
+}: OverviewTabProps) {
+  if (!detail) {
+    return (
+      <section className={styles.section}>
+        <h2 className={styles.sectionTitle}>Overview</h2>
+        <p className={styles.metaText}>Loading feature detail…</p>
+      </section>
+    );
+  }
+
+  const overviewQuestions = visibleOverviewQuestions(detail);
+
+  return (
+    <div className={styles.focusTabStack}>
+      <FeatureDecisionBanner detail={detail} />
+      <BlockedGuidanceBanner feature={detail.feature} />
+      {detail.intake ? (
+        <section className={styles.section}>
+          <div className={styles.reviewTitleWrap}>
+            <div>
+              <h3 className={styles.sectionTitle}>Requirements Intake</h3>
+              <p className={styles.metaText}>{intakeNarrative(detail)}</p>
+            </div>
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {formatIntakeLabel(detail.intake.summary.status)}
+            </span>
+          </div>
+          <div className={styles.focusOverviewGrid}>
+            <div className={styles.summaryMetricCard}>
+              <span className={styles.summaryMetricLabel}>Bootstrap Manifest</span>
+              <strong className={styles.summaryMetricValue}>
+                v{detail.intake.summary.bootstrap_manifest_version ?? '-'}
+              </strong>
+            </div>
+            <div className={styles.summaryMetricCard}>
+              <span className={styles.summaryMetricLabel}>Verified Manifest</span>
+              <strong className={styles.summaryMetricValue}>
+                v{detail.intake.summary.verified_manifest_version ?? '-'}
+              </strong>
+            </div>
+            <div className={styles.summaryMetricCard}>
+              <span className={styles.summaryMetricLabel}>Open Ambiguities</span>
+              <strong className={styles.summaryMetricValue}>
+                {detail.intake.summary.open_ambiguity_count}
+              </strong>
+            </div>
+            <div className={styles.summaryMetricCard}>
+              <span className={styles.summaryMetricLabel}>Review Status</span>
+              <strong className={styles.summaryMetricValue}>
+                {formatIntakeLabel(detail.intake.review?.status ?? null)}
+              </strong>
+            </div>
+          </div>
+          <p className={styles.metaText}>
+            Questions open: {detail.intake.review?.questions_open ?? 0} • resolved{' '}
+            {detail.intake.review?.questions_resolved ?? 0} • tracked ambiguities{' '}
+            {detail.intake.review?.ambiguity_count ?? detail.intake.summary.open_ambiguity_count}
+          </p>
+          {detail.intake.summary.promotion_basis ? (
+            <p className={styles.metaText}>
+              Promotion basis: {detail.intake.summary.promotion_basis}
+            </p>
+          ) : null}
+          {detail.intake.summary.last_verified_at ? (
+            <p className={styles.metaText}>
+              Last verified: {detail.intake.summary.last_verified_at}
+            </p>
+          ) : null}
+        </section>
+      ) : null}
+      {onSelectTab && detail.feature.phase !== 'merged' ? (
+        <section className={`${styles.section} ${styles.operatorConsoleCallout}`}>
+          <div className={styles.reviewTitleWrap}>
+            <div>
+              <h3 className={styles.sectionTitle}>Operator Controls</h3>
+              <p className={styles.metaText}>
+                Directed agent messaging and live role logs are available in Runtime.
+              </p>
+            </div>
+            <span className={`${styles.badge} ${styles.badgeNeutral}`}>
+              {detail.feature.activity_state ?? 'unknown'}
+            </span>
+          </div>
+          <div className={styles.operatorConsoleActions}>
+            <button type="button" className={styles.button} onClick={() => onSelectTab('runtime')}>
+              Open Runtime Console
+            </button>
+            <button
+              type="button"
+              className={`${styles.button} ${styles.buttonGhost}`}
+              onClick={() => onSelectTab('history')}
+            >
+              Open History Logs
+            </button>
+          </div>
+        </section>
+      ) : null}
+      <VerificationSummaryCard summary={detail.verification_summary} />
+      <RecentMaterialChanges entries={detail.revision_summary} onSelectTab={onSelectTab} />
+      <ActionableRiskList risks={detail.actionable_risks} />
+      <CollisionRadar model={detail.collision_radar} project={project} />
+
+      {reviewBrief ? <ReviewBriefPanel brief={reviewBrief} /> : null}
+      {qaIndex ? <QaCoverageMap qaIndex={qaIndex} flakySuspects={flakySuspects} /> : null}
+
+      {(Array.isArray(detail.role_performance) && detail.role_performance.length > 0) ||
+      detail.genealogy ? (
+        <details className={styles.section}>
+          <summary className={styles.sectionSummary}>Diagnostics</summary>
+          {Array.isArray(detail.role_performance) && detail.role_performance.length > 0 ? (
+            <div className={styles.rolePerformanceGrid}>
+              {detail.role_performance.map((card) => (
+                <AgentRolePerformanceCard key={card.role} card={card} />
+              ))}
+            </div>
+          ) : null}
+          <GenealogyTree genealogy={detail.genealogy ?? null} />
+        </details>
+      ) : null}
+
+      {detail.feature.activity_state === 'waiting_input' && overviewQuestions.length > 0 ? (
+        <HumanInputPanel
+          featureId={detail.feature.feature_id}
+          project={project}
+          questions={overviewQuestions}
+          addToast={addToast}
+          onAnswered={async () => {
+            await refreshStatus();
+            await refreshDetail(detail.feature.feature_id);
+          }}
+        />
+      ) : null}
+
+      {detail.feature.phase === 'merged' ? (
+        <section className={styles.section}>
+          <h3 className={styles.sectionTitle}>Merged</h3>
+          <p className={styles.metaText}>PR: {detail.feature.pr?.url ?? 'unlinked'}</p>
+          <p className={styles.metaText}>Merge detail: {detail.feature.status_reason ?? '-'}</p>
+        </section>
+      ) : null}
+    </div>
+  );
+}