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

create-interview-cockpit 0.4.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 (36) hide show

package/package.json +1 -1
package/template/client/package-lock.json +753 -1
package/template/client/package.json +4 -0
package/template/client/src/App.tsx +20 -0
package/template/client/src/api.ts +455 -3
package/template/client/src/components/AiSettingsModal.tsx +855 -248
package/template/client/src/components/AnnotationDialog.tsx +3 -9
package/template/client/src/components/ChatMessage.tsx +132 -27
package/template/client/src/components/ChatView.tsx +365 -123
package/template/client/src/components/CodeContextPanel.tsx +714 -0
package/template/client/src/components/CodeLineAnnotationPopup.tsx +179 -0
package/template/client/src/components/CodeRunnerModal.tsx +3030 -0
package/template/client/src/components/DocRefModal.tsx +551 -0
package/template/client/src/components/FileAttachments.tsx +128 -12
package/template/client/src/components/FilePickerModal.tsx +181 -0
package/template/client/src/components/FileViewerModal.tsx +406 -28
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 +219 -2
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 +397 -127
package/template/client/src/components/TextAnnotator.tsx +8 -15
package/template/client/src/components/VizCraftEmbed.tsx +412 -25
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 +416 -2
package/template/client/src/types.ts +41 -1
package/template/client/tsconfig.tsbuildinfo +1 -1
package/template/cockpit.json +1 -1
package/template/package.json +1 -1
package/template/server/src/google-drive.ts +144 -2
package/template/server/src/index.ts +1890 -188
package/template/server/src/infra-runner.ts +1104 -0
package/template/server/src/storage.ts +274 -3

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

@@ -8,6 +8,12 @@ import {
   Loader2,
   ZoomIn,
   ZoomOut,
+  Send,
+  MessageSquare,
+  Undo2,
+  Copy,
+  Check,
+  Download,
 } from "lucide-react";
 import { parse as parseYaml } from "yaml";
 import {
@@ -73,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>
@@ -86,8 +107,80 @@ function ensureVizCss() {
   document.head.appendChild(style);
 }
+/**
+ * Replace typographic characters and structural issues that the YAML parser mishandles.
+ *
+ * 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 {
+  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 {
-  const trimmed = raw.trim();
+  const trimmed = sanitizeSpecText(raw.trim());
   // Try JSON first, then YAML
   if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
     return JSON.parse(trimmed) as VizSpec;
@@ -98,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.
@@ -105,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;
@@ -126,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,
     });
   }
 }
@@ -139,9 +241,11 @@ interface StepState {
 interface Props {
   spec: string;
+  /** Called after the user successfully refines the spec so the parent can persist it. */
+  onSpecRefined?: (originalSpec: string, newSpec: string) => void;
 }
-export default memo(function VizCraftEmbed({ spec }: Props) {
+export default memo(function VizCraftEmbed({ spec, onSpecRefined }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const controllerRef = useRef<MountController | StepController | null>(null);
   // Tracks the active step's MountController (set in custom step mode) so panZoom is accessible
@@ -150,10 +254,17 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
   const [error, setError] = useState<string | null>(null);
   const [fixing, setFixing] = useState(false);
   const [stepState, setStepState] = useState<StepState | null>(null);
+  const [refineInput, setRefineInput] = useState("");
+  const [refining, setRefining] = useState(false);
+  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(() => {
     setActiveSpec(spec);
+    setRefineHistory([]);
   }, [spec]);
   const handleFix = async () => {
@@ -166,7 +277,19 @@ export default memo(function VizCraftEmbed({ spec }: 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 {
@@ -174,6 +297,165 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
     }
   };
+  const handleRefine = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const prompt = refineInput.trim();
+    if (!prompt || refining) return;
+    setRefining(true);
+    try {
+      const res = await fetch("/api/refine-viz", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          spec: activeSpec,
+          prompt,
+          history: refineHistory,
+        }),
+      });
+      if (!res.ok) throw new Error("Refine request failed");
+      const { spec: refined } = (await res.json()) as { spec: string };
+      setRefineHistory((prev) => [...prev, { prompt, spec: activeSpec }]);
+      onSpecRefined?.(spec, refined);
+      setActiveSpec(refined);
+      setRefineInput("");
+    } catch (err) {
+      console.error("Refine viz error:", err);
+    } finally {
+      setRefining(false);
+    }
+  };
+  const handleUndoRefine = () => {
+    if (refineHistory.length === 0) return;
+    const prev = refineHistory[refineHistory.length - 1];
+    setActiveSpec(prev.spec);
+    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.)
@@ -245,24 +527,43 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
             };
           };
+          // Timer to unblock "Next" if signals never complete (e.g. invalid edge direction)
+          let signalReadyTimer: ReturnType<typeof setTimeout> | null = null;
+          const clearSignalTimer = () => {
+            if (signalReadyTimer !== null) {
+              clearTimeout(signalReadyTimer);
+              signalReadyTimer = null;
+            }
+          };
           const goTo = (index: number) => {
             if (cancelled || index < 0 || index >= total) return;
+            clearSignalTimer();
             // Preserve the current viewport so navigating steps doesn't reset zoom/pan.
             // getState() is only available after the first mount (prevState is undefined on step 0).
             const prevState = mountControllerRef.current?.panZoom?.getState();
             currentMount?.destroy();
             currentMount = null;
-            const builder = fromSpec(buildStepSpec(index));
-            injectLabelMaxWidth(builder);
-            currentMount = builder.mount(container, {
-              panZoom: true,
-              // Restore previous zoom if the user had already panned/zoomed; otherwise fit.
-              initialZoom: prevState?.zoom ?? "fit",
-              initialPan: prevState?.pan,
-              minZoom: 0.1,
-              maxZoom: 8,
-            });
+            // Wrap VizCraft mount in try-catch — runtime errors (e.g. unknown node in chain)
+            // are displayed in the error panel rather than silently freezing the component.
+            try {
+              const builder = fromSpec(buildStepSpec(index));
+              injectLabelMaxWidth(builder);
+              currentMount = builder.mount(container, {
+                panZoom: true,
+                // Restore previous zoom if the user had already panned/zoomed; otherwise fit.
+                initialZoom: prevState?.zoom ?? "fit",
+                initialPan: prevState?.pan,
+                minZoom: 0.1,
+                maxZoom: 8,
+              });
+            } catch (e) {
+              setError(
+                e instanceof Error ? e.message : "Failed to render step",
+              );
+              return;
+            }
             mountControllerRef.current = currentMount;
             currentIndex = index;
@@ -281,15 +582,23 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
               if (step.autoAdvance) setTimeout(() => goTo(index + 1), 50);
             } else {
               let done = 0;
+              const onComplete = () => {
+                done++;
+                if (done >= signals.length) {
+                  clearSignalTimer();
+                  setStepState((prev) => prev && { ...prev, isReady: true });
+                  if (step.autoAdvance) setTimeout(() => goTo(index + 1), 50);
+                }
+              };
               signals.forEach((s) => {
-                currentMount!.onSignalComplete(s.id, () => {
-                  done++;
-                  if (done >= signals.length) {
-                    setStepState((prev) => prev && { ...prev, isReady: true });
-                    if (step.autoAdvance) setTimeout(() => goTo(index + 1), 50);
-                  }
-                });
+                currentMount!.onSignalComplete(s.id, onComplete);
               });
+              // Fallback: if signals never fire (e.g. signal chain travels against edge direction),
+              // unblock the Next button after 6 s so the user isn't permanently stuck.
+              signalReadyTimer = setTimeout(() => {
+                signalReadyTimer = null;
+                setStepState((prev) => prev && { ...prev, isReady: true });
+              }, 6000);
             }
           };
@@ -302,6 +611,7 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
             reset: () => goTo(0),
             destroy: () => {
               cancelled = true;
+              clearSignalTimer();
               currentMount?.destroy();
               currentMount = null;
               mountControllerRef.current = null;
@@ -370,7 +680,7 @@ export default memo(function VizCraftEmbed({ spec }: 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}
@@ -398,6 +708,30 @@ export default memo(function VizCraftEmbed({ spec }: 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>
       )}
@@ -442,7 +776,7 @@ export default memo(function VizCraftEmbed({ spec }: 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}
@@ -497,6 +831,59 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
           )}
         </div>
       )}
+      {/* Refine panel */}
+      <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">
+            {refineHistory.map((h, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] rounded-full bg-slate-800 text-slate-400 border border-slate-700 max-w-[180px]"
+                title={h.prompt}
+              >
+                <MessageSquare className="w-2.5 h-2.5 flex-shrink-0" />
+                <span className="truncate">{h.prompt}</span>
+              </span>
+            ))}
+            <button
+              onClick={handleUndoRefine}
+              className="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] rounded-full bg-slate-800 text-slate-400 hover:text-amber-300 hover:border-amber-500/40 border border-slate-700 transition-colors"
+              title="Undo last refinement"
+            >
+              <Undo2 className="w-2.5 h-2.5" />
+              Undo
+            </button>
+          </div>
+        )}
+        {/* Prompt input row */}
+        <form
+          onSubmit={handleRefine}
+          className="flex items-center gap-2 px-3 py-2"
+        >
+          <input
+            type="text"
+            value={refineInput}
+            onChange={(e) => setRefineInput(e.target.value)}
+            placeholder="Describe a change… e.g. add a database node"
+            className="flex-1 bg-slate-800 border border-slate-700 rounded px-2.5 py-1.5 text-xs text-slate-200 placeholder-slate-500 focus:outline-none focus:border-cyan-600 transition-colors"
+            disabled={refining}
+          />
+          <button
+            type="submit"
+            disabled={refining || !refineInput.trim()}
+            className="flex items-center justify-center w-7 h-7 rounded bg-cyan-700 text-white hover:bg-cyan-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors flex-shrink-0"
+            title="Refine diagram"
+          >
+            {refining ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            ) : (
+              <Send className="w-3.5 h-3.5" />
+            )}
+          </button>
+        </form>
+      </div>
     </div>
   );
 });

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,
                       );