@seqyuan/annodex 0.1.11 → 0.1.12

package/components/ProjectContext.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+interface Props {
+  cwd: string | null;
+  onOpenFile: (filePath: string, fileName: string) => void;
+}
+
+interface ContextFile {
+  name: string;
+  path: string;
+  label: string;
+  description: string;
+  exists: boolean;
+  size?: number;
+  isGlobal: boolean;
+}
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function ProjectContext({ cwd, onOpenFile }: Props) {
+  const [files, setFiles] = useState<ContextFile[]>([]);
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    async function check() {
+      const results: ContextFile[] = [];
+
+      // Global: soul.md
+      try {
+        const res = await fetch("/api/soul");
+        const data = await res.json() as { content?: string; exists?: boolean; size?: number };
+        results.push({
+          name: "SOUL.md",
+          path: "SOUL.md",
+          label: "SOUL.md",
+          description: "Global agent personality & core guidelines",
+          exists: data.exists ?? false,
+          size: data.size,
+          isGlobal: true,
+        });
+      } catch {
+        results.push({ name: "SOUL.md", path: "", label: "SOUL.md", description: "Global agent personality", exists: false, isGlobal: true });
+      }
+
+      // Global: HARNESS.md
+      try {
+        const res = await fetch("/api/harness");
+        const data = await res.json() as { content?: string; exists?: boolean; size?: number };
+        results.push({
+          name: "HARNESS.md",
+          path: "HARNESS.md",
+          label: "HARNESS.md",
+          description: "Behavioral constraints & output guidelines",
+          exists: data.exists ?? false,
+          size: data.size,
+          isGlobal: true,
+        });
+      } catch {
+        results.push({ name: "HARNESS.md", path: "", label: "HARNESS.md", description: "Behavioral constraints", exists: false, isGlobal: true });
+      }
+
+      // Project-level files
+      if (cwd) {
+        const projectFiles = [
+          { name: "AGENTS.md", description: "Project instructions (auto-loaded)" },
+          { name: "memory.md", description: "Self-updating project memory & analysis log" },
+        ];
+
+        for (const pf of projectFiles) {
+          try {
+            const encoded = encodeURIComponent(`${cwd}/${pf.name}`.replace(/^\//, ""));
+            const res = await fetch(`/api/files/${encoded}?type=read`);
+            if (res.ok) {
+              const data = await res.json() as { size?: number; error?: string };
+              if (!data.error) {
+                results.push({
+                  name: pf.name,
+                  path: `${cwd}/${pf.name}`,
+                  label: pf.name,
+                  description: pf.description,
+                  exists: true,
+                  size: data.size,
+                  isGlobal: false,
+                });
+                continue;
+              }
+            }
+          } catch { /* ignore */ }
+          results.push({
+            name: pf.name,
+            path: cwd ? `${cwd}/${pf.name}` : "",
+            label: pf.name,
+            description: pf.description,
+            exists: false,
+            isGlobal: false,
+          });
+        }
+      }
+
+      setFiles(results);
+    }
+
+    check();
+  }, [cwd]);
+
+  const globalFiles = files.filter((f) => f.isGlobal);
+  const projectFiles = files.filter((f) => !f.isGlobal);
+  const hasAny = files.some((f) => f.exists);
+
+  return (
+    <div style={{ borderTop: "1px solid var(--border)", flexShrink: 0 }}>
+      <button
+        onClick={() => setCollapsed((v) => !v)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          padding: "6px 12px",
+          background: "none",
+          border: "none",
+          color: "var(--text-dim)",
+          cursor: "pointer",
+          fontSize: 11,
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+        }}
+      >
+        <svg
+          width="8" height="8" viewBox="0 0 8 8" fill="none"
+          stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"
+          style={{
+            transform: collapsed ? "rotate(-90deg)" : "none",
+            transition: "transform 0.15s",
+          }}
+        >
+          <polyline points="1.5 2.5 4 5 6.5 2.5" />
+        </svg>
+        Context
+        {hasAny && (
+          <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--accent)" }}>
+            {files.filter((f) => f.exists).length}
+          </span>
+        )}
+      </button>
+      {!collapsed && (
+        <div style={{ padding: "0 8px 6px" }}>
+
+          {/* Global section */}
+          <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-dim)", padding: "2px 8px 4px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+            Global
+          </div>
+          {globalFiles.map((file) => {
+            const isSoul = file.name === "SOUL.md";
+            const isHarness = file.name === "HARNESS.md";
+            const specialPath = isSoul ? "__soul__" : isHarness ? "__harness__" : null;
+            return (
+              <ContextFileItem
+                key={file.name}
+                file={file}
+                cwd={cwd}
+                onOpen={file.exists && specialPath ? () => onOpenFile(specialPath, file.name) : undefined}
+                onCreate={!file.exists && specialPath ? () => onOpenFile(specialPath, file.name) : undefined}
+              />
+            );
+          })}
+
+          {/* Project section */}
+          {cwd && (
+            <>
+              <div style={{ fontSize: 10, fontWeight: 600, color: "var(--text-dim)", padding: "2px 8px 4px", textTransform: "uppercase", letterSpacing: "0.05em" }}>
+                Project
+              </div>
+              {projectFiles.map((file) => (
+                <ContextFileItem
+                  key={file.name}
+                  file={file}
+                  cwd={cwd}
+                  onOpen={file.exists ? () => onOpenFile(file.path, file.name) : undefined}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ContextFileItem({ file, onOpen, onCreate }: {
+  file: ContextFile;
+  cwd: string | null;
+  onOpen?: () => void;
+  onCreate?: () => void;
+}) {
+  return (
+    <button
+      onClick={onOpen ?? onCreate}
+      title={file.description}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        width: "100%",
+        padding: "5px 8px",
+        background: "none",
+        border: "none",
+        borderRadius: 5,
+        color: file.exists ? "var(--text-muted)" : "var(--text-dim)",
+        cursor: file.exists || onCreate ? "pointer" : "default",
+        fontSize: 12,
+        textAlign: "left",
+        opacity: file.exists || onCreate ? 1 : 0.55,
+      }}
+      onMouseEnter={(e) => {
+        if (file.exists || onCreate) {
+          e.currentTarget.style.background = "var(--bg-hover)";
+          e.currentTarget.style.color = "var(--text)";
+        }
+      }}
+      onMouseLeave={(e) => {
+        e.currentTarget.style.background = "none";
+        e.currentTarget.style.color = file.exists ? "var(--text-muted)" : "var(--text-dim)";
+      }}
+    >
+      <span style={{ fontSize: 12, flexShrink: 0 }}>
+        {file.exists ? "📝" : "➕"}
+      </span>
+      <span style={{
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      }}>
+        {file.label}
+      </span>
+      {file.exists && file.size !== undefined && (
+        <span style={{ marginLeft: "auto", fontSize: 10, color: "var(--text-dim)" }}>
+          {formatSize(file.size)}
+        </span>
+      )}
+    </button>
+  );
+}

package/components/ProjectFolderPicker.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+interface FolderEntry {
+  name: string;
+  path: string;
+}
+
+interface BrowseResponse {
+  current?: string;
+  parent?: string | null;
+  directories?: FolderEntry[];
+  drives?: string[];
+  error?: string;
+}
+
+interface ProjectFolderPickerProps {
+  open: boolean;
+  initialPath?: string | null;
+  onClose: () => void;
+  onSelect: (path: string) => void;
+}
+
+export function ProjectFolderPicker({ open, initialPath, onClose, onSelect }: ProjectFolderPickerProps) {
+  const [currentDir, setCurrentDir] = useState("");
+  const [parentDir, setParentDir] = useState<string | null>(null);
+  const [directories, setDirectories] = useState<FolderEntry[]>([]);
+  const [drives, setDrives] = useState<string[]>([]);
+  const [pathInput, setPathInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const browse = useCallback(async (dir?: string | null) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const url = dir ? `/api/projects/browse?dir=${encodeURIComponent(dir)}` : "/api/projects/browse";
+      const res = await fetch(url);
+      const data = await res.json() as BrowseResponse;
+      if (!res.ok || data.error) throw new Error(data.error ?? `HTTP ${res.status}`);
+      setCurrentDir(data.current ?? "");
+      setParentDir(data.parent ?? null);
+      setDirectories(data.directories ?? []);
+      setDrives(data.drives ?? []);
+      setPathInput(data.current ?? "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) void browse(initialPath || undefined);
+  }, [browse, initialPath, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose, open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onClose();
+      }}
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: 1200,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 18,
+        background: "rgba(0,0,0,0.34)",
+      }}
+    >
+      <div style={{ width: "min(560px, 100%)", maxHeight: "min(720px, 88dvh)", display: "flex", flexDirection: "column", background: "var(--bg)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 12px 40px rgba(0,0,0,0.25)", overflow: "hidden" }}>
+        <div style={{ height: 48, padding: "0 14px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid var(--border)" }}>
+          <div>
+            <div style={{ color: "var(--text)", fontSize: 14, fontWeight: 750 }}>Select project path</div>
+            <div style={{ marginTop: 2, color: "var(--text-dim)", fontSize: 11 }}>Server filesystem</div>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close"
+            title="Close"
+            style={{ width: 30, height: 30, border: "none", borderRadius: 6, background: "transparent", color: "var(--text-muted)", cursor: "pointer", fontSize: 20, lineHeight: 1 }}
+            onMouseEnter={(event) => { event.currentTarget.style.background = "var(--bg-hover)"; event.currentTarget.style.color = "var(--text)"; }}
+            onMouseLeave={(event) => { event.currentTarget.style.background = "transparent"; event.currentTarget.style.color = "var(--text-muted)"; }}
+          >
+            x
+          </button>
+        </div>
+
+        <div style={{ padding: 12, borderBottom: "1px solid var(--border)" }}>
+          <form
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (pathInput.trim()) void browse(pathInput.trim());
+            }}
+            style={{ display: "flex", gap: 8 }}
+          >
+            <input
+              value={pathInput}
+              onChange={(event) => setPathInput(event.target.value)}
+              placeholder="/path/to/project"
+              style={{ flex: 1, minWidth: 0, height: 32, padding: "0 10px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text)", fontFamily: "var(--font-mono)", fontSize: 12, outline: "none" }}
+            />
+            <button type="submit" style={{ height: 32, padding: "0 11px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}>
+              Go
+            </button>
+          </form>
+        </div>
+
+        <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px", borderBottom: "1px solid var(--border)", background: "var(--bg-panel)" }}>
+          <button
+            type="button"
+            onClick={() => parentDir && void browse(parentDir)}
+            disabled={!parentDir}
+            style={{ width: 28, height: 28, border: "1px solid var(--border)", borderRadius: 6, background: parentDir ? "var(--bg)" : "transparent", color: parentDir ? "var(--text-muted)" : "var(--text-dim)", cursor: parentDir ? "pointer" : "default", padding: 0 }}
+            title="Up"
+          >
+            <svg width="13" height="13" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="2 6.5 5 3.5 8 6.5" />
+            </svg>
+          </button>
+          {drives.length > 0 && (
+            <select
+              value={drives.find((drive) => currentDir.toLowerCase().startsWith(drive.toLowerCase())) ?? ""}
+              onChange={(event) => { if (event.target.value) void browse(event.target.value); }}
+              style={{ height: 28, border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg)", color: "var(--text-muted)", fontSize: 12 }}
+            >
+              <option value="">Drive</option>
+              {drives.map((drive) => <option key={drive} value={drive}>{drive}</option>)}
+            </select>
+          )}
+          <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11 }} title={currentDir}>
+            {currentDir}
+          </span>
+        </div>
+
+        <div style={{ flex: 1, minHeight: 220, maxHeight: 360, overflowY: "auto", padding: 6 }}>
+          {loading ? (
+            <div style={{ padding: 18, color: "var(--text-muted)", fontSize: 12 }}>Loading...</div>
+          ) : error ? (
+            <div style={{ padding: 18, color: "#f87171", fontSize: 12 }}>{error}</div>
+          ) : directories.length === 0 ? (
+            <div style={{ padding: 18, color: "var(--text-muted)", fontSize: 12 }}>No subdirectories</div>
+          ) : (
+            directories.map((dir) => (
+              <button
+                key={dir.path}
+                type="button"
+                onClick={() => void browse(dir.path)}
+                style={{ width: "100%", display: "flex", alignItems: "center", gap: 9, padding: "8px 9px", border: "none", borderRadius: 6, background: "transparent", color: "var(--text-muted)", cursor: "pointer", textAlign: "left", fontSize: 12 }}
+                onMouseEnter={(event) => { event.currentTarget.style.background = "var(--bg-hover)"; event.currentTarget.style.color = "var(--text)"; }}
+                onMouseLeave={(event) => { event.currentTarget.style.background = "transparent"; event.currentTarget.style.color = "var(--text-muted)"; }}
+                title={dir.path}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--accent)", flexShrink: 0 }}>
+                  <path d="M3 6.5A2.5 2.5 0 0 1 5.5 4H10l2 2.5h6.5A2.5 2.5 0 0 1 21 9v8.5A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5v-11Z" />
+                </svg>
+                <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{dir.name}</span>
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ color: "var(--text-dim)", flexShrink: 0 }}>
+                  <polyline points="3.5 2 6.5 5 3.5 8" />
+                </svg>
+              </button>
+            ))
+          )}
+        </div>
+
+        <div style={{ padding: 12, borderTop: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
+          <div style={{ minWidth: 0, color: "var(--text-dim)", fontFamily: "var(--font-mono)", fontSize: 11, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={currentDir}>
+            {currentDir}
+          </div>
+          <div style={{ display: "flex", gap: 7, flexShrink: 0 }}>
+            <button type="button" onClick={onClose} style={{ height: 32, padding: "0 12px", border: "1px solid var(--border)", borderRadius: 6, background: "var(--bg-panel)", color: "var(--text-muted)", cursor: "pointer", fontSize: 12 }}>
+              Cancel
+            </button>
+            <button
+              type="button"
+              onClick={() => currentDir && onSelect(currentDir)}
+              disabled={!currentDir}
+              style={{ height: 32, padding: "0 12px", border: "none", borderRadius: 6, background: currentDir ? "var(--accent)" : "var(--bg-hover)", color: currentDir ? "#fff" : "var(--text-dim)", cursor: currentDir ? "pointer" : "default", fontSize: 12, fontWeight: 650 }}
+            >
+              Select
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}