@atercates/claude-deck 0.2.1

package/components/Terminal/index.tsx

@@ -0,0 +1,320 @@
+"use client";
+
+import {
+  useRef,
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+  useState,
+  useMemo,
+} from "react";
+import { useTheme } from "next-themes";
+import "@xterm/xterm/css/xterm.css";
+import { Paperclip, WifiOff, Upload, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { SearchBar } from "./SearchBar";
+import { ScrollToBottomButton } from "./ScrollToBottomButton";
+import { TerminalToolbar } from "./TerminalToolbar";
+import { useTerminalConnection, useTerminalSearch } from "./hooks";
+import type { TerminalScrollState } from "./hooks";
+import { useViewport } from "@/hooks/useViewport";
+import { useFileDrop } from "@/hooks/useFileDrop";
+import { uploadFileToTemp } from "@/lib/file-upload";
+import { FilePicker } from "@/components/FilePicker";
+
+export type { TerminalScrollState };
+
+export interface TerminalHandle {
+  sendCommand: (command: string) => void;
+  sendInput: (data: string) => void;
+  focus: () => void;
+  getScrollState: () => TerminalScrollState | null;
+  restoreScrollState: (state: TerminalScrollState) => void;
+}
+
+interface TerminalProps {
+  onConnected?: () => void;
+  onDisconnected?: () => void;
+  onBeforeUnmount?: (scrollState: TerminalScrollState) => void;
+  initialScrollState?: TerminalScrollState;
+  /** Show image picker button (default: true) */
+  showImageButton?: boolean;
+}
+
+export const Terminal = forwardRef<TerminalHandle, TerminalProps>(
+  function Terminal(
+    {
+      onConnected,
+      onDisconnected,
+      onBeforeUnmount,
+      initialScrollState,
+      showImageButton = true,
+    },
+    ref
+  ) {
+    const terminalRef = useRef<HTMLDivElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { isMobile } = useViewport();
+    const { theme: currentTheme, resolvedTheme } = useTheme();
+    const [showFilePicker, setShowFilePicker] = useState(false);
+    const [selectMode, setSelectMode] = useState(false);
+    const [isUploading, setIsUploading] = useState(false);
+
+    // Use the full theme string (e.g., "dark-purple") for terminal theming
+    const terminalTheme = useMemo(() => {
+      // For system theme, use the resolved theme
+      if (currentTheme === "system") {
+        return resolvedTheme || "dark";
+      }
+      return currentTheme || "dark";
+    }, [currentTheme, resolvedTheme]);
+
+    const {
+      connectionState,
+      isAtBottom,
+      xtermRef,
+      searchAddonRef,
+      scrollToBottom,
+      copySelection,
+      sendInput,
+      sendCommand,
+      focus,
+      getScrollState,
+      restoreScrollState,
+      reconnect,
+    } = useTerminalConnection({
+      terminalRef,
+      onConnected,
+      onDisconnected,
+      onBeforeUnmount,
+      initialScrollState,
+      isMobile,
+      theme: terminalTheme,
+      selectMode,
+    });
+
+    const {
+      searchVisible,
+      searchQuery,
+      setSearchQuery,
+      searchInputRef,
+      closeSearch,
+      findNext,
+      findPrevious,
+    } = useTerminalSearch(searchAddonRef, xtermRef);
+
+    // Handle image selection - paste file path into terminal
+    const handleImageSelect = useCallback(
+      (filePath: string) => {
+        sendInput(filePath);
+        setShowFilePicker(false);
+        focus();
+      },
+      [sendInput, focus]
+    );
+
+    // Handle file drop - upload and insert path into terminal
+    const handleFileDrop = useCallback(
+      async (file: File) => {
+        setIsUploading(true);
+        try {
+          const path = await uploadFileToTemp(file);
+          if (path) {
+            sendInput(path);
+            focus();
+          }
+        } catch (err) {
+          console.error("Failed to upload file:", err);
+        } finally {
+          setIsUploading(false);
+        }
+      },
+      [sendInput, focus]
+    );
+
+    // Drag and drop for file uploads
+    const { isDragging, dragHandlers } = useFileDrop(
+      containerRef,
+      handleFileDrop,
+      { disabled: isUploading || showFilePicker }
+    );
+
+    // Expose imperative methods
+    useImperativeHandle(ref, () => ({
+      sendCommand,
+      sendInput,
+      focus,
+      getScrollState,
+      restoreScrollState,
+    }));
+
+    // Extract terminal text for select mode overlay
+    const terminalText = useMemo(() => {
+      if (!selectMode || !xtermRef.current) return "";
+
+      const term = xtermRef.current;
+      const buffer = term.buffer.active;
+      const startRow = Math.max(0, buffer.baseY - 500);
+      const endRow = buffer.baseY + term.rows;
+      const lines: string[] = [];
+
+      for (let i = startRow; i < endRow; i++) {
+        const line = buffer.getLine(i);
+        if (line) lines.push(line.translateToString(true));
+      }
+
+      return lines.join("\n");
+    }, [selectMode, xtermRef]);
+
+    return (
+      <div
+        ref={containerRef}
+        className="bg-background flex flex-col overflow-hidden"
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+        }}
+        {...dragHandlers}
+      >
+        {/* Search Bar */}
+        <SearchBar
+          ref={searchInputRef}
+          visible={searchVisible}
+          query={searchQuery}
+          onQueryChange={setSearchQuery}
+          onFindNext={findNext}
+          onFindPrevious={findPrevious}
+          onClose={closeSearch}
+        />
+
+        {/* Terminal container - NO padding! FitAddon reads offsetHeight which includes padding */}
+        <div
+          ref={terminalRef}
+          className={cn(
+            "terminal-container min-h-0 w-full flex-1 overflow-hidden",
+            selectMode && "ring-primary ring-2 ring-inset",
+            isDragging && "ring-primary ring-2 ring-inset"
+          )}
+          onClick={focus}
+          onTouchStart={selectMode ? (e) => e.stopPropagation() : undefined}
+          onTouchEnd={selectMode ? (e) => e.stopPropagation() : undefined}
+        />
+
+        {/* Select mode overlay - shows terminal text in a selectable format */}
+        {selectMode && (
+          <div
+            className="bg-background absolute inset-0 z-40 flex flex-col"
+            onTouchStart={(e) => e.stopPropagation()}
+            onTouchEnd={(e) => e.stopPropagation()}
+          >
+            <div className="bg-primary text-primary-foreground flex items-center justify-between px-3 py-2 text-xs font-medium">
+              <span>Select text below, then tap Copy</span>
+              <button
+                onClick={() => setSelectMode(false)}
+                className="bg-primary-foreground/20 rounded px-2 py-0.5 text-xs"
+              >
+                Done
+              </button>
+            </div>
+            <pre
+              className="flex-1 overflow-auto p-3 font-mono text-xs break-all whitespace-pre-wrap select-text"
+              style={{
+                userSelect: "text",
+                WebkitUserSelect: "text",
+              }}
+            >
+              {terminalText}
+            </pre>
+          </div>
+        )}
+
+        {/* Drag and drop overlay */}
+        {isDragging && (
+          <div className="bg-primary/10 pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
+            <div className="border-primary bg-background/90 rounded-lg border px-6 py-4 text-center shadow-lg">
+              <Upload className="text-primary mx-auto mb-2 h-8 w-8" />
+              <p className="text-sm font-medium">Drop file to upload</p>
+            </div>
+          </div>
+        )}
+
+        {/* Upload in progress overlay */}
+        {isUploading && (
+          <div className="bg-background/50 pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
+            <div className="bg-background rounded-lg border px-6 py-4 text-center shadow-lg">
+              <Loader2 className="text-primary mx-auto mb-2 h-6 w-6 animate-spin" />
+              <p className="text-sm">Uploading file...</p>
+            </div>
+          </div>
+        )}
+
+        {/* File picker button - desktop only, for agent terminals */}
+        {!isMobile && showImageButton && (
+          <button
+            onClick={() => setShowFilePicker(true)}
+            className="bg-secondary hover:bg-accent absolute top-3 right-3 z-40 flex h-9 w-9 items-center justify-center rounded-full shadow-lg transition-all"
+            title="Attach file"
+          >
+            <Paperclip className="h-4 w-4" />
+          </button>
+        )}
+
+        {/* Image picker modal */}
+        {showFilePicker && (
+          <FilePicker
+            initialPath="~"
+            onSelect={handleImageSelect}
+            onClose={() => setShowFilePicker(false)}
+          />
+        )}
+
+        {/* Scroll to bottom button */}
+        <ScrollToBottomButton visible={!isAtBottom} onClick={scrollToBottom} />
+
+        {/* Mobile: Toolbar with special keys (native keyboard handles text) */}
+        {isMobile && (
+          <TerminalToolbar
+            onKeyPress={sendInput}
+            onFilePicker={() => setShowFilePicker(true)}
+            onCopy={copySelection}
+            selectMode={selectMode}
+            onSelectModeChange={setSelectMode}
+            visible={true}
+          />
+        )}
+
+        {/* Connection status overlays */}
+        {connectionState === "connecting" && (
+          <div className="bg-background absolute inset-0 z-20 flex flex-col items-center justify-center gap-3">
+            <div className="bg-primary h-2 w-2 animate-pulse rounded-full" />
+            <span className="text-muted-foreground text-sm">Connecting...</span>
+          </div>
+        )}
+
+        {connectionState === "reconnecting" && (
+          <div className="absolute top-4 left-4 flex items-center gap-2 rounded bg-amber-500/20 px-2 py-1 text-xs text-amber-400">
+            <div className="h-2 w-2 animate-pulse rounded-full bg-amber-500" />
+            Reconnecting...
+          </div>
+        )}
+
+        {/* Disconnected overlay - shows tap to reconnect button */}
+        {connectionState === "disconnected" && (
+          <button
+            onClick={reconnect}
+            className="bg-background/80 active:bg-background/90 absolute inset-0 z-30 flex flex-col items-center justify-center gap-3 backdrop-blur-sm transition-all"
+          >
+            <WifiOff className="text-muted-foreground h-8 w-8" />
+            <span className="text-foreground text-sm font-medium">
+              Connection lost
+            </span>
+            <span className="bg-primary text-primary-foreground rounded-full px-4 py-2 text-sm font-medium">
+              Tap to reconnect
+            </span>
+          </button>
+        )}
+      </div>
+    );
+  }
+);

package/components/ThemeToggle.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { Moon, Sun, Monitor, Check, Palette } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  DARK_THEMES,
+  LIGHT_THEMES,
+  parseTheme,
+  buildTheme,
+  type DarkThemeVariant,
+  type LightThemeVariant,
+} from "@/lib/theme-config";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const { mode, variant } = parseTheme(theme || "system");
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-8 w-8">
+          <Palette className="h-4 w-4" />
+          <span className="sr-only">Change theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        {/* Light Themes */}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Sun className="mr-2 h-4 w-4" />
+            <span>Light</span>
+            {mode === "light" && (
+              <Check className="text-primary ml-auto h-4 w-4" />
+            )}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="max-h-[50vh] w-56 overflow-y-auto">
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Choose your light theme
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {LIGHT_THEMES.map((lightTheme) => {
+              const Icon = lightTheme.icon;
+              const isActive = mode === "light" && variant === lightTheme.id;
+              return (
+                <DropdownMenuItem
+                  key={lightTheme.id}
+                  onClick={() =>
+                    setTheme(
+                      buildTheme("light", lightTheme.id as LightThemeVariant)
+                    )
+                  }
+                  className="cursor-pointer"
+                >
+                  <Icon className="mr-2 h-4 w-4 flex-shrink-0" />
+                  <div className="flex flex-1 flex-col gap-0.5">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">
+                        {lightTheme.label}
+                      </span>
+                      {isActive && <Check className="text-primary h-4 w-4" />}
+                    </div>
+                    <span className="text-muted-foreground text-xs">
+                      {lightTheme.description}
+                    </span>
+                    {/* Color preview */}
+                    <div className="mt-1 flex gap-1">
+                      <div
+                        className="border-border/50 h-3 w-8 rounded-sm border"
+                        style={{
+                          backgroundColor: lightTheme.preview.background,
+                        }}
+                      />
+                      <div
+                        className="border-border/50 h-3 w-8 rounded-sm border"
+                        style={{ backgroundColor: lightTheme.preview.accent }}
+                      />
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
+        {/* Dark Themes */}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <Moon className="mr-2 h-4 w-4" />
+            <span>Dark</span>
+            {mode === "dark" && (
+              <Check className="text-primary ml-auto h-4 w-4" />
+            )}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="max-h-[50vh] w-56 overflow-y-auto">
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Choose your dark theme
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            {DARK_THEMES.map((darkTheme) => {
+              const Icon = darkTheme.icon;
+              const isActive = mode === "dark" && variant === darkTheme.id;
+              return (
+                <DropdownMenuItem
+                  key={darkTheme.id}
+                  onClick={() =>
+                    setTheme(
+                      buildTheme("dark", darkTheme.id as DarkThemeVariant)
+                    )
+                  }
+                  className="cursor-pointer"
+                >
+                  <Icon className="mr-2 h-4 w-4 flex-shrink-0" />
+                  <div className="flex flex-1 flex-col gap-0.5">
+                    <div className="flex items-center justify-between">
+                      <span className="text-sm font-medium">
+                        {darkTheme.label}
+                      </span>
+                      {isActive && <Check className="text-primary h-4 w-4" />}
+                    </div>
+                    <span className="text-muted-foreground text-xs">
+                      {darkTheme.description}
+                    </span>
+                    {/* Color preview */}
+                    <div className="mt-1 flex gap-1">
+                      <div
+                        className="border-border/50 h-3 w-8 rounded-sm border"
+                        style={{
+                          backgroundColor: darkTheme.preview.background,
+                        }}
+                      />
+                      <div
+                        className="border-border/50 h-3 w-8 rounded-sm border"
+                        style={{ backgroundColor: darkTheme.preview.accent }}
+                      />
+                    </div>
+                  </div>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
+
+        <DropdownMenuSeparator />
+
+        {/* System Theme */}
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          <Monitor className="mr-2 h-4 w-4" />
+          <span>System</span>
+          {mode === "system" && (
+            <Check className="text-primary ml-auto h-4 w-4" />
+          )}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/components/TmuxSessions.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { RefreshCw, Terminal, MonitorUp } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface TmuxSession {
+  name: string;
+  windows: number;
+  created: string;
+  attached: boolean;
+}
+
+interface TmuxSessionsProps {
+  onAttach: (sessionName: string) => void;
+}
+
+export function TmuxSessions({ onAttach }: TmuxSessionsProps) {
+  const [sessions, setSessions] = useState<TmuxSession[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchSessions = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/exec", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          command:
+            "tmux list-sessions -F '#{session_name}|#{session_windows}|#{session_created}|#{session_attached}' 2>/dev/null || echo ''",
+        }),
+      });
+      const data = await res.json();
+
+      if (data.success && data.output.trim()) {
+        const parsed = data.output
+          .trim()
+          .split("\n")
+          .filter((line: string) => line.includes("|"))
+          .map((line: string) => {
+            const [name, windows, created, attached] = line.split("|");
+            return {
+              name,
+              windows: parseInt(windows),
+              created: new Date(parseInt(created) * 1000).toLocaleString(),
+              attached: attached === "1",
+            };
+          });
+        setSessions(parsed);
+      } else {
+        setSessions([]);
+      }
+    } catch (err) {
+      console.error("Failed to fetch tmux sessions:", err);
+      setError("Failed to load");
+      setSessions([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchSessions();
+    // Refresh every 30 seconds
+    const interval = setInterval(fetchSessions, 30000);
+    return () => clearInterval(interval);
+  }, [fetchSessions]);
+
+  if (sessions.length === 0 && !loading && !error) {
+    return null; // Don't show section if no tmux sessions
+  }
+
+  return (
+    <div className="border-border border-b">
+      <div className="flex items-center justify-between px-4 py-2">
+        <div className="flex items-center gap-2">
+          <Terminal className="text-muted-foreground h-4 w-4" />
+          <span className="text-muted-foreground text-xs font-medium tracking-wider uppercase">
+            Tmux Sessions
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={fetchSessions}
+          disabled={loading}
+          className="h-6 w-6"
+        >
+          <RefreshCw className={cn("h-3 w-3", loading && "animate-spin")} />
+        </Button>
+      </div>
+
+      <div className="space-y-1 px-4 pb-3">
+        {error && <p className="text-destructive text-xs">{error}</p>}
+        {sessions.map((session) => (
+          <button
+            key={session.name}
+            onClick={() => onAttach(session.name)}
+            className={cn(
+              "flex w-full items-center justify-between rounded-md p-2 text-left transition-colors",
+              "hover:bg-primary/10 border",
+              session.attached
+                ? "border-primary/50 bg-primary/5"
+                : "border-transparent"
+            )}
+          >
+            <div className="flex min-w-0 items-center gap-2">
+              <MonitorUp className="text-primary h-4 w-4 flex-shrink-0" />
+              <span className="truncate text-sm font-medium">
+                {session.name}
+              </span>
+            </div>
+            <div className="flex flex-shrink-0 items-center gap-2">
+              <span className="text-muted-foreground text-xs">
+                {session.windows}w
+              </span>
+              {session.attached && (
+                <Badge variant="success" className="px-1 py-0 text-[10px]">
+                  attached
+                </Badge>
+              )}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/ToolCallDisplay.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Wrench, Check, X, Loader2 } from "lucide-react";
+
+interface ToolCallDisplayProps {
+  name: string;
+  input: Record<string, unknown>;
+  output?: string;
+  status: "pending" | "running" | "completed" | "error";
+}
+
+export function ToolCallDisplay({
+  name,
+  input,
+  output,
+  status,
+}: ToolCallDisplayProps) {
+  const StatusIcon = {
+    pending: Loader2,
+    running: Loader2,
+    completed: Check,
+    error: X,
+  }[status];
+
+  return (
+    <div className="border-border my-2 ml-11 overflow-hidden rounded-lg border">
+      {/* Header */}
+      <div
+        className={cn(
+          "flex items-center gap-2 px-3 py-2",
+          status === "error" ? "bg-destructive/10" : "bg-muted/50"
+        )}
+      >
+        <Wrench className="text-muted-foreground h-4 w-4" />
+        <span className="font-mono text-sm">{name}</span>
+        <StatusIcon
+          className={cn(
+            "ml-auto h-4 w-4",
+            status === "running" && "animate-spin text-yellow-400",
+            status === "pending" && "text-muted-foreground animate-spin",
+            status === "completed" && "text-primary",
+            status === "error" && "text-destructive"
+          )}
+        />
+      </div>
+
+      {/* Input */}
+      <details className="group">
+        <summary className="text-muted-foreground hover:text-foreground cursor-pointer px-3 py-1 text-xs">
+          Input
+        </summary>
+        <pre className="text-muted-foreground bg-background overflow-x-auto px-3 py-2 text-xs">
+          {JSON.stringify(input, null, 2)}
+        </pre>
+      </details>
+
+      {/* Output */}
+      {output && (
+        <details className="group" open={status === "completed"}>
+          <summary className="text-muted-foreground hover:text-foreground cursor-pointer px-3 py-1 text-xs">
+            Output
+          </summary>
+          <pre className="text-muted-foreground bg-background max-h-48 overflow-x-auto px-3 py-2 text-xs">
+            {output.length > 1000 ? output.slice(0, 1000) + "..." : output}
+          </pre>
+        </details>
+      )}
+    </div>
+  );
+}