@checkstack/ui 1.10.0 → 1.11.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/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

@@ -56,6 +56,11 @@ 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/AnimatedNumber";
 export * from "./hooks/useAnimatedNumber";
 export * from "./components/IDELayout";

package/stories/ActionCard.stories.tsx

@@ -0,0 +1,62 @@
+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>
+  ),
+};

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/TemplateInputToggle.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TemplateInputToggle } from "../src/components/TemplateInputToggle";
+import { Input } from "../src/components/Input";
+
+const meta: Meta<typeof TemplateInputToggle> = {
+  title: "Components/Automation/TemplateInputToggle",
+  component: TemplateInputToggle,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Wraps a typed input with an "fx" button. Click it to switch into template mode and back.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateInputToggle>;
+
+const NumberFieldDemo = () => {
+  const [value, setValue] = useState("30");
+  return (
+    <div className="w-96 p-4">
+      <TemplateInputToggle
+        value={value}
+        onChange={setValue}
+        renderTyped={({ disabled }) => (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={disabled}
+          />
+        )}
+        templateProperties={[
+          { path: "trigger.payload.timeoutSeconds", type: "number" },
+          { path: "var.delay", type: "number" },
+        ]}
+        templatePlaceholder="{{ trigger.payload.timeoutSeconds }}"
+      />
+    </div>
+  );
+};
+
+const StartsInTemplateModeDemo = () => {
+  const [value, setValue] = useState("{{ trigger.payload.timeoutSeconds }}");
+  return (
+    <div className="w-96 p-4">
+      <TemplateInputToggle
+        value={value}
+        onChange={setValue}
+        renderTyped={({ disabled }) => (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={disabled}
+          />
+        )}
+        templateProperties={[
+          { path: "trigger.payload.timeoutSeconds", type: "number" },
+        ]}
+      />
+    </div>
+  );
+};
+
+export const NumberField: Story = {
+  render: () => <NumberFieldDemo />,
+};
+
+export const StartsInTemplateMode: Story = {
+  render: () => <StartsInTemplateModeDemo />,
+};

package/stories/TemplateValueInput.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { TemplateValueInput } from "../src/components/TemplateValueInput";
+import type { TemplateProperty } from "../src/components/CodeEditor";
+
+const meta: Meta<typeof TemplateValueInput> = {
+  title: "Components/Automation/TemplateValueInput",
+  component: TemplateValueInput,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Single-line input with `{{` template autocomplete. Type `{{` to open the picker.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateValueInput>;
+
+const sampleProperties: TemplateProperty[] = [
+  { path: "trigger.event", type: "string", description: "Event id." },
+  { path: "trigger.payload.incidentId", type: "string" },
+  { path: "trigger.payload.title", type: "string" },
+  { path: "trigger.payload.severity", type: '"low" | "high"' },
+  { path: "var.outer", type: "string" },
+  { path: "artifact.jira.issue.key", type: "string" },
+];
+
+const WithPropertiesDemo = () => {
+  const [value, setValue] = useState("Title: ");
+  return (
+    <div className="w-96 p-4">
+      <TemplateValueInput
+        value={value}
+        onChange={setValue}
+        placeholder="Type {{ to insert a variable…"
+        templateProperties={sampleProperties}
+      />
+    </div>
+  );
+};
+
+const NoPropertiesDemo = () => {
+  const [value, setValue] = useState("");
+  return (
+    <div className="w-96 p-4">
+      <TemplateValueInput
+        value={value}
+        onChange={setValue}
+        placeholder="No template autocomplete here"
+      />
+    </div>
+  );
+};
+
+export const WithProperties: Story = {
+  render: () => <WithPropertiesDemo />,
+};
+
+export const NoProperties: Story = {
+  render: () => <NoPropertiesDemo />,
+};