Add ability to show or hide other panels (#77)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## 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

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: tysonthomas9

front_end/panels/ai_chat/ui/SettingsDialog.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../../core/host/host.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import { createLogger } from '../core/Logger.js';
 import { LLMClient } from '../LLM/LLMClient.js';
@@ -10,7 +11,7 @@ import { CustomProviderManager } from '../core/CustomProviderManager.js';
 
 // Import settings utilities
 import { i18nString, UIStrings } from './settings/i18n-strings.js';
-import { PROVIDER_SELECTION_KEY, MINI_MODEL_STORAGE_KEY, NANO_MODEL_STORAGE_KEY, ADVANCED_SETTINGS_ENABLED_KEY } from './settings/constants.js';
+import { PROVIDER_SELECTION_KEY, MINI_MODEL_STORAGE_KEY, NANO_MODEL_STORAGE_KEY, ADVANCED_SETTINGS_ENABLED_KEY, PANEL_FILTER_ENABLED_KEY } from './settings/constants.js';
 import { applySettingsStyles } from './settings/utils/styles.js';
 import { isVectorDBEnabled } from './settings/utils/storage.js';
 import type { ModelOption, ProviderType, FetchLiteLLMModelsFunction, UpdateModelOptionsFunction, GetModelOptionsFunction, AddCustomModelOptionFunction, RemoveCustomModelOptionFunction } from './settings/types.js';
@@ -490,6 +491,43 @@ export class SettingsDialog {
     evaluationSection.className = 'settings-section evaluation-section';
     contentDiv.appendChild(evaluationSection);
 
+    // Create panel filter section (inside advanced settings)
+    const panelFilterSection = document.createElement('div');
+    panelFilterSection.className = 'settings-section panel-filter-section';
+    contentDiv.appendChild(panelFilterSection);
+
+    const panelFilterTitle = document.createElement('h3');
+    panelFilterTitle.className = 'settings-subtitle';
+    panelFilterTitle.textContent = 'Panel Visibility';
+    panelFilterSection.appendChild(panelFilterTitle);
+
+    const panelFilterContainer = document.createElement('div');
+    panelFilterContainer.className = 'settings-checkbox-container';
+    panelFilterContainer.style.cssText = 'display: flex; align-items: center; gap: 8px; margin-bottom: 8px;';
+    panelFilterSection.appendChild(panelFilterContainer);
+
+    const panelFilterCheckbox = document.createElement('input');
+    panelFilterCheckbox.type = 'checkbox';
+    panelFilterCheckbox.id = 'panel-filter-toggle';
+    panelFilterCheckbox.checked = localStorage.getItem(PANEL_FILTER_ENABLED_KEY) !== 'false';
+    panelFilterContainer.appendChild(panelFilterCheckbox);
+
+    const panelFilterLabel = document.createElement('label');
+    panelFilterLabel.htmlFor = 'panel-filter-toggle';
+    panelFilterLabel.textContent = 'Show only AI Chat panel';
+    panelFilterContainer.appendChild(panelFilterLabel);
+
+    const panelFilterHint = document.createElement('div');
+    panelFilterHint.className = 'settings-hint';
+    panelFilterHint.textContent = 'When disabled, shows all standard DevTools panels (Elements, Console, etc.). Requires DevTools reload.';
+    panelFilterSection.appendChild(panelFilterHint);
+
+    panelFilterCheckbox.addEventListener('change', () => {
+      localStorage.setItem(PANEL_FILTER_ENABLED_KEY, panelFilterCheckbox.checked.toString());
+      // Reload DevTools to apply the panel filter change
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.reattach(() => window.location.reload());
+    });
+
     // Instantiate advanced feature settings classes
     const browsingHistorySettings = new BrowsingHistorySettings(historySection);
     const vectorDBSettings = new VectorDBSettings(vectorDBSection);
@@ -523,6 +561,7 @@ export class SettingsDialog {
       vectorDBSection.style.display = display;
       tracingSection.style.display = display;
       evaluationSection.style.display = display;
+      panelFilterSection.style.display = display;
 
       // Save state to localStorage
       localStorage.setItem(ADVANCED_SETTINGS_ENABLED_KEY, show.toString());

front_end/panels/ai_chat/ui/settings/constants.ts

@@ -50,3 +50,8 @@ export const ADVANCED_SETTINGS_ENABLED_KEY = 'ai_chat_advanced_settings_enabled'
  * Memory system toggle key
  */
 export const MEMORY_ENABLED_KEY = 'ai_chat_memory_enabled';
+
+/**
+ * Panel filter toggle key - controls whether only AI Chat panel is shown
+ */
+export const PANEL_FILTER_ENABLED_KEY = 'ai_chat_panel_filter_enabled';

front_end/panels/ai_chat/ui/settings/utils/styles.ts

@@ -373,6 +373,12 @@ export function getSettingsStyles(): string {
       border-bottom: 1px solid var(--color-details-hairline);
     }
 
+    .panel-filter-section {
+      margin-top: 16px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-details-hairline);
+    }
+
     .settings-section-title {
       font-size: 16px;
       font-weight: 500;

front_end/ui/legacy/InspectorView.ts

@@ -257,7 +257,11 @@ export class InspectorView extends VBox implements ViewLocationResolver {
                                      drag: true,
                                      keydown: 'ArrowUp|ArrowLeft|ArrowDown|ArrowRight|Enter|Space',
                                    })}`);
-    (mainHeaderElement as HTMLElement).style.display = 'none';
+    // Only hide the tab bar when panel filter is enabled (ai-chat only mode)
+    const panelFilterEnabled = localStorage.getItem('ai_chat_panel_filter_enabled') !== 'false';
+    if (panelFilterEnabled) {
+      (mainHeaderElement as HTMLElement).style.display = 'none';
+    }
 
     // Store the initial selected panel for use in launch histograms
     Host.userMetrics.setLaunchPanel(this.tabbedPane.selectedTabId);

front_end/ui/legacy/ViewRegistration.ts

@@ -162,11 +162,12 @@ export interface ViewRegistration {
 
 const viewIdSet = new Set<string>();
 export function registerViewExtension(registration: ViewRegistration): void {
-  // START ADDED CODE: Filter out panels other than ai-chat
-  if (registration.location === ViewLocationValues.PANEL && registration.id !== 'ai-chat') {
+  // Check if panel filtering is enabled (default: true for ai-chat only mode)
+  const panelFilterEnabled = localStorage.getItem('ai_chat_panel_filter_enabled') !== 'false';
+
+  if (panelFilterEnabled && registration.location === ViewLocationValues.PANEL && registration.id !== 'ai-chat') {
     return; // Don't register this panel
   }
-  // END ADDED CODE
 
   const viewId = registration.id;
   if (viewIdSet.has(viewId)) {