mixdog 0.9.147 → 0.9.149

package/src/tui/app/provider-setup-picker.mjs

@@ -19,12 +19,9 @@ import { providerDisplayRank } from './model-options.mjs';
 
 export function createProviderSetupPicker({
   store,
-  setPicker,
+  surface,
   setProviderPrompt,
-  setChannelPrompt,
-  setHookPrompt,
   setSettingsPrompt,
-  setContextPanel,
   closeUsagePanel,
   oauthSubmitRef,
   clearModelCaches,
@@ -33,25 +30,34 @@ export function createProviderSetupPicker({
     const returnTo = typeof options.returnTo === 'function' ? options.returnTo : null;
     const onContinue = typeof options.onContinue === 'function' ? options.onContinue : returnTo;
     const onCancel = typeof options.onCancel === 'function' ? options.onCancel : null;
+    // ONE claim (panel-surface.mjs) per open, shared by the nested action /
+    // progress / result panels: every paint re-validates and re-arms it, so a
+    // daemon ack (key removal, OAuth callback, usage login) landing after Esc
+    // can neither paint nor navigate.
+    const own = surface.claim();
     setProviderPrompt(null);
-    setChannelPrompt(null);
-    setHookPrompt(null);
     setSettingsPrompt(null);
     // Close full-panel overlays too: they render ahead of providerPrompt in
     // the floating-panel chain, so a lingering usage/context panel would mask
     // any text-entry prompt opened from the provider actions (e.g. the
     // OpenCode Go cookie prompt appeared to do nothing).
-    setContextPanel(null);
+    own.context(null);
     closeUsagePanel();
     // Onboarding (and any caller) can pass a preloaded provider setup so we skip
     // the "Checking Providers" placeholder frame that otherwise flashes before
     // the real list — that swap is what looked like a jump on Step 1 entry.
+    const ownsSurface = () => own.owns();
+    const paintProviders = (panel) => own.paint(panel);
+    // The flow itself handing the picker surface to a prompt (Enter on a row):
+    // still ours, so clear-and-continue instead of going stale. Esc paths use
+    // own.close() — leaving IS the handover.
+    const releaseSurface = () => own.paint(null);
     let setup = options.preloadedSetup && typeof options.preloadedSetup === 'object'
       ? options.preloadedSetup
       : null;
     options.preloadedSetup = null;
     if (!setup) {
-      setPicker({
+      paintProviders({
         title: options.title || 'Providers',
         description: options.description || 'Choose a provider to configure.',
         labelWidth: 18,
@@ -67,7 +73,7 @@ export function createProviderSetupPicker({
         }],
         onSelect: () => {},
         onCancel: () => {
-          setPicker(null);
+          own.close();
           if (onCancel) onCancel();
         },
       });
@@ -170,7 +176,11 @@ export function createProviderSetupPicker({
     };
 
     const reopenProviders = () => {
-      void openProviderSetupPicker(options);
+      // Reached from acks as well as key presses: a stale ack must not restart
+      // the whole cluster over the user's surface.
+      if (!ownsSurface()) return;
+      void Promise.resolve(openProviderSetupPicker(options))
+        .catch((e) => store.pushNotice(`providers failed: ${e?.message || e}`, 'error'));
     };
     const providerActionFooter = (provider) => provider ? [{
       glyph: providerIsActive(provider) ? '●' : '○',
@@ -178,6 +188,7 @@ export function createProviderSetupPicker({
       text: [providerKindLabel(provider), providerStatusLabel(provider), providerDetailText(provider)].filter(Boolean).join(' · '),
     }] : '';
     const setApiKeyPrompt = (providerItem) => {
+      if (!ownsSurface()) return;
       setProviderPrompt({
         kind: 'api-key',
         providerId: providerItem._providerId,
@@ -189,6 +200,9 @@ export function createProviderSetupPicker({
       });
     };
     const openApiProviderActions = (providerItem) => {
+      // Reached from acks (forget-key failure, usage-login back-out) as well as
+      // key presses: prove ownership at the sink so every caller is covered.
+      if (!ownsSurface()) return;
       rememberProviderSelection(providerItem);
       const provider = providerItem._provider || {};
       const hasAuth = providerItem._authenticated || provider.authenticated;
@@ -216,7 +230,7 @@ export function createProviderSetupPicker({
           _action: 'usage-login-browser',
         });
       }
-      setPicker({
+      paintProviders({
         title: `Provider · ${providerItem._providerName}`,
         description: 'Choose an API-key action.',
         footer: () => providerActionFooter(provider),
@@ -227,19 +241,23 @@ export function createProviderSetupPicker({
         initialIndex: 0,
         items: apiActions,
         onSelect: (_detailValue, detail) => {
-          setPicker(null);
+          releaseSurface();
           if (detail._action === 'set-key') {
             setApiKeyPrompt(providerItem);
             return;
           }
           if (detail._action === 'forget-key') {
-            try {
-              store.forgetProviderAuth(providerItem._providerId);
-              clearModelCaches('all');
-              reopenProviders();
-            } catch (e) {
-              store.pushNotice(`auth-forget failed: ${e?.message || e}`, 'error');
-            }
+            // Daemon RPC: only navigate once the removal is acknowledged, and
+            // return to these actions (not an empty panel) when it fails.
+            void Promise.resolve(store.forgetProviderAuth?.(providerItem._providerId))
+              .then(() => {
+                clearModelCaches('all');
+                reopenProviders();
+              })
+              .catch((e) => {
+                store.pushNotice(`auth-forget failed: ${e?.message || e}`, 'error');
+                openApiProviderActions(providerItem);
+              });
           }
           if (detail._action === 'usage-login-browser') {
             let backedOut = false;
@@ -259,7 +277,7 @@ export function createProviderSetupPicker({
                 _action: 'back',
               },
             ];
-            setPicker({
+            paintProviders({
               title: `Provider · ${providerItem._providerName}`,
               description: 'Opening browser. Sign in at opencode.ai/auth; the auth cookie is captured automatically.',
               footer: () => providerActionFooter(provider),
@@ -317,7 +335,7 @@ export function createProviderSetupPicker({
             _action: 'back',
           },
         ];
-        setPicker({
+        paintProviders({
           title: `Provider · ${providerItem._providerName}`,
           description: message,
           footer: () => providerActionFooter(provider),
@@ -336,7 +354,7 @@ export function createProviderSetupPicker({
       };
       const showOAuthResult = (ok, message = '') => {
         setProviderPrompt(null);
-        setPicker({
+        paintProviders({
           title: `Provider · ${providerItem._providerName}`,
           description: message || (ok ? 'Login complete.' : 'Login did not complete.'),
           footer: () => providerActionFooter(provider),
@@ -386,7 +404,10 @@ export function createProviderSetupPicker({
         void store.beginOAuthProviderLogin(providerItem._providerId)
           .then((login) => {
             if (typeof login?.completeCode === 'function') {
-              setPicker(null);
+              // Post-await handover to the OAuth code prompt: only if this flow
+              // still owns the surface (Esc during beginOAuthProviderLogin).
+              if (!ownsSurface()) return;
+              releaseSurface();
               const manualUrl = login?.manualUrl || '';
               setProviderPrompt({
                 kind: 'oauth-code',
@@ -445,6 +466,7 @@ export function createProviderSetupPicker({
         });
     };
     const openOAuthProviderActions = (providerItem) => {
+      if (!ownsSurface()) return;
       rememberProviderSelection(providerItem);
       const provider = providerItem._provider || {};
       const hasAuth = providerItem._authenticated || provider.authenticated || provider.reauthRequired === true;
@@ -463,7 +485,7 @@ export function createProviderSetupPicker({
           _action: 'forget-oauth',
         });
       }
-      setPicker({
+      paintProviders({
         title: `Provider · ${providerItem._providerName}`,
         description: 'Choose an OAuth login action.',
         footer: () => providerActionFooter(provider),
@@ -479,13 +501,15 @@ export function createProviderSetupPicker({
             return;
           }
           if (detail._action === 'forget-oauth') {
-            try {
-              store.forgetProviderAuth(providerItem._providerId);
-              clearModelCaches('all');
-              reopenProviders();
-            } catch (e) {
-              store.pushNotice(`auth-forget failed: ${e?.message || e}`, 'error');
-            }
+            void Promise.resolve(store.forgetProviderAuth?.(providerItem._providerId))
+              .then(() => {
+                clearModelCaches('all');
+                reopenProviders();
+              })
+              .catch((e) => {
+                store.pushNotice(`auth-forget failed: ${e?.message || e}`, 'error');
+                openOAuthProviderActions(providerItem);
+              });
           }
         },
         onCancel: reopenProviders,
@@ -493,6 +517,7 @@ export function createProviderSetupPicker({
     };
 
     const openLocalProviderActions = (providerItem) => {
+      if (!ownsSurface()) return;
       rememberProviderSelection(providerItem);
       const provider = providerItem._provider || {};
       const localActions = [
@@ -511,7 +536,7 @@ export function createProviderSetupPicker({
           _action: 'disable-local',
         });
       }
-      setPicker({
+      paintProviders({
         title: `Provider · ${providerItem._providerName}`,
         description: 'Choose a local endpoint action.',
         footer: () => providerActionFooter(provider),
@@ -522,7 +547,7 @@ export function createProviderSetupPicker({
         initialIndex: 0,
         items: localActions,
         onSelect: (_detailValue, detail) => {
-          setPicker(null);
+          releaseSurface();
           if (detail._action === 'set-local-url') {
             setProviderPrompt({
               kind: 'local-url',
@@ -534,20 +559,22 @@ export function createProviderSetupPicker({
             return;
           }
           if (detail._action === 'disable-local') {
-            try {
-              store.setLocalProvider(providerItem._providerId, { enabled: false, baseURL: providerItem._baseURL });
-              clearModelCaches('all');
-              reopenProviders();
-            } catch (e) {
-              store.pushNotice(`local provider update failed: ${e?.message || e}`, 'error');
-            }
+            void Promise.resolve(store.setLocalProvider?.(providerItem._providerId, { enabled: false, baseURL: providerItem._baseURL }))
+              .then(() => {
+                clearModelCaches('all');
+                reopenProviders();
+              })
+              .catch((e) => {
+                store.pushNotice(`local provider update failed: ${e?.message || e}`, 'error');
+                openLocalProviderActions(providerItem);
+              });
           }
         },
         onCancel: reopenProviders,
       });
     };
 
-    setPicker({
+    paintProviders({
       title: options.title || 'Providers',
       description: options.description || 'Choose a provider. Enter opens provider actions.',
       footer: providerFooter,
@@ -564,7 +591,11 @@ export function createProviderSetupPicker({
         if (item?._providerId) rememberProviderSelection(item);
       },
       onSelect: (_value, item) => {
-        setPicker(null);
+        // In-flow navigation (Enter on a provider row): the flow keeps the
+        // surface, so clear-and-continue — own.close() would supersede this
+        // very flow and paintProviders would then reject the action panel the
+        // user just asked for. Esc (onCancel below) does close.
+        releaseSurface();
         if (item._type === 'continue') {
           onContinue?.();
           return;
@@ -582,7 +613,7 @@ export function createProviderSetupPicker({
         }
       },
       onCancel: () => {
-        setPicker(null);
+        own.close();
         if (onCancel) onCancel();
         else if (returnTo) returnTo();
       },

package/src/tui/app/resume-picker.mjs

@@ -2,18 +2,21 @@
  * resume-picker.mjs — the /resume saved-chat session picker.
  *
  * Extracted from App.jsx behavior-preservingly as a dependency-injection
- * factory: openResumePicker drives setPicker and reads live store state, so it
- * can't be pure. The function body is the original App logic verbatim, with
- * closure identifiers (store, setPicker, and the two session formatters from
- * projects.mjs) threaded in through the factory argument.
+ * factory: openResumePicker drives the panel surface and reads live store
+ * state, so it can't be pure. The function body is the original App logic
+ * verbatim, with closure identifiers (store, surface, and the two session
+ * formatters from projects.mjs) threaded in through the factory argument.
  */
 export function createResumePicker({
   store,
-  setPicker,
+  surface,
   formatSessionUpdatedAt,
   formatSessionMessageCount,
 }) {
   const openResumePicker = async () => {
+    // Surface claim (panel-surface.mjs): the storage rescan below is slow, so
+    // Esc can easily land before this panel ever paints.
+    const own = surface.claim();
     let sessions;
     try {
       // Terminal ↔ desktop interop: the summary cache is per-process, so a
@@ -39,13 +42,13 @@ export function createResumePicker({
         description: title || preview || '(no message)',
       };
     });
-    setPicker({
+    own.paint({
       title: 'Resume',
       description: 'Restore a saved chat session.',
       items,
       labelWidth: 21,
       onSelect: (value) => {
-        setPicker(null);
+        own.close();
         const selected = sessions.find((session) => session.id === value);
         const resumedName = String(selected?.title || selected?.preview || value)
           .replace(/\s+/g, ' ')
@@ -55,7 +58,7 @@ export function createResumePicker({
           .catch((e) => store.pushNotice(`Couldn’t resume chat: ${e?.message || e}`, 'error'));
       },
       onCancel: () => {
-        setPicker(null);
+        own.close();
       },
     });
   };

package/src/tui/app/route-pickers.mjs

@@ -19,12 +19,9 @@ export const outputStyleNotice = (result) => {
 export function createRoutePickers({
   store,
   state,
-  setPicker,
+  surface,
   setProviderPrompt,
-  setChannelPrompt,
-  setHookPrompt,
   setSettingsPrompt,
-  setContextPanel,
   closeUsagePanel,
   clean,
   routeLabel,
@@ -38,7 +35,11 @@ export function createRoutePickers({
   const openWebSearchPicker = async (options = {}) => {
     const routeOverride = options.routeOverride || null;
     const returnTo = typeof options.returnTo === 'function' ? options.returnTo : null;
+    // Surface claim (panel-surface.mjs) taken on this keypress: the route read
+    // below is a daemon round-trip, so Esc can land before anything paints.
+    const own = surface.claim();
     const currentWebSearchRoute = routeOverride || (await store.getWebSearchRoute?.()) || null;
+    if (!own.owns()) return;
     void openModelPicker({
       title: 'Web Search Model',
       loadingDescription: 'Loading web-search-capable models...',
@@ -53,7 +54,8 @@ export function createRoutePickers({
       returnOnNestedCancel: options.returnOnNestedCancel === true,
       onImmediateSelect: () => {
         if (returnTo) returnTo();
-        else setPicker(null);
+        // Enter inside the nested picker: that keypress owns what it clears.
+        else surface.claim().close();
       },
       onSelectRoute: async (routeInput) => {
         const result = await store.setWebSearchRoute?.(routeInput);
@@ -69,6 +71,7 @@ export function createRoutePickers({
   };
 
   const openAgentsPicker = async (options = {}) => {
+    const own = surface.claim();
     let agents = [];
     try {
       // Await: on a daemon-backed store this is a remote call, and the old sync
@@ -92,13 +95,12 @@ export function createRoutePickers({
       description: agent.description || agent.definition?.description || '',
       _agent: agent,
     }));
+    if (!own.owns()) return;
     setProviderPrompt(null);
-    setChannelPrompt(null);
-    setHookPrompt(null);
     setSettingsPrompt(null);
-    setContextPanel(null);
+    own.context(null);
     closeUsagePanel();
-    setPicker({
+    own.paint({
       title: 'Agents',
       description: 'Workflow agents available for agent tasks.',
       help: '↑/↓ Select · Enter Set Model · Esc Back',
@@ -130,7 +132,9 @@ export function createRoutePickers({
             store.pushNotice(`${agent.label} model set to ${agentModelProfile(result)}`, 'info');
           },
         });
-        setPicker({
+        // Nested panel for an Enter on an agent row: the same claim that
+        // painted the Agents list, re-armed by that paint.
+        own.paint({
           title: agent.label,
           description: 'Pick a model for this agent, or turn it off.',
           help: '↑/↓ Select · Enter Choose · Esc Back',
@@ -156,6 +160,9 @@ export function createRoutePickers({
               openAgentModelPicker();
               return;
             }
+            // Post-ack handover back to Agents, bound to THIS keypress: a late
+            // ack must not overwrite whatever replaced this panel meanwhile.
+            const reopenAgents = own.defer(() => { void openAgentsPicker(); });
             try {
               const result = await store.setAgentRoute?.(agent.id, { disabled: true });
               if (!result) {
@@ -166,7 +173,7 @@ export function createRoutePickers({
             } catch (e) {
               store.pushNotice(`could not turn off ${agent.label}: ${e?.message || e}`, 'error');
             }
-            void openAgentsPicker();
+            reopenAgents();
           },
           onCancel: () => {
             void openAgentsPicker();
@@ -174,13 +181,14 @@ export function createRoutePickers({
         });
       },
       onCancel: () => {
-        setPicker(null);
+        own.close();
       },
     });
   };
 
   const openWorkflowPicker = async (options = {}) => {
     const returnTo = typeof options.returnTo === 'function' ? options.returnTo : null;
+    const own = surface.claim();
     let workflows = [];
     try {
       workflows = (await store.listWorkflows?.()) || [];
@@ -200,13 +208,12 @@ export function createRoutePickers({
       description: workflow.description || `${workflow.source || 'workflow'} workflow`,
       _workflow: workflow,
     }));
+    if (!own.owns()) return;
     setProviderPrompt(null);
-    setChannelPrompt(null);
-    setHookPrompt(null);
     setSettingsPrompt(null);
-    setContextPanel(null);
+    own.context(null);
     closeUsagePanel();
-    setPicker({
+    own.paint({
       title: 'Workflow',
       description: 'Select active workflow.',
       help: returnTo ? '↑/↓ Select · Enter Choose · Esc Settings' : '↑/↓ Select · Enter Choose · Esc Back',
@@ -215,7 +222,11 @@ export function createRoutePickers({
       onSelect: (_value, item) => {
         const workflow = item?._workflow;
         if (!workflow) return;
-        setPicker(null);
+        // Clear-and-continue: the flow keeps the surface it just emptied, so
+        // the post-ack hop below is bound to THIS keypress. An Esc before the
+        // switch acks cancels the hop instead of re-opening Settings.
+        own.paint(null);
+        const returnAfterSwitch = own.defer(() => { if (returnTo) returnTo(); });
         void store.setWorkflow?.(workflow.id)
           .then((result) => {
             if (!result) {
@@ -223,12 +234,12 @@ export function createRoutePickers({
               return;
             }
             store.pushNotice(workflowSwitchNotice(result), 'info');
-            if (returnTo) returnTo();
+            returnAfterSwitch();
           })
           .catch((e) => store.pushNotice(`Couldn’t switch workflow: ${e?.message || e}`, 'error'));
       },
       onCancel: () => {
-        setPicker(null);
+        own.close();
         if (returnTo) returnTo();
       },
     });
@@ -240,6 +251,7 @@ export function createRoutePickers({
     // the chosen style, then advance. `onboarding.onAdvance/onBack` drive the
     // wizard; the confirm bar is built here so both paths share `saveStyle`.
     const onboarding = options.onboarding || null;
+    const own = surface.claim();
     let status = null;
     try {
       status = (await store.listOutputStyles?.()) || null;
@@ -262,18 +274,24 @@ export function createRoutePickers({
       description: style.description || style.source || 'output style',
       _style: style,
     }));
+    if (!own.owns()) return;
     setProviderPrompt(null);
-    setChannelPrompt(null);
-    setHookPrompt(null);
     setSettingsPrompt(null);
-    setContextPanel(null);
+    own.context(null);
     closeUsagePanel();
     const saveStyle = (styleId, { advance = false } = {}) => {
       if (!styleId) return;
       // Onboarding advance: keep the current picker visible during the async
       // style switch so the screen never flashes empty between steps; the next
       // step (or finishOnboarding) replaces/clears the picker itself.
-      if (!(advance && onboarding)) setPicker(null);
+      if (!(advance && onboarding)) own.paint(null);
+      // Post-ack delegation (next onboarding step, or back to the caller):
+      // bound after this keypress's own navigation so an Esc while the switch
+      // is in flight cannot paint a panel over the new surface.
+      const advanceAfterSave = own.defer(() => {
+        if (advance && onboarding) onboarding.onAdvance?.();
+        else if (returnTo) returnTo();
+      });
       void store.setOutputStyle?.(styleId)
         .then((result) => {
           if (!result) {
@@ -281,12 +299,11 @@ export function createRoutePickers({
           } else {
             store.pushNotice(outputStyleNotice(result), 'info');
           }
-          if (advance && onboarding) onboarding.onAdvance?.();
-          else if (returnTo) returnTo();
+          advanceAfterSave();
         })
         .catch((e) => store.pushNotice(`Couldn’t switch output style: ${e?.message || e}`, 'error'));
     };
-    setPicker({
+    own.paint({
       title: 'Output Style',
       description: 'Select response style.',
       // Onboarding uses a ConfirmBar (←/→ = Back/Next); let the Picker supply
@@ -301,7 +318,7 @@ export function createRoutePickers({
         ],
         onConfirm: (button) => {
           if (button.value === 'back') {
-            setPicker(null);
+            own.close();
             onboarding.onBack?.();
             return;
           }
@@ -317,7 +334,7 @@ export function createRoutePickers({
         saveStyle(style.id, { advance: Boolean(onboarding) });
       },
       onCancel: () => {
-        setPicker(null);
+        own.close();
         if (onboarding) onboarding.onCancel?.();
         else if (returnTo) returnTo();
       },