+
+
+
+```
+
+## Phase 2: Dialog & Overlay Components
+
+### Dialog/Modal
+**Current**: `@radix-ui/react-dialog`
+**Replacement**: DaisyUI Modal
+
+```tsx
+// Replace all dialog components with DaisyUI modal
+
+
+```
+
+### Alert Dialog
+**Current**: `@radix-ui/react-alert-dialog`
+**Replacement**: DaisyUI Modal with alert styling
+
+```tsx
+
+
+Modal Title
+Content
+
+
+
+
+
+```
+
+### Popover
+**Current**: `@radix-ui/react-popover`
+**Replacement**: Headless UI Popover
+
+```tsx
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+
+
+
+
+ Are you sure you want to delete this item?
+
+
+
+
+
+ Content
+
+
+
+```
+
+### Switch
+**Current**: `@radix-ui/react-switch`
+**Replacement**: DaisyUI Toggle
+
+```tsx
+
+```
+
+### Select
+**Current**: `@radix-ui/react-select`
+**Replacement**: DaisyUI Select or Headless UI Listbox
+
+```tsx
+// Simple select
+
+
+// Complex select with search
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
+```
+
+### Slider
+**Current**: `@radix-ui/react-slider`
+**Replacement**: DaisyUI Range
+
+```tsx
+
+```
+
+## Phase 4: Navigation Components
+
+### Tabs
+**Current**: `@radix-ui/react-tabs`
+**Replacement**: DaisyUI Tabs or Headless UI Tab
+
+```tsx
+// Simple tabs
+
+
+// Complex tabs with panels
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+```
+
+### Dropdown Menu
+**Current**: `@radix-ui/react-dropdown-menu`
+**Replacement**: DaisyUI Dropdown
+
+```tsx
+
+```
+
+### Navigation Menu
+**Current**: `@radix-ui/react-navigation-menu`
+**Replacement**: DaisyUI Navbar
+
+```tsx
+
+```
+
+## Phase 5: Utility Components
+
+### Tooltip
+**Current**: `@radix-ui/react-tooltip`
+**Replacement**: DaisyUI Tooltip
+
+```tsx
+
+
+
+```
+
+### Progress
+**Current**: `@radix-ui/react-progress`
+**Replacement**: DaisyUI Progress
+
+```tsx
+
+```
+
+### Avatar
+**Current**: `@radix-ui/react-avatar`
+**Replacement**: DaisyUI Avatar
+
+```tsx
+
+
+
+// With placeholder
+
+ 
+
+
+
+
+```
+
+### Separator
+**Current**: `@radix-ui/react-separator`
+**Replacement**: DaisyUI Divider
+
+```tsx
+
+ K
+
+OR
+OR
+```
+
+### Scroll Area
+**Current**: `@radix-ui/react-scroll-area`
+**Replacement**: CSS or custom scrollbar styling
+
+```tsx
+// Use regular div with custom scrollbar
+
+ {/* Content */}
+
+```
+
+### Collapsible
+**Current**: `@radix-ui/react-collapsible`
+**Replacement**: DaisyUI Collapse
+
+```tsx
+
+
+
+```
+
+### Accordion
+**Current**: `@radix-ui/react-accordion`
+**Replacement**: DaisyUI Collapse (multiple)
+
+```tsx
+
+ Click to expand
+
+
+
+Content goes here
+
+
+```
+
+## Migration Steps
+
+1. **Install dependencies**:
+ ```bash
+ npm install @headlessui/react
+ npm install -D daisyui@latest
+ ```
+
+2. **Update Tailwind config** to include DaisyUI:
+ ```js
+ module.exports = {
+ plugins: [require("daisyui")],
+ }
+ ```
+
+3. **Create wrapper components** for complex Radix replacements
+
+4. **Update imports** file by file, starting with most used components
+
+5. **Test thoroughly** - DaisyUI/Headless UI have better accessibility but different APIs
+
+6. **Remove Radix dependencies** once migration is complete
+
+## Benefits After Migration
+
+- **Smaller bundle size**: DaisyUI + Headless UI are more lightweight
+- **Better performance**: Less JavaScript overhead
+- **Active maintenance**: Both libraries are actively developed
+- **Better React 19 compatibility**: Built for modern React
+- **Easier theming**: DaisyUI's theme system is more flexible
+- **Consistent design**: DaisyUI provides design consistency out of the box
+
+## Timeline Estimate
+
+- **Phase 1**: 1-2 days (Slot, Label)
+- **Phase 2**: 3-4 days (Dialogs, Popovers)
+- **Phase 3**: 2-3 days (Form components)
+- **Phase 4**: 2-3 days (Navigation)
+- **Phase 5**: 1-2 days (Utilities)
+- **Testing & cleanup**: 2-3 days
+
+**Total**: ~2 weeks for complete migration
\ No newline at end of file
diff --git a/docs/UI_LIBRARY_GUIDE.md b/docs/UI_LIBRARY_GUIDE.md
new file mode 100644
index 00000000..0a0a47b2
--- /dev/null
+++ b/docs/UI_LIBRARY_GUIDE.md
@@ -0,0 +1,339 @@
+# UI Library Guide for ZapDev
+
+## Migration from Radix UI to Modern Alternatives
+
+**IMPORTANT**: Do not use deprecated Radix UI components. Use DaisyUI + Headless UI instead.
+
+## Primary UI Libraries
+
+### 1. DaisyUI (Styled Components)
+- **Installation**: Already integrated with Tailwind CSS
+- **Use for**: Basic UI components with built-in styling
+- **Documentation**: https://daisyui.com/components/
+
+### 2. Headless UI (Behavior Components)
+- **Installation**: `npm install @headlessui/react`
+- **Use for**: Complex interactive components needing custom styling
+- **Documentation**: https://headlessui.com/
+
+## Component Migration Map
+
+### ❌ DEPRECATED - Do Not Use These Radix Components:
+```tsx
+// DON'T USE THESE
+import * from "@radix-ui/react-dialog"
+import * from "@radix-ui/react-dropdown-menu"
+import * from "@radix-ui/react-popover"
+// ... any @radix-ui imports
+```
+
+### ✅ USE THESE INSTEAD:
+
+#### Buttons
+```tsx
+// DaisyUI Button
+
+
+
+
+
+
+// Sizes
+
+
+
+
+
+// States
+
+
+```
+
+#### Modal/Dialog
+```tsx
+// DaisyUI Modal
+import { useState } from 'react'
+
+function Modal() {
+ const [isOpen, setIsOpen] = useState(false)
+
+ return (
+ <>
+
+
+ {isOpen && (
+
+
+
+ Section 1
+ Content 1
+
+
+
+Section 2
+ Content 2
+
+
+
+ Tab 1
+ Tab 2
+ Tab 3
+
+
+ Content 1
+ Content 2
+ Content 3
+
+
+```
+
+#### Toast/Alert
+```tsx
+// DaisyUI Alert
+
+ Open popover
+
+
+
+```
+
+### Combobox (Autocomplete)
+```tsx
+import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from '@headlessui/react'
+import { useState } from 'react'
+
+function AutoComplete() {
+ const [selectedPerson, setSelectedPerson] = useState(null)
+ const [query, setQuery] = useState('')
+
+ const people = [
+ { id: 1, name: 'Durward Reynolds' },
+ { id: 2, name: 'Kenton Towne' },
+ { id: 3, name: 'Therese Wunsch' },
+ ]
+
+ const filteredPeople = query === ''
+ ? people
+ : people.filter((person) =>
+ person.name.toLowerCase().includes(query.toLowerCase())
+ )
+
+ return (
+
+ person?.name}
+ onChange={(event) => setQuery(event.target.value)}
+ />
+
+ {filteredPeople.map((person) => (
+
+ {({ focus, selected }) => (
+
+ {person.name}
+
+ )}
+
+ ))}
+
+
+ )
+}
+```
+
+## Theme Integration
+
+DaisyUI works with your existing Tailwind setup and offers multiple themes:
+
+```tsx
+// Set theme on html element
+
+
+
+
+// ... many more themes available
+```
+
+## Installation Commands
+
+Add to your project:
+
+```bash
+# DaisyUI (already in your tailwind.config)
+npm install -D daisyui@latest
+
+# Headless UI for complex components
+npm install @headlessui/react
+
+# Optional: Heroicons for consistent icons
+npm install @heroicons/react
+```
+
+## Best Practices
+
+1. **Use DaisyUI for**: Simple components (buttons, inputs, cards, alerts)
+2. **Use Headless UI for**: Complex interactions (combobox, popover, complex menus)
+3. **Combine both**: Use DaisyUI classes within Headless UI components for styling
+4. **Always prefer**: These modern alternatives over deprecated Radix UI
+5. **Testing**: Both libraries offer excellent accessibility and React 19 compatibility
+
+## Migration Priority
+
+1. **High Priority**: Dialog, Dropdown, Popover, Tabs (most commonly used)
+2. **Medium Priority**: Form controls, Progress, Tooltip
+3. **Low Priority**: Advanced components like Accordion, Navigation Menu
+
+Remember: DaisyUI + Headless UI provides better performance, smaller bundle size, and active maintenance compared to Radix UI.
\ No newline at end of file
diff --git a/package.json b/package.json
index 7884d9b7..d1121504 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"@e2b/code-interpreter": "1.5.1",
"@eslint/plugin-kit": "^0.3.5",
"@geist-ui/core": "^2.3.8",
+ "@headlessui/react": "^2.2.7",
"@hookform/resolvers": "^5.2.1",
"@lottiefiles/dotlottie-react": "^0.14.4",
"@microsoft/eslint-formatter-sarif": "3.1.0",
@@ -133,6 +134,7 @@
"@vitejs/plugin-react-swc": "^4.0.0",
"autoprefixer": "^10.4.21",
"concurrently": "^9.2.0",
+ "daisyui": "^5.0.50",
"eslint": "^9.33.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
diff --git a/src/components/ChatInterface.tsx b/src/components/ChatInterface.tsx
index 8500708b..d08de9e9 100644
--- a/src/components/ChatInterface.tsx
+++ b/src/components/ChatInterface.tsx
@@ -198,8 +198,14 @@ const ChatInterface: React.FC = () => {
);
// Memoize normalized results to prevent useEffect dependencies from changing on every render
- const chats = React.useMemo(() => chatsData?.chats ?? [], [chatsData?.chats]);
- const messages = React.useMemo(() => messagesData?.messages ?? [], [messagesData?.messages]);
+ const chats = React.useMemo(() => {
+ const chatsArray = chatsData?.chats;
+ return Array.isArray(chatsArray) ? chatsArray : [];
+ }, [chatsData?.chats]);
+ const messages = React.useMemo(() => {
+ const messagesArray = messagesData?.messages;
+ return Array.isArray(messagesArray) ? messagesArray : [];
+ }, [messagesData?.messages]);
const createChat = useMutation(api.chats.createChat);
const updateChat = useMutation(api.chats.updateChat);
const createMessage = useMutation(api.messages.createMessage);
@@ -325,8 +331,18 @@ const ChatInterface: React.FC = () => {
error: error instanceof Error ? error.message : String(error),
title: 'New chat'
});
- Sentry.captureException(error);
- toast.error('Failed to create chat');
+
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ // Handle specific error types with helpful messages
+ if (errorMessage.includes('Free plan limit reached')) {
+ toast.error('Free plan limit reached! You can create up to 5 chats. Upgrade to Pro for unlimited chats.');
+ } else if (errorMessage.includes('Rate limit exceeded')) {
+ toast.error('Please wait a moment before creating another chat.');
+ } else {
+ Sentry.captureException(error);
+ toast.error('Failed to create chat');
+ }
}
}
);
diff --git a/src/components/EnhancedChatInterface.tsx b/src/components/EnhancedChatInterface.tsx
index 6369131c..d0b4ed03 100644
--- a/src/components/EnhancedChatInterface.tsx
+++ b/src/components/EnhancedChatInterface.tsx
@@ -34,7 +34,9 @@ import {
ArrowUp,
Mic,
Paperclip,
- Settings
+ Settings,
+ Github,
+ GitBranch
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { useQuery, useMutation } from 'convex/react';
@@ -52,6 +54,9 @@ import { toast } from 'sonner';
import * as Sentry from '@sentry/react';
import WebContainerFailsafe from './WebContainerFailsafe';
import { DECISION_PROMPT_NEXT } from '@/lib/decisionPrompt';
+import { GitHubIntegration } from '@/components/GitHubIntegration';
+import type { GitHubRepo } from '@/lib/github-service';
+import { githubService } from '@/lib/github-service';
const { logger } = Sentry;
@@ -152,17 +157,33 @@ const EnhancedChatInterface: React.FC = () => {
// Enhanced animations
const [messageAnimations, setMessageAnimations] = useState<{ [key: string]: boolean }>({});
+
+ // GitHub Integration state
+ const [selectedRepo, setSelectedRepo] = useState(null);
+ const [githubContext, setGithubContext] = useState('');
+ const [isGithubMode, setIsGithubMode] = useState(false);
const textareaRef = useRef(null);
const messagesEndRef = useRef(null);
const inputContainerRef = useRef(null);
// Convex queries and mutations
- const chats = useQuery(api.chats.getUserChats);
- const messages = useQuery(
+ const chatsData = useQuery(api.chats.getUserChats);
+ const messagesData = useQuery(
api.messages.getChatMessages,
selectedChatId ? { chatId: selectedChatId as Id<'chats'> } : "skip"
);
+
+ // Ensure arrays are properly handled
+ const chats = React.useMemo(() => {
+ const chatsArray = chatsData?.chats;
+ return Array.isArray(chatsArray) ? chatsArray : [];
+ }, [chatsData?.chats]);
+
+ const messages = React.useMemo(() => {
+ const messagesArray = messagesData?.messages;
+ return Array.isArray(messagesArray) ? messagesArray : [];
+ }, [messagesData?.messages]);
const createChatMutation = useMutation(api.chats.createChat);
const addMessageMutation = useMutation(api.messages.createMessage);
@@ -209,6 +230,9 @@ const EnhancedChatInterface: React.FC = () => {
const sanitizedInput = sanitizeText(input);
if (!sanitizedInput.trim()) return;
+
+ // Enhance message with GitHub context if available
+ const enhancedInput = await enhanceMessageWithGitHub(sanitizedInput);
if (!sessionStarted) {
setSessionStarted(true);
@@ -228,9 +252,12 @@ const EnhancedChatInterface: React.FC = () => {
// Add user message
await addMessageMutation({
chatId: currentChatId as Id<'chats'>,
- content: sanitizedInput,
+ content: sanitizedInput, // Store original user input
role: 'user',
- metadata: {}
+ metadata: {
+ githubMode: isGithubMode,
+ repository: selectedRepo?.full_name
+ }
});
setInput('');
@@ -238,7 +265,7 @@ const EnhancedChatInterface: React.FC = () => {
// Generate AI response with enhanced error handling
try {
- const stream = await streamAIResponse(sanitizedInput);
+ const stream = await streamAIResponse(enhancedInput); // Use enhanced input for AI
let assistantResponse = '';
// Add assistant message placeholder
@@ -301,7 +328,17 @@ const EnhancedChatInterface: React.FC = () => {
} catch (error) {
logger.error('Chat submission failed:', error);
- toast.error('Failed to send message. Please try again.');
+
+ const errorMessage = error instanceof Error ? error.message : String(error);
+
+ // Handle specific error types with helpful messages
+ if (errorMessage.includes('Free plan limit reached')) {
+ toast.error('Free plan limit reached! You can create up to 5 chats. Upgrade to Pro for unlimited chats.');
+ } else if (errorMessage.includes('Rate limit exceeded')) {
+ toast.error('Please wait a moment before creating another chat.');
+ } else {
+ toast.error('Failed to send message. Please try again.');
+ }
} finally {
setIsTyping(false);
}
@@ -430,6 +467,78 @@ const EnhancedChatInterface: React.FC = () => {
});
};
+ // GitHub Integration Functions
+ const handleRepoSelected = (repo: GitHubRepo) => {
+ setSelectedRepo(repo);
+ setIsGithubMode(true);
+
+ const repoContext = `Repository: ${repo.full_name}\n` +
+ `Description: ${repo.description || 'No description'}\n` +
+ `Language: ${repo.language || 'Unknown'}\n` +
+ `Default Branch: ${repo.default_branch}\n` +
+ `Type: ${repo.private ? 'Private' : 'Public'} repository\n\n`;
+
+ setGithubContext(repoContext);
+
+ // Add context to the current input
+ setInput(prev => {
+ const newInput = `I'm working with this GitHub repository:\n\n${repoContext}` +
+ `Please help me analyze and suggest improvements for this codebase. ` +
+ `${prev ? '\n\n' + prev : ''}`;
+ return newInput;
+ });
+
+ toast.success(`Repository ${repo.full_name} loaded for AI analysis!`);
+ };
+
+ const handlePullRequestCreated = (prUrl: string, repo: GitHubRepo) => {
+ toast.success('Pull request created successfully!');
+
+ // Add success message to chat
+ if (selectedChatId) {
+ addMessageMutation({
+ chatId: selectedChatId as Id<'chats'>,
+ content: `✅ **Pull Request Created Successfully!**\n\n` +
+ `Repository: ${repo.full_name}\n` +
+ `Pull Request: [View PR](${prUrl})\n\n` +
+ `The changes have been applied and are ready for review. ` +
+ `You can now review the pull request on GitHub and merge it when ready.`,
+ role: 'assistant',
+ metadata: {
+ type: 'github_success',
+ prUrl,
+ repository: repo.full_name
+ }
+ }).catch(error => {
+ logger.error('Failed to add PR success message:', error);
+ });
+ }
+ };
+
+ const detectGithubUrls = (text: string): string[] => {
+ const githubUrlRegex = /https?:\/\/github\.com\/[\w\-.]+\/[\w\-.]+(?:\/[^\s]*)?/g;
+ return text.match(githubUrlRegex) || [];
+ };
+
+ const enhanceMessageWithGitHub = async (message: string): Promise => {
+ let enhancedMessage = message;
+
+ // If GitHub mode is active, add repository context
+ if (isGithubMode && selectedRepo && githubContext) {
+ enhancedMessage = githubContext + '\n' + message;
+ }
+
+ // Detect and suggest GitHub integration
+ const githubUrls = detectGithubUrls(message);
+ if (githubUrls.length > 0 && !isGithubMode) {
+ enhancedMessage += '\n\n[Assistant Note: I detected GitHub repository URLs in your message. ' +
+ 'Would you like to use the GitHub integration to analyze the repository, ' +
+ 'make changes, and create pull requests directly?]';
+ }
+
+ return enhancedMessage;
+ };
+
if (authLoading) {
return (
+ {isGithubMode && selectedRepo && (
+
+
+ )}
+
+
{/* Enhanced Input Area */}
+
+ Modal Title
+Modal content goes here
+
+
+
+ setIsOpen(false)} />
+
+ )}
+
+ )
+}
+```
+
+#### Dropdown Menu
+```tsx
+// DaisyUI Dropdown
+
+
+// Or Headless UI for complex dropdowns
+import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+
+
+```
+
+#### Form Controls
+
+```tsx
+// Checkbox
+
+
+
+
+// Radio
+
+
+
+// Toggle/Switch
+
+
+
+// Select
+
+
+// Range Slider
+
+```
+
+#### Tabs
+```tsx
+// DaisyUI Tabs
+
+
+// Or Headless UI for complex tab behavior
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+
+
+
+ New software update available.
+
+
+
+ Your purchase has been confirmed!
+
+
+
+ Warning: Invalid email address!
+
+
+
+ Error! Task failed successfully.
+
+```
+
+#### Tooltip
+```tsx
+// DaisyUI Tooltip
+
+
+
+
+
+
+
+```
+
+#### Progress Bar
+```tsx
+// DaisyUI Progress
+
+
+
+```
+
+#### Loading States
+```tsx
+// DaisyUI Loading
+
+
+
+
+
+
+
+// Different sizes
+
+
+
+
+```
+
+## Complex Components (Use Headless UI)
+
+### Popover
+```tsx
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react'
+
+
+
+ Popover content
+Your popover content goes here
+
@@ -1048,6 +1157,64 @@ const EnhancedChatInterface: React.FC = () => {
+ {/* GitHub Mode Indicator */}
+
+
+
+
+
+
+
+
+
+ 
+ {selectedRepo.full_name}
+
+ {selectedRepo.language || 'Unknown'}
+
+
+
+
+
+
+
@@ -1092,6 +1259,11 @@ const EnhancedChatInterface: React.FC = () => {
diff --git a/src/components/GitHubIntegration.tsx b/src/components/GitHubIntegration.tsx
new file mode 100644
index 00000000..fcb582ab
--- /dev/null
+++ b/src/components/GitHubIntegration.tsx
@@ -0,0 +1,658 @@
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import { Label } from '@/components/ui/label';
+import {
+ GitBranch,
+ GitFork,
+ GitPullRequest,
+ Github,
+ ExternalLink,
+ Loader2,
+ Check,
+ AlertCircle,
+ Settings,
+ Key,
+ FileText,
+ Folder,
+ Plus
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { githubService, initializeGitHub, type GitHubRepo, type FileChange, type CreatePullRequestOptions } from '@/lib/github-service';
+import { setGitHubToken, clearGitHubToken } from '@/lib/github-token-storage';
+import * as Sentry from '@sentry/react';
+
+const { logger } = Sentry;
+
+export interface GitHubIntegrationProps {
+ onRepoSelected?: (repo: GitHubRepo) => void;
+ onPullRequestCreated?: (prUrl: string, repo: GitHubRepo) => void;
+ className?: string;
+}
+
+interface GitHubOperationStatus {
+ stage: 'idle' | 'parsing' | 'forking' | 'creating-branch' | 'applying-changes' | 'creating-pr' | 'completed' | 'error';
+ message: string;
+ progress: number;
+}
+
+export function GitHubIntegration({
+ onRepoSelected,
+ onPullRequestCreated,
+ className = ''
+}: GitHubIntegrationProps) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [githubUrl, setGithubUrl] = useState('');
+ const [isTokenSetup, setIsTokenSetup] = useState(false);
+ const [githubToken, setGithubToken] = useState('');
+ const [currentRepo, setCurrentRepo] = useState(null);
+ const [operationStatus, setOperationStatus] = useState({
+ stage: 'idle',
+ message: 'Ready to start',
+ progress: 0
+ });
+
+ // Pull Request creation fields
+ const [prTitle, setPrTitle] = useState('');
+ const [prDescription, setPrDescription] = useState('');
+ const [changes, setChanges] = useState([]);
+ const [showPRForm, setShowPRForm] = useState(false);
+
+ // Token setup
+ const [showTokenSetup, setShowTokenSetup] = useState(false);
+
+ useEffect(() => {
+ checkGitHubSetup();
+ }, []);
+
+ const checkGitHubSetup = async () => {
+ const isSetup = await initializeGitHub();
+ setIsTokenSetup(isSetup);
+ };
+
+ const saveGitHubToken = async () => {
+ if (!githubToken.trim()) {
+ toast.error('Please enter a valid GitHub token');
+ return;
+ }
+
+ if (!githubService.validateGitHubToken(githubToken)) {
+ toast.error('Invalid GitHub token format. Please check your token.');
+ return;
+ }
+
+ try {
+ await setGitHubToken(githubToken.trim());
+ githubService.setToken(githubToken.trim());
+
+ // Clear token from component state immediately after use
+ setGithubToken('');
+
+ setIsTokenSetup(true);
+ setShowTokenSetup(false);
+ toast.success('GitHub token saved securely!');
+ } catch (error) {
+ logger.error('Failed to save GitHub token:', error);
+ toast.error('Failed to save GitHub token. Please try again.');
+ }
+ };
+
+ const parseAndLoadRepo = async () => {
+ if (!githubUrl.trim()) {
+ toast.error('Please enter a GitHub repository URL');
+ return;
+ }
+
+ if (!isTokenSetup) {
+ toast.error('Please configure your GitHub token first');
+ setShowTokenSetup(true);
+ return;
+ }
+
+ try {
+ setOperationStatus({
+ stage: 'parsing',
+ message: 'Parsing GitHub URL...',
+ progress: 10
+ });
+
+ const parsed = await githubService.parseRepoUrl(githubUrl);
+ if (!parsed) {
+ throw new Error('Invalid GitHub URL format');
+ }
+
+ setOperationStatus({
+ stage: 'parsing',
+ message: `Loading repository ${parsed.owner}/${parsed.repo}...`,
+ progress: 30
+ });
+
+ const repo = await githubService.getRepo(parsed.owner, parsed.repo);
+ setCurrentRepo(repo);
+
+ setOperationStatus({
+ stage: 'completed',
+ message: `Repository loaded successfully!`,
+ progress: 100
+ });
+
+ if (onRepoSelected) {
+ onRepoSelected(repo);
+ }
+
+ toast.success(`Repository ${repo.full_name} loaded successfully!`);
+ } catch (error) {
+ logger.error('Error loading repository:', error);
+ setOperationStatus({
+ stage: 'error',
+ message: error instanceof Error ? error.message : 'Failed to load repository',
+ progress: 0
+ });
+ toast.error(error instanceof Error ? error.message : 'Failed to load repository');
+ }
+ };
+
+ const createPullRequest = async () => {
+ if (!currentRepo || changes.length === 0) {
+ toast.error('No changes to commit');
+ return;
+ }
+
+ if (!prTitle.trim()) {
+ toast.error('Please enter a pull request title');
+ return;
+ }
+
+ try {
+ const originalOwner = currentRepo.owner.login;
+ const originalRepo = currentRepo.name;
+
+ setOperationStatus({
+ stage: 'forking',
+ message: 'Forking repository...',
+ progress: 20
+ });
+
+ // Fork the repository
+ const forkedRepo = await githubService.forkRepo(originalOwner, originalRepo);
+ const userLogin = forkedRepo.owner.login;
+
+ setOperationStatus({
+ stage: 'creating-branch',
+ message: 'Creating feature branch...',
+ progress: 40
+ });
+
+ // Create a new branch
+ const branchName = githubService.generateBranchName(prTitle);
+ await githubService.createBranch(userLogin, originalRepo, branchName, currentRepo.default_branch);
+
+ setOperationStatus({
+ stage: 'applying-changes',
+ message: 'Applying changes...',
+ progress: 60
+ });
+
+ // Apply changes
+ await githubService.updateFiles(
+ userLogin,
+ originalRepo,
+ branchName,
+ changes,
+ prTitle
+ );
+
+ setOperationStatus({
+ stage: 'creating-pr',
+ message: 'Creating pull request...',
+ progress: 80
+ });
+
+ // Create pull request using options object pattern
+ const prOptions: CreatePullRequestOptions = {
+ owner: originalOwner,
+ repo: originalRepo,
+ title: prTitle,
+ body: prDescription,
+ headBranch: branchName,
+ baseBranch: currentRepo.default_branch,
+ originalOwner: originalOwner
+ };
+
+ const pr = await githubService.createPullRequest(prOptions);
+
+ setOperationStatus({
+ stage: 'completed',
+ message: 'Pull request created successfully!',
+ progress: 100
+ });
+
+ if (onPullRequestCreated) {
+ onPullRequestCreated(pr.html_url, currentRepo);
+ }
+
+ toast.success(`Pull request created: ${pr.html_url}`);
+
+ // Reset form
+ setShowPRForm(false);
+ setPrTitle('');
+ setPrDescription('');
+ setChanges([]);
+
+ } catch (error) {
+ logger.error('Error creating pull request:', error);
+ setOperationStatus({
+ stage: 'error',
+ message: error instanceof Error ? error.message : 'Failed to create pull request',
+ progress: 0
+ });
+ toast.error(error instanceof Error ? error.message : 'Failed to create pull request');
+ }
+ };
+
+ const addFileChange = () => {
+ setChanges([...changes, { path: '', content: '', action: 'create' }]);
+ };
+
+ const updateFileChange = (index: number, field: keyof FileChange, value: string) => {
+ const updatedChanges = [...changes];
+ updatedChanges[index] = { ...updatedChanges[index], [field]: value };
+ setChanges(updatedChanges);
+ };
+
+ const removeFileChange = (index: number) => {
+ setChanges(changes.filter((_, i) => i !== index));
+ };
+
+ const getStatusIcon = () => {
+ switch (operationStatus.stage) {
+ case 'parsing':
+ case 'forking':
+ case 'creating-branch':
+ case 'applying-changes':
+ case 'creating-pr':
+ return
+