@pheem49/mint 1.7.1 → 1.8.1

package/src/renderer/src-web/components/MintDashboard.tsx

@@ -5,6 +5,7 @@ import {
   deleteChatSession,
   renameChatSession,
   getRecentInteractions,
+  saveSystemInteraction,
   getRuntimeStatus,
   listChatSessions,
   listSavedPictures,
@@ -235,6 +236,79 @@ export default function MintDashboard() {
   const chatEnd = useRef<HTMLDivElement | null>(null)
   const startupReady = dashboardDataReady || startupTimedOut
 
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+        event.preventDefault()
+        setIsSearchOpen((prev) => !prev)
+      } else if (event.key === 'Escape') {
+        setIsSearchOpen(false)
+      }
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
+  useEffect(() => {
+    if (!isSearchOpen) {
+      setSearchQuery('')
+    }
+  }, [isSearchOpen])
+
+  const filteredSessions = chatSessions.filter((session) => {
+    if (session.kind === 'cli' || session.id === 'conversation-default') return false
+    return session.title.toLowerCase().includes(searchQuery.toLowerCase())
+  })
+
+  const groupSessionsByDate = (sessions: ChatSession[]) => {
+    const groups: { [key: string]: ChatSession[] } = {}
+    
+    sessions.forEach((session) => {
+      const dateStr = session.updatedAt || session.createdAt
+      if (!dateStr) {
+        const groupName = 'Other'
+        if (!groups[groupName]) groups[groupName] = []
+        groups[groupName].push(session)
+        return
+      }
+
+      const date = new Date(dateStr)
+      const today = new Date()
+      const yesterday = new Date()
+      yesterday.setDate(today.getDate() - 1)
+
+      let groupName = ''
+      if (date.toDateString() === today.toDateString()) {
+        groupName = 'Today'
+      } else if (date.toDateString() === yesterday.toDateString()) {
+        groupName = 'Yesterday'
+      } else {
+        const diffTime = Math.abs(today.getTime() - date.getTime())
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+        if (diffDays <= 7) {
+          groupName = 'Previous 7 days'
+        } else if (diffDays <= 30) {
+          groupName = 'Previous 30 days'
+        } else {
+          groupName = date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+        }
+      }
+
+      if (!groups[groupName]) {
+        groups[groupName] = []
+      }
+      groups[groupName].push(session)
+    })
+
+    return groups
+  }
+
+  const groupedSearchSessions = groupSessionsByDate(filteredSessions)
+
+
   async function refreshHistory() {
     const history = await getRecentInteractions(50, conversationId)
     const reversed = history.reverse()
@@ -310,6 +384,10 @@ export default function MintDashboard() {
   }
 
   const toggleSidebar = () => {
+    if (window.innerWidth <= 760) {
+      setMobileSidebarOpen(false)
+      return
+    }
     const next = !sidebarCollapsed
     window.localStorage.setItem('mint:sidebar-collapsed', String(next))
     setSidebarCollapsed(next)
@@ -326,10 +404,10 @@ export default function MintDashboard() {
     setAgentMode(enabled)
   }
 
-  async function handleApproval(approved: boolean, _autoApproveSession = false) {
+  async function handleApproval(approved: boolean, _autoApproveSession = false, answer?: string) {
     if (!pendingApproval) return
     try {
-      await submitToolApproval(pendingApproval.token, approved)
+      await submitToolApproval(pendingApproval.token, approved, answer)
     } catch (reason) {
       setError(errorMessage(reason))
     } finally {
@@ -664,6 +742,37 @@ export default function MintDashboard() {
     }
   }
 
+  function formatProviderChangeText(provider: string, model: string) {
+    let providerName = provider
+    if (provider === 'gemini') providerName = 'Gemini'
+    else if (provider === 'openai') providerName = 'OpenAI'
+    else if (provider === 'openrouter') providerName = 'OpenRouter'
+    else if (provider === 'deepseek') providerName = 'DeepSeek'
+    else if (provider === 'anthropic') providerName = 'Claude'
+    else if (provider === 'huggingface') providerName = 'HF'
+    else if (provider === 'local_openai') providerName = 'Local'
+    else if (provider === 'ollama') providerName = 'Ollama'
+
+    if (providerName && providerName === provider) {
+      providerName = providerName.charAt(0).toUpperCase() + providerName.slice(1)
+    }
+    return [providerName, model].filter(Boolean).join(' • ')
+  }
+
+  function getActiveModelName(config: any, provider: string) {
+    switch (provider) {
+      case 'gemini': return config.geminiModel || 'gemini-1.5-flash'
+      case 'openai': return config.openaiModel || 'gpt-4o'
+      case 'openrouter': return config.openrouterModel || 'anthropic/claude-3.5-sonnet'
+      case 'deepseek': return config.deepseekModel || 'deepseek-chat'
+      case 'anthropic': return config.anthropicModel || 'claude-3-5-sonnet-20240620'
+      case 'huggingface': return config.hfModel || 'meta-llama/Meta-Llama-3-8B-Instruct'
+      case 'local_openai': return config.localModelName || 'llama3'
+      case 'ollama': return config.ollamaModel || 'llama3:latest'
+      default: return ''
+    }
+  }
+
   async function changeProvider(provider: string) {
     try {
       const config = await window.settingsApi.getSettings()
@@ -671,6 +780,12 @@ export default function MintDashboard() {
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
       setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history
+      const activeModel = getActiveModelName(config, provider)
+      const displayName = formatProviderChangeText(provider, activeModel)
+      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -700,6 +815,11 @@ export default function MintDashboard() {
       await window.settingsApi.saveSettings(config)
       setSettingsConfig(config)
       setStatus(await getRuntimeStatus())
+
+      // Record system event in chat history
+      const displayName = formatProviderChangeText(provider, modelName)
+      await saveSystemInteraction(conversationId, displayName, 'system', 'provider_change')
+      await refreshHistory()
     } catch (reason) {
       setError(errorMessage(reason))
     }
@@ -709,7 +829,7 @@ export default function MintDashboard() {
 
   return (
     <div className={`app-container ${startupReady ? '' : 'is-loading'}`}>
-      <div className={`app-body ${sidebarCollapsed ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''}`}>
+      <div className={`app-body ${(sidebarCollapsed && window.innerWidth > 760) ? 'sidebar-collapsed' : ''} ${view === 'pictures' ? 'pictures-open' : ''} ${mobileSidebarOpen ? 'mobile-sidebar-open' : ''}`}>
         {mobileSidebarOpen && (
           <div
             className="sidebar-backdrop"
@@ -738,6 +858,8 @@ export default function MintDashboard() {
           onDeleteConversation={deleteConversation}
           onRenameConversation={renameConversation}
           onSetView={changeView}
+          isSearchOpen={isSearchOpen}
+          onSetSearchOpen={setIsSearchOpen}
         />
         <main className="assistant-workspace model-hidden">
           <ChatPanel
@@ -790,6 +912,7 @@ export default function MintDashboard() {
             setView('chat')
             setMessage(imgPrompt)
           }}
+          onToggleMobileSidebar={() => setMobileSidebarOpen(!mobileSidebarOpen)}
         />
       </div>
       <div className={`startup-loading ${startupReady ? 'is-hidden' : ''}`} aria-live="polite" aria-busy={!startupReady}>
@@ -804,6 +927,77 @@ export default function MintDashboard() {
           <button onClick={() => setError('')} style={{ marginLeft: '12px', background: 'transparent', border: 0, color: 'white', cursor: 'pointer' }}>✕</button>
         </div>
       )}
+
+      {isSearchOpen && (
+        <div className="sidebar-search-modal-backdrop" onClick={() => setIsSearchOpen(false)}>
+          <div className="sidebar-search-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="search-modal-header">
+              <span className="search-icon-wrapper">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <circle cx="11" cy="11" r="8"></circle>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                </svg>
+              </span>
+              <input
+                type="text"
+                placeholder="Search chats..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                autoFocus
+              />
+              <button className="search-modal-close" onClick={() => setIsSearchOpen(false)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+            
+            <div className="search-modal-body">
+              <button
+                className="search-new-chat-btn"
+                onClick={() => {
+                  clearHistory('New chat')
+                  setIsSearchOpen(false)
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="12" y1="5" x2="12" y2="19"></line>
+                  <line x1="5" y1="12" x2="19" y2="12"></line>
+                </svg>
+                <span>New Chat</span>
+              </button>
+
+              <div className="search-modal-results">
+                {Object.keys(groupedSearchSessions).length > 0 ? (
+                  Object.entries(groupedSearchSessions).map(([groupName, sessions]) => (
+                    <div key={groupName} className="search-results-group">
+                      <div className="search-group-title">{groupName}</div>
+                      {sessions.map((session) => (
+                        <button
+                          key={session.id}
+                          className={`search-result-item ${session.id === conversationId ? 'active' : ''}`}
+                          onClick={() => {
+                            selectConversation(session.id)
+                            setIsSearchOpen(false)
+                          }}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                          </svg>
+                          <span className="search-result-title">{session.title || 'New chat'}</span>
+                        </button>
+                      ))}
+                    </div>
+                  ))
+                ) : (
+                  <div className="search-no-results">No matching chats found</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }

package/src/renderer/src-web/components/PicturesLibrary.tsx

@@ -39,10 +39,8 @@ export default function PicturesLibrary({ view, pictures, onSetView, onRefreshPi
     return () => window.clearTimeout(timer)
   }, [view, pictures.length, visibleCount])
 
-  if (view !== 'pictures') return null
-
   return (
-    <section className="pictures-library">
+    <section className={`pictures-library ${view === 'pictures' ? 'is-visible' : ''}`} aria-hidden={view !== 'pictures'}>
       <header className="pictures-header">
         <div><span className="pictures-kicker">Gallery</span><h2>Saved Pictures</h2></div>
         <div className="pictures-header-actions">

package/src/renderer/src-web/components/Settings/AudioTab.tsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { DEFAULT_CONFIG } from '../SettingsWindow'
+
+interface AudioTabProps {
+  config: typeof DEFAULT_CONFIG
+  updateField: (field: keyof typeof DEFAULT_CONFIG, value: any) => void
+}
+
+export default function AudioTab({ config, updateField }: AudioTabProps) {
+  return (
+    <div className="tab-pane active">
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Speech</p>
+            <h2 className="section-title">Voice Reply</h2>
+          </div>
+          <p className="section-description">Control spoken responses and TTS behavior.</p>
+        </div>
+
+        <div className="toggle-row">
+          <div>
+            <label>Enable Voice Reply</label>
+            <p className="hint">Mint will speak responses out loud when this is enabled.</p>
+          </div>
+          <label className="settings-toggle-switch">
+            <input 
+              type="checkbox" 
+              checked={config.enableVoiceReply} 
+              onChange={(e) => updateField('enableVoiceReply', e.target.checked)} 
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+
+        <div className="form-grid single">
+          <div className="setting-row">
+            <label>Voice Engine</label>
+            <select value={config.ttsProvider} onChange={(e) => updateField('ttsProvider', e.target.value)}>
+              <option value="google">Google Cloud (Natural, Auto Lang)</option>
+              <option value="native">OS Native (Supports Pitch)</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="slider-stack">
+          <div className="setting-row">
+            <label>Volume</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0" 
+                max="1" 
+                step="0.1" 
+                value={config.ttsVolume} 
+                onChange={(e) => updateField('ttsVolume', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{Math.round(config.ttsVolume * 100)}%</span>
+            </div>
+          </div>
+          <div className="setting-row">
+            <label>Speed</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0.5" 
+                max="2" 
+                step="0.1" 
+                value={config.ttsSpeed} 
+                onChange={(e) => updateField('ttsSpeed', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{parseFloat(String(config.ttsSpeed)).toFixed(1)}x</span>
+            </div>
+          </div>
+          <div className="setting-row">
+            <label>Pitch</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="0" 
+                max="2" 
+                step="0.1" 
+                value={config.ttsPitch} 
+                onChange={(e) => updateField('ttsPitch', parseFloat(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{parseFloat(String(config.ttsPitch)).toFixed(1)}</span>
+            </div>
+            <p className="hint">Pitch applies to OS native voice only.</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/src/renderer/src-web/components/Settings/AutomationTab.tsx

@@ -0,0 +1,196 @@
+import React from 'react'
+import { DEFAULT_CONFIG } from '../SettingsWindow'
+
+interface AutomationTabProps {
+  config: typeof DEFAULT_CONFIG
+  updateField: (field: keyof typeof DEFAULT_CONFIG, value: any) => void
+  handleOpenWorkflows: () => void
+  handleReloadWorkflows: () => void
+  isDesktopApp?: boolean
+}
+
+export default function AutomationTab({
+  config,
+  updateField,
+  handleOpenWorkflows,
+  handleReloadWorkflows,
+  isDesktopApp = false
+}: AutomationTabProps) {
+  return (
+    <div className="tab-pane active">
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Browser</p>
+            <h2 className="section-title">Automation Engine</h2>
+          </div>
+        </div>
+        <div className="form-grid single">
+          <div className="setting-row">
+            <label>Browser Engine</label>
+            <select value={config.automationBrowser} onChange={(e) => updateField('automationBrowser', e.target.value)}>
+              <option value="chromium">Chromium (Bundled)</option>
+              <option value="/usr/bin/firefox">Firefox (System - Linux)</option>
+            </select>
+          </div>
+          <div className="setting-row">
+            <label>Chromium DevTools Endpoint</label>
+            <input type="text" value={config.browserDebugUrl} onChange={(e) => updateField('browserDebugUrl', e.target.value)} />
+            <p className="hint">Required for native tab reading and selector clicks.</p>
+          </div>
+          <div className="setting-row">
+            <label>Browser Extension Context Endpoint</label>
+            <input type="text" value={config.browserExtensionContextUrl} onChange={(e) => updateField('browserExtensionContextUrl', e.target.value)} />
+            <p className="hint">Fallback endpoint used when Chromium remote debugging is unavailable.</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Background tasks</p>
+            <h2 className="section-title">Native Headless Queue</h2>
+          </div>
+        </div>
+        <div className="toggle-row">
+          <div>
+            <label>Process queued tasks automatically</label>
+            <p className="hint">Allow the bounded Rust worker to process pending tasks every 15 seconds.</p>
+          </div>
+          <label className="settings-toggle-switch">
+            <input
+              type="checkbox"
+              checked={config.enableHeadlessTaskQueue}
+              onChange={(e) => updateField('enableHeadlessTaskQueue', e.target.checked)}
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+      </section>
+
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Awareness</p>
+            <h2 className="section-title">Proactive Assistant</h2>
+          </div>
+          <p className="section-description">Tune screen analysis frequency and suggestion timing.</p>
+        </div>
+        <div className="slider-stack">
+          <div className="setting-row">
+            <label>Screen Capture Frequency</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="30" 
+                max="300" 
+                step="30" 
+                value={config.proactiveInterval} 
+                onChange={(e) => updateField('proactiveInterval', parseInt(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{config.proactiveInterval} sec</span>
+            </div>
+            <p className="hint">Lower values respond faster but use more API calls.</p>
+          </div>
+          <div className="setting-row">
+            <label>Suggestion Cooldown</label>
+            <div className="slider-group">
+              <input 
+                type="range" 
+                min="60" 
+                max="600" 
+                step="60" 
+                value={config.proactiveCooldown} 
+                onChange={(e) => updateField('proactiveCooldown', parseInt(e.target.value))} 
+                className="range-slider" 
+              />
+              <span className="range-value">{Math.round(config.proactiveCooldown / 60)} min</span>
+            </div>
+            <p className="hint">Minimum time between repeat suggestions.</p>
+          </div>
+        </div>
+      </section>
+
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Messaging</p>
+            <h2 className="section-title">Native Channel Bridges</h2>
+          </div>
+          <p className="section-description">Configure credentials used directly by the Rust channel workers.</p>
+        </div>
+        <div className="form-grid">
+          <label className="toggle-row"><span>Telegram Bot API</span><input type="checkbox" checked={config.enableTelegramBridge} onChange={(e) => updateField('enableTelegramBridge', e.target.checked)} /></label>
+          <input type="password" placeholder="Telegram bot token" value={config.telegramBotToken} onChange={(e) => updateField('telegramBotToken', e.target.value)} />
+          <label className="toggle-row"><span>Discord Gateway</span><input type="checkbox" checked={config.enableDiscordBridge} onChange={(e) => updateField('enableDiscordBridge', e.target.checked)} /></label>
+          <input type="password" placeholder="Discord bot token" value={config.discordBotToken} onChange={(e) => updateField('discordBotToken', e.target.value)} />
+          <input type="text" placeholder="Discord application ID for Rich Presence" value={config.discordApplicationId} onChange={(e) => updateField('discordApplicationId', e.target.value)} />
+          <label className="toggle-row"><span>Slack Socket Mode</span><input type="checkbox" checked={config.enableSlackBridge} onChange={(e) => updateField('enableSlackBridge', e.target.checked)} /></label>
+          <input type="password" placeholder="Slack bot token (xoxb-...)" value={config.slackBotToken} onChange={(e) => updateField('slackBotToken', e.target.value)} />
+          <input type="password" placeholder="Slack app token (xapp-...)" value={config.slackAppToken} onChange={(e) => updateField('slackAppToken', e.target.value)} />
+          <label className="toggle-row"><span>LINE Webhook</span><input type="checkbox" checked={config.enableLineBridge} onChange={(e) => updateField('enableLineBridge', e.target.checked)} /></label>
+          <input type="password" placeholder="LINE channel access token" value={config.lineChannelAccessToken} onChange={(e) => updateField('lineChannelAccessToken', e.target.value)} />
+          <input type="password" placeholder="LINE channel secret" value={config.lineChannelSecret} onChange={(e) => updateField('lineChannelSecret', e.target.value)} />
+          <label className="toggle-row"><span>WhatsApp Cloud API</span><input type="checkbox" checked={config.enableWhatsappBridge} onChange={(e) => updateField('enableWhatsappBridge', e.target.checked)} /></label>
+          <input type="password" placeholder="WhatsApp Cloud access token" value={config.whatsappCloudAccessToken} onChange={(e) => updateField('whatsappCloudAccessToken', e.target.value)} />
+          <input type="text" placeholder="WhatsApp phone number ID" value={config.whatsappPhoneNumberId} onChange={(e) => updateField('whatsappPhoneNumberId', e.target.value)} />
+          <input type="password" placeholder="WhatsApp verify token" value={config.whatsappVerifyToken} onChange={(e) => updateField('whatsappVerifyToken', e.target.value)} />
+          <input type="password" placeholder="WhatsApp app secret (optional HMAC validation)" value={config.whatsappAppSecret} onChange={(e) => updateField('whatsappAppSecret', e.target.value)} />
+        </div>
+      </section>
+
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Rules</p>
+            <h2 className="section-title">Custom Workflows</h2>
+          </div>
+        </div>
+        <div className="toggle-row">
+          <div>
+            <label>Enable Custom Workflows</label>
+            <p className="hint">Run "If This Then Mint" rules from the workflow JSON file.</p>
+          </div>
+          <label className="settings-toggle-switch">
+            <input 
+              type="checkbox" 
+              checked={config.enableCustomWorkflows} 
+              onChange={(e) => updateField('enableCustomWorkflows', e.target.checked)} 
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+        <div className="button-row" style={{ display: 'flex', gap: '10px', marginTop: '10px' }}>
+          <button className="btn btn-secondary" onClick={handleOpenWorkflows} disabled={!isDesktopApp}>Open workflows.json</button>
+          <button className="btn btn-primary" onClick={handleReloadWorkflows} disabled={!isDesktopApp}>Reload Rules</button>
+        </div>
+        {!isDesktopApp && <p className="hint">Opening and reloading local workflow files requires the desktop app.</p>}
+      </section>
+
+      <section className="setting-section">
+        <div className="section-heading">
+          <div>
+            <p className="section-kicker">Code mode</p>
+            <h2 className="section-title">Agent Collaboration</h2>
+          </div>
+        </div>
+        <div className="toggle-row">
+          <div>
+            <label>Enable Multi-Agent Review</label>
+            <p className="hint">Allow a secondary model to review code written by the primary model.</p>
+          </div>
+          <label className="settings-toggle-switch">
+            <input 
+              type="checkbox" 
+              checked={config.enableAgentCollaboration} 
+              onChange={(e) => updateField('enableAgentCollaboration', e.target.checked)} 
+            />
+            <span className="settings-toggle-slider"></span>
+          </label>
+        </div>
+      </section>
+    </div>
+  )
+}