npm - create-interview-cockpit - Versions diffs - 0.15.0 → 0.16.0 - Mend

create-interview-cockpit 0.15.0 → 0.16.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 (14) hide show

package/package.json +1 -1
package/template/client/src/App.tsx +3 -0
package/template/client/src/components/CanvasLabModal.tsx +585 -0
package/template/client/src/components/LabsPanel.tsx +63 -0
package/template/client/src/components/Sidebar.tsx +12 -1
package/template/client/src/components/WorkspaceSwitcher.tsx +36 -0
package/template/client/src/reactLab.ts +1206 -0
package/template/client/src/store.ts +24 -1
package/template/client/src/types.ts +3 -1
package/template/client/vite.config.ts +15 -8
package/template/cockpit.json +1 -1
package/template/server/src/google-drive.ts +4 -1
package/template/server/src/index.ts +63 -6
package/template/server/src/storage.ts +1 -0

package/package.json CHANGED Viewed

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

package/template/client/src/App.tsx CHANGED Viewed

@@ -10,6 +10,7 @@ import AiSettingsModal from "./components/AiSettingsModal";
 import CodeRunnerModal from "./components/CodeRunnerModal";
 import InfraLabModal from "./components/InfraLabModal";
 import DeploymentLabModal from "./components/DeploymentLabModal";
+import CanvasLabModal from "./components/CanvasLabModal";
 import {
   Code,
   FlaskConical,
@@ -44,6 +45,7 @@ export default function App() {
     showCodeRunner,
     showInfraLab,
     showDeploymentLab,
+    showCanvasLab,
     closeCodeRunner,
   } = useStore();
@@ -190,6 +192,7 @@ export default function App() {
       {showCodeRunner && <CodeRunnerModal />}
       {showInfraLab && <InfraLabModal />}
       {showDeploymentLab && <DeploymentLabModal />}
+      {showCanvasLab && <CanvasLabModal />}
     </div>
   );
 }

package/template/client/src/components/CanvasLabModal.tsx ADDED Viewed

@@ -0,0 +1,585 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  Check,
+  GripVertical,
+  Loader2,
+  Maximize2,
+  Minimize2,
+  Play,
+  RotateCcw,
+  Save,
+  X,
+} from "lucide-react";
+import { useStore } from "../store";
+import Editor from "react-simple-code-editor";
+import Prism from "prismjs";
+import "prismjs/components/prism-clike";
+import "prismjs/components/prism-javascript";
+// ─── Constants ────────────────────────────────────────────────────────────────
+const MIN_W = 600;
+const MIN_H = 400;
+const DEFAULT_W = Math.min(1100, window.innerWidth - 48);
+const DEFAULT_H = Math.min(720, window.innerHeight - 48);
+const MIN_EDITOR_FRAC = 0.2; // editor pane can shrink to 20% of modal width
+const MAX_EDITOR_FRAC = 0.8;
+type ResizeDir = "e" | "s" | "se" | "sw" | "w" | "ne" | "nw" | "n" | null;
+// ─── Default starter code ─────────────────────────────────────────────────────
+const DEFAULT_CODE = `// canvas and ctx are pre-defined for you.
+// canvas.width / canvas.height match the preview size.
+// requestAnimationFrame works — the frame is restarted on each Run.
+// ── Background ────────────────────────────────────────────
+ctx.fillStyle = '#0f172a';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+// ── Circles ───────────────────────────────────────────────
+const cx = canvas.width / 2;
+const cy = canvas.height / 2;
+ctx.fillStyle = '#06b6d4';
+ctx.beginPath();
+ctx.arc(cx, cy, 80, 0, Math.PI * 2);
+ctx.fill();
+ctx.strokeStyle = '#7c3aed';
+ctx.lineWidth = 4;
+ctx.beginPath();
+ctx.arc(cx, cy, 110, 0, Math.PI * 2);
+ctx.stroke();
+// ── Rectangle ─────────────────────────────────────────────
+ctx.fillStyle = 'rgba(245,158,11,0.7)';
+ctx.fillRect(cx - 200, cy - 60, 100, 60);
+// ── Line ──────────────────────────────────────────────────
+ctx.strokeStyle = '#f43f5e';
+ctx.lineWidth = 3;
+ctx.beginPath();
+ctx.moveTo(40, canvas.height - 40);
+ctx.lineTo(canvas.width - 40, 40);
+ctx.stroke();
+// ── Text ──────────────────────────────────────────────────
+ctx.fillStyle = '#e2e8f0';
+ctx.font = 'bold 28px system-ui, sans-serif';
+ctx.textAlign = 'center';
+ctx.textBaseline = 'middle';
+ctx.fillText('Canvas Lab  ✏️', cx, cy + 140);
+ctx.font = '13px monospace';
+ctx.fillStyle = '#64748b';
+ctx.fillText('Edit the code on the left — click Run to see changes', cx, cy + 175);
+`;
+// ─── srcdoc builder ───────────────────────────────────────────────────────────
+function buildSrcdoc(code: string): string {
+  return `<!DOCTYPE html>
+<html><head>
+  <meta charset="utf-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #0f172a; width: 100vw; height: 100vh; overflow: hidden; }
+    canvas { display: block; }
+    #error-overlay {
+      position: fixed; bottom: 0; left: 0; right: 0;
+      background: rgba(220,38,38,0.93); color: #fef2f2;
+      font: 12px/1.6 monospace; padding: 10px 14px;
+      white-space: pre-wrap; word-break: break-all;
+      border-top: 1px solid rgba(248,113,113,0.4);
+    }
+  </style>
+</head>
+<body>
+  <canvas id="canvas"></canvas>
+  <script>
+    const canvas = document.getElementById('canvas');
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    const ctx = canvas.getContext('2d');
+    let _rafId = null;
+    const _origRAF = requestAnimationFrame;
+    window.requestAnimationFrame = function(cb) {
+      _rafId = _origRAF(cb);
+      return _rafId;
+    };
+    window.addEventListener('resize', () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    });
+    try {
+      ${code}
+    } catch (e) {
+      if (_rafId !== null) { cancelAnimationFrame(_rafId); _rafId = null; }
+      const div = document.createElement('div');
+      div.id = 'error-overlay';
+      div.textContent = '\\u26a0\\ufe0f  ' + (e.stack || e.message);
+      document.body.appendChild(div);
+    }
+  </script>
+</body></html>`;
+}
+// ─── Component ────────────────────────────────────────────────────────────────
+export default function CanvasLabModal() {
+  const {
+    closeCanvasLab,
+    canvasLabInitialCode,
+    canvasLabInitialFileId,
+    currentQuestion,
+    saveCodeSnippetToQuestion,
+    overwriteContextFileContent,
+  } = useStore();
+  // ── Editor state ──────────────────────────────────────────
+  const [code, setCode] = useState(canvasLabInitialCode ?? DEFAULT_CODE);
+  const [fileId, setFileId] = useState<string | null>(
+    canvasLabInitialFileId ?? null,
+  );
+  // ── Preview state ─────────────────────────────────────────
+  const [srcdoc, setSrcdoc] = useState(() =>
+    buildSrcdoc(canvasLabInitialCode ?? DEFAULT_CODE),
+  );
+  const [runKey, setRunKey] = useState(0);
+  // ── Save state ────────────────────────────────────────────
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  // ── Editor / preview split ────────────────────────────────
+  const [editorFrac, setEditorFrac] = useState(0.5);
+  const splitRef = useRef<HTMLDivElement>(null);
+  const draggingDivider = useRef(false);
+  const onDividerMouseDown = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    draggingDivider.current = true;
+    const onMove = (ev: MouseEvent) => {
+      if (!splitRef.current) return;
+      const rect = splitRef.current.getBoundingClientRect();
+      const frac = Math.max(
+        MIN_EDITOR_FRAC,
+        Math.min(MAX_EDITOR_FRAC, (ev.clientX - rect.left) / rect.width),
+      );
+      setEditorFrac(frac);
+    };
+    const onUp = () => {
+      draggingDivider.current = false;
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  }, []);
+  // ── Window drag + resize ──────────────────────────────────
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState({
+    x: Math.round((window.innerWidth - DEFAULT_W) / 2),
+    y: Math.round((window.innerHeight - DEFAULT_H) / 2),
+  });
+  const [size, setSize] = useState({ w: DEFAULT_W, h: DEFAULT_H });
+  const [maximized, setMaximized] = useState(false);
+  const [prevGeom, setPrevGeom] = useState<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+  } | null>(null);
+  const drag = useRef<{
+    startX: number;
+    startY: number;
+    origX: number;
+    origY: number;
+  } | null>(null);
+  const resize = useRef<{
+    dir: ResizeDir;
+    startX: number;
+    startY: number;
+    origX: number;
+    origY: number;
+    origW: number;
+    origH: number;
+  } | null>(null);
+  const onHeaderMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (maximized) return;
+      e.preventDefault();
+      drag.current = {
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: pos.x,
+        origY: pos.y,
+      };
+      const onMove = (ev: MouseEvent) => {
+        if (!drag.current) return;
+        setPos({
+          x: Math.max(0, drag.current.origX + ev.clientX - drag.current.startX),
+          y: Math.max(0, drag.current.origY + ev.clientY - drag.current.startY),
+        });
+      };
+      const onUp = () => {
+        drag.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [maximized, pos],
+  );
+  const onResizeMouseDown = useCallback(
+    (e: React.MouseEvent, dir: ResizeDir) => {
+      if (maximized) return;
+      e.preventDefault();
+      e.stopPropagation();
+      resize.current = {
+        dir,
+        startX: e.clientX,
+        startY: e.clientY,
+        origX: pos.x,
+        origY: pos.y,
+        origW: size.w,
+        origH: size.h,
+      };
+      const onMove = (ev: MouseEvent) => {
+        if (!resize.current) return;
+        const dx = ev.clientX - resize.current.startX;
+        const dy = ev.clientY - resize.current.startY;
+        const { dir: d, origX, origY, origW, origH } = resize.current;
+        let nx = origX,
+          ny = origY,
+          nw = origW,
+          nh = origH;
+        if (d?.includes("e")) nw = Math.max(MIN_W, origW + dx);
+        if (d?.includes("s")) nh = Math.max(MIN_H, origH + dy);
+        if (d?.includes("w")) {
+          nw = Math.max(MIN_W, origW - dx);
+          nx = origX + (origW - nw);
+        }
+        if (d?.includes("n")) {
+          nh = Math.max(MIN_H, origH - dy);
+          ny = origY + (origH - nh);
+        }
+        setPos({ x: nx, y: ny });
+        setSize({ w: nw, h: nh });
+      };
+      const onUp = () => {
+        resize.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    },
+    [maximized, pos, size],
+  );
+  const toggleMaximize = useCallback(() => {
+    if (maximized) {
+      const g = prevGeom ?? { x: pos.x, y: pos.y, w: size.w, h: size.h };
+      setPos({ x: g.x, y: g.y });
+      setSize({ w: g.w, h: g.h });
+      setMaximized(false);
+    } else {
+      setPrevGeom({ x: pos.x, y: pos.y, w: size.w, h: size.h });
+      setPos({ x: 0, y: 0 });
+      setSize({ w: window.innerWidth, h: window.innerHeight });
+      setMaximized(true);
+    }
+  }, [maximized, prevGeom, pos, size]);
+  // ── Keyboard ──────────────────────────────────────────────
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") closeCanvasLab();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [closeCanvasLab]);
+  // ── Run ───────────────────────────────────────────────────
+  const handleRun = () => {
+    setSrcdoc(buildSrcdoc(code));
+    setRunKey((k) => k + 1);
+  };
+  // ── Save ──────────────────────────────────────────────────
+  const handleSave = async () => {
+    if (!currentQuestion) return;
+    setSaving(true);
+    try {
+      if (fileId) {
+        await overwriteContextFileContent(currentQuestion.id, fileId, code);
+      } else {
+        const cf = await saveCodeSnippetToQuestion(
+          currentQuestion.id,
+          code,
+          "javascript",
+          "Canvas Lab",
+          "canvas",
+        );
+        setFileId(cf.id);
+      }
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } finally {
+      setSaving(false);
+    }
+  };
+  // ── Reset ─────────────────────────────────────────────────
+  const handleReset = () => {
+    if (
+      !window.confirm(
+        "Reset to default starter code? Your current code will be lost.",
+      )
+    )
+      return;
+    setCode(DEFAULT_CODE);
+    setSrcdoc(buildSrcdoc(DEFAULT_CODE));
+    setRunKey((k) => k + 1);
+  };
+  const style: React.CSSProperties = maximized
+    ? { position: "fixed", inset: 0, width: "100vw", height: "100vh" }
+    : {
+        position: "fixed",
+        left: pos.x,
+        top: pos.y,
+        width: size.w,
+        height: size.h,
+      };
+  const HANDLE = "absolute z-10";
+  return (
+    <div
+      ref={containerRef}
+      style={style}
+      className="z-[200] flex flex-col bg-slate-900 border border-slate-700 rounded-xl shadow-2xl overflow-hidden"
+    >
+      {/* Resize handles */}
+      {!maximized && (
+        <>
+          <div
+            className={`${HANDLE} top-0 left-0 right-0 h-1.5 cursor-n-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "n")}
+          />
+          <div
+            className={`${HANDLE} bottom-0 left-0 right-0 h-1.5 cursor-s-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "s")}
+          />
+          <div
+            className={`${HANDLE} left-0 top-0 bottom-0 w-1.5 cursor-w-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "w")}
+          />
+          <div
+            className={`${HANDLE} right-0 top-0 bottom-0 w-1.5 cursor-e-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "e")}
+          />
+          <div
+            className={`${HANDLE} top-0 left-0 w-3 h-3 cursor-nw-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "nw")}
+          />
+          <div
+            className={`${HANDLE} top-0 right-0 w-3 h-3 cursor-ne-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "ne")}
+          />
+          <div
+            className={`${HANDLE} bottom-0 left-0 w-3 h-3 cursor-sw-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "sw")}
+          />
+          <div
+            className={`${HANDLE} bottom-0 right-0 w-3 h-3 cursor-se-resize`}
+            onMouseDown={(e) => onResizeMouseDown(e, "se")}
+          />
+        </>
+      )}
+      {/* Toolbar */}
+      <div
+        className="flex items-center gap-2 px-3 py-2 border-b border-slate-700 bg-slate-900/90 shrink-0 select-none"
+        onMouseDown={onHeaderMouseDown}
+        style={{ cursor: maximized ? "default" : "move" }}
+      >
+        {/* Title */}
+        <span className="text-[11px] font-bold uppercase tracking-widest text-orange-400 mr-1">
+          🎨 Canvas Lab
+        </span>
+        {fileId && (
+          <span className="text-[10px] text-slate-600 italic truncate max-w-[160px]">
+            {currentQuestion?.contextFiles?.find((f) => f.id === fileId)
+              ?.label ?? "Saved"}
+          </span>
+        )}
+        <div className="flex-1" />
+        {/* Actions */}
+        <button
+          onClick={handleRun}
+          className="flex items-center gap-1 px-2.5 py-1 bg-orange-500/15 border border-orange-500/25 text-orange-300 hover:bg-orange-500/25 rounded text-[11px] font-medium transition-colors"
+          title="Run (render canvas)"
+        >
+          <Play className="w-3 h-3" /> Run
+        </button>
+        {currentQuestion && (
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="flex items-center gap-1 px-2.5 py-1 bg-cyan-500/15 border border-cyan-500/25 text-cyan-300 hover:bg-cyan-500/25 rounded text-[11px] font-medium transition-colors disabled:opacity-50"
+            title="Save to question"
+          >
+            {saving ? (
+              <Loader2 className="w-3 h-3 animate-spin" />
+            ) : saved ? (
+              <Check className="w-3 h-3" />
+            ) : (
+              <Save className="w-3 h-3" />
+            )}
+            {saved ? "Saved" : "Save"}
+          </button>
+        )}
+        <button
+          onClick={handleReset}
+          className="flex items-center gap-1 px-2 py-1 text-slate-500 hover:text-slate-300 hover:bg-slate-700 rounded text-[11px] transition-colors"
+          title="Reset to default"
+        >
+          <RotateCcw className="w-3 h-3" />
+        </button>
+        <button
+          onClick={toggleMaximize}
+          className="p-1 rounded text-slate-500 hover:text-slate-300 hover:bg-slate-700 transition-colors"
+          title={maximized ? "Restore" : "Maximize"}
+        >
+          {maximized ? (
+            <Minimize2 className="w-3.5 h-3.5" />
+          ) : (
+            <Maximize2 className="w-3.5 h-3.5" />
+          )}
+        </button>
+        <button
+          onClick={closeCanvasLab}
+          className="p-1 rounded text-slate-500 hover:text-slate-300 hover:bg-slate-700 transition-colors"
+          title="Close"
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      {/* Body: editor | divider | preview */}
+      <div ref={splitRef} className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Code editor */}
+        <div
+          className="flex flex-col min-w-0 overflow-hidden border-r border-slate-700/60"
+          style={{ width: `${editorFrac * 100}%` }}
+        >
+          {/* Editor header */}
+          <div className="flex items-center px-3 py-1.5 border-b border-slate-800 shrink-0">
+            <span className="text-[10px] uppercase tracking-wide text-slate-500">
+              JavaScript
+            </span>
+            <span className="ml-2 text-[9px] text-slate-700 italic">
+              — <code className="text-slate-600">canvas</code> &amp;{" "}
+              <code className="text-slate-600">ctx</code> are pre-defined
+            </span>
+          </div>
+          <div className="flex-1 min-h-0 overflow-auto bg-slate-950">
+            <Editor
+              value={code}
+              onValueChange={setCode}
+              highlight={(src) =>
+                Prism.highlight(src, Prism.languages.javascript, "javascript")
+              }
+              padding={14}
+              style={{
+                fontFamily: '"Fira Code", "Fira Mono", monospace',
+                fontSize: 13,
+                lineHeight: 1.6,
+                minHeight: "100%",
+                color: "#e2e8f0",
+                background: "transparent",
+              }}
+              textareaClassName="focus:outline-none"
+              onKeyDown={(e) => {
+                if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+                  e.preventDefault();
+                  handleRun();
+                }
+                if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+                  e.preventDefault();
+                  handleSave();
+                }
+              }}
+            />
+          </div>
+          {/* Editor footer hint */}
+          <div className="px-3 py-1 border-t border-slate-800 shrink-0 flex justify-between">
+            <span className="text-[9px] text-slate-700">⌘ Enter — Run</span>
+            <span className="text-[9px] text-slate-700">⌘ S — Save</span>
+          </div>
+        </div>
+        {/* Drag divider */}
+        <div
+          className="w-2 flex items-center justify-center bg-slate-800/40 hover:bg-slate-700/60 cursor-col-resize shrink-0 transition-colors"
+          onMouseDown={onDividerMouseDown}
+        >
+          <GripVertical className="w-3 h-3 text-slate-600" />
+        </div>
+        {/* Canvas preview */}
+        <div className="flex-1 flex flex-col min-w-0 bg-slate-950">
+          {/* Preview header */}
+          <div className="flex items-center justify-between px-3 py-1.5 border-b border-slate-800 shrink-0">
+            <span className="text-[10px] uppercase tracking-wide text-slate-500">
+              Preview
+            </span>
+            <button
+              onClick={handleRun}
+              className="text-[9px] text-orange-400/70 hover:text-orange-400 transition-colors"
+              title="Re-run"
+            >
+              <Play className="w-3 h-3 inline mr-0.5" />
+              Re-run
+            </button>
+          </div>
+          <iframe
+            key={runKey}
+            srcDoc={srcdoc}
+            sandbox="allow-scripts"
+            className="flex-1 w-full border-0"
+            title="Canvas preview"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}