@checkstack/ui 1.8.3 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,88 @@
 # @checkstack/ui
 
+## 1.10.0
+
+### Minor Changes
+
+- f23f3c9: Add five additive shared UI primitives for list / query state surfaces:
+
+  - `ListEmptyState` - thin wrapper around `EmptyState` with the
+    canonical `"No {resource} yet"` headline and an `Inbox` default icon.
+  - `QueryErrorState` - inline error UI for failed queries; renders an
+    `error`-variant `Alert` with `extractErrorMessage` + a Retry button.
+  - `Skeleton` - pulsing placeholder block that drops its animation when
+    `usePerformance().isLowPower` is true.
+  - `ResponsiveTable` + `MobileCardList` - dual-layout pair for tabular
+    data that swaps to a stacked card layout below the `sm` breakpoint
+    (pure CSS, no JS media-query gating).
+  - `toastSuccess` / `toastError` - canonical verb-phrase and
+    `{action}: {message}` (truncated at 100 chars) toast helpers.
+
+  Each primitive ships with Storybook stories and unit tests. No
+  existing component or behaviour is changed - Phases 5-7 of the v1
+  polishing plan will retrofit consumer pages onto these primitives in
+  follow-up PRs. Phase 7 will use the existing `usePerformance()` hook
+  directly for low-power gating rather than introducing a separate
+  className-composition helper.
+
+### Patch Changes
+
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+- Updated dependencies [f23f3c9]
+  - @checkstack/common@0.11.0
+  - @checkstack/frontend-api@0.5.2
+
+## 1.9.0
+
+### Minor Changes
+
+- a06b899: Overhaul shell + inline-script health checks with real shell semantics, real ESM execution, and upstream Node/Bun IntelliSense.
+
+  **BREAKING CHANGES**
+
+  - **Shell collector** — the `Execute Script` collector now takes a single `script` string instead of `{ command, args }`. Existing configs are auto-migrated to v2: `command` + `args` are joined with POSIX single-quote escaping into the new `script` field, so behaviour is preserved. Custom UIs that hard-coded `command`/`args` field names need to switch to `script`.
+  - **Inline collector** — scripts are now executed as real ES modules in a Bun subprocess (was: `new Function()` inside a Web Worker). The legacy `return X;` style still works (it's auto-wrapped in an async IIFE), but mixed scripts that `import` _and_ `return` at the top level need to use `export default` for their result.
+
+  **FIXES**
+
+  - Shell scripts containing pipes, redirects, `awk`, command substitution, conditionals etc. no longer fail with `ENOENT`. The collector now runs through `sh -c <script>` instead of passing the full expression as `Bun.spawn`'s argv[0]. This was the original `awk … failed with ENOENT` regression.
+  - Inline scripts can now `import { loadavg } from "node:os"` (and any other `node:*` or `bun` import). They could not before, because the executor wrapped user code inside `new Function(...)` and ran it in a Web Worker that had no Node module access; the wrapper also made top-level `import` syntactically invalid (`Unexpected token '{'`).
+  - Healthcheck editor fields no longer reset while you're editing. The page was re-running its form-state init `useEffect` on every refetch of the configuration query — and that query is invalidated on every realtime `HEALTH_CHECK_RUN_COMPLETED` signal across the platform, so in-progress edits got wiped within seconds. Replaced the naive `useEffect([existingConfig])` with a new `useInitOnceForKey` hook from `@checkstack/ui` that initialises the form only on first load per healthcheck id and ignores background refetches. The hook's decision logic is a pure function (`shouldInitForKey`) and is unit-tested in `useInitOnceForKey.test.ts`.
+  - Switching between healthcheck collectors no longer mis-applies the previous collector's tokenizer / language service to the new editor. `MultiTypeEditorField` was reusing the same React instance across collector switches (same `key="script"` in both `DynamicForm` renders) and `selectedType` was initialised from `useState` only once on first mount. After a shell→typescript switch the new collector's TS content rendered through the shell branch (no TS highlighting, no IntelliSense); the reverse direction tokenised shell content through TS and surfaced nonsense errors like `2304 "Cannot find name 'and'"` on shell comments. Now a `useEffect` re-derives `selectedType` whenever `editorTypes` changes to a set that doesn't contain the current selection.
+  - Monaco workers are now bundled locally via Vite `?worker` imports and wired up through `MonacoEnvironment.getWorker` in a new `monacoWorkers.ts` module. The default `@monaco-editor/loader` CDN path silently failed CORS on worker scripts in some browsers, leaving Monaco's TS service with only the generic `editorWorkerService` — which is enough for tokenizer-only languages like shell but breaks TypeScript's semantic features entirely. Same module configures the TS service singleton (compiler options, eager-model-sync, diagnostics-options-ignore-1108) at module load instead of inside per-editor `onMount`, so the service starts pre-configured regardless of which language opens first. Migrated from the deprecated `monaco.languages.typescript.*` path to `monaco.typescript.*` (the old path is marked `{ deprecated: true }` in monaco-editor 0.55).
+  - `defineIntegration` / `defineHealthCheck` callback parameters are now typed against the schema. Previously the virtual module declared them as `(ctx: unknown) => …`, so writing `defineIntegration(async (context) => { console.log(context.event.eventId) })` produced `'context' is of type 'unknown'. (18046)`. The result type and the shared `IntegrationScriptContext` / `HealthCheckScriptContext` interfaces are now generated together in `scriptContext.ts`, so both the function-arg form and the ambient `declare const context` reference the same schema-typed shape.
+  - The shell starter template no longer uses Linux-only `/proc/loadavg` (which fails on macOS satellites with `awk: can't open file /proc/loadavg`). It now reads the 1-minute load average via `uptime` and parses both the Linux (`load average: 0.00, 0.01, 0.05`) and macOS (`load averages: 0.45 0.55 0.65`) output formats with a portable `sed`/`awk`/`tr` pipeline.
+  - Starter-template seeding is now self-healing. `DynamicForm`'s schema-defaults `useEffect` fires AFTER child seed effects in React's child-before-parent order, so the previous one-shot seed got clobbered back to `""` by the defaults call on first mount and never re-fired. Replaced the `[]`-deps effect with a two-effect pattern: an observer that latches `hasSeededRef = true` the first time `value` is observed non-empty, and a seed effect that keeps re-installing the starter while the latch is open. Once the seed sticks the latch closes; subsequent edits and realtime refetches don't re-trigger.
+
+  **NEW**
+
+  - The Monaco editor for inline scripts now mounts the real upstream `@types/node` + `bun-types` declarations as a virtual filesystem (lazy-loaded as its own JS chunk), so IntelliSense covers the full Node/Bun stdlib, the `Bun` global, `process.env`, `Buffer`, etc. DOM types are deliberately excluded so suggestions stay focused on the backend surface. `context.config` is typed from the collector's own JSON Schema.
+  - New `healthcheckScriptContext` / `integrationScriptContext` helpers (exported from `@checkstack/ui`) build a complete editor bundle in one call: TS declarations (`context.config` / `context.event.payload` + the virtual `@checkstack/healthcheck` / `@checkstack/integration` result-type modules), starter templates per language, and the shell env-var list (with platform-injected `EVENT_ID` / `DELIVERY_ID` / `PAYLOAD_*` for integrations). Both call sites — `CollectorSection.tsx` and `CreateSubscriptionDialog.tsx` — were rewired to use them, fixing a long-standing wiring gap where IntelliSense for injected values silently never reached the editor.
+  - Inline scripts can now `import { defineHealthCheck } from "@checkstack/healthcheck"` (or `defineIntegration` for integrations) for a typed return-shape assertion. The editor catches `{ success: "yes" }` as a type error against `HealthCheckScriptResult`. The runtime is just an identity function — the collector rewrites the import to a sibling helper file in the temp dir before executing.
+  - Shell editors now autocomplete env-vars after `$` and `${`. The completion list is supplied by `healthcheckScriptContext` (safe-vars whitelist) and `integrationScriptContext` (whitelist + `EVENT_ID` etc. + `PAYLOAD_*` flattened from the event's payload schema). The matcher is pure and unit-tested in `shellEnvVarMatcher.test.ts` so regex regressions are caught locally.
+  - Empty editor fields are now seeded with a working starter template per language (inline TS uses `defineHealthCheck`, inline shell does the `awk` load-average check, integration TS shows `defineIntegration` with `context.event`, integration shell lists the `$EVENT_ID` / `$PAYLOAD_*` env vars). Users see a runnable example instead of a blank canvas; once they edit, we leave their content alone.
+  - Hardened concurrency + cleanup model documented and tested: each invocation gets its own `mkdtemp` directory + UUID result marker; the `finally` block clears the timeout handle, kills any surviving subprocess (idempotent), and removes the temp directory on success, throw, _and_ timeout. New `concurrency.test.ts` proves 20 parallel inline scripts don't cross wires and that the temp-dir count returns to baseline after throws and timeouts.
+
+  **TESTING**
+
+  Tight unit tests added so changes to the editor surface don't need smoke testing:
+
+  - `scriptContext.test.ts` — 18 tests covering the generated type declarations (including explicit regression guards for `defineIntegration` / `defineHealthCheck` callback params being typed against the shared context interface rather than `unknown`), starter templates (including a guard that the shell starter doesn't depend on Linux-only `/proc/loadavg`), shell env-vars for both healthcheck + integration flavours, plus the schema-flattening utility.
+  - `shellEnvVarMatcher.test.ts` — 12 tests covering the bare `$` / braced `${` / partial-name / case-insensitive matching logic that powers Monaco's shell completion.
+  - `inline-script-normaliser.test.ts` — 13 tests covering the legacy `return X;` → IIFE wrap path, the ESM-passthrough path, and the `@checkstack/healthcheck` import rewriter.
+  - `inline-script-collector.test.ts` — 18 tests including ones that actually execute a script importing `defineHealthCheck` (named-import form) AND using the global `defineHealthCheck` (no import) to prove both code paths resolve at runtime.
+  - `concurrency.test.ts` — 4 tests proving 20 parallel runs don't collide and that the temp-dir count returns to baseline after success, throw, and timeout.
+  - `useInitOnceForKey.test.ts` — 10 tests proving the healthcheck-editor form state isn't reset when react-query refetches in the background (the original "fields reset while I'm typing" regression).
+  - `starterTemplateSelector.test.ts` — 7 tests for the pure decision function powering empty-field seeding.
+  - `security.test.ts` — added an integration test that actually executes the portable load-average pipeline through `Bun.spawn` on the current OS, catching `/proc/loadavg`-style regressions at CI time on macOS runners.
+
+  **SECURITY**
+
+  - Same env-var whitelist as before (`PATH`, `HOME`, `USER`, `LANG`, `LC_ALL`, `LC_CTYPE`, `TZ`, `TMPDIR`, `HOSTNAME`, `SHELL`). Backend secrets in the satellite process's environment remain invisible to user scripts.
+
+  See `docs/src/content/docs/backend/script-healthchecks.md` for the full user-facing guide.
+
 ## 1.8.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.8.3",
+  "version": "1.10.0",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
@@ -39,9 +39,12 @@
     "@storybook/react": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
     "@testing-library/react": "^16.0.0",
+    "@types/bun": "^1.3.14",
+    "@types/node": "^20.19.27",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^6.0.1",
+    "bun-types": "^1.3.14",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
     "storybook": "^10.3.6",
@@ -56,7 +59,8 @@
     "lint:code": "eslint . --max-warnings 0",
     "test": "bun test",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build -o storybook-static"
+    "storybook:build": "storybook build -o storybook-static",
+    "generate:monaco-types": "bun run scripts/generate-stdlib-types.ts"
   },
   "checkstack": {
     "type": "tooling"

package/scripts/generate-stdlib-types.ts

@@ -0,0 +1,90 @@
+#!/usr/bin/env bun
+/**
+ * Bundle the real `@types/node` and `bun-types` ambient declarations into a
+ * single JSON record so Monaco's TypeScript service can mount them as a
+ * virtual filesystem. The user's inline-script editor uses these for
+ * IntelliSense — `import { loadavg } from "node:os"` should autocomplete
+ * because the actual upstream `os.d.ts` is reachable, not a hand-rolled
+ * approximation.
+ *
+ * The result is keyed by virtual filesystem path so Monaco resolves
+ * cross-file `/// <reference>` directives correctly:
+ *
+ *   {
+ *     "node_modules/@types/node/index.d.ts": "...",
+ *     "node_modules/@types/node/os.d.ts": "...",
+ *     "node_modules/bun-types/index.d.ts": "...",
+ *     ...
+ *   }
+ *
+ * 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).
+ */
+import { createRequire } from "node:module";
+import { readdir, readFile, mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+const require = createRequire(import.meta.url);
+
+async function walkDts(
+  dir: string,
+  pathPrefix: string,
+): Promise<Record<string, string>> {
+  const out: Record<string, string> = {};
+  const entries = await readdir(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    const abs = path.join(dir, entry.name);
+    const rel = path.relative(dir, abs);
+    const virtualPath = `${pathPrefix}/${rel}`;
+    if (entry.isDirectory()) {
+      Object.assign(out, await walkDts(abs, virtualPath));
+    } else if (entry.name.endsWith(".d.ts")) {
+      out[virtualPath] = await readFile(abs, "utf8");
+    }
+  }
+  return out;
+}
+
+async function bundle(pkg: string, virtualPrefix: string) {
+  const pkgJsonPath = require.resolve(`${pkg}/package.json`);
+  const pkgRoot = path.dirname(pkgJsonPath);
+  console.log(`  • ${pkg} ← ${pkgRoot}`);
+  return walkDts(pkgRoot, virtualPrefix);
+}
+
+console.log("📦 Bundling Monaco stdlib types...");
+
+// Build the file map immutably, then merge — eslint's
+// `unicorn/no-immediate-mutation` flags `Object.assign(literal, ...)`.
+const nodeFiles = await bundle("@types/node", "node_modules/@types/node");
+const bunFiles = await bundle("bun-types", "node_modules/bun-types");
+
+const files: Record<string, string> = {
+  ...nodeFiles,
+  ...bunFiles,
+  // `@types/bun` is just a one-line wrapper that triple-slash-references
+  // bun-types. Inline it so consumers can `import "bun"` and have Monaco
+  // resolve it without needing the wrapper package.
+  "node_modules/@types/bun/index.d.ts": `/// <reference types="bun-types" />\n`,
+};
+
+const outDir = path.join(
+  import.meta.dir,
+  "..",
+  "src",
+  "components",
+  "CodeEditor",
+  "generated",
+);
+const outFile = path.join(outDir, "stdlib-types.json");
+
+await mkdir(outDir, { recursive: true });
+// Compact JSON — this is consumed by code, not humans.
+await writeFile(outFile, JSON.stringify(files), "utf8");
+
+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)}`,
+);

package/src/components/CodeEditor/CodeEditor.tsx

@@ -6,9 +6,16 @@ export {
   type CodeEditorProps,
   type CodeEditorLanguage,
   type TemplateProperty,
+  type ShellEnvVar,
 } from "./MonacoEditor";
 
 export {
   generateTypeDefinitions,
   type GenerateTypesOptions,
 } from "./generateTypeDefinitions";
+
+export {
+  healthcheckScriptContext,
+  integrationScriptContext,
+  type ScriptEditorContext,
+} from "./scriptContext";

package/src/components/CodeEditor/MonacoEditor.tsx

@@ -1,17 +1,34 @@
+// Side-effect import: bundles Monaco's per-language workers via Vite
+// `?worker` imports and points `@monaco-editor/react`'s loader at the
+// local Monaco rather than its CDN default. Must run before any
+// `<Editor>` mount. See monacoWorkers.ts for the full explanation
+// (TL;DR: without local workers, the TS service can't spawn `ts.worker`,
+// so TypeScript editors silently degrade to no-language-service mode
+// while shell editors keep working because they only need the generic
+// editor worker).
+import "./monacoWorkers";
+
 import React from "react";
 import Editor, {
-  loader,
   type OnMount,
   type Monaco,
 } from "@monaco-editor/react";
 import type { editor, Position } from "monaco-editor";
 import { detectOpenTemplate, detectAutoClosedBraces } from "./templateUtils";
-
-// Configure Monaco to use self-hosted files (for air-gapped environments)
-// The @monaco-editor/react package will load from node_modules by default
-loader.config({
-  "vs/nls": { availableLanguages: { "*": "en" } },
-});
+import { ensureMonacoStdlib } from "./monacoStdlib";
+import {
+  matchShellEnvVarTrigger,
+  buildShellEnvVarInsertText,
+} from "./shellEnvVarMatcher";
+
+// Note on loader config: previously this module called
+//   loader.config({ "vs/nls": { availableLanguages: { "*": "en" } } })
+// to keep Monaco in English when the loader fetched it from a CDN. We
+// now bundle Monaco locally (see monacoWorkers.ts → loader.config({
+// monaco })), which short-circuits the AMD loader entirely — the NLS
+// config can't apply because no remote Monaco is ever fetched. English
+// is the default for the locally bundled `monaco-editor` package, so
+// removing the call has no observable effect.
 
 export type CodeEditorLanguage =
   | "json"
@@ -34,6 +51,19 @@ export interface TemplateProperty {
   description?: string;
 }
 
+/**
+ * A single environment variable available to shell scripts. Surfaced as
+ * a Monaco completion item after the user types `$` or `${` in shell mode.
+ */
+export interface ShellEnvVar {
+  /** Variable name without the leading `$`, e.g. `EVENT_ID`. */
+  name: string;
+  /** Optional description shown in the completion popup. */
+  description?: string;
+  /** Optional example value shown in the completion item detail. */
+  example?: string;
+}
+
 export interface CodeEditorProps {
   /** Unique identifier for the editor */
   id?: string;
@@ -59,6 +89,13 @@ export interface CodeEditorProps {
    * When provided, typing "{{" triggers autocomplete with available template variables.
    */
   templateProperties?: TemplateProperty[];
+  /**
+   * Optional environment-variable hints for shell mode. When provided and
+   * `language === "shell"`, Monaco autocompletes them after `$` and `${`.
+   * Use this to surface platform-injected vars like `EVENT_ID` or
+   * `PAYLOAD_*` without forcing users to memorise the names.
+   */
+  shellEnvVars?: ShellEnvVar[];
 }
 
 // Map language names to Monaco language IDs
@@ -72,76 +109,60 @@ const languageMap: Record<string, string> = {
   shell: "shell",
 };
 
+/**
+ * File-extension hint used in the per-editor Monaco model URI. Monaco
+ * decides which language service to use partly from the URI's extension,
+ * so a path like `<id>.ts` reliably yields the TypeScript service even
+ * if the `language` prop is still being reconciled by the React wrapper
+ * during a fast tab-switch. This is what fixes the "TS check now has
+ * shell highlighting after I created an SSH check" bug: without
+ * different paths, every `<CodeEditor>` mount reuses Monaco's _default_
+ * model — and the model's previous language sticks around.
+ */
+const LANGUAGE_EXTENSIONS: Record<string, string> = {
+  json: "json",
+  yaml: "yaml",
+  xml: "xml",
+  markdown: "md",
+  javascript: "js",
+  typescript: "ts",
+  shell: "sh",
+  "json-template": "json",
+};
+
 // Track if we've registered the json-template language
 let jsonTemplateLanguageRegistered = false;
 
 /**
- * Default type definitions for backend TypeScript/JavaScript editors.
- * Provides console and fetch APIs without DOM types.
- * Used when no custom typeDefinitions are provided to the editor.
+ * Default type definitions injected on top of the bundled Node/Bun stdlib.
+ *
+ * `ensureMonacoStdlib` mounts the real upstream `@types/node` + `bun-types`
+ * d.ts files into Monaco's virtual filesystem, so `import { loadavg } from
+ * "node:os"`, `fetch`, `console`, `URL`, etc. are all already declared.
+ * This block only adds what's _specific_ to the inline-script runner —
+ * the `context` global and the expected return shape.
+ *
+ * Used when no custom typeDefinitions prop is passed.
  */
 const DEFAULT_BACKEND_TYPE_DEFINITIONS = `
-/** Expected return type for healthcheck scripts */
+/** Expected return shape for inline-script health checks. */
 interface HealthCheckScriptResult {
-  /** Whether the health check passed */
+  /** Whether the health check passed. */
   success: boolean;
-  /** Optional status message */
+  /** Optional status message — surfaces in the run detail. */
   message?: string;
-  /** Optional numeric value for metrics */
+  /** Optional numeric value — feeds the value chart + anomaly detection. */
   value?: number;
 }
 
-/** Console for logging */
-declare const console: {
-  /** Log an info message */
-  log(...args: unknown[]): void;
-  /** Log a warning message */
-  warn(...args: unknown[]): void;
-  /** Log an error message */
-  error(...args: unknown[]): void;
-  /** Log an info message */
-  info(...args: unknown[]): void;
+/**
+ * Runtime context exposed by the inline-script runner.
+ * Available as a global, so just reference \`context.config\`.
+ */
+declare const context: {
+  /** The raw collector configuration object. */
+  readonly config: Record<string, unknown>;
 };
-
-/** HTTP Request configuration */
-interface RequestInit {
-  method?: string;
-  headers?: Record<string, string> | Headers;
-  body?: string | FormData | URLSearchParams;
-  mode?: 'cors' | 'no-cors' | 'same-origin';
-  credentials?: 'omit' | 'same-origin' | 'include';
-  cache?: 'default' | 'no-store' | 'reload' | 'no-cache' | 'force-cache';
-  redirect?: 'follow' | 'error' | 'manual';
-  signal?: AbortSignal;
-}
-
-/** HTTP Response */
-interface Response {
-  readonly ok: boolean;
-  readonly status: number;
-  readonly statusText: string;
-  readonly headers: Headers;
-  readonly url: string;
-  readonly redirected: boolean;
-  json(): Promise<unknown>;
-  text(): Promise<string>;
-  blob(): Promise<Blob>;
-  arrayBuffer(): Promise<ArrayBuffer>;
-  clone(): Response;
-}
-
-/** HTTP Headers */
-interface Headers {
-  get(name: string): string | null;
-  has(name: string): boolean;
-  set(name: string, value: string): void;
-  append(name: string, value: string): void;
-  delete(name: string): void;
-  forEach(callback: (value: string, key: string) => void): void;
-}
-
-/** Fetch API for making HTTP requests */
-declare function fetch(input: string | URL, init?: RequestInit): Promise<Response>;
 `;
 
 /**
@@ -158,6 +179,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   placeholder,
   typeDefinitions,
   templateProperties,
+  shellEnvVars,
 }) => {
   const editorRef = React.useRef<editor.IStandaloneCodeEditor | null>(null);
   const monacoRef = React.useRef<Monaco | null>(null);
@@ -216,39 +238,24 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     monacoRef.current = monaco;
     setIsEditorMounted(true);
 
-    // Configure TypeScript/JavaScript to exclude DOM types for backend scripts
-    // This prevents Web API autocompletions (AudioContext, Canvas, etc.)
-    if (language === "typescript" || language === "javascript") {
-      const defaults =
-        language === "typescript"
-          ? monaco.languages.typescript.typescriptDefaults
-          : monaco.languages.typescript.javascriptDefaults;
-
-      // Configure compiler options to exclude DOM types but keep ES libs
-      // This gives us Promise, Array, etc. but not AudioContext, Canvas, etc.
-      defaults.setCompilerOptions({
-        target: monaco.languages.typescript.ScriptTarget.ESNext,
-        module: monaco.languages.typescript.ModuleKind.ESNext,
-        lib: ["esnext"], // Include ES libs but NOT DOM
-        allowNonTsExtensions: true,
-        noEmit: true,
-        strict: true,
-      });
-
-      // Suppress certain diagnostics that don't apply to our script context
-      // - 1108: "A 'return' statement can only be used within a function body"
-      //         Our scripts are wrapped in async function at runtime, so return is valid
-      defaults.setDiagnosticsOptions({
-        diagnosticCodesToIgnore: [1108],
-      });
 
-      // Disable fetching default lib content (prevents DOM types loading)
-      defaults.setEagerModelSync(true);
 
-      // Add custom type definitions if provided, otherwise add minimal defaults
-      const definitions = typeDefinitions ?? DEFAULT_BACKEND_TYPE_DEFINITIONS;
-      const lib = defaults.addExtraLib(definitions, "file:///context.d.ts");
-      disposablesRef.current.push(lib);
+    // Per-editor TS/JS setup. All GLOBAL TS-service config (compiler
+    // options, diagnostics options, eager model sync) is done once at
+    // module load in monacoWorkers.ts — doing it here, after the
+    // service may have already initialised lazily from a previous
+    // mount, was the root cause of the "open shell first, TS service
+    // is broken" bug.
+    //
+    // The per-editor `addExtraLib` for THIS editor's `context.d.ts` is
+    // handled by the useEffect below (so it can also refresh when the
+    // `typeDefinitions` prop changes), keyed by `modelIdRef.current` so
+    // two TS editors with different schemas don't share a virtual path.
+    //
+    // Here we only kick off the lazy stdlib bundle so the ~3 MB chunk
+    // starts streaming on the first TS editor mount.
+    if (language === "typescript" || language === "javascript") {
+      void ensureMonacoStdlib(monaco);
     }
 
     // Handle validation for template syntax in JSON
@@ -432,41 +439,86 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
     };
   }, [templateProperties, language, isEditorMounted]);
 
-  // Update type definitions when they change
+  // Install (and refresh) the per-editor context.d.ts.
+  //
+  // - Includes `isEditorMounted` in the deps so the effect runs after
+  //   `monacoRef.current` is wired up by `handleEditorDidMount`.
+  // - Uses a unique virtual path keyed by this editor instance
+  //   (`context-<modelId>.d.ts`) so two TS editors with different
+  //   collector schemas can't overwrite each other's context types.
+  // - Returns a cleanup that disposes the registered lib, both on
+  //   unmount and when `typeDefinitions` / `language` change.
   React.useEffect(() => {
+    if (!isEditorMounted) return;
     if (!monacoRef.current) return;
     if (language !== "typescript" && language !== "javascript") return;
 
     const monaco = monacoRef.current;
     const defaults =
       language === "typescript"
-        ? monaco.languages.typescript.typescriptDefaults
-        : monaco.languages.typescript.javascriptDefaults;
-
-    // Configure compiler options to exclude DOM types but keep ES libs
-    defaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.ESNext,
-      module: monaco.languages.typescript.ModuleKind.ESNext,
-      lib: ["esnext"], // Include ES libs but NOT DOM
-      allowNonTsExtensions: true,
-      noEmit: true,
-      strict: true,
-    });
+        ? monaco.typescript.typescriptDefaults
+        : monaco.typescript.javascriptDefaults;
 
-    // Suppress certain diagnostics that don't apply to our script context
-    defaults.setDiagnosticsOptions({
-      diagnosticCodesToIgnore: [1108], // "A 'return' statement can only be used within a function body"
-    });
-
-    // Add type definitions (custom or default)
     const definitions = typeDefinitions ?? DEFAULT_BACKEND_TYPE_DEFINITIONS;
-    const lib = defaults.addExtraLib(definitions, "file:///context.d.ts");
-    disposablesRef.current.push(lib);
+    const contextLibPath = `file:///context-${modelIdRef.current}.d.ts`;
+    const lib = defaults.addExtraLib(definitions, contextLibPath);
 
     return () => {
       lib.dispose();
     };
-  }, [typeDefinitions, language]);
+  }, [typeDefinitions, language, isEditorMounted]);
+
+  // Shell env-var completion. When the caller passes `shellEnvVars`, we
+  // register a Monaco provider that suggests variable names after the
+  // user types `$` or `${` — and also brace-closes `${name}` correctly.
+  // Re-registers when the var list or language changes.
+  React.useEffect(() => {
+    if (!isEditorMounted) return;
+    if (!monacoRef.current) return;
+    if (language !== "shell") return;
+    if (!shellEnvVars || shellEnvVars.length === 0) return;
+
+    const monaco = monacoRef.current;
+    const provider = monaco.languages.registerCompletionItemProvider("shell", {
+      triggerCharacters: ["$", "{"],
+      provideCompletionItems: (model: editor.ITextModel, position: Position) => {
+        const lineText = model.getLineContent(position.lineNumber);
+        const textBefore = lineText.slice(0, position.column - 1);
+        const match = matchShellEnvVarTrigger(textBefore);
+        if (!match) return { suggestions: [] };
+
+        const startColumn = position.column - match.prefixLength;
+
+        const suggestions = shellEnvVars
+          .filter(
+            (v) =>
+              match.query === "" ||
+              v.name.toUpperCase().includes(match.query),
+          )
+          .map((v, index) => ({
+            label: `$${v.name}`,
+            kind: monaco.languages.CompletionItemKind.Variable,
+            detail: v.example ? `e.g. ${v.example}` : "shell env var",
+            documentation: v.description,
+            insertText: buildShellEnvVarInsertText(match, v.name),
+            sortText: ` ${String(index).padStart(4, "0")}`,
+            filterText: `$${v.name}`,
+            range: {
+              startLineNumber: position.lineNumber,
+              startColumn,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            },
+          }));
+
+        return { suggestions, incomplete: false };
+      },
+    });
+
+    return () => {
+      provider.dispose();
+    };
+  }, [shellEnvVars, language, isEditorMounted]);
 
   // Calculate height from minHeight
   const heightValue = minHeight.replace("px", "");
@@ -479,6 +531,39 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       ? "json-template"
       : (languageMap[language] ?? language);
 
+  // Stable, unique-per-instance model path. We need this for two reasons:
+  //
+  //  1. Without a `path`, all `@monaco-editor/react` instances share the
+  //     single default in-memory model. When you switch between a TS
+  //     inline-script check and an SSH (shell) check, the new mount
+  //     inherits the previous model's language, producing visibly wrong
+  //     syntax highlighting until something else triggers a refresh.
+  //
+  //  2. The extension portion (`.ts`, `.sh`, `.json`, ...) is one of the
+  //     signals Monaco's language service uses to decide which tokenizer
+  //     and worker to apply, so encoding the effective language in the
+  //     path makes the language choice unambiguous.
+  //
+  // We deliberately use a fresh UUID per mount (in a `useRef`, lazy
+  // init) rather than `useId`: `useId`'s output is derived from the
+  // call-site's position in the React tree, so a remount of the same
+  // `<CodeEditor>` slot — typical when the user switches between two
+  // healthcheck pages that React Router reuses — can return the same
+  // id as before. `@monaco-editor/react` then reuses the previous
+  // model (and its language) from Monaco's registry, which is exactly
+  // the "TS check now has shell highlighting" bug.
+  const modelIdRef = React.useRef<string | null>(null);
+  if (modelIdRef.current === null) {
+    modelIdRef.current = `cs-editor-${
+      typeof crypto !== "undefined" && "randomUUID" in crypto
+        ? crypto.randomUUID()
+        : Math.random().toString(36).slice(2, 11)
+    }`;
+  }
+  const pathExtension =
+    LANGUAGE_EXTENSIONS[effectiveLanguage] ?? effectiveLanguage;
+  const modelPath = `${modelIdRef.current}.${pathExtension}`;
+
   return (
     <div
       id={id}
@@ -488,6 +573,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
       <Editor
         height={`${Math.max(numericHeight, 100)}px`}
         language={effectiveLanguage}
+        path={modelPath}
         value={value}
         onChange={(newValue) => onChange(newValue ?? "")}
         beforeMount={handleEditorWillMount}