@nextclaw/ui 0.19.2 → 0.19.3

package/src/features/apps/components/__tests__/app-marketplace-catalog.test.tsx

@@ -0,0 +1,161 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { AppMarketplaceCatalog } from '@/features/apps/components/app-marketplace-catalog';
+import type { AppMarketplaceItemView } from '@/features/apps/types/app-marketplace.types';
+import { Dialog } from '@/shared/components/ui/dialog';
+import { TooltipProvider } from '@/shared/components/ui/tooltip';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const LINUX_ONLY_APP: AppMarketplaceItemView = {
+  id: 'rust-todo',
+  slug: 'rust-todo',
+  appId: 'peiiii.rust-todo',
+  name: 'Rust Todo',
+  summary: '轻量待办应用',
+  summaryI18n: {},
+  tags: ['todo'],
+  latestVersion: '0.1.0',
+  featured: false,
+  availability: {
+    mode: 'targeted',
+    targets: ['linux-x64-gnu'],
+    operatingSystems: ['linux'],
+  },
+  publisher: { id: 'peiiii', name: 'peiiii' },
+  install: {
+    kind: 'registry',
+    spec: 'peiiii.rust-todo',
+    registry: 'https://apps-registry.nextclaw.io',
+  },
+  webUrl: 'https://nextclaw.io/apps/rust-todo',
+};
+
+describe('AppMarketplaceCatalog compatibility actions', () => {
+  it('keeps an incompatible app discoverable but disables installation and hides stale failures', () => {
+    setLanguage('zh');
+    const onInstall = vi.fn();
+    const onSelect = vi.fn();
+
+    render(
+      <TooltipProvider>
+        <Dialog>
+          <AppMarketplaceCatalog
+          error={null}
+          filter="all"
+          hostTarget={{
+            key: 'darwin-arm64',
+            operatingSystem: 'darwin',
+            architecture: 'arm64',
+          }}
+          installedById={new Map()}
+          isError={false}
+          isFetchingNextPage={false}
+          isLoading={false}
+          isStarting={false}
+          items={[LINUX_ONLY_APP]}
+          localeFallbacks={['zh-CN']}
+          onFilterChange={vi.fn()}
+          onInstall={onInstall}
+          onLoadMore={vi.fn()}
+          onSearchChange={vi.fn()}
+          onSelect={onSelect}
+          onUpdate={vi.fn()}
+          operations={[{
+            id: 'failed-install',
+            action: 'install',
+            appId: 'peiiii.rust-todo',
+            source: 'peiiii.rust-todo',
+            status: 'failed',
+            completedSteps: 0,
+            totalSteps: 1,
+            createdAt: '2026-08-20T00:00:00.000Z',
+            updatedAt: '2026-08-20T00:00:00.000Z',
+            error: 'raw registry failure',
+          }]}
+          hasNextPage={false}
+          search=""
+          />
+        </Dialog>
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByText('仅支持 Linux')).toBeTruthy();
+    expect(screen.getByText('这台设备无法安装')).toBeTruthy();
+    const installButton = screen.getByRole('button', { name: '无法安装' });
+    expect((installButton as HTMLButtonElement).disabled).toBe(true);
+    expect(screen.queryByText('raw registry failure')).toBeNull();
+
+    fireEvent.click(installButton);
+    expect(onInstall).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getAllByRole('button', { name: /Rust Todo/ })[0]);
+    expect(onSelect).toHaveBeenCalledWith('rust-todo');
+  });
+
+  it('does not project a persisted terminal failure back into a compatible card', () => {
+    setLanguage('zh');
+    const onInstall = vi.fn();
+
+    render(
+      <TooltipProvider>
+        <Dialog>
+          <AppMarketplaceCatalog
+            error={null}
+            filter="all"
+            hostTarget={{
+              key: 'darwin-arm64',
+              operatingSystem: 'darwin',
+              architecture: 'arm64',
+            }}
+            installedById={new Map()}
+            isError={false}
+            isFetchingNextPage={false}
+            isLoading={false}
+            isStarting={false}
+            items={[{
+              ...LINUX_ONLY_APP,
+              availability: {
+                mode: 'universal',
+                targets: [],
+                operatingSystems: [],
+              },
+            }]}
+            localeFallbacks={['zh-CN']}
+            onFilterChange={vi.fn()}
+            onInstall={onInstall}
+            onLoadMore={vi.fn()}
+            onSearchChange={vi.fn()}
+            onSelect={vi.fn()}
+            onUpdate={vi.fn()}
+            operations={[{
+              id: 'persisted-failure',
+              action: 'install',
+              appId: 'peiiii.rust-todo',
+              source: 'peiiii.rust-todo',
+              status: 'failed',
+              completedSteps: 0,
+              totalSteps: 1,
+              createdAt: '2026-08-19T00:00:00.000Z',
+              updatedAt: '2026-08-19T00:00:01.000Z',
+              completedAt: '2026-08-19T00:00:01.000Z',
+              error: 'persisted registry failure',
+            }]}
+            hasNextPage={false}
+            search=""
+          />
+        </Dialog>
+      </TooltipProvider>,
+    );
+
+    expect(screen.queryByText('persisted registry failure')).toBeNull();
+    expect(screen.queryByRole('button', { name: '重试' })).toBeNull();
+    const installButton = screen.getByRole('button', { name: '安装应用' });
+    expect((installButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(installButton);
+    expect(onInstall).toHaveBeenCalledWith(
+      'peiiii.rust-todo',
+      'https://apps-registry.nextclaw.io',
+    );
+  });
+});

package/src/features/apps/components/app-marketplace-catalog.tsx

@@ -1,15 +1,21 @@
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import type { AppPackageHostTarget, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { ChevronRight, Search, Sparkles } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
 import { AppMarketplaceCover } from '@/features/apps/components/app-marketplace-cover';
 import {
   findLatestAppPackageOperation,
+  MarketplaceCompatibilityBadge,
+  MarketplaceCompatibilityStatus,
   MarketplaceInstallButton,
   OperationProgress,
+  readMarketplaceCompatibilityPresentation,
 } from '@/features/apps/components/app-marketplace-operation';
 import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
 import type { AppMarketplaceItemView } from '@/features/apps/types/app-marketplace.types';
-import { formatAppMarketplacePlatforms } from '@/features/apps/utils/app-marketplace-platform.utils';
+import {
+  formatAppMarketplacePlatforms,
+  resolveAppMarketplaceInstallability,
+} from '@/features/apps/utils/app-marketplace-platform.utils';
 import { pickLocalizedText } from '@/features/marketplace';
 import {
   DialogDescription,
@@ -26,6 +32,7 @@ export type MarketplaceFilter = 'all' | 'featured' | 'personal' | 'local';
 export function AppMarketplaceCatalog({
   error,
   filter,
+  hostTarget,
   installedById,
   isError,
   isFetchingNextPage,
@@ -46,6 +53,7 @@ export function AppMarketplaceCatalog({
 }: {
   error: Error | null;
   filter: MarketplaceFilter;
+  hostTarget?: AppPackageHostTarget;
   installedById: Map<string, AppPackageView>;
   isError: boolean;
   isFetchingNextPage: boolean;
@@ -80,6 +88,7 @@ export function AppMarketplaceCatalog({
         ) : null}
         <MarketplaceCatalogContent
           installedById={installedById}
+          hostTarget={hostTarget}
           isError={isError}
           isFetchingNextPage={isFetchingNextPage}
           isLoading={isLoading}
@@ -158,6 +167,7 @@ function MarketplaceCatalogHeader({
 
 function MarketplaceCatalogContent({
   installedById,
+  hostTarget,
   isError,
   isFetchingNextPage,
   isLoading,
@@ -173,6 +183,7 @@ function MarketplaceCatalogContent({
   startingSource,
 }: {
   installedById: Map<string, AppPackageView>;
+  hostTarget?: AppPackageHostTarget;
   isError: boolean;
   isFetchingNextPage: boolean;
   isLoading: boolean;
@@ -221,6 +232,7 @@ function MarketplaceCatalogContent({
           <MarketplaceCatalogCard
             key={item.id}
             installedPackage={installedById.get(item.appId)}
+            hostTarget={hostTarget}
             isStarting={isStarting && startingSource === item.install.spec}
             item={item}
             localeFallbacks={localeFallbacks}
@@ -249,6 +261,7 @@ function MarketplaceCatalogContent({
 
 function MarketplaceCatalogCard({
   installedPackage,
+  hostTarget,
   isStarting,
   item,
   localeFallbacks,
@@ -258,6 +271,7 @@ function MarketplaceCatalogCard({
   operation,
 }: {
   installedPackage?: AppPackageView;
+  hostTarget?: AppPackageHostTarget;
   isStarting: boolean;
   item: AppMarketplaceItemView;
   localeFallbacks: string[];
@@ -271,10 +285,18 @@ function MarketplaceCatalogCard({
     : item.name;
   const summary = pickLocalizedText(item.summaryI18n, item.summary, localeFallbacks);
   const active = operation ? isAppPackageOperationActive(operation.status) : false;
-  const failed = operation?.status === 'failed' || operation?.status === 'interrupted';
   const canUpdate = Boolean(
     installedPackage && installedPackage.activeVersion !== item.latestVersion,
   );
+  const supportedPlatforms = formatAppMarketplacePlatforms(
+    item.availability,
+    t('appPackagesAllPlatforms'),
+  );
+  const compatibility = readMarketplaceCompatibilityPresentation(
+    resolveAppMarketplaceInstallability(item.availability, hostTarget),
+    supportedPlatforms,
+  );
+  const blockAction = Boolean(compatibility && (!installedPackage || canUpdate));
   return (
     <article className="group relative overflow-hidden rounded-2xl border border-border/60 bg-card shadow-sm transition duration-200 hover:-translate-y-0.5 hover:border-border hover:shadow-lg">
       <button
@@ -296,32 +318,39 @@ function MarketplaceCatalogCard({
               <span className="truncate text-sm font-semibold text-foreground">{displayName}</span>
               {item.featured ? <Sparkles className="h-3.5 w-3.5 shrink-0 text-amber-500" aria-label={t('appPackagesMarketplaceFeatured')} /> : null}
             </span>
+            <MarketplaceCompatibilityBadge presentation={compatibility} />
             <span className="mt-1 line-clamp-2 block min-h-10 text-xs leading-5 text-muted-foreground">{summary}</span>
             <span className="mt-2 flex items-center gap-1.5 text-[11px] text-muted-foreground/75">
               <span>{item.publisher.name}</span>
               <span aria-hidden="true">·</span>
               <span>v{item.latestVersion}</span>
               <span aria-hidden="true">·</span>
-              <span>{formatAppMarketplacePlatforms(item.availability, t('appPackagesAllPlatforms'))}</span>
+              <span>{supportedPlatforms}</span>
               <ChevronRight className="ml-0.5 h-3 w-3 opacity-0 transition-opacity group-hover:opacity-60" />
             </span>
           </button>
         </div>
-        <div className="mt-3 flex items-center justify-end border-t border-border/50 pt-3">
+        <div className="mt-3 flex items-center justify-between gap-3 border-t border-border/50 pt-3">
+          <MarketplaceCompatibilityStatus
+            blocked={blockAction}
+            presentation={compatibility}
+            className="min-w-0 text-[11px] font-medium text-muted-foreground"
+          />
           <MarketplaceInstallButton
             active={active}
             canUpdate={canUpdate}
-            failed={failed}
             installed={Boolean(installedPackage)}
             isStarting={isStarting}
             onAction={() => canUpdate
               ? onUpdate(item.appId)
               : onInstall(item.install.spec, item.install.registry)}
             operation={operation}
+            unavailableLabel={blockAction ? compatibility?.actionLabel : undefined}
+            unavailableReason={blockAction ? compatibility?.reason : undefined}
           />
         </div>
       </div>
-      {operation && (active || failed) ? <div className="px-4 pb-4"><OperationProgress operation={operation} /></div> : null}
+      {operation && !blockAction && active ? <div className="px-4 pb-4"><OperationProgress operation={operation} /></div> : null}
     </article>
   );
 }

package/src/features/apps/components/app-marketplace-detail.tsx

@@ -1,14 +1,20 @@
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import type { AppPackageHostTarget, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { ExternalLink, FileText, Monitor, Server, ShieldAlert, ShieldCheck, type LucideIcon } from 'lucide-react';
 import { AppArtwork } from '@/features/apps/components/app-artwork';
 import { AppMarketplaceCover } from '@/features/apps/components/app-marketplace-cover';
 import {
+  MarketplaceCompatibilityBadge,
+  MarketplaceCompatibilityStatus,
   MarketplaceInstallButton,
   OperationProgress,
+  readMarketplaceCompatibilityPresentation,
 } from '@/features/apps/components/app-marketplace-operation';
 import { isAppPackageOperationActive } from '@/features/apps/hooks/use-app-packages';
 import type { AppMarketplaceDetailView } from '@/features/apps/types/app-marketplace.types';
-import { formatAppMarketplacePlatforms } from '@/features/apps/utils/app-marketplace-platform.utils';
+import {
+  formatAppMarketplacePlatforms,
+  resolveAppMarketplaceInstallability,
+} from '@/features/apps/utils/app-marketplace-platform.utils';
 import { pickLocalizedText } from '@/features/marketplace';
 import { Skeleton } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
@@ -16,6 +22,7 @@ import { t } from '@/shared/lib/i18n';
 export function MarketplaceDetail({
   detail,
   error,
+  hostTarget,
   installedPackage,
   isLoading,
   isStarting,
@@ -26,6 +33,7 @@ export function MarketplaceDetail({
 }: {
   detail?: AppMarketplaceDetailView;
   error: Error | null;
+  hostTarget?: AppPackageHostTarget;
   installedPackage?: AppPackageView;
   isLoading: boolean;
   isStarting: boolean;
@@ -43,7 +51,6 @@ export function MarketplaceDetail({
   const summary = pickLocalizedText(detail.summaryI18n, detail.summary, localeFallbacks);
   const description = pickLocalizedText(detail.descriptionI18n, detail.description ?? summary, localeFallbacks);
   const active = operation ? isAppPackageOperationActive(operation.status) : false;
-  const failed = operation?.status === 'failed' || operation?.status === 'interrupted';
   const components = detail.manifest.components ?? [];
   const panelCount = components.filter((entry) => entry.kind === 'panel').length;
   const serviceCount = components.filter((entry) => entry.kind === 'service').length;
@@ -52,6 +59,15 @@ export function MarketplaceDetail({
   const canUpdate = Boolean(
     installedPackage && installedPackage.activeVersion !== detail.latestVersion,
   );
+  const supportedPlatforms = formatAppMarketplacePlatforms(
+    detail.availability,
+    t('appPackagesAllPlatforms'),
+  );
+  const compatibility = readMarketplaceCompatibilityPresentation(
+    resolveAppMarketplaceInstallability(detail.availability, hostTarget),
+    supportedPlatforms,
+  );
+  const blockAction = Boolean(compatibility && (!installedPackage || canUpdate));
   return (
     <div className="mx-auto w-full max-w-3xl px-5 py-5 sm:px-7 sm:py-6">
       <div className="grid items-stretch gap-5 sm:grid-cols-[minmax(0,1.18fr)_minmax(240px,0.82fr)]">
@@ -61,6 +77,7 @@ export function MarketplaceDetail({
             <AppArtwork icon={detail.iconUrl ?? installedPackage?.icon} name={detail.name} className="h-14 w-14 rounded-2xl" />
             <div className="min-w-0 flex-1">
               <h2 className="text-lg font-semibold tracking-tight text-foreground">{detail.name}</h2>
+              <MarketplaceCompatibilityBadge presentation={compatibility} />
               <div className="mt-1.5 flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground">
                 <span className="inline-flex items-center gap-1"><ShieldCheck className="h-3.5 w-3.5" />{detail.publisher.name}</span>
                 <span>v{detail.latestVersion}</span>
@@ -69,21 +86,27 @@ export function MarketplaceDetail({
           </div>
           <p className="mt-3 text-sm leading-6 text-muted-foreground">{summary}</p>
           <div className="mt-auto pt-4">
+            <MarketplaceCompatibilityStatus
+              blocked={blockAction}
+              presentation={compatibility}
+              className="mb-2 text-xs font-medium text-muted-foreground"
+            />
             <MarketplaceInstallButton
               active={active}
               canUpdate={canUpdate}
-              failed={failed}
               installed={Boolean(installedPackage)}
               isStarting={isStarting}
               onAction={() => canUpdate
                 ? onUpdate(detail.appId)
                 : onInstall(detail.install.spec, detail.install.registry)}
               operation={operation}
+              unavailableLabel={blockAction ? compatibility?.actionLabel : undefined}
+              unavailableReason={blockAction ? compatibility?.reason : undefined}
             />
           </div>
         </div>
       </div>
-      {operation && (active || failed) ? <OperationProgress operation={operation} /> : null}
+      {operation && !blockAction && active ? <OperationProgress operation={operation} /> : null}
 
       <section className="mt-7">
         <h3 className="text-sm font-semibold text-foreground">{t('appPackagesAboutApp')}</h3>
@@ -94,7 +117,7 @@ export function MarketplaceDetail({
         <DetailFact
           icon={Monitor}
           label={t('appPackagesPlatformsLabel')}
-          value={formatAppMarketplacePlatforms(detail.availability, t('appPackagesAllPlatforms'))}
+          value={supportedPlatforms}
         />
         <DetailFact icon={FileText} label={t('appPackagesPanelsAdded')} value={panelCount > 0 ? String(panelCount) : t('appPackagesNone')} />
         <DetailFact icon={Server} label={t('appPackagesServicesAdded')} value={serviceCount > 0 ? String(serviceCount) : t('appPackagesNone')} />

package/src/features/apps/components/app-marketplace-dialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import type { AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
+import type { AppPackageHostTarget, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
 import { ArrowLeft, ShieldCheck } from 'lucide-react';
 import {
   AppMarketplaceCatalog,
@@ -12,10 +12,15 @@ import {
   useAppMarketplaceDetail,
 } from '@/features/apps/hooks/use-app-marketplace';
 import { buildLocaleFallbacks } from '@/features/marketplace';
+import {
+  getAppMarketplaceInstallabilityRank,
+  resolveAppMarketplaceInstallability,
+} from '@/features/apps/utils/app-marketplace-platform.utils';
 import {
   Dialog,
   DialogContent,
 } from '@/shared/components/ui/dialog';
+import { TooltipProvider } from '@/shared/components/ui/tooltip';
 import { getLanguage, t } from '@/shared/lib/i18n';
 
 const HIDDEN_ENGINEERING_APPS = new Set([
@@ -25,6 +30,7 @@ const HIDDEN_ENGINEERING_APPS = new Set([
 
 export function AppMarketplaceDialog({
   error,
+  hostTarget,
   installedPackages,
   isStarting,
   onInstall,
@@ -35,6 +41,7 @@ export function AppMarketplaceDialog({
   startingSource,
 }: {
   error: Error | null;
+  hostTarget?: AppPackageHostTarget;
   installedPackages: AppPackageView[];
   isStarting: boolean;
   onInstall: (source: string, registryUrl: string) => void;
@@ -70,12 +77,17 @@ export function AppMarketplaceDialog({
     [installedPackages],
   );
   const localeFallbacks = buildLocaleFallbacks(getLanguage() === 'zh' ? 'zh-CN' : 'en-US');
-  const items = useMemo(
-    () => (marketplace.data?.items ?? []).filter(
-      (item) => !HIDDEN_ENGINEERING_APPS.has(item.appId),
-    ),
-    [marketplace.data?.items],
-  );
+  const items = useMemo(() => (marketplace.data?.items ?? [])
+    .filter((item) => !HIDDEN_ENGINEERING_APPS.has(item.appId))
+    .map((item, index) => ({
+      item,
+      index,
+      rank: getAppMarketplaceInstallabilityRank(
+        resolveAppMarketplaceInstallability(item.availability, hostTarget),
+      ),
+    }))
+    .sort((left, right) => left.rank - right.rank || left.index - right.index)
+    .map(({ item }) => item), [hostTarget, marketplace.data?.items]);
 
   const closeDialog = (nextOpen: boolean) => {
     if (!nextOpen) setSelectedSlug(null);
@@ -84,54 +96,58 @@ export function AppMarketplaceDialog({
 
   return (
     <Dialog open={open} onOpenChange={closeDialog}>
-      <DialogContent className="flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background/95 p-0 shadow-[0_32px_100px_rgba(0,0,0,0.24)] backdrop-blur-xl [&>button.absolute]:top-[max(1rem,env(safe-area-inset-top))] sm:h-[min(680px,calc(100dvh-4rem))] sm:w-[min(920px,calc(100vw-3rem))] sm:max-w-none sm:rounded-2xl sm:border sm:border-border/55">
-        {selectedSlug ? (
-          <>
-            <MarketplaceDetailHeader onBack={() => setSelectedSlug(null)} />
-            <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-background">
-              <MarketplaceDetail
-                detail={detail.data}
-                error={detail.error instanceof Error ? detail.error : null}
-                installedPackage={detail.data ? installedById.get(detail.data.appId) : undefined}
-                isLoading={detail.isLoading}
-                isStarting={isStarting && detail.data?.install.spec === startingSource}
-                localeFallbacks={localeFallbacks}
-                onInstall={onInstall}
-                onUpdate={onUpdate}
-                operation={detail.data
-                  ? findLatestAppPackageOperation(operations, detail.data.appId, detail.data.install.spec)
-                  : undefined}
-              />
-            </div>
-          </>
-        ) : (
-          <AppMarketplaceCatalog
-            error={error}
-            filter={filter}
-            installedById={installedById}
-            isError={marketplace.isError}
-            isFetchingNextPage={marketplace.isFetchingNextPage}
-            isLoading={marketplace.isLoading}
-            isStarting={isStarting}
-            items={items}
-            localeFallbacks={localeFallbacks}
-            onFilterChange={setFilter}
-            onInstall={onInstall}
-            onLoadMore={() => void marketplace.fetchNextPage()}
-            onSearchChange={setSearch}
-            onSelect={setSelectedSlug}
-            onUpdate={onUpdate}
-            operations={operations}
-            hasNextPage={marketplace.hasNextPage}
-            search={search}
-            startingSource={startingSource}
-          />
-        )}
-        <div className="flex items-start gap-2 border-t border-border/60 bg-muted/25 px-5 pb-[max(.75rem,env(safe-area-inset-bottom))] pt-3 text-[11px] leading-4 text-muted-foreground sm:px-6 sm:pb-3">
-          <ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" />
-          <span>{t('appPackagesMarketplaceTrustHint')}</span>
-        </div>
-      </DialogContent>
+      <TooltipProvider>
+        <DialogContent className="flex h-dvh w-screen max-w-none flex-col gap-0 overflow-hidden rounded-none border-0 bg-background/95 p-0 shadow-[0_32px_100px_rgba(0,0,0,0.24)] backdrop-blur-xl [&>button.absolute]:top-[max(1rem,env(safe-area-inset-top))] sm:h-[min(680px,calc(100dvh-4rem))] sm:w-[min(920px,calc(100vw-3rem))] sm:max-w-none sm:rounded-2xl sm:border sm:border-border/55">
+          {selectedSlug ? (
+            <>
+              <MarketplaceDetailHeader onBack={() => setSelectedSlug(null)} />
+              <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto bg-background">
+                <MarketplaceDetail
+                  detail={detail.data}
+                  error={detail.error instanceof Error ? detail.error : null}
+                  installedPackage={detail.data ? installedById.get(detail.data.appId) : undefined}
+                  hostTarget={hostTarget}
+                  isLoading={detail.isLoading}
+                  isStarting={isStarting && detail.data?.install.spec === startingSource}
+                  localeFallbacks={localeFallbacks}
+                  onInstall={onInstall}
+                  onUpdate={onUpdate}
+                  operation={detail.data
+                    ? findLatestAppPackageOperation(operations, detail.data.appId, detail.data.install.spec)
+                    : undefined}
+                />
+              </div>
+            </>
+          ) : (
+            <AppMarketplaceCatalog
+              error={error}
+              filter={filter}
+              installedById={installedById}
+              hostTarget={hostTarget}
+              isError={marketplace.isError}
+              isFetchingNextPage={marketplace.isFetchingNextPage}
+              isLoading={marketplace.isLoading}
+              isStarting={isStarting}
+              items={items}
+              localeFallbacks={localeFallbacks}
+              onFilterChange={setFilter}
+              onInstall={onInstall}
+              onLoadMore={() => void marketplace.fetchNextPage()}
+              onSearchChange={setSearch}
+              onSelect={setSelectedSlug}
+              onUpdate={onUpdate}
+              operations={operations}
+              hasNextPage={marketplace.hasNextPage}
+              search={search}
+              startingSource={startingSource}
+            />
+          )}
+          <div className="flex items-start gap-2 border-t border-border/60 bg-muted/25 px-5 pb-[max(.75rem,env(safe-area-inset-bottom))] pt-3 text-[11px] leading-4 text-muted-foreground sm:px-6 sm:pb-3">
+            <ShieldCheck className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+            <span>{t('appPackagesMarketplaceTrustHint')}</span>
+          </div>
+        </DialogContent>
+      </TooltipProvider>
     </Dialog>
   );
 }