fix(workspaces): keep edit panel open; header machine quick-switch

Remove workspace-binding-changed auto-close so Clear and autosave no
longer dismiss the drawer. Replace header machine badge with a dropdown
for quick scope switching. Add regression tests and planning doc notes.

Signed-off-by: crimsonsunset <jsangio1@gmail.com>

Author: crimsonsunset

apps/desktop/src/features/workspaces/workspace-binding-panel.component.tsx

@@ -14,7 +14,7 @@ import {
   Trash2,
   X,
 } from 'lucide-react';
-import { Button, useConfirm, useToast } from '@mcpmux/ui';
+import { Button, useConfirm, useToast, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@mcpmux/ui';
 import { useWorkspaceEvents } from '@/lib/backend/events';
 import { apiCall } from '@/lib/api/transport';
 import {
@@ -58,7 +58,6 @@ import {
 import {
   CollapsibleSection,
   EffectiveFeaturesContent,
-  type CollapsibleSectionRef,
 } from './WorkspacesPage';
 
 /**
@@ -137,6 +136,132 @@ function Pill({
   );
 }
 
+/**
+ * Compact machine quick-switch dropdown in the panel header (mirrors Scope machine picker).
+ */
+function HeaderMachineDropdown({
+  mode,
+  machines,
+  machineId,
+  setMachineId,
+  machineIds,
+  setMachineIds,
+  machineBadgeLabel,
+  machineBadgeIcon,
+  t,
+}: {
+  mode: 'create' | 'edit' | 'create-from-live';
+  machines: Machine[];
+  machineId: string;
+  setMachineId: (value: string) => void;
+  machineIds: string[];
+  setMachineIds: (value: string[]) => void;
+  machineBadgeLabel: string;
+  machineBadgeIcon: string | null;
+  t: TFunction<['workspaces', 'common']>;
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const usesSingleMachine = mode === 'edit';
+
+  /** Apply a machine selection from the header dropdown. */
+  const handleSelect = (nextId: string) => {
+    if (usesSingleMachine) {
+      setMachineId(nextId);
+    } else {
+      setMachineIds(nextId ? [nextId] : []);
+    }
+    setMenuOpen(false);
+  };
+
+  /** Whether the dropdown row matches the current machine scope. */
+  const isSelected = (candidateId: string | null): boolean => {
+    if (usesSingleMachine) {
+      if (!candidateId) return !machineId;
+      return machineId === candidateId;
+    }
+    if (!candidateId) return machineIds.length === 0;
+    return machineIds.length === 1 && machineIds[0] === candidateId;
+  };
+
+  return (
+    <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+      <DropdownMenuTrigger
+        className="flex-shrink-0 rounded-md transition-colors hover:bg-[rgb(var(--surface-hover))] focus:outline-none focus:ring-2 focus:ring-primary-500 cursor-pointer"
+        data-testid="workspace-binding-header-machine-badge"
+        title={t('panel.machineQuickSwitch')}
+      >
+        <Pill tone="neutral">
+          <span className="inline-flex items-center gap-1 normal-case tracking-normal">
+            {machineBadgeIcon ? (
+              <span className="text-xs leading-none">{machineBadgeIcon}</span>
+            ) : null}
+            {machineBadgeLabel}
+            <ChevronDown className="h-3 w-3 opacity-70" />
+          </span>
+        </Pill>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="w-52 py-1 px-1 bg-[rgb(var(--surface))] border border-[rgb(var(--border))] rounded-lg shadow-lg"
+        data-testid="workspace-binding-header-machine-menu"
+      >
+        <HeaderMachineOption
+          label={t('panel.machineGlobal')}
+          selected={isSelected(null)}
+          onSelect={() => handleSelect('')}
+          testId="workspace-binding-header-machine-global"
+        />
+        {machines.map((machine) => (
+          <HeaderMachineOption
+            key={machine.id}
+            label={machine.name}
+            icon={machine.icon}
+            selected={isSelected(machine.id)}
+            onSelect={() => handleSelect(machine.id)}
+            testId={`workspace-binding-header-machine-${machine.id}`}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * Single row in the header machine quick-switch menu.
+ */
+function HeaderMachineOption({
+  label,
+  icon,
+  selected,
+  onSelect,
+  testId,
+}: {
+  label: string;
+  icon?: string | null;
+  selected: boolean;
+  onSelect: () => void;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onSelect}
+      className={[
+        'w-full flex items-center gap-2 px-2.5 py-2 rounded-md text-left text-sm transition-colors',
+        selected
+          ? 'bg-primary-500/10 text-primary-700 dark:text-primary-300'
+          : 'hover:bg-[rgb(var(--surface-hover))] text-[rgb(var(--foreground))]',
+      ].join(' ')}
+      data-testid={testId}
+    >
+      {icon ? <span className="text-sm leading-none flex-shrink-0">{icon}</span> : null}
+      <span className="flex-1 min-w-0 truncate">{label}</span>
+      {selected ? <Check className="h-4 w-4 flex-shrink-0 text-primary-600" /> : null}
+    </button>
+  );
+}
+
 /**
  * Inline-editable workspace identity in the panel header: icon, label, and machine badge.
  */
@@ -147,9 +272,13 @@ function PanelIdentityHeader({
   icon,
   setIcon,
   workspaceRoot,
+  machines,
+  machineId,
+  setMachineId,
+  machineIds,
+  setMachineIds,
   machineBadgeLabel,
   machineBadgeIcon,
-  onMachineBadgeClick,
   onIconClear,
   badges,
   footer,
@@ -161,9 +290,13 @@ function PanelIdentityHeader({
   icon: string;
   setIcon: (value: string) => void;
   workspaceRoot?: string;
+  machines: Machine[];
+  machineId: string;
+  setMachineId: (value: string) => void;
+  machineIds: string[];
+  setMachineIds: (value: string[]) => void;
   machineBadgeLabel: string;
   machineBadgeIcon: string | null;
-  onMachineBadgeClick: () => void;
   onIconClear: () => void;
   badges?: ReactNode;
   footer?: ReactNode;
@@ -219,22 +352,17 @@ function PanelIdentityHeader({
         {footer}
       </div>
 
-      <button
-        type="button"
-        onClick={onMachineBadgeClick}
-        className="flex-shrink-0 rounded-md transition-colors hover:bg-[rgb(var(--surface-hover))] focus:outline-none focus:ring-2 focus:ring-primary-500"
-        data-testid="workspace-binding-header-machine-badge"
-        title={machineBadgeLabel}
-      >
-        <Pill tone="neutral">
-          <span className="inline-flex items-center gap-1 normal-case tracking-normal">
-            {machineBadgeIcon ? (
-              <span className="text-xs leading-none">{machineBadgeIcon}</span>
-            ) : null}
-            {machineBadgeLabel}
-          </span>
-        </Pill>
-      </button>
+      <HeaderMachineDropdown
+        mode={mode}
+        machines={machines}
+        machineId={machineId}
+        setMachineId={setMachineId}
+        machineIds={machineIds}
+        setMachineIds={setMachineIds}
+        machineBadgeLabel={machineBadgeLabel}
+        machineBadgeIcon={machineBadgeIcon}
+        t={t}
+      />
     </div>
   );
 }
@@ -303,7 +431,6 @@ export function WorkspaceBindingPanel() {
   const lastSavedRef = useRef<WorkspaceBindingInput | null>(null);
   const lastSavedAppearanceRef = useRef<string | null>(null);
   const pendingPayloadRef = useRef<WorkspaceBindingInput | null>(null);
-  const scopeSectionRef = useRef<CollapsibleSectionRef>(null);
   const onSubmitRef = useRef<(input: WorkspaceBindingInput) => Promise<void>>(async () => undefined);
   const onSaveStatusChangeRef = useRef(setSaveStatus);
 
@@ -331,19 +458,6 @@ export function WorkspaceBindingPanel() {
     });
   }, [subscribe, open]);
 
-  useEffect(() => {
-    return subscribe('workspace-binding-changed', (changedPayload) => {
-      const state = useBindingPanelStore.getState();
-      if (!state.isOpen || !state.payload) return;
-      const changed = changedPayload.workspace_root.toLowerCase();
-      const payloadRoot = state.payload.workspaceRoot?.toLowerCase();
-      const bindingRoot = state.payload.binding?.workspace_root.toLowerCase();
-      if (changed === payloadRoot || changed === bindingRoot) {
-        close();
-      }
-    });
-  }, [subscribe, close]);
-
   useEffect(() => {
     if (!isOpen || !payload) return;
     let cancelled = false;
@@ -842,10 +956,6 @@ export function WorkspaceBindingPanel() {
     }
   }, [isEdit, formInitial, canSubmit, handlePersistIcon, showError, t]);
 
-  const handleMachineBadgeClick = useCallback(() => {
-    scopeSectionRef.current?.expand();
-  }, []);
-
   if (!isOpen || !payload) return null;
 
   const binding = payload.binding ?? null;
@@ -894,9 +1004,13 @@ export function WorkspaceBindingPanel() {
               icon={icon}
               setIcon={setIcon}
               workspaceRoot={workspaceRoot}
+              machines={machines}
+              machineId={machineId}
+              setMachineId={setMachineId}
+              machineIds={machineIds}
+              setMachineIds={setMachineIds}
               machineBadgeLabel={machineBadgeLabel}
               machineBadgeIcon={machineBadgeIcon}
-              onMachineBadgeClick={handleMachineBadgeClick}
               onIconClear={handleHeaderIconClear}
               badges={
                 <>
@@ -1032,7 +1146,6 @@ export function WorkspaceBindingPanel() {
               )}
 
               <CollapsibleSection
-                ref={scopeSectionRef}
                 icon={<Monitor className="h-5 w-5" />}
                 tone="primary"
                 title={t('panel.scope')}

apps/desktop/src/locales/en/workspaces.json

@@ -92,7 +92,8 @@
     "removeBinding": "Remove binding",
     "identityPlaceholder": "Add a label…",
     "machineGlobal": "Global",
-    "machineCount": "{{count}} machines"
+    "machineCount": "{{count}} machines",
+    "machineQuickSwitch": "Switch machine scope"
   },
   "saveStatus": {
     "saving": "Saving",

docs/planning/sidesheet-panel-identity-header.md

@@ -1,7 +1,7 @@
 # Workspace Binding Panel — Identity Header Refactor
 
 **Last Updated:** Jun 28, 2026
-**Status:** Complete (including restoration pass)
+**Status:** Complete (including restoration pass + auto-close fix)
 **Branch:** `feat/workspace-machine-binding`
 **Depends on:** None — builds on current panel in `main`
 **Unblocks:** Cleaner routing UX for multi-machine users; removes identity clutter from the Mapping form
@@ -100,7 +100,7 @@ WorkspaceBindingPanel
 
 | File | Change |
 | ---- | ------ |
-| [`workspace-binding-panel.component.tsx`](../../apps/desktop/src/features/workspaces/workspace-binding-panel.component.tsx) | Lifted state, header, Routing/Scope sections, sticky create footer, duplicate root check, machine badge resolver, routing subtitle for create-from-live |
+| [`workspace-binding-panel.component.tsx`](../../apps/desktop/src/features/workspaces/workspace-binding-panel.component.tsx) | Lifted state, header, Routing/Scope sections, sticky create footer, duplicate root check, machine badge resolver, routing subtitle for create-from-live; removed erroneous `workspace-binding-changed` auto-close listener |
 | [`workspace-binding-form.component.tsx`](../../apps/desktop/src/features/workspaces/workspace-binding-form.component.tsx) | `RoutingFields`, `ScopeFields`, icon upload in Scope, `bindingScopeConflicts`, duplicate error testid |
 | [`bindingPanelStore.ts`](../../apps/desktop/src/stores/bindingPanelStore.ts) | `spaceLocked`, `appearanceIcon` on payload |
 | [`WorkspacesPage.tsx`](../../apps/desktop/src/features/workspaces/WorkspacesPage.tsx) | Pass `appearanceIcon` when opening create-from-live from cards |
@@ -117,7 +117,8 @@ WorkspaceBindingPanel
 | 1 — Lift form state to panel | Done | `da725d6` |
 | 2 — Panel header identity + machine badge | Done | `a06c7ab` |
 | 3 — Routing + Scope sections, badge wiring | Done | `ef6763f` |
-| 4 — Restoration pass | Done | uncommitted |
+| 4 — Restoration pass | Done | `c68bc55` |
+| 5 — Auto-close on edit save fix | Done | uncommitted |
 
 ---
 
@@ -138,6 +139,22 @@ Regressions found after Phase 3 and fixed:
 
 ---
 
+## Post-ship fixes (Jun 28, 2026)
+
+### Edit panel closed on Clear / autosave
+
+**Symptom:** Clicking icon **Clear** or changing machine scope to **No machine** while editing a binding dismissed the entire panel. The save often succeeded, but the UX looked broken.
+
+**Cause:** A `workspace-binding-changed` listener in `WorkspaceBindingPanel` called `close()` whenever the event's `workspace_root` matched the open binding. Every in-panel edit save (icon persist, machine change, 1.5s autosave) emits that event — contradicting the autosave invariant ("no behavior change").
+
+**Fix:** Removed the auto-close listener. Panel now closes only via explicit paths: backdrop / X / Escape, create submit success, delete, disable-prompt link, create footer Cancel.
+
+**Tests:** `WorkspaceBindingPrompt.test.tsx` — edit mode stays open after `workspace-binding-changed` and after icon Clear persist.
+
+**Tradeoff:** If a binding is deleted or mutated externally while the edit panel is open, stale data may show until the user closes manually. Acceptable; matches pre-refactor edit behavior.
+
+---
+
 ## Related Documentation
 
 - [`projects-grouped-machine-cards.md`](./projects-grouped-machine-cards.md)