@seqyuan/annodex 0.1.10 → 0.1.12

package/hooks/useAudio.ts

@@ -0,0 +1,50 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+
+export function useAudio() {
+  const [enabled, setEnabled] = useState<boolean>(() => {
+    if (typeof window === "undefined") return true;
+    const stored = localStorage.getItem("annodex-sound-enabled");
+    return stored === null ? true : stored === "true";
+  });
+
+  const enabledRef = useRef(enabled);
+  useEffect(() => { enabledRef.current = enabled; }, [enabled]);
+
+  const toggle = useCallback(() => {
+    setEnabled((prev) => {
+      const next = !prev;
+      localStorage.setItem("annodex-sound-enabled", String(next));
+      return next;
+    });
+  }, []);
+
+  const playDone = useCallback(() => {
+    if (!enabledRef.current) return;
+    try {
+      const ctx = new AudioContext();
+      const now = ctx.currentTime;
+      const freqs = [523.25, 659.25];
+      freqs.forEach((freq, i) => {
+        const osc = ctx.createOscillator();
+        const gain = ctx.createGain();
+        osc.connect(gain);
+        gain.connect(ctx.destination);
+        osc.type = "sine";
+        osc.frequency.value = freq;
+        const t = now + i * 0.18;
+        gain.gain.setValueAtTime(0, t);
+        gain.gain.linearRampToValueAtTime(0.18, t + 0.02);
+        gain.gain.exponentialRampToValueAtTime(0.001, t + 0.45);
+        osc.start(t);
+        osc.stop(t + 0.45);
+      });
+      setTimeout(() => ctx.close(), 1200);
+    } catch {
+      // AudioContext not available
+    }
+  }, []);
+
+  return { soundEnabled: enabled, onSoundToggle: toggle, playDoneSound: playDone, soundEnabledRef: enabledRef };
+}

package/hooks/useDragDrop.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+
+const SUPPORTED_TYPES = [
+  "image/",
+  "application/pdf",
+  "application/vnd.openxmlformats-officedocument",
+  "application/msword",
+  "application/vnd.ms-",
+];
+
+function isSupported(item: DataTransferItem): boolean {
+  return SUPPORTED_TYPES.some((prefix) => item.type.startsWith(prefix));
+}
+
+export function useDragDrop(onDrop: (files: File[]) => void) {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const counterRef = useRef(0);
+
+  const handleDragEnter = useCallback((e: React.DragEvent) => {
+    const hasSupported = Array.from(e.dataTransfer.items).some(isSupported);
+    if (!hasSupported) return;
+    e.preventDefault();
+    counterRef.current += 1;
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    const hasSupported = Array.from(e.dataTransfer.items).some(isSupported);
+    if (!hasSupported) return;
+    e.preventDefault();
+  }, []);
+
+  const handleDragLeave = useCallback(() => {
+    counterRef.current -= 1;
+    if (counterRef.current <= 0) {
+      counterRef.current = 0;
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    counterRef.current = 0;
+    setIsDragOver(false);
+    const files = Array.from(e.dataTransfer.files);
+    onDrop(files);
+  }, [onDrop]);
+
+  return { isDragOver, handleDragEnter, handleDragOver, handleDragLeave, handleDrop };
+}

package/hooks/useResizable.ts

@@ -0,0 +1,60 @@
+"use client";
+
+import { useRef, useCallback, useEffect, useState } from "react";
+
+interface UseResizableOptions {
+  initialWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  storageKey: string;
+  /** "left" = right panel (drag left to expand), "right" = left sidebar (drag right to expand) */
+  direction?: "left" | "right";
+}
+
+/**
+ * Hook for resizable panel width with localStorage persistence.
+ * Returns width state plus delta-based resize actions for a drag handle.
+ */
+export function useResizable({ initialWidth, minWidth, maxWidth, storageKey, direction = "right" }: UseResizableOptions) {
+  const [width, setWidth] = useState(initialWidth);
+  const [isResizing, setIsResizing] = useState(false);
+  const widthRef = useRef(initialWidth);
+
+  const applyWidth = useCallback((nextWidth: number) => {
+    const newWidth = Math.max(minWidth, Math.min(maxWidth, nextWidth));
+    setWidth(newWidth);
+    widthRef.current = newWidth;
+    document.documentElement.style.setProperty(storageKey, `${newWidth}px`);
+  }, [minWidth, maxWidth, storageKey]);
+
+  // Load persisted width and set CSS variable
+  useEffect(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) {
+        const w = parseInt(stored, 10);
+        if (!isNaN(w) && w >= minWidth && w <= maxWidth) {
+          applyWidth(w);
+          return;
+        }
+      }
+    } catch { /* ignore */ }
+    applyWidth(widthRef.current);
+  }, [storageKey, minWidth, maxWidth, applyWidth]);
+
+  const beginResize = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+
+  const resizeBy = useCallback((delta: number) => {
+    const sign = direction === "left" ? -1 : 1;
+    applyWidth(widthRef.current + delta * sign);
+  }, [applyWidth, direction]);
+
+  const endResize = useCallback(() => {
+    setIsResizing(false);
+    try { localStorage.setItem(storageKey, String(widthRef.current)); } catch { /* ignore */ }
+  }, [storageKey]);
+
+  return { beginResize, endResize, isResizing, resizeBy, width, widthRef };
+}

package/hooks/useTheme.ts

@@ -0,0 +1,85 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+
+type Theme = "light" | "dark";
+
+const listeners = new Set<() => void>();
+
+function subscribe(cb: () => void): () => void {
+  listeners.add(cb);
+  return () => {
+    listeners.delete(cb);
+  };
+}
+
+function getSnapshot(): Theme {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+
+function getServerSnapshot(): Theme {
+  return "light";
+}
+
+type ToggleOrigin = { x: number; y: number };
+
+export function useTheme() {
+  const theme = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+  const toggleTheme = useCallback((origin?: ToggleOrigin) => {
+    const next: Theme = getSnapshot() === "dark" ? "light" : "dark";
+
+    const apply = () => {
+      if (next === "dark") {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+      try {
+        localStorage.setItem("annodex-theme", next);
+      } catch {
+        // ignore storage errors (private mode, quota, etc.)
+      }
+      listeners.forEach((cb) => cb());
+    };
+
+    const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const supportsVT = typeof document.startViewTransition === "function";
+
+    if (!supportsVT || reduceMotion) {
+      apply();
+      return;
+    }
+
+    const x = origin?.x ?? window.innerWidth / 2;
+    const y = origin?.y ?? window.innerHeight / 2;
+    const endRadius = Math.hypot(
+      Math.max(x, window.innerWidth - x),
+      Math.max(y, window.innerHeight - y),
+    );
+
+    const transition = document.startViewTransition(apply);
+    transition.ready
+      .then(() => {
+        document.documentElement.animate(
+          {
+            clipPath: [
+              `circle(0px at ${x}px ${y}px)`,
+              `circle(${endRadius}px at ${x}px ${y}px)`,
+            ],
+          },
+          {
+            duration: 450,
+            easing: "cubic-bezier(0.22, 0.61, 0.36, 1)",
+            pseudoElement: "::view-transition-new(root)",
+          },
+        );
+      })
+      .catch(() => {
+        // transition cancelled — ignore
+      });
+  }, []);
+
+  return { theme, toggleTheme, isDark: theme === "dark" };
+}

package/lib/agent-client.ts

@@ -0,0 +1,39 @@
+// Client-side helper for POST /api/agent/[id].
+//
+// Every /api/agent/[id] route returns one of:
+//   { success: true, data: <result> }
+//   { error: string }              (non-2xx)
+//
+// Call sites previously repeated the same 5-line fetch block 13× in
+// hooks/useAgentSession.ts. This helper collapses that down to one line.
+
+export type AgentCommandResponse<T> = T & { __sessionId?: string };
+
+export async function sendAgentCommand<T = unknown>(
+  sessionId: string,
+  command: Record<string, unknown>,
+): Promise<AgentCommandResponse<T>> {
+  const res = await fetch(`/api/agent/${encodeURIComponent(sessionId)}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(command),
+  });
+  const body = (await res.json().catch(() => ({}))) as {
+    success?: boolean;
+    data?: T;
+    sessionId?: string;
+    error?: string;
+  };
+  if (!res.ok || body.error) {
+    throw new Error(body.error ?? `HTTP ${res.status}`);
+  }
+  const withSessionId = (value: unknown): AgentCommandResponse<T> => value as AgentCommandResponse<T>;
+  if (body.sessionId && body.data && typeof body.data === "object") {
+    if (Array.isArray(body.data)) return withSessionId(body.data);
+    return withSessionId({ ...(body.data as object), __sessionId: body.sessionId });
+  }
+  if (body.sessionId) {
+    return withSessionId({ value: body.data, __sessionId: body.sessionId });
+  }
+  return withSessionId(body.data);
+}