@atercates/claude-deck 0.2.3 → 0.2.5

package/components/NewSessionDialog/hooks/useNewSessionForm.ts

@@ -1,16 +1,14 @@
 import { useState, useEffect, useCallback } from "react";
-import { getProviderDefinition, type AgentType } from "@/lib/providers";
+import type { AgentType } from "@/lib/providers";
 import type { ProjectWithDevServers } from "@/lib/projects";
 import { setPendingPrompt } from "@/stores/initialPrompt";
 import { useCreateSession } from "@/data/sessions";
 import {
   type GitInfo,
   SKIP_PERMISSIONS_KEY,
-  AGENT_TYPE_KEY,
   RECENT_DIRS_KEY,
   USE_TMUX_KEY,
   MAX_RECENT_DIRS,
-  AGENT_OPTIONS,
   generateFeatureName,
 } from "../NewSessionDialog.types";
 
@@ -42,7 +40,6 @@ export function useNewSessionForm({
   const [name, setName] = useState("");
   const [workingDirectory, setWorkingDirectory] = useState("~");
   const [projectId, setProjectId] = useState<string | null>(null);
-  const [agentType, setAgentType] = useState<AgentType>("claude");
   const [skipPermissions, setSkipPermissions] = useState(false);
   const [useTmux, setUseTmux] = useState(true);
   const [initialPrompt, setInitialPrompt] = useState("");
@@ -120,13 +117,6 @@ export function useNewSessionForm({
     if (savedSkipPerms !== null) {
       setSkipPermissions(savedSkipPerms === "true");
     }
-    const savedAgentType = localStorage.getItem(AGENT_TYPE_KEY);
-    if (
-      savedAgentType &&
-      AGENT_OPTIONS.some((opt) => opt.value === savedAgentType)
-    ) {
-      setAgentType(savedAgentType as AgentType);
-    }
     const savedUseTmux = localStorage.getItem(USE_TMUX_KEY);
     if (savedUseTmux !== null) {
       setUseTmux(savedUseTmux === "true");
@@ -150,7 +140,6 @@ export function useNewSessionForm({
         const project = projects.find((p) => p.id === selectedProjectId);
         if (project && !project.is_uncategorized) {
           setWorkingDirectory(project.working_directory);
-          setAgentType(project.agent_type);
         }
       } else {
         // Otherwise, select first non-uncategorized project
@@ -158,25 +147,11 @@ export function useNewSessionForm({
         if (firstProject) {
           setProjectId(firstProject.id);
           setWorkingDirectory(firstProject.working_directory);
-          setAgentType(firstProject.agent_type);
         }
       }
     }
   }, [open, selectedProjectId, projects]);
 
-  useEffect(() => {
-    if (!skipPermissions) {
-      return;
-    }
-
-    if (getProviderDefinition(agentType).autoApproveFlag) {
-      return;
-    }
-
-    setSkipPermissions(false);
-    localStorage.setItem(SKIP_PERMISSIONS_KEY, "false");
-  }, [agentType, skipPermissions]);
-
   // Save directory to recent list
   const addRecentDirectory = useCallback((dir: string) => {
     if (!dir || dir === "~") return;
@@ -196,7 +171,6 @@ export function useNewSessionForm({
         const project = projects.find((p) => p.id === newProjectId);
         if (project && !project.is_uncategorized) {
           setWorkingDirectory(project.working_directory);
-          setAgentType(project.agent_type);
         }
       }
     },
@@ -208,11 +182,6 @@ export function useNewSessionForm({
     localStorage.setItem(SKIP_PERMISSIONS_KEY, String(checked));
   };
 
-  const handleAgentTypeChange = (value: AgentType) => {
-    setAgentType(value);
-    localStorage.setItem(AGENT_TYPE_KEY, value);
-  };
-
   const handleUseTmuxChange = (checked: boolean) => {
     setUseTmux(checked);
     localStorage.setItem(USE_TMUX_KEY, String(checked));
@@ -248,7 +217,7 @@ export function useNewSessionForm({
         name: name.trim() || undefined,
         workingDirectory,
         projectId,
-        agentType,
+        agentType: "claude" as AgentType,
         useWorktree,
         featureName: useWorktree ? featureName.trim() : null,
         baseBranch: useWorktree ? baseBranch : null,
@@ -291,7 +260,7 @@ export function useNewSessionForm({
       const newId = await onCreateProject(
         newProjectName.trim(),
         workingDirectory,
-        agentType
+        "claude"
       );
       if (newId) {
         setProjectId(newId);
@@ -328,7 +297,6 @@ export function useNewSessionForm({
     workingDirectory,
     setWorkingDirectory,
     projectId,
-    agentType,
     skipPermissions,
     useTmux,
     initialPrompt,
@@ -361,7 +329,6 @@ export function useNewSessionForm({
     // Handlers
     handleProjectChange,
     handleSkipPermissionsChange,
-    handleAgentTypeChange,
     handleUseTmuxChange,
     handleSubmit,
     handleCreateProject,

package/components/NewSessionDialog/index.tsx

@@ -10,7 +10,6 @@ import {
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useNewSessionForm } from "./hooks/useNewSessionForm";
-import { AgentSelector } from "./AgentSelector";
 import { CreatingOverlay } from "./CreatingOverlay";
 import type { NewSessionDialogProps } from "./NewSessionDialog.types";
 
@@ -56,11 +55,6 @@ export function NewSessionDialog({
             <DialogTitle>New Session</DialogTitle>
           </DialogHeader>
           <form onSubmit={form.handleSubmit} className="space-y-4">
-            <AgentSelector
-              value={form.agentType}
-              onChange={form.handleAgentTypeChange}
-            />
-
             <div className="space-y-2">
               <label className="text-sm font-medium">
                 Name{" "}
@@ -100,7 +94,6 @@ export function NewSessionDialog({
           </form>
         </DialogContent>
       </Dialog>
-
     </>
   );
 }

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/Projects/index.ts

@@ -1,3 +1,2 @@
-export { ProjectCard } from "./ProjectCard";
 export { NewProjectDialog } from "./NewProjectDialog";
 export { ProjectSettingsDialog } from "./ProjectSettingsDialog";

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" />;
+}

package/components/SessionList/hooks/useSessionListMutations.ts

@@ -13,7 +13,6 @@ import {
   useDeleteProject,
   useRenameProject,
 } from "@/data/projects";
-import { useToggleGroup, useCreateGroup, useDeleteGroup } from "@/data/groups";
 import {
   useStopDevServer,
   useRestartDevServer,
@@ -42,11 +41,6 @@ export function useSessionListMutations({
   const deleteProjectMutation = useDeleteProject();
   const renameProjectMutation = useRenameProject();
 
-  // Group mutations
-  const toggleGroupMutation = useToggleGroup();
-  const createGroupMutation = useCreateGroup();
-  const deleteGroupMutation = useDeleteGroup();
-
   // Dev server mutations
   const stopDevServerMutation = useStopDevServer();
   const restartDevServerMutation = useRestartDevServer();
@@ -124,30 +118,6 @@ export function useSessionListMutations({
     [renameProjectMutation]
   );
 
-  // Group handlers
-  const handleToggleGroup = useCallback(
-    async (path: string, expanded: boolean) => {
-      await toggleGroupMutation.mutateAsync({ path, expanded });
-    },
-    [toggleGroupMutation]
-  );
-
-  const handleCreateGroup = useCallback(
-    async (name: string, parentPath?: string) => {
-      await createGroupMutation.mutateAsync({ name, parentPath });
-    },
-    [createGroupMutation]
-  );
-
-  const handleDeleteGroup = useCallback(
-    async (path: string) => {
-      if (!confirm("Delete this group? Sessions will be moved to parent."))
-        return;
-      await deleteGroupMutation.mutateAsync(path);
-    },
-    [deleteGroupMutation]
-  );
-
   // Dev server handlers
   const handleStopDevServer = useCallback(
     async (serverId: string) => {
@@ -252,11 +222,6 @@ export function useSessionListMutations({
     handleDeleteProject,
     handleRenameProject,
 
-    // Group handlers
-    handleToggleGroup,
-    handleCreateGroup,
-    handleDeleteGroup,
-
     // Dev server handlers
     handleStopDevServer,
     handleRestartDevServer,

package/components/SessionList/index.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useCallback } from "react";
 import { ClaudeProjectsSection } from "@/components/ClaudeProjects";
+import { ActiveSessionsSection } from "./ActiveSessionsSection";
 import { NewProjectDialog } from "@/components/Projects";
 import { FolderPicker } from "@/components/FolderPicker";
 import { SelectionToolbar } from "./SelectionToolbar";
@@ -24,7 +25,7 @@ export type { SessionListProps } from "./SessionList.types";
 
 export function SessionList({
   activeSessionId: _activeSessionId,
-  sessionStatuses: _sessionStatuses,
+  sessionStatuses,
   onSelect,
   onOpenInTab: _onOpenInTab,
   onNewSessionInProject: _onNewSessionInProject,
@@ -137,6 +138,13 @@ export function SessionList({
             </div>
           )}
 
+          {!isInitialLoading && !hasError && sessionStatuses && (
+            <ActiveSessionsSection
+              sessionStatuses={sessionStatuses}
+              onSelect={onSelect}
+            />
+          )}
+
           {!isInitialLoading && !hasError && (
             <ClaudeProjectsSection
               onSelectSession={(claudeSessionId, cwd, summary, projectName) => {