diff --git a/frontend/discourse/app/components/d-modal.gjs b/frontend/discourse/app/components/d-modal.gjs
index b511bf3603d9a..a24d8673d1a2f 100644
--- a/frontend/discourse/app/components/d-modal.gjs
+++ b/frontend/discourse/app/components/d-modal.gjs
@@ -201,7 +201,7 @@ export default class DModal extends Component {
       event.preventDefault();
     }
 
-    if (event.key === "Escape" && this.dismissable) {
+    if (event.key === "Escape" && this.dismissable && !event.defaultPrevented) {
       event.stopPropagation();
       this.closeModal(CLOSE_INITIATED_BY_ESC);
     }
diff --git a/frontend/discourse/app/lib/load-codemirror.js b/frontend/discourse/app/lib/load-codemirror.js
new file mode 100644
index 0000000000000..1cd30f208ddbd
--- /dev/null
+++ b/frontend/discourse/app/lib/load-codemirror.js
@@ -0,0 +1,9 @@
+import { waitForPromise } from "@ember/test-waiters";
+
+export default async function loadCodemirrorEditor() {
+  return (
+    await waitForPromise(
+      import("discourse/static/codemirror/components/codemirror-editor")
+    )
+  ).default;
+}
diff --git a/frontend/discourse/app/static/codemirror/build-extensions.js b/frontend/discourse/app/static/codemirror/build-extensions.js
new file mode 100644
index 0000000000000..c547575063268
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/build-extensions.js
@@ -0,0 +1,17 @@
+import * as cmAutocomplete from "@codemirror/autocomplete";
+import * as cmLanguage from "@codemirror/language";
+import * as cmState from "@codemirror/state";
+import * as cmView from "@codemirror/view";
+import * as lezerHighlight from "@lezer/highlight";
+import { expressionUtils } from "./expression-utils";
+
+export function buildCmParams() {
+  return {
+    cmAutocomplete,
+    cmLanguage,
+    cmState,
+    cmView,
+    lezerHighlight,
+    utils: expressionUtils,
+  };
+}
diff --git a/frontend/discourse/app/static/codemirror/completions-data.js b/frontend/discourse/app/static/codemirror/completions-data.js
new file mode 100644
index 0000000000000..17c7667165d08
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/completions-data.js
@@ -0,0 +1,577 @@
+function sectionHeader(name) {
+  return () => {
+    const header = document.createElement("div");
+    header.className = "cm-expr-section-header";
+    header.textContent = name;
+    return header;
+  };
+}
+
+export function section(name, rank) {
+  return { name, rank, header: sectionHeader(name) };
+}
+
+export const SECTION_RECOMMENDED = section("Recommended", 0);
+export const SECTION_PROPERTIES = section("Properties", 2);
+export const SECTION_METHODS = section("Methods", 3);
+export const SECTION_METADATA = section("Metadata", 4);
+export const SECTION_GLOBALS = section("Globals", 5);
+
+export function info(signature, description, example) {
+  return () => {
+    const div = document.createElement("div");
+    div.className = "cm-expr-completion-info";
+
+    const sig = document.createElement("div");
+    sig.className = "cm-expr-completion-info__signature";
+    sig.textContent = signature;
+    div.appendChild(sig);
+
+    const desc = document.createElement("div");
+    desc.className = "cm-expr-completion-info__description";
+    desc.textContent = description;
+    div.appendChild(desc);
+
+    if (example) {
+      const ex = document.createElement("div");
+      ex.className = "cm-expr-completion-info__example";
+      const code = document.createElement("code");
+      code.textContent = example;
+      ex.appendChild(code);
+      div.appendChild(ex);
+    }
+
+    return div;
+  };
+}
+
+export const STRING_METHODS = [
+  {
+    label: "length",
+    type: "property",
+    detail: "number",
+    info: info("str.length", "The number of characters in the string."),
+  },
+  {
+    label: "includes",
+    type: "method",
+    detail: "(str) => boolean",
+    info: info(
+      "str.includes(searchString, position?)",
+      "Returns true if the string contains the substring.",
+      '"hello".includes("ell") → true'
+    ),
+  },
+  {
+    label: "startsWith",
+    type: "method",
+    detail: "(str) => boolean",
+    info: info(
+      "str.startsWith(searchString, position?)",
+      "Returns true if the string starts with the given characters."
+    ),
+  },
+  {
+    label: "endsWith",
+    type: "method",
+    detail: "(str) => boolean",
+    info: info(
+      "str.endsWith(searchString, length?)",
+      "Returns true if the string ends with the given characters."
+    ),
+  },
+  {
+    label: "split",
+    type: "method",
+    detail: "(sep) => string[]",
+    info: info(
+      "str.split(separator, limit?)",
+      "Splits the string into an array of substrings.",
+      '"a,b,c".split(",") → ["a","b","c"]'
+    ),
+  },
+  {
+    label: "replaceAll",
+    type: "method",
+    detail: "(search, replace) => string",
+    info: info(
+      "str.replaceAll(search, replacement)",
+      "Replaces all occurrences of a search string."
+    ),
+  },
+  {
+    label: "replace",
+    type: "method",
+    detail: "(search, replace) => string",
+    info: info(
+      "str.replace(search, replacement)",
+      "Replaces the first occurrence of a search string."
+    ),
+  },
+  {
+    label: "trim",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "str.trim()",
+      "Removes whitespace from both ends of the string."
+    ),
+  },
+  {
+    label: "trimStart",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "str.trimStart()",
+      "Removes whitespace from the beginning of the string."
+    ),
+  },
+  {
+    label: "trimEnd",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "str.trimEnd()",
+      "Removes whitespace from the end of the string."
+    ),
+  },
+  {
+    label: "toLowerCase",
+    type: "method",
+    detail: "() => string",
+    info: info("str.toLowerCase()", "Converts the string to lowercase."),
+  },
+  {
+    label: "toUpperCase",
+    type: "method",
+    detail: "() => string",
+    info: info("str.toUpperCase()", "Converts the string to uppercase."),
+  },
+  {
+    label: "slice",
+    type: "method",
+    detail: "(start, end?) => string",
+    info: info(
+      "str.slice(start, end?)",
+      "Extracts a section of the string.",
+      '"hello".slice(1, 4) → "ell"'
+    ),
+  },
+  {
+    label: "substring",
+    type: "method",
+    detail: "(start, end?) => string",
+    info: info(
+      "str.substring(start, end?)",
+      "Returns the part of the string between two indices."
+    ),
+  },
+  {
+    label: "indexOf",
+    type: "method",
+    detail: "(str) => number",
+    info: info(
+      "str.indexOf(searchValue, fromIndex?)",
+      "Returns the index of the first occurrence, or -1 if not found."
+    ),
+  },
+  {
+    label: "match",
+    type: "method",
+    detail: "(regex) => array",
+    info: info(
+      "str.match(regexp)",
+      "Matches the string against a regular expression."
+    ),
+  },
+  {
+    label: "concat",
+    type: "method",
+    detail: "(...strings) => string",
+    info: info("str.concat(...strings)", "Concatenates one or more strings."),
+  },
+];
+
+export const NUMBER_METHODS = [
+  {
+    label: "toFixed",
+    type: "method",
+    detail: "(digits?) => string",
+    info: info(
+      "num.toFixed(digits?)",
+      "Formats the number with a fixed number of decimal places.",
+      '(3.14159).toFixed(2) → "3.14"'
+    ),
+  },
+  {
+    label: "toString",
+    type: "method",
+    detail: "(radix?) => string",
+    info: info(
+      "num.toString(radix?)",
+      "Returns a string representation of the number."
+    ),
+  },
+  {
+    label: "toPrecision",
+    type: "method",
+    detail: "(precision?) => string",
+    info: info(
+      "num.toPrecision(precision?)",
+      "Formats the number to a specified precision."
+    ),
+  },
+  {
+    label: "toLocaleString",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "num.toLocaleString(locales?, options?)",
+      "Returns a locale-sensitive string representation."
+    ),
+  },
+];
+
+export const BOOLEAN_METHODS = [
+  {
+    label: "toString",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "bool.toString()",
+      "Converts true to 'true' and false to 'false'."
+    ),
+  },
+];
+
+export const ARRAY_METHODS = [
+  {
+    label: "length",
+    type: "property",
+    detail: "number",
+    info: info("arr.length", "The number of elements in the array."),
+  },
+  {
+    label: "map",
+    type: "method",
+    detail: "(fn) => array",
+    info: info(
+      "arr.map(callback)",
+      "Creates a new array with the results of calling a function on every element.",
+      "[1,2,3].map(x => x * 2) → [2,4,6]"
+    ),
+  },
+  {
+    label: "filter",
+    type: "method",
+    detail: "(fn) => array",
+    info: info(
+      "arr.filter(callback)",
+      "Creates a new array with elements that pass the test.",
+      "[1,2,3,4].filter(x => x > 2) → [3,4]"
+    ),
+  },
+  {
+    label: "find",
+    type: "method",
+    detail: "(fn) => item",
+    info: info(
+      "arr.find(callback)",
+      "Returns the first element that satisfies the testing function."
+    ),
+  },
+  {
+    label: "includes",
+    type: "method",
+    detail: "(item) => boolean",
+    info: info(
+      "arr.includes(value, fromIndex?)",
+      "Returns true if the array contains the specified value."
+    ),
+  },
+  {
+    label: "join",
+    type: "method",
+    detail: "(sep?) => string",
+    info: info(
+      "arr.join(separator?)",
+      "Joins all elements into a string.",
+      '["a","b","c"].join("-") → "a-b-c"'
+    ),
+  },
+  {
+    label: "slice",
+    type: "method",
+    detail: "(start, end?) => array",
+    info: info(
+      "arr.slice(start?, end?)",
+      "Returns a shallow copy of a portion of the array."
+    ),
+  },
+  {
+    label: "sort",
+    type: "method",
+    detail: "(fn?) => array",
+    info: info(
+      "arr.sort(compareFn?)",
+      "Sorts the elements of the array in place."
+    ),
+  },
+  {
+    label: "reverse",
+    type: "method",
+    detail: "() => array",
+    info: info("arr.reverse()", "Reverses the order of elements."),
+  },
+  {
+    label: "reduce",
+    type: "method",
+    detail: "(fn, init?) => any",
+    info: info(
+      "arr.reduce(callback, initialValue?)",
+      "Reduces the array to a single value.",
+      "[1,2,3].reduce((sum, x) => sum + x, 0) → 6"
+    ),
+  },
+  {
+    label: "indexOf",
+    type: "method",
+    detail: "(item) => number",
+    info: info(
+      "arr.indexOf(value, fromIndex?)",
+      "Returns the first index of the value, or -1 if not found."
+    ),
+  },
+  {
+    label: "concat",
+    type: "method",
+    detail: "(...arrays) => array",
+    info: info(
+      "arr.concat(...values)",
+      "Merges arrays and/or values into a new array."
+    ),
+  },
+];
+
+export const DATE_METHODS = [
+  {
+    label: "toISOString",
+    type: "method",
+    detail: "() => string",
+    info: info("date.toISOString()", "Returns the date as an ISO 8601 string."),
+  },
+  {
+    label: "toLocaleDateString",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "date.toLocaleDateString(locales?, options?)",
+      "Returns a locale-sensitive date string."
+    ),
+  },
+  {
+    label: "getTime",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getTime()", "Returns milliseconds since Unix epoch."),
+  },
+  {
+    label: "getFullYear",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getFullYear()", "Returns the four-digit year."),
+  },
+  {
+    label: "getMonth",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getMonth()", "Returns the month (0-11)."),
+  },
+  {
+    label: "getDate",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getDate()", "Returns the day of the month (1-31)."),
+  },
+  {
+    label: "getHours",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getHours()", "Returns the hour (0-23)."),
+  },
+  {
+    label: "getMinutes",
+    type: "method",
+    detail: "() => number",
+    info: info("date.getMinutes()", "Returns the minutes (0-59)."),
+  },
+  {
+    label: "toLocaleString",
+    type: "method",
+    detail: "() => string",
+    info: info(
+      "date.toLocaleString(locales?, options?)",
+      "Returns a locale-sensitive date and time string."
+    ),
+  },
+];
+
+export const GLOBAL_COMPLETIONS = [
+  {
+    label: "Math",
+    type: "variable",
+    detail: "object",
+    info: "Mathematical constants and functions (Math.round, Math.random, etc.)",
+  },
+  {
+    label: "JSON",
+    type: "variable",
+    detail: "object",
+    info: "JSON parsing and serialization (JSON.parse, JSON.stringify).",
+  },
+  {
+    label: "Object",
+    type: "variable",
+    detail: "object",
+    info: "Object utilities (Object.keys, Object.values, Object.entries).",
+  },
+  {
+    label: "Array",
+    type: "variable",
+    detail: "object",
+    info: "Array utilities (Array.isArray, Array.from).",
+  },
+  {
+    label: "String",
+    type: "variable",
+    detail: "object",
+    info: "String constructor and utilities.",
+  },
+  {
+    label: "Number",
+    type: "variable",
+    detail: "object",
+    info: "Number utilities (Number.isInteger, Number.parseFloat).",
+  },
+  {
+    label: "Date",
+    type: "variable",
+    detail: "object",
+    info: "Date constructor. Use new Date() to create dates.",
+  },
+  {
+    label: "parseInt",
+    type: "function",
+    detail: "(string, radix?) => number",
+    info: "Parses a string and returns an integer.",
+  },
+  {
+    label: "parseFloat",
+    type: "function",
+    detail: "(string) => number",
+    info: "Parses a string and returns a floating-point number.",
+  },
+  {
+    label: "encodeURIComponent",
+    type: "function",
+    detail: "(string) => string",
+    info: "Encodes a URI component by replacing special characters.",
+  },
+  {
+    label: "decodeURIComponent",
+    type: "function",
+    detail: "(string) => string",
+    info: "Decodes an encoded URI component.",
+  },
+  {
+    label: "isNaN",
+    type: "function",
+    detail: "(value) => boolean",
+    info: "Returns true if the value is NaN.",
+  },
+  {
+    label: "isFinite",
+    type: "function",
+    detail: "(value) => boolean",
+    info: "Returns true if the value is a finite number.",
+  },
+];
+
+// Non-enumerable, so Object.keys won't find them — listed explicitly.
+export const GLOBAL_STATIC_METHODS = {
+  Math: [
+    { label: "abs", type: "function", detail: "(x) => number" },
+    { label: "ceil", type: "function", detail: "(x) => number" },
+    { label: "floor", type: "function", detail: "(x) => number" },
+    { label: "round", type: "function", detail: "(x) => number" },
+    { label: "max", type: "function", detail: "(...values) => number" },
+    { label: "min", type: "function", detail: "(...values) => number" },
+    { label: "random", type: "function", detail: "() => number" },
+    { label: "pow", type: "function", detail: "(base, exp) => number" },
+    { label: "sqrt", type: "function", detail: "(x) => number" },
+    { label: "trunc", type: "function", detail: "(x) => number" },
+    { label: "PI", type: "property", detail: "number" },
+  ],
+  JSON: [
+    { label: "parse", type: "function", detail: "(text) => any" },
+    { label: "stringify", type: "function", detail: "(value) => string" },
+  ],
+  Object: [
+    { label: "keys", type: "function", detail: "(obj) => string[]" },
+    { label: "values", type: "function", detail: "(obj) => any[]" },
+    { label: "entries", type: "function", detail: "(obj) => [string, any][]" },
+    {
+      label: "assign",
+      type: "function",
+      detail: "(target, ...sources) => object",
+    },
+    { label: "fromEntries", type: "function", detail: "(iterable) => object" },
+  ],
+  Array: [
+    { label: "isArray", type: "function", detail: "(value) => boolean" },
+    { label: "from", type: "function", detail: "(iterable) => array" },
+  ],
+  Number: [
+    { label: "isInteger", type: "function", detail: "(value) => boolean" },
+    { label: "isFinite", type: "function", detail: "(value) => boolean" },
+    { label: "isNaN", type: "function", detail: "(value) => boolean" },
+    { label: "parseInt", type: "function", detail: "(string) => number" },
+    { label: "parseFloat", type: "function", detail: "(string) => number" },
+  ],
+  String: [
+    { label: "fromCharCode", type: "function", detail: "(...codes) => string" },
+  ],
+  Date: [
+    { label: "now", type: "function", detail: "() => number" },
+    { label: "parse", type: "function", detail: "(string) => number" },
+  ],
+};
+
+function buildMethodMap(methods) {
+  return new Map(methods.map((m) => [m.label, m]));
+}
+
+const METHOD_DOCS_BY_TYPE = {
+  string: buildMethodMap(STRING_METHODS),
+  number: buildMethodMap(NUMBER_METHODS),
+  boolean: buildMethodMap(BOOLEAN_METHODS),
+  array: buildMethodMap(ARRAY_METHODS),
+  date: buildMethodMap(DATE_METHODS),
+};
+
+export function lookupMethodDoc(name, parentValue) {
+  if (parentValue === null || parentValue === undefined) {
+    return null;
+  }
+  let typeName;
+  if (Array.isArray(parentValue)) {
+    typeName = "array";
+  } else if (parentValue instanceof Date) {
+    typeName = "date";
+  } else {
+    typeName = typeof parentValue;
+  }
+  return METHOD_DOCS_BY_TYPE[typeName]?.get(name) ?? null;
+}
+
+export const GLOBAL_DOCS = new Map(GLOBAL_COMPLETIONS.map((g) => [g.label, g]));
diff --git a/frontend/discourse/app/static/codemirror/components/codemirror-editor.gjs b/frontend/discourse/app/static/codemirror/components/codemirror-editor.gjs
new file mode 100644
index 0000000000000..cbcd67723950e
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/components/codemirror-editor.gjs
@@ -0,0 +1,162 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
+import { closeCompletion, completionStatus } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { EditorState } from "@codemirror/state";
+import {
+  EditorView,
+  keymap,
+  lineNumbers,
+  placeholder,
+  ViewPlugin,
+} from "@codemirror/view";
+import { bind } from "discourse/lib/decorators";
+import { buildCmParams } from "../build-extensions";
+
+export default class CodemirrorEditor extends Component {
+  @tracked view = null;
+  #lastValue;
+  #suppressChange = false;
+
+  @action
+  setup(container) {
+    const extensions = [
+      history(),
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) {
+          const value = update.state.doc.toString();
+          this.#lastValue = value;
+          if (!this.#suppressChange) {
+            this.args.change?.(value);
+          }
+        }
+        if (update.focusChanged) {
+          if (update.view.hasFocus) {
+            this.args.focusIn?.();
+          } else {
+            this.args.focusOut?.();
+          }
+        }
+      }),
+    ];
+
+    if (this.args.placeholder) {
+      extensions.push(placeholder(this.args.placeholder));
+    }
+
+    if (this.args.lineNumbers) {
+      extensions.push(lineNumbers());
+    }
+
+    if (this.args.lineWrapping) {
+      extensions.push(EditorView.lineWrapping);
+    }
+
+    if (this.args.readOnly) {
+      extensions.push(
+        EditorState.readOnly.of(true),
+        EditorView.editable.of(false)
+      );
+    }
+
+    if (this.args.singleLine) {
+      extensions.push(
+        EditorState.transactionFilter.of((tr) => {
+          if (tr.newDoc.lines > 1) {
+            return [];
+          }
+          return tr;
+        })
+      );
+    }
+
+    extensions.push(
+      ViewPlugin.fromClass(
+        class {
+          constructor(view) {
+            this.view = view;
+            this.handler = (event) => {
+              if (event.key !== "Escape" || !this.view.hasFocus) {
+                return;
+              }
+              if (completionStatus(this.view.state)) {
+                closeCompletion(this.view);
+              } else {
+                this.view.contentDOM.blur();
+              }
+              event.preventDefault();
+            };
+            window.addEventListener("keydown", this.handler, { capture: true });
+          }
+
+          destroy() {
+            window.removeEventListener("keydown", this.handler, {
+              capture: true,
+            });
+          }
+        }
+      )
+    );
+
+    if (this.args.extensions) {
+      extensions.push(...this.args.extensions(buildCmParams()));
+    }
+
+    const initialValue = this.args.value ?? "";
+
+    this.view = new EditorView({
+      parent: container,
+      state: EditorState.create({
+        doc: initialValue,
+        extensions,
+      }),
+    });
+
+    this.#lastValue = initialValue;
+
+    this.args.onSetup?.(this.view);
+  }
+
+  @bind
+  updateValue() {
+    if (!this.view) {
+      return;
+    }
+
+    const value = this.args.value ?? "";
+    if (value === this.#lastValue) {
+      return;
+    }
+
+    this.#suppressChange = true;
+    this.view.dispatch({
+      changes: {
+        from: 0,
+        to: this.view.state.doc.length,
+        insert: value,
+      },
+    });
+    this.#lastValue = value;
+    this.#suppressChange = false;
+  }
+
+  @action
+  teardown() {
+    this.view?.destroy();
+    this.view = null;
+  }
+
+  <template>
+    <div
+      class="codemirror-editor {{@class}}"
+      {{didInsert this.setup}}
+      {{didUpdate this.updateValue @value}}
+      {{willDestroy this.teardown}}
+    ></div>
+  </template>
+}
diff --git a/frontend/discourse/app/static/codemirror/expression-utils.js b/frontend/discourse/app/static/codemirror/expression-utils.js
new file mode 100644
index 0000000000000..e18d083de1211
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/expression-utils.js
@@ -0,0 +1,70 @@
+import {
+  ARRAY_METHODS,
+  BOOLEAN_METHODS,
+  DATE_METHODS,
+  GLOBAL_COMPLETIONS,
+  GLOBAL_DOCS,
+  GLOBAL_STATIC_METHODS,
+  lookupMethodDoc,
+  NUMBER_METHODS,
+  section,
+  SECTION_GLOBALS,
+  SECTION_METADATA,
+  SECTION_METHODS,
+  SECTION_PROPERTIES,
+  SECTION_RECOMMENDED,
+  STRING_METHODS,
+} from "./completions-data";
+import { expressionLanguage } from "./lang-expression/index";
+import {
+  analyzePropertyAccess,
+  isInsideExpression,
+  isInsideExpressionAt,
+  resolveNodeValue,
+} from "./tree-utils";
+
+function methodsForType(value) {
+  if (value === null || value === undefined) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return ARRAY_METHODS;
+  }
+  if (value instanceof Date) {
+    return DATE_METHODS;
+  }
+  switch (typeof value) {
+    case "string":
+      return STRING_METHODS;
+    case "number":
+      return NUMBER_METHODS;
+    case "boolean":
+      return BOOLEAN_METHODS;
+    default:
+      return [];
+  }
+}
+
+// Generic expression utilities for {{ }} editors. Domain-specific
+// analysis (like workflow $() node refs) should extend
+// analyzePropertyAccess in the consumer, not here.
+export const expressionUtils = {
+  expressionLanguage,
+  analyzePropertyAccess,
+  resolveNodeValue,
+  isInsideExpression,
+  isInsideExpressionAt,
+  lookupMethodDoc,
+  methodsForType,
+  section,
+  globalDocs: GLOBAL_DOCS,
+  sections: {
+    recommended: SECTION_RECOMMENDED,
+    properties: SECTION_PROPERTIES,
+    methods: SECTION_METHODS,
+    metadata: SECTION_METADATA,
+    globals: SECTION_GLOBALS,
+  },
+  globalCompletions: GLOBAL_COMPLETIONS,
+  globalStaticMethods: GLOBAL_STATIC_METHODS,
+};
diff --git a/frontend/discourse/app/static/codemirror/lang-expression/expression.grammar b/frontend/discourse/app/static/codemirror/lang-expression/expression.grammar
new file mode 100644
index 0000000000000..d09e45208da5f
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/lang-expression/expression.grammar
@@ -0,0 +1,15 @@
+@top Template { entity* }
+
+entity { Text | Expression }
+
+Expression { OpenExpression expressionContent* CloseExpression }
+
+@tokens {
+  Text { ![{] Text? | "{" (@eof | ![{] Text?) }
+  OpenExpression[closedBy="CloseExpression"] { "{{" }
+  CloseExpression[openedBy="OpenExpression"] { "}}" }
+  expressionContent { unicodeChar | "}" ![}] | "\\}}" }
+  unicodeChar { $[\u0000-\u007C] | $[\u007E-\u{10FFFF}] }
+}
+
+@detectDelim
diff --git a/frontend/discourse/app/static/codemirror/lang-expression/expression.js b/frontend/discourse/app/static/codemirror/lang-expression/expression.js
new file mode 100644
index 0000000000000..9124e62fe790a
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/lang-expression/expression.js
@@ -0,0 +1,23 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+import { LRParser } from "@lezer/lr";
+
+export const parser = LRParser.deserialize({
+  version: 14,
+  states:
+    "!dQQOPOOOYOQO'#CaOOOO'#Ce'#CeOOOO'#Cb'#CbQQOPOOOOOO'#Cc'#CcObOQO,58{OOOO,58{,58{OOOO-E6`-E6`OOOO-E6a-E6aOOOO1G.g1G.g",
+  stateData: "j~OQQOSPO~ORVOYTO~ORYOYTO~O",
+  goto: "oYPPPPPZ_ePkTQOSQSORWSQUPRXUTROS",
+  nodeNames: "⚠ Template Text CloseExpression OpenExpression Expression",
+  maxTerm: 10,
+  nodeProps: [
+    ["openedBy", 3, "OpenExpression"],
+    ["closedBy", 4, "CloseExpression"],
+  ],
+  skippedNodes: [0],
+  repeatNodeCount: 2,
+  tokenData:
+    "&tRRXO#On#O#P#[#P#on#o#p$d#p#qn#q#r%T#r;'Sn;'S;=`&n<%lOnRuTQPYQO#o!U#o#p!j#p;'S!U;'S;=`#P<%lO!UP!ZTQPO#o!U#o#p!j#p;'S!U;'S;=`#P<%lO!UP!mUO#o!U#p;'S!U;'S;=`#P<%l~!U~O!U~~#VP#SP;=`<%l!UP#[OQPR#cVQPYQO#o!U#o#p!j#p#q!U#q#r#x#r;'S!U;'S;=`#P<%lO!UR#}VQPO#o!U#o#p!j#p#q!U#q#rn#r;'S!U;'S;=`#P<%lO!UR$iVYQO#o!U#o#p%O#p;'S!U;'S;=`#P<%l~!U~O!U~~#VP%TOSPR%YVQPO#on#o#p%o#p#qn#q#r&W#r;'Sn;'S;=`&n<%lOnR%tUYQO#o!U#p;'S!U;'S;=`#P<%l~!U~O!U~~#VR&_TRQQPO#o!U#o#p!j#p;'S!U;'S;=`#P<%lO!UR&qP;=`<%ln",
+  tokenizers: [0, 1],
+  topRules: { Template: [0, 1] },
+  tokenPrec: 0,
+});
diff --git a/frontend/discourse/app/static/codemirror/lang-expression/expression.terms.js b/frontend/discourse/app/static/codemirror/lang-expression/expression.terms.js
new file mode 100644
index 0000000000000..aa18dd0752fa7
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/lang-expression/expression.terms.js
@@ -0,0 +1,6 @@
+// This file was generated by lezer-generator. You probably shouldn't edit it.
+export const Template = 1,
+  Text = 2,
+  CloseExpression = 3,
+  OpenExpression = 4,
+  Expression = 5;
diff --git a/frontend/discourse/app/static/codemirror/lang-expression/index.js b/frontend/discourse/app/static/codemirror/lang-expression/index.js
new file mode 100644
index 0000000000000..99ec0ecca9a8c
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/lang-expression/index.js
@@ -0,0 +1,57 @@
+import { javascriptLanguage } from "@codemirror/lang-javascript";
+import { LanguageSupport, LRLanguage } from "@codemirror/language";
+import { parseMixed } from "@lezer/common";
+import { styleTags, tags as t } from "@lezer/highlight";
+import { parser } from "./expression";
+import {
+  CloseExpression,
+  Expression,
+  OpenExpression,
+} from "./expression.terms";
+
+const mixedParser = parser.configure({
+  props: [
+    styleTags({
+      Text: t.content,
+      Expression: t.string,
+      "OpenExpression CloseExpression": t.brace,
+    }),
+  ],
+  wrap: parseMixed((node) => {
+    if (node.type.id === Expression) {
+      let from = node.from;
+      let to = node.to;
+
+      const first = node.node.firstChild;
+      if (first?.type.id === OpenExpression) {
+        from = first.to;
+      }
+      const last = node.node.lastChild;
+      if (last?.type.id === CloseExpression) {
+        to = last.from;
+      }
+
+      if (from >= to) {
+        return null;
+      }
+      return {
+        parser: javascriptLanguage.parser,
+        overlay: [{ from, to }],
+      };
+    }
+    return null;
+  }),
+});
+
+const expressionLang = LRLanguage.define({
+  name: "expression",
+  parser: mixedParser,
+  languageData: {
+    closeBrackets: { brackets: ["(", "[", "'", '"'] },
+    commentTokens: { line: "//" },
+  },
+});
+
+export function expressionLanguage() {
+  return new LanguageSupport(expressionLang);
+}
diff --git a/frontend/discourse/app/static/codemirror/tree-utils.js b/frontend/discourse/app/static/codemirror/tree-utils.js
new file mode 100644
index 0000000000000..4142c23f13d5d
--- /dev/null
+++ b/frontend/discourse/app/static/codemirror/tree-utils.js
@@ -0,0 +1,94 @@
+import { syntaxTree } from "@codemirror/language";
+
+function findDot(memberExpr) {
+  for (let child = memberExpr.lastChild; child; child = child.prevSibling) {
+    if (child.name === ".") {
+      return child.from;
+    }
+  }
+  return null;
+}
+
+export function resolveNodeValue(node, doc) {
+  if (!node) {
+    return null;
+  }
+
+  if (node.name === "VariableName" || node.name === "VariableDefinition") {
+    return doc.sliceString(node.from, node.to);
+  }
+
+  if (node.name === "MemberExpression") {
+    const obj = resolveNodeValue(node.firstChild, doc);
+    const prop = node.lastChild;
+    if (obj && prop && prop.name === "PropertyName") {
+      return `${obj}.${doc.sliceString(prop.from, prop.to)}`;
+    }
+    return obj;
+  }
+
+  if (node.name === "CallExpression") {
+    const callee = node.firstChild;
+    if (callee) {
+      const calleeName = doc.sliceString(callee.from, callee.to);
+      const argList = node.getChild("ArgList");
+      if (argList) {
+        const strNode = argList.getChild("String");
+        if (strNode) {
+          const raw = doc.sliceString(strNode.from, strNode.to);
+          return `${calleeName}(${raw})`;
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+export function analyzePropertyAccess(state, pos) {
+  const tree = syntaxTree(state);
+  const node = tree.resolveInner(pos, -1);
+  const doc = state.doc;
+
+  let cur = node;
+  while (cur) {
+    if (cur.name === "MemberExpression") {
+      const dotPos = findDot(cur);
+      if (dotPos !== null && pos > dotPos) {
+        const obj = resolveNodeValue(cur.firstChild, doc);
+        const partial = doc.sliceString(dotPos + 1, pos);
+        return { kind: "property", object: obj, partial, from: dotPos + 1 };
+      }
+    }
+
+    if (cur.name === "MemberExpression" && cur.getChild("[")) {
+      const obj = resolveNodeValue(cur.firstChild, doc);
+      return { kind: "bracket", object: obj, from: pos };
+    }
+
+    cur = cur.parent;
+  }
+
+  if (node.name === "VariableName" || node.name === "VariableDefinition") {
+    const text = doc.sliceString(node.from, pos);
+    return { kind: "identifier", partial: text, from: node.from };
+  }
+
+  return { kind: "blank", from: pos };
+}
+
+export function isInsideExpressionAt(state, pos) {
+  const tree = syntaxTree(state);
+  let node = tree.resolve(pos, -1);
+  while (node) {
+    if (node.name === "Expression") {
+      return true;
+    }
+    node = node.parent;
+  }
+  return false;
+}
+
+export function isInsideExpression(context) {
+  return isInsideExpressionAt(context.state, context.pos);
+}
diff --git a/frontend/discourse/package.json b/frontend/discourse/package.json
index 9323833d0637e..a7cf05b57ca3f 100644
--- a/frontend/discourse/package.json
+++ b/frontend/discourse/package.json
@@ -25,6 +25,12 @@
     "test": "ember test"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.40.0",
     "@faker-js/faker": "^10.4.0",
     "@fullcalendar/core": "^6.1.20",
     "@fullcalendar/daygrid": "^6.1.20",
@@ -39,10 +45,15 @@
     "@json-editor/json-editor": "2.15.2",
     "@jsquash/jpeg": "^1.6.0",
     "@jsquash/resize": "^2.1.0",
+    "@lezer/common": "^1.5.1",
+    "@lezer/highlight": "^1.2.3",
+    "@lezer/javascript": "^1.5.4",
+    "@lezer/lr": "^1.4.8",
     "ace-builds": "^1.43.6",
     "chart.js": "4.5.1",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-datalabels": "2.2.0",
+    "codemirror": "^6.0.2",
     "decorator-transforms": "^2.3.1",
     "diff": "^8.0.4",
     "elkjs": "^0.11.1",
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-input.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-input.gjs
index 50fd163a28a07..992f6850165ab 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-input.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-input.gjs
@@ -1,8 +1,32 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { cancel } from "@ember/runloop";
+import { service } from "@ember/service";
+import discourseLater from "discourse/lib/later";
+import buildWorkflowExtension from "../../../lib/workflows/codemirror-extension";
+import {
+  resolveAllAncestors,
+  resolvePreviousOutput,
+} from "../../../lib/workflows/graph-traversal";
+import ExpressionPreview from "../variable/expression-preview";
 import VariableInput from "../variable/input";
 
 export default class ExpressionInput extends Component {
+  @service siteSettings;
+  @service workflowsNodeTypes;
+
+  @tracked isFocused = false;
+  @tracked segments = [];
+  wrapperElement = null;
+  #focusOutTimer = null;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    cancel(this.#focusOutTimer);
+  }
+
   get displayValue() {
     const val = this.args.field.value;
     if (typeof val === "string" && val.startsWith("=")) {
@@ -11,16 +35,87 @@ export default class ExpressionInput extends Component {
     return val ?? "";
   }
 
+  get triggerElement() {
+    return (
+      this.wrapperElement?.querySelector(".workflows-variable-input") ||
+      this.wrapperElement
+    );
+  }
+
+  @action
+  buildExtensions(cmParams) {
+    const node = this.workflowsNodeTypes.editingNode;
+    const graph = {
+      nodes: this.workflowsNodeTypes.graphNodes || [],
+      connections: this.workflowsNodeTypes.graphConnections || [],
+      nodeTypes: this.workflowsNodeTypes.nodeTypes || [],
+    };
+    const itemPrefix =
+      this.workflowsNodeTypes.expressionContext.item_prefix || "$json";
+
+    return buildWorkflowExtension(cmParams, {
+      inputFields: node ? resolvePreviousOutput(node, graph) : [],
+      ancestorNodes: node ? resolveAllAncestors(node, graph) : [],
+      siteSettings: this.siteSettings,
+      workflowVars: this.workflowsNodeTypes.workflowVars,
+      nodes: graph.nodes,
+      itemPrefix,
+      workflowId: this.workflowsNodeTypes.workflowId,
+      nodeId: node?.id,
+      onSegmentsResolved: (segs) => (this.segments = segs),
+    });
+  }
+
   @action
   handleChange(value) {
     this.args.field.set(`=${value}`);
   }
 
+  @action
+  handleFocusIn() {
+    cancel(this.#focusOutTimer);
+    this.isFocused = true;
+  }
+
+  @action
+  handleFocusOut() {
+    this.#focusOutTimer = discourseLater(() => {
+      if (this.isDestroying || this.isDestroyed) {
+        return;
+      }
+      const editor = this.wrapperElement?.querySelector(".cm-editor");
+      if (editor?.contains(document.activeElement)) {
+        return;
+      }
+      const tooltip = document.querySelector(
+        '[data-identifier="expression-preview"]'
+      );
+      if (tooltip?.contains(document.activeElement)) {
+        return;
+      }
+      this.isFocused = false;
+    }, 150);
+  }
+
+  @action
+  registerWrapper(element) {
+    this.wrapperElement = element;
+  }
+
   <template>
-    <VariableInput
-      @value={{this.displayValue}}
-      @onChange={{this.handleChange}}
-      @autofocus={{@autofocus}}
+    <div {{didInsert this.registerWrapper}}>
+      <VariableInput
+        @value={{this.displayValue}}
+        @onChange={{this.handleChange}}
+        @extensions={{this.buildExtensions}}
+        @onFocusIn={{this.handleFocusIn}}
+        @onFocusOut={{this.handleFocusOut}}
+      />
+    </div>
+    <ExpressionPreview
+      @segments={{this.segments}}
+      @trigger={{this.triggerElement}}
+      @visible={{this.isFocused}}
     />
   </template>
 }
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-wrapper.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-wrapper.gjs
index 81b545d49413a..6eddaee3c0f47 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-wrapper.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/configurators/expression-wrapper.gjs
@@ -6,6 +6,10 @@ import { service } from "@ember/service";
 import DSegmentedControl from "discourse/components/d-segmented-control";
 import concatClass from "discourse/helpers/concat-class";
 import { i18n } from "discourse-i18n";
+import {
+  resolveVariableId,
+  WORKFLOW_VARIABLE_MIME,
+} from "../../../lib/workflows/expression-context";
 import { isExpression } from "../../../lib/workflows/property-engine";
 import ExpressionInput from "./expression-input";
 
@@ -26,6 +30,15 @@ export default class ExpressionWrapper extends Component {
   @service workflowsNodeTypes;
 
   @tracked isDragOver = false;
+  _dragEndHandler = null;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    if (this._dragEndHandler) {
+      document.removeEventListener("dragend", this._dragEndHandler);
+      this._dragEndHandler = null;
+    }
+  }
 
   get expressionMode() {
     return isExpression(this.args.field?.value);
@@ -53,13 +66,26 @@ export default class ExpressionWrapper extends Component {
 
   @action
   handleDragOver(event) {
-    if (!this.args.supportsExpression || this.expressionMode) {
+    if (!this.args.supportsExpression) {
+      return;
+    }
+    if (!event.dataTransfer.types.includes(WORKFLOW_VARIABLE_MIME)) {
       return;
     }
-    if (event.dataTransfer.types.includes("application/x-workflow-variable")) {
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "copy";
-      this.isDragOver = true;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "copy";
+    this.isDragOver = true;
+
+    // Safety: clear on next dragend in case dragleave doesn't fire
+    if (!this._dragEndHandler) {
+      this._dragEndHandler = () => {
+        this.isDragOver = false;
+        document.removeEventListener("dragend", this._dragEndHandler);
+        this._dragEndHandler = null;
+      };
+      document.addEventListener("dragend", this._dragEndHandler, {
+        once: true,
+      });
     }
   }
 
@@ -72,18 +98,19 @@ export default class ExpressionWrapper extends Component {
 
   @action
   handleDrop(event) {
+    this.isDragOver = false;
+
     if (!this.args.supportsExpression || this.expressionMode) {
       return;
     }
 
-    const data = event.dataTransfer.getData("application/x-workflow-variable");
+    const data = event.dataTransfer.getData(WORKFLOW_VARIABLE_MIME);
     if (!data) {
       return;
     }
 
     event.preventDefault();
     event.stopPropagation();
-    this.isDragOver = false;
 
     let variable;
     try {
@@ -94,9 +121,7 @@ export default class ExpressionWrapper extends Component {
 
     const prefix =
       this.workflowsNodeTypes.expressionContext.item_prefix || "$json";
-    const variableId = variable.id.startsWith("$")
-      ? variable.id
-      : `${prefix}.${variable.id}`;
+    const variableId = resolveVariableId(variable, prefix);
 
     this.args.field.set(`={{ ${variableId} }}`);
   }
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/context/schema-field.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/context/schema-field.gjs
index 3f4bbc9aaecef..8535de4fd70a7 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/context/schema-field.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/context/schema-field.gjs
@@ -5,6 +5,7 @@ import { action } from "@ember/object";
 import concatClass from "discourse/helpers/concat-class";
 import icon from "discourse/helpers/d-icon";
 import { and, not } from "discourse/truth-helpers";
+import { WORKFLOW_VARIABLE_MIME } from "../../../lib/workflows/expression-context";
 
 export default class SchemaField extends Component {
   @tracked collapsed = true;
@@ -40,7 +41,7 @@ export default class SchemaField extends Component {
     event.stopPropagation();
     const field = this.args.field;
     event.dataTransfer.setData(
-      "application/x-workflow-variable",
+      WORKFLOW_VARIABLE_MIME,
       JSON.stringify({ id: this.fieldId, key: field.key, type: field.type })
     );
     event.dataTransfer.effectAllowed = "copy";
@@ -72,10 +73,7 @@ export default class SchemaField extends Component {
 
         <span
           class="workflows-schema-field__key"
-          draggable={{if
-            (and @draggable this.fieldId (not this.hasChildren))
-            "true"
-          }}
+          draggable={{if (and @draggable this.fieldId) "true"}}
           {{on "dragstart" this.handleDragStart}}
           {{on "dragend" this.handleDragEnd}}
         >
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/editor/index.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/editor/index.gjs
index c763985ab40d7..1089e37d7e1a5 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/editor/index.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/editor/index.gjs
@@ -376,6 +376,10 @@ export default class WorkflowsEditor extends Component {
 
     const triggerNode = nodes.find((n) => n.type?.startsWith("trigger:"));
 
+    this.workflowsNodeTypes.setEditingContext(node, nodes, connections, {
+      workflowId: this.args.workflow?.id,
+    });
+
     this.modal.show(NodeConfigurator, {
       model: {
         node,
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/node/configurator.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/node/configurator.gjs
index 4d1ea3cf6d6da..b964e09f2c1fd 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/node/configurator.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/node/configurator.gjs
@@ -185,6 +185,7 @@ export default class NodeConfigurator extends Component {
   handleClose() {
     this.args.model.onSave(this.configuration, this.nodeName);
     this.args.closeModal();
+    this.workflowsNodeTypes.clearEditingContext();
   }
 
   <template>
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview-content.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview-content.gjs
new file mode 100644
index 0000000000000..08b644f0bd13e
--- /dev/null
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview-content.gjs
@@ -0,0 +1,55 @@
+import Component from "@glimmer/component";
+import { i18n } from "discourse-i18n";
+
+const VALID_STATES = new Set([
+  "valid",
+  "invalid",
+  "undefined",
+  "warning",
+  "pending",
+  "empty",
+]);
+
+const I18N_PREFIX = "discourse_workflows.expression_preview";
+
+export default class ExpressionPreviewContent extends Component {
+  get displaySegments() {
+    const segments = this.args.data?.segments;
+    if (!segments?.length) {
+      return [];
+    }
+
+    return segments.map((seg) => {
+      if (seg.kind === "plaintext") {
+        return { className: "expression-preview__plaintext", text: seg.text };
+      }
+
+      const state = VALID_STATES.has(seg.state) ? seg.state : "pending";
+      if (state === "valid" && seg.text.length > 0) {
+        return {
+          className: `expression-preview__resolved expression-preview__resolved--${state}`,
+          text: seg.text,
+        };
+      }
+
+      const labelState = state === "valid" ? "empty" : state;
+      return {
+        className: `expression-preview__resolved expression-preview__resolved--${labelState} expression-preview__resolved--label`,
+        text: i18n(`${I18N_PREFIX}.${labelState}`),
+      };
+    });
+  }
+
+  <template>
+    <div class="expression-preview">
+      <span class="expression-preview__label">
+        {{i18n "discourse_workflows.expression_preview.result"}}
+      </span>
+      <span class="expression-preview__result">
+        {{~#each this.displaySegments as |seg|~}}
+          <span class={{seg.className}}>{{seg.text}}</span>
+        {{~/each~}}
+      </span>
+    </div>
+  </template>
+}
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview.gjs
new file mode 100644
index 0000000000000..d4c4f96835645
--- /dev/null
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/expression-preview.gjs
@@ -0,0 +1,97 @@
+import Component from "@glimmer/component";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import didUpdate from "@ember/render-modifiers/modifiers/did-update";
+import { service } from "@ember/service";
+import ExpressionPreviewContent from "./expression-preview-content";
+
+export default class ExpressionPreview extends Component {
+  @service tooltip;
+
+  handleSegmentsChange = () => {
+    if (this.args.visible) {
+      this.#showTooltip();
+    }
+  };
+  handleVisibilityChange = () => {
+    if (this.args.visible) {
+      if (this.args.segments?.length) {
+        this.#showTooltip();
+      }
+    } else {
+      this.#closeTooltip();
+    }
+  };
+  #tooltipInstance = null;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.#closeTooltip();
+  }
+
+  async #showTooltip() {
+    const trigger = this.args.trigger;
+    if (!trigger || this.isDestroying || this.isDestroyed) {
+      return;
+    }
+
+    const segments = this.args.segments;
+    if (!segments?.length) {
+      this.#closeTooltip();
+      return;
+    }
+
+    if (this.#tooltipInstance) {
+      this.#tooltipInstance.options = {
+        ...this.#tooltipInstance.options,
+        data: { segments },
+      };
+      return;
+    }
+
+    const input = trigger.querySelector(".workflows-variable-input") || trigger;
+    const portalOutletElement = trigger.closest(".d-modal");
+
+    const instance = await this.tooltip.show(input, {
+      identifier: "expression-preview",
+      component: ExpressionPreviewContent,
+      data: { segments },
+      placement: "bottom-start",
+      fallbackPlacements: ["top-start"],
+      interactive: true,
+      arrow: false,
+      animated: false,
+      closeOnEscape: false,
+      closeOnClickOutside: false,
+      closeOnScroll: false,
+      matchTriggerWidth: true,
+      maxWidth: 9999,
+      offset: 4,
+      portalOutletElement,
+    });
+
+    if (this.isDestroying || this.isDestroyed) {
+      if (instance) {
+        this.tooltip.close(instance);
+      }
+      return;
+    }
+
+    this.#tooltipInstance = instance;
+  }
+
+  #closeTooltip() {
+    if (this.#tooltipInstance) {
+      this.tooltip.close(this.#tooltipInstance);
+      this.#tooltipInstance = null;
+    }
+  }
+
+  <template>
+    <span
+      class="expression-preview-anchor"
+      {{didInsert this.handleSegmentsChange}}
+      {{didUpdate this.handleSegmentsChange @segments}}
+      {{didUpdate this.handleVisibilityChange @visible}}
+    ></span>
+  </template>
+}
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/input.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/input.gjs
index 7a004c2836d5f..7f59189df0bd2 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/input.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/input.gjs
@@ -1,220 +1,46 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
-import concatClass from "discourse/helpers/concat-class";
+import loadCodemirrorEditor from "discourse/lib/load-codemirror";
 
 export default class VariableInput extends Component {
   @service workflowsNodeTypes;
 
-  @tracked isDragOver = false;
-  editorElement = null;
+  @tracked Editor;
 
   @action
-  setupEditor(element) {
-    this.editorElement = element;
-    this.#renderContent(this.args.value || "");
+  async loadEditor() {
+    const [Editor] = await Promise.all([
+      loadCodemirrorEditor(),
+      this.workflowsNodeTypes.loadWorkflowVars(),
+    ]);
 
-    if (this.args.autofocus) {
-      this.#focusAtEnd();
-    }
-  }
-
-  @action
-  handleInput() {
-    this.args.onChange?.(this.#serialize());
-  }
-
-  @action
-  handleClick() {
-    if (!this.editorElement.childNodes.length) {
-      this.editorElement.appendChild(document.createTextNode(""));
-    }
-
-    const selection = window.getSelection();
-    if (
-      !selection.rangeCount ||
-      !this.editorElement.contains(selection.anchorNode)
-    ) {
-      const range = document.createRange();
-      const lastChild = this.editorElement.lastChild;
-      if (lastChild?.nodeType === Node.TEXT_NODE) {
-        range.setStart(lastChild, lastChild.textContent.length);
-      } else {
-        range.setStart(
-          this.editorElement,
-          this.editorElement.childNodes.length
-        );
-      }
-      range.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    }
-  }
-
-  @action
-  handleDragOver(event) {
-    if (event.dataTransfer.types.includes("application/x-workflow-variable")) {
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "copy";
-      this.isDragOver = true;
-    }
-  }
-
-  @action
-  handleDragLeave() {
-    this.isDragOver = false;
-  }
-
-  @action
-  handleDrop(event) {
-    const data = event.dataTransfer.getData("application/x-workflow-variable");
-    if (!data) {
-      return;
-    }
-
-    event.preventDefault();
-    this.isDragOver = false;
-
-    let variable;
-    try {
-      variable = JSON.parse(data);
-    } catch {
+    if (this.isDestroying || this.isDestroyed) {
       return;
     }
-    const prefix =
-      this.workflowsNodeTypes.expressionContext.item_prefix || "$json";
-    const variableId = variable.id.startsWith("$")
-      ? variable.id
-      : `${prefix}.${variable.id}`;
-    const pill = this.#createPill(variableId);
-
-    const trailing = document.createTextNode(" ");
 
-    const selection = window.getSelection();
-    if (
-      selection.rangeCount &&
-      this.editorElement.contains(selection.anchorNode)
-    ) {
-      const range = selection.getRangeAt(0);
-      range.deleteContents();
-      range.insertNode(trailing);
-      range.insertNode(pill);
-    } else {
-      this.editorElement.appendChild(pill);
-      this.editorElement.appendChild(trailing);
-    }
-
-    this.#focusAtEnd();
-    this.args.onChange?.(this.#serialize());
-  }
-
-  @action
-  handleKeydown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      event.stopPropagation();
-      document.execCommand("insertLineBreak");
-      return;
-    }
-  }
-
-  @action
-  handlePaste(event) {
-    event.preventDefault();
-    const text = event.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
-  }
-
-  #focusAtEnd() {
-    this.editorElement.focus();
-    const selection = window.getSelection();
-    const range = document.createRange();
-    range.selectNodeContents(this.editorElement);
-    range.collapse(false);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
-
-  #createPill(variableId) {
-    const pill = document.createElement("span");
-    pill.className = "workflows-variable-pill";
-    pill.dataset.variableId = variableId;
-    pill.textContent = variableId;
-    return pill;
-  }
-
-  #renderContent(value) {
-    if (!this.editorElement) {
-      return;
-    }
-
-    this.editorElement.innerHTML = "";
-    const regex = /\{\{\s*([^}]+?)\s*\}\}|\n/g;
-    let lastIndex = 0;
-    let match;
-
-    while ((match = regex.exec(value)) !== null) {
-      if (match.index > lastIndex) {
-        this.editorElement.appendChild(
-          document.createTextNode(value.slice(lastIndex, match.index))
-        );
-      }
-
-      if (match[0] === "\n") {
-        this.editorElement.appendChild(document.createElement("br"));
-      } else {
-        this.editorElement.appendChild(this.#createPill(match[1]));
-      }
-
-      lastIndex = regex.lastIndex;
-    }
-
-    if (lastIndex < value.length) {
-      this.editorElement.appendChild(
-        document.createTextNode(value.slice(lastIndex))
-      );
-    }
-  }
-
-  #serialize() {
-    return this.#serializeNodes(this.editorElement.childNodes);
-  }
-
-  #serializeNodes(nodes) {
-    let result = "";
-    for (const node of nodes) {
-      if (node.nodeType === Node.TEXT_NODE) {
-        result += node.textContent;
-      } else if (node.nodeName === "BR") {
-        result += "\n";
-      } else if (node.classList?.contains("workflows-variable-pill")) {
-        result += `{{ ${node.textContent.trim()} }}`;
-      } else if (node.childNodes.length) {
-        result += "\n" + this.#serializeNodes(node.childNodes);
-      }
-    }
-    return result;
+    this.Editor = Editor;
   }
 
   <template>
     <div
-      class={{concatClass
-        "workflows-variable-input"
-        (if this.isDragOver "is-drag-over")
-      }}
-      contenteditable="true"
-      role="textbox"
-      {{didInsert this.setupEditor}}
-      {{on "click" this.handleClick}}
-      {{on "keydown" this.handleKeydown}}
-      {{on "input" this.handleInput}}
-      {{on "dragover" this.handleDragOver}}
-      {{on "dragleave" this.handleDragLeave}}
-      {{on "drop" this.handleDrop}}
-      {{on "paste" this.handlePaste}}
-    ></div>
+      class="workflows-variable-input-container"
+      {{didInsert this.loadEditor}}
+    >
+      {{#if this.Editor}}
+        <this.Editor
+          @value={{@value}}
+          @change={{@onChange}}
+          @extensions={{@extensions}}
+          @class="workflows-variable-input"
+          @lineWrapping={{true}}
+          @onSetup={{@onSetup}}
+          @focusIn={{@onFocusIn}}
+          @focusOut={{@onFocusOut}}
+        />
+      {{/if}}
+    </div>
   </template>
 }
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/manager.gjs b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/manager.gjs
index 2f85f3a5fb809..1e906bf82f192 100644
--- a/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/manager.gjs
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/components/workflows/variable/manager.gjs
@@ -1,5 +1,6 @@
 import { concat, fn } from "@ember/helper";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -11,6 +12,8 @@ import EmptyState from "../empty-state";
 import VariableModal from "./modal";
 
 export default class VariablesManager extends CrudManager {
+  @service workflowsNodeTypes;
+
   get itemsKey() {
     return "variables";
   }
@@ -29,6 +32,7 @@ export default class VariablesManager extends CrudManager {
             type: "POST",
             data,
           });
+          this.workflowsNodeTypes.invalidateWorkflowVars();
           await this.loadItems();
         },
       },
@@ -45,6 +49,7 @@ export default class VariablesManager extends CrudManager {
             type: "PUT",
             data,
           });
+          this.workflowsNodeTypes.invalidateWorkflowVars();
           await this.loadItems();
         },
       },
@@ -62,6 +67,7 @@ export default class VariablesManager extends CrudManager {
           await ajax(`${this.basePath}/${variable.id}.json`, {
             type: "DELETE",
           });
+          this.workflowsNodeTypes.invalidateWorkflowVars();
           await this.loadItems();
         } catch (e) {
           popupAjaxError(e);
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/codemirror-extension.js b/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/codemirror-extension.js
new file mode 100644
index 0000000000000..53f50daede905
--- /dev/null
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/codemirror-extension.js
@@ -0,0 +1,899 @@
+import { ajax } from "discourse/lib/ajax";
+import {
+  buildScope,
+  resolveVariableId,
+  walkScope,
+  WORKFLOW_VARIABLE_MIME,
+} from "./expression-context";
+
+// Extends core's generic analyzePropertyAccess with workflow-specific
+// patterns: $('Node Name') references and $-prefixed variables.
+function buildAnalyzeAtCursor({ cmLanguage, utils }) {
+  const { syntaxTree } = cmLanguage;
+  const { analyzePropertyAccess } = utils;
+
+  return function analyzeAtCursor(state, pos) {
+    const tree = syntaxTree(state);
+    const node = tree.resolveInner(pos, -1);
+    const doc = state.doc;
+
+    // $(' or $(" — node reference
+    const lb = doc.sliceString(Math.max(0, pos - 3), pos);
+    if (lb === "$('" || lb === '$("') {
+      return { kind: "nodeRef", from: pos, pos };
+    }
+
+    // $('NodeName') as a complete CallExpression
+    let cur = node;
+    while (cur) {
+      if (cur.name === "CallExpression") {
+        const callee = cur.firstChild;
+        if (callee && doc.sliceString(callee.from, callee.to) === "$") {
+          const argList = cur.getChild("ArgList");
+          if (argList && pos > argList.from && pos <= argList.to) {
+            return { kind: "nodeRef", from: argList.from + 1, pos };
+          }
+        }
+      }
+      cur = cur.parent;
+    }
+
+    const result = analyzePropertyAccess(state, pos);
+
+    if (result.kind === "identifier" && result.partial?.startsWith("$")) {
+      return { ...result, kind: "dollar" };
+    }
+
+    return result;
+  };
+}
+
+const DOLLAR_VAR_DOCS = {
+  $json: {
+    detail: "object",
+    info: "Output data from the previous node. Access fields with dot notation: $json.fieldName",
+  },
+  trigger: {
+    detail: "object",
+    info: "Alias for $json \u2014 the trigger node's output data.",
+  },
+  $site_settings: {
+    detail: "object",
+    info: "Access Discourse site settings. Example: $site_settings.title",
+  },
+  $current_user: {
+    detail: "object",
+    info: "The user who triggered the workflow. Properties: id, username",
+  },
+  $vars: {
+    detail: "object",
+    info: "Workflow variables defined in the admin panel.",
+  },
+  $execution: {
+    detail: "object",
+    info: "Execution metadata: id, workflow_id, workflow_name",
+  },
+};
+
+function buildDollarVars(scope, sections) {
+  const groups = [
+    {
+      names: ["$json", "trigger"],
+      section: sections.recommended,
+      boost: (name) => (name === "$json" ? 10 : 5),
+    },
+    {
+      names: ["$site_settings", "$current_user", "$vars", "$execution"],
+      section: sections.metadata,
+    },
+  ];
+
+  const dollarVars = [];
+  for (const group of groups) {
+    for (const name of group.names) {
+      if (name in scope) {
+        const docs = DOLLAR_VAR_DOCS[name] || {};
+        const isObject =
+          typeof scope[name] === "object" && scope[name] !== null;
+        const entry = {
+          label: name,
+          apply: isObject ? `${name}.` : name,
+          type: "variable",
+          detail: docs.detail || "object",
+          info: docs.info,
+          section: group.section,
+        };
+        if (group.boost) {
+          entry.boost = group.boost(name);
+        }
+        dollarVars.push(entry);
+      }
+    }
+  }
+  dollarVars.push({
+    label: "$(",
+    apply: "$('",
+    type: "function",
+    detail: "node reference",
+    info: "Reference a previous node's output. Example: $('Node Name').item.json",
+    section: sections.nodes,
+  });
+  return dollarVars;
+}
+
+const EXPRESSION_TOKEN_NAMES = new Set([
+  "VariableName",
+  "PropertyName",
+  "Number",
+  "String",
+  "BooleanLiteral",
+  ")",
+  "]",
+  "}",
+]);
+
+function applyMethodCompletion(
+  view,
+  completion,
+  from,
+  to,
+  { insertCompletionText, pickedCompletion }
+) {
+  const afterCursor = view.state.doc.sliceString(to, to + 1);
+
+  if (afterCursor === "(") {
+    view.dispatch({
+      ...insertCompletionText(view.state, completion.label, from, to),
+      annotations: pickedCompletion.of(completion),
+    });
+    return;
+  }
+
+  const insert = `${completion.label}()`;
+  const hasArgs = completion.detail && !completion.detail.startsWith("()");
+  const anchor = from + completion.label.length + (hasArgs ? 1 : 2);
+  view.dispatch({
+    ...insertCompletionText(view.state, insert, from, to),
+    selection: { anchor },
+    annotations: pickedCompletion.of(completion),
+  });
+}
+
+function withMethodApply(option, cmAutocomplete) {
+  if (option.type === "method" || option.type === "function") {
+    return {
+      ...option,
+      apply: (view, completion, from, to) =>
+        applyMethodCompletion(view, completion, from, to, cmAutocomplete),
+    };
+  }
+  return option;
+}
+
+function buildCompletions(
+  cmParams,
+  { scope, ancestorNodes, analyzeAtCursor, sections }
+) {
+  const { cmAutocomplete, cmLanguage, cmView, utils } = cmParams;
+  const { autocompletion, completionKeymap } = cmAutocomplete;
+  const { syntaxTree } = cmLanguage;
+  const { keymap } = cmView;
+  const {
+    isInsideExpression,
+    globalCompletions,
+    globalStaticMethods,
+    methodsForType,
+  } = utils;
+
+  const dollarVars = buildDollarVars(scope, sections);
+  const globalOptions = globalCompletions.map((g) =>
+    withMethodApply({ ...g, section: sections.globals }, cmAutocomplete)
+  );
+
+  const completer = (context) => {
+    if (!isInsideExpression(context)) {
+      return null;
+    }
+
+    const ctx = analyzeAtCursor(context.state, context.pos);
+
+    switch (ctx.kind) {
+      case "property": {
+        const target = walkScope(scope, ctx.object);
+        if (target == null) {
+          return null;
+        }
+
+        const options = [];
+
+        const statics = globalStaticMethods[ctx.object];
+        if (statics) {
+          for (const m of statics) {
+            options.push(
+              withMethodApply(
+                { ...m, section: sections.methods },
+                cmAutocomplete
+              )
+            );
+          }
+        }
+
+        const methods = methodsForType(target);
+        for (const m of methods) {
+          options.push(
+            withMethodApply({ ...m, section: sections.methods }, cmAutocomplete)
+          );
+        }
+
+        if (typeof target === "object" && target !== null) {
+          for (const name of Object.keys(target)) {
+            const value = target[name];
+            if (typeof value === "function") {
+              continue;
+            }
+            options.push({
+              label: name,
+              type:
+                typeof value === "object" && value !== null
+                  ? "property"
+                  : "variable",
+              detail: Array.isArray(value) ? "array" : typeof value,
+              section: sections.properties,
+            });
+          }
+        }
+
+        if (!options.length) {
+          return null;
+        }
+        return { from: ctx.from, options, filter: true, validFor: /^[\w$]*$/ };
+      }
+
+      case "nodeRef": {
+        const charBefore = context.state.doc.sliceString(
+          ctx.from - 1,
+          ctx.from
+        );
+        const q = charBefore === '"' ? '"' : "'";
+        const prefix = charBefore === "'" || charBefore === '"' ? "" : q;
+        return {
+          from: ctx.from,
+          options: ancestorNodes.map((a) => ({
+            label: a.node.name,
+            apply: `${prefix}${a.node.name}${q})`,
+            type: "variable",
+            detail: a.node.type,
+            section: sections.nodes,
+          })),
+          filter: true,
+        };
+      }
+
+      case "bracket": {
+        const target = walkScope(scope, ctx.object);
+        if (!target || typeof target !== "object") {
+          return null;
+        }
+        return {
+          from: ctx.from,
+          options: Object.keys(target)
+            .filter((k) => typeof target[k] !== "function")
+            .map((name) => ({
+              label: name,
+              apply: `'${name.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`,
+              type: "property",
+              section: sections.properties,
+            })),
+          filter: true,
+        };
+      }
+
+      case "dollar":
+        return { from: ctx.from, options: dollarVars, filter: true };
+
+      case "identifier": {
+        const charBefore = context.state.doc.sliceString(
+          Math.max(0, ctx.from - 1),
+          ctx.from
+        );
+        if (charBefore === ".") {
+          return null;
+        }
+        return { from: ctx.from, options: globalOptions, filter: true };
+      }
+
+      case "blank": {
+        if (!context.explicit) {
+          return null;
+        }
+        const prevNode = syntaxTree(context.state).resolveInner(
+          ctx.from - 1,
+          -1
+        );
+        if (ctx.from > 0 && EXPRESSION_TOKEN_NAMES.has(prevNode.name)) {
+          return null;
+        }
+        return {
+          from: ctx.from,
+          options: [...dollarVars, ...globalOptions],
+          filter: true,
+        };
+      }
+
+      default:
+        return null;
+    }
+  };
+
+  return [
+    autocompletion({
+      override: [completer],
+      activateOnTyping: true,
+      // Re-trigger completions after picking $( or any property that
+      // ends with "." (e.g. "$json.") so the next level shows immediately.
+      // String applies end with "."; function applies (methods) don't match.
+      activateOnCompletion: (completion) =>
+        completion.label === "$(" || completion.apply?.toString().endsWith("."),
+      icons: true,
+    }),
+    keymap.of(completionKeymap),
+  ];
+}
+
+function renderTooltipContent(doc) {
+  if (!doc) {
+    return null;
+  }
+
+  if (typeof doc.info === "function") {
+    const richContent = doc.info(doc);
+    if (richContent) {
+      return richContent;
+    }
+  }
+
+  const el = document.createElement("div");
+  el.className = "cm-wf-hover-tooltip";
+
+  const nameEl = document.createElement("div");
+  nameEl.className = "cm-wf-hover-tooltip__name";
+  nameEl.textContent = doc.label;
+  el.appendChild(nameEl);
+
+  if (typeof doc.info === "string") {
+    const desc = document.createElement("div");
+    desc.className = "cm-wf-hover-tooltip__description";
+    desc.textContent = doc.info;
+    el.appendChild(desc);
+  }
+
+  return el;
+}
+
+function makeTooltip(jsNode, content) {
+  if (!content) {
+    return null;
+  }
+  return {
+    pos: jsNode.from,
+    end: jsNode.to,
+    above: true,
+    create: () => ({ dom: content }),
+  };
+}
+
+function buildHoverTooltip({ cmLanguage, cmView, utils }, { scope }) {
+  const { syntaxTree } = cmLanguage;
+  const { hoverTooltip } = cmView;
+  const {
+    isInsideExpressionAt,
+    resolveNodeValue,
+    lookupMethodDoc,
+    globalDocs,
+  } = utils;
+
+  return hoverTooltip(
+    (view, pos) => {
+      const tree = syntaxTree(view.state);
+      const doc = view.state.doc;
+
+      if (!isInsideExpressionAt(view.state, pos)) {
+        return null;
+      }
+
+      const jsNode = tree.resolveInner(pos, -1);
+      const name = doc.sliceString(jsNode.from, jsNode.to);
+
+      if (
+        jsNode.name !== "VariableName" &&
+        jsNode.name !== "VariableDefinition" &&
+        jsNode.name !== "PropertyName"
+      ) {
+        return null;
+      }
+
+      if (jsNode.name === "PropertyName") {
+        const memberExpr = jsNode.parent;
+        if (memberExpr?.name === "MemberExpression") {
+          const parentPath = resolveNodeValue(memberExpr.firstChild, doc);
+          const parentValue = walkScope(scope, parentPath);
+
+          const methodDoc = lookupMethodDoc(name, parentValue);
+          if (methodDoc) {
+            return makeTooltip(jsNode, renderTooltipContent(methodDoc));
+          }
+
+          const path = resolveNodeValue(memberExpr, doc);
+          const value = walkScope(scope, path);
+          if (value !== undefined) {
+            const typeStr = Array.isArray(value) ? "array" : typeof value;
+            const label =
+              typeStr === "string" && value.length < 60
+                ? `${name}: "${value}"`
+                : `${name}: ${typeStr}`;
+            return makeTooltip(jsNode, renderTooltipContent({ label }));
+          }
+        }
+      }
+
+      const varDoc = DOLLAR_VAR_DOCS[name];
+      if (varDoc) {
+        return makeTooltip(
+          jsNode,
+          renderTooltipContent({ ...varDoc, label: name })
+        );
+      }
+
+      const globalDoc = globalDocs.get(name);
+      if (globalDoc) {
+        return makeTooltip(jsNode, renderTooltipContent(globalDoc));
+      }
+
+      return null;
+    },
+    { hoverTime: 400 }
+  );
+}
+
+function buildArgumentInfo(
+  { cmAutocomplete, cmLanguage, cmState, cmView, utils },
+  { scope }
+) {
+  const { completionStatus } = cmAutocomplete;
+  const { syntaxTree } = cmLanguage;
+  const { StateField } = cmState;
+  const { showTooltip } = cmView;
+  const { resolveNodeValue, lookupMethodDoc } = utils;
+
+  function findCallContext(state, pos) {
+    const tree = syntaxTree(state);
+    const doc = state.doc;
+    let node = tree.resolveInner(pos, -1);
+
+    while (node) {
+      if (node.name === "ArgList") {
+        const call = node.parent;
+        if (!call || call.name !== "CallExpression") {
+          return null;
+        }
+
+        const callee = call.firstChild;
+        if (!callee) {
+          return null;
+        }
+
+        if (
+          callee.name === "VariableName" &&
+          doc.sliceString(callee.from, callee.to) === "$"
+        ) {
+          return null;
+        }
+
+        let methodName;
+        let parentPath;
+
+        if (callee.name === "MemberExpression") {
+          const prop = callee.lastChild;
+          if (prop?.name === "PropertyName") {
+            methodName = doc.sliceString(prop.from, prop.to);
+            parentPath = resolveNodeValue(callee.firstChild, doc);
+          }
+        } else if (callee.name === "VariableName") {
+          methodName = doc.sliceString(callee.from, callee.to);
+        }
+
+        if (!methodName) {
+          return null;
+        }
+
+        let argIndex = 0;
+        for (let child = node.firstChild; child; child = child.nextSibling) {
+          if (child.name === "," && child.to <= pos) {
+            argIndex++;
+          }
+        }
+
+        return { methodName, parentPath, argIndex, callFrom: call.from };
+      }
+      node = node.parent;
+    }
+    return null;
+  }
+
+  function buildTooltipForCall(ctx, pos) {
+    const parentValue = ctx.parentPath
+      ? walkScope(scope, ctx.parentPath)
+      : null;
+    const doc = lookupMethodDoc(ctx.methodName, parentValue);
+    if (!doc?.info) {
+      return null;
+    }
+
+    const content = typeof doc.info === "function" ? doc.info(doc) : null;
+    if (!content) {
+      return null;
+    }
+
+    return {
+      pos,
+      above: true,
+      strictSide: true,
+      create: () => ({ dom: content }),
+    };
+  }
+
+  return StateField.define({
+    create: () => ({ tooltip: null, callFrom: null }),
+    update(prev, tr) {
+      if (!tr.docChanged && !tr.selection) {
+        return prev;
+      }
+
+      if (completionStatus(tr.state) === "active") {
+        return { tooltip: null, callFrom: null };
+      }
+
+      const { head } = tr.state.selection.ranges[0];
+      const ctx = findCallContext(tr.state, head);
+      if (!ctx) {
+        return { tooltip: null, callFrom: null };
+      }
+
+      if (prev.callFrom === ctx.callFrom) {
+        return prev;
+      }
+
+      return {
+        tooltip: buildTooltipForCall(ctx, head),
+        callFrom: ctx.callFrom,
+      };
+    },
+    provide: (f) => showTooltip.compute([f], (state) => state.field(f).tooltip),
+  });
+}
+
+function buildDragDrop({ cmLanguage, cmView }, { itemPrefix }) {
+  const { ensureSyntaxTree } = cmLanguage;
+  const { dropCursor, EditorView } = cmView;
+
+  return [
+    dropCursor(),
+    EditorView.domEventHandlers({
+      dragover(event) {
+        if (event.dataTransfer.types.includes(WORKFLOW_VARIABLE_MIME)) {
+          event.preventDefault();
+          event.dataTransfer.dropEffect = "copy";
+        }
+      },
+      drop(event, view) {
+        const data = event.dataTransfer.getData(WORKFLOW_VARIABLE_MIME);
+        if (!data) {
+          return false;
+        }
+
+        event.preventDefault();
+
+        let variable;
+        try {
+          variable = JSON.parse(data);
+        } catch {
+          return false;
+        }
+
+        const variableId = resolveVariableId(variable, itemPrefix);
+
+        let pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+        if (pos === null) {
+          pos = view.state.doc.length;
+        }
+
+        let inside = false;
+        const tree = ensureSyntaxTree(view.state, view.state.doc.length, 100);
+        if (tree) {
+          for (const side of [-1, 1]) {
+            let n = tree.resolve(pos, side);
+            while (n) {
+              if (n.name === "Expression") {
+                inside = pos > n.from + 2 && pos < n.to - 2;
+                break;
+              }
+              n = n.parent;
+            }
+            if (inside) {
+              break;
+            }
+          }
+        }
+        const insert = inside ? variableId : `{{ ${variableId} }}`;
+        view.dispatch({
+          changes: { from: pos, insert },
+          selection: { anchor: pos, head: pos + insert.length },
+        });
+        view.focus();
+
+        return true;
+      },
+    }),
+  ];
+}
+
+function buildValidation({ cmLanguage, cmView }) {
+  const { syntaxTree } = cmLanguage;
+  const { Decoration, ViewPlugin } = cmView;
+
+  const errorMark = Decoration.mark({ class: "cm-wf-error" });
+
+  return ViewPlugin.fromClass(
+    class {
+      decorations;
+
+      constructor(view) {
+        this.decorations = this.build(view.state);
+      }
+
+      update(update) {
+        if (update.docChanged || update.startState.tree !== update.state.tree) {
+          this.decorations = this.build(update.state);
+        }
+      }
+
+      build(state) {
+        const widgets = [];
+        const tree = syntaxTree(state);
+        const docLen = state.doc.length;
+
+        tree.iterate({
+          enter(node) {
+            if (node.name === "Expression") {
+              const text = state.doc.sliceString(node.from, node.to);
+              if (!text.endsWith("}}")) {
+                widgets.push(errorMark.range(node.from, docLen));
+              }
+            }
+          },
+        });
+
+        return Decoration.set(widgets, true);
+      }
+    },
+    { decorations: (v) => v.decorations }
+  );
+}
+
+function buildAutoCloseBraces({ cmAutocomplete, cmView }) {
+  const { startCompletion } = cmAutocomplete;
+  const { EditorView } = cmView;
+
+  return EditorView.inputHandler.of((view, from, to, text) => {
+    if (text !== "{") {
+      return false;
+    }
+
+    const before = view.state.doc.sliceString(Math.max(0, from - 1), from);
+    if (before !== "{") {
+      return false;
+    }
+
+    const after = view.state.doc.sliceString(to, to + 2);
+    if (after === "}}") {
+      // Already have closing braces — just insert the space and move cursor in
+      view.dispatch({
+        changes: { from, to, insert: "{  " },
+        selection: { anchor: from + 2 },
+      });
+    } else {
+      view.dispatch({
+        changes: { from, to, insert: "{  }}" },
+        selection: { anchor: from + 2 },
+      });
+    }
+
+    startCompletion(view);
+
+    return true;
+  });
+}
+
+function buildExpressionDecorations({ cmState, cmView }) {
+  const { StateEffect, StateField } = cmState;
+  const { Decoration, EditorView } = cmView;
+
+  const MARKS = {
+    valid: Decoration.mark({ class: "cm-wf-valid-expression" }),
+    invalid: Decoration.mark({ class: "cm-wf-invalid-expression" }),
+    undefined: Decoration.mark({ class: "cm-wf-invalid-expression" }),
+    empty: Decoration.mark({ class: "cm-wf-empty-expression" }),
+    warning: Decoration.mark({ class: "cm-wf-warning-expression" }),
+    pending: Decoration.mark({ class: "cm-wf-pending-expression" }),
+  };
+
+  const setSegmentsEffect = StateEffect.define();
+
+  const field = StateField.define({
+    create() {
+      return Decoration.none;
+    },
+    update(decorations, tr) {
+      decorations = decorations.map(tr.changes);
+
+      for (const effect of tr.effects) {
+        if (effect.is(setSegmentsEffect)) {
+          const ranges = effect.value.filter(
+            (seg) =>
+              seg.kind === "resolved" &&
+              seg.from !== undefined &&
+              seg.to !== undefined
+          );
+          decorations = ranges.length
+            ? Decoration.set(
+                ranges.map(({ from, to, state }) =>
+                  (MARKS[state] || MARKS.invalid).range(from, to)
+                ),
+                true
+              )
+            : Decoration.none;
+        }
+      }
+
+      return decorations;
+    },
+    provide: (f) => EditorView.decorations.from(f),
+  });
+
+  return { field, setSegmentsEffect };
+}
+
+function buildTheme({ cmLanguage, lezerHighlight }) {
+  const { HighlightStyle, syntaxHighlighting } = cmLanguage;
+  const { tags } = lezerHighlight;
+
+  return syntaxHighlighting(
+    HighlightStyle.define([
+      { tag: tags.content, class: "cm-wf-text" },
+      { tag: tags.brace, class: "cm-wf-brace" },
+      { tag: tags.keyword, class: "cm-wf-keyword" },
+      { tag: tags.string, class: "cm-wf-string" },
+      { tag: tags.number, class: "cm-wf-number" },
+      { tag: tags.bool, class: "cm-wf-bool" },
+      { tag: tags.null, class: "cm-wf-null" },
+      { tag: tags.variableName, class: "cm-wf-variable" },
+      { tag: tags.propertyName, class: "cm-wf-property" },
+      { tag: tags.function(tags.variableName), class: "cm-wf-function" },
+      { tag: tags.function(tags.propertyName), class: "cm-wf-function" },
+      { tag: tags.operator, class: "cm-wf-operator" },
+      { tag: tags.punctuation, class: "cm-wf-punctuation" },
+      { tag: tags.comment, class: "cm-wf-comment" },
+    ])
+  );
+}
+
+function buildExpressionValidator(
+  { cmView },
+  { setSegmentsEffect, workflowId, nodeId, onSegmentsResolved }
+) {
+  const { ViewPlugin } = cmView;
+
+  return ViewPlugin.fromClass(
+    class {
+      timeout = null;
+      destroyed = false;
+
+      constructor(view) {
+        this.view = view;
+        if (workflowId && nodeId && view.state.doc.toString()) {
+          this.evaluate();
+        }
+      }
+
+      update(update) {
+        if (update.docChanged) {
+          this.scheduleEvaluation();
+        } else if (
+          update.focusChanged &&
+          update.view.hasFocus &&
+          update.view.state.doc.toString()
+        ) {
+          this.evaluate();
+        }
+      }
+
+      scheduleEvaluation() {
+        clearTimeout(this.timeout);
+        const template = this.view.state.doc.toString();
+        if (!template) {
+          this.timeout = setTimeout(() => this.dispatch([]), 0);
+          return;
+        }
+        this.timeout = setTimeout(() => this.evaluate(), 500);
+      }
+
+      async evaluate() {
+        const template = this.view.state.doc.toString();
+        try {
+          const result = await ajax(
+            "/admin/plugins/discourse-workflows/expressions/evaluate.json",
+            {
+              type: "POST",
+              data: { template, workflow_id: workflowId, node_id: nodeId },
+            }
+          );
+
+          if (this.destroyed || template !== this.view.state.doc.toString()) {
+            return;
+          }
+
+          this.dispatch(result.segments || []);
+        } catch {
+          if (this.destroyed) {
+            return;
+          }
+          this.dispatch([]);
+        }
+      }
+
+      dispatch(segments) {
+        this.view.dispatch({
+          effects: setSegmentsEffect.of(segments),
+        });
+        onSegmentsResolved?.(segments);
+      }
+
+      destroy() {
+        clearTimeout(this.timeout);
+        this.destroyed = true;
+      }
+    }
+  );
+}
+
+export default function workflowExtension(cmParams, domainOpts = {}) {
+  const itemPrefix = domainOpts.itemPrefix || "$json";
+  const analyzeAtCursor = buildAnalyzeAtCursor(cmParams);
+  const SECTION_NODES = cmParams.utils.section("Previous nodes", 1);
+  const sections = { ...cmParams.utils.sections, nodes: SECTION_NODES };
+
+  const scope = buildScope(domainOpts);
+  const ancestorNodes = domainOpts.ancestorNodes || [];
+  const completionOpts = { scope, ancestorNodes, analyzeAtCursor, sections };
+
+  const { field: decorationsField, setSegmentsEffect } =
+    buildExpressionDecorations(cmParams);
+
+  return [
+    cmParams.utils.expressionLanguage(),
+    buildTheme(cmParams),
+    buildValidation(cmParams),
+    buildAutoCloseBraces(cmParams),
+    ...buildDragDrop(cmParams, { itemPrefix }),
+    ...buildCompletions(cmParams, completionOpts),
+    buildHoverTooltip(cmParams, completionOpts),
+    buildArgumentInfo(cmParams, completionOpts),
+    decorationsField,
+    buildExpressionValidator(cmParams, {
+      setSegmentsEffect,
+      workflowId: domainOpts.workflowId,
+      nodeId: domainOpts.nodeId,
+      onSegmentsResolved: domainOpts.onSegmentsResolved,
+    }),
+  ];
+}
diff --git a/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/expression-context.js b/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/expression-context.js
new file mode 100644
index 0000000000000..25f1981ba90c0
--- /dev/null
+++ b/plugins/discourse-workflows/admin/assets/javascripts/admin/lib/workflows/expression-context.js
@@ -0,0 +1,175 @@
+export const WORKFLOW_VARIABLE_MIME = "application/x-workflow-variable";
+
+export function resolveVariableId(variable, itemPrefix = "$json") {
+  return variable.id.startsWith("$")
+    ? variable.id
+    : `${itemPrefix}.${variable.id}`;
+}
+
+// Matches paths like $('Node Name').rest or $("Node Name").rest
+const NODE_REF_RE = /^\$\((['"])(.*?)\1\)/;
+
+export function walkScope(scope, path) {
+  if (!path) {
+    return undefined;
+  }
+
+  const nodeRef = NODE_REF_RE.exec(path);
+  if (nodeRef) {
+    const nodeName = nodeRef[2];
+    const rest = path.slice(nodeRef[0].length);
+    const parts = rest ? rest.slice(1).split(".") : []; // skip leading "."
+    let target;
+    try {
+      target = scope.$(nodeName);
+    } catch {
+      return undefined;
+    }
+    for (const part of parts) {
+      if (target == null) {
+        return undefined;
+      }
+      target = target[part];
+    }
+    return target;
+  }
+
+  const parts = path.split(".");
+  let target = scope[parts[0]];
+  for (let i = 1; i < parts.length; i++) {
+    if (target == null) {
+      return undefined;
+    }
+    target = target[parts[i]];
+  }
+  return target;
+}
+
+const TYPE_EXEMPLARS = {
+  string: "",
+  integer: 0,
+  number: 0,
+  boolean: false,
+  array: [],
+  object: {},
+};
+
+function cleanObject(obj) {
+  const clean = Object.create(null);
+  for (const [key, value] of Object.entries(obj)) {
+    clean[key] = value;
+  }
+  return clean;
+}
+
+const EMPTY_NODE_OUTPUT = cleanObject({
+  item: cleanObject({ json: Object.create(null) }),
+});
+
+function buildScopeFromFields(fields) {
+  if (!fields?.length) {
+    return Object.create(null);
+  }
+
+  const obj = Object.create(null);
+  for (const field of fields) {
+    if (field.children?.length) {
+      obj[field.key] = buildScopeFromFields(field.children);
+    } else {
+      obj[field.key] = TYPE_EXEMPLARS[field.type] ?? TYPE_EXEMPLARS.string;
+    }
+  }
+  return obj;
+}
+
+function buildSiteSettingsScope(siteSettings) {
+  if (!siteSettings) {
+    return Object.create(null);
+  }
+
+  const scope = Object.create(null);
+  for (const key of Object.keys(siteSettings)) {
+    if (key.startsWith("_") || key.startsWith("theme")) {
+      continue;
+    }
+
+    const value = siteSettings[key];
+    const type = typeof value;
+
+    if (type === "function" || type === "symbol") {
+      continue;
+    }
+
+    scope[key] = value;
+  }
+  return scope;
+}
+
+function buildVarsScope(workflowVars) {
+  const scope = Object.create(null);
+  if (workflowVars?.length) {
+    for (const v of workflowVars) {
+      scope[v.key] = v.value ?? "";
+    }
+  }
+  return scope;
+}
+
+function buildExecutionScope(nodes) {
+  const scope = cleanObject({
+    id: 0,
+    workflow_id: 0,
+    workflow_name: "",
+  });
+
+  const hasWebhookWait = (nodes || []).some(
+    (n) => n.type === "core:wait" && n.configuration?.resume === "webhook"
+  );
+
+  if (hasWebhookWait) {
+    scope.resume_webhook_url = "";
+  }
+
+  return scope;
+}
+
+export function buildScope({
+  inputFields = [],
+  ancestorNodes = [],
+  siteSettings,
+  workflowVars,
+  nodes,
+}) {
+  const $json = buildScopeFromFields(inputFields);
+
+  const nodeOutputs = Object.create(null);
+  for (const ancestor of ancestorNodes) {
+    const json = buildScopeFromFields(ancestor.fields);
+    nodeOutputs[ancestor.node.name] = cleanObject({
+      item: cleanObject({ json }),
+    });
+  }
+
+  return cleanObject({
+    $json,
+    trigger: $json,
+    $site_settings: buildSiteSettingsScope(siteSettings),
+    $current_user: cleanObject({ id: 0, username: "" }),
+    $vars: buildVarsScope(workflowVars),
+    $execution: buildExecutionScope(nodes),
+    $: (name) => nodeOutputs[name] || EMPTY_NODE_OUTPUT,
+    JSON,
+    Math,
+    Object,
+    Array,
+    String,
+    Number,
+    Date,
+    parseInt,
+    parseFloat,
+    encodeURIComponent,
+    decodeURIComponent,
+    isNaN,
+    isFinite,
+  });
+}
diff --git a/plugins/discourse-workflows/app/controllers/discourse_workflows/expressions_controller.rb b/plugins/discourse-workflows/app/controllers/discourse_workflows/expressions_controller.rb
new file mode 100644
index 0000000000000..3ef8018aad058
--- /dev/null
+++ b/plugins/discourse-workflows/app/controllers/discourse_workflows/expressions_controller.rb
@@ -0,0 +1,149 @@
+# frozen_string_literal: true
+
+module DiscourseWorkflows
+  class ExpressionsController < ::Admin::AdminController
+    requires_plugin DiscourseWorkflows::PLUGIN_NAME
+
+    def evaluate
+      RateLimiter.new(
+        current_user,
+        "expression-evaluate",
+        30,
+        60,
+        apply_limit_to_staff: true,
+      ).performed!
+
+      template = params.require(:template)
+      workflow_id = params[:workflow_id]
+      node_id = params[:node_id]
+
+      context = build_context(workflow_id, node_id)
+      resolver = ExpressionResolver.new(context, user: current_user)
+
+      segments = resolver.resolve_segments(template)
+
+      render json: { segments: }
+    rescue MiniRacer::Error => e
+      Rails.logger.warn("Expression evaluation failed: #{e.message}")
+      render json: { segments: [] }
+    ensure
+      resolver&.dispose
+    end
+
+    private
+
+    def build_context(workflow_id, node_id)
+      context = { "$json" => {}, "trigger" => {} }
+
+      if workflow_id.present?
+        workflow = Workflow.find_by(id: workflow_id)
+        if workflow
+          context["__execution"] = {
+            "id" => 0,
+            "workflow_id" => workflow.id,
+            "workflow_name" => workflow.name,
+          }
+
+          populate_context_from_schema(context, workflow, node_id)
+
+          execution =
+            workflow
+              .executions
+              .includes(:execution_data)
+              .where(status: :success)
+              .order(created_at: :desc)
+              .first
+
+          if execution
+            context["__execution"]["id"] = execution.id
+
+            if execution.execution_data
+              overlay_execution_data(context, execution.execution_data.entries, workflow, node_id)
+            end
+          end
+        end
+      end
+
+      context
+    end
+
+    def populate_context_from_schema(context, workflow, node_id)
+      nodes = workflow.parsed_nodes
+      connections = workflow.parsed_connections
+
+      nodes.each do |node|
+        node_class = Registry.find_node_type(node["type"])
+        next unless node_class.respond_to?(:output_schema)
+
+        json = exemplar_from_schema(node_class.output_schema)
+
+        if node["type"]&.start_with?("trigger:")
+          context["trigger"] = json
+          context["$json"] = json unless node_id
+        end
+
+        context[node["name"]] = [{ "json" => json }] if node["name"].present?
+      end
+
+      if node_id
+        upstream = find_upstream_node(node_id, nodes, connections)
+        if upstream
+          node_class = Registry.find_node_type(upstream["type"])
+          if node_class.respond_to?(:output_schema)
+            context["$json"] = exemplar_from_schema(node_class.output_schema)
+          end
+        end
+      end
+    end
+
+    def find_upstream_node(node_id, nodes, connections)
+      conn = connections.find { |c| c["target_node_id"] == node_id.to_s }
+      return unless conn
+      nodes.find { |n| n["id"] == conn["source_node_id"] }
+    end
+
+    TYPE_EXEMPLARS = {
+      string: "",
+      integer: 0,
+      number: 0,
+      boolean: false,
+      array: [],
+      object: {
+      },
+    }.freeze
+
+    def exemplar_from_schema(schema)
+      schema.each_with_object({}) do |(key, value), hash|
+        hash[key.to_s] = if value.is_a?(Hash)
+          exemplar_from_schema(value)
+        else
+          TYPE_EXEMPLARS.fetch(value, "")
+        end
+      end
+    end
+
+    def overlay_execution_data(context, run_data, workflow, node_id)
+      upstream_name = nil
+      if node_id
+        upstream = find_upstream_node(node_id, workflow.parsed_nodes, workflow.parsed_connections)
+        upstream_name = upstream["name"] if upstream
+      end
+
+      run_data.each do |node_name, steps|
+        step = Array(steps).find { |s| s["status"] == "success" }
+        next unless step
+
+        items = step["output_items"] || step["items"] || []
+        json = items.dig(0, "json") || {}
+
+        if step["node_type"]&.start_with?("trigger:")
+          context["trigger"] = json
+          context["$json"] = json unless node_id
+        end
+
+        context[node_name] = [{ "json" => json }]
+        context["$json"] = json if upstream_name && node_name == upstream_name
+      end
+    end
+  end
+end
diff --git a/plugins/discourse-workflows/assets/javascripts/discourse/services/workflows-node-types.js b/plugins/discourse-workflows/assets/javascripts/discourse/services/workflows-node-types.js
index 9ccb627c74b90..80b1d04398b9d 100644
--- a/plugins/discourse-workflows/assets/javascripts/discourse/services/workflows-node-types.js
+++ b/plugins/discourse-workflows/assets/javascripts/discourse/services/workflows-node-types.js
@@ -8,6 +8,15 @@ export default class WorkflowsNodeTypes extends Service {
   @tracked credentialTypes = null;
   @tracked expressionContext = {};
 
+  // Graph context for the currently-editing node. Set by the editor
+  // when the configurator modal opens, read by VariableInput to build
+  // CodeMirror completion scope without prop drilling.
+  @tracked editingNode = null;
+  @tracked graphNodes = null;
+  @tracked graphConnections = null;
+  @tracked workflowVars = null;
+  @tracked workflowId = null;
+
   _nodeTypeMap = new Map();
 
   async load() {
@@ -36,10 +45,47 @@ export default class WorkflowsNodeTypes extends Service {
     return this._nodeTypeMap.get(identifier) || null;
   }
 
+  setEditingContext(node, nodes, connections, { workflowId } = {}) {
+    this.editingNode = node;
+    this.graphNodes = nodes;
+    this.graphConnections = connections;
+    this.workflowId = workflowId;
+  }
+
+  async loadWorkflowVars() {
+    if (this.workflowVars) {
+      return this.workflowVars;
+    }
+
+    try {
+      const result = await ajax(
+        "/admin/plugins/discourse-workflows/variables.json"
+      );
+      this.workflowVars = result.variables || [];
+    } catch {
+      this.workflowVars = [];
+    }
+    return this.workflowVars;
+  }
+
+  invalidateWorkflowVars() {
+    this.workflowVars = null;
+  }
+
+  clearEditingContext() {
+    this.editingNode = null;
+    this.graphNodes = null;
+    this.graphConnections = null;
+    this.workflowId = null;
+  }
+
   clear() {
     this.nodeTypes = null;
     this.credentialTypes = null;
     this.expressionContext = {};
     this._nodeTypeMap = new Map();
+    this.invalidateWorkflowVars();
+    this.workflowId = null;
+    this.clearEditingContext();
   }
 }
diff --git a/plugins/discourse-workflows/assets/stylesheets/common/index.scss b/plugins/discourse-workflows/assets/stylesheets/common/index.scss
index 1ca9f674c6698..682f5bc387fe0 100644
--- a/plugins/discourse-workflows/assets/stylesheets/common/index.scss
+++ b/plugins/discourse-workflows/assets/stylesheets/common/index.scss
@@ -10,7 +10,6 @@
 @import "context/context-panel";
 @import "context/schema-field";
 @import "variable/variable-input";
-@import "variable/variable-pill";
 @import "credential/credentials-manager";
 @import "executions/executions";
 @import "executions/executions-manager";
diff --git a/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-input.scss b/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-input.scss
index 08798fcd6a667..deda8c7805a45 100644
--- a/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-input.scss
+++ b/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-input.scss
@@ -1,32 +1,338 @@
 .workflows-variable-input {
-  padding: 0.5em;
-  min-height: 80px;
   width: 100%;
   border: 1px solid var(--primary-low-mid);
   border-radius: var(--d-border-radius);
   background: var(--secondary);
-  font-size: var(--font-0);
-  font-family: inherit;
-  line-height: 1.4;
-  white-space: pre-wrap;
-  overflow-y: auto;
-  overflow-wrap: break-word;
   box-sizing: border-box;
-  cursor: text;
-  resize: vertical;
 
-  &:focus {
+  .cm-editor .cm-content {
+    min-height: 60px;
+    padding: 0.5em;
+    font-size: var(--font-0);
+    font-family: inherit;
+  }
+
+  .cm-editor .cm-lineWrapping {
+    word-break: break-all;
+  }
+
+  &:focus-within {
     outline: none;
     border-color: var(--tertiary);
     box-shadow: 0 0 0 1px var(--tertiary);
   }
 
-  &.is-drag-over {
+  .is-drag-over & {
     border-color: var(--tertiary);
-    background: color-mix(in srgb, var(--tertiary) 5%, var(--secondary));
+    background: var(--tertiary-50);
+  }
+
+  .cm-editor {
+    background: transparent;
+    color: var(--primary);
+
+    &.cm-focused {
+      outline: none;
+    }
+
+    .cm-cursor {
+      border-left-color: var(--primary);
+    }
+
+    .cm-selectionBackground {
+      background: var(--tertiary-low) !important;
+    }
+
+    .cm-content {
+      caret-color: var(--primary);
+    }
+
+    .cm-activeLine {
+      background: transparent;
+    }
+
+    // Base override for all CM tooltips — CM injects a light baseTheme
+    // dynamically, so we must override it for dark mode support.
+    .cm-tooltip {
+      z-index: z("modal", "tooltip") !important;
+      background: var(--secondary);
+      border: 1px solid var(--primary-low-mid);
+      border-radius: var(--d-border-radius);
+      color: var(--primary);
+      font-size: var(--font-down-2);
+      box-shadow: var(--shadow-dropdown);
+    }
+
+    .cm-tooltip-autocomplete {
+      > ul {
+        font-family: inherit;
+
+        > li {
+          padding: 1px 0.4em;
+        }
+      }
+
+      li[aria-selected] {
+        background: var(--tertiary-low);
+        color: var(--primary);
+      }
+    }
+
+    // Section headers in the autocomplete dropdown
+    .cm-expr-section-header {
+      padding: 0.1em 0.4em;
+      font-size: var(--font-down-3);
+      font-weight: 700;
+      color: var(--primary-medium);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border-bottom: 1px solid var(--primary-low);
+    }
+
+    // Info tooltip panel next to autocomplete — inherits font-size
+    // from .cm-tooltip (--font-down-2) for consistency with the list.
+    .cm-completionInfo {
+      padding: 0.3em 0.5em;
+      max-width: 200px;
+      width: 200px;
+      box-sizing: border-box;
+      overflow-wrap: break-word;
+    }
+
+    .cm-expr-completion-info {
+      &__signature {
+        font-family: var(--d-font-family--monospace);
+        font-weight: 600;
+        margin-bottom: 0.15em;
+        color: var(--primary-medium);
+        word-break: break-all;
+      }
+
+      &__description {
+        color: var(--primary-high);
+        margin-bottom: 0.15em;
+        line-height: 1.3;
+      }
+
+      &__example code {
+        background: var(--primary-very-low);
+        padding: 0.1em 0.2em;
+        border-radius: 2px;
+        font-family: var(--d-font-family--monospace);
+        font-size: 0.9em;
+        word-break: break-all;
+      }
+    }
+
+    // Syntax highlighting — theme-aware via Discourse CSS vars
+    .cm-wf-text {
+      color: var(--primary);
+    }
+
+    .cm-wf-brace {
+      color: var(--tertiary);
+      opacity: 0.7;
+      font-weight: 700;
+    }
+
+    .cm-wf-keyword {
+      color: var(--tertiary);
+    }
+
+    .cm-wf-string {
+      color: var(--success);
+    }
+
+    .cm-wf-number {
+      color: var(--success);
+    }
+
+    .cm-wf-bool,
+    .cm-wf-null {
+      color: var(--tertiary);
+    }
+
+    .cm-wf-variable {
+      color: var(--primary-high);
+    }
+
+    .cm-wf-property {
+      color: var(--primary-high);
+    }
+
+    .cm-wf-function {
+      color: var(--tertiary-hover);
+    }
+
+    .cm-wf-operator,
+    .cm-wf-punctuation {
+      color: var(--primary);
+    }
+
+    .cm-wf-comment {
+      color: var(--primary-medium);
+      font-style: italic;
+    }
+
+    // Validation underlines
+    .cm-wf-error {
+      text-decoration: wavy underline var(--danger);
+      text-decoration-skip-ink: none;
+      text-underline-offset: 3px;
+    }
+
+    // Expression state colors — applied by backend evaluation results
+    .cm-wf-valid-expression {
+      background: color-mix(in srgb, var(--success) 12%, transparent);
+      border-radius: 2px;
+    }
+
+    .cm-wf-invalid-expression {
+      background: color-mix(in srgb, var(--danger) 20%, transparent);
+      border-radius: 2px;
+      outline: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
+    }
+
+    .cm-wf-empty-expression {
+      background: color-mix(in srgb, var(--primary-low-mid) 20%, transparent);
+      border-radius: 2px;
+      outline: 1px dashed
+        color-mix(in srgb, var(--primary-medium) 40%, transparent);
+    }
+
+    .cm-wf-warning-expression {
+      background: color-mix(in srgb, var(--highlight-medium) 40%, transparent);
+      border-radius: 2px;
+    }
+
+    .cm-wf-pending-expression {
+      background: color-mix(in srgb, var(--primary-low-mid) 30%, transparent);
+      border-radius: 2px;
+    }
+
+    // Drop cursor during variable drag
+    .cm-dropCursor {
+      position: absolute;
+      width: 2px;
+      background: var(--tertiary);
+      pointer-events: none;
+      z-index: 10;
+    }
+  }
+
+  .cm-tooltip-hover {
+    background: var(--secondary) !important;
+    border: 1px solid var(--primary-low-mid) !important;
+    border-radius: var(--d-border-radius);
+    box-shadow: var(--shadow-dropdown);
+  }
+
+  .cm-wf-hover-tooltip {
+    padding: 0.4em 0.6em;
+    max-width: 260px;
+    font-size: var(--font-down-2);
+
+    &__name {
+      color: var(--tertiary);
+      margin-bottom: 0.15em;
+    }
+
+    &__description {
+      color: var(--primary-high);
+      line-height: 1.3;
+    }
   }
 
   .workflows-property-engine__collection-fields & {
+    background: transparent;
     min-height: 100px;
+
+    &:focus-within {
+      box-shadow: none;
+    }
+  }
+}
+
+.fk-d-tooltip__content[data-identifier="expression-preview"] {
+  // Above normal content, below modal tooltips/popovers where CM autocomplete lives
+  z-index: z("tooltip") !important;
+  box-sizing: border-box;
+  pointer-events: auto;
+  user-select: text;
+
+  .fk-d-tooltip__inner-content {
+    display: block;
+    width: 100%;
+    pointer-events: auto;
+    user-select: text;
+  }
+}
+
+.expression-preview {
+  padding: 0.3em 0.5em;
+  font-size: var(--font-down-2);
+  font-family: var(--d-font-family--monospace);
+  max-height: 80px;
+  overflow-y: auto;
+
+  &__result {
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  &__label {
+    float: right;
+    font-weight: 700;
+    font-size: var(--font-down-3);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--primary-low-mid);
+    margin-left: 0.5em;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  &__error-text {
+    color: var(--danger);
+    background: color-mix(in srgb, var(--danger) 10%, transparent);
+    border-radius: 2px;
+    padding: 0.1em 0.2em;
+  }
+
+  &__resolved {
+    &--valid {
+      color: var(--tertiary);
+    }
+
+    &--invalid,
+    &--undefined {
+      color: var(--danger);
+      background: color-mix(in srgb, var(--danger) 10%, transparent);
+      border-radius: 2px;
+      padding: 0.1em 0.2em;
+    }
+
+    &--warning {
+      color: var(--warning, light-dark(#b5651d, #e6a33e));
+      background: color-mix(in srgb, var(--warning, #e6a33e) 10%, transparent);
+      border-radius: 2px;
+      padding: 0.1em 0.2em;
+      font-style: italic;
+    }
+
+    &--pending {
+      color: var(--primary-medium);
+    }
+
+    &--label {
+      background: color-mix(in srgb, var(--primary-low-mid) 40%, transparent);
+      border-radius: 2px;
+      padding: 0.1em 0.4em;
+      font-size: var(--font-down-1);
+    }
+  }
+
+  &__plaintext {
+    color: var(--primary);
   }
 }
diff --git a/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-pill.scss b/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-pill.scss
deleted file mode 100644
index 4a2b0bc8fc770..0000000000000
--- a/plugins/discourse-workflows/assets/stylesheets/common/variable/variable-pill.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.workflows-variable-pill {
-  display: inline;
-  padding: 0.1em 0;
-  margin: 0 0.1em;
-  font-family: var(--d-font-family--monospace);
-  font-size: var(--font-down-1);
-  color: var(--tertiary);
-  vertical-align: baseline;
-
-  &::before {
-    content: "{{ ";
-    opacity: 0.6;
-  }
-
-  &::after {
-    content: " }}";
-    opacity: 0.6;
-  }
-}
diff --git a/plugins/discourse-workflows/config/locales/client.en.yml b/plugins/discourse-workflows/config/locales/client.en.yml
index 1831b83de716a..15bbac33181a9 100644
--- a/plugins/discourse-workflows/config/locales/client.en.yml
+++ b/plugins/discourse-workflows/config/locales/client.en.yml
@@ -237,6 +237,13 @@ en:
         fixed: "Fixed"
         plain: "Plain"
         dynamic: "Dynamic"
+      expression_preview:
+        result: "Result"
+        empty: "empty"
+        undefined: "undefined"
+        invalid: "invalid JavaScript"
+        warning: "missing function call"
+        pending: "not resolved yet"
       property_engine:
         add_item: "Add item"
         remove_item: "Remove item"
diff --git a/plugins/discourse-workflows/config/routes.rb b/plugins/discourse-workflows/config/routes.rb
index 1113551770606..7d6f980c4a649 100644
--- a/plugins/discourse-workflows/config/routes.rb
+++ b/plugins/discourse-workflows/config/routes.rb
@@ -39,6 +39,7 @@
       get "/executions/:id" => "executions#show"
       get "/stats" => "stats#index"
       get "/stats/:workflow_id" => "stats#show"
+      post "/expressions/evaluate" => "expressions#evaluate"
       get "/variables" => "variables#index"
       post "/variables" => "variables#create"
       put "/variables/:id" => "variables#update"
diff --git a/plugins/discourse-workflows/lib/discourse_workflows/expression_resolver.rb b/plugins/discourse-workflows/lib/discourse_workflows/expression_resolver.rb
index 2661ddeceaca8..dd93492d14804 100644
--- a/plugins/discourse-workflows/lib/discourse_workflows/expression_resolver.rb
+++ b/plugins/discourse-workflows/lib/discourse_workflows/expression_resolver.rb
@@ -2,9 +2,28 @@
 
 module DiscourseWorkflows
   class ExpressionResolver
-    EXPRESSION_REGEX = /\{\{(.*?)\}\}/
     WHOLE_EXPRESSION_REGEX = /\A\{\{\s*([^{}]*?)\s*\}\}\z/
 
+    def self.find_matching_close(template, start)
+      depth = 1
+      cursor = start
+
+      while cursor < template.length - 1 && depth > 0
+        if template[cursor] == "{" && template[cursor + 1] == "{"
+          depth += 1
+          cursor += 2
+        elsif template[cursor] == "}" && template[cursor + 1] == "}"
+          depth -= 1
+          return cursor if depth == 0
+          cursor += 2
+        else
+          cursor += 1
+        end
+      end
+
+      nil
+    end
+
     def self.resolve(value, context: {}, user: nil)
       resolver = new(context, user: user)
       resolver.resolve(value)
@@ -47,6 +66,54 @@ def expression_errors
       @js_evaluator&.expression_errors || []
     end
 
+    def evaluate_expression(expression)
+      result = js_evaluator.evaluate(expression)
+      last_error = js_evaluator.expression_errors.last
+
+      if last_error && last_error[:expression] == expression
+        { result: nil, error: last_error[:error], error_type: last_error[:type] }
+      else
+        { result:, error: nil, error_type: nil }
+      end
+    end
+
+    def resolve_segments(template)
+      segments = []
+      pos = 0
+
+      while pos < template.length
+        open = template.index("{{", pos)
+
+        if open.nil?
+          segments << { kind: "plaintext", text: template[pos..] } if pos < template.length
+          break
+        end
+
+        segments << { kind: "plaintext", text: template[pos...open] } if open > pos
+
+        close = self.class.find_matching_close(template, open + 2)
+
+        unless close
+          segments << { kind: "plaintext", text: template[open..] }
+          break
+        end
+
+        expression = template[(open + 2)...close].strip
+        segment = { kind: "resolved", from: open, to: close + 2 }
+
+        if expression.empty?
+          segment.merge!(text: "", state: "empty")
+        else
+          segment.merge!(classify_eval_result(evaluate_expression(expression)))
+        end
+
+        segments << segment
+        pos = close + 2
+      end
+
+      segments
+    end
+
     def with_item(item_json)
       previous_json = @context["$json"]
       @context["$json"] = item_json
@@ -59,6 +126,19 @@ def with_item(item_json)
 
     private
 
+    def classify_eval_result(eval_result)
+      if eval_result[:error]
+        state = eval_result[:error_type] == :undefined ? "undefined" : "invalid"
+        return { text: "", state: }
+      end
+
+      result = eval_result[:result]
+      return { text: "", state: "undefined" } if result.nil?
+      return { text: "", state: "warning" } if result.is_a?(MiniRacer::JavaScriptFunction)
+
+      { text: format_value(result), state: "valid" }
+    end
+
     def resolve_tree(value)
       case value
       when Hash
@@ -75,10 +155,36 @@ def resolvable_string?(value)
     end
 
     def render_template(template)
-      template.gsub(EXPRESSION_REGEX) do
-        expression = Regexp.last_match(1).strip
-        format_value(js_evaluator.evaluate(expression))
+      result = +""
+      pos = 0
+
+      while pos < template.length
+        open = template.index("{{", pos)
+
+        if open.nil?
+          result << template[pos..]
+          break
+        end
+
+        result << template[pos...open] if open > pos
+
+        close = find_matching_close(template, open + 2)
+
+        if close
+          expression = template[(open + 2)...close].strip
+          result << format_value(js_evaluator.evaluate(expression))
+          pos = close + 2
+        else
+          result << template[open..]
+          break
+        end
       end
+
+      result
+    end
+
+    def find_matching_close(template, start)
+      self.class.find_matching_close(template, start)
     end
 
     def js_evaluator
@@ -106,10 +212,26 @@ def evaluate(expression)
         ensure_sandbox!
         @sandbox.eval(expression)
       rescue MiniRacer::Error => e
-        @expression_errors << { expression: expression, error: e.message }
+        # Bare objects like { a: 1 } fail as blocks — retry wrapped in parens
+        if e.message.include?("SyntaxError") && expression.strip.start_with?("{")
+          begin
+            return @sandbox.eval("(#{expression})")
+          rescue MiniRacer::Error
+          end
+        end
+        @expression_errors << { expression: expression, error: e.message, type: classify_error(e) }
         nil
       end
 
+      def classify_error(error)
+        msg = error.message
+        if msg.include?("is not defined") || msg.include?("Cannot read properties")
+          :undefined
+        else
+          :invalid
+        end
+      end
+
       def dispose
         @sandbox&.dispose if @owned
         @sandbox = nil
diff --git a/plugins/discourse-workflows/spec/lib/discourse_workflows/expression_resolver_spec.rb b/plugins/discourse-workflows/spec/lib/discourse_workflows/expression_resolver_spec.rb
index ae46af07fda7b..3c88c6540b321 100644
--- a/plugins/discourse-workflows/spec/lib/discourse_workflows/expression_resolver_spec.rb
+++ b/plugins/discourse-workflows/spec/lib/discourse_workflows/expression_resolver_spec.rb
@@ -10,6 +10,8 @@
 
   let(:context) { { "trigger" => { "topic_id" => 42, "tags" => %w[bug help] } } }
 
+  after { resolver.dispose }
+
   describe "#resolve" do
     it "returns non-string values as-is" do
       expect(resolver.resolve(42)).to eq(42)
@@ -64,10 +66,6 @@
       expect(resolver.resolve("={{ trigger.tags }}")).to eq(%w[bug help])
     end
 
-    it "preserves integer type for single-expression values" do
-      expect(resolver.resolve("={{ trigger.topic_id }}")).to eq(42)
-    end
-
     it "still returns string for mixed templates" do
       result = resolver.resolve("=hello {{ trigger.topic_id }}!")
       expect(result).to eq("hello 42!")
@@ -281,6 +279,58 @@
     end
   end
 
+  describe "#resolve_segments" do
+    it "returns plaintext for text without expressions" do
+      segments = resolver.resolve_segments("hello world")
+      expect(segments).to eq([{ kind: "plaintext", text: "hello world" }])
+    end
+
+    it "returns a resolved segment for a valid expression" do
+      segments = resolver.resolve_segments("{{ $json.topic_id }}")
+      expect(segments.size).to eq(1)
+      expect(segments[0][:kind]).to eq("resolved")
+      expect(segments[0][:state]).to eq("valid")
+      expect(segments[0][:text]).to eq("42")
+      expect(segments[0][:from]).to eq(0)
+      expect(segments[0][:to]).to eq("{{ $json.topic_id }}".length)
+    end
+
+    it "returns mixed segments for text with expressions" do
+      segments = resolver.resolve_segments("id: {{ $json.topic_id }}!")
+      expect(segments.size).to eq(3)
+      expect(segments[0]).to eq({ kind: "plaintext", text: "id: " })
+      expect(segments[1][:kind]).to eq("resolved")
+      expect(segments[1][:state]).to eq("valid")
+      expect(segments[2]).to eq({ kind: "plaintext", text: "!" })
+    end
+
+    it "marks undefined references" do
+      segments = resolver.resolve_segments("{{ undefined_var }}")
+      expect(segments[0][:state]).to eq("undefined")
+    end
+
+    it "marks syntax errors as invalid" do
+      segments = resolver.resolve_segments("{{ if( }}")
+      expect(segments[0][:state]).to eq("invalid")
+    end
+
+    it "marks uncalled functions as warning" do
+      segments = resolver.resolve_segments("{{ $json.tags.join }}")
+      expect(segments[0][:state]).to eq("warning")
+    end
+
+    it "marks empty expressions" do
+      segments = resolver.resolve_segments("{{  }}")
+      expect(segments[0][:state]).to eq("empty")
+    end
+
+    it "treats unclosed {{ as plaintext" do
+      segments = resolver.resolve_segments("hello {{ $json.title")
+      expect(segments.last[:kind]).to eq("plaintext")
+      expect(segments.last[:text]).to include("{{")
+    end
+  end
+
   describe ".resolve" do
     fab!(:user)
 
diff --git a/plugins/discourse-workflows/spec/requests/discourse_workflows/expressions_controller_spec.rb b/plugins/discourse-workflows/spec/requests/discourse_workflows/expressions_controller_spec.rb
new file mode 100644
index 0000000000000..ac071471d1d82
--- /dev/null
+++ b/plugins/discourse-workflows/spec/requests/discourse_workflows/expressions_controller_spec.rb
@@ -0,0 +1,289 @@
+# frozen_string_literal: true
+
+RSpec.describe DiscourseWorkflows::ExpressionsController do
+  fab!(:admin)
+
+  before { sign_in(admin) }
+
+  describe "POST /admin/plugins/discourse-workflows/expressions/evaluate" do
+    let(:endpoint) { "/admin/plugins/discourse-workflows/expressions/evaluate.json" }
+
+    it "evaluates a plain text template" do
+      post endpoint, params: { template: "Hello world" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"]).to contain_exactly(
+        { "kind" => "plaintext", "text" => "Hello world" },
+      )
+    end
+
+    it "evaluates a template with expressions" do
+      post endpoint, params: { template: "Hello {{ $current_user.username }}!" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"].length).to eq(3)
+      expect(json["segments"][0]).to eq({ "kind" => "plaintext", "text" => "Hello " })
+      expect(json["segments"][1]["kind"]).to eq("resolved")
+      expect(json["segments"][1]["state"]).to eq("valid")
+      expect(json["segments"][1]["text"]).to eq(admin.username)
+      expect(json["segments"][2]).to eq({ "kind" => "plaintext", "text" => "!" })
+    end
+
+    it "marks undefined references" do
+      post endpoint, params: { template: "{{ undefined_var.missing }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["kind"]).to eq("resolved")
+      expect(json["segments"][0]["state"]).to eq("undefined")
+    end
+
+    it "marks syntax errors as invalid" do
+      post endpoint, params: { template: "{{ if( }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("invalid")
+    end
+
+    it "detects uncalled functions as warnings" do
+      post endpoint, params: { template: "{{ $current_user.username.includes }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("warning")
+    end
+
+    it "uses execution data for $json when workflow_id is provided" do
+      workflow = Fabricate(:discourse_workflows_workflow, created_by: admin)
+      execution = DiscourseWorkflows::Execution.create!(workflow: workflow, status: :success)
+      DiscourseWorkflows::ExecutionData.create!(
+        execution: execution,
+        data: {
+          entries: {
+            "Topic created" => [
+              {
+                "status" => "success",
+                "node_type" => "trigger:topic_created",
+                "output_items" => [{ "json" => { "title" => "Test Topic" } }],
+              },
+            ],
+          },
+        }.to_json,
+      )
+
+      post endpoint, params: { template: "{{ $json.title }}", workflow_id: workflow.id }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["text"]).to eq("Test Topic")
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "resolves $execution metadata when workflow_id is provided" do
+      workflow = Fabricate(:discourse_workflows_workflow, created_by: admin, name: "My Workflow")
+
+      post endpoint,
+           params: {
+             template: "{{ $execution.workflow_name }}",
+             workflow_id: workflow.id,
+           }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["text"]).to eq("My Workflow")
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "resolves $json fields from trigger schema without past execution data" do
+      workflow =
+        Fabricate(
+          :discourse_workflows_workflow,
+          created_by: admin,
+          nodes: [{ "id" => "1", "type" => "trigger:topic_created", "name" => "Topic created" }],
+        )
+
+      post endpoint, params: { template: "{{ $json.topic.title }}", workflow_id: workflow.id }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "marks unknown fields as undefined with schema" do
+      workflow =
+        Fabricate(
+          :discourse_workflows_workflow,
+          created_by: admin,
+          nodes: [{ "id" => "1", "type" => "trigger:topic_created", "name" => "Topic created" }],
+        )
+
+      post endpoint, params: { template: "{{ $json.nonexistent }}", workflow_id: workflow.id }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("undefined")
+    end
+
+    it "evaluates multiline expressions" do
+      template = "{{ $current_user\n  .username }}"
+      post endpoint, params: { template: }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("valid")
+      expect(json["segments"][0]["text"]).to eq(admin.username)
+    end
+
+    it "marks trailing dot access as invalid" do
+      post endpoint, params: { template: "{{ $vars. }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["kind"]).to eq("resolved")
+      expect(json["segments"][0]["state"]).to eq("invalid")
+    end
+
+    it "resolves $vars" do
+      Fabricate(:discourse_workflows_variable, key: "API_KEY", value: "secret123")
+      post endpoint, params: { template: "{{ $vars.API_KEY }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["text"]).to eq("secret123")
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "resolves $site_settings" do
+      post endpoint, params: { template: "{{ $site_settings.title }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["text"]).to eq(SiteSetting.title)
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "handles multiple expressions with mixed validity" do
+      post endpoint, params: { template: "{{ $current_user.username }} {{ bad. }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      valid_seg = json["segments"].find { |s| s["state"] == "valid" }
+      invalid_seg = json["segments"].find { |s| s["state"] == "invalid" }
+      expect(valid_seg["text"]).to eq(admin.username)
+      expect(invalid_seg).to be_present
+    end
+
+    it "handles unclosed {{ as plaintext" do
+      post endpoint, params: { template: "Hello {{ $json.title" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      segments = json["segments"]
+      expect(segments.last["kind"]).to eq("plaintext")
+      expect(segments.last["text"]).to include("{{")
+    end
+
+    it "formats array results as JSON" do
+      post endpoint, params: { template: "{{ [1, 2, 3] }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["text"]).to eq("1, 2, 3")
+      expect(json["segments"][0]["state"]).to eq("valid")
+    end
+
+    it "retries bare object literals wrapped in parens on SyntaxError" do
+      post endpoint, params: { template: "{{ {a: 1, b: 2} }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("valid")
+      expect(json["segments"][0]["text"]).to eq("a, 1, b, 2")
+    end
+
+    it "handles adjacent expressions with no separator" do
+      post endpoint, params: { template: "{{ 1 }}{{ 2 }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      resolved_segments = json["segments"].select { |s| s["kind"] == "resolved" }
+      expect(resolved_segments.length).to eq(2)
+      expect(resolved_segments[0]["text"]).to eq("1")
+      expect(resolved_segments[1]["text"]).to eq("2")
+    end
+
+    it "handles nested braces inside expressions" do
+      post endpoint, params: { template: "{{ [1,2].filter(x => x > 1) }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("valid")
+      expect(json["segments"][0]["text"]).to eq("2")
+    end
+
+    it "resolves node references via $()" do
+      workflow = Fabricate(:discourse_workflows_workflow, created_by: admin)
+      execution = DiscourseWorkflows::Execution.create!(workflow: workflow, status: :success)
+      DiscourseWorkflows::ExecutionData.create!(
+        execution: execution,
+        data: {
+          entries: {
+            "Fetch data" => [
+              {
+                "status" => "success",
+                "node_type" => "action:http_request",
+                "output_items" => [{ "json" => { "name" => "Alice" } }],
+              },
+            ],
+          },
+        }.to_json,
+      )
+
+      post endpoint,
+           params: {
+             template: "{{ $('Fetch data').item.json.name }}",
+             workflow_id: workflow.id,
+           }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("valid")
+      expect(json["segments"][0]["text"]).to eq("Alice")
+    end
+
+    it "marks chaining off missing node refs as undefined" do
+      post endpoint, params: { template: "{{ $('Missing').item.item.item }}" }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+      expect(json["segments"][0]["state"]).to eq("undefined")
+    end
+
+    it "is rate limited" do
+      RateLimiter.enable
+      freeze_time
+
+      30.times do
+        post endpoint, params: { template: "test" }
+        expect(response.status).to eq(200)
+      end
+
+      post endpoint, params: { template: "test" }
+      expect(response.status).to eq(429)
+    end
+
+    it "requires the template parameter" do
+      post endpoint, params: {}
+      expect(response.status).to eq(400)
+    end
+
+    it "requires admin access" do
+      sign_in(Fabricate(:user))
+      post endpoint, params: { template: "test" }
+      expect(response.status).to eq(404)
+    end
+  end
+end
diff --git a/plugins/discourse-workflows/spec/system/expression_editor_spec.rb b/plugins/discourse-workflows/spec/system/expression_editor_spec.rb
new file mode 100644
index 0000000000000..0c2f863f62c37
--- /dev/null
+++ b/plugins/discourse-workflows/spec/system/expression_editor_spec.rb
@@ -0,0 +1,180 @@
+# frozen_string_literal: true
+
+RSpec.describe "Workflow Expression Editor" do
+  fab!(:admin)
+
+  let(:editor_page) { PageObjects::Pages::WorkflowEditor.new }
+  let(:expression_editor) { PageObjects::Pages::ExpressionEditor.new }
+
+  before { sign_in(admin) }
+
+  def open_create_post_configurator
+    editor_page.visit_new
+    editor_page.click_empty_state_add_node
+    editor_page.select_node_type("trigger:topic_created")
+    editor_page.click_add_node
+    editor_page.select_node_type("action:create_post")
+    editor_page.double_click_node(1)
+  end
+
+  def open_expression_editor
+    open_create_post_configurator
+    expression_editor.switch_to_expression_mode
+  end
+
+  context "when editing a node with expression fields" do
+    before { open_expression_editor }
+
+    it "shows the CodeMirror editor in expression mode" do
+      expect(expression_editor).to have_expression_editor
+    end
+
+    it "shows dollar variable completions on Ctrl+Space" do
+      expression_editor.type_in_editor("{{ ")
+      expression_editor.trigger_autocomplete
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("$json")
+      expect(expression_editor).to have_autocomplete_option("$execution")
+      expect(expression_editor).to have_autocomplete_option("$vars")
+    end
+
+    it "shows completions when typing $ inside expression braces" do
+      expression_editor.type_in_editor("{{ $")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("$json")
+      expect(expression_editor).to have_autocomplete_option("$vars")
+    end
+
+    it "auto-closes {{ }} and triggers completions" do
+      expression_editor.type_in_editor("{{")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+    end
+
+    it "shows global completions for Math, JSON, etc." do
+      expression_editor.type_in_editor("{{ Ma")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("Math")
+    end
+
+    it "marks unclosed expressions with error decoration" do
+      expression_editor.type_in_editor("{{ $json.title")
+      find(".cm-content").send_keys(:right, :right, :right, :backspace, :backspace)
+
+      expect(expression_editor).to have_syntax_error
+    end
+
+    it "removes error decoration when expression is closed" do
+      expression_editor.type_in_editor("{{ $json.title")
+
+      expect(expression_editor).to have_no_syntax_error
+    end
+
+    it "applies syntax highlighting to expression braces" do
+      expression_editor.type_in_editor("{{ $json.title")
+
+      expect(expression_editor).to have_syntax_highlight("cm-wf-brace")
+    end
+  end
+
+  context "when typing in expression mode" do
+    before { open_expression_editor }
+
+    it "updates the field value as the user types" do
+      expression_editor.type_in_editor("hello world")
+
+      text = expression_editor.editor_text
+      expect(text).to include("hello world")
+    end
+  end
+
+  context "with workflow variables" do
+    fab!(:variable) { Fabricate(:discourse_workflows_variable, key: "API_KEY", value: "secret123") }
+
+    before { open_expression_editor }
+
+    it "shows $vars in completions" do
+      expression_editor.type_in_editor("{{ $v")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("$vars")
+    end
+  end
+
+  context "with hover tooltips" do
+    before { open_expression_editor }
+
+    it "shows a tooltip when hovering over a dollar variable" do
+      expression_editor.type_in_editor("{{ $json }}")
+
+      page.find(".cm-wf-variable", text: "$json", wait: 5).hover
+
+      expect(expression_editor).to have_hover_tooltip
+      expect(expression_editor.hover_tooltip_text).to include("previous node")
+    end
+  end
+
+  context "with expression preview" do
+    before { open_expression_editor }
+
+    it "shows a resolved preview below the editor" do
+      expression_editor.type_in_editor("{{ $current_user.username }}")
+
+      expect(page).to have_css(".expression-preview", wait: 10)
+      expect(page).to have_css(".expression-preview__resolved--valid", text: admin.username)
+    end
+
+    it "shows invalid JavaScript for bad expressions" do
+      expression_editor.type_in_editor("{{ $vars. }}")
+
+      expect(page).to have_css(".expression-preview", wait: 10)
+      expect(page).to have_css(".expression-preview__resolved--invalid", text: "invalid JavaScript")
+    end
+
+    it "shows plain text result for non-expression content" do
+      expression_editor.type_in_editor("Hello world")
+
+      expect(page).to have_css(".expression-preview", wait: 10)
+      expect(page).to have_css(".expression-preview__plaintext", text: "Hello world")
+    end
+
+    it "shows function warning when a method is referenced without calling it" do
+      expression_editor.type_in_editor("{{ $current_user.username.includes }}")
+
+      expect(page).to have_css(".expression-preview", wait: 10)
+      expect(page).to have_css(
+        ".expression-preview__resolved--warning",
+        text: "missing function call",
+      )
+    end
+
+    it "highlights invalid expressions in the editor with red background" do
+      expression_editor.type_in_editor("{{ $vars. }}")
+
+      expect(page).to have_css(".cm-wf-invalid-expression", wait: 10)
+    end
+  end
+
+  context "with property access completions" do
+    before { open_expression_editor }
+
+    it "shows field completions after $execution." do
+      expression_editor.type_in_editor("{{ $execution.")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("id")
+      expect(expression_editor).to have_autocomplete_option("workflow_id")
+    end
+
+    it "shows static method completions for global objects" do
+      expression_editor.type_in_editor("{{ Object.")
+
+      expect(expression_editor).to have_autocomplete_dropdown
+      expect(expression_editor).to have_autocomplete_option("keys")
+      expect(expression_editor).to have_autocomplete_option("values")
+    end
+  end
+end
diff --git a/plugins/discourse-workflows/spec/system/page_objects/pages/expression_editor.rb b/plugins/discourse-workflows/spec/system/page_objects/pages/expression_editor.rb
new file mode 100644
index 0000000000000..530741849d0ce
--- /dev/null
+++ b/plugins/discourse-workflows/spec/system/page_objects/pages/expression_editor.rb
@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Pages
+    class ExpressionEditor < PageObjects::Pages::Base
+      VARIABLE_INPUT_SELECTOR = ".workflows-variable-input"
+      CM_EDITOR_SELECTOR = ".cm-editor"
+      CM_CONTENT_SELECTOR = ".cm-content"
+      AUTOCOMPLETE_SELECTOR = ".cm-tooltip-autocomplete"
+      HOVER_TOOLTIP_SELECTOR = ".cm-wf-hover-tooltip"
+      MODE_CONTROL_SELECTOR = ".workflows-property-engine__mode-control"
+
+      def switch_to_expression_mode
+        label =
+          find(
+            "#{MODE_CONTROL_SELECTOR} input.d-segmented-control__input[value='dynamic']",
+            match: :first,
+          ).ancestor(".d-segmented-control__label")
+        label.click
+        self
+      end
+
+      def has_expression_editor?
+        page.has_css?(CM_EDITOR_SELECTOR)
+      end
+
+      def has_no_expression_editor?
+        page.has_no_css?(CM_EDITOR_SELECTOR)
+      end
+
+      def type_in_editor(text)
+        cm_content.click
+        cm_content.send_keys(text)
+        self
+      end
+
+      def editor_text
+        cm_content.text
+      end
+
+      def trigger_autocomplete
+        cm_content.send_keys([:control, " "])
+        self
+      end
+
+      def has_autocomplete_dropdown?
+        page.has_css?(AUTOCOMPLETE_SELECTOR, wait: 5)
+      end
+
+      def has_no_autocomplete_dropdown?
+        page.has_no_css?(AUTOCOMPLETE_SELECTOR)
+      end
+
+      def autocomplete_options
+        all("#{AUTOCOMPLETE_SELECTOR} li[role='option']").map(&:text)
+      end
+
+      def has_autocomplete_option?(label)
+        page.has_css?("#{AUTOCOMPLETE_SELECTOR} li[role='option']", text: label, wait: 5)
+      end
+
+      def has_no_autocomplete_option?(label)
+        page.has_no_css?("#{AUTOCOMPLETE_SELECTOR} li[role='option']", text: label)
+      end
+
+      def select_autocomplete_option(label)
+        find("#{AUTOCOMPLETE_SELECTOR} li[role='option']", text: label).click
+        self
+      end
+
+      def has_syntax_error?
+        page.has_css?(".cm-wf-error")
+      end
+
+      def has_no_syntax_error?
+        page.has_no_css?(".cm-wf-error")
+      end
+
+      def has_syntax_highlight?(css_class)
+        page.has_css?(".cm-editor .#{css_class}")
+      end
+
+      def has_no_syntax_highlight?(css_class)
+        page.has_no_css?(".cm-editor .#{css_class}")
+      end
+
+      def has_hover_tooltip?
+        page.has_css?(HOVER_TOOLTIP_SELECTOR, wait: 5)
+      end
+
+      def has_no_hover_tooltip?
+        page.has_no_css?(HOVER_TOOLTIP_SELECTOR)
+      end
+
+      def hover_tooltip_text
+        find(HOVER_TOOLTIP_SELECTOR).text
+      end
+
+      private
+
+      def cm_content
+        find(CM_CONTENT_SELECTOR)
+      end
+    end
+  end
+end
diff --git a/plugins/discourse-workflows/test/javascripts/integration/components/workflows/variable-input-test.gjs b/plugins/discourse-workflows/test/javascripts/integration/components/workflows/variable-input-test.gjs
index 34bfa8d6a8f5e..a8653acbde259 100644
--- a/plugins/discourse-workflows/test/javascripts/integration/components/workflows/variable-input-test.gjs
+++ b/plugins/discourse-workflows/test/javascripts/integration/components/workflows/variable-input-test.gjs
@@ -1,102 +1,82 @@
-import { render, settled, triggerEvent } from "@ember/test-helpers";
+import { render, waitFor } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import VariableInput from "discourse/plugins/discourse-workflows/admin/components/workflows/variable/input";
 
+function editorText(element) {
+  return element.querySelector(".cm-content")?.textContent ?? "";
+}
+
 module("Integration | Component | workflows/variable/input", function (hooks) {
   setupRenderingTest(hooks);
 
-  test("renders existing expression value as pills", async function (assert) {
-    const value = "Hello {{ $current_user.username }}!";
-
-    await render(<template><VariableInput @value={{value}} /></template>);
-
-    const pills = this.element.querySelectorAll(".workflows-variable-pill");
-    assert.strictEqual(pills.length, 1);
-    assert.strictEqual(pills[0].textContent.trim(), "$current_user.username");
+  hooks.beforeEach(function () {
+    pretender.get("/admin/plugins/discourse-workflows/variables.json", () =>
+      response(200, { variables: [] })
+    );
   });
 
-  test("renders multiple pills in a value", async function (assert) {
-    const value = "{{ $execution.id }} - {{ $json.title }}";
-
-    await render(<template><VariableInput @value={{value}} /></template>);
+  test("renders CodeMirror editor", async function (assert) {
+    await render(<template><VariableInput @value="" /></template>);
+    await waitFor(".cm-editor");
 
-    const pills = this.element.querySelectorAll(".workflows-variable-pill");
-    assert.strictEqual(pills.length, 2);
-    assert.strictEqual(pills[0].textContent.trim(), "$execution.id");
-    assert.strictEqual(pills[1].textContent.trim(), "$json.title");
+    assert.dom(".workflows-variable-input").exists();
+    assert.dom(".cm-editor").exists();
+    assert.dom(".cm-content").exists();
   });
 
-  test("drop with $ prefix keeps variable id as-is", async function (assert) {
-    let captured = null;
-    const onChange = (val) => (captured = val);
-
-    await render(
-      <template><VariableInput @value="" @onChange={{onChange}} /></template>
-    );
-
-    const editor = this.element.querySelector(".workflows-variable-input");
-
-    const dataTransfer = new DataTransfer();
-    dataTransfer.setData(
-      "application/x-workflow-variable",
-      JSON.stringify({
-        id: "$current_user.username",
-        key: "username",
-        type: "string",
-      })
-    );
+  test("displays expression value as text", async function (assert) {
+    const value = "Hello {{ $current_user.username }}!";
 
-    await triggerEvent(editor, "drop", { dataTransfer });
+    await render(<template><VariableInput @value={{value}} /></template>);
+    await waitFor(".cm-editor");
 
+    const text = editorText(this.element);
     assert.true(
-      captured.includes("{{ $current_user.username }}"),
-      `serialized value "${captured}" includes $current_user.username`
+      text.includes("$current_user.username"),
+      "editor displays the expression variable"
     );
   });
 
-  test("drop without $ prefix adds $json. prefix", async function (assert) {
-    let captured = null;
-    const onChange = (val) => (captured = val);
+  test("displays multiple expressions", async function (assert) {
+    const value = "{{ $execution.id }} - {{ $json.title }}";
 
-    await render(
-      <template><VariableInput @value="" @onChange={{onChange}} /></template>
-    );
+    await render(<template><VariableInput @value={{value}} /></template>);
+    await waitFor(".cm-editor");
 
-    const editor = this.element.querySelector(".workflows-variable-input");
+    const text = editorText(this.element);
+    assert.true(text.includes("$execution.id"), "contains first expression");
+    assert.true(text.includes("$json.title"), "contains second expression");
+  });
 
-    const dataTransfer = new DataTransfer();
-    dataTransfer.setData(
-      "application/x-workflow-variable",
-      JSON.stringify({
-        id: "topic_id",
-        key: "topic_id",
-        type: "integer",
-      })
-    );
+  test("preserves value through render cycle", async function (assert) {
+    const value = "prefix {{ $vars.API_URL }} suffix";
 
-    await triggerEvent(editor, "drop", { dataTransfer });
+    await render(<template><VariableInput @value={{value}} /></template>);
+    await waitFor(".cm-editor");
 
-    assert.true(
-      captured.includes("{{ $json.topic_id }}"),
-      `serialized value "${captured}" includes $json.topic_id`
-    );
+    const text = editorText(this.element);
+    assert.true(text.includes("$vars.API_URL"), "expression is preserved");
+    assert.true(text.includes("prefix"), "prefix text is preserved");
+    assert.true(text.includes("suffix"), "suffix text is preserved");
   });
 
-  test("serializes pills back to expression format", async function (assert) {
+  test("fires onChange when user types", async function (assert) {
     let captured = null;
+    let editorView = null;
     const onChange = (val) => (captured = val);
-    const value = "prefix {{ $vars.API_URL }} suffix";
+    const onSetup = (view) => (editorView = view);
 
     await render(
       <template>
-        <VariableInput @value={{value}} @onChange={{onChange}} />
+        <VariableInput @value="" @onChange={{onChange}} @onSetup={{onSetup}} />
       </template>
     );
+    await waitFor(".cm-editor");
 
-    const editor = this.element.querySelector(".workflows-variable-input");
-    await triggerEvent(editor, "input");
+    editorView.dispatch({ changes: { from: 0, insert: "hello" } });
 
-    assert.strictEqual(captured, "prefix {{ $vars.API_URL }} suffix");
+    assert.strictEqual(captured, "hello", "onChange was called with the value");
   });
 });
diff --git a/plugins/discourse-workflows/test/javascripts/unit/lib/expression-context-test.js b/plugins/discourse-workflows/test/javascripts/unit/lib/expression-context-test.js
new file mode 100644
index 0000000000000..7d7a00e8e4519
--- /dev/null
+++ b/plugins/discourse-workflows/test/javascripts/unit/lib/expression-context-test.js
@@ -0,0 +1,256 @@
+import { module, test } from "qunit";
+import {
+  buildScope,
+  resolveVariableId,
+  walkScope,
+} from "discourse/plugins/discourse-workflows/admin/lib/workflows/expression-context";
+
+module("Unit | lib | discourse-workflows | buildScope", function () {
+  test("builds $json from inputFields", function (assert) {
+    const scope = buildScope({
+      inputFields: [
+        { key: "title", type: "string" },
+        { key: "count", type: "integer" },
+      ],
+    });
+
+    assert.strictEqual(scope.$json.title, "");
+    assert.strictEqual(scope.$json.count, 0);
+  });
+
+  test("builds nested $json from children", function (assert) {
+    const scope = buildScope({
+      inputFields: [
+        {
+          key: "post",
+          type: "object",
+          children: [
+            { key: "id", type: "integer" },
+            { key: "raw", type: "string" },
+          ],
+        },
+      ],
+    });
+
+    assert.strictEqual(scope.$json.post.id, 0);
+    assert.strictEqual(scope.$json.post.raw, "");
+  });
+
+  test("trigger aliases $json", function (assert) {
+    const scope = buildScope({
+      inputFields: [{ key: "title", type: "string" }],
+    });
+
+    assert.strictEqual(scope.trigger, scope.$json);
+  });
+
+  test("ancestor node outputs accessible via $()", function (assert) {
+    const scope = buildScope({
+      ancestorNodes: [
+        {
+          node: { name: "Fetch data" },
+          fields: [{ key: "name", type: "string" }],
+        },
+      ],
+    });
+
+    const ref = scope.$("Fetch data");
+    assert.strictEqual(ref.item.json.name, "");
+  });
+
+  test("$() returns empty structure for unknown nodes", function (assert) {
+    const ref = buildScope({}).$("Missing");
+    assert.deepEqual(Object.keys(ref.item.json), []);
+  });
+
+  test("builds $vars from workflowVars", function (assert) {
+    const scope = buildScope({
+      workflowVars: [
+        { key: "API_KEY", value: "secret" },
+        { key: "URL", value: "https://example.com" },
+      ],
+    });
+
+    assert.strictEqual(scope.$vars.API_KEY, "secret");
+    assert.strictEqual(scope.$vars.URL, "https://example.com");
+  });
+
+  test("builds $execution with standard fields", function (assert) {
+    const scope = buildScope({});
+
+    assert.strictEqual(scope.$execution.id, 0);
+    assert.strictEqual(scope.$execution.workflow_id, 0);
+    assert.strictEqual(scope.$execution.workflow_name, "");
+  });
+
+  test("includes resume_webhook_url when a webhook wait node exists", function (assert) {
+    const scope = buildScope({
+      nodes: [{ type: "core:wait", configuration: { resume: "webhook" } }],
+    });
+
+    assert.strictEqual(scope.$execution.resume_webhook_url, "");
+  });
+
+  test("omits resume_webhook_url when no webhook wait", function (assert) {
+    assert.strictEqual(
+      buildScope({ nodes: [] }).$execution.resume_webhook_url,
+      undefined
+    );
+  });
+
+  test("exposes global constructors", function (assert) {
+    const scope = buildScope({});
+
+    assert.strictEqual(scope.Math, Math);
+    assert.strictEqual(scope.JSON, JSON);
+    assert.strictEqual(scope.parseInt, parseInt);
+  });
+
+  test("builds $current_user with id and username", function (assert) {
+    const scope = buildScope({});
+
+    assert.strictEqual(scope.$current_user.id, 0);
+    assert.strictEqual(scope.$current_user.username, "");
+  });
+
+  test("filters private/theme keys from siteSettings", function (assert) {
+    const scope = buildScope({
+      siteSettings: {
+        title: "My Forum",
+        _internal: "hidden",
+        theme_key: "skip",
+        max_users: 100,
+      },
+    });
+
+    assert.strictEqual(scope.$site_settings.title, "My Forum");
+    assert.strictEqual(scope.$site_settings.max_users, 100);
+    assert.strictEqual(scope.$site_settings._internal, undefined);
+    assert.strictEqual(scope.$site_settings.theme_key, undefined);
+  });
+
+  test("maps boolean and array field types", function (assert) {
+    const scope = buildScope({
+      inputFields: [
+        { key: "active", type: "boolean" },
+        { key: "items", type: "array" },
+      ],
+    });
+
+    assert.false(scope.$json.active);
+    assert.deepEqual(scope.$json.items, []);
+  });
+
+  test("maps unknown field types to string exemplar", function (assert) {
+    const scope = buildScope({
+      inputFields: [{ key: "custom", type: "unknown_type" }],
+    });
+
+    assert.strictEqual(scope.$json.custom, "");
+  });
+});
+
+module("Unit | lib | discourse-workflows | walkScope", function () {
+  test("resolves top-level scope key", function (assert) {
+    assert.deepEqual(walkScope({ $json: { title: "hello" } }, "$json"), {
+      title: "hello",
+    });
+  });
+
+  test("resolves nested dot path", function (assert) {
+    assert.strictEqual(
+      walkScope({ $json: { post: { id: 42 } } }, "$json.post.id"),
+      42
+    );
+  });
+
+  test("returns undefined for missing path", function (assert) {
+    assert.strictEqual(
+      walkScope({ $json: {} }, "$json.missing.deep"),
+      undefined
+    );
+  });
+
+  test("returns undefined for null path", function (assert) {
+    assert.strictEqual(walkScope({}, null), undefined);
+  });
+
+  test("returns undefined for empty path", function (assert) {
+    assert.strictEqual(walkScope({}, ""), undefined);
+  });
+
+  test("resolves node reference via $() path", function (assert) {
+    const scope = {
+      $: (name) => ({ item: { json: { name: `node-${name}` } } }),
+    };
+
+    assert.strictEqual(
+      walkScope(scope, "$('MyNode').item.json.name"),
+      "node-MyNode"
+    );
+  });
+
+  test("resolves node reference with double quotes", function (assert) {
+    const scope = {
+      $: (name) => ({ item: { json: { name: `node-${name}` } } }),
+    };
+
+    assert.strictEqual(
+      walkScope(scope, '$("MyNode").item.json.name'),
+      "node-MyNode"
+    );
+  });
+
+  test("returns undefined when $() throws for unknown node", function (assert) {
+    const scope = {
+      $: () => {
+        throw new Error("not found");
+      },
+    };
+
+    assert.strictEqual(walkScope(scope, "$('Missing').item"), undefined);
+  });
+
+  test("resolves array values", function (assert) {
+    assert.deepEqual(walkScope({ $json: { tags: ["a", "b"] } }, "$json.tags"), [
+      "a",
+      "b",
+    ]);
+  });
+
+  test("resolves boolean values", function (assert) {
+    assert.true(walkScope({ $json: { active: true } }, "$json.active"));
+  });
+
+  test("stops at null intermediate", function (assert) {
+    assert.strictEqual(
+      walkScope({ $json: { post: null } }, "$json.post.id"),
+      undefined
+    );
+  });
+
+  test("handles node ref with no further path", function (assert) {
+    const nodeData = { item: { json: { id: 1 } } };
+    assert.deepEqual(walkScope({ $: () => nodeData }, "$('Node')"), nodeData);
+  });
+});
+
+module("Unit | lib | discourse-workflows | resolveVariableId", function () {
+  test("keeps dollar-prefixed IDs as-is", function (assert) {
+    assert.strictEqual(
+      resolveVariableId({ id: "$current_user.username" }),
+      "$current_user.username"
+    );
+  });
+
+  test("prepends $json to non-dollar IDs", function (assert) {
+    assert.strictEqual(resolveVariableId({ id: "topic_id" }), "$json.topic_id");
+  });
+
+  test("uses custom itemPrefix", function (assert) {
+    assert.strictEqual(
+      resolveVariableId({ id: "topic_id" }, "$item"),
+      "$item.topic_id"
+    );
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c805c6517e782..01ea0b191c9a3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,7 +36,7 @@ importers:
         version: 7.29.0(@babel/core@7.29.0)
       '@discourse/lint-configs':
         specifier: ^2.44.0
-        version: 2.44.0(ember-template-lint@7.9.3)(eslint@9.39.2(jiti@2.6.1))(postcss@8.5.8)(prettier@3.8.1)(stylelint@17.4.0(typescript@5.9.3))
+        version: 2.44.0(jiti@2.6.1)(postcss@8.5.8)(prettier@3.8.1)
       '@discourse/moment-timezone-names-translations':
         specifier: ^1.0.0
         version: 1.0.0
@@ -114,7 +114,7 @@ importers:
     devDependencies:
       '@discourse/lint-configs':
         specifier: ^2.43.0
-        version: 2.44.0(ember-template-lint@7.9.3)(eslint@9.39.2(jiti@2.6.1))(postcss@8.5.8)(prettier@3.8.1)(stylelint@17.4.0(typescript@5.9.3))
+        version: 2.44.0(jiti@2.6.1)(postcss@8.5.8)(prettier@3.8.1)
       prettier:
         specifier: 3.8.1
         version: 3.8.1
@@ -238,6 +238,24 @@ importers:
 
   frontend/discourse:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.1
+        version: 6.20.1
+      '@codemirror/commands':
+        specifier: ^6.10.3
+        version: 6.10.3
+      '@codemirror/lang-javascript':
+        specifier: ^6.2.5
+        version: 6.2.5
+      '@codemirror/language':
+        specifier: ^6.12.3
+        version: 6.12.3
+      '@codemirror/state':
+        specifier: ^6.6.0
+        version: 6.6.0
+      '@codemirror/view':
+        specifier: ^6.40.0
+        version: 6.41.0
       '@faker-js/faker':
         specifier: ^10.4.0
         version: 10.4.0
@@ -280,6 +298,18 @@ importers:
       '@jsquash/resize':
         specifier: ^2.1.0
         version: 2.1.1
+      '@lezer/common':
+        specifier: ^1.5.1
+        version: 1.5.2
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@lezer/javascript':
+        specifier: ^1.5.4
+        version: 1.5.4
+      '@lezer/lr':
+        specifier: ^1.4.8
+        version: 1.4.8
       ace-builds:
         specifier: ^1.43.6
         version: 1.43.6
@@ -292,6 +322,9 @@ importers:
       chartjs-plugin-datalabels:
         specifier: 2.2.0
         version: 2.2.0(chart.js@4.5.1)
+      codemirror:
+        specifier: ^6.0.2
+        version: 6.0.2
       decorator-transforms:
         specifier: ^2.3.1
         version: 2.3.1(@babel/core@7.29.0)
@@ -1690,6 +1723,30 @@ packages:
     engines: {node: '>=0.1.95'}
     hasBin: true
 
+  '@codemirror/autocomplete@6.20.1':
+    resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==}
+
+  '@codemirror/commands@6.10.3':
+    resolution: {integrity: sha512-JFRiqhKu+bvSkDLI+rUhJwSxQxYb759W5GBezE8Uc8mHLqC9aV/9aTC7yJSqCtB3F00pylrLCwnyS91Ap5ej4Q==}
+
+  '@codemirror/lang-javascript@6.2.5':
+    resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
+
+  '@codemirror/language@6.12.3':
+    resolution: {integrity: sha512-QwCZW6Tt1siP37Jet9Tb02Zs81TQt6qQrZR2H+eGMcFsL1zMrk2/b9CLC7/9ieP1fjIUMgviLWMmgiHoJrj+ZA==}
+
+  '@codemirror/lint@6.9.5':
+    resolution: {integrity: sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==}
+
+  '@codemirror/search@6.6.0':
+    resolution: {integrity: sha512-koFuNXcDvyyotWcgOnZGmY7LZqEOXZaaxD/j6n18TCLx2/9HieZJ5H6hs1g8FiRxBD0DNfs0nXn17g872RmYdw==}
+
+  '@codemirror/state@6.6.0':
+    resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
+
+  '@codemirror/view@6.41.0':
+    resolution: {integrity: sha512-6H/qadXsVuDY219Yljhohglve8xf4B8xJkVOEWfA5uiYKiTFppjqsvsfR5iPA0RbvRBoOyTZpbLIxe9+0UR8xA==}
+
   '@colors/colors@1.5.0':
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
@@ -1797,10 +1854,7 @@ packages:
   '@discourse/lint-configs@2.44.0':
     resolution: {integrity: sha512-BkMj2AjiXgcut39cFwVj0LwO2PCL2vinE1KA0C7RBniWvnUlus39qeRvTcuLlN5l7HUkL+7NrZR59lVFscHT9w==}
     peerDependencies:
-      ember-template-lint: 7.9.3
-      eslint: 9.39.2
       prettier: 3.8.1
-      stylelint: 17.4.0
 
   '@discourse/moment-timezone-names-translations@1.0.0':
     resolution: {integrity: sha512-4xr1QWQ0nzmFa2ZXQgWZA+dtE/BU2ePA+qkJWPFzNpq4ZnQi8MmMMAS2285t3rc2ySMBQqYaAArmcSUiufUgRA==}
@@ -2542,10 +2596,25 @@ packages:
   '@kurkle/color@0.3.4':
     resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
 
+  '@lezer/common@1.5.2':
+    resolution: {integrity: sha512-sxQE460fPZyU3sdc8lafxiPwJHBzZRy/udNFynGQky1SePYBdhkBl1kOagA9uT3pxR8K09bOrmTUqA9wb/PjSQ==}
+
+  '@lezer/highlight@1.2.3':
+    resolution: {integrity: sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==}
+
+  '@lezer/javascript@1.5.4':
+    resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
+
+  '@lezer/lr@1.4.8':
+    resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
+
   '@lint-todo/utils@13.1.1':
     resolution: {integrity: sha512-F5z53uvRIF4dYfFfJP3a2Cqg+4P1dgJchJsFnsZE0eZp0LK8X7g2J0CsJHRgns+skpXOlM7n5vFGwkWCWj8qJg==}
     engines: {node: 12.* || >= 14}
 
+  '@marijn/find-cluster-break@1.0.2':
+    resolution: {integrity: sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==}
+
   '@messageformat/runtime@3.0.2':
     resolution: {integrity: sha512-dkIPDCjXcfhSHgNE1/qV6TeczQZR59Yx0xXeafVKgK3QVWoxc38ljwpksUpnzCGvN151KUbCJTDZVmahtf1YZw==}
 
@@ -4107,6 +4176,9 @@ packages:
     resolution: {integrity: sha512-FMabTRlc5t5zjdenF6mS0MBeFZm0XqHqeOkcskKFb/LYCcRQ5fVgLOHVc4Lq9CqABd9zhjwPjMBCJvMCziSVtA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  codemirror@6.0.2:
+    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
+
   codsen-utils@1.7.3:
     resolution: {integrity: sha512-YIFQQ1n2NSgwoB3sCe7RpkZzsrPxTMek6jc7wC9fXOm1wwfWAKja9gLOMEjlXOUd3LKV3o6Jci7n9BoHs5Z8Sg==}
     engines: {node: '>=14.18.0'}
@@ -4622,6 +4694,9 @@ packages:
       typescript:
         optional: true
 
+  crelt@1.0.6:
+    resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
+
   cross-spawn@6.0.6:
     resolution: {integrity: sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==}
     engines: {node: '>=4.8'}
@@ -8847,6 +8922,9 @@ packages:
     peerDependencies:
       webpack: ^4.0.0 || ^5.0.0
 
+  style-mod@4.1.3:
+    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}
+
   styled_string@0.0.1:
     resolution: {integrity: sha512-DU2KZiB6VbPkO2tGSqQ9n96ZstUPjW7X4sGO6V2m1myIQluX0p1Ol8BrA/l6/EesqhMqXOIXs3cJNOy1UuU2BA==}
 
@@ -10580,6 +10658,62 @@ snapshots:
       exec-sh: 0.3.6
       minimist: 1.2.8
 
+  '@codemirror/autocomplete@6.20.1':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      '@lezer/common': 1.5.2
+
+  '@codemirror/commands@6.10.3':
+    dependencies:
+      '@codemirror/language': 6.12.3
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      '@lezer/common': 1.5.2
+
+  '@codemirror/lang-javascript@6.2.5':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      '@lezer/common': 1.5.2
+      '@lezer/javascript': 1.5.4
+
+  '@codemirror/language@6.12.3':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+      style-mod: 4.1.3
+
+  '@codemirror/lint@6.9.5':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      crelt: 1.0.6
+
+  '@codemirror/search@6.6.0':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+      crelt: 1.0.6
+
+  '@codemirror/state@6.6.0':
+    dependencies:
+      '@marijn/find-cluster-break': 1.0.2
+
+  '@codemirror/view@6.41.0':
+    dependencies:
+      '@codemirror/state': 6.6.0
+      crelt: 1.0.6
+      style-mod: 4.1.3
+      w3c-keyname: 2.2.8
+
   '@colors/colors@1.5.0':
     optional: true
 
@@ -10658,7 +10792,7 @@ snapshots:
 
   '@discourse/itsatrap@2.0.10': {}
 
-  '@discourse/lint-configs@2.44.0(ember-template-lint@7.9.3)(eslint@9.39.2(jiti@2.6.1))(postcss@8.5.8)(prettier@3.8.1)(stylelint@17.4.0(typescript@5.9.3))':
+  '@discourse/lint-configs@2.44.0(jiti@2.6.1)(postcss@8.5.8)(prettier@3.8.1)':
     dependencies:
       '@babel/core': 7.29.0(supports-color@8.1.1)
       '@babel/eslint-parser': 7.28.6(@babel/core@7.29.0)(eslint@9.39.2(jiti@2.6.1))
@@ -10685,6 +10819,7 @@ snapshots:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
+      - jiti
       - postcss
       - supports-color
 
@@ -11633,6 +11768,22 @@ snapshots:
 
   '@kurkle/color@0.3.4': {}
 
+  '@lezer/common@1.5.2': {}
+
+  '@lezer/highlight@1.2.3':
+    dependencies:
+      '@lezer/common': 1.5.2
+
+  '@lezer/javascript@1.5.4':
+    dependencies:
+      '@lezer/common': 1.5.2
+      '@lezer/highlight': 1.2.3
+      '@lezer/lr': 1.4.8
+
+  '@lezer/lr@1.4.8':
+    dependencies:
+      '@lezer/common': 1.5.2
+
   '@lint-todo/utils@13.1.1':
     dependencies:
       '@types/eslint': 8.56.12
@@ -11643,6 +11794,8 @@ snapshots:
       tslib: 2.8.1
       upath: 2.0.1
 
+  '@marijn/find-cluster-break@1.0.2': {}
+
   '@messageformat/runtime@3.0.2':
     dependencies:
       make-plural: 7.5.0
@@ -13630,6 +13783,16 @@ snapshots:
 
   cmd-shim@6.0.3: {}
 
+  codemirror@6.0.2:
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/commands': 6.10.3
+      '@codemirror/language': 6.12.3
+      '@codemirror/lint': 6.9.5
+      '@codemirror/search': 6.6.0
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.41.0
+
   codsen-utils@1.7.3:
     dependencies:
       rfdc: 1.4.1
@@ -13840,6 +14003,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.9.3
 
+  crelt@1.0.6: {}
+
   cross-spawn@6.0.6:
     dependencies:
       nice-try: 1.0.5
@@ -19069,6 +19234,8 @@ snapshots:
       schema-utils: 3.3.0
       webpack: 5.99.9(@swc/core@1.15.21)(esbuild@0.27.4)
 
+  style-mod@4.1.3: {}
+
   styled_string@0.0.1: {}
 
   stylelint-config-recommended-scss@17.0.0(postcss@8.5.8)(stylelint@17.4.0(typescript@5.9.3)):