feat: add create project functionality

gergesh · gergesh · commit 5e7a459f958d · 2025-12-19T21:54:22.000+02:00
diff --git a/packages/desktop/src/components/dialog-create-project.tsx b/packages/desktop/src/components/dialog-create-project.tsx
@@ -0,0 +1,111 @@
+import { Component } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useLayout } from "@/context/layout"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { Button } from "@opencode-ai/ui/button"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { showToast } from "@opencode-ai/ui/toast"
+import { useNavigate } from "@solidjs/router"
+import { base64Encode } from "@opencode-ai/util/encode"
+
+export const DialogCreateProject: Component = () => {
+  const dialog = useDialog()
+  const globalSDK = useGlobalSDK()
+  const layout = useLayout()
+  const navigate = useNavigate()
+
+  const [store, setStore] = createStore({
+    path: "",
+    error: undefined as string | undefined,
+    loading: false,
+  })
+
+  function openProject(directory: string) {
+    layout.projects.open(directory)
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  async function handleSubmit(e: SubmitEvent) {
+    e.preventDefault()
+
+    const path = store.path?.trim()
+    if (!path) {
+      setStore("error", "Project path is required")
+      return
+    }
+
+    if (!path.startsWith("/") && !path.startsWith("~/")) {
+      setStore("error", "Path must be absolute (start with / or ~)")
+      return
+    }
+
+    setStore("error", undefined)
+    setStore("loading", true)
+
+    try {
+      const result = await globalSDK.client.project.create({ path })
+
+      if (result.error) {
+        const errorMessage = (result.error as { message?: string }).message || "Failed to create project"
+        setStore("error", errorMessage)
+        setStore("loading", false)
+        return
+      }
+
+      const project = result.data!
+      dialog.close()
+      openProject(project.worktree)
+
+      showToast({
+        variant: "success",
+        icon: "circle-check",
+        title: "Project created",
+        description: `Created project at ${project.worktree}`,
+      })
+    } catch (e: unknown) {
+      const errorMessage = e instanceof Error ? e.message : "Failed to create project"
+      setStore("error", errorMessage)
+      setStore("loading", false)
+    }
+  }
+
+  return (
+    <Dialog title="Create New Project">
+      <form onSubmit={handleSubmit} class="flex flex-col gap-6 px-5 pb-6">
+        <div class="text-14-regular text-text-base">
+          Enter the full path where you want to create your new project. A new directory will be created and initialized
+          as a git repository.
+        </div>
+        <TextField
+          autofocus
+          type="text"
+          label="Project path"
+          placeholder="~/projects/my-new-app"
+          name="path"
+          value={store.path}
+          onChange={(value) => setStore("path", value)}
+          validationState={store.error ? "invalid" : undefined}
+          error={store.error}
+        />
+        <div class="flex gap-3 justify-end">
+          <Button variant="ghost" onClick={() => dialog.close()} disabled={store.loading}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={store.loading}>
+            {store.loading ? (
+              <span class="flex items-center gap-2">
+                <Spinner class="size-4" />
+                Creating...
+              </span>
+            ) : (
+              "Create Project"
+            )}
+          </Button>
+        </div>
+      </form>
+    </Dialog>
+  )
+}
diff --git a/packages/desktop/src/pages/home.tsx b/packages/desktop/src/pages/home.tsx
@@ -8,12 +8,15 @@ import { base64Encode } from "@opencode-ai/util/encode"
 import { Icon } from "@opencode-ai/ui/icon"
 import { usePlatform } from "@/context/platform"
 import { DateTime } from "luxon"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { DialogCreateProject } from "@/components/dialog-create-project"
 
 export default function Home() {
   const sync = useGlobalSync()
   const layout = useLayout()
   const platform = usePlatform()
   const navigate = useNavigate()
+  const dialog = useDialog()
   const homedir = createMemo(() => sync.data.path.home)
 
   function openProject(directory: string) {
@@ -43,11 +46,21 @@ export default function Home() {
           <div class="mt-20 w-full flex flex-col gap-4">
             <div class="flex gap-2 items-center justify-between pl-3">
               <div class="text-14-medium text-text-strong">Recent projects</div>
-              <Show when={platform.openDirectoryPickerDialog}>
-                <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
-                  Open project
+              <div class="flex gap-2">
+                <Button
+                  icon="plus"
+                  size="normal"
+                  class="pl-2 pr-3"
+                  onClick={() => dialog.show(() => <DialogCreateProject />)}
+                >
+                  Create project
                 </Button>
-              </Show>
+                <Show when={platform.openDirectoryPickerDialog}>
+                  <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+                    Open project
+                  </Button>
+                </Show>
+              </div>
             </div>
             <ul class="flex flex-col gap-2">
               <For
@@ -77,14 +90,19 @@ export default function Home() {
             <Icon name="folder-add-left" size="large" />
             <div class="flex flex-col gap-1 items-center justify-center">
               <div class="text-14-medium text-text-strong">No recent projects</div>
-              <div class="text-12-regular text-text-weak">Get started by opening a local project</div>
+              <div class="text-12-regular text-text-weak">Get started by creating or opening a project</div>
             </div>
             <div />
-            <Show when={platform.openDirectoryPickerDialog}>
-              <Button class="px-3" onClick={chooseProject}>
-                Open project
+            <div class="flex gap-3">
+              <Button class="px-3" onClick={() => dialog.show(() => <DialogCreateProject />)}>
+                Create project
               </Button>
-            </Show>
+              <Show when={platform.openDirectoryPickerDialog}>
+                <Button class="px-3" variant="ghost" onClick={chooseProject}>
+                  Open project
+                </Button>
+              </Show>
+            </div>
           </div>
         </Match>
       </Switch>
diff --git a/packages/desktop/src/pages/layout.tsx b/packages/desktop/src/pages/layout.tsx
@@ -46,6 +46,7 @@ import { Binary } from "@opencode-ai/util/binary"
 import { Header } from "@/components/header"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
+import { DialogCreateProject } from "@/components/dialog-create-project"
 import { useCommand } from "@/context/command"
 import { ConstrainDragXAxis } from "@/utils/solid-dnd"
 
@@ -266,6 +267,10 @@ export default function Layout(props: ParentProps) {
     dialog.show(() => <DialogSelectProvider />)
   }
 
+  function createProject() {
+    dialog.show(() => <DialogCreateProject />)
+  }
+
   function navigateToProject(directory: string | undefined) {
     if (!directory) return
     const lastSession = store.lastSession[directory]
@@ -777,6 +782,17 @@ export default function Layout(props: ParentProps) {
                 </Button>
               </Tooltip>
             </Show>
+            <Tooltip placement="right" value="Create project" inactive={layout.sidebar.opened()}>
+              <Button
+                class="flex w-full text-left justify-start text-text-base stroke-[1.5px] rounded-lg px-2"
+                variant="ghost"
+                size="large"
+                icon="folder-add-left"
+                onClick={createProject}
+              >
+                <Show when={layout.sidebar.opened()}>Create project</Show>
+              </Button>
+            </Tooltip>
             {/* <Tooltip placement="right" value="Settings" inactive={layout.sidebar.opened()}> */}
             {/*   <Button */}
             {/*     disabled */}
diff --git a/packages/opencode/src/project/project.ts b/packages/opencode/src/project/project.ts
@@ -2,12 +2,14 @@ import z from "zod"
 import { Filesystem } from "../util/filesystem"
 import path from "path"
 import { $ } from "bun"
+import fs from "fs/promises"
 import { Storage } from "../storage/storage"
 import { Log } from "../util/log"
 import { Flag } from "@/flag/flag"
 import { Session } from "../session"
 import { work } from "../util/queue"
 import { fn } from "@opencode-ai/util/fn"
+import { NamedError } from "@opencode-ai/util/error"
 import { BusEvent } from "@/bus/bus-event"
 import { iife } from "@/util/iife"
 import { GlobalBus } from "@/bus/global"
@@ -218,4 +220,52 @@ export namespace Project {
       return result
     },
   )
+
+  export const CreateError = NamedError.create("CreateProjectError", z.object({ message: z.string() }))
+
+  export const create = fn(
+    z.object({
+      path: z.string().min(1),
+      name: z.string().optional(),
+    }),
+    async (input) => {
+      const expandedPath = Filesystem.expanduser(input.path)
+      const projectPath = path.resolve(expandedPath)
+
+      // Validate absolute path
+      if (!path.isAbsolute(expandedPath)) {
+        throw new CreateError({ message: "Path must be absolute" })
+      }
+
+      // Create directory if it doesn't exist
+      await fs.mkdir(projectPath, { recursive: true })
+
+      // Check if it's already a git repo with commits
+      const gitDir = path.join(projectPath, ".git")
+      const isGitRepo = await fs.access(gitDir).then(() => true).catch(() => false)
+
+      if (!isGitRepo) {
+        // Initialize git and create empty initial commit (required for project ID which is the first commit hash)
+        await $`git init`.cwd(projectPath).quiet()
+        await $`git commit --allow-empty -m "Initial commit"`.cwd(projectPath).quiet()
+      } else {
+        // Check if there are any commits
+        const hasCommits = await $`git rev-list -n 1 --all`.cwd(projectPath).quiet().nothrow().text()
+        if (!hasCommits.trim()) {
+          await $`git commit --allow-empty -m "Initial commit"`.cwd(projectPath).quiet()
+        }
+      }
+
+      // Register project using fromDirectory
+      const project = await fromDirectory(projectPath)
+
+      // Set custom name if provided
+      if (input.name) {
+        await update({ projectID: project.id, name: input.name })
+        return { ...project, name: input.name }
+      }
+
+      return project
+    },
+  )
 }
diff --git a/packages/opencode/src/server/project.ts b/packages/opencode/src/server/project.ts
@@ -50,6 +50,31 @@ export const ProjectRoute = new Hono()
       return c.json(Instance.project)
     },
   )
+  .post(
+    "/",
+    describeRoute({
+      summary: "Create project",
+      description: "Create a new project directory and initialize it as a git repository.",
+      operationId: "project.create",
+      responses: {
+        200: {
+          description: "Created project information",
+          content: {
+            "application/json": {
+              schema: resolver(Project.Info),
+            },
+          },
+        },
+        ...errors(400),
+      },
+    }),
+    validator("json", Project.create.schema),
+    async (c) => {
+      const body = c.req.valid("json")
+      const project = await Project.create(body)
+      return c.json(project)
+    },
+  )
   .patch(
     "/:projectID",
     describeRoute({
diff --git a/packages/opencode/src/server/server.ts b/packages/opencode/src/server/server.ts
@@ -29,6 +29,7 @@ import { Command } from "../command"
 import { ProviderAuth } from "../provider/auth"
 import { Global } from "../global"
 import { ProjectRoute } from "./project"
+import { Project } from "../project/project"
 import { ToolRegistry } from "../tool/registry"
 import { zodToJsonSchema } from "zod-to-json-schema"
 import { SessionPrompt } from "../session/prompt"
@@ -70,6 +71,7 @@ export namespace Server {
           let status: ContentfulStatusCode
           if (err instanceof Storage.NotFoundError) status = 404
           else if (err instanceof Provider.ModelNotFoundError) status = 400
+          else if (err instanceof Project.CreateError) status = 400
           else status = 500
           return c.json(err.toObject(), { status })
         }
diff --git a/packages/opencode/src/util/filesystem.ts b/packages/opencode/src/util/filesystem.ts
@@ -1,8 +1,14 @@
 import { realpathSync } from "fs"
 import { exists } from "fs/promises"
+import { homedir } from "os"
 import { dirname, join, relative } from "path"
 
 export namespace Filesystem {
+  export function expanduser(p: string): string {
+    if (p === "~") return homedir()
+    if (p.startsWith("~/")) return join(homedir(), p.slice(2))
+    return p
+  }
   /**
    * On Windows, normalize a path to its canonical casing using the filesystem.
    * This is needed because Windows paths are case-insensitive but LSP servers
diff --git a/packages/sdk/js/src/v2/gen/sdk.gen.ts b/packages/sdk/js/src/v2/gen/sdk.gen.ts
@@ -50,6 +50,8 @@ import type {
   PathGetResponses,
   PermissionRespondErrors,
   PermissionRespondResponses,
+  ProjectCreateErrors,
+  ProjectCreateResponses,
   ProjectCurrentResponses,
   ProjectListResponses,
   ProjectUpdateErrors,
@@ -228,6 +230,43 @@ export class Project extends HeyApiClient {
     })
   }
 
+  /**
+   * Create project
+   *
+   * Create a new project directory and initialize it as a git repository.
+   */
+  public create<ThrowOnError extends boolean = false>(
+    parameters?: {
+      directory?: string
+      path?: string
+      name?: string
+    },
+    options?: Options<never, ThrowOnError>,
+  ) {
+    const params = buildClientParams(
+      [parameters],
+      [
+        {
+          args: [
+            { in: "query", key: "directory" },
+            { in: "body", key: "path" },
+            { in: "body", key: "name" },
+          ],
+        },
+      ],
+    )
+    return (options?.client ?? this.client).post<ProjectCreateResponses, ProjectCreateErrors, ThrowOnError>({
+      url: "/project",
+      ...options,
+      ...params,
+      headers: {
+        "Content-Type": "application/json",
+        ...options?.headers,
+        ...params.headers,
+      },
+    })
+  }
+
   /**
    * Get current project
    *
diff --git a/packages/sdk/js/src/v2/gen/types.gen.ts b/packages/sdk/js/src/v2/gen/types.gen.ts
