From 038412bb0f57d97fdab133b79ba87dd62b4b645b Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 29 May 2026 09:33:03 -0700
Subject: [PATCH 1/8] refactor(gearbox): adopt webcore/core/errors

Repoint the 9 apperrors import sites to github.com/sarg3nt/webcore/core/errors
and delete the now-duplicated internal/framework/errors. Adds webcore require +
local replace directive.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs/webcore-extraction-plan.md               | 523 ++++++++++++++++++
 gearbox/go.mod                                |  18 +-
 gearbox/go.sum                                |  62 +--
 gearbox/internal/framework/errors/errors.go   | 241 --------
 .../framework/errors/errors_writehttp_test.go |  64 ---
 gearbox/internal/framework/handler/alerts.go  |   2 +-
 .../framework/handler/api_certificates.go     |   2 +-
 .../internal/framework/handler/api_logs.go    |   2 +-
 .../framework/handler/api_services.go         |   2 +-
 .../internal/framework/handler/api_traffic.go |   2 +-
 gearbox/internal/framework/handler/backup.go  |   2 +-
 gearbox/internal/framework/handler/config.go  |   2 +-
 .../internal/framework/handler/security.go    |   2 +-
 gearbox/internal/framework/handler/users.go   |   2 +-
 14 files changed, 572 insertions(+), 354 deletions(-)
 create mode 100644 docs/webcore-extraction-plan.md
 delete mode 100644 gearbox/internal/framework/errors/errors.go
 delete mode 100644 gearbox/internal/framework/errors/errors_writehttp_test.go

diff --git a/docs/webcore-extraction-plan.md b/docs/webcore-extraction-plan.md
new file mode 100644
index 0000000..f98c778
--- /dev/null
+++ b/docs/webcore-extraction-plan.md
@@ -0,0 +1,523 @@
+# Web-core extraction plan
+
+Status: **Planned, not started.**
+Owner: Dave + Claude (Opus 4.7 → upgrading)
+Last updated: 2026-05-28
+Working directories involved: `/Users/dave/src/gearbox`, `/Users/dave/src/libation`, future `/Users/dave/src/webcore`
+
+This document is the single source of truth for extracting shared web framework code out of `gearbox` and `libation` into a new module so all current and future sarg3nt web apps consume the same UI primitives, auth flow, session/CSRF handling, SSE transport, and form/validation helpers. It is written to be self-contained — a fresh Claude session must be able to pick up from here without re-running the audit.
+
+---
+
+## 1. Decisions (locked)
+
+| # | Decision | Value |
+|---|----------|-------|
+| 1 | Module path | `github.com/sarg3nt/webcore` |
+| 2 | Repo layout | Single repo, two top-level Go packages: `ui/` and `core/` |
+| 3 | Cutover order | Gearbox first (source of truth), then libation |
+| 4 | Pre-extraction cleanup | Part of extraction, not separate gearbox PRs |
+| 5 | Login UI scope | Include password reset, change-password, forgot-password flows in MVP |
+| 6 | SSE transport | Extract `core/transport/sse.go` + `ui/static/js/sse.js` |
+| 7 | `dev_bypass` build tags | Lift gearbox's `--tags dev` loopback bypass into shared `core/auth` |
+
+User instruction verbatim: "Write the plan in a detailed .md file in either rep, I don't care which. I need to restart VS code / Claude as there is a new version of Claude out that we need to upgrade to. But write the plan first, make sure you have all the context to get back to work on this once the restart and new Opus model are online."
+
+---
+
+## 2. Conversation context — what just happened
+
+Earlier in the same session before this plan was written:
+
+### Libation UI fixes already shipped (working in browser, not committed)
+
+Goal was to bring libation's layout closer to gearbox. User reported three specific issues:
+
+1. Left-hand nav scrolled with the page — wanted fixed.
+2. Toasts appeared in the wrong place (bottom-right vs gearbox's top-right).
+3. Sidebar collapse was visually broken.
+
+Changes applied in libation:
+
+- `internal/framework/ui/toast.templ` — moved container `fixed bottom-4 right-4 z-50` → `fixed top-4 right-4 z-[9999]` with `pointer-events-none`.
+- `assets/static/css/sidebar.css` — full rewrite. Fixed-position rail (15rem expanded, 3.5rem collapsed), `transition: width 0.25s ease-in-out` on sidebar + `margin-left` on `#main-content`, label fade-out via opacity+width, collapsed nav-link centers icon, mobile (<md) hides sidebar + clears margin, overlay-style scrollbar.
+- `internal/framework/templates/layouts/sidebar.templ` — restructured: outer `<aside>` carries only positioning, inner `flex flex-col w-full h-full` wrapper splits non-scrolling header from `<nav id="sidebar-nav-scroll">`. Added `.nav-link`, `.nav-section-heading`, `.nav-sublist` class hooks.
+- `internal/framework/templates/layouts/base.templ` — dropped `<div class="flex min-h-screen">` wrapper. `<main id="main-content">` reflows via CSS margin-left. Added inline boot script in `<head>` that applies `.sidebar-collapsed` to `<html>` from localStorage before first paint (prevents flash).
+- `assets/static/js/sidebar.js` — toggle now mutates `.sidebar-collapsed` on `<html>` (single source of truth for both rail width and main margin). Dropped `data-collapsed` attribute.
+- `.air.toml` — `include_ext` gained `js`, `css` so static-asset edits trigger rebuild + re-embed.
+
+### Libation UI work still pending (deferred until extraction)
+
+User then asked for two more improvements which were deferred to avoid throwaway work:
+
+- **Full-width fixed-top header** like gearbox (currently libation's header is inside the main flow, not fixed). Plan to port gearbox's pattern: `<header class="fixed top-0 inset-x-0 z-50">` with `pt-[57px]` on main-content.
+- **Richer toast features** like gearbox's `utils/toast.js` (475 lines vs libation's 133): positions, drag-dismiss, progress bars, action buttons, ARIA, queueing.
+
+These two land **as part of the libation cutover** to `webcore`, not as standalone libation edits.
+
+### Dev server state caveat
+
+During the libation UI fixes, the user's `make dev` (which runs `air`) was disrupted because the old `.air.toml` didn't watch js/css, so the running binary held stale embedded assets. To force a re-embed I `kill -9`'d the main process; this orphaned the air supervisor. I started a fresh `./tmp/main` manually so the browser session kept working. The user needs to `Ctrl-C` and re-run `make dev` in their dev terminal to restore the supervisor. The new `.air.toml` will rebuild on js/css edits going forward.
+
+---
+
+## 3. Architecture: target module shape
+
+```text
+github.com/sarg3nt/webcore/
+├── go.mod              (module github.com/sarg3nt/webcore)
+├── README.md
+├── LICENSE             (MIT, matching gearbox/libation)
+├── CHANGELOG.md
+│
+├── ui/                 ── frontend "skin"
+│   ├── templ/          ── *.templ files
+│   │   ├── alerts.templ
+│   │   ├── badge.templ
+│   │   ├── collapsible.templ
+│   │   ├── doughnut.templ
+│   │   ├── icons.templ
+│   │   ├── info_tooltip.templ
+│   │   ├── live_refresh.templ      (abstract — caller wires manualRefresh/updateSSEStatus)
+│   │   ├── login.templ             (email + password + WebAuthn button + flash slot + branding slot)
+│   │   ├── change_password.templ
+│   │   ├── forgot_password.templ
+│   │   ├── reset_password.templ
+│   │   ├── metric_card.templ       (split out of gearbox metrics.templ)
+│   │   ├── modal.templ
+│   │   ├── settings.templ          (SettingsSection + form controls)
+│   │   ├── table.templ             (deduped — gearbox currently has two copies)
+│   │   ├── toast.templ
+│   │   └── toggle.templ
+│   ├── static/
+│   │   ├── js/
+│   │   │   ├── utils/
+│   │   │   │   ├── api.js          (baseURL + tenantParam hook, no /api/v1 hardcode)
+│   │   │   │   ├── char-limit.js
+│   │   │   │   ├── dom.js
+│   │   │   │   ├── formatting.js
+│   │   │   │   └── toast.js        (gearbox 475-line full-featured)
+│   │   │   ├── common/
+│   │   │   │   ├── command-palette.js  (gearbox 636-line, fuzzy match + kbd nav)
+│   │   │   │   ├── datagrid.js     (Tabulator wrapper, neutral class name)
+│   │   │   │   ├── focus-trap.js
+│   │   │   │   ├── header-search.js (neutral register() API)
+│   │   │   │   ├── info-tooltip.js
+│   │   │   │   ├── keymap.js       (renamed namespace from window.GearboxKeymap)
+│   │   │   │   ├── page-header.js
+│   │   │   │   ├── shortcut-help.js (shortcuts table as input)
+│   │   │   │   ├── sidebar.js      (libation's new fixed-rail toggle)
+│   │   │   │   └── sse.js          (EventSource wrapper + reconnect + topic filter)
+│   │   │   └── charts/
+│   │   │       ├── chart-defaults.js
+│   │   │       ├── chart-fullscreen.js
+│   │   │       └── chart-sse.js    (URL factory parameter)
+│   │   └── css/
+│   │       ├── utilities.css
+│   │       ├── sidebar.css         (libation's new fixed-position rail)
+│   │       └── components/
+│   │           ├── buttons.css
+│   │           ├── cards.css
+│   │           ├── datagrid.css    (renamed from datagrid-unifi class)
+│   │           └── modals.css
+│   └── assets.go       (//go:embed static + var StaticFiles embed.FS)
+│
+└── core/               ── backend "spine"
+    ├── auth/
+    │   ├── manager.go           (Login, Logout, GetUser, IsAuthenticated, ExtendSession, GetCSRFToken, ValidateCSRFToken)
+    │   ├── userstore.go         (UserStore interface — apps implement against their own DB)
+    │   ├── authuser.go          (AuthUser interface — apps' models.User satisfies)
+    │   ├── password.go          (HashPassword, CheckPassword, ValidatePassword, GenerateRandomPassword, GeneratePasswordEntropy)
+    │   ├── csrf.go              (GenerateCSRFToken, ValidateCSRFToken extracted from manager)
+    │   ├── security.go          (GenerateSecureToken, GenerateSessionToken, GenerateUUID, ValidateEmail)
+    │   ├── reset.go             (RequestPasswordReset, ResetPassword)
+    │   ├── change.go            (ChangePassword, SetPassword, MustChangePassword middleware gate)
+    │   ├── middleware.go        (RequireAuth, RequireCSRF, RequireAdmin, RequirePasswordChange)
+    │   ├── login_handler.go     (LoginHandlerBuilder takes Manager + Renderer + redirect path)
+    │   ├── flash.go             (typed Flash, PutJSON/GetJSON/DeleteKey — libation's clean primitive)
+    │   ├── dev_bypass_on.go     (//go:build dev — loopback bypass from gearbox)
+    │   └── dev_bypass_off.go    (//go:build !dev)
+    ├── webauthn/                (libation's two-file split — RP wrapper + WebAuthnUser)
+    │   ├── rp.go
+    │   └── user.go
+    ├── middleware/
+    │   ├── security_headers.go  (CSPConfig — gearbox's CSP builder + libation's local-vs-cdn toggle)
+    │   └── ratelimit.go         (golang.org/x/time/rate — libation's vetted impl)
+    ├── errors/
+    │   └── apperror.go          (AppError + NotFound/Unauthorized/Forbidden/BadRequest/Internal/Conflict/ServiceUnavailable + WrapDatabaseError + WriteHTTPError + SanitizeError)
+    ├── events/
+    │   └── hub.go               (gearbox's Hub — per-subscriber buffer, drop coalescing, generic Topic filter)
+    ├── transport/
+    │   └── sse.go               (HTTP handler taking Hub + topic-filter func)
+    ├── validation/
+    │   └── validator.go         (Required, MinLength, MaxLength, Email, URL, Alphanumeric, IPAddress, Port, Hostname)
+    ├── crypto/
+    │   └── encryptor.go         (AES-256-GCM)
+    ├── migrate/
+    │   └── runner.go            (MigrateManager taking caller-supplied embed.FS)
+    └── responses/
+        └── envelopes.go         (ErrorResponse, SuccessResponse, ValidationResponse — only the generic ones)
+```
+
+---
+
+## 4. Inventory: what extracts, what stays, abstractions required
+
+### 4.1 UI — templ components
+
+Sources are gearbox `internal/framework/ui/*.templ` and `internal/framework/templates/components/*.templ`.
+
+| Component | Source | Extract action | Abstraction |
+|-----------|--------|----------------|-------------|
+| `alerts.templ` | `framework/ui/` | Direct lift | None |
+| `badge.templ` | `framework/ui/` | Direct lift | None |
+| `toast.templ` | `framework/ui/` | Lift + parameterize | Script src path — caller supplies or split script tag out of templ |
+| `toggle.templ` | `framework/ui/` | Direct lift | None |
+| `modal.templ` | `framework/ui/` | Direct lift | None |
+| `collapsible.templ` | `framework/ui/` | Lift + namespace | localStorage key prefix becomes per-app — pass as template param |
+| `icons.templ` | `framework/ui/` | Direct lift (~35 heroicons) | None |
+| `info_tooltip.templ` | `templates/components/` | Direct lift | None |
+| `doughnut.templ` | `templates/components/` | Direct lift | None (StatusDoughnut signature is already generic) |
+| `settings.templ` | `templates/components/` | Direct lift | None |
+| `metric_card` | Split from `templates/components/metrics.templ` | Lift `MetricCard*` only | Generic `MetricView{Label, Value, Unit}` |
+| `table.templ` | Dedup `framework/ui/` and `templates/components/` first | Lift one | Document `sortTable`/`filterTable`/`exportTableCSV` JS contract (currently missing — must be written) |
+| `live_refresh.templ` | Dedup same | Lift one | Caller wires `manualRefresh()` + `updateSSEStatus()` as globals or via injected JS |
+| `login.templ` | New | Build using gearbox layout patterns | Branding slot + flash slot + WebAuthn-button slot |
+| `change_password.templ` | New | Build | Branding + flash |
+| `forgot_password.templ` | New | Build | Branding + flash |
+| `reset_password.templ` | New | Build | Branding + flash |
+
+Stays in gearbox:
+
+- `templates/components/console.templ` (multi-session xterm.js drawer/dock — tightly bound to ConsoleManager + box switching)
+- `templates/components/container_diagram.templ` (VPN-gateway / multi-container topology — `models.Container`, NetworkMode `service:` semantics)
+- All `templates/pages/*.templ` (per-page templates are app-specific)
+- `templates/layouts/base.templ` (gearbox's is 2763 lines, heavily coupled to box-chip/breadcrumb/gear concepts — both apps will keep their own `base.templ` and compose shared components inside it)
+
+### 4.2 UI — JavaScript
+
+Source root: gearbox `static/js/`.
+
+| File | Action | Notes |
+|------|--------|-------|
+| `utils/toast.js` | Direct lift | 475 lines, fully self-contained, no gearbox refs |
+| `utils/dom.js` | Direct lift | show/hide/toggle/setText helpers |
+| `utils/formatting.js` | Direct lift | formatBytes/Number/Duration |
+| `utils/char-limit.js` | Direct lift | `data-charlimit` counter |
+| `utils/api.js` | Lift + abstract | Strip `/api/v1` baseURL + `box_id` query param. Take `baseURL` config + `tenantParam` hook |
+| `common/focus-trap.js` | Direct lift | W3C APG impl |
+| `common/keymap.js` | Lift + rename | `window.GearboxKeymap` → neutral namespace (e.g. `window.WebCore.Keymap`) |
+| `common/info-tooltip.js` | Direct lift | JS counterpart of templ |
+| `common/page-header.js` | Direct lift | Hoists `#page-header-source` → `#header-page-content` |
+| `common/datagrid.js` | Direct lift + rename | Tabulator wrapper, drop `datagrid-unifi` class name to neutral |
+| `common/header-search.js` | Lift + abstract | Strip `window.gearbox.filter`; expose neutral `register()` API |
+| `common/shortcut-help.js` | Lift + abstract | Shortcuts table as input; pluggable `onEscapeFallback` chain; drop gear "edit mode" detection |
+| `common/command-palette.js` | Lift + abstract | 636-line gearbox version. Strip `window.gearbox.commands` registry; expose generic registration. Boxes/gears/pages JSON islands become caller-supplied data sources. |
+| `common/sidebar.js` | New, from libation | The new fixed-rail toggle (already written in libation) — promote |
+| `common/sse.js` | New | Generic EventSource wrapper + reconnect + topic filter — replaces libation's 30-line `sse.js` and gearbox's `chart-sse.js` |
+| `charts/chart-defaults.js` | Direct lift | Chart.js theme palette + zoom — rename namespace |
+| `charts/chart-fullscreen.js` | Direct lift | DOM-class fullscreen toggle |
+| `charts/chart-sse.js` | Lift + abstract | URL factory parameter instead of `/api/events?server=` |
+
+Stays in gearbox:
+
+- `common/box-selector.js` (`switchBox(boxID)` + `box_id` cookie)
+- `common/gear-commands.js` (`window.gearbox.filter`/`commands` per-page registries — names alone are domain)
+- Anything per-gear (containers/, gears/, traffic/, etc.)
+
+### 4.3 UI — CSS
+
+Source root: gearbox `static/css/`.
+
+| File | Action | Notes |
+|------|--------|-------|
+| `utilities.css` | Direct lift | transitions, focus-ring, spinner, gradients, dark scrollbar |
+| `components/buttons.css` | Direct lift | `.btn` + variants, tailwind `@apply`-based |
+| `components/cards.css` | Direct lift | `.status-card*` |
+| `components/modals.css` | Direct lift | `.modal-*` utilities |
+| `components/datagrid.css` | Direct lift + rename | UniFi-style Tabulator skin, rename `.datagrid-unifi` → `.datagrid` |
+| `sidebar.css` | New, from libation | Promote libation's new file (fixed-position rail + transitions + mobile rules) |
+
+Stays in gearbox:
+
+- `components/console.css` (drawer/dock for `#console-drawer`)
+- `components/home.css` (Gridstack tiles)
+- `firewall_config_editor.css`, `haproxy_config_editor.css` (per-gear)
+
+### 4.4 Core — Go packages
+
+| Package | Action | Source preference | Coupling notes |
+|---------|--------|-------------------|----------------|
+| `errors/` | Direct lift | Gearbox | Stdlib only. Libation has nothing here — pure addition for libation. |
+| `validation/` | Direct lift | Gearbox | Stdlib only. |
+| `crypto/` | Direct lift | Either (equivalent impls) | Compare gearbox vs libation, pick cleaner. |
+| `migrate/` | Lift + abstract | Libation (leaner) | Take caller-supplied `embed.FS`. Both repos' impls are nearly identical. |
+| `events/` | Lift + strip | Gearbox `Hub` | Strip gearbox `EventType` constants (those stay in gearbox app). Replace `ServerID` filter with generic `Topic`/`Tag`. |
+| `transport/sse.go` | Build new | n/a | HTTP handler wrapping `events.Hub`, sets headers, pumps frames, takes topic-filter func. |
+| `responses/` | Partial lift | Gearbox | Only `ErrorResponse`, `SuccessResponse`, `ValidationResponse` — domain DTOs stay. |
+| `auth/manager.go` | Refactor + lift | Hybrid | Take libation's `SessionManager` shape (typed Flash, gorilla store); layer gearbox's CSRF + audit + password-reset + permissions on top. Define `UserStore` interface; both apps implement against their own DB. Define `AuthUser` interface (`ID`, `Email`, `IsAdmin`, `IsLocked`, `MustChangePassword`, `PasswordHash`). |
+| `auth/password.go` | Direct lift | Gearbox | bcrypt + go-password-validator. |
+| `auth/csrf.go` | Direct lift | Gearbox | Split out of manager.go. |
+| `auth/security.go` | Direct lift | Gearbox | Token + UUID + email helpers. |
+| `auth/reset.go` | Lift + abstract | Gearbox | Email send becomes interface (`EmailSender`). |
+| `auth/change.go` | Lift + libation gate | Hybrid | Libation has `RequirePasswordChange` middleware gate gearbox lacks. |
+| `auth/middleware.go` | Direct lift | Gearbox | `RequireAuth`, `RequireCSRF`, `RequireAdmin` + new `RequirePasswordChange`. |
+| `auth/login_handler.go` | Build new | n/a | `LoginHandlerBuilder(authMgr, renderer, redirectAfterLogin)`. Renderer interface lets each app pass its branded templ wrapper. |
+| `auth/flash.go` | Direct lift | Libation | Libation's typed Flash + `PutJSON`/`GetJSON`/`DeleteKey` is cleaner. |
+| `auth/dev_bypass_on.go` | Direct lift | Gearbox | `//go:build dev` — issue #83 loopback bypass. |
+| `auth/dev_bypass_off.go` | Direct lift | Gearbox | `//go:build !dev`. |
+| `webauthn/rp.go` | Direct lift | Libation | Libation's RP wrapper split. |
+| `webauthn/user.go` | Direct lift | Libation | Libation's user-model split. |
+| `middleware/security_headers.go` | Lift + merge | Hybrid | Gearbox's CSP builder + sanitization + env-var extras; libation's local-vs-cdn toggle becomes a `CSPConfig` field. |
+| `middleware/ratelimit.go` | Direct lift | Libation | `golang.org/x/time/rate` impl — vetted vs gearbox's hand-rolled bucket. |
+
+Stays in gearbox:
+
+- `framework/agent/*`, `framework/collector/*`, `framework/gear/*`
+- `framework/models/{alerts,certificates,firewall,server,stats,system,traffic,settings_pages,metadata,box_config,gear,integration,permission,component}.go` (the user/passkey/audit-log types get pulled behind interfaces in `core/auth` but the concrete impls stay in gearbox)
+- `framework/services/{agent_keyring,alerts,geoip,parser/csv}` and gearbox-only adapters
+- `framework/handler/api_*.go`, `gears.go`, `haproxy_*.go`, `os_updates.go`, `resolve_box.go`, `console_popout.go`, `alerts.go`
+- `framework/database/{alerts,backup,box_agent_keys,firewall,gears,home,log_sources,metrics_*,servers,source_stats,traffic}.go`
+- `framework/middleware/permissions.go` (depends on `models.Component`/`Permission` — gearbox-specific concepts)
+- `framework/services/email` (extract `SMTPConfigProvider` interface and template renderer concept later, MVP keeps it in gearbox)
+
+---
+
+## 5. Pre-extraction cleanup (in gearbox, done during extraction)
+
+These are inside gearbox right now and must be untangled before the affected file moves to `webcore`. Do them as part of the same PR that extracts the file.
+
+1. **Dedup `table.templ`** — same code in `framework/ui/` and `framework/templates/components/`. Pick canonical, delete other, update all gearbox templ imports.
+2. **Dedup `live_refresh.templ`** — same situation.
+3. **Split `metrics.templ`** — `MetricCard*` extract to shared `metric_card.templ`; `SystemMetrics`/`ServiceStatus`/`BackendHealthBadge` stay in gearbox as they take `models.*`.
+4. **Rename JS namespaces** — `window.GearboxKeymap`, `window.GearboxCharts`, `window.gearbox.*` → neutral (`window.WebCore.*`). Keep `window.gearbox.*` in gearbox app code that registers commands/filters against the neutral primitives.
+5. **Parameterize hardcoded URLs**:
+    - `utils/api.js` — `/api/v1` baseURL + `box_id` param become config.
+    - `charts/chart-sse.js` — `/api/events?server=` becomes URL factory.
+    - `ui/toast.templ` — script src path becomes caller-supplied or split out.
+6. **Namespace `collapsible-*` localStorage prefix** — per-app prefix passed in so co-hosted apps don't collide.
+7. **Document and implement `table.templ` ↔ JS contract** — `sortTable`/`filterTable`/`exportTableCSV` are referenced by the template but no implementation lives in `static/js/`. Find them (may be inline in pages) or write them.
+
+---
+
+## 6. Execution order
+
+### Phase 0 — Repo bootstrap
+
+0.1 User: `gh repo create sarg3nt/webcore --public --description "Shared web framework for sarg3nt apps (UI primitives, auth, SSE, middleware)" --license MIT`.
+
+0.2 Claude: clone to `/Users/dave/src/webcore`, `go mod init github.com/sarg3nt/webcore`, scaffold directory layout per section 3, add `README.md`, `LICENSE`, `CHANGELOG.md`, `.gitignore`, `.markdownlint.json` mirroring gearbox.
+
+0.3 Claude: add to user's VS Code workspace at `/Users/dave/src/homelab/homelab.code-workspace` (or whichever workspace file gearbox + libation live in).
+
+0.4 Claude: initial commit, push.
+
+### Phase 1 — Extract zero-dependency packages
+
+These have no coupling and can land standalone.
+
+1.1 `core/errors/` — copy from gearbox, no changes. Add unit tests. PR1 to webcore.
+
+1.2 `core/validation/` — copy from gearbox. Add unit tests. PR2.
+
+1.3 `core/crypto/` — pick winner (libation or gearbox), add tests. PR3.
+
+1.4 `core/migrate/` — take libation's leaner runner, modify to accept caller `embed.FS`. Add tests using fixture migrations. PR4.
+
+1.5 `core/responses/` — copy `ErrorResponse`, `SuccessResponse`, `ValidationResponse` from gearbox. PR5.
+
+1.6 `core/middleware/ratelimit.go` — libation's `x/time/rate` impl. Add tests. PR6.
+
+1.7 `core/middleware/security_headers.go` — merge gearbox's CSP builder + libation's local/cdn toggle into one `CSPConfig`. Add tests. PR7.
+
+### Phase 2 — Extract events + SSE transport
+
+2.1 `core/events/Hub` — port gearbox `Hub`, strip `ServerID` filter to generic `Topic`. Add tests. PR8.
+
+2.2 `core/transport/sse.go` — new HTTP handler. Wraps `Hub`, takes topic-filter func, sets headers, pumps frames. Add integration test using `httptest`. PR9.
+
+2.3 `ui/static/js/common/sse.js` — new generic EventSource wrapper + reconnect + topic filter. PR9 (same PR — paired).
+
+### Phase 3 — Extract auth + webauthn
+
+3.1 Define `UserStore` + `AuthUser` interfaces in `core/auth/`. Document exactly what gearbox + libation need to implement. PR10.
+
+3.2 `core/auth/flash.go` — libation's typed Flash. PR11.
+
+3.3 `core/auth/password.go`, `csrf.go`, `security.go` — direct lift from gearbox. PR12.
+
+3.4 `core/auth/manager.go` — Login, Logout, GetUser, IsAuthenticated, ExtendSession + CSRF helpers. Built on `UserStore` interface. PR13.
+
+3.5 `core/auth/middleware.go` — RequireAuth, RequireCSRF, RequireAdmin, RequirePasswordChange. PR14.
+
+3.6 `core/auth/reset.go`, `change.go` — with `EmailSender` interface for reset email. PR15.
+
+3.7 `core/auth/login_handler.go` — `LoginHandlerBuilder` with `Renderer` interface. PR16.
+
+3.8 `core/auth/dev_bypass_on.go`, `dev_bypass_off.go` — lift gearbox files behind `//go:build dev` tag. PR17.
+
+3.9 `core/webauthn/rp.go`, `user.go` — lift libation's split. PR18.
+
+### Phase 4 — Extract UI templ components
+
+4.1 `ui/templ/` zero-dependency batch — `alerts`, `badge`, `toggle`, `modal`, `collapsible` (parameterized prefix), `icons`, `info_tooltip`, `doughnut`, `settings`. PR19.
+
+4.2 `ui/templ/toast.templ` + `ui/static/js/utils/toast.js` — paired. PR20.
+
+4.3 Dedup gearbox's two `table.templ` copies, lift canonical to `ui/templ/`. Document JS contract, write/find sortTable/filterTable/exportTableCSV. PR21.
+
+4.4 Dedup `live_refresh.templ`, lift abstract version. PR22.
+
+4.5 Split gearbox `metrics.templ`, lift `metric_card.templ`. PR23.
+
+4.6 Lift sidebar — promote libation's new `sidebar.templ` + `sidebar.css` + `sidebar.js`. PR24.
+
+4.7 Build `login.templ`, `change_password.templ`, `forgot_password.templ`, `reset_password.templ` — using gearbox layout patterns. PR25.
+
+### Phase 5 — Extract UI JS + CSS
+
+5.1 `ui/static/js/utils/` — `dom`, `formatting`, `char-limit`, abstracted `api.js`. PR26.
+
+5.2 `ui/static/js/common/` — `focus-trap`, `keymap` (renamed), `info-tooltip`, `page-header`, `datagrid` (renamed), abstracted `header-search`, abstracted `shortcut-help`, abstracted `command-palette`. PR27.
+
+5.3 `ui/static/js/charts/` — `chart-defaults`, `chart-fullscreen`, abstracted `chart-sse`. PR28.
+
+5.4 `ui/static/css/` — `utilities`, `components/{buttons,cards,modals,datagrid}`. PR29.
+
+### Phase 6 — Gearbox cutover
+
+6.1 Add `webcore` as a `require` in `gearbox/go.mod`, optionally with `replace github.com/sarg3nt/webcore => ../webcore` while iterating locally.
+
+6.2 Per-package cutover, one at a time, smallest-blast-radius first: `errors` → `validation` → `crypto` → `migrate` → `responses` → `middleware/ratelimit` → `middleware/security_headers` → `events` → `transport/sse` → `auth` → `webauthn` → UI templ batch → UI JS batch → UI CSS batch.
+
+6.3 Each cutover step: delete the now-duplicated file from gearbox, update all imports, run `go build ./... && go test ./... && make e2e` (or whatever gearbox's full test target is), commit, PR.
+
+6.4 After cutover, **gearbox base.templ** stays in gearbox (still has gearbox-specific box-chip / breadcrumb / gear concepts), but its internal references to ui/* components now resolve via `webcore/ui/templ/`.
+
+### Phase 7 — Libation cutover
+
+7.1 Same `go.mod` add + optional `replace`.
+
+7.2 Per-package cutover, same order. Critically: after auth cutover, libation's `auth.SessionManager` becomes a thin satisfier of `webcore/core/auth.UserStore`.
+
+7.3 **Apply deferred UI work as part of this phase:**
+
+- Port gearbox's full-width fixed-top header pattern — header becomes `<header class="fixed top-0 inset-x-0 z-50">` plus `pt-[57px]` on `#main-content`.
+- Adopt richer `toast.js` from `webcore/ui/static/js/utils/toast.js` (replaces libation's stub).
+- Adopt richer `command-palette.js` from `webcore`.
+
+7.4 Run libation's full test + e2e + a11y + visual targets, fix any regressions.
+
+### Phase 8 — Tag v0.1.0
+
+8.1 Drop `replace` directives in both gearbox + libation.
+
+8.2 Tag `webcore` v0.1.0.
+
+8.3 Bump both apps to consume the tag.
+
+8.4 Document the upgrade workflow in `webcore/README.md`: bump tag, update apps, run their full tests, ship.
+
+---
+
+## 7. Open questions / risks
+
+1. **Database table coupling.** `auth` needs `users`, `audit_logs`, `password_resets`, `sessions`, `passkeys`, `smtp_settings`. Both apps have these (gearbox via `database.go`, libation via narrower files). Plan assumes apps own the tables and satisfy `UserStore` against them. Need to confirm gearbox's `users` table schema and libation's match closely enough that the interface contract works for both without each app needing schema migrations. **Action:** during PR10, write out the exact `UserStore` methods + types, validate both apps' tables against it before writing the interface.
+
+2. **`models.User` divergence.** Both apps have a `models.User`. They need to satisfy `AuthUser` interface. The interface design (above) is intentionally narrow (`ID`, `Email`, `IsAdmin`, `IsLocked`, `MustChangePassword`, `PasswordHash`) — anything richer goes in app-side methods. **Action:** make sure libation's `User` actually has all six fields before declaring the interface. Quick check during PR10.
+
+3. **CSP differences.** Gearbox CSP is strict and env-var-driven; libation has a simpler local-vs-cdn flag. Merging them in one `CSPConfig` is straightforward in theory but the field semantics need to match production needs in both apps. **Action:** read both impls' production configurations before designing `CSPConfig`.
+
+4. **Email sender abstraction.** `auth/reset.go` calls into `services/email.SendPasswordResetEmail`. Gearbox's email package reads SMTP settings from `db.GetSMTPSettings()`. Libation doesn't have password reset yet — it doesn't have an email package. **Action:** abstract via `EmailSender` interface during PR15 (`SendPasswordResetEmail(to, token, baseURL) error` etc.). Gearbox implements with its existing email service. Libation either implements with a minimal SMTP client or stubs the feature.
+
+5. **Command palette data model.** Gearbox's `command-palette.js` consumes JSON islands for boxes/gears/pages plus `window.gearbox.commands` for per-page actions. Generalising requires defining a stable shape (e.g. `{label, group, action, href, kbd}`) and a registration API (`WebCore.CommandPalette.register(group, items)`). **Action:** spec the API in PR27 design notes before lifting.
+
+6. **Build-time tailwind.** Currently both apps use Tailwind via CDN (`https://cdn.tailwindcss.com`). With shared components, classnames are duplicated across two repos but Tailwind itself runs in each. **Action:** no change — both apps keep their CDN/local Tailwind setup. The shared CSS files in `webcore/ui/static/css/` use `@apply` directives that resolve at runtime when Tailwind's JIT sees them in the served HTML. Verify this works across an `embed.FS` boundary before committing.
+
+7. **Local development workflow.** During cutover, contributors will want `webcore` edits to be visible in gearbox + libation without publishing. The `replace github.com/sarg3nt/webcore => ../webcore` directive handles this, and `air` already watches Go source. But static asset edits in `webcore` need to be re-embedded into webcore's binary then surfaced to consumers. Since static assets are served from `webcore/ui/static/`, and each app imports them via `webcore/ui.StaticFiles`, the consumer apps need their air to also re-embed when webcore static files change. **Action:** document in `webcore/README.md`. Simplest workflow: when editing `ui/static/*`, run `touch` on the consumer app's go file to force air rebuild + re-embed.
+
+---
+
+## 8. How to resume after restart
+
+If you're a fresh Claude session opening this file: read sections 1–4 (decisions + context + architecture + inventory) in full. Section 5 (cleanup) + 6 (execution) are the operational plan; start at **Phase 0** unless the user says otherwise.
+
+Before writing any code, run these sanity checks:
+
+```bash
+# 1. Confirm webcore repo state
+ls /Users/dave/src/webcore 2>/dev/null && echo "Repo exists, check phase progress"
+
+# 2. Check libation deferred work hasn't been done yet
+grep -q 'fixed top-0 inset-x-0' /Users/dave/src/libation/internal/framework/templates/layouts/base.templ \
+  && echo "Header already ported — check git log for current phase"
+
+# 3. Check gearbox cleanup progress
+ls /Users/dave/src/gearbox/gearbox/internal/framework/templates/components/table.templ \
+   /Users/dave/src/gearbox/gearbox/internal/framework/ui/table.templ 2>/dev/null \
+  && echo "table.templ still duplicated — Phase 4.3 not done"
+
+# 4. Confirm libation dev server state
+lsof -i :3001 -P 2>/dev/null | grep LISTEN \
+  || echo "Libation dev not running — user may need to restart 'make dev'"
+
+# 5. Verify libation UI fixes from prior session are still in tree
+grep -q 'top-4 right-4' /Users/dave/src/libation/internal/framework/ui/toast.templ \
+  && echo "Libation toast position fix intact"
+grep -q 'sidebar-collapsed' /Users/dave/src/libation/assets/static/css/sidebar.css \
+  && echo "Libation sidebar.css fix intact"
+```
+
+If any of those flag unexpected state, stop and ask the user what changed since this plan was written.
+
+### Pending non-extraction work to remember
+
+- Libation UI deferred work (full-width fixed-top header + richer toast/command-palette) lands in **Phase 7.3**, not standalone.
+- Libation UI fixes from the same session as this plan (sidebar fixed, toast top-right, collapse smooth, `.air.toml` includes js/css) are **uncommitted** — user may want them committed separately before extraction starts.
+
+### What to ask the user first when you resume
+
+1. Has the `webcore` GitHub repo been created? If yes, has it been cloned to `/Users/dave/src/webcore`?
+2. Should the libation UI fixes from this session be committed to libation before any webcore work starts, or rolled into the libation cutover (Phase 7)?
+3. Any change to the decisions in section 1 since this plan was written?
+4. Continue at Phase 0 or skip to a later phase if any progress was made offline?
+
+---
+
+## 9. Appendix: source-of-truth file inventory
+
+### Gearbox (full superset)
+
+```text
+/Users/dave/src/gearbox/gearbox/internal/framework/
+├── auth/                  (8 files, ~2300 LOC)
+├── middleware/            (726 LOC)
+├── errors/                (no libation equivalent)
+├── events/                (gearbox Hub — richer than libation Bus)
+├── validation/            (no libation equivalent)
+├── responses/             (heavy domain coupling — partial lift)
+├── services/crypto/       (parity with libation)
+├── services/email/        (gearbox only for now)
+├── database/migrate_manager.go
+├── ui/{alerts,badge,collapsible,icons,live_refresh,modal,table,toast,toggle}.templ
+└── templates/components/{console,container_diagram,doughnut,helpers.go,info_tooltip,live_refresh,metrics,settings,table}.templ
+/Users/dave/src/gearbox/gearbox/static/
+├── js/utils/{api,char-limit,dom,formatting,toast}.js
+├── js/common/{box-selector,command-palette,datagrid,focus-trap,gear-commands,header-search,info-tooltip,keymap,page-header,shortcut-help}.js
+├── js/charts/{chart-defaults,chart-fullscreen,chart-sse}.js
+└── css/{utilities.css, components/{buttons,cards,console,datagrid,home,modals}.css, firewall_config_editor.css, haproxy_config_editor.css}
+```
+
+### Libation (narrower, occasionally cleaner shape)
+
+```text
+/Users/dave/src/libation/internal/framework/
+├── auth/                  (4 files, 680 LOC — cleaner SessionManager + WebAuthn split)
+├── middleware/            (473 LOC, includes RequirePasswordChange)
+├── database/              (32-line database.go — cleaner than gearbox's 1137-line file)
+├── ui/{badge,icons,modal,toast,toggle}.templ
+└── templates/{layouts/{base,sidebar,header}.templ, pages/*.templ}
+/Users/dave/src/libation/assets/static/
+├── js/{command-palette,dashboard-chart,event-bus,library-grid,profile-menu,sidebar,sse,template-preview,toast,webauthn}.js
+└── css/{sidebar.css (new), utilities.css, vendor/}
+```
diff --git a/gearbox/go.mod b/gearbox/go.mod
index a9ab876..85760a8 100644
--- a/gearbox/go.mod
+++ b/gearbox/go.mod
@@ -3,23 +3,23 @@ module github.com/sarg3nt/gearbox
 go 1.25.5
 
 require (
-	github.com/a-h/templ v0.3.977
+	github.com/a-h/templ v0.3.1020
 	github.com/go-chi/chi/v5 v5.2.5
-	github.com/go-webauthn/webauthn v0.17.3
+	github.com/go-webauthn/webauthn v0.17.4
 	github.com/golang-migrate/migrate/v4 v4.19.1
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/sessions v1.4.0
 	github.com/gorilla/websocket v1.5.3
 	github.com/wagslane/go-password-validator v0.3.0
-	golang.org/x/crypto v0.51.0
-	modernc.org/sqlite v1.46.1
+	golang.org/x/crypto v0.52.0
+	modernc.org/sqlite v1.50.1
 )
 
 require (
 	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/fxamacker/cbor/v2 v2.9.2 // indirect
 	github.com/go-viper/mapstructure/v2 v2.5.0 // indirect
-	github.com/go-webauthn/x v0.2.5 // indirect
+	github.com/go-webauthn/x v0.2.6 // indirect
 	github.com/golang-jwt/jwt/v5 v5.3.1 // indirect
 	github.com/google/go-tpm v0.9.8 // indirect
 	github.com/gorilla/securecookie v1.1.2 // indirect
@@ -27,11 +27,13 @@ require (
 	github.com/ncruces/go-strftime v1.0.0 // indirect
 	github.com/philhofer/fwd v1.2.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
+	github.com/sarg3nt/webcore v0.0.0
 	github.com/tinylib/msgp v1.6.4 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
-	golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546 // indirect
-	golang.org/x/sys v0.44.0 // indirect
-	modernc.org/libc v1.67.6 // indirect
+	golang.org/x/sys v0.45.0 // indirect
+	modernc.org/libc v1.72.3 // indirect
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
 )
+
+replace github.com/sarg3nt/webcore => ../../webcore
diff --git a/gearbox/go.sum b/gearbox/go.sum
index 21e37b1..fcc31a2 100644
--- a/gearbox/go.sum
+++ b/gearbox/go.sum
@@ -1,5 +1,5 @@
-github.com/a-h/templ v0.3.977 h1:kiKAPXTZE2Iaf8JbtM21r54A8bCNsncrfnokZZSrSDg=
-github.com/a-h/templ v0.3.977/go.mod h1:oCZcnKRf5jjsGpf2yELzQfodLphd2mwecwG4Crk5HBo=
+github.com/a-h/templ v0.3.1020 h1:ypAT/L5ySWEnZ6Zft/5yfoWXYYkhFNvEFOeeqecg4tw=
+github.com/a-h/templ v0.3.1020/go.mod h1:A2DlK61v+K+NRoGnhmYbNYVmtYHcFO5/AisMvBdDxTM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc h1:U9qPSI2PIWSS1VwoXQT9A3Wy9MM3WgvqSxFWenqJduM=
 github.com/davecgh/go-spew v1.1.2-0.20180830191138-d8f796af33cc/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
@@ -10,10 +10,10 @@ github.com/go-chi/chi/v5 v5.2.5 h1:Eg4myHZBjyvJmAFjFvWgrqDTXFyOzjj7YIm3L3mu6Ug=
 github.com/go-chi/chi/v5 v5.2.5/go.mod h1:X7Gx4mteadT3eDOMTsXzmI4/rwUpOwBHLpAfupzFJP0=
 github.com/go-viper/mapstructure/v2 v2.5.0 h1:vM5IJoUAy3d7zRSVtIwQgBj7BiWtMPfmPEgAXnvj1Ro=
 github.com/go-viper/mapstructure/v2 v2.5.0/go.mod h1:oJDH3BJKyqBA2TXFhDsKDGDTlndYOZ6rGS0BRZIxGhM=
-github.com/go-webauthn/webauthn v0.17.3 h1:XHZ0TXV7k8vChcE4TFgPitOPJ5cb7h1dpAeFDS0cjCo=
-github.com/go-webauthn/webauthn v0.17.3/go.mod h1:PlkMgmuL9McCT7dvgBj/Sz/fgs3V6ZID6/KnFkEcPvQ=
-github.com/go-webauthn/x v0.2.5 h1:wEVTfU04XFyPTXGQbKOQwMKhcDWfDAkdsDDBsDaG9yY=
-github.com/go-webauthn/x v0.2.5/go.mod h1:Qna/yJz9rV6lRzwl5BfYbmTJpVGxcBIds3gJtw2tlGg=
+github.com/go-webauthn/webauthn v0.17.4 h1:KFTSz3R2RYDiUn/0cDi3XTJgFenSG74eKTTHlqWhlxk=
+github.com/go-webauthn/webauthn v0.17.4/go.mod h1:pZk63EE/BdztlmyS4Yc+9H5g4a8blNlbtGmdHQHbZX8=
+github.com/go-webauthn/x v0.2.6 h1:TEyDuQAIiEgYpx60nKiBJIX/5nSUC8LxNbH+uf5U9uk=
+github.com/go-webauthn/x v0.2.6/go.mod h1:45bA7YEqyQhRcQJ/TiBb46Ww8yqHBGvgEhQ3WWF0aDo=
 github.com/golang-jwt/jwt/v5 v5.3.1 h1:kYf81DTWFe7t+1VvL7eS+jKFVWaUnK9cB1qbwn63YCY=
 github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
 github.com/golang-migrate/migrate/v4 v4.19.1 h1:OCyb44lFuQfYXYLx1SCxPZQGU7mcaZ7gH9yH4jSFbBA=
@@ -60,45 +60,43 @@ github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
 github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 go.uber.org/mock v0.6.0 h1:hyF9dfmbgIX5EfOdasqLsWD6xqpNZlXblLB/Dbnwv3Y=
 go.uber.org/mock v0.6.0/go.mod h1:KiVJ4BqZJaMj4svdfmHM0AUx4NJYO8ZNpPnZn1Z+BBU=
-golang.org/x/crypto v0.51.0 h1:IBPXwPfKxY7cWQZ38ZCIRPI50YLeevDLlLnyC5wRGTI=
-golang.org/x/crypto v0.51.0/go.mod h1:8AdwkbraGNABw2kOX6YFPs3WM22XqI4EXEd8g+x7Oc8=
-golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546 h1:mgKeJMpvi0yx/sU5GsxQ7p6s2wtOnGAHZWCHUM4KGzY=
-golang.org/x/exp v0.0.0-20251023183803-a4bb9ffd2546/go.mod h1:j/pmGrbnkbPtQfxEe5D0VQhZC6qKbfKifgD0oM7sR70=
-golang.org/x/mod v0.29.0 h1:HV8lRxZC4l2cr3Zq1LvtOsi/ThTgWnUk/y64QSs8GwA=
-golang.org/x/mod v0.29.0/go.mod h1:NyhrlYXJ2H4eJiRy/WDBO6HMqZQ6q9nk4JzS3NuCK+w=
-golang.org/x/sync v0.18.0 h1:kr88TuHDroi+UVf+0hZnirlk8o8T+4MrK6mr60WkH/I=
-golang.org/x/sync v0.18.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
+golang.org/x/crypto v0.52.0 h1:RMs7fP2rXdep0CftQlK8Uf+kibLm7qkCcradZWYz988=
+golang.org/x/crypto v0.52.0/go.mod h1:1QgfPxDqh0T2M/elOJtp9RvuR95kVjir0e6/BvEmGbc=
+golang.org/x/mod v0.33.0 h1:tHFzIWbBifEmbwtGz65eaWyGiGZatSrT9prnU8DbVL8=
+golang.org/x/mod v0.33.0/go.mod h1:swjeQEj+6r7fODbD2cqrnje9PnziFuw4bmLbBZFrQ5w=
+golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
+golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.44.0 h1:ildZl3J4uzeKP07r2F++Op7E9B29JRUy+a27EibtBTQ=
-golang.org/x/sys v0.44.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
-golang.org/x/tools v0.38.0 h1:Hx2Xv8hISq8Lm16jvBZ2VQf+RLmbd7wVUsALibYI/IQ=
-golang.org/x/tools v0.38.0/go.mod h1:yEsQ/d/YK8cjh0L6rZlY8tgtlKiBNTL14pGDJPJpYQs=
+golang.org/x/sys v0.45.0 h1:dO4czNzziLiiXplLQgBCEpCvXQ3dnkn0SdaZSYdQ+FY=
+golang.org/x/sys v0.45.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/tools v0.42.0 h1:uNgphsn75Tdz5Ji2q36v/nsFSfR/9BRFvqhGBaJGd5k=
+golang.org/x/tools v0.42.0/go.mod h1:Ma6lCIwGZvHK6XtgbswSoWroEkhugApmsXyrUmBhfr0=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
-modernc.org/cc/v4 v4.27.1 h1:9W30zRlYrefrDV2JE2O8VDtJ1yPGownxciz5rrbQZis=
-modernc.org/cc/v4 v4.27.1/go.mod h1:uVtb5OGqUKpoLWhqwNQo/8LwvoiEBLvZXIQ/SmO6mL0=
-modernc.org/ccgo/v4 v4.30.1 h1:4r4U1J6Fhj98NKfSjnPUN7Ze2c6MnAdL0hWw6+LrJpc=
-modernc.org/ccgo/v4 v4.30.1/go.mod h1:bIOeI1JL54Utlxn+LwrFyjCx2n2RDiYEaJVSrgdrRfM=
-modernc.org/fileutil v1.3.40 h1:ZGMswMNc9JOCrcrakF1HrvmergNLAmxOPjizirpfqBA=
-modernc.org/fileutil v1.3.40/go.mod h1:HxmghZSZVAz/LXcMNwZPA/DRrQZEVP9VX0V4LQGQFOc=
+modernc.org/cc/v4 v4.28.2 h1:3tQ0lf2ADtoby2EtSP+J7IE2SHwEJdP8ioR59wx7XpY=
+modernc.org/cc/v4 v4.28.2/go.mod h1:OnovgIhbbMXMu1aISnJ0wvVD1KnW+cAUJkIrAWh+kVI=
+modernc.org/ccgo/v4 v4.34.0 h1:yRLPFZieg532OT4rp4JFNIVcquwalMX26G95WQDqwCQ=
+modernc.org/ccgo/v4 v4.34.0/go.mod h1:AS5WYMyBakQ+fhsHhtP8mWB82KTGPkNNJDGfGQCe0/A=
+modernc.org/fileutil v1.4.0 h1:j6ZzNTftVS054gi281TyLjHPp6CPHr2KCxEXjEbD6SM=
+modernc.org/fileutil v1.4.0/go.mod h1:EqdKFDxiByqxLk8ozOxObDSfcVOv/54xDs/DUHdvCUU=
 modernc.org/gc/v2 v2.6.5 h1:nyqdV8q46KvTpZlsw66kWqwXRHdjIlJOhG6kxiV/9xI=
 modernc.org/gc/v2 v2.6.5/go.mod h1:YgIahr1ypgfe7chRuJi2gD7DBQiKSLMPgBQe9oIiito=
-modernc.org/gc/v3 v3.1.1 h1:k8T3gkXWY9sEiytKhcgyiZ2L0DTyCQ/nvX+LoCljoRE=
-modernc.org/gc/v3 v3.1.1/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
+modernc.org/gc/v3 v3.1.2 h1:ZtDCnhonXSZexk/AYsegNRV1lJGgaNZJuKjJSWKyEqo=
+modernc.org/gc/v3 v3.1.2/go.mod h1:HFK/6AGESC7Ex+EZJhJ2Gni6cTaYpSMmU/cT9RmlfYY=
 modernc.org/goabi0 v0.2.0 h1:HvEowk7LxcPd0eq6mVOAEMai46V+i7Jrj13t4AzuNks=
 modernc.org/goabi0 v0.2.0/go.mod h1:CEFRnnJhKvWT1c1JTI3Avm+tgOWbkOu5oPA8eH8LnMI=
-modernc.org/libc v1.67.6 h1:eVOQvpModVLKOdT+LvBPjdQqfrZq+pC39BygcT+E7OI=
-modernc.org/libc v1.67.6/go.mod h1:JAhxUVlolfYDErnwiqaLvUqc8nfb2r6S6slAgZOnaiE=
+modernc.org/libc v1.72.3 h1:ZnDF4tXn4NBXFutMMQC4vtbTFSXhhKzR73fv0beZEAU=
+modernc.org/libc v1.72.3/go.mod h1:dn0dZNnnn1clLyvRxLxYExxiKRZIRENOfqQ8XEeg4Qs=
 modernc.org/mathutil v1.7.1 h1:GCZVGXdaN8gTqB1Mf/usp1Y/hSqgI2vAGGP4jZMCxOU=
 modernc.org/mathutil v1.7.1/go.mod h1:4p5IwJITfppl0G4sUEDtCr4DthTaT47/N3aT6MhfgJg=
 modernc.org/memory v1.11.0 h1:o4QC8aMQzmcwCK3t3Ux/ZHmwFPzE6hf2Y5LbkRs+hbI=
 modernc.org/memory v1.11.0/go.mod h1:/JP4VbVC+K5sU2wZi9bHoq2MAkCnrt2r98UGeSK7Mjw=
-modernc.org/opt v0.1.4 h1:2kNGMRiUjrp4LcaPuLY2PzUfqM/w9N23quVwhKt5Qm8=
-modernc.org/opt v0.1.4/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
+modernc.org/opt v0.2.0 h1:tGyef5ApycA7FSEOMraay9SaTk5zmbx7Tu+cJs4QKZg=
+modernc.org/opt v0.2.0/go.mod h1:03fq9lsNfvkYSfxrfUhZCWPk1lm4cq4N+Bh//bEtgns=
 modernc.org/sortutil v1.2.1 h1:+xyoGf15mM3NMlPDnFqrteY07klSFxLElE2PVuWIJ7w=
 modernc.org/sortutil v1.2.1/go.mod h1:7ZI3a3REbai7gzCLcotuw9AC4VZVpYMjDzETGsSMqJE=
-modernc.org/sqlite v1.46.1 h1:eFJ2ShBLIEnUWlLy12raN0Z1plqmFX9Qe3rjQTKt6sU=
-modernc.org/sqlite v1.46.1/go.mod h1:CzbrU2lSB1DKUusvwGz7rqEKIq+NUd8GWuBBZDs9/nA=
+modernc.org/sqlite v1.50.1 h1:l+cQvn0sd0zJJtfygGHuQJ5AjlrwXmWPw4KP3ZMwr9w=
+modernc.org/sqlite v1.50.1/go.mod h1:tcNzv5p84E0skkmJn038y+hWJbLQXQqEnQfeh5r2JLM=
 modernc.org/strutil v1.2.1 h1:UneZBkQA+DX2Rp35KcM69cSsNES9ly8mQWD71HKlOA0=
 modernc.org/strutil v1.2.1/go.mod h1:EHkiggD70koQxjVdSBM3JKM7k6L0FbGE5eymy9i3B9A=
 modernc.org/token v1.1.0 h1:Xl7Ap9dKaEs5kLoOQeQmPWevfnk/DM5qcLcYlA8ys6Y=
diff --git a/gearbox/internal/framework/errors/errors.go b/gearbox/internal/framework/errors/errors.go
deleted file mode 100644
index 5482a45..0000000
--- a/gearbox/internal/framework/errors/errors.go
+++ /dev/null
@@ -1,241 +0,0 @@
-// Package errors provides error sanitization and structured error handling
-// for the HAProxy monitoring application.
-//
-// This package implements a centralized error handling system that:
-//   - Sanitizes internal errors before exposing them to users
-//   - Provides structured logging for error diagnosis
-//   - Maintains consistent HTTP status codes across the application
-//   - Separates user-facing messages from internal error details
-//
-// Example usage:
-//
-//	// In an HTTP handler:
-//	user, err := db.GetUser(id)
-//	if err != nil {
-//	    errors.WriteHTTPError(w, logger, errors.Internal("fetch user", err))
-//	    return
-//	}
-//
-//	// Or using specific error constructors:
-//	if !authorized {
-//	    errors.WriteHTTPError(w, logger, errors.Forbidden("Access denied", nil))
-//	    return
-//	}
-package errors
-
-import (
-	"context"
-	"database/sql"
-	"encoding/json"
-	"errors"
-	"fmt"
-	"log/slog"
-	"net/http"
-)
-
-// AppError represents a structured application error with user-safe message
-// and internal details for logging.
-type AppError struct {
-	// Code is the HTTP status code
-	Code int
-	// UserMessage is safe to display to end users
-	UserMessage string
-	// InternalError contains the actual error (logged but not shown to user)
-	InternalError error
-	// LogContext contains additional context for structured logging
-	LogContext map[string]any
-}
-
-// Error implements the error interface.
-func (e *AppError) Error() string {
-	if e.InternalError != nil {
-		return fmt.Sprintf("%s: %v", e.UserMessage, e.InternalError)
-	}
-	return e.UserMessage
-}
-
-// Unwrap implements error unwrapping for errors.Is and errors.As.
-func (e *AppError) Unwrap() error {
-	return e.InternalError
-}
-
-// ErrorType represents common error categories.
-type ErrorType string
-
-const (
-	ErrorTypeNotFound      ErrorType = "not_found"
-	ErrorTypeUnauthorized  ErrorType = "unauthorized"
-	ErrorTypeForbidden     ErrorType = "forbidden"
-	ErrorTypeBadRequest    ErrorType = "bad_request"
-	ErrorTypeInternal      ErrorType = "internal_error"
-	ErrorTypeServiceUnavailable ErrorType = "service_unavailable"
-	ErrorTypeConflict      ErrorType = "conflict"
-)
-
-// New creates a new AppError with the given parameters.
-func New(code int, userMsg string, internalErr error) *AppError {
-	return &AppError{
-		Code:          code,
-		UserMessage:   userMsg,
-		InternalError: internalErr,
-		LogContext:    make(map[string]any),
-	}
-}
-
-// WithContext adds structured logging context to the error.
-func (e *AppError) WithContext(key string, value any) *AppError {
-	e.LogContext[key] = value
-	return e
-}
-
-// Common error constructors
-
-// NotFound creates a 404 error.
-func NotFound(resource string, internalErr error) *AppError {
-	return New(
-		http.StatusNotFound,
-		fmt.Sprintf("%s not found", resource),
-		internalErr,
-	).WithContext("resource", resource)
-}
-
-// Unauthorized creates a 401 error.
-func Unauthorized(message string, internalErr error) *AppError {
-	return New(http.StatusUnauthorized, message, internalErr)
-}
-
-// Forbidden creates a 403 error.
-func Forbidden(message string, internalErr error) *AppError {
-	return New(http.StatusForbidden, message, internalErr)
-}
-
-// BadRequest creates a 400 error.
-func BadRequest(message string, internalErr error) *AppError {
-	return New(http.StatusBadRequest, message, internalErr)
-}
-
-// Internal creates a 500 error with a generic user message.
-func Internal(operation string, internalErr error) *AppError {
-	return New(
-		http.StatusInternalServerError,
-		fmt.Sprintf("Failed to %s. Please try again later.", operation),
-		internalErr,
-	).WithContext("operation", operation)
-}
-
-// ServiceUnavailable creates a 503 error.
-func ServiceUnavailable(service string, internalErr error) *AppError {
-	return New(
-		http.StatusServiceUnavailable,
-		fmt.Sprintf("%s is currently unavailable", service),
-		internalErr,
-	).WithContext("service", service)
-}
-
-// Conflict creates a 409 error.
-func Conflict(message string, internalErr error) *AppError {
-	return New(http.StatusConflict, message, internalErr)
-}
-
-// WrapDatabaseError converts database errors to appropriate AppErrors.
-// Use this for database operations where ErrNoRows is unexpected.
-func WrapDatabaseError(err error, operation string) *AppError {
-	if err == nil {
-		return nil
-	}
-
-	// Handle specific database errors
-	if errors.Is(err, sql.ErrNoRows) {
-		return NotFound("Resource", err)
-	}
-
-	// Generic database error - don't expose internal details
-	return Internal(operation, err)
-}
-
-// IsNotFound checks if an error is sql.ErrNoRows.
-// Use this helper when ErrNoRows is expected behavior (e.g., optional lookups).
-func IsNotFound(err error) bool {
-	return errors.Is(err, sql.ErrNoRows)
-}
-
-// IgnoreNotFound returns nil if the error is sql.ErrNoRows, otherwise returns the error.
-// Use this when a record not existing is acceptable/expected behavior.
-func IgnoreNotFound(err error) error {
-	if errors.Is(err, sql.ErrNoRows) {
-		return nil
-	}
-	return err
-}
-
-// WriteHTTPError writes an AppError to an HTTP response and logs it.
-//
-// The wire format is a JSON envelope: `{"success": false, "message": "..."}`
-// with `Content-Type: application/json`. This matches the shape produced by
-// Handler.jsonError() and lets the frontend `response.json()` parse error
-// responses just like success responses — historically this used
-// `http.Error` (plain text), which caused JS callers that unconditionally
-// `JSON.parse` the body to throw `Unexpected token 'F', "Failed to "...`
-// (see issue #112 for the user-visible symptom on the Logs and Services
-// pages).
-func WriteHTTPError(w http.ResponseWriter, logger *slog.Logger, err error) {
-	var appErr *AppError
-
-	// Convert to AppError if not already
-	if !errors.As(err, &appErr) {
-		// Unknown error - create generic internal error
-		appErr = Internal("process request", err)
-	}
-
-	// Log the error with full details
-	logAttrs := []slog.Attr{
-		slog.Int("status_code", appErr.Code),
-		slog.String("user_message", appErr.UserMessage),
-	}
-
-	if appErr.InternalError != nil {
-		logAttrs = append(logAttrs, slog.String("internal_error", appErr.InternalError.Error()))
-	}
-
-	// Add context fields
-	for key, value := range appErr.LogContext {
-		logAttrs = append(logAttrs, slog.Any(key, value))
-	}
-
-	logger.LogAttrs(context.Background(), slog.LevelError, "HTTP error", logAttrs...)
-
-	// Write sanitized error to client as a JSON envelope so JS callers can
-	// `response.json()` it without throwing on plain-text bodies.
-	w.Header().Set("Content-Type", "application/json")
-	w.WriteHeader(appErr.Code)
-	if encErr := json.NewEncoder(w).Encode(map[string]any{
-		"success": false,
-		"message": appErr.UserMessage,
-	}); encErr != nil {
-		// Encoding can fail only if the writer is broken — the header is
-		// already on the wire so we can't recover the response, just log.
-		logger.LogAttrs(context.Background(), slog.LevelError, "encode error envelope failed",
-			slog.String("error", encErr.Error()))
-	}
-}
-
-// SanitizeError converts any error to a user-safe message.
-// This is a fallback for cases where structured errors aren't used.
-func SanitizeError(err error) string {
-	if err == nil {
-		return ""
-	}
-
-	var appErr *AppError
-	if errors.As(err, &appErr) {
-		return appErr.UserMessage
-	}
-
-	// Database errors
-	if errors.Is(err, sql.ErrNoRows) {
-		return "Resource not found"
-	}
-
-	// Generic fallback - never expose internal error details
-	return "An error occurred. Please try again later."
-}
diff --git a/gearbox/internal/framework/errors/errors_writehttp_test.go b/gearbox/internal/framework/errors/errors_writehttp_test.go
deleted file mode 100644
index 54622d0..0000000
--- a/gearbox/internal/framework/errors/errors_writehttp_test.go
+++ /dev/null
@@ -1,64 +0,0 @@
-package errors
-
-import (
-	"encoding/json"
-	"io"
-	"log/slog"
-	"net/http"
-	"net/http/httptest"
-	"strings"
-	"testing"
-)
-
-// TestWriteHTTPError_JSONEnvelope guards the wire format consumers of
-// WriteHTTPError rely on — Logs page, Services page, and any other JS that
-// calls `response.json()` on both success and error responses. Historically
-// WriteHTTPError emitted `text/plain` ("Failed to ...") which caused
-// `JSON.parse` to throw `Unexpected token 'F'` in the browser; the fix in
-// issue #112 standardizes on a JSON envelope.
-func TestWriteHTTPError_JSONEnvelope(t *testing.T) {
-	logger := slog.New(slog.NewTextHandler(io.Discard, nil))
-	w := httptest.NewRecorder()
-
-	WriteHTTPError(w, logger, Internal("fetch logs", io.EOF))
-
-	if got := w.Header().Get("Content-Type"); !strings.Contains(got, "application/json") {
-		t.Fatalf("Content-Type = %q, want application/json", got)
-	}
-	if got := w.Code; got != http.StatusInternalServerError {
-		t.Fatalf("Status = %d, want 500", got)
-	}
-
-	var body map[string]any
-	if err := json.Unmarshal(w.Body.Bytes(), &body); err != nil {
-		t.Fatalf("response body is not JSON: %v\nbody=%q", err, w.Body.String())
-	}
-	if body["success"] != false {
-		t.Errorf("body.success = %v, want false", body["success"])
-	}
-	msg, _ := body["message"].(string)
-	if !strings.Contains(msg, "fetch logs") {
-		t.Errorf("body.message = %q, want it to contain 'fetch logs'", msg)
-	}
-}
-
-// TestWriteHTTPError_UnknownErrorWraps verifies that a plain error (not an
-// AppError) still serializes as a JSON envelope with the generic
-// "process request" wrapping that Internal() produces.
-func TestWriteHTTPError_UnknownErrorWraps(t *testing.T) {
-	logger := slog.New(slog.NewTextHandler(io.Discard, nil))
-	w := httptest.NewRecorder()
-
-	WriteHTTPError(w, logger, io.ErrUnexpectedEOF)
-
-	if got := w.Header().Get("Content-Type"); !strings.Contains(got, "application/json") {
-		t.Fatalf("Content-Type = %q, want application/json", got)
-	}
-	var body map[string]any
-	if err := json.Unmarshal(w.Body.Bytes(), &body); err != nil {
-		t.Fatalf("response body is not JSON: %v\nbody=%q", err, w.Body.String())
-	}
-	if body["success"] != false {
-		t.Errorf("body.success = %v, want false", body["success"])
-	}
-}
diff --git a/gearbox/internal/framework/handler/alerts.go b/gearbox/internal/framework/handler/alerts.go
index 060bb75..c13cc3b 100644
--- a/gearbox/internal/framework/handler/alerts.go
+++ b/gearbox/internal/framework/handler/alerts.go
@@ -9,7 +9,7 @@ import (
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 )
diff --git a/gearbox/internal/framework/handler/api_certificates.go b/gearbox/internal/framework/handler/api_certificates.go
index fa74c0a..6dd0d72 100644
--- a/gearbox/internal/framework/handler/api_certificates.go
+++ b/gearbox/internal/framework/handler/api_certificates.go
@@ -6,7 +6,7 @@ import (
 
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 )
 
diff --git a/gearbox/internal/framework/handler/api_logs.go b/gearbox/internal/framework/handler/api_logs.go
index 69c75e7..ce95410 100644
--- a/gearbox/internal/framework/handler/api_logs.go
+++ b/gearbox/internal/framework/handler/api_logs.go
@@ -4,7 +4,7 @@ import (
 	"net/http"
 
 	"github.com/go-chi/chi/v5"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 )
 
diff --git a/gearbox/internal/framework/handler/api_services.go b/gearbox/internal/framework/handler/api_services.go
index 4b3503b..d443dfa 100644
--- a/gearbox/internal/framework/handler/api_services.go
+++ b/gearbox/internal/framework/handler/api_services.go
@@ -9,7 +9,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/gears/services"
 )
diff --git a/gearbox/internal/framework/handler/api_traffic.go b/gearbox/internal/framework/handler/api_traffic.go
index bd52939..f322bcb 100644
--- a/gearbox/internal/framework/handler/api_traffic.go
+++ b/gearbox/internal/framework/handler/api_traffic.go
@@ -10,7 +10,7 @@ import (
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 )
 
diff --git a/gearbox/internal/framework/handler/backup.go b/gearbox/internal/framework/handler/backup.go
index b9dbbf8..b60bbad 100644
--- a/gearbox/internal/framework/handler/backup.go
+++ b/gearbox/internal/framework/handler/backup.go
@@ -10,7 +10,7 @@ import (
 
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 )
 
diff --git a/gearbox/internal/framework/handler/config.go b/gearbox/internal/framework/handler/config.go
index 5900061..7be3518 100644
--- a/gearbox/internal/framework/handler/config.go
+++ b/gearbox/internal/framework/handler/config.go
@@ -11,7 +11,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 )
diff --git a/gearbox/internal/framework/handler/security.go b/gearbox/internal/framework/handler/security.go
index 3999128..39dda2a 100644
--- a/gearbox/internal/framework/handler/security.go
+++ b/gearbox/internal/framework/handler/security.go
@@ -7,7 +7,7 @@ import (
 
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 )
diff --git a/gearbox/internal/framework/handler/users.go b/gearbox/internal/framework/handler/users.go
index 4108c6c..947de88 100644
--- a/gearbox/internal/framework/handler/users.go
+++ b/gearbox/internal/framework/handler/users.go
@@ -11,7 +11,7 @@ import (
 
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
-	apperrors "github.com/sarg3nt/gearbox/internal/framework/errors"
+	apperrors "github.com/sarg3nt/webcore/core/errors"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
 )

From 10e3e7460d1d11769a92bb7c0ae3e11e4ee1875e Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 29 May 2026 09:33:42 -0700
Subject: [PATCH 2/8] refactor(gearbox): adopt webcore/core/crypto

Repoint services/crypto imports to webcore/core/crypto; main.go uses
crypto.NewFromHashedKey (the legacy SHA-256 derivation) so existing at-rest
encrypted data (server API keys, git PATs) still decrypts. Delete the
duplicated internal package.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 gearbox/cmd/server/main.go                    |   4 +-
 gearbox/internal/framework/handler/handler.go |   2 +-
 .../framework/handler/haproxy_config.go       |   2 +-
 .../services/agent_keyring/rotator.go         |   2 +-
 .../services/agent_keyring/rotator_test.go    |   2 +-
 .../framework/services/auth_adapter.go        |   2 +-
 .../framework/services/crypto/encryption.go   | 116 ------------------
 .../framework/services/server_adapter.go      |   2 +-
 gearbox/internal/gears/home/handlers.go       |   2 +-
 gearbox/internal/gears/home/widget_runner.go  |   2 +-
 10 files changed, 10 insertions(+), 126 deletions(-)
 delete mode 100644 gearbox/internal/framework/services/crypto/encryption.go

diff --git a/gearbox/cmd/server/main.go b/gearbox/cmd/server/main.go
index e33b5c6..dc8a48f 100644
--- a/gearbox/cmd/server/main.go
+++ b/gearbox/cmd/server/main.go
@@ -27,7 +27,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/services"
 	"github.com/sarg3nt/gearbox/internal/framework/services/agent_keyring"
 	"github.com/sarg3nt/gearbox/internal/framework/services/alerts"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 	"github.com/sarg3nt/gearbox/internal/framework/services/email"
 
 	// Import gears - blank identifier triggers init() registration
@@ -188,7 +188,7 @@ func main() {
 	logger.Info("email service initialized")
 
 	// Initialize encryptor for secrets
-	encryptor, err := crypto.NewEncryptor(cfg.SessionSecret)
+	encryptor, err := crypto.NewFromHashedKey(cfg.SessionSecret)
 	if err != nil {
 		log.Fatalf("Failed to create encryptor: %v", err)
 	}
diff --git a/gearbox/internal/framework/handler/handler.go b/gearbox/internal/framework/handler/handler.go
index 2d3fd3c..77a29f4 100644
--- a/gearbox/internal/framework/handler/handler.go
+++ b/gearbox/internal/framework/handler/handler.go
@@ -13,7 +13,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/events"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 	"github.com/sarg3nt/gearbox/internal/framework/services/email"
 	"github.com/sarg3nt/gearbox/internal/framework/services/geoip"
 )
diff --git a/gearbox/internal/framework/handler/haproxy_config.go b/gearbox/internal/framework/handler/haproxy_config.go
index 221d8f6..a2be88a 100644
--- a/gearbox/internal/framework/handler/haproxy_config.go
+++ b/gearbox/internal/framework/handler/haproxy_config.go
@@ -11,7 +11,7 @@ import (
 	"github.com/go-chi/chi/v5"
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/auth"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/pages"
diff --git a/gearbox/internal/framework/services/agent_keyring/rotator.go b/gearbox/internal/framework/services/agent_keyring/rotator.go
index 44ae8f7..8b790d3 100644
--- a/gearbox/internal/framework/services/agent_keyring/rotator.go
+++ b/gearbox/internal/framework/services/agent_keyring/rotator.go
@@ -20,7 +20,7 @@ import (
 
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 )
 
 // DefaultOverlapWindow is the time that elapses between flipping
diff --git a/gearbox/internal/framework/services/agent_keyring/rotator_test.go b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
index 77ee50c..e38fc9e 100644
--- a/gearbox/internal/framework/services/agent_keyring/rotator_test.go
+++ b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
@@ -16,7 +16,7 @@ import (
 	"time"
 
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	dashcrypto "github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	dashcrypto "github.com/sarg3nt/webcore/core/crypto"
 )
 
 // agentMock fakes the subset of the agent's /api/v1/system/keyring/*
diff --git a/gearbox/internal/framework/services/auth_adapter.go b/gearbox/internal/framework/services/auth_adapter.go
index 8473c58..bbe992d 100644
--- a/gearbox/internal/framework/services/auth_adapter.go
+++ b/gearbox/internal/framework/services/auth_adapter.go
@@ -10,7 +10,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/gear"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 )
 
 // AuthAdapter wraps the auth.Manager to implement gear.AuthChecker.
diff --git a/gearbox/internal/framework/services/crypto/encryption.go b/gearbox/internal/framework/services/crypto/encryption.go
deleted file mode 100644
index 23b6727..0000000
--- a/gearbox/internal/framework/services/crypto/encryption.go
+++ /dev/null
@@ -1,116 +0,0 @@
-package crypto
-
-import (
-	"crypto/aes"
-	"crypto/cipher"
-	"crypto/rand"
-	"crypto/sha256"
-	"errors"
-	"io"
-)
-
-var (
-	ErrInvalidCiphertext = errors.New("invalid ciphertext")
-	ErrInvalidKey        = errors.New("invalid encryption key")
-)
-
-// Encryptor handles AES-256-GCM encryption/decryption for secrets.
-type Encryptor struct {
-	key []byte
-}
-
-// NewEncryptor creates a new encryptor using the provided secret key.
-// The key is hashed with SHA-256 to ensure it's exactly 32 bytes for AES-256.
-func NewEncryptor(secret string) (*Encryptor, error) {
-	if len(secret) < 32 {
-		return nil, ErrInvalidKey
-	}
-
-	// Derive a 32-byte key using SHA-256
-	hash := sha256.Sum256([]byte(secret))
-	key := hash[:]
-
-	return &Encryptor{key: key}, nil
-}
-
-// Encrypt encrypts plaintext using AES-256-GCM.
-// Returns ciphertext with prepended nonce (12 bytes + encrypted data).
-func (e *Encryptor) Encrypt(plaintext []byte) ([]byte, error) {
-	if len(plaintext) == 0 {
-		return nil, nil
-	}
-
-	block, err := aes.NewCipher(e.key)
-	if err != nil {
-		return nil, err
-	}
-
-	gcm, err := cipher.NewGCM(block)
-	if err != nil {
-		return nil, err
-	}
-
-	// Generate a random nonce
-	nonce := make([]byte, gcm.NonceSize())
-	if _, err := io.ReadFull(rand.Reader, nonce); err != nil {
-		return nil, err
-	}
-
-	// Encrypt and prepend nonce to ciphertext
-	ciphertext := gcm.Seal(nonce, nonce, plaintext, nil)
-	return ciphertext, nil
-}
-
-// Decrypt decrypts ciphertext using AES-256-GCM.
-// Expects ciphertext with prepended nonce (12 bytes + encrypted data).
-func (e *Encryptor) Decrypt(ciphertext []byte) ([]byte, error) {
-	if len(ciphertext) == 0 {
-		return nil, nil
-	}
-
-	block, err := aes.NewCipher(e.key)
-	if err != nil {
-		return nil, err
-	}
-
-	gcm, err := cipher.NewGCM(block)
-	if err != nil {
-		return nil, err
-	}
-
-	nonceSize := gcm.NonceSize()
-	if len(ciphertext) < nonceSize {
-		return nil, ErrInvalidCiphertext
-	}
-
-	// Extract nonce and actual ciphertext
-	nonce, encryptedData := ciphertext[:nonceSize], ciphertext[nonceSize:]
-
-	// Decrypt
-	plaintext, err := gcm.Open(nil, nonce, encryptedData, nil)
-	if err != nil {
-		return nil, ErrInvalidCiphertext
-	}
-
-	return plaintext, nil
-}
-
-// EncryptString is a convenience method for encrypting strings.
-func (e *Encryptor) EncryptString(plaintext string) ([]byte, error) {
-	if plaintext == "" {
-		return nil, nil
-	}
-	return e.Encrypt([]byte(plaintext))
-}
-
-// DecryptString is a convenience method for decrypting to strings.
-func (e *Encryptor) DecryptString(ciphertext []byte) (string, error) {
-	if len(ciphertext) == 0 {
-		return "", nil
-	}
-	plaintext, err := e.Decrypt(ciphertext)
-	if err != nil {
-		return "", err
-	}
-	return string(plaintext), nil
-}
diff --git a/gearbox/internal/framework/services/server_adapter.go b/gearbox/internal/framework/services/server_adapter.go
index 520ec21..e6dcc3c 100644
--- a/gearbox/internal/framework/services/server_adapter.go
+++ b/gearbox/internal/framework/services/server_adapter.go
@@ -6,7 +6,7 @@ import (
 	"sync"
 
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/gear"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
diff --git a/gearbox/internal/gears/home/handlers.go b/gearbox/internal/gears/home/handlers.go
index bf30174..d2f4b16 100644
--- a/gearbox/internal/gears/home/handlers.go
+++ b/gearbox/internal/gears/home/handlers.go
@@ -9,7 +9,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/gear"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/services"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 )
 
 // Handlers serves the Home dashboard pages and APIs.
diff --git a/gearbox/internal/gears/home/widget_runner.go b/gearbox/internal/gears/home/widget_runner.go
index e824dfa..b206514 100644
--- a/gearbox/internal/gears/home/widget_runner.go
+++ b/gearbox/internal/gears/home/widget_runner.go
@@ -7,7 +7,7 @@ import (
 	"time"
 
 	"github.com/sarg3nt/gearbox/internal/framework/database"
-	"github.com/sarg3nt/gearbox/internal/framework/services/crypto"
+	"github.com/sarg3nt/webcore/core/crypto"
 	"github.com/sarg3nt/gearbox/internal/gears/home/widget"
 )
 

From a2fb52bbe6ccee072fe277a7619269d8a4bf97f0 Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 29 May 2026 09:45:43 -0700
Subject: [PATCH 3/8] refactor(gearbox): adopt webcore/ui/components for the ui
 package

The internal/framework/ui package was 100% function-parity with
webcore/ui/components (it's where they were extracted from). Repoint all 12
importers to webcore (aliased ui/templcomponents to preserve call sites),
delete the duplicated package, regenerate templ. Also fix a crypto follow-up:
agent_keyring test now uses crypto.NewFromHashedKey.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../services/agent_keyring/rotator_test.go    |   2 +-
 .../framework/templates/layouts/base.templ    |   2 +-
 .../templates/pages/admin_permissions.templ   |   2 +-
 .../pages/admin_user_permissions.templ        |   2 +-
 .../templates/pages/alert_rules.templ         |   2 +-
 .../framework/templates/pages/backup.templ    |   2 +-
 .../framework/templates/pages/gears.templ     |   2 +-
 .../pages/haproxy_gear_settings.templ         |   2 +-
 .../templates/pages/haproxy_settings.templ    |   2 +-
 .../templates/pages/log_settings.templ        |   2 +-
 .../framework/templates/pages/overview.templ  |   2 +-
 .../templates/pages/user_pages.templ          |   2 +-
 .../framework/templates/pages/welcome.templ   |   2 +-
 gearbox/internal/framework/ui/alerts.templ    |  78 ----
 gearbox/internal/framework/ui/badge.templ     |  87 ----
 .../internal/framework/ui/collapsible.templ   | 147 -------
 gearbox/internal/framework/ui/icons.templ     | 259 -----------
 .../internal/framework/ui/live_refresh.templ  |  58 ---
 gearbox/internal/framework/ui/modal.templ     | 170 --------
 gearbox/internal/framework/ui/table.templ     | 409 ------------------
 gearbox/internal/framework/ui/toast.templ     |  21 -
 gearbox/internal/framework/ui/toggle.templ    |  73 ----
 22 files changed, 13 insertions(+), 1315 deletions(-)
 delete mode 100644 gearbox/internal/framework/ui/alerts.templ
 delete mode 100644 gearbox/internal/framework/ui/badge.templ
 delete mode 100644 gearbox/internal/framework/ui/collapsible.templ
 delete mode 100644 gearbox/internal/framework/ui/icons.templ
 delete mode 100644 gearbox/internal/framework/ui/live_refresh.templ
 delete mode 100644 gearbox/internal/framework/ui/modal.templ
 delete mode 100644 gearbox/internal/framework/ui/table.templ
 delete mode 100644 gearbox/internal/framework/ui/toast.templ
 delete mode 100644 gearbox/internal/framework/ui/toggle.templ

diff --git a/gearbox/internal/framework/services/agent_keyring/rotator_test.go b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
index e38fc9e..2ed65d5 100644
--- a/gearbox/internal/framework/services/agent_keyring/rotator_test.go
+++ b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
@@ -191,7 +191,7 @@ func setupRotator(t *testing.T) (*Rotator, *agentMock, *database.DB, *database.B
 	}
 	t.Cleanup(func() { _ = db.Close() })
 
-	enc, err := dashcrypto.NewEncryptor("test-encryption-secret-32-bytes!")
+	enc, err := dashcrypto.NewFromHashedKey("test-encryption-secret-32-bytes!")
 	if err != nil {
 		t.Fatalf("NewEncryptor: %v", err)
 	}
diff --git a/gearbox/internal/framework/templates/layouts/base.templ b/gearbox/internal/framework/templates/layouts/base.templ
index 20ed246..072071d 100644
--- a/gearbox/internal/framework/templates/layouts/base.templ
+++ b/gearbox/internal/framework/templates/layouts/base.templ
@@ -5,7 +5,7 @@ import "encoding/json"
 import "github.com/sarg3nt/gearbox/internal/framework/auth"
 import "github.com/sarg3nt/gearbox/internal/framework/models"
 import "github.com/sarg3nt/gearbox/internal/framework/templates/components"
-import "github.com/sarg3nt/gearbox/internal/framework/ui"
+import ui "github.com/sarg3nt/webcore/ui/components"
 import "github.com/sarg3nt/gearbox/internal/framework/middleware"
 import "strings"
 
diff --git a/gearbox/internal/framework/templates/pages/admin_permissions.templ b/gearbox/internal/framework/templates/pages/admin_permissions.templ
index 84966c8..5795663 100644
--- a/gearbox/internal/framework/templates/pages/admin_permissions.templ
+++ b/gearbox/internal/framework/templates/pages/admin_permissions.templ
@@ -3,7 +3,7 @@ package pages
 import (
 	"fmt"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/admin_user_permissions.templ b/gearbox/internal/framework/templates/pages/admin_user_permissions.templ
index 6460c63..69220fe 100644
--- a/gearbox/internal/framework/templates/pages/admin_user_permissions.templ
+++ b/gearbox/internal/framework/templates/pages/admin_user_permissions.templ
@@ -3,7 +3,7 @@ package pages
 import (
 	"fmt"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	templcomponents "github.com/sarg3nt/gearbox/internal/framework/ui"
+	templcomponents "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/alert_rules.templ b/gearbox/internal/framework/templates/pages/alert_rules.templ
index 2dece16..fe76f07 100644
--- a/gearbox/internal/framework/templates/pages/alert_rules.templ
+++ b/gearbox/internal/framework/templates/pages/alert_rules.templ
@@ -2,7 +2,7 @@ package pages
 
 import (
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/backup.templ b/gearbox/internal/framework/templates/pages/backup.templ
index 36e7b11..e55b7b6 100644
--- a/gearbox/internal/framework/templates/pages/backup.templ
+++ b/gearbox/internal/framework/templates/pages/backup.templ
@@ -4,7 +4,7 @@ import (
 	"fmt"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/gears.templ b/gearbox/internal/framework/templates/pages/gears.templ
index c213c19..6ae1769 100644
--- a/gearbox/internal/framework/templates/pages/gears.templ
+++ b/gearbox/internal/framework/templates/pages/gears.templ
@@ -5,7 +5,7 @@ import (
 	"fmt"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/haproxy_gear_settings.templ b/gearbox/internal/framework/templates/pages/haproxy_gear_settings.templ
index 294a8e1..cbcc6e1 100644
--- a/gearbox/internal/framework/templates/pages/haproxy_gear_settings.templ
+++ b/gearbox/internal/framework/templates/pages/haproxy_gear_settings.templ
@@ -5,7 +5,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 )
 
 // HAProxyGearSettingsPage renders the HAProxy gear settings page.
diff --git a/gearbox/internal/framework/templates/pages/haproxy_settings.templ b/gearbox/internal/framework/templates/pages/haproxy_settings.templ
index 144d5e0..eadeb7c 100644
--- a/gearbox/internal/framework/templates/pages/haproxy_settings.templ
+++ b/gearbox/internal/framework/templates/pages/haproxy_settings.templ
@@ -5,7 +5,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/middleware"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/log_settings.templ b/gearbox/internal/framework/templates/pages/log_settings.templ
index 1c6cd37..389454d 100644
--- a/gearbox/internal/framework/templates/pages/log_settings.templ
+++ b/gearbox/internal/framework/templates/pages/log_settings.templ
@@ -5,7 +5,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/agent"
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/overview.templ b/gearbox/internal/framework/templates/pages/overview.templ
index f5eb8fa..bf73ba9 100644
--- a/gearbox/internal/framework/templates/pages/overview.templ
+++ b/gearbox/internal/framework/templates/pages/overview.templ
@@ -3,7 +3,7 @@ package pages
 import "github.com/sarg3nt/gearbox/internal/framework/models"
 import "github.com/sarg3nt/gearbox/internal/framework/database"
 import "github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
-import "github.com/sarg3nt/gearbox/internal/framework/ui"
+import ui "github.com/sarg3nt/webcore/ui/components"
 import "github.com/sarg3nt/gearbox/internal/framework/templates/components"
 import "fmt"
 
diff --git a/gearbox/internal/framework/templates/pages/user_pages.templ b/gearbox/internal/framework/templates/pages/user_pages.templ
index 4c3b409..7c5f863 100644
--- a/gearbox/internal/framework/templates/pages/user_pages.templ
+++ b/gearbox/internal/framework/templates/pages/user_pages.templ
@@ -3,7 +3,7 @@ package pages
 import (
 	"fmt"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 	"github.com/sarg3nt/gearbox/internal/framework/templates/layouts"
 )
 
diff --git a/gearbox/internal/framework/templates/pages/welcome.templ b/gearbox/internal/framework/templates/pages/welcome.templ
index 7ce9188..180fdd0 100644
--- a/gearbox/internal/framework/templates/pages/welcome.templ
+++ b/gearbox/internal/framework/templates/pages/welcome.templ
@@ -4,7 +4,7 @@ import (
 	"github.com/sarg3nt/gearbox/internal/framework/database"
 	"github.com/sarg3nt/gearbox/internal/framework/middleware"
 	"github.com/sarg3nt/gearbox/internal/framework/models"
-	"github.com/sarg3nt/gearbox/internal/framework/ui"
+	ui "github.com/sarg3nt/webcore/ui/components"
 )
 
 // WelcomePage is the first-run landing screen shown to an admin when nothing
diff --git a/gearbox/internal/framework/ui/alerts.templ b/gearbox/internal/framework/ui/alerts.templ
deleted file mode 100644
index c7a869e..0000000
--- a/gearbox/internal/framework/ui/alerts.templ
+++ /dev/null
@@ -1,78 +0,0 @@
-package ui
-
-// ErrorAlert displays an error message with an icon
-templ ErrorAlert(message string) {
-	<div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-200 px-4 py-3 rounded mb-4">
-		<div class="flex items-center">
-			<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
-			</svg>
-			<span>{ message }</span>
-		</div>
-	</div>
-}
-
-// InfoAlert displays an informational message with an icon
-templ InfoAlert(message string) {
-	<div class="bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200 px-4 py-3 rounded mb-4">
-		<div class="flex items-center">
-			<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-				<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-			</svg>
-			<span>{ message }</span>
-		</div>
-	</div>
-}
-
-// WarningAlert displays a warning message with an icon
-templ WarningAlert(message string) {
-	<div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded mb-4">
-		<div class="flex items-center">
-			<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-				<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
-			</svg>
-			<span>{ message }</span>
-		</div>
-	</div>
-}
-
-// SuccessAlert displays a success message with an icon
-templ SuccessAlert(message string) {
-	<div class="bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-200 px-4 py-3 rounded mb-4">
-		<div class="flex items-center">
-			<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
-				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
-			</svg>
-			<span>{ message }</span>
-		</div>
-	</div>
-}
-
-// LoadingSpinner displays a centered loading spinner animation
-templ LoadingSpinner() {
-	<div class="flex justify-center items-center p-8">
-		<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-blue-400"></div>
-	</div>
-}
-
-// SmallLoadingSpinner displays a smaller inline loading spinner
-templ SmallLoadingSpinner() {
-	<div class="inline-flex items-center">
-		<div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600 dark:border-blue-400"></div>
-	</div>
-}
-
-// EmptyState displays a centered message when there's no data
-templ EmptyState(icon templ.Component, title string, description string) {
-	<div class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
-		if icon != nil {
-			<div class="mb-4 text-gray-400 dark:text-gray-500">
-				@icon
-			</div>
-		}
-		<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">{ title }</h3>
-		if description != "" {
-			<p class="text-sm mt-1">{ description }</p>
-		}
-	</div>
-}
diff --git a/gearbox/internal/framework/ui/badge.templ b/gearbox/internal/framework/ui/badge.templ
deleted file mode 100644
index 6d06cd0..0000000
--- a/gearbox/internal/framework/ui/badge.templ
+++ /dev/null
@@ -1,87 +0,0 @@
-package ui
-
-import "fmt"
-
-// Badge displays a small status badge with customizable colors
-templ Badge(text string, colorClass string) {
-	<span class={ "px-2 py-1 text-xs font-semibold rounded", colorClass }>
-		{ text }
-	</span>
-}
-
-// StatusBadge displays a badge with preset colors based on status
-// status: "success", "error", "warning", "info", "default"
-templ StatusBadge(text string, status string) {
-	switch status {
-		case "success":
-			<span class="px-2 py-1 text-xs font-semibold rounded bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
-				{ text }
-			</span>
-		case "error":
-			<span class="px-2 py-1 text-xs font-semibold rounded bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200">
-				{ text }
-			</span>
-		case "warning":
-			<span class="px-2 py-1 text-xs font-semibold rounded bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
-				{ text }
-			</span>
-		case "info":
-			<span class="px-2 py-1 text-xs font-semibold rounded bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200">
-				{ text }
-			</span>
-		default:
-			<span class="px-2 py-1 text-xs font-semibold rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
-				{ text }
-			</span>
-	}
-}
-
-// CountBadge displays a numeric count badge (like notification counts)
-templ CountBadge(count int, maxDisplay int) {
-	if count > 0 {
-		if count > maxDisplay {
-			<span class="min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center">
-				{ fmt.Sprintf("%d+", maxDisplay) }
-			</span>
-		} else {
-			<span class="min-w-[18px] h-[18px] px-1 text-[10px] font-bold text-white bg-red-500 rounded-full flex items-center justify-center">
-				{ fmt.Sprintf("%d", count) }
-			</span>
-		}
-	}
-}
-
-// DotIndicator displays a small colored dot (for status indicators)
-// status: "online", "offline", "warning", "unknown"
-templ DotIndicator(status string) {
-	switch status {
-		case "online":
-			<span class="w-3 h-3 bg-green-500 rounded-full"></span>
-		case "offline":
-			<span class="w-3 h-3 bg-red-500 rounded-full"></span>
-		case "warning":
-			<span class="w-3 h-3 bg-yellow-500 rounded-full"></span>
-		default:
-			<span class="w-3 h-3 bg-gray-400 rounded-full"></span>
-	}
-}
-
-// PulseDotIndicator displays an animated pulsing dot
-templ PulseDotIndicator(status string) {
-	switch status {
-		case "online":
-			<span class="relative flex h-3 w-3">
-				<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
-				<span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
-			</span>
-		case "offline":
-			<span class="w-3 h-3 bg-red-500 rounded-full"></span>
-		case "warning":
-			<span class="relative flex h-3 w-3">
-				<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
-				<span class="relative inline-flex rounded-full h-3 w-3 bg-yellow-500"></span>
-			</span>
-		default:
-			<span class="w-3 h-3 bg-gray-400 rounded-full"></span>
-	}
-}
diff --git a/gearbox/internal/framework/ui/collapsible.templ b/gearbox/internal/framework/ui/collapsible.templ
deleted file mode 100644
index 821da76..0000000
--- a/gearbox/internal/framework/ui/collapsible.templ
+++ /dev/null
@@ -1,147 +0,0 @@
-package ui
-
-// CollapsibleSection creates a collapsible container with a header and content
-templ CollapsibleSection(id string, title string, badge string, badgeColor string, defaultOpen bool) {
-	<div class="border border-gray-300 dark:border-slate-600 rounded-lg overflow-hidden mb-4" data-collapsible-id={ id }>
-		<!-- Header (clickable to toggle) -->
-		<div
-			class="bg-gray-50 dark:bg-slate-800 p-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
-			onclick={ toggleCollapsible(id) }
-		>
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-3">
-					if badge != "" {
-						<div class={ "px-2 py-1 rounded text-xs font-semibold text-white", badgeColor }>{ badge }</div>
-					}
-					<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100">{ title }</h4>
-				</div>
-				<div class="flex items-center gap-2">
-					<!-- Collapse/Expand icon -->
-					<svg
-						class="w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 collapsible-icon"
-						data-target={ id }
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-					</svg>
-				</div>
-			</div>
-		</div>
-
-		<!-- Collapsible content -->
-		<div
-			id={ id }
-			class={ "collapsible-content bg-white dark:bg-slate-900", templ.KV("hidden", !defaultOpen) }
-		>
-			<div class="p-4">
-				{ children... }
-			</div>
-		</div>
-	</div>
-}
-
-// CollapsibleSectionWithStats creates a collapsible container with stats shown in the header bar
-templ CollapsibleSectionWithStats(id string, title string, badge string, badgeColor string, statsText string, defaultOpen bool) {
-	<div class="border border-gray-300 dark:border-slate-600 rounded-lg overflow-hidden mb-4" data-collapsible-id={ id }>
-		<!-- Header (clickable to toggle) -->
-		<div
-			class="bg-gray-50 dark:bg-slate-800 p-4 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 transition-colors"
-			onclick={ toggleCollapsible(id) }
-		>
-			<div class="flex items-center justify-between">
-				<div class="flex items-center gap-3">
-					if badge != "" {
-						<div class={ "px-2 py-1 rounded text-xs font-semibold text-white", badgeColor }>{ badge }</div>
-					}
-					<h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100">{ title }</h4>
-					if statsText != "" {
-						<span class="text-sm text-gray-500 dark:text-gray-400 hidden sm:inline">{ statsText }</span>
-					}
-				</div>
-				<div class="flex items-center gap-2">
-					<!-- Collapse/Expand icon -->
-					<svg
-						class="w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-200 collapsible-icon"
-						data-target={ id }
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-					>
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-					</svg>
-				</div>
-			</div>
-		</div>
-
-		<!-- Collapsible content -->
-		<div
-			id={ id }
-			class={ "collapsible-content bg-white dark:bg-slate-900", templ.KV("hidden", !defaultOpen) }
-		>
-			<div class="p-4">
-				{ children... }
-			</div>
-		</div>
-	</div>
-}
-
-script toggleCollapsible(id string) {
-	// Get the content element
-	const content = document.getElementById(id);
-	const icon = document.querySelector(`[data-target="${id}"]`);
-
-	if (content && icon) {
-		// Toggle visibility
-		content.classList.toggle('hidden');
-
-		// Rotate icon
-		if (content.classList.contains('hidden')) {
-			icon.style.transform = 'rotate(-90deg)';
-		} else {
-			icon.style.transform = 'rotate(0deg)';
-		}
-
-		// Save state to localStorage
-		const isOpen = !content.classList.contains('hidden');
-		localStorage.setItem(`collapsible-${id}`, isOpen ? 'open' : 'closed');
-	}
-}
-
-// Global function to restore collapsible states from localStorage
-// This is called on page load and after HTMX content updates
-templ CollapsibleRestoreScript() {
-	<script>
-	function restoreCollapsibleStates() {
-		// Find all collapsible sections
-		document.querySelectorAll('[data-collapsible-id]').forEach(function(section) {
-			const id = section.getAttribute('data-collapsible-id');
-			const savedState = localStorage.getItem('collapsible-' + id);
-
-			if (savedState) {
-				const content = document.getElementById(id);
-				const icon = document.querySelector('[data-target="' + id + '"]');
-
-				if (content && icon) {
-					if (savedState === 'closed') {
-						content.classList.add('hidden');
-						icon.style.transform = 'rotate(-90deg)';
-					} else {
-						content.classList.remove('hidden');
-						icon.style.transform = 'rotate(0deg)';
-					}
-				}
-			}
-		});
-	}
-
-	// Restore states on initial page load
-	document.addEventListener('DOMContentLoaded', restoreCollapsibleStates);
-
-	// Restore states after HTMX swaps content
-	document.body.addEventListener('htmx:afterSwap', function() {
-		setTimeout(restoreCollapsibleStates, 10);
-	});
-	</script>
-}
diff --git a/gearbox/internal/framework/ui/icons.templ b/gearbox/internal/framework/ui/icons.templ
deleted file mode 100644
index a905ca5..0000000
--- a/gearbox/internal/framework/ui/icons.templ
+++ /dev/null
@@ -1,259 +0,0 @@
-package ui
-
-// Common icons used throughout the application.
-// All icons use the heroicons style (outline, stroke-based).
-// Default size is w-6 h-6, but can be overridden with CSS classes.
-
-// IconDashboard - Home/Dashboard icon
-templ IconDashboard() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-	</svg>
-}
-
-// IconGrid - Grid/Status Grid icon
-templ IconGrid() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
-	</svg>
-}
-
-// IconLogs - Document/Logs icon
-templ IconLogs() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-	</svg>
-}
-
-// IconMetrics - Chart/Metrics icon
-templ IconMetrics() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 20h18M3 20V4"></path>
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 15l3-4 3 3 4-5"></path>
-	</svg>
-}
-
-// IconHistory - Bar Chart/History icon
-templ IconHistory() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
-	</svg>
-}
-
-// IconCertificate - Shield/Certificate icon
-templ IconCertificate() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
-	</svg>
-}
-
-// IconServices - Server/Services icon
-templ IconServices() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"></path>
-	</svg>
-}
-
-// IconTraffic - Lightning bolt/Traffic icon
-templ IconTraffic() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
-	</svg>
-}
-
-// IconAlerts - Bell/Alerts icon
-templ IconAlerts() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
-	</svg>
-}
-
-// IconOSUpdates - Download/Updates icon
-templ IconOSUpdates() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path>
-	</svg>
-}
-
-// IconSettings - Gear/Settings icon
-templ IconSettings() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-	</svg>
-}
-
-// IconUser - User profile icon
-templ IconUser() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
-	</svg>
-}
-
-// IconLogout - Logout icon
-templ IconLogout() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
-	</svg>
-}
-
-// IconKey - Key/Password icon
-templ IconKey() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
-	</svg>
-}
-
-// IconSun - Light mode icon
-templ IconSun() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
-	</svg>
-}
-
-// IconMoon - Dark mode icon
-templ IconMoon() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
-	</svg>
-}
-
-// IconMonitor - System/Monitor icon
-templ IconMonitor() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
-	</svg>
-}
-
-// IconRefresh - Refresh/Sync icon
-templ IconRefresh() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-	</svg>
-}
-
-// IconSearch - Search/Magnifying glass icon
-templ IconSearch() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-	</svg>
-}
-
-// IconClose - X/Close icon
-templ IconClose() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-	</svg>
-}
-
-// IconCheck - Checkmark icon
-templ IconCheck() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-	</svg>
-}
-
-// IconWarning - Warning triangle icon
-templ IconWarning() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-	</svg>
-}
-
-// IconInfo - Info circle icon
-templ IconInfo() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-	</svg>
-}
-
-// IconPlus - Plus/Add icon
-templ IconPlus() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-	</svg>
-}
-
-// IconTrash - Trash/Delete icon
-templ IconTrash() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-	</svg>
-}
-
-// IconEdit - Pencil/Edit icon
-templ IconEdit() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-	</svg>
-}
-
-// IconCopy - Copy/Clipboard icon
-templ IconCopy() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
-	</svg>
-}
-
-// IconDownload - Download icon
-templ IconDownload() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-	</svg>
-}
-
-// IconExternalLink - External link icon
-templ IconExternalLink() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-	</svg>
-}
-
-// IconChevronDown - Chevron down icon
-templ IconChevronDown() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-	</svg>
-}
-
-// IconChevronUp - Chevron up icon
-templ IconChevronUp() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
-	</svg>
-}
-
-// IconChevronLeft - Chevron left icon
-templ IconChevronLeft() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-	</svg>
-}
-
-// IconChevronRight - Chevron right icon
-templ IconChevronRight() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-	</svg>
-}
-
-// IconSecurity - Shield/Security icon
-templ IconSecurity() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
-	</svg>
-}
-
-// IconBackup - Cloud/Backup icon
-templ IconBackup() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
-	</svg>
-}
-
-// IconDatabase - Database icon
-templ IconDatabase() {
-	<svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
-	</svg>
-}
diff --git a/gearbox/internal/framework/ui/live_refresh.templ b/gearbox/internal/framework/ui/live_refresh.templ
deleted file mode 100644
index 1feb025..0000000
--- a/gearbox/internal/framework/ui/live_refresh.templ
+++ /dev/null
@@ -1,58 +0,0 @@
-package ui
-
-// LiveRefreshButton creates a refresh button that changes color based on SSE connection status
-// The button shows:
-// - Green when connected (Live)
-// - Yellow when connecting
-// - Red when disconnected
-// - Gray as default
-//
-// Usage: Include this button in your page header controls section, then call updateSSEStatus(status)
-// from your JavaScript to update the button's appearance based on connection state.
-templ LiveRefreshButton() {
-	<button
-		id="refresh-btn"
-		onclick="manualRefresh()"
-		class="p-2 rounded-lg transition-colors text-gray-400"
-		title="Connecting..."
-	>
-		<svg id="refresh-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-		</svg>
-	</button>
-}
-
-// LiveRefreshButtonScript provides the JavaScript function to update the button status
-// This should be included once per page that uses the LiveRefreshButton component
-templ LiveRefreshButtonScript() {
-	<script>
-		// SSE connection status - update refresh button color
-		// Status can be: 'connected', 'connecting', 'disconnected'
-		function updateSSEStatus(status) {
-			const btn = document.getElementById('refresh-btn');
-			if (!btn) return;
-
-			// Remove all status classes
-			btn.classList.remove('text-green-500', 'text-red-500', 'text-yellow-500', 'text-gray-400');
-
-			// Add appropriate class and update title
-			switch (status) {
-				case 'connected':
-					btn.classList.add('text-green-500');
-					btn.title = 'Live - streaming data';
-					break;
-				case 'connecting':
-					btn.classList.add('text-yellow-500');
-					btn.title = 'Connecting...';
-					break;
-				case 'disconnected':
-					btn.classList.add('text-red-500');
-					btn.title = 'Disconnected - click to retry';
-					break;
-				default:
-					btn.classList.add('text-gray-400');
-					btn.title = 'Connection status unknown';
-			}
-		}
-	</script>
-}
diff --git a/gearbox/internal/framework/ui/modal.templ b/gearbox/internal/framework/ui/modal.templ
deleted file mode 100644
index c27a955..0000000
--- a/gearbox/internal/framework/ui/modal.templ
+++ /dev/null
@@ -1,170 +0,0 @@
-package ui
-
-// Modal creates a generic modal dialog container
-// id: unique identifier for the modal
-// title: displayed in the modal header
-// size: "sm", "md", "lg", "xl", "full" for different widths
-templ Modal(id string, title string, size string) {
-	<div id={ id } class="fixed inset-0 z-[100] hidden overflow-y-auto" aria-labelledby={ id + "-title" } role="dialog" aria-modal="true">
-		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-			<!-- Background overlay -->
-			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick={ closeModal(id) }></div>
-			<span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
-			<!-- Modal panel -->
-			<div class={ "inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full",
-				templ.KV("sm:max-w-sm", size == "sm"),
-				templ.KV("sm:max-w-lg", size == "md" || size == ""),
-				templ.KV("sm:max-w-2xl", size == "lg"),
-				templ.KV("sm:max-w-4xl", size == "xl"),
-				templ.KV("sm:max-w-7xl", size == "full") }>
-				<!-- Header -->
-				<div class="px-4 py-3 border-b border-gray-200 dark:border-slate-700 flex items-center justify-between">
-					<h3 class="text-lg font-medium text-gray-900 dark:text-white" id={ id + "-title" }>
-						{ title }
-					</h3>
-					<button
-						type="button"
-						onclick={ closeModal(id) }
-						class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 transition-colors"
-					>
-						<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-						</svg>
-					</button>
-				</div>
-				<!-- Content -->
-				<div class="px-4 py-4">
-					{ children... }
-				</div>
-			</div>
-		</div>
-	</div>
-}
-
-// ModalFooter creates a standard footer with action buttons
-// Typically used inside a Modal component
-templ ModalFooter() {
-	<div class="px-4 py-3 border-t border-gray-200 dark:border-slate-700 flex flex-row-reverse gap-2">
-		{ children... }
-	</div>
-}
-
-// ConfirmModal creates a confirmation dialog with customizable icon and buttons
-// type: "warning", "danger", "info"
-templ ConfirmModal(id string, title string, message string, confirmText string, modalType string) {
-	<div id={ id } class="fixed inset-0 z-[100] hidden overflow-y-auto" aria-labelledby={ id + "-title" } role="dialog" aria-modal="true">
-		<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-			<!-- Background overlay -->
-			<div class="fixed inset-0 bg-gray-500 bg-opacity-75 dark:bg-gray-900 dark:bg-opacity-75 transition-opacity" onclick={ closeModal(id) }></div>
-			<span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
-			<!-- Dialog panel -->
-			<div class="inline-block align-bottom bg-white dark:bg-slate-800 rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
-				<div class="sm:flex sm:items-start">
-					<!-- Icon -->
-					switch modalType {
-						case "danger":
-							<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-900 sm:mx-0 sm:h-10 sm:w-10">
-								<svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-								</svg>
-							</div>
-						case "info":
-							<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 sm:mx-0 sm:h-10 sm:w-10">
-								<svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-								</svg>
-							</div>
-						default:
-							<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 dark:bg-yellow-900 sm:mx-0 sm:h-10 sm:w-10">
-								<svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
-								</svg>
-							</div>
-					}
-					<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left flex-1">
-						<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id={ id + "-title" }>
-							{ title }
-						</h3>
-						<div class="mt-2">
-							<p class="text-sm text-gray-500 dark:text-gray-400">
-								{ message }
-							</p>
-						</div>
-					</div>
-				</div>
-				<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-					switch modalType {
-						case "danger":
-							<button
-								type="button"
-								id={ id + "-confirm-btn" }
-								class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-							>
-								{ confirmText }
-							</button>
-						case "info":
-							<button
-								type="button"
-								id={ id + "-confirm-btn" }
-								class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
-							>
-								{ confirmText }
-							</button>
-						default:
-							<button
-								type="button"
-								id={ id + "-confirm-btn" }
-								class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm"
-							>
-								{ confirmText }
-							</button>
-					}
-					<button
-						type="button"
-						onclick={ closeModal(id) }
-						class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 shadow-sm px-4 py-2 bg-white dark:bg-slate-700 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:w-auto sm:text-sm"
-					>
-						Cancel
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-}
-
-script closeModal(id string) {
-	const modal = document.getElementById(id);
-	if (modal) {
-		modal.classList.add('hidden');
-	}
-}
-
-// ModalScripts provides JavaScript functions for modal management
-templ ModalScripts() {
-	<script>
-	// Open a modal by ID
-	function openModal(id) {
-		const modal = document.getElementById(id);
-		if (modal) {
-			modal.classList.remove('hidden');
-		}
-	}
-
-	// Close a modal by ID
-	function closeModalById(id) {
-		const modal = document.getElementById(id);
-		if (modal) {
-			modal.classList.add('hidden');
-		}
-	}
-
-	// Close modal on Escape key
-	document.addEventListener('keydown', function(e) {
-		if (e.key === 'Escape') {
-			document.querySelectorAll('[role="dialog"]:not(.hidden)').forEach(function(modal) {
-				modal.classList.add('hidden');
-			});
-		}
-	});
-	</script>
-}
diff --git a/gearbox/internal/framework/ui/table.templ b/gearbox/internal/framework/ui/table.templ
deleted file mode 100644
index cbc91cd..0000000
--- a/gearbox/internal/framework/ui/table.templ
+++ /dev/null
@@ -1,409 +0,0 @@
-package ui
-
-import (
-	"fmt"
-)
-
-// TableConfig holds configuration for enhanced tables
-type TableConfig struct {
-	ID           string
-	Title        string
-	Description  string
-	EnableSort   bool
-	EnableSearch bool
-	EnablePaging bool
-	EnableExport bool
-	PageSize     int
-	Columns      []TableColumn
-}
-
-// TableColumn defines a column in the table
-type TableColumn struct {
-	Key       string
-	Label     string
-	Sortable  bool
-	DataType  string // "string", "number", "bytes", "percent", "date"
-	Width     string // CSS width
-	Alignment string // "left", "center", "right"
-}
-
-// SortableTableHeader renders a sortable table header
-templ SortableTableHeader(tableID string, columns []TableColumn, defaultSort string, defaultOrder string) {
-	<thead class="bg-gray-50 dark:bg-slate-700">
-		<tr>
-			for _, col := range columns {
-				if col.Sortable {
-					<th
-						class={ "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600 select-none transition-colors",
-							templ.KV("text-right", col.Alignment == "right"),
-							templ.KV("text-center", col.Alignment == "center") }
-						style={ fmt.Sprintf("width: %s", col.Width) }
-						data-sort-key={ col.Key }
-						data-sort-type={ col.DataType }
-						onclick={ templ.ComponentScript{Call: fmt.Sprintf("sortTable('%s', '%s', '%s')", tableID, col.Key, col.DataType)} }
-					>
-						<div class="flex items-center gap-1">
-							<span>{ col.Label }</span>
-							<span class="sort-indicator text-gray-300 dark:text-gray-500" data-key={ col.Key }>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
-								</svg>
-							</span>
-						</div>
-					</th>
-				} else {
-					<th
-						class={ "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase",
-							templ.KV("text-right", col.Alignment == "right"),
-							templ.KV("text-center", col.Alignment == "center") }
-						style={ fmt.Sprintf("width: %s", col.Width) }
-					>
-						{ col.Label }
-					</th>
-				}
-			}
-		</tr>
-	</thead>
-}
-
-// TableToolbar renders the search, filter, and export controls
-templ TableToolbar(tableID string, config TableConfig) {
-	<div class="p-4 border-b border-gray-200 dark:border-slate-700">
-		<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
-			<div>
-				<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">{ config.Title }</h3>
-				if config.Description != "" {
-					<p class="text-sm text-gray-500 dark:text-gray-400">{ config.Description }</p>
-				}
-			</div>
-			<div class="flex flex-wrap items-center gap-2">
-				if config.EnableSearch {
-					<div class="relative">
-						<input
-							type="text"
-							id={ fmt.Sprintf("%s-search", tableID) }
-							placeholder="Search..."
-							class="w-48 pl-8 pr-3 py-1.5 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-							oninput={ templ.ComponentScript{Call: fmt.Sprintf("filterTable('%s', this.value)", tableID)} }
-						/>
-						<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-						</svg>
-					</div>
-				}
-				if config.EnableExport {
-					<button
-						onclick={ templ.ComponentScript{Call: fmt.Sprintf("exportTableCSV('%s', '%s')", tableID, config.Title)} }
-						class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors flex items-center gap-1.5"
-						title="Export to CSV"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-						</svg>
-						<span class="hidden sm:inline">Export</span>
-					</button>
-				}
-			</div>
-		</div>
-	</div>
-}
-
-// TablePagination renders pagination controls
-templ TablePagination(tableID string, pageSize int) {
-	<div id={ fmt.Sprintf("%s-pagination", tableID) } class="px-4 py-3 border-t border-gray-200 dark:border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-3">
-		<div class="text-sm text-gray-500 dark:text-gray-400">
-			<span id={ fmt.Sprintf("%s-page-info", tableID) }>Showing 1-{ fmt.Sprintf("%d", pageSize) } of 0</span>
-		</div>
-		<div class="flex items-center gap-2">
-			<select
-				id={ fmt.Sprintf("%s-page-size", tableID) }
-				class="px-2 py-1 text-sm border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300"
-				onchange={ templ.ComponentScript{Call: fmt.Sprintf("changePageSize('%s', this.value)", tableID)} }
-			>
-				<option value="10" selected?={ pageSize == 10 }>10</option>
-				<option value="25" selected?={ pageSize == 25 }>25</option>
-				<option value="50" selected?={ pageSize == 50 }>50</option>
-				<option value="100" selected?={ pageSize == 100 }>100</option>
-			</select>
-			<div class="flex gap-1">
-				<button
-					id={ fmt.Sprintf("%s-prev-page", tableID) }
-					onclick={ templ.ComponentScript{Call: fmt.Sprintf("prevPage('%s')", tableID)} }
-					class="px-2 py-1 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-					disabled
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-					</svg>
-				</button>
-				<button
-					id={ fmt.Sprintf("%s-next-page", tableID) }
-					onclick={ templ.ComponentScript{Call: fmt.Sprintf("nextPage('%s')", tableID)} }
-					class="px-2 py-1 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-					disabled
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-					</svg>
-				</button>
-			</div>
-		</div>
-	</div>
-}
-
-// EnhancedTableScripts provides the JavaScript for table functionality
-templ EnhancedTableScripts() {
-	<script>
-	// Table state management
-	const tableStates = new Map();
-
-	function getTableState(tableID) {
-		if (!tableStates.has(tableID)) {
-			tableStates.set(tableID, {
-				data: [],
-				filteredData: [],
-				sortKey: null,
-				sortOrder: 'asc',
-				currentPage: 1,
-				pageSize: 25,
-				searchQuery: ''
-			});
-		}
-		return tableStates.get(tableID);
-	}
-
-	// Initialize table with data
-	function initEnhancedTable(tableID, data, defaultSort = null, defaultOrder = 'desc', pageSize = 25) {
-		const state = getTableState(tableID);
-		state.data = data;
-		state.filteredData = [...data];
-		state.pageSize = pageSize;
-		state.sortKey = defaultSort;
-		state.sortOrder = defaultOrder;
-
-		if (defaultSort) {
-			sortTableData(tableID, defaultSort, defaultOrder);
-		}
-
-		renderTable(tableID);
-	}
-
-	// Sort table by column
-	function sortTable(tableID, key, dataType) {
-		const state = getTableState(tableID);
-
-		// Toggle sort order if same key
-		if (state.sortKey === key) {
-			state.sortOrder = state.sortOrder === 'asc' ? 'desc' : 'asc';
-		} else {
-			state.sortKey = key;
-			state.sortOrder = 'desc'; // Default to descending for numeric data
-		}
-
-		sortTableData(tableID, key, state.sortOrder, dataType);
-		state.currentPage = 1;
-		renderTable(tableID);
-		updateSortIndicators(tableID, key, state.sortOrder);
-	}
-
-	function sortTableData(tableID, key, order, dataType) {
-		const state = getTableState(tableID);
-
-		state.filteredData.sort((a, b) => {
-			let valA = getNestedValue(a, key);
-			let valB = getNestedValue(b, key);
-
-			// Handle null/undefined
-			if (valA == null) valA = '';
-			if (valB == null) valB = '';
-
-			// Type-specific comparison
-			if (dataType === 'number' || dataType === 'bytes' || dataType === 'percent') {
-				valA = parseFloat(valA) || 0;
-				valB = parseFloat(valB) || 0;
-			} else if (dataType === 'date') {
-				valA = new Date(valA).getTime() || 0;
-				valB = new Date(valB).getTime() || 0;
-			} else {
-				valA = String(valA).toLowerCase();
-				valB = String(valB).toLowerCase();
-			}
-
-			if (valA < valB) return order === 'asc' ? -1 : 1;
-			if (valA > valB) return order === 'asc' ? 1 : -1;
-			return 0;
-		});
-	}
-
-	// Get nested object value by dot notation key
-	function getNestedValue(obj, key) {
-		return key.split('.').reduce((o, k) => (o && o[k] !== undefined) ? o[k] : null, obj);
-	}
-
-	// Update sort indicators in header
-	function updateSortIndicators(tableID, activeKey, order) {
-		const table = document.getElementById(tableID);
-		if (!table) return;
-
-		table.querySelectorAll('.sort-indicator').forEach(indicator => {
-			const key = indicator.dataset.key;
-			if (key === activeKey) {
-				indicator.classList.remove('text-gray-300', 'dark:text-gray-500');
-				indicator.classList.add('text-blue-500');
-				indicator.innerHTML = order === 'asc'
-					? '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>'
-					: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>';
-			} else {
-				indicator.classList.add('text-gray-300', 'dark:text-gray-500');
-				indicator.classList.remove('text-blue-500');
-				indicator.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>';
-			}
-		});
-	}
-
-	// Filter table by search query
-	function filterTable(tableID, query) {
-		const state = getTableState(tableID);
-		state.searchQuery = query.toLowerCase();
-		state.currentPage = 1;
-
-		if (!state.searchQuery) {
-			state.filteredData = [...state.data];
-		} else {
-			state.filteredData = state.data.filter(row => {
-				return Object.values(row).some(val => {
-					if (val == null) return false;
-					return String(val).toLowerCase().includes(state.searchQuery);
-				});
-			});
-		}
-
-		// Re-apply sort if active
-		if (state.sortKey) {
-			sortTableData(tableID, state.sortKey, state.sortOrder);
-		}
-
-		renderTable(tableID);
-	}
-
-	// Pagination controls
-	function nextPage(tableID) {
-		const state = getTableState(tableID);
-		const totalPages = Math.ceil(state.filteredData.length / state.pageSize);
-		if (state.currentPage < totalPages) {
-			state.currentPage++;
-			renderTable(tableID);
-		}
-	}
-
-	function prevPage(tableID) {
-		const state = getTableState(tableID);
-		if (state.currentPage > 1) {
-			state.currentPage--;
-			renderTable(tableID);
-		}
-	}
-
-	function changePageSize(tableID, size) {
-		const state = getTableState(tableID);
-		state.pageSize = parseInt(size);
-		state.currentPage = 1;
-		renderTable(tableID);
-	}
-
-	// Render table with current state
-	function renderTable(tableID) {
-		const state = getTableState(tableID);
-		const tbody = document.getElementById(tableID + '-body');
-		if (!tbody) return;
-
-		// Calculate pagination
-		const start = (state.currentPage - 1) * state.pageSize;
-		const end = start + state.pageSize;
-		const pageData = state.filteredData.slice(start, end);
-		const totalPages = Math.ceil(state.filteredData.length / state.pageSize);
-
-		// Call custom render function if defined
-		const renderFn = window[tableID + 'Render'];
-		if (typeof renderFn === 'function') {
-			renderFn(tbody, pageData, start);
-		}
-
-		// Update pagination info
-		const pageInfo = document.getElementById(tableID + '-page-info');
-		if (pageInfo) {
-			const showingStart = state.filteredData.length > 0 ? start + 1 : 0;
-			const showingEnd = Math.min(end, state.filteredData.length);
-			pageInfo.textContent = `Showing ${showingStart}-${showingEnd} of ${state.filteredData.length}`;
-		}
-
-		// Update pagination buttons
-		const prevBtn = document.getElementById(tableID + '-prev-page');
-		const nextBtn = document.getElementById(tableID + '-next-page');
-		if (prevBtn) prevBtn.disabled = state.currentPage <= 1;
-		if (nextBtn) nextBtn.disabled = state.currentPage >= totalPages;
-	}
-
-	// Export to CSV
-	function exportTableCSV(tableID, filename) {
-		const state = getTableState(tableID);
-		if (!state.filteredData || state.filteredData.length === 0) {
-			showAlertDialog({
-				title: 'No Data',
-				message: 'No data to export',
-				type: 'info'
-			});
-			return;
-		}
-
-		// Get column headers from first row
-		const headers = Object.keys(state.filteredData[0]);
-
-		// Build CSV content
-		let csv = headers.join(',') + '\n';
-		state.filteredData.forEach(row => {
-			const values = headers.map(h => {
-				let val = row[h];
-				if (val == null) val = '';
-				// Escape quotes and wrap in quotes if contains comma or newline
-				val = String(val).replace(/"/g, '""');
-				if (val.includes(',') || val.includes('\n') || val.includes('"')) {
-					val = '"' + val + '"';
-				}
-				return val;
-			});
-			csv += values.join(',') + '\n';
-		});
-
-		// Download
-		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const link = document.createElement('a');
-		const url = URL.createObjectURL(blob);
-		link.setAttribute('href', url);
-		link.setAttribute('download', `${filename.replace(/\s+/g, '_')}_${new Date().toISOString().split('T')[0]}.csv`);
-		link.style.visibility = 'hidden';
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-	}
-
-	// Format helper functions
-	function formatBytes(bytes) {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-	}
-
-	function formatNumber(num) {
-		if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
-		if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
-		return num.toString();
-	}
-
-	function formatPercent(num) {
-		return num.toFixed(2) + '%';
-	}
-	</script>
-}
diff --git a/gearbox/internal/framework/ui/toast.templ b/gearbox/internal/framework/ui/toast.templ
deleted file mode 100644
index 06c4c1c..0000000
--- a/gearbox/internal/framework/ui/toast.templ
+++ /dev/null
@@ -1,21 +0,0 @@
-// Package ui provides reusable UI components for the HAProxy monitoring framework.
-// These components can be used by plugins and core application code.
-package ui
-
-// ToastOnLoad triggers a toast notification when the page loads.
-// Use this to show success/error messages from query parameters.
-// Uses a data attribute to pass the message safely to JavaScript.
-templ ToastOnLoad(message, toastType string) {
-	<div class="hidden toast-on-load" data-toast-message={ message } data-toast-type={ toastType }></div>
-}
-
-// Toast provides a reusable toast notification component
-// that appears in the top-right corner of the viewport
-templ Toast() {
-	<!-- Toast Container - Fixed position at top-right -->
-	<div id="toast-container" class="fixed top-4 right-4 z-[9999] flex flex-col space-y-2 pointer-events-none">
-		<!-- Toasts will be dynamically added here -->
-	</div>
-	<!-- Load toast notification system -->
-	<script src="/static/js/utils/toast.js" defer></script>
-}
diff --git a/gearbox/internal/framework/ui/toggle.templ b/gearbox/internal/framework/ui/toggle.templ
deleted file mode 100644
index ce9252f..0000000
--- a/gearbox/internal/framework/ui/toggle.templ
+++ /dev/null
@@ -1,73 +0,0 @@
-package ui
-
-// toggleValue defaults an empty value to "on" so the underlying checkbox
-// submits a non-empty form value when checked. This matches the HTML
-// default for a value-less checkbox and keeps `r.FormValue(name) == "on"`
-// callers working without forcing every site to pass an explicit value.
-func toggleValue(v string) string {
-	if v == "" {
-		return "on"
-	}
-	return v
-}
-
-// Toggle creates a switch/toggle input component.
-//
-// id: unique identifier for the input
-// name: form field name
-// value: form value submitted when checked. If empty, defaults to "on"
-//        (the HTML default for a checkbox without a value attribute). Pass
-//        a unique non-empty value when multiple toggles share a name
-//        (multi-select checkbox group).
-// checked: initial state
-// disabled: whether the toggle is disabled
-//
-// This is the canonical toggle for the app. Always use it for boolean form
-// inputs in templates instead of a bare <input type="checkbox">. See
-// CLAUDE.md → UI Conventions → Toggle switches.
-templ Toggle(id string, name string, value string, checked bool, disabled bool) {
-	<label class={ "relative inline-flex items-center", templ.KV("cursor-pointer", !disabled), templ.KV("cursor-not-allowed opacity-50", disabled) }>
-		<input
-			type="checkbox"
-			id={ id }
-			name={ name }
-			value={ toggleValue(value) }
-			class="sr-only peer"
-			checked?={ checked }
-			disabled?={ disabled }
-		/>
-		<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-	</label>
-}
-
-// ToggleWithLabel creates a toggle with an accompanying label
-templ ToggleWithLabel(id string, name string, value string, label string, description string, checked bool, disabled bool) {
-	<div class="flex items-start">
-		<div class="flex items-center h-5">
-			@Toggle(id, name, value, checked, disabled)
-		</div>
-		<div class="ml-3">
-			<label for={ id } class={ "text-sm font-medium text-gray-900 dark:text-gray-100", templ.KV("cursor-pointer", !disabled), templ.KV("cursor-not-allowed", disabled) }>
-				{ label }
-			</label>
-			if description != "" {
-				<p class="text-xs text-gray-500 dark:text-gray-400">{ description }</p>
-			}
-		</div>
-	</div>
-}
-
-// ToggleGroup creates a group of toggles with a heading
-templ ToggleGroup(title string, description string) {
-	<div class="space-y-4">
-		<div>
-			<h4 class="text-sm font-medium text-gray-900 dark:text-gray-100">{ title }</h4>
-			if description != "" {
-				<p class="text-sm text-gray-500 dark:text-gray-400">{ description }</p>
-			}
-		</div>
-		<div class="space-y-3">
-			{ children... }
-		</div>
-	</div>
-}

From f2c9a3b463d706a469dcdc8c60c6ea9c09abb368 Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 29 May 2026 09:48:08 -0700
Subject: [PATCH 4/8] refactor(gearbox): source
 info_tooltip/settings/table/live_refresh from webcore
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Delete the duplicated component files from templates/components and re-export
the moved funcs (InfoTooltip, Settings*, Table*, LiveRefresh*) + type aliases
(SelectOption, TableConfig, TableColumn) as thin wrappers delegating to
webcore/ui/components, so existing components.X call sites keep working with no
churn and the markup is owned solely by webcore. Gearbox-only components
(console, container_diagram, metrics/SystemMetrics, doughnut — coupled to
metrics' unexported helpers) stay in the package.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../templates/components/info_tooltip.templ   |  29 --
 .../templates/components/live_refresh.templ   |  58 ---
 .../templates/components/settings.templ       | 123 ------
 .../templates/components/table.templ          | 410 ------------------
 .../templates/components/webcore_reexport.go  |  12 +
 .../components/webcore_reexport.templ         |  59 +++
 6 files changed, 71 insertions(+), 620 deletions(-)
 delete mode 100644 gearbox/internal/framework/templates/components/info_tooltip.templ
 delete mode 100644 gearbox/internal/framework/templates/components/live_refresh.templ
 delete mode 100644 gearbox/internal/framework/templates/components/settings.templ
 delete mode 100644 gearbox/internal/framework/templates/components/table.templ
 create mode 100644 gearbox/internal/framework/templates/components/webcore_reexport.go
 create mode 100644 gearbox/internal/framework/templates/components/webcore_reexport.templ

diff --git a/gearbox/internal/framework/templates/components/info_tooltip.templ b/gearbox/internal/framework/templates/components/info_tooltip.templ
deleted file mode 100644
index acbeb37..0000000
--- a/gearbox/internal/framework/templates/components/info_tooltip.templ
+++ /dev/null
@@ -1,29 +0,0 @@
-package components
-
-// InfoTooltip renders the canonical "info-circle + hover tooltip" widget
-// used across the app — small grey filled-circle "i" icon that, on hover,
-// reveals a short tooltip bubble. Behaviour matches the HAProxy overview
-// pattern verbatim: pure CSS via Tailwind `group` / `group-hover:visible`
-// (no JS), no cursor change (cursor stays as the default arrow), no
-// transition delay.
-//
-// Use this anywhere you want to attach a short explanation to a label,
-// table column header, KPI title, etc. For richer multi-paragraph
-// content (the "VPN Gateway Architecture" style with a bold title +
-// body), drop the same wrapper markup inline so the tooltip can hold
-// arbitrary HTML; this component is the simple text-only variant.
-//
-// Width defaults to w-64 (16rem). Anchor is left-0 / top-6 — the
-// tooltip extends down-and-right from the icon, which keeps it inside
-// content cards whose icons sit near the left edge.
-templ InfoTooltip(text string) {
-	<span class="relative group inline-flex items-center">
-		<svg class="w-4 h-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
-			<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
-		</svg>
-		<span class="invisible group-hover:visible absolute left-0 top-6 w-64 p-3 bg-gray-900 dark:bg-gray-800 text-white text-xs rounded-lg shadow-lg z-50 normal-case tracking-normal font-normal">
-			{ text }
-			<span class="absolute -top-1 left-2 w-2 h-2 bg-gray-900 dark:bg-gray-800 transform rotate-45"></span>
-		</span>
-	</span>
-}
diff --git a/gearbox/internal/framework/templates/components/live_refresh.templ b/gearbox/internal/framework/templates/components/live_refresh.templ
deleted file mode 100644
index 0a95f9d..0000000
--- a/gearbox/internal/framework/templates/components/live_refresh.templ
+++ /dev/null
@@ -1,58 +0,0 @@
-package components
-
-// LiveRefreshButton creates a refresh button that changes color based on SSE connection status
-// The button shows:
-// - Green when connected (Live)
-// - Yellow when connecting
-// - Red when disconnected
-// - Gray as default
-//
-// Usage: Include this button in your page header controls section, then call updateSSEStatus(status)
-// from your JavaScript to update the button's appearance based on connection state.
-templ LiveRefreshButton() {
-	<button
-		id="refresh-btn"
-		onclick="manualRefresh()"
-		class="p-2 rounded-lg transition-colors text-gray-400"
-		title="Connecting..."
-	>
-		<svg id="refresh-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
-		</svg>
-	</button>
-}
-
-// LiveRefreshButtonScript provides the JavaScript function to update the button status
-// This should be included once per page that uses the LiveRefreshButton component
-templ LiveRefreshButtonScript() {
-	<script>
-		// SSE connection status - update refresh button color
-		// Status can be: 'connected', 'connecting', 'disconnected'
-		function updateSSEStatus(status) {
-			const btn = document.getElementById('refresh-btn');
-			if (!btn) return;
-
-			// Remove all status classes
-			btn.classList.remove('text-green-500', 'text-red-500', 'text-yellow-500', 'text-gray-400');
-
-			// Add appropriate class and update title
-			switch (status) {
-				case 'connected':
-					btn.classList.add('text-green-500');
-					btn.title = 'Live - streaming data';
-					break;
-				case 'connecting':
-					btn.classList.add('text-yellow-500');
-					btn.title = 'Connecting...';
-					break;
-				case 'disconnected':
-					btn.classList.add('text-red-500');
-					btn.title = 'Disconnected - click to retry';
-					break;
-				default:
-					btn.classList.add('text-gray-400');
-					btn.title = 'Connection status unknown';
-			}
-		}
-	</script>
-}
diff --git a/gearbox/internal/framework/templates/components/settings.templ b/gearbox/internal/framework/templates/components/settings.templ
deleted file mode 100644
index 39f5405..0000000
--- a/gearbox/internal/framework/templates/components/settings.templ
+++ /dev/null
@@ -1,123 +0,0 @@
-package components
-
-// SettingsSection wraps a group of settings with a title and description.
-templ SettingsSection(title, description string) {
-	<div class="space-y-6">
-		<div>
-			<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{ title }</h3>
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-				{ description }
-			</p>
-		</div>
-		<div class="space-y-4">
-			{ children... }
-		</div>
-	</div>
-}
-
-// SettingsCheckbox renders a checkbox input with a label and help text.
-templ SettingsCheckbox(id, label, helpText string, checked bool) {
-	<div>
-		<div class="flex items-center">
-			<input
-				type="checkbox"
-				id={ id }
-				name={ id }
-				if checked {
-					checked
-				}
-				class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-			/>
-			<label for={ id } class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
-				{ label }
-			</label>
-		</div>
-		if helpText != "" {
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-				{ helpText }
-			</p>
-		}
-	</div>
-}
-
-// SelectOption represents an option in a select dropdown.
-type SelectOption struct {
-	Value    string
-	Label    string
-	Selected bool
-}
-
-// SettingsSelect renders a select dropdown with a label and help text.
-templ SettingsSelect(id, label, helpText string, options []SelectOption) {
-	<div>
-		<label for={ id } class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-			{ label }
-		</label>
-		<select
-			id={ id }
-			name={ id }
-			class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-		>
-			for _, opt := range options {
-				<option
-					value={ opt.Value }
-					if opt.Selected {
-						selected
-					}
-				>
-					{ opt.Label }
-				</option>
-			}
-		</select>
-		if helpText != "" {
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-				{ helpText }
-			</p>
-		}
-	</div>
-}
-
-// SettingsTextInput renders a text input with a label and help text.
-templ SettingsTextInput(id, label, placeholder, helpText, value string) {
-	<div>
-		<label for={ id } class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-			{ label }
-		</label>
-		<input
-			type="text"
-			id={ id }
-			name={ id }
-			placeholder={ placeholder }
-			value={ value }
-			class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-		/>
-		if helpText != "" {
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-				{ helpText }
-			</p>
-		}
-	</div>
-}
-
-// SettingsNumberInput renders a number input with a label and help text.
-templ SettingsNumberInput(id, label, helpText string, value, min, max int) {
-	<div>
-		<label for={ id } class="block text-sm font-medium text-gray-700 dark:text-gray-300">
-			{ label }
-		</label>
-		<input
-			type="number"
-			id={ id }
-			name={ id }
-			value={ intToString(value) }
-			min={ intToString(min) }
-			max={ intToString(max) }
-			class="mt-1 block w-full rounded-md border-gray-300 dark:border-slate-600 dark:bg-slate-700 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
-		/>
-		if helpText != "" {
-			<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
-				{ helpText }
-			</p>
-		}
-	</div>
-}
diff --git a/gearbox/internal/framework/templates/components/table.templ b/gearbox/internal/framework/templates/components/table.templ
deleted file mode 100644
index ee23f7e..0000000
--- a/gearbox/internal/framework/templates/components/table.templ
+++ /dev/null
@@ -1,410 +0,0 @@
-package components
-
-import (
-	"fmt"
-)
-
-// TableConfig holds configuration for enhanced tables
-type TableConfig struct {
-	ID           string
-	Title        string
-	Description  string
-	EnableSort   bool
-	EnableSearch bool
-	EnablePaging bool
-	EnableExport bool
-	PageSize     int
-	Columns      []TableColumn
-}
-
-// TableColumn defines a column in the table
-type TableColumn struct {
-	Key       string
-	Label     string
-	Sortable  bool
-	DataType  string // "string", "number", "bytes", "percent", "date"
-	Width     string // CSS width
-	Alignment string // "left", "center", "right"
-}
-
-// SortableTableHeader renders a sortable table header
-templ SortableTableHeader(tableID string, columns []TableColumn, defaultSort string, defaultOrder string) {
-	<thead class="bg-gray-50 dark:bg-slate-700">
-		<tr>
-			for _, col := range columns {
-				if col.Sortable {
-					<th
-						class={ "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-600 select-none transition-colors",
-							templ.KV("text-right", col.Alignment == "right"),
-							templ.KV("text-center", col.Alignment == "center") }
-						style={ fmt.Sprintf("width: %s", col.Width) }
-						data-sort-key={ col.Key }
-						data-sort-type={ col.DataType }
-						onclick={ templ.ComponentScript{Call: fmt.Sprintf("sortTable('%s', '%s', '%s')", tableID, col.Key, col.DataType)} }
-					>
-						<div class="flex items-center gap-1">
-							<span>{ col.Label }</span>
-							<span class="sort-indicator text-gray-300 dark:text-gray-500" data-key={ col.Key }>
-								<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
-								</svg>
-							</span>
-						</div>
-					</th>
-				} else {
-					<th
-						class={ "px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase",
-							templ.KV("text-right", col.Alignment == "right"),
-							templ.KV("text-center", col.Alignment == "center") }
-						style={ fmt.Sprintf("width: %s", col.Width) }
-					>
-						{ col.Label }
-					</th>
-				}
-			}
-		</tr>
-	</thead>
-}
-
-// TableToolbar renders the search, filter, and export controls
-templ TableToolbar(tableID string, config TableConfig) {
-	<div class="p-4 border-b border-gray-200 dark:border-slate-700">
-		<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
-			<div>
-				<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">{ config.Title }</h3>
-				if config.Description != "" {
-					<p class="text-sm text-gray-500 dark:text-gray-400">{ config.Description }</p>
-				}
-			</div>
-			<div class="flex flex-wrap items-center gap-2">
-				if config.EnableSearch {
-					<div class="relative">
-						<input
-							type="text"
-							id={ fmt.Sprintf("%s-search", tableID) }
-							placeholder="Search..."
-							maxlength="100"
-							class="w-48 pl-8 pr-3 py-1.5 text-sm border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
-							oninput={ templ.ComponentScript{Call: fmt.Sprintf("filterTable('%s', this.value)", tableID)} }
-						/>
-						<svg class="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-						</svg>
-					</div>
-				}
-				if config.EnableExport {
-					<button
-						onclick={ templ.ComponentScript{Call: fmt.Sprintf("exportTableCSV('%s', '%s')", tableID, config.Title)} }
-						class="px-3 py-1.5 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded-lg transition-colors flex items-center gap-1.5"
-						title="Export to CSV"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
-						</svg>
-						<span class="hidden sm:inline">Export</span>
-					</button>
-				}
-			</div>
-		</div>
-	</div>
-}
-
-// TablePagination renders pagination controls
-templ TablePagination(tableID string, pageSize int) {
-	<div id={ fmt.Sprintf("%s-pagination", tableID) } class="px-4 py-3 border-t border-gray-200 dark:border-slate-700 flex flex-col sm:flex-row items-center justify-between gap-3">
-		<div class="text-sm text-gray-500 dark:text-gray-400">
-			<span id={ fmt.Sprintf("%s-page-info", tableID) }>Showing 1-{ fmt.Sprintf("%d", pageSize) } of 0</span>
-		</div>
-		<div class="flex items-center gap-2">
-			<select
-				id={ fmt.Sprintf("%s-page-size", tableID) }
-				class="px-2 py-1 text-sm border border-gray-300 dark:border-slate-600 rounded bg-white dark:bg-slate-800 text-gray-700 dark:text-gray-300"
-				onchange={ templ.ComponentScript{Call: fmt.Sprintf("changePageSize('%s', this.value)", tableID)} }
-			>
-				<option value="10" selected?={ pageSize == 10 }>10</option>
-				<option value="25" selected?={ pageSize == 25 }>25</option>
-				<option value="50" selected?={ pageSize == 50 }>50</option>
-				<option value="100" selected?={ pageSize == 100 }>100</option>
-			</select>
-			<div class="flex gap-1">
-				<button
-					id={ fmt.Sprintf("%s-prev-page", tableID) }
-					onclick={ templ.ComponentScript{Call: fmt.Sprintf("prevPage('%s')", tableID)} }
-					class="px-2 py-1 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-					disabled
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-					</svg>
-				</button>
-				<button
-					id={ fmt.Sprintf("%s-next-page", tableID) }
-					onclick={ templ.ComponentScript{Call: fmt.Sprintf("nextPage('%s')", tableID)} }
-					class="px-2 py-1 text-sm bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 text-gray-700 dark:text-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-					disabled
-				>
-					<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-					</svg>
-				</button>
-			</div>
-		</div>
-	</div>
-}
-
-// EnhancedTableScripts provides the JavaScript for table functionality
-templ EnhancedTableScripts() {
-	<script>
-	// Table state management
-	const tableStates = new Map();
-
-	function getTableState(tableID) {
-		if (!tableStates.has(tableID)) {
-			tableStates.set(tableID, {
-				data: [],
-				filteredData: [],
-				sortKey: null,
-				sortOrder: 'asc',
-				currentPage: 1,
-				pageSize: 25,
-				searchQuery: ''
-			});
-		}
-		return tableStates.get(tableID);
-	}
-
-	// Initialize table with data
-	function initEnhancedTable(tableID, data, defaultSort = null, defaultOrder = 'desc', pageSize = 25) {
-		const state = getTableState(tableID);
-		state.data = data;
-		state.filteredData = [...data];
-		state.pageSize = pageSize;
-		state.sortKey = defaultSort;
-		state.sortOrder = defaultOrder;
-
-		if (defaultSort) {
-			sortTableData(tableID, defaultSort, defaultOrder);
-		}
-
-		renderTable(tableID);
-	}
-
-	// Sort table by column
-	function sortTable(tableID, key, dataType) {
-		const state = getTableState(tableID);
-
-		// Toggle sort order if same key
-		if (state.sortKey === key) {
-			state.sortOrder = state.sortOrder === 'asc' ? 'desc' : 'asc';
-		} else {
-			state.sortKey = key;
-			state.sortOrder = 'desc'; // Default to descending for numeric data
-		}
-
-		sortTableData(tableID, key, state.sortOrder, dataType);
-		state.currentPage = 1;
-		renderTable(tableID);
-		updateSortIndicators(tableID, key, state.sortOrder);
-	}
-
-	function sortTableData(tableID, key, order, dataType) {
-		const state = getTableState(tableID);
-
-		state.filteredData.sort((a, b) => {
-			let valA = getNestedValue(a, key);
-			let valB = getNestedValue(b, key);
-
-			// Handle null/undefined
-			if (valA == null) valA = '';
-			if (valB == null) valB = '';
-
-			// Type-specific comparison
-			if (dataType === 'number' || dataType === 'bytes' || dataType === 'percent') {
-				valA = parseFloat(valA) || 0;
-				valB = parseFloat(valB) || 0;
-			} else if (dataType === 'date') {
-				valA = new Date(valA).getTime() || 0;
-				valB = new Date(valB).getTime() || 0;
-			} else {
-				valA = String(valA).toLowerCase();
-				valB = String(valB).toLowerCase();
-			}
-
-			if (valA < valB) return order === 'asc' ? -1 : 1;
-			if (valA > valB) return order === 'asc' ? 1 : -1;
-			return 0;
-		});
-	}
-
-	// Get nested object value by dot notation key
-	function getNestedValue(obj, key) {
-		return key.split('.').reduce((o, k) => (o && o[k] !== undefined) ? o[k] : null, obj);
-	}
-
-	// Update sort indicators in header
-	function updateSortIndicators(tableID, activeKey, order) {
-		const table = document.getElementById(tableID);
-		if (!table) return;
-
-		table.querySelectorAll('.sort-indicator').forEach(indicator => {
-			const key = indicator.dataset.key;
-			if (key === activeKey) {
-				indicator.classList.remove('text-gray-300', 'dark:text-gray-500');
-				indicator.classList.add('text-blue-500');
-				indicator.innerHTML = order === 'asc'
-					? '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>'
-					: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>';
-			} else {
-				indicator.classList.add('text-gray-300', 'dark:text-gray-500');
-				indicator.classList.remove('text-blue-500');
-				indicator.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path></svg>';
-			}
-		});
-	}
-
-	// Filter table by search query
-	function filterTable(tableID, query) {
-		const state = getTableState(tableID);
-		state.searchQuery = query.toLowerCase();
-		state.currentPage = 1;
-
-		if (!state.searchQuery) {
-			state.filteredData = [...state.data];
-		} else {
-			state.filteredData = state.data.filter(row => {
-				return Object.values(row).some(val => {
-					if (val == null) return false;
-					return String(val).toLowerCase().includes(state.searchQuery);
-				});
-			});
-		}
-
-		// Re-apply sort if active
-		if (state.sortKey) {
-			sortTableData(tableID, state.sortKey, state.sortOrder);
-		}
-
-		renderTable(tableID);
-	}
-
-	// Pagination controls
-	function nextPage(tableID) {
-		const state = getTableState(tableID);
-		const totalPages = Math.ceil(state.filteredData.length / state.pageSize);
-		if (state.currentPage < totalPages) {
-			state.currentPage++;
-			renderTable(tableID);
-		}
-	}
-
-	function prevPage(tableID) {
-		const state = getTableState(tableID);
-		if (state.currentPage > 1) {
-			state.currentPage--;
-			renderTable(tableID);
-		}
-	}
-
-	function changePageSize(tableID, size) {
-		const state = getTableState(tableID);
-		state.pageSize = parseInt(size);
-		state.currentPage = 1;
-		renderTable(tableID);
-	}
-
-	// Render table with current state
-	function renderTable(tableID) {
-		const state = getTableState(tableID);
-		const tbody = document.getElementById(tableID + '-body');
-		if (!tbody) return;
-
-		// Calculate pagination
-		const start = (state.currentPage - 1) * state.pageSize;
-		const end = start + state.pageSize;
-		const pageData = state.filteredData.slice(start, end);
-		const totalPages = Math.ceil(state.filteredData.length / state.pageSize);
-
-		// Call custom render function if defined
-		const renderFn = window[tableID + 'Render'];
-		if (typeof renderFn === 'function') {
-			renderFn(tbody, pageData, start);
-		}
-
-		// Update pagination info
-		const pageInfo = document.getElementById(tableID + '-page-info');
-		if (pageInfo) {
-			const showingStart = state.filteredData.length > 0 ? start + 1 : 0;
-			const showingEnd = Math.min(end, state.filteredData.length);
-			pageInfo.textContent = `Showing ${showingStart}-${showingEnd} of ${state.filteredData.length}`;
-		}
-
-		// Update pagination buttons
-		const prevBtn = document.getElementById(tableID + '-prev-page');
-		const nextBtn = document.getElementById(tableID + '-next-page');
-		if (prevBtn) prevBtn.disabled = state.currentPage <= 1;
-		if (nextBtn) nextBtn.disabled = state.currentPage >= totalPages;
-	}
-
-	// Export to CSV
-	function exportTableCSV(tableID, filename) {
-		const state = getTableState(tableID);
-		if (!state.filteredData || state.filteredData.length === 0) {
-			showAlertDialog({
-				title: 'No Data',
-				message: 'No data to export',
-				type: 'info'
-			});
-			return;
-		}
-
-		// Get column headers from first row
-		const headers = Object.keys(state.filteredData[0]);
-
-		// Build CSV content
-		let csv = headers.join(',') + '\n';
-		state.filteredData.forEach(row => {
-			const values = headers.map(h => {
-				let val = row[h];
-				if (val == null) val = '';
-				// Escape quotes and wrap in quotes if contains comma or newline
-				val = String(val).replace(/"/g, '""');
-				if (val.includes(',') || val.includes('\n') || val.includes('"')) {
-					val = '"' + val + '"';
-				}
-				return val;
-			});
-			csv += values.join(',') + '\n';
-		});
-
-		// Download
-		const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
-		const link = document.createElement('a');
-		const url = URL.createObjectURL(blob);
-		link.setAttribute('href', url);
-		link.setAttribute('download', `${filename.replace(/\s+/g, '_')}_${new Date().toISOString().split('T')[0]}.csv`);
-		link.style.visibility = 'hidden';
-		document.body.appendChild(link);
-		link.click();
-		document.body.removeChild(link);
-	}
-
-	// Format helper functions
-	function formatBytes(bytes) {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-	}
-
-	function formatNumber(num) {
-		if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
-		if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
-		return num.toString();
-	}
-
-	function formatPercent(num) {
-		return num.toFixed(2) + '%';
-	}
-	</script>
-}
diff --git a/gearbox/internal/framework/templates/components/webcore_reexport.go b/gearbox/internal/framework/templates/components/webcore_reexport.go
new file mode 100644
index 0000000..bddcd7b
--- /dev/null
+++ b/gearbox/internal/framework/templates/components/webcore_reexport.go
@@ -0,0 +1,12 @@
+package components
+
+import wc "github.com/sarg3nt/webcore/ui/components"
+
+// Type aliases for the moved components' parameter types, so existing
+// gearbox call sites using components.SelectOption / TableConfig / TableColumn
+// keep compiling against the webcore definitions (identical types).
+type (
+	SelectOption = wc.SelectOption
+	TableConfig  = wc.TableConfig
+	TableColumn  = wc.TableColumn
+)
diff --git a/gearbox/internal/framework/templates/components/webcore_reexport.templ b/gearbox/internal/framework/templates/components/webcore_reexport.templ
new file mode 100644
index 0000000..0931c6d
--- /dev/null
+++ b/gearbox/internal/framework/templates/components/webcore_reexport.templ
@@ -0,0 +1,59 @@
+package components
+
+// Re-exports of UI components that now live in webcore. These thin wrappers
+// keep gearbox's existing `components.X` call sites working while the actual
+// markup/JS/CSS is owned by github.com/sarg3nt/webcore/ui/components — a single
+// source of truth, no duplicated HTML. Gearbox-only components (console,
+// container_diagram, metrics/SystemMetrics, doughnut) remain in this package.
+
+import wc "github.com/sarg3nt/webcore/ui/components"
+
+templ InfoTooltip(text string) {
+	@wc.InfoTooltip(text)
+}
+
+templ SettingsSection(title, description string) {
+	@wc.SettingsSection(title, description) {
+		{ children... }
+	}
+}
+
+templ SettingsCheckbox(id, label, helpText string, checked bool) {
+	@wc.SettingsCheckbox(id, label, helpText, checked)
+}
+
+templ SettingsSelect(id, label, helpText string, options []SelectOption) {
+	@wc.SettingsSelect(id, label, helpText, options)
+}
+
+templ SettingsTextInput(id, label, placeholder, helpText, value string) {
+	@wc.SettingsTextInput(id, label, placeholder, helpText, value)
+}
+
+templ SettingsNumberInput(id, label, helpText string, value, min, max int) {
+	@wc.SettingsNumberInput(id, label, helpText, value, min, max)
+}
+
+templ SortableTableHeader(tableID string, columns []TableColumn, defaultSort string, defaultOrder string) {
+	@wc.SortableTableHeader(tableID, columns, defaultSort, defaultOrder)
+}
+
+templ TableToolbar(tableID string, config TableConfig) {
+	@wc.TableToolbar(tableID, config)
+}
+
+templ TablePagination(tableID string, pageSize int) {
+	@wc.TablePagination(tableID, pageSize)
+}
+
+templ EnhancedTableScripts() {
+	@wc.EnhancedTableScripts()
+}
+
+templ LiveRefreshButton() {
+	@wc.LiveRefreshButton()
+}
+
+templ LiveRefreshButtonScript() {
+	@wc.LiveRefreshButtonScript()
+}

From 944d2616908e093465530a073fd1e42fe2fbd018 Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 3 Jul 2026 14:16:15 -0700
Subject: [PATCH 5/8] fix(gearbox): pin webcore v0.1.0 + backport Hub shutdown
 fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two fixes from the adversarial review of the webcore adoption branch:

1. Module resolution: the local `replace => ../../webcore` with a fake v0.0.0
   only resolved on the development machine — CI's single-repo checkout,
   Docker's `context: ./gearbox`, and `go install` all failed. webcore is now
   published and tagged, so pin the real github.com/sarg3nt/webcore v0.1.0
   (go.sum hashes recorded) and drop the replace directive entirely.

2. Backport the events.Hub shutdown fixes to gearbox's own copy (the same
   bugs were fixed in webcore v0.1.0; gearbox still runs its own events
   package until that cutover): Subscribe deadlocked forever when called
   after Stop — reachable from the SSE handler on any shutdown race, pinning
   the HTTP goroutine — and Stop panicked on a second call. Subscribe now
   selects on done and returns a pre-closed Events channel (the SSE handler's
   !ok receive already handles it); Stop is sync.Once guarded.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 gearbox/go.mod                           |  4 +---
 gearbox/go.sum                           |  2 ++
 gearbox/internal/framework/events/hub.go | 18 ++++++++++++++----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/gearbox/go.mod b/gearbox/go.mod
index 85760a8..56fd8a6 100644
--- a/gearbox/go.mod
+++ b/gearbox/go.mod
@@ -27,7 +27,7 @@ require (
 	github.com/ncruces/go-strftime v1.0.0 // indirect
 	github.com/philhofer/fwd v1.2.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/sarg3nt/webcore v0.0.0
+	github.com/sarg3nt/webcore v0.1.0
 	github.com/tinylib/msgp v1.6.4 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
 	golang.org/x/sys v0.45.0 // indirect
@@ -35,5 +35,3 @@ require (
 	modernc.org/mathutil v1.7.1 // indirect
 	modernc.org/memory v1.11.0 // indirect
 )
-
-replace github.com/sarg3nt/webcore => ../../webcore
diff --git a/gearbox/go.sum b/gearbox/go.sum
index fcc31a2..60d905b 100644
--- a/gearbox/go.sum
+++ b/gearbox/go.sum
@@ -50,6 +50,8 @@ github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2 h1:Jamvg5psRI
 github.com/pmezard/go-difflib v1.0.1-0.20181226105442-5d4384ee4fb2/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec h1:W09IVJc94icq4NjY3clb7Lk8O1qJ8BdBEF8z0ibU0rE=
 github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec/go.mod h1:qqbHyh8v60DhA7CoWK5oRCqLrMHRGoxYCSS9EjAz6Eo=
+github.com/sarg3nt/webcore v0.1.0 h1:lB3PtuMb4/5guPj6DTn2Azi7drOY0deNDAWWwZZPOtc=
+github.com/sarg3nt/webcore v0.1.0/go.mod h1:LQipBfXp8zn3tWhCvjpopvYQVDFTv65EGilgGeJ4ZTU=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/tinylib/msgp v1.6.4 h1:mOwYbyYDLPj35mkA2BjjYejgJk9BuHxDdvRnb6v2ZcQ=
diff --git a/gearbox/internal/framework/events/hub.go b/gearbox/internal/framework/events/hub.go
index d5e2cd2..7367ee8 100644
--- a/gearbox/internal/framework/events/hub.go
+++ b/gearbox/internal/framework/events/hub.go
@@ -137,6 +137,7 @@ type Hub struct {
 	register    chan *Subscriber
 	unregister  chan *Subscriber
 	done        chan struct{}
+	stopOnce    sync.Once
 	// subscriberDrops is owned by run() and must not be touched from other
 	// goroutines.
 	subscriberDrops map[dropKey]*dropAggregator
@@ -166,9 +167,10 @@ func (h *Hub) Start() {
 	go h.run()
 }
 
-// Stop gracefully shuts down the hub.
+// Stop gracefully shuts down the hub. Safe to call more than once (e.g. from
+// both a signal handler and a defer).
 func (h *Hub) Stop() {
-	close(h.done)
+	h.stopOnce.Do(func() { close(h.done) })
 }
 
 // run is the main event loop.
@@ -221,7 +223,11 @@ func (h *Hub) run() {
 	}
 }
 
-// Subscribe creates a new subscriber.
+// Subscribe creates a new subscriber. If the hub has already been stopped,
+// the returned subscriber's Events channel is pre-closed so consumers (e.g.
+// the SSE handler's `event, ok := <-sub.Events`) observe !ok and exit —
+// instead of this call blocking forever on a registration that nothing will
+// ever drain (shutdown-race goroutine/connection leak).
 func (h *Hub) Subscribe(id string, serverID string) *Subscriber {
 	sub := &Subscriber{
 		ID:       id,
@@ -230,7 +236,11 @@ func (h *Hub) Subscribe(id string, serverID string) *Subscriber {
 		done:     make(chan struct{}),
 	}
 
-	h.register <- sub
+	select {
+	case h.register <- sub:
+	case <-h.done:
+		close(sub.Events)
+	}
 	return sub
 }
 

From d0edc7b252cffe307aba86911e3b833d9e1a6690 Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 3 Jul 2026 20:34:37 -0700
Subject: [PATCH 6/8] chore: drop dead intToString from components helpers

Its only consumer (settings.templ) moved to webcore; the pages package has
its own copy. Fixes the unused-func lint on PR #155.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 gearbox/internal/framework/templates/components/helpers.go | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/gearbox/internal/framework/templates/components/helpers.go b/gearbox/internal/framework/templates/components/helpers.go
index 492ee42..8cc035b 100644
--- a/gearbox/internal/framework/templates/components/helpers.go
+++ b/gearbox/internal/framework/templates/components/helpers.go
@@ -50,8 +50,3 @@ func calculateCPUPercentage(loadAvg float64) float64 {
 	return percentage
 }
 
-// intToString converts an integer to a string.
-// Used by settings components for HTML attribute values.
-func intToString(n int) string {
-	return fmt.Sprintf("%d", n)
-}

From 63c69db9a1dfd9806f262dd87d39410234216bbb Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 3 Jul 2026 20:38:11 -0700
Subject: [PATCH 7/8] chore: address Copilot review findings

- rotator_test: failure message said NewEncryptor; the call is NewFromHashedKey
- go.mod: move the direct webcore dependency into the direct require block

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 gearbox/go.mod                                                  | 2 +-
 .../internal/framework/services/agent_keyring/rotator_test.go   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/gearbox/go.mod b/gearbox/go.mod
index 56fd8a6..9298680 100644
--- a/gearbox/go.mod
+++ b/gearbox/go.mod
@@ -10,6 +10,7 @@ require (
 	github.com/google/uuid v1.6.0
 	github.com/gorilla/sessions v1.4.0
 	github.com/gorilla/websocket v1.5.3
+	github.com/sarg3nt/webcore v0.1.0
 	github.com/wagslane/go-password-validator v0.3.0
 	golang.org/x/crypto v0.52.0
 	modernc.org/sqlite v1.50.1
@@ -27,7 +28,6 @@ require (
 	github.com/ncruces/go-strftime v1.0.0 // indirect
 	github.com/philhofer/fwd v1.2.0 // indirect
 	github.com/remyoudompheng/bigfft v0.0.0-20230129092748-24d4a6f8daec // indirect
-	github.com/sarg3nt/webcore v0.1.0
 	github.com/tinylib/msgp v1.6.4 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
 	golang.org/x/sys v0.45.0 // indirect
diff --git a/gearbox/internal/framework/services/agent_keyring/rotator_test.go b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
index 2ed65d5..071c397 100644
--- a/gearbox/internal/framework/services/agent_keyring/rotator_test.go
+++ b/gearbox/internal/framework/services/agent_keyring/rotator_test.go
@@ -193,7 +193,7 @@ func setupRotator(t *testing.T) (*Rotator, *agentMock, *database.DB, *database.B
 
 	enc, err := dashcrypto.NewFromHashedKey("test-encryption-secret-32-bytes!")
 	if err != nil {
-		t.Fatalf("NewEncryptor: %v", err)
+		t.Fatalf("NewFromHashedKey: %v", err)
 	}
 
 	box := &database.BoxDB{

From 1741632629a16f817a292a8069f1478a1f192b36 Mon Sep 17 00:00:00 2001
From: Dave Sargent <dave@sarg3.net>
Date: Fri, 3 Jul 2026 20:39:02 -0700
Subject: [PATCH 8/8] docs: drop duplicated extraction plan

The canonical copy lives in the webcore repo (docs/webcore-extraction-plan.md);
this stale duplicate also hardcoded contributor-specific paths, per review.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/webcore-extraction-plan.md | 523 --------------------------------
 1 file changed, 523 deletions(-)
 delete mode 100644 docs/webcore-extraction-plan.md

diff --git a/docs/webcore-extraction-plan.md b/docs/webcore-extraction-plan.md
deleted file mode 100644
index f98c778..0000000
--- a/docs/webcore-extraction-plan.md
+++ /dev/null
@@ -1,523 +0,0 @@
-# Web-core extraction plan
-
-Status: **Planned, not started.**
-Owner: Dave + Claude (Opus 4.7 → upgrading)
-Last updated: 2026-05-28
-Working directories involved: `/Users/dave/src/gearbox`, `/Users/dave/src/libation`, future `/Users/dave/src/webcore`
-
-This document is the single source of truth for extracting shared web framework code out of `gearbox` and `libation` into a new module so all current and future sarg3nt web apps consume the same UI primitives, auth flow, session/CSRF handling, SSE transport, and form/validation helpers. It is written to be self-contained — a fresh Claude session must be able to pick up from here without re-running the audit.
-
----
-
-## 1. Decisions (locked)
-
-| # | Decision | Value |
-|---|----------|-------|
-| 1 | Module path | `github.com/sarg3nt/webcore` |
-| 2 | Repo layout | Single repo, two top-level Go packages: `ui/` and `core/` |
-| 3 | Cutover order | Gearbox first (source of truth), then libation |
-| 4 | Pre-extraction cleanup | Part of extraction, not separate gearbox PRs |
-| 5 | Login UI scope | Include password reset, change-password, forgot-password flows in MVP |
-| 6 | SSE transport | Extract `core/transport/sse.go` + `ui/static/js/sse.js` |
-| 7 | `dev_bypass` build tags | Lift gearbox's `--tags dev` loopback bypass into shared `core/auth` |
-
-User instruction verbatim: "Write the plan in a detailed .md file in either rep, I don't care which. I need to restart VS code / Claude as there is a new version of Claude out that we need to upgrade to. But write the plan first, make sure you have all the context to get back to work on this once the restart and new Opus model are online."
-
----
-
-## 2. Conversation context — what just happened
-
-Earlier in the same session before this plan was written:
-
-### Libation UI fixes already shipped (working in browser, not committed)
-
-Goal was to bring libation's layout closer to gearbox. User reported three specific issues:
-
-1. Left-hand nav scrolled with the page — wanted fixed.
-2. Toasts appeared in the wrong place (bottom-right vs gearbox's top-right).
-3. Sidebar collapse was visually broken.
-
-Changes applied in libation:
-
-- `internal/framework/ui/toast.templ` — moved container `fixed bottom-4 right-4 z-50` → `fixed top-4 right-4 z-[9999]` with `pointer-events-none`.
-- `assets/static/css/sidebar.css` — full rewrite. Fixed-position rail (15rem expanded, 3.5rem collapsed), `transition: width 0.25s ease-in-out` on sidebar + `margin-left` on `#main-content`, label fade-out via opacity+width, collapsed nav-link centers icon, mobile (<md) hides sidebar + clears margin, overlay-style scrollbar.
-- `internal/framework/templates/layouts/sidebar.templ` — restructured: outer `<aside>` carries only positioning, inner `flex flex-col w-full h-full` wrapper splits non-scrolling header from `<nav id="sidebar-nav-scroll">`. Added `.nav-link`, `.nav-section-heading`, `.nav-sublist` class hooks.
-- `internal/framework/templates/layouts/base.templ` — dropped `<div class="flex min-h-screen">` wrapper. `<main id="main-content">` reflows via CSS margin-left. Added inline boot script in `<head>` that applies `.sidebar-collapsed` to `<html>` from localStorage before first paint (prevents flash).
-- `assets/static/js/sidebar.js` — toggle now mutates `.sidebar-collapsed` on `<html>` (single source of truth for both rail width and main margin). Dropped `data-collapsed` attribute.
-- `.air.toml` — `include_ext` gained `js`, `css` so static-asset edits trigger rebuild + re-embed.
-
-### Libation UI work still pending (deferred until extraction)
-
-User then asked for two more improvements which were deferred to avoid throwaway work:
-
-- **Full-width fixed-top header** like gearbox (currently libation's header is inside the main flow, not fixed). Plan to port gearbox's pattern: `<header class="fixed top-0 inset-x-0 z-50">` with `pt-[57px]` on main-content.
-- **Richer toast features** like gearbox's `utils/toast.js` (475 lines vs libation's 133): positions, drag-dismiss, progress bars, action buttons, ARIA, queueing.
-
-These two land **as part of the libation cutover** to `webcore`, not as standalone libation edits.
-
-### Dev server state caveat
-
-During the libation UI fixes, the user's `make dev` (which runs `air`) was disrupted because the old `.air.toml` didn't watch js/css, so the running binary held stale embedded assets. To force a re-embed I `kill -9`'d the main process; this orphaned the air supervisor. I started a fresh `./tmp/main` manually so the browser session kept working. The user needs to `Ctrl-C` and re-run `make dev` in their dev terminal to restore the supervisor. The new `.air.toml` will rebuild on js/css edits going forward.
-
----
-
-## 3. Architecture: target module shape
-
-```text
-github.com/sarg3nt/webcore/
-├── go.mod              (module github.com/sarg3nt/webcore)
-├── README.md
-├── LICENSE             (MIT, matching gearbox/libation)
-├── CHANGELOG.md
-│
-├── ui/                 ── frontend "skin"
-│   ├── templ/          ── *.templ files
-│   │   ├── alerts.templ
-│   │   ├── badge.templ
-│   │   ├── collapsible.templ
-│   │   ├── doughnut.templ
-│   │   ├── icons.templ
-│   │   ├── info_tooltip.templ
-│   │   ├── live_refresh.templ      (abstract — caller wires manualRefresh/updateSSEStatus)
-│   │   ├── login.templ             (email + password + WebAuthn button + flash slot + branding slot)
-│   │   ├── change_password.templ
-│   │   ├── forgot_password.templ
-│   │   ├── reset_password.templ
-│   │   ├── metric_card.templ       (split out of gearbox metrics.templ)
-│   │   ├── modal.templ
-│   │   ├── settings.templ          (SettingsSection + form controls)
-│   │   ├── table.templ             (deduped — gearbox currently has two copies)
-│   │   ├── toast.templ
-│   │   └── toggle.templ
-│   ├── static/
-│   │   ├── js/
-│   │   │   ├── utils/
-│   │   │   │   ├── api.js          (baseURL + tenantParam hook, no /api/v1 hardcode)
-│   │   │   │   ├── char-limit.js
-│   │   │   │   ├── dom.js
-│   │   │   │   ├── formatting.js
-│   │   │   │   └── toast.js        (gearbox 475-line full-featured)
-│   │   │   ├── common/
-│   │   │   │   ├── command-palette.js  (gearbox 636-line, fuzzy match + kbd nav)
-│   │   │   │   ├── datagrid.js     (Tabulator wrapper, neutral class name)
-│   │   │   │   ├── focus-trap.js
-│   │   │   │   ├── header-search.js (neutral register() API)
-│   │   │   │   ├── info-tooltip.js
-│   │   │   │   ├── keymap.js       (renamed namespace from window.GearboxKeymap)
-│   │   │   │   ├── page-header.js
-│   │   │   │   ├── shortcut-help.js (shortcuts table as input)
-│   │   │   │   ├── sidebar.js      (libation's new fixed-rail toggle)
-│   │   │   │   └── sse.js          (EventSource wrapper + reconnect + topic filter)
-│   │   │   └── charts/
-│   │   │       ├── chart-defaults.js
-│   │   │       ├── chart-fullscreen.js
-│   │   │       └── chart-sse.js    (URL factory parameter)
-│   │   └── css/
-│   │       ├── utilities.css
-│   │       ├── sidebar.css         (libation's new fixed-position rail)
-│   │       └── components/
-│   │           ├── buttons.css
-│   │           ├── cards.css
-│   │           ├── datagrid.css    (renamed from datagrid-unifi class)
-│   │           └── modals.css
-│   └── assets.go       (//go:embed static + var StaticFiles embed.FS)
-│
-└── core/               ── backend "spine"
-    ├── auth/
-    │   ├── manager.go           (Login, Logout, GetUser, IsAuthenticated, ExtendSession, GetCSRFToken, ValidateCSRFToken)
-    │   ├── userstore.go         (UserStore interface — apps implement against their own DB)
-    │   ├── authuser.go          (AuthUser interface — apps' models.User satisfies)
-    │   ├── password.go          (HashPassword, CheckPassword, ValidatePassword, GenerateRandomPassword, GeneratePasswordEntropy)
-    │   ├── csrf.go              (GenerateCSRFToken, ValidateCSRFToken extracted from manager)
-    │   ├── security.go          (GenerateSecureToken, GenerateSessionToken, GenerateUUID, ValidateEmail)
-    │   ├── reset.go             (RequestPasswordReset, ResetPassword)
-    │   ├── change.go            (ChangePassword, SetPassword, MustChangePassword middleware gate)
-    │   ├── middleware.go        (RequireAuth, RequireCSRF, RequireAdmin, RequirePasswordChange)
-    │   ├── login_handler.go     (LoginHandlerBuilder takes Manager + Renderer + redirect path)
-    │   ├── flash.go             (typed Flash, PutJSON/GetJSON/DeleteKey — libation's clean primitive)
-    │   ├── dev_bypass_on.go     (//go:build dev — loopback bypass from gearbox)
-    │   └── dev_bypass_off.go    (//go:build !dev)
-    ├── webauthn/                (libation's two-file split — RP wrapper + WebAuthnUser)
-    │   ├── rp.go
-    │   └── user.go
-    ├── middleware/
-    │   ├── security_headers.go  (CSPConfig — gearbox's CSP builder + libation's local-vs-cdn toggle)
-    │   └── ratelimit.go         (golang.org/x/time/rate — libation's vetted impl)
-    ├── errors/
-    │   └── apperror.go          (AppError + NotFound/Unauthorized/Forbidden/BadRequest/Internal/Conflict/ServiceUnavailable + WrapDatabaseError + WriteHTTPError + SanitizeError)
-    ├── events/
-    │   └── hub.go               (gearbox's Hub — per-subscriber buffer, drop coalescing, generic Topic filter)
-    ├── transport/
-    │   └── sse.go               (HTTP handler taking Hub + topic-filter func)
-    ├── validation/
-    │   └── validator.go         (Required, MinLength, MaxLength, Email, URL, Alphanumeric, IPAddress, Port, Hostname)
-    ├── crypto/
-    │   └── encryptor.go         (AES-256-GCM)
-    ├── migrate/
-    │   └── runner.go            (MigrateManager taking caller-supplied embed.FS)
-    └── responses/
-        └── envelopes.go         (ErrorResponse, SuccessResponse, ValidationResponse — only the generic ones)
-```
-
----
-
-## 4. Inventory: what extracts, what stays, abstractions required
-
-### 4.1 UI — templ components
-
-Sources are gearbox `internal/framework/ui/*.templ` and `internal/framework/templates/components/*.templ`.
-
-| Component | Source | Extract action | Abstraction |
-|-----------|--------|----------------|-------------|
-| `alerts.templ` | `framework/ui/` | Direct lift | None |
-| `badge.templ` | `framework/ui/` | Direct lift | None |
-| `toast.templ` | `framework/ui/` | Lift + parameterize | Script src path — caller supplies or split script tag out of templ |
-| `toggle.templ` | `framework/ui/` | Direct lift | None |
-| `modal.templ` | `framework/ui/` | Direct lift | None |
-| `collapsible.templ` | `framework/ui/` | Lift + namespace | localStorage key prefix becomes per-app — pass as template param |
-| `icons.templ` | `framework/ui/` | Direct lift (~35 heroicons) | None |
-| `info_tooltip.templ` | `templates/components/` | Direct lift | None |
-| `doughnut.templ` | `templates/components/` | Direct lift | None (StatusDoughnut signature is already generic) |
-| `settings.templ` | `templates/components/` | Direct lift | None |
-| `metric_card` | Split from `templates/components/metrics.templ` | Lift `MetricCard*` only | Generic `MetricView{Label, Value, Unit}` |
-| `table.templ` | Dedup `framework/ui/` and `templates/components/` first | Lift one | Document `sortTable`/`filterTable`/`exportTableCSV` JS contract (currently missing — must be written) |
-| `live_refresh.templ` | Dedup same | Lift one | Caller wires `manualRefresh()` + `updateSSEStatus()` as globals or via injected JS |
-| `login.templ` | New | Build using gearbox layout patterns | Branding slot + flash slot + WebAuthn-button slot |
-| `change_password.templ` | New | Build | Branding + flash |
-| `forgot_password.templ` | New | Build | Branding + flash |
-| `reset_password.templ` | New | Build | Branding + flash |
-
-Stays in gearbox:
-
-- `templates/components/console.templ` (multi-session xterm.js drawer/dock — tightly bound to ConsoleManager + box switching)
-- `templates/components/container_diagram.templ` (VPN-gateway / multi-container topology — `models.Container`, NetworkMode `service:` semantics)
-- All `templates/pages/*.templ` (per-page templates are app-specific)
-- `templates/layouts/base.templ` (gearbox's is 2763 lines, heavily coupled to box-chip/breadcrumb/gear concepts — both apps will keep their own `base.templ` and compose shared components inside it)
-
-### 4.2 UI — JavaScript
-
-Source root: gearbox `static/js/`.
-
-| File | Action | Notes |
-|------|--------|-------|
-| `utils/toast.js` | Direct lift | 475 lines, fully self-contained, no gearbox refs |
-| `utils/dom.js` | Direct lift | show/hide/toggle/setText helpers |
-| `utils/formatting.js` | Direct lift | formatBytes/Number/Duration |
-| `utils/char-limit.js` | Direct lift | `data-charlimit` counter |
-| `utils/api.js` | Lift + abstract | Strip `/api/v1` baseURL + `box_id` query param. Take `baseURL` config + `tenantParam` hook |
-| `common/focus-trap.js` | Direct lift | W3C APG impl |
-| `common/keymap.js` | Lift + rename | `window.GearboxKeymap` → neutral namespace (e.g. `window.WebCore.Keymap`) |
-| `common/info-tooltip.js` | Direct lift | JS counterpart of templ |
-| `common/page-header.js` | Direct lift | Hoists `#page-header-source` → `#header-page-content` |
-| `common/datagrid.js` | Direct lift + rename | Tabulator wrapper, drop `datagrid-unifi` class name to neutral |
-| `common/header-search.js` | Lift + abstract | Strip `window.gearbox.filter`; expose neutral `register()` API |
-| `common/shortcut-help.js` | Lift + abstract | Shortcuts table as input; pluggable `onEscapeFallback` chain; drop gear "edit mode" detection |
-| `common/command-palette.js` | Lift + abstract | 636-line gearbox version. Strip `window.gearbox.commands` registry; expose generic registration. Boxes/gears/pages JSON islands become caller-supplied data sources. |
-| `common/sidebar.js` | New, from libation | The new fixed-rail toggle (already written in libation) — promote |
-| `common/sse.js` | New | Generic EventSource wrapper + reconnect + topic filter — replaces libation's 30-line `sse.js` and gearbox's `chart-sse.js` |
-| `charts/chart-defaults.js` | Direct lift | Chart.js theme palette + zoom — rename namespace |
-| `charts/chart-fullscreen.js` | Direct lift | DOM-class fullscreen toggle |
-| `charts/chart-sse.js` | Lift + abstract | URL factory parameter instead of `/api/events?server=` |
-
-Stays in gearbox:
-
-- `common/box-selector.js` (`switchBox(boxID)` + `box_id` cookie)
-- `common/gear-commands.js` (`window.gearbox.filter`/`commands` per-page registries — names alone are domain)
-- Anything per-gear (containers/, gears/, traffic/, etc.)
-
-### 4.3 UI — CSS
-
-Source root: gearbox `static/css/`.
-
-| File | Action | Notes |
-|------|--------|-------|
-| `utilities.css` | Direct lift | transitions, focus-ring, spinner, gradients, dark scrollbar |
-| `components/buttons.css` | Direct lift | `.btn` + variants, tailwind `@apply`-based |
-| `components/cards.css` | Direct lift | `.status-card*` |
-| `components/modals.css` | Direct lift | `.modal-*` utilities |
-| `components/datagrid.css` | Direct lift + rename | UniFi-style Tabulator skin, rename `.datagrid-unifi` → `.datagrid` |
-| `sidebar.css` | New, from libation | Promote libation's new file (fixed-position rail + transitions + mobile rules) |
-
-Stays in gearbox:
-
-- `components/console.css` (drawer/dock for `#console-drawer`)
-- `components/home.css` (Gridstack tiles)
-- `firewall_config_editor.css`, `haproxy_config_editor.css` (per-gear)
-
-### 4.4 Core — Go packages
-
-| Package | Action | Source preference | Coupling notes |
-|---------|--------|-------------------|----------------|
-| `errors/` | Direct lift | Gearbox | Stdlib only. Libation has nothing here — pure addition for libation. |
-| `validation/` | Direct lift | Gearbox | Stdlib only. |
-| `crypto/` | Direct lift | Either (equivalent impls) | Compare gearbox vs libation, pick cleaner. |
-| `migrate/` | Lift + abstract | Libation (leaner) | Take caller-supplied `embed.FS`. Both repos' impls are nearly identical. |
-| `events/` | Lift + strip | Gearbox `Hub` | Strip gearbox `EventType` constants (those stay in gearbox app). Replace `ServerID` filter with generic `Topic`/`Tag`. |
-| `transport/sse.go` | Build new | n/a | HTTP handler wrapping `events.Hub`, sets headers, pumps frames, takes topic-filter func. |
-| `responses/` | Partial lift | Gearbox | Only `ErrorResponse`, `SuccessResponse`, `ValidationResponse` — domain DTOs stay. |
-| `auth/manager.go` | Refactor + lift | Hybrid | Take libation's `SessionManager` shape (typed Flash, gorilla store); layer gearbox's CSRF + audit + password-reset + permissions on top. Define `UserStore` interface; both apps implement against their own DB. Define `AuthUser` interface (`ID`, `Email`, `IsAdmin`, `IsLocked`, `MustChangePassword`, `PasswordHash`). |
-| `auth/password.go` | Direct lift | Gearbox | bcrypt + go-password-validator. |
-| `auth/csrf.go` | Direct lift | Gearbox | Split out of manager.go. |
-| `auth/security.go` | Direct lift | Gearbox | Token + UUID + email helpers. |
-| `auth/reset.go` | Lift + abstract | Gearbox | Email send becomes interface (`EmailSender`). |
-| `auth/change.go` | Lift + libation gate | Hybrid | Libation has `RequirePasswordChange` middleware gate gearbox lacks. |
-| `auth/middleware.go` | Direct lift | Gearbox | `RequireAuth`, `RequireCSRF`, `RequireAdmin` + new `RequirePasswordChange`. |
-| `auth/login_handler.go` | Build new | n/a | `LoginHandlerBuilder(authMgr, renderer, redirectAfterLogin)`. Renderer interface lets each app pass its branded templ wrapper. |
-| `auth/flash.go` | Direct lift | Libation | Libation's typed Flash + `PutJSON`/`GetJSON`/`DeleteKey` is cleaner. |
-| `auth/dev_bypass_on.go` | Direct lift | Gearbox | `//go:build dev` — issue #83 loopback bypass. |
-| `auth/dev_bypass_off.go` | Direct lift | Gearbox | `//go:build !dev`. |
-| `webauthn/rp.go` | Direct lift | Libation | Libation's RP wrapper split. |
-| `webauthn/user.go` | Direct lift | Libation | Libation's user-model split. |
-| `middleware/security_headers.go` | Lift + merge | Hybrid | Gearbox's CSP builder + sanitization + env-var extras; libation's local-vs-cdn toggle becomes a `CSPConfig` field. |
-| `middleware/ratelimit.go` | Direct lift | Libation | `golang.org/x/time/rate` impl — vetted vs gearbox's hand-rolled bucket. |
-
-Stays in gearbox:
-
-- `framework/agent/*`, `framework/collector/*`, `framework/gear/*`
-- `framework/models/{alerts,certificates,firewall,server,stats,system,traffic,settings_pages,metadata,box_config,gear,integration,permission,component}.go` (the user/passkey/audit-log types get pulled behind interfaces in `core/auth` but the concrete impls stay in gearbox)
-- `framework/services/{agent_keyring,alerts,geoip,parser/csv}` and gearbox-only adapters
-- `framework/handler/api_*.go`, `gears.go`, `haproxy_*.go`, `os_updates.go`, `resolve_box.go`, `console_popout.go`, `alerts.go`
-- `framework/database/{alerts,backup,box_agent_keys,firewall,gears,home,log_sources,metrics_*,servers,source_stats,traffic}.go`
-- `framework/middleware/permissions.go` (depends on `models.Component`/`Permission` — gearbox-specific concepts)
-- `framework/services/email` (extract `SMTPConfigProvider` interface and template renderer concept later, MVP keeps it in gearbox)
-
----
-
-## 5. Pre-extraction cleanup (in gearbox, done during extraction)
-
-These are inside gearbox right now and must be untangled before the affected file moves to `webcore`. Do them as part of the same PR that extracts the file.
-
-1. **Dedup `table.templ`** — same code in `framework/ui/` and `framework/templates/components/`. Pick canonical, delete other, update all gearbox templ imports.
-2. **Dedup `live_refresh.templ`** — same situation.
-3. **Split `metrics.templ`** — `MetricCard*` extract to shared `metric_card.templ`; `SystemMetrics`/`ServiceStatus`/`BackendHealthBadge` stay in gearbox as they take `models.*`.
-4. **Rename JS namespaces** — `window.GearboxKeymap`, `window.GearboxCharts`, `window.gearbox.*` → neutral (`window.WebCore.*`). Keep `window.gearbox.*` in gearbox app code that registers commands/filters against the neutral primitives.
-5. **Parameterize hardcoded URLs**:
-    - `utils/api.js` — `/api/v1` baseURL + `box_id` param become config.
-    - `charts/chart-sse.js` — `/api/events?server=` becomes URL factory.
-    - `ui/toast.templ` — script src path becomes caller-supplied or split out.
-6. **Namespace `collapsible-*` localStorage prefix** — per-app prefix passed in so co-hosted apps don't collide.
-7. **Document and implement `table.templ` ↔ JS contract** — `sortTable`/`filterTable`/`exportTableCSV` are referenced by the template but no implementation lives in `static/js/`. Find them (may be inline in pages) or write them.
-
----
-
-## 6. Execution order
-
-### Phase 0 — Repo bootstrap
-
-0.1 User: `gh repo create sarg3nt/webcore --public --description "Shared web framework for sarg3nt apps (UI primitives, auth, SSE, middleware)" --license MIT`.
-
-0.2 Claude: clone to `/Users/dave/src/webcore`, `go mod init github.com/sarg3nt/webcore`, scaffold directory layout per section 3, add `README.md`, `LICENSE`, `CHANGELOG.md`, `.gitignore`, `.markdownlint.json` mirroring gearbox.
-
-0.3 Claude: add to user's VS Code workspace at `/Users/dave/src/homelab/homelab.code-workspace` (or whichever workspace file gearbox + libation live in).
-
-0.4 Claude: initial commit, push.
-
-### Phase 1 — Extract zero-dependency packages
-
-These have no coupling and can land standalone.
-
-1.1 `core/errors/` — copy from gearbox, no changes. Add unit tests. PR1 to webcore.
-
-1.2 `core/validation/` — copy from gearbox. Add unit tests. PR2.
-
-1.3 `core/crypto/` — pick winner (libation or gearbox), add tests. PR3.
-
-1.4 `core/migrate/` — take libation's leaner runner, modify to accept caller `embed.FS`. Add tests using fixture migrations. PR4.
-
-1.5 `core/responses/` — copy `ErrorResponse`, `SuccessResponse`, `ValidationResponse` from gearbox. PR5.
-
-1.6 `core/middleware/ratelimit.go` — libation's `x/time/rate` impl. Add tests. PR6.
-
-1.7 `core/middleware/security_headers.go` — merge gearbox's CSP builder + libation's local/cdn toggle into one `CSPConfig`. Add tests. PR7.
-
-### Phase 2 — Extract events + SSE transport
-
-2.1 `core/events/Hub` — port gearbox `Hub`, strip `ServerID` filter to generic `Topic`. Add tests. PR8.
-
-2.2 `core/transport/sse.go` — new HTTP handler. Wraps `Hub`, takes topic-filter func, sets headers, pumps frames. Add integration test using `httptest`. PR9.
-
-2.3 `ui/static/js/common/sse.js` — new generic EventSource wrapper + reconnect + topic filter. PR9 (same PR — paired).
-
-### Phase 3 — Extract auth + webauthn
-
-3.1 Define `UserStore` + `AuthUser` interfaces in `core/auth/`. Document exactly what gearbox + libation need to implement. PR10.
-
-3.2 `core/auth/flash.go` — libation's typed Flash. PR11.
-
-3.3 `core/auth/password.go`, `csrf.go`, `security.go` — direct lift from gearbox. PR12.
-
-3.4 `core/auth/manager.go` — Login, Logout, GetUser, IsAuthenticated, ExtendSession + CSRF helpers. Built on `UserStore` interface. PR13.
-
-3.5 `core/auth/middleware.go` — RequireAuth, RequireCSRF, RequireAdmin, RequirePasswordChange. PR14.
-
-3.6 `core/auth/reset.go`, `change.go` — with `EmailSender` interface for reset email. PR15.
-
-3.7 `core/auth/login_handler.go` — `LoginHandlerBuilder` with `Renderer` interface. PR16.
-
-3.8 `core/auth/dev_bypass_on.go`, `dev_bypass_off.go` — lift gearbox files behind `//go:build dev` tag. PR17.
-
-3.9 `core/webauthn/rp.go`, `user.go` — lift libation's split. PR18.
-
-### Phase 4 — Extract UI templ components
-
-4.1 `ui/templ/` zero-dependency batch — `alerts`, `badge`, `toggle`, `modal`, `collapsible` (parameterized prefix), `icons`, `info_tooltip`, `doughnut`, `settings`. PR19.
-
-4.2 `ui/templ/toast.templ` + `ui/static/js/utils/toast.js` — paired. PR20.
-
-4.3 Dedup gearbox's two `table.templ` copies, lift canonical to `ui/templ/`. Document JS contract, write/find sortTable/filterTable/exportTableCSV. PR21.
-
-4.4 Dedup `live_refresh.templ`, lift abstract version. PR22.
-
-4.5 Split gearbox `metrics.templ`, lift `metric_card.templ`. PR23.
-
-4.6 Lift sidebar — promote libation's new `sidebar.templ` + `sidebar.css` + `sidebar.js`. PR24.
-
-4.7 Build `login.templ`, `change_password.templ`, `forgot_password.templ`, `reset_password.templ` — using gearbox layout patterns. PR25.
-
-### Phase 5 — Extract UI JS + CSS
-
-5.1 `ui/static/js/utils/` — `dom`, `formatting`, `char-limit`, abstracted `api.js`. PR26.
-
-5.2 `ui/static/js/common/` — `focus-trap`, `keymap` (renamed), `info-tooltip`, `page-header`, `datagrid` (renamed), abstracted `header-search`, abstracted `shortcut-help`, abstracted `command-palette`. PR27.
-
-5.3 `ui/static/js/charts/` — `chart-defaults`, `chart-fullscreen`, abstracted `chart-sse`. PR28.
-
-5.4 `ui/static/css/` — `utilities`, `components/{buttons,cards,modals,datagrid}`. PR29.
-
-### Phase 6 — Gearbox cutover
-
-6.1 Add `webcore` as a `require` in `gearbox/go.mod`, optionally with `replace github.com/sarg3nt/webcore => ../webcore` while iterating locally.
-
-6.2 Per-package cutover, one at a time, smallest-blast-radius first: `errors` → `validation` → `crypto` → `migrate` → `responses` → `middleware/ratelimit` → `middleware/security_headers` → `events` → `transport/sse` → `auth` → `webauthn` → UI templ batch → UI JS batch → UI CSS batch.
-
-6.3 Each cutover step: delete the now-duplicated file from gearbox, update all imports, run `go build ./... && go test ./... && make e2e` (or whatever gearbox's full test target is), commit, PR.
-
-6.4 After cutover, **gearbox base.templ** stays in gearbox (still has gearbox-specific box-chip / breadcrumb / gear concepts), but its internal references to ui/* components now resolve via `webcore/ui/templ/`.
-
-### Phase 7 — Libation cutover
-
-7.1 Same `go.mod` add + optional `replace`.
-
-7.2 Per-package cutover, same order. Critically: after auth cutover, libation's `auth.SessionManager` becomes a thin satisfier of `webcore/core/auth.UserStore`.
-
-7.3 **Apply deferred UI work as part of this phase:**
-
-- Port gearbox's full-width fixed-top header pattern — header becomes `<header class="fixed top-0 inset-x-0 z-50">` plus `pt-[57px]` on `#main-content`.
-- Adopt richer `toast.js` from `webcore/ui/static/js/utils/toast.js` (replaces libation's stub).
-- Adopt richer `command-palette.js` from `webcore`.
-
-7.4 Run libation's full test + e2e + a11y + visual targets, fix any regressions.
-
-### Phase 8 — Tag v0.1.0
-
-8.1 Drop `replace` directives in both gearbox + libation.
-
-8.2 Tag `webcore` v0.1.0.
-
-8.3 Bump both apps to consume the tag.
-
-8.4 Document the upgrade workflow in `webcore/README.md`: bump tag, update apps, run their full tests, ship.
-
----
-
-## 7. Open questions / risks
-
-1. **Database table coupling.** `auth` needs `users`, `audit_logs`, `password_resets`, `sessions`, `passkeys`, `smtp_settings`. Both apps have these (gearbox via `database.go`, libation via narrower files). Plan assumes apps own the tables and satisfy `UserStore` against them. Need to confirm gearbox's `users` table schema and libation's match closely enough that the interface contract works for both without each app needing schema migrations. **Action:** during PR10, write out the exact `UserStore` methods + types, validate both apps' tables against it before writing the interface.
-
-2. **`models.User` divergence.** Both apps have a `models.User`. They need to satisfy `AuthUser` interface. The interface design (above) is intentionally narrow (`ID`, `Email`, `IsAdmin`, `IsLocked`, `MustChangePassword`, `PasswordHash`) — anything richer goes in app-side methods. **Action:** make sure libation's `User` actually has all six fields before declaring the interface. Quick check during PR10.
-
-3. **CSP differences.** Gearbox CSP is strict and env-var-driven; libation has a simpler local-vs-cdn flag. Merging them in one `CSPConfig` is straightforward in theory but the field semantics need to match production needs in both apps. **Action:** read both impls' production configurations before designing `CSPConfig`.
-
-4. **Email sender abstraction.** `auth/reset.go` calls into `services/email.SendPasswordResetEmail`. Gearbox's email package reads SMTP settings from `db.GetSMTPSettings()`. Libation doesn't have password reset yet — it doesn't have an email package. **Action:** abstract via `EmailSender` interface during PR15 (`SendPasswordResetEmail(to, token, baseURL) error` etc.). Gearbox implements with its existing email service. Libation either implements with a minimal SMTP client or stubs the feature.
-
-5. **Command palette data model.** Gearbox's `command-palette.js` consumes JSON islands for boxes/gears/pages plus `window.gearbox.commands` for per-page actions. Generalising requires defining a stable shape (e.g. `{label, group, action, href, kbd}`) and a registration API (`WebCore.CommandPalette.register(group, items)`). **Action:** spec the API in PR27 design notes before lifting.
-
-6. **Build-time tailwind.** Currently both apps use Tailwind via CDN (`https://cdn.tailwindcss.com`). With shared components, classnames are duplicated across two repos but Tailwind itself runs in each. **Action:** no change — both apps keep their CDN/local Tailwind setup. The shared CSS files in `webcore/ui/static/css/` use `@apply` directives that resolve at runtime when Tailwind's JIT sees them in the served HTML. Verify this works across an `embed.FS` boundary before committing.
-
-7. **Local development workflow.** During cutover, contributors will want `webcore` edits to be visible in gearbox + libation without publishing. The `replace github.com/sarg3nt/webcore => ../webcore` directive handles this, and `air` already watches Go source. But static asset edits in `webcore` need to be re-embedded into webcore's binary then surfaced to consumers. Since static assets are served from `webcore/ui/static/`, and each app imports them via `webcore/ui.StaticFiles`, the consumer apps need their air to also re-embed when webcore static files change. **Action:** document in `webcore/README.md`. Simplest workflow: when editing `ui/static/*`, run `touch` on the consumer app's go file to force air rebuild + re-embed.
-
----
-
-## 8. How to resume after restart
-
-If you're a fresh Claude session opening this file: read sections 1–4 (decisions + context + architecture + inventory) in full. Section 5 (cleanup) + 6 (execution) are the operational plan; start at **Phase 0** unless the user says otherwise.
-
-Before writing any code, run these sanity checks:
-
-```bash
-# 1. Confirm webcore repo state
-ls /Users/dave/src/webcore 2>/dev/null && echo "Repo exists, check phase progress"
-
-# 2. Check libation deferred work hasn't been done yet
-grep -q 'fixed top-0 inset-x-0' /Users/dave/src/libation/internal/framework/templates/layouts/base.templ \
-  && echo "Header already ported — check git log for current phase"
-
-# 3. Check gearbox cleanup progress
-ls /Users/dave/src/gearbox/gearbox/internal/framework/templates/components/table.templ \
-   /Users/dave/src/gearbox/gearbox/internal/framework/ui/table.templ 2>/dev/null \
-  && echo "table.templ still duplicated — Phase 4.3 not done"
-
-# 4. Confirm libation dev server state
-lsof -i :3001 -P 2>/dev/null | grep LISTEN \
-  || echo "Libation dev not running — user may need to restart 'make dev'"
-
-# 5. Verify libation UI fixes from prior session are still in tree
-grep -q 'top-4 right-4' /Users/dave/src/libation/internal/framework/ui/toast.templ \
-  && echo "Libation toast position fix intact"
-grep -q 'sidebar-collapsed' /Users/dave/src/libation/assets/static/css/sidebar.css \
-  && echo "Libation sidebar.css fix intact"
-```
-
-If any of those flag unexpected state, stop and ask the user what changed since this plan was written.
-
-### Pending non-extraction work to remember
-
-- Libation UI deferred work (full-width fixed-top header + richer toast/command-palette) lands in **Phase 7.3**, not standalone.
-- Libation UI fixes from the same session as this plan (sidebar fixed, toast top-right, collapse smooth, `.air.toml` includes js/css) are **uncommitted** — user may want them committed separately before extraction starts.
-
-### What to ask the user first when you resume
-
-1. Has the `webcore` GitHub repo been created? If yes, has it been cloned to `/Users/dave/src/webcore`?
-2. Should the libation UI fixes from this session be committed to libation before any webcore work starts, or rolled into the libation cutover (Phase 7)?
-3. Any change to the decisions in section 1 since this plan was written?
-4. Continue at Phase 0 or skip to a later phase if any progress was made offline?
-
----
-
-## 9. Appendix: source-of-truth file inventory
-
-### Gearbox (full superset)
-
-```text
-/Users/dave/src/gearbox/gearbox/internal/framework/
-├── auth/                  (8 files, ~2300 LOC)
-├── middleware/            (726 LOC)
-├── errors/                (no libation equivalent)
-├── events/                (gearbox Hub — richer than libation Bus)
-├── validation/            (no libation equivalent)
-├── responses/             (heavy domain coupling — partial lift)
-├── services/crypto/       (parity with libation)
-├── services/email/        (gearbox only for now)
-├── database/migrate_manager.go
-├── ui/{alerts,badge,collapsible,icons,live_refresh,modal,table,toast,toggle}.templ
-└── templates/components/{console,container_diagram,doughnut,helpers.go,info_tooltip,live_refresh,metrics,settings,table}.templ
-/Users/dave/src/gearbox/gearbox/static/
-├── js/utils/{api,char-limit,dom,formatting,toast}.js
-├── js/common/{box-selector,command-palette,datagrid,focus-trap,gear-commands,header-search,info-tooltip,keymap,page-header,shortcut-help}.js
-├── js/charts/{chart-defaults,chart-fullscreen,chart-sse}.js
-└── css/{utilities.css, components/{buttons,cards,console,datagrid,home,modals}.css, firewall_config_editor.css, haproxy_config_editor.css}
-```
-
-### Libation (narrower, occasionally cleaner shape)
-
-```text
-/Users/dave/src/libation/internal/framework/
-├── auth/                  (4 files, 680 LOC — cleaner SessionManager + WebAuthn split)
-├── middleware/            (473 LOC, includes RequirePasswordChange)
-├── database/              (32-line database.go — cleaner than gearbox's 1137-line file)
-├── ui/{badge,icons,modal,toast,toggle}.templ
-└── templates/{layouts/{base,sidebar,header}.templ, pages/*.templ}
-/Users/dave/src/libation/assets/static/
-├── js/{command-palette,dashboard-chart,event-bus,library-grid,profile-menu,sidebar,sse,template-preview,toast,webauthn}.js
-└── css/{sidebar.css (new), utilities.css, vendor/}
-```