@atercates/claude-deck 0.2.1

package/components/NewSessionDialog/ProjectSelector.tsx

@@ -0,0 +1,146 @@
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Plus } from "lucide-react";
+import type { ProjectWithDevServers } from "@/lib/projects";
+import type { AgentType } from "@/lib/providers";
+
+interface ProjectSelectorProps {
+  projects: ProjectWithDevServers[];
+  projectId: string | null;
+  onProjectChange: (projectId: string | null) => void;
+  workingDirectory: string;
+  agentType: AgentType;
+  showNewProject: boolean;
+  onShowNewProjectChange: (show: boolean) => void;
+  newProjectName: string;
+  onNewProjectNameChange: (name: string) => void;
+  creatingProject: boolean;
+  onCreateProject: () => void;
+  canCreateProject: boolean;
+}
+
+export function ProjectSelector({
+  projects,
+  projectId,
+  onProjectChange,
+  workingDirectory,
+  agentType,
+  showNewProject,
+  onShowNewProjectChange,
+  newProjectName,
+  onNewProjectNameChange,
+  creatingProject,
+  onCreateProject,
+  canCreateProject,
+}: ProjectSelectorProps) {
+  const selectedProject = projects.find((p) => p.id === projectId);
+
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Project</label>
+      {showNewProject ? (
+        <div className="flex gap-2">
+          <Input
+            value={newProjectName}
+            onChange={(e) => onNewProjectNameChange(e.target.value)}
+            placeholder="Project name"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                onCreateProject();
+              } else if (e.key === "Escape") {
+                onShowNewProjectChange(false);
+                onNewProjectNameChange("");
+              }
+            }}
+            disabled={creatingProject}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={onCreateProject}
+            disabled={
+              !newProjectName.trim() ||
+              creatingProject ||
+              !workingDirectory ||
+              workingDirectory === "~"
+            }
+          >
+            {creatingProject ? "Creating..." : "Create"}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              onShowNewProjectChange(false);
+              onNewProjectNameChange("");
+            }}
+            disabled={creatingProject}
+          >
+            Cancel
+          </Button>
+        </div>
+      ) : (
+        <div className="flex gap-2">
+          <Select
+            value={projectId || "none"}
+            onValueChange={(v) => onProjectChange(v === "none" ? null : v)}
+          >
+            <SelectTrigger className="flex-1">
+              <SelectValue placeholder="Select a project" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">
+                <span className="text-muted-foreground">
+                  No project (uncategorized)
+                </span>
+              </SelectItem>
+              {projects
+                .filter((p) => !p.is_uncategorized)
+                .map((project) => (
+                  <SelectItem key={project.id} value={project.id}>
+                    {project.name}
+                  </SelectItem>
+                ))}
+            </SelectContent>
+          </Select>
+          {canCreateProject && (
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={() => onShowNewProjectChange(true)}
+              title="Create new project"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
+      )}
+      {showNewProject && (
+        <p className="text-muted-foreground text-xs">
+          {workingDirectory && workingDirectory !== "~"
+            ? `New project will use: ${workingDirectory}, ${agentType}`
+            : "Enter a working directory above to create a project"}
+        </p>
+      )}
+      {!showNewProject &&
+        selectedProject &&
+        !selectedProject.is_uncategorized && (
+          <p className="text-muted-foreground text-xs">
+            Settings inherited: {selectedProject.working_directory},{" "}
+            {selectedProject.agent_type}
+          </p>
+        )}
+    </div>
+  );
+}

package/components/NewSessionDialog/WorkingDirectoryInput.tsx

@@ -0,0 +1,55 @@
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { GitBranch, Loader2, FolderOpen } from "lucide-react";
+import type { GitInfo } from "./NewSessionDialog.types";
+
+interface WorkingDirectoryInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  gitInfo: GitInfo | null;
+  checkingGit: boolean;
+  onBrowse: () => void;
+}
+
+export function WorkingDirectoryInput({
+  value,
+  onChange,
+  gitInfo,
+  checkingGit,
+  onBrowse,
+}: WorkingDirectoryInputProps) {
+  return (
+    <div className="space-y-2">
+      <label className="text-sm font-medium">Working Directory</label>
+      <div className="flex gap-2">
+        <div className="relative flex-1">
+          <Input
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="~/projects/my-app"
+          />
+          {checkingGit && (
+            <div className="absolute top-1/2 right-3 -translate-y-1/2">
+              <Loader2 className="text-muted-foreground h-4 w-4 animate-spin" />
+            </div>
+          )}
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          onClick={onBrowse}
+          title="Browse directories"
+        >
+          <FolderOpen className="h-4 w-4" />
+        </Button>
+      </div>
+      {gitInfo?.isGitRepo && (
+        <p className="text-muted-foreground flex items-center gap-1 text-xs">
+          <GitBranch className="h-3 w-3" />
+          Git repo on {gitInfo.currentBranch}
+        </p>
+      )}
+    </div>
+  );
+}

package/components/NewSessionDialog/WorktreeSection.tsx

@@ -0,0 +1,92 @@
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { GitInfo } from "./NewSessionDialog.types";
+
+interface WorktreeSectionProps {
+  gitInfo: GitInfo;
+  useWorktree: boolean;
+  onUseWorktreeChange: (checked: boolean) => void;
+  featureName: string;
+  onFeatureNameChange: (value: string) => void;
+  baseBranch: string;
+  onBaseBranchChange: (value: string) => void;
+}
+
+export function WorktreeSection({
+  gitInfo,
+  useWorktree,
+  onUseWorktreeChange,
+  featureName,
+  onFeatureNameChange,
+  baseBranch,
+  onBaseBranchChange,
+}: WorktreeSectionProps) {
+  if (!gitInfo.isGitRepo) return null;
+
+  return (
+    <div className="bg-accent/40 space-y-3 rounded-lg p-3">
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="useWorktree"
+          checked={useWorktree}
+          onChange={(e) => onUseWorktreeChange(e.target.checked)}
+          className="border-border bg-background accent-primary h-4 w-4 rounded"
+        />
+        <label
+          htmlFor="useWorktree"
+          className="cursor-pointer text-sm font-medium"
+        >
+          Create isolated worktree
+        </label>
+      </div>
+
+      {useWorktree && (
+        <div className="space-y-3 pl-6">
+          <div className="space-y-1">
+            <label className="text-muted-foreground text-xs">
+              Feature Name
+            </label>
+            <Input
+              value={featureName}
+              onChange={(e) => onFeatureNameChange(e.target.value)}
+              placeholder="add-dark-mode"
+              className="h-8 text-sm"
+            />
+            {featureName && (
+              <p className="text-muted-foreground text-xs">
+                Branch: feature/
+                {featureName
+                  .toLowerCase()
+                  .replace(/[^a-z0-9]+/g, "-")
+                  .replace(/^-+|-+$/g, "")
+                  .slice(0, 50)}
+              </p>
+            )}
+          </div>
+          <div className="space-y-1">
+            <label className="text-muted-foreground text-xs">Base Branch</label>
+            <Select value={baseBranch} onValueChange={onBaseBranchChange}>
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {gitInfo.branches.map((branch) => (
+                  <SelectItem key={branch} value={branch}>
+                    {branch}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/NewSessionDialog/hooks/useNewSessionForm.ts

@@ -0,0 +1,370 @@
+import { useState, useEffect, useCallback } from "react";
+import { getProviderDefinition, type AgentType } from "@/lib/providers";
+import type { ProjectWithDevServers } from "@/lib/projects";
+import { setPendingPrompt } from "@/stores/initialPrompt";
+import { useCreateSession } from "@/data/sessions";
+import {
+  type GitInfo,
+  SKIP_PERMISSIONS_KEY,
+  AGENT_TYPE_KEY,
+  RECENT_DIRS_KEY,
+  USE_TMUX_KEY,
+  MAX_RECENT_DIRS,
+  AGENT_OPTIONS,
+  generateFeatureName,
+} from "../NewSessionDialog.types";
+
+interface UseNewSessionFormOptions {
+  open: boolean;
+  projects: ProjectWithDevServers[];
+  selectedProjectId?: string;
+  onCreated: (sessionId: string) => void;
+  onClose: () => void;
+  onCreateProject?: (
+    name: string,
+    workingDirectory: string,
+    agentType: AgentType
+  ) => Promise<string | null>;
+}
+
+export function useNewSessionForm({
+  open,
+  projects,
+  selectedProjectId,
+  onCreated,
+  onClose,
+  onCreateProject,
+}: UseNewSessionFormOptions) {
+  // React Query mutation
+  const createSession = useCreateSession();
+
+  // Form state
+  const [name, setName] = useState("");
+  const [workingDirectory, setWorkingDirectory] = useState("~");
+  const [projectId, setProjectId] = useState<string | null>(null);
+  const [agentType, setAgentType] = useState<AgentType>("claude");
+  const [skipPermissions, setSkipPermissions] = useState(false);
+  const [useTmux, setUseTmux] = useState(true);
+  const [initialPrompt, setInitialPrompt] = useState("");
+
+  // Worktree state
+  const [useWorktree, setUseWorktree] = useState(false);
+  const [featureName, setFeatureName] = useState("");
+  const [baseBranch, setBaseBranch] = useState("main");
+  const [gitInfo, setGitInfo] = useState<GitInfo | null>(null);
+  const [checkingGit, setCheckingGit] = useState(false);
+
+  // UI state
+  const [showNewProject, setShowNewProject] = useState(false);
+  const [newProjectName, setNewProjectName] = useState("");
+  const [creatingProject, setCreatingProject] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [showDirectoryPicker, setShowDirectoryPicker] = useState(false);
+
+  // Creation step for loading overlay
+  const [creationStep, setCreationStep] = useState<
+    "creating" | "worktree" | "setup" | "done"
+  >("creating");
+
+  // Recent directories
+  const [recentDirs, setRecentDirs] = useState<string[]>([]);
+
+  // Check if working directory is a git repo
+  const checkGitRepo = useCallback(async (path: string) => {
+    if (!path || path === "~") {
+      setGitInfo(null);
+      setUseWorktree(false);
+      setFeatureName("");
+      return;
+    }
+
+    setCheckingGit(true);
+    try {
+      const res = await fetch("/api/git/check", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path }),
+      });
+      const data = await res.json();
+      setGitInfo(data);
+      if (data.defaultBranch) {
+        setBaseBranch(data.defaultBranch);
+      }
+      if (data.isGitRepo) {
+        setUseWorktree(true);
+        setFeatureName(generateFeatureName());
+      } else {
+        setUseWorktree(false);
+        setFeatureName("");
+      }
+    } catch {
+      setGitInfo(null);
+      setUseWorktree(false);
+      setFeatureName("");
+    } finally {
+      setCheckingGit(false);
+    }
+  }, []);
+
+  // Debounce git check
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      checkGitRepo(workingDirectory);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [workingDirectory, checkGitRepo]);
+
+  // Load preferences from localStorage
+  useEffect(() => {
+    const savedSkipPerms = localStorage.getItem(SKIP_PERMISSIONS_KEY);
+    if (savedSkipPerms !== null) {
+      setSkipPermissions(savedSkipPerms === "true");
+    }
+    const savedAgentType = localStorage.getItem(AGENT_TYPE_KEY);
+    if (
+      savedAgentType &&
+      AGENT_OPTIONS.some((opt) => opt.value === savedAgentType)
+    ) {
+      setAgentType(savedAgentType as AgentType);
+    }
+    const savedUseTmux = localStorage.getItem(USE_TMUX_KEY);
+    if (savedUseTmux !== null) {
+      setUseTmux(savedUseTmux === "true");
+    }
+    try {
+      const saved = localStorage.getItem(RECENT_DIRS_KEY);
+      if (saved) {
+        setRecentDirs(JSON.parse(saved));
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }, []);
+
+  // Initialize from selectedProjectId or first available project when dialog opens
+  useEffect(() => {
+    if (open) {
+      // Use selectedProjectId if provided
+      if (selectedProjectId) {
+        setProjectId(selectedProjectId);
+        const project = projects.find((p) => p.id === selectedProjectId);
+        if (project && !project.is_uncategorized) {
+          setWorkingDirectory(project.working_directory);
+          setAgentType(project.agent_type);
+        }
+      } else {
+        // Otherwise, select first non-uncategorized project
+        const firstProject = projects.find((p) => !p.is_uncategorized);
+        if (firstProject) {
+          setProjectId(firstProject.id);
+          setWorkingDirectory(firstProject.working_directory);
+          setAgentType(firstProject.agent_type);
+        }
+      }
+    }
+  }, [open, selectedProjectId, projects]);
+
+  useEffect(() => {
+    if (!skipPermissions) {
+      return;
+    }
+
+    if (getProviderDefinition(agentType).autoApproveFlag) {
+      return;
+    }
+
+    setSkipPermissions(false);
+    localStorage.setItem(SKIP_PERMISSIONS_KEY, "false");
+  }, [agentType, skipPermissions]);
+
+  // Save directory to recent list
+  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;
+    });
+  }, []);
+
+  // Handlers
+  const handleProjectChange = useCallback(
+    (newProjectId: string | null) => {
+      setProjectId(newProjectId);
+      if (newProjectId) {
+        const project = projects.find((p) => p.id === newProjectId);
+        if (project && !project.is_uncategorized) {
+          setWorkingDirectory(project.working_directory);
+          setAgentType(project.agent_type);
+        }
+      }
+    },
+    [projects]
+  );
+
+  const handleSkipPermissionsChange = (checked: boolean) => {
+    setSkipPermissions(checked);
+    localStorage.setItem(SKIP_PERMISSIONS_KEY, String(checked));
+  };
+
+  const handleAgentTypeChange = (value: AgentType) => {
+    setAgentType(value);
+    localStorage.setItem(AGENT_TYPE_KEY, value);
+  };
+
+  const handleUseTmuxChange = (checked: boolean) => {
+    setUseTmux(checked);
+    localStorage.setItem(USE_TMUX_KEY, String(checked));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    createSession.reset(); // Clear any previous errors
+
+    if (useWorktree) {
+      if (!featureName.trim()) {
+        return; // Validation handled by button disabled state
+      }
+      if (!gitInfo?.isGitRepo) {
+        return;
+      }
+    }
+
+    setCreationStep("creating");
+
+    // For worktree sessions, show step progression
+    let stepTimer: NodeJS.Timeout | undefined;
+    if (useWorktree) {
+      setCreationStep("worktree");
+      // Progress to "setup" step after 2s (worktree creation is usually fast)
+      stepTimer = setTimeout(() => {
+        setCreationStep("setup");
+      }, 2000);
+    }
+
+    createSession.mutate(
+      {
+        name: name.trim() || undefined,
+        workingDirectory,
+        projectId,
+        agentType,
+        useWorktree,
+        featureName: useWorktree ? featureName.trim() : null,
+        baseBranch: useWorktree ? baseBranch : null,
+        autoApprove: skipPermissions,
+        useTmux,
+        initialPrompt: initialPrompt.trim() || null,
+      },
+      {
+        onSuccess: (data) => {
+          if (stepTimer) clearTimeout(stepTimer);
+          setCreationStep("done");
+          if (data.initialPrompt) {
+            setPendingPrompt(data.session.id, data.initialPrompt);
+          }
+          addRecentDirectory(workingDirectory);
+          // Small delay to show "done" state before closing
+          setTimeout(() => {
+            resetForm();
+            onCreated(data.session.id);
+          }, 300);
+        },
+        onError: () => {
+          if (stepTimer) clearTimeout(stepTimer);
+          setCreationStep("creating");
+        },
+      }
+    );
+  };
+
+  const handleCreateProject = async () => {
+    if (
+      !newProjectName.trim() ||
+      !onCreateProject ||
+      !workingDirectory ||
+      workingDirectory === "~"
+    )
+      return;
+    setCreatingProject(true);
+    try {
+      const newId = await onCreateProject(
+        newProjectName.trim(),
+        workingDirectory,
+        agentType
+      );
+      if (newId) {
+        setProjectId(newId);
+        setShowNewProject(false);
+        setNewProjectName("");
+      }
+    } finally {
+      setCreatingProject(false);
+    }
+  };
+
+  const resetForm = () => {
+    setName("");
+    setWorkingDirectory("~");
+    setProjectId(null);
+    setUseWorktree(false);
+    setFeatureName("");
+    setInitialPrompt("");
+    setShowNewProject(false);
+    setNewProjectName("");
+    setCreationStep("creating");
+    createSession.reset();
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  return {
+    // Form values
+    name,
+    setName,
+    workingDirectory,
+    setWorkingDirectory,
+    projectId,
+    agentType,
+    skipPermissions,
+    useTmux,
+    initialPrompt,
+    setInitialPrompt,
+    // Worktree
+    useWorktree,
+    setUseWorktree,
+    featureName,
+    setFeatureName,
+    baseBranch,
+    setBaseBranch,
+    gitInfo,
+    checkingGit,
+    // UI
+    showNewProject,
+    setShowNewProject,
+    newProjectName,
+    setNewProjectName,
+    creatingProject,
+    advancedOpen,
+    setAdvancedOpen,
+    showDirectoryPicker,
+    setShowDirectoryPicker,
+    // Submission
+    isLoading: createSession.isPending,
+    creationStep,
+    error: createSession.error?.message ?? null,
+    // Recent
+    recentDirs,
+    // Handlers
+    handleProjectChange,
+    handleSkipPermissionsChange,
+    handleAgentTypeChange,
+    handleUseTmuxChange,
+    handleSubmit,
+    handleCreateProject,
+    handleClose,
+  };
+}