create-interview-cockpit 0.22.0 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-interview-cockpit",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "description": "Scaffold a personal AI-powered interview prep cockpit",
   "type": "module",
   "bin": {

package/template/client/src/api.ts

@@ -549,11 +549,13 @@ export async function streamGhaCommand(
     workspace: GithubActionsLabWorkspace;
   },
   onMessage: (message: GhaStreamMessage) => void,
+  options?: { signal?: AbortSignal },
 ): Promise<void> {
   const res = await fetch(`${BASE}/gha/run-stream`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(input),
+    ...(options?.signal ? { signal: options.signal } : {}),
   });
   if (!res.ok || !res.body) {
     const err = await res.text().catch(() => "act run failed");

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

@@ -0,0 +1,281 @@
+import { useEffect, useMemo, useState } from "react";
+import { GitBranch, Info, Layers, Trash2, XCircle } from "lucide-react";
+import {
+  evaluateConcurrencyFor,
+  type GhaConcurrencyContext,
+  type GhaConcurrencyRun,
+  type ParsedConcurrency,
+} from "../ghaConcurrency";
+
+// ─── Status pill ────────────────────────────────────────────────────────
+
+function StatusPill({ status }: { status: GhaConcurrencyRun["status"] }) {
+  const cls =
+    status === "running"
+      ? "bg-amber-500/15 text-amber-200 border-amber-500/30"
+      : status === "pending"
+        ? "bg-slate-700/40 text-slate-300 border-slate-600/40"
+        : status === "completed"
+          ? "bg-emerald-500/15 text-emerald-200 border-emerald-500/30"
+          : "bg-red-500/10 text-red-300 border-red-500/30";
+  return (
+    <span
+      className={`inline-block rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide ${cls}`}
+    >
+      {status}
+    </span>
+  );
+}
+
+// ─── Component ──────────────────────────────────────────────────────────
+
+interface Props {
+  parsed: ParsedConcurrency | null;
+  workflowPath: string;
+  runs: GhaConcurrencyRun[];
+  context: GhaConcurrencyContext;
+  onContextChange: (next: GhaConcurrencyContext) => void;
+  onClearRuns: () => void;
+}
+
+/**
+ * Live viewer of how GitHub's concurrency rules are being applied to the
+ * real `act` runs triggered from the lab. The user edits the simulated
+ * `github.*` context here; that context is then used at Run-button time
+ * to compute (groupKey, cancelInProgress) for the new run.
+ */
+export default function GhaConcurrencyPanel({
+  parsed,
+  workflowPath,
+  runs,
+  context,
+  onContextChange,
+  onClearRuns,
+}: Props) {
+  // Preview the (groupKey, cancelInProgress) the NEXT triggered run would
+  // get with the current context — useful so the user can confirm their
+  // setup before clicking Run.
+  const preview = useMemo(
+    () => evaluateConcurrencyFor(parsed, context),
+    [parsed, context],
+  );
+
+  const groups = useMemo(() => {
+    const map = new Map<string, GhaConcurrencyRun[]>();
+    for (const r of runs) {
+      if (!map.has(r.groupKey)) map.set(r.groupKey, []);
+      map.get(r.groupKey)!.push(r);
+    }
+    return Array.from(map.entries()).map(([key, items]) => ({
+      key,
+      items: items.slice().sort((a, b) => a.seq - b.seq),
+    }));
+  }, [runs]);
+
+  return (
+    <div className="flex-1 min-h-0 overflow-auto p-3 text-xs text-slate-300 space-y-3">
+      {/* ── Explanation ──────────────────────────────────────────────── */}
+      <section className="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">
+          <GitBranch className="h-4 w-4" />
+          Concurrency applied to real runs
+        </div>
+        <p className="text-slate-400 leading-5">
+          Click <span className="text-amber-200">Run</span> in the toolbar to
+          trigger a real <span className="text-amber-200">act</span> invocation.
+          When you click Run again while one is still in flight the lab will
+          apply GitHub&apos;s rules: same group with{" "}
+          <span className="text-amber-200">cancel-in-progress: true</span>{" "}
+          cancels the active run, otherwise the new run is queued behind it.
+          Different group keys queue too (the console only shows one run at a
+          time), and would run in parallel on real GitHub.
+        </p>
+      </section>
+
+      {/* ── Parsed block ─────────────────────────────────────────────── */}
+      <section className="rounded-xl border border-slate-800 bg-slate-900/40 p-3">
+        <div className="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-200">
+          <Layers className="h-3.5 w-3.5 text-amber-300" />
+          Workflow concurrency block
+          <span className="ml-auto font-normal normal-case text-slate-500 truncate">
+            {workflowPath || <em>no workflow selected</em>}
+          </span>
+        </div>
+        {parsed ? (
+          <div className="grid grid-cols-[110px_1fr] gap-y-1 text-[11px] font-mono">
+            <span className="text-slate-500">group</span>
+            <span className="text-slate-200 break-all">{parsed.groupExpr}</span>
+            <span className="text-slate-500">cancel</span>
+            <span className="text-slate-200 break-all">
+              {parsed.cancelExpr}
+            </span>
+            <span className="text-slate-500">next → key</span>
+            <span className="text-amber-200 break-all">
+              {preview.groupKey || <em className="text-slate-600">empty</em>}
+            </span>
+            <span className="text-slate-500">next → cancel?</span>
+            <span
+              className={
+                preview.cancelInProgress ? "text-emerald-300" : "text-slate-400"
+              }
+            >
+              {preview.cancelInProgress ? "true" : "false"}
+            </span>
+          </div>
+        ) : (
+          <div className="text-slate-400 leading-5">
+            No <span className="text-amber-200">concurrency:</span> block in
+            this workflow. New runs queue serially in the lab; GitHub would run
+            them in parallel. Add a block to try it:
+            <pre className="mt-2 rounded-lg border border-slate-800 bg-slate-950/70 p-2 text-[11px] text-slate-200 overflow-auto">{`concurrency:
+  group: ci-\${{ github.event_name }}-\${{ github.head_ref || github.ref }}
+  cancel-in-progress: \${{ github.event_name == 'pull_request' }}`}</pre>
+          </div>
+        )}
+      </section>
+
+      {/* ── Simulated github.* context ───────────────────────────────── */}
+      <section className="rounded-xl border border-slate-800 bg-slate-900/40 p-3">
+        <div className="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-200">
+          <Info className="h-3.5 w-3.5 text-amber-300" />
+          Simulated github context (applied to the next run)
+        </div>
+        <p className="mb-2 text-slate-500 leading-5">
+          <span className="text-amber-200">github.event_name</span> comes from
+          the toolbar Event selector; the rest is edited here. These values are
+          used only to evaluate the concurrency expression — the actual act
+          invocation isn&apos;t affected.
+        </p>
+        <div className="grid grid-cols-2 gap-2">
+          {(
+            [
+              { key: "ref", label: "github.ref" },
+              { key: "head_ref", label: "github.head_ref" },
+              { key: "workflow", label: "github.workflow" },
+            ] as const
+          ).map((field) => (
+            <label key={field.key} className="block">
+              <span className="block text-[10px] uppercase tracking-wider text-slate-500">
+                {field.label}
+              </span>
+              <input
+                value={context[field.key]}
+                onChange={(e) =>
+                  onContextChange({ ...context, [field.key]: e.target.value })
+                }
+                className="mt-0.5 w-full rounded border border-slate-800 bg-slate-950/60 px-2 py-1 font-mono text-[11px] text-slate-200 outline-none focus:border-amber-500/40"
+              />
+            </label>
+          ))}
+          <div>
+            <span className="block text-[10px] uppercase tracking-wider text-slate-500">
+              github.event_name
+            </span>
+            <div className="mt-0.5 w-full rounded border border-slate-800 bg-slate-950/30 px-2 py-1 font-mono text-[11px] text-slate-500">
+              {context.event_name}{" "}
+              <span className="text-slate-600">(from toolbar)</span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* ── Run timeline ─────────────────────────────────────────────── */}
+      <section className="rounded-xl border border-slate-800 bg-slate-900/40 p-3">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wider text-slate-200">
+            <Layers className="h-3.5 w-3.5 text-amber-300" />
+            Runs grouped by concurrency key
+          </div>
+          {runs.length > 0 && (
+            <button
+              onClick={onClearRuns}
+              className="text-slate-500 hover:text-slate-200"
+              title="Clear concurrency history"
+            >
+              <Trash2 className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+
+        {runs.length === 0 ? (
+          <p className="text-slate-500 leading-5">
+            No runs yet. Click <span className="text-amber-200">Run</span> in
+            the toolbar twice in a row to watch the rules kick in.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {groups.map((g) => (
+              <div
+                key={g.key || "__no_group__"}
+                className="rounded-lg border border-slate-800 bg-slate-950/40 p-2"
+              >
+                <div className="mb-1.5 flex items-center justify-between gap-2 text-[10px] font-mono text-slate-400">
+                  <span className="text-amber-200 break-all">
+                    {g.key || (
+                      <em className="text-slate-600">(no concurrency block)</em>
+                    )}
+                  </span>
+                  <span className="text-slate-600">
+                    {g.items.length} run(s)
+                  </span>
+                </div>
+                <ul className="space-y-1">
+                  {g.items.map((r) => (
+                    <RunRow key={r.id} run={r} />
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function RunRow({ run }: { run: GhaConcurrencyRun }) {
+  // Re-render this single row every 250ms while running so the elapsed
+  // timer ticks. The rest of the panel stays still.
+  const [, force] = useState(0);
+  useEffect(() => {
+    if (run.status !== "running") return;
+    const id = window.setInterval(() => force((n) => n + 1), 250);
+    return () => window.clearInterval(id);
+  }, [run.status]);
+
+  const elapsed = (() => {
+    if (run.startedAt == null) return null;
+    const end = run.endedAt ?? Date.now();
+    return Math.max(0, end - run.startedAt);
+  })();
+
+  return (
+    <li className="rounded border border-slate-800/70 bg-slate-900/40 p-1.5">
+      <div className="flex items-center gap-2 text-[11px]">
+        <span className="font-mono text-slate-500">#{run.seq}</span>
+        <StatusPill status={run.status} />
+        <span className="font-mono text-slate-400 truncate">
+          {run.eventName} ·{" "}
+          {run.context.head_ref || run.context.ref || run.workflowPath}
+        </span>
+        <span className="ml-auto font-mono text-slate-500">
+          {elapsed != null ? `${(elapsed / 1000).toFixed(1)}s` : ""}
+          {run.exitCode != null && (
+            <span className="ml-1 text-slate-600">exit={run.exitCode}</span>
+          )}
+        </span>
+        {run.status === "cancelled" && (
+          <XCircle className="h-3 w-3 text-red-400" />
+        )}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-[10px] text-slate-600">
+        {run.command}
+      </div>
+      {run.cancelReason && (
+        <div className="mt-1 text-[10px] text-red-300/80">
+          {run.cancelReason}
+        </div>
+      )}
+    </li>
+  );
+}