diff --git a/desktop/src/__tests__/generalSettings.test.tsx b/desktop/src/__tests__/generalSettings.test.tsx
index a4ea8c69..51d634e9 100644
--- a/desktop/src/__tests__/generalSettings.test.tsx
+++ b/desktop/src/__tests__/generalSettings.test.tsx
@@ -2392,7 +2392,7 @@ describe('Settings > Providers tab', () => {
     fireEvent.click(addButton)
 
     const dialog = screen.getByRole('dialog')
-    expect(within(dialog).getByLabelText(/Name/i)).toHaveValue('Custom')
+    expect(within(dialog).getByLabelText(/Name/i)).toHaveValue('Custom API')
     expect(within(dialog).getByRole('textbox', { name: /Base URL/i })).toBeEnabled()
 
     const baseUrlInfo = within(dialog).getByRole('button', { name: 'Base URL help' })
diff --git a/desktop/src/components/agentTeams/AgentTeamsWorkbench.test.tsx b/desktop/src/components/agentTeams/AgentTeamsWorkbench.test.tsx
index 1099f8eb..46f6c778 100644
--- a/desktop/src/components/agentTeams/AgentTeamsWorkbench.test.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsWorkbench.test.tsx
@@ -122,9 +122,19 @@ describe('AgentTeamsWorkbench', () => {
     expect(screen.getByTestId('agent-teams-canvas-task-2').getAttribute('data-state')).toBe('completed')
     expect(screen.getByTestId('agent-teams-canvas-task-3').getAttribute('data-state')).toBe('running')
 
+    // A narrow pane wraps the controls onto their own row rather than forcing
+    // a fixed-width header that scrolls sideways and squeezes button labels.
+    const headerRow = screen.getByTestId('agent-teams-live-controls').parentElement!
+    expect(headerRow.className).toContain('flex-wrap')
+    expect(headerRow.className).not.toMatch(/\bmin-w-\[\d+px\]/)
+    expect(headerRow.parentElement!.className).not.toContain('overflow-x-auto')
+
     fireEvent.click(screen.getByRole('button', { name: 'Review history' }))
     expect(screen.queryByTestId('agent-teams-live-controls')).toBeNull()
     expect(screen.getByTestId('agent-teams-replay-controls')).toBeTruthy()
+    for (const name of [/^(Play|Pause|Replay)$/, 'Back to live']) {
+      expect(screen.getByRole('button', { name }).className).toMatch(/(?=.*\bshrink-0\b)(?=.*\bwhitespace-nowrap\b)/)
+    }
 
     const timeline = screen.getByRole('slider', { name: 'Replay timeline · click to seek' }) as HTMLInputElement
     expect(timeline.value).toBe('1000')
diff --git a/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx b/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
index e3f94c94..1d04d376 100644
--- a/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
+++ b/desktop/src/components/agentTeams/AgentTeamsWorkbench.tsx
@@ -321,9 +321,12 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
       aria-label={t('agentTeams.title')}
       className="relative flex h-full min-h-0 w-full flex-col overflow-hidden bg-[var(--color-surface)] text-[var(--color-text-primary)]"
     >
-      <header className="shrink-0 overflow-x-auto border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
-        <div className="flex min-w-[1180px] items-center gap-5 px-[18px] py-2.5">
-          <div className="min-w-[260px]">
+      {/* A narrow pane wraps the controls onto a row of their own instead of
+          scrolling the header sideways; the team block and counters stay on
+          the first row. Nothing in a control wraps, only hint text truncates. */}
+      <header className="shrink-0 border-b border-[var(--color-border)] bg-[var(--color-surface-container-lowest)]">
+        <div className="flex flex-wrap items-center gap-x-5 gap-y-2.5 px-[18px] py-2.5">
+          <div className="min-w-0 max-w-full">
             <div className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
               Agent Teams · {t('agentTeams.sharedTaskList')}
             </div>
@@ -340,7 +343,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
             </div>
           </div>
 
-          <div className="flex shrink-0 items-center gap-[18px] border-x border-[var(--color-border)] px-[18px]">
+          <div className="flex shrink-0 items-center gap-[18px] border-l border-[var(--color-border)] pl-[18px]">
             <div className="min-w-[74px]">
               <div className="text-[11px] font-semibold text-[var(--color-text-tertiary)]">
                 {t('agentTeams.stats.phase')}
@@ -359,7 +362,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
           </div>
 
           {followingLive ? (
-            <div data-testid="agent-teams-live-controls" className="flex min-w-0 flex-1 items-center gap-3.5">
+            <div data-testid="agent-teams-live-controls" className="flex min-w-0 flex-[1_1_480px] items-center gap-3.5">
               <div className="flex shrink-0 items-center gap-1.5 rounded-full bg-[var(--color-info-container)] px-2.5 py-1">
                 <span className="agent-teams-live-dot h-1.5 w-1.5 rounded-full bg-[var(--color-info)]" aria-hidden="true" />
                 <span className="whitespace-nowrap text-xs font-medium text-[var(--color-on-info-container)]">
@@ -369,7 +372,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
               <span className="min-w-0 flex-1 truncate text-xs text-[var(--color-text-secondary)]">
                 {liveHint}
               </span>
-              <Button variant="secondary" size="sm" onClick={enterReplay}>
+              <Button variant="secondary" size="sm" className="shrink-0 whitespace-nowrap" onClick={enterReplay}>
                 {t('agentTeams.reviewHistory')}
               </Button>
               <div className="shrink-0 border-l border-[var(--color-border)] pl-3.5">
@@ -380,11 +383,11 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
               </div>
             </div>
           ) : (
-            <div data-testid="agent-teams-replay-controls" className="flex min-w-0 flex-1 items-center gap-3.5">
+            <div data-testid="agent-teams-replay-controls" className="flex min-w-0 flex-[1_1_560px] flex-wrap items-center gap-x-3.5 gap-y-2">
               <Button
                 variant="primary"
                 size="base"
-                className="w-[86px]"
+                className="w-[86px] shrink-0 whitespace-nowrap"
                 icon={playing ? <Pause size={13} aria-hidden="true" /> : <Play size={13} aria-hidden="true" />}
                 onClick={togglePlayback}
               >
@@ -419,10 +422,10 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
                   )
                 })}
               </div>
-              <div className="min-w-[200px] flex-1">
-                <div className="mb-1 flex justify-between text-[11px] font-semibold text-[var(--color-text-tertiary)]">
-                  <span>{t('agentTeams.replay.timeline')}</span>
-                  <span className="font-mono tabular-nums">
+              <div className="min-w-[180px] flex-1">
+                <div className="mb-1 flex justify-between gap-2 text-[11px] font-semibold text-[var(--color-text-tertiary)]">
+                  <span className="min-w-0 truncate">{t('agentTeams.replay.timeline')}</span>
+                  <span className="shrink-0 whitespace-nowrap font-mono tabular-nums">
                     {formatDuration(cursorTime - startTime)} / {formatDuration(totalElapsed)}
                   </span>
                 </div>
@@ -472,6 +475,7 @@ export function AgentTeamsWorkbench({ sessionId }: { sessionId: string }) {
                 <Button
                   variant="secondary"
                   size="sm"
+                  className="shrink-0 whitespace-nowrap"
                   icon={<Radio size={12} aria-hidden="true" />}
                   onClick={returnToLive}
                 >
diff --git a/desktop/src/components/chat/ComposerCapabilityMenu.test.tsx b/desktop/src/components/chat/ComposerCapabilityMenu.test.tsx
index 3d24730f..402cec51 100644
--- a/desktop/src/components/chat/ComposerCapabilityMenu.test.tsx
+++ b/desktop/src/components/chat/ComposerCapabilityMenu.test.tsx
@@ -183,6 +183,43 @@ describe('ComposerCapabilityMenu', () => {
     expect(onAction).toHaveBeenCalledWith({ type: 'insertMention', reference: designSkill })
   })
 
+  it('opens the side panel level with its row and keeps it inside the window', () => {
+    const rowTops: Record<string, number> = { Skills: 160, Connectors: 192 }
+    let flyoutHeight = 120
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      const label = this.getAttribute('role') === 'option' ? Object.keys(rowTops).find(key => this.querySelector(`#${this.id}-label`)?.textContent === key) : undefined
+      const top = label ? rowTops[label]! : this.className.includes('bottom-full') ? 100 : 0
+      return { top, height: label ? 32 : 0, bottom: top + (label ? 32 : 0), left: 0, right: 0, width: 0, x: 0, y: top, toJSON: () => ({}) } as DOMRect
+    })
+    vi.spyOn(HTMLElement.prototype, 'offsetHeight', 'get').mockImplementation(function (this: HTMLElement) {
+      return this.dataset.testid === 'capability-flyout' ? flyoutHeight : 0
+    })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 800 })
+    try {
+      renderMenu()
+      // Row top relative to the menu, title bar centred on the 32px row.
+      fireEvent.mouseEnter(screen.getByRole('option', { name: /Skills/ }))
+      expect(screen.getByTestId('capability-flyout').style.top).toBe('56px')
+      fireEvent.mouseEnter(screen.getByRole('option', { name: /Connectors/ }))
+      expect(screen.getByTestId('capability-flyout').style.top).toBe('88px')
+
+      // Near the window bottom it lifts just enough to stay 8px clear.
+      Object.defineProperty(window, 'innerHeight', { configurable: true, value: 300 })
+      fireEvent.mouseEnter(screen.getByRole('option', { name: /Skills/ }))
+      expect(screen.getByTestId('capability-flyout').style.top).toBe('56px')
+      fireEvent.mouseEnter(screen.getByRole('option', { name: /Connectors/ }))
+      expect(screen.getByTestId('capability-flyout').style.top).toBe('72px')
+
+      // A panel taller than the window keeps its top edge on screen.
+      flyoutHeight = 400
+      fireEvent.mouseEnter(screen.getByRole('option', { name: /Skills/ }))
+      expect(screen.getByTestId('capability-flyout').style.top).toBe('-92px')
+    } finally {
+      vi.restoreAllMocks()
+      Object.defineProperty(window, 'innerHeight', { configurable: true, value: 768 })
+    }
+  })
+
   it('walks into a category with the keyboard and steps back one panel per Escape', () => {
     const { onAction, onClose } = renderMenu()
     const input = searchInput()
diff --git a/desktop/src/components/chat/ComposerCapabilityMenu.tsx b/desktop/src/components/chat/ComposerCapabilityMenu.tsx
index 50eff49b..2ef23823 100644
--- a/desktop/src/components/chat/ComposerCapabilityMenu.tsx
+++ b/desktop/src/components/chat/ComposerCapabilityMenu.tsx
@@ -35,6 +35,10 @@ type Props = {
 const ROOT_WIDTH = 288
 const FLYOUT_WIDTH = 320
 const PANEL_GAP = 4
+/** The side panel's title bar, centred on the row that opened it. */
+const FLYOUT_HEADER_HEIGHT = 40
+/** Space the side panel keeps from the window edges. */
+const VIEWPORT_MARGIN = 8
 /** The full skill list reuses the @ menu's reference browser. */
 const BROWSE_REFERENCES_KEY = 'skills:all'
 const PANEL = 'overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] shadow-[var(--shadow-dropdown)]'
@@ -98,6 +102,8 @@ export function ComposerCapabilityMenu({ id, sections, cwd = '', referencesLoadi
   // categories in place, as the sheet does.
   const [narrow, setNarrow] = useState(false)
   const containerRef = useRef<HTMLDivElement>(null)
+  const flyoutRef = useRef<HTMLDivElement>(null)
+  const [flyoutTop, setFlyoutTop] = useState(0)
   const referenceRef = useRef<ComposerReferenceMenuHandle>(null)
   useLayoutEffect(() => {
     if (sheet) return
@@ -136,6 +142,32 @@ export function ComposerCapabilityMenu({ id, sections, cwd = '', referencesLoadi
       ? subIndex < 0 ? undefined : getCapabilitySubMenuOptionId(id, subIndex)
       : rootIndex < 0 ? undefined : getCapabilityMenuOptionId(id, rootIndex)
   const controlsId = showReferences ? referencesId : drillParent ? subListId : listId
+  const flyoutAnchorIndex = flyoutOpen ? rootItems.findIndex(item => item.key === path[0]) : -1
+
+  // Like a desktop submenu, the side panel opens level with its row and only
+  // moves off it when it would otherwise run past the window.
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    const flyout = flyoutRef.current
+    if (!container || !flyout || flyoutAnchorIndex < 0) return
+    const doc = container.ownerDocument
+    const place = () => {
+      const row = doc.getElementById(getCapabilityMenuOptionId(id, flyoutAnchorIndex))
+      if (!row) return
+      const containerTop = container.getBoundingClientRect().top
+      const rowRect = row.getBoundingClientRect()
+      const viewHeight = doc.defaultView?.innerHeight ?? Infinity
+      const level = rowRect.top - containerTop + (rowRect.height - FLYOUT_HEADER_HEIGHT) / 2
+      const lowest = viewHeight - VIEWPORT_MARGIN - flyout.offsetHeight - containerTop
+      setFlyoutTop(Math.max(VIEWPORT_MARGIN - containerTop, Math.min(level, lowest)))
+    }
+    place()
+    const View = doc.defaultView
+    if (!View?.ResizeObserver) return
+    const observer = new View.ResizeObserver(place)
+    observer.observe(flyout)
+    return () => observer.disconnect()
+  }, [id, flyoutAnchorIndex, path.length, browseReferences])
 
   const openCategory = (nextPath: string[]) => {
     setPath(nextPath)
@@ -308,12 +340,12 @@ export function ComposerCapabilityMenu({ id, sections, cwd = '', referencesLoadi
     </div>
   }
 
-  return <div ref={containerRef} className="absolute bottom-full left-0 z-[var(--z-dropdown)] mb-2 flex items-end" style={{ gap: PANEL_GAP }} onMouseDown={event => event.preventDefault()}>
-    <div className={`${PANEL} shrink-0 ${searching ? 'w-[min(480px,calc(100vw-32px))]' : ''}`} style={searching ? undefined : { width: ROOT_WIDTH }}>
+  return <div ref={containerRef} className="absolute bottom-full left-0 z-[var(--z-dropdown)] mb-2" onMouseDown={event => event.preventDefault()}>
+    <div className={`${PANEL} ${searching ? 'w-[min(480px,calc(100vw-32px))]' : ''}`} style={searching ? undefined : { width: ROOT_WIDTH }}>
       {searchRow}
       {searching ? referenceMenu : rootList}
     </div>
-    {flyoutOpen ? <div data-testid="capability-flyout" className={`${PANEL} shrink-0`} style={{ width: FLYOUT_WIDTH }}>
+    {flyoutOpen ? <div ref={flyoutRef} data-testid="capability-flyout" className={`${PANEL} absolute`} style={{ left: ROOT_WIDTH + PANEL_GAP, top: flyoutTop, width: FLYOUT_WIDTH }}>
       <div className="flex h-10 items-center gap-1.5 border-b border-[var(--color-border)] px-2">
         {path.length > 1 ? <IconButton icon={<ChevronLeft size={14} strokeWidth={1.75} />} label={t('chat.capabilities.back')} size="xs" tone="muted" onClick={goBack} /> : null}
         <span className="min-w-0 flex-1 truncate px-1 text-[13px] font-semibold text-[var(--color-text-primary)]">{drillParent!.label}</span>
diff --git a/desktop/src/components/ui/IconButton.test.tsx b/desktop/src/components/ui/IconButton.test.tsx
index 97c1e3e0..d586240e 100644
--- a/desktop/src/components/ui/IconButton.test.tsx
+++ b/desktop/src/components/ui/IconButton.test.tsx
@@ -106,6 +106,15 @@ describe('IconButton', () => {
     expect(screen.getByRole('button', { name: 'Refresh' })).not.toHaveAttribute('aria-pressed')
   })
 
+  it('marks a pressed sidebar toggle with the theme accent, not the hover fill', () => {
+    const { container } = render(<IconButton icon={<span />} label="Tasks" tone="muted" surface="sidebar" pressed />)
+    const className = container.firstElementChild!.className
+    expect(className).toContain('bg-[var(--color-brand-soft)]')
+    expect(className).toContain('text-[var(--color-brand)]')
+    expect(className).not.toContain('bg-[var(--color-sidebar-item-hover)]')
+    expect(className).not.toContain('text-[var(--color-text-tertiary)]')
+  })
+
   it('drops the tone hover while pressed so two fills cannot compete', () => {
     const { container } = render(<IconButton icon={<span />} label="Filter" pressed />)
     const className = container.firstElementChild!.className
diff --git a/desktop/src/components/ui/IconButton.tsx b/desktop/src/components/ui/IconButton.tsx
index 2de1f792..d46681fb 100644
--- a/desktop/src/components/ui/IconButton.tsx
+++ b/desktop/src/components/ui/IconButton.tsx
@@ -224,7 +224,10 @@ const SOFT_CLASSES = 'bg-[var(--color-btn-soft-bg)] hover:bg-[var(--color-btn-so
 
 const PRESSED_CLASSES: Record<IconButtonSurface, string> = {
   default: 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]',
-  sidebar: 'bg-[var(--color-sidebar-item-hover)] text-[var(--color-text-primary)]',
+  // The sidebar's hover fill is the faintest step on its ground; a toggle that
+  // is on must not look like one the pointer is merely over, so it takes the
+  // theme accent.
+  sidebar: 'bg-[var(--color-brand-soft)] text-[var(--color-brand)]',
   terminal: 'bg-[var(--color-terminal-selection)] text-[var(--color-terminal-fg)]',
   media: 'bg-[var(--color-media-selection)] text-[var(--color-media-fg)]',
 }
@@ -288,9 +291,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
         BASE_CLASSES,
         DISABLED_OPACITY[disabledStyle],
         SIZE_CLASSES[size],
-        // `solid` supplies both fill and foreground, so the tone's resting text
-        // color and hover fill are skipped rather than left to compete.
-        solid ? SOLID_CLASSES[tone] : (SURFACE_REST_TEXT[surface] ?? REST_TEXT)[tone],
+        // `solid` and `pressed` supply both fill and foreground, so the tone's
+        // resting text color is skipped rather than left to compete: two
+        // `text-[…]` values resolve by alphabetical order, not by intent.
+        solid ? SOLID_CLASSES[tone] : !pressed && (SURFACE_REST_TEXT[surface] ?? REST_TEXT)[tone],
         solid && 'hover:brightness-110',
         // A pressed or soft button carries its own fill and hover; skipping the
         // tone's hover here keeps two `hover:bg-[…]` values from competing.
diff --git a/desktop/src/i18n/locales/en.ts b/desktop/src/i18n/locales/en.ts
index b60d3481..5e42b6e8 100644
--- a/desktop/src/i18n/locales/en.ts
+++ b/desktop/src/i18n/locales/en.ts
@@ -1197,6 +1197,7 @@ Row 9, all 8 cells: continuing from straight down, turning left through lower-le
   'settings.activity.messages': 'Messages',
   'settings.activity.tools': 'Tools',
   'settings.activity.activityInsights': 'Activity insights',
+  'settings.activity.modelUsage': 'Usage by model',
   'settings.activity.activeRate': 'Active rate',
   'settings.activity.mostUsedModel': 'Most used model',
   'settings.activity.exploredSkills': 'Skills explored',
@@ -1442,6 +1443,7 @@ Row 9, all 8 cells: continuing from straight down, turning left through lower-le
   'settings.providers.regionChina': 'China mainland',
   'settings.providers.regionGlobal': 'Global',
   'settings.providers.regionCustom': 'Custom',
+  'settings.providers.customPreset': 'Custom API',
   'settings.providers.apiKey': 'API Key',
   'settings.providers.apiKeyKeep': 'API Key (leave blank to keep current)',
   'settings.providers.showApiKey': 'Show API Key',
diff --git a/desktop/src/i18n/locales/jp.ts b/desktop/src/i18n/locales/jp.ts
index 01dfff53..88c3ffc7 100644
--- a/desktop/src/i18n/locales/jp.ts
+++ b/desktop/src/i18n/locales/jp.ts
@@ -1198,6 +1198,7 @@ export const jp: Record<TranslationKey, string> = {
   'settings.activity.messages': 'メッセージ',
   'settings.activity.tools': 'ツール',
   'settings.activity.activityInsights': 'アクティビティ分析',
+  'settings.activity.modelUsage': 'モデル別の使用量',
   'settings.activity.activeRate': 'アクティブ率',
   'settings.activity.mostUsedModel': '最も使ったモデル',
   'settings.activity.exploredSkills': '使用したスキル',
@@ -1443,6 +1444,7 @@ export const jp: Record<TranslationKey, string> = {
   'settings.providers.regionChina': '中国本土',
   'settings.providers.regionGlobal': 'グローバル',
   'settings.providers.regionCustom': 'カスタム',
+  'settings.providers.customPreset': 'カスタム API',
   'settings.providers.apiKey': 'API キー',
   'settings.providers.apiKeyKeep': 'API キー（空欄のままにすると現在の値を保持）',
   'settings.providers.showApiKey': 'API キーを表示',
diff --git a/desktop/src/i18n/locales/kr.ts b/desktop/src/i18n/locales/kr.ts
index 1dcc4549..0d14cece 100644
--- a/desktop/src/i18n/locales/kr.ts
+++ b/desktop/src/i18n/locales/kr.ts
@@ -1200,6 +1200,7 @@ export const kr: Record<TranslationKey, string> = {
   'settings.activity.messages': '메시지',
   'settings.activity.tools': '도구',
   'settings.activity.activityInsights': '활동 인사이트',
+  'settings.activity.modelUsage': '모델별 사용량',
   'settings.activity.activeRate': '활성 비율',
   'settings.activity.mostUsedModel': '가장 많이 쓴 모델',
   'settings.activity.exploredSkills': '사용한 스킬',
@@ -1445,6 +1446,7 @@ export const kr: Record<TranslationKey, string> = {
   'settings.providers.regionChina': '중국 본토',
   'settings.providers.regionGlobal': '글로벌',
   'settings.providers.regionCustom': '사용자 지정',
+  'settings.providers.customPreset': '사용자 지정 API',
   'settings.providers.apiKey': 'API 키',
   'settings.providers.apiKeyKeep': 'API 키 (비워 두면 현재 값 유지)',
   'settings.providers.showApiKey': 'API 키 표시',
diff --git a/desktop/src/i18n/locales/zh-TW.ts b/desktop/src/i18n/locales/zh-TW.ts
index 1bc92abd..4f990439 100644
--- a/desktop/src/i18n/locales/zh-TW.ts
+++ b/desktop/src/i18n/locales/zh-TW.ts
@@ -1197,6 +1197,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.activity.messages': '訊息',
   'settings.activity.tools': '工具',
   'settings.activity.activityInsights': '活動洞察',
+  'settings.activity.modelUsage': '模型用量',
   'settings.activity.activeRate': '活躍率',
   'settings.activity.mostUsedModel': '最常用模型',
   'settings.activity.exploredSkills': '已使用的技能',
@@ -1442,6 +1443,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.providers.regionChina': '中國大陸',
   'settings.providers.regionGlobal': '海外',
   'settings.providers.regionCustom': '自訂',
+  'settings.providers.customPreset': '自訂模型 API',
   'settings.providers.apiKey': 'API 金鑰',
   'settings.providers.apiKeyKeep': 'API 金鑰（留空保持不變）',
   'settings.providers.showApiKey': '顯示 API 金鑰',
diff --git a/desktop/src/i18n/locales/zh.ts b/desktop/src/i18n/locales/zh.ts
index ed9ad7ad..3b1447ca 100644
--- a/desktop/src/i18n/locales/zh.ts
+++ b/desktop/src/i18n/locales/zh.ts
@@ -1196,6 +1196,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.activity.messages': '消息',
   'settings.activity.tools': '工具',
   'settings.activity.activityInsights': '活动洞察',
+  'settings.activity.modelUsage': '模型用量',
   'settings.activity.activeRate': '活跃率',
   'settings.activity.mostUsedModel': '最常用模型',
   'settings.activity.exploredSkills': '已使用的技能',
@@ -1441,6 +1442,7 @@ export const zh: Record<TranslationKey, string> = {
   'settings.providers.regionChina': '中国大陆',
   'settings.providers.regionGlobal': '海外',
   'settings.providers.regionCustom': '自定义',
+  'settings.providers.customPreset': '自定义模型 API',
   'settings.providers.apiKey': 'API 密钥',
   'settings.providers.apiKeyKeep': 'API 密钥（留空保持不变）',
   'settings.providers.showApiKey': '显示 API 密钥',
diff --git a/desktop/src/pages/ActivitySettings.test.tsx b/desktop/src/pages/ActivitySettings.test.tsx
index e3cb31d6..7df91fa3 100644
--- a/desktop/src/pages/ActivitySettings.test.tsx
+++ b/desktop/src/pages/ActivitySettings.test.tsx
@@ -412,6 +412,22 @@ describe('ActivitySettings', () => {
     ])
   })
 
+  it('orders the page usage, then activity, then the per-model breakdown', async () => {
+    render(<ActivitySettings />)
+
+    await flushActivityLoad()
+
+    const usage = screen.getByRole('list', { name: 'Token usage by day' })
+    const activity = screen.getByRole('heading', { name: 'Token Activity' })
+    const insights = screen.getByRole('heading', { name: 'Activity insights' })
+    const models = screen.getByRole('heading', { name: 'Usage by model' })
+    const follows = (a: Node, b: Node) => Boolean(a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING)
+    expect(follows(usage, activity)).toBe(true)
+    expect(follows(activity, insights)).toBe(true)
+    expect(follows(insights, models)).toBe(true)
+    expect(follows(models, screen.getByRole('table'))).toBe(true)
+  })
+
   it('supports localized heatmap mode switches and persisted display name edits', async () => {
     useSettingsStore.setState({ locale: 'zh' })
     render(<ActivitySettings />)
diff --git a/desktop/src/pages/ActivitySettings.tsx b/desktop/src/pages/ActivitySettings.tsx
index 731c8131..01aa2417 100644
--- a/desktop/src/pages/ActivitySettings.tsx
+++ b/desktop/src/pages/ActivitySettings.tsx
@@ -1001,34 +1001,6 @@ export function ActivitySettings() {
         </Card>
       )}
 
-      {!isLoading && !error && hasUsage && modelRows.length > 0 && (
-        <Card surface="lowest" padding="none" role="table" className="mt-3 overflow-hidden">
-          <div
-            role="row"
-            className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] gap-3 bg-[var(--color-surface-container)] px-4 py-2.5 text-xs font-semibold text-[var(--color-text-tertiary)]"
-          >
-            <span role="columnheader" className="min-w-0 truncate">{t('settings.agents.model')}</span>
-            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.freshTokens')}</span>
-            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.cachedTokens')}</span>
-            <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.estimatedCost')}</span>
-          </div>
-          {modelRows.map((row) => (
-            <div
-              key={row.model}
-              role="row"
-              className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] items-center gap-3 border-t border-[var(--color-border)] px-4 py-2.5 text-[13px] tabular-nums text-[var(--color-text-primary)]"
-            >
-              <span role="cell" className="min-w-0 truncate font-mono text-xs" title={row.model}>{row.model}</span>
-              <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.fresh)}</span>
-              <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.cached)}</span>
-              <span role="cell" className="min-w-0 truncate text-right">
-                {row.unpriced ? <span className="text-[var(--color-text-tertiary)]">—</span> : formatCostUSD(row.costUSD, locale)}
-              </span>
-            </div>
-          ))}
-        </Card>
-      )}
-
       <Modal
         open={isEditingProfile}
         onClose={cancelProfileEdit}
@@ -1265,6 +1237,36 @@ export function ActivitySettings() {
             </Card>
           </SettingsSection>
 
+          {modelRows.length > 0 && (
+            <SettingsSection title={t('settings.activity.modelUsage')}>
+            <Card surface="lowest" padding="none" role="table" className="overflow-hidden">
+              <div
+                role="row"
+                className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] gap-3 bg-[var(--color-surface-container)] px-4 py-2.5 text-xs font-semibold text-[var(--color-text-tertiary)]"
+              >
+                <span role="columnheader" className="min-w-0 truncate">{t('settings.agents.model')}</span>
+                <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.freshTokens')}</span>
+                <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.cachedTokens')}</span>
+                <span role="columnheader" className="min-w-0 truncate text-right">{t('settings.activity.estimatedCost')}</span>
+              </div>
+              {modelRows.map((row) => (
+                <div
+                  key={row.model}
+                  role="row"
+                  className="grid grid-cols-[minmax(0,1.6fr)_minmax(0,0.8fr)_minmax(0,0.8fr)_minmax(0,0.8fr)] items-center gap-3 border-t border-[var(--color-border)] px-4 py-2.5 text-[13px] tabular-nums text-[var(--color-text-primary)]"
+                >
+                  <span role="cell" className="min-w-0 truncate font-mono text-xs" title={row.model}>{row.model}</span>
+                  <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.fresh)}</span>
+                  <span role="cell" className="min-w-0 truncate text-right">{formatTokens(row.cached)}</span>
+                  <span role="cell" className="min-w-0 truncate text-right">
+                    {row.unpriced ? <span className="text-[var(--color-text-tertiary)]">—</span> : formatCostUSD(row.costUSD, locale)}
+                  </span>
+                </div>
+              ))}
+            </Card>
+            </SettingsSection>
+          )}
+
           {topPluginItems.length > 0 && (
             <SettingsSection title={t('settings.activity.mostUsedPluginsAndSkills')}>
               <Card surface="lowest" padding="none" className="overflow-hidden">
diff --git a/desktop/src/pages/settings/ProviderSettings.test.tsx b/desktop/src/pages/settings/ProviderSettings.test.tsx
index 3cd01ea0..57529ca1 100644
--- a/desktop/src/pages/settings/ProviderSettings.test.tsx
+++ b/desktop/src/pages/settings/ProviderSettings.test.tsx
@@ -237,7 +237,19 @@ describe('retired sponsor providers', () => {
       expect(dialog.queryByRole('button', { name: provider.name })).not.toBeInTheDocument()
     }
     expect(dialog.getByRole('button', { name: 'Atlas Cloud' })).toBeInTheDocument()
-    expect(dialog.getByRole('button', { name: 'Custom' })).toBeInTheDocument()
+    expect(dialog.getByRole('button', { name: 'Custom API' })).toBeInTheDocument()
+  })
+
+  it('labels the custom preset in the active locale and prefills that label as the name', async () => {
+    useSettingsStore.setState({ locale: 'zh' })
+    render(<ProviderSettings />)
+    await screen.findByTestId(`provider-${savedProviders[0]!.id}`)
+
+    fireEvent.click(screen.getByRole('button', { name: /添加模型/ }))
+    const dialog = within(screen.getByRole('dialog'))
+    expect(dialog.queryByRole('button', { name: 'Custom' })).not.toBeInTheDocument()
+    fireEvent.click(dialog.getByRole('button', { name: '自定义模型 API' }))
+    expect(dialog.getByLabelText(/配置名称/)).toHaveValue('自定义模型 API')
   })
 
   it.each(savedProviders)('edits and saves an existing $presetId provider without losing its connection', async (provider) => {
diff --git a/desktop/src/pages/settings/ProviderSettings.tsx b/desktop/src/pages/settings/ProviderSettings.tsx
index a327e9b7..90971504 100644
--- a/desktop/src/pages/settings/ProviderSettings.tsx
+++ b/desktop/src/pages/settings/ProviderSettings.tsx
@@ -1173,6 +1173,10 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
   const initialPreset = provider
     ? availablePresets.find((p) => p.id === provider.presetId) ?? fallbackPreset
     : selectablePresets[0] ?? fallbackPreset
+  // The custom preset's catalog name is a bare English "Custom"; show a localized
+  // label that says what it is for.
+  const presetLabel = (preset: ProviderPreset) =>
+    preset.id === 'custom' ? t('settings.providers.customPreset') : preset.name
   const initialModels = stripModel1mMarkers(provider?.models ?? initialPreset.defaultModels)
   const initialImageGeneration = provider
     ? provider.imageGeneration
@@ -1187,7 +1191,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
   )
 
   const [selectedPreset, setSelectedPreset] = useState<ProviderPreset>(initialPreset)
-  const [name, setName] = useState(provider?.name ?? initialPreset.name)
+  const [name, setName] = useState(provider?.name ?? presetLabel(initialPreset))
   const [baseUrl, setBaseUrl] = useState(provider?.baseUrl ?? initialPreset.baseUrl)
   // A preset that decides the protocol per model owns this field: the picked value
   // is only the fallback for models no rule matches, so a record carrying a stale
@@ -1349,7 +1353,7 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
     settingsJsonUserEditedRef.current = false
     setSelectedPreset(preset)
     setCompatibility(compatibilityForm())
-    setName(preset.name)
+    setName(presetLabel(preset))
     setBaseUrl(preset.baseUrl)
     setImageGeneration({
       enabled: Boolean(preset.defaultImageGeneration),
@@ -1687,14 +1691,14 @@ function ProviderFormModal({ open, onClose, mode, provider, presets, browserMode
   const renderPresetButton = (preset: ProviderPreset) => (
     <SettingsPill
       key={preset.id}
-      aria-label={preset.name}
+      aria-label={presetLabel(preset)}
       className="relative"
       tone="terracotta"
       selected={selectedPreset.id === preset.id}
       onClick={() => handlePresetChange(preset)}
     >
       {preset.id === 'aruhub' && <img src={aruhubLogo} alt="" className="size-4 rounded-[var(--radius-sm)] object-contain" />}
-      {preset.name}
+      {presetLabel(preset)}
       {preset.id === 'aruhub' && <Star size={12} className="fill-[var(--color-warning)] text-[var(--color-warning)]" aria-label={t('settings.providers.sponsor')} />}
       {preset.isNew && (
         <Badge tone="warning" size="xs" className="absolute -right-1 -top-2">
diff --git a/desktop/src/preview-agent/editBubble.test.ts b/desktop/src/preview-agent/editBubble.test.ts
index 6930558f..e144b91f 100644
--- a/desktop/src/preview-agent/editBubble.test.ts
+++ b/desktop/src/preview-agent/editBubble.test.ts
@@ -78,6 +78,29 @@ describe('createEditBubble', () => {
     bubble.destroy()
   })
 
+  it('opens at full height beside the click when the picked element fills the view', () => {
+    Object.defineProperty(window, 'innerWidth', { configurable: true, value: 1024 })
+    Object.defineProperty(window, 'innerHeight', { configurable: true, value: 720 })
+    const el = document.getElementById('t')!
+    // A picked <body>: taller than the viewport, no room above or below.
+    vi.spyOn(el, 'getBoundingClientRect').mockReturnValue({
+      x: 0, y: 0, top: 0, right: 1024, bottom: 1400, left: 0, width: 1024, height: 1400, toJSON: () => ({}),
+    })
+
+    const atClick = createEditBubble(el, { onConfirm: vi.fn(), onCancel: vi.fn(), pointer: { x: 300, y: 200 } })
+    expect(atClick.host.style.top).toBe('208px')
+    expect(atClick.host.style.left).toBe('308px')
+    // Full estimated height (380), not squeezed to the 160px minimum.
+    expect((atClick.host.shadowRoot!.querySelector('.bubble') as HTMLElement).style.maxHeight).toBe('504px')
+    atClick.destroy()
+
+    // A click near the bottom right lifts and shifts it just enough to fit.
+    const nearEdge = createEditBubble(el, { onConfirm: vi.fn(), onCancel: vi.fn(), pointer: { x: 1000, y: 700 } })
+    expect(nearEdge.host.style.top).toBe('332px')
+    expect(nearEdge.host.style.left).toBe('676px')
+    nearEdge.destroy()
+  })
+
   it('prefills the text field and live-applies edits to the element', () => {
     const el = document.getElementById('t')!
     const bubble = createEditBubble(el, { onConfirm: vi.fn(), onCancel: vi.fn() })
diff --git a/desktop/src/preview-agent/editBubble.ts b/desktop/src/preview-agent/editBubble.ts
index b9ce84f8..9f0ec155 100644
--- a/desktop/src/preview-agent/editBubble.ts
+++ b/desktop/src/preview-agent/editBubble.ts
@@ -17,7 +17,10 @@ type Deps = {
   onCancel: () => void
   mode?: 'single' | 'batch'
   copy?: EditBubbleCopy
+  /** Where the pick was clicked, in viewport coordinates. */
+  pointer?: BubblePointer
 }
+type BubblePointer = { x: number; y: number }
 
 const DEFAULT_COPY: EditBubbleCopy = {
   cancel: '取消',
@@ -224,7 +227,11 @@ function buildPatch(key: keyof EditableSnapshot, value: string): EditInput {
   return patch
 }
 
-function computeBubbleLayout(rect: DOMRect, contentHeight: number) {
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(value, max))
+}
+
+function computeBubbleLayout(rect: DOMRect, contentHeight: number, pointer?: BubblePointer) {
   const viewportWidth = Math.max(window.innerWidth || 0, BUBBLE_WIDTH + VIEWPORT_MARGIN * 2)
   const viewportHeight = Math.max(window.innerHeight || 0, BUBBLE_MIN_HEIGHT + VIEWPORT_MARGIN * 2)
   const desiredHeight = Math.min(
@@ -234,21 +241,26 @@ function computeBubbleLayout(rect: DOMRect, contentHeight: number) {
   const belowTop = rect.bottom + BUBBLE_GAP
   const spaceBelow = viewportHeight - VIEWPORT_MARGIN - belowTop
   const spaceAbove = rect.top - BUBBLE_GAP - VIEWPORT_MARGIN
+  const maxLeft = Math.max(VIEWPORT_MARGIN, viewportWidth - BUBBLE_WIDTH - VIEWPORT_MARGIN)
   let top: number
+  let left = rect.left
 
   if (spaceBelow >= desiredHeight) {
     top = belowTop
   } else if (spaceAbove >= desiredHeight) {
     top = rect.top - BUBBLE_GAP - desiredHeight
-  } else if (spaceAbove > spaceBelow) {
-    top = VIEWPORT_MARGIN
   } else {
-    top = Math.min(Math.max(belowTop, VIEWPORT_MARGIN), viewportHeight - VIEWPORT_MARGIN - BUBBLE_MIN_HEIGHT)
+    // Neither side has room: the target fills the view (a picked <body>, a
+    // full-bleed section). The bubble has to cover part of it anyway, so it
+    // opens at full height where the pick was clicked rather than squeezing
+    // into a sliver at whichever edge had a little more space.
+    const anchor = pointer ?? { x: rect.left, y: rect.top }
+    top = clamp(anchor.y + BUBBLE_GAP, VIEWPORT_MARGIN, viewportHeight - VIEWPORT_MARGIN - desiredHeight)
+    left = anchor.x + BUBBLE_GAP
   }
 
   top = Math.max(VIEWPORT_MARGIN, Math.round(top))
-  const maxLeft = Math.max(VIEWPORT_MARGIN, viewportWidth - BUBBLE_WIDTH - VIEWPORT_MARGIN)
-  const left = Math.max(VIEWPORT_MARGIN, Math.min(Math.round(rect.left), maxLeft))
+  left = clamp(Math.round(left), VIEWPORT_MARGIN, maxLeft)
   const maxHeight = Math.max(BUBBLE_MIN_HEIGHT, viewportHeight - VIEWPORT_MARGIN - top)
   return { top, left, maxHeight }
 }
@@ -523,7 +535,7 @@ export function createEditBubble(target: HTMLElement, deps: Deps): { host: HTMLE
   if (textArea) autoGrow(textArea, TEXT_AREA_MAX_HEIGHT)
 
   const measuredHeight = wrap.getBoundingClientRect().height || wrap.scrollHeight || BUBBLE_ESTIMATED_HEIGHT
-  const layout = computeBubbleLayout(rect, measuredHeight)
+  const layout = computeBubbleLayout(rect, measuredHeight, deps.pointer)
   host.style.setProperty('top', `${layout.top}px`)
   host.style.setProperty('left', `${layout.left}px`)
   host.style.setProperty('visibility', 'visible')
diff --git a/desktop/src/preview-agent/index.test.ts b/desktop/src/preview-agent/index.test.ts
index 2eeff689..10f11486 100644
--- a/desktop/src/preview-agent/index.test.ts
+++ b/desktop/src/preview-agent/index.test.ts
@@ -94,6 +94,33 @@ describe('preview agent picker flow', () => {
     if (mode === 'bubble') expect(bubbleButton('confirm').isConnected).toBe(true)
   })
 
+  it('holds the native capture until the page has painted without the bubble', async () => {
+    const frames: FrameRequestCallback[] = []
+    const raf = vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => frames.push(callback))
+    try {
+      const captureId = confirmSelection()
+      // By the time the host captures, the bubble is gone and the annotation is up…
+      expect(document.querySelector('[data-preview-selection-annotation]')).not.toBeNull()
+      expect(() => bubbleButton('confirm')).toThrow()
+
+      // …but the frame showing that only exists after the page paints again.
+      const hide = (window as unknown as { __PREVIEW_AGENT_SET_CHROME_HIDDEN__: (hidden: boolean) => Promise<void> | undefined })
+        .__PREVIEW_AGENT_SET_CHROME_HIDDEN__
+      let painted = false
+      const ready = hide(true)!.then(() => { painted = true })
+      await Promise.resolve()
+      expect(painted).toBe(false)
+      frames.shift()!(0)
+      frames.shift()!(16)
+      await ready
+      expect(painted).toBe(true)
+      expect(hide(false)).toBeUndefined()
+      finishNativeCapture(captureId)
+    } finally {
+      raf.mockRestore()
+    }
+  })
+
   it('does not let an older capture remove the newest annotation overlay', () => {
     const chrome = showZoomControls()
     const oldCapture = confirmSelection()
diff --git a/desktop/src/preview-agent/index.ts b/desktop/src/preview-agent/index.ts
index 2077d982..a7f33ca9 100644
--- a/desktop/src/preview-agent/index.ts
+++ b/desktop/src/preview-agent/index.ts
@@ -4,6 +4,7 @@ import { createPicker } from './picker'
 import { buildElementMetadata } from './metadata'
 import { createEditBubble, type EditBubbleCopy } from './editBubble'
 import { createZoomControls } from './zoomControls'
+import { afterNextPaint } from './paint'
 
 ;(() => {
   ;(window as unknown as { __PREVIEW_AGENT__?: boolean }).__PREVIEW_AGENT__ = true
@@ -24,7 +25,13 @@ import { createZoomControls } from './zoomControls'
   previewWindow.__PREVIEW_BRIDGE__ = bridge
   previewWindow.__PREVIEW_AGENT_CAPTURE__ = captureToDataUrl
   const zoomControls = createZoomControls(action => bridge.send({ type: 'browser-zoom', action }))
-  previewWindow.__PREVIEW_AGENT_SET_CHROME_HIDDEN__ = (hidden: boolean) => zoomControls.setCaptureSuppressed(hidden)
+  // The host awaits this before a native capture, so hiding resolves only once
+  // the page has painted without its chrome, the closed edit bubble and with
+  // the selection annotation in place.
+  previewWindow.__PREVIEW_AGENT_SET_CHROME_HIDDEN__ = (hidden: boolean) => {
+    zoomControls.setCaptureSuppressed(hidden)
+    return hidden ? afterNextPaint() : undefined
+  }
   bridge.on('browser-controls', message => zoomControls.update(message))
   window.addEventListener('pagehide', () => zoomControls.destroy())
   window.addEventListener('pageshow', () => zoomControls.restore())
@@ -197,6 +204,7 @@ import { createZoomControls } from './zoomControls'
       },
       mode: pickerMode,
       copy: pickerCopy,
+      pointer: { x: e.clientX, y: e.clientY },
     })
     updateChromeSuppression()
   }, true)
diff --git a/desktop/src/preview-agent/paint.test.ts b/desktop/src/preview-agent/paint.test.ts
new file mode 100644
index 00000000..30f64a2e
--- /dev/null
+++ b/desktop/src/preview-agent/paint.test.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { afterNextPaint } from './paint'
+
+afterEach(() => {
+  vi.useRealTimers()
+  vi.restoreAllMocks()
+})
+
+describe('afterNextPaint', () => {
+  it('resolves only after a second animation frame, once the first has been drawn', async () => {
+    const frames: FrameRequestCallback[] = []
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => frames.push(callback))
+    let settled = false
+    const done = afterNextPaint().then(() => { settled = true })
+
+    await Promise.resolve()
+    expect(settled).toBe(false)
+    frames.shift()!(0)
+    await Promise.resolve()
+    expect(settled).toBe(false)
+    frames.shift()!(16)
+    await done
+    expect(settled).toBe(true)
+  })
+
+  it('gives up after the timeout when the page never paints', async () => {
+    vi.useFakeTimers()
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(() => 0)
+    let settled = false
+    const done = afterNextPaint(250).then(() => { settled = true })
+
+    await vi.advanceTimersByTimeAsync(249)
+    expect(settled).toBe(false)
+    await vi.advanceTimersByTimeAsync(1)
+    await done
+    expect(settled).toBe(true)
+  })
+})
diff --git a/desktop/src/preview-agent/paint.ts b/desktop/src/preview-agent/paint.ts
new file mode 100644
index 00000000..7ba29826
--- /dev/null
+++ b/desktop/src/preview-agent/paint.ts
@@ -0,0 +1,19 @@
+/** Bounds the wait: a guest that is not on screen never runs animation frames. */
+const PAINT_TIMEOUT_MS = 250
+
+/**
+ * Resolves once the page has drawn a frame with its current DOM. The second
+ * animation frame only runs after the first has been produced, so a native
+ * `capturePage` that copies the guest's latest frame sees every change made
+ * before this call — a <webview> guest does not repaint on its own before
+ * being captured, and the copy would otherwise still show a closed edit bubble.
+ */
+export function afterNextPaint(timeoutMs = PAINT_TIMEOUT_MS): Promise<void> {
+  return new Promise(resolve => {
+    const timer = window.setTimeout(resolve, timeoutMs)
+    window.requestAnimationFrame(() => window.requestAnimationFrame(() => {
+      window.clearTimeout(timer)
+      resolve()
+    }))
+  })
+}