create-interview-cockpit 0.27.0 → 0.29.0

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

@@ -3,10 +3,11 @@ import {
   ChevronDown,
   ChevronRight,
   Copy,
+  Eye,
+  EyeOff,
   FilePlus,
   Folder,
-  GitBranch,
-  KeyRound,
+  GitPullRequest,
   ListChecks,
   Loader2,
   Maximize2,
@@ -18,12 +19,15 @@ import {
   Pencil,
   Play,
   Save,
+  Settings,
   StopCircle,
   Terminal,
   Trash2,
   X,
 } from "lucide-react";
 import MonacoEditorLib from "@monaco-editor/react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type {
   BeforeMount,
   Monaco,
@@ -39,12 +43,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 PullRequestPanel from "./PullRequestPanel";
+import SettingsPanel from "./SettingsPanel";
+import {
+  evaluateCodeOwners,
+  findCodeOwnersPath,
+  isCodeOwnersPath,
+  lintCodeOwnersAgainstOrg,
+  parseCodeOwners,
+} from "../codeowners";
 import {
   defaultContextForEvent,
   evaluateConcurrencyFor,
@@ -215,6 +226,16 @@ function getGhaLabModelPath(filePath: string): string {
     .join("/")}`;
 }
 
+// Translate the act runner's GhaJobStatus into the PR-side "check run"
+// vocabulary used by codeowners.ts. "pending" is a pre-run state we
+// don't get from act in practice, so we treat it as "queued" for parity.
+function mapJobStatusToCheck(
+  s: GhaJobSnapshot["status"],
+): "queued" | "running" | "success" | "failed" | "cancelled" | "skipped" {
+  if (s === "pending") return "queued";
+  return s;
+}
+
 // Tiny grouped-by-folder list to keep the modal lean.
 function groupByFolder(paths: string[]): { folder: string; files: string[] }[] {
   const map = new Map<string, string[]>();
@@ -239,41 +260,9 @@ interface ConsoleLine {
 
 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.",
-  },
-];
+}> = [{ kind: "variables" }, { kind: "secrets" }, { kind: "env" }];
 
 export default function GithubActionsLabModal() {
   const {
@@ -328,10 +317,23 @@ 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" | "env" | "concurrency" | "history" — controls the right pane tab.
-  const [rightTab, setRightTab] = useState<
-    "console" | "jobs" | "env" | "concurrency" | "history"
-  >("console");
+  // Mirror into a ref so the run-complete handler can read the freshest
+  // job set without racing the React state queue.
+  const liveJobsRef = useRef<GhaJobSnapshot[]>([]);
+  useEffect(() => {
+    liveJobsRef.current = liveJobs;
+  }, [liveJobs]);
+  // ── Right-pane tab state ───────────────────────────────────────
+  // The right pane mimics github.com's repo nav: three top-level tabs
+  // (Actions / Pull request / Settings) and Actions has its own sub-
+  // tabs (Console / Jobs / History). Splitting state keeps the sub-tab
+  // sticky as the user bounces between top tabs.
+  const [topTab, setTopTab] = useState<"actions" | "pr" | "settings">(
+    "actions",
+  );
+  const [rightTab, setRightTab] = useState<"console" | "jobs" | "history">(
+    "console",
+  );
   const environmentEntryCount = useMemo(
     () =>
       GHA_ENVIRONMENT_SECTIONS.reduce((total, section) => {
@@ -348,6 +350,11 @@ export default function GithubActionsLabModal() {
   const [historyNonce, setHistoryNonce] = useState(0);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
+  // When viewing a markdown file, let the user toggle between the raw
+  // editor and a rendered preview. We default to preview because most
+  // of the .md files in the governance template are explanatory docs
+  // — readers want them to look like real GitHub markdown, not source.
+  const [mdPreview, setMdPreview] = useState(true);
   const abortRef = useRef<AbortController | null>(null);
   // ── Concurrency engine state ───────────────────────────────────────
   // The concurrency tab is no longer a simulator — these records track
@@ -964,46 +971,9 @@ export default function GithubActionsLabModal() {
   };
 
   // ── 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),
-    );
-  };
+  // The Environments table itself lives inside SettingsPanel; we keep
+  // only the bits the modal still needs to build act --var/secret/env
+  // files on every run.
 
   // ── Save lab as context file ──────────────────────────────────────
   const handleSave = useCallback(async () => {
@@ -1119,9 +1089,58 @@ export default function GithubActionsLabModal() {
       // success/failed" lifecycle for this invocation. Switch tabs to Jobs
       // so the visualisation is immediately visible.
       setLiveJobs([]);
+      setTopTab("actions");
       setRightTab("jobs");
       appendConsole({ kind: "input", text: `$ ${run.command}\n` });
 
+      // For push / pull_request events, surface a quick CODEOWNERS dry-run
+      // so the user sees who would be auto-requested as a reviewer, just
+      // like GitHub posts on a real PR. We do this client-side because
+      // act has no concept of CODEOWNERS — it's a github.com feature.
+      try {
+        const eventName = run.command.match(/^act\s+([a-z_]+)/i)?.[1];
+        if (
+          (eventName === "push" || eventName === "pull_request") &&
+          workspace.pullRequest?.changedFiles?.length
+        ) {
+          const codeownersPath = findCodeOwnersPath(workspace.files);
+          if (codeownersPath) {
+            const parsed = parseCodeOwners(
+              workspace.files[codeownersPath] ?? "",
+            );
+            const evalResult = evaluateCodeOwners(
+              parsed.rules,
+              workspace.pullRequest.changedFiles,
+              workspace.ghOrg,
+            );
+            appendConsole({
+              kind: "info",
+              text: `[CODEOWNERS] ${codeownersPath} \u2192 ${evalResult.ownedFiles.length}/${workspace.pullRequest.changedFiles.length} files owned`,
+            });
+            for (const match of evalResult.perFile) {
+              if (match.rule && match.owners.length > 0) {
+                appendConsole({
+                  kind: "info",
+                  text: `[CODEOWNERS]   ${match.path} \u2192 ${match.owners
+                    .map((o) => `@${o}`)
+                    .join(" ")}`,
+                });
+              }
+            }
+            if (evalResult.requestedHandles.length > 0) {
+              appendConsole({
+                kind: "info",
+                text: `[CODEOWNERS] Reviewers requested: ${evalResult.requestedHandles
+                  .map((h) => `@${h}`)
+                  .join(", ")}`,
+              });
+            }
+          }
+        }
+      } catch {
+        // CODEOWNERS preview is informational only \u2014 never block the run.
+      }
+
       // Flip this run's record to running so the Concurrency panel ticks.
       setConcurrencyRuns((rs) =>
         rs.map((r) =>
@@ -1175,6 +1194,46 @@ export default function GithubActionsLabModal() {
                 kind: "info",
                 text: `\n[done] exit=${message.exitCode} • ${message.durationMs}ms\n`,
               });
+              // Persist this run as the PR's "last check run" so the Pull
+              // Request tab can grade required status checks. We pull the
+              // freshest job snapshots from the ref, not the closure-captured
+              // value, because `setLiveJobs` updates above may not have
+              // flushed by the time `complete` arrives.
+              const completedAt = new Date().toISOString();
+              setWorkspace((prev) => {
+                const jobs = liveJobsRef.current.map((j) => {
+                  const baseJob = {
+                    name: j.name,
+                    status: mapJobStatusToCheck(j.status),
+                  } as {
+                    name: string;
+                    status:
+                      | "queued"
+                      | "running"
+                      | "success"
+                      | "failed"
+                      | "cancelled"
+                      | "skipped";
+                    durationMs?: number;
+                  };
+                  if (typeof j.durationMs === "number") {
+                    baseJob.durationMs = j.durationMs;
+                  }
+                  return baseJob;
+                });
+                if (jobs.length === 0) return prev;
+                return {
+                  ...prev,
+                  pullRequest: {
+                    ...(prev.pullRequest ?? { changedFiles: [] }),
+                    lastCheckRun: {
+                      completedAt,
+                      ...(workflow ? { workflow } : {}),
+                      jobs,
+                    },
+                  },
+                };
+              });
               // Refresh History so the just-completed run shows up.
               setHistoryNonce((n) => n + 1);
             }
@@ -1595,6 +1654,46 @@ interface ImportMeta {
     [activeFile],
   );
 
+  // ── CODEOWNERS live validation ───────────────────────────────────
+  // When the CODEOWNERS file is open, push diagnostics into Monaco so
+  // the user sees red squiggles for bad owner handles (just like the
+  // GitHub UI flags unknown users in the CODEOWNERS settings page).
+  useEffect(() => {
+    const monaco = monacoRef.current;
+    if (!monaco) return;
+    // Clear our markers on every editor change; we only set them when
+    // the active file is a CODEOWNERS file.
+    const codeownersOwner = "gha-lab-codeowners";
+    if (!isCodeOwnersPath(activeFile)) {
+      // Clear markers on whatever model is currently active.
+      const uri = monaco.Uri.parse(getGhaLabModelPath(activeFile));
+      const model = monaco.editor.getModel(uri);
+      if (model) monaco.editor.setModelMarkers(model, codeownersOwner, []);
+      return;
+    }
+    const body = workspace.files[activeFile] ?? "";
+    const parsed = parseCodeOwners(body);
+    const issues = lintCodeOwnersAgainstOrg(parsed, workspace.ghOrg);
+    const uri = monaco.Uri.parse(getGhaLabModelPath(activeFile));
+    const model = monaco.editor.getModel(uri);
+    if (!model) return;
+    monaco.editor.setModelMarkers(
+      model,
+      codeownersOwner,
+      issues.map((issue) => ({
+        severity:
+          issue.severity === "error"
+            ? monaco.MarkerSeverity.Error
+            : monaco.MarkerSeverity.Warning,
+        message: issue.message,
+        startLineNumber: issue.line,
+        endLineNumber: issue.line,
+        startColumn: 1,
+        endColumn: (model.getLineContent(issue.line)?.length ?? 0) + 1,
+      })),
+    );
+  }, [activeFile, workspace.files, workspace.ghOrg]);
+
   // ── Render ────────────────────────────────────────────────────────
   const containerStyle: React.CSSProperties = maximized
     ? { top: 0, left: 0, width: "100vw", height: "100vh" }
@@ -1659,7 +1758,7 @@ interface ImportMeta {
           <div className="flex items-center gap-2">
             <span className="inline-block h-2 w-2 rounded-full bg-amber-400" />
             <span className="text-xs font-semibold tracking-widest text-amber-300">
-              GITHUB ACTIONS LAB
+              GITHUB LAB
             </span>
           </div>
           <input
@@ -2098,52 +2197,84 @@ interface ImportMeta {
                   {activeFile || "(no file selected)"}
                 </span>
               </div>
-              <button
-                onClick={() => setRightCollapsed((v) => !v)}
-                className="p-1 rounded text-slate-500 hover:text-amber-300 hover:bg-slate-800/60 shrink-0"
-                title={
-                  rightCollapsed
-                    ? "Show console/jobs panel"
-                    : "Hide console/jobs panel"
-                }
-              >
-                {rightCollapsed ? (
-                  <PanelRightOpen className="w-3.5 h-3.5" />
-                ) : (
-                  <PanelRightClose className="w-3.5 h-3.5" />
+              <div className="flex items-center gap-1">
+                {/* Markdown preview toggle. Only meaningful for .md / .markdown
+                    files; hidden otherwise so it doesn't clutter the header. */}
+                {activeFile && /\.(md|markdown)$/i.test(activeFile) && (
+                  <button
+                    onClick={() => setMdPreview((v) => !v)}
+                    className="flex items-center gap-1 p-1 rounded text-slate-500 hover:text-amber-300 hover:bg-slate-800/60"
+                    title={
+                      mdPreview
+                        ? "Show raw markdown source"
+                        : "Render markdown preview"
+                    }
+                  >
+                    {mdPreview ? (
+                      <EyeOff className="w-3.5 h-3.5" />
+                    ) : (
+                      <Eye className="w-3.5 h-3.5" />
+                    )}
+                    <span className="text-[10px] uppercase tracking-wide">
+                      {mdPreview ? "Source" : "Preview"}
+                    </span>
+                  </button>
                 )}
-              </button>
+                <button
+                  onClick={() => setRightCollapsed((v) => !v)}
+                  className="p-1 rounded text-slate-500 hover:text-amber-300 hover:bg-slate-800/60 shrink-0"
+                  title={
+                    rightCollapsed
+                      ? "Show console/jobs panel"
+                      : "Hide console/jobs panel"
+                  }
+                >
+                  {rightCollapsed ? (
+                    <PanelRightOpen className="w-3.5 h-3.5" />
+                  ) : (
+                    <PanelRightClose className="w-3.5 h-3.5" />
+                  )}
+                </button>
+              </div>
             </div>
             <div className="flex-1 min-h-0">
-              {activeFile && workspace.files[activeFile] !== undefined && (
-                <MonacoEditorLib
-                  key={activeFile}
-                  height="100%"
-                  width="100%"
-                  language={getEditorLanguage(activeFile)}
-                  theme="gha-lab-dark"
-                  path={getGhaLabModelPath(activeFile)}
-                  value={workspace.files[activeFile]}
-                  beforeMount={handleBeforeMount}
-                  onMount={handleMount}
-                  onChange={handleEditorChange}
-                  options={{
-                    fontFamily: EDITOR_FONT,
-                    fontSize: 13,
-                    lineHeight: 22,
-                    minimap: { enabled: false },
-                    automaticLayout: true,
-                    scrollBeyondLastLine: false,
-                    wordWrap: "off",
-                    tabSize: 2,
-                    insertSpaces: true,
-                  }}
-                />
-              )}
+              {activeFile &&
+                workspace.files[activeFile] !== undefined &&
+                (mdPreview && /\.(md|markdown)$/i.test(activeFile) ? (
+                  <div className="h-full w-full overflow-auto px-6 py-4 text-slate-200 gha-md-preview">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {workspace.files[activeFile]}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <MonacoEditorLib
+                    key={activeFile}
+                    height="100%"
+                    width="100%"
+                    language={getEditorLanguage(activeFile)}
+                    theme="gha-lab-dark"
+                    path={getGhaLabModelPath(activeFile)}
+                    value={workspace.files[activeFile]}
+                    beforeMount={handleBeforeMount}
+                    onMount={handleMount}
+                    onChange={handleEditorChange}
+                    options={{
+                      fontFamily: EDITOR_FONT,
+                      fontSize: 13,
+                      lineHeight: 22,
+                      minimap: { enabled: false },
+                      automaticLayout: true,
+                      scrollBeyondLastLine: false,
+                      wordWrap: "off",
+                      tabSize: 2,
+                      insertSpaces: true,
+                    }}
+                  />
+                ))}
             </div>
           </div>
 
-          {/* Right pane: tabbed Console / Jobs / Env / History */}
+          {/* Right pane: GitHub-style top tabs (Actions / PR / Settings) */}
           <div
             className="min-h-0 flex flex-col bg-slate-950 overflow-hidden"
             style={{
@@ -2151,46 +2282,60 @@ interface ImportMeta {
               visibility: rightCollapsed ? "hidden" : undefined,
             }}
           >
-            <div className="flex items-center justify-between border-b border-slate-800/60 px-2 py-1">
-              <div className="flex items-center gap-0.5 text-[11px]">
-                {(
-                  [
-                    { id: "console", label: "Console" },
-                    { id: "jobs", label: "Jobs" },
-                    { id: "env", label: "Env" },
-                    { id: "concurrency", label: "Concurrency" },
-                    { id: "history", label: "History" },
-                  ] as const
-                ).map((t) => (
-                  <button
-                    key={t.id}
-                    onClick={() => setRightTab(t.id)}
-                    className={`px-2 py-1 rounded ${
-                      rightTab === t.id
-                        ? "bg-slate-800/70 text-amber-200"
-                        : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/40"
-                    }`}
-                  >
-                    {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>
-                ))}
+            {/* Top-level nav mimicking github.com's repo header. We keep
+                three tabs only — the saturated 6-tab bar moved its CI
+                config items (Env, Concurrency) into a real Settings page. */}
+            <div className="flex items-center justify-between border-b border-slate-800/60 bg-slate-950 px-2">
+              <div className="flex items-center gap-2 text-[12px]">
+                {[
+                  {
+                    id: "actions" as const,
+                    label: "Actions",
+                    icon: Play,
+                  },
+                  {
+                    id: "pr" as const,
+                    label: "Pull request",
+                    icon: GitPullRequest,
+                  },
+                  {
+                    id: "settings" as const,
+                    label: "Settings",
+                    icon: Settings,
+                  },
+                ].map((t) => {
+                  const Icon = t.icon;
+                  const isActive = topTab === t.id;
+                  return (
+                    <button
+                      key={t.id}
+                      onClick={() => setTopTab(t.id)}
+                      className={`-mb-px flex items-center gap-1.5 border-b-2 px-1.5 py-2 ${
+                        isActive
+                          ? "border-amber-500 text-amber-200"
+                          : "border-transparent text-slate-400 hover:text-slate-200"
+                      }`}
+                    >
+                      <Icon className="h-3.5 w-3.5" />
+                      {t.label}
+                      {t.id === "actions" && running && (
+                        <span className="ml-0.5 inline-block h-1.5 w-1.5 rounded-full bg-amber-400 animate-pulse" />
+                      )}
+                      {t.id === "pr" &&
+                        (workspace.pullRequest?.changedFiles.length ?? 0) >
+                          0 && (
+                          <span className="ml-0.5 rounded bg-emerald-500/15 px-1 text-[10px] text-emerald-200">
+                            {workspace.pullRequest?.changedFiles.length}
+                          </span>
+                        )}
+                      {t.id === "settings" && environmentEntryCount > 0 && (
+                        <span className="ml-0.5 rounded bg-slate-700/60 px-1 text-[10px] text-slate-300">
+                          {environmentEntryCount}
+                        </span>
+                      )}
+                    </button>
+                  );
+                })}
               </div>
               <div className="flex items-center gap-1">
                 {running && (
@@ -2202,7 +2347,7 @@ interface ImportMeta {
                     <StopCircle className="w-3.5 h-3.5" />
                   </button>
                 )}
-                {rightTab === "console" && (
+                {topTab === "actions" && rightTab === "console" && (
                   <button
                     onClick={clearConsole}
                     className="p-1 rounded text-slate-500 hover:text-slate-200 hover:bg-slate-800/60"
@@ -2214,7 +2359,47 @@ interface ImportMeta {
               </div>
             </div>
 
-            {rightTab === "console" && (
+            {/* Actions sub-tabs (Workflow runs view): only render when the
+                user is on the Actions top tab. Console + Jobs + History
+                are sub-views of the same "runs" workflow on github.com. */}
+            {topTab === "actions" && (
+              <div className="flex items-center gap-0.5 border-b border-slate-800/40 bg-slate-900/30 px-2 py-1 text-[11px]">
+                {[
+                  {
+                    id: "console" as const,
+                    label: "Workflow runs",
+                    icon: Terminal,
+                  },
+                  { id: "jobs" as const, label: "Jobs", icon: ListChecks },
+                  {
+                    id: "history" as const,
+                    label: "History",
+                    icon: ListChecks,
+                  },
+                ].map((t) => {
+                  const Icon = t.icon;
+                  return (
+                    <button
+                      key={t.id}
+                      onClick={() => setRightTab(t.id)}
+                      className={`flex items-center gap-1 rounded px-2 py-1 ${
+                        rightTab === t.id
+                          ? "bg-slate-800/70 text-amber-200"
+                          : "text-slate-400 hover:text-slate-200 hover:bg-slate-800/40"
+                      }`}
+                    >
+                      <Icon className="h-3 w-3" />
+                      {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" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            {topTab === "actions" && rightTab === "console" && (
               <>
                 <div className="flex-1 min-h-0 overflow-auto px-3 py-2 text-[11px] font-mono whitespace-pre-wrap break-words">
                   {consoleLines.length === 0 ? (
@@ -2275,7 +2460,7 @@ interface ImportMeta {
               </>
             )}
 
-            {rightTab === "jobs" && (
+            {topTab === "actions" && rightTab === "jobs" && (
               <GhaJobsPanel
                 workflowYaml={workflow ? workspace.files[workflow] : undefined}
                 jobs={liveJobs}
@@ -2289,154 +2474,37 @@ 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,
-                )}
+            {topTab === "settings" && (
+              <SettingsPanel
+                workspace={workspace}
+                onChange={(updater) => setWorkspace(updater)}
                 workflowPath={workflow}
-                runs={concurrencyRuns}
-                context={concurrencyContext}
-                onContextChange={setConcurrencyContext}
-                onClearRuns={() => {
-                  // Only clear finished records; keep the active/pending
-                  // ones because the queue depends on them.
+                workflowYaml={workflow ? workspace.files[workflow] : undefined}
+                concurrencyRuns={concurrencyRuns}
+                concurrencyContext={concurrencyContext}
+                onConcurrencyContextChange={setConcurrencyContext}
+                onClearConcurrencyRuns={() => {
                   setConcurrencyRuns((rs) =>
                     rs.filter(
                       (r) => r.status === "running" || r.status === "pending",
                     ),
                   );
                 }}
+                onResetWorkspace={() => {
+                  setWorkspace(cloneGhaLabWorkspace(DEFAULT_GHA_LAB));
+                  setTopTab("actions");
+                }}
+              />
+            )}
+
+            {topTab === "pr" && (
+              <PullRequestPanel
+                workspace={workspace}
+                onChange={(updater) => setWorkspace(updater)}
               />
             )}
 
-            {rightTab === "history" && (
+            {topTab === "actions" && rightTab === "history" && (
               <GhaHistoryPanel
                 {...(currentQuestion ? { questionId: currentQuestion.id } : {})}
                 {...(activeGhaId ? { fileId: activeGhaId } : {})}