TL;DR — A client said one search box “blends in.” Fixing it uncovered a debug alert() that had been silently freezing the Knowledge Graph Explorer on every search. We fixed the root cause, made the box obvious, added a clickable grid of real client entities, and then rolled the whole Explorer out to all 12 Spotlight sites — each with examples from its own industry. One comment, twelve tools, and a bug retired.

The one-line request that turned into twelve tools

Dennis looked at localservicespotlight.com/knowledge-graph-explorer/ and said the search box was hard to see — it “blended in.” He also wanted the page to feel less like a wall of text, and asked whether we could put the Explorer on every Spotlight site with examples from each trade.

Simple asks. But the moment we opened the hood, they got more interesting.

Why the search box was invisible (it wasn’t a color choice)

The input was styled with border: 2px solid var(--border-color). That looks fine — except --border-color was never defined on this theme. In CSS, when a var() is undefined, the entire declaration becomes invalid and the property resets to its initial value. So the border didn’t fall back to a default gray; it collapsed to 0px none. The box had no edge at all.

The fix isn’t “pick a darker gray.” It’s to stop depending on a variable that may not exist. We gave the box a self-contained border, a search icon, a rounded edge, and a clear focus ring — literal values that render the same on any theme, which also made the rollout portable.

The bug hiding behind the bug

To test the new box, we ran a search. The tab froze. Then another. Three tabs died before the pattern was obvious — and it wasn’t memory or the network. Reading the plugin’s JavaScript, there it was, left over from a debugging session and shipped to production:

alert('NEW VERSION LOADED! Check console now.');
console.log('FULL API RESPONSE:', response);

A native alert() is a blocking modal. It fired on every successful search — every real visitor got a mystery popup, and the page hung until it was dismissed. We removed the alert() and the stray console.logs at the source (the WordPress Plugin File Editor, with a CodeMirror gotcha: you have to set the editor instance, not the raw textarea) and added a small guard on the page so cached copies of the old script can’t misbehave either. The tool went from freezing to returning clean results with names, types, confidence scores, and KGMIDs.

“Most pages I don’t like to be all text”

So we added a grid of real people whose entities Google already recognizes — Dennis Yu, Nathaniel Stevens, George Leith, Nixon Lee, Dylan Haugen, Cam Hazzard — using their real photos. Every card is a button: tap one and it runs that name through the Explorer so you can see exactly what Google returns. It turns a static page into an invitation to search.

One note for anyone building the same thing: Google’s Knowledge Graph Search API gives you the name, type, description, the panel bio, and the KGMID — but it does not return an image, even for Elon Musk or Nike. If you want faces on the cards, you supply them.

Making it relevant on every Spotlight site

A roofer doesn’t care that Taylor Swift has a Knowledge Panel. They care that GAF and Owens Corning do. So each of the eleven vertical Spotlight sites got its own Explorer page with four recognizable names from that trade — Trane and Carrier for HVAC, Sherwin-Williams and Benjamin Moore for painting, Orkin and Terminix for pest control, Jordan Kilganon and Guy Dupuy for dunking. Search and cards route back to the main Explorer, so there’s one live tool doing the lookups and eleven relevant front doors into it.

What shipped

Search box on the main Knowledge Graph Explorer is now unmistakable.
A debug alert() that froze the tool on every search is gone — searches return clean results.
A clickable grid of real client entities turns the page into a live demo.
The Explorer is live on all 11 vertical Spotlight sites, each with industry-specific examples.

The lesson we keep relearning: the fastest way to find a hidden bug is to take a cosmetic request seriously. “Make the box more visible” ended with a frozen-tool bug retired across the fleet.

How a Hard-to-See Search Box Uncovered a Bug Freezing Our Knowledge Graph Explorer