@agent-native/core 0.164.12 → 0.164.17

package/corpus/templates/factory/app/components/factory/FactorySettingsView.tsx

@@ -0,0 +1,457 @@
+import {
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { buildSettingsRoute } from "@agent-native/core/client/navigation";
+import { SettingsGroup, SettingsRow } from "@agent-native/core/client/settings";
+import { ActionQueryError } from "@agent-native/dispatch/components";
+import { IconLoader2 } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+
+type TriageConfig = {
+  slackWorkspace?: "primary" | "secondary";
+  slackChannelId?: string | null;
+  slackChannelName?: string | null;
+  builderSlackUserId?: string | null;
+  pollingEnabled?: boolean;
+  githubPollingEnabled?: boolean;
+  sentryPollingEnabled?: boolean;
+  sentryOrgSlug?: string | null;
+  sentryProjectSlug?: string | null;
+  sentryEnvironment?: string | null;
+  repository?: string | null;
+  automationFailureAlertsEnabled?: boolean;
+  automationFailureAlertEmail?: string | null;
+  emailReadiness?: {
+    status: "ready" | "not-configured" | "misconfigured" | "unavailable";
+    provider: string;
+  };
+};
+
+type FactoryAutomationHealth = {
+  status: "healthy" | "stale" | "error" | "no-data";
+  lastCheckedAt?: number | null;
+  lastDispatchedAt?: number | null;
+  lastError?: string | null;
+  runtime?: string | null;
+};
+
+function formatAutomationDate(value: string | number | null | undefined) {
+  if (!value) return "-";
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString();
+}
+
+export function FactorySettingsView() {
+  const t = useT();
+  const [workspace, setWorkspace] = useState<"primary" | "secondary">(
+    "primary",
+  );
+  const [channelId, setChannelId] = useState("");
+  const [channelName, setChannelName] = useState("");
+  const [builderSlackUserId, setBuilderSlackUserId] = useState("");
+  const [repository, setRepository] = useState("");
+  const [polling, setPolling] = useState(false);
+  const [githubPolling, setGithubPolling] = useState(false);
+  const [sentryPolling, setSentryPolling] = useState(false);
+  const [sentryOrgSlug, setSentryOrgSlug] = useState("");
+  const [sentryProjectSlug, setSentryProjectSlug] = useState("");
+  const [sentryEnvironment, setSentryEnvironment] = useState("");
+  const [automationFailureAlertsEnabled, setAutomationFailureAlertsEnabled] =
+    useState(true);
+  const [automationFailureAlertEmail, setAutomationFailureAlertEmail] =
+    useState("");
+  const query = useActionQuery("get-triage-config", {});
+  const schedulerHealthQuery = useActionQuery<FactoryAutomationHealth>(
+    "get-factory-automation-health",
+    {},
+    { refetchInterval: 60_000 },
+  );
+  const mutation = useActionMutation("save-triage-config");
+
+  useEffect(() => {
+    const data = query.data as TriageConfig | undefined;
+    if (!data) return;
+    setWorkspace(data.slackWorkspace ?? "primary");
+    setChannelId(data.slackChannelId ?? "");
+    setChannelName(data.slackChannelName ?? "");
+    setBuilderSlackUserId(data.builderSlackUserId ?? "");
+    setRepository(data.repository ?? "");
+    setPolling(data.pollingEnabled ?? false);
+    setGithubPolling(data.githubPollingEnabled ?? false);
+    setSentryPolling(data.sentryPollingEnabled ?? false);
+    setSentryOrgSlug(data.sentryOrgSlug ?? "");
+    setSentryProjectSlug(data.sentryProjectSlug ?? "");
+    setSentryEnvironment(data.sentryEnvironment ?? "");
+    setAutomationFailureAlertsEnabled(
+      data.automationFailureAlertsEnabled ?? true,
+    );
+    setAutomationFailureAlertEmail(data.automationFailureAlertEmail ?? "");
+  }, [query.data]);
+
+  const configLoaded = Boolean(query.data) && !query.isError;
+
+  const saveSettings = async () => {
+    if (!configLoaded) {
+      toast.error(t("triage.settingsError"));
+      return;
+    }
+    try {
+      await mutation.mutateAsync({
+        slackWorkspace: workspace,
+        slackChannelId: channelId,
+        slackChannelName: channelName,
+        builderSlackUserId,
+        repository,
+        pollingEnabled: polling,
+        githubPollingEnabled: githubPolling,
+        sentryPollingEnabled: sentryPolling,
+        sentryOrgSlug,
+        sentryProjectSlug,
+        sentryEnvironment,
+        automationFailureAlertsEnabled,
+        automationFailureAlertEmail: automationFailureAlertEmail.trim(),
+      });
+      toast.success(t("triage.settingsSaved"));
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : t("triage.settingsError"),
+      );
+    }
+  };
+
+  if (query.isLoading) {
+    return (
+      <div className="mx-auto w-full max-w-3xl space-y-6 p-4 lg:p-6">
+        <FactorySettingsSkeleton t={t} />
+      </div>
+    );
+  }
+
+  if (!configLoaded) {
+    return (
+      <div className="mx-auto w-full max-w-3xl p-4 lg:p-6">
+        <ActionQueryError
+          error={query.error}
+          onRetry={() => void query.refetch()}
+        />
+      </div>
+    );
+  }
+
+  const fieldControlClass = "h-9 w-full sm:w-64";
+
+  return (
+    <div className="mx-auto w-full max-w-3xl space-y-6 p-4 lg:p-6">
+      <SettingsGroup variant="soft">
+        <SettingsRow
+          label={t("factoryRoute.workspaceIntegrations")}
+          description={t("settings.workspaceDescription")}
+          control={
+            <Button asChild type="button" variant="outline">
+              <Link to={buildSettingsRoute("integrations")}>Manage</Link>
+            </Button>
+          }
+        />
+        <SettingsRow
+          label={t("factoryRoute.agentAccess")}
+          description={t("settings.agentDescription")}
+          control={
+            <Button asChild type="button" variant="outline">
+              <Link to={buildSettingsRoute("agent")}>Manage</Link>
+            </Button>
+          }
+        />
+      </SettingsGroup>
+
+      <SettingsGroup variant="soft">
+        <SettingsRow
+          label={t("triage.slackWorkspace")}
+          control={
+            <select
+              aria-label={t("triage.slackWorkspace")}
+              value={workspace}
+              onChange={(event) =>
+                setWorkspace(event.target.value as "primary" | "secondary")
+              }
+              className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm sm:w-64"
+            >
+              <option value="primary">primary</option>
+              <option value="secondary">secondary</option>
+            </select>
+          }
+        />
+        <SettingsRow
+          label={t("triage.slackChannelId")}
+          control={
+            <Input
+              aria-label={t("triage.slackChannelId")}
+              value={channelId}
+              onChange={(event) => setChannelId(event.target.value)}
+              placeholder={t("triage.slackChannelPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.slackChannelName")}
+          control={
+            <Input
+              aria-label={t("triage.slackChannelName")}
+              value={channelName}
+              onChange={(event) => setChannelName(event.target.value)}
+              placeholder={t("triage.slackChannelNamePlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.builderSlackUserId")}
+          control={
+            <Input
+              aria-label={t("triage.builderSlackUserId")}
+              value={builderSlackUserId}
+              onChange={(event) => setBuilderSlackUserId(event.target.value)}
+              placeholder={t("triage.builderSlackUserIdPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.repository")}
+          control={
+            <Input
+              aria-label={t("triage.repository")}
+              value={repository}
+              onChange={(event) => setRepository(event.target.value)}
+              placeholder={t("triage.repositoryPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.enablePolling")}
+          control={
+            <Switch
+              aria-label={t("triage.enablePolling")}
+              checked={polling}
+              onCheckedChange={(checked) => setPolling(checked === true)}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.enableGithubPolling")}
+          control={
+            <Switch
+              aria-label={t("triage.enableGithubPolling")}
+              checked={githubPolling}
+              onCheckedChange={(checked) => setGithubPolling(checked === true)}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.sentryOrgSlug")}
+          control={
+            <Input
+              aria-label={t("triage.sentryOrgSlug")}
+              value={sentryOrgSlug}
+              onChange={(event) => setSentryOrgSlug(event.target.value)}
+              placeholder={t("triage.sentryOrgPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.sentryProjectSlug")}
+          control={
+            <Input
+              aria-label={t("triage.sentryProjectSlug")}
+              value={sentryProjectSlug}
+              onChange={(event) => setSentryProjectSlug(event.target.value)}
+              placeholder={t("triage.sentryProjectPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.sentryEnvironment")}
+          control={
+            <Input
+              aria-label={t("triage.sentryEnvironment")}
+              value={sentryEnvironment}
+              onChange={(event) => setSentryEnvironment(event.target.value)}
+              placeholder={t("triage.sentryEnvironmentPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.enableSentryPolling")}
+          control={
+            <Switch
+              aria-label={t("triage.enableSentryPolling")}
+              checked={sentryPolling}
+              onCheckedChange={(checked) => setSentryPolling(checked === true)}
+            />
+          }
+        />
+      </SettingsGroup>
+
+      <SettingsGroup variant="soft">
+        <SettingsRow
+          label={t("factoryRoute.automationFailureAlertsTitle")}
+          description={t("factoryRoute.automationFailureAlertsDescription")}
+          control={
+            <Switch
+              aria-label={t("factoryRoute.automationFailureAlertsEnabled")}
+              checked={automationFailureAlertsEnabled}
+              onCheckedChange={(checked) =>
+                setAutomationFailureAlertsEnabled(checked === true)
+              }
+            />
+          }
+        />
+        <SettingsRow
+          label={t("factoryRoute.automationFailureAlertEmail")}
+          description={t("factoryRoute.automationFailureAlertEmailPlaceholder")}
+          control={
+            <Input
+              aria-label={t("factoryRoute.automationFailureAlertEmail")}
+              type="email"
+              value={automationFailureAlertEmail}
+              onChange={(event) =>
+                setAutomationFailureAlertEmail(event.target.value)
+              }
+              placeholder={t(
+                "factoryRoute.automationFailureAlertEmailPlaceholder",
+              )}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("factoryRoute.automationFailureEmailReadiness")}
+          description={t("factoryRoute.automationEmailReadinessHint")}
+          control={
+            <span className="rounded-full bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground">
+              {(query.data as TriageConfig | undefined)?.emailReadiness
+                ?.status ?? "unknown"}
+            </span>
+          }
+        />
+      </SettingsGroup>
+
+      <div className="flex flex-wrap items-center justify-end gap-3">
+        <Button
+          onClick={() => void saveSettings()}
+          disabled={mutation.isPending || !configLoaded}
+        >
+          {mutation.isPending && <IconLoader2 className="animate-spin" />}
+          {t("triage.saveSettings")}
+        </Button>
+      </div>
+
+      <SchedulerHealthStatus
+        health={schedulerHealthQuery.data}
+        isError={schedulerHealthQuery.isError}
+        error={schedulerHealthQuery.error}
+        t={t}
+      />
+    </div>
+  );
+}
+
+function FactorySettingsSkeleton({ t }: { t: ReturnType<typeof useT> }) {
+  return (
+    <div className="space-y-6" aria-label={t("triage.loading")}>
+      {[2, 11, 3].map((rowCount, index) => (
+        <div key={index} className="grid gap-2">
+          <div className="grid gap-2">
+            {Array.from({ length: rowCount }).map((_, rowIndex) => (
+              <div
+                key={rowIndex}
+                className="flex min-h-20 items-center justify-between gap-4 rounded-xl bg-card px-5 py-4 shadow-sm sm:px-6"
+              >
+                <div className="h-3.5 w-36 animate-pulse rounded bg-muted" />
+                <div className="h-9 w-24 animate-pulse rounded bg-muted" />
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function SchedulerHealthStatus({
+  health,
+  isError,
+  error,
+  t,
+}: {
+  health?: FactoryAutomationHealth;
+  isError: boolean;
+  error: unknown;
+  t: ReturnType<typeof useT>;
+}) {
+  const healthLabel = isError
+    ? t("factoryRoute.automationHealthError")
+    : health
+      ? {
+          healthy: t("factoryRoute.automationHealthHealthy"),
+          stale: t("factoryRoute.automationHealthStale"),
+          error: t("factoryRoute.automationHealthError"),
+          "no-data": t("factoryRoute.automationHealthNoData"),
+        }[health.status]
+      : t("factoryRoute.automationHealthNoData");
+  const hasNoHeartbeat =
+    !isError &&
+    (!health || health.status === "no-data") &&
+    !health?.lastCheckedAt;
+  const healthDescription = isError
+    ? `${t("factoryRoute.automationDiagnosticsLoadError")} ${error instanceof Error ? error.message : String(error)}`
+    : health?.lastError
+      ? `${t("factoryRoute.automationHealthErrorDetail")}: ${health.lastError}`
+      : health?.status === "stale"
+        ? t("factoryRoute.automationHealthStaleHint")
+        : hasNoHeartbeat
+          ? t("factoryRoute.automationHealthNoDataHint")
+          : undefined;
+
+  return (
+    <SettingsGroup variant="soft">
+      <SettingsRow
+        label={t("factoryRoute.automationHealthTitle")}
+        description={
+          healthDescription ?? t("factoryRoute.automationHealthDescription")
+        }
+        control={
+          <div className="flex flex-wrap items-center justify-end gap-x-4 gap-y-1">
+            <span className="rounded-full bg-muted px-2.5 py-1 text-xs font-medium">
+              {healthLabel}
+            </span>
+            {health?.lastCheckedAt && (
+              <span className="text-xs text-muted-foreground">
+                {t("factoryRoute.automationLastCheck")}:{" "}
+                {formatAutomationDate(health.lastCheckedAt)}
+              </span>
+            )}
+            {health?.lastDispatchedAt && (
+              <span className="text-xs text-muted-foreground">
+                {t("factoryRoute.automationLastDispatch")}:{" "}
+                {formatAutomationDate(health.lastDispatchedAt)}
+              </span>
+            )}
+          </div>
+        }
+      />
+    </SettingsGroup>
+  );
+}

package/corpus/templates/factory/app/components/factory/FactoryWorkspaceActions.tsx

@@ -0,0 +1,53 @@
+import { AgentToggleButton } from "@agent-native/core/client/agent-chat";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconPlus } from "@tabler/icons-react";
+import { Link, useLocation, useSearchParams } from "react-router";
+
+import { Button } from "@/components/ui/button";
+
+export const FACTORY_AGENTS_HREF = "/factory?tab=agents";
+export const FACTORY_SETTINGS_HREF = "/factory-settings";
+export const FACTORY_NEW_HREF = "/factory?new=1";
+
+export function FactoryWorkspaceActions({
+  onNewFactory,
+}: {
+  onNewFactory?: () => void;
+}) {
+  const t = useT();
+  const location = useLocation();
+  const [searchParams] = useSearchParams();
+  const onAgents =
+    location.pathname === "/agents" ||
+    (location.pathname === "/factory" &&
+      searchParams.get("tab") === "agents" &&
+      !searchParams.get("factoryId"));
+  const onSettings = location.pathname === "/factory-settings";
+
+  return (
+    <div className="flex items-center gap-2">
+      <Button asChild variant={onAgents ? "default" : "outline"} size="sm">
+        <Link to={FACTORY_AGENTS_HREF}>{t("factoryRoute.agentsTab")}</Link>
+      </Button>
+      <Button asChild variant={onSettings ? "default" : "outline"} size="sm">
+        <Link to={FACTORY_SETTINGS_HREF}>
+          {t("factoryRoute.factorySettings")}
+        </Link>
+      </Button>
+      {onNewFactory ? (
+        <Button type="button" size="sm" onClick={onNewFactory}>
+          <IconPlus className="size-4" />
+          {t("factoryRoute.newFactory")}
+        </Button>
+      ) : (
+        <Button asChild size="sm">
+          <Link to={FACTORY_NEW_HREF}>
+            <IconPlus className="size-4" />
+            {t("factoryRoute.newFactory")}
+          </Link>
+        </Button>
+      )}
+      <AgentToggleButton />
+    </div>
+  );
+}

package/corpus/templates/factory/app/components/layout/Layout.tsx

@@ -42,6 +42,8 @@ function routeOwnsToolbar(pathname: string): boolean {
     pathname === "/chat" ||
     pathname.startsWith("/chat/") ||
     pathname === "/factory" ||
+    pathname === "/factory-settings" ||
+    pathname === "/agents" ||
     pathname === "/database" ||
     pathname.startsWith("/extensions")
   );

package/corpus/templates/factory/app/components/layout/Sidebar.tsx

@@ -444,7 +444,9 @@ export function Sidebar({
             const isActive =
               item.href === "/"
                 ? isChatRoute
-                : location.pathname.startsWith(item.href);
+                : item.href === "/factory"
+                  ? location.pathname === "/factory"
+                  : location.pathname.startsWith(item.href);
             const link = (
               <Link
                 to={item.href}

package/corpus/templates/factory/app/hooks/use-navigation-state.ts

@@ -25,27 +25,27 @@ export function useNavigationState() {
         view: viewForPath(pathname),
         path: appPath(pathname),
         ...(threadId ? { threadId } : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("factoryId")
+        ...(pathname === "/factory" && searchParams.get("factoryId")
           ? { factoryId: searchParams.get("factoryId") ?? undefined }
           : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("tab")
+        ...(pathname === "/factory" && searchParams.get("tab")
           ? { factoryTab: searchParams.get("tab") ?? undefined }
           : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("automationId")
+        ...(pathname === "/factory" && searchParams.get("automationId")
           ? {
               factoryAutomationId:
                 searchParams.get("automationId") ?? undefined,
             }
           : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("auditRunId")
+        ...(pathname === "/factory" && searchParams.get("auditRunId")
           ? {
               factoryAuditRunId: searchParams.get("auditRunId") ?? undefined,
             }
           : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("node")
+        ...(pathname === "/factory" && searchParams.get("node")
           ? { factoryNodeId: searchParams.get("node") ?? undefined }
           : {}),
-        ...(pathname.startsWith("/factory") && searchParams.get("edge")
+        ...(pathname === "/factory" && searchParams.get("edge")
           ? { factoryEdgeId: searchParams.get("edge") ?? undefined }
           : {}),
       };
@@ -73,7 +73,8 @@ function viewForPath(pathname: string): string {
   if (pathname.startsWith("/extensions")) return "extensions";
   if (pathname.startsWith("/observability")) return "observability";
   if (pathname.startsWith("/agents")) return "agents";
-  if (pathname.startsWith("/factory")) return "factory";
+  if (pathname === "/factory-settings") return "factory-settings";
+  if (pathname === "/factory") return "factory";
   if (pathname.startsWith("/settings/agent") || pathname.startsWith("/agent")) {
     return "agent";
   }
@@ -96,6 +97,8 @@ function pathForView(view?: string): string {
       return "/observability";
     case "factory":
       return "/factory";
+    case "factory-settings":
+      return "/factory-settings";
     case "agents":
       return "/agents";
     case "agent":

package/corpus/templates/factory/app/i18n/en-US.ts

@@ -108,6 +108,8 @@ const messages = {
     slackChannelPlaceholder: "For example, C0123456789",
     slackChannelName: "Channel name",
     slackChannelNamePlaceholder: "For example, product-agent-native-feedback",
+    builderSlackUserId: "@Builder.io Slack Member ID",
+    builderSlackUserIdPlaceholder: "For example, U096KN3EL2Y",
     repository: "Repository",
     repositoryPlaceholder: "For example, BuilderIO/agent-native",
     enablePolling: "Enable one-minute observation polling",
@@ -165,6 +167,7 @@ const messages = {
     rulesTab: "Rules",
     automationsTab: "Automations",
     agentsTab: "Agents",
+    factorySettings: "Factory Settings",
     agenticAppsTitle: "Agentic apps",
     agenticAppsEmpty: "No agentic apps in this workspace yet.",
     createApp: "Create app",

package/corpus/templates/factory/app/routes/agents.tsx

@@ -1,8 +1,29 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { Link } from "react-router";
+
 import { FactoryAgentsView } from "@/components/factory/FactoryAgentsView";
+import { FactoryWorkspaceActions } from "@/components/factory/FactoryWorkspaceActions";
+import { Button } from "@/components/ui/button";
 
 export default function AgentsRoute() {
+  const t = useT();
+
   return (
-    <div className="h-full min-h-0 overflow-y-auto bg-background">
+    <div className="flex h-full min-h-0 flex-col overflow-y-auto bg-background">
+      <div className="flex items-center gap-3 px-4 py-4 lg:px-6">
+        <Button asChild type="button" variant="ghost" size="icon">
+          <Link to="/factory" aria-label={t("factoryRoute.backToFactories")}>
+            <IconArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h1 className="text-sm font-medium sm:text-base">
+          {t("factoryRoute.agentsTitle")}
+        </h1>
+        <div className="ms-auto">
+          <FactoryWorkspaceActions />
+        </div>
+      </div>
       <FactoryAgentsView />
     </div>
   );

package/corpus/templates/factory/app/routes/factory-settings.tsx

@@ -0,0 +1,34 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconArrowLeft } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import { FactorySettingsView } from "@/components/factory/FactorySettingsView";
+import { FactoryWorkspaceActions } from "@/components/factory/FactoryWorkspaceActions";
+import { Button } from "@/components/ui/button";
+
+export function meta() {
+  return [{ title: "Factory" }];
+}
+
+export default function FactorySettingsRoute() {
+  const t = useT();
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-y-auto bg-background">
+      <div className="flex items-center gap-3 px-4 py-4 lg:px-6">
+        <Button asChild type="button" variant="ghost" size="icon">
+          <Link to="/factory" aria-label={t("factoryRoute.backToFactories")}>
+            <IconArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h1 className="text-sm font-medium sm:text-base">
+          {t("factoryRoute.factorySettings")}
+        </h1>
+        <div className="ms-auto">
+          <FactoryWorkspaceActions />
+        </div>
+      </div>
+      <FactorySettingsView />
+    </div>
+  );
+}