feat(configure): make pipeline options template-, stage-, and provider-aware

- Align template dropdown values with backend-supported templates
- Rehydrate pipeline options when template changes to prevent invalid configs
- Conditionally render runtime, install, test, and build inputs based on:
  - selected template (node_app, python_app, container_service)
  - enabled stages (build, test, deploy)
- Hide provider-specific deployment fields unless deploy stage is enabled
- Fix pipeline generator to emit runtime-specific setup steps:
  - Use setup-node only for node_app
  - Use setup-python only for python_app
- Prevent Node.js steps from leaking into Python-generated YAML

This ensures UI state, generated YAML, and backend expectations stay in sync
and removes misleading or non-applicable configuration paths.

Author: PVeazie951

client/src/pages/ConfigurePage.tsx

@@ -70,7 +70,15 @@ export default function ConfigurePage() {
       alert("Pick a repo + branch on the Connect page first.");
       return;
     }
-    await regenerate({ repo, branch });
+
+    await regenerate({
+      repo,
+      branch,
+      template,
+      provider,
+      stages,
+      options,
+    });
   };
 
   const handleOpenPr = async () => {
@@ -95,6 +103,36 @@ export default function ConfigurePage() {
     const trimmed = chatInput.trim();
     if (!trimmed) return;
 
+    // --- Sync AI intent with pipeline stages BEFORE sending to backend ---
+    // The AI is a planner, not an authority. UI state must be updated first.
+    const lower = trimmed.toLowerCase();
+
+    // Reset to defaults first
+    let nextStages: Array<"build" | "test" | "deploy"> = ["build", "test", "deploy"];
+
+    if (lower.includes("just build") || lower.includes("only build")) {
+      nextStages = ["build"];
+    } else if (
+      lower.includes("build and test") ||
+      (lower.includes("build") && lower.includes("test") && !lower.includes("deploy"))
+    ) {
+      nextStages = ["build", "test"];
+    } else if (
+      lower.includes("no deploy") ||
+      lower.includes("without deploy")
+    ) {
+      nextStages = ["build", "test"];
+    }
+
+    // Apply stage changes to the pipeline store
+    (["build", "test", "deploy"] as const).forEach((stage) => {
+      const shouldEnable = nextStages.includes(stage);
+      const isEnabled = stages.includes(stage);
+      if (shouldEnable !== isEnabled) {
+        toggleStage(stage);
+      }
+    });
+
     if (!repo || !branch) {
       alert(
         "Pick a repo + branch on the Connect page first so I can give better suggestions."
@@ -114,7 +152,7 @@ export default function ConfigurePage() {
         template,
         provider,
         branch,
-        stages,
+        stages: nextStages,
         options,
       };
 
@@ -159,9 +197,8 @@ export default function ConfigurePage() {
           pipelineName,
           branch,
           provider,
-          stages,
-          // Keep a copy of the current options in wizard context so follow-up prompts
-          // can reference the selected provider identity (AWS role / GCP service account).
+          // 🔒 Never override stages from backend / metadata
+          stages: pipelineSnapshot.stages,
           options,
         } as any);
       }
@@ -249,8 +286,8 @@ export default function ConfigurePage() {
                 className="rounded-md border border-white/25 bg-white px-3 py-2 text-sm text-slate-900 placeholder-slate-500"
               >
                 <option value="node_app">Node.js app</option>
-                <option value="node_library">Node.js library</option>
-                <option value="react_vite">React/Vite app</option>
+                <option value="python_app">Python App</option>
+                <option value="container_service">Container</option>
               </select>
               <span className="text-xs text-slate-200">
                 Pick the closest match to your repo; the MCP backend refines it.
@@ -296,54 +333,98 @@ export default function ConfigurePage() {
               </div>
             </fieldset>
 
-            {/* Node version + commands */}
+            {/* Runtime version + commands */}
             <div className="grid gap-4">
-              <label className="grid gap-1">
-                <span className="text-sm font-medium text-slate-800">Node version</span>
-                <input
-                  disabled={busy}
-                  value={options.nodeVersion}
-                  onChange={(e) => setOption("nodeVersion", e.target.value)}
-                  className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
-                  placeholder="20"
-                />
-              </label>
+              {/* Node.js version: only show for node_app AND build stage enabled */}
+              {template === "node_app" && stages.includes("build") && (
+                <label className="grid gap-1">
+                  <span className="text-sm font-medium text-slate-800">Node.js version</span>
+                  <input
+                    disabled={busy}
+                    value={options.nodeVersion}
+                    onChange={(e) => setOption("nodeVersion", e.target.value)}
+                    className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
+                    placeholder="20"
+                  />
+                </label>
+              )}
 
-              <label className="grid gap-1">
-                <span className="text-sm font-medium text-slate-800">Install command</span>
-                <input
-                  disabled={busy}
-                  value={options.installCmd}
-                  onChange={(e) => setOption("installCmd", e.target.value)}
-                  className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
-                  placeholder="npm ci"
-                />
-              </label>
+              {/* Install command: only show if build stage enabled */}
+              {stages.includes("build") && (
+                <label className="grid gap-1">
+                  <span className="text-sm font-medium text-slate-800">
+                    {template === "node_app"
+                      ? "Install command (npm)"
+                      : template === "python_app"
+                      ? "Install command (pip)"
+                      : "Install command"}
+                  </span>
+                  <input
+                    disabled={busy}
+                    value={options.installCmd}
+                    onChange={(e) => setOption("installCmd", e.target.value)}
+                    className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
+                    placeholder={
+                      template === "node_app"
+                        ? "npm ci"
+                        : template === "python_app"
+                        ? "pip install -r requirements.txt"
+                        : ""
+                    }
+                  />
+                </label>
+              )}
 
-              <label className="grid gap-1">
-                <span className="text-sm font-medium text-slate-800">Test command</span>
-                <input
-                  disabled={busy}
-                  value={options.testCmd}
-                  onChange={(e) => setOption("testCmd", e.target.value)}
-                  className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
-                  placeholder="npm test"
-                />
-              </label>
+              {/* Test command: only show if test stage enabled */}
+              {stages.includes("test") && (
+                <label className="grid gap-1">
+                  <span className="text-sm font-medium text-slate-800">
+                    {template === "node_app"
+                      ? "Test command (npm)"
+                      : template === "python_app"
+                      ? "Test command (pytest)"
+                      : "Test command"}
+                  </span>
+                  <input
+                    disabled={busy}
+                    value={options.testCmd}
+                    onChange={(e) => setOption("testCmd", e.target.value)}
+                    className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
+                    placeholder={
+                      template === "node_app"
+                        ? "npm test"
+                        : template === "python_app"
+                        ? "pytest"
+                        : ""
+                    }
+                  />
+                </label>
+              )}
 
-              <label className="grid gap-1">
-                <span className="text-sm font-medium text-slate-800">Build command</span>
-                <input
-                  disabled={busy}
-                  value={options.buildCmd}
-                  onChange={(e) => setOption("buildCmd", e.target.value)}
-                  className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
-                  placeholder="npm run build"
-                />
-              </label>
+              {/* Build command: only show if build stage enabled */}
+              {stages.includes("build") && (
+                <label className="grid gap-1">
+                  <span className="text-sm font-medium text-slate-800">
+                    {template === "node_app"
+                      ? "Build command (npm)"
+                      : "Build command"}
+                  </span>
+                  <input
+                    disabled={busy}
+                    value={options.buildCmd}
+                    onChange={(e) => setOption("buildCmd", e.target.value)}
+                    className="rounded-md border border-white/25 px-3 py-2 text-sm font-mono text-white bg-white/10 placeholder-white/60 disabled:bg-white/5 disabled:text-slate-400"
+                    placeholder={
+                      template === "node_app"
+                        ? "npm run build"
+                        : ""
+                    }
+                  />
+                </label>
+              )}
             </div>
 
-            {provider === "aws" && (
+            {provider === "aws" && stages.includes("deploy") && (
               <>
               <label className="grid gap-1">
                 <span className="text-sm font-medium">AWS Role (OIDC)</span>

client/src/store/usePipelineStore.ts

@@ -66,6 +66,36 @@ type PipelineActions = {
   setResultYaml(yaml: string): void;
 };
 
+const TEMPLATE_DEFAULT_OPTIONS: Record<string, PipelineState["options"]> = {
+  node_app: {
+    nodeVersion: "20",
+    installCmd: "npm ci",
+    testCmd: "npm test",
+    buildCmd: "npm run build",
+    awsSessionName: "autodeploy",
+    awsRegion: "us-east-1",
+    gcpServiceAccountEmail: "",
+  },
+  python_app: {
+    nodeVersion: "",
+    installCmd: "pip install -r requirements.txt",
+    testCmd: "pytest",
+    buildCmd: "",
+    awsSessionName: "autodeploy",
+    awsRegion: "us-east-1",
+    gcpServiceAccountEmail: "",
+  },
+  container_service: {
+    nodeVersion: "",
+    installCmd: "",
+    testCmd: "",
+    buildCmd: "",
+    awsSessionName: "autodeploy",
+    awsRegion: "us-east-1",
+    gcpServiceAccountEmail: "",
+  },
+};
+
 const initial: PipelineState = {
   template: "node_app",
   stages: ["build", "test", "deploy"],
@@ -91,7 +121,25 @@ export const usePipelineStore = create<PipelineState & PipelineActions>()(
   (set, get) => ({
     ...initial,
 
-    setTemplate: (t) => set({ template: t }),
+    setTemplate: (t) => {
+      const current = get();
+      const preservedProviderFields = {
+        awsRoleArn: current.options.awsRoleArn,
+        awsSessionName: current.options.awsSessionName,
+        awsRegion: current.options.awsRegion,
+        gcpServiceAccountEmail: current.options.gcpServiceAccountEmail,
+      };
+
+      const nextDefaults = TEMPLATE_DEFAULT_OPTIONS[t] ?? TEMPLATE_DEFAULT_OPTIONS["node_app"];
+
+      set({
+        template: t,
+        options: {
+          ...nextDefaults,
+          ...preservedProviderFields,
+        },
+      });
+    },
     setProvider: (p) => set({ provider: p }),
     setProvider: (p) => set({ provider: p }),