npm - create-interview-cockpit - Versions diffs - 0.17.3 → 0.19.0 - Mend

create-interview-cockpit 0.17.3 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/package.json +1 -1
package/template/client/src/App.tsx +3 -0
package/template/client/src/api.ts +184 -8
package/template/client/src/components/GhaHistoryPanel.tsx +194 -0
package/template/client/src/components/GhaJobsPanel.tsx +432 -0
package/template/client/src/components/GithubActionsLabModal.tsx +1048 -0
package/template/client/src/components/InfraLabModal.tsx +993 -262
package/template/client/src/components/LabsPanel.tsx +71 -5
package/template/client/src/components/Sidebar.tsx +603 -60
package/template/client/src/components/WorkspaceSwitcher.tsx +4 -0
package/template/client/src/enterpriseLocalLab.ts +921 -0
package/template/client/src/githubActionsLab.ts +294 -0
package/template/client/src/infraLab.ts +378 -6
package/template/client/src/reactLab.ts +409 -0
package/template/client/src/store.ts +130 -10
package/template/client/src/types.ts +33 -3
package/template/client/tsconfig.tsbuildinfo +1 -1
package/template/cockpit.json +1 -1
package/template/server/src/gha-runner.ts +793 -0
package/template/server/src/google-drive.ts +542 -149
package/template/server/src/index.ts +327 -10
package/template/server/src/infra-runner.ts +321 -30
package/template/server/src/storage.ts +3 -1

package/template/client/src/reactLab.ts CHANGED Viewed

@@ -1206,6 +1206,415 @@ export const DEFAULT_NEXTJS_LAB: FrontendLabWorkspace = {
   files: NEXTJS_DEFAULT_FILES,
 };
+const NEXTJS_BFF_AUTH_CLIENT_FILES: Record<string, string> = {
+  "README.md": `# Next.js BFF Auth Client Lab
+This lab is intentionally separate from the Infrastructure Lab.
+## Flow
+1. Deploy the infrastructure lab first:
+   - terraform init
+   - terraform plan
+   - terraform apply -auto-approve
+2. Start this Next.js lab.
+3. Click **Sign in through BFF**.
+4. The browser goes to the deployed BFF at http://localhost:4300.
+5. The BFF redirects to the local Cognito-like provider.
+6. After sign-in, the BFF stores tokens in Redis and redirects back to this Next.js app.
+7. This app calls the BFF with credentials included.
+## Why separate labs?
+- Infra Lab owns deployment.
+- Next.js Lab owns the frontend shell/client experience.
+- The integration point is the BFF URL: http://localhost:4300.
+`,
+  "app/layout.tsx": `import "./globals.css";
+export const metadata = {
+  title: "Enterprise Auth Client Lab",
+  description: "Next.js client talking to a locally deployed BFF",
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`,
+  "app/page.tsx": `import { AuthDashboard } from "../components/AuthDashboard";
+export default function HomePage() {
+  return <AuthDashboard />;
+}
+`,
+  "app/globals.css": `* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  min-height: 100%;
+  background:
+    radial-gradient(circle at top left, rgba(6, 182, 212, 0.18), transparent 30rem),
+    radial-gradient(circle at bottom right, rgba(124, 58, 237, 0.16), transparent 28rem),
+    #020617;
+  color: #e2e8f0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+button,
+textarea {
+  font: inherit;
+}
+button {
+  cursor: pointer;
+}
+.shell {
+  width: min(1120px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 48px 0;
+}
+.hero,
+.card {
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  background: rgba(15, 23, 42, 0.78);
+  box-shadow: 0 24px 80px rgba(2, 6, 23, 0.45);
+  backdrop-filter: blur(18px);
+}
+.hero {
+  border-radius: 28px;
+  padding: 40px;
+}
+.eyebrow {
+  margin: 0 0 12px;
+  color: #22d3ee;
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+}
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+h1 {
+  max-width: 760px;
+  margin-bottom: 12px;
+  color: #f8fafc;
+  font-size: clamp(2.25rem, 6vw, 4.5rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+.hero p {
+  max-width: 720px;
+  color: #cbd5e1;
+  font-size: 1.05rem;
+  line-height: 1.7;
+}
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+}
+button {
+  border: 1px solid rgba(148, 163, 184, 0.26);
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.92);
+  color: #e2e8f0;
+  padding: 11px 16px;
+  font-weight: 800;
+  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
+}
+button:hover:not(:disabled) {
+  transform: translateY(-1px);
+  border-color: rgba(34, 211, 238, 0.7);
+  background: rgba(8, 47, 73, 0.9);
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+button.primary {
+  border-color: rgba(34, 211, 238, 0.5);
+  background: linear-gradient(135deg, #06b6d4, #8b5cf6);
+  color: #020617;
+}
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 18px;
+  margin-top: 18px;
+}
+.card {
+  border-radius: 22px;
+  padding: 24px;
+}
+.card.wide {
+  grid-column: 1 / -1;
+}
+.cardHeader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.cardHeader span {
+  display: inline-grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 999px;
+  background: rgba(34, 211, 238, 0.14);
+  color: #67e8f9;
+  font-weight: 900;
+}
+h2 {
+  margin-bottom: 0;
+  color: #f8fafc;
+  font-size: 1rem;
+}
+.hint {
+  margin: 12px 0 16px;
+  color: #94a3b8;
+  line-height: 1.6;
+}
+pre,
+textarea {
+  width: 100%;
+  border: 1px solid rgba(51, 65, 85, 0.95);
+  border-radius: 16px;
+  background: rgba(2, 6, 23, 0.8);
+  color: #cbd5e1;
+}
+pre {
+  min-height: 164px;
+  overflow: auto;
+  padding: 16px;
+  font-size: 0.82rem;
+  line-height: 1.55;
+}
+textarea {
+  display: block;
+  margin-bottom: 12px;
+  padding: 14px;
+  resize: vertical;
+}
+@media (max-width: 820px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
+`,
+  "components/AuthDashboard.tsx": `"use client";
+import { useEffect, useMemo, useState } from "react";
+const BFF_BASE_URL = "http://localhost:4300";
+type ApiResult = {
+  status: number;
+  body: unknown;
+};
+function getCookie(name: string): string | null {
+  const match = document.cookie
+    .split("; ")
+    .find((row) => row.startsWith(name + "="));
+  return match ? decodeURIComponent(match.split("=")[1]) : null;
+}
+async function bffFetch(path: string, init: RequestInit = {}): Promise<ApiResult> {
+  const method = (init.method || "GET").toUpperCase();
+  const headers = new Headers(init.headers || {});
+  if (!["GET", "HEAD", "OPTIONS"].includes(method)) {
+    const csrf = getCookie("XSRF-TOKEN");
+    if (csrf) headers.set("x-csrf-token", csrf);
+  }
+  const response = await fetch(BFF_BASE_URL + path, {
+    ...init,
+    headers,
+    credentials: "include",
+  });
+  const text = await response.text();
+  let body: unknown = text;
+  try {
+    body = text ? JSON.parse(text) : null;
+  } catch {
+    body = text;
+  }
+  return { status: response.status, body };
+}
+export function AuthDashboard() {
+  const [me, setMe] = useState<ApiResult | null>(null);
+  const [claim, setClaim] = useState<ApiResult | null>(null);
+  const [noteResult, setNoteResult] = useState<ApiResult | null>(null);
+  const [note, setNote] = useState("Customer uploaded first notice of loss.");
+  const [loading, setLoading] = useState<string | null>(null);
+  const isAuthenticated = useMemo(() => {
+    if (!me || typeof me.body !== "object" || me.body === null) return false;
+    return Boolean((me.body as { authenticated?: boolean }).authenticated);
+  }, [me]);
+  async function run(label: string, action: () => Promise<void>) {
+    setLoading(label);
+    try {
+      await action();
+    } finally {
+      setLoading(null);
+    }
+  }
+  async function refreshMe() {
+    setMe(await bffFetch("/auth/me"));
+  }
+  useEffect(() => {
+    void refreshMe();
+  }, []);
+  function login() {
+    const returnTo = encodeURIComponent(window.location.origin);
+    window.location.href = BFF_BASE_URL + "/auth/login?returnTo=" + returnTo;
+  }
+  async function logout() {
+    await run("logout", async () => {
+      await bffFetch("/auth/logout", { method: "POST" });
+      await refreshMe();
+      setClaim(null);
+      setNoteResult(null);
+    });
+  }
+  async function loadClaim() {
+    await run("claim", async () => {
+      setClaim(await bffFetch("/api/claims/CLM-1001"));
+    });
+  }
+  async function addNote() {
+    await run("note", async () => {
+      setNoteResult(
+        await bffFetch("/api/claims/CLM-1001/notes", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ text: note }),
+        }),
+      );
+      await loadClaim();
+    });
+  }
+  return (
+    <main className="shell">
+      <section className="hero">
+        <p className="eyebrow">Next.js shell + deployed BFF</p>
+        <h1>Enterprise BFF Auth Client</h1>
+        <p>
+          This frontend stores no bearer tokens. It redirects through the BFF,
+          then calls BFF endpoints with cookies and CSRF protection.
+        </p>
+        <div className="actions">
+          <button className="primary" onClick={login}>Sign in through BFF</button>
+          <button onClick={() => void refreshMe()}>Refresh /auth/me</button>
+          <button onClick={() => void logout()} disabled={!isAuthenticated || loading === "logout"}>
+            Logout
+          </button>
+        </div>
+      </section>
+      <section className="grid">
+        <article className="card">
+          <div className="cardHeader">
+            <span>1</span>
+            <h2>Session</h2>
+          </div>
+          <p className="hint">The browser sees only cookie-backed auth state.</p>
+          <pre>{JSON.stringify(me?.body ?? "Not loaded", null, 2)}</pre>
+        </article>
+        <article className="card">
+          <div className="cardHeader">
+            <span>2</span>
+            <h2>Downstream API through BFF</h2>
+          </div>
+          <p className="hint">The client never calls the claims API directly.</p>
+          <button onClick={() => void loadClaim()} disabled={!isAuthenticated || loading === "claim"}>
+            Load claim CLM-1001
+          </button>
+          <pre>{JSON.stringify(claim?.body ?? "No claim loaded", null, 2)}</pre>
+        </article>
+        <article className="card wide">
+          <div className="cardHeader">
+            <span>3</span>
+            <h2>Write with CSRF header</h2>
+          </div>
+          <p className="hint">
+            The readable XSRF-TOKEN cookie is copied into x-csrf-token for writes.
+          </p>
+          <textarea value={note} onChange={(event) => setNote(event.target.value)} rows={3} />
+          <button onClick={() => void addNote()} disabled={!isAuthenticated || loading === "note"}>
+            Add note
+          </button>
+          <pre>{JSON.stringify(noteResult?.body ?? "No note submitted", null, 2)}</pre>
+        </article>
+      </section>
+    </main>
+  );
+}
+`,
+  "components/AuthDashboard.module.css": `/* Optional scratch file: move styles here if you want CSS modules practice. */
+`,
+  "app/styles.css": `/* Optional scratch file for experimenting with additional global styles. */
+`,
+};
+export const NEXTJS_BFF_AUTH_CLIENT_LAB: FrontendLabWorkspace = {
+  version: 1,
+  label: "Next.js BFF Auth Client",
+  type: "nextjs",
+  activeFile: "components/AuthDashboard.tsx",
+  files: NEXTJS_BFF_AUTH_CLIENT_FILES,
+};
 export const DEFAULT_MODULE_FEDERATION_LAB: FrontendLabWorkspace = {
   version: 1,
   label: "Webpack Module Federation Lab",

package/template/client/src/store.ts CHANGED Viewed

@@ -6,6 +6,7 @@ import type {
   WorkspaceMeta,
   InfraLabWorkspace,
   FrontendLabWorkspace,
+  GithubActionsLabWorkspace,
   ContextFileOrigin,
 } from "./types";
 import type { AiSettings } from "./api";
@@ -126,12 +127,11 @@ interface Store {
   deleteWorkspace: (id: string) => Promise<void>;
   renameWorkspace: (id: string, name: string) => Promise<void>;
   patchWorkspace: (id: string, data: object) => Promise<void>;
-  syncWorkspace: (id: string) => Promise<{
-    topicsUpserted: number;
-    filesImported: number;
-    filesSkipped: number;
-    errors: string[];
-  }>;
+  syncWorkspace: (id: string) => Promise<import("./api").SyncWorkspaceResult>;
+  syncTopic: (
+    workspaceId: string,
+    topicId: string,
+  ) => Promise<import("./api").SyncWorkspaceResult>;
   linkDriveFolder: (
     workspaceId: string,
     url: string,
@@ -148,6 +148,11 @@ interface Store {
     id: string,
     targetFolderId?: string,
   ) => Promise<import("./api").ExportWorkspaceResult>;
+  exportTopic: (
+    workspaceId: string,
+    topicId: string,
+    targetFolderId?: string,
+  ) => Promise<import("./api").ExportWorkspaceResult>;
   fetchDriveSubfolders: (id: string) => Promise<import("./api").DriveFolder[]>;
   createDriveSubfolder: (
     id: string,
@@ -176,6 +181,12 @@ interface Store {
     topicId: string,
     parentQuestionId: string | null,
   ) => Promise<void>;
+  copyQuestion: (
+    questionId: string,
+    topicId: string,
+    parentQuestionId: string | null,
+    targetTopicId?: string,
+  ) => Promise<void>;
   removeQuestion: (questionId: string, topicId: string) => Promise<void>;
   renameQuestion: (
     questionId: string,
@@ -330,6 +341,13 @@ interface Store {
   openInfraLab: (workspace?: InfraLabWorkspace, fileId?: string) => void;
   closeInfraLab: () => void;
+  // ── GitHub Actions Lab ───────────────────────────────────────
+  showGhaLab: boolean;
+  runnerInitialGha: GithubActionsLabWorkspace | null;
+  runnerInitialGhaFileId: string | null;
+  openGhaLab: (workspace?: GithubActionsLabWorkspace, fileId?: string) => void;
+  closeGhaLab: () => void;
   // ── Frontend Labs (React / Next.js / Module Federation) — open inside the sandbox ──
   openReactLab: (
     workspace?: FrontendLabWorkspace,
@@ -387,6 +405,9 @@ export const useStore = create<Store>((set, get) => ({
   showInfraLab: false,
   runnerInitialInfra: null,
   runnerInitialInfraFileId: null,
+  showGhaLab: false,
+  runnerInitialGha: null,
+  runnerInitialGhaFileId: null,
   showCanvasLab: false,
   canvasLabInitialCode: null,
   canvasLabInitialFileId: null,
@@ -467,9 +488,49 @@ export const useStore = create<Store>((set, get) => ({
   syncWorkspace: async (id) => {
     const result = await api.syncWorkspaceApi(id);
+    if ("needsAuth" in result && result.needsAuth) {
+      return result;
+    }
     if (id === get().activeWorkspaceId) {
-      const topics = await api.fetchTopics();
-      set({ topics, questionsByTopic: {} });
+      const [topics, workspaceFiles] = await Promise.all([
+        api.fetchTopics(),
+        api.fetchWorkspaceFiles(),
+      ]);
+      set({ topics, workspaceFiles, questionsByTopic: {} });
+    }
+    const registry = await api.fetchWorkspaces();
+    set({ workspaces: registry.workspaces });
+    return result;
+  },
+  syncTopic: async (workspaceId, topicId) => {
+    const result = await api.syncTopicApi(workspaceId, topicId);
+    if ("needsAuth" in result && result.needsAuth) {
+      return result;
+    }
+    if (workspaceId === get().activeWorkspaceId) {
+      const [topics, questions] = await Promise.all([
+        api.fetchTopics(),
+        api.fetchQuestions(topicId),
+      ]);
+      set((s) => {
+        const selectedStillExists = questions.some(
+          (q) => q.id === s.selectedQuestionId,
+        );
+        const selectedWasInTopic = s.currentQuestion?.topicId === topicId;
+        return {
+          topics,
+          questionsByTopic: { ...s.questionsByTopic, [topicId]: questions },
+          selectedQuestionId:
+            selectedWasInTopic && !selectedStillExists
+              ? null
+              : s.selectedQuestionId,
+          currentQuestion:
+            selectedWasInTopic && !selectedStillExists
+              ? null
+              : s.currentQuestion,
+        };
+      });
     }
     const registry = await api.fetchWorkspaces();
     set({ workspaces: registry.workspaces });
@@ -491,8 +552,15 @@ export const useStore = create<Store>((set, get) => ({
     if (workspaceId === get().activeWorkspaceId) {
       set({ topics: [], questionsByTopic: {} });
       const result = await api.syncWorkspaceApi(workspaceId);
-      const topics = await api.fetchTopics();
-      set({ topics, questionsByTopic: {} });
+      if ("needsAuth" in result && result.needsAuth) {
+        window.location.href = result.authUrl;
+        return;
+      }
+      const [topics, workspaceFiles] = await Promise.all([
+        api.fetchTopics(),
+        api.fetchWorkspaceFiles(),
+      ]);
+      set({ topics, workspaceFiles, questionsByTopic: {} });
       const reg2 = await api.fetchWorkspaces();
       set({ workspaces: reg2.workspaces });
     }
@@ -508,6 +576,7 @@ export const useStore = create<Store>((set, get) => ({
       selectedTopicId: null,
       selectedQuestionId: null,
       currentQuestion: null,
+      workspaceFiles: [],
     });
   },
@@ -530,6 +599,10 @@ export const useStore = create<Store>((set, get) => ({
     return api.exportWorkspaceToDrive(id, targetFolderId);
   },
+  exportTopic: async (workspaceId, topicId, targetFolderId) => {
+    return api.exportTopicToDrive(workspaceId, topicId, targetFolderId);
+  },
   fetchDriveSubfolders: async (id) => {
     return api.fetchDriveSubfolders(id);
   },
@@ -629,6 +702,39 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
+  copyQuestion: async (
+    questionId,
+    topicId,
+    parentQuestionId,
+    targetTopicId,
+  ) => {
+    const destinationTopicId = targetTopicId ?? topicId;
+    const copied = await api.copyQuestion(questionId, {
+      parentQuestionId,
+      targetTopicId: destinationTopicId,
+    });
+    const copiedRoot = copied[0];
+    set((s) => ({
+      questionsByTopic: {
+        ...s.questionsByTopic,
+        [destinationTopicId]: [
+          ...(s.questionsByTopic[destinationTopicId] || []),
+          ...copied,
+        ],
+      },
+      selectedTopicId: copiedRoot?.id ? destinationTopicId : s.selectedTopicId,
+      selectedQuestionId: copiedRoot?.id ?? s.selectedQuestionId,
+      currentQuestion: copiedRoot ?? s.currentQuestion,
+      expandedTopics: s.expandedTopics.includes(destinationTopicId)
+        ? s.expandedTopics
+        : [...s.expandedTopics, destinationTopicId],
+    }));
+    if (copiedRoot) {
+      sessionStorage.setItem("lastTopicId", destinationTopicId);
+      sessionStorage.setItem("lastQuestionId", copiedRoot.id);
+    }
+  },
   removeQuestion: async (questionId, topicId) => {
     await api.deleteQuestion(questionId);
     set((s) => ({
@@ -1079,6 +1185,20 @@ export const useStore = create<Store>((set, get) => ({
   openBrowserSecurityLab: () => set({ showBrowserSecurityLab: true }),
   closeBrowserSecurityLab: () => set({ showBrowserSecurityLab: false }),
   closeInfraLab: () => set({ showInfraLab: false }),
+  openGhaLab: (workspace, fileId?) =>
+    set({
+      showGhaLab: true,
+      showInfraLab: false,
+      showCodeRunner: false,
+      runnerInitialGha: workspace ?? null,
+      runnerInitialGhaFileId: fileId ?? null,
+    }),
+  closeGhaLab: () =>
+    set({
+      showGhaLab: false,
+      runnerInitialGha: null,
+      runnerInitialGhaFileId: null,
+    }),
   openCanvasLab: (code?, fileId?) =>
     set({
       showCanvasLab: true,

package/template/client/src/types.ts CHANGED Viewed

@@ -8,7 +8,8 @@ export type ContextFileOrigin =
   | "react"
   | "nextjs"
   | "module-federation"
-  | "canvas";
+  | "canvas"
+  | "github-actions";
 export interface ContextFile {
   id: string;
@@ -42,12 +43,29 @@ export interface FrontendLabWorkspace {
 export interface InfraLabWorkspace {
   version: 1;
   label: string;
-  provider: "aws";
-  executionMode: "plan-only" | "localstack";
+  provider: "aws" | "docker";
+  executionMode: "plan-only" | "localstack" | "docker";
   activeFile: string;
   files: Record<string, string>;
 }
+export interface GithubActionsLabWorkspace {
+  version: 1;
+  label: string;
+  activeFile: string;
+  files: Record<string, string>;
+  /** Optional default event the run button uses (push, pull_request, workflow_dispatch). */
+  defaultEvent?: string;
+  /** Optional default workflow file path under .github/workflows. */
+  defaultWorkflow?: string;
+  /**
+   * When true, the most recent act runs for this lab are embedded into the
+   * saved snapshot so the chat LLM can reason about real execution results
+   * (job statuses, durations, exit codes) instead of just the YAML.
+   */
+  includeRunHistoryInContext?: boolean;
+}
 export interface WorkspaceMeta {
   id: string;
   name: string;
@@ -116,6 +134,16 @@ export interface ReadingBookmark {
   blockIndex: number;
 }
+export interface StoredCodeAnnotation {
+  id: string;
+  lineNumber: number;
+  lineContent: string;
+  prompt: string;
+  response: string;
+  filePath: string;
+  createdAt: string;
+}
 export interface Question {
   id: string;
   topicId: string;
@@ -127,6 +155,8 @@ export interface Question {
   messages: Message[];
   annotations?: Annotation[];
   readingBookmark?: ReadingBookmark;
+  /** Code-line annotations keyed by file path. */
+  codeAnnotations?: { [filePath: string]: StoredCodeAnnotation[] };
   /** IDs of other questions in the same topic whose conversation history is injected as context. */
   linkedConversationIds?: string[];
   createdAt: string;