Add ability to show or hide other panels

[tysonthomas9]

Summary by CodeRabbit

Release Notes

• New Features
  • Introduced a "Panel Visibility" toggle in Advanced Settings, enabling users to display only the AI Chat panel
  • User preference persists across sessions and applies immediately upon activation

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[claude]

Claude finished @tysonthomas9's task —— View job

---

Code Review for PR: Add ability to show or hide other panels

Todo List:

• Read repository guidelines (CLAUDE.md)
• Analyze SettingsDialog.ts changes
• Review constants.ts modifications
• Examine styles.ts updates
• Check InspectorView.ts changes
• Review ViewRegistration.ts modifications
• Assess code quality and best practices
• Check for potential bugs and security issues
• Evaluate performance considerations
• Review test coverage implications
• Provide final review feedback

Analysis Summary

This PR implements a panel filter feature that allows users to show only the AI Chat panel in DevTools or display all standard panels. Here are my findings:

✅ Code Quality & Best Practices

Positive aspects:

• Good separation of concerns: New panel filter functionality is cleanly integrated into existing settings system
• Consistent code style: Follows existing patterns and conventions in the codebase
• Proper state management: Uses localStorage with clear constant keys
• Good UX: Includes helpful hint text and immediate reload for setting changes

Areas for improvement:

• Default value logic could be clearer: The double-negative logic localStorage.getItem('ai_chat_panel_filter_enabled') !== 'false' in multiple files is confusing

🔍 Potential Issues

Minor concerns:

1. Inconsistent default handling:

   • InspectorView.ts:261 treats missing key as true
   • ViewRegistration.ts:166 treats missing key as true
   • SettingsDialog.ts:512 treats missing key as true
   • This is correct behavior but the logic is hard to follow

2. No error handling: The Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload()) call in SettingsDialog.ts:528 doesn't handle potential failures

⚡ Performance Considerations

• Minimal impact: The localStorage checks are lightweight and only performed during initialization
• Good filtering approach: Views are filtered at registration time rather than at runtime, which is efficient

🔒 Security Analysis

• No security concerns identified: The implementation only uses localStorage for UI preferences and doesn't expose sensitive data

🧪 Test Coverage

Missing test coverage:

• No tests for the new panel filter functionality
• Should consider adding tests for:
  • Panel filtering behavior in ViewRegistration.ts
  • Settings dialog toggle functionality
  • Tab bar visibility logic in InspectorView.ts

📝 Detailed File Analysis

constants.ts:57 - ✅ Clean addition of new storage key

styles.ts:376-380 - ✅ Appropriate CSS styles for panel filter section

SettingsDialog.ts:494-529 - ⚠️ Areas for improvement:

• Consider extracting the reload logic into a separate function
• The checkbox checked state logic is correct but could be more readable

InspectorView.ts:260-264 - ✅ Clean implementation of tab bar hiding

ViewRegistration.ts:165-170 - ✅ Efficient early filtering of panel registrations

🚀 Recommendations

1. Improve readability by extracting the default value logic:

   function isPanelFilterEnabled(): boolean {
     return localStorage.getItem(PANEL_FILTER_ENABLED_KEY) !== 'false';
   }

2. Add error handling for the DevTools reload operation

3. Consider adding tests for the new functionality

4. Add JSDoc comments for the new panel filtering logic

Summary

This is a solid implementation of a useful feature. The code follows good practices and integrates well with the existing architecture. The main improvements needed are enhanced readability of the default value logic and better error handling.

Overall Assessment: ✅ Approved with minor suggestions

The feature works as intended - when enabled (default), it shows only the AI Chat panel; when disabled, it shows all standard DevTools panels. The implementation correctly requires a DevTools reload to apply changes, which is appropriate given the low-level nature of panel registration.

---

[coderabbitai]

Walkthrough

Introduces a "Panel Visibility" toggle in AI Chat settings that allows users to filter the DevTools interface to show only the AI Chat panel. The setting persists in localStorage and is read by view registration and inspector components to conditionally hide other panels.

Changes

Cohort / File(s)	Summary
Settings UI & Persistence front_end/panels/ai_chat/ui/SettingsDialog.ts, front_end/panels/ai_chat/ui/settings/constants.ts	Added "Panel Visibility" toggle within Advanced Settings that persists to localStorage under PANEL_FILTER_ENABLED_KEY and triggers a DevTools reload when toggled. Exported new localStorage key constant.
Styling front_end/panels/ai_chat/ui/settings/utils/styles.ts	Added new .panel-filter-section CSS class with margin, padding, and border styling to style the toggle section.
Panel Filtering Logic front_end/ui/legacy/InspectorView.ts, front_end/ui/legacy/ViewRegistration.ts	Modified panel visibility control: InspectorView now conditionally hides the main tab header based on localStorage flag; ViewRegistration filters panel registration to block non-AI Chat panels when filter is enabled.

Sequence Diagram

sequenceDiagram
    actor User
    participant SettingsDialog
    participant localStorage
    participant InspectorView
    participant ViewRegistration
    
    User->>SettingsDialog: Toggle "Panel Visibility"
    SettingsDialog->>localStorage: Write PANEL_FILTER_ENABLED_KEY
    SettingsDialog->>InspectorView: Reload via Host.InspectorFrontendHost
    
    InspectorView->>localStorage: Read PANEL_FILTER_ENABLED_KEY
    alt Filter Enabled
        InspectorView->>InspectorView: Hide main tab header (display: none)
    else Filter Disabled
        InspectorView->>InspectorView: Show main tab header
    end
    
    ViewRegistration->>localStorage: Read PANEL_FILTER_ENABLED_KEY
    alt Filter Enabled
        ViewRegistration->>ViewRegistration: Block panel registration<br/>(except ai-chat)
    else Filter Disabled
        ViewRegistration->>ViewRegistration: Allow all panel registration
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Consistency of PANEL_FILTER_ENABLED_KEY usage across five files—verify all references use the correct constant and localStorage key name
• ViewRegistration filtering logic correctness—ensure the condition properly blocks non-AI Chat panels when enabled and allows all panels when disabled
• localStorage value handling—confirm string/boolean comparisons are consistent (e.g., comparing against 'false' vs falsy checks)
• Integration with Host.InspectorFrontendHost reload behavior—verify reload is triggered correctly and at the right time

Poem

A toggle so fine, the panel's now mine! 🎛️
Just AI Chat shining, in perfect design,
The settings persist in localStorage's care,
While views filter gently with elegant flair! 🐰✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 66.67% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding a toggle to control visibility of other DevTools panels, which is achieved through localStorage-based panel filtering across multiple files.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/add-devtools-visiblity

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

front_end/panels/ai_chat/ui/SettingsDialog.ts (1)

525-529: Checkbox triggers immediate reload, bypassing the Save workflow.

The panel filter toggle immediately saves to localStorage and triggers a DevTools reload when changed, unlike other settings in this dialog that require clicking "Save". This inconsistency could surprise users who expect to review changes before applying them.

Consider either:

1. Deferring the reload until the Save button is clicked (consistent with other settings)
2. Adding a confirmation dialog before reloading
3. Updating the hint text to clarify the immediate effect: "Changes take effect immediately and will reload DevTools."

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 97a0c49 and c71ea5f.

📒 Files selected for processing (5)

• front_end/panels/ai_chat/ui/SettingsDialog.ts (4 hunks)
• front_end/panels/ai_chat/ui/settings/constants.ts (1 hunks)
• front_end/panels/ai_chat/ui/settings/utils/styles.ts (1 hunks)
• front_end/ui/legacy/InspectorView.ts (1 hunks)
• front_end/ui/legacy/ViewRegistration.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

front_end/ui/legacy/ViewRegistration.ts (2)

front_end/panels/ai_chat/ui/AIChatPanel.ts (1)

• localStorage (605-628)

front_end/ui/legacy/ViewManager.ts (1)

• ViewLocationValues (1014-1014)

🔇 Additional comments (3)

front_end/panels/ai_chat/ui/settings/utils/styles.ts (1)

376-380: LGTM!

The new .panel-filter-section CSS class follows the same styling pattern as other settings sections (e.g., .tracing-section, .vector-db-section), maintaining visual consistency.

front_end/panels/ai_chat/ui/settings/constants.ts (1)

53-57: LGTM!

The constant is well-documented and follows the naming convention of other storage keys in this file.

front_end/panels/ai_chat/ui/SettingsDialog.ts (1)

494-523: Panel filter section implementation looks good overall.

The section is properly structured with a title, checkbox, label, and hint. It correctly uses the imported PANEL_FILTER_ENABLED_KEY constant and is appropriately placed under Advanced Settings.