From c2ee414a2d80ea9647ff8ddbad959969f9ab03d6 Mon Sep 17 00:00:00 2001
From: Thomas Kpenou <tomk@Mac-mini-de-Thomas.local>
Date: Thu, 25 Jun 2026 06:50:36 -0400
Subject: [PATCH] feat(logs): search in script output

Add a find bar to the log panel: a search icon in the "Output" header opens an
input that highlights all matches in the rendered output, with a match counter
and previous/next navigation (Enter / Shift+Enter, Esc to close).

Matching is done over the output element's text nodes and surfaced as DOM Ranges
highlighted via the CSS Custom Highlight API (logSearch.js), so the
live-appending terminal output and inline images are never mutated. The search
refreshes as new output streams in while the bar is open, and highlight calls are
guarded so browsers without the API degrade gracefully.

Lives in the shared log_panel, so it's available in both the execution view and
the history details.

Tests: logSearch match-finding (case-insensitive, multi-node, non-overlapping)
and LogPanel search wiring (count/label, next/prev wrap, open/close).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 README.md                                     |   8 +
 web-src/src/common/components/log_panel.vue   | 196 +++++++++++++++++-
 .../common/components/terminal/logSearch.js   |  87 ++++++++
 .../tests/unit/common/LogPanel_search_test.js |  87 ++++++++
 .../unit/common/terminal/logSearch_test.js    |  77 +++++++
 5 files changed, 454 insertions(+), 1 deletion(-)
 create mode 100644 web-src/src/common/components/terminal/logSearch.js
 create mode 100644 web-src/tests/unit/common/LogPanel_search_test.js
 create mode 100644 web-src/tests/unit/common/terminal/logSearch_test.js

diff --git a/README.md b/README.md
index 48790d16..d864b13d 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,14 @@
 
 ## What's new in this fork
 
+### 2026-06-25 — Search in script output
+
+The output panel now has a find bar (search icon in the "Output" header): type to
+highlight all matches in the log, with a match counter and previous/next
+navigation (Enter / Shift+Enter, Esc to close). Matches are highlighted via the
+CSS Custom Highlight API, so the live-appending terminal and inline images are
+left untouched. Available wherever logs are shown (execution view and history).
+
 ### 2026-06-24 — Dependency security scan in CI
 
 A `Security scan` job audits dependencies on every push/PR: `pip-audit` for the
diff --git a/web-src/src/common/components/log_panel.vue b/web-src/src/common/components/log_panel.vue
index 4fd72693..fe8b5b3d 100644
--- a/web-src/src/common/components/log_panel.vue
+++ b/web-src/src/common/components/log_panel.vue
@@ -3,6 +3,29 @@
     <div class="log-panel-header">
       <v-icon :size="16">terminal</v-icon>
       <span>Output</span>
+
+      <div class="log-search">
+        <template v-if="searchActive">
+          <input
+            ref="searchInput"
+            v-model="searchQuery"
+            class="log-search-input"
+            type="text"
+            placeholder="Find in output"
+            spellcheck="false"
+            autocomplete="off"
+            @keydown.enter.prevent="$event.shiftKey ? prevMatch() : nextMatch()"
+            @keydown.esc.prevent="closeSearch"
+          />
+          <span class="log-search-count">{{ matchCountLabel }}</span>
+          <v-icon class="log-search-btn" size="16" title="Previous match (Shift+Enter)"
+                  :class="{disabled: matchCount === 0}" @click="prevMatch">keyboard_arrow_up</v-icon>
+          <v-icon class="log-search-btn" size="16" title="Next match (Enter)"
+                  :class="{disabled: matchCount === 0}" @click="nextMatch">keyboard_arrow_down</v-icon>
+          <v-icon class="log-search-btn" size="16" title="Close (Esc)" @click="closeSearch">close</v-icon>
+        </template>
+        <v-icon v-else class="log-search-btn" size="16" title="Search output" @click="openSearch">search</v-icon>
+      </div>
     </div>
     <div ref="shadow" class="log-panel-shadow"
          v-bind:class="{
@@ -25,6 +48,7 @@ import {TerminalOutput} from '@/common/components/terminal/ansi/TerminalOutput'
 import {TextOutput} from '@/common/components/terminal/text/TextOutput'
 import {HtmlIFrameOutput} from '@/common/components/terminal/html/HtmlIFrameOutput'
 import {HtmlOutput} from '@/common/components/terminal/html/HtmlOutput'
+import {applyHighlights, clearHighlights, findTextMatches} from '@/common/components/terminal/logSearch'
 
 export default {
   props: {
@@ -44,7 +68,21 @@ export default {
       mouseDown: false,
       scrollUpdater: null,
       needScrollUpdate: false,
-      text: ''
+      text: '',
+      searchActive: false,
+      searchQuery: '',
+      searchRanges: [],
+      matchCount: 0,
+      currentMatch: 0
+    }
+  },
+
+  computed: {
+    matchCountLabel: function () {
+      if (this.matchCount === 0) {
+        return this.searchQuery ? '0/0' : '';
+      }
+      return (this.currentMatch + 1) + '/' + this.matchCount;
     }
   },
 
@@ -117,6 +155,27 @@ export default {
       this.output.write(text);
 
       this.revalidateScroll();
+
+      if (this.searchActive && this.searchQuery) {
+        // New output may contain (or shift) matches — refresh, preserving the
+        // current position by index.
+        this.scheduleSearchRefresh();
+      }
+    },
+
+    scheduleSearchRefresh: function () {
+      if (this._searchRefreshScheduled) {
+        return;
+      }
+      this._searchRefreshScheduled = true;
+      this.$nextTick(() => {
+        this._searchRefreshScheduled = false;
+        const previous = this.currentMatch;
+        this.searchRanges = findTextMatches(this.output.element, this.searchQuery);
+        this.matchCount = this.searchRanges.length;
+        this.currentMatch = Math.min(previous, Math.max(0, this.matchCount - 1));
+        applyHighlights(this.searchRanges, this.matchCount ? this.currentMatch : -1);
+      });
     },
 
     removeInlineImage: function (output_path) {
@@ -144,6 +203,76 @@ export default {
       URL.revokeObjectURL(url);
     },
 
+    openSearch: function () {
+      this.searchActive = true;
+      this.$nextTick(() => {
+        if (this.$refs.searchInput) {
+          this.$refs.searchInput.focus();
+        }
+      });
+    },
+
+    closeSearch: function () {
+      this.searchActive = false;
+      this.searchQuery = '';
+      this.searchRanges = [];
+      this.matchCount = 0;
+      this.currentMatch = 0;
+      clearHighlights();
+    },
+
+    runSearch: function () {
+      if (!this.output || !this.output.element || !this.searchQuery) {
+        this.searchRanges = [];
+        this.matchCount = 0;
+        this.currentMatch = 0;
+        clearHighlights();
+        return;
+      }
+
+      this.searchRanges = findTextMatches(this.output.element, this.searchQuery);
+      this.matchCount = this.searchRanges.length;
+      if (this.matchCount === 0) {
+        this.currentMatch = 0;
+      } else if (this.currentMatch >= this.matchCount) {
+        this.currentMatch = this.matchCount - 1;
+      }
+
+      applyHighlights(this.searchRanges, this.matchCount ? this.currentMatch : -1);
+      this.scrollToCurrentMatch();
+    },
+
+    nextMatch: function () {
+      if (this.matchCount === 0) {
+        return;
+      }
+      this.currentMatch = (this.currentMatch + 1) % this.matchCount;
+      applyHighlights(this.searchRanges, this.currentMatch);
+      this.scrollToCurrentMatch();
+    },
+
+    prevMatch: function () {
+      if (this.matchCount === 0) {
+        return;
+      }
+      this.currentMatch = (this.currentMatch - 1 + this.matchCount) % this.matchCount;
+      applyHighlights(this.searchRanges, this.currentMatch);
+      this.scrollToCurrentMatch();
+    },
+
+    scrollToCurrentMatch: function () {
+      const range = this.searchRanges[this.currentMatch];
+      if (!range) {
+        return;
+      }
+      // Pause autoscroll-following while the user navigates matches.
+      this.atBottom = false;
+      const target = range.startContainer.parentElement;
+      if (target && target.scrollIntoView) {
+        target.scrollIntoView({block: 'center', inline: 'nearest'});
+      }
+    },
+
     renderOutputElement: function () {
       if (!this.output || !this.$el) {
         return
@@ -167,9 +296,15 @@ export default {
   beforeUnmount: function () {
     window.removeEventListener('resize', this.revalidateScroll);
     window.clearInterval(this.scrollUpdater);
+    clearHighlights();
   },
 
   watch: {
+    searchQuery: function () {
+      this.currentMatch = 0;
+      this.runSearch();
+    },
+
     outputFormat: {
       immediate: true,
       handler: function () {
@@ -240,6 +375,52 @@ export default {
   color: #768390;
 }
 
+.log-search {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.log-search-input {
+  width: 150px;
+  background: #0d1117;
+  border: 1px solid #30363d;
+  border-radius: 4px;
+  color: #adbac7;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 2px 6px;
+  outline: none;
+}
+
+.log-search-input:focus {
+  border-color: var(--primary-color);
+}
+
+.log-search-count {
+  color: #768390;
+  font-size: 11px;
+  min-width: 34px;
+  text-align: right;
+}
+
+.log-search-btn {
+  cursor: pointer;
+  color: #768390;
+  border-radius: 4px;
+}
+
+.log-search-btn:hover {
+  color: #adbac7;
+  background: #30363d;
+}
+
+.log-search-btn.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 .log-panel-shadow {
   position: absolute;
 
@@ -321,3 +502,16 @@ export default {
 
 
 </style>
+
+<!-- Global: ::highlight() applies to Ranges in the externally-inserted output
+     element, which doesn't carry the scoped-style attribute. -->
+<style>
+::highlight(log-search) {
+  background-color: rgba(255, 214, 0, 0.35);
+}
+
+::highlight(log-search-current) {
+  background-color: #f5b301;
+  color: #0d1117;
+}
+</style>
diff --git a/web-src/src/common/components/terminal/logSearch.js b/web-src/src/common/components/terminal/logSearch.js
new file mode 100644
index 00000000..ef525d8a
--- /dev/null
+++ b/web-src/src/common/components/terminal/logSearch.js
@@ -0,0 +1,87 @@
+/**
+ * Search helpers for the log panel.
+ *
+ * Matching is done over the rendered text nodes of the output element (whatever
+ * the output format produced) and exposed as DOM Ranges, so highlighting can use
+ * the CSS Custom Highlight API without mutating the output DOM — which keeps it
+ * compatible with the live-appending terminal and inline images.
+ */
+
+const HIGHLIGHT_NAME = 'log-search';
+const CURRENT_HIGHLIGHT_NAME = 'log-search-current';
+
+/**
+ * Find every (case-insensitive) occurrence of `query` in the text nodes under
+ * `root` and return them as an array of Ranges, in document order.
+ *
+ * @param {Node} root
+ * @param {string} query
+ * @returns {Range[]}
+ */
+export function findTextMatches(root, query) {
+    const ranges = [];
+    if (!root || !query) {
+        return ranges;
+    }
+
+    const needle = query.toLowerCase();
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
+
+    let node;
+    while ((node = walker.nextNode())) {
+        const haystack = node.nodeValue.toLowerCase();
+        let from = 0;
+        let index;
+        while ((index = haystack.indexOf(needle, from)) !== -1) {
+            const range = document.createRange();
+            range.setStart(node, index);
+            range.setEnd(node, index + needle.length);
+            ranges.push(range);
+            from = index + needle.length;
+        }
+    }
+
+    return ranges;
+}
+
+/** Whether the CSS Custom Highlight API is available in this browser. */
+export function highlightsSupported() {
+    return typeof CSS !== 'undefined'
+        && CSS.highlights
+        && typeof Highlight !== 'undefined';
+}
+
+/**
+ * Register the given ranges as highlights: all matches under one highlight name,
+ * the current match under another so it can be styled distinctly. No-op (safe)
+ * when the API is unavailable.
+ *
+ * @param {Range[]} ranges
+ * @param {number} currentIndex
+ */
+export function applyHighlights(ranges, currentIndex) {
+    if (!highlightsSupported()) {
+        return;
+    }
+
+    clearHighlights();
+
+    if (!ranges || ranges.length === 0) {
+        return;
+    }
+
+    CSS.highlights.set(HIGHLIGHT_NAME, new Highlight(...ranges));
+
+    if (currentIndex >= 0 && currentIndex < ranges.length) {
+        CSS.highlights.set(CURRENT_HIGHLIGHT_NAME, new Highlight(ranges[currentIndex]));
+    }
+}
+
+/** Remove all log-search highlights. Safe when the API is unavailable. */
+export function clearHighlights() {
+    if (!highlightsSupported()) {
+        return;
+    }
+    CSS.highlights.delete(HIGHLIGHT_NAME);
+    CSS.highlights.delete(CURRENT_HIGHLIGHT_NAME);
+}
diff --git a/web-src/tests/unit/common/LogPanel_search_test.js b/web-src/tests/unit/common/LogPanel_search_test.js
new file mode 100644
index 00000000..f37a82d6
--- /dev/null
+++ b/web-src/tests/unit/common/LogPanel_search_test.js
@@ -0,0 +1,87 @@
+'use strict';
+import LogPanel from '@/common/components/log_panel';
+import {mount} from '@vue/test-utils';
+import {attachToDocument} from '../test_utils';
+
+describe('Test LogPanel search', function () {
+    let panel;
+
+    beforeEach(function () {
+        panel = mount(LogPanel, {
+            attachTo: attachToDocument(),
+            props: {outputFormat: 'text'}
+        });
+        panel.vm.appendLog('hello world\nhello again\ngoodbye');
+    });
+
+    afterEach(function () {
+        panel.unmount();
+    });
+
+    it('search is collapsed by default', function () {
+        expect(panel.find('.log-search-input').exists()).toBe(false);
+        expect(panel.vm.searchActive).toBe(false);
+    });
+
+    it('opens the search bar', async function () {
+        panel.vm.openSearch();
+        await panel.vm.$nextTick();
+        expect(panel.vm.searchActive).toBe(true);
+        expect(panel.find('.log-search-input').exists()).toBe(true);
+    });
+
+    it('counts matches and labels the current one', async function () {
+        panel.vm.openSearch();
+        panel.vm.searchQuery = 'hello';
+        await panel.vm.$nextTick();
+
+        expect(panel.vm.matchCount).toBe(2);
+        expect(panel.vm.currentMatch).toBe(0);
+        expect(panel.vm.matchCountLabel).toBe('1/2');
+    });
+
+    it('reports 0/0 for a query with no matches', async function () {
+        panel.vm.openSearch();
+        panel.vm.searchQuery = 'nomatch';
+        await panel.vm.$nextTick();
+
+        expect(panel.vm.matchCount).toBe(0);
+        expect(panel.vm.matchCountLabel).toBe('0/0');
+    });
+
+    it('cycles forward through matches and wraps', async function () {
+        panel.vm.openSearch();
+        panel.vm.searchQuery = 'hello';
+        await panel.vm.$nextTick();
+
+        panel.vm.nextMatch();
+        expect(panel.vm.matchCountLabel).toBe('2/2');
+
+        panel.vm.nextMatch();
+        expect(panel.vm.matchCountLabel).toBe('1/2');
+    });
+
+    it('cycles backward with wrap', async function () {
+        panel.vm.openSearch();
+        panel.vm.searchQuery = 'hello';
+        await panel.vm.$nextTick();
+
+        panel.vm.prevMatch();
+        expect(panel.vm.matchCountLabel).toBe('2/2');
+    });
+
+    it('closing search clears the query and state', async function () {
+        panel.vm.openSearch();
+        panel.vm.searchQuery = 'hello';
+        await panel.vm.$nextTick();
+        expect(panel.vm.matchCount).toBe(2);
+
+        panel.vm.closeSearch();
+        await panel.vm.$nextTick();
+
+        expect(panel.vm.searchActive).toBe(false);
+        expect(panel.vm.searchQuery).toBe('');
+        expect(panel.vm.matchCount).toBe(0);
+        expect(panel.find('.log-search-input').exists()).toBe(false);
+    });
+});
diff --git a/web-src/tests/unit/common/terminal/logSearch_test.js b/web-src/tests/unit/common/terminal/logSearch_test.js
new file mode 100644
index 00000000..5995aa9f
--- /dev/null
+++ b/web-src/tests/unit/common/terminal/logSearch_test.js
@@ -0,0 +1,77 @@
+import {findTextMatches, highlightsSupported, applyHighlights, clearHighlights} from '@/common/components/terminal/logSearch';
+
+function makeElement(html) {
+    const el = document.createElement('div');
+    el.innerHTML = html;
+    document.body.appendChild(el);
+    return el;
+}
+
+describe('logSearch.findTextMatches', function () {
+    let el;
+
+    afterEach(function () {
+        if (el && el.parentNode) {
+            el.parentNode.removeChild(el);
+        }
+        el = null;
+    });
+
+    it('returns no ranges for an empty query', function () {
+        el = makeElement('hello world');
+        expect(findTextMatches(el, '')).toEqual([]);
+    });
+
+    it('returns no ranges for a null root', function () {
+        expect(findTextMatches(null, 'x')).toEqual([]);
+    });
+
+    it('finds a single match', function () {
+        el = makeElement('the quick brown fox');
+        const ranges = findTextMatches(el, 'quick');
+        expect(ranges).toHaveLength(1);
+        expect(ranges[0].toString()).toBe('quick');
+    });
+
+    it('finds multiple matches in one text node', function () {
+        el = makeElement('aXaXa');
+        const ranges = findTextMatches(el, 'a');
+        expect(ranges).toHaveLength(3);
+    });
+
+    it('is case-insensitive', function () {
+        el = makeElement('Error: ERROR error');
+        const ranges = findTextMatches(el, 'error');
+        expect(ranges).toHaveLength(3);
+    });
+
+    it('finds matches across multiple text nodes (e.g. terminal spans)', function () {
+        el = makeElement('<span>foo bar</span><span>bar baz</span>bar');
+        const ranges = findTextMatches(el, 'bar');
+        expect(ranges).toHaveLength(3);
+        ranges.forEach(r => expect(r.toString()).toBe('bar'));
+    });
+
+    it('does not find overlapping matches (advances past each hit)', function () {
+        el = makeElement('aaaa');
+        // "aa" should match at index 0 and 2, not 1 and 3 (non-overlapping)
+        const ranges = findTextMatches(el, 'aa');
+        expect(ranges).toHaveLength(2);
+    });
+
+    it('returns ranges that point at the matched text', function () {
+        el = makeElement('line one\nline two');
+        const ranges = findTextMatches(el, 'two');
+        expect(ranges).toHaveLength(1);
+        expect(ranges[0].toString()).toBe('two');
+    });
+});
+
+describe('logSearch highlight API guards', function () {
+    it('applyHighlights/clearHighlights are no-ops when unsupported', function () {
+        // jsdom has no CSS Custom Highlight API.
+        expect(highlightsSupported()).toBeFalsy();
+        expect(() => applyHighlights([], 0)).not.toThrow();
+        expect(() => clearHighlights()).not.toThrow();
+    });
+});