From 55be844f6134608cb6a430f3499b48c22c83f4c1 Mon Sep 17 00:00:00 2001
From: "Jiaxiao (mossaka) Zhou" <duibao55328@gmail.com>
Date: Tue, 17 Feb 2026 07:11:08 +0000
Subject: [PATCH 1/2] chore: clean up standalone editor HTML (10% reduction)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 docs/public/editor/index.html | 279 +++++++++-------------------------
 1 file changed, 75 insertions(+), 204 deletions(-)

diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html
index 7b167199e3d..8db787b9544 100644
--- a/docs/public/editor/index.html
+++ b/docs/public/editor/index.html
@@ -9,7 +9,6 @@
    CSS Custom Properties
    ============================================================ */
 :root {
-  /* Light theme (default) */
   --bg-primary: #ffffff;
   --bg-secondary: #f6f8fa;
   --bg-tertiary: #eaeef2;
@@ -44,7 +43,6 @@
   --success-text: #116329;
 
   --shadow-sm: 0 1px 2px rgba(27,31,36,0.04);
-  --shadow-md: 0 3px 6px rgba(140,149,159,0.15);
   --shadow-lg: 0 8px 24px rgba(140,149,159,0.2);
 
   --divider-color: #d1d9e0;
@@ -67,8 +65,6 @@
 
   --radius-sm: 6px;
   --radius-md: 8px;
-  --radius-lg: 12px;
-
   --transition: 180ms ease;
 }
 
@@ -107,7 +103,6 @@
   --success-text: #3fb950;
 
   --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
-  --shadow-md: 0 3px 6px rgba(0,0,0,0.3);
   --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
 
   --divider-color: #30363d;
@@ -141,6 +136,10 @@
 }
 
 body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
   font-family: var(--font-sans);
   background: var(--bg-primary);
   color: var(--text-primary);
@@ -149,16 +148,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-/* ============================================================
-   App Layout
-   ============================================================ */
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  width: 100vw;
-}
-
 /* ============================================================
    Header
    ============================================================ */
@@ -187,9 +176,7 @@
   text-decoration: none;
 }
 
-.header-logo svg {
-  flex-shrink: 0;
-}
+.header-logo svg { flex-shrink: 0; }
 
 .header-separator {
   width: 1px;
@@ -249,9 +236,7 @@
   border-color: var(--border-primary);
 }
 
-.btn-secondary:hover {
-  background: var(--bg-hover);
-}
+.btn-secondary:hover { background: var(--bg-hover); }
 
 .btn svg {
   width: 16px;
@@ -272,7 +257,8 @@
   transition: all var(--transition);
 }
 
-.status-badge[data-status="loading"] {
+.status-badge[data-status="loading"],
+.status-badge[data-status="compiling"] {
   background: var(--accent-subtle);
   color: var(--accent);
 }
@@ -282,11 +268,6 @@
   color: var(--success-text);
 }
 
-.status-badge[data-status="compiling"] {
-  background: var(--accent-subtle);
-  color: var(--accent);
-}
-
 .status-badge[data-status="error"] {
   background: var(--error-bg);
   color: var(--error-text);
@@ -332,9 +313,7 @@
   flex-shrink: 0;
 }
 
-.toggle-track.active {
-  background: var(--toggle-bg-active);
-}
+.toggle-track.active { background: var(--toggle-bg-active); }
 
 .toggle-knob {
   position: absolute;
@@ -348,9 +327,7 @@
   box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 
-.toggle-track.active .toggle-knob {
-  transform: translateX(14px);
-}
+.toggle-track.active .toggle-knob { transform: translateX(14px); }
 
 /* Theme toggle */
 .theme-toggle {
@@ -383,7 +360,7 @@
 }
 
 /* ============================================================
-   Error/Warning Banner
+   Banners (error/warning)
    ============================================================ */
 .banner {
   display: none;
@@ -396,9 +373,7 @@
   transition: all var(--transition);
 }
 
-.banner.visible {
-  display: flex;
-}
+.banner.visible { display: flex; }
 
 .banner-error {
   background: var(--error-bg);
@@ -441,9 +416,7 @@
   transition: opacity var(--transition);
 }
 
-.banner-close:hover {
-  opacity: 1;
-}
+.banner-close:hover { opacity: 1; }
 
 /* ============================================================
    Panels
@@ -462,10 +435,7 @@
   min-height: 0;
 }
 
-.panel-editor {
-  flex: 1 1 50%;
-}
-
+.panel-editor,
 .panel-output {
   flex: 1 1 50%;
 }
@@ -474,6 +444,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 6px;
   padding: 8px 16px;
   font-size: 12px;
   font-weight: 600;
@@ -487,13 +458,7 @@
   transition: background var(--transition), color var(--transition), border-color var(--transition);
 }
 
-.panel-header-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.panel-header-label svg {
+.panel-header svg {
   width: 14px;
   height: 14px;
   opacity: 0.6;
@@ -513,7 +478,6 @@
   justify-content: center;
 }
 
-/* Larger hit area for easier grabbing */
 .divider::before {
   content: '';
   position: absolute;
@@ -523,7 +487,6 @@
   bottom: 0;
 }
 
-/* Grip dots */
 .divider::after {
   content: '';
   width: 3px;
@@ -535,14 +498,10 @@
 }
 
 .divider:hover::after,
-.divider.dragging::after {
-  opacity: 0.5;
-}
+.divider.dragging::after { opacity: 0.5; }
 
 .divider:hover,
-.divider.dragging {
-  background: var(--divider-hover);
-}
+.divider.dragging { background: var(--divider-hover); }
 
 /* ============================================================
    Editor (left panel)
@@ -602,27 +561,7 @@
   transition: background var(--transition), color var(--transition);
 }
 
-.editor-textarea::placeholder {
-  color: var(--text-muted);
-}
-
-.editor-textarea::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.editor-textarea::-webkit-scrollbar-track {
-  background: var(--scrollbar-track);
-}
-
-.editor-textarea::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-thumb);
-  border-radius: 4px;
-}
-
-.editor-textarea::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
-}
+.editor-textarea::placeholder { color: var(--text-muted); }
 
 /* ============================================================
    Output (right panel)
@@ -658,20 +597,25 @@
   text-align: center;
 }
 
+/* Scrollbars (shared) */
+.editor-textarea::-webkit-scrollbar,
 .output-container::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
+.editor-textarea::-webkit-scrollbar-track,
 .output-container::-webkit-scrollbar-track {
   background: var(--scrollbar-track);
 }
 
+.editor-textarea::-webkit-scrollbar-thumb,
 .output-container::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 4px;
 }
 
+.editor-textarea::-webkit-scrollbar-thumb:hover,
 .output-container::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
 }
@@ -725,7 +669,7 @@
 }
 
 /* ============================================================
-   Copy feedback
+   Copy feedback toast
    ============================================================ */
 .copy-feedback {
   position: fixed;
@@ -754,9 +698,7 @@
    Responsive (<768px)
    ============================================================ */
 @media (max-width: 767px) {
-  .panels {
-    flex-direction: column;
-  }
+  .panels { flex-direction: column; }
 
   .divider {
     width: 100%;
@@ -764,11 +706,6 @@
     cursor: row-resize;
   }
 
-  .panel-editor,
-  .panel-output {
-    flex: 1 1 50%;
-  }
-
   .header {
     gap: 8px;
     padding: 0 12px;
@@ -779,18 +716,11 @@
     padding-bottom: 8px;
   }
 
-  .header-separator {
-    display: none;
-  }
-
-  .auto-compile-label-text {
-    display: none;
-  }
+  .header-separator { display: none; }
+  .auto-compile-label-text { display: none; }
 }
 
-/* ============================================================
-   Keyboard hint
-   ============================================================ */
+/* Keyboard hint */
 .kbd {
   display: inline-block;
   padding: 1px 5px;
@@ -805,7 +735,6 @@
 </style>
 </head>
 <body>
-<div class="app" id="app">
   <!-- Loading Overlay -->
   <div class="loading-overlay" id="loadingOverlay">
     <div class="loading-spinner"></div>
@@ -854,11 +783,9 @@
       </button>
 
       <button class="theme-toggle" id="themeToggle" title="Toggle theme" aria-label="Toggle dark mode">
-        <!-- Sun icon (shown in dark mode) -->
         <svg class="icon-sun" viewBox="0 0 16 16" fill="currentColor" style="display:none">
           <path d="M8 12a4 4 0 100-8 4 4 0 000 8zm0-1.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5zm5.657-8.157a.75.75 0 010 1.06l-1.061 1.06a.75.75 0 01-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm13 0a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zm-8 8a.75.75 0 01-.75-.75v-1.5a.75.75 0 011.5 0v1.5A.75.75 0 018 16zm-5.657-2.343a.75.75 0 010-1.06l1.06-1.061a.75.75 0 111.06 1.06l-1.06 1.06a.75.75 0 01-1.06 0zm12.728 0l-1.06-1.06a.75.75 0 011.06-1.061l1.06 1.06a.75.75 0 01-1.06 1.06z"/>
         </svg>
-        <!-- Moon icon (shown in light mode) -->
         <svg class="icon-moon" viewBox="0 0 16 16" fill="currentColor">
           <path d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"/>
         </svg>
@@ -866,7 +793,7 @@
     </div>
   </header>
 
-  <!-- Banner (error/warning) -->
+  <!-- Banners (error/warning) -->
   <div class="banner banner-error" id="errorBanner">
     <span class="banner-icon">
       <svg viewBox="0 0 16 16" fill="currentColor"><path d="M4.47.22A.749.749 0 015 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 01-.22.53l-4.25 4.25A.749.749 0 0111 16H5a.749.749 0 01-.53-.22L.22 11.53A.749.749 0 010 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 4zm0 8a1 1 0 100-2 1 1 0 000 2z"/></svg>
@@ -891,10 +818,8 @@
   <div class="panels" id="panels">
     <div class="panel panel-editor" id="panelEditor">
       <div class="panel-header">
-        <span class="panel-header-label">
-          <svg viewBox="0 0 16 16" fill="currentColor"><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>
+        <svg viewBox="0 0 16 16" fill="currentColor"><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 class="kbd" title="Press to compile">
           <span class="kbd-hint-mac" style="display:none">&#8984;&#9166;</span>
           <span class="kbd-hint-other">Ctrl+Enter</span>
@@ -920,10 +845,8 @@
 
     <div class="panel panel-output" id="panelOutput">
       <div class="panel-header">
-        <span class="panel-header-label">
-          <svg viewBox="0 0 16 16" fill="currentColor"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25Zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25Zm7.47 3.97a.75.75 0 011.06 0l2 2a.75.75 0 010 1.06l-2 2a.75.75 0 11-1.06-1.06L10.69 8 9.22 6.53a.75.75 0 010-1.06zm-3.44 0a.75.75 0 010 1.06L4.31 8l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0z"/></svg>
-          Compiled Output (.lock.yml)
-        </span>
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25Zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25Zm7.47 3.97a.75.75 0 011.06 0l2 2a.75.75 0 010 1.06l-2 2a.75.75 0 11-1.06-1.06L10.69 8 9.22 6.53a.75.75 0 010-1.06zm-3.44 0a.75.75 0 010 1.06L4.31 8l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0z"/></svg>
+        Compiled Output (.lock.yml)
       </div>
       <div class="output-container" id="outputContainer">
         <div class="output-placeholder" id="outputPlaceholder">
@@ -936,7 +859,6 @@
 
   <!-- Copy feedback toast -->
   <div class="copy-feedback" id="copyFeedback">Copied to clipboard!</div>
-</div>
 
 <script type="module">
 // ================================================================
@@ -948,20 +870,18 @@
 // ---------------------------------------------------------------
 // Default workflow content
 // ---------------------------------------------------------------
-const DEFAULT_CONTENT = [
-  '---',
-  'name: hello-world',
-  'description: A simple hello world workflow',
-  'on:',
-  '  workflow_dispatch:',
-  'engine: copilot',
-  '---',
-  '',
-  '# Mission',
-  '',
-  'Say hello to the world! Check the current date and time, and greet the user warmly.',
-  ''
-].join('\n');
+const DEFAULT_CONTENT = `---
+name: hello-world
+description: A simple hello world workflow
+on:
+  workflow_dispatch:
+engine: copilot
+---
+
+# Mission
+
+Say hello to the world! Check the current date and time, and greet the user warmly.
+`;
 
 // ---------------------------------------------------------------
 // DOM Elements
@@ -971,7 +891,6 @@
 const editor = $('editor');
 const outputPre = $('outputPre');
 const outputPlaceholder = $('outputPlaceholder');
-const outputContainer = $('outputContainer');
 const compileBtn = $('compileBtn');
 const copyBtn = $('copyBtn');
 const statusBadge = $('statusBadge');
@@ -1013,13 +932,8 @@
   localStorage.setItem('gh-aw-playground-theme', theme);
   const sunIcon = themeToggle.querySelector('.icon-sun');
   const moonIcon = themeToggle.querySelector('.icon-moon');
-  if (theme === 'dark') {
-    sunIcon.style.display = 'block';
-    moonIcon.style.display = 'none';
-  } else {
-    sunIcon.style.display = 'none';
-    moonIcon.style.display = 'block';
-  }
+  sunIcon.style.display = theme === 'dark' ? 'block' : 'none';
+  moonIcon.style.display = theme === 'dark' ? 'none' : 'block';
 }
 
 setTheme(getPreferredTheme());
@@ -1029,7 +943,6 @@
   setTheme(current === 'dark' ? 'light' : 'dark');
 });
 
-// Listen for OS theme changes
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
   if (!localStorage.getItem('gh-aw-playground-theme')) {
     setTheme(e.matches ? 'dark' : 'light');
@@ -1057,15 +970,12 @@
 function updateLineNumbers() {
   const lines = editor.value.split('\n').length;
   let html = '';
-  for (let i = 1; i <= lines; i++) {
-    html += '<div>' + i + '</div>';
-  }
+  for (let i = 1; i <= lines; i++) html += '<div>' + i + '</div>';
   lineNumbersInner.innerHTML = html;
 }
 
 function syncLineNumberScroll() {
-  const lineNumbers = $('lineNumbers');
-  lineNumbers.scrollTop = editor.scrollTop;
+  $('lineNumbers').scrollTop = editor.scrollTop;
 }
 
 // ---------------------------------------------------------------
@@ -1076,26 +986,20 @@
 
 editor.addEventListener('input', () => {
   updateLineNumbers();
-  if (autoCompile && isReady) {
-    scheduleCompile();
-  }
+  if (autoCompile && isReady) scheduleCompile();
 });
 
 editor.addEventListener('scroll', syncLineNumberScroll);
 
-// Tab key inserts 2 spaces
 editor.addEventListener('keydown', (e) => {
   if (e.key === 'Tab') {
     e.preventDefault();
     const start = editor.selectionStart;
     const end = editor.selectionEnd;
-    const val = editor.value;
-    editor.value = val.substring(0, start) + '  ' + val.substring(end);
+    editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
     editor.selectionStart = editor.selectionEnd = start + 2;
     editor.dispatchEvent(new Event('input'));
   }
-
-  // Ctrl+Enter or Cmd+Enter to compile
   if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
     e.preventDefault();
     doCompile();
@@ -1107,11 +1011,7 @@
 // ---------------------------------------------------------------
 $('autoCompileToggle').addEventListener('click', () => {
   autoCompile = !autoCompile;
-  if (autoCompile) {
-    toggleTrack.classList.add('active');
-  } else {
-    toggleTrack.classList.remove('active');
-  }
+  toggleTrack.classList.toggle('active', autoCompile);
 });
 
 // ---------------------------------------------------------------
@@ -1124,10 +1024,7 @@
 
 async function doCompile() {
   if (!isReady || isCompiling) return;
-  if (compileTimer) {
-    clearTimeout(compileTimer);
-    compileTimer = null;
-  }
+  if (compileTimer) { clearTimeout(compileTimer); compileTimer = null; }
 
   const md = editor.value;
   if (!md.trim()) {
@@ -1142,8 +1039,6 @@
   isCompiling = true;
   setStatus('compiling', 'Compiling...');
   compileBtn.disabled = true;
-
-  // Hide old banners
   errorBanner.classList.remove('visible');
   warningBanner.classList.remove('visible');
 
@@ -1154,7 +1049,6 @@
       setStatus('error', 'Error');
       errorText.textContent = result.error;
       errorBanner.classList.add('visible');
-      // Keep previous output visible but dim? No, just keep it.
     } else {
       setStatus('ready', 'Ready');
       currentYaml = result.yaml;
@@ -1183,25 +1077,25 @@
 // ---------------------------------------------------------------
 // Copy YAML
 // ---------------------------------------------------------------
+function showCopyFeedback() {
+  const feedback = $('copyFeedback');
+  feedback.classList.add('show');
+  setTimeout(() => feedback.classList.remove('show'), 2000);
+}
+
 copyBtn.addEventListener('click', async () => {
   if (!currentYaml) return;
   try {
     await navigator.clipboard.writeText(currentYaml);
-    const feedback = $('copyFeedback');
-    feedback.classList.add('show');
-    setTimeout(() => feedback.classList.remove('show'), 2000);
-  } catch (err) {
-    // Fallback
+  } catch {
     const ta = document.createElement('textarea');
     ta.value = currentYaml;
     document.body.appendChild(ta);
     ta.select();
     document.execCommand('copy');
     document.body.removeChild(ta);
-    const feedback = $('copyFeedback');
-    feedback.classList.add('show');
-    setTimeout(() => feedback.classList.remove('show'), 2000);
   }
+  showCopyFeedback();
 });
 
 // ---------------------------------------------------------------
@@ -1215,6 +1109,16 @@
 // ---------------------------------------------------------------
 let isDragging = false;
 
+function resizePanels(clientX, clientY) {
+  const rect = panels.getBoundingClientRect();
+  const isMobile = window.innerWidth < 768;
+  const pos = isMobile ? clientY - rect.top : clientX - rect.left;
+  const size = isMobile ? rect.height : rect.width;
+  const clamped = Math.max(0.2, Math.min(0.8, pos / size));
+  panelEditor.style.flex = `0 0 ${clamped * 100}%`;
+  panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
+}
+
 divider.addEventListener('mousedown', (e) => {
   isDragging = true;
   divider.classList.add('dragging');
@@ -1224,21 +1128,7 @@
 });
 
 document.addEventListener('mousemove', (e) => {
-  if (!isDragging) return;
-  const rect = panels.getBoundingClientRect();
-  const isMobile = window.innerWidth < 768;
-
-  if (isMobile) {
-    const fraction = (e.clientY - rect.top) / rect.height;
-    const clamped = Math.max(0.2, Math.min(0.8, fraction));
-    panelEditor.style.flex = `0 0 ${clamped * 100}%`;
-    panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
-  } else {
-    const fraction = (e.clientX - rect.left) / rect.width;
-    const clamped = Math.max(0.2, Math.min(0.8, fraction));
-    panelEditor.style.flex = `0 0 ${clamped * 100}%`;
-    panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
-  }
+  if (isDragging) resizePanels(e.clientX, e.clientY);
 });
 
 document.addEventListener('mouseup', () => {
@@ -1250,7 +1140,6 @@
   }
 });
 
-// Touch support for mobile divider
 divider.addEventListener('touchstart', (e) => {
   isDragging = true;
   divider.classList.add('dragging');
@@ -1258,22 +1147,7 @@
 });
 
 document.addEventListener('touchmove', (e) => {
-  if (!isDragging) return;
-  const touch = e.touches[0];
-  const rect = panels.getBoundingClientRect();
-  const isMobile = window.innerWidth < 768;
-
-  if (isMobile) {
-    const fraction = (touch.clientY - rect.top) / rect.height;
-    const clamped = Math.max(0.2, Math.min(0.8, fraction));
-    panelEditor.style.flex = `0 0 ${clamped * 100}%`;
-    panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
-  } else {
-    const fraction = (touch.clientX - rect.left) / rect.width;
-    const clamped = Math.max(0.2, Math.min(0.8, fraction));
-    panelEditor.style.flex = `0 0 ${clamped * 100}%`;
-    panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
-  }
+  if (isDragging) resizePanels(e.touches[0].clientX, e.touches[0].clientY);
 });
 
 document.addEventListener('touchend', () => {
@@ -1298,10 +1172,7 @@
     compileBtn.disabled = false;
     loadingOverlay.classList.add('hidden');
 
-    // Auto-compile the default content
-    if (autoCompile) {
-      doCompile();
-    }
+    if (autoCompile) doCompile();
   } catch (err) {
     setStatus('error', 'Failed to load');
     loadingOverlay.querySelector('.loading-text').textContent = 'Failed to load compiler';

From bf6a8af908eb128a71f9a6efe6637e00ecc9d0d9 Mon Sep 17 00:00:00 2001
From: "Jiaxiao (mossaka) Zhou" <duibao55328@gmail.com>
Date: Tue, 17 Feb 2026 20:54:52 +0000
Subject: [PATCH 2/2] refactor: extract editor JS to separate file and fix
 review comments

Move all inline JavaScript from editor/index.html into editor/editor.js,
loaded as an ES module. Also addresses PR review feedback:
- Fix drag cursor: use row-resize on mobile (<768px), col-resize on desktop
- Cache lineNumbers DOM element at init instead of querying on every scroll

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/public/editor/editor.js  | 323 +++++++++++++++++++++++++++++++++
 docs/public/editor/index.html | 324 +---------------------------------
 2 files changed, 324 insertions(+), 323 deletions(-)
 create mode 100644 docs/public/editor/editor.js

diff --git a/docs/public/editor/editor.js b/docs/public/editor/editor.js
new file mode 100644
index 00000000000..202e8cded22
--- /dev/null
+++ b/docs/public/editor/editor.js
@@ -0,0 +1,323 @@
+// ================================================================
+// gh-aw Playground - Application Logic
+// ================================================================
+
+import { createWorkerCompiler } from '/gh-aw/wasm/compiler-loader.js';
+
+// ---------------------------------------------------------------
+// Default workflow content
+// ---------------------------------------------------------------
+const DEFAULT_CONTENT = `---
+name: hello-world
+description: A simple hello world workflow
+on:
+  workflow_dispatch:
+engine: copilot
+---
+
+# Mission
+
+Say hello to the world! Check the current date and time, and greet the user warmly.
+`;
+
+// ---------------------------------------------------------------
+// DOM Elements
+// ---------------------------------------------------------------
+const $ = (id) => document.getElementById(id);
+
+const editor = $('editor');
+const outputPre = $('outputPre');
+const outputPlaceholder = $('outputPlaceholder');
+const compileBtn = $('compileBtn');
+const copyBtn = $('copyBtn');
+const statusBadge = $('statusBadge');
+const statusText = $('statusText');
+const loadingOverlay = $('loadingOverlay');
+const errorBanner = $('errorBanner');
+const errorText = $('errorText');
+const warningBanner = $('warningBanner');
+const warningText = $('warningText');
+const lineNumbers = $('lineNumbers');
+const lineNumbersInner = $('lineNumbersInner');
+const themeToggle = $('themeToggle');
+const toggleTrack = $('toggleTrack');
+const divider = $('divider');
+const panelEditor = $('panelEditor');
+const panelOutput = $('panelOutput');
+const panels = $('panels');
+
+// ---------------------------------------------------------------
+// State
+// ---------------------------------------------------------------
+let compiler = null;
+let isReady = false;
+let isCompiling = false;
+let autoCompile = true;
+let compileTimer = null;
+let currentYaml = '';
+
+// ---------------------------------------------------------------
+// Theme
+// ---------------------------------------------------------------
+function getPreferredTheme() {
+  const saved = localStorage.getItem('gh-aw-playground-theme');
+  if (saved) return saved;
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+function setTheme(theme) {
+  document.documentElement.setAttribute('data-theme', theme);
+  localStorage.setItem('gh-aw-playground-theme', theme);
+  const sunIcon = themeToggle.querySelector('.icon-sun');
+  const moonIcon = themeToggle.querySelector('.icon-moon');
+  sunIcon.style.display = theme === 'dark' ? 'block' : 'none';
+  moonIcon.style.display = theme === 'dark' ? 'none' : 'block';
+}
+
+setTheme(getPreferredTheme());
+
+themeToggle.addEventListener('click', () => {
+  const current = document.documentElement.getAttribute('data-theme');
+  setTheme(current === 'dark' ? 'light' : 'dark');
+});
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+  if (!localStorage.getItem('gh-aw-playground-theme')) {
+    setTheme(e.matches ? 'dark' : 'light');
+  }
+});
+
+// ---------------------------------------------------------------
+// Keyboard shortcut hint (Mac vs other)
+// ---------------------------------------------------------------
+const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+document.querySelectorAll('.kbd-hint-mac').forEach(el => el.style.display = isMac ? 'inline' : 'none');
+document.querySelectorAll('.kbd-hint-other').forEach(el => el.style.display = isMac ? 'none' : 'inline');
+
+// ---------------------------------------------------------------
+// Status
+// ---------------------------------------------------------------
+function setStatus(status, text) {
+  statusBadge.setAttribute('data-status', status);
+  statusText.textContent = text;
+}
+
+// ---------------------------------------------------------------
+// Line numbers
+// ---------------------------------------------------------------
+function updateLineNumbers() {
+  const lines = editor.value.split('\n').length;
+  let html = '';
+  for (let i = 1; i <= lines; i++) html += '<div>' + i + '</div>';
+  lineNumbersInner.innerHTML = html;
+}
+
+function syncLineNumberScroll() {
+  lineNumbers.scrollTop = editor.scrollTop;
+}
+
+// ---------------------------------------------------------------
+// Editor setup
+// ---------------------------------------------------------------
+editor.value = DEFAULT_CONTENT;
+updateLineNumbers();
+
+editor.addEventListener('input', () => {
+  updateLineNumbers();
+  if (autoCompile && isReady) scheduleCompile();
+});
+
+editor.addEventListener('scroll', syncLineNumberScroll);
+
+editor.addEventListener('keydown', (e) => {
+  if (e.key === 'Tab') {
+    e.preventDefault();
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
+    editor.selectionStart = editor.selectionEnd = start + 2;
+    editor.dispatchEvent(new Event('input'));
+  }
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault();
+    doCompile();
+  }
+});
+
+// ---------------------------------------------------------------
+// Auto-compile toggle
+// ---------------------------------------------------------------
+$('autoCompileToggle').addEventListener('click', () => {
+  autoCompile = !autoCompile;
+  toggleTrack.classList.toggle('active', autoCompile);
+});
+
+// ---------------------------------------------------------------
+// Compile
+// ---------------------------------------------------------------
+function scheduleCompile() {
+  if (compileTimer) clearTimeout(compileTimer);
+  compileTimer = setTimeout(doCompile, 400);
+}
+
+async function doCompile() {
+  if (!isReady || isCompiling) return;
+  if (compileTimer) { clearTimeout(compileTimer); compileTimer = null; }
+
+  const md = editor.value;
+  if (!md.trim()) {
+    outputPre.style.display = 'none';
+    outputPlaceholder.style.display = 'flex';
+    outputPlaceholder.textContent = 'Compiled YAML will appear here';
+    currentYaml = '';
+    copyBtn.disabled = true;
+    return;
+  }
+
+  isCompiling = true;
+  setStatus('compiling', 'Compiling...');
+  compileBtn.disabled = true;
+  errorBanner.classList.remove('visible');
+  warningBanner.classList.remove('visible');
+
+  try {
+    const result = await compiler.compile(md);
+
+    if (result.error) {
+      setStatus('error', 'Error');
+      errorText.textContent = result.error;
+      errorBanner.classList.add('visible');
+    } else {
+      setStatus('ready', 'Ready');
+      currentYaml = result.yaml;
+      outputPre.textContent = result.yaml;
+      outputPre.style.display = 'block';
+      outputPlaceholder.style.display = 'none';
+      copyBtn.disabled = false;
+
+      if (result.warnings && result.warnings.length > 0) {
+        warningText.textContent = result.warnings.join('\n');
+        warningBanner.classList.add('visible');
+      }
+    }
+  } catch (err) {
+    setStatus('error', 'Error');
+    errorText.textContent = err.message || String(err);
+    errorBanner.classList.add('visible');
+  } finally {
+    isCompiling = false;
+    compileBtn.disabled = !isReady;
+  }
+}
+
+compileBtn.addEventListener('click', doCompile);
+
+// ---------------------------------------------------------------
+// Copy YAML
+// ---------------------------------------------------------------
+function showCopyFeedback() {
+  const feedback = $('copyFeedback');
+  feedback.classList.add('show');
+  setTimeout(() => feedback.classList.remove('show'), 2000);
+}
+
+copyBtn.addEventListener('click', async () => {
+  if (!currentYaml) return;
+  try {
+    await navigator.clipboard.writeText(currentYaml);
+  } catch {
+    const ta = document.createElement('textarea');
+    ta.value = currentYaml;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  }
+  showCopyFeedback();
+});
+
+// ---------------------------------------------------------------
+// Banner close
+// ---------------------------------------------------------------
+$('errorClose').addEventListener('click', () => errorBanner.classList.remove('visible'));
+$('warningClose').addEventListener('click', () => warningBanner.classList.remove('visible'));
+
+// ---------------------------------------------------------------
+// Draggable divider
+// ---------------------------------------------------------------
+let isDragging = false;
+
+function resizePanels(clientX, clientY) {
+  const rect = panels.getBoundingClientRect();
+  const isMobile = window.innerWidth < 768;
+  const pos = isMobile ? clientY - rect.top : clientX - rect.left;
+  const size = isMobile ? rect.height : rect.width;
+  const clamped = Math.max(0.2, Math.min(0.8, pos / size));
+  panelEditor.style.flex = `0 0 ${clamped * 100}%`;
+  panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
+}
+
+divider.addEventListener('mousedown', (e) => {
+  isDragging = true;
+  divider.classList.add('dragging');
+  const isMobile = window.innerWidth < 768;
+  document.body.style.cursor = isMobile ? 'row-resize' : 'col-resize';
+  document.body.style.userSelect = 'none';
+  e.preventDefault();
+});
+
+document.addEventListener('mousemove', (e) => {
+  if (isDragging) resizePanels(e.clientX, e.clientY);
+});
+
+document.addEventListener('mouseup', () => {
+  if (isDragging) {
+    isDragging = false;
+    divider.classList.remove('dragging');
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+  }
+});
+
+divider.addEventListener('touchstart', (e) => {
+  isDragging = true;
+  divider.classList.add('dragging');
+  e.preventDefault();
+});
+
+document.addEventListener('touchmove', (e) => {
+  if (isDragging) resizePanels(e.touches[0].clientX, e.touches[0].clientY);
+});
+
+document.addEventListener('touchend', () => {
+  if (isDragging) {
+    isDragging = false;
+    divider.classList.remove('dragging');
+  }
+});
+
+// ---------------------------------------------------------------
+// Initialize compiler
+// ---------------------------------------------------------------
+async function init() {
+  try {
+    compiler = createWorkerCompiler({
+      workerUrl: '/gh-aw/wasm/compiler-worker.js'
+    });
+
+    await compiler.ready;
+    isReady = true;
+    setStatus('ready', 'Ready');
+    compileBtn.disabled = false;
+    loadingOverlay.classList.add('hidden');
+
+    if (autoCompile) doCompile();
+  } catch (err) {
+    setStatus('error', 'Failed to load');
+    loadingOverlay.querySelector('.loading-text').textContent = 'Failed to load compiler';
+    loadingOverlay.querySelector('.loading-subtext').textContent = err.message;
+    loadingOverlay.querySelector('.loading-spinner').style.display = 'none';
+  }
+}
+
+init();
diff --git a/docs/public/editor/index.html b/docs/public/editor/index.html
index 8db787b9544..203360664e4 100644
--- a/docs/public/editor/index.html
+++ b/docs/public/editor/index.html
@@ -860,328 +860,6 @@
   <!-- Copy feedback toast -->
   <div class="copy-feedback" id="copyFeedback">Copied to clipboard!</div>
 
-<script type="module">
-// ================================================================
-// gh-aw Playground - Application Logic
-// ================================================================
-
-import { createWorkerCompiler } from '/gh-aw/wasm/compiler-loader.js';
-
-// ---------------------------------------------------------------
-// Default workflow content
-// ---------------------------------------------------------------
-const DEFAULT_CONTENT = `---
-name: hello-world
-description: A simple hello world workflow
-on:
-  workflow_dispatch:
-engine: copilot
----
-
-# Mission
-
-Say hello to the world! Check the current date and time, and greet the user warmly.
-`;
-
-// ---------------------------------------------------------------
-// DOM Elements
-// ---------------------------------------------------------------
-const $ = (id) => document.getElementById(id);
-
-const editor = $('editor');
-const outputPre = $('outputPre');
-const outputPlaceholder = $('outputPlaceholder');
-const compileBtn = $('compileBtn');
-const copyBtn = $('copyBtn');
-const statusBadge = $('statusBadge');
-const statusText = $('statusText');
-const loadingOverlay = $('loadingOverlay');
-const errorBanner = $('errorBanner');
-const errorText = $('errorText');
-const warningBanner = $('warningBanner');
-const warningText = $('warningText');
-const lineNumbersInner = $('lineNumbersInner');
-const themeToggle = $('themeToggle');
-const toggleTrack = $('toggleTrack');
-const divider = $('divider');
-const panelEditor = $('panelEditor');
-const panelOutput = $('panelOutput');
-const panels = $('panels');
-
-// ---------------------------------------------------------------
-// State
-// ---------------------------------------------------------------
-let compiler = null;
-let isReady = false;
-let isCompiling = false;
-let autoCompile = true;
-let compileTimer = null;
-let currentYaml = '';
-
-// ---------------------------------------------------------------
-// Theme
-// ---------------------------------------------------------------
-function getPreferredTheme() {
-  const saved = localStorage.getItem('gh-aw-playground-theme');
-  if (saved) return saved;
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}
-
-function setTheme(theme) {
-  document.documentElement.setAttribute('data-theme', theme);
-  localStorage.setItem('gh-aw-playground-theme', theme);
-  const sunIcon = themeToggle.querySelector('.icon-sun');
-  const moonIcon = themeToggle.querySelector('.icon-moon');
-  sunIcon.style.display = theme === 'dark' ? 'block' : 'none';
-  moonIcon.style.display = theme === 'dark' ? 'none' : 'block';
-}
-
-setTheme(getPreferredTheme());
-
-themeToggle.addEventListener('click', () => {
-  const current = document.documentElement.getAttribute('data-theme');
-  setTheme(current === 'dark' ? 'light' : 'dark');
-});
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
-  if (!localStorage.getItem('gh-aw-playground-theme')) {
-    setTheme(e.matches ? 'dark' : 'light');
-  }
-});
-
-// ---------------------------------------------------------------
-// Keyboard shortcut hint (Mac vs other)
-// ---------------------------------------------------------------
-const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-document.querySelectorAll('.kbd-hint-mac').forEach(el => el.style.display = isMac ? 'inline' : 'none');
-document.querySelectorAll('.kbd-hint-other').forEach(el => el.style.display = isMac ? 'none' : 'inline');
-
-// ---------------------------------------------------------------
-// Status
-// ---------------------------------------------------------------
-function setStatus(status, text) {
-  statusBadge.setAttribute('data-status', status);
-  statusText.textContent = text;
-}
-
-// ---------------------------------------------------------------
-// Line numbers
-// ---------------------------------------------------------------
-function updateLineNumbers() {
-  const lines = editor.value.split('\n').length;
-  let html = '';
-  for (let i = 1; i <= lines; i++) html += '<div>' + i + '</div>';
-  lineNumbersInner.innerHTML = html;
-}
-
-function syncLineNumberScroll() {
-  $('lineNumbers').scrollTop = editor.scrollTop;
-}
-
-// ---------------------------------------------------------------
-// Editor setup
-// ---------------------------------------------------------------
-editor.value = DEFAULT_CONTENT;
-updateLineNumbers();
-
-editor.addEventListener('input', () => {
-  updateLineNumbers();
-  if (autoCompile && isReady) scheduleCompile();
-});
-
-editor.addEventListener('scroll', syncLineNumberScroll);
-
-editor.addEventListener('keydown', (e) => {
-  if (e.key === 'Tab') {
-    e.preventDefault();
-    const start = editor.selectionStart;
-    const end = editor.selectionEnd;
-    editor.value = editor.value.substring(0, start) + '  ' + editor.value.substring(end);
-    editor.selectionStart = editor.selectionEnd = start + 2;
-    editor.dispatchEvent(new Event('input'));
-  }
-  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
-    e.preventDefault();
-    doCompile();
-  }
-});
-
-// ---------------------------------------------------------------
-// Auto-compile toggle
-// ---------------------------------------------------------------
-$('autoCompileToggle').addEventListener('click', () => {
-  autoCompile = !autoCompile;
-  toggleTrack.classList.toggle('active', autoCompile);
-});
-
-// ---------------------------------------------------------------
-// Compile
-// ---------------------------------------------------------------
-function scheduleCompile() {
-  if (compileTimer) clearTimeout(compileTimer);
-  compileTimer = setTimeout(doCompile, 400);
-}
-
-async function doCompile() {
-  if (!isReady || isCompiling) return;
-  if (compileTimer) { clearTimeout(compileTimer); compileTimer = null; }
-
-  const md = editor.value;
-  if (!md.trim()) {
-    outputPre.style.display = 'none';
-    outputPlaceholder.style.display = 'flex';
-    outputPlaceholder.textContent = 'Compiled YAML will appear here';
-    currentYaml = '';
-    copyBtn.disabled = true;
-    return;
-  }
-
-  isCompiling = true;
-  setStatus('compiling', 'Compiling...');
-  compileBtn.disabled = true;
-  errorBanner.classList.remove('visible');
-  warningBanner.classList.remove('visible');
-
-  try {
-    const result = await compiler.compile(md);
-
-    if (result.error) {
-      setStatus('error', 'Error');
-      errorText.textContent = result.error;
-      errorBanner.classList.add('visible');
-    } else {
-      setStatus('ready', 'Ready');
-      currentYaml = result.yaml;
-      outputPre.textContent = result.yaml;
-      outputPre.style.display = 'block';
-      outputPlaceholder.style.display = 'none';
-      copyBtn.disabled = false;
-
-      if (result.warnings && result.warnings.length > 0) {
-        warningText.textContent = result.warnings.join('\n');
-        warningBanner.classList.add('visible');
-      }
-    }
-  } catch (err) {
-    setStatus('error', 'Error');
-    errorText.textContent = err.message || String(err);
-    errorBanner.classList.add('visible');
-  } finally {
-    isCompiling = false;
-    compileBtn.disabled = !isReady;
-  }
-}
-
-compileBtn.addEventListener('click', doCompile);
-
-// ---------------------------------------------------------------
-// Copy YAML
-// ---------------------------------------------------------------
-function showCopyFeedback() {
-  const feedback = $('copyFeedback');
-  feedback.classList.add('show');
-  setTimeout(() => feedback.classList.remove('show'), 2000);
-}
-
-copyBtn.addEventListener('click', async () => {
-  if (!currentYaml) return;
-  try {
-    await navigator.clipboard.writeText(currentYaml);
-  } catch {
-    const ta = document.createElement('textarea');
-    ta.value = currentYaml;
-    document.body.appendChild(ta);
-    ta.select();
-    document.execCommand('copy');
-    document.body.removeChild(ta);
-  }
-  showCopyFeedback();
-});
-
-// ---------------------------------------------------------------
-// Banner close
-// ---------------------------------------------------------------
-$('errorClose').addEventListener('click', () => errorBanner.classList.remove('visible'));
-$('warningClose').addEventListener('click', () => warningBanner.classList.remove('visible'));
-
-// ---------------------------------------------------------------
-// Draggable divider
-// ---------------------------------------------------------------
-let isDragging = false;
-
-function resizePanels(clientX, clientY) {
-  const rect = panels.getBoundingClientRect();
-  const isMobile = window.innerWidth < 768;
-  const pos = isMobile ? clientY - rect.top : clientX - rect.left;
-  const size = isMobile ? rect.height : rect.width;
-  const clamped = Math.max(0.2, Math.min(0.8, pos / size));
-  panelEditor.style.flex = `0 0 ${clamped * 100}%`;
-  panelOutput.style.flex = `0 0 ${(1 - clamped) * 100}%`;
-}
-
-divider.addEventListener('mousedown', (e) => {
-  isDragging = true;
-  divider.classList.add('dragging');
-  document.body.style.cursor = 'col-resize';
-  document.body.style.userSelect = 'none';
-  e.preventDefault();
-});
-
-document.addEventListener('mousemove', (e) => {
-  if (isDragging) resizePanels(e.clientX, e.clientY);
-});
-
-document.addEventListener('mouseup', () => {
-  if (isDragging) {
-    isDragging = false;
-    divider.classList.remove('dragging');
-    document.body.style.cursor = '';
-    document.body.style.userSelect = '';
-  }
-});
-
-divider.addEventListener('touchstart', (e) => {
-  isDragging = true;
-  divider.classList.add('dragging');
-  e.preventDefault();
-});
-
-document.addEventListener('touchmove', (e) => {
-  if (isDragging) resizePanels(e.touches[0].clientX, e.touches[0].clientY);
-});
-
-document.addEventListener('touchend', () => {
-  if (isDragging) {
-    isDragging = false;
-    divider.classList.remove('dragging');
-  }
-});
-
-// ---------------------------------------------------------------
-// Initialize compiler
-// ---------------------------------------------------------------
-async function init() {
-  try {
-    compiler = createWorkerCompiler({
-      workerUrl: '/gh-aw/wasm/compiler-worker.js'
-    });
-
-    await compiler.ready;
-    isReady = true;
-    setStatus('ready', 'Ready');
-    compileBtn.disabled = false;
-    loadingOverlay.classList.add('hidden');
-
-    if (autoCompile) doCompile();
-  } catch (err) {
-    setStatus('error', 'Failed to load');
-    loadingOverlay.querySelector('.loading-text').textContent = 'Failed to load compiler';
-    loadingOverlay.querySelector('.loading-subtext').textContent = err.message;
-    loadingOverlay.querySelector('.loading-spinner').style.display = 'none';
-  }
-}
-
-init();
-</script>
+<script type="module" src="editor.js"></script>
 </body>
 </html>