feat(ui): highlight editor source locations (#11004)

Co-authored-by: Hiroshi Ogawa <4232207+hi-ogawa@users.noreply.github.com>
Co-authored-by: OpenCode <noreply@opencode.ai>

Author: 3 people

packages/ui/client/components/CodeMirrorContainer.vue

@@ -71,7 +71,16 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div relative font-mono text-sm class="codemirror-scrolls" :class="saving ? 'codemirror-busy' : undefined">
+  <div
+    relative
+    font-mono
+    text-sm
+    class="codemirror-scrolls"
+    :class="{
+      'codemirror-busy': saving,
+      'codemirror-hide-cursor': readOnly,
+    }"
+  >
     <textarea ref="el" />
   </div>
 </template>

packages/ui/client/components/views/ViewEditor.vue

@@ -459,6 +459,7 @@ onBeforeUnmount(clearListeners)
       lineNumbers: true,
       readOnly: isReport || !config.api?.allowWrite,
       saving,
+      styleActiveLine: true,
       gutters: ['CodeMirror-linenumbers', ...traceGutterConfigs],
     }"
     :mode="ext"

packages/ui/client/composables/codemirror.ts

@@ -13,6 +13,7 @@ import 'codemirror/mode/xml/xml'
 import 'codemirror/mode/htmlmixed/htmlmixed'
 import 'codemirror/mode/jsx/jsx'
 import 'codemirror/addon/display/placeholder'
+import 'codemirror/addon/selection/active-line'
 import 'codemirror/addon/scroll/simplescrollbars'
 import 'codemirror/addon/scroll/simplescrollbars.css'
 

packages/ui/client/styles/main.css

@@ -51,6 +51,8 @@ html.dark {
   --cm-regex: #ab5e3f;
   --cm-json-property: #698c96;
   --cm-line-number-gutter: #f8f8f8;
+  /* blue-500, with higher opacity in dark mode */
+  --cm-line-highlight-background: rgb(59 130 246 / 10%);
   /* scrollbars colors */
   --cm-ttc-c-thumb: #eee;
   --cm-ttc-c-track: white;
@@ -79,13 +81,25 @@ html.dark {
   --cm-json-property: #6b8b9e;
   --cm-line-number: #888888;
   --cm-line-number-gutter: #161616;
-  --cm-line-highlight-background: #444444;
+  --cm-line-highlight-background: rgb(59 130 246 / 18%);
   --cm-selection-background: #44444450;
   /* scrollbars colors */
   --cm-ttc-c-thumb: #222;
   --cm-ttc-c-track: #111;
 }
 
+.CodeMirror-activeline-background {
+  background: var(--cm-line-highlight-background);
+}
+
+/*
+ * code mirror has readOnly: 'nocursor' option, but it would disable editor input and prevent focus.
+ * this only hides the cursor caret while keeping the editor region focusable and selectable.
+ */
+.codemirror-hide-cursor .CodeMirror-cursors {
+  visibility: hidden !important;
+}
+
 .splitpanes__pane {
   background-color: unset !important;
 }

test/ui/test/trace.spec.ts

@@ -2,7 +2,7 @@ import type { Page } from '@playwright/test'
 import type { PreviewServer } from 'vite'
 import type { Vitest } from 'vitest/node'
 import { expect, test } from '@playwright/test'
-import { assertTestCounts, evaluateEditor, openExplorerItem, startHtmlReportPreview, startVitestUi } from './helper'
+import { assertTestCounts, openExplorerItem, startHtmlReportPreview, startVitestUi } from './helper'
 
 test.describe('ui', () => {
   let vitest: Vitest | undefined
@@ -152,9 +152,9 @@ async function testBasic(page: Page) {
   await traceStepNames.getByText('Render simple').click()
   await expect(page.getByTestId('btn-code')).toContainClass('tab-button-active')
 
-  // verify editor cursor position
-  const getEditorCursor = () => evaluateEditor(page, editor => editor.getCursor())
-  await expect.poll(() => getEditorCursor()).toEqual({ line: 9, ch: 33 })
+  // verify source location highlight
+  const activeLine = page.getByTestId('editor').locator('.CodeMirror-activeline')
+  await expect(activeLine).toContainText('Render simple')
 
   // markers ordered by 'test finished' > 'Render simple' > 'Render another'
   const traceEditorMarkers = page.getByTestId('editor').getByTestId('trace-editor-marker')
@@ -172,7 +172,7 @@ async function testBasic(page: Page) {
   // selecting 2nd trace step and verify again
   await traceStepNames.getByText('Render another').click()
   await expect(traceFrame.getByRole('button', { name: 'Another' })).toBeVisible()
-  await expect.poll(() => getEditorCursor()).toEqual({ line: 12, ch: 33 })
+  await expect(activeLine).toContainText('Render another')
   await expect(traceSteps.nth(1)).toHaveAttribute('aria-current', 'step')
   await expect(traceEditorMarkers.nth(1)).not.toHaveAttribute('aria-current', 'step')
   await expect(traceEditorMarkers.nth(2)).toHaveAttribute('aria-current', 'step')

test/ui/test/ui.spec.ts

@@ -661,6 +661,7 @@ async function testWriteFile(page: Page, options: { enabled: boolean }) {
   await codeTabButton.click()
   const editor = page.getByTestId('editor')
   await expect(editor).toContainText('expect(1 + 1).toEqual(2)')
+  await expect(editor.locator('.CodeMirror-cursors')).toHaveCSS('visibility', options.enabled ? 'visible' : 'hidden')
   await page.keyboard.type('\n// edited \n')
   if (options.enabled) {
     await expect(editor).toContainText('// edited')