p-dev-harness 0.3.1 → 0.4.0

package/workspace-snapshot/files/apps/gui/components/custom/guided-vercel-bridge-card.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import type { VercelBridgePreview } from "@harness/setup/vercel-setup-apply";
 import type { VercelBridgeApplyResult } from "@harness/setup/vercel-setup-apply";
 import type { VercelSetupSummary } from "@harness/setup/vercel-setup-summary";
 import type { FirstRunReadiness } from "@harness/setup/first-run-readiness";
+import { validateVercelProjectName } from "@harness/setup/vercel-project-name";
 import type {
   VercelBridgeOptionsResult,
   VercelBridgeProjectOption,
@@ -17,14 +18,67 @@ import { readSetupJsonResponse } from "@/lib/setup-json-response";
 import {
   canInvalidatePreviewDuringPolling,
   isRedeployPollingActive,
+  mapOrchestrationPhaseLabel,
   REDEPLOY_POLLING_LOCK_MESSAGE,
+  resolveOrchestrationStatusMessage,
+  shouldHideApplyButton,
+  shouldShowTerminalApplyResult,
 } from "@/lib/vercel-bridge-polling-ui";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { GuidedSelect } from "@/components/ui/guided-select";
 import { Label } from "@/components/ui/label";
 import { SectionCard } from "@/components/custom/section-card";
 import { RemoteActionConfirmation } from "@/components/custom/remote-action-confirmation";
 import { SetupApplyResult } from "@/components/custom/setup-apply-result";
+import { VercelBridgeOrchestrationStatus } from "@/components/custom/vercel-bridge-orchestration-status";
+import { GuidedOperationPanel, buildGuidedOperationPhases } from "@/components/custom/guided-operation-panel";
+import { GuidedStepSuccessPanel } from "@/components/custom/guided-step-success-panel";
+
+const VERCEL_OPERATION_PHASES = [
+  "Validating Vercel selection",
+  "Creating or connecting project",
+  "Deploying automation bridge",
+  "Writing environment variables",
+  "Configuring Linear webhook",
+  "Verifying signed webhook",
+] as const;
+
+function resolveVercelOperationActiveIndex(input: {
+  loading: "preview" | "apply" | "poll" | "refresh" | null;
+  applyResult?: VercelBridgeApplyResult | null;
+  orchestrationPhase?: string;
+}): number {
+  if (input.loading === "apply") {
+    return 0;
+  }
+  const stepPhase = input.applyResult?.orchestrationSteps?.find(
+    (step) => step.status === "active",
+  )?.phase;
+  switch (stepPhase) {
+    case "deploying_bridge":
+      return 2;
+    case "writing_env_vars":
+      return 3;
+    case "verifying_webhook":
+      return 5;
+    default:
+      break;
+  }
+  switch (input.applyResult?.orchestrationPhase ?? input.orchestrationPhase) {
+    case "triggered":
+    case "building":
+    case "waiting_for_ready":
+      return 2;
+    case "verifying":
+    case "retry_wait":
+      return 5;
+    case "verified":
+      return VERCEL_OPERATION_PHASES.length;
+    default:
+      return 0;
+  }
+}
 
 interface GuidedVercelBridgeCardProps {
   readiness: FirstRunReadiness;
@@ -32,16 +86,22 @@ interface GuidedVercelBridgeCardProps {
   onSummaryUpdated?: (summary: VercelSetupSummary) => void;
   onUiStateChange?: (state: { vercelPreviewStale: boolean }) => void;
   onContinue: () => void;
+  onStepCompleted?: () => void;
 }
 
-const selectClassName =
-  "w-full rounded-md border border-input bg-background px-3 py-2 text-sm";
-
 function buildVercelApplyResultMessage(apply: VercelBridgeApplyResult): string {
   if (apply.status === "deployment-required") {
     return `${apply.deploymentRequired?.message ?? "Deployment required."} ${apply.deploymentRequired?.nextSteps.join(" ") ?? ""}`;
   }
 
+  if (apply.setupBlocked) {
+    return [apply.setupBlocked.message, ...apply.setupBlocked.nextSteps].join(" ");
+  }
+
+  if (apply.verified && apply.signedProbeVerified) {
+    return "PDev automation bridge verified.";
+  }
+
   const parts = [
     `Vercel team: ${apply.team?.outcome ?? "unchanged"} ${apply.team?.name ?? ""}.`,
     `Vercel project: ${apply.project?.outcome ?? "unchanged"} ${apply.project?.name ?? apply.projectName}.`,
@@ -56,71 +116,74 @@ function buildVercelApplyResultMessage(apply: VercelBridgeApplyResult): string {
     );
   }
 
-  if (apply.setupBlocked) {
-    parts.push(apply.setupBlocked.message);
-    if (apply.setupBlocked.nextSteps.length > 0) {
-      parts.push(apply.setupBlocked.nextSteps.join(" "));
-    }
-  } else if (
-    apply.deploymentRedeployRequired &&
-    !apply.signedProbeVerified &&
-    !apply.productionRedeployTriggered
-  ) {
-    parts.push(
-      "Redeploy production in Vercel, then use Retry verification (this will not rotate secrets or rewrite env vars).",
-    );
-  }
-
   return parts.join(" ");
 }
 
-function shouldShowRetryVerification(
-  apply: VercelBridgeApplyResult | null,
-  redeployPollingActive: boolean,
+function isTerminalRedeployApply(
+  apply: VercelBridgeApplyResult,
+  summary: VercelSetupSummary,
 ): boolean {
-  if (redeployPollingActive) {
-    return false;
-  }
-  if (!apply) {
-    return false;
-  }
-  if (apply.setupPending) {
-    return false;
-  }
-  if (apply.verified && apply.signedProbeVerified) {
-    return false;
-  }
-  return Boolean(
-    apply.setupBlocked ||
-      (apply.deploymentRedeployRequired && !apply.signedProbeVerified) ||
-      (apply.productionRedeployTriggered &&
-        apply.productionRedeployStatus === "ready" &&
-        !apply.signedProbeVerified),
-  );
-}
-
-function isTerminalRedeployApply(apply: VercelBridgeApplyResult): boolean {
   if (apply.verified && apply.signedProbeVerified) {
     return true;
   }
-  if (apply.setupPending) {
+  if (apply.setupPending || summary.orchestration?.active) {
     return false;
   }
   return Boolean(
     apply.setupBlocked ||
       apply.productionRedeployStatus === "failed" ||
       apply.productionRedeployStatus === "timeout" ||
-      apply.productionRedeployStatus === "no_source_deployment",
+      apply.productionRedeployStatus === "no_source_deployment" ||
+      summary.orchestration?.terminal,
   );
 }
 
+function resumeOrchestrationFromSummary(summary: VercelSetupSummary): {
+  setupPending: boolean;
+  pollActionId: string | null;
+  verifiedSuccess: boolean;
+} {
+  const orchestration = summary.orchestration;
+  if (!orchestration) {
+    return {
+      setupPending: false,
+      pollActionId: null,
+      verifiedSuccess: summary.readiness.ready,
+    };
+  }
+
+  if (orchestration.verified || summary.readiness.ready) {
+    return {
+      setupPending: false,
+      pollActionId: null,
+      verifiedSuccess: true,
+    };
+  }
+
+  if (orchestration.active) {
+    return {
+      setupPending: true,
+      pollActionId: orchestration.pollActionId ?? null,
+      verifiedSuccess: false,
+    };
+  }
+
+  return {
+    setupPending: false,
+    pollActionId: null,
+    verifiedSuccess: false,
+  };
+}
+
 export function GuidedVercelBridgeCard({
   readiness,
   initialSummary,
   onSummaryUpdated,
   onUiStateChange,
   onContinue,
+  onStepCompleted,
 }: GuidedVercelBridgeCardProps) {
+  const initialResume = resumeOrchestrationFromSummary(initialSummary);
   const [summary, setSummary] = useState(initialSummary);
   const [scopes, setScopes] = useState<VercelBridgeScopeOption[]>([]);
   const [projects, setProjects] = useState<VercelBridgeProjectOption[]>([]);
@@ -128,6 +191,10 @@ export function GuidedVercelBridgeCard({
     teamCreate: true,
     projectCreate: true,
   });
+  const [githubDispatchEligible, setGithubDispatchEligible] = useState(true);
+  const [githubDispatchMessage, setGithubDispatchMessage] = useState<string | null>(
+    null,
+  );
   const [teamMode, setTeamMode] = useState<"existing" | "create">("existing");
   const [teamId, setTeamId] = useState(summary.controlPlane?.vercel?.teamId ?? "");
   const [teamName, setTeamName] = useState("");
@@ -140,13 +207,15 @@ export function GuidedVercelBridgeCard({
   const [harnessTeamKey, setHarnessTeamKey] = useState(
     summary.linearTeamKey ?? "",
   );
-  const [showGithubDispatchOverride, setShowGithubDispatchOverride] =
-    useState(false);
-  const [githubDispatchToken, setGithubDispatchToken] = useState("");
   const [optionsError, setOptionsError] = useState<string | null>(null);
   const [optionsLoading, setOptionsLoading] = useState(false);
   const [preview, setPreview] = useState<VercelBridgePreview | null>(null);
   const [previewGenerated, setPreviewGenerated] = useState(false);
+  const [previewDisclosed, setPreviewDisclosed] = useState(false);
+  const [
+    allowExistingProjectBridgeInstall,
+    setAllowExistingProjectBridgeInstall,
+  ] = useState(false);
   const [confirmed, setConfirmed] = useState(false);
   const [loading, setLoading] = useState<
     "preview" | "apply" | "poll" | "refresh" | null
@@ -156,23 +225,53 @@ export function GuidedVercelBridgeCard({
   const [applyResult, setApplyResult] = useState<VercelBridgeApplyResult | null>(
     null,
   );
-  const [pollActionId, setPollActionId] = useState<string | null>(null);
-  const [setupPending, setSetupPending] = useState(false);
-  const [verifiedSuccess, setVerifiedSuccess] = useState(false);
+  const [pollActionId, setPollActionId] = useState<string | null>(
+    initialResume.pollActionId,
+  );
+  const [setupPending, setSetupPending] = useState(initialResume.setupPending);
+  const [verifiedSuccess, setVerifiedSuccess] = useState(
+    initialResume.verifiedSuccess,
+  );
   const [manualCopySecret, setManualCopySecret] = useState<string | null>(null);
   const [manualCopyAcknowledged, setManualCopyAcknowledged] = useState(false);
 
   const redeployPollingActive = isRedeployPollingActive({
     setupPending,
     pollActionId,
+    orchestration: summary.orchestration,
   });
   const controlsLocked = redeployPollingActive || loading !== null;
+  const orchestrationStatusMessage = resolveOrchestrationStatusMessage({
+    loading,
+    applyResult,
+    orchestration: summary.orchestration,
+  });
+  const showTerminalApplyResult = shouldShowTerminalApplyResult({
+    applyResult,
+    orchestration: summary.orchestration,
+    redeployPollingActive,
+  });
+  const hideApplyButton = shouldHideApplyButton({
+    verifiedSuccess,
+    redeployPollingActive,
+  });
+  const projectNameValidation = useMemo(
+    () =>
+      projectMode === "create"
+        ? validateVercelProjectName(projectName)
+        : { valid: true, normalized: projectName },
+    [projectMode, projectName],
+  );
 
   useEffect(() => {
     setSummary(initialSummary);
     if (initialSummary.linearTeamKey) {
       setHarnessTeamKey(initialSummary.linearTeamKey);
     }
+    const resumed = resumeOrchestrationFromSummary(initialSummary);
+    setSetupPending(resumed.setupPending);
+    setPollActionId(resumed.pollActionId);
+    setVerifiedSuccess(resumed.verifiedSuccess);
   }, [initialSummary]);
 
   const previewIsCurrent = preview !== null && previewGenerated;
@@ -202,7 +301,16 @@ export function GuidedVercelBridgeCard({
       if (data.harnessTeamKey) {
         setHarnessTeamKey(data.harnessTeamKey);
       }
-      setShowGithubDispatchOverride(!data.githubDispatch.eligible);
+      setGithubDispatchEligible(data.githubDispatch.eligible);
+      setGithubDispatchMessage(
+        data.githubDispatch.eligible ? null : data.githubDispatch.message,
+      );
+      if (!data.githubDispatch.eligible) {
+        setPreview(null);
+        setPreviewGenerated(false);
+        setPreviewDisclosed(false);
+        setConfirmed(false);
+      }
       if (scopeId === undefined && data.selectedScopeId !== undefined) {
         setTeamId(data.selectedScopeId);
       }
@@ -239,8 +347,13 @@ export function GuidedVercelBridgeCard({
       if (!response.ok) {
         throw new Error(data.error ?? "Vercel summary refresh failed");
       }
-      setSummary(data as VercelSetupSummary);
-      onSummaryUpdated?.(data as VercelSetupSummary);
+      const nextSummary = data as VercelSetupSummary;
+      setSummary(nextSummary);
+      onSummaryUpdated?.(nextSummary);
+      const resumed = resumeOrchestrationFromSummary(nextSummary);
+      setSetupPending(resumed.setupPending);
+      setPollActionId(resumed.pollActionId);
+      setVerifiedSuccess(resumed.verifiedSuccess);
     } catch (refreshError) {
       setError(
         refreshError instanceof Error
@@ -259,6 +372,7 @@ export function GuidedVercelBridgeCard({
       }
       setPreview(null);
       setPreviewGenerated(false);
+      setPreviewDisclosed(false);
       setVerifiedSuccess(false);
       setApplyResult(null);
       setPollActionId(null);
@@ -282,24 +396,22 @@ export function GuidedVercelBridgeCard({
         projectId: projectMode === "existing" ? projectId || undefined : undefined,
         projectName: projectMode === "create" ? projectName || undefined : undefined,
       },
+      allowExistingProjectBridgeInstall:
+        projectMode === "existing" ? allowExistingProjectBridgeInstall : undefined,
       teamId: teamMode === "existing" ? teamId || undefined : undefined,
       projectId: projectMode === "existing" ? projectId || undefined : undefined,
       projectName: projectMode === "create" ? projectName || undefined : undefined,
       linearTeamId: summary.controlPlane?.linear?.teamId,
       envInput: {
-        GITHUB_DISPATCH_TOKEN: showGithubDispatchOverride
-          ? githubDispatchToken || undefined
-          : undefined,
         HARNESS_TEAM_KEY: harnessTeamKey || undefined,
       },
     }),
     [
-      githubDispatchToken,
+      allowExistingProjectBridgeInstall,
       harnessTeamKey,
       projectId,
       projectMode,
       projectName,
-      showGithubDispatchOverride,
       summary.controlPlane?.linear?.teamId,
       teamId,
       teamMode,
@@ -309,7 +421,7 @@ export function GuidedVercelBridgeCard({
   );
 
   const applyVercelBridgeResponse = useCallback(
-    async (apply: VercelBridgeApplyResult, summary: VercelSetupSummary) => {
+    async (apply: VercelBridgeApplyResult, nextSummary: VercelSetupSummary) => {
       setApplyResult(apply);
       if (apply.status === "deployment-required") {
         setError(
@@ -322,15 +434,19 @@ export function GuidedVercelBridgeCard({
         void loadOptions(teamMode === "existing" ? teamId : undefined);
         setPreview(null);
         setPreviewGenerated(false);
+        setPreviewDisclosed(false);
         setConfirmed(false);
         return;
       }
 
-      setSummary(summary);
-      onSummaryUpdated?.(summary);
+      setSummary(nextSummary);
+      onSummaryUpdated?.(nextSummary);
+      const signedProbeSuccess = apply.verified && apply.signedProbeVerified;
       setVerifiedSuccess(apply.verified);
-      setSetupPending(Boolean(apply.setupPending));
-      setPollActionId(apply.pollActionId ?? null);
+      setSetupPending(Boolean(apply.setupPending || nextSummary.orchestration?.active));
+      setPollActionId(
+        apply.pollActionId ?? nextSummary.orchestration?.pollActionId ?? null,
+      );
 
       if (apply.linearWebhookSetup.manualCopySecret) {
         setManualCopySecret(apply.linearWebhookSetup.manualCopySecret);
@@ -340,10 +456,14 @@ export function GuidedVercelBridgeCard({
       }
       setPreview(null);
       setPreviewGenerated(false);
+      setPreviewDisclosed(false);
       setConfirmed(false);
+      if (signedProbeSuccess) {
+        onStepCompleted?.();
+      }
       void loadOptions(teamMode === "existing" ? teamId : undefined);
     },
-    [loadOptions, onSummaryUpdated, teamId, teamMode],
+    [loadOptions, onStepCompleted, onSummaryUpdated, teamId, teamMode],
   );
 
   const pollRedeployStatus = useCallback(async () => {
@@ -373,7 +493,7 @@ export function GuidedVercelBridgeCard({
 
       const apply = data.apply;
       await applyVercelBridgeResponse(apply, data.summary);
-      if (isTerminalRedeployApply(apply)) {
+      if (isTerminalRedeployApply(apply, data.summary)) {
         setSetupPending(false);
         setPollActionId(null);
       }
@@ -383,11 +503,13 @@ export function GuidedVercelBridgeCard({
           ? pollError.message
           : "Redeploy status check failed",
       );
-      setSetupPending(false);
+      if (!summary.orchestration?.active) {
+        setSetupPending(false);
+      }
     } finally {
       setLoading(null);
     }
-  }, [applyVercelBridgeResponse, pollActionId]);
+  }, [applyVercelBridgeResponse, pollActionId, summary.orchestration?.active]);
 
   useEffect(() => {
     if (!setupPending || !pollActionId) {
@@ -432,9 +554,11 @@ export function GuidedVercelBridgeCard({
     setConfirmed(false);
     try {
       await runPreview();
+      setPreviewDisclosed(true);
     } catch (nextPreviewError) {
       setPreview(null);
       setPreviewGenerated(false);
+      setPreviewDisclosed(true);
       setPreviewError(
         nextPreviewError instanceof Error
           ? nextPreviewError.message
@@ -445,19 +569,28 @@ export function GuidedVercelBridgeCard({
     }
   }, [invalidatePreview, redeployPollingActive, runPreview]);
 
-  const handleApply = async (options?: { verifyOnly?: boolean }) => {
-    if (redeployPollingActive && !options?.verifyOnly) {
+  const handleApply = async () => {
+    if (redeployPollingActive) {
+      return;
+    }
+    if (!confirmed) {
       return;
     }
-    if (!confirmed && !options?.verifyOnly) {
+    if (!githubDispatchEligible) {
+      setError(
+        githubDispatchMessage ??
+          "Saved GITHUB_TOKEN cannot dispatch to the harness repository. Update Step 1 before applying.",
+      );
+      return;
+    }
+    if (projectMode === "create" && !projectNameValidation.valid) {
+      setError(projectNameValidation.error ?? "Vercel project name is invalid.");
       return;
     }
 
     setLoading("apply");
     setError(null);
-    if (!options?.verifyOnly) {
-      invalidatePreview();
-    }
+    invalidatePreview();
     try {
       const currentPreview =
         previewIsCurrent && preview ? preview : await runPreview();
@@ -472,7 +605,6 @@ export function GuidedVercelBridgeCard({
           plan: buildPlanPayload(),
           confirmed: true,
           fingerprint: currentPreview.fingerprint,
-          verifyOnly: options?.verifyOnly === true,
         }),
       });
       const data = await readSetupJsonResponse<{
@@ -495,23 +627,36 @@ export function GuidedVercelBridgeCard({
   const formComplete =
     teamMode === "existing"
       ? Boolean(harnessTeamKey) &&
-        (projectMode === "existing" ? Boolean(projectId) : Boolean(projectName))
+        (projectMode === "existing"
+          ? Boolean(projectId)
+          : Boolean(projectName) && projectNameValidation.valid)
       : Boolean(teamSlug && harnessTeamKey) &&
-        (projectMode === "existing" ? Boolean(projectId) : Boolean(projectName));
+        (projectMode === "existing"
+          ? Boolean(projectId)
+          : Boolean(projectName) && projectNameValidation.valid);
+  const stepPrerequisitesMet = githubDispatchEligible;
 
   const canContinue =
     (verifiedSuccess && applyResult?.signedProbeVerified === true) ||
     summary.readiness.ready;
+  const operationActive = loading === "apply" || redeployPollingActive;
+  const operationActiveIndex = resolveVercelOperationActiveIndex({
+    loading,
+    applyResult,
+    orchestrationPhase: summary.orchestration?.phase,
+  });
+  const operationSupportingText =
+    orchestrationStatusMessage ?? VERCEL_OPERATION_PHASES[operationActiveIndex];
 
   return (
     <SectionCard
-      title={`Step 3 of ${GUIDED_SETUP_STEP_COUNT} · Configure Vercel settings`}
-      description="Choose the Vercel team and project this setup should use for automation and preview checks. Env var presence alone is not enough; the bridge must pass signed delivery verification against production."
+      title={`Step 3 of ${GUIDED_SETUP_STEP_COUNT} · Configure PDev automation bridge`}
+      description="Choose the Vercel team and project that hosts the PDev automation bridge."
     >
       <div className={SPACING.stackSm}>
         {!summary.vercelTokenConfigured ? (
           <p className="text-sm text-muted-foreground">
-            Add VERCEL_TOKEN in Step 1 before configuring Vercel settings.
+            Add VERCEL_TOKEN in Step 1 before configuring the PDev automation bridge.
           </p>
         ) : (
           <>
@@ -520,14 +665,26 @@ export function GuidedVercelBridgeCard({
                 {REDEPLOY_POLLING_LOCK_MESSAGE}
               </p>
             ) : null}
+            {!stepPrerequisitesMet && githubDispatchMessage ? (
+              <p className="text-sm text-destructive">{githubDispatchMessage}</p>
+            ) : null}
+            {orchestrationStatusMessage && !operationActive ? (
+              <VercelBridgeOrchestrationStatus
+                message={orchestrationStatusMessage}
+                phaseLabel={mapOrchestrationPhaseLabel(
+                  applyResult?.orchestrationPhase ?? summary.orchestration?.phase,
+                )}
+              />
+            ) : null}
+            {stepPrerequisitesMet ? (
+              <>
             <div className="grid gap-4 md:grid-cols-2">
               <div className="space-y-2">
                 <Label htmlFor="vercel-team-mode">Vercel team name</Label>
                 {capabilities.teamCreate ? (
-                  <select
-                    id="vercel-team-mode"
-                    className={selectClassName}
-                    value={teamMode}
+                  <GuidedSelect
+                  id="vercel-team-mode"
+                                        value={teamMode}
                     onChange={(event) => {
                       if (redeployPollingActive) {
                         return;
@@ -539,13 +696,12 @@ export function GuidedVercelBridgeCard({
                   >
                     <option value="existing">Use existing team</option>
                     <option value="create">Create new team</option>
-                  </select>
+                  </GuidedSelect>
                 ) : null}
                 {teamMode === "existing" ? (
-                  <select
-                    id="vercel-team-name"
-                    className={selectClassName}
-                    value={teamId}
+                  <GuidedSelect
+                  id="vercel-team-name"
+                                        value={teamId}
                     onChange={(event) => {
                       if (redeployPollingActive) {
                         return;
@@ -562,7 +718,7 @@ export function GuidedVercelBridgeCard({
                         {scope.label}
                       </option>
                     ))}
-                  </select>
+                  </GuidedSelect>
                 ) : (
                   <div className="space-y-2">
                     <Input
@@ -596,33 +752,33 @@ export function GuidedVercelBridgeCard({
               <div className="space-y-2">
                 <Label htmlFor="vercel-project-mode">Vercel project</Label>
                 {capabilities.projectCreate ? (
-                  <select
-                    id="vercel-project-mode"
-                    className={selectClassName}
-                    value={projectMode}
+                  <GuidedSelect
+                  id="vercel-project-mode"
+                                        value={projectMode}
                     onChange={(event) => {
                       if (redeployPollingActive) {
                         return;
                       }
                       setProjectMode(event.target.value as "existing" | "create");
+                      setAllowExistingProjectBridgeInstall(false);
                       invalidatePreview();
                     }}
                     disabled={controlsLocked}
                   >
                     <option value="existing">Use existing project</option>
                     <option value="create">Create new project</option>
-                  </select>
+                  </GuidedSelect>
                 ) : null}
                 {projectMode === "existing" ? (
-                  <select
-                    id="vercel-project-id"
-                    className={selectClassName}
-                    value={projectId}
+                  <GuidedSelect
+                  id="vercel-project-id"
+                                        value={projectId}
                     onChange={(event) => {
                       if (redeployPollingActive) {
                         return;
                       }
                       setProjectId(event.target.value);
+                      setAllowExistingProjectBridgeInstall(false);
                       invalidatePreview();
                     }}
                     disabled={controlsLocked || optionsLoading || projects.length === 0}
@@ -633,7 +789,7 @@ export function GuidedVercelBridgeCard({
                         {project.name}
                       </option>
                     ))}
-                  </select>
+                  </GuidedSelect>
                 ) : (
                   <Input
                     placeholder="Project name"
@@ -648,6 +804,34 @@ export function GuidedVercelBridgeCard({
                     disabled={controlsLocked}
                   />
                 )}
+                {projectMode === "create" && projectNameValidation.error ? (
+                  <p className="text-sm text-destructive">
+                    {projectNameValidation.error}
+                  </p>
+                ) : null}
+                {projectMode === "existing" && projectId ? (
+                  <label className="flex cursor-pointer items-start gap-2 rounded-md border border-border bg-muted/10 p-3 text-sm has-[:disabled]:cursor-not-allowed">
+                    <input
+                      type="checkbox"
+                      className="mt-0.5 cursor-pointer disabled:cursor-not-allowed"
+                      checked={allowExistingProjectBridgeInstall}
+                      disabled={controlsLocked}
+                      onChange={(event) => {
+                        const nextChecked = event.target.checked;
+                        setAllowExistingProjectBridgeInstall(nextChecked);
+                        setPreview(null);
+                        setPreviewGenerated(false);
+                        setPreviewDisclosed(false);
+                        setConfirmed(false);
+                      }}
+                    />
+                    <span className="text-muted-foreground">
+                      Allow PDev to install the automation bridge into this
+                      existing project if it is not already marked as
+                      PDev-managed.
+                    </span>
+                  </label>
+                ) : null}
               </div>
             </div>
 
@@ -660,27 +844,6 @@ export function GuidedVercelBridgeCard({
               <p className="text-sm text-destructive">{optionsError}</p>
             ) : null}
 
-            {showGithubDispatchOverride ? (
-              <div className="space-y-2">
-                <Label htmlFor="github-dispatch-token">
-                  GITHUB_DISPATCH_TOKEN override
-                </Label>
-                <Input
-                  id="github-dispatch-token"
-                  type="password"
-                  value={githubDispatchToken}
-                  onChange={(event) => {
-                    if (redeployPollingActive) {
-                      return;
-                    }
-                    setGithubDispatchToken(event.target.value);
-                    invalidatePreview();
-                  }}
-                  disabled={controlsLocked}
-                />
-              </div>
-            ) : null}
-
             <div className={FORM.actions}>
               <Button
                 type="button"
@@ -688,7 +851,7 @@ export function GuidedVercelBridgeCard({
                 onClick={() => void handlePreview()}
                 disabled={controlsLocked || !formComplete}
               >
-                {loading === "preview" ? "Previewing…" : "Preview Vercel settings"}
+                {loading === "preview" ? "Previewing…" : "Preview PDev automation bridge"}
               </Button>
               <Button
                 type="button"
@@ -700,7 +863,7 @@ export function GuidedVercelBridgeCard({
               </Button>
             </div>
 
-            {previewIsCurrent && preview ? (
+            {previewDisclosed && previewIsCurrent && preview ? (
               <div className="rounded-md border border-border bg-muted/10 p-3 text-sm space-y-2">
                 <p>Webhook URL: {preview.webhookUrl ?? "unknown"}</p>
                 <p>
@@ -741,29 +904,41 @@ export function GuidedVercelBridgeCard({
               </div>
             ) : null}
 
-            <RemoteActionConfirmation
-              scope="vercel-bridge-write"
-              variant="guided"
-              confirmed={confirmed}
-              disabled={controlsLocked || !formComplete}
-              disabledReason={
-                redeployPollingActive
-                  ? REDEPLOY_POLLING_LOCK_MESSAGE
-                  : !formComplete
-                  ? "Select or enter the Vercel team and project before confirming."
-                  : teamMode === "create"
-                    ? "This will create provider resources in Vercel when you apply."
-                    : undefined
-              }
-              onConfirmedChange={(nextConfirmed) => {
-                if (redeployPollingActive) {
-                  return;
+            {loading !== "apply" && !operationActive && !verifiedSuccess ? (
+              <RemoteActionConfirmation
+                scope="vercel-bridge-write"
+                variant="guided"
+                confirmed={confirmed}
+                disabled={controlsLocked || !formComplete}
+                disabledReason={
+                  redeployPollingActive
+                    ? REDEPLOY_POLLING_LOCK_MESSAGE
+                    : !formComplete
+                    ? "Select or enter the Vercel team and project before confirming."
+                    : teamMode === "create"
+                      ? "This will create provider resources in Vercel when you apply."
+                      : undefined
                 }
-                setConfirmed(nextConfirmed);
-              }}
-            />
+                onConfirmedChange={(nextConfirmed) => {
+                  if (redeployPollingActive) {
+                    return;
+                  }
+                  setConfirmed(nextConfirmed);
+                }}
+              />
+            ) : null}
+
+            {operationActive ? (
+              <GuidedOperationPanel
+                phases={buildGuidedOperationPhases({
+                  labels: [...VERCEL_OPERATION_PHASES],
+                  activeIndex: operationActiveIndex,
+                })}
+                supportingText={operationSupportingText}
+              />
+            ) : null}
 
-            {!verifiedSuccess ? (
+            {!hideApplyButton && !operationActive ? (
               <div className={FORM.actions}>
                 <Button
                   type="button"
@@ -775,50 +950,35 @@ export function GuidedVercelBridgeCard({
                     Boolean(preview?.validationError)
                   }
                 >
-                  {loading === "apply"
-                    ? "Applying Vercel settings…"
-                    : loading === "poll"
-                      ? "Waiting for production redeploy…"
-                      : "Apply Vercel Settings"}
+                  Apply PDev automation bridge
                 </Button>
-                {shouldShowRetryVerification(applyResult, redeployPollingActive) ? (
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => void handleApply({ verifyOnly: true })}
-                    disabled={loading !== null || !formComplete}
-                  >
-                    {loading === "apply" ? "Verifying…" : "Retry verification"}
-                  </Button>
-                ) : null}
               </div>
             ) : null}
 
-            {applyResult?.orchestrationSteps?.length || setupPending ? (
-              <ul className="list-disc pl-5 text-sm text-muted-foreground">
-                {applyResult?.orchestrationSteps?.map((step) => (
-                  <li key={`${step.phase}-${step.status}`}>
-                    {step.message}
-                    {step.status === "failed" ? " (failed)" : ""}
-                  </li>
-                ))}
-                {setupPending ? (
-                  <li>
-                    {loading === "poll"
-                      ? "Checking Vercel deployment status…"
-                      : "Waiting for Vercel deployment READY…"}
-                  </li>
-                ) : null}
-              </ul>
-            ) : null}
             {error ? <SetupApplyResult success={false} message={error} /> : null}
-            {applyResult ? (
+            {showTerminalApplyResult &&
+            applyResult &&
+            !(applyResult.verified && applyResult.signedProbeVerified) ? (
               <SetupApplyResult
                 success={applyResult.verified}
                 message={buildVercelApplyResultMessage(applyResult)}
               />
             ) : null}
 
+            {verifiedSuccess && applyResult?.signedProbeVerified ? (
+              <GuidedStepSuccessPanel
+                heading="PDev automation bridge verified"
+                explanation="The Vercel bridge, environment variables, Linear webhook, and signed production probe are ready."
+                details={[
+                  `Project: ${applyResult.project?.name ?? applyResult.projectName}`,
+                  `Env vars written: ${applyResult.writtenEnvKeys.join(", ") || "none"}`,
+                  `Linear webhook: ${applyResult.linearWebhookSetup.mode}`,
+                ]}
+                continueLabel="Continue to Step 4"
+                onContinue={onContinue}
+              />
+            ) : null}
+
             {manualCopySecret ? (
               <div className="rounded-md border border-amber-500/40 bg-amber-500/5 p-3 text-sm space-y-2">
                 <p className="font-medium">Manual Linear webhook secret (one-time)</p>
@@ -848,11 +1008,13 @@ export function GuidedVercelBridgeCard({
               </div>
             ) : null}
 
-            {canContinue ? (
+            {canContinue && !verifiedSuccess ? (
               <Button type="button" onClick={onContinue}>
                 Continue to target repo setup
               </Button>
             ) : null}
+              </>
+            ) : null}
           </>
         )}
       </div>