docs: add agent rules for dev server management and browser verification

- Section 6: Never start dev servers from the agent (prevents orphan
  processes and broken tmux panes)
- Section 7: Check tmux panes for compile errors (renumbered)
- Section 8: Verify compiled output in browser before committing
  (catches squint's silent empty-file failures)

dev/hiccup/src/dev/hiccup.clj

@@ -356,9 +356,12 @@
                  (sidebar/sidebar-menu-item {:href "#"} "redirect")))))
          (sidebar/sidebar-footer {}
            (sidebar/sidebar-user {:user-name "Alice Johnson" :email "alice@example.com"})))
+       (sidebar/sidebar-overlay {})
        (sidebar/sidebar-layout-main {}
          [:div {:style "padding: 2rem;"}
-          [:h3 {:style "margin: 0 0 1rem; color: var(--fg-0);"} "Dashboard"]
+          [:div {:style "display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;"}
+           (sidebar/sidebar-mobile-toggle {})
+           [:h3 {:style "margin: 0; color: var(--fg-0);"} "Dashboard"]]
           [:div {:style "display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;"}
            [:div {:style "aspect-ratio: 16/9; background: var(--bg-1); border-radius: var(--radius-lg); border: var(--border-0);"}]
            [:div {:style "aspect-ratio: 16/9; background: var(--bg-1); border-radius: var(--radius-lg); border: var(--border-0);"}]
@@ -435,8 +438,11 @@
          [:body
           (sidebar/sidebar-layout {}
             (app-sidebar active-page port)
+            (sidebar/sidebar-overlay {})
             (sidebar/sidebar-layout-main {}
               [:div {:style "padding: 2rem; max-width: 960px;"}
+               [:div {:style "display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;"}
+                (sidebar/sidebar-mobile-toggle {})]
                (case active-page
                  :components (components-page)
                  :icons      (icons-page)

dev/replicant/src/dev/replicant.cljs

@@ -344,6 +344,14 @@
     (js/requestAnimationFrame
       #(js-delete (.-dataset el) "noTransitions"))))
 
+(defn toggle-sidebar! [_e]
+  (when-let [layout (.querySelector js/document ".sidebar-layout")]
+    (.toggleAttribute layout "data-sidebar-open")))
+
+(defn close-sidebar! [_e]
+  (when-let [layout (.querySelector js/document ".sidebar-layout")]
+    (.removeAttribute layout "data-sidebar-open")))
+
 ;; ── App Shell ───────────────────────────────────────────────────────
 
 (defn own-port []
@@ -391,8 +399,11 @@
   (let [active-page @!page]
     (sidebar/sidebar-layout {}
       (app-sidebar active-page)
+      (sidebar/sidebar-overlay {:on-click close-sidebar!})
       (sidebar/sidebar-layout-main {}
         [:div {:style {:padding "2rem" :max-width "960px"}}
+         [:div {:style {:display "flex" :align-items "center" :gap "0.75rem" :margin-bottom "1rem"}}
+          (sidebar/sidebar-mobile-toggle {:on-click toggle-sidebar!})]
          (case active-page
            :components (components-page)
            :icons      (icons-page)

dev/squint/src/dev/squint.cljs

@@ -33,6 +33,14 @@
     (js/requestAnimationFrame
       (fn [] (.removeAttribute el "data-no-transitions")))))
 
+(defn toggle-sidebar! [_e]
+  (when-let [layout (.querySelector js/document ".sidebar-layout")]
+    (.toggleAttribute layout "data-sidebar-open")))
+
+(defn close-sidebar! [_e]
+  (when-let [layout (.querySelector js/document ".sidebar-layout")]
+    (.removeAttribute layout "data-sidebar-open")))
+
 (defn section [title & children]
   [:section {:style {"margin-bottom" "2.5rem"}}
    [:h3 {:style {"color" "var(--fg-1)" "margin-bottom" "1rem"
@@ -404,8 +412,11 @@
   (let [active-page @!page]
     (sidebar/sidebar-layout {}
       (app-sidebar active-page)
+      (sidebar/sidebar-overlay {:on-click close-sidebar!})
       (sidebar/sidebar-layout-main {}
         [:div {:style {"padding" "2rem" "max-width" "960px"}}
+         [:div {:style {"display" "flex" "align-items" "center" "gap" "0.75rem" "margin-bottom" "1rem"}}
+          (sidebar/sidebar-mobile-toggle {:on-click toggle-sidebar!})]
          (case active-page
            "components" (components-page)
            "icons"      (icons-page)