@pheem49/mint 1.14.0 → 1.16.0

package/src/renderer/shared/components/ModsPanel.tsx

@@ -0,0 +1,156 @@
+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'
+
+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 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>())
+
+  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
+      try {
+        const value = await modsPlatform.operation({ workspacePath, chatId, action: 'list' })
+        if (!stopped && generation.current === current) {
+          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)
+    }
+    void refresh()
+    return () => {
+      stopped = true; clearTimeout(timer)
+      if (workspacePath && chatId) void modsPlatform.operation({ workspacePath, chatId, action: 'close' }).catch(() => {})
+    }
+  }, [workspacePath, chatId])
+
+  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>
+  </>
+}

package/src/renderer/shared/components/PlanChecklistWidget.tsx

@@ -20,7 +20,7 @@ export function PlanChecklistWidget({ plan, className = '' }: PlanChecklistWidge
     <div className={`plan-checklist-card ${className}`}>
       <div className="plan-checklist-header">
         <div className="plan-checklist-title">
-          <ListTodo style={{ width: '15px', height: '15px', color: 'var(--accent, #10b981)' }} />
+          <ListTodo style={{ width: '15px', height: '15px', color: 'var(--interactive-fg)' }} />
           <span>{plan.objective || 'Task Plan'}</span>
         </div>
         <span className="plan-checklist-count">

package/src/renderer/shared/components/PluginsView.tsx

@@ -294,7 +294,7 @@ export const PluginsView: React.FC<PluginsViewProps> = React.memo(function Plugi
 
                 {p.hasCredentials && p.fields && (
                   <div style={{ marginTop: '20px', paddingTop: '16px', borderTop: '1px solid var(--border, rgba(255, 255, 255, 0.08))' }}>
-                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--accent, #10b981)', textTransform: 'uppercase', letterSpacing: '0.5px', margin: '0 0 12px' }}>
+                    <h4 style={{ fontSize: '0.8rem', fontWeight: 600, color: 'var(--interactive-fg)', textTransform: 'none', letterSpacing: '0.5px', margin: '0 0 12px' }}>
                       Credentials
                     </h4>
                     <div style={{ display: 'grid', gap: '12px' }}>

package/src/renderer/shared/components/ProgressActivity.tsx

@@ -0,0 +1,17 @@
+import { memo, useCallback } from 'react'
+import type { AgentProgress } from '../types'
+import { activitiesFrom } from '../utils/agentActivity'
+import { AgentActivityDrawer } from './AgentActivityDrawer'
+
+export const ProgressActivity = memo(function ProgressActivity({ progress, id, isOpen, onToggle, historical = false, pendingApproval = false }: {
+  progress: AgentProgress[]
+  id: string
+  isOpen: boolean
+  onToggle: (id: string) => void
+  historical?: boolean
+  pendingApproval?: boolean
+}) {
+  const toggle = useCallback(() => onToggle(id), [id, onToggle])
+  return <AgentActivityDrawer activityView={activitiesFrom(progress)} rawProgress={progress}
+    isOpen={isOpen} onToggle={toggle} isHistorical={historical} pendingApproval={pendingApproval} />
+})

package/src/renderer/shared/components/ReviewHistory.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from 'react'
+import type { WorkspaceHistoryEntry } from '../types'
+
+export function undoDescription(entry: WorkspaceHistoryEntry) {
+  switch (entry.kind) {
+    case 'edit': return entry.backup ? 'Restore the saved content from before this edit.' : 'Move the file created by this edit to Trash.'
+    case 'create': return 'Move this created file or folder to Trash.'
+    case 'trash': return 'Restore this file or folder to its original location.'
+    case 'move': return `Move ${entry.destination || entry.path} back to ${entry.path}.`
+    default: return entry.label
+  }
+}
+
+export function HistoryDetails({ entry }: { entry: WorkspaceHistoryEntry }) {
+  return <dl className="review-history-details">
+    <dt>File</dt><dd>{entry.path}</dd>
+    <dt>Action</dt><dd>{entry.label.replace(/^Undo /, '')}</dd>
+    {entry.destination && <><dt>Destination</dt><dd>{entry.destination}</dd></>}
+    <dt>Undo will</dt><dd>{undoDescription(entry)}</dd>
+  </dl>
+}
+
+export function UndoConfirmation({ entry, busy, error, onCancel, onConfirm }: {
+  entry: WorkspaceHistoryEntry; busy: boolean; error: string; onCancel: () => void; onConfirm: () => void
+}) {
+  const dialog = useRef<HTMLDialogElement>(null)
+  useEffect(() => {
+    const element = dialog.current
+    element?.showModal()
+    return () => element?.close()
+  }, [])
+  return <dialog ref={dialog} className="review-undo-dialog" aria-labelledby="review-undo-title" onCancel={event => { event.preventDefault(); if (!busy) onCancel() }}>
+    <h3 id="review-undo-title">Confirm Undo</h3>
+    <HistoryDetails entry={entry} />
+    <p>Undo is refused if the file has changed since this action or the destination is occupied.</p>
+    {error && <p role="alert">{error}</p>}
+    <div className="review-undo-actions">
+      <button type="button" autoFocus disabled={busy} onClick={onCancel}>Cancel</button>
+      <button type="button" disabled={busy} onClick={onConfirm}>{busy ? 'Undoing…' : 'Confirm Undo'}</button>
+    </div>
+  </dialog>
+}

package/src/renderer/shared/components/RewindModal.tsx

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect } from 'react'
 import type { GitCheckpoint, FileChange } from '../types'
 
@@ -188,30 +189,22 @@ export const RewindModal: React.FC<RewindModalProps> = ({
             }}
           >
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              <span style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', textTransform: 'none', letterSpacing: '0.05em' }}>
                 Target Checkpoint
               </span>
               {checkpoints.length > 1 && (
-                <select
+                <SelectField aria-label="Target checkpoint" fullWidth={false}
                   value={selectedStep}
-                  onChange={(e) => setSelectedStep(Number(e.target.value))}
+                  onValueChange={(nextValue) => setSelectedStep(Number(nextValue))}
                   disabled={isLoading}
-                  style={{
-                    background: 'var(--input-bg, #111)',
-                    color: 'var(--text-main)',
-                    border: '1px solid var(--border)',
-                    borderRadius: '6px',
-                    fontSize: '12px',
-                    padding: '3px 8px',
-                    cursor: 'pointer',
-                  }}
+
                 >
                   {checkpoints.map((cp) => (
                     <option key={cp.step} value={cp.step}>
                       Step {cp.step} ({cp.commitHash.slice(0, 7)})
                     </option>
                   ))}
-                </select>
+                </SelectField>
               )}
             </div>
 
@@ -222,7 +215,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                     padding: '3px 8px',
                     borderRadius: '6px',
                     background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-                    color: 'var(--accent)',
+                    color: 'var(--interactive-fg)',
                     fontWeight: 600,
                     fontSize: '12px',
                   }}
@@ -262,7 +255,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
           {/* Affected Files List */}
           {changes.length > 0 && (
             <div>
-              <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+              <div style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'none', letterSpacing: '0.05em' }}>
                 Files in this turn ({changes.length})
               </div>
               <div
@@ -316,7 +309,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                             padding: '1px 6px',
                             borderRadius: '4px',
                             background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-                            color: 'var(--accent)',
+                            color: 'var(--interactive-fg)',
                           }}
                         >
                           [NEW FILE]
@@ -324,7 +317,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                       ) : (
                         <>
                           {file.additions > 0 && (
-                            <span style={{ fontSize: '11px', color: 'var(--accent)', fontWeight: 600 }}>
+                            <span style={{ fontSize: '11px', color: 'var(--interactive-fg)', fontWeight: 600 }}>
                               +{file.additions}
                             </span>
                           )}
@@ -408,7 +401,7 @@ export const RewindModal: React.FC<RewindModalProps> = ({
                   <polyline points="1 4 1 10 7 10" />
                   <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
                 </svg>
-                <span>Confirm Rewind</span>
+                <span>Confirm rewind</span>
               </>
             )}
           </button>

package/src/renderer/shared/components/RunSummaryDashboard.tsx

@@ -32,19 +32,13 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
       ? 'run-summary-badge rollback'
       : 'run-summary-badge failure'
 
-  const statusColor = isSuccess
-    ? 'var(--status-speaking, #22c55e)'
-    : isRolledBack
-      ? '#f59e0b'
-      : 'var(--status-error, #ef4444)'
-
   return (
     <div className={`run-summary-card ${className}`}>
       {/* Header */}
       <div className="run-summary-header">
         <div className="run-summary-title">
-          <Activity style={{ width: '15px', height: '15px', color: statusColor }} />
-          <span>Run Telemetry #{summary.runId}</span>
+          <Activity size={16} aria-hidden="true" />
+          <span className="run-summary-heading"><strong>Run summary</strong><small title={`Run ${summary.runId}`}>#{summary.runId}</small></span>
         </div>
         <div>
           <span className={badgeClass}>
@@ -80,8 +74,8 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
             <span>Tools</span>
           </div>
           <div className="run-kpi-value">
-            {summary.toolCallsCount}{' '}
-            <span className="run-kpi-subtext">({summary.retriesCount} retry)</span>
+            {summary.toolCallsCount}
+            {summary.retriesCount > 0 && <span className="run-kpi-subtext"> · {summary.retriesCount} retried</span>}
           </div>
         </div>
 
@@ -100,20 +94,20 @@ export function RunSummaryDashboard({ summary, className = '' }: Props) {
                 {summary.filesCreated.length}{' '}
                 <span className="run-kpi-subtext">created</span>
               </>
-            ) : (
+            ) : summary.filesChanged.length > 0 ? (
               <>
                 {summary.filesChanged.length}{' '}
                 <span className="run-kpi-subtext">modified</span>
               </>
-            )}
+            ) : <>0 <span className="run-kpi-subtext">files</span></>}
           </div>
         </div>
       </div>
 
-      {/* Tool Calls Timeline */}
+      {/* Tool call timeline */}
       {summary.toolTimeline && summary.toolTimeline.length > 0 && (
         <div className="run-timeline-container">
-          <div className="run-timeline-title">Tool Calls Timeline</div>
+          <div className="run-timeline-title">Tool call timeline</div>
           <div className="run-timeline-list">
             {summary.toolTimeline.map((item, idx) => (
               <div key={idx} className="run-timeline-item">

package/src/renderer/shared/components/ScheduledTasksView.tsx

@@ -1,3 +1,4 @@
+import SelectField from './SelectField'
 import React, { useState, useEffect, useMemo } from 'react'
 import { DateTime } from 'luxon'
 import { renderScheduledTasksSvgIcon, renderTaskLogoIcon } from '../constants/plugins'
@@ -94,7 +95,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
     const [showAddModal, setShowAddModal] = useState(false)
     const [detailJob, setDetailJob] = useState<CronJob | null>(null)
 
-    // Picker inputs for the "New Scheduled Task" form — build the cron
+    // Picker inputs for the "New scheduled task" form — build the cron
     // expression `newSchedule` from a clock/calendar UI instead of asking
     // everyone to type raw cron syntax. "custom" leaves newSchedule as a
     // free-text field for anyone who wants to type cron directly.
@@ -276,7 +277,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
               <span className="management-title-icon" style={{ display: 'inline-flex', alignItems: 'center' }}>
                 {renderScheduledTasksSvgIcon(22, 'var(--accent)')}
               </span>
-              Scheduled Tasks
+              Scheduled tasks
             </h1>
             <p className="management-subtitle">
               Tasks that run on a schedule in the background.
@@ -287,7 +288,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
               <line x1="12" y1="5" x2="12" y2="19" />
               <line x1="5" y1="12" x2="19" y2="12" />
             </svg>
-            New Scheduled Task
+            New scheduled task
           </button>
         </div>
 
@@ -442,7 +443,7 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
           <div className="management-modal-overlay">
             <div className="management-modal">
               <div className="management-modal-header">
-                <h2 className="management-modal-title">New Scheduled Task</h2>
+                <h2 className="management-modal-title">New scheduled task</h2>
                 <button type="button" className="management-modal-close" onClick={() => setShowAddModal(false)}>
                   ✕
                 </button>
@@ -465,17 +466,17 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
                   <div className="management-form-group">
                     <label className="management-label">When to run</label>
                     <div className="schedule-inline-row">
-                      <select
+                      <SelectField fullWidth={false} aria-label="When to run"
                         className="management-input-field schedule-repeat-select"
                         value={repeatMode}
-                        onChange={(e) => setRepeatMode(e.target.value as typeof repeatMode)}
+                        onValueChange={(nextValue) => setRepeatMode(nextValue as typeof repeatMode)}
                       >
                         <option value="daily">Daily</option>
                         <option value="weekly">Weekly</option>
                         <option value="monthly">Monthly</option>
                         <option value="once">One-time</option>
                         <option value="custom">Custom (cron)</option>
-                      </select>
+                      </SelectField>
 
                       {repeatMode === 'weekly' && (
                         <>
@@ -534,17 +535,17 @@ export const ScheduledTasksView: React.FC<ScheduledTasksViewProps> = React.memo(
                           onChange={(e) => setTimeOfDay(e.target.value)}
                           required
                         />
-                        <select
+                        <SelectField fullWidth={false} aria-label="Time zone"
                           className="management-input-field schedule-timezone-select"
                           value={taskTimezone}
-                          onChange={(e) => setTaskTimezone(e.target.value)}
+                          onValueChange={(nextValue) => setTaskTimezone(nextValue)}
                         >
                           {timezoneOptions.map((tz) => (
                             <option key={tz} value={tz}>
                               {tz}
                             </option>
                           ))}
-                        </select>
+                        </SelectField>
                       </div>
                     )}
                   </div>