create-interview-cockpit 0.18.0 → 0.19.0

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

@@ -7,6 +7,10 @@ import {
   Loader2,
   Maximize2,
   Minimize2,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PanelRightClose,
+  PanelRightOpen,
   Play,
   Save,
   StopCircle,
@@ -26,7 +30,9 @@ import {
 } from "../githubActionsLab";
 import type { GithubActionsLabWorkspace } from "../types";
 import * as api from "../api";
-import type { GhaStreamMessage } from "../api";
+import type { GhaJobSnapshot, GhaStreamMessage } from "../api";
+import GhaJobsPanel from "./GhaJobsPanel";
+import GhaHistoryPanel from "./GhaHistoryPanel";
 
 // ─── Modal layout constants ──────────────────────────────────────────────
 
@@ -36,6 +42,7 @@ 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",
@@ -135,6 +142,17 @@ export default function GithubActionsLabModal() {
   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);
 
@@ -162,6 +180,14 @@ export default function GithubActionsLabModal() {
     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) => {
@@ -196,6 +222,64 @@ export default function GithubActionsLabModal() {
     [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]);
@@ -258,13 +342,51 @@ export default function GithubActionsLabModal() {
     if (!currentQuestion) return;
     setSaving(true);
     try {
-      const payload = serializeGhaLabWorkspace({
+      // 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,
@@ -322,6 +444,11 @@ export default function GithubActionsLabModal() {
     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 {
@@ -342,6 +469,16 @@ export default function GithubActionsLabModal() {
           (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({
@@ -353,6 +490,8 @@ export default function GithubActionsLabModal() {
                 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);
             }
           },
         );
@@ -425,14 +564,59 @@ export default function GithubActionsLabModal() {
   // ── 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 };
+    : {
+        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 backdrop-blur-sm">
+    <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}
@@ -558,9 +742,25 @@ export default function GithubActionsLabModal() {
         </div>
 
         {/* Main body */}
-        <div className="flex-1 min-h-0 grid grid-cols-[220px_1fr_1fr]">
+        <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">
+          <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
@@ -626,9 +826,44 @@ export default function GithubActionsLabModal() {
           </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
+            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 && (
@@ -658,12 +893,41 @@ export default function GithubActionsLabModal() {
             </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
+          {/* 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 && (
@@ -675,69 +939,107 @@ export default function GithubActionsLabModal() {
                     <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>
+                {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>
-            <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}
+
+            {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>
-              )}
-              <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
+                  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)"
+                }
               />
-            </form>
+            )}
+
+            {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>