@checkstack/ui 1.10.0 → 1.12.0

package/src/components/VariablePicker.tsx

@@ -0,0 +1,271 @@
+import React from "react";
+import { ChevronRight, Code2, Search } from "lucide-react";
+import { Input } from "./Input";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+
+/**
+ * One node in the variable scope tree.
+ *
+ * Mirrors `VariableEntry` from `@checkstack/automation-common` — but this
+ * package can't depend on automation-common (UI primitives live below the
+ * automation layer), so the shape is duplicated here. The automation
+ * editor adapts `VariableScope.entries` → `VariableNode[]` at the call
+ * site.
+ */
+export interface VariableNode {
+  /** Canonical dot-separated path, e.g. `artifact.integration-jira.issue.key`. */
+  path: string;
+  /**
+   * Runtime-parseable `{{ }}` insertion form, e.g.
+   * `artifacts["integration-jira.issue"].key`. Inserted in preference to
+   * `path`; callers that don't supply it fall back to `path`.
+   */
+  templateRef?: string;
+  /** Human-readable type label rendered next to the name. */
+  type: string;
+  description?: string;
+  /** Nested entries for object types. */
+  children?: VariableNode[];
+  /**
+   * When set, the entry only exists when one of these triggers fired —
+   * picker renders an "Only when …" hint so the operator knows it might
+   * be undefined at runtime.
+   */
+  conditionalOnTriggers?: string[];
+}
+
+export interface VariablePickerProps {
+  /** Tree of in-scope variables. */
+  scope: VariableNode[];
+  /**
+   * Called with the runtime-parseable text to insert (the node's
+   * `templateRef`, falling back to `path`), e.g.
+   * `trigger.payload.systemId` or `artifacts["integration-jira.issue"].key`.
+   */
+  onSelect: (templateRef: string) => void;
+  /** Optional element rendered as the popover trigger. Defaults to a small "Insert variable" button. */
+  trigger?: React.ReactNode;
+  /** Controls open state; defaults to uncontrolled. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Optional class on the popover content. */
+  contentClassName?: string;
+}
+
+/**
+ * Hierarchical variable picker. Click the trigger button → a popover
+ * opens with the tree of in-scope paths grouped under their parents
+ * (`trigger`, `var`, `artifact`, `repeat`). Each row inserts
+ * `{{ path }}` when clicked. A search input at the top filters across
+ * the whole tree (matches against the dot-path), and matched ancestors
+ * stay expanded so context is preserved.
+ *
+ * Designed for the explicit "fx" / "Insert variable" workflow inside the
+ * automation editor. For inline `{{` autocomplete inside a text field,
+ * use `TemplateValueInput`; for code editors, the `CodeEditor` already
+ * pops the same dropdown through Monaco's completion provider.
+ */
+export const VariablePicker: React.FC<VariablePickerProps> = ({
+  scope,
+  onSelect,
+  trigger,
+  open,
+  onOpenChange,
+  contentClassName,
+}) => {
+  const [query, setQuery] = React.useState("");
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = (next: boolean) => {
+    if (open === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const filtered = React.useMemo(
+    () => (query.trim() ? filterTree(scope, query.trim().toLowerCase()) : scope),
+    [scope, query],
+  );
+
+  const handleSelect = (path: string) => {
+    onSelect(path);
+    setOpen(false);
+    setQuery("");
+  };
+
+  const handleKeyDownOnInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        {trigger ?? (
+          <button
+            type="button"
+            className="inline-flex items-center gap-1 rounded border border-border bg-card px-2 py-1 text-xs font-mono text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            aria-label="Insert variable"
+          >
+            <Code2 className="h-3 w-3" />
+            <span>fx</span>
+          </button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent
+        className={`w-80 p-0 ${contentClassName ?? ""}`.trim()}
+        align="start"
+      >
+        <div className="border-b border-border px-2 py-2">
+          <div className="relative">
+            <Search className="absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              autoFocus
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={handleKeyDownOnInput}
+              placeholder="Filter variables…"
+              className="h-7 pl-7 font-mono text-xs"
+            />
+          </div>
+        </div>
+        <div className="max-h-80 overflow-y-auto py-1">
+          {filtered.length === 0 ? (
+            <p className="px-3 py-4 text-center text-xs text-muted-foreground italic">
+              No matching variables.
+            </p>
+          ) : (
+            filtered.map((node) => (
+              <VariableTreeNode
+                key={node.path}
+                node={node}
+                depth={0}
+                onSelect={handleSelect}
+                forceExpand={query.trim().length > 0}
+              />
+            ))
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+interface VariableTreeNodeProps {
+  node: VariableNode;
+  depth: number;
+  onSelect: (path: string) => void;
+  forceExpand: boolean;
+}
+
+const VariableTreeNode: React.FC<VariableTreeNodeProps> = ({
+  node,
+  depth,
+  onSelect,
+  forceExpand,
+}) => {
+  const [expanded, setExpanded] = React.useState(depth === 0);
+  const isExpanded = forceExpand || expanded;
+  const hasChildren = node.children && node.children.length > 0;
+
+  return (
+    <div>
+      <div
+        className="group flex w-full items-center gap-1 text-xs hover:bg-accent/50"
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+      >
+        {hasChildren ? (
+          <button
+            type="button"
+            onClick={(event) => {
+              event.stopPropagation();
+              setExpanded((v) => !v);
+            }}
+            className="flex h-6 w-4 shrink-0 items-center justify-center rounded hover:bg-accent hover:text-accent-foreground"
+            aria-label={isExpanded ? "Collapse" : "Expand"}
+            aria-expanded={isExpanded}
+          >
+            <ChevronRight
+              className={`h-3 w-3 transition-transform ${
+                isExpanded ? "rotate-90" : ""
+              }`}
+            />
+          </button>
+        ) : (
+          <span className="h-6 w-4 shrink-0" />
+        )}
+        <button
+          type="button"
+          onClick={() => onSelect(node.templateRef ?? node.path)}
+          className="flex flex-1 items-center gap-2 py-1 pr-2 text-left hover:bg-accent hover:text-accent-foreground"
+          title={`Insert {{${node.templateRef ?? node.path}}}`}
+        >
+          <code className="flex-1 truncate font-mono">{leafName(node.path)}</code>
+          <span className="shrink-0 font-mono text-[10px] text-muted-foreground">
+            {node.type}
+          </span>
+        </button>
+      </div>
+      {node.conditionalOnTriggers && node.conditionalOnTriggers.length > 0 && (
+        <p
+          className="px-2 text-[10px] italic text-muted-foreground"
+          style={{ paddingLeft: `${depth * 12 + 24}px` }}
+        >
+          Only when {node.conditionalOnTriggers.join(", ")}
+        </p>
+      )}
+      {node.description && (
+        <p
+          className="px-2 pb-1 text-[10px] text-muted-foreground"
+          style={{ paddingLeft: `${depth * 12 + 24}px` }}
+        >
+          {node.description}
+        </p>
+      )}
+      {hasChildren && isExpanded && (
+        <div>
+          {node.children!.map((child) => (
+            <VariableTreeNode
+              key={child.path}
+              node={child}
+              depth={depth + 1}
+              onSelect={onSelect}
+              forceExpand={forceExpand}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+function leafName(path: string): string {
+  const idx = path.lastIndexOf(".");
+  return idx === -1 ? path : path.slice(idx + 1);
+}
+
+/**
+ * Walk the tree and return a copy that only includes nodes whose path
+ * (or any descendant's path) contains the query. Matched ancestors are
+ * kept so the tree structure is preserved.
+ */
+function filterTree(
+  nodes: VariableNode[],
+  query: string,
+): VariableNode[] {
+  const out: VariableNode[] = [];
+  for (const node of nodes) {
+    const selfMatch = node.path.toLowerCase().includes(query);
+    const childMatches = node.children
+      ? filterTree(node.children, query)
+      : undefined;
+    if (selfMatch || (childMatches && childMatches.length > 0)) {
+      out.push({
+        ...node,
+        children: childMatches,
+      });
+    }
+  }
+  return out;
+}

package/src/components/comboboxInteraction.ts

@@ -0,0 +1,39 @@
+/**
+ * Marker attribute placed on a combobox's anchor `<input>` so a Radix
+ * `PopoverContent`'s dismissable layer can recognize an interaction that
+ * originated on the anchor itself.
+ *
+ * Radix treats the anchor as "outside" the floating content, so the very
+ * click/focus that opens the list also fires `onPointerDownOutside` /
+ * `onFocusOutside` and dismisses it on the same frame (the "opens then
+ * immediately closes" flicker). Guarding those handlers against anchor-origin
+ * events keeps the list open.
+ *
+ * Usage (see `PackageNameCombobox` / `SecretEnvEditor`):
+ *   1. Spread {@link comboboxAnchorProps} onto the anchor `<input>`.
+ *   2. On `PopoverContent`, in both `onPointerDownOutside` and
+ *      `onFocusOutside`, call `event.preventDefault()` when
+ *      {@link isAnchorInteraction} matches the event target.
+ *   3. Prevent `onCloseAutoFocus` default.
+ *   4. Option buttons use `onMouseDown` + `preventDefault` so a click selects
+ *      before the input blurs.
+ *
+ * Lives in `@checkstack/ui` so every combobox (across plugins) shares one
+ * implementation.
+ */
+export const COMBOBOX_ANCHOR_ATTR = "data-combobox-anchor";
+
+/** Props to spread onto the anchor `<input>` so {@link isAnchorInteraction} can match it. */
+export const comboboxAnchorProps: Record<string, string> = {
+  [COMBOBOX_ANCHOR_ATTR]: "",
+};
+
+/**
+ * Whether an event target is (or is inside) a combobox anchor input. Pure +
+ * DOM-only so it is unit-testable without a React render. Tolerates a null
+ * target and non-Element targets (returns false).
+ */
+export function isAnchorInteraction(target: EventTarget | null): boolean {
+  if (!target || !(target instanceof Element)) return false;
+  return target.closest(`[${COMBOBOX_ANCHOR_ATTR}]`) !== null;
+}

package/src/components/portalContainer.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+/**
+ * The DOM element a floating layer (e.g. a {@link PopoverContent}) should
+ * portal INTO when it is rendered inside a modal Sheet/Dialog.
+ *
+ * Radix modal dialogs lock body scroll via `react-remove-scroll`, which
+ * prevents wheel/touch scrolling on anything portaled to `document.body`
+ * (i.e. outside the dialog's DOM subtree). A Popover whose list overflows
+ * therefore can't scroll while a Sheet/Dialog is open. Portaling the Popover
+ * INTO the dialog content keeps it inside the allowed-scroll subtree, so its
+ * inner `overflow-y-auto` works again. Radix positions popovers with
+ * `position: fixed`, so the container has no effect on placement or clipping.
+ *
+ * `null` (the default, outside any Sheet/Dialog) means portal to `body` as
+ * usual.
+ */
+export const PortalContainerContext = React.createContext<HTMLElement | null>(
+  null,
+);
+
+/** Read the nearest Sheet/Dialog content element to portal a popover into. */
+export const usePortalContainer = (): HTMLElement | null =>
+  React.useContext(PortalContainerContext);

package/src/hooks/useInitOnceForKey.test.ts

@@ -124,4 +124,31 @@ describe("shouldInitForKey", () => {
       shouldInitForKey({ value: "any", key: "1", initialisedKey: 1 }),
     ).toBe(true);
   });
+
+  it("does not seed from a stale cache entry served on mount, only from a post-mount fetch", () => {
+    // Regression for the automation editor: another page observes the same
+    // `getAutomation` cache key without `gcTime: 0`, so a stale (pre-edit)
+    // entry can be served instantly on reopen. The call site gates `value` on
+    // `isFetchedAfterMount`, so until a fresh fetch lands it passes `undefined`
+    // and we must NOT seed the stale value (which would revert edits such as a
+    // renamed trigger id back to its auto-generated default).
+    const staleCacheBeforeFreshFetch = undefined; // isFetchedAfterMount === false
+    expect(
+      shouldInitForKey({
+        value: staleCacheBeforeFreshFetch,
+        key: "auto-1",
+        initialisedKey: undefined,
+      }),
+    ).toBe(false);
+
+    // Once the post-mount fetch resolves, the caller passes the fresh value and
+    // the one-shot init fires with server-truth data.
+    expect(
+      shouldInitForKey({
+        value: { name: "A", definition: { triggers: [{ id: "majors" }] } },
+        key: "auto-1",
+        initialisedKey: undefined,
+      }),
+    ).toBe(true);
+  });
 });

package/src/hooks/useInitOnceForKey.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useState } from "react";
 
 /**
  * Pure decision function powering {@link useInitOnceForKey}. Extracted so
@@ -52,8 +52,15 @@ export function shouldInitForKey({
  *  - Skips initialisation entirely while either `value` or `key` is
  *    `undefined`/`null`.
  *
- * `onInit` is read from a ref so callers can safely pass a fresh closure
- * each render without re-firing the effect.
+ * Seeding runs **during render** (not in a `useEffect`). This is deliberate:
+ * the app is wrapped in `<StrictMode>`, which double-mounts components and
+ * **discards a `setState` scheduled from an effect** when the source query
+ * resolves synchronously — e.g. a warm react-query cache on reopen. That made
+ * the one-shot init silently no-op, reverting seeded form state (a renamed id
+ * snapping back to its default, etc.) while a cold-cache first open worked.
+ * Seeding during render with a state guard is React's recommended
+ * "adjust state when data changes" pattern and is immune to that race. `onInit`
+ * must therefore be pure aside from calling this component's state setters.
  *
  * @example
  *   useInitOnceForKey(existingConfig, existingConfig?.id, (config) => {
@@ -68,20 +75,16 @@ export function useInitOnceForKey<T>(
   key: string | number | null | undefined,
   onInit: (value: T) => void,
 ): void {
-  const initialisedKeyRef = useRef<string | number | null | undefined>(undefined);
-  const onInitRef = useRef(onInit);
+  const [initialisedKey, setInitialisedKey] =
+    useState<string | number | null | undefined>();
 
-  // Keep the latest callback in a ref so a fresh closure each render doesn't
-  // re-trigger the effect; only `value` and `key` should drive it.
-  useEffect(() => {
-    onInitRef.current = onInit;
-  });
-
-  useEffect(() => {
-    if (!shouldInitForKey({ value, key, initialisedKey: initialisedKeyRef.current })) {
-      return;
-    }
-    initialisedKeyRef.current = key;
-    onInitRef.current(value as T);
-  }, [value, key]);
+  if (shouldInitForKey({ value, key, initialisedKey })) {
+    // Setting state + invoking `onInit` (which sets this component's state)
+    // during render is the supported "store info from previous renders"
+    // pattern: React restarts this component's render with the new state
+    // before committing, and the `initialisedKey` guard makes it idempotent
+    // (no loop; background refetches of the same key are ignored).
+    setInitialisedKey(key);
+    onInit(value as T);
+  }
 }

package/src/index.ts

@@ -41,6 +41,8 @@ export * from "./components/Pagination";
 export * from "./components/PaginatedList";
 export * from "./hooks/usePagination";
 export * from "./components/DateTimePicker";
+export * from "./components/DurationInput";
+export * from "./components/TimeOfDayInput";
 export * from "./components/DateRangeFilter";
 export * from "./components/BackLink";
 export * from "./components/StatusUpdateTimeline";
@@ -56,12 +58,19 @@ export * from "./components/TerminalFeed";
 export * from "./components/PerformanceProvider";
 export * from "./components/AmbientBackground";
 export * from "./components/CodeEditor";
+export * from "./components/TemplateValueInput";
+export * from "./components/VariablePicker";
+export * from "./components/TemplateInput";
+export * from "./components/TemplateInputToggle";
+export * from "./components/ActionCard";
+export * from "./components/ScriptTestPanel";
 export * from "./components/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";
 export * from "./components/MetricTile";
 export * from "./components/Sheet";
 export * from "./components/Popover";
+export * from "./components/comboboxInteraction";
 export * from "./hooks/useIsMobile";
 export * from "./hooks/useInitOnceForKey";
 export * from "./components/ListEmptyState";

package/stories/ActionCard.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { ActionCard } from "../src/components/ActionCard";
+
+const meta: Meta<typeof ActionCard> = {
+  title: "Components/Automation/ActionCard",
+  component: ActionCard,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Collapsible card that hosts a single action in the visual automation editor.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionCard>;
+
+const FullFeaturedDemo = () => {
+  const [enabled, setEnabled] = useState(true);
+  return (
+    <div className="w-[680px] p-4">
+      <ActionCard
+        id="notify-1"
+        title="Notify User"
+        description="Send a transactional notification to a specific operator."
+        category="Notification"
+        icon="Bell"
+        enabled={enabled}
+        onEnabledChange={setEnabled}
+        onDelete={() => alert("Delete clicked")}
+        badges={[{ label: "produces: notify_user_result", variant: "secondary" }]}
+      >
+        <div className="space-y-2 text-sm">
+          <p className="text-muted-foreground">
+            (DynamicForm or per-action config UI goes here.)
+          </p>
+          <code className="block font-mono text-xs">userId, title, body</code>
+        </div>
+      </ActionCard>
+    </div>
+  );
+};
+
+export const FullFeatured: Story = {
+  render: () => <FullFeaturedDemo />,
+};
+
+export const MinimalNoToggle: Story = {
+  render: () => (
+    <div className="w-[680px] p-4">
+      <ActionCard id="log-1" title="Log" icon="FileText">
+        <p className="text-sm text-muted-foreground">
+          Write a single line to the run logger.
+        </p>
+      </ActionCard>
+    </div>
+  ),
+};
+
+/**
+ * Home-Assistant-style collapsed summary row. Passing `onOpenSheet` makes the
+ * card a non-expanding summary: clicking the header opens the item's full
+ * config in a side sheet (wired up by the host) instead of expanding inline.
+ * `summary` renders a compact one-line hint under the title, and `actions`
+ * adds a three-dot overflow menu (Duplicate / Disable / Delete).
+ */
+const CollapsedSummaryDemo = () => {
+  const [enabled, setEnabled] = useState(true);
+  return (
+    <div className="w-[680px] space-y-2 p-4">
+      <ActionCard
+        id="notify-1"
+        title="Notify User"
+        category="Notification"
+        icon="Bell"
+        summary="notify_user → on-call engineer"
+        enabled={enabled}
+        onOpenSheet={() => alert("Open config sheet")}
+        actions={[
+          {
+            label: enabled ? "Disable" : "Enable",
+            icon: enabled ? "PowerOff" : "Power",
+            onClick: () => setEnabled((value) => !value),
+          },
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+      <ActionCard
+        id="choose-1"
+        title="Choose (if / else)"
+        category="Choose"
+        icon="GitBranch"
+        summary="2 branches + else"
+        onOpenSheet={() => alert("Open config sheet")}
+        errors={["choose.0.when: condition is required"]}
+        actions={[
+          { label: "Duplicate", icon: "Copy", onClick: () => alert("Duplicate") },
+          {
+            label: "Delete",
+            icon: "Trash2",
+            onClick: () => alert("Delete"),
+            variant: "destructive",
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const CollapsedSummary: Story = {
+  render: () => <CollapsedSummaryDemo />,
+};

package/stories/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import { CircleAlert, CircleCheck, Info, AlertTriangle } from "lucide-react";
 import {
   Alert,
   AlertContent,
@@ -28,7 +28,7 @@ export const Default: Story = {
   render: (args) => (
     <Alert {...args}>
       <AlertIcon>
-        <Info className="h-4 w-4" />
+        <Info className="w-4 h-4" />
       </AlertIcon>
       <AlertContent>
         <AlertTitle>Heads up</AlertTitle>
@@ -45,7 +45,7 @@ export const Success: Story = {
   render: (args) => (
     <Alert {...args}>
       <AlertIcon>
-        <CircleCheck className="h-4 w-4" />
+        <CircleCheck className="w-4 h-4" />
       </AlertIcon>
       <AlertContent>
         <AlertTitle>Saved</AlertTitle>
@@ -60,7 +60,7 @@ export const Warning: Story = {
   render: (args) => (
     <Alert {...args}>
       <AlertIcon>
-        <TriangleAlert className="h-4 w-4" />
+        <AlertTriangle className="w-4 h-4" />
       </AlertIcon>
       <AlertContent>
         <AlertTitle>Heads up</AlertTitle>
@@ -77,7 +77,7 @@ export const Error: Story = {
   render: (args) => (
     <Alert {...args}>
       <AlertIcon>
-        <CircleAlert className="h-4 w-4" />
+        <CircleAlert className="w-4 h-4" />
       </AlertIcon>
       <AlertContent>
         <AlertTitle>Something went wrong</AlertTitle>

package/stories/CodeEditor.stories.tsx

@@ -14,9 +14,11 @@ type Story = StoryObj<typeof CodeEditor>;
 const Demo = ({
   language,
   initial,
+  minHeight = "280px",
 }: {
-  language: "json" | "yaml" | "javascript";
+  language: "json" | "yaml" | "javascript" | "typescript" | "shell";
   initial: string;
+  minHeight?: string;
 }) => {
   const [value, setValue] = useState(initial);
   return (
@@ -24,7 +26,7 @@ const Demo = ({
       value={value}
       onChange={setValue}
       language={language}
-      minHeight="280px"
+      minHeight={minHeight}
     />
   );
 };
@@ -65,3 +67,46 @@ export default async function check({ fetch }) {
     />
   ),
 };
+
+/**
+ * The top-right "Expand editor" affordance opens the same editor in a large
+ * full-screen overlay. The inline editor here is deliberately short so the
+ * value of expanding a long script is obvious; both editors share the same
+ * value, so edits made in the overlay persist after closing it.
+ */
+export const Popout: Story = {
+  render: () => (
+    <Demo
+      language="typescript"
+      minHeight="120px"
+      initial={`// A longer script - click the expand icon (top-right) to edit it in a
+// comfortable full-screen overlay. Edits sync back to the inline editor.
+import { setTimeout as sleep } from "node:timers/promises";
+
+export default async function run({ context }) {
+  for (let attempt = 1; attempt <= 5; attempt += 1) {
+    const res = await fetch(context.url);
+    if (res.ok) {
+      return { ok: true, attempt };
+    }
+    await sleep(1000 * attempt);
+  }
+  return { ok: false };
+}`}
+    />
+  ),
+};
+
+/** Shell scripts get a "Edit script - Shell" overlay title. */
+export const Shell: Story = {
+  render: () => (
+    <Demo
+      language="shell"
+      minHeight="120px"
+      initial={`#!/usr/bin/env bash
+set -euo pipefail
+
+curl -fsS "$TARGET_URL" > /dev/null && echo "up" || echo "down"`}
+    />
+  ),
+};