e8c54d7fad
This comprehensive update adds support for resumable Claude Code sessions that can run in the background and be resumed later. Key improvements include: Backend enhancements: - Enhanced ProcessRegistry to track both agent runs and Claude sessions - Added new Tauri commands: list_running_claude_sessions, get_claude_session_output - Improved Claude process management with proper session ID extraction and lifecycle handling - Enhanced cancellation logic with registry-based process killing and fallback mechanisms - Added live output capture and storage for session persistence Frontend improvements: - New RunningClaudeSessions component to display and manage active sessions - Added streaming state management and session tracking in App component - Implemented navigation protection when Claude is actively streaming - Enhanced ClaudeCodeSession component with streaming callbacks and session management Configuration updates: - Updated .gitignore to exclude documentation files (AGENTS.md, CLAUDE.md, *_TASK.md) This feature enables users to start Claude sessions, navigate away while Claude continues processing, and resume sessions later from the Projects view, significantly improving the user experience for long-running AI interactions.
439 lines
15 KiB
TypeScript
439 lines
15 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { Plus, Loader2, Bot, FolderCode } from "lucide-react";
|
|
import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
|
|
import { OutputCacheProvider } from "@/lib/outputCache";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ProjectList } from "@/components/ProjectList";
|
|
import { SessionList } from "@/components/SessionList";
|
|
import { RunningClaudeSessions } from "@/components/RunningClaudeSessions";
|
|
import { Topbar } from "@/components/Topbar";
|
|
import { MarkdownEditor } from "@/components/MarkdownEditor";
|
|
import { ClaudeFileEditor } from "@/components/ClaudeFileEditor";
|
|
import { Settings } from "@/components/Settings";
|
|
import { CCAgents } from "@/components/CCAgents";
|
|
import { ClaudeCodeSession } from "@/components/ClaudeCodeSession";
|
|
import { UsageDashboard } from "@/components/UsageDashboard";
|
|
import { MCPManager } from "@/components/MCPManager";
|
|
import { NFOCredits } from "@/components/NFOCredits";
|
|
import { ClaudeBinaryDialog } from "@/components/ClaudeBinaryDialog";
|
|
import { Toast, ToastContainer } from "@/components/ui/toast";
|
|
|
|
type View = "welcome" | "projects" | "agents" | "editor" | "settings" | "claude-file-editor" | "claude-code-session" | "usage-dashboard" | "mcp";
|
|
|
|
/**
|
|
* Main App component - Manages the Claude directory browser UI
|
|
*/
|
|
function App() {
|
|
const [view, setView] = useState<View>("welcome");
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [selectedProject, setSelectedProject] = useState<Project | null>(null);
|
|
const [sessions, setSessions] = useState<Session[]>([]);
|
|
const [editingClaudeFile, setEditingClaudeFile] = useState<ClaudeMdFile | null>(null);
|
|
const [selectedSession, setSelectedSession] = useState<Session | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [showNFO, setShowNFO] = useState(false);
|
|
const [showClaudeBinaryDialog, setShowClaudeBinaryDialog] = useState(false);
|
|
const [toast, setToast] = useState<{ message: string; type: "success" | "error" | "info" } | null>(null);
|
|
const [activeClaudeSessionId, setActiveClaudeSessionId] = useState<string | null>(null);
|
|
const [isClaudeStreaming, setIsClaudeStreaming] = useState(false);
|
|
|
|
// Load projects on mount when in projects view
|
|
useEffect(() => {
|
|
if (view === "projects") {
|
|
loadProjects();
|
|
} else if (view === "welcome") {
|
|
// Reset loading state for welcome view
|
|
setLoading(false);
|
|
}
|
|
}, [view]);
|
|
|
|
// Listen for Claude session selection events
|
|
useEffect(() => {
|
|
const handleSessionSelected = (event: CustomEvent) => {
|
|
const { session } = event.detail;
|
|
setSelectedSession(session);
|
|
handleViewChange("claude-code-session");
|
|
};
|
|
|
|
const handleClaudeNotFound = () => {
|
|
setShowClaudeBinaryDialog(true);
|
|
};
|
|
|
|
window.addEventListener('claude-session-selected', handleSessionSelected as EventListener);
|
|
window.addEventListener('claude-not-found', handleClaudeNotFound as EventListener);
|
|
return () => {
|
|
window.removeEventListener('claude-session-selected', handleSessionSelected as EventListener);
|
|
window.removeEventListener('claude-not-found', handleClaudeNotFound as EventListener);
|
|
};
|
|
}, []);
|
|
|
|
/**
|
|
* Loads all projects from the ~/.claude/projects directory
|
|
*/
|
|
const loadProjects = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const projectList = await api.listProjects();
|
|
setProjects(projectList);
|
|
} catch (err) {
|
|
console.error("Failed to load projects:", err);
|
|
setError("Failed to load projects. Please ensure ~/.claude directory exists.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Handles project selection and loads its sessions
|
|
*/
|
|
const handleProjectClick = async (project: Project) => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const sessionList = await api.getProjectSessions(project.id);
|
|
setSessions(sessionList);
|
|
setSelectedProject(project);
|
|
} catch (err) {
|
|
console.error("Failed to load sessions:", err);
|
|
setError("Failed to load sessions for this project.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Opens a new Claude Code session in the interactive UI
|
|
*/
|
|
const handleNewSession = async () => {
|
|
handleViewChange("claude-code-session");
|
|
setSelectedSession(null);
|
|
};
|
|
|
|
/**
|
|
* Returns to project list view
|
|
*/
|
|
const handleBack = () => {
|
|
setSelectedProject(null);
|
|
setSessions([]);
|
|
};
|
|
|
|
/**
|
|
* Handles editing a CLAUDE.md file from a project
|
|
*/
|
|
const handleEditClaudeFile = (file: ClaudeMdFile) => {
|
|
setEditingClaudeFile(file);
|
|
handleViewChange("claude-file-editor");
|
|
};
|
|
|
|
/**
|
|
* Returns from CLAUDE.md file editor to projects view
|
|
*/
|
|
const handleBackFromClaudeFileEditor = () => {
|
|
setEditingClaudeFile(null);
|
|
handleViewChange("projects");
|
|
};
|
|
|
|
/**
|
|
* Handles view changes with navigation protection
|
|
*/
|
|
const handleViewChange = (newView: View) => {
|
|
// Check if we're navigating away from an active Claude session
|
|
if (view === "claude-code-session" && isClaudeStreaming && activeClaudeSessionId) {
|
|
const shouldLeave = window.confirm(
|
|
"Claude is still responding. If you navigate away, Claude will continue running in the background.\n\n" +
|
|
"You can return to this session from the Projects view.\n\n" +
|
|
"Do you want to continue?"
|
|
);
|
|
|
|
if (!shouldLeave) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
setView(newView);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
switch (view) {
|
|
case "welcome":
|
|
return (
|
|
<div className="flex items-center justify-center p-4" style={{ height: "100%" }}>
|
|
<div className="w-full max-w-4xl">
|
|
{/* Welcome Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-12 text-center"
|
|
>
|
|
<h1 className="text-4xl font-bold tracking-tight">
|
|
<span className="rotating-symbol"></span>
|
|
Welcome to Claudia
|
|
</h1>
|
|
</motion.div>
|
|
|
|
{/* Navigation Cards */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
|
|
{/* CC Agents Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.1 }}
|
|
>
|
|
<Card
|
|
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
|
|
onClick={() => handleViewChange("agents")}
|
|
>
|
|
<div className="h-full flex flex-col items-center justify-center p-8">
|
|
<Bot className="h-16 w-16 mb-4 text-primary" />
|
|
<h2 className="text-xl font-semibold">CC Agents</h2>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* CC Projects Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: 0.2 }}
|
|
>
|
|
<Card
|
|
className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
|
|
onClick={() => handleViewChange("projects")}
|
|
>
|
|
<div className="h-full flex flex-col items-center justify-center p-8">
|
|
<FolderCode className="h-16 w-16 mb-4 text-primary" />
|
|
<h2 className="text-xl font-semibold">CC Projects</h2>
|
|
</div>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "agents":
|
|
return (
|
|
<div className="flex-1 overflow-hidden">
|
|
<CCAgents onBack={() => handleViewChange("welcome")} />
|
|
</div>
|
|
);
|
|
|
|
case "editor":
|
|
return (
|
|
<div className="flex-1 overflow-hidden">
|
|
<MarkdownEditor onBack={() => handleViewChange("welcome")} />
|
|
</div>
|
|
);
|
|
|
|
case "settings":
|
|
return (
|
|
<div className="flex-1 flex flex-col" style={{ minHeight: 0 }}>
|
|
<Settings onBack={() => handleViewChange("welcome")} />
|
|
</div>
|
|
);
|
|
|
|
case "projects":
|
|
return (
|
|
<div className="flex h-full items-center justify-center p-4 overflow-y-auto">
|
|
<div className="w-full max-w-2xl">
|
|
{/* Header with back button */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="mb-6"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleViewChange("welcome")}
|
|
className="mb-4"
|
|
>
|
|
← Back to Home
|
|
</Button>
|
|
<div className="text-center">
|
|
<h1 className="text-3xl font-bold tracking-tight">CC Projects</h1>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
Browse your Claude Code sessions
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Error display */}
|
|
{error && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 p-3 text-xs text-destructive"
|
|
>
|
|
{error}
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Loading state */}
|
|
{loading && (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Content */}
|
|
{!loading && (
|
|
<AnimatePresence mode="wait">
|
|
{selectedProject ? (
|
|
<motion.div
|
|
key="sessions"
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<SessionList
|
|
sessions={sessions}
|
|
projectPath={selectedProject.path}
|
|
onBack={handleBack}
|
|
onEditClaudeFile={handleEditClaudeFile}
|
|
/>
|
|
</motion.div>
|
|
) : (
|
|
<motion.div
|
|
key="projects"
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: 20 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="space-y-4"
|
|
>
|
|
{/* New session button at the top */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5 }}
|
|
>
|
|
<Button
|
|
onClick={handleNewSession}
|
|
size="default"
|
|
className="w-full"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
New Claude Code session
|
|
</Button>
|
|
</motion.div>
|
|
|
|
{/* Running Claude Sessions */}
|
|
<RunningClaudeSessions />
|
|
|
|
{/* Project list */}
|
|
{projects.length > 0 ? (
|
|
<ProjectList
|
|
projects={projects}
|
|
onProjectClick={handleProjectClick}
|
|
/>
|
|
) : (
|
|
<div className="py-8 text-center">
|
|
<p className="text-sm text-muted-foreground">
|
|
No projects found in ~/.claude/projects
|
|
</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "claude-file-editor":
|
|
return editingClaudeFile ? (
|
|
<ClaudeFileEditor
|
|
file={editingClaudeFile}
|
|
onBack={handleBackFromClaudeFileEditor}
|
|
/>
|
|
) : null;
|
|
|
|
case "claude-code-session":
|
|
return (
|
|
<ClaudeCodeSession
|
|
session={selectedSession || undefined}
|
|
onBack={() => {
|
|
setSelectedSession(null);
|
|
handleViewChange("projects");
|
|
}}
|
|
onStreamingChange={(isStreaming, sessionId) => {
|
|
setIsClaudeStreaming(isStreaming);
|
|
setActiveClaudeSessionId(sessionId);
|
|
}}
|
|
/>
|
|
);
|
|
|
|
case "usage-dashboard":
|
|
return (
|
|
<UsageDashboard onBack={() => handleViewChange("welcome")} />
|
|
);
|
|
|
|
case "mcp":
|
|
return (
|
|
<MCPManager onBack={() => handleViewChange("welcome")} />
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<OutputCacheProvider>
|
|
<div className="h-screen bg-background flex flex-col">
|
|
{/* Topbar */}
|
|
<Topbar
|
|
onClaudeClick={() => handleViewChange("editor")}
|
|
onSettingsClick={() => handleViewChange("settings")}
|
|
onUsageClick={() => handleViewChange("usage-dashboard")}
|
|
onMCPClick={() => handleViewChange("mcp")}
|
|
onInfoClick={() => setShowNFO(true)}
|
|
/>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 overflow-y-auto">
|
|
{renderContent()}
|
|
</div>
|
|
|
|
{/* NFO Credits Modal */}
|
|
{showNFO && <NFOCredits onClose={() => setShowNFO(false)} />}
|
|
|
|
{/* Claude Binary Dialog */}
|
|
<ClaudeBinaryDialog
|
|
open={showClaudeBinaryDialog}
|
|
onOpenChange={setShowClaudeBinaryDialog}
|
|
onSuccess={() => {
|
|
setToast({ message: "Claude binary path saved successfully", type: "success" });
|
|
// Trigger a refresh of the Claude version check
|
|
window.location.reload();
|
|
}}
|
|
onError={(message) => setToast({ message, type: "error" })}
|
|
/>
|
|
|
|
{/* Toast Container */}
|
|
<ToastContainer>
|
|
{toast && (
|
|
<Toast
|
|
message={toast.message}
|
|
type={toast.type}
|
|
onDismiss={() => setToast(null)}
|
|
/>
|
|
)}
|
|
</ToastContainer>
|
|
</div>
|
|
</OutputCacheProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|