@checkstack/ui 1.10.0 → 1.12.0

package/package.json

@@ -1,36 +1,44 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.10.0",
-    "@checkstack/frontend-api": "0.5.1",
-    "@monaco-editor/react": "^4.7.0",
+    "@checkstack/common": "0.12.0",
+    "@checkstack/frontend-api": "0.6.0",
+    "@codingame/monaco-vscode-editor-api": "25.1.2",
+    "@codingame/monaco-vscode-languages-service-override": "25.1.2",
+    "@codingame/monaco-vscode-standalone-json-language-features": "25.1.2",
+    "@codingame/monaco-vscode-standalone-languages": "25.1.2",
+    "@codingame/monaco-vscode-standalone-typescript-language-features": "25.1.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.2.4",
+    "@typefox/monaco-editor-react": "7.7.0",
     "ajv": "^8.18.0",
     "ajv-formats": "^3.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.0",
     "date-fns": "^4.1.0",
+    "fast-xml-parser": "^5.8.0",
+    "jsonc-parser": "^3.3.1",
     "lucide-react": "0.562.0",
-    "monaco-editor": "^0.55.1",
+    "monaco-languageclient": "10.7.0",
     "react": "^18.2.0",
     "react-day-picker": "^9.13.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^2.2.0",
+    "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.3.2",
+    "@checkstack/scripts": "0.3.4",
     "@checkstack/test-utils-frontend": "0.0.5",
     "@checkstack/tsconfig": "0.0.7",
     "@storybook/addon-a11y": "^10.3.6",

package/scripts/generate-stdlib-types.ts

@@ -19,12 +19,20 @@
  *
  * Run with `bun run generate:monaco-types` from `core/ui`. The output JSON
  * lives at `src/components/CodeEditor/generated/stdlib-types.json` and is
- * lazy-imported by MonacoEditor (so the ~3 MB payload is code-split into
- * its own chunk and never blocks initial page load).
+ * lazy-imported by the editor (so the ~3 MB payload is code-split into its
+ * own chunk and never blocks initial page load).
+ *
+ * It ALSO emits `generated/builtin-modules.json`: the authoritative list of
+ * importable built-in specifiers (`node:fs`, bare `fs`, `bun`, `bun:test`, ...)
+ * derived from the SAME bundled declarations (every importable built-in is a
+ * top-level `declare module "<spec>"`). The editor ships this so the
+ * import-name completion provider can suggest sandbox built-ins regardless of
+ * the installed-package allowlist, and it auto-updates with the bundled types.
  */
 import { createRequire } from "node:module";
 import { readdir, readFile, mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
+import { extractBuiltinModuleSpecifiers } from "../src/components/CodeEditor/importSpecifiers";
 
 const require = createRequire(import.meta.url);
 
@@ -88,3 +96,18 @@ const totalBytes = Object.values(files).reduce((acc, c) => acc + c.length, 0);
 console.log(
   `✅ Wrote ${Object.keys(files).length} files (${(totalBytes / 1024 / 1024).toFixed(2)} MB) → ${path.relative(process.cwd(), outFile)}`,
 );
+
+// Derive the authoritative built-in import specifier list from the SAME
+// bundled declarations: every importable built-in (`node:fs`, bare `fs`,
+// `bun`, `bun:test`, ...) is a top-level `declare module "<spec>"`, so the
+// name set falls out of the d.ts text directly. Wildcard/asset-glob shims
+// (`*.txt`, `*/bun.lock`) are filtered out by the extractor. This auto-updates
+// whenever the bundled `@types/node` / `bun-types` are regenerated, so the
+// editor's import-name completions never drift from the runtime stdlib.
+const allDeclarations = Object.values(files).join("\n");
+const builtinModules = extractBuiltinModuleSpecifiers(allDeclarations);
+const builtinsFile = path.join(outDir, "builtin-modules.json");
+await writeFile(builtinsFile, JSON.stringify(builtinModules), "utf8");
+console.log(
+  `✅ Wrote ${builtinModules.length} built-in module specifiers → ${path.relative(process.cwd(), builtinsFile)}`,
+);

package/src/components/ActionCard.tsx

@@ -0,0 +1,309 @@
+import React from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  GripVertical,
+  AlertTriangle,
+  MoreVertical,
+  Trash2,
+} from "lucide-react";
+import { Card, CardContent, CardHeader } from "./Card";
+import { Button } from "./Button";
+import { Toggle } from "./Toggle";
+import { DynamicIcon, type LucideIconName } from "./DynamicIcon";
+import { Badge, type BadgeProps } from "./Badge";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { DropdownMenuItem, MenuCloseContext } from "./Menu";
+import { cn } from "../utils";
+
+/**
+ * A single entry in an {@link ActionCard}'s three-dot overflow menu. Used to
+ * relocate per-card commands (Duplicate, Disable/Enable, Delete) off the
+ * header row into a compact menu for a Home-Assistant-style collapsed card.
+ */
+export interface ActionCardMenuItem {
+  label: string;
+  icon?: LucideIconName;
+  onClick: () => void;
+  /** `destructive` tints the item red (e.g. Delete). Defaults to neutral. */
+  variant?: "default" | "destructive";
+}
+
+export interface ActionCardProps {
+  /** Stable identifier used for drag-reorder + React key. */
+  id: string;
+  /** Bold header label, e.g. "Notify User". */
+  title: string;
+  /** Operator-supplied description (the action's `id`/`description` field). */
+  description?: string;
+  /** Plugin/category label rendered as a subdued badge. */
+  category?: string;
+  /** Lucide icon (PascalCase) shown to the left of the title. */
+  icon?: LucideIconName;
+  /** Toggle for the action's `enabled` flag. Omit to hide the toggle. */
+  enabled?: boolean;
+  onEnabledChange?: (enabled: boolean) => void;
+  /** Removes the card from its container. Omit to hide the delete button. */
+  onDelete?: () => void;
+  /** Drag handle shown on the left; integrators wire it up via `dnd-kit`. */
+  dragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;
+  /** Initial expanded state when uncontrolled. */
+  defaultExpanded?: boolean;
+  /** Controlled expanded state. */
+  expanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * When provided, the card behaves as a Home-Assistant-style collapsed
+   * summary row: clicking the header opens the item's full configuration in
+   * a side sheet (via this callback) instead of expanding inline. The body
+   * `children` are not rendered inline in this mode - the host renders them
+   * inside its own sheet. Omit to keep the legacy inline-expand behaviour.
+   */
+  onOpenSheet?: () => void;
+  /**
+   * Compact, single-line summary shown under the title in the collapsed
+   * summary row (e.g. derived from the item's config). Distinct from
+   * `description`, which is the operator's free-text note; `summary` wins
+   * when both are present.
+   */
+  summary?: string;
+  /**
+   * Overflow-menu commands rendered behind a three-dot button on the header
+   * row (Duplicate / Disable / Delete, etc.). Omit to hide the menu.
+   */
+  actions?: ActionCardMenuItem[];
+  /** Extra badges (e.g. produces / consumes hints). */
+  badges?: Array<{
+    label: string;
+    variant?: BadgeProps["variant"];
+    className?: string;
+  }>;
+  /** Card body — the action's config form. */
+  children?: React.ReactNode;
+  /** Optional class override on the outer Card. */
+  className?: string;
+  /**
+   * Validation messages attached to this card. When non-empty the card
+   * is marked with a destructive border + warning icon and the messages
+   * are listed in the header, so the operator sees *which* card (and
+   * field) is wrong without a separate panel.
+   */
+  errors?: string[];
+}
+
+/**
+ * Collapsible card that wraps a single automation action in the visual
+ * editor.
+ *
+ * Mirrors the visual layout of `StrategyConfigCard` but stays decoupled
+ * from `DynamicForm` so containers (`ChooseBlock`, `ParallelBlock`,
+ * `RepeatBlock`) can supply their own children — typically nested lists
+ * of `ActionCard`s rather than a flat config schema.
+ *
+ * Composition pattern (consumed by automation-frontend's editor):
+ *
+ *   ```tsx
+ *   <ActionCard
+ *     id={action.id}
+ *     title={action.action}
+ *     enabled={action.enabled ?? true}
+ *     onEnabledChange={(next) => onActionChange({ ...action, enabled: next })}
+ *     onDelete={() => onDelete(action.id)}
+ *   >
+ *     <DynamicForm
+ *       schema={registeredAction.configJsonSchema}
+ *       value={action.config}
+ *       onChange={(config) => onActionChange({ ...action, config })}
+ *     />
+ *   </ActionCard>
+ *   ```
+ *
+ * The toggle, delete, and drag handle each gate on their respective
+ * callback being supplied — pass `onDelete` to render the trash button,
+ * `onEnabledChange` to render the enable toggle, `dragHandleProps` to
+ * render the grip. Containers that don't want any of those (e.g. a
+ * disabled preview) just omit them.
+ */
+export const ActionCard: React.FC<ActionCardProps> = ({
+  id,
+  title,
+  description,
+  category,
+  icon,
+  enabled,
+  onEnabledChange,
+  onDelete,
+  dragHandleProps,
+  defaultExpanded = true,
+  expanded,
+  onExpandedChange,
+  onOpenSheet,
+  summary,
+  actions,
+  badges,
+  children,
+  className,
+  errors,
+}) => {
+  const [internalExpanded, setInternalExpanded] =
+    React.useState(defaultExpanded);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  // Sheet mode: the header opens a side sheet instead of expanding inline,
+  // so the card stays a compact summary row at all times.
+  const sheetMode = onOpenSheet !== undefined;
+  const isExpanded = sheetMode ? false : (expanded ?? internalExpanded);
+  const handleHeaderClick = () => {
+    if (sheetMode) {
+      onOpenSheet();
+      return;
+    }
+    const next = !isExpanded;
+    if (expanded === undefined) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  };
+  const hasErrors = errors !== undefined && errors.length > 0;
+
+  return (
+    <Card
+      data-action-id={id}
+      className={cn(
+        "transition-opacity",
+        enabled === false && "opacity-60",
+        hasErrors && "border-destructive/60 ring-1 ring-destructive/30",
+        className,
+      )}
+    >
+      <CardHeader className="flex flex-row items-center gap-2 p-3 space-y-0">
+        {dragHandleProps && (
+          <button
+            type="button"
+            className="cursor-grab text-muted-foreground hover:text-foreground"
+            aria-label="Drag to reorder"
+            {...dragHandleProps}
+          >
+            <GripVertical className="w-4 h-4" />
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={handleHeaderClick}
+          className="flex items-center flex-1 gap-2 text-left"
+          aria-expanded={sheetMode ? undefined : isExpanded}
+          aria-controls={sheetMode ? undefined : `${id}-body`}
+        >
+          {sheetMode ? (
+            <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground" />
+          ) : isExpanded ? (
+            <ChevronDown className="w-4 h-4 shrink-0 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground" />
+          )}
+          {hasErrors ? (
+            <AlertTriangle className="w-4 h-4 shrink-0 text-destructive" />
+          ) : (
+            icon && <DynamicIcon name={icon} className="w-4 h-4 shrink-0" />
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold truncate">{title}</span>
+              {category && (
+                <Badge variant="outline" className="shrink-0 text-[10px]">
+                  {category}
+                </Badge>
+              )}
+              {badges?.map((badge) => (
+                <Badge
+                  key={badge.label}
+                  variant={badge.variant ?? "outline"}
+                  className={cn("shrink-0 text-[10px]", badge.className)}
+                >
+                  {badge.label}
+                </Badge>
+              ))}
+            </div>
+            {(summary ?? description) && (
+              <p className="text-xs truncate text-muted-foreground">
+                {summary ?? description}
+              </p>
+            )}
+            {hasErrors && (
+              <ul className="mt-0.5 space-y-0.5">
+                {errors!.map((error, index) => (
+                  <li
+                    key={index}
+                    className="text-[11px] font-mono text-destructive"
+                  >
+                    {error}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </button>
+        {onEnabledChange && (
+          <Toggle
+            checked={enabled ?? true}
+            onCheckedChange={onEnabledChange}
+            aria-label={enabled ? "Disable action" : "Enable action"}
+          />
+        )}
+        {actions && actions.length > 0 && (
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="w-8 h-8 text-muted-foreground hover:text-foreground shrink-0"
+                aria-label="More actions"
+              >
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-48 p-1">
+              <MenuCloseContext.Provider
+                value={{ onClose: () => setMenuOpen(false) }}
+              >
+                {actions.map((item) => (
+                  <DropdownMenuItem
+                    key={item.label}
+                    onClick={item.onClick}
+                    icon={
+                      item.icon ? (
+                        <DynamicIcon name={item.icon} className="w-4 h-4" />
+                      ) : undefined
+                    }
+                    className={
+                      item.variant === "destructive"
+                        ? "text-destructive hover:text-destructive"
+                        : undefined
+                    }
+                  >
+                    {item.label}
+                  </DropdownMenuItem>
+                ))}
+              </MenuCloseContext.Provider>
+            </PopoverContent>
+          </Popover>
+        )}
+        {onDelete && (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={onDelete}
+            className="w-8 h-8 text-destructive hover:text-destructive/90 hover:bg-destructive/10 shrink-0"
+            aria-label="Delete action"
+          >
+            <Trash2 className="w-4 h-4" />
+          </Button>
+        )}
+      </CardHeader>
+      {isExpanded && children && (
+        <CardContent id={`${id}-body`} className="p-3 border-t border-border">
+          {children}
+        </CardContent>
+      )}
+    </Card>
+  );
+};

package/src/components/CodeEditor/CodeEditor.tsx

@@ -1,13 +1,136 @@
-// Monaco-based CodeEditor
-// Re-export all from MonacoEditor as the new CodeEditor implementation
+// Public `CodeEditor` component. Adapts the stable `CodeEditorProps` API to the
+// `@typefox/monaco-editor-react`-backed `TypefoxEditor` (real VS Code language
+// services in the browser). Consumers (DynamicForm, automation, healthcheck)
+// import this and are unaffected by the underlying editor implementation.
+import { useState } from "react";
+import { Maximize2 } from "lucide-react";
+import { TypefoxEditor, type TypefoxEditorProps } from "./TypefoxEditor";
+import { popoutTitle } from "./popoutTitle";
+import type { CodeEditorProps } from "./types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../Dialog";
+import { cn } from "../../utils";
 
-export {
-  CodeEditor,
-  type CodeEditorProps,
-  type CodeEditorLanguage,
-  type TemplateProperty,
-  type ShellEnvVar,
-} from "./MonacoEditor";
+/**
+ * Code editor with context-aware IntelliSense, template / shell completion, and
+ * structural validation. See `CodeEditorProps`.
+ *
+ * Renders the inline editor with a subtle top-right "expand" affordance that
+ * opens the SAME editor (same `value` / `onChange` / completion props) in a
+ * large full-screen overlay for comfortably editing big scripts. Both the
+ * inline and overlay editors are `TypefoxEditor` instances bound to the same
+ * controlled `value`, so edits stay in sync and closing the overlay keeps them.
+ */
+export const CodeEditor = ({
+  id,
+  value,
+  onChange,
+  language = "typescript",
+  minHeight = "100px",
+  readOnly,
+  placeholder,
+  typeDefinitions,
+  templateProperties,
+  shellEnvVars,
+  markers,
+  acquireTypes,
+  acquireResetKey,
+  importablePackages,
+  allowPopout = true,
+  title,
+}: CodeEditorProps) => {
+  const [popoutOpen, setPopoutOpen] = useState(false);
+
+  // CodeEditorProps.minHeight is a CSS length string ("240px"); TypefoxEditor
+  // takes a pixel number.
+  const minHeightPx = Number.parseInt(minHeight, 10) || 100;
+  const editorId = id ?? "code-editor";
+
+  // Shared editor props for both the inline and overlay instances. The overlay
+  // instance overrides only `id` (a distinct model URI so the two Monaco models
+  // don't fight) and `fillHeight` (so it fills the tall dialog body). Both are
+  // bound to the same `value` / `onChange`, keeping edits in sync.
+  const sharedEditorProps: Omit<TypefoxEditorProps, "id" | "fillHeight"> = {
+    value,
+    onChange,
+    language,
+    minHeight: minHeightPx,
+    readOnly,
+    placeholder,
+    typeDefinitions,
+    templateProperties,
+    shellEnvVars,
+    markers,
+    acquireTypes,
+    acquireResetKey,
+    importablePackages,
+  };
+
+  const dialogTitle = title ?? popoutTitle({ language });
+
+  return (
+    <div className="relative">
+      <TypefoxEditor id={editorId} {...sharedEditorProps} />
+      {allowPopout && (
+        <button
+          type="button"
+          aria-label="Expand editor"
+          title="Expand editor"
+          onClick={() => setPopoutOpen(true)}
+          className={cn(
+            // Sits above the editor in the top-right corner. A faint background
+            // keeps the muted icon legible over code; hover emphasises it.
+            "absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center",
+            "rounded-md bg-background/70 text-muted-foreground backdrop-blur-sm",
+            "transition-colors hover:bg-accent hover:text-accent-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          )}
+        >
+          <Maximize2 className="h-4 w-4" />
+        </button>
+      )}
+      <Dialog open={popoutOpen} onOpenChange={setPopoutOpen}>
+        {/* Tall flex column: override the default `overflow-y-auto` so the
+            editor (not the dialog) scrolls internally, and give the body a
+            fixed tall height so the `fillHeight` editor has something to fill. */}
+        <DialogContent
+          size="full"
+          className="flex h-[85dvh] flex-col overflow-hidden overflow-y-hidden"
+        >
+          <DialogHeader>
+            <DialogTitle>{dialogTitle}</DialogTitle>
+          </DialogHeader>
+          {/* Lazy: the second Monaco instance only mounts while the dialog is
+              open, so there's no double-editor cost when closed. Distinct
+              `${id}-popout` id => distinct model URI. */}
+          {popoutOpen && (
+            <div className="flex-1 min-h-0">
+              <TypefoxEditor
+                id={`${editorId}-popout`}
+                fillHeight
+                {...sharedEditorProps}
+              />
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export type {
+  CodeEditorProps,
+  CodeEditorLanguage,
+  TemplateProperty,
+  ShellEnvVar,
+  EditorMarker,
+  AcquireTypes,
+  AcquiredTypeFile,
+} from "./types";
 
 export {
   generateTypeDefinitions,