create-interview-cockpit 0.4.0 → 0.6.0

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

@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import { X, MessageSquare, Check, Loader2 } from "lucide-react";
+import type { Question } from "../types";
+import { useStore } from "../store";
+
+interface Props {
+  question: Question;
+  topicId: string;
+  onClose: () => void;
+}
+
+export default function LinkedConvosPicker({
+  question,
+  topicId,
+  onClose,
+}: Props) {
+  const { linkConversation, unlinkConversation } = useStore();
+  const [siblings, setSiblings] = useState<Question[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [pending, setPending] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/topics/${topicId}/questions`)
+      .then((r) => r.json())
+      .then((qs: Question[]) => {
+        // Exclude the current question itself
+        setSiblings(qs.filter((q2) => q2.id !== question.id));
+      })
+      .finally(() => setLoading(false));
+  }, [topicId, question.id]);
+
+  const linked = new Set(question.linkedConversationIds ?? []);
+
+  const toggle = async (targetId: string) => {
+    setPending(targetId);
+    try {
+      if (linked.has(targetId)) {
+        await unlinkConversation(question.id, targetId);
+      } else {
+        await linkConversation(question.id, targetId);
+      }
+    } finally {
+      setPending(null);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
+      <div className="bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md mx-4 flex flex-col max-h-[70vh]">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-4 py-3 border-b border-slate-700 shrink-0">
+          <MessageSquare className="w-4 h-4 text-violet-400 shrink-0" />
+          <span className="text-sm font-semibold text-slate-200 flex-1">
+            Link conversations as context
+          </span>
+          <button
+            onClick={onClose}
+            className="p-1 rounded hover:bg-slate-700 text-slate-500 hover:text-slate-300 transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 min-h-0 overflow-y-auto p-3 space-y-1">
+          {loading && (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="w-5 h-5 text-violet-400 animate-spin" />
+            </div>
+          )}
+          {!loading && siblings.length === 0 && (
+            <p className="text-xs text-slate-500 text-center py-8">
+              No other conversations in this topic yet.
+            </p>
+          )}
+          {!loading &&
+            siblings.map((sibling) => {
+              const isLinked = linked.has(sibling.id);
+              const isPending = pending === sibling.id;
+              const msgCount = sibling.messages?.length ?? 0;
+              return (
+                <button
+                  key={sibling.id}
+                  onClick={() => toggle(sibling.id)}
+                  disabled={isPending}
+                  className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left transition-colors ${
+                    isLinked
+                      ? "bg-violet-500/15 border border-violet-500/30 hover:bg-violet-500/20"
+                      : "bg-slate-800/50 border border-transparent hover:bg-slate-800"
+                  }`}
+                >
+                  <div
+                    className={`w-4 h-4 rounded border shrink-0 flex items-center justify-center transition-colors ${
+                      isLinked
+                        ? "bg-violet-500 border-violet-500"
+                        : "border-slate-600"
+                    }`}
+                  >
+                    {isPending ? (
+                      <Loader2 className="w-2.5 h-2.5 animate-spin text-white" />
+                    ) : isLinked ? (
+                      <Check className="w-2.5 h-2.5 text-white" />
+                    ) : null}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs font-medium text-slate-200 truncate">
+                      {sibling.title}
+                    </p>
+                    <p className="text-[10px] text-slate-500 mt-0.5">
+                      {msgCount} message{msgCount !== 1 ? "s" : ""}
+                    </p>
+                  </div>
+                </button>
+              );
+            })}
+        </div>
+
+        {/* Footer hint */}
+        <div className="px-4 py-2.5 border-t border-slate-800 shrink-0">
+          <p className="text-[10px] text-slate-500">
+            Linked conversations are included as read-only background context
+            for the AI.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,13 @@
 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 PlotEmbed from "./PlotEmbed";
 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 +16,149 @@ 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.
+  // Guard: skip the store update if the entry is already registered with the same
+  // content — this prevents an infinite render loop when the component remounts
+  // because a parent re-renders (each store update would otherwise remount this,
+  // triggering the effect again, updating the store again…).
+  useEffect(() => {
+    if (!parsed.id) return;
+    const existing = useStore.getState().inlineCodeSnippets[parsed.id];
+    if (
+      existing?.content === parsed.displayCode &&
+      existing?.language === language
+    )
+      return;
+    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 = {
@@ -35,6 +179,10 @@ const markdownComponents: Components = {
         return <MermaidDiagram chart={codeString} />;
       }
 
+      if (lang === "plot" || lang === "vega" || lang === "vega-lite") {
+        return <PlotEmbed spec={codeString} />;
+      }
+
       if (lang === "viz") {
         return <VizCraftEmbed spec={codeString} />;
       }
@@ -179,8 +327,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 +387,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 +459,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 +501,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 +529,10 @@ export default function MarkdownRenderer({
   }, [
     onAnnotationClick,
     openFileViewer,
+    openDocViewer,
     bookmarkedBlockIndex,
     onBookmarkBlock,
+    onSpecRefined,
   ]);
 
   return (
@@ -328,6 +543,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;
       }}