@agent-native/core 0.130.2 → 0.131.2

package/src/client/settings/AutomationsSection.tsx

@@ -1,48 +1,8 @@
 import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  IconBolt,
-  IconClock,
-  IconEye,
-  IconLoader2,
-  IconPlayerPause,
-  IconPlayerPlay,
-  IconPlus,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useCallback, useState, type ReactNode } from "react";
+import { IconArrowRight, IconBolt, IconClock } from "@tabler/icons-react";
+import { Link } from "react-router";
 
-import { sendToAgentChat } from "../agent-chat.js";
-import { AgentEmptyState } from "../agent-page/AgentEmptyState.js";
-import {
-  useAutomations,
-  useManageAutomation,
-  type Automation,
-  type JobsScope,
-} from "../agent-page/use-jobs.js";
-import { AgentAskPopover } from "../AgentAskPopover.js";
-import { agentNativePath } from "../api-path.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../components/ui/dialog.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../components/ui/popover.js";
-import { PromptComposer } from "../composer/index.js";
-import { useFormatters, useT } from "../i18n.js";
-
-export interface AutomationsListProps {
-  scope?: JobsScope;
-  compact?: boolean;
-  emptyMessage?: string;
-  emptyState?: ReactNode;
-}
+import { useT } from "../i18n.js";
 
 export const AUTOMATION_CREATION_SCOPE = "personal" as const;
 
@@ -50,467 +10,35 @@ export function automationCreationContext(): string {
   return `The user wants to create a new ${AUTOMATION_CREATION_SCOPE} automation. Use manage-automations with action=define to create it. Ask clarifying questions if needed about what event to trigger on, conditions, and what actions to take.`;
 }
 
-export function AutomationsList({
-  scope = "user",
-  compact = false,
-  emptyMessage,
-  emptyState,
-}: AutomationsListProps) {
-  const t = useT();
-  const { formatDate } = useFormatters();
-  const query = useAutomations(scope);
-  const mutation = useManageAutomation(scope);
-  const [deleteTarget, setDeleteTarget] = useState<Automation | null>(null);
-  const [detailsTarget, setDetailsTarget] = useState<Automation | null>(null);
-
-  const formatDateTime = (value: string | null) => {
-    if (!value || Number.isNaN(new Date(value).getTime())) return null;
-    return formatDate(value, {
-      month: "short",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-  };
-
-  if (query.isLoading) {
-    return (
-      <div
-        className="flex items-center gap-2 text-sm text-muted-foreground"
-        aria-busy="true"
-      >
-        <IconLoader2 className="size-4 animate-spin" />
-        {t("jobs.loading", { defaultValue: "Loading…" })}
-      </div>
-    );
-  }
-
-  if (query.error) {
-    return (
-      <p className="text-sm text-destructive">
-        {t("jobs.automationsLoadError", {
-          defaultValue: "Could not load automations.",
-        })}
-      </p>
-    );
-  }
-
-  const automations = query.data ?? [];
-  if (automations.length === 0) {
-    if (emptyState) return emptyState;
-    return (
-      <AgentEmptyState
-        icon={IconBolt}
-        title={t("jobs.automationsEmptyTitle", {
-          defaultValue: "No automations yet",
-        })}
-        description={
-          emptyMessage ??
-          t("jobs.automationsEmptyDescription", {
-            defaultValue: "Describe what should happen and when.",
-          })
-        }
-        action={
-          <AgentAskPopover
-            context={automationCreationContext()}
-            prompt={t("jobs.automationPrompt", {
-              defaultValue: "Create an automation that does this: ",
-            })}
-            title={t("jobs.automationsCreateTitle", {
-              defaultValue: "Create an automation",
-            })}
-          />
-        }
-      />
-    );
-  }
-
-  return (
-    <div className={compact ? "space-y-2" : "space-y-3"}>
-      {automations.map((automation) => {
-        const lastRun = formatDateTime(automation.lastRun);
-        const nextRun = formatDateTime(automation.nextRun);
-        const trigger =
-          automation.triggerType === "event"
-            ? t("jobs.automationEventTrigger", {
-                defaultValue: "On {{event}}",
-                event: automation.event ?? "event",
-              })
-            : (automation.scheduleDescription ??
-              automation.schedule ??
-              t("jobs.automationScheduleTrigger", {
-                defaultValue: "Scheduled task",
-              }));
-
-        return (
-          <article
-            key={automation.id}
-            className="rounded-lg border border-border bg-card p-3"
-          >
-            <div className="flex items-start gap-3">
-              <div className="mt-0.5 text-muted-foreground">
-                {automation.triggerType === "event" ? (
-                  <IconBolt className="size-4" />
-                ) : (
-                  <IconClock className="size-4" />
-                )}
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="flex flex-wrap items-center gap-2">
-                  <h3 className="truncate text-sm font-medium text-foreground">
-                    {automation.name.replace(/-/g, " ")}
-                  </h3>
-                  <span
-                    className={
-                      automation.enabled
-                        ? "rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-medium text-emerald-600 dark:text-emerald-400"
-                        : "rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground"
-                    }
-                  >
-                    {automation.enabled
-                      ? t("jobs.enabled", { defaultValue: "Enabled" })
-                      : t("jobs.disabled", { defaultValue: "Disabled" })}
-                  </span>
-                  {automation.lastStatus ? (
-                    <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
-                      {automation.lastStatus}
-                    </span>
-                  ) : null}
-                </div>
-                <p className="mt-1 text-xs text-muted-foreground">{trigger}</p>
-                <p className="mt-1 line-clamp-2 text-xs text-muted-foreground/80">
-                  {automation.body}
-                </p>
-                {lastRun || nextRun ? (
-                  <div className="mt-2 flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
-                    {lastRun ? (
-                      <span>
-                        {t("jobs.lastRun", { defaultValue: "Last run" })}:{" "}
-                        {lastRun}
-                      </span>
-                    ) : null}
-                    {nextRun ? (
-                      <span>
-                        {t("jobs.nextRun", { defaultValue: "Next run" })}:{" "}
-                        {nextRun}
-                      </span>
-                    ) : null}
-                  </div>
-                ) : null}
-              </div>
-              <div className="flex shrink-0 items-center gap-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  className="cursor-pointer px-2 text-xs"
-                  onClick={() => setDetailsTarget(automation)}
-                >
-                  <IconEye className="size-3.5" />
-                  {t("jobs.details", { defaultValue: "Details" })}
-                </Button>
-                {automation.canUpdate ? (
-                  <>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      className="cursor-pointer px-2 text-xs"
-                      disabled={mutation.isPending}
-                      onClick={() =>
-                        mutation.mutate({
-                          operation: "update",
-                          name: automation.name,
-                          scope: automation.scope,
-                          enabled: !automation.enabled,
-                        })
-                      }
-                    >
-                      {automation.enabled ? (
-                        <IconPlayerPause className="size-3.5" />
-                      ) : (
-                        <IconPlayerPlay className="size-3.5" />
-                      )}
-                      {automation.enabled
-                        ? t("jobs.pause", { defaultValue: "Pause" })
-                        : t("jobs.resume", { defaultValue: "Resume" })}
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="icon"
-                      className="size-8 cursor-pointer text-muted-foreground hover:text-destructive"
-                      aria-label={t("jobs.delete", { defaultValue: "Delete" })}
-                      onClick={() => setDeleteTarget(automation)}
-                    >
-                      <IconTrash className="size-3.5" />
-                    </Button>
-                  </>
-                ) : null}
-              </div>
-            </div>
-          </article>
-        );
-      })}
-
-      {mutation.error ? (
-        <p className="text-sm text-destructive">
-          {mutation.error.message ||
-            t("jobs.automationUpdateError", {
-              defaultValue: "Could not update automation.",
-            })}
-        </p>
-      ) : null}
-
-      <Dialog
-        open={deleteTarget !== null}
-        onOpenChange={(open) => {
-          if (!open && !mutation.isPending) setDeleteTarget(null);
-        }}
-      >
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>
-              {t("jobs.deleteAutomationTitle", {
-                defaultValue: "Delete automation?",
-              })}
-            </DialogTitle>
-            <DialogDescription>
-              {t("jobs.deleteAutomationDescription", {
-                defaultValue:
-                  "This permanently removes the automation and cannot be undone.",
-              })}
-            </DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button
-              type="button"
-              variant="outline"
-              className="cursor-pointer"
-              disabled={mutation.isPending}
-              onClick={() => setDeleteTarget(null)}
-            >
-              {t("jobs.cancel", { defaultValue: "Cancel" })}
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              className="cursor-pointer"
-              disabled={mutation.isPending}
-              onClick={() => {
-                if (!deleteTarget) return;
-                mutation.mutate(
-                  {
-                    operation: "delete",
-                    name: deleteTarget.name,
-                    scope: deleteTarget.scope,
-                  },
-                  { onSuccess: () => setDeleteTarget(null) },
-                );
-              }}
-            >
-              {mutation.isPending ? (
-                <IconLoader2 className="size-4 animate-spin" />
-              ) : null}
-              {t("jobs.delete", { defaultValue: "Delete" })}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
-      <Dialog
-        open={detailsTarget !== null}
-        onOpenChange={(open) => {
-          if (!open) setDetailsTarget(null);
-        }}
-      >
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>
-              {detailsTarget?.name.replace(/-/g, " ") ??
-                t("jobs.automationDetails", {
-                  defaultValue: "Automation details",
-                })}
-            </DialogTitle>
-            <DialogDescription>
-              {detailsTarget
-                ? detailsTarget.triggerType === "event"
-                  ? t("jobs.automationEventDetails", {
-                      defaultValue: "Runs when {{event}}.",
-                      event: detailsTarget.event ?? "an event fires",
-                    })
-                  : (detailsTarget.scheduleDescription ??
-                    detailsTarget.schedule ??
-                    t("jobs.automationScheduleTrigger", {
-                      defaultValue: "Scheduled task",
-                    }))
-                : null}
-            </DialogDescription>
-          </DialogHeader>
-          {detailsTarget ? (
-            <div className="space-y-3">
-              {detailsTarget.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.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.body}
-                </p>
-              </div>
-            </div>
-          ) : null}
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-}
-
 export function AutomationsSection() {
   const t = useT();
-  const { data: automations = [] } = useAutomations("user");
-  const [newOpen, setNewOpen] = useState(false);
-  const [toast, setToast] = useState<{
-    kind: "ok" | "err";
-    text: string;
-  } | null>(null);
-
-  const showToast = useCallback(
-    (kind: "ok" | "err", text: string, ms = 2500) => {
-      setToast({ kind, text });
-      window.setTimeout(() => setToast(null), ms);
-    },
-    [],
-  );
-
-  const handleFireTestEvent = useCallback(async () => {
-    showToast(
-      "ok",
-      t("jobs.firingTestEvent", { defaultValue: "Firing test event…" }),
-    );
-    try {
-      const res = await fetch(
-        agentNativePath("/_agent-native/automations/fire-test"),
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ data: {} }),
-        },
-      );
-      if (!res.ok) {
-        showToast(
-          "err",
-          t("jobs.fireEventError", {
-            defaultValue: "Failed to fire event ({{status}})",
-            status: res.status,
-          }),
-        );
-        return;
-      }
-      showToast("ok", t("jobs.eventFired", { defaultValue: "Event fired" }));
-    } catch (err: unknown) {
-      showToast(
-        "err",
-        err instanceof Error
-          ? err.message
-          : t("jobs.fireEventErrorGeneric", {
-              defaultValue: "Failed to fire event.",
-            }),
-      );
-    }
-  }, [showToast, t]);
-
-  const handleNewSubmit = useCallback((text: string) => {
-    const trimmed = text.trim();
-    if (!trimmed) return;
-    window.dispatchEvent(
-      new CustomEvent("agent-panel:set-mode", {
-        detail: { mode: "chat" },
-      }),
-    );
-    sendToAgentChat({
-      message: trimmed,
-      context: automationCreationContext(),
-      submit: true,
-      newTab: true,
-    });
-    setNewOpen(false);
-  }, []);
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center gap-1.5">
-        <Popover open={newOpen} onOpenChange={setNewOpen}>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="cursor-pointer"
-            >
-              <IconPlus className="size-3.5" />
-              {t("jobs.newAutomation", { defaultValue: "New automation" })}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent
-            align="start"
-            sideOffset={6}
-            collisionPadding={8}
-            className="z-[260] w-[calc(100vw-24px)] max-w-[380px] p-3"
-          >
-            <p className="px-1 pb-2 text-sm font-semibold text-foreground">
-              {t("jobs.newAutomation", { defaultValue: "New automation" })}
-            </p>
-            <PromptComposer
-              autoFocus
-              placeholder={t("jobs.automationPlaceholder", {
-                defaultValue: "Describe what you want to automate…",
-              })}
-              draftScope="automations:create"
-              onSubmit={handleNewSubmit}
-            />
-          </PopoverContent>
-        </Popover>
-        {automations.length > 0 ? (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            className="cursor-pointer"
-            onClick={handleFireTestEvent}
-          >
-            <IconPlayerPlay className="size-3.5" />
-            {t("jobs.fireTestEvent", { defaultValue: "Fire test event" })}
-          </Button>
-        ) : null}
-      </div>
-      {toast ? (
-        <p
-          className={
-            toast.kind === "ok"
-              ? "text-xs text-emerald-600"
-              : "text-xs text-destructive"
-          }
-        >
-          {toast.text}
-        </p>
-      ) : null}
-      <AutomationsList
-        scope="user"
-        compact
-        emptyMessage={t("jobs.automationsEmptySettings", {
-          defaultValue: "Describe what should happen and when.",
+    <div className="space-y-3">
+      <p className="text-xs leading-5 text-muted-foreground">
+        {t("jobs.settingsSummary", {
+          defaultValue:
+            "Manage scheduled and event-triggered agent tasks together from the Automations page.",
         })}
-      />
+      </p>
+      <div className="flex flex-wrap gap-2 text-[11px] text-muted-foreground">
+        <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1">
+          <IconClock className="size-3" />
+          {t("jobs.scheduledTrigger", { defaultValue: "Scheduled" })}
+        </span>
+        <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-1">
+          <IconBolt className="size-3" />
+          {t("jobs.eventTrigger", { defaultValue: "Event-triggered" })}
+        </span>
+      </div>
+      <Button asChild variant="outline" size="sm">
+        <Link to="/agent#jobs">
+          {t("jobs.openAutomations", {
+            defaultValue: "Open Automations",
+          })}
+          <IconArrowRight className="size-3.5" />
+        </Link>
+      </Button>
     </div>
   );
 }

package/src/client/settings/SettingsPanel.tsx

@@ -2359,6 +2359,20 @@ export interface SettingsPanelProps {
   sectionRequestKey?: number;
 }
 
+export interface AgentSettingsTabsOptions {
+  /**
+   * Include the shared Extensions management tab. Extensions are an optional
+   * app capability and stay hidden unless the host opts in.
+   */
+  extensionTools?: boolean;
+}
+
+export function areExtensionSettingsEnabled(
+  options: AgentSettingsTabsOptions = {},
+): boolean {
+  return options.extensionTools === true;
+}
+
 // Agent capability modes. The internal values ("production"/"development") are
 // kept for back-compat with the AGENT_MODE wiring; only the visible labels
 // changed to "App mode" / "Code mode" so this control reads as the agent
@@ -2642,7 +2656,7 @@ function SettingsPanelContent({
             id={settingsSectionDomId("automations")}
             icon={<IconBolt size={14} />}
             title="Automations"
-            subtitle="Event-triggered and scheduled automations."
+            subtitle="Scheduled and event-triggered agent tasks."
             open={openSection === "automations"}
             onToggle={() => toggle("automations")}
           >
@@ -2974,8 +2988,11 @@ export function AgentSettingsContent({
   );
 }
 
-export function useAgentSettingsTabs(): SettingsTabItem[] {
+export function useAgentSettingsTabs(
+  options: AgentSettingsTabsOptions = {},
+): SettingsTabItem[] {
   const { isDevMode, canToggle, setDevMode } = useDevMode();
+  const extensionToolsEnabled = areExtensionSettingsEnabled(options);
   const baseProps = useMemo<SettingsPanelProps>(
     () => ({
       isDevMode,
@@ -3031,14 +3048,18 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
           />
         ),
       },
-      {
-        id: "extensions",
-        label: "Extensions",
-        icon: IconTool,
-        group: "workspace",
-        keywords: "extensions widgets mini apps tools sandboxed apps",
-        content: <ExtensionsSettingsContent />,
-      },
+      ...(extensionToolsEnabled
+        ? [
+            {
+              id: "extensions",
+              label: "Extensions",
+              icon: IconTool,
+              group: "workspace" as const,
+              keywords: "extensions widgets mini apps tools sandboxed apps",
+              content: <ExtensionsSettingsContent />,
+            },
+          ]
+        : []),
       {
         ...agent,
         icon: IconHierarchy2,
@@ -3048,5 +3069,5 @@ export function useAgentSettingsTabs(): SettingsTabItem[] {
         content: <Navigate to="/agent#settings" replace />,
       },
     ];
-  }, [baseProps]);
+  }, [baseProps, extensionToolsEnabled]);
 }

package/src/client/settings/index.ts

@@ -1,7 +1,9 @@
 export {
   AgentSettingsContent,
+  areExtensionSettingsEnabled,
   SettingsPanel,
   useAgentSettingsTabs,
+  type AgentSettingsTabsOptions,
   type SettingsPanelProps,
 } from "./SettingsPanel.js";
 export {

package/src/client/use-agent-chat.ts

@@ -1,6 +1,12 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 
-import { sendToAgentChat, type AgentChatMessage } from "./agent-chat.js";
+import {
+  AGENT_CHAT_SUBMIT_TARGET_EVENT,
+  generateAgentChatSubmitMessageId,
+  sendToAgentChat,
+  type AgentChatMessage,
+  type AgentChatSubmitTarget,
+} from "./agent-chat.js";
 
 /**
  * Hook that wraps sendToAgentChat with a loading state.
@@ -16,8 +22,20 @@ export function useAgentChatGenerating(): [
 ] {
   const [isGenerating, setIsGenerating] = useState(false);
   const activeTabRef = useRef<string | null>(null);
+  const activeSubmitRef = useRef<string | null>(null);
 
   useEffect(() => {
+    const targetHandler = (e: Event) => {
+      const detail = (e as CustomEvent<AgentChatSubmitTarget>).detail;
+      if (
+        !detail ||
+        detail.submitMessageId !== activeSubmitRef.current ||
+        !detail.tabId
+      ) {
+        return;
+      }
+      activeTabRef.current = detail.tabId;
+    };
     const handler = (e: Event) => {
       const detail = (e as CustomEvent).detail;
       if (typeof detail?.isRunning !== "boolean") return;
@@ -35,15 +53,29 @@ export function useAgentChatGenerating(): [
       }
       if (!detail.isRunning && eventTabId === activeTabRef.current) {
         activeTabRef.current = null;
+        activeSubmitRef.current = null;
       }
       setIsGenerating(detail.isRunning);
     };
+    window.addEventListener(
+      AGENT_CHAT_SUBMIT_TARGET_EVENT,
+      targetHandler as EventListener,
+    );
     window.addEventListener("agentNative.chatRunning", handler);
-    return () => window.removeEventListener("agentNative.chatRunning", handler);
+    return () => {
+      window.removeEventListener(
+        AGENT_CHAT_SUBMIT_TARGET_EVENT,
+        targetHandler as EventListener,
+      );
+      window.removeEventListener("agentNative.chatRunning", handler);
+    };
   }, []);
 
   const send = useCallback((opts: AgentChatMessage): string => {
-    const tabId = sendToAgentChat(opts);
+    const submitMessageId =
+      opts.submitMessageId ?? generateAgentChatSubmitMessageId();
+    activeSubmitRef.current = submitMessageId;
+    const tabId = sendToAgentChat({ ...opts, submitMessageId });
     activeTabRef.current = tabId;
     setIsGenerating(true);
     return tabId;