@agent-native/dispatch 0.41.1-nightly-20261104110058 → 0.42.0

package/src/actions/index.ts

@@ -29,6 +29,7 @@ import getAppCreationSettings from "./get-app-creation-settings.js";
 import getDispatchSettings from "./get-dispatch-settings.js";
 import getDreamSettings from "./get-dream-settings.js";
 import getDream from "./get-dream.js";
+import getHostedAppsSettings from "./get-hosted-apps-settings.js";
 import getVaultAccessSettings from "./get-vault-access-settings.js";
 import getWorkspaceInfo from "./get-workspace-info.js";
 import getWorkspaceResourceEffectiveContext from "./get-workspace-resource-effective-context.js";
@@ -96,6 +97,7 @@ import sendPlatformMessage from "./send-platform-message.js";
 import setAppCreationSettings from "./set-app-creation-settings.js";
 import setDispatchApprovalPolicy from "./set-dispatch-approval-policy.js";
 import setDreamSettings from "./set-dream-settings.js";
+import setHostedAppsSettings from "./set-hosted-apps-settings.js";
 import setMcpAppAccess from "./set-mcp-app-access.js";
 import setVaultAccessSettings from "./set-vault-access-settings.js";
 import startWorkspaceAppCreation from "./start-workspace-app-creation.js";
@@ -137,6 +139,7 @@ export const dispatchActions: Record<string, ActionEntry> = {
   "get-dream": getDream,
   "get-dream-settings": getDreamSettings,
   "get-dispatch-settings": getDispatchSettings,
+  "get-hosted-apps-settings": getHostedAppsSettings,
   "get-vault-access-settings": getVaultAccessSettings,
   "get-workspace-resource-effective-context":
     getWorkspaceResourceEffectiveContext,
@@ -206,6 +209,7 @@ export const dispatchActions: Record<string, ActionEntry> = {
   "set-app-creation-settings": setAppCreationSettings,
   "set-dispatch-approval-policy": setDispatchApprovalPolicy,
   "set-dream-settings": setDreamSettings,
+  "set-hosted-apps-settings": setHostedAppsSettings,
   "set-mcp-app-access": setMcpAppAccess,
   "set-vault-access-settings": setVaultAccessSettings,
   "start-workspace-app-creation": startWorkspaceAppCreation,

package/src/actions/list-connected-agents.spec.ts

@@ -13,6 +13,9 @@ const mocks = vi.hoisted(() => ({
   loadWorkspaceAppsManifest: vi.fn(
     async (): Promise<Array<{ id: string }> | null> => null,
   ),
+  getOrgSetting: vi.fn(
+    async (): Promise<Record<string, unknown> | null> => null,
+  ),
 }));
 
 vi.mock("@agent-native/core", () => ({
@@ -33,9 +36,17 @@ vi.mock("@agent-native/core/resources/store", () => ({
 }));
 
 vi.mock("@agent-native/core/server", () => ({
+  getRequestOrgId: () => "org-1",
   getRequestUserEmail: () => mocks.getRequestUserEmail(),
 }));
 
+vi.mock("@agent-native/core/settings", () => ({
+  getOrgSetting: (...args: unknown[]) => mocks.getOrgSetting(...args),
+  getUserSetting: vi.fn(),
+  putOrgSetting: vi.fn(),
+  putUserSetting: vi.fn(),
+}));
+
 vi.mock("@agent-native/core/server/agent-discovery", () => ({
   discoverAgents: (...args: unknown[]) => mocks.discoverAgents(...args),
   getBuiltinAgents: (...args: unknown[]) => mocks.getBuiltinAgents(...args),
@@ -83,6 +94,62 @@ describe("list-connected-agents", () => {
     });
   });
 
+  it("marks hosted apps hidden from launchers when the organization hides them", async () => {
+    const clips = {
+      id: "clips",
+      name: "Clips",
+      description: "",
+      url: "https://clips.agent-native.com",
+      color: "#000000",
+    };
+    const partner = { ...clips, id: "partner", url: "https://p.example.test" };
+    mocks.getBuiltinAgents.mockReturnValue([clips]);
+    mocks.discoverAgents.mockResolvedValue([clips, partner]);
+    mocks.resourceListAccessible.mockImplementation(async () => []);
+    mocks.getOrgSetting.mockResolvedValueOnce({ showHostedApps: false });
+
+    const { default: action } = await import("./list-connected-agents.js");
+    const agents = await action.run({});
+
+    expect(
+      agents.map((agent: { id: string; hiddenFromLaunchers?: boolean }) => [
+        agent.id,
+        agent.hiddenFromLaunchers === true,
+      ]),
+    ).toEqual([
+      ["clips", true],
+      ["partner", false],
+    ]);
+  });
+
+  it("hides hosted apps instead of failing the list when the stored setting is invalid", async () => {
+    const clips = {
+      id: "clips",
+      name: "Clips",
+      description: "",
+      url: "https://clips.agent-native.com",
+      color: "#000000",
+    };
+    const partner = { ...clips, id: "partner", url: "https://p.example.test" };
+    mocks.getBuiltinAgents.mockReturnValue([clips]);
+    mocks.discoverAgents.mockResolvedValue([clips, partner]);
+    mocks.resourceListAccessible.mockImplementation(async () => []);
+    mocks.getOrgSetting.mockResolvedValueOnce({ showHostedApps: "no" });
+
+    const { default: action } = await import("./list-connected-agents.js");
+    const agents = await action.run({});
+
+    expect(
+      agents.map((agent: { id: string; hiddenFromLaunchers?: boolean }) => [
+        agent.id,
+        agent.hiddenFromLaunchers === true,
+      ]),
+    ).toEqual([
+      ["clips", true],
+      ["partner", false],
+    ]);
+  });
+
   it("does not surface seeded manifests for built-ins that are not enabled as custom agents", async () => {
     mocks.getBuiltinAgents.mockReturnValue([]);
     mocks.discoverAgents.mockResolvedValue([]);

package/src/actions/list-connected-agents.ts

@@ -11,38 +11,34 @@ import {
 import { getRequestUserEmail } from "@agent-native/core/server";
 import {
   discoverAgents,
-  getBuiltinAgents,
   isBuiltinAgentCatalogId,
-  loadWorkspaceAppsManifest,
   normalizeAgentId,
   shouldIncludeRemoteAgentManifest,
 } from "@agent-native/core/server/agent-discovery";
 import { z } from "zod";
 
+import {
+  readHostedAppsSettings,
+  listHostedApps,
+} from "../server/lib/hosted-apps-settings.js";
+
 export default defineAction({
   description:
-    "List agents available to dispatch for A2A delegation, including built-in apps and connected remote agents.",
+    "List agents available to dispatch for A2A delegation, including built-in apps and connected remote agents. When get-hosted-apps-settings reports showHostedApps false, built-in (hosted) apps are still listed but marked hiddenFromLaunchers: true.",
   schema: z.object({}),
   http: { method: "GET" },
   run: async () => {
     const { hiddenAgentIds = [] } = await import("../server/index.js").then(
       (m) => m.getDispatchConfig(),
     );
-    const [discovered, workspaceApps] = await Promise.all([
+    const [discovered, hosted, hostedAppsSettings] = await Promise.all([
       discoverAgents("dispatch"),
-      loadWorkspaceAppsManifest(),
+      listHostedApps(),
+      readHostedAppsSettings(),
     ]);
-    // A mounted workspace app with a built-in's id is a workspace app; the
-    // built-in config never applies to it.
-    const workspaceIds = new Set(
-      (workspaceApps ?? []).map((app) => normalizeAgentId(app.id)),
-    );
-    const builtins = getBuiltinAgents("dispatch");
-    const builtinIds = new Set(
-      builtins.map((agent) => agent.id).filter((id) => !workspaceIds.has(id)),
-    );
+    const builtinIds = new Set(hosted.map((agent) => agent.id));
     const builtinHomeUrls = new Map(
-      builtins.map((agent) => [agent.id, agent.url]),
+      hosted.map((agent) => [agent.id, agent.url]),
     );
     const ownerEmail = getRequestUserEmail();
     if (!ownerEmail) {
@@ -97,6 +93,9 @@ export default defineAction({
       return {
         ...agent,
         ...(homeUrl ? { homeUrl } : {}),
+        ...(isBuiltin && !hostedAppsSettings.showHostedApps
+          ? { hiddenFromLaunchers: true }
+          : {}),
         source: isBuiltin ? "builtin" : custom ? "custom" : "workspace",
         resourceId: custom?.resourceId,
         path: custom?.path,

package/src/actions/list_apps.spec.ts

@@ -2,6 +2,11 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
   listGrantedApps: vi.fn(),
+  hideHostedAppsWhenOff: vi.fn(async <T>(apps: T[]) => apps),
+}));
+
+vi.mock("../server/lib/hosted-apps-settings.js", () => ({
+  hideHostedAppsWhenOff: mocks.hideHostedAppsWhenOff,
 }));
 
 vi.mock("../server/lib/mcp-gateway.js", () => ({
@@ -12,6 +17,7 @@ import listApps from "./list_apps.js";
 
 beforeEach(() => {
   vi.clearAllMocks();
+  mocks.hideHostedAppsWhenOff.mockImplementation(async (apps) => apps);
   mocks.listGrantedApps.mockResolvedValue([
     {
       id: "slides",
@@ -29,6 +35,16 @@ beforeEach(() => {
 });
 
 describe("list_apps", () => {
+  it("leaves out apps the hosted apps setting hides", async () => {
+    mocks.hideHostedAppsWhenOff.mockImplementation(async (apps) =>
+      apps.filter((app: { id: string }) => app.id !== "analytics"),
+    );
+    const result = await listApps.run({});
+    expect(result.apps.map((app: { id: string }) => app.id)).toEqual([
+      "slides",
+    ]);
+  });
+
   it("returns a compact valid JSON message for MCP hosts", async () => {
     const result = await listApps.run({});
 

package/src/actions/list_apps.ts

@@ -1,17 +1,20 @@
 import { defineAction } from "@agent-native/core/action";
 import { z } from "zod";
 
+import { hideHostedAppsWhenOff } from "../server/lib/hosted-apps-settings.js";
 import { listGrantedDispatchMcpApps } from "../server/lib/mcp-gateway.js";
 
 export default defineAction({
   description:
-    'List the apps this Dispatch MCP gateway can route to, including "dispatch" itself for Dispatch-owned pages such as extensions. The result is filtered by Dispatch\'s MCP app access policy.',
+    'List the apps this Dispatch MCP gateway can route to, including "dispatch" itself for Dispatch-owned pages such as extensions. The result is filtered by Dispatch\'s MCP app access policy, and leaves out Agent-Native.com hosted apps while the organization hides them.',
   schema: z.object({}),
   http: { method: "GET" },
   readOnly: true,
   parallelSafe: true,
   run: async () => {
-    const apps = await listGrantedDispatchMcpApps();
+    const apps = await hideHostedAppsWhenOff(
+      await listGrantedDispatchMcpApps(),
+    );
     const appSummaries = apps.map((app) => ({
       id: app.id,
       name: app.name,

package/src/actions/set-hosted-apps-settings.ts

@@ -0,0 +1,42 @@
+import { defineAction } from "@agent-native/core/action";
+import { z } from "zod";
+
+import { authorizeOrgOwnerOrAdmin } from "../server/lib/app-roles.js";
+import { recordAudit } from "../server/lib/dispatch-store.js";
+import { hostedAppsSettingsViewSchema } from "../server/lib/hosted-apps-settings-schema.js";
+import {
+  HOSTED_APPS_SETTINGS_KEY,
+  setHostedAppsSettings,
+} from "../server/lib/hosted-apps-settings.js";
+
+export default defineAction({
+  mcpAnnotations: {
+    readOnlyHint: false,
+    destructiveHint: false,
+    openWorldHint: false,
+  },
+  description:
+    "Show or hide Agent-Native.com hosted apps (built-in apps) in this organization's Dispatch app lists and agent context. Organization owners and admins only. Pins are kept while hidden.",
+  authorize: authorizeOrgOwnerOrAdmin,
+  schema: z.object({
+    showHostedApps: z
+      .boolean()
+      .describe(
+        "true shows Agent-Native.com hosted apps; false hides them for everyone.",
+      ),
+  }),
+  outputSchema: hostedAppsSettingsViewSchema,
+  run: async ({ showHostedApps }) => {
+    const saved = await setHostedAppsSettings({ showHostedApps });
+    await recordAudit({
+      action: "hosted-apps.updated",
+      targetType: "dispatch-settings",
+      targetId: HOSTED_APPS_SETTINGS_KEY,
+      summary: showHostedApps
+        ? "Showed Agent-Native.com hosted apps"
+        : "Hid Agent-Native.com hosted apps",
+      metadata: saved,
+    });
+    return saved;
+  },
+});

package/src/components/app-card-tiers.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+
+import type { ConnectedAppSummary } from "../lib/other-apps";
+import {
+  tierWorkspaceApps,
+  useWorkspaceAppLayout,
+} from "../lib/workspace-app-layout";
+import type { WorkspaceAppSummary } from "../lib/workspace-apps";
+import { AppList } from "./app-list-row";
+import { AppTierSections } from "./app-tier-sections";
+import { ConnectedAppCard } from "./connected-app-card";
+import { WorkspaceAppCard } from "./workspace-app-card";
+
+type AppCardEntry =
+  | { id: string; name: string; source?: undefined; app: WorkspaceAppSummary }
+  | {
+      id: string;
+      name: string;
+      source: "builtin";
+      hosted: ConnectedAppSummary;
+    };
+
+/** Home and All apps: workspace app cards and hosted app cards, tiered. */
+export function AppCardTiers({
+  workspaceApps,
+  hostedApps,
+  appsTitle,
+  actions,
+  hasPinnedApps,
+  appsFallback,
+}: {
+  workspaceApps: readonly WorkspaceAppSummary[];
+  hostedApps: readonly ConnectedAppSummary[];
+  appsTitle: string;
+  actions?: ReactNode;
+  hasPinnedApps?: boolean;
+  appsFallback?: ReactNode;
+}) {
+  const { layout, togglePinned } = useWorkspaceAppLayout();
+  const tiers = tierWorkspaceApps<AppCardEntry>(
+    [
+      ...workspaceApps.map((app) => ({ id: app.id, name: app.name, app })),
+      ...hostedApps.map((hosted) => ({
+        id: hosted.id,
+        name: hosted.name,
+        source: "builtin" as const,
+        hosted,
+      })),
+    ],
+    layout,
+  );
+  const isPinned = (id: string) =>
+    layout.pinnedIds.includes(id.trim().toLowerCase());
+
+  return (
+    <AppTierSections
+      tiers={tiers}
+      appsTitle={appsTitle}
+      actions={actions}
+      hasPinnedApps={hasPinnedApps}
+      appsFallback={appsFallback}
+      renderItems={(entries) => (
+        <AppList layout="grid">
+          {entries.map((entry) =>
+            "app" in entry ? (
+              <WorkspaceAppCard
+                key={entry.id}
+                app={entry.app}
+                isPinned={isPinned(entry.id)}
+                onTogglePinned={() => togglePinned(entry.id)}
+              />
+            ) : (
+              <ConnectedAppCard
+                key={entry.id}
+                app={entry.hosted}
+                isPinned={isPinned(entry.id)}
+                onTogglePinned={() => togglePinned(entry.id)}
+              />
+            ),
+          )}
+        </AppList>
+      )}
+    />
+  );
+}

package/src/components/app-list-row.spec.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+// oracle-change(packages/dispatch/src/components/other-apps-section.spec.ts): OtherAppsSection had no importers and was deleted with its spec.
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { AppList, AppListRow } from "./app-list-row";
+
+describe("AppList", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders grid rows as muted shadcn Items and list rows as divided rows", async () => {
+    await act(async () =>
+      root.render(
+        <>
+          <AppList layout="grid">
+            <AppListRow>grid app</AppListRow>
+          </AppList>
+          <AppList>
+            <AppListRow>list app</AppListRow>
+          </AppList>
+        </>,
+      ),
+    );
+
+    const rows = [...container.querySelectorAll("div")].filter((row) =>
+      /^(grid|list) app$/.test(row.textContent ?? ""),
+    );
+    const grid = rows.find(
+      (row) => row.textContent === "grid app" && row.dataset.slot,
+    );
+    const list = rows.filter((row) => row.textContent === "list app").at(-1);
+    expect(grid?.dataset.slot).toBe("item");
+    expect(grid?.dataset.variant).toBe("muted");
+    // Tabbing into a row marks it; Item only styles its own focus.
+    expect(grid?.className).toContain("focus-within:border-ring/50");
+    expect(list?.dataset.slot).toBeUndefined();
+    expect(list?.className).toContain("border-b");
+  });
+});

package/src/components/app-list-row.tsx

@@ -1,23 +1,61 @@
-import type { ReactNode } from "react";
+import { Item } from "@agent-native/toolkit/ui/item";
+import {
+  createContext,
+  useContext,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 
 import { cn } from "../lib/utils";
 
-export const APP_LIST_GRID_CLASS =
-  "w-full xl:grid xl:grid-cols-2 xl:gap-3 xl:overflow-visible xl:rounded-none";
-export const APP_LIST_GRID_ROW_CLASS =
-  "xl:rounded-2xl xl:border xl:border-transparent xl:transition-[border-color] xl:focus-within:border-ring/50";
+type AppListLayout = "list" | "grid";
 
+const AppListLayoutContext = createContext<AppListLayout>("list");
+
+/**
+ * `grid` is the two-column app list on Home, New chat, All apps and the
+ * catalogs; its rows are shadcn `Item`s. `list` is a bordered, divided list.
+ */
 export function AppList({
   children,
   className,
+  layout = "list",
 }: {
   children: ReactNode;
   className?: string;
+  layout?: AppListLayout;
 }) {
   return (
-    <div className={cn("overflow-hidden rounded-2xl", className)}>
-      {children}
-    </div>
+    <AppListLayoutContext.Provider value={layout}>
+      <div
+        className={cn(
+          layout === "grid"
+            ? "grid w-full grid-cols-1 gap-2 sm:grid-cols-2"
+            : "overflow-hidden rounded-2xl",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AppListLayoutContext.Provider>
+  );
+}
+
+/** One app in a grid app list. */
+export function AppGridItem({
+  className,
+  ...props
+}: ComponentProps<typeof Item>) {
+  return (
+    <Item
+      variant="muted"
+      size="sm"
+      className={cn(
+        "group min-w-0 flex-nowrap focus-within:border-ring/50",
+        className,
+      )}
+      {...props}
+    />
   );
 }
 
@@ -28,6 +66,10 @@ export function AppListRow({
   children: ReactNode;
   className?: string;
 }) {
+  const layout = useContext(AppListLayoutContext);
+  if (layout === "grid") {
+    return <AppGridItem className={className}>{children}</AppGridItem>;
+  }
   return (
     <div
       className={cn(

package/src/components/app-open-actions.tsx

@@ -1,5 +1,21 @@
+import type { useT } from "@agent-native/core/client/i18n";
+import type { AppOpenActionLabels } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
+
 export {
   AppOpenActions,
   type AppOpenActionLabels,
   type AppOpenActionMenuItem,
 } from "@agent-native/toolkit/app/chat/chat-first/app-open-actions";
+
+/** Dispatch's localized labels for an app row's Open actions. */
+export function appOpenActionLabels(
+  t: ReturnType<typeof useT>,
+  name: string,
+): Partial<AppOpenActionLabels> {
+  return {
+    openApp: t("dispatch.pages.openApp", { defaultValue: "Open" }),
+    openAppAccessible: t("dispatch.pages.chatFirstOpenApp", { name }),
+    openInNewTab: t("dispatch.pages.chatFirstOpenInNewTab"),
+    moreOptions: t("extensions.optionsFor", { name }),
+  };
+}

package/src/components/app-pin-button.spec.tsx

@@ -0,0 +1,68 @@
+// @vitest-environment happy-dom
+import React, { act, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) => key,
+}));
+
+import { AppPinButton } from "./app-pin-button";
+import { TooltipProvider } from "./ui/tooltip";
+
+function MovingRow() {
+  const [pinned, setPinned] = useState(false);
+  const button = (
+    <AppPinButton
+      appId="mail"
+      name="Mail"
+      pinned={pinned}
+      onToggle={() => setPinned((value) => !value)}
+    />
+  );
+  return (
+    <TooltipProvider>
+      <section data-section="pinned">{pinned ? button : null}</section>
+      <section data-section="apps">{pinned ? null : button}</section>
+    </TooltipProvider>
+  );
+}
+
+describe("AppPinButton", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps focus on the app's pin button after pinning moves its row", async () => {
+    await act(async () => root.render(<MovingRow />));
+    const before = container.querySelector<HTMLButtonElement>(
+      '[data-pin-app-id="mail"]',
+    )!;
+    before.focus();
+
+    await act(async () => before.click());
+    await act(
+      () =>
+        new Promise<void>((resolve) => requestAnimationFrame(() => resolve())),
+    );
+
+    const after = container.querySelector<HTMLButtonElement>(
+      '[data-section="pinned"] [data-pin-app-id="mail"]',
+    );
+    expect(after).not.toBeNull();
+    expect(after).not.toBe(before);
+    expect(document.activeElement).toBe(after);
+  });
+});

package/src/components/app-pin-button.tsx

@@ -0,0 +1,66 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconPin, IconPinFilled } from "@tabler/icons-react";
+
+import { cn } from "../lib/utils";
+import { Button } from "./ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+/** Shown on row hover or focus, always when pinned or on touch screens. */
+export function AppPinButton({
+  appId,
+  name,
+  pinned,
+  onToggle,
+  className,
+}: {
+  appId: string;
+  name: string;
+  pinned: boolean;
+  onToggle: () => void;
+  className?: string;
+}) {
+  const t = useT();
+  const label = t(
+    pinned ? "dispatch.pages.unpinApp" : "dispatch.pages.pinApp",
+    {
+      name,
+    },
+  );
+  const Icon = pinned ? IconPinFilled : IconPin;
+  const toggle = () => {
+    onToggle();
+    // Pinning moves the row to another section, which remounts it; keep
+    // keyboard focus on this app's pin button rather than dropping to <body>.
+    requestAnimationFrame(() => {
+      if (document.activeElement && document.activeElement !== document.body) {
+        return;
+      }
+      document
+        .querySelector<HTMLElement>(`[data-pin-app-id="${CSS.escape(appId)}"]`)
+        ?.focus();
+    });
+  };
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          aria-label={label}
+          aria-pressed={pinned}
+          data-pinned={pinned}
+          data-pin-app-id={appId}
+          onClick={toggle}
+          className={cn(
+            "size-7 shrink-0 p-0 text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 data-[pinned=true]:text-foreground data-[pinned=true]:opacity-100 [@media(pointer:coarse)]:opacity-100",
+            className,
+          )}
+        >
+          <Icon size={15} aria-hidden="true" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}