@nextclaw/ui 0.15.26 → 0.15.28

package/src/features/apps/components/app-package-card.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
-import type { AppPackageView } from '@nextclaw/client-sdk';
+import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import {
+  AlertCircle,
   AppWindow,
   Bookmark,
   CalendarDays,
+  Check,
   CheckSquare2,
   ChevronRight,
   MoreHorizontal,
@@ -12,12 +14,22 @@ import {
   RotateCcw,
   Server,
   Trash2,
+  LoaderCircle,
   type LucideIcon,
 } from 'lucide-react';
+import { AppArtwork } from '@/features/apps/components/app-artwork';
+import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
-import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { getLanguage, t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
@@ -25,6 +37,7 @@ import { cn } from '@/shared/lib/utils';
 export function AppPackageCard({
   appPackage,
   isPending,
+  operation,
   onDisable,
   onEnable,
   onOpenPanelApp,
@@ -35,33 +48,35 @@ export function AppPackageCard({
 }: {
   appPackage: AppPackageView;
   isPending: boolean;
+  operation?: AppPackageOperationView;
   onDisable: () => void;
   onEnable: () => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
   onRollback: (version: string) => void;
-  onUninstall: () => void;
+  onUninstall: (purgeData: boolean) => void;
   onUpdate: () => void;
   panelApps: PanelAppEntryView[];
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const [uninstallOpen, setUninstallOpen] = useState(false);
+  const [purgeData, setPurgeData] = useState(false);
   const panelComponents = appPackage.components.filter((component) => component.kind === 'panel');
   const serviceCount = appPackage.components.length - panelComponents.length;
   const rollbackVersions = appPackage.installedVersions.filter(
     (version) => version !== appPackage.activeVersion,
   );
-  const displayName = readLocalizedText(appPackage.name, appPackage.nameI18n);
+  const displayName = readLocalizedText(appPackage.name, appPackage.nameI18n) ?? appPackage.id;
   const displayDescription = readLocalizedText(
     appPackage.description,
     appPackage.descriptionI18n,
   );
+  const operationActive = operation ? isAppPackageOperationActive(operation.status) : false;
+  const pending = isPending || operationActive;
 
   return (
-    <Card surface="flat" hover={false} className="overflow-hidden">
-      <div className="flex items-start gap-3 px-3.5 pb-3 pt-3.5">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
-          <AppWindow className="h-5 w-5" />
-        </div>
+    <Card surface="flat" hover={false} className="overflow-hidden border-border/60 shadow-[0_1px_2px_rgba(0,0,0,0.025)]">
+      <div className="flex items-start gap-3.5 px-4 pb-3.5 pt-4">
+        <AppArtwork icon={appPackage.icon} name={displayName} />
         <div className="min-w-0 flex-1">
           <div className="flex min-w-0 items-center gap-2">
             <h2 className="truncate text-sm font-semibold text-foreground">{displayName}</h2>
@@ -95,39 +110,37 @@ export function AppPackageCard({
             type="button"
             size="sm"
             variant={appPackage.enabled ? 'outline' : 'default'}
-            disabled={isPending}
+            disabled={pending}
             onClick={appPackage.enabled ? onDisable : onEnable}
           >
-            {isPending
-              ? t('appPackagesWorking')
-              : appPackage.enabled
-                ? t('appPackagesDisable')
-                : t('appPackagesEnable')}
+            {renderPrimaryActionLabel({
+              enabled: appPackage.enabled,
+              isPending,
+              operation,
+              operationActive,
+            })}
           </Button>
-          {(!appPackage.builtIn || rollbackVersions.length > 0) ? (
-            <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
               <PopoverTrigger asChild>
                 <button
                   type="button"
                   aria-label={t('appPackagesMoreActions')}
                   title={t('appPackagesMoreActions')}
-                  disabled={isPending}
+                  disabled={pending}
                   className="rounded-full p-2 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
                 >
                   <MoreHorizontal className="h-4 w-4" />
                 </button>
               </PopoverTrigger>
               <PopoverContent align="end" className="w-52 rounded-xl p-1.5">
-                {!appPackage.builtIn ? (
-                  <AppPackageMenuItem
-                    icon={RefreshCw}
-                    label={t('appPackagesCheckUpdate')}
-                    onClick={() => {
-                      setMenuOpen(false);
-                      onUpdate();
-                    }}
-                  />
-                ) : null}
+                <AppPackageMenuItem
+                  icon={RefreshCw}
+                  label={t('appPackagesCheckUpdate')}
+                  onClick={() => {
+                    setMenuOpen(false);
+                    onUpdate();
+                  }}
+                />
                 {rollbackVersions.map((version) => (
                   <AppPackageMenuItem
                     key={version}
@@ -139,23 +152,24 @@ export function AppPackageCard({
                     }}
                   />
                 ))}
-                {!appPackage.builtIn ? (
-                  <AppPackageMenuItem
-                    destructive
-                    icon={Trash2}
-                    label={t('appPackagesUninstall')}
-                    onClick={() => {
-                      setMenuOpen(false);
-                      setUninstallOpen(true);
-                    }}
-                  />
-                ) : null}
+                <AppPackageMenuItem
+                  destructive
+                  icon={Trash2}
+                  label={t('appPackagesUninstall')}
+                  onClick={() => {
+                    setMenuOpen(false);
+                    setUninstallOpen(true);
+                  }}
+                />
               </PopoverContent>
             </Popover>
-          ) : null}
         </div>
       </div>
 
+      {operation && (operationActive || operation.status === 'failed' || operation.status === 'interrupted') ? (
+        <PackageOperationStatus operation={operation} />
+      ) : null}
+
       {panelComponents.length > 0 ? (
         <div className="border-t border-border/60 bg-muted/20 p-2">
           <div className="grid grid-cols-2 gap-1.5">
@@ -168,7 +182,7 @@ export function AppPackageCard({
                 <button
                   key={component.id}
                   type="button"
-                  disabled={!appPackage.enabled || !panelApp || isPending}
+                  disabled={!appPackage.enabled || !panelApp || pending}
                   onClick={() => panelApp && onOpenPanelApp({
                     ...panelApp,
                     title: componentTitle,
@@ -196,20 +210,108 @@ export function AppPackageCard({
         </div>
       ) : null}
 
-      <ConfirmDialog
-        open={uninstallOpen}
-        onOpenChange={setUninstallOpen}
-        title={t('appPackagesUninstallTitle')}
-        description={t('appPackagesUninstallDescription')}
-        confirmLabel={t('appPackagesUninstall')}
-        variant="destructive"
-        onConfirm={onUninstall}
-        onCancel={() => undefined}
-      />
+      <Dialog open={uninstallOpen} onOpenChange={setUninstallOpen}>
+        <DialogContent className="max-w-md [&>:last-child]:hidden">
+          <DialogHeader>
+            <DialogTitle>{t('appPackagesUninstallTitle')}</DialogTitle>
+            <DialogDescription>{t('appPackagesUninstallDescription')}</DialogDescription>
+          </DialogHeader>
+          <div className="mt-4 grid gap-2">
+            <DataChoice
+              checked={!purgeData}
+              description={t('appPackagesKeepDataDescription')}
+              label={t('appPackagesKeepData')}
+              onClick={() => setPurgeData(false)}
+            />
+            <DataChoice
+              checked={purgeData}
+              destructive
+              description={t('appPackagesDeleteDataDescription')}
+              label={t('appPackagesDeleteData')}
+              onClick={() => setPurgeData(true)}
+            />
+          </div>
+          <DialogFooter className="mt-5 gap-2 sm:gap-0">
+            <Button type="button" variant="outline" onClick={() => setUninstallOpen(false)}>
+              {t('cancel')}
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={() => {
+                onUninstall(purgeData);
+                setUninstallOpen(false);
+              }}
+            >
+              {t('appPackagesUninstall')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }
 
+function renderPrimaryActionLabel({
+  enabled,
+  isPending,
+  operation,
+  operationActive,
+}: {
+  enabled: boolean;
+  isPending: boolean;
+  operation?: AppPackageOperationView;
+  operationActive: boolean;
+}) {
+  if (operationActive) {
+    return (
+      <>
+        <LoaderCircle className="mr-1.5 h-3.5 w-3.5 animate-spin" />
+        {operation ? operationLabel(operation) : t('appPackagesWorking')}
+      </>
+    );
+  }
+  if (isPending) return t('appPackagesWorking');
+  return enabled ? t('appPackagesDisable') : t('appPackagesEnable');
+}
+
+function DataChoice({
+  checked,
+  description,
+  destructive = false,
+  label,
+  onClick,
+}: {
+  checked: boolean;
+  description: string;
+  destructive?: boolean;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      aria-pressed={checked}
+      onClick={onClick}
+      className={cn(
+        'flex items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+        checked ? 'border-foreground/25 bg-muted/55' : 'border-border/60 hover:bg-muted/35',
+      )}
+    >
+      <span className={cn(
+        'mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border',
+        checked ? 'border-foreground bg-foreground text-background' : 'border-border',
+      )}>
+        {checked ? <Check className="h-2.5 w-2.5" /> : null}
+      </span>
+      <span>
+        <span className={cn('block text-sm font-medium', destructive ? 'text-destructive' : 'text-foreground')}>{label}</span>
+        <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">{description}</span>
+      </span>
+    </button>
+  );
+}
+
 function AppPackageMenuItem({
   destructive = false,
   icon: Icon,
@@ -245,12 +347,59 @@ function ComponentIcon({
   fallback: LucideIcon;
   icon?: string;
 }) {
-  if (icon && !icon.startsWith('/') && !icon.includes('://')) {
+  if (icon && (
+    icon.startsWith('data:') ||
+    icon.startsWith('/') ||
+    icon.startsWith('http://') ||
+    icon.startsWith('https://')
+  )) {
+    return <img src={icon} alt="" className="h-4 w-4 rounded object-cover" />;
+  }
+  if (icon) {
     return <span className="text-sm leading-none">{icon}</span>;
   }
   return <Fallback className="h-3.5 w-3.5" />;
 }
 
+function PackageOperationStatus({ operation }: { operation: AppPackageOperationView }) {
+  const failed = operation.status === 'failed' || operation.status === 'interrupted';
+  const progress = Math.max(4, Math.round((operation.completedSteps / operation.totalSteps) * 100));
+  return (
+    <div className="border-t border-border/50 px-4 py-2.5" role={failed ? 'alert' : 'status'} aria-live="polite">
+      <div className="flex items-center gap-2 text-[11px]">
+        {failed ? <AlertCircle className="h-3.5 w-3.5 text-destructive" /> : <LoaderCircle className="h-3.5 w-3.5 animate-spin text-primary" />}
+        <span className={failed ? 'text-destructive' : 'text-muted-foreground'}>
+          {failed ? operation.error ?? t('appPackagesActionFailed') : operationLabel(operation)}
+        </span>
+      </div>
+      <div className="mt-2 h-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className={cn('h-full rounded-full transition-[width] duration-300', failed ? 'bg-destructive' : 'bg-primary')}
+          style={{ width: failed ? '100%' : `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function operationLabel(operation: AppPackageOperationView): string {
+  switch (operation.status) {
+    case 'queued': return t('appPackagesPreparing');
+    case 'resolving': return t('appPackagesResolving');
+    case 'downloading': return t('appPackagesDownloading');
+    case 'verifying': return t('appPackagesVerifying');
+    case 'installing': return operation.action === 'rollback'
+      ? `${t('appPackagesSwitchingVersion')} ${operation.targetVersion ? `v${operation.targetVersion}` : ''}`.trim()
+      : operation.action === 'uninstall'
+        ? t('appPackagesUninstalling')
+        : t('appPackagesInstalling');
+    case 'finalizing': return t('appPackagesFinalizing');
+    case 'succeeded': return t('appPackagesCompleted');
+    case 'failed':
+    case 'interrupted': return t('appPackagesActionFailed');
+  }
+}
+
 function resolveComponentIcon(componentId: string): LucideIcon {
   if (componentId.endsWith('-todos')) return CheckSquare2;
   if (componentId.endsWith('-notes')) return NotebookText;

package/src/features/apps/components/app-packages-panel.tsx

@@ -1,13 +1,17 @@
-import { useState, type FormEvent, type ReactNode } from 'react';
-import type { AppPackageView } from '@nextclaw/client-sdk';
-import { Boxes, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
+import { useMemo, useState, type FormEvent } from 'react';
+import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
+import { AppArtwork } from '@/features/apps/components/app-artwork';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { useAppPresenter } from '@/app/components/app-presenter-provider';
 import { AppMarketplaceDialog } from '@/features/apps/components/app-marketplace-dialog';
 import { AppPackageCard } from '@/features/apps/components/app-package-card';
 import {
   useAppPackageMutation,
+  useAppPackageOperationSettlement,
+  useAppPackageOperations,
   useAppPackages,
+  isAppPackageOperationActive,
   type AppPackageMutationInput,
 } from '@/features/apps/hooks/use-app-packages';
 import {
@@ -29,13 +33,12 @@ import { Skeleton } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppPackagesPanel({
-  headerContent,
   onOpenPanelApp,
 }: {
-  headerContent?: ReactNode;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const appPackages = useAppPackages();
+  const appPackageOperations = useAppPackageOperations();
   const panelApps = usePanelApps();
   const lifecycle = useAppPackageMutation();
   const recordOpened = useRecordPanelAppOpened();
@@ -45,6 +48,19 @@ export function AppPackagesPanel({
   const [installSource, setInstallSource] = useState('');
   const [marketplaceOpen, setMarketplaceOpen] = useState(false);
 
+  const operations = useMemo(
+    () => appPackageOperations.data?.entries ?? [],
+    [appPackageOperations.data?.entries],
+  );
+
+  useAppPackageOperationSettlement({
+    isLoaded: Boolean(appPackageOperations.data),
+    operations,
+    refetchPackages: appPackages.refetch,
+    refetchPanels: panelApps.refetch,
+    settlementManager: presenter.appPackageOperationSettlementManager,
+  });
+
   const runMutation = (input: AppPackageMutationInput, onSuccess?: () => void) => {
     lifecycle.reset();
     lifecycle.mutate(input, { onSuccess });
@@ -83,14 +99,13 @@ export function AppPackagesPanel({
 
   const refetch = () => {
     void appPackages.refetch();
+    void appPackageOperations.refetch();
     void panelApps.refetch();
   };
 
   return (
     <div className="@container flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <div className="flex flex-col gap-2 border-b border-border/70 px-4 py-3 @[42rem]:flex-row @[42rem]:items-center @[42rem]:justify-between">
-        <div className="w-full min-w-0 overflow-x-auto @[42rem]:flex-1">{headerContent}</div>
-        <div className="ml-auto flex shrink-0 items-center gap-1">
+      <div className="flex min-h-12 shrink-0 items-center justify-end gap-1 border-b border-border/70 px-4 py-2">
           <button
             type="button"
             onClick={refetch}
@@ -124,23 +139,15 @@ export function AppPackagesPanel({
             <PackagePlus className="mr-1.5 h-3.5 w-3.5" />
             {t('appPackagesInstall')}
           </Button>
-        </div>
       </div>
 
       <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-2xl p-3 sm:p-4">
-          <div className="mb-3 rounded-xl bg-gradient-to-br from-primary/[0.09] via-primary/[0.045] to-transparent px-3.5 py-3 ring-1 ring-primary/10">
-            <div className="flex items-start gap-2.5">
-              <span className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
-                <Boxes className="h-4 w-4" />
-              </span>
-              <div>
-                <h1 className="text-sm font-semibold text-foreground">{t('appPackagesLibraryTitle')}</h1>
-                <p className="mt-0.5 text-xs leading-5 text-muted-foreground">
-                  {t('appPackagesLibraryDescription')}
-                </p>
-              </div>
-            </div>
+        <div className="mx-auto w-full max-w-3xl p-3 sm:p-5">
+          <div className="mb-4 px-1">
+            <h1 className="text-base font-semibold tracking-tight text-foreground">{t('appPackagesLibraryTitle')}</h1>
+            <p className="mt-1 text-xs leading-5 text-muted-foreground">
+              {t('appPackagesLibraryDescription')}
+            </p>
           </div>
 
           {lifecycle.isError ? (
@@ -158,6 +165,7 @@ export function AppPackagesPanel({
               : undefined}
             packages={appPackages.data?.entries ?? []}
             panelApps={panelApps.data?.entries ?? []}
+            operations={operations}
             onInstall={() => setInstallOpen(true)}
             onMutate={runMutation}
             onOpenPanelApp={(entry) => void openPanelApp(entry)}
@@ -168,17 +176,19 @@ export function AppPackagesPanel({
       <AppMarketplaceDialog
         error={lifecycle.error instanceof Error ? lifecycle.error : null}
         installedPackages={appPackages.data?.entries ?? []}
-        installingSource={lifecycle.variables?.action === 'install'
+        startingSource={lifecycle.variables?.action === 'install'
           ? lifecycle.variables.source
           : undefined}
-        isPending={lifecycle.isPending}
+        isStarting={lifecycle.isPending}
+        operations={operations}
         open={marketplaceOpen}
         onOpenChange={setMarketplaceOpen}
         onInstall={(source, registryUrl) => runMutation({
           action: 'install',
           source,
           registryUrl,
-        }, () => setMarketplaceOpen(false))}
+        })}
+        onUpdate={(appId) => runMutation({ action: 'update', appId })}
       />
 
       <Dialog open={installOpen} onOpenChange={setInstallOpen}>
@@ -231,6 +241,7 @@ function AppPackageLibrary({
   onOpenPanelApp,
   packages,
   panelApps,
+  operations,
 }: {
   error?: string;
   isLoading: boolean;
@@ -241,6 +252,7 @@ function AppPackageLibrary({
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
   packages: AppPackageView[];
   panelApps: PanelAppEntryView[];
+  operations: AppPackageOperationView[];
 }) {
   if (isLoading) {
     return (
@@ -258,6 +270,13 @@ function AppPackageLibrary({
     );
   }
   if (packages.length === 0) {
+    const activeInstalls = operations.filter((entry) =>
+      entry.action === 'install' && isAppPackageOperationActive(entry.status));
+    if (activeInstalls.length > 0) {
+      return <div className="space-y-2.5">{activeInstalls.map((operation) => (
+        <PendingInstallCard key={operation.id} operation={operation} />
+      ))}</div>;
+    }
     return (
       <div className="flex flex-col items-center rounded-2xl border border-dashed border-border px-6 py-10 text-center">
         <PackagePlus className="h-7 w-7 text-muted-foreground" />
@@ -273,28 +292,87 @@ function AppPackageLibrary({
   }
   return (
     <div className="space-y-2.5">
-      {packages.map((appPackage) => (
-        <AppPackageCard
-          key={appPackage.id}
-          appPackage={appPackage}
-          panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
-          isPending={isPending && mutationAppId === appPackage.id}
-          onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
-          onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
-          onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
-          onRollback={(version) => onMutate({
-            action: 'rollback',
-            appId: appPackage.id,
-            version,
-          })}
-          onUninstall={() => onMutate({ action: 'uninstall', appId: appPackage.id })}
-          onOpenPanelApp={onOpenPanelApp}
-        />
+      {operations.filter((entry) =>
+        entry.action === 'install' &&
+        isAppPackageOperationActive(entry.status) &&
+        !packages.some((appPackage) => appPackage.id === entry.appId),
+      ).map((operation) => (
+        <PendingInstallCard key={operation.id} operation={operation} />
       ))}
+      {packages.map((appPackage) => {
+        const latestOperation = operations.find((entry) => entry.appId === appPackage.id);
+        const visibleOperation = latestOperation && (
+          isAppPackageOperationActive(latestOperation.status) ||
+          latestOperation.status === 'failed' ||
+          latestOperation.status === 'interrupted'
+        )
+          ? latestOperation
+          : undefined;
+
+        return (
+          <AppPackageCard
+            key={appPackage.id}
+            appPackage={appPackage}
+            panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
+            isPending={isPending && mutationAppId === appPackage.id}
+            operation={visibleOperation}
+            onEnable={() => onMutate({ action: 'enable', appId: appPackage.id })}
+            onDisable={() => onMutate({ action: 'disable', appId: appPackage.id })}
+            onUpdate={() => onMutate({ action: 'update', appId: appPackage.id })}
+            onRollback={(version) => onMutate({
+              action: 'rollback',
+              appId: appPackage.id,
+              version,
+            })}
+            onUninstall={(purgeData) => onMutate({
+              action: 'uninstall',
+              appId: appPackage.id,
+              purgeData,
+            })}
+            onOpenPanelApp={onOpenPanelApp}
+          />
+        );
+      })}
     </div>
   );
 }
 
+function PendingInstallCard({ operation }: { operation: AppPackageOperationView }) {
+  const label = operation.appId ?? operation.source ?? t('appPackagesInstall');
+  const progress = Math.max(4, Math.round((operation.completedSteps / operation.totalSteps) * 100));
+  return (
+    <div className="rounded-xl border border-border/60 bg-card px-4 py-3.5 shadow-[0_1px_2px_rgba(0,0,0,0.025)]" role="status" aria-live="polite">
+      <div className="flex items-center gap-3">
+        <AppArtwork name={label} />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold text-foreground">{label}</p>
+          <p className="mt-0.5 flex items-center gap-1.5 text-xs text-muted-foreground">
+            <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
+            {operationProgressLabel(operation)}
+          </p>
+        </div>
+      </div>
+      <div className="ml-14 mt-2 h-1 overflow-hidden rounded-full bg-muted">
+        <div className="h-full rounded-full bg-primary transition-[width] duration-300" style={{ width: `${progress}%` }} />
+      </div>
+    </div>
+  );
+}
+
+function operationProgressLabel(operation: AppPackageOperationView): string {
+  switch (operation.status) {
+    case 'queued': return t('appPackagesPreparing');
+    case 'resolving': return t('appPackagesResolving');
+    case 'downloading': return t('appPackagesDownloading');
+    case 'verifying': return t('appPackagesVerifying');
+    case 'installing': return t('appPackagesInstalling');
+    case 'finalizing': return t('appPackagesFinalizing');
+    case 'succeeded': return t('appPackagesCompleted');
+    case 'failed':
+    case 'interrupted': return operation.error ?? t('appPackagesActionFailed');
+  }
+}
+
 function getPackageLoadError(...errors: unknown[]): string | undefined {
   const error = errors.find((candidate): candidate is Error => candidate instanceof Error);
   return error?.message || (errors.some(Boolean) ? t('appPackagesLoadFailed') : undefined);