create-interview-cockpit 0.5.0 → 0.7.0

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

@@ -0,0 +1,173 @@
+import { memo, useEffect, useRef, useState } from "react";
+import { Loader2, RefreshCw } from "lucide-react";
+import { parse as parseYaml } from "yaml";
+
+interface Props {
+  spec: string;
+}
+
+function sanitizePlotSpec(raw: string): string {
+  return raw
+    .trim()
+    .replace(/^```(?:plot|vega|vega-lite|json|yaml)?\s*/i, "")
+    .replace(/```\s*$/i, "")
+    .replace(/[\u201C\u201D]/g, '"')
+    .replace(/[\u2018\u2019\u02BC]/g, "'")
+    .replace(/\u2013|\u2014/g, "-");
+}
+
+function parsePlotSpec(raw: string): unknown {
+  const trimmed = sanitizePlotSpec(raw);
+  if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
+    return JSON.parse(trimmed);
+  }
+  return parseYaml(trimmed);
+}
+
+const EMBED_OPTIONS = {
+  actions: false,
+  renderer: "svg" as const,
+  theme: "dark" as const,
+  config: {
+    background: "transparent",
+    title: {
+      color: "#e2e8f0",
+      subtitleColor: "#94a3b8",
+    },
+    axis: {
+      domainColor: "#475569",
+      gridColor: "rgba(71, 85, 105, 0.35)",
+      tickColor: "#64748b",
+      labelColor: "#cbd5e1",
+      titleColor: "#e2e8f0",
+    },
+    legend: {
+      labelColor: "#cbd5e1",
+      titleColor: "#e2e8f0",
+    },
+    view: {
+      stroke: "transparent",
+    },
+  },
+};
+
+export default memo(function PlotEmbed({ spec }: Props) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const finalizeRef = useRef<null | (() => void)>(null);
+  const [activeSpec, setActiveSpec] = useState(spec);
+  const [error, setError] = useState<string | null>(null);
+  const [fixing, setFixing] = useState(false);
+  const [rendering, setRendering] = useState(true);
+
+  useEffect(() => {
+    setActiveSpec(spec);
+  }, [spec]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const renderPlot = async () => {
+      setRendering(true);
+      setError(null);
+      finalizeRef.current?.();
+      finalizeRef.current = null;
+      if (hostRef.current) {
+        hostRef.current.innerHTML = "";
+      }
+
+      try {
+        const parsed = parsePlotSpec(activeSpec);
+        const { default: vegaEmbed } = await import("vega-embed");
+        if (cancelled || !hostRef.current) return;
+        const result = await vegaEmbed(
+          hostRef.current,
+          parsed as any,
+          EMBED_OPTIONS,
+        );
+        finalizeRef.current = () => result.finalize();
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } finally {
+        if (!cancelled) {
+          setRendering(false);
+        }
+      }
+    };
+
+    void renderPlot();
+
+    return () => {
+      cancelled = true;
+      finalizeRef.current?.();
+      finalizeRef.current = null;
+    };
+  }, [activeSpec]);
+
+  const handleFix = async () => {
+    setFixing(true);
+    try {
+      const res = await fetch("/api/fix-plot", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ spec: activeSpec, error }),
+      });
+      if (!res.ok) throw new Error("Fix request failed");
+      const { spec: fixed } = (await res.json()) as { spec: string };
+      setActiveSpec(fixed);
+    } catch (err) {
+      console.error("Fix plot error:", err);
+    } finally {
+      setFixing(false);
+    }
+  };
+
+  if (error) {
+    return (
+      <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 my-2">
+        <div className="flex items-center justify-between mb-1 gap-3">
+          <div>
+            <p className="text-xs text-red-400">Plot error:</p>
+            <p className="text-[11px] text-slate-500 mt-1 whitespace-pre-wrap">
+              {error}
+            </p>
+          </div>
+          <button
+            onClick={handleFix}
+            disabled={fixing}
+            className="flex items-center gap-1 px-2 py-0.5 text-[11px] rounded bg-slate-700 text-slate-300 hover:bg-slate-600 disabled:opacity-50 transition-colors shrink-0"
+          >
+            {fixing ? (
+              <>
+                <Loader2 className="w-3 h-3 animate-spin" />
+                Fixing…
+              </>
+            ) : (
+              <>
+                <RefreshCw className="w-3 h-3" />
+                Fix plot
+              </>
+            )}
+          </button>
+        </div>
+        <pre className="text-xs text-slate-400 whitespace-pre-wrap overflow-x-auto">
+          {activeSpec}
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="my-3 bg-slate-800/30 rounded-lg p-4 overflow-x-auto">
+      {rendering && (
+        <div className="flex justify-center pb-4">
+          <span className="text-xs text-slate-500 animate-pulse">
+            Rendering plot…
+          </span>
+        </div>
+      )}
+      <div ref={hostRef} className="plot-embed min-w-[280px]" />
+    </div>
+  );
+});

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

@@ -17,8 +17,12 @@ import {
   ArrowLeft,
   RefreshCw,
   Globe,
+  SlidersHorizontal,
+  ArrowRightLeft,
 } from "lucide-react";
 
+const ROOT_PARENT_VALUE = "__root__";
+
 export default function Sidebar() {
   const {
     topics,
@@ -31,6 +35,7 @@ export default function Sidebar() {
     renameTopic,
     addQuestion,
     addChildQuestion,
+    moveQuestion,
     removeQuestion,
     renameQuestion,
     selectQuestion,
@@ -49,6 +54,7 @@ export default function Sidebar() {
     workspaceFiles,
     uploadWorkspaceFiles,
     removeWorkspaceFile,
+    updateTopicSystemContext,
   } = useStore();
 
   const [newTopicName, setNewTopicName] = useState("");
@@ -63,9 +69,34 @@ export default function Sidebar() {
     null,
   );
   const [editingQuestionTitle, setEditingQuestionTitle] = useState("");
+  const [movingQuestionId, setMovingQuestionId] = useState<string | null>(null);
+  const [moveTargetParentId, setMoveTargetParentId] =
+    useState(ROOT_PARENT_VALUE);
   const [collapsedQuestions, setCollapsedQuestions] = useState<Set<string>>(
     new Set(),
   );
+  const [openTopicPrompts, setOpenTopicPrompts] = useState<Set<string>>(
+    new Set(),
+  );
+  const topicPromptTimers = useRef<
+    Record<string, ReturnType<typeof setTimeout>>
+  >({});
+
+  const toggleTopicPrompt = (topicId: string) => {
+    setOpenTopicPrompts((prev) => {
+      const next = new Set(prev);
+      if (next.has(topicId)) next.delete(topicId);
+      else next.add(topicId);
+      return next;
+    });
+  };
+
+  const handleTopicPromptChange = (topicId: string, value: string) => {
+    clearTimeout(topicPromptTimers.current[topicId]);
+    topicPromptTimers.current[topicId] = setTimeout(() => {
+      updateTopicSystemContext(topicId, value);
+    }, 600);
+  };
 
   const toggleQuestionCollapse = (questionId: string) => {
     setCollapsedQuestions((prev) => {
@@ -174,6 +205,111 @@ export default function Sidebar() {
     setAddingChildTo(null);
   };
 
+  const getDescendantIds = (questions: Question[], questionId: string) => {
+    const descendants = new Set<string>();
+    const visit = (parentId: string) => {
+      for (const candidate of questions) {
+        if (candidate.parentQuestionId !== parentId) continue;
+        if (descendants.has(candidate.id)) continue;
+        descendants.add(candidate.id);
+        visit(candidate.id);
+      }
+    };
+    visit(questionId);
+    return descendants;
+  };
+
+  const buildMoveParentOptions = (
+    questions: Question[],
+    excludedIds: Set<string>,
+    parentId: string | null,
+    depth: number,
+  ): Array<{ id: string; title: string }> => {
+    const siblings = questions.filter(
+      (q) => (q.parentQuestionId ?? null) === parentId,
+    );
+    return siblings.flatMap((q) => {
+      if (excludedIds.has(q.id)) return [];
+      return [
+        {
+          id: q.id,
+          title: `${"— ".repeat(depth)}${q.title}`,
+        },
+        ...buildMoveParentOptions(questions, excludedIds, q.id, depth + 1),
+      ];
+    });
+  };
+
+  const handleMoveQuestion = async (
+    topicId: string,
+    questionId: string,
+    targetParentId: string | null,
+  ) => {
+    await moveQuestion(questionId, topicId, targetParentId);
+    setMovingQuestionId(null);
+  };
+
+  const renderMoveQuestionPicker = (
+    questions: Question[],
+    q: Question,
+    topicId: string,
+    depth: number,
+  ) => {
+    if (movingQuestionId !== q.id) return null;
+    const excludedIds = getDescendantIds(questions, q.id);
+    excludedIds.add(q.id);
+    const parentOptions = buildMoveParentOptions(
+      questions,
+      excludedIds,
+      null,
+      0,
+    );
+    const targetParentId =
+      moveTargetParentId === ROOT_PARENT_VALUE ? null : moveTargetParentId;
+    const unchanged = (q.parentQuestionId ?? null) === targetParentId;
+
+    return (
+      <div
+        className="pr-2 py-1.5 animate-fadeIn"
+        style={{ paddingLeft: 12 + (depth + 1) * 16 }}
+      >
+        <div className="rounded border border-slate-700 bg-slate-800/70 p-2 space-y-2">
+          <div className="text-[11px] text-slate-500">Move under</div>
+          <select
+            autoFocus
+            value={moveTargetParentId}
+            onChange={(e) => setMoveTargetParentId(e.target.value)}
+            className="w-full bg-slate-900 border border-slate-700 rounded px-2 py-1 text-xs text-slate-300 focus:outline-none focus:border-cyan-500"
+          >
+            <option value={ROOT_PARENT_VALUE}>No parent (top level)</option>
+            {parentOptions.map((option) => (
+              <option key={option.id} value={option.id}>
+                {option.title}
+              </option>
+            ))}
+          </select>
+          <div className="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => setMovingQuestionId(null)}
+              className="px-2 py-1 rounded text-[11px] text-slate-400 hover:text-slate-200 hover:bg-slate-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => handleMoveQuestion(topicId, q.id, targetParentId)}
+              disabled={unchanged}
+              className="px-2 py-1 rounded text-[11px] bg-cyan-600 hover:bg-cyan-500 disabled:opacity-40 text-white transition-colors"
+            >
+              Move
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   const renderQuestionRow = (
     q: Question,
     topicId: string,
@@ -274,6 +410,23 @@ export default function Sidebar() {
             <Pencil className="w-2.5 h-2.5" />
           </button>
         )}
+        {editingQuestionId !== q.id && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setMovingQuestionId((prev) => (prev === q.id ? null : q.id));
+              setMoveTargetParentId(q.parentQuestionId ?? ROOT_PARENT_VALUE);
+            }}
+            className={`p-0.5 rounded opacity-0 group-hover:opacity-100 transition-all ${
+              movingQuestionId === q.id
+                ? "opacity-100 text-cyan-400"
+                : "text-slate-600 hover:text-cyan-400"
+            }`}
+            title="Move to a different parent"
+          >
+            <ArrowRightLeft className="w-2.5 h-2.5" />
+          </button>
+        )}
         <button
           onClick={(e) => {
             e.stopPropagation();
@@ -332,6 +485,7 @@ export default function Sidebar() {
               />
             </div>
           )}
+          {renderMoveQuestionPicker(questions, q, topicId, depth)}
           {/* Recurse into children — hidden when collapsed */}
           {!isCollapsed &&
             renderQuestionSubtree(questions, topicId, q.id, depth + 1)}
@@ -617,6 +771,36 @@ export default function Sidebar() {
                         />
                       </div>
 
+                      {/* Topic-wide system prompt */}
+                      <div className="pl-3 pr-2 py-1 border-b border-slate-800/50">
+                        <button
+                          onClick={() => toggleTopicPrompt(topic.id)}
+                          className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-cyan-400 transition-colors w-full"
+                        >
+                          <SlidersHorizontal className="w-3 h-3" />
+                          <span>Topic prompt</span>
+                          <span className="ml-auto flex items-center gap-1">
+                            {topic.systemContext && (
+                              <span className="w-1.5 h-1.5 rounded-full bg-cyan-500" />
+                            )}
+                            <ChevronDown
+                              className={`w-3 h-3 transition-transform ${openTopicPrompts.has(topic.id) ? "" : "-rotate-90"}`}
+                            />
+                          </span>
+                        </button>
+                        {openTopicPrompts.has(topic.id) && (
+                          <textarea
+                            defaultValue={topic.systemContext ?? ""}
+                            onChange={(e) =>
+                              handleTopicPromptChange(topic.id, e.target.value)
+                            }
+                            placeholder="System context added to every question in this topic…"
+                            rows={4}
+                            className="mt-1.5 w-full bg-slate-800/60 border border-slate-700 rounded px-2 py-1.5 text-xs text-slate-300 placeholder-slate-600 focus:outline-none focus:border-cyan-500 resize-y leading-relaxed"
+                          />
+                        )}
+                      </div>
+
                       {/* Questions — recursive tree (unlimited depth) */}
                       {renderQuestionSubtree(questions, topic.id, null, 0)}