From 58fe609eeaf8049b70249af25ce2126b95850ab4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:14:37 +0000
Subject: [PATCH 1/4] Initial plan


From 2ae13e23dd7f537ad87ab407682d88d6d19c59aa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:25:15 +0000
Subject: [PATCH 2/4] Remove CodeMirror dependency from live editor playground
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace 7 CodeMirror CDN imports with vanilla JS:
- Input editor: CodeMirror EditorView → <textarea> with Tab/Mod-Enter keydown handlers
- Output display: read-only EditorView → <pre><code> with textContent updates
- Hover tooltips: CodeMirror hoverTooltip → mousemove-based positioning using monospace font math
- Theme switching: Compartment-based oneDark toggle deleted; Primer CSS handles dark/light via data-color-mode="auto"
- CSS: .cm-* rules replaced with textarea/pre/#outputPre and .tooltip-docs rules

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/37a82432-a892-459f-bc5d-44e443649570

Co-authored-by: Mossaka <5447827+Mossaka@users.noreply.github.com>
---
 docs/public/editor/editor.js         | 130 ++++++-----------
 docs/public/editor/hover-tooltips.js | 208 +++++++++++++++++----------
 docs/public/editor/index.html        |  68 +++++----
 3 files changed, 213 insertions(+), 193 deletions(-)

diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js
index ebed2712909..3f48ce782bd 100644
--- a/docs/public/editor/editor.js
+++ b/docs/public/editor/editor.js
@@ -2,15 +2,8 @@
 // gh-aw Playground - Application Logic
 // ================================================================
 
-import { EditorView, basicSetup } from 'https://esm.sh/codemirror@6.0.2';
-import { EditorState, Compartment } from 'https://esm.sh/@codemirror/state@6.5.4';
-import { keymap } from 'https://esm.sh/@codemirror/view@6.39.14';
-import { yaml } from 'https://esm.sh/@codemirror/lang-yaml@6.1.2';
-import { markdown } from 'https://esm.sh/@codemirror/lang-markdown@6.5.0';
-import { indentUnit } from 'https://esm.sh/@codemirror/language@6.12.1';
-import { oneDark } from 'https://esm.sh/@codemirror/theme-one-dark@6.1.3';
 import { createWorkerCompiler } from '/gh-aw/wasm/compiler-loader.js';
-import { frontmatterHoverTooltip } from './hover-tooltips.js';
+import { attachHoverTooltips } from './hover-tooltips.js';
 
 // ---------------------------------------------------------------
 // Sample workflow registry
@@ -59,9 +52,10 @@ function setHashQuietly(value) {
 const $ = (id) => document.getElementById(id);
 
 const sampleSelect = $('sampleSelect');
-const editorMount = $('editorMount');
+const editorTextarea = $('editorTextarea');
 const outputPlaceholder = $('outputPlaceholder');
-const outputMount = $('outputMount');
+const outputCode = $('outputCode');
+const outputPre = $('outputPre');
 const statusBadge = $('statusBadge');
 const statusText = $('statusText');
 const statusDot = $('statusDot');
@@ -88,94 +82,56 @@ let pendingCompile = false;
 let isDragging = false;
 
 // ---------------------------------------------------------------
-// Theme — follows browser's prefers-color-scheme automatically.
-// Primer CSS handles the page via data-color-mode="auto".
-// We only need to toggle the CodeMirror theme (oneDark vs default).
-// ---------------------------------------------------------------
-const editorThemeConfig = new Compartment();
-const outputThemeConfig = new Compartment();
-const darkMq = window.matchMedia('(prefers-color-scheme: dark)');
-
-function isDark() {
-  return darkMq.matches;
-}
-
-function cmThemeFor(dark) {
-  return dark ? oneDark : [];
-}
-
-function applyCmTheme() {
-  const theme = cmThemeFor(isDark());
-  editorView.dispatch({ effects: editorThemeConfig.reconfigure(theme) });
-  outputView.dispatch({ effects: outputThemeConfig.reconfigure(theme) });
-}
-
-// ---------------------------------------------------------------
-// CodeMirror: Input Editor (Markdown with YAML frontmatter)
+// Input Editor (<textarea>)
 // ---------------------------------------------------------------
 const savedContent = localStorage.getItem(STORAGE_KEY);
 const initialContent = savedContent || DEFAULT_CONTENT;
+editorTextarea.value = initialContent;
+
+// Tab inserts 2 spaces; Mod-Enter triggers compile
+editorTextarea.addEventListener('keydown', (e) => {
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    const start = editorTextarea.selectionStart;
+    const end = editorTextarea.selectionEnd;
+    const val = editorTextarea.value;
+    editorTextarea.value = val.substring(0, start) + '  ' + val.substring(end);
+    editorTextarea.selectionStart = editorTextarea.selectionEnd = start + 2;
+    editorTextarea.dispatchEvent(new Event('input'));
+  }
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+    e.preventDefault();
+    doCompile();
+  }
+});
 
-const editorView = new EditorView({
-  doc: initialContent,
-  extensions: [
-    basicSetup,
-    markdown(),
-    EditorState.tabSize.of(2),
-    indentUnit.of('  '),
-    editorThemeConfig.of(cmThemeFor(isDark())),
-    keymap.of([{
-      key: 'Mod-Enter',
-      run: () => { doCompile(); return true; }
-    }]),
-    frontmatterHoverTooltip,
-    EditorView.updateListener.of(update => {
-      if (update.docChanged) {
-        try { localStorage.setItem(STORAGE_KEY, update.state.doc.toString()); }
-        catch (_) { /* localStorage full or unavailable */ }
-        if (isReady) {
-          scheduleCompile();
-        } else {
-          pendingCompile = true;
-        }
-      }
-    }),
-  ],
-  parent: editorMount,
+// Save to localStorage and schedule auto-compile on input
+editorTextarea.addEventListener('input', () => {
+  try { localStorage.setItem(STORAGE_KEY, editorTextarea.value); }
+  catch (_) { /* localStorage full or unavailable */ }
+  if (isReady) {
+    scheduleCompile();
+  } else {
+    pendingCompile = true;
+  }
 });
 
+// Attach hover tooltips to the textarea
+attachHoverTooltips(editorTextarea, $('panelEditor'));
+
 // If restoring saved content, clear the dropdown since it may not match any sample
 if (savedContent) {
   sampleSelect.value = '';
 }
 
-// ---------------------------------------------------------------
-// CodeMirror: Output View (YAML, read-only)
-// ---------------------------------------------------------------
-const outputView = new EditorView({
-  doc: '',
-  extensions: [
-    basicSetup,
-    yaml(),
-    EditorState.readOnly.of(true),
-    EditorView.editable.of(false),
-    outputThemeConfig.of(cmThemeFor(isDark())),
-  ],
-  parent: outputMount,
-});
-
-// Listen for OS theme changes and update CodeMirror accordingly
-darkMq.addEventListener('change', () => applyCmTheme());
-
 // ---------------------------------------------------------------
 // Sample selector + deep-link loading
 // ---------------------------------------------------------------
 
 /** Replace editor content and trigger compile */
 function setEditorContent(text) {
-  editorView.dispatch({
-    changes: { from: 0, to: editorView.state.doc.length, insert: text }
-  });
+  editorTextarea.value = text;
+  editorTextarea.dispatchEvent(new Event('input'));
 }
 
 /** Load a built-in sample by key */
@@ -250,9 +206,9 @@ async function doCompile() {
     compileTimer = null;
   }
 
-  const md = editorView.state.doc.toString();
+  const md = editorTextarea.value;
   if (!md.trim()) {
-    outputMount.style.display = 'none';
+    outputPre.style.display = 'none';
     outputPlaceholder.classList.remove('d-none');
     outputPlaceholder.classList.add('d-flex');
     outputPlaceholder.textContent = 'Compiled YAML will appear here';
@@ -278,11 +234,9 @@ async function doCompile() {
       setStatus('ready', 'Ready');
       currentYaml = result.yaml;
 
-      // Update output CodeMirror view
-      outputView.dispatch({
-        changes: { from: 0, to: outputView.state.doc.length, insert: result.yaml }
-      });
-      outputMount.style.display = 'block';
+      // Update output display
+      outputCode.textContent = result.yaml;
+      outputPre.style.display = 'block';
       outputPlaceholder.classList.add('d-none');
       outputPlaceholder.classList.remove('d-flex');
 
diff --git a/docs/public/editor/hover-tooltips.js b/docs/public/editor/hover-tooltips.js
index b32b6069bbc..899bfbbfe69 100644
--- a/docs/public/editor/hover-tooltips.js
+++ b/docs/public/editor/hover-tooltips.js
@@ -6,10 +6,11 @@
 // keys in the editor. Tooltip content (description, type, enum
 // values) comes from autocomplete-data.json, which is generated
 // from the main workflow JSON Schema.
+//
+// This module is dependency-free — tooltips are positioned using
+// monospace font math on a <textarea>.
 // ================================================================
 
-import { hoverTooltip } from 'https://esm.sh/@codemirror/view@6.39.14';
-
 // ---------------------------------------------------------------
 // Schema data loader
 // ---------------------------------------------------------------
@@ -26,33 +27,19 @@ fetch('./autocomplete-data.json')
 
 /**
  * Find the frontmatter region (between opening and closing ---).
- * Returns { start, end } as character offsets, or null if no
- * valid frontmatter is found.
+ * Returns { startLine, endLine } as 0-based line indices, or null
+ * if no valid frontmatter is found.
  */
-function findFrontmatterRegion(doc) {
-  // Frontmatter must start at the very beginning of the document.
-  // We check the first line rather than converting the entire
-  // document to a string for performance reasons.
-  if (doc.lines === 0) return null;
-
-  const firstLine = doc.line(1);
-  if (!firstLine.text.startsWith('---')) return null;
-
-  // Scan forward line-by-line to find the closing --- on its own line.
-  // A closing line looks like: "---" followed by optional spaces/tabs.
-  for (let lineNumber = 2; lineNumber <= doc.lines; lineNumber++) {
-    const line = doc.line(lineNumber);
-    if (/^---[ \t]*$/.test(line.text)) {
-      // The frontmatter region spans from character 0 to the end of
-      // the closing --- line.
-      return {
-        start: 0,
-        end: line.to,
-      };
+function findFrontmatterRegion(lines) {
+  if (lines.length === 0) return null;
+  if (!lines[0].startsWith('---')) return null;
+
+  for (let i = 1; i < lines.length; i++) {
+    if (/^---[ \t]*$/.test(lines[i])) {
+      return { startLine: 0, endLine: i };
     }
   }
 
-  // No valid closing delimiter found.
   return null;
 }
 
@@ -91,8 +78,8 @@ function getIndent(lineText) {
 }
 
 /**
- * Given a line number in the document, resolve the full key path
- * by walking upward through parent keys based on indentation.
+ * Given a 0-based line index, resolve the full key path by walking
+ * upward through parent keys based on indentation.
  *
  * For example, if the cursor is on "toolsets" inside:
  *   tools:
@@ -101,17 +88,15 @@ function getIndent(lineText) {
  *
  * This returns ["tools", "github", "toolsets"].
  */
-function resolveKeyPath(doc, lineNumber, key, lineText) {
+function resolveKeyPath(lines, lineIndex, key, lineText) {
   const path = [key];
   const currentIndent = getIndent(lineText);
 
   if (currentIndent === 0) return path;
 
-  // Walk upward to find parent keys
   let targetIndent = currentIndent;
-  for (let i = lineNumber - 1; i >= 0; i--) {
-    const prevLine = doc.line(i + 1).text; // doc.line is 1-based
-    // Skip blank lines and comments
+  for (let i = lineIndex - 1; i >= 0; i--) {
+    const prevLine = lines[i];
     if (prevLine.trim() === '' || prevLine.trim().startsWith('#')) continue;
 
     const prevIndent = getIndent(prevLine);
@@ -147,11 +132,9 @@ function lookupSchema(keyPath) {
     if (!entry) return null;
 
     if (i === keyPath.length - 1) {
-      // This is the target key
       return entry;
     }
 
-    // Navigate into children for the next segment
     if (entry.children) {
       current = entry.children;
     } else {
@@ -171,11 +154,11 @@ function lookupSchema(keyPath) {
  */
 function buildTooltipDOM(keyName, schemaEntry) {
   const dom = document.createElement('div');
-  dom.className = 'cm-tooltip-docs';
+  dom.className = 'tooltip-docs';
 
   // Header: key name + type badge
   const header = document.createElement('div');
-  header.className = 'cm-tooltip-docs-header';
+  header.className = 'tooltip-docs-header';
 
   const nameEl = document.createElement('strong');
   nameEl.textContent = keyName;
@@ -183,7 +166,7 @@ function buildTooltipDOM(keyName, schemaEntry) {
 
   if (schemaEntry.type) {
     const typeEl = document.createElement('span');
-    typeEl.className = 'cm-tooltip-docs-type';
+    typeEl.className = 'tooltip-docs-type';
     typeEl.textContent = schemaEntry.type;
     header.appendChild(typeEl);
   }
@@ -193,7 +176,7 @@ function buildTooltipDOM(keyName, schemaEntry) {
   // Description
   if (schemaEntry.desc) {
     const descEl = document.createElement('div');
-    descEl.className = 'cm-tooltip-docs-desc';
+    descEl.className = 'tooltip-docs-desc';
     descEl.textContent = schemaEntry.desc;
     dom.appendChild(descEl);
   }
@@ -201,10 +184,10 @@ function buildTooltipDOM(keyName, schemaEntry) {
   // Enum values
   if (schemaEntry.enum && schemaEntry.enum.length > 0) {
     const enumEl = document.createElement('div');
-    enumEl.className = 'cm-tooltip-docs-enum';
+    enumEl.className = 'tooltip-docs-enum';
 
     const label = document.createElement('span');
-    label.className = 'cm-tooltip-docs-enum-label';
+    label.className = 'tooltip-docs-enum-label';
     label.textContent = 'Values: ';
     enumEl.appendChild(label);
 
@@ -220,10 +203,10 @@ function buildTooltipDOM(keyName, schemaEntry) {
     const childKeys = Object.keys(schemaEntry.children);
     if (childKeys.length > 0) {
       const childEl = document.createElement('div');
-      childEl.className = 'cm-tooltip-docs-children';
+      childEl.className = 'tooltip-docs-children';
 
       const label = document.createElement('span');
-      label.className = 'cm-tooltip-docs-enum-label';
+      label.className = 'tooltip-docs-enum-label';
       label.textContent = 'Keys: ';
       childEl.appendChild(label);
 
@@ -240,50 +223,119 @@ function buildTooltipDOM(keyName, schemaEntry) {
 }
 
 // ---------------------------------------------------------------
-// CodeMirror hoverTooltip extension
+// Character measurement
+// ---------------------------------------------------------------
+
+let _charWidth = null;
+
+/**
+ * Measure the width of a single monospace character by using a
+ * hidden <span> styled to match the textarea font.
+ */
+function measureCharWidth(textarea) {
+  if (_charWidth !== null) return _charWidth;
+
+  const span = document.createElement('span');
+  span.style.cssText =
+    'position:absolute;visibility:hidden;white-space:pre;' +
+    window.getComputedStyle(textarea).font;
+  span.textContent = 'M';
+  document.body.appendChild(span);
+  _charWidth = span.getBoundingClientRect().width;
+  document.body.removeChild(span);
+  return _charWidth;
+}
+
+// ---------------------------------------------------------------
+// Textarea hover-tooltip wiring
 // ---------------------------------------------------------------
 
-export const frontmatterHoverTooltip = hoverTooltip((view, pos, side) => {
-  if (!schemaData) return null;
+/**
+ * Attach hover-tooltip behaviour to a <textarea>. Shows schema
+ * documentation when the mouse hovers over a YAML frontmatter key.
+ *
+ * @param {HTMLTextAreaElement} textarea - The input textarea
+ * @param {HTMLElement} container - Parent element for the tooltip div
+ */
+export function attachHoverTooltips(textarea, container) {
+  const tooltip = document.createElement('div');
+  tooltip.className = 'hover-tooltip';
+  tooltip.style.display = 'none';
+  container.appendChild(tooltip);
+
+  // Cache line splits; invalidated on content change
+  let cachedLines = null;
+  textarea.addEventListener('input', () => { cachedLines = null; });
+
+  function getLines() {
+    if (!cachedLines) cachedLines = textarea.value.split('\n');
+    return cachedLines;
+  }
+
+  let hideTimer = null;
+
+  function showTooltip(dom, x, y) {
+    if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
+    tooltip.innerHTML = '';
+    tooltip.appendChild(dom);
+    tooltip.style.display = 'block';
+
+    // Position near cursor, clamped to viewport
+    const pad = 8;
+    let left = x + pad;
+    let top = y - tooltip.offsetHeight - pad;
+    if (top < 0) top = y + pad;
+    const maxLeft = window.innerWidth - tooltip.offsetWidth - pad;
+    if (left > maxLeft) left = maxLeft;
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+  }
+
+  function hideTooltip() {
+    hideTimer = setTimeout(() => {
+      tooltip.style.display = 'none';
+      tooltip.innerHTML = '';
+    }, 120);
+  }
 
-  const doc = view.state.doc;
-  const region = findFrontmatterRegion(doc);
-  if (!region) return null;
+  textarea.addEventListener('mousemove', (e) => {
+    if (!schemaData) { hideTooltip(); return; }
 
-  // Only show tooltips inside the frontmatter region
-  if (pos < region.start || pos >= region.end) return null;
+    const lines = getLines();
+    const region = findFrontmatterRegion(lines);
+    if (!region) { hideTooltip(); return; }
 
-  // Get the line at the hover position
-  const line = doc.lineAt(pos);
-  const lineText = line.text;
-  const posInLine = pos - line.from;
+    // Compute line height from the textarea's computed style
+    const cs = window.getComputedStyle(textarea);
+    const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.6;
+    const charWidth = measureCharWidth(textarea);
+    const paddingTop = parseFloat(cs.paddingTop) || 0;
+    const paddingLeft = parseFloat(cs.paddingLeft) || 0;
 
-  // Skip the opening/closing --- delimiters
-  if (lineText.trim() === '---') return null;
+    const rect = textarea.getBoundingClientRect();
+    const offsetY = e.clientY - rect.top - paddingTop + textarea.scrollTop;
+    const offsetX = e.clientX - rect.left - paddingLeft + textarea.scrollLeft;
 
-  // Extract the key at the hover position
-  const keyInfo = extractKeyFromLine(lineText, posInLine);
-  if (!keyInfo) return null;
+    const lineIndex = Math.floor(offsetY / lineHeight);
+    const charIndex = Math.floor(offsetX / charWidth);
 
-  // Resolve the full key path (handles nested keys)
-  const lineNumber = line.number - 1; // 0-based for our helper
-  const keyPath = resolveKeyPath(doc, lineNumber, keyInfo.key, lineText);
+    if (lineIndex < 0 || lineIndex >= lines.length) { hideTooltip(); return; }
 
-  // Look up the schema entry
-  const schemaEntry = lookupSchema(keyPath);
-  if (!schemaEntry) return null;
+    // Only show inside frontmatter
+    if (lineIndex <= region.startLine || lineIndex >= region.endLine) { hideTooltip(); return; }
 
-  // Calculate absolute positions for the key span
-  const wordStart = line.from + keyInfo.keyStart;
-  const wordEnd = line.from + keyInfo.keyEnd;
+    const lineText = lines[lineIndex];
+    if (lineText.trim() === '---') { hideTooltip(); return; }
 
-  return {
-    pos: wordStart,
-    end: wordEnd,
-    above: true,
-    create() {
-      const dom = buildTooltipDOM(keyInfo.key, schemaEntry);
-      return { dom };
-    }
-  };
-});
+    const keyInfo = extractKeyFromLine(lineText, charIndex);
+    if (!keyInfo) { hideTooltip(); return; }
+
+    const keyPath = resolveKeyPath(lines, lineIndex, keyInfo.key, lineText);
+    const schemaEntry = lookupSchema(keyPath);
+    if (!schemaEntry) { hideTooltip(); return; }
+
+    showTooltip(buildTooltipDOM(keyInfo.key, schemaEntry), e.clientX, e.clientY);
+  });
+
+  textarea.addEventListener('mouseleave', hideTooltip);
+}
diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html
index 69fbd2b30a1..6166ff710d7 100644
--- a/docs/public/editor/index.html
+++ b/docs/public/editor/index.html
@@ -15,22 +15,37 @@
   overflow: hidden;
 }
 
-/* CodeMirror editor sizing */
-.cm-editor {
+/* Textarea input editor */
+#editorTextarea {
+  width: 100%;
   height: 100%;
+  resize: none;
+  border: none;
+  outline: none;
+  padding: 8px 12px;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: 13px;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow: auto;
+  background: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-sizing: border-box;
 }
-.cm-editor .cm-scroller {
+
+/* Output display */
+#outputPre {
+  margin: 0;
+  padding: 8px 12px;
+  height: 100%;
   overflow: auto;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
-  line-height: 1.6;
-}
-.cm-editor .cm-gutters {
   font-size: 13px;
   line-height: 1.6;
-}
-.cm-editor.cm-focused {
-  outline: none;
+  background: var(--bgColor-default, var(--color-canvas-default));
+  color: var(--fgColor-default, var(--color-fg-default));
+  box-sizing: border-box;
 }
 
 /* Draggable divider */
@@ -116,7 +131,12 @@
 }
 
 /* Hover tooltip for frontmatter keys */
-.cm-tooltip-docs {
+.hover-tooltip {
+  position: fixed;
+  z-index: 50;
+  pointer-events: none;
+}
+.tooltip-docs {
   padding: 8px 12px;
   max-width: 320px;
   font-size: 12px;
@@ -127,16 +147,16 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   border: 1px solid var(--borderColor-default, rgba(255, 255, 255, 0.1));
 }
-.cm-tooltip-docs-header {
+.tooltip-docs-header {
   display: flex;
   align-items: baseline;
   gap: 6px;
   margin-bottom: 4px;
 }
-.cm-tooltip-docs-header strong {
+.tooltip-docs-header strong {
   font-size: 13px;
 }
-.cm-tooltip-docs-type {
+.tooltip-docs-type {
   font-size: 11px;
   padding: 1px 5px;
   border-radius: 4px;
@@ -145,32 +165,26 @@
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   white-space: nowrap;
 }
-.cm-tooltip-docs-desc {
+.tooltip-docs-desc {
   margin-top: 2px;
   color: rgba(255, 255, 255, 0.85);
   word-wrap: break-word;
 }
-.cm-tooltip-docs-enum,
-.cm-tooltip-docs-children {
+.tooltip-docs-enum,
+.tooltip-docs-children {
   margin-top: 6px;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
 }
-.cm-tooltip-docs-enum-label {
+.tooltip-docs-enum-label {
   font-weight: 600;
 }
-.cm-tooltip-docs-enum code,
-.cm-tooltip-docs-children code {
+.tooltip-docs-enum code,
+.tooltip-docs-children code {
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.85);
 }
-/* Override CodeMirror tooltip container styling to avoid clashing backgrounds */
-.cm-tooltip-hover {
-  background: transparent !important;
-  border: none !important;
-  padding: 0 !important;
-}
 
 </style>
 </head>
@@ -240,7 +254,7 @@
           Workflow (.md)
         </span>
       </div>
-      <div class="flex-1" style="min-height: 0; overflow: hidden;" id="editorMount"></div>
+      <textarea class="flex-1" style="min-height: 0;" id="editorTextarea" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
     </div>
 
     <div class="divider" id="divider"></div>
@@ -259,7 +273,7 @@
         <div class="d-flex flex-items-center flex-justify-center color-fg-muted f5 p-4 text-center" style="height: 100%;" id="outputPlaceholder">
           Compiled YAML will appear here
         </div>
-        <div id="outputMount" style="height: 100%; display: none;"></div>
+        <pre id="outputPre" style="display: none;"><code id="outputCode"></code></pre>
       </div>
     </div>
   </div>

From d8962cd26a1986479a95a5fb532b837040274761 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:58:22 +0000
Subject: [PATCH 3/4] fix: address review feedback on editor playground

- Fix measureCharWidth font setting (was invalid cssText concat)
- Cache getComputedStyle values, invalidate on resize
- Throttle mousemove with requestAnimationFrame
- Fix hideTooltip to clear existing timer before scheduling
- Clamp tooltip left to min padding for narrow viewports
- Append tooltip to document.body (avoids transform issues)
- Use replaceChildren() instead of innerHTML=''
- Use execCommand('insertText') for Tab to preserve undo
- Add Shift-Tab dedent support
- Fix Mod-Enter to set pendingCompile when compiler not ready
- Add aria-labelledby to textarea for accessibility

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/96fa5b92-7f2f-4beb-8e80-e75a9885cb69

Co-authored-by: Mossaka <5447827+Mossaka@users.noreply.github.com>
---
 docs/public/editor/editor.js         | 32 ++++++++++++----
 docs/public/editor/hover-tooltips.js | 56 ++++++++++++++++++++--------
 docs/public/editor/index.html        |  4 +-
 3 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js
index 3f48ce782bd..7d2de5970d8 100644
--- a/docs/public/editor/editor.js
+++ b/docs/public/editor/editor.js
@@ -88,20 +88,36 @@ const savedContent = localStorage.getItem(STORAGE_KEY);
 const initialContent = savedContent || DEFAULT_CONTENT;
 editorTextarea.value = initialContent;
 
-// Tab inserts 2 spaces; Mod-Enter triggers compile
+// Tab inserts 2 spaces (preserving undo); Shift-Tab dedents; Mod-Enter triggers compile
 editorTextarea.addEventListener('keydown', (e) => {
-  if (e.key === 'Tab') {
+  if (e.key === 'Tab' && !e.shiftKey) {
+    e.preventDefault();
+    // execCommand preserves the browser undo stack
+    document.execCommand('insertText', false, '  ');
+  }
+  if (e.key === 'Tab' && e.shiftKey) {
     e.preventDefault();
     const start = editorTextarea.selectionStart;
-    const end = editorTextarea.selectionEnd;
     const val = editorTextarea.value;
-    editorTextarea.value = val.substring(0, start) + '  ' + val.substring(end);
-    editorTextarea.selectionStart = editorTextarea.selectionEnd = start + 2;
-    editorTextarea.dispatchEvent(new Event('input'));
+    // Find the start of the current line
+    const lineStart = val.lastIndexOf('\n', start - 1) + 1;
+    const lineEnd = val.indexOf('\n', start);
+    const line = val.substring(lineStart, lineEnd === -1 ? val.length : lineEnd);
+    const spaces = line.match(/^ {1,2}/);
+    if (spaces) {
+      // Select the leading spaces and delete them via execCommand to preserve undo
+      editorTextarea.selectionStart = lineStart;
+      editorTextarea.selectionEnd = lineStart + spaces[0].length;
+      document.execCommand('delete', false);
+    }
   }
   if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
     e.preventDefault();
-    doCompile();
+    if (isReady) {
+      doCompile();
+    } else {
+      pendingCompile = true;
+    }
   }
 });
 
@@ -117,7 +133,7 @@ editorTextarea.addEventListener('input', () => {
 });
 
 // Attach hover tooltips to the textarea
-attachHoverTooltips(editorTextarea, $('panelEditor'));
+attachHoverTooltips(editorTextarea);
 
 // If restoring saved content, clear the dropdown since it may not match any sample
 if (savedContent) {
diff --git a/docs/public/editor/hover-tooltips.js b/docs/public/editor/hover-tooltips.js
index 899bfbbfe69..f147daef030 100644
--- a/docs/public/editor/hover-tooltips.js
+++ b/docs/public/editor/hover-tooltips.js
@@ -236,9 +236,8 @@ function measureCharWidth(textarea) {
   if (_charWidth !== null) return _charWidth;
 
   const span = document.createElement('span');
-  span.style.cssText =
-    'position:absolute;visibility:hidden;white-space:pre;' +
-    window.getComputedStyle(textarea).font;
+  span.style.cssText = 'position:absolute;visibility:hidden;white-space:pre;';
+  span.style.font = window.getComputedStyle(textarea).font;
   span.textContent = 'M';
   document.body.appendChild(span);
   _charWidth = span.getBoundingClientRect().width;
@@ -253,15 +252,16 @@ function measureCharWidth(textarea) {
 /**
  * Attach hover-tooltip behaviour to a <textarea>. Shows schema
  * documentation when the mouse hovers over a YAML frontmatter key.
+ * The tooltip is appended to document.body to avoid fixed-positioning
+ * issues with transformed parent elements.
  *
  * @param {HTMLTextAreaElement} textarea - The input textarea
- * @param {HTMLElement} container - Parent element for the tooltip div
  */
-export function attachHoverTooltips(textarea, container) {
+export function attachHoverTooltips(textarea) {
   const tooltip = document.createElement('div');
   tooltip.className = 'hover-tooltip';
   tooltip.style.display = 'none';
-  container.appendChild(tooltip);
+  document.body.appendChild(tooltip);
 
   // Cache line splits; invalidated on content change
   let cachedLines = null;
@@ -272,12 +272,26 @@ export function attachHoverTooltips(textarea, container) {
     return cachedLines;
   }
 
+  // Cache computed style values; invalidated on resize
+  let cachedStyle = null;
+  function getStyleMetrics() {
+    if (!cachedStyle) {
+      const cs = window.getComputedStyle(textarea);
+      cachedStyle = {
+        lineHeight: parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.6,
+        paddingTop: parseFloat(cs.paddingTop) || 0,
+        paddingLeft: parseFloat(cs.paddingLeft) || 0,
+      };
+    }
+    return cachedStyle;
+  }
+  window.addEventListener('resize', () => { cachedStyle = null; _charWidth = null; });
+
   let hideTimer = null;
 
   function showTooltip(dom, x, y) {
     if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; }
-    tooltip.innerHTML = '';
-    tooltip.appendChild(dom);
+    tooltip.replaceChildren(dom);
     tooltip.style.display = 'block';
 
     // Position near cursor, clamped to viewport
@@ -285,32 +299,42 @@ export function attachHoverTooltips(textarea, container) {
     let left = x + pad;
     let top = y - tooltip.offsetHeight - pad;
     if (top < 0) top = y + pad;
+    const minLeft = pad;
     const maxLeft = window.innerWidth - tooltip.offsetWidth - pad;
-    if (left > maxLeft) left = maxLeft;
+    left = Math.max(minLeft, Math.min(left, Math.max(minLeft, maxLeft)));
     tooltip.style.left = left + 'px';
     tooltip.style.top = top + 'px';
   }
 
   function hideTooltip() {
+    if (hideTimer) clearTimeout(hideTimer);
     hideTimer = setTimeout(() => {
       tooltip.style.display = 'none';
-      tooltip.innerHTML = '';
+      tooltip.replaceChildren();
+      hideTimer = null;
     }, 120);
   }
 
+  let rafPending = false;
+
   textarea.addEventListener('mousemove', (e) => {
+    if (rafPending) return;
+    rafPending = true;
+    requestAnimationFrame(() => {
+      rafPending = false;
+      handleMouseMove(e);
+    });
+  });
+
+  function handleMouseMove(e) {
     if (!schemaData) { hideTooltip(); return; }
 
     const lines = getLines();
     const region = findFrontmatterRegion(lines);
     if (!region) { hideTooltip(); return; }
 
-    // Compute line height from the textarea's computed style
-    const cs = window.getComputedStyle(textarea);
-    const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.6;
+    const { lineHeight, paddingTop, paddingLeft } = getStyleMetrics();
     const charWidth = measureCharWidth(textarea);
-    const paddingTop = parseFloat(cs.paddingTop) || 0;
-    const paddingLeft = parseFloat(cs.paddingLeft) || 0;
 
     const rect = textarea.getBoundingClientRect();
     const offsetY = e.clientY - rect.top - paddingTop + textarea.scrollTop;
@@ -335,7 +359,7 @@ export function attachHoverTooltips(textarea, container) {
     if (!schemaEntry) { hideTooltip(); return; }
 
     showTooltip(buildTooltipDOM(keyInfo.key, schemaEntry), e.clientX, e.clientY);
-  });
+  }
 
   textarea.addEventListener('mouseleave', hideTooltip);
 }
diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html
index 6166ff710d7..f5795a0544b 100644
--- a/docs/public/editor/index.html
+++ b/docs/public/editor/index.html
@@ -247,14 +247,14 @@
     <!-- Editor Panel -->
     <div class="d-flex flex-column" style="flex: 1 1 50%; min-width: 0; min-height: 0;" id="panelEditor">
       <div class="d-flex flex-items-center flex-justify-between px-3 py-2 color-bg-subtle border-bottom f6 text-bold text-uppercase color-fg-muted" style="letter-spacing: 0.5px; min-height: 36px; user-select: none;">
-        <span class="d-flex flex-items-center gap-1">
+        <span class="d-flex flex-items-center gap-1" id="editorTextareaLabel">
           <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" style="opacity: 0.6;">
             <path d="M1.75 1h12.5c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0114.25 15H1.75A1.75 1.75 0 010 13.25V2.75C0 1.784.784 1 1.75 1zm12.5 1.5H1.75a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V2.75a.25.25 0 00-.25-.25zM3 5.5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 013 5.5zm0 4a.75.75 0 01.75-.75h5.5a.75.75 0 010 1.5h-5.5A.75.75 0 013 9.5z"/>
           </svg>
           Workflow (.md)
         </span>
       </div>
-      <textarea class="flex-1" style="min-height: 0;" id="editorTextarea" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
+      <textarea class="flex-1" style="min-height: 0;" id="editorTextarea" aria-labelledby="editorTextareaLabel" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off"></textarea>
     </div>
 
     <div class="divider" id="divider"></div>

From eebdf18bafbe5134fddea3b8c9c26223b4df3869 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Apr 2026 21:59:53 +0000
Subject: [PATCH 4/4] fix: simplify tooltip clamping, preserve selection on
 dedent

Agent-Logs-Url: https://github.com/github/gh-aw/sessions/96fa5b92-7f2f-4beb-8e80-e75a9885cb69

Co-authored-by: Mossaka <5447827+Mossaka@users.noreply.github.com>
---
 docs/public/editor/editor.js         | 9 ++++++++-
 docs/public/editor/hover-tooltips.js | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js
index 7d2de5970d8..f2dff90fb95 100644
--- a/docs/public/editor/editor.js
+++ b/docs/public/editor/editor.js
@@ -98,6 +98,7 @@ editorTextarea.addEventListener('keydown', (e) => {
   if (e.key === 'Tab' && e.shiftKey) {
     e.preventDefault();
     const start = editorTextarea.selectionStart;
+    const end = editorTextarea.selectionEnd;
     const val = editorTextarea.value;
     // Find the start of the current line
     const lineStart = val.lastIndexOf('\n', start - 1) + 1;
@@ -105,10 +106,16 @@ editorTextarea.addEventListener('keydown', (e) => {
     const line = val.substring(lineStart, lineEnd === -1 ? val.length : lineEnd);
     const spaces = line.match(/^ {1,2}/);
     if (spaces) {
+      const removed = spaces[0].length;
       // Select the leading spaces and delete them via execCommand to preserve undo
       editorTextarea.selectionStart = lineStart;
-      editorTextarea.selectionEnd = lineStart + spaces[0].length;
+      editorTextarea.selectionEnd = lineStart + removed;
       document.execCommand('delete', false);
+      // Restore adjusted selection
+      const newStart = Math.max(lineStart, start - removed);
+      const newEnd = Math.max(lineStart, end - removed);
+      editorTextarea.selectionStart = newStart;
+      editorTextarea.selectionEnd = newEnd;
     }
   }
   if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
diff --git a/docs/public/editor/hover-tooltips.js b/docs/public/editor/hover-tooltips.js
index f147daef030..f70d541a182 100644
--- a/docs/public/editor/hover-tooltips.js
+++ b/docs/public/editor/hover-tooltips.js
@@ -301,7 +301,7 @@ export function attachHoverTooltips(textarea) {
     if (top < 0) top = y + pad;
     const minLeft = pad;
     const maxLeft = window.innerWidth - tooltip.offsetWidth - pad;
-    left = Math.max(minLeft, Math.min(left, Math.max(minLeft, maxLeft)));
+    left = Math.max(minLeft, Math.min(left, maxLeft));
     tooltip.style.left = left + 'px';
     tooltip.style.top = top + 'px';
   }