@seqyuan/annodex 0.1.12 → 0.1.14

package/components/CodeMirrorEditor.tsx

@@ -1,137 +0,0 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, lineNumbers, highlightActiveLine } from "@codemirror/view";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-import { syntaxHighlighting, defaultHighlightStyle } from "@codemirror/language";
-import { oneDark } from "@codemirror/theme-one-dark";
-import { javascript } from "@codemirror/lang-javascript";
-import { python } from "@codemirror/lang-python";
-import { sql } from "@codemirror/lang-sql";
-import { json } from "@codemirror/lang-json";
-import { html } from "@codemirror/lang-html";
-import { css } from "@codemirror/lang-css";
-import { markdown } from "@codemirror/lang-markdown";
-import { xml } from "@codemirror/lang-xml";
-import { rust } from "@codemirror/lang-rust";
-import { go } from "@codemirror/lang-go";
-import { java } from "@codemirror/lang-java";
-import { searchKeymap } from "@codemirror/search";
-import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
-
-function getLanguageExtension(lang: string) {
-  switch (lang) {
-    case "javascript":
-    case "typescript":
-      return javascript({ typescript: lang === "typescript" });
-    case "python":
-      return python();
-    case "sql":
-      return sql();
-    case "json":
-      return json();
-    case "html":
-      return html();
-    case "css":
-    case "scss":
-    case "less":
-      return css();
-    case "markdown":
-      return markdown();
-    case "xml":
-    case "yaml":
-    case "toml":
-      return xml();
-    case "rust":
-      return rust();
-    case "go":
-      return go();
-    case "java":
-      return java();
-    default:
-      return null;
-  }
-}
-
-interface Props {
-  initialContent: string;
-  language: string;
-  isDark: boolean;
-  onChange?: (content: string) => void;
-  onSave?: () => void;
-}
-
-export function CodeMirrorEditor({ initialContent, language, isDark, onChange, onSave }: Props) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const viewRef = useRef<EditorView | null>(null);
-  const onChangeRef = useRef(onChange);
-  const onSaveRef = useRef(onSave);
-  onChangeRef.current = onChange;
-  onSaveRef.current = onSave;
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const langExt = getLanguageExtension(language);
-
-    const saveKeymap = onSave
-      ? keymap.of([{ key: "Mod-s", run: () => { onSaveRef.current?.(); return true; }, preventDefault: true }])
-      : [];
-
-    const state = EditorState.create({
-      doc: initialContent,
-      extensions: [
-        lineNumbers(),
-        highlightActiveLine(),
-        history(),
-        syntaxHighlighting(defaultHighlightStyle),
-        keymap.of([...defaultKeymap, ...historyKeymap, ...completionKeymap, ...searchKeymap]),
-        saveKeymap,
-        autocompletion(),
-        ...(isDark ? [oneDark] : []),
-        ...(langExt ? [langExt] : []),
-        EditorView.updateListener.of((update) => {
-          if (update.docChanged) {
-            onChangeRef.current?.(update.state.doc.toString());
-          }
-        }),
-        EditorView.theme({
-          "&": { height: "100%", fontSize: "13px" },
-          ".cm-scroller": { overflow: "auto", fontFamily: "var(--font-mono)" },
-          ".cm-content": { padding: "8px 0" },
-          ".cm-gutters": { borderRight: "1px solid var(--border)", background: "var(--bg)", color: "var(--text-dim)" },
-          "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": { background: isDark ? "#3a3d4e" : "#b4d5fe" },
-        }),
-      ],
-    });
-
-    const view = new EditorView({
-      state,
-      parent: container,
-    });
-    viewRef.current = view;
-
-    return () => {
-      view.destroy();
-      viewRef.current = null;
-    };
-    // Only mount once — content updates handled by the key below
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [language, isDark]);
-
-  // Update content when initialContent changes (external file change)
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    const currentContent = view.state.doc.toString();
-    if (currentContent !== initialContent) {
-      view.dispatch({
-        changes: { from: 0, to: view.state.doc.length, insert: initialContent },
-      });
-    }
-  }, [initialContent]);
-
-  return <div ref={containerRef} style={{ height: "100%", overflow: "hidden" }} />;
-}

package/components/ConversationSearch.tsx

@@ -1,369 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import type { SessionInfo } from "@/lib/types";
-
-type SearchScope = "current" | "all";
-
-interface SearchMatch {
-  entryId: string;
-  role: "user" | "assistant";
-  timestamp: string;
-  snippet: string;
-}
-
-interface SearchGroup {
-  session: SessionInfo;
-  matches: SearchMatch[];
-  matchCount: number;
-}
-
-interface Props {
-  open: boolean;
-  cwd: string | null;
-  homeDir?: string;
-  onClose: () => void;
-  onSelectSession: (session: SessionInfo) => void;
-}
-
-function shortenCwd(cwd: string, homeDir?: string): string {
-  const path = (homeDir && cwd.startsWith(homeDir)) ? "~" + cwd.slice(homeDir.length) : cwd;
-  const sep = path.includes("/") ? "/" : "\\";
-  const parts = path.split(sep).filter(Boolean);
-  if (parts.length <= 2) return path;
-  return "..." + sep + parts.slice(-2).join(sep);
-}
-
-function formatDate(value: string): string {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return "";
-  return date.toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
-}
-
-function highlightSnippet(snippet: string, query: string): React.ReactNode {
-  const q = query.trim();
-  if (!q) return snippet;
-  const lower = snippet.toLowerCase();
-  const index = lower.indexOf(q.toLowerCase());
-  if (index < 0) return snippet;
-  return (
-    <>
-      {snippet.slice(0, index)}
-      <mark style={{ background: "rgba(37,99,235,0.16)", color: "var(--text)", borderRadius: 3, padding: "0 2px" }}>
-        {snippet.slice(index, index + q.length)}
-      </mark>
-      {snippet.slice(index + q.length)}
-    </>
-  );
-}
-
-export function ConversationSearch({ open, cwd, homeDir, onClose, onSelectSession }: Props) {
-  const [query, setQuery] = useState("");
-  const [scope, setScope] = useState<SearchScope>("current");
-  const [results, setResults] = useState<SearchGroup[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [truncated, setTruncated] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (!open) return;
-    setScope(cwd ? "current" : "all");
-    setTimeout(() => inputRef.current?.focus(), 0);
-  }, [open, cwd]);
-
-  useEffect(() => {
-    if (!open) return;
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
-
-  useEffect(() => {
-    if (!open) return;
-    const trimmed = query.trim();
-    if (trimmed.length < 2) {
-      setResults([]);
-      setLoading(false);
-      setError(null);
-      setTruncated(false);
-      return;
-    }
-
-    const controller = new AbortController();
-    const timer = setTimeout(async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const params = new URLSearchParams({ q: trimmed, scope });
-        if (cwd) params.set("cwd", cwd);
-        const res = await fetch(`/api/search?${params.toString()}`, { signal: controller.signal });
-        if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        const data = await res.json() as { results?: SearchGroup[]; truncated?: boolean; error?: string };
-        if (data.error) throw new Error(data.error);
-        setResults(data.results ?? []);
-        setTruncated(data.truncated ?? false);
-      } catch (err) {
-        if ((err as Error).name !== "AbortError") setError(String(err));
-      } finally {
-        setLoading(false);
-      }
-    }, 180);
-
-    return () => {
-      clearTimeout(timer);
-      controller.abort();
-    };
-  }, [open, query, scope, cwd]);
-
-  if (!open) return null;
-
-  const trimmed = query.trim();
-  const resultCount = results.reduce((sum, group) => sum + group.matches.length, 0);
-
-  return (
-    <div
-      role="dialog"
-      aria-modal="true"
-      aria-label="Search conversation history"
-      style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: 500,
-        display: "flex",
-        alignItems: "flex-start",
-        justifyContent: "center",
-        padding: "8vh 16px 16px",
-        background: "rgba(0,0,0,0.28)",
-      }}
-      onMouseDown={(event) => {
-        if (event.target === event.currentTarget) onClose();
-      }}
-    >
-      <div
-        style={{
-          width: "min(760px, 100%)",
-          maxHeight: "78vh",
-          display: "flex",
-          flexDirection: "column",
-          background: "var(--bg)",
-          border: "1px solid var(--border)",
-          borderRadius: 10,
-          boxShadow: "0 16px 48px rgba(0,0,0,0.24)",
-          overflow: "hidden",
-        }}
-      >
-        <div style={{ padding: 12, borderBottom: "1px solid var(--border)" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                flex: 1,
-                minWidth: 0,
-                background: "var(--bg-hover)",
-                border: "1px solid var(--border)",
-                borderRadius: 8,
-                padding: "0 10px",
-              }}
-            >
-              <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--text-dim)" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-                <circle cx="7" cy="7" r="4.5" />
-                <path d="M10.5 10.5 13.5 13.5" />
-              </svg>
-              <input
-                ref={inputRef}
-                value={query}
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search conversation history..."
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  height: 38,
-                  background: "transparent",
-                  border: "none",
-                  outline: "none",
-                  color: "var(--text)",
-                  fontSize: 14,
-                }}
-              />
-            </div>
-            <button
-              type="button"
-              onClick={onClose}
-              title="Close"
-              style={{
-                width: 34,
-                height: 34,
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                background: "none",
-                border: "none",
-                borderRadius: 7,
-                color: "var(--text-dim)",
-                cursor: "pointer",
-              }}
-              onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; e.currentTarget.style.color = "var(--text)"; }}
-              onMouseLeave={(e) => { e.currentTarget.style.background = "none"; e.currentTarget.style.color = "var(--text-dim)"; }}
-            >
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
-                <path d="M4 4 12 12" />
-                <path d="M12 4 4 12" />
-              </svg>
-            </button>
-          </div>
-
-          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10 }}>
-            <div style={{ display: "inline-flex", padding: 2, background: "var(--bg-hover)", border: "1px solid var(--border)", borderRadius: 7 }}>
-              {([
-                { value: "current" as const, label: "Current project", disabled: !cwd },
-                { value: "all" as const, label: "All history", disabled: false },
-              ]).map((item) => (
-                <button
-                  key={item.value}
-                  type="button"
-                  disabled={item.disabled}
-                  onClick={() => setScope(item.value)}
-                  style={{
-                    height: 24,
-                    padding: "0 9px",
-                    background: scope === item.value ? "var(--bg-selected)" : "transparent",
-                    border: "none",
-                    borderRadius: 5,
-                    color: item.disabled ? "var(--text-dim)" : scope === item.value ? "var(--text)" : "var(--text-muted)",
-                    cursor: item.disabled ? "not-allowed" : "pointer",
-                    fontSize: 11,
-                    fontWeight: 500,
-                  }}
-                >
-                  {item.label}
-                </button>
-              ))}
-            </div>
-            <div style={{ flex: 1, minWidth: 0, color: "var(--text-dim)", fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-              {scope === "current" && cwd ? shortenCwd(cwd, homeDir) : "Searching every saved session"}
-            </div>
-          </div>
-        </div>
-
-        <div style={{ flex: 1, overflowY: "auto", minHeight: 180 }}>
-          {trimmed.length < 2 && (
-            <div style={{ padding: 28, textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>
-              Type at least 2 characters to search saved conversations.
-            </div>
-          )}
-          {trimmed.length >= 2 && loading && results.length === 0 && (
-            <div style={{ padding: 28, textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>
-              Searching...
-            </div>
-          )}
-          {error && (
-            <div style={{ padding: 18, color: "#ef4444", fontSize: 13 }}>
-              {error}
-            </div>
-          )}
-          {trimmed.length >= 2 && !loading && !error && results.length === 0 && (
-            <div style={{ padding: 28, textAlign: "center", color: "var(--text-muted)", fontSize: 13 }}>
-              No matching conversations found.
-            </div>
-          )}
-
-          {results.map((group) => (
-            <div key={group.session.id} style={{ borderBottom: "1px solid var(--border)" }}>
-              <button
-                type="button"
-                onClick={() => {
-                  onSelectSession(group.session);
-                  onClose();
-                }}
-                style={{
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 10,
-                  padding: "10px 12px",
-                  background: "var(--bg-panel)",
-                  border: "none",
-                  borderBottom: "1px solid var(--border)",
-                  color: "var(--text)",
-                  cursor: "pointer",
-                  textAlign: "left",
-                }}
-                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
-                onMouseLeave={(e) => { e.currentTarget.style.background = "var(--bg-panel)"; }}
-              >
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
-                    <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontSize: 13, fontWeight: 600 }}>
-                      {group.session.name || group.session.firstMessage || "(no messages)"}
-                    </span>
-                    <span style={{ flexShrink: 0, color: "var(--text-dim)", fontSize: 11 }}>
-                      {formatDate(group.session.modified)}
-                    </span>
-                  </div>
-                  <div style={{ marginTop: 2, color: "var(--text-dim)", fontSize: 11, fontFamily: "var(--font-mono)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                    {shortenCwd(group.session.cwd, homeDir)}
-                  </div>
-                </div>
-                {group.matchCount > group.matches.length && (
-                  <span style={{ flexShrink: 0, color: "var(--text-muted)", fontSize: 11 }}>
-                    {group.matchCount} matches
-                  </span>
-                )}
-              </button>
-
-              {group.matches.map((match) => (
-                <button
-                  key={match.entryId}
-                  type="button"
-                  onClick={() => {
-                    onSelectSession(group.session);
-                    onClose();
-                  }}
-                  style={{
-                    width: "100%",
-                    padding: "9px 14px 9px 28px",
-                    background: "none",
-                    border: "none",
-                    color: "var(--text-muted)",
-                    cursor: "pointer",
-                    textAlign: "left",
-                  }}
-                  onMouseEnter={(e) => { e.currentTarget.style.background = "var(--bg-hover)"; }}
-                  onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}
-                >
-                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 3 }}>
-                    <span style={{
-                      minWidth: 54,
-                      color: match.role === "user" ? "var(--accent)" : "var(--text-dim)",
-                      fontSize: 11,
-                      fontWeight: 600,
-                      textTransform: "capitalize",
-                    }}>
-                      {match.role}
-                    </span>
-                    <span style={{ color: "var(--text-dim)", fontSize: 11 }}>
-                      {formatDate(match.timestamp)}
-                    </span>
-                  </div>
-                  <div style={{ fontSize: 12, lineHeight: 1.45, color: "var(--text-muted)" }}>
-                    {highlightSnippet(match.snippet, trimmed)}
-                  </div>
-                </button>
-              ))}
-            </div>
-          ))}
-        </div>
-
-        <div style={{ display: "flex", justifyContent: "space-between", padding: "8px 12px", borderTop: "1px solid var(--border)", color: "var(--text-dim)", fontSize: 11 }}>
-          <span>{resultCount > 0 ? `${resultCount}${truncated ? "+" : ""} results` : "Esc to close"}</span>
-          {loading && results.length > 0 && <span>Updating...</span>}
-        </div>
-      </div>
-    </div>
-  );
-}