feat(web): redesign spawn dialog advanced area (#205)

web/src/spawnForm.ts

@@ -152,20 +152,20 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
       <input class="raw-input cmd-raw" name="command_raw" type="text" hidden
              placeholder="bash -l" autocomplete="off" />
     </div>
-    <div class="field">
-      <span class="field-label">Name</span>
-      <div class="name-row">
-        <input name="name" type="text" autocomplete="off"
-               placeholder="named after your first prompt" />
-      </div>
-    </div>
-    <fieldset class="worktree">
+    <div class="advanced">
       <button type="button" class="tree-folder-header wt-toggle" aria-expanded="false">
         <span class="chevron">▾</span>
-        <span class="folder-name">Advanced options</span>
+        <span class="folder-name">Advanced</span>
         <span class="wt-summary"></span>
       </button>
       <div class="wt-collapsible" hidden>
+        <div class="field">
+          <span class="field-label">Session name</span>
+          <div class="name-row">
+            <input name="name" type="text" autocomplete="off"
+                   placeholder="named after your first prompt" />
+          </div>
+        </div>
         <label class="row-inline structured-view" hidden>
           <input type="checkbox" name="structured_view" />
           Structured view
@@ -174,34 +174,36 @@ export function createSpawnForm(opts: SpawnFormOptions): SpawnFormHandle {
           <span class="field-label">Worktree</span>
           <div class="picker wt-choices"></div>
         </div>
-        <label class="row-inline">
-          <input type="checkbox" name="worktree_enabled" />
-          Create git worktree
-        </label>
-        <p class="wt-hint" hidden></p>
-        <div class="wt-body" hidden>
-          <p class="wt-repo"></p>
-          <div class="wt-mode" role="radiogroup" aria-label="Branch source">
-            <label class="row-inline">
-              <input type="radio" name="worktree_branch_mode" value="new" />
-              New branch
+        <div class="adv-group">
+          <label class="row-inline">
+            <input type="checkbox" name="worktree_enabled" />
+            Create git worktree
+          </label>
+          <p class="wt-hint" hidden></p>
+          <div class="wt-body" hidden>
+            <p class="wt-repo"></p>
+            <div class="wt-mode" role="radiogroup" aria-label="Branch source">
+              <label class="row-inline">
+                <input type="radio" name="worktree_branch_mode" value="new" />
+                New branch
+              </label>
+              <label class="row-inline">
+                <input type="radio" name="worktree_branch_mode" value="existing" />
+                Existing branch
+              </label>
+            </div>
+            <label class="wt-new-wrap">
+              New branch name
+              <input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
             </label>
-            <label class="row-inline">
-              <input type="radio" name="worktree_branch_mode" value="existing" />
-              Existing branch
+            <label class="wt-exist-wrap" hidden>
+              Pick a branch
+              <select class="branch-select"></select>
             </label>
           </div>
-          <label class="wt-new-wrap">
-            New branch name
-            <input name="worktree_branch" type="text" placeholder="feat/foo" autocomplete="off" />
-          </label>
-          <label class="wt-exist-wrap" hidden>
-            Pick a branch
-            <select class="branch-select"></select>
-          </label>
         </div>
       </div>
-    </fieldset>
+    </div>
     <p class="form-error" role="alert" aria-live="polite"></p>
     <div class="form-actions">
       <button type="submit" class="btn btn-primary">Spawn</button>

web/src/styles.css

@@ -3443,14 +3443,9 @@ input.leaf-rename:focus {
     overflow-y: visible;
   }
 
-  /* Rides the bottom of the scroll box: reachable at any scroll position, and
-     `margin-top: auto` keeps it at the screen's foot when the form is short. */
   .spawn-modal .form-actions {
-    position: sticky;
-    bottom: 0;
     margin-top: auto;
-    padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
-    background: var(--surface);
+    padding-bottom: calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
     box-shadow: 0 -8px 12px -8px oklch(0 0 0 / 0.5);
   }
 
@@ -3532,20 +3527,16 @@ input.leaf-rename:focus {
   flex: 0 0 auto;
 }
 
-.worktree {
-  border: 1px solid var(--border);
-  border-radius: var(--r-2);
-  padding: 0 var(--sp-3);
-  margin: 0;
+.advanced {
   display: flex;
   flex-direction: column;
-  background: color-mix(in oklab, var(--surface-2) 50%, transparent);
 }
 
-.worktree .wt-toggle {
-  margin: 0 calc(var(--sp-3) * -1);
-  padding-left: var(--sp-3);
-  width: calc(100% + var(--sp-3) * 2);
+.advanced .wt-toggle {
+  border-top: 1px solid var(--border);
+  border-radius: 0;
+  padding-top: var(--sp-2);
+  padding-bottom: var(--sp-2);
 }
 
 .wt-summary {
@@ -3557,13 +3548,27 @@ input.leaf-rename:focus {
   display: flex;
   flex-direction: column;
   gap: var(--sp-3);
-  padding-bottom: var(--sp-3);
+  padding: var(--sp-2) 0 var(--sp-1);
 }
 
 .wt-collapsible[hidden] {
   display: none;
 }
 
+/* Worktree sub-group: left accent border when expanded, visually nested. */
+.adv-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-3);
+  padding-left: var(--sp-3);
+  border-left: 2px solid var(--border);
+  margin-top: var(--sp-1);
+}
+
+.adv-group:has(input[name="worktree_enabled"]:checked) {
+  border-left-color: var(--accent);
+}
+
 .form-error {
   color: var(--danger);
   margin: 0;
@@ -3881,6 +3886,11 @@ input.leaf-rename:focus {
   gap: var(--sp-2);
   justify-content: flex-end;
   margin-top: var(--sp-2);
+  position: sticky;
+  bottom: 0;
+  padding: var(--sp-2) 0;
+  background: var(--surface);
+  z-index: 1;
 }
 
 .reroll {