@agent-native/core 0.169.1 → 0.170.0

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

@@ -0,0 +1,33 @@
+import { SettingsGroup } from "@agent-native/core/client/settings";
+import type { ReactNode } from "react";
+
+export function FactorySourceSettingsGroup({
+  title,
+  description,
+  optionalLabel,
+  children,
+}: {
+  title: string;
+  description?: string;
+  optionalLabel: string;
+  children: ReactNode;
+}) {
+  return (
+    <section>
+      <header className="mb-2.5">
+        <div className="flex items-baseline gap-2">
+          <h2 className="text-sm font-semibold text-foreground">{title}</h2>
+          <span className="text-xs font-normal text-muted-foreground">
+            {optionalLabel}
+          </span>
+        </div>
+        {description ? (
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </header>
+      <SettingsGroup variant="soft">{children}</SettingsGroup>
+    </section>
+  );
+}

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

@@ -1,28 +1,28 @@
 import { useActionMutation } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import {
-  IconAlertCircle,
-  IconBrandGithub,
-  IconBrandSlack,
-  IconLoader2,
-} from "@tabler/icons-react";
+import { SettingsGroup, SettingsRow } from "@agent-native/core/client/settings";
+import { IconLoader2 } from "@tabler/icons-react";
 import { useState } from "react";
 import { Link } from "react-router";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 
+import { FactorySourceSettingsGroup } from "./FactorySourceSettingsGroup";
+
 type CreateFactoryResult = {
   ok: boolean;
   factoryId: string;
   name: string;
 };
 
+const fieldControlClass = "h-9 w-full sm:w-64";
+const selectControlClass =
+  "h-9 w-full rounded-md border border-input bg-background px-3 text-sm sm:w-64";
+
 export function NewFactoryForm({
   onCreated,
 }: {
@@ -32,8 +32,12 @@ export function NewFactoryForm({
   const createMutation = useActionMutation("create-factory");
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
+  const [slackWorkspace, setSlackWorkspace] = useState<"primary" | "secondary">(
+    "primary",
+  );
   const [slackChannelId, setSlackChannelId] = useState("");
   const [slackChannelName, setSlackChannelName] = useState("");
+  const [builderSlackUserId, setBuilderSlackUserId] = useState("");
   const [observeSlack, setObserveSlack] = useState(false);
   const [repository, setRepository] = useState("");
   const [observeGithub, setObserveGithub] = useState(false);
@@ -49,16 +53,26 @@ export function NewFactoryForm({
       toast.error(t("factoryRoute.createFactoryNameRequired"));
       return;
     }
+    const hasSlackFields =
+      slackChannelId.trim() ||
+      slackChannelName.trim() ||
+      builderSlackUserId.trim() ||
+      observeSlack ||
+      slackWorkspace !== "primary";
     try {
       const result = (await createMutation.mutateAsync({
         name: trimmedName,
         ...(description.trim() ? { description: description.trim() } : {}),
+        ...(hasSlackFields ? { slackWorkspace } : {}),
         ...(slackChannelId.trim()
           ? { slackChannelId: slackChannelId.trim() }
           : {}),
         ...(slackChannelName.trim()
           ? { slackChannelName: slackChannelName.trim() }
           : {}),
+        ...(builderSlackUserId.trim()
+          ? { builderSlackUserId: builderSlackUserId.trim() }
+          : {}),
         ...(observeSlack ? { observeSlack: true } : {}),
         ...(repository.trim() ? { repository: repository.trim() } : {}),
         ...(observeGithub ? { observeGithub: true } : {}),
@@ -86,164 +100,190 @@ export function NewFactoryForm({
 
   return (
     <form
-      className="mx-auto flex w-full max-w-2xl flex-col gap-6"
+      className="mx-auto flex w-full max-w-3xl flex-col gap-6"
       onSubmit={(event) => void handleSubmit(event)}
     >
-      <div className="space-y-2">
-        <Label htmlFor="new-factory-name">
-          {t("factoryRoute.createFactoryNameLabel")}
-        </Label>
-        <Input
-          id="new-factory-name"
-          value={name}
-          onChange={(event) => setName(event.target.value)}
-          placeholder={t("factoryRoute.newFactory")}
-          autoFocus
+      <SettingsGroup variant="soft">
+        <SettingsRow
+          label={t("factoryRoute.createFactoryNameLabel")}
+          control={
+            <Input
+              id="new-factory-name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              placeholder={t("factoryRoute.newFactory")}
+              autoFocus
+              className={fieldControlClass}
+            />
+          }
         />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="new-factory-description">
-          {t("factoryRoute.createFactoryDescriptionLabel")}
-        </Label>
-        <Textarea
-          id="new-factory-description"
-          value={description}
-          onChange={(event) => setDescription(event.target.value)}
-          rows={2}
+        <SettingsRow
+          label={
+            <span className="flex items-baseline gap-2">
+              <span>{t("factoryRoute.createFactoryDescriptionLabel")}</span>
+              <span className="text-xs font-normal text-muted-foreground">
+                {t("factoryInspector.optional")}
+              </span>
+            </span>
+          }
+        >
+          <Textarea
+            id="new-factory-description"
+            aria-label={t("factoryRoute.createFactoryDescriptionLabel")}
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            rows={2}
+          />
+        </SettingsRow>
+      </SettingsGroup>
+      <FactorySourceSettingsGroup
+        title={t("factoryRoute.slackSource")}
+        description={t("factoryRoute.slackSourceDescription")}
+        optionalLabel={t("factoryInspector.optional")}
+      >
+        <SettingsRow
+          label={t("triage.slackWorkspace")}
+          control={
+            <select
+              aria-label={t("triage.slackWorkspace")}
+              value={slackWorkspace}
+              onChange={(event) =>
+                setSlackWorkspace(event.target.value as "primary" | "secondary")
+              }
+              className={selectControlClass}
+            >
+              <option value="primary">primary</option>
+              <option value="secondary">secondary</option>
+            </select>
+          }
         />
-      </div>
-      <div className="space-y-4">
-        <Card>
-          <CardHeader className="px-4 pb-0 pt-4">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <IconBrandSlack className="size-4" />
-              {t("factoryRoute.createFactorySlackSourceOptional")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3 px-4 pb-4">
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-slack-channel">
-                {t("triage.slackChannelId")}
-              </Label>
-              <Input
-                id="new-factory-slack-channel"
-                value={slackChannelId}
-                onChange={(event) => setSlackChannelId(event.target.value)}
-                placeholder={t("triage.slackChannelPlaceholder")}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-slack-channel-name">
-                {t("triage.slackChannelName")}
-              </Label>
-              <Input
-                id="new-factory-slack-channel-name"
-                value={slackChannelName}
-                onChange={(event) => setSlackChannelName(event.target.value)}
-                placeholder={t("triage.slackChannelNamePlaceholder")}
-              />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <Label htmlFor="new-factory-observe-slack">
-                {t("factoryRoute.createFactoryObserveSlack")}
-              </Label>
-              <Switch
-                id="new-factory-observe-slack"
-                checked={observeSlack}
-                onCheckedChange={(checked) => setObserveSlack(checked === true)}
-              />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="px-4 pb-0 pt-4">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <IconBrandGithub className="size-4" />
-              {t("factoryRoute.createFactoryGithubSourceOptional")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3 px-4 pb-4">
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-repository">
-                {t("triage.repository")}
-              </Label>
-              <Input
-                id="new-factory-repository"
-                value={repository}
-                onChange={(event) => setRepository(event.target.value)}
-                placeholder={t("triage.repositoryPlaceholder")}
-              />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <Label htmlFor="new-factory-observe-github">
-                {t("factoryRoute.createFactoryObserveGithub")}
-              </Label>
-              <Switch
-                id="new-factory-observe-github"
-                checked={observeGithub}
-                onCheckedChange={(checked) =>
-                  setObserveGithub(checked === true)
-                }
-              />
-            </div>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="px-4 pb-0 pt-4">
-            <CardTitle className="flex items-center gap-2 text-base">
-              <IconAlertCircle className="size-4" />
-              {t("factoryRoute.createFactorySentrySourceOptional")}
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="space-y-3 px-4 pb-4">
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-sentry-org">
-                {t("triage.sentryOrgSlug")}
-              </Label>
-              <Input
-                id="new-factory-sentry-org"
-                value={sentryOrgSlug}
-                onChange={(event) => setSentryOrgSlug(event.target.value)}
-                placeholder={t("triage.sentryOrgPlaceholder")}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-sentry-project">
-                {t("triage.sentryProjectSlug")}
-              </Label>
-              <Input
-                id="new-factory-sentry-project"
-                value={sentryProjectSlug}
-                onChange={(event) => setSentryProjectSlug(event.target.value)}
-                placeholder={t("triage.sentryProjectPlaceholder")}
-              />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="new-factory-sentry-environment">
-                {t("triage.sentryEnvironment")}
-              </Label>
-              <Input
-                id="new-factory-sentry-environment"
-                value={sentryEnvironment}
-                onChange={(event) => setSentryEnvironment(event.target.value)}
-                placeholder={t("triage.sentryEnvironmentPlaceholder")}
-              />
-            </div>
-            <div className="flex items-center justify-between gap-3">
-              <Label htmlFor="new-factory-observe-sentry">
-                {t("factoryRoute.createFactoryObserveSentry")}
-              </Label>
-              <Switch
-                id="new-factory-observe-sentry"
-                checked={observeSentry}
-                onCheckedChange={(checked) =>
-                  setObserveSentry(checked === true)
-                }
-              />
-            </div>
-          </CardContent>
-        </Card>
-      </div>
+        <SettingsRow
+          label={t("triage.slackChannelId")}
+          control={
+            <Input
+              aria-label={t("triage.slackChannelId")}
+              value={slackChannelId}
+              onChange={(event) => setSlackChannelId(event.target.value)}
+              placeholder={t("triage.slackChannelPlaceholder")}
+              className={fieldControlClass}
+            />
+          }
+        />
+        <SettingsRow
+          label={t("triage.slackChannelName")}
+          control={
+            <Input
+              aria-label={t("triage.slackChannelName")}
+              value={slackChannelName}
+              onChange={(event) => setSlackChannelName(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.enablePolling")}
+          control={
+            <Switch
+              aria-label={t("triage.enablePolling")}
+              checked={observeSlack}
+              onCheckedChange={(checked) => setObserveSlack(checked === true)}
+            />
+          }
+        />
+      </FactorySourceSettingsGroup>
+      <FactorySourceSettingsGroup
+        title={t("factoryRoute.githubSource")}
+        description={t("factoryRoute.githubSourceDescription")}
+        optionalLabel={t("factoryInspector.optional")}
+      >
+        <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.enableGithubPolling")}
+          control={
+            <Switch
+              aria-label={t("triage.enableGithubPolling")}
+              checked={observeGithub}
+              onCheckedChange={(checked) => setObserveGithub(checked === true)}
+            />
+          }
+        />
+      </FactorySourceSettingsGroup>
+      <FactorySourceSettingsGroup
+        title={t("factoryRoute.sentrySource")}
+        description={t("factoryRoute.sentrySourceDescription")}
+        optionalLabel={t("factoryInspector.optional")}
+      >
+        <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={observeSentry}
+              onCheckedChange={(checked) => setObserveSentry(checked === true)}
+            />
+          }
+        />
+      </FactorySourceSettingsGroup>
       <div className="flex justify-end gap-2">
         <Button asChild type="button" variant="outline">
           <Link to="/factory">{t("factoryRoute.createFactoryCancel")}</Link>

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

@@ -112,9 +112,9 @@ const messages = {
     builderSlackUserIdPlaceholder: "For example, U096KN3EL2Y",
     repository: "Repository",
     repositoryPlaceholder: "For example, BuilderIO/agent-native",
-    enablePolling: "Enable one-minute observation polling",
-    enableGithubPolling: "Enable GitHub issue and pull-request polling",
-    enableSentryPolling: "Enable daily Sentry error polling",
+    enablePolling: "Enable polling",
+    enableGithubPolling: "Enable polling",
+    enableSentryPolling: "Enable polling",
     sentryOrgSlug: "Sentry organization slug",
     sentryProjectSlug: "Sentry project slug",
     sentryEnvironment: "Sentry environment",
@@ -122,6 +122,8 @@ const messages = {
     sentryProjectPlaceholder: "Optional project slug",
     sentryEnvironmentPlaceholder: "For example, production",
     saveSettings: "Save settings",
+    unsavedSettings: "Unsaved changes",
+    discardSettingsChanges: "Discard",
     settingsError: "Could not save observation settings.",
     settingsSaved: "Observation settings saved.",
     approvalError: "Approval could not be started.",
@@ -137,11 +139,20 @@ const messages = {
     createFactorySubmit: "Create factory",
     createFactoryCancel: "Cancel",
     createFactoryNameLabel: "Name",
-    createFactoryDescriptionLabel: "Description (optional)",
+    createFactoryDescriptionLabel: "What this factory does",
     createFactorySourcesOptional: "Sources (optional)",
     createFactorySlackSourceOptional: "Slack source (optional)",
     createFactoryGithubSourceOptional: "GitHub source (optional)",
     createFactorySentrySourceOptional: "Sentry source (optional)",
+    slackSource: "Slack",
+    githubSource: "GitHub",
+    sentrySource: "Sentry",
+    slackSourceDescription:
+      "Poll this channel to add Slack messages to the inbox.",
+    githubSourceDescription:
+      "Poll this repository to add issues and pull requests to the inbox.",
+    sentrySourceDescription:
+      "Poll this project to add unresolved errors to the inbox.",
     createFactoryObserveSlack: "Observe Slack channel",
     createFactoryObserveGithub: "Observe GitHub issues",
     createFactoryObserveSentry: "Observe Sentry errors",
@@ -222,6 +233,20 @@ const messages = {
     auditUxImpact: "UX impact",
     auditOwnerArea: "Owner area",
     auditGuardsLabel: "Guards",
+    auditTrace: "Trace",
+    auditWhy: "Why",
+    auditWhatHappened: "What happened",
+    auditInspectedOnly: "Inspected only",
+    auditNoNew: "No new items",
+    auditFailed: "{{count}} failed",
+    auditHeld: "{{count}} held",
+    auditDispatched: "{{count}} dispatched",
+    auditObserved: "{{count}} new",
+    auditScanned: "{{count}} scanned",
+    auditOutcomeHeld: "Held",
+    auditOutcomeDispatched: "Dispatched",
+    auditOutcomeFailed: "Dispatch failed",
+    auditOutcomeInspected: "Inspected",
     historyTab: "History",
     historyTitle: "Saved versions",
     historyLoading: "Loading saved versions",
@@ -290,8 +315,11 @@ const messages = {
     saveAutomation: "Save",
     automationSaved: "Saved",
     automationSaveFailed: "Could not save the automation.",
+    automationRunFailed: "Could not run the automation.",
+    automationRunning: "Running",
     runNow: "Run now",
     automationHealthTitle: "Scheduler health",
+    automationHealthStatus: "Status",
     automationHealthDescription:
       "The heartbeat shows whether the deployed recurring-job worker is still checking schedules.",
     automationHealthHealthy: "Healthy",