create-interview-cockpit 0.22.0 → 0.23.1

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

@@ -2,8 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   ChevronDown,
   ChevronRight,
+  Copy,
   FilePlus,
   Folder,
+  GitBranch,
+  KeyRound,
+  ListChecks,
   Loader2,
   Maximize2,
   Minimize2,
@@ -11,6 +15,7 @@ import {
   PanelLeftOpen,
   PanelRightClose,
   PanelRightOpen,
+  Pencil,
   Play,
   Save,
   StopCircle,
@@ -34,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 ──────────────────────────────────────────────
 
@@ -66,6 +80,120 @@ function baseName(filePath: string): string {
   return filePath.split("/").pop() || filePath;
 }
 
+function folderName(filePath: string): string {
+  const idx = filePath.lastIndexOf("/");
+  return idx === -1 ? "" : filePath.slice(0, idx);
+}
+
+function joinLabPath(folder: string, name: string): string {
+  return folder ? `${folder}/${name}` : name;
+}
+
+function getKnownFolders(paths: string[]): Set<string> {
+  const folders = new Set<string>([""]);
+  for (const filePath of paths) {
+    const parts = folderName(filePath).split("/").filter(Boolean);
+    for (let i = 1; i <= parts.length; i += 1) {
+      folders.add(parts.slice(0, i).join("/"));
+    }
+  }
+  return folders;
+}
+
+function normalizeDestinationInput(input: string): {
+  path: string;
+  isDirectoryHint: boolean;
+  error?: string;
+} {
+  const raw = input.trim().replace(/\\/g, "/");
+  if (!raw) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Enter a destination path.",
+    };
+  }
+  if (raw.startsWith("/") || /^[a-zA-Z]:\//.test(raw)) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Use a relative path inside the lab workspace.",
+    };
+  }
+
+  const isDirectoryHint = raw === "." || raw.endsWith("/");
+  let value = raw;
+  while (value.startsWith("./")) value = value.slice(2);
+  value = value.replace(/\/+/g, "/");
+  if (value === ".") value = "";
+  value = value.replace(/\/+$/, "");
+
+  const segments = value ? value.split("/") : [];
+  if (
+    segments.some(
+      (segment) =>
+        !segment ||
+        segment === "." ||
+        segment === ".." ||
+        segment.includes("\0"),
+    )
+  ) {
+    return {
+      path: "",
+      isDirectoryHint: false,
+      error: "Destination paths cannot contain empty, '.', or '..' segments.",
+    };
+  }
+
+  return { path: segments.join("/"), isDirectoryHint };
+}
+
+function resolveDestinationPath(
+  input: string,
+  sourceFile: string,
+  knownFolders: Set<string>,
+): string | null {
+  const normalized = normalizeDestinationInput(input);
+  if (normalized.error) {
+    window.alert(normalized.error);
+    return null;
+  }
+
+  let target = normalized.path;
+  if (normalized.isDirectoryHint || knownFolders.has(target)) {
+    target = joinLabPath(target, baseName(sourceFile));
+  }
+
+  if (!target) {
+    window.alert("Destination file path is required.");
+    return null;
+  }
+  return target;
+}
+
+function getCopyCandidatePath(
+  sourceFile: string,
+  existingPaths: Set<string>,
+  targetFolder = folderName(sourceFile),
+): string {
+  const sourceName = baseName(sourceFile);
+  const dot = sourceName.lastIndexOf(".");
+  const hasExtension = dot > 0;
+  const stem = hasExtension ? sourceName.slice(0, dot) : sourceName;
+  const ext = hasExtension ? sourceName.slice(dot) : "";
+  let count = 1;
+
+  while (true) {
+    const marker = count === 1 ? "copy" : `copy-${count}`;
+    const nextName = hasExtension
+      ? `${stem}.${marker}${ext}`
+      : `${sourceName}.${marker}`;
+    const candidate = joinLabPath(targetFolder, nextName);
+    if (!existingPaths.has(candidate)) return candidate;
+    count += 1;
+  }
+}
+
 function getEditorLanguage(filePath: string): string {
   const lower = filePath.toLowerCase();
   if (lower.endsWith(".yml") || lower.endsWith(".yaml")) return "yaml";
@@ -109,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,
@@ -162,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());
@@ -305,6 +511,32 @@ export default function GithubActionsLabModal() {
   const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
     () => new Set(),
   );
+  const [selectedFiles, setSelectedFiles] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const [draggingFile, setDraggingFile] = useState<string | null>(null);
+  const [dragOverFolder, setDragOverFolder] = useState<string | null>(null);
+  const [openFileMenu, setOpenFileMenu] = useState<string | null>(null);
+  const [bulkMenuOpen, setBulkMenuOpen] = useState(false);
+  // When false the row checkboxes stay hidden so the tree reads like a
+  // normal file list; flipped on by the toolbar toggle, by checking a
+  // single row via its hover affordance, or whenever something is selected.
+  const [selectMode, setSelectMode] = useState(false);
+  const selectedFileList = useMemo(
+    () => fileOrder.filter((filePath) => selectedFiles.has(filePath)),
+    [fileOrder, selectedFiles],
+  );
+
+  useEffect(() => {
+    setSelectedFiles((prev) => {
+      const known = new Set(fileOrder);
+      const next = new Set(
+        Array.from(prev).filter((filePath) => known.has(filePath)),
+      );
+      return next.size === prev.size ? prev : next;
+    });
+  }, [fileOrder]);
+
   const toggleFolder = (folder: string) => {
     setCollapsedFolders((prev) => {
       const next = new Set(prev);
@@ -314,6 +546,27 @@ export default function GithubActionsLabModal() {
     });
   };
 
+  const toggleFileSelection = (fileName: string) => {
+    setSelectedFiles((prev) => {
+      const next = new Set(prev);
+      if (next.has(fileName)) next.delete(fileName);
+      else next.add(fileName);
+      if (next.size > 0) setSelectMode(true);
+      return next;
+    });
+  };
+
+  const toggleSelectAllFiles = () => {
+    setSelectedFiles((prev) => {
+      if (prev.size === fileOrder.length) {
+        setSelectMode(false);
+        return new Set();
+      }
+      setSelectMode(true);
+      return new Set(fileOrder);
+    });
+  };
+
   const updateFile = (fileName: string, content: string) => {
     setWorkspace((prev) => ({
       ...prev,
@@ -322,6 +575,325 @@ export default function GithubActionsLabModal() {
     }));
   };
 
+  const applyFilePathOperation = useCallback(
+    (
+      sourceFile: string,
+      requestedTarget: string,
+      operation: "move" | "copy",
+      collisionStrategy: "prompt" | "unique" = "prompt",
+    ) => {
+      const sourceContent = workspace.files[sourceFile];
+      if (sourceContent === undefined) return;
+
+      const existingPaths = new Set(Object.keys(workspace.files));
+      let targetFile = requestedTarget;
+      if (
+        operation === "copy" &&
+        (targetFile === sourceFile ||
+          (collisionStrategy === "unique" && existingPaths.has(targetFile)))
+      ) {
+        targetFile = getCopyCandidatePath(
+          sourceFile,
+          existingPaths,
+          folderName(targetFile),
+        );
+      }
+
+      if (operation === "move" && targetFile === sourceFile) return;
+
+      const overwrites =
+        Object.prototype.hasOwnProperty.call(workspace.files, targetFile) &&
+        targetFile !== sourceFile;
+      if (
+        overwrites &&
+        !window.confirm(`Overwrite ${targetFile} with ${sourceFile}?`)
+      ) {
+        return;
+      }
+
+      setWorkspace((prev) => {
+        const content = prev.files[sourceFile];
+        if (content === undefined) return prev;
+
+        const files = { ...prev.files };
+        if (operation === "move") {
+          delete files[sourceFile];
+        }
+        files[targetFile] = content;
+
+        const nextActiveFile =
+          operation === "copy" || prev.activeFile === sourceFile
+            ? targetFile
+            : prev.activeFile;
+
+        return {
+          ...prev,
+          activeFile: nextActiveFile,
+          defaultWorkflow:
+            operation === "move" && prev.defaultWorkflow === sourceFile
+              ? targetFile
+              : prev.defaultWorkflow,
+          files,
+        };
+      });
+
+      if (operation === "copy" || activeFile === sourceFile) {
+        setActiveFile(targetFile);
+      }
+      if (operation === "move" && workflow === sourceFile) {
+        setWorkflow(targetFile);
+      }
+      setSelectedFiles((prev) => {
+        if (!prev.has(sourceFile)) return prev;
+        const next = new Set(prev);
+        if (operation === "move") next.delete(sourceFile);
+        next.add(targetFile);
+        return next;
+      });
+    },
+    [activeFile, workflow, workspace.files],
+  );
+
+  const applyBulkFolderOperation = useCallback(
+    (
+      sourceFiles: string[],
+      targetFolder: string,
+      operation: "move" | "copy",
+    ) => {
+      const uniqueSources = Array.from(new Set(sourceFiles)).filter(
+        (fileName) => workspace.files[fileName] !== undefined,
+      );
+      if (uniqueSources.length === 0) return;
+
+      const existingPaths = new Set(Object.keys(workspace.files));
+      const plannedTargets = new Set<string>();
+      const pairs: Array<{ source: string; target: string }> = [];
+
+      for (const source of uniqueSources) {
+        let target = joinLabPath(targetFolder, baseName(source));
+
+        if (operation === "move" && target === source) {
+          continue;
+        }
+
+        if (operation === "copy") {
+          if (
+            target === source ||
+            existingPaths.has(target) ||
+            plannedTargets.has(target)
+          ) {
+            target = getCopyCandidatePath(
+              source,
+              new Set([...existingPaths, ...plannedTargets]),
+              targetFolder,
+            );
+          }
+        } else if (plannedTargets.has(target)) {
+          window.alert(
+            `Multiple selected files would become ${target}. Rename one first, or move them separately.`,
+          );
+          return;
+        }
+
+        pairs.push({ source, target });
+        plannedTargets.add(target);
+        if (operation === "copy") existingPaths.add(target);
+      }
+
+      if (pairs.length === 0) return;
+
+      const conflicts =
+        operation === "move"
+          ? pairs.filter(
+              ({ source, target }) =>
+                source !== target && workspace.files[target] !== undefined,
+            )
+          : [];
+      if (conflicts.length > 0) {
+        const preview = conflicts
+          .slice(0, 4)
+          .map(({ target }) => target)
+          .join("\n");
+        const suffix = conflicts.length > 4 ? "\n…" : "";
+        if (
+          !window.confirm(
+            `Overwrite existing file${conflicts.length === 1 ? "" : "s"}?\n${preview}${suffix}`,
+          )
+        ) {
+          return;
+        }
+      }
+
+      setWorkspace((prev) => {
+        const files = { ...prev.files };
+        const materialized = pairs
+          .map(({ source, target }) => ({
+            source,
+            target,
+            content: prev.files[source],
+          }))
+          .filter(
+            (
+              entry,
+            ): entry is { source: string; target: string; content: string } =>
+              entry.content !== undefined,
+          );
+
+        if (operation === "move") {
+          for (const { source } of materialized) delete files[source];
+        }
+        for (const { target, content } of materialized) files[target] = content;
+
+        const activeMapping = materialized.find(
+          ({ source }) => source === prev.activeFile,
+        );
+        const defaultWorkflowMapping = materialized.find(
+          ({ source }) => source === prev.defaultWorkflow,
+        );
+
+        return {
+          ...prev,
+          activeFile:
+            operation === "copy"
+              ? (materialized[0]?.target ?? prev.activeFile)
+              : (activeMapping?.target ?? prev.activeFile),
+          defaultWorkflow:
+            operation === "move" && defaultWorkflowMapping
+              ? defaultWorkflowMapping.target
+              : prev.defaultWorkflow,
+          files,
+        };
+      });
+
+      const activePair = pairs.find(({ source }) => source === activeFile);
+      if (operation === "copy") {
+        setActiveFile(pairs[0]?.target ?? activeFile);
+      } else if (activePair) {
+        setActiveFile(activePair.target);
+      }
+
+      const workflowPair = pairs.find(({ source }) => source === workflow);
+      if (operation === "move" && workflowPair) {
+        setWorkflow(workflowPair.target);
+      }
+
+      setSelectedFiles(new Set(pairs.map(({ target }) => target)));
+    },
+    [activeFile, workflow, workspace.files],
+  );
+
+  const resolveBulkFolderPath = (input: string): string | null => {
+    const normalized = normalizeDestinationInput(input);
+    if (normalized.error) {
+      window.alert(normalized.error);
+      return null;
+    }
+    return normalized.path;
+  };
+
+  const moveFilesToFolder = (fileNames: string[]) => {
+    if (fileNames.length === 0) return;
+    const next = window.prompt(
+      `Move ${fileNames.length} file${fileNames.length === 1 ? "" : "s"} into folder path. Use . for the workspace root.`,
+      folderName(fileNames[0]) || ".",
+    );
+    if (!next) return;
+    const targetFolder = resolveBulkFolderPath(next);
+    if (targetFolder === null) return;
+    applyBulkFolderOperation(fileNames, targetFolder, "move");
+  };
+
+  const copyFilesToFolder = (fileNames: string[]) => {
+    if (fileNames.length === 0) return;
+    const next = window.prompt(
+      `Copy ${fileNames.length} file${fileNames.length === 1 ? "" : "s"} into folder path. Use . for the workspace root.`,
+      folderName(fileNames[0]) || ".",
+    );
+    if (!next) return;
+    const targetFolder = resolveBulkFolderPath(next);
+    if (targetFolder === null) return;
+    applyBulkFolderOperation(fileNames, targetFolder, "copy");
+  };
+
+  const moveFile = (fileName: string) => {
+    const next = window.prompt(
+      "Move or rename file. Enter a destination path, or an existing folder / folder ending in / to keep the same file name.",
+      fileName,
+    );
+    if (!next) return;
+    const target = resolveDestinationPath(
+      next,
+      fileName,
+      getKnownFolders(Object.keys(workspace.files)),
+    );
+    if (!target) return;
+    applyFilePathOperation(fileName, target, "move");
+    setOpenFileMenu(null);
+  };
+
+  const copyFile = (fileName: string) => {
+    const next = window.prompt(
+      "Copy file. Enter a destination path, or an existing folder / folder ending in / to keep the same file name.",
+      getCopyCandidatePath(fileName, new Set(Object.keys(workspace.files))),
+    );
+    if (!next) return;
+    const target = resolveDestinationPath(
+      next,
+      fileName,
+      getKnownFolders(Object.keys(workspace.files)),
+    );
+    if (!target) return;
+    applyFilePathOperation(fileName, target, "copy");
+    setOpenFileMenu(null);
+  };
+
+  const handleFileDragStart = (
+    e: React.DragEvent<HTMLDivElement>,
+    fileName: string,
+  ) => {
+    setDraggingFile(fileName);
+    e.dataTransfer.effectAllowed = "copyMove";
+    e.dataTransfer.setData("text/x-gha-lab-file", fileName);
+    e.dataTransfer.setData("text/plain", fileName);
+  };
+
+  const handleFolderDragOver = (
+    e: React.DragEvent<HTMLElement>,
+    folder: string,
+  ) => {
+    if (!draggingFile) return;
+    e.preventDefault();
+    e.dataTransfer.dropEffect = e.altKey ? "copy" : "move";
+    setDragOverFolder(folder);
+  };
+
+  const handleFolderDrop = (
+    e: React.DragEvent<HTMLElement>,
+    folder: string,
+  ) => {
+    e.preventDefault();
+    const sourceFile =
+      e.dataTransfer.getData("text/x-gha-lab-file") || draggingFile;
+    setDraggingFile(null);
+    setDragOverFolder(null);
+    if (!sourceFile) return;
+
+    const operation = e.altKey ? "copy" : "move";
+    const sourceGroup = selectedFiles.has(sourceFile)
+      ? selectedFileList
+      : [sourceFile];
+    if (sourceGroup.length > 1) {
+      applyBulkFolderOperation(sourceGroup, folder, operation);
+    } else {
+      applyFilePathOperation(
+        sourceFile,
+        joinLabPath(folder, baseName(sourceFile)),
+        operation,
+        operation === "copy" ? "unique" : "prompt",
+      );
+    }
+  };
+
   const addFile = () => {
     const name = window.prompt(
       "New file path (e.g. .github/workflows/release.yml)",
@@ -354,6 +926,83 @@ export default function GithubActionsLabModal() {
       );
       setActiveFile(remaining[0] ?? "");
     }
+    setSelectedFiles((prev) => {
+      if (!prev.has(fileName)) return prev;
+      const next = new Set(prev);
+      next.delete(fileName);
+      return next;
+    });
+    setOpenFileMenu(null);
+  };
+
+  const deleteSelectedFiles = () => {
+    if (selectedFileList.length === 0) return;
+    if (
+      !window.confirm(
+        `Delete ${selectedFileList.length} selected file${selectedFileList.length === 1 ? "" : "s"}?`,
+      )
+    ) {
+      return;
+    }
+    const selected = new Set(selectedFileList);
+    setWorkspace((prev) => {
+      const files = { ...prev.files };
+      for (const fileName of selected) delete files[fileName];
+      const nextActive = selected.has(prev.activeFile)
+        ? (Object.keys(files)[0] ?? "")
+        : prev.activeFile;
+      return { ...prev, activeFile: nextActive, files };
+    });
+    if (selected.has(activeFile)) {
+      const remaining = Object.keys(workspace.files).filter(
+        (fileName) => !selected.has(fileName),
+      );
+      setActiveFile(remaining[0] ?? "");
+    }
+    setSelectedFiles(new Set());
+    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 ──────────────────────────────────────
@@ -460,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 →
@@ -468,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,
@@ -505,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`,
@@ -513,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);
+        }
       }
     },
     [
@@ -533,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,
+      );
 
-  const handleRun = () => runCommand(buildCommand());
+      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",
+      };
+
+      // 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([]);
 
@@ -591,7 +1421,7 @@ export default function GithubActionsLabModal() {
     const cmd = consoleInput.trim();
     if (!cmd || running) return;
     setConsoleInput("");
-    runCommand(cmd);
+    enqueueRun(cmd);
   };
 
   // ── Monaco config ─────────────────────────────────────────────────
@@ -966,18 +1796,132 @@ interface ImportMeta {
             }}
           >
             <div className="flex items-center justify-between px-2 py-1.5 border-b border-slate-800/60">
-              <span className="text-[10px] font-semibold tracking-widest text-slate-500">
-                FILES
-              </span>
-              <button
-                onClick={addFile}
-                className="p-1 rounded text-slate-400 hover:text-amber-300 hover:bg-slate-800/60"
-                title="Add file"
-              >
-                <FilePlus className="w-3.5 h-3.5" />
-              </button>
+              <div className="flex items-center gap-1 min-w-0">
+                <span className="text-[10px] font-semibold tracking-widest text-slate-500">
+                  FILES
+                </span>
+                {selectedFileList.length > 0 && (
+                  <span className="rounded bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-medium text-amber-200">
+                    {selectedFileList.length}
+                  </span>
+                )}
+              </div>
+              <div className="relative flex items-center gap-1">
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectMode((prev) => {
+                      const next = !prev;
+                      if (!next) setSelectedFiles(new Set());
+                      return next;
+                    });
+                    setBulkMenuOpen(false);
+                    setOpenFileMenu(null);
+                  }}
+                  className={`p-1 rounded hover:bg-slate-800/60 ${
+                    selectMode
+                      ? "text-amber-300"
+                      : "text-slate-400 hover:text-amber-300"
+                  }`}
+                  title={selectMode ? "Exit selection mode" : "Select files"}
+                >
+                  <ListChecks className="w-3.5 h-3.5" />
+                </button>
+                {selectedFileList.length > 0 && (
+                  <>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setBulkMenuOpen((v) => !v);
+                        setOpenFileMenu(null);
+                      }}
+                      className="rounded px-1.5 py-0.5 text-[11px] text-slate-400 hover:bg-slate-800/60 hover:text-amber-200"
+                      title="Selected file actions"
+                    >
+                      Selected ▾
+                    </button>
+                    {bulkMenuOpen && (
+                      <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="absolute right-6 top-6 z-40 w-44 overflow-hidden rounded-lg border border-slate-700 bg-slate-950 py-1 text-[11px] shadow-xl"
+                      >
+                        <button
+                          onClick={() => {
+                            moveFilesToFolder(selectedFileList);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                        >
+                          <Pencil className="w-3 h-3 text-amber-300" />
+                          Move to folder…
+                        </button>
+                        <button
+                          onClick={() => {
+                            copyFilesToFolder(selectedFileList);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                        >
+                          <Copy className="w-3 h-3 text-sky-300" />
+                          Copy to folder…
+                        </button>
+                        <button
+                          onClick={() => {
+                            setSelectedFiles(new Set());
+                            setSelectMode(false);
+                            setBulkMenuOpen(false);
+                          }}
+                          className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-400 hover:bg-slate-800/70"
+                        >
+                          Clear selection
+                        </button>
+                        <button
+                          onClick={deleteSelectedFiles}
+                          className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-red-300 hover:bg-red-500/10"
+                        >
+                          <Trash2 className="w-3 h-3" />
+                          Delete selected
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+                <button
+                  onClick={addFile}
+                  className="p-1 rounded text-slate-400 hover:text-amber-300 hover:bg-slate-800/60"
+                  title="Add file"
+                >
+                  <FilePlus className="w-3.5 h-3.5" />
+                </button>
+              </div>
             </div>
-            <div className="flex-1 overflow-auto p-1 text-xs">
+            <div
+              className="flex-1 overflow-auto p-1 text-xs"
+              onClick={() => {
+                setOpenFileMenu(null);
+                setBulkMenuOpen(false);
+              }}
+            >
+              {draggingFile && (
+                <div
+                  onDragOver={(e) => handleFolderDragOver(e, "")}
+                  onDragLeave={() =>
+                    setDragOverFolder((current) =>
+                      current === "" ? null : current,
+                    )
+                  }
+                  onDrop={(e) => handleFolderDrop(e, "")}
+                  className={`mb-1 rounded border border-dashed px-2 py-1 text-[11px] ${
+                    dragOverFolder === ""
+                      ? "border-amber-400/70 bg-amber-500/10 text-amber-200"
+                      : "border-slate-700 text-slate-500"
+                  }`}
+                >
+                  Drop{" "}
+                  {selectedFiles.has(draggingFile) ? "selected files" : "file"}{" "}
+                  in workspace root • hold Option/Alt to copy
+                </div>
+              )}
               {grouped.map(({ folder, files }) => {
                 const collapsed = collapsedFolders.has(folder);
                 return (
@@ -985,7 +1929,15 @@ interface ImportMeta {
                     {folder && (
                       <button
                         onClick={() => toggleFolder(folder)}
+                        onDragOver={(e) => handleFolderDragOver(e, folder)}
+                        onDragLeave={() =>
+                          setDragOverFolder((current) =>
+                            current === folder ? null : current,
+                          )
+                        }
+                        onDrop={(e) => handleFolderDrop(e, folder)}
                         className="flex items-center gap-1 w-full px-1 py-0.5 text-slate-400 hover:text-slate-200"
+                        title="Drop a file here to move it. Hold Option/Alt while dropping to copy."
                       >
                         {collapsed ? (
                           <ChevronRight className="w-3 h-3" />
@@ -993,34 +1945,127 @@ interface ImportMeta {
                           <ChevronDown className="w-3 h-3" />
                         )}
                         <Folder className="w-3 h-3" />
-                        <span className="truncate">{folder}/</span>
+                        <span
+                          className={`truncate rounded px-1 ${
+                            dragOverFolder === folder
+                              ? "bg-amber-500/15 text-amber-200"
+                              : ""
+                          }`}
+                        >
+                          {folder}/
+                        </span>
                       </button>
                     )}
                     {!collapsed &&
                       files.map((filePath) => (
                         <div
                           key={filePath}
-                          className={`group flex items-center gap-1 pl-${folder ? 5 : 1} pr-1 py-0.5 rounded cursor-pointer ${
+                          data-selected={selectedFiles.has(filePath)}
+                          draggable
+                          onDragStart={(e) => handleFileDragStart(e, filePath)}
+                          onDragEnd={() => {
+                            setDraggingFile(null);
+                            setDragOverFolder(null);
+                          }}
+                          className={`group relative flex items-center gap-1 pl-${folder ? 5 : 1} pr-1 py-0.5 rounded cursor-pointer ${
                             activeFile === filePath
                               ? "bg-amber-500/15 text-amber-200"
-                              : "text-slate-300 hover:bg-slate-800/40"
+                              : selectedFiles.has(filePath)
+                                ? "bg-sky-500/10 text-sky-100 hover:bg-sky-500/15"
+                                : "text-slate-300 hover:bg-slate-800/40"
                           }`}
                           onClick={() => setActiveFile(filePath)}
                           style={{ paddingLeft: folder ? 20 : 6 }}
                         >
+                          {(selectMode || selectedFiles.has(filePath)) && (
+                            <input
+                              type="checkbox"
+                              checked={selectedFiles.has(filePath)}
+                              onClick={(e) => e.stopPropagation()}
+                              onChange={() => toggleFileSelection(filePath)}
+                              className="h-3 w-3 shrink-0 accent-amber-400"
+                              title="Select file"
+                            />
+                          )}
                           <span className="truncate flex-1">
                             {baseName(filePath)}
                           </span>
                           <button
                             onClick={(e) => {
                               e.stopPropagation();
-                              deleteFile(filePath);
+                              setOpenFileMenu((current) =>
+                                current === filePath ? null : filePath,
+                              );
+                              setBulkMenuOpen(false);
                             }}
-                            className="opacity-0 group-hover:opacity-100 p-0.5 text-slate-500 hover:text-red-400"
-                            title="Delete"
+                            className="rounded px-1 text-slate-500 opacity-70 hover:bg-slate-800/70 hover:text-amber-200 group-hover:opacity-100"
+                            title="File actions"
                           >
-                            <Trash2 className="w-3 h-3" />
+                            ⋯
                           </button>
+                          {openFileMenu === filePath && (
+                            <div
+                              onClick={(e) => e.stopPropagation()}
+                              className="absolute right-1 top-6 z-40 w-40 overflow-hidden rounded-lg border border-slate-700 bg-slate-950 py-1 text-[11px] shadow-xl"
+                            >
+                              <button
+                                onClick={() => moveFile(filePath)}
+                                className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <Pencil className="w-3 h-3 text-amber-300" />
+                                Move / rename…
+                              </button>
+                              <button
+                                onClick={() => copyFile(filePath)}
+                                className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <Copy className="w-3 h-3 text-sky-300" />
+                                Copy to path…
+                              </button>
+                              <button
+                                onClick={() => {
+                                  toggleFileSelection(filePath);
+                                  setOpenFileMenu(null);
+                                }}
+                                className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                              >
+                                <ListChecks className="w-3 h-3 text-amber-300" />
+                                {selectedFiles.has(filePath)
+                                  ? "Deselect"
+                                  : "Select"}
+                              </button>
+                              {selectedFileList.length > 1 &&
+                                selectedFiles.has(filePath) && (
+                                  <>
+                                    <button
+                                      onClick={() => {
+                                        moveFilesToFolder(selectedFileList);
+                                        setOpenFileMenu(null);
+                                      }}
+                                      className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                                    >
+                                      Move selected…
+                                    </button>
+                                    <button
+                                      onClick={() => {
+                                        copyFilesToFolder(selectedFileList);
+                                        setOpenFileMenu(null);
+                                      }}
+                                      className="flex w-full items-center gap-2 px-2 py-1.5 text-left text-slate-200 hover:bg-slate-800/70"
+                                    >
+                                      Copy selected…
+                                    </button>
+                                  </>
+                                )}
+                              <button
+                                onClick={() => deleteFile(filePath)}
+                                className="flex w-full items-center gap-2 border-t border-slate-800 px-2 py-1.5 text-left text-red-300 hover:bg-red-500/10"
+                              >
+                                <Trash2 className="w-3 h-3" />
+                                Delete
+                              </button>
+                            </div>
+                          )}
                         </div>
                       ))}
                   </div>
@@ -1098,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={{
@@ -1112,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) => (
@@ -1127,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>
@@ -1231,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 } : {})}