@pheem49/mint 1.15.0 → 1.17.0

package/src/renderer/shared/components/extensions/McpToolAllowlist.tsx

@@ -0,0 +1,182 @@
+import React, { useState } from 'react'
+import '../../css/management-views.css'
+
+/**
+ * Per-server view of `config.allowedMcpTools[serverName]` — the list the agent's
+ * `mcp_tool` gate checks. Mirrors `mint_core::mcp::allow_tool_in` semantics: a
+ * `"*"` entry means "any tool", adding a specific tool when `*` is present is a
+ * no-op, and an empty list means the agent cannot call the server at all.
+ *
+ * Styled with the shared `management-*` classes so it matches the MCP view.
+ */
+export interface McpToolAllowlistProps {
+  serverName: string
+  config: any
+  updateField: (field: string, value: any) => void
+  /** Optional — enables the "Discover tools" button. */
+  listServerTools?: (name: string) => Promise<string[]>
+}
+
+function currentTools(config: any, server: string): string[] {
+  const value = config?.allowedMcpTools?.[server]
+  return Array.isArray(value) ? value.filter((t: unknown): t is string => typeof t === 'string') : []
+}
+
+export const McpToolAllowlist: React.FC<McpToolAllowlistProps> = ({
+  serverName,
+  config,
+  updateField,
+  listServerTools,
+}) => {
+  const tools = currentTools(config, serverName)
+  const wildcard = tools.includes('*')
+  const [draft, setDraft] = useState('')
+  const [discovered, setDiscovered] = useState<string[] | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const write = (next: string[]) => {
+    const all = { ...(config?.allowedMcpTools || {}) }
+    if (next.length === 0) delete all[serverName]
+    else all[serverName] = next
+    updateField('allowedMcpTools', all)
+  }
+
+  const allow = (raw: string) => {
+    const tool = raw.trim()
+    if (!tool) return
+    if (tool === '*') return write(['*'])
+    if (wildcard || tools.includes(tool)) return
+    write([...tools, tool])
+  }
+  const disallow = (tool: string) => write(tools.filter((t) => t !== tool))
+  const toggleWildcard = () => (wildcard ? write([]) : write(['*']))
+
+  const discover = async () => {
+    if (!listServerTools) return
+    setBusy(true)
+    setError(null)
+    try {
+      setDiscovered(await listServerTools(serverName))
+    } catch (e: any) {
+      setError(e?.message || 'Could not reach the server')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div style={{ marginTop: 16 }}>
+      <div className="mcp-allowlist-heading">
+        <span className="management-label" style={{ margin: 0 }}>
+          Allowed tools
+        </span>
+        <label className="mcp-allowlist-toggle">
+          <input
+            type="checkbox"
+            className="mint-custom-checkbox"
+            checked={wildcard}
+            onChange={toggleWildcard}
+          />
+          Allow all (*)
+        </label>
+      </div>
+
+      {wildcard ? (
+        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', margin: '4px 0' }}>
+          The agent may call every tool on <code>{serverName}</code>.
+        </p>
+      ) : tools.length === 0 ? (
+        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', margin: '4px 0' }}>
+          No tools allowed yet — the agent can’t call this server.
+        </p>
+      ) : (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
+          {tools.map((t) => (
+            <span
+              key={t}
+              className="management-tag"
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+            >
+              {t}
+              <button
+                type="button"
+                onClick={() => disallow(t)}
+                aria-label={`Disallow ${t}`}
+                style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', opacity: 0.7, padding: 0, lineHeight: 1 }}
+              >
+                ✕
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {!wildcard && (
+        <div style={{ display: 'flex', gap: 8, marginBottom: 8, flexWrap: 'wrap' }}>
+          <input
+            type="text"
+            className="management-input-field"
+            placeholder="tool name"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault()
+                allow(draft)
+                setDraft('')
+              }
+            }}
+            style={{ flex: '1 1 160px', minWidth: 140 }}
+          />
+          <button
+            type="button"
+            className="management-action-btn"
+            onClick={() => {
+              allow(draft)
+              setDraft('')
+            }}
+          >
+            Add
+          </button>
+          {listServerTools && (
+            <button type="button" className="management-action-btn" onClick={discover} disabled={busy}>
+              {busy ? 'Discovering…' : 'Discover tools'}
+            </button>
+          )}
+        </div>
+      )}
+
+      {error && (
+        <p className="management-plugin-desc" style={{ whiteSpace: 'normal', color: 'var(--status-error, #f87171)', margin: '4px 0' }}>
+          {error}
+        </p>
+      )}
+
+      {!wildcard && discovered && (
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
+          {discovered.length === 0 && (
+            <span className="management-plugin-desc">Server reported no tools.</span>
+          )}
+          {discovered.map((t) => {
+            const on = tools.includes(t)
+            return (
+              <button
+                key={t}
+                type="button"
+                className="management-action-btn"
+                onClick={() => (on ? disallow(t) : allow(t))}
+                style={{ opacity: on ? 1 : 0.65 }}
+              >
+                {on ? '✓ ' : '+ '}
+                {t}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default McpToolAllowlist

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

@@ -0,0 +1,70 @@
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, it, expect } from 'vitest'
+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', () => {
+    for (const surface of ['web','desktop'] as const) expect(modViewport(664,40,surface,true)).toEqual({surface,widthPx:640,heightPx:40,columns:80,rows:2,sidePanelOpen:true})
+    expect(modViewport(0,40,'web',false)).toBeNull()
+  })
+  it('shows session reload state and failing test diagnostics', () => {
+    const controls=renderToStaticMarkup(<ModSessionControls enabled busy={false} onToggle={() => {}} />)
+    expect(controls).toContain('aria-pressed="true"')
+    expect(controls).toContain('Hot reload')
+    const report=renderToStaticMarkup(<ModTestResults report={{ passed: 1, failed: 1, tests: [
+      { file: 'weather.test.ts', name: 'updates', passed: true },
+      { file: 'weather.test.ts', name: 'storm', passed: false, error: 'Expected Storm' },
+    ] }} />)
+    expect(report).toContain('1 passed')
+    expect(report).toContain('storm')
+    expect(report).toContain('Expected Storm')
+  })
+  it('inherits stack colors into controls and allows a child to restore default text', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', color: 'cyan', children: [
+      { type: 'button', label: 'Inspect', action: 'inspect' },
+      { type: 'badge', text: 'Measured' },
+      { type: 'text', text: 'Normal', color: 'default' },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('<button class="mod-color-cyan"')
+    expect(html).toContain('mod-badge mod-color-cyan')
+    expect(html).toContain('mod-text mod-color-default')
+  })
+  it('renders a weather row with a colored label and uncolored metrics', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', direction: 'row', children: [
+      { type: 'text', text: '☂ Showers', color: 'blue' },
+      { type: 'text', text: '67.2% · 134.4k / 200k · ▁▂▃▄▅▆▇█ · ▲ +98.3k last turn' },
+    ] } as ModNode} onAction={() => {}} />)
+    expect(html).toContain('mod-stack-row')
+    expect(html).toContain('mod-color-blue')
+    expect(html).toContain('☂ Showers')
+    expect(html).toContain('134.4k / 200k')
+  })
+  it('renders text literally and exposes a labeled control', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', children: [
+      { type: 'text', text: '<script>literal</script>' },
+      { type: 'button', label: 'Add task', action: 'add' },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('&lt;script&gt;literal&lt;/script&gt;')
+    expect(html).toContain('Add task')
+    expect(html).not.toContain('<script>')
+  })
+  it('renders accessible progress and tabular data', () => {
+    const html = renderToStaticMarkup(<ModUi node={{ type: 'stack', children: [
+      { type: 'progress', label: 'Budget', value: 20, max: 100 },
+      { type: 'table', columns: ['Task'], rows: [['Write tests']] },
+    ] }} onAction={() => {}} />)
+    expect(html).toContain('aria-label="Budget"')
+    expect(html).toContain('value="20"')
+    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/extensions/ModsPanel.tsx

@@ -0,0 +1,208 @@
+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 { 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: [] })
+  const open = Boolean(panelTarget)
+  const onOpenRef = useRef(onOpen); onOpenRef.current = onOpen
+  const [tab, setTab] = useState('manage')
+  const [error, setError] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [loading, setLoading] = useState(true)
+  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
+    let stopped = false
+    let timer: ReturnType<typeof setTimeout>
+    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, 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
+    let stopped=false
+    let previous=''
+    let timer: ReturnType<typeof setTimeout> | undefined
+    const surface=runtimePlatform.isTauriRuntime() ? 'desktop' as const : 'web' as const
+    async function reportViewport() {
+      if (stopped) return
+      const bounds=element!.getBoundingClientRect()
+      const viewport=modViewport(bounds.width,bounds.height,surface,openRef.current)
+      if (!viewport) return
+      const signature=JSON.stringify(viewport)
+      if (signature===previous) return
+      previous=signature
+      try { await modsPlatform.operation({ workspacePath: workspacePath!, chatId, action: 'viewport', viewport }) }
+      catch (e) { if (!stopped) setError(String(e)) }
+    }
+    const schedule=() => { clearTimeout(timer); timer=setTimeout(() => { void reportViewport() }, 100) }
+    const observer=typeof ResizeObserver==='undefined' ? undefined : new ResizeObserver(schedule)
+    observer?.observe(element); window.addEventListener('resize',schedule); schedule()
+    return () => { stopped=true; clearTimeout(timer); observer?.disconnect(); window.removeEventListener('resize',schedule) }
+  }, [workspacePath, chatId, open])
+
+  const operate = useCallback(async (operation: Omit<ModOperation, 'workspacePath' | 'chatId'>) => {
+    if (!workspacePath || currentScope.current !== `${workspacePath}\0${chatId}`) return
+    const current = generation.current
+    setBusy(true); setError('')
+    try {
+      const value = await modsPlatform.operation({ ...operation, workspacePath, chatId })
+      if (current !== generation.current) return
+      if (value.testReport && operation.id) setReports(current => ({ ...current, [operation.id!]: value.testReport! }))
+      if (value.package) {
+        const bytes = Uint8Array.from(atob(value.package), c => c.charCodeAt(0))
+        const url = URL.createObjectURL(new Blob([bytes], { type: 'application/zip' }))
+        const link = document.createElement('a'); link.href = url; link.download = value.filename || 'mod.mintmod'; link.click(); URL.revokeObjectURL(url)
+      }
+      const latest = await modsPlatform.operation({ workspacePath, chatId, action: 'list' })
+      if (current === generation.current) setData(latest)
+    } catch (e) { if (current === generation.current) setError(String(e)) }
+    finally { if (current === generation.current) setBusy(false) }
+  }, [workspacePath, chatId])
+
+  const activate = (mod: ModRecord) => {
+    const permissions = mod.manifest?.permissions || []
+    if (permissions.length && !window.confirm(`Enable ${mod.name}?\nRevision: ${mod.hash}\nPermissions: ${permissions.join(', ')}\nReview the source below before approving.`)) return
+    if (scope !== 'chat' && !window.confirm(`Enable ${mod.name} for ${scope === 'global' ? 'all workspaces as a personal copy' : 'all chats in this workspace'}?`)) return
+    void operate({ action: 'enable', id: mod.id, scope, expectedHash: mod.hash, grantPermissions: permissions.length > 0 })
+  }
+  const action = (mod: ModRecord, name: string, value?: string) => void operate({ action: 'action', id: mod.id, instanceId: mod.instanceId, command: name, value })
+  const mods = data.mods || []
+  const active = mods.filter(m => m.enabled)
+  const sidePanelMods = active.filter(m => m.snapshot?.ui.side_panel)
+  const selected = mods.find(m => m.id === tab)
+
+  return <>
+    <div className="mint-mods" ref={rootRef}>
+      {active.map(mod => mod.snapshot?.ui.above_composer && <section key={mod.id} className="mod-band" aria-label={mod.name}>
+        <ModUi node={mod.snapshot.ui.above_composer} onAction={(name, value) => action(mod, name, value)} />
+      </section>)}
+      {panelTarget && createPortal(<aside className="mods-panel mint-mods" aria-label="Workspace mods">
+      <header className="mods-panel-header"><span className="mods-panel-icon" aria-hidden="true"><Puzzle size={18} /></span><div className="mods-panel-title"><strong>Mods</strong><p>{mods.length} installed · {active.length} active</p></div></header>
+      {sidePanelMods.length > 0 && <nav aria-label="Mod panels"><button type="button" aria-pressed={tab === 'manage'} onClick={() => setTab('manage')}>Manage</button>{sidePanelMods.map(m => <button key={m.id} type="button" aria-pressed={tab === m.id} onClick={() => setTab(m.id)}>{m.name}</button>)}</nav>}
+      {error && <p role="alert" className="mod-error">{error}</p>}
+      {selected?.snapshot?.ui.side_panel && tab !== 'manage' ? <section className="mod-content"><ModUi node={selected.snapshot.ui.side_panel} onAction={(name, value) => action(selected, name, value)} /></section> : <div className="mod-content">
+        <div className="mods-toolbar"><label htmlFor="mods-scope">Enable for <select id="mods-scope" value={scope} onChange={e => setScope(e.target.value as typeof scope)}><option value="chat">This chat</option><option value="workspace">This workspace</option><option value="global">All workspaces</option></select></label><button type="button" className="mods-import" disabled={busy || !workspacePath || !chatId} onClick={() => importRef.current?.click()}><Upload size={14} aria-hidden="true" />Import</button></div>
+        <input ref={importRef} type="file" accept=".mintmod" hidden onChange={async e => {
+          const file = e.target.files?.[0]; e.target.value = ''; if (!file) return
+          if (file.size > 1024 * 1024) { setError('Package exceeds 1 MiB'); return }
+          const bytes = new Uint8Array(await file.arrayBuffer())
+          let binary = ''; for (const b of bytes) binary += String.fromCharCode(b)
+          const packed = btoa(binary)
+          if (currentScope.current !== `${workspacePath}\0${chatId}`) return
+          try {
+            const info = await modsPlatform.operation({ workspacePath: workspacePath!, chatId, action: 'inspect_package', package: packed })
+            if (currentScope.current !== `${workspacePath}\0${chatId}`) return
+            if (info.expectedHash && !window.confirm(`Replace source for ${info.id}? The active revision stays unchanged until you enable the imported source.`)) return
+            await operate({ action: 'import', package: packed, expectedHash: info.expectedHash || undefined })
+          } catch (e) { if (currentScope.current === `${workspacePath}\0${chatId}`) setError(String(e)) }
+        }} />
+        {loading && <p role="status" className="mods-empty">Loading mods…</p>}
+        {!loading && !mods.length && <div className="mods-empty"><Puzzle size={22} aria-hidden="true" /><strong>{workspacePath ? 'No mods yet' : 'Choose a workspace'}</strong><p>{workspacePath ? 'Ask Mint to create one, or import a .mintmod package. Imported mods stay off until enabled.' : 'Choose a workspace in chat to manage its mods.'}</p></div>}
+        {mods.map(mod => <article key={mod.id} className="mod-entry">
+          <div className="mod-entry-heading"><div><strong>{mod.name}</strong><small>Version {mod.manifest?.version || 'unknown'}</small></div><span className={`mod-status ${mod.error ? 'is-error' : mod.enabled ? 'is-active' : ''}`}>{mod.error ? 'Error' : mod.enabled ? 'Active' : 'Off'}</span></div>
+          {mod.changed && <p className="mod-hint">Source changed · active revision preserved</p>}
+          {mod.reloadError && <p role="alert" className="mod-error">Reload: {mod.reloadError}</p>}
+          {(mod.error || mod.sourceError) && <p role="alert" className="mod-error">{mod.error || mod.sourceError}</p>}
+          <p className="mod-hint">{mod.manifest?.permissions?.join(', ') || 'UI, events and mod state'}</p>
+          <div className="mod-entry-footer"><button type="button" className={`mod-primary-action ${mod.enabled && !mod.changed ? 'is-disable' : ''}`} disabled={busy || !mod.manifest} onClick={() => mod.enabled && !mod.changed ? void operate({ action: 'disable', id: mod.id }) : activate(mod)}>{mod.enabled && !mod.changed ? 'Disable' : mod.changed ? 'Validate & reload' : 'Enable'}</button>
+          <details className="mod-entry-more"><summary>More options <ChevronDown size={13} aria-hidden="true" /></summary>
+            <div className="mod-actions"><button type="button" disabled={busy || !mod.source} onClick={() => void operate({ action: 'export', id: mod.id })}>Export</button><button type="button" disabled={busy || !mod.source} onClick={() => void operate({ action: 'test', id: mod.id })}>Run tests</button></div>
+            {reports[mod.id] && <ModTestResults report={reports[mod.id]} />}
+            <details><summary>Source & diagnostics</summary><pre>{mod.source}</pre><pre>{mod.snapshot?.logs?.join('\n') || 'No log messages'}</pre><p className="mod-hint">Active revision: {mod.activeHash || 'None'}</p></details>
+            {mod.revisions.length > 1 && <label className="mod-revisions">Restore source revision <select value="" disabled={busy} onChange={e => { const hash = e.target.value; if (hash && window.confirm('Restore this source revision? Review and enable it after restoring.')) void operate({ action: 'rollback', id: mod.id, hash, expectedHash: mod.hash }) }}><option value="">Choose revision</option>{mod.revisions.filter(h => h !== mod.hash).map(h => <option key={h} value={h}>{h.slice(0, 12)}</option>)}</select></label>}
+          </details></div>
+        </article>)}
+        {data.toolRequests?.map(request => <article className="mod-entry" key={request.id}><strong>{request.modId}: {request.action}</strong><pre>{JSON.stringify(request.input, null, 2)}</pre><button type="button" disabled={busy} onClick={() => { if (window.confirm(`Run ${request.action} requested by ${request.modId}?\n${JSON.stringify(request.input, null, 2)}`)) void operate({ action: 'run_request', command: request.id, grantPermissions: true }) }}>Review & run tool</button></article>)}
+        <details className="mod-session-settings"><summary>Session settings <ChevronDown size={13} aria-hidden="true" /></summary><ModSessionControls enabled={data.session?.hotReload ?? false} busy={busy} onToggle={enabled => void operate({ action: 'hot_reload', value: enabled })} /></details>
+      </div>}
+      </aside>, panelTarget)}
+    </div>
+  </>
+}