@atercates/claude-deck 0.2.1

package/contexts/PaneContext.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  type ReactNode,
+} from "react";
+import {
+  type PaneState,
+  type PaneData,
+  type TabData,
+  createInitialPaneState,
+  createPaneData,
+  createTab,
+  splitPane,
+  closePane,
+  countPanes,
+  savePaneState,
+  loadPaneState,
+  MAX_PANES,
+} from "@/lib/panes";
+import { useViewport } from "@/hooks/useViewport";
+
+interface PaneContextValue {
+  state: PaneState;
+  focusedPaneId: string;
+  canSplit: boolean;
+  canClose: boolean;
+  isMobile: boolean;
+  focusPane: (paneId: string) => void;
+  splitHorizontal: (paneId: string) => void;
+  splitVertical: (paneId: string) => void;
+  close: (paneId: string) => void;
+  // Tab management
+  addTab: (paneId: string) => void;
+  closeTab: (paneId: string, tabId: string) => void;
+  switchTab: (paneId: string, tabId: string) => void;
+  // Session management (operates on active tab)
+  attachSession: (
+    paneId: string,
+    sessionId: string,
+    tmuxName: string,
+    sessionName?: string,
+    claudeProjectName?: string,
+    workingDirectory?: string
+  ) => void;
+  detachSession: (paneId: string) => void;
+  reattachSession: (paneId: string) => void;
+  getPaneData: (paneId: string) => PaneData;
+  getActiveTab: (paneId: string) => TabData | null;
+}
+
+const PaneContext = createContext<PaneContextValue | null>(null);
+
+// Default pane data for migration from old format
+const defaultPaneData: PaneData = createPaneData();
+
+export function PaneProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<PaneState>(createInitialPaneState);
+  const [hydrated, setHydrated] = useState(false);
+  const { isMobile } = useViewport();
+
+  // Load from localStorage after hydration
+  useEffect(() => {
+    const saved = loadPaneState();
+    if (saved) {
+      // Migrate old pane data format if needed
+      const migratedPanes: Record<string, PaneData> = {};
+      for (const [paneId, paneData] of Object.entries(saved.panes)) {
+        if ("tabs" in paneData && Array.isArray(paneData.tabs)) {
+          // New format
+          migratedPanes[paneId] = paneData as PaneData;
+        } else {
+          // Old format - migrate to new
+          const oldData = paneData as {
+            sessionId?: string | null;
+            attachedTmux?: string | null;
+          };
+          const tab = createTab();
+          tab.sessionId = oldData.sessionId || null;
+          tab.attachedTmux = oldData.attachedTmux || null;
+          migratedPanes[paneId] = {
+            tabs: [tab],
+            activeTabId: tab.id,
+          };
+        }
+      }
+      setState({ ...saved, panes: migratedPanes });
+    }
+    setHydrated(true);
+  }, []);
+
+  // Persist state changes to localStorage (only after hydration)
+  useEffect(() => {
+    if (hydrated) {
+      savePaneState(state);
+    }
+  }, [state, hydrated]);
+
+  const focusPane = useCallback((paneId: string) => {
+    setState((prev) => ({ ...prev, focusedPaneId: paneId }));
+  }, []);
+
+  const splitHorizontal = useCallback((paneId: string) => {
+    setState((prev) => {
+      const newState = splitPane(prev, paneId, "horizontal");
+      return newState || prev;
+    });
+  }, []);
+
+  const splitVertical = useCallback((paneId: string) => {
+    setState((prev) => {
+      const newState = splitPane(prev, paneId, "vertical");
+      return newState || prev;
+    });
+  }, []);
+
+  const close = useCallback((paneId: string) => {
+    setState((prev) => {
+      const newState = closePane(prev, paneId);
+      return newState || prev;
+    });
+  }, []);
+
+  // Tab management
+  const addTab = useCallback((paneId: string) => {
+    setState((prev) => {
+      const pane = prev.panes[paneId];
+      if (!pane) return prev;
+      const newTab = createTab();
+      return {
+        ...prev,
+        panes: {
+          ...prev.panes,
+          [paneId]: {
+            ...pane,
+            tabs: [...pane.tabs, newTab],
+            activeTabId: newTab.id,
+          },
+        },
+      };
+    });
+  }, []);
+
+  const closeTab = useCallback((paneId: string, tabId: string) => {
+    setState((prev) => {
+      const pane = prev.panes[paneId];
+      if (!pane || pane.tabs.length <= 1) return prev; // Keep at least one tab
+
+      const newTabs = pane.tabs.filter((t) => t.id !== tabId);
+      const newActiveTabId =
+        pane.activeTabId === tabId ? newTabs[0].id : pane.activeTabId;
+
+      return {
+        ...prev,
+        panes: {
+          ...prev.panes,
+          [paneId]: {
+            ...pane,
+            tabs: newTabs,
+            activeTabId: newActiveTabId,
+          },
+        },
+      };
+    });
+  }, []);
+
+  const switchTab = useCallback((paneId: string, tabId: string) => {
+    setState((prev) => {
+      const pane = prev.panes[paneId];
+      if (!pane) return prev;
+      return {
+        ...prev,
+        panes: {
+          ...prev.panes,
+          [paneId]: {
+            ...pane,
+            activeTabId: tabId,
+          },
+        },
+      };
+    });
+  }, []);
+
+  // Attach session to active tab
+  const attachSession = useCallback(
+    (
+      paneId: string,
+      sessionId: string,
+      tmuxName: string,
+      sessionName?: string,
+      claudeProjectName?: string,
+      workingDirectory?: string
+    ) => {
+      setState((prev) => {
+        const pane = prev.panes[paneId];
+        if (!pane) return prev;
+
+        const newTabs = pane.tabs.map((tab) =>
+          tab.id === pane.activeTabId
+            ? {
+                ...tab,
+                sessionId,
+                sessionName: sessionName ?? null,
+                claudeProjectName: claudeProjectName ?? null,
+                workingDirectory: workingDirectory ?? null,
+                attachedTmux: tmuxName,
+              }
+            : tab
+        );
+
+        return {
+          ...prev,
+          panes: {
+            ...prev.panes,
+            [paneId]: { ...pane, tabs: newTabs },
+          },
+        };
+      });
+    },
+    []
+  );
+
+  // Detach session from active tab (preserves reference for re-attach)
+  const detachSession = useCallback((paneId: string) => {
+    setState((prev) => {
+      const pane = prev.panes[paneId];
+      if (!pane) return prev;
+
+      const newTabs = pane.tabs.map((tab) =>
+        tab.id === pane.activeTabId
+          ? {
+              ...tab,
+              detachedTmux: tab.attachedTmux,
+              detachedSessionId: tab.sessionId,
+              sessionId: null,
+              attachedTmux: null,
+            }
+          : tab
+      );
+
+      return {
+        ...prev,
+        panes: {
+          ...prev.panes,
+          [paneId]: { ...pane, tabs: newTabs },
+        },
+      };
+    });
+  }, []);
+
+  // Re-attach to the last detached session
+  const reattachSession = useCallback((paneId: string) => {
+    setState((prev) => {
+      const pane = prev.panes[paneId];
+      if (!pane) return prev;
+
+      const newTabs = pane.tabs.map((tab) =>
+        tab.id === pane.activeTabId && tab.detachedTmux
+          ? {
+              ...tab,
+              sessionId: tab.detachedSessionId,
+              attachedTmux: tab.detachedTmux,
+              detachedTmux: null,
+              detachedSessionId: null,
+            }
+          : tab
+      );
+
+      return {
+        ...prev,
+        panes: {
+          ...prev.panes,
+          [paneId]: { ...pane, tabs: newTabs },
+        },
+      };
+    });
+  }, []);
+
+  const getPaneData = useCallback(
+    (paneId: string): PaneData => {
+      return state.panes[paneId] || defaultPaneData;
+    },
+    [state.panes]
+  );
+
+  const getActiveTab = useCallback(
+    (paneId: string): TabData | null => {
+      const pane = state.panes[paneId];
+      if (!pane) return null;
+      return pane.tabs.find((t) => t.id === pane.activeTabId) || null;
+    },
+    [state.panes]
+  );
+
+  // On mobile: disable splits (single pane only)
+  const canSplit = !isMobile && countPanes(state.layout) < MAX_PANES;
+  const canClose = !isMobile && countPanes(state.layout) > 1;
+
+  return (
+    <PaneContext.Provider
+      value={{
+        state,
+        focusedPaneId: state.focusedPaneId,
+        canSplit,
+        canClose,
+        isMobile,
+        focusPane,
+        splitHorizontal,
+        splitVertical,
+        close,
+        addTab,
+        closeTab,
+        switchTab,
+        attachSession,
+        detachSession,
+        reattachSession,
+        getPaneData,
+        getActiveTab,
+      }}
+    >
+      {children}
+    </PaneContext.Provider>
+  );
+}
+
+export function usePanes() {
+  const context = useContext(PaneContext);
+  if (!context) {
+    throw new Error("usePanes must be used within a PaneProvider");
+  }
+  return context;
+}

package/data/claude/index.ts

@@ -0,0 +1,9 @@
+export { claudeKeys } from "./keys";
+export {
+  useClaudeProjectsQuery,
+  useClaudeSessionsQuery,
+  useHideItem,
+  useUnhideItem,
+} from "./queries";
+export type { ClaudeProject, ClaudeSession } from "./queries";
+export { useClaudeUpdates } from "./useClaudeUpdates";

package/data/claude/keys.ts

@@ -0,0 +1,6 @@
+export const claudeKeys = {
+  all: ["claude"] as const,
+  projects: () => [...claudeKeys.all, "projects"] as const,
+  sessions: (projectName: string) =>
+    [...claudeKeys.all, "sessions", projectName] as const,
+};

package/data/claude/queries.ts

@@ -0,0 +1,120 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { claudeKeys } from "./keys";
+
+export interface ClaudeProject {
+  name: string;
+  directory: string;
+  displayName: string;
+  sessionCount: number;
+  lastActivity: string;
+  hidden: boolean;
+}
+
+export interface ClaudeSession {
+  sessionId: string;
+  summary: string;
+  lastActivity: string;
+  messageCount: number;
+  cwd: string | null;
+  hidden: boolean;
+}
+
+interface ClaudeSessionsResponse {
+  sessions: ClaudeSession[];
+  total: number;
+  hasMore: boolean;
+}
+
+async function fetchClaudeProjects(): Promise<ClaudeProject[]> {
+  const res = await fetch("/api/claude/projects");
+  if (!res.ok) throw new Error("Failed to fetch Claude projects");
+  const data = await res.json();
+  return data.projects || [];
+}
+
+async function fetchClaudeSessions(
+  projectName: string,
+  limit = 50,
+  offset = 0,
+  includeHidden = true
+): Promise<ClaudeSessionsResponse> {
+  const params = new URLSearchParams({
+    limit: String(limit),
+    offset: String(offset),
+    includeHidden: String(includeHidden),
+  });
+  const res = await fetch(
+    `/api/claude/projects/${encodeURIComponent(projectName)}/sessions?${params}`
+  );
+  if (!res.ok) throw new Error("Failed to fetch Claude sessions");
+  return res.json();
+}
+
+export function useClaudeProjectsQuery() {
+  return useQuery({
+    queryKey: claudeKeys.projects(),
+    queryFn: fetchClaudeProjects,
+    staleTime: 30000,
+  });
+}
+
+export function useClaudeSessionsQuery(projectName: string | null) {
+  return useQuery({
+    queryKey: claudeKeys.sessions(projectName || ""),
+    queryFn: () => fetchClaudeSessions(projectName!),
+    enabled: !!projectName,
+    staleTime: 30000,
+  });
+}
+
+export function useHideItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      itemType,
+      itemId,
+    }: {
+      itemType: "project" | "session";
+      itemId: string;
+    }) => {
+      const res = await fetch("/api/claude/hidden", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ itemType, itemId }),
+      });
+      if (!res.ok) throw new Error("Failed to hide item");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: claudeKeys.projects() });
+      queryClient.invalidateQueries({ queryKey: claudeKeys.all });
+    },
+  });
+}
+
+export function useUnhideItem() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({
+      itemType,
+      itemId,
+    }: {
+      itemType: "project" | "session";
+      itemId: string;
+    }) => {
+      const res = await fetch("/api/claude/hidden", {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ itemType, itemId }),
+      });
+      if (!res.ok) throw new Error("Failed to unhide item");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: claudeKeys.projects() });
+      queryClient.invalidateQueries({ queryKey: claudeKeys.all });
+    },
+  });
+}

package/data/claude/useClaudeUpdates.ts

@@ -0,0 +1,37 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { claudeKeys } from "./keys";
+
+export function useClaudeUpdates() {
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const ws = new WebSocket(
+      `${protocol}//${window.location.host}/ws/updates`
+    );
+
+    ws.onmessage = (event) => {
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.type === "project-updated") {
+          queryClient.refetchQueries({
+            queryKey: claudeKeys.sessions(msg.projectName),
+          });
+          queryClient.refetchQueries({
+            queryKey: claudeKeys.projects(),
+          });
+        }
+        if (msg.type === "projects-changed") {
+          queryClient.refetchQueries({
+            queryKey: claudeKeys.projects(),
+          });
+        }
+      } catch {}
+    };
+
+    return () => ws.close();
+  }, [queryClient]);
+}

package/data/code-search/index.ts

@@ -0,0 +1,2 @@
+export * from "./keys";
+export * from "./queries";

package/data/code-search/keys.ts

@@ -0,0 +1,7 @@
+export const codeSearchKeys = {
+  all: ["code-search"] as const,
+  available: () => [...codeSearchKeys.all, "available"] as const,
+  searches: () => [...codeSearchKeys.all, "searches"] as const,
+  search: (path: string, query: string) =>
+    [...codeSearchKeys.searches(), path, query] as const,
+};

package/data/code-search/queries.ts

@@ -0,0 +1,61 @@
+import { useQuery } from "@tanstack/react-query";
+import { codeSearchKeys } from "./keys";
+import type { FormattedMatch } from "@/lib/code-search";
+
+interface AvailabilityResponse {
+  available: boolean;
+}
+
+interface SearchResponse {
+  results: FormattedMatch[];
+  query: string;
+  path: string;
+  count: number;
+  error?: string;
+}
+
+async function fetchRipgrepAvailability(): Promise<boolean> {
+  const res = await fetch("/api/code-search/available");
+  const data: AvailabilityResponse = await res.json();
+  return data.available;
+}
+
+async function fetchCodeSearch(
+  path: string,
+  query: string
+): Promise<SearchResponse> {
+  const params = new URLSearchParams({
+    path,
+    query,
+    maxResults: "100",
+    contextLines: "2",
+  });
+
+  const res = await fetch(`/api/code-search?${params}`);
+  const data = await res.json();
+
+  if (!res.ok) {
+    throw new Error(data.error || "Failed to search code");
+  }
+
+  return data;
+}
+
+export function useRipgrepAvailable() {
+  return useQuery({
+    queryKey: codeSearchKeys.available(),
+    queryFn: fetchRipgrepAvailability,
+    staleTime: Infinity, // Never refetch - ripgrep installation doesn't change during runtime
+    gcTime: Infinity,
+  });
+}
+
+export function useCodeSearch(path: string, query: string, enabled = false) {
+  return useQuery({
+    queryKey: codeSearchKeys.search(path, query),
+    queryFn: () => fetchCodeSearch(path, query),
+    enabled: enabled && query.length > 2,
+    staleTime: 30000,
+    gcTime: 60000,
+  });
+}

package/data/dev-servers/index.ts

@@ -0,0 +1,8 @@
+export { devServerKeys } from "./keys";
+export {
+  useDevServersQuery,
+  useStopDevServer,
+  useRestartDevServer,
+  useRemoveDevServer,
+  useCreateDevServer,
+} from "./queries";

package/data/dev-servers/keys.ts

@@ -0,0 +1,4 @@
+export const devServerKeys = {
+  all: ["dev-servers"] as const,
+  list: () => [...devServerKeys.all, "list"] as const,
+};

package/data/dev-servers/queries.ts

@@ -0,0 +1,104 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type { DevServer } from "@/lib/db";
+import { devServerKeys } from "./keys";
+
+async function fetchDevServers(): Promise<DevServer[]> {
+  const res = await fetch("/api/dev-servers");
+  if (!res.ok) throw new Error("Failed to fetch dev servers");
+  const data = await res.json();
+  return data.servers || [];
+}
+
+export function useDevServersQuery() {
+  return useQuery({
+    queryKey: devServerKeys.list(),
+    queryFn: fetchDevServers,
+    staleTime: 3000,
+    refetchInterval: (query) => {
+      const servers = query.state.data;
+      if (!servers?.length) return false;
+
+      const hasRunning = servers.some((s) => s.status === "running");
+      return hasRunning ? 5000 : 30000;
+    },
+  });
+}
+
+export function useStopDevServer() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (serverId: string) => {
+      const res = await fetch(`/api/dev-servers/${serverId}/stop`, {
+        method: "POST",
+      });
+      if (!res.ok) throw new Error("Failed to stop dev server");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: devServerKeys.list() });
+    },
+  });
+}
+
+export function useRestartDevServer() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (serverId: string) => {
+      const res = await fetch(`/api/dev-servers/${serverId}/restart`, {
+        method: "POST",
+      });
+      if (!res.ok) throw new Error("Failed to restart dev server");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: devServerKeys.list() });
+    },
+  });
+}
+
+export function useRemoveDevServer() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (serverId: string) => {
+      const res = await fetch(`/api/dev-servers/${serverId}`, {
+        method: "DELETE",
+      });
+      if (!res.ok) throw new Error("Failed to remove dev server");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: devServerKeys.list() });
+    },
+  });
+}
+
+interface CreateDevServerOptions {
+  projectId: string;
+  type: "node" | "docker";
+  name: string;
+  command: string;
+  workingDirectory: string;
+  ports?: number[];
+}
+
+export function useCreateDevServer() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (opts: CreateDevServerOptions) => {
+      const res = await fetch("/api/dev-servers", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(opts),
+      });
+      if (!res.ok) throw new Error("Failed to create dev server");
+      return res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: devServerKeys.list() });
+    },
+  });
+}

package/data/files/index.ts

@@ -0,0 +1,3 @@
+export { fileKeys } from "./keys";
+export { useDirectoryFilesQuery } from "./queries";
+export type { DirectoryData } from "./queries";