@agent-native/dispatch 0.24.0 → 0.24.3

package/src/routes/pages/integrations.tsx

@@ -3,12 +3,14 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import {
-  IconCheck,
+  getDefaultMcpIntegrations,
+  McpIntegrationLogo,
+} from "@agent-native/core/client/resources";
+import {
   IconChevronRight,
-  IconCircleDashed,
-  IconKey,
   IconLink,
   IconPlugConnected,
+  IconSearch,
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
@@ -17,7 +19,6 @@ import { toast } from "sonner";
 
 import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
-import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
   Collapsible,
@@ -34,11 +35,7 @@ import {
 } from "../../components/ui/dialog";
 import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "../../components/ui/tooltip";
+import { Skeleton } from "../../components/ui/skeleton";
 
 export function meta() {
   return [{ title: "Connections — Dispatch" }];
@@ -97,6 +94,38 @@ function inferProviderFromKey(key: string, label: string): string {
   return "other";
 }
 
+const MCP_INTEGRATIONS_BY_ID = new Map(
+  getDefaultMcpIntegrations().map((integration) => [
+    integration.id,
+    integration,
+  ]),
+);
+
+const CREDENTIAL_PROVIDER_LOGO_IDS: Record<string, string> = {
+  google: "google-workspace",
+  bigquery: "google-workspace",
+  jira: "atlassian",
+};
+
+function credentialLogo(service: Service) {
+  const providerId = inferProviderFromKey(service.key, service.label);
+  const integration = MCP_INTEGRATIONS_BY_ID.get(
+    CREDENTIAL_PROVIDER_LOGO_IDS[providerId] ?? providerId,
+  );
+  if (!integration?.logoUrl) {
+    return <IconPlugConnected className="size-4 text-muted-foreground" />;
+  }
+  return (
+    <McpIntegrationLogo
+      name={service.label}
+      logoUrl={integration.logoUrl}
+      integrationId={integration.id}
+      className="size-full rounded-md border-0 bg-transparent"
+      imageClassName="size-full p-1"
+    />
+  );
+}
+
 function ConnectDialog({
   service,
   open,
@@ -110,6 +139,10 @@ function ConnectDialog({
 }) {
   const [value, setValue] = useState("");
   const qc = useQueryClient();
+  const configuredApps = service.apps.filter((app) => app.configured);
+  const configuredAppNames = configuredApps
+    .map((app) => app.appName)
+    .join(", ");
 
   const createSecret = useActionMutation("create-vault-secret", {});
   const createGrant = useActionMutation("create-vault-grant", {});
@@ -189,12 +222,11 @@ function ConnectDialog({
         <DialogHeader>
           <DialogTitle>Connect {service.label}</DialogTitle>
           <DialogDescription>
-            Used by{" "}
-            {service.apps.length === 1
-              ? service.apps[0].appName
-              : `${service.apps.length} apps`}
-            . Saved to the workspace vault and synced to every app that needs
-            it.
+            {configuredApps.length > 0
+              ? `Configured in ${configuredAppNames}. `
+              : "No app currently reports this key as configured. "}
+            Saving it creates a workspace vault entry using this exact key name.
+            Apps need the same key name to use it.
           </DialogDescription>
         </DialogHeader>
         <div className="space-y-3">
@@ -240,55 +272,54 @@ function ConnectorCard({
   accessMode: "all-apps" | "manual";
 }) {
   const [open, setOpen] = useState(false);
-  const isConnected = service.apps.some((a) => a.configured);
-  const appCount = service.apps.length;
+  const configuredApps = service.apps.filter((app) => app.configured);
+  const vaultApps = service.apps.filter((app) => app.vaultGranted);
+  const isAvailable = configuredApps.length > 0 || vaultApps.length > 0;
+  const configuredAppNames = configuredApps
+    .map((app) => app.appName)
+    .join(", ");
+  const vaultAppNames = vaultApps.map((app) => app.appName).join(", ");
 
   return (
     <>
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className="group flex flex-col items-start gap-2 rounded-2xl bg-card p-5 text-left transition-[background-color] hover:bg-card/80 cursor-pointer"
-      >
-        <div className="flex w-full items-start justify-between gap-2">
-          <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-muted">
-            <IconKey size={16} className="text-muted-foreground" />
-          </div>
-          {isConnected ? (
-            <Badge
-              variant="secondary"
-              className="bg-green-500/10 text-green-700 dark:text-green-400 gap-1"
-            >
-              <IconCheck size={12} />
-              Connected
-            </Badge>
-          ) : (
-            <Badge
-              variant="secondary"
-              className="bg-amber-500/10 text-amber-700 dark:text-amber-400 gap-1"
-            >
-              <IconCircleDashed size={12} />
-              Connect
-            </Badge>
-          )}
+      <article className="flex min-w-0 items-center gap-3 border-b border-border/60 py-3.5 last:border-b-0">
+        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted">
+          {credentialLogo(service)}
         </div>
-        <div className="w-full min-w-0">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className="text-sm font-semibold text-foreground truncate">
-                {service.label}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent>{service.label}</TooltipContent>
-          </Tooltip>
-          <div className="font-mono text-xs text-muted-foreground/80 truncate">
-            {service.key}
+        <div className="min-w-0 flex-1">
+          <div className="flex min-w-0 items-center gap-2">
+            <span className="truncate text-sm font-medium text-foreground">
+              {service.label}
+            </span>
+            <span
+              className={
+                isAvailable
+                  ? "shrink-0 text-[11px] font-medium text-emerald-600 dark:text-emerald-400"
+                  : "shrink-0 text-[11px] font-medium text-muted-foreground"
+              }
+            >
+              {vaultApps.length > 0 ? "Connected" : "App key"}
+            </span>
           </div>
+          <p className="mt-0.5 truncate font-mono text-[11px] leading-5 text-muted-foreground/80">
+            {service.key}
+          </p>
+          <p className="mt-0.5 truncate text-xs leading-5 text-muted-foreground">
+            Declared by {service.apps.length}{" "}
+            {service.apps.length === 1 ? "app" : "apps"}
+            {configuredApps.length > 0 ? ` · ${configuredAppNames}` : ""}
+            {vaultApps.length > 0 ? ` · Vault: ${vaultAppNames}` : ""}
+          </p>
         </div>
-        <div className="text-xs text-muted-foreground">
-          Used by {appCount} {appCount === 1 ? "app" : "apps"}
-        </div>
-      </button>
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className="inline-flex h-8 shrink-0 items-center justify-center gap-1 rounded-md border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          {isAvailable ? "Manage" : "Connect"}
+          <IconChevronRight className="size-3.5 rtl:-scale-x-100" />
+        </button>
+      </article>
       <ConnectDialog
         service={service}
         open={open}
@@ -326,11 +357,13 @@ function PerAppDetailRow({ app }: { app: CatalogApp }) {
 export default function ConnectionsRoute() {
   const catalogQuery = useActionQuery("list-integrations-catalog", {});
   const accessQuery = useActionQuery("get-vault-access-settings", {});
-  const { data: catalog, isLoading } = catalogQuery;
+  const { data: catalog } = catalogQuery;
   const { data: accessSettings } = accessQuery;
+  const isLoading = catalogQuery.isLoading || accessQuery.isLoading;
   const apps = (catalog as CatalogApp[]) || [];
   const accessMode =
     (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
+  const [query, setQuery] = useState("");
 
   const services = useMemo<Service[]>(() => {
     const map = new Map<string, Service>();
@@ -358,13 +391,26 @@ export default function ConnectionsRoute() {
     );
   }, [apps]);
 
-  const available = services.filter((s) => !s.apps.some((a) => a.configured));
-  const connected = services.filter((s) => s.apps.some((a) => a.configured));
+  const filteredServices = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return services;
+    return services.filter(
+      (service) =>
+        service.label.toLowerCase().includes(normalized) ||
+        service.key.toLowerCase().includes(normalized),
+    );
+  }, [query, services]);
+  const available = filteredServices.filter(
+    (s) => !s.apps.some((a) => a.configured),
+  );
+  const connected = filteredServices.filter((s) =>
+    s.apps.some((a) => a.configured),
+  );
 
   return (
     <DispatchShell
       title="Connections"
-      description="Connect services once. Apps that need them pick up the key automatically."
+      description="Connect workspace credentials declared by apps and manage how they are shared."
     >
       {catalogQuery.isError || accessQuery.isError ? (
         <ActionQueryError
@@ -376,9 +422,40 @@ export default function ConnectionsRoute() {
         />
       ) : null}
 
+      {!catalogQuery.isError && !isLoading ? (
+        <div className="mb-5 flex items-center gap-3">
+          <div className="relative min-w-0 flex-1">
+            <IconSearch className="pointer-events-none absolute start-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              placeholder="Search credentials"
+              aria-label="Search credentials"
+              className="h-9 ps-9"
+            />
+          </div>
+          <span className="shrink-0 text-xs text-muted-foreground">
+            {filteredServices.length} credential
+            {filteredServices.length === 1 ? "" : "s"}
+          </span>
+        </div>
+      ) : null}
+
       {!catalogQuery.isError && isLoading && services.length === 0 && (
-        <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
-          Discovering apps and credentials…
+        <div className="overflow-hidden rounded-lg bg-card">
+          {Array.from({ length: 7 }).map((_, index) => (
+            <div
+              key={index}
+              className="flex items-center gap-3 border-b px-4 py-3 last:border-b-0"
+            >
+              <Skeleton className="size-8 rounded-md" />
+              <div className="min-w-0 flex-1">
+                <Skeleton className="h-4 w-40 max-w-full" />
+                <Skeleton className="mt-1.5 h-3 w-56 max-w-full" />
+              </div>
+              <Skeleton className="h-6 w-20 rounded-full" />
+            </div>
+          ))}
         </div>
       )}
 
@@ -392,13 +469,13 @@ export default function ConnectionsRoute() {
         <section>
           <div className="mb-3 flex items-baseline justify-between">
             <h2 className="text-sm font-medium text-foreground">
-              Available to connect
+              Not configured in apps
             </h2>
             <span className="text-xs text-muted-foreground">
               {available.length}
             </span>
           </div>
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div className="overflow-hidden rounded-lg bg-card">
             {available.map((service) => (
               <ConnectorCard
                 key={service.key}
@@ -413,12 +490,14 @@ export default function ConnectionsRoute() {
       {connected.length > 0 && (
         <section>
           <div className="mb-3 mt-2 flex items-baseline justify-between">
-            <h2 className="text-sm font-medium text-foreground">Connected</h2>
+            <h2 className="text-sm font-medium text-foreground">
+              Configured in apps
+            </h2>
             <span className="text-xs text-muted-foreground">
               {connected.length}
             </span>
           </div>
-          <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+          <div className="overflow-hidden rounded-lg bg-card">
             {connected.map((service) => (
               <ConnectorCard
                 key={service.key}

package/src/routes/pages/metrics.tsx

@@ -33,6 +33,7 @@ import {
   SelectValue,
 } from "../../components/ui/select";
 import { Skeleton } from "../../components/ui/skeleton";
+import { UsageAlertsPanel } from "../../components/usage-alerts-panel";
 import { cn } from "../../lib/utils";
 
 export function meta() {
@@ -1038,6 +1039,13 @@ export default function MetricsRoute() {
               <ReviewUsageButton metrics={metrics} billing={billing} />
             </div>
 
+            <UsageAlertsPanel
+              scope={scope === "workspace" ? "workspace" : "user"}
+              appOptions={metrics.byApp
+                .filter((row) => row.key && row.key !== "unattributed")
+                .map((row) => ({ id: row.key, label: displayApp(row.key) }))}
+            />
+
             <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-5">
               <MetricCard
                 label={billing.label}

package/src/routes/pages/operations.tsx

@@ -105,11 +105,11 @@ export default function OperationsRoute() {
       >
         <TabsList className="w-fit">
           <TabsTrigger value="monitoring">
-            <IconActivity size={15} />
+            <IconActivity size={15} className="mr-1.5" />
             {t("dispatch.pages.monitoring")}
           </TabsTrigger>
           <TabsTrigger value="database">
-            <IconDatabase size={15} />
+            <IconDatabase size={15} className="mr-1.5" />
             {t("dispatch.pages.database")}
           </TabsTrigger>
         </TabsList>

package/src/routes/pages/settings.tsx

@@ -26,6 +26,7 @@ import {
 } from "../../components/ui/card";
 import { Label } from "../../components/ui/label";
 import { Switch } from "../../components/ui/switch";
+import { dispatchAccessDescriptor } from "../../shared/app-roles.js";
 
 export function meta() {
   return [{ title: "Settings - Dispatch" }];
@@ -33,7 +34,19 @@ export function meta() {
 
 export default function SettingsRoute() {
   const t = useT();
-  const agentSettingsTabs = useAgentSettingsTabs();
+  const agentSettingsTabs = useAgentSettingsTabs({
+    usageAppId: "dispatch",
+    usageViewAllHref: "/admin/metrics",
+    organizationContent: (
+      <div className="mx-auto w-full max-w-3xl">
+        <TeamPage
+          showTitle={false}
+          appRoles={dispatchAccessDescriptor}
+          createOrgDescription="Set up a team to share dispatch destinations and approvals with your colleagues."
+        />
+      </div>
+    ),
+  });
   const settingsTabs = [
     ...agentSettingsTabs.filter((tab) => tab.id !== "integrations"),
     {
@@ -172,14 +185,6 @@ export default function SettingsRoute() {
             </Card>
           </div>
         }
-        team={
-          <div className="mx-auto w-full max-w-3xl">
-            <TeamPage
-              showTitle={false}
-              createOrgDescription="Set up a team to share dispatch destinations and approvals with your colleagues."
-            />
-          </div>
-        }
         whatsNew={
           <div className="mx-auto w-full max-w-3xl">
             <ChangelogSettingsCard markdown={changelog} />

package/src/routes/pages/thread-debug.tsx

@@ -520,20 +520,18 @@ function ResultCard({
         selected ? "bg-accent/70" : "hover:bg-muted/50",
       )}
     >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <div className="truncate text-sm font-medium text-foreground">
-            {title}
-          </div>
-        </div>
-        <Badge variant="outline" className="shrink-0">
+      <div className="truncate text-sm font-medium text-foreground">
+        {title}
+      </div>
+      <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-[11px] text-muted-foreground">
+        <span>
           {result.messageCount}{" "}
           {result.messageCount === 1 ? "message" : "messages"}
-        </Badge>
-      </div>
-      <div className="mt-2 flex items-center justify-between gap-3 text-[11px] text-muted-foreground">
+        </span>
+        <span aria-hidden="true">·</span>
         <span className="min-w-0 truncate">{result.ownerEmail}</span>
-        <span className="shrink-0">{formatRelativeDate(result.updatedAt)}</span>
+        <span aria-hidden="true">·</span>
+        <span>{formatRelativeDate(result.updatedAt)}</span>
       </div>
     </button>
   );
@@ -1621,31 +1619,6 @@ export default function ThreadDebugRoute() {
                   </SelectContent>
                 </Select>
               </div>
-              <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-                <span className="font-medium text-foreground">
-                  {failures.length} loaded{" "}
-                  {failures.length === 1 ? "run" : "runs"}
-                </span>
-                <span>·</span>
-                <span>
-                  {failuresData?.access?.scope ??
-                    t("dispatch.pages.threadDebugCurrentScope", {
-                      defaultValue: "current scope",
-                    })}
-                </span>
-                {failurePatterns.slice(0, 3).map((pattern) => (
-                  <Badge key={pattern.label} variant="outline">
-                    {pattern.count} {pattern.label}
-                  </Badge>
-                ))}
-                {failuresData?.partial ? (
-                  <Badge variant="outline">
-                    {t("dispatch.pages.threadDebugPartialResults", {
-                      defaultValue: "Partial results",
-                    })}
-                  </Badge>
-                ) : null}
-              </div>
               {unavailableFailureSources.length > 0 ? (
                 <div className="mt-2 flex items-start gap-1.5 text-xs text-muted-foreground">
                   <IconAlertTriangle className="mt-0.5 size-3.5 shrink-0" />
@@ -1662,6 +1635,15 @@ export default function ThreadDebugRoute() {
                   </span>
                 </div>
               ) : null}
+              {failuresData?.partial ? (
+                <div className="mt-2">
+                  <Badge variant="outline">
+                    {t("dispatch.pages.threadDebugPartialResults", {
+                      defaultValue: "Partial results",
+                    })}
+                  </Badge>
+                </div>
+              ) : null}
             </section>
 
             {failuresError ? (

package/src/routes/pages/vault.tsx

@@ -829,8 +829,13 @@ export default function VaultRoute() {
 
         <TabsContent value="secrets" className="mt-4 space-y-3">
           {!accessReady ? (
-            <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
-              Checking workspace access…
+            <div className="space-y-3">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <div key={index} className="rounded-lg bg-card px-4 py-4">
+                  <Skeleton className="h-4 w-1/3" />
+                  <Skeleton className="mt-2 h-3 w-2/3" />
+                </div>
+              ))}
             </div>
           ) : !canManageVault ? (
             <div className="rounded-2xl border border-dashed px-6 py-12 text-center">