Merge branch 'main' into alex

Author: eodafoo

.github/workflows/ci.yml

@@ -0,0 +1,30 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+      - lorenc-server
+
+  workflow_dispatch:
+    inputs:
+      environment:
+        description: 'Target environment'
+        required: false
+        type: string
+        default: 'dev'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY}}
+      PORT: 4000
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run start & sleep 3
+      - run: npm test
+      - run: echo "Deploying to ${{ inputs.environment || 'dev' }}..."

.gitignore

@@ -69,6 +69,8 @@ web_modules/
 .env
 .env.*
 !.env.example
+curl.txt
+
 
 # parcel-bundler cache (https://parceljs.org/)
 .cache

Auto_Generated_Secure_CICD_Pipelines_with_AI_MCP_Demo.pptx

@@ -193,4 +193,6 @@ ALTER TABLE public.deployment_logs
                                │   Deploy Workflow Runs   │
                                │ (build, test, release)   │
                                └──────────────────────────┘
+
+Test
 ```

README.md

@@ -14,7 +14,12 @@ function NeedRepo({ children }: { children: JSX.Element }) {
 }
 function NeedPipeline({ children }: { children: JSX.Element }) {
   const { result } = usePipelineStore();
-  return !result?.generated_yaml ? <Navigate to="/configure" replace /> : children;
+  const hasYaml =
+    result?.generated_yaml ||
+    result?.yaml ||
+    result?.data?.generated_yaml;
+
+  return !hasYaml ? <Navigate to="/configure" replace /> : children;
 }
 
 export default function App() {

client/src/App.tsx

@@ -1,5 +1,7 @@
+import { usePipelineStore } from "../store/usePipelineStore";
+
 export const BASE =
-  import.meta.env.VITE_API_BASE ?? "http://localhost:3333/api";
+  import.meta.env.VITE_API_BASE ?? "http://localhost:3000/api";
 
 // Derive the server base without any trailing "/api" for MCP calls
 const SERVER_BASE = BASE.replace(/\/api$/, "");
@@ -37,7 +39,7 @@ export const api = {
     const data = await mcp<{
       repositories: { name: string; full_name: string; branches?: string[] }[];
     }>("repo_reader", {});
-    const repos = (data?.repositories ?? []).map((r) => r.full_name);
+    const repos = (data?.data?.repositories ?? []).map((r) => r.full_name);
     return { repos };
   },
 
@@ -46,7 +48,7 @@ export const api = {
     const data = await mcp<{
       repositories: { name: string; full_name: string; branches?: string[] }[];
     }>("repo_reader", {});
-    const item = (data?.repositories ?? []).find((r) => r.full_name === repo);
+    const item = (data?.data?.repositories ?? []).find((r) => r.full_name === repo);
     return { branches: item?.branches ?? [] };
   },
 
@@ -139,35 +141,82 @@ export const api = {
     return { results };
   },
 
-  // --- Mock deploy APIs for Dashboard ---
-  async startDeploy({ repo, env }: { repo: string; env: string }) {
-    const jobId = `job_${Math.random().toString(36).slice(2)}`;
-    // Stash minimal job info in memory for the stream to reference
-    JOBS.set(jobId, { repo, env, startedAt: Date.now() });
-    return { jobId } as const;
-  },
+  // --- Deploy APIs for Dashboard ---
+async startDeploy({
+  repoFullName: fromCallerRepo,
+  branch,
+  env,
+  yaml: fromCallerYaml,
+  provider,
+  path,
+}: {
+  repoFullName?: string;
+  branch?: string;
+  env?: string;
+  yaml?: string;
+  provider?: string;
+  path?: string;
+}) {
+  const pipelineStore = usePipelineStore.getState();
+  const repoFullName = fromCallerRepo || pipelineStore?.repoFullName || pipelineStore?.result?.repo;
+  const selectedBranch = branch || pipelineStore?.selectedBranch || "main";
+  const yaml = pipelineStore?.result?.generated_yaml;
+  const environment = env || pipelineStore?.environment || "dev";
+
+  const providerFinal = provider || pipelineStore?.provider || "aws";
+  const pathFinal = path || `.github/workflows/${environment}-deploy.yml`;
+
+  console.group("[Deploy Debug]");
+  console.log("repoFullName:", repoFullName);
+  console.log("selectedBranch:", selectedBranch);
+  console.log("environment:", environment);
+  console.log("provider:", providerFinal);
+  console.log("path:", pathFinal);
+  console.log("YAML length:", yaml ? yaml.length : 0);
+  console.groupEnd();
+
+  const payload = {
+    repoFullName,
+    branch: selectedBranch,
+    env: environment,
+    yaml,
+    provider: providerFinal,
+    path: pathFinal,
+  };
+
+  console.log("[Deploy] Final payload:", payload);
+
+  const res = await fetch(`${SERVER_BASE}/mcp/v1/pipeline_commit`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify(payload),
+  });
+
+  const data = await res.json().catch(() => ({}));
+
+  console.group("[Deploy Response]");
+  console.log("Status:", res.status);
+  console.log("Data:", data);
+  console.groupEnd();
+
+  if (!res.ok) throw new Error(`Pipeline commit failed: ${res.statusText}`);
+  return data;
+},
 
-  streamJob(
-    jobId: string,
-    onEvent: (e: { ts: string; level: "info" | "warn" | "error"; msg: string }) => void
-  ) {
-    const meta = JOBS.get(jobId) || { repo: "?", env: "dev" };
+  streamJob(_jobId: string, onEvent: (e: { ts: string; level: "info"; msg: string }) => void) {
     const steps = [
-      `Authenticating to AWS (${meta.env})`,
-      `Assuming role`,
-      `Validating permissions`,
-      `Building artifacts`,
-      `Deploying ${meta.repo}`,
-      `Verifying rollout`,
-      `Done`
+      "Connecting to GitHub...",
+      "Committing workflow file...",
+      "Verifying commit...",
+      "Done ✅"
     ];
     let i = 0;
     const timer = setInterval(() => {
       if (i >= steps.length) return;
-      const level = i === steps.length - 1 ? "info" : "info";
-      onEvent({ ts: new Date().toISOString(), level, msg: steps[i++] });
+      onEvent({ ts: new Date().toISOString(), level: "info", msg: steps[i++] });
       if (i >= steps.length) clearInterval(timer);
-    }, 800);
+    }, 600);
     return () => clearInterval(timer);
   },
 

client/src/lib/api.ts

@@ -1,15 +1,39 @@
 import { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useRepoStore } from "../store/useRepoStore";
 import { usePipelineStore } from "../store/usePipelineStore";
 
 export default function ConfigurePage() {
   const { repo, branch } = useRepoStore();
   const pipeline = usePipelineStore();
+  const navigate = useNavigate();
 
-  // Load available AWS roles once
+  // Log on mount with repo, branch, and navigate check
   useEffect(() => {
-    pipeline.loadAwsRoles?.().catch(console.error);
+    console.log("[ConfigurePage] Mounted. Repo:", repo, "Branch:", branch);
+    if (!navigate) console.warn("[ConfigurePage] ⚠️ navigate() not initialized!");
+  }, [repo, branch, navigate]);
+
+  // Load available AWS roles once, safely
+  useEffect(() => {
+    let loaded = false;
+
+    async function init() {
+      if (loaded) return;
+      loaded = true;
+      try {
+        console.log("[ConfigurePage] Loading AWS roles once...");
+        await pipeline.loadAwsRoles?.();
+
+        // Re-read roles from store after load completes
+        const updatedRoles = usePipelineStore.getState().roles;
+        console.log("[ConfigurePage] Roles (after load):", updatedRoles);
+      } catch (err) {
+        console.error("Failed to load AWS roles:", err);
+      }
+    }
+
+    init();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -22,6 +46,7 @@ export default function ConfigurePage() {
     setBusy(false);
   }
 
+  console.log("[ConfigurePage] pipeline.result:", pipeline.result);
   return (
     <section style={{ display: "grid", gap: 16 }}>
       <h1>Configure Pipeline</h1>
@@ -60,23 +85,45 @@ export default function ConfigurePage() {
 
       <label>
         AWS Role (OIDC)
-        <select value={pipeline.options.awsRoleArn ?? ""} onChange={(e)=>pipeline.setOption("awsRoleArn", e.target.value)} style={{ display: "block", padding: 8 }}>
+        <select disabled={busy} value={pipeline.options.awsRoleArn ?? ""} onChange={(e)=>pipeline.setOption("awsRoleArn", e.target.value)} style={{ display: "block", padding: 8 }}>
           <option value="">-- select --</option>
-          {pipeline.roles?.map((r) => <option key={r} value={r}>{r}</option>)}
+          {pipeline.roles?.map((r) => (
+            <option key={r.arn} value={r.arn}>
+              {r.name}
+            </option>
+          ))}
         </select>
       </label>
 
       <div style={{ display: "flex", gap: 8 }}>
         <button onClick={onGenerate} disabled={busy}>{busy ? "Generating…" : "Generate Pipeline"}</button>
-        <Link to="/secrets">
-          <button disabled={!pipeline.result?.generated_yaml}>Continue → Secrets</button>
-        </Link>
+        <button
+          onClick={() => {
+            console.log("[ConfigurePage] Navigate button clicked.");
+            console.log("[ConfigurePage] Pipeline result before navigating:", pipeline.result);
+            try {
+              navigate("/secrets", { state: { pipeline: pipeline.result } });
+              console.log("[ConfigurePage] ✅ Navigation triggered successfully.");
+            } catch (err) {
+              console.error("[ConfigurePage] ❌ Navigation failed:", err);
+            }
+          }}
+          disabled={
+            !(
+              pipeline.result?.yaml ||
+              pipeline.result?.generated_yaml ||
+              pipeline.result?.data?.generated_yaml
+            )
+          }
+        >
+          Continue → Secrets
+        </button>
       </div>
 
       <div>
         <div>YAML Preview</div>
-        <pre style={{ maxHeight: 400, overflow: "auto", background: "#f6f6f6", padding: 12 }}>
-{pipeline.result?.generated_yaml ?? "Click Generate Pipeline to preview YAML…"}
+        <pre style={{ maxHeight: 400, overflow: "auto", background: "#131212ff", padding: 12 }}>
+{pipeline.result?.yaml ?? pipeline.result?.generated_yaml ?? "Click Generate Pipeline to preview YAML…"}
         </pre>
       </div>
     </section>

client/src/pages/ConfigurePage.tsx

@@ -7,8 +7,13 @@ import { useDeployStore } from "../store/useDeployStore";
 export default function DashboardPage() {
   const { repo } = useRepoStore();
   const { result } = usePipelineStore();
+  console.log("Debug: result.generated_yaml =", result?.generated_yaml);
   const cfg = useConfigStore();
 
+  console.log("Debug: repo =", repo);
+  console.log("Debug: cfg.env =", cfg.env);
+  console.log("Debug: result =", result);
+
   // Select stable slices from the deploy store to avoid effect loops
   const running = useDeployStore((s) => s.running);
   const events = useDeployStore((s) => s.events);
@@ -34,23 +39,48 @@ export default function DashboardPage() {
         <div style={{ color: "#666", fontSize: 12 }}>
           {result?.pipeline_name} · Generated {result ? new Date(result.created_at).toLocaleString() : "—"}
         </div>
-        <pre style={{ maxHeight: 280, overflow: "auto", background: "#f6f6f6", padding: 12 }}>
+        <pre style={{ maxHeight: 280, overflow: "auto", background: "#1e1c1cff", padding: 12 }}>
 {result?.generated_yaml ?? "No pipeline generated yet."}
         </pre>
       </div>
 
       <div>
         <button
           disabled={running}
-          onClick={() => startDeploy({ repo: repo!, env: cfg.env })}
+          onClick={() => {
+            const repoFullName = result?.repo || repo;
+            const yaml = result?.generated_yaml;
+            const branch = result?.branch || "main";
+            const environment = cfg.env || "dev";
+            const provider = "aws";
+            const path = `.github/workflows/${environment}-deploy.yml`;
+
+            console.log("Deploy button clicked with payload:", {
+              repoFullName,
+              branch,
+              env: environment,
+              yaml: yaml ? yaml.slice(0, 100) + "..." : "No YAML",
+              provider,
+              path,
+            });
+
+            startDeploy({
+              repoFullName,
+              branch,
+              env: environment,
+              yaml,
+              provider,
+              path,
+            });
+          }}
         >
-          {running ? "Deploying…" : "Deploy to AWS"}
+          {running ? "Committing…" : "Commit to GitHub"}
         </button>
         {running && <button onClick={stop} style={{ marginLeft: 8 }}>Stop</button>}
       </div>
 
       <div>
-        <strong>Logs</strong>
+        <strong>Commit Logs</strong>
         <div style={{ height: 280, overflow: "auto", background: "#111", color: "#ddd", padding: 12, fontFamily: "monospace", fontSize: 12 }}>
           {events.length === 0 ? "No logs yet." :
             events.map((e, i) => (

client/src/pages/DashboardPage.tsx

@@ -10,15 +10,29 @@ export default function DeployPage() {
     // loadRoles();
   }, []);
 
+  function startCommit() {
+    // Placeholder function to start commit process
+    console.log("Commit to GitHub started");
+  }
+
   return (
     <div className="p-6 max-w-2xl mx-auto space-y-4">
+      <h2 className="text-lg font-semibold">Commit Workflow to GitHub</h2>
       {!repo || !branch ? (
         <p className="text-sm text-orange-700">Pick a repo/branch on Connect first.</p>
       ) : (
-        <p className="text-sm opacity-80">Deploying <strong>{repo}</strong> @ <strong>{branch}</strong></p>
+        <>
+          <p className="text-sm opacity-80">Committing workflow to <strong>GitHub</strong> for <strong>{repo}</strong> @ <strong>{branch}</strong></p>
+          <button
+            className="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+            onClick={startCommit}
+          >
+            Commit to GitHub
+          </button>
+        </>
       )}
 
-      {/* role picker + open PR button go here, wired to your deploy store */}
+      {/* role picker + commit to GitHub button go here, wired to your deploy store */}
     </div>
   );
 }