@pheem49/mint 1.15.0 → 1.17.0

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

@@ -1,3 +1,4 @@
+import SelectField from '../ui/SelectField'
 import React from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { 
@@ -22,6 +23,8 @@ import { setActiveModel } from '../../utils/modelManager'
 import { providerLabel as aiProviderLabel } from '../../utils/providers'
 import ApiKeyInput from './ApiKeyInput'
 import SearchableModelCombobox from './SearchableModelCombobox'
+import CustomProviderLogoPicker from './CustomProviderLogoPicker'
+import AvatarCropModal from './AvatarCropModal'
 import anthropicLogo from '@lobehub/icons-static-svg/icons/anthropic.svg?url'
 import deepseekLogo from '@lobehub/icons-static-svg/icons/deepseek-color.svg?url'
 import geminiLogo from '@lobehub/icons-static-svg/icons/gemini-color.svg?url'
@@ -186,7 +189,11 @@ export default function GeneralTab({
   onSaveWithoutClosing
 }: GeneralTabProps) {
   const [savedProviderId, setSavedProviderId] = React.useState<string | null>(null)
-  const [providerLogoErrors, setProviderLogoErrors] = React.useState<Record<string, string>>({})
+  const [cropModalData, setCropModalData] = React.useState<{
+    imageSrc: string
+    fileName: string
+    onConfirm: (croppedUri: string) => void
+  } | null>(null)
   const [openSections, setOpenSections] = React.useState<Record<string, boolean>>({
     ai_routing: true,
     search: false,
@@ -223,42 +230,6 @@ export default function GeneralTab({
     }
   }
 
-  const handleProviderLogoChange = (providerId: string, file?: File) => {
-    if (!file) return
-    const supportedTypes = ['image/png', 'image/jpeg', 'image/webp']
-    if (!supportedTypes.includes(file.type)) {
-      setProviderLogoErrors(prev => ({ ...prev, [providerId]: 'Choose a PNG, JPEG, or WebP image.' }))
-      return
-    }
-    if (file.size > 256 * 1024) {
-      setProviderLogoErrors(prev => ({ ...prev, [providerId]: 'The logo must be 256 KB or smaller.' }))
-      return
-    }
-
-    const reader = new FileReader()
-    reader.onload = () => {
-      if (typeof reader.result !== 'string') {
-        setProviderLogoErrors(prev => ({ ...prev, [providerId]: 'Could not read this image.' }))
-        return
-      }
-      const provider = (config.customProviders ?? []).find(item => item.id === providerId)
-      if (!provider) return
-      const updated = (config.customProviders ?? []).map(item =>
-        item.id === providerId ? { ...item, logoDataUrl: reader.result as string } : item
-      )
-      updateField('customProviders', updated)
-      setProviderLogoErrors(prev => {
-        const next = { ...prev }
-        delete next[providerId]
-        return next
-      })
-    }
-    reader.onerror = () => {
-      setProviderLogoErrors(prev => ({ ...prev, [providerId]: 'Could not read this image.' }))
-    }
-    reader.readAsDataURL(file)
-  }
-
   const renderCollapsibleSection = (
     key: string,
     kicker: string,
@@ -369,11 +340,11 @@ export default function GeneralTab({
               return (
                 <div className="setting-row wide">
                   <label>Active model</label>
-                  <select
+                  <SelectField aria-label="Active model"
                     value={currentModel}
-                    onChange={(e) => updateField('customModelSelections', {
+                    onValueChange={(nextValue) => updateField('customModelSelections', {
                       ...(config.customModelSelections ?? {}),
-                      [activeId]: e.target.value
+                      [activeId]: nextValue
                     })}
                   >
                     {cp.models.map(m => (
@@ -381,7 +352,7 @@ export default function GeneralTab({
                         {m.displayName || m.modelId}
                       </option>
                     ))}
-                  </select>
+                  </SelectField>
                 </div>
               )
             })()}
@@ -685,9 +656,9 @@ export default function GeneralTab({
                                 padding: '0.2rem 0.6rem',
                                 fontSize: '0.75rem',
                                 fontWeight: currentEffort === eff ? 600 : 400,
-                                background: currentEffort === eff ? 'rgba(16, 185, 129, 0.15)' : undefined,
-                                borderColor: currentEffort === eff ? 'var(--accent, #10b981)' : undefined,
-                                color: currentEffort === eff ? 'var(--accent, #10b981)' : undefined,
+                                background: currentEffort === eff ? 'var(--accent-subtle)' : undefined,
+                                borderColor: currentEffort === eff ? 'var(--accent)' : undefined,
+                                color: currentEffort === eff ? 'var(--interactive-fg)' : undefined,
                               }}
                               onClick={() => handleEffortChange(eff)}
                             >
@@ -724,15 +695,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>Gemini model</label>
-                  <select 
+                  <SelectField aria-label="Gemini model"
                     value={dynamicGeminiModels.includes(config.geminiModel) ? config.geminiModel : 'custom'} 
-                    onChange={(e) => updateField('geminiModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('geminiModel', nextValue)}
                   >
                     {dynamicGeminiModels.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicGeminiModels.includes(config.geminiModel) || config.geminiModel === 'custom') && (
                   <div className="setting-row">
@@ -776,15 +747,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>Anthropic model</label>
-                  <select 
+                  <SelectField aria-label="Anthropic model"
                     value={dynamicAnthropicModels.includes(config.anthropicModel) ? config.anthropicModel : 'custom'} 
-                    onChange={(e) => updateField('anthropicModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('anthropicModel', nextValue)}
                   >
                     {dynamicAnthropicModels.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicAnthropicModels.includes(config.anthropicModel) || config.anthropicModel === 'custom') && (
                   <div className="setting-row">
@@ -828,15 +799,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>OpenAI Model</label>
-                  <select 
+                  <SelectField aria-label="OpenAI Model"
                     value={dynamicOpenAIModels.includes(config.openaiModel) ? config.openaiModel : 'custom'} 
-                    onChange={(e) => updateField('openaiModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('openaiModel', nextValue)}
                   >
                     {dynamicOpenAIModels.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicOpenAIModels.includes(config.openaiModel) || config.openaiModel === 'custom') && (
                   <div className="setting-row">
@@ -934,15 +905,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>DeepSeek Model</label>
-                  <select
+                  <SelectField aria-label="DeepSeek Model"
                     value={dynamicDeepSeekModels.includes(config.deepseekModel) ? config.deepseekModel : 'custom'}
-                    onChange={(e) => updateField('deepseekModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('deepseekModel', nextValue)}
                   >
                     {dynamicDeepSeekModels.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicDeepSeekModels.includes(config.deepseekModel) || config.deepseekModel === 'custom') && (
                   <div className="setting-row">
@@ -986,15 +957,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>Hugging Face model</label>
-                  <select 
+                  <SelectField aria-label="Hugging Face model"
                     value={(HF_MODELS as readonly string[]).includes(config.hfModel) ? config.hfModel : 'custom'} 
-                    onChange={(e) => updateField('hfModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('hfModel', nextValue)}
                   >
                     {HF_MODELS.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!(HF_MODELS as readonly string[]).includes(config.hfModel) || config.hfModel === 'custom') && (
                   <div className="setting-row">
@@ -1038,15 +1009,15 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>LM Studio Model</label>
-                  <select 
+                  <SelectField aria-label="LM Studio Model"
                     value={dynamicLocalModels.includes(config.localModelName) ? config.localModelName : 'custom'} 
-                    onChange={(e) => updateField('localModelName', e.target.value)}
+                    onValueChange={(nextValue) => updateField('localModelName', nextValue)}
                   >
                     {dynamicLocalModels.map(model => (
                       <option key={model} value={model}>{model}</option>
                     ))}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicLocalModels.includes(config.localModelName) || config.localModelName === 'custom') && (
                   <div className="setting-row">
@@ -1091,9 +1062,9 @@ export default function GeneralTab({
               <div className="provider-card-body">
                 <div className="setting-row">
                   <label>Ollama model</label>
-                  <select 
+                  <SelectField aria-label="Ollama model"
                     value={dynamicOllamaModels.includes(config.ollamaModel) ? config.ollamaModel : 'custom'} 
-                    onChange={(e) => updateField('ollamaModel', e.target.value)}
+                    onValueChange={(nextValue) => updateField('ollamaModel', nextValue)}
                   >
                     {dynamicOllamaModels.map(model => (
                       <option key={model} value={model}>{model}</option>
@@ -1102,7 +1073,7 @@ export default function GeneralTab({
                       <option value={config.ollamaModel}>{config.ollamaModel}</option>
                     )}
                     <option value="custom">Custom...</option>
-                  </select>
+                  </SelectField>
                 </div>
                 {(!dynamicOllamaModels.includes(config.ollamaModel) || config.ollamaModel === 'custom') && (
                   <div className="setting-row">
@@ -1308,14 +1279,14 @@ export default function GeneralTab({
                     {modelField && opts.length > 0 && (
                       <div className="setting-row">
                         <label>{prov.label} Model</label>
-                        <select value={currentModel} onChange={(e) => updateField(modelField, e.target.value)}>
+                        <SelectField aria-label="Model" value={currentModel} onValueChange={(nextValue) => updateField(modelField, nextValue)}>
                           {opts.map(m => (
                             <option key={m.value} value={m.value}>{m.label}</option>
                           ))}
                           {currentModel && !opts.some(m => m.value === currentModel) && (
                             <option key={currentModel} value={currentModel}>{currentModel}</option>
                           )}
-                        </select>
+                        </SelectField>
                       </div>
                     )}
                     {prov.keyField ? (
@@ -1374,11 +1345,11 @@ export default function GeneralTab({
                   const veoOpts = dynamicVideoModels?.veo || VEO_STUDIO_MODELS.veo || []
                   const currentVeoModel = config.veoModel || 'veo-3.1-generate-preview'
                   return (
-                    <select
+                    <SelectField aria-label="Default Veo model"
                       value={currentVeoModel}
-                      onChange={(e) => {
-                        updateField('veoModel', e.target.value)
-                        setActiveModel('veoModel', e.target.value, 'video')
+                      onValueChange={(nextValue) => {
+                        updateField('veoModel', nextValue)
+                        setActiveModel('veoModel', nextValue, 'video')
                       }}
                     >
                       {veoOpts.map((m) => (
@@ -1387,7 +1358,7 @@ export default function GeneralTab({
                       {currentVeoModel && !veoOpts.some((m) => m.value === currentVeoModel) && (
                         <option key={currentVeoModel} value={currentVeoModel}>{currentVeoModel}</option>
                       )}
-                    </select>
+                    </SelectField>
                   )
                 })()}
               </div>
@@ -1506,48 +1477,22 @@ export default function GeneralTab({
                       />
                     </div>
 
-                    <div className="setting-row">
+                    <div className="setting-row stacked">
                       <label>Provider logo (optional)</label>
-                      <div className="custom-provider-logo-picker">
-                        <div className="custom-provider-logo-preview" aria-hidden="true">
-                          {cp.logoDataUrl ? (
-                            <img src={cp.logoDataUrl} alt="" />
-                          ) : (
-                            <span>Logo</span>
-                          )}
-                        </div>
-                        <label className="btn btn-secondary btn-xs custom-provider-logo-select">
-                          {cp.logoDataUrl ? 'Change image' : 'Choose image'}
-                          <input
-                            type="file"
-                            accept="image/png,image/jpeg,image/webp"
-                            onChange={(event) => {
-                              handleProviderLogoChange(cp.id, event.currentTarget.files?.[0])
-                              event.currentTarget.value = ''
-                            }}
-                          />
-                        </label>
-                        {cp.logoDataUrl && (
-                          <button
-                            type="button"
-                            className="btn btn-secondary btn-xs"
-                            onClick={() => {
-                              updateCp({ logoDataUrl: undefined })
-                              setProviderLogoErrors(prev => {
-                                const next = { ...prev }
-                                delete next[cp.id]
-                                return next
-                              })
-                            }}
-                          >
-                            Remove
-                          </button>
-                        )}
-                        <span className="custom-provider-logo-help">PNG, JPEG, or WebP · max 256 KB</span>
-                        {providerLogoErrors[cp.id] && (
-                          <span className="custom-provider-logo-error" role="alert">{providerLogoErrors[cp.id]}</span>
-                        )}
-                      </div>
+                      <CustomProviderLogoPicker
+                        value={cp.logoDataUrl}
+                        onChange={(logoDataUrl) => updateCp({ logoDataUrl })}
+                        providerName={cp.displayName || cp.id}
+                        onRequestCrop={(dataUri, fileName) => {
+                          setCropModalData({
+                            imageSrc: dataUri,
+                            fileName,
+                            onConfirm: (croppedUri) => {
+                              updateCp({ logoDataUrl: croppedUri })
+                            },
+                          })
+                        }}
+                      />
                     </div>
 
                     <div className="setting-row">
@@ -1710,6 +1655,20 @@ export default function GeneralTab({
         </div>,
         <span className="section-current-badge">{config.showDesktopWidget ? 'On' : 'Off'}</span>
       )}
+
+      {cropModalData && (
+        <AvatarCropModal
+          imageSrc={cropModalData.imageSrc}
+          fileName={cropModalData.fileName}
+          title="Crop Provider Logo"
+          outputFormat="image/png"
+          onClose={() => setCropModalData(null)}
+          onConfirm={(croppedUri) => {
+            cropModalData.onConfirm(croppedUri)
+            setCropModalData(null)
+          }}
+        />
+      )}
     </div>
   )
 }

package/src/renderer/shared/components/Settings/MemoryTab.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import MemoryTab from './MemoryTab'
+
+const render = (preferences: string) => renderToStaticMarkup(<MemoryTab
+  userName="Pheem"
+  setUserName={() => { throw new Error('Rendering must not rewrite the name') }}
+  userPreferences={preferences}
+  setUserPreferences={() => { throw new Error('Rendering must not rewrite preferences') }}
+/>)
+
+describe('Memory & Profile reading view', () => {
+  it('preserves the original text and line breaks in a continuous reading view', () => {
+    const preferences = 'Talk in Thai; Keep explanations concise;\nPrefer TypeScript.'
+    const html = render(preferences)
+    expect(html).toContain(preferences)
+    expect(html).not.toContain('<li')
+    expect(html).toContain('Edit instructions')
+    expect(html).not.toContain('<textarea')
+  })
+
+  it('offers an explicit way to add instructions when memory is empty', () => {
+    const html = render('  ')
+    expect(html).toContain('Add instructions')
+    expect(html).not.toContain('<li')
+  })
+
+  it('associates the editable name with a label and explains its scope', () => {
+    const html = render('Keep it short.')
+    expect(html).toMatch(/<label[^>]* for="([^"]+)"[^>]*>What should Mint call you\?<\/label>/)
+    const id = html.match(/<label[^>]* for="([^"]+)"/)![1]
+    expect(html).toContain(`id="${id}"`)
+    expect(html).toContain('value="Pheem"')
+    expect(html).toContain('Across all sessions and projects')
+  })
+})

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

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useId, useRef, useState } from 'react'
+import '../../css/settings/memory.css'
 
 interface MemoryTabProps {
   userName: string
@@ -13,45 +14,84 @@ export default function MemoryTab({
   userPreferences,
   setUserPreferences
 }: MemoryTabProps) {
+  const id = useId()
+  const [editing, setEditing] = useState(false)
+  const modeButton = useRef<HTMLButtonElement>(null)
+  const hasPreferences = Boolean(userPreferences.trim())
+
   return (
-    <div className="tab-pane active animate-fade-in" style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-      <section className="setting-section">
-        <div className="section-heading">
+    <div className="tab-pane active memory-tab">
+      <header className="memory-intro">
+        <p className="section-kicker">Across all sessions and projects</p>
+        <h2>What Mint remembers about you</h2>
+        <p>Your name and response preferences follow you in CLI, Web, and Desktop.</p>
+      </header>
+
+      <section className="memory-name-section" aria-labelledby={`${id}-name-label`}>
+        <label id={`${id}-name-label`} htmlFor={`${id}-name`}>What should Mint call you?</label>
+        <input
+          id={`${id}-name`}
+          type="text"
+          autoComplete="nickname"
+          value={userName}
+          onChange={(e) => setUserName(e.target.value)}
+          placeholder="Your name or nickname"
+          aria-describedby={`${id}-name-hint`}
+        />
+        <p id={`${id}-name-hint`} className="memory-helper">The name Mint uses when talking with you.</p>
+      </section>
+
+      <section className="memory-instructions-section" aria-labelledby={`${id}-instructions-heading`}>
+        <div className="memory-section-heading">
           <div>
-            <p className="section-kicker">Cross-session Memory</p>
-            <h2 className="section-title">User profile & preferences</h2>
+            <h3 id={`${id}-instructions-heading`}>How Mint should respond</h3>
+            <p className="memory-helper">Your preferred language, tone, and everyday instructions.</p>
           </div>
+          <button
+            ref={modeButton}
+            type="button"
+            className="btn-secondary memory-mode-button"
+            aria-controls={`${id}-instructions`}
+            onClick={() => {
+              setEditing(!editing)
+              if (editing) modeButton.current?.focus()
+            }}
+          >
+            {editing ? 'Reading view' : hasPreferences ? 'Edit instructions' : 'Add instructions'}
+          </button>
         </div>
 
-        <div className="form-grid single">
-          <div className="setting-row">
-            <label>Your name / nickname</label>
-            <div className="memory-field-container">
-              <input 
-                type="text" 
-                value={userName} 
-                onChange={(e) => setUserName(e.target.value)} 
-                placeholder="e.g. Pheem, Jane" 
+        <div id={`${id}-instructions`} className="memory-instructions-content">
+          {editing ? (
+            <>
+              <label className="memory-editor-label" htmlFor={`${id}-editor`}>Response preferences & instructions</label>
+              <textarea
+                id={`${id}-editor`}
+                className="memory-editor"
+                autoFocus
+                rows={10}
+                value={userPreferences}
+                onChange={(e) => setUserPreferences(e.target.value)}
+                placeholder={'Talk in Thai.\nKeep explanations concise.\nExplain coding concepts step by step.'}
+                aria-describedby={`${id}-edit-hint`}
               />
-              <p className="hint">Used by the assistant to address you in conversation.</p>
+              <p id={`${id}-edit-hint`} className="memory-helper">Write one instruction per line for easier reading. Select Save Settings to save your changes.</p>
+            </>
+          ) : hasPreferences ? (
+            <div className="memory-reading-frame" tabIndex={0} role="region" aria-label="Response preferences and instructions">{userPreferences}</div>
+          ) : (
+            <div className="memory-empty">
+              <p>No response preferences added yet.</p>
+              <p className="memory-helper">Add the language, tone, or habits you want Mint to remember.</p>
             </div>
-          </div>
-
-          <div className="setting-row">
-            <label>Custom instructions & preferences</label>
-            <div className="memory-field-container">
-              <textarea 
-                value={userPreferences} 
-                onChange={(e) => setUserPreferences(e.target.value)} 
-                placeholder="e.g. Explain coding concepts step-by-step. Prefer TypeScript. Talk in Thai. Keep explanations concise." 
-                style={{ minHeight: '120px', resize: 'vertical' }}
-              />
-              <p className="hint">Preferences, guidelines, or persona instructions for the assistant.</p>
-            </div>
-          </div>
+          )}
         </div>
       </section>
+
+      <aside className="memory-scope-note" aria-label="About this memory">
+        <strong>About this memory</strong>
+        <p>This page contains your shared profile and preferences. Saved facts, project memory, and conversation history are stored separately.</p>
+      </aside>
     </div>
   )
 }
-

package/src/renderer/shared/components/Settings/NotificationsTab.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { expect, it } from 'vitest'
+import NotificationsTab from './NotificationsTab'
+
+it('shows notification categories with accessible switches and permission controls', () => {
+  const html = renderToStaticMarkup(<NotificationsTab settings={{ enabled: false }} onChange={() => {}} />)
+  expect(html).toContain('AI replies')
+  expect(html).toContain('Approval requests')
+  expect(html).toContain('System &amp; background tasks')
+  expect(html).toContain('aria-label="Enable notifications"')
+  expect(html).toContain('disabled=""')
+  expect(html).toContain('Check permission')
+  expect(html).toContain('Send test notification')
+})

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

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react'
+import { notificationPermission, readNotificationSettings, type NotificationSettings } from '../../utils/notificationSettings'
+import '../../css/settings/notifications.css'
+
+export default function NotificationsTab({ settings, onChange }: {
+  settings: unknown; onChange: (settings: NotificationSettings) => void
+}) {
+  const preferences = readNotificationSettings(settings)
+  const [permission, setPermission] = useState<string>('Checking…')
+  const [busy, setBusy] = useState(false)
+  const [message, setMessage] = useState('')
+  useEffect(() => {
+    let disposed = false
+    const refresh = () => {
+      notificationPermission().then(value => { if (!disposed) setPermission(value) })
+        .catch(() => { if (!disposed) setPermission('Could not check permission') })
+    }
+    refresh()
+    window.addEventListener('focus', refresh)
+    return () => { disposed = true; window.removeEventListener('focus', refresh) }
+  }, [])
+  const run = async (test: boolean) => {
+    setBusy(true)
+    setMessage('')
+    try {
+      const granted = await notificationPermission(true)
+      setPermission(granted)
+      if (granted !== 'granted') {
+        setMessage(granted === 'unsupported' ? 'Notifications are unavailable in this browser.' : 'Allow notifications in your browser or system settings, then check permission again.')
+      } else if (test) {
+        await window.api.notifyAiResponse('Your Mint notifications are working.')
+        setMessage('Test notification sent. If it does not appear, check your system’s Do Not Disturb setting.')
+      }
+    } catch (error) {
+      setMessage(error instanceof Error ? error.message : String(error))
+    } finally { setBusy(false) }
+  }
+  const toggle = (key: keyof NotificationSettings, title: string, description: string) => (
+    <div className="toggle-row" key={key}>
+      <div><label htmlFor={'notifications-' + key}>{title}</label><p className="hint">{description}</p></div>
+      <label className="settings-toggle-switch">
+        <input id={'notifications-' + key} type="checkbox" aria-label={title}
+          checked={preferences[key]} disabled={key !== 'enabled' && !preferences.enabled}
+          onChange={event => onChange({ ...preferences, [key]: event.target.checked })} />
+        <span className="settings-toggle-slider" />
+      </label>
+    </div>
+  )
+  return (
+    <div className="tab-pane active notifications-tab">
+      <section className="setting-section">
+        <div className="section-heading"><div><p className="section-kicker">Stay informed</p><h2 className="section-title">Notifications</h2></div></div>
+        <p className="hint">Choose what Mint shows in Desktop and Web. Select Save Settings to apply your changes.</p>
+        <div className="toggle-card">{toggle('enabled', 'Enable notifications', 'Turn Mint notifications on or off.')}</div>
+      </section>
+      <section className="setting-section">
+        <h3>Notification types</h3>
+        <div className="toggle-card">
+          {toggle('replies', 'AI replies', 'Notify when a response finishes while Mint is in the background.')}
+          {toggle('approvals', 'Approval requests', 'Notify when Mint needs your approval or an answer while in the background.')}
+          {toggle('system', 'System & background tasks', 'Battery, connection changes, and queued task updates on Desktop.')}
+        </div>
+      </section>
+      <section className="setting-section">
+        <h3>Where notifications appear</h3>
+        <div className="toggle-card">
+          {toggle('os', 'System notifications', 'Show an operating system popup while Mint is in the background.')}
+          {toggle('inApp', 'In-app notices', 'Show system and background task updates inside Mint.')}
+        </div>
+      </section>
+      <section className="setting-section notifications-permission">
+        <h3>Notification permission</h3>
+        <p className="hint">Permission is specific to this browser or Desktop installation.</p>
+        <p className="notifications-permission-state" role="status">Status: <strong>{permission}</strong></p>
+        {permission === 'denied' && <p className="hint">Notifications are blocked. Allow them in your browser or system settings.</p>}
+        <div className="notifications-actions">
+          <button type="button" className="btn-secondary" disabled={busy || permission === 'unsupported'} onClick={() => void run(false)}>Check permission</button>
+          <button type="button" className="btn-secondary" disabled={busy || !preferences.enabled || !preferences.os || permission === 'unsupported'} onClick={() => void run(true)}>Send test notification</button>
+        </div>
+        {message && <p className="notifications-feedback" role="status">{message}</p>}
+      </section>
+    </div>
+  )
+}