@agent-native/dispatch 0.16.6 → 0.17.0

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

@@ -0,0 +1,42 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
+import { IconArrowUpRight } from "@tabler/icons-react";
+
+import type { ConnectedAppSummary } from "../lib/other-apps";
+
+export function ConnectedAppCard({ app }: { app: ConnectedAppSummary }) {
+  const t = useT();
+
+  return (
+    <a
+      href={withBuilderUtmTrackingParams(app.url, {
+        campaign: "product",
+        content: "dispatch_app",
+      })}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex min-h-[116px] items-start gap-3 rounded-xl bg-card/40 p-4 transition-[background-color] hover:bg-accent/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground">
+        {app.name.charAt(0).toUpperCase()}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-start justify-between gap-3">
+          <span className="truncate text-sm font-semibold text-foreground">
+            {app.name}
+          </span>
+          <IconArrowUpRight
+            size={15}
+            className="shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+          />
+        </span>
+        <span className="mt-2 line-clamp-2 block text-[13px] leading-5 text-muted-foreground">
+          {app.description || app.url}
+        </span>
+        <span className="mt-3 block text-xs font-medium text-foreground">
+          {t("dispatch.pages.openApp")}
+        </span>
+      </span>
+    </a>
+  );
+}

package/src/components/dispatch-control-plane.spec.tsx

@@ -10,6 +10,8 @@ import { TooltipProvider } from "./ui/tooltip";
 const clientState = vi.hoisted(() => ({
   navigateWithTransition: vi.fn(),
   promptComposerProps: null as Record<string, unknown> | null,
+  workspaceApps: [] as Array<Record<string, unknown>>,
+  connectedApps: [] as Array<Record<string, unknown>>,
   useChatModels: vi.fn(() => ({
     availableModels: [],
     defaultModel: "auto",
@@ -50,12 +52,17 @@ vi.mock("@agent-native/core/client/composer", () => ({
 }));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
-  useActionQuery: () => ({
-    data: [],
+  useActionQuery: (name: string) => ({
+    data:
+      name === "list-connected-agents"
+        ? clientState.connectedApps
+        : clientState.workspaceApps,
     isLoading: false,
     isError: false,
+    error: null,
     refetch: vi.fn(),
   }),
+  useActionMutation: () => ({ mutate: vi.fn(), isPending: false }),
 }));
 
 vi.mock("@agent-native/core/client/host", () => ({
@@ -65,6 +72,7 @@ vi.mock("@agent-native/core/client/host", () => ({
 vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string, values?: { defaultValue?: string }) =>
     values?.defaultValue ?? key,
+  useFormatters: () => ({ formatDate: (value: string) => value }),
 }));
 
 vi.mock("./create-app-popover", () => ({
@@ -79,6 +87,8 @@ describe("DispatchControlPlane", () => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     clientState.navigateWithTransition.mockReset();
     clientState.promptComposerProps = null;
+    clientState.workspaceApps = [];
+    clientState.connectedApps = [];
     clientState.useChatModels.mockClear();
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -140,4 +150,71 @@ describe("DispatchControlPlane", () => {
       }),
     );
   });
+
+  it("shows mounted and connected apps together without duplicates", async () => {
+    clientState.workspaceApps = [
+      {
+        id: "onboarding",
+        name: "Onboarding",
+        path: "/onboarding",
+        status: "ready",
+        isDispatch: false,
+      },
+      {
+        id: "dispatch",
+        name: "Dispatch",
+        path: "/dispatch",
+        status: "ready",
+        isDispatch: true,
+      },
+      {
+        id: "archived-app",
+        name: "Archived app",
+        path: "/archived-app",
+        status: "ready",
+        isDispatch: false,
+        archived: true,
+      },
+    ];
+    clientState.connectedApps = [
+      {
+        id: "mail",
+        name: "Mail",
+        description: "Email client",
+        url: "https://mail.agent-native.com",
+      },
+      {
+        id: "clips",
+        name: "Clips",
+        description: "Record and share",
+        url: "https://clips.agent-native.com",
+      },
+      {
+        id: "onboarding",
+        name: "Duplicate onboarding",
+        url: "https://duplicate.example.com",
+      },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <DispatchControlPlane />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Onboarding");
+    expect(container.textContent).toContain("Mail");
+    expect(container.textContent).toContain("Clips");
+    expect(container.textContent).not.toContain("Archived app");
+    expect(container.textContent).not.toContain("Duplicate onboarding");
+    expect(
+      Array.from(container.querySelectorAll("a")).filter((anchor) =>
+        anchor.getAttribute("href")?.includes("onboarding"),
+      ),
+    ).toHaveLength(1);
+  });
 });

package/src/components/dispatch-control-plane.tsx

@@ -15,9 +15,11 @@ import type { ReactNode } from "react";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router";
 
+import { filterOtherApps, type ConnectedAppSummary } from "../lib/other-apps";
 import { submitOverviewPrompt } from "../lib/overview-chat";
 import type { WorkspaceAppSummary } from "../lib/workspace-apps";
 import { ActionQueryError } from "./action-query-error";
+import { ConnectedAppCard } from "./connected-app-card";
 import { CreateAppPopover } from "./create-app-popover";
 import { useSetPageTitle } from "./layout/HeaderActions";
 import { Button } from "./ui/button";
@@ -141,17 +143,29 @@ function CommandPanel() {
 function AppsPanel({
   apps,
   isLoading,
+  otherApps,
+  otherAppsError,
+  otherAppsLoading,
+  onRetryOtherApps,
 }: {
   apps: WorkspaceAppSummary[];
   isLoading: boolean;
+  otherApps: ConnectedAppSummary[];
+  otherAppsError?: Error | null;
+  otherAppsLoading: boolean;
+  onRetryOtherApps: () => void;
 }) {
   const t = useT();
   const [showPending, setShowPending] = useState(false);
   const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
   const activeApps = visibleApps.filter((app) => app.status !== "pending");
   const pendingApps = visibleApps.filter((app) => app.status === "pending");
+  const hasActiveApps = activeApps.length > 0 || otherApps.length > 0;
   const showSkeletons =
-    isLoading && activeApps.length === 0 && pendingApps.length === 0;
+    (isLoading || otherAppsLoading) &&
+    activeApps.length === 0 &&
+    otherApps.length === 0 &&
+    pendingApps.length === 0;
 
   return (
     <section className="flex flex-col gap-3">
@@ -176,15 +190,21 @@ function AppsPanel({
             </div>
           ))}
         </div>
-      ) : activeApps.length > 0 ? (
+      ) : hasActiveApps ? (
         <div className="grid gap-3 md:grid-cols-2">
           {activeApps.map((app) => (
             <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
           ))}
+          {otherApps.map((app) => (
+            <ConnectedAppCard key={app.id} app={app} />
+          ))}
         </div>
       ) : (
         <CreateAppPopover />
       )}
+      {otherAppsError ? (
+        <ActionQueryError error={otherAppsError} onRetry={onRetryOtherApps} />
+      ) : null}
       {pendingApps.length > 0 ? (
         <Collapsible open={showPending} onOpenChange={setShowPending}>
           <div className="space-y-3 border-t pt-3">
@@ -246,7 +266,15 @@ export function DispatchControlPlane() {
     "list-workspace-apps",
     { includeAgentCards: false, includeArchived: true },
   );
+  const connectedAppsQuery = useActionQuery<ConnectedAppSummary[]>(
+    "list-connected-agents",
+    {},
+  );
   const { data: workspaceApps = [], isLoading: appsLoading } = appsQuery;
+  const otherApps = filterOtherApps(
+    connectedAppsQuery.data ?? [],
+    workspaceApps ?? [],
+  );
 
   return (
     <div className="flex flex-col gap-8">
@@ -257,7 +285,14 @@ export function DispatchControlPlane() {
           onRetry={() => void appsQuery.refetch()}
         />
       ) : (
-        <AppsPanel apps={workspaceApps ?? []} isLoading={appsLoading} />
+        <AppsPanel
+          apps={workspaceApps ?? []}
+          isLoading={appsLoading}
+          otherApps={otherApps}
+          otherAppsError={connectedAppsQuery.error}
+          otherAppsLoading={connectedAppsQuery.isLoading}
+          onRetryOtherApps={() => void connectedAppsQuery.refetch()}
+        />
       )}
     </div>
   );

package/src/lib/automation-display.spec.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   automationIdentity,
   automationNextRun,
+  automationScopeLabel,
   automationStatus,
   automationTarget,
   automationTroubleshootPath,
@@ -77,6 +78,45 @@ describe("automation-display", () => {
     });
   });
 
+  it("labels blocked scheduler checks separately from execution failures", () => {
+    const blocked = item({
+      id: "blocked",
+      name: "Blocked",
+      path: "jobs/blocked.md",
+      owner: "user@example.com",
+      lastStatus: "skipped",
+      lastError: "Condition was false",
+    });
+
+    expect(automationStatus(blocked)).toEqual({
+      label: "Blocked",
+      tone: "warning",
+    });
+  });
+
+  it("identifies personal and organization ownership in the UI", () => {
+    expect(
+      automationScopeLabel(
+        item({
+          id: "personal",
+          name: "Personal",
+          path: "jobs/personal.md",
+          owner: "user@example.com",
+        }),
+      ),
+    ).toBe("Personal");
+    expect(
+      automationScopeLabel(
+        item({
+          id: "organization",
+          name: "Organization",
+          path: "jobs/organization.md",
+          owner: "__organization__:org-1",
+        }),
+      ),
+    ).toBe("Organization");
+  });
+
   it("sorts enabled errors ahead of healthy runs", () => {
     const healthy = item({
       id: "healthy",

package/src/lib/automation-display.ts

@@ -27,6 +27,16 @@ export function automationTarget(item: DispatchAutomationItem): string {
   return item.triggerType || "schedule";
 }
 
+export function automationScopeLabel(
+  item: Pick<DispatchAutomationItem, "owner" | "scope">,
+): string {
+  return item.scope === "organization" ||
+    item.owner.startsWith("__organization__:") ||
+    item.owner === "__shared__"
+    ? "Organization"
+    : "Personal";
+}
+
 export function relativeRunTime(value: string | null | undefined): string {
   if (!value) return "never";
   const timestamp = new Date(value).getTime();
@@ -44,6 +54,10 @@ export function automationLastRun(item: DispatchAutomationItem): string {
   return item.lastRun ? relativeRunTime(item.lastRun) : "never";
 }
 
+export function automationLastCheck(item: DispatchAutomationItem): string {
+  return item.lastCheck ? relativeRunTime(item.lastCheck) : "never";
+}
+
 export function automationNextRun(item: DispatchAutomationItem): string {
   if (!item.enabled) return "paused";
   if (item.triggerType === "event") return "on event";
@@ -59,7 +73,7 @@ export function automationStatus(item: DispatchAutomationItem): {
   if (item.lastStatus === "running")
     return { label: "Running", tone: "warning" };
   if (item.lastStatus === "skipped")
-    return { label: "Skipped", tone: "warning" };
+    return { label: "Blocked", tone: "warning" };
   if (item.lastStatus === "success")
     return { label: "Healthy", tone: "success" };
   return { label: "Ready", tone: "default" };
@@ -69,8 +83,14 @@ export function sortAutomations(
   automations: DispatchAutomationItem[],
 ): DispatchAutomationItem[] {
   return [...automations].sort((a, b) => {
-    const aError = a.enabled && a.lastStatus === "error" ? 1 : 0;
-    const bError = b.enabled && b.lastStatus === "error" ? 1 : 0;
+    const aError =
+      a.enabled && (a.lastStatus === "error" || a.lastStatus === "skipped")
+        ? 1
+        : 0;
+    const bError =
+      b.enabled && (b.lastStatus === "error" || b.lastStatus === "skipped")
+        ? 1
+        : 0;
     if (aError !== bError) return bError - aError;
     return (b.lastRun || "").localeCompare(a.lastRun || "");
   });

package/src/lib/automations.ts

@@ -5,6 +5,7 @@ export interface DispatchAutomationItem {
   name: string;
   path: string;
   owner: string;
+  scope?: "personal" | "organization";
   canUpdate?: boolean;
   triggerType?: "schedule" | "event" | string;
   event?: string;
@@ -14,8 +15,10 @@ export interface DispatchAutomationItem {
   mode?: string;
   domain?: string;
   enabled?: boolean;
+  timezone?: string;
   lastStatus?: string;
   lastRun?: string;
+  lastCheck?: string;
   lastError?: string;
   nextRun?: string;
   createdBy?: string;

package/src/routes/pages/apps.tsx

@@ -1,9 +1,7 @@
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
 import {
   IconApps,
-  IconArrowUpRight,
   IconChevronDown,
   IconClockHour4,
   IconEyeOff,
@@ -13,6 +11,7 @@ import {
 import { useState } from "react";
 
 import { ActionQueryError } from "../../components/action-query-error";
+import { ConnectedAppCard } from "../../components/connected-app-card";
 import { CreateAppPopover } from "../../components/create-app-popover";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Button } from "../../components/ui/button";
@@ -277,7 +276,7 @@ export default function AppsRoute() {
             ) : (
               <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
                 {otherApps.map((app) => (
-                  <OtherAppCard key={app.id} app={app} />
+                  <ConnectedAppCard key={app.id} app={app} />
                 ))}
               </div>
             )}
@@ -382,42 +381,6 @@ function OtherAppsSkeletonGrid() {
   );
 }
 
-function OtherAppCard({ app }: { app: ConnectedAppSummary }) {
-  const t = useT();
-  return (
-    <a
-      href={withBuilderUtmTrackingParams(app.url, {
-        campaign: "product",
-        content: "dispatch_app",
-      })}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="group flex min-h-[116px] items-start gap-3 rounded-xl bg-card/40 p-4 transition-[background-color] hover:bg-accent/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground">
-        {app.name.charAt(0).toUpperCase()}
-      </span>
-      <span className="min-w-0 flex-1">
-        <span className="flex items-start justify-between gap-3">
-          <span className="truncate text-sm font-semibold text-foreground">
-            {app.name}
-          </span>
-          <IconArrowUpRight
-            size={15}
-            className="shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
-          />
-        </span>
-        <span className="mt-2 line-clamp-2 block text-[13px] leading-5 text-muted-foreground">
-          {app.description || app.url}
-        </span>
-        <span className="mt-3 block text-xs font-medium text-foreground">
-          {t("dispatch.pages.openApp")}
-        </span>
-      </span>
-    </a>
-  );
-}
-
 function AppsSkeletonGrid() {
   return (
     <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">

package/src/routes/pages/automations.tsx

@@ -3,6 +3,7 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 import { useChangeVersions } from "@agent-native/core/client/hooks";
 import {
   IconFileSearch,
+  IconListDetails,
   IconPlus,
   IconSettingsAutomation,
 } from "@tabler/icons-react";
@@ -11,6 +12,7 @@ import { useMemo, useState } from "react";
 import { Link } from "react-router";
 import { toast } from "sonner";
 
+import { AutomationRunHistoryDialog } from "../../components/automation-run-history-dialog";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -23,8 +25,10 @@ import { Skeleton } from "../../components/ui/skeleton";
 import { Switch } from "../../components/ui/switch";
 import {
   automationIdentity,
+  automationLastCheck,
   automationLastRun,
   automationNextRun,
+  automationScopeLabel,
   automationStatus,
   automationTarget,
   automationTroubleshootPath,
@@ -175,13 +179,17 @@ function CreateAutomationButton() {
 }
 
 export default function AutomationsRoute() {
+  const [detailsTarget, setDetailsTarget] =
+    useState<DispatchAutomationItem | null>(null);
   const automationsQuery = useAutomations();
   const toggleAutomation = useToggleAutomation();
   const automations = automationsQuery.data ?? [];
   const ordered = useMemo(() => sortAutomations(automations), [automations]);
   const enabledCount = automations.filter((item) => item.enabled).length;
   const errorCount = automations.filter(
-    (item) => item.enabled && item.lastStatus === "error",
+    (item) =>
+      item.enabled &&
+      (item.lastStatus === "error" || item.lastStatus === "skipped"),
   ).length;
   const pendingToggleIdentity = toggleAutomation.isPending
     ? toggleAutomation.variables
@@ -192,7 +200,7 @@ export default function AutomationsRoute() {
   return (
     <DispatchShell
       title="Automations"
-      description="See scheduled and event-triggered jobs, pause them, or ask the agent to create one."
+      description="See scheduled and event-triggered jobs, inspect their checks and past runs, pause them, or ask the agent to create one."
     >
       <section className="flex flex-col gap-4">
         <div className="flex flex-wrap items-center justify-between gap-3">
@@ -238,6 +246,10 @@ export default function AutomationsRoute() {
                     <div className="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
                       <span>Last {automationLastRun(item)}</span>
                       <span>Next {automationNextRun(item)}</span>
+                      <span>{automationScopeLabel(item)}</span>
+                      {item.lastCheck ? (
+                        <span>Checked {automationLastCheck(item)}</span>
+                      ) : null}
                     </div>
                     {item.lastError ? (
                       <div className="mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1 text-xs text-destructive">
@@ -256,14 +268,26 @@ export default function AutomationsRoute() {
                     ) : null}
                   </div>
                   <div className="flex flex-col items-end gap-2">
-                    <Badge
-                      variant={
-                        status.tone === "danger" ? "destructive" : "outline"
-                      }
-                      className="h-5"
-                    >
-                      {status.label}
-                    </Badge>
+                    <div className="flex items-center gap-2">
+                      <Badge
+                        variant={
+                          status.tone === "danger" ? "destructive" : "outline"
+                        }
+                        className="h-5"
+                      >
+                        {status.label}
+                      </Badge>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 px-2 text-xs"
+                        onClick={() => setDetailsTarget(item)}
+                      >
+                        <IconListDetails size={14} />
+                        Details
+                      </Button>
+                    </div>
                     <Switch
                       checked={!!item.enabled}
                       disabled={!canUpdate || isToggling}
@@ -288,6 +312,13 @@ export default function AutomationsRoute() {
           )}
         </div>
       </section>
+      <AutomationRunHistoryDialog
+        automation={detailsTarget}
+        open={detailsTarget !== null}
+        onOpenChange={(open) => {
+          if (!open) setDetailsTarget(null);
+        }}
+      />
     </DispatchShell>
   );
 }