create-interview-cockpit 0.17.3 → 0.18.0

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

@@ -0,0 +1,746 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  FilePlus,
+  Folder,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  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 { GhaStreamMessage } from "../api";
+
+// ─── 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';
+
+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);
+  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 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],
+  );
+
+  // ── 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 {
+      const payload = serializeGhaLabWorkspace({
+        ...workspace,
+        label: labName || workspace.label,
+        activeFile,
+        defaultEvent: event,
+        defaultWorkflow: workflow,
+      });
+      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);
+      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 === "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`,
+              });
+            }
+          },
+        );
+      } 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 };
+
+  return (
+    <div className="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm">
+      <div
+        className="absolute flex flex-col rounded-2xl border border-slate-800 bg-slate-950 shadow-2xl overflow-hidden"
+        style={containerStyle}
+      >
+        {/* 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 grid-cols-[220px_1fr_1fr]">
+          {/* File tree */}
+          <div className="flex flex-col border-r border-slate-800 bg-slate-900/30 min-h-0">
+            <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">
+            <div className="px-3 py-1.5 border-b border-slate-800/60 text-[11px] text-slate-400 truncate">
+              {activeFile || "(no file selected)"}
+            </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>
+
+          {/* Console */}
+          <div className="min-h-0 flex flex-col bg-slate-950">
+            <div className="flex items-center justify-between border-b border-slate-800/60 px-3 py-1.5">
+              <div className="flex items-center gap-1 text-[11px] text-slate-400">
+                <Terminal className="w-3 h-3" />
+                Console
+              </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>
+                )}
+                <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>
+            <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"} • You can also type{" "}
+                  <span className="text-amber-300">act -l</span> in the console
+                  below.
+                </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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}