@pheem49/mint 1.14.0 → 1.15.0

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

@@ -19,13 +19,13 @@ export default function MemoryTab({
         <div className="section-heading">
           <div>
             <p className="section-kicker">Cross-session Memory</p>
-            <h2 className="section-title">User Profile & Preferences</h2>
+            <h2 className="section-title">User profile & preferences</h2>
           </div>
         </div>
 
         <div className="form-grid single">
           <div className="setting-row">
-            <label>Your Name / Nickname</label>
+            <label>Your name / nickname</label>
             <div className="memory-field-container">
               <input 
                 type="text" 
@@ -38,7 +38,7 @@ export default function MemoryTab({
           </div>
 
           <div className="setting-row">
-            <label>Custom Instructions & Preferences</label>
+            <label>Custom instructions & preferences</label>
             <div className="memory-field-container">
               <textarea 
                 value={userPreferences} 

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

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

@@ -0,0 +1,411 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react'
+import { OPENROUTER_POPULAR_MODELS, isFreeModel } from '../../constants/models'
+
+export interface SearchableModelComboboxProps {
+  value: string
+  models: string[]
+  onChange: (model: string) => void
+  onCustomChange?: (customModel: string) => void
+  customValue?: string
+  placeholder?: string
+}
+
+export default function SearchableModelCombobox({
+  value,
+  models,
+  onChange,
+  onCustomChange,
+  customValue,
+  placeholder = 'Select or search OpenRouter model...',
+}: SearchableModelComboboxProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const [highlightedIndex, setHighlightedIndex] = useState(0)
+  const [expandOther, setExpandOther] = useState(false)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+
+  // Focus search input on open
+  useEffect(() => {
+    if (isOpen) {
+      setSearch('')
+      setHighlightedIndex(0)
+      setTimeout(() => {
+        searchInputRef.current?.focus()
+      }, 50)
+    }
+  }, [isOpen])
+
+  // Close on click outside & reset expand on close
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside)
+    } else {
+      setExpandOther(false)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isOpen])
+
+  // Partition models into Popular & Other
+  const { popularList, otherList } = useMemo(() => {
+    const popularSet = new Set<string>(OPENROUTER_POPULAR_MODELS)
+    const popular: string[] = []
+    for (const pop of OPENROUTER_POPULAR_MODELS) {
+      if (models.includes(pop)) {
+        popular.push(pop)
+      }
+    }
+    const other = models.filter((m) => !popularSet.has(m))
+    return { popularList: popular, otherList: other }
+  }, [models])
+
+  // Filter with search query
+  const { filteredPopular, filteredOther } = useMemo(() => {
+    const q = search.trim().toLowerCase()
+    if (!q) {
+      return { filteredPopular: popularList, filteredOther: otherList }
+    }
+    return {
+      filteredPopular: popularList.filter((m) => m.toLowerCase().includes(q)),
+      filteredOther: otherList.filter((m) => m.toLowerCase().includes(q)),
+    }
+  }, [popularList, otherList, search])
+
+  // Auto expand when searching or manual toggle
+  const isOtherExpanded = Boolean(search.trim()) || expandOther
+
+  // Flatten for keyboard navigation
+  const flatItems = useMemo(() => {
+    const items: Array<{ type: 'model' | 'custom'; value: string; label: string }> = []
+    for (const m of filteredPopular) {
+      items.push({ type: 'model', value: m, label: m })
+    }
+    if (isOtherExpanded) {
+      for (const m of filteredOther) {
+        items.push({ type: 'model', value: m, label: m })
+      }
+    }
+    items.push({ type: 'custom', value: 'custom', label: 'Custom Model...' })
+    return items
+  }, [filteredPopular, filteredOther, isOtherExpanded])
+
+  // Scroll highlighted item into view
+  useEffect(() => {
+    if (!isOpen || !listRef.current) return
+    const el = listRef.current.querySelector(`[data-combobox-idx="${highlightedIndex}"]`) as HTMLElement | null
+    if (el) {
+      el.scrollIntoView({ block: 'nearest' })
+    }
+  }, [highlightedIndex, isOpen])
+
+  const handleSelect = (val: string) => {
+    onChange(val)
+    setIsOpen(false)
+  }
+
+  const handleCustomQuery = () => {
+    const trimmed = search.trim()
+    if (!trimmed) return
+    if (onCustomChange) {
+      onCustomChange(trimmed)
+    }
+    onChange('custom')
+    setIsOpen(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === 'Enter' || e.key === 'ArrowDown' || e.key === ' ') {
+        e.preventDefault()
+        setIsOpen(true)
+      }
+      return
+    }
+
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      setIsOpen(false)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setHighlightedIndex((prev) => (prev + 1 < flatItems.length ? prev + 1 : 0))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setHighlightedIndex((prev) => (prev - 1 >= 0 ? prev - 1 : flatItems.length - 1))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const item = flatItems[highlightedIndex]
+      if (item) {
+        handleSelect(item.value)
+      }
+    }
+  }
+
+  // Display text for closed trigger
+  const displayLabel = useMemo(() => {
+    if (value === 'custom') {
+      return customValue ? `Custom: ${customValue}` : 'Custom Model...'
+    }
+    if (value) {
+      return value
+    }
+    return placeholder
+  }, [value, customValue, placeholder])
+
+  const isCurrentFree = isFreeModel(value === 'custom' ? customValue || '' : value)
+
+  let itemIdxCounter = 0
+
+  return (
+    <div className="model-combobox-container" ref={containerRef}>
+      {/* Trigger Button */}
+      <button
+        type="button"
+        className={`model-combobox-trigger ${isOpen ? 'is-open' : ''}`}
+        onClick={() => setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
+      >
+        <div className="model-combobox-trigger-content">
+          <span className="model-combobox-trigger-text">{displayLabel}</span>
+          {isCurrentFree && (
+            <span className="model-tag-badge badge-free">Free</span>
+          )}
+        </div>
+        <svg
+          className={`model-combobox-chevron ${isOpen ? 'is-open' : ''}`}
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+
+      {/* Dropdown Popover */}
+      {isOpen && (
+        <div className="model-combobox-dropdown" onKeyDown={handleKeyDown}>
+          {/* Sticky Search Header */}
+          <div className="model-combobox-search-box">
+            <svg
+              className="combobox-search-icon"
+              width="13"
+              height="13"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2.2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+            <input
+              ref={searchInputRef}
+              type="text"
+              className="model-combobox-search-input"
+              placeholder="Search 300+ models or type to filter..."
+              value={search}
+              onChange={(e) => {
+                setSearch(e.target.value)
+                setHighlightedIndex(0)
+              }}
+            />
+            {search && (
+              <button
+                type="button"
+                className="combobox-clear-btn"
+                onClick={() => {
+                  setSearch('')
+                  setHighlightedIndex(0)
+                }}
+                title="Clear"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </svg>
+              </button>
+            )}
+          </div>
+
+          {/* List Area */}
+          <div className="model-combobox-list" ref={listRef} role="listbox">
+            {/* Quick Custom Option if search doesn't exactly match */}
+            {search.trim() && !models.includes(search.trim()) && (
+              <div
+                className="model-combobox-item custom-query-item"
+                onClick={handleCustomQuery}
+                role="option"
+                aria-selected={false}
+              >
+                <div className="combobox-item-left">
+                  <span className="combobox-item-name">Use custom model: <strong>{search.trim()}</strong></span>
+                </div>
+                <span className="combobox-custom-badge">Enter</span>
+              </div>
+            )}
+
+            {/* Popular & Recommended Group */}
+            {filteredPopular.length > 0 && (
+              <div className="model-combobox-group">
+                <div className="model-combobox-group-title">
+                  <span>★ Popular & Recommended</span>
+                </div>
+                {filteredPopular.map((m) => {
+                  const currIdx = itemIdxCounter++
+                  const isSelected = value === m
+                  const isHighlighted = highlightedIndex === currIdx
+                  const free = isFreeModel(m)
+                  return (
+                    <div
+                      key={m}
+                      data-combobox-idx={currIdx}
+                      className={`model-combobox-item ${isSelected ? 'is-selected' : ''} ${isHighlighted ? 'is-highlighted' : ''}`}
+                      onClick={() => handleSelect(m)}
+                      onMouseEnter={() => setHighlightedIndex(currIdx)}
+                      role="option"
+                      aria-selected={isSelected}
+                    >
+                      <div className="combobox-item-left">
+                        <div className="combobox-item-row">
+                          <span className="combobox-item-name">{m.split('/').pop() || m}</span>
+                          {free && <span className="model-tag-badge badge-free">Free</span>}
+                        </div>
+                        {m.includes('/') && <span className="combobox-item-repo">{m}</span>}
+                      </div>
+                      {isSelected && (
+                        <svg className="combobox-check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                          <polyline points="20 6 9 17 4 12" />
+                        </svg>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {/* Other models Group */}
+            {filteredOther.length > 0 && (
+              <div className="model-combobox-group">
+                <div className="model-combobox-group-title">
+                  <span>Other models ({filteredOther.length})</span>
+                </div>
+                {!isOtherExpanded ? (
+                  <div className="combobox-see-more-wrap">
+                    <button
+                      type="button"
+                      className="combobox-see-more-btn"
+                      onClick={() => setExpandOther(true)}
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                        <polyline points="6 9 12 15 18 9" />
+                      </svg>
+                      <span>Show all {filteredOther.length} other models</span>
+                    </button>
+                  </div>
+                ) : (
+                  <>
+                    {filteredOther.map((m) => {
+                      const currIdx = itemIdxCounter++
+                      const isSelected = value === m
+                      const isHighlighted = highlightedIndex === currIdx
+                      const free = isFreeModel(m)
+                      return (
+                        <div
+                          key={m}
+                          data-combobox-idx={currIdx}
+                          className={`model-combobox-item ${isSelected ? 'is-selected' : ''} ${isHighlighted ? 'is-highlighted' : ''}`}
+                          onClick={() => handleSelect(m)}
+                          onMouseEnter={() => setHighlightedIndex(currIdx)}
+                          role="option"
+                          aria-selected={isSelected}
+                        >
+                          <div className="combobox-item-left">
+                            <div className="combobox-item-row">
+                              <span className="combobox-item-name">{m.split('/').pop() || m}</span>
+                              {free && <span className="model-tag-badge badge-free">Free</span>}
+                            </div>
+                            {m.includes('/') && <span className="combobox-item-repo">{m}</span>}
+                          </div>
+                          {isSelected && (
+                            <svg className="combobox-check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                              <polyline points="20 6 9 17 4 12" />
+                            </svg>
+                          )}
+                        </div>
+                      )
+                    })}
+                    {!search.trim() && (
+                      <div className="combobox-see-more-wrap" style={{ marginTop: '4px' }}>
+                        <button
+                          type="button"
+                          className="combobox-see-more-btn collapse-btn"
+                          onClick={() => setExpandOther(false)}
+                        >
+                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                            <polyline points="18 15 12 9 6 15" />
+                          </svg>
+                          <span>Collapse other models</span>
+                        </button>
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
+
+            {/* Empty state */}
+            {filteredPopular.length === 0 && filteredOther.length === 0 && !search.trim() && (
+              <div className="model-combobox-empty">
+                <span>No models available</span>
+              </div>
+            )}
+
+            {/* Custom Model Option at bottom */}
+            {(() => {
+              const currIdx = itemIdxCounter++
+              const isSelected = value === 'custom'
+              const isHighlighted = highlightedIndex === currIdx
+              return (
+                <div
+                  data-combobox-idx={currIdx}
+                  className={`model-combobox-item custom-option-item ${isSelected ? 'is-selected' : ''} ${isHighlighted ? 'is-highlighted' : ''}`}
+                  onClick={() => handleSelect('custom')}
+                  onMouseEnter={() => setHighlightedIndex(currIdx)}
+                  role="option"
+                  aria-selected={isSelected}
+                >
+                  <div className="combobox-item-left">
+                    <span className="combobox-item-name">Custom...</span>
+                    <span className="combobox-item-repo">Enter a custom model identifier manually</span>
+                  </div>
+                  {isSelected && (
+                    <svg className="combobox-check-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  )}
+                </div>
+              )
+            })()}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}