@pheem49/mint 1.7.1 → 1.8.1

package/src/renderer/src/tauri.ts

@@ -128,6 +128,28 @@ export async function getRuntimeStatus(): Promise<RuntimeStatus> {
   return invoke<RuntimeStatus>('get_runtime_status')
 }
 
+export interface DetectedTools {
+  docker: boolean
+  git: boolean
+  gh: boolean
+  node: boolean
+}
+
+export async function detectSystemTools(): Promise<DetectedTools> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    const API_BASE = "http://localhost:3000/api";
+    try {
+      const res = await fetch(`${API_BASE}/detect-tools`);
+      return await res.json();
+    } catch (e) {
+      console.error("Failed to detect tools from local server:", e);
+      return { docker: false, git: false, gh: false, node: false };
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<DetectedTools>('detect_system_tools')
+}
+
 export async function sendChatMessage(
   message: string,
   imageDataUri?: string | null,
@@ -282,6 +304,30 @@ export async function getRecentInteractions(limit = 50, chatId?: string | null):
   return invoke<InteractionMemory[]>('get_recent_interactions', { limit, chatId })
 }
 
+export async function saveSystemInteraction(
+  chatId: string,
+  userText: string,
+  provider: string,
+  model: string,
+): Promise<any> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    const API_BASE = "http://localhost:3000/api";
+    try {
+      const res = await fetch(`${API_BASE}/interactions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ chatId, userText, provider, model }),
+      });
+      return await res.json();
+    } catch (e) {
+      console.error("Failed to save system interaction on local server:", e);
+      return { success: false };
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke('save_system_interaction', { chatId, userText, provider, model })
+}
+
 export async function saveInteractionAgentActivity(
   interactionId: number,
   activity: AgentProgress[],
@@ -396,6 +442,72 @@ export async function setProfileValue(key: string, value: string): Promise<boole
   return invoke<void>('set_profile_value', { key, value }).then(() => true).catch(() => false)
 }
 
+export interface LearnedSkill {
+  id: number
+  name: string
+  sourcePath: string
+  content: string
+  updatedAt: string
+  location?: string
+}
+
+export async function listLearnedSkills(workspacePath?: string): Promise<LearnedSkill[]> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    try {
+      const val = await getProfileValue('learned-skills-web-mock')
+      if (val) {
+        return JSON.parse(val)
+      }
+      return []
+    } catch (e) {
+      console.error("Failed to load web mock skills:", e)
+      return []
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<LearnedSkill[]>('list_learned_skills', { workspacePath })
+}
+
+export async function addLearnedSkill(name: string, content: string): Promise<LearnedSkill> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    try {
+      const list = await listLearnedSkills()
+      const newSkill: LearnedSkill = {
+        id: Date.now(),
+        name,
+        sourcePath: 'ui_manual',
+        content,
+        updatedAt: new Date().toISOString()
+      }
+      list.push(newSkill)
+      await setProfileValue('learned-skills-web-mock', JSON.stringify(list))
+      return newSkill
+    } catch (e) {
+      console.error("Failed to add web mock skill:", e)
+      throw e
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<LearnedSkill>('add_learned_skill', { name, content })
+}
+
+export async function deleteLearnedSkill(name: string): Promise<number> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
+    try {
+      const list = await listLearnedSkills()
+      const filtered = list.filter(s => s.name !== name)
+      const deletedCount = list.length - filtered.length
+      await setProfileValue('learned-skills-web-mock', JSON.stringify(filtered))
+      return deletedCount
+    } catch (e) {
+      console.error("Failed to delete web mock skill:", e)
+      return 0
+    }
+  }
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke<number>('delete_learned_skill', { name })
+}
+
 export async function clearChatHistory(chatId?: string | null): Promise<number> {
   if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
     const API_BASE = "http://localhost:3000/api";
@@ -558,6 +670,24 @@ export async function getWorkspaceTree(path?: string | null): Promise<WorkspaceT
   return invoke<WorkspaceTreeEntry>('get_workspace_tree', { path })
 }
 
+export async function createWorkspaceFile(path: string): Promise<void> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) return
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke('create_workspace_file', { path })
+}
+
+export async function createWorkspaceFolder(path: string): Promise<void> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) return
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke('create_workspace_folder', { path })
+}
+
+export async function deleteWorkspaceItem(path: string): Promise<void> {
+  if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) return
+  const { invoke } = await import('@tauri-apps/api/core')
+  return invoke('delete_workspace_item', { path })
+}
+
 export async function selectWorkspaceDirectory(): Promise<string | null> {
   if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
     return null
@@ -567,12 +697,12 @@ export async function selectWorkspaceDirectory(): Promise<string | null> {
   return selected?.trim() || null
 }
 
-export async function submitToolApproval(token: string, approved: boolean): Promise<void> {
+export async function submitToolApproval(token: string, approved: boolean, answer?: string): Promise<void> {
   if (typeof window === 'undefined' || !(window as any).__TAURI_INTERNALS__) {
     return;
   }
   const { invoke } = await import('@tauri-apps/api/core')
-  return invoke('submit_tool_approval', { token, approved })
+  return invoke('submit_tool_approval', { token, approved, answer })
 }
 
 export async function proposeCodeEdits(root: string, edits: CodeEdit[]): Promise<CodeEditProposal> {
@@ -889,6 +1019,10 @@ export function installTauriAdapters() {
       const { invoke } = await import('@tauri-apps/api/core')
       return invoke('reload_custom_workflows')
     },
+    saveCustomWorkflows: async (workflows) => {
+      const { invoke } = await import('@tauri-apps/api/core')
+      return invoke('save_custom_workflows', { workflows })
+    },
   }
 
   window.spotlightAPI = {
@@ -1015,6 +1149,10 @@ export function installTauriAdapters() {
       const { invoke } = await import('@tauri-apps/api/core')
       return invoke('open_window', { kind: 'settings' })
     },
+    openWorkflows: async () => {
+      const { invoke } = await import('@tauri-apps/api/core')
+      return invoke('open_window', { kind: 'workflows' })
+    },
     readClipboard: () => navigator.clipboard.readText(),
     writeClipboard: (text) => navigator.clipboard.writeText(text),
     getSystemInfo: async () => ({ backend: 'rust' }),

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

@@ -68,15 +68,7 @@ const LOCAL_MODELS = [
   'lmstudio-community/gemma-2-9b-it-GGUF'
 ]
 
-const OLLAMA_MODELS = [
-  'llama3:latest',
-  'llama3.1:latest',
-  'llama3.2:latest',
-  'gemma2:latest',
-  'mistral:latest',
-  'phi3:latest',
-  'qwen2.5:latest'
-]
+const OLLAMA_MODELS: string[] = []
 
 interface ApprovalDetails {
   title: string
@@ -122,6 +114,7 @@ interface AgentActivity {
   target: string
   kind: 'file' | 'folder' | 'search' | 'terminal' | 'tool'
   state: 'active' | 'done' | 'error'
+  action?: string
 }
 
 interface AgentActivityView {
@@ -153,7 +146,20 @@ function describeTool(action: string, input: Record<string, unknown>): AgentActi
   const command = activityDetail(input, 'command')
   const name = activityDetail(input, 'name')
   const tool = activityDetail(input, 'tool')
-  const target = path || query || command || name || tool || action.replaceAll('_', ' ')
+  const rawTarget = path || query || command || name || tool || action.replaceAll('_', ' ')
+
+  // Append line range for read_file when startLine / endLine are available
+  let target = rawTarget
+  if (action === 'read_file' && path) {
+    const startLine = typeof input.startLine === 'number' ? input.startLine : undefined
+    const endLine = typeof input.endLine === 'number' ? input.endLine : undefined
+    if (startLine !== undefined && endLine !== undefined) {
+      target = `${rawTarget} #L${startLine}-${endLine}`
+    } else if (startLine !== undefined) {
+      target = `${rawTarget} #L${startLine}`
+    }
+  }
+
   const labels: Record<string, string> = {
     apply_patch: 'Applying patch',
     ask_user: 'Asking user',
@@ -189,6 +195,7 @@ function describeTool(action: string, input: Record<string, unknown>): AgentActi
     target: formatActivityTarget(target),
     kind: activityKind(action, target),
     state: 'active',
+    action,
   }
 }
 
@@ -215,7 +222,13 @@ function activitiesFrom(progress: AgentProgress[]): AgentActivityView {
       for (let index = activities.length - 1; index >= 0; index -= 1) {
         if (activities[index].state !== 'active') continue
         activities[index].state = event.data.result.startsWith('Error:') ? 'error' : 'done'
-        if (activities[index].state === 'error') activities[index].label = 'Failed'
+        if (activities[index].state === 'error') {
+          activities[index].label = 'Failed'
+        }
+        if (activities[index].action === 'ask_user' && event.data.result.startsWith('User answered:')) {
+          const answer = event.data.result.replace('User answered:', '').trim()
+          activities[index].target = `(Answered: "${answer}") ${activities[index].target}`
+        }
         break
       }
     }
@@ -224,7 +237,16 @@ function activitiesFrom(progress: AgentProgress[]): AgentActivityView {
   return { summary: activitySummary(activities), items }
 }
 
-function renderAgentActivityTable(activityView: AgentActivityView) {
+function AgentActivityTable({ activityView }: { activityView: AgentActivityView }) {
+  const [expandedIndices, setExpandedIndices] = useState<Record<number, boolean>>({})
+
+  const toggleExpand = (index: number) => {
+    setExpandedIndices(prev => ({
+      ...prev,
+      [index]: !prev[index]
+    }))
+  }
+
   return (
     <div className="agent-activity-list">
       <div className="agent-activity-table-head" aria-hidden="true">
@@ -233,14 +255,39 @@ function renderAgentActivityTable(activityView: AgentActivityView) {
         <span>Target</span>
         <span />
       </div>
-      {activityView.items.map((activity, index) => (
-        <div className="agent-activity-item" data-kind={activity.kind} data-state={activity.state} key={`${index}-${activity.label}-${activity.target}`}>
-          <span className="agent-activity-label">{activity.label}</span>
-          <span className="agent-activity-icon" aria-hidden="true" />
-          <span className="agent-activity-text">{activity.target}</span>
-          <span className="agent-activity-chevron" aria-hidden="true">&gt;</span>
-        </div>
-      ))}
+      {activityView.items.map((activity, index) => {
+        const isExpanded = !!expandedIndices[index]
+        return (
+          <div 
+            className="agent-activity-item" 
+            data-kind={activity.kind} 
+            data-state={activity.state} 
+            key={`${index}-${activity.label}-${activity.target}`}
+            style={{ cursor: 'pointer' }}
+            onClick={() => toggleExpand(index)}
+          >
+            <span className="agent-activity-label">{activity.label}</span>
+            <span className="agent-activity-icon" aria-hidden="true" />
+            <span 
+              className="agent-activity-text" 
+              style={isExpanded ? { whiteSpace: 'normal', wordBreak: 'break-all', overflow: 'visible', textOverflow: 'clip' } : undefined}
+            >
+              {activity.target}
+            </span>
+            <span 
+              className="agent-activity-chevron" 
+              style={{ 
+                transform: isExpanded ? 'rotate(90deg)' : 'none', 
+                transition: 'transform 0.2s ease',
+                display: 'inline-block'
+              }}
+              aria-hidden="true"
+            >
+              &gt;
+            </span>
+          </div>
+        )
+      })}
     </div>
   )
 }
@@ -257,7 +304,7 @@ function renderApprovalDetails(approval: any): ApprovalDetails {
     return { title: `Run MCP Tool: ${server}/${tool}`, body: typeof args === 'string' ? args : JSON.stringify(args, null, 2), reason: 'Running external MCP tool.', isDangerous: false }
   }
   if (approval.UserApproval) return { title: approval.UserApproval.title, body: approval.UserApproval.prompt, reason: 'The agent requested explicit approval.', isDangerous: false }
-  if (approval.AskUser) return { title: 'Question From Agent', body: approval.AskUser.question, reason: 'Approve to continue without a typed answer, or cancel to decline.', isDangerous: false }
+  if (approval.AskUser) return { title: 'Question From Agent', body: approval.AskUser.question, reason: 'Type your answer below and submit to respond to the agent.', isDangerous: false }
   return { title: 'Unknown Action', body: JSON.stringify(approval, null, 2), reason: 'Requires approval to proceed.', isDangerous: false }
 }
 
@@ -353,7 +400,7 @@ interface ChatPanelProps {
   onSetSmartContext: (enabled: boolean) => void
   onSetAgentMode: (enabled: boolean) => void
   onSetProvider: (provider: string) => void
-  onApproval: (approved: boolean, autoApproveSession?: boolean) => void
+  onApproval: (approved: boolean, autoApproveSession?: boolean, answer?: string) => void
   onToggleMobileSidebar: () => void
   settingsConfig: any
   onSetModel: (model: string) => void
@@ -449,7 +496,17 @@ function renderFormattedMessage(text: string) {
             </strong>
           )
         }
-        return boldPart
+        const mentionParts = boldPart.split(/(@[\w\-\.\/]+)/g)
+        return mentionParts.map((mentionPart, mentionIndex) => {
+          if (mentionIndex % 2 === 1) {
+            return (
+              <span key={`mention-${mentionIndex}`} className="chat-mention">
+                {mentionPart}
+              </span>
+            )
+          }
+          return mentionPart
+        })
       })
     })
   }
@@ -975,6 +1032,34 @@ export default function ChatPanel({
   const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
   const [toolMenuOpen, setToolMenuOpen] = useState(false)
   const toolMenuRef = useRef<HTMLDivElement | null>(null)
+  const [dynamicOllamaModels, setDynamicOllamaModels] = useState<string[]>(OLLAMA_MODELS)
+  const [askAnswer, setAskAnswer] = useState('')
+
+  useEffect(() => {
+    setAskAnswer('')
+  }, [pendingApproval])
+
+  useEffect(() => {
+    const fetchOllamaModels = async () => {
+      if (status?.activeProvider !== 'ollama') return;
+      const host = settingsConfig?.ollamaHost || 'http://localhost:11434';
+      const cleanHost = host.endsWith('/') ? host.slice(0, -1) : host;
+      try {
+        const res = await fetch(`${cleanHost}/api/tags`);
+        if (res.ok) {
+          const data = await res.json();
+          if (data && Array.isArray(data.models)) {
+            setDynamicOllamaModels(data.models.map((m: any) => m.name));
+            return;
+          }
+        }
+      } catch (err) {
+        // fallback to default if fetch fails
+      }
+      setDynamicOllamaModels(OLLAMA_MODELS);
+    }
+    fetchOllamaModels();
+  }, [status?.activeProvider, settingsConfig?.ollamaHost])
   const canSubmit = Boolean(message.trim() || imageAttachments.length > 0 || documentName)
   const sendingImageMarkers = Array.from({ length: sendingImageCount }, (_, index) => `[Image #${index + 1}]`).join(' ')
 
@@ -995,7 +1080,7 @@ export default function ChatPanel({
       case 'local_openai':
         return LOCAL_MODELS
       case 'ollama':
-        return OLLAMA_MODELS
+        return dynamicOllamaModels
       default:
         return []
     }
@@ -1543,7 +1628,7 @@ export default function ChatPanel({
         </button>
         {isOpen && (
           <div className="agent-activity-card agent-activity-card-history">
-            {renderAgentActivityTable(activityView)}
+            <AgentActivityTable activityView={activityView} />
           </div>
         )}
       </div>
@@ -1798,21 +1883,33 @@ export default function ChatPanel({
       )}
 
       <div className="chat-container">
-        {interactions.map((interaction) => (
-          <div key={interaction.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
-            {interaction.isSystemEvent ? (
-              <div className="system-event" style={{ background: 'rgba(16, 185, 129, 0.06)', border: '1px solid rgba(16, 185, 129, 0.2)', borderRadius: '8px', padding: '10px 14px', color: '#a7f3d0', fontSize: '0.82rem', lineHeight: '1.45', alignSelf: 'stretch' }}>
-                {interaction.userText}
-              </div>
-            ) : interaction.userText && (
-              <div className="message user-message">
-                <div className="bubble-wrapper">
-                  <div className="message-bubble">{renderFormattedMessage(interaction.userText)}</div>
-                  <div className="message-time"><span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span></div>
+        {interactions.map((interaction) => {
+          const isSystemEvent = interaction.provider === 'system' && interaction.model === 'provider_change';
+          if (isSystemEvent) {
+            return (
+              <div key={interaction.id} className="system-event-divider">
+                <div className="system-event-line" />
+                <div className="system-event-pill">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" />
+                  </svg>
+                  <span>{interaction.userText}</span>
                 </div>
+                <div className="system-event-line" />
               </div>
-            )}
-            <div className="message ai-message">
+            );
+          }
+          return (
+            <div key={interaction.id} style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
+              {interaction.userText && (
+                <div className="message user-message">
+                  <div className="bubble-wrapper">
+                    <div className="message-bubble">{renderFormattedMessage(interaction.userText)}</div>
+                    <div className="message-time"><span>{new Date(interaction.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span></div>
+                  </div>
+                </div>
+              )}
+              <div className="message ai-message">
               <div className="bubble-wrapper">
                 {renderCompletedActivity(interaction)}
                 {renderFileChanges(interaction)}
@@ -1858,7 +1955,8 @@ export default function ChatPanel({
               </div>
             </div>
           </div>
-        ))}
+        );
+      })}
 
         {sending && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
@@ -1872,7 +1970,7 @@ export default function ChatPanel({
                       {pendingApproval ? 'Waiting for approval' : 'Working'}
                     </span>
                   </div>
-                  {renderAgentActivityTable(agentActivities)}
+                  <AgentActivityTable activityView={agentActivities} />
                 </div>
               </div>
             )}
@@ -1954,6 +2052,7 @@ export default function ChatPanel({
           const writeFile = pendingApproval.approval?.WriteFile
           const applyPatch = pendingApproval.approval?.ApplyPatch
           const diffText = writeFile?.diff || applyPatch?.diff
+          const isAskUser = !!pendingApproval.approval?.AskUser
 
           return (
             <div className="message ai-message" style={{ width: '100%' }}>
@@ -1970,12 +2069,54 @@ export default function ChatPanel({
                     ) : (
                       details.reason && <div className="approval-card-reason" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace' }}>{details.reason}</div>
                     )}
+                    {isAskUser && (
+                      <div className="approval-card-input-container" style={{ marginTop: '12px', width: '100%' }}>
+                        <textarea
+                          style={{
+                            width: '100%',
+                            minHeight: '70px',
+                            padding: '10px',
+                            background: 'rgba(0, 0, 0, 0.2)',
+                            border: '1px solid rgba(255, 255, 255, 0.1)',
+                            borderRadius: '6px',
+                            color: 'var(--text-main, #f8fafc)',
+                            fontSize: '0.9rem',
+                            fontFamily: 'inherit',
+                            resize: 'vertical',
+                            outline: 'none',
+                          }}
+                          placeholder="Type your answer here..."
+                          value={askAnswer}
+                          onChange={(e) => setAskAnswer(e.target.value)}
+                        />
+                      </div>
+                    )}
                   </div>
-                  <div className="approval-card-actions">
-                    <button type="button" className="approval-btn approval-btn-approve" onClick={() => onApproval(true)}>Approve</button>
-                    <button type="button" className="approval-btn" style={{ backgroundColor: 'rgba(16, 185, 129, 0.22)', borderColor: 'rgba(16, 185, 129, 0.4)', color: '#a7f3d0' }} onClick={() => onApproval(true, true)}>Approve this session</button>
-                    <button type="button" className="approval-btn approval-btn-cancel" onClick={() => onApproval(false)}>Cancel</button>
-                  </div>
+                  {isAskUser ? (
+                    <div className="approval-card-actions">
+                      <button 
+                        type="button" 
+                        className="approval-btn approval-btn-approve" 
+                        disabled={!askAnswer.trim()} 
+                        onClick={() => onApproval(true, false, askAnswer)}
+                      >
+                        Submit Answer
+                      </button>
+                      <button 
+                        type="button" 
+                        className="approval-btn approval-btn-cancel" 
+                        onClick={() => onApproval(false)}
+                      >
+                        Decline
+                      </button>
+                    </div>
+                  ) : (
+                    <div className="approval-card-actions">
+                      <button type="button" className="approval-btn approval-btn-approve" onClick={() => onApproval(true)}>Approve</button>
+                      <button type="button" className="approval-btn" style={{ backgroundColor: 'rgba(16, 185, 129, 0.22)', borderColor: 'rgba(16, 185, 129, 0.4)', color: '#a7f3d0' }} onClick={() => onApproval(true, true)}>Approve this session</button>
+                      <button type="button" className="approval-btn approval-btn-cancel" onClick={() => onApproval(false)}>Cancel</button>
+                    </div>
+                  )}
                 </div>
               </div>
             </div>
@@ -2121,7 +2262,7 @@ export default function ChatPanel({
                 return <option key={provider} value={provider}>{displayName}</option>
               })}
             </select>
-            {availableModels.length > 0 && (
+            {(availableModels.length > 0 || activeModel) && (
               <select 
                 value={activeModel} 
                 onChange={(event) => onSetModel(event.target.value)}
@@ -2179,6 +2320,9 @@ export default function ChatPanel({
           </button>
         </form>
       </div>
+      <p className="input-disclaimer">
+        Mint Agent is an AI gateway. Responses via third-party APIs. Verify critical info.
+      </p>
     </section>
   )
 }

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

@@ -1,11 +1,13 @@
 import { useState } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'imagine' | 'workflows'
 
 interface ChatSessionItem {
   id: string
   title: string
   kind: string
+  createdAt?: string
+  updatedAt?: string
 }
 
 interface DashboardSidebarProps {
@@ -20,6 +22,8 @@ interface DashboardSidebarProps {
   onDeleteConversation: (id: string) => void
   onRenameConversation?: (id: string, newTitle: string) => void
   onSetView: (view: DashboardView) => void
+  isSearchOpen: boolean
+  onSetSearchOpen: (open: boolean) => void
 }
 
 export default function DashboardSidebar({
@@ -34,6 +38,8 @@ export default function DashboardSidebar({
   onDeleteConversation,
   onRenameConversation,
   onSetView,
+  isSearchOpen,
+  onSetSearchOpen,
 }: DashboardSidebarProps) {
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
   const [editTitleValue, setEditTitleValue] = useState('')
@@ -77,6 +83,16 @@ export default function DashboardSidebar({
         <span>New Chat</span>
       </button>
 
+      <button className="sidebar-top-action sidebar-search-btn" onClick={() => onSetSearchOpen(true)}>
+        <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
+          <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>
+        <span>Search Chats</span>
+      </button>
+
       <button className={`sidebar-top-action ${view === 'chat' ? 'is-active' : ''}`} onClick={() => onSetView('chat')}>
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
           <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">

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

@@ -16,6 +16,7 @@ interface ImageStudioPanelProps {
   view: string
   onRefreshPictures?: () => void
   onSendToChat?: (dataUri: string, prompt: string) => void
+  onToggleMobileSidebar?: () => void
 }
 
 const ASPECT_OPTIONS: { value: AspectRatio; label: string; icon: string }[] = [
@@ -85,7 +86,7 @@ function SkeletonCard() {
   )
 }
 
-export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat }: ImageStudioPanelProps) {
+export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat, onToggleMobileSidebar }: ImageStudioPanelProps) {
   const [prompt, setPrompt] = useState('')
   const [negativePrompt, setNegativePrompt] = useState('')
   const [showNegative, setShowNegative] = useState(false)
@@ -193,15 +194,28 @@ export default function ImageStudioPanel({ view, onRefreshPictures, onSendToChat
     document.body.removeChild(a)
   }
 
-  if (view !== 'imagine') return null
-
   const modelOptions = PROVIDER_MODELS[selectedProvider] ?? []
 
   return (
-    <div className="img-studio" id="image-studio-panel" role="main" aria-label="Image Studio">
+    <div
+      className={`img-studio ${view === 'imagine' ? 'is-visible' : ''}`}
+      id="image-studio-panel"
+      role="main"
+      aria-label="Image Studio"
+      aria-hidden={view !== 'imagine'}
+    >
       {/* Header */}
       <header className="img-studio-header">
         <div className="img-studio-header-title">
+          <button
+            className="mobile-menu-btn"
+            type="button"
+            onClick={onToggleMobileSidebar}
+            aria-label="Toggle menu"
+            style={{ marginRight: '8px' }}
+          >
+            ☰
+          </button>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
             <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
           </svg>