create-interview-cockpit 0.4.0 → 0.5.0

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

@@ -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

@@ -8,6 +8,9 @@ import {
   Loader2,
   ZoomIn,
   ZoomOut,
+  Send,
+  MessageSquare,
+  Undo2,
 } from "lucide-react";
 import { parse as parseYaml } from "yaml";
 import {
@@ -86,8 +89,24 @@ function ensureVizCss() {
   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 = raw.trim();
+  const trimmed = sanitizeSpecText(raw.trim());
   // Try JSON first, then YAML
   if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
     return JSON.parse(trimmed) as VizSpec;
@@ -139,9 +158,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 +171,16 @@ 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 }>
+  >([]);
 
   // Keep activeSpec in sync when the prop changes (streaming / message reload)
   useEffect(() => {
     setActiveSpec(spec);
+    setRefineHistory([]);
   }, [spec]);
 
   const handleFix = async () => {
@@ -174,6 +201,41 @@ 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));
+  };
+
   // 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 +307,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 +362,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 +391,7 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
             reset: () => goTo(0),
             destroy: () => {
               cancelled = true;
+              clearSignalTimer();
               currentMount?.destroy();
               currentMount = null;
               mountControllerRef.current = null;
@@ -497,6 +587,59 @@ export default memo(function VizCraftEmbed({ spec }: Props) {
           )}
         </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>
   );
 });

package/template/client/src/store.ts

@@ -11,6 +11,8 @@ const DEFAULT_AI_SETTINGS: AiSettings = {
     normal: { maxOutputTokens: 3000, maxSteps: 5 },
   },
   vizGuide: "",
+  alwaysSendPrefsDefault: false,
+  thinkingBudget: 0,
   promptGroups: {
     length: {
       label: "Response Length",
@@ -64,6 +66,7 @@ interface Store {
   showCodePanel: boolean;
   showSidebar: boolean;
   viewingFile: string | null;
+  viewingDoc: { fileId: string; quote: string; fileName: string } | null;
 
   // ── Workspaces ───────────────────────────────────────────────
   workspaces: WorkspaceMeta[];
@@ -136,18 +139,53 @@ interface Store {
     files: FileList | File[],
   ) => Promise<void>;
   removeTopicFile: (topicId: string, fileId: string) => Promise<void>;
+  linkFileToTopic: (
+    topicId: string,
+    fileId: string,
+    originalName: string,
+  ) => Promise<void>;
   uploadQuestionFiles: (
     questionId: string,
     files: FileList | File[],
   ) => Promise<void>;
   removeQuestionFile: (questionId: string, fileId: string) => Promise<void>;
+  linkFileToQuestion: (
+    questionId: string,
+    fileId: string,
+    originalName: string,
+  ) => Promise<void>;
+  saveCodeSnippetToQuestion: (
+    questionId: string,
+    code: string,
+    language: string,
+    label: string,
+    origin: "user" | "ai" | "sandbox",
+  ) => Promise<import("./types").ContextFile>;
   clearMessages: (questionId: string) => Promise<void>;
+
+  // ── Workspace Context Files ──────────────────────────────────
+  workspaceFiles: import("./types").ContextFile[];
+  fetchWorkspaceFiles: () => Promise<void>;
+  uploadWorkspaceFiles: (files: FileList | File[]) => Promise<void>;
+  removeWorkspaceFile: (fileId: string) => Promise<void>;
+
   updateQuestionSystemContext: (
     questionId: string,
     systemContext: string,
   ) => Promise<void>;
   openFileViewer: (path: string) => void;
   closeFileViewer: () => void;
+  openDocViewer: (fileId: string, quote: string, fileName: string) => void;
+  closeDocViewer: () => void;
+  /** Inline code blocks written by the AI, keyed by `inline:<id>` */
+  inlineCodeSnippets: Record<
+    string,
+    { content: string; language: string; label: string }
+  >;
+  registerInlineCode: (
+    id: string,
+    entry: { content: string; language: string; label: string },
+  ) => void;
   codeSnippets: CodeSnippet[];
   addSnippet: (snippet: CodeSnippet) => void;
   removeSnippet: (id: string) => void;
@@ -157,13 +195,51 @@ interface Store {
   aiSettings: AiSettings;
   fetchAiSettings: () => Promise<void>;
   saveAiSettings: (patch: Partial<AiSettings>) => Promise<void>;
+  /** The currently active preference suffix (LENGTH/STYLE/AUDIENCE/etc) built by ChatView. */
+  livePreferenceSuffix: string;
+  setLivePreferenceSuffix: (suffix: string) => void;
   showSettings: boolean;
   openSettings: () => void;
   closeSettings: () => void;
+
+  // ── Code Runner ──────────────────────────────────────────────
+  showCodeRunner: boolean;
+  /** Code pre-filled into the runner when opened */
+  runnerInitialCode: string;
+  /** Language hint — 'typescript' or 'javascript' */
+  runnerInitialLanguage: string;
+  /** When set, opens the runner in sandbox mode with these values pre-filled */
+  runnerInitialSandbox: {
+    serverCode: string;
+    serverLang: string;
+    clientCode: string;
+    clientLang: string;
+    fileId?: string;
+  } | null;
+  openCodeRunner: (code?: string, language?: string) => void;
+  openSandbox: (
+    serverCode: string,
+    serverLang: string,
+    clientCode: string,
+    clientLang: string,
+    fileId?: string,
+  ) => void;
+  overwriteContextFileContent: (
+    questionId: string,
+    fileId: string,
+    content: string,
+  ) => Promise<void>;
+  renameContextFile: (
+    questionId: string,
+    fileId: string,
+    label: string,
+  ) => Promise<void>;
+  closeCodeRunner: () => void;
 }
 
 export const useStore = create<Store>((set, get) => ({
   topics: [],
+  workspaceFiles: [],
   questionsByTopic: {},
   selectedTopicId: null,
   selectedQuestionId: null,
@@ -173,9 +249,16 @@ export const useStore = create<Store>((set, get) => ({
   showCodePanel: false,
   showSidebar: true,
   viewingFile: null,
+  viewingDoc: null,
+  inlineCodeSnippets: {},
   codeSnippets: [],
   aiSettings: DEFAULT_AI_SETTINGS,
+  livePreferenceSuffix: "",
   showSettings: false,
+  showCodeRunner: false,
+  runnerInitialCode: "",
+  runnerInitialLanguage: "typescript",
+  runnerInitialSandbox: null,
 
   // ── Workspaces ───────────────────────────────────────────────
   workspaces: [],
@@ -215,6 +298,8 @@ export const useStore = create<Store>((set, get) => ({
     });
     const topics = await api.fetchTopics();
     set({ topics });
+    const workspaceFiles = await api.fetchWorkspaceFiles();
+    set({ workspaceFiles });
   },
 
   deleteWorkspace: async (id) => {
@@ -506,6 +591,17 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
 
+  linkFileToTopic: async (topicId, fileId, originalName) => {
+    const cf = await api.linkFileToTopic(topicId, fileId, originalName);
+    set((s) => ({
+      topics: s.topics.map((t) =>
+        t.id === topicId
+          ? { ...t, contextFiles: [...(t.contextFiles || []), cf] }
+          : t,
+      ),
+    }));
+  },
+
   uploadQuestionFiles: async (questionId, files) => {
     const uploaded = await api.uploadQuestionFiles(questionId, files);
     set((s) => ({
@@ -537,6 +633,45 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
 
+  linkFileToQuestion: async (questionId, fileId, originalName) => {
+    const cf = await api.linkFileToQuestion(questionId, fileId, originalName);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: [...(s.currentQuestion.contextFiles || []), cf],
+            }
+          : s.currentQuestion,
+    }));
+  },
+
+  saveCodeSnippetToQuestion: async (
+    questionId,
+    code,
+    language,
+    label,
+    origin,
+  ) => {
+    const cf = await api.saveCodeSnippet(
+      questionId,
+      code,
+      language,
+      label,
+      origin,
+    );
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: [...(s.currentQuestion.contextFiles || []), cf],
+            }
+          : s.currentQuestion,
+    }));
+    return cf;
+  },
+
   clearMessages: async (questionId) => {
     await api.updateQuestion(questionId, { messages: [] });
     set((s) => ({
@@ -547,6 +682,23 @@ export const useStore = create<Store>((set, get) => ({
     }));
   },
 
+  fetchWorkspaceFiles: async () => {
+    const files = await api.fetchWorkspaceFiles();
+    set({ workspaceFiles: files });
+  },
+
+  uploadWorkspaceFiles: async (files) => {
+    const uploaded = await api.uploadWorkspaceFiles(files);
+    set((s) => ({ workspaceFiles: [...s.workspaceFiles, ...uploaded] }));
+  },
+
+  removeWorkspaceFile: async (fileId) => {
+    await api.deleteWorkspaceFile(fileId);
+    set((s) => ({
+      workspaceFiles: s.workspaceFiles.filter((f) => f.id !== fileId),
+    }));
+  },
+
   updateQuestionSystemContext: async (questionId, systemContext) => {
     const updated = await api.updateQuestion(questionId, { systemContext });
     set((s) => ({
@@ -568,6 +720,53 @@ export const useStore = create<Store>((set, get) => ({
 
   openFileViewer: (path) => set({ viewingFile: path }),
   closeFileViewer: () => set({ viewingFile: null }),
+  registerInlineCode: (id, entry) =>
+    set((s) => ({
+      inlineCodeSnippets: { ...s.inlineCodeSnippets, [id]: entry },
+    })),
+  openDocViewer: (fileId, quote, fileName) =>
+    set({ viewingDoc: { fileId, quote, fileName } }),
+  closeDocViewer: () => set({ viewingDoc: null }),
+  openCodeRunner: (code = "", language = "typescript") =>
+    set({
+      showCodeRunner: true,
+      runnerInitialCode: code,
+      runnerInitialLanguage: language,
+      runnerInitialSandbox: null,
+    }),
+  openSandbox: (serverCode, serverLang, clientCode, clientLang, fileId?) =>
+    set({
+      showCodeRunner: true,
+      runnerInitialCode: "",
+      runnerInitialLanguage: "typescript",
+      runnerInitialSandbox: {
+        serverCode,
+        serverLang,
+        clientCode,
+        clientLang,
+        fileId,
+      },
+    }),
+
+  overwriteContextFileContent: async (questionId, fileId, content) => {
+    await api.overwriteContextFileContent(questionId, fileId, content);
+  },
+
+  renameContextFile: async (questionId, fileId, label) => {
+    const cf = await api.renameContextFile(questionId, fileId, label);
+    set((s) => ({
+      currentQuestion:
+        s.currentQuestion?.id === questionId
+          ? {
+              ...s.currentQuestion,
+              contextFiles: (s.currentQuestion.contextFiles || []).map((f) =>
+                f.id === fileId ? { ...f, label: cf.label, name: cf.name } : f,
+              ),
+            }
+          : s.currentQuestion,
+    }));
+  },
+  closeCodeRunner: () => set({ showCodeRunner: false }),
 
   fetchAiSettings: async () => {
     const settings = await api.fetchAiSettings();
@@ -579,6 +778,8 @@ export const useStore = create<Store>((set, get) => ({
     set({ aiSettings: updated });
   },
 
+  setLivePreferenceSuffix: (suffix) => set({ livePreferenceSuffix: suffix }),
+
   openSettings: () => set({ showSettings: true }),
   closeSettings: () => set({ showSettings: false }),
 }));

package/template/client/src/types.ts

@@ -4,6 +4,14 @@ export interface ContextFile {
   originalName: string;
   driveFileId?: string;
   createdAt: string;
+  /** Distinguishes how this file was added. 'upload' = user-uploaded doc,
+   *  'user' = code saved from Code Runner, 'ai' = AI-generated code block,
+   *  'sandbox' = paired server+client sandbox saved as JSON. */
+  origin?: "user" | "ai" | "upload" | "sandbox";
+  /** Language hint for code snippets (e.g. 'typescript', 'javascript'). */
+  language?: string;
+  /** Short display label for code snippets. */
+  label?: string;
 }
 
 export interface WorkspaceMeta {

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.3.0"
+  "version": "0.4.0"
 }

package/template/package.json

@@ -6,7 +6,7 @@
     "dev": "concurrently -n server,client -c blue,green \"npm run dev --prefix server\" \"npm run dev --prefix client\"",
     "build": "npm run build --prefix client",
     "start": "npm run start --prefix server",
-    "sync:template": "npx create-interview-cockpit upgrade"
+    "sync:template": "node scripts/sync-template.js"
   },
   "devDependencies": {
     "concurrently": "^9.1.0"