![\"opcode](\"src-tauri/icons/icon.png\"){kind=icon}
\n\n \n A powerful GUI app and Toolkit for Claude Code\n
\n\n Create custom agents, manage interactive Claude Code sessions, run secure background agents, and more.\n
\n \n\n ![\"Features\"](\"https://img.shields.io/badge/Features-โจ-blue?style=for-the-badge\"){kind=icon}
![\"Installation\"](\"https://img.shields.io/badge/Install-๐-green?style=for-the-badge\"){kind=icon}
![\"Usage\"](\"https://img.shields.io/badge/Usage-๐-purple?style=for-the-badge\"){kind=icon}
![\"Development\"](\"https://img.shields.io/badge/Develop-๐ ๏ธ-orange?style=for-the-badge\"){kind=icon}
![\"Discord\"](\"https://img.shields.io/badge/Discord-Join-5865F2?style=for-the-badge&logo=discord&logoColor=white\"){kind=icon}
\n Made with โค๏ธ by the Asterisk\n
\n\n Report Bug\n ยท\n Request Feature\n
\n\n Pre-built AI agents for opcode powered by Claude Code\n
\n\n Browse Agents โข\n Import Guide โข\n Export Guide โข\n Contribute\n
\n![\"Sonnet\"](\"https://img.shields.io/badge/Sonnet-blue?style=flat-square\"){kind=icon}
| **Automate your Git workflow with intelligent commit messages**![\"Opus\"](\"https://img.shields.io/badge/Opus-purple?style=flat-square\"){kind=icon}
| **Advanced AI-powered Static Application Security Testing (SAST)** | **Automated comprehensive unit test generation for any codebase**\n {isRunning ? 'Running' : messages.length > 0 ? 'Complete' : 'Ready'} โข {model === 'opus' ? 'Claude 4 Opus' : 'Claude 4 Sonnet'}\n
\n\n Working in: {projectPath.split('/').pop() || projectPath}\n
\n )}\n\n Enter a task to run the agent\n
\n\n Enter a task to run the agent\n
\nLoading agent run...
\n\n {run.task}\n
\nNo output available yet
\n{run.task}
\n{error || \"Run not found\"}
\n \nExecution History
\n{run.task}
\nNo execution history yet
\n\n {run.task}\n
\n \n\n Manage your Claude Code agents\n
\n\n Are you sure you want to delete \"{agentToDelete.name}\"? This action cannot be undone.\n
\n\n Create your first agent to get started\n
\n \n\n No description provided\n
\n\n\n Run an agent to see it here\n
\n{new Date(run.created_at).toLocaleString()}
\n{run.metrics?.duration_ms ? `${(run.metrics.duration_ms / 1000).toFixed(1)}s` : run.duration_ms ? `${(run.duration_ms / 1000).toFixed(1)}s` : 'โ'}
\n{run.metrics?.total_tokens ? run.metrics.total_tokens.toLocaleString() : run.total_tokens ? run.total_tokens.toLocaleString() : 'โ'}
\nHelp improve opcode
\n\n We collect anonymous usage data to improve your experience. No personal data is collected.\n
\n\n {this.state.error.message}\n
\n(\n Component: React.ComponentType
,\n fallback?: (error: Error, reset: () => void) => ReactNode\n) {\n return (props: P) => (\n \n Manage your Claude Code agents\n \n Create your first CC Agent to get started\n \n Created: {new Date(agent.created_at).toLocaleDateString()}\n Manage session checkpoints and recovery Experimental Feature \n Checkpointing may affect directory structure or cause data loss. Use with caution.\n \n Automatically create checkpoints based on the selected strategy\n \n {checkpointStrategy === \"manual\" && \"Checkpoints will only be created manually\"}\n {checkpointStrategy === \"per_prompt\" && \"A checkpoint will be created after each user prompt\"}\n {checkpointStrategy === \"per_tool_use\" && \"A checkpoint will be created after each tool use\"}\n {checkpointStrategy === \"smart\" && \"Checkpoints will be created after destructive operations\"}\n \n Total checkpoints: {totalCheckpoints}\n \n Remove old checkpoints, keeping only the most recent {keepCount}\n {error} {queuedPrompt.prompt} \n Edit project-specific Claude Code system prompt\n {file.relative_path} {error} \n Select which version of Claude to use\n \n {isEditMode ? \"Update your Claude Code agent configuration\" : \"Configure a new Claude Code agent\"}\n \n This will be used as the default task placeholder when executing the agent\n \n Define the behavior and capabilities of your Claude Code agent\n \n An error occurred while rendering this component.\n \n โโ Navigate โข Enter Select โข โ Enter Directory โข โ Go Back โข Esc Close\n {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} Tool name pattern (regex supported). Leave empty to match all tools. No commands added yet {warning} {warning} \n Configure shell commands to execute at various points in Claude Code's lifecycle.\n {scope === 'local' && ' These settings are not committed to version control.'}\n \n You have unsaved changes. Click Save to persist them.\n Validation Errors: โข {error} Security Warnings: โข {warning} \n {EVENT_INFO[event].description}\n No hooks configured for this event \n Configure a new Model Context Protocol server\n \n A unique name to identify this server\n \n The command to execute the server\n \n Space-separated command arguments\n \n A unique name to identify this server\n \n The SSE endpoint URL\n โข Postgres: /path/to/postgres-mcp-server --connection-string \"postgresql://...\" โข Weather API: /usr/local/bin/weather-cli --api-key ABC123 โข SSE Server: https://api.example.com/mcp/stream \n Import MCP servers from other sources or export your configuration\n \n Choose where to save imported servers from JSON files\n \n Automatically imports all MCP servers from Claude Desktop. Installs to user scope (available across all projects).\n \n Import server configuration from a JSON file\n \n Export your MCP server configuration\n \n Start Claude Code as an MCP server that other applications can connect to\n Single server: Multiple servers (.mcp.json format): \n Manage Model Context Protocol servers\n \n {server.command}\n \n {server.url}\n Command \n {server.command}\n Arguments URL \n {server.url}\n Environment Variables \n {servers.length} server{servers.length !== 1 ? \"s\" : \"\"} configured\n No MCP servers configured \n Add a server to get started with Model Context Protocol\n \n Edit your Claude Code system prompt\n \n Select a project to start working with Claude Code\n \n Open a project to get started with Claude Code\n \n Custom commands that are specific to this project. These commands are stored in\n \n These hooks apply to all users working on this project. They are stored in\n \n These hooks only apply to your machine. They are stored in\n \n Local settings file is not in .gitignore\n \n Configure proxy settings for Claude API requests\n \n Use proxy for all Claude API requests\n \n Comma-separated list of hosts that should bypass the proxy\n \n Proxy URL to use for all protocols if protocol-specific proxies are not set\n \n {sessionId.substring(0, 20)}...\n \n {session.project_path}\n \n {projectPath}\n \n No sessions found for this project\n \n \n\n {/* Global Modals */}\n {showNFO && \n \n );\n};\n"
},
{
"path": "src/components/CheckpointSettings.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { \n Wrench,\n Save,\n Trash2,\n HardDrive,\n AlertCircle,\n Loader2\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { SelectComponent, type SelectOption } from \"@/components/ui/select\";\nimport { Input } from \"@/components/ui/input\";\nimport { Card } from \"@/components/ui/card\";\nimport { api, type CheckpointStrategy } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\n\ninterface CheckpointSettingsProps {\n sessionId: string;\n projectId: string;\n projectPath: string;\n onClose?: () => void;\n className?: string;\n}\n\n/**\n * CheckpointSettings component for managing checkpoint configuration\n * \n * @example\n * \n {/* Header */}\n \n\n {/* Toast Notification */}\n \n \n \n\n {/* Error display */}\n {error && (\n \n \n \n \n CC Agents
\n \n \n \n \n \n {loading ? (\n \n\n {/* Execution History */}\n {!loading && agents.length > 0 && (\n \n \n \n ) : agents.length === 0 ? (\n \n \n ) : (\n <>\n No agents yet
\n \n \n\n {/* Pagination */}\n {totalPages > 1 && (\n \n {renderIcon(agent.icon)}\n \n \n {agent.name}\n
\n \n \n )}\n \n )}\n \n \n )}\n \n \n \n {runsLoading ? (\n Recent Executions
\n \n \n \n ) : (\n \n \n\n {/* Experimental Feature Warning */}\n \n \n \n \n \n \n Checkpoint Settings
\n \n \n\n {error && (\n \n \n \n \n \n \n \n )}\n\n {successMessage && (\n \n \n\n {/* Checkpoint strategy */}\n \n \n \n \n \n \n\n {/* Save button */}\n \n \n\n {/* Cleanup settings */}\n \n \n \n \n \n \n \n \n \n \n {/* Header */}\n \n\n {/* Error display */}\n {error && (\n \n {showPreview ? (\n \n }\n right={\n \n \n )}\n \n \n\n {/* Fork Dialog */}\n \n\n {/* Settings Dialog */}\n {showSettings && effectiveSession && (\n \n )}\n\n {/* Slash Commands Settings Dialog */}\n {showSlashCommandsSettings && (\n \n )}\n \n \n\n {/* Main Content Area */}\n \n\n {/* Floating Prompt Input - Always visible */}\n \n {showPreview ? (\n // Split pane layout when preview is active\n \n }\n right={\n \n {projectPathInput}\n {messagesList}\n \n {isLoading && messages.length === 0 && (\n \n )}\n \n \n )}\n \n \n \n {session ? \"Loading session history...\" : \"Initializing Claude Code...\"}\n \n \n \n \n \n )}\n \n \n {!queuedPromptsCollapsed && queuedPrompts.map((queuedPrompt, index) => (\n \n Queued Prompts ({queuedPrompts.length})\n \n \n \n \n #{index + 1}\n \n {queuedPrompt.model === \"opus\" ? \"Opus\" : \"Sonnet\"}\n \n \n \n \n \n )}\n\n \n \n\n {/* Token Counter - positioned under the Send button */}\n {totalTokens > 0 && (\n \n \n }\n open={copyPopoverOpen}\n onOpenChange={setCopyPopoverOpen}\n side=\"top\"\n align=\"end\"\n />\n )}\n \n \n )}\n \n \n \n \n \n \n \n \n {/* Timeline Header */}\n \n \n )}\n \n \n \n {/* Timeline Content */}\n Session Timeline
\n \n \n \n \n );\n}; "
},
{
"path": "src/components/ClaudeMemoriesDropdown.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ChevronDown, Edit2, FileText, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { api, type ClaudeMdFile } from \"@/lib/api\";\nimport { formatUnixTimestamp } from \"@/lib/date-utils\";\n\ninterface ClaudeMemoriesDropdownProps {\n /**\n * The project path to search for CLAUDE.md files\n */\n projectPath: string;\n /**\n * Callback when an edit button is clicked\n */\n onEditFile: (file: ClaudeMdFile) => void;\n /**\n * Optional className for styling\n */\n className?: string;\n}\n\n/**\n * ClaudeMemoriesDropdown component - Shows all CLAUDE.md files in a project\n * \n * @example\n * \n {/* Header */}\n \n \n {/* Toast Notification */}\n \n \n \n \n \n {file.relative_path}
\n \n {loading ? (\n \n \n \n ) : (\n \n \n )}\n \n \n );\n}; "
},
{
"path": "src/components/ClaudeVersionSelector.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { api, type ClaudeInstallation } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckCircle, HardDrive, Settings, Terminal, Info } from \"lucide-react\";\n\ninterface ClaudeVersionSelectorProps {\n /**\n * Currently selected installation path\n */\n selectedPath?: string | null;\n /**\n * Callback when an installation is selected\n */\n onSelect: (installation: ClaudeInstallation) => void;\n /**\n * Optional className for styling\n */\n className?: string;\n /**\n * Whether to show the save button\n */\n showSaveButton?: boolean;\n /**\n * Callback when save is clicked\n */\n onSave?: () => void;\n /**\n * Whether save is in progress\n */\n isSaving?: boolean;\n /**\n * Simplified mode for cleaner UI\n */\n simplified?: boolean;\n}\n\n/**\n * ClaudeVersionSelector component for selecting Claude Code installations\n * Supports system installations and user preferences\n * \n * @example\n * \n \n \n {loading ? (\n \n \n )}\n \n \n ) : error ? (\n {error}\n ) : files.length === 0 ? (\n \n No CLAUDE.md files found in this project\n \n ) : (\n \n {files.map((file, index) => (\n \n )}\n \n \n \n \n {formatFileSize(file.size)}\n \n \n Modified {formatUnixTimestamp(file.modified)}\n \n \n \n \n \n );\n }\n return (\n \n \n \n \n \n \n \n \n \n );\n }\n return (\n \n \n {error}\n \n \n \n );\n }\n\n // Original card-based UI\n return (\n \n \n \n \n \n {selectedInstallation && (\n \n \n \n {selectedInstallation && (\n \n \n )}\n \n Path: \n {selectedInstallation.path}\n \n \n \n \n\n {/* Installation Details */}\n {selectedInstallation && (\n \n \n )}\n\n {/* Save Button */}\n {showSaveButton && (\n \n )}\n \n Selected Installation\n \n \n \n Path: {selectedInstallation.path}\n Source: {selectedInstallation.source}\n {selectedInstallation.version && (\n Version: {selectedInstallation.version}\n )}\n \n {/* Header */}\n \n \n {/* Toast Notification */}\n \n \n \n {/* Error display */}\n {error && (\n \n \n \n \n \n \n \n \n {isEditMode ? \"Edit Agent\" : \"Create New Agent\"}\n
\n \n \n \n {/* Basic Information */}\n \n \n \n Basic Information
\n \n \n\n {/* Model Selection */}\n \n \n \n \n \n \n \n \n {(() => {\n const Icon = ICON_MAP[selectedIcon] || ICON_MAP.bot;\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n Claude 4 Sonnet\n Faster, efficient for most tasks\n \n \n \n \n \n Claude 4 Opus\n More capable, better for complex tasks\n Configuration
\n \n \n \n \n \n System Prompt
\n \n \n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {/* Left side - macOS Traffic Light buttons */}\n \n \n \n\n {/* Center - Title (hidden) */}\n {/* \n {/* Close button */}\n \n \n {title}\n */}\n\n {/* Right side - Navigation icons with improved spacing */}\n \n {/* Primary actions group */}\n \n \n {onAgentsClick && (\n \n\n {/* Visual separator */}\n \n\n {/* Secondary actions group */}\n \n {onSettingsClick && (\n \n \n \n \n \n )}\n \n {onClaudeClick && (\n \n \n \n );\n }\n\n return this.props.children;\n }\n} "
},
{
"path": "src/components/ExecutionControlBar.tsx",
"content": "import React from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { StopCircle, Clock, Hash } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ExecutionControlBarProps {\n isExecuting: boolean;\n onStop: () => void;\n totalTokens?: number;\n elapsedTime?: number; // in seconds\n className?: string;\n}\n\n/**\n * Floating control bar shown during agent execution\n * Provides stop functionality and real-time statistics\n */\nexport const ExecutionControlBar: React.FC\n \n \n \n Something went wrong
\n \n \n )}\n \n Error details\n
\n \n {this.state.error.message}\n \n \n \n \n\n {/* Status text */}\n Executing...\n\n {/* Divider */}\n \n\n {/* Stats */}\n \n {/* Time */}\n \n\n {/* Divider */}\n \n\n {/* Stop button */}\n \n \n\n {/* Tokens */}\n \n \n \n \n\n {/* Current path */}\n \n \n\n \n \n\n {/* File list with virtual scrolling */}\n \n {currentPath}\n \n \n {isLoading && (\n \n );\n })}\n \n )}\n \n\n {/* Footer */}\n \n \n )}\n\n {error && (\n Loading...\n \n \n )}\n\n {!isLoading && !error && displayEntries.length === 0 && (\n {error}\n \n \n )}\n\n {displayEntries.length > 0 && (\n \n \n \n );\n});"
},
{
"path": "src/components/FilePicker.tsx",
"content": "import React, { useState, useEffect, useRef } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Button } from \"@/components/ui/button\";\nimport { api } from \"@/lib/api\";\nimport { \n X, \n Folder, \n File, \n ArrowLeft,\n FileCode,\n FileText,\n FileImage,\n Search,\n ChevronRight\n} from \"lucide-react\";\nimport type { FileEntry } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\n\n// Global caches that persist across component instances\nconst globalDirectoryCache = new Map\n {displayEntries.length} {displayEntries.length === 1 ? 'item' : 'items'}\n \n {allowDirectorySelection && (\n \n Shift+Enter to select directory\n \n )}\n \n \n\n {/* File List */}\n \n \n \n \n \n {/* Show loading only if no cached data */}\n {isLoading && displayEntries.length === 0 && (\n \n\n {/* Footer */}\n \n Loading...\n \n )}\n\n {/* Show subtle indicator when displaying cached data while fetching fresh */}\n {isShowingCached && isLoading && displayEntries.length > 0 && (\n \n updating...\n \n )}\n\n {error && displayEntries.length === 0 && (\n \n {error}\n \n )}\n\n {!isLoading && !error && displayEntries.length === 0 && (\n \n \n )}\n\n {displayEntries.length > 0 && (\n \n {displayEntries.map((entry, index) => {\n const Icon = getFileIcon(entry);\n const isSearching = searchQuery.trim() !== '';\n const isSelected = index === selectedIndex;\n \n return (\n \n )}\n \n \n \n );\n}; "
},
{
"path": "src/components/FloatingPromptInput.tsx",
"content": "import React, { useState, useRef, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Send,\n Maximize2,\n Minimize2,\n ChevronUp,\n Sparkles,\n Zap,\n Square,\n Brain,\n Lightbulb,\n Cpu,\n Rocket,\n \n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Popover } from \"@/components/ui/popover\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { TooltipProvider, TooltipSimple, Tooltip, TooltipTrigger, TooltipContent } from \"@/components/ui/tooltip-modern\";\nimport { FilePicker } from \"./FilePicker\";\nimport { SlashCommandPicker } from \"./SlashCommandPicker\";\nimport { ImagePreview } from \"./ImagePreview\";\nimport { type FileEntry, type SlashCommand } from \"@/lib/api\";\n\n// Conditional import for Tauri webview window\nlet tauriGetCurrentWebviewWindow: any;\ntry {\n if (typeof window !== 'undefined' && window.__TAURI__) {\n tauriGetCurrentWebviewWindow = require(\"@tauri-apps/api/webviewWindow\").getCurrentWebviewWindow;\n }\n} catch (e) {\n console.log('[FloatingPromptInput] Tauri webview API not available, using web mode');\n}\n\n// Web-compatible replacement\nconst getCurrentWebviewWindow = tauriGetCurrentWebviewWindow || (() => ({ listen: () => Promise.resolve(() => {}) }));\n\ninterface FloatingPromptInputProps {\n /**\n * Callback when prompt is sent\n */\n onSend: (prompt: string, model: \"sonnet\" | \"opus\") => void;\n /**\n * Whether the input is loading\n */\n isLoading?: boolean;\n /**\n * Whether the input is disabled\n */\n disabled?: boolean;\n /**\n * Default model to select\n */\n defaultModel?: \"sonnet\" | \"opus\";\n /**\n * Project path for file picker\n */\n projectPath?: string;\n /**\n * Optional className for styling\n */\n className?: string;\n /**\n * Callback when cancel is clicked (only during loading)\n */\n onCancel?: () => void;\n /**\n * Extra menu items to display in the prompt bar\n */\n extraMenuItems?: React.ReactNode;\n}\n\nexport interface FloatingPromptInputRef {\n addImage: (imagePath: string) => void;\n}\n\n/**\n * Thinking mode type definition\n */\ntype ThinkingMode = \"auto\" | \"think\" | \"think_hard\" | \"think_harder\" | \"ultrathink\";\n\n/**\n * Thinking mode configuration\n */\ntype ThinkingModeConfig = {\n id: ThinkingMode;\n name: string;\n description: string;\n level: number; // 0-4 for visual indicator\n phrase?: string; // The phrase to append\n icon: React.ReactNode;\n color: string;\n shortName: string;\n};\n\nconst THINKING_MODES: ThinkingModeConfig[] = [\n {\n id: \"auto\",\n name: \"Auto\",\n description: \"Let Claude decide\",\n level: 0,\n icon: \n {[1, 2, 3, 4].map((i) => (\n \n );\n};\n\ntype Model = {\n id: \"sonnet\" | \"opus\";\n name: string;\n description: string;\n icon: React.ReactNode;\n shortName: string;\n color: string;\n};\n\nconst MODELS: Model[] = [\n {\n id: \"sonnet\",\n name: \"Claude 4 Sonnet\",\n description: \"Faster, efficient for most tasks\",\n icon: \n \n\n {/* Image previews in expanded mode */}\n {embeddedImages.length > 0 && (\n Compose your prompt
\n \n \n \n \n )}\n \n \n\n \n Model:\n \n\n \n {MODELS.map((model) => (\n \n }\n open={modelPickerOpen}\n onOpenChange={setModelPickerOpen}\n align=\"start\"\n side=\"top\"\n />\n \n \n {model.icon}\n \n \n \n \n \n ))}\n {model.name}\n \n {model.description}\n \n \n Thinking:\n \n \n {THINKING_MODES.map((mode) => (\n \n }\n open={thinkingModePickerOpen}\n onOpenChange={setThinkingModePickerOpen}\n align=\"start\"\n side=\"top\"\n />\n \n \n \n {mode.name}\n \n \n {mode.description}\n \n \n {/* Image previews */}\n {embeddedImages.length > 0 && (\n \n \n \n \n \n \n {/* Model & Thinking Mode Selectors - Left side, fixed at bottom */}\n \n \n \n\n {/* Prompt Input - Center */}\n \n {MODELS.map((model) => (\n \n }\n open={modelPickerOpen}\n onOpenChange={setModelPickerOpen}\n align=\"start\"\n side=\"top\"\n />\n\n \n \n {model.icon}\n \n \n \n \n \n ))}\n {model.name}\n \n {model.description}\n \n \n {THINKING_MODES.map((mode) => (\n \n }\n open={thinkingModePickerOpen}\n onOpenChange={setThinkingModePickerOpen}\n align=\"start\"\n side=\"top\"\n />\n\n \n \n \n {mode.name}\n \n \n {mode.description}\n \n \n \n\n {/* Extra menu items - Right side, fixed at bottom */}\n {extraMenuItems && (\n \n \n\n {/* File Picker */}\n \n {extraMenuItems}\n \n )}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )}\n \n \n {!readOnly && (\n \n \n {matcher.hooks.length === 0 ? (\n \n {matcher.hooks.map((hook) => (\n \n )}\n \n \n ))}\n \n \n \n {/* Show warnings for this command */}\n {(() => {\n const warnings = HooksManager.checkDangerousPatterns(hook.command || '');\n return warnings.length > 0 && (\n \n \n \n \n \n \n \n {!readOnly && (\n \n \n );\n })()}\n \n {warnings.map((warning, i) => (\n \n \n \n \n {/* Show warnings for this command */}\n {(() => {\n const warnings = HooksManager.checkDangerousPatterns(command.command || '');\n return warnings.length > 0 && (\n \n \n \n \n \n \n \n {!readOnly && (\n \n \n );\n })()}\n \n {warnings.map((warning, i) => (\n \n \n {/* Loading State */}\n {isLoading && (\n \n );\n}; \n"
},
{
"path": "src/components/IconPicker.tsx",
"content": "import React, { useState, useMemo } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n // Interface & Navigation\n Home,\n Menu,\n Settings,\n User,\n Users,\n LogOut,\n Bell,\n Bookmark,\n Calendar,\n Clock,\n Eye,\n EyeOff,\n Hash,\n Heart,\n Info,\n Link,\n Lock,\n Map,\n MessageSquare,\n Mic,\n Music,\n Paperclip,\n Phone,\n Pin,\n Plus,\n Save,\n Share,\n Star,\n Tag,\n Trash,\n Upload,\n Download,\n Edit,\n Copy,\n // Development & Tech\n Bot,\n Brain,\n Code,\n Terminal,\n Cpu,\n Database,\n GitBranch,\n Github,\n Globe,\n HardDrive,\n Laptop,\n Monitor,\n Server,\n Wifi,\n Cloud,\n Command,\n FileCode,\n FileJson,\n Folder,\n FolderOpen,\n Bug,\n Coffee,\n // Business & Finance\n Briefcase,\n Building,\n CreditCard,\n DollarSign,\n TrendingUp,\n TrendingDown,\n BarChart,\n PieChart,\n Calculator,\n Receipt,\n Wallet,\n // Creative & Design\n Palette,\n Brush,\n Camera,\n Film,\n Image,\n Layers,\n Layout,\n PenTool,\n Scissors,\n Type,\n Zap,\n Sparkles,\n Wand2,\n // Nature & Science\n Beaker,\n Atom,\n Dna,\n Flame,\n Leaf,\n Mountain,\n Sun,\n Moon,\n CloudRain,\n Snowflake,\n TreePine,\n Waves,\n Wind,\n // Gaming & Entertainment\n Gamepad2,\n Dice1,\n Trophy,\n Medal,\n Crown,\n Rocket,\n Target,\n Swords,\n Shield,\n // Communication\n Mail,\n Send,\n MessageCircle,\n Video,\n Voicemail,\n Radio,\n Podcast,\n Megaphone,\n // Miscellaneous\n Activity,\n Anchor,\n Award,\n Battery,\n Bluetooth,\n Compass,\n Crosshair,\n Flag,\n Flashlight,\n Gift,\n Headphones,\n Key,\n Lightbulb,\n Package,\n Puzzle,\n Search as SearchIcon,\n Smile,\n ThumbsUp,\n Umbrella,\n Watch,\n Wrench,\n type LucideIcon,\n} from \"lucide-react\";\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from \"@/components/ui/dialog\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Icon categories for better organization\n */\nconst ICON_CATEGORIES = {\n \"Interface & Navigation\": [\n { name: \"home\", icon: Home },\n { name: \"menu\", icon: Menu },\n { name: \"settings\", icon: Settings },\n { name: \"user\", icon: User },\n { name: \"users\", icon: Users },\n { name: \"log-out\", icon: LogOut },\n { name: \"bell\", icon: Bell },\n { name: \"bookmark\", icon: Bookmark },\n { name: \"calendar\", icon: Calendar },\n { name: \"clock\", icon: Clock },\n { name: \"eye\", icon: Eye },\n { name: \"eye-off\", icon: EyeOff },\n { name: \"hash\", icon: Hash },\n { name: \"heart\", icon: Heart },\n { name: \"info\", icon: Info },\n { name: \"link\", icon: Link },\n { name: \"lock\", icon: Lock },\n { name: \"map\", icon: Map },\n { name: \"message-square\", icon: MessageSquare },\n { name: \"mic\", icon: Mic },\n { name: \"music\", icon: Music },\n { name: \"paperclip\", icon: Paperclip },\n { name: \"phone\", icon: Phone },\n { name: \"pin\", icon: Pin },\n { name: \"plus\", icon: Plus },\n { name: \"save\", icon: Save },\n { name: \"share\", icon: Share },\n { name: \"star\", icon: Star },\n { name: \"tag\", icon: Tag },\n { name: \"trash\", icon: Trash },\n { name: \"upload\", icon: Upload },\n { name: \"download\", icon: Download },\n { name: \"edit\", icon: Edit },\n { name: \"copy\", icon: Copy },\n ],\n \"Development & Tech\": [\n { name: \"bot\", icon: Bot },\n { name: \"brain\", icon: Brain },\n { name: \"code\", icon: Code },\n { name: \"terminal\", icon: Terminal },\n { name: \"cpu\", icon: Cpu },\n { name: \"database\", icon: Database },\n { name: \"git-branch\", icon: GitBranch },\n { name: \"github\", icon: Github },\n { name: \"globe\", icon: Globe },\n { name: \"hard-drive\", icon: HardDrive },\n { name: \"laptop\", icon: Laptop },\n { name: \"monitor\", icon: Monitor },\n { name: \"server\", icon: Server },\n { name: \"wifi\", icon: Wifi },\n { name: \"cloud\", icon: Cloud },\n { name: \"command\", icon: Command },\n { name: \"file-code\", icon: FileCode },\n { name: \"file-json\", icon: FileJson },\n { name: \"folder\", icon: Folder },\n { name: \"folder-open\", icon: FolderOpen },\n { name: \"bug\", icon: Bug },\n { name: \"coffee\", icon: Coffee },\n ],\n \"Business & Finance\": [\n { name: \"briefcase\", icon: Briefcase },\n { name: \"building\", icon: Building },\n { name: \"credit-card\", icon: CreditCard },\n { name: \"dollar-sign\", icon: DollarSign },\n { name: \"trending-up\", icon: TrendingUp },\n { name: \"trending-down\", icon: TrendingDown },\n { name: \"bar-chart\", icon: BarChart },\n { name: \"pie-chart\", icon: PieChart },\n { name: \"calculator\", icon: Calculator },\n { name: \"receipt\", icon: Receipt },\n { name: \"wallet\", icon: Wallet },\n ],\n \"Creative & Design\": [\n { name: \"palette\", icon: Palette },\n { name: \"brush\", icon: Brush },\n { name: \"camera\", icon: Camera },\n { name: \"film\", icon: Film },\n { name: \"image\", icon: Image },\n { name: \"layers\", icon: Layers },\n { name: \"layout\", icon: Layout },\n { name: \"pen-tool\", icon: PenTool },\n { name: \"scissors\", icon: Scissors },\n { name: \"type\", icon: Type },\n { name: \"zap\", icon: Zap },\n { name: \"sparkles\", icon: Sparkles },\n { name: \"wand-2\", icon: Wand2 },\n ],\n \"Nature & Science\": [\n { name: \"beaker\", icon: Beaker },\n { name: \"atom\", icon: Atom },\n { name: \"dna\", icon: Dna },\n { name: \"flame\", icon: Flame },\n { name: \"leaf\", icon: Leaf },\n { name: \"mountain\", icon: Mountain },\n { name: \"sun\", icon: Sun },\n { name: \"moon\", icon: Moon },\n { name: \"cloud-rain\", icon: CloudRain },\n { name: \"snowflake\", icon: Snowflake },\n { name: \"tree-pine\", icon: TreePine },\n { name: \"waves\", icon: Waves },\n { name: \"wind\", icon: Wind },\n ],\n \"Gaming & Entertainment\": [\n { name: \"gamepad-2\", icon: Gamepad2 },\n { name: \"dice-1\", icon: Dice1 },\n { name: \"trophy\", icon: Trophy },\n { name: \"medal\", icon: Medal },\n { name: \"crown\", icon: Crown },\n { name: \"rocket\", icon: Rocket },\n { name: \"target\", icon: Target },\n { name: \"swords\", icon: Swords },\n { name: \"shield\", icon: Shield },\n ],\n \"Communication\": [\n { name: \"mail\", icon: Mail },\n { name: \"send\", icon: Send },\n { name: \"message-circle\", icon: MessageCircle },\n { name: \"video\", icon: Video },\n { name: \"voicemail\", icon: Voicemail },\n { name: \"radio\", icon: Radio },\n { name: \"podcast\", icon: Podcast },\n { name: \"megaphone\", icon: Megaphone },\n ],\n \"Miscellaneous\": [\n { name: \"activity\", icon: Activity },\n { name: \"anchor\", icon: Anchor },\n { name: \"award\", icon: Award },\n { name: \"battery\", icon: Battery },\n { name: \"bluetooth\", icon: Bluetooth },\n { name: \"compass\", icon: Compass },\n { name: \"crosshair\", icon: Crosshair },\n { name: \"flag\", icon: Flag },\n { name: \"flashlight\", icon: Flashlight },\n { name: \"gift\", icon: Gift },\n { name: \"headphones\", icon: Headphones },\n { name: \"key\", icon: Key },\n { name: \"lightbulb\", icon: Lightbulb },\n { name: \"package\", icon: Package },\n { name: \"puzzle\", icon: Puzzle },\n { name: \"search\", icon: SearchIcon },\n { name: \"smile\", icon: Smile },\n { name: \"thumbs-up\", icon: ThumbsUp },\n { name: \"umbrella\", icon: Umbrella },\n { name: \"watch\", icon: Watch },\n { name: \"wrench\", icon: Wrench },\n ],\n} as const;\n\ntype IconCategory = typeof ICON_CATEGORIES[keyof typeof ICON_CATEGORIES];\ntype IconItem = IconCategory[number];\n\ninterface IconPickerProps {\n /**\n * Currently selected icon name\n */\n value: string;\n /**\n * Callback when an icon is selected\n */\n onSelect: (iconName: string) => void;\n /**\n * Whether the picker is open\n */\n isOpen: boolean;\n /**\n * Callback to close the picker\n */\n onClose: () => void;\n}\n\n/**\n * Icon picker component with search and categories\n * Similar to Notion's icon picker interface\n */\nexport const IconPicker: React.FC\n \n )}\n \n {/* Error State */}\n {loadError && !isLoading && (\n \n \n )}\n \n {/* Main Content */}\n {!isLoading && (\n <>\n {/* Header */}\n \n \n\n {/* Validation Messages */}\n {validationErrors.length > 0 && (\n \n \n Hooks Configuration
\n \n \n \n \n )}\n\n {validationWarnings.length > 0 && (\n \n \n )}\n\n {/* Event Tabs */}\n \n \n\n {items.length === 0 ? (\n \n {isMatcherEvent \n ? (items as EditableHookMatcher[]).map(matcher => renderMatcher(event, matcher))\n : (items as EditableHookCommand[]).map(command => renderDirectCommand(event, command))\n }\n \n {!readOnly && (\n \n )}\n \n \n\n {/* Remove button */}\n \n Error\n \n ) : (\n \n \n \n +{images.length - 10}\n \n )}\n \n\n {/* Full-size preview dialog */}\n \n \n );\n}; \n"
},
{
"path": "src/components/MCPAddServer.tsx",
"content": "import React, { useState } from \"react\";\nimport { Plus, Terminal, Globe, Trash2, Info, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { SelectComponent } from \"@/components/ui/select\";\nimport { Card } from \"@/components/ui/card\";\nimport { api } from \"@/lib/api\";\nimport { useTrackEvent } from \"@/hooks\";\n\ninterface MCPAddServerProps {\n /**\n * Callback when a server is successfully added\n */\n onServerAdded: () => void;\n /**\n * Callback for error messages\n */\n onError: (message: string) => void;\n}\n\ninterface EnvironmentVariable {\n id: string;\n key: string;\n value: string;\n}\n\n/**\n * Component for adding new MCP servers\n * Supports both stdio and SSE transport types\n */\nexport const MCPAddServer: React.FC\n \n );\n };\n\n return (\n \n \n \n \n {envVars.length > 0 && (\n \n {envVars.map((envVar) => (\n \n )}\n \n \n ))}\n \n \n );\n}; "
},
{
"path": "src/components/MCPImportExport.tsx",
"content": "import React, { useState } from \"react\";\nimport { Download, Upload, FileText, Loader2, Info, Network, Settings2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Label } from \"@/components/ui/label\";\nimport { SelectComponent } from \"@/components/ui/select\";\nimport { api } from \"@/lib/api\";\n\ninterface MCPImportExportProps {\n /**\n * Callback when import is completed\n */\n onImportCompleted: (imported: number, failed: number) => void;\n /**\n * Callback for error messages\n */\n onError: (message: string) => void;\n}\n\n/**\n * Component for importing and exporting MCP server configurations\n */\nexport const MCPImportExport: React.FC\n \n\n Add MCP Server
\n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n {renderEnvVars(\"stdio\", stdioEnvVars)}\n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n {renderEnvVars(\"sse\", sseEnvVars)}\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}; "
},
{
"path": "src/components/MCPManager.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { AlertCircle, Loader2 } from \"lucide-react\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Card } from \"@/components/ui/card\";\nimport { Toast, ToastContainer } from \"@/components/ui/toast\";\nimport { api, type MCPServer } from \"@/lib/api\";\nimport { MCPServerList } from \"./MCPServerList\";\nimport { MCPAddServer } from \"./MCPAddServer\";\nimport { MCPImportExport } from \"./MCPImportExport\";\n\ninterface MCPManagerProps {\n /**\n * Callback to go back to the main view\n */\n onBack: () => void;\n /**\n * Optional className for styling\n */\n className?: string;\n}\n\n/**\n * Main component for managing MCP (Model Context Protocol) servers\n * Provides a comprehensive UI for adding, configuring, and managing MCP servers\n */\nexport const MCPManager: React.FC\n \n\n Import & Export
\n \n {/* Import Scope Selection */}\n \n\n {/* Info Box */}\n \n \n \n \n \n \n \n \n \n \n \n \n Import from Claude Desktop
\n \n \n \n \n \n \n \n \n Import from JSON
\n \n \n \n \n \n \n \n \n \n \n Export Configuration
\n \n \n \n \n \n \n \n \n Use Claude Code as MCP Server
\n \n \n \n \n \n \n \n \n \n{`{\n \"type\": \"stdio\",\n \"command\": \"/path/to/server\",\n \"args\": [\"--arg1\", \"value\"],\n \"env\": { \"KEY\": \"value\" }\n}`}\n \n \n \n \n{`{\n \"mcpServers\": {\n \"server1\": {\n \"command\": \"/path/to/server1\",\n \"args\": [],\n \"env\": {}\n },\n \"server2\": {\n \"command\": \"/path/to/server2\",\n \"args\": [\"--port\", \"8080\"],\n \"env\": { \"API_KEY\": \"...\" }\n }\n }\n}`}\n \n \n \n );\n}; "
},
{
"path": "src/components/MCPServerList.tsx",
"content": "import React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { \n Network, \n Globe, \n Terminal, \n Trash2, \n Play, \n CheckCircle,\n Loader2,\n RefreshCw,\n FolderOpen,\n User,\n FileText,\n ChevronDown,\n ChevronUp,\n Copy\n} from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { api, type MCPServer } from \"@/lib/api\";\nimport { useTrackEvent } from \"@/hooks\";\n\ninterface MCPServerListProps {\n /**\n * List of MCP servers to display\n */\n servers: MCPServer[];\n /**\n * Whether the list is loading\n */\n loading: boolean;\n /**\n * Callback when a server is removed\n */\n onServerRemoved: (name: string) => void;\n /**\n * Callback to refresh the server list\n */\n onRefresh: () => void;\n}\n\n/**\n * Component for displaying a list of MCP servers\n * Shows servers grouped by scope with status indicators\n */\nexport const MCPServerList: React.FC\n {/* Header */}\n \n\n {/* Toast Notifications */}\n \n \n\n {/* Error Display */}\n \n \n \n \n MCP Servers
\n \n \n ) : (\n \n \n )}\n \n \n \n );\n };\n\n if (loading) {\n return (\n \n \n \n {/* Expanded Details */}\n {isExpanded && (\n \n \n \n \n \n \n {server.command && !isExpanded && (\n \n {getTransportIcon(server.transport)}\n \n {server.name}
\n {server.status?.running && (\n \n \n )}\n \n {server.transport === \"sse\" && server.url && !isExpanded && (\n \n \n )}\n \n {Object.keys(server.env).length > 0 && !isExpanded && (\n \n Environment variables: {Object.keys(server.env).length}\n \n )}\n \n \n \n \n )}\n \n {server.args && server.args.length > 0 && (\n \n \n \n \n \n \n )}\n \n {server.transport === \"sse\" && server.url && (\n \n {server.args.map((arg, idx) => (\n \n \n [{idx}]\n {arg}\n \n ))}\n \n \n )}\n \n {Object.keys(server.env).length > 0 && (\n \n \n )}\n \n )}\n \n {Object.entries(server.env).map(([key, value]) => (\n \n \n {key}\n =\n {value}\n \n ))}\n \n \n );\n }\n\n return (\n \n {/* Header */}\n \n );\n}; "
},
{
"path": "src/components/MarkdownEditor.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport MDEditor from \"@uiw/react-md-editor\";\nimport { motion } from \"framer-motion\";\nimport { Save, Loader2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Toast, ToastContainer } from \"@/components/ui/toast\";\nimport { api } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\n\ninterface MarkdownEditorProps {\n /**\n * Callback to go back to the main view\n */\n onBack: () => void;\n /**\n * Optional className for styling\n */\n className?: string;\n}\n\n/**\n * MarkdownEditor component for editing the CLAUDE.md system prompt\n * \n * @example\n * \n \n\n {/* Server List */}\n {servers.length === 0 ? (\n \n \n Configured Servers
\n \n \n ) : (\n \n \n \n {Object.entries(serversByScope).map(([scope, scopeServers]) => (\n \n )}\n \n \n ))}\n \n {getScopeIcon(scope)}\n {getScopeDisplayName(scope)}\n ({scopeServers.length})\n \n \n {scopeServers.map(renderServerItem)}\n \n \n \n );\n}; "
},
{
"path": "src/components/NFOCredits.tsx",
"content": "import React, { useEffect, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { X, Volume2, VolumeX, Github } from \"lucide-react\";\nimport { Card } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { openUrl } from \"@tauri-apps/plugin-opener\";\nimport asteriskLogo from \"@/assets/nfo/asterisk-logo.png\";\nimport keygennMusic from \"@/assets/nfo/opcode-nfo.ogg\";\n\ninterface NFOCreditsProps {\n /**\n * Callback when the NFO window is closed\n */\n onClose: () => void;\n}\n\n/**\n * NFO Credits component - Displays a keygen/crack style credits window\n * with auto-scrolling text, retro fonts, and background music\n * \n * @example\n * \n {/* Header */}\n \n \n {/* Toast Notification */}\n \n \n \n {/* Error display */}\n {error && (\n \n \n \n \n CLAUDE.md
\n \n {loading ? (\n \n \n \n ) : (\n \n \n )}\n \n \n \n {/* NFO Content */}\n \n \n \n opcode.NFO\n \n \n \n \n {/* Asterisk Logo Section (Fixed at top) */}\n \n \n \n \n {/* Scrolling Credits */}\n \n \n
\n A strategic project by Asterisk\n \n \n \n \n {/* Subtle Scanlines Effect */}\n \n {creditsContent.map((item, index) => {\n switch (item.type) {\n case \"header\":\n return (\n \n \n {item.text}\n \n );\n case \"subheader\":\n return (\n \n {item.text}\n \n );\n case \"section\":\n return (\n \n {item.title}\n \n );\n case \"credit\":\n return (\n \n {item.role}:\n {item.name}\n \n );\n case \"text\":\n return (\n \n {item.content}\n \n );\n case \"ascii\":\n return (\n \n {item.content}\n \n );\n case \"spacer\":\n return ;\n default:\n return null;\n }\n })}\n \n \n \n \n \n );\n}; \n"
},
{
"path": "src/components/ProjectSettings.tsx",
"content": "/**\n * ProjectSettings component for managing project-specific hooks configuration\n */\n\nimport React, { useState, useEffect } from 'react';\nimport { HooksEditor } from '@/components/HooksEditor';\nimport { SlashCommandsManager } from '@/components/SlashCommandsManager';\nimport { api } from '@/lib/api';\nimport { \n AlertTriangle, \n ArrowLeft, \n Settings,\n FolderOpen,\n GitBranch,\n Shield,\n Command\n} from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card } from '@/components/ui/card';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport { cn } from '@/lib/utils';\nimport { Toast, ToastContainer } from '@/components/ui/toast';\nimport type { Project } from '@/lib/api';\n\ninterface ProjectSettingsProps {\n project: Project;\n onBack: () => void;\n className?: string;\n}\n\nexport const ProjectSettings: React.FC\n {/* Header */}\n \n \n \n\n {/* Content */}\n \n \n \n \n Projects
\n \n {/* Recent projects section */}\n {displayedProjects.length > 0 ? (\n \n \n \n \n Recent Projects
\n {!showAll ? (\n \n ) : (\n \n )}\n \n {displayedProjects.map((project, index) => (\n \n \n {/* Pagination controls */}\n {showAll && totalPages > 1 && (\n \n \n )}\n \n {Array.from({ length: totalPages }, (_, i) => i + 1).map(page => (\n \n \n \n \n \n \n No recent projects
\n \n {/* Header */}\n \n );\n}; \n"
},
{
"path": "src/components/ProxySettings.tsx",
"content": "import { useState, useEffect } from 'react';\nimport { invoke } from '@tauri-apps/api/core';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Switch } from '@/components/ui/switch';\n\nexport interface ProxySettings {\n http_proxy: string | null;\n https_proxy: string | null;\n no_proxy: string | null;\n all_proxy: string | null;\n enabled: boolean;\n}\n\ninterface ProxySettingsProps {\n setToast: (toast: { message: string; type: 'success' | 'error' } | null) => void;\n onChange?: (hasChanges: boolean, getSettings: () => ProxySettings, saveSettings: () => Promise\n \n\n {/* Content */}\n \n \n \n \n \n \n \n \n Project Settings
\n \n \n \n \n \n \n\n {/* Toast Container */}\n \n \n \n \n \n \n \n Project Slash Commands
\n .claude/slash-commands/\n and can be committed to version control.\n \n \n \n \n \n Project Hooks
\n .claude/settings.json\n and should be committed to version control.\n \n \n \n \n \n Local Hooks
\n .claude/settings.local.json\n and should NOT be committed to version control.\n \n \n )}\n \n \n \n \n );\n}"
},
{
"path": "src/components/RunningClaudeSessions.tsx",
"content": "import React, { useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Play, Loader2, Terminal, AlertCircle } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { api, type ProcessInfo, type Session } from \"@/lib/api\";\nimport { cn } from \"@/lib/utils\";\nimport { formatISOTimestamp } from \"@/lib/date-utils\";\n\ninterface RunningClaudeSessionsProps {\n /**\n * Callback when a running session is clicked to resume\n */\n onSessionClick?: (session: Session) => void;\n /**\n * Optional className for styling\n */\n className?: string;\n}\n\n/**\n * Component to display currently running Claude sessions\n */\nexport const RunningClaudeSessions: React.FC\n \n\n Proxy Settings
\n \n \n \n \n\n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n );\n }\n\n if (error) {\n return (\n \n \n );\n }\n\n if (runningSessions.length === 0) {\n return null;\n }\n\n return (\n \n \n );\n}; "
},
{
"path": "src/components/SessionList.optimized.tsx",
"content": "import React, { useMemo, useCallback } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { FileText, ArrowLeft, Calendar, Clock } from \"lucide-react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Pagination } from \"@/components/ui/pagination\";\nimport { ClaudeMemoriesDropdown } from \"@/components/ClaudeMemoriesDropdown\";\nimport { cn } from \"@/lib/utils\";\nimport { formatUnixTimestamp, formatISOTimestamp } from \"@/lib/date-utils\";\nimport { usePagination } from \"@/hooks/usePagination\";\nimport type { Session, ClaudeMdFile } from \"@/lib/api\";\n\ninterface SessionListProps {\n sessions: Session[];\n projectPath: string;\n onBack: () => void;\n onSessionClick?: (session: Session) => void;\n onEditClaudeFile?: (file: ClaudeMdFile) => void;\n className?: string;\n}\n\n// Memoized session card component to prevent unnecessary re-renders\nconst SessionCard = React.memo<{\n session: Session;\n projectPath: string;\n onClick?: () => void;\n onEditClaudeFile?: (file: ClaudeMdFile) => void;\n}>(({ session, projectPath, onClick, onEditClaudeFile }) => {\n const formatTime = useCallback((timestamp: string | number | undefined) => {\n if (!timestamp) return \"Unknown time\";\n \n if (typeof timestamp === \"string\") {\n return formatISOTimestamp(timestamp);\n } else {\n return formatUnixTimestamp(timestamp);\n }\n }, []);\n\n return (\n \n \n\n \n \n \n \n ({runningSessions.length} running)\n \n Active Claude Sessions
\n \n {runningSessions.map((session) => {\n const sessionId = 'ClaudeSession' in session.process_type \n ? session.process_type.ClaudeSession.session_id \n : null;\n \n if (!sessionId) return null;\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n Started: {formatISOTimestamp(session.started_at)}\n Model: {session.model}\n {session.task && (\n \n Task: {session.task}\n \n )}\n \n \n \n \n {/* Session title */}\n \n\n {/* Claude memories dropdown */}\n \n \n\n {/* Session metadata */}\n \n \n \n {`Session ${session.id.slice(0, 8)}`}\n
\n \n \n\n {/* Session ID */}\n \n \n {session.message_timestamp && (\n \n \n )}\n \n ID: {session.id}\n \n \n \n \n {/* Header */}\n \n );\n});"
},
{
"path": "src/components/SessionList.tsx",
"content": "import React, { useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { Clock, MessageSquare } from \"lucide-react\";\nimport { Card } from \"@/components/ui/card\";\nimport { Pagination } from \"@/components/ui/pagination\";\nimport { ClaudeMemoriesDropdown } from \"@/components/ClaudeMemoriesDropdown\";\nimport { TooltipProvider } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport { truncateText, getFirstLine } from \"@/lib/date-utils\";\nimport type { Session, ClaudeMdFile } from \"@/lib/api\";\n\ninterface SessionListProps {\n /**\n * Array of sessions to display\n */\n sessions: Session[];\n /**\n * The current project path being viewed\n */\n projectPath: string;\n /**\n * Optional callback to go back to project list (deprecated - use tabs instead)\n */\n onBack?: () => void;\n /**\n * Callback when a session is clicked\n */\n onSessionClick?: (session: Session) => void;\n /**\n * Callback when a CLAUDE.md file should be edited\n */\n onEditClaudeFile?: (file: ClaudeMdFile) => void;\n /**\n * Optional className for styling\n */\n className?: string;\n}\n\nconst ITEMS_PER_PAGE = 12;\n\n/**\n * SessionList component - Displays paginated sessions for a specific project\n * \n * @example\n * \n \n\n {/* Sessions list */}\n {sessions.length === 0 ? (\n \n \n \n \n Sessions
\n \n {sessions.length} {sessions.length === 1 ? 'session' : 'sessions'}\n \n \n \n )}\n \n )}\n \n {/* CLAUDE.md Memories Dropdown */}\n {onEditClaudeFile && (\n \n {currentSessions.map((session, index) => (\n \n \n {/* Session header */}\n \n \n \n