@nextclaw/ui 0.15.21 → 0.15.23

package/src/features/notifications/managers/app-notification.manager.ts

@@ -1,6 +1,7 @@
 import { createElement } from "react";
 import { toast } from "sonner";
 import { AppNotificationToast } from "@/features/notifications/components/app-notification-toast";
+import { t } from "@/shared/lib/i18n";
 
 export type AppNotification = {
   id?: string | number;
@@ -9,6 +10,7 @@ export type AppNotification = {
   href?: string;
   iconSrc?: string;
   ariaLabel?: string;
+  dismissLabel?: string;
   durationMs?: number;
 };
 
@@ -24,6 +26,7 @@ export class AppNotificationManager {
           href: notification.href,
           iconSrc: notification.iconSrc,
           ariaLabel: notification.ariaLabel,
+          dismissLabel: notification.dismissLabel ?? t("notificationDismiss"),
           onDismiss: () => {
             toast.dismiss(toastId);
           },

package/src/features/panel-apps/components/panel-app-list-item.tsx

@@ -118,7 +118,7 @@ function PanelAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}

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

@@ -17,7 +17,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onOpenApps}
-        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="inline-flex shrink-0 items-center rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('appsTitle')}
         aria-label={t('appsTitle')}
       >
@@ -32,7 +32,7 @@ export function PanelAppToolbar({
       <button
         type="button"
         onClick={onRefresh}
-        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+        className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
         title={t('panelAppsRefreshCurrent')}
         aria-label={t('panelAppsRefreshCurrent')}
       >

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

@@ -104,7 +104,7 @@ export function PanelAppsList({
             <TooltipProvider delayDuration={250}>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-accent hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
+                  <button type="button" className="rounded p-0.5 text-muted-foreground/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground" aria-label={t('panelAppsTitle')}><HelpCircle className="h-3.5 w-3.5" /></button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-[320px] break-all font-mono text-xs">{panelApps.data.panelsPath}</TooltipContent>
               </Tooltip>
@@ -114,7 +114,7 @@ export function PanelAppsList({
         <button
           type="button"
           onClick={() => void panelApps.refetch()}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-accent-foreground"
           title={t('panelAppsRefresh')}
           aria-label={t('panelAppsRefresh')}
         >
@@ -204,7 +204,7 @@ function PanelAppsEmptyGuide({
         <button
           type="button"
           onClick={onRefresh}
-          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          className="mt-4 inline-flex items-center justify-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium 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"
         >
           <RefreshCw className="h-3.5 w-3.5" />
           {t('panelAppsRefresh')}
@@ -245,7 +245,7 @@ function PanelAppsEmptyGuideStep({
       <button
         type="button"
         onClick={onAction}
-        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+        className="flex w-full gap-2 rounded-md bg-muted/60 px-3 py-2.5 text-left transition-colors hover:bg-[var(--interaction-hover)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
       >
         {content}
       </button>

package/src/features/panel-apps/utils/panel-app-doc-browser.utils.tsx

@@ -79,5 +79,6 @@ export const PANEL_APPS_DOC_BROWSER_RENDERERS: DocBrowserCustomTabRenderers = {
         onRefresh={refreshIframe}
       />
     ),
+    supportsScrollRestoration: true,
   },
 };

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -91,6 +91,15 @@ describe('PwaShellThemeManager', () => {
     expect(document.documentElement.style.colorScheme).toBe('dark');
   });
 
+  it('applies charcoal shell colors and dark color scheme', () => {
+    pwaShellThemeManager.syncTheme('charcoal');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#1C1C1C');
+    expect(document.body.style.backgroundColor).toBe('rgb(28, 28, 28)');
+    expect(document.documentElement.style.colorScheme).toBe('dark');
+  });
+
   it('maps the legacy leaf theme to warm shell colors', () => {
     document.documentElement.setAttribute('data-theme', 'leaf');
 

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -14,6 +14,7 @@ const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
   dawn: '#FAF7F4',
   graphite: '#F8F8F7',
   night: '#101318',
+  charcoal: '#1C1C1C',
   probe: '#FEFCF6',
 };
 

package/src/features/service-apps/components/__tests__/service-apps-panel.test.tsx

@@ -62,7 +62,7 @@ vi.mock('@/features/service-apps/hooks/use-service-apps', () => ({
 }));
 
 describe('ServiceAppsPanel', () => {
-  it('labels service app icon actions and deletes through a confirm dialog', async () => {
+  it('keeps service actions progressive and deletes through a confirm dialog', async () => {
     const user = userEvent.setup();
 
     render(<ServiceAppsPanel />);
@@ -71,15 +71,16 @@ describe('ServiceAppsPanel', () => {
     expect(screen.queryByText('idle')).toBeNull();
     const discoverButton = screen.getByRole('button', { name: 'Connect and discover actions' });
     expect(discoverButton).toBeTruthy();
-    const disconnectButton = screen.getByRole('button', { name: 'Disconnect runtime' });
-    expect(disconnectButton).toBeTruthy();
-    expect((disconnectButton as HTMLButtonElement).disabled).toBe(true);
     await user.hover(discoverButton);
     await waitFor(() => {
       expect(screen.queryAllByText('Connect to the service app runtime and discover its available actions.').length).toBeGreaterThan(0);
     });
 
+    await user.click(discoverButton);
+    expect(discoverServiceAppActionsMutateAsync).toHaveBeenCalledWith('notes');
+
     fireEvent.click(screen.getByRole('button', { name: 'More actions' }));
+    expect((screen.getByRole('button', { name: 'Disconnect runtime' }) as HTMLButtonElement).disabled).toBe(true);
     fireEvent.click(screen.getByRole('button', { name: 'Delete service app' }));
     fireEvent.click(screen.getByRole('button', { name: 'Delete' }));
 

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -0,0 +1,470 @@
+import { useState } from "react";
+import type {
+  ServiceActionGrantView,
+  ServiceActionListView,
+  ServiceAppRecordView,
+} from "@nextclaw/client-sdk";
+import {
+  AlertTriangle,
+  CheckCircle2,
+  ChevronDown,
+  CircleDashed,
+  LoaderCircle,
+  MoreVertical,
+  PauseCircle,
+  Radar,
+  Server,
+  ShieldCheck,
+  Trash2,
+  Unplug,
+  type LucideIcon,
+  Wrench,
+} from "lucide-react";
+import { ConfirmDialog } from "@/shared/components/ui/confirm-dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type ServiceActionView = ServiceActionListView["actions"][number];
+type ServiceAppStatus = ServiceAppRecordView["status"];
+
+export function ServiceAppListItem({
+  app,
+  actions,
+  actionsOpen,
+  grants,
+  deletePending,
+  isDiscovering,
+  onActionsOpenChange,
+  onDiscover,
+  onDelete,
+  onRestart,
+  onRevoke,
+}: {
+  app: ServiceAppRecordView;
+  actions: ServiceActionView[];
+  actionsOpen: boolean;
+  grants: ServiceActionGrantView[];
+  deletePending: boolean;
+  isDiscovering: boolean;
+  onActionsOpenChange: (open: boolean) => void;
+  onDiscover: (appId: string) => void;
+  onDelete: (appId: string) => void;
+  onRestart: (appId: string) => void;
+  onRevoke: (grant: ServiceActionGrantView) => void;
+}) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isDiagnosticsOpen, setIsDiagnosticsOpen] = useState(false);
+  const canConnectAndDiscover =
+    app.status !== "starting" && app.status !== "stopped";
+  const canDisconnectRuntime =
+    app.status === "running" || app.status === "failed";
+  const diagnostics = getServiceAppDiagnostics(app);
+  const openDeleteDialog = () => {
+    setIsMenuOpen(false);
+    setIsDeleteDialogOpen(true);
+  };
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <section className="group bg-card transition-colors hover:bg-muted/25">
+        <div className="flex items-start gap-3 px-4 py-3.5">
+          <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+            <Server className="h-4 w-4" />
+          </div>
+          <div className="min-w-0 flex-1">
+            <div className="flex items-center gap-2">
+              <div className="truncate text-sm font-medium text-foreground">
+                {app.title}
+              </div>
+              <ServiceAppStatusBadge status={app.status} />
+            </div>
+            {app.description ? (
+              <div className="mt-1 truncate text-xs leading-5 text-muted-foreground">
+                {app.description}
+              </div>
+            ) : null}
+            {app.lastError ? (
+              <div
+                className="mt-1.5 truncate text-xs text-rose-600"
+                title={app.lastError}
+              >
+                {app.lastError}
+              </div>
+            ) : null}
+          </div>
+          <div className="flex shrink-0 items-center gap-0.5">
+            {canConnectAndDiscover ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    disabled={isDiscovering}
+                    className="inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground px-2.5 text-xs font-medium text-background transition-colors hover:bg-foreground/85 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-foreground/40 disabled:cursor-not-allowed disabled:opacity-50"
+                    aria-label={t("serviceAppsDiscoverActions")}
+                    onClick={() => onDiscover(app.id)}
+                  >
+                    {isDiscovering ? (
+                      <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
+                    ) : (
+                      <Radar className="h-3.5 w-3.5" />
+                    )}
+                    <span>{t("serviceAppsConnect")}</span>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-56 text-xs">
+                  {t("serviceAppsDiscoverActionsHint")}
+                </TooltipContent>
+              </Tooltip>
+            ) : null}
+            <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <PopoverTrigger asChild>
+                    <button
+                      type="button"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:opacity-50"
+                      aria-label={t("serviceAppsMoreActions")}
+                      disabled={deletePending}
+                    >
+                      <MoreVertical className="h-3.5 w-3.5" />
+                    </button>
+                  </PopoverTrigger>
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="text-xs">
+                  {t("serviceAppsMoreActions")}
+                </TooltipContent>
+              </Tooltip>
+              <PopoverContent align="end" className="w-48 rounded-xl p-1.5">
+                <ServiceAppMenuItem
+                  disabled={!canDisconnectRuntime}
+                  icon={Unplug}
+                  label={t("serviceAppsDisconnectRuntime")}
+                  onClick={() => {
+                    setIsMenuOpen(false);
+                    onRestart(app.id);
+                  }}
+                />
+                <ServiceAppMenuItem
+                  destructive
+                  disabled={deletePending}
+                  icon={Trash2}
+                  label={t("serviceAppsDelete")}
+                  onClick={openDeleteDialog}
+                />
+              </PopoverContent>
+            </Popover>
+          </div>
+        </div>
+
+        <div className="border-t border-border/60">
+          <div className="flex items-stretch">
+            <button
+              type="button"
+              onClick={() => onActionsOpenChange(!actionsOpen)}
+              className="flex min-w-0 flex-1 items-center justify-between gap-2 px-4 py-2 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+              aria-expanded={actionsOpen}
+            >
+              <div className="flex min-w-0 items-center gap-2">
+                <span>{t("serviceAppsActionsSection")}</span>
+                <span className="tabular-nums text-muted-foreground/70">
+                  {actions.length}
+                </span>
+              </div>
+              <ChevronDown
+                className={cn(
+                  "h-3.5 w-3.5 shrink-0 text-muted-foreground/70 transition-transform",
+                  actionsOpen && "rotate-180",
+                )}
+              />
+            </button>
+            {diagnostics.length > 0 ? (
+              <button
+                type="button"
+                onClick={() => setIsDiagnosticsOpen((open) => !open)}
+                className="flex shrink-0 items-center gap-1 border-l border-border/60 px-3 text-xs text-muted-foreground transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border"
+                aria-expanded={isDiagnosticsOpen}
+              >
+                <span>{t("serviceAppsDetails")}</span>
+                <ChevronDown
+                  className={cn(
+                    "h-3.5 w-3.5 transition-transform",
+                    isDiagnosticsOpen && "rotate-180",
+                  )}
+                />
+              </button>
+            ) : null}
+          </div>
+          {actionsOpen ? (
+            <div className="border-t border-border/60 px-4 py-2.5">
+              {actions.length === 0 ? (
+                <div className="py-1 text-xs text-muted-foreground">
+                  {t("serviceAppsActionsEmpty")}
+                </div>
+              ) : (
+                <div className="divide-y divide-border/50">
+                  {actions.map((action) => (
+                    <ServiceActionRow
+                      key={action.id}
+                      action={action}
+                      grants={grants.filter(
+                        (grant) => grant.actionId === action.id,
+                      )}
+                      onRevoke={onRevoke}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ) : null}
+          {isDiagnosticsOpen ? (
+            <ServiceAppDiagnostics rows={diagnostics} />
+          ) : null}
+        </div>
+
+        <ConfirmDialog
+          open={isDeleteDialogOpen}
+          onOpenChange={setIsDeleteDialogOpen}
+          title={t("serviceAppsDeleteConfirmTitle")}
+          description={`${t("serviceAppsDeleteConfirmDescription")} ${app.title}`}
+          confirmLabel={t("delete")}
+          variant="destructive"
+          onConfirm={() => onDelete(app.id)}
+          onCancel={() => undefined}
+        />
+      </section>
+    </TooltipProvider>
+  );
+}
+
+function ServiceAppStatusBadge({ status }: { status: ServiceAppStatus }) {
+  const view = getServiceAppStatusView(status);
+  const Icon = view.icon;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span
+          className={cn(
+            "inline-flex shrink-0 items-center gap-1 text-xs",
+            view.className,
+          )}
+          aria-label={view.label}
+        >
+          <Icon className={cn("h-3 w-3", view.iconClassName)} />
+          <span>{view.label}</span>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent side="bottom" className="text-xs">
+        {view.tooltip}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function getServiceAppStatusView(status: ServiceAppStatus): {
+  className: string;
+  icon: LucideIcon;
+  iconClassName?: string;
+  label: string;
+  tooltip: string;
+} {
+  switch (status) {
+    case "running":
+      return {
+        className: "text-emerald-700",
+        icon: CheckCircle2,
+        label: t("serviceAppsStatus_running"),
+        tooltip: t("serviceAppsStatusHint_running"),
+      };
+    case "starting":
+      return {
+        className: "text-blue-700",
+        icon: LoaderCircle,
+        iconClassName: "animate-spin",
+        label: t("serviceAppsStatus_starting"),
+        tooltip: t("serviceAppsStatusHint_starting"),
+      };
+    case "failed":
+      return {
+        className: "text-rose-700",
+        icon: AlertTriangle,
+        label: t("serviceAppsStatus_failed"),
+        tooltip: t("serviceAppsStatusHint_failed"),
+      };
+    case "stopped":
+      return {
+        className: "text-muted-foreground",
+        icon: PauseCircle,
+        label: t("serviceAppsStatus_stopped"),
+        tooltip: t("serviceAppsStatusHint_stopped"),
+      };
+    case "idle":
+    default:
+      return {
+        className: "text-muted-foreground",
+        icon: CircleDashed,
+        label: t("serviceAppsStatus_idle"),
+        tooltip: t("serviceAppsStatusHint_idle"),
+      };
+  }
+}
+
+function ServiceAppMenuItem({
+  destructive = false,
+  disabled = false,
+  icon: Icon,
+  label,
+  onClick,
+}: {
+  destructive?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-50",
+        destructive
+          ? "text-destructive hover:bg-destructive/10"
+          : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground",
+      )}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      <span>{label}</span>
+    </button>
+  );
+}
+
+function getServiceAppDiagnostics(app: ServiceAppRecordView) {
+  const command = [app.command, ...(app.args ?? [])]
+    .filter((value): value is string => Boolean(value?.trim()))
+    .join(" ");
+  return [
+    { label: t("serviceAppsCommand"), value: command },
+    { label: t("serviceAppsCwd"), value: app.cwd },
+    { label: t("serviceAppsManifest"), value: app.manifestPath },
+    { label: t("serviceAppsLastStarted"), value: app.lastStartedAt },
+    { label: t("serviceAppsLastReady"), value: app.lastReadyAt },
+    { label: t("serviceAppsLastFailed"), value: app.lastFailedAt },
+  ].filter((row) => row.value);
+}
+
+function ServiceAppDiagnostics({
+  rows,
+}: {
+  rows: Array<{ label: string; value: string | undefined }>;
+}) {
+  return (
+    <div className="border-t border-border/60 px-4 py-2.5">
+      <dl className="grid grid-cols-[4.75rem_minmax(0,1fr)] gap-x-3 gap-y-1.5 text-xs">
+        {rows.map((row) => (
+          <ServiceAppDiagnosticRow
+            key={row.label}
+            label={row.label}
+            value={row.value}
+          />
+        ))}
+      </dl>
+    </div>
+  );
+}
+
+function ServiceAppDiagnosticRow({
+  label,
+  value,
+}: {
+  label: string;
+  value: string | undefined;
+}) {
+  return (
+    <>
+      <dt className="text-muted-foreground/70">{label}</dt>
+      <dd
+        className="min-w-0 truncate font-mono text-muted-foreground"
+        title={value}
+      >
+        {value}
+      </dd>
+    </>
+  );
+}
+
+function ServiceActionRow({
+  action,
+  grants,
+  onRevoke,
+}: {
+  action: ServiceActionView;
+  grants: ServiceActionGrantView[];
+  onRevoke: (grant: ServiceActionGrantView) => void;
+}) {
+  return (
+    <div className="py-2">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground">
+            <Wrench className="h-3.5 w-3.5" />
+          </span>
+          <div className="min-w-0">
+            <div className="truncate text-xs font-medium text-foreground">
+              {action.title ?? action.name}
+            </div>
+            {action.description ? (
+              <div className="truncate text-[11px] text-muted-foreground">
+                {action.description}
+              </div>
+            ) : null}
+          </div>
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {action.runtimeState ? (
+            <span className="text-[11px] text-muted-foreground">
+              {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
+            </span>
+          ) : null}
+          <span className="text-[11px] text-muted-foreground">
+            {action.risk}
+          </span>
+        </div>
+      </div>
+      {grants.map((grant) => (
+        <div
+          key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`}
+          className="mt-1.5 flex items-center justify-between gap-2 pl-8"
+        >
+          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
+            <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
+            <span className="truncate">
+              {t("serviceAppsGrantedTo")} {grant.caller.appId}
+            </span>
+          </div>
+          <button
+            type="button"
+            onClick={() => onRevoke(grant)}
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-muted hover:text-rose-600 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            title={t("serviceAppsRevokeGrant")}
+            aria-label={t("serviceAppsRevokeGrant")}
+          >
+            <Trash2 className="h-3 w-3" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}