<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>R8 Configuration Analyzer</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdn.jsdelivr.net/npm/protobufjs@7.2.4/dist/protobuf.min.js"></script>
  </head>

  <body>
    <header>
      <div class="header-top-row">
        <div
          class="flex items-center"
          style="display: flex; align-items: center"
        >
          <div class="header-branding">
            <h1 class="header-title" id="report-name">
              <a
                href="#"
                id="header-link"
                style="color: inherit; text-decoration: none"
                >R8 Configuration Analyzer</a
              >
            </h1>
          </div>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-label">Shrinking</span
            ><span class="stat-value" id="total-shrinking"></span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Optimization</span
            ><span class="stat-value" id="total-optimization"></span>
          </div>
          <div class="stat-item">
            <span class="stat-label">Obfuscation</span
            ><span class="stat-value" id="total-obfuscation"></span>
          </div>
          <button
            type="button"
            class="tooltip-icon"
            id="lenses-tooltip-icon"
            style="cursor: pointer"
            data-tooltip="These numbers represent optimization ratios for code before optimization passes have occurred. For final optimization ratios, build your app bundle, and see r8.json."
            aria-label="These numbers represent optimization ratios for code before optimization passes have occurred. For final optimization ratios, build your app bundle, and see r8.json."
          >
            ?
          </button>
        </div>
      </div>
      <div class="header-toolbar">
        <div id="report-view-controls" class="header-toolbar-inner">
          <div
            class="flex-1"
            style="
              display: flex;
              align-items: center;
              gap: 1rem;
              justify-content: flex-start;
            "
          >
            <div class="filter-icon" title="Filter Options">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M4 6h16M7 12h10M10 18h4"
                />
              </svg>
            </div>
            <div
              id="filter-chips-container"
              style="display: flex; align-items: center; gap: 0.5rem"
            >
              <div class="segmented-control" id="lens-tabs">
                <button class="segment-btn active" data-lens="All">
                  All Rules
                </button>
                <button class="segment-btn" data-lens="Identical">
                  Identical
                </button>
                <button class="segment-btn" data-lens="Subsumed">
                  Subsumed
                </button>
                <button class="segment-btn" data-lens="Unused">Unused</button>
              </div>
              <button
                type="button"
                class="tooltip-icon"
                id="lenses-tooltip-icon"
                style="cursor: pointer; margin-right: 0.5rem"
                data-tooltip="Filter rules to a specific opportunity."
                aria-label="Filter rules to a specific opportunity."
              >
                ?
              </button>
              <div class="relative" id="add-filter-container">
                <button id="add-filter-btn" class="add-filter-btn">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M12 4v16m8-8H4"
                    />
                  </svg>
                  Add filter
                </button>
                <div
                  id="add-filter-dropdown"
                  class="dropdown-menu hidden"
                  style="min-width: 10rem"
                >
                  <div id="add-filter-list"></div>
                </div>
              </div>
              <div class="relative hidden" id="cls-chip-container">
                <button id="cls-filter-btn" class="filter-chip">
                  <span id="cls-filter-text">Classes: All</span>
                </button>
                <div id="cls-dropdown" class="dropdown-menu hidden"></div>
              </div>
              <div class="relative hidden" id="field-chip-container">
                <button id="field-filter-btn" class="filter-chip">
                  <span id="field-filter-text">Fields: All</span>
                </button>
                <div id="field-dropdown" class="dropdown-menu hidden"></div>
              </div>
              <div class="relative hidden" id="method-chip-container">
                <button id="method-filter-btn" class="filter-chip">
                  <span id="method-filter-text">Methods: All</span>
                </button>
                <div id="method-dropdown" class="dropdown-menu hidden"></div>
              </div>
            </div>
          </div>
          <div
            class="flex-1"
            style="
              display: flex;
              align-items: center;
              gap: 0.75rem;
              justify-content: flex-end;
            "
          >
            <div id="search-container" class="search-bar-container relative">
              <div class="search-bar-icon" id="search-icon-btn">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  ></path>
                </svg>
              </div>
              <input
                type="text"
                id="search-input"
                class="search-bar-input"
                placeholder="Search report..."
              />
              <button
                id="clear-search-btn"
                class="hidden"
                style="
                  color: var(--text-gray-500);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18"
                  height="18"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                  ></path>
                </svg>
              </button>
            </div>
            <div class="relative" id="columns-toggle-container">
              <button
                id="toggle-columns-btn"
                class="icon-btn"
                title="Toggle Columns"
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20"
                  height="20"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  stroke-width="2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M9 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4m0-18h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H9m0-18v18"
                  ></path>
                </svg>
              </button>
              <div
                id="columns-dropdown"
                class="dropdown-menu right-0 hidden"
                style="min-width: 150px"
              >
                <label
                  class="popover-item"
                  style="
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 0.75rem;
                    cursor: pointer;
                  "
                >
                  <input
                    type="checkbox"
                    class="popover-checkbox"
                    id="toggle-blocked-by-rule-cb"
                    checked
                  />
                  <span
                    style="
                      font-size: 0.75rem;
                      font-weight: 500;
                      color: var(--text-main);
                    "
                    >Blocked by Rule</span
                  >
                </label>
              </div>
            </div>
            <div class="relative" id="group-by-container">
              <button
                id="group-by-btn"
                class="dropdown-btn"
                style="
                  border: none;
                  background: #f8f8f8;
                  padding: 0.5rem 0.75rem;
                  display: flex;
                  align-items: center;
                  border-radius: 4px;
                "
              >
                <span style="font-weight: 500; color: var(--text-gray-400)"
                  >Group by:</span
                >
                <span
                  id="group-by-text"
                  style="
                    font-weight: 600;
                    color: var(--text-gray-500);
                    margin-left: 0.25rem;
                  "
                  >Keep Rules</span
                >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  style="
                    margin-left: 0.25rem;
                    color: var(--text-gray-500);
                    width: 16px;
                    height: 16px;
                  "
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M19 9l-7 7-7-7"
                  />
                </svg>
              </button>
              <div
                id="group-by-dropdown"
                class="dropdown-menu right-0 hidden"
                style="min-width: 150px"
              >
                <div class="dropdown-item" data-value="modules">Keep Rules</div>
                <div class="dropdown-item" data-value="packages">
                  Keep Rule Files
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div id="report-view" class="container-custom">
      <main>
        <div class="breadcrumb-row" style="margin-bottom: 2rem; height: auto">
          <div id="flat-breadcrumbs"></div>
        </div>
        <div
          id="stats-container"
          style="display: flex; gap: 1rem; padding: 0rem; margin-bottom: 1rem"
        >
          <!-- Shrinking Card -->
          <div
            class="stat-card"
            style="
              background: #ffffff;
              padding: 1rem;
              border-radius: 0.5rem;
              border: 1px solid var(--border-color);
              flex: 1;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.5rem;
              "
            >
              <div
                style="
                  color: var(--text-muted);
                  font-size: 0.75rem;
                  text-transform: uppercase;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  gap: 0.25rem;
                "
              >
                Shrinking
                <button
                  type="button"
                  class="tooltip-icon"
                  data-tooltip="Percentage of the app's code base that is subject to removal if unused. The reported score is from before optimization passes have occurred. When R8 performs shrinking, it reduces the overall size of your application by identifying and eliminating code and resources that are not actually being used, ensuring your final build is as lean as possible."
                  aria-label="Percentage of the app's code base that is subject to removal if unused. The reported score is from before optimization passes have occurred. When R8 performs shrinking, it reduces the overall size of your application by identifying and eliminating code and resources that are not actually being used, ensuring your final build is as lean as possible."
                >
                  ?
                </button>
              </div>
              <div
                id="card-total-shrinking"
                style="
                  font-size: 1rem;
                  font-weight: 700;
                  color: var(--text-yellow-600);
                "
              >
                --
              </div>
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.5rem">
              <!-- Classes -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Classes</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-shrinking-classes-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-shrinking-classes-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Fields -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Fields</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-shrinking-fields-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-shrinking-fields-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Methods -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Methods</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-shrinking-methods-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-shrinking-methods-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
            </div>
          </div>
          <!-- Optimization Card -->
          <div
            class="stat-card"
            style="
              background: #ffffff;
              padding: 1rem;
              border-radius: 0.5rem;
              border: 1px solid var(--border-color);
              flex: 1;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.5rem;
              "
            >
              <div
                style="
                  color: var(--text-muted);
                  font-size: 0.75rem;
                  text-transform: uppercase;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  gap: 0.25rem;
                "
              >
                Optimization
                <button
                  type="button"
                  class="tooltip-icon"
                  data-tooltip="Percentage of the app's code base that is subject to optimization, such as method inlining and class merging. The reported score is from before optimization passes have occurred. Optimizations improve the performance and size of the app."
                  aria-label="Percentage of the app's code base that is subject to optimization, such as method inlining and class merging. The reported score is from before optimization passes have occurred. Optimizations improve the performance and size of the app."
                >
                  ?
                </button>
              </div>
              <div
                id="card-total-optimization"
                style="
                  font-size: 1rem;
                  font-weight: 700;
                  color: var(--text-yellow-600);
                "
              >
                --
              </div>
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.5rem">
              <!-- Classes -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Classes</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-optimization-classes-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-optimization-classes-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Fields -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Fields</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-optimization-fields-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-optimization-fields-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Methods -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Methods</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-optimization-methods-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-optimization-methods-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
            </div>
          </div>
          <!-- Obfuscation Card -->
          <div
            class="stat-card"
            style="
              background: #ffffff;
              padding: 1rem;
              border-radius: 0.5rem;
              border: 1px solid var(--border-color);
              flex: 1;
            "
          >
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 0.5rem;
              "
            >
              <div
                style="
                  color: var(--text-muted);
                  font-size: 0.75rem;
                  text-transform: uppercase;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  gap: 0.25rem;
                "
              >
                Obfuscation
                <button
                  type="button"
                  class="tooltip-icon"
                  data-tooltip="Percentage of the app's code base that is subject to symbol renaming. The reported score is from before optimization passes have occurred. By tracking this score, you can gauge the effectiveness of R8's obfuscation, which reduces your application's metadata footprint to save memory."
                  aria-label="Percentage of the app's code base that is subject to symbol renaming. The reported score is from before optimization passes have occurred. By tracking this score, you can gauge the effectiveness of R8's obfuscation, which reduces your application's metadata footprint to save memory."
                >
                  ?
                </button>
              </div>
              <div
                id="card-total-obfuscation"
                style="
                  font-size: 1rem;
                  font-weight: 700;
                  color: var(--text-yellow-600);
                "
              >
                --
              </div>
            </div>
            <div style="display: flex; flex-direction: column; gap: 0.5rem">
              <!-- Classes -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Classes</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-obfuscation-classes-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-obfuscation-classes-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Fields -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Fields</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-obfuscation-fields-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-obfuscation-fields-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
              <!-- Methods -->
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  font-size: 0.75rem;
                "
              >
                <span style="color: var(--text-gray-500); width: 60px"
                  >Methods</span
                >
                <div
                  style="
                    flex: 1;
                    height: 4px;
                    background: var(--bg-hover);
                    border-radius: 2px;
                    margin: 0 1rem;
                  "
                >
                  <div
                    id="card-obfuscation-methods-bar"
                    style="
                      height: 100%;
                      background: var(--text-yellow-600);
                      border-radius: 2px;
                      width: 0%;
                    "
                  ></div>
                </div>
                <span
                  id="card-obfuscation-methods-val"
                  style="color: var(--text-gray-900); font-weight: 500"
                  >--</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          class="breadcrumb-row"
          style="
            display: flex;
            flex-direction: column;
            align-items: start;
            margin-bottom: 1.5rem;
            gap: 0.25rem;
            height: auto;
          "
        >
          <span
            class="breadcrumb-text"
            style="
              font-size: 0.875rem;
              font-weight: 600;
              color: var(--text-gray-900);
            "
            >Keep Rule Analysis</span
          >
          <div
            style="
              font-size: 0.75rem;
              color: var(--text-gray-500);
              font-weight: 400;
              text-transform: none;
              letter-spacing: normal;
              line-height: 1.4;
              padding: 0rem 0.5rem;
            "
          >
            Keep rules prevent R8 from optimizing designated code segments.
            Review the list below to identify and refine overly broad rules,
            which will directly improve overall application performance.
          </div>
        </div>
        <div class="table-container">
          <table id="main-table">
            <thead id="table-headers"></thead>
            <tbody id="table-data"></tbody>
          </table>
        </div>
      </main>
    </div>
    <div id="details-view" class="container-custom" style="display: none">
      <main>
        <div class="breadcrumb-row" style="margin-bottom: 2rem; height: auto">
          <div id="details-breadcrumbs"></div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            min-height: 0;
            overflow-y: auto;
            padding-right: 0.5rem;
          "
        >
          <div class="table-container" style="flex: none">
            <div
              style="
                padding: 0.75rem 1rem;
                border-bottom: 1px solid var(--border-color);
                background-color: var(--bg-subtle);
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <h2
                style="
                  font-size: 0.875rem;
                  font-weight: 500;
                  color: var(--text-gray-900);
                "
              >
                Keep Rule
              </h2>
            </div>
            <div id="details-rule-container" style="padding: 1rem">
              <!-- Content rendered by JS -->
            </div>
          </div>
          <div class="table-container" style="flex: none">
            <div
              style="
                padding: 0.75rem 1rem;
                border-bottom: 1px solid var(--border-color);
                background-color: var(--bg-subtle);
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <h2
                style="
                  font-size: 0.875rem;
                  font-weight: 500;
                  color: var(--text-gray-900);
                "
              >
                Impact
              </h2>
            </div>
            <div id="details-impact-container" style="padding: 1rem">
              <!-- Content rendered by JS -->
            </div>
          </div>
          <div id="related-rules-container" style="flex: none">
            <!-- Content rendered by JS -->
          </div>
          <div
            style="
              flex: 1;
              display: grid;
              grid-template-columns: 1fr 1fr 1fr;
              gap: 1.5rem;
              min-height: 400px;
              overflow: hidden;
            "
          >
            <div
              class="table-container"
              style="display: flex; flex-direction: column"
            >
              <div
                style="
                  padding: 0.75rem 1rem;
                  border-bottom: 1px solid var(--border-color);
                  background-color: var(--bg-subtle);
                  display: flex;
                  flex-direction: column;
                  gap: 0.5rem;
                "
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                  "
                >
                  <div>
                    <span
                      style="
                        font-size: 0.875rem;
                        font-weight: 600;
                        color: var(--text-gray-900);
                      "
                      >Kept Classes</span
                    >
                    <span
                      style="
                        color: var(--text-gray-500);
                        font-size: 0.75rem;
                        margin-left: 0.25rem;
                      "
                      id="details-classes-count"
                      >· 0</span
                    >
                  </div>
                  <button
                    class="icon-btn search-toggle-btn"
                    data-target="classes"
                    style="color: var(--text-muted); padding: 2px"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  id="classes-search-container"
                  style="display: none; width: 100%"
                >
                  <input
                    type="text"
                    id="classes-search-input"
                    placeholder="Search kept classes..."
                    style="
                      width: 100%;
                      padding: 0.25rem 0.5rem;
                      border: 1px solid var(--border-color);
                      border-radius: 4px;
                      font-size: 0.75rem;
                      outline: none;
                      background-color: var(--bg-body);
                      color: var(--text-main);
                    "
                  />
                </div>
              </div>
              <div
                id="details-classes-content"
                style="flex: 1; overflow-y: auto; padding: 0.5rem"
              ></div>
            </div>
            <div
              class="table-container"
              style="display: flex; flex-direction: column"
            >
              <div
                style="
                  padding: 0.75rem 1rem;
                  border-bottom: 1px solid var(--border-color);
                  background-color: var(--bg-subtle);
                  display: flex;
                  flex-direction: column;
                  gap: 0.5rem;
                "
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                  "
                >
                  <div>
                    <span
                      style="
                        font-size: 0.875rem;
                        font-weight: 600;
                        color: var(--text-gray-900);
                      "
                      >Kept Fields</span
                    >
                    <span
                      style="
                        color: var(--text-gray-500);
                        font-size: 0.75rem;
                        margin-left: 0.25rem;
                      "
                      id="details-fields-count"
                      >· 0</span
                    >
                  </div>
                  <button
                    class="icon-btn search-toggle-btn"
                    data-target="fields"
                    style="color: var(--text-muted); padding: 2px"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  id="fields-search-container"
                  style="display: none; width: 100%"
                >
                  <input
                    type="text"
                    id="fields-search-input"
                    placeholder="Search kept fields..."
                    style="
                      width: 100%;
                      padding: 0.25rem 0.5rem;
                      border: 1px solid var(--border-color);
                      border-radius: 4px;
                      font-size: 0.75rem;
                      outline: none;
                      background-color: var(--bg-body);
                      color: var(--text-main);
                    "
                  />
                </div>
              </div>
              <div
                id="details-fields-content"
                style="flex: 1; overflow-y: auto; padding: 0.5rem"
              ></div>
            </div>
            <div
              class="table-container"
              style="display: flex; flex-direction: column"
            >
              <div
                style="
                  padding: 0.75rem 1rem;
                  border-bottom: 1px solid var(--border-color);
                  background-color: var(--bg-subtle);
                  display: flex;
                  flex-direction: column;
                  gap: 0.5rem;
                "
              >
                <div
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                  "
                >
                  <div>
                    <span
                      style="
                        font-size: 0.875rem;
                        font-weight: 600;
                        color: var(--text-gray-900);
                      "
                      >Kept Methods</span
                    >
                    <span
                      style="
                        color: var(--text-gray-500);
                        font-size: 0.75rem;
                        margin-left: 0.25rem;
                      "
                      id="details-methods-count"
                      >· 0</span
                    >
                  </div>
                  <button
                    class="icon-btn search-toggle-btn"
                    data-target="methods"
                    style="color: var(--text-muted); padding: 2px"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      stroke-width="2"
                    >
                      <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                      />
                    </svg>
                  </button>
                </div>
                <div
                  id="methods-search-container"
                  style="display: none; width: 100%"
                >
                  <input
                    type="text"
                    id="methods-search-input"
                    placeholder="Search kept methods..."
                    style="
                      width: 100%;
                      padding: 0.25rem 0.5rem;
                      border: 1px solid var(--border-color);
                      border-radius: 4px;
                      font-size: 0.75rem;
                      outline: none;
                      background-color: var(--bg-body);
                      color: var(--text-main);
                    "
                  />
                </div>
              </div>
              <div
                id="details-methods-content"
                style="flex: 1; overflow-y: auto; padding: 0.5rem"
              ></div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <div id="file-details-view" class="container-custom" style="display: none">
      <main>
        <div class="breadcrumb-row" style="margin-bottom: 2rem; height: auto">
          <div id="file-details-breadcrumbs"></div>
        </div>
        <div
          style="
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            min-height: 0;
            overflow-y: auto;
            padding-right: 0.5rem;
          "
        >
          <div class="table-container" style="flex: none">
            <div
              style="
                padding: 1rem;
                border-bottom: 1px solid var(--border-color);
                background-color: var(--bg-gray-50);
              "
            >
              <h2 style="font-size: 1rem; font-weight: 700">Impact</h2>
            </div>
            <table style="width: 100%; border-collapse: collapse">
              <thead>
                <tr>
                  <th
                    class="text-center text-xs font-medium text-gray-500 border-b border-gray-200"
                    style="padding: 0.75rem 0.5rem; text-transform: uppercase"
                  >
                    Kept Classes
                  </th>
                  <th
                    class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200"
                    style="padding: 0.75rem 0.5rem; text-transform: uppercase"
                  >
                    Kept fields
                  </th>
                  <th
                    class="text-center text-xs font-medium text-gray-500 border-l border-b border-gray-200"
                    style="padding: 0.75rem 0.5rem; text-transform: uppercase"
                  >
                    Kept methods
                  </th>
                </tr>
              </thead>
              <tbody id="file-details-impact-body"></tbody>
            </table>
          </div>
          <div
            class="table-container"
            style="flex: 1; display: flex; flex-direction: column"
          >
            <div
              style="
                padding: 1rem;
                border-bottom: 1px solid var(--border-color);
                background-color: var(--bg-gray-50);
              "
            >
              <h2 style="font-size: 1rem; font-weight: 700">Keep Rules</h2>
            </div>
            <div style="flex: 1; overflow-y: auto">
              <table style="width: 100%; border-collapse: collapse">
                <thead id="file-details-rules-header">
                  <tr>
                    <th
                      rowspan="2"
                      class="text-left bg-gray-50 z-30"
                      style="
                        padding: 1rem;
                        width: 600px;
                        min-width: 600px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Rule
                    </th>
                    <th
                      colspan="4"
                      class="text-center border-l border-gray-200 bg-gray-50"
                      style="
                        padding: 0.5rem;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Kept Items
                      <span
                        style="
                          color: var(--text-muted);
                          text-transform: none;
                          font-weight: 500;
                        "
                        >Higher is worse</span
                      >
                    </th>
                    <th
                      rowspan="2"
                      colspan="3"
                      class="text-center border-l border-gray-200 bg-gray-50"
                      style="
                        padding: 0.5rem;
                        width: 150px;
                        min-width: 150px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Steps blocked by rule
                    </th>
                  </tr>
                  <tr>
                    <th
                      class="text-center text-xs font-medium text-gray-500 border-l border-gray-200"
                      style="
                        padding: 0.5rem;
                        width: 100px;
                        min-width: 100px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Total
                    </th>
                    <th
                      class="text-center text-xs font-medium text-gray-500 border-l border-gray-200"
                      style="
                        padding: 0.5rem;
                        width: 100px;
                        min-width: 100px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Classes
                    </th>
                    <th
                      class="text-center text-xs font-medium text-gray-500 border-l border-gray-200"
                      style="
                        padding: 0.5rem;
                        width: 100px;
                        min-width: 100px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Fields
                    </th>
                    <th
                      class="text-center text-xs font-medium text-gray-500 border-l border-gray-200"
                      style="
                        padding: 0.5rem;
                        width: 100px;
                        min-width: 100px;
                        border-bottom: 1px solid var(--border-color);
                      "
                    >
                      Methods
                    </th>
                  </tr>
                </thead>
                <tbody id="file-details-rules-body"></tbody>
              </table>
            </div>
          </div>
        </div>
      </main>
    </div>
    <script id="keepradius-proto" type="text/plain"></script>
    <script id="keepradius-data" type="application/octet-stream"></script>
    <script src="main.js"></script>
    <script src="utils.js"></script>
    <!-- Help Hub FAB -->
    <button id="help-hub-fab" class="fab">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
      <span>Help</span>
    </button>
    <!-- Help Hub Side Panel -->
    <div id="help-hub-panel" class="side-panel">
      <div class="side-panel-header">
        <div class="header-left">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
          <h2>Help</h2>
        </div>
        <button id="close-help-hub" class="icon-btn">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="20"
            height="20"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
      <div class="side-panel-content">
        <!-- Introduction -->
        <div class="help-section">
          <div class="help-section-title">Introduction to Table Data</div>
          <p>
            R8 is Android's code shrinker, optimizer, and obfuscator. This
            report shows how your keep rules constrain R8 — every kept item is
            one R8 couldn't shrink, optimize, or obfuscate. Higher percentages
            mean more of your app is locked in place.
          </p>
        </div>
        <div class="divider"></div>
        <!-- Legend -->
        <div class="help-section">
          <div class="help-section-title">Legend</div>
          <div class="legend-list">
            <!-- Obfuscation Score -->
            <div class="legend-item" data-topic="obfuscation-score">
              <div class="legend-item-header">
                <span class="legend-item-title">Obfuscation Score</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                % of classes/fields/methods R8 was free to rename. Higher =
                better.
              </div>
            </div>
            <!-- Optimization Score -->
            <div class="legend-item" data-topic="optimization-score">
              <div class="legend-item-header">
                <span class="legend-item-title">Optimization Score</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                % of classes/fields/methods R8 was free to optimize. Higher =
                better.
              </div>
            </div>
            <!-- Shrinking Score -->
            <div class="legend-item" data-topic="shrinking-score">
              <div class="legend-item-header">
                <span class="legend-item-title">Shrinking Score</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                % of classes/fields/methods R8 was free to remove. Higher =
                better.
              </div>
            </div>
            <!-- Kept Items -->
            <div class="legend-item" data-topic="kept-items">
              <div class="legend-item-header">
                <span class="legend-item-title"
                  >Kept Items (higher is worse)</span
                >
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Total number of items kept by this rule. Higher numbers indicate
                a larger impact on APK size.
              </div>
            </div>
            <!-- Blocked By Rule -->
            <div class="legend-item" data-topic="blocked-by-rule">
              <div class="legend-item-header">
                <span class="legend-item-title">Blocked By Rule</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Specific actions blocked by this rule (e.g., Optimization,
                Shrinking).
              </div>
            </div>
            <!-- Identical Rules -->
            <div class="legend-item" data-topic="identical-rules">
              <div class="legend-item-header">
                <span class="legend-item-title">Identical Rules</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Rules that match the exact same set of items.
              </div>
            </div>
            <!-- Subsumed By -->
            <div class="legend-item" data-topic="subsumed-by">
              <div class="legend-item-header">
                <span class="legend-item-title">Subsumed By</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Rules that are covered by a broader rule.
              </div>
            </div>
            <!-- Unused Rules -->
            <div class="legend-item" data-topic="unused-rules">
              <div class="legend-item-header">
                <span class="legend-item-title">Unused Rules</span>
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Rules that do not match any items in the application.
              </div>
            </div>
            <!-- Lenses -->
            <div class="legend-item" data-topic="lenses">
              <div class="legend-item-header">
                <span class="legend-item-title"
                  >Lenses (All / Identical / Subsumed / Unused)</span
                >
                <svg
                  class="legend-item-arrow"
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
              <div class="legend-item-content">
                Different perspectives to view the rules.
              </div>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <!-- Documentation -->
        <div class="help-section">
          <div class="help-section-title">Documentation</div>
          <div class="doc-list">
            <a
              href="https://r8.googlesource.com/r8/"
              target="_blank"
              class="doc-card"
            >
              <div class="doc-card-info">
                <span class="doc-card-title">R8 keep rule reference</span>
                <span class="doc-card-domain">developer.android.com</span>
                <span class="doc-card-desc"
                  >Official guide to shrinking, obfuscation, and optimization
                  with R8.</span
                >
              </div>
              <svg
                class="doc-card-icon"
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <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"
                />
              </svg>
            </a>
            <a
              href="https://developer.android.com/studio/build/shrink-code"
              target="_blank"
              class="doc-card"
            >
              <div class="doc-card-info">
                <span class="doc-card-title">Reduce APK size</span>
                <span class="doc-card-domain">developer.android.com</span>
                <span class="doc-card-desc"
                  >Patterns and tools for minimizing the footprint of your
                  release build.</span
                >
              </div>
              <svg
                class="doc-card-icon"
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <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"
                />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>