create-interview-cockpit 0.18.0 → 0.20.0

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

@@ -1,7 +1,11 @@
 import { useState } from "react";
 import { useStore } from "../store";
 import { DOCKER_DEEP_DIVE_LAB, parseInfraLabWorkspace } from "../infraLab";
-import { DEFAULT_GHA_LAB, parseGhaLabWorkspace } from "../githubActionsLab";
+import {
+  DEFAULT_GHA_LAB,
+  parseGhaLabWorkspace,
+  REACT_VITE_TYPESCRIPT_GHA_LAB,
+} from "../githubActionsLab";
 import { ENTERPRISE_LOCAL_AUTH_LAB } from "../enterpriseLocalLab";
 import {
   parseFrontendLabWorkspace,
@@ -656,6 +660,12 @@ export default function LabsPanel() {
             origin="github-actions"
             emptyText="Save a GitHub Actions lab to reopen it here"
             newLabMenu={[
+              {
+                label: "React Vite TypeScript Starter",
+                description:
+                  "Scaffolded React app with an empty .github/workflows/ci.yml",
+                onClick: () => openGhaLab(REACT_VITE_TYPESCRIPT_GHA_LAB),
+              },
               {
                 label: "Workflows + Composite Action",
                 description:

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

@@ -119,7 +119,9 @@ export default function Sidebar() {
     selectDriveSubfolder,
     clearDriveSubfolder,
     syncWorkspace,
+    syncTopic,
     exportWorkspace,
+    exportTopic,
     workspaceFiles,
     uploadWorkspaceFiles,
     removeWorkspaceFile,
@@ -162,6 +164,7 @@ export default function Sidebar() {
   const [openMenuQuestionId, setOpenMenuQuestionId] = useState<string | null>(
     null,
   );
+  const [openMenuTopicId, setOpenMenuTopicId] = useState<string | null>(null);
   const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
     new Set(),
   );
@@ -216,6 +219,11 @@ export default function Sidebar() {
   const [navigating, setNavigating] = useState(false);
   const [syncing, setSyncing] = useState(false);
   const [pushing, setPushing] = useState(false);
+  const [topicSyncingId, setTopicSyncingId] = useState<string | null>(null);
+  const [topicPushingId, setTopicPushingId] = useState<string | null>(null);
+  const [topicDriveStatus, setTopicDriveStatus] = useState<
+    Record<string, string>
+  >({});
   const [wsFilesExpanded, setWsFilesExpanded] = useState(true);
   const [driveFileSyncStatus, setDriveFileSyncStatus] = useState<string | null>(
     null,
@@ -294,6 +302,61 @@ export default function Sidebar() {
     }
   };
 
+  const setTopicStatus = (topicId: string, value: string) => {
+    setTopicDriveStatus((prev) => ({ ...prev, [topicId]: value }));
+  };
+
+  const handlePullTopicFromDrive = async (topicId: string) => {
+    if (!activeWorkspaceId || !activeWs?.driveConfig?.folderId) return;
+    setTopicSyncingId(topicId);
+    setTopicStatus(topicId, "Pulling topic from Drive…");
+    try {
+      const result = await syncTopic(activeWorkspaceId, topicId);
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      const firstError = result.errors[0];
+      setTopicStatus(
+        topicId,
+        result.errors.length > 0
+          ? `Topic pull finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}. ${firstError ? `First: ${firstError}` : ""}`
+          : `Pulled ${result.filesImported} file${result.filesImported === 1 ? "" : "s"} into this topic.`,
+      );
+    } catch (err: any) {
+      setTopicStatus(topicId, err?.message || "Topic pull failed.");
+    } finally {
+      setTopicSyncingId(null);
+    }
+  };
+
+  const handlePushTopicToDrive = async (topicId: string) => {
+    if (!activeWorkspaceId || !activeWs?.driveConfig?.folderId) return;
+    setTopicPushingId(topicId);
+    setTopicStatus(topicId, "Pushing topic to Drive…");
+    try {
+      const result = await exportTopic(
+        activeWorkspaceId,
+        topicId,
+        activeWs.driveConfig.subFolderId,
+      );
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      setTopicStatus(
+        topicId,
+        result.errors.length > 0
+          ? `Topic push finished with ${result.errors.length} error${result.errors.length === 1 ? "" : "s"}.`
+          : `Pushed ${result.questionsExported} question${result.questionsExported === 1 ? "" : "s"} and ${result.filesExported} file${result.filesExported === 1 ? "" : "s"} to Drive.`,
+      );
+    } catch (err: any) {
+      setTopicStatus(topicId, err?.message || "Topic push failed.");
+    } finally {
+      setTopicPushingId(null);
+    }
+  };
+
   useEffect(() => {
     if (editingTopicId || editingQuestionId) {
       editInputRef.current?.select();
@@ -1194,6 +1257,9 @@ export default function Sidebar() {
                         sensitivity: "base",
                       }),
               );
+              const isTopicMenuOpen = openMenuTopicId === topic.id;
+              const topicBusy =
+                topicSyncingId === topic.id || topicPushingId === topic.id;
 
               return (
                 <div key={topic.id}>
@@ -1238,69 +1304,160 @@ export default function Sidebar() {
                       </span>
                     </button>
                     {editingTopicId !== topic.id && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          setEditingTopicId(topic.id);
-                          setEditingTopicName(topic.name);
-                        }}
-                        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-                        title="Rename"
+                      <div
+                        className="relative shrink-0 flex items-center"
+                        onClick={(e) => e.stopPropagation()}
                       >
-                        <Pencil className="w-3 h-3" />
-                      </button>
+                        {topicBusy && !isTopicMenuOpen ? (
+                          <Loader2 className="w-3 h-3 animate-spin text-cyan-400" />
+                        ) : (
+                          <button
+                            onClick={() =>
+                              setOpenMenuTopicId(
+                                isTopicMenuOpen ? null : topic.id,
+                              )
+                            }
+                            className={`p-0.5 rounded transition-all ${
+                              isTopicMenuOpen
+                                ? "text-cyan-400"
+                                : "opacity-0 group-hover:opacity-100 text-slate-600 hover:text-slate-300"
+                            }`}
+                            title="Topic options"
+                          >
+                            <MoreHorizontal className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+
+                        {isTopicMenuOpen && (
+                          <>
+                            <div
+                              className="fixed inset-0 z-40"
+                              onClick={() => setOpenMenuTopicId(null)}
+                            />
+                            <div className="absolute right-0 top-full mt-0.5 z-50 bg-slate-800 border border-slate-700 rounded-md shadow-xl min-w-[170px] py-0.5">
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  setEditingTopicId(topic.id);
+                                  setEditingTopicName(topic.name);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Pencil className="w-3 h-3" /> Rename
+                              </button>
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  setAddingQuestionTo(topic.id);
+                                  setNewQuestionTitle("");
+                                  if (!isExpanded) toggleTopic(topic.id);
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Plus className="w-3 h-3" /> Add question
+                              </button>
+                              <button
+                                onClick={async () => {
+                                  setOpenMenuTopicId(null);
+                                  let topicQuestions =
+                                    questionsByTopic[topic.id] ?? [];
+                                  try {
+                                    topicQuestions = await api.fetchQuestions(
+                                      topic.id,
+                                    );
+                                  } catch {
+                                    // Fall back to the already-loaded sidebar snapshot.
+                                  }
+                                  const rootQuestions = topicQuestions.filter(
+                                    (q) => !q.parentQuestionId,
+                                  );
+                                  const exportedQuestions = await Promise.all(
+                                    rootQuestions.map((q) =>
+                                      buildQuestionExport(q, topicQuestions),
+                                    ),
+                                  );
+                                  downloadJson(
+                                    {
+                                      id: topic.id,
+                                      name: topic.name,
+                                      systemContext: topic.systemContext ?? "",
+                                      contextFiles: topic.contextFiles,
+                                      createdAt: topic.createdAt,
+                                      questions: exportedQuestions,
+                                    },
+                                    `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
+                                  );
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-white transition-colors"
+                              >
+                                <Download className="w-3 h-3" /> Download
+                              </button>
+
+                              {canSyncDriveFolder && (
+                                <>
+                                  <div className="border-t border-slate-700 my-0.5" />
+                                  <button
+                                    onClick={() => {
+                                      setOpenMenuTopicId(null);
+                                      void handlePushTopicToDrive(topic.id);
+                                    }}
+                                    disabled={topicBusy || pushing || syncing}
+                                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-cyan-300 hover:bg-slate-700 hover:text-cyan-200 disabled:opacity-50 transition-colors"
+                                  >
+                                    {topicPushingId === topic.id ? (
+                                      <Loader2 className="w-3 h-3 animate-spin" />
+                                    ) : (
+                                      <Upload className="w-3 h-3" />
+                                    )}
+                                    Push topic
+                                  </button>
+                                  <button
+                                    onClick={() => {
+                                      setOpenMenuTopicId(null);
+                                      void handlePullTopicFromDrive(topic.id);
+                                    }}
+                                    disabled={topicBusy || pushing || syncing}
+                                    className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-slate-300 hover:bg-slate-700 hover:text-cyan-300 disabled:opacity-50 transition-colors"
+                                  >
+                                    {topicSyncingId === topic.id ? (
+                                      <Loader2 className="w-3 h-3 animate-spin" />
+                                    ) : (
+                                      <RefreshCw className="w-3 h-3" />
+                                    )}
+                                    Pull topic
+                                  </button>
+                                </>
+                              )}
+
+                              <div className="border-t border-slate-700 my-0.5" />
+                              <button
+                                onClick={() => {
+                                  setOpenMenuTopicId(null);
+                                  if (
+                                    confirm(
+                                      `Delete topic "${topic.name}" and all its questions?`,
+                                    )
+                                  ) {
+                                    removeTopic(topic.id);
+                                  }
+                                }}
+                                className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-slate-700 hover:text-red-300 transition-colors"
+                              >
+                                <Trash2 className="w-3 h-3" /> Delete
+                              </button>
+                            </div>
+                          </>
+                        )}
+                      </div>
                     )}
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (
-                          confirm(
-                            `Delete topic "${topic.name}" and all its questions?`,
-                          )
-                        ) {
-                          removeTopic(topic.id);
-                        }
-                      }}
-                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-                    >
-                      <Trash2 className="w-3 h-3" />
-                    </button>
-                    <button
-                      onClick={async (e) => {
-                        e.stopPropagation();
-                        let topicQuestions = questionsByTopic[topic.id] ?? [];
-                        try {
-                          topicQuestions = await api.fetchQuestions(topic.id);
-                        } catch {
-                          // Fall back to the already-loaded sidebar snapshot.
-                        }
-                        const rootQuestions = topicQuestions.filter(
-                          (q) => !q.parentQuestionId,
-                        );
-                        const exportedQuestions = await Promise.all(
-                          rootQuestions.map((q) =>
-                            buildQuestionExport(q, topicQuestions),
-                          ),
-                        );
-                        downloadJson(
-                          {
-                            id: topic.id,
-                            name: topic.name,
-                            systemContext: topic.systemContext ?? "",
-                            contextFiles: topic.contextFiles,
-                            createdAt: topic.createdAt,
-                            questions: exportedQuestions,
-                          },
-                          `${topic.name.replace(/[^a-z0-9]+/gi, "-")}.json`,
-                        );
-                      }}
-                      className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-                      title="Download topic as JSON"
-                    >
-                      <Download className="w-3 h-3" />
-                    </button>
                   </div>
 
+                  {topicDriveStatus[topic.id] && (
+                    <p className="px-3 pb-1 text-[10px] leading-relaxed text-slate-500">
+                      {topicDriveStatus[topic.id]}
+                    </p>
+                  )}
+
                   {/* Questions list */}
                   {isExpanded && (
                     <div className="ml-3 border-l border-slate-800">

package/template/client/src/githubActionsLab.ts

@@ -164,6 +164,223 @@ require("fs").readdirSync(".").forEach((f) => console.log("  -", f));
 `,
 };
 
+const REACT_VITE_TYPESCRIPT_FILES: Record<string, string> = {
+  "README.md": `# React Vite TypeScript GitHub Actions Lab
+
+This template starts with a small React + Vite + TypeScript application and an intentionally empty workflow file.
+
+## App files
+
+- \`package.json\` defines the Vite scripts and React dependencies.
+- \`index.html\` mounts the app.
+- \`src/main.tsx\` boots React.
+- \`src/App.tsx\` contains the starter UI.
+- \`.github/workflows/ci.yml\` is blank on purpose so you can write the CI workflow from scratch.
+
+## Local app commands
+
+  npm install
+  npm run dev
+  npm run build
+
+## GitHub Actions task
+
+Open \`.github/workflows/ci.yml\`, add your workflow, then run it with the lab controls.
+`,
+
+  ".github/workflows/ci.yml": "",
+
+  ".gitignore": `node_modules
+dist
+.DS_Store
+*.local
+`,
+
+  "package.json": `{
+  "name": "gha-react-vite-typescript-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview --host 0.0.0.0"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0"
+  }
+}
+`,
+
+  "index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React Vite TypeScript App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+
+  "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}
+`,
+
+  "vite.config.ts": `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});
+`,
+
+  "src/main.tsx": `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+`,
+
+  "src/App.tsx": `const checks = [
+  "Edit .github/workflows/ci.yml from a clean slate",
+  "Install dependencies with npm install",
+  "Run npm run build in your workflow",
+];
+
+export default function App() {
+  return (
+    <main className="app-shell">
+      <section className="hero-card">
+        <p className="eyebrow">GitHub Actions Practice</p>
+        <h1>React + Vite + TypeScript</h1>
+        <p className="lead">
+          The application is ready. Your CI workflow starts empty so you can
+          build it one line at a time.
+        </p>
+        <ul>
+          {checks.map((check) => (
+            <li key={check}>{check}</li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  );
+}
+`,
+
+  "src/index.css": `:root {
+  color: #e5eefb;
+  background: #0f172a;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+.app-shell {
+  display: grid;
+  min-height: 100vh;
+  place-items: center;
+  padding: 2rem;
+  background:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.35), transparent 32rem),
+    linear-gradient(135deg, #0f172a 0%, #111827 100%);
+}
+
+.hero-card {
+  width: min(100%, 720px);
+  padding: 2rem;
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  border-radius: 24px;
+  background: rgba(15, 23, 42, 0.78);
+  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.45);
+}
+
+.eyebrow {
+  margin: 0 0 0.75rem;
+  color: #fbbf24;
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+h1 {
+  margin: 0;
+  font-size: clamp(2.5rem, 8vw, 5rem);
+  line-height: 0.95;
+}
+
+.lead {
+  color: #cbd5e1;
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+ul {
+  display: grid;
+  gap: 0.75rem;
+  margin: 1.5rem 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  padding: 0.85rem 1rem;
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  border-radius: 14px;
+  background: rgba(30, 41, 59, 0.72);
+}
+`,
+
+  "src/vite-env.d.ts": `/// <reference types="vite/client" />
+`,
+};
+
 export const DEFAULT_GHA_LAB: GithubActionsLabWorkspace = {
   version: 1,
   label: "GitHub Actions Playground",
@@ -173,6 +390,15 @@ export const DEFAULT_GHA_LAB: GithubActionsLabWorkspace = {
   files: DEFAULT_FILES,
 };
 
+export const REACT_VITE_TYPESCRIPT_GHA_LAB: GithubActionsLabWorkspace = {
+  version: 1,
+  label: "React Vite TypeScript Starter",
+  activeFile: ".github/workflows/ci.yml",
+  defaultEvent: "push",
+  defaultWorkflow: ".github/workflows/ci.yml",
+  files: REACT_VITE_TYPESCRIPT_FILES,
+};
+
 // ─── Helpers (mirror infraLab.ts API surface) ────────────────────────────
 
 export function cloneGhaLabWorkspace(
@@ -183,7 +409,10 @@ export function cloneGhaLabWorkspace(
     source.files && Object.keys(source.files).length > 0
       ? { ...source.files }
       : { ...DEFAULT_FILES };
-  const activeFile = sourceFiles[source.activeFile]
+  const activeFile = Object.prototype.hasOwnProperty.call(
+    sourceFiles,
+    source.activeFile,
+  )
     ? source.activeFile
     : (Object.keys(sourceFiles)[0] ?? ".github/workflows/ci.yml");
 
@@ -193,12 +422,17 @@ export function cloneGhaLabWorkspace(
     activeFile,
     defaultEvent: source.defaultEvent || "push",
     defaultWorkflow:
-      source.defaultWorkflow && sourceFiles[source.defaultWorkflow]
+      source.defaultWorkflow &&
+      Object.prototype.hasOwnProperty.call(sourceFiles, source.defaultWorkflow)
         ? source.defaultWorkflow
         : Object.keys(sourceFiles).find((f) =>
             f.startsWith(".github/workflows/"),
           ) || ".github/workflows/ci.yml",
     files: sourceFiles,
+    // Preserve optional UX flags so they round-trip through save/load.
+    ...(source.includeRunHistoryInContext
+      ? { includeRunHistoryInContext: true }
+      : {}),
   };
 }
 
@@ -280,6 +514,9 @@ export function parseGhaLabWorkspace(
           ? parsed.defaultWorkflow
           : DEFAULT_GHA_LAB.defaultWorkflow,
       files,
+      ...(parsed.includeRunHistoryInContext === true
+        ? { includeRunHistoryInContext: true }
+        : {}),
     });
   } catch {
     return null;