@atercates/claude-deck 0.2.1 → 0.2.3

package/app/setup/page.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { Loader2, Shield, Eye, EyeOff } from "lucide-react";
+
+export default function SetupPage() {
+  const router = useRouter();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [enableTotp, setEnableTotp] = useState(false);
+  const [totpSecret, setTotpSecret] = useState("");
+  const [totpCode, setTotpCode] = useState("");
+  const [qrDataUrl, setQrDataUrl] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    fetch("/api/auth/session").then(async (res) => {
+      const data = await res.json();
+      if (!data.needsSetup) {
+        router.push(data.authenticated ? "/" : "/login");
+      }
+    });
+  }, [router]);
+
+  useEffect(() => {
+    if (enableTotp && !totpSecret && username.length >= 3) {
+      generateTotp();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally omit generateTotp and totpSecret to avoid regenerating secret on every render
+  }, [enableTotp, username]);
+
+  const generateTotp = async () => {
+    try {
+      const { TOTP, Secret } = await import("otpauth");
+      const secret = new Secret({ size: 20 });
+      const totp = new TOTP({
+        issuer: "ClaudeDeck",
+        label: username,
+        algorithm: "SHA1",
+        digits: 6,
+        period: 30,
+        secret,
+      });
+
+      const uri = totp.toString();
+      setTotpSecret(secret.base32);
+
+      const QRCode = await import("qrcode");
+      const dataUrl = await QRCode.toDataURL(uri, {
+        width: 200,
+        margin: 2,
+        color: { dark: "#ffffff", light: "#00000000" },
+      });
+      setQrDataUrl(dataUrl);
+    } catch (err) {
+      console.error("Failed to generate TOTP:", err);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters");
+      return;
+    }
+
+    if (enableTotp && totpCode.length !== 6) {
+      setError("Enter the 6-digit code from your authenticator app");
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      const res = await fetch("/api/auth/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          username,
+          password,
+          ...(enableTotp ? { totpSecret, totpCode } : {}),
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        setError(data.error || "Setup failed");
+        return;
+      }
+
+      router.push("/");
+      router.refresh();
+    } catch {
+      setError("Connection error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-background flex min-h-screen items-center justify-center p-4">
+      <div className="border-border bg-card w-full max-w-md rounded-xl border p-8 shadow-lg">
+        <div className="mb-8 text-center">
+          <div className="bg-primary/10 text-primary mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+            <Shield className="h-6 w-6" />
+          </div>
+          <h1 className="text-foreground text-2xl font-semibold">
+            Welcome to ClaudeDeck
+          </h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Create your account to get started
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="space-y-2">
+            <label
+              htmlFor="username"
+              className="text-foreground text-sm font-medium"
+            >
+              Username
+            </label>
+            <Input
+              id="username"
+              type="text"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="admin"
+              autoComplete="username"
+              autoFocus
+              required
+              minLength={3}
+              maxLength={32}
+              pattern="[a-zA-Z0-9_]+"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="password"
+              className="text-foreground text-sm font-medium"
+            >
+              Password
+            </label>
+            <div className="relative">
+              <Input
+                id="password"
+                type={showPassword ? "text" : "password"}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                autoComplete="new-password"
+                required
+                minLength={8}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
+                tabIndex={-1}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4" />
+                ) : (
+                  <Eye className="h-4 w-4" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <label
+              htmlFor="confirmPassword"
+              className="text-foreground text-sm font-medium"
+            >
+              Confirm password
+            </label>
+            <Input
+              id="confirmPassword"
+              type={showPassword ? "text" : "password"}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              autoComplete="new-password"
+              required
+              minLength={8}
+            />
+          </div>
+
+          <div className="border-border flex items-center justify-between rounded-lg border p-3">
+            <div>
+              <p className="text-foreground text-sm font-medium">
+                Two-factor authentication
+              </p>
+              <p className="text-muted-foreground text-xs">
+                Secure your account with TOTP
+              </p>
+            </div>
+            <Switch checked={enableTotp} onCheckedChange={setEnableTotp} />
+          </div>
+
+          {enableTotp && qrDataUrl && (
+            <div className="border-border space-y-3 rounded-lg border p-4">
+              <p className="text-foreground text-center text-sm font-medium">
+                Scan with your authenticator app
+              </p>
+              <div className="flex justify-center">
+                {/* eslint-disable-next-line @next/next/no-img-element -- base64 data URL, next/image not applicable */}
+                <img
+                  src={qrDataUrl}
+                  alt="TOTP QR Code"
+                  className="h-[200px] w-[200px]"
+                />
+              </div>
+              <div className="space-y-1">
+                <p className="text-muted-foreground text-center text-xs">
+                  Or enter manually:
+                </p>
+                <code className="bg-muted text-foreground block rounded p-2 text-center font-mono text-xs break-all">
+                  {totpSecret}
+                </code>
+              </div>
+              <div className="space-y-2">
+                <label
+                  htmlFor="totpVerify"
+                  className="text-foreground text-sm font-medium"
+                >
+                  Verification code
+                </label>
+                <Input
+                  id="totpVerify"
+                  type="text"
+                  inputMode="numeric"
+                  pattern="[0-9]*"
+                  maxLength={6}
+                  value={totpCode}
+                  onChange={(e) =>
+                    setTotpCode(e.target.value.replace(/\D/g, ""))
+                  }
+                  placeholder="000000"
+                  className="text-center text-lg tracking-[0.3em]"
+                  autoComplete="one-time-code"
+                />
+              </div>
+            </div>
+          )}
+
+          {enableTotp && !qrDataUrl && username.length < 3 && (
+            <p className="text-muted-foreground text-center text-sm">
+              Enter a username (3+ characters) to generate the QR code
+            </p>
+          )}
+
+          {error && (
+            <p className="text-destructive text-center text-sm">{error}</p>
+          )}
+
+          <Button type="submit" className="w-full" disabled={loading}>
+            {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+            Create account
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/components/ConductorPanel.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { WorkerCard, type WorkerInfo, type WorkerStatus } from "./WorkerCard";
+import { WorkerCard, type WorkerInfo } from "./WorkerCard";
 import { Button } from "./ui/button";
 import {
   RefreshCw,

package/components/DevServers/ServerLogsModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { X, RefreshCw, Loader2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 
@@ -20,31 +20,34 @@ export function ServerLogsModal({
   const [refreshing, setRefreshing] = useState(false);
   const logsRef = useRef<HTMLDivElement>(null);
 
-  const fetchLogs = async (isRefresh = false) => {
-    if (isRefresh) {
-      setRefreshing(true);
-    } else {
-      setLoading(true);
-    }
+  const fetchLogs = useCallback(
+    async (isRefresh = false) => {
+      if (isRefresh) {
+        setRefreshing(true);
+      } else {
+        setLoading(true);
+      }
 
-    try {
-      const res = await fetch(`/api/dev-servers/${serverId}/logs?lines=200`);
-      if (res.ok) {
-        const data = await res.json();
-        setLogs(data.logs || []);
+      try {
+        const res = await fetch(`/api/dev-servers/${serverId}/logs?lines=200`);
+        if (res.ok) {
+          const data = await res.json();
+          setLogs(data.logs || []);
+        }
+      } catch (err) {
+        console.error("Failed to fetch logs:", err);
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
       }
-    } catch (err) {
-      console.error("Failed to fetch logs:", err);
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  };
+    },
+    [serverId]
+  );
 
   // Initial fetch
   useEffect(() => {
     fetchLogs();
-  }, [serverId]);
+  }, [fetchLogs]);
 
   // Auto-scroll to bottom when logs update
   useEffect(() => {
@@ -59,7 +62,7 @@ export function ServerLogsModal({
       fetchLogs(true);
     }, 3000);
     return () => clearInterval(interval);
-  }, [serverId]);
+  }, [fetchLogs]);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">

package/components/DiffViewer/DiffModal.tsx

@@ -4,7 +4,6 @@ import { X, Plus, Minus, ChevronLeft } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { UnifiedDiff } from "./UnifiedDiff";
 import { parseDiff, getDiffFileName, getDiffSummary } from "@/lib/diff-parser";
-import { cn } from "@/lib/utils";
 
 interface DiffModalProps {
   diff: string;

package/components/FileExplorer/index.tsx

@@ -213,7 +213,7 @@ function DesktopFileExplorer({
   openFiles,
   activeFilePath,
   activeFile,
-  saving,
+  saving: _saving,
   onFileClick,
   onSelectTab,
   onCloseTab,

package/components/GitDrawer/FileEditDialog.tsx

@@ -108,7 +108,7 @@ export function FileEditDialog({
     : baseDir;
   const filePath = `${expandedBaseDir}/${file.path}`;
   const fileName = file.path.split("/").pop() || file.path;
-  const repoName = "repoName" in file ? file.repoName : null;
+  const _repoName = "repoName" in file ? file.repoName : null;
   const hasChanges = modifiedContent !== initialModified;
 
   useEffect(() => {

package/components/GitPanel/FileChanges.tsx

@@ -44,7 +44,7 @@ const SWIPE_THRESHOLD = 80;
 export function FileChanges({
   files,
   title,
-  emptyMessage,
+  emptyMessage: _emptyMessage,
   selectedPath,
   onFileClick,
   onStage,
@@ -99,7 +99,11 @@ export function FileChanges({
           <button
             onClick={(e) => {
               e.stopPropagation();
-              isStaged ? onUnstageAll?.() : onStageAll?.();
+              if (isStaged) {
+                onUnstageAll?.();
+              } else {
+                onStageAll?.();
+              }
             }}
             className="text-muted-foreground hover:text-foreground flex items-center gap-1 text-xs transition-colors"
           >

package/components/GitPanel/index.tsx

@@ -572,7 +572,7 @@ function MobileGitPanel({
   onUnstageAll,
   onBack,
   onCommit,
-  onShowPRModal,
+  onShowPRModal: _onShowPRModal,
   onClosePRModal,
   onCreatePR,
 }: MobileGitPanelProps) {

package/components/Pane/index.tsx

@@ -4,10 +4,7 @@ import { useRef, useCallback, useEffect, memo, useState, useMemo } from "react";
 import dynamic from "next/dynamic";
 import { usePanes } from "@/contexts/PaneContext";
 import { useViewport } from "@/hooks/useViewport";
-import type {
-  TerminalHandle,
-  TerminalScrollState,
-} from "@/components/Terminal";
+import type { TerminalHandle } from "@/components/Terminal";
 import type { Session, Project } from "@/lib/db";
 import { sessionRegistry } from "@/lib/client/session-registry";
 import { cn } from "@/lib/utils";
@@ -114,16 +111,20 @@ export const Pane = memo(function Pane({
     ? (terminalRefs.current.get(activeTab.id) ?? null)
     : null;
   const isFocused = focusedPaneId === paneId;
-  const session = activeTab
-    ? (sessions.find((s) => s.id === activeTab.sessionId) ??
-      (activeTab.sessionId
-        ? ({
-            id: activeTab.sessionId,
-            name: activeTab.sessionName || activeTab.sessionId.slice(0, 8),
-            working_directory: activeTab.workingDirectory || "~",
-          } as Session)
-        : null))
-    : null;
+  const session = useMemo(
+    () =>
+      activeTab
+        ? (sessions.find((s) => s.id === activeTab.sessionId) ??
+          (activeTab.sessionId
+            ? ({
+                id: activeTab.sessionId,
+                name: activeTab.sessionName || activeTab.sessionId.slice(0, 8),
+                working_directory: activeTab.workingDirectory || "~",
+              } as Session)
+            : null))
+        : null,
+    [activeTab, sessions]
+  );
 
   // File editor state - lifted here so it persists across view switches
   const fileEditor = useFileEditor();
@@ -236,7 +237,7 @@ export const Pane = memo(function Pane({
         setTimeout(() => handle.sendCommand(`tmux attach -t ${tmuxName}`), 100);
       }
     },
-    [paneId, sessions, onRegisterTerminal]
+    [paneId, paneData, sessions, onRegisterTerminal]
   );
 
   // Track current tab ID for cleanup

package/components/Projects/ProjectCard.tsx

@@ -108,7 +108,7 @@ export function ProjectCard({
     setIsEditing(false);
   };
 
-  const handleClick = (e: React.MouseEvent) => {
+  const handleClick = (_e: React.MouseEvent) => {
     if (isEditing) return;
     onClick?.();
     onToggleExpanded?.(!project.expanded);

package/components/QuickSwitcher.tsx

@@ -100,6 +100,7 @@ export function QuickSwitcher({
       (a, b) =>
         new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime()
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only re-run when .data changes, not entire query objects
   }, [s0.data, s1.data, s2.data, s3.data, topProjects]);
 
   const filteredSessions = useMemo(() => {

package/components/SessionList/SessionList.types.ts

@@ -1,4 +1,4 @@
-import type { Session, Group } from "@/lib/db";
+import type { Session } from "@/lib/db";
 
 export interface SessionStatus {
   sessionName: string;

package/components/SessionList/index.tsx

@@ -23,14 +23,14 @@ import type { SessionListProps } from "./SessionList.types";
 export type { SessionListProps } from "./SessionList.types";
 
 export function SessionList({
-  activeSessionId,
-  sessionStatuses,
+  activeSessionId: _activeSessionId,
+  sessionStatuses: _sessionStatuses,
   onSelect,
-  onOpenInTab,
-  onNewSessionInProject,
-  onOpenTerminal,
-  onStartDevServer,
-  onCreateDevServer,
+  onOpenInTab: _onOpenInTab,
+  onNewSessionInProject: _onNewSessionInProject,
+  onOpenTerminal: _onOpenTerminal,
+  onStartDevServer: _onStartDevServer,
+  onCreateDevServer: _onCreateDevServer,
   onResumeClaudeSession,
   onNewSession,
 }: SessionListProps) {
@@ -66,7 +66,7 @@ export function SessionList({
     rect: DOMRect;
   } | null>(null);
 
-  const hoverHandlers = {
+  const _hoverHandlers = {
     onHoverStart: useCallback(
       (_session: Session, _rect: DOMRect) => {
         if (isMobile) return;

package/components/Terminal/hooks/useTerminalConnection.ts

@@ -131,6 +131,7 @@ export function useTerminalConnection({
   useEffect(() => {
     if (!terminalRef.current) return;
 
+    const terminalElement = terminalRef.current;
     let cancelled = false;
     // Reset intentional close flag (may be true from previous cleanup)
     intentionalCloseRef.current = false;
@@ -208,9 +209,9 @@ export function useTerminalConnection({
 
       // Save scroll state before unmount
       const term = xtermRef.current;
-      if (term && callbacksRef.current.onBeforeUnmount && terminalRef.current) {
+      if (term && callbacksRef.current.onBeforeUnmount && terminalElement) {
         const buffer = term.buffer.active;
-        const viewport = terminalRef.current.querySelector(
+        const viewport = terminalElement.querySelector(
           ".xterm-viewport"
         ) as HTMLElement;
         callbacksRef.current.onBeforeUnmount({

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

@@ -57,6 +57,7 @@ export function createWebSocketConnection(
 
   // Force reconnect - kills any existing connection and creates fresh one
   // Note: savedHandlers is populated after handlers are defined below
+  // eslint-disable-next-line prefer-const -- assigned after handler definitions below
   let savedHandlers: {
     onopen: typeof ws.onopen;
     onmessage: typeof ws.onmessage;

package/data/git/queries.ts

@@ -6,7 +6,6 @@ export { gitKeys };
 import type { CommitSummary, CommitDetail } from "@/lib/git-history";
 import type { GitStatus } from "@/lib/git-status";
 import type { MultiRepoGitStatus } from "@/lib/multi-repo-git";
-import type { ProjectRepository } from "@/lib/db";
 
 export interface PRInfo {
   number: number;

package/lib/auth/index.ts

@@ -0,0 +1,15 @@
+export { hashPassword, verifyPassword } from "./password";
+export { generateTotpSecret, verifyTotpCode } from "./totp";
+export {
+  createSession,
+  validateSession,
+  renewSession,
+  deleteSession,
+  cleanupExpiredSessions,
+  COOKIE_NAME,
+  buildSessionCookie,
+  buildClearCookie,
+  parseCookies,
+  hasUsers,
+} from "./session";
+export { checkRateLimit } from "./rate-limit";

package/lib/auth/password.ts

@@ -0,0 +1,14 @@
+import bcrypt from "bcryptjs";
+
+const BCRYPT_COST = 12;
+
+export async function hashPassword(password: string): Promise<string> {
+  return bcrypt.hash(password, BCRYPT_COST);
+}
+
+export async function verifyPassword(
+  password: string,
+  hash: string
+): Promise<boolean> {
+  return bcrypt.compare(password, hash);
+}

package/lib/auth/rate-limit.ts

@@ -0,0 +1,40 @@
+const MAX_ATTEMPTS = 5;
+const WINDOW_MS = 15 * 60 * 1000;
+
+interface RateLimitEntry {
+  count: number;
+  resetAt: number;
+}
+
+const attempts = new Map<string, RateLimitEntry>();
+
+setInterval(
+  () => {
+    const now = Date.now();
+    for (const [ip, entry] of attempts) {
+      if (entry.resetAt < now) attempts.delete(ip);
+    }
+  },
+  5 * 60 * 1000
+);
+
+export function checkRateLimit(ip: string): {
+  allowed: boolean;
+  retryAfterSeconds?: number;
+} {
+  const now = Date.now();
+  const entry = attempts.get(ip);
+
+  if (!entry || entry.resetAt < now) {
+    attempts.set(ip, { count: 1, resetAt: now + WINDOW_MS });
+    return { allowed: true };
+  }
+
+  if (entry.count >= MAX_ATTEMPTS) {
+    const retryAfterSeconds = Math.ceil((entry.resetAt - now) / 1000);
+    return { allowed: false, retryAfterSeconds };
+  }
+
+  entry.count++;
+  return { allowed: true };
+}