opticore-profiler 1.0.0

package/dist/views/templates/panels/logs.njk

@@ -0,0 +1,44 @@
+{% if not panelData.hasLogs %}
+<div class="empty-state">
+  <div class="empty-icon">📋</div>
+  <div class="empty-text">{{ t('logs.no_logs') }}</div>
+  <div style="font-size:12px;color:#555;margin-top:8px;">
+    {{ t('logs.hint', { code: safeHtml('<code>logCollector.record(token, { level, message })</code>') }) | safe }}
+  </div>
+</div>
+{% else %}
+<div class="log-tabs" id="log-tabs">
+  <button class="log-tab active" data-ltab="all">{{ t('logs.all_messages') }}</button>
+  <button class="log-tab" data-ltab="error">{{ t('logs.errors') }} {% if panelData.errCount > 0 %}<span class="log-tab-badge log-tab-err">{{ panelData.errCount }}</span>{% else %}<span class="log-tab-zero">0</span>{% endif %}</button>
+  <button class="log-tab" data-ltab="deprecation">{{ t('logs.deprecations') }} {% if panelData.deprCount > 0 %}<span class="log-tab-badge log-tab-depr">{{ panelData.deprCount }}</span>{% else %}<span class="log-tab-zero">0</span>{% endif %}</button>
+  <button class="log-tab" data-ltab="warning">{{ t('logs.warnings') }} {% if panelData.warnCount > 0 %}<span class="log-tab-badge log-tab-warn">{{ panelData.warnCount }}</span>{% else %}<span class="log-tab-zero">0</span>{% endif %}</button>
+</div>
+
+<div class="log-table-wrap">
+  <table class="log-table">
+    <thead><tr><th>{{ t('logs.time') }}</th><th>{{ t('logs.message') }}</th></tr></thead>
+    <tbody id="log-tbody">
+      {% for row in panelData.rows %}
+      <tr class="log-row {{ row.rowClass }}" data-ltype="{{ row.logType }}">
+        <td class="log-td-time">
+          {{ row.timeStr }}<br>
+          <span class="log-level {{ row.levelCls }}">{{ row.level }}</span>
+        </td>
+        <td class="log-td-msg">
+          <span class="log-msg-text">{{ row.message }}</span>
+          {% if row.source %}<span class="log-source-ref">{{ row.source }}</span>{% endif %}
+          {% if row.extra %}
+          <div class="log-meta-links">
+            {% if row.extra.showContextBtn %}<button class="log-ctx-btn" onclick="toggleLogCtx('{{ row.extra.ctxId }}', this)">{{ t('logs.show_context') }}</button>{% endif %}
+            {% if row.extra.showTraceBtn %}<button class="log-ctx-btn" onclick="toggleLogCtx('{{ row.extra.stackId }}', this)">{{ t('logs.show_trace') }}</button>{% endif %}
+          </div>
+          {% if row.extra.ctxJson %}<pre id="{{ row.extra.ctxId }}" class="log-context-detail">{{ row.extra.ctxJson }}</pre>{% endif %}
+          {% if row.extra.stackText %}<pre id="{{ row.extra.stackId }}" class="log-context-detail log-stack-trace">{{ row.extra.stackText }}</pre>{% endif %}
+          {% endif %}
+        </td>
+      </tr>
+      {% endfor %}
+    </tbody>
+  </table>
+</div>
+{% endif %}

package/dist/views/templates/panels/performance.njk

@@ -0,0 +1,56 @@
+{% from "macros/tables.njk" import kv_table with context %}
+<div class="panel-title">{{ t('performance.title') }}</div>
+
+<div class="perf-metrics-row">
+  <div class="perf-metric">
+    <div class="perf-metric-label">{{ t('performance.total_execution') }}</div>
+    <div class="perf-metric-value">{{ panelData.total }}<span class="perf-metric-unit">ms</span></div>
+  </div>
+  <div class="perf-metric">
+    <div class="perf-metric-label">{{ t('performance.app_time') }}</div>
+    <div class="perf-metric-value">{{ panelData.appTime }}<span class="perf-metric-unit">ms</span></div>
+  </div>
+  <div class="perf-metric">
+    <div class="perf-metric-label">{{ t('performance.peak_memory') }}</div>
+    <div class="perf-metric-value">{{ panelData.memoryMiB }}<span class="perf-metric-unit"> MiB</span></div>
+  </div>
+</div>
+
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('performance.execution_timeline') }}</div>
+
+  <div class="tl-threshold-row">
+    {{ t('performance.threshold') }}
+    <input type="number" class="tl-threshold-input" id="tl-threshold" value="0" min="0" max="{{ panelData.total }}">
+     ms
+    <span class="tl-threshold-hint">{{ t('performance.threshold_hint') }}</span>
+  </div>
+
+  <div class="tl-legend">
+    <span class="tl-legend-item"><span class="tl-legend-dot" style="background:#C87A3C;"></span> {{ t('performance.application_legend') }}</span>
+    {% if panelData.hasSqlTime %}<span class="tl-legend-item"><span class="tl-legend-dot" style="background:#2D6A4A;"></span> {{ t('performance.database_legend') }}</span>{% endif %}
+  </div>
+
+  <div class="tl-chart">
+    {% if panelData.hasEvents %}
+      {% for e in panelData.events %}
+      <div class="tl-row">
+        <div class="tl-name">{{ e.label }}</div>
+        <div class="tl-track">
+          <div class="tl-bar" style="width:{{ e.widthPct }}%;background:{{ e.color }};">
+            <span class="tl-bar-label">{{ e.durationFormatted }}</span>
+          </div>
+        </div>
+        <div class="tl-info">{{ e.durationFormatted }}</div>
+      </div>
+      {% endfor %}
+    {% else %}
+    <div class="tl-empty">{{ t('performance.no_timing_events') }}</div>
+    {% endif %}
+  </div>
+</div>
+
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('performance.process_info') }}</div>
+  <div class="table-wrap">{{ kv_table(panelData.processInfo) }}</div>
+</div>

package/dist/views/templates/panels/request.njk

@@ -0,0 +1,141 @@
+{% from "macros/tables.njk" import kv_table with context %}
+{# <div class="panel-title">Request / Response</div> #}
+
+<div class="stats-grid">
+  <div class="stat-card">
+    <div class="stat-value" style="color:{{ '#4caf50' if panelData.statusOk else '#e74c3c' }}">{{ panelData.statusCode }}</div>
+    <div class="stat-label">{{ t('panel.http_status') }}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ panelData.durationFormatted }}</div>
+    <div class="stat-label">{{ t('panel.duration') }}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ panelData.memoryFormatted }}</div>
+    <div class="stat-label">{{ t('panel.memory') }}</div>
+  </div>
+  <div class="stat-card">
+    <div class="stat-value">{{ panelData.sqlQueryCount }}</div>
+    <div class="stat-label">{{ t('panel.sql_queries') }}</div>
+  </div>
+</div>
+
+<div class="rr-tabs" id="rr-tabs" role="tablist">
+  <button type="button" class="rr-tab active" data-rtab="request">{{ t('request.tab_request') }}</button>
+  <button type="button" class="rr-tab" data-rtab="response">{{ t('request.tab_response') }}</button>
+  <button type="button" class="rr-tab" data-rtab="cookies">{{ t('request.tab_cookies') }}</button>
+  <button type="button" class="rr-tab{{ ' rr-tab-empty' if not panelData.hasSession }}" data-rtab="session">{{ t('request.tab_session') }}</button>
+  <button type="button" class="rr-tab" data-rtab="server">{{ t('request.tab_server') }}</button>
+</div>
+
+<!-- ── REQUEST ── -->
+<div class="rr-tabpanel active" data-rpanel="request">
+  <div class="card-grid">
+    <div class="card">
+      <div class="card-title">{{ t('request.get_params') }}</div>
+      {% if panelData.getParams.length > 0 %}{{ kv_table(panelData.getParams) }}{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
+    </div>
+    <div class="card">
+      <div class="card-title">{{ t('request.post_params') }}</div>
+      {% if panelData.postParamsJson %}<pre class="json-pre">{{ panelData.postParamsJson | safe }}</pre>{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
+    </div>
+    <div class="card">
+      <div class="card-title">{{ t('request.uploaded_files') }}</div>
+      <div class="card-empty">{{ t('common.none') }}</div>
+    </div>
+    <div class="card">
+      <div class="card-title">{{ t('request.route_params') }}</div>
+      {% if panelData.routeParams.length > 0 %}{{ kv_table(panelData.routeParams) }}{% else %}<div class="card-empty">{{ t('common.none') }}</div>{% endif %}
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.attributes') }} <input type="search" class="table-search" placeholder="{{ t('common.search_ellipsis') }}" oninput="filterTable(this)"></div>
+      {{ kv_table(panelData.attributes, headers=[t('common.key'), t('common.value')]) }}
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.headers') }} <input type="search" class="table-search" placeholder="{{ t('common.search_ellipsis') }}" oninput="filterTable(this)"></div>
+      {{ kv_table(panelData.requestHeaders, headers=[t('common.header'), t('common.value')]) }}
+    </div>
+  </div>
+
+  <div class="panel-section">
+    <div class="panel-section-title">{{ t('request.content') }}</div>
+    {% if panelData.requestContentJson %}
+    <pre class="json-pre">{{ panelData.requestContentJson | safe }}</pre>
+    {% else %}
+    <div class="table-wrap"><div class="empty-state"><div class="empty-text">{{ t('request.no_body') }}</div></div></div>
+    {% endif %}
+  </div>
+
+  <div class="panel-section">
+    <div class="panel-section-title">{{ t('request.retry_command') }}</div>
+    <div class="curl-block">
+      <button type="button" class="curl-copy-btn" onclick="copyCurl(this)">{{ t('request.copy_curl') }}</button>
+      <pre class="curl-pre">{{ panelData.retryCommandCurl }}</pre>
+    </div>
+  </div>
+</div>
+
+<!-- ── RESPONSE ── -->
+<div class="rr-tabpanel" data-rpanel="response" style="display:none;">
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.response_headers') }}</div>
+      {{ kv_table(panelData.responseHeaders, headers=[t('common.header'), t('common.value')]) }}
+    </div>
+  </div>
+  <div class="panel-section">
+    <div class="panel-section-title">{{ t('request.response_content') }}</div>
+    {% if panelData.responseBodyJson %}
+    <pre class="json-pre">{{ panelData.responseBodyJson | safe }}</pre>
+    {% else %}
+    <div class="table-wrap"><div class="empty-state"><div class="empty-text">{{ t('request.no_response_body') }}</div></div></div>
+    {% endif %}
+  </div>
+</div>
+
+<!-- ── COOKIES ── -->
+<div class="rr-tabpanel" data-rpanel="cookies" style="display:none;">
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.request_cookies') }}</div>
+      {{ kv_table(panelData.cookies, headers=[t('common.key'), t('common.value')]) }}
+    </div>
+  </div>
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.response_cookies') }}</div>
+      {{ kv_table(panelData.responseCookies, headers=[t('common.key'), t('common.value')]) }}
+    </div>
+  </div>
+</div>
+
+<!-- ── SESSION ── -->
+<div class="rr-tabpanel" data-rpanel="session" style="display:none;">
+  {% if panelData.hasSession %}
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.session_attributes') }}</div>
+      {{ kv_table(panelData.session, headers=[t('common.key'), t('common.value')]) }}
+    </div>
+  </div>
+  {% else %}
+  <div class="empty-state"><div class="empty-text">{{ t('request.no_session') }}</div></div>
+  {% endif %}
+</div>
+
+
+<!-- ── SERVER PARAMETERS ── -->
+<div class="rr-tabpanel" data-rpanel="server" style="display:none;">
+  <div class="panel-section">
+    <div class="table-wrap">
+      <div class="table-wrap-title">{{ t('request.server_params') }}</div>
+      {{ kv_table(panelData.serverParams, headers=[t('common.key'), t('common.value')]) }}
+    </div>
+  </div>
+</div>

package/dist/views/templates/panels/routes.njk

@@ -0,0 +1,51 @@
+{% import "macros/icons.njk" as icons %}
+{% macro route_table(rows) %}
+{%- if rows.length == 0 -%}
+<div style="padding:14px;color:var(--muted);font-size:12px;text-align:center;">{{ t('routes.none') }}</div>
+{%- else -%}
+<table class="data-table">
+  <thead><tr><th>{{ t('routes.method') }}</th><th>{{ t('routes.path') }}</th><th style="text-align:center;">{{ t('routes.middlewares') }}</th></tr></thead>
+  <tbody>
+    {%- for r in rows %}
+    <tr>
+      <td><span class="route-method {{ r.methodClass }}">{{ r.method }}</span></td>
+      <td class="route-path">{% for seg in r.pathSegments %}{% if seg.type == "param" %}<span class="param">:{{ seg.value }}</span>{% else %}{{ seg.value }}{% endif %}{% endfor %}</td>
+      <td class="center mono muted">{{ r.middlewareCount }}</td>
+    </tr>
+    {%- endfor %}
+  </tbody>
+</table>
+{%- endif -%}
+{% endmacro %}
+
+{% if not panelData.hasRoutes %}
+<div class="panel-title">{{ icons.icon("map") }} {{ t('routes.title') }}</div>
+<div class="empty-state">
+  <div class="empty-icon">🗺</div>
+  <div class="empty-text">{{ t('routes.no_routes') }}</div>
+</div>
+{% else %}
+<div class="panel-title">{{ icons.icon("map") }} {{ t('routes.title') }}</div>
+
+<div class="routes-summary">
+  <div class="routes-summary-item"><div class="routes-summary-value">{{ panelData.totalRoutes }}</div><div class="routes-summary-label">{{ t('routes.total_routes') }}</div></div>
+  <div class="routes-summary-item"><div class="routes-summary-value">{{ panelData.appRoutesCount }}</div><div class="routes-summary-label">{{ t('routes.app_routes') }}</div></div>
+  {% for mc in panelData.methodCounts %}
+  <div class="routes-summary-item"><div class="routes-summary-value">{{ mc.count }}</div><div class="routes-summary-label">{{ mc.method }}</div></div>
+  {% endfor %}
+</div>
+
+{% if panelData.hasAppRoutes %}
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('routes.application_routes') }} <span class="badge badge-info">{{ panelData.appRoutesCount }}</span></div>
+  <div class="table-wrap">{{ route_table(panelData.appRoutesRows) }}</div>
+</div>
+{% endif %}
+
+{% if panelData.hasDebugRoutes %}
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('routes.framework_debug_routes') }} <span class="badge badge-muted">{{ panelData.debugRoutesRows.length }}</span></div>
+  <div class="table-wrap">{{ route_table(panelData.debugRoutesRows) }}</div>
+</div>
+{% endif %}
+{% endif %}

package/dist/views/templates/panels/routing.njk

@@ -0,0 +1,22 @@
+{% import "macros/icons.njk" as icons %}
+{% from "macros/tables.njk" import kv_table with context %}
+<div class="panel-title">{{ icons.icon("route") }} {{ t('panel.routing') }}</div>
+
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('routing.matched_route') }}</div>
+  <div class="table-wrap">{{ kv_table(panelData.routeRows) }}</div>
+</div>
+
+{% if panelData.hasRouteParams %}
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('routing.route_params') }}</div>
+  <div class="table-wrap">{{ kv_table(panelData.routeParamsRows, headers=[t('common.name'), t('common.value')]) }}</div>
+</div>
+{% endif %}
+
+{% if panelData.hasQueryParams %}
+<div class="panel-section">
+  <div class="panel-section-title">{{ t('routing.query_string') }}</div>
+  <div class="table-wrap">{{ kv_table(panelData.queryParamsRows, headers=[t('common.key'), t('common.value')]) }}</div>
+</div>
+{% endif %}

package/dist/views/templates/profiler-detail.njk

@@ -0,0 +1,114 @@
+{% import "macros/icons.njk" as icons %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>OptiCoreJs Profiler — {{ profile.method }} {{ profile.url }}</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/_profiler/assets/css/profiler-detail.css">
+</head>
+<body>
+
+<!-- ── HEADER ── -->
+<div style="max-width:2000px;margin:0 auto;padding:34px 200px 0 200px;">
+  <div style="display:flex;align-items:center;justify-content:space-between;">
+    <a href="/_profiler" style="display:flex;align-items:center;gap:14px;text-decoration:none;cursor:pointer;">
+      <span style="font-size: 20px; font-weight: 900; color:#222; letter-spacing:-.2px;">OptiCoreJs Profiler</span>
+    </a>
+    <div style="display:flex;align-items:center;gap:14px;">
+      <div style="position:relative;width:340px;">
+        <svg style="position:absolute;left:12px;top:50%;transform:translateY(-50%);" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input placeholder="{{ t('detail.search_placeholder') }}" disabled style="width:100%;height:42px;padding:0 14px 0 36px;border:1px solid #d8d8d8;border-radius:4px;font-family:'Montserrat',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:14px;color:#555;outline:none;background:#fff;cursor:default;opacity:.6;">
+      </div>
+      <div class="lang-switch">
+        {% for l in languages %}
+        <a href="#" class="lang-switch-item{{ ' active' if l.active }}" onclick="event.preventDefault();var u=new URL(location.href);u.searchParams.set('lang','{{ l.code }}');location.href=u.toString();">{{ l.code | upper }}</a>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── STATUS BANNER ── -->
+<div style="width: auto; margin: 22px auto 0 auto; padding:0 200px;">
+  <div style="background:{{ banner.bg }}; border-radius:6px; border-top:4px solid {{ banner.border }}; padding: 16px 16px 10px 16px;">
+    <div style="display:flex; align-items:center; gap:14px; margin-bottom: 10px;">
+      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="{{ banner.border }}" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="13"/><circle cx="12" cy="16.5" r="1.1" fill="{{ banner.border }}" stroke="none"/></svg>
+      <span style="font-size: 19px; font-weight: 900; color:{{ banner.code }};">
+        {{ 'ERROR ' if banner.isError }}{{ profile.statusCode }}
+      </span>
+      <span style="font-size: 19px; font-weight:400; color:{{ banner.msg }};">
+        {{ profile.statusMessage }}
+      </span>
+    </div>
+    <div style="display:flex; align-items:center; gap:14px; margin-bottom: 10px;">
+      <span style="display:inline-block; padding: 2px 10px; border: 1px solid #d7d7d7; border-radius: 4px; font-size: 14px; font-weight:600; color:#555; background:#f5f5f5;">
+        {{ profile.method }}
+      </span>
+      <span style="font-size: 15px; font-weight:400; color:#333;">
+        {{ profile.url }}
+      </span>
+    </div>
+    <div style="display:flex; align-items:center; gap:34px; font-size:16px; color:#777;">
+      <span><strong style="color:#555; font-size: 14px; font-weight:600;">IP:</strong> {{ profile.ip }}</span>
+      <span><strong style="color:#555; font-size: 14px; font-weight:600;">Profiled on:</strong> {{ profile.date }} at {{ profile.time }}</span>
+      <span><strong style="color:#555; font-size: 14px; font-weight:600;">Token:</strong> {{ profile.token6 }}</span>
+    </div>
+  </div>
+</div>
+
+<!-- ── MAIN GRID ── -->
+<div style="max-width:2000px; margin: 20px auto 0 auto;padding:0 200px 80px 200px;display:grid;grid-template-columns:250px 1fr;gap:40px;">
+
+  <!-- ── SIDEBAR CARD ── -->
+  <div>
+    <div style="border:1px solid #e3e3e3;border-radius:4px;overflow:hidden;">
+
+      <div style="display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #ececec;">
+        <a href="/_profiler" style="display:flex;align-items:center;gap:8px;text-decoration:none;">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <span style="font-size: 13px;color:#888;">{{ t('list.search_profiles') }}</span>
+        </a>
+        <a href="/_profiler/latest" style="font-size:13px; color:#C87A3C;text-decoration:none;cursor:pointer;">{{ t('list.latest') }}</a>
+      </div>
+
+      {% for item in sidebarItems %}
+      <a href="?panel={{ item.panel }}" style="display:flex;align-items:center;gap:14px;{{ 'justify-content:space-between;' if item.badge > 0 }}padding:16px 20px;{% if item.active %}border-left:4px solid #C87A3C;background:#FDF3EA;color:#C87A3C;font-weight:600;padding-left:20px;{% else %}padding-left:24px;color:#555;border-left:4px solid transparent;{% endif %}font-size:12.5px;text-decoration:none;" onmouseenter="if(!this.classList.contains('act'))this.style.background='#fafafa'" onmouseleave="if(!this.classList.contains('act'))this.style.background=''">
+        {% if item.badge > 0 %}
+        <span style="display:flex;align-items:center;gap:14px;">{{ icons.icon(item.icon) }} {{ t(item.label) }}</span>
+        <span style="background:{{ '#fbe3e4' if item.badgeIsError else '#e8f4ec' }};color:{{ '#c0392b' if item.badgeIsError else '#1a7a3c' }};border-radius:4px;padding:2px 9px;font-size:13px;font-weight:600;">{{ item.badge }}</span>
+        {% else %}
+        {{ icons.icon(item.icon) }} {{ t(item.label) }}
+        {% endif %}
+      </a>
+      {% endfor %}
+
+    </div>
+
+    <a href="/_profiler" style="display:flex;align-items:center;gap:8px;margin-top:18px;color:#777;text-decoration:none;font-size:13px;">
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+      {{ t('list.settings') }}
+    </a>
+  </div>
+
+  <!-- ── CONTENT ── -->
+  <div class="pf-content">
+    <h1 class="panel-title">{{ t(panelLabel) }}</h1>
+    {% include "panels/" + panelName + ".njk" %}
+  </div>
+
+</div>
+
+<script>
+  window.__opticoreProfilerI18n = {
+    showContext: {{ t('logs.show_context') | dump | safe }},
+    hideContext: {{ t('logs.hide_context') | dump | safe }},
+    copied: {{ t('js.copied') | dump | safe }}
+  };
+</script>
+<script src="/_profiler/assets/js/profiler-detail.js"></script>
+</body>
+</html>

package/dist/views/templates/profiler-list.njk

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>OptiCoreJs Profiler</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/_profiler/assets/css/profiler-list.css">
+</head>
+<body data-autoreload="{{ '1' if autoReload else '0' }}">
+
+<div class="pl-header">
+  <div class="pl-header-row">
+    <a href="/_profiler" class="pl-brand">
+      <span class="pl-brand-name">OptiCoreJs Profiler</span>
+    </a>
+    <form method="get" action="/_profiler" class="pl-search-wrap">
+      <svg class="pl-search-icon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+      <input type="search" name="search" value="{{ filters.search }}" class="pl-search-input" placeholder="{{ t('list.search_placeholder') }}">
+    </form>
+    <div class="lang-switch">
+      {% for l in languages %}
+      <a href="#" class="lang-switch-item{{ ' active' if l.active }}" onclick="event.preventDefault();var u=new URL(location.href);u.searchParams.set('lang','{{ l.code }}');location.href=u.toString();">{{ l.code | upper }}</a>
+      {% endfor %}
+    </div>
+  </div>
+</div>
+
+<div class="pl-banner">
+  <div class="pl-banner-inner">
+    <h2 class="pl-banner-title">{{ t('list.profile_search') }}</h2>
+  </div>
+</div>
+
+<div class="pl-grid">
+
+  <!-- SIDEBAR -->
+  <div>
+    <div class="pl-sidebar-card">
+      <div class="pl-sidebar-head">
+        <a href="/_profiler" class="pl-sidebar-search-link">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#aaa" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+          <span class="pl-sidebar-search-label">{{ t('list.search_profiles') }}</span>
+        </a>
+        <a href="/_profiler/latest" class="pl-sidebar-latest{{ ' is-disabled' if not filters.hasProfiles }}">{{ t('list.latest') }}</a>
+      </div>
+
+      <form method="get" action="/_profiler">
+        <label class="pl-label">{{ t('list.ip') }}</label>
+        <input name="ip" value="{{ filters.ip }}" class="pl-field pl-field--gap">
+
+        <div class="pl-field-row">
+          <div class="pl-field-col">
+            <label class="pl-label">{{ t('list.method') }}</label>
+            <div class="pl-select-wrap">
+              <select name="method" class="pl-field pl-select">
+                {% for opt in filters.methodOptions %}
+                <option value="{{ opt.value }}"{{ ' selected' if opt.selected }}>{{ t('list.method_any') if opt.value == '' else opt.label }}</option>
+                {% endfor %}
+              </select>
+              <span class="pl-chevron"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
+            </div>
+          </div>
+          <div class="pl-field-col">
+            <label class="pl-label">{{ t('list.status') }}</label>
+            <input name="status" value="{{ filters.status }}" class="pl-field">
+          </div>
+        </div>
+
+        <label class="pl-label">{{ t('list.search_label') }}</label>
+        <input name="search" value="{{ filters.search }}" class="pl-field pl-field--gap" placeholder="{{ t('list.search_placeholder') }}">
+
+        <label class="pl-label">{{ t('list.token') }}</label>
+        <input name="token" value="{{ filters.token }}" class="pl-field pl-field--token">
+
+        <label class="pl-label">{{ t('list.from') }}</label>
+        <div class="pl-field-date-wrap">
+          <input type="date" name="from" value="{{ filters.from }}" class="pl-field pl-date">
+        </div>
+
+        <label class="pl-label">{{ t('list.until') }}</label>
+        <div class="pl-field-date-wrap">
+          <input type="date" name="until" value="{{ filters.until }}" class="pl-field pl-date">
+        </div>
+
+        <label class="pl-label">{{ t('list.results') }}</label>
+        <div class="pl-results-row">
+          <div class="pl-select-wrap pl-select-wrap--limit">
+            <select name="limit" class="pl-field pl-select" style="width:74px;">
+              {% for opt in filters.limitOptions %}
+              <option value="{{ opt.value }}"{{ ' selected' if opt.selected }}>{{ opt.value }}</option>
+              {% endfor %}
+            </select>
+            <span class="pl-chevron pl-chevron--limit"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg></span>
+          </div>
+          <button type="submit" class="pl-submit-btn">{{ t('list.search_btn') }}</button>
+        </div>
+      </form>
+    </div>
+
+    <a href="/_profiler" class="pl-settings-link">
+      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#888" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
+      {{ t('list.settings') }}
+    </a>
+  </div>
+
+  <!-- RESULTS -->
+  <div class="pl-results">
+    <div class="pl-tabs">
+      <a href="{{ tabs.requests.href }}" class="pl-tab">
+        <span class="pl-tab-label{{ ' is-active' if tabs.requests.active }}">{{ t('list.http_requests_tab') }}</span>
+        <span class="pl-tab-underline{{ ' is-active' if tabs.requests.active }}"></span>
+      </a>
+      <a href="{{ tabs.commands.href }}" class="pl-tab">
+        <span class="pl-tab-label{{ ' is-active' if tabs.commands.active }}">{{ t('list.console_commands_tab') }}</span>
+        <span class="pl-tab-underline{{ ' is-active' if tabs.commands.active }}"></span>
+      </a>
+    </div>
+
+    {% if tab == "commands" %}
+    <h2 class="pl-section-heading">{{ t('list.console_commands_tab') }}</h2>
+    <div class="pl-empty-commands">
+      <div class="pl-empty-commands-text">{{ t('list.no_commands') }}</div>
+    </div>
+    {% else %}
+    <h2 class="pl-section-heading">{{ t('list.results_found_one' if resultCount == 1 else 'list.results_found_other', { n: resultCount }) }}</h2>
+    <table class="pl-table">
+      <thead>
+        <tr>
+          <th>{{ t('list.col_status') }}</th><th>{{ t('list.col_method') }}</th><th>{{ t('list.col_url') }}</th><th>{{ t('list.col_time') }}</th><th>{{ t('list.col_token') }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% if rows.length > 0 %}
+          {% for row in rows %}
+          <tr class="pl-row pl-row-font-size" onclick="location.href='/_profiler/{{ row.token }}'">
+            <td class="pl-cell"><span class="pl-status-badge pl-status-badge--{{ row.statusClass }}">{{ row.statusCode }}</span></td>
+            <td class="pl-cell">{{ row.method }}</td>
+            <td class="pl-cell pl-cell-url" title="{{ row.url }}">{{ row.url }}</td>
+            <td class="pl-cell pl-cell-date">{{ row.dateStr }}<br><span class="pl-cell-time">{{ row.timeStr }}</span></td>
+            <td class="pl-cell"><a href="/_profiler/{{ row.token }}" onclick="event.stopPropagation()" class="pl-token-link">{{ row.tokenShort }}</a></td>
+          </tr>
+          {% endfor %}
+        {% else %}
+          <tr><td colspan="5" class="pl-empty-row">{{ t('list.no_requests_found') }}</td></tr>
+        {% endif %}
+      </tbody>
+    </table>
+    {% endif %}
+  </div>
+</div>
+
+<script>
+  window.__opticoreProfilerI18n = {
+    resultsFoundOne: {{ t('list.results_found_one') | dump | safe }},
+    resultsFoundOther: {{ t('list.results_found_other') | dump | safe }}
+  };
+</script>
+<script src="/_profiler/assets/js/profiler-list.js"></script>
+</body>
+</html>