@atercates/claude-deck 0.2.3 → 0.2.5

package/components/SessionStatusBar.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
+import { cn } from "@/lib/utils";
+import type { SessionStatus } from "@/components/views/types";
+import { Activity, AlertCircle, Moon, ChevronUp } from "lucide-react";
+
+interface SessionStatusBarProps {
+  sessionStatuses: Record<string, SessionStatus>;
+  onSelectSession: (sessionId: string) => void;
+}
+
+type StatusFilter = "running" | "waiting" | "idle" | null;
+
+export function SessionStatusBar({
+  sessionStatuses,
+  onSelectSession,
+}: SessionStatusBarProps) {
+  const [expandedFilter, setExpandedFilter] = useState<StatusFilter>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const counts = useMemo(() => {
+    const values = Object.values(sessionStatuses);
+    return {
+      running: values.filter((s) => s.status === "running").length,
+      waiting: values.filter((s) => s.status === "waiting").length,
+      idle: values.filter((s) => s.status === "idle").length,
+    };
+  }, [sessionStatuses]);
+
+  const filteredSessions = useMemo(() => {
+    if (!expandedFilter) return [];
+    return Object.entries(sessionStatuses)
+      .filter(([, s]) => s.status === expandedFilter)
+      .map(([id, s]) => ({ id, ...s }));
+  }, [sessionStatuses, expandedFilter]);
+
+  const handleToggle = useCallback((filter: StatusFilter) => {
+    setExpandedFilter((prev) => (prev === filter ? null : filter));
+  }, []);
+
+  // Close panel on outside click
+  useEffect(() => {
+    if (!expandedFilter) return;
+    const handler = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        setExpandedFilter(null);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [expandedFilter]);
+
+  const total = counts.running + counts.waiting + counts.idle;
+  if (total === 0) return null;
+
+  return (
+    <div ref={panelRef} className="relative flex-shrink-0">
+      {/* Expanded panel */}
+      {expandedFilter && filteredSessions.length > 0 && (
+        <div className="border-border bg-background absolute right-0 bottom-full left-0 z-10 max-h-48 overflow-y-auto border-t shadow-lg">
+          {filteredSessions.map((session) => (
+            <button
+              key={session.id}
+              onClick={() => {
+                onSelectSession(session.id);
+                setExpandedFilter(null);
+              }}
+              className="hover:bg-accent flex w-full items-center gap-3 px-4 py-2 text-left text-sm transition-colors"
+            >
+              <StatusDot status={session.status} />
+              <span className="min-w-0 flex-1 truncate font-medium">
+                {session.sessionName}
+              </span>
+              {session.lastLine && (
+                <span className="text-muted-foreground max-w-[40%] truncate font-mono text-xs">
+                  {session.lastLine}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Status bar */}
+      <div
+        className={cn(
+          "border-border flex h-8 items-center gap-4 border-t px-4 text-xs",
+          counts.waiting > 0 && "bg-amber-500/5"
+        )}
+      >
+        {counts.running > 0 && (
+          <button
+            onClick={() => handleToggle("running")}
+            className={cn(
+              "flex items-center gap-1.5 transition-colors",
+              expandedFilter === "running"
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            <Activity className="h-3 w-3 text-green-500" />
+            <span>{counts.running} running</span>
+            {expandedFilter === "running" && <ChevronUp className="h-3 w-3" />}
+          </button>
+        )}
+
+        {counts.waiting > 0 && (
+          <button
+            onClick={() => handleToggle("waiting")}
+            className={cn(
+              "flex items-center gap-1.5 transition-colors",
+              expandedFilter === "waiting"
+                ? "text-foreground"
+                : "text-amber-500 hover:text-amber-400"
+            )}
+          >
+            <AlertCircle className="h-3 w-3 animate-pulse" />
+            <span>{counts.waiting} waiting</span>
+            {expandedFilter === "waiting" && <ChevronUp className="h-3 w-3" />}
+          </button>
+        )}
+
+        {counts.idle > 0 && (
+          <button
+            onClick={() => handleToggle("idle")}
+            className={cn(
+              "flex items-center gap-1.5 transition-colors",
+              expandedFilter === "idle"
+                ? "text-foreground"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            <Moon className="h-3 w-3" />
+            <span>{counts.idle} idle</span>
+            {expandedFilter === "idle" && <ChevronUp className="h-3 w-3" />}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function StatusDot({ status }: { status: string }) {
+  return (
+    <span
+      className={cn(
+        "inline-block h-2 w-2 flex-shrink-0 rounded-full",
+        status === "running" && "animate-pulse bg-green-500",
+        status === "waiting" && "animate-pulse bg-amber-500",
+        status === "idle" && "bg-gray-400"
+      )}
+    />
+  );
+}

package/components/WaitingBanner.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useMemo, useCallback, useState } from "react";
+import { cn } from "@/lib/utils";
+import { AlertCircle, ArrowRight, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import type { SessionStatus } from "@/components/views/types";
+
+interface WaitingBannerProps {
+  sessionStatuses: Record<string, SessionStatus>;
+  onSelectSession: (sessionId: string) => void;
+}
+
+const MAX_VISIBLE = 3;
+
+export function WaitingBanner({
+  sessionStatuses,
+  onSelectSession,
+}: WaitingBannerProps) {
+  const [dismissed, setDismissed] = useState<Set<string>>(new Set());
+
+  const waitingSessions = useMemo(() => {
+    const sessions = Object.entries(sessionStatuses)
+      .filter(([, s]) => s.status === "waiting")
+      .map(([id, s]) => ({ id, ...s }));
+
+    // Clear dismissed entries that are no longer waiting
+    const waitingIds = new Set(sessions.map((s) => s.id));
+    setDismissed((prev) => {
+      const next = new Set([...prev].filter((id) => waitingIds.has(id)));
+      return next.size === prev.size ? prev : next;
+    });
+
+    return sessions;
+  }, [sessionStatuses]);
+
+  const visibleSessions = useMemo(
+    () => waitingSessions.filter((s) => !dismissed.has(s.id)),
+    [waitingSessions, dismissed]
+  );
+
+  const handleDismiss = useCallback((sessionId: string) => {
+    setDismissed((prev) => new Set([...prev, sessionId]));
+  }, []);
+
+  const handleDismissAll = useCallback(() => {
+    setDismissed(new Set(waitingSessions.map((s) => s.id)));
+  }, [waitingSessions]);
+
+  if (visibleSessions.length === 0) return null;
+
+  const visible = visibleSessions.slice(0, MAX_VISIBLE);
+  const overflow = visibleSessions.length - MAX_VISIBLE;
+
+  return (
+    <div className="flex-shrink-0 border-b border-amber-500/30 bg-amber-500/5">
+      <div className="space-y-0">
+        {visible.map((session) => (
+          <div
+            key={session.id}
+            className={cn(
+              "flex items-center gap-3 px-4 py-2",
+              "border-l-2 border-amber-500"
+            )}
+          >
+            <AlertCircle className="h-4 w-4 flex-shrink-0 animate-pulse text-amber-500" />
+            <div className="min-w-0 flex-1">
+              <span className="text-sm font-medium">{session.sessionName}</span>
+              {session.waitingContext ? (
+                <pre className="text-muted-foreground mt-0.5 max-w-full truncate font-mono text-xs">
+                  {session.waitingContext.split("\n").pop()}
+                </pre>
+              ) : session.lastLine ? (
+                <pre className="text-muted-foreground mt-0.5 max-w-full truncate font-mono text-xs">
+                  {session.lastLine}
+                </pre>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1 text-amber-600 hover:text-amber-500"
+                onClick={() => onSelectSession(session.id)}
+              >
+                Switch
+                <ArrowRight className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                className="text-muted-foreground h-6 w-6"
+                onClick={() => handleDismiss(session.id)}
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </div>
+          </div>
+        ))}
+
+        {overflow > 0 && (
+          <div className="text-muted-foreground px-4 py-1 text-xs">
+            +{overflow} more session{overflow > 1 ? "s" : ""} waiting
+          </div>
+        )}
+
+        {visibleSessions.length > 1 && (
+          <div className="flex justify-end px-4 py-1">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-muted-foreground h-6 text-xs"
+              onClick={handleDismissAll}
+            >
+              Dismiss all
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/views/DesktopView.tsx

@@ -15,6 +15,8 @@ import {
   Command,
 } from "lucide-react";
 import { PaneLayout } from "@/components/PaneLayout";
+import { SessionStatusBar } from "@/components/SessionStatusBar";
+import { WaitingBanner } from "@/components/WaitingBanner";
 import {
   Tooltip,
   TooltipContent,
@@ -59,6 +61,16 @@ export function DesktopView({
   resumeClaudeSession,
   renderPane,
 }: ViewProps) {
+  const selectSessionById = (id: string) => {
+    const session = sessions.find((s) => s.id === id);
+    if (session) {
+      attachToSession(session);
+      return;
+    }
+    const status = sessionStatuses[id];
+    resumeClaudeSession(id, status?.cwd || "~");
+  };
+
   return (
     <div className="bg-background flex h-screen overflow-hidden">
       {/* Desktop Sidebar */}
@@ -71,10 +83,7 @@ export function DesktopView({
             <SessionList
               activeSessionId={focusedActiveTab?.sessionId || undefined}
               sessionStatuses={sessionStatuses}
-              onSelect={(id) => {
-                const session = sessions.find((s) => s.id === id);
-                if (session) attachToSession(session);
-              }}
+              onSelect={selectSessionById}
               onOpenInTab={(id) => {
                 const session = sessions.find((s) => s.id === id);
                 if (session) openSessionInNewTab(session);
@@ -191,10 +200,7 @@ export function DesktopView({
                 .map((s) => ({ id: s.id, name: s.name }))}
               onUpdateSettings={updateSettings}
               onRequestPermission={requestPermission}
-              onSelectSession={(id) => {
-                const session = sessions.find((s) => s.id === id);
-                if (session) attachToSession(session);
-              }}
+              onSelectSession={selectSessionById}
             />
             <Button size="sm" onClick={() => newClaudeSession()}>
               <Plus className="mr-1 h-4 w-4" />
@@ -203,10 +209,22 @@ export function DesktopView({
           </div>
         </header>
 
+        {/* Waiting Banner */}
+        <WaitingBanner
+          sessionStatuses={sessionStatuses}
+          onSelectSession={selectSessionById}
+        />
+
         {/* Pane Layout - full height */}
         <div className="min-h-0 flex-1">
           <PaneLayout renderPane={renderPane} />
         </div>
+
+        {/* Session Status Bar */}
+        <SessionStatusBar
+          sessionStatuses={sessionStatuses}
+          onSelectSession={selectSessionById}
+        />
       </div>
 
       {/* Dialogs */}
@@ -223,6 +241,7 @@ export function DesktopView({
         onOpenChange={setShowQuickSwitcher}
         currentSessionId={focusedActiveTab?.sessionId ?? undefined}
         activeSessionWorkingDir={activeSession?.working_directory ?? undefined}
+        sessionStatuses={sessionStatuses}
         onResumeClaudeSession={resumeClaudeSession}
         onSelectFile={(file, line) => {
           const absolutePath = activeSession?.working_directory

package/components/views/MobileView.tsx

@@ -49,7 +49,12 @@ export function MobileView({
               sessionStatuses={sessionStatuses}
               onSelect={(id) => {
                 const session = sessions.find((s) => s.id === id);
-                if (session) attachToSession(session);
+                if (session) {
+                  attachToSession(session);
+                } else {
+                  const status = sessionStatuses[id];
+                  resumeClaudeSession(id, status?.cwd || "~");
+                }
                 setSidebarOpen(false);
               }}
               onOpenInTab={(id) => {

package/components/views/types.ts

@@ -5,8 +5,10 @@ import type { TabData } from "@/lib/panes";
 
 export interface SessionStatus {
   sessionName: string;
+  cwd?: string | null;
   status: "idle" | "running" | "waiting" | "error" | "dead";
   lastLine?: string;
+  waitingContext?: string;
   claudeSessionId?: string | null;
 }
 

package/data/sessions/index.ts

@@ -6,7 +6,6 @@ export {
   useRenameSession,
   useForkSession,
   useSummarizeSession,
-  useMoveSessionToGroup,
   useMoveSessionToProject,
 } from "./queries";
 export type { CreateSessionInput } from "./queries";

package/data/sessions/queries.ts

@@ -1,11 +1,10 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import type { Session, Group } from "@/lib/db";
+import type { Session } from "@/lib/db";
 import type { AgentType } from "@/lib/providers";
 import { sessionKeys } from "./keys";
 
 interface SessionsResponse {
   sessions: Session[];
-  groups: Group[];
 }
 
 async function fetchSessions(): Promise<SessionsResponse> {
@@ -124,31 +123,6 @@ export function useSummarizeSession() {
   });
 }
 
-export function useMoveSessionToGroup() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async ({
-      sessionId,
-      groupPath,
-    }: {
-      sessionId: string;
-      groupPath: string;
-    }) => {
-      const res = await fetch(`/api/sessions/${sessionId}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ groupPath }),
-      });
-      if (!res.ok) throw new Error("Failed to move session");
-      return res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: sessionKeys.list() });
-    },
-  });
-}
-
 export function useMoveSessionToProject() {
   const queryClient = useQueryClient();
 

package/data/statuses/queries.ts

@@ -1,18 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import type { Session } from "@/lib/db";
 import type { SessionStatus } from "@/components/views/types";
-import { statusKeys } from "../sessions/keys";
-
-interface StatusResponse {
-  statuses: Record<string, SessionStatus>;
-}
-
-async function fetchStatuses(): Promise<StatusResponse> {
-  const res = await fetch("/api/sessions/status");
-  if (!res.ok) throw new Error("Failed to fetch statuses");
-  return res.json();
-}
 
 interface UseSessionStatusesOptions {
   sessions: Session[];
@@ -32,38 +20,84 @@ export function useSessionStatusesQuery({
   activeSessionId,
   checkStateChanges,
 }: UseSessionStatusesOptions) {
-  const query = useQuery({
-    queryKey: statusKeys.all,
-    queryFn: fetchStatuses,
-    staleTime: 2000,
-    refetchInterval: (query) => {
-      const statuses = query.state.data?.statuses;
-      if (!statuses) return 5000;
+  const [sessionStatuses, setSessionStatuses] = useState<
+    Record<string, SessionStatus>
+  >({});
+  const wsRef = useRef<WebSocket | null>(null);
+  const reconnectTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
 
-      const hasActive = Object.values(statuses).some(
-        (s) => s.status === "running" || s.status === "waiting"
-      );
-
-      return hasActive ? 5000 : 30000;
+  const handleStatuses = useCallback(
+    (statuses: Record<string, SessionStatus>) => {
+      setSessionStatuses(statuses);
     },
-  });
+    []
+  );
 
+  // Check state changes when statuses or sessions update
   useEffect(() => {
-    if (!query.data?.statuses) return;
-
-    const statuses = query.data.statuses;
+    if (Object.keys(sessionStatuses).length === 0) return;
 
     const sessionStates = sessions.map((s) => ({
       id: s.id,
       name: s.name,
-      status: (statuses[s.id]?.status || "dead") as SessionStatus["status"],
+      status: (sessionStatuses[s.id]?.status ||
+        "dead") as SessionStatus["status"],
     }));
     checkStateChanges(sessionStates, activeSessionId);
-    // Note: claude_session_id is now updated server-side in /api/sessions/status
-  }, [query.data, sessions, activeSessionId, checkStateChanges]);
+  }, [sessionStatuses, sessions, activeSessionId, checkStateChanges]);
+
+  // WebSocket connection for push-based updates
+  useEffect(() => {
+    let disposed = false;
+
+    function connect() {
+      if (disposed) return;
+
+      const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+      const ws = new WebSocket(
+        `${protocol}//${window.location.host}/ws/updates`
+      );
+      wsRef.current = ws;
+
+      ws.onmessage = (event) => {
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.type === "session-statuses") {
+            handleStatuses(msg.statuses);
+          }
+        } catch {
+          // ignore parse errors
+        }
+      };
+
+      ws.onclose = () => {
+        wsRef.current = null;
+        if (!disposed) {
+          // Reconnect after 2s
+          reconnectTimeoutRef.current = setTimeout(connect, 2000);
+        }
+      };
+
+      ws.onerror = () => {
+        ws.close();
+      };
+    }
+
+    connect();
+
+    return () => {
+      disposed = true;
+      if (reconnectTimeoutRef.current) {
+        clearTimeout(reconnectTimeoutRef.current);
+      }
+      wsRef.current?.close();
+    };
+  }, [handleStatuses]);
 
   return {
-    sessionStatuses: query.data?.statuses ?? {},
-    isLoading: query.isLoading,
+    sessionStatuses,
+    isLoading: false,
   };
 }

package/hooks/useSessions.ts

@@ -6,20 +6,17 @@ import {
   useRenameSession,
   useForkSession,
   useSummarizeSession,
-  useMoveSessionToGroup,
   useMoveSessionToProject,
 } from "@/data/sessions";
 
 export function useSessions() {
   const { data, refetch } = useSessionsQuery();
   const sessions = data?.sessions ?? [];
-  const groups = data?.groups ?? [];
 
   const deleteMutation = useDeleteSession();
   const renameMutation = useRenameSession();
   const forkMutation = useForkSession();
   const summarizeMutation = useSummarizeSession();
-  const moveToGroupMutation = useMoveSessionToGroup();
   const moveToProjectMutation = useMoveSessionToProject();
 
   const fetchSessions = useCallback(async () => {
@@ -55,13 +52,6 @@ export function useSessions() {
     [summarizeMutation]
   );
 
-  const moveSessionToGroup = useCallback(
-    async (sessionId: string, groupPath: string) => {
-      await moveToGroupMutation.mutateAsync({ sessionId, groupPath });
-    },
-    [moveToGroupMutation]
-  );
-
   const moveSessionToProject = useCallback(
     async (sessionId: string, projectId: string) => {
       await moveToProjectMutation.mutateAsync({ sessionId, projectId });
@@ -71,7 +61,6 @@ export function useSessions() {
 
   return {
     sessions,
-    groups,
     summarizingSessionId: summarizeMutation.isPending
       ? (summarizeMutation.variables as string)
       : null,
@@ -80,7 +69,6 @@ export function useSessions() {
     renameSession,
     forkSession,
     summarizeSession,
-    moveSessionToGroup,
     moveSessionToProject,
   };
 }

package/lib/claude/watcher.ts

@@ -3,6 +3,8 @@ import path from "path";
 import os from "os";
 import { WebSocket } from "ws";
 import { invalidateProject, invalidateAll } from "./jsonl-cache";
+import { onStateFileChange, invalidateSessionName } from "../status-monitor";
+import { STATES_DIR } from "../hooks/setup";
 
 const CLAUDE_PROJECTS_DIR = path.join(os.homedir(), ".claude", "projects");
 
@@ -13,7 +15,7 @@ export function addUpdateClient(ws: WebSocket): void {
   ws.on("close", () => updateClients.delete(ws));
 }
 
-function broadcast(msg: object): void {
+export function broadcast(msg: object): void {
   const data = JSON.stringify(msg);
   for (const ws of updateClients) {
     if (ws.readyState === WebSocket.OPEN) {
@@ -44,14 +46,21 @@ function handleFileChange(filePath: string): void {
 
 export function startWatcher(): void {
   try {
-    const watcher = watch(CLAUDE_PROJECTS_DIR, {
+    // Watch Claude projects for session list updates
+    const projectsWatcher = watch(CLAUDE_PROJECTS_DIR, {
       ignoreInitial: true,
       depth: 2,
       ignored: [/node_modules/, /\.git/, /subagents/],
     });
 
-    watcher.on("change", handleFileChange);
-    watcher.on("add", (fp) => {
+    projectsWatcher.on("change", (fp) => {
+      handleFileChange(fp);
+      if (fp.endsWith(".jsonl")) {
+        const sessionId = path.basename(fp, ".jsonl");
+        invalidateSessionName(sessionId);
+      }
+    });
+    projectsWatcher.on("add", (fp) => {
       handleFileChange(fp);
       const relative = path.relative(CLAUDE_PROJECTS_DIR, fp);
       if (!relative.includes(path.sep)) {
@@ -59,12 +68,26 @@ export function startWatcher(): void {
         broadcast({ type: "projects-changed" });
       }
     });
-    watcher.on("addDir", () => {
+    projectsWatcher.on("addDir", () => {
       invalidateAll();
       broadcast({ type: "projects-changed" });
     });
 
     console.log("> File watcher started on ~/.claude/projects/");
+
+    // Watch session state files written by hooks
+    const statesWatcher = watch(STATES_DIR, {
+      ignoreInitial: true,
+      depth: 0,
+    });
+
+    statesWatcher.on("change", onStateFileChange);
+    statesWatcher.on("add", onStateFileChange);
+    statesWatcher.on("unlink", onStateFileChange);
+
+    console.log(
+      "> State file watcher started on ~/.claude-deck/session-states/"
+    );
   } catch (err) {
     console.error("Failed to start file watcher:", err);
   }