From 51b746a7d73a2da4aab6df11662e8d6e611fc717 Mon Sep 17 00:00:00 2001
From: Hamza Merzic <hamzamerzic@gmail.com>
Date: Wed, 22 Jul 2026 16:18:15 +0000
Subject: [PATCH 1/3] Align background-agent picker with Settings

---
 __tests__/news-regressions.test.mjs |  19 +++++
 mobius.json                         |   2 +-
 package.json                        |   2 +-
 theme.js                            |  15 +++-
 ui/ModelPicker.jsx                  |  49 ++++++++++--
 ui/SettingsTab.jsx                  | 114 ++++++++++------------------
 6 files changed, 117 insertions(+), 84 deletions(-)

diff --git a/__tests__/news-regressions.test.mjs b/__tests__/news-regressions.test.mjs
index b3eefdb..953b11d 100644
--- a/__tests__/news-regressions.test.mjs
+++ b/__tests__/news-regressions.test.mjs
@@ -443,6 +443,25 @@ test('settings writes explicit Background-agent modes and preserves legacy overr
   assert.equal(manifest.storage_seeds['agent.json'].secondary_agent_mode, 'system')
 })
 
+test('background agent slots use the Settings-style picker with an inherited default row', () => {
+  const settings = readRepoFile(join('ui', 'SettingsTab.jsx'))
+  const picker = readRepoFile(join('ui', 'ModelPicker.jsx'))
+  assert.ok(settings.includes("useSettingsDefault={primaryAgentMode === 'system'}"))
+  assert.ok(settings.includes("useSettingsDefault={secondaryAgentMode === 'system'}"))
+  assert.ok(settings.includes('onChange={saveAgent}'))
+  assert.ok(settings.includes("onSettingsDefault={() => savePrimaryMode('system')}"))
+  assert.ok(settings.includes('onChange={saveFallbackAgent}'))
+  assert.ok(settings.includes('onSettingsDefault={() => toggleFallback(false)}'))
+  assert.ok(!settings.includes('aria-label="News primary agent mode"'))
+  assert.ok(!settings.includes('aria-label="News secondary agent mode"'))
+  assert.ok(picker.includes('Default from settings'))
+  assert.ok(picker.includes('onSettingsDefault'))
+  assert.ok(picker.includes('aria-label={triggerLabel}'))
+  assert.ok(picker.includes('aria-pressed={useSettingsDefault}'))
+  assert.ok(picker.includes('aria-pressed={selected}'))
+  assert.ok(picker.includes('`${title}: ${modelName}${effortLabel ? `, ${effortLabel} effort`'))
+})
+
 test('fetch.sh resolves and retries a configured fallback agent', () => {
   const sh = readRepoFile('fetch.sh')
   assert.ok(sh.includes('from app.background_agents import resolve_background_agents'))
diff --git a/mobius.json b/mobius.json
index 745267a..a029c84 100644
--- a/mobius.json
+++ b/mobius.json
@@ -1,7 +1,7 @@
 {
   "id": "news",
   "name": "News",
-  "version": "1.14.10",
+  "version": "1.14.11",
   "description": "A daily AI-curated news digest you can tune by topic, schedule, and editorial brief.",
   "offline_capable": true,
   "embeds_agent": true,
diff --git a/package.json b/package.json
index 421a96a..247d791 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mobius-os/app-news",
-  "version": "1.14.10",
+  "version": "1.14.11",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/theme.js b/theme.js
index 4a2b9bd..7ae411a 100644
--- a/theme.js
+++ b/theme.js
@@ -586,7 +586,20 @@ export const CSS = `
   background: color-mix(in srgb, var(--accent) 12%, var(--surface));
   border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
 }
-.mobius-model-trigger__caret { color: var(--muted); font-size: 11px; flex-shrink: 0; }
+.mobius-model-trigger__effort-visual {
+  position: relative; flex-shrink: 0; display: inline-flex; align-items: center;
+  justify-content: space-between; gap: 5px; min-width: 68px; padding: 7px 3px;
+}
+.mobius-model-trigger__effort-visual::before {
+  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 1px;
+  background: var(--border); transform: translateY(-50%);
+}
+.mobius-model-trigger__effort-dot {
+  position: relative; z-index: 1; width: 6px; height: 6px; border-radius: 50%;
+  border: 1px solid var(--border); background: var(--surface);
+}
+.mobius-model-trigger__effort-dot.is-filled { border-color: var(--accent); background: var(--accent); }
+.mobius-model-trigger__effort-dot.is-active { transform: scale(1.35); box-shadow: 0 0 0 2px var(--accent-dim); }
 .mobius-model-sheet__backdrop {
   position: absolute; inset: 0; z-index: 1000; display: flex;
   align-items: flex-end; justify-content: center; box-sizing: border-box;
diff --git a/ui/ModelPicker.jsx b/ui/ModelPicker.jsx
index e063605..0b8fd87 100644
--- a/ui/ModelPicker.jsx
+++ b/ui/ModelPicker.jsx
@@ -29,8 +29,12 @@ export function ModelPicker({
   title = 'Model',
   navKey = 'model-picker',
   allowProviderDefault = false,
+  useSettingsDefault = false,
+  onSettingsDefault,
   effortControl = null,
   effortLabel = '',
+  efforts = [],
+  effort = '',
 }) {
   const [open, setOpen] = useState(false)
   const sheetRef = useRef(null)
@@ -39,7 +43,13 @@ export function ModelPicker({
   const navRef = useRef(null)
   const activeGroup = groups?.find((group) => group.key === provider)
   const activeModel = activeGroup?.models?.find((item) => item.id === model)
-  const modelName = activeModel?.name || (model ? model : activeGroup ? `${activeGroup.label} default` : 'Choose model')
+  const modelName = useSettingsDefault
+    ? 'Default from settings'
+    : (activeModel?.name || (model ? model : activeGroup ? `${activeGroup.label} default` : 'Choose model'))
+  const effortIndex = Math.max(0, efforts.findIndex((item) => item.value === effort))
+  const triggerLabel = useSettingsDefault
+    ? `${title}: Default from settings`
+    : `${title}: ${modelName}${effortLabel ? `, ${effortLabel} effort` : ''}`
 
   const closeSheet = useCallback(() => {
     const handle = navRef.current
@@ -113,16 +123,31 @@ export function ModelPicker({
         className="mobius-model-trigger"
         onClick={openSheet}
         aria-haspopup="dialog"
+        aria-label={triggerLabel}
       >
         <span className="mobius-model-trigger__icon" aria-hidden="true">
-          <ProviderLogo provider={provider} />
+          {useSettingsDefault ? '—' : <ProviderLogo provider={provider} />}
         </span>
         <span className="mobius-model-trigger__main">
           <span className="mobius-model-trigger__name">{modelName}</span>
-          <span className="mobius-model-trigger__id">{model || 'Provider default'}</span>
+          {!useSettingsDefault && (
+            <span className="mobius-model-trigger__id">{model || 'Provider default'}</span>
+          )}
         </span>
-        {effortLabel && <span className="mobius-model-trigger__effort">{effortLabel}</span>}
-        <span className="mobius-model-trigger__caret" aria-hidden="true">▾</span>
+        {!useSettingsDefault && effortLabel && efforts.length > 0 && (
+          <span className="mobius-model-trigger__effort-visual" aria-hidden="true">
+            {efforts.map((item, index) => (
+              <span
+                key={item.value}
+                className={
+                  'mobius-model-trigger__effort-dot'
+                  + (index <= effortIndex ? ' is-filled' : '')
+                  + (index === effortIndex ? ' is-active' : '')
+                }
+              />
+            ))}
+          </span>
+        )}
       </button>
       {open && (
         <div
@@ -146,6 +171,18 @@ export function ModelPicker({
               </button>
             </div>
             <div className="mobius-model-sheet__body">
+              <button
+                type="button"
+                className={`mobius-model-sheet__row${useSettingsDefault ? ' is-selected' : ''}`}
+                aria-pressed={useSettingsDefault}
+                onClick={() => { onSettingsDefault?.(); closeSheet() }}
+              >
+                <span className="mobius-model-sheet__row-icon" aria-hidden="true">—</span>
+                <span className="mobius-model-sheet__row-main">
+                  <span className="mobius-model-sheet__row-title">Default from settings</span>
+                </span>
+                {useSettingsDefault && <span className="mobius-model-sheet__check" aria-hidden="true" />}
+              </button>
               {(!groups || groups.length === 0) && (
                 <div className="mobius-model-sheet__empty">No models available.</div>
               )}
@@ -165,6 +202,7 @@ export function ModelPicker({
                       <button
                         type="button"
                         className={`mobius-model-sheet__row${defaultOn ? ' is-selected' : ''}`}
+                        aria-pressed={defaultOn}
                         disabled={!connected && !defaultOn}
                         onClick={() => { onChange(group.key, ''); closeSheet() }}
                       >
@@ -184,6 +222,7 @@ export function ModelPicker({
                           <button
                             type="button"
                             className={`mobius-model-sheet__row${selected ? ' is-selected' : ''}`}
+                            aria-pressed={selected}
                             disabled={disabled}
                             onClick={() => {
                               onChange(group.key, item.id)
diff --git a/ui/SettingsTab.jsx b/ui/SettingsTab.jsx
index 89a9728..563fc7d 100644
--- a/ui/SettingsTab.jsx
+++ b/ui/SettingsTab.jsx
@@ -687,88 +687,50 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
             <div className="nw-agent-slot">
               <div className="nw-agent-slot-head">
                 <span className="nw-agent-slot-title">Background primary</span>
-                <span className="nw-agent-mode" role="radiogroup" aria-label="News primary agent mode">
-                  <button
-                    type="button"
-                    className={`nw-agent-mode-btn${primaryAgentMode === 'system' ? ' is-active' : ''}`}
-                    aria-pressed={primaryAgentMode === 'system'}
-                    onClick={() => savePrimaryMode('system')}
-                  >
-                    Background agents
-                  </button>
-                  <button
-                    type="button"
-                    className={`nw-agent-mode-btn${primaryAgentMode === 'app' ? ' is-active' : ''}`}
-                    aria-pressed={primaryAgentMode === 'app'}
-                    onClick={() => savePrimaryMode('app')}
-                  >
-                    Override
-                  </button>
-                </span>
               </div>
-              {primaryAgentMode === 'system' ? (
-                <div className="nw-agent-inherit">Using the primary Background agent from Möbius Settings</div>
-              ) : (
-                <ModelPicker
-                  provider={provider}
-                  model={model}
-                  groups={providerGroups}
-                  connectedProviders={connectedProviders}
-                  onChange={saveAgent}
-                  title="News primary model"
-                  navKey="news-primary-model"
-                  effortLabel={effortLabel(provider, effort)}
-                  effortControl={(
-                    <EffortStepper provider={provider} value={effort} onChange={saveEffort} />
-                  )}
-                />
-              )}
+              <ModelPicker
+                provider={primaryAgentMode === 'system' ? '' : provider}
+                model={primaryAgentMode === 'system' ? '' : model}
+                groups={providerGroups}
+                connectedProviders={connectedProviders}
+                onChange={saveAgent}
+                onSettingsDefault={() => savePrimaryMode('system')}
+                useSettingsDefault={primaryAgentMode === 'system'}
+                title="News primary model"
+                navKey="news-primary-model"
+                effortLabel={primaryAgentMode === 'system' ? '' : effortLabel(provider, effort)}
+                efforts={EFFORT_LEVELS[provider] || []}
+                effort={effort}
+                effortControl={primaryAgentMode === 'system' ? null : (
+                  <EffortStepper provider={provider} value={effort} onChange={saveEffort} />
+                )}
+              />
             </div>
             <div className="nw-agent-slot">
               <div className="nw-agent-slot-head">
                 <span className="nw-agent-slot-title">Background secondary</span>
-                <span className="nw-agent-mode" role="radiogroup" aria-label="News secondary agent mode">
-                  <button
-                    type="button"
-                    className={`nw-agent-mode-btn${secondaryAgentMode === 'system' ? ' is-active' : ''}`}
-                    aria-pressed={secondaryAgentMode === 'system'}
-                    onClick={() => toggleFallback(false)}
-                  >
-                    Background agents
-                  </button>
-                  <button
-                    type="button"
-                    className={`nw-agent-mode-btn${secondaryAgentMode === 'app' ? ' is-active' : ''}`}
-                    aria-pressed={secondaryAgentMode === 'app'}
-                    onClick={() => toggleFallback(true)}
-                  >
-                    Override
-                  </button>
-                </span>
               </div>
-              {secondaryAgentMode === 'system' ? (
-                <div className="nw-agent-inherit">Using the secondary Background agent from Möbius Settings</div>
-              ) : (
-                <>
-                  <ModelPicker
-                    provider={fallbackProvider}
-                    model={fallbackModel}
-                    groups={providerGroups}
-                    connectedProviders={connectedProviders}
-                    onChange={saveFallbackAgent}
-                    title="News secondary model"
-                    navKey="news-secondary-model"
-                    effortLabel={effortLabel(fallbackProvider, fallbackEffort)}
-                    effortControl={(
-                      <EffortStepper provider={fallbackProvider} value={fallbackEffort} onChange={saveFallbackEffort} />
-                    )}
-                  />
-                  {fallbackMatchesPrimary && (
-                    <p className="nw-fallback-warning" role="status">
-                      This override matches the primary exactly, so it cannot recover a failed run. Choose another provider, model, or effort.
-                    </p>
-                  )}
-                </>
+              <ModelPicker
+                provider={secondaryAgentMode === 'system' ? '' : fallbackProvider}
+                model={secondaryAgentMode === 'system' ? '' : fallbackModel}
+                groups={providerGroups}
+                connectedProviders={connectedProviders}
+                onChange={saveFallbackAgent}
+                onSettingsDefault={() => toggleFallback(false)}
+                useSettingsDefault={secondaryAgentMode === 'system'}
+                title="News secondary model"
+                navKey="news-secondary-model"
+                effortLabel={secondaryAgentMode === 'system' ? '' : effortLabel(fallbackProvider, fallbackEffort)}
+                efforts={EFFORT_LEVELS[fallbackProvider] || []}
+                effort={fallbackEffort}
+                effortControl={secondaryAgentMode === 'system' ? null : (
+                  <EffortStepper provider={fallbackProvider} value={fallbackEffort} onChange={saveFallbackEffort} />
+                )}
+              />
+              {secondaryAgentMode === 'app' && fallbackMatchesPrimary && (
+                <p className="nw-fallback-warning" role="status">
+                  This override matches the primary exactly, so it cannot recover a failed run. Choose another provider, model, or effort.
+                </p>
               )}
             </div>
           </div>

From fef458b422f608d88c288005eb82d301f867edb0 Mon Sep 17 00:00:00 2001
From: Hamza Merzic <hamzamerzic@gmail.com>
Date: Wed, 22 Jul 2026 16:34:08 +0000
Subject: [PATCH 2/3] Add sortable background-agent priorities

---
 __tests__/news-regressions.test.mjs |  10 ++
 mobius.json                         |   1 +
 theme.js                            |  60 ++++++----
 ui/BackgroundAgentList.jsx          | 179 ++++++++++++++++++++++++++++
 ui/SettingsTab.jsx                  |  80 +++++++++++--
 5 files changed, 292 insertions(+), 38 deletions(-)
 create mode 100644 ui/BackgroundAgentList.jsx

diff --git a/__tests__/news-regressions.test.mjs b/__tests__/news-regressions.test.mjs
index 953b11d..bb8c28a 100644
--- a/__tests__/news-regressions.test.mjs
+++ b/__tests__/news-regressions.test.mjs
@@ -446,6 +446,7 @@ test('settings writes explicit Background-agent modes and preserves legacy overr
 test('background agent slots use the Settings-style picker with an inherited default row', () => {
   const settings = readRepoFile(join('ui', 'SettingsTab.jsx'))
   const picker = readRepoFile(join('ui', 'ModelPicker.jsx'))
+  const priorityList = readRepoFile(join('ui', 'BackgroundAgentList.jsx'))
   assert.ok(settings.includes("useSettingsDefault={primaryAgentMode === 'system'}"))
   assert.ok(settings.includes("useSettingsDefault={secondaryAgentMode === 'system'}"))
   assert.ok(settings.includes('onChange={saveAgent}'))
@@ -460,6 +461,14 @@ test('background agent slots use the Settings-style picker with an inherited def
   assert.ok(picker.includes('aria-pressed={useSettingsDefault}'))
   assert.ok(picker.includes('aria-pressed={selected}'))
   assert.ok(picker.includes('`${title}: ${modelName}${effortLabel ? `, ${effortLabel} effort`'))
+  assert.ok(settings.includes('<BackgroundAgentList onMove={reorderAgents}>'))
+  assert.ok(settings.includes('primaryAgentMode: secondaryAgentMode'))
+  assert.ok(settings.includes('secondaryAgentMode: primaryAgentMode'))
+  assert.ok(settings.includes('setPrimaryAgentMode(previous.primaryAgentMode)'))
+  assert.ok(settings.includes('seq !== saveAgentSeqRef.current'))
+  assert.ok(priorityList.includes('mobius-agent-priority-handle'))
+  assert.ok(priorityList.includes('onPointerDown'))
+  assert.ok(priorityList.includes("event.key === 'ArrowUp'"))
 })
 
 test('fetch.sh resolves and retries a configured fallback agent', () => {
@@ -486,6 +495,7 @@ test('mechanical manifest and token fixes stay in place', () => {
   assert.equal(manifest.version, pkg.version)
   assert.equal(manifest.embeds_agent, true)
   assert.ok(manifest.source_files.includes('ui/EffortStepper.jsx'))
+  assert.ok(manifest.source_files.includes('ui/BackgroundAgentList.jsx'))
   assert.deepEqual(manifest.offline, { reads: true, writes: 'queued', execution: 'none' })
   assert.ok(!/color:\s*#fff/.test(theme))
   assert.ok(!/color:\s*var\(--bg\)/.test(theme))
diff --git a/mobius.json b/mobius.json
index a029c84..15ccce6 100644
--- a/mobius.json
+++ b/mobius.json
@@ -24,6 +24,7 @@
     "ui/ReportsTab.jsx",
     "ui/ModelPicker.jsx",
     "ui/EffortStepper.jsx",
+    "ui/BackgroundAgentList.jsx",
     "ui/SettingsTab.jsx"
   ],
   "theme_color": "#0c0f14",
diff --git a/theme.js b/theme.js
index 7ae411a..a7b6777 100644
--- a/theme.js
+++ b/theme.js
@@ -534,32 +534,40 @@ export const CSS = `
   color: var(--muted); white-space: nowrap;
 }
 .nw-effort.is-disabled .nw-effort-label { opacity: 0.55; }
-.nw-agent-stack { display: grid; gap: 12px; }
-.nw-agent-slot {
-  display: grid; gap: 8px; min-width: 0; padding: 10px;
-  border: 1px solid var(--border); border-radius: 10px;
-  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
-}
-.nw-agent-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
-.nw-agent-slot-title { color: var(--text); font-size: 12.5px; font-weight: 700; }
-.nw-agent-mode {
-  display: inline-flex; gap: 2px; padding: 2px;
-  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
-}
-.nw-agent-mode-btn {
-  min-height: 44px; padding: 0 10px; border: none; border-radius: 6px;
-  background: transparent; color: var(--muted); font: inherit;
-  font-size: 12px; font-weight: 700; cursor: pointer;
-  touch-action: manipulation; user-select: none;
-}
-.nw-agent-mode-btn.is-active { background: var(--accent-hover, var(--accent)); color: var(--accent-fg); }
-.nw-agent-inherit {
-  min-height: 42px; display: flex; align-items: center; padding: 9px 10px;
-  border: 1px dashed var(--border); border-radius: 8px;
-  background: var(--bg); color: var(--muted); font-size: 12.5px; line-height: 1.4;
-}
-@media (hover: hover) { .nw-agent-mode-btn:not(.is-active):hover { color: var(--text); } }
-
+.mobius-agent-priority-list { display:flex; flex-direction:column; gap:6px; position:relative; }
+.mobius-agent-priority-row {
+  position:relative; display:grid; grid-template-columns:44px minmax(0,1fr);
+  align-items:center; min-height:54px; padding:0; border:0; border-radius:9px;
+  background:transparent; user-select:none; -webkit-user-select:none;
+  -webkit-touch-callout:none; will-change:transform;
+  transition:transform .18s cubic-bezier(.22,1,.36,1), background .15s ease,
+    border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
+}
+.mobius-agent-priority-list.is-committing .mobius-agent-priority-row { transition:none; }
+.mobius-agent-priority-row.is-dragging { opacity:.96; }
+.mobius-agent-priority-row.is-dragging .mobius-model-trigger,
+.mobius-agent-priority-row.is-drop-target .mobius-model-trigger {
+  border-color:color-mix(in srgb,var(--accent) 62%,var(--border));
+  background:color-mix(in srgb,var(--accent) 7%,var(--surface));
+  box-shadow:0 4px 8px rgb(0 0 0 / 18%);
+}
+.mobius-agent-priority-handle {
+  align-self:stretch; min-width:44px; min-height:44px; display:grid; place-items:center;
+  border:0; border-radius:7px; padding:0; color:var(--muted); background:transparent;
+  font:inherit; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent;
+}
+.mobius-agent-priority-handle:active,
+.mobius-agent-priority-row.is-dragging .mobius-agent-priority-handle {
+  cursor:grabbing; color:var(--accent);
+  background:color-mix(in srgb,var(--accent) 10%,transparent);
+}
+.mobius-agent-priority-handle:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
+.mobius-agent-priority-handle svg { display:block; }
+.mobius-agent-priority-body { min-width:0; }
+@media (hover:hover) and (pointer:fine) {
+  .mobius-agent-priority-handle:hover { color:var(--text); background:var(--surface2); }
+}
+@media (prefers-reduced-motion:reduce) { .mobius-agent-priority-row { transition:none; } }
 /* Production Settings model trigger + responsive picker vocabulary. */
 .mobius-model-trigger {
   display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
diff --git a/ui/BackgroundAgentList.jsx b/ui/BackgroundAgentList.jsx
new file mode 100644
index 0000000..a3ea91b
--- /dev/null
+++ b/ui/BackgroundAgentList.jsx
@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+function GripVertical() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden="true">
+      <circle cx="9" cy="5" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="5" r="1" fill="currentColor" stroke="none" />
+      <circle cx="9" cy="12" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="12" r="1" fill="currentColor" stroke="none" />
+      <circle cx="9" cy="19" r="1" fill="currentColor" stroke="none" />
+      <circle cx="15" cy="19" r="1" fill="currentColor" stroke="none" />
+    </svg>
+  )
+}
+
+export function BackgroundAgentList({ children, onMove }) {
+  const items = React.Children.toArray(children)
+  const rowRefs = useRef([])
+  const dragRef = useRef(null)
+  const pointerYRef = useRef(0)
+  const commitRafRef = useRef(null)
+  const [drag, setDrag] = useState(null)
+  const [committing, setCommitting] = useState(false)
+
+  useEffect(() => { dragRef.current = drag }, [drag])
+  useEffect(() => { rowRefs.current.length = items.length }, [items.length])
+
+  const indexFromY = useCallback((clientY, slots) => {
+    if (!slots.length) return 0
+    for (let index = 0; index < slots.length - 1; index += 1) {
+      if (clientY < (slots[index].center + slots[index + 1].center) / 2) return index
+    }
+    return slots.length - 1
+  }, [])
+
+  const beginCommit = useCallback(() => {
+    if (commitRafRef.current) cancelAnimationFrame(commitRafRef.current)
+    setCommitting(true)
+    commitRafRef.current = requestAnimationFrame(() => {
+      commitRafRef.current = requestAnimationFrame(() => {
+        commitRafRef.current = null
+        setCommitting(false)
+      })
+    })
+  }, [])
+
+  const startReorder = useCallback((index, event) => {
+    const node = rowRefs.current[index]
+    if (!node) return
+    const rect = node.getBoundingClientRect()
+    const slots = rowRefs.current.map((rowNode) => {
+      const rowRect = rowNode.getBoundingClientRect()
+      return { top: rowRect.top, height: rowRect.height, center: rowRect.top + rowRect.height / 2 }
+    })
+    try { event.currentTarget.setPointerCapture?.(event.pointerId) } catch { /* best effort */ }
+    pointerYRef.current = event.clientY
+    setDrag({
+      fromIndex: index,
+      toIndex: index,
+      grabOffsetY: event.clientY - rect.top,
+      rowHeight: rect.height,
+      slots,
+    })
+  }, [])
+
+  const activeFromIndex = drag?.fromIndex ?? null
+  useEffect(() => {
+    if (activeFromIndex === null) return undefined
+    const start = dragRef.current
+    if (!start) return undefined
+    const { fromIndex, grabOffsetY, rowHeight, slots } = start
+    const originTop = slots[fromIndex]?.top ?? 0
+    const minOffset = slots[0]?.top - originTop || 0
+    const maxOffset = slots[slots.length - 1]?.top - originTop || 0
+    const followOffset = (clientY) => Math.max(
+      minOffset,
+      Math.min(maxOffset, clientY - grabOffsetY - originTop),
+    )
+
+    const onPointerMove = (event) => {
+      event.preventDefault()
+      if (!dragRef.current) return
+      pointerYRef.current = event.clientY
+      const node = rowRefs.current[fromIndex]
+      if (node) node.style.transform = `translateY(${followOffset(event.clientY)}px) scale(1.02)`
+      const center = event.clientY - grabOffsetY + rowHeight / 2
+      const toIndex = indexFromY(center, slots)
+      setDrag((current) => current && current.toIndex !== toIndex ? { ...current, toIndex } : current)
+    }
+
+    const finish = (event) => {
+      event.preventDefault()
+      const current = dragRef.current
+      if (!current) return
+      const center = event.clientY - grabOffsetY + rowHeight / 2
+      const toIndex = indexFromY(center, slots)
+      setDrag(null)
+      if (toIndex !== fromIndex) {
+        beginCommit()
+        onMove(fromIndex, toIndex)
+      }
+    }
+
+    const cancel = () => setDrag(null)
+    window.addEventListener('pointermove', onPointerMove, { passive: false })
+    window.addEventListener('pointerup', finish, { passive: false })
+    window.addEventListener('pointercancel', cancel)
+    return () => {
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', finish)
+      window.removeEventListener('pointercancel', cancel)
+    }
+  }, [activeFromIndex, beginCommit, indexFromY, onMove])
+
+  useEffect(() => () => {
+    if (commitRafRef.current) cancelAnimationFrame(commitRafRef.current)
+  }, [])
+
+  const styleForIndex = (index) => {
+    if (!drag) return undefined
+    const { fromIndex, toIndex, grabOffsetY, slots } = drag
+    if (index === fromIndex) {
+      const originTop = slots[fromIndex]?.top ?? 0
+      const minOffset = slots[0]?.top - originTop || 0
+      const maxOffset = slots[slots.length - 1]?.top - originTop || 0
+      const offset = Math.max(minOffset, Math.min(maxOffset, pointerYRef.current - grabOffsetY - originTop))
+      return { transform: `translateY(${offset}px) scale(1.02)`, zIndex: 3, transition: 'none' }
+    }
+    if (toIndex > fromIndex && index > fromIndex && index <= toIndex) {
+      return { transform: `translateY(${(slots[index - 1]?.top || 0) - (slots[index]?.top || 0)}px)` }
+    }
+    if (toIndex < fromIndex && index >= toIndex && index < fromIndex) {
+      return { transform: `translateY(${(slots[index + 1]?.top || 0) - (slots[index]?.top || 0)}px)` }
+    }
+    return undefined
+  }
+
+  const moveBy = (index, delta) => {
+    if (dragRef.current) return
+    const toIndex = index + delta
+    if (toIndex < 0 || toIndex >= items.length) return
+    beginCommit()
+    onMove(index, toIndex)
+  }
+
+  return (
+    <div className={`mobius-agent-priority-list${committing ? ' is-committing' : ''}`}>
+      {items.map((child, index) => (
+        <div
+          key={child.key || index}
+          ref={(node) => { rowRefs.current[index] = node }}
+          className={`mobius-agent-priority-row${drag?.fromIndex === index ? ' is-dragging' : ''}${drag?.toIndex === index && drag?.fromIndex !== index ? ' is-drop-target' : ''}`}
+          style={styleForIndex(index)}
+          aria-label={`Background agent priority ${index + 1}`}
+        >
+          <button
+            type="button"
+            className="mobius-agent-priority-handle"
+            aria-label={`Move background agent priority ${index + 1}`}
+            onPointerDown={(event) => {
+              if (event.button !== undefined && event.button !== 0) return
+              event.preventDefault()
+              event.stopPropagation()
+              startReorder(index, event)
+            }}
+            onClick={(event) => event.preventDefault()}
+            onKeyDown={(event) => {
+              if (event.key === 'ArrowUp') { event.preventDefault(); moveBy(index, -1) }
+              if (event.key === 'ArrowDown') { event.preventDefault(); moveBy(index, 1) }
+            }}
+          >
+            <GripVertical />
+          </button>
+          <div className="mobius-agent-priority-body">{child}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/ui/SettingsTab.jsx b/ui/SettingsTab.jsx
index 563fc7d..094fa7d 100644
--- a/ui/SettingsTab.jsx
+++ b/ui/SettingsTab.jsx
@@ -27,6 +27,7 @@ import {
 } from '../storage.js'
 import { ModelPicker } from './ModelPicker.jsx'
 import { EffortStepper } from './EffortStepper.jsx'
+import { BackgroundAgentList } from './BackgroundAgentList.jsx'
 
 function effortForProvider(provider, value) {
   const levels = EFFORT_LEVELS[provider] || []
@@ -489,6 +490,67 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
     }
   }, [appId, token, primaryAgentMode, provider, model, effort, fallbackProvider, fallbackModel, fallbackEffort, onSetupComplete])
 
+  const reorderAgents = useCallback(async (fromIndex, toIndex) => {
+    if (fromIndex === toIndex) return
+    const previous = {
+      primaryAgentMode, provider, model, effort,
+      secondaryAgentMode, fallbackProvider, fallbackModel, fallbackEffort,
+    }
+    const next = {
+      primaryAgentMode: secondaryAgentMode,
+      provider: fallbackProvider,
+      model: fallbackModel,
+      effort: fallbackEffort,
+      secondaryAgentMode: primaryAgentMode,
+      fallbackProvider: provider,
+      fallbackModel: model,
+      fallbackEffort: effort,
+    }
+    const seq = ++saveAgentSeqRef.current
+    setPrimaryAgentMode(next.primaryAgentMode)
+    setProvider(next.provider)
+    setModel(next.model)
+    setEffort(next.effort)
+    setSecondaryAgentMode(next.secondaryAgentMode)
+    setFallbackProvider(next.fallbackProvider)
+    setFallbackModel(next.fallbackModel)
+    setFallbackEffort(next.fallbackEffort)
+    const res = await putJSON(
+      `/api/storage/apps/${appId}/agent.json`, token,
+      agentPayload({
+        primaryMode: next.primaryAgentMode,
+        provider: next.provider,
+        model: next.model,
+        effort: next.effort,
+        secondaryMode: next.secondaryAgentMode,
+        fallbackProvider: next.fallbackProvider,
+        fallbackModel: next.fallbackModel,
+        fallbackEffort: next.fallbackEffort,
+      }),
+      appId,
+    )
+    if (seq !== saveAgentSeqRef.current) return
+    const outcome = toastFor(res)
+    if (outcome.durable) {
+      setAgentError('')
+      setAgentToast(outcome.msg)
+      onSetupComplete?.()
+      setTimeout(() => setAgentToast(''), 2000)
+    } else {
+      setPrimaryAgentMode(previous.primaryAgentMode)
+      setProvider(previous.provider)
+      setModel(previous.model)
+      setEffort(previous.effort)
+      setSecondaryAgentMode(previous.secondaryAgentMode)
+      setFallbackProvider(previous.fallbackProvider)
+      setFallbackModel(previous.fallbackModel)
+      setFallbackEffort(previous.fallbackEffort)
+      setAgentToast('')
+      setAgentError(outcome.msg)
+      setTimeout(() => setAgentError(''), 3000)
+    }
+  }, [appId, token, primaryAgentMode, provider, model, effort, secondaryAgentMode, fallbackProvider, fallbackModel, fallbackEffort, onSetupComplete])
+
   const toggleFallback = useCallback((enabled) => {
     if (enabled && secondaryAgentMode === 'app') return
     if (!enabled && secondaryAgentMode === 'system') return
@@ -677,17 +739,14 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
       <div className="nw-settings-section">
         <label className="nw-label">Background agents</label>
         <p className="nw-note">
-          News follows the ordered Background agents in Möbius Settings by
-          default. Override either slot only when this digest needs its own model.
+          Tried in order. Drag to change priority. Each row follows Möbius
+          Settings by default, or can use its own model for News.
         </p>
         {providerGroups === null ? (
           <div className="nw-note">Loading models…</div>
         ) : (
-          <div className="nw-agent-stack">
-            <div className="nw-agent-slot">
-              <div className="nw-agent-slot-head">
-                <span className="nw-agent-slot-title">Background primary</span>
-              </div>
+          <BackgroundAgentList onMove={reorderAgents}>
+            <div key="primary">
               <ModelPicker
                 provider={primaryAgentMode === 'system' ? '' : provider}
                 model={primaryAgentMode === 'system' ? '' : model}
@@ -706,10 +765,7 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
                 )}
               />
             </div>
-            <div className="nw-agent-slot">
-              <div className="nw-agent-slot-head">
-                <span className="nw-agent-slot-title">Background secondary</span>
-              </div>
+            <div key="secondary">
               <ModelPicker
                 provider={secondaryAgentMode === 'system' ? '' : fallbackProvider}
                 model={secondaryAgentMode === 'system' ? '' : fallbackModel}
@@ -733,7 +789,7 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
                 </p>
               )}
             </div>
-          </div>
+          </BackgroundAgentList>
         )}
         {agentToast && (
           <div className="nw-btn-row has-top">

From 517b7ced97fc38a511de701219f3ceb4baa9fad7 Mon Sep 17 00:00:00 2001
From: Hamza Merzic <hamzamerzic@gmail.com>
Date: Wed, 22 Jul 2026 17:03:40 +0000
Subject: [PATCH 3/3] Keep inherited agent order truthful

---
 __tests__/durable-write.test.mjs    |   2 +-
 __tests__/news-regressions.test.mjs |  36 ++++++++-
 mobius.json                         |   1 +
 theme.js                            |   8 +-
 ui/BackgroundAgentList.jsx          | 117 ++++++++++++++++++----------
 ui/ModelPicker.jsx                  |   6 +-
 ui/SettingsTab.jsx                  |  66 ++++++++++------
 ui/backgroundAgentOrder.js          |  26 +++++++
 8 files changed, 191 insertions(+), 71 deletions(-)
 create mode 100644 ui/backgroundAgentOrder.js

diff --git a/__tests__/durable-write.test.mjs b/__tests__/durable-write.test.mjs
index 5d32778..1cc7712 100644
--- a/__tests__/durable-write.test.mjs
+++ b/__tests__/durable-write.test.mjs
@@ -29,7 +29,7 @@ function resolveEsbuild() {
 function buildModule() {
   const out = mkdtempSync(join(tmpdir(), 'news-test-'))
   const shim = join(out, 'react-shim.js')
-  writeFileSync(shim, 'export const jsx=()=>null; export const jsxs=()=>null; export const Fragment=null; export default {}; export const useState=()=>[]; export const useEffect=()=>{}; export const useCallback=(f)=>f; export const useMemo=()=>undefined; export const useRef=()=>({current:null});')
+  writeFileSync(shim, 'export const jsx=()=>null; export const jsxs=()=>null; export const Fragment=null; export const createPortal=(node)=>node; export default {}; export const useState=()=>[]; export const useEffect=()=>{}; export const useCallback=(f)=>f; export const useId=()=>"test-id"; export const useMemo=()=>undefined; export const useRef=()=>({current:null});')
   const bundle = join(out, 'news.mjs')
   execFileSync(resolveEsbuild(), [
     join(repo, 'index.jsx'),
diff --git a/__tests__/news-regressions.test.mjs b/__tests__/news-regressions.test.mjs
index bb8c28a..7805471 100644
--- a/__tests__/news-regressions.test.mjs
+++ b/__tests__/news-regressions.test.mjs
@@ -13,6 +13,7 @@ import {
 } from '../domain.js'
 import { isErrorReport } from '../report-schema.mjs'
 import { EFFORT_LEVELS, defaultEffort } from '../constants.js'
+import { canReorderAgentSlots, reorderAgentSlots } from '../ui/backgroundAgentOrder.js'
 
 const HERE = dirname(fileURLToPath(import.meta.url))
 const repo = join(HERE, '..')
@@ -447,6 +448,7 @@ test('background agent slots use the Settings-style picker with an inherited def
   const settings = readRepoFile(join('ui', 'SettingsTab.jsx'))
   const picker = readRepoFile(join('ui', 'ModelPicker.jsx'))
   const priorityList = readRepoFile(join('ui', 'BackgroundAgentList.jsx'))
+  const theme = readRepoFile('theme.js')
   assert.ok(settings.includes("useSettingsDefault={primaryAgentMode === 'system'}"))
   assert.ok(settings.includes("useSettingsDefault={secondaryAgentMode === 'system'}"))
   assert.ok(settings.includes('onChange={saveAgent}'))
@@ -461,14 +463,40 @@ test('background agent slots use the Settings-style picker with an inherited def
   assert.ok(picker.includes('aria-pressed={useSettingsDefault}'))
   assert.ok(picker.includes('aria-pressed={selected}'))
   assert.ok(picker.includes('`${title}: ${modelName}${effortLabel ? `, ${effortLabel} effort`'))
-  assert.ok(settings.includes('<BackgroundAgentList onMove={reorderAgents}>'))
-  assert.ok(settings.includes('primaryAgentMode: secondaryAgentMode'))
-  assert.ok(settings.includes('secondaryAgentMode: primaryAgentMode'))
-  assert.ok(settings.includes('setPrimaryAgentMode(previous.primaryAgentMode)'))
+  assert.match(picker, /\{open && createPortal\([\s\S]*document\.body,\s*\)\}/)
+  assert.match(picker, /event\.target === event\.currentTarget\) closeSheet\(\)/)
+  assert.match(picker, /mobius-model-sheet__close" onClick=\{closeSheet\}/)
+  assert.match(picker, /closeRef\.current\?\.focus\?\.\(\)/)
+  assert.match(picker, /triggerRef\.current\?\.focus\?\.\(\)/)
+  assert.match(theme, /\.mobius-model-sheet__backdrop\s*\{[\s\S]*z-index:\s*1000/)
+  assert.ok(settings.includes('<BackgroundAgentList'))
+  assert.ok(settings.includes('onMove={reorderAgents}'))
+  assert.ok(settings.includes('reorderAgentSlots(slots, fromIndex, toIndex)'))
+  assert.ok(settings.includes('setPrimaryAgentMode(next.primaryAgentMode)'))
+  assert.ok(settings.includes('setSecondaryAgentMode(next.secondaryAgentMode)'))
+  assert.ok(settings.includes('setPrimaryAgentMode(previous.primary.mode)'))
+  assert.ok(settings.includes('setSecondaryAgentMode(previous.secondary.mode)'))
   assert.ok(settings.includes('seq !== saveAgentSeqRef.current'))
   assert.ok(priorityList.includes('mobius-agent-priority-handle'))
   assert.ok(priorityList.includes('onPointerDown'))
   assert.ok(priorityList.includes("event.key === 'ArrowUp'"))
+  assert.ok(priorityList.includes('itemLabels'))
+  assert.ok(priorityList.includes('aria-live="polite"'))
+  assert.ok(settings.includes('reorderDisabled={!canReorderAgents}'))
+})
+
+test('background agent reorder preserves concrete identities and rejects inherited slots', () => {
+  const primary = { mode: 'app', provider: 'claude', model: 'claude-opus', effort: 'high' }
+  const fallback = { mode: 'app', provider: 'codex', model: 'gpt-codex', effort: 'medium' }
+  const before = [primary, fallback]
+  const after = reorderAgentSlots(before, 1, 0)
+  assert.equal(canReorderAgentSlots(before), true)
+  assert.deepEqual(after, [fallback, primary])
+  assert.notEqual(after[0], fallback)
+
+  const inherited = [{ mode: 'system' }, fallback]
+  assert.equal(canReorderAgentSlots(inherited), false)
+  assert.equal(reorderAgentSlots(inherited, 0, 1), inherited)
 })
 
 test('fetch.sh resolves and retries a configured fallback agent', () => {
diff --git a/mobius.json b/mobius.json
index 15ccce6..1aff43d 100644
--- a/mobius.json
+++ b/mobius.json
@@ -25,6 +25,7 @@
     "ui/ModelPicker.jsx",
     "ui/EffortStepper.jsx",
     "ui/BackgroundAgentList.jsx",
+    "ui/backgroundAgentOrder.js",
     "ui/SettingsTab.jsx"
   ],
   "theme_color": "#0c0f14",
diff --git a/theme.js b/theme.js
index a7b6777..93851ba 100644
--- a/theme.js
+++ b/theme.js
@@ -563,9 +563,15 @@ export const CSS = `
 }
 .mobius-agent-priority-handle:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
 .mobius-agent-priority-handle svg { display:block; }
+.mobius-agent-priority-handle:disabled { cursor:not-allowed; opacity:.45; }
 .mobius-agent-priority-body { min-width:0; }
+.mobius-agent-priority-help { margin:0 0 2px; color:var(--muted); font-size:12px; line-height:1.4; }
+.mobius-agent-priority-status {
+  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
+  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
+}
 @media (hover:hover) and (pointer:fine) {
-  .mobius-agent-priority-handle:hover { color:var(--text); background:var(--surface2); }
+  .mobius-agent-priority-handle:not(:disabled):hover { color:var(--text); background:var(--surface2); }
 }
 @media (prefers-reduced-motion:reduce) { .mobius-agent-priority-row { transition:none; } }
 /* Production Settings model trigger + responsive picker vocabulary. */
diff --git a/ui/BackgroundAgentList.jsx b/ui/BackgroundAgentList.jsx
index a3ea91b..934aae6 100644
--- a/ui/BackgroundAgentList.jsx
+++ b/ui/BackgroundAgentList.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
 
 function GripVertical() {
   return (
@@ -13,14 +13,23 @@ function GripVertical() {
   )
 }
 
-export function BackgroundAgentList({ children, onMove }) {
+export function BackgroundAgentList({
+  children,
+  onMove,
+  itemLabels = [],
+  reorderDisabled = false,
+  reorderDisabledReason = '',
+}) {
   const items = React.Children.toArray(children)
   const rowRefs = useRef([])
   const dragRef = useRef(null)
   const pointerYRef = useRef(0)
   const commitRafRef = useRef(null)
+  const mountedRef = useRef(true)
+  const disabledReasonId = useId()
   const [drag, setDrag] = useState(null)
   const [committing, setCommitting] = useState(false)
+  const [announcement, setAnnouncement] = useState('')
 
   useEffect(() => { dragRef.current = drag }, [drag])
   useEffect(() => { rowRefs.current.length = items.length }, [items.length])
@@ -44,7 +53,22 @@ export function BackgroundAgentList({ children, onMove }) {
     })
   }, [])
 
+  const commitMove = useCallback((fromIndex, toIndex) => {
+    if (reorderDisabled || fromIndex === toIndex) return
+    const label = itemLabels[fromIndex] || `Background agent ${fromIndex + 1}`
+    beginCommit()
+    Promise.resolve()
+      .then(() => onMove(fromIndex, toIndex))
+      .then((applied) => {
+        if (mountedRef.current && applied !== false) {
+          setAnnouncement(`${label} moved to priority ${toIndex + 1}.`)
+        }
+      })
+      .catch(() => {})
+  }, [beginCommit, itemLabels, onMove, reorderDisabled])
+
   const startReorder = useCallback((index, event) => {
+    if (reorderDisabled) return
     const node = rowRefs.current[index]
     if (!node) return
     const rect = node.getBoundingClientRect()
@@ -61,7 +85,7 @@ export function BackgroundAgentList({ children, onMove }) {
       rowHeight: rect.height,
       slots,
     })
-  }, [])
+  }, [reorderDisabled])
 
   const activeFromIndex = drag?.fromIndex ?? null
   useEffect(() => {
@@ -96,8 +120,7 @@ export function BackgroundAgentList({ children, onMove }) {
       const toIndex = indexFromY(center, slots)
       setDrag(null)
       if (toIndex !== fromIndex) {
-        beginCommit()
-        onMove(fromIndex, toIndex)
+        commitMove(fromIndex, toIndex)
       }
     }
 
@@ -110,10 +133,14 @@ export function BackgroundAgentList({ children, onMove }) {
       window.removeEventListener('pointerup', finish)
       window.removeEventListener('pointercancel', cancel)
     }
-  }, [activeFromIndex, beginCommit, indexFromY, onMove])
+  }, [activeFromIndex, commitMove, indexFromY])
 
-  useEffect(() => () => {
-    if (commitRafRef.current) cancelAnimationFrame(commitRafRef.current)
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      if (commitRafRef.current) cancelAnimationFrame(commitRafRef.current)
+    }
   }, [])
 
   const styleForIndex = (index) => {
@@ -136,44 +163,54 @@ export function BackgroundAgentList({ children, onMove }) {
   }
 
   const moveBy = (index, delta) => {
-    if (dragRef.current) return
+    if (reorderDisabled || dragRef.current) return
     const toIndex = index + delta
     if (toIndex < 0 || toIndex >= items.length) return
-    beginCommit()
-    onMove(index, toIndex)
+    commitMove(index, toIndex)
   }
 
   return (
-    <div className={`mobius-agent-priority-list${committing ? ' is-committing' : ''}`}>
-      {items.map((child, index) => (
-        <div
-          key={child.key || index}
-          ref={(node) => { rowRefs.current[index] = node }}
-          className={`mobius-agent-priority-row${drag?.fromIndex === index ? ' is-dragging' : ''}${drag?.toIndex === index && drag?.fromIndex !== index ? ' is-drop-target' : ''}`}
-          style={styleForIndex(index)}
-          aria-label={`Background agent priority ${index + 1}`}
-        >
-          <button
-            type="button"
-            className="mobius-agent-priority-handle"
-            aria-label={`Move background agent priority ${index + 1}`}
-            onPointerDown={(event) => {
-              if (event.button !== undefined && event.button !== 0) return
-              event.preventDefault()
-              event.stopPropagation()
-              startReorder(index, event)
-            }}
-            onClick={(event) => event.preventDefault()}
-            onKeyDown={(event) => {
-              if (event.key === 'ArrowUp') { event.preventDefault(); moveBy(index, -1) }
-              if (event.key === 'ArrowDown') { event.preventDefault(); moveBy(index, 1) }
-            }}
+    <div
+      className={`mobius-agent-priority-list${committing ? ' is-committing' : ''}${reorderDisabled ? ' is-reorder-disabled' : ''}`}
+      aria-describedby={reorderDisabled && reorderDisabledReason ? disabledReasonId : undefined}
+    >
+      {reorderDisabled && reorderDisabledReason && (
+        <p id={disabledReasonId} className="mobius-agent-priority-help">{reorderDisabledReason}</p>
+      )}
+      {items.map((child, index) => {
+        const label = itemLabels[index] || `Background agent ${index + 1}`
+        return (
+          <div
+            key={child.key || index}
+            ref={(node) => { rowRefs.current[index] = node }}
+            className={`mobius-agent-priority-row${drag?.fromIndex === index ? ' is-dragging' : ''}${drag?.toIndex === index && drag?.fromIndex !== index ? ' is-drop-target' : ''}`}
+            style={styleForIndex(index)}
+            aria-label={`${label}, background agent priority ${index + 1}`}
           >
-            <GripVertical />
-          </button>
-          <div className="mobius-agent-priority-body">{child}</div>
-        </div>
-      ))}
+            <button
+              type="button"
+              className="mobius-agent-priority-handle"
+              aria-label={`Move ${label}; currently priority ${index + 1}`}
+              disabled={reorderDisabled}
+              onPointerDown={(event) => {
+                if (event.button !== undefined && event.button !== 0) return
+                event.preventDefault()
+                event.stopPropagation()
+                startReorder(index, event)
+              }}
+              onClick={(event) => event.preventDefault()}
+              onKeyDown={(event) => {
+                if (event.key === 'ArrowUp') { event.preventDefault(); moveBy(index, -1) }
+                if (event.key === 'ArrowDown') { event.preventDefault(); moveBy(index, 1) }
+              }}
+            >
+              <GripVertical />
+            </button>
+            <div className="mobius-agent-priority-body">{child}</div>
+          </div>
+        )
+      })}
+      <span className="mobius-agent-priority-status" role="status" aria-live="polite">{announcement}</span>
     </div>
   )
 }
diff --git a/ui/ModelPicker.jsx b/ui/ModelPicker.jsx
index 0b8fd87..5a17bf8 100644
--- a/ui/ModelPicker.jsx
+++ b/ui/ModelPicker.jsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 function ClaudeLogo() {
   return (
@@ -149,7 +150,7 @@ export function ModelPicker({
           </span>
         )}
       </button>
-      {open && (
+      {open && createPortal(
         <div
           className="mobius-model-sheet__backdrop"
           role="presentation"
@@ -247,7 +248,8 @@ export function ModelPicker({
               })}
             </div>
           </div>
-        </div>
+        </div>,
+        document.body,
       )}
     </>
   )
diff --git a/ui/SettingsTab.jsx b/ui/SettingsTab.jsx
index 094fa7d..6b7020c 100644
--- a/ui/SettingsTab.jsx
+++ b/ui/SettingsTab.jsx
@@ -28,6 +28,7 @@ import {
 import { ModelPicker } from './ModelPicker.jsx'
 import { EffortStepper } from './EffortStepper.jsx'
 import { BackgroundAgentList } from './BackgroundAgentList.jsx'
+import { agentSlotLabel, canReorderAgentSlots, reorderAgentSlots } from './backgroundAgentOrder.js'
 
 function effortForProvider(provider, value) {
   const levels = EFFORT_LEVELS[provider] || []
@@ -491,20 +492,23 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
   }, [appId, token, primaryAgentMode, provider, model, effort, fallbackProvider, fallbackModel, fallbackEffort, onSetupComplete])
 
   const reorderAgents = useCallback(async (fromIndex, toIndex) => {
-    if (fromIndex === toIndex) return
-    const previous = {
-      primaryAgentMode, provider, model, effort,
-      secondaryAgentMode, fallbackProvider, fallbackModel, fallbackEffort,
-    }
+    const slots = [
+      { mode: primaryAgentMode, provider, model, effort },
+      { mode: secondaryAgentMode, provider: fallbackProvider, model: fallbackModel, effort: fallbackEffort },
+    ]
+    const ordered = reorderAgentSlots(slots, fromIndex, toIndex)
+    if (ordered === slots) return false
+    const [nextPrimary, nextSecondary] = ordered
+    const previous = { primary: slots[0], secondary: slots[1] }
     const next = {
-      primaryAgentMode: secondaryAgentMode,
-      provider: fallbackProvider,
-      model: fallbackModel,
-      effort: fallbackEffort,
-      secondaryAgentMode: primaryAgentMode,
-      fallbackProvider: provider,
-      fallbackModel: model,
-      fallbackEffort: effort,
+      primaryAgentMode: nextPrimary.mode,
+      provider: nextPrimary.provider,
+      model: nextPrimary.model,
+      effort: nextPrimary.effort,
+      secondaryAgentMode: nextSecondary.mode,
+      fallbackProvider: nextSecondary.provider,
+      fallbackModel: nextSecondary.model,
+      fallbackEffort: nextSecondary.effort,
     }
     const seq = ++saveAgentSeqRef.current
     setPrimaryAgentMode(next.primaryAgentMode)
@@ -529,25 +533,27 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
       }),
       appId,
     )
-    if (seq !== saveAgentSeqRef.current) return
+    if (seq !== saveAgentSeqRef.current) return false
     const outcome = toastFor(res)
     if (outcome.durable) {
       setAgentError('')
       setAgentToast(outcome.msg)
       onSetupComplete?.()
       setTimeout(() => setAgentToast(''), 2000)
+      return true
     } else {
-      setPrimaryAgentMode(previous.primaryAgentMode)
-      setProvider(previous.provider)
-      setModel(previous.model)
-      setEffort(previous.effort)
-      setSecondaryAgentMode(previous.secondaryAgentMode)
-      setFallbackProvider(previous.fallbackProvider)
-      setFallbackModel(previous.fallbackModel)
-      setFallbackEffort(previous.fallbackEffort)
+      setPrimaryAgentMode(previous.primary.mode)
+      setProvider(previous.primary.provider)
+      setModel(previous.primary.model)
+      setEffort(previous.primary.effort)
+      setSecondaryAgentMode(previous.secondary.mode)
+      setFallbackProvider(previous.secondary.provider)
+      setFallbackModel(previous.secondary.model)
+      setFallbackEffort(previous.secondary.effort)
       setAgentToast('')
       setAgentError(outcome.msg)
       setTimeout(() => setAgentError(''), 3000)
+      return false
     }
   }, [appId, token, primaryAgentMode, provider, model, effort, secondaryAgentMode, fallbackProvider, fallbackModel, fallbackEffort, onSetupComplete])
 
@@ -675,6 +681,15 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
     && fallbackProvider === provider
     && (fallbackModel || '') === (model || '')
     && effortForProvider(fallbackProvider, fallbackEffort) === effortForProvider(provider, effort)
+  const agentSlots = [
+    { mode: primaryAgentMode, provider, model, effort },
+    { mode: secondaryAgentMode, provider: fallbackProvider, model: fallbackModel, effort: fallbackEffort },
+  ]
+  const canReorderAgents = canReorderAgentSlots(agentSlots)
+  const agentLabels = [
+    agentSlotLabel(agentSlots[0], providerGroups, 'Settings default primary agent'),
+    agentSlotLabel(agentSlots[1], providerGroups, 'Settings default secondary agent'),
+  ]
 
   const effortLabel = (selectedProvider, value) => (
     (EFFORT_LEVELS[selectedProvider] || []).find((level) => level.value === value)?.label || value
@@ -745,7 +760,12 @@ export function SettingsTab({ appId, token, online, onSetupComplete }) {
         {providerGroups === null ? (
           <div className="nw-note">Loading models…</div>
         ) : (
-          <BackgroundAgentList onMove={reorderAgents}>
+          <BackgroundAgentList
+            onMove={reorderAgents}
+            itemLabels={agentLabels}
+            reorderDisabled={!canReorderAgents}
+            reorderDisabledReason="Choose an app override for both rows before changing priority; inherited Settings agents are already ordered in Möbius Settings."
+          >
             <div key="primary">
               <ModelPicker
                 provider={primaryAgentMode === 'system' ? '' : provider}
diff --git a/ui/backgroundAgentOrder.js b/ui/backgroundAgentOrder.js
new file mode 100644
index 0000000..8eb9530
--- /dev/null
+++ b/ui/backgroundAgentOrder.js
@@ -0,0 +1,26 @@
+function explicitAgent(slot) {
+  return slot?.mode === 'app' && typeof slot.provider === 'string' && slot.provider.trim().length > 0
+}
+
+export function canReorderAgentSlots(slots) {
+  return Array.isArray(slots) && slots.length > 1 && slots.every(explicitAgent)
+}
+
+/** Reorder only concrete app overrides; inherited Settings slots are positional. */
+export function reorderAgentSlots(slots, fromIndex, toIndex) {
+  if (!canReorderAgentSlots(slots)) return slots
+  if (!Number.isInteger(fromIndex) || !Number.isInteger(toIndex)) return slots
+  if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0 || fromIndex >= slots.length || toIndex >= slots.length) return slots
+  const next = slots.map((slot) => ({ ...slot }))
+  const [moved] = next.splice(fromIndex, 1)
+  next.splice(toIndex, 0, moved)
+  return next
+}
+
+export function agentSlotLabel(slot, groups, inheritedLabel) {
+  if (!explicitAgent(slot)) return inheritedLabel
+  const group = groups?.find((item) => item.key === slot.provider)
+  const model = group?.models?.find((item) => item.id === slot.model)
+  const identity = model?.name || slot.model || group?.label || slot.provider
+  return slot.effort ? `${identity}, ${slot.effort} effort` : identity
+}