Reorganize directories

Author: leonvogt

CLAUDE.md

@@ -22,24 +22,36 @@ No test suite — manual testing by loading `public/` as an unpacked extension.
 
 ## Architecture
 
-The extension has four components that communicate via a message-passing pipeline:
+The codebase is organized by execution context into two main directories:
+
+- **`src/page/`** — Everything running in the page context (content scripts, injected scripts, observers)
+- **`src/panel/`** — DevTools panel UI (Svelte 5 components, state, messaging)
+
+The DevTools panel communicates via a message-passing pipeline:
 
 ```
 Page Context (backend.js) ←→ proxy.js (content script) ←→ background.js ←→ panel/panel.js (DevTools UI)
 ```
 
-1. **`src/browser_panel/page/backend.js`** — Injected into the inspected page. Hooks Turbo/Stimulus APIs and observes DOM. Sends messages via `window.postMessage`.
-2. **`src/browser_panel/proxy.js`** — Content script bridge. Translates `window.postMessage` ↔ Chrome extension ports.
+1. **`src/page/backend.js`** — Injected into the inspected page. Hooks Turbo/Stimulus APIs and observes DOM. Sends messages via `window.postMessage`.
+2. **`src/page/proxy.js`** — Content script bridge. Translates `window.postMessage` ↔ Chrome extension ports.
 3. **`src/background.js`** — Central router. Injects proxy into the target tab when the panel opens, pipes messages bidirectionally, manages tab lifecycle.
-4. **`src/browser_panel/panel/`** — Svelte 5 DevTools UI (three tabs: Turbo, Stimulus, Logs).
+4. **`src/panel/`** — Svelte 5 DevTools UI (three tabs: Turbo, Stimulus, Logs).
+
+Additionally, the extension has page-level features that work without opening DevTools:
+
+5. **`src/page/content.js`** — Content script loaded on all pages. Handles on-page Turbo Frame/Stimulus highlighting, console logging of Turbo Streams, and diagnostics warnings.
+6. **`src/popup.js`** — Extension popup UI for configuring highlighting, console logging, and event monitoring options.
+7. **`src/page/inject_script.js`** — Injected into the page's real window context to access `window.Stimulus` and `window.Turbo`.
+8. **`src/page/detail_panel.js`** — In-page detail panel widget (shadow DOM) showing Stimulus/Turbo Frame/Turbo Stream info.
 
 ### State Management
 
-`src/browser_panel/State.svelte.js` holds all reactive global state using Svelte 5 runes (`$state`). Incoming backend messages (handled in `messaging.js`) update this state, which automatically re-renders components.
+`src/panel/State.svelte.js` holds all reactive global state using Svelte 5 runes (`$state`). Incoming backend messages (handled in `messaging.js`) update this state, which automatically re-renders components.
 
 ### Backend Observers
 
-Each feature has a dedicated observer class in `src/browser_panel/page/`:
+Each feature has a dedicated observer class in `src/page/observers/`:
 - `turbo_frame_observer.js` — tracks `<turbo-frame>` elements
 - `stimulus_observer.js` — tracks Stimulus controllers
 - `turbo_cable_observer.js` — tracks ActionCable subscriptions
@@ -62,9 +74,11 @@ All message type constants live in `src/lib/constants.js`. Two directions:
 ```
 $src/        → src/
 $uikit/      → src/uikit/
-$components/ → src/components/
+$components/ → src/panel/components/
 $utils/      → src/utils/
 $lib/        → src/lib/
+$panel/      → src/panel/
+$page/       → src/page/
 ```
 
 ### Svelte 5 Runes
@@ -81,6 +95,6 @@ This project uses Svelte 5 rune syntax exclusively — no legacy Svelte 4 patter
 - **svelte-splitpanes** — resizable panels
 - **highlight.js** — syntax highlighting in logs
 
-### Legacy Code
+### Page-Level Features
 
-`src/popup.js` and `src/content.js` are legacy popup-based features being phased out. All new development goes in `src/browser_panel/`.
+`src/popup.js` and `src/page/content.js` provide features that work without opening DevTools: on-page frame/controller highlighting, console event logging, and diagnostics warnings. These are configured via the extension popup. New debugging features should go in `src/panel/`.

build.js

@@ -29,23 +29,23 @@ const browserSpecificSettings = {
 }
 
 const outputFileNames = {
-  "content.js": "hotwire_dev_tools_content.js",
-  "popup.js": "hotwire_dev_tools_popup.js",
-  "inject_script.js": "hotwire_dev_tools_inject_script.js",
+  "content.js": { newName: "hotwire_dev_tools_content.js", moveToDistRoot: true },
+  "popup.js": { newName: "hotwire_dev_tools_popup.js" },
+  "inject_script.js": { newName: "hotwire_dev_tools_inject_script.js", moveToDistRoot: true },
 }
 
 // Dev-only entry points (excluded from production builds)
-const devEntryPoints = ["./src/browser_panel/panel/dev.js"]
+const devEntryPoints = ["./src/panel/dev.js"]
 
 const baseEntryPoints = [
-  "./src/content.js",
+  "./src/page/content.js",
   "./src/popup.js",
   "./src/background.js",
-  "./src/inject_script.js",
-  "./src/browser_panel/panel/panel.js",
-  "./src/browser_panel/panel/register.js",
-  "./src/browser_panel/page/backend.js",
-  "./src/browser_panel/proxy.js",
+  "./src/page/inject_script.js",
+  "./src/panel/panel.js",
+  "./src/panel/register.js",
+  "./src/page/backend.js",
+  "./src/page/proxy.js",
 ]
 
 const esbuildConfig = {
@@ -66,9 +66,11 @@ const esbuildConfig = {
   alias: {
     $src: path.resolve(__dirname, "src"),
     $uikit: path.resolve(__dirname, "src/uikit"),
-    $components: path.resolve(__dirname, "src/components"),
+    $components: path.resolve(__dirname, "src/panel/components"),
     $utils: path.resolve(__dirname, "src/utils"),
     $lib: path.resolve(__dirname, "src/lib"),
+    $panel: path.resolve(__dirname, "src/panel"),
+    $page: path.resolve(__dirname, "src/page"),
   },
   plugins: [
     sveltePlugin({
@@ -82,10 +84,13 @@ const esbuildConfig = {
             const outputFiles = Object.keys(result.metafile.outputs)
             for (const outputFile of outputFiles) {
               const originalName = path.basename(outputFile)
-              const newName = outputFileNames[originalName]
+              const config = outputFileNames[originalName]
 
-              if (newName) {
-                const newPath = path.join(path.dirname(outputFile), newName)
+              if (config) {
+                const newName = typeof config === "string" ? config : config.newName
+                const moveToDistRoot = typeof config === "object" && config.moveToDistRoot
+                const targetDir = moveToDistRoot ? "./public/dist" : path.dirname(outputFile)
+                const newPath = path.join(targetDir, newName)
                 await fs.rename(outputFile, newPath)
                 console.log(`Renamed ${originalName} to ${newName}`)
               }
@@ -111,10 +116,10 @@ async function generateManifest() {
 async function cleanupDevFiles() {
   const devFiles = [
     path.join(__dirname, "public", "dev.html"),
-    path.join(__dirname, "public", "dist", "browser_panel", "panel", "dev.js"),
-    path.join(__dirname, "public", "dist", "browser_panel", "panel", "dev.js.map"),
-    path.join(__dirname, "public", "dist", "browser_panel", "panel", "dev.css"),
-    path.join(__dirname, "public", "dist", "browser_panel", "panel", "dev.css.map"),
+    path.join(__dirname, "public", "dist", "panel", "dev.js"),
+    path.join(__dirname, "public", "dist", "panel", "dev.js.map"),
+    path.join(__dirname, "public", "dist", "panel", "dev.css"),
+    path.join(__dirname, "public", "dist", "panel", "dev.css.map"),
   ]
 
   for (const file of devFiles) {

jsconfig.json

@@ -4,9 +4,11 @@
     "paths": {
       "$src/*": ["src/*"],
       "$uikit/*": ["src/uikit/*"],
-      "$components/*": ["src/components/*"],
+      "$components/*": ["src/panel/components/*"],
       "$utils/*": ["src/utils/*"],
-      "$lib/*": ["src/lib/*"]
+      "$lib/*": ["src/lib/*"],
+      "$panel/*": ["src/panel/*"],
+      "$page/*": ["src/page/*"]
     }
   },
   "include": ["src/**/*"]

manifest.template.json

@@ -52,7 +52,7 @@
         "styles/hotwire_dev_tools_detail_panel.css",
         "panel.html",
         "register.html",
-        "dist/browser_panel/page/backend.js"
+        "dist/page/backend.js"
       ],
       "matches": ["<all_urls>"]
     }

public/panel.html

@@ -9,11 +9,11 @@
     <link rel="stylesheet" href="styles/panel/code_highlight.css" />
 
     <!-- Svelte Styles -->
-    <link rel="stylesheet" href="dist/browser_panel/panel/panel.css" />
+    <link rel="stylesheet" href="dist/panel/panel.css" />
   </head>
 
   <body>
     <div id="app"></div>
-    <script type="module" src="dist/browser_panel/panel/panel.js"></script>
+    <script type="module" src="dist/panel/panel.js"></script>
   </body>
 </html>

public/register.html

@@ -4,6 +4,6 @@
     <meta charset="utf-8" />
   </head>
   <body>
-    <script src="./dist/browser_panel/panel/register.js"></script>
+    <script src="./dist/panel/register.js"></script>
   </body>
 </html>

src/background.js

@@ -2,7 +2,7 @@
 // from the browser devtools panel and the backend.
 // It sets up a two-way communication channel between the devtools panel and the backend script.
 
-import { isDevToolPanel, devToolPanelNameToTabId } from "./browser_panel/messaging"
+import { isDevToolPanel, devToolPanelNameToTabId } from "$panel/messaging"
 import { PORT_IDENTIFIERS } from "$lib/constants"
 
 let ports = {}
@@ -56,7 +56,7 @@ chrome.runtime.onConnect.addListener(async (port) => {
     try {
       await chrome.scripting.executeScript({
         target: { tabId: tabId },
-        files: ["dist/browser_panel/proxy.js"],
+        files: ["dist/page/proxy.js"],
       })
     } catch (error) {
       console.error(`Failed to inject script for tabId ${tabId}:`, error)

src/browser_panel/page/backend.js src/page/backend.jssrc/browser_panel/page/backend.js renamed to src/page/backend.js

@@ -1,11 +1,11 @@
 import { HOTWIRE_DEV_TOOLS_PROXY_SOURCE, HOTWIRE_DEV_TOOLS_BACKEND_SOURCE, BACKEND_TO_PANEL_MESSAGES, PANEL_TO_BACKEND_MESSAGES, TURBO_EVENTS } from "$lib/constants"
 import { addHighlightOverlayToElements, removeHighlightOverlay } from "$utils/highlight"
 import { debounce, generateUUID, getElementPath, getElementFromIndexPath, stringifyHTMLElementTag, safeStringifyEventDetail } from "$utils/utils"
-import TurboFrameObserver from "./turbo_frame_observer.js"
-import TurboCableObserver from "./turbo_cable_observer.js"
-import StimulusObserver from "./stimulus_observer.js"
-import TurboAttributeElementsObserver from "./turbo_attribute_elements_observer.js"
-import ElementObserver from "./element_observer.js"
+import TurboFrameObserver from "./observers/turbo_frame_observer.js"
+import TurboCableObserver from "./observers/turbo_cable_observer.js"
+import StimulusObserver from "./observers/stimulus_observer.js"
+import TurboAttributeElementsObserver from "./observers/turbo_attribute_elements_observer.js"
+import ElementObserver from "./observers/element_observer.js"
 import LeaderLine from "$lib/leader_line.js"
 
 // This is the backend script which interacts with the page's DOM.

src/content.js src/page/content.jssrc/content.js renamed to src/page/content.js

@@ -4,7 +4,7 @@ import { addHighlightOverlayToElements, removeHighlightOverlay } from "$utils/hi
 import { TURBO_EVENTS } from "$lib/constants"
 
 import Devtool from "$lib/devtool"
-import DetailPanel from "$components/detail_panel"
+import DetailPanel from "$page/detail_panel"
 import DOMScanner from "$utils/dom_scanner"
 import DiagnosticsChecker from "$lib/diagnostics_checker"