opticore-profiler 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Guy-serge Kouacou
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# OptiCore Profiler
+
+A Symfony WebProfilerBundle-style profiler for the OptiCore Express stack:
+**collect → persist by token → display deferred**.
+
+## Installation
+
+```bash
+npm install opticore-profiler
+```
+
+Requires `opticore-express` and `opticore-router` in the host app (both are
+declared dependencies and installed automatically) and Node.js >= 18.
+
+### The 4 principles, and where they live
+
+1. **Collectors observe, they never intrude.** `DataCollector` (`types.ts`)
+   defines `collect(ctx, error?) / getName() / getData() / reset()`.
+   `RequestCollector`/`TimeCollector`/`MemoryCollector` read only from the
+   `req`/`res` objects the middleware already has. `DatabaseCollector` and
+   `LoggerCollector` are fed by **decorating** `OptiCoreMySQLDriver.prototype.makeQuery`
+   and `LoggerCore.prototype.{info,warn,error,debug,success}` **once, at
+   bootstrap** (`instrumentMySQL`/`instrumentLogger`) — business code keeps
+   calling `db.query(...)` / `logger.info(...)` completely unmodified, and
+   unaware profiling exists. The link between "a query just ran" and "which
+   request is that for" is `AsyncLocalStorage` (`context.ts`), the Node
+   analogue of what a DI container gives Symfony's collectors implicitly.
+   Register custom collectors on the registry the middleware exposes:
+   `profiler.registry.register(() => new MyCollector())`.
+
+2. **Persistence is decoupled from collection, keyed by token.** Every
+   profiled request gets a short token (`token.ts`, 6–8 alphanumeric chars).
+   On `res.on('finish')` — i.e. **after** the response has already been sent,
+   so this adds zero perceived latency — every collector's `getData()` is
+   assembled into a `Profile` and handed to a `ProfilerStorage`
+   (`MemoryStorage` or `FileStorage`, under `.opticore-profiler-cache/` by
+   default). `X-Debug-Token` and `X-Debug-Token-Link` headers are set on
+   every profiled response. Automatic purge runs after each write
+   (`retentionMs`, default 24h).
+
+3. **Display is deferred and AJAX-loaded, not embedded.** The middleware
+   never renders a toolbar into the page it's decorating. It buffers HTML
+   responses (`middleware/htmlInjector.ts`) and, only when the response is
+   `text/html`, splices a handful of lines before `</body>`
+   (`middleware/snippet.ts`): a stylesheet `<link>` and a `<script>` that
+   fetches `GET ${routePrefix}/wdt/:token` and swaps it in. That fragment,
+   plus `GET ${routePrefix}` (list) and `GET ${routePrefix}/:token` (detail,
+   one panel per collector), are the only 3 profiler routes — all excluded
+   from profiling themselves. `assets/js/toolbar.js` also wraps `fetch` and
+   `XMLHttpRequest` client-side so AJAX calls the page itself makes (which
+   carry the same `X-Debug-Token` header, since they're profiled requests
+   too) show up live in the toolbar's HTTP list.
+
+4. **Ephemeral by default, safe by construction.** `enabled` defaults to
+   `false` — must be explicitly turned on (`NODE_ENV === 'development'`).
+   `RequestCollector` masks configurable sensitive keys (`security/masker.ts`,
+   default list in `DEFAULT_SENSITIVE_KEYS`: `authorization`, `cookie`,
+   `password`, `token`, `session`, ...) in headers/cookies/query/body
+   **before** the data is ever persisted. Nunjucks' `autoescape: true` covers
+   template output; `security/escape.ts` and `toolbar.js`'s own
+   `escapeHtml()` cover the two spots that build HTML by hand. `profiler.clear()`
+   purges everything on demand.
+
+
+## Integration example
+
+```ts
+import { express } from "opticore-express";
+import { OptiCoreMySQLDriver } from "opticore-mysqldb";
+import { LoggerCore } from "opticore-logger";
+import {
+    opticoreProfiler,
+    profilerErrorHandler,
+    registerProfilerViews,
+    createProfilerRouter,
+    instrumentMySQL,
+    instrumentLogger,
+    FileStorage,
+} from "opticore-profiler";
+
+const app = express();
+
+// Decorate infrastructure once, at bootstrap — never touches business code.
+instrumentMySQL(OptiCoreMySQLDriver);
+instrumentLogger(LoggerCore);
+
+const profiler = opticoreProfiler({
+    enabled: process.env.NODE_ENV === "development",
+    storage: new FileStorage(".profiler-cache"), // any writable directory of your choosing
+});
+
+app.use(profiler);                        // 1. collection + token + deferred display
+registerProfilerViews(app, profiler);      // 2. view engine, static assets, "/" page
+
+app.use(/* ...your feature routers, including createProfilerRouter(profiler)... */);
+
+app.use(profilerErrorHandler());           // 3. after routes: feeds ExceptionCollector
+app.use(yourOwnErrorHandler);              //    your app's error handling is untouched
+```

package/dist/assets/css/debug-message.css

@@ -0,0 +1,16 @@
+body {
+  background: #1a1a1a;
+  color: #666;
+  font-family: monospace;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  margin: 0;
+  gap: 12px;
+}
+a { color: #7c98d3; }
+.msg-title { font-size: 18px; color: #e74c3c; }
+.msg-code code { color: #aaa; }

package/dist/assets/css/home-page.css

@@ -0,0 +1,177 @@
+:root {
+  --bg:     #f5f5f5;
+  --card:   #FFFCF7;
+  --border: #E0D8CA;
+  --text:   #1A1A14;
+  --muted:  #7A7268;
+  --accent: #FAC68E;
+  --ok:     #31af05;
+  --warn:   #FAC68E;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  height: 100%; background: var(--bg); color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 14px; line-height: 1.6;
+}
+body.has-toolbar { padding-bottom: 44px; }
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: none; }
+
+/* ===== CANVAS PARTICLES ===== */
+#op-canvas {
+  position: fixed; inset: 0;
+  width: 100%; height: 100%;
+  z-index: 0; pointer-events: none;
+}
+
+/* ===== WAVES ===== */
+.op-waves {
+  position: fixed; top: 0; left: 0; right: 0;
+  height: 500px; z-index: 1;
+  pointer-events: none; overflow: hidden;
+}
+.op-wave {
+  position: absolute; top: 0; left: 0;
+  width: 200%; height: 100%;
+  transform-origin: top left;
+  will-change: transform;
+}
+
+/*
+ * 3 animations distinctes :
+ *  - vitesses très différentes  → effet parallaxe 3D
+ *  - animation-delay décalé     → phases jamais alignées
+ *  - wave-3 tourne en sens inverse → accentue la profondeur
+ */
+.op-wave-1 { animation: op-wave-slow 16s ease-in-out infinite; }
+.op-wave-2 { animation: op-wave-mid  11s ease-in-out -4s infinite; }
+.op-wave-3 { animation: op-wave-fast  7s ease-in-out -2s infinite reverse; }
+
+@keyframes op-wave-slow {
+  0%,100% { transform: translateX(0)    scaleY(1);    }
+  50%     { transform: translateX(-25%) scaleY(.96);  }
+}
+@keyframes op-wave-mid {
+  0%,100% { transform: translateX(0)    scaleY(1);    }
+  50%     { transform: translateX(-25%) scaleY(1.04); }
+}
+@keyframes op-wave-fast {
+  0%,100% { transform: translateX(0)    scaleY(1);    }
+  50%     { transform: translateX(-25%) scaleY(.98);  }
+}
+
+/* ===== LAYOUT ===== */
+.page {
+  position: relative; z-index: 2;
+  min-height: 100%;
+  display: flex; flex-direction: column;
+  align-items: center;
+  padding: 48px 24px 48px;
+}
+.container { width: 100%; max-width: 860px; }
+
+/* ===== HEADER ===== */
+.hero { text-align: center; margin-bottom: 48px; }
+.hero-logo {
+  display: inline-flex; align-items: center; gap: 14px;
+  margin-bottom: 20px;
+}
+.hero-icon {
+  width: 52px; height: 52px; background: var(--accent);
+  border-radius: 14px; display: flex; align-items: center;
+  justify-content: center; font-size: 22px; font-weight: 900; color: #fff;
+  box-shadow: 0 4px 18px rgba(250,198,142,.30);
+}
+.hero-name { font-size: 28px; font-weight: 700; color: var(--text); }
+.hero-sub { font-size: 13px; color: var(--muted); letter-spacing: .5px; text-transform: uppercase; }
+.hero-desc { color: var(--muted); font-size: 14px; margin-top: 8px; }
+
+/* ===== STATUS PILL ===== */
+.status-row {
+  display: flex; align-items: center; justify-content: center;
+  gap: 8px; margin-bottom: 36px;
+}
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: #ffffff;
+  border: 1px solid #31af05;
+  color: var(--ok);
+  padding: 5px 14px;
+  border-radius: 20px;
+  font-size: 12px;
+  font-weight: 600;
+}
+.status-dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--ok); animation: pulse 2s infinite;
+}
+@keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(45,106,74,.35)} 50%{opacity:.7;box-shadow:0 0 0 5px rgba(45,106,74,0)} }
+.env-pill {
+  display: inline-flex; align-items: center;
+  padding: 5px 14px; border-radius: 20px;
+  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
+}
+.env-pill--dev  { background: #FDF3EA; border: 1px solid #FAC68E; color: #C07030; }
+.env-pill--prod { background: #FDECEA; border: 1px solid #E57373; color: #C62828; }
+
+/* ===== CARDS ===== */
+.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
+.card {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 18px 20px;
+  transition: border-color .2s, box-shadow .2s;
+}
+.card:hover { border-color: #C8B8A4; box-shadow: 0 2px 12px rgba(250,198,142,.10); }
+.card-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
+.card-value { font-size: 17px; font-weight: 600; color: var(--text); font-family: monospace; }
+.card-value--dev  { color: #C07030; }
+.card-value--prod { color: #C62828; }
+.card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
+
+/* ===== SECTION ===== */
+.section { margin-bottom: 28px; }
+.section-title {
+  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
+  color: var(--muted); margin-bottom: 12px;
+  display: flex; align-items: center; gap: 8px;
+}
+.section-title::after { content:""; flex:1; height:1px; background:var(--border); }
+
+/* ===== QUICK LINKS ===== */
+.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
+.quick-link {
+  display: flex; align-items: center; gap: 10px;
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 8px; padding: 12px 14px;
+  color: var(--text); text-decoration: none;
+  transition: border-color .2s, background .2s, box-shadow .2s;
+}
+.quick-link:hover { border-color: var(--accent); background: #FDF3EA; color: var(--text); box-shadow: 0 2px 10px rgba(250,198,142,.12); text-decoration: none; }
+.quick-link-icon {
+  width: 32px; height: 32px; border-radius: 7px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 15px; flex-shrink: 0;
+}
+.quick-link-label { font-size: 13px; font-weight: 500; }
+.quick-link-desc { font-size: 11px; color: var(--muted); }
+
+/* ===== API NOTICE ===== */
+.api-notice {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: 10px; padding: 20px 24px;
+  display: flex; align-items: flex-start; gap: 14px;
+}
+.api-notice-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
+.api-notice-title { font-weight: 600; color: var(--text); margin-bottom: 4px; }
+.api-notice-body { font-size: 13px; color: var(--muted); line-height: 1.6; }
+.api-notice-body code {
+  background: #F0EBE1; border: 1px solid #D8D0C4; padding: 1px 6px;
+  border-radius: 3px; font-size: 12px; color: #6A5A48; font-family: monospace;
+}
+
+/* ===== FOOTER ===== */
+.footer { margin-top: 40px; text-align: center; color: var(--muted); font-size: 12px; padding-bottom: 8px; }
+.footer a { color: var(--accent); }

package/dist/assets/css/profiler-detail.css

@@ -0,0 +1,215 @@
+* { box-sizing:border-box; margin:0; padding:0; }
+html, body {
+  background-attachment: fixed;
+  background-color: #ffffff;
+  background-image: radial-gradient(#ffeede 1.35px, transparent 0);
+  background-size: 15px 15px;
+  color: #404040;
+  font-size: 14px;
+  line-height: 1.4;
+  font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+a { color:#C87A3C; text-decoration:none; }
+a:hover { text-decoration:underline; }
+code, pre { font-family:"SF Mono",Consolas,"Liberation Mono",monospace; }
+
+:root {
+  --bg:#fff; --sidebar-bg:#fff; --content-bg:#fff;
+  --border:#e3e3e3; --text:#222; --muted:#888; --accent:#C87A3C;
+  --hover:#fafafa; --active-bg:#FDF3EA; --active-border:#C87A3C;
+  --ok-bg:#e8f4ec; --ok-text:#1a7a3c;
+  --warn-bg:#fbe3e4; --warn-text:#c0392b;
+  --info-bg:#FDF3EA; --info-text:#9A5020;
+}
+
+/* CONTENT area */
+.pf-content {
+  flex:1;
+  overflow-y:auto;
+}
+
+/* Panel inner styles */
+.panel-title { font-size:18px; font-weight:600; color:#333; margin-bottom:18px; }
+.panel-section { margin-bottom:22px; }
+.panel-section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:#888; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
+.panel-section-title::after { content:""; flex:1; height:1px; background:#e6e6e6; }
+.card-grid { display: flow; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin-bottom:16px; }
+.card { background:#f8f8f8; border:1px solid var(--border); border-radius:4px; padding: 12px 16px; margin-bottom: 7px; }
+.card-title { font-size:13px; color:var(--muted); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; }
+.card-value { font-size:14px; color:#333; }
+.card-empty { color:var(--muted); font-style:italic; font-size:14px; }
+.data-table { width:100%; border-collapse:collapse; font-size:14px; }
+.data-table th { background:#f5f5f5; padding:9px 13px; text-align:left; font-size:11px; font-weight:700; color:#666; border-bottom:1px solid #e6e6e6; text-transform:uppercase; letter-spacing:.4px; }
+.data-table td { padding:9px 13px; border-bottom:1px solid #ececec; vertical-align:top; }
+.data-table tr:hover td { background:#fafafa; }
+.data-table tr:last-child td { border-bottom:none; }
+.data-table .key-col { color:#555; font-family:monospace; font-size:13px; white-space:nowrap; width:240px; }
+.data-table .val-col { color:#333; font-family:monospace; font-size:13px; word-break:break-all; }
+.table-wrap { background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; margin-bottom:18px; }
+.table-wrap-title { background:#f5f5f5; padding:10px 14px; font-size:13px; font-weight:600; color:#444; border-bottom:1px solid #e6e6e6; display:flex; align-items:center; gap:10px; }
+.table-search { margin-left:auto; background:#fff; border:1px solid #d0d0d0; color:#333; padding:3px 8px; border-radius:3px; font-size:12px; outline:none; font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; }
+.table-search:focus { border-color:#C87A3C; }
+.sql-block { padding:11px 14px; border-bottom:1px solid #ececec; }
+.sql-block:last-child { border-bottom:none; }
+.sql-meta { display:flex; gap:8px; margin-bottom:5px; align-items:center; }
+.sql-type { font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; text-transform:uppercase; }
+.sql-type-SELECT{background:#FDF3EA;color:#9A5020} .sql-type-INSERT{background:#e8f4ec;color:#1a7a3c}
+.sql-type-UPDATE{background:#FEF9E7;color:#7D6608} .sql-type-DELETE{background:#fbe3e4;color:#c0392b} .sql-type-OTHER{background:#f0f0f0;color:#666}
+.sql-duration { color:var(--muted); font-size:11px; margin-left:auto; }
+.sql-code { background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:10px 12px; font-family:monospace; font-size:12px; color:#333; white-space:pre-wrap; word-break:break-all; line-height:1.6; }
+.log-entry { padding:9px 13px; border-bottom:1px solid #ececec; display:flex; gap:10px; align-items:flex-start; }
+.log-entry:last-child { border-bottom:none; }
+.log-level { font-size:10px; font-weight:700; padding:2px 6px; border-radius:3px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
+.log-debug{background:#f0f0f0;color:#666} .log-info{background:#FDF3EA;color:#9A5020}
+.log-warning{background:#FEF9E7;color:#7D6608} .log-error{background:#fbe3e4;color:#c0392b} .log-critical{background:#fbe3e4;color:#7F1010}
+.log-msg { color:#333; font-size:13px; flex:1; word-break:break-word; }
+.log-time { color:var(--muted); font-size:11px; white-space:nowrap; font-family:monospace; }
+.log-context { margin-top:5px; font-family:monospace; font-size:11px; color:#555; background:#f5f5f5; padding:6px 8px; border-radius:3px; }
+.perf-metrics-row { display:flex; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden; margin-bottom:18px; }
+.perf-metric { flex:1; padding:16px 20px; border-right:1px solid #e6e6e6; text-align:center; }
+.perf-metric:last-child { border-right:none; }
+.perf-metric-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-bottom:6px; }
+.perf-metric-value { font-size:22px; font-weight:700; color:#222; font-family:monospace; }
+.perf-metric-unit { font-size:13px; font-weight:400; color:var(--muted); }
+.tl-threshold-row { display:flex; align-items:center; gap:8px; font-size:12px; color:#333; margin-bottom:10px; flex-wrap:wrap; }
+.tl-threshold-input { width:52px; padding:3px 7px; border:1px solid #d0d0d0; border-radius:3px; background:#fff; color:#333; font-size:12px; outline:none; text-align:center; font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; }
+.tl-threshold-hint { color:var(--muted); font-size:12px; }
+.tl-legend { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--muted); margin-bottom:10px; }
+.tl-legend-item { display:flex; align-items:center; gap:5px; }
+.tl-legend-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }
+.tl-chart { background:#fff; border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; }
+.tl-row { display:flex; align-items:center; gap:12px; padding:8px 13px; border-bottom:1px solid #ececec; }
+.tl-row:last-child { border-bottom:none; }
+.tl-name { width:200px; flex-shrink:0; font-size:12px; color:#333; font-family:monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.tl-track { flex:1; height:18px; background:#f0f0f0; border-radius:3px; overflow:hidden; position:relative; }
+.tl-bar { height:100%; min-width:4px; border-radius:3px; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; }
+.tl-bar-label { color:#fff; font-size:10px; font-weight:600; white-space:nowrap; }
+.tl-info { width:75px; font-size:11px; color:var(--muted); font-family:monospace; flex-shrink:0; text-align:right; }
+.tl-empty { color:var(--muted); font-size:13px; padding:24px; text-align:center; }
+.routes-summary { display:flex; border:1px solid #e6e6e6; border-radius:6px; overflow:hidden; margin-bottom:18px; }
+.routes-summary-item { flex:1; padding:12px 16px; border-right:1px solid #e6e6e6; text-align:center; }
+.routes-summary-item:last-child { border-right:none; }
+.routes-summary-value { font-size:22px; font-weight:700; color:#222; font-family:monospace; }
+.routes-summary-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-top:4px; }
+.route-method { display:inline-block; padding:2px 7px; border-radius:3px; font-size:11px; font-weight:700; color:#fff; font-family:monospace; }
+.rm-GET{background:#2e7d32} .rm-POST{background:#1565c0} .rm-PUT{background:#e65100} .rm-DELETE{background:#c62828} .rm-PATCH{background:#6a1b9a} .rm-ALL{background:#424242} .rm-OPTIONS{background:#37474f}
+.route-path { font-family:monospace; font-size:13px; color:#333; }
+.route-path .param { color:#C87A3C; }
+.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
+.stat-card { background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:12px 16px; text-align:center; }
+.stat-value { font-size:20px; font-weight:700; color:#222; margin-bottom:3px; }
+.stat-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
+.badge { display:inline-block; padding:2px 7px; border-radius:4px; font-size:11px; font-weight:600; }
+.badge-ok   { background:#e8f4ec; color:#1a7a3c; }
+.badge-warn { background:#fbe3e4; color:#c0392b; }
+.badge-info { background:#FDF3EA; color:#9A5020; }
+.badge-muted{ background:#f0f0f0; color:#666; }
+.empty-state { text-align:center; padding:40px 24px; color:var(--muted); }
+.empty-icon { font-size:28px; margin-bottom:8px; }
+.empty-text { font-size:13px; }
+.json-pre { background:#f8f8f8; padding:12px; font-size:12px; color:#333; font-family:monospace; white-space:pre-wrap; word-break:break-all; max-height:400px; overflow:auto; line-height:1.6; }
+.json-pre .json-key { color:#e36209; }
+.json-pre .json-val { color:#447dbd; }
+hr.divider { border:none; border-top:1px solid #e6e6e6; margin:18px 0; }
+.perf-bar-wrap { margin-bottom:8px; }
+.perf-bar-label { display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px; }
+.perf-bar-outer { height:7px; background:#f0f0f0; border-radius:4px; overflow:hidden; }
+.perf-bar-inner { height:100%; border-radius:4px; }
+.center { text-align:center; }
+.mono { font-family:monospace; }
+.muted { color:var(--muted); }
+
+.lang-switch { display:flex; align-items:center; gap:2px; background:#f5f3f0; border:1px solid #e6e6e6; border-radius:5px; padding:3px; flex-shrink:0; }
+.lang-switch-item { padding:5px 10px; font-size:11px; font-weight:700; letter-spacing:.3px; color:#888; border-radius:3px; text-decoration:none; }
+.lang-switch-item.active { background:#fff; color:#C87A3C; box-shadow:0 1px 3px rgba(0,0,0,.1); }
+.lang-switch-item:hover:not(.active) { color:#555; }
+
+/* ── LOG FILTER TABS ── */
+.log-tabs { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
+.log-tab {
+  padding:5px 13px; border:1px solid #e0e0e0; border-radius:4px;
+  font-size:13px; cursor:pointer; background:#f8f8f8; color:#555;
+  font-family:inherit; transition:all .12s;
+  display:inline-flex; align-items:center; gap:5px;
+}
+.log-tab.active { background:#fff; border-color:#C87A3C; color:#C87A3C; font-weight:600; }
+.log-tab:hover:not(.active) { background:#fff; border-color:#bbb; color:#333; }
+.log-tab-badge {
+  display:inline-flex; align-items:center; justify-content:center;
+  border-radius:10px; font-size:10px; font-weight:700;
+  min-width:18px; height:18px; padding:0 5px; color:#fff;
+}
+.log-tab-err  { background:#c0392b; }
+.log-tab-warn { background:#e67e22; }
+.log-tab-depr { background:#8e44ad; }
+.log-tab-zero { color:#aaa; font-size:12px; }
+
+/* ── LOG MESSAGES TABLE ── */
+.log-table-wrap { border:1px solid #e6e6e6; border-radius:4px; overflow:hidden; }
+.log-table { width:100%; border-collapse:collapse; font-size:12px; }
+.log-table th { background:#f5f5f5; padding:9px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:#888; border-bottom:1px solid #e6e6e6; }
+.log-row { border-bottom:1px solid #ececec; }
+.log-row:last-child { border-bottom:none; }
+.log-row td { padding:10px 14px; vertical-align:top; }
+.log-td-time { width:150px; white-space:nowrap; color:#888; font-family:monospace; font-size:11px; }
+.log-row-error   { border-left:3px solid #e74c3c; }
+.log-row-warning { border-left:3px solid #e67e22; }
+.log-row-deprecation { border-left:3px solid #8e44ad; }
+.log-msg-text { font-size:12.5px; color:#333; word-break:break-word; line-height:1.5; }
+.log-meta-links { margin-top:5px; }
+.log-ctx-btn {
+  background:none; border:none; padding:0; cursor:pointer;
+  color:#C87A3C; font-size:11.5px; text-decoration:underline; font-family:inherit;
+}
+.log-ctx-btn:hover { color:#9A5020; }
+.log-ctx-btn + .log-ctx-btn { margin-left:10px; }
+.log-context-detail {
+  display:none; margin-top:6px; background:#f5f5f5; border:1px solid #ebebeb;
+  border-radius:3px; padding:8px 10px; font-family:monospace; font-size:11px;
+  color:#555; white-space:pre-wrap; word-break:break-all;
+}
+.log-stack-trace {
+  max-height:280px; overflow-y:auto; line-height:1.7; color:#444;
+}
+.log-source-ref {
+  display:block; margin-top:4px; font-family:monospace; font-size:11px;
+  color:#888; word-break:break-all;
+}
+.log-deprecation { background:#f3e5f5; color:#6a1b9a; }
+
+/* ── REQUEST / RESPONSE TABS ── */
+.rr-tabs { display:flex; background:#f5f3f0; border:1px solid #e6e6e6; border-radius:5px; padding:4px; gap:2px; margin-bottom:24px; width:fit-content; }
+.rr-tab {
+  padding:7px 16px; font-size:13px; font-weight:600; color:#555;
+  border-radius:4px; cursor:pointer; background:transparent; border:none;
+  font-family:inherit; transition:background .12s, color .12s;
+}
+.rr-tab.active { background:#fff; color:#222; box-shadow:0 1px 3px rgba(0,0,0,.1); }
+.rr-tab:hover:not(.active) { background:rgba(255,255,255,.6); color:#333; }
+.rr-tab-empty { color:#bbb; }
+.rr-tab-empty:hover:not(.active) { color:#999; background:rgba(255,255,255,.4); }
+.rr-tabpanel { animation:rr-fade .1s ease-in; }
+@keyframes rr-fade { from { opacity:0; } to { opacity:1; } }
+
+.curl-block { position:relative; background:#f8f8f8; border:1px solid #e6e6e6; border-radius:4px; padding:16px; }
+.curl-copy-btn {
+  position:absolute; top:12px; right:12px;
+  padding:6px 14px; border:1px solid #d0d0d0; border-radius:4px;
+  background:#fff; color:#444; font-size:12px; font-weight:600;
+  cursor:pointer; font-family:inherit; transition:border-color .12s, color .12s;
+}
+.curl-copy-btn:hover { border-color:#C87A3C; color:#C87A3C; }
+.curl-pre { font-family:monospace; font-size:12px; color:#333; white-space:pre-wrap; word-break:break-all; line-height:1.7; margin-top:6px; }
+
+/* ── ROUTES PANEL FILTER (defined once, never overridden by page-level styles) ── */
+.route-filter { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
+.route-filter-btn {
+  padding:4px 12px; border-radius:3px; border:1px solid var(--border);
+  background:#F0EBE1; color:var(--muted); font-size:11.5px; cursor:pointer;
+  transition:all .1s;
+}
+.route-filter-btn:hover, .route-filter-btn.active {
+  background:var(--hover); border-color:var(--accent); color:var(--text);
+}

package/dist/assets/css/profiler-list.css

@@ -0,0 +1,131 @@
+* { box-sizing:border-box; }
+body {
+  margin:0;
+  background-color: #ffffff;
+  background-image: radial-gradient(#ffeede 1.35px, transparent 0);
+  background-size: 15px 15px;
+  font-family: 'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
+  color:#222;
+  -webkit-font-smoothing:antialiased;
+}
+
+a { color:#C87A3C; text-decoration:none; }
+a:hover { text-decoration:none; }
+input:focus, select:focus { border-color:#C87A3C !important; outline:none; }
+
+.pl-header { max-width:2000px; margin:0 auto; padding:34px 200px 0 200px; }
+.pl-header-row { display:flex; align-items:center; justify-content:space-between; gap:14px; }
+.lang-switch { display:flex; align-items:center; gap:2px; background:#f5f3f0; border:1px solid #e6e6e6; border-radius:5px; padding:3px; flex-shrink:0; }
+.lang-switch-item { padding:5px 10px; font-size:11px; font-weight:700; letter-spacing:.3px; color:#888; border-radius:3px; }
+.lang-switch-item.active { background:#fff; color:#C87A3C; box-shadow:0 1px 3px rgba(0,0,0,.1); }
+.lang-switch-item:hover:not(.active) { color:#555; }
+.pl-brand { display:flex; align-items:center; gap:14px; cursor:pointer; text-decoration:none; }
+.pl-brand-name { font-weight:900; font-size:20px; color:#222; letter-spacing:-.2px; }
+.pl-search-wrap { position:relative; width:340px; }
+.pl-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); }
+.pl-search-input {
+  width:100%; height:42px; padding:0 14px 0 36px; border:1px solid #d8d8d8;
+  border-radius:4px; font-size:12.5px; color:#555; outline:none;
+  background:#fff; cursor:default; opacity:.6;
+}
+
+.pl-banner { max-width:2000px; margin:15px auto 0 auto; padding:0 200px; }
+.pl-banner-inner { background:#f5f5f5; border-radius:5px 5px 0 0; padding:16px 36px; border-top:4px solid #737373; }
+.pl-banner-title { margin:0; font-size: 14.5px; font-weight:900; color:#3c3c3c; }
+
+.pl-grid {
+  max-width:2000px; margin:20px auto 0 auto; padding:0 200px 80px 200px;
+  display:grid; grid-template-columns:250px 1fr; gap:20px;
+}
+
+/* ── SIDEBAR ── */
+.pl-sidebar-card { background:#ffffff; box-shadow:#e4e4e4 0 0 0 1px; border-radius:5px; padding:22px 22px 26px 22px; }
+.pl-sidebar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
+.pl-sidebar-search-link { display:flex; align-items:center; gap:8px; text-decoration:none; }
+.pl-sidebar-search-label { font-size:13px; color:#888; }
+.pl-sidebar-latest { font-size:13px; color:#C87A3C; cursor:pointer; }
+.pl-sidebar-latest.is-disabled { opacity:.4; pointer-events:none; }
+
+.pl-label {
+  display:block;
+  font-size: 11px;
+  font-weight:600;
+  color:#333;
+  margin-bottom:8px;
+}
+.pl-field {
+  width: 100%;
+  height: 30px;
+  border: 1px solid #d0d0d0;
+  border-radius: 3px;
+  padding:0 10px;
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.pl-field--gap { margin-bottom:20px; }
+.pl-field--token { width:128px; margin-bottom:20px; }
+.pl-field-row { display:flex; gap:16px; margin-bottom:20px; }
+.pl-field-col { flex:1; }
+.pl-field-date-wrap { margin-bottom:20px; }
+.pl-date { color:#777; cursor:pointer; }
+
+.pl-select-wrap { position:relative; }
+.pl-select-wrap--limit { width:74px; }
+.pl-select {
+  appearance:none; -webkit-appearance:none; color:#333; background:#fff;
+  cursor:pointer; padding-right:28px;
+}
+.pl-chevron { position:absolute; right:9px; top:50%; transform:translateY(-50%); pointer-events:none; }
+.pl-chevron--limit { right:8px; }
+
+.pl-results-row { display:flex; align-items:center; gap:14px; }
+.pl-submit-btn {
+  height: 30px; padding:0 18px; border:1px solid #cfcfcf; border-radius:3px;
+  background:#f0f0f0; font-size:14px; color:#333; cursor:pointer;
+}
+.pl-settings-link { display:flex; align-items:center; gap:8px; margin-top:18px; color:#777; text-decoration:none; font-size:13px; }
+
+/* ── RESULTS PANEL ── */
+.pl-results { width:100%; }
+.pl-tabs {
+  background:#fff; border:1px solid #e3e3e3; border-radius:6px;
+  padding:18px 28px 0 28px; margin-bottom:26px;
+  display:flex; align-items:center; gap:36px;
+}
+.pl-tab { text-decoration:none; display:flex; flex-direction:column; align-items:center; }
+.pl-tab-label { font-size: 12px; font-weight:500; color:#888; cursor:pointer; }
+.pl-tab-label.is-active { font-weight:700; color:#222; }
+.pl-tab-underline { display:block; width:100%; height:3px; background:transparent; margin-top:14px; border-radius:2px 2px 0 0; }
+.pl-tab-underline.is-active { background:#C87A3C; }
+
+.pl-section-heading { margin:0 0 22px 0; font-size: 13px; font-weight:700; color:#222; }
+.pl-empty-commands { border:1px solid #e6e6e6; border-radius:4px; background:#f5f5f5; padding:70px 20px; text-align:center; }
+.pl-empty-commands-text { font-size:13.5px; color:#999; }
+
+.pl-table { width:100%; border-collapse:collapse; }
+.pl-table th {
+  text-align:left; padding:10px 14px; font-size:13px; font-weight:600; color:#444;
+  border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6; background:#f5f5f5;
+}
+.pl-table th:first-child { border-radius:4px 0 0 0; }
+.pl-table th:last-child { border-radius:0 4px 0 0; }
+.pl-row-font-size {
+  font-size: 13px
+}
+.pl-row { border-bottom:1px solid #ececec; cursor:pointer; }
+.pl-row:hover { background:#fafafa; }
+.pl-cell { padding:8px 12px; font-size:12px; color:#333; }
+.pl-cell-url { max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+.pl-cell-date { line-height:1.4; white-space:nowrap; }
+.pl-cell-time { color:#888; font-size:11px; }
+.pl-token-link { font-size:13px; color:#C87A3C; text-decoration:none; }
+.pl-empty-row { padding:30px 20px; text-align:center; color:#999; font-size:14px; }
+
+.pl-status-badge {
+  display:inline-block; padding:2px 7px; border-radius:4px; font-size:12px; font-weight:600;
+}
+.pl-status-badge--ok       { background:#e8f4ec; color:#1a7a3c; }
+.pl-status-badge--redirect { background:#e3edf8; color:#1565c0; }
+.pl-status-badge--error    { background:#fbe3e4; color:#c0392b; }