@agent-native/dispatch 0.23.5 → 0.24.2

package/src/routes/pages/dreams.tsx

@@ -4,11 +4,8 @@ import {
 } from "@agent-native/core/client/hooks";
 import {
   IconAlertTriangle,
-  IconBrain,
   IconCalendarTime,
   IconCheck,
-  IconCircleDashed,
-  IconClock,
   IconDatabase,
   IconFileDiff,
   IconPlayerPlay,
@@ -548,32 +545,6 @@ function ProposalSkeleton() {
   );
 }
 
-function StatTile({
-  label,
-  value,
-  icon: Icon,
-}: {
-  label: string;
-  value: string | number;
-  icon: typeof IconBrain;
-}) {
-  return (
-    <div className="rounded-lg bg-card px-3 py-2.5">
-      <div className="flex items-center justify-between gap-2">
-        <div className="min-w-0 flex-1">
-          <div className="truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-            {label}
-          </div>
-          <div className="mt-1 text-xl font-semibold tabular-nums text-foreground">
-            {value}
-          </div>
-        </div>
-        <Icon size={18} className="shrink-0 text-muted-foreground" />
-      </div>
-    </div>
-  );
-}
-
 function DreamSettingsSheet({
   open,
   onOpenChange,
@@ -1358,10 +1329,6 @@ export default function DreamsRoute() {
   const evidenceItems: DreamEvidence[] = detail?.evidence ?? [];
   const selectedSourceHealth: DreamSourceHealth[] =
     selectedDream?.sourceHealth ?? [];
-  const pendingProposalCount = proposals.filter(
-    (proposal) =>
-      String(proposal.status || "pending").toLowerCase() === "pending",
-  ).length;
   const appliedProposalCount = proposals.filter(
     (proposal) => String(proposal.status || "").toLowerCase() === "applied",
   ).length;
@@ -1428,32 +1395,10 @@ export default function DreamsRoute() {
       description="Review agent runs, propose memory improvements, and apply evidence-backed learning changes."
     >
       <div className="space-y-4">
-        <div className="flex flex-col gap-3">
-          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
-            <StatTile
-              label="Dream passes"
-              value={dreams.length}
-              icon={IconBrain}
-            />
-            <StatTile
-              label="Pending proposals"
-              value={pendingProposalCount}
-              icon={IconCircleDashed}
-            />
-            <StatTile
-              label="Candidate runs"
-              value={candidates.length}
-              icon={IconClock}
-            />
-            <StatTile
-              label="Inspected threads"
-              value={selectedDream ? dreamInspectedCount(selectedDream) : 0}
-              icon={IconCheck}
-            />
-          </div>
-          <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-3 border-b pb-3">
+          <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
             {dreamSettings ? (
-              <Badge variant="outline" className="h-9 max-w-full truncate px-3">
+              <Badge variant="outline" className="max-w-full truncate">
                 {dreamSettings.enabled ? "Enabled" : "Paused"} ·{" "}
                 {dreamSettings.allSources
                   ? "All sources"
@@ -1461,6 +1406,11 @@ export default function DreamsRoute() {
                 · {dreamSettings.schedule}
               </Badge>
             ) : null}
+            <span className="text-xs text-muted-foreground">
+              {dreams.length} passes · {candidates.length} candidate runs
+            </span>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
             <DreamSettingsSheet
               open={settingsOpen}
               onOpenChange={handleSettingsOpenChange}
@@ -1519,8 +1469,8 @@ export default function DreamsRoute() {
           </div>
         </div>
 
-        <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-[280px_minmax(0,1fr)_380px]">
-          <section className="rounded-lg bg-card">
+        <div className="grid gap-4 lg:grid-cols-[280px_minmax(0,1fr)]">
+          <section className="min-w-0 rounded-lg bg-card">
             <div className="border-b px-4 py-3">
               <div className="text-sm font-semibold text-foreground">
                 Recent passes
@@ -1770,92 +1720,92 @@ export default function DreamsRoute() {
               ) : null}
             </div>
           </section>
+        </div>
 
-          <section className="rounded-lg bg-card">
-            <div className="border-b px-4 py-3">
-              <div>
-                <div className="text-sm font-semibold text-foreground">
-                  Candidate runs
-                </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  Grounded signals ready for review.
-                </div>
+        <section className="min-w-0 rounded-lg bg-card">
+          <div className="border-b px-4 py-3">
+            <div>
+              <div className="text-sm font-semibold text-foreground">
+                Candidate runs
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                Grounded signals ready for review.
               </div>
             </div>
-            <div className="max-h-[720px] overflow-auto p-3">
-              <QueryState
-                error={candidatesQuery.error}
-                label="Could not load candidates"
-              />
-              {candidatesQuery.isLoading ? <DreamListSkeleton /> : null}
-              {!candidatesQuery.isLoading &&
-              !candidatesQuery.error &&
-              candidateSourceHealth.length > 0 ? (
-                <div className="mb-3">
-                  <SourceHealthPanel sources={candidateSourceHealth} />
-                </div>
-              ) : null}
-              {!candidatesQuery.isLoading && !candidatesQuery.error ? (
-                candidates.length > 0 ? (
-                  <Table>
-                    <TableHeader>
-                      <TableRow>
-                        <TableHead>Run</TableHead>
-                        <TableHead>Signals</TableHead>
-                        <TableHead className="w-20 text-right">Score</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {candidates.map((candidate) => {
-                        const id = candidateId(candidate);
-                        const signals = candidateSignals(candidate);
-                        return (
-                          <TableRow key={id}>
-                            <TableCell className="min-w-0 py-3">
-                              <div className="max-w-[230px] truncate text-sm font-medium text-foreground">
-                                {candidateLabel(candidate)}
-                              </div>
-                              <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
-                                {candidate.thread?.id ??
-                                  candidate.threadId ??
-                                  candidate.runId ??
-                                  id}
-                              </div>
-                              <div className="mt-1 text-[11px] text-muted-foreground">
-                                {candidateOwner(candidate)} ·{" "}
-                                {compactDate(candidateUpdatedAt(candidate))}
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3">
-                              <div className="mt-1 flex flex-wrap gap-1">
-                                <Badge variant="outline">
-                                  {candidateStatus(candidate)}
+          </div>
+          <div className="max-h-[720px] overflow-auto p-3">
+            <QueryState
+              error={candidatesQuery.error}
+              label="Could not load candidates"
+            />
+            {candidatesQuery.isLoading ? <DreamListSkeleton /> : null}
+            {!candidatesQuery.isLoading &&
+            !candidatesQuery.error &&
+            candidateSourceHealth.length > 0 ? (
+              <div className="mb-3">
+                <SourceHealthPanel sources={candidateSourceHealth} />
+              </div>
+            ) : null}
+            {!candidatesQuery.isLoading && !candidatesQuery.error ? (
+              candidates.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Run</TableHead>
+                      <TableHead>Signals</TableHead>
+                      <TableHead className="w-20 text-right">Score</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {candidates.map((candidate) => {
+                      const id = candidateId(candidate);
+                      const signals = candidateSignals(candidate);
+                      return (
+                        <TableRow key={id}>
+                          <TableCell className="min-w-0 py-3">
+                            <div className="max-w-[230px] truncate text-sm font-medium text-foreground">
+                              {candidateLabel(candidate)}
+                            </div>
+                            <div className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
+                              {candidate.thread?.id ??
+                                candidate.threadId ??
+                                candidate.runId ??
+                                id}
+                            </div>
+                            <div className="mt-1 text-[11px] text-muted-foreground">
+                              {candidateOwner(candidate)} ·{" "}
+                              {compactDate(candidateUpdatedAt(candidate))}
+                            </div>
+                          </TableCell>
+                          <TableCell className="py-3">
+                            <div className="mt-1 flex flex-wrap gap-1">
+                              <Badge variant="outline">
+                                {candidateStatus(candidate)}
+                              </Badge>
+                              {signals.slice(0, 2).map((signal) => (
+                                <Badge key={signal} variant="secondary">
+                                  {signal}
                                 </Badge>
-                                {signals.slice(0, 2).map((signal) => (
-                                  <Badge key={signal} variant="secondary">
-                                    {signal}
-                                  </Badge>
-                                ))}
-                              </div>
-                            </TableCell>
-                            <TableCell className="py-3 text-right text-sm tabular-nums text-muted-foreground">
-                              {candidate.score ?? "n/a"}
-                            </TableCell>
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                ) : (
-                  <EmptyPanel
-                    title="No candidates"
-                    description="No recent runs matched the dream candidate heuristics."
-                  />
-                )
-              ) : null}
-            </div>
-          </section>
-        </div>
+                              ))}
+                            </div>
+                          </TableCell>
+                          <TableCell className="py-3 text-right text-sm tabular-nums text-muted-foreground">
+                            {candidate.score ?? "n/a"}
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              ) : (
+                <EmptyPanel
+                  title="No candidates"
+                  description="No recent runs matched the dream candidate heuristics."
+                />
+              )
+            ) : null}
+          </div>
+        </section>
       </div>
     </DispatchShell>
   );

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}