feat(dashboard): sticky search bar with GitHub syntax for workflow definitions

[Copilot]

The Workflows tab had no way to filter definitions — with large workflow lists, finding a specific workflow required manually scanning. Adds a sticky, localStorage-persisted search bar supporting GitHub-style qualifier syntax.

Search syntax

Qualifiers are AND-combined; bare terms match across all fields:

Query	Matches
claude	name, engine, or label containing "claude"
name:ci-doctor	workflow name contains "ci-doctor"
engine:claude	engine_id contains "claude"
label:production	any label contains "production"
engine:claude label:prod	both conditions must hold

Unknown qualifiers fall back to text search on the value. All matching is case-insensitive.

Changes

• src/app.ts

  • parseDefinitionsSearch(query) — tokenises query into typed SearchTerm[]; handles quoted values (label:"my tag")
  • matchesDefinitionSearch(definition, query) — applies terms against workflow, engine_id, labels
  • definitionsSearch state — initialised from localStorage at component creation time so queries survive reloads
  • applyDefinitionsSearch() — persists to localStorage, resets to page 1
  • loadDefinitionPage() — now paginates filteredDefinitions() instead of raw definitions

• web/index.html — sticky search bar between Box-header and scroll area; "Clear" button when active; header counter shows 3 / 12 format when filtered; empty-state message adapts to indicate no search matches vs no workflows installed

• web/styles.css — .awd-search-bar with position: sticky; top: 0; z-index: 2

[pelikhan]

@copilot move search related code to search.ts

[Copilot]

Done — DEFINITIONS_SEARCH_KEY, SearchTerm, parseDefinitionsSearch, and matchesDefinitionSearch have been moved to src/search.ts, and app.ts now imports from it. Committed in the latest push.

[github-actions]

🧠 Matt Pocock Skills Reviewer failed during the skills-based review.

[github-actions]

✅ Test Quality Sentinel completed test quality analysis.

No test files were added or modified in this PR. Test Quality Sentinel skipped. The PR only changes dashboard UI files: app.ts, app.js, index.html, and styles.css.

[github-actions]

✅ PR Code Quality Reviewer completed the code quality review.

[github-actions]

✅ Design Decision Gate 🏗️ completed the design decision gate check.

No ADR enforcement needed: PR does not have the 'implementation' label and has ≤100 new lines of code in business logic directories.

[Copilot]

Pull request overview

Adds a persistent, qualifier-aware search experience to the Agentic Workflows Dashboard “Workflow definitions” view to make large definition lists easier to navigate, including UI updates and filtering/pagination integration.

Changes:

• Introduces parsing + matching logic for GitHub-style qualifier queries (name:, engine:, label:) and applies filtering before pagination.
• Adds a sticky search bar UI with a “Clear” affordance, plus a filtered counter display and updated empty-state messaging.
• Persists the definitions search query via localStorage to survive reloads.

Show a summary per file

File	Description
.github/extensions/agentic-workflows-dashboard/src/app.ts	Adds definitions search parsing/matching, filtering, pagination integration, and localStorage persistence.
.github/extensions/agentic-workflows-dashboard/web/index.html	Adds the search bar UI, filtered counter formatting, and revised empty-state messaging.
.github/extensions/agentic-workflows-dashboard/web/styles.css	Styles the new sticky search bar container.
.github/extensions/agentic-workflows-dashboard/web/app.js	Updates the generated/bundled dashboard script to include the new search behavior.

Review details

Tip

Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

• Files reviewed: 4/4 changed files
• Comments generated: 4
• Review effort level: Low

[github-actions]

Review: sticky search bar for workflow definitions

The feature is well-designed — localStorage persistence, x-cloak on the counter/clear button, and graceful try/catch around storage access are all the right calls. Three non-blocking suggestions inline:

Summary of findings

#	File	Severity	Issue
1	src/app.ts line 18-19	Low	Misleading comment for match[2]; .replace() is dead code
2	web/index.html line 119	Low	Empty-state inner <span> elements lack x-cloak (brief double-flash)
3	web/index.html line 90	Low	localStorage.setItem fires on every keystroke; suggest .debounce.300ms

None of these block merging — the core logic is correct and the UX is a clear improvement over no search at all.

🧵 Reviewed using Impeccable skills by Impeccable Skills Reviewer · 62.9 AIC · ⌖ 9.08 AIC · ⊞ 4.9K

[github-actions]

The comment on the previous line says match[2]: unquoted value, but when the quoted branch of the regex matches, match[2] is actually the full quoted string (e.g. "foo bar" with quotes included). match[3] is the content inside the quotes, so the ?? chain correctly prefers it.

As a consequence, the .replace(/^"|"$/g, "") on this line is effectively dead code — match[3] is already quote-free, and a bare unquoted match[2] won't have surrounding quotes to strip.

Suggested fix:

// match[3] = content inside quotes; match[2] = full value (quoted or bare)
const rawValue = match[3] ?? match[2] ?? "";
const value = rawValue.toLowerCase();

@copilot please address this.

[github-actions]

Both inner <span> elements lack x-cloak, so during Alpine's initialization phase they are both briefly visible together — the user sees both messages stacked for a flash.

Add x-cloak to each span so Alpine hides them until it has evaluated the x-show conditions:

<span x-cloak x-show="!definitionsSearch">No workflow definitions found. Run <code>make build</code> then open this canvas again.</span><span x-cloak x-show="definitionsSearch">No workflows match your search.</span>

@copilot please address this.

[github-actions]

applyDefinitionsSearch() calls localStorage.setItem on every keystroke. For a search box that will be typed into rapidly this means many synchronous writes — localStorage writes block the main thread.

Use Alpine's built-in debounce modifier to throttle:

`@input`.debounce.300ms="applyDefinitionsSearch()"

This persists the last value after 300 ms of idle time instead of on every character.

@copilot please address this.

[github-actions]

REQUEST_CHANGES — Three medium issues need fixing before merge: redundant parse-per-definition, missing debounce, and tab counter inconsistency. One low-severity dead-code cleanup is also flagged.

### Blocking themes

Performance — query reparsed per definition (medium)
matchesDefinitionSearch calls parseDefinitionsSearch inside a .filter() loop, so the regex tokenizer runs once per workflow definition instead of once per search query. Combined with the un-debounced @input, this creates O(N × keystrokes) work where O(1 × keystrokes + N) is correct. Fixable by hoisting parseDefinitionsSearch into filteredDefinitions().

Input handling — no debounce (medium)
@input fires applyDefinitionsSearch() synchronously on every character, triggering a localStorage write + full filter + paginate on each keystroke. Alpine 3's @input.debounce.200ms modifier fixes this with one word change.

UX correctness — tab badge out of sync (medium)
tabCount returns this.definitions.length regardless of active search. A user who filters down to 3 of 12 workflows sees "12" on the tab badge but "3 / 12" in the header — the counts disagree about what's currently shown.

Dead code — rawValue.replace(...) (low)
The replace is always a no-op given the regex group semantics. Should be removed to avoid misleading future readers.

Warning

Firewall blocked 1 domain

The following domain was blocked by the firewall during workflow execution:

• patchdiff.githubusercontent.com

To allow these domains, add them to the network.allowed list in your workflow frontmatter:

network:
  allowed:
    - defaults
    - "patchdiff.githubusercontent.com"

See Network Configuration for more information.

🔎 Code quality review by PR Code Quality Reviewer · 84.4 AIC · ⌖ 7.76 AIC · ⊞ 5.2K
_{Comment /review to run again}

Comments that could not be inline-anchored

.github/extensions/agentic-workflows-dashboard/src/app.ts:35

parseDefinitionsSearch runs once per definition, not once per query — this makes filteredDefinitions() O(N × parse) when it should be O(parse + N × match), causing avoidable UI jank as the definitions list grows.

<details>
<summary>💡 Suggested fix</summary>

Hoist the parse out of matchesDefinitionSearch and into filteredDefinitions(), then pass the already-parsed terms:

function matchesDefinitionTerms(definition: WorkflowDefinition, terms: SearchTerm[]): boolean {
  const …

</details>

<details><summary>.github/extensions/agentic-workflows-dashboard/web/index.html:90</summary>

**No debounce on search input causes a localStorage write + full re-filter on every keystroke** — `applyDefinitionsSearch()` is synchronous, writes to `localStorage`, then calls `loadDefinitionPage(1)`, which re-filters all definitions. Rapid typing fires this work for each character without any delay.

&lt;details&gt;
&lt;summary&gt;💡 Suggested fix&lt;/summary&gt;

Alpine 3 ships a native debounce event modifier — use it:

```html
`@input`.debounce.200ms=&quot;applyDefinitionsSearch()&quot;

This single change batch…

.github/extensions/agentic-workflows-dashboard/src/app.ts:454

tabCount returns unfiltered definitions.length while the inline counter shows the filtered count — when a search is active, the tab badge shows the total definition count but the box header shows filtered / total. This inconsistency will confuse users who see "12" on the tab but "3 / 12" inside the panel.

<details>
<summary>💡 Suggested fix</summary>

tabCount(tab) {
  if (tab.counter === "definitions") {
    return this.definitionsSearch ? this.filteredDefinitions().length : t…

</details>

<details><summary>.github/extensions/agentic-workflows-dashboard/src/app.ts:19</summary>

**`rawValue.replace(/^&quot;|&quot;$/g, &quot;&quot;)` is dead code** — `match[3]` already holds the unquoted inner content of a quoted string, and `match[2]` for an unquoted token has no surrounding quotes. The replace never strips anything and implies quote-handling coverage that isn&#39;t actually tested.

&lt;details&gt;
&lt;summary&gt;💡 Suggested simplification&lt;/summary&gt;

Given the regex groups:
- `label:&quot;my tag&quot;` → `match[3]` = `my tag` (no quotes) → replace is a no-op
- `engine:claude` → `match[2]` = `claude` (no quotes) …

</details>