@atercates/claude-deck 0.2.1

package/components/Pane/DesktopTabBar.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  SplitSquareHorizontal,
+  SplitSquareVertical,
+  X,
+  Unplug,
+  Plug,
+  Plus,
+  FolderOpen,
+  GitBranch,
+  Users,
+  Home,
+} from "lucide-react";
+import { OpenInVSCode } from "./OpenInVSCode";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { Session } from "@/lib/db";
+
+type ViewMode = "terminal" | "files" | "git" | "workers";
+
+interface Tab {
+  id: string;
+  sessionId: string | null;
+  attachedTmux: string | null;
+}
+
+interface DesktopTabBarProps {
+  tabs: Tab[];
+  activeTabId: string;
+  session: Session | null | undefined;
+  sessions: Session[];
+  viewMode: ViewMode;
+  isFocused: boolean;
+  isConductor: boolean;
+  workerCount: number;
+  canSplit: boolean;
+  canClose: boolean;
+  hasAttachedTmux: boolean;
+  gitDrawerOpen: boolean;
+  shellDrawerOpen: boolean;
+  onTabSwitch: (tabId: string) => void;
+  onTabClose: (tabId: string) => void;
+  onTabAdd: () => void;
+  onViewModeChange: (mode: ViewMode) => void;
+  onGitDrawerToggle: () => void;
+  onShellDrawerToggle: () => void;
+  onSplitHorizontal: () => void;
+  onSplitVertical: () => void;
+  onClose: () => void;
+  onDetach: () => void;
+  onReattach: () => void;
+  hasDetachedTmux: boolean;
+}
+
+export function DesktopTabBar({
+  tabs,
+  activeTabId,
+  session,
+  sessions,
+  viewMode,
+  isFocused,
+  isConductor,
+  workerCount,
+  canSplit,
+  canClose,
+  hasAttachedTmux,
+  gitDrawerOpen,
+  shellDrawerOpen,
+  onTabSwitch,
+  onTabClose,
+  onTabAdd,
+  onViewModeChange,
+  onGitDrawerToggle,
+  onShellDrawerToggle,
+  onSplitHorizontal,
+  onSplitVertical,
+  onClose,
+  onDetach,
+  onReattach,
+  hasDetachedTmux,
+}: DesktopTabBarProps) {
+  const getTabName = (tab: Tab) => {
+    if (tab.sessionId) {
+      const s = sessions.find((sess) => sess.id === tab.sessionId);
+      return s?.name || tab.attachedTmux || "Session";
+    }
+    if (tab.attachedTmux) return tab.attachedTmux;
+    return "New Tab";
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1 overflow-x-auto px-1 pt-1 transition-colors",
+        isFocused ? "bg-muted" : "bg-muted/50"
+      )}
+    >
+      {/* 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>
+        ))}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onTabAdd();
+              }}
+              className="mx-1 h-6 w-6"
+            >
+              <Plus className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>New tab</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* View Toggle */}
+      {session?.working_directory && (
+        <div className="bg-accent/50 mx-2 flex items-center rounded-md p-0.5">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewModeChange("terminal");
+                }}
+                className={cn(
+                  "rounded px-2 py-1 transition-colors",
+                  viewMode === "terminal"
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <Home className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Terminal</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onViewModeChange("files");
+                }}
+                className={cn(
+                  "rounded px-2 py-1 transition-colors",
+                  viewMode === "files"
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <FolderOpen className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Files</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onGitDrawerToggle();
+                }}
+                className={cn(
+                  "rounded px-2 py-1 transition-colors",
+                  gitDrawerOpen
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                <GitBranch className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Git</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onShellDrawerToggle();
+                }}
+                className={cn(
+                  "rounded px-2 py-1 font-mono text-xs transition-colors",
+                  shellDrawerOpen
+                    ? "bg-secondary text-foreground"
+                    : "text-muted-foreground hover:text-foreground"
+                )}
+              >
+                {">_"}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Shell</TooltipContent>
+          </Tooltip>
+          {isConductor && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onViewModeChange("workers");
+                  }}
+                  className={cn(
+                    "relative rounded px-2 py-1 transition-colors",
+                    viewMode === "workers"
+                      ? "bg-secondary text-foreground"
+                      : "text-muted-foreground hover:text-foreground"
+                  )}
+                >
+                  <Users className="h-3.5 w-3.5" />
+                  <span className="bg-primary text-primary-foreground absolute -top-1 -right-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full text-[9px] font-medium">
+                    {workerCount}
+                  </span>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Workers</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      )}
+
+      {/* Pane Controls */}
+      <div className="ml-auto flex items-center gap-0.5 px-2">
+        {session?.working_directory && session.working_directory !== "~" && (
+          <OpenInVSCode workingDirectory={session.working_directory} />
+        )}
+        {hasAttachedTmux && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDetach();
+                }}
+                className="h-6 w-6"
+              >
+                <Unplug className="h-3 w-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Detach from tmux</TooltipContent>
+          </Tooltip>
+        )}
+        {hasDetachedTmux && !hasAttachedTmux && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onReattach();
+                }}
+                className="h-6 w-6 text-yellow-500"
+              >
+                <Plug className="h-3 w-3" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Re-attach to tmux</TooltipContent>
+          </Tooltip>
+        )}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSplitHorizontal();
+              }}
+              disabled={!canSplit}
+              className="h-6 w-6"
+            >
+              <SplitSquareHorizontal className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Split horizontal</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onSplitVertical();
+              }}
+              disabled={!canSplit}
+              className="h-6 w-6"
+            >
+              <SplitSquareVertical className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Split vertical</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                onClose();
+              }}
+              disabled={!canClose}
+              className="h-6 w-6"
+            >
+              <X className="h-3 w-3" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Close pane</TooltipContent>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}

package/components/Pane/MobileTabBar.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Menu,
+  Terminal as TerminalIcon,
+  FolderOpen,
+  GitBranch,
+  Users,
+  ChevronDown,
+  Circle,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import type { Session } from "@/lib/db";
+import { useClaudeSessionsQuery } from "@/data/claude";
+import type { LucideIcon } from "lucide-react";
+
+type ViewMode = "terminal" | "files" | "git" | "workers";
+
+interface ViewModeButtonProps {
+  mode: ViewMode;
+  currentMode: ViewMode;
+  icon: LucideIcon;
+  onClick: (mode: ViewMode) => void;
+  badge?: React.ReactNode;
+}
+
+function ViewModeButton({
+  mode,
+  currentMode,
+  icon: Icon,
+  onClick,
+  badge,
+}: ViewModeButtonProps) {
+  return (
+    <button
+      onClick={(e) => {
+        e.stopPropagation();
+        onClick(mode);
+      }}
+      className={cn(
+        "rounded p-1.5 transition-colors",
+        badge && "flex items-center gap-0.5",
+        currentMode === mode
+          ? "bg-secondary text-foreground"
+          : "text-muted-foreground"
+      )}
+    >
+      <Icon className="h-4 w-4" />
+      {badge}
+    </button>
+  );
+}
+
+interface MobileTabBarProps {
+  session: Session | null | undefined;
+  claudeProjectName: string | null;
+  viewMode: ViewMode;
+  isConductor: boolean;
+  workerCount: number;
+  onMenuClick?: () => void;
+  onViewModeChange: (mode: ViewMode) => void;
+  onResumeClaudeSession?: (
+    sessionId: string,
+    cwd: string,
+    summary: string,
+    projectName: string
+  ) => void;
+}
+
+export function MobileTabBar({
+  session,
+  claudeProjectName,
+  viewMode,
+  isConductor,
+  workerCount,
+  onMenuClick,
+  onViewModeChange,
+  onResumeClaudeSession,
+}: MobileTabBarProps) {
+  const { data: claudeSessions } = useClaudeSessionsQuery(
+    claudeProjectName || ""
+  );
+  const sessionList = claudeProjectName ? claudeSessions?.sessions || [] : [];
+
+  return (
+    <div
+      className="bg-muted flex items-center gap-2 px-2 py-1.5 pt-[max(0.375rem,env(safe-area-inset-top))]"
+      onClick={(e) => e.stopPropagation()}
+      onTouchStart={(e) => e.stopPropagation()}
+      onTouchEnd={(e) => e.stopPropagation()}
+    >
+      {/* Menu button */}
+      {onMenuClick && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onMenuClick();
+          }}
+          className="h-8 w-8 shrink-0"
+        >
+          <Menu className="h-4 w-4" />
+        </Button>
+      )}
+
+      {/* Session selector */}
+      <div className="flex min-w-0 flex-1 items-center">
+        <DropdownMenu modal={false}>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="hover:bg-accent active:bg-accent flex min-w-0 flex-1 items-center justify-center gap-1 rounded-md px-2 py-1"
+            >
+              <span className="truncate text-sm font-medium">
+                {session?.name || "No session"}
+              </span>
+              {sessionList.length > 0 && (
+                <ChevronDown className="text-muted-foreground h-3 w-3 shrink-0" />
+              )}
+            </button>
+          </DropdownMenuTrigger>
+          {sessionList.length > 0 && (
+            <DropdownMenuContent
+              align="center"
+              className="max-h-[280px] w-[240px] overflow-y-auto p-1"
+            >
+              {sessionList.map((s) => {
+                const isActive = s.sessionId === session?.id;
+                return (
+                  <DropdownMenuItem
+                    key={s.sessionId}
+                    onSelect={() => {
+                      if (s.cwd && claudeProjectName) {
+                        onResumeClaudeSession?.(
+                          s.sessionId,
+                          s.cwd,
+                          s.summary,
+                          claudeProjectName
+                        );
+                      }
+                    }}
+                    className={cn(
+                      "gap-2 rounded px-2 py-1.5",
+                      isActive && "bg-accent"
+                    )}
+                  >
+                    <Circle
+                      className={cn(
+                        "h-1.5 w-1.5 shrink-0",
+                        isActive
+                          ? "fill-primary text-primary"
+                          : "text-muted-foreground/50"
+                      )}
+                    />
+                    <span className="truncate text-xs">{s.summary}</span>
+                  </DropdownMenuItem>
+                );
+              })}
+            </DropdownMenuContent>
+          )}
+        </DropdownMenu>
+      </div>
+
+      {/* View mode toggle */}
+      {session?.working_directory && (
+        <div className="bg-accent/50 flex shrink-0 items-center rounded-md p-0.5">
+          <ViewModeButton
+            mode="terminal"
+            currentMode={viewMode}
+            icon={TerminalIcon}
+            onClick={onViewModeChange}
+          />
+          <ViewModeButton
+            mode="files"
+            currentMode={viewMode}
+            icon={FolderOpen}
+            onClick={onViewModeChange}
+          />
+          <ViewModeButton
+            mode="git"
+            currentMode={viewMode}
+            icon={GitBranch}
+            onClick={onViewModeChange}
+          />
+          {isConductor && (
+            <ViewModeButton
+              mode="workers"
+              currentMode={viewMode}
+              icon={Users}
+              onClick={onViewModeChange}
+              badge={
+                <span className="bg-primary/20 text-primary rounded px-1 text-[10px]">
+                  {workerCount}
+                </span>
+              }
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/Pane/OpenInVSCode.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface OpenInVSCodeProps {
+  workingDirectory: string;
+  className?: string;
+}
+
+function VSCodeIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M17.583 2.29a1.5 1.5 0 0 1 1.167.17l3.5 2.15A1.5 1.5 0 0 1 23 5.86v12.28a1.5 1.5 0 0 1-.75 1.3l-3.5 2.15a1.5 1.5 0 0 1-1.727-.13L9 14.54l-3.55 2.69a1 1 0 0 1-1.28-.05L2.42 15.53a1 1 0 0 1 0-1.46L5.7 12 2.42 9.93a1 1 0 0 1 0-1.46l1.75-1.65a1 1 0 0 1 1.28-.05L9 9.46l8.023-6.92a1.5 1.5 0 0 1 .56-.25ZM17.5 8.39l-5 4.11 5 4.11V8.39Z" />
+    </svg>
+  );
+}
+
+export function OpenInVSCode({
+  workingDirectory,
+  className,
+}: OpenInVSCodeProps) {
+  const { data: systemInfo } = useQuery({
+    queryKey: ["system-info"],
+    queryFn: () => fetch("/api/system").then((r) => r.json()),
+    staleTime: Infinity,
+  });
+
+  const handleOpen = useCallback(() => {
+    const host = window.location.hostname;
+    const isLocal = host === "localhost" || host === "127.0.0.1";
+
+    if (isLocal) {
+      window.open(`vscode://file${workingDirectory}`, "_self");
+    } else {
+      const user = systemInfo?.user || "root";
+      window.open(
+        `vscode://vscode-remote/ssh-remote+${user}@${host}${workingDirectory}`,
+        "_self"
+      );
+    }
+  }, [workingDirectory, systemInfo]);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleOpen();
+          }}
+          className={cn("h-6 w-6", className)}
+        >
+          <VSCodeIcon className="h-3 w-3" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>Open in VS Code</TooltipContent>
+    </Tooltip>
+  );
+}

package/components/Pane/PaneSkeletons.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { ShimmeringLoader } from "@/components/ui/skeleton";
+import { Terminal, FolderOpen, GitBranch } from "lucide-react";
+
+export function TerminalSkeleton() {
+  return (
+    <div className="bg-background flex h-full w-full flex-col items-center justify-center gap-3">
+      <Terminal className="text-muted-foreground/50 h-8 w-8 animate-pulse" />
+      <div className="flex items-center gap-2">
+        <div className="bg-primary/50 h-2 w-2 animate-pulse rounded-full" />
+        <span className="text-muted-foreground text-sm">Connecting...</span>
+      </div>
+    </div>
+  );
+}
+
+export function FileExplorerSkeleton() {
+  return (
+    <div className="bg-background h-full w-full p-4">
+      <div className="mb-4 flex items-center gap-2">
+        <FolderOpen className="text-muted-foreground/50 h-4 w-4" />
+        <ShimmeringLoader className="h-4 w-32" />
+      </div>
+      <div className="space-y-2 pl-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <ShimmeringLoader className="h-4 w-4" delayIndex={i} />
+            <ShimmeringLoader className="h-4 w-24" delayIndex={i} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function GitPanelSkeleton() {
+  return (
+    <div className="bg-background h-full w-full p-4">
+      <div className="mb-4 flex items-center gap-2">
+        <GitBranch className="text-muted-foreground/50 h-4 w-4" />
+        <ShimmeringLoader className="h-4 w-24" />
+      </div>
+      <div className="space-y-3">
+        <ShimmeringLoader className="h-8 w-full rounded" />
+        <div className="space-y-2">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <ShimmeringLoader className="h-4 w-4" delayIndex={i} />
+              <ShimmeringLoader className="h-4 flex-1" delayIndex={i} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}