claude-remote-cli 1.9.6 → 2.1.0

package/README.md

@@ -142,9 +142,10 @@ The PIN hash is stored in config under `pinHash`. To reset:
 ## Features
 
 - **PIN-protected access** with rate limiting
-- **Worktree isolation** — each session runs in its own Claude Code `--worktree`
+- **Branch-aware sessions** — create worktrees from new or existing branches with a type-to-search branch picker
+- **Worktree isolation** — each session runs in its own git worktree under `.worktrees/`
 - **Resume sessions** — click inactive worktrees to reconnect with `--continue`
-- **Persistent session names** — display names and timestamps survive server restarts
+- **Persistent session names** — display names, branch names, and timestamps survive server restarts
 - **Clipboard image paste** — paste screenshots directly into remote terminal sessions (macOS clipboard + xclip on Linux)
 - **Yolo mode** — skip permission prompts with `--dangerously-skip-permissions` (per-session checkbox or context menu)
 - **Worktree cleanup** — delete inactive worktrees from the context menu (removes worktree, prunes refs, deletes branch)
@@ -169,7 +170,7 @@ claude-remote-cli/
 │   ├── index.ts        # Express server, REST API routes
 │   ├── sessions.ts     # PTY session manager (node-pty)
 │   ├── ws.ts           # WebSocket relay (PTY ↔ browser)
-│   ├── watcher.ts      # File watcher for .claude/worktrees/ changes
+│   ├── watcher.ts      # File watcher for .worktrees/ changes
 │   ├── auth.ts         # PIN hashing, verification, rate limiting
 │   ├── config.ts       # Config loading/saving, worktree metadata
 │   ├── clipboard.ts    # System clipboard operations (image paste)

package/dist/bin/claude-remote-cli.js

@@ -1,13 +1,17 @@
 #!/usr/bin/env node
 import path from 'node:path';
 import fs from 'node:fs';
-import { execFile } from 'node:child_process';
+import { execFile, spawn } from 'node:child_process';
 import { promisify } from 'node:util';
 import { fileURLToPath } from 'node:url';
 import * as service from '../server/service.js';
 import { DEFAULTS } from '../server/config.js';
 const execFileAsync = promisify(execFile);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
+function execErrorMessage(err, fallback) {
+    const e = err;
+    return (e.stderr || e.message || fallback).trimEnd();
+}
 // Parse CLI flags
 const args = process.argv.slice(2);
 if (args.includes('--help') || args.includes('-h')) {
@@ -19,12 +23,17 @@ Commands:
   install            Install as a background service (survives reboot)
   uninstall          Stop and remove the background service
   status             Show whether the service is running
+  worktree           Manage git worktrees (wraps git worktree)
+    add [path] [-b branch] [--yolo]   Create worktree and launch Claude
+    remove <path>                      Forward to git worktree remove
+    list                               Forward to git worktree list
 
 Options:
   --bg               Shortcut: install and start as background service
   --port <port>      Override server port (default: 3456)
   --host <host>      Override bind address (default: 0.0.0.0)
   --config <path>    Path to config.json (default: ~/.config/claude-remote-cli/config.json)
+  --yolo             With 'worktree add': pass --dangerously-skip-permissions to Claude
   --version, -v      Show version
   --help, -h         Show this help`);
     process.exit(0);
@@ -87,6 +96,76 @@ if (command === 'update') {
     }
     process.exit(0);
 }
+if (command === 'worktree') {
+    const wtArgs = args.slice(1);
+    const subCommand = wtArgs[0];
+    if (!subCommand) {
+        console.error('Usage: claude-remote-cli worktree <add|remove|list> [options]');
+        process.exit(1);
+    }
+    if (subCommand !== 'add') {
+        try {
+            const result = await execFileAsync('git', ['worktree', ...wtArgs]);
+            if (result.stdout)
+                console.log(result.stdout.trimEnd());
+        }
+        catch (err) {
+            console.error(execErrorMessage(err, 'git worktree failed'));
+            process.exit(1);
+        }
+        process.exit(0);
+    }
+    // Handle 'add' -- strip --yolo, determine path, forward to git, then launch claude
+    const hasYolo = wtArgs.includes('--yolo');
+    const gitWtArgs = wtArgs.filter(function (a) { return a !== '--yolo'; });
+    const addSubArgs = gitWtArgs.slice(1);
+    let targetDir;
+    const bIdx = gitWtArgs.indexOf('-b');
+    const branchForDefault = bIdx !== -1 && bIdx + 1 < gitWtArgs.length ? gitWtArgs[bIdx + 1] : undefined;
+    if (addSubArgs.length === 0 || addSubArgs[0].startsWith('-')) {
+        let repoRoot;
+        try {
+            const result = await execFileAsync('git', ['rev-parse', '--show-toplevel']);
+            repoRoot = result.stdout.trim();
+        }
+        catch {
+            console.error('Not inside a git repository.');
+            process.exit(1);
+        }
+        const dirName = branchForDefault
+            ? branchForDefault.replace(/\//g, '-')
+            : 'worktree-' + Date.now().toString(36);
+        targetDir = path.join(repoRoot, '.worktrees', dirName);
+        gitWtArgs.splice(1, 0, targetDir);
+    }
+    else {
+        targetDir = path.resolve(addSubArgs[0]);
+    }
+    try {
+        const result = await execFileAsync('git', ['worktree', ...gitWtArgs]);
+        if (result.stdout)
+            console.log(result.stdout.trimEnd());
+    }
+    catch (err) {
+        console.error(execErrorMessage(err, 'git worktree add failed'));
+        process.exit(1);
+    }
+    console.log(`Worktree created at ${targetDir}`);
+    const claudeArgs = [];
+    if (hasYolo)
+        claudeArgs.push('--dangerously-skip-permissions');
+    console.log(`Launching claude${hasYolo ? ' (yolo mode)' : ''} in ${targetDir}...`);
+    const child = spawn('claude', claudeArgs, {
+        cwd: targetDir,
+        stdio: 'inherit',
+        env: { ...process.env, CLAUDECODE: undefined },
+    });
+    child.on('exit', (code) => {
+        process.exit(code ?? 0);
+    });
+    // Block until child exits via the handler above
+    await new Promise(() => { });
+}
 if (command === 'install' || command === 'uninstall' || command === 'status' || args.includes('--bg')) {
     if (command === 'uninstall') {
         runServiceCommand(() => { service.uninstall(); });

package/dist/server/index.js

@@ -12,7 +12,7 @@ import { loadConfig, saveConfig, DEFAULTS, readMeta, writeMeta, ensureMetaDir }
 import * as auth from './auth.js';
 import * as sessions from './sessions.js';
 import { setupWebSocket } from './ws.js';
-import { WorktreeWatcher } from './watcher.js';
+import { WorktreeWatcher, WORKTREE_DIRS, isValidWorktreePath } from './watcher.js';
 import { isInstalled as serviceIsInstalled } from './service.js';
 import { extensionForMime, setClipboardImage } from './clipboard.js';
 const __filename = fileURLToPath(import.meta.url);
@@ -59,6 +59,10 @@ async function getLatestVersion() {
         return null;
     }
 }
+function execErrorMessage(err, fallback) {
+    const e = err;
+    return (e.stderr || e.message || fallback).trim();
+}
 function parseTTL(ttl) {
     if (typeof ttl !== 'string')
         return 24 * 60 * 60 * 1000;
@@ -109,6 +113,24 @@ function scanAllRepos(rootDirs) {
     }
     return repos;
 }
+function ensureGitignore(repoPath, entry) {
+    const gitignorePath = path.join(repoPath, '.gitignore');
+    try {
+        if (fs.existsSync(gitignorePath)) {
+            const content = fs.readFileSync(gitignorePath, 'utf-8');
+            if (content.split('\n').some((line) => line.trim() === entry))
+                return;
+            const prefix = content.length > 0 && !content.endsWith('\n') ? '\n' : '';
+            fs.appendFileSync(gitignorePath, prefix + entry + '\n');
+        }
+        else {
+            fs.writeFileSync(gitignorePath, entry + '\n');
+        }
+    }
+    catch (_) {
+        // Non-fatal: gitignore update failure shouldn't block session creation
+    }
+}
 async function main() {
     let config;
     try {
@@ -193,6 +215,27 @@ async function main() {
         }
         res.json(repos);
     });
+    // GET /branches?repo=<path> — list local and remote branches for a repo
+    app.get('/branches', requireAuth, async (req, res) => {
+        const repoPath = typeof req.query.repo === 'string' ? req.query.repo : undefined;
+        if (!repoPath) {
+            res.status(400).json({ error: 'repo query parameter is required' });
+            return;
+        }
+        try {
+            const { stdout } = await execFileAsync('git', ['branch', '-a', '--format=%(refname:short)'], { cwd: repoPath });
+            const branches = stdout
+                .split('\n')
+                .map((b) => b.trim())
+                .filter((b) => b && !b.includes('HEAD'))
+                .map((b) => b.replace(/^origin\//, ''));
+            const unique = [...new Set(branches)];
+            res.json(unique.sort());
+        }
+        catch (_) {
+            res.json([]);
+        }
+    });
     // GET /worktrees?repo=<path> — list worktrees; omit repo to scan all repos in all rootDirs
     app.get('/worktrees', requireAuth, (req, res) => {
         const repoParam = typeof req.query.repo === 'string' ? req.query.repo : undefined;
@@ -207,28 +250,30 @@ async function main() {
             reposToScan = scanAllRepos(roots);
         }
         for (const repo of reposToScan) {
-            const worktreeDir = path.join(repo.path, '.claude', 'worktrees');
-            let entries;
-            try {
-                entries = fs.readdirSync(worktreeDir, { withFileTypes: true });
-            }
-            catch (_) {
-                continue;
-            }
-            for (const entry of entries) {
-                if (!entry.isDirectory())
+            for (const dir of WORKTREE_DIRS) {
+                const worktreeDir = path.join(repo.path, dir);
+                let entries;
+                try {
+                    entries = fs.readdirSync(worktreeDir, { withFileTypes: true });
+                }
+                catch (_) {
                     continue;
-                const wtPath = path.join(worktreeDir, entry.name);
-                const meta = readMeta(CONFIG_PATH, wtPath);
-                worktrees.push({
-                    name: entry.name,
-                    path: wtPath,
-                    repoName: repo.name,
-                    repoPath: repo.path,
-                    root: repo.root,
-                    displayName: meta ? meta.displayName : '',
-                    lastActivity: meta ? meta.lastActivity : '',
-                });
+                }
+                for (const entry of entries) {
+                    if (!entry.isDirectory())
+                        continue;
+                    const wtPath = path.join(worktreeDir, entry.name);
+                    const meta = readMeta(CONFIG_PATH, wtPath);
+                    worktrees.push({
+                        name: entry.name,
+                        path: wtPath,
+                        repoName: repo.name,
+                        repoPath: repo.path,
+                        root: repo.root,
+                        displayName: meta ? meta.displayName : '',
+                        lastActivity: meta ? meta.lastActivity : '',
+                    });
+                }
             }
         }
         res.json(worktrees);
@@ -276,9 +321,8 @@ async function main() {
             res.status(400).json({ error: 'worktreePath and repoPath are required' });
             return;
         }
-        // Validate the path is inside a .claude/worktrees/ directory
-        if (!worktreePath.includes(path.sep + '.claude' + path.sep + 'worktrees' + path.sep)) {
-            res.status(400).json({ error: 'Path is not inside a .claude/worktrees/ directory' });
+        if (!isValidWorktreePath(worktreePath)) {
+            res.status(400).json({ error: 'Path is not inside a worktree directory' });
             return;
         }
         // Check no active session is using this worktree
@@ -288,15 +332,15 @@ async function main() {
             res.status(409).json({ error: 'Close the active session first' });
             return;
         }
-        // Derive branch name from worktree directory name
-        const branchName = worktreePath.split('/').pop() || '';
+        // Derive branch name from metadata or worktree directory name
+        const meta = readMeta(CONFIG_PATH, worktreePath);
+        const branchName = (meta && meta.branchName) || worktreePath.split('/').pop() || '';
         try {
-            // Remove the worktree (will fail if uncommitted changes — no --force)
+            // Will fail if uncommitted changes -- no --force
             await execFileAsync('git', ['worktree', 'remove', worktreePath], { cwd: repoPath });
         }
         catch (err) {
-            const message = err instanceof Error ? err.message : 'Failed to remove worktree';
-            res.status(500).json({ error: message });
+            res.status(500).json({ error: execErrorMessage(err, 'Failed to remove worktree') });
             return;
         }
         try {
@@ -318,8 +362,8 @@ async function main() {
         res.json({ ok: true });
     });
     // POST /sessions
-    app.post('/sessions', requireAuth, (req, res) => {
-        const { repoPath, repoName, worktreePath, claudeArgs } = req.body;
+    app.post('/sessions', requireAuth, async (req, res) => {
+        const { repoPath, repoName, worktreePath, branchName, claudeArgs } = req.body;
         if (!repoPath) {
             res.status(400).json({ error: 'repoPath is required' });
             return;
@@ -333,32 +377,87 @@ async function main() {
         let cwd;
         let worktreeName;
         let sessionRepoPath;
+        let resolvedBranch = '';
         if (worktreePath) {
-            // Resume existing worktree — run claude --continue inside the worktree directory
+            // Resume existing worktree
             args = ['--continue', ...baseArgs];
             cwd = worktreePath;
             sessionRepoPath = worktreePath;
             worktreeName = worktreePath.split('/').pop() || '';
         }
         else {
-            // New worktree — PTY spawns in the repo root (so `claude --worktree X` works),
-            // but repoPath points to the expected worktree dir for identity/metadata matching
-            worktreeName = 'mobile-' + name + '-' + Date.now().toString(36);
-            args = ['--worktree', worktreeName, ...baseArgs];
-            cwd = repoPath;
-            sessionRepoPath = path.join(repoPath, '.claude', 'worktrees', worktreeName);
+            // Create new worktree via git
+            let dirName;
+            if (branchName) {
+                dirName = branchName.replace(/\//g, '-');
+                resolvedBranch = branchName;
+            }
+            else {
+                dirName = 'mobile-' + name + '-' + Date.now().toString(36);
+                resolvedBranch = dirName;
+            }
+            const worktreeDir = path.join(repoPath, '.worktrees');
+            let targetDir = path.join(worktreeDir, dirName);
+            if (fs.existsSync(targetDir)) {
+                targetDir = targetDir + '-' + Date.now().toString(36);
+                dirName = path.basename(targetDir);
+            }
+            ensureGitignore(repoPath, '.worktrees/');
+            try {
+                // Check if branch exists locally or on a remote
+                let branchExists = false;
+                if (branchName) {
+                    const localCheck = await execFileAsync('git', ['rev-parse', '--verify', branchName], { cwd: repoPath }).then(() => true, () => false);
+                    if (localCheck) {
+                        branchExists = true;
+                    }
+                    else {
+                        const remoteCheck = await execFileAsync('git', ['rev-parse', '--verify', 'origin/' + branchName], { cwd: repoPath }).then(() => true, () => false);
+                        if (remoteCheck) {
+                            branchExists = true;
+                            resolvedBranch = 'origin/' + branchName;
+                        }
+                    }
+                }
+                if (branchName && branchExists) {
+                    await execFileAsync('git', ['worktree', 'add', targetDir, resolvedBranch], { cwd: repoPath });
+                }
+                else if (branchName) {
+                    await execFileAsync('git', ['worktree', 'add', '-b', branchName, targetDir, 'HEAD'], { cwd: repoPath });
+                }
+                else {
+                    await execFileAsync('git', ['worktree', 'add', '-b', dirName, targetDir, 'HEAD'], { cwd: repoPath });
+                }
+            }
+            catch (err) {
+                res.status(500).json({ error: execErrorMessage(err, 'Failed to create worktree') });
+                return;
+            }
+            worktreeName = dirName;
+            sessionRepoPath = targetDir;
+            cwd = targetDir;
+            args = [...baseArgs];
         }
+        const displayName = branchName || worktreeName;
         const session = sessions.create({
             repoName: name,
             repoPath: sessionRepoPath,
             cwd,
             root,
             worktreeName,
-            displayName: worktreeName,
+            displayName,
             command: config.claudeCommand,
             args,
             configPath: CONFIG_PATH,
         });
+        if (!worktreePath) {
+            writeMeta(CONFIG_PATH, {
+                worktreePath: sessionRepoPath,
+                displayName,
+                lastActivity: new Date().toISOString(),
+                branchName: branchName || worktreeName,
+            });
+        }
         res.status(201).json(session);
     });
     // DELETE /sessions/:id

package/dist/server/watcher.js

@@ -1,6 +1,13 @@
 import fs from 'node:fs';
 import path from 'node:path';
 import { EventEmitter } from 'node:events';
+export const WORKTREE_DIRS = ['.worktrees', '.claude/worktrees'];
+export function isValidWorktreePath(worktreePath) {
+    const resolved = path.resolve(worktreePath);
+    return WORKTREE_DIRS.some(function (dir) {
+        return resolved.includes(path.sep + dir + path.sep);
+    });
+}
 export class WorktreeWatcher extends EventEmitter {
     _watchers;
     _debounceTimer;
@@ -30,16 +37,18 @@ export class WorktreeWatcher extends EventEmitter {
         }
     }
     _watchRepo(repoPath) {
-        const worktreeDir = path.join(repoPath, '.claude', 'worktrees');
-        if (fs.existsSync(worktreeDir)) {
-            this._addWatch(worktreeDir);
-        }
-        else {
-            const claudeDir = path.join(repoPath, '.claude');
-            if (fs.existsSync(claudeDir)) {
-                this._addWatch(claudeDir);
+        let anyWatched = false;
+        for (const dir of WORKTREE_DIRS) {
+            const worktreeDir = path.join(repoPath, dir);
+            if (fs.existsSync(worktreeDir)) {
+                this._addWatch(worktreeDir);
+                anyWatched = true;
             }
         }
+        if (!anyWatched) {
+            // Watch repo root so we detect when either dir is first created
+            this._addWatch(repoPath);
+        }
     }
     _addWatch(dirPath) {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-remote-cli",
-  "version": "1.9.6",
+  "version": "2.1.0",
   "description": "Remote web interface for Claude Code CLI sessions",
   "type": "module",
   "main": "dist/server/index.js",

package/public/app.js

@@ -37,6 +37,8 @@
   var dialogRootSelect = document.getElementById('dialog-root-select');
   var dialogRepoSelect = document.getElementById('dialog-repo-select');
   var dialogYolo = document.getElementById('dialog-yolo');
+  var dialogBranchInput = document.getElementById('dialog-branch-input');
+  var dialogBranchList = document.getElementById('dialog-branch-list');
   var contextMenu = document.getElementById('context-menu');
   var ctxResumeYolo = document.getElementById('ctx-resume-yolo');
   var ctxDeleteWorktree = document.getElementById('ctx-delete-worktree');
@@ -89,8 +91,82 @@
   var cachedSessions = [];
   var cachedWorktrees = [];
   var allRepos = [];
+  var allBranches = [];
   var attentionSessions = {};
 
+  function loadBranches(repoPath) {
+    allBranches = [];
+    dialogBranchList.innerHTML = '';
+    dialogBranchList.hidden = true;
+    if (!repoPath) return;
+
+    fetch('/branches?repo=' + encodeURIComponent(repoPath))
+      .then(function (res) {
+        if (!res.ok) return [];
+        return res.json();
+      })
+      .then(function (data) {
+        allBranches = data || [];
+      })
+      .catch(function () {
+        allBranches = [];
+      });
+  }
+
+  function filterBranches(query) {
+    dialogBranchList.innerHTML = '';
+    if (!query) {
+      dialogBranchList.hidden = true;
+      return;
+    }
+
+    var lower = query.toLowerCase();
+    var matches = allBranches.filter(function (b) {
+      return b.toLowerCase().indexOf(lower) !== -1;
+    }).slice(0, 10);
+
+    var exactMatch = allBranches.some(function (b) { return b === query; });
+
+    if (!exactMatch) {
+      var createLi = document.createElement('li');
+      createLi.className = 'branch-create-new';
+      createLi.textContent = 'Create new: ' + query;
+      createLi.addEventListener('click', function () {
+        dialogBranchInput.value = query;
+        dialogBranchList.hidden = true;
+      });
+      dialogBranchList.appendChild(createLi);
+    }
+
+    matches.forEach(function (branch) {
+      var li = document.createElement('li');
+      li.textContent = branch;
+      li.addEventListener('click', function () {
+        dialogBranchInput.value = branch;
+        dialogBranchList.hidden = true;
+      });
+      dialogBranchList.appendChild(li);
+    });
+
+    dialogBranchList.hidden = dialogBranchList.children.length === 0;
+  }
+
+  dialogBranchInput.addEventListener('input', function () {
+    filterBranches(dialogBranchInput.value.trim());
+  });
+
+  dialogBranchInput.addEventListener('focus', function () {
+    if (dialogBranchInput.value.trim()) {
+      filterBranches(dialogBranchInput.value.trim());
+    }
+  });
+
+  document.addEventListener('click', function (e) {
+    if (!dialogBranchInput.contains(e.target) && !dialogBranchList.contains(e.target)) {
+      dialogBranchList.hidden = true;
+    }
+  });
+
   // ── PIN Auth ────────────────────────────────────────────────────────────────
 
   function submitPin() {
@@ -917,6 +993,8 @@
   dialogRootSelect.addEventListener('change', function () {
     var root = dialogRootSelect.value;
     dialogRepoSelect.innerHTML = '<option value="">Select a repo...</option>';
+    dialogBranchInput.value = '';
+    allBranches = [];
 
     if (!root) {
       dialogRepoSelect.disabled = true;
@@ -934,13 +1012,20 @@
     dialogRepoSelect.disabled = false;
   });
 
-  function startSession(repoPath, worktreePath, claudeArgs) {
+  dialogRepoSelect.addEventListener('change', function () {
+    var repoPath = dialogRepoSelect.value;
+    dialogBranchInput.value = '';
+    loadBranches(repoPath);
+  });
+
+  function startSession(repoPath, worktreePath, claudeArgs, branchName) {
     var body = {
       repoPath: repoPath,
       repoName: repoPath.split('/').filter(Boolean).pop(),
     };
     if (worktreePath) body.worktreePath = worktreePath;
     if (claudeArgs) body.claudeArgs = claudeArgs;
+    if (branchName) body.branchName = branchName;
 
     fetch('/sessions', {
       method: 'POST',
@@ -961,6 +1046,9 @@
   newSessionBtn.addEventListener('click', function () {
     customPath.value = '';
     dialogYolo.checked = false;
+    dialogBranchInput.value = '';
+    dialogBranchList.hidden = true;
+    allBranches = [];
     populateDialogRootSelect();
 
     var sidebarRoot = sidebarRootFilter.value;
@@ -985,10 +1073,18 @@
   });
 
   dialogStart.addEventListener('click', function () {
-    var path = customPath.value.trim() || dialogRepoSelect.value;
-    if (!path) return;
+    var repoPathValue = customPath.value.trim() || dialogRepoSelect.value;
+    if (!repoPathValue) return;
     var args = dialogYolo.checked ? ['--dangerously-skip-permissions'] : undefined;
-    startSession(path, undefined, args);
+    var branch = dialogBranchInput.value.trim() || undefined;
+    startSession(repoPathValue, undefined, args, branch);
+  });
+
+  customPath.addEventListener('blur', function () {
+    var pathValue = customPath.value.trim();
+    if (pathValue) {
+      loadBranches(pathValue);
+    }
   });
 
   dialogCancel.addEventListener('click', function () {

package/public/index.html

@@ -131,6 +131,15 @@
       <select id="dialog-repo-select" disabled><option value="">Select a repo...</option></select>
     </div>
 
+    <div class="dialog-field">
+      <label for="dialog-branch-input">Branch</label>
+      <div class="branch-input-wrapper">
+        <input type="text" id="dialog-branch-input" placeholder="Search or create branch..." autocomplete="off" />
+        <ul id="dialog-branch-list" class="branch-dropdown" hidden></ul>
+      </div>
+      <span class="dialog-option-hint">Leave empty for auto-generated name</span>
+    </div>
+
     <hr class="dialog-separator" />
     <div class="dialog-custom-path">
       <label for="custom-path-input">Or enter a local path:</label>

package/public/style.css

@@ -618,6 +618,62 @@ dialog#new-session-dialog h2 {
   cursor: not-allowed;
 }
 
+/* ===== Branch Input ===== */
+.branch-input-wrapper {
+  position: relative;
+}
+
+.branch-input-wrapper input {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 0.875rem;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.branch-input-wrapper input:focus {
+  border-color: var(--accent);
+}
+
+.branch-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  list-style: none;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+}
+
+.branch-dropdown li {
+  padding: 8px 12px;
+  font-size: 0.85rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.branch-dropdown li:hover,
+.branch-dropdown li.highlighted {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+.branch-dropdown li.branch-create-new {
+  color: var(--accent);
+  font-style: italic;
+}
+
 .repo-group-label {
   font-size: 0.75rem;
   font-weight: 600;