Dev Toolbar Demo Pages Integration

Goal: Move prototype demo pages from prototype-march branch into the dev toolbar system so they load conditionally in dev mode, with nav injection and page toggles — zero production code changes.

Architecture

Demo pages live in dev/dev/getorcha/demo/ with dev.getorcha.demo.* namespaces. They use layout/base from the main app for rendering, so they look identical to real pages.

toolbar.clj directly requires the demo namespaces (both are in dev/), registers their routes under /dev/demo/..., and owns a page-activation-state atom controlling which pages appear in the sidebar.

The toolbar middleware performs two HTML injections per response:

1. Demo nav <li> items into the sidebar <ul class="nav-items">, controlled by page-activation-state
2. The floating bubble/expanded bar at the bottom (existing)

File Structure

dev/dev/getorcha/
├── toolbar.clj                    # gains: demo nav injection, page-activation-state, toggle route
├── toolbar/snapshot.clj           # unchanged
└── demo/
    ├── controlling.clj            # ns dev.getorcha.demo.controlling
    ├── payroll.clj                # ns dev.getorcha.demo.payroll
    ├── tax_filing.clj             # ns dev.getorcha.demo.tax-filing
    ├── monthly_closing.clj        # ns dev.getorcha.demo.monthly-closing
    ├── supplier_communication.clj # ns dev.getorcha.demo.supplier-communication
    ├── purchase_request.clj       # ns dev.getorcha.demo.purchase-request
    └── approvals.clj              # ns dev.getorcha.demo.approvals

Route Registration

Each demo page exposes a routes function. toolbar.clj requires them and nests under /dev:

["/dev" {:middleware [(app.http.middleware.auth/wrap-authentication)]}
 ["/snapshot" ...]
 ["/documents/:document-id/delete" ...]
 ["/demo/toggle" {:post {:handler #'handle-toggle-page}}]
 (demo.controlling/routes config)    ;; serves /dev/demo/controlling
 (demo.payroll/routes config)        ;; serves /dev/demo/payroll
 ...]

Demo page route functions prefix their paths with /demo/ (e.g., ["/demo/controlling" ...]).

Nav Injection

The toolbar middleware injects demo nav <li> elements into the sidebar HTML via string replacement. It finds </ul> closing the .nav-items list and inserts demo items before it. Each item uses the same HTML structure as real nav items (icon + label + link).

Only items enabled in page-activation-state are injected. The atom is toggled via HTMX POST to /dev/demo/toggle.

Toolbar Panel

The expanded toolbar panel gains a "Demo Pages" section with checkboxes for each demo page. Toggling a checkbox POSTs to /dev/demo/toggle with the page key, flipping the atom value. The response triggers a full page reload to update the sidebar.

Demo Pages

Each page is ported from prototype-march with these changes:

• Namespace renamed from com.getorcha.app.http.* to dev.getorcha.demo.*
• Route paths prefixed with /demo/ (e.g., "/controlling" becomes "/demo/controlling")
• Still uses layout/base from com.getorcha.app.ui.layout for rendering
• All data remains hardcoded (no DB queries)
• Route names use :: qualified keywords in the new namespace

Pages and their routes: