@atercates/claude-deck 0.2.1

package/components/ChatView.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ChatMessage } from "./ChatMessage";
+import { ToolCallDisplay } from "./ToolCallDisplay";
+import { MessageInput } from "./MessageInput";
+import { ScrollArea } from "./ui/scroll-area";
+import type { ClientEvent } from "@/lib/claude/types";
+
+interface ChatViewProps {
+  sessionId: string;
+}
+
+interface DisplayMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: string;
+  isStreaming?: boolean;
+  toolCalls?: Array<{
+    name: string;
+    input: Record<string, unknown>;
+    output?: string;
+    status: "pending" | "running" | "completed" | "error";
+  }>;
+}
+
+export function ChatView({ sessionId }: ChatViewProps) {
+  const [messages, setMessages] = useState<DisplayMessage[]>([]);
+  const [currentText, setCurrentText] = useState("");
+  const [currentToolCalls, setCurrentToolCalls] = useState<
+    DisplayMessage["toolCalls"]
+  >([]);
+  const [status, setStatus] = useState<
+    "idle" | "running" | "waiting" | "error"
+  >("idle");
+  const wsRef = useRef<WebSocket | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Refs to track current streaming state (avoids closure issues)
+  const currentTextRef = useRef("");
+  const currentToolCallsRef = useRef<DisplayMessage["toolCalls"]>([]);
+
+  // Reset messages when session changes
+  useEffect(() => {
+    setMessages([]);
+    setCurrentText("");
+    setCurrentToolCalls([]);
+    currentTextRef.current = "";
+    currentToolCallsRef.current = [];
+  }, [sessionId]);
+
+  useEffect(() => {
+    let ignore = false;
+    let ws: WebSocket | null = null;
+
+    // Connect to Claude WebSocket
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    ws = new WebSocket(
+      `${protocol}//${window.location.host}/ws/claude/${sessionId}`
+    );
+
+    ws.onopen = () => {
+      if (ignore) {
+        ws?.close();
+        return;
+      }
+      wsRef.current = ws;
+    };
+
+    ws.onmessage = (event) => {
+      if (ignore) return;
+      const data: ClientEvent = JSON.parse(event.data);
+
+      switch (data.type) {
+        case "status":
+          setStatus(
+            (data.data as { status: "idle" | "running" | "waiting" | "error" })
+              .status
+          );
+          break;
+
+        case "text": {
+          const textData = data.data as { role: string; text: string };
+          if (textData.role === "assistant") {
+            setCurrentText((prev) => {
+              const newText = prev + textData.text;
+              currentTextRef.current = newText;
+              return newText;
+            });
+          }
+          break;
+        }
+
+        case "tool_start": {
+          const toolStartData = data.data as {
+            toolName: string;
+            input: Record<string, unknown>;
+          };
+          setCurrentToolCalls((prev) => {
+            const newCalls = [
+              ...(prev || []),
+              {
+                name: toolStartData.toolName,
+                input: toolStartData.input,
+                status: "running" as const,
+              },
+            ];
+            currentToolCallsRef.current = newCalls;
+            return newCalls;
+          });
+          break;
+        }
+
+        case "tool_end": {
+          const toolEndData = data.data as {
+            toolName: string;
+            output: string;
+            status: string;
+          };
+          setCurrentToolCalls((prev) => {
+            const newCalls = prev?.map((tc) =>
+              tc.name === toolEndData.toolName && tc.status === "running"
+                ? {
+                    ...tc,
+                    output: toolEndData.output,
+                    status: toolEndData.status as "completed" | "error",
+                  }
+                : tc
+            );
+            currentToolCallsRef.current = newCalls;
+            return newCalls;
+          });
+          break;
+        }
+
+        case "complete":
+        case "error": {
+          // Finalize current message using refs (avoids stale closure)
+          const finalText = currentTextRef.current;
+          const finalToolCalls = currentToolCallsRef.current;
+
+          if (finalText || (finalToolCalls && finalToolCalls.length > 0)) {
+            setMessages((prev) => [
+              ...prev,
+              {
+                id: `msg-${Date.now()}`,
+                role: "assistant",
+                content: finalText,
+                timestamp: data.timestamp,
+                toolCalls: finalToolCalls,
+              },
+            ]);
+          }
+          // Reset state and refs
+          setCurrentText("");
+          setCurrentToolCalls([]);
+          currentTextRef.current = "";
+          currentToolCallsRef.current = [];
+          break;
+        }
+      }
+    };
+
+    ws.onclose = () => {
+      if (!ignore) {
+        setStatus("idle");
+      }
+    };
+
+    return () => {
+      ignore = true;
+      wsRef.current = null;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [sessionId]);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, currentText]);
+
+  const sendMessage = (text: string) => {
+    if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) return;
+
+    // Add user message to display
+    setMessages((prev) => [
+      ...prev,
+      {
+        id: `user-${Date.now()}`,
+        role: "user",
+        content: text,
+        timestamp: new Date().toISOString(),
+      },
+    ]);
+
+    // Send to Claude
+    wsRef.current.send(
+      JSON.stringify({
+        type: "prompt",
+        prompt: text,
+        options: { resume: true },
+      })
+    );
+  };
+
+  const cancelRequest = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: "cancel" }));
+    }
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-4">
+          {messages.map((msg) => (
+            <div key={msg.id}>
+              <ChatMessage
+                role={msg.role}
+                content={msg.content}
+                timestamp={msg.timestamp}
+              />
+              {msg.toolCalls?.map((tc, i) => (
+                <ToolCallDisplay
+                  key={`${msg.id}-tool-${i}`}
+                  name={tc.name}
+                  input={tc.input}
+                  output={tc.output}
+                  status={tc.status}
+                />
+              ))}
+            </div>
+          ))}
+
+          {/* Streaming content */}
+          {(currentText ||
+            (currentToolCalls && currentToolCalls.length > 0)) && (
+            <div>
+              {currentText && (
+                <ChatMessage
+                  role="assistant"
+                  content={currentText}
+                  timestamp={new Date().toISOString()}
+                  isStreaming
+                />
+              )}
+              {currentToolCalls?.map((tc, i) => (
+                <ToolCallDisplay
+                  key={`streaming-tool-${i}`}
+                  name={tc.name}
+                  input={tc.input}
+                  output={tc.output}
+                  status={tc.status}
+                />
+              ))}
+            </div>
+          )}
+
+          <div ref={scrollRef} />
+        </div>
+      </ScrollArea>
+
+      <MessageInput
+        onSend={sendMessage}
+        onCancel={status === "running" ? cancelRequest : undefined}
+        disabled={status === "running"}
+        placeholder={
+          status === "running" ? "Claude is thinking..." : "Send a message..."
+        }
+      />
+    </div>
+  );
+}

package/components/ClaudeProjects/ClaudeProjectCard.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import {
+  ChevronRight,
+  ChevronDown,
+  FolderOpen,
+  MoreHorizontal,
+  Plus,
+  Eye,
+  EyeOff,
+  Loader2,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { ClaudeSessionCard } from "./ClaudeSessionCard";
+import {
+  useClaudeSessionsQuery,
+  useHideItem,
+  useUnhideItem,
+} from "@/data/claude";
+import type { ClaudeProject } from "@/data/claude";
+
+interface ClaudeProjectCardProps {
+  project: ClaudeProject;
+  showHidden: boolean;
+  onSelectSession?: (
+    sessionId: string,
+    directory: string,
+    summary: string,
+    projectName: string
+  ) => void;
+  onNewSession?: (cwd: string, projectName: string) => void;
+}
+
+export function ClaudeProjectCard({
+  project,
+  showHidden,
+  onSelectSession,
+  onNewSession,
+}: ClaudeProjectCardProps) {
+  const [expanded, setExpanded] = useState(false);
+  const { data: sessionsData, isPending: isSessionsPending } =
+    useClaudeSessionsQuery(expanded ? project.name : null);
+  const hideItem = useHideItem();
+  const unhideItem = useUnhideItem();
+
+  const sessions = sessionsData?.sessions || [];
+  const filteredSessions = showHidden
+    ? sessions
+    : sessions.filter((s) => !s.hidden);
+
+  const handleHideProject = () => {
+    hideItem.mutate({ itemType: "project", itemId: project.name });
+  };
+
+  const handleUnhideProject = () => {
+    unhideItem.mutate({ itemType: "project", itemId: project.name });
+  };
+
+  const menuContent = project.hidden ? (
+    <ContextMenuItem onClick={handleUnhideProject}>
+      <Eye className="mr-2 h-3 w-3" />
+      Show project
+    </ContextMenuItem>
+  ) : (
+    <ContextMenuItem onClick={handleHideProject}>
+      <EyeOff className="mr-2 h-3 w-3" />
+      Hide project
+    </ContextMenuItem>
+  );
+
+  const cardContent = (
+    <div
+      onClick={() => setExpanded(!expanded)}
+      className={cn(
+        "group flex cursor-pointer items-center gap-1 rounded-md px-2 py-1.5 text-sm",
+        "min-h-[36px] md:min-h-[28px]",
+        "hover:bg-accent/50",
+        project.hidden && "opacity-40"
+      )}
+    >
+      <button className="flex-shrink-0 p-0.5">
+        {expanded ? (
+          <ChevronDown className="text-muted-foreground h-4 w-4" />
+        ) : (
+          <ChevronRight className="text-muted-foreground h-4 w-4" />
+        )}
+      </button>
+      <FolderOpen className="text-muted-foreground h-3.5 w-3.5 flex-shrink-0" />
+      <span className="min-w-0 flex-1 truncate text-sm font-medium">
+        {project.displayName}
+      </span>
+      <span className="text-muted-foreground flex-shrink-0 text-[10px]">
+        {project.sessionCount}
+      </span>
+      {onNewSession && (
+        <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"
+          onClick={(e) => {
+            e.stopPropagation();
+            onNewSession(project.directory || "~", project.name);
+          }}
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      )}
+      <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()}>
+          {project.hidden ? (
+            <DropdownMenuItem onClick={handleUnhideProject}>
+              <Eye className="mr-2 h-3 w-3" />
+              Show project
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem onClick={handleHideProject}>
+              <EyeOff className="mr-2 h-3 w-3" />
+              Hide project
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+
+  return (
+    <div className="space-y-0.5">
+      <ContextMenu>
+        <ContextMenuTrigger asChild>{cardContent}</ContextMenuTrigger>
+        <ContextMenuContent>{menuContent}</ContextMenuContent>
+      </ContextMenu>
+
+      {expanded && (
+        <div className="border-border/30 ml-3 space-y-px border-l pl-1.5">
+          {isSessionsPending ? (
+            <div className="flex items-center gap-2 px-2 py-2">
+              <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />
+              <span className="text-muted-foreground text-xs">
+                Loading sessions...
+              </span>
+            </div>
+          ) : filteredSessions.length === 0 ? (
+            <p className="text-muted-foreground px-2 py-2 text-xs">
+              No sessions
+            </p>
+          ) : (
+            filteredSessions.map((session) => (
+              <ClaudeSessionCard
+                key={session.sessionId}
+                session={session}
+                projectName={project.name}
+                onSelect={onSelectSession}
+                onHide={() =>
+                  hideItem.mutate({
+                    itemType: "session",
+                    itemId: session.sessionId,
+                  })
+                }
+                onUnhide={() =>
+                  unhideItem.mutate({
+                    itemType: "session",
+                    itemId: session.sessionId,
+                  })
+                }
+              />
+            ))
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/components/ClaudeProjects/ClaudeProjectsSection.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState, useMemo } from "react";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { useClaudeProjectsQuery, useClaudeUpdates } from "@/data/claude";
+import { ClaudeProjectCard } from "./ClaudeProjectCard";
+
+interface ClaudeProjectsSectionProps {
+  onSelectSession?: (
+    sessionId: string,
+    directory: string,
+    summary: string,
+    projectName: string
+  ) => void;
+  onNewSession?: (cwd: string, projectName: string) => void;
+}
+
+function ProjectsSkeleton() {
+  return (
+    <div className="space-y-1 px-2 py-1">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div key={i} className="flex items-center gap-2 rounded-md px-2 py-1.5">
+          <div className="bg-muted h-4 w-4 animate-pulse rounded" />
+          <div
+            className="bg-muted h-3.5 animate-pulse rounded"
+            style={{ width: `${60 + Math.random() * 60}px` }}
+          />
+          <div className="flex-1" />
+          <div className="bg-muted h-3 w-4 animate-pulse rounded" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ClaudeProjectsSection({
+  onSelectSession,
+  onNewSession,
+}: ClaudeProjectsSectionProps) {
+  useClaudeUpdates();
+  const { data: projects = [], isPending } = useClaudeProjectsQuery();
+  const [showHidden, setShowHidden] = useState(false);
+
+  const filteredProjects = useMemo(() => {
+    const visible = projects.filter((p) => !p.hidden);
+    const hidden = projects.filter((p) => p.hidden);
+    if (showHidden) return [...visible, ...hidden];
+    return visible;
+  }, [projects, showHidden]);
+
+  const hiddenCount = projects.filter((p) => p.hidden).length;
+
+  return (
+    <div>
+      <div className="flex items-center justify-between px-2 py-1">
+        <span className="text-muted-foreground text-xs font-medium">
+          Projects
+        </span>
+        <div className="flex items-center gap-1">
+          {isPending && (
+            <Loader2 className="text-muted-foreground h-3 w-3 animate-spin" />
+          )}
+          {hiddenCount > 0 && (
+            <button
+              onClick={() => setShowHidden(!showHidden)}
+              className="text-muted-foreground hover:text-foreground p-0.5"
+            >
+              {showHidden ? <EyeOff size={14} /> : <Eye size={14} />}
+            </button>
+          )}
+        </div>
+      </div>
+
+      {isPending && projects.length === 0 && <ProjectsSkeleton />}
+
+      <div className="space-y-0.5">
+        {filteredProjects.map((project) => (
+          <ClaudeProjectCard
+            key={project.name}
+            project={project}
+            showHidden={showHidden}
+            onSelectSession={onSelectSession}
+            onNewSession={onNewSession}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/ClaudeProjects/ClaudeSessionCard.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { MessageSquare, MoreHorizontal, Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import type { ClaudeSession } from "@/data/claude";
+
+interface ClaudeSessionCardProps {
+  session: ClaudeSession;
+  projectName: string;
+  onHide: () => void;
+  onUnhide: () => void;
+  onSelect?: (
+    sessionId: string,
+    directory: string,
+    summary: string,
+    projectName: string
+  ) => void;
+}
+
+function getTimeAgo(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+
+  const diffHours = Math.floor(diffMins / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) return `${diffDays}d ago`;
+
+  return date.toLocaleDateString();
+}
+
+export function ClaudeSessionCard({
+  session,
+  projectName,
+  onHide,
+  onUnhide,
+  onSelect,
+}: ClaudeSessionCardProps) {
+  const handleClick = () => {
+    if (onSelect && session.cwd) {
+      onSelect(session.sessionId, session.cwd, session.summary, projectName);
+    }
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className={cn(
+        "group flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-sm",
+        "hover:bg-accent/50",
+        session.hidden && "opacity-40"
+      )}
+    >
+      <MessageSquare className="text-muted-foreground h-3.5 w-3.5 flex-shrink-0" />
+      <span className="flex-1 truncate text-xs">
+        {session.summary || "Untitled session"}
+      </span>
+      <span className="text-muted-foreground flex-shrink-0 text-[10px]">
+        {getTimeAgo(session.lastActivity)}
+      </span>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="h-6 w-6 flex-shrink-0 opacity-0 group-hover:opacity-100"
+          >
+            <MoreHorizontal className="h-3.5 w-3.5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" onClick={(e) => e.stopPropagation()}>
+          {session.hidden ? (
+            <DropdownMenuItem onClick={onUnhide}>
+              <Eye className="mr-2 h-3 w-3" />
+              Show session
+            </DropdownMenuItem>
+          ) : (
+            <DropdownMenuItem onClick={onHide}>
+              <EyeOff className="mr-2 h-3 w-3" />
+              Hide session
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/components/ClaudeProjects/index.ts

@@ -0,0 +1 @@
+export { ClaudeProjectsSection } from "./ClaudeProjectsSection";