@pheem49/mint 1.16.0 → 1.18.0

package/src/renderer/shared/components/{McpServersView.tsx → extensions/McpServersView.tsx}

@@ -1,30 +1,30 @@
-import SelectField from './SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState, useEffect } from 'react'
-import '../css/management-views.css'
-import { renderMcpSvgIcon, renderMcpHubSvgIcon } from '../constants/plugins'
+import '../../css/management-views.css'
+import { renderMcpSvgIcon, renderMcpHubSvgIcon } from '../../constants/plugins'
 import McpToolAllowlist from './McpToolAllowlist'
 import McpRegistryPicker from './McpRegistryPicker'
-import type { McpRegistryEntry } from '../constants/mcpRegistry'
-import { catalogPlatform } from '../platform'
+import type { McpRegistryEntry } from '../../constants/mcpRegistry'
+import { catalogPlatform } from '../../platform'
 import { Globe, Terminal, Zap, Loader2, Check, AlertCircle, ShieldAlert } from 'lucide-react'
 
-const { testMcpConnection } = catalogPlatform
+const { testMcpConnection, detectSystemTools, reauthMcpServer, listMcpServerTools } = catalogPlatform
 
 export interface McpServersViewProps {
   config: any
   updateField: (field: string, value: any) => void
-  mcpName: string
-  setMcpName: (val: string) => void
-  mcpCmd: string
-  setMcpCmd: (val: string) => void
-  mcpArgs: string
-  setMcpArgs: (val: string) => void
-  mcpEnv: string
-  setMcpEnv: (val: string) => void
+  mcpName?: string
+  setMcpName?: (val: string) => void
+  mcpCmd?: string
+  setMcpCmd?: (val: string) => void
+  mcpArgs?: string
+  setMcpArgs?: (val: string) => void
+  mcpEnv?: string
+  setMcpEnv?: (val: string) => void
   mcpIcon?: string
   setMcpIcon?: (val: string) => void
-  handleAddMcpServer: (allowAll?: boolean) => void
-  handleRemoveMcpServer: (name: string) => void
+  handleAddMcpServer?: (allowAll?: boolean) => void
+  handleRemoveMcpServer?: (name: string) => void
   detectTools?: () => Promise<{ docker: boolean; git: boolean; gh: boolean; node: boolean }>
   onReauth?: (name: string) => Promise<boolean>
   listServerTools?: (name: string) => Promise<string[]>
@@ -33,22 +33,89 @@ export interface McpServersViewProps {
 export const McpServersView: React.FC<McpServersViewProps> = React.memo(function McpServersView({
   config,
   updateField,
-  mcpName,
-  setMcpName,
-  mcpCmd,
-  setMcpCmd,
-  mcpArgs,
-  setMcpArgs,
-  mcpEnv,
-  setMcpEnv,
-  mcpIcon = '',
-  setMcpIcon,
-  handleAddMcpServer,
-  handleRemoveMcpServer,
-  detectTools,
-  onReauth,
-  listServerTools,
+  mcpName: controlledMcpName,
+  setMcpName: controlledSetMcpName,
+  mcpCmd: controlledMcpCmd,
+  setMcpCmd: controlledSetMcpCmd,
+  mcpArgs: controlledMcpArgs,
+  setMcpArgs: controlledSetMcpArgs,
+  mcpEnv: controlledMcpEnv,
+  setMcpEnv: controlledSetMcpEnv,
+  mcpIcon: controlledMcpIcon,
+  setMcpIcon: controlledSetMcpIcon,
+  handleAddMcpServer: controlledHandleAdd,
+  handleRemoveMcpServer: controlledHandleRemove,
+  detectTools = detectSystemTools,
+  onReauth = reauthMcpServer,
+  listServerTools = listMcpServerTools,
 }) {
+  const [internalName, setInternalName] = useState('')
+  const [internalCmd, setInternalCmd] = useState('')
+  const [internalArgs, setInternalArgs] = useState('')
+  const [internalEnv, setInternalEnv] = useState('')
+  const [internalIcon, setInternalIcon] = useState('')
+
+  const mcpName = controlledMcpName ?? internalName
+  const setMcpName = controlledSetMcpName ?? setInternalName
+  const mcpCmd = controlledMcpCmd ?? internalCmd
+  const setMcpCmd = controlledSetMcpCmd ?? setInternalCmd
+  const mcpArgs = controlledMcpArgs ?? internalArgs
+  const setMcpArgs = controlledSetMcpArgs ?? setInternalArgs
+  const mcpEnv = controlledMcpEnv ?? internalEnv
+  const setMcpEnv = controlledSetMcpEnv ?? setInternalEnv
+  const mcpIcon = controlledMcpIcon ?? internalIcon
+  const setMcpIcon = controlledSetMcpIcon ?? setInternalIcon
+
+  const handleAddMcpServer = (allowAll?: boolean): boolean => {
+    if (controlledHandleAdd) {
+      controlledHandleAdd(allowAll)
+      return true
+    }
+    if (!mcpName.trim() || !mcpCmd.trim()) {
+      alert('Please provide at least a server name and command.')
+      return false
+    }
+    let parsedEnv = {}
+    if (mcpEnv.trim()) {
+      try {
+        parsedEnv = JSON.parse(mcpEnv)
+      } catch {
+        alert('Invalid JSON in Environment variable field.')
+        return false
+      }
+    }
+    const name = mcpName.trim()
+    const argList = mcpArgs.split(/\s+/).filter(Boolean)
+    const updated = {
+      ...(config.mcpServers || {}),
+      [name]: {
+        command: mcpCmd.trim(),
+        args: argList,
+        env: parsedEnv,
+        icon: mcpIcon.trim() || undefined,
+      },
+    }
+    updateField('mcpServers', updated)
+    if (allowAll) {
+      updateField('allowedMcpTools', { ...(config.allowedMcpTools || {}), [name]: ['*'] })
+    }
+    setMcpName('')
+    setMcpCmd('')
+    setMcpArgs('')
+    setMcpEnv('')
+    setMcpIcon('')
+    return true
+  }
+
+  const handleRemoveMcpServer = (name: string) => {
+    if (controlledHandleRemove) {
+      controlledHandleRemove(name)
+      return
+    }
+    const updated = { ...(config.mcpServers || {}) }
+    delete updated[name]
+    updateField('mcpServers', updated)
+  }
   const [detectedTools, setDetectedTools] = useState({ docker: false, git: false, gh: false, node: false })
   const [detailMcpName, setDetailMcpName] = useState<string | null>(null)
   const [showAddModal, setShowAddModal] = useState(false)
@@ -268,9 +335,11 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
       setAddAllowAll(false)
       setShowAddModal(false)
     } else {
-      handleAddMcpServer(addAllowAll)
-      setAddAllowAll(false)
-      setShowAddModal(false)
+      const added = handleAddMcpServer(addAllowAll)
+      if (added) {
+        setAddAllowAll(false)
+        setShowAddModal(false)
+      }
     }
   }
 
@@ -401,7 +470,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
               className="management-plugin-row"
               onClick={() => setDetailMcpName(item.name)}
             >
-              <div className="management-card-icon" style={{ background: 'rgba(255, 255, 255, 0.06)', borderColor: 'rgba(255, 255, 255, 0.08)' }}>
+              <div className="management-card-icon" style={{ background: 'var(--bg-surface-soft)', borderColor: 'var(--border-subtle)' }}>
                 {renderMcpSvgIcon(item.name, item.customIcon)}
               </div>
               <div className="management-plugin-info">
@@ -468,7 +537,7 @@ export const McpServersView: React.FC<McpServersViewProps> = React.memo(function
             <div className="management-modal" onClick={(e) => e.stopPropagation()}>
               <div className="management-modal-header">
                 <div className="management-card-title-group">
-                  <div className="management-card-icon" style={{ width: 44, height: 44, background: 'rgba(255, 255, 255, 0.06)', borderColor: 'rgba(255, 255, 255, 0.08)' }}>
+                  <div className="management-card-icon" style={{ width: 44, height: 44, background: 'var(--bg-surface-soft)', borderColor: 'var(--border-subtle)' }}>
                     {renderMcpSvgIcon(item.name, item.customIcon)}
                   </div>
                   <h2 className="management-modal-title">{item.name}</h2>

package/src/renderer/shared/components/{McpToolAllowlist.tsx → extensions/McpToolAllowlist.tsx}

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import '../css/management-views.css'
+import '../../css/management-views.css'
 
 /**
  * Per-server view of `config.allowedMcpTools[serverName]` — the list the agent's
@@ -148,7 +148,7 @@ export const McpToolAllowlist: React.FC<McpToolAllowlistProps> = ({
       )}
 
       {error && (
-        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', color: '#f87171', margin: '4px 0' }}>
+        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', color: 'var(--status-error, #f87171)', margin: '4px 0' }}>
           {error}
         </p>
       )}

package/src/renderer/shared/components/{ModUi.test.tsx → extensions/ModUi.test.tsx}

@@ -1,10 +1,9 @@
 import React from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { describe, it, expect } from 'vitest'
-import { ModUi } from './ModUi'
-import type { ModNode } from '../mods'
-import { ModSessionControls, ModTestResults } from './ModSessionControls'
-import { modViewport } from '../utils/modViewport'
+import { ModUi, ModSessionControls, ModTestResults, modsPollIntervalMs } from './ModsPanel'
+import type { ModNode } from '../../mods'
+import { modViewport } from '../../utils/modViewport'
 
 describe('Mod UI', () => {
   it('reports available band pixels and an estimated text width on both graphical surfaces', () => {
@@ -62,4 +61,10 @@ describe('Mod UI', () => {
     expect(html).toContain('<th>Task</th>')
     expect(html).toContain('<td>Write tests</td>')
   })
+  it('backs off Mods polling when panel is closed and no mods are enabled', () => {
+    expect(modsPollIntervalMs(false, [])).toBe(12000)
+    expect(modsPollIntervalMs(false, [{ id: 'm1', enabled: false } as any])).toBe(12000)
+    expect(modsPollIntervalMs(true, [])).toBe(3000)
+    expect(modsPollIntervalMs(false, [{ id: 'm1', enabled: true } as any])).toBe(3000)
+  })
 })

package/src/renderer/shared/components/{ModsPanel.tsx → extensions/ModsPanel.tsx}

@@ -1,12 +1,45 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { ChevronDown, Puzzle, Upload } from 'lucide-react'
-import { modsPlatform, runtimePlatform } from '../platform'
-import type { ModOperation, ModRecord, ModResponse, ModTestReport } from '../mods'
-import { ModUi } from './ModUi'
-import { ModSessionControls, ModTestResults } from './ModSessionControls'
-import { modViewport } from '../utils/modViewport'
-import '../css/mods.css'
+import { modsPlatform, runtimePlatform } from '../../platform'
+import type { ModNode, ModOperation, ModRecord, ModResponse, ModTestReport } from '../../mods'
+import { modViewport } from '../../utils/modViewport'
+import '../../css/mods.css'
+
+function ModInput({ node, color, onAction }: { node: ModNode; color: string; onAction: (action: string, value?: string) => void }) {
+  const value = String(node.value ?? '')
+  const [draft, setDraft] = useState(value)
+  useEffect(() => { setDraft(value) }, [value, node.action])
+  return <label className={`mod-input${color}`}>{node.label}<input value={draft} onChange={event => setDraft(event.target.value)} onKeyDown={event => {
+    if (event.key === 'Enter' && node.action) { event.preventDefault(); onAction(node.action, event.currentTarget.value) }
+  }} /></label>
+}
+
+export function ModUi({ node, onAction, inheritedColor }: { node: ModNode; onAction: (action: string, value?: string) => void; inheritedColor?: ModNode['color'] }) {
+  const selectedColor = node.color ?? inheritedColor
+  const color = ['default', 'yellow', 'cyan', 'blue', 'magenta', 'red'].includes(selectedColor ?? '') ? ` mod-color-${selectedColor}` : ''
+  switch (node.type) {
+    case 'stack': return <div className={`mod-stack${node.direction === 'row' ? ' mod-stack-row' : ''}${color}`}>{node.children?.map((child, i) => <ModUi key={i} node={child} onAction={onAction} inheritedColor={selectedColor} />)}</div>
+    case 'text': return <p className={`mod-text${color}`}>{node.text}</p>
+    case 'badge': return <span className={`mod-badge${color}`}>{node.text}</span>
+    case 'button': return <button className={color.trim() || undefined} type="button" onClick={() => node.action && onAction(node.action)}>{node.label}</button>
+    case 'input': return <ModInput node={node} color={color} onAction={onAction} />
+    case 'progress': return <label className={`mod-progress${color}`}>{node.label}<progress aria-label={node.label} value={Number(node.value)} max={node.max} /></label>
+    case 'table': return <div className={`mod-table-scroll${color}`}><table><thead><tr>{node.columns?.map((column, i) => <th key={i}>{column}</th>)}</tr></thead><tbody>{node.rows?.map((row, i) => <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>)}</tbody></table></div>
+    default: return null
+  }
+}
+
+export function ModSessionControls({ enabled, busy, onToggle }: { enabled: boolean; busy: boolean; onToggle: (enabled: boolean) => void }) {
+  return <div className="mod-session-controls"><button type="button" disabled={busy} aria-pressed={enabled} onClick={() => onToggle(!enabled)}>Hot reload: {enabled ? 'On' : 'Off'}</button><p className="mod-hint">Applies to this session. Mods with permissions require review for each new revision.</p></div>
+}
+
+export function ModTestResults({ report }: { report: ModTestReport }) {
+  return <section aria-label="Mod test results"><p role="status">{report.passed} passed · {report.failed} failed</p>{report.tests.map((test, i) => <div key={i}><strong>{test.passed ? '✓' : '✗'} {test.name}</strong><p className="mod-hint">{test.file}</p>{test.error && <pre className="mod-error">{test.error}</pre>}</div>)}</section>
+}
+
+export const modsPollIntervalMs = (open: boolean, mods?: ModRecord[]): number =>
+  open || Boolean(mods?.some(m => m.enabled)) ? 3000 : 12000
 
 export function ModsPanel({ workspacePath, chatId, panelTarget, onOpen }: { workspacePath?: string | null; chatId: string; panelTarget?: HTMLElement | null; onOpen: () => void }) {
   const [data, setData] = useState<ModResponse>({ mods: [] })
@@ -19,12 +52,15 @@ export function ModsPanel({ workspacePath, chatId, panelTarget, onOpen }: { work
   const [reports, setReports] = useState<Record<string, ModTestReport>>({})
   const rootRef = useRef<HTMLDivElement>(null)
   const openRef = useRef(open); openRef.current = open
+  const modsRef = useRef<ModRecord[]>(data.mods)
+  modsRef.current = data.mods
   const currentScope = useRef('')
   currentScope.current = `${workspacePath}\0${chatId}`
   const [scope, setScope] = useState<'chat' | 'workspace' | 'global'>('chat')
   const generation = useRef(0)
   const importRef = useRef<HTMLInputElement>(null)
   const seen = useRef(new Set<string>())
+  const refreshRef = useRef<(() => void) | null>(null)
 
   useEffect(() => {
     const current = ++generation.current
@@ -33,24 +69,40 @@ export function ModsPanel({ workspacePath, chatId, panelTarget, onOpen }: { work
     setData({ mods: [] }); setLoading(Boolean(workspacePath && chatId)); setBusy(false); setError(''); setTab('manage'); seen.current.clear(); setReports({})
     async function refresh() {
       if (!workspacePath || !chatId || stopped) return
+      clearTimeout(timer)
+      if (document.hidden) {
+        if (!stopped) timer = setTimeout(refresh, modsPollIntervalMs(openRef.current, modsRef.current))
+        return
+      }
+      let latestMods = modsRef.current
       try {
         const value = await modsPlatform.operation({ workspacePath, chatId, action: 'list' })
         if (!stopped && generation.current === current) {
+          latestMods = value.mods ?? []
           setData(value); setLoading(false)
           const fresh = value.mods?.find(m => m.enabled && m.snapshot?.ui.side_panel && !seen.current.has(m.id))
           value.mods?.filter(m => m.enabled).forEach(m => seen.current.add(m.id))
           if (fresh) { onOpenRef.current(); setTab(fresh.id) }
         }
       } catch (e) { if (!stopped && generation.current === current) { setError(String(e)); setLoading(false) } }
-      if (!stopped) timer = setTimeout(refresh, 1000)
+      if (!stopped) timer = setTimeout(refresh, modsPollIntervalMs(openRef.current, latestMods))
     }
+    refreshRef.current = () => { void refresh() }
     void refresh()
+    const resume = () => { if (!document.hidden && !stopped) void refresh() }
+    document.addEventListener('visibilitychange', resume)
     return () => {
       stopped = true; clearTimeout(timer)
+      refreshRef.current = null
+      document.removeEventListener('visibilitychange', resume)
       if (workspacePath && chatId) void modsPlatform.operation({ workspacePath, chatId, action: 'close' }).catch(() => {})
     }
   }, [workspacePath, chatId])
 
+  useEffect(() => {
+    if (open) refreshRef.current?.()
+  }, [open])
+
   useEffect(() => {
     const element=rootRef.current
     if (!element || !workspacePath || !chatId) return

package/src/renderer/shared/components/{PluginsView.tsx → extensions/PluginsView.tsx}

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react'
-import '../css/management-views.css'
-import { renderMcpSvgIcon, BUILTIN_PLUGINS_LIST, renderPluginsSvgIcon, type BuiltinPluginDefinition } from '../constants/plugins'
-import { isNativePluginEnabled, applyNativePluginToggle } from '../utils/nativePlugins'
+import '../../css/management-views.css'
+import { renderMcpSvgIcon, BUILTIN_PLUGINS_LIST, renderPluginsSvgIcon, type BuiltinPluginDefinition } from '../../constants/plugins'
+import { isNativePluginEnabled, applyNativePluginToggle } from '../../utils/nativePlugins'
 import {
   getOAuthStatuses,
   startOAuthFlow,
   revokeOAuth,
   subscribeOAuthChange,
   type OAuthStatus,
-} from '../utils/oauthManager'
+} from '../../utils/oauthManager'
 
 export interface PluginsViewProps {
   config: any
@@ -182,7 +182,7 @@ export const PluginsView: React.FC<PluginsViewProps> = React.memo(function Plugi
               className="management-plugin-row"
               onClick={() => setDetailPlugin(p)}
             >
-              <div className="management-card-icon" style={{ background: 'rgba(255, 255, 255, 0.06)', borderColor: 'rgba(255, 255, 255, 0.08)' }}>
+              <div className="management-card-icon" style={{ background: 'var(--bg-surface-soft)', borderColor: 'var(--border-subtle)' }}>
                 {renderMcpSvgIcon(p.key)}
               </div>
               <div className="management-plugin-info">
@@ -243,7 +243,7 @@ export const PluginsView: React.FC<PluginsViewProps> = React.memo(function Plugi
             <div className="management-modal" onClick={(e) => e.stopPropagation()}>
               <div className="management-modal-header">
                 <div className="management-card-title-group">
-                  <div className="management-card-icon" style={{ width: 44, height: 44, background: 'rgba(255, 255, 255, 0.06)', borderColor: 'rgba(255, 255, 255, 0.08)' }}>
+                  <div className="management-card-icon" style={{ width: 44, height: 44, background: 'var(--bg-surface-soft)', borderColor: 'var(--border-subtle)' }}>
                     {renderMcpSvgIcon(p.key)}
                   </div>
                   <h2 className="management-modal-title">{p.name}</h2>

package/src/renderer/shared/components/{ScheduledTasksView.tsx → extensions/ScheduledTasksView.tsx}

@@ -1,10 +1,10 @@
-import SelectField from './SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState, useEffect, useMemo } from 'react'
 import { DateTime } from 'luxon'
-import { renderScheduledTasksSvgIcon, renderTaskLogoIcon } from '../constants/plugins'
-import { renderFormattedMessage } from '../utils/markdown'
-import '../css/management-views.css'
-import type { CronJob, CronJobDraft } from '../types'
+import { renderScheduledTasksSvgIcon, renderTaskLogoIcon } from '../../constants/plugins'
+import { renderFormattedMessage } from '../../utils/markdown'
+import '../../css/management-views.css'
+import type { CronJob, CronJobDraft } from '../../types'
 
 export type { CronJob }
 

package/src/renderer/shared/components/extensions/SkillsView.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import SkillsView from './SkillsView'
+
+describe('SkillsView workspace display', () => {
+  it('displays the active workspace path in the header', () => {
+    const html = renderToStaticMarkup(
+      <SkillsView
+        listSkills={async () => []}
+        addSkill={async () => {}}
+        deleteSkill={async () => {}}
+        workspacePath="/workspace/project"
+      />,
+    )
+    expect(html).toContain('/workspace/project')
+    expect(html).toContain('Workspace')
+  })
+
+  it('indicates when no workspace is selected', () => {
+    const html = renderToStaticMarkup(
+      <SkillsView
+        listSkills={async () => []}
+        addSkill={async () => {}}
+        deleteSkill={async () => {}}
+        workspacePath=""
+      />,
+    )
+    expect(html).toContain('No active workspace')
+  })
+})

package/src/renderer/shared/components/{SkillsView.tsx → extensions/SkillsView.tsx}

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import { renderSkillsSvgIcon, renderSkillLogoIcon } from '../constants/plugins'
-import { renderFormattedMessage } from '../utils/markdown'
-import '../css/management-views.css'
-import type { LearnedSkill } from '../types'
+import { renderSkillsSvgIcon, renderSkillLogoIcon } from '../../constants/plugins'
+import { renderFormattedMessage } from '../../utils/markdown'
+import '../../css/management-views.css'
+import type { LearnedSkill } from '../../types'
 
 /** Prefer a skill's frontmatter summary; otherwise preview its first body line. */
 function skillPreview(skill: LearnedSkill): string {
@@ -137,6 +137,16 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
           <p className="management-subtitle">
             Instructions Mint follows automatically, reviewed before every prompt.
           </p>
+          <div className="management-workspace-info">
+            <span className="management-workspace-label">Workspace:</span>
+            {workspacePath ? (
+              <code className="management-workspace-path" title={workspacePath}>
+                {workspacePath}
+              </code>
+            ) : (
+              <span className="management-workspace-none">No active workspace</span>
+            )}
+          </div>
         </div>
         <button
           type="button"
@@ -247,6 +257,12 @@ export const SkillsView: React.FC<SkillsViewProps> = React.memo(function SkillsV
                 {isWorkspaceSkill(detailSkill) ? 'Workspace' : 'Global'}
               </span>
 
+              {detailSkill.sourcePath && (
+                <div className="management-modal-source">
+                  <code>{detailSkill.sourcePath}</code>
+                </div>
+              )}
+
               {detailSkill.description && (
                 <p style={{ color: 'var(--text-soft, #d1d1d4)', lineHeight: 1.55, margin: 0 }}>
                   {detailSkill.description}

package/src/renderer/shared/components/{ImageStudioPanel.tsx → studio/ImageStudioPanel.tsx}

@@ -1,8 +1,8 @@
-import SelectField from './SelectField'
+import SelectField from '../ui/SelectField'
 import React, { useState, useRef, useCallback, useEffect } from 'react'
-import '../css/image-studio.css'
-import { mediaPlatform } from '../platform'
-import type { ImageGenRequest, ImageGenResponse, ImageGenProviders, PictureEntry } from '../types'
+import '../../css/image-studio.css'
+import { mediaPlatform } from '../../platform'
+import type { ImageGenRequest, ImageGenResponse, ImageGenProviders, PictureEntry } from '../../types'
 
 const { generateImages, getImageGenProviders, fetchImageProviderModels, convertFileSrc, listSavedPictures } = mediaPlatform
 
@@ -14,12 +14,12 @@ interface ImageStudioPanelProps {
   onSendToChat?: (dataUri: string, prompt: string) => void
 }
 
-import { IMAGE_ASPECT_RATIOS, IMAGE_STYLE_PRESETS } from '../constants/studio'
+import { IMAGE_ASPECT_RATIOS, IMAGE_STYLE_PRESETS } from '../../constants/studio'
 
 const ASPECT_Options = IMAGE_ASPECT_RATIOS
 const STYLE_SUGGESTIONS = IMAGE_STYLE_PRESETS
 
-import { IMAGE_STUDIO_MODELS } from '../constants/models'
+import { IMAGE_STUDIO_MODELS } from '../../constants/models'
 const PROVIDER_MODELS = IMAGE_STUDIO_MODELS
 
 const PROVIDER_LABELS: Record<string, string> = {

package/src/renderer/shared/components/{LibraryItemCard.tsx → studio/LibraryItemCard.tsx}

@@ -1,6 +1,6 @@
 import { Download, FileText, Image, Trash2, Undo2, Video } from 'lucide-react'
-import type { LibraryItem } from '../types'
-import { useLibraryFile } from '../library/useLibraryFile'
+import type { LibraryItem } from '../../types'
+import { useLibraryFile } from '../../library/useLibraryFile'
 
 function formatSize(size: number) {
   if (size < 1024) return `${size} B`

package/src/renderer/shared/components/{LibraryPage.tsx → studio/LibraryPage.tsx}

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react'
-import { Library, RefreshCw, Search, Trash2, X } from 'lucide-react'
-import { libraryPlatform } from '../platform'
-import { createLibraryController } from '../library/controller'
-import { downloadLibraryFile } from '../library/useLibraryFile'
-import type { LibraryItem } from '../types'
+import { Grid2X2, Grid3X3, Library, RefreshCw, Search, Trash2, X } from 'lucide-react'
+import { libraryPlatform } from '../../platform'
+import { createLibraryController } from '../../library/controller'
+import { downloadLibraryFile } from '../../library/useLibraryFile'
+import type { LibraryItem } from '../../types'
 import LibraryItemCard from './LibraryItemCard'
 import LibraryPreview from './LibraryPreview'
-import '../css/library.css'
+import '../../css/library.css'
 
 const filters = [['', 'All'], ['image', 'Images'], ['video', 'Videos'], ['file', 'Files']] as const
 
@@ -22,12 +22,25 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
   const [debounced, setDebounced] = useState('')
   const [scope, setScope] = useState('all')
   const [trashed, setTrashed] = useState(() => new URLSearchParams(location.search).get('trash') === '1')
+  const [gridSize, setGridSize] = useState<'normal' | 'large'>(() => {
+    try {
+      const saved = localStorage.getItem('mint:library:grid-size')
+      if (saved === 'normal' || saved === 'large') return saved
+    } catch { /* ignore */ }
+    return 'normal'
+  })
   const [linkedItem, setLinkedItem] = useState<LibraryItem | null>(null)
   const [preview, setPreview] = useState<LibraryItem | null>(null)
   const [downloadError, setDownloadError] = useState('')
   const [downloading, setDownloading] = useState('')
   const [navigation, setNavigation] = useState(0)
   const closePreview = useCallback(() => setPreview(null), [])
+  const updateGridSize = useCallback((size: 'normal' | 'large') => {
+    setGridSize(size)
+    try {
+      localStorage.setItem('mint:library:grid-size', size)
+    } catch { /* ignore */ }
+  }, [])
 
   useEffect(() => {
     const onNavigate = () => setNavigation(value => value + 1)
@@ -119,9 +132,39 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
               <button key={value} type="button" data-filter={value || 'all'} aria-pressed={kind === value} onClick={() => setKind(value)}>{label}</button>
             ))}
           </div>
-          <button type="button" className="library-trash-toggle" data-view={trashed ? 'active' : 'trash'} aria-pressed={trashed} onClick={() => setTrashed(value => !value)}>
-            {trashed ? <Library size={15} /> : <Trash2 size={15} />} {trashed ? 'Back to library' : 'Trash'}
-          </button>
+          <div className="library-toolbar-actions">
+            {(kind === 'image' || kind === 'video') && (
+              <div className="library-grid-sizes" role="group" aria-label="Grid size">
+                <button
+                  type="button"
+                  className="library-size-toggle"
+                  data-grid-size="normal"
+                  aria-pressed={gridSize === 'normal'}
+                  title="Normal grid (3-4 columns)"
+                  aria-label="Normal grid"
+                  onClick={() => updateGridSize('normal')}
+                >
+                  <Grid3X3 size={15} />
+                  <span>Normal</span>
+                </button>
+                <button
+                  type="button"
+                  className="library-size-toggle"
+                  data-grid-size="large"
+                  aria-pressed={gridSize === 'large'}
+                  title="Large grid (2-3 columns)"
+                  aria-label="Large grid"
+                  onClick={() => updateGridSize('large')}
+                >
+                  <Grid2X2 size={15} />
+                  <span>Large</span>
+                </button>
+              </div>
+            )}
+            <button type="button" className="library-trash-toggle" data-view={trashed ? 'active' : 'trash'} aria-pressed={trashed} onClick={() => setTrashed(value => !value)}>
+              {trashed ? <Library size={15} /> : <Trash2 size={15} />} {trashed ? 'Back to library' : 'Trash'}
+            </button>
+          </div>
         </div>
         <div className="library-search-row">
           <label className="library-search">
@@ -146,7 +189,7 @@ export default function LibraryPage({ chatId, onClose, onOpenConversation }: {
             <p>{trashed ? 'Files you move to Trash can be restored here.' : 'Send an image, video, or file in a conversation to keep it here.'}</p>
           </div>
         ) : null}
-        <div className={`library-items ${kind === 'image' || kind === 'video' ? 'is-grid' : ''}`}>
+        <div className={`library-items ${kind === 'image' || kind === 'video' ? `is-grid is-grid-${gridSize}` : ''}`}>
           {visibleItems.map(item => (
             <LibraryItemCard key={item.id} item={item} linked={linkedItem?.id === item.id} trashed={trashed}
               actionPending={!!state.actionId} downloadPending={!!downloading}

package/src/renderer/shared/components/{LibraryPreview.tsx → studio/LibraryPreview.tsx}

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Download, X } from 'lucide-react';
-import type { LibraryItem } from '../types';
-import { useLibraryFile } from '../library/useLibraryFile';
+import type { LibraryItem } from '../../types';
+import { useLibraryFile } from '../../library/useLibraryFile';
 export default function LibraryPreview({ item, onClose, onOpenConversation }: {
   item: LibraryItem;
   onClose: () => void;