@atercates/claude-deck 0.2.1

package/components/Projects/hooks/useNewProjectForm.ts

@@ -0,0 +1,249 @@
+import { useState, useEffect, useCallback } from "react";
+import type { AgentType } from "@/lib/providers";
+import { useCreateProject, useDetectDevServers } from "@/data/projects";
+import { useGitCheck, useCloneRepo } from "@/data/git/queries";
+import {
+  RECENT_DIRS_KEY,
+  MAX_RECENT_DIRS,
+  CLONE_STEP,
+  extractRepoName,
+  type CloneStep,
+  type DevServerConfig,
+} from "../NewProjectDialog.types";
+
+export function useNewProjectForm(
+  mode: "new" | "clone",
+  onClose: () => void,
+  onCreated: (projectId: string) => void
+) {
+  const [name, setName] = useState("");
+  const [workingDirectory, setWorkingDirectory] = useState("~");
+  const [debouncedDir, setDebouncedDir] = useState("~");
+  const [agentType, setAgentType] = useState<AgentType>("claude");
+  const [defaultModel, setDefaultModel] = useState("opus");
+  const [devServers, setDevServers] = useState<DevServerConfig[]>([]);
+  const [error, setError] = useState<string | null>(null);
+  const [recentDirs, setRecentDirs] = useState<string[]>([]);
+  const [githubUrl, setGithubUrl] = useState("");
+  const [cloneStep, setCloneStep] = useState<CloneStep>(CLONE_STEP.IDLE);
+
+  const isCloneMode = mode === "clone";
+
+  // React Query hooks
+  const createProject = useCreateProject();
+  const cloneRepo = useCloneRepo();
+  const detectDevServers = useDetectDevServers();
+
+  const gitCheck = useGitCheck(debouncedDir);
+
+  // Debounce directory for git check query
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedDir(workingDirectory), 500);
+    return () => clearTimeout(timer);
+  }, [workingDirectory]);
+
+  // Load recent directories
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(RECENT_DIRS_KEY);
+      if (saved) {
+        setRecentDirs(JSON.parse(saved));
+      }
+    } catch {
+      // Ignore
+    }
+  }, []);
+
+  // Save recent directory
+  const addRecentDirectory = useCallback((dir: string) => {
+    if (!dir || dir === "~") return;
+    setRecentDirs((prev) => {
+      const filtered = prev.filter((d) => d !== dir);
+      const updated = [dir, ...filtered].slice(0, MAX_RECENT_DIRS);
+      localStorage.setItem(RECENT_DIRS_KEY, JSON.stringify(updated));
+      return updated;
+    });
+  }, []);
+
+  // Dev server management
+  const handleDetectDevServers = () => {
+    if (!workingDirectory || workingDirectory === "~") return;
+
+    detectDevServers.mutate(workingDirectory, {
+      onSuccess: (detected) => {
+        const configs = detected.map((d, i) => ({
+          id: `ds_${Date.now()}_${i}`,
+          name: d.name,
+          type: d.type,
+          command: d.command,
+          port: d.port,
+          portEnvVar: d.portEnvVar,
+        }));
+        setDevServers(configs);
+      },
+    });
+  };
+
+  const addDevServer = () => {
+    setDevServers((prev) => [
+      ...prev,
+      { id: `ds_${Date.now()}`, name: "", type: "node", command: "" },
+    ]);
+  };
+
+  const removeDevServer = (id: string) => {
+    setDevServers((prev) => prev.filter((ds) => ds.id !== id));
+  };
+
+  const updateDevServer = (id: string, updates: Partial<DevServerConfig>) => {
+    setDevServers((prev) =>
+      prev.map((ds) => (ds.id === id ? { ...ds, ...updates } : ds))
+    );
+  };
+
+  const handleClose = () => {
+    setName("");
+    setWorkingDirectory("~");
+    setAgentType("claude");
+    setDefaultModel("opus");
+    setDevServers([]);
+    setGithubUrl("");
+    setCloneStep(CLONE_STEP.IDLE);
+    setError(null);
+    onClose();
+  };
+
+  const handleGithubUrlChange = (value: string) => {
+    setGithubUrl(value);
+    const repoName = extractRepoName(value);
+    if (repoName && !name) {
+      setName(repoName);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+
+    if (!workingDirectory || (!isCloneMode && workingDirectory === "~")) {
+      setError("Working directory is required");
+      return;
+    }
+
+    if (isCloneMode) {
+      if (!githubUrl.trim()) {
+        setError("GitHub repository URL is required");
+        return;
+      }
+
+      const projectName =
+        name.trim() || extractRepoName(githubUrl.trim()) || "project";
+
+      setCloneStep(CLONE_STEP.CLONING);
+      cloneRepo.mutate(
+        { url: githubUrl.trim(), directory: workingDirectory },
+        {
+          onSuccess: (cloneData) => {
+            setCloneStep(CLONE_STEP.CREATING);
+            createProject.mutate(
+              {
+                name: projectName,
+                workingDirectory: cloneData.path,
+                agentType,
+                defaultModel,
+                devServers: [],
+              },
+              {
+                onSuccess: (data) => {
+                  setCloneStep(CLONE_STEP.DONE);
+                  addRecentDirectory(cloneData.path);
+                  setTimeout(() => {
+                    handleClose();
+                    onCreated(data.project.id);
+                  }, 300);
+                },
+                onError: (err) => {
+                  setCloneStep(CLONE_STEP.IDLE);
+                  setError(err.message || "Failed to create project");
+                },
+              }
+            );
+          },
+          onError: (err) => {
+            setCloneStep(CLONE_STEP.IDLE);
+            setError(err.message || "Failed to clone repository");
+          },
+        }
+      );
+      return;
+    }
+
+    // Normal mode
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+
+    const validDevServers = devServers.filter(
+      (ds) => ds.name.trim() && ds.command.trim()
+    );
+
+    createProject.mutate(
+      {
+        name: name.trim(),
+        workingDirectory,
+        agentType,
+        defaultModel,
+        devServers: validDevServers.map((ds) => ({
+          name: ds.name.trim(),
+          type: ds.type,
+          command: ds.command.trim(),
+          port: ds.port || undefined,
+          portEnvVar: ds.portEnvVar || undefined,
+        })),
+      },
+      {
+        onSuccess: (data) => {
+          addRecentDirectory(workingDirectory);
+          handleClose();
+          onCreated(data.project.id);
+        },
+        onError: (err) => {
+          setError(err.message || "Failed to create project");
+        },
+      }
+    );
+  };
+
+  return {
+    // State
+    name,
+    setName,
+    workingDirectory,
+    setWorkingDirectory,
+    agentType,
+    setAgentType,
+    defaultModel,
+    setDefaultModel,
+    devServers,
+    isDetecting: detectDevServers.isPending,
+    error,
+    recentDirs,
+    isGitRepo: gitCheck.data?.isGitRepo ?? false,
+    checkingDir: gitCheck.isFetching,
+    githubUrl,
+    isCloning: cloneStep !== CLONE_STEP.IDLE,
+    cloneStep,
+    isCloneMode,
+    isPending: createProject.isPending,
+
+    // Actions
+    handleGithubUrlChange,
+    detectDevServers: handleDetectDevServers,
+    addDevServer,
+    removeDevServer,
+    updateDevServer,
+    handleSubmit,
+    handleClose,
+  };
+}

package/components/Projects/index.ts

@@ -0,0 +1,3 @@
+export { ProjectCard } from "./ProjectCard";
+export { NewProjectDialog } from "./NewProjectDialog";
+export { ProjectSettingsDialog } from "./ProjectSettingsDialog";

package/components/Providers.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createQueryClient } from "@/lib/query-client";
+import { parseTheme, getAllThemes } from "@/lib/theme-config";
+
+function ThemeClassHandler({ children }: { children: React.ReactNode }) {
+  const { theme, systemTheme } = useTheme();
+
+  useEffect(() => {
+    const root = document.documentElement;
+    let actualTheme = theme;
+    if (theme === "system") {
+      actualTheme = systemTheme || "dark";
+    }
+    const { mode, variant } = parseTheme(actualTheme || "dark");
+    root.classList.remove("dark", "light");
+    root.removeAttribute("data-theme-variant");
+    root.classList.add(mode === "system" ? "dark" : mode);
+    if (variant && variant !== "default" && variant !== "deep") {
+      root.setAttribute("data-theme-variant", variant);
+    }
+  }, [theme, systemTheme]);
+
+  return <>{children}</>;
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => createQueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <NextThemesProvider
+        attribute="data-theme"
+        defaultTheme="dark"
+        enableSystem
+        disableTransitionOnChange
+        themes={getAllThemes()}
+      >
+        <ThemeClassHandler>
+          <TooltipProvider delayDuration={200}>{children}</TooltipProvider>
+        </ThemeClassHandler>
+      </NextThemesProvider>
+    </QueryClientProvider>
+  );
+}

package/components/QuickSwitcher.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { Terminal, Clock } from "lucide-react";
+import { CodeSearchResults } from "@/components/CodeSearch/CodeSearchResults";
+import { useRipgrepAvailable } from "@/data/code-search";
+import { useClaudeProjectsQuery, useClaudeSessionsQuery } from "@/data/claude";
+import type { ClaudeProject } from "@/data/claude";
+
+interface QuickSwitcherProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onResumeClaudeSession: (
+    sessionId: string,
+    cwd: string,
+    summary: string,
+    projectName: string
+  ) => void;
+  onSelectFile?: (file: string, line: number) => void;
+  currentSessionId?: string;
+  activeSessionWorkingDir?: string;
+}
+
+interface FlatSession {
+  sessionId: string;
+  summary: string;
+  cwd: string;
+  lastActivity: string;
+  projectName: string;
+  projectDisplayName: string;
+}
+
+export function QuickSwitcher({
+  open,
+  onOpenChange,
+  onResumeClaudeSession,
+  onSelectFile,
+  currentSessionId,
+  activeSessionWorkingDir,
+}: QuickSwitcherProps) {
+  const [mode, setMode] = useState<"sessions" | "code">("sessions");
+  const [query, setQuery] = useState("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: ripgrepAvailable } = useRipgrepAvailable();
+  const { data: projects } = useClaudeProjectsQuery();
+
+  const topProjects = useMemo(() => {
+    if (!projects) return [];
+    return [...projects]
+      .sort(
+        (a, b) =>
+          new Date(b.lastActivity || 0).getTime() -
+          new Date(a.lastActivity || 0).getTime()
+      )
+      .slice(0, 8);
+  }, [projects]);
+
+  const topProjectName = topProjects[0]?.name || null;
+  const p1 = topProjects[1]?.name || null;
+  const p2 = topProjects[2]?.name || null;
+  const p3 = topProjects[3]?.name || null;
+
+  const s0 = useClaudeSessionsQuery(open ? topProjectName : null);
+  const s1 = useClaudeSessionsQuery(open ? p1 : null);
+  const s2 = useClaudeSessionsQuery(open ? p2 : null);
+  const s3 = useClaudeSessionsQuery(open ? p3 : null);
+
+  const allSessions = useMemo(() => {
+    const flat: FlatSession[] = [];
+    const queries = [s0, s1, s2, s3];
+    const projs = topProjects.slice(0, 4);
+
+    projs.forEach((project: ClaudeProject, i: number) => {
+      const sessions = queries[i]?.data?.sessions || [];
+      sessions.forEach((s) => {
+        if (s.cwd) {
+          flat.push({
+            sessionId: s.sessionId,
+            summary: s.summary,
+            cwd: s.cwd,
+            lastActivity: s.lastActivity,
+            projectName: project.name,
+            projectDisplayName: project.displayName,
+          });
+        }
+      });
+    });
+
+    return flat.sort(
+      (a, b) =>
+        new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime()
+    );
+  }, [s0.data, s1.data, s2.data, s3.data, topProjects]);
+
+  const filteredSessions = useMemo(() => {
+    if (!query) return allSessions;
+    const q = query.toLowerCase();
+    return allSessions.filter(
+      (s) =>
+        s.summary.toLowerCase().includes(q) ||
+        s.projectDisplayName.toLowerCase().includes(q) ||
+        s.cwd.toLowerCase().includes(q)
+    );
+  }, [allSessions, query]);
+
+  useEffect(() => {
+    if (open) {
+      setMode("sessions");
+      setQuery("");
+      setSelectedIndex(0);
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (ripgrepAvailable === false && mode === "code") {
+      setMode("sessions");
+    }
+  }, [ripgrepAvailable, mode]);
+
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            Math.min(prev + 1, filteredSessions.length - 1)
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => Math.max(prev - 1, 0));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (filteredSessions[selectedIndex]) {
+            const s = filteredSessions[selectedIndex];
+            onResumeClaudeSession(s.sessionId, s.cwd, s.summary, s.projectName);
+            onOpenChange(false);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          onOpenChange(false);
+          break;
+      }
+    },
+    [filteredSessions, selectedIndex, onResumeClaudeSession, onOpenChange]
+  );
+
+  const formatTime = (dateStr: string | null) => {
+    if (!dateStr) return "";
+    const now = new Date();
+    const date = new Date(dateStr);
+    const diff = now.getTime() - date.getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return "just now";
+    if (mins < 60) return `${mins}m ago`;
+    const hours = Math.floor(mins / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+  };
+
+  const handleSelectFile = useCallback(
+    (file: string, line: number) => {
+      onOpenChange(false);
+      onSelectFile?.(file, line);
+    },
+    [onOpenChange, onSelectFile]
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-md">
+        <DialogHeader className="sr-only">
+          <DialogTitle>Switch Session / Search Code</DialogTitle>
+        </DialogHeader>
+
+        {ripgrepAvailable === true && (
+          <div className="border-border flex gap-2 border-b p-2">
+            <button
+              onClick={() => setMode("sessions")}
+              className={cn(
+                "rounded-full px-3 py-1 text-sm transition-colors",
+                mode === "sessions"
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-accent"
+              )}
+            >
+              Sessions
+            </button>
+            <button
+              onClick={() => setMode("code")}
+              className={cn(
+                "rounded-full px-3 py-1 text-sm transition-colors",
+                mode === "code"
+                  ? "bg-primary text-primary-foreground"
+                  : "hover:bg-accent"
+              )}
+            >
+              Code Search
+            </button>
+          </div>
+        )}
+
+        <div className="border-border border-b p-3">
+          <Input
+            ref={inputRef}
+            placeholder={
+              mode === "sessions" || !ripgrepAvailable
+                ? "Search sessions..."
+                : "Search code (min 3 chars)..."
+            }
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onKeyDown={mode === "sessions" ? handleKeyDown : undefined}
+            className="h-10"
+          />
+        </div>
+
+        <div className="max-h-[300px] overflow-y-auto py-2">
+          {mode === "sessions" ? (
+            filteredSessions.length === 0 ? (
+              <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+                No sessions found
+              </div>
+            ) : (
+              filteredSessions.map((session, index) => {
+                const isCurrent = session.sessionId === currentSessionId;
+                return (
+                  <button
+                    key={session.sessionId}
+                    onClick={() => {
+                      onResumeClaudeSession(
+                        session.sessionId,
+                        session.cwd,
+                        session.summary,
+                        session.projectName
+                      );
+                      onOpenChange(false);
+                    }}
+                    className={cn(
+                      "flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors",
+                      index === selectedIndex
+                        ? "bg-accent"
+                        : "hover:bg-accent/50",
+                      isCurrent && "bg-primary/10"
+                    )}
+                  >
+                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-emerald-500/20 text-emerald-400">
+                      <Terminal className="h-4 w-4" />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <span className="block truncate text-sm font-medium">
+                        {session.summary}
+                      </span>
+                      <span className="text-muted-foreground block truncate text-xs">
+                        {session.projectDisplayName}
+                      </span>
+                    </div>
+                    <div className="text-muted-foreground flex flex-shrink-0 items-center gap-1 text-xs">
+                      <Clock className="h-3 w-3" />
+                      <span>{formatTime(session.lastActivity)}</span>
+                    </div>
+                  </button>
+                );
+              })
+            )
+          ) : (
+            <CodeSearchResults
+              workingDirectory={activeSessionWorkingDir || "~"}
+              query={query}
+              onSelectFile={handleSelectFile}
+            />
+          )}
+        </div>
+
+        <div className="border-border text-muted-foreground flex items-center gap-4 border-t px-4 py-2 text-xs">
+          <span>
+            <kbd className="bg-muted rounded px-1.5 py-0.5">↑↓</kbd> navigate
+          </span>
+          <span>
+            <kbd className="bg-muted rounded px-1.5 py-0.5">↵</kbd> select
+          </span>
+          <span>
+            <kbd className="bg-muted rounded px-1.5 py-0.5">esc</kbd> close
+          </span>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/SessionList/KillAllConfirm.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import { sessionKeys } from "@/data/sessions/keys";
+
+interface KillAllConfirmProps {
+  onCancel: () => void;
+  onComplete: () => void;
+}
+
+export function KillAllConfirm({ onCancel, onComplete }: KillAllConfirmProps) {
+  const queryClient = useQueryClient();
+  const [killing, setKilling] = useState(false);
+
+  const handleKillAll = async () => {
+    setKilling(true);
+    try {
+      await fetch("/api/tmux/kill-all", { method: "POST" });
+      await queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
+      onComplete();
+    } catch (error) {
+      console.error("Failed to kill sessions:", error);
+    } finally {
+      setKilling(false);
+    }
+  };
+
+  return (
+    <div className="mx-4 mb-3 rounded-lg border border-red-500/20 bg-red-500/10 p-3">
+      <p className="mb-2 text-sm text-red-400">Kill all tmux sessions?</p>
+      <div className="flex gap-2">
+        <Button
+          size="sm"
+          variant="destructive"
+          onClick={handleKillAll}
+          disabled={killing}
+        >
+          {killing ? "Killing..." : "Yes, kill all"}
+        </Button>
+        <Button size="sm" variant="ghost" onClick={onCancel} disabled={killing}>
+          Cancel
+        </Button>
+      </div>
+    </div>
+  );
+}