From ac9aec4e905836af16b7af09a2ec2acf9f701eb7 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Sun, 5 Apr 2026 05:53:08 -0500
Subject: [PATCH] Add GitHub repo cloning entry points

- Add clone-repo actions to sidebar and home empty state
- Open cloned repos as projects, reusing existing projects when possible
---
 apps/web/src/components/Sidebar.tsx           | 25 ++++++++++
 .../components/home/ChatHomeEmptyState.tsx    | 50 +++++++++++++++++++
 apps/web/src/components/home/HomeActions.tsx  |  8 ++-
 3 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index b159ac84d..0be1e45a2 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -6,6 +6,7 @@ import {
   EyeOffIcon,
   ZapIcon,
   FolderIcon,
+  GitBranchIcon,
   GitMergeIcon,
   GitPullRequestIcon,
   XCircleIcon,
@@ -121,6 +122,7 @@ import {
   resolvePackageManagerResolution,
 } from "~/projectScriptDefaults";
 import { useClientMode } from "~/hooks/useClientMode";
+import { CloneRepositoryDialog } from "~/components/CloneRepositoryDialog";
 import { getProjectColor } from "~/projectColors";
 import type { Thread } from "../types";
 
@@ -398,6 +400,7 @@ export default function Sidebar() {
   const [isAddingProject, setIsAddingProject] = useState(false);
   const [addProjectError, setAddProjectError] = useState<string | null>(null);
   const [manualProjectPathEntry, setManualProjectPathEntry] = useState(false);
+  const [cloneDialogOpen, setCloneDialogOpen] = useState(false);
   const addProjectInputRef = useRef<HTMLInputElement | null>(null);
   const [expandedThreadListsByProject, setExpandedThreadListsByProject] = useState<
     ReadonlySet<ProjectId>
@@ -680,6 +683,13 @@ export default function Sidebar() {
     setAddingProject((prev) => !prev);
   };
 
+  const handleCloneComplete = useCallback(
+    async (result: { path: string; branch: string; repoName: string }) => {
+      await addProjectFromPath(result.path);
+    },
+    [addProjectFromPath],
+  );
+
   /**
    * Delete a single thread: stop session, close terminal, dispatch delete,
    * clean up drafts/state, and optionally remove orphaned worktree.
@@ -2044,6 +2054,15 @@ export default function Sidebar() {
                 <FolderIcon className="size-3.5" />
                 {isPickingFolder ? "Picking folder..." : "Browse for folder"}
               </button>
+              <button
+                type="button"
+                className="mb-1.5 flex w-full items-center justify-center gap-2 rounded-md border border-border bg-secondary py-1.5 text-xs text-foreground/80 transition-[background-color,border-color,color] duration-150 ease-out hover:border-border/80 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+                onClick={() => setCloneDialogOpen(true)}
+                disabled={isAddingProject}
+              >
+                <GitBranchIcon className="size-3.5" />
+                Clone from GitHub
+              </button>
               {!manualProjectPathEntry && (
                 <button
                   type="button"
@@ -2226,6 +2245,12 @@ export default function Sidebar() {
           )}
         </SidebarMenu>
       </SidebarFooter>
+
+      <CloneRepositoryDialog
+        open={cloneDialogOpen}
+        onOpenChange={setCloneDialogOpen}
+        onCloned={handleCloneComplete}
+      />
     </>
   );
 }
diff --git a/apps/web/src/components/home/ChatHomeEmptyState.tsx b/apps/web/src/components/home/ChatHomeEmptyState.tsx
index 143a48690..3f53350f3 100644
--- a/apps/web/src/components/home/ChatHomeEmptyState.tsx
+++ b/apps/web/src/components/home/ChatHomeEmptyState.tsx
@@ -11,6 +11,7 @@ import { serverConfigQueryOptions } from "../../lib/serverReactQuery";
 import { newCommandId, newProjectId } from "../../lib/utils";
 import { readNativeApi } from "../../nativeApi";
 import { useStore } from "../../store";
+import { CloneRepositoryDialog } from "../CloneRepositoryDialog";
 import { sortProjectsForSidebar } from "../Sidebar.logic";
 import { ProviderSetupCard } from "../chat/ProviderSetupCard";
 import { SidebarTrigger, useSidebar } from "../ui/sidebar";
@@ -36,6 +37,7 @@ export function ChatHomeEmptyState() {
   const threads = useStore((store) => store.threads);
   const { handleNewThread } = useHandleNewThread();
   const [isOpeningProject, setIsOpeningProject] = useState(false);
+  const [cloneDialogOpen, setCloneDialogOpen] = useState(false);
   const { open: sidebarOpen, isMobile: sidebarIsMobile } = useSidebar();
 
   const latestProject = useMemo(
@@ -129,6 +131,47 @@ export function ChatHomeEmptyState() {
     setIsOpeningProject(false);
   }, [appSettings.defaultThreadEnvMode, handleNewThread, isOpeningProject, projects]);
 
+  const handleCloneComplete = useCallback(
+    async (result: { path: string; branch: string; repoName: string }) => {
+      const api = readNativeApi();
+      if (!api) return;
+
+      const existingProject = projects.find((project) => project.cwd === result.path);
+      if (existingProject) {
+        await handleNewThread(existingProject.id, {
+          envMode: appSettings.defaultThreadEnvMode,
+        }).catch(() => undefined);
+        return;
+      }
+
+      const projectId = newProjectId();
+      try {
+        await api.orchestration.dispatchCommand({
+          type: "project.create",
+          commandId: newCommandId(),
+          projectId,
+          title: result.repoName,
+          workspaceRoot: result.path,
+          defaultModel: DEFAULT_MODEL_BY_PROVIDER.codex,
+          createdAt: new Date().toISOString(),
+        });
+        await handleNewThread(projectId, {
+          envMode: appSettings.defaultThreadEnvMode,
+        }).catch(() => undefined);
+      } catch (error) {
+        toastManager.add({
+          type: "error",
+          title: "Failed to add project",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred while adding the project.",
+        });
+      }
+    },
+    [appSettings.defaultThreadEnvMode, handleNewThread, projects],
+  );
+
   const startLatestThread = useCallback(async () => {
     if (!latestProject) {
       await openProjectFolder();
@@ -175,9 +218,16 @@ export function ChatHomeEmptyState() {
                 isOpeningProject={isOpeningProject}
                 onNewThread={() => void startLatestThread()}
                 onOpenFolder={() => void openProjectFolder()}
+                onCloneRepo={() => setCloneDialogOpen(true)}
                 onSettings={() => void navigate({ to: "/settings" })}
               />
 
+              <CloneRepositoryDialog
+                open={cloneDialogOpen}
+                onOpenChange={setCloneDialogOpen}
+                onCloned={handleCloneComplete}
+              />
+
               <HomeProviderStatus
                 providers={providers}
                 onSettingsClick={() => void navigate({ to: "/settings" })}
diff --git a/apps/web/src/components/home/HomeActions.tsx b/apps/web/src/components/home/HomeActions.tsx
index f64b142b1..9b37c6644 100644
--- a/apps/web/src/components/home/HomeActions.tsx
+++ b/apps/web/src/components/home/HomeActions.tsx
@@ -1,4 +1,4 @@
-import { FolderOpenIcon, SettingsIcon, TerminalSquareIcon } from "lucide-react";
+import { FolderOpenIcon, GitBranchIcon, SettingsIcon, TerminalSquareIcon } from "lucide-react";
 
 import { Button } from "../ui/button";
 
@@ -7,6 +7,7 @@ interface HomeActionsProps {
   isOpeningProject: boolean;
   onNewThread: () => void;
   onOpenFolder: () => void;
+  onCloneRepo: () => void;
   onSettings: () => void;
 }
 
@@ -15,6 +16,7 @@ export function HomeActions({
   isOpeningProject,
   onNewThread,
   onOpenFolder,
+  onCloneRepo,
   onSettings,
 }: HomeActionsProps) {
   return (
@@ -27,6 +29,10 @@ export function HomeActions({
         <FolderOpenIcon className="size-4" />
         {isOpeningProject ? "Opening..." : "Open folder"}
       </Button>
+      <Button variant="outline" onClick={onCloneRepo}>
+        <GitBranchIcon className="size-4" />
+        Clone repo
+      </Button>
       <Button variant="ghost" onClick={onSettings}>
         <SettingsIcon className="size-4" />
         Settings