create-interview-cockpit 0.17.1 → 0.17.3

package/package.json

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

package/template/client/src/api.ts

@@ -2,6 +2,7 @@ import type {
   Topic,
   Question,
   ContextFile,
+  ContextFileOrigin,
   WorkspacesRegistry,
   InfraLabWorkspace,
 } from "./types";
@@ -342,15 +343,7 @@ export async function saveCodeSnippet(
   code: string,
   language: string,
   label: string,
-  origin:
-    | "user"
-    | "ai"
-    | "sandbox"
-    | "browser-security"
-    | "infra"
-    | "react"
-    | "nextjs"
-    | "module-federation",
+  origin: Exclude<ContextFileOrigin, "upload">,
 ): Promise<ContextFile> {
   const res = await fetch(`${BASE}/questions/${questionId}/save-code-snippet`, {
     method: "POST",

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

@@ -27,6 +27,7 @@ interface Props {
     newSpec: string,
   ) => void;
   onDeleteMessage?: (messageId: string) => void;
+  isStreaming?: boolean;
 }
 
 function getTextContent(message: UIMessage): string {
@@ -90,10 +91,11 @@ const ChatMessage = memo(function ChatMessage({
   preferenceSuffix,
   onSpecRefined,
   onDeleteMessage,
+  isStreaming = false,
 }: Props) {
   const isUser = message.role === "user";
   const content = getTextContent(message);
-  const reasoning = !isUser ? getReasoningContent(message) : "";
+  const reasoning = !isUser && !isStreaming ? getReasoningContent(message) : "";
   const [copied, setCopied] = useState(false);
 
   // Stable wrappers so MarkdownRenderer's `components` useMemo doesn't invalidate
@@ -196,19 +198,26 @@ const ChatMessage = memo(function ChatMessage({
           ) : (
             <>
               {reasoning && <ThinkingBlock reasoning={reasoning} />}
-              <TextAnnotator
-                content={content}
-                messageId={message.id}
-                annotations={annotations}
-                onAnnotationCreate={onAnnotationCreate ?? (() => {})}
-                onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
-                bookmarkedBlockIndex={bookmarkedBlockIndex}
-                onBookmarkBlock={
-                  onSetBookmark ? stableBookmarkBlock : undefined
-                }
-                preferenceSuffix={preferenceSuffix}
-                onSpecRefined={onSpecRefined ? stableSpecRefined : undefined}
-              />
+              {isStreaming ? (
+                <div className="whitespace-pre-wrap break-words text-slate-200">
+                  {content}
+                  <span className="ml-1 inline-block h-3 w-1 animate-pulse rounded-sm bg-cyan-400/70 align-middle" />
+                </div>
+              ) : (
+                <TextAnnotator
+                  content={content}
+                  messageId={message.id}
+                  annotations={annotations}
+                  onAnnotationCreate={onAnnotationCreate ?? (() => {})}
+                  onAnnotationUpdate={onAnnotationUpdate ?? (() => {})}
+                  bookmarkedBlockIndex={bookmarkedBlockIndex}
+                  onBookmarkBlock={
+                    onSetBookmark ? stableBookmarkBlock : undefined
+                  }
+                  preferenceSuffix={preferenceSuffix}
+                  onSpecRefined={onSpecRefined ? stableSpecRefined : undefined}
+                />
+              )}
             </>
           )}
         </div>

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

@@ -227,6 +227,11 @@ const ChatTranscript = memo(function ChatTranscript({
               preferenceSuffix={preferenceSuffix}
               onSpecRefined={onSpecRefined}
               onDeleteMessage={!isLoading ? onDeleteMessage : undefined}
+              isStreaming={
+                status === "streaming" &&
+                message.role === "assistant" &&
+                message.id === messages[messages.length - 1]?.id
+              }
             />
           </div>
         ))}
@@ -504,6 +509,7 @@ export default function ChatView({ question }: Props) {
     id: question.id,
     transport,
     messages: initialMessages,
+    experimental_throttle: 80,
     onError: handleChatError,
     onFinish: handleChatFinish,
   });
@@ -542,6 +548,7 @@ export default function ChatView({ question }: Props) {
   // Only show the Continue button if the last assistant message looks truncated
   // (doesn't end with sentence-terminating punctuation or a closing code fence).
   const lastResponseLooksTruncated = useMemo(() => {
+    if (status !== "ready") return false;
     if (messages.length === 0) return false;
     const last = messages[messages.length - 1];
     if (last.role !== "assistant") return false;
@@ -562,7 +569,7 @@ export default function ChatView({ question }: Props) {
     const lastLine = (lines.filter(Boolean).pop() ?? "").trimEnd();
     // Complete if ends with sentence punctuation or structural close chars
     return !/[.!?`\])>]$/.test(lastLine);
-  }, [messages]);
+  }, [messages, status]);
 
   // Smooth scroll to bottom whenever a NEW message is added (length changes).
   // Using messages.length instead of the full messages array avoids firing on

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

@@ -1,6 +1,7 @@
 import {
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
   useLayoutEffect,
@@ -36,7 +37,12 @@ import {
 import { useStore } from "../store";
 import Editor from "react-simple-code-editor";
 import MonacoEditorLib from "@monaco-editor/react";
-import type { OnMount, BeforeMount, Monaco } from "@monaco-editor/react";
+import type {
+  OnMount,
+  BeforeMount,
+  Monaco,
+  OnChange,
+} from "@monaco-editor/react";
 import { setupTypeAcquisition } from "@typescript/ata";
 import ts from "typescript";
 import Prism from "prismjs";
@@ -430,8 +436,17 @@ function MonacoEditorWrapper({
 }) {
   const fontSizePx = parseInt(fontSize) || 12;
   const monacoRef = useRef<Monaco | null>(null);
+  const onChangeRef = useRef(onChange);
   const { initATA, acquireTypes } = useATA(monacoRef);
 
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  const handleEditorChange = useCallback<OnChange>((val) => {
+    onChangeRef.current(val ?? "");
+  }, []);
+
   const handleBeforeMount: BeforeMount = (monaco) => {
     monacoRef.current = monaco;
 
@@ -659,7 +674,8 @@ declare module 'next/server' {
 
   // Re-scan for new imports whenever code changes
   useEffect(() => {
-    acquireTypes(value);
+    const id = window.setTimeout(() => acquireTypes(value), 400);
+    return () => window.clearTimeout(id);
   }, [value, acquireTypes]);
 
   const modelPath =
@@ -669,6 +685,30 @@ declare module 'next/server' {
         : `file:///${path.replace(/^\/+/, "")}`
       : undefined;
 
+  const editorOptions = useMemo(
+    () => ({
+      fontSize: fontSizePx,
+      fontFamily: EDITOR_FONT,
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      lineNumbers: "on" as const,
+      glyphMargin: false,
+      folding: false,
+      lineDecorationsWidth: 4,
+      lineNumbersMinChars: 3,
+      renderLineHighlight: "line" as const,
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      overviewRulerBorder: false,
+      scrollbar: { vertical: "auto" as const, horizontal: "auto" as const },
+      padding: { top: 8, bottom: 8 },
+      wordWrap: "off" as const,
+      automaticLayout: true,
+      placeholder,
+    }),
+    [fontSizePx, placeholder],
+  );
+
   return (
     <div className="absolute inset-0">
       <MonacoEditorLib
@@ -678,30 +718,11 @@ declare module 'next/server' {
         language={language.includes("typescript") ? "typescript" : "javascript"}
         path={modelPath}
         theme="vs-dark"
-        value={value}
-        onChange={(val) => onChange(val ?? "")}
+        defaultValue={value}
+        onChange={handleEditorChange}
         beforeMount={handleBeforeMount}
         onMount={handleMount}
-        options={{
-          fontSize: fontSizePx,
-          fontFamily: EDITOR_FONT,
-          minimap: { enabled: false },
-          scrollBeyondLastLine: false,
-          lineNumbers: "on",
-          glyphMargin: false,
-          folding: false,
-          lineDecorationsWidth: 4,
-          lineNumbersMinChars: 3,
-          renderLineHighlight: "line",
-          overviewRulerLanes: 0,
-          hideCursorInOverviewRuler: true,
-          overviewRulerBorder: false,
-          scrollbar: { vertical: "auto", horizontal: "auto" },
-          padding: { top: 8, bottom: 8 },
-          wordWrap: "off",
-          automaticLayout: true,
-          placeholder,
-        }}
+        options={editorOptions}
       />
     </div>
   );
@@ -2574,6 +2595,18 @@ export default function CodeRunnerModal() {
         : clientType === "module-federation"
           ? "module-federation"
           : "react";
+    let pendingDelta = "";
+    let flushTimer: number | null = null;
+    const flushPendingDelta = () => {
+      if (!pendingDelta || abort.aborted) return;
+      const chunk = pendingDelta;
+      pendingDelta = "";
+      setSbxChatMessages((prev) =>
+        prev.map((m) =>
+          m.id === aId ? { ...m, content: m.content + chunk } : m,
+        ),
+      );
+    };
     try {
       const history = [...sbxChatMessages, userMsg].map((m) => ({
         role: m.role,
@@ -2589,14 +2622,17 @@ export default function CodeRunnerModal() {
         },
         (delta) => {
           if (abort.aborted) return;
-          setSbxChatMessages((prev) =>
-            prev.map((m) =>
-              m.id === aId ? { ...m, content: m.content + delta } : m,
-            ),
-          );
+          pendingDelta += delta;
+          if (flushTimer !== null) return;
+          flushTimer = window.setTimeout(() => {
+            flushTimer = null;
+            flushPendingDelta();
+          }, 80);
         },
       );
+      flushPendingDelta();
     } catch (err: unknown) {
+      flushPendingDelta();
       if (!abort.aborted)
         setSbxChatMessages((prev) =>
           prev.map((m) =>
@@ -2606,6 +2642,7 @@ export default function CodeRunnerModal() {
           ),
         );
     } finally {
+      if (flushTimer !== null) window.clearTimeout(flushTimer);
       if (!abort.aborted) setSbxChatLoading(false);
     }
   }, [
@@ -7016,7 +7053,7 @@ export default function CodeRunnerModal() {
                       )}
                     </p>
                   )}
-                  {sbxChatMessages.map((msg) => (
+                  {sbxChatMessages.map((msg, index) => (
                     <div
                       key={msg.id}
                       className={`flex flex-col gap-0.5 ${msg.role === "user" ? "items-end" : "items-start"}`}
@@ -7031,67 +7068,76 @@ export default function CodeRunnerModal() {
                         {msg.role === "user" ? (
                           msg.content
                         ) : msg.content ? (
-                          <ReactMarkdown
-                            remarkPlugins={[remarkGfm]}
-                            components={{
-                              code({ className, children, ...props }) {
-                                const isBlock =
-                                  className?.startsWith("language-");
-                                return isBlock ? (
-                                  <pre className="bg-slate-900/80 rounded p-2 overflow-x-auto my-1">
+                          sbxChatLoading &&
+                          msg.role === "assistant" &&
+                          index === sbxChatMessages.length - 1 ? (
+                            <div className="whitespace-pre-wrap break-words">
+                              {msg.content}
+                              <span className="ml-1 inline-block h-2.5 w-1 animate-pulse rounded-sm bg-violet-400/70 align-middle" />
+                            </div>
+                          ) : (
+                            <ReactMarkdown
+                              remarkPlugins={[remarkGfm]}
+                              components={{
+                                code({ className, children, ...props }) {
+                                  const isBlock =
+                                    className?.startsWith("language-");
+                                  return isBlock ? (
+                                    <pre className="bg-slate-900/80 rounded p-2 overflow-x-auto my-1">
+                                      <code
+                                        className={`${className ?? ""} text-[11px]`}
+                                        {...props}
+                                      >
+                                        {children}
+                                      </code>
+                                    </pre>
+                                  ) : (
                                     <code
-                                      className={`${className ?? ""} text-[11px]`}
+                                      className="bg-slate-900/60 px-1 rounded text-violet-300 text-[11px]"
                                       {...props}
                                     >
                                       {children}
                                     </code>
-                                  </pre>
-                                ) : (
-                                  <code
-                                    className="bg-slate-900/60 px-1 rounded text-violet-300 text-[11px]"
-                                    {...props}
-                                  >
-                                    {children}
-                                  </code>
-                                );
-                              },
-                              p({ children }) {
-                                return (
-                                  <p className="mb-1 last:mb-0">{children}</p>
-                                );
-                              },
-                              ul({ children }) {
-                                return (
-                                  <ul className="list-disc list-inside mb-1 space-y-0.5">
-                                    {children}
-                                  </ul>
-                                );
-                              },
-                              ol({ children }) {
-                                return (
-                                  <ol className="list-decimal list-inside mb-1 space-y-0.5">
-                                    {children}
-                                  </ol>
-                                );
-                              },
-                              h2({ children }) {
-                                return (
-                                  <h2 className="text-xs font-semibold text-slate-200 mt-2 mb-0.5">
-                                    {children}
-                                  </h2>
-                                );
-                              },
-                              h3({ children }) {
-                                return (
-                                  <h3 className="text-xs font-semibold text-slate-300 mt-1.5 mb-0.5">
-                                    {children}
-                                  </h3>
-                                );
-                              },
-                            }}
-                          >
-                            {msg.content}
-                          </ReactMarkdown>
+                                  );
+                                },
+                                p({ children }) {
+                                  return (
+                                    <p className="mb-1 last:mb-0">{children}</p>
+                                  );
+                                },
+                                ul({ children }) {
+                                  return (
+                                    <ul className="list-disc list-inside mb-1 space-y-0.5">
+                                      {children}
+                                    </ul>
+                                  );
+                                },
+                                ol({ children }) {
+                                  return (
+                                    <ol className="list-decimal list-inside mb-1 space-y-0.5">
+                                      {children}
+                                    </ol>
+                                  );
+                                },
+                                h2({ children }) {
+                                  return (
+                                    <h2 className="text-xs font-semibold text-slate-200 mt-2 mb-0.5">
+                                      {children}
+                                    </h2>
+                                  );
+                                },
+                                h3({ children }) {
+                                  return (
+                                    <h3 className="text-xs font-semibold text-slate-300 mt-1.5 mb-0.5">
+                                      {children}
+                                    </h3>
+                                  );
+                                },
+                              }}
+                            >
+                              {msg.content}
+                            </ReactMarkdown>
+                          )
                         ) : (
                           <span className="flex items-center gap-1.5 text-slate-500">
                             <Loader2 className="w-3 h-3 animate-spin" />{" "}

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

@@ -365,7 +365,7 @@ export default function InfraLabModal() {
     };
   }, [activeInfraId]);
 
-  const runInfra = async (action: InfraRunAction) => {
+  const runInfra = async (action: Exclude<InfraRunAction, "command">) => {
     if (!currentQuestion) return;
 
     setRunError(null);

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

@@ -15,6 +15,7 @@ import {
   Loader2,
 } from "lucide-react";
 import { useStore } from "../store";
+import type { DriveFolder } from "../api";
 import type { WorkspaceMeta } from "../types";
 
 // ── Workspace Switcher ─────────────────────────────────────────────────────────
@@ -78,7 +79,7 @@ export default function WorkspaceSwitcher() {
   // Subfolder picker state (export destination)
   const [folderPicker, setFolderPicker] = useState<{
     ws: WorkspaceMeta;
-    folders: { id: string; name: string }[];
+    folders: DriveFolder[];
     loading: boolean;
   } | null>(null);
   const [newFolderName, setNewFolderName] = useState("");
@@ -370,7 +371,7 @@ export default function WorkspaceSwitcher() {
                         folderPicker.ws.id,
                         name,
                       );
-                      if ("needsAuth" in created && created.needsAuth) {
+                      if ("needsAuth" in created) {
                         window.location.href = created.authUrl;
                         return;
                       }

package/template/client/src/store.ts

@@ -6,6 +6,7 @@ import type {
   WorkspaceMeta,
   InfraLabWorkspace,
   FrontendLabWorkspace,
+  ContextFileOrigin,
 } from "./types";
 import type { AiSettings } from "./api";
 import * as api from "./api";
@@ -216,16 +217,7 @@ interface Store {
     code: string,
     language: string,
     label: string,
-    origin:
-      | "user"
-      | "ai"
-      | "sandbox"
-      | "browser-security"
-      | "infra"
-      | "react"
-      | "nextjs"
-      | "module-federation"
-      | "canvas",
+    origin: Exclude<ContextFileOrigin, "upload">,
   ) => Promise<import("./types").ContextFile>;
   clearMessages: (questionId: string) => Promise<void>;
 

package/template/client/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/browsersecuritylabmodal.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/deploymentlabmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/labspanel.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"errors":true,"version":"5.9.3"}
+{"root":["./src/app.tsx","./src/api.ts","./src/browsersecuritytemplates.ts","./src/infralab.ts","./src/main.tsx","./src/reactlab.ts","./src/store.ts","./src/types.ts","./src/vite-env.d.ts","./src/components/aisettingsmodal.tsx","./src/components/annotationdialog.tsx","./src/components/browsersecuritylabmodal.tsx","./src/components/canvaslabmodal.tsx","./src/components/chatmessage.tsx","./src/components/chatview.tsx","./src/components/codecontextpanel.tsx","./src/components/codelineannotationpopup.tsx","./src/components/coderunnermodal.tsx","./src/components/deploymentlabmodal.tsx","./src/components/docrefmodal.tsx","./src/components/fileattachments.tsx","./src/components/filepickermodal.tsx","./src/components/fileviewermodal.tsx","./src/components/infralabmodal.tsx","./src/components/labspanel.tsx","./src/components/linkedconvospicker.tsx","./src/components/markdownrenderer.tsx","./src/components/mermaiddiagram.tsx","./src/components/notesmodal.tsx","./src/components/plotembed.tsx","./src/components/sidebar.tsx","./src/components/textannotator.tsx","./src/components/vizcraftembed.tsx","./src/components/workspaceswitcher.tsx"],"version":"5.9.3"}

package/template/cockpit.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.16.0"
+  "version": "0.17.1"
 }