@pheem49/mint 1.7.1 → 1.8.1

package/src/renderer/src/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 }
 }
 
@@ -355,7 +402,7 @@ interface ChatPanelProps {
   onSetAgentMode: (enabled: boolean) => void
   onSetProvider: (provider: string) => void
   onSelectWorkspace: () => void
-  onApproval: (approved: boolean, autoApproveSession?: boolean) => void
+  onApproval: (approved: boolean, autoApproveSession?: boolean, answer?: string) => void
   settingsConfig: any
   onSetModel: (model: string) => void
 }
@@ -450,7 +497,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
+        })
       })
     })
   }
@@ -977,6 +1034,34 @@ export default function ChatPanel({
   const [openFileDiffs, setOpenFileDiffs] = useState<Record<string, boolean>>({})
   const [toolMenuOpen, setToolMenuOpen] = useState(false)
   const [elapsedSeconds, setElapsedSeconds] = useState(0)
+  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])
 
   useEffect(() => {
     if (!sending) {
@@ -1037,7 +1122,7 @@ export default function ChatPanel({
       case 'local_openai':
         return LOCAL_MODELS
       case 'ollama':
-        return OLLAMA_MODELS
+        return dynamicOllamaModels
       default:
         return []
     }
@@ -1473,7 +1558,7 @@ export default function ChatPanel({
   const appendWorkspaceReference = (reference: string) => {
     const trimmed = reference.trim()
     if (!trimmed) return
-    onSetMessage(message.trim() ? `${message.trimEnd()} ${trimmed}` : trimmed)
+    onSetMessage(message.trim() ? `${message.trimEnd()} ${trimmed} ` : `${trimmed} `)
   }
   const handleWorkspaceDrop = (event: DragEvent<HTMLElement>) => {
     const reference =
@@ -1502,7 +1587,7 @@ export default function ChatPanel({
         </button>
         {isOpen && (
           <div className="agent-activity-card agent-activity-card-history">
-            {renderAgentActivityTable(activityView)}
+            <AgentActivityTable activityView={activityView} />
           </div>
         )}
       </div>
@@ -1701,22 +1786,40 @@ export default function ChatPanel({
 
   return (
     <section className={`conversation-panel ${isEmptyChat ? 'is-empty' : ''}`}>
+      <div className="chat-header">
+        <div className="chat-header-title">
+          <img src="./assets/icon.png" alt="Logo" className="chat-header-logo" />
+          <span>Mint Agent</span>
+        </div>
+      </div>
       <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)}
@@ -1750,7 +1853,8 @@ export default function ChatPanel({
               </div>
             </div>
           </div>
-        ))}
+        );
+      })}
 
         {sending && (
           <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '16px' }}>
@@ -1764,7 +1868,7 @@ export default function ChatPanel({
                       {pendingApproval ? 'Waiting for approval' : 'Working'}
                     </span>
                   </div>
-                  {renderAgentActivityTable(agentActivities)}
+                  <AgentActivityTable activityView={agentActivities} />
                 </div>
               </div>
             )}
@@ -1834,6 +1938,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%' }}>
@@ -1850,12 +1955,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>
@@ -2035,7 +2182,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)}
@@ -2093,6 +2240,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/components/DashboardSidebar.tsx

@@ -1,11 +1,13 @@
-import { useState } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
-export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspeac' | 'imagine'
+export type DashboardView = 'chat' | 'pictures' | 'model' | 'workspace' | 'imagine' | 'workflows'
 
 interface ChatSessionItem {
   id: string
   title: string
   kind: string
+  createdAt?: string
+  updatedAt?: string
 }
 
 interface DashboardSidebarProps {
@@ -33,6 +35,8 @@ interface DashboardSidebarProps {
   onSetInteractionEnabled: (enabled: boolean) => void
   onSetShowInteractionGuide: (visible: boolean) => void
   onShowToast: (message: string) => void
+  isSearchOpen: boolean
+  onSetSearchOpen: (open: boolean) => void
 }
 
 export default function DashboardSidebar({
@@ -60,9 +64,23 @@ export default function DashboardSidebar({
   onSetInteractionEnabled,
   onSetShowInteractionGuide,
   onShowToast,
+  isSearchOpen,
+  onSetSearchOpen,
 }: DashboardSidebarProps) {
   const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
   const [editTitleValue, setEditTitleValue] = useState('')
+  const [isMoreOpen, setIsMoreOpen] = useState(false)
+  const moreContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (moreContainerRef.current && !moreContainerRef.current.contains(event.target as Node)) {
+        setIsMoreOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
 
   const handleSaveRename = (id: string) => {
     if (editTitleValue.trim() && editTitleValue.trim() !== chatSessions.find(s => s.id === id)?.title) {
@@ -115,6 +133,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">
@@ -133,22 +161,14 @@ export default function DashboardSidebar({
         </span>
         <span>Pictures</span>
       </button>
-      <button className={`sidebar-top-action ${view === 'imagine' ? 'is-active' : ''}`} onClick={() => onSetView('imagine')}>
-        <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">
-            <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"></polygon>
-          </svg>
-        </span>
-        <span>Image Studio</span>
-      </button>
-      <button className={`sidebar-top-action ${view === 'workspeac' ? 'is-active' : ''}`} onClick={() => onSetView('workspeac')}>
+      <button className={`sidebar-top-action ${view === 'workspace' ? 'is-active' : ''}`} onClick={() => onSetView('workspace')}>
         <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">
             <path d="M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"></path>
             <path d="M3 6v12"></path>
           </svg>
         </span>
-        <span>Workspeac</span>
+        <span>Workspace</span>
       </button>
       <button className={`sidebar-top-action ${modelVisible ? 'is-active' : ''}`} onClick={onToggleModel}>
         <span aria-hidden="true" style={{ display: 'inline-flex', alignItems: 'center' }}>
@@ -160,6 +180,45 @@ export default function DashboardSidebar({
         <span>Live2D Model</span>
       </button>
 
+      <div className="sidebar-more-container" ref={moreContainerRef}>
+        <button className={`sidebar-top-action ${isMoreOpen || view === 'imagine' || view === 'workflows' ? 'is-active' : ''}`} onClick={() => setIsMoreOpen(!isMoreOpen)}>
+          <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="12" cy="12" r="1.5"></circle>
+              <circle cx="19" cy="12" r="1.5"></circle>
+              <circle cx="5" cy="12" r="1.5"></circle>
+            </svg>
+          </span>
+          <span>More</span>
+        </button>
+        {isMoreOpen && (
+          <div className="sidebar-more-popover">
+            <button className={`popover-item ${view === 'imagine' ? 'active' : ''}`} onClick={() => { onSetView('imagine'); setIsMoreOpen(false); }}>
+              <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">
+                  <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"></polygon>
+                </svg>
+              </span>
+              <span>Image Studio</span>
+            </button>
+            <button className={`popover-item ${view === 'workflows' ? 'active' : ''}`} onClick={() => { onSetView('workflows'); setIsMoreOpen(false); }}>
+              <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">
+                  <path d="M4 12h16"></path>
+                  <path d="M12 4v16"></path>
+                  <rect x="2" y="9" width="4" height="6" rx="1"></rect>
+                  <rect x="18" y="9" width="4" height="6" rx="1"></rect>
+                  <rect x="10" y="2" width="4" height="4" rx="1"></rect>
+                  <rect x="10" y="18" width="4" height="4" rx="1"></rect>
+                </svg>
+              </span>
+              <span>Workflow (Beta)</span>
+            </button>
+          </div>
+        )}
+      </div>
+
+
       {modelVisible && (
         <div className="sidebar-model-controls">
           <button

package/src/renderer/src/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>