create-interview-cockpit 0.17.3 → 0.19.0

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

@@ -0,0 +1,1048 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  FilePlus,
+  Folder,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
+  Play,
+  Save,
+  StopCircle,
+  Terminal,
+  Trash2,
+  X,
+} from "lucide-react";
+import MonacoEditorLib from "@monaco-editor/react";
+import type { BeforeMount, Monaco, OnChange } from "@monaco-editor/react";
+import { useStore } from "../store";
+import {
+  cloneGhaLabWorkspace,
+  DEFAULT_GHA_LAB,
+  getGhaLabFileOrder,
+  listWorkflowPaths,
+  serializeGhaLabWorkspace,
+} from "../githubActionsLab";
+import type { GithubActionsLabWorkspace } from "../types";
+import * as api from "../api";
+import type { GhaJobSnapshot, GhaStreamMessage } from "../api";
+import GhaJobsPanel from "./GhaJobsPanel";
+import GhaHistoryPanel from "./GhaHistoryPanel";
+
+// ─── Modal layout constants ──────────────────────────────────────────────
+
+const MIN_W = 900;
+const MIN_H = 560;
+const DEFAULT_W = Math.min(1280, window.innerWidth - 48);
+const DEFAULT_H = Math.min(820, window.innerHeight - 48);
+const EDITOR_FONT =
+  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n";
+
+const EVENTS = [
+  "push",
+  "pull_request",
+  "workflow_dispatch",
+  "release",
+  "schedule",
+] as const;
+
+// ─── Helpers ─────────────────────────────────────────────────────────────
+
+function baseName(filePath: string): string {
+  return filePath.split("/").pop() || filePath;
+}
+
+function getEditorLanguage(filePath: string): string {
+  const lower = filePath.toLowerCase();
+  if (lower.endsWith(".yml") || lower.endsWith(".yaml")) return "yaml";
+  if (lower.endsWith(".json")) return "json";
+  if (lower.endsWith(".md") || lower.endsWith(".markdown")) return "markdown";
+  if (lower.endsWith(".js") || lower.endsWith(".mjs")) return "javascript";
+  if (lower.endsWith(".ts") || lower.endsWith(".tsx")) return "typescript";
+  if (lower.endsWith(".sh") || lower.endsWith(".bash")) return "shell";
+  if (baseName(lower) === "dockerfile") return "dockerfile";
+  return "plaintext";
+}
+
+// Tiny grouped-by-folder list to keep the modal lean.
+function groupByFolder(paths: string[]): { folder: string; files: string[] }[] {
+  const map = new Map<string, string[]>();
+  for (const p of paths) {
+    const idx = p.lastIndexOf("/");
+    const folder = idx === -1 ? "" : p.slice(0, idx);
+    if (!map.has(folder)) map.set(folder, []);
+    map.get(folder)!.push(p);
+  }
+  return Array.from(map.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([folder, files]) => ({ folder, files: files.sort() }));
+}
+
+// ─── Component ───────────────────────────────────────────────────────────
+
+interface ConsoleLine {
+  id: string;
+  kind: "stdout" | "stderr" | "info" | "input";
+  text: string;
+}
+
+export default function GithubActionsLabModal() {
+  const {
+    closeGhaLab,
+    currentQuestion,
+    runnerInitialGha,
+    runnerInitialGhaFileId,
+    saveCodeSnippetToQuestion,
+    overwriteContextFileContent,
+  } = useStore();
+
+  // ── Workspace state ────────────────────────────────────────────────
+  const [workspace, setWorkspace] = useState<GithubActionsLabWorkspace>(() =>
+    cloneGhaLabWorkspace(runnerInitialGha ?? DEFAULT_GHA_LAB),
+  );
+  const [labName, setLabName] = useState(
+    runnerInitialGha?.label ?? DEFAULT_GHA_LAB.label,
+  );
+  const [activeFile, setActiveFile] = useState(
+    runnerInitialGha?.activeFile ?? DEFAULT_GHA_LAB.activeFile,
+  );
+  const [activeGhaId, setActiveGhaId] = useState<string | null>(
+    runnerInitialGhaFileId ?? null,
+  );
+
+  useEffect(() => {
+    const next = cloneGhaLabWorkspace(runnerInitialGha ?? DEFAULT_GHA_LAB);
+    setWorkspace(next);
+    setLabName(next.label);
+    setActiveFile(next.activeFile);
+    setActiveGhaId(runnerInitialGhaFileId ?? null);
+  }, [runnerInitialGha, runnerInitialGhaFileId]);
+
+  // ── Save state ─────────────────────────────────────────────────────
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  // ── Run state ──────────────────────────────────────────────────────
+  const workflowPaths = useMemo(
+    () => listWorkflowPaths(workspace),
+    [workspace],
+  );
+  const [event, setEvent] = useState<string>(workspace.defaultEvent ?? "push");
+  const [workflow, setWorkflow] = useState<string>(
+    workspace.defaultWorkflow ?? workflowPaths[0] ?? ".github/workflows/ci.yml",
+  );
+  const [jobFilter, setJobFilter] = useState<string>("");
+  const [dryRun, setDryRun] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [consoleLines, setConsoleLines] = useState<ConsoleLine[]>([]);
+  const [runError, setRunError] = useState<string | null>(null);
+  // 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",
+  );
+  // 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);
+  const consoleEndRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // Keep workflow selection valid when files change
+    if (!workflowPaths.includes(workflow)) {
+      setWorkflow(workflowPaths[0] ?? "");
+    }
+  }, [workflowPaths, workflow]);
+
+  useEffect(() => {
+    consoleEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [consoleLines.length]);
+
+  // ── Drag / resize / maximize ───────────────────────────────────────
+  const [pos, setPos] = useState(() => ({
+    x: Math.max(0, (window.innerWidth - DEFAULT_W) / 2),
+    y: Math.max(0, (window.innerHeight - DEFAULT_H) / 2),
+  }));
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+  const dragStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+  } | null>(null);
+  const resizeStart = useRef<{
+    mx: number;
+    my: number;
+    ox: number;
+    oy: number;
+    ow: number;
+    oh: number;
+  } | null>(null);
+
+  const onTitleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      dragStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+      };
+      const onMove = (ev: MouseEvent) => {
+        if (!dragStart.current) return;
+        setPos({
+          x: Math.max(
+            0,
+            dragStart.current.ox + (ev.clientX - dragStart.current.mx),
+          ),
+          y: Math.max(
+            0,
+            dragStart.current.oy + (ev.clientY - dragStart.current.my),
+          ),
+        });
+      };
+      const onUp = () => {
+        dragStart.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [pos.x, pos.y, maximized],
+  );
+
+  const startResize = useCallback(
+    (dir: ResizeDir) => (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resizeStart.current = {
+        mx: e.clientX,
+        my: e.clientY,
+        ox: pos.x,
+        oy: pos.y,
+        ow: size.w,
+        oh: size.h,
+      };
+
+      const originalCursor = document.body.style.cursor;
+      const originalUserSelect = document.body.style.userSelect;
+      document.body.style.cursor = `${dir}-resize`;
+      document.body.style.userSelect = "none";
+
+      const onMove = (ev: MouseEvent) => {
+        const resize = resizeStart.current;
+        if (!resize) return;
+        const dx = ev.clientX - resize.mx;
+        const dy = ev.clientY - resize.my;
+        let w = resize.ow;
+        let h = resize.oh;
+        let x = resize.ox;
+        let y = resize.oy;
+
+        if (dir.includes("e")) w = Math.max(MIN_W, resize.ow + dx);
+        if (dir.includes("s")) h = Math.max(MIN_H, resize.oh + dy);
+        if (dir.includes("w")) {
+          w = Math.max(MIN_W, resize.ow - dx);
+          x = Math.min(resize.ox + resize.ow - MIN_W, resize.ox + dx);
+        }
+        if (dir.includes("n")) {
+          h = Math.max(MIN_H, resize.oh - dy);
+          y = Math.min(resize.oy + resize.oh - MIN_H, resize.oy + dy);
+        }
+
+        setSize({ w, h });
+        setPos({ x: Math.max(0, x), y: Math.max(0, y) });
+      };
+
+      const onUp = () => {
+        resizeStart.current = null;
+        document.body.style.cursor = originalCursor;
+        document.body.style.userSelect = originalUserSelect;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [maximized, pos.x, pos.y, size.w, size.h],
+  );
+
+  // ── File operations ───────────────────────────────────────────────
+  const fileOrder = useMemo(() => getGhaLabFileOrder(workspace), [workspace]);
+  const grouped = useMemo(() => groupByFolder(fileOrder), [fileOrder]);
+  const [collapsedFolders, setCollapsedFolders] = useState<Set<string>>(
+    () => new Set(),
+  );
+  const toggleFolder = (folder: string) => {
+    setCollapsedFolders((prev) => {
+      const next = new Set(prev);
+      if (next.has(folder)) next.delete(folder);
+      else next.add(folder);
+      return next;
+    });
+  };
+
+  const updateFile = (fileName: string, content: string) => {
+    setWorkspace((prev) => ({
+      ...prev,
+      activeFile: fileName,
+      files: { ...prev.files, [fileName]: content },
+    }));
+  };
+
+  const addFile = () => {
+    const name = window.prompt(
+      "New file path (e.g. .github/workflows/release.yml)",
+      ".github/workflows/new.yml",
+    );
+    if (!name) return;
+    const trimmed = name.trim();
+    if (!trimmed || workspace.files[trimmed]) return;
+    setWorkspace((prev) => ({
+      ...prev,
+      activeFile: trimmed,
+      files: { ...prev.files, [trimmed]: "" },
+    }));
+    setActiveFile(trimmed);
+  };
+
+  const deleteFile = (fileName: string) => {
+    if (!window.confirm(`Delete ${fileName}?`)) return;
+    setWorkspace((prev) => {
+      const { [fileName]: _, ...rest } = prev.files;
+      const nextActive =
+        prev.activeFile === fileName
+          ? (Object.keys(rest)[0] ?? "")
+          : prev.activeFile;
+      return { ...prev, activeFile: nextActive, files: rest };
+    });
+    if (activeFile === fileName) {
+      const remaining = Object.keys(workspace.files).filter(
+        (f) => f !== fileName,
+      );
+      setActiveFile(remaining[0] ?? "");
+    }
+  };
+
+  // ── Save lab as context file ──────────────────────────────────────
+  const handleSave = useCallback(async () => {
+    if (!currentQuestion) return;
+    setSaving(true);
+    try {
+      // When the user opted in, embed a compact summary of the most recent
+      // runs into the saved JSON so the chat LLM has real execution data
+      // to reason about (job statuses, durations, exit codes).
+      let recentRunsExtras: Record<string, unknown> = {};
+      if (workspace.includeRunHistoryInContext) {
+        try {
+          const runs = await api.listGhaRuns({
+            questionId: currentQuestion.id,
+            ...(activeGhaId ? { fileId: activeGhaId } : {}),
+            limit: 5,
+          });
+          recentRunsExtras = {
+            recentRuns: runs.map((r) => ({
+              command: r.command,
+              status: r.status,
+              exitCode: r.exitCode,
+              startedAt: r.startedAt,
+              durationMs: r.durationMs,
+              jobs: (r.jobs ?? []).map((j) => ({
+                name: j.name,
+                status: j.status,
+                durationMs: j.durationMs,
+              })),
+            })),
+          };
+        } catch {
+          // Non-fatal — just skip the appendix if the list call fails.
+        }
+      }
+      const serialized = serializeGhaLabWorkspace({
+        ...workspace,
+        label: labName || workspace.label,
+        activeFile,
+        defaultEvent: event,
+        defaultWorkflow: workflow,
+      });
+      // Splice the extras into the serialised JSON without breaking the
+      // existing schema parsers tolerate.
+      const payload = Object.keys(recentRunsExtras).length
+        ? JSON.stringify(
+            { ...JSON.parse(serialized), ...recentRunsExtras },
+            null,
+            2,
+          )
+        : serialized;
+      if (activeGhaId) {
+        await overwriteContextFileContent(
+          currentQuestion.id,
+          activeGhaId,
+          payload,
+        );
+      } else {
+        const cf = await saveCodeSnippetToQuestion(
+          currentQuestion.id,
+          payload,
+          "json",
+          labName || workspace.label,
+          "github-actions",
+        );
+        setActiveGhaId(cf.id);
+      }
+      setSaved(true);
+      window.setTimeout(() => setSaved(false), 1500);
+    } finally {
+      setSaving(false);
+    }
+  }, [
+    currentQuestion,
+    workspace,
+    labName,
+    activeFile,
+    event,
+    workflow,
+    activeGhaId,
+    overwriteContextFileContent,
+    saveCodeSnippetToQuestion,
+  ]);
+
+  // ── Run act ──────────────────────────────────────────────────────
+  const buildCommand = useCallback(() => {
+    const parts = ["act", event];
+    if (workflow) {
+      parts.push("-W", workflow);
+    }
+    if (jobFilter.trim()) {
+      parts.push("-j", jobFilter.trim());
+    }
+    if (dryRun) parts.push("-n");
+    return parts.join(" ");
+  }, [event, workflow, jobFilter, dryRun]);
+
+  const appendConsole = useCallback((line: Omit<ConsoleLine, "id">) => {
+    setConsoleLines((prev) => [
+      ...prev,
+      { ...line, id: `${Date.now()}-${Math.random().toString(36).slice(2)}` },
+    ]);
+  }, []);
+
+  const runCommand = useCallback(
+    async (command: string) => {
+      setRunning(true);
+      setRunError(null);
+      // Reset the DAG so the user always sees a fresh "pending → running →
+      // success/failed" lifecycle for this invocation. Switch tabs to Jobs
+      // so the visualisation is immediately visible.
+      setLiveJobs([]);
+      setRightTab("jobs");
+      appendConsole({ kind: "input", text: `$ ${command}\n` });
+
+      try {
+        await api.streamGhaCommand(
+          {
+            command,
+            workspace: {
+              ...workspace,
+              activeFile,
+              label: labName || workspace.label,
+              defaultEvent: event,
+              defaultWorkflow: workflow,
+            },
+            ...(activeGhaId ? { fileId: activeGhaId } : {}),
+            ...(currentQuestion ? { questionId: currentQuestion.id } : {}),
+            label: labName || workspace.label,
+          },
+          (message: GhaStreamMessage) => {
+            if (message.type === "output") {
+              appendConsole({ kind: message.kind, text: message.text });
+            } else if (message.type === "job") {
+              // Merge by job name so repeated updates (running → success)
+              // replace the prior entry rather than appending duplicates.
+              setLiveJobs((prev) => {
+                const idx = prev.findIndex((j) => j.name === message.job.name);
+                if (idx === -1) return [...prev, message.job];
+                const next = prev.slice();
+                next[idx] = message.job;
+                return next;
+              });
+            } else if (message.type === "error") {
+              setRunError(message.error);
+              appendConsole({
+                kind: "stderr",
+                text: `\n[error] ${message.error}\n`,
+              });
+            } else if (message.type === "complete") {
+              appendConsole({
+                kind: "info",
+                text: `\n[done] exit=${message.exitCode} • ${message.durationMs}ms\n`,
+              });
+              // Refresh History so the just-completed run shows up.
+              setHistoryNonce((n) => n + 1);
+            }
+          },
+        );
+      } catch (err: any) {
+        const msg = err?.message || "Failed to start run";
+        setRunError(msg);
+        appendConsole({ kind: "stderr", text: `\n[error] ${msg}\n` });
+      } finally {
+        setRunning(false);
+      }
+    },
+    [
+      workspace,
+      activeFile,
+      labName,
+      event,
+      workflow,
+      activeGhaId,
+      currentQuestion,
+      appendConsole,
+    ],
+  );
+
+  const handleRun = () => runCommand(buildCommand());
+  const handleListJobs = () =>
+    runCommand(workflow ? `act -W ${workflow} -l` : "act -l");
+
+  const clearConsole = () => setConsoleLines([]);
+
+  // ── Console input ─────────────────────────────────────────────────
+  const [consoleInput, setConsoleInput] = useState("");
+  const handleConsoleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const cmd = consoleInput.trim();
+    if (!cmd || running) return;
+    setConsoleInput("");
+    runCommand(cmd);
+  };
+
+  // ── Monaco config ─────────────────────────────────────────────────
+  const handleBeforeMount = useCallback<BeforeMount>((monaco: Monaco) => {
+    monaco.editor.defineTheme("gha-lab-dark", {
+      base: "vs-dark",
+      inherit: true,
+      rules: [
+        { token: "comment", foreground: "64748b", fontStyle: "italic" },
+        { token: "keyword", foreground: "f59e0b", fontStyle: "bold" },
+        { token: "string", foreground: "86efac" },
+        { token: "type", foreground: "a78bfa" },
+      ],
+      colors: {
+        "editor.background": "#0b0f1a",
+        "editor.foreground": "#e2e8f0",
+        "editorLineNumber.foreground": "#475569",
+        "editorLineNumber.activeForeground": "#fbbf24",
+        "editorCursor.foreground": "#fbbf24",
+        "editor.lineHighlightBackground": "#111827",
+        "editor.selectionBackground": "#92400eAA",
+      },
+    });
+  }, []);
+
+  const handleEditorChange = useCallback<OnChange>(
+    (next) => {
+      updateFile(activeFile, next ?? "");
+    },
+    [activeFile],
+  );
+
+  // ── Render ────────────────────────────────────────────────────────
+  const containerStyle: React.CSSProperties = maximized
+    ? { top: 0, left: 0, width: "100vw", height: "100vh" }
+    : {
+        top: pos.y,
+        left: pos.x,
+        width: size.w,
+        height: size.h,
+        minWidth: MIN_W,
+        minHeight: MIN_H,
+      };
+
+  return (
+    <div className="fixed inset-0 z-40 bg-black/40">
+      <div
+        className="absolute flex flex-col rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden"
+        style={containerStyle}
+      >
+        {/* Resize handles */}
+        {!maximized && (
+          <>
+            <div
+              className="absolute inset-x-0 top-0 h-1 cursor-n-resize z-20"
+              onMouseDown={startResize("n")}
+            />
+            <div
+              className="absolute inset-x-0 bottom-0 h-1 cursor-s-resize z-20"
+              onMouseDown={startResize("s")}
+            />
+            <div
+              className="absolute inset-y-0 left-0 w-1 cursor-w-resize z-20"
+              onMouseDown={startResize("w")}
+            />
+            <div
+              className="absolute inset-y-0 right-0 w-1 cursor-e-resize z-20"
+              onMouseDown={startResize("e")}
+            />
+            <div
+              className="absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-30"
+              onMouseDown={startResize("nw")}
+            />
+            <div
+              className="absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-30"
+              onMouseDown={startResize("ne")}
+            />
+            <div
+              className="absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-30"
+              onMouseDown={startResize("sw")}
+            />
+            <div
+              className="absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-30"
+              onMouseDown={startResize("se")}
+            />
+          </>
+        )}
+
+        {/* Title bar */}
+        <div
+          onMouseDown={onTitleMouseDown}
+          className="flex items-center gap-2 border-b border-slate-800 bg-slate-900/80 px-4 py-2 cursor-move select-none"
+        >
+          <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
+            </span>
+          </div>
+          <input
+            value={labName}
+            onChange={(e) => setLabName(e.target.value)}
+            className="ml-2 flex-1 bg-transparent text-sm font-medium text-slate-100 outline-none border-b border-transparent focus:border-amber-500/50"
+          />
+          <button
+            onClick={() => setMaximized((v) => !v)}
+            className="p-1.5 rounded text-slate-400 hover:text-amber-300 hover:bg-slate-800/60"
+            title={maximized ? "Restore" : "Maximize"}
+          >
+            {maximized ? (
+              <Minimize2 className="w-4 h-4" />
+            ) : (
+              <Maximize2 className="w-4 h-4" />
+            )}
+          </button>
+          <button
+            onClick={closeGhaLab}
+            className="p-1.5 rounded text-slate-400 hover:text-red-300 hover:bg-slate-800/60"
+            title="Close"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Toolbar */}
+        <div className="flex flex-wrap items-center gap-2 border-b border-slate-800 bg-slate-900/40 px-3 py-2 text-xs">
+          <label className="text-slate-400">Event</label>
+          <select
+            value={event}
+            onChange={(e) => setEvent(e.target.value)}
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-200"
+          >
+            {EVENTS.map((ev) => (
+              <option key={ev} value={ev}>
+                {ev}
+              </option>
+            ))}
+          </select>
+
+          <label className="ml-2 text-slate-400">Workflow</label>
+          <select
+            value={workflow}
+            onChange={(e) => setWorkflow(e.target.value)}
+            className="rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-200"
+          >
+            {workflowPaths.length === 0 && (
+              <option value="">No workflows</option>
+            )}
+            {workflowPaths.map((wf) => (
+              <option key={wf} value={wf}>
+                {wf}
+              </option>
+            ))}
+          </select>
+
+          <label className="ml-2 text-slate-400">Job</label>
+          <input
+            value={jobFilter}
+            onChange={(e) => setJobFilter(e.target.value)}
+            placeholder="(all)"
+            className="w-24 rounded border border-slate-700 bg-slate-900 px-2 py-1 text-slate-200 placeholder:text-slate-600"
+          />
+
+          <label className="ml-2 inline-flex items-center gap-1 text-slate-400">
+            <input
+              type="checkbox"
+              checked={dryRun}
+              onChange={(e) => setDryRun(e.target.checked)}
+              className="accent-amber-400"
+            />
+            Dry run
+          </label>
+
+          <div className="ml-auto flex items-center gap-2">
+            <button
+              onClick={handleListJobs}
+              disabled={running}
+              className="flex items-center gap-1 rounded border border-slate-700 px-2 py-1 text-slate-300 hover:border-amber-500/40 hover:text-amber-200 disabled:opacity-50"
+              title="List jobs in the selected workflow"
+            >
+              List jobs
+            </button>
+            <button
+              onClick={handleRun}
+              disabled={running || workflowPaths.length === 0}
+              className="flex items-center gap-1 rounded bg-amber-500/20 border border-amber-500/40 px-3 py-1 text-amber-200 hover:bg-amber-500/30 disabled:opacity-50"
+            >
+              {running ? (
+                <Loader2 className="w-3.5 h-3.5 animate-spin" />
+              ) : (
+                <Play className="w-3.5 h-3.5" />
+              )}
+              Run
+            </button>
+            {currentQuestion && (
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="flex items-center gap-1 rounded border border-slate-700 px-2 py-1 text-slate-300 hover:border-amber-500/40 hover:text-amber-200 disabled:opacity-50"
+                title={activeGhaId ? "Update lab snapshot" : "Save as lab"}
+              >
+                {saving ? (
+                  <Loader2 className="w-3.5 h-3.5 animate-spin" />
+                ) : (
+                  <Save className="w-3.5 h-3.5" />
+                )}
+                {saved ? "Saved" : activeGhaId ? "Update" : "Save"}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Main body */}
+        <div
+          className="flex-1 min-h-0 grid"
+          style={{
+            gridTemplateColumns: [
+              leftCollapsed ? "0px" : "220px",
+              "minmax(0,1fr)",
+              rightCollapsed ? "0px" : "minmax(320px,1fr)",
+            ].join(" "),
+          }}
+        >
+          {/* File tree */}
+          <div
+            className="flex flex-col border-r border-slate-800 bg-slate-900/30 min-h-0 overflow-hidden"
+            style={{
+              gridColumn: 1,
+              visibility: leftCollapsed ? "hidden" : undefined,
+              borderRightWidth: leftCollapsed ? 0 : undefined,
+            }}
+          >
+            <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>
+            <div className="flex-1 overflow-auto p-1 text-xs">
+              {grouped.map(({ folder, files }) => {
+                const collapsed = collapsedFolders.has(folder);
+                return (
+                  <div key={folder || "root"} className="mb-1">
+                    {folder && (
+                      <button
+                        onClick={() => toggleFolder(folder)}
+                        className="flex items-center gap-1 w-full px-1 py-0.5 text-slate-400 hover:text-slate-200"
+                      >
+                        {collapsed ? (
+                          <ChevronRight className="w-3 h-3" />
+                        ) : (
+                          <ChevronDown className="w-3 h-3" />
+                        )}
+                        <Folder className="w-3 h-3" />
+                        <span className="truncate">{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 ${
+                            activeFile === filePath
+                              ? "bg-amber-500/15 text-amber-200"
+                              : "text-slate-300 hover:bg-slate-800/40"
+                          }`}
+                          onClick={() => setActiveFile(filePath)}
+                          style={{ paddingLeft: folder ? 20 : 6 }}
+                        >
+                          <span className="truncate flex-1">
+                            {baseName(filePath)}
+                          </span>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              deleteFile(filePath);
+                            }}
+                            className="opacity-0 group-hover:opacity-100 p-0.5 text-slate-500 hover:text-red-400"
+                            title="Delete"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </button>
+                        </div>
+                      ))}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+
+          {/* Editor */}
+          <div
+            className="min-h-0 flex flex-col border-r border-slate-800"
+            style={{ gridColumn: 2 }}
+          >
+            <div className="flex items-center justify-between gap-2 px-2 py-1.5 border-b border-slate-800/60 text-[11px] text-slate-400">
+              <div className="flex items-center gap-1 min-w-0">
+                <button
+                  onClick={() => setLeftCollapsed((v) => !v)}
+                  className="p-1 rounded text-slate-500 hover:text-amber-300 hover:bg-slate-800/60 shrink-0"
+                  title={
+                    leftCollapsed ? "Show files panel" : "Hide files panel"
+                  }
+                >
+                  {leftCollapsed ? (
+                    <PanelLeftOpen className="w-3.5 h-3.5" />
+                  ) : (
+                    <PanelLeftClose className="w-3.5 h-3.5" />
+                  )}
+                </button>
+                <span className="truncate">
+                  {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" />
+                )}
+              </button>
+            </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={`file:///gha-lab/${activeFile}`}
+                  value={workspace.files[activeFile]}
+                  beforeMount={handleBeforeMount}
+                  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 / History */}
+          <div
+            className="min-h-0 flex flex-col bg-slate-950 overflow-hidden"
+            style={{
+              gridColumn: 3,
+              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: "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.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>
+              <div className="flex items-center gap-1">
+                {running && (
+                  <button
+                    onClick={() => abortRef.current?.abort()}
+                    className="p-1 rounded text-amber-300 hover:bg-slate-800/60"
+                    title="Stop (close & restart to fully cancel)"
+                  >
+                    <StopCircle className="w-3.5 h-3.5" />
+                  </button>
+                )}
+                {rightTab === "console" && (
+                  <button
+                    onClick={clearConsole}
+                    className="p-1 rounded text-slate-500 hover:text-slate-200 hover:bg-slate-800/60"
+                    title="Clear console"
+                  >
+                    <Trash2 className="w-3.5 h-3.5" />
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {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 ? (
+                    <div className="text-slate-600">
+                      Click <span className="text-amber-300">Run</span> to
+                      execute the selected workflow with{" "}
+                      <span className="text-amber-300">act</span>. Output will
+                      stream here just like the Actions tab on GitHub.
+                      {"\n\n"}
+                      Tips:
+                      {"\n"} • First run pulls a ~500 MB runner image. Be
+                      patient.
+                      {"\n"} • Use{" "}
+                      <span className="text-amber-300">Dry run</span> to plan a
+                      workflow without Docker.
+                      {"\n"} • Switch to the{" "}
+                      <span className="text-amber-300">Jobs</span> tab to see a
+                      live DAG of running, succeeded, and failed jobs.
+                    </div>
+                  ) : (
+                    consoleLines.map((line) => (
+                      <div
+                        key={line.id}
+                        className={
+                          line.kind === "stderr"
+                            ? "text-red-300"
+                            : line.kind === "info"
+                              ? "text-slate-400"
+                              : line.kind === "input"
+                                ? "text-amber-200"
+                                : "text-slate-200"
+                        }
+                      >
+                        {line.text}
+                      </div>
+                    ))
+                  )}
+                  {runError && (
+                    <div className="mt-2 rounded border border-red-500/30 bg-red-500/10 px-2 py-1 text-red-200">
+                      {runError}
+                    </div>
+                  )}
+                  <div ref={consoleEndRef} />
+                </div>
+                <form
+                  onSubmit={handleConsoleSubmit}
+                  className="flex items-center gap-2 border-t border-slate-800/60 px-3 py-1.5"
+                >
+                  <span className="text-amber-400 text-xs font-mono">$</span>
+                  <input
+                    value={consoleInput}
+                    onChange={(e) => setConsoleInput(e.target.value)}
+                    disabled={running}
+                    placeholder="act -l   |   act push -j greet   |   act -n"
+                    className="flex-1 bg-transparent text-xs font-mono text-slate-200 placeholder:text-slate-600 outline-none disabled:opacity-50"
+                  />
+                </form>
+              </>
+            )}
+
+            {rightTab === "jobs" && (
+              <GhaJobsPanel
+                workflowYaml={workflow ? workspace.files[workflow] : undefined}
+                jobs={liveJobs}
+                caption={
+                  running
+                    ? "Live — updating as act emits job lines"
+                    : liveJobs.length
+                      ? "Last run"
+                      : "Pre-run plan (parsed from workflow YAML)"
+                }
+              />
+            )}
+
+            {rightTab === "history" && (
+              <GhaHistoryPanel
+                {...(currentQuestion ? { questionId: currentQuestion.id } : {})}
+                {...(activeGhaId ? { fileId: activeGhaId } : {})}
+                includeInContext={!!workspace.includeRunHistoryInContext}
+                onToggleIncludeInContext={(next) =>
+                  setWorkspace((prev) => ({
+                    ...prev,
+                    includeRunHistoryInContext: next,
+                  }))
+                }
+                refreshNonce={historyNonce}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}