@seqyuan/annodex 0.1.12 → 0.1.13

package/components/GlobalFileEditor.tsx

@@ -1,98 +0,0 @@
-"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

@@ -1,331 +0,0 @@
-"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

@@ -1,80 +0,0 @@
-"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>
-  );
-}