@checkstack/ui 1.11.0 → 1.12.0

package/src/components/Popover.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../utils";
 import { usePerformance } from "./PerformanceProvider";
+import { usePortalContainer } from "./portalContainer";
 
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
@@ -17,8 +18,12 @@ const PopoverContent = React.forwardRef<
   PopoverContentProps
 >(({ className, align = "end", sideOffset = 8, ...props }, ref) => {
   const { isLowPower } = usePerformance();
+  // When inside a modal Sheet/Dialog, portal into its content so the dialog's
+  // scroll-lock doesn't block this popover's internal scroll. Outside a
+  // Sheet/Dialog the container is null and Radix portals to `body` as usual.
+  const portalContainer = usePortalContainer();
   return (
-    <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
       <PopoverPrimitive.Content
         ref={ref}
         align={align}

package/src/components/ScriptTestPanel.logic.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, test } from "bun:test";
+import {
+  buildSecretOverrides,
+  distinctSecretNames,
+  formatReturnValue,
+  hasNoOutput,
+  isFailedResult,
+  rejectionResult,
+  validateSampleContextJson,
+  type ScriptTestPanelResult,
+} from "./ScriptTestPanel.logic";
+
+const base: ScriptTestPanelResult = {
+  stdout: "",
+  stderr: "",
+  durationMs: 10,
+  timedOut: false,
+};
+
+describe("isFailedResult", () => {
+  test("a clean result is not a failure", () => {
+    expect(isFailedResult({ ...base, result: { ok: true } })).toBe(false);
+  });
+  test("an error result is a failure", () => {
+    expect(isFailedResult({ ...base, error: "boom" })).toBe(true);
+  });
+  test("a timed-out result is a failure", () => {
+    expect(isFailedResult({ ...base, timedOut: true })).toBe(true);
+  });
+});
+
+describe("formatReturnValue", () => {
+  test("pretty-prints an object", () => {
+    expect(formatReturnValue({ a: 1 })).toBe('{\n  "a": 1\n}');
+  });
+  test("renders undefined explicitly", () => {
+    expect(formatReturnValue(undefined)).toBe("undefined");
+  });
+  test("falls back to String() for non-serialisable values", () => {
+    const circular: Record<string, unknown> = {};
+    circular.self = circular;
+    expect(formatReturnValue(circular)).toBe("[object Object]");
+  });
+});
+
+describe("hasNoOutput", () => {
+  test("true when nothing was produced", () => {
+    expect(hasNoOutput(base)).toBe(true);
+  });
+  test("false when there is a return value", () => {
+    expect(hasNoOutput({ ...base, result: null })).toBe(false);
+  });
+  test("false when there is stdout", () => {
+    expect(hasNoOutput({ ...base, stdout: "hi" })).toBe(false);
+  });
+  test("false when there is an error", () => {
+    expect(hasNoOutput({ ...base, error: "x" })).toBe(false);
+  });
+});
+
+describe("validateSampleContextJson", () => {
+  test("empty value is valid (null)", () => {
+    expect(validateSampleContextJson("   ")).toBeNull();
+  });
+  test("valid JSON is valid (null)", () => {
+    expect(validateSampleContextJson('{"a":1}')).toBeNull();
+  });
+  test("malformed JSON returns a message", () => {
+    expect(validateSampleContextJson("{ not json")).not.toBeNull();
+  });
+});
+
+describe("rejectionResult", () => {
+  test("wraps a thrown Error into a failure result", () => {
+    const r = rejectionResult(new Error("network down"));
+    expect(r.error).toBe("network down");
+    expect(isFailedResult(r)).toBe(true);
+    expect(r.timedOut).toBe(false);
+  });
+});
+
+describe("distinctSecretNames", () => {
+  test("returns [] for an absent or empty mapping", () => {
+    expect(distinctSecretNames(undefined)).toEqual([]);
+    expect(distinctSecretNames({})).toEqual([]);
+  });
+
+  test("extracts distinct secret names from templates, first-seen order", () => {
+    expect(
+      distinctSecretNames({
+        API_TOKEN: "${{ secrets.jira_token }}",
+        DB: "${{ secrets.db_pass }}",
+        ALSO: "${{ secrets.jira_token }}",
+      }),
+    ).toEqual(["jira_token", "db_pass"]);
+  });
+
+  test("tolerates a legacy bare secret name as a value", () => {
+    expect(distinctSecretNames({ secret: "SECRET" })).toEqual(["SECRET"]);
+  });
+
+  test("ignores values that are neither a template nor a bare name", () => {
+    expect(distinctSecretNames({ X: "not a name" })).toEqual([]);
+  });
+});
+
+describe("buildSecretOverrides", () => {
+  const secretEnv = {
+    API_TOKEN: "${{ secrets.jira_token }}",
+    DB: "${{ secrets.db_pass }}",
+  };
+
+  test("returns undefined when no draft is filled", () => {
+    expect(
+      buildSecretOverrides({ secretEnv, drafts: {} }),
+    ).toBeUndefined();
+    expect(
+      buildSecretOverrides({ secretEnv, drafts: { jira_token: "" } }),
+    ).toBeUndefined();
+  });
+
+  test("keeps only filled drafts for referenced names", () => {
+    expect(
+      buildSecretOverrides({
+        secretEnv,
+        drafts: { jira_token: "abc", db_pass: "" },
+      }),
+    ).toEqual({ jira_token: "abc" });
+  });
+
+  test("drops drafts for names not referenced by the mapping", () => {
+    expect(
+      buildSecretOverrides({
+        secretEnv,
+        drafts: { jira_token: "abc", stale: "leak" },
+      }),
+    ).toEqual({ jira_token: "abc" });
+  });
+});

package/src/components/ScriptTestPanel.logic.ts

@@ -0,0 +1,137 @@
+import { extractErrorMessage } from "@checkstack/common";
+
+/**
+ * Pure logic for the script-test panel, extracted so it can be unit-tested
+ * without rendering Monaco. The React component in `ScriptTestPanel.tsx`
+ * consumes these.
+ */
+
+/** Result of a single in-UI script test run (UI-side shape). */
+export interface ScriptTestPanelResult {
+  result?: unknown;
+  stdout: string;
+  stderr: string;
+  exitCode?: number;
+  durationMs: number;
+  timedOut: boolean;
+  error?: string;
+}
+
+/** A run is a failure if it errored or timed out. */
+export function isFailedResult(result: ScriptTestPanelResult): boolean {
+  return result.error !== undefined || result.timedOut;
+}
+
+/** Pretty-print a script's return value for display. */
+export function formatReturnValue(value: unknown): string {
+  if (value === undefined) return "undefined";
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+
+/**
+ * True when a result has nothing to show in the detail body (no error,
+ * no return value, no stdout/stderr) - the panel shows "No output." then.
+ */
+export function hasNoOutput(result: ScriptTestPanelResult): boolean {
+  return (
+    result.error === undefined &&
+    result.result === undefined &&
+    result.stdout.length === 0 &&
+    result.stderr.length === 0
+  );
+}
+
+/**
+ * Validate the editable sample-context JSON. Returns the parse error
+ * message, or `null` when the value is empty or valid JSON.
+ */
+export function validateSampleContextJson(value: string): string | null {
+  if (value.trim().length === 0) return null;
+  try {
+    JSON.parse(value);
+    return null;
+  } catch (error) {
+    return extractErrorMessage(error, "Invalid JSON");
+  }
+}
+
+/** Build the failure result the panel shows when `onRun` rejects. */
+export function rejectionResult(error: unknown): ScriptTestPanelResult {
+  return {
+    stdout: "",
+    stderr: "",
+    durationMs: 0,
+    timedOut: false,
+    error: extractErrorMessage(error),
+  };
+}
+
+// ─── Secret-env test overrides ──────────────────────────────────────────────
+
+const SECRET_TEMPLATE_RE = /\$\{\{\s*secrets\.([a-zA-Z0-9_-]+)\s*\}\}/g;
+// A mapping value may legacy-carry a bare secret name instead of a template.
+const BARE_SECRET_NAME_RE = /^\s*([a-zA-Z][a-zA-Z0-9_-]*)\s*$/;
+
+/**
+ * Derive the set of distinct secret NAMES referenced by a `secretEnv`
+ * mapping (`{ ENV_NAME: "${{ secrets.NAME }}" }`). Tolerates a legacy bare
+ * secret name as a value too. Order-stable (first-seen) so the override UI
+ * renders deterministically. Returns `[]` when the mapping is absent/empty.
+ */
+export function distinctSecretNames(
+  secretEnv: Record<string, string> | undefined,
+): string[] {
+  if (!secretEnv) return [];
+  const seen = new Set<string>();
+  const out: string[] = [];
+  const add = (name: string) => {
+    if (!seen.has(name)) {
+      seen.add(name);
+      out.push(name);
+    }
+  };
+  for (const value of Object.values(secretEnv)) {
+    SECRET_TEMPLATE_RE.lastIndex = 0;
+    let matched = false;
+    let match: RegExpExecArray | null;
+    while ((match = SECRET_TEMPLATE_RE.exec(value)) !== null) {
+      matched = true;
+      add(match[1]);
+    }
+    if (!matched) {
+      const bare = BARE_SECRET_NAME_RE.exec(value);
+      if (bare) add(bare[1]);
+    }
+  }
+  return out;
+}
+
+/**
+ * Build the `secretOverrides` payload sent to the test endpoint from the
+ * user's per-secret-NAME draft inputs. Drops blank entries (an empty
+ * override means "use the placeholder") and keeps only names actually
+ * referenced by the mapping, so a stale draft can't inject an unreferenced
+ * value. Returns `undefined` when nothing is overridden so the wire stays
+ * clean.
+ */
+export function buildSecretOverrides({
+  secretEnv,
+  drafts,
+}: {
+  secretEnv: Record<string, string> | undefined;
+  drafts: Record<string, string>;
+}): Record<string, string> | undefined {
+  const names = distinctSecretNames(secretEnv);
+  const out: Record<string, string> = {};
+  for (const name of names) {
+    const value = drafts[name];
+    if (value !== undefined && value.length > 0) {
+      out[name] = value;
+    }
+  }
+  return Object.keys(out).length > 0 ? out : undefined;
+}

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>
+  );
+};