holo-codex 0.1.0

package/plugins/autonomous-pr-loop/ui/src/pages/CommandCenterParts.tsx

@@ -0,0 +1,276 @@
+import type { JSX } from "react";
+import { useState } from "react";
+import type {
+  AgentTimelineEntry,
+  DashboardApi,
+  DryRunPreviewData,
+  LoopNotification,
+  MissionControlData,
+  PlanItem,
+  PlanNavigatorData,
+  PrSelectionData,
+  WorkerSummary
+} from "../api.js";
+import { EmptyState } from "../components/EmptyState.js";
+import { StatusBadge, toneForStatus, type StatusTone } from "../components/StatusBadge.js";
+import { List } from "../components/List.js";
+import { MetricRow } from "../components/MetricRow.js";
+import { ResponsiveTable } from "../components/ResponsiveTable.js";
+import { displayValueLabel, t } from "../i18n.js";
+import type { EffectiveLocale } from "../../../core/locale.js";
+
+export type { EffectiveLocale };
+
+export interface ArtifactPreviewState {
+  id: string;
+  text: string;
+  error?: string;
+  truncated?: boolean;
+}
+
+export type TimelinePreset = "all" | "live" | "hooks" | "gates" | "artifacts";
+
+export const timelinePresets: Array<{ id: TimelinePreset; labelKey: string; sources?: AgentTimelineEntry["source"][] }> = [
+  { id: "all", labelKey: "timelinePresetAll" },
+  { id: "live", labelKey: "timelinePresetLive", sources: ["worker", "worker_event"] },
+  { id: "hooks", labelKey: "timelinePresetHooks", sources: ["event", "worker_event"] },
+  { id: "gates", labelKey: "timelinePresetGates", sources: ["gate", "decision"] },
+  { id: "artifacts", labelKey: "timelinePresetArtifacts", sources: ["artifact"] }
+];
+
+export function PlanSelectionSummary({ data, selection, locale }: { data: PlanNavigatorData | undefined; selection: PrSelectionData | undefined; locale: EffectiveLocale }): JSX.Element {
+  return (
+    <section className="focus-panel">
+      <div>
+        <p className="eyebrow">{selectionEyebrow(selection, locale)}</p>
+        <h2>{selectionTitle(selection, data?.selectedNext, locale)}</h2>
+        <p>{selectionDetail(selection, data?.selectedNext, data?.ambiguous ?? false, locale)}</p>
+      </div>
+      <StatusBadge value={selectionStatus(selection, data?.ambiguous ?? false, locale)} tone={selectionTone(selection, data?.ambiguous ?? false)} />
+    </section>
+  );
+}
+
+export function PlanList({ items, locale }: { items: PlanNavigatorData["candidates"]; locale: EffectiveLocale }): JSX.Element {
+  return items.length === 0 ? (
+    <EmptyState title={t(locale, "noPrs")} message={t(locale, "noPrsMessage")} />
+  ) : (
+    <div className="plan-list-table">
+      <ResponsiveTable columns={[t(locale, "tablePr"), t(locale, "tableStatus"), t(locale, "title"), t(locale, "issues")]} rows={items.map((item) => ({ key: item.id, cells: [item.id, item.status, item.title, item.issueRefs.join(", ") || "-"], cardTitle: item.id, cardMeta: item.status, cardSummary: item.title }))} empty={t(locale, "noPrsEmpty")} />
+    </div>
+  );
+}
+
+export function NotificationList({ items, locale }: { items: LoopNotification[]; locale: EffectiveLocale }): JSX.Element {
+  return items.length === 0 ? <EmptyState title={t(locale, "noNotifications")} message={t(locale, "noNotificationsMessage")} /> : <div className="notification-list">{items.map((item) => <details key={item.id} className="notification-item"><summary><span>{item.title}</span><StatusBadge value={severityLabel(locale, item.severity)} tone={toneForStatus(item.severity)} /></summary><p>{item.reason}</p><pre>{JSON.stringify(item.payload ?? {}, null, 2)}</pre></details>)}</div>;
+}
+
+export function ProfileDetails({ data, locale }: { data: MissionControlData; locale: EffectiveLocale }): JSX.Element {
+  const profile = data.profile;
+  if (!profile) return <EmptyState title={t(locale, "workflowUnavailable")} message={t(locale, "workflowUnavailableMessage")} />;
+  return (
+    <div className="two-stack compact-stack">
+      <section className="summary-panel">
+        <MetricRow label={t(locale, "fieldLoopShape")} value={profile.loopShape} tone="blue" />
+        <MetricRow label={t(locale, "fieldWorkflowProfile")} value={profile.workflowLabel} tone="blue" />
+        <MetricRow label={t(locale, "fieldRoleProfile")} value={displayValueLabel(locale, profile.roleProfile)} tone="blue" />
+        <MetricRow label={t(locale, "currentRole")} value={profile.currentRole ? `${profile.currentRole.label} / ${profile.currentRole.sandbox}` : t(locale, "none")} tone={profile.currentRole ? "yellow" : "muted"} />
+      </section>
+      <List items={[profile.workflowDescription, profile.autonomyBoundary, profile.handoffSummary, profile.validationPosture]} locale={locale} />
+      <ResponsiveTable
+        columns={[t(locale, "tableState"), t(locale, "tableRole"), t(locale, "tableWorker"), t(locale, "tableSandbox")]}
+        rows={profile.roleMapping.map((role) => ({ key: `${role.state}:${role.alias}`, cells: [role.state, role.label, role.workerType, role.sandbox], cardTitle: role.state, cardMeta: role.label, cardSummary: `${role.workerType} / ${role.sandbox}` }))}
+        empty={t(locale, "noRoles")}
+      />
+    </div>
+  );
+}
+
+export function WorkflowStages({ stages, locale }: { stages: NonNullable<DryRunPreviewData["workflowStages"]>; locale: EffectiveLocale }): JSX.Element {
+  return <ResponsiveTable columns={[t(locale, "tableState"), t(locale, "tableRole"), t(locale, "tableWorker"), t(locale, "tableGate")]} rows={stages.map((stage) => ({ key: stage.state, cells: [stage.state, stage.roleAlias ?? "-", stage.workerType ?? "-", stage.gateExpected ? t(locale, "yes") : t(locale, "no")], cardTitle: stage.state, cardMeta: stage.roleAlias ?? stage.workerType ?? "-", cardSummary: stage.gateExpected ? t(locale, "possibleGates") : t(locale, "no") }))} empty={t(locale, "noWorkflowStages")} />;
+}
+
+export function WorkerEventDetails({ worker, api, locale }: { worker: WorkerSummary; api: DashboardApi; locale: EffectiveLocale }): JSX.Element {
+  const [entries, setEntries] = useState<AgentTimelineEntry[]>();
+  const [error, setError] = useState<string>();
+  const load = async (): Promise<void> => {
+    if (entries !== undefined || error) return;
+    const result = await api.agentTimeline({ workerId: worker.id, sources: ["worker_event"], limit: 25 });
+    if (!result.ok || !result.data) {
+      setError(result.error?.message ?? t(locale, "timelineLoadError"));
+      return;
+    }
+    setEntries(result.data.entries);
+  };
+  return (
+    <details className="inline-details" onToggle={(event) => event.currentTarget.open && void load()}>
+      <summary>{worker.resultArtifactId ?? worker.error ?? t(locale, "workerEvents")}</summary>
+      {error ? <p>{error}</p> : <TimelineEntries entries={entries ?? []} locale={locale} compact />}
+    </details>
+  );
+}
+
+export function TimelineEntries({ entries, locale, compact = false }: { entries: AgentTimelineEntry[]; locale: EffectiveLocale; compact?: boolean }): JSX.Element {
+  if (entries.length === 0) {
+    return <EmptyState title={t(locale, "timelineEmpty")} message={t(locale, "timelineEmptyMessage")} />;
+  }
+  return (
+    <div className={compact ? "timeline-list timeline-list--compact" : "timeline-list"}>
+      {entries.map((entry) => (
+        <details key={entry.cursor} className="timeline-item">
+          <summary>
+            <span>{formatTime(entry.occurredAt)}</span>
+            <strong>{entry.title}</strong>
+            <StatusBadge value={entry.source} tone={toneForStatus(entry.status ?? entry.source)} />
+          </summary>
+          <dl className="detail-list">
+            <div><dt>{t(locale, "tableSeq")}</dt><dd>{String(entry.timelineSeq)}</dd></div>
+            <div><dt>{t(locale, "timelineSource")}</dt><dd>{entry.source}</dd></div>
+            <div><dt>{t(locale, "tableKind")}</dt><dd>{entry.kind}</dd></div>
+            {entry.workerId ? <div><dt>{t(locale, "tableWorker")}</dt><dd>{entry.workerId}</dd></div> : null}
+            {entry.threadId ? <div><dt>{t(locale, "timelineThread")}</dt><dd>{entry.threadId}</dd></div> : null}
+            <div><dt>{t(locale, "tableDetails")}</dt><dd>{entry.summary || "-"}</dd></div>
+          </dl>
+        </details>
+      ))}
+    </div>
+  );
+}
+
+export function TimelineSummary({ data, locale }: { data: MissionControlData; locale: EffectiveLocale }): JSX.Element {
+  const summary = data.timelineSummary;
+  const latest = summary?.latest;
+  const lastFailure = summary?.lastFailure;
+  return (
+    <section className="summary-panel">
+      <MetricRow label={t(locale, "timelineLatest")} value={latest ? `${latest.source}: ${latest.title}` : t(locale, "none")} tone={latest ? "blue" : "muted"} />
+      <MetricRow label={t(locale, "timelineLastFailure")} value={lastFailure ? `${lastFailure.source}: ${lastFailure.title}` : t(locale, "none")} tone={lastFailure ? "red" : "green"} />
+      <MetricRow label={t(locale, "timelineActiveWorker")} value={summary?.activeWorker ? `${summary.activeWorker.type} / ${summary.activeWorker.status}` : t(locale, "none")} tone={summary?.activeWorker ? "yellow" : "muted"} />
+      <MetricRow label={t(locale, "timelineObservationGap")} value={summary?.hasObservationGap ? t(locale, "timelineGap") : t(locale, "timelineNoGap")} tone={summary?.hasObservationGap ? "yellow" : "green"} />
+    </section>
+  );
+}
+
+export function filterTimelinePreset(entries: AgentTimelineEntry[], preset: TimelinePreset): AgentTimelineEntry[] {
+  if (preset !== "hooks") {
+    return entries;
+  }
+  return entries.filter((entry) =>
+    entry.kind.toLowerCase().includes("hook") ||
+    entry.kind.toLowerCase().includes("permission") ||
+    entry.title.toLowerCase().includes("hook") ||
+    entry.title.toLowerCase().includes("permission")
+  );
+}
+
+export function workflowRoleShapeSummary(data: MissionControlData, locale: EffectiveLocale): string {
+  const workflow = data.profile?.workflowLabel ?? displayValueLabel(locale, "default_pr_loop");
+  const role = data.profile?.currentRole?.label ?? displayValueLabel(locale, data.current.run?.currentState ?? data.current.status);
+  const shape = data.profile?.loopShape ?? "pr-loop";
+  return `${workflow} / ${role} / ${shape}`;
+}
+
+export function selectionCompact(selection: PrSelectionData | undefined, fallback: PlanItem | undefined, locale: EffectiveLocale): string {
+  if (selection?.mode === "generic_loop") return displayValueLabel(locale, selection.workflowProfile ?? "generic-loop");
+  if (selection?.mode === "ambiguous") return t(locale, "ambiguous");
+  const item = selection?.item ?? fallback;
+  if (!item) return t(locale, "unknown");
+  return selection?.prNumber ? `${item.id} / #${selection.prNumber}` : item.id;
+}
+
+export function selectionEyebrow(selection: PrSelectionData | undefined, locale: EffectiveLocale): string {
+  if (selection?.mode === "generic_loop") return t(locale, "genericLoop");
+  if (selection?.mode === "current_pr") return t(locale, "currentPr");
+  if (selection?.mode === "next_spec") return t(locale, "nextPr");
+  return t(locale, "selectedNextPr");
+}
+
+export function selectionTitle(selection: PrSelectionData | undefined, fallback: PlanItem | undefined, locale: EffectiveLocale): string {
+  if (selection?.mode === "generic_loop") return displayValueLabel(locale, selection.workflowProfile ?? "generic-loop");
+  if (selection?.mode === "ambiguous") return t(locale, "noUniqueNextPr");
+  const item = selection?.item ?? fallback;
+  if (!item) return t(locale, "noUniqueNextPr");
+  return selection?.prNumber ? `${item.title} / #${selection.prNumber}` : item.title;
+}
+
+export function selectionDetail(selection: PrSelectionData | undefined, fallback: PlanItem | undefined, ambiguous: boolean, locale: EffectiveLocale): string {
+  if (selection?.mode === "generic_loop") return selection.evidence[0] ?? t(locale, "genericLoopNoPrSelection");
+  if (selection?.mode === "ambiguous") return selection.reason ?? "ambiguous_next_pr";
+  const item = selection?.item ?? fallback;
+  const evidence = selection?.evidence[0] ?? item?.whySelected;
+  const branch = selection?.branchName ? `${t(locale, "tableBranch")}: ${selection.branchName}` : undefined;
+  return [branch, evidence ?? (ambiguous ? "ambiguous_next_pr" : t(locale, "noNextPrMessage"))].filter(Boolean).join(" - ");
+}
+
+export function selectionStatus(selection: PrSelectionData | undefined, ambiguous: boolean, locale: EffectiveLocale): string {
+  if (selection?.mode === "generic_loop") return t(locale, "selected");
+  if (selection?.mode === "current_pr") return t(locale, "current");
+  if (selection?.mode === "next_spec") return t(locale, "selected");
+  return ambiguous || selection?.mode === "ambiguous" ? t(locale, "ambiguous") : t(locale, "selected");
+}
+
+export function selectionTone(selection: PrSelectionData | undefined, ambiguous: boolean): StatusTone {
+  if (selection?.mode === "generic_loop") return "green";
+  if (selection?.mode === "current_pr") return "green";
+  if (selection?.mode === "next_spec") return "blue";
+  return ambiguous || selection?.mode === "ambiguous" ? "yellow" : "green";
+}
+
+export function severityLabel(locale: EffectiveLocale, severity: LoopNotification["severity"]): string {
+  const keys: Record<LoopNotification["severity"], string> = {
+    blocked: "severityBlocked",
+    confirmation_required: "severityConfirmationRequired",
+    attention: "severityAttention",
+    informational: "severityInformational"
+  };
+  return t(locale, keys[severity]);
+}
+
+export function formatTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+}
+
+export function decodeBase64Preview(id: string, value: string, locale: EffectiveLocale = "en-US"): { id: string; text: string; truncated?: boolean } {
+  const maxChars = 500_000;
+  if (value.length > maxChars) {
+    return { id, text: t(locale, "artifactLarge"), truncated: true };
+  }
+  try {
+    const binary = atob(value);
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+    return { id, text: new TextDecoder().decode(bytes) };
+  } catch {
+    return { id, text: t(locale, "artifactDecodeError") };
+  }
+}
+
+export function RawMessageDetails({ message, locale }: { message: string; locale: EffectiveLocale }): JSX.Element {
+  return (
+    <details className="raw-message-details">
+      <summary>{t(locale, "rawOriginalMessage")}</summary>
+      <pre>{message}</pre>
+    </details>
+  );
+}
+
+export function summarizeRawMessage(message: string | undefined, locale: EffectiveLocale, maxLength = 160): string | undefined {
+  if (!message) return undefined;
+  const singleLine = message.replace(/\s+/g, " ").trim();
+  if (singleLine.length <= maxLength) return singleLine;
+  return `${singleLine.slice(0, maxLength - 1).trimEnd()}${t(locale, "ellipsis")}`;
+}
+
+export function workerScopeSummary(workers: WorkerSummary[], locale: EffectiveLocale): string {
+  // Current-run data may arrive as either normalized activity or the legacy activityReason.
+  const current = workers.filter((worker) => worker.activity === "active" || worker.activityReason === "current_run").length;
+  const historical = workers.filter((worker) => worker.activity === "historical").length;
+  const stale = workers.filter((worker) => worker.activityReason === "stale_worker_failure").length;
+  return t(locale, "workerScopeSummary", {
+    current,
+    total: workers.length,
+    historical,
+    stale
+  });
+}

package/plugins/autonomous-pr-loop/ui/src/pages/agent-timeline/AgentTimelineView.tsx

@@ -0,0 +1,73 @@
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+import type { AgentTimelineEntry, DashboardApi } from "../../api.js";
+import { ErrorState } from "../../components/ErrorState.js";
+import { t } from "../../i18n.js";
+import {
+  TimelineEntries,
+  filterTimelinePreset,
+  timelinePresets,
+  type EffectiveLocale,
+  type TimelinePreset
+} from "../CommandCenterParts.js";
+
+export function AgentTimelineView({ api, runId, locale }: { api: DashboardApi; runId?: string; locale: EffectiveLocale }): JSX.Element {
+  const [entries, setEntries] = useState<AgentTimelineEntry[]>([]);
+  const [cursor, setCursor] = useState<string>();
+  const [error, setError] = useState<string>();
+  const [loading, setLoading] = useState(false);
+  const [preset, setPreset] = useState<TimelinePreset>("all");
+  const load = async (nextCursor?: string): Promise<void> => {
+    setLoading(true);
+    setError(undefined);
+    try {
+      const activePreset = timelinePresets.find((item) => item.id === preset);
+      const result = await api.agentTimeline({
+        limit: 50,
+        ...(runId ? { runId } : {}),
+        ...(activePreset?.sources ? { sources: activePreset.sources } : {}),
+        ...(nextCursor ? { cursor: nextCursor } : {})
+      });
+      if (!result.ok || !result.data) {
+        setError(result.error?.message ?? t(locale, "timelineLoadError"));
+        return;
+      }
+      const filtered = filterTimelinePreset(result.data.entries, preset);
+      setEntries((current) => nextCursor ? [...current, ...filtered] : filtered);
+      setCursor(result.data.nextCursor);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    setEntries([]);
+    setCursor(undefined);
+    void load();
+  }, [api, locale, preset, runId]);
+  if (error) return <ErrorState title={t(locale, "timelineUnavailable")} message={error} />;
+  return (
+    <div className="two-stack">
+      <section className="focus-panel observability-console">
+        <div>
+          <p className="eyebrow">{t(locale, "observabilityConsole")}</p>
+          <h2>{t(locale, "observabilityTitle")}</h2>
+          <p>{t(locale, "observabilityMessage")}</p>
+        </div>
+        <div className="preset-tabs" role="tablist" aria-label={t(locale, "timelinePresets")}>
+          {timelinePresets.map((item) => (
+            <button
+              key={item.id}
+              className={item.id === preset ? "ghost-button is-active" : "ghost-button"}
+              type="button"
+              onClick={() => setPreset(item.id)}
+            >
+              {t(locale, item.labelKey)}
+            </button>
+          ))}
+        </div>
+      </section>
+      <TimelineEntries entries={entries} locale={locale} />
+      {cursor ? <button className="ghost-button" type="button" disabled={loading} onClick={() => void load(cursor)}>{loading ? t(locale, "actionReading") : t(locale, "actionLoadMore")}</button> : null}
+    </div>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/pages/artifact-viewer/ArtifactViewer.tsx

@@ -0,0 +1,44 @@
+import type { JSX } from "react";
+import { useState } from "react";
+import type { DashboardApi, MissionControlData } from "../../api.js";
+import { ResponsiveTable } from "../../components/ResponsiveTable.js";
+import { t } from "../../i18n.js";
+import { decodeBase64Preview, formatTime, type ArtifactPreviewState, type EffectiveLocale } from "../CommandCenterParts.js";
+
+export function ArtifactViewer({ api, data, preview, onPreview, locale }: { api: DashboardApi; data: MissionControlData; preview: ArtifactPreviewState | undefined; onPreview: (preview: ArtifactPreviewState) => void; locale: EffectiveLocale; }): JSX.Element {
+  const [readingArtifactId, setReadingArtifactId] = useState<string>();
+  const readArtifact = async (id: string): Promise<void> => {
+    setReadingArtifactId(id);
+    try {
+      const result = await api.artifact(id);
+      if (!result.ok || !result.data) {
+        onPreview({ id, text: "", error: result.error?.message ?? t(locale, "artifactReadError") });
+        return;
+      }
+      onPreview(decodeBase64Preview(id, result.data.contentBase64, locale));
+    } catch (error) {
+      onPreview({ id, text: "", error: error instanceof Error ? error.message : t(locale, "artifactReadError") });
+    } finally {
+      setReadingArtifactId(undefined);
+    }
+  };
+  return (
+    <div className="two-stack">
+      <ResponsiveTable
+        columns={[t(locale, "tableArtifact"), t(locale, "tableKind"), t(locale, "tablePath"), t(locale, "tableCreated"), t(locale, "tableAction")]}
+        rows={data.artifacts.map((artifact) => ({
+          key: artifact.id,
+          cells: [artifact.name, artifact.kind, artifact.path, formatTime(artifact.createdAt), <button className="ghost-button" disabled={readingArtifactId !== undefined} key={artifact.id} type="button" onClick={() => void readArtifact(artifact.id)}>{readingArtifactId === artifact.id ? t(locale, "actionReading") : t(locale, "actionRead")}</button>],
+          cardTitle: artifact.name,
+          cardMeta: `${artifact.kind} / ${formatTime(artifact.createdAt)}`,
+          cardSummary: artifact.path
+        }))}
+        empty={t(locale, "noArtifacts")}
+      />
+      <section className="artifact-preview" aria-label={t(locale, "artifactPreviewAria")}>
+        <span>{preview ? `Artifact ${preview.id.slice(0, 8)}${preview.truncated ? ` / ${t(locale, "truncated")}` : ""}` : t(locale, "noArtifactSelected")}</span>
+        <pre>{preview?.error ?? preview?.text ?? t(locale, "artifactSelectMessage")}</pre>
+      </section>
+    </div>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/pages/dry-run-preview/DryRunPreview.tsx

@@ -0,0 +1,66 @@
+import type { JSX } from "react";
+import { useEffect, useState } from "react";
+import type { DashboardApi, DryRunPreviewData } from "../../api.js";
+import { CommandPreview } from "../../components/CommandPreview.js";
+import { Collapsible } from "../../components/Collapsible.js";
+import { EmptyState } from "../../components/EmptyState.js";
+import { ErrorState } from "../../components/ErrorState.js";
+import { List } from "../../components/List.js";
+import { StatusBadge } from "../../components/StatusBadge.js";
+import { displayValueLabel, t } from "../../i18n.js";
+import {
+  WorkflowStages,
+  selectionDetail,
+  selectionEyebrow,
+  selectionStatus,
+  selectionTitle,
+  selectionTone,
+  type EffectiveLocale
+} from "../CommandCenterParts.js";
+
+export function DryRunPreview({ api, onAction, locale }: { api: DashboardApi; onAction: (path: string) => void; locale: EffectiveLocale }): JSX.Element {
+  const [preview, setPreview] = useState<DryRunPreviewData>();
+  const [error, setError] = useState<string>();
+  useEffect(() => {
+    void api.dryRunPreview().then((result) => {
+      if (result.ok && result.data) setPreview(result.data);
+      else setError(result.error?.message ?? t(locale, "dryRunLoadError"));
+    });
+  }, [api, locale]);
+  if (error) return <ErrorState title={t(locale, "dryRunUnavailable")} message={error} />;
+  if (!preview) return <EmptyState title={t(locale, "loadingPreview")} message={t(locale, "loadingPreviewMessage")} />;
+  const mergeForecast = preview.mergeForecast;
+  const forecastMessage = mergeForecast
+    ? (mergeForecast.ready ? t(locale, "mergeReady") : t(locale, "mergeMissing"))
+    : t(locale, "genericForecastReady");
+  const forecastStatus = mergeForecast ? displayValueLabel(locale, mergeForecast.state) : displayValueLabel(locale, preview.profile?.loopShape ?? "generic-loop");
+  return (
+    <div className="two-stack">
+      <section className="focus-panel">
+        <div>
+          <p className="eyebrow">{selectionEyebrow(preview.selection, locale)}</p>
+          <h2>{selectionTitle(preview.selection, preview.nextPr, locale)}</h2>
+          <p>{selectionDetail(preview.selection, preview.nextPr, false, locale)}</p>
+        </div>
+        <StatusBadge value={selectionStatus(preview.selection, false, locale)} tone={selectionTone(preview.selection, false)} />
+      </section>
+      <section className="focus-panel">
+        <div>
+          <p className="eyebrow">{t(locale, "forecastSummary")}</p>
+          <h2>{preview.autonomyForecast.summary}</h2>
+          <p>{forecastMessage}</p>
+        </div>
+        <StatusBadge value={forecastStatus} tone={mergeForecast?.ready === false ? "yellow" : "green"} />
+      </section>
+      <div className="button-row wide">
+        <button className="success-button" type="button" onClick={() => onAction("/api/run-until-gate")}>{t(locale, "actionStartRealRun")}</button>
+        <button className="ghost-button" type="button" onClick={() => onAction("/api/stop")}>{t(locale, "actionStopRun")}</button>
+      </div>
+      <Collapsible title={t(locale, "commandsPlanned")} chip={t(locale, "commandsChip", { count: preview.commandsPlanned.length })}><CommandPreview commands={preview.commandsPlanned} emptyMessage={t(locale, "noCommandsPlanned")} /></Collapsible>
+      <Collapsible title={t(locale, "workflowStages")} chip={t(locale, "stagesChip", { count: preview.workflowStages?.length ?? 0 })}><WorkflowStages stages={preview.workflowStages ?? []} locale={locale} /></Collapsible>
+      <Collapsible title={t(locale, "possibleGates")} chip={t(locale, "gatesChip", { count: preview.possibleGates.length })}><List items={preview.possibleGates} locale={locale} /></Collapsible>
+      <Collapsible title={t(locale, "missingConditions")} chip={t(locale, "missingCount", { count: preview.missingConditions.length })}><List items={preview.missingConditions} locale={locale} /></Collapsible>
+      <Collapsible title={t(locale, "filesLikelyTouched")} chip={t(locale, "pathsChip", { count: preview.filesLikelyTouched.length })}><List items={preview.filesLikelyTouched} locale={locale} /></Collapsible>
+    </div>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/pages/event-ledger/EventLedger.tsx

@@ -0,0 +1,17 @@
+import type { JSX } from "react";
+import type { EventSummary } from "../../api.js";
+import { ResponsiveTable } from "../../components/ResponsiveTable.js";
+import { t } from "../../i18n.js";
+import { formatTime, type EffectiveLocale } from "../CommandCenterParts.js";
+
+export function EventLedger({ events, locale }: { events: EventSummary[]; locale: EffectiveLocale }): JSX.Element {
+  return (
+    <div className="event-ledger-table">
+      <ResponsiveTable
+        columns={[t(locale, "tableSeq"), t(locale, "tableTime"), t(locale, "tableEvent"), t(locale, "tableDetails")]}
+        rows={events.map((event) => ({ key: event.id, cells: [String(event.seq), formatTime(event.createdAt), event.kind, event.message], cardTitle: event.kind, cardMeta: `${formatTime(event.createdAt)} / #${event.seq}`, cardSummary: event.message }))}
+        empty={t(locale, "noEvents")}
+      />
+    </div>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/pages/gate-center/GateCenter.tsx

@@ -0,0 +1,34 @@
+import type { JSX } from "react";
+import type { MissionControlData } from "../../api.js";
+import { ActivityBadge, activityReasonLabel } from "../../components/ActivityBadge.js";
+import { ResponsiveTable } from "../../components/ResponsiveTable.js";
+import { StatusBadge, toneForStatus } from "../../components/StatusBadge.js";
+import { displayValueLabel, t } from "../../i18n.js";
+import { RawMessageDetails, formatTime, summarizeRawMessage, type EffectiveLocale } from "../CommandCenterParts.js";
+
+export function GateCenter({ data, locale }: { data: MissionControlData; locale: EffectiveLocale }): JSX.Element {
+  const active = data.gates.filter((gate) => gate.activity === "active").length;
+  const historical = data.gates.filter((gate) => gate.activity === "historical").length;
+  return (
+    <div className="two-stack">
+      <p className="scope-note">{t(locale, "gateScopeSummary", { active, historical, total: data.gates.length })}</p>
+      <ResponsiveTable
+        columns={[t(locale, "tableGate"), t(locale, "tableActivity"), t(locale, "tableStatus"), t(locale, "tableRawMessage"), t(locale, "tableOpened")]}
+        rows={data.gates.map((gate) => ({
+          key: gate.id,
+          cells: [
+            gate.kind,
+            <ActivityBadge key={`${gate.id}-activity`} activity={gate.activity} reason={gate.activityReason} locale={locale} />,
+            <StatusBadge key={gate.id} value={displayValueLabel(locale, gate.status)} tone={toneForStatus(gate.status)} />,
+            <RawMessageDetails key={`${gate.id}-message`} message={gate.message} locale={locale} />,
+            formatTime(gate.createdAt)
+          ],
+          cardTitle: gate.kind,
+          cardMeta: `${formatTime(gate.createdAt)} / ${activityReasonLabel(locale, gate.activityReason)}`,
+          cardSummary: summarizeRawMessage(gate.message, locale) ?? ""
+        }))}
+        empty={t(locale, "noGates")}
+      />
+    </div>
+  );
+}

package/plugins/autonomous-pr-loop/ui/src/pages/mission-control/MissionControl.tsx

@@ -0,0 +1,104 @@
+import type { JSX } from "react";
+import type { DashboardApi, MissionControlData, WorkflowDrillDownTarget } from "../../api.js";
+import { StatusBadge } from "../../components/StatusBadge.js";
+import { Collapsible } from "../../components/Collapsible.js";
+import { List } from "../../components/List.js";
+import { MetricRow } from "../../components/MetricRow.js";
+import { displayValueLabel, t } from "../../i18n.js";
+import {
+  PlanSelectionSummary,
+  ProfileDetails,
+  TimelineSummary,
+  selectionCompact,
+  workerScopeSummary,
+  workflowRoleShapeSummary,
+  type EffectiveLocale
+} from "../CommandCenterParts.js";
+import { EventLedger } from "../event-ledger/EventLedger.js";
+import { WorkerRuns } from "../worker-runs/WorkerRuns.js";
+import { WorkflowBoardView } from "./WorkflowBoard.js";
+
+export function MissionControl({
+  data,
+  api,
+  stale,
+  locale,
+  onNavigate
+}: {
+  data: MissionControlData;
+  api: DashboardApi;
+  stale: boolean;
+  locale: EffectiveLocale;
+  onNavigate?: (page: WorkflowDrillDownTarget["page"]) => void;
+}): JSX.Element {
+  const historicalGates = data.gates.filter((gate) => gate.activity === "historical");
+  const workflowRefreshKey = [
+    data.current.run?.id ?? "no-run",
+    data.current.run?.status ?? data.current.status,
+    data.current.run?.currentState ?? "no-state",
+    data.current.run?.updatedAt ?? "no-update",
+    data.events[0]?.id ?? "no-event",
+    data.decisions?.[0]?.id ?? "no-decision"
+  ].join(":");
+  return (
+    <div className="mission-grid">
+      <section className="summary-panel summary-panel--mission">
+        <MetricRow label={t(locale, "metricNextAction")} value={data.current.nextAction} tone="yellow" />
+        <MetricRow label={t(locale, "metricAutonomyBoundary")} value={displayValueLabel(locale, data.autonomy?.autonomyMode ?? "autonomous_until_gate")} tone="blue" />
+        <MetricRow label={t(locale, "metricAttention")} value={t(locale, "metricItems", { count: data.notifications?.filter((item) => item.severity !== "informational").length ?? 0 })} tone="yellow" />
+        <MetricRow
+          label={data.profile?.loopShape === "generic-loop" ? t(locale, "deliverableReadiness") : t(locale, "metricMergeReadiness")}
+          value={data.profile?.loopShape === "generic-loop" ? displayValueLabel(locale, data.profile.expectedDeliverable ?? data.profile.loopShape) : displayValueLabel(locale, data.mergeReadiness?.state ?? "manual")}
+          tone={data.profile?.loopShape === "generic-loop" || data.mergeReadiness?.ready ? "green" : "yellow"}
+        />
+        <MetricRow label={t(locale, "metricWorkflow")} value={workflowRoleShapeSummary(data, locale)} tone="blue" />
+      </section>
+      <WorkflowBoardView
+        api={api}
+        runId={data.current.run?.id}
+        refreshKey={workflowRefreshKey}
+        locale={locale}
+        onEvidenceAppended={() => undefined}
+        {...(onNavigate ? { onNavigate } : {})}
+      />
+      <section className="focus-panel">
+        <div>
+          <p className="eyebrow">{t(locale, "autonomyPosture")}</p>
+          <h2>{data.autonomy?.summary ?? t(locale, "autonomyFallback")}</h2>
+        </div>
+        <StatusBadge value={stale ? t(locale, "stale") : t(locale, "live")} tone={stale ? "yellow" : "green"} />
+      </section>
+      <Collapsible title={t(locale, "policyDetails")} chip={t(locale, "notifyRules", { count: data.autonomy?.notifyWhen.length ?? 0 })}>
+        <List items={[...(data.autonomy?.notifyWhen ?? []), ...(data.autonomy?.requiresConfirmation ?? [])]} locale={locale} />
+      </Collapsible>
+      <Collapsible title={t(locale, "workflowProfile")} chip={data.profile?.loopShape ?? "pr-loop"}>
+        <ProfileDetails data={data} locale={locale} />
+      </Collapsible>
+      <Collapsible title={t(locale, "selectedNextPr")} chip={selectionCompact(data.selection, data.plan?.selectedNext, locale)}>
+        <PlanSelectionSummary data={data.plan} selection={data.selection} locale={locale} />
+      </Collapsible>
+      {data.profile?.loopShape === "generic-loop" ? null : (
+        <Collapsible title={t(locale, "mergeEvidence")} chip={data.mergeReadiness?.ready ? t(locale, "allEvidenceReady") : t(locale, "missingCount", { count: data.mergeReadiness?.missingConditions.length ?? 0 })}>
+          <List items={[...(data.mergeReadiness?.evidence ?? []), ...(data.mergeReadiness?.missingConditions ?? [])]} locale={locale} />
+        </Collapsible>
+      )}
+      {historicalGates.length ? (
+        <Collapsible title={t(locale, "historicalGates")} chip={t(locale, "gatesChip", { count: historicalGates.length })}>
+          <List items={historicalGates.map((gate) => `${gate.kind}: ${gate.message}`)} locale={locale} />
+        </Collapsible>
+      ) : null}
+      <Collapsible title={t(locale, "timelineLatest")} chip={data.timelineSummary?.hasObservationGap ? t(locale, "timelineGap") : t(locale, "timelineNoGap")}>
+        <TimelineSummary data={data} locale={locale} />
+      </Collapsible>
+      <Collapsible title={t(locale, "workerRunsRepoScope")} chip={workerScopeSummary(data.workers, locale)}>
+        <>
+          <p className="scope-note">{t(locale, "workerScopePreview", { shown: Math.min(data.workers.length, 5), total: data.workers.length })}</p>
+          <WorkerRuns workers={data.workers.slice(0, 5)} api={api} locale={locale} hideScopeNote />
+        </>
+      </Collapsible>
+      <Collapsible title={t(locale, "pageEvents")} chip={t(locale, "metricItems", { count: data.events.length })}>
+        <EventLedger events={data.events.slice(0, 8)} locale={locale} />
+      </Collapsible>
+    </div>
+  );
+}