@nextclaw/ui 0.26.5 → 0.27.1

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

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
 import type { AppDataEntry, AppPackageOperationView, AppPackageView } from '@nextclaw/client-sdk';
-import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck, Store } from 'lucide-react';
+import { LoaderCircle, PackagePlus, RefreshCw, ShieldCheck } 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 { AppMarketplacePanel } from '@/features/apps/components/app-marketplace-panel';
 import { AppPackageCard } from '@/features/apps/components/app-package-card';
 import { AppRetainedDataSection, useAppData } from '@/features/app-data';
 import {
@@ -15,11 +15,8 @@ import {
   isAppPackageOperationActive,
   type AppPackageMutationInput,
 } from '@/features/apps/hooks/use-app-packages';
-import {
-  useGrantPanelAppClient,
-  usePanelApps,
-  useRecordPanelAppOpened,
-} from '@/features/panel-apps';
+import { useGrantPanelAppClient, usePanelApps, useRecordPanelAppOpened } from '@/features/panel-apps';
+import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
 import { Button } from '@/shared/components/ui/button';
 import {
   Dialog,
@@ -30,14 +27,20 @@ import {
   DialogTitle,
 } from '@/shared/components/ui/dialog';
 import { Input } from '@/shared/components/ui/input';
-import { Skeleton } from '@/shared/components/ui/skeleton';
+import { SkeletonContent } from '@/shared/components/ui/skeleton';
 import { t } from '@/shared/lib/i18n';
 
 export function AppPackagesPanel({
   focusedPackageId,
+  marketplaceActive = false,
+  onBrowseMarketplace,
+  onManagePackage,
   onOpenPanelApp,
 }: {
   focusedPackageId?: string;
+  marketplaceActive?: boolean;
+  onBrowseMarketplace: () => void;
+  onManagePackage: (appId: string) => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
 }) {
   const appPackages = useAppPackages();
@@ -49,14 +52,11 @@ export function AppPackagesPanel({
   const grantClient = useGrantPanelAppClient();
   const presenter = useAppPresenter();
   const libraryTitleRef = useRef<HTMLHeadingElement>(null);
+  const addButtonRef = useRef<HTMLButtonElement>(null);
   const [installOpen, setInstallOpen] = useState(false);
   const [installSource, setInstallSource] = useState('');
-  const [marketplaceOpen, setMarketplaceOpen] = useState(false);
 
-  const operations = useMemo(
-    () => appPackageOperations.data?.entries ?? [],
-    [appPackageOperations.data?.entries],
-  );
+  const operations = useMemo(() => appPackageOperations.data?.entries ?? [], [appPackageOperations.data?.entries]);
 
   useEffect(() => {
     if (!focusedPackageId || appPackages.isLoading) return;
@@ -83,12 +83,14 @@ export function AppPackagesPanel({
     if (entry.clientDeclared && !entry.clientGranted) {
       const allowed = await presenter.serviceActionAuthorizationManager.requestAuthorization({
         panelAppId: entry.appId,
-        actions: [{
-          actionId: 'nextclaw.client',
-          actionTitle: t('panelAppsClientGrantTitle'),
-          actionDescription: t('panelAppsClientGrantDescription'),
-          risk: 'dangerous',
-        }],
+        actions: [
+          {
+            actionId: 'nextclaw.client',
+            actionTitle: t('panelAppsClientGrantTitle'),
+            actionDescription: t('panelAppsClientGrantDescription'),
+            risk: 'dangerous',
+          },
+        ],
       });
       if (!allowed) return;
       await grantClient.mutateAsync(entry.appId);
@@ -118,60 +120,31 @@ export function AppPackagesPanel({
   };
 
   return (
-    <div className="@container flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <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}
-            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"
-            title={t('appPackagesRefresh')}
-            aria-label={t('appPackagesRefresh')}
-          >
-            <RefreshCw className="h-3.5 w-3.5" />
-          </button>
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              lifecycle.reset();
-              setMarketplaceOpen(true);
-            }}
-          >
-            <Store className="mr-1.5 h-3.5 w-3.5" />
-            {t('appPackagesBrowse')}
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            variant="outline"
-            onClick={() => {
-              lifecycle.reset();
-              setInstallOpen(true);
-            }}
-          >
-            <PackagePlus className="mr-1.5 h-3.5 w-3.5" />
-            {t('appPackagesInstall')}
-          </Button>
-      </div>
-
-      <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto">
-        <div className="mx-auto w-full max-w-3xl p-3 sm:p-5">
-          <div className="mb-4 px-1">
-            <h1
-              ref={libraryTitleRef}
-              tabIndex={-1}
-              className="text-base font-semibold tracking-tight text-foreground"
-            >
+    <div className="[container-type:inline-size] flex h-full min-h-0 flex-col bg-card text-card-foreground">
+      <div hidden={marketplaceActive} className={marketplaceActive ? 'hidden' : 'custom-scrollbar min-h-0 flex-1 overflow-y-auto'}>
+        <div className="mx-auto w-full max-w-3xl px-3 py-4 [@container(min-width:28rem)]:px-5">
+          <div className="mb-4 flex flex-wrap items-center justify-between gap-3 px-1">
+            <h1 ref={libraryTitleRef} tabIndex={-1} 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 className="flex items-center gap-2">
+              <IconActionButton
+                icon={<RefreshCw className="h-3.5 w-3.5" />}
+                label={t('appPackagesRefresh')}
+                onClick={refetch}
+              />
+              <Button type="button" size="sm" onClick={onBrowseMarketplace}>
+                <PackagePlus className="mr-1.5 h-3.5 w-3.5" />
+                {t('appPackagesBrowse')}
+              </Button>
+            </div>
           </div>
 
           {lifecycle.isError ? (
-            <div role="alert" className="mb-3 rounded-xl bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive ring-1 ring-destructive/15">
+            <div
+              role="alert"
+              className="mb-3 rounded-xl bg-destructive/8 px-3 py-2.5 text-xs leading-5 text-destructive ring-1 ring-destructive/15"
+            >
               {lifecycle.error instanceof Error ? lifecycle.error.message : t('appPackagesActionFailed')}
             </div>
           ) : null}
@@ -184,14 +157,14 @@ export function AppPackagesPanel({
             focusedPackageId={focusedPackageId}
             isLoading={appPackages.isLoading || panelApps.isLoading}
             isPending={lifecycle.isPending}
-            mutationAppId={'appId' in (lifecycle.variables ?? {})
-              ? (lifecycle.variables as { appId: string }).appId
-              : undefined}
+            mutationAppId={
+              'appId' in (lifecycle.variables ?? {}) ? (lifecycle.variables as { appId: string }).appId : undefined
+            }
             packages={appPackages.data?.entries ?? []}
             panelApps={panelApps.data?.entries ?? []}
             unavailablePackages={panelApps.data?.unavailablePackages ?? []}
             operations={operations}
-            onInstall={() => setInstallOpen(true)}
+            onInstall={onBrowseMarketplace}
             onMutate={runMutation}
             onOpenPanelApp={(entry) => void openPanelApp(entry)}
           />
@@ -205,29 +178,40 @@ export function AppPackagesPanel({
         </div>
       </div>
 
-      <AppMarketplaceDialog
-        error={lifecycle.error instanceof Error ? lifecycle.error : null}
-        hostTarget={appPackages.data?.hostTarget}
-        installedPackages={appPackages.data?.entries ?? []}
-        startingSource={lifecycle.variables?.action === 'install'
-          ? lifecycle.variables.source
-          : undefined}
-        isStarting={lifecycle.isPending}
-        operations={operations}
-        open={marketplaceOpen}
-        onOpenChange={setMarketplaceOpen}
-        onInstall={(source, registryUrl) => runMutation({
-          action: 'install',
-          source,
-          registryUrl,
-        })}
-        onUpdate={(appId) => runMutation({ action: 'update', appId })}
-      />
+      <div hidden={!marketplaceActive} className={marketplaceActive ? 'flex min-h-0 flex-1 flex-col' : 'hidden'}>
+        <AppMarketplacePanel
+          sourceButtonRef={addButtonRef}
+          onCustomInstall={() => { lifecycle.reset(); setInstallOpen(true); }}
+          onManagePackage={onManagePackage}
+          error={lifecycle.error instanceof Error ? lifecycle.error : null}
+          hostTarget={appPackages.data?.hostTarget}
+          installedPackages={appPackages.data?.entries ?? []}
+          startingSource={lifecycle.variables?.action === 'install' ? lifecycle.variables.source : undefined}
+          isStarting={lifecycle.isPending}
+          operations={operations}
+          active={marketplaceActive}
+          onInstall={(source, registryUrl) =>
+            runMutation({
+              action: 'install',
+              source,
+              registryUrl,
+            })
+          }
+          onUpdate={(appId) => runMutation({ action: 'update', appId })}
+        />
+
+      </div>
 
       <Dialog open={installOpen} onOpenChange={setInstallOpen}>
-        <DialogContent className="max-w-md [&>:last-child]:hidden">
+        <DialogContent
+          className="max-w-md"
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            addButtonRef.current?.focus();
+          }}
+        >
           <form onSubmit={submitInstall}>
-            <DialogHeader>
+            <DialogHeader showClose={false}>
               <DialogTitle>{t('appPackagesInstallTitle')}</DialogTitle>
               <DialogDescription>{t('appPackagesInstallDescription')}</DialogDescription>
             </DialogHeader>
@@ -299,9 +283,9 @@ function AppPackageLibrary({
 }) {
   if (isLoading) {
     return (
-      <div className="space-y-2.5" aria-label={t('appPackagesLoading')}>
-        <Skeleton className="h-44 w-full rounded-2xl" />
-        <Skeleton className="h-32 w-full rounded-2xl" />
+      <div className="divide-y divide-border/50" role="status" aria-label={t('appPackagesLoading')}>
+        <SkeletonContent />
+        <SkeletonContent />
       </div>
     );
   }
@@ -313,44 +297,50 @@ function AppPackageLibrary({
     );
   }
   if (packages.length === 0) {
-    const activeInstalls = operations.filter((entry) =>
-      entry.action === 'install' && isAppPackageOperationActive(entry.status));
+    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="divide-y divide-border/50">
+          {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" />
         <h2 className="mt-3 text-sm font-semibold text-foreground">{t('appPackagesEmptyTitle')}</h2>
-        <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">
-          {t('appPackagesEmptyDescription')}
-        </p>
+        <p className="mt-1 max-w-sm text-xs leading-5 text-muted-foreground">{t('appPackagesEmptyDescription')}</p>
         <Button type="button" size="sm" className="mt-4" onClick={onInstall}>
-          {t('appPackagesInstall')}
+          {t('appPackagesBrowse')}
         </Button>
       </div>
     );
   }
   return (
-    <div className="space-y-2.5">
-      {operations.filter((entry) =>
-        entry.action === 'install' &&
-        isAppPackageOperationActive(entry.status) &&
-        !packages.some((appPackage) => appPackage.id === entry.appId),
-      ).map((operation) => (
-        <PendingInstallCard key={operation.id} operation={operation} />
-      ))}
+    <div className="divide-y divide-border/50">
+      {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;
+        const visibleOperation =
+          latestOperation &&
+          (isAppPackageOperationActive(latestOperation.status) ||
+            latestOperation.status === 'failed' ||
+            latestOperation.status === 'interrupted')
+            ? latestOperation
+            : undefined;
 
         return (
           <section
@@ -358,18 +348,24 @@ function AppPackageLibrary({
             id={`app-package-${appPackage.id}`}
             aria-label={appPackage.name}
             tabIndex={-1}
-            className={focusedPackageId === appPackage.id
-              ? 'rounded-xl outline-none ring-2 ring-primary/35 ring-offset-2 ring-offset-background'
-              : 'rounded-xl outline-none'}
+            className={
+              focusedPackageId === appPackage.id
+                ? 'rounded-xl outline-none ring-2 ring-primary/35 ring-offset-2 ring-offset-background'
+                : 'outline-none'
+            }
           >
             <AppPackageCard
               appPackage={appPackage}
               unavailableMessage={unavailablePackages.find((entry) => entry.appId === appPackage.id)?.message}
-              storageUsage={appDataEntries.find((entry) =>
-                entry.source === 'package' &&
-                entry.lifecycle === 'active' &&
-                entry.appId === appPackage.id &&
-                entry.instanceId === appPackage.instanceId)?.usage ?? appPackage.storageUsage}
+              storageUsage={
+                appDataEntries.find(
+                  (entry) =>
+                    entry.source === 'package' &&
+                    entry.lifecycle === 'active' &&
+                    entry.appId === appPackage.id &&
+                    entry.instanceId === appPackage.instanceId,
+                )?.usage ?? appPackage.storageUsage
+              }
               storageUsageLoading={appDataLoading}
               storageUsageUnavailable={appDataUnavailable}
               panelApps={panelApps.filter((entry) => entry.packageId === appPackage.id)}
@@ -378,16 +374,20 @@ function AppPackageLibrary({
               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,
-              })}
+              onRollback={(version) =>
+                onMutate({
+                  action: 'rollback',
+                  appId: appPackage.id,
+                  version,
+                })
+              }
+              onUninstall={(purgeData) =>
+                onMutate({
+                  action: 'uninstall',
+                  appId: appPackage.id,
+                  purgeData,
+                })
+              }
               onOpenPanelApp={onOpenPanelApp}
             />
           </section>
@@ -401,7 +401,11 @@ 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="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">
@@ -413,7 +417,10 @@ function PendingInstallCard({ operation }: { operation: AppPackageOperationView
         </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
+          className="h-full rounded-full bg-primary transition-[width] duration-300"
+          style={{ width: `${progress}%` }}
+        />
       </div>
     </div>
   );
@@ -421,15 +428,23 @@ function PendingInstallCard({ operation }: { operation: AppPackageOperationView
 
 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 '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');
+    case 'interrupted':
+      return operation.error ?? t('appPackagesActionFailed');
   }
 }
 

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

@@ -1,5 +1,5 @@
-import { lazy, Suspense, useState } from 'react';
-import { AppWindow, Boxes, Server } from 'lucide-react';
+import { lazy, Suspense, useEffect, useRef, useState } from 'react';
+import { AppWindow, Boxes, Server, Store } from 'lucide-react';
 import type { PanelAppEntryView } from '@/shared/lib/api';
 import { AppPackagesPanel } from '@/features/apps/components/app-packages-panel';
 import { PanelAppsList } from '@/features/panel-apps';
@@ -7,7 +7,8 @@ import { loadServiceAppsPanel } from '@/features/service-apps';
 import { Tabs, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { t } from '@/shared/lib/i18n';
 
-export type AppsPanelTab = 'apps' | 'panel-apps' | 'service-apps';
+export type { RightPanelAppsTab as AppsPanelTab } from '@/features/right-panel-resources';
+import type { RightPanelAppsTab as AppsPanelTab } from '@/features/right-panel-resources';
 
 const ServiceAppsPanel = lazy(async () => ({
   default: (await loadServiceAppsPanel()).ServiceAppsPanel,
@@ -17,12 +18,31 @@ export function AppsPanel({
   activeTab,
   onActiveTabChange,
   onOpenPanelApp,
+  serviceResourceId,
 }: {
   activeTab: AppsPanelTab;
   onActiveTabChange: (tab: AppsPanelTab) => void;
   onOpenPanelApp: (entry: PanelAppEntryView) => void;
+  serviceResourceId?: string;
 }) {
   const [focusedPackageId, setFocusedPackageId] = useState<string>();
+  const navigationRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    const navigation = navigationRef.current;
+    if (!navigation) return;
+    const revealSelectedTab = () => {
+      const selected = navigation.querySelector('[aria-selected="true"]');
+      if (!selected) return;
+      const bounds = navigation.getBoundingClientRect();
+      const tab = selected.getBoundingClientRect();
+      if (tab.right > bounds.right) navigation.scrollLeft += tab.right - bounds.right + 12;
+      else if (tab.left < bounds.left) navigation.scrollLeft -= bounds.left - tab.left + 12;
+    };
+    revealSelectedTab();
+    const observer = new ResizeObserver(revealSelectedTab);
+    observer.observe(navigation);
+    return () => observer.disconnect();
+  }, [activeTab]);
   const changeTab = (tab: AppsPanelTab) => {
     setFocusedPackageId(undefined);
     onActiveTabChange(tab);
@@ -34,12 +54,12 @@ export function AppsPanel({
 
   return (
     <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
-      <nav className="shrink-0 border-b border-border/70 px-4 py-3" aria-label={t('appsTitle')}>
+      <nav ref={navigationRef} className="custom-scrollbar shrink-0 overflow-x-auto border-b border-border/60 px-3 py-2" aria-label={t('appsTitle')}>
         <Tabs value={activeTab} onValueChange={(value) => changeTab(value as AppsPanelTab)}>
-          <TabsList className="grid h-auto w-full max-w-[390px] grid-cols-3 rounded-lg bg-muted/70 p-0.5">
+          <TabsList className="flex h-auto w-max flex-nowrap rounded-lg bg-transparent p-0.5 [&>button]:shrink-0">
             <TabsTrigger value="apps" className="min-w-0 gap-1.5 px-2 py-1.5 text-xs">
               <Boxes className="h-3.5 w-3.5 shrink-0" />
-              <span className="truncate">{t('appsTitle')}</span>
+              <span>{t('appPackagesLibraryTitle')}</span>
             </TabsTrigger>
             <TabsTrigger value="panel-apps" className="min-w-0 gap-1.5 px-2 py-1.5 text-xs">
               <AppWindow className="h-3.5 w-3.5 shrink-0" />
@@ -49,19 +69,30 @@ export function AppsPanel({
               <Server className="h-3.5 w-3.5 shrink-0" />
               <span className="truncate">{t('serviceAppsTitle')}</span>
             </TabsTrigger>
+            <TabsTrigger value="marketplace" className="gap-1.5 px-2 py-1.5 text-xs">
+              <Store className="h-3.5 w-3.5 shrink-0" />
+              <span>{t('appPackagesMarketplaceTitle')}</span>
+            </TabsTrigger>
           </TabsList>
         </Tabs>
       </nav>
       <div className="min-h-0 flex-1">
-        {activeTab === 'apps' ? (
-          <AppPackagesPanel focusedPackageId={focusedPackageId} onOpenPanelApp={onOpenPanelApp} />
-        ) : activeTab === 'panel-apps' ? (
+        <div hidden={activeTab !== 'apps' && activeTab !== 'marketplace'} className={activeTab === 'apps' || activeTab === 'marketplace' ? 'h-full' : 'hidden'}>
+          <AppPackagesPanel
+            focusedPackageId={focusedPackageId}
+            onOpenPanelApp={onOpenPanelApp}
+            marketplaceActive={activeTab === 'marketplace'}
+            onBrowseMarketplace={() => changeTab('marketplace')}
+            onManagePackage={managePackage}
+          />
+        </div>
+        {activeTab === 'panel-apps' ? (
           <PanelAppsList onOpenPanelApp={onOpenPanelApp} />
-        ) : (
+        ) : activeTab === 'service-apps' ? (
           <Suspense fallback={null}>
-            <ServiceAppsPanel onManagePackage={managePackage} />
+            <ServiceAppsPanel resourceId={serviceResourceId} onManagePackage={managePackage} />
           </Suspense>
-        )}
+        ) : null}
       </div>
     </div>
   );

package/src/features/chat/components/conversation/chat-conversation-header-section.tsx

@@ -150,7 +150,7 @@ export function ChatConversationHeaderSection({
         ) : null
       }
       actions={
-        <IconActionGroup>
+        <IconActionGroup className="[--icon-control-size:2rem] [--icon-feedback-size:1.75rem]">
           {layoutMode === "mobile" && sessionKey ? (
             <IconActionButton
               icon={<SquarePen className="h-4 w-4" />}

package/src/features/chat/components/conversation/chat-conversation-header.tsx

@@ -63,7 +63,7 @@ export function ChatConversationHeader({
       data-testid="chat-conversation-header"
       data-theme-surface="header"
       className={cn(
-        "bg-background/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-colors duration-200",
+        "bg-background/80 backdrop-blur-sm flex items-center justify-between gap-2 shrink-0 overflow-hidden transition-colors duration-200",
         isMobileLayout ? "px-3 sm:px-3" : "px-4 sm:px-5",
         shouldShow ? "opacity-100" : "h-0 py-0 opacity-0",
         shouldShow && (isMobileLayout ? "min-h-[var(--mobile-header-height)] pb-0.5 pt-0.5" : "h-[52px]"),

package/src/features/chat/components/layout/chat-sidebar-toolbar.tsx

@@ -29,7 +29,7 @@ export function ChatSidebarDesktopToolbar({ onCreateSession, collapsed }: Pick<C
   }
   return <>
     <div className="px-4 pb-2">
-      <Button variant="ghost" className="w-full rounded-lg bg-primary/10 text-primary hover:bg-primary/15" onClick={onCreateSession}>
+      <Button variant="ghost" className="w-full rounded-[var(--sidebar-create-radius)] [box-shadow:var(--sidebar-create-shadow)] bg-[var(--sidebar-create-background)] font-[number:var(--sidebar-create-weight)] text-[var(--sidebar-create-foreground)] hover:bg-[var(--sidebar-create-hover)] hover:text-[var(--sidebar-create-hover-foreground)]" onClick={onCreateSession}>
         <Plus className="mr-1.5 h-4 w-4" />{t('chatSidebarNewTask')}
       </Button>
     </div>
@@ -93,7 +93,7 @@ export function ChatSidebarMobileToolbar(props: ChatSidebarToolbarProps & {
               </button>
             </PopoverTrigger>
           </h1>
-          <ChatPopoverContent align="start" className="w-48 p-1.5">
+          <ChatPopoverContent align="start" variant="menu">
             <div onClick={() => setViewMenuOpen(false)}>
               <ChatSessionHeaderMenuItem icon={Clock3} label={t('chatSidebarViewTime')} onClick={() => onSelectMode('time-first')} />
               <ChatSessionHeaderMenuItem icon={Folder} label={t('chatSidebarViewProject')} onClick={() => onSelectMode('project-first')} />

package/src/features/chat/components/layout/chat-sidebar-utility-menu.tsx

@@ -1,3 +1,4 @@
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import { NavLink } from "react-router-dom";
 import {
   Popover,
@@ -112,13 +113,14 @@ export function ChatSidebarUtilityMenu({
       <ChatPopoverContent
         side={collapsed ? "right" : "top"}
         align={collapsed ? "end" : "start"}
-        className="w-64 p-2"
+        variant="menu"
+        matchTriggerWidth={!collapsed}
       >
-        <div className="space-y-1">
+        <div>
           <NavLink
             to="/settings"
             onClick={() => onOpenChange(false)}
-            className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
+            className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}
           >
             <Settings className="h-4 w-4 text-muted-foreground/70" />
             <span className="flex-1 text-left">{t("settings")}</span>
@@ -134,7 +136,7 @@ export function ChatSidebarUtilityMenu({
                 action();
                 onOpenChange(false);
               }}
-              className="flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium text-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-gray-900"
+              className={`${ACTION_MENU_ITEM_CLASS} text-foreground ${ACTION_FEEDBACK.item}`}
             >
               <Icon className="h-4 w-4 text-muted-foreground/70" />
               <span className="flex-1 text-left">{label}</span>
@@ -142,7 +144,7 @@ export function ChatSidebarUtilityMenu({
           ))}
         </div>
 
-        <div className="my-2 h-px bg-border" />
+        <div className="my-1 h-px bg-border" />
 
         <ChatSidebarUtilitySelect
           icon={Palette}
@@ -197,10 +199,10 @@ function ChatSidebarUtilitySelect<Value extends string>({
     >
       <SelectTrigger
         aria-label={label}
-        className="h-auto w-full rounded-lg border-0 bg-transparent px-3 py-2 text-[13px] font-medium text-foreground shadow-none hover:bg-[var(--interaction-hover)] hover:text-gray-900 focus:ring-0"
+        className={`${ACTION_MENU_ITEM_CLASS} h-auto border-0 bg-transparent text-foreground shadow-none focus:ring-0 ${ACTION_FEEDBACK.item}`}
         indicator={<ChevronRight className="h-4 w-4 text-muted-foreground/70" />}
       >
-        <div className="flex min-w-0 items-center gap-2.5">
+        <div className="flex min-w-0 items-center gap-2">
           <Icon className="h-4 w-4 shrink-0 text-muted-foreground/70" />
           <span className="text-left">{label}</span>
         </div>