@pheem49/mint 1.14.0 → 1.16.0

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

@@ -1,13 +1,16 @@
-import React, { useState, useEffect, useCallback, useMemo } from 'react'
-import { readWorkspaceFile } from '@/tauri'
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { openArtifactInMintBrowser } from '../utils/artifactBrowser'
+import { runtimePlatform } from '../platform'
 import { renderFormattedMessage } from '../utils/markdown'
 import { ChatCodeBlock } from './ChatCodeBlock'
 
-export type ArtifactType = 'html' | 'svg' | 'markdown' | 'code'
+export type ArtifactType = 'html' | 'svg' | 'markdown' | 'image' | 'code'
 export type ViewportMode = 'desktop' | 'tablet' | 'mobile'
 
 export interface ArtifactFile {
   path: string
+  workspacePath?: string
+  url?: string
   content?: string
   type?: ArtifactType
 }
@@ -21,6 +24,7 @@ interface Props {
 export function detectArtifactType(filePath: string): ArtifactType {
   const lower = filePath.toLowerCase()
   if (lower.endsWith('.html') || lower.endsWith('.htm')) return 'html'
+  if (/\.(png|jpe?g|gif|webp|ico)$/.test(lower)) return 'image'
   if (lower.endsWith('.svg')) return 'svg'
   if (lower.endsWith('.md') || lower.endsWith('.markdown')) return 'markdown'
   return 'code'
@@ -51,8 +55,17 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
   const [content, setContent] = useState<string>(artifact?.content || '')
   const [loading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null)
+  const [openingBrowser, setOpeningBrowser] = useState(false)
+  const [browserError, setBrowserError] = useState<string | null>(null)
+  const browserInFlight = useRef(false)
+  const currentArtifact = useRef(artifact)
+  currentArtifact.current = artifact
   const [copied, setCopied] = useState<boolean>(false)
 
+  const [reloadRevision, setReloadRevision] = useState(0)
+  const requestRevision = useRef(0)
+  const sourceWorkspace = artifact?.workspacePath ?? workspacePath
+
   const filePath = artifact?.path || ''
   const fileName = useMemo(() => {
     if (!filePath) return ''
@@ -68,31 +81,45 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
   const language = useMemo(() => getFileLanguage(filePath), [filePath])
 
   const fetchContent = useCallback(async () => {
+    const revision = ++requestRevision.current
+    setError(null)
+    setReloadRevision((value) => value + 1)
     if (!filePath) return
+    // Served previews load directly. Text is only needed when their Code tab is selected.
+    if (artifactType === 'image' || (artifact?.url && activeTab === 'preview')) {
+      setLoading(false)
+      if (artifactType === 'image' && !artifact?.url) setError('No image preview URL is available')
+      return
+    }
     setLoading(true)
-    setError(null)
     try {
-      const text = await readWorkspaceFile(filePath, workspacePath)
-      setContent(text)
-    } catch (err: any) {
-      // If content was already supplied in artifact, fallback to it
-      if (artifact?.content) {
-        setContent(artifact.content)
-      } else {
-        setError(err?.message || 'Unable to read file content')
-      }
+      const text = await runtimePlatform.readWorkspaceFile(filePath, sourceWorkspace)
+      if (requestRevision.current === revision) setContent(text)
+    } catch (err: unknown) {
+      if (requestRevision.current !== revision) return
+      if (artifact?.content !== undefined) setContent(artifact.content)
+      else setError(err instanceof Error ? err.message : 'Unable to read file content')
     } finally {
-      setLoading(false)
+      if (requestRevision.current === revision) setLoading(false)
     }
-  }, [filePath, workspacePath, artifact])
+  }, [filePath, sourceWorkspace, artifact, artifactType, activeTab])
+
+  useEffect(() => {
+    setActiveTab('preview')
+    setBrowserError(null)
+    setContent(artifact?.content ?? '')
+    setError(null)
+  }, [artifact])
 
   useEffect(() => {
-    if (artifact?.content) {
-      setContent(artifact.content)
+    if (artifact?.content !== undefined && activeTab === 'preview') {
+      setLoading(false)
+      setError(null)
     } else {
-      fetchContent()
+      void fetchContent()
     }
-  }, [artifact, fetchContent])
+    return () => { requestRevision.current += 1 }
+  }, [artifact, activeTab, fetchContent])
 
   const handleCopyPath = async () => {
     if (!filePath) return
@@ -105,19 +132,21 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
     }
   }
 
-  const handleOpenExternal = () => {
-    if (!content) return
-    const mimeType =
-      artifactType === 'html'
-        ? 'text/html'
-        : artifactType === 'svg'
-          ? 'image/svg+xml'
-          : artifactType === 'markdown'
-            ? 'text/markdown'
-            : 'text/plain'
-    const blob = new Blob([content], { type: `${mimeType};charset=utf-8` })
-    const url = URL.createObjectURL(blob)
-    window.open(url, '_blank')
+  const handleOpenInMintBrowser = async () => {
+    if (!artifact || browserInFlight.current) return
+    browserInFlight.current = true
+    setOpeningBrowser(true)
+    setBrowserError(null)
+    try {
+      await openArtifactInMintBrowser(artifact, sourceWorkspace)
+    } catch (reason: unknown) {
+      if (currentArtifact.current === artifact) {
+        setBrowserError(reason instanceof Error ? reason.message : String(reason))
+      }
+    } finally {
+      browserInFlight.current = false
+      setOpeningBrowser(false)
+    }
   }
 
   if (!artifact) return null
@@ -162,7 +191,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               height: '24px',
               borderRadius: 'var(--radius-xs, 4px)',
               background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
-              color: 'var(--accent)',
+              color: 'var(--interactive-fg)',
               fontSize: '0.68rem',
               fontWeight: 700,
               flexShrink: 0,
@@ -234,7 +263,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
             >
               Preview
             </button>
-            <button
+            {artifactType !== 'image' && <button
               type="button"
               onClick={() => setActiveTab('code')}
               style={{
@@ -250,7 +279,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               }}
             >
               Code
-            </button>
+            </button>}
           </div>
 
           {/* Viewport switcher for HTML */}
@@ -353,8 +382,11 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
           <button
             type="button"
-            onClick={handleOpenExternal}
-            title="Open preview in new window"
+            onClick={() => { void handleOpenInMintBrowser() }}
+            disabled={openingBrowser}
+            aria-label="Open in Mint Browser (Mint Auto)"
+            aria-busy={openingBrowser}
+            title={openingBrowser ? 'Opening Mint Browser…' : 'Open in Mint Browser (Mint Auto)'}
             style={{
               background: 'none',
               border: 'none',
@@ -376,7 +408,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
           <button
             type="button"
             onClick={onClose}
-            title="Close Preview Panel"
+            title="Close preview Panel"
             style={{
               background: 'none',
               border: 'none',
@@ -396,6 +428,12 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
         </div>
       </header>
 
+      {browserError && (
+        <div role="alert" style={{ padding: '8px 14px', fontSize: '0.8rem', color: 'var(--status-error, #f87171)', flexShrink: 0 }}>
+          Could not open Mint Browser: {browserError}
+        </div>
+      )}
+
       {/* Main Content Area */}
       <div
         style={{
@@ -448,10 +486,13 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               transition: 'width 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
             }}
           >
+            {/* Served documents use their own loopback origin so relative assets can load. */}
             <iframe
               title={fileName}
-              srcDoc={content}
-              sandbox="allow-scripts allow-forms allow-modals"
+              key={reloadRevision}
+              src={artifact.url}
+              srcDoc={artifact.url ? undefined : content}
+              sandbox={artifact.url ? 'allow-scripts allow-forms allow-modals allow-same-origin' : 'allow-scripts allow-forms allow-modals'}
               style={{
                 width: '100%',
                 height: '100%',
@@ -460,6 +501,16 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               }}
             />
           </div>
+        ) : artifactType === 'image' || (artifactType === 'svg' && artifact.url) ? (
+          <div style={{ width: '100%', height: '100%', padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
+            <img
+              key={reloadRevision}
+              src={artifact.url}
+              alt={fileName}
+              style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+              onError={() => setError('Unable to load image. Check that the preview server is still running.')}
+            />
+          </div>
         ) : artifactType === 'svg' ? (
           <div
             style={{

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

@@ -1,15 +1,11 @@
-import React, { createContext, useContext, useEffect, useState } from 'react'
+import React, { createContext, useContext, useEffect, useId, useState } from 'react'
+import { Eye, EyeOff, LoaderCircle } from 'lucide-react'
 import type { AuthUser } from '../types'
-import {
-  APP_ICON_PATH,
-  authGetCurrentUser,
-  authLogin,
-  authLogout,
-  authRegister,
-  resolveAvatarUrl,
-} from '@/tauri'
+import { authPlatform, runtimePlatform } from '../platform'
 import '../css/auth-gate.css'
 
+const { authGetCurrentUser, authLogin, authLogout, authRegister, resolveAvatarUrl } = authPlatform
+
 interface AuthContextValue {
   user: AuthUser | null
   avatarUrl: string | null
@@ -103,11 +99,15 @@ function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
   const [name, setName] = useState('')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const passwordId = useId()
+  const errorId = useId()
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+    if (loading) return
     setLoading(true)
     setError(null)
     try {
@@ -117,7 +117,7 @@ function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
           : await authRegister(name || undefined, email, password)
       onSuccess(user)
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Something went wrong.')
+      setError(err instanceof Error && err.message.trim() ? err.message : 'Unable to continue. Please try again.')
     } finally {
       setLoading(false)
     }
@@ -126,19 +126,23 @@ function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
   return (
     <div className="auth-gate-overlay">
       <form className="auth-gate-card" onSubmit={handleSubmit}>
-        <img src={APP_ICON_PATH} alt="" className="auth-gate-logo" />
-        <h1 className="auth-gate-title">
-          {mode === 'login' ? 'Sign in to Mint' : 'Create your Mint account'}
-        </h1>
-        <p className="auth-gate-subtitle">
-          Uses the same account as Mint search — sign in once, use everywhere.
-        </p>
+        <img src={runtimePlatform.appIconPath()} alt="" className="auth-gate-logo" />
+        <div className="auth-gate-heading">
+          <h1 className="auth-gate-title">
+            {mode === 'login' ? 'Sign in to Mint' : 'Create your Mint account'}
+          </h1>
+          <p className="auth-gate-subtitle">
+            {mode === 'login' ? 'Sign in to continue to Mint' : 'Create an account to get started with Mint'}
+          </p>
+        </div>
 
         {mode === 'register' && (
           <label className="auth-gate-field">
             <span>Name</span>
             <input
               type="text"
+              autoComplete="name"
+              disabled={loading}
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="Your name"
@@ -150,6 +154,9 @@ function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
           <span>Email</span>
           <input
             type="email"
+            autoComplete="username"
+            disabled={loading}
+            aria-describedby={error ? errorId : undefined}
             required
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -157,39 +164,63 @@ function AuthForm({ onSuccess }: { onSuccess: (user: AuthUser) => void }) {
           />
         </label>
 
-        <label className="auth-gate-field">
-          <span>Password</span>
-          <input
-            type="password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="••••••••"
-          />
-        </label>
-
-        {error && <div className="auth-gate-error">{error}</div>}
-
-        <button type="submit" className="auth-gate-submit" disabled={loading}>
-          {loading
-            ? mode === 'login'
-              ? 'Signing in…'
-              : 'Creating account…'
-            : mode === 'login'
-              ? 'Sign in'
-              : 'Create account'}
+        <div className="auth-gate-field">
+          <label htmlFor={passwordId}>Password</label>
+          <div className="auth-gate-password">
+            <input
+              id={passwordId}
+              type={showPassword ? 'text' : 'password'}
+              autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
+              disabled={loading}
+              aria-describedby={error ? errorId : undefined}
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+            />
+            <button
+              type="button"
+              className="auth-gate-password-toggle"
+              aria-label={showPassword ? 'Hide password' : 'Show password'}
+              aria-controls={passwordId}
+              disabled={loading}
+              onClick={() => setShowPassword((visible) => !visible)}
+            >
+              {showPassword ? <EyeOff size={18} aria-hidden="true" /> : <Eye size={18} aria-hidden="true" />}
+            </button>
+          </div>
+        </div>
+
+        {error && <div id={errorId} className="auth-gate-error" role="alert">{error}</div>}
+
+        <button type="submit" className="auth-gate-submit" disabled={loading} aria-busy={loading}>
+          {loading && <LoaderCircle size={18} className="auth-gate-spinner" aria-hidden="true" />}
+          <span role="status">
+            {loading
+              ? mode === 'login'
+                ? 'Signing in…'
+                : 'Creating account…'
+              : mode === 'login'
+                ? 'Sign in'
+                : 'Create account'}
+          </span>
         </button>
 
-        <button
-          type="button"
-          className="auth-gate-switch"
-          onClick={() => {
-            setMode(mode === 'login' ? 'register' : 'login')
-            setError(null)
-          }}
-        >
-          {mode === 'login' ? "Don't have an account? Create one" : 'Already have an account? Sign in'}
-        </button>
+        <div className="auth-gate-account-prompt">
+          <span>{mode === 'login' ? "Don't have an account?" : 'Already have an account?'}</span>
+          <button
+            type="button"
+            className="auth-gate-switch"
+            disabled={loading}
+            onClick={() => {
+              setMode(mode === 'login' ? 'register' : 'login')
+              setShowPassword(false)
+              setError(null)
+            }}
+          >
+            {mode === 'login' ? 'Create account' : 'Sign in'}
+          </button>
+        </div>
       </form>
     </div>
   )

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

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Trash2, X } from 'lucide-react'
+import { backgroundPlatform, runtimePlatform } from '../platform'
+import type { BackgroundJob, BackgroundJobOutput } from '../types'
+import './background-terminals.css'
+
+const active = (job: BackgroundJob) => job.status === 'running' || job.status === 'stopping'
+const elapsed = (seconds: number) => `${Math.floor(seconds / 60).toString().padStart(2, '0')}:${(seconds % 60).toString().padStart(2, '0')}`
+const workspaceName = (path: string) => path.split(/[\\/]/).filter(Boolean).pop() || path
+
+export function BackgroundTerminals({ workspacePath, panelTarget, onCountChange }: {
+  workspacePath?: string | null; panelTarget: HTMLElement | null; onCountChange: (count: number) => void
+}) {
+  const [jobs, setJobs] = useState<BackgroundJob[]>([])
+  const [scope, setScope] = useState<{ workspace: string | null | undefined; ids: Set<string> }>({ workspace: undefined, ids: new Set() })
+  const open = Boolean(panelTarget)
+  const [all, setAll] = useState(false)
+  const [selected, setSelected] = useState<string | null>(null)
+  const [output, setOutput] = useState<BackgroundJobOutput | null>(null)
+  const [error, setError] = useState('')
+  const [actionError, setActionError] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [notice, setNotice] = useState('')
+  const [follow, setFollow] = useState(true)
+  const [pending, setPending] = useState<Set<string>>(new Set())
+  const log = useRef<HTMLDivElement>(null)
+  const statuses = useRef(new Map<string, string>())
+
+  useEffect(() => {
+    let disposed = false
+    let busy = false
+    setLoading(true)
+    const refresh = async () => {
+      if (busy || document.hidden) return
+      busy = true
+      try {
+        const [next, scoped] = await Promise.all([backgroundPlatform.list(), workspacePath ? backgroundPlatform.list(workspacePath) : Promise.resolve([])])
+        if (disposed) return
+        let message = ''
+        for (const job of next) {
+          const previous = statuses.current.get(job.id)
+          if (previous && (previous === 'running' || previous === 'stopping') && !active(job)) {
+            message = `${workspaceName(job.workspacePath)} · ${job.id}: ${job.status}${job.exitCode !== null ? ` (exit ${job.exitCode})` : ''}`
+          }
+          statuses.current.set(job.id, job.status)
+        }
+        if (message) setNotice(message)
+        setJobs(next)
+        setScope({ workspace: workspacePath, ids: new Set(scoped.map(job => job.id)) })
+        setError('')
+      } catch (cause) {
+        if (!disposed) {
+          const message = String(cause)
+          setError(`Status unavailable · ${message}`)
+          if (/401:|403:/.test(message)) { setJobs([]); setOutput(null); statuses.current.clear() }
+        }
+      } finally { busy = false; if (!disposed) setLoading(false) }
+    }
+    void refresh()
+    const timer = window.setInterval(() => void refresh(), 1000)
+    const resume = () => { if (!document.hidden) void refresh() }
+    document.addEventListener('visibilitychange', resume)
+    return () => { disposed = true; window.clearInterval(timer); document.removeEventListener('visibilitychange', resume) }
+  }, [workspacePath])
+
+  useEffect(() => {
+    if (!open || !selected) { setOutput(null); return }
+    let disposed = false
+    let busy = false
+    setOutput(null)
+    setActionError('')
+    setFollow(true)
+    const refresh = async () => {
+      if (busy || document.hidden) return
+      busy = true
+      try {
+        const next = await backgroundPlatform.output(selected)
+        if (!disposed) { setOutput(next); setActionError('') }
+      } catch (cause) { if (!disposed) setActionError(String(cause)) }
+      finally { busy = false }
+    }
+    void refresh()
+    const timer = window.setInterval(() => void refresh(), 1000)
+    document.addEventListener('visibilitychange', refresh)
+    return () => { disposed = true; window.clearInterval(timer); document.removeEventListener('visibilitychange', refresh) }
+  }, [open, selected])
+
+  useEffect(() => { if (follow && log.current) log.current.scrollTop = log.current.scrollHeight }, [output, follow])
+  useEffect(() => { if (!notice) return; const timer = window.setTimeout(() => setNotice(''), 6000); return () => window.clearTimeout(timer) }, [notice])
+  useEffect(() => {
+    setSelected(null)
+    setAll(false)
+  }, [workspacePath])
+
+  const current = jobs.filter(job => scope.workspace === workspacePath && scope.ids.has(job.id))
+  const count = current.filter(active).length
+  useEffect(() => { onCountChange(count) }, [count, onCountChange])
+  const visible = all ? jobs : current
+  const openServer = async (url: string) => {
+    setActionError('')
+    try {
+      if (runtimePlatform.isTauriRuntime()) {
+        const { invoke } = await import('@tauri-apps/api/core')
+        await invoke('run_desktop_action', { action: { type: 'open_url', target: url } })
+      } else {
+        const opened = window.open(url, '_blank', 'noopener,noreferrer')
+        if (!opened) throw new Error('The browser blocked the new tab')
+      }
+    } catch (cause) {
+      setActionError(`Could not open browser: ${String(cause)}`)
+    }
+  }
+  const stop = async (job: BackgroundJob) => {
+    setPending(previous => new Set(previous).add(job.id))
+    setActionError('')
+    try {
+      const next = await backgroundPlatform.stop(job.id)
+      setJobs(previous => previous.map(item => item.id === job.id ? next : item))
+    } catch (cause) { setActionError(String(cause)) }
+    finally { setPending(previous => { const next = new Set(previous); next.delete(job.id); return next }) }
+  }
+  const remove = async (job: BackgroundJob) => {
+    setPending(previous => new Set(previous).add(job.id))
+    setActionError('')
+    try {
+      await backgroundPlatform.delete(job.id)
+      setJobs(previous => previous.filter(item => item.id !== job.id))
+      if (selected === job.id) setSelected(null)
+      statuses.current.delete(job.id)
+    } catch (cause) { setActionError(String(cause)) }
+    finally { setPending(previous => { const next = new Set(previous); next.delete(job.id); return next }) }
+  }
+  const canOpen = Boolean(runtimePlatform.isTauriRuntime()) || ['localhost', '127.0.0.1', '[::1]'].includes(window.location.hostname)
+
+  return <>
+    {notice && <span className="background-task-announcement" role="status">{notice}</span>}
+    {panelTarget && createPortal(<section className="background-terminals background-terminal-panel" aria-label="Background tasks">
+      <header className="background-terminal-panel-header">
+        <span className="background-terminal-heading-icon" aria-hidden="true">›_</span>
+        <span className="background-terminal-panel-title">
+          <strong>Background tasks</strong>
+          <small>{all ? 'All workspaces' : workspaceName(workspacePath || '') || 'No workspace'}</small>
+        </span>
+      </header>
+      {notice && <p>{notice}</p>}
+      <label className="background-terminal-filter"><input type="checkbox" checked={all} onChange={event => { setAll(event.target.checked); setSelected(null) }} /> All workspaces</label>
+      {error && <p role="status" className="background-terminal-error">{error}</p>}
+      {actionError && <p role="alert" className="background-terminal-error">{actionError}</p>}
+      <div className="background-terminal-list">
+        {!visible.length && <div className="background-terminal-empty" role="status">
+          <span aria-hidden="true">›_</span>
+          <strong>{loading ? 'Loading tasks…' : error ? 'Waiting for connection…' : 'No background tasks'}</strong>
+          {!loading && !error && <small>Commands started in the background will appear here.</small>}
+        </div>}
+        {[...visible].reverse().map(job => <article key={job.id} className="background-terminal-job">
+          <div className="background-terminal-job-heading"><strong>{job.id}</strong><span className={`background-terminal-state ${job.status}`}>{job.status}</span><span>{elapsed(job.elapsedSeconds)}</span></div>
+          <code title={job.command}>{job.command}</code>
+          <small>{workspaceName(job.workspacePath)} · {job.cwd}{job.exitCode !== null ? ` · exit ${job.exitCode}` : ''}</small>
+          {job.error && <small className="background-terminal-error">{job.error}</small>}
+          <div className="background-terminal-actions">
+            <button type="button" onClick={() => { setSelected(job.id); setFollow(true) }}>View output</button>
+            {job.serverUrl && (canOpen ? <button type="button" onClick={() => void openServer(job.serverUrl!)}>Open browser</button> : <small>Backend-local address: {job.serverUrl} · unavailable from this device</small>)}
+            {!active(job) && <button type="button" className="background-terminal-delete" aria-label={`Remove terminal ${job.id}`} title="Remove terminal" disabled={pending.has(job.id)} onClick={() => void remove(job)}><Trash2 size={14} aria-hidden="true" /></button>}
+            {active(job) && <button type="button" className="background-terminal-stop" disabled={Boolean(error) || pending.has(job.id) || job.status === 'stopping'} onClick={() => void stop(job)}>{job.status === 'stopping' || pending.has(job.id) ? 'Stopping…' : 'Stop'}</button>}
+          </div>
+        </article>)}
+      </div>
+      {selected && <section aria-label={`Output for ${selected}`} className="background-terminal-output">
+        <header><strong>{selected} · output</strong><label><input type="checkbox" checked={follow} onChange={event => setFollow(event.target.checked)} /> Follow</label><button type="button" aria-label="Close terminal output" title="Close output" onClick={() => setSelected(null)}><X size={14} aria-hidden="true" /></button></header>
+        {output?.truncated && <small>Older output was truncated.</small>}
+        <div ref={log} className="background-terminal-log" onWheel={event => { if (event.deltaY < 0) setFollow(false) }} onKeyDown={event => { if (['PageUp', 'ArrowUp', 'Home'].includes(event.key)) setFollow(false) }} onScroll={event => {
+          const element = event.currentTarget
+          if (element.scrollHeight - element.scrollTop - element.clientHeight > 30) setFollow(false)
+        }} tabIndex={0}>
+          {output ? <><strong>stdout</strong><pre>{output.stdout || '(empty)'}</pre><strong>stderr</strong><pre>{output.stderr || '(empty)'}</pre></> : <p>{actionError ? 'Output unavailable.' : 'Loading output…'}</p>}
+        </div>
+      </section>}
+    </section>, panelTarget)}
+  </>
+}