npm - create-interview-cockpit - Versions diffs - 0.5.0 → 0.6.0 - Mend

create-interview-cockpit 0.5.0 → 0.6.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 (29) hide show

package/package.json +1 -1
package/template/client/package-lock.json +734 -1
package/template/client/package.json +1 -0
package/template/client/src/App.tsx +3 -0
package/template/client/src/api.ts +321 -4
package/template/client/src/components/AiSettingsModal.tsx +818 -425
package/template/client/src/components/ChatMessage.tsx +34 -12
package/template/client/src/components/ChatView.tsx +298 -121
package/template/client/src/components/CodeContextPanel.tsx +419 -2
package/template/client/src/components/CodeRunnerModal.tsx +1601 -120
package/template/client/src/components/DocRefModal.tsx +55 -6
package/template/client/src/components/FileAttachments.tsx +20 -4
package/template/client/src/components/InfraLabModal.tsx +1706 -0
package/template/client/src/components/LinkedConvosPicker.tsx +128 -0
package/template/client/src/components/MarkdownRenderer.tsx +22 -8
package/template/client/src/components/NotesModal.tsx +977 -0
package/template/client/src/components/PlotEmbed.tsx +173 -0
package/template/client/src/components/Sidebar.tsx +184 -0
package/template/client/src/components/VizCraftEmbed.tsx +257 -13
package/template/client/src/components/WorkspaceSwitcher.tsx +4 -0
package/template/client/src/infraLab.ts +124 -0
package/template/client/src/reactLab.ts +477 -0
package/template/client/src/store.ts +219 -6
package/template/client/src/types.ts +35 -3
package/template/client/tsconfig.tsbuildinfo +1 -1
package/template/server/src/google-drive.ts +37 -3
package/template/server/src/index.ts +693 -52
package/template/server/src/infra-runner.ts +1104 -0
package/template/server/src/storage.ts +13 -3

package/template/client/src/components/VizCraftEmbed.tsx CHANGED Viewed

@@ -11,6 +11,9 @@ import {
   Send,
   MessageSquare,
   Undo2,
+  Copy,
+  Check,
+  Download,
 } from "lucide-react";
 import { parse as parseYaml } from "yaml";
 import {
@@ -76,6 +79,21 @@ const VIZ_DARK_THEME_CSS = `
 .viz-embed-host .viz-anim-flow .viz-edge {
   stroke: #0ea5e9;
 }
+/* Tooltip dark-theme overrides */
+.viz-tooltip {
+  background: #1e293b !important;
+  border: 1px solid #334155 !important;
+  color: #e2e8f0 !important;
+  font-size: 12px !important;
+  font-family: ui-sans-serif, system-ui, sans-serif !important;
+  border-radius: 6px !important;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
+  padding: 6px 10px !important;
+  max-width: 280px !important;
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+}
 `;
 // Inject VizCraft default CSS + dark overrides once into <head>
@@ -90,19 +108,75 @@ function ensureVizCss() {
 }
 /**
- * Replace typographic characters that the YAML parser mishandles:
- * - en-dash (U+2013) and em-dash (U+2014) → plain hyphen
- * - left/right curly double-quotes → straight double-quote
- * - left/right curly single-quotes / apostrophes → straight single-quote
+ * Replace typographic characters and structural issues that the YAML parser mishandles.
  *
- * These are commonly injected by LLMs or copy-paste from rich text.
+ * Fixes applied (in order):
+ * 1. Typographic characters → ASCII equivalents
+ * 2. Single-quoted YAML scalar values → double-quoted
+ *    yaml v2 (YAML 1.2) is strict: `fill: '#fff'` inside flow maps can fail.
+ *    Double quotes are always safe.
+ * 3. Inline flow maps `{ ... }` that the LLM split across multiple lines are
+ *    rejoined onto a single line. yaml v2 requires a flow-map opening `{` and
+ *    its matching `}` to reside on the same line when inside a block sequence.
  */
 function sanitizeSpecText(raw: string): string {
-  return raw
+  let s = raw
     .replace(/\u2013/g, "-") // en-dash –
     .replace(/\u2014/g, "-") // em-dash —
     .replace(/[\u201C\u201D]/g, '"') // curly double quotes " "
     .replace(/[\u2018\u2019\u02BC]/g, "'"); // curly single quotes ' '
+  // Convert single-quoted YAML scalar values to double-quoted.
+  // e.g.  fill: '#1e40af'  →  fill: "#1e40af"
+  s = s.replace(/(:\s*)'([^']*)'/g, (_, colon, val) => `${colon}"${val}"`);
+  // Rejoin flow-map items broken across lines.
+  // A YAML sequence item that opens with `{` but doesn't close with `}` on the
+  // same line will cause yaml v2 to throw "Flow map … must end with a }".
+  const lines = s.split("\n");
+  const joined: string[] = [];
+  let pending = "";
+  let depth = 0;
+  for (const line of lines) {
+    if (depth === 0) {
+      let d = 0;
+      for (const ch of line) {
+        if (ch === "{" || ch === "[") d++;
+        else if (ch === "}" || ch === "]") d--;
+      }
+      if (d > 0) {
+        pending = line;
+        depth = d;
+      } else {
+        joined.push(line);
+      }
+    } else {
+      const trimmed = line.trimStart();
+      // Insert a comma separator when joining flow-map / flow-sequence items
+      // that the LLM split across lines without a trailing comma.
+      // e.g. `{ width: 960` + `height: 560 }` → `{ width: 960, height: 560 }`
+      const tail = pending.trimEnd().slice(-1);
+      const needsComma =
+        tail !== "," &&
+        tail !== "{" &&
+        tail !== "[" &&
+        trimmed[0] !== "}" &&
+        trimmed[0] !== "]";
+      pending += (needsComma ? ", " : " ") + trimmed;
+      for (const ch of line) {
+        if (ch === "{" || ch === "[") depth++;
+        else if (ch === "}" || ch === "]") depth--;
+      }
+      if (depth <= 0) {
+        joined.push(pending);
+        pending = "";
+        depth = 0;
+      }
+    }
+  }
+  if (pending) joined.push(pending);
+  return joined.join("\n");
 }
 function parseSpec(raw: string): VizSpec {
@@ -117,6 +191,8 @@ function parseSpec(raw: string): VizSpec {
 /**
  * Walk each VizNode in the (already-built) scene and inject a sensible
  * maxWidth + overflow on any label that doesn't have one yet.
+ * Also injects a tooltip with the full label text so truncated nodes
+ * reveal their complete contents on hover.
  *
  * We read the shape from the built VizNode (which uses the internal NodeShape
  * discriminated union, e.g. {kind:'rect', w:120, h:40}), not from VizSpec.
@@ -124,12 +200,17 @@ function parseSpec(raw: string): VizSpec {
 function injectLabelMaxWidth(builder: ReturnType<typeof fromSpec>): void {
   const scene = builder.build();
   for (const node of scene.nodes) {
-    if (
-      !node.label ||
+    if (!node.label) continue;
+    const alreadyHasMaxWidth =
       (node.label as VizNode["label"] & { maxWidth?: number })?.maxWidth !==
-        undefined
-    )
+      undefined;
+    if (alreadyHasMaxWidth) {
+      // Still inject tooltip if there isn't one
+      if (!node.tooltip) {
+        builder.updateNode(node.id, { tooltip: node.label.text });
+      }
       continue;
+    }
     const shape = node.shape as Record<string, unknown>;
     let w = 60;
     if (typeof shape.w === "number") w = shape.w;
@@ -145,6 +226,8 @@ function injectLabelMaxWidth(builder: ReturnType<typeof fromSpec>): void {
           (node.label as { overflow?: "visible" | "ellipsis" | "clip" })
             .overflow ?? "ellipsis",
       },
+      // Show full label on hover so truncated "..." nodes are readable
+      tooltip: node.tooltip ?? node.label.text,
     });
   }
 }
@@ -176,6 +259,7 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
   const [refineHistory, setRefineHistory] = useState<
     Array<{ prompt: string; spec: string }>
   >([]);
+  const [copiedSpec, setCopiedSpec] = useState(false);
   // Keep activeSpec in sync when the prop changes (streaming / message reload)
   useEffect(() => {
@@ -193,7 +277,19 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
       });
       if (!res.ok) throw new Error("Fix request failed");
       const { spec: fixed } = (await res.json()) as { spec: string };
+      // Guard against truncated responses — a complete spec always ends with a
+      // complete value (not mid-token). Check the last non-whitespace char.
+      const lastChar = fixed.trimEnd().slice(-1);
+      const looksComplete = lastChar === "}" || /[\w"']/.test(lastChar);
+      if (!looksComplete) {
+        setError(
+          "Fix response was truncated before completing. Try again — the model may need another attempt for this large spec.",
+        );
+        return;
+      }
       setActiveSpec(fixed);
+      // Persist the fix so it survives reload (mirrors handleRefine behaviour)
+      onSpecRefined?.(spec, fixed);
     } catch (err) {
       console.error("Fix viz error:", err);
     } finally {
@@ -236,6 +332,130 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
     setRefineHistory((h) => h.slice(0, -1));
   };
+  const handleCopySpec = async () => {
+    try {
+      await navigator.clipboard.writeText(activeSpec);
+      setCopiedSpec(true);
+      setTimeout(() => setCopiedSpec(false), 1800);
+    } catch {
+      // fallback: select a textarea
+      const ta = document.createElement("textarea");
+      ta.value = activeSpec;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+      setCopiedSpec(true);
+      setTimeout(() => setCopiedSpec(false), 1800);
+    }
+  };
+  const handleDownloadPng = () => {
+    const container = containerRef.current;
+    if (!container) return;
+    const svgEl = container.querySelector("svg");
+    if (!svgEl) return;
+    // ── 1. Clone, then inline every element's computed styles ────────────────
+    // CSS class selectors (e.g. .viz-embed-host .viz-node-shape) don't resolve
+    // once the SVG is detached from the page, so we must bake in computed values.
+    const clone = svgEl.cloneNode(true) as SVGSVGElement;
+    const origEls = Array.from(svgEl.querySelectorAll("*"));
+    const cloneEls = Array.from(clone.querySelectorAll("*")) as SVGElement[];
+    const INLINE_PROPS = [
+      "fill",
+      "stroke",
+      "stroke-width",
+      "stroke-dasharray",
+      "stroke-dashoffset",
+      "stroke-opacity",
+      "fill-opacity",
+      "opacity",
+      "font-size",
+      "font-family",
+      "font-weight",
+      "text-anchor",
+      "dominant-baseline",
+      "alignment-baseline",
+      "stroke-linecap",
+      "stroke-linejoin",
+    ];
+    origEls.forEach((orig, i) => {
+      if (i >= cloneEls.length) return;
+      const cs = window.getComputedStyle(orig);
+      INLINE_PROPS.forEach((p) => {
+        const v = cs.getPropertyValue(p);
+        if (v) cloneEls[i].style.setProperty(p, v);
+      });
+    });
+    // ── 2. Compute tight content bounds via getBBox on the panzoom group ─────
+    // The panzoom group's getBBox returns bounds in its own local coordinate
+    // space (before the translate/scale transform). By removing that transform
+    // and setting viewBox to those bounds we get a perfectly framed export.
+    const panGroup = Array.from(svgEl.children).find(
+      (el) => el.tagName.toLowerCase() === "g",
+    ) as SVGGraphicsElement | undefined;
+    const pad = 24;
+    let vx = -pad,
+      vy = -pad,
+      vw = 800,
+      vh = 500;
+    if (panGroup) {
+      try {
+        const bb = panGroup.getBBox();
+        if (bb.width > 0 && bb.height > 0) {
+          vx = bb.x - pad;
+          vy = bb.y - pad;
+          vw = bb.width + pad * 2;
+          vh = bb.height + pad * 2;
+        }
+      } catch {
+        /* getBBox unavailable — fall back to defaults */
+      }
+    }
+    // Remove the live pan/zoom transform from the clone — viewBox does the framing
+    const clonePanGroup = Array.from(clone.children).find(
+      (el) => el.tagName.toLowerCase() === "g",
+    );
+    if (clonePanGroup) clonePanGroup.removeAttribute("transform");
+    // ── 3. Set output dimensions — target ~1600 px wide, max 4× scale ────────
+    const TARGET_W = 1600;
+    const renderScale = Math.max(1, Math.min(4, TARGET_W / vw));
+    const outW = Math.round(vw * renderScale);
+    const outH = Math.round(vh * renderScale);
+    clone.setAttribute("viewBox", `${vx} ${vy} ${vw} ${vh}`);
+    clone.setAttribute("width", String(outW));
+    clone.setAttribute("height", String(outH));
+    // ── 4. Serialize → canvas → PNG download ─────────────────────────────────
+    const svgStr = new XMLSerializer().serializeToString(clone);
+    const blob = new Blob([svgStr], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = outW;
+      canvas.height = outH;
+      const ctx = canvas.getContext("2d")!;
+      ctx.fillStyle = "#0f172a";
+      ctx.fillRect(0, 0, outW, outH);
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      const a = document.createElement("a");
+      a.href = canvas.toDataURL("image/png");
+      a.download = "diagram.png";
+      a.click();
+    };
+    img.onerror = () => URL.revokeObjectURL(url);
+    img.src = url;
+  };
   // Prevent the parent chat scroll container from scrolling when the user
   // wheels over the viz. We need a non-passive listener so preventDefault works.
   // (React's synthetic onWheel is passive in some environments and can't prevent scroll.)
@@ -460,7 +680,7 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
     <div className="my-3 rounded-lg overflow-hidden border border-slate-700/50 bg-slate-900/60">
       {/* Toolbar — zoom controls (always shown unless there's an error) */}
       {!error && (
-        <div className="flex items-center justify-end gap-1 px-2 pt-1.5 pb-0">
+        <div className="relative z-10 flex items-center justify-end gap-1 px-2 pt-1.5 pb-0">
           {/* Zoom out */}
           <button
             onClick={handleZoomOut}
@@ -488,6 +708,30 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
             <Maximize2 className="w-3 h-3" />
             Fit
           </button>
+          {/* Divider */}
+          <span className="w-px h-3 bg-slate-700 mx-0.5" />
+          {/* Copy spec */}
+          <button
+            onClick={handleCopySpec}
+            title="Copy diagram spec"
+            className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            {copiedSpec ? (
+              <Check className="w-3 h-3 text-green-400" />
+            ) : (
+              <Copy className="w-3 h-3" />
+            )}
+            {copiedSpec ? "Copied!" : "Copy"}
+          </button>
+          {/* Download PNG */}
+          <button
+            onClick={handleDownloadPng}
+            title="Download as PNG"
+            className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            <Download className="w-3 h-3" />
+            PNG
+          </button>
         </div>
       )}
@@ -532,7 +776,7 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
       {/* Step controls — only rendered when spec has steps */}
       {stepState && !error && (
-        <div className="flex items-center justify-between px-3 py-2 border-t border-slate-700/50 bg-slate-800/60 gap-3">
+        <div className="relative z-10 flex items-center justify-between px-3 py-2 border-t border-slate-700/50 bg-slate-800/60 gap-3">
           {/* Prev */}
           <button
             onClick={handlePrev}
@@ -589,7 +833,7 @@ export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
       )}
       {/* Refine panel */}
-      <div className="border-t border-slate-700/50">
+      <div className="relative z-10 border-t border-slate-700/50">
         {/* History chips */}
         {refineHistory.length > 0 && (
           <div className="flex flex-wrap items-center gap-1.5 px-3 pt-2">

package/template/client/src/components/WorkspaceSwitcher.tsx CHANGED Viewed

@@ -369,6 +369,10 @@ export default function WorkspaceSwitcher() {
                         folderPicker.ws.id,
                         name,
                       );
+                      if ("needsAuth" in created && created.needsAuth) {
+                        window.location.href = created.authUrl;
+                        return;
+                      }
                       setFolderPicker((p) =>
                         p ? { ...p, folders: [...p.folders, created] } : p,
                       );

package/template/client/src/infraLab.ts ADDED Viewed

@@ -0,0 +1,124 @@
+import type { InfraLabWorkspace } from "./types";
+const DEFAULT_INFRA_FILES: Record<string, string> = {
+  "provider.tf": `terraform {
+  required_providers {
+    aws = {
+      source  = "hashicorp/aws"
+      version = "~> 5.0"
+    }
+  }
+}
+provider "aws" {
+  region                      = "us-east-1"
+  access_key                  = "test"
+  secret_key                  = "test"
+  skip_credentials_validation = true
+  skip_metadata_api_check     = true
+  skip_requesting_account_id  = true
+  s3_use_path_style           = true
+  endpoints {
+    s3 = "http://localhost:4566"
+  }
+}
+`,
+  "main.tf": `resource "aws_s3_bucket" "example" {
+  bucket = "practice-bucket"
+}
+`,
+};
+export const DEFAULT_INFRA_LAB: InfraLabWorkspace = {
+  version: 1,
+  label: "AWS LocalStack Lab",
+  provider: "aws",
+  executionMode: "localstack",
+  activeFile: "main.tf",
+  files: DEFAULT_INFRA_FILES,
+};
+export function cloneInfraLabWorkspace(
+  workspace?: InfraLabWorkspace | null,
+): InfraLabWorkspace {
+  const source = workspace ?? DEFAULT_INFRA_LAB;
+  // Only seed defaults when the source has no files of its own
+  const files =
+    source.files && Object.keys(source.files).length > 0
+      ? { ...source.files }
+      : { ...DEFAULT_INFRA_FILES };
+  const activeFile = files[source.activeFile]
+    ? source.activeFile
+    : (Object.keys(files)[0] ?? "main.tf");
+  return {
+    version: 1,
+    label: source.label || DEFAULT_INFRA_LAB.label,
+    provider: "aws",
+    executionMode:
+      source.executionMode === "plan-only" ? "plan-only" : "localstack",
+    activeFile,
+    files,
+  };
+}
+export function getInfraLabFileOrder(workspace: InfraLabWorkspace): string[] {
+  const preferred = [
+    "main.tf",
+    "provider.tf",
+    "variables.tf",
+    "terraform.tfvars",
+    "outputs.tf",
+    "locals.tf",
+    "README.md",
+  ];
+  const extras = Object.keys(workspace.files)
+    .filter((name) => !preferred.includes(name))
+    .sort();
+  return preferred.filter((name) => workspace.files[name]).concat(extras);
+}
+export function serializeInfraLabWorkspace(
+  workspace: InfraLabWorkspace,
+): string {
+  return JSON.stringify(cloneInfraLabWorkspace(workspace), null, 2);
+}
+export function parseInfraLabWorkspace(raw: string): InfraLabWorkspace | null {
+  try {
+    const parsed = JSON.parse(raw) as Partial<InfraLabWorkspace> & {
+      files?: Record<string, unknown>;
+    };
+    if (!parsed || typeof parsed !== "object") return null;
+    if (!parsed.files || typeof parsed.files !== "object") return null;
+    const files = Object.fromEntries(
+      Object.entries(parsed.files).filter(
+        (entry): entry is [string, string] => typeof entry[1] === "string",
+      ),
+    );
+    if (Object.keys(files).length === 0) return null;
+    return cloneInfraLabWorkspace({
+      version: 1,
+      label:
+        typeof parsed.label === "string" && parsed.label.trim()
+          ? parsed.label.trim()
+          : DEFAULT_INFRA_LAB.label,
+      provider: "aws",
+      executionMode:
+        parsed.executionMode === "plan-only" ? "plan-only" : "localstack",
+      activeFile:
+        typeof parsed.activeFile === "string"
+          ? parsed.activeFile
+          : DEFAULT_INFRA_LAB.activeFile,
+      files,
+    });
+  } catch {
+    return null;
+  }
+}