cmux-next composer: attach location controls in a tray

Packages/macOS/CmuxNext/Sources/CmuxNextAgentPane/Resources/agent-pane/index.html

@@ -2328,7 +2328,7 @@
   box-sizing: border-box;
   width: 100%;
   min-height: 45px;
-  max-height: 40vh;
+  max-height: calc(22px * 8 + 23px);
   margin: 0;
   padding: 15px 16px 8px 32px;
   border: 0;
@@ -2347,7 +2347,7 @@
 .acpmux-composer[data-shell] .acpmux-composer-box {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acpmux-shell-accent) 55%, transparent);
 }
-/* The location row above the composer (ComposerContext.tsx): "This Mac ⌄ · <folder> ⌄", one quiet
+/* The location tray below the composer (ComposerContext.tsx): folder and branch controls, one quiet
    row of text menu buttons that all look alike. A control is a plain text button (no native bezel,
    no fill, no weight change); hover and an open menu lay a soft rounded wash from the theme under
    it, and keyboard focus draws a ring in the theme's text color. The padding is always there, so
@@ -2356,14 +2356,23 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 2px;
+  gap: 8px;
   min-width: 0;
-  height: 28px;
-  margin: 0 12px -2px;
+  height: 36px;
+  margin: -12px 0 16px;
+  padding: 0 14px;
+  box-sizing: border-box;
+  border: 1px solid var(--acpmux-composer-edge);
+  border-top: 0;
+  border-radius: 0 0 20px 20px;
+  background: var(--acpmux-composer-tray);
   color: var(--agent-muted);
   font-size: 12px;
   line-height: 16px;
 }
+.acpmux-composer-context > .acpmux-location-leading { display: flex; align-items: center; gap: 2px; min-width: 0; margin-right: auto; flex: 1 1 0; }
+.acpmux-composer-context > .acpmux-location-leading > .acpmux-location-picker,
+.acpmux-composer-context > .acpmux-location-picker { flex: 1 1 0; min-width: 0; }
 .acpmux-location-picker {
   position: relative;
   display: inline-flex;
@@ -2377,6 +2386,7 @@
   align-items: center;
   gap: 4px;
   min-width: 0;
+  width: 100%;
   max-width: 220px;
   height: 22px;
   margin: 0;
@@ -2428,6 +2438,37 @@
 .acpmux-location-menu .ui-menu-item[data-highlighted] { background: var(--acpmux-menu-hover); }
 .acpmux-location-menu .acpmux-menu-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .acpmux-location-menu .ui-separator { flex: none; height: 1px; margin: 4px 6px; background: color-mix(in srgb, var(--agent-text) 12%, transparent); }
+
+/* The shelf sits behind the composer edge instead of reading as a second full row. The composer
+   owns the shadow and the shelf keeps a stable inset, so opening a menu never moves the transcript. */
+.acpmux-composer-box { z-index: 2; }
+.acpmux-composer-context {
+  position: relative;
+  z-index: 1;
+  height: 40px;
+  margin: -14px 2px 12px;
+  padding: 10px 10px 0;
+  border-top: 0;
+  border-radius: 0 0 18px 18px;
+  box-shadow: inset 0 0 0 .5px var(--acpmux-composer-edge), 0 4px 10px color-mix(in srgb, var(--agent-text) 6%, transparent);
+}
+.acpmux-composer-bar {
+  min-height: 52px;
+  height: auto;
+  padding: 6px 12px;
+}
+.acpmux-mode .acpmux-mode-text { display: none; }
+.acpmux-mode .acpmux-picker-button {
+  width: 30px;
+  justify-content: center;
+  gap: 0;
+  padding: 0;
+}
+.acpmux-mode .acpmux-picker-button .acpmux-icon:last-child { display: none; }
+.acpmux-mode .acpmux-picker-button[aria-expanded="true"],
+.acpmux-mode .acpmux-picker-button:hover { color: var(--agent-text); }
+.acpmux-send { width: 32px; height: 32px; }
+.acpmux-context-ring { width: 32px; height: 32px; }
 /* The composer's attachment row (Composer.tsx AttachmentChip), laid out like a native chat composer:
    the row sits inside the composer at the text's own inset, the attachments keep a gap between them
    and above the text, and each thumbnail's corners nest in the composer's (inner radius = the
@@ -2685,7 +2726,9 @@
    user formats. Theme tokens only. */
 .acpmux-md-field {
   position: relative;
-  max-height: 40vh;
+  /* Keep long drafts inside the composer. Eight lines matches the reference composer and
+     leaves the transcript and location shelf anchored while the draft grows. */
+  max-height: calc(22px * 8 + 23px);
   overflow-y: auto;
   padding: 15px 16px 8px;
   font-size: 15px;

webviews/src/agent-session/acpmux/Composer.tsx

@@ -583,32 +583,6 @@ export function Composer({
           {t(blocked.reason)}
         </p>
       )}
-      <ComposerContext
-        projectChoices={projectChoices}
-        onBrowseProject={onBrowseProject}
-        summary={snapshot.summary}
-        sessions={snapshot.sessions}
-        peers={snapshot.peers}
-        started={(snapshot.summary?.turnCount ?? 0) > 0 || snapshot.rows.length > 0}
-        onProject={
-          onProject &&
-          ((cwd, peer) => {
-            onProject(cwd, peer);
-            field.current?.focus();
-          })
-        }
-        localName={localName}
-        movedTo={movedTo}
-        busy={snapshot.isWorking}
-        onMove={
-          onMove &&
-          ((cwd) => {
-            const move = onMove(cwd);
-            setAttachments((current) => [...current.filter((item) => !item.move), moveAttachment(move)]);
-            field.current?.focus();
-          })
-        }
-      />
       {findingFiles &&
         searchFiles &&
         form.current?.parentElement &&
@@ -792,6 +766,32 @@ export function Composer({
           </span>
         </div>
       </div>
+      <ComposerContext
+        projectChoices={projectChoices}
+        onBrowseProject={onBrowseProject}
+        summary={snapshot.summary}
+        sessions={snapshot.sessions}
+        peers={snapshot.peers}
+        started={(snapshot.summary?.turnCount ?? 0) > 0 || snapshot.rows.length > 0}
+        onProject={
+          onProject &&
+          ((cwd, peer) => {
+            onProject(cwd, peer);
+            field.current?.focus();
+          })
+        }
+        localName={localName}
+        movedTo={movedTo}
+        busy={snapshot.isWorking}
+        onMove={
+          onMove &&
+          ((cwd) => {
+            const move = onMove(cwd);
+            setAttachments((current) => [...current.filter((item) => !item.move), moveAttachment(move)]);
+            field.current?.focus();
+          })
+        }
+      />
     </form>
   );
 }

webviews/src/agent-session/acpmux/ComposerContext.tsx

@@ -23,7 +23,7 @@ type Summary = NonNullable<AcpmuxSnapshot["summary"]>;
 type Session = AcpmuxSnapshot["sessions"][number];
 type Location = { id: string; label: string; detail?: string };
 
-/// The small location row above the composer. New chats can choose a local or Cloud
+/// The location tray attached below the composer. New chats can choose a local or Cloud
 /// computer and one of its known folders. Once the first turn starts the computer is a label and
 /// the folder moves the chat (`onMove`), except while a turn runs.
 export function ComposerContext({
@@ -84,56 +84,99 @@ export function ComposerContext({
   if (!currentComputer && !currentFolder && !projectChoices) return null;
   const readOnly = started || onProject === undefined;
   const moves = started && onMove !== undefined && !busy;
+  const branch = summary?.branch;
   return (
     <div className="acpmux-composer-context" data-readonly={readOnly ? "true" : undefined}>
-      <LocationPicker
-        label={t(CONTEXT_LABELS.computer)}
-        menu="Computer"
-        value={currentComputer?.label ?? t(CONTEXT_LABELS.chooseComputer)}
-        options={computers}
-        selected={selectedComputer}
-        disabled={readOnly}
-        onPick={(id) => {
-          if (!readOnly && id !== selectedComputer) {
-            setSelectedComputer(id);
-            const folder = availableFolders(summary, sessions, id)[0]?.id;
-            if (folder) onProject?.(folder, id === "local" ? undefined : id);
-          }
-        }}
-      />
-      <span className="acpmux-context-divider" aria-hidden="true">
-        ·
-      </span>
-      {!readOnly && selectedComputer === "local" && projectChoices ? (
-        <FolderMenu
-          label={t(CONTEXT_LABELS.folder)}
-          menu="Location"
-          folders={folders}
-          current={currentFolder}
-          onPick={(cwd) => onProject?.(cwd)}
-          onBrowse={onBrowseProject}
-        />
-      ) : (
+      <div className="acpmux-location-leading">
+        {!readOnly && selectedComputer === "local" && projectChoices ? (
+          <FolderMenu
+            label={t(CONTEXT_LABELS.folder)}
+            menu="Location"
+            folders={folders}
+            current={currentFolder}
+            onPick={(cwd) => onProject?.(cwd)}
+            onBrowse={onBrowseProject}
+          />
+        ) : (
+          <LocationPicker
+            label={t(CONTEXT_LABELS.folder)}
+            menu="Location"
+            value={currentFolder ? projectLabel(currentFolder) : t(CONTEXT_LABELS.chooseFolder)}
+            options={folders}
+            selected={currentFolder}
+            disabled={readOnly && !moves}
+            icon={<FolderIcon />}
+            allowPath
+            onPick={(cwd) => {
+              if (moves) {
+                if (cwd !== currentFolder) onMove?.(cwd);
+              } else if (!readOnly) onProject?.(cwd, selectedComputer === "local" ? undefined : selectedComputer);
+            }}
+          />
+        )}
         <LocationPicker
-          label={t(CONTEXT_LABELS.folder)}
-          menu="Location"
-          value={currentFolder ? projectLabel(currentFolder) : t(CONTEXT_LABELS.chooseFolder)}
-          options={folders}
-          selected={currentFolder}
-          disabled={readOnly && !moves}
-          icon={<FolderIcon />}
-          allowPath
-          onPick={(cwd) => {
-            if (moves) {
-              if (cwd !== currentFolder) onMove?.(cwd);
-            } else if (!readOnly) onProject?.(cwd, selectedComputer === "local" ? undefined : selectedComputer);
+          label={t(CONTEXT_LABELS.computer)}
+          menu="Computer"
+          value={currentComputer?.label ?? t(CONTEXT_LABELS.chooseComputer)}
+          options={computers}
+          selected={selectedComputer}
+          disabled={readOnly}
+          onPick={(id) => {
+            if (!readOnly && id !== selectedComputer) {
+              setSelectedComputer(id);
+              const folder = availableFolders(summary, sessions, id)[0]?.id;
+              if (folder) onProject?.(folder, id === "local" ? undefined : id);
+            }
           }}
         />
-      )}
+      </div>
+      {branch && <BranchPicker branch={branch} />}
     </div>
   );
 }
 
+function BranchPicker({ branch }: { branch: string }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <span className="acpmux-location-picker" title={branch}>
+      <Menu open={open} onOpenChange={setOpen}>
+        <MenuButton className="acpmux-location-button" label={t("changes.scope.branch")}>
+          <LocationFace icon={<BranchIcon />} value={branch} chevron />
+        </MenuButton>
+        <MenuPopup side="top" className="acpmux-menu acpmux-location-menu" align="end">
+          <MenuRadioGroup value={branch} onValueChange={() => undefined}>
+            <MenuRadioItem value={branch} disabled className="acpmux-menu-item">
+              <span className="acpmux-menu-text">
+                <span className="acpmux-menu-label">{branch}</span>
+              </span>
+            </MenuRadioItem>
+          </MenuRadioGroup>
+        </MenuPopup>
+      </Menu>
+    </span>
+  );
+}
+
+function BranchIcon() {
+  return (
+    <svg
+      className="acpmux-icon acpmux-location-icon"
+      width={14}
+      height={14}
+      viewBox="0 0 16 16"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.25}
+      aria-hidden="true"
+    >
+      <circle cx="4" cy="3" r="1.5" />
+      <circle cx="4" cy="13" r="1.5" />
+      <circle cx="12" cy="13" r="1.5" />
+      <path d="M4 4.5v5A3.5 3.5 0 0 0 7.5 13H10.5M4 6.5A3.5 3.5 0 0 1 7.5 3H10" />
+    </svg>
+  );
+}
+
 function computerId(summary?: Summary): string {
   return summary?.hostKind === "cloud" && (summary.peer || summary.host) ? (summary.peer ?? summary.host)! : "local";
 }
@@ -267,7 +310,7 @@ function FolderMenu({
         <MenuButton className="acpmux-location-button" label={label}>
           <LocationFace icon={<FolderIcon />} value={value} chevron />
         </MenuButton>
-        <MenuPopup className="acpmux-menu acpmux-location-menu" align="end">
+        <MenuPopup side="top" className="acpmux-menu acpmux-location-menu" align="end">
           {folders.length > 0 && (
             <>
               <div className="acpmux-location-folders">
@@ -411,6 +454,7 @@ function LocationPicker({
         anchor={open ? trigger.current : null}
         label={label}
         className="acpmux-menu acpmux-location-menu"
+        side="top"
       >
         <Combobox
           suggestions={suggestions}

webviews/src/agent-session/acpmux/ComposerPickers.tsx

@@ -238,7 +238,7 @@ export function ComposerPickers({
           button={
             <>
               <ShieldIcon />
-              <span>{mode?.name ?? t(PICKER_LABELS.mode)}</span>
+              <span className="acpmux-mode-text">{mode?.name ?? t(PICKER_LABELS.mode)}</span>
               <ChevronIcon />
             </>
           }