create-interview-cockpit 0.4.0 → 0.5.0

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

@@ -1,12 +1,12 @@
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { useMemo, useRef, useEffect } from "react";
+import { useMemo, useRef, useEffect, useState } from "react";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
 import MermaidDiagram from "./MermaidDiagram";
 import VizCraftEmbed from "./VizCraftEmbed";
 import { useStore } from "../store";
-import { Bookmark } from "lucide-react";
+import { Bookmark, ExternalLink, Play, Save, Check } from "lucide-react";
 
 import type { Components } from "react-markdown";
 
@@ -15,6 +15,140 @@ interface Props {
   onAnnotationClick?: (annotId: string, rect: DOMRect) => void;
   bookmarkedBlockIndex?: number;
   onBookmarkBlock?: (blockIndex: number) => void;
+  onSpecRefined?: (originalSpec: string, newSpec: string) => void;
+}
+
+// ── Inline code block (AI-written code that can be opened in FileViewerModal) ──
+// Parses an optional `// @ref: some-id` first-line directive so the AI can link
+// back to this block anywhere in its response via [Label](inlineref://some-id).
+function InlineCodeBlock({
+  codeString,
+  language,
+}: {
+  codeString: string;
+  language: string;
+}) {
+  const registerInlineCode = useStore((s) => s.registerInlineCode);
+  const openFileViewer = useStore((s) => s.openFileViewer);
+  const openCodeRunner = useStore((s) => s.openCodeRunner);
+  const currentQuestion = useStore((s) => s.currentQuestion);
+  const saveCodeSnippetToQuestion = useStore(
+    (s) => s.saveCodeSnippetToQuestion,
+  );
+  const [savedAi, setSavedAi] = useState<boolean>(false);
+
+  // Parse optional @ref directive on first line (strips it from display)
+  const parsed = useMemo(() => {
+    const firstLine = codeString.split("\n")[0]?.trim() ?? "";
+    const refMatch = firstLine.match(/^(?:\/\/|#|--)\s*@ref:\s*(.+)$/);
+    if (refMatch) {
+      const label = refMatch[1].trim();
+      return {
+        id: `inline:${label}`,
+        label,
+        displayCode: codeString.split("\n").slice(1).join("\n"),
+      };
+    }
+    return { id: null, label: `${language} snippet`, displayCode: codeString };
+  }, [codeString, language]);
+
+  // Stable UUID for blocks without an explicit @ref
+  const stableIdRef = useRef(`inline:${crypto.randomUUID()}`);
+  const finalId = parsed.id ?? stableIdRef.current;
+
+  // Register on mount when there is an explicit @ref so inlineref:// links resolve
+  useEffect(() => {
+    if (parsed.id) {
+      registerInlineCode(parsed.id, {
+        content: parsed.displayCode,
+        language,
+        label: parsed.label,
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsed.id]);
+
+  const handlePopout = () => {
+    registerInlineCode(finalId, {
+      content: parsed.displayCode,
+      language,
+      label: parsed.label,
+    });
+    openFileViewer(finalId);
+  };
+
+  const handleRun = () => {
+    const runLang =
+      language === "typescript" || language === "tsx"
+        ? "typescript"
+        : "javascript";
+    openCodeRunner(parsed.displayCode, runLang);
+  };
+
+  const handleSaveAi = async () => {
+    if (!currentQuestion || savedAi) return;
+    await saveCodeSnippetToQuestion(
+      currentQuestion.id,
+      parsed.displayCode,
+      language,
+      parsed.label,
+      "ai",
+    );
+    setSavedAi(true);
+    setTimeout(() => setSavedAi(false), 2000);
+  };
+
+  return (
+    <div className="relative group/codeblock">
+      <div className="absolute right-1.5 top-1.5 z-10 flex items-center gap-0.5 opacity-0 group-hover/codeblock:opacity-100 transition-all">
+        <button
+          type="button"
+          onClick={handleRun}
+          className="p-1 rounded bg-slate-700/80 hover:bg-slate-600/90 text-slate-400 hover:text-emerald-400 transition-colors"
+          title="Run in code runner"
+        >
+          <Play className="w-3.5 h-3.5" />
+        </button>
+        {currentQuestion && (
+          <button
+            type="button"
+            onClick={handleSaveAi}
+            className={`p-1 rounded bg-slate-700/80 hover:bg-slate-600/90 transition-colors ${
+              savedAi ? "text-cyan-400" : "text-slate-400 hover:text-cyan-400"
+            }`}
+            title="Save to question context"
+          >
+            {savedAi ? (
+              <Check className="w-3.5 h-3.5" />
+            ) : (
+              <Save className="w-3.5 h-3.5" />
+            )}
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handlePopout}
+          className="p-1 rounded bg-slate-700/80 hover:bg-slate-600/90 text-slate-400 hover:text-violet-400 transition-colors"
+          title="Open in code viewer"
+        >
+          <ExternalLink className="w-3.5 h-3.5" />
+        </button>
+      </div>
+      <SyntaxHighlighter
+        style={oneDark}
+        language={language}
+        PreTag="div"
+        customStyle={{
+          margin: "0.5rem 0",
+          borderRadius: "0.5rem",
+          fontSize: "0.8rem",
+          background: "#1e293b",
+        }}
+      >
+        {parsed.displayCode}
+      </SyntaxHighlighter>
+    </div>
+  );
 }
 
 const markdownComponents: Components = {
@@ -179,8 +313,10 @@ export default function MarkdownRenderer({
   onAnnotationClick,
   bookmarkedBlockIndex,
   onBookmarkBlock,
+  onSpecRefined,
 }: Props) {
   const openFileViewer = useStore((s) => s.openFileViewer);
+  const openDocViewer = useStore((s) => s.openDocViewer);
   const bookmarkElemRef = useRef<HTMLDivElement | null>(null);
 
   // Scroll the bookmarked block into view when the bookmark changes or on mount
@@ -237,6 +373,27 @@ export default function MarkdownRenderer({
 
     return {
       ...markdownComponents,
+      // Override the code renderer so viz blocks get the onSpecRefined callback
+      code({ className, children, ...props }) {
+        const match = /language-(\w+)/.exec(className || "");
+        const codeString = String(children).replace(/\n$/, "");
+        if (match) {
+          const lang = match[1];
+          if (lang === "mermaid") return <MermaidDiagram chart={codeString} />;
+          if (lang === "viz")
+            return (
+              <VizCraftEmbed spec={codeString} onSpecRefined={onSpecRefined} />
+            );
+          // Fenced code block: render with pop-out button
+          return <InlineCodeBlock codeString={codeString} language={lang} />;
+        }
+        // Delegate to the static handler for inline code / unsupported langs
+        return (markdownComponents.code as Function)({
+          className,
+          children,
+          ...props,
+        });
+      },
       p({ children, node }) {
         return wrapBlock(
           (node as any)?.position?.start?.line,
@@ -288,6 +445,35 @@ export default function MarkdownRenderer({
             </span>
           );
         }
+        if (href?.startsWith("docref://")) {
+          const withoutScheme = href.slice("docref://".length);
+          const qIdx = withoutScheme.indexOf("?");
+          const fileId =
+            qIdx === -1 ? withoutScheme : withoutScheme.slice(0, qIdx);
+          const params = new URLSearchParams(
+            qIdx === -1 ? "" : withoutScheme.slice(qIdx + 1),
+          );
+          const fileName = params.has("n")
+            ? decodeURIComponent(params.get("n")!)
+            : "Document";
+          const quote = String(
+            typeof children === "string"
+              ? children
+              : Array.isArray(children)
+                ? children.join("")
+                : "",
+          ).trim();
+          return (
+            <button
+              type="button"
+              onClick={() => openDocViewer(fileId, quote, fileName)}
+              className="inline-flex items-center gap-1 text-emerald-400 hover:text-emerald-300 underline decoration-emerald-500/50 underline-offset-2 transition-colors text-[0.85em]"
+              title={`View in ${fileName}`}
+            >
+              {children}
+            </button>
+          );
+        }
         if (href?.startsWith("coderef://")) {
           const filePath = href.slice("coderef://".length);
           return (
@@ -301,6 +487,19 @@ export default function MarkdownRenderer({
             </button>
           );
         }
+        if (href?.startsWith("inlineref://")) {
+          const id = `inline:${href.slice("inlineref://".length)}`;
+          return (
+            <button
+              type="button"
+              onClick={() => openFileViewer(id)}
+              className="inline-flex items-center gap-1 text-violet-400 hover:text-violet-300 underline decoration-violet-500/50 underline-offset-2 transition-colors font-mono text-[0.8em]"
+              title="Open inline code block"
+            >
+              {children}
+            </button>
+          );
+        }
         return (
           <a
             href={href}
@@ -316,8 +515,10 @@ export default function MarkdownRenderer({
   }, [
     onAnnotationClick,
     openFileViewer,
+    openDocViewer,
     bookmarkedBlockIndex,
     onBookmarkBlock,
+    onSpecRefined,
   ]);
 
   return (
@@ -328,6 +529,8 @@ export default function MarkdownRenderer({
         // Allow our internal schemes; block javascript: for safety
         if (url.startsWith("annot://")) return url;
         if (url.startsWith("coderef://")) return url;
+        if (url.startsWith("docref://")) return url;
+        if (url.startsWith("inlineref://")) return url;
         if (url.startsWith("javascript:")) return "";
         return url;
       }}

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

@@ -16,6 +16,7 @@ import {
   Loader2,
   ArrowLeft,
   RefreshCw,
+  Globe,
 } from "lucide-react";
 
 export default function Sidebar() {
@@ -36,6 +37,7 @@ export default function Sidebar() {
     fetchQuestions,
     uploadTopicFiles,
     removeTopicFile,
+    linkFileToTopic,
     workspaces,
     activeWorkspaceId,
     driveRootFolders,
@@ -44,6 +46,9 @@ export default function Sidebar() {
     selectDriveSubfolder,
     clearDriveSubfolder,
     syncWorkspace,
+    workspaceFiles,
+    uploadWorkspaceFiles,
+    removeWorkspaceFile,
   } = useStore();
 
   const [newTopicName, setNewTopicName] = useState("");
@@ -58,6 +63,18 @@ export default function Sidebar() {
     null,
   );
   const [editingQuestionTitle, setEditingQuestionTitle] = useState("");
+  const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
+    new Set(),
+  );
+
+  const toggleQuestionCollapse = (questionId: string) => {
+    setCollapsedQuestions((prev) => {
+      const next = new Set(prev);
+      if (next.has(questionId)) next.delete(questionId);
+      else next.add(questionId);
+      return next;
+    });
+  };
   const editInputRef = useRef<HTMLInputElement>(null);
 
   // Drive subfolder navigator
@@ -72,6 +89,7 @@ export default function Sidebar() {
     : null;
   const [navigating, setNavigating] = useState(false);
   const [syncing, setSyncing] = useState(false);
+  const [wsFilesExpanded, setWsFilesExpanded] = useState(true);
 
   // Load root folders whenever a Drive workspace becomes active with no subfolder selected
   useEffect(() => {
@@ -159,100 +177,208 @@ export default function Sidebar() {
   const renderQuestionRow = (
     q: Question,
     topicId: string,
-    isChild: boolean,
-  ) => (
-    <div
-      key={q.id}
-      className={`group flex items-center gap-1.5 ${
-        isChild ? "pl-7" : "pl-3"
-      } pr-2 py-1 cursor-pointer transition-colors ${
-        selectedQuestionId === q.id
-          ? "bg-cyan-500/10 border-l-2 border-l-cyan-500 -ml-px"
-          : "hover:bg-slate-800/30"
-      }`}
-      onClick={() =>
-        editingQuestionId !== q.id && selectQuestion(topicId, q.id)
-      }
-    >
-      {isChild && (
-        <span className="text-slate-600 text-[11px] shrink-0 leading-none select-none mr-0.5">
-          └
-        </span>
-      )}
-      <MessageSquare className="w-3 h-3 text-slate-600 shrink-0" />
-      {editingQuestionId === q.id ? (
-        <input
-          ref={editInputRef}
-          value={editingQuestionTitle}
-          onChange={(e) => setEditingQuestionTitle(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") commitQuestionRename(q.id, topicId);
-            if (e.key === "Escape") setEditingQuestionId(null);
-          }}
-          onBlur={() => commitQuestionRename(q.id, topicId)}
-          onClick={(e) => e.stopPropagation()}
-          className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-xs text-slate-200 focus:outline-none"
-        />
-      ) : (
-        <span
-          className="text-xs text-slate-400 truncate flex-1"
-          onDoubleClick={(e) => {
-            e.stopPropagation();
-            setEditingQuestionId(q.id);
-            setEditingQuestionTitle(q.title);
-          }}
-        >
-          {q.title}
+    depth: number,
+    hasChildren: boolean,
+    isCollapsed: boolean,
+    onToggleCollapse: () => void,
+  ) => {
+    // 12px base left padding + 16px per depth level
+    const paddingLeft = 12 + depth * 16;
+    return (
+      <div
+        key={q.id}
+        className={`group flex items-center gap-1.5 pr-2 py-1 cursor-pointer transition-colors ${
+          selectedQuestionId === q.id
+            ? "bg-cyan-500/10 border-l-2 border-l-cyan-500 -ml-px"
+            : "hover:bg-slate-800/30"
+        }`}
+        style={{ paddingLeft }}
+        onClick={() =>
+          editingQuestionId !== q.id && selectQuestion(topicId, q.id)
+        }
+      >
+        {depth > 0 && (
+          <span className="text-slate-600 text-[11px] shrink-0 leading-none select-none mr-0.5">
+            └
+          </span>
+        )}
+        {hasChildren ? (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleCollapse();
+            }}
+            className="shrink-0 text-slate-500 hover:text-slate-300 p-0.5 -ml-0.5 rounded transition-colors"
+            title={isCollapsed ? "Expand" : "Collapse"}
+          >
+            {isCollapsed ? (
+              <ChevronRight className="w-3 h-3" />
+            ) : (
+              <ChevronDown className="w-3 h-3" />
+            )}
+          </button>
+        ) : (
+          <MessageSquare className="w-3 h-3 text-slate-600 shrink-0" />
+        )}
+        {editingQuestionId === q.id ? (
+          <input
+            ref={editInputRef}
+            value={editingQuestionTitle}
+            onChange={(e) => setEditingQuestionTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") commitQuestionRename(q.id, topicId);
+              if (e.key === "Escape") setEditingQuestionId(null);
+            }}
+            onBlur={() => commitQuestionRename(q.id, topicId)}
+            onClick={(e) => e.stopPropagation()}
+            className="flex-1 min-w-0 bg-slate-700 border border-cyan-500 rounded px-1 py-0 text-xs text-slate-200 focus:outline-none"
+          />
+        ) : (
+          <span
+            className="text-xs text-slate-400 truncate flex-1"
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              setEditingQuestionId(q.id);
+              setEditingQuestionTitle(q.title);
+            }}
+          >
+            {q.title}
+          </span>
+        )}
+        <span className="text-[10px] text-slate-700 shrink-0">
+          {q.messages.length > 0 ? `${q.messages.length}` : ""}
         </span>
-      )}
-      <span className="text-[10px] text-slate-700 shrink-0">
-        {q.messages.length > 0 ? `${q.messages.length}` : ""}
-      </span>
-      {editingQuestionId !== q.id && !isChild && (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            setAddingChildTo(q.id);
-            setNewChildTitle("");
-          }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-          title="Add child question"
-        >
-          <CornerDownRight className="w-2.5 h-2.5" />
-        </button>
-      )}
-      {editingQuestionId !== q.id && (
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setAddingChildTo(q.id);
+              setNewChildTitle("");
+            }}
+            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+            title="Add child question"
+          >
+            <CornerDownRight className="w-2.5 h-2.5" />
+          </button>
+        )}
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setEditingQuestionId(q.id);
+              setEditingQuestionTitle(q.title);
+            }}
+            className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
+            title="Rename"
+          >
+            <Pencil className="w-2.5 h-2.5" />
+          </button>
+        )}
         <button
           onClick={(e) => {
             e.stopPropagation();
-            setEditingQuestionId(q.id);
-            setEditingQuestionTitle(q.title);
+            if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
+              removeQuestion(q.id, topicId);
+            }
           }}
-          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-cyan-400 transition-all"
-          title="Rename"
+          className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
         >
-          <Pencil className="w-2.5 h-2.5" />
+          <Trash2 className="w-2.5 h-2.5" />
         </button>
-      )}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          if (window.confirm(`Delete "${q.title}"? This cannot be undone.`)) {
-            removeQuestion(q.id, topicId);
-          }
-        }}
-        className="p-0.5 rounded opacity-0 group-hover:opacity-100 text-slate-600 hover:text-red-400 transition-all"
-      >
-        <Trash2 className="w-2.5 h-2.5" />
-      </button>
-    </div>
-  );
+      </div>
+    );
+  };
+
+  // Recursively renders a question and all its descendants.
+  const renderQuestionSubtree = (
+    questions: Question[],
+    topicId: string,
+    parentId: string | null,
+    depth: number,
+  ): React.ReactNode => {
+    const qs = questions.filter(
+      (q) => (q.parentQuestionId ?? null) === parentId,
+    );
+    return qs.map((q) => {
+      const hasChildren = questions.some((c) => c.parentQuestionId === q.id);
+      const isCollapsed = collapsedQuestions.has(q.id);
+      return (
+        <Fragment key={q.id}>
+          {renderQuestionRow(q, topicId, depth, hasChildren, isCollapsed, () =>
+            toggleQuestionCollapse(q.id),
+          )}
+          {/* Add-child input — indented one level deeper than this question */}
+          {addingChildTo === q.id && (
+            <div
+              className="pr-2 py-1 animate-fadeIn"
+              style={{ paddingLeft: 12 + (depth + 1) * 16 }}
+            >
+              <input
+                autoFocus
+                value={newChildTitle}
+                onChange={(e) => setNewChildTitle(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") handleAddChildQuestion(topicId, q.id);
+                  if (e.key === "Escape") {
+                    setAddingChildTo(null);
+                    setNewChildTitle("");
+                  }
+                }}
+                onBlur={() => {
+                  if (!newChildTitle.trim()) setAddingChildTo(null);
+                }}
+                placeholder="Child question title..."
+                className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
+              />
+            </div>
+          )}
+          {/* Recurse into children — hidden when collapsed */}
+          {!isCollapsed &&
+            renderQuestionSubtree(questions, topicId, q.id, depth + 1)}
+        </Fragment>
+      );
+    });
+  };
 
   return (
     <aside className="w-72 border-r border-slate-800 flex flex-col bg-slate-900/50 shrink-0">
       {/* Workspace switcher */}
       <WorkspaceSwitcher />
 
+      {/* Workspace-level files — apply to all topics */}
+      <div className="border-b border-slate-800 shrink-0">
+        <button
+          onClick={() => setWsFilesExpanded((v) => !v)}
+          className="w-full flex items-center gap-1.5 px-3 py-1.5 hover:bg-slate-800/40 transition-colors"
+        >
+          {wsFilesExpanded ? (
+            <ChevronDown className="w-3 h-3 text-slate-500 shrink-0" />
+          ) : (
+            <ChevronRight className="w-3 h-3 text-slate-500 shrink-0" />
+          )}
+          <Globe className="w-3 h-3 text-violet-400 shrink-0" />
+          <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-500 flex-1 text-left">
+            Workspace Files
+          </span>
+          {workspaceFiles.length > 0 && (
+            <span className="text-[10px] text-slate-600">
+              {workspaceFiles.length}
+            </span>
+          )}
+        </button>
+        {wsFilesExpanded && (
+          <div className="px-3 pb-2">
+            <FileAttachments
+              files={workspaceFiles}
+              onUpload={(files) => uploadWorkspaceFiles(files)}
+              onRemove={(fileId) => removeWorkspaceFile(fileId)}
+              downloadBase="/api/workspace/context-files"
+              label="workspace"
+            />
+          </div>
+        )}
+      </div>
+
       {/* Header — Drive breadcrumb when inside a subfolder, else normal Topics header */}
       <div className="h-12 border-b border-slate-800 flex items-center justify-between px-3 shrink-0">
         {isDriveWs && currentSubFolder ? (
@@ -482,57 +608,17 @@ export default function Sidebar() {
                           onRemove={(fileId) =>
                             removeTopicFile(topic.id, fileId)
                           }
+                          onLink={(fileId, originalName) =>
+                            linkFileToTopic(topic.id, fileId, originalName)
+                          }
+                          downloadBase={`/api/topics/${topic.id}/context-files`}
                           label="topic"
                           compact
                         />
                       </div>
 
-                      {/* Questions grouped: root → children */}
-                      {(() => {
-                        const rootQs = questions.filter(
-                          (q) => !q.parentQuestionId,
-                        );
-                        return rootQs.map((q) => {
-                          const children = questions.filter(
-                            (c) => c.parentQuestionId === q.id,
-                          );
-                          return (
-                            <Fragment key={q.id}>
-                              {renderQuestionRow(q, topic.id, false)}
-                              {/* Add-child input */}
-                              {addingChildTo === q.id && (
-                                <div className="pl-7 pr-2 py-1 animate-fadeIn">
-                                  <input
-                                    autoFocus
-                                    value={newChildTitle}
-                                    onChange={(e) =>
-                                      setNewChildTitle(e.target.value)
-                                    }
-                                    onKeyDown={(e) => {
-                                      if (e.key === "Enter")
-                                        handleAddChildQuestion(topic.id, q.id);
-                                      if (e.key === "Escape") {
-                                        setAddingChildTo(null);
-                                        setNewChildTitle("");
-                                      }
-                                    }}
-                                    onBlur={() => {
-                                      if (!newChildTitle.trim())
-                                        setAddingChildTo(null);
-                                    }}
-                                    placeholder="Child question title..."
-                                    className="w-full bg-slate-800 border border-slate-700 rounded px-2 py-0.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500"
-                                  />
-                                </div>
-                              )}
-                              {/* Children */}
-                              {children.map((c) =>
-                                renderQuestionRow(c, topic.id, true),
-                              )}
-                            </Fragment>
-                          );
-                        });
-                      })()}
+                      {/* Questions — recursive tree (unlimited depth) */}
+                      {renderQuestionSubtree(questions, topic.id, null, 0)}
 
                       {/* Add question input */}
                       {addingQuestionTo === topic.id ? (