@checkstack/ui 1.11.0 → 1.13.0

package/src/components/CodeEditor/scriptDiagnostics.ts

@@ -0,0 +1,172 @@
+// Pure helpers for the headless script validator (`validateScripts.ts`).
+//
+// Kept free of any `monaco` / browser import so this logic is unit-testable
+// under bun. The browser-only worker glue lives in `validateScripts.ts` and
+// composes these helpers.
+//
+// Strategy: to type-check a user script against its generated `context.d.ts`
+// WITHOUT polluting the shared TS service's global scope (which would collide
+// with any mounted editor's own `declare const context`), we PREPEND the
+// generated type declarations onto the user's source and validate that single
+// combined file. Inside one module/script file the prepended `declare const
+// context` is in scope for the user's code below it, but it never leaks to
+// other files. Diagnostics that land in the prepended region are dropped, and
+// the rest are shifted back by the number of prepended lines so positions map
+// onto the user's original source.
+
+/** A type error/warning located in the user's original (un-prepended) source. */
+export interface ScriptDiagnostic {
+  severity: "error" | "warning";
+  /** Flattened, human-readable message. */
+  message: string;
+  /** 1-based line in the user's source. */
+  line: number;
+  /** 1-based column. */
+  column: number;
+}
+
+/**
+ * Diagnostic codes ignored during headless validation because they reflect the
+ * sandbox/loading model rather than a real mistake in the user's logic:
+ *
+ *  - 1108: a top-level `return` is legal (the runtime wraps scripts in an async
+ *    IIFE) - same suppression the editor applies.
+ *  - 2307 / 2792: "cannot find module 'x'". Type acquisition (ATA) is lazy and
+ *    only runs for the editor that is open, so a collapsed-card script's
+ *    imports have no fetched types yet. Flagging these would be a false
+ *    positive, so module-resolution failures are not surfaced here (the
+ *    backend typecheck - deferred - is the place to enforce imports).
+ *  - 7016: "could not find a declaration file for module 'x'" - same reason.
+ */
+export const IGNORED_DIAGNOSTIC_CODES: ReadonlySet<number> = new Set([
+  1108, 2307, 2792, 7016,
+]);
+
+// `ts.DiagnosticCategory`: Warning = 0, Error = 1, Suggestion = 2, Message = 3.
+const CATEGORY_ERROR = 1;
+const CATEGORY_WARNING = 0;
+
+/**
+ * Minimal shape of a TypeScript worker diagnostic (subset of monaco's
+ * `Diagnostic`). `messageText` is either a string or a nested chain.
+ */
+export interface RawTsDiagnostic {
+  start?: number;
+  length?: number;
+  messageText: string | DiagnosticMessageChain;
+  category: number;
+  code: number;
+}
+
+interface DiagnosticMessageChain {
+  messageText: string;
+  next?: DiagnosticMessageChain[];
+}
+
+/** Flatten a (possibly nested) diagnostic message chain to a single string. */
+export function flattenDiagnosticMessage(
+  messageText: string | DiagnosticMessageChain,
+): string {
+  if (typeof messageText === "string") {
+    return messageText;
+  }
+  const parts: string[] = [];
+  const walk = (chain: DiagnosticMessageChain): void => {
+    parts.push(chain.messageText);
+    for (const child of chain.next ?? []) {
+      walk(child);
+    }
+  };
+  walk(messageText);
+  return parts.join(" ");
+}
+
+/** Convert a 0-based character offset into a 1-based {line, column}. */
+export function offsetToPosition(
+  text: string,
+  offset: number,
+): { line: number; column: number } {
+  let line = 1;
+  let column = 1;
+  const end = Math.min(offset, text.length);
+  for (let i = 0; i < end; i++) {
+    if (text[i] === "\n") {
+      line += 1;
+      column = 1;
+    } else {
+      column += 1;
+    }
+  }
+  return { line, column };
+}
+
+/**
+ * Build the combined source to validate: the generated `typeDefinitions`
+ * (the `declare const context` + any ambient augmentations) prepended to the
+ * user's source. Returns the combined text plus the number of lines the prefix
+ * occupies, so diagnostics can be shifted back onto the user's source.
+ */
+export function buildValidationSource({
+  typeDefinitions,
+  source,
+}: {
+  typeDefinitions: string;
+  source: string;
+}): { text: string; prependedLineCount: number } {
+  // The prefix occupies one line per line of `typeDefinitions`; the trailing
+  // "\n" we add then places the user's source on the next line. So the user's
+  // line N maps to combined line N + prependedLineCount.
+  const prependedLineCount = typeDefinitions.split("\n").length;
+  return {
+    text: `${typeDefinitions}\n${source}`,
+    prependedLineCount,
+  };
+}
+
+/**
+ * Map raw worker diagnostics onto the user's source: drop ignored codes,
+ * non-error/-warning categories, unpositioned (global) diagnostics, and any
+ * that fall inside the prepended type-definition prefix; shift the rest back.
+ */
+export function mapWorkerDiagnostics({
+  diagnostics,
+  validationText,
+  prependedLineCount,
+}: {
+  diagnostics: RawTsDiagnostic[];
+  validationText: string;
+  prependedLineCount: number;
+}): ScriptDiagnostic[] {
+  const result: ScriptDiagnostic[] = [];
+  for (const diagnostic of diagnostics) {
+    if (IGNORED_DIAGNOSTIC_CODES.has(diagnostic.code)) {
+      continue;
+    }
+    const severity =
+      diagnostic.category === CATEGORY_ERROR
+        ? "error"
+        : diagnostic.category === CATEGORY_WARNING
+          ? "warning"
+          : undefined;
+    if (severity === undefined) {
+      continue;
+    }
+    if (diagnostic.start === undefined) {
+      // No position - a whole-file diagnostic. Not attributable to a user line,
+      // and the inline strategy shouldn't produce these; skip.
+      continue;
+    }
+    const position = offsetToPosition(validationText, diagnostic.start);
+    if (position.line <= prependedLineCount) {
+      // Lands in the generated prefix, not the user's code.
+      continue;
+    }
+    result.push({
+      severity,
+      message: flattenDiagnosticMessage(diagnostic.messageText),
+      line: position.line - prependedLineCount,
+      column: position.column,
+    });
+  }
+  return result;
+}

package/src/components/CodeEditor/types.ts

@@ -52,6 +52,30 @@ export interface ShellEnvVar {
   example?: string;
 }
 
+/** One declaration file returned by an `AcquireTypes` resolver. */
+export interface AcquiredTypeFile {
+  /**
+   * Real `node_modules/...`-relative path (e.g.
+   * `node_modules/@types/lodash/index.d.ts`). Registered at `file:///<path>`
+   * so TypeScript's NodeJs + `@types` resolution can find it.
+   */
+  path: string;
+  /** Verbatim declaration content (UNWRAPPED — no `declare module` envelope). */
+  content: string;
+}
+
+/**
+ * Resolver for lazy Automatic Type Acquisition (ATA). Given a bare package
+ * specifier (e.g. `lodash`), returns the declaration-file closure to register
+ * with the TypeScript service (own types and/or the `@types/*` companion).
+ * Returns an empty array when the package has no acquirable types. Plugin-
+ * agnostic: the concrete fetch (route URL + lockfile hash + auth) is injected
+ * by the consumer (see `@checkstack/script-packages-frontend`).
+ */
+export type AcquireTypes = (
+  specifier: string,
+) => Promise<AcquiredTypeFile[]>;
+
 /**
  * An externally-supplied diagnostic to render as an inline squiggle. Positions
  * are 1-based line/column (the editor's convention). Callers compute these from
@@ -106,4 +130,59 @@ export interface CodeEditorProps {
    * diagnostics).
    */
   markers?: EditorMarker[];
+  /**
+   * Lazy Automatic Type Acquisition resolver. When provided (TS/JS editors),
+   * the editor parses bare `import`/`require` specifiers from the buffer and
+   * calls this for each NEW package, registering the returned declaration
+   * files so `import { x } from "pkg"` autocompletes. Injected by the
+   * consumer so `@checkstack/ui` stays plugin-agnostic.
+   */
+  acquireTypes?: AcquireTypes;
+  /**
+   * Identity of the current package install (the lockfile hash). When it
+   * changes (a new install), the editor resets its acquired-set so types
+   * refresh against the new install.
+   */
+  acquireResetKey?: string;
+  /**
+   * The running release's `@checkstack/sdk` editor bundle as virtual `.d.ts`
+   * files (TS/JS editors). Makes `import { defineHealthCheck } from
+   * "@checkstack/sdk/healthcheck"` resolve with real, version-matched types.
+   * Fetched live by the consumer so `@checkstack/ui` stays network-agnostic.
+   */
+  sdkTypes?: ReadonlyArray<AcquiredTypeFile>;
+  /**
+   * Release-version reset key for `sdkTypes`. When it changes, the mounted SDK
+   * libs reset so the editor never serves stale SDK types after an upgrade.
+   */
+  sdkTypesResetKey?: string;
+  /**
+   * Importable installed package NAMES (TS/JS editors). When provided, the
+   * editor suggests these while the cursor is inside an import specifier
+   * string (`import {} from "lod"` -> `lodash`), solving the lazy-ATA
+   * catch-22 where no module is registered until its name is typed. Must
+   * already exclude `@types/*` companions. Injected by the consumer.
+   */
+  importablePackages?: string[];
+  /**
+   * Whether to show the "expand editor" affordance that opens the editor in a
+   * large full-screen overlay for comfortably editing big scripts. Defaults to
+   * `true`. Set `false` to suppress it (e.g. for tiny single-line snippets).
+   */
+  allowPopout?: boolean;
+  /**
+   * Optional override for the overlay dialog title. When omitted, the title is
+   * derived from `language` (e.g. "Edit script - TypeScript"). Lets a consumer
+   * surface a field-specific label (e.g. a DynamicForm field name) while
+   * keeping `@checkstack/ui` plugin-agnostic.
+   */
+  title?: string;
+  /**
+   * When `true`, this editor never CLAIMS the one-time monaco-vscode cold init -
+   * it waits for another (visible) editor to bring the services up, then mounts.
+   * Set this for OFFSCREEN/hidden editors (e.g. the automation
+   * `ScriptServicesBooter`): a hidden editor's init may never complete, so it
+   * must not be the sole initializer. Defaults to `false`.
+   */
+  deferInit?: boolean;
 }

package/src/components/CodeEditor/validateScripts.ts

@@ -0,0 +1,172 @@
+// Headless TypeScript / JavaScript script validator.
+//
+// Type-checks user scripts against their generated `context` types WITHOUT a
+// mounted editor, so an automation's collapsed-card scripts (or any script the
+// user isn't currently looking at) still surface type errors. It drives the
+// SAME standalone TS worker the editor uses, via off-screen models.
+//
+// Browser-only (imports `monaco` + the worker accessor). The pure mapping /
+// offset logic lives in `scriptDiagnostics.ts` and is unit-tested there; this
+// module is the thin async glue and is intentionally not unit-tested (no DOM /
+// worker under bun).
+//
+// Why prepend instead of an extra-lib: a global `context` extra-lib would
+// collide with any open editor's own `declare const context` (extra-libs are
+// global to the shared service). Prepending the type defs onto each validated
+// source keeps `context` scoped to that one off-screen file. See
+// `buildValidationSource`.
+//
+// The Monaco editor API, the standalone TS worker accessors, and the shared
+// `monacoTsService` setup are imported LAZILY (in-body `await import(...)`)
+// rather than at module scope. This keeps the entire `@codingame/*` stack off
+// the `@checkstack/ui` barrel: `validateTypeScriptSources` is re-exported from
+// the barrel, so a static Monaco import here would ship Monaco to every page
+// that touches the barrel (e.g. the login page). The lazy imports only resolve
+// once an editor has already brought the services up, so they hit an
+// already-loaded chunk and add no extra cost.
+import { areVscodeServicesReady } from "./vscodeServicesSignal";
+import {
+  buildValidationSource,
+  mapWorkerDiagnostics,
+  type RawTsDiagnostic,
+  type ScriptDiagnostic,
+} from "./scriptDiagnostics";
+
+type MonacoEditorApi = typeof import("@codingame/monaco-vscode-editor-api");
+type TsLanguageFeatures =
+  typeof import("@codingame/monaco-vscode-standalone-typescript-language-features");
+
+export type { ScriptDiagnostic } from "./scriptDiagnostics";
+
+export interface ScriptValidationInput {
+  /** Caller-chosen identity; the returned map is keyed by this. */
+  id: string;
+  /** The user's script source (without any generated type prefix). */
+  source: string;
+  /** Generated `context.d.ts` (+ ambient augmentations) for this script. */
+  typeDefinitions: string;
+  language: "typescript" | "javascript";
+}
+
+// Monotonic across overlapping validation passes so two passes never reuse the
+// same off-screen model URI (which would race on create/dispose).
+let runCounter = 0;
+
+/**
+ * Validate each script against its `typeDefinitions`. Returns a map keyed by
+ * input `id` to that script's diagnostics (empty array = clean). Never throws:
+ * any worker/setup failure resolves to no diagnostics so validation can never
+ * break the editor it augments.
+ *
+ * Runs serially. The inline-prepend strategy removes the shared-state
+ * constraint that would otherwise force serialization, but validation is not
+ * latency-critical and serial keeps worker load predictable.
+ */
+export async function validateTypeScriptSources({
+  sources,
+}: {
+  sources: ScriptValidationInput[];
+}): Promise<Map<string, ScriptDiagnostic[]>> {
+  const results = new Map<string, ScriptDiagnostic[]>();
+  if (sources.length === 0) {
+    return results;
+  }
+  // CRITICAL: only proceed once an editor has initialized the monaco-vscode
+  // services. Initializing them here would collide with the editor wrapper's
+  // one-time init ("Services are already initialized") and break the editor.
+  if (!areVscodeServicesReady()) {
+    return results;
+  }
+
+  // Lazy-load the Monaco stack only now that an editor has brought the services
+  // up (keeps these heavy `@codingame/*` modules off the barrel - see the
+  // module header). Because services are ready, these chunks are already
+  // resolved, so the imports are effectively free here.
+  let monaco: MonacoEditorApi;
+  let getJavaScriptWorker: TsLanguageFeatures["getJavaScriptWorker"];
+  let getTypeScriptWorker: TsLanguageFeatures["getTypeScriptWorker"];
+  try {
+    const [editorApi, tsLanguageFeatures, { ensureStandaloneStdlib }] =
+      await Promise.all([
+        import("@codingame/monaco-vscode-editor-api"),
+        import(
+          "@codingame/monaco-vscode-standalone-typescript-language-features"
+        ),
+        import("./monacoTsService"),
+      ]);
+    monaco = editorApi;
+    getJavaScriptWorker = tsLanguageFeatures.getJavaScriptWorker;
+    getTypeScriptWorker = tsLanguageFeatures.getTypeScriptWorker;
+    await ensureStandaloneStdlib();
+  } catch {
+    return results;
+  }
+
+  for (const input of sources) {
+    try {
+      results.set(
+        input.id,
+        await validateOne({
+          input,
+          monaco,
+          getJavaScriptWorker,
+          getTypeScriptWorker,
+        }),
+      );
+    } catch {
+      results.set(input.id, []);
+    }
+  }
+  return results;
+}
+
+async function validateOne({
+  input,
+  monaco,
+  getJavaScriptWorker,
+  getTypeScriptWorker,
+}: {
+  input: ScriptValidationInput;
+  monaco: MonacoEditorApi;
+  getJavaScriptWorker: TsLanguageFeatures["getJavaScriptWorker"];
+  getTypeScriptWorker: TsLanguageFeatures["getTypeScriptWorker"];
+}): Promise<ScriptDiagnostic[]> {
+  const { text, prependedLineCount } = buildValidationSource({
+    typeDefinitions: input.typeDefinitions,
+    source: input.source,
+  });
+  const ext = input.language === "javascript" ? "js" : "ts";
+  const uri = monaco.Uri.parse(
+    `file:///script-validation/${runCounter++}.${ext}`,
+  );
+  monaco.editor.getModel(uri)?.dispose();
+  const model = monaco.editor.createModel(text, input.language, uri);
+  try {
+    const getWorker =
+      input.language === "javascript"
+        ? await getJavaScriptWorker()
+        : await getTypeScriptWorker();
+    const client = await getWorker(uri);
+    const fileName = uri.toString();
+    const [syntactic, semantic] = await Promise.all([
+      client.getSyntacticDiagnostics(fileName),
+      client.getSemanticDiagnostics(fileName),
+    ]);
+    const diagnostics: RawTsDiagnostic[] = [...syntactic, ...semantic].map(
+      (diagnostic) => ({
+        start: diagnostic.start,
+        length: diagnostic.length,
+        messageText: diagnostic.messageText,
+        category: diagnostic.category,
+        code: diagnostic.code,
+      }),
+    );
+    return mapWorkerDiagnostics({
+      diagnostics,
+      validationText: text,
+      prependedLineCount,
+    });
+  } finally {
+    model.dispose();
+  }
+}

package/src/components/CodeEditor/vscodeServicesSignal.ts

@@ -0,0 +1,72 @@
+// Lightweight, Monaco-free signal for the one-time "monaco-vscode services
+// ready" transition.
+//
+// Extracted from `monacoTsService` so consumers that only need to OBSERVE
+// readiness (the `@checkstack/ui` barrel re-export, the automation editor's
+// `ScriptServicesBooter` + headless validator) do NOT transitively pull the
+// entire `@codingame/*` Monaco stack into their bundle. Importing this module
+// loads zero Monaco code, so pages that never mount an editor (e.g. the login
+// page) stay Monaco-free.
+//
+// Why a global flag at all: the monaco-vscode API initializes globally exactly
+// ONCE, and that init is owned by the editor wrapper (`MonacoEditorReactComp`),
+// which throws "Services are already initialized" if anything else inits first.
+// So the headless validator must NOT touch the worker / models until an editor
+// has brought the services up. The editor flips this flag from its
+// `onEditorStartDone` (via `markVscodeServicesReady`); the validator checks
+// `areVscodeServicesReady()` and otherwise no-ops. Net effect: scripts validate
+// once any script editor has been opened this session (covering collapsed cards
+// from then on); a never-opened, all-collapsed automation is left to the
+// deferred backend typecheck.
+
+let vscodeServicesReady = false;
+const servicesReadyListeners = new Set<() => void>();
+
+/** Called by the editor once the monaco-vscode services have initialized. */
+export const markVscodeServicesReady = (): void => {
+  if (vscodeServicesReady) return;
+  vscodeServicesReady = true;
+  for (const listener of servicesReadyListeners) listener();
+  servicesReadyListeners.clear();
+};
+
+/** True once an editor has initialized the monaco-vscode services. */
+export const areVscodeServicesReady = (): boolean => vscodeServicesReady;
+
+/**
+ * Subscribe to the one-time "services ready" transition. Fires immediately if
+ * already ready. Returns an unsubscribe. Lets the headless validator re-run the
+ * moment the first editor brings the services up (otherwise a never-edited
+ * definition would not re-validate just because a card was opened).
+ */
+export const onVscodeServicesReady = (listener: () => void): (() => void) => {
+  if (vscodeServicesReady) {
+    listener();
+    return () => {};
+  }
+  servicesReadyListeners.add(listener);
+  return () => servicesReadyListeners.delete(listener);
+};
+
+// ─── Cold-init serialization ─────────────────────────────────────────────────
+// monaco-vscode services initialize globally exactly once. @typefox's React
+// wrapper performs that init when given a `vscodeApiConfig`, and it is
+// StrictMode-safe for a SINGLE editor - but two editors mounting at once both
+// race the init and corrupt it. So exactly ONE editor claims the cold init and
+// mounts (with `vscodeApiConfig`); every other editor waits for
+// `areVscodeServicesReady()` before mounting (it then attaches to the
+// already-initialized services). The claim is released if the claiming editor
+// unmounts before services come up, so a sibling can take over.
+let coldInitClaimed = false;
+
+/** First caller (while not ready and unclaimed) gets the cold-init role. */
+export const claimColdInit = (): boolean => {
+  if (vscodeServicesReady || coldInitClaimed) return false;
+  coldInitClaimed = true;
+  return true;
+};
+
+/** Release the claim if services never came up (claimer unmounted early). */
+export const releaseColdInit = (): void => {
+  if (!vscodeServicesReady) coldInitClaimed = false;
+};

package/src/components/ConfirmationModal.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { cn } from "../utils";
 import { Button } from "./Button";
+import { usePerformance } from "./PerformanceProvider";
 import { AlertTriangle, X } from "lucide-react";
 
 export interface ConfirmationModalProps {
@@ -26,6 +27,8 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
   variant = "danger",
   isLoading = false,
 }) => {
+  const { isLowPower } = usePerformance();
+
   if (!isOpen) return;
 
   const handleConfirm = () => {
@@ -65,7 +68,10 @@ export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       onClick={handleBackdropClick}
     >
       <div
-        className="bg-background rounded-lg shadow-xl max-w-md w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] overflow-y-auto animate-in fade-in zoom-in duration-200 pointer-events-auto"
+        className={cn(
+          "bg-background rounded-lg shadow-xl max-w-md w-full mx-4 my-4 max-h-[calc(100dvh-2rem)] overflow-y-auto pointer-events-auto",
+          !isLowPower && "animate-in fade-in zoom-in duration-200",
+        )}
         role="dialog"
         aria-modal="true"
         aria-labelledby="modal-title"

package/src/components/Dialog.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 Dialog = DialogPrimitive.Root;
 
@@ -64,12 +65,23 @@ const DialogContent = React.forwardRef<
   DialogContentProps & DialogContentExtraProps
 >(({ className, children, size, hideCloseButton, ...props }, ref) => {
   const { isLowPower } = usePerformance();
+  // Expose the content element so popovers/comboboxes inside the dialog portal
+  // INTO it, otherwise the modal scroll-lock blocks their internal scrolling.
+  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 (
     <DialogPortal>
       <DialogOverlay />
       <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
         <DialogPrimitive.Content
-          ref={ref}
+          ref={setRefs}
           className={cn(
             "pointer-events-auto relative",
             dialogContentVariants({ size }),
@@ -79,16 +91,25 @@ const DialogContent = React.forwardRef<
           )}
           {...props}
         >
-          <div className="-mx-2 px-2 flex flex-col gap-6">{children}</div>
-          {!hideCloseButton && (
-            <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"
-              aria-label="Close"
-            >
-              <X className="h-4 w-4" />
-              <span className="sr-only">Close</span>
-            </DialogPrimitive.Close>
-          )}
+          <PortalContainerContext.Provider value={content}>
+            {/* `min-h-0 flex-1` lets this wrapper fill the height when a
+                consumer makes `DialogContent` a tall flex column (e.g. the
+                CodeEditor popout, so a `fillHeight` editor fills the body).
+                Inert for the default (non-flex) dialog: `flex-1` only affects
+                flex items, and `min-h-0` is the block default. */}
+            <div className="-mx-2 px-2 flex min-h-0 flex-1 flex-col gap-6">
+              {children}
+            </div>
+            {!hideCloseButton && (
+              <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"
+                aria-label="Close"
+              >
+                <X className="h-4 w-4" />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
+            )}
+          </PortalContainerContext.Provider>
         </DialogPrimitive.Content>
       </div>
     </DialogPortal>