A powerful GUI app and Toolkit for Claude Code
Create custom agents, manage interactive Claude Code sessions, run secure background agents, and more.
Made with ❤️ by the Asterisk
Pre-built AI agents for opcode powered by Claude Code
| **Automate your Git workflow with intelligent commit messages**
| **Advanced AI-powered Static Application Security Testing (SAST)** | **Automated comprehensive unit test generation for any codebase**{isRunning ? 'Running' : messages.length > 0 ? 'Complete' : 'Ready'} • {model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}
Working in: {projectPath.split('/').pop() || projectPath}
)}Enter a task to run the agent
Enter a task to run the agent
Loading agent run...
{run.task}
No output available yet
{run.task}
{error || "Run not found"}
Execution History
{run.task}
No execution history yet
{run.task}
Manage your Claude Code agents
Are you sure you want to delete "{agentToDelete.name}"? This action cannot be undone.
Create your first agent to get started
No description provided
Run an agent to see it here
{new Date(run.created_at).toLocaleString()}
{run.metrics?.duration_ms ? `${(run.metrics.duration_ms / 1000).toFixed(1)}s` : run.duration_ms ? `${(run.duration_ms / 1000).toFixed(1)}s` : '—'}
{run.metrics?.total_tokens ? run.metrics.total_tokens.toLocaleString() : run.total_tokens ? run.total_tokens.toLocaleString() : '—'}
Help improve opcode
We collect anonymous usage data to improve your experience. No personal data is collected.
{this.state.error.message}
( Component: React.ComponentType
,
fallback?: (error: Error, reset: () => void) => ReactNode
) {
return (props: P) => (
Manage your Claude Code agents
Create your first CC Agent to get started
Created: {new Date(agent.created_at).toLocaleDateString()}
Manage session checkpoints and recovery Experimental Feature
Checkpointing may affect directory structure or cause data loss. Use with caution.
Automatically create checkpoints based on the selected strategy
{checkpointStrategy === "manual" && "Checkpoints will only be created manually"}
{checkpointStrategy === "per_prompt" && "A checkpoint will be created after each user prompt"}
{checkpointStrategy === "per_tool_use" && "A checkpoint will be created after each tool use"}
{checkpointStrategy === "smart" && "Checkpoints will be created after destructive operations"}
Total checkpoints: {totalCheckpoints}
Remove old checkpoints, keeping only the most recent {keepCount}
{error} {queuedPrompt.prompt}
Edit project-specific Claude Code system prompt
{file.relative_path} {error}
Select which version of Claude to use
{isEditMode ? "Update your Claude Code agent configuration" : "Configure a new Claude Code agent"}
This will be used as the default task placeholder when executing the agent
Define the behavior and capabilities of your Claude Code agent
An error occurred while rendering this component.
↑↓ Navigate • Enter Select • → Enter Directory • ← Go Back • Esc Close
{THINKING_MODES.find(m => m.id === selectedThinkingMode)?.name || "Auto"} {THINKING_MODES.find(m => m.id === selectedThinkingMode)?.description} {selectedModelData.name} {selectedModelData.description} Thinking: {THINKING_MODES.find(m => m.id === selectedThinkingMode)?.name || "Auto"} {THINKING_MODES.find(m => m.id === selectedThinkingMode)?.description}
{/* Global Modals */}
{showNFO &&
);
};
================================================
FILE: src/components/CheckpointSettings.tsx
================================================
import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import {
Wrench,
Save,
Trash2,
HardDrive,
AlertCircle,
Loader2
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Switch } from "@/components/ui/switch";
import { SelectComponent, type SelectOption } from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import { Card } from "@/components/ui/card";
import { api, type CheckpointStrategy } from "@/lib/api";
import { cn } from "@/lib/utils";
interface CheckpointSettingsProps {
sessionId: string;
projectId: string;
projectPath: string;
onClose?: () => void;
className?: string;
}
/**
* CheckpointSettings component for managing checkpoint configuration
*
* @example
*
{/* Header */}
{/* Toast Notification */}
CC Agents
{loading ? (
{/* Execution History */}
{!loading && agents.length > 0 && (
) : agents.length === 0 ? (
) : (
<>
No agents yet
{/* Pagination */}
{totalPages > 1 && (
{renderIcon(agent.icon)}
{agent.name}
Page {currentPage} of {totalPages}
)}
)}
)}
{runsLoading ? (
Recent Executions
) : (
{/* Experimental Feature Warning */}
Checkpoint Settings
{error && (
{/* Checkpoint strategy */}
{/* Save button */}
{/* Cleanup settings */}
setKeepCount(parseInt(e.target.value) || 10)}
disabled={isLoading}
className="flex-1 h-9"
/>
{/* Header */}
{/* Error display */}
{error && (
{showPreview ? (
}
right={
)}
);
const projectPathInput = null; // Removed project path display
// If preview is maximized, render only the WebviewPreview in full screen
if (showPreview && isPreviewMaximized) {
return (
{/* Loading indicator under the latest message */}
{isLoading && (
{/* Fork Dialog */}
{/* Settings Dialog */}
{showSettings && effectiveSession && (
)}
{/* Slash Commands Settings Dialog */}
{showSlashCommandsSettings && (
)}
{/* Main Content Area */}
{/* Floating Prompt Input - Always visible */}
{showPreview ? (
// Split pane layout when preview is active
}
right={
{projectPathInput}
{messagesList}
{isLoading && messages.length === 0 && (
)}
)}
{session ? "Loading session history..." : "Initializing Claude Code..."}
{!queuedPromptsCollapsed && queuedPrompts.map((queuedPrompt, index) => (
Queued Prompts ({queuedPrompts.length})
#{index + 1}
{queuedPrompt.model === "opus" ? "Opus" : "Sonnet"}
{/* Token Counter - positioned under the Send button */}
{totalTokens > 0 && (
}
open={copyPopoverOpen}
onOpenChange={setCopyPopoverOpen}
side="top"
align="end"
/>
)}
)}
{/* Timeline Header */}
{/* Timeline Content */}
Session Timeline
);
};
================================================
FILE: src/components/ClaudeMemoriesDropdown.tsx
================================================
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronDown, Edit2, FileText, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { api, type ClaudeMdFile } from "@/lib/api";
import { formatUnixTimestamp } from "@/lib/date-utils";
interface ClaudeMemoriesDropdownProps {
/**
* The project path to search for CLAUDE.md files
*/
projectPath: string;
/**
* Callback when an edit button is clicked
*/
onEditFile: (file: ClaudeMdFile) => void;
/**
* Optional className for styling
*/
className?: string;
}
/**
* ClaudeMemoriesDropdown component - Shows all CLAUDE.md files in a project
*
* @example
*
{/* Header */}
{/* Toast Notification */}
{file.relative_path}
{loading ? (
) : (
)}
);
};
================================================
FILE: src/components/ClaudeVersionSelector.tsx
================================================
import React, { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { api, type ClaudeInstallation } from "@/lib/api";
import { cn } from "@/lib/utils";
import { CheckCircle, HardDrive, Settings, Terminal, Info } from "lucide-react";
interface ClaudeVersionSelectorProps {
/**
* Currently selected installation path
*/
selectedPath?: string | null;
/**
* Callback when an installation is selected
*/
onSelect: (installation: ClaudeInstallation) => void;
/**
* Optional className for styling
*/
className?: string;
/**
* Whether to show the save button
*/
showSaveButton?: boolean;
/**
* Callback when save is clicked
*/
onSave?: () => void;
/**
* Whether save is in progress
*/
isSaving?: boolean;
/**
* Simplified mode for cleaner UI
*/
simplified?: boolean;
}
/**
* ClaudeVersionSelector component for selecting Claude Code installations
* Supports system installations and user preferences
*
* @example
*
{loading ? (
) : error ? (
{error}
) : files.length === 0 ? (
No CLAUDE.md files found in this project
) : (
{files.map((file, index) => (
)}
{formatFileSize(file.size)}
Modified {formatUnixTimestamp(file.modified)}
);
}
return (
);
}
return (
{error}
);
}
// Original card-based UI
return (
{selectedInstallation && (
{selectedInstallation && (
)}
Path:
{selectedInstallation.path}
{/* Installation Details */}
{selectedInstallation && (
)}
{/* Save Button */}
{showSaveButton && (
)}
Selected Installation
Path: {selectedInstallation.path}
Source: {selectedInstallation.source}
{selectedInstallation.version && (
Version: {selectedInstallation.version}
)}
{/* Header */}
{/* Toast Notification */}
{/* Error display */}
{error && (
{isEditMode ? "Edit Agent" : "Create New Agent"}
{/* Basic Information */}
Basic Information
{/* Model Selection */}
setName(e.target.value)}
placeholder="e.g., Code Assistant"
required
className="h-9"
/>
{(() => {
const Icon = ICON_MAP[selectedIcon] || ICON_MAP.bot;
return (
<>
Claude 4 Sonnet
Faster, efficient for most tasks
Claude 4 Opus
More capable, better for complex tasks
Configuration
setDefaultTask(e.target.value)}
className="h-9"
/>
System Prompt
setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Left side - macOS Traffic Light buttons */}
{/* Center - Title (hidden) */}
{/*
{/* Close button */}
{/* Minimize button */}
{/* Maximize button */}
{title}
*/}
{/* Right side - Navigation icons with improved spacing */}
{/* Primary actions group */}
{onAgentsClick && (
{/* Visual separator */}
{/* Secondary actions group */}
{onSettingsClick && (
)}
{onClaudeClick && (
)}
{onMCPClick && (
)}
{onInfoClick && (
)}
);
}
return this.props.children;
}
}
================================================
FILE: src/components/ExecutionControlBar.tsx
================================================
import React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { StopCircle, Clock, Hash } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface ExecutionControlBarProps {
isExecuting: boolean;
onStop: () => void;
totalTokens?: number;
elapsedTime?: number; // in seconds
className?: string;
}
/**
* Floating control bar shown during agent execution
* Provides stop functionality and real-time statistics
*/
export const ExecutionControlBar: React.FC
Something went wrong
)}
Error details
{this.state.error.message}
{/* Status text */}
Executing...
{/* Divider */}
{/* Stats */}
{/* Time */}
{/* Divider */}
{/* Stop button */}
{/* Tokens */}
{/* Current path */}
{/* File list with virtual scrolling */}
{currentPath}
{isLoading && (
{/* Footer */}
)}
{error && (
Loading...
)}
{!isLoading && !error && displayEntries.length === 0 && (
{error}
)}
{displayEntries.length > 0 && (
{virtualItems.map((virtualRow) => {
const entry = displayEntries[virtualRow.index];
const Icon = getFileIcon(entry);
const isSelected = virtualRow.index === selectedIndex;
return (
)}
);
})}
{displayEntries.length} {displayEntries.length === 1 ? 'item' : 'items'}
{allowDirectorySelection && (
Shift+Enter to select directory
)}
{/* File List */}
{relativePath}
{/* Show loading only if no cached data */}
{isLoading && displayEntries.length === 0 && (
{/* Footer */}
Loading...
)}
{/* Show subtle indicator when displaying cached data while fetching fresh */}
{isShowingCached && isLoading && displayEntries.length > 0 && (
updating...
)}
{error && displayEntries.length === 0 && (
{error}
)}
{!isLoading && !error && displayEntries.length === 0 && (
)}
{displayEntries.length > 0 && (
{displayEntries.map((entry, index) => {
const Icon = getFileIcon(entry);
const isSearching = searchQuery.trim() !== '';
const isSelected = index === selectedIndex;
return (
);
})}
)}
{[1, 2, 3, 4].map((i) => (
))}
);
};
type Model = {
id: "sonnet" | "opus";
name: string;
description: string;
icon: React.ReactNode;
shortName: string;
color: string;
};
const MODELS: Model[] = [
{
id: "sonnet",
name: "Claude 4 Sonnet",
description: "Faster, efficient for most tasks",
icon:
{/* Image previews in expanded mode */}
{embeddedImages.length > 0 && (
Compose your prompt
Model:
{MODELS.map((model) => (
))}
}
open={modelPickerOpen}
onOpenChange={setModelPickerOpen}
align="start"
side="top"
/>
Thinking:
{THINKING_MODES.map((mode) => (
))}
}
open={thinkingModePickerOpen}
onOpenChange={setThinkingModePickerOpen}
align="start"
side="top"
/>
{/* Image previews */}
{embeddedImages.length > 0 && (
{/* Model & Thinking Mode Selectors - Left side, fixed at bottom */}
{/* Prompt Input - Center */}
{MODELS.map((model) => (
))}
}
open={modelPickerOpen}
onOpenChange={setModelPickerOpen}
align="start"
side="top"
/>
{THINKING_MODES.map((mode) => (
))}
}
open={thinkingModePickerOpen}
onOpenChange={setThinkingModePickerOpen}
align="start"
side="top"
/>