<!doctype html>
<html lang="en">
  <head>
    <script>
      document.write('<base href="' + location.href.replace(/\/?$/, "/") + '">');
    </script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>RAJA Admin</title>
    <link rel="stylesheet" href="static/admin.css" />
  </head>
  <body>
    <header class="app-header">
      <div class="brand-block">
        <div class="brand-kicker">Resource Authorization JWT Authority</div>
        <div class="brand">RAJA Admin</div>
      </div>

      <label class="admin-key-wrap" for="admin-key">
        <span class="header-label">Admin key</span>
        <div class="key-input-row">
          <input id="admin-key" type="password" autocomplete="off" placeholder="Enter RAJA_ADMIN_KEY" />
          <button type="button" id="admin-key-toggle" class="icon-button" aria-label="Toggle admin key visibility">Show</button>
          <span id="auth-lock" class="auth-lock unknown" title="Not verified" aria-label="Not verified"></span>
        </div>
      </label>

      <button type="button" class="health-chip" id="header-health-chip">
        <span class="dot" id="header-health-dot" aria-hidden="true"></span>
        <span id="header-health-text">Admin key required</span>
      </button>

      <label class="principal-wrap" for="global-principal">
        <span class="header-label">Principal filter</span>
        <select id="global-principal">
          <option value="">Loading principals...</option>
        </select>
      </label>
    </header>

    <div class="admin-auth-error" id="admin-auth-error" hidden>Invalid or missing admin key.</div>

    <main class="page-shell">
      <section class="page-intro">
        <p>
          The UI teaches the system by walking the same path the runtime takes:
          inspect the deployed domain and projects, choose a live package target,
          then run the RALE flow, failure probes, and stack diagnostics in one scroll.
        </p>
      </section>

      <section class="column-grid">
        <div class="app-column" id="column-structure">
          <div class="column-header">
            <div class="column-kicker">SageMaker resources</div>
            <h1>SageMaker Configuration</h1>
            <p>Domain identity, linked SageMaker projects, and current project membership.</p>
          </div>

          <details class="section-card" id="section-datazone">
            <summary>
              <span>Domain</span>
              <span class="summary-meta" id="datazone-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <div class="actions">
                <button type="button" id="structure-refresh">Refresh</button>
              </div>
              <div class="status-rows" id="datazone-status-rows"></div>
            </div>
          </details>

          <details class="section-card" id="section-projects">
            <summary>
              <span>Projects</span>
              <span class="summary-meta" id="projects-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <div class="project-grid">
                <section class="project-card" data-tier="owner">
                  <div class="project-card-head">
                    <div>
                      <h3>Owner</h3>
                      <div class="project-card-meta" id="project-owner-meta">Not loaded</div>
                    </div>
                    <a id="project-owner-link" target="_blank" rel="noopener">Open in SageMaker</a>
                  </div>
                  <p class="project-scope">Granted scopes: <span id="project-owner-scope">*:*:*</span></p>
                  <table>
                    <thead>
                      <tr>
                        <th>Principal ARN</th>
                        <th>Last TAJ issued</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody id="project-owner-body"></tbody>
                  </table>
                  <form class="project-principal-form add-member-row" data-project-key="owner">
                    <input
                      name="principal"
                      placeholder="arn:aws:iam::123456789012:user/example"
                    />
                    <button type="submit">Add to project</button>
                  </form>
                  <div class="inline-status" data-role="project-membership-status"></div>
                </section>

                <section class="project-card" data-project-key="users">
                  <div class="project-card-head">
                    <div>
                      <h3>Users</h3>
                      <div class="project-card-meta" id="project-users-meta">Not loaded</div>
                    </div>
                    <a id="project-users-link" target="_blank" rel="noopener">Open in SageMaker</a>
                  </div>
                  <p class="project-scope">Granted scopes: <span id="project-users-scope">S3Object:*:*</span></p>
                  <table>
                    <thead>
                      <tr>
                        <th>Principal ARN</th>
                        <th>Last TAJ issued</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody id="project-users-body"></tbody>
                  </table>
                  <form class="project-principal-form add-member-row" data-project-key="users">
                    <input
                      name="principal"
                      placeholder="arn:aws:iam::123456789012:user/example"
                    />
                    <button type="submit">Add to project</button>
                  </form>
                  <div class="inline-status" data-role="project-membership-status"></div>
                </section>

                <section class="project-card" data-project-key="guests">
                  <div class="project-card-head">
                    <div>
                      <h3>Guests</h3>
                      <div class="project-card-meta" id="project-guests-meta">Not loaded</div>
                    </div>
                    <a id="project-guests-link" target="_blank" rel="noopener">Open in SageMaker</a>
                  </div>
                  <p class="project-scope">
                    Granted scopes: <span id="project-guests-scope">S3Object:*:s3:GetObject</span>
                  </p>
                  <table>
                    <thead>
                      <tr>
                        <th>Principal ARN</th>
                        <th>Last TAJ issued</th>
                        <th></th>
                      </tr>
                    </thead>
                    <tbody id="project-guests-body"></tbody>
                  </table>
                  <form class="project-principal-form add-member-row" data-project-key="guests">
                    <input
                      name="principal"
                      placeholder="arn:aws:iam::123456789012:user/example"
                    />
                    <button type="submit">Add to project</button>
                  </form>
                  <div class="inline-status" data-role="project-membership-status"></div>
                </section>
              </div>
            </div>
          </details>

          <details class="section-card" id="section-subscriptions">
            <summary>
              <span>Subscriptions</span>
              <span class="summary-meta" id="subscriptions-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <table>
                <thead>
                  <tr>
                    <th>Package</th>
                    <th>Owner</th>
                    <th>Consumer</th>
                    <th>Status</th>
                    <th>ID</th>
                  </tr>
                </thead>
                <tbody id="subscriptions-body"></tbody>
              </table>
            </div>
          </details>

          <details class="section-card" id="section-console">
            <summary>
              <span>AWS Console</span>
              <span class="summary-meta" id="console-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <ul class="about-list" id="console-links-list"></ul>
            </div>
          </details>

          <details class="section-card about-card" id="section-about">
            <summary>
              <span>About</span>
              <span class="summary-meta">Reading list</span>
            </summary>
            <div class="section-body">
              <ul class="about-list">
                <li><a href="https://ihack.us/2026/01/09/crowning-raj-how-resource-access-jwts-refactor-authorization-joyfully/" target="_blank" rel="noopener">Crowning RAJ</a></li>
                <li><a href="https://ihack.us/2026/01/12/sda-strictly-disciplining-authorization/" target="_blank" rel="noopener">SDA: Strictly Disciplining Authorization</a></li>
                <li><a href="https://ihack.us/2026/01/20/iam-as-maharaja-how-raj-redeems-the-original-sin-of-cloud-authorization/" target="_blank" rel="noopener">IAM as Maharaja</a></li>
                <li><a href="https://ihack.us/2026/01/20/rajee-vs-iam-the-petty-life-of-secrets/" target="_blank" rel="noopener">RAJEE vs IAM</a></li>
                <li><a href="https://ihack.us/2026/01/21/rajee-against-the-machine-snow-crashing-manifest-authority/" target="_blank" rel="noopener">RAJEE Against the Machine</a></li>
                <li><a href="https://ihack.us/2026/01/23/taj-mahalo-logical-s3-via-translated-access-jwts/" target="_blank" rel="noopener">TAJ Mahalo</a></li>
                <li><a href="https://ihack.us/2026/01/23/the-boy-who-ate-the-menu-raj-taj-as-software-defined-addressing-for-universal-storage-locators/" target="_blank" rel="noopener">The Boy Who Ate The Menu</a></li>
                <li><a href="https://ihack.us/2026/01/24/demoting-denotational-semantics-a-raj-pyle-on/" target="_blank" rel="noopener">Demoting Denotational Semantics</a></li>
                <li><a href="https://ihack.us/2026/02/05/rale-raj-authorizing-logical-endpoint/" target="_blank" rel="noopener">RALE: RAJ-Authorizing Logical Endpoint</a></li>
              </ul>
            </div>
          </details>
        </div>

        <div class="app-column" id="column-execution">
          <div class="column-header">
            <div class="column-kicker">Live system</div>
            <h1>RAJ Execution</h1>
            <p>Choose a package target, exercise the flow, then inspect live health.</p>
          </div>

          <details class="section-card" id="section-listings">
            <summary>
              <span>Package Listings</span>
              <span class="summary-meta" id="packages-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <table>
                <thead>
                  <tr>
                    <th>Package</th>
                    <th>Listing ID</th>
                    <th>Owner project</th>
                    <th>Asset type</th>
                    <th>Subscriptions</th>
                    <th>Use in flow</th>
                  </tr>
                </thead>
                <tbody id="packages-body"></tbody>
              </table>
            </div>
          </details>

          <details class="section-card" id="section-rale">
            <summary>
              <span>RALE Flow</span>
              <span class="summary-meta" id="rale-summary-meta">Reset</span>
            </summary>
            <div class="section-body">
              <div class="step-card">
                <div class="step-heading">Step 1. Select</div>
                <div class="field-grid">
                  <label class="field-stack">Package
                    <select id="rale-package-select">
                      <option value="">Choose a package</option>
                    </select>
                  </label>
                  <label class="field-stack">File
                    <select id="rale-file-select" disabled>
                      <option value="">Choose a package first</option>
                    </select>
                  </label>
                </div>
                <label class="field-stack" for="rale-usl">USL</label>
                <input id="rale-usl" readonly />
                <div id="rale-select-status" class="inline-status"></div>
                <div class="mini-table" id="rale-file-list"></div>
              </div>

              <div class="step-card">
                <div class="step-heading">Step 2. Authorize</div>
                <form id="rale-authorize-form">
                  <div class="field-grid">
                    <label class="field-stack">Principal
                      <input id="rale-principal" />
                    </label>
                    <div class="field-stack lock-note">
                      <span>Source</span>
                      <div id="rale-principal-note">Prefilled from the global selector.</div>
                    </div>
                  </div>
                  <div class="actions">
                    <button type="submit" id="rale-authorize-button" disabled>Request TAJ</button>
                    <button type="button" class="secondary" id="rale-reset">Reset</button>
                  </div>
                </form>
                <div id="rale-authorize-status" class="status-banner">Select a package and file first.</div>
                <div class="claims-grid" id="rale-claims"></div>
              </div>

              <div class="step-card">
                <div class="step-heading">Step 3. Deliver</div>
                <div class="actions">
                  <button type="button" id="rale-deliver-button" disabled>Fetch via RALE Router</button>
                </div>
                <div id="rale-deliver-status" class="status-banner">Authorize first to unlock delivery.</div>
                <div class="deliver-grid">
                  <div>
                    <h3>Diagnostics</h3>
                    <pre id="rale-deliver-diagnostics">No delivery attempted yet.</pre>
                  </div>
                  <div>
                    <h3>Content preview</h3>
                    <pre id="rale-deliver-preview">No content yet.</pre>
                  </div>
                </div>
              </div>
            </div>
          </details>

          <details class="section-card" id="section-failures">
            <summary>
              <span>Failure Tests</span>
              <span class="summary-meta" id="failures-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <div class="failure-toolbar">
                <label class="field-stack">Category
                  <select id="failure-category-select">
                    <option value="">Choose a category</option>
                  </select>
                </label>
                <button type="button" class="secondary" id="failure-run-category">Run category</button>
                <button type="button" class="secondary" id="failure-run-all">Run all</button>
                <button type="button" class="secondary" id="failure-export-results" disabled>Export JSON</button>
              </div>
              <div id="failure-summary" class="inline-status"></div>
              <div class="failure-list" id="failure-list"></div>
            </div>
          </details>

          <details class="section-card" id="section-stack">
            <summary>
              <span>Stack Health</span>
              <span class="summary-meta" id="stack-summary-meta">Not loaded</span>
            </summary>
            <div class="section-body">
              <div class="status-rows" id="stack-status-rows"></div>
            </div>
          </details>

          <details class="section-card" id="section-rotation">
            <summary>
              <span>Secret Rotation</span>
              <span class="summary-meta">Rotate and invalidate all tokens</span>
            </summary>
            <div class="section-body">
              <div class="step-card">
                <div class="step-heading">Hard revocation</div>
                <div class="actions">
                  <button type="button" id="rotate-secret">Rotate secret</button>
                </div>
                <ul class="timeline" id="rotate-timeline"></ul>
                <pre id="revoke-hard-output">No rotation started.</pre>
                <p class="inline-note">
                  Per-token revocation is unsupported by design because deny-lists would
                  reintroduce mutable runtime state into enforcement.
                </p>
              </div>
            </div>
          </details>
        </div>
      </section>

    </main>

    <script src="static/admin.js" type="module"></script>
  </body>
</html>
