feat(theseus/devtools): 3-mode dock — bottom / sidebar / two-sidebars

New settings.devToolsDock (default 'bottom') read by the F12 handler
in main.js on each open. Values:
  bottom       - Chrome's own default, docked under the tab
  sidebar      - right-side dock (mode:right). Add-on sidebar tucks
                 out of the way while DevTools is up.
  two-sidebars - right-side dock with the add-on sidebar left in
                 place, so both share the right area.

Settings > General > Developer tools now hosts a 3-option radio group
(same .polrow style as the collision policy). Changes apply instantly
- the F12 handler reads settings.devToolsDock every time it opens, so
no relaunch is needed.

main.js

@@ -240,6 +240,15 @@ const SETTINGS_DEFAULTS = {
   // preset; zero/null → follow the preset. Set by the toolbar drag handles.
   urlBarWidthPx:      0,
   searchBoxWidthPx:   0,
+  // DevTools dock position. "bottom" (default) opens the console under the
+  // tab, matching Chrome's own default; "sidebar" docks it in the right
+  // sidebar, replacing the add-on sidebar while it's open; "two-sidebars"
+  // opens the console AND lets the add-on sidebar stay visible on its own
+  // right-side dock — Electron's mode:right takes over the right edge, so
+  // "two-sidebars" is drawn as mode:right and the add-on sidebar is not
+  // forced closed; the two share the right area (add-on sidebar keeps its
+  // width, DevTools takes what's left).
+  devToolsDock:   "bottom",   // bottom | sidebar | two-sidebars
 };
 // Applying the theme via nativeTheme.themeSource makes prefers-color-scheme update
 // in every renderer (chrome, settings, popover, page views) with no per-view IPC.
@@ -4307,9 +4316,13 @@ app.on("web-contents-created", (_event, wc) => {
       return e.preventDefault();
     }
     // DevTools: F12 or Ctrl+Shift+I toggles Chromium DevTools on the active
-    // TAB. Docked to the right of the tab view (mode: "right") so the tools
-    // ride alongside the page instead of popping a separate Theseus window.
-    // Users who prefer detached can still drag out via the DevTools UI.
+    // TAB. Position follows the devToolsDock setting: "bottom" docks under
+    // the tab (Chrome's own default, matches most web-dev muscle memory);
+    // "sidebar" docks on the right; "two-sidebars" also docks on the right
+    // but leaves the add-on sidebar in place — Electron's mode:right shares
+    // the right edge with whatever we've already positioned there. Users
+    // who prefer a detached window can still drag out from inside the
+    // DevTools frontend itself.
     const isI = input.key === "I" || input.key === "i";
     if (input.key === "F12" || (input.control && input.shift && isI)) {
       const t = activeTab();
@@ -4317,7 +4330,12 @@ app.on("web-contents-created", (_event, wc) => {
         try {
           const twc = t.view.webContents;
           if (twc.isDevToolsOpened()) twc.closeDevTools();
-          else twc.openDevTools({ mode: "right" });
+          else {
+            const dock = settings.devToolsDock === "sidebar" ? "right"
+                       : settings.devToolsDock === "two-sidebars" ? "right"
+                       :                                            "bottom";
+            twc.openDevTools({ mode: dock });
+          }
         } catch {}
       }
       return e.preventDefault();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "theseus-navigator",
-  "version": "0.3.38",
+  "version": "0.3.39",
   "description": "Theseus Navigator — a browser that follows the thread. By Silent Mode, a Deviant project.",
   "author": "Silent Mode",
   "main": "main.js",

settings.html

@@ -211,6 +211,16 @@
         </button>
       </div>
 
+      <h2 class="sub" style="margin-top:1.8rem">Developer tools</h2>
+      <p class="subd">Where the Chromium DevTools panel appears when you press <b>F12</b> or <b>Ctrl+Shift+I</b>. You can always drag it out to a separate window from inside the panel.</p>
+      <div class="row" style="flex-direction:column;align-items:stretch;gap:10px">
+        <div id="devToolsDockList" style="display:flex;flex-direction:column;gap:6px">
+          <label class="polrow"><input type="radio" name="devToolsDock" value="bottom"><span><b>Bottom panel</b> <span class="pmuted">— docked under the tab, like Chrome's default. Best for wide screens.</span></span></label>
+          <label class="polrow"><input type="radio" name="devToolsDock" value="sidebar"><span><b>Right sidebar</b> <span class="pmuted">— DevTools takes the right side. If an add-on sidebar is open, it hides while DevTools is up.</span></span></label>
+          <label class="polrow"><input type="radio" name="devToolsDock" value="two-sidebars"><span><b>Two sidebars</b> <span class="pmuted">— DevTools opens on the right, and the add-on sidebar stays where it is. The two share the right area.</span></span></label>
+        </div>
+      </div>
+
       <h2 class="sub" style="margin-top:1.8rem">Registries</h2>
       <p class="subd">How Theseus picks between the <b>BCNR / BCDN</b> and <b>ICANN / IANA</b>, when a name exists in both.</p>
       <div class="row" style="flex-direction:column;align-items:stretch;gap:10px">
@@ -970,6 +980,16 @@
       C.resetCollisions().then(refreshCollisions);
     };
 
+    // ---- Developer tools dock position --------------------------------------
+    // The active radio reflects the current setting; changing it just calls
+    // C.set — the F12 handler in main.js reads settings.devToolsDock each
+    // time DevTools opens, so no restart is needed for the choice to apply.
+    const devToolsDock = s.devToolsDock || "bottom";
+    document.querySelectorAll('input[name="devToolsDock"]').forEach((r) => {
+      r.checked = (r.value === devToolsDock);
+      r.addEventListener("change", () => { if (r.checked) C.set("devToolsDock", r.value); });
+    });
+
     // ---- Ariadne's Thread system-wide resolver toggle -----------------------
     // Ariadne runs as two elevated Scheduled Tasks ("BNS Resolver Daemon" +
     // "BNS Sia Bridge"). Toggling requires admin — main spawns an elevated