@atercates/claude-deck 0.2.2 → 0.2.4

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/Pane/DesktopTabBar.tsx

@@ -21,6 +21,7 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { Session } from "@/lib/db";
+import type { SessionStatus } from "@/components/views/types";
 
 type ViewMode = "terminal" | "files" | "git" | "workers";
 
@@ -35,6 +36,7 @@ interface DesktopTabBarProps {
   activeTabId: string;
   session: Session | null | undefined;
   sessions: Session[];
+  sessionStatuses?: Record<string, SessionStatus>;
   viewMode: ViewMode;
   isFocused: boolean;
   isConductor: boolean;
@@ -63,6 +65,7 @@ export function DesktopTabBar({
   activeTabId,
   session,
   sessions,
+  sessionStatuses,
   viewMode,
   isFocused,
   isConductor,
@@ -103,34 +106,65 @@ export function DesktopTabBar({
     >
       {/* Tabs */}
       <div className="flex min-w-0 flex-1 items-center gap-0.5">
-        {tabs.map((tab) => (
-          <div
-            key={tab.id}
-            onClick={(e) => {
-              e.stopPropagation();
-              onTabSwitch(tab.id);
-            }}
-            className={cn(
-              "group flex cursor-pointer items-center gap-1.5 rounded-t-md px-3 py-1.5 text-xs transition-colors",
-              tab.id === activeTabId
-                ? "bg-background text-foreground"
-                : "text-muted-foreground hover:text-foreground/80 hover:bg-accent/50"
-            )}
-          >
-            <span className="max-w-[120px] truncate">{getTabName(tab)}</span>
-            {tabs.length > 1 && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTabClose(tab.id);
-                }}
-                className="hover:text-foreground ml-1 opacity-0 group-hover:opacity-100"
-              >
-                <X className="h-3 w-3" />
-              </button>
-            )}
-          </div>
-        ))}
+        {tabs.map((tab) => {
+          const tabStatus = tab.sessionId
+            ? sessionStatuses?.[tab.sessionId]
+            : undefined;
+          return (
+            <Tooltip key={tab.id}>
+              <TooltipTrigger asChild>
+                <div
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onTabSwitch(tab.id);
+                  }}
+                  className={cn(
+                    "group relative flex cursor-pointer items-center gap-1.5 rounded-t-md px-3 py-1.5 text-xs transition-colors",
+                    tab.id === activeTabId
+                      ? "bg-background text-foreground"
+                      : "text-muted-foreground hover:text-foreground/80 hover:bg-accent/50"
+                  )}
+                >
+                  {tabStatus &&
+                    tab.id !== activeTabId &&
+                    (tabStatus.status === "running" ||
+                      tabStatus.status === "waiting") && (
+                      <span
+                        className={cn(
+                          "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full",
+                          tabStatus.status === "running" &&
+                            "animate-pulse bg-green-500",
+                          tabStatus.status === "waiting" &&
+                            "animate-pulse bg-amber-500"
+                        )}
+                      />
+                    )}
+                  <span className="max-w-[120px] truncate">
+                    {getTabName(tab)}
+                  </span>
+                  {tabs.length > 1 && (
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onTabClose(tab.id);
+                      }}
+                      className="hover:text-foreground ml-1 opacity-0 group-hover:opacity-100"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  )}
+                </div>
+              </TooltipTrigger>
+              {tabStatus?.lastLine && tab.id !== activeTabId && (
+                <TooltipContent side="bottom" className="max-w-xs">
+                  <p className="truncate font-mono text-xs">
+                    {tabStatus.lastLine}
+                  </p>
+                </TooltipContent>
+              )}
+            </Tooltip>
+          );
+        })}
         <Tooltip>
           <TooltipTrigger asChild>
             <Button

package/components/Pane/index.tsx

@@ -43,10 +43,13 @@ const GitPanel = dynamic(
   { ssr: false, loading: () => <GitPanelSkeleton /> }
 );
 
+import type { SessionStatus } from "@/components/views/types";
+
 interface PaneProps {
   paneId: string;
   sessions: Session[];
   projects: Project[];
+  sessionStatuses?: Record<string, SessionStatus>;
   onRegisterTerminal: (
     paneId: string,
     tabId: string,
@@ -68,6 +71,7 @@ export const Pane = memo(function Pane({
   paneId,
   sessions,
   projects,
+  sessionStatuses,
   onRegisterTerminal,
   onMenuClick,
   onSelectSession,
@@ -318,6 +322,7 @@ export const Pane = memo(function Pane({
           activeTabId={paneData.activeTabId}
           session={session}
           sessions={sessions}
+          sessionStatuses={sessionStatuses}
           viewMode={viewMode}
           isFocused={isFocused}
           isConductor={isConductor}

package/components/QuickSwitcher.tsx

@@ -14,6 +14,7 @@ import { CodeSearchResults } from "@/components/CodeSearch/CodeSearchResults";
 import { useRipgrepAvailable } from "@/data/code-search";
 import { useClaudeProjectsQuery, useClaudeSessionsQuery } from "@/data/claude";
 import type { ClaudeProject } from "@/data/claude";
+import type { SessionStatus } from "@/components/views/types";
 
 interface QuickSwitcherProps {
   open: boolean;
@@ -27,6 +28,7 @@ interface QuickSwitcherProps {
   onSelectFile?: (file: string, line: number) => void;
   currentSessionId?: string;
   activeSessionWorkingDir?: string;
+  sessionStatuses?: Record<string, SessionStatus>;
 }
 
 interface FlatSession {
@@ -45,6 +47,7 @@ export function QuickSwitcher({
   onSelectFile,
   currentSessionId,
   activeSessionWorkingDir,
+  sessionStatuses,
 }: QuickSwitcherProps) {
   const [mode, setMode] = useState<"sessions" | "code">("sessions");
   const [query, setQuery] = useState("");
@@ -103,16 +106,46 @@ export function QuickSwitcher({
     // 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]);
 
+  // Build a map of claudeSessionId -> status for quick lookup
+  const statusByClaudeId = useMemo(() => {
+    if (!sessionStatuses) return new Map<string, SessionStatus>();
+    const map = new Map<string, SessionStatus>();
+    for (const s of Object.values(sessionStatuses)) {
+      if (s.claudeSessionId) {
+        map.set(s.claudeSessionId, s);
+      }
+    }
+    return map;
+  }, [sessionStatuses]);
+
   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]);
+    let sessions = allSessions;
+    if (query) {
+      const q = query.toLowerCase();
+      sessions = sessions.filter(
+        (s) =>
+          s.summary.toLowerCase().includes(q) ||
+          s.projectDisplayName.toLowerCase().includes(q) ||
+          s.cwd.toLowerCase().includes(q)
+      );
+    }
+
+    // Sort: waiting first, then running, then by time
+    return [...sessions].sort((a, b) => {
+      const statusA = statusByClaudeId.get(a.sessionId)?.status;
+      const statusB = statusByClaudeId.get(b.sessionId)?.status;
+      const orderMap: Record<string, number> = {
+        waiting: 0,
+        running: 1,
+      };
+      const orderA = statusA && statusA in orderMap ? orderMap[statusA] : 2;
+      const orderB = statusB && statusB in orderMap ? orderMap[statusB] : 2;
+      if (orderA !== orderB) return orderA - orderB;
+      return (
+        new Date(b.lastActivity).getTime() - new Date(a.lastActivity).getTime()
+      );
+    });
+  }, [allSessions, query, statusByClaudeId]);
 
   useEffect(() => {
     if (open) {
@@ -242,6 +275,7 @@ export function QuickSwitcher({
             ) : (
               filteredSessions.map((session, index) => {
                 const isCurrent = session.sessionId === currentSessionId;
+                const status = statusByClaudeId.get(session.sessionId);
                 return (
                   <button
                     key={session.sessionId}
@@ -259,11 +293,24 @@ export function QuickSwitcher({
                       index === selectedIndex
                         ? "bg-accent"
                         : "hover:bg-accent/50",
-                      isCurrent && "bg-primary/10"
+                      isCurrent && "bg-primary/10",
+                      status?.status === "waiting" && "bg-amber-500/5"
                     )}
                   >
-                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-emerald-500/20 text-emerald-400">
+                    <div className="relative 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" />
+                      {status && (
+                        <span
+                          className={cn(
+                            "border-background absolute -top-0.5 -right-0.5 h-2.5 w-2.5 rounded-full border-2",
+                            status.status === "running" &&
+                              "animate-pulse bg-green-500",
+                            status.status === "waiting" &&
+                              "animate-pulse bg-amber-500",
+                            status.status === "idle" && "bg-gray-400"
+                          )}
+                        />
+                      )}
                     </div>
                     <div className="min-w-0 flex-1">
                       <span className="block truncate text-sm font-medium">
@@ -272,6 +319,11 @@ export function QuickSwitcher({
                       <span className="text-muted-foreground block truncate text-xs">
                         {session.projectDisplayName}
                       </span>
+                      {status?.lastLine && (
+                        <span className="text-muted-foreground block truncate font-mono text-[10px]">
+                          {status.lastLine}
+                        </span>
+                      )}
                     </div>
                     <div className="text-muted-foreground flex flex-shrink-0 items-center gap-1 text-xs">
                       <Clock className="h-3 w-3" />

package/components/SessionList/ActiveSessionsSection.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useMemo, useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { ChevronRight, Activity, AlertCircle, Moon } from "lucide-react";
+import type { SessionStatus } from "@/components/views/types";
+
+interface ActiveSessionsSectionProps {
+  sessionStatuses: Record<string, SessionStatus>;
+  onSelect: (sessionId: string) => void;
+}
+
+const STATUS_ORDER: Record<string, number> = {
+  waiting: 0,
+  running: 1,
+  idle: 2,
+};
+
+export function ActiveSessionsSection({
+  sessionStatuses,
+  onSelect,
+}: ActiveSessionsSectionProps) {
+  const activeSessions = useMemo(() => {
+    return Object.entries(sessionStatuses)
+      .filter(
+        ([, s]) =>
+          s.status === "running" ||
+          s.status === "waiting" ||
+          s.status === "idle"
+      )
+      .map(([id, s]) => ({ id, ...s }))
+      .sort(
+        (a, b) => (STATUS_ORDER[a.status] ?? 3) - (STATUS_ORDER[b.status] ?? 3)
+      );
+  }, [sessionStatuses]);
+
+  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]);
+
+  if (activeSessions.length === 0) return null;
+
+  return (
+    <div className="mb-1">
+      <button
+        onClick={() => setExpanded((prev) => !prev)}
+        className={cn(
+          "flex w-full items-center gap-2 px-3 py-1.5 text-xs font-medium transition-colors",
+          hasWaiting
+            ? "text-amber-500"
+            : "text-muted-foreground hover:text-foreground"
+        )}
+      >
+        <ChevronRight
+          className={cn(
+            "h-3 w-3 transition-transform",
+            expanded && "rotate-90"
+          )}
+        />
+        <span>Active Sessions</span>
+        <span
+          className={cn(
+            "ml-auto rounded-full px-1.5 py-0.5 text-[10px]",
+            hasWaiting
+              ? "bg-amber-500/20 text-amber-500"
+              : "bg-muted text-muted-foreground"
+          )}
+        >
+          {activeSessions.length}
+        </span>
+      </button>
+
+      {expanded && (
+        <div className="space-y-0.5 px-1.5">
+          {activeSessions.map((session) => (
+            <button
+              key={session.id}
+              onClick={() => onSelect(session.id)}
+              className="hover:bg-accent group flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors"
+            >
+              <StatusIcon status={session.status} />
+              <div className="min-w-0 flex-1">
+                <span className="block truncate text-xs font-medium">
+                  {session.sessionName}
+                </span>
+                {session.lastLine && (
+                  <span className="text-muted-foreground block truncate font-mono text-[10px]">
+                    {session.lastLine}
+                  </span>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StatusIcon({ status }: { status: string }) {
+  if (status === "running") {
+    return (
+      <Activity className="h-3 w-3 flex-shrink-0 animate-pulse text-green-500" />
+    );
+  }
+  if (status === "waiting") {
+    return (
+      <AlertCircle className="h-3 w-3 flex-shrink-0 animate-pulse text-amber-500" />
+    );
+  }
+  return <Moon className="h-3 w-3 flex-shrink-0 text-gray-400" />;
+}