@pheem49/mint 1.14.0 → 1.16.0

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>
+  )
+}

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react'
 import { DEFAULT_CONFIG } from '../../constants/config'
-import { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, LearnedSkill, detectSystemTools, DetectedTools, listMcpServerTools } from '@/tauri'
+import { catalogPlatform } from '../../platform'
+import type { DetectedTools, LearnedSkill } from '../../types'
 import McpToolAllowlist from '../McpToolAllowlist'
 import McpRegistryPicker from '../McpRegistryPicker'
 import {
@@ -13,6 +14,13 @@ import {
 import { renderMcpSvgIcon, BUILTIN_PLUGINS_LIST } from '../../constants/plugins'
 import { isNativePluginEnabled, applyNativePluginToggle } from '../../utils/nativePlugins'
 
+const { listLearnedSkills, addLearnedSkill, deleteLearnedSkill, detectSystemTools, listMcpServerTools } = catalogPlatform
+
+function isWorkspaceSkill(skill: LearnedSkill): boolean {
+  // Desktop Tauri returns `location`; the Web API returns `is_workspace`.
+  return Boolean(skill.is_workspace || skill.location === 'workspace')
+}
+
 interface PluginsTabProps {
   config: typeof DEFAULT_CONFIG
   updateField: (field: keyof typeof DEFAULT_CONFIG, value: any) => void
@@ -275,7 +283,7 @@ export default function PluginsTab({
       <section className="setting-section">
         <div className="section-heading">
           <div>
-            <p className="section-kicker">Knowledge Base</p>
+            <p className="section-kicker">Knowledge base</p>
             <h2 className="section-title">Learned AI Skills</h2>
           </div>
         </div>
@@ -291,8 +299,8 @@ export default function PluginsTab({
                 <div className="skill-card-body">
                   <div className="plugin-name-row">
                     <span className="plugin-tag accent">{s.name}</span>
-                    <span className={`plugin-tag ${s.is_workspace ? 'ok' : 'info'}`}>
-                      {s.is_workspace ? 'Workspace' : 'Global'}
+                    <span className={`plugin-tag ${isWorkspaceSkill(s) ? 'ok' : 'info'}`}>
+                      {isWorkspaceSkill(s) ? 'Workspace' : 'Global'}
                     </span>
                   </div>
                   <p className="skill-card-desc">{s.description || s.content}</p>
@@ -309,11 +317,11 @@ export default function PluginsTab({
         )}
 
         <form className="add-skill-box" onSubmit={handleAddSkill}>
-          <h3>Teach New Skill</h3>
+          <h3>Teach new skill</h3>
           {skillsError && <p className="profile-message-error">{skillsError}</p>}
 
           <div className="setting-row stacked">
-            <label>Skill Name (e.g. coding-guidelines)</label>
+            <label>Skill name (e.g. coding-guidelines)</label>
             <input
               type="text"
               placeholder="e.g. angular-standard"
@@ -323,7 +331,7 @@ export default function PluginsTab({
           </div>
 
           <div className="setting-row stacked">
-            <label>Skill Instructions / Content</label>
+            <label>Skill instructions / content</label>
             <textarea
               placeholder="# Instructions&#10;Write only clean TypeScript. Use async/await."
               value={newSkillContent}
@@ -338,12 +346,12 @@ export default function PluginsTab({
         </form>
       </section>
 
-      {/* ── 2. External tools (MCP Servers) ── */}
+      {/* ── 2. External tools (MCP servers) ── */}
       <section className="setting-section">
         <div className="section-heading">
           <div>
             <p className="section-kicker">External tools</p>
-            <h2 className="section-title">MCP Servers</h2>
+            <h2 className="section-title">MCP servers</h2>
             <p className="section-desc" style={{ opacity: 0.7, fontSize: '0.85rem' }}>
               Add, edit, enable/disable a server and choose which of its tools the agent may
               call. The same manager opens full-screen with <code>/mcp</code> in chat.
@@ -457,7 +465,7 @@ export default function PluginsTab({
                       </div>
 
                       <div className="setting-row stacked">
-                        <label>Environment Variables (JSON format)</label>
+                        <label>Environment variables (JSON format)</label>
                         <textarea
                           value={typeof srvConfig.env === 'object' ? JSON.stringify(srvConfig.env, null, 2) : (srvConfig.env || '')}
                           onChange={(e) => {
@@ -500,7 +508,7 @@ export default function PluginsTab({
           />
           <div className="form-grid two-col">
             <div className="setting-row stacked">
-              <label>Server Name</label>
+              <label>Server name</label>
               <input
                 type="text"
                 placeholder="e.g. google-search"
@@ -537,7 +545,7 @@ export default function PluginsTab({
             />
           </div>
           <div className="setting-row stacked">
-            <label>Environment Variables (JSON)</label>
+            <label>Environment variables (JSON)</label>
             <textarea
               placeholder='e.g. {"BRAVE_API_KEY": "your_key_here"}'
               value={mcpEnv}

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

@@ -1,6 +1,7 @@
 import React, { useRef, useState } from 'react'
 import { useAuthUser } from '../AuthGate'
-import { authUploadAvatar } from '@/tauri'
+import { authPlatform } from '../../platform'
+import AvatarCropModal from './AvatarCropModal'
 
 interface ProfileTabProps {
   name: string
@@ -13,6 +14,7 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
   const { user, avatarUrl, refreshUser } = useAuthUser()
   const [isUploading, setIsUploading] = useState(false)
   const [uploadError, setUploadError] = useState<string | null>(null)
+  const [cropFile, setCropFile] = useState<{ imageSrc: string; fileName: string } | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -23,7 +25,6 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
       setUploadError('Please select a valid image file.')
       return
     }
-    setIsUploading(true)
     setUploadError(null)
     try {
       const dataUri = await new Promise<string>((resolve, reject) => {
@@ -32,9 +33,23 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
         reader.onerror = reject
         reader.readAsDataURL(file)
       })
-      const updated = await authUploadAvatar(dataUri, file.name)
+      // Open the crop & rotate modal
+      setCropFile({ imageSrc: dataUri, fileName: file.name })
+    } catch (error) {
+      console.error('Failed to read image file:', error)
+      setUploadError('Failed to read selected image.')
+    }
+  }
+
+  const handleConfirmCrop = async (croppedDataUri: string) => {
+    if (!cropFile) return
+    setIsUploading(true)
+    setUploadError(null)
+    try {
+      const updated = await authPlatform.authUploadAvatar(croppedDataUri, cropFile.fileName)
       setImageUrl(updated.image || '')
       refreshUser(updated)
+      setCropFile(null)
     } catch (error) {
       console.error('Avatar upload error:', error)
       setUploadError('Failed to upload image.')
@@ -98,7 +113,7 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
 
         <div className="form-grid single">
           <div className="setting-row">
-            <label>Display Name</label>
+            <label>Display name</label>
             <div className="memory-field-container">
               <input
                 type="text"
@@ -110,7 +125,7 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
           </div>
 
           <div className="setting-row">
-            <label>Profile Image URL</label>
+            <label>Profile image URL</label>
             <div className="memory-field-container">
               <input
                 type="text"
@@ -122,6 +137,15 @@ export default function ProfileTab({ name, setName, imageUrl, setImageUrl }: Pro
           </div>
         </div>
       </section>
+
+      {cropFile && (
+        <AvatarCropModal
+          imageSrc={cropFile.imageSrc}
+          fileName={cropFile.fileName}
+          onClose={() => setCropFile(null)}
+          onConfirm={handleConfirmCrop}
+        />
+      )}
     </div>
   )
 }