@atercates/claude-deck 0.2.3 → 0.2.5

package/components/NewSessionDialog/AgentSelector.tsx

@@ -1,37 +0,0 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import type { AgentType } from "@/lib/providers";
-import { AGENT_OPTIONS } from "./NewSessionDialog.types";
-
-interface AgentSelectorProps {
-  value: AgentType;
-  onChange: (value: AgentType) => void;
-}
-
-export function AgentSelector({ value, onChange }: AgentSelectorProps) {
-  return (
-    <div className="space-y-2">
-      <label className="text-sm font-medium">Agent</label>
-      <Select value={value} onValueChange={(v) => onChange(v as AgentType)}>
-        <SelectTrigger>
-          <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-          {AGENT_OPTIONS.map((option) => (
-            <SelectItem key={option.value} value={option.value}>
-              <span className="font-medium">{option.label}</span>
-              <span className="text-muted-foreground ml-2 text-xs">
-                {option.description}
-              </span>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-}

package/components/Projects/ProjectCard.tsx

@@ -1,276 +0,0 @@
-"use client";
-
-import { useState, useRef, useEffect } from "react";
-import { cn } from "@/lib/utils";
-import {
-  ChevronRight,
-  ChevronDown,
-  MoreHorizontal,
-  Settings,
-  Plus,
-  Server,
-  Trash2,
-  Pencil,
-  FolderOpen,
-  Terminal,
-} from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import type { Project, DevServer } from "@/lib/db";
-
-interface ProjectCardProps {
-  project: Project;
-  sessionCount: number;
-  runningDevServers?: DevServer[];
-  onClick?: () => void;
-  onToggleExpanded?: (expanded: boolean) => void;
-  onEdit?: () => void;
-  onNewSession?: () => void;
-  onOpenTerminal?: () => void;
-  onStartDevServer?: () => void;
-  onOpenInEditor?: () => void;
-  onDelete?: () => void;
-  onRename?: (newName: string) => void;
-}
-
-export function ProjectCard({
-  project,
-  sessionCount,
-  runningDevServers = [],
-  onClick,
-  onToggleExpanded,
-  onEdit,
-  onNewSession,
-  onOpenTerminal,
-  onStartDevServer,
-  onOpenInEditor,
-  onDelete,
-  onRename,
-}: ProjectCardProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [editName, setEditName] = useState(project.name);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const justStartedEditingRef = useRef(false);
-
-  const hasRunningServers = runningDevServers.length > 0;
-  // Uncategorized can have New Session, Open Terminal, and Rename, but not Edit/Delete/DevServer
-  const hasActions = project.is_uncategorized
-    ? onNewSession || onOpenTerminal || onRename
-    : onEdit ||
-      onNewSession ||
-      onOpenTerminal ||
-      onStartDevServer ||
-      onDelete ||
-      onRename;
-
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      const input = inputRef.current;
-      // Mark that we just started editing to ignore immediate blur
-      justStartedEditingRef.current = true;
-      // Small timeout to ensure input is fully mounted
-      setTimeout(() => {
-        input.focus();
-        input.select();
-        // Clear the flag after focus is established
-        setTimeout(() => {
-          justStartedEditingRef.current = false;
-        }, 100);
-      }, 0);
-    }
-  }, [isEditing]);
-
-  const handleRename = () => {
-    // Ignore blur events that happen immediately after starting to edit
-    if (justStartedEditingRef.current) return;
-
-    if (editName.trim() && editName !== project.name && onRename) {
-      onRename(editName.trim());
-    }
-    setIsEditing(false);
-  };
-
-  const handleClick = (_e: React.MouseEvent) => {
-    if (isEditing) return;
-    onClick?.();
-    onToggleExpanded?.(!project.expanded);
-  };
-
-  const renderMenuItems = (isContextMenu: boolean) => {
-    const MenuItem = isContextMenu ? ContextMenuItem : DropdownMenuItem;
-    const MenuSeparator = isContextMenu
-      ? ContextMenuSeparator
-      : DropdownMenuSeparator;
-
-    return (
-      <>
-        {onNewSession && (
-          <MenuItem onClick={() => onNewSession()}>
-            <Plus className="mr-2 h-3 w-3" />
-            New session
-          </MenuItem>
-        )}
-        {onOpenTerminal && (
-          <MenuItem onClick={() => onOpenTerminal()}>
-            <Terminal className="mr-2 h-3 w-3" />
-            Open terminal
-          </MenuItem>
-        )}
-        {onEdit && (
-          <MenuItem onClick={() => onEdit()}>
-            <Settings className="mr-2 h-3 w-3" />
-            Project settings
-          </MenuItem>
-        )}
-        {onRename && (
-          <MenuItem onClick={() => setIsEditing(true)}>
-            <Pencil className="mr-2 h-3 w-3" />
-            Rename
-          </MenuItem>
-        )}
-        {onOpenInEditor && (
-          <MenuItem onClick={() => onOpenInEditor()}>
-            <FolderOpen className="mr-2 h-3 w-3" />
-            Open in editor
-          </MenuItem>
-        )}
-        {onStartDevServer && (
-          <>
-            <MenuSeparator />
-            <MenuItem onClick={() => onStartDevServer()}>
-              <Server className="mr-2 h-3 w-3" />
-              Start dev server
-            </MenuItem>
-          </>
-        )}
-        {onDelete && (
-          <>
-            <MenuSeparator />
-            <MenuItem
-              onClick={() => onDelete()}
-              className="text-red-500 focus:text-red-500"
-            >
-              <Trash2 className="mr-2 h-3 w-3" />
-              Delete project
-            </MenuItem>
-          </>
-        )}
-      </>
-    );
-  };
-
-  const cardContent = (
-    <div
-      onClick={handleClick}
-      className={cn(
-        "group flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5",
-        "min-h-[36px] md:min-h-[28px]",
-        "hover:bg-accent/50"
-      )}
-    >
-      {/* Expand/collapse toggle */}
-      <button className="flex-shrink-0 p-0.5">
-        {project.expanded ? (
-          <ChevronDown className="text-muted-foreground h-4 w-4" />
-        ) : (
-          <ChevronRight className="text-muted-foreground h-4 w-4" />
-        )}
-      </button>
-
-      {/* Project name */}
-      {isEditing ? (
-        <input
-          ref={inputRef}
-          type="text"
-          value={editName}
-          onChange={(e) => setEditName(e.target.value)}
-          onBlur={handleRename}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") handleRename();
-            if (e.key === "Escape") {
-              setEditName(project.name);
-              setIsEditing(false);
-            }
-          }}
-          onClick={(e) => e.stopPropagation()}
-          className="border-primary min-w-0 flex-1 border-b bg-transparent text-sm font-medium outline-none"
-        />
-      ) : (
-        <span className="min-w-0 flex-1 truncate text-sm font-medium">
-          {project.name}
-        </span>
-      )}
-
-      {/* Running servers indicator */}
-      {hasRunningServers && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <div className="flex flex-shrink-0 items-center gap-1 text-green-500">
-              <Server className="h-3 w-3" />
-              <span className="text-xs">{runningDevServers.length}</span>
-            </div>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>
-              {runningDevServers.length} dev server
-              {runningDevServers.length > 1 ? "s" : ""} running
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      )}
-
-      {/* Session count */}
-      <span className="text-muted-foreground flex-shrink-0 text-xs">
-        {sessionCount}
-      </span>
-
-      {/* Actions menu */}
-      {hasActions && (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              className="h-7 w-7 flex-shrink-0 opacity-100 md:h-6 md:w-6 md:opacity-0 md:group-hover:opacity-100"
-            >
-              <MoreHorizontal className="h-4 w-4" />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
-            {renderMenuItems(false)}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      )}
-    </div>
-  );
-
-  // Wrap with context menu if actions are available
-  if (hasActions) {
-    return (
-      <ContextMenu>
-        <ContextMenuTrigger asChild>{cardContent}</ContextMenuTrigger>
-        <ContextMenuContent>{renderMenuItems(true)}</ContextMenuContent>
-      </ContextMenu>
-    );
-  }
-
-  return cardContent;
-}

package/components/TmuxSessions.tsx

@@ -1,132 +0,0 @@
-"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/data/groups/index.ts

@@ -1 +0,0 @@
-export { useToggleGroup, useCreateGroup, useDeleteGroup } from "./mutations";

package/data/groups/mutations.ts

@@ -1,95 +0,0 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { sessionKeys } from "../sessions/keys";
-
-export function useToggleGroup() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      path,
-      expanded,
-    }: {
-      path: string;
-      expanded: boolean;
-    }) => {
-      const res = await fetch(`/api/groups/${encodeURIComponent(path)}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ expanded }),
-      });
-      if (!res.ok) throw new Error("Failed to toggle group");
-      return res.json();
-    },
-    onMutate: async ({ path, expanded }) => {
-      await queryClient.cancelQueries({ queryKey: sessionKeys.list() });
-      const previous = queryClient.getQueryData(sessionKeys.list());
-      queryClient.setQueryData(
-        sessionKeys.list(),
-        (
-          old:
-            | {
-                sessions: unknown[];
-                groups: Array<{ path: string; expanded: boolean }>;
-              }
-            | undefined
-        ) =>
-          old
-            ? {
-                ...old,
-                groups: old.groups.map((g) =>
-                  g.path === path ? { ...g, expanded } : g
-                ),
-              }
-            : old
-      );
-      return { previous };
-    },
-    onError: (_, __, context) => {
-      if (context?.previous) {
-        queryClient.setQueryData(sessionKeys.list(), context.previous);
-      }
-    },
-  });
-}
-
-export function useCreateGroup() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      name,
-      parentPath,
-    }: {
-      name: string;
-      parentPath?: string;
-    }) => {
-      const res = await fetch("/api/groups", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, parentPath }),
-      });
-      if (!res.ok) throw new Error("Failed to create group");
-      return res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
-    },
-  });
-}
-
-export function useDeleteGroup() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (path: string) => {
-      const res = await fetch(`/api/groups/${encodeURIComponent(path)}`, {
-        method: "DELETE",
-      });
-      if (!res.ok) throw new Error("Failed to delete group");
-      return res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
-    },
-  });
-}

package/hooks/useGroups.ts

@@ -1,37 +0,0 @@
-import { useCallback } from "react";
-import { useToggleGroup, useCreateGroup, useDeleteGroup } from "@/data/groups";
-
-export function useGroups() {
-  const toggleMutation = useToggleGroup();
-  const createMutation = useCreateGroup();
-  const deleteMutation = useDeleteGroup();
-
-  const toggleGroup = useCallback(
-    async (path: string, expanded: boolean) => {
-      await toggleMutation.mutateAsync({ path, expanded });
-    },
-    [toggleMutation]
-  );
-
-  const createGroup = useCallback(
-    async (name: string, parentPath?: string) => {
-      await createMutation.mutateAsync({ name, parentPath });
-    },
-    [createMutation]
-  );
-
-  const deleteGroup = useCallback(
-    async (path: string) => {
-      if (!confirm("Delete this group? Sessions will be moved to parent."))
-        return;
-      await deleteMutation.mutateAsync(path);
-    },
-    [deleteMutation]
-  );
-
-  return {
-    toggleGroup,
-    createGroup,
-    deleteGroup,
-  };
-}

package/hooks/useKeybarVisibility.ts

@@ -1,42 +0,0 @@
-"use client";
-
-import { useState, useCallback, useEffect } from "react";
-
-const STORAGE_KEY = "agentOS-keybar-visible";
-
-/**
- * Hook to manage mobile keybar visibility with localStorage persistence.
- * Default: hidden on mobile to maximize terminal space.
- */
-export function useKeybarVisibility() {
-  const [isVisible, setIsVisible] = useState(false);
-
-  // Load persisted state on mount
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === "true") {
-      setIsVisible(true);
-    }
-  }, []);
-
-  const toggle = useCallback(() => {
-    setIsVisible((prev) => {
-      const next = !prev;
-      localStorage.setItem(STORAGE_KEY, String(next));
-      return next;
-    });
-  }, []);
-
-  const show = useCallback(() => {
-    setIsVisible(true);
-    localStorage.setItem(STORAGE_KEY, "true");
-  }, []);
-
-  const hide = useCallback(() => {
-    setIsVisible(false);
-    localStorage.setItem(STORAGE_KEY, "false");
-  }, []);
-
-  return { isVisible, toggle, show, hide };
-}