@atercates/claude-deck 0.2.1

package/hooks/useDevServersManager.ts

@@ -0,0 +1,73 @@
+import { useState, useCallback } from "react";
+import {
+  useDevServersQuery,
+  useStopDevServer,
+  useRestartDevServer,
+  useRemoveDevServer,
+  useCreateDevServer,
+} from "@/data/dev-servers";
+
+interface CreateDevServerOptions {
+  projectId: string;
+  type: "node" | "docker";
+  name: string;
+  command: string;
+  workingDirectory: string;
+  ports?: number[];
+}
+
+export function useDevServersManager() {
+  const { data: devServers = [] } = useDevServersQuery();
+  const [startDevServerProjectId, setStartDevServerProjectId] = useState<
+    string | null
+  >(null);
+
+  const stopMutation = useStopDevServer();
+  const restartMutation = useRestartDevServer();
+  const removeMutation = useRemoveDevServer();
+  const createMutation = useCreateDevServer();
+
+  const startDevServer = useCallback((projectId: string) => {
+    setStartDevServerProjectId(projectId);
+  }, []);
+
+  const stopDevServer = useCallback(
+    async (serverId: string) => {
+      await stopMutation.mutateAsync(serverId);
+    },
+    [stopMutation]
+  );
+
+  const restartDevServer = useCallback(
+    async (serverId: string) => {
+      await restartMutation.mutateAsync(serverId);
+    },
+    [restartMutation]
+  );
+
+  const removeDevServer = useCallback(
+    async (serverId: string) => {
+      await removeMutation.mutateAsync(serverId);
+    },
+    [removeMutation]
+  );
+
+  const createDevServer = useCallback(
+    async (opts: CreateDevServerOptions) => {
+      await createMutation.mutateAsync(opts);
+      setStartDevServerProjectId(null);
+    },
+    [createMutation]
+  );
+
+  return {
+    devServers,
+    startDevServerProjectId,
+    setStartDevServerProjectId,
+    startDevServer,
+    stopDevServer,
+    restartDevServer,
+    removeDevServer,
+    createDevServer,
+  };
+}

package/hooks/useDirectoryBrowser.ts

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState, useCallback, useMemo, useRef } from "react";
+import { useDirectoryFilesQuery } from "@/data/files";
+import type { FileNode } from "@/lib/file-utils";
+
+interface UseDirectoryBrowserOptions {
+  initialPath?: string;
+  /** Filter which files to show (e.g., directories only) */
+  filter?: (node: FileNode) => boolean;
+}
+
+function sortFiles(files: FileNode[]): FileNode[] {
+  return [...files].sort((a, b) => {
+    if (a.type === "directory" && b.type !== "directory") return -1;
+    if (a.type !== "directory" && b.type === "directory") return 1;
+    return a.name.localeCompare(b.name);
+  });
+}
+
+export function useDirectoryBrowser(options: UseDirectoryBrowserOptions = {}) {
+  const { initialPath = "~", filter } = options;
+  const filterRef = useRef(filter);
+  filterRef.current = filter;
+
+  const [requestedPath, setRequestedPath] = useState(initialPath);
+  const [search, setSearch] = useState("");
+
+  const { data, isPending, error } = useDirectoryFilesQuery(requestedPath);
+
+  // Resolved path for display/navigation (e.g., "~" → "/Users/saad")
+  const currentPath = data?.resolvedPath || requestedPath;
+
+  // Filter and sort files from query data
+  const files = useMemo(() => {
+    if (!data?.files) return [];
+    const items = filterRef.current
+      ? data.files.filter(filterRef.current)
+      : data.files;
+    return sortFiles(items);
+  }, [data?.files]);
+
+  const filteredFiles = useMemo(
+    () =>
+      search
+        ? files.filter((f) =>
+            f.name.toLowerCase().includes(search.toLowerCase())
+          )
+        : files,
+    [files, search]
+  );
+
+  const navigateTo = useCallback((path: string) => {
+    setSearch("");
+    setRequestedPath(path);
+  }, []);
+
+  const navigateUp = useCallback(() => {
+    const parts = currentPath.split("/").filter(Boolean);
+    if (parts.length > 1) {
+      parts.pop();
+      navigateTo("/" + parts.join("/"));
+    } else {
+      navigateTo("/");
+    }
+  }, [currentPath, navigateTo]);
+
+  const navigateHome = useCallback(() => {
+    navigateTo("~");
+  }, [navigateTo]);
+
+  const pathSegments = useMemo(
+    () => currentPath.split("/").filter(Boolean),
+    [currentPath]
+  );
+
+  return {
+    currentPath,
+    files,
+    filteredFiles,
+    loading: isPending,
+    error: error?.message || null,
+    search,
+    setSearch,
+    pathSegments,
+    navigateTo,
+    navigateUp,
+    navigateHome,
+  };
+}

package/hooks/useDrawerAnimation.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect, useRef } from "react";
+
+/**
+ * Hook for smooth drawer enter animations.
+ * Uses double requestAnimationFrame to trigger CSS transition after mount.
+ */
+export function useDrawerAnimation(open: boolean) {
+  const [isAnimatingIn, setIsAnimatingIn] = useState(false);
+  const hasAnimated = useRef(false);
+
+  useEffect(() => {
+    if (open && !hasAnimated.current) {
+      hasAnimated.current = true;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsAnimatingIn(true);
+        });
+      });
+    }
+    if (!open) {
+      hasAnimated.current = false;
+      setIsAnimatingIn(false);
+    }
+  }, [open]);
+
+  return isAnimatingIn;
+}

package/hooks/useFileDrop.ts

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useCallback, useEffect, type RefObject } from "react";
+
+interface UseFileDropOptions {
+  /** Disable drop handling (e.g., while uploading) */
+  disabled?: boolean;
+}
+
+interface DragHandlers {
+  onDragOver: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+}
+
+/**
+ * Hook for handling file drag and drop on a container element.
+ *
+ * @param containerRef - Ref to the container element for relatedTarget checking
+ * @param onFileDrop - Callback when a file is dropped
+ * @param options - Optional configuration
+ * @returns isDragging state and drag event handlers to spread onto the container
+ */
+export function useFileDrop(
+  containerRef: RefObject<HTMLElement | null>,
+  onFileDrop: (file: File) => void,
+  options?: UseFileDropOptions
+): { isDragging: boolean; dragHandlers: DragHandlers } {
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Reset drag state when disabled
+  useEffect(() => {
+    if (options?.disabled) {
+      setIsDragging(false);
+    }
+  }, [options?.disabled]);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!options?.disabled) {
+        setIsDragging(true);
+      }
+    },
+    [options?.disabled]
+  );
+
+  const handleDragLeave = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      // Only set to false if leaving the container entirely
+      // This prevents flickering when moving over nested elements
+      if (!containerRef.current?.contains(e.relatedTarget as Node)) {
+        setIsDragging(false);
+      }
+    },
+    [containerRef]
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+
+      // Don't process drops if disabled
+      if (options?.disabled) return;
+
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        onFileDrop(files[0]);
+      }
+    },
+    [onFileDrop, options?.disabled]
+  );
+
+  return {
+    isDragging,
+    dragHandlers: {
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+    },
+  };
+}

package/hooks/useFileEditor.ts

@@ -0,0 +1,184 @@
+import { useState, useCallback } from "react";
+import { getLanguageFromExtension } from "@/lib/file-utils";
+
+export interface OpenFile {
+  path: string;
+  content: string;
+  currentContent: string;
+  isBinary: boolean;
+  language: string;
+}
+
+export interface UseFileEditorReturn {
+  openFiles: OpenFile[];
+  activeFilePath: string | null;
+  loading: boolean;
+  saving: boolean;
+  openFile: (path: string) => Promise<void>;
+  closeFile: (path: string) => void;
+  setActiveFile: (path: string) => void;
+  updateContent: (path: string, content: string) => void;
+  saveFile: (path: string) => Promise<{ success: boolean; error?: string }>;
+  saveAllFiles: () => Promise<void>;
+  isDirty: (path: string) => boolean;
+  hasUnsavedChanges: boolean;
+  getFile: (path: string) => OpenFile | undefined;
+  reset: () => void;
+}
+
+export function useFileEditor(): UseFileEditorReturn {
+  const [openFiles, setOpenFiles] = useState<OpenFile[]>([]);
+  const [activeFilePath, setActiveFilePath] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const getFile = useCallback(
+    (path: string) => openFiles.find((f) => f.path === path),
+    [openFiles]
+  );
+
+  const isDirty = useCallback(
+    (path: string) => {
+      const file = openFiles.find((f) => f.path === path);
+      return file ? file.content !== file.currentContent : false;
+    },
+    [openFiles]
+  );
+
+  const hasUnsavedChanges = openFiles.some(
+    (f) => f.content !== f.currentContent
+  );
+
+  const openFile = useCallback(
+    async (path: string) => {
+      // Check if file is already open
+      const existing = openFiles.find((f) => f.path === path);
+      if (existing) {
+        setActiveFilePath(path);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const res = await fetch(
+          `/api/files/content?path=${encodeURIComponent(path)}`
+        );
+        const data = await res.json();
+
+        if (data.error) {
+          console.error("Failed to open file:", data.error);
+          return;
+        }
+
+        const ext = path.split(".").pop() || "";
+        const newFile: OpenFile = {
+          path: data.path,
+          content: data.content,
+          currentContent: data.content,
+          isBinary: data.isBinary,
+          language: getLanguageFromExtension(ext),
+        };
+
+        setOpenFiles((prev) => [...prev, newFile]);
+        setActiveFilePath(data.path);
+      } catch (error) {
+        console.error("Failed to open file:", error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [openFiles]
+  );
+
+  const closeFile = useCallback((path: string) => {
+    setOpenFiles((prev) => {
+      const newFiles = prev.filter((f) => f.path !== path);
+      // Update active file if we closed the active one
+      setActiveFilePath((currentActive) => {
+        if (currentActive !== path) return currentActive;
+        // Select the next file, or previous, or null
+        const closedIndex = prev.findIndex((f) => f.path === path);
+        if (newFiles.length === 0) return null;
+        if (closedIndex >= newFiles.length)
+          return newFiles[newFiles.length - 1].path;
+        return newFiles[closedIndex].path;
+      });
+      return newFiles;
+    });
+  }, []);
+
+  const updateContent = useCallback((path: string, content: string) => {
+    setOpenFiles((prev) =>
+      prev.map((f) => (f.path === path ? { ...f, currentContent: content } : f))
+    );
+  }, []);
+
+  const saveFile = useCallback(
+    async (path: string): Promise<{ success: boolean; error?: string }> => {
+      const file = openFiles.find((f) => f.path === path);
+      if (!file) return { success: false, error: "File not found" };
+      if (file.isBinary)
+        return { success: false, error: "Cannot save binary files" };
+
+      setSaving(true);
+      try {
+        const res = await fetch("/api/files/content", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ path, content: file.currentContent }),
+        });
+        const data = await res.json();
+
+        if (data.error) {
+          return { success: false, error: data.error };
+        }
+
+        // Update the saved content to match current
+        setOpenFiles((prev) =>
+          prev.map((f) =>
+            f.path === path ? { ...f, content: f.currentContent } : f
+          )
+        );
+
+        return { success: true };
+      } catch (error) {
+        return {
+          success: false,
+          error: error instanceof Error ? error.message : "Failed to save",
+        };
+      } finally {
+        setSaving(false);
+      }
+    },
+    [openFiles]
+  );
+
+  const saveAllFiles = useCallback(async () => {
+    const dirtyFiles = openFiles.filter((f) => f.content !== f.currentContent);
+    for (const file of dirtyFiles) {
+      await saveFile(file.path);
+    }
+  }, [openFiles, saveFile]);
+
+  const reset = useCallback(() => {
+    setOpenFiles([]);
+    setActiveFilePath(null);
+  }, []);
+
+  return {
+    openFiles,
+    activeFilePath,
+    loading,
+    saving,
+    openFile,
+    closeFile,
+    setActiveFile: setActiveFilePath,
+    updateContent,
+    saveFile,
+    saveAllFiles,
+    isDirty,
+    hasUnsavedChanges,
+    getFile,
+    reset,
+  };
+}

package/hooks/useGroups.ts

@@ -0,0 +1,37 @@
+import { useCallback } from "react";
+import { useToggleGroup, useCreateGroup, useDeleteGroup } from "@/data/groups";
+
+export function useGroups() {
+  const toggleMutation = useToggleGroup();
+  const createMutation = useCreateGroup();
+  const deleteMutation = useDeleteGroup();
+
+  const toggleGroup = useCallback(
+    async (path: string, expanded: boolean) => {
+      await toggleMutation.mutateAsync({ path, expanded });
+    },
+    [toggleMutation]
+  );
+
+  const createGroup = useCallback(
+    async (name: string, parentPath?: string) => {
+      await createMutation.mutateAsync({ name, parentPath });
+    },
+    [createMutation]
+  );
+
+  const deleteGroup = useCallback(
+    async (path: string) => {
+      if (!confirm("Delete this group? Sessions will be moved to parent."))
+        return;
+      await deleteMutation.mutateAsync(path);
+    },
+    [deleteMutation]
+  );
+
+  return {
+    toggleGroup,
+    createGroup,
+    deleteGroup,
+  };
+}

package/hooks/useHomePath.ts

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+let cachedHomePath: string | null = null;
+
+export function useHomePath() {
+  const [homePath, setHomePath] = useState<string | null>(cachedHomePath);
+
+  useEffect(() => {
+    if (cachedHomePath) return;
+    fetch("/api/files?path=~")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.path) {
+          cachedHomePath = data.path;
+          setHomePath(data.path);
+        }
+      })
+      .catch(() => {});
+  }, []);
+
+  const toTildePath = useCallback(
+    (absolutePath: string) => {
+      if (homePath && absolutePath.startsWith(homePath)) {
+        return "~" + absolutePath.slice(homePath.length);
+      }
+      return absolutePath;
+    },
+    [homePath]
+  );
+
+  return { homePath, toTildePath };
+}

package/hooks/useKeyRepeat.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import { useRef, useCallback } from "react";
+
+// Trigger haptic feedback if available
+function haptic() {
+  if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+    navigator.vibrate(5);
+  }
+}
+
+export function useKeyRepeat(onKeyPress: () => void) {
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const repeatCountRef = useRef(0);
+
+  const startRepeat = useCallback(() => {
+    // Immediate first press
+    haptic();
+    onKeyPress();
+    repeatCountRef.current = 0;
+
+    // Start repeating after initial delay (like native keyboard)
+    timeoutRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(() => {
+        haptic();
+        onKeyPress();
+        repeatCountRef.current++;
+
+        // Accelerate after many repeats (more gradual than before)
+        if (repeatCountRef.current === 15 && intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = setInterval(() => {
+            haptic();
+            onKeyPress();
+          }, 80); // Fast repeat (was 50, now slower)
+        }
+      }, 150); // Initial repeat speed (was 120, now slower)
+    }, 500); // Initial delay before repeat starts (was 400, now longer)
+  }, [onKeyPress]);
+
+  const stopRepeat = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    repeatCountRef.current = 0;
+  }, []);
+
+  return { startRepeat, stopRepeat };
+}

package/hooks/useKeybarVisibility.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState, useCallback, useEffect } from "react";
+
+const STORAGE_KEY = "agentOS-keybar-visible";
+
+/**
+ * Hook to manage mobile keybar visibility with localStorage persistence.
+ * Default: hidden on mobile to maximize terminal space.
+ */
+export function useKeybarVisibility() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  // Load persisted state on mount
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "true") {
+      setIsVisible(true);
+    }
+  }, []);
+
+  const toggle = useCallback(() => {
+    setIsVisible((prev) => {
+      const next = !prev;
+      localStorage.setItem(STORAGE_KEY, String(next));
+      return next;
+    });
+  }, []);
+
+  const show = useCallback(() => {
+    setIsVisible(true);
+    localStorage.setItem(STORAGE_KEY, "true");
+  }, []);
+
+  const hide = useCallback(() => {
+    setIsVisible(false);
+    localStorage.setItem(STORAGE_KEY, "false");
+  }, []);
+
+  return { isVisible, toggle, show, hide };
+}