p-dev-harness 0.3.1 → 0.4.0

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

@@ -4,11 +4,19 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useReducedMotion } from "framer-motion";
 import type { LocalConfigFormInput } from "@harness/setup/config-local-editor";
 import { prepareGuidedConfigFormInput } from "@harness/setup/guided-config-form";
+import {
+  isHarnessRepoInheritedFromStep1,
+  isHarnessRepoReadyForGuidedStep4,
+} from "@harness/setup/harness-step-readiness";
 import type {
   LocalSetupFormPayload,
   LocalSetupPreviewResult,
 } from "@harness/setup/local-apply-actions";
-import type { SetupGuiViewModel } from "@/lib/setup-server";
+import type {
+  HarnessRepoProvisioningSummary,
+  ServiceConnectionSummaryMap,
+  SetupGuiViewModel,
+} from "@/lib/setup-server";
 import { FORM, SPACING } from "@/lib/constants";
 import { GUIDED_SETUP_STEP_COUNT } from "@/lib/guided-setup";
 import { Button } from "@/components/ui/button";
@@ -27,11 +35,17 @@ import {
   TargetRepoConfigForm,
   type RepoVerificationUi,
 } from "@/components/custom/target-repo-config-form";
+import {
+  TargetRepoCreateConnect,
+  type TargetRepoCreatedSummary,
+  type TargetRepoSelectionMode,
+} from "@/components/custom/target-repo-create-connect";
 import { LocalWritePreview } from "@/components/custom/local-write-preview";
 import { LocalWriteConfirmation } from "@/components/custom/local-write-confirmation";
 import { ReviewGeneratedFilesDisclosure } from "@/components/custom/review-generated-files-disclosure";
 import { SetupApplyResult } from "@/components/custom/setup-apply-result";
-import { GuidedStepTransition } from "@/components/custom/guided-step-transition";
+import { GuidedOperationPanel, buildGuidedOperationPhases } from "@/components/custom/guided-operation-panel";
+import { GuidedStepSuccessPanel } from "@/components/custom/guided-step-success-panel";
 import {
   createGuidedRepoRowId,
   guidedRowsFromConfig,
@@ -56,17 +70,70 @@ interface ConfigureWorkflowProps {
     savedHarnessDispatchRepository?: string;
     suggestedHarnessDispatchRepo?: string;
     secretPresence: EnvironmentFormPresence;
+    serviceConnectionSummaries: ServiceConnectionSummaryMap;
   };
   initialConfig: LocalConfigFormInput;
+  initialHarnessProvisioningSummary: HarnessRepoProvisioningSummary;
   highlightStaleDispatch?: boolean;
   highlightStaleTarget?: boolean;
   onSummaryUpdated?: (summary: SetupGuiViewModel) => void;
+  onHarnessProvisioningSummaryUpdated?: (
+    summary: HarnessRepoProvisioningSummary,
+  ) => void;
   onUiStateChange?: (state: { localPreviewStale: boolean }) => void;
   onGuidedLocalApplySuccess?: () => void;
   onConnectServicesComplete?: () => void;
+  onConnectServicesSucceeded?: () => void;
+  onContinue?: () => void;
+  onStepCompleted?: () => void;
   localSetupFilesExist?: boolean;
 }
 
+const HARNESS_PROVISIONING_PHASES = [
+  "Connecting to GitHub",
+  "Repository reconciliation",
+  "Object import",
+  "Commit creation",
+  "Push",
+  "Remote verification",
+  "Saving configuration",
+] as const;
+
+const LEGACY_HARNESS_PROVISIONING_PHASE_LABELS: Record<string, number> = {
+  "Creating private workspace": 1,
+  "Preparing workspace snapshot": 2,
+  "Uploading workspace": 3,
+  "Verifying workspace": 5,
+  "Saving configuration": 6,
+};
+
+const HARNESS_PROVISIONING_PHASE_INDEX = new Map(
+  HARNESS_PROVISIONING_PHASES.map((label, index) => [label, index]),
+);
+
+function resolveHarnessProvisioningPhaseIndex(message: string | null): number {
+  if (!message) {
+    return 0;
+  }
+  const directMatch = HARNESS_PROVISIONING_PHASES.find((label) =>
+    message.startsWith(label),
+  );
+  if (directMatch) {
+    return HARNESS_PROVISIONING_PHASE_INDEX.get(directMatch) ?? 0;
+  }
+  const legacyMatch = Object.entries(LEGACY_HARNESS_PROVISIONING_PHASE_LABELS).find(
+    ([label]) => message.startsWith(label),
+  );
+  return legacyMatch ? legacyMatch[1] : 0;
+}
+
+function createHarnessProvisioningOperationId(): string {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return `provision-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
 const SERVICE_API_MAP: Record<ServiceKey, "linear" | "cursor" | "github" | "vercel"> = {
   LINEAR_API_KEY: "linear",
   CURSOR_API_KEY: "cursor",
@@ -87,23 +154,90 @@ const SERVICE_VALUE_KEY: Record<
   VERCEL_TOKEN: "vercelToken",
 };
 
+import { serviceVerificationFromSummaries } from "@/lib/verification-state";
+
+export { serviceVerificationFromSummaries };
+
+export function shouldAutoReverifySavedService(input: {
+  key: ServiceKey;
+  presence: EnvironmentFormPresence;
+  envValues: EnvironmentFormValues;
+  summaries: ServiceConnectionSummaryMap;
+  verification: ServiceVerificationMap;
+}): boolean {
+  if (!input.presence[input.key]) {
+    return false;
+  }
+  if (input.envValues[SERVICE_VALUE_KEY[input.key]].trim()) {
+    return false;
+  }
+  if (input.verification[input.key].state !== "unchecked") {
+    return false;
+  }
+  const status = input.summaries[input.key]?.status;
+  return status === undefined || status === "missing" || status === "unknown" || status === "stale";
+}
+
+export function isServiceConnectionReady(input: {
+  key: ServiceKey;
+  presence: EnvironmentFormPresence;
+  verification: ServiceVerificationMap;
+  envValues: EnvironmentFormValues;
+}): boolean {
+  if (!input.presence[input.key]) {
+    return false;
+  }
+  if (input.verification[input.key].state !== "connected") {
+    return false;
+  }
+  const typedValue = input.envValues[SERVICE_VALUE_KEY[input.key]].trim();
+  if (typedValue) {
+    return isServiceVerifiedForValue(input.verification[input.key], typedValue);
+  }
+  return true;
+}
+
 export function ConfigureWorkflow({
   mode = "advanced",
   guidedStep: guidedStepProp,
   onGuidedStepChange,
   initialEnv,
   initialConfig,
+  initialHarnessProvisioningSummary,
   highlightStaleDispatch = false,
   highlightStaleTarget = false,
   onSummaryUpdated,
+  onHarnessProvisioningSummaryUpdated,
   onUiStateChange,
   onGuidedLocalApplySuccess,
   onConnectServicesComplete,
+  onConnectServicesSucceeded,
+  onContinue,
+  onStepCompleted,
   localSetupFilesExist = false,
 }: ConfigureWorkflowProps) {
   const prefersReducedMotion = useReducedMotion();
   const guidedTopRef = useRef<HTMLDivElement | null>(null);
   const guidedRepoRowCounter = useRef(1);
+  const serviceCheckIds = useRef<Record<ServiceKey, number>>({
+    LINEAR_API_KEY: 0,
+    CURSOR_API_KEY: 0,
+    GITHUB_TOKEN: 0,
+    VERCEL_TOKEN: 0,
+  });
+  const inFlightServiceChecks = useRef<
+    Partial<
+      Record<
+        ServiceKey,
+        {
+          requestKey: string;
+          id: number;
+          controller: AbortController;
+          promise: Promise<void>;
+        }
+      >
+    >
+  >({});
 
   const [internalGuidedStep, setInternalGuidedStep] =
     useState<GuidedLocalStep>("connect-services");
@@ -128,7 +262,9 @@ export function ConfigureWorkflow({
     initialEnv.secretPresence,
   );
   const [serviceVerification, setServiceVerification] =
-    useState<ServiceVerificationMap>(INITIAL_SERVICE_VERIFICATION);
+    useState<ServiceVerificationMap>(() =>
+      serviceVerificationFromSummaries(initialEnv.serviceConnectionSummaries),
+    );
   const [verifyingServiceKey, setVerifyingServiceKey] =
     useState<ServiceKey | null>(null);
   const [repoVerification, setRepoVerification] = useState<
@@ -150,6 +286,9 @@ export function ConfigureWorkflow({
   const [serverValidatedHarnessRepo, setServerValidatedHarnessRepo] = useState<
     string | null
   >(null);
+  const [step1TrustedHarnessRepo, setStep1TrustedHarnessRepo] = useState<
+    string | null
+  >(null);
   const [provisioningHarnessRepo, setProvisioningHarnessRepo] = useState(false);
   const [provisioningMessage, setProvisioningMessage] = useState<string | null>(
     null,
@@ -157,6 +296,16 @@ export function ConfigureWorkflow({
   const [provisioningError, setProvisioningError] = useState<string | null>(
     null,
   );
+  const [connectServicesSucceeded, setConnectServicesSucceeded] = useState(false);
+  const [connectServicesSuccessDetails, setConnectServicesSuccessDetails] = useState<
+    string[]
+  >([]);
+  const [localApplySucceeded, setLocalApplySucceeded] = useState(false);
+  const [localApplySuccessDetails, setLocalApplySuccessDetails] = useState<
+    string[]
+  >([]);
+  const provisioningOperationIdRef = useRef<string | null>(null);
+  const provisioningClickStartedAtRef = useRef<number | null>(null);
   const [verifyingHarnessRepo, setVerifyingHarnessRepo] = useState(false);
   const [showPreviewDisclosure, setShowPreviewDisclosure] = useState(false);
   const [preview, setPreview] = useState<LocalSetupPreviewResult | null>(null);
@@ -170,6 +319,10 @@ export function ConfigureWorkflow({
     null,
   );
   const [applySuccess, setApplySuccess] = useState<boolean | null>(null);
+  const [targetRepoSelectionMode, setTargetRepoSelectionMode] =
+    useState<TargetRepoSelectionMode>("create");
+  const [githubOwnerLogin, setGithubOwnerLogin] = useState<string | null>(null);
+  const [githubOwnerLoading, setGithubOwnerLoading] = useState(false);
 
   const guidedConfigValues = useMemo<LocalConfigFormInput>(
     () => ({
@@ -207,6 +360,14 @@ export function ConfigureWorkflow({
     setInternalGuidedStep(guidedStepProp);
   }, [guidedStepProp, mode]);
 
+  useEffect(() => {
+    return () => {
+      for (const check of Object.values(inFlightServiceChecks.current)) {
+        check?.controller.abort();
+      }
+    };
+  }, []);
+
   useEffect(() => {
     onUiStateChange?.({
       localPreviewStale: preview !== null && !previewIsCurrent,
@@ -238,17 +399,12 @@ export function ConfigureWorkflow({
   );
 
   const serviceConnectionReady = (key: ServiceKey) => {
-    if (!presence[key]) {
-      return false;
-    }
-    if (serviceVerification[key].state !== "connected") {
-      return false;
-    }
-    const typedValue = envValues[SERVICE_VALUE_KEY[key]].trim();
-    if (typedValue) {
-      return isServiceVerifiedForValue(serviceVerification[key], typedValue);
-    }
-    return true;
+    return isServiceConnectionReady({
+      key,
+      presence,
+      verification: serviceVerification,
+      envValues,
+    });
   };
 
   const connectServicesReady =
@@ -297,14 +453,18 @@ export function ConfigureWorkflow({
     initialEnv.savedHarnessDispatchRepository?.trim() ||
     "";
 
-  const harnessRepoReady =
-    effectiveHarnessDispatchRepo.length > 0 &&
-    (serverValidatedHarnessRepo === effectiveHarnessDispatchRepo ||
-      (harnessRepoVerification.state === "connected" &&
-        harnessRepoVerification.verifiedRepo === effectiveHarnessDispatchRepo &&
-        (!activeGithubToken?.fingerprint ||
-          harnessRepoVerification.verifiedGithubTokenFingerprint ===
-            activeGithubToken.fingerprint)));
+  const harnessRepoInheritedFromStep1 = isHarnessRepoInheritedFromStep1(
+    effectiveHarnessDispatchRepo,
+    step1TrustedHarnessRepo,
+  );
+
+  const harnessRepoReady = isHarnessRepoReadyForGuidedStep4({
+    effectiveRepo: effectiveHarnessDispatchRepo,
+    step1TrustedRepo: step1TrustedHarnessRepo,
+    serverValidatedRepo: serverValidatedHarnessRepo,
+    manualVerification: harnessRepoVerification,
+    activeGithubTokenFingerprint: activeGithubToken?.fingerprint ?? null,
+  });
 
   useEffect(() => {
     if (mode !== "guided" || guidedStep !== "choose-target-repos") {
@@ -321,6 +481,7 @@ export function ConfigureWorkflow({
         }
 
         if (data.verifiedSavedRepo && data.harnessDispatchRepo) {
+          setStep1TrustedHarnessRepo(data.harnessDispatchRepo);
           setServerValidatedHarnessRepo(data.harnessDispatchRepo);
           setEnvValues((current) => ({
             ...current,
@@ -336,10 +497,12 @@ export function ConfigureWorkflow({
           });
         } else {
           setServerValidatedHarnessRepo(null);
+          setStep1TrustedHarnessRepo(null);
         }
       } catch {
         if (!cancelled) {
           setServerValidatedHarnessRepo(null);
+          setStep1TrustedHarnessRepo(null);
         }
       }
     })();
@@ -350,7 +513,50 @@ export function ConfigureWorkflow({
   }, [guidedStep, mode]);
 
   useEffect(() => {
-    if (serverValidatedHarnessRepo || autoProvisionedHarnessRepo) {
+    if (mode !== "guided" || guidedStep !== "choose-target-repos") {
+      return;
+    }
+    if (!presence.GITHUB_TOKEN) {
+      setGithubOwnerLogin(null);
+      return;
+    }
+
+    let cancelled = false;
+    setGithubOwnerLoading(true);
+    void (async () => {
+      try {
+        const response = await fetch("/api/setup/verify-service", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ service: "github" }),
+        });
+        const data = await response.json();
+        if (cancelled) {
+          return;
+        }
+        if (response.ok && data.status === "connected" && data.label) {
+          setGithubOwnerLogin(String(data.label));
+        } else {
+          setGithubOwnerLogin(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setGithubOwnerLogin(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setGithubOwnerLoading(false);
+        }
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guidedStep, mode, presence.GITHUB_TOKEN]);
+
+  useEffect(() => {
+    if (serverValidatedHarnessRepo || autoProvisionedHarnessRepo || step1TrustedHarnessRepo) {
       return;
     }
     setHarnessRepoVerification({ state: "unchecked" });
@@ -358,20 +564,58 @@ export function ConfigureWorkflow({
     activeGithubToken?.fingerprint,
     autoProvisionedHarnessRepo,
     serverValidatedHarnessRepo,
+    step1TrustedHarnessRepo,
   ]);
 
   const continueWithHarnessProvisioning = useCallback(async () => {
+    const markConnectServicesSucceeded = (details: string[]) => {
+      setConnectServicesSuccessDetails(details);
+      setConnectServicesSucceeded(true);
+      onConnectServicesSucceeded?.();
+    };
+
+    if (
+      initialHarnessProvisioningSummary.state === "verified-and-persisted" ||
+      initialHarnessProvisioningSummary.state === "skipped-source-mode" ||
+      initialHarnessProvisioningSummary.state === "skipped-not-packaged"
+    ) {
+      const repoSlug = initialHarnessProvisioningSummary.harnessDispatchRepo;
+      if (repoSlug) {
+        setStep1TrustedHarnessRepo(repoSlug);
+        setServerValidatedHarnessRepo(repoSlug);
+        setHarnessRepoVerification({
+          state: "connected",
+          verifiedRepo: repoSlug,
+          message: initialHarnessProvisioningSummary.message,
+        });
+      }
+      markConnectServicesSucceeded([
+        repoSlug
+          ? `Workspace reconnected: ${repoSlug}`
+          : "Workspace already verified",
+        "Configuration saved",
+      ]);
+      return;
+    }
+
     setProvisioningHarnessRepo(true);
     setProvisioningError(null);
-    setProvisioningMessage("Setting up your private p-dev workspace...");
-
+    setConnectServicesSucceeded(false);
+    setConnectServicesSuccessDetails([]);
+    const operationId =
+      provisioningOperationIdRef.current ?? createHarnessProvisioningOperationId();
+    provisioningOperationIdRef.current = operationId;
+    provisioningClickStartedAtRef.current = performance.now();
+    setProvisioningMessage(HARNESS_PROVISIONING_PHASES[0]);
+
+    let progressPoll: ReturnType<typeof setInterval> | undefined;
     try {
       const previewResponse = await fetch(
         "/api/setup/preview-harness-repo-provisioning",
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({}),
+          body: JSON.stringify({ operationId }),
         },
       );
       const previewData = await previewResponse.json();
@@ -380,22 +624,90 @@ export function ConfigureWorkflow({
       }
 
       if (previewData.state === "skipped-not-packaged") {
-        onConnectServicesComplete?.();
+        const trustedRepo =
+          envValues.githubDispatchRepository.trim() ||
+          initialEnv.savedHarnessDispatchRepository?.trim() ||
+          initialEnv.suggestedHarnessDispatchRepo?.trim() ||
+          "";
+        if (trustedRepo) {
+          setStep1TrustedHarnessRepo(trustedRepo);
+          setServerValidatedHarnessRepo(trustedRepo);
+        }
+        onHarnessProvisioningSummaryUpdated?.({
+          ...initialHarnessProvisioningSummary,
+          state: "skipped-not-packaged",
+          harnessDispatchRepo: trustedRepo || null,
+          message: previewData.message,
+          recoverable: false,
+        });
+        markConnectServicesSucceeded([
+          trustedRepo
+            ? `Workspace reconnected: ${trustedRepo}`
+            : "Workspace setup skipped for source mode",
+          "Configuration saved",
+        ]);
         return;
       }
 
-      const applyResponse = await fetch(
-        "/api/setup/apply-harness-repo-provisioning",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            confirmed: true,
-            fingerprint: previewData.fingerprint,
-            operationId: previewData.operationId,
-          }),
-        },
-      );
+      progressPoll = setInterval(() => {
+        void fetch("/api/setup/harness-provisioning-progress")
+          .then(async (response) => {
+            if (!response.ok) {
+              return;
+            }
+            const report = (await response.json()) as {
+              uiPhaseLabel?: string | null;
+              operationId?: string | null;
+              completed?: number | null;
+              total?: number | null;
+            };
+            if (report.uiPhaseLabel) {
+              const counts =
+                typeof report.completed === "number" &&
+                typeof report.total === "number" &&
+                report.total > 0
+                  ? ` (${report.completed}/${report.total})`
+                  : "";
+              setProvisioningMessage(`${report.uiPhaseLabel}${counts}`);
+            }
+          })
+          .catch(() => {
+            // Progress polling is best-effort; apply response remains authoritative.
+          });
+      }, 1_000);
+
+      const applyController = new AbortController();
+      const applyTimeoutMs = 180_000;
+      const applyTimer = setTimeout(() => applyController.abort(), applyTimeoutMs);
+      let applyResponse: Response;
+      try {
+        applyResponse = await fetch(
+          "/api/setup/apply-harness-repo-provisioning",
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              confirmed: true,
+              fingerprint: previewData.fingerprint,
+              operationId: previewData.operationId ?? operationId,
+            }),
+            signal: applyController.signal,
+          },
+        );
+      } catch (fetchError) {
+        if (
+          fetchError instanceof DOMException &&
+          fetchError.name === "AbortError"
+        ) {
+          setProvisioningError(
+            `Workspace setup timed out after ${Math.round(applyTimeoutMs / 1000)}s. Operation ID: ${previewData.operationId}. Retry Step 1 Continue to resume or reconcile — the repository may already exist.`,
+          );
+          return;
+        }
+        throw fetchError;
+      } finally {
+        clearTimeout(applyTimer);
+      }
       const applyData = await applyResponse.json();
       if (!applyResponse.ok) {
         throw new Error(applyData.error ?? "Provisioning apply failed");
@@ -403,7 +715,15 @@ export function ConfigureWorkflow({
 
       if (applyData.apply.state !== "verified-and-persisted") {
         if (applyData.apply.recoverable) {
-          setProvisioningError(applyData.apply.message);
+          const phaseHint = applyData.apply.uiPhaseLabel
+            ? ` (${applyData.apply.uiPhaseLabel})`
+            : "";
+          const opHint = applyData.apply.operationId
+            ? ` Operation ID: ${applyData.apply.operationId}.`
+            : ` Operation ID: ${previewData.operationId}.`;
+          setProvisioningError(
+            `${applyData.apply.message}${phaseHint}.${opHint} Retry will resume or reconcile.`,
+          );
           return;
         }
         throw new Error(
@@ -413,6 +733,7 @@ export function ConfigureWorkflow({
 
       const repoSlug = applyData.apply.harnessDispatchRepo as string | null;
       if (repoSlug) {
+        setStep1TrustedHarnessRepo(repoSlug);
         setAutoProvisionedHarnessRepo(repoSlug);
         setEnvValues((current) => ({
           ...current,
@@ -425,9 +746,45 @@ export function ConfigureWorkflow({
         });
       }
 
+      onHarnessProvisioningSummaryUpdated?.({
+        ...initialHarnessProvisioningSummary,
+        state: applyData.apply.state,
+        harnessDispatchRepo: repoSlug,
+        message: applyData.apply.message,
+        recoverable: applyData.apply.recoverable,
+        verifiedSavedRepo: applyData.apply.state === "verified-and-persisted",
+        connectedAutomatically: Boolean(repoSlug),
+      });
       onSummaryUpdated?.(applyData.summary as SetupGuiViewModel);
+      try {
+        const summaryResponse = await fetch(
+          "/api/setup/harness-provisioning-summary",
+        );
+        const summaryData = await summaryResponse.json();
+        if (summaryResponse.ok) {
+          onHarnessProvisioningSummaryUpdated?.(
+            summaryData as HarnessRepoProvisioningSummary,
+          );
+        }
+      } catch {
+        // The apply result already advanced the UI; a refresh will reload summary.
+      }
       setProvisioningMessage(applyData.apply.message);
-      onConnectServicesComplete?.();
+      const clickToSuccessMs =
+        provisioningClickStartedAtRef.current !== null
+          ? Math.round(performance.now() - provisioningClickStartedAtRef.current)
+          : undefined;
+      markConnectServicesSucceeded([
+        repoSlug
+          ? `Workspace created or reconnected: ${repoSlug}`
+          : "Workspace verified",
+        "Snapshot uploaded",
+        "Workspace verified",
+        "Configuration saved",
+        ...(clickToSuccessMs !== undefined
+          ? [`Browser click-to-success: ${clickToSuccessMs}ms`]
+          : []),
+      ]);
     } catch (provisionError) {
       setProvisioningError(
         provisionError instanceof Error
@@ -435,9 +792,20 @@ export function ConfigureWorkflow({
           : "Harness workspace provisioning failed",
       );
     } finally {
+      if (progressPoll) {
+        clearInterval(progressPoll);
+      }
       setProvisioningHarnessRepo(false);
     }
-  }, [onConnectServicesComplete, onSummaryUpdated]);
+  }, [
+    envValues.githubDispatchRepository,
+    initialEnv.savedHarnessDispatchRepository,
+    initialEnv.suggestedHarnessDispatchRepo,
+    initialHarnessProvisioningSummary,
+    onConnectServicesSucceeded,
+    onHarnessProvisioningSummaryUpdated,
+    onSummaryUpdated,
+  ]);
 
   const resetApplyState = () => {
     setApplySuccess(null);
@@ -451,6 +819,8 @@ export function ConfigureWorkflow({
     setPreviewPayload(null);
     setPreviewError(null);
     setConfirmed(false);
+    setLocalApplySucceeded(false);
+    setLocalApplySuccessDetails([]);
   }, []);
 
   const markServiceUnchecked = (key: ServiceKey) => {
@@ -533,10 +903,23 @@ export function ConfigureWorkflow({
     [envValues, onSummaryUpdated],
   );
 
-  const verifyAndSaveService = useCallback(
-    async (key: ServiceKey) => {
+  const runServiceVerification = useCallback(
+    async (
+      key: ServiceKey,
+      options: { saveOnConnected: boolean },
+    ) => {
       const token = envValues[SERVICE_VALUE_KEY[key]].trim();
       const fingerprint = token ? valueFingerprint(token) : undefined;
+      const requestKey = token ? `typed:${fingerprint}` : "saved";
+      const existing = inFlightServiceChecks.current[key];
+      if (existing?.requestKey === requestKey) {
+        return existing.promise;
+      }
+
+      existing?.controller.abort();
+      const controller = new AbortController();
+      const requestId = serviceCheckIds.current[key] + 1;
+      serviceCheckIds.current[key] = requestId;
 
       setVerifyingServiceKey(key);
       setServiceVerification((current) => ({
@@ -544,10 +927,11 @@ export function ConfigureWorkflow({
         [key]: { state: "checking" },
       }));
 
-      try {
+      const promise = (async () => {
         const response = await fetch("/api/setup/verify-service", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
+          signal: controller.signal,
           body: JSON.stringify({
             service: SERVICE_API_MAP[key],
             ...(token ? { token } : {}),
@@ -558,6 +942,10 @@ export function ConfigureWorkflow({
           throw new Error(data.error ?? "Verification failed");
         }
 
+        if (serviceCheckIds.current[key] !== requestId) {
+          return;
+        }
+
         if (data.status !== "connected") {
           setServiceVerification((current) => ({
             ...current,
@@ -572,10 +960,14 @@ export function ConfigureWorkflow({
           return;
         }
 
-        if (token) {
+        if (token && options.saveOnConnected) {
           await saveConnectServiceKey(key);
         }
 
+        if (serviceCheckIds.current[key] !== requestId) {
+          return;
+        }
+
         setServiceVerification((current) => ({
           ...current,
           [key]: {
@@ -586,7 +978,24 @@ export function ConfigureWorkflow({
             label: data.label,
           },
         }));
+      })();
+
+      inFlightServiceChecks.current[key] = {
+        requestKey,
+        id: requestId,
+        controller,
+        promise,
+      };
+
+      try {
+        await promise;
       } catch (verifyError) {
+        if (
+          controller.signal.aborted ||
+          serviceCheckIds.current[key] !== requestId
+        ) {
+          return;
+        }
         setServiceVerification((current) => ({
           ...current,
           [key]: {
@@ -599,12 +1008,56 @@ export function ConfigureWorkflow({
           },
         }));
       } finally {
-        setVerifyingServiceKey(null);
+        if (inFlightServiceChecks.current[key]?.id === requestId) {
+          delete inFlightServiceChecks.current[key];
+        }
+        if (serviceCheckIds.current[key] === requestId) {
+          setVerifyingServiceKey(null);
+        }
       }
     },
     [envValues, saveConnectServiceKey],
   );
 
+  const verifyAndSaveService = useCallback(
+    async (key: ServiceKey) => {
+      await runServiceVerification(key, {
+        saveOnConnected: true,
+      });
+    },
+    [runServiceVerification],
+  );
+
+  useEffect(() => {
+    if (mode !== "guided" || guidedStep !== "connect-services") {
+      return;
+    }
+
+    for (const key of Object.keys(SERVICE_VALUE_KEY) as ServiceKey[]) {
+      if (
+        shouldAutoReverifySavedService({
+          key,
+          presence,
+          envValues,
+          summaries: initialEnv.serviceConnectionSummaries,
+          verification: serviceVerification,
+        })
+      ) {
+        void runServiceVerification(key, {
+          saveOnConnected: false,
+        });
+      }
+    }
+  }, [
+    envValues,
+    guidedStep,
+    initialEnv.serviceConnectionSummaries,
+    mode,
+    presence,
+    runServiceVerification,
+    serviceVerification,
+  ]);
+
   const verifyAndUseHarnessRepo = useCallback(
     async (draftRepo: string) => {
       const harnessDispatchRepo = draftRepo.trim();
@@ -751,6 +1204,49 @@ export function ConfigureWorkflow({
     [envValues.githubToken, guidedRepoRows, presence.GITHUB_TOKEN],
   );
 
+  const handleTargetRepoCreated = useCallback(
+    (summary: TargetRepoCreatedSummary) => {
+      invalidatePreview();
+      const rowId =
+        guidedRepoRows[0]?.rowId ??
+        createGuidedRepoRowId(guidedRepoRowCounter.current);
+      const nextRow: GuidedRepoRow = {
+        rowId,
+        id: summary.resultingTargetRepoConfigId,
+        targetRepo: summary.repositoryUrl,
+        baseBranch: "dev",
+        productionBranch: "main",
+        previewProvider: "none",
+      };
+      setGuidedRepoRows([nextRow]);
+      setConfigValues((current) => ({
+        ...current,
+        repos: [
+          {
+            id: summary.resultingTargetRepoConfigId,
+            targetRepo: summary.repositoryUrl,
+            baseBranch: "dev",
+            productionBranch: "main",
+            previewProvider: "none",
+          },
+        ],
+      }));
+      setRepoVerification({
+        [rowId]: {
+          state: "connected",
+          verifiedTargetRepo: summary.repositoryUrl,
+          verifiedGithubTokenFingerprint:
+            activeGithubToken?.fingerprint ?? undefined,
+          message: "Repository created and ready for local config.",
+          repoSlug: summary.repositoryFullName,
+          workflowInstallReady: false,
+        },
+      });
+      setTargetRepoSelectionMode("connect");
+    },
+    [activeGithubToken?.fingerprint, guidedRepoRows, invalidatePreview],
+  );
+
   const handleServiceBlur = useCallback(
     (key: ServiceKey) => {
       const value = envValues[SERVICE_VALUE_KEY[key]].trim();
@@ -890,7 +1386,15 @@ export function ConfigureWorkflow({
       setShowPreviewDisclosure(false);
 
       if (mode === "guided") {
+        setLocalApplySucceeded(true);
+        setLocalApplySuccessDetails([
+          localSetupFilesExist
+            ? "Local setup files updated on this machine."
+            : "Local setup files created on this machine.",
+          `.env.local and .harness/config.local.json are ready.`,
+        ]);
         onGuidedLocalApplySuccess?.();
+        onStepCompleted?.();
       } else {
         setApplySuccess(true);
         setApplySummary(data.summary as SetupGuiViewModel);
@@ -962,6 +1466,10 @@ export function ConfigureWorkflow({
   const guidedLocalSetupActionLoadingLabel = localSetupFilesExist
     ? "Updating…"
     : "Creating…";
+  const harnessProvisioningActiveIndex =
+    provisioningHarnessRepo
+      ? resolveHarnessProvisioningPhaseIndex(provisioningMessage)
+      : HARNESS_PROVISIONING_PHASES.length;
 
   if (mode === "guided") {
     const renderGuidedStep = () => {
@@ -980,6 +1488,8 @@ export function ConfigureWorkflow({
                 verifyingKey={verifyingServiceKey}
                 onChange={(values) => {
                   invalidatePreview();
+                  setConnectServicesSucceeded(false);
+                  setConnectServicesSuccessDetails([]);
                   setEnvValues(values);
                   if (values.linearApiKey !== envValues.linearApiKey) {
                     markServiceUnchecked("LINEAR_API_KEY");
@@ -998,32 +1508,49 @@ export function ConfigureWorkflow({
                 onVerifyService={verifyAndSaveService}
                 onServiceBlur={handleServiceBlur}
               />
-              <div className={FORM.actions}>
-                <Button
-                  type="button"
-                  onClick={() => {
-                    void continueWithHarnessProvisioning();
-                  }}
-                  disabled={!connectServicesReady || provisioningHarnessRepo}
-                >
-                  {provisioningHarnessRepo
-                    ? "Setting up your private p-dev workspace..."
-                    : "Continue and set up private p-dev workspace"}
-                </Button>
-              </div>
-              {!connectServicesReady ? (
-                <p className="text-sm text-muted-foreground">
-                  Verify and save each service key above. Continue unlocks after
-                  all four services are verified and saved locally.
-                </p>
-              ) : (
-                <p className="text-sm text-muted-foreground">
-                  p-dev will use your GitHub token to create or reconnect your
-                  private `p-dev-harness` workspace before continuing.
-                </p>
-              )}
-              {provisioningMessage ? (
-                <p className="text-sm text-muted-foreground">{provisioningMessage}</p>
+              {provisioningHarnessRepo ? (
+                <GuidedOperationPanel
+                  phases={buildGuidedOperationPhases({
+                    labels: [...HARNESS_PROVISIONING_PHASES],
+                    activeIndex: harnessProvisioningActiveIndex,
+                  })}
+                  supportingText={provisioningMessage ?? HARNESS_PROVISIONING_PHASES[0]}
+                />
+              ) : null}
+              {!provisioningHarnessRepo && !connectServicesSucceeded ? (
+                <>
+                  <div className={FORM.actions}>
+                    <Button
+                      type="button"
+                      onClick={() => {
+                        void continueWithHarnessProvisioning();
+                      }}
+                      disabled={!connectServicesReady}
+                    >
+                      Set up workspace
+                    </Button>
+                  </div>
+                  {!connectServicesReady ? (
+                    <p className="text-sm text-muted-foreground">
+                      Verify and save each service key above. Continue unlocks after
+                      all four services are verified and saved locally.
+                    </p>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      p-dev will use your GitHub token to create or reconnect your
+                      private `p-dev-harness` workspace before continuing.
+                    </p>
+                  )}
+                </>
+              ) : null}
+              {!provisioningHarnessRepo && connectServicesSucceeded ? (
+                <GuidedStepSuccessPanel
+                  heading="Workspace setup verified"
+                  explanation="Your private harness workspace and local service configuration are ready."
+                  details={connectServicesSuccessDetails}
+                  continueLabel="Continue to Linear workspace"
+                  onContinue={onConnectServicesComplete ?? (() => undefined)}
+                />
               ) : null}
               {provisioningError ? (
                 <p className="text-sm text-destructive">{provisioningError}</p>
@@ -1034,12 +1561,13 @@ export function ConfigureWorkflow({
           return (
             <SectionCard
               title={`Step 4 of ${GUIDED_SETUP_STEP_COUNT} · Choose target repo(s) and create setup files`}
-              description="Tell the harness which GitHub repo(s) it should work against, then create local setup files on this machine."
+              description="Create a new product repository or connect an existing GitHub repo, then preview and confirm local setup files on this machine."
             >
               <TargetRepoConfigForm
                 values={guidedConfigValues}
                 highlightStaleTarget={highlightStaleTarget}
                 variant="guided-minimal"
+                guidedSection="harness"
                 harnessDispatchRepository={envValues.githubDispatchRepository}
                 savedHarnessDispatchRepository={
                   initialEnv.savedHarnessDispatchRepository
@@ -1065,43 +1593,67 @@ export function ConfigureWorkflow({
                   serverValidatedHarnessRepo === effectiveHarnessDispatchRepo &&
                   Boolean(effectiveHarnessDispatchRepo)
                 }
-                guidedRepos={guidedRepoRows}
-                repoVerification={repoVerification}
-                verifyingRepoRowId={verifyingRepoRowId}
+                harnessRepoInheritedFromStep1={harnessRepoInheritedFromStep1}
                 onChange={(values) => {
                   invalidatePreview();
                   setConfigValues(values);
                 }}
-                onGuidedReposChange={(rows) => {
-                  invalidatePreview();
-                  resetRepoVerificationIfUrlChanged(rows);
-                  setGuidedRepoRows(rows);
-                }}
-                onVerifyRepo={verifyRepo}
-                onRepoBlur={handleRepoBlur}
-                activeGithubTokenFingerprint={activeGithubToken?.fingerprint ?? null}
-                onAddRepo={() => {
-                  invalidatePreview();
-                  guidedRepoRowCounter.current += 1;
-                  const rowId = createGuidedRepoRowId(
-                    guidedRepoRowCounter.current,
-                  );
-                  setGuidedRepoRows((current) => [
-                    ...current,
-                    { rowId, id: "", targetRepo: "" },
-                  ]);
-                }}
-                onRemoveRepo={(rowId) => {
-                  invalidatePreview();
-                  setGuidedRepoRows((current) =>
-                    current.filter((row) => row.rowId !== rowId),
-                  );
-                  setRepoVerification((current) => {
-                    const next = { ...current };
-                    delete next[rowId];
-                    return next;
-                  });
-                }}
+              />
+
+              <TargetRepoCreateConnect
+                mode={targetRepoSelectionMode}
+                onModeChange={setTargetRepoSelectionMode}
+                githubOwner={githubOwnerLogin}
+                githubOwnerLoading={githubOwnerLoading}
+                onRepoCreated={handleTargetRepoCreated}
+                onInvalidatePreview={invalidatePreview}
+                connectContent={
+                  <TargetRepoConfigForm
+                    values={guidedConfigValues}
+                    highlightStaleTarget={highlightStaleTarget}
+                    variant="guided-minimal"
+                    guidedSection="target-repos"
+                    guidedRepos={guidedRepoRows}
+                    repoVerification={repoVerification}
+                    verifyingRepoRowId={verifyingRepoRowId}
+                    onChange={(values) => {
+                      invalidatePreview();
+                      setConfigValues(values);
+                    }}
+                    onGuidedReposChange={(rows) => {
+                      invalidatePreview();
+                      resetRepoVerificationIfUrlChanged(rows);
+                      setGuidedRepoRows(rows);
+                    }}
+                    onVerifyRepo={verifyRepo}
+                    onRepoBlur={handleRepoBlur}
+                    activeGithubTokenFingerprint={
+                      activeGithubToken?.fingerprint ?? null
+                    }
+                    onAddRepo={() => {
+                      invalidatePreview();
+                      guidedRepoRowCounter.current += 1;
+                      const rowId = createGuidedRepoRowId(
+                        guidedRepoRowCounter.current,
+                      );
+                      setGuidedRepoRows((current) => [
+                        ...current,
+                        { rowId, id: "", targetRepo: "" },
+                      ]);
+                    }}
+                    onRemoveRepo={(rowId) => {
+                      invalidatePreview();
+                      setGuidedRepoRows((current) =>
+                        current.filter((row) => row.rowId !== rowId),
+                      );
+                      setRepoVerification((current) => {
+                        const next = { ...current };
+                        delete next[rowId];
+                        return next;
+                      });
+                    }}
+                  />
+                }
               />
 
               <Separator className="my-6" />
@@ -1144,7 +1696,7 @@ export function ConfigureWorkflow({
                 <Button
                   type="button"
                   onClick={handleCreateSetupFiles}
-                  disabled={!canCreateSetupFiles}
+                  disabled={!canCreateSetupFiles || localApplySucceeded}
                   data-primary-preview-button="true"
                 >
                   {loading === "apply"
@@ -1152,11 +1704,24 @@ export function ConfigureWorkflow({
                     : guidedLocalSetupActionLabel}
                 </Button>
               </div>
-              {!canCreateSetupFiles && guidedApplyBlockedReason ? (
+              {!canCreateSetupFiles && guidedApplyBlockedReason && !localApplySucceeded ? (
                 <p className="text-sm text-muted-foreground">
                   {guidedApplyBlockedReason}
                 </p>
               ) : null}
+              {localApplySucceeded ? (
+                <GuidedStepSuccessPanel
+                  heading={
+                    localSetupFilesExist
+                      ? "Local setup files updated"
+                      : "Local setup files created"
+                  }
+                  explanation="Your target repo configuration and local gitignored setup files are ready on this machine."
+                  details={localApplySuccessDetails}
+                  continueLabel="Continue to local readiness"
+                  onContinue={onContinue ?? (() => undefined)}
+                />
+              ) : null}
             </SectionCard>
           );
       }
@@ -1165,9 +1730,7 @@ export function ConfigureWorkflow({
     return (
       <div className={SPACING.section}>
         <div ref={guidedTopRef} />
-        <GuidedStepTransition stepKey={guidedStep}>
-          {renderGuidedStep()}
-        </GuidedStepTransition>
+        {renderGuidedStep()}
 
         {error ? (
           <SetupApplyResult success={false} message={error} />