@checkstack/ui 1.11.0 → 1.13.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/Spinner.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Loader2 } from "lucide-react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
+
+const sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6",
+} as const;
+
+export interface SpinnerProps
+  extends Omit<React.ComponentProps<typeof Loader2>, "ref"> {
+  /**
+   * Visual size of the spinner. Defaults to `sm` (`h-4 w-4`), the dominant
+   * inline-in-button need.
+   */
+  size?: keyof typeof sizeClasses;
+  className?: string;
+}
+
+/**
+ * Spinner - a small INLINE loading indicator (e.g. next to button text or in a
+ * table cell). For a centered full-block loader, use `LoadingSpinner` instead.
+ *
+ * The `animate-spin` class is gated INTERNALLY behind
+ * `usePerformance().isLowPower`: on low-power devices the icon renders static
+ * (no spin), satisfying `.claude/rules/performance.md` so call sites inherit the
+ * guard without re-implementing it.
+ *
+ * Accessibility: decorative by default (`aria-hidden`), for the common case of
+ * sitting next to visible text like "Saving...". Pass `aria-label` to announce
+ * it on its own; that switches the icon to `role="status"` and drops
+ * `aria-hidden`.
+ */
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = "sm",
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const { isLowPower } = usePerformance();
+
+  const accessibility =
+    ariaLabel === undefined
+      ? { "aria-hidden": true }
+      : { "aria-label": ariaLabel, role: "status" as const };
+
+  return (
+    <Loader2
+      className={cn(!isLowPower && "animate-spin", sizeClasses[size], className)}
+      {...accessibility}
+      {...props}
+    />
+  );
+};

package/src/components/StatusBadge.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export type StatusTone = "ok" | "warn" | "error" | "info" | "neutral";
+
+const toneClass: Record<StatusTone, string> = {
+  ok: "bg-success/10 text-success",
+  warn: "bg-warning/10 text-warning",
+  error: "bg-destructive/10 text-destructive",
+  info: "bg-info/10 text-info",
+  neutral: "bg-secondary text-secondary-foreground",
+};
+
+/**
+ * Severity sort order via CSS flex `order`, so the most urgent signal always
+ * sits left regardless of plugin registration order: error (red) -> warn
+ * (yellow) -> info -> neutral -> ok. Only takes effect when badges share a
+ * flex container (every `SystemStateBadgesSlot` render site wraps them in one).
+ */
+const orderClass: Record<StatusTone, string> = {
+  error: "order-1",
+  warn: "order-2",
+  info: "order-3",
+  neutral: "order-4",
+  ok: "order-5",
+};
+
+export interface StatusBadgeProps {
+  /** Severity tone driving the (subtle, tinted) color. */
+  tone: StatusTone;
+  /** Lucide-style icon component. */
+  icon: React.ComponentType<{ className?: string }>;
+  /** Full description: shown on hover/focus and exposed to assistive tech. */
+  label: string;
+  className?: string;
+}
+
+/**
+ * A compact, uniform status symbol: a small tinted chip holding an icon, with
+ * the full label revealed on hover/focus (and via `aria-label`). All system
+ * state badges (health, incident, SLO, maintenance, anomaly, dependency) render
+ * through this so a system's status reads as a tidy, consistent row of icons
+ * instead of a stack of differently-styled text pills.
+ */
+export const StatusBadge: React.FC<StatusBadgeProps> = ({
+  tone,
+  icon: Icon,
+  label,
+  className,
+}) => {
+  return (
+    <span
+      className={cn(
+        "group/status-badge relative inline-flex shrink-0",
+        orderClass[tone],
+        className,
+      )}
+    >
+      <span
+        role="img"
+        aria-label={label}
+        tabIndex={0}
+        className={cn(
+          "inline-flex size-6 items-center justify-center rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          toneClass[tone],
+        )}
+      >
+        <Icon className="h-3.5 w-3.5" />
+      </span>
+      <span
+        role="tooltip"
+        className="pointer-events-none invisible absolute bottom-full left-1/2 z-[100] mb-1.5 -translate-x-1/2 whitespace-nowrap rounded border border-border bg-popover px-2 py-1 text-xs text-popover-foreground opacity-0 shadow-lg transition-opacity group-hover/status-badge:visible group-hover/status-badge:opacity-100 group-focus-within/status-badge:visible group-focus-within/status-badge:opacity-100"
+      >
+        {label}
+      </span>
+    </span>
+  );
+};

package/src/components/StrategyConfigCard.tsx

@@ -6,7 +6,7 @@ import { Badge, type BadgeProps } from "./Badge";
 import { Toggle } from "./Toggle";
 import { DynamicForm } from "./DynamicForm";
 import type { OptionsResolver } from "./DynamicForm/types";
-import { DynamicIcon, type LucideIconName } from "./DynamicIcon";
+import { DynamicIcon, type IconName } from "./DynamicIcon";
 import { MarkdownBlock } from "./Markdown";
 import { cn } from "../utils";
 
@@ -38,8 +38,8 @@ export interface StrategyConfigCardData {
   displayName: string;
   /** Optional description shown below the title */
   description?: string;
-  /** Lucide icon name in PascalCase (e.g., 'AlertCircle', 'HeartPulse') */
-  icon?: LucideIconName;
+  /** Icon name in PascalCase - a lucide icon or a vendored brand icon. */
+  icon?: IconName;
   /** Whether the strategy is currently enabled */
   enabled: boolean;
 }

package/src/components/Tabs.tsx

@@ -1,4 +1,6 @@
 import React, { useRef } from "react";
+import { cn } from "../utils";
+import { usePerformance } from "./PerformanceProvider";
 
 export interface TabItem {
   id: string;
@@ -126,13 +128,17 @@ export const TabPanel: React.FC<TabPanelProps> = ({
   className = "",
 }) => {
   const isActive = activeTab === id;
+  const { isLowPower } = usePerformance();
 
   return isActive ? (
     <div
       id={`tabpanel-${id}`}
       role="tabpanel"
       aria-labelledby={`tab-${id}`}
-      className={`animate-in fade-in-0 duration-200 ${className}`}
+      className={cn(
+        !isLowPower && "animate-in fade-in-0 duration-200",
+        className,
+      )}
     >
       {children}
     </div>