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

create-interview-cockpit 0.3.0 → 0.5.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 (28) hide show

package/README.md +23 -0
package/package.json +1 -1
package/template/client/package-lock.json +42 -0
package/template/client/package.json +5 -0
package/template/client/src/App.tsx +45 -12
package/template/client/src/api.ts +174 -0
package/template/client/src/components/AiSettingsModal.tsx +1041 -0
package/template/client/src/components/AnnotationDialog.tsx +3 -9
package/template/client/src/components/ChatMessage.tsx +110 -27
package/template/client/src/components/ChatView.tsx +239 -137
package/template/client/src/components/CodeContextPanel.tsx +297 -0
package/template/client/src/components/CodeLineAnnotationPopup.tsx +179 -0
package/template/client/src/components/CodeRunnerModal.tsx +1549 -0
package/template/client/src/components/DocRefModal.tsx +502 -0
package/template/client/src/components/FileAttachments.tsx +109 -9
package/template/client/src/components/FilePickerModal.tsx +181 -0
package/template/client/src/components/FileViewerModal.tsx +406 -28
package/template/client/src/components/MarkdownRenderer.tsx +210 -2
package/template/client/src/components/Sidebar.tsx +213 -125
package/template/client/src/components/TextAnnotator.tsx +8 -15
package/template/client/src/components/VizCraftEmbed.tsx +645 -0
package/template/client/src/store.ts +275 -0
package/template/client/src/types.ts +9 -0
package/template/cockpit.json +1 -1
package/template/data/ai-settings.json +49 -0
package/template/server/src/google-drive.ts +109 -1
package/template/server/src/index.ts +1187 -76
package/template/server/src/storage.ts +359 -2

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

@@ -12,9 +12,8 @@ interface Props {
   onAnnotationUpdate: (updated: Annotation) => void;
   bookmarkedBlockIndex?: number;
   onBookmarkBlock?: (blockIndex: number) => void;
-  responseLength?: string;
-  responseStyle?: string;
-  responseAudience?: string;
+  preferenceSuffix?: string;
+  onSpecRefined?: (originalSpec: string, newSpec: string) => void;
 }
 type Phase = "idle" | "button" | "input" | "loading";
@@ -119,9 +118,8 @@ export default function TextAnnotator({
   onAnnotationUpdate,
   bookmarkedBlockIndex,
   onBookmarkBlock,
-  responseLength,
-  responseStyle,
-  responseAudience,
+  preferenceSuffix,
+  onSpecRefined,
 }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const annotationsRef = useRef(annotations);
@@ -207,9 +205,7 @@ export default function TextAnnotator({
           selectedText,
           prompt: inputValue.trim(),
           messageContent: content,
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();
@@ -248,9 +244,7 @@ export default function TextAnnotator({
           messageContent: content,
           priorResponse: annotation.response,
           followUps: annotation.followUps ?? [],
-          responseLength,
-          responseStyle,
-          responseAudience,
+          preferenceSuffix,
         }),
       });
       const data = await res.json();
@@ -288,6 +282,7 @@ export default function TextAnnotator({
         onAnnotationClick={handleAnnotationClick}
         bookmarkedBlockIndex={bookmarkedBlockIndex}
         onBookmarkBlock={onBookmarkBlock}
+        onSpecRefined={onSpecRefined}
       />
       {/* Annotation dialog — opened by clicking an underlined annotation link */}
@@ -298,9 +293,7 @@ export default function TextAnnotator({
           onUpdate={onAnnotationUpdate}
           messageContent={content}
           initialPos={dialogPos}
-          responseLength={responseLength}
-          responseStyle={responseStyle}
-          responseAudience={responseAudience}
+          preferenceSuffix={preferenceSuffix}
         />
       )}

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

@@ -0,0 +1,645 @@
+import { memo, useEffect, useRef, useState } from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  RotateCcw,
+  Maximize2,
+  RefreshCw,
+  Loader2,
+  ZoomIn,
+  ZoomOut,
+  Send,
+  MessageSquare,
+  Undo2,
+} from "lucide-react";
+import { parse as parseYaml } from "yaml";
+import {
+  fromSpec,
+  DEFAULT_VIZ_CSS,
+  type VizSpec,
+  type MountController,
+  type StepController,
+  type VizNode,
+  type PanZoomController,
+} from "vizcraft";
+// Dark-theme overrides for VizCraft — applied on top of DEFAULT_VIZ_CSS
+const VIZ_DARK_THEME_CSS = `
+/* ── VizCraft dark-theme overrides ── */
+/* Allow pan/zoom on empty SVG space; set grab cursor */
+.viz-embed-host svg {
+  pointer-events: all;
+  cursor: grab;
+}
+.viz-embed-host svg:active {
+  cursor: grabbing;
+}
+/* Block browser touch-scroll so VizCraft pan/zoom can take over */
+.viz-embed-host {
+  touch-action: none;
+  user-select: none;
+  cursor: grab;
+}
+.viz-embed-host:active {
+  cursor: grabbing;
+}
+.viz-embed-host .viz-node-shape {
+  fill: #1e293b;
+  stroke: #475569;
+  stroke-width: 1.5;
+}
+.viz-embed-host .viz-node-label {
+  fill: #e2e8f0;
+  font-size: 12px;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+.viz-embed-host .viz-edge {
+  stroke: #64748b;
+  stroke-width: 1.5;
+}
+.viz-embed-host .viz-edge-label {
+  fill: #94a3b8;
+  font-size: 11px;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+}
+.viz-embed-host .viz-grid-label {
+  fill: #64748b;
+}
+.viz-embed-host .viz-signal {
+  fill: #38bdf8;
+}
+.viz-embed-host .viz-signal:hover {
+  fill: #7dd3fc;
+}
+.viz-embed-host .viz-anim-flow .viz-edge {
+  stroke: #0ea5e9;
+}
+`;
+// Inject VizCraft default CSS + dark overrides once into <head>
+let cssInjected = false;
+function ensureVizCss() {
+  if (cssInjected) return;
+  cssInjected = true;
+  const style = document.createElement("style");
+  style.id = "vizcraft-css";
+  style.textContent = DEFAULT_VIZ_CSS + VIZ_DARK_THEME_CSS;
+  document.head.appendChild(style);
+}
+/**
+ * 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
+ *
+ * These are commonly injected by LLMs or copy-paste from rich text.
+ */
+function sanitizeSpecText(raw: string): string {
+  return 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 ' '
+}
+function parseSpec(raw: string): VizSpec {
+  const trimmed = sanitizeSpecText(raw.trim());
+  // Try JSON first, then YAML
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    return JSON.parse(trimmed) as VizSpec;
+  }
+  return parseYaml(trimmed) as VizSpec;
+}
+/**
+ * Walk each VizNode in the (already-built) scene and inject a sensible
+ * maxWidth + overflow on any label that doesn't have one yet.
+ *
+ * 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.
+ */
+function injectLabelMaxWidth(builder: ReturnType<typeof fromSpec>): void {
+  const scene = builder.build();
+  for (const node of scene.nodes) {
+    if (
+      !node.label ||
+      (node.label as VizNode["label"] & { maxWidth?: number })?.maxWidth !==
+        undefined
+    )
+      continue;
+    const shape = node.shape as Record<string, unknown>;
+    let w = 60;
+    if (typeof shape.w === "number") w = shape.w;
+    else if (typeof shape.r === "number") w = shape.r * 2;
+    else if (typeof shape.rx === "number") w = (shape.rx as number) * 2;
+    else if (typeof shape.size === "number") w = shape.size as number;
+    else if (typeof shape.outerR === "number") w = (shape.outerR as number) * 2;
+    builder.updateNode(node.id, {
+      label: {
+        ...node.label,
+        maxWidth: Math.max(w - 10, 20),
+        overflow:
+          (node.label as { overflow?: "visible" | "ellipsis" | "clip" })
+            .overflow ?? "ellipsis",
+      },
+    });
+  }
+}
+interface StepState {
+  index: number;
+  total: number;
+  label: string;
+  isReady: boolean;
+}
+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, 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
+  const mountControllerRef = useRef<MountController | null>(null);
+  const [activeSpec, setActiveSpec] = useState(spec);
+  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 }>
+  >([]);
+  // Keep activeSpec in sync when the prop changes (streaming / message reload)
+  useEffect(() => {
+    setActiveSpec(spec);
+    setRefineHistory([]);
+  }, [spec]);
+  const handleFix = async () => {
+    setFixing(true);
+    try {
+      const res = await fetch("/api/fix-viz", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ spec: activeSpec, error }),
+      });
+      if (!res.ok) throw new Error("Fix request failed");
+      const { spec: fixed } = (await res.json()) as { spec: string };
+      setActiveSpec(fixed);
+    } catch (err) {
+      console.error("Fix viz error:", err);
+    } finally {
+      setFixing(false);
+    }
+  };
+  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));
+  };
+  // 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.)
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const stopScroll = (e: WheelEvent) => e.stopPropagation();
+    el.addEventListener("wheel", stopScroll, { passive: true });
+    return () => el.removeEventListener("wheel", stopScroll);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    // Debounce: wait for streaming to stabilise before mounting
+    const timer = setTimeout(() => {
+      // Tear down any previous mount
+      controllerRef.current?.destroy();
+      controllerRef.current = null;
+      setError(null);
+      setStepState(null);
+      let parsed: VizSpec;
+      try {
+        parsed = parseSpec(activeSpec);
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Invalid spec");
+        return;
+      }
+      ensureVizCss();
+      try {
+        if (parsed.steps?.length) {
+          // Step-through mode — custom implementation so each step is mounted
+          // with { panZoom: true }, making zoom/fit buttons work in step mode.
+          const steps = parsed.steps;
+          const total = steps.length;
+          let currentIndex = 0;
+          let currentMount: MountController | null = null;
+          let cancelled = false;
+          // Build a per-step VizSpec: merge node highlights, overlays, and
+          // include step-level signals as autoSignals so they auto-play on mount.
+          const buildStepSpec = (index: number): VizSpec => {
+            const step = steps[index];
+            const highlighted = new Set(step.highlight ?? []);
+            const nodes = parsed.nodes.map((n) =>
+              !highlighted.size || highlighted.has(n.id)
+                ? n
+                : {
+                    ...n,
+                    opacity:
+                      ((n as unknown as { opacity?: number }).opacity ?? 1) *
+                      0.3,
+                  },
+            );
+            const overlays = [
+              ...(parsed.overlays ?? []),
+              ...(step.overlays ?? []),
+            ];
+            return {
+              ...parsed,
+              nodes,
+              overlays: overlays.length ? overlays : undefined,
+              autoSignals: step.signals?.map((s) => ({ ...s, loop: false })),
+              steps: undefined,
+            };
+          };
+          // 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;
+            // 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;
+            const step = steps[index];
+            setStepState({
+              index,
+              total,
+              label: step.label ?? "",
+              isReady: false,
+            });
+            // Track non-looping signals to know when the step animation completes
+            const signals = (step.signals ?? []).filter((s) => !s.loop);
+            if (signals.length === 0) {
+              setStepState((prev) => prev && { ...prev, isReady: true });
+              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, 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);
+            }
+          };
+          goTo(0);
+          // Expose a StepController-shaped object for the nav buttons
+          controllerRef.current = {
+            next: () => goTo(currentIndex + 1),
+            prev: () => goTo(currentIndex - 1),
+            reset: () => goTo(0),
+            destroy: () => {
+              cancelled = true;
+              clearSignalTimer();
+              currentMount?.destroy();
+              currentMount = null;
+              mountControllerRef.current = null;
+            },
+          } as unknown as StepController;
+        } else {
+          // Auto-signal / static mode — inject maxWidth then mount with pan/zoom
+          const builder = fromSpec(parsed);
+          injectLabelMaxWidth(builder);
+          const ctrl = builder.mount(container, {
+            panZoom: true,
+            initialZoom: "fit",
+            minZoom: 0.1,
+            maxZoom: 8,
+          });
+          controllerRef.current = ctrl;
+        }
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to render");
+      }
+    }, 400);
+    return () => {
+      clearTimeout(timer);
+      controllerRef.current?.destroy();
+      controllerRef.current = null;
+      mountControllerRef.current = null;
+    };
+  }, [activeSpec]);
+  const handleNext = () => {
+    (controllerRef.current as StepController)?.next?.();
+  };
+  const handlePrev = () => {
+    (controllerRef.current as StepController)?.prev?.();
+  };
+  const handleRestart = () => {
+    (controllerRef.current as StepController)?.reset?.();
+  };
+  const panZoom = () =>
+    // Non-step mode: MountController is stored directly in controllerRef
+    // Step mode: each step's MountController is stored in mountControllerRef
+    ((controllerRef.current as MountController)?.panZoom ??
+      mountControllerRef.current?.panZoom) as PanZoomController | undefined;
+  const handleFitView = () => panZoom()?.fitToContent?.();
+  const handleZoomIn = () => {
+    const pz = panZoom();
+    if (!pz) return;
+    pz.setZoom(Math.min(pz.zoom * 1.3, 8));
+  };
+  const handleZoomOut = () => {
+    const pz = panZoom();
+    if (!pz) return;
+    pz.setZoom(Math.max(pz.zoom / 1.3, 0.1));
+  };
+  const isFirstStep = stepState?.index === 0;
+  const isLastStep =
+    stepState != null && stepState.index === stepState.total - 1;
+  return (
+    <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">
+          {/* Zoom out */}
+          <button
+            onClick={handleZoomOut}
+            title="Zoom out"
+            className="flex items-center justify-center w-6 h-6 rounded bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            <ZoomOut className="w-3.5 h-3.5" />
+          </button>
+          {/* Zoom in */}
+          <button
+            onClick={handleZoomIn}
+            title="Zoom in"
+            className="flex items-center justify-center w-6 h-6 rounded bg-slate-800 text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+          >
+            <ZoomIn className="w-3.5 h-3.5" />
+          </button>
+          {/* Divider */}
+          <span className="w-px h-3 bg-slate-700 mx-0.5" />
+          {/* Fit */}
+          <button
+            onClick={handleFitView}
+            title="Fit to view"
+            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"
+          >
+            <Maximize2 className="w-3 h-3" />
+            Fit
+          </button>
+        </div>
+      )}
+      {/* Canvas */}
+      <div className="relative">
+        {error ? (
+          <div className="p-3">
+            <div className="w-full bg-red-500/10 border border-red-500/20 rounded p-3">
+              <div className="flex items-center justify-between mb-1.5">
+                <p className="text-xs text-red-400">Viz error:</p>
+                <button
+                  onClick={handleFix}
+                  disabled={fixing}
+                  className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded bg-slate-700 text-slate-300 hover:bg-slate-600 disabled:opacity-50 transition-colors"
+                >
+                  {fixing ? (
+                    <>
+                      <Loader2 className="w-3 h-3 animate-spin" />
+                      Fixing…
+                    </>
+                  ) : (
+                    <>
+                      <RefreshCw className="w-3 h-3" />
+                      Fix diagram
+                    </>
+                  )}
+                </button>
+              </div>
+              <pre className="text-xs text-slate-400 whitespace-pre-wrap break-all">
+                {error}
+              </pre>
+            </div>
+          </div>
+        ) : (
+          <div
+            ref={containerRef}
+            className="viz-embed-host"
+            style={{ width: "100%", height: "360px" }}
+          />
+        )}
+      </div>
+      {/* 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">
+          {/* Prev */}
+          <button
+            onClick={handlePrev}
+            disabled={isFirstStep}
+            className="flex items-center gap-1 px-2.5 py-1 text-xs rounded bg-slate-700 text-slate-300 hover:bg-slate-600 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+          >
+            <ChevronLeft className="w-3.5 h-3.5" />
+            Prev
+          </button>
+          {/* Step label + counter */}
+          <div className="flex-1 text-center overflow-hidden">
+            <span className="text-[11px] text-slate-400 block truncate">
+              <span className="text-cyan-400 font-medium mr-1.5">
+                {stepState.index + 1} / {stepState.total}
+              </span>
+              {stepState.label}
+            </span>
+            {/* Progress dots */}
+            <div className="flex justify-center gap-1 mt-1">
+              {Array.from({ length: stepState.total }).map((_, i) => (
+                <span
+                  key={i}
+                  className={`inline-block rounded-full transition-all ${
+                    i === stepState.index
+                      ? "w-3 h-1.5 bg-cyan-400"
+                      : "w-1.5 h-1.5 bg-slate-600"
+                  }`}
+                />
+              ))}
+            </div>
+          </div>
+          {/* Next / Restart */}
+          {isLastStep ? (
+            <button
+              onClick={handleRestart}
+              className="flex items-center gap-1 px-2.5 py-1 text-xs rounded bg-slate-700 text-slate-300 hover:bg-slate-600 transition-colors"
+            >
+              <RotateCcw className="w-3.5 h-3.5" />
+              Restart
+            </button>
+          ) : (
+            <button
+              onClick={handleNext}
+              disabled={!stepState.isReady}
+              className="flex items-center gap-1 px-2.5 py-1 text-xs rounded bg-cyan-700 text-white hover:bg-cyan-600 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              Next
+              <ChevronRight className="w-3.5 h-3.5" />
+            </button>
+          )}
+        </div>
+      )}
+      {/* Refine panel */}
+      <div className="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>
+  );
+});