@checkstack/automation-frontend 0.2.0 → 0.4.0

package/src/components/AutomationGroupCombobox.tsx

@@ -0,0 +1,133 @@
+import React from "react";
+import { Tag, X } from "lucide-react";
+import {
+  Input,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  comboboxAnchorProps,
+  isAnchorInteraction,
+} from "@checkstack/ui";
+
+export interface AutomationGroupComboboxProps {
+  /** Current group value (controlled). Empty string means "Ungrouped". */
+  value: string;
+  /** Called whenever the value changes (typing, picking, or clearing). */
+  onValueChange: (next: string) => void;
+  /** Distinct existing group values to suggest. */
+  suggestions: string[];
+  id?: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+/**
+ * Type-new-or-pick-existing group field. Composes `Popover` + `Input` (no
+ * Combobox primitive exists) and mirrors `PackageNameCombobox`'s structure:
+ * a scrollable suggestion list filtered by the current input.
+ *
+ * Free-typed new groups are allowed (the input value IS the group). Selecting
+ * a suggestion fills the value and closes the list. Reuses the shared
+ * `comboboxInteraction` dismiss-guard so the very click that opens the list
+ * does not immediately close it (Radix treats the anchor as "outside").
+ */
+export const AutomationGroupCombobox: React.FC<AutomationGroupComboboxProps> = ({
+  value,
+  onValueChange,
+  suggestions,
+  id,
+  disabled,
+  placeholder,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  const query = value.trim().toLowerCase();
+  const filtered = React.useMemo(() => {
+    const seen = new Set<string>();
+    return suggestions.filter((s) => {
+      const key = s.toLowerCase();
+      if (seen.has(key)) return false;
+      seen.add(key);
+      return query.length === 0 || key.includes(query);
+    });
+  }, [suggestions, query]);
+
+  // Don't offer a suggestion that exactly equals the current value (nothing
+  // to pick — the user already has it).
+  const showList =
+    filtered.length > 0 &&
+    !(filtered.length === 1 && filtered[0]?.toLowerCase() === query);
+
+  const handlePick = (group: string) => {
+    onValueChange(group);
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
+  return (
+    <Popover open={open && showList && !disabled} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div className="relative">
+          <Tag className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            ref={inputRef}
+            id={id}
+            value={value}
+            disabled={disabled}
+            onChange={(e) => {
+              onValueChange(e.target.value);
+              setOpen(true);
+            }}
+            onFocus={() => setOpen(true)}
+            placeholder={placeholder ?? "Ungrouped"}
+            autoComplete="off"
+            className="pl-8 pr-8"
+            {...comboboxAnchorProps}
+          />
+          {value.length > 0 && !disabled && (
+            <button
+              type="button"
+              aria-label="Clear group"
+              onClick={() => {
+                onValueChange("");
+                setOpen(false);
+                inputRef.current?.focus();
+              }}
+              className="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm text-muted-foreground hover:text-foreground"
+            >
+              <X className="h-3.5 w-3.5" />
+            </button>
+          )}
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        align="start"
+        className="w-[--radix-popover-trigger-width] p-0"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onCloseAutoFocus={(e) => e.preventDefault()}
+        onPointerDownOutside={(e) => {
+          if (isAnchorInteraction(e.target)) e.preventDefault();
+        }}
+        onFocusOutside={(e) => {
+          if (isAnchorInteraction(e.target)) e.preventDefault();
+        }}
+      >
+        <div className="max-h-60 overflow-y-auto py-1">
+          {filtered.map((group) => (
+            <button
+              key={group}
+              type="button"
+              onMouseDown={(e) => e.preventDefault()}
+              onClick={() => handlePick(group)}
+              className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
+            >
+              <Tag className="h-3 w-3 shrink-0 text-muted-foreground" />
+              <span className="flex-1 truncate">{group}</span>
+            </button>
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/RunAsServiceAccountPicker.tsx

@@ -0,0 +1,170 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { ExternalLink, KeyRound, ShieldCheck } from "lucide-react";
+import { usePluginClient } from "@checkstack/frontend-api";
+import { AuthApi, authRoutes } from "@checkstack/auth-common";
+import { resolveRoute, APP_DOC_SLUGS, docsPath } from "@checkstack/common";
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  InfoBanner,
+  InfoBannerIcon,
+  InfoBannerContent,
+  InfoBannerDescription,
+  EmptyState,
+  Button,
+} from "@checkstack/ui";
+
+/**
+ * Deep-links into the in-app user guide. The backend serves the Astro Starlight
+ * docs build same-origin at `/checkstack/*`, so these are same-origin paths
+ * opened in a new tab. They are static doc pages, not app routes - hence a plain
+ * anchor (below), never a react-router `<Link>`. Slugs are centralised in
+ * `APP_DOC_SLUGS` and guarded by `docs-links.test.ts` against renames.
+ */
+const DOCS_TEAMS_AND_ACCESS = docsPath(APP_DOC_SLUGS.teamsAndAccess);
+const DOCS_SERVICE_ACCOUNTS = docsPath(APP_DOC_SLUGS.apiKeys);
+
+/** Route to the Applications admin tab in auth settings. */
+const APPLICATIONS_ADMIN_ROUTE = `${resolveRoute(
+  authRoutes.routes.settings,
+)}?tab=applications`;
+
+export interface RunAsServiceAccountPickerProps {
+  /** Selected application id, or empty string when nothing is chosen yet. */
+  value: string;
+  /** Called with the chosen application id. */
+  onValueChange: (next: string) => void;
+  /** When false, the picker is read-only (matches the page's `canManage`). */
+  disabled?: boolean;
+  /** Show the inline "required" validation hint. */
+  showError?: boolean;
+}
+
+/**
+ * "Run as (Service Account)" picker for the automation editor.
+ *
+ * Populated from the auth plugin's `getBindableApplications` query, which
+ * server-side filters to exactly the applications THIS user is allowed to
+ * bind (their access rules are a subset of the caller's). The automation
+ * then runs with the chosen application's permissions, so picking one is
+ * required.
+ *
+ * Teaching UX:
+ *   - An info banner explains what a service account is and why it is
+ *     required.
+ *   - When no applications are bindable, an `EmptyState` points the user to
+ *     the Applications admin and the docs instead of leaving them stuck.
+ */
+export const RunAsServiceAccountPicker: React.FC<
+  RunAsServiceAccountPickerProps
+> = ({ value, onValueChange, disabled, showError }) => {
+  const authClient = usePluginClient(AuthApi);
+  const { data: applications = [], isLoading } =
+    authClient.getBindableApplications.useQuery({});
+
+  const hasNoApplications = !isLoading && applications.length === 0;
+
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <Label htmlFor="runAs">Run as (Service Account)</Label>
+        <Select
+          value={value || undefined}
+          onValueChange={onValueChange}
+          disabled={disabled || hasNoApplications || isLoading}
+        >
+          <SelectTrigger
+            id="runAs"
+            aria-invalid={showError ? true : undefined}
+            className={showError ? "border-destructive" : undefined}
+          >
+            <SelectValue
+              placeholder={
+                isLoading ? "Loading service accounts..." : "Select a service account"
+              }
+            />
+          </SelectTrigger>
+          <SelectContent>
+            {applications.map((app) => (
+              <SelectItem key={app.id} value={app.id}>
+                <span className="flex flex-col text-left">
+                  <span className="truncate">{app.name}</span>
+                  {app.description ? (
+                    <span className="text-xs text-muted-foreground truncate">
+                      {app.description}
+                    </span>
+                  ) : null}
+                </span>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {showError && !hasNoApplications && (
+          <p className="text-xs text-destructive">
+            A service account is required.
+          </p>
+        )}
+      </div>
+
+      {hasNoApplications ? (
+        <EmptyState
+          icon={<KeyRound className="h-7 w-7" />}
+          title="No service accounts available"
+          description={
+            <>
+              An automation runs with a service account's permissions, but you
+              do not have any to bind yet. Create or get access to one in the
+              Applications admin, then come back here.
+            </>
+          }
+          actions={
+            <>
+              <Link to={APPLICATIONS_ADMIN_ROUTE}>
+                <Button size="sm" variant="outline">
+                  Open Applications admin
+                </Button>
+              </Link>
+              <a
+                href={DOCS_SERVICE_ACCOUNTS}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <Button size="sm" variant="ghost">
+                  Learn more
+                  <ExternalLink className="ml-1 h-3.5 w-3.5" />
+                </Button>
+              </a>
+            </>
+          }
+        />
+      ) : (
+        <InfoBanner variant="info">
+          <InfoBannerIcon>
+            <ShieldCheck className="h-4 w-4" />
+          </InfoBannerIcon>
+          <InfoBannerContent>
+            <InfoBannerDescription>
+              A service account is an application the automation runs as. It
+              executes with that account's permissions (assigned via roles), so
+              picking one is required.{" "}
+              <a
+                href={DOCS_TEAMS_AND_ACCESS}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-0.5 underline underline-offset-2 hover:no-underline"
+              >
+                Learn more
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </InfoBannerDescription>
+          </InfoBannerContent>
+        </InfoBanner>
+      )}
+    </div>
+  );
+};

package/src/editor/ActionEditor.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
   ActionCard,
+  type ActionCardMenuItem,
   Checkbox,
   cn,
   Input,
@@ -20,6 +25,7 @@ import type {
   StopInput,
   VariablesInput,
   WaitForTriggerInput,
+  WaitUntilInput,
 } from "@checkstack/automation-common";
 import {
   ACTION_KIND_META,
@@ -28,6 +34,8 @@ import {
   collectActionIds,
   defaultActionId,
 } from "./action-helpers";
+import { summarizeAction } from "./item-summary";
+import { ItemSheet } from "./ItemSheet";
 import { useAutomationRegistry, useVariableScope } from "./registry-context";
 import { useActionIssues } from "./editor-validation";
 import {
@@ -37,6 +45,7 @@ import {
   StopActionBody,
   VariablesActionBody,
   WaitForTriggerActionBody,
+  WaitUntilActionBody,
 } from "./action-leaf-cards";
 import {
   ChooseActionBody,
@@ -49,6 +58,8 @@ export interface ActionEditorProps {
   value: ActionInput;
   onChange: (next: ActionInput) => void;
   onDelete: () => void;
+  /** Clone this action (fresh ids) directly after itself. Omit to hide. */
+  onDuplicate?: () => void;
   path: ActionPath;
   definition: AutomationDefinition;
   dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
@@ -91,6 +102,7 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
   value,
   onChange,
   onDelete,
+  onDuplicate,
   path,
   definition,
   dragHandleProps,
@@ -100,6 +112,7 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
   const { actions } = useAutomationRegistry();
   const kind = actionKindOf(value);
   const meta = ACTION_KIND_META[kind];
+  const [sheetOpen, setSheetOpen] = React.useState(false);
   const {
     templateProperties,
     variableNodes,
@@ -116,101 +129,73 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
     actions.find((a) => a.qualifiedId === qualified)?.displayName,
   );
 
-  const description =
-    value.description ?? (value.id ? `id: ${value.id}` : undefined);
+  // Collapsed-row summary derived from the config; falls back to the
+  // operator's description/id note when there's no derivable summary.
+  const summary =
+    summarizeAction(value) ??
+    value.description ??
+    (value.id ? `id: ${value.id}` : undefined);
 
   const enabledValue = value.enabled !== false;
   const issues = useActionIssues(path);
+  // `id` auto-fills on blur, so it isn't a meaningful "advanced was
+  // customised" signal; open the metadata disclosure only when the operator
+  // set a description or flipped the failure behaviour.
+  const hasAdvancedMeta =
+    value.description !== undefined || value.continue_on_error === true;
 
-  return (
-    <ActionCard
-      id={stableId}
-      title={title}
-      description={description}
-      category={meta.label}
-      icon={meta.icon}
-      enabled={enabledValue}
-      onEnabledChange={
-        disabled
-          ? undefined
-          : (next) => onChange({ ...value, enabled: next })
-      }
-      onDelete={disabled ? undefined : onDelete}
-      dragHandleProps={disabled ? undefined : dragHandleProps}
-      errors={issues}
-    >
-      <div className="space-y-4">
-        {/* Action settings — identity and failure behaviour. Grouped in a
-            quiet panel and labelled with small uppercase eyebrows so the
-            action's own configuration below reads as the primary content of
-            the card rather than competing with it. The action's kind is
-            fixed at creation; to change it, add a new step and delete this
-            one. */}
-        <div className="rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3">
-          <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
-            <MetaField label="Id" htmlFor={`${stableId}-id`}>
-              <Input
-                id={`${stableId}-id`}
-                value={value.id ?? ""}
-                onChange={(event) =>
-                  onChange({ ...value, id: event.target.value || undefined })
-                }
-                onBlur={() => {
-                  // Never leave the id blank: re-fill a unique, log-friendly
-                  // default so the action stays referenceable
-                  // (artifacts.<id>.<name>) and parseable in run logs.
-                  if (value.id) return;
-                  const taken = collectActionIds(definition.actions);
-                  onChange({ ...value, id: defaultActionId(value, taken) });
-                }}
-                placeholder="Generated on blur"
-                disabled={disabled}
-                className="h-8 text-xs"
-              />
-            </MetaField>
+  // Validation issues (structural + inline-script type errors) surface only as
+  // the card's error badge - never auto-open the sheet. Auto-opening would pop
+  // multiple sheets at once when several cards have errors (e.g. every script
+  // action after a trigger change), so the badge is the single, calm signal and
+  // the operator clicks in for detail.
 
-            <MetaField label="Description" htmlFor={`${stableId}-desc`}>
-              <Input
-                id={`${stableId}-desc`}
-                value={value.description ?? ""}
-                onChange={(event) =>
-                  onChange({
-                    ...value,
-                    description: event.target.value || undefined,
-                  })
-                }
-                placeholder="Optional note"
-                disabled={disabled}
-                className="h-8 text-xs"
-              />
-            </MetaField>
-          </div>
-
-          <MetaField label="On failure">
-            <div
-              className={cn(
-                "flex h-8 items-center gap-2 select-none",
-                disabled ? "cursor-not-allowed" : "cursor-pointer",
-              )}
-              onClick={() =>
-                !disabled &&
-                onChange({
-                  ...value,
-                  continue_on_error: value.continue_on_error !== true,
-                })
-              }
-            >
-              <Checkbox
-                checked={value.continue_on_error === true}
-                disabled={disabled}
-              />
-              <Label className="text-xs font-normal text-muted-foreground cursor-pointer">
-                Continue on error
-              </Label>
-            </div>
-          </MetaField>
-        </div>
+  const menuItems: ActionCardMenuItem[] = disabled
+    ? []
+    : [
+        {
+          label: enabledValue ? "Disable" : "Enable",
+          icon: enabledValue ? "PowerOff" : "Power",
+          onClick: () => onChange({ ...value, enabled: !enabledValue }),
+        },
+        ...(onDuplicate
+          ? [
+              {
+                label: "Duplicate",
+                icon: "Copy" as const,
+                onClick: onDuplicate,
+              },
+            ]
+          : []),
+        {
+          label: "Delete",
+          icon: "Trash2",
+          onClick: onDelete,
+          variant: "destructive",
+        },
+      ];
 
+  return (
+    <>
+      <ActionCard
+        id={stableId}
+        title={title}
+        summary={summary}
+        category={meta.label}
+        icon={meta.icon}
+        enabled={enabledValue}
+        onOpenSheet={() => setSheetOpen(true)}
+        actions={menuItems}
+        dragHandleProps={disabled ? undefined : dragHandleProps}
+        errors={issues}
+      />
+      <ItemSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        title={title}
+        description={meta.label}
+      >
+      <div className="space-y-4">
         <ActionBody
           kind={kind}
           value={value}
@@ -224,8 +209,102 @@ export const ActionEditor: React.FC<ActionEditorProps> = ({
           shellEnvVars={shellEnvVars}
           disabled={disabled}
         />
+
+        {/* Per-action metadata — id, description, failure behaviour — tucked
+            behind a collapsed disclosure so the action's own configuration
+            above reads as the primary content of the card. The action's kind
+            is fixed at creation; to change it, add a new step and delete this
+            one. Enable/disable lives on the card header, not here. */}
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue={hasAdvancedMeta ? "advanced" : undefined}
+          className="w-full"
+        >
+          <AccordionItem value="advanced" className="border-b-0">
+            <AccordionTrigger className="py-2 text-xs hover:no-underline">
+              <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                Advanced
+              </span>
+            </AccordionTrigger>
+            <AccordionContent className="pb-0">
+              <div className="rounded-lg border border-border/60 bg-muted/20 p-3 space-y-3">
+                <div className="grid gap-x-4 gap-y-3 sm:grid-cols-2">
+                  <MetaField label="Id" htmlFor={`${stableId}-id`}>
+                    <Input
+                      id={`${stableId}-id`}
+                      value={value.id ?? ""}
+                      onChange={(event) =>
+                        onChange({
+                          ...value,
+                          id: event.target.value || undefined,
+                        })
+                      }
+                      onBlur={() => {
+                        // Never leave the id blank: re-fill a unique,
+                        // log-friendly default so the action stays
+                        // referenceable (artifacts.<id>.<name>) and parseable
+                        // in run logs.
+                        if (value.id) return;
+                        const taken = collectActionIds(definition.actions);
+                        onChange({
+                          ...value,
+                          id: defaultActionId(value, taken),
+                        });
+                      }}
+                      placeholder="Generated on blur"
+                      disabled={disabled}
+                      className="h-8 text-xs"
+                    />
+                  </MetaField>
+
+                  <MetaField label="Description" htmlFor={`${stableId}-desc`}>
+                    <Input
+                      id={`${stableId}-desc`}
+                      value={value.description ?? ""}
+                      onChange={(event) =>
+                        onChange({
+                          ...value,
+                          description: event.target.value || undefined,
+                        })
+                      }
+                      placeholder="Optional note"
+                      disabled={disabled}
+                      className="h-8 text-xs"
+                    />
+                  </MetaField>
+                </div>
+
+                <MetaField label="On failure">
+                  <div
+                    className={cn(
+                      "flex h-8 items-center gap-2 select-none",
+                      disabled ? "cursor-not-allowed" : "cursor-pointer",
+                    )}
+                    onClick={() =>
+                      !disabled &&
+                      onChange({
+                        ...value,
+                        continue_on_error: value.continue_on_error !== true,
+                      })
+                    }
+                  >
+                    <Checkbox
+                      checked={value.continue_on_error === true}
+                      disabled={disabled}
+                    />
+                    <Label className="text-xs font-normal text-muted-foreground cursor-pointer">
+                      Continue on error
+                    </Label>
+                  </div>
+                </MetaField>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
-    </ActionCard>
+      </ItemSheet>
+    </>
   );
 };
 
@@ -343,6 +422,17 @@ const ActionBody: React.FC<{
         />
       );
     }
+    case "wait_until": {
+      return (
+        <WaitUntilActionBody
+          value={value as WaitUntilInput}
+          onChange={(next) => onChange(next)}
+          variableNodes={variableNodes}
+          completionProvider={expressionCompletion}
+          disabled={disabled}
+        />
+      );
+    }
     case "sequence": {
       return (
         <SequenceActionBody