@seqyuan/annodex 0.1.10 → 0.1.12

package/components/GlobalFileEditor.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { useTheme } from "@/hooks/useTheme";
+
+interface Props {
+  filePath: string; // "__soul__" or "__harness__"
+}
+
+const FILE_CONFIG: Record<string, { apiPath: string; title: string }> = {
+  "__soul__":    { apiPath: "/api/soul",    title: "SOUL.md" },
+  "__harness__": { apiPath: "/api/harness", title: "HARNESS.md" },
+};
+
+export function GlobalFileEditor({ filePath }: Props) {
+  const config = FILE_CONFIG[filePath];
+  const { isDark } = useTheme();
+  const [content, setContent] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    if (!config) return;
+    setLoading(true);
+    fetch(config.apiPath)
+      .then((r) => r.json())
+      .then((d: { content?: string }) => setContent(d.content ?? ""))
+      .catch((e) => setError(String(e)))
+      .finally(() => setLoading(false));
+  }, [config]);
+
+  const handleSave = useCallback(async () => {
+    if (!config) return;
+    setSaving(true);
+    try {
+      await fetch(config.apiPath, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content }),
+      });
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (e) {
+      setError(String(e));
+    } finally {
+      setSaving(false);
+    }
+  }, [config, content]);
+
+  if (!config) return null;
+  if (loading) {
+    return <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--text-muted)", fontSize: 13 }}>Loading…</div>;
+  }
+  if (error) {
+    return <div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#f87171", fontSize: 13 }}>{error}</div>;
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
+      {/* Toolbar */}
+      <div style={{
+        display: "flex", alignItems: "center", gap: 12,
+        padding: "4px 16px", borderBottom: "1px solid var(--border)",
+        fontSize: 11, color: "var(--text-dim)", background: "var(--bg)", flexShrink: 0,
+      }}>
+        <span style={{ fontFamily: "var(--font-mono)", fontWeight: 600, color: "var(--text)" }}>{config.title}</span>
+        <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-dim)" }}>Global</span>
+        {saved && (
+          <span style={{ color: "#4ade80", fontWeight: 600, animation: "saved-pop 0.3s ease" }}>✓ Saved</span>
+        )}
+        <button
+          onClick={handleSave}
+          disabled={saving}
+          title="Save (Ctrl+S)"
+          style={{
+            padding: "2px 10px", fontSize: 11, cursor: saving ? "not-allowed" : "pointer",
+            background: "var(--accent)", color: "#fff", border: "1px solid var(--accent)",
+            borderRadius: 5, fontWeight: 600, opacity: saving ? 0.6 : 1,
+          }}
+        >
+          {saving ? "Saving…" : "Save"}
+        </button>
+      </div>
+      <div style={{ flex: 1, overflow: "hidden" }}>
+        <CodeMirrorEditor
+          initialContent={content}
+          language="markdown"
+          isDark={isDark}
+          onChange={setContent}
+          onSave={handleSave}
+        />
+      </div>
+    </div>
+  );
+}

package/components/MarkdownRenderer.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import type { CSSProperties } from "react";
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { useTheme } from "@/hooks/useTheme";
+import { isMermaidLanguage, MermaidDiagram } from "@/components/MermaidDiagram";
+import { WidgetRenderer } from "@/components/WidgetRenderer";
+import { parseShowWidgets } from "@/lib/widget-utils";
+import { resolveCodeTheme } from "@/lib/code-theme";
+import { encodeFilePathForApi, getFileName, normalizeFilePathSlashes } from "@/lib/file-paths";
+
+interface Props {
+  content: string;
+  className?: string;
+  style?: CSSProperties;
+  codeBlockVariant?: "chat" | "file";
+  baseFilePath?: string;
+  onOpenLocalFile?: (filePath: string, fileName: string) => void;
+  onWidgetSendMessage?: (message: string) => void;
+  renderVisualCodeBlocks?: boolean;
+}
+
+function copyText(text: string): Promise<void> {
+  if (navigator.clipboard?.writeText) {
+    return navigator.clipboard.writeText(text);
+  }
+  try {
+    const ta = document.createElement("textarea");
+    ta.value = text;
+    ta.style.position = "fixed";
+    ta.style.opacity = "0";
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand("copy");
+    document.body.removeChild(ta);
+    return Promise.resolve();
+  } catch {
+    return Promise.reject();
+  }
+}
+
+function getLanguage(className?: string): string {
+  return className?.replace(/^language-/, "").trim() ?? "";
+}
+
+function isWidgetLanguage(language: string): boolean {
+  return language.trim().toLowerCase() === "show-widget";
+}
+
+function isVisualCodeBlock(language: string, code: string): boolean {
+  const lang = language.trim().toLowerCase();
+  const trimmed = code.trim();
+  if (!trimmed) return false;
+
+  if (lang === "svg" || (lang === "xml" && /^<svg[\s>]/i.test(trimmed))) {
+    return /^<svg[\s>]/i.test(trimmed);
+  }
+
+  if (lang !== "html") return false;
+  if (/<!doctype|<html[\s>]|<head[\s>]|<body[\s>]/i.test(trimmed)) return false;
+  return /^<(style|svg|div|section|article|main|figure|canvas)\b/i.test(trimmed);
+}
+
+function isExternalUrl(value: string): boolean {
+  return /^[a-z][a-z\d+.-]*:/i.test(value) || value.startsWith("//");
+}
+
+function splitMarkdownUrl(value: string): string {
+  const match = /^([^?#]*)(.*)$/.exec(value);
+  return match?.[1] ?? value;
+}
+
+function safeDecodeUri(value: string): string {
+  try {
+    return decodeURI(value);
+  } catch {
+    return value;
+  }
+}
+
+function normalizeResolvedPath(filePath: string): string {
+  const normalized = normalizeFilePathSlashes(filePath);
+  const absolute = normalized.startsWith("/");
+  const parts: string[] = [];
+  for (const part of normalized.split("/")) {
+    if (!part || part === ".") continue;
+    if (part === "..") {
+      if (parts.length > 0 && parts[parts.length - 1] !== "..") parts.pop();
+      else if (!absolute) parts.push(part);
+      continue;
+    }
+    parts.push(part);
+  }
+  return `${absolute ? "/" : ""}${parts.join("/")}`;
+}
+
+function dirname(filePath: string): string {
+  const normalized = normalizeFilePathSlashes(filePath);
+  const index = normalized.lastIndexOf("/");
+  return index >= 0 ? normalized.slice(0, index) : "";
+}
+
+function resolveLocalMarkdownPath(baseFilePath: string | undefined, url: string | undefined): string | null {
+  if (!baseFilePath || !url) return null;
+  if (url.startsWith("#") || isExternalUrl(url)) return null;
+
+  const pathPart = splitMarkdownUrl(url);
+  if (!pathPart) return null;
+
+  const decodedPath = safeDecodeUri(pathPart);
+  if (decodedPath.startsWith("/")) return normalizeResolvedPath(decodedPath);
+  return normalizeResolvedPath(`${dirname(baseFilePath)}/${decodedPath}`);
+}
+
+function fileReadUrl(filePath: string): string {
+  return `/api/files/${encodeFilePathForApi(filePath)}?type=read`;
+}
+
+function parseMarkdownWidget(code: string): { title?: string; code: string } | null {
+  const segments = parseShowWidgets(`\`\`\`show-widget\n${code}\n\`\`\``);
+  const widget = segments.find((segment) => segment.type === "widget");
+  return widget?.type === "widget" ? { title: widget.title, code: widget.code } : null;
+}
+
+function MarkdownCodeBlock({
+  code,
+  language,
+  variant,
+}: {
+  code: string;
+  language: string;
+  variant: "chat" | "file";
+}) {
+  const { isDark } = useTheme();
+  const [copied, setCopied] = useState(false);
+  const showLineNumbers = variant === "chat";
+
+  const copy = () => {
+    copyText(code).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  };
+
+  return (
+    <div
+      className={`markdown-code-block markdown-code-block-${variant}`}
+      style={{
+        position: "relative",
+        marginTop: variant === "file" ? 12 : 4,
+        marginBottom: variant === "file" ? 12 : 4,
+        borderRadius: 6,
+        overflow: "hidden",
+        border: "1px solid var(--border)",
+      }}
+    >
+      <div
+        style={{
+          padding: "3px 10px",
+          background: "var(--bg-panel)",
+          borderBottom: "1px solid var(--border)",
+          fontSize: 11,
+          color: "var(--text-dim)",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <span>{language || "text"}</span>
+        <button
+          onClick={copy}
+          style={{
+            background: "none",
+            border: "none",
+            color: "var(--text-muted)",
+            cursor: "pointer",
+            fontSize: 11,
+          }}
+        >
+          {copied ? "copied" : "copy"}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language || "text"}
+        style={resolveCodeTheme(isDark)}
+        showLineNumbers={showLineNumbers}
+        lineNumberStyle={{ color: "var(--text-dim)", fontStyle: "normal" }}
+        customStyle={{
+          margin: 0,
+          padding: variant === "file" ? "12px 16px" : "10px 12px",
+          fontSize: variant === "file" ? 13 : 12.5,
+          lineHeight: 1.6,
+          borderRadius: 0,
+          background: "var(--bg)",
+        }}
+        codeTagProps={{ style: { fontFamily: "var(--font-mono)" } }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
+export function MarkdownRenderer({
+  content,
+  className = "markdown-body",
+  style,
+  codeBlockVariant = "chat",
+  baseFilePath,
+  onOpenLocalFile,
+  onWidgetSendMessage,
+  renderVisualCodeBlocks = false,
+}: Props) {
+  return (
+    <div className={className} style={style}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          code({ className, children, node, ...props }) {
+            void node;
+            const language = getLanguage(className);
+            const raw = String(children);
+            const code = raw.replace(/\n$/, "");
+            const isBlock = className?.includes("language-") || raw.includes("\n");
+
+            if (isBlock && isMermaidLanguage(language)) {
+              return <MermaidDiagram chart={code} />;
+            }
+
+            if (isBlock && isWidgetLanguage(language)) {
+              const widget = parseMarkdownWidget(code);
+              if (widget) {
+                return (
+                  <WidgetRenderer
+                    code={widget.code}
+                    isStreaming={false}
+                    title={widget.title}
+                    onSendMessage={onWidgetSendMessage}
+                  />
+                );
+              }
+            }
+
+            if (isBlock && renderVisualCodeBlocks && isVisualCodeBlock(language, code)) {
+              return (
+                <WidgetRenderer
+                  code={code}
+                  isStreaming={false}
+                  title={`${language || "visual"} preview`}
+                  onSendMessage={onWidgetSendMessage}
+                />
+              );
+            }
+
+            if (isBlock) {
+              return (
+                <MarkdownCodeBlock
+                  code={code}
+                  language={language}
+                  variant={codeBlockVariant}
+                />
+              );
+            }
+
+            return (
+              <code
+                style={{
+                  background: "var(--bg-selected)",
+                  padding: "1px 4px",
+                  borderRadius: 3,
+                  fontFamily: "var(--font-mono)",
+                  fontSize: "0.9em",
+                }}
+                {...props}
+              >
+                {children}
+              </code>
+            );
+          },
+          pre({ children }) {
+            return <>{children}</>;
+          },
+          a({ href, children, node, ...props }) {
+            void node;
+            const resolvedPath = resolveLocalMarkdownPath(baseFilePath, href);
+            const isLocalFile = !!resolvedPath;
+            const isExternal = !!href && isExternalUrl(href);
+
+            return (
+              <a
+                {...props}
+                href={isLocalFile ? fileReadUrl(resolvedPath) : href}
+                target={isExternal ? "_blank" : undefined}
+                rel={isExternal ? "noreferrer" : undefined}
+                onClick={(event) => {
+                  if (!resolvedPath || !onOpenLocalFile) return;
+                  event.preventDefault();
+                  onOpenLocalFile(resolvedPath, getFileName(resolvedPath));
+                }}
+                title={isLocalFile ? resolvedPath : props.title}
+              >
+                {children}
+              </a>
+            );
+          },
+          img({ src, alt, node, ...props }) {
+            void node;
+            const source = typeof src === "string" ? src : undefined;
+            const resolvedPath = resolveLocalMarkdownPath(baseFilePath, source);
+            const resolvedSrc = resolvedPath ? fileReadUrl(resolvedPath) : source;
+            return (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                {...props}
+                src={resolvedSrc}
+                alt={alt ?? ""}
+                loading="lazy"
+                title={resolvedPath ?? props.title}
+              />
+            );
+          },
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/components/MermaidDiagram.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "@/hooks/useTheme";
+
+interface Props {
+  chart: string;
+}
+
+export function isMermaidLanguage(language: string): boolean {
+  const normalized = language.trim().toLowerCase();
+  return normalized === "mermaid" || normalized === "mmd";
+}
+
+export function MermaidDiagram({ chart }: Props) {
+  const { isDark } = useTheme();
+  const [svg, setSvg] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
+
+  useEffect(() => {
+    let cancelled = false;
+    const source = chart.trim();
+
+    setSvg(null);
+    setError(null);
+
+    if (!source) {
+      setError("Empty Mermaid diagram");
+      return;
+    }
+
+    import("mermaid")
+      .then(({ default: mermaid }) => {
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: isDark ? "dark" : "default",
+          suppressErrorRendering: true,
+        });
+        return mermaid.parse(source, { suppressErrors: true }).then((parsed) => {
+          if (!parsed) throw new Error("Invalid Mermaid syntax");
+          return mermaid.render(`${idRef.current}-${Date.now()}`, source);
+        });
+      })
+      .then((result) => {
+        if (!cancelled) setSvg(result.svg);
+      })
+      .catch((err: unknown) => {
+        if (!cancelled) setError(err instanceof Error ? err.message : String(err));
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [chart, isDark]);
+
+  if (error) {
+    return (
+      <div className="mermaid-diagram mermaid-diagram-error">
+        <div className="mermaid-diagram-error-title">Mermaid render failed</div>
+        <div className="mermaid-diagram-error-message">{error}</div>
+        <pre>{chart}</pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mermaid-diagram">
+      {svg ? (
+        <div
+          className="mermaid-diagram-canvas"
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      ) : (
+        <div className="mermaid-diagram-loading">Rendering diagram...</div>
+      )}
+    </div>
+  );
+}