@pheem49/mint 1.15.0 → 1.16.0

package/src/renderer/shared/components/Settings/ThemeTab.tsx

@@ -1,3 +1,4 @@
+import SelectField from '../SelectField'
 import React, { useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { THEME_PRESETS, ACCENT_FLAVORS, ThemePreset, AccentFlavor } from '../../theme/themes'
@@ -305,6 +306,19 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
             )}
           </div>
 
+          <div className="toggle-row reduced-effects-row">
+            <div>
+              <label id="reduced-effects-label" htmlFor="reduced-effects">Reduce effects</label>
+              <p className="hint">Keep the background and orb still. Also follows your system’s reduced motion preference.</p>
+            </div>
+            <label className="settings-toggle-switch">
+              <input id="reduced-effects" type="checkbox" role="switch" aria-labelledby="reduced-effects-label"
+                checked={config.reducedEffects === true}
+                onChange={event => updateField('reducedEffects', event.target.checked)} />
+              <span className="settings-toggle-slider" aria-hidden="true" />
+            </label>
+          </div>
+
           {/* Surface style: Opaque vs Glassmorphism */}
           <div className="setting-row stacked">
             <label>Surface style</label>
@@ -429,18 +443,12 @@ export default function ThemeTab({ config, updateField, updateFields }: ThemeTab
         <div className="form-grid">
           <div className="setting-row">
             <label>Font family</label>
-            <select value={config.fontFamily} onChange={(e) => updateField('fontFamily', e.target.value)}>
-              <option value="'Prompt', sans-serif">Prompt (Thai & Latin - Default)</option>
-              <option value="'Outfit', sans-serif">Outfit (Geometric Modern)</option>
-              <option value="'Inter', sans-serif">Inter (Clean Sans-Serif)</option>
-              <option value="'Prompt', sans-serif">Prompt (Modern Thai)</option>
-              <option value="'Noto Sans Thai', sans-serif">Noto Sans Thai (clean Thai)</option>
-              <option value="'Sarabun', sans-serif">Sarabun (Formal Thai)</option>
-              <option value="'Kanit', sans-serif">Kanit (Trendy Thai)</option>
-              <option value="'Mitr', sans-serif">Mitr (Friendly Thai)</option>
-              <option value="'Mali', cursive">Mali (Cute Thai Font)</option>
+            <SelectField aria-label="Font family" value={config.fontFamily} onValueChange={(nextValue) => updateField('fontFamily', nextValue)}>
+              <option value="'IBM Plex Sans Thai', 'Noto Sans Thai', 'Inter', ui-sans-serif, system-ui, sans-serif">IBM Plex Sans Thai (Default)</option>
+              <option value="'Inter', 'Noto Sans Thai', ui-sans-serif, system-ui, sans-serif">Inter + Noto Sans Thai</option>
+              <option value="'Noto Sans Thai', 'Inter', ui-sans-serif, system-ui, sans-serif">Noto Sans Thai</option>
               <option value="'Fira Code', monospace">Fira Code (developer code font)</option>
-            </select>
+            </SelectField>
           </div>
           <div className="setting-row">
             <label>Font size</label>

package/src/renderer/shared/components/SlashChoicePanel.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useState, type RefObject } from 'react'
+import type { SlashChoice } from '../platform'
+import '../css/slash-choice.css'
+
+interface Props {
+  choice: { command: string; title: string; options: SlashChoice[] }
+  inputRef: RefObject<HTMLTextAreaElement | null>
+  onSelect?: (value: string) => void
+  onDismiss?: () => void
+}
+
+export default function SlashChoicePanel({ choice, inputRef, onSelect, onDismiss }: Props) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const panelRef = useRef<HTMLElement>(null)
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([])
+  const selected = Math.min(selectedIndex, Math.max(0, choice.options.length - 1))
+
+  useEffect(() => {
+    setSelectedIndex(0)
+    inputRef.current?.focus()
+  }, [choice, inputRef])
+
+  useEffect(() => {
+    optionRefs.current[selected]?.scrollIntoView({ block: 'nearest' })
+  }, [selected, choice])
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.isComposing || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return
+      const target = event.target as Node | null
+      const onInput = target === inputRef.current
+      const inPanel = target !== null && panelRef.current?.contains(target)
+      if (event.key !== 'Escape' && !onInput && !inPanel) return
+      // Keep native Enter activation for the dismiss button.
+      if (event.key === 'Enter' && !onInput && !optionRefs.current.includes(target as HTMLButtonElement)) return
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        event.stopPropagation()
+        onDismiss?.()
+        inputRef.current?.focus()
+        return
+      }
+      if (!choice.options.length) return
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        event.preventDefault()
+        event.stopPropagation()
+        const next = (selected + (event.key === 'ArrowDown' ? 1 : -1) + choice.options.length) % choice.options.length
+        setSelectedIndex(next)
+        if (inPanel) optionRefs.current[next]?.focus()
+      } else if (event.key === 'Enter') {
+        event.preventDefault()
+        event.stopPropagation()
+        onSelect?.(choice.options[selected].value)
+        inputRef.current?.focus()
+      }
+    }
+    // Capture before the composer's history/submit handlers claim these keys.
+    window.addEventListener('keydown', onKeyDown, true)
+    return () => window.removeEventListener('keydown', onKeyDown, true)
+  }, [choice, inputRef, onDismiss, onSelect, selected])
+
+  return (
+    <section ref={panelRef} className="slash-choice-panel" aria-label={`${choice.command} choices`}>
+      <header className="slash-choice-heading">
+        <div><span className="slash-choice-command">{choice.command}</span><p>{choice.title}</p></div>
+        <button type="button" onClick={onDismiss} aria-label="Dismiss choices">×</button>
+      </header>
+      <div className="slash-choice-options" role="group" aria-label="Options">
+        {choice.options.map((option, index) => (
+          <button
+            key={option.value}
+            ref={(element) => { optionRefs.current[index] = element }}
+            type="button"
+            aria-pressed={index === selected}
+            className={index === selected ? 'active' : undefined}
+            onPointerMove={() => setSelectedIndex(index)}
+            onFocus={() => setSelectedIndex(index)}
+            onClick={() => { onSelect?.(option.value); inputRef.current?.focus() }}
+          >
+            <span>{index + 1}.</span>{option.label}
+          </button>
+        ))}
+      </div>
+      <span className="slash-choice-status" role="status">{choice.options[selected]?.label}</span>
+      <div className="slash-choice-hint">↑↓ select · Enter choose · Esc dismiss</div>
+    </section>
+  )
+}

package/src/renderer/shared/components/SlashSuggestions.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import SlashSuggestions from './SlashSuggestions'
+
+const render = (message: string, suppressed = false) => renderToStaticMarkup(
+  <SlashSuggestions message={message} onComplete={() => {}} anchorRef={{ current: null }} suppressed={suppressed} />,
+)
+
+describe('composer command suggestions', () => {
+  it('finds a command by its description while retaining its executable token', () => {
+    const html = render('/statistics')
+    expect(html).toContain('/stats')
+    expect(html).toContain('role="option"')
+    expect(html).not.toContain('/clear')
+  })
+  it('shows token-prefix matches before description-only matches', () => {
+    const html = render('/st')
+    expect(html.indexOf('>/stats<')).toBeLessThan(html.indexOf('>/mods<'))
+  })
+  it('keeps a command argument as a usage hint instead of unrelated search results', () => {
+    const html = render('/remember a durable fact')
+    expect(html).toContain('/remember')
+    expect(html).not.toContain('role="option"')
+  })
+  it('keeps CLI-only actions out of the graphical menu and hides it during history browsing', () => {
+    const html = render('/')
+    expect(html).toContain('/models')
+    expect(html).not.toContain('/exit')
+    expect(html).not.toContain('/theme')
+    expect(render('/', true)).toBe('')
+  })
+})

package/src/renderer/shared/components/SlashSuggestions.tsx

@@ -8,6 +8,8 @@ import {
   type KeyboardEvent,
   type RefObject,
 } from 'react'
+import { Terminal, Brain, Folder, Wrench, BookOpen, AtSign } from 'lucide-react'
+import '../css/slash-suggestions.css'
 import { SLASH_COMMANDS, type SlashCommand } from '../constants/slashCommands'
 import { catalogPlatform } from '../platform'
 import type { LearnedSkill } from '../types'
@@ -96,8 +98,19 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
   const slashMatches = useMemo(() => {
     if (mode !== 'slash') return [] as SlashCommand[]
     const q = raw.toLowerCase()
-    const hits = SLASH_COMMANDS.filter((c) => c.command.toLowerCase().startsWith(q))
-    return CATEGORY_ORDER.flatMap((cat) => hits.filter((h) => (h.category ?? 'tools') === cat))
+    const typingArguments = SLASH_COMMANDS.some((c) => q.startsWith(c.command.toLowerCase() + ' '))
+    const words = q.slice(1).trim().split(/\s+/).filter(Boolean)
+    const hits = SLASH_COMMANDS.filter((c) =>
+      c.command.toLowerCase().startsWith(q) ||
+      (!typingArguments && !/\s/.test(q) && words.every((word) => `${c.command} ${c.description}`.toLowerCase().includes(word))),
+    )
+    const byCategory = (commands: SlashCommand[]) => CATEGORY_ORDER.flatMap((cat) =>
+      commands.filter((command) => (command.category ?? 'tools') === cat),
+    )
+    return [
+      ...byCategory(hits.filter((command) => command.command.toLowerCase().startsWith(q))),
+      ...byCategory(hits.filter((command) => !command.command.toLowerCase().startsWith(q))),
+    ]
   }, [mode, raw])
 
   // The command whose arguments are being typed (raw is past its token) — used
@@ -207,6 +220,16 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
         return true
       }
       if ((event.key === 'Enter' || event.key === 'Tab') && !event.shiftKey && !event.nativeEvent.isComposing) {
+        // A complete slash command is an invocation, not an autocomplete
+        // candidate. Let Enter reach the composer submit handler so commands
+        // such as `/models` can open their interactive picker on the first keypress.
+        if (
+          event.key === 'Enter' &&
+          mode === 'slash' &&
+          flat.some((item) => (item as SlashCommand).command.toLowerCase() === raw.trim().toLowerCase())
+        ) {
+          return false
+        }
         const item = flat[selIndex] ?? flat[0]
         if (!item) return false
         pick(item)
@@ -248,18 +271,22 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
       aria-selected={idx === selIndex}
       data-idx={idx}
       className={`slash-suggestion-item ${idx === selIndex ? 'active' : ''}`}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        pick(item)
-      }}
+      title={[name, usage, desc].filter(Boolean).join(" · ")}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => pick(item)}
       onPointerMove={() => setSelIndex(idx)}
     >
+      <span className="slash-cmd-icon" aria-hidden="true">
+        {mode === 'skill' ? <BookOpen size={15} /> : mode === 'at' ? <AtSign size={15} /> :
+          (item as SlashCommand).category === 'models' ? <Brain size={15} /> :
+          (item as SlashCommand).category === 'workspace' ? <Folder size={15} /> :
+          (item as SlashCommand).category === 'tools' ? <Wrench size={15} /> : <Terminal size={15} />}
+      </span>
       <span className="slash-cmd-name">{name}</span>
-      {badge && <span className="skill-badge">{badge}</span>}
       <span className="slash-cmd-body">
         <span className="slash-cmd-desc">{desc}</span>
-        {usage && <span className="slash-cmd-usage">{usage}</span>}
       </span>
+      {badge && <span className="skill-badge">{badge}</span>}
     </button>
   )
 
@@ -269,10 +296,10 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
         {mode === 'slash' ? 'Slash Commands' : mode === 'skill' ? 'Learned Skills' : 'Context Mentions'}
         <span className="slash-suggestions-count">{headerLabel}</span>
       </div>
-      <div className="slash-suggestions-list" ref={listRef} role="listbox">
+      <div className="slash-suggestions-list" ref={listRef} role="listbox" aria-label={mode === 'slash' ? 'Slash commands' : mode === 'skill' ? 'Skills' : 'Context mentions'}>
         {mode === 'slash' &&
           (flat.length > 0
-            ? CATEGORY_ORDER.map((cat) => {
+            ? [...new Set(slashMatches.map((match) => match.category ?? 'tools'))].map((cat) => {
                 const items = slashMatches.filter((m) => (m.category ?? 'tools') === cat)
                 if (!items.length) return null
                 return (
@@ -311,6 +338,7 @@ const SlashSuggestions = forwardRef<SlashSuggestionsHandle, Props>(function Slas
             row(item, idx, item.label, item.desc, item.kind === 'plugin' ? '[Plugin]' : '[Context]'),
           )}
       </div>
+      <div className="slash-suggestions-hint">↑↓ select · Tab complete · Enter send · Esc close</div>
     </div>
   )
 })

package/src/renderer/shared/components/SourcesBlock.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react'
 import type { WebSearchSource } from '../utils/agentActivity'
 import { resolveMediaUrl } from '../utils/markdown'
+import '../css/sources-block.css'
 
 export interface SourcesBlockProps {
   sources: WebSearchSource[]
@@ -87,7 +88,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
   const hiddenGroups = domainGroups.slice(MAX_INITIAL_CARDS)
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
+    <div className="sources-block" style={{ display: 'flex', flexDirection: 'column', gap: '10px', marginBottom: '12px', marginTop: '4px' }}>
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
         <svg
@@ -110,6 +111,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
 
       {/* Domain Cards Container (wraps to next line if exceeding frame width) */}
       <div
+        className="sources-cards"
         style={{
           display: 'flex',
           flexWrap: 'wrap',
@@ -124,18 +126,11 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
           return (
             <div
               key={group.domain}
-              style={{
-                position: 'relative',
-                flex: '1 1 180px',
-                maxWidth: '240px',
-                minWidth: '160px',
-                boxSizing: 'border-box',
-              }}
+              className="source-card-group"
             >
               <div
+                className="source-card"
                 style={{
-                  display: 'flex',
-                  flexDirection: 'column',
                   justifyContent: 'space-between',
                   borderRadius: '16px',
                   background: 'var(--bg-surface-soft)',
@@ -143,7 +138,6 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   transition: 'all 0.15s ease',
                   cursor: 'pointer',
                   minHeight: '68px',
-                  height: '100%',
                   boxSizing: 'border-box',
                   overflow: 'hidden',
                 }}
@@ -173,7 +167,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               >
                 {/* Thumbnail (if this source has an associated image) */}
                 {primaryItem.imageUrl && (
-                  <div style={{ width: '100%', height: '80px', overflow: 'hidden', background: 'var(--bg-surface-raised)', flexShrink: 0 }}>
+                  <div className="source-card-thumbnail" style={{ overflow: 'hidden', background: 'var(--bg-surface-raised)', flexShrink: 0 }}>
                     <img
                       src={resolveMediaUrl(primaryItem.imageUrl)}
                       alt={primaryItem.title}
@@ -185,7 +179,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                   </div>
                 )}
 
-                <div style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '10px 12px' }}>
+                <div className="source-card-content" style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '10px 12px' }}>
                   {/* Title */}
                   <div
                     title={primaryItem.title}
@@ -280,7 +274,6 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
                     position: 'absolute',
                     top: '100%',
                     left: 0,
-                    width: '260px',
                     marginTop: '6px',
                     background: 'var(--bg-overlay)',
                     border: '1px solid var(--border-default)',
@@ -357,7 +350,10 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
 
         {/* Overflow "View X more" Card */}
         {!isExpanded && remainingSourcesCount > 0 && (
-          <div
+          <button
+            type="button"
+            className="sources-more-button"
+            aria-expanded={false}
             onClick={() => setIsExpanded(true)}
             style={{
               display: 'flex',
@@ -369,10 +365,6 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
               border: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : 'rgba(15,23,42,0.1)'}`,
               cursor: 'pointer',
               transition: 'all 0.15s ease',
-              minHeight: '68px',
-              height: '100%',
-              flex: '1 1 160px',
-              maxWidth: '200px',
               boxSizing: 'border-box',
             }}
             onMouseEnter={(e) => {
@@ -412,7 +404,7 @@ export const SourcesBlock: React.FC<SourcesBlockProps> = React.memo(function Sou
             <span style={{ fontSize: '0.78rem', fontWeight: 500, color: '#94a3b8', marginLeft: '8px' }}>
               View {remainingSourcesCount} more
             </span>
-          </div>
+          </button>
         )}
       </div>
 

package/src/renderer/shared/components/ToolSurfacePage.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import ToolSurfacePage from './ToolSurfacePage'
+
+const noop = () => {}
+const props = {
+  surfaces: [], activeSurfaceId: null, terminalSize: 440,
+  onSelect: noop, onClose: noop, onCloseAll: noop, onDuplicate: noop,
+  onRename: noop, onCloseOthers: noop, onResizeTerminal: noop, onResizePanel: noop,
+  onOpenTerminal: noop, onOpenBrowser: noop, onOpenReview: noop, onOpenFiles: noop,
+  onOpenMods: noop, onOpenBackgroundTasks: noop, onClosePanel: noop,
+  onModsPanelTarget: noop, onBackgroundPanelTarget: noop,
+}
+
+describe('Tools launcher', () => {
+  it('makes workspace mods and running background tasks discoverable on its first screen', () => {
+    const html = renderToStaticMarkup(<ToolSurfacePage {...props} backgroundTaskCount={2} />)
+    expect(html).toMatch(/role="menuitem"[^>]*title="Workspace mods"/)
+    expect(html).toMatch(/role="menuitem"[^>]*title="Background tasks"/)
+    expect(html).toContain('2 active background tasks')
+    expect(html).toContain('Integrated terminal')
+  })
+
+  it('does not offer a native shell or desktop workspace on the web', () => {
+    const html = renderToStaticMarkup(<ToolSurfacePage {...props} desktopTools={false} />)
+    expect(html).toContain('Workspace mods')
+    expect(html).toContain('Background tasks')
+    expect(html).not.toContain('Integrated terminal')
+    expect(html).not.toContain('Workspace files')
+  })
+})

package/src/renderer/shared/components/ToolSurfacePage.tsx

@@ -6,11 +6,13 @@ import { ArtifactPreviewPanel } from './ArtifactPreviewPanel'
 import CodeReviewPage from './CodeReviewPage'
 import TerminalDock from './TerminalDock'
 import type { FileChange } from '../types'
+import { ListTodo, Puzzle } from 'lucide-react'
 
 export type ToolSurface =
   | { id: string; kind: 'preview'; title: string; artifact: ArtifactFile }
   | { id: string; kind: 'review'; title: string; reviewTitle: string; changes: FileChange[] }
   | { id: string; kind: 'terminal'; title: string }
+  | { id: string; kind: 'mods' | 'background'; title: string }
 
 interface Props {
   surfaces: ToolSurface[]
@@ -31,10 +33,18 @@ interface Props {
   onOpenFiles: () => void
   onOpenSideChat?: () => void
   onClosePanel: () => void
+  desktopTools?: boolean
+  backgroundTaskCount?: number
+  onOpenMods: () => void
+  onOpenBackgroundTasks: () => void
+  onModsPanelTarget: (target: HTMLDivElement | null) => void
+  onBackgroundPanelTarget: (target: HTMLDivElement | null) => void
 }
 
 
 function surfaceIcon(kind: ToolSurface['kind']) {
+  if (kind === 'mods') return <Puzzle size={13} aria-hidden="true" />
+  if (kind === 'background') return <ListTodo size={13} aria-hidden="true" />
   if (kind === 'terminal') {
     return (
       <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ verticalAlign: '-1px' }}>
@@ -80,11 +90,34 @@ export default function ToolSurfacePage({
   onOpenFiles,
   onOpenSideChat,
   onClosePanel,
+  desktopTools = true,
+  backgroundTaskCount = 0,
+  onOpenMods,
+  onOpenBackgroundTasks,
+  onModsPanelTarget,
+  onBackgroundPanelTarget,
 }: Props) {
   const active = surfaces.find((surface) => surface.id === activeSurfaceId) ?? surfaces[0] ?? null
   const [switcherOpen, setSwitcherOpen] = useState(false)
   const [tabMenuState, setTabMenuState] = useState<{ id: string; x: number; y: number } | null>(null)
   const [isMaximized, setIsMaximized] = useState(false)
+  const panelRef = useRef<HTMLElement>(null)
+
+  useEffect(() => {
+    panelRef.current?.querySelector<HTMLButtonElement>('[role="tab"][aria-selected="true"], [role="menuitem"]')?.focus()
+  }, [active?.id])
+
+  useEffect(() => {
+    const dismiss = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.defaultPrevented || !panelRef.current?.contains(event.target as Node)) return
+      event.preventDefault()
+      if (switcherOpen) { setSwitcherOpen(false); newTabWrapRef.current?.querySelector<HTMLButtonElement>('.tool-surface-dropdown-btn')?.focus() }
+      else if (tabMenuState) setTabMenuState(null)
+      else onClosePanel()
+    }
+    document.addEventListener('keydown', dismiss)
+    return () => document.removeEventListener('keydown', dismiss)
+  }, [onClosePanel, switcherOpen, tabMenuState])
 
   const [isEntering, setIsEntering] = useState(true)
   const [isResizing, setIsResizing] = useState(false)
@@ -193,10 +226,14 @@ export default function ToolSurfacePage({
   )
 
   const launcherItems = [
+    { label: 'Mods', title: 'Workspace mods', shortcut: '', icon: <Puzzle />, className: 'is-mods', action: onOpenMods },
+    { label: 'Background tasks', title: 'Background tasks', shortcut: '', icon: <ListTodo />, className: 'is-background', action: onOpenBackgroundTasks },
+    ...(desktopTools ? [
     { label: 'Review', title: 'Review changes', shortcut: 'Ctrl+Shift+G', icon: <IconReview />, className: 'is-review', action: onOpenReview },
-    { label: 'Terminal', title: 'Integrated terminal', shortcut: 'Ctrl`', icon: <IconTerminal />, className: 'is-terminal', action: onOpenTerminal },
+    { label: 'Terminal', title: 'Integrated terminal', shortcut: 'Ctrl + `', icon: <IconTerminal />, className: 'is-terminal', action: onOpenTerminal },
     { label: 'Browser', title: 'Browser (Co-browsing with AI)', shortcut: 'Ctrl+T', icon: <IconBrowser />, className: 'is-browser', action: onOpenBrowser },
     { label: 'Workspace', title: 'Workspace files', shortcut: 'Ctrl+P', icon: <IconFiles />, className: 'is-files', action: onOpenFiles },
+    ] : []),
   ]
 
   const renderLauncher = (className = '') => (
@@ -204,7 +241,9 @@ export default function ToolSurfacePage({
       {launcherItems.map((item) => (
         <button type="button" role="menuitem" className="tool-surface-launcher-item" key={item.label} title={item.title} onClick={() => { item.action(); setSwitcherOpen(false) }}>
           <span className={`tool-surface-menu-icon ${item.className}`} aria-hidden="true">{item.icon}</span>
-          <span>{item.label}</span><kbd>{item.shortcut}</kbd>
+          <span className="tool-surface-menu-copy"><span className="tool-surface-menu-label">{item.label}</span></span>
+          {item.className === 'is-background' && backgroundTaskCount > 0 && <span className="tools-task-count" aria-label={`${backgroundTaskCount} active background tasks`}>{backgroundTaskCount}</span>}
+          {item.shortcut && <kbd>{item.shortcut}</kbd>}
         </button>
       ))}
     </div>
@@ -218,7 +257,7 @@ export default function ToolSurfacePage({
       const next = !open
       if (next && newTabWrapRef.current) {
         const rect = newTabWrapRef.current.getBoundingClientRect()
-        setMenuAlignRight(window.innerWidth - rect.left < 210)
+        setMenuAlignRight(window.innerWidth - rect.left < 260)
       }
       return next
     })
@@ -296,6 +335,10 @@ export default function ToolSurfacePage({
   }
 
   const handleAddNewTab = () => {
+    if (active?.kind === 'mods' || active?.kind === 'background') {
+      toggleSwitcher()
+      return
+    }
     if (active?.kind === 'review') {
       onOpenReview()
     } else if (active?.kind === 'preview') {
@@ -305,7 +348,7 @@ export default function ToolSurfacePage({
     }
   }
 
-  const newTabTooltip = active?.kind === 'review'
+  const newTabTooltip = active?.kind === 'mods' || active?.kind === 'background' ? 'Open a tool' : active?.kind === 'review'
     ? 'New Review Tab'
     : active?.kind === 'preview'
     ? 'Duplicate Preview Tab'
@@ -313,9 +356,10 @@ export default function ToolSurfacePage({
 
   return (
     <section
+      ref={panelRef}
       className={`tool-surface-page ${isEntering ? 'is-entering' : ''} ${isMaximized ? 'is-maximized' : ''} ${isResizing ? 'is-resizing' : ''}`}
       onAnimationEnd={() => setIsEntering(false)}
-      aria-label="Open tools"
+      aria-label="Tools"
     >
       {!isMaximized && (
         <div
@@ -416,6 +460,7 @@ export default function ToolSurfacePage({
               onClick={(e) => { e.stopPropagation(); toggleSwitcher() }}
               title="Switch tool or open page"
               aria-label="Switch tool"
+              aria-haspopup="menu"
               aria-expanded={switcherOpen}
             >
               <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -425,8 +470,9 @@ export default function ToolSurfacePage({
             {switcherOpen && (
               <div
                 className={`tool-surface-switch-menu ${menuAlignRight ? 'is-align-right' : ''}`}
-                role="menu"
+                aria-label="Tool menu"
               >
+                <div className="tool-surface-menu-heading">OPEN TOOL</div>
                 {renderLauncher('is-switch-menu')}
               </div>
             )}
@@ -437,8 +483,8 @@ export default function ToolSurfacePage({
                 type="button"
                 className={`tool-surface-action-btn ${isMaximized ? 'is-active' : ''}`}
                 onClick={() => setIsMaximized((prev) => !prev)}
-                title={isMaximized ? 'Restore side split' : 'Maximize terminal (⤢)'}
-                aria-label={isMaximized ? 'Restore side split' : 'Maximize terminal'}
+                title={isMaximized ? 'Restore side split' : 'Maximize tools (⤢)'}
+                aria-label={isMaximized ? 'Restore side split' : 'Maximize tools'}
               >
                 {isMaximized ? (
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -474,9 +520,9 @@ export default function ToolSurfacePage({
               }}
               role="menu"
             >
-              <button type="button" role="menuitem" onClick={() => { onDuplicate(tabMenuState.id); setTabMenuState(null) }}>
+              {surfaces.find(surface => surface.id === tabMenuState.id)?.kind !== 'mods' && surfaces.find(surface => surface.id === tabMenuState.id)?.kind !== 'background' && <button type="button" role="menuitem" onClick={() => { onDuplicate(tabMenuState.id); setTabMenuState(null) }}>
                 Duplicate tab
-              </button>
+              </button>}
               <button type="button" role="menuitem" onClick={() => { onRename(tabMenuState.id); setTabMenuState(null) }}>
                 Rename tab
               </button>
@@ -493,7 +539,9 @@ export default function ToolSurfacePage({
 
       <div className={`tool-surface-content${active ? '' : ' is-launcher'}`}>
         {!active && renderLauncher()}
-        {active?.kind === 'preview' && <ArtifactPreviewPanel artifact={active.artifact} onClose={() => active && onClose(active.id)} workspacePath={workspacePath || undefined} />}
+        {active?.kind === 'mods' && <div key="mods" className="tool-surface-panel-host" ref={onModsPanelTarget} />}
+        {active?.kind === 'background' && <div key="background" className="tool-surface-panel-host" ref={onBackgroundPanelTarget} />}
+        {active?.kind === 'preview' && <ArtifactPreviewPanel key={active.id} artifact={active.artifact} onClose={() => active && onClose(active.id)} workspacePath={workspacePath || undefined} />}
         {active?.kind === 'review' && (
           <CodeReviewPage
             title={active.reviewTitle}

package/src/renderer/shared/components/ToolsPanelToggle.tsx

@@ -0,0 +1,13 @@
+import '../css/tools-panel.css'
+
+export default function ToolsPanelToggle({ open, count = 0, onToggle, className = '' }: {
+  open: boolean; count?: number; onToggle: () => void; className?: string
+}) {
+  return <button type="button" className={`tools-panel-toggle ${className}${open ? ' is-open' : ''}`}
+    aria-label={open ? 'Close tools panel' : 'Open tools panel'} aria-expanded={open}
+    title={open ? 'Close tools panel' : 'Open tools panel'} onClick={onToggle}>
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M15 4v16M18 8h1M18 12h1M18 16h1"/></svg>
+    <span className="tools-toggle-label">Tools</span>
+    {count > 0 && <span className="tools-task-count" aria-label={`${count} active background tasks`}>{count}</span>}
+  </button>
+}