create-interview-cockpit 0.1.0

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

@@ -0,0 +1,333 @@
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useMemo, useRef, useEffect } 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 { useStore } from "../store";
+import { Bookmark } from "lucide-react";
+
+import type { Components } from "react-markdown";
+
+interface Props {
+  content: string;
+  onAnnotationClick?: (annotId: string, rect: DOMRect) => void;
+  bookmarkedBlockIndex?: number;
+  onBookmarkBlock?: (blockIndex: number) => void;
+}
+
+const markdownComponents: Components = {
+  pre({ children }) {
+    return <>{children}</>;
+  },
+  p({ children }) {
+    return <p className="my-2 leading-relaxed text-slate-200">{children}</p>;
+  },
+  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} />;
+      }
+
+      return (
+        <SyntaxHighlighter
+          style={oneDark}
+          language={lang}
+          PreTag="div"
+          customStyle={{
+            margin: "0.5rem 0",
+            borderRadius: "0.5rem",
+            fontSize: "0.8rem",
+            background: "#1e293b",
+          }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      );
+    }
+
+    if (codeString.includes("\n")) {
+      return (
+        <SyntaxHighlighter
+          style={oneDark}
+          language="text"
+          PreTag="div"
+          customStyle={{
+            margin: "0.5rem 0",
+            borderRadius: "0.5rem",
+            fontSize: "0.8rem",
+            background: "#1e293b",
+          }}
+        >
+          {codeString}
+        </SyntaxHighlighter>
+      );
+    }
+
+    return (
+      <code
+        className="bg-slate-800 px-1.5 py-0.5 rounded text-cyan-300 text-xs"
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  },
+  table({ children }) {
+    return (
+      <div className="overflow-x-auto my-3">
+        <table className="border-collapse text-xs w-full">{children}</table>
+      </div>
+    );
+  },
+  thead({ children }) {
+    return <thead className="bg-slate-800">{children}</thead>;
+  },
+  th({ children }) {
+    return (
+      <th className="border border-slate-700 px-3 py-1.5 text-left font-medium text-slate-300">
+        {children}
+      </th>
+    );
+  },
+  td({ children }) {
+    return (
+      <td className="border border-slate-700 px-3 py-1.5 text-slate-400">
+        {children}
+      </td>
+    );
+  },
+  blockquote({ children }) {
+    return (
+      <blockquote className="border-l-2 border-cyan-500/50 pl-3 my-2 text-slate-400 italic">
+        {children}
+      </blockquote>
+    );
+  },
+  ul({ children }) {
+    return (
+      <ul className="list-disc list-outside pl-5 space-y-1.5 my-2">
+        {children}
+      </ul>
+    );
+  },
+  ol({ children }) {
+    return (
+      <ol className="list-decimal list-outside pl-5 space-y-1.5 my-2">
+        {children}
+      </ol>
+    );
+  },
+  li({ children }) {
+    return (
+      <li className="pl-1 marker:text-slate-500 [&>p]:inline [&>p]:m-0 [&>ul]:mt-1.5 [&>ol]:mt-1.5">
+        {children}
+      </li>
+    );
+  },
+  a({ href, children }) {
+    return (
+      <a
+        href={href}
+        className="text-cyan-400 hover:underline"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {children}
+      </a>
+    );
+  },
+  strong({ children }) {
+    return <strong className="font-semibold text-slate-200">{children}</strong>;
+  },
+  h1({ children }) {
+    return (
+      <h1 className="text-xl font-bold mt-4 mb-2 text-slate-100">{children}</h1>
+    );
+  },
+  h2({ children }) {
+    return (
+      <h2 className="text-lg font-semibold mt-3 mb-1.5 text-slate-200">
+        {children}
+      </h2>
+    );
+  },
+  h3({ children }) {
+    return (
+      <h3 className="text-base font-medium mt-2 mb-1 text-slate-200">
+        {children}
+      </h3>
+    );
+  },
+  hr() {
+    return <hr className="border-slate-700 my-4" />;
+  },
+};
+
+export default function MarkdownRenderer({
+  content,
+  onAnnotationClick,
+  bookmarkedBlockIndex,
+  onBookmarkBlock,
+}: Props) {
+  const openFileViewer = useStore((s) => s.openFileViewer);
+  const bookmarkElemRef = useRef<HTMLDivElement | null>(null);
+
+  // Scroll the bookmarked block into view when the bookmark changes or on mount
+  useEffect(() => {
+    if (bookmarkedBlockIndex === undefined) return;
+    const id = setTimeout(() => {
+      bookmarkElemRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }, 150);
+    return () => clearTimeout(id);
+  }, [bookmarkedBlockIndex]);
+
+  const components = useMemo<Components>(() => {
+    // Wrap a block element with a hover-activated bookmark button.
+    // Uses node.position.start.line as a stable block identifier.
+    function wrapBlock(
+      lineIdx: number | undefined,
+      element: React.ReactElement,
+    ): React.ReactElement {
+      if (!onBookmarkBlock || lineIdx === undefined) return element;
+      const isThis = bookmarkedBlockIndex === lineIdx;
+      return (
+        <div
+          ref={
+            isThis
+              ? (el) => {
+                  bookmarkElemRef.current = el;
+                }
+              : undefined
+          }
+          data-reading-bookmark={isThis ? "true" : undefined}
+          className={`group/bk relative ${
+            isThis ? "border-l-2 border-amber-500/50 pl-2 -ml-2" : ""
+          }`}
+        >
+          <button
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => onBookmarkBlock(lineIdx)}
+            className={`absolute right-0 top-0 p-0.5 z-10 transition-opacity ${
+              isThis
+                ? "opacity-100 text-amber-400"
+                : "opacity-0 group-hover/bk:opacity-100 text-slate-600 hover:text-amber-400"
+            }`}
+            title={isThis ? "Remove bookmark" : "Bookmark here"}
+          >
+            <Bookmark className={`w-3 h-3 ${isThis ? "fill-amber-400" : ""}`} />
+          </button>
+          {element}
+        </div>
+      );
+    }
+
+    return {
+      ...markdownComponents,
+      p({ children, node }) {
+        return wrapBlock(
+          (node as any)?.position?.start?.line,
+          <p className="my-2 leading-relaxed text-slate-200">{children}</p>,
+        );
+      },
+      h1({ children, node }) {
+        return wrapBlock(
+          (node as any)?.position?.start?.line,
+          <h1 className="text-xl font-bold mt-4 mb-2 text-slate-100">
+            {children}
+          </h1>,
+        );
+      },
+      h2({ children, node }) {
+        return wrapBlock(
+          (node as any)?.position?.start?.line,
+          <h2 className="text-lg font-semibold mt-3 mb-1.5 text-slate-200">
+            {children}
+          </h2>,
+        );
+      },
+      h3({ children, node }) {
+        return wrapBlock(
+          (node as any)?.position?.start?.line,
+          <h3 className="text-base font-medium mt-2 mb-1 text-slate-200">
+            {children}
+          </h3>,
+        );
+      },
+      a({ href, children }) {
+        if (href?.startsWith("annot://")) {
+          const annotId = href.slice("annot://".length);
+          return (
+            <span
+              onClick={
+                onAnnotationClick
+                  ? (e) => {
+                      const rect = (
+                        e.currentTarget as HTMLElement
+                      ).getBoundingClientRect();
+                      onAnnotationClick(annotId, rect);
+                    }
+                  : undefined
+              }
+              className="underline decoration-cyan-400 decoration-dotted underline-offset-2 cursor-pointer text-slate-200 hover:text-cyan-300 transition-colors"
+            >
+              {children}
+            </span>
+          );
+        }
+        if (href?.startsWith("coderef://")) {
+          const filePath = href.slice("coderef://".length);
+          return (
+            <button
+              type="button"
+              onClick={() => openFileViewer(filePath)}
+              className="inline-flex items-center gap-1 text-amber-400 hover:text-amber-300 underline decoration-amber-500/50 underline-offset-2 transition-colors font-mono text-[0.8em]"
+              title={`Open ${filePath}`}
+            >
+              {children}
+            </button>
+          );
+        }
+        return (
+          <a
+            href={href}
+            className="text-cyan-400 hover:underline"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {children}
+          </a>
+        );
+      },
+    };
+  }, [
+    onAnnotationClick,
+    openFileViewer,
+    bookmarkedBlockIndex,
+    onBookmarkBlock,
+  ]);
+
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={components}
+      urlTransform={(url) => {
+        // Allow our internal schemes; block javascript: for safety
+        if (url.startsWith("annot://")) return url;
+        if (url.startsWith("coderef://")) return url;
+        if (url.startsWith("javascript:")) return "";
+        return url;
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+}

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

@@ -0,0 +1,157 @@
+import { memo, useEffect, useState } from "react";
+import { RefreshCw, Loader2 } from "lucide-react";
+import mermaid from "mermaid";
+
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "dark",
+  suppressErrorRendering: true,
+  themeVariables: {
+    primaryColor: "#0e7490",
+    primaryTextColor: "#e2e8f0",
+    primaryBorderColor: "#164e63",
+    lineColor: "#475569",
+    secondaryColor: "#1e293b",
+    tertiaryColor: "#0f172a",
+  },
+});
+
+let counter = 0;
+
+// Auto-fix common Mermaid syntax issues the LLM produces
+function sanitizeChart(raw: string): string {
+  return (
+    raw
+      // Quote node labels inside [] that contain unquoted parens/brackets
+      // e.g. A[Service A (primary)] → A["Service A (primary)"]
+      .replace(
+        /\[([^\]"]+\([^)]*\)[^\]]*)\]/g,
+        (_match, label) => `["${label}"]`,
+      )
+      // Quote edge labels inside || that contain parens — ( is parsed as stadium shape
+      // e.g. -->|event (publish)| B  →  -->|"event (publish)"| B
+      .replace(/\|([^|"]*[()][^|]*)\|/g, (_match, label) => `|"${label}"|`)
+  );
+}
+
+interface Props {
+  chart: string;
+}
+
+export default memo(function MermaidDiagram({ chart }: Props) {
+  const [activeChart, setActiveChart] = useState(chart);
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [fixing, setFixing] = useState(false);
+
+  // Keep activeChart in sync when the prop changes (streaming / message reload)
+  useEffect(() => {
+    setActiveChart(chart);
+  }, [chart]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setSvg(null);
+    setError(null);
+
+    // Debounce: wait for content to stabilise (streaming sends tokens rapidly)
+    const timer = setTimeout(async () => {
+      if (cancelled) return;
+      const id = `mermaid-${++counter}`;
+
+      try {
+        const { svg: rendered } = await mermaid.render(id, activeChart);
+        if (!cancelled) setSvg(rendered);
+      } catch (err) {
+        const errMsg = err instanceof Error ? err.message : String(err);
+        // Retry with sanitized chart (fix common LLM syntax mistakes)
+        const fixed = sanitizeChart(activeChart);
+        if (fixed !== activeChart) {
+          const retryId = `mermaid-${++counter}`;
+          try {
+            const { svg: rendered } = await mermaid.render(retryId, fixed);
+            if (!cancelled) setSvg(rendered);
+            return;
+          } catch {
+            // fall through to error
+          }
+        }
+        if (!cancelled) setError(errMsg || "Failed to render diagram");
+      }
+    }, 400);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+      // Clean up any mermaid elements that leak into document.body
+      document
+        .querySelectorAll('[id^="dmermaid-"]')
+        .forEach((el) => el.remove());
+    };
+  }, [activeChart]);
+
+  const handleFix = async () => {
+    setFixing(true);
+    try {
+      const res = await fetch("/api/fix-diagram", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ chart: activeChart, error }),
+      });
+      if (!res.ok) throw new Error("Fix request failed");
+      const { chart: fixed } = (await res.json()) as { chart: string };
+      setActiveChart(fixed);
+    } catch (err) {
+      console.error("Fix diagram 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">
+          <p className="text-xs text-red-400">Diagram error:</p>
+          <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"
+          >
+            {fixing ? (
+              <>
+                <Loader2 className="w-3 h-3 animate-spin" />
+                Fixing…
+              </>
+            ) : (
+              <>
+                <RefreshCw className="w-3 h-3" />
+                Fix diagram
+              </>
+            )}
+          </button>
+        </div>
+        <pre className="text-xs text-slate-400 whitespace-pre-wrap">
+          {activeChart}
+        </pre>
+      </div>
+    );
+  }
+
+  if (!svg) {
+    return (
+      <div className="my-3 flex justify-center bg-slate-800/30 rounded-lg p-4">
+        <span className="text-xs text-slate-500 animate-pulse">
+          Rendering diagram…
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="my-3 flex justify-center bg-slate-800/30 rounded-lg p-4 overflow-x-auto mermaid-diagram"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+});