@pheem49/mint 1.16.0 → 1.17.0

package/src/renderer/shared/components/{ArtifactPreviewPanel.tsx → workspace/ArtifactPreviewPanel.tsx}

@@ -1,18 +1,53 @@
-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'
+import React, { lazy, Suspense, useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import {
+  Image as ImageIcon,
+  FileCode,
+  FileText,
+  Globe,
+  Music,
+  Video,
+  File,
+  Eye,
+} from 'lucide-react'
+import { openArtifactInMintBrowser } from '../../utils/artifactBrowser'
+import { runtimePlatform } from '../../platform'
+import { renderFormattedMessage } from '../../utils/markdown'
+import { ChatCodeBlock } from '../chat/ChatCodeBlock'
+import WorkspaceFileInfo from './WorkspaceFileInfo'
+import WorkspaceMediaPreview from './WorkspaceMediaPreview'
 
-export type ArtifactType = 'html' | 'svg' | 'markdown' | 'image' | 'code'
-export type ViewportMode = 'desktop' | 'tablet' | 'mobile'
+const WorkspacePdfPreview = lazy(() => import('./WorkspacePdfPreview'))
 
-export interface ArtifactFile {
-  path: string
-  workspacePath?: string
-  url?: string
-  content?: string
-  type?: ArtifactType
+import {
+  type ArtifactFile,
+  type ArtifactType,
+  type ViewportMode,
+  detectArtifactType,
+  getFileLanguage,
+} from '../../utils/artifacts'
+
+export type { ArtifactFile, ArtifactType, ViewportMode }
+export { detectArtifactType, getFileLanguage }
+
+function renderArtifactTypeIcon(type: ArtifactType) {
+  switch (type) {
+    case 'image':
+      return <ImageIcon size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'html':
+      return <Globe size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'svg':
+    case 'code':
+      return <FileCode size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'markdown':
+    case 'pdf':
+      return <FileText size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'audio':
+      return <Music size={13} strokeWidth={2.2} aria-hidden="true" />
+    case 'video':
+      return <Video size={13} strokeWidth={2.2} aria-hidden="true" />
+    default:
+      return <File size={13} strokeWidth={2.2} aria-hidden="true" />
+  }
 }
 
 interface Props {
@@ -21,38 +56,25 @@ interface Props {
   workspacePath?: string
 }
 
-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'
-}
+export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props) {
+  const filePath = artifact?.path || ''
+  const fileName = useMemo(() => {
+    if (!filePath) return ''
+    const parts = filePath.replace(/\\/g, '/').split('/')
+    return parts[parts.length - 1] || filePath
+  }, [filePath])
 
-export function getFileLanguage(filePath: string): string {
-  const ext = filePath.split('.').pop()?.toLowerCase() || ''
-  const map: Record<string, string> = {
-    js: 'javascript',
-    jsx: 'javascript',
-    ts: 'typescript',
-    tsx: 'typescript',
-    html: 'html',
-    htm: 'html',
-    css: 'css',
-    json: 'json',
-    rs: 'rust',
-    py: 'python',
-    svg: 'xml',
-    md: 'markdown',
-  }
-  return map[ext] || ext || 'plaintext'
-}
+  const artifactType: ArtifactType = useMemo(() => {
+    if (artifact?.type) return artifact.type
+    return detectArtifactType(filePath)
+  }, [artifact, filePath])
 
-export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props) {
-  const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview')
+  const isDualMode = artifactType === 'html' || artifactType === 'svg' || artifactType === 'markdown'
+
+  const [activeTab, setActiveTab] = useState<'preview' | 'code'>(artifactType === 'code' ? 'code' : 'preview')
   const [viewport, setViewport] = useState<ViewportMode>('desktop')
   const [content, setContent] = useState<string>(artifact?.content || '')
+  const [imageUrl, setImageUrl] = useState(artifact?.url || '')
   const [loading, setLoading] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null)
   const [openingBrowser, setOpeningBrowser] = useState(false)
@@ -61,33 +83,70 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
   const currentArtifact = useRef(artifact)
   currentArtifact.current = artifact
   const [copied, setCopied] = useState<boolean>(false)
+  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null)
 
   const [reloadRevision, setReloadRevision] = useState(0)
   const requestRevision = useRef(0)
   const sourceWorkspace = artifact?.workspacePath ?? workspacePath
 
-  const filePath = artifact?.path || ''
-  const fileName = useMemo(() => {
-    if (!filePath) return ''
-    const parts = filePath.replace(/\\/g, '/').split('/')
-    return parts[parts.length - 1] || filePath
-  }, [filePath])
+  const language = useMemo(() => getFileLanguage(filePath), [filePath])
+  const mediaPreview = artifactType === 'pdf' || artifactType === 'audio' || artifactType === 'video'
 
-  const artifactType: ArtifactType = useMemo(() => {
-    if (artifact?.type) return artifact.type
-    return detectArtifactType(filePath)
-  }, [artifact, filePath])
+  const imageFormatLabel = useMemo(() => {
+    if (artifactType !== 'image') return 'Image'
+    const ext = filePath.split('.').pop()?.toUpperCase() || ''
+    if (ext === 'JPG') return 'JPEG'
+    if (['PNG', 'JPEG', 'WEBP', 'GIF', 'SVG', 'ICO', 'AVIF', 'BMP', 'TIFF'].includes(ext)) {
+      return ext
+    }
+    return 'IMAGE'
+  }, [artifactType, filePath])
 
-  const language = useMemo(() => getFileLanguage(filePath), [filePath])
+  const codeLabel = useMemo(() => {
+    if (!language || language === 'plaintext') return 'Code'
+    const customNames: Record<string, string> = {
+      javascript: 'JavaScript',
+      typescript: 'TypeScript',
+      python: 'Python',
+      rust: 'Rust',
+      json: 'JSON',
+      html: 'HTML',
+      css: 'CSS',
+      cpp: 'C++',
+      csharp: 'C#',
+      php: 'PHP',
+      ruby: 'Ruby',
+      shell: 'Shell',
+      bash: 'Bash',
+      sql: 'SQL',
+      yaml: 'YAML',
+      xml: 'XML',
+      toml: 'TOML',
+      markdown: 'Markdown',
+    }
+    return customNames[language.toLowerCase()] || (language.charAt(0).toUpperCase() + language.slice(1))
+  }, [language])
 
-  const fetchContent = useCallback(async () => {
+  const fetchContent = useCallback(async (refreshImage = false) => {
     const revision = ++requestRevision.current
     setError(null)
+    setImageDimensions(null)
     setReloadRevision((value) => value + 1)
     if (!filePath) return
+    if (refreshImage && activeTab === 'preview' && (artifactType === 'image' || artifactType === 'svg') && artifact?.url?.startsWith('data:image/') && sourceWorkspace) {
+      setLoading(true)
+      try {
+        const url = await runtimePlatform.readWorkspaceImage(filePath, sourceWorkspace)
+        if (requestRevision.current === revision) setImageUrl(url)
+      } catch (reason) {
+        if (requestRevision.current === revision) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally { if (requestRevision.current === revision) setLoading(false) }
+      return
+    }
     // Served previews load directly. Text is only needed when their Code tab is selected.
-    if (artifactType === 'image' || (artifact?.url && activeTab === 'preview')) {
+    if (mediaPreview || artifactType === 'file' || artifactType === 'image' || (artifact?.url && activeTab === 'preview')) {
       setLoading(false)
+      if (mediaPreview && !artifact?.url) setError('No media preview source is available')
       if (artifactType === 'image' && !artifact?.url) setError('No image preview URL is available')
       return
     }
@@ -102,24 +161,26 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
     } finally {
       if (requestRevision.current === revision) setLoading(false)
     }
-  }, [filePath, sourceWorkspace, artifact, artifactType, activeTab])
+  }, [filePath, sourceWorkspace, artifact, artifactType, activeTab, mediaPreview])
 
   useEffect(() => {
-    setActiveTab('preview')
+    setActiveTab(artifactType === 'code' ? 'code' : 'preview')
     setBrowserError(null)
     setContent(artifact?.content ?? '')
+    setImageUrl(artifact?.url ?? '')
+    setImageDimensions(null)
     setError(null)
-  }, [artifact])
+  }, [artifact, artifactType])
 
   useEffect(() => {
-    if (artifact?.content !== undefined && activeTab === 'preview') {
+    if (artifact?.content !== undefined && (activeTab === 'preview' || !filePath)) {
       setLoading(false)
       setError(null)
     } else {
       void fetchContent()
     }
     return () => { requestRevision.current += 1 }
-  }, [artifact, activeTab, fetchContent])
+  }, [artifact, activeTab, filePath, fetchContent])
 
   const handleCopyPath = async () => {
     if (!filePath) return
@@ -192,12 +253,12 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               borderRadius: 'var(--radius-xs, 4px)',
               background: 'color-mix(in srgb, var(--accent) 15%, transparent)',
               color: 'var(--interactive-fg)',
-              fontSize: '0.68rem',
-              fontWeight: 700,
               flexShrink: 0,
             }}
+            title={artifactType.toUpperCase()}
+            aria-label={`${artifactType} artifact`}
           >
-            {artifactType.toUpperCase().slice(0, 3)}
+            {renderArtifactTypeIcon(artifactType)}
           </span>
           <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column' }}>
             <span
@@ -236,51 +297,114 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
         {/* Center: Tabs & Viewport */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-          {/* Preview vs Code tab toggle */}
-          <div
-            style={{
-              display: 'inline-flex',
-              padding: '2px',
-              background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
-              borderRadius: 'var(--radius-sm, 6px)',
-              border: '1px solid var(--border)',
-            }}
-          >
-            <button
-              type="button"
-              onClick={() => setActiveTab('preview')}
-              style={{
-                background: activeTab === 'preview' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'preview' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
-              }}
-            >
-              Preview
-            </button>
-            {artifactType !== 'image' && <button
-              type="button"
-              onClick={() => setActiveTab('code')}
+          {/* Dual-mode (Preview vs Code): Only for HTML, SVG, and Markdown */}
+          {isDualMode ? (
+            <div
               style={{
-                background: activeTab === 'code' ? 'var(--accent)' : 'transparent',
-                color: activeTab === 'code' ? '#ffffff' : 'var(--text-muted)',
-                border: 'none',
-                borderRadius: 'var(--radius-xs, 4px)',
-                padding: '3px 9px',
-                fontSize: '0.75rem',
-                fontWeight: 500,
-                cursor: 'pointer',
-                transition: 'all 0.15s ease',
+                display: 'inline-flex',
+                padding: '2px',
+                background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                borderRadius: 'var(--radius-sm, 6px)',
+                border: '1px solid var(--border)',
               }}
             >
-              Code
-            </button>}
-          </div>
+              <button
+                type="button"
+                onClick={() => setActiveTab('preview')}
+                style={{
+                  background: activeTab === 'preview' ? 'var(--accent)' : 'transparent',
+                  color: activeTab === 'preview' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                  border: 'none',
+                  borderRadius: 'var(--radius-xs, 4px)',
+                  padding: '3px 9px',
+                  fontSize: '0.75rem',
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                }}
+              >
+                Preview
+              </button>
+              <button
+                type="button"
+                onClick={() => setActiveTab('code')}
+                style={{
+                  background: activeTab === 'code' ? 'var(--accent)' : 'transparent',
+                  color: activeTab === 'code' ? 'var(--text-on-accent)' : 'var(--text-muted)',
+                  border: 'none',
+                  borderRadius: 'var(--radius-xs, 4px)',
+                  padding: '3px 9px',
+                  fontSize: '0.75rem',
+                  fontWeight: 500,
+                  cursor: 'pointer',
+                  transition: 'all 0.15s ease',
+                }}
+              >
+                Code
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
+              <div
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '5px',
+                  padding: '3px 10px',
+                  background:
+                    artifactType === 'image' || artifactType === 'code'
+                      ? 'color-mix(in srgb, var(--accent) 10%, transparent)'
+                      : 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                  borderRadius: '9999px',
+                  border:
+                    artifactType === 'image' || artifactType === 'code'
+                      ? '1px solid color-mix(in srgb, var(--accent) 25%, transparent)'
+                      : '1px solid var(--border)',
+                  color: artifactType === 'image' || artifactType === 'code' ? 'var(--accent)' : 'var(--text-muted)',
+                  fontSize: '0.72rem',
+                  fontWeight: 500,
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {artifactType === 'code' ? (
+                  <FileCode size={12} strokeWidth={2.2} aria-hidden="true" />
+                ) : artifactType === 'image' ? (
+                  <ImageIcon size={12} strokeWidth={2.2} aria-hidden="true" />
+                ) : (
+                  <Eye size={12} strokeWidth={2.2} aria-hidden="true" />
+                )}
+                <span>
+                  {artifactType === 'code'
+                    ? codeLabel
+                    : artifactType === 'image'
+                      ? imageFormatLabel
+                      : artifactType === 'file'
+                        ? 'Details'
+                        : 'Preview'}
+                </span>
+              </div>
+              {artifactType === 'image' && imageDimensions && (
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    padding: '3px 9px',
+                    borderRadius: '9999px',
+                    background: 'color-mix(in srgb, var(--text-main) 6%, transparent)',
+                    border: '1px solid var(--border)',
+                    fontSize: '0.7rem',
+                    color: 'var(--text-muted)',
+                    fontFamily: 'var(--font-mono, monospace)',
+                    letterSpacing: '0.01em',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title="Image dimensions (width × height)"
+                >
+                  {imageDimensions.width} × {imageDimensions.height} px
+                </div>
+              )}
+            </div>
+          )}
 
           {/* Viewport switcher for HTML */}
           {activeTab === 'preview' && artifactType === 'html' && (
@@ -347,9 +471,9 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
 
         {/* Right actions */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-          <button
+          {!mediaPreview && <button
             type="button"
-            onClick={fetchContent}
+            onClick={() => { void fetchContent(true) }}
             disabled={loading}
             title="Reload content from file"
             style={{
@@ -378,9 +502,9 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               <polyline points="1 20 1 14 7 14" />
               <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
             </svg>
-          </button>
+          </button>}
 
-          <button
+          {artifactType === 'html' && <button
             type="button"
             onClick={() => { void handleOpenInMintBrowser() }}
             disabled={openingBrowser}
@@ -403,7 +527,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               <polyline points="15 3 21 3 21 9" />
               <line x1="10" y1="14" x2="21" y2="3" />
             </svg>
-          </button>
+          </button>}
 
           <button
             type="button"
@@ -453,7 +577,7 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
             <p style={{ fontSize: '0.8rem', opacity: 0.8 }}>{error}</p>
             <button
               type="button"
-              onClick={fetchContent}
+              onClick={() => { void fetchContent(true) }}
               style={{
                 marginTop: '12px',
                 padding: '4px 12px',
@@ -468,6 +592,12 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
               Retry
             </button>
           </div>
+        ) : artifactType === 'file' ? (
+          <WorkspaceFileInfo key={`${sourceWorkspace}:${filePath}`} path={filePath} root={sourceWorkspace} />
+        ) : artifactType === 'pdf' && artifact.url ? (
+          <Suspense fallback={<p role="status">Loading PDF viewer…</p>}><WorkspacePdfPreview key={artifact.url} url={artifact.url} path={filePath} root={sourceWorkspace} byteLength={artifact.byteLength} range={artifact.range} /></Suspense>
+        ) : (artifactType === 'audio' || artifactType === 'video') && artifact.url ? (
+          <WorkspaceMediaPreview key={artifact.url} kind={artifactType} url={artifact.url} path={filePath} root={sourceWorkspace} mimeType={artifact.mimeType} />
         ) : activeTab === 'code' ? (
           <div style={{ width: '100%', height: '100%', overflow: 'auto', padding: '12px' }}>
             <ChatCodeBlock code={content} language={language} />
@@ -505,10 +635,24 @@ export function ArtifactPreviewPanel({ artifact, onClose, workspacePath }: Props
           <div style={{ width: '100%', height: '100%', padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
             <img
               key={reloadRevision}
-              src={artifact.url}
+              ref={(el) => {
+                if (el && el.complete && el.naturalWidth && el.naturalHeight) {
+                  setImageDimensions((prev) => {
+                    if (prev?.width === el.naturalWidth && prev?.height === el.naturalHeight) return prev
+                    return { width: el.naturalWidth, height: el.naturalHeight }
+                  })
+                }
+              }}
+              src={imageUrl || 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.')}
+              onLoad={(e) => {
+                const img = e.currentTarget
+                if (img.naturalWidth && img.naturalHeight) {
+                  setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight })
+                }
+              }}
+              onError={() => setError('Unable to load image. Reload the preview or check that the file is still available.')}
             />
           </div>
         ) : artifactType === 'svg' ? (

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

@@ -0,0 +1,63 @@
+import { describe, expect, it } from 'vitest'
+import { backgroundPollIntervalMs, filterScopedJobs } from './BackgroundTerminals'
+import { shouldPollSessionSources } from '../../utils/useSessionSources'
+import type { BackgroundJob } from '../../types'
+
+describe('BackgroundTerminals scoping and polling optimization', () => {
+  const sampleJobs: BackgroundJob[] = [
+    {
+      id: 'job-1',
+      command: 'npm run dev',
+      workspacePath: '/home/user/project-a',
+      status: 'running',
+      createdAt: '2026-10-21T00:00:00Z',
+      exitCode: null,
+    },
+    {
+      id: 'job-2',
+      command: 'cargo build',
+      workspacePath: '/home/user/project-b',
+      status: 'completed',
+      createdAt: '2026-10-21T00:00:00Z',
+      exitCode: 0,
+    },
+    {
+      id: 'job-3',
+      command: 'vite preview',
+      workspacePath: '/home/user/project-a',
+      status: 'running',
+      createdAt: '2026-10-21T00:00:00Z',
+      exitCode: null,
+    },
+  ]
+
+  it('filters scoped jobs in memory without needing a second API request', () => {
+    const scopedA = filterScopedJobs(sampleJobs, '/home/user/project-a')
+    expect(scopedA.map(j => j.id)).toEqual(['job-1', 'job-3'])
+
+    const scopedB = filterScopedJobs(sampleJobs, '/home/user/project-b')
+    expect(scopedB.map(j => j.id)).toEqual(['job-2'])
+  })
+
+  it('returns empty array when workspacePath is null or undefined', () => {
+    expect(filterScopedJobs(sampleJobs, null)).toEqual([])
+    expect(filterScopedJobs(sampleJobs, undefined)).toEqual([])
+    expect(filterScopedJobs(sampleJobs, '')).toEqual([])
+  })
+
+  it('uses adaptive polling interval when background panel is closed and no jobs are running', () => {
+    const idleJobs = sampleJobs.filter(j => j.status === 'completed')
+    expect(backgroundPollIntervalMs(false, [])).toBe(10000)
+    expect(backgroundPollIntervalMs(false, idleJobs)).toBe(10000)
+    expect(backgroundPollIntervalMs(true, idleJobs)).toBe(3000)
+    expect(backgroundPollIntervalMs(false, sampleJobs)).toBe(3000)
+  })
+
+  it('polls session sources only when the Tools launcher or Sources tab is active', () => {
+    expect(shouldPollSessionSources(false, null)).toBe(false)
+    expect(shouldPollSessionSources(true, null)).toBe(true)
+    expect(shouldPollSessionSources(true, 'sources')).toBe(true)
+    expect(shouldPollSessionSources(true, 'term-1')).toBe(false)
+    expect(shouldPollSessionSources(true, 'review:1')).toBe(false)
+  })
+})

package/src/renderer/shared/components/{BackgroundTerminals.tsx → workspace/BackgroundTerminals.tsx}

@@ -1,20 +1,30 @@
 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 { 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 const filterScopedJobs = (jobs: BackgroundJob[], workspacePath?: string | null): BackgroundJob[] =>
+  workspacePath ? jobs.filter(job => job.workspacePath === workspacePath) : []
+
+export const backgroundPollIntervalMs = (open: boolean, jobs: BackgroundJob[]): number =>
+  open || jobs.some(active) ? 3000 : 10000
+
 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 openRef = useRef(open)
+  openRef.current = open
+  const jobsRef = useRef(jobs)
+  jobsRef.current = jobs
   const [all, setAll] = useState(false)
   const [selected, setSelected] = useState<string | null>(null)
   const [output, setOutput] = useState<BackgroundJobOutput | null>(null)
@@ -30,13 +40,25 @@ export function BackgroundTerminals({ workspacePath, panelTarget, onCountChange
   useEffect(() => {
     let disposed = false
     let busy = false
+    let timer: ReturnType<typeof window.setTimeout> | undefined
     setLoading(true)
+    const scheduleNext = (latestJobs: BackgroundJob[]) => {
+      if (disposed) return
+      if (timer !== undefined) window.clearTimeout(timer)
+      timer = window.setTimeout(() => void refresh(), backgroundPollIntervalMs(openRef.current, latestJobs))
+    }
     const refresh = async () => {
-      if (busy || document.hidden) return
+      if (busy || document.hidden) {
+        scheduleNext(jobsRef.current)
+        return
+      }
       busy = true
+      let latestJobs = jobsRef.current
       try {
-        const [next, scoped] = await Promise.all([backgroundPlatform.list(), workspacePath ? backgroundPlatform.list(workspacePath) : Promise.resolve([])])
+        const next = await backgroundPlatform.list()
         if (disposed) return
+        latestJobs = next
+        const scoped = filterScopedJobs(next, workspacePath)
         let message = ''
         for (const job of next) {
           const previous = statuses.current.get(job.id)
@@ -53,16 +75,25 @@ export function BackgroundTerminals({ workspacePath, panelTarget, onCountChange
         if (!disposed) {
           const message = String(cause)
           setError(`Status unavailable · ${message}`)
-          if (/401:|403:/.test(message)) { setJobs([]); setOutput(null); statuses.current.clear() }
+          if (/401:|403:/.test(message)) { latestJobs = []; setJobs([]); setOutput(null); statuses.current.clear() }
         }
-      } finally { busy = false; if (!disposed) setLoading(false) }
+      } finally {
+        busy = false
+        if (!disposed) {
+          setLoading(false)
+          scheduleNext(latestJobs)
+        }
+      }
     }
     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])
+    return () => {
+      disposed = true
+      if (timer !== undefined) window.clearTimeout(timer)
+      document.removeEventListener('visibilitychange', resume)
+    }
+  }, [workspacePath, open])
 
   useEffect(() => {
     if (!open || !selected) { setOutput(null); return }