fix: set upstream creates remote branch when it does not exist yet (closes #3)

- Run git push -u when remote branch does not exist, git branch --set-upstream-to otherwise
- Show existing upstream as initial value in modal
- Allow manual branch name input with a toggle when remote branches are available
- Show notice when the typed branch name does not exist on the remote

Author: the0807

src/git/git-service.ts

@@ -503,11 +503,15 @@ export class GitService {
     await this.exec(['remote', 'remove', name]);
   }
 
-  async setUpstream(localBranch: string, remote: string, remoteBranch: string): Promise<void> {
-    this.assertSafeRef(localBranch, 'branch --set-upstream-to');
-    this.assertSafeRef(remote, 'branch --set-upstream-to');
-    this.assertSafeRef(remoteBranch, 'branch --set-upstream-to');
-    await this.exec(['branch', '--set-upstream-to', `${remote}/${remoteBranch}`, localBranch]);
+  async setUpstream(localBranch: string, remote: string, remoteBranch: string, options?: { createRemote?: boolean }): Promise<void> {
+    this.assertSafeRef(localBranch, 'setUpstream');
+    this.assertSafeRef(remote, 'setUpstream');
+    this.assertSafeRef(remoteBranch, 'setUpstream');
+    if (options?.createRemote) {
+      await this.exec(['push', '-u', remote, `${localBranch}:${remoteBranch}`]);
+    } else {
+      await this.exec(['branch', '--set-upstream-to', `${remote}/${remoteBranch}`, localBranch]);
+    }
   }
 
   async rebase(onto: string, options?: { autostash?: boolean }): Promise<void> {

src/panels/MainPanel.ts

@@ -308,7 +308,7 @@ export class MainPanel {
           break;
         }
         case 'setUpstream': {
-          await this.gitService.setUpstream(message.payload.branch, message.payload.remote, message.payload.remoteBranch);
+          await this.gitService.setUpstream(message.payload.branch, message.payload.remote, message.payload.remoteBranch, { createRemote: message.payload.createRemote });
           this.panel.webview.postMessage({ type: 'operationComplete', payload: { operation: 'setUpstream', success: true } });
           await this.refreshAll();
           break;

src/utils/message-bus.ts

@@ -74,7 +74,7 @@ export type WebviewMessage =
   | { type: 'stageFile'; payload: { file: string } }
   | { type: 'abortOperation' }
   | { type: 'openConflictFile'; payload: { file: string } }
-  | { type: 'setUpstream'; payload: { branch: string; remote: string; remoteBranch: string } }
+  | { type: 'setUpstream'; payload: { branch: string; remote: string; remoteBranch: string; createRemote?: boolean } }
   | { type: 'openWorktreeInNewWindow'; payload: { path: string } }
   | { type: 'showNotification'; payload: { message: string } }
   | { type: 'showTagDetails'; payload: { name: string } };

webview-ui/src/App.svelte

@@ -532,8 +532,9 @@
 {#if modalStore.setUpstream.show}
   <SetUpstreamModal
     branchName={modalStore.setUpstream.branchName}
+    currentUpstream={modalStore.setUpstream.currentUpstream}
     onClose={() => { modalStore.closeSetUpstream(); }}
-    onSet={(remote, remoteBranch) => { const branch = modalStore.setUpstream.branchName; modalStore.closeSetUpstream(); vscode.postMessage({ type: 'setUpstream', payload: { branch, remote, remoteBranch } }); }}
+    onSet={(remote, remoteBranch, createRemote) => { const branch = modalStore.setUpstream.branchName; modalStore.closeSetUpstream(); vscode.postMessage({ type: 'setUpstream', payload: { branch, remote, remoteBranch, createRemote } }); }}
   />
 {/if}
 

webview-ui/src/components/graph/CommitGraph.svelte

@@ -499,7 +499,8 @@
               {
                 label: t('graph.setUpstream'),
                 action: () => {
-                  modalStore.openSetUpstream(branchName);
+                  const branchInfo = branchStore.branches.find(b => !b.remote && b.name === branchName);
+                  modalStore.openSetUpstream(branchName, branchInfo?.upstream);
                 },
               },
               { separator: true, label: '', action: () => {} },

webview-ui/src/components/modals/SetUpstreamModal.svelte

@@ -6,31 +6,57 @@
 
   interface Props {
     branchName: string;
+    currentUpstream?: string;
     onClose: () => void;
-    onSet: (remote: string, remoteBranch: string) => void;
+    onSet: (remote: string, remoteBranch: string, createRemote: boolean) => void;
   }
 
-  let { branchName, onClose, onSet }: Props = $props();
+  let { branchName, currentUpstream = '', onClose, onSet }: Props = $props();
 
   const remoteNames = $derived([...new Set(branchStore.remotes.map(r => r.name))]);
+
+  function parseUpstream(upstream: string) {
+    const slashIdx = upstream.indexOf('/');
+    if (slashIdx === -1) return { remote: '', branch: upstream };
+    return { remote: upstream.slice(0, slashIdx), branch: upstream.slice(slashIdx + 1) };
+  }
+
   // svelte-ignore state_referenced_locally
-  let selectedRemote = $state(remoteNames[0] ?? 'origin');
+  const parsed = parseUpstream(currentUpstream);
+  // svelte-ignore state_referenced_locally
+  let selectedRemote = $state(parsed.remote || remoteNames[0] || 'origin');
 
   const remoteBranchesForRemote = $derived(
     branchStore.remoteBranches
       .filter(b => b.name.startsWith(selectedRemote + '/'))
       .map(b => b.name.substring(selectedRemote.length + 1))
   );
 
+  const remoteOptions = $derived(remoteNames.map(r => ({ value: r, label: r, color: '' })));
+  const branchOptions = $derived(
+    remoteBranchesForRemote.map(b => ({ value: b, label: `${selectedRemote}/${b}`, color: '' }))
+  );
+
+  const hasBranchOptions = $derived(remoteBranchesForRemote.length > 0);
+
+  // svelte-ignore state_referenced_locally
+  let dropdownBranch = $state(parsed.branch || branchName);
   // svelte-ignore state_referenced_locally
-  let selectedRemoteBranch = $state(branchName);
+  let textBranch = $state(currentUpstream ? '' : branchName);
+  // upstream이 없으면 새로 만드는 케이스 → 텍스트 입력으로 시작
+  // svelte-ignore state_referenced_locally
+  let manualInput = $state(!currentUpstream);
 
-  const remoteOptions = $derived(remoteNames.map(r => ({ value: r, label: r, color: '' })));
-  const branchOptions = $derived(remoteBranchesForRemote.map(b => ({ value: b, label: `${selectedRemote}/${b}`, color: '' })));
+  const useDropdown = $derived(hasBranchOptions && !manualInput);
+  const activeBranch = $derived(manualInput ? textBranch : dropdownBranch);
+
+  const remoteBranchExists = $derived(
+    useDropdown || remoteBranchesForRemote.includes(activeBranch.trim())
+  );
 
   function handleSubmit() {
-    if (selectedRemote && selectedRemoteBranch.trim()) {
-      onSet(selectedRemote, selectedRemoteBranch.trim());
+    if (selectedRemote && activeBranch.trim()) {
+      onSet(selectedRemote, activeBranch.trim(), !remoteBranchExists);
     }
   }
 </script>
@@ -40,7 +66,7 @@
   <div class="modal-context-card">
     <span class="modal-pill modal-pill--target"><i class="codicon codicon-git-branch"></i>{branchName}</span>
     <i class="codicon codicon-arrow-both" style="color: var(--text-secondary);"></i>
-    <span class="modal-pill modal-pill--source"><i class="codicon codicon-cloud"></i>{selectedRemote}/{selectedRemoteBranch || branchName}</span>
+    <span class="modal-pill modal-pill--source"><i class="codicon codicon-cloud"></i>{selectedRemote}/{activeBranch || branchName}</span>
   </div>
 
   {#if remoteNames.length > 1}
@@ -56,18 +82,84 @@
   {/if}
 
   <div class="modal-form-group">
-    <div class="modal-field-label">{t('setUpstream.remoteBranch')}</div>
-    <ColorSelect
-      options={branchOptions}
-      value={selectedRemoteBranch}
-      onChange={(v) => { selectedRemoteBranch = v; }}
-      showDot={false}
-    />
+    <div class="modal-field-label-row">
+      <span class="modal-field-label">{t('setUpstream.remoteBranch')}</span>
+      {#if hasBranchOptions}
+        <button class="toggle-btn" onclick={() => { manualInput = !manualInput; }}>
+          <i class="codicon {manualInput ? 'codicon-list-unordered' : 'codicon-edit'}"></i>
+          <span>{manualInput ? t('setUpstream.selectFromList') : t('setUpstream.typeManually')}</span>
+        </button>
+      {/if}
+    </div>
+    {#if useDropdown}
+      <ColorSelect
+        options={branchOptions}
+        value={dropdownBranch}
+        onChange={(v) => { dropdownBranch = v; }}
+        showDot={false}
+      />
+    {:else}
+      <input
+        class="modal-input"
+        type="text"
+        bind:value={textBranch}
+      />
+    {/if}
   </div>
 
+  {#if activeBranch.trim() && !remoteBranchExists}
+    <p class="notice"><i class="codicon codicon-info"></i>{t('setUpstream.willCreate')}</p>
+  {/if}
+
   <div class="form-actions">
     <button onclick={onClose}>{t('common.cancel')}</button>
-    <button class="primary" onclick={handleSubmit} disabled={!selectedRemoteBranch.trim()}>{t('setUpstream.set')}</button>
+    <button class="primary" onclick={handleSubmit} disabled={!activeBranch.trim()}>{t('setUpstream.set')}</button>
   </div>
 </Modal>
 
+<style>
+  .modal-field-label-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+
+  .modal-field-label-row .modal-field-label {
+    margin-bottom: 0;
+  }
+
+  .toggle-btn {
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: 11px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  .toggle-btn:hover {
+    color: var(--text-primary);
+  }
+
+  .toggle-btn:hover span {
+    text-decoration: underline;
+  }
+
+  .toggle-btn .codicon {
+    font-size: 11px;
+  }
+
+  .notice {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin: 0;
+  }
+</style>

webview-ui/src/lib/i18n/en.ts

@@ -459,4 +459,7 @@ export const en: Record<string, string> = {
   'setUpstream.remote': 'Remote',
   'setUpstream.remoteBranch': 'Remote branch',
   'setUpstream.set': 'Set Upstream',
+  'setUpstream.willCreate': 'Remote branch does not exist yet. Running git push -u will create it.',
+  'setUpstream.typeManually': 'Type manually',
+  'setUpstream.selectFromList': 'Select from list',
 };

webview-ui/src/lib/i18n/ko.ts

@@ -459,4 +459,7 @@ export const ko: Record<string, string> = {
   'setUpstream.remote': '리모트',
   'setUpstream.remoteBranch': '리모트 브랜치',
   'setUpstream.set': '업스트림 설정',
+  'setUpstream.willCreate': '리모트 브랜치가 존재하지 않습니다. git push -u를 실행하여 새로 생성합니다.',
+  'setUpstream.typeManually': '직접 입력',
+  'setUpstream.selectFromList': '목록에서 선택',
 };

webview-ui/src/lib/i18n/zh.ts

@@ -459,4 +459,7 @@ export const zh: Record<string, string> = {
   'setUpstream.remote': '远程仓库',
   'setUpstream.remoteBranch': '远程分支',
   'setUpstream.set': '设置上游',
+  'setUpstream.willCreate': '远程分支尚不存在，将执行 git push -u 进行创建。',
+  'setUpstream.typeManually': '手动输入',
+  'setUpstream.selectFromList': '从列表选择',
 };

webview-ui/src/lib/stores/modals.svelte.ts

@@ -66,9 +66,9 @@ class ModalStore {
   closeStashSave() { this.stashSave = { show: false }; }
 
   // ── Set Upstream ──
-  setUpstream = $state({ show: false, branchName: '' });
-  openSetUpstream(branchName: string) { this.setUpstream = { show: true, branchName }; }
-  closeSetUpstream() { this.setUpstream = { show: false, branchName: '' }; }
+  setUpstream = $state({ show: false, branchName: '', currentUpstream: '' });
+  openSetUpstream(branchName: string, currentUpstream?: string) { this.setUpstream = { show: true, branchName, currentUpstream: currentUpstream ?? '' }; }
+  closeSetUpstream() { this.setUpstream = { show: false, branchName: '', currentUpstream: '' }; }
 
   // ── Fetch ──
   fetch = $state({ show: false, allRemotes: false, remote: 'origin' });