Conversation
Adds PageVariableAPI and live page-variable read/write on MiAPI, plus the schema/export/validation helpers that the Variables Editor and dev-panel "Reload variables" feature build on.
New /@pp-dev/variables-editor page (Schema + Values tabs), alongside the existing Request Inspector, plus "Reload variables" and "Open variables editor…" buttons in the dev panel's settings popover. Extends the test-commonjs fixture's __template_variables.json to cover every tag_type for manual/e2e testing.
Documents the new Variables Editor and dev-panel buttons in the README, and fixes two stale references: templateLess described as a current public config key (it's 0.x-only, migrated to app.type), and TEMPLATE_VARIABLES.md describing the removed Setup/Export dev-panel flow instead of the Values tab's actual JSON mode.
…, Inspector, and Variables Editor Adds light-theme support to the previously dark-only Request Inspector and Variables Editor, an Auto/Dark/Light switcher for both, then moves the switcher into the dev panel's settings popover as the primary control. All three surfaces share one localStorage key (pp-dev-info-theme) and DOM attribute (data-pp-dev-theme), so a choice made in any of them applies to the others too. Also removes docs/ files planning the (now shipped) 1.0 config rework — no longer needed.
Adds docs/features.md with real screenshots of the dev panel, Request Inspector, and Variables Editor, and links it from the README. Also embeds a few of the same screenshots directly into the relevant README sections and documents the new panel-hosted theme switcher.
… resolves Switching tabs now repaints immediately with whatever's already cached for the target tab, or a skeleton if it's never been loaded, instead of leaving the previous tab's content on screen until the network round-trip completes. The round-trip itself is now debounced (200ms) since it's automatic — the existing manual "Refresh" button stays undebounced for when an immediate reload is actually wanted. A small "Refreshing…" indicator in the toolbar covers the case where cached content is showing while a background reload is in flight.
…ore delete The gear icon that opened a schema row's advanced fields (uid, tag_source, additional_options, editor flags) sat in the far-right actions column, forcing a mouse trip across the whole row for every variable. It's now a chevron at the start of the row, right next to Name, so scanning down a column of rows to check/expand several of them no longer means reaching all the way over each time. Also: deleting a schema or values row no longer happens on a single click — both now go through the existing confirm-modal pattern first.
Picks up all of the above in the built package.
Bumps brace-expansion/ip-address/undici overrides past newly-disclosed vulnerable ranges (root + all 3 fixtures), and adds a js-yaml override in the Next.js fixtures for a CVE published mid-session. Also extends patch-npm-bundled-vulnerabilities.mjs to cover undici (it already patched brace-expansion/ip-address/tar) and to sync the patched versions into package-lock.json — the script only ever rewrote files on disk, so npm audit kept flagging the stale versions it still had recorded in the lockfile. npm audit is clean (0 vulnerabilities) in root and all 3 test fixtures.
🚀 Variables Editor, theme switcher, and dependency security fixes
# [1.2.0-beta.1](v1.1.1-beta.1...v1.2.0-beta.1) (2026-08-07) ### Bug Fixes * address npm audit vulnerabilities in root and test fixtures ([a33aad3](a33aad3)) * Variables Editor — ergonomic advanced-fields toggle, confirm before delete ([6cc96ee](6cc96ee)) * Variables Editor tab switch no longer blanks out until the fetch resolves ([399930d](399930d)) ### Features * add Auto/Dark/Light theme switcher, shared across the dev panel, Inspector, and Variables Editor ([b6f72a6](b6f72a6)) * add page-variables API and schema/export/validation helpers ([36c727e](36c727e)) * add standalone Variables Editor page with dev-panel entry points ([40bc88e](40bc88e))
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (11)
🚧 Files skipped from review as they are similar to previous changes (9)
📝 WalkthroughWalkthroughThe release adds a standalone Variables Editor, page-variable APIs, validation helpers, shared theme controls, reload actions, dependency remediation, tests, and documentation. It also removes obsolete configuration design documents. ChangesVariables Editor release
Estimated code review effort: 5 (Critical) | ~120 minutes Sequence Diagram(s)sequenceDiagram
participant PanelSettings
participant ClientService
participant MiAPI
participant PageVariableAPI
PanelSettings->>ClientService: Send page-variables:reload
ClientService->>MiAPI: Reload page variables
MiAPI->>PageVariableAPI: GET page variables by page_id
PageVariableAPI-->>MiAPI: Return normalized tags
MiAPI-->>ClientService: Return values or skipped status
ClientService-->>PanelSettings: Show reload result
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🧹 Nitpick comments (4)
src/client/assets/css/client.scss (1)
625-655: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd a visible focus style for the new buttons.
Line 337 sets
outline: 0on every descendant of.pp-dev-info. That rule removes the browser default focus ring from these new.pp-dev-info__theme-btnand.pp-dev-info__vars-btncontrols. A keyboard user gets no visible focus indicator inside the settings popover.♿ Proposed addition
.pp-dev-info__theme-btn { padding: 3px 8px; border: 1px solid rgba(34, 34, 34, 0.25); + + &:focus-visible { + outline: 2px solid var(--pp-dev-info-color-primary); + outline-offset: 1px; + }Apply the same
:focus-visibleblock to.pp-dev-info__vars-btn.Also applies to: 685-703
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/client/assets/css/client.scss` around lines 625 - 655, Add a visible :focus-visible style to both .pp-dev-info__theme-btn and .pp-dev-info__vars-btn, compensating for the ancestor outline reset; reuse the same focus-indicator block for each control while preserving their existing hover and active styles.src/client/panel-settings.ts (2)
179-195: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueCollapse the three identical action handlers.
These three blocks differ only in the selector and the hook. A small table removes the repetition and makes a fourth action a one-line addition.
♻️ Proposed refactor
- $popover.querySelector<HTMLButtonElement>('.pp-dev-info__open-editor-btn')?.addEventListener('click', (ev) => { - ev.preventDefault(); - close(); - hooks?.onOpenVariablesEditorClick?.(); - }); - - $popover.querySelector<HTMLButtonElement>('.pp-dev-info__reload-vars-btn')?.addEventListener('click', (ev) => { - ev.preventDefault(); - close(); - hooks?.onReloadVariablesClick?.(); - }); - - $popover.querySelector<HTMLButtonElement>('.pp-dev-info__open-inspector-btn')?.addEventListener('click', (ev) => { - ev.preventDefault(); - close(); - hooks?.onOpenInspectorClick?.(); - }); + const actions: [string, (() => void) | undefined][] = [ + ['.pp-dev-info__open-editor-btn', hooks?.onOpenVariablesEditorClick], + ['.pp-dev-info__reload-vars-btn', hooks?.onReloadVariablesClick], + ['.pp-dev-info__open-inspector-btn', hooks?.onOpenInspectorClick], + ]; + + actions.forEach(([selector, hook]) => { + $popover!.querySelector<HTMLButtonElement>(selector)?.addEventListener('click', (ev) => { + ev.preventDefault(); + close(); + hook?.(); + }); + });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/client/panel-settings.ts` around lines 179 - 195, Refactor the three action handlers in the popover setup into a small selector-to-hook mapping and register them through one shared iteration. Preserve the existing preventDefault, close, and optional hook-callback behavior while keeping each current selector paired with its corresponding hook.
60-70: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAssociate the group labels with their button groups.
The
<span>Theme</span>at Line 61 and<span>Dev tools</span>at Line 66 are plain text. A screen reader announces each button without its group context. Addrole="group"andaria-labelto the containers.♿ Proposed fix
<div class="pp-dev-info__settings-row"> <span class="pp-dev-info__settings-label">Theme</span> - <div class="pp-dev-info__theme-grid">${themeButtons}</div> + <div class="pp-dev-info__theme-grid" role="group" aria-label="Theme">${themeButtons}</div> </div>Apply the same change to the page-variables group at Line 38 and the dev-tools group at Line 67.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/client/panel-settings.ts` around lines 60 - 70, Update the theme, page-variables, and dev-tools button-group containers in the panel markup to use role="group" with matching aria-label values for their visible group labels, including the containers around themeButtons, pageVariablesRow, and the inspector button. Preserve the existing layout and button content.src/client/index.ts (1)
508-542: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winAdd feedback for a reload that never returns a response.
startReloadVariablesFlowsendspage-variables:reloadand returns. The popover closes immediately. No popup appears until the server replies. If the message is lost or the server handler throws before it responds, the user sees no result and no error.Show a pending popup on send and dismiss it when the response arrives.
infoPopupnow returns aclosehandle (Line 240), so this is straightforward.♻️ Proposed refactor
+ let pendingReloadPopup: { close: () => void } | null = null; + hot.on('page-variables:reload:response', (payload: PageVariablesReloadResponsePayload) => { + pendingReloadPopup?.close(); + pendingReloadPopup = null; + if ('error' in payload) {startReloadVariablesFlow = () => { + pendingReloadPopup?.close(); + pendingReloadPopup = infoPopup({ + title: 'Reloading variables', + content: 'Refetching live values from MI…', + type: 'info', + duration: 0, + }); hot.send('page-variables:reload', {}); };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/client/index.ts` around lines 508 - 542, Update startReloadVariablesFlow to show a pending infoPopup immediately after sending page-variables:reload, retain the returned close handle, and invoke it at the beginning of the page-variables:reload:response handler before displaying success, skipped, or error feedback. Ensure the pending popup is dismissed when a response arrives while preserving all existing response-specific messages.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@CHANGELOG.md`:
- Around line 1-4: Change the new release heading for 1.2.0-beta.1 from H1 to H2
so it matches the previous release heading hierarchy and allows the existing Bug
Fixes H3 subsection to remain consistent.
In `@package.json`:
- Around line 178-179: Update the package.json files list to include
docs/features.md and docs/screenshots/*.png so these targets are included in
published packages, while preserving the existing README.md links and other file
entries.
In `@scripts/patch-npm-bundled-vulnerabilities.mjs`:
- Around line 14-16: Update replaceDir and the update loop to fail closed when a
required dependency patch cannot be applied: resolve each package’s actual
installed source path instead of assuming node_modules/$name, and throw an error
identifying the package and destination when npmRoot or the destination parent
is missing. Only continue silently for picomatch when its absence is
intentionally optional; otherwise do not skip null results.
In `@src/client/assets/css/client.scss`:
- Around line 366-372: In src/client/assets/css/client.scss lines 366-372,
within the &__section::after media-query rules, add an
html[data-pp-dev-theme='light'] & override restoring rgba(34, 34, 34, 0.24);
make the same change in lines 928-934 within the &__sep media-query rules so
explicit Light selection overrides the OS-dark preference at both divider sites.
- Around line 59-71: Remove the empty line immediately before the
$pp-dev-dark-colors declaration to satisfy the
scss/dollar-variable-empty-line-before Stylelint rule, leaving the color map and
surrounding variable declarations unchanged.
- Around line 991-1035: Fix the dark-theme SCSS by defining a reusable
pp-dev-dark-tints mixin alongside pp-dev-theme-colors containing the shared
button and settings-group overrides. Merge the duplicate
html[data-pp-dev-theme='dark'] selectors, include the tint mixin once there, and
include it in the prefers-color-scheme media query; remove the redundant &
wrapper while preserving the palette include and dark-theme behavior.
In `@src/client/index.html`:
- Line 7: Update the templateLess handling in transformIndexHtml and
renderDevPanelMarkup to apply the same boolean fallback used by
src/lib/dev-panel.ts when the client-injection configuration omits it. Ensure
the value passed to src/client/index.html through data-template-less is always
normalized to that fallback boolean, preserving existing explicitly configured
values.
In `@src/lib/pp.middleware.ts`:
- Around line 402-408: Guard both getLivePageVariables and applyPageVariables
against an undefined this.appId by throwing the same clear error used by
reloadPageVariables before making API requests; then assign pageId from
this.appId without the non-null assertion. Apply this in
src/lib/pp.middleware.ts at lines 402-408 and 424-432.
In `@src/lib/request-inspector.ts`:
- Around line 319-323: Update the theme switcher markup and applyTheme logic in
src/lib/request-inspector.ts at lines 319-323 and 392-398, and
src/lib/variables-editor.ts at lines 400-404 and 437-441: add
aria-pressed="false" to every data-theme-choice button, then synchronize each
button’s aria-pressed value with whether its dataset theme matches the active
theme, alongside the existing active-class update.
In `@src/lib/variables-editor.ts`:
- Around line 1469-1497: Update the fieldsHtml mapping around colName so every
inline handler uses a safely escaped column name for its embedded JavaScript
string and HTML-attribute context. Apply the same escaped value consistently in
the color, select/multi-select, file, and default textarea branches, while
retaining escapeHtml(colName) for visible labels.
In `@src/plugin.ts`:
- Around line 634-641: Replace the unfiltered
server.middlewares.use(internalServer) mount with the same path-filtered wrapper
pattern used for the inspector, limiting internalServer—including its global
body parsers—to VARIABLES_EDITOR_PATH and the /@api/variables/* routes while
preserving proxying for matching requests.
---
Nitpick comments:
In `@src/client/assets/css/client.scss`:
- Around line 625-655: Add a visible :focus-visible style to both
.pp-dev-info__theme-btn and .pp-dev-info__vars-btn, compensating for the
ancestor outline reset; reuse the same focus-indicator block for each control
while preserving their existing hover and active styles.
In `@src/client/index.ts`:
- Around line 508-542: Update startReloadVariablesFlow to show a pending
infoPopup immediately after sending page-variables:reload, retain the returned
close handle, and invoke it at the beginning of the
page-variables:reload:response handler before displaying success, skipped, or
error feedback. Ensure the pending popup is dismissed when a response arrives
while preserving all existing response-specific messages.
In `@src/client/panel-settings.ts`:
- Around line 179-195: Refactor the three action handlers in the popover setup
into a small selector-to-hook mapping and register them through one shared
iteration. Preserve the existing preventDefault, close, and optional
hook-callback behavior while keeping each current selector paired with its
corresponding hook.
- Around line 60-70: Update the theme, page-variables, and dev-tools
button-group containers in the panel markup to use role="group" with matching
aria-label values for their visible group labels, including the containers
around themeButtons, pageVariablesRow, and the inspector button. Preserve the
existing layout and button content.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 535fddb3-a1ca-4aed-b1ce-b1a2798baa26
⛔ Files ignored due to path filters (16)
docs/screenshots/01-panel-expanded.pngis excluded by!**/*.pngdocs/screenshots/02-panel-minimized.pngis excluded by!**/*.pngdocs/screenshots/03-panel-settings.pngis excluded by!**/*.pngdocs/screenshots/04-inspector-list.pngis excluded by!**/*.pngdocs/screenshots/05-inspector-detail.pngis excluded by!**/*.pngdocs/screenshots/06-editor-schema.pngis excluded by!**/*.pngdocs/screenshots/07-editor-schema-advanced.pngis excluded by!**/*.pngdocs/screenshots/08-editor-schema-help-modal.pngis excluded by!**/*.pngdocs/screenshots/09-editor-values.pngis excluded by!**/*.pngdocs/screenshots/10-editor-values-json.pngis excluded by!**/*.pngdocs/screenshots/11-editor-theme-light.pngis excluded by!**/*.pngdocs/screenshots/12-editor-theme-dark.pngis excluded by!**/*.pngpackage-lock.jsonis excluded by!**/package-lock.jsontests/test-commonjs/package-lock.jsonis excluded by!**/package-lock.jsontests/test-nextjs-cjs/package-lock.jsonis excluded by!**/package-lock.jsontests/test-nextjs/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (35)
CHANGELOG.mdREADME.mdTEMPLATE_VARIABLES.mddocs/features.mddocs/pp-dev-1.0-plan.mddocs/pp-dev-config-1.0-canvas.mddocs/pp-dev-config-1.0-design-notes.mdpackage.jsonscripts/patch-npm-bundled-vulnerabilities.mjssrc/api/index.tssrc/api/page-variable.tssrc/cli.tssrc/client/assets/css/client.scsssrc/client/index.htmlsrc/client/index.tssrc/client/panel-settings.tssrc/client/storage.tssrc/client/theme.tssrc/lib/client.service.tssrc/lib/dist.service.tssrc/lib/page-variables-diff.tssrc/lib/pp.middleware.tssrc/lib/request-inspector.tssrc/lib/variables-editor.tssrc/plugin.tstests/test-commonjs/package.jsontests/test-commonjs/public/__template_variables.jsontests/test-nextjs-cjs/package.jsontests/test-nextjs/package.jsontests/unit/api/page-variable.spec.tstests/unit/client/panel-settings.spec.tstests/unit/lib/client.service.spec.tstests/unit/lib/dist.service.template-variables.spec.tstests/unit/lib/page-variables-diff.spec.tstests/unit/lib/variables-editor.spec.ts
💤 Files with no reviewable changes (3)
- docs/pp-dev-1.0-plan.md
- docs/pp-dev-config-1.0-design-notes.md
- docs/pp-dev-config-1.0-canvas.md
Fixes a stored-XSS in the Variables Editor's list-column widgets (unescaped column name breaking out of inline event-handler attributes), scopes the Variables Editor's internal Express app to its own routes instead of running its body parsers for every request, guards two page-variable API calls against a not-yet-known appId, adds missing docs to the published npm package, fails the postinstall patch script closed instead of silently skipping a required vulnerability patch, restores explicit Light-theme overrides for two dividers, dedupes the dark-theme SCSS, and adds aria-pressed/ focus-visible/role=group accessibility bits to the theme switcher and settings popover.
# [1.2.0-beta.2](v1.2.0-beta.1...v1.2.0-beta.2) (2026-08-07) ### Bug Fixes * address CodeRabbit review feedback on PR [#227](#227) ([3f64e42](3f64e42))
Sadilenko
approved these changes
Aug 7, 2026
MaksymovVolodymyr
approved these changes
Aug 7, 2026
This was referenced Aug 7, 2026
4 tasks
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
4 participants
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.
🚀 Variables Editor, Theme Switcher & Dependency Cleanup
Summary
Merges
developintomain, bringing the new standalone Variables Editor page, a shared Auto/Dark/Light theme switcher, page-variables API/schema/export tooling, documentation updates (including a screenshot feature tour), and a round of dependency/security fixes across the root package and all test fixtures.Key changes
src/lib/variables-editor.ts) with dev-panel entry points for editing template/page variables directly from the dev panel.src/api/page-variable.tsplus schema/export/validation helpers (src/lib/page-variables-diff.ts).src/client/theme.ts), shared across the dev panel, Inspector, and Variables Editor.npm auditfindings in root and alltests/*fixtures; reinstalledpp-devin test fixtures to pick up the patched dependency tree.docs/pp-dev-1.0-plan.md,docs/pp-dev-config-1.0-canvas.md,docs/pp-dev-config-1.0-design-notes.md); addeddocs/features.md,TEMPLATE_VARIABLES.md, and a screenshot feature tour linked fromREADME.md.Stats
51 files changed, 4440 insertions(+), 895 deletions(-)
Included commits
Testing
npm run test(unit + integration)npm run audit:all(root + alltests/*fixtures)Merge Request:
origin/develop→origin/mainSummary by CodeRabbit
New Features
Bug Fixes
Documentation