@seqyuan/annodex 0.1.11 → 0.1.12

package/components/CodeMirrorEditor.tsx

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

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