@atercates/claude-deck 0.2.14 → 0.2.15

package/app/api/worktrees/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from "next/server";
+import { createWorktree } from "@/lib/worktrees";
+
+export async function POST(request: NextRequest) {
+  try {
+    const { projectPath, featureName, baseBranch } = await request.json();
+
+    if (!projectPath || !featureName) {
+      return NextResponse.json(
+        { error: "projectPath and featureName are required" },
+        { status: 400 }
+      );
+    }
+
+    const worktree = await createWorktree({
+      projectPath,
+      featureName,
+      baseBranch,
+    });
+
+    return NextResponse.json(worktree, { status: 201 });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    return NextResponse.json(
+      { error: `Failed to create worktree: ${message}` },
+      { status: 400 }
+    );
+  }
+}

package/components/NewClaudeSessionDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import {
   Dialog,
   DialogContent,
@@ -16,7 +16,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Sparkles } from "lucide-react";
+import { Sparkles, GitBranch, Loader2 } from "lucide-react";
 import type { ClaudeProject } from "@/data/claude";
 
 const ADJECTIVES = [
@@ -50,6 +50,12 @@ function generateName() {
   return `${adj}-${noun}`;
 }
 
+interface GitInfo {
+  isGitRepo: boolean;
+  branches: string[];
+  defaultBranch: string | null;
+}
+
 interface NewClaudeSessionDialogProps {
   open: boolean;
   projectName: string;
@@ -69,10 +75,57 @@ export function NewClaudeSessionDialog({
   const [selectedProject, setSelectedProject] = useState(projectName);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Worktree state
+  const [gitInfo, setGitInfo] = useState<GitInfo | null>(null);
+  const [useWorktree, setUseWorktree] = useState(false);
+  const [featureName, setFeatureName] = useState("");
+  const [baseBranch, setBaseBranch] = useState("main");
+  const [creating, setCreating] = useState(false);
+
+  const cwd = (() => {
+    if (selectedProject) {
+      const project = projects?.find((p) => p.name === selectedProject);
+      return project?.directory || undefined;
+    }
+    return undefined;
+  })();
+
+  // Check git repo when cwd changes
+  useEffect(() => {
+    if (!cwd) {
+      setGitInfo(null);
+      setUseWorktree(false);
+      return;
+    }
+
+    let cancelled = false;
+    fetch("/api/git/check", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ path: cwd }),
+    })
+      .then((r) => r.json())
+      .then((data) => {
+        if (cancelled) return;
+        setGitInfo(data);
+        if (data.defaultBranch) setBaseBranch(data.defaultBranch);
+      })
+      .catch(() => {
+        if (!cancelled) setGitInfo(null);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [cwd]);
+
   useEffect(() => {
     if (open) {
       setName(generateName());
       setSelectedProject(projectName);
+      setUseWorktree(false);
+      setFeatureName("");
+      setCreating(false);
       setTimeout(() => {
         inputRef.current?.focus();
         inputRef.current?.select();
@@ -80,20 +133,63 @@ export function NewClaudeSessionDialog({
     }
   }, [open, projectName]);
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const project = projects?.find((p) => p.name === selectedProject);
-    onConfirm(
-      name.trim() || generateName(),
-      project?.directory || undefined,
-      selectedProject || undefined
-    );
-  };
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+      const sessionName = name.trim() || generateName();
+      let targetCwd = cwd;
+
+      if (useWorktree && featureName.trim() && cwd) {
+        setCreating(true);
+        try {
+          const res = await fetch("/api/worktrees", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              projectPath: cwd,
+              featureName: featureName.trim(),
+              baseBranch,
+            }),
+          });
+          if (!res.ok) {
+            const data = await res.json();
+            alert(data.error || "Failed to create worktree");
+            setCreating(false);
+            return;
+          }
+          const worktree = await res.json();
+          targetCwd = worktree.worktreePath;
+        } catch {
+          alert("Failed to create worktree");
+          setCreating(false);
+          return;
+        }
+        setCreating(false);
+      }
+
+      onConfirm(sessionName, targetCwd, selectedProject || undefined);
+    },
+    [
+      name,
+      cwd,
+      useWorktree,
+      featureName,
+      baseBranch,
+      selectedProject,
+      onConfirm,
+    ]
+  );
 
   const showProjectSelector = projects && projects.length > 0 && !projectName;
+  const branchPreview = featureName
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 50);
 
   return (
-    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
+    <Dialog open={open} onOpenChange={(o) => !o && !creating && onClose()}>
       <DialogContent className="sm:max-w-sm">
         <DialogHeader>
           <DialogTitle className="text-base">New session</DialogTitle>
@@ -127,6 +223,7 @@ export function NewClaudeSessionDialog({
               <p className="text-muted-foreground text-xs">{projectName}</p>
             )
           )}
+
           <div>
             <div className="flex gap-2">
               <Input
@@ -135,6 +232,7 @@ export function NewClaudeSessionDialog({
                 onChange={(e) => setName(e.target.value)}
                 placeholder="Session name"
                 className="h-9"
+                disabled={creating}
               />
               <Button
                 type="button"
@@ -142,21 +240,105 @@ export function NewClaudeSessionDialog({
                 size="icon-sm"
                 className="h-9 w-9 shrink-0"
                 onClick={() => setName(generateName())}
+                disabled={creating}
               >
                 <Sparkles className="h-3.5 w-3.5" />
               </Button>
             </div>
           </div>
+
+          {gitInfo?.isGitRepo && (
+            <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) => setUseWorktree(e.target.checked)}
+                  className="border-border bg-background accent-primary h-4 w-4 rounded"
+                  disabled={creating}
+                />
+                <label
+                  htmlFor="useWorktree"
+                  className="flex cursor-pointer items-center gap-1.5 text-sm font-medium"
+                >
+                  <GitBranch className="h-3.5 w-3.5" />
+                  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) => setFeatureName(e.target.value)}
+                      placeholder="add-dark-mode"
+                      className="h-8 text-sm"
+                      disabled={creating}
+                    />
+                    {branchPreview && (
+                      <p className="text-muted-foreground text-xs">
+                        Branch: feature/{branchPreview}
+                      </p>
+                    )}
+                  </div>
+                  <div className="space-y-1">
+                    <label className="text-muted-foreground text-xs">
+                      Base branch
+                    </label>
+                    <Select
+                      value={baseBranch}
+                      onValueChange={setBaseBranch}
+                      disabled={creating}
+                    >
+                      <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>
+          )}
+
           <div className="flex justify-end gap-2">
-            <Button type="button" variant="ghost" size="sm" onClick={onClose}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={onClose}
+              disabled={creating}
+            >
               Cancel
             </Button>
             <Button
               type="submit"
               size="sm"
-              disabled={showProjectSelector && !selectedProject}
+              disabled={
+                creating ||
+                (showProjectSelector && !selectedProject) ||
+                (useWorktree && !featureName.trim())
+              }
             >
-              Create
+              {creating ? (
+                <>
+                  <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+                  Creating worktree...
+                </>
+              ) : (
+                "Create"
+              )}
             </Button>
           </div>
         </form>

package/components/Pane/DesktopTabBar.tsx

@@ -291,6 +291,17 @@ export function DesktopTabBar({
 
       {/* Pane Controls */}
       <div className="ml-auto flex items-center gap-0.5 px-2">
+        {session?.branch_name && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-muted-foreground flex items-center gap-1 text-[10px]">
+                <GitBranch className="h-3 w-3" />
+                {session.branch_name}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>Worktree branch</TooltipContent>
+          </Tooltip>
+        )}
         {session?.working_directory && session.working_directory !== "~" && (
           <OpenInVSCode workingDirectory={session.working_directory} />
         )}

package/components/Pane/MobileTabBar.tsx

@@ -122,6 +122,12 @@ export function MobileTabBar({
               <span className="truncate text-sm font-medium">
                 {session?.name || "No session"}
               </span>
+              {session?.branch_name && (
+                <span className="text-muted-foreground flex items-center gap-0.5 text-[10px]">
+                  <GitBranch className="h-2.5 w-2.5" />
+                  {session.branch_name}
+                </span>
+              )}
               {sessionList.length > 0 && (
                 <ChevronDown className="text-muted-foreground h-3 w-3 shrink-0" />
               )}

package/lib/worktrees.ts

@@ -111,6 +111,15 @@ export async function createWorktree(
         { timeout: 30000 }
       );
       lastError = null;
+
+      // Init submodules if present
+      if (fs.existsSync(path.join(worktreePath, ".gitmodules"))) {
+        await execAsync(
+          `git -C "${worktreePath}" submodule update --init --recursive`,
+          { timeout: 120000 }
+        );
+      }
+
       break; // Success!
     } catch (error: unknown) {
       lastError = error instanceof Error ? error : new Error(String(error));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atercates/claude-deck",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "claude-deck": "./scripts/claude-deck"

package/scripts/nginx-http.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name claudedeck.example.com;
+
+    location / {
+        proxy_pass http://127.0.0.1:3011;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+
+        proxy_read_timeout 86400s;
+        proxy_send_timeout 86400s;
+    }
+}

package/components/NewSessionDialog/AdvancedSettings.tsx

@@ -1,69 +0,0 @@
-import { ChevronRight } from "lucide-react";
-import { CLAUDE_AUTO_APPROVE_FLAG } from "@/lib/providers";
-
-interface AdvancedSettingsProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  useTmux: boolean;
-  onUseTmuxChange: (checked: boolean) => void;
-  skipPermissions: boolean;
-  onSkipPermissionsChange: (checked: boolean) => void;
-}
-
-export function AdvancedSettings({
-  open,
-  onOpenChange,
-  useTmux,
-  onUseTmuxChange,
-  skipPermissions,
-  onSkipPermissionsChange,
-}: AdvancedSettingsProps) {
-  return (
-    <div className="border-border rounded-lg border">
-      <button
-        type="button"
-        onClick={() => onOpenChange(!open)}
-        className="text-muted-foreground hover:text-foreground flex w-full items-center gap-2 px-3 py-2 text-sm transition-colors"
-      >
-        <ChevronRight
-          className={`h-4 w-4 transition-transform ${open ? "rotate-90" : ""}`}
-        />
-        Advanced Settings
-      </button>
-      {open && (
-        <div className="space-y-3 border-t px-3 py-3">
-          <div className="flex items-center gap-2">
-            <input
-              type="checkbox"
-              id="useTmux"
-              checked={useTmux}
-              onChange={(e) => onUseTmuxChange(e.target.checked)}
-              className="border-border bg-background accent-primary h-4 w-4 rounded"
-            />
-            <label htmlFor="useTmux" className="cursor-pointer text-sm">
-              Use tmux session
-              <span className="text-muted-foreground ml-1">
-                (enables detach/attach)
-              </span>
-            </label>
-          </div>
-          <div className="flex items-center gap-2">
-            <input
-              type="checkbox"
-              id="skipPermissions"
-              checked={skipPermissions}
-              onChange={(e) => onSkipPermissionsChange(e.target.checked)}
-              className="border-border bg-background accent-primary h-4 w-4 rounded"
-            />
-            <label htmlFor="skipPermissions" className="cursor-pointer text-sm">
-              Auto-approve tool calls
-              <span className="text-muted-foreground ml-1">
-                ({CLAUDE_AUTO_APPROVE_FLAG})
-              </span>
-            </label>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}