@atercates/claude-deck 0.2.14 → 0.2.16

package/app/api/tunnels/[port]/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import { isCloudflaredInstalled, startTunnel, stopTunnel } from "@/lib/tunnels";
+
+export async function POST(
+  _request: NextRequest,
+  { params }: { params: Promise<{ port: string }> }
+) {
+  try {
+    const { port: portStr } = await params;
+    const port = parseInt(portStr, 10);
+    if (isNaN(port) || port <= 0) {
+      return NextResponse.json({ error: "Invalid port" }, { status: 400 });
+    }
+
+    const installed = await isCloudflaredInstalled();
+    if (!installed) {
+      return NextResponse.json(
+        {
+          error: "cloudflared is not installed",
+          code: "CLOUDFLARED_NOT_FOUND",
+        },
+        { status: 400 }
+      );
+    }
+
+    const result = await startTunnel(port);
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Error starting tunnel:", error);
+    return NextResponse.json(
+      { error: "Failed to start tunnel" },
+      { status: 500 }
+    );
+  }
+}
+
+export async function DELETE(
+  _request: NextRequest,
+  { params }: { params: Promise<{ port: string }> }
+) {
+  try {
+    const { port: portStr } = await params;
+    const port = parseInt(portStr, 10);
+    if (isNaN(port) || port <= 0) {
+      return NextResponse.json({ error: "Invalid port" }, { status: 400 });
+    }
+
+    await stopTunnel(port);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error("Error stopping tunnel:", error);
+    return NextResponse.json(
+      { error: "Failed to stop tunnel" },
+      { status: 500 }
+    );
+  }
+}

package/app/api/tunnels/route.ts

@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { isCloudflaredInstalled, getTunnelsList } from "@/lib/tunnels";
+
+export async function GET() {
+  try {
+    const [installed, tunnels] = await Promise.all([
+      isCloudflaredInstalled(),
+      Promise.resolve(getTunnelsList()),
+    ]);
+    return NextResponse.json({ installed, tunnels });
+  } catch (error) {
+    console.error("Error getting tunnels:", error);
+    return NextResponse.json(
+      { error: "Failed to get tunnels" },
+      { status: 500 }
+    );
+  }
+}

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/components/SessionList/ActiveSessionsSection.tsx

@@ -1,9 +1,25 @@
 "use client";
 
-import { useMemo, useState, useEffect } from "react";
+import { useMemo, useState, useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
-import { ChevronRight, Activity, AlertCircle, Moon } from "lucide-react";
+import {
+  ChevronRight,
+  Activity,
+  AlertCircle,
+  Moon,
+  Globe,
+  Share2,
+  X,
+  Loader2,
+  Copy,
+  Check,
+} from "lucide-react";
 import type { SessionStatus } from "@/components/views/types";
+import {
+  useCloudflaredStatus,
+  useStartTunnel,
+  useStopTunnel,
+} from "@/data/tunnels/queries";
 
 interface ActiveSessionsSectionProps {
   sessionStatuses: Record<string, SessionStatus>;
@@ -37,11 +53,13 @@ export function ActiveSessionsSection({
   const hasWaiting = activeSessions.some((s) => s.status === "waiting");
   const [expanded, setExpanded] = useState(hasWaiting);
 
-  // Auto-expand when a session starts waiting
   useEffect(() => {
     if (hasWaiting) setExpanded(true);
   }, [hasWaiting]);
 
+  const { data: cfStatus } = useCloudflaredStatus();
+  const cloudflaredInstalled = cfStatus?.installed ?? false;
+
   if (activeSessions.length === 0) return null;
 
   return (
@@ -92,6 +110,19 @@ export function ActiveSessionsSection({
                     {session.lastLine}
                   </span>
                 )}
+                {session.listeningPorts &&
+                  session.listeningPorts.length > 0 && (
+                    <div className="mt-0.5 space-y-0.5">
+                      {session.listeningPorts.map((port) => (
+                        <PortBadge
+                          key={port}
+                          port={port}
+                          tunnelUrl={session.tunnelUrls?.[port]}
+                          cloudflaredInstalled={cloudflaredInstalled}
+                        />
+                      ))}
+                    </div>
+                  )}
               </div>
             </button>
           ))}
@@ -101,6 +132,112 @@ export function ActiveSessionsSection({
   );
 }
 
+function PortBadge({
+  port,
+  tunnelUrl,
+  cloudflaredInstalled,
+}: {
+  port: number;
+  tunnelUrl?: string;
+  cloudflaredInstalled: boolean;
+}) {
+  const startTunnel = useStartTunnel();
+  const stopTunnel = useStopTunnel();
+  const [copied, setCopied] = useState(false);
+
+  const isStarting = startTunnel.isPending;
+  const hasTunnel = !!tunnelUrl;
+
+  const handleShare = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (hasTunnel) {
+        stopTunnel.mutate(port);
+      } else {
+        startTunnel.mutate(port);
+      }
+    },
+    [hasTunnel, port, startTunnel, stopTunnel]
+  );
+
+  const handleCopy = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (tunnelUrl) {
+        navigator.clipboard.writeText(tunnelUrl);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }
+    },
+    [tunnelUrl]
+  );
+
+  return (
+    <div className="flex flex-col gap-0.5">
+      <div className="flex items-center gap-1">
+        <a
+          href={`http://localhost:${port}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={(e) => e.stopPropagation()}
+          className="inline-flex items-center gap-0.5 rounded bg-sky-500/15 px-1.5 py-0.5 font-mono text-[10px] text-sky-400 transition-colors hover:bg-sky-500/25"
+        >
+          <Globe className="h-2.5 w-2.5" />
+          {port}
+        </a>
+        {cloudflaredInstalled && (
+          <button
+            onClick={handleShare}
+            disabled={isStarting}
+            className={cn(
+              "rounded p-0.5 transition-colors",
+              hasTunnel
+                ? "text-emerald-400 hover:bg-emerald-500/20"
+                : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            )}
+            title={hasTunnel ? "Stop sharing" : "Share via tunnel"}
+          >
+            {isStarting ? (
+              <Loader2 className="h-3 w-3 animate-spin" />
+            ) : hasTunnel ? (
+              <X className="h-3 w-3" />
+            ) : (
+              <Share2 className="h-3 w-3" />
+            )}
+          </button>
+        )}
+      </div>
+      {tunnelUrl && (
+        <div className="flex items-center gap-1">
+          <a
+            href={tunnelUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(e) => e.stopPropagation()}
+            className="inline-flex max-w-[180px] items-center gap-0.5 truncate rounded bg-emerald-500/15 px-1.5 py-0.5 font-mono text-[10px] text-emerald-400 transition-colors hover:bg-emerald-500/25"
+          >
+            <Globe className="h-2.5 w-2.5 flex-shrink-0" />
+            {tunnelUrl
+              .replace("https://", "")
+              .replace(".trycloudflare.com", "")}
+          </a>
+          <button
+            onClick={handleCopy}
+            className="text-muted-foreground hover:text-foreground rounded p-0.5 transition-colors"
+            title="Copy URL"
+          >
+            {copied ? (
+              <Check className="h-3 w-3 text-emerald-400" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function StatusIcon({ status }: { status: string }) {
   if (status === "running") {
     return (

package/components/Terminal/hooks/websocket-connection.ts

@@ -34,7 +34,14 @@ export function createWebSocketConnection(
   intentionalCloseRef: React.MutableRefObject<boolean>
 ): WebSocketManager {
   const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const ws = new WebSocket(`${protocol}//${window.location.host}/ws/terminal`);
+  let ptyId: string | null = null;
+
+  function buildWsUrl() {
+    const base = `${protocol}//${window.location.host}/ws/terminal`;
+    return ptyId ? `${base}?ptyId=${ptyId}` : base;
+  }
+
+  const ws = new WebSocket(buildWsUrl());
   wsRef.current = ws;
 
   const sendResize = (cols: number, rows: number) => {
@@ -93,10 +100,11 @@ export function createWebSocketConnection(
     callbacks.onConnectionStateChange("reconnecting");
     reconnectDelayRef.current = WS_RECONNECT_BASE_DELAY;
 
-    // Create fresh connection with saved handlers
-    const newWs = new WebSocket(
-      `${protocol}//${window.location.host}/ws/terminal`
-    );
+    // Reattach to the same PTY if we have an ID
+    if (ptyId) {
+      term.clear();
+    }
+    const newWs = new WebSocket(buildWsUrl());
     wsRef.current = newWs;
     newWs.onopen = savedHandlers.onopen;
     newWs.onmessage = savedHandlers.onmessage;
@@ -135,6 +143,10 @@ export function createWebSocketConnection(
     resetInactivityTimer();
     try {
       const msg = JSON.parse(event.data);
+      if (msg.type === "pty-id") {
+        ptyId = msg.ptyId;
+        return;
+      }
       if (msg.type === "output") {
         const buffer = term.buffer.active;
         const scrollYBefore = buffer.viewportY;

package/components/views/types.ts

@@ -10,6 +10,8 @@ export interface SessionStatus {
   lastLine?: string;
   waitingContext?: string;
   claudeSessionId?: string | null;
+  listeningPorts?: number[];
+  tunnelUrls?: Record<number, string>;
 }
 
 export interface ViewProps {