index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="icon" type="image/png" sizes="192x192" href="./pwa-192x192.png" />
  <link rel="apple-touch-icon" sizes="192x192" href="./pwa-192x192.png" />


  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="Diagnostics" />
  <title>App Diagnostics</title>
  <!-- CODE -->

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <link rel="stylesheet" href="/src/style.css">
  <link rel="stylesheet" href="/src/mobile.css">
</head>

<body>
  <div class="layout">
    <aside class="sidebar">
      <div class="sidebar-header">
        <h2>Diagnostics</h2>

        <button id="btn-refresh-apps" class="btn-refresh-apps" type="button" aria-label="Refresh applications"
          title="Refresh applications">
          🔄
        </button>
      </div>
      <div class="sidebar-section">
        <h3>APPLICATIONS</h3>
        <ul id="app-list" class="app-list">
          <li class="loading-text">Loading apps...</li>
        </ul>
      </div>
    </aside>

    <main class="main-content">
      <header class="topbar">
        <div class="topbar-left">
          <h1 id="current-app-title">Select an Application</h1>
          <span id="current-app-platform" class="badge hidden"></span>
        </div>
        <div class="topbar-right">
          <button id="btn-refresh" class="btn" disabled>🔄 Refresh</button>
          <button id="btn-theme" class="btn">🌓 Theme</button>
        </div>
      </header>

      <div id="dashboard-content" class="dashboard-content hidden">
        <section class="stats-grid">
          <div class="stat-card">
            <span class="stat-label">Total Logs</span>
            <span class="stat-value" id="stat-total">0</span>
          </div>
          <div class="stat-card">
            <span class="stat-label">Errors</span>
            <span class="stat-value" id="stat-errors">0</span>
          </div>
          <div class="stat-card">
            <span class="stat-label">Crashes</span>
            <span class="stat-value" id="stat-crashes">0</span>
          </div>
          <div class="stat-card">
            <span class="stat-label">Affected Sessions</span>
            <span class="stat-value" id="stat-sessions">0</span>
          </div>
          <div class="stat-card">
            <span class="stat-label">Affected Devices</span>
            <span class="stat-value" id="stat-devices">0</span>
          </div>
        </section>

        <section class="charts-grid">
          <div class="chart-container">
            <canvas id="chart-timeline"></canvas>
          </div>
          <div class="chart-container">
            <canvas id="chart-versions"></canvas>
          </div>
        </section>

        <section class="toolbar">
          <input type="text" id="search-input" placeholder="Search errors, stack traces, tags..." class="search-input">
          <select id="filter-version" class="filter-select" aria-label="Filter by application version">
            <option value="all">All versions</option>
          </select>
        </section>

        <section class="error-groups">
          <div class="section-header">
            <h3>ERROR GROUPS</h3>
          </div>
          <div id="error-groups-list" class="groups-list">
          </div>
        </section>
      </div>

      <div id="loading-overlay" class="loading-overlay hidden">
        <div class="spinner"></div>
        <p>Loading application data...</p>
      </div>
    </main>
  </div>


  <div id="error-detail-view" class="detail-view hidden">

    <!-- Detail Header -->
    <header class="detail-header">

      <button id="btn-back" class="btn-close" aria-label="Close" type="button">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 6L18 18M18 6L6 18" />
        </svg>
      </button>

      <div class="detail-title">
        <h2 id="detail-exception">
          ExceptionType
        </h2>

        <p id="detail-frame" class="monospace">
          App.Frame.Location()
        </p>

        <p id="detail-message">
          Error message details.
        </p>
      </div>

      <div class="detail-stats" id="detail-stats-container"></div>

    </header>


    <!-- Error Occurrences -->
    <main class="detail-occurrences" id="detail-occurrences-list"></main>

  </div>


  <!-- Error Modal -->
  <div id="error-modal" class="error-modal hidden" role="dialog" aria-modal="true">
    <div class="error-modal-backdrop"></div>

    <div class="error-modal-card">
      <div class="error-modal-header">
        <div class="error-modal-title-wrap">
          <div class="error-modal-icon">
            !
          </div>

          <div>
            <h2>Application Error</h2>
            <p>Something went wrong while loading the application logs.</p>
          </div>
        </div>

        <button id="error-modal-close" class="error-modal-close" type="button" aria-label="Close">
          ×
        </button>
      </div>

      <div class="error-modal-body">
        <div class="error-modal-label">
          <span>Error Details</span>
        </div>

        <pre id="error-modal-details"></pre>
      </div>

      <div class="error-modal-footer">
        <button id="error-modal-copy" class="error-modal-copy" type="button">
          <span class="copy-icon">⧉</span>
          <span id="error-modal-copy-text">Copy for AI</span>
        </button>

        <button id="error-modal-dismiss" class="error-modal-dismiss" type="button">
          Close
        </button>
      </div>
    </div>
  </div>

  <script type="module" src="/src/main.ts"></script>
  <script type="module" src="/src/bridge/webViewInit.ts"></script>
</body>

</html>