create-interview-cockpit 0.5.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

@@ -4,6 +4,7 @@ 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, ExternalLink, Play, Save, Check } from "lucide-react";
@@ -56,15 +57,24 @@ function InlineCodeBlock({
   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
+  // 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) {
-      registerInlineCode(parsed.id, {
-        content: parsed.displayCode,
-        language,
-        label: parsed.label,
-      });
-    }
+    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]);
 
@@ -169,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} />;
       }