create-interview-cockpit 0.23.0 → 0.23.2

package/template/client/src/components/GithubActionsLabModal.tsx

@@ -5,6 +5,8 @@ import {
   Copy,
   FilePlus,
   Folder,
+  GitBranch,
+  KeyRound,
   ListChecks,
   Loader2,
   Maximize2,
@@ -37,10 +39,19 @@ import {
   serializeGhaLabWorkspace,
 } from "../githubActionsLab";
 import type { GithubActionsLabWorkspace } from "../types";
+import type { GithubActionsLabEnvironmentEntry } from "../types";
 import * as api from "../api";
 import type { GhaJobSnapshot, GhaStreamMessage } from "../api";
 import GhaJobsPanel from "./GhaJobsPanel";
 import GhaHistoryPanel from "./GhaHistoryPanel";
+import GhaConcurrencyPanel from "./GhaConcurrencyPanel";
+import {
+  defaultContextForEvent,
+  evaluateConcurrencyFor,
+  parseConcurrencyBlock,
+  type GhaConcurrencyContext,
+  type GhaConcurrencyRun,
+} from "../ghaConcurrency";
 
 // ─── Modal layout constants ──────────────────────────────────────────────
 
@@ -226,6 +237,44 @@ interface ConsoleLine {
   text: string;
 }
 
+type GhaEnvironmentKind = "variables" | "secrets" | "env";
+
+const GHA_ENV_NAME_RE = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+const GHA_ENVIRONMENT_SECTIONS: Array<{
+  kind: GhaEnvironmentKind;
+  title: string;
+  addLabel: string;
+  namePlaceholder: string;
+  valuePlaceholder: string;
+  help: string;
+}> = [
+  {
+    kind: "variables",
+    title: "Repository variables",
+    addLabel: "Add variable",
+    namePlaceholder: "API_URL",
+    valuePlaceholder: "https://example.test",
+    help: "Available in workflows as `${{ vars.NAME }}` through act's --var-file.",
+  },
+  {
+    kind: "secrets",
+    title: "Repository secrets",
+    addLabel: "Add secret",
+    namePlaceholder: "NPM_TOKEN",
+    valuePlaceholder: "secret value",
+    help: "Available in workflows as `${{ secrets.NAME }}` through act's --secret-file.",
+  },
+  {
+    kind: "env",
+    title: "Runner environment",
+    addLabel: "Add env",
+    namePlaceholder: "NODE_ENV",
+    valuePlaceholder: "test",
+    help: "Available to shell steps as environment variables, e.g. `$NAME`, through act's --env-file.",
+  },
+];
+
 export default function GithubActionsLabModal() {
   const {
     closeGhaLab,
@@ -279,15 +328,55 @@ export default function GithubActionsLabModal() {
   // Live job snapshots reported by the server during the active run.
   // Reset every time the user kicks off a new run.
   const [liveJobs, setLiveJobs] = useState<GhaJobSnapshot[]>([]);
-  // "console" | "jobs" | "history" — controls the right pane tab.
-  const [rightTab, setRightTab] = useState<"console" | "jobs" | "history">(
-    "console",
+  // "console" | "jobs" | "env" | "concurrency" | "history" — controls the right pane tab.
+  const [rightTab, setRightTab] = useState<
+    "console" | "jobs" | "env" | "concurrency" | "history"
+  >("console");
+  const environmentEntryCount = useMemo(
+    () =>
+      GHA_ENVIRONMENT_SECTIONS.reduce((total, section) => {
+        return (
+          total +
+          (workspace.environment?.[section.kind] ?? []).filter(
+            (entry) => entry.enabled !== false && entry.name.trim(),
+          ).length
+        );
+      }, 0),
+    [workspace.environment],
   );
   // Bumped each time a run completes so the History tab refetches.
   const [historyNonce, setHistoryNonce] = useState(0);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
   const abortRef = useRef<AbortController | null>(null);
+  // ── Concurrency engine state ───────────────────────────────────────
+  // The concurrency tab is no longer a simulator — these records track
+  // real `act` invocations so we can apply GitHub's queue/cancel rules
+  // when the user clicks Run a second time before the first finishes.
+  const [concurrencyRuns, setConcurrencyRuns] = useState<GhaConcurrencyRun[]>(
+    [],
+  );
+  const [concurrencyContext, setConcurrencyContext] =
+    useState<GhaConcurrencyContext>(() =>
+      defaultContextForEvent(
+        workspace.defaultEvent ?? "push",
+        workspace.defaultWorkflow ?? ".github/workflows/ci.yml",
+        "main",
+        42,
+        "feature/login",
+      ),
+    );
+  // Mirrors of state used inside async callbacks to dodge stale closures
+  // when the runner finishes and needs to drain the next pending run.
+  const concurrencyRunsRef = useRef<GhaConcurrencyRun[]>([]);
+  const activeRunIdRef = useRef<string | null>(null);
+  const runSeqRef = useRef(0);
+  const runConcurrencyRunRef = useRef<
+    ((run: GhaConcurrencyRun) => Promise<void>) | null
+  >(null);
+  useEffect(() => {
+    concurrencyRunsRef.current = concurrencyRuns;
+  }, [concurrencyRuns]);
   const consoleEndRef = useRef<HTMLDivElement | null>(null);
   const monacoRef = useRef<Monaco | null>(null);
   const monacoModelUrisRef = useRef<Set<string>>(new Set());
@@ -874,6 +963,48 @@ export default function GithubActionsLabModal() {
     setBulkMenuOpen(false);
   };
 
+  // ── GitHub Actions environment inputs ─────────────────────────────
+  const getEnvironmentRows = (kind: GhaEnvironmentKind) =>
+    workspace.environment?.[kind] ?? [];
+
+  const setEnvironmentRows = (
+    kind: GhaEnvironmentKind,
+    rows: GithubActionsLabEnvironmentEntry[],
+  ) => {
+    setWorkspace((prev) => ({
+      ...prev,
+      environment: {
+        ...(prev.environment ?? {}),
+        [kind]: rows,
+      },
+    }));
+  };
+
+  const addEnvironmentEntry = (kind: GhaEnvironmentKind) => {
+    const rows = getEnvironmentRows(kind);
+    setEnvironmentRows(kind, [...rows, { name: "", value: "", enabled: true }]);
+    setRightTab("env");
+  };
+
+  const updateEnvironmentEntry = (
+    kind: GhaEnvironmentKind,
+    index: number,
+    patch: Partial<GithubActionsLabEnvironmentEntry>,
+  ) => {
+    const rows = getEnvironmentRows(kind).slice();
+    const current = rows[index];
+    if (!current) return;
+    rows[index] = { ...current, ...patch };
+    setEnvironmentRows(kind, rows);
+  };
+
+  const removeEnvironmentEntry = (kind: GhaEnvironmentKind, index: number) => {
+    setEnvironmentRows(
+      kind,
+      getEnvironmentRows(kind).filter((_, i) => i !== index),
+    );
+  };
+
   // ── Save lab as context file ──────────────────────────────────────
   const handleSave = useCallback(async () => {
     if (!currentQuestion) return;
@@ -978,7 +1109,10 @@ export default function GithubActionsLabModal() {
   }, []);
 
   const runCommand = useCallback(
-    async (command: string) => {
+    async (run: GhaConcurrencyRun) => {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      activeRunIdRef.current = run.id;
       setRunning(true);
       setRunError(null);
       // Reset the DAG so the user always sees a fresh "pending → running →
@@ -986,12 +1120,25 @@ export default function GithubActionsLabModal() {
       // so the visualisation is immediately visible.
       setLiveJobs([]);
       setRightTab("jobs");
-      appendConsole({ kind: "input", text: `$ ${command}\n` });
+      appendConsole({ kind: "input", text: `$ ${run.command}\n` });
+
+      // Flip this run's record to running so the Concurrency panel ticks.
+      setConcurrencyRuns((rs) =>
+        rs.map((r) =>
+          r.id === run.id
+            ? { ...r, status: "running", startedAt: Date.now() }
+            : r,
+        ),
+      );
+
+      let exitCode: number | undefined;
+      let didError = false;
+      let errorMsg = "";
 
       try {
         await api.streamGhaCommand(
           {
-            command,
+            command: run.command,
             workspace: {
               ...workspace,
               activeFile,
@@ -1023,6 +1170,7 @@ export default function GithubActionsLabModal() {
                 text: `\n[error] ${message.error}\n`,
               });
             } else if (message.type === "complete") {
+              exitCode = message.exitCode;
               appendConsole({
                 kind: "info",
                 text: `\n[done] exit=${message.exitCode} • ${message.durationMs}ms\n`,
@@ -1031,13 +1179,54 @@ export default function GithubActionsLabModal() {
               setHistoryNonce((n) => n + 1);
             }
           },
+          { signal: controller.signal },
         );
       } catch (err: any) {
-        const msg = err?.message || "Failed to start run";
-        setRunError(msg);
-        appendConsole({ kind: "stderr", text: `\n[error] ${msg}\n` });
+        if (controller.signal.aborted) {
+          // The run was cancelled (either by the user or by a newer run
+          // that supersedes it). Its record was already marked cancelled
+          // — do not surface the AbortError as a normal failure.
+          appendConsole({
+            kind: "info",
+            text: `\n[cancelled] run #${run.seq}\n`,
+          });
+        } else {
+          didError = true;
+          errorMsg = err?.message || "Failed to start run";
+          setRunError(errorMsg);
+          appendConsole({ kind: "stderr", text: `\n[error] ${errorMsg}\n` });
+        }
       } finally {
+        abortRef.current = null;
+        activeRunIdRef.current = null;
         setRunning(false);
+
+        // Finalise this run's record. If the enqueue path already marked
+        // it cancelled (preempted by a newer run) keep that status.
+        setConcurrencyRuns((rs) =>
+          rs.map((r) => {
+            if (r.id !== run.id) return r;
+            if (r.status === "cancelled") return r;
+            return {
+              ...r,
+              status: didError ? "cancelled" : "completed",
+              endedAt: Date.now(),
+              ...(exitCode !== undefined ? { exitCode } : {}),
+              ...(didError ? { cancelReason: errorMsg } : {}),
+            };
+          }),
+        );
+
+        // Drain the queue: pick the oldest pending and start it. We use
+        // the ref to dodge the stale snapshot inside this async closure.
+        const pending = concurrencyRunsRef.current.find(
+          (r) => r.status === "pending",
+        );
+        if (pending) {
+          window.setTimeout(() => {
+            runConcurrencyRunRef.current?.(pending);
+          }, 0);
+        }
       }
     },
     [
@@ -1051,10 +1240,133 @@ export default function GithubActionsLabModal() {
       appendConsole,
     ],
   );
+  useEffect(() => {
+    runConcurrencyRunRef.current = runCommand;
+  }, [runCommand]);
+
+  /**
+   * Enqueue a new run. Evaluates the active workflow's concurrency block
+   * against the current github.* context to decide whether to cancel the
+   * in-flight run, drop older pendings in the same group, or just queue.
+   */
+  const enqueueRun = useCallback(
+    (command: string) => {
+      const parsed = parseConcurrencyBlock(
+        workflow ? workspace.files[workflow] : undefined,
+      );
+      const ctx: GhaConcurrencyContext = {
+        ...concurrencyContext,
+        event_name: event,
+      };
+      const { groupKey, cancelInProgress } = evaluateConcurrencyFor(
+        parsed,
+        ctx,
+      );
+
+      runSeqRef.current += 1;
+      const seq = runSeqRef.current;
+      const newRun: GhaConcurrencyRun = {
+        id: `${seq}-${Math.random().toString(36).slice(2, 8)}`,
+        seq,
+        command,
+        eventName: event,
+        workflowPath: workflow,
+        groupKey,
+        cancelInProgress,
+        context: ctx,
+        status: "pending",
+      };
 
-  const handleRun = () => runCommand(buildCommand());
+      // We need to know whether anything was actively running BEFORE we
+      // mutate state — if so, the drain in runCommand's finally will
+      // pick up the new pending; otherwise we kick it ourselves.
+      const wasIdle = !activeRunIdRef.current;
+      let preemptedActive = false;
+
+      setConcurrencyRuns((prev) => {
+        const updated = [...prev];
+
+        // Rule 1: same group + new.cancelInProgress=true cancels the
+        // currently running sibling. Empty groupKey means "no concurrency
+        // block" and never coalesces with anything.
+        if (groupKey) {
+          const activeIdx = updated.findIndex((r) => r.status === "running");
+          if (activeIdx >= 0) {
+            const active = updated[activeIdx];
+            if (active.groupKey === groupKey && newRun.cancelInProgress) {
+              updated[activeIdx] = {
+                ...active,
+                status: "cancelled",
+                endedAt: Date.now(),
+                cancelReason: `superseded by run #${seq}`,
+              };
+              preemptedActive = true;
+            }
+          }
+
+          // Rule 2: GitHub keeps at most ONE pending per group. Any older
+          // pending in the same group gets cancelled by the newcomer.
+          for (let i = 0; i < updated.length; i += 1) {
+            const r = updated[i];
+            if (r.status === "pending" && r.groupKey === groupKey) {
+              updated[i] = {
+                ...r,
+                status: "cancelled",
+                endedAt: Date.now(),
+                cancelReason: `superseded by pending run #${seq}`,
+              };
+            }
+          }
+        }
+
+        updated.push(newRun);
+        return updated;
+      });
+
+      // Abort the in-flight fetch AFTER the state mutation so runCommand's
+      // catch path sees the record already marked cancelled and won't
+      // overwrite the supersede reason.
+      if (preemptedActive) {
+        abortRef.current?.abort();
+      } else if (wasIdle) {
+        window.setTimeout(() => {
+          runConcurrencyRunRef.current?.(newRun);
+        }, 0);
+      }
+    },
+    [workflow, workspace.files, concurrencyContext, event],
+  );
+
+  const handleRun = () => enqueueRun(buildCommand());
   const handleListJobs = () =>
-    runCommand(workflow ? `act -W ${workflow} -l` : "act -l");
+    enqueueRun(workflow ? `act -W ${workflow} -l` : "act -l");
+
+  /** Cancel the currently running act invocation. */
+  const stopActiveRun = useCallback(() => {
+    const activeId = activeRunIdRef.current;
+    if (!activeId) return;
+    setConcurrencyRuns((rs) =>
+      rs.map((r) =>
+        r.id === activeId
+          ? {
+              ...r,
+              status: "cancelled",
+              endedAt: Date.now(),
+              cancelReason: "stopped by user",
+            }
+          : r,
+      ),
+    );
+    abortRef.current?.abort();
+  }, []);
+
+  // Keep the Concurrency panel's context.event_name in sync with the
+  // toolbar event picker so the read-only field always reflects reality.
+  useEffect(() => {
+    setConcurrencyContext((prev) =>
+      prev.event_name === event ? prev : { ...prev, event_name: event },
+    );
+  }, [event]);
 
   const clearConsole = () => setConsoleLines([]);
 
@@ -1109,7 +1421,7 @@ export default function GithubActionsLabModal() {
     const cmd = consoleInput.trim();
     if (!cmd || running) return;
     setConsoleInput("");
-    runCommand(cmd);
+    enqueueRun(cmd);
   };
 
   // ── Monaco config ─────────────────────────────────────────────────
@@ -1831,7 +2143,7 @@ interface ImportMeta {
             </div>
           </div>
 
-          {/* Right pane: tabbed Console / Jobs / History */}
+          {/* Right pane: tabbed Console / Jobs / Env / History */}
           <div
             className="min-h-0 flex flex-col bg-slate-950 overflow-hidden"
             style={{
@@ -1845,6 +2157,8 @@ interface ImportMeta {
                   [
                     { id: "console", label: "Console" },
                     { id: "jobs", label: "Jobs" },
+                    { id: "env", label: "Env" },
+                    { id: "concurrency", label: "Concurrency" },
                     { id: "history", label: "History" },
                   ] as const
                 ).map((t) => (
@@ -1860,19 +2174,30 @@ interface ImportMeta {
                     {t.id === "console" && (
                       <Terminal className="inline w-3 h-3 mr-1 -mt-px" />
                     )}
+                    {t.id === "env" && (
+                      <KeyRound className="inline w-3 h-3 mr-1 -mt-px" />
+                    )}
+                    {t.id === "concurrency" && (
+                      <GitBranch className="inline w-3 h-3 mr-1 -mt-px" />
+                    )}
                     {t.label}
                     {t.id === "jobs" && running && (
                       <span className="ml-1 inline-block w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
                     )}
+                    {t.id === "env" && environmentEntryCount > 0 && (
+                      <span className="ml-1 rounded bg-amber-500/15 px-1 text-[10px] text-amber-200">
+                        {environmentEntryCount}
+                      </span>
+                    )}
                   </button>
                 ))}
               </div>
               <div className="flex items-center gap-1">
                 {running && (
                   <button
-                    onClick={() => abortRef.current?.abort()}
+                    onClick={stopActiveRun}
                     className="p-1 rounded text-amber-300 hover:bg-slate-800/60"
-                    title="Stop (close & restart to fully cancel)"
+                    title="Cancel the running act invocation"
                   >
                     <StopCircle className="w-3.5 h-3.5" />
                   </button>
@@ -1964,6 +2289,153 @@ interface ImportMeta {
               />
             )}
 
+            {rightTab === "env" && (
+              <div className="flex-1 min-h-0 overflow-auto p-3 text-xs text-slate-300">
+                <div className="mb-3 rounded-xl border border-amber-500/20 bg-amber-500/5 p-3">
+                  <div className="mb-1 flex items-center gap-2 text-sm font-semibold text-amber-200">
+                    <KeyRound className="h-4 w-4" />
+                    GitHub-style act inputs
+                  </div>
+                  <p className="leading-5 text-slate-400">
+                    These are written to temporary act files for each run:
+                    variables become{" "}
+                    <span className="text-amber-200">vars.*</span>, secrets
+                    become <span className="text-amber-200">secrets.*</span>,
+                    and runner env values become shell environment variables.
+                    Use fake or local-only values; saved lab snapshots store
+                    these values as plain text.
+                  </p>
+                </div>
+
+                <div className="space-y-3">
+                  {GHA_ENVIRONMENT_SECTIONS.map((section) => {
+                    const rows = getEnvironmentRows(section.kind);
+                    return (
+                      <section
+                        key={section.kind}
+                        className="rounded-xl border border-slate-800 bg-slate-900/40"
+                      >
+                        <div className="flex items-start justify-between gap-2 border-b border-slate-800/70 px-3 py-2">
+                          <div>
+                            <h3 className="text-[11px] font-semibold uppercase tracking-wider text-slate-200">
+                              {section.title}
+                            </h3>
+                            <p className="mt-0.5 text-[11px] leading-4 text-slate-500">
+                              {section.help}
+                            </p>
+                          </div>
+                          <button
+                            onClick={() => addEnvironmentEntry(section.kind)}
+                            className="shrink-0 rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:border-amber-500/40 hover:text-amber-200"
+                          >
+                            {section.addLabel}
+                          </button>
+                        </div>
+
+                        <div className="space-y-2 p-3">
+                          {rows.length === 0 ? (
+                            <button
+                              onClick={() => addEnvironmentEntry(section.kind)}
+                              className="w-full rounded-lg border border-dashed border-slate-700 px-3 py-3 text-left text-[11px] text-slate-500 hover:border-amber-500/40 hover:text-amber-200"
+                            >
+                              No entries yet — click to add one.
+                            </button>
+                          ) : (
+                            rows.map((row, index) => {
+                              const nameIsValid =
+                                !row.name.trim() ||
+                                GHA_ENV_NAME_RE.test(row.name.trim());
+                              return (
+                                <div
+                                  key={`${section.kind}-${index}`}
+                                  className="rounded-lg border border-slate-800 bg-slate-950/60 p-2"
+                                >
+                                  <div className="grid grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)_auto] gap-2">
+                                    <input
+                                      value={row.name}
+                                      onChange={(e) =>
+                                        updateEnvironmentEntry(
+                                          section.kind,
+                                          index,
+                                          { name: e.target.value },
+                                        )
+                                      }
+                                      placeholder={section.namePlaceholder}
+                                      className={`min-w-0 rounded border bg-slate-900 px-2 py-1.5 font-mono text-[11px] text-slate-100 outline-none placeholder:text-slate-600 ${
+                                        nameIsValid
+                                          ? "border-slate-700 focus:border-amber-500/60"
+                                          : "border-red-500/60 focus:border-red-400"
+                                      }`}
+                                    />
+                                    <input
+                                      type={
+                                        section.kind === "secrets"
+                                          ? "password"
+                                          : "text"
+                                      }
+                                      value={row.value}
+                                      onChange={(e) =>
+                                        updateEnvironmentEntry(
+                                          section.kind,
+                                          index,
+                                          { value: e.target.value },
+                                        )
+                                      }
+                                      placeholder={section.valuePlaceholder}
+                                      className="min-w-0 rounded border border-slate-700 bg-slate-900 px-2 py-1.5 font-mono text-[11px] text-slate-100 outline-none placeholder:text-slate-600 focus:border-amber-500/60"
+                                    />
+                                    <button
+                                      onClick={() =>
+                                        removeEnvironmentEntry(
+                                          section.kind,
+                                          index,
+                                        )
+                                      }
+                                      className="rounded px-2 text-slate-500 hover:bg-red-500/10 hover:text-red-300"
+                                      title="Remove entry"
+                                    >
+                                      <Trash2 className="h-3.5 w-3.5" />
+                                    </button>
+                                  </div>
+                                  {!nameIsValid && (
+                                    <div className="mt-1 text-[10px] text-red-300">
+                                      Use letters, numbers, and underscores; do
+                                      not start with a number.
+                                    </div>
+                                  )}
+                                </div>
+                              );
+                            })
+                          )}
+                        </div>
+                      </section>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+
+            {rightTab === "concurrency" && (
+              <GhaConcurrencyPanel
+                parsed={parseConcurrencyBlock(
+                  workflow ? workspace.files[workflow] : undefined,
+                )}
+                workflowPath={workflow}
+                runs={concurrencyRuns}
+                context={concurrencyContext}
+                onContextChange={setConcurrencyContext}
+                onClearRuns={() => {
+                  // Only clear finished records; keep the active/pending
+                  // ones because the queue depends on them.
+                  setConcurrencyRuns((rs) =>
+                    rs.filter(
+                      (r) => r.status === "running" || r.status === "pending",
+                    ),
+                  );
+                }}
+              />
+            )}
+
             {rightTab === "history" && (
               <GhaHistoryPanel
                 {...(currentQuestion ? { questionId: currentQuestion.id } : {})}