create-interview-cockpit 0.28.0 → 0.29.0

package/package.json

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

package/template/client/src/codeowners.ts

@@ -790,3 +790,123 @@ export function findCodeOwnersPath(
 export function isCodeOwnersPath(path: string): boolean {
   return (CODEOWNERS_LOCATIONS as readonly string[]).includes(path);
 }
+
+// ─── Pull request templates ───────────────────────────────────────────
+//
+// GitHub doesn't have a settings UI for PR templates — they're picked
+// up purely from files in the repo. The lookup rules we mirror:
+//
+//   1. Single template: the first match wins, in priority order:
+//        .github/pull_request_template.md
+//        .github/PULL_REQUEST_TEMPLATE.md
+//        pull_request_template.md (repo root)
+//        PULL_REQUEST_TEMPLATE.md (repo root)
+//        docs/pull_request_template.md
+//        docs/PULL_REQUEST_TEMPLATE.md
+//      Lookup is also case-insensitive on the filename.
+//
+//   2. Multiple templates: any *.md (or *.txt) file inside
+//        .github/PULL_REQUEST_TEMPLATE/
+//        PULL_REQUEST_TEMPLATE/
+//        docs/PULL_REQUEST_TEMPLATE/
+//      Each becomes a pick-able template; on github.com you'd append
+//      ?template=foo.md to the compare URL. We just show a picker.
+//
+// If both kinds are present, github.com shows the directory picker but
+// also still lists the single template; we follow the same behaviour.
+
+export interface PullRequestTemplate {
+  /** Workspace path of the file. */
+  path: string;
+  /** Display name (file basename minus extension, prettified). */
+  name: string;
+  /** Raw markdown body of the template. */
+  body: string;
+  /** True if this is the repo's default single template. */
+  isDefault: boolean;
+}
+
+const SINGLE_PR_TEMPLATE_DIRS: readonly string[] = [".github/", "", "docs/"];
+const MULTI_PR_TEMPLATE_DIRS: readonly string[] = [
+  ".github/PULL_REQUEST_TEMPLATE/",
+  "PULL_REQUEST_TEMPLATE/",
+  "docs/PULL_REQUEST_TEMPLATE/",
+];
+
+function isPullRequestTemplateFilename(filename: string): boolean {
+  // GitHub matches pull_request_template.md case-insensitively, with .md
+  // or .markdown extensions. We accept both.
+  return /^pull_request_template\.(md|markdown)$/i.test(filename);
+}
+
+function prettifyTemplateName(filename: string): string {
+  const base = filename.replace(/\.(md|markdown|txt)$/i, "");
+  return base.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+/**
+ * Discover all PR templates in the workspace, in github.com priority
+ * order. Returns an empty array if no templates exist.
+ */
+export function findPullRequestTemplates(
+  files: Record<string, string>,
+): PullRequestTemplate[] {
+  const out: PullRequestTemplate[] = [];
+  const seen = new Set<string>();
+
+  // 1. Single-template lookup
+  for (const dir of SINGLE_PR_TEMPLATE_DIRS) {
+    for (const path of Object.keys(files)) {
+      if (seen.has(path)) continue;
+      if (!path.startsWith(dir)) continue;
+      const rest = path.slice(dir.length);
+      if (rest.includes("/")) continue; // not directly in this dir
+      if (!isPullRequestTemplateFilename(rest)) continue;
+      out.push({
+        path,
+        name: "Default",
+        body: files[path] ?? "",
+        isDefault: true,
+      });
+      seen.add(path);
+      break; // first match per dir; priority order handles the rest
+    }
+  }
+
+  // 2. Multi-template directory lookup
+  for (const dir of MULTI_PR_TEMPLATE_DIRS) {
+    for (const path of Object.keys(files)) {
+      if (seen.has(path)) continue;
+      if (!path.startsWith(dir)) continue;
+      const rest = path.slice(dir.length);
+      if (!rest || rest.includes("/")) continue;
+      if (!/\.(md|markdown|txt)$/i.test(rest)) continue;
+      out.push({
+        path,
+        name: prettifyTemplateName(rest),
+        body: files[path] ?? "",
+        isDefault: false,
+      });
+      seen.add(path);
+    }
+  }
+
+  return out;
+}
+
+/** True if the path is a recognised PR-template location. */
+export function isPullRequestTemplatePath(path: string): boolean {
+  for (const dir of SINGLE_PR_TEMPLATE_DIRS) {
+    if (!path.startsWith(dir)) continue;
+    const rest = path.slice(dir.length);
+    if (!rest.includes("/") && isPullRequestTemplateFilename(rest)) return true;
+  }
+  for (const dir of MULTI_PR_TEMPLATE_DIRS) {
+    if (!path.startsWith(dir)) continue;
+    const rest = path.slice(dir.length);
+    if (rest && !rest.includes("/") && /\.(md|markdown|txt)$/i.test(rest)) {
+      return true;
+    }
+  }
+  return false;
+}

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

@@ -482,13 +482,24 @@ export default function ChatView({ question }: Props) {
   // and triggering an update loop.
   const initialMessages = useMemo(
     () =>
-      (question.messages ?? []).map((m) => ({
-        id: m.id,
-        role: m.role as "user" | "assistant",
-        parts: (m.parts ?? [
-          { type: "text" as const, text: m.content },
-        ]) as UIMessage["parts"],
-      })),
+      (question.messages ?? []).map((m) => {
+        // Older saved messages persist as `{ content, parts: [] }` — the empty
+        // array is truthy so a plain `m.parts ?? fallback` keeps `parts`
+        // empty, which makes `getTextContent` return "" and breaks any feature
+        // that reads message text (annotations, copy-to-clipboard, etc.).
+        // Treat empty `parts` the same as missing and rebuild from `content`.
+        const hasParts = Array.isArray(m.parts) && m.parts.length > 0;
+        const parts = hasParts
+          ? (m.parts as UIMessage["parts"])
+          : ([
+              { type: "text" as const, text: m.content ?? "" },
+            ] as UIMessage["parts"]);
+        return {
+          id: m.id,
+          role: m.role as "user" | "assistant",
+          parts,
+        };
+      }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [question.id],
   );

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

@@ -3,6 +3,8 @@ import {
   ChevronDown,
   ChevronRight,
   Copy,
+  Eye,
+  EyeOff,
   FilePlus,
   Folder,
   GitPullRequest,
@@ -24,6 +26,8 @@ import {
   X,
 } from "lucide-react";
 import MonacoEditorLib from "@monaco-editor/react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import type {
   BeforeMount,
   Monaco,
@@ -346,6 +350,11 @@ export default function GithubActionsLabModal() {
   const [historyNonce, setHistoryNonce] = useState(0);
   const [leftCollapsed, setLeftCollapsed] = useState(false);
   const [rightCollapsed, setRightCollapsed] = useState(false);
+  // When viewing a markdown file, let the user toggle between the raw
+  // editor and a rendered preview. We default to preview because most
+  // of the .md files in the governance template are explanatory docs
+  // — readers want them to look like real GitHub markdown, not source.
+  const [mdPreview, setMdPreview] = useState(true);
   const abortRef = useRef<AbortController | null>(null);
   // ── Concurrency engine state ───────────────────────────────────────
   // The concurrency tab is no longer a simulator — these records track
@@ -2188,48 +2197,80 @@ interface ImportMeta {
                   {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" />
+              <div className="flex items-center gap-1">
+                {/* Markdown preview toggle. Only meaningful for .md / .markdown
+                    files; hidden otherwise so it doesn't clutter the header. */}
+                {activeFile && /\.(md|markdown)$/i.test(activeFile) && (
+                  <button
+                    onClick={() => setMdPreview((v) => !v)}
+                    className="flex items-center gap-1 p-1 rounded text-slate-500 hover:text-amber-300 hover:bg-slate-800/60"
+                    title={
+                      mdPreview
+                        ? "Show raw markdown source"
+                        : "Render markdown preview"
+                    }
+                  >
+                    {mdPreview ? (
+                      <EyeOff className="w-3.5 h-3.5" />
+                    ) : (
+                      <Eye className="w-3.5 h-3.5" />
+                    )}
+                    <span className="text-[10px] uppercase tracking-wide">
+                      {mdPreview ? "Source" : "Preview"}
+                    </span>
+                  </button>
                 )}
-              </button>
+                <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>
             <div className="flex-1 min-h-0">
-              {activeFile && workspace.files[activeFile] !== undefined && (
-                <MonacoEditorLib
-                  key={activeFile}
-                  height="100%"
-                  width="100%"
-                  language={getEditorLanguage(activeFile)}
-                  theme="gha-lab-dark"
-                  path={getGhaLabModelPath(activeFile)}
-                  value={workspace.files[activeFile]}
-                  beforeMount={handleBeforeMount}
-                  onMount={handleMount}
-                  onChange={handleEditorChange}
-                  options={{
-                    fontFamily: EDITOR_FONT,
-                    fontSize: 13,
-                    lineHeight: 22,
-                    minimap: { enabled: false },
-                    automaticLayout: true,
-                    scrollBeyondLastLine: false,
-                    wordWrap: "off",
-                    tabSize: 2,
-                    insertSpaces: true,
-                  }}
-                />
-              )}
+              {activeFile &&
+                workspace.files[activeFile] !== undefined &&
+                (mdPreview && /\.(md|markdown)$/i.test(activeFile) ? (
+                  <div className="h-full w-full overflow-auto px-6 py-4 text-slate-200 gha-md-preview">
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                      {workspace.files[activeFile]}
+                    </ReactMarkdown>
+                  </div>
+                ) : (
+                  <MonacoEditorLib
+                    key={activeFile}
+                    height="100%"
+                    width="100%"
+                    language={getEditorLanguage(activeFile)}
+                    theme="gha-lab-dark"
+                    path={getGhaLabModelPath(activeFile)}
+                    value={workspace.files[activeFile]}
+                    beforeMount={handleBeforeMount}
+                    onMount={handleMount}
+                    onChange={handleEditorChange}
+                    options={{
+                      fontFamily: EDITOR_FONT,
+                      fontSize: 13,
+                      lineHeight: 22,
+                      minimap: { enabled: false },
+                      automaticLayout: true,
+                      scrollBeyondLastLine: false,
+                      wordWrap: "off",
+                      tabSize: 2,
+                      insertSpaces: true,
+                    }}
+                  />
+                ))}
             </div>
           </div>
 

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

@@ -9,6 +9,7 @@ import {
 } from "../infraLab";
 import {
   DEFAULT_GHA_LAB,
+  GOVERNANCE_GHA_LAB,
   parseGhaLabWorkspace,
   REACT_VITE_TYPESCRIPT_GHA_LAB,
 } from "../githubActionsLab";
@@ -696,6 +697,12 @@ export default function LabsPanel() {
                   "Multi-job CI workflow with a local composite action and a matrix build",
                 onClick: () => openGhaLab(DEFAULT_GHA_LAB),
               },
+              {
+                label: "Platform Governance Template",
+                description:
+                  "PLF-style mono-repo: CODEOWNERS, PR template, Azure PIM/Policy + AWS IAM deploy workflows, offboarding",
+                onClick: () => openGhaLab(GOVERNANCE_GHA_LAB),
+              },
             ]}
             onOpen={openGhaFile}
             openTitle="Open in GitHub Lab"

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

@@ -26,6 +26,7 @@ import { useMemo, useState } from "react";
 import {
   Check,
   CircleDot,
+  FileText,
   GitBranch,
   GitPullRequest,
   Info,
@@ -52,10 +53,12 @@ import {
   evaluateCodeOwners,
   evaluateMergeability,
   findCodeOwnersPath,
+  findPullRequestTemplates,
   latestReviewByAuthor,
   parseCodeOwners,
   type CheckStatus,
   type MergeabilityResult,
+  type PullRequestTemplate,
 } from "../codeowners";
 
 interface PullRequestPanelProps {
@@ -119,6 +122,13 @@ export default function PullRequestPanel({
     [evaluation, pr, workspace.rulesets, org, baseBranch, defaultBranch],
   );
 
+  // PR templates discovered from .github/PULL_REQUEST_TEMPLATE[.md]
+  // (just like real github.com — no Settings UI, file-based only).
+  const templates = useMemo(
+    () => findPullRequestTemplates(workspace.files),
+    [workspace.files],
+  );
+
   // ── Mutators ────────────────────────────────────────────────────
   const updatePR = (next: Partial<GithubLabPullRequest>) =>
     onChange((prev) => ({
@@ -206,6 +216,13 @@ export default function PullRequestPanel({
           </div>
         </header>
 
+        {/* ── Description (PR body + template picker) ── */}
+        <PullRequestBody
+          body={pr.body ?? ""}
+          templates={templates}
+          onChange={(body) => updatePR({ body })}
+        />
+
         {!codeownersPath && (
           <div className="mb-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-2 text-amber-200">
             No CODEOWNERS file found. Add one at <code>.github/CODEOWNERS</code>{" "}
@@ -578,6 +595,114 @@ function labelForStatus(s: string): string {
   }
 }
 
+// ─── PR description body + template picker ────────────────────────────
+//
+// On github.com the description box is auto-prefilled from a PR
+// template when you open a new PR, and you can choose between
+// templates via ?template= when there's a directory of them. Here we
+// surface the same mechanic explicitly: a textarea for the body, plus
+// "Apply template" buttons that overwrite the body with the chosen
+// template (with a confirm if the body has been edited away from any
+// template's contents).
+
+function PullRequestBody({
+  body,
+  templates,
+  onChange,
+}: {
+  body: string;
+  templates: PullRequestTemplate[];
+  onChange: (next: string) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  // Map body → matching template name (so we can mark the active chip).
+  const matchingTemplate = templates.find((t) => t.body === body);
+
+  const apply = (t: PullRequestTemplate) => {
+    if (
+      body.trim().length > 0 &&
+      !templates.some((tpl) => tpl.body === body) &&
+      !window.confirm(
+        `Replace the current description with template "${t.name}"?`,
+      )
+    ) {
+      return;
+    }
+    onChange(t.body);
+  };
+
+  return (
+    <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40">
+      <header className="flex items-center justify-between gap-2 px-3 py-2">
+        <button
+          onClick={() => setCollapsed((c) => !c)}
+          className="flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wider text-slate-400 hover:text-amber-200"
+        >
+          <FileText className="h-3 w-3" />
+          Description
+        </button>
+        {templates.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1">
+            <span className="text-[10px] text-slate-500">Templates:</span>
+            {templates.map((t) => {
+              const active = matchingTemplate?.path === t.path;
+              return (
+                <button
+                  key={t.path}
+                  onClick={() => apply(t)}
+                  title={t.path}
+                  className={`rounded px-1.5 py-0.5 text-[10px] ${
+                    active
+                      ? "bg-amber-500/25 text-amber-100"
+                      : "bg-slate-800 text-slate-300 hover:bg-slate-700"
+                  }`}
+                >
+                  {t.name}
+                </button>
+              );
+            })}
+            {body.length > 0 && (
+              <button
+                onClick={() => onChange("")}
+                className="rounded px-1.5 py-0.5 text-[10px] text-slate-500 hover:text-rose-300"
+                title="Clear the description"
+              >
+                Clear
+              </button>
+            )}
+          </div>
+        )}
+      </header>
+      {!collapsed && (
+        <div className="px-3 pb-3">
+          {templates.length === 0 && body.length === 0 && (
+            <p className="mb-1.5 text-[10px] text-slate-500">
+              Tip: add{" "}
+              <code className="rounded bg-slate-800 px-1 py-px text-[10px] text-amber-200">
+                .github/pull_request_template.md
+              </code>{" "}
+              to the workspace and a one-click "Default" template will appear
+              here — same as github.com.
+            </p>
+          )}
+          <textarea
+            value={body}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Leave a description (Markdown supported)…"
+            className="h-32 w-full resize-y rounded border border-slate-700 bg-slate-950/60 p-2 font-mono text-[11px] text-slate-200 outline-none focus:border-emerald-500/40"
+          />
+          {matchingTemplate && (
+            <p className="mt-1 text-[10px] text-slate-500">
+              Using template{" "}
+              <code className="text-slate-400">{matchingTemplate.path}</code>
+            </p>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
 // ─── Rulesets summary (read-only) ──────────────────────────────────────
 //
 // On real github.com the PR sidebar shows a tiny summary of which

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

@@ -1379,17 +1379,20 @@ function EnvironmentsSection({
 
 function Field({
   label,
+  help,
   children,
 }: {
   label: string;
+  help?: string;
   children: React.ReactNode;
 }) {
   return (
-    <div>
+    <div className="mt-3">
       <div className="mb-1 text-[11px] font-semibold text-slate-200">
         {label}
       </div>
       {children}
+      {help && <p className="mt-1 text-[11px] text-slate-500">{help}</p>}
     </div>
   );
 }