@checkstack/ui 1.12.0 → 1.13.0

package/src/components/CodeEditor/monacoGuard.ts

@@ -0,0 +1,76 @@
+/// <reference types="vite/client" />
+// Guarded accessor for the monaco-vscode editor API. ALL runtime monaco access
+// in this package goes through here; direct value imports of
+// `@codingame/monaco-vscode-editor-api` elsewhere are banned by lint
+// (`no-restricted-imports`) so the guard cannot be bypassed.
+//
+// Why: `monaco.editor.*` / `monaco.languages.*` functions resolve services via
+// `StandaloneServices.get()`, which AUTO-INITIALIZES the monaco-vscode services
+// on first use (CodinGame `standaloneServices.js` — `get()` calls `initialize`
+// when not yet initialized). `@typefox/monaco-editor-react` tracks its OWN,
+// independent init flags; if any `monaco.*` call runs BEFORE the wrapper's init,
+// it trips CodinGame's `servicesInitialized` flag and the wrapper's later
+// `initialize()` throws "Services are already initialized" — the editor then
+// never renders. This is dev-only (production's single mount masked it once),
+// and it is exactly the bug this guard prevents from regressing.
+//
+// In dev, calling any `monaco.editor.*` / `monaco.languages.*` FUNCTION before
+// `areVscodeServicesReady()` throws immediately, at the exact call site, with a
+// clear message. In production the raw API is returned (zero overhead).
+
+import * as monacoApi from "@codingame/monaco-vscode-editor-api";
+import { areVscodeServicesReady } from "./vscodeServicesSignal";
+
+// The namespaces whose functions auto-initialize the services on first use.
+const GUARDED_NAMESPACES = new Set(["editor", "languages"]);
+
+// Wrap a namespace so calling any of its functions before services are ready
+// throws. Non-function members (enums like `MarkerSeverity`, classes) pass
+// through untouched. Returns the same type `T` (the Proxy is invisible to types,
+// so call sites still type-check against the real monaco signatures).
+const guardNamespace = <T extends object>(ns: T, nsName: string): T =>
+  new Proxy(ns, {
+    get(target, prop, receiver): unknown {
+      const value: unknown = Reflect.get(target, prop, receiver);
+      if (typeof value !== "function" || typeof prop !== "string") {
+        return value;
+      }
+      const fn = value;
+      return (...args: unknown[]): unknown => {
+        if (!areVscodeServicesReady()) {
+          throw new Error(
+            `monaco.${nsName}.${prop}() was called before the monaco-vscode ` +
+              `services were initialized. That call auto-initializes the ` +
+              `services and breaks the editor's @typefox init ("Services are ` +
+              `already initialized"), so the editor never renders. Gate it ` +
+              `behind \`apiReady\` (the editor's onEditorStartDone) or ` +
+              `\`areVscodeServicesReady()\`. See ` +
+              `core/ui/src/components/CodeEditor/monacoGuard.ts.`,
+          );
+        }
+        return Reflect.apply(fn, ns, args);
+      };
+    },
+  });
+
+const guardedMonaco: typeof monacoApi = import.meta.env.DEV
+  ? new Proxy(monacoApi, {
+      get(target, prop, receiver): unknown {
+        const value: unknown = Reflect.get(target, prop, receiver);
+        if (
+          typeof prop === "string" &&
+          GUARDED_NAMESPACES.has(prop) &&
+          typeof value === "object" &&
+          value !== null
+        ) {
+          return guardNamespace(value, prop);
+        }
+        return value;
+      },
+    })
+  : monacoApi;
+
+// The guarded runtime value. Consumers import this for runtime monaco access
+// and import the TYPE namespace separately, type-only, from
+// `@codingame/monaco-vscode-editor-api` (which the lint rule allows).
+export { guardedMonaco as monaco };

package/src/components/CodeEditor/monacoTsService.ts

@@ -65,43 +65,11 @@ const tsWorkerLoader: WorkerLoader = () =>
 const jsonWorkerLoader: WorkerLoader = () =>
   new Worker(jsonWorkerUrl, { type: "module" });
 
-// The monaco-vscode API initializes globally exactly ONCE, and that init is
-// owned by the editor wrapper (`MonacoEditorReactComp`) - it 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`; the
-// validator checks it 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);
-};
+// The "monaco-vscode services ready" signal (`markVscodeServicesReady` /
+// `areVscodeServicesReady` / `onVscodeServicesReady`) lives in the Monaco-free
+// `vscodeServicesSignal` module so the barrel and the automation editor can
+// observe readiness without importing this Monaco-heavy module. See that file
+// for the full rationale.
 
 let workerFactoryRegistered = false;
 

package/src/components/CodeEditor/scriptContext.test.ts

@@ -7,13 +7,17 @@ import {
 import type { JsonSchemaProperty } from "../DynamicForm/types";
 
 describe("healthcheckScriptContext", () => {
-  it("emits both the global and module-export declarations of defineHealthCheck", () => {
+  it("emits the global helper + context types, but NOT a bare-name module block", () => {
     const ctx = healthcheckScriptContext({});
-    // Module declaration is what `import { defineHealthCheck } from
-    // "@checkstack/healthcheck"` resolves to.
-    expect(ctx.typeDefinitions).toContain('declare module "@checkstack/healthcheck"');
+    // The bare-name `@checkstack/healthcheck` module block is REMOVED (plan
+    // §6.2 / §6.4): the subpath module `@checkstack/sdk/healthcheck` is now
+    // resolved from the injected @checkstack/sdk editor bundle, not from
+    // scriptContext. scriptContext must NOT declare ANY package module block.
+    expect(ctx.typeDefinitions).not.toContain('declare module "@checkstack/healthcheck"');
+    expect(ctx.typeDefinitions).not.toContain('declare module "@checkstack/sdk/healthcheck"');
+    expect(ctx.typeDefinitions).not.toContain("declare module");
     expect(ctx.typeDefinitions).toContain("HealthCheckScriptResult");
-    // Global declaration is what makes Monaco autocomplete `defineHea…`
+    // The global declaration stays — it makes Monaco autocomplete `defineHea…`
     // _without_ requiring the user to type the import first (Monaco 0.55
     // doesn't expose `includeCompletionsForModuleExports`).
     expect(ctx.typeDefinitions).toMatch(/declare function defineHealthCheck/);
@@ -143,9 +147,13 @@ describe("healthcheckScriptContext", () => {
 });
 
 describe("integrationScriptContext", () => {
-  it("emits both the global and module-export declarations of defineIntegration", () => {
+  it("emits the global helper + context types, but NOT a bare-name module block", () => {
     const ctx = integrationScriptContext({});
-    expect(ctx.typeDefinitions).toContain('declare module "@checkstack/integration"');
+    // Bare-name `@checkstack/integration` block removed (§6.2/§6.4); the
+    // subpath module resolves from the injected @checkstack/sdk editor bundle.
+    expect(ctx.typeDefinitions).not.toContain('declare module "@checkstack/integration"');
+    expect(ctx.typeDefinitions).not.toContain('declare module "@checkstack/sdk/integration"');
+    expect(ctx.typeDefinitions).not.toContain("declare module");
     expect(ctx.typeDefinitions).toContain("IntegrationScriptResult");
     // Global form — analogous to defineHealthCheck.
     expect(ctx.typeDefinitions).toMatch(/declare function defineIntegration/);

package/src/components/CodeEditor/scriptContext.ts

@@ -8,8 +8,9 @@ import { jsonSchemaToTypeScript } from "./generateTypeDefinitions";
  *
  *  - `healthcheckInlineContext` — inline TS/JS health checks.
  *    `context.config` is typed from the collector's own config schema.
- *    A virtual `@checkstack/healthcheck` module exposes the required
- *    return shape so users get a type _error_ when the shape is wrong.
+ *    The `@checkstack/sdk/healthcheck` module (resolved from the injected
+ *    @checkstack/sdk editor bundle) exposes the required return shape so
+ *    users get a type _error_ when the shape is wrong.
  *
  *  - `healthcheckShellContext` — shell health checks. No platform-injected
  *    env vars today (the user supplies `env` themselves), so we surface
@@ -18,7 +19,8 @@ import { jsonSchemaToTypeScript } from "./generateTypeDefinitions";
  *
  *  - `integrationInlineContext` — TS/JS integration scripts.
  *    `context.event.payload` is typed from the event's payload schema.
- *    A virtual `@checkstack/integration` module exposes the result shape.
+ *    The `@checkstack/sdk/integration` module (resolved from the injected
+ *    @checkstack/sdk editor bundle) exposes the result shape.
  *
  *  - `integrationShellContext` — shell integration scripts. The platform
  *    injects `EVENT_ID`, `DELIVERY_ID`, `SUBSCRIPTION_ID`,
@@ -119,9 +121,10 @@ interface HealthCheckScriptContext {
  * to be so mistakes are caught before the script ever runs.
  *
  * Available both as a global (this declaration) and as a named export
- * from \`@checkstack/healthcheck\` (below). The global form means the
- * editor can autocomplete it without the user typing the import first;
- * the module form is for explicit, IDE-style imports.
+ * from \`@checkstack/sdk/healthcheck\`. The global form means the editor
+ * can autocomplete it without the user typing the import first; the
+ * named-export form (resolved from the injected @checkstack/sdk editor
+ * bundle, not declared here) is for explicit, IDE-style imports.
  */
 declare function defineHealthCheck<
   T extends
@@ -132,11 +135,6 @@ declare function defineHealthCheck<
 >(value: T): T;
 
 declare const context: HealthCheckScriptContext;
-
-declare module "@checkstack/healthcheck" {
-  export type { HealthCheckScriptResult, HealthCheckScriptContext };
-  export { defineHealthCheck };
-}
 `;
 }
 
@@ -187,7 +185,8 @@ interface IntegrationScriptContext {
  * Helper that asserts the return shape of an integration script at the
  * type level. See \`defineHealthCheck\` for the analogous health-check
  * helper. Available both as a global and as a named export from
- * \`@checkstack/integration\`.
+ * \`@checkstack/sdk/integration\` (resolved from the injected
+ * @checkstack/sdk editor bundle, not declared here).
  */
 declare function defineIntegration<
   T extends
@@ -200,11 +199,6 @@ declare function defineIntegration<
 >(value: T): T;
 
 declare const context: IntegrationScriptContext;
-
-declare module "@checkstack/integration" {
-  export type { IntegrationScriptResult, IntegrationScriptContext };
-  export { defineIntegration };
-}
 `;
 }
 
@@ -221,7 +215,7 @@ declare module "@checkstack/integration" {
  * `defineHealthCheck` is available without an import (declared as an
  * ambient global in the editor's type defs and injected onto
  * `globalThis` by the runner). The named-import form
- * `import { defineHealthCheck } from "@checkstack/healthcheck"` also
+ * `import { defineHealthCheck } from "@checkstack/sdk/healthcheck"` also
  * works if users prefer it.
  */
 const HEALTHCHECK_INLINE_TS_STARTER = `import { loadavg } from "node:os";

package/src/components/CodeEditor/types.ts

@@ -144,6 +144,18 @@ export interface CodeEditorProps {
    * 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
@@ -165,4 +177,12 @@ export interface CodeEditorProps {
    * 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

@@ -15,15 +15,16 @@
 // global to the shared service). Prepending the type defs onto each validated
 // source keeps `context` scoped to that one off-screen file. See
 // `buildValidationSource`.
-import * as monaco from "@codingame/monaco-vscode-editor-api";
-import {
-  getJavaScriptWorker,
-  getTypeScriptWorker,
-} from "@codingame/monaco-vscode-standalone-typescript-language-features";
-import {
-  areVscodeServicesReady,
-  ensureStandaloneStdlib,
-} from "./monacoTsService";
+//
+// 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,
@@ -31,6 +32,10 @@ import {
   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 {
@@ -72,7 +77,26 @@ export async function validateTypeScriptSources({
   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;
@@ -80,7 +104,15 @@ export async function validateTypeScriptSources({
 
   for (const input of sources) {
     try {
-      results.set(input.id, await validateOne(input));
+      results.set(
+        input.id,
+        await validateOne({
+          input,
+          monaco,
+          getJavaScriptWorker,
+          getTypeScriptWorker,
+        }),
+      );
     } catch {
       results.set(input.id, []);
     }
@@ -88,9 +120,17 @@ export async function validateTypeScriptSources({
   return results;
 }
 
-async function validateOne(
-  input: ScriptValidationInput,
-): Promise<ScriptDiagnostic[]> {
+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,

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"