@atercates/claude-deck 0.2.1

package/app/page.tsx

@@ -0,0 +1,629 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+
+// Debug log buffer - persists even if console is closed
+const debugLogs: string[] = [];
+const MAX_DEBUG_LOGS = 100;
+
+function debugLog(message: string) {
+  const timestamp = new Date().toISOString().split("T")[1].slice(0, 12);
+  const entry = `[${timestamp}] ${message}`;
+  debugLogs.push(entry);
+  if (debugLogs.length > MAX_DEBUG_LOGS) debugLogs.shift();
+  console.log(`[ClaudeDeck] ${message}`);
+}
+
+// Expose to window for debugging
+if (typeof window !== "undefined") {
+  (window as unknown as { agentOSLogs: () => void }).agentOSLogs = () => {
+    console.log("=== ClaudeDeck Debug Logs ===");
+    debugLogs.forEach((log) => console.log(log));
+    console.log("=== End Logs ===");
+  };
+}
+import { PaneProvider, usePanes } from "@/contexts/PaneContext";
+import { Pane } from "@/components/Pane";
+import { useNotifications } from "@/hooks/useNotifications";
+import { useViewport } from "@/hooks/useViewport";
+import { useViewportHeight } from "@/hooks/useViewportHeight";
+import { useSessions } from "@/hooks/useSessions";
+import { useProjects } from "@/hooks/useProjects";
+import { useDevServersManager } from "@/hooks/useDevServersManager";
+import { useSessionStatuses } from "@/hooks/useSessionStatuses";
+import type { Session } from "@/lib/db";
+import type { TerminalHandle } from "@/components/Terminal";
+import { getProvider } from "@/lib/providers";
+import { DesktopView } from "@/components/views/DesktopView";
+import { MobileView } from "@/components/views/MobileView";
+import { getPendingPrompt, clearPendingPrompt } from "@/stores/initialPrompt";
+import { NewClaudeSessionDialog } from "@/components/NewClaudeSessionDialog";
+import { useClaudeProjectsQuery } from "@/data/claude";
+
+function HomeContent() {
+  // UI State
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [showNewSessionDialog, setShowNewSessionDialog] = useState(false);
+  const [newSessionProjectId, setNewSessionProjectId] = useState<string | null>(
+    null
+  );
+  const [showNotificationSettings, setShowNotificationSettings] =
+    useState(false);
+  const [showQuickSwitcher, setShowQuickSwitcher] = useState(false);
+  const [copiedSessionId, setCopiedSessionId] = useState(false);
+  const terminalRefs = useRef<Map<string, TerminalHandle>>(new Map());
+
+  // Pane context
+  const { focusedPaneId, attachSession, getActiveTab, addTab } = usePanes();
+  const focusedActiveTab = getActiveTab(focusedPaneId);
+  const { isMobile, isHydrated } = useViewport();
+
+  // Data hooks
+  const { sessions, fetchSessions } = useSessions();
+  const { projects, fetchProjects } = useProjects();
+  const { data: claudeProjects } = useClaudeProjectsQuery();
+  const {
+    startDevServerProjectId,
+    setStartDevServerProjectId,
+    startDevServer,
+    createDevServer,
+  } = useDevServersManager();
+
+  // Helper to get init script command from API
+  const getInitScriptCommand = useCallback(
+    async (agentCommand: string): Promise<string> => {
+      try {
+        const res = await fetch("/api/sessions/init-script", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ agentCommand }),
+        });
+        const data = await res.json();
+        return data.command || agentCommand;
+      } catch {
+        return agentCommand;
+      }
+    },
+    []
+  );
+
+  // Set CSS variable for viewport height (handles mobile keyboard)
+  useViewportHeight();
+
+  // Terminal ref management
+  const registerTerminalRef = useCallback(
+    (paneId: string, tabId: string, ref: TerminalHandle | null) => {
+      const key = `${paneId}:${tabId}`;
+      if (ref) {
+        terminalRefs.current.set(key, ref);
+        debugLog(
+          `Terminal registered: ${key}, total refs: ${terminalRefs.current.size}`
+        );
+      } else {
+        terminalRefs.current.delete(key);
+        debugLog(
+          `Terminal unregistered: ${key}, total refs: ${terminalRefs.current.size}`
+        );
+      }
+    },
+    []
+  );
+
+  // Get terminal for a pane, with fallback to first available
+  const getTerminalWithFallback = useCallback(():
+    | { terminal: TerminalHandle; paneId: string; tabId: string }
+    | undefined => {
+    debugLog(
+      `getTerminalWithFallback called, total refs: ${terminalRefs.current.size}, focusedPaneId: ${focusedPaneId}`
+    );
+
+    // Try focused pane first
+    const activeTab = getActiveTab(focusedPaneId);
+    debugLog(`activeTab for focused pane: ${activeTab?.id || "null"}`);
+
+    if (activeTab) {
+      const key = `${focusedPaneId}:${activeTab.id}`;
+      const terminal = terminalRefs.current.get(key);
+      debugLog(
+        `Looking for terminal at key "${key}": ${terminal ? "found" : "not found"}`
+      );
+      if (terminal) {
+        return { terminal, paneId: focusedPaneId, tabId: activeTab.id };
+      }
+    }
+
+    // Fallback to first available terminal
+    const firstEntry = terminalRefs.current.entries().next().value;
+    if (firstEntry) {
+      const [key, terminal] = firstEntry as [string, TerminalHandle];
+      const [paneId, tabId] = key.split(":");
+      debugLog(`Using fallback terminal: ${key}`);
+      return { terminal, paneId, tabId };
+    }
+
+    debugLog(
+      `NO TERMINAL FOUND. Available keys: ${Array.from(terminalRefs.current.keys()).join(", ") || "none"}`
+    );
+    return undefined;
+  }, [focusedPaneId, getActiveTab]);
+
+  // Build tmux command for a session
+  const buildSessionCommand = useCallback(
+    async (
+      session: Session
+    ): Promise<{ sessionName: string; cwd: string; command: string }> => {
+      const provider = getProvider(session.agent_type || "claude");
+      const sessionName = session.tmux_name || `${provider.id}-${session.id}`;
+      const cwd = session.working_directory?.replace("~", "$HOME") || "$HOME";
+
+      // TODO: Add explicit "Enable Orchestration" toggle that creates .mcp.json
+      // for conductor sessions. Removed auto-creation because it pollutes projects
+      // with .mcp.json files that aren't in their .gitignore.
+      // See: /api/sessions/[id]/mcp-config, lib/mcp-config.ts
+
+      // Get parent session ID for forking
+      let parentSessionId: string | null = null;
+      if (!session.claude_session_id && session.parent_session_id) {
+        const parentSession = sessions.find(
+          (s) => s.id === session.parent_session_id
+        );
+        parentSessionId = parentSession?.claude_session_id || null;
+      }
+
+      // Check for pending initial prompt
+      const initialPrompt = getPendingPrompt(session.id);
+      if (initialPrompt) {
+        clearPendingPrompt(session.id);
+      }
+
+      const flags = provider.buildFlags({
+        sessionId: session.claude_session_id,
+        parentSessionId,
+        autoApprove: session.auto_approve,
+        model: session.model,
+        initialPrompt: initialPrompt || undefined,
+      });
+      const flagsStr = flags.join(" ");
+
+      const agentCmd = `${provider.command} ${flagsStr}`;
+      const command = await getInitScriptCommand(agentCmd);
+
+      return { sessionName, cwd, command };
+    },
+    [sessions, getInitScriptCommand]
+  );
+
+  // Attach a session to a terminal
+  const runSessionInTerminal = useCallback(
+    (
+      terminal: TerminalHandle,
+      paneId: string,
+      session: Session,
+      sessionInfo: { sessionName: string; cwd: string; command: string }
+    ) => {
+      const { sessionName, cwd, command } = sessionInfo;
+      const tmuxNew = command
+        ? `tmux new -s ${sessionName} -c "${cwd}" "${command}"`
+        : `tmux new -s ${sessionName} -c "${cwd}"`;
+      terminal.sendCommand(
+        `tmux set -g mouse on 2>/dev/null; tmux set -g set-clipboard on 2>/dev/null; tmux attach -t ${sessionName} 2>/dev/null || ${tmuxNew}`
+      );
+      attachSession(paneId, session.id, sessionName);
+      terminal.focus();
+    },
+    [attachSession]
+  );
+
+  // Attach session to terminal
+  const attachToSession = useCallback(
+    async (session: Session) => {
+      const terminalInfo = getTerminalWithFallback();
+      if (!terminalInfo) {
+        debugLog(
+          `ERROR: No terminal available to attach session: ${session.name}`
+        );
+        alert(
+          `[ClaudeDeck Debug] No terminal available!\n\nRun agentOSLogs() in console to see debug logs.`
+        );
+        return;
+      }
+
+      const { terminal, paneId } = terminalInfo;
+      const activeTab = getActiveTab(paneId);
+      const isInTmux = !!activeTab?.attachedTmux;
+
+      if (isInTmux) {
+        terminal.sendInput("\x02d");
+      }
+
+      setTimeout(
+        () => {
+          terminal.sendInput("\x03");
+          setTimeout(async () => {
+            const sessionInfo = await buildSessionCommand(session);
+            runSessionInTerminal(terminal, paneId, session, sessionInfo);
+          }, 50);
+        },
+        isInTmux ? 100 : 0
+      );
+    },
+    [
+      getTerminalWithFallback,
+      getActiveTab,
+      buildSessionCommand,
+      runSessionInTerminal,
+    ]
+  );
+
+  // Open session in new tab
+  const openSessionInNewTab = useCallback(
+    (session: Session) => {
+      const existingKeys = new Set(terminalRefs.current.keys());
+      addTab(focusedPaneId);
+
+      let attempts = 0;
+      const maxAttempts = 20;
+
+      const waitForNewTerminal = () => {
+        attempts++;
+
+        for (const key of terminalRefs.current.keys()) {
+          if (!existingKeys.has(key) && key.startsWith(`${focusedPaneId}:`)) {
+            const terminal = terminalRefs.current.get(key);
+            if (terminal) {
+              buildSessionCommand(session).then((sessionInfo) => {
+                runSessionInTerminal(
+                  terminal,
+                  focusedPaneId,
+                  session,
+                  sessionInfo
+                );
+              });
+              return;
+            }
+          }
+        }
+
+        if (attempts < maxAttempts) {
+          setTimeout(waitForNewTerminal, 50);
+        } else {
+          debugLog(`Failed to find new terminal after ${maxAttempts} attempts`);
+        }
+      };
+
+      setTimeout(waitForNewTerminal, 50);
+    },
+    [addTab, focusedPaneId, buildSessionCommand, runSessionInTerminal]
+  );
+
+  const resumeClaudeSession = useCallback(
+    (
+      claudeSessionId: string,
+      cwd: string,
+      sessionName?: string,
+      projectName?: string
+    ) => {
+      const terminalInfo = getTerminalWithFallback();
+      if (!terminalInfo) return;
+
+      const { terminal, paneId } = terminalInfo;
+      const activeTab = getActiveTab(paneId);
+      const isInTmux = !!activeTab?.attachedTmux;
+
+      const tmuxName = `claude-${claudeSessionId}`;
+      const tmuxCmd = [
+        `tmux kill-session -t ${tmuxName} 2>/dev/null;`,
+        `tmux new -s ${tmuxName} -c "${cwd}" "claude --resume ${claudeSessionId} || claude --continue"`,
+      ].join(" ");
+
+      if (isInTmux) {
+        terminal.sendInput("\x02d");
+      }
+
+      setTimeout(
+        () => {
+          terminal.sendInput("\x03");
+          setTimeout(() => {
+            terminal.sendCommand(tmuxCmd);
+            attachSession(
+              paneId,
+              claudeSessionId,
+              tmuxName,
+              sessionName,
+              projectName,
+              cwd
+            );
+            terminal.focus();
+          }, 50);
+        },
+        isInTmux ? 100 : 0
+      );
+    },
+    [getTerminalWithFallback, getActiveTab, attachSession]
+  );
+
+  const [newSessionPending, setNewSessionPending] = useState<{
+    cwd: string;
+    projectName: string;
+  } | null>(null);
+
+  const newClaudeSession = useCallback((cwd?: string, projectName?: string) => {
+    setNewSessionPending({ cwd: cwd || "~", projectName: projectName || "" });
+  }, []);
+
+  const handleNewClaudeSessionConfirm = useCallback(
+    (name: string, overrideCwd?: string, overrideProject?: string) => {
+      if (!newSessionPending) return;
+      setNewSessionPending(null);
+
+      const terminalInfo = getTerminalWithFallback();
+      if (!terminalInfo) return;
+
+      const { terminal, paneId } = terminalInfo;
+      const activeTab = getActiveTab(paneId);
+      const isInTmux = !!activeTab?.attachedTmux;
+      const id = Math.random().toString(36).slice(2) + Date.now().toString(36);
+      const tmuxName = `claude-new-${id}`;
+      const cwd = overrideCwd || newSessionPending.cwd;
+      const projectName = overrideProject || newSessionPending.projectName;
+      const tmuxCmd = `tmux new -s ${tmuxName} -c "${cwd}" "claude"`;
+
+      if (isInTmux) {
+        terminal.sendInput("\x02d");
+      }
+
+      setTimeout(
+        () => {
+          terminal.sendInput("\x03");
+          setTimeout(() => {
+            terminal.sendCommand(tmuxCmd);
+            attachSession(paneId, id, tmuxName, name, projectName, cwd);
+            terminal.focus();
+          }, 50);
+        },
+        isInTmux ? 100 : 0
+      );
+
+      if (isMobile) setSidebarOpen(false);
+    },
+    [
+      newSessionPending,
+      getTerminalWithFallback,
+      getActiveTab,
+      attachSession,
+      isMobile,
+    ]
+  );
+
+  // Notification click handler
+  const handleNotificationClick = useCallback(
+    (sessionId: string) => {
+      const session = sessions.find((s) => s.id === sessionId);
+      if (session) {
+        attachToSession(session);
+      }
+    },
+    [sessions, attachToSession]
+  );
+
+  // Notifications
+  const {
+    settings: notificationSettings,
+    checkStateChanges,
+    updateSettings,
+    requestPermission,
+    permissionGranted,
+  } = useNotifications({ onSessionClick: handleNotificationClick });
+
+  // Session statuses
+  const { sessionStatuses } = useSessionStatuses({
+    sessions,
+    activeSessionId: focusedActiveTab?.sessionId,
+    checkStateChanges,
+  });
+
+  // Set initial sidebar state based on viewport (only after hydration)
+  useEffect(() => {
+    if (isHydrated && !isMobile) setSidebarOpen(true);
+  }, [isMobile, isHydrated]);
+
+  // Keyboard shortcut: Cmd+K to open quick switcher
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setShowQuickSwitcher(true);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  // Session selection handler
+  const handleSelectSession = useCallback(
+    (sessionId: string) => {
+      debugLog(`handleSelectSession called for: ${sessionId}`);
+      const session = sessions.find((s) => s.id === sessionId);
+      if (session) {
+        debugLog(`Found session: ${session.name}, calling attachToSession`);
+        attachToSession(session);
+      } else {
+        debugLog(
+          `Session not found in sessions array (length: ${sessions.length})`
+        );
+      }
+    },
+    [sessions, attachToSession]
+  );
+
+  // Pane renderer
+  const renderPane = useCallback(
+    (paneId: string) => (
+      <Pane
+        key={paneId}
+        paneId={paneId}
+        sessions={sessions}
+        projects={projects}
+        onRegisterTerminal={registerTerminalRef}
+        onMenuClick={isMobile ? () => setSidebarOpen(true) : undefined}
+        onSelectSession={handleSelectSession}
+        onResumeClaudeSession={resumeClaudeSession}
+      />
+    ),
+    [
+      sessions,
+      projects,
+      registerTerminalRef,
+      isMobile,
+      handleSelectSession,
+      resumeClaudeSession,
+    ]
+  );
+
+  // New session in project handler
+  const handleNewSessionInProject = useCallback((projectId: string) => {
+    setNewSessionProjectId(projectId);
+    setShowNewSessionDialog(true);
+  }, []);
+
+  // Session created handler (shared between desktop/mobile)
+  const handleSessionCreated = useCallback(
+    async (sessionId: string) => {
+      setShowNewSessionDialog(false);
+      setNewSessionProjectId(null);
+      await fetchSessions();
+
+      const res = await fetch(`/api/sessions/${sessionId}`);
+      const data = await res.json();
+      if (!data.session) return;
+
+      setTimeout(() => attachToSession(data.session), 100);
+    },
+    [fetchSessions, attachToSession]
+  );
+
+  // Project created handler (shared between desktop/mobile)
+  const handleCreateProject = useCallback(
+    async (
+      name: string,
+      workingDirectory: string,
+      agentType?: string
+    ): Promise<string | null> => {
+      const res = await fetch("/api/projects", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, workingDirectory, agentType }),
+      });
+      const data = await res.json();
+      if (data.project) {
+        await fetchProjects();
+        return data.project.id;
+      }
+      return null;
+    },
+    [fetchProjects]
+  );
+
+  // Open terminal in project handler (shell session, not AI agent)
+  const handleOpenTerminal = useCallback(
+    async (projectId: string) => {
+      const project = projects.find((p) => p.id === projectId);
+      if (!project) return;
+
+      // Create a shell session with the project's working directory
+      const res = await fetch("/api/sessions", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          name: `${project.name} Terminal`,
+          workingDirectory: project.working_directory || "~",
+          agentType: "shell",
+          projectId,
+        }),
+      });
+
+      const data = await res.json();
+      if (!data.session) return;
+
+      await fetchSessions();
+
+      // Small delay to ensure state updates, then attach
+      setTimeout(() => {
+        attachToSession(data.session);
+      }, 100);
+    },
+    [projects, fetchSessions, attachToSession]
+  );
+
+  // Active session and dev server project
+  const activeSession = sessions.find(
+    (s) => s.id === focusedActiveTab?.sessionId
+  );
+  const startDevServerProject = startDevServerProjectId
+    ? (projects.find((p) => p.id === startDevServerProjectId) ?? null)
+    : null;
+
+  // View props
+  const viewProps = {
+    sessions,
+    projects,
+    sessionStatuses,
+    sidebarOpen,
+    setSidebarOpen,
+    activeSession,
+    focusedActiveTab,
+    copiedSessionId,
+    setCopiedSessionId,
+    showNewSessionDialog,
+    setShowNewSessionDialog,
+    newSessionProjectId,
+    showNotificationSettings,
+    setShowNotificationSettings,
+    showQuickSwitcher,
+    setShowQuickSwitcher,
+    notificationSettings,
+    permissionGranted,
+    updateSettings,
+    requestPermission,
+    attachToSession,
+    openSessionInNewTab,
+    handleNewSessionInProject,
+    handleOpenTerminal,
+    handleSessionCreated,
+    handleCreateProject,
+    handleStartDevServer: startDevServer,
+    handleCreateDevServer: createDevServer,
+    startDevServerProject,
+    setStartDevServerProjectId,
+    newClaudeSession,
+    resumeClaudeSession,
+    renderPane,
+  };
+
+  const view = isMobile ? (
+    <MobileView {...viewProps} />
+  ) : (
+    <DesktopView {...viewProps} />
+  );
+
+  return (
+    <>
+      {view}
+      <NewClaudeSessionDialog
+        open={!!newSessionPending}
+        projectName={newSessionPending?.projectName || ""}
+        projects={claudeProjects}
+        onClose={() => setNewSessionPending(null)}
+        onConfirm={handleNewClaudeSessionConfirm}
+      />
+    </>
+  );
+}
+
+export default function Home() {
+  return (
+    <PaneProvider>
+      <HomeContent />
+    </PaneProvider>
+  );
+}

package/components/ChatMessage.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { User, Bot } from "lucide-react";
+
+interface ChatMessageProps {
+  role: "user" | "assistant";
+  content: string;
+  timestamp: string;
+  isStreaming?: boolean;
+}
+
+export function ChatMessage({
+  role,
+  content,
+  timestamp,
+  isStreaming,
+}: ChatMessageProps) {
+  const isUser = role === "user";
+
+  return (
+    <div
+      className={cn(
+        "flex gap-3 rounded-lg p-4",
+        isUser ? "bg-muted/50" : "bg-card"
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full",
+          isUser ? "bg-primary" : "bg-muted"
+        )}
+      >
+        {isUser ? (
+          <User className="text-primary-foreground h-4 w-4" />
+        ) : (
+          <Bot className="text-muted-foreground h-4 w-4" />
+        )}
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 flex items-center gap-2">
+          <span className="text-sm font-medium">
+            {isUser ? "You" : "Claude"}
+          </span>
+          <span className="text-muted-foreground text-xs">
+            {new Date(timestamp).toLocaleTimeString()}
+          </span>
+          {isStreaming && (
+            <span className="text-primary animate-pulse text-xs">
+              streaming...
+            </span>
+          )}
+        </div>
+
+        <div className="text-sm break-words whitespace-pre-wrap">
+          {content}
+          {isStreaming && (
+            <span className="bg-primary ml-0.5 inline-block h-4 w-2 animate-pulse" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}