@beyondwork/docx-react-component 1.0.0

package/services/react-word-editor/components/harness-workspace-page.tsx

@@ -0,0 +1,715 @@
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import type { ReactNode } from "react";
+
+import {
+  getCertificationDashboardModel,
+  getCertificationTargetSelection,
+} from "../lib/certification-store";
+import {
+  getHarnessDashboardModel,
+  getHarnessEditorSessionModel,
+  getHarnessValidationRunModel,
+} from "../lib/harness-client";
+import { getWave10DashboardModel, getWave10RunDiagnostics } from "../lib/run-history";
+import { createHarnessSession, listHarnessSessions } from "../lib/storage";
+import {
+  buildWorkspaceHref,
+  parseWorkspacePanel,
+  type WorkspacePanel,
+  type WorkspaceRouteKind,
+} from "../lib/workspace-navigation";
+import { getCertificationBundleModel } from "../lib/certification-bundle";
+import { HarnessEditorSessionClient } from "./harness-editor-session-client";
+import { WorkspaceCertificationPanel } from "./workspace-certification-panel";
+
+type WorkspaceSearchParams = {
+  sessionId?: string;
+  panel?: string;
+  runId?: string;
+  targetType?: string;
+  targetId?: string;
+  saved?: string;
+};
+
+type HarnessWorkspacePageProps = {
+  routeKind: WorkspaceRouteKind;
+  requestedSessionId?: string;
+  searchParams: WorkspaceSearchParams;
+};
+
+type WorkspaceSourceOption = {
+  sourceId: string;
+  sourceKind: "fixture" | "scenario" | "upload";
+  sourceLabel: string;
+  available: boolean;
+  name: string;
+  releaseLabel: string;
+  releaseTone: "neutral" | "success" | "warning";
+  kindLabel: string;
+  primaryBadge?: string;
+  secondaryBadge?: string;
+  note?: string;
+};
+
+function mapSources(
+  model: Awaited<ReturnType<typeof getHarnessDashboardModel>>,
+): WorkspaceSourceOption[] {
+  const seen = new Set<string>();
+  return model.browseableSources
+    .map(({ source, descriptor }) => ({
+      sourceId: source.sourceId,
+      sourceKind: source.sourceKind,
+      sourceLabel: source.sourceLabel,
+      available: source.available,
+      name: source.name,
+      releaseLabel: descriptor.releaseLabel,
+      releaseTone: descriptor.releaseTone,
+      kindLabel: descriptor.kindLabel,
+      primaryBadge: descriptor.primaryBadge,
+      secondaryBadge: descriptor.secondaryBadge,
+      note: descriptor.note,
+    }))
+    .filter((option) => {
+      if (seen.has(option.sourceId)) return false;
+      seen.add(option.sourceId);
+      return true;
+    });
+}
+
+function selectDefaultSource(sources: WorkspaceSourceOption[]): WorkspaceSourceOption | undefined {
+  return (
+    sources.find(
+      (source) =>
+        source.available && source.sourceKind === "fixture" && source.primaryBadge === "F01",
+    ) ||
+    sources.find((source) => source.available && source.sourceKind === "fixture") ||
+    sources.find((source) => source.available)
+  );
+}
+
+async function resolveDemoSessionId(
+  requestedSessionId: string | undefined,
+  sources: WorkspaceSourceOption[],
+): Promise<string | undefined> {
+  if (requestedSessionId) {
+    return requestedSessionId;
+  }
+
+  const defaultSource = selectDefaultSource(sources);
+
+  if (!defaultSource) {
+    return undefined;
+  }
+
+  const existingSession = (await listHarnessSessions()).find(
+    (session) => session.sourceId === defaultSource.sourceId,
+  );
+
+  if (existingSession) {
+    return existingSession.sessionId;
+  }
+
+  return (await createHarnessSession(defaultSource.sourceId)).sessionId;
+}
+
+function buildCurrentRouteHref(input: {
+  routeKind: WorkspaceRouteKind;
+  sessionId: string;
+  panel: WorkspacePanel | null;
+  runId?: string;
+  targetType?: string;
+  targetId?: string;
+  saved?: string;
+}): string {
+  return buildWorkspaceHref({
+    routeKind: input.routeKind,
+    sessionId: input.sessionId,
+    panel: input.panel,
+    runId: input.runId,
+    targetType: input.targetType,
+    targetId: input.targetId,
+    saved: input.saved,
+  });
+}
+
+function getToneBadgeClass(tone: "neutral" | "success" | "warning" | "danger"): string {
+  if (tone === "success") {
+    return "bg-insert-soft text-insert";
+  }
+
+  if (tone === "warning") {
+    return "bg-warning-soft text-comment";
+  }
+
+  if (tone === "danger") {
+    return "bg-delete-soft text-danger";
+  }
+
+  return "bg-subtle text-secondary";
+}
+
+function renderMetricRow(label: string, value: string, detail: string) {
+  return (
+    <article className="flex items-start justify-between gap-3 px-3 py-2.5">
+      <div className="min-w-0 flex-1">
+        <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+          {label}
+        </p>
+        <p className="mt-1 text-xs leading-5 text-secondary">{detail}</p>
+      </div>
+      <p className="shrink-0 text-sm font-semibold text-primary">{value}</p>
+    </article>
+  );
+}
+
+function panelActionClass(emphasis = false): string {
+  if (emphasis) {
+    return "rounded-md bg-accent-soft px-2 py-1 text-xs font-medium text-accent";
+  }
+
+  return "rounded-md px-2 py-1 text-xs font-medium text-secondary transition-colors hover:bg-surface hover:text-primary";
+}
+
+function panelSurfaceClass(active = false): string {
+  return active ? "rounded-lg bg-accent-soft p-2.5" : "rounded-lg p-2.5 transition-colors hover:bg-surface";
+}
+
+function PanelSectionHeading(props: { eyebrow: string; title: string; detail?: string }) {
+  return (
+    <div>
+      <p className="text-[10px] font-semibold uppercase tracking-[0.14em] text-tertiary">
+        {props.eyebrow}
+      </p>
+      <p className="mt-1 text-sm font-medium text-primary">{props.title}</p>
+      {props.detail ? (
+        <p className="mt-1 text-xs leading-5 text-secondary">{props.detail}</p>
+      ) : null}
+    </div>
+  );
+}
+
+function PanelMetrics(props: {
+  items: Array<{ label: string; value: string; detail: string }>;
+}) {
+  return (
+    <div className="overflow-hidden rounded-lg ring-1 ring-border">
+      {props.items.map((item, index) => (
+        <div className={index > 0 ? "border-t border-border" : undefined} key={item.label}>
+          {renderMetricRow(item.label, item.value, item.detail)}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SourceBadge(props: { label: string; tone?: "neutral" | "success" | "warning" | "danger" }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${
+        getToneBadgeClass(props.tone || "neutral")
+      }`}
+    >
+      {props.label}
+    </span>
+  );
+}
+
+function getPanelLink(
+  routeKind: WorkspaceRouteKind,
+  sessionId: string,
+  panel: WorkspacePanel,
+  extras: {
+    runId?: string;
+    targetType?: string;
+    targetId?: string;
+    saved?: string;
+  } = {},
+): string {
+  return buildWorkspaceHref({
+    routeKind,
+    sessionId,
+    panel,
+    ...extras,
+  });
+}
+
+function DashboardPanel(props: {
+  routeKind: WorkspaceRouteKind;
+  sessionId: string;
+  model: Awaited<ReturnType<typeof getWave10DashboardModel>>;
+}) {
+  const blockedCoverage = [
+    ...props.model.releaseGateFixtures,
+    ...props.model.representativeScenarios,
+  ].filter((entry) => entry.status === "blocked").length;
+
+  return (
+    <div className="space-y-4 p-3">
+      <PanelSectionHeading
+        detail="Machine-backed Wave 10 status, manual review state, and run-history gaps without leaving the editor shell."
+        eyebrow="Dashboard"
+        title="Current release posture"
+      />
+
+      <PanelMetrics
+        items={[
+          {
+            label: "Regression",
+            value: props.model.regression.overallStatus,
+            detail: `${blockedCoverage} blocked coverage entries remain in the current bundle.`,
+          },
+          {
+            label: "Manual Surfaces",
+            value: `${props.model.manualCertification.reviewedSurfaces} / ${props.model.manualCertification.requiredSurfaces}`,
+            detail: `${props.model.manualCertification.pendingSurfaces} required surfaces still need Word review.`,
+          },
+          {
+            label: "Run History",
+            value: `${props.model.runHistory.summary.ok} / ${props.model.runHistory.summary.entries}`,
+            detail: `${props.model.runHistory.summary.gaps} unresolved route or validator gaps.`,
+          },
+        ]}
+      />
+
+      <section className="space-y-2">
+        <PanelSectionHeading
+          detail="Open exact certification or run detail surfaces from inside the runtime shell."
+          eyebrow="Attention queue"
+          title="Follow-up targets"
+        />
+        <div className="space-y-1">
+          {props.model.attentionQueue.slice(0, 6).map((entry) => (
+            <article className={panelSurfaceClass()} key={entry.sourceKey}>
+              <div className="flex flex-wrap items-center gap-2">
+                <SourceBadge label={entry.sourceKey} />
+                <SourceBadge label={entry.status} tone={entry.tone} />
+                {entry.featureClassFocus ? (
+                  <SourceBadge label={entry.featureClassFocus} />
+                ) : null}
+              </div>
+              <p className="mt-2 text-sm font-medium text-primary">{entry.sourceLabel}</p>
+              <p className="mt-1 text-xs leading-5 text-secondary">{entry.detail}</p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {entry.validationRunId ? (
+                  <Link
+                    className={panelActionClass(true)}
+                    href={getPanelLink(props.routeKind, props.sessionId, "certification", {
+                      targetId: entry.validationRunId,
+                      targetType: "validation-run",
+                    })}
+                  >
+                    Certification
+                  </Link>
+                ) : null}
+                {entry.validationRunId ? (
+                  <Link
+                    className={panelActionClass()}
+                    href={getPanelLink(props.routeKind, props.sessionId, "run", {
+                      runId: entry.validationRunId,
+                    })}
+                  >
+                    Run details
+                  </Link>
+                ) : null}
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function Wave10ReviewPanel(props: {
+  routeKind: WorkspaceRouteKind;
+  sessionId: string;
+  model: Awaited<ReturnType<typeof getWave10DashboardModel>>;
+}) {
+  const manualTargets = [...props.model.releaseGateFixtures, ...props.model.representativeScenarios]
+    .filter((target) => target.manualStatus.desktop.required || target.manualStatus.web.required)
+    .slice(0, 12);
+
+  return (
+    <div className="space-y-4 p-3">
+      <PanelSectionHeading
+        detail="Work through the current manual targets without leaving the live runtime shell."
+        eyebrow="Wave 10 review"
+        title="Word Desktop and Word Web"
+      />
+
+      <pre className="overflow-x-auto rounded-lg bg-surface px-3 py-3 text-xs leading-6 text-primary ring-1 ring-border">
+        cd /home/coder/docx-react-component && bash scripts/start-wave-10-local.sh
+      </pre>
+
+      <div className="space-y-1">
+        {manualTargets.map((target) => (
+          <article
+            className={panelSurfaceClass()}
+            key={`${target.sourceKey}:${target.validationRunId || target.runId || "missing"}`}
+          >
+            <div className="flex flex-wrap items-center gap-2">
+              <SourceBadge label={target.sourceKey} />
+              <SourceBadge label={target.status} tone={target.tone} />
+            </div>
+            <p className="mt-2 text-sm font-medium text-primary">{target.sourceLabel}</p>
+            <p className="mt-1 text-xs leading-5 text-secondary">{target.detail}</p>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {target.validationRunId ? (
+                <Link
+                  className={panelActionClass(true)}
+                  href={getPanelLink(props.routeKind, props.sessionId, "certification", {
+                    targetId: target.validationRunId,
+                    targetType: "validation-run",
+                  })}
+                >
+                  Certification
+                </Link>
+              ) : null}
+              {target.validationRunId ? (
+                <Link
+                  className={panelActionClass()}
+                  href={getPanelLink(props.routeKind, props.sessionId, "bundle", {
+                    runId: target.validationRunId,
+                  })}
+                >
+                  Bundle
+                </Link>
+              ) : null}
+              {target.validationRunId ? (
+                <Link
+                  className={panelActionClass()}
+                  href={getPanelLink(props.routeKind, props.sessionId, "run", {
+                    runId: target.validationRunId,
+                  })}
+                >
+                  Run
+                </Link>
+              ) : null}
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function RunPanel(props: {
+  routeKind: WorkspaceRouteKind;
+  sessionId: string;
+  runId: string;
+  runModel: Awaited<ReturnType<typeof getHarnessValidationRunModel>> | undefined;
+  diagnostics: Awaited<ReturnType<typeof getWave10RunDiagnostics>> | undefined;
+}) {
+  if (!props.runModel) {
+    return (
+      <div className="p-3 text-sm text-secondary">
+        Validation run <span className="font-mono">{props.runId}</span> was not found.
+      </div>
+    );
+  }
+
+  const packageFindings = Array.isArray(props.runModel.report.package?.findings)
+    ? props.runModel.report.package.findings
+    : [];
+  const sdkFindings = Array.isArray(props.runModel.report.sdk?.findings)
+    ? props.runModel.report.sdk.findings
+    : [];
+
+  return (
+    <div className="space-y-4 p-3">
+      <PanelSectionHeading
+        detail={props.runModel.run.runId}
+        eyebrow="Run details"
+        title={props.runModel.run.fileName}
+      />
+
+      <PanelMetrics
+        items={[
+          {
+            label: "Package findings",
+            value: String(props.runModel.run.summary.packageFindingCount),
+            detail: "Stored package-level validator findings.",
+          },
+          {
+            label: "SDK findings",
+            value: String(props.runModel.run.summary.sdkFindingCount),
+            detail: "Stored Open XML SDK findings.",
+          },
+        ]}
+      />
+
+      <div className="flex flex-wrap gap-2">
+        <Link
+          className={panelActionClass(true)}
+          href={getPanelLink(props.routeKind, props.sessionId, "certification", {
+            targetType: "validation-run",
+            targetId: props.runModel.run.runId,
+          })}
+        >
+          Open certification
+        </Link>
+        {props.diagnostics?.coverage?.validationRunId ? (
+          <Link
+            className={panelActionClass()}
+            href={getPanelLink(props.routeKind, props.sessionId, "bundle", {
+              runId: props.diagnostics.coverage.validationRunId,
+            })}
+          >
+            Open bundle
+          </Link>
+        ) : null}
+      </div>
+
+      <section className="space-y-3">
+        <PanelSectionHeading eyebrow="Findings" title="Validator payload" />
+        <pre className="overflow-x-auto rounded-lg bg-surface px-3 py-3 text-xs leading-6 text-primary ring-1 ring-border">
+          {JSON.stringify(
+            {
+              packageFindings,
+              sdkFindings,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </section>
+    </div>
+  );
+}
+
+function BundlePanel(props: {
+  model: Awaited<ReturnType<typeof getCertificationBundleModel>> | undefined;
+}) {
+  if (!props.model) {
+    return (
+      <div className="p-3 text-sm text-secondary">
+        Certification bundle data was not found for this run.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4 p-3">
+      <PanelSectionHeading
+        detail={`Anchor ${props.model.anchorEntry.sourceKey} · overall ${props.model.overallStatus}`}
+        eyebrow="Bundle"
+        title={props.model.bundleId}
+      />
+
+      <PanelMetrics
+        items={[
+          {
+            label: "Release fixtures",
+            value: `${props.model.summary.releaseGateFixturesPassed} / ${props.model.summary.releaseGateFixturesTotal}`,
+            detail: "Current fixture coverage in the Wave 10 bundle.",
+          },
+          {
+            label: "Manual surfaces",
+            value: `${props.model.summary.manualReviewSurfacesPassed} / ${props.model.summary.manualReviewSurfacesTotal}`,
+            detail: `${props.model.summary.pendingManualReviewEntries} targets still missing a full pass pair.`,
+          },
+        ]}
+      />
+
+      <section className="space-y-2">
+        <PanelSectionHeading eyebrow="Review targets" title="Manual sign-off" />
+        <div className="space-y-1">
+          {props.model.manualReviewEntries.slice(0, 10).map((entry) => (
+            <article className={panelSurfaceClass()} key={entry.sourceKey}>
+              <div className="flex flex-wrap items-center gap-2">
+                <SourceBadge label={entry.sourceKey} />
+                <SourceBadge label={entry.judgement.label} tone={entry.judgement.tone} />
+              </div>
+              <p className="mt-2 text-sm font-medium text-primary">{entry.sourceLabel}</p>
+              <p className="mt-1 text-xs leading-5 text-secondary">{entry.judgement.detail}</p>
+            </article>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+export async function HarnessWorkspacePage({
+  routeKind,
+  requestedSessionId,
+  searchParams,
+}: HarnessWorkspacePageProps) {
+  const currentPanel = parseWorkspacePanel(searchParams.panel);
+  const dashboardModel = await getHarnessDashboardModel();
+  const sources = mapSources(dashboardModel);
+
+  let activeSessionId =
+    routeKind === "editor" ? requestedSessionId : await resolveDemoSessionId(searchParams.sessionId, sources);
+
+  if (!activeSessionId) {
+    return (
+      <main className="min-h-screen bg-canvas p-6 text-primary">
+        <div className="mx-auto max-w-3xl rounded-lg bg-surface p-6 ring-1 ring-border">
+          <h1 className="text-2xl font-semibold">No review sources are available.</h1>
+          <p className="mt-3 text-sm leading-6 text-secondary">
+            The runtime shell has no fixtures, scenarios, or uploads to open yet.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  let selectedCertificationTarget:
+    | Awaited<ReturnType<typeof getCertificationTargetSelection>>
+    | undefined;
+  let runModel: Awaited<ReturnType<typeof getHarnessValidationRunModel>> | undefined;
+  let bundleModel: Awaited<ReturnType<typeof getCertificationBundleModel>> | undefined;
+
+  if (currentPanel === "certification") {
+    selectedCertificationTarget = await getCertificationTargetSelection({
+      targetType: searchParams.targetType,
+      targetId: searchParams.targetId,
+    });
+
+    if (
+      selectedCertificationTarget?.sessionId &&
+      selectedCertificationTarget.sessionId !== activeSessionId
+    ) {
+      redirect(
+        buildCurrentRouteHref({
+          routeKind,
+          sessionId: selectedCertificationTarget.sessionId,
+          panel: currentPanel,
+          targetType: searchParams.targetType,
+          targetId: searchParams.targetId,
+          saved: searchParams.saved,
+        }),
+      );
+    }
+  }
+
+  if ((currentPanel === "run" || currentPanel === "bundle") && searchParams.runId) {
+    runModel = await getHarnessValidationRunModel(searchParams.runId);
+
+    if (runModel?.session?.sessionId && runModel.session.sessionId !== activeSessionId) {
+      redirect(
+        buildCurrentRouteHref({
+          routeKind,
+          sessionId: runModel.session.sessionId,
+          panel: currentPanel,
+          runId: searchParams.runId,
+        }),
+      );
+    }
+  }
+
+  if (routeKind === "demo" && searchParams.sessionId !== activeSessionId) {
+    redirect(
+      buildCurrentRouteHref({
+        routeKind,
+        sessionId: activeSessionId,
+        panel: currentPanel,
+        runId: searchParams.runId,
+        targetType: searchParams.targetType,
+        targetId: searchParams.targetId,
+        saved: searchParams.saved,
+      }),
+    );
+  }
+
+  const sessionModel = await getHarnessEditorSessionModel(activeSessionId);
+
+  if (!sessionModel) {
+    if (routeKind === "editor") {
+      notFound();
+    }
+
+    const fallbackSessionId = await resolveDemoSessionId(undefined, sources);
+    if (!fallbackSessionId) {
+      notFound();
+    }
+
+    redirect(
+      buildCurrentRouteHref({
+        routeKind,
+        sessionId: fallbackSessionId,
+        panel: currentPanel,
+        runId: searchParams.runId,
+        targetType: searchParams.targetType,
+        targetId: searchParams.targetId,
+        saved: searchParams.saved,
+      }),
+    );
+  }
+
+  let sidePanel: ReactNode = null;
+
+  if (currentPanel === "dashboard") {
+    sidePanel = (
+      <DashboardPanel
+        model={await getWave10DashboardModel()}
+        routeKind={routeKind}
+        sessionId={sessionModel.session.sessionId}
+      />
+    );
+  } else if (currentPanel === "wave10-review") {
+    sidePanel = (
+      <Wave10ReviewPanel
+        model={await getWave10DashboardModel()}
+        routeKind={routeKind}
+        sessionId={sessionModel.session.sessionId}
+      />
+    );
+  } else if (currentPanel === "certification") {
+    const certificationModel = await getCertificationDashboardModel();
+    sidePanel = (
+      <WorkspaceCertificationPanel
+        model={certificationModel}
+        routeKind={routeKind}
+        saved={searchParams.saved}
+        selectedTarget={selectedCertificationTarget}
+        sessionId={sessionModel.session.sessionId}
+      />
+    );
+  } else if (currentPanel === "run" && searchParams.runId) {
+    sidePanel = (
+      <RunPanel
+        diagnostics={await getWave10RunDiagnostics(searchParams.runId)}
+        routeKind={routeKind}
+        runId={searchParams.runId}
+        runModel={runModel}
+        sessionId={sessionModel.session.sessionId}
+      />
+    );
+  } else if (currentPanel === "bundle" && searchParams.runId) {
+    bundleModel = await getCertificationBundleModel(searchParams.runId);
+    sidePanel = <BundlePanel model={bundleModel} />;
+  }
+
+  const latestExport = sessionModel.exports[0];
+  const latestValidation =
+    sessionModel.validationRuns.find((run) => run.exportId === latestExport?.exportId) ??
+    sessionModel.validationRuns[0];
+
+  return (
+    <main className="min-h-screen bg-canvas text-primary">
+      <HarnessEditorSessionClient
+        currentPanel={currentPanel}
+        documentId={sessionModel.session.documentId}
+        initialExportId={latestExport?.exportId}
+        initialValidation={{
+          exportId: latestValidation?.exportId,
+          isValid: latestValidation?.summary.isValid ?? false,
+          packageFindingCount: latestValidation?.summary.packageFindingCount ?? 0,
+          runId: latestValidation?.runId,
+          sdkFindingCount: latestValidation?.summary.sdkFindingCount ?? 0,
+        }}
+        routeKind={routeKind}
+        sessionId={sessionModel.session.sessionId}
+        sidePanel={sidePanel}
+        sourceId={sessionModel.source.sourceId}
+        sourceKind={sessionModel.source.sourceKind}
+        sourceLabel={sessionModel.source.sourceLabel}
+        sourceValidatorPolicy={sessionModel.source.validatorPolicy}
+        sources={sources}
+      />
+    </main>
+  );
+}