create-interview-cockpit 0.1.0

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

@@ -0,0 +1,476 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { Loader2, ChevronRight, ChevronDown } from "lucide-react";
+import type { Annotation, AnnotationFollowUp } from "../types";
+import MarkdownRenderer from "./MarkdownRenderer";
+import AnnotationDialog from "./AnnotationDialog";
+
+interface Props {
+  content: string;
+  messageId: string;
+  annotations: Annotation[];
+  onAnnotationCreate: (annotation: Annotation) => void;
+  onAnnotationUpdate: (updated: Annotation) => void;
+  bookmarkedBlockIndex?: number;
+  onBookmarkBlock?: (blockIndex: number) => void;
+  responseLength?: string;
+  responseStyle?: string;
+  responseAudience?: string;
+}
+
+type Phase = "idle" | "button" | "input" | "loading";
+
+// Optional inline markdown markers: **, __, *, _, ` (inline code spans)
+const INLINE_MARKER = "(?:\\*{1,2}|_{1,2}|`)?";
+
+/**
+ * Build a regex pattern from selectedText that tolerates inline markdown markers
+ * (**bold**, *italic*, `code`) being interspersed at any character boundary in
+ * the raw source. Allows an optional marker before the first char AND after the
+ * last char so fully-wrapped spans (e.g. **word**) are consumed cleanly.
+ */
+function buildAnnotationPattern(text: string): string {
+  const parts = text.split(/(\s+)/);
+  const inner = parts
+    .map((part) => {
+      if (/^\s+$/.test(part)) {
+        const esc = part.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+        return `${INLINE_MARKER}${esc}${INLINE_MARKER}`;
+      }
+      return [...part]
+        .map((ch, i, arr) => {
+          const e = ch.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          return i < arr.length - 1 ? e + INLINE_MARKER : e;
+        })
+        .join("");
+    })
+    .join("");
+  // Optional marker at start AND end (handles opening and closing bold/code markers)
+  return `${INLINE_MARKER}${inner}${INLINE_MARKER}`;
+}
+
+function injectAnnotationLinks(
+  content: string,
+  annotations: Annotation[],
+): string {
+  if (!annotations.length) return content;
+
+  const sorted = [...annotations].sort(
+    (a, b) => b.selectedText.length - a.selectedText.length,
+  );
+
+  let result = content;
+  for (const ann of sorted) {
+    // Skip if already injected
+    if (result.includes(`annot://${ann.id}`)) continue;
+
+    // Strategy 1 — fuzzy regex: tolerates **, __, *, _, ` markers around/between chars
+    let matched = false;
+    try {
+      const pattern = buildAnnotationPattern(ann.selectedText);
+      const re = new RegExp(`(?<!\\[)${pattern}(?![^[\\]]*\\])`);
+      const m = re.exec(result);
+      if (m) {
+        result =
+          result.slice(0, m.index) +
+          `[${ann.selectedText}](annot://${ann.id})` +
+          result.slice(m.index + m[0].length);
+        matched = true;
+      }
+    } catch {
+      // Pattern too complex or invalid — fall through
+    }
+    if (matched) continue;
+
+    // Strategy 2 — code span: raw markdown has `selectedText` (backtick-wrapped).
+    // Replace `foo` with [`foo`](annot://id) so the link renders inside code styling.
+    const codeSpan = `\`${ann.selectedText}\``;
+    const codeIdx = result.indexOf(codeSpan);
+    if (codeIdx !== -1) {
+      result =
+        result.slice(0, codeIdx) +
+        `[\`${ann.selectedText}\`](annot://${ann.id})` +
+        result.slice(codeIdx + codeSpan.length);
+      continue;
+    }
+
+    // Strategy 3 — exact literal fallback (catches anything the fuzzy pass missed)
+    try {
+      const escaped = ann.selectedText.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const re = new RegExp(`(?<!\\[)${escaped}(?![^[\\]]*\\])`);
+      const m = re.exec(result);
+      if (m) {
+        result =
+          result.slice(0, m.index) +
+          `[${ann.selectedText}](annot://${ann.id})` +
+          result.slice(m.index + m[0].length);
+      }
+    } catch {
+      // Give up on this annotation
+    }
+  }
+  return result;
+}
+
+export default function TextAnnotator({
+  content,
+  messageId,
+  annotations,
+  onAnnotationCreate,
+  onAnnotationUpdate,
+  bookmarkedBlockIndex,
+  onBookmarkBlock,
+  responseLength,
+  responseStyle,
+  responseAudience,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const annotationsRef = useRef(annotations);
+  annotationsRef.current = annotations;
+
+  const [phase, setPhase] = useState<Phase>("idle");
+  const phaseRef = useRef(phase);
+  phaseRef.current = phase;
+  const [selectedText, setSelectedText] = useState("");
+  const [floatingPos, setFloatingPos] = useState({ x: 0, y: 0 });
+  const [inputValue, setInputValue] = useState("");
+  const [expandedAnnotationId, setExpandedAnnotationId] = useState<
+    string | null
+  >(null);
+  const [followUpInput, setFollowUpInput] = useState("");
+  const [followUpLoading, setFollowUpLoading] = useState(false);
+  const scrollBodyRef = useRef<HTMLDivElement>(null);
+
+  // Dialog state — opened when clicking an annotation link in the rendered text
+  const [dialogAnnotationId, setDialogAnnotationId] = useState<string | null>(
+    null,
+  );
+  const [dialogPos, setDialogPos] = useState<
+    { x: number; y: number } | undefined
+  >();
+  const dialogAnnotation = dialogAnnotationId
+    ? (annotations.find((a) => a.id === dialogAnnotationId) ?? null)
+    : null;
+
+  // Stable callback — clicking an annot:// link opens the dialog
+  const handleAnnotationClick = useCallback(
+    (annotId: string, rect: DOMRect) => {
+      // Position dialog to the right of the clicked text, or fallback to center
+      const x = Math.min(rect.right + 16, window.innerWidth - 496);
+      const y = Math.max(16, rect.top - 220);
+      setDialogPos({ x: Math.max(8, x), y });
+      setDialogAnnotationId((prev) => (prev === annotId ? null : annotId));
+    },
+    [],
+  );
+
+  useEffect(() => {
+    const handleMouseUp = () => {
+      // Read phase via ref — no stale closure, no dep needed
+      if (phaseRef.current === "input" || phaseRef.current === "loading")
+        return;
+
+      const selection = window.getSelection();
+      if (!selection || selection.isCollapsed) {
+        setPhase((p) => (p === "button" ? "idle" : p));
+        return;
+      }
+      const text = selection.toString().trim();
+      if (!text) return;
+
+      if (!containerRef.current) return;
+      const range = selection.getRangeAt(0);
+      if (!containerRef.current.contains(range.commonAncestorContainer)) return;
+
+      const rect = range.getBoundingClientRect();
+      setSelectedText(text);
+      setFloatingPos({ x: rect.left + rect.width / 2, y: rect.top });
+      setPhase("button");
+    };
+
+    document.addEventListener("mouseup", handleMouseUp);
+    return () => document.removeEventListener("mouseup", handleMouseUp);
+  }, []); // Register once — phase is read via ref
+
+  const handleButtonClick = () => {
+    setInputValue("");
+    setPhase("input");
+  };
+
+  const handleSubmit = async () => {
+    if (!inputValue.trim()) return;
+    setPhase("loading");
+    try {
+      const res = await fetch("/api/inline-ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          selectedText,
+          prompt: inputValue.trim(),
+          messageContent: content,
+          responseLength,
+          responseStyle,
+          responseAudience,
+        }),
+      });
+      const data = await res.json();
+      const annotation: Annotation = {
+        id: crypto.randomUUID(),
+        messageId,
+        selectedText,
+        prompt: inputValue.trim(),
+        response: data.response ?? "No response.",
+        createdAt: new Date().toISOString(),
+      };
+      onAnnotationCreate(annotation);
+    } catch {
+      // silently reset on error
+    } finally {
+      setPhase("idle");
+      setInputValue("");
+      setSelectedText("");
+    }
+  };
+
+  const handleFollowUpSubmit = async () => {
+    if (!followUpInput.trim() || !expandedAnnotationId) return;
+    const annotation = annotationsRef.current.find(
+      (a) => a.id === expandedAnnotationId,
+    );
+    if (!annotation) return;
+    setFollowUpLoading(true);
+    try {
+      const res = await fetch("/api/inline-ask", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          selectedText: annotation.selectedText,
+          prompt: followUpInput.trim(),
+          messageContent: content,
+          priorResponse: annotation.response,
+          followUps: annotation.followUps ?? [],
+          responseLength,
+          responseStyle,
+          responseAudience,
+        }),
+      });
+      const data = await res.json();
+      const newFollowUp: AnnotationFollowUp = {
+        id: crypto.randomUUID(),
+        prompt: followUpInput.trim(),
+        response: data.response ?? "No response.",
+        createdAt: new Date().toISOString(),
+      };
+      const updated: Annotation = {
+        ...annotation,
+        followUps: [...(annotation.followUps ?? []), newFollowUp],
+      };
+      onAnnotationUpdate(updated);
+      setFollowUpInput("");
+      setTimeout(() => {
+        scrollBodyRef.current?.scrollTo({
+          top: scrollBodyRef.current.scrollHeight,
+          behavior: "smooth",
+        });
+      }, 50);
+    } catch {
+      // silently ignore
+    } finally {
+      setFollowUpLoading(false);
+    }
+  };
+
+  const processedContent = injectAnnotationLinks(content, annotations);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <MarkdownRenderer
+        content={processedContent}
+        onAnnotationClick={handleAnnotationClick}
+        bookmarkedBlockIndex={bookmarkedBlockIndex}
+        onBookmarkBlock={onBookmarkBlock}
+      />
+
+      {/* Annotation dialog — opened by clicking an underlined annotation link */}
+      {dialogAnnotation && (
+        <AnnotationDialog
+          annotation={dialogAnnotation}
+          onClose={() => setDialogAnnotationId(null)}
+          onUpdate={onAnnotationUpdate}
+          messageContent={content}
+          initialPos={dialogPos}
+          responseLength={responseLength}
+          responseStyle={responseStyle}
+          responseAudience={responseAudience}
+        />
+      )}
+
+      {/* Floating "Ask about this" button */}
+      {phase === "button" && (
+        <button
+          style={{
+            position: "fixed",
+            left: floatingPos.x,
+            top: floatingPos.y,
+            transform: "translate(-50%, calc(-100% - 6px))",
+            zIndex: 60,
+          }}
+          onMouseDown={(e) => e.preventDefault()} // prevent selection clear
+          onClick={handleButtonClick}
+          className="bg-cyan-700 hover:bg-cyan-600 text-white text-xs font-medium px-2.5 py-1 rounded-md shadow-lg border border-cyan-500/40 whitespace-nowrap"
+        >
+          Ask about this
+        </button>
+      )}
+
+      {/* Floating input panel */}
+      {(phase === "input" || phase === "loading") && (
+        <div
+          style={{
+            position: "fixed",
+            left: Math.min(
+              Math.max(floatingPos.x, 160),
+              window.innerWidth - 160,
+            ),
+            top: floatingPos.y,
+            transform: "translate(-50%, calc(-100% - 10px))",
+            zIndex: 60,
+          }}
+          className="bg-slate-800 border border-slate-600 rounded-xl shadow-xl p-3 w-72"
+        >
+          <p className="text-xs text-slate-400 mb-2 truncate">
+            <span className="text-slate-500">re: </span>&ldquo;{selectedText}
+            &rdquo;
+          </p>
+          <textarea
+            autoFocus
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                handleSubmit();
+              }
+              if (e.key === "Escape") setPhase("idle");
+            }}
+            placeholder="Ask something about this…"
+            className="w-full bg-slate-900 text-slate-200 text-xs rounded-lg p-2 resize-none outline-none border border-slate-700 focus:border-cyan-500 transition-colors"
+            rows={2}
+            disabled={phase === "loading"}
+          />
+          <div className="flex justify-end gap-2 mt-2">
+            <button
+              onClick={() => setPhase("idle")}
+              className="text-xs text-slate-400 hover:text-slate-200 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleSubmit}
+              disabled={phase === "loading" || !inputValue.trim()}
+              className="text-xs bg-cyan-700 hover:bg-cyan-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-2.5 py-1 rounded-md transition-colors"
+            >
+              {phase === "loading" ? "Asking…" : "Ask"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Annotation threads — inline tree below content */}
+      {annotations.length > 0 && (
+        <div className="mt-4 ml-1 border-l-2 border-slate-700/40">
+          {annotations.map((ann, i) => {
+            const isLast = i === annotations.length - 1;
+            const isExpanded = expandedAnnotationId === ann.id;
+            return (
+              <div key={ann.id}>
+                {/* Stub row */}
+                <button
+                  onClick={() => {
+                    setExpandedAnnotationId(isExpanded ? null : ann.id);
+                    setFollowUpInput("");
+                  }}
+                  className="flex items-start gap-1.5 group w-full text-left pl-2 py-0.5 hover:bg-slate-800/40 rounded-sm transition-colors"
+                >
+                  <span className="font-mono text-slate-600 text-xs shrink-0 select-none mt-0.5">
+                    {isLast ? "└─" : "├─"}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <span className="text-xs text-slate-400 group-hover:text-slate-200 transition-colors">
+                      {ann.prompt}
+                    </span>{" "}
+                    <span className="text-[10px] text-slate-600 italic">
+                      re: &ldquo;
+                      {ann.selectedText.length > 45
+                        ? ann.selectedText.slice(0, 45) + "…"
+                        : ann.selectedText}
+                      &rdquo;
+                    </span>
+                    {(ann.followUps?.length ?? 0) > 0 && (
+                      <span className="ml-1.5 text-[10px] text-cyan-600/60">
+                        +{ann.followUps!.length}
+                      </span>
+                    )}
+                  </div>
+                  {isExpanded ? (
+                    <ChevronDown className="w-3 h-3 text-slate-500 shrink-0 mt-0.5" />
+                  ) : (
+                    <ChevronRight className="w-3 h-3 text-slate-600 shrink-0 mt-0.5 opacity-0 group-hover:opacity-100 transition-opacity" />
+                  )}
+                </button>
+
+                {/* Expanded inline thread */}
+                {isExpanded && (
+                  <div className="ml-5 mr-1 mt-1 mb-2 border border-slate-700/50 rounded-lg bg-slate-800/50 flex flex-col overflow-hidden max-h-[420px]">
+                    <div
+                      ref={scrollBodyRef}
+                      className="overflow-y-auto flex-1 px-3 py-2.5 text-sm"
+                    >
+                      <MarkdownRenderer content={ann.response} />
+                      {(ann.followUps ?? []).map((fu) => (
+                        <div key={fu.id}>
+                          <hr className="border-slate-700 my-3" />
+                          <p className="text-[11px] text-slate-500 mb-1">
+                            ↳ You: {fu.prompt}
+                          </p>
+                          <MarkdownRenderer content={fu.response} />
+                        </div>
+                      ))}
+                    </div>
+                    <div className="shrink-0 border-t border-slate-700/60 bg-slate-800 px-2.5 py-2 flex gap-2 items-end">
+                      <textarea
+                        autoFocus
+                        value={followUpInput}
+                        onChange={(e) => setFollowUpInput(e.target.value)}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            handleFollowUpSubmit();
+                          }
+                        }}
+                        placeholder="Ask a follow-up…"
+                        rows={1}
+                        disabled={followUpLoading}
+                        className="flex-1 bg-slate-900 text-slate-200 text-xs rounded-lg px-2 py-1.5 resize-none outline-none border border-slate-700 focus:border-cyan-500 transition-colors disabled:opacity-50"
+                      />
+                      <button
+                        onClick={handleFollowUpSubmit}
+                        disabled={followUpLoading || !followUpInput.trim()}
+                        className="shrink-0 bg-cyan-700 hover:bg-cyan-600 disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs px-2.5 py-1.5 rounded-lg transition-colors flex items-center gap-1"
+                      >
+                        {followUpLoading ? (
+                          <Loader2 size={12} className="animate-spin" />
+                        ) : (
+                          "Ask"
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/template/client/src/index.css

@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  min-height: 100vh;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* Mermaid diagram styling */
+.mermaid-diagram svg {
+  max-width: 100%;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #475569;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #64748b;
+}
+
+/* Fade-in animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.2s ease-out;
+}
+
+/* Prose overrides for dark theme code */
+.prose pre {
+  background: #1e293b !important;
+}
+
+.prose code {
+  color: #67e8f9 !important;
+}

package/template/client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);