feat: add create sub-worktree shortcut to worktree menu (#269)

* feat: add create sub-worktree shortcut to worktree menu

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* fix: address review nits on sub-worktree shortcut

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* refactor: use existing auto-naming for sub-worktrees

Drop the curated NICE_WORDS list and suggestSubworktreeBranchName helper
that pre-filled `<parent>-<word>` branch names. Leaving the branch field
empty lets the backend's existing auto-naming take over (prompt-based when
autoName is configured, `change-<uuid>` fallback otherwise), which also
restores prompt-based naming that pre-filling defeated. Nesting is driven
by baseBranch, not the name prefix, so the nested display is unaffected.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

* chore: gitignore .claude/settings.local.json

Local Claude Code settings shouldn't be committed; ignoring prevents
accidentally staging it again.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: centdix <farhadg110@gmail.com>

Author: 3 people

.gitignore

@@ -16,4 +16,5 @@ public/
 .env.local
 .webmux.local.yaml
 docs/useful-commands.txt
+.claude/settings.local.json
 .claude/worktrees/

frontend/src/App.svelte

@@ -140,6 +140,7 @@
   let baseBranches = $state<AvailableBranch[]>([]);
   let baseBranchesLoading = $state(false);
   let baseBranchesError = $state<string | null>(null);
+  let lockedBaseBranch = $state<string | null>(null);
   let includeRemoteBranches = $state(false);
   let searchQuery = $state("");
   let worktreeSearchInput = $state<HTMLInputElement | null>(null);
@@ -613,6 +614,14 @@
   function openCreateDialog(issue: LinearIssue | null = null): void {
     includeRemoteBranches = false;
     assignIssue = issue;
+    lockedBaseBranch = null;
+    showCreateDialog = true;
+  }
+
+  function openSubworktreeDialog(parentBranch: string): void {
+    includeRemoteBranches = false;
+    assignIssue = null;
+    lockedBaseBranch = parentBranch;
     showCreateDialog = true;
   }
 
@@ -644,6 +653,7 @@
       : request;
     showCreateDialog = false;
     assignIssue = null;
+    lockedBaseBranch = null;
 
     try {
       const createPromise = api.createWorktree({ body: finalRequest });
@@ -1218,6 +1228,7 @@
           mergeBranch = branch;
         }}
         onremove={(b) => (removeBranch = b)}
+        oncreatesubworktree={openSubworktreeDialog}
         onposttolinear={handlePostToLinear}
       />
       {#if config.projectDir}
@@ -1415,11 +1426,12 @@
     {baseBranches}
     {baseBranchesLoading}
     {baseBranchesError}
+    {lockedBaseBranch}
     startupEnvs={config.startupEnvs ?? {}}
     linearCreateTicketOption={config.linearCreateTicketOption}
     openedFromLinearIssue={assignIssue !== null}
     oncreate={handleCreate}
-    oncancel={() => { showCreateDialog = false; assignIssue = null; }}
+    oncancel={() => { showCreateDialog = false; assignIssue = null; lockedBaseBranch = null; }}
   />
 {/if}
 

frontend/src/lib/BranchSelector.svelte

@@ -11,6 +11,7 @@
     error = null,
     placeholder = "Select a branch",
     initialOpen = false,
+    disabled = false,
     inlineToggleLabel,
     inlineToggleAriaLabel,
     inlineToggleChecked = false,
@@ -24,6 +25,7 @@
     error?: string | null;
     placeholder?: string;
     initialOpen?: boolean;
+    disabled?: boolean;
     inlineToggleLabel?: string;
     inlineToggleAriaLabel?: string;
     inlineToggleChecked?: boolean;
@@ -114,17 +116,20 @@
   <span class="block text-xs text-muted mb-1.5">{label}</span>
   <button
     type="button"
-    class="flex w-full items-center justify-between gap-3 rounded-md border border-edge bg-surface px-2.5 py-1.5 text-left text-[13px] text-primary outline-none transition-colors hover:bg-hover focus:border-accent"
+    {disabled}
+    class="flex w-full items-center justify-between gap-3 rounded-md border border-edge bg-surface px-2.5 py-1.5 text-left text-[13px] text-primary outline-none transition-colors hover:bg-hover focus:border-accent disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:bg-surface"
     aria-label={label}
-    aria-expanded={selectorOpen}
+    aria-expanded={disabled ? undefined : selectorOpen}
     onclick={toggleSelector}
   >
     <span class={selected ? "font-mono" : "text-muted/50"}>
       {selected || placeholder}
     </span>
-    <span class="text-[11px] text-muted">{selectorOpen ? "▴" : "▾"}</span>
+    {#if !disabled}
+      <span class="text-[11px] text-muted">{selectorOpen ? "▴" : "▾"}</span>
+    {/if}
   </button>
-  {#if selectorOpen}
+  {#if selectorOpen && !disabled}
     <div class="mt-2 rounded-lg border border-edge bg-surface/60">
       <div class="border-b border-edge p-2">
         <input

frontend/src/lib/CreateWorktreeDialog.svelte

@@ -29,6 +29,7 @@
     baseBranches = [],
     baseBranchesLoading = false,
     baseBranchesError = null,
+    lockedBaseBranch = null,
     includeRemoteBranches = $bindable(false),
     startupEnvs = {},
     linearCreateTicketOption = false,
@@ -49,6 +50,7 @@
     baseBranches?: AvailableBranch[];
     baseBranchesLoading?: boolean;
     baseBranchesError?: string | null;
+    lockedBaseBranch?: string | null;
     includeRemoteBranches: boolean;
     startupEnvs?: Record<string, string | boolean>;
     linearCreateTicketOption?: boolean;
@@ -122,7 +124,8 @@
   // svelte-ignore state_referenced_locally
   let prompt = $state(initialPrompt);
   let selectedExistingBranch = $state("");
-  let selectedBaseBranch = $state("");
+  // svelte-ignore state_referenced_locally
+  let selectedBaseBranch = $state(lockedBaseBranch ?? "");
   let multiAgentMode = $state(savedMultiAgentMode);
   let selectedAgentIds = $state<AgentId[]>(savedAgentIds);
   let profile = $state(savedProfile ?? "");
@@ -275,7 +278,7 @@
       });
     }}
   >
-    <h2 class="text-base mb-4">New Worktree</h2>
+    <h2 class="text-base mb-4">{lockedBaseBranch !== null ? "New Sub-Worktree" : "New Worktree"}</h2>
     <div class="mb-4">
       <label class="block text-xs text-muted mb-1.5" for="wt-prompt"
         >Prompt <span class="opacity-60">({promptRequired ? "required" : "optional"})</span></label
@@ -374,9 +377,14 @@
           loading={baseBranchesLoading}
           error={baseBranchesError}
           placeholder="Project main branch (default)"
+          disabled={lockedBaseBranch !== null}
           onselect={(branch) => (selectedBaseBranch = branch)}
         />
-        {#if selectedBaseBranch}
+        {#if lockedBaseBranch !== null}
+          <p class="mt-2 text-[11px] text-muted">
+            Creating a sub-worktree based on <span class="font-mono">{lockedBaseBranch}</span>.
+          </p>
+        {:else if selectedBaseBranch}
           <button
             type="button"
             class="mt-2 text-[11px] text-accent hover:underline"

frontend/src/lib/WorktreeList.svelte

@@ -30,6 +30,7 @@
     onarchive,
     onmerge,
     onremove,
+    oncreatesubworktree,
     onposttolinear,
   }: {
     rows: WorktreeListRow[];
@@ -45,6 +46,7 @@
     onarchive: (branch: string) => void;
     onmerge: (branch: string) => void;
     onremove: (branch: string) => void;
+    oncreatesubworktree: (branch: string) => void;
     onposttolinear?: (branch: string) => void;
   } = $props();
 
@@ -368,6 +370,17 @@
             >
               Merge
             </button>
+            <button
+              type="button"
+              disabled={isCreating}
+              class="w-full px-2 py-1.5 rounded text-left text-xs text-primary hover:bg-hover disabled:opacity-50 disabled:cursor-not-allowed"
+              onclick={(event) => {
+                event.stopPropagation();
+                runMenuAction(wt.branch, oncreatesubworktree);
+              }}
+            >
+              Create sub-worktree
+            </button>
             <button
               type="button"
               class="w-full px-2 py-1.5 rounded text-left text-xs text-danger hover:bg-hover"

frontend/src/lib/WorktreeList.test.ts

@@ -63,6 +63,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive: vi.fn(),
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove,
       },
     });
@@ -88,6 +89,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive: vi.fn(),
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove: vi.fn(),
       },
     });
@@ -112,6 +114,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive,
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove: vi.fn(),
       },
     });
@@ -127,6 +130,33 @@ describe("WorktreeList", () => {
     expect(onarchive).toHaveBeenCalledWith("feature/menu-actions");
   });
 
+  it("calls oncreatesubworktree with the row branch from the menu", async () => {
+    const oncreatesubworktree = vi.fn();
+
+    render(WorktreeList, {
+      props: {
+        rows: [createRow(createWorktree("feature/sub-base"))],
+        selected: null,
+        removing: new Set<string>(),
+        initializing: new Set<string>(),
+        archiving: new Set<string>(),
+        postingLinear: new Set<string>(),
+        notifiedBranches: new Set<string>(),
+        onselect: vi.fn(),
+        onclose: vi.fn(),
+        onarchive: vi.fn(),
+        onmerge: vi.fn(),
+        oncreatesubworktree,
+        onremove: vi.fn(),
+      },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: /actions for feature\/sub-base/i }));
+    await fireEvent.click(screen.getByRole("button", { name: "Create sub-worktree" }));
+
+    expect(oncreatesubworktree).toHaveBeenCalledWith("feature/sub-base");
+  });
+
   it("renders labels as the primary row name with the branch below", () => {
     render(WorktreeList, {
       props: {
@@ -141,6 +171,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive: vi.fn(),
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove: vi.fn(),
       },
     });
@@ -169,6 +200,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive: vi.fn(),
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove: vi.fn(),
       },
     });
@@ -202,6 +234,7 @@ describe("WorktreeList", () => {
         onclose: vi.fn(),
         onarchive: vi.fn(),
         onmerge: vi.fn(),
+        oncreatesubworktree: vi.fn(),
         onremove: vi.fn(),
       },
     });