feat(git-sources): create a stack from a Git repository (#606)

* refactor(git-sources): extract GitSourceFields from GitSourcePanel Pure extraction of the repo/branch/path/auth/apply-mode form fields into a reusable controlled component so the upcoming Create Stack from Git flow can render the same form in the Create Stack dialog. No behavior change. * feat(git-sources): create a stack from a Git repository Add a From Git tab to the Create Stack dialog so users can name a new stack, point it at a repo + branch + compose path, and have the compose fetched, validated, written to disk, and linked in one shot. Optional deploy-after-create runs the initial bring-up when requested. Backend: new POST /api/stacks/from-git route gated by stack:create. GitSourceService.createStackFromGit() fetches and validates before touching disk, then creates the stack, writes the compose (and .env if sync is enabled), and seeds the git source row with the fetched commit so future pulls produce a clean diff. Runs under the per-stack lock so a concurrent webhook cannot race the create. Deploy failure is non-fatal and surfaced to the caller. Frontend: the existing Create Stack dialog is now tabbed, with Empty keeping the original single-field flow unchanged. * test(git-sources): cover create-from-git endpoint and e2e flow Service tests verify createStackFromGit seeds the last_applied columns on success, writes the env file when sync is enabled, refuses an invalid apply-matrix without fetching, rejects invalid compose without leaving orphan state, and rolls back the on-disk stack dir when a post-create step fails. Route tests cover auth, missing stack_name, invalid stack name, http:// rejection, oversized repo_url, and the 409 collision guard. E2E adds a Create-stack-from-Git block covering tab visibility, client-side HTTPS check, backend .git/config rejection, and a happy-path fetch against a public demo repo (skipped on network failure). * docs(git-sources): document create-stack-from-git tab Add a new section near the top describing the From Git tab in the Create Stack dialog: what it does, the Deploy after create checkbox, and the four failure modes (name collision, unreachable repo, invalid compose, deploy-after-create failure).
2026-07-28 12:49:03 +00:00 · 2026-04-15 08:05:10 -04:00
parent a4ec11173b
commit 3955267bbe
10 changed files with 1006 additions and 152 deletions
@@ -165,6 +165,68 @@ describe('git-source routes — invalid stack names', () => {
    });
 });

+describe('POST /api/stacks/from-git', () => {
+    const validBody = {
+        stack_name: 'route-from-git',
+        repo_url: 'https://github.com/example/repo.git',
+        branch: 'main',
+        compose_path: 'compose.yaml',
+        auth_type: 'none' as const,
+    };
+
+    it('returns 401 without auth', async () => {
+        const res = await request(app).post('/api/stacks/from-git').send(validBody);
+        expect(res.status).toBe(401);
+    });
+
+    it('rejects missing stack_name with 400', async () => {
+        const { stack_name: _unused, ...body } = validBody;
+        void _unused;
+        const res = await request(app)
+            .post('/api/stacks/from-git')
+            .set('Authorization', `Bearer ${adminToken()}`)
+            .send(body);
+        expect(res.status).toBe(400);
+        expect(res.body.error).toMatch(/stack_name/i);
+    });
+
+    it('rejects invalid stack name with 400', async () => {
+        const res = await request(app)
+            .post('/api/stacks/from-git')
+            .set('Authorization', `Bearer ${adminToken()}`)
+            .send({ ...validBody, stack_name: '../escape' });
+        expect(res.status).toBe(400);
+        expect(res.body.error).toMatch(/stack name/i);
+    });
+
+    it('rejects http:// URLs with 400', async () => {
+        const res = await request(app)
+            .post('/api/stacks/from-git')
+            .set('Authorization', `Bearer ${adminToken()}`)
+            .send({ ...validBody, repo_url: 'http://github.com/example/repo.git' });
+        expect(res.status).toBe(400);
+        expect(res.body.error).toMatch(/HTTPS/i);
+    });
+
+    it('rejects oversized repo_url with 400', async () => {
+        const res = await request(app)
+            .post('/api/stacks/from-git')
+            .set('Authorization', `Bearer ${adminToken()}`)
+            .send({ ...validBody, repo_url: 'https://example.com/' + 'a'.repeat(2048) });
+        expect(res.status).toBe(400);
+        expect(res.body.error).toMatch(/repo_url/i);
+    });
+
+    it('returns 409 when a stack with that name already exists on disk', async () => {
+        const res = await request(app)
+            .post('/api/stacks/from-git')
+            .set('Authorization', `Bearer ${adminToken()}`)
+            .send({ ...validBody, stack_name: 'existing-stack' });
+        expect(res.status).toBe(409);
+        expect(res.body.error).toMatch(/already exists/i);
+    });
+});
+
 describe('GET /api/git-sources', () => {
    it('returns 200 and a JSON array for an authenticated admin', async () => {
        const res = await request(app)
@@ -493,6 +493,155 @@ describe('GitSourceService.pull', () => {
    });
 });

+describe('GitSourceService.createStackFromGit', () => {
+    async function cleanupStackDir(name: string) {
+        const { FileSystemService } = await import('../services/FileSystemService');
+        try {
+            await FileSystemService.getInstance().deleteStack(name);
+        } catch {
+            // directory may not exist; ignore
+        }
+    }
+
+    it('creates a stack on disk, writes compose, and seeds last_applied columns', async () => {
+        const sha = 'fedcba9876543210fedcba9876543210fedcba98';
+        mockSuccessfulClone({
+            compose: 'services:\n  web:\n    image: nginx\n',
+            sha,
+        });
+        const svc = GitSourceService.getInstance();
+
+        const result = await svc.createStackFromGit({
+            stackName: 'create-happy',
+            repoUrl: 'https://github.com/example/repo.git',
+            branch: 'main',
+            composePath: 'compose.yaml',
+            syncEnv: false,
+            envPath: null,
+            authType: 'none',
+            token: null,
+            autoApplyOnWebhook: false,
+            autoDeployOnApply: false,
+        });
+
+        expect(result.commitSha).toBe(sha);
+        expect(result.envWritten).toBe(false);
+        expect(result.source.last_applied_commit_sha).toBe(sha);
+        expect(result.source.pending_commit_sha).toBeNull();
+
+        const { FileSystemService } = await import('../services/FileSystemService');
+        const onDisk = await FileSystemService.getInstance().getStackContent('create-happy');
+        expect(onDisk).toContain('image: nginx');
+
+        await cleanupStackDir('create-happy');
+    });
+
+    it('writes the env file when sync_env is enabled', async () => {
+        const sha = '0101010101010101010101010101010101010101';
+        mockSuccessfulClone({
+            compose: 'services:\n  web:\n    image: nginx\n',
+            env: 'FOO=bar\n',
+            envPath: '.env',
+            sha,
+        });
+        const svc = GitSourceService.getInstance();
+
+        const result = await svc.createStackFromGit({
+            stackName: 'create-env',
+            repoUrl: 'https://github.com/example/repo.git',
+            branch: 'main',
+            composePath: 'compose.yaml',
+            syncEnv: true,
+            envPath: '.env',
+            authType: 'none',
+            token: null,
+            autoApplyOnWebhook: false,
+            autoDeployOnApply: false,
+        });
+        expect(result.envWritten).toBe(true);
+
+        const { FileSystemService } = await import('../services/FileSystemService');
+        const env = await FileSystemService.getInstance().getEnvContent('create-env');
+        expect(env).toBe('FOO=bar\n');
+
+        await cleanupStackDir('create-env');
+    });
+
+    it('rejects an invalid apply-matrix without fetching or writing disk', async () => {
+        const svc = GitSourceService.getInstance();
+        await expect(svc.createStackFromGit({
+            stackName: 'create-bad-matrix',
+            repoUrl: 'https://github.com/example/repo.git',
+            branch: 'main',
+            composePath: 'compose.yaml',
+            syncEnv: false,
+            envPath: null,
+            authType: 'none',
+            token: null,
+            autoApplyOnWebhook: false,
+            autoDeployOnApply: true,
+        })).rejects.toBeInstanceOf(GitSourceError);
+
+        expect(mockGitClone).not.toHaveBeenCalled();
+        expect(DatabaseService.getInstance().getGitSource('create-bad-matrix')).toBeUndefined();
+    });
+
+    it('rejects when compose validation fails and leaves no stack/row behind', async () => {
+        mockSuccessfulClone({
+            // Non-mapping root is rejected by validateCompose() pre-check
+            compose: '- not-a-mapping\n',
+        });
+        const svc = GitSourceService.getInstance();
+
+        await expect(svc.createStackFromGit({
+            stackName: 'create-bad-yaml',
+            repoUrl: 'https://github.com/example/repo.git',
+            branch: 'main',
+            composePath: 'compose.yaml',
+            syncEnv: false,
+            envPath: null,
+            authType: 'none',
+            token: null,
+            autoApplyOnWebhook: false,
+            autoDeployOnApply: false,
+        })).rejects.toMatchObject({ code: 'GIT_ERROR' });
+
+        expect(DatabaseService.getInstance().getGitSource('create-bad-yaml')).toBeUndefined();
+        const { FileSystemService } = await import('../services/FileSystemService');
+        const stacks = await FileSystemService.getInstance().getStacks();
+        expect(stacks).not.toContain('create-bad-yaml');
+    });
+
+    it('rolls back the stack dir when a post-create step fails', async () => {
+        mockSuccessfulClone({
+            compose: 'services:\n  web:\n    image: nginx\n',
+        });
+        const { FileSystemService } = await import('../services/FileSystemService');
+        const saveSpy = vi.spyOn(FileSystemService.prototype, 'saveStackContent')
+            .mockRejectedValueOnce(new Error('simulated disk failure'));
+
+        const svc = GitSourceService.getInstance();
+        await expect(svc.createStackFromGit({
+            stackName: 'create-rollback',
+            repoUrl: 'https://github.com/example/repo.git',
+            branch: 'main',
+            composePath: 'compose.yaml',
+            syncEnv: false,
+            envPath: null,
+            authType: 'none',
+            token: null,
+            autoApplyOnWebhook: false,
+            autoDeployOnApply: false,
+        })).rejects.toThrow(/simulated disk failure/);
+
+        expect(DatabaseService.getInstance().getGitSource('create-rollback')).toBeUndefined();
+        const stacks = await FileSystemService.getInstance().getStacks();
+        expect(stacks).not.toContain('create-rollback');
+
+        saveSpy.mockRestore();
+    });
+});
+
 describe('GitSourceService.apply', () => {
    async function seedPending(stackName: string, composeContent: string, commitSha: string) {
        mockSuccessfulClone({ compose: composeContent, sha: commitSha });
@@ -3931,6 +3931,119 @@ app.post('/api/stacks', async (req: Request, res: Response) => {
  }
 });

+app.post('/api/stacks/from-git', async (req: Request, res: Response) => {
+  if (!requirePermission(req, res, 'stack:create')) return;
+  try {
+    const {
+      stack_name,
+      repo_url,
+      branch,
+      compose_path,
+      sync_env,
+      env_path,
+      auth_type,
+      token,
+      auto_apply_on_webhook,
+      auto_deploy_on_apply,
+      deploy_now,
+    } = req.body ?? {};
+
+    if (typeof stack_name !== 'string' || !stack_name.trim()) {
+      return res.status(400).json({ error: 'stack_name is required' });
+    }
+    if (!isValidStackName(stack_name)) {
+      return res.status(400).json({ error: 'Stack name can only contain alphanumeric characters, hyphens, and underscores' });
+    }
+    if (typeof repo_url !== 'string' || !repo_url.trim()) {
+      return res.status(400).json({ error: 'repo_url is required' });
+    }
+    if (typeof branch !== 'string' || !branch.trim()) {
+      return res.status(400).json({ error: 'branch is required' });
+    }
+    if (typeof compose_path !== 'string' || !compose_path.trim()) {
+      return res.status(400).json({ error: 'compose_path is required' });
+    }
+    const resolvedAuthType = auth_type === 'token' ? 'token' : 'none';
+    if (!/^https:\/\//i.test(repo_url)) {
+      return res.status(400).json({ error: 'Only HTTPS repository URLs are supported' });
+    }
+    if (repo_url.length > 2048) {
+      return res.status(400).json({ error: 'repo_url is too long' });
+    }
+    if (branch.length > 256) {
+      return res.status(400).json({ error: 'branch is too long' });
+    }
+    if (compose_path.length > 1024) {
+      return res.status(400).json({ error: 'compose_path is too long' });
+    }
+    if (typeof env_path === 'string' && env_path.length > 1024) {
+      return res.status(400).json({ error: 'env_path is too long' });
+    }
+    if (typeof token === 'string' && token.length > 8192) {
+      return res.status(400).json({ error: 'token is too long' });
+    }
+
+    // Reject if a stack with this name already exists on disk. Without this
+    // the service would catch it at createStack() time, but erroring early
+    // avoids spinning up a temp clone we will not use.
+    const stacks = await FileSystemService.getInstance(req.nodeId).getStacks();
+    if (stacks.includes(stack_name)) {
+      return res.status(409).json({ error: 'Stack already exists' });
+    }
+
+    const syncEnv = Boolean(sync_env);
+    const resolvedEnvPath = syncEnv
+      ? (typeof env_path === 'string' && env_path.trim()
+        ? env_path
+        : path.posix.join(path.posix.dirname(compose_path.replace(/\\/g, '/')) || '.', '.env'))
+      : null;
+
+    const result = await GitSourceService.getInstance().createStackFromGit({
+      stackName: stack_name.trim(),
+      repoUrl: repo_url.trim(),
+      branch: branch.trim(),
+      composePath: compose_path.trim(),
+      syncEnv,
+      envPath: resolvedEnvPath,
+      authType: resolvedAuthType,
+      token: resolvedAuthType === 'token' && typeof token === 'string' && token !== '' ? token : null,
+      autoApplyOnWebhook: Boolean(auto_apply_on_webhook),
+      autoDeployOnApply: Boolean(auto_deploy_on_apply),
+    });
+
+    invalidateNodeCaches(req.nodeId);
+
+    // Deploy is best-effort. The compose file is already on disk and the
+    // git source is linked, so a deploy failure does not roll back the
+    // stack; the user can retry the deploy from the editor. This mirrors
+    // the apply-then-deploy behavior in GitSourceService.apply().
+    let deployed = false;
+    let deployError: string | undefined;
+    if (deploy_now === true) {
+      try {
+        await ComposeService.getInstance(req.nodeId).deployStack(stack_name);
+        deployed = true;
+        invalidateNodeCaches(req.nodeId);
+      } catch (e) {
+        deployError = getErrorMessage(e, 'Deploy failed');
+        console.error(`[Stacks] Deploy after create-from-git failed for ${stack_name}:`, deployError);
+      }
+    }
+
+    console.log(`[Stacks] Stack created from Git: ${stack_name} at ${result.commitSha.slice(0, 7)}`);
+    res.json({
+      name: stack_name,
+      source: result.source,
+      commitSha: result.commitSha,
+      envWritten: result.envWritten,
+      deployed,
+      deployError,
+    });
+  } catch (error) {
+    sendGitSourceError(res, error);
+  }
+});
+
 app.delete('/api/stacks/:stackName', async (req: Request, res: Response) => {
  const stackName = req.params.stackName as string;
  if (!requirePermission(req, res, 'stack:delete', 'stack', stackName)) return;
@@ -65,6 +65,25 @@ export interface UpsertInput {
    autoDeployOnApply: boolean;
 }

+export interface CreateStackFromGitInput {
+    stackName: string;
+    repoUrl: string;
+    branch: string;
+    composePath: string;
+    syncEnv: boolean;
+    envPath: string | null;
+    authType: GitSourceAuthType;
+    token: string | null;
+    autoApplyOnWebhook: boolean;
+    autoDeployOnApply: boolean;
+}
+
+export interface CreateStackFromGitResult {
+    source: PublicGitSource;
+    commitSha: string;
+    envWritten: boolean;
+}
+
 export interface PullResult {
    commitSha: string;
    incomingCompose: string;
@@ -677,6 +696,117 @@ export class GitSourceService {
        DatabaseService.getInstance().clearGitSourcePending(stackName);
    }

+    // ─── Create stack from Git ───────────────────────────────────────────────
+
+    /**
+     * Fetch a compose file from a Git repository and use it to create a
+     * brand-new stack on disk + the matching git-source row. The caller is
+     * responsible for rolling back (deleteStack + deleteGitSource) if a
+     * later step such as an optional deploy fails; this method itself will
+     * undo its own partial state if anything *before* the DB insert fails.
+     *
+     * Serialized under the same per-stack mutex as pull/apply so a racing
+     * webhook cannot collide with a fresh create.
+     */
+    public async createStackFromGit(input: CreateStackFromGitInput): Promise<CreateStackFromGitResult> {
+        return this.withStackLock(input.stackName, async () => {
+            const fsSvc = FileSystemService.getInstance();
+            const db = DatabaseService.getInstance();
+            const diag = isDebugEnabled();
+
+            if (input.autoDeployOnApply && !input.autoApplyOnWebhook) {
+                throw new GitSourceError('GIT_ERROR', 'Auto-deploy requires auto-apply-on-webhook to be enabled.');
+            }
+
+            // 1. Fetch from git BEFORE touching disk or DB. If the fetch
+            //    fails there is nothing to clean up.
+            const fetched = await this.fetchFromGit({
+                repoUrl: input.repoUrl,
+                branch: input.branch,
+                composePath: input.composePath,
+                envPath: input.syncEnv ? input.envPath : null,
+                token: input.token,
+            });
+
+            // 2. Validate against the same `docker compose config` check the
+            //    apply path uses. Reject before creating anything on disk.
+            const validation = await this.validateCompose(fetched.composeContent, fetched.envContent);
+            if (!validation.ok) {
+                throw new GitSourceError('GIT_ERROR', `Compose validation failed: ${validation.error}`);
+            }
+
+            // 3. Create directory + boilerplate, then overwrite with the
+            //    fetched content. createStack() throws if the directory
+            //    already exists, so a name collision is caught here.
+            let stackCreated = false;
+            try {
+                await fsSvc.createStack(input.stackName);
+                stackCreated = true;
+                await fsSvc.saveStackContent(input.stackName, fetched.composeContent);
+                let envWritten = false;
+                if (input.syncEnv && fetched.envContent !== null) {
+                    await fsSvc.saveEnvContent(input.stackName, fetched.envContent);
+                    envWritten = true;
+                }
+
+                // 4. Insert the git-source row, then mark it applied so future
+                //    pulls diff against the fetched commit rather than treating
+                //    it as "local edits detected".
+                const encryptedToken = input.authType === 'token' && input.token
+                    ? this.crypto.encrypt(input.token)
+                    : null;
+                db.upsertGitSource({
+                    stack_name: input.stackName,
+                    repo_url: input.repoUrl,
+                    branch: input.branch,
+                    compose_path: input.composePath,
+                    sync_env: input.syncEnv,
+                    env_path: input.syncEnv ? input.envPath : null,
+                    auth_type: input.authType,
+                    encrypted_token: encryptedToken,
+                    auto_apply_on_webhook: input.autoApplyOnWebhook,
+                    auto_deploy_on_apply: input.autoDeployOnApply,
+                    last_applied_commit_sha: fetched.commitSha,
+                    last_applied_content_hash: this.hashContent(fetched.composeContent, fetched.envContent),
+                    pending_commit_sha: null,
+                    pending_compose_content: null,
+                    pending_env_content: null,
+                    pending_fetched_at: null,
+                    last_debounce_at: null,
+                });
+                db.markGitSourceApplied(
+                    input.stackName,
+                    fetched.commitSha,
+                    this.hashContent(fetched.composeContent, fetched.envContent),
+                );
+
+                const source = this.get(input.stackName);
+                if (!source) {
+                    throw new GitSourceError('GIT_ERROR', 'Failed to read back created git source.');
+                }
+
+                console.log(`[GitSource] Created stack ${input.stackName} from ${repoHost(input.repoUrl)} at ${fetched.commitSha.slice(0, 7)}`);
+                if (diag) {
+                    console.log(`[GitSource:diag] createStackFromGit ok stack=${input.stackName} sha=${fetched.commitSha.slice(0, 7)} envWritten=${envWritten}`);
+                }
+                return { source, commitSha: fetched.commitSha, envWritten };
+            } catch (e) {
+                // Roll back any partial on-disk state so the caller can retry
+                // cleanly. The DB row is only inserted at step 4, so an error
+                // earlier leaves nothing to clean in the DB.
+                if (stackCreated) {
+                    try {
+                        await fsSvc.deleteStack(input.stackName);
+                    } catch (cleanupErr) {
+                        console.error(`[GitSource] Rollback: failed to remove partial stack dir ${input.stackName}:`, cleanupErr);
+                    }
+                }
+                db.deleteGitSource(input.stackName);
+                throw e;
+            }
+        });
+    }
+
    // ─── Webhook-triggered pull ──────────────────────────────────────────────

    /**
@@ -16,6 +16,27 @@ Git Sources are available to all Sencho users on the Community tier.

 Writes land in the stack's existing directory using the same storage Sencho uses for the in-browser editor. Existing history, alerts, and metrics are unaffected.

+## Create a stack from a Git repository
+
+Skip the "empty stack then link later" detour and point at a repo from the start. Click **Create Stack** in the sidebar, switch to the **From Git** tab, and fill in the same fields you would on the Git Source panel.
+
+<Frame>
+  <img src="/images/git-sources/create-from-git-tab.png" alt="Create Stack dialog with the From Git tab selected, showing stack name, repository URL, branch, compose path, and a Deploy after create checkbox" />
+</Frame>
+
+Sencho fetches the compose file, validates it with `docker compose config`, writes it to a fresh stack directory, and links the git source in one step. The last-applied commit sha is seeded from the fetch so the first pull produces a clean diff rather than a "local edits detected" warning.
+
+Tick **Deploy after create** to run `docker compose up -d` immediately after the files land. If the deploy fails, the stack and git source are kept on disk so you can fix the underlying issue (missing image, port conflict, host resources) and retry the deploy from the editor.
+
+### Failure modes on create
+
+| Situation | What happens |
+|-----------|--------------|
+| Stack name already exists | Sencho returns **409** with "Stack already exists" and makes no changes on disk or in the database. Pick a different name or remove the existing stack. |
+| Repository unreachable or auth failed | Fetch fails before anything is created. The form stays open with an error toast describing the cause. |
+| Fetched compose fails validation | The stack directory is not created and no git source row is inserted. The error toast shows the `docker compose config` message. |
+| Fetch + validate succeed but optional deploy fails | The stack and git source are kept. The toast reads "Stack created, but deploy failed: ..." and you can retry the deploy from the editor. |
+
 ## Configure a source

 <Frame>
@@ -198,3 +198,117 @@ test.describe('Git Sources', () => {
    await expect(page.getByRole('dialog').getByRole('button', { name: /^Remove$/ })).not.toBeVisible({ timeout: 5_000 });
  });
 });
+
+const CREATE_FROM_GIT_STACK = 'e2e-create-from-git';
+
+async function deleteCreateFromGitStack(page: Page) {
+  await page.evaluate(async (name) => {
+    await fetch(`/api/stacks/${name}/git-source`, { method: 'DELETE', credentials: 'include' }).catch(() => {});
+    await fetch(`/api/stacks/${name}`, { method: 'DELETE', credentials: 'include' }).catch(() => {});
+  }, CREATE_FROM_GIT_STACK);
+}
+
+async function openCreateStackDialog(page: Page) {
+  await page.getByRole('button', { name: 'Create Stack' }).click();
+  await expect(page.getByRole('dialog').getByText('Create New Stack')).toBeVisible({ timeout: 5_000 });
+}
+
+test.describe('Create stack from Git', () => {
+  test.beforeAll(async ({ browser }) => {
+    const page = await browser.newPage();
+    await loginAs(page);
+    await deleteCreateFromGitStack(page);
+    await page.close();
+  });
+
+  test.afterAll(async ({ browser }) => {
+    const page = await browser.newPage();
+    await loginAs(page);
+    await deleteCreateFromGitStack(page);
+    await page.close();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    await loginAs(page);
+    await expect(page.getByRole('button', { name: 'Create Stack' })).toBeVisible({ timeout: 15_000 });
+    await expect(page.locator('[data-stacks-loaded="true"]')).toBeAttached({ timeout: 15_000 });
+  });
+
+  test('dialog exposes Empty and From Git tabs', async ({ page }) => {
+    await openCreateStackDialog(page);
+    await expect(page.getByRole('dialog').getByRole('tab', { name: /Empty/i })).toBeVisible();
+    await expect(page.getByRole('dialog').getByRole('tab', { name: /From Git/i })).toBeVisible();
+  });
+
+  test('From Git tab rejects non-HTTPS URLs client-side', async ({ page }) => {
+    await openCreateStackDialog(page);
+    await page.getByRole('dialog').getByRole('tab', { name: /From Git/i }).click();
+
+    await page.locator('#create-git-stack-name').fill(CREATE_FROM_GIT_STACK);
+    await page.locator('#git-source-repo').fill('git@github.com:org/repo.git');
+    await page.locator('#git-source-branch').fill('main');
+    await page.locator('#git-source-path').fill('compose.yaml');
+
+    await page.getByRole('dialog').getByRole('button', { name: /Create from Git/i }).click();
+    await expect(page.getByText(/Only HTTPS repository URLs are supported/i)).toBeVisible({ timeout: 5_000 });
+  });
+
+  test('backend rejects .git/config compose_path on from-git', async ({ page }) => {
+    const body = await page.evaluate(async (name) => {
+      const res = await fetch(`/api/stacks/from-git`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          stack_name: name,
+          repo_url: 'https://github.com/example/repo.git',
+          branch: 'main',
+          compose_path: '.git/config',
+          auth_type: 'none',
+        }),
+      });
+      return { status: res.status, body: await res.json().catch(() => ({})) };
+    }, CREATE_FROM_GIT_STACK);
+    expect(body.status).toBeGreaterThanOrEqual(400);
+    expect(JSON.stringify(body.body)).toMatch(/\.git|file/i);
+  });
+
+  test('happy path: fetches compose, creates stack, links git source', async ({ page }) => {
+    // Use a public demo repo. If network egress is blocked, the POST fails
+    // and we skip the rest of the test rather than hanging the suite.
+    const result = await page.evaluate(async (name) => {
+      const res = await fetch(`/api/stacks/from-git`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({
+          stack_name: name,
+          repo_url: 'https://github.com/docker/awesome-compose.git',
+          branch: 'master',
+          compose_path: 'nginx-golang/compose.yaml',
+          auth_type: 'none',
+          auto_apply_on_webhook: false,
+          auto_deploy_on_apply: false,
+          deploy_now: false,
+        }),
+      });
+      return { status: res.status, body: await res.json().catch(() => ({})) };
+    }, CREATE_FROM_GIT_STACK);
+
+    if (result.status >= 400) {
+      test.skip(true, `Upstream unreachable (status ${result.status}); skipping happy path`);
+      return;
+    }
+    expect(result.status).toBe(200);
+    expect(result.body?.source?.stack_name).toBe(CREATE_FROM_GIT_STACK);
+    expect(result.body?.source?.last_applied_commit_sha).toBeTruthy();
+
+    // Stack dir should now exist and the compose should contain the upstream service names.
+    const contentStatus = await page.evaluate(async (name) => {
+      const res = await fetch(`/api/stacks/${name}`, { credentials: 'include' });
+      return { status: res.status, body: await res.text() };
+    }, CREATE_FROM_GIT_STACK);
+    expect(contentStatus.status).toBe(200);
+    expect(contentStatus.body).toMatch(/services:/);
+  });
+});
@@ -33,6 +33,8 @@ import { toast } from '@/components/ui/toast-store';
 import { Label } from './ui/label';
 import { Command, CommandInput, CommandList, CommandItem } from './ui/command';
 import { ScrollArea } from './ui/scroll-area';
+import { Checkbox } from './ui/checkbox';
+import { GitSourceFields, type ApplyMode } from './stack/GitSourceFields';
 import { Skeleton } from './ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './ui/hover-card';
@@ -129,8 +131,19 @@ export default function EditorLayout() {
  const monacoEditorRef = useRef<import('monaco-editor').editor.IStandaloneCodeEditor | null>(null);
  const pendingStackLoadRef = useRef<string | null>(null);
  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+  const [createMode, setCreateMode] = useState<'empty' | 'git'>('empty');
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
  const [newStackName, setNewStackName] = useState('');
+  // "From Git" tab state
+  const [gitRepoUrl, setGitRepoUrl] = useState('');
+  const [gitBranch, setGitBranch] = useState('main');
+  const [gitComposePath, setGitComposePath] = useState('compose.yaml');
+  const [gitSyncEnv, setGitSyncEnv] = useState(false);
+  const [gitAuthType, setGitAuthType] = useState<'none' | 'token'>('none');
+  const [gitToken, setGitToken] = useState('');
+  const [gitApplyMode, setGitApplyMode] = useState<ApplyMode>('review');
+  const [gitDeployNow, setGitDeployNow] = useState(false);
+  const [creatingFromGit, setCreatingFromGit] = useState(false);
  const [stackToDelete, setStackToDelete] = useState<string | null>(null);
  const [pendingUnsavedLoad, setPendingUnsavedLoad] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(false);
@@ -1301,6 +1314,83 @@ export default function EditorLayout() {
    }
  };

+  const resetCreateFromGitForm = () => {
+    setNewStackName('');
+    setGitRepoUrl('');
+    setGitBranch('main');
+    setGitComposePath('compose.yaml');
+    setGitSyncEnv(false);
+    setGitAuthType('none');
+    setGitToken('');
+    setGitApplyMode('review');
+    setGitDeployNow(false);
+  };
+
+  const handleCreateStackFromGit = async () => {
+    const stackName = newStackName.trim();
+    if (!stackName) {
+      toast.error('Stack name is required.');
+      return;
+    }
+    if (!gitRepoUrl.trim() || !gitBranch.trim() || !gitComposePath.trim()) {
+      toast.error('Repository URL, branch, and compose path are required.');
+      return;
+    }
+    if (!/^https:\/\//i.test(gitRepoUrl.trim())) {
+      toast.error('Only HTTPS repository URLs are supported.');
+      return;
+    }
+    setCreatingFromGit(true);
+    const loadingId = toast.loading(gitDeployNow ? 'Fetching, creating, and deploying...' : 'Fetching and creating stack...');
+    try {
+      const autoApply = gitApplyMode !== 'review';
+      const autoDeploy = gitApplyMode === 'auto-deploy';
+      const body: Record<string, unknown> = {
+        stack_name: stackName,
+        repo_url: gitRepoUrl.trim(),
+        branch: gitBranch.trim(),
+        compose_path: gitComposePath.trim(),
+        sync_env: gitSyncEnv,
+        auth_type: gitAuthType,
+        auto_apply_on_webhook: autoApply,
+        auto_deploy_on_apply: autoDeploy,
+        deploy_now: gitDeployNow,
+      };
+      if (gitAuthType === 'token' && gitToken !== '') {
+        body.token = gitToken;
+      }
+      const response = await apiFetch('/stacks/from-git', {
+        method: 'POST',
+        body: JSON.stringify(body),
+      });
+      if (!response.ok) {
+        const err = await response.json().catch(() => ({}));
+        if (response.status === 409) {
+          throw new Error(err?.error || 'Stack already exists.');
+        }
+        throw new Error(err?.error || 'Failed to create stack from Git.');
+      }
+      const data: { deployed?: boolean; deployError?: string } = await response.json();
+      if (gitDeployNow && data.deployError) {
+        toast.warning(`Stack created, but deploy failed: ${data.deployError}`);
+      } else if (gitDeployNow && data.deployed) {
+        toast.success('Stack created and deployed from Git.');
+      } else {
+        toast.success('Stack created from Git.');
+      }
+      setCreateDialogOpen(false);
+      resetCreateFromGitForm();
+      await refreshStacks();
+      await loadFile(stackName);
+    } catch (error) {
+      console.error('Failed to create stack from Git:', error);
+      toast.error((error as Error)?.message || 'Failed to create stack from Git.');
+    } finally {
+      toast.dismiss(loadingId);
+      setCreatingFromGit(false);
+    }
+  };
+
  const openBashModal = (containerId: string, containerName: string) => {
    setSelectedContainer({ id: containerId, name: containerName });
    setBashModalOpen(true);
@@ -1427,29 +1517,119 @@ export default function EditorLayout() {

        {/* Create Stack & Scan Buttons */}
        {can('stack:create') && <div className="p-4 flex gap-2">
-          <Dialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
+          <Dialog open={createDialogOpen} onOpenChange={(o) => {
+            setCreateDialogOpen(o);
+            if (!o) {
+              setCreateMode('empty');
+              resetCreateFromGitForm();
+            }
+          }}>
            <DialogTrigger asChild>
              <Button variant="outline" className="flex-1 rounded-lg">
                <Plus className="w-4 h-4 mr-2" />
                Create Stack
              </Button>
            </DialogTrigger>
-            <DialogContent>
-              <DialogHeader>
+            <DialogContent className="max-w-xl w-[95vw] p-0 gap-0">
+              <DialogHeader className="px-6 pt-6 pb-3">
                <DialogTitle>Create New Stack</DialogTitle>
              </DialogHeader>
-              <div className="py-4 space-y-2">
-                <Label htmlFor="create-stack-name">Stack Name</Label>
-                <Input
-                  id="create-stack-name"
-                  placeholder="Stack name (e.g., myapp)"
-                  value={newStackName}
-                  onChange={(e) => setNewStackName(e.target.value)}
-                />
+
+              <div className="px-6 pb-2">
+                <Tabs value={createMode} onValueChange={(v) => setCreateMode(v as 'empty' | 'git')}>
+                  <TabsList>
+                    <TabsHighlight className="rounded-md bg-glass-highlight" transition={springs.snappy}>
+                      <TabsHighlightItem value="empty">
+                        <TabsTrigger value="empty">
+                          <Plus className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
+                          Empty
+                        </TabsTrigger>
+                      </TabsHighlightItem>
+                      <TabsHighlightItem value="git">
+                        <TabsTrigger value="git">
+                          <GitBranch className="w-3.5 h-3.5 mr-1.5" strokeWidth={1.5} />
+                          From Git
+                        </TabsTrigger>
+                      </TabsHighlightItem>
+                    </TabsHighlight>
+                  </TabsList>
+                </Tabs>
              </div>
-              <DialogFooter>
-                <Button onClick={handleCreateStack}>Create</Button>
-              </DialogFooter>
+
+              {createMode === 'empty' ? (
+                <>
+                  <div className="px-6 py-4 space-y-2">
+                    <Label htmlFor="create-stack-name">Stack Name</Label>
+                    <Input
+                      id="create-stack-name"
+                      placeholder="Stack name (e.g., myapp)"
+                      value={newStackName}
+                      onChange={(e) => setNewStackName(e.target.value)}
+                    />
+                  </div>
+                  <DialogFooter className="px-6 pb-6">
+                    <Button onClick={handleCreateStack}>Create</Button>
+                  </DialogFooter>
+                </>
+              ) : (
+                <>
+                  <ScrollArea className="max-h-[70vh]">
+                    <div className="px-6 py-4 space-y-5">
+                      <div className="space-y-2">
+                        <Label htmlFor="create-git-stack-name">Stack Name</Label>
+                        <Input
+                          id="create-git-stack-name"
+                          placeholder="Stack name (e.g., myapp)"
+                          value={newStackName}
+                          onChange={(e) => setNewStackName(e.target.value)}
+                          disabled={creatingFromGit}
+                        />
+                      </div>
+
+                      <GitSourceFields
+                        variant="create"
+                        disabled={creatingFromGit}
+                        repoUrl={gitRepoUrl}
+                        branch={gitBranch}
+                        composePath={gitComposePath}
+                        syncEnv={gitSyncEnv}
+                        authType={gitAuthType}
+                        token={gitToken}
+                        hasStoredToken={false}
+                        applyMode={gitApplyMode}
+                        onRepoUrlChange={setGitRepoUrl}
+                        onBranchChange={setGitBranch}
+                        onComposePathChange={setGitComposePath}
+                        onSyncEnvChange={setGitSyncEnv}
+                        onAuthTypeChange={setGitAuthType}
+                        onTokenChange={setGitToken}
+                        onApplyModeChange={setGitApplyMode}
+                      />
+
+                      <div className="flex items-center gap-2">
+                        <Checkbox
+                          id="create-git-deploy-now"
+                          checked={gitDeployNow}
+                          onCheckedChange={(c) => setGitDeployNow(c === true)}
+                          disabled={creatingFromGit}
+                        />
+                        <Label htmlFor="create-git-deploy-now" className="text-xs cursor-pointer">
+                          Deploy after create
+                        </Label>
+                      </div>
+                    </div>
+                  </ScrollArea>
+                  <DialogFooter className="px-6 py-4 border-t border-glass-border">
+                    <Button onClick={handleCreateStackFromGit} disabled={creatingFromGit}>
+                      {creatingFromGit ? (
+                        <><Loader2 className="w-4 h-4 mr-1.5 animate-spin" strokeWidth={1.5} />Creating</>
+                      ) : (
+                        <><GitBranch className="w-4 h-4 mr-1.5" strokeWidth={1.5} />Create from Git</>
+                      )}
+                    </Button>
+                  </DialogFooter>
+                </>
+              )}
            </DialogContent>
          </Dialog>
          <TooltipProvider>
@@ -0,0 +1,203 @@
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { cn } from '@/lib/utils';
+
+export type ApplyMode = 'review' | 'auto-write' | 'auto-deploy';
+
+export interface GitSourceFieldsState {
+  repoUrl: string;
+  branch: string;
+  composePath: string;
+  syncEnv: boolean;
+  authType: 'none' | 'token';
+  token: string;
+  /** When editing an existing source, the server tells us whether a token is already stored. */
+  hasStoredToken: boolean;
+  applyMode: ApplyMode;
+}
+
+export interface GitSourceFieldsProps extends GitSourceFieldsState {
+  disabled?: boolean;
+  /** 'edit' for the per-stack panel, 'create' for the new-stack dialog. Changes apply-mode copy. */
+  variant: 'edit' | 'create';
+  onRepoUrlChange: (value: string) => void;
+  onBranchChange: (value: string) => void;
+  onComposePathChange: (value: string) => void;
+  onSyncEnvChange: (value: boolean) => void;
+  onAuthTypeChange: (value: 'none' | 'token') => void;
+  onTokenChange: (value: string) => void;
+  onApplyModeChange: (value: ApplyMode) => void;
+}
+
+const APPLY_MODE_COPY: Record<'edit' | 'create', Record<ApplyMode, { title: string; description: string }>> = {
+  edit: {
+    'review': { title: 'Review only', description: 'Webhook fetches and flags a pending diff. You apply manually.' },
+    'auto-write': { title: 'Auto-write files', description: 'Webhook writes to disk. You deploy manually.' },
+    'auto-deploy': { title: 'Auto-deploy', description: 'Webhook writes and deploys in one step.' },
+  },
+  create: {
+    'review': { title: 'Review only', description: 'Future webhook pulls surface a diff you apply manually.' },
+    'auto-write': { title: 'Auto-write files', description: 'Future webhook pulls write to disk. You deploy manually.' },
+    'auto-deploy': { title: 'Auto-deploy', description: 'Future webhook pulls write and redeploy automatically.' },
+  },
+};
+
+export function GitSourceFields({
+  repoUrl,
+  branch,
+  composePath,
+  syncEnv,
+  authType,
+  token,
+  hasStoredToken,
+  applyMode,
+  disabled = false,
+  variant,
+  onRepoUrlChange,
+  onBranchChange,
+  onComposePathChange,
+  onSyncEnvChange,
+  onAuthTypeChange,
+  onTokenChange,
+  onApplyModeChange,
+}: GitSourceFieldsProps) {
+  const copy = APPLY_MODE_COPY[variant];
+
+  const radioOption = (mode: ApplyMode) => (
+    <button
+      type="button"
+      key={mode}
+      onClick={() => !disabled && onApplyModeChange(mode)}
+      disabled={disabled}
+      className={cn(
+        'w-full text-left rounded-md border px-3 py-2 transition-colors',
+        applyMode === mode
+          ? 'border-brand/60 bg-brand/5'
+          : 'border-glass-border hover:border-card-border-hover',
+        disabled && 'cursor-not-allowed opacity-60',
+      )}
+    >
+      <div className="flex items-start gap-2">
+        <div className={cn(
+          'w-3.5 h-3.5 rounded-full border mt-0.5 shrink-0 transition-colors',
+          applyMode === mode ? 'border-brand bg-brand' : 'border-stat-subtitle',
+        )} />
+        <div>
+          <p className="text-xs font-medium">{copy[mode].title}</p>
+          <p className="text-[11px] text-stat-subtitle mt-0.5">{copy[mode].description}</p>
+        </div>
+      </div>
+    </button>
+  );
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-2">
+        <Label htmlFor="git-source-repo">Repository URL</Label>
+        <Input
+          id="git-source-repo"
+          placeholder="https://github.com/org/repo.git"
+          value={repoUrl}
+          onChange={(e) => onRepoUrlChange(e.target.value)}
+          disabled={disabled}
+          className="font-mono text-xs"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <div className="space-y-2">
+          <Label htmlFor="git-source-branch">Branch</Label>
+          <Input
+            id="git-source-branch"
+            placeholder="main"
+            value={branch}
+            onChange={(e) => onBranchChange(e.target.value)}
+            disabled={disabled}
+            className="font-mono text-xs"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="git-source-path">Compose file path</Label>
+          <Input
+            id="git-source-path"
+            placeholder="compose.yaml"
+            value={composePath}
+            onChange={(e) => onComposePathChange(e.target.value)}
+            disabled={disabled}
+            className="font-mono text-xs"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Checkbox
+          id="git-source-sync-env"
+          checked={syncEnv}
+          onCheckedChange={(c) => onSyncEnvChange(c === true)}
+          disabled={disabled}
+        />
+        <Label htmlFor="git-source-sync-env" className="text-xs cursor-pointer">
+          Also sync sibling <span className="font-mono">.env</span> file
+        </Label>
+      </div>
+
+      <div className="space-y-2">
+        <Label>Authentication</Label>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={() => !disabled && onAuthTypeChange('none')}
+            disabled={disabled}
+            className={cn(
+              'flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors',
+              authType === 'none'
+                ? 'border-brand/60 bg-brand/5'
+                : 'border-glass-border hover:border-card-border-hover',
+            )}
+          >
+            Public (no auth)
+          </button>
+          <button
+            type="button"
+            onClick={() => !disabled && onAuthTypeChange('token')}
+            disabled={disabled}
+            className={cn(
+              'flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors',
+              authType === 'token'
+                ? 'border-brand/60 bg-brand/5'
+                : 'border-glass-border hover:border-card-border-hover',
+            )}
+          >
+            Personal Access Token
+          </button>
+        </div>
+        {authType === 'token' && (
+          <div className="space-y-1.5">
+            <Input
+              type="password"
+              placeholder={hasStoredToken ? '••••••••  (leave blank to keep current)' : 'ghp_xxx... or glpat-xxx...'}
+              value={token}
+              onChange={(e) => onTokenChange(e.target.value)}
+              disabled={disabled}
+              className="font-mono text-xs"
+              autoComplete="off"
+            />
+            <p className="text-[11px] text-stat-subtitle">
+              Token is encrypted at rest and never returned from the API.
+            </p>
+          </div>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label>Apply behavior</Label>
+        <div className="space-y-1.5">
+          {radioOption('review')}
+          {radioOption('auto-write')}
+          {radioOption('auto-deploy')}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -12,15 +12,12 @@ import {
  AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Skeleton } from '@/components/ui/skeleton';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { apiFetch } from '@/lib/api';
 import { toast } from '@/components/ui/toast-store';
-import { cn } from '@/lib/utils';
 import { GitSourceDiffDialog, type PullResult } from './GitSourceDiffDialog';
+import { GitSourceFields, type ApplyMode } from './GitSourceFields';

 export interface GitSource {
  id: number;
@@ -41,8 +38,6 @@ export interface GitSource {
  updated_at: number;
 }

-type ApplyMode = 'review' | 'auto-write' | 'auto-deploy';
-
 interface GitSourcePanelProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
@@ -277,33 +272,6 @@ export function GitSourcePanel({
    }
  };

-  const radioOption = (mode: ApplyMode, title: string, description: string) => (
-    <button
-      type="button"
-      key={mode}
-      onClick={() => canEdit && setApplyModeOverride(mode)}
-      disabled={!canEdit}
-      className={cn(
-        'w-full text-left rounded-md border px-3 py-2 transition-colors',
-        applyMode === mode
-          ? 'border-brand/60 bg-brand/5'
-          : 'border-glass-border hover:border-card-border-hover',
-        !canEdit && 'cursor-not-allowed opacity-60',
-      )}
-    >
-      <div className="flex items-start gap-2">
-        <div className={cn(
-          'w-3.5 h-3.5 rounded-full border mt-0.5 shrink-0 transition-colors',
-          applyMode === mode ? 'border-brand bg-brand' : 'border-stat-subtitle',
-        )} />
-        <div>
-          <p className="text-xs font-medium">{title}</p>
-          <p className="text-[11px] text-stat-subtitle mt-0.5">{description}</p>
-        </div>
-      </div>
-    </button>
-  );
-
  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
@@ -350,111 +318,25 @@ export function GitSourcePanel({
                    </div>
                  )}

-                  <div className="space-y-2">
-                    <Label htmlFor="git-source-repo">Repository URL</Label>
-                    <Input
-                      id="git-source-repo"
-                      placeholder="https://github.com/org/repo.git"
-                      value={repoUrl}
-                      onChange={(e) => setRepoUrl(e.target.value)}
-                      disabled={!canEdit || saving}
-                      className="font-mono text-xs"
-                    />
-                  </div>
-
-                  <div className="grid grid-cols-2 gap-3">
-                    <div className="space-y-2">
-                      <Label htmlFor="git-source-branch">Branch</Label>
-                      <Input
-                        id="git-source-branch"
-                        placeholder="main"
-                        value={branch}
-                        onChange={(e) => setBranch(e.target.value)}
-                        disabled={!canEdit || saving}
-                        className="font-mono text-xs"
-                      />
-                    </div>
-                    <div className="space-y-2">
-                      <Label htmlFor="git-source-path">Compose file path</Label>
-                      <Input
-                        id="git-source-path"
-                        placeholder="compose.yaml"
-                        value={composePath}
-                        onChange={(e) => setComposePath(e.target.value)}
-                        disabled={!canEdit || saving}
-                        className="font-mono text-xs"
-                      />
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <Checkbox
-                      id="git-source-sync-env"
-                      checked={syncEnv}
-                      onCheckedChange={(c) => setSyncEnv(c === true)}
-                      disabled={!canEdit || saving}
-                    />
-                    <Label htmlFor="git-source-sync-env" className="text-xs cursor-pointer">
-                      Also sync sibling <span className="font-mono">.env</span> file
-                    </Label>
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label>Authentication</Label>
-                    <div className="flex gap-2">
-                      <button
-                        type="button"
-                        onClick={() => canEdit && setAuthType('none')}
-                        disabled={!canEdit || saving}
-                        className={cn(
-                          'flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors',
-                          authType === 'none'
-                            ? 'border-brand/60 bg-brand/5'
-                            : 'border-glass-border hover:border-card-border-hover',
-                        )}
-                      >
-                        Public (no auth)
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => canEdit && setAuthType('token')}
-                        disabled={!canEdit || saving}
-                        className={cn(
-                          'flex-1 rounded-md border px-3 py-1.5 text-xs transition-colors',
-                          authType === 'token'
-                            ? 'border-brand/60 bg-brand/5'
-                            : 'border-glass-border hover:border-card-border-hover',
-                        )}
-                      >
-                        Personal Access Token
-                      </button>
-                    </div>
-                    {authType === 'token' && (
-                      <div className="space-y-1.5">
-                        <Input
-                          type="password"
-                          placeholder={source?.has_token ? '••••••••  (leave blank to keep current)' : 'ghp_xxx... or glpat-xxx...'}
-                          value={token}
-                          onChange={(e) => setToken(e.target.value)}
-                          disabled={!canEdit || saving}
-                          className="font-mono text-xs"
-                          autoComplete="off"
-                        />
-                        <p className="text-[11px] text-stat-subtitle">
-                          Token is encrypted at rest and never returned from the API.
-                        </p>
-                      </div>
-                    )}
-                  </div>
-
-                  <div className="space-y-2">
-                    <Label>Apply behavior</Label>
-                    <div className="space-y-1.5">
-                      {radioOption('review', 'Review only', 'Webhook fetches and flags a pending diff. You apply manually.')}
-                      {radioOption('auto-write', 'Auto-write files', 'Webhook writes to disk. You deploy manually.')}
-                      {radioOption('auto-deploy', 'Auto-deploy', 'Webhook writes and deploys in one step.')}
-                    </div>
-                  </div>
+                  <GitSourceFields
+                    variant="edit"
+                    disabled={!canEdit || saving}
+                    repoUrl={repoUrl}
+                    branch={branch}
+                    composePath={composePath}
+                    syncEnv={syncEnv}
+                    authType={authType}
+                    token={token}
+                    hasStoredToken={source?.has_token ?? false}
+                    applyMode={applyMode}
+                    onRepoUrlChange={setRepoUrl}
+                    onBranchChange={setBranch}
+                    onComposePathChange={setComposePath}
+                    onSyncEnvChange={setSyncEnv}
+                    onAuthTypeChange={setAuthType}
+                    onTokenChange={setToken}
+                    onApplyModeChange={setApplyModeOverride}
+                  />

                  {source && (
                    <div className="rounded-md border border-glass-border bg-muted/30 px-3 py-2 text-[11px] text-stat-subtitle space-y-0.5 shadow-card-bevel">