create-interview-cockpit 0.28.0 → 0.30.0

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

@@ -8,11 +8,14 @@ import {
   parseInfraLabWorkspace,
 } from "../infraLab";
 import {
+  AWS_GOVERNANCE_GHA_LAB,
   DEFAULT_GHA_LAB,
+  GOVERNANCE_GHA_LAB,
   parseGhaLabWorkspace,
   REACT_VITE_TYPESCRIPT_GHA_LAB,
 } from "../githubActionsLab";
 import { ENTERPRISE_LOCAL_AUTH_LAB } from "../enterpriseLocalLab";
+import { AWS_GOVERNANCE_IAM_LAB } from "../awsGovernanceIamLab";
 import {
   parseFrontendLabWorkspace,
   ISOLATED_MODULE_FEDERATION_LAB,
@@ -671,6 +674,12 @@ export default function LabsPanel() {
                   "Terraform deploys NestJS BFF, OIDC mock, Redis & claims API",
                 onClick: () => openInfraLab(ENTERPRISE_LOCAL_AUTH_LAB),
               },
+              {
+                label: "AWS Governance IAM",
+                description:
+                  "Roles, policies, attachments, users & OIDC mirroring a real governance-iam module on LocalStack",
+                onClick: () => openInfraLab(AWS_GOVERNANCE_IAM_LAB),
+              },
             ]}
             onOpen={openInfraFile}
             openTitle="Open in Infrastructure Lab"
@@ -696,6 +705,18 @@ 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),
+              },
+              {
+                label: "AWS Governance IAM via GitHub Actions",
+                description:
+                  "PR plan + main-branch apply workflows that drive a real Terraform IAM module against LocalStack via a reusable composite action",
+                onClick: () => openGhaLab(AWS_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>
   );
 }