p-dev-harness 0.3.1 → 0.4.0

package/workspace-snapshot/files/apps/gui/components/custom/configure-experience.tsx

@@ -3,6 +3,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { SetupGuiViewModel } from "@/lib/setup-server";
 import type { RemoteSetupSummary } from "@/lib/setup-server";
+import type {
+  HarnessRepoProvisioningSummary,
+  ServiceConnectionSummaryMap,
+} from "@/lib/setup-server";
 import type { LocalConfigFormInput } from "@harness/setup/config-local-editor";
 import type { LinearSetupSummary } from "@harness/setup/linear-setup-summary";
 import type { VercelSetupSummary } from "@harness/setup/vercel-setup-summary";
@@ -15,11 +19,13 @@ import {
   type FirstRunStepId,
 } from "@harness/setup/first-run-readiness";
 import { computeCloudSecretsConfigStateFingerprint } from "@harness/setup/control-plane-readiness";
+import { markConfigureClient } from "@/lib/configure-navigation-timing";
 
 import { LAYOUT, RESPONSIVE, SPACING } from "@/lib/constants";
 import {
   clampGuidedDisplayStep,
   defaultGuidedDisplayStep,
+  getGuidedTransitionDirection,
   getPreviousGuidedDisplayStep,
   GUIDED_DISPLAY_STEP_AFTER_LOCAL_APPLY,
   GUIDED_DISPLAY_STEP_AFTER_LOCAL_READINESS,
@@ -31,6 +37,8 @@ import {
   shouldShowGuidedBackButton,
   type GuidedDisplayStepId,
   type GuidedLocalSetupStep,
+  deriveGuidedProgressStages,
+  guidedDisplayStepIndex,
 } from "@/lib/guided-setup";
 import {
   syncLinearSummaryFromEnvPresence,
@@ -40,9 +48,8 @@ import {
 import type { RemoteTargetWorkflowApplyResult } from "@harness/setup/remote-actions";
 import type { TargetWorkflowFinalizationResult } from "@harness/setup/target-workflow-finalization-types";
 import { Button } from "@/components/ui/button";
+import Link from "next/link";
 import { StatusBadge } from "@/components/custom/status-badge";
-import { ReadinessBanner } from "@/components/custom/readiness-banner";
-import { SetupDashboard } from "@/components/custom/setup-dashboard";
 import { ConfigureWorkflow } from "@/components/custom/configure-workflow";
 import { GuidedLinearWorkspaceCard } from "@/components/custom/guided-linear-workspace-card";
 import { GuidedVercelBridgeCard } from "@/components/custom/guided-vercel-bridge-card";
@@ -50,14 +57,22 @@ import { GuidedLocalReadinessCard } from "@/components/custom/guided-local-readi
 import { GuidedCloudSecretsCard } from "@/components/custom/guided-cloud-secrets-card";
 import { GuidedTargetWorkflowCard } from "@/components/custom/guided-target-workflow-card";
 import { SectionCard } from "@/components/custom/section-card";
-
-type ConfigureMode = "guided" | "advanced";
+import { postObservabilityAnalyticsEvent } from "@/lib/observability-client";
+import { bucketDurationMs } from "@harness/observability/privacy-schema.js";
+import { GuidedSetupProgress } from "@/components/custom/guided-setup-progress";
+import { GuidedStepTransition } from "@/components/custom/guided-step-transition";
+import { DataSharingPreferences } from "@/components/custom/data-sharing-preferences";
+import {
+  isUnifiedDataSharingEnabled,
+  type ObservabilityPreferencesSnapshot,
+} from "@/lib/observability-preferences";
 
 interface ConfigureExperienceProps {
   initialSummary: SetupGuiViewModel;
   initialRemoteSummary: RemoteSetupSummary;
   initialLinearSummary: LinearSetupSummary;
   initialVercelSummary: VercelSetupSummary;
+  initialHarnessProvisioningSummary: HarnessRepoProvisioningSummary;
   formDefaults: {
     env: {
       harnessConfigPath: string;
@@ -69,9 +84,12 @@ interface ConfigureExperienceProps {
         GITHUB_TOKEN: boolean;
         VERCEL_TOKEN: boolean;
       };
+      serviceConnectionSummaries: ServiceConnectionSummaryMap;
     };
     config: LocalConfigFormInput;
   };
+  observabilityNonce: string | null;
+  initialObservabilityPreferences: ObservabilityPreferencesSnapshot;
 }
 
 function buildControlPlaneContext(input: {
@@ -94,14 +112,29 @@ export function ConfigureExperience({
   initialRemoteSummary,
   initialLinearSummary,
   initialVercelSummary,
+  initialHarnessProvisioningSummary,
   formDefaults,
+  observabilityNonce,
+  initialObservabilityPreferences,
 }: ConfigureExperienceProps) {
-  const [mode, setMode] = useState<ConfigureMode>("guided");
+  const [observabilityPreferences, setObservabilityPreferences] =
+    useState(initialObservabilityPreferences);
+  const [setupDisclosureComplete, setSetupDisclosureComplete] = useState(
+    initialObservabilityPreferences.disclosureShown,
+  );
   const [summary, setSummary] = useState(initialSummary);
   const [remoteSummary, setRemoteSummary] = useState(initialRemoteSummary);
   const [linearSummary, setLinearSummary] = useState(initialLinearSummary);
   const [vercelSummary, setVercelSummary] = useState(initialVercelSummary);
+  const [harnessProvisioningSummary, setHarnessProvisioningSummary] = useState(
+    initialHarnessProvisioningSummary,
+  );
   const [uiState, setUiState] = useState<FirstRunReadinessUiState>({});
+
+  useEffect(() => {
+    markConfigureClient("configure_content_ready");
+  }, []);
+
   const controlPlaneContext = useMemo(
     () =>
       buildControlPlaneContext({
@@ -120,6 +153,7 @@ export function ConfigureExperience({
           remoteSummary: initialRemoteSummary,
           uiState: {},
           staleSmokeDiagnostics: initialRemoteSummary.staleSmokeDiagnostics,
+          harnessProvisioningSummary: initialHarnessProvisioningSummary,
           controlPlaneContext: buildControlPlaneContext({
             linearSummary: initialLinearSummary,
             vercelSummary: initialVercelSummary,
@@ -136,6 +170,93 @@ export function ConfigureExperience({
   >({});
   const [workflowAwaitingMerge, setWorkflowAwaitingMerge] = useState(false);
   const previousReadinessStepRef = useRef<FirstRunStepId | null>(null);
+  const pinnedGuidedDisplayStepRef = useRef<GuidedDisplayStepId | null>(null);
+  const [awaitingContinueStep, setAwaitingContinueStep] = useState<
+    | "connect-services"
+    | "linear-workspace"
+    | "vercel-bridge"
+    | "choose-target-repos"
+    | "local-readiness"
+    | "cloud-secrets"
+    | "target-workflow"
+    | null
+  >(null);
+
+  const clearPinnedGuidedDisplayStep = useCallback(() => {
+    pinnedGuidedDisplayStepRef.current = null;
+  }, []);
+
+  type AwaitingContinueStep = NonNullable<typeof awaitingContinueStep>;
+
+  const holdGuidedStepForContinue = useCallback((step: AwaitingContinueStep) => {
+    setAwaitingContinueStep(step);
+  }, []);
+  const stepVisitCountsRef = useRef<Partial<Record<GuidedDisplayStepId, number>>>(
+    {},
+  );
+  const lastRecordedStepViewRef = useRef<GuidedDisplayStepId | null>(null);
+  const stepStartedAtRef = useRef<Partial<Record<GuidedDisplayStepId, number>>>(
+    {},
+  );
+
+  const recordStepViewed = useCallback(
+    (stepId: GuidedDisplayStepId) => {
+      lastRecordedStepViewRef.current = stepId;
+      const visitOrdinal = stepVisitCountsRef.current[stepId] ?? 0;
+      stepVisitCountsRef.current[stepId] = visitOrdinal + 1;
+      stepStartedAtRef.current[stepId] = Date.now();
+      const stepNumber = guidedDisplayStepIndex(stepId) + 1;
+      const payload = {
+        type: "p_dev_configure_step_viewed" as const,
+        stepId,
+        stepNumber,
+        resumed: false as const,
+        revisited: false as const,
+      };
+      if (observabilityNonce) {
+        void postObservabilityAnalyticsEvent(payload, observabilityNonce);
+      }
+    },
+    [observabilityNonce],
+  );
+
+  const recordStepCompleted = useCallback(
+    (
+      stepId: GuidedDisplayStepId,
+      outcome:
+        | "success"
+        | "skipped_already_complete"
+        | "user_correctable_blocked"
+        | "operational_failure"
+        | "unknown" = "success",
+    ) => {
+      if (!observabilityNonce) {
+        return;
+      }
+      const startedAt = stepStartedAtRef.current[stepId];
+      const durationBucket = bucketDurationMs(
+        startedAt ? Date.now() - startedAt : -1,
+      );
+      const stepNumber = guidedDisplayStepIndex(stepId) + 1;
+      void postObservabilityAnalyticsEvent(
+        {
+          type: "p_dev_configure_step_completed",
+          stepId,
+          stepNumber,
+          resumed: false as const,
+          revisited: false as const,
+          durationBucket,
+          completionOutcome: outcome,
+        },
+        observabilityNonce,
+      );
+    },
+    [observabilityNonce],
+  );
+
+  useEffect(() => {
+    recordStepViewed(displayedGuidedStep);
+  }, [displayedGuidedStep, recordStepViewed]);
 
   const readiness = useMemo(
     () =>
@@ -144,9 +265,10 @@ export function ConfigureExperience({
         remoteSummary,
         uiState,
         staleSmokeDiagnostics: remoteSummary.staleSmokeDiagnostics,
+        harnessProvisioningSummary,
         controlPlaneContext,
       }),
-    [summary, remoteSummary, uiState, controlPlaneContext],
+    [summary, remoteSummary, uiState, harnessProvisioningSummary, controlPlaneContext],
   );
 
   useEffect(() => {
@@ -156,22 +278,45 @@ export function ConfigureExperience({
       previousReadinessStepRef.current = nextStepId;
       return;
     }
+    if (awaitingContinueStep !== null) {
+      previousReadinessStepRef.current = nextStepId;
+      return;
+    }
     if (shouldReadinessAdvanceGuidedDisplay(previousStepId, nextStepId)) {
-      setDisplayedGuidedStep(
-        defaultGuidedDisplayStep({
-          currentStepId: nextStepId,
-          summary,
-        }),
-      );
+      if (pinnedGuidedDisplayStepRef.current === null) {
+        setDisplayedGuidedStep(
+          defaultGuidedDisplayStep({
+            currentStepId: nextStepId,
+            summary,
+          }),
+        );
+      }
     }
     previousReadinessStepRef.current = nextStepId;
-  }, [readiness.currentStepId, summary]);
+  }, [awaitingContinueStep, readiness.currentStepId, summary]);
 
   useEffect(() => {
+    if (awaitingContinueStep !== null) {
+      return;
+    }
+    const clamped = clampGuidedDisplayStep({
+      target: displayedGuidedStep,
+      currentStepId: readiness.currentStepId,
+    });
+    if (clamped !== displayedGuidedStep) {
+      setDisplayedGuidedStep(clamped);
+      pinnedGuidedDisplayStepRef.current = clamped;
+    }
+  }, [awaitingContinueStep, displayedGuidedStep, readiness.currentStepId]);
+
+  useEffect(() => {
+    if (awaitingContinueStep !== null) {
+      return;
+    }
     if (readiness.readyForFirstRun) {
       setDisplayedGuidedStep("ready-for-first-run");
     }
-  }, [readiness.readyForFirstRun]);
+  }, [awaitingContinueStep, readiness.readyForFirstRun]);
 
   useEffect(() => {
     if (
@@ -216,6 +361,7 @@ export function ConfigureExperience({
         GITHUB_TOKEN: summary.envKeyPresence.GITHUB_TOKEN,
         VERCEL_TOKEN: summary.envKeyPresence.VERCEL_TOKEN,
       },
+      serviceConnectionSummaries: formDefaults.env.serviceConnectionSummaries,
     };
   }, [
     formDefaults.env,
@@ -243,11 +389,21 @@ export function ConfigureExperience({
 
   const handleRemoteUiStateChange = useCallback(
     (state: {
+      cloudSecretsPreviewOpened?: boolean;
       remoteSecretPreviewStale?: boolean;
       cloudSecretsApplyEvidence?: CloudSecretsApplyEvidence;
     }) => {
       setUiState((current) => {
         let next = current;
+        if (
+          state.cloudSecretsPreviewOpened !== undefined &&
+          current.cloudSecretsPreviewOpened !== state.cloudSecretsPreviewOpened
+        ) {
+          next = {
+            ...next,
+            cloudSecretsPreviewOpened: state.cloudSecretsPreviewOpened,
+          };
+        }
         if (
           state.remoteSecretPreviewStale !== undefined &&
           current.remoteSecretPreviewStale !== state.remoteSecretPreviewStale
@@ -305,6 +461,9 @@ export function ConfigureExperience({
   );
 
   const handleConnectServicesComplete = useCallback(async () => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("connect-services");
     setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_CONNECT_SERVICES);
     try {
       const response = await fetch("/api/setup/linear-summary");
@@ -315,31 +474,50 @@ export function ConfigureExperience({
     } catch {
       // Fall back to env presence synced via handleSummaryUpdated after Step 1 save.
     }
-  }, []);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
+
+  const handleHarnessProvisioningSummaryUpdated = useCallback(
+    (nextSummary: HarnessRepoProvisioningSummary) => {
+      setHarnessProvisioningSummary(nextSummary);
+    },
+    [],
+  );
 
   const handleLinearWorkspaceContinue = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("linear-workspace");
     setDisplayedGuidedStep("vercel-bridge");
-  }, []);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
 
   const handleVercelBridgeContinue = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("vercel-bridge");
     setDisplayedGuidedStep("choose-target-repos");
-  }, []);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
 
   const handleLocalReadinessReviewed = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("local-readiness");
     setUiState((current) => ({
       ...current,
       localReadinessReviewed: true,
     }));
     setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_LOCAL_READINESS);
-  }, []);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
 
   const handleCloudSecretsReviewed = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("cloud-secrets");
     setUiState((current) => ({
       ...current,
       cloudSecretsReviewed: true,
     }));
     setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_CLOUD_SECRETS);
-  }, []);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
 
   const handleSummaryUpdated = useCallback((nextSummary: SetupGuiViewModel) => {
     setSummary(nextSummary);
@@ -370,7 +548,9 @@ export function ConfigureExperience({
         ...current,
         linearPreviewStale: true,
         vercelPreviewStale: true,
-        remoteSecretPreviewStale: true,
+        remoteSecretPreviewStale: current.cloudSecretsPreviewOpened
+          ? true
+          : current.remoteSecretPreviewStale,
         cloudSecretsApplyEvidence: invalidateEvidence
           ? undefined
           : current.cloudSecretsApplyEvidence,
@@ -379,10 +559,25 @@ export function ConfigureExperience({
   }, [linearSummary, remoteSummary.harnessDispatchRepo, vercelSummary]);
 
   const handleGuidedWorkflowSetupComplete = useCallback(() => {
-    setWorkflowAwaitingMerge(false);
-    setWorkflowInstallPendingByRepo({});
-    setWorkflowFinalizationByRepo({});
-  }, []);
+    recordStepCompleted("target-workflow");
+    void fetch("/api/setup/complete-initial-setup", { method: "POST" })
+      .then(async (response) => {
+        if (!response.ok) {
+          return;
+        }
+        const payload = (await response.json()) as { completed?: boolean };
+        if (payload.completed) {
+          window.location.assign("/workflow");
+        }
+      })
+      .catch(() => undefined);
+    if (observabilityNonce) {
+      void postObservabilityAnalyticsEvent(
+        { type: "p_dev_setup_completed" },
+        observabilityNonce,
+      );
+    }
+  }, [observabilityNonce, recordStepCompleted]);
 
   const handleGuidedLocalApplySuccess = useCallback(() => {
     setUiState((current) => ({
@@ -390,12 +585,29 @@ export function ConfigureExperience({
       localReadinessReviewed: false,
       cloudSecretsReviewed: false,
       cloudSecretsApplyEvidence: undefined,
-      remoteSecretPreviewStale: true,
+      remoteSecretPreviewStale: current.cloudSecretsPreviewOpened
+        ? true
+        : false,
       localPreviewStale: false,
     }));
-    setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_LOCAL_APPLY);
   }, []);
 
+  const handleChooseTargetReposContinue = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    recordStepCompleted("choose-target-repos");
+    setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_LOCAL_APPLY);
+  }, [clearPinnedGuidedDisplayStep, recordStepCompleted]);
+
+  const handleTargetWorkflowContinue = useCallback(() => {
+    clearPinnedGuidedDisplayStep();
+    setAwaitingContinueStep(null);
+    setWorkflowAwaitingMerge(false);
+    setWorkflowInstallPendingByRepo({});
+    setWorkflowFinalizationByRepo({});
+    setDisplayedGuidedStep(GUIDED_DISPLAY_STEP_AFTER_WORKFLOW_READY);
+  }, [clearPinnedGuidedDisplayStep]);
+
   const handleGuidedLocalStepChange = useCallback((step: GuidedLocalSetupStep) => {
     setDisplayedGuidedStep(step);
   }, []);
@@ -413,7 +625,9 @@ export function ConfigureExperience({
           localReadinessReviewed: false,
           cloudSecretsReviewed: false,
           cloudSecretsApplyEvidence: undefined,
-          remoteSecretPreviewStale: true,
+          remoteSecretPreviewStale: current.cloudSecretsPreviewOpened
+            ? true
+            : current.remoteSecretPreviewStale,
           linearPreviewStale: step === "connect-services" || step === "linear-workspace"
             ? true
             : current.linearPreviewStale,
@@ -431,7 +645,9 @@ export function ConfigureExperience({
           ...current,
           cloudSecretsReviewed: false,
           cloudSecretsApplyEvidence: undefined,
-          remoteSecretPreviewStale: true,
+          remoteSecretPreviewStale: current.cloudSecretsPreviewOpened
+            ? true
+            : current.remoteSecretPreviewStale,
         }));
       }
     },
@@ -448,6 +664,7 @@ export function ConfigureExperience({
       currentStepId: readiness.currentStepId,
     });
     setDisplayedGuidedStep(nextDisplay);
+    pinnedGuidedDisplayStepRef.current = nextDisplay;
     invalidateDownstreamFromGuidedStep(nextDisplay);
   }, [
     displayedGuidedStep,
@@ -455,10 +672,38 @@ export function ConfigureExperience({
     readiness.currentStepId,
   ]);
 
-  const showGuidedBackButton =
-    mode === "guided" && shouldShowGuidedBackButton(displayedGuidedStep);
+  const showGuidedBackButton = shouldShowGuidedBackButton(displayedGuidedStep);
+
+  const guidedProgressStages = useMemo(
+    () =>
+      deriveGuidedProgressStages({
+        displayedStep: displayedGuidedStep,
+        readinessCurrentStepId: readiness.currentStepId,
+        readinessSteps: readiness.steps,
+        readyForFirstRun: readiness.readyForFirstRun,
+        summary,
+        controlPlaneContext,
+      }),
+    [
+      controlPlaneContext,
+      displayedGuidedStep,
+      readiness.currentStepId,
+      readiness.readyForFirstRun,
+      readiness.steps,
+      summary,
+    ],
+  );
 
   const actionPanelRef = useRef<HTMLDivElement | null>(null);
+  const previousDisplayedStepRef = useRef(displayedGuidedStep);
+  const guidedTransitionDirection = getGuidedTransitionDirection(
+    previousDisplayedStepRef.current,
+    displayedGuidedStep,
+  );
+
+  useEffect(() => {
+    previousDisplayedStepRef.current = displayedGuidedStep;
+  }, [displayedGuidedStep]);
 
   const renderGuidedActionPanel = () => {
     switch (displayedGuidedStep) {
@@ -470,8 +715,15 @@ export function ConfigureExperience({
             guidedStep="connect-services"
             initialEnv={initialEnvForWorkflow}
             initialConfig={formDefaults.config}
+            initialHarnessProvisioningSummary={harnessProvisioningSummary}
             onSummaryUpdated={handleSummaryUpdated}
+            onHarnessProvisioningSummaryUpdated={
+              handleHarnessProvisioningSummaryUpdated
+            }
             onConnectServicesComplete={handleConnectServicesComplete}
+            onConnectServicesSucceeded={() =>
+              holdGuidedStepForContinue("connect-services")
+            }
           />
         );
       case "linear-workspace":
@@ -480,9 +732,16 @@ export function ConfigureExperience({
             readiness={readiness}
             initialSummary={linearSummary}
             linearApiKeyConfigured={summary.envKeyPresence.LINEAR_API_KEY}
+            availableRepos={formDefaults.config.repos
+              .filter((repo) => repo.id.trim() && repo.targetRepo.trim())
+              .map((repo) => ({
+                id: repo.id.trim(),
+                targetRepo: repo.targetRepo.trim(),
+              }))}
             onSummaryUpdated={setLinearSummary}
             onUiStateChange={handleLinearUiStateChange}
             onContinue={handleLinearWorkspaceContinue}
+            onStepCompleted={() => holdGuidedStepForContinue("linear-workspace")}
           />
         );
       case "vercel-bridge":
@@ -493,6 +752,7 @@ export function ConfigureExperience({
             onSummaryUpdated={setVercelSummary}
             onUiStateChange={handleVercelUiStateChange}
             onContinue={handleVercelBridgeContinue}
+            onStepCompleted={() => holdGuidedStepForContinue("vercel-bridge")}
           />
         );
       case "choose-target-repos":
@@ -503,11 +763,19 @@ export function ConfigureExperience({
             guidedStep="choose-target-repos"
             initialEnv={initialEnvForWorkflow}
             initialConfig={formDefaults.config}
+            initialHarnessProvisioningSummary={harnessProvisioningSummary}
             highlightStaleDispatch={staleDispatchRepoNeedsAttention}
             highlightStaleTarget={staleTargetRepoNeedsAttention}
             onSummaryUpdated={handleSummaryUpdated}
+            onHarnessProvisioningSummaryUpdated={
+              handleHarnessProvisioningSummaryUpdated
+            }
             onUiStateChange={handleLocalUiStateChange}
             onGuidedLocalApplySuccess={handleGuidedLocalApplySuccess}
+            onContinue={handleChooseTargetReposContinue}
+            onStepCompleted={() =>
+              holdGuidedStepForContinue("choose-target-repos")
+            }
             localSetupFilesExist={localSetupFilesExist(summary)}
           />
         );
@@ -516,6 +784,7 @@ export function ConfigureExperience({
           <GuidedLocalReadinessCard
             readiness={readiness}
             onContinue={handleLocalReadinessReviewed}
+            onStepCompleted={() => holdGuidedStepForContinue("local-readiness")}
           />
         );
       case "cloud-secrets":
@@ -524,12 +793,14 @@ export function ConfigureExperience({
             readiness={readiness}
             setupSummary={summary}
             controlPlaneContext={controlPlaneContext}
+            cloudSecretsPreviewOpened={uiState.cloudSecretsPreviewOpened}
             remoteSecretPreviewStale={uiState.remoteSecretPreviewStale}
             cloudSecretsApplyEvidence={uiState.cloudSecretsApplyEvidence}
             initialSummary={remoteSummary}
             onSummaryUpdated={setRemoteSummary}
             onUiStateChange={handleRemoteUiStateChange}
             onContinue={handleCloudSecretsReviewed}
+            onStepCompleted={() => holdGuidedStepForContinue("cloud-secrets")}
             blockedByUpstream={readiness.remoteSetupBlockedByUpstream}
             onGoToHarnessRepo={() => setDisplayedGuidedStep("choose-target-repos")}
             onGoToConnectServices={() =>
@@ -548,6 +819,8 @@ export function ConfigureExperience({
             finalizationByRepo={workflowFinalizationByRepo}
             onPendingInstallChange={setWorkflowInstallPendingByRepo}
             onFinalizationChange={setWorkflowFinalizationByRepo}
+            onStepCompleted={() => holdGuidedStepForContinue("target-workflow")}
+            onContinue={handleTargetWorkflowContinue}
             blockedByUpstream={readiness.remoteSetupBlockedByUpstream}
           />
         );
@@ -555,45 +828,62 @@ export function ConfigureExperience({
         return (
           <SectionCard
             title="Setup complete"
-            description="Harness setup is ready for a future first run."
+            description="Harness setup is ready for workflow configuration and future runs."
           >
             <div className={SPACING.stackSm}>
               <StatusBadge label="Setup complete" variant="success" />
               <p className="text-sm text-muted-foreground">
                 Your harness setup is ready. The target workflow install finished
                 automatically when production verification succeeded.
-                A later milestone can add a safe first-issue dry run or no-op
-                harness validation.
               </p>
               <p className="text-sm text-muted-foreground">
                 {readiness.prohibitedActionsNote}
               </p>
+              <Button asChild>
+                <Link href="/workflow">Continue to Workflow</Link>
+              </Button>
             </div>
           </SectionCard>
         );
     }
   };
 
-  const configBadgeLabel = summary.overview.operatorConfigResolved
-    ? "Config resolved"
-    : summary.overview.configResolved
-      ? "Template config loaded"
-      : "Not configured yet";
-  const configBadgeVariant = summary.overview.operatorConfigResolved
-    ? "success"
-    : "secondary";
-
   const guidedStatusBadgeLabel = readiness.readyForFirstRun
     ? "Setup complete"
     : workflowAwaitingMerge
       ? "Finalizing workflow install"
       : "Setup in progress";
 
+  const handleDataSharingOnboardingComplete = useCallback(
+    (preferences: ObservabilityPreferencesSnapshot) => {
+      setObservabilityPreferences(preferences);
+      setSetupDisclosureComplete(true);
+      if (isUnifiedDataSharingEnabled(preferences)) {
+        lastRecordedStepViewRef.current = null;
+        recordStepViewed(displayedGuidedStep);
+      }
+    },
+    [displayedGuidedStep, recordStepViewed],
+  );
+
+  if (!setupDisclosureComplete) {
+    return (
+      <div className={LAYOUT.configureContent}>
+        <DataSharingPreferences
+          mode="onboarding"
+          nonce={observabilityNonce}
+          initialPreferences={observabilityPreferences}
+          onOnboardingComplete={handleDataSharingOnboardingComplete}
+        />
+      </div>
+    );
+  }
+
   return (
-    <div className={LAYOUT.sectionStack}>
+    <div className={`${LAYOUT.configureContent} ${LAYOUT.sectionStack}`}>
       <section className={SPACING.section}>
         <div className={SPACING.stackSm}>
-          <h2 className={RESPONSIVE.pageTitle}>Settings / Configure</h2>
+          <h2 className={RESPONSIVE.pageTitle}>Initial Harness Configuration</h2>
           <p className={RESPONSIVE.pageDescription}>
             Guided first-run readiness for the Product Development Harness.
             Complete local setup, local readiness checks, cloud secrets, and
@@ -618,54 +908,26 @@ export function ConfigureExperience({
                 label={guidedStatusBadgeLabel}
                 variant={readiness.readyForFirstRun ? "success" : "warning"}
               />
-              {mode === "advanced" ? (
-                <StatusBadge
-                  label={configBadgeLabel}
-                  variant={configBadgeVariant}
-                />
-              ) : null}
             </div>
           </div>
-          {mode === "guided" ? (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setMode("advanced")}
-            >
-              Advanced checklist view
-            </Button>
-          ) : (
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => setMode("guided")}
-            >
-              Back to guided flow
-            </Button>
-          )}
         </div>
       </section>
 
-      {mode === "advanced" ? <ReadinessBanner readiness={readiness} /> : null}
+      <section className={SPACING.section}>
+        <GuidedSetupProgress stages={guidedProgressStages} />
+      </section>
 
-      {mode === "guided" ? (
-        <div className={SPACING.section}>
-          <div ref={actionPanelRef}>{renderGuidedActionPanel()}</div>
+      <div className={SPACING.section}>
+        <div ref={actionPanelRef}>
+          <GuidedStepTransition
+            stepKey={displayedGuidedStep}
+            direction={guidedTransitionDirection}
+            panelRef={actionPanelRef}
+          >
+            {renderGuidedActionPanel()}
+          </GuidedStepTransition>
         </div>
-      ) : (
-        <SetupDashboard
-          summary={summary}
-          remoteSummary={remoteSummary}
-          readiness={readiness}
-          formDefaults={formDefaults}
-          onSummaryUpdated={setSummary}
-          onRemoteSummaryUpdated={setRemoteSummary}
-          onLocalUiStateChange={handleLocalUiStateChange}
-          onRemoteUiStateChange={handleRemoteUiStateChange}
-        />
-      )}
+      </div>
     </div>
   );
 }