@agent-native/core 0.134.0 → 0.135.0

package/src/client/agent-page/AgentJobsTab.tsx

@@ -3,8 +3,10 @@ import {
   IconBolt,
   IconCalendarEvent,
   IconClock,
+  IconAlertTriangle,
   IconEye,
   IconLoader2,
+  IconPencil,
   IconPlayerPause,
   IconPlayerPlay,
   IconTrash,
@@ -24,6 +26,11 @@ import { useFormatters, useT } from "../i18n.js";
 import { automationCreationContext } from "../settings/AutomationsSection.js";
 import { AgentEmptyState } from "./AgentEmptyState.js";
 import { AgentTabFrame } from "./AgentTabFrame.js";
+import {
+  AutomationDetailsDialog,
+  type AutomationDetailsField,
+} from "./AutomationDetailsDialog.js";
+import { AutomationScheduleDialog } from "./AutomationScheduleDialog.js";
 import type { AgentPageTabProps } from "./types.js";
 import {
   useAutomations,
@@ -62,6 +69,101 @@ function listAutomations(automations: Automation[]): ListedAutomation[] {
   }));
 }
 
+type Translate = ReturnType<typeof useT>;
+
+function describeTrigger(entry: ListedAutomation, t: Translate): string {
+  if (entry.kind === "automation" && entry.triggerType === "event") {
+    return t("jobs.automationEventDetails", {
+      defaultValue: "Runs when {{event}}.",
+      event: entry.resource.event ?? "an event fires",
+    });
+  }
+  return (
+    entry.resource.scheduleDescription ||
+    entry.resource.schedule ||
+    t("jobs.scheduledTrigger", { defaultValue: "Scheduled" })
+  );
+}
+
+function detailsFields(
+  entry: ListedAutomation,
+  t: Translate,
+  formatDateTime: (value: string | null) => string | null,
+): AutomationDetailsField[] {
+  const resource = entry.resource;
+  const unset = t("jobs.notSet", { defaultValue: "—" });
+  const fields: AutomationDetailsField[] = [
+    {
+      label: t("jobs.status", { defaultValue: "Status" }),
+      value: resource.enabled
+        ? t("jobs.enabled", { defaultValue: "Enabled" })
+        : t("jobs.paused", { defaultValue: "Paused" }),
+    },
+    {
+      label: t("jobs.trigger", { defaultValue: "Trigger" }),
+      value:
+        entry.triggerType === "event"
+          ? t("jobs.eventTrigger", { defaultValue: "Event-triggered" })
+          : t("jobs.scheduledTrigger", { defaultValue: "Scheduled" }),
+    },
+  ];
+
+  if (entry.triggerType === "schedule") {
+    fields.push(
+      {
+        label: t("jobs.cronExpression", { defaultValue: "Cron expression" }),
+        value: resource.schedule || unset,
+        mono: true,
+      },
+      {
+        label: t("jobs.timezone", { defaultValue: "Timezone" }),
+        value: resource.timezone || unset,
+      },
+    );
+  }
+
+  fields.push(
+    {
+      label: t("jobs.nextRun", { defaultValue: "Next run" }),
+      value: formatDateTime(resource.nextRun) ?? unset,
+    },
+    {
+      label: t("jobs.lastRun", { defaultValue: "Last run" }),
+      value:
+        formatDateTime(resource.lastRun) ??
+        t("jobs.neverRan", { defaultValue: "Never" }),
+    },
+    {
+      label: t("jobs.lastChecked", { defaultValue: "Last checked" }),
+      value: formatDateTime(resource.lastCheck) ?? unset,
+    },
+    {
+      label: t("jobs.lastStatus", { defaultValue: "Last status" }),
+      value: resource.lastStatus || unset,
+    },
+    {
+      label: t("jobs.scope", { defaultValue: "Scope" }),
+      value:
+        resource.scope === "organization"
+          ? t("jobs.organization", { defaultValue: "Organization" })
+          : t("jobs.personal", { defaultValue: "Personal" }),
+    },
+    {
+      label: t("jobs.createdBy", { defaultValue: "Created by" }),
+      value: resource.createdBy || unset,
+    },
+  );
+
+  if (entry.kind === "automation") {
+    fields.push({
+      label: t("jobs.model", { defaultValue: "Model" }),
+      value: entry.resource.model || unset,
+    });
+  }
+
+  return fields;
+}
+
 export function organizationAutomationCreationContext(): string {
   return "The user wants to create a new organization automation. Use manage-automations with action=define and scope=organization to create it. Ask clarifying questions if needed about whether it runs on a schedule or event, any conditions, and what actions to take.";
 }
@@ -83,6 +185,9 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
   const [detailsTarget, setDetailsTarget] = useState<ListedAutomation | null>(
     null,
   );
+  const [scheduleTarget, setScheduleTarget] = useState<ListedAutomation | null>(
+    null,
+  );
 
   const formatDateTime = (value: string | null) => {
     if (!value || Number.isNaN(new Date(value).getTime())) return null;
@@ -111,14 +216,14 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
   const mutateEntry = (
     entry: ListedAutomation,
     operation: "update" | "delete",
-    enabled?: boolean,
+    patch?: { enabled?: boolean; schedule?: string },
     onSuccess?: () => void,
   ) => {
     const input = {
       operation,
       name: entry.resource.name,
       scope: entry.resource.scope,
-      ...(enabled === undefined ? {} : { enabled }),
+      ...patch,
     };
     const options = onSuccess ? { onSuccess } : undefined;
 
@@ -243,6 +348,7 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
           {entries.map((entry) => {
             const resource = entry.resource;
             const lastRun = formatDateTime(resource.lastRun);
+            const lastCheck = formatDateTime(resource.lastCheck);
             const nextRun = formatDateTime(resource.nextRun);
             const triggerDescription =
               entry.kind === "automation" && entry.triggerType === "event"
@@ -310,7 +416,7 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
                     <p className="mt-1 line-clamp-2 text-xs text-muted-foreground/80">
                       {instructions}
                     </p>
-                    {lastRun || nextRun ? (
+                    {lastRun || nextRun || lastCheck ? (
                       <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
                         {nextRun ? (
                           <span>
@@ -318,14 +424,29 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
                             {nextRun}
                           </span>
                         ) : null}
-                        {lastRun ? (
+                        <span>
+                          {t("jobs.lastRun", { defaultValue: "Last run" })}:{" "}
+                          {lastRun ??
+                            t("jobs.neverRan", { defaultValue: "Never" })}
+                        </span>
+                        {!lastRun && lastCheck ? (
                           <span>
-                            {t("jobs.lastRun", { defaultValue: "Last run" })}:{" "}
-                            {lastRun}
+                            {t("jobs.lastChecked", {
+                              defaultValue: "Last checked",
+                            })}
+                            : {lastCheck}
                           </span>
                         ) : null}
                       </div>
                     ) : null}
+                    {resource.lastError ? (
+                      <p className="mt-2 flex items-start gap-1.5 text-[11px] text-destructive">
+                        <IconAlertTriangle className="mt-px size-3 shrink-0" />
+                        <span className="min-w-0 break-words">
+                          {resource.lastError}
+                        </span>
+                      </p>
+                    ) : null}
                   </div>
                   <div className="flex shrink-0 items-center gap-1">
                     <Button
@@ -340,6 +461,19 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
                     </Button>
                     {resource.canUpdate ? (
                       <>
+                        {entry.triggerType === "schedule" ? (
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            className="cursor-pointer px-2 text-xs"
+                            disabled={mutationPending}
+                            onClick={() => setScheduleTarget(entry)}
+                          >
+                            <IconPencil className="size-3.5" />
+                            {t("jobs.edit", { defaultValue: "Edit" })}
+                          </Button>
+                        ) : null}
                         <Button
                           type="button"
                           variant="ghost"
@@ -347,7 +481,9 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
                           className="cursor-pointer px-2 text-xs"
                           disabled={mutationPending}
                           onClick={() =>
-                            mutateEntry(entry, "update", !resource.enabled)
+                            mutateEntry(entry, "update", {
+                              enabled: !resource.enabled,
+                            })
                           }
                         >
                           {resource.enabled ? (
@@ -505,84 +641,50 @@ export function AgentJobsTab({ canManageOrg = false }: AgentPageTabProps) {
         </DialogContent>
       </Dialog>
 
-      <Dialog
-        open={detailsTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDetailsTarget(null);
-        }}
-      >
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {detailsTarget?.resource.name.replace(/-/g, " ") ??
-                t("jobs.automationDetails", {
-                  defaultValue: "Automation details",
-                })}
-            </DialogTitle>
-            <DialogDescription>
-              {detailsTarget
-                ? detailsTarget.triggerType === "event"
-                  ? t("jobs.automationEventDetails", {
-                      defaultValue: "Runs when {{event}}.",
-                      event:
-                        detailsTarget.kind === "automation"
-                          ? (detailsTarget.resource.event ?? "an event fires")
-                          : "an event fires",
-                    })
-                  : detailsTarget.resource.scheduleDescription ||
-                    detailsTarget.resource.schedule ||
-                    t("jobs.scheduledTrigger", {
-                      defaultValue: "Scheduled",
-                    })
-                : null}
-            </DialogDescription>
-          </DialogHeader>
-          {detailsTarget ? (
-            <div className="space-y-3">
-              {detailsTarget.kind === "automation" &&
-              detailsTarget.resource.condition ? (
-                <div>
-                  <p className="text-xs font-medium text-foreground">
-                    {t("jobs.condition", { defaultValue: "Condition" })}
-                  </p>
-                  <p className="mt-1 text-sm text-muted-foreground">
-                    {detailsTarget.resource.condition}
-                  </p>
-                </div>
-              ) : null}
-              <div>
-                <p className="text-xs font-medium text-foreground">
-                  {t("jobs.instructions", { defaultValue: "Instructions" })}
-                </p>
-                <p className="mt-1 whitespace-pre-wrap text-sm text-muted-foreground">
-                  {detailsTarget.kind === "automation"
-                    ? detailsTarget.resource.body
-                    : detailsTarget.resource.instructions}
-                </p>
-              </div>
-              {(detailsTarget.resource.mcpTools ?? []).length > 0 ? (
-                <div>
-                  <p className="text-xs font-medium text-foreground">
-                    {t("jobs.mcpTools", {
-                      defaultValue: "Connected MCP tools",
-                    })}
-                  </p>
-                  <div className="mt-1 flex flex-wrap gap-1.5">
-                    {(detailsTarget.resource.mcpTools ?? []).map((toolName) => (
-                      <code
-                        key={toolName}
-                        className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground"
-                      >
-                        {toolName}
-                      </code>
-                    ))}
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-        </DialogContent>
-      </Dialog>
+      {detailsTarget ? (
+        <AutomationDetailsDialog
+          open
+          name={detailsTarget.resource.name}
+          scope={
+            detailsTarget.resource.scope === "organization" ? "org" : "user"
+          }
+          triggerSummary={describeTrigger(detailsTarget, t)}
+          fields={detailsFields(detailsTarget, t, formatDateTime)}
+          condition={
+            detailsTarget.kind === "automation"
+              ? detailsTarget.resource.condition
+              : null
+          }
+          instructions={
+            detailsTarget.kind === "automation"
+              ? detailsTarget.resource.body
+              : detailsTarget.resource.instructions
+          }
+          mcpTools={detailsTarget.resource.mcpTools ?? []}
+          lastError={detailsTarget.resource.lastError}
+          formatTimestamp={(value) =>
+            formatDateTime(new Date(value).toISOString()) ?? String(value)
+          }
+          onClose={() => setDetailsTarget(null)}
+        />
+      ) : null}
+
+      {scheduleTarget ? (
+        <AutomationScheduleDialog
+          open
+          name={scheduleTarget.resource.name}
+          schedule={scheduleTarget.resource.schedule ?? ""}
+          timezone={scheduleTarget.resource.timezone ?? null}
+          saving={mutationPending}
+          error={mutationError ? mutationError.message : null}
+          onCancel={() => setScheduleTarget(null)}
+          onSave={(next) =>
+            mutateEntry(scheduleTarget, "update", next, () =>
+              setScheduleTarget(null),
+            )
+          }
+        />
+      ) : null}
     </AgentTabFrame>
   );
 }

package/src/client/agent-page/AutomationDetailsDialog.tsx

@@ -0,0 +1,208 @@
+import { IconAlertTriangle, IconLoader2 } from "@tabler/icons-react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../components/ui/dialog.js";
+import { useT } from "../i18n.js";
+import { useAutomationRuns, type JobsScope } from "./use-jobs.js";
+
+export interface AutomationDetailsField {
+  label: string;
+  value: string;
+  mono?: boolean;
+}
+
+export interface AutomationDetailsDialogProps {
+  open: boolean;
+  name: string;
+  triggerSummary: string;
+  fields: AutomationDetailsField[];
+  condition: string | null;
+  instructions: string;
+  mcpTools: string[];
+  lastError: string | null;
+  scope: JobsScope;
+  formatTimestamp: (value: number) => string;
+  onClose: () => void;
+}
+
+function RunStatusDot({ status }: { status: string }) {
+  const tone =
+    status === "success"
+      ? "bg-emerald-500"
+      : status === "error"
+        ? "bg-destructive"
+        : // An interrupted run never reported an outcome, so it reads as
+          // unknown rather than as still making progress.
+          status === "interrupted"
+          ? "bg-muted-foreground"
+          : "bg-amber-500";
+  return <span className={`size-1.5 shrink-0 rounded-full ${tone}`} />;
+}
+
+export function AutomationDetailsDialog({
+  open,
+  name,
+  triggerSummary,
+  fields,
+  condition,
+  instructions,
+  mcpTools,
+  lastError,
+  scope,
+  formatTimestamp,
+  onClose,
+}: AutomationDetailsDialogProps) {
+  const t = useT();
+  const runsQuery = useAutomationRuns(scope, open ? name : null, open);
+  const runs = runsQuery.data ?? [];
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+    >
+      <DialogContent className="max-h-[85vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{name.replace(/-/g, " ")}</DialogTitle>
+          <DialogDescription>{triggerSummary}</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {lastError ? (
+            <div className="flex items-start gap-2 rounded-md border border-destructive/30 bg-destructive/5 p-2.5">
+              <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+              <div className="min-w-0">
+                <p className="text-xs font-medium text-destructive">
+                  {t("jobs.blockedTitle", {
+                    defaultValue: "This automation is not running",
+                  })}
+                </p>
+                <p className="mt-0.5 break-words text-xs text-muted-foreground">
+                  {lastError}
+                </p>
+              </div>
+            </div>
+          ) : null}
+
+          <dl className="grid grid-cols-2 gap-x-4 gap-y-2">
+            {fields.map((field) => (
+              <div key={field.label} className="min-w-0">
+                <dt className="text-[11px] uppercase tracking-wide text-muted-foreground/70">
+                  {field.label}
+                </dt>
+                <dd
+                  className={`mt-0.5 break-words text-sm ${
+                    field.mono ? "font-mono text-xs" : ""
+                  }`}
+                >
+                  {field.value}
+                </dd>
+              </div>
+            ))}
+          </dl>
+
+          {condition ? (
+            <div>
+              <p className="text-xs font-medium text-foreground">
+                {t("jobs.condition", { defaultValue: "Condition" })}
+              </p>
+              <p className="mt-1 text-sm text-muted-foreground">{condition}</p>
+            </div>
+          ) : null}
+
+          <div>
+            <p className="text-xs font-medium text-foreground">
+              {t("jobs.instructions", { defaultValue: "Instructions" })}
+            </p>
+            <p className="mt-1 max-h-56 overflow-y-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2.5 text-sm text-muted-foreground">
+              {instructions}
+            </p>
+          </div>
+
+          {mcpTools.length > 0 ? (
+            <div>
+              <p className="text-xs font-medium text-foreground">
+                {t("jobs.mcpTools", { defaultValue: "Connected MCP tools" })}
+              </p>
+              <div className="mt-1 flex flex-wrap gap-1.5">
+                {mcpTools.map((toolName) => (
+                  <code
+                    key={toolName}
+                    className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground"
+                  >
+                    {toolName}
+                  </code>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <div>
+            <p className="text-xs font-medium text-foreground">
+              {t("jobs.pastRuns", { defaultValue: "Past runs" })}
+            </p>
+            {runsQuery.isLoading ? (
+              <div
+                className="mt-2 flex items-center gap-2 text-xs text-muted-foreground"
+                aria-busy="true"
+              >
+                <IconLoader2 className="size-3.5 animate-spin" />
+                {t("jobs.loading", { defaultValue: "Loading…" })}
+              </div>
+            ) : runsQuery.error ? (
+              <p className="mt-1 text-xs text-destructive">
+                {t("jobs.runsLoadError", {
+                  defaultValue: "Could not load run history.",
+                })}
+              </p>
+            ) : runs.length === 0 ? (
+              <p className="mt-1 text-xs text-muted-foreground">
+                {t("jobs.noRuns", {
+                  defaultValue:
+                    "This automation has not executed yet. Only real executions are recorded here.",
+                })}
+              </p>
+            ) : (
+              <ul className="mt-2 divide-y divide-border/60 border-y border-border/60">
+                {runs.map((run) => (
+                  <li
+                    key={run.id}
+                    className="flex items-center gap-2 py-1.5 text-xs"
+                  >
+                    <RunStatusDot status={run.status} />
+                    <span className="shrink-0 text-muted-foreground">
+                      {formatTimestamp(run.startedAt)}
+                    </span>
+                    <span className="shrink-0 font-medium">{run.status}</span>
+                    {run.error ? (
+                      <span
+                        className="min-w-0 flex-1 truncate text-muted-foreground"
+                        title={run.error}
+                      >
+                        {run.error}
+                      </span>
+                    ) : (
+                      <span className="min-w-0 flex-1" />
+                    )}
+                    {run.finishedAt ? (
+                      <span className="shrink-0 tabular-nums text-muted-foreground">
+                        {Math.round((run.finishedAt - run.startedAt) / 1000)}s
+                      </span>
+                    ) : null}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}