create-interview-cockpit 0.18.0 → 0.20.0

package/package.json

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

package/template/client/src/api.ts

@@ -486,8 +486,57 @@ export async function streamInfraCommand(
 
 // ─── GitHub Actions Lab ──────────────────────────────────────────────────
 
+export type GhaJobStatus =
+  | "pending"
+  | "running"
+  | "success"
+  | "failed"
+  | "skipped";
+
+export interface GhaStepSnapshot {
+  name: string;
+  phase: "Main" | "Pre" | "Post";
+  status: GhaJobStatus;
+  startedAt?: string;
+  endedAt?: string;
+  durationMs?: number;
+  log?: string;
+}
+
+export interface GhaJobSnapshot {
+  name: string;
+  workflow?: string;
+  status: GhaJobStatus;
+  startedAt?: string;
+  endedAt?: string;
+  durationMs?: number;
+  steps?: GhaStepSnapshot[];
+}
+
+export interface GhaRunMetadata {
+  id: string;
+  fileId?: string;
+  questionId?: string;
+  label: string;
+  command: string;
+  status: "completed" | "failed";
+  startedAt: string;
+  completedAt: string;
+  durationMs: number;
+  exitCode: number;
+  error?: string;
+  jobs?: GhaJobSnapshot[];
+  event?: string;
+  workflow?: string;
+}
+
+export interface GhaRunDetails extends GhaRunMetadata {
+  log: string;
+}
+
 export type GhaStreamMessage =
   | { type: "output"; kind: "stdout" | "stderr" | "info"; text: string }
+  | { type: "job"; job: GhaJobSnapshot }
   | { type: "complete"; runId: string; exitCode: number; durationMs: number }
   | { type: "error"; error: string };
 
@@ -538,6 +587,27 @@ export async function streamGhaCommand(
   if (buffer.trim()) flushBuffer();
 }
 
+export async function listGhaRuns(params: {
+  questionId?: string;
+  fileId?: string;
+  limit?: number;
+}): Promise<GhaRunMetadata[]> {
+  const search = new URLSearchParams();
+  if (params.questionId) search.set("questionId", params.questionId);
+  if (params.fileId) search.set("fileId", params.fileId);
+  if (params.limit) search.set("limit", String(params.limit));
+  const qs = search.toString();
+  const res = await fetch(`${BASE}/gha/runs${qs ? `?${qs}` : ""}`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
+export async function fetchGhaRun(runId: string): Promise<GhaRunDetails> {
+  const res = await fetch(`${BASE}/gha/runs/${encodeURIComponent(runId)}`);
+  if (!res.ok) throw new Error(await res.text());
+  return res.json();
+}
+
 export async function fetchInfraRun(runId: string): Promise<InfraRunDetails> {
   const res = await fetch(`${BASE}/infra/runs/${encodeURIComponent(runId)}`);
   if (!res.ok) throw new Error(await res.text());
@@ -749,6 +819,17 @@ export async function syncWorkspaceApi(
   return res.json();
 }
 
+export async function syncTopicApi(
+  workspaceId: string,
+  topicId: string,
+): Promise<SyncWorkspaceResult> {
+  const res = await fetch(
+    `${BASE}/workspaces/${workspaceId}/topics/${topicId}/sync`,
+    { method: "POST" },
+  );
+  return res.json();
+}
+
 export type ExportWorkspaceResult =
   | { needsAuth: true; authUrl: string }
   | {
@@ -775,6 +856,26 @@ export async function exportWorkspaceToDrive(
   return res.json();
 }
 
+export async function exportTopicToDrive(
+  workspaceId: string,
+  topicId: string,
+  targetFolderId?: string,
+): Promise<ExportWorkspaceResult> {
+  const res = await fetch(
+    `${BASE}/workspaces/${workspaceId}/topics/${topicId}/export-drive`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ targetFolderId }),
+    },
+  );
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error((body as any).error || `Export failed (${res.status})`);
+  }
+  return res.json();
+}
+
 export interface DriveFolder {
   id: string;
   name: string;

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

@@ -0,0 +1,194 @@
+import { useEffect, useState } from "react";
+import { ChevronDown, ChevronRight, RefreshCw } from "lucide-react";
+import * as api from "../api";
+import type { GhaRunMetadata, GhaRunDetails } from "../api";
+import GhaJobsPanel from "./GhaJobsPanel";
+
+// ─── Helpers ─────────────────────────────────────────────────────────────
+
+function formatRelative(iso: string): string {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 60_000) return "just now";
+  const m = Math.floor(ms / 60_000);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  const d = Math.floor(h / 24);
+  return `${d}d ago`;
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = ms / 1000;
+  if (s < 60) return `${s.toFixed(1)}s`;
+  return `${Math.round(s)}s`;
+}
+
+function statusBadge(status: string) {
+  const map: Record<string, string> = {
+    completed: "bg-emerald-500/15 text-emerald-300 border-emerald-500/30",
+    failed: "bg-red-500/15 text-red-300 border-red-500/30",
+  };
+  return map[status] ?? "bg-slate-500/15 text-slate-300 border-slate-500/30";
+}
+
+// ─── Component ───────────────────────────────────────────────────────────
+
+export interface GhaHistoryPanelProps {
+  questionId?: string;
+  fileId?: string;
+  // Controlled flag — when true, the user has opted to include recent run
+  // history in the saved lab snapshot so chat LLM context picks it up.
+  includeInContext: boolean;
+  onToggleIncludeInContext: (next: boolean) => void;
+  // Bump this to force a refetch (e.g. after a run finishes).
+  refreshNonce: number;
+}
+
+export default function GhaHistoryPanel({
+  questionId,
+  fileId,
+  includeInContext,
+  onToggleIncludeInContext,
+  refreshNonce,
+}: GhaHistoryPanelProps) {
+  const [runs, setRuns] = useState<GhaRunMetadata[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [details, setDetails] = useState<Record<string, GhaRunDetails>>({});
+
+  const load = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const list = await api.listGhaRuns({ questionId, fileId, limit: 25 });
+      setRuns(list);
+    } catch (err: any) {
+      setError(err?.message || "Failed to load runs");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    void load();
+    // load when filters or refresh nonce change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [questionId, fileId, refreshNonce]);
+
+  const toggleExpanded = async (runId: string) => {
+    if (expandedId === runId) {
+      setExpandedId(null);
+      return;
+    }
+    setExpandedId(runId);
+    if (!details[runId]) {
+      try {
+        const full = await api.fetchGhaRun(runId);
+        setDetails((prev) => ({ ...prev, [runId]: full }));
+      } catch {
+        // surface inline; the row already shows summary info
+      }
+    }
+  };
+
+  return (
+    <div className="flex-1 min-h-0 flex flex-col">
+      <div className="flex items-center justify-between border-b border-slate-800/60 px-3 py-2 gap-3">
+        <label className="flex items-center gap-2 text-[11px] text-slate-300 cursor-pointer select-none">
+          <input
+            type="checkbox"
+            checked={includeInContext}
+            onChange={(e) => onToggleIncludeInContext(e.target.checked)}
+            className="accent-amber-400"
+          />
+          Include recent runs in LLM context when saving
+        </label>
+        <button
+          onClick={() => void load()}
+          className="p-1 rounded text-slate-400 hover:text-slate-100 hover:bg-slate-800/60"
+          title="Refresh"
+        >
+          <RefreshCw
+            className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`}
+          />
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-auto">
+        {error && (
+          <div className="m-3 rounded border border-red-500/30 bg-red-500/10 px-2 py-1 text-[11px] text-red-200">
+            {error}
+          </div>
+        )}
+        {!loading && runs.length === 0 && !error && (
+          <div className="px-3 py-6 text-center text-xs text-slate-500">
+            No previous runs yet. Click Run to record the first one.
+          </div>
+        )}
+        <ul className="divide-y divide-slate-800/60">
+          {runs.map((run) => {
+            const expanded = expandedId === run.id;
+            const detail = details[run.id];
+            return (
+              <li key={run.id} className="text-[11px]">
+                <button
+                  onClick={() => void toggleExpanded(run.id)}
+                  className="w-full flex items-center gap-2 px-3 py-2 hover:bg-slate-800/40 text-left"
+                >
+                  {expanded ? (
+                    <ChevronDown className="w-3 h-3 text-slate-500" />
+                  ) : (
+                    <ChevronRight className="w-3 h-3 text-slate-500" />
+                  )}
+                  <span
+                    className={`text-[10px] px-1.5 py-0.5 rounded border ${statusBadge(
+                      run.status,
+                    )}`}
+                  >
+                    {run.status === "completed" ? "OK" : "FAIL"}
+                  </span>
+                  <span className="font-mono text-slate-300 truncate flex-1">
+                    {run.command}
+                  </span>
+                  <span className="text-slate-500">
+                    {formatDuration(run.durationMs)}
+                  </span>
+                  <span className="text-slate-500 w-16 text-right">
+                    {formatRelative(run.startedAt)}
+                  </span>
+                </button>
+                {expanded && (
+                  <div className="border-t border-slate-800/40 bg-slate-950/50">
+                    <div className="px-3 py-2">
+                      {/* Render as a flat list — the current workflow YAML
+                          may have diverged since this run, so showing the
+                          DAG would be misleading. The list mirrors what
+                          actually executed. */}
+                      <GhaJobsPanel
+                        mode="list"
+                        jobs={run.jobs ?? []}
+                        caption={`Run ${run.id.slice(0, 8)} • exit=${run.exitCode}`}
+                      />
+                    </div>
+                    {detail?.log && (
+                      <details className="px-3 pb-3">
+                        <summary className="cursor-pointer text-[10px] text-slate-500 hover:text-slate-300">
+                          Show raw log ({detail.log.length} chars)
+                        </summary>
+                        <pre className="mt-2 max-h-72 overflow-auto rounded bg-black/40 p-2 text-[10px] text-slate-300 whitespace-pre-wrap">
+                          {detail.log}
+                        </pre>
+                      </details>
+                    )}
+                  </div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}