@atercates/claude-deck 0.2.3 → 0.2.4

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/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) => {

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,
@@ -46,6 +48,7 @@ export function DesktopView({
   updateSettings,
   requestPermission,
   attachToSession,
+  attachToActiveTmux,
   openSessionInNewTab,
   handleNewSessionInProject,
   handleOpenTerminal,
@@ -59,6 +62,20 @@ export function DesktopView({
   resumeClaudeSession,
   renderPane,
 }: ViewProps) {
+  // Select a session by ID — handles both DB sessions and tmux-only sessions
+  const selectSessionById = (id: string) => {
+    const session = sessions.find((s) => s.id === id);
+    if (session) {
+      attachToSession(session);
+      return;
+    }
+    // Not in DB — attach directly to the running tmux session
+    const status = sessionStatuses[id];
+    if (status?.sessionName) {
+      attachToActiveTmux(id, status.sessionName);
+    }
+  };
+
   return (
     <div className="bg-background flex h-screen overflow-hidden">
       {/* Desktop Sidebar */}
@@ -71,10 +88,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 +205,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 +214,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 +246,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/types.ts

@@ -7,6 +7,7 @@ export interface SessionStatus {
   sessionName: string;
   status: "idle" | "running" | "waiting" | "error" | "dead";
   lastLine?: string;
+  waitingContext?: string;
   claudeSessionId?: string | null;
 }
 
@@ -38,6 +39,7 @@ export interface ViewProps {
 
   // Handlers
   attachToSession: (session: Session) => void;
+  attachToActiveTmux: (sessionId: string, tmuxSessionName: string) => void;
   openSessionInNewTab: (session: Session) => void;
   handleNewSessionInProject: (projectId: string) => void;
   handleOpenTerminal: (projectId: string) => void;

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,
   };
 }