remove the dark mode due to complicated styling

Author: pashagolub

.github/agents/speckit.roast.md

@@ -0,0 +1,133 @@
+---
+description: The Code Roaster Agent performs an uncompromising, adversarial review of the project’s implementation.
+---
+
+### **Description**
+
+The **Code Roaster Agent** performs an uncompromising, adversarial review of the project’s implementation.
+Its purpose is to identify every flaw, inefficiency, violation of the specification, and instance of unnecessary complexity.
+Its criticism must be strict, blunt, and free of praise.
+
+The agent enforces the **KISS** and **DRY** principles and aggressively flags any form of bloat, sloppy patterns, or AI-generated filler.
+
+---
+
+### **Primary Objective**
+
+To rigorously analyze the delivered implementation and produce a concise Markdown report listing all issues found.
+The agent does **not** rewrite code and does **not** provide compliments — it only critiques and recommends simplifications.
+
+---
+
+### **Agent Requirements**
+
+The Code Roaster Agent **must**:
+
+- Apply **KISS**:
+  Flag unnecessary abstractions, excessive indirection, complex state flows, oversized components, and anything not strictly needed.
+
+- Apply **DRY**:
+  Identify duplicated logic, repeated constants, copied structures, or similar functions with minor differences.
+
+- Detect **bloat**, such as:
+  - unused files
+  - directories with a single trivial file
+  - wrappers around wrappers
+  - pointless helper functions
+  - over-typed interfaces
+  - config files not used anywhere
+  - superfluous dependencies
+
+- Detect **AI-slop**, including:
+  - generic comments (“This function returns…”)
+  - vague naming
+  - repeated descriptions
+  - unnecessary exposition in Markdown
+  - boilerplate descriptions of obvious behavior
+  - verbose or flowery language
+  - code that solves invented or irrelevant problems
+
+- Detect **spec violations**:
+  Anything that conflicts with `/speckit.constitution`, `/speckit.specify`, `/speckit.plan`, or `/speckit.tasks`.
+
+- Detect **design drift**:
+  Choices that contradict the intended architecture or overcomplicate parts of the system.
+
+- Produce **concise, actionable** criticism in Markdown.
+
+- Never:
+  - fix code
+  - rewrite code
+  - provide positive feedback
+  - justify the engineering choices on behalf of the implementation
+
+---
+
+### **Input**
+
+The agent receives, via normal spec-kit workflow, whatever the user provides in the conversation:
+
+- Code files
+- Directory listings
+- Excerpts of implementation
+- Output of `/speckit.implement`
+- Anything the user pastes
+
+---
+
+### **Output Format**
+
+The agent must output **only Markdown**, with the following structure:
+
+---
+
+## **Issues Found**
+
+### **1. Architectural Issues**
+
+- List structural and high-level design problems.
+
+### **2. Code Quality Issues**
+
+- Line- or file-specific critiques.
+
+### **3. Unnecessary Complexity**
+
+- Over-engineering and violations of KISS.
+
+### **4. AI-Slop Indicators**
+
+- Patterns suggesting auto-generated or low-effort code.
+
+### **5. Bloat**
+
+- Unneeded files, directories, layers, wrappers, or dependencies.
+
+### **6. Specification or Plan Violations**
+
+- Deviations from the agreed goals, tasks, or constraints.
+
+---
+
+## **Recommendations**
+
+Short, direct, actionable steps to make the code:
+
+- smaller
+- simpler
+- more maintainable
+- more human-written
+
+The agent must not add filler language or justifications.
+
+---
+
+### **Tone Rules**
+
+- Harsh
+- Direct
+- Concise
+- No praise
+- No narrative
+- No flowery language
+- No unnecessary adjectives

package-lock.json

@@ -8,6 +8,7 @@
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
+    "scope-bootstrap": "node scripts/scope-bootstrap.js",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "npm run lint -- --fix",
     "e2e": "npm exec cypress install && npm exec grafana-e2e run",
@@ -33,6 +34,7 @@
     "@types/react-dom": "^18.2.0",
     "@types/webpack-livereload-plugin": "^2.3.6",
     "@vue/compiler-sfc": "^3.4.0",
+    "bootstrap": "5.3.8",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "eslint": "^8.57.0",
@@ -42,6 +44,8 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
+    "postcss": "^8.5.6",
+    "postcss-prefix-selector": "^2.1.1",
     "prettier": "^3.0.3",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",

package.json

@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**
+ * Scope Bootstrap CSS to .pev2-panel-container
+ * 
+ * This script reads Bootstrap CSS and prefixes all selectors with
+ * .pev2-panel-container to prevent global style pollution.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const prefixSelector = require('postcss-prefix-selector');
+
+const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/dist/css/bootstrap.css');
+const outputPath = path.join(__dirname, '../src/styles/bootstrap-scoped.css');
+
+// Read Bootstrap CSS
+const bootstrapCSS = fs.readFileSync(bootstrapPath, 'utf8');
+
+// Process with PostCSS
+postcss([
+  prefixSelector({
+    prefix: '.pev2-panel-container',
+    // Don't prefix @keyframes or @font-face
+    exclude: [/@keyframes/, /@font-face/],
+    // Transform function to handle complex selectors
+    transform: function (prefix, selector, prefixedSelector) {
+      // Replace :root with .pev2-panel-container to scope CSS variables
+      if (selector === ':root' || selector.match(/^:root[,\s]/)) {
+        return selector.replace(':root', '.pev2-panel-container');
+      }
+      // Don't prefix body or html - replace with .pev2-panel-container
+      if (selector.match(/^(body|html)([,\s]|$)/)) {
+        return selector.replace(/^(body|html)/, '.pev2-panel-container');
+      }
+      // Handle pseudo-classes and pseudo-elements correctly
+      return prefixedSelector;
+    }
+  })
+])
+  .process(bootstrapCSS, { from: bootstrapPath, to: outputPath })
+  .then(result => {
+    // Add header comment
+    const header = `/**
+ * Bootstrap 5.3.2 - SCOPED TO .pev2-panel-container
+ * 
+ * This file contains the complete Bootstrap CSS framework,
+ * scoped to prevent affecting Grafana's global styles.
+ * 
+ * DO NOT EDIT MANUALLY - Generated by scripts/scope-bootstrap.js
+ * 
+ * Source: node_modules/bootstrap/dist/css/bootstrap.css
+ * Scoped with: postcss-prefix-selector
+ */
+
+`;
+    
+    // Write to output file
+    fs.writeFileSync(outputPath, header + result.css);
+    
+    console.log(`✅ Bootstrap CSS scoped successfully!`);
+    console.log(`   Input:  ${bootstrapPath}`);
+    console.log(`   Output: ${outputPath}`);
+    console.log(`   Size:   ${(result.css.length / 1024).toFixed(2)} KB`);
+  })
+  .catch(error => {
+    console.error('❌ Error scoping Bootstrap CSS:', error);
+    process.exit(1);
+  });

scripts/scope-bootstrap.js

@@ -146,7 +146,7 @@
 - [x] T058 [US3] Apply darkMode to PEV2 component in VueMount.tsx (via Vue props or CSS class)
 - [x] T059 [US3] Create src/styles/pev2-overrides.css for theme-aware PEV2 styling
 - [x] T060 [US3] Import pev2-overrides.css in VueMount.tsx
-- [ ] T061 [US3] Use Grafana theme variables in pev2-overrides.css (--grafana-font-family, --grafana-text-primary)
+- [x] T061 [US3] Use Grafana theme variables in pev2-overrides.css (--grafana-font-family, --grafana-text-primary)
 - [x] T062 [US3] Verify options persist when dashboard is saved and reloaded
 
 **Checkpoint**: Panel options work - users can customize appearance and changes apply immediately
@@ -189,16 +189,16 @@
 - [ ] T075 [P] Add plugin screenshots to src/img/ directory
 - [x] T076 [P] Create provisioning/dashboards/explain-example.json with sample dashboard
 - [x] T077 Add example queries to explain-example.json (simple scan, join, aggregation, CTE)
-- [X] T078 Verify bundle size is under 2MB requirement (npm run build, check dist/module.js)
-- [ ] T079 Verify no external CDN references in bundle (inspect dist/module.js source)
+- [x] T078 Verify bundle size is under 2MB requirement (npm run build, check dist/module.js)
+- [x] T079 Verify no external CDN references in bundle (inspect dist/module.js source)
 - [x] T080 Test plugin in local Grafana instance following quickstart.md
 - [x] T081 Test plugin with PostgreSQL data source and real EXPLAIN queries
 - [x] T082 Test plugin with TestData data source using CSV and JSON scenarios
 - [ ] T083 Test error states: NO_DATA, FIELD_NOT_FOUND, INVALID_FORMAT, PARSE_ERROR
 - [ ] T084 Verify CSP compliance (test in Grafana Cloud or with strict CSP settings)
 - [ ] T085 Run linter: npm run lint and fix any issues
-- [X] T086 Run formatter: npm run format
-- [X] T087 Build production bundle: npm run build
+- [x] T086 Run formatter: npm run format
+- [x] T087 Build production bundle: npm run build
 - [ ] T088 Generate plugin signing manifest if needed: npm run sign
 - [ ] T089 Create distribution package: zip -r dist.zip dist/ or npm run package
 

specs/001-grafana-explain-panel/tasks.md

@@ -98,7 +98,6 @@ export const ExplainPanel: React.FC<Props> = ({
       <VueMount
         plan={result.plan}
         fontSize={options.fontSize}
-        darkMode={options.darkMode}
         width={width}
         height={height}
       />

src/components/ExplainPanel.tsx

@@ -11,7 +11,8 @@ import { Plan as Pev2Plan } from "pev2";
 import { mountVueApp, unmountVueApp } from "../services/vueBootstrap";
 import { ExecutionPlan } from "../types/plan-types";
 import { logDebug } from "../utils/logger";
-import "bootstrap/dist/css/bootstrap.min.css";
+// Import scoped Bootstrap styles (only what PEV2 needs)
+import "../styles/bootstrap-scoped.css";
 import "pev2/dist/pev2.css";
 import "../styles/pev2-overrides.css";
 
@@ -20,7 +21,6 @@ const CONTEXT = "VueMount";
 interface Props {
   plan: ExecutionPlan;
   fontSize?: number;
-  darkMode?: boolean;
   width?: number;
   height?: number;
 }
@@ -34,7 +34,6 @@ interface Props {
 export const VueMount: React.FC<Props> = ({
   plan,
   fontSize = 14,
-  darkMode = false,
   width,
   height,
 }) => {
@@ -48,7 +47,6 @@ export const VueMount: React.FC<Props> = ({
 
     logDebug(CONTEXT, "Mounting PEV2 visualization", {
       fontSize,
-      darkMode,
       width,
       height,
     });
@@ -65,11 +63,12 @@ export const VueMount: React.FC<Props> = ({
           // Convert plan to JSON string format that PEV2 expects
           const planSource = JSON.stringify(plan, null, 2);
           const planQuery = "";
-          
-          return () => h(Pev2Plan, {
-            planSource: planSource,
-            planQuery: planQuery,
-          });
+
+          return () =>
+            h(Pev2Plan, {
+              planSource: planSource,
+              planQuery: planQuery,
+            });
         },
       });
 
@@ -85,19 +84,14 @@ export const VueMount: React.FC<Props> = ({
         containerRef.current.style.fontSize = `${fontSize}px`;
       }
 
-      // Apply dark mode styling
-      if (containerRef.current && darkMode) {
-        containerRef.current.classList.add("pev2-dark-mode");
-      } else if (containerRef.current) {
-        containerRef.current.classList.remove("pev2-dark-mode");
-      }
-
       // Ensure PEV2 fills the container height
       if (containerRef.current) {
-        const pev2Container = containerRef.current.querySelector('.d-flex') as HTMLElement;
+        const pev2Container = containerRef.current.querySelector(
+          ".d-flex",
+        ) as HTMLElement;
         if (pev2Container) {
-          pev2Container.style.height = '100%';
-          pev2Container.style.minHeight = '100%';
+          pev2Container.style.height = "100%";
+          pev2Container.style.minHeight = "100%";
         }
       }
     } catch (error) {
@@ -112,11 +106,12 @@ export const VueMount: React.FC<Props> = ({
         vueAppRef.current = null;
       }
     };
-  }, [plan, fontSize, darkMode, width, height]);
+  }, [plan, fontSize, width, height]);
 
   return (
     <div
       ref={containerRef}
+      className="pev2-panel-container"
       style={{
         width: "100%",
         height: "100%",