[Website] Turn the Logs pane into a PHP error log - #4122
Merged
Conversation
The Logs panel used to render each logger string as one blob of monospace text. PHP logs arrive as whole debug.log chunks, so a single WordPress database error dump (REPLACE INTO with serialized rewrite rules) turned the whole panel into an unreadable wall of text. Parse every logger string into individual timestamped records and render one row per record with a severity badge (Notice, Warning, Fatal error, Database error, Crash), its source channel (PHP, WordPress, Playground), and the time. Records longer than six lines clamp with a "Show all N lines" toggle, so one giant entry can no longer swallow the panel. The toolbar gains severity filter chips with live counts, search-term highlighting in message bodies (replacing the old Error:/Fatal: token highlighter, whose job the badges now do), a per-entry copy button, and a Copy logs action. The search and filters stick to the top of the scrolling list. The Logs pane also widens from 600px to 860px via a new pane-wide variant, mirrored in the dock positioning math so edge clamping stays correct, and pins its header while the tool body scrolls internally — the only scrollport the sticky toolbar can reliably track. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
adamziel
requested review from
a team,
ashfame and
Copilot
and removed request for
Copilot
July 20, 2026 16:30
PHP and WordPress records are not actually distinguishable: a PHP Notice head only means the engine formatted the line — what raised it is almost always WordPress core, a plugin, or a theme — and a bare error_log() line carries no author at all. The split was inferred from formatting, not knowledge. Keep the one distinction the log text really supports: PHP for everything the site's runtime writes to debug.log (including WordPress database errors, which keep their badge), Playground for messages from the JavaScript host. Update the empty-state legend and pane description to match. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
adamziel
added a commit
to articles-adamziel-com/wordpress-playground
that referenced
this pull request
Jul 20, 2026
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Redesigns the Logs panel to parse raw logger strings into structured records and renders a scannable, filterable list with per-entry actions and long-message clamping.
Changes:
- Added log record parsing (
parseLogs) with severity/channel extraction and unit tests. - Replaced token-based highlighting with search-term highlighting and tests.
- Updated dock/pane layout to support a wider Logs pane and sticky toolbar + internal scroll.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/playground/website/src/components/log-modal/style.module.css | New toolbar, list row layout, badges, clamp/toggle, copy button styling for parsed records UI |
| packages/playground/website/src/components/log-modal/log-parsing.ts | Introduces record parsing for debug.log chunks and formatted logger lines |
| packages/playground/website/src/components/log-modal/log-parsing.spec.ts | Adds unit tests validating splitting/parsing behavior and tiers |
| packages/playground/website/src/components/log-modal/log-highlights.ts | Replaces severity-token highlighting with search-term highlighting |
| packages/playground/website/src/components/log-modal/log-highlights.spec.ts | Updates tests for new search highlighting behavior |
| packages/playground/website/src/components/log-modal/index.tsx | Reworks Logs UI: filters, search, parsed entry list, clamp/expand, copy actions |
| packages/playground/website/src/components/dock/style.module.css | Adds .pane-wide variant and internal scrolling behavior for Logs pane |
| packages/playground/website/src/components/dock/dock.tsx | Applies wide pane variant for logs section and updates logs description |
| packages/playground/website/src/components/dock/dock-positioning.ts | Updates positioning math to account for wide pane width |
| packages/playground/website/src/components/dock/dock-positioning.spec.ts | Extends tests for wide pane center clamping |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Three refinements from review: The variable-width severity pill made the channel after it impossible to scan. Put the channel first — a two-value, fixed-width column — so both it and every badge start at the same x. Playground host messages are noise for most debugging sessions. The Dock pane now hides them until a divider-separated "Playground" chip (with a live count) turns them back on; the empty state offers the same reveal when hidden entries are all there is. The error-report modal keeps showing everything — a WASM crash is a Playground entry, and hiding it would hide the crash itself. Collapsing a long record no longer requires scrolling to its end: "Show less" sticks to the bottom of the scrollport while the expanded entry is in view, and collapsing scrolls the entry back into view. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
adamziel
added a commit
to articles-adamziel-com/wordpress-playground
that referenced
this pull request
Jul 20, 2026
The previous row scattered its metadata: a variable-width severity pill, a channel column, and a far-right timestamp spread across the pane, with color used freely enough that nothing stood out. Every row is now a fixed grid: severity and time in one 96px rail, the message beside it, a hover-reveal copy slot at the end. Severity is a small tinted word instead of a filled pill, so red and amber appear only where they mean something and the message is the dominant element. Rows share one baseline and one spacing rhythm; the rail folds inline on phones. PHP rows drop their redundant channel label — only Playground rows carry a tag. The filter row is complete and stable: every severity chip is always present with a live count, dimming at zero instead of disappearing, and the Playground toggle sits behind a divider as a second dimension. The active chip fills with a warm neutral instead of near-black, and the search field no longer autofocuses, so opening the pane doesn't lead with a loud focus ring. Blue is reserved for actions. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
adamziel
added a commit
to articles-adamziel-com/wordpress-playground
that referenced
this pull request
Jul 20, 2026
"Deprecated" reads like editorial commentary; E_DEPRECATED is the name PHP gives the level and the one developers configure, grep for, and google. Map the debug.log heads to their constants — E_ERROR, E_PARSE, E_WARNING, E_DEPRECATED, E_NOTICE, E_STRICT, E_RECOVERABLE_ERROR. PHP prints the same string for the E_USER_* and E_CORE_* variants, so the base constant is as precise as the log text allows; heads outside PHP's own vocabulary keep their verbatim text rather than a guessed constant. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
adamziel
added a commit
to articles-adamziel-com/wordpress-playground
that referenced
this pull request
Jul 20, 2026
The parser was slicing the timestamp and severity head out of every record before display, so the panel showed a rewritten version of the log line instead of what debug.log actually contains. Parsing is now read-only: it still splits chunks into records and derives the rail label, tier, channel, and timestamp, but the record text is rendered and copied exactly as logged. The stripped-down message field is gone. This also aligns search highlighting with the search filter: both now operate on the same raw text, so matching a severity head highlights it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The pane now shows what PHP wrote, with severity read in place rather than restated beside it. Parsing lifts the leading [stamp] — only when it matches debug.log's exact format — and displays it above the record; the "PHP Notice:" style head stays in the text and is tinted instead of being mapped to an E_* rail label. With the metadata rail gone, the message gets the pane's full width. Records from the Playground host (JavaScript, WASM crashes) are no longer displayed anywhere, and the channel toggle went with them. The pane is titled "PHP error log". Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Show "Copied" only after the clipboard write succeeds - Add the missing --accent-link fallback to .log-clear-search - Correct the LogEntry.raw docstring: records are trimmed of surrounding whitespace Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Docstrings for parseLogs, parseLogRecord, and phpTier describing the two shapes of logger strings, the record-splitting model, the classification order, and the preserve-the-record guarantee; plus short notes on the stamp and database-error patterns. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The Dock's Logs pane is now a PHP error log: one record per row, shown exactly as PHP wrote it. It used to render each logger string as one monospace blob — and PHP logs arrive as whole
debug.logchunks carrying many records, so a single database error dump filled the entire panel.The pane splits chunks into records and stops there:
[20-Jul-2026 14:59:46 UTC]stamp moves above the record — only when it matches debug.log's exact format. Anything else stays in the text.PHP Warning:head stays in the line and gets a color: red for errors, amber for warnings, muted for notices. No badge, no label, no rewording.Records longer than six lines clamp behind "Show all 31 lines"; while one is expanded, "Show less" rides the bottom of the viewport so collapsing never needs a long scroll. Severity chips and text search filter the list. The pane grew from 600px to 860px.
Messages from the Playground app itself (JavaScript errors, WASM crashes) no longer show here — before, they were interleaved with the site's output. This also applies to the crash-report modal, which renders the same list.
Earlier revisions of this PR tried severity badges, then an
E_DEPRECATED-style rail beside each message. Both restated what the line already says, and the parsing behind them kept corrupting the line itself. The same goes for a "PHP" vs "WordPress" source split: the log text doesn't say who raised what, so the panel no longer pretends to know. Preserving the line and reading severity in place is the whole design.Testing
Open the Logs tool in the Dock and use the site until something logs — a plugin notice or a deprecation will do. Each record should read exactly like its debug.log line, timestamp above, severity head colored. Search for a word, toggle the severity chips, expand and collapse the long record, and copy an entry: the clipboard gets the raw line, stamp included.
No public API changes; everything is inside the website package.