Add clone from GitHub feature

[caffeinum]

Summary

• Adds "Add from GitHub" button to the project selector dropdown
• New dialog to enter GitHub repo URL (supports owner/repo, https, or ssh formats)
• Clones repos to ~/.21st/repos/{owner}/{repo} (same folder as worktrees)
• Handles already-cloned repos gracefully

Test plan

• Open project selector dropdown
• Click "Add from GitHub" button
• Enter a repo like facebook/react or a full URL
• Verify repo clones and project is created
• Try cloning same repo again - should reuse existing

Demo

Claude In that folder:

[bunasQ]

@1code pls look at PR, study my codebase, and tell me how does this PR affects codebase, and what's the purpose of it and how is it aligned with existing codebase

[1code-async]

Task completed.

Great! Now I have a comprehensive understanding of the PR. Let me provide you with a detailed analysis:

PR Analysis: "Add clone from GitHub feature"

Purpose

This PR adds the ability to clone GitHub repositories directly from the app's project selector UI, eliminating the need for users to manually clone repos and then add them as local folders.

How It Works

The feature has two main components:

1. Backend (tRPC Router) - src/main/lib/trpc/routers/projects.ts

Adds a new mutation cloneFromGitHub that:

• Parses flexible input formats:

  • Short format: owner/repo
  • HTTPS: https://github.com/owner/repo
  • SSH: git@github.com:owner/repo

• Clones to standardized location: ~/.21st/repos/{owner}/{repo}

  • Uses app.getPath("userData") to get the base path
  • Creates nested directory structure for organization

• Handles edge cases gracefully:

  • If repo already exists on disk → checks if project exists in DB
  • If in DB → returns existing project
  • If not in DB → creates new project entry
  • If clone needed → runs git clone via execAsync

• Extracts git metadata automatically:

  • Uses existing getGitRemoteInfo() helper to parse remote URL
  • Populates gitRemoteUrl, gitProvider, gitOwner, gitRepo fields
  • Tracks project opening via analytics

2. Frontend (UI Component) - src/renderer/features/agents/components/project-selector.tsx

Adds UI elements:

• New "Add from GitHub" button in the project selector dropdown

  • Placed below existing "Add repository" (folder picker) button
  • Uses GitHubIcon for visual consistency

• Dialog with input field for entering repo URL/shorthand

  • Validates input before enabling "Clone" button
  • Shows loading state during clone operation
  • Closes and updates UI on success

• Optimistic UI updates:

  • Uses tRPC's cache manipulation to update project list immediately
  • Sets newly cloned project as selected
  • Updates updatedAt timestamp if project already exists

---

Alignment with Existing Codebase

This PR follows your codebase patterns extremely well:

✅ Uses existing infrastructure:

• Leverages existing getGitRemoteInfo() utility (no duplication)
• Uses same trackProjectOpened() analytics as folder picker
• Follows same DB insert pattern as openFolder mutation
• Reuses project schema fields (gitRemoteUrl, gitProvider, etc.)

✅ Consistent with architecture:

• Backend logic in tRPC router (main process)
• UI logic in React component (renderer process)
• Type-safe communication via tRPC
• Proper error handling with mutations

✅ Matches naming conventions:

• PascalCase for Dialog component
• camelCase for mutation (cloneFromGitHub)
• kebab-case for git operations

✅ Integrates with existing features:

• Clone location (~/.21st/repos/) matches the planned worktree location mentioned in CLAUDE.md
• Git metadata extraction supports future PR/worktree features
• Projects table already had git fields ready for this

---

Impact on Codebase

Changes:

• +126 lines in projects.ts router (new mutation)
• +104 lines in project-selector.tsx (UI + state management)

Key Additions:

1. New tRPC procedure: projects.cloneFromGitHub
2. New UI dialog for GitHub URL input
3. Standardized clone location pattern

Dependencies:

• Uses Node.js child_process.exec for git clone
• Uses Electron's app.getPath('userData') for storage location

No Breaking Changes:

• Purely additive feature
• Doesn't modify existing project picker flow
• Backward compatible with existing projects

---

Strategic Value

This feature aligns with your app's goals:

1. Reduces friction: Users can start chatting with a GitHub repo in one step
2. Prepares for worktrees: Clones to the same parent directory where worktrees will live (~/.21st/)
3. Git-first approach: Automatically captures git metadata for future GitHub integration features
4. UX parity: Many AI coding tools (Cursor, Windsurf) have similar "clone from GitHub" flows

---

Potential Considerations

While the PR is solid, here are a few things to consider for future iterations:

1. Error handling: Currently errors during clone might not be user-friendly (e.g., auth issues for private repos)
2. SSH key support: Clones via HTTPS only; doesn't support SSH keys for private repos yet
3. Progress indication: git clone can be slow for large repos; no progress bar currently
4. Disk space: No checks for available disk space before cloning

But these are enhancements, not blockers. The core implementation is solid and ready to ship.

---

Conclusion

This is a well-executed, valuable feature that:

• Seamlessly integrates with your existing architecture
• Follows all your coding conventions
• Prepares the foundation for git worktree isolation
• Improves user onboarding by removing manual clone steps

The code quality is high, patterns are consistent, and it aligns perfectly with your roadmap. I'd recommend merging this PR.

---

View full conversation

Powered by 1Code

[bunasQ]

@caffeinum legit work, thanks!