@checkstack/ui 1.10.0 → 1.12.0

package/src/components/ScriptTestPanel.tsx

@@ -0,0 +1,394 @@
+import React from "react";
+import {
+  Play,
+  ChevronDown,
+  ChevronRight,
+  CheckCircle2,
+  XCircle,
+  FlaskConical,
+} from "lucide-react";
+import { Button } from "./Button";
+import { Badge } from "./Badge";
+import { Input } from "./Input";
+import { Label } from "./Label";
+import { CodeEditor } from "./CodeEditor";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+import {
+  type ScriptTestPanelResult,
+  buildSecretOverrides,
+  distinctSecretNames,
+  formatReturnValue,
+  hasNoOutput,
+  isFailedResult,
+  rejectionResult,
+  validateSampleContextJson,
+} from "./ScriptTestPanel.logic";
+
+/**
+ * Result of a single in-UI script test run. Plugin-agnostic shape mirroring
+ * the backend `testScript` / `testCollectorScript` output so the panel can
+ * be reused by any script field (automation actions, healthcheck collectors,
+ * future surfaces). Re-exported from the pure-logic module so the public
+ * type stays at this path.
+ */
+export type { ScriptTestPanelResult } from "./ScriptTestPanel.logic";
+
+/** Arguments handed to {@link ScriptTestPanelProps.onRun} for a single run. */
+export interface ScriptTestRunArgs {
+  /**
+   * User-supplied per-secret-NAME override VALUES for this run (keyed by the
+   * secret name, never the env var), collected from the optional override
+   * inputs. Omitted when nothing was overridden. These are masked out of the
+   * result server-side and are NEVER the user's real secret — only an
+   * explicit test value the operator typed.
+   */
+  secretOverrides?: Record<string, string>;
+}
+
+export interface ScriptTestPanelProps {
+  /**
+   * Runs the test. The owning feature page supplies this; it typically
+   * calls the plugin's `testScript` RPC with the current script + sample
+   * context (plus any {@link ScriptTestRunArgs.secretOverrides}) and resolves
+   * with the result. Rejecting surfaces as an error.
+   */
+  onRun: (args: ScriptTestRunArgs) => Promise<ScriptTestPanelResult>;
+  /** Disables the Run button (e.g. while the script field is empty). */
+  disabled?: boolean;
+  /**
+   * The script's declared secret → env mapping (`x-secret-env` sibling
+   * field). When non-empty, the panel renders an optional per-secret test
+   * override input so an operator can supply a realistic value for a run.
+   * Real secrets are NEVER resolved in the test path: with no override each
+   * secret is injected as a `__SECRET_<NAME>__` placeholder; an override is
+   * masked out of the captured output. Omit it and no override UI shows.
+   */
+  secretEnv?: Record<string, string>;
+  /**
+   * Editable sample-context slot. Render a {@link ContextSampleEditor} (or
+   * any control) here; the panel just lays it out above the results.
+   */
+  contextEditor?: React.ReactNode;
+  /**
+   * Note shown under the Run button. Defaults to the central-execution
+   * caveat. Pass `null` to hide it.
+   */
+  note?: React.ReactNode;
+  /**
+   * Whether the panel is expanded on first render. Defaults to `false`
+   * so a compact "Test script" affordance shows under every testable
+   * field and the sample-context editor + results only mount on demand.
+   * A successful/failed run auto-expands regardless of this.
+   */
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+const DEFAULT_NOTE =
+  "Runs on the central backend. Real satellite runs may differ.";
+
+/**
+ * Inline script test panel: a Run button plus collapsible results
+ * (return value / stdout / stderr / exit code / duration / error).
+ *
+ * Purely presentational - it owns no RPC. The owning page wires `onRun`
+ * to the appropriate `testScript` mutation. Appears beneath any
+ * `x-script-testable` field via `MultiTypeEditorField`.
+ */
+export const ScriptTestPanel: React.FC<ScriptTestPanelProps> = ({
+  onRun,
+  disabled,
+  secretEnv,
+  contextEditor,
+  note = DEFAULT_NOTE,
+  defaultOpen = false,
+  className,
+}) => {
+  const { isLowPower } = usePerformance();
+  const [running, setRunning] = React.useState(false);
+  // Whole-panel disclosure: collapsed by default so a testable field shows
+  // only a compact "Test script" affordance and the sample-context editor +
+  // results mount on demand. A run forces it open.
+  const [panelOpen, setPanelOpen] = React.useState(defaultOpen);
+  const [resultExpanded, setResultExpanded] = React.useState(true);
+  const [result, setResult] = React.useState<ScriptTestPanelResult | null>(null);
+  // Draft override values keyed by secret NAME. Kept client-side until an
+  // explicit run; an empty draft means "use the placeholder".
+  const [overrideDrafts, setOverrideDrafts] = React.useState<
+    Record<string, string>
+  >({});
+
+  const secretNames = React.useMemo(
+    () => distinctSecretNames(secretEnv),
+    [secretEnv],
+  );
+
+  const handleRun = React.useCallback(async () => {
+    setRunning(true);
+    try {
+      const res = await onRun({
+        secretOverrides: buildSecretOverrides({
+          secretEnv,
+          drafts: overrideDrafts,
+        }),
+      });
+      setResult(res);
+      setResultExpanded(true);
+    } catch (error) {
+      setResult(rejectionResult(error));
+      setResultExpanded(true);
+    } finally {
+      setRunning(false);
+    }
+  }, [onRun, secretEnv, overrideDrafts]);
+
+  const failed = result !== null && isFailedResult(result);
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border/60 bg-muted/20",
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={() => setPanelOpen((prev) => !prev)}
+        className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left"
+        aria-expanded={panelOpen}
+      >
+        <span className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          <FlaskConical className="h-3.5 w-3.5" />
+          Test script
+          {/* When collapsed, surface the last run's outcome as a hint. */}
+          {!panelOpen && result !== null && (
+            <Badge
+              variant={failed ? "destructive" : "secondary"}
+              className="font-normal normal-case"
+            >
+              {failed ? "Failed" : "Success"}
+            </Badge>
+          )}
+        </span>
+        {panelOpen ? (
+          <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="h-4 w-4 shrink-0 text-muted-foreground" />
+        )}
+      </button>
+
+      {panelOpen && (
+        <div className="space-y-3 border-t border-border/60 p-3">
+          <div className="flex items-center justify-end">
+            <Button
+              type="button"
+              size="sm"
+              variant="secondary"
+              onClick={handleRun}
+              disabled={disabled || running}
+            >
+              <Play
+                className={cn(
+                  "h-3.5 w-3.5",
+                  running && !isLowPower && "animate-pulse",
+                )}
+              />
+              {running ? "Running…" : "Run"}
+            </Button>
+          </div>
+
+          {contextEditor}
+
+          {secretNames.length > 0 && (
+            <div className="space-y-2 rounded-md border border-border/60 bg-card p-3">
+              <div className="space-y-0.5">
+                <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                  Secret test overrides
+                </span>
+                <p className="text-xs text-muted-foreground">
+                  Optional. Left empty, each secret is injected as a{" "}
+                  <code className="font-mono">__SECRET_NAME__</code> placeholder.
+                  Any value you type is a test override only — masked from the
+                  output and never your real secret.
+                </p>
+              </div>
+              {secretNames.map((name) => (
+                <div key={name} className="space-y-1">
+                  <Label
+                    htmlFor={`secret-override-${name}`}
+                    className="font-mono text-xs"
+                  >
+                    {name}
+                  </Label>
+                  <Input
+                    id={`secret-override-${name}`}
+                    type="password"
+                    value={overrideDrafts[name] ?? ""}
+                    onChange={(e) =>
+                      setOverrideDrafts((prev) => ({
+                        ...prev,
+                        [name]: e.target.value,
+                      }))
+                    }
+                    placeholder={`__SECRET_${name}__`}
+                    className="font-mono text-sm"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+
+          {note !== null && (
+            <p className="text-xs text-muted-foreground">{note}</p>
+          )}
+
+          {result !== null && (
+            <div className="rounded-md border border-border bg-card">
+              <button
+                type="button"
+                onClick={() => setResultExpanded((prev) => !prev)}
+                className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left"
+              >
+                <span className="flex items-center gap-2 text-sm font-medium">
+                  {failed ? (
+                    <XCircle className="h-4 w-4 text-destructive" />
+                  ) : (
+                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                  )}
+                  {failed ? "Failed" : "Success"}
+                  <Badge variant="secondary" className="font-normal">
+                    {result.durationMs}ms
+                  </Badge>
+                  {result.exitCode !== undefined && (
+                    <Badge variant="secondary" className="font-normal">
+                      exit {result.exitCode}
+                    </Badge>
+                  )}
+                </span>
+                {resultExpanded ? (
+                  <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                )}
+              </button>
+
+              {resultExpanded && (
+                <div className="space-y-3 border-t border-border px-3 py-3">
+                  {result.error !== undefined && (
+                    <ResultBlock
+                      label="Error"
+                      tone="error"
+                      value={result.error}
+                    />
+                  )}
+                  {result.result !== undefined && (
+                    <ResultBlock
+                      label="Return value"
+                      value={formatReturnValue(result.result)}
+                    />
+                  )}
+                  {result.stdout.length > 0 && (
+                    <ResultBlock label="stdout" value={result.stdout} />
+                  )}
+                  {result.stderr.length > 0 && (
+                    <ResultBlock
+                      label="stderr"
+                      tone="error"
+                      value={result.stderr}
+                    />
+                  )}
+                  {hasNoOutput(result) && (
+                    <p className="text-xs italic text-muted-foreground">
+                      No output.
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ResultBlock: React.FC<{
+  label: string;
+  value: string;
+  tone?: "error";
+}> = ({ label, value, tone }) => (
+  <div className="space-y-1">
+    <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+      {label}
+    </span>
+    <pre
+      className={cn(
+        "max-h-48 overflow-auto rounded-md bg-muted/40 p-2 font-mono text-xs whitespace-pre-wrap break-words",
+        tone === "error" && "text-destructive",
+      )}
+    >
+      {value}
+    </pre>
+  </div>
+);
+
+// ─── Context sample editor ──────────────────────────────────────────────────
+
+export interface ContextSampleEditorProps {
+  /** Current sample-context JSON string. */
+  value: string;
+  onChange: (value: string) => void;
+  /** Label above the editor. Defaults to "Sample context". */
+  label?: string;
+  disabled?: boolean;
+  /**
+   * Optional control rendered on the label row, e.g. a "Load from run"
+   * dropdown. The owning page supplies it (it owns the replay RPC); the
+   * editor stays plugin-agnostic and just lays it out.
+   */
+  runPicker?: React.ReactNode;
+}
+
+/**
+ * Editable JSON sample-context editor for the test panel. Auto-seeding
+ * (from the field's schema / IntelliSense context) is the owning page's
+ * job - this component just renders + validates the JSON the user edits.
+ *
+ * Surfaces a parse error inline so an operator can fix malformed JSON
+ * before running. The optional `runPicker` slot lets a page add a "Load
+ * from run" dropdown that overwrites the sample with a real run's scope.
+ */
+export const ContextSampleEditor: React.FC<ContextSampleEditorProps> = ({
+  value,
+  onChange,
+  label = "Sample context",
+  disabled,
+  runPicker,
+}) => {
+  const parseError = React.useMemo(
+    () => validateSampleContextJson(value),
+    [value],
+  );
+
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between gap-3">
+        <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+          {label}
+        </span>
+        {runPicker}
+      </div>
+      <CodeEditor
+        value={value}
+        onChange={onChange}
+        language="json"
+        minHeight="120px"
+        readOnly={disabled}
+      />
+      {parseError !== null && (
+        <p className="text-xs text-destructive">Invalid JSON: {parseError}</p>
+      )}
+    </div>
+  );
+};

package/src/components/Sheet.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
+import { PortalContainerContext } from "./portalContainer";
 
 const Sheet = DialogPrimitive.Root;
 const SheetTrigger = DialogPrimitive.Trigger;
@@ -56,11 +57,23 @@ const SheetContent = React.forwardRef<
   SheetContentProps
 >(({ className, children, size, ...props }, ref) => {
   const { isLowPower } = usePerformance();
+  // Expose the content element so popovers/comboboxes rendered inside the
+  // sheet portal INTO it — otherwise the modal scroll-lock blocks their
+  // internal scrolling (a popover portaled to body is outside the dialog).
+  const [content, setContent] = React.useState<HTMLDivElement | null>(null);
+  const setRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      setContent(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref],
+  );
   return (
     <SheetPortal>
       <SheetOverlay />
       <DialogPrimitive.Content
-        ref={ref}
+        ref={setRefs}
         className={cn(
           sheetContentVariants({ size }),
           "inset-y-0 right-0 h-full",
@@ -70,11 +83,13 @@ const SheetContent = React.forwardRef<
         )}
         {...props}
       >
-        {children}
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        <PortalContainerContext.Provider value={content}>
+          {children}
+          <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        </PortalContainerContext.Provider>
       </DialogPrimitive.Content>
     </SheetPortal>
   );

package/src/components/TemplateInput.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { CodeEditor, type TemplateProperty } from "./CodeEditor";
+import { TemplateValueInput } from "./TemplateValueInput";
+
+/**
+ * Edit mode for a `TemplateInput`. Drives both the rendered widget and
+ * the language passed to the underlying Monaco editor in code modes.
+ *
+ *  - `text` — single-line `<Input>` with `{{` autocomplete
+ *    (`TemplateValueInput`). Cheapest, no Monaco bundle.
+ *  - `code` — full Monaco TypeScript editor. Use for inline scripts.
+ *  - `bash` — Monaco shell editor with optional `shellEnvVars`.
+ *  - `json` / `yaml` — Monaco editor in the matching language. Use for
+ *    structured config bodies that may interpolate `{{ }}`.
+ */
+export type TemplateInputMode = "text" | "code" | "bash" | "json" | "yaml";
+
+export interface TemplateInputProps {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  mode?: TemplateInputMode;
+  placeholder?: string;
+  /**
+   * Template properties surfaced after the user types `{{`. Required for
+   * the picker to do anything; omit to disable autocomplete entirely.
+   */
+  templateProperties?: TemplateProperty[];
+  /** Optional TS declarations injected into Monaco (code mode only). */
+  typeDefinitions?: string;
+  /** Optional shell env-var hints (bash mode only). */
+  shellEnvVars?: Array<{ name: string; description?: string; example?: string }>;
+  /** Min height for code-mode editors. */
+  minHeight?: string;
+  /** Forwarded to the input/editor. */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * High-level template editor. Picks the right underlying widget for the
+ * given `mode` and forwards the standard template-property + type-decl
+ * props through to it.
+ *
+ *  - `mode === "text"` (the default) renders a single-line
+ *    `TemplateValueInput` — the same picker the key/value editor uses.
+ *  - Any code mode delegates to `CodeEditor`, which already runs the
+ *    same `{{` autocomplete inside Monaco plus the shell `$` env-var
+ *    completion provider.
+ *
+ * Wrapping both in one component lets the automation editor render a
+ * single field that switches editor flavour as the user changes the
+ * action's `x-editor-types` annotation, without each action having to
+ * choose its own widget.
+ */
+export const TemplateInput: React.FC<TemplateInputProps> = ({
+  id,
+  value,
+  onChange,
+  mode = "text",
+  placeholder,
+  templateProperties,
+  typeDefinitions,
+  shellEnvVars,
+  minHeight,
+  disabled,
+  className,
+}) => {
+  if (mode === "text") {
+    return (
+      <TemplateValueInput
+        id={id}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        templateProperties={templateProperties}
+        disabled={disabled}
+        className={className}
+      />
+    );
+  }
+
+  const language =
+    mode === "code"
+      ? "typescript"
+      : mode === "bash"
+        ? "shell"
+        : mode;
+
+  return (
+    <CodeEditor
+      id={id}
+      value={value}
+      onChange={onChange}
+      language={language}
+      templateProperties={templateProperties}
+      typeDefinitions={typeDefinitions}
+      shellEnvVars={shellEnvVars}
+      minHeight={minHeight}
+      placeholder={placeholder}
+      readOnly={disabled}
+    />
+  );
+};

package/src/components/TemplateInputToggle.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Code2, X } from "lucide-react";
+import { TemplateValueInput } from "./TemplateValueInput";
+import type { TemplateProperty } from "./CodeEditor";
+
+export interface TemplateInputToggleProps {
+  /**
+   * The typed editor to render when the user has NOT switched to
+   * template mode — typically a `<Input type="number">`, `<Select>`,
+   * `<DateTimePicker>`, etc.
+   *
+   * Render-prop instead of a `ReactNode` so the toggle can wire focus /
+   * disabled state through without imposing a shape on the caller.
+   */
+  renderTyped: (props: { disabled: boolean }) => React.ReactNode;
+  /** Current value (always a string — typed editors serialise to one). */
+  value: string;
+  /** Called whenever the value changes, regardless of mode. */
+  onChange: (value: string) => void;
+  /**
+   * Whether the toggle starts in template mode. The toggle is
+   * uncontrolled by default; pass `templateMode` + `onTemplateModeChange`
+   * to control it externally.
+   */
+  defaultTemplateMode?: boolean;
+  templateMode?: boolean;
+  onTemplateModeChange?: (templateMode: boolean) => void;
+  /** Template properties for the picker (template mode only). */
+  templateProperties?: TemplateProperty[];
+  /** Placeholder shown in template mode. */
+  templatePlaceholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * Wraps a typed input with a small "fx" button that flips the field
+ * into template-input mode. Used in the automation editor wherever an
+ * action config field accepts either a typed literal _or_ a template
+ * — number-of-seconds, dropdown choices, dates — so the operator can
+ * say "this is dynamic at runtime" without changing the schema.
+ *
+ * Behaviour:
+ *
+ *   - Default mode renders `renderTyped()`.
+ *   - Clicking the "fx" pill switches to a `TemplateValueInput` and
+ *     focuses it. The pill turns into an "X" button.
+ *   - Clicking the "X" switches back. The value is preserved across
+ *     toggles — the operator only loses it if they explicitly clear
+ *     the field.
+ *
+ * If the current value starts with `{{`, the toggle infers template
+ * mode automatically when uncontrolled. This handles round-tripping
+ * a previously-saved automation that interpolated this field.
+ */
+export const TemplateInputToggle: React.FC<TemplateInputToggleProps> = ({
+  renderTyped,
+  value,
+  onChange,
+  defaultTemplateMode,
+  templateMode,
+  onTemplateModeChange,
+  templateProperties,
+  templatePlaceholder,
+  disabled,
+  className,
+}) => {
+  const inferredTemplate = value.trim().startsWith("{{");
+  const [internalTemplateMode, setInternalTemplateMode] = React.useState(
+    defaultTemplateMode ?? inferredTemplate,
+  );
+  const isTemplate = templateMode ?? internalTemplateMode;
+  const setIsTemplate = (next: boolean) => {
+    if (templateMode === undefined) setInternalTemplateMode(next);
+    onTemplateModeChange?.(next);
+  };
+
+  return (
+    <div className={`flex items-center gap-1 ${className ?? ""}`.trim()}>
+      <div className="flex-1">
+        {isTemplate ? (
+          <TemplateValueInput
+            value={value}
+            onChange={onChange}
+            placeholder={templatePlaceholder ?? "{{ trigger.payload.value }}"}
+            templateProperties={templateProperties}
+            disabled={disabled}
+            autoFocus
+          />
+        ) : (
+          renderTyped({ disabled: Boolean(disabled) })
+        )}
+      </div>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => setIsTemplate(!isTemplate)}
+        className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded border border-border bg-card text-xs font-mono text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+        aria-label={isTemplate ? "Switch back to typed input" : "Switch to template"}
+        title={isTemplate ? "Switch back to typed input" : "Switch to template"}
+      >
+        {isTemplate ? <X className="h-3 w-3" /> : (
+          <span className="flex items-center gap-0.5">
+            <Code2 className="h-3 w-3" />
+            <span>fx</span>
+          </span>
+        )}
+      </button>
+    </div>
+  );
+};