feat(extensions): progress UI + error display during install

Show real-time install progress in the Extensions portal — polling
progress endpoint every 3s during install to display phase labels
(downloading, starting). Add status badges for installing, setting_up,
and error states. Fix frontend timeout from 120s to 300s to match backend.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yasinBursali

dream-server/extensions/services/dashboard/src/pages/Extensions.jsx

@@ -48,6 +48,9 @@ const STATUS_STYLES = {
   disabled:      'bg-zinc-700 text-zinc-400',
   not_installed: 'border border-zinc-700 text-zinc-500',
   incompatible:  'bg-orange-500/20 text-orange-400',
+  installing:    'bg-blue-500/20 text-blue-400',
+  setting_up:    'bg-blue-500/20 text-blue-400',
+  error:         'bg-red-500/20 text-red-300',
 }
 
 export default function Extensions() {
@@ -63,6 +66,8 @@ export default function Extensions() {
   const [toast, setToast] = useState(null)
   const [consoleExt, setConsoleExt] = useState(null)
   const [refreshing, setRefreshing] = useState(false)
+  const [installProgress, setInstallProgress] = useState(null)
+  const installProgressRef = useRef(null)
 
   useEffect(() => {
     fetchCatalog()
@@ -102,13 +107,30 @@ export default function Extensions() {
   const handleMutation = async (serviceId, action) => {
     setMutating(serviceId)
     setConfirm(null)
+
+    let pollInterval = null
+    if (action === 'install' || action === 'enable') {
+      pollInterval = setInterval(async () => {
+        try {
+          const res = await fetchJson(`/api/extensions/${serviceId}/progress`)
+          if (res.ok) {
+            const data = await res.json()
+            if (data.status !== 'idle') {
+            installProgressRef.current = data
+            setInstallProgress(data)
+          }
+          }
+        } catch { /* ignore polling errors */ }
+      }, 3000)
+    }
+
     try {
       const url = action === 'uninstall'
         ? `/api/extensions/${serviceId}`
         : `/api/extensions/${serviceId}/${action}`
       const res = await fetch(url, {
         method: action === 'uninstall' ? 'DELETE' : 'POST',
-        signal: AbortSignal.timeout(120000),
+        signal: AbortSignal.timeout(300000),
       })
       if (!res.ok) {
         const err = await res.json().catch(() => ({}))
@@ -123,8 +145,14 @@ export default function Extensions() {
       }
       await fetchCatalog()
     } catch (err) {
-      setToast({ type: 'error', text: friendlyError(err.message) || `Failed to ${action} extension` })
+      const progressError = installProgressRef.current?.service_id === serviceId
+          ? installProgressRef.current.error : null
+      const base = friendlyError(err.message) || `Failed to ${action} extension`
+      setToast({ type: 'error', text: progressError ? `${base} — ${progressError}` : base })
     } finally {
+      if (pollInterval) clearInterval(pollInterval)
+      installProgressRef.current = null
+      setInstallProgress(null)
       setMutating(null)
     }
   }
@@ -157,8 +185,8 @@ export default function Extensions() {
       .filter(Boolean)
   )]
 
-  const STATUS_FILTERS = ['all', 'enabled', 'stopped', 'disabled', 'not_installed', 'incompatible']
-  const STATUS_LABELS = { all: 'All', enabled: 'Enabled', stopped: 'Stopped', disabled: 'Disabled', not_installed: 'Not Installed', incompatible: 'Incompatible' }
+  const STATUS_FILTERS = ['all', 'enabled', 'stopped', 'disabled', 'installing', 'setting_up', 'error', 'not_installed', 'incompatible']
+  const STATUS_LABELS = { all: 'All', enabled: 'Enabled', stopped: 'Stopped', disabled: 'Disabled', installing: 'Installing', setting_up: 'Setting Up', error: 'Error', not_installed: 'Not Installed', incompatible: 'Incompatible' }
 
   // Filter extensions
   const query = search.toLowerCase()
@@ -212,6 +240,8 @@ export default function Extensions() {
           <SummaryItem label="Installed" value={summary.installed ?? 0} color="bg-green-500" />
           <SummaryItem label="Stopped" value={summary.stopped ?? 0} color="bg-red-500" />
           <SummaryItem label="Available" value={summary.not_installed ?? 0} color="bg-indigo-500" />
+          <SummaryItem label="Installing" value={summary.installing ?? 0} color="bg-blue-500" />
+          <SummaryItem label="Error" value={summary.error ?? 0} color="bg-red-500" />
           <SummaryItem label="Incompatible" value={summary.incompatible ?? 0} color="bg-orange-500" />
         </div>
       </div>
@@ -286,6 +316,7 @@ export default function Extensions() {
               onConsole={() => setConsoleExt(ext)}
               onAction={requestAction}
               mutating={mutating}
+              installProgress={installProgress}
             />
           ))}
         </div>
@@ -352,7 +383,7 @@ function SummaryItem({ label, value, color }) {
   )
 }
 
-function ExtensionCard({ ext, gpuBackend, agentAvailable, onDetails, onConsole, onAction, mutating }) {
+function ExtensionCard({ ext, gpuBackend, agentAvailable, onDetails, onConsole, onAction, mutating, installProgress }) {
   const iconName = ext.features?.[0]?.icon
   const Icon = (iconName && ICON_MAP[iconName]) || Package
   const status = ext.status || 'not_installed'
@@ -382,12 +413,16 @@ function ExtensionCard({ ext, gpuBackend, agentAvailable, onDetails, onConsole,
               status === 'enabled' ? 'bg-green-500/10' :
               status === 'stopped' ? 'bg-red-500/10' :
               status === 'incompatible' ? 'bg-orange-500/10' :
+              (status === 'installing' || status === 'setting_up') ? 'bg-blue-500/10' :
+              status === 'error' ? 'bg-red-500/10' :
               'bg-zinc-800'
             }`}>
               <Icon size={16} className={
                 status === 'enabled' ? 'text-green-400' :
                 status === 'stopped' ? 'text-red-400' :
                 status === 'incompatible' ? 'text-orange-400' :
+                (status === 'installing' || status === 'setting_up') ? 'text-blue-400' :
+                status === 'error' ? 'text-red-400' :
                 'text-zinc-400'
               } />
             </div>
@@ -406,6 +441,19 @@ function ExtensionCard({ ext, gpuBackend, agentAvailable, onDetails, onConsole,
               >
                 core
               </span>
+            ) : (status === 'installing' || status === 'setting_up') ? (
+              <span className="text-[10px] px-2 py-0.5 rounded-full bg-blue-500/20 text-blue-400 flex items-center gap-1">
+                <Loader2 size={8} className="animate-spin" />
+                {status === 'setting_up' ? 'setting up' : 'installing'}
+              </span>
+            ) : status === 'error' ? (
+              <span
+                className="text-[10px] px-2 py-0.5 rounded-full bg-red-500/20 text-red-300 cursor-pointer"
+                onClick={onConsole}
+                title="View error details"
+              >
+                error
+              </span>
             ) : (
               <span
                 className={`text-[10px] px-2 py-0.5 rounded-full uppercase tracking-wider ${statusStyle} ${(status === 'incompatible' || status === 'stopped') ? 'cursor-help' : ''}`}
@@ -437,6 +485,14 @@ function ExtensionCard({ ext, gpuBackend, agentAvailable, onDetails, onConsole,
         <p className="text-xs text-zinc-500 line-clamp-2 leading-relaxed">{ext.description || 'No description available.'}</p>
       </div>
 
+      {/* Progress indicator */}
+      {isMutating && installProgress?.service_id === ext.id && (
+        <div className="px-4 py-2 border-t border-zinc-800/60 text-xs text-blue-300 flex items-center gap-2">
+          <Loader2 size={12} className="animate-spin" />
+          <span>{installProgress.phase_label || 'Working...'}</span>
+        </div>
+      )}
+
       {/* Card footer */}
       <div className="border-t border-zinc-800/60 px-4 py-2.5 flex items-center justify-between bg-zinc-900/30">
         <div className="flex gap-1.5">