@pheem49/mint 1.15.0 → 1.16.0

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

@@ -0,0 +1,61 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Paperclip, X } from 'lucide-react'
+import type { AgentProgress } from '../types'
+import { useSessionSources } from '../utils/useSessionSources'
+import SessionSources from './SessionSources'
+import '../css/session-sources-popover.css'
+
+export default function SessionSourcesPopover({ chatId, liveProgress, open, onOpenChange }: {
+  chatId: string; liveProgress: AgentProgress[]; open: boolean; onOpenChange: (open: boolean) => void
+}) {
+  const [position, setPosition] = useState({ left: 12, top: 64, maxHeight: 400 })
+  const trigger = useRef<HTMLButtonElement>(null)
+  const panel = useRef<HTMLElement>(null)
+  const closeButton = useRef<HTMLButtonElement>(null)
+  const id = useId()
+  const { sources, loading, error, retry } = useSessionSources(chatId, liveProgress, open)
+  const close = useCallback((restoreFocus = false) => {
+    onOpenChange(false)
+    if (restoreFocus) trigger.current?.focus()
+  }, [onOpenChange])
+  const reposition = useCallback(() => {
+    const bounds = trigger.current?.getBoundingClientRect()
+    if (!bounds) return
+    const width = Math.min(360, window.innerWidth - 24)
+    const top = bounds.bottom + 8
+    setPosition({ left: Math.max(12, Math.min(bounds.right - width, window.innerWidth - width - 12)), top, maxHeight: Math.max(0, window.innerHeight - top - 12) })
+  }, [])
+  useEffect(() => {
+    if (!open) return
+    reposition()
+    closeButton.current?.focus()
+    const outside = (event: MouseEvent) => {
+      if (!trigger.current?.contains(event.target as Node) && !panel.current?.contains(event.target as Node)) close()
+    }
+    const key = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); close(true) } }
+    document.addEventListener('mousedown', outside)
+    window.addEventListener('keydown', key)
+    window.addEventListener('resize', reposition)
+    window.addEventListener('scroll', reposition, true)
+    return () => {
+      document.removeEventListener('mousedown', outside)
+      window.removeEventListener('keydown', key)
+      window.removeEventListener('resize', reposition)
+      window.removeEventListener('scroll', reposition, true)
+    }
+  }, [open, close, reposition])
+  return <>
+    <button ref={trigger} type="button" className={`session-sources-toggle${open ? ' is-open' : ''}`} aria-label="Open session sources" aria-haspopup="dialog" aria-expanded={open} aria-controls={open ? id : undefined} title="Sources for this session" onClick={() => { reposition(); onOpenChange(!open) }}>
+      <Paperclip size={15} aria-hidden="true" /><span>Sources</span>
+    </button>
+    {open && createPortal(<section ref={panel} id={id} className="session-sources-popover" role="dialog" aria-label="Session sources" style={position}>
+      <button ref={closeButton} type="button" className="session-sources-close" aria-label="Close session sources" onClick={() => close(true)}><X size={16} aria-hidden="true" /></button>
+      <SessionSources key={chatId} sources={sources} loading={loading} error={error} onRetry={retry} onOpenLibrary={url => {
+        window.history.pushState({}, '', url)
+        window.dispatchEvent(new PopStateEvent('popstate'))
+        close()
+      }} />
+    </section>, document.body)}
+  </>
+}

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

@@ -1,3 +1,4 @@
+import SelectField from '../SelectField'
 import React, { useEffect, useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { HF_MODELS } from '../../constants/models'
@@ -260,19 +261,19 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
 
             <div className="setting-row">
               <label>AI provider</label>
-              <select value={provider} onChange={(e) => handleProviderChange(e.target.value)}>
+              <SelectField aria-label="AI provider" value={provider} onValueChange={(nextValue) => handleProviderChange(nextValue)}>
                 {availableProviders.map(p => (
                   <option key={p.value} value={p.value}>{p.label}</option>
                 ))}
-              </select>
+              </SelectField>
             </div>
 
             <div className="setting-row">
               <label>Model name</label>
-              <select 
+              <SelectField aria-label="Model name"
                 value={isCustomModel ? 'custom' : model} 
-                onChange={(e) => {
-                  const val = e.target.value
+                onValueChange={(nextValue) => {
+                  const val = nextValue
                   if (val === 'custom') {
                     setModel('')
                   } else {
@@ -284,7 +285,7 @@ export default function AgentsTab({ config, updateField, dynamicOllamaModels = [
                   <option key={m} value={m}>{m}</option>
                 ))}
                 <option value="custom">Custom...</option>
-              </select>
+              </SelectField>
             </div>
 
             {isCustomModel && (

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

@@ -1,3 +1,4 @@
+import SelectField from '../SelectField'
 import React, { useState } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { GEMINI_LIVE_VOICES } from '../../constants/models'
@@ -84,14 +85,14 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
           <div className="form-grid single">
             <div className="setting-row">
               <label>Real-time model{liveLoading && <span style={{ marginLeft: 6, opacity: 0.5, fontSize: '0.8em' }}>loading…</span>}</label>
-              <select
+              <SelectField aria-label="Real-time model"
                 value={isCustomLiveModel ? 'custom' : config.geminiLiveModel}
-                onChange={(e) => {
-                  if (e.target.value === 'custom') {
+                onValueChange={(nextValue) => {
+                  if (nextValue === 'custom') {
                     setCustomLiveModel(true)
                   } else {
                     setCustomLiveModel(false)
-                    updateField('geminiLiveModel', e.target.value)
+                    updateField('geminiLiveModel', nextValue)
                   }
                 }}
               >
@@ -99,7 +100,7 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
                   <option key={model} value={model}>{model}</option>
                 ))}
                 <option value="custom">Custom...</option>
-              </select>
+              </SelectField>
               <p className="hint">
                 The model Gemini Live uses for realtime voice conversations.
                 "gemini-3.1-flash-live-preview" requires requesting allowlist access from Google first — if it
@@ -119,11 +120,11 @@ export default function AudioTab({ config, updateField, apiKey }: AudioTabProps)
             )}
             <div className="setting-row">
               <label>Live voice</label>
-              <select value={config.geminiLiveVoice} onChange={(e) => updateField('geminiLiveVoice', e.target.value)}>
+              <SelectField aria-label="Live voice" value={config.geminiLiveVoice} onValueChange={(nextValue) => updateField('geminiLiveVoice', nextValue)}>
                 {GEMINI_LIVE_VOICES.map((voiceName) => (
                   <option key={voiceName} value={voiceName}>{voiceName}</option>
                 ))}
-              </select>
+              </SelectField>
               <p className="hint">
                 The voice Gemini Live speaks with. Can also be changed mid-call from the Live overlay itself.
               </p>

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

@@ -86,8 +86,8 @@ export default function AutomationTab({
           </div>
           <div className="toggle-row">
             <div>
-              <label>Write a skill after finishing a hard task</label>
-              <p className="hint">Saves a reusable skill after a multi-step task, so it won't have to re-derive the solution next time.</p>
+              <label>Suggest a skill after finishing a hard task</label>
+              <p className="hint">Proposes reusable instructions after a multi-step task. Review and approve each change before it is saved.</p>
             </div>
             <label className="settings-toggle-switch">
               <input

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

@@ -1,3 +1,4 @@
+import SelectField from '../SelectField'
 import React from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
 import { 
@@ -369,11 +370,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 +382,7 @@ export default function GeneralTab({
                         {m.displayName || m.modelId}
                       </option>
                     ))}
-                  </select>
+                  </SelectField>
                 </div>
               )
             })()}
@@ -724,15 +725,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 +777,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 +829,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 +935,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 +987,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 +1039,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 +1092,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 +1103,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 +1309,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 +1375,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 +1388,7 @@ export default function GeneralTab({
                       {currentVeoModel && !veoOpts.some((m) => m.value === currentVeoModel) && (
                         <option key={currentVeoModel} value={currentVeoModel}>{currentVeoModel}</option>
                       )}
-                    </select>
+                    </SelectField>
                   )
                 })()}
               </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>
+  )
+}