@atercates/claude-deck 0.2.1

package/components/SessionList/index.tsx

@@ -0,0 +1,189 @@
+"use client";
+
+import { useState, useRef, useCallback } from "react";
+import { ClaudeProjectsSection } from "@/components/ClaudeProjects";
+import { NewProjectDialog } from "@/components/Projects";
+import { FolderPicker } from "@/components/FolderPicker";
+import { SelectionToolbar } from "./SelectionToolbar";
+import { SessionListHeader } from "./SessionListHeader";
+import { KillAllConfirm } from "./KillAllConfirm";
+import { useSessionListMutations } from "./hooks/useSessionListMutations";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { Loader2, AlertCircle } from "lucide-react";
+import type { Session } from "@/lib/db";
+import { useViewport } from "@/hooks/useViewport";
+
+import { useSessionsQuery } from "@/data/sessions";
+import { useCreateProject } from "@/data/projects";
+import { useClaudeProjectsQuery } from "@/data/claude";
+
+import type { SessionListProps } from "./SessionList.types";
+
+export type { SessionListProps } from "./SessionList.types";
+
+export function SessionList({
+  activeSessionId,
+  sessionStatuses,
+  onSelect,
+  onOpenInTab,
+  onNewSessionInProject,
+  onOpenTerminal,
+  onStartDevServer,
+  onCreateDevServer,
+  onResumeClaudeSession,
+  onNewSession,
+}: SessionListProps) {
+  const { isMobile } = useViewport();
+
+  const {
+    data: sessionsData,
+    isPending: isSessionsPending,
+    isError: isSessionsError,
+    error: sessionsError,
+  } = useSessionsQuery();
+
+  const { isPending: isClaudePending, isError: isClaudeError } =
+    useClaudeProjectsQuery();
+
+  const isInitialLoading = isSessionsPending || isClaudePending;
+  const hasError = isSessionsError || isClaudeError;
+
+  const sessions = sessionsData?.sessions ?? [];
+  const allSessionIds = sessions.map((s: Session) => s.id);
+
+  const mutations = useSessionListMutations({ onSelectSession: onSelect });
+  const createProject = useCreateProject();
+
+  const [showKillAllConfirm, setShowKillAllConfirm] = useState(false);
+  const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+  const [newProjectMode, setNewProjectMode] = useState<"new" | "clone">("new");
+  const [showFolderPicker, setShowFolderPicker] = useState(false);
+
+  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingHoverRef = useRef<{
+    session: Session;
+    rect: DOMRect;
+  } | null>(null);
+
+  const hoverHandlers = {
+    onHoverStart: useCallback(
+      (_session: Session, _rect: DOMRect) => {
+        if (isMobile) return;
+      },
+      [isMobile]
+    ),
+    onHoverEnd: useCallback(() => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+        hoverTimeoutRef.current = null;
+      }
+      pendingHoverRef.current = null;
+    }, []),
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      <SessionListHeader
+        onNewProject={() => {
+          setNewProjectMode("new");
+          setShowNewProjectDialog(true);
+        }}
+        onOpenProject={() => setShowFolderPicker(true)}
+        onCloneFromGithub={() => {
+          setNewProjectMode("clone");
+          setShowNewProjectDialog(true);
+        }}
+        onKillAll={() => setShowKillAllConfirm(true)}
+      />
+
+      {showKillAllConfirm && (
+        <KillAllConfirm
+          onCancel={() => setShowKillAllConfirm(false)}
+          onComplete={() => setShowKillAllConfirm(false)}
+        />
+      )}
+
+      <SelectionToolbar
+        allSessionIds={allSessionIds}
+        onDeleteSessions={mutations.handleBulkDelete}
+      />
+
+      {mutations.summarizingSessionId && (
+        <div className="bg-primary/10 mx-4 mb-2 flex items-center gap-2 rounded-lg p-2 text-sm">
+          <Loader2 className="text-primary h-4 w-4 animate-spin" />
+          <span className="text-primary">Generating summary...</span>
+        </div>
+      )}
+
+      <ScrollArea className="w-full flex-1">
+        <div className="max-w-full space-y-0.5 px-1.5 py-1">
+          {hasError && !isInitialLoading && (
+            <div className="flex flex-col items-center justify-center px-4 py-12">
+              <AlertCircle className="text-destructive/50 mb-3 h-10 w-10" />
+              <p className="text-destructive mb-2 text-sm">
+                Failed to load sessions
+              </p>
+              <p className="text-muted-foreground mb-4 text-xs">
+                {sessionsError?.message || "Unknown error"}
+              </p>
+              <Button
+                variant="outline"
+                onClick={mutations.handleRefresh}
+                className="gap-2"
+              >
+                Retry
+              </Button>
+            </div>
+          )}
+
+          {!isInitialLoading && !hasError && (
+            <ClaudeProjectsSection
+              onSelectSession={(claudeSessionId, cwd, summary, projectName) => {
+                onResumeClaudeSession?.(
+                  claudeSessionId,
+                  cwd,
+                  summary,
+                  projectName
+                );
+              }}
+              onNewSession={onNewSession}
+            />
+          )}
+        </div>
+      </ScrollArea>
+
+      <NewProjectDialog
+        open={showNewProjectDialog}
+        mode={newProjectMode}
+        onClose={() => setShowNewProjectDialog(false)}
+        onCreated={() => setShowNewProjectDialog(false)}
+      />
+
+      {showFolderPicker && (
+        <FolderPicker
+          initialPath="~"
+          onClose={() => setShowFolderPicker(false)}
+          onSelect={(path) => {
+            const parts = path.split("/").filter(Boolean);
+            const name = parts[parts.length - 1] || "project";
+
+            createProject.mutate(
+              {
+                name,
+                workingDirectory: path,
+                agentType: "claude",
+                defaultModel: "sonnet",
+                devServers: [],
+              },
+              {
+                onSuccess: () => setShowFolderPicker(false),
+                onError: () => setShowFolderPicker(false),
+              }
+            );
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/components/ShellDrawer/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { useRef, useCallback, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { X, Copy, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useDrawerAnimation } from "@/hooks/useDrawerAnimation";
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
+import type { TerminalHandle } from "@/components/Terminal";
+
+const Terminal = dynamic(
+  () => import("@/components/Terminal").then((mod) => mod.Terminal),
+  { ssr: false }
+);
+
+interface ShellDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  workingDirectory: string;
+}
+
+export function ShellDrawer({
+  open,
+  onOpenChange,
+  workingDirectory,
+}: ShellDrawerProps) {
+  const terminalRef = useRef<TerminalHandle | null>(null);
+  const hasInitialized = useRef(false);
+  const { copied, copy } = useCopyToClipboard();
+
+  // Animation
+  const isAnimatingIn = useDrawerAnimation(open);
+
+  // When terminal connects, cd to working directory
+  const handleConnected = useCallback(() => {
+    if (terminalRef.current && workingDirectory && !hasInitialized.current) {
+      hasInitialized.current = true;
+      // Clear any existing command, cd to directory, and clear screen
+      setTimeout(() => {
+        terminalRef.current?.sendInput("\x15"); // Ctrl+U to clear line
+        setTimeout(() => {
+          terminalRef.current?.sendCommand(`cd ${workingDirectory} && clear`);
+        }, 50);
+      }, 100);
+    }
+  }, [workingDirectory]);
+
+  // Reset initialization flag when drawer closes
+  useEffect(() => {
+    if (!open) {
+      hasInitialized.current = false;
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={cn(
+        "bg-muted/30 flex h-full flex-col transition-all duration-200 ease-out",
+        isAnimatingIn ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-1.5">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground font-mono text-sm">
+            {">_"}
+          </span>
+          <span className="text-muted-foreground truncate text-xs">
+            {workingDirectory}
+          </span>
+          <button
+            onClick={() => copy(workingDirectory)}
+            className="text-muted-foreground hover:text-foreground flex-shrink-0 p-0.5"
+            title="Copy path"
+          >
+            {copied ? (
+              <Check className="h-3 w-3 text-green-500" />
+            ) : (
+              <Copy className="h-3 w-3" />
+            )}
+          </button>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => onOpenChange(false)}
+          className="h-7 w-7"
+        >
+          <X className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+
+      {/* Terminal */}
+      <div className="flex-1 overflow-hidden">
+        <Terminal
+          ref={terminalRef}
+          onConnected={handleConnected}
+          showImageButton={false}
+        />
+      </div>
+    </div>
+  );
+}

package/components/SidebarFooter.tsx

@@ -0,0 +1,55 @@
+import { ThemeToggle } from "@/components/ThemeToggle";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+export function SidebarFooter() {
+  return (
+    <div className="mt-auto px-3 pt-2 pb-[max(0.75rem,env(safe-area-inset-bottom))]">
+      <div className="flex items-center justify-between">
+        <span className="text-muted-foreground text-xs">Theme</span>
+        <ThemeToggle />
+      </div>
+      <div className="text-muted-foreground/50 mt-2 text-center text-[10px]">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <a
+              href="https://aterm.app"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-muted-foreground transition-colors"
+            >
+              aTerm
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>Desktop terminal workspace for AI coding agents</p>
+          </TooltipContent>
+        </Tooltip>
+        <span className="mx-1.5">·</span>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <a
+              href="https://lumifyhub.io"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-muted-foreground transition-colors"
+            >
+              LumifyHub
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p className="flex items-center gap-1.5">
+              Team collaboration with chat and documentation
+              <span className="bg-primary/15 text-primary rounded-full px-1.5 py-0.5 text-[10px] font-medium">
+                Sponsor
+              </span>
+            </p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

package/components/Terminal/KeybarToggleButton.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { Keyboard, KeyboardOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface KeybarToggleButtonProps {
+  isVisible: boolean;
+  onToggle: () => void;
+}
+
+/**
+ * Floating button to toggle mobile keybar visibility.
+ * Positioned at bottom-right of terminal, above the keybar when visible.
+ */
+export function KeybarToggleButton({
+  isVisible,
+  onToggle,
+}: KeybarToggleButtonProps) {
+  return (
+    <button
+      onClick={onToggle}
+      className={cn(
+        "absolute right-3 z-30",
+        "flex items-center justify-center",
+        "h-11 w-11 rounded-full",
+        "bg-secondary/90 backdrop-blur-sm",
+        "shadow-lg",
+        "text-muted-foreground hover:bg-accent hover:text-foreground",
+        "touch-manipulation transition-all duration-200",
+        "active:scale-95",
+        // Position: moves up when keyboard is visible (accounts for safe-area + taller keys + recent commands bar)
+        isVisible
+          ? "bottom-[265px]"
+          : "bottom-[calc(1rem+env(safe-area-inset-bottom))]"
+      )}
+      aria-label={isVisible ? "Hide keyboard" : "Show keyboard"}
+    >
+      {isVisible ? (
+        <KeyboardOff className="h-5 w-5" />
+      ) : (
+        <Keyboard className="h-5 w-5" />
+      )}
+    </button>
+  );
+}

package/components/Terminal/ScrollToBottomButton.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { ArrowDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ScrollToBottomButtonProps {
+  visible: boolean;
+  onClick: () => void;
+}
+
+export function ScrollToBottomButton({
+  visible,
+  onClick,
+}: ScrollToBottomButtonProps) {
+  if (!visible) return null;
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "absolute right-6 bottom-6 p-3",
+        "bg-primary/90 hover:bg-primary backdrop-blur-sm",
+        "text-primary-foreground shadow-primary/30 rounded-full shadow-xl",
+        "transition-all hover:scale-105 active:scale-95",
+        "animate-bounce"
+      )}
+      title="Scroll to bottom"
+    >
+      <ArrowDown className="h-5 w-5" />
+    </button>
+  );
+}

package/components/Terminal/SearchBar.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { forwardRef } from "react";
+import { Search, ChevronUp, ChevronDown, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface SearchBarProps {
+  visible: boolean;
+  query: string;
+  onQueryChange: (query: string) => void;
+  onFindNext: () => void;
+  onFindPrevious: () => void;
+  onClose: () => void;
+}
+
+export const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
+  (
+    { visible, query, onQueryChange, onFindNext, onFindPrevious, onClose },
+    ref
+  ) => {
+    if (!visible) return null;
+
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-2 px-4 py-2",
+          "bg-zinc-900/90 backdrop-blur-sm",
+          "border-b border-zinc-800"
+        )}
+      >
+        <Search className="h-4 w-4 text-zinc-500" />
+        <input
+          ref={ref}
+          type="text"
+          value={query}
+          onChange={(e) => onQueryChange(e.target.value)}
+          placeholder="Search in terminal..."
+          className={cn(
+            "flex-1 bg-transparent text-sm text-zinc-100 placeholder:text-zinc-500",
+            "focus:outline-none"
+          )}
+        />
+        <div className="flex items-center gap-1">
+          <button
+            onClick={onFindPrevious}
+            className="rounded p-1.5 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
+            title="Previous (Shift+Enter)"
+          >
+            <ChevronUp className="h-4 w-4" />
+          </button>
+          <button
+            onClick={onFindNext}
+            className="rounded p-1.5 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
+            title="Next (Enter)"
+          >
+            <ChevronDown className="h-4 w-4" />
+          </button>
+          <button
+            onClick={onClose}
+            className="rounded p-1.5 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
+            title="Close (Esc)"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+);
+
+SearchBar.displayName = "SearchBar";