npm - @sanctuary-framework/mcp-server - Versions diffs - 0.5.4 → 0.5.6 - Mend

@sanctuary-framework/mcp-server 0.5.4 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/index.cjs CHANGED Viewed

@@ -231,7 +231,7 @@ function defaultConfig() {
       }
     },
     disclosure: {
-      proof_system: "commitment-only",
+      proof_system: "schnorr-pedersen",
       default_policy: "minimum-necessary"
     },
     reputation: {
@@ -345,7 +345,7 @@ function validateConfig(config) {
       `Unimplemented config value: execution.environment = "${config.execution.environment}". Only ${[...implementedEnvironment].map((v) => `"${v}"`).join(", ")} are currently implemented. Using an unimplemented environment would silently degrade security.`
     );
   }
-  const implementedProofSystem = /* @__PURE__ */ new Set(["commitment-only"]);
+  const implementedProofSystem = /* @__PURE__ */ new Set(["schnorr-pedersen", "commitment-only"]);
   if (!implementedProofSystem.has(config.disclosure.proof_system)) {
     errors.push(
       `Unimplemented config value: disclosure.proof_system = "${config.disclosure.proof_system}". Only ${[...implementedProofSystem].map((v) => `"${v}"`).join(", ")} is currently implemented. Using an unimplemented proof system would silently degrade security.`
@@ -3638,6 +3638,8 @@ var DEFAULT_POLICY = {
     "handshake_respond",
     "handshake_complete",
     "handshake_status",
+    "handshake_exchange",
+    "handshake_verify_attestation",
     "reputation_query_weighted",
     "federation_peers",
     "federation_trust_evaluate",
@@ -3807,6 +3809,8 @@ tier3_always_allow:
   - handshake_respond
   - handshake_complete
   - handshake_status
+  - handshake_exchange
+  - handshake_verify_attestation
   - reputation_query_weighted
   - federation_peers
   - federation_trust_evaluate
@@ -4068,174 +4072,255 @@ function generateLoginHTML(options) {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Sanctuary \u2014 Login</title>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #0d1117;
-    --surface: #161b22;
-    --border: #30363d;
-    --text-primary: #e6edf3;
-    --text-secondary: #8b949e;
-    --green: #3fb950;
-    --red: #f85149;
-    --blue: #58a6ff;
-    --mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --radius: 6px;
-  }
-  * { box-sizing: border-box; margin: 0; padding: 0; }
-  html, body { width: 100%; height: 100%; }
-  body {
-    font-family: var(--sans);
-    background: var(--bg);
-    color: var(--text-primary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .login-container {
-    width: 100%;
-    max-width: 400px;
-    padding: 40px 32px;
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-  }
-  .login-logo {
-    text-align: center;
-    font-size: 20px;
-    font-weight: 700;
-    letter-spacing: -0.5px;
-    margin-bottom: 8px;
-  }
-  .login-logo span { color: var(--blue); }
-  .login-version {
-    text-align: center;
-    font-size: 11px;
-    color: var(--text-secondary);
-    font-family: var(--mono);
-    margin-bottom: 32px;
-  }
-  .login-label {
-    display: block;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin-bottom: 8px;
-  }
-  .login-input {
-    width: 100%;
-    padding: 10px 14px;
-    background: var(--bg);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    color: var(--text-primary);
-    font-family: var(--mono);
-    font-size: 14px;
-    outline: none;
-    transition: border-color 0.15s;
-  }
-  .login-input:focus { border-color: var(--blue); }
-  .login-input::placeholder { color: var(--text-secondary); opacity: 0.5; }
-  .login-btn {
-    width: 100%;
-    margin-top: 20px;
-    padding: 10px;
-    background: var(--blue);
-    color: var(--bg);
-    border: none;
-    border-radius: var(--radius);
-    font-size: 14px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: opacity 0.15s;
-    font-family: var(--sans);
-  }
-  .login-btn:hover { opacity: 0.9; }
-  .login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-  .login-error {
-    margin-top: 16px;
-    padding: 10px 14px;
-    background: rgba(248, 81, 73, 0.1);
-    border: 1px solid var(--red);
-    border-radius: var(--radius);
-    font-size: 12px;
-    color: var(--red);
-    display: none;
-  }
-  .login-hint {
-    margin-top: 24px;
-    padding-top: 16px;
-    border-top: 1px solid var(--border);
-    font-size: 11px;
-    color: var(--text-secondary);
-    line-height: 1.5;
-  }
-  .login-hint code {
-    font-family: var(--mono);
-    background: var(--bg);
-    padding: 1px 4px;
-    border-radius: 3px;
-    font-size: 10px;
-  }
-</style>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sanctuary Dashboard</title>
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --border: #30363d;
+      --text-primary: #e6edf3;
+      --text-secondary: #8b949e;
+      --green: #3fb950;
+      --amber: #d29922;
+      --red: #f85149;
+      --blue: #58a6ff;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      background-color: var(--bg);
+      color: var(--text-primary);
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .login-container {
+      width: 100%;
+      max-width: 400px;
+      padding: 20px;
+    }
+    .login-card {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 40px 32px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    }
+    .login-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 32px;
+    }
+    .logo {
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--blue);
+    }
+    .logo-text {
+      display: flex;
+      flex-direction: column;
+    }
+    .logo-text .title {
+      font-size: 18px;
+      font-weight: 600;
+      letter-spacing: -0.5px;
+    }
+    .logo-text .version {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-top: 2px;
+    }
+    .form-group {
+      margin-bottom: 24px;
+    }
+    label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 8px;
+      color: var(--text-primary);
+    }
+    input[type="text"],
+    input[type="password"] {
+      width: 100%;
+      padding: 10px 12px;
+      background-color: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: 'JetBrains Mono', monospace;
+      transition: border-color 0.2s;
+    }
+    input[type="text"]:focus,
+    input[type="password"]:focus {
+      outline: none;
+      border-color: var(--blue);
+      box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
+    }
+    .error-message {
+      display: none;
+      background-color: rgba(248, 81, 73, 0.1);
+      border: 1px solid var(--red);
+      color: #ff9999;
+      padding: 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      margin-bottom: 20px;
+    }
+    .error-message.show {
+      display: block;
+    }
+    button {
+      width: 100%;
+      padding: 10px 16px;
+      background-color: var(--blue);
+      color: var(--bg);
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
+    button:hover {
+      background-color: #79c0ff;
+    }
+    button:active {
+      background-color: #4184e4;
+    }
+    button:disabled {
+      background-color: var(--text-secondary);
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    .info-text {
+      font-size: 12px;
+      color: var(--text-secondary);
+      margin-top: 16px;
+      text-align: center;
+    }
+  </style>
 </head>
 <body>
-<div class="login-container">
-  <div class="login-logo"><span>&#9670;</span> SANCTUARY</div>
-  <div class="login-version">Principal Dashboard v${options.serverVersion}</div>
-  <form id="loginForm" onsubmit="return handleLogin(event)">
-    <label class="login-label" for="tokenInput">Dashboard Auth Token</label>
-    <input class="login-input" type="password" id="tokenInput"
-           placeholder="Enter your auth token" autocomplete="off" autofocus required>
-    <button class="login-btn" type="submit" id="loginBtn">Open Dashboard</button>
-  </form>
-  <div class="login-error" id="loginError"></div>
-  <div class="login-hint">
-    Your token is set via <code>SANCTUARY_DASHBOARD_AUTH_TOKEN</code> environment variable,
-    or check your server's startup output.
+  <div class="login-container">
+    <div class="login-card">
+      <div class="login-header">
+        <div class="logo">\u25C6</div>
+        <div class="logo-text">
+          <div class="title">SANCTUARY</div>
+          <div class="version">v${options.serverVersion}</div>
+        </div>
+      </div>
+      <div id="error-message" class="error-message"></div>
+      <form id="login-form">
+        <div class="form-group">
+          <label for="auth-token">Bearer Token</label>
+          <input
+            type="text"
+            id="auth-token"
+            name="token"
+            placeholder="Paste your session token..."
+            autocomplete="off"
+            spellcheck="false"
+            required
+          />
+        </div>
+        <button type="submit" id="login-button">Open Dashboard</button>
+      </form>
+      <div class="info-text">
+        Session tokens expire after 1 hour of inactivity
+      </div>
+    </div>
   </div>
-</div>
-<script>
-async function handleLogin(e) {
-  e.preventDefault();
-  var btn = document.getElementById('loginBtn');
-  var errEl = document.getElementById('loginError');
-  var token = document.getElementById('tokenInput').value.trim();
-  if (!token) return false;
-  btn.disabled = true;
-  btn.textContent = 'Authenticating...';
-  errEl.style.display = 'none';
-  try {
-    var resp = await fetch('/auth/session', {
-      method: 'POST',
-      headers: { 'Authorization': 'Bearer ' + token }
+  <script>
+    const loginForm = document.getElementById('login-form');
+    const authTokenInput = document.getElementById('auth-token');
+    const errorMessage = document.getElementById('error-message');
+    const loginButton = document.getElementById('login-button');
+    loginForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const token = authTokenInput.value.trim();
+      if (!token) {
+        showError('Token is required');
+        return;
+      }
+      loginButton.disabled = true;
+      loginButton.textContent = 'Verifying...';
+      errorMessage.classList.remove('show');
+      try {
+        const response = await fetch('/auth/session', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': 'Bearer ' + token,
+          },
+          body: JSON.stringify({ token }),
+        });
+        if (response.ok) {
+          const data = await response.json();
+          sessionStorage.setItem('authToken', token);
+          window.location.href = '/dashboard';
+        } else if (response.status === 401) {
+          showError('Invalid token. Please check and try again.');
+        } else {
+          showError('Authentication failed. Please try again.');
+        }
+      } catch (err) {
+        showError('Connection error. Please check your network.');
+      } finally {
+        loginButton.disabled = false;
+        loginButton.textContent = 'Open Dashboard';
+      }
     });
-    if (!resp.ok) {
-      var data = await resp.json().catch(function() { return {}; });
-      throw new Error(data.error || 'Authentication failed');
-    }
-    var result = await resp.json();
-    // Store token in sessionStorage for auto-renewal inside the dashboard
-    try { sessionStorage.setItem('sanctuary_token', token); } catch(_) {}
-    // Set session cookie
-    var maxAge = result.expires_in_seconds || 300;
-    document.cookie = 'sanctuary_session=' + result.session_id +
-      '; path=/; SameSite=Strict; max-age=' + maxAge;
-    // Reload to enter the dashboard
-    window.location.reload();
-  } catch (err) {
-    errEl.textContent = err.message || 'Authentication failed. Check your token.';
-    errEl.style.display = 'block';
-    btn.disabled = false;
-    btn.textContent = 'Open Dashboard';
-  }
-  return false;
-}
-</script>
+    function showError(message) {
+      errorMessage.textContent = message;
+      errorMessage.classList.add('show');
+    }
+    authTokenInput.addEventListener('input', () => {
+      errorMessage.classList.remove('show');
+    });
+  </script>
 </body>
 </html>`;
 }
@@ -4243,1412 +4328,1648 @@ function generateDashboardHTML(options) {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Sanctuary \u2014 Principal Dashboard</title>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-<style>
-  :root {
-    --bg: #0d1117;
-    --surface: #161b22;
-    --border: #30363d;
-    --text-primary: #e6edf3;
-    --text-secondary: #8b949e;
-    --green: #3fb950;
-    --amber: #d29922;
-    --red: #f85149;
-    --blue: #58a6ff;
-    --mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
-    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-    --radius: 6px;
-  }
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sanctuary Dashboard</title>
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --border: #30363d;
+      --text-primary: #e6edf3;
+      --text-secondary: #8b949e;
+      --green: #3fb950;
+      --amber: #d29922;
+      --red: #f85149;
+      --blue: #58a6ff;
+      --success: #3fb950;
+      --warning: #d29922;
+      --error: #f85149;
+      --muted: #21262d;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html, body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+      background-color: var(--bg);
+      color: var(--text-primary);
+      height: 100%;
+      overflow: hidden;
+    }
+    body {
+      display: flex;
+      flex-direction: column;
+    }
+    /* Status Bar */
+    .status-bar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 56px;
+      background-color: var(--surface);
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      padding: 0 24px;
+      gap: 24px;
+      z-index: 100;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    }
+    .status-bar-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 0 0 auto;
+    }
-  html, body {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-  body {
-    font-family: var(--sans);
-    background: var(--bg);
-    color: var(--text-primary);
-    display: flex;
-    flex-direction: column;
-  }
-  /* \u2500\u2500 Top Status Bar (fixed) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .logo-icon {
+      font-size: 20px;
+      color: var(--blue);
+      font-weight: 700;
+    }
-  .status-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 56px;
-    background: var(--surface);
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    padding: 0 20px;
-    gap: 24px;
-    z-index: 1000;
-  }
+    .logo-info {
+      display: flex;
+      flex-direction: column;
+    }
-  .status-bar-left {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    flex: 0 0 auto;
-  }
+    .logo-title {
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 1;
+      color: var(--text-primary);
+    }
-  .sanctuary-logo {
-    font-weight: 700;
-    font-size: 16px;
-    letter-spacing: -0.5px;
-    color: var(--text-primary);
-  }
+    .logo-version {
+      font-size: 11px;
+      color: var(--text-secondary);
+      margin-top: 2px;
+    }
-  .sanctuary-logo span {
-    color: var(--blue);
-  }
+    .status-bar-center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+    }
-  .version {
-    font-size: 11px;
-    color: var(--text-secondary);
-    font-family: var(--mono);
-  }
+    .sovereignty-badge {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background-color: rgba(63, 185, 80, 0.1);
+      border: 1px solid rgba(63, 185, 80, 0.3);
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+    }
-  .status-bar-center {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  .sovereignty-badge {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 6px 12px;
-    background: rgba(88, 166, 255, 0.1);
-    border: 1px solid var(--blue);
-    border-radius: 20px;
-    font-size: 13px;
-    font-weight: 600;
-  }
+    .sovereignty-badge.degraded {
+      background-color: rgba(210, 153, 34, 0.1);
+      border-color: rgba(210, 153, 34, 0.3);
+    }
-  .sovereignty-score {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    font-family: var(--mono);
-    font-weight: 700;
-    font-size: 12px;
-    background: var(--blue);
-    color: var(--bg);
-  }
+    .sovereignty-badge.inactive {
+      background-color: rgba(248, 81, 73, 0.1);
+      border-color: rgba(248, 81, 73, 0.3);
+    }
-  .sovereignty-score.high {
-    background: var(--green);
-  }
+    .sovereignty-score {
+      font-weight: 700;
+      color: var(--green);
+    }
-  .sovereignty-score.medium {
-    background: var(--amber);
-  }
+    .sovereignty-badge.degraded .sovereignty-score {
+      color: var(--amber);
+    }
-  .sovereignty-score.low {
-    background: var(--red);
-  }
+    .sovereignty-badge.inactive .sovereignty-score {
+      color: var(--red);
+    }
-  .status-bar-right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    flex: 0 0 auto;
-  }
+    .status-bar-right {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex: 0 0 auto;
+    }
-  .protections-indicator {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--text-secondary);
-    font-family: var(--mono);
-  }
+    .status-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--text-secondary);
+    }
-  .protections-indicator .count {
-    color: var(--text-primary);
-    font-weight: 600;
-  }
+    .status-item strong {
+      color: var(--text-primary);
+      font-weight: 500;
+    }
-  .uptime {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: var(--text-secondary);
-    font-family: var(--mono);
-  }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: var(--green);
+    }
-  .status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--green);
-    animation: pulse 2s ease-in-out infinite;
-  }
+    .status-dot.disconnected {
+      background-color: var(--red);
+    }
-  .status-dot.disconnected {
-    background: var(--red);
-    animation: none;
-  }
+    .pending-badge {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      background-color: var(--blue);
+      color: var(--bg);
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+    }
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
+    /* Main Content */
+    .main-content {
+      flex: 1;
+      margin-top: 56px;
+      overflow-y: auto;
+      padding: 24px;
+    }
-  .pending-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 24px;
-    height: 24px;
-    padding: 0 6px;
-    background: var(--red);
-    color: white;
-    border-radius: 12px;
-    font-size: 11px;
-    font-weight: 700;
-    animation: pulse 1s ease-in-out infinite;
-  }
+    .grid {
+      display: grid;
+      gap: 20px;
+    }
-  .pending-badge.hidden {
-    display: none;
-  }
+    /* Row 1: Sovereignty Layers */
+    .sovereignty-layers {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
-  /* \u2500\u2500 Main Layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .layer-card {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
-  .main-container {
-    flex: 1;
-    display: flex;
-    margin-top: 56px;
-    overflow: hidden;
-  }
+    .layer-card.degraded {
+      border-color: var(--amber);
+      background-color: rgba(210, 153, 34, 0.05);
+    }
-  .activity-feed {
-    flex: 3;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid var(--border);
-    overflow: hidden;
-  }
+    .layer-card.inactive {
+      border-color: var(--red);
+      background-color: rgba(248, 81, 73, 0.05);
+    }
-  .feed-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-secondary);
-  }
+    .layer-name {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
-  .feed-header-dot {
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background: var(--green);
-  }
+    .layer-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
-  .activity-list {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
+    .layer-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      background-color: rgba(63, 185, 80, 0.15);
+      color: var(--green);
+      border-radius: 4px;
+      font-size: 11px;
+      font-weight: 600;
+      width: fit-content;
+    }
-  .activity-item {
-    padding: 12px 20px;
-    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
-    font-size: 13px;
-    font-family: var(--mono);
-    cursor: pointer;
-    transition: background 0.15s;
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-  }
+    .layer-card.degraded .layer-status {
+      background-color: rgba(210, 153, 34, 0.15);
+      color: var(--amber);
+    }
-  .activity-item:hover {
-    background: rgba(88, 166, 255, 0.05);
-  }
+    .layer-card.inactive .layer-status {
+      background-color: rgba(248, 81, 73, 0.15);
+      color: var(--red);
+    }
-  .activity-item-icon {
-    flex: 0 0 auto;
-    width: 16px;
-    text-align: center;
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 1px;
-  }
+    .layer-detail {
+      font-size: 12px;
+      color: var(--text-secondary);
+      font-family: 'JetBrains Mono', monospace;
+      padding: 8px;
+      background-color: var(--bg);
+      border-radius: 4px;
+      border-left: 2px solid var(--blue);
+    }
-  .activity-item-content {
-    flex: 1;
-    min-width: 0;
-  }
+    /* Row 2: Info Cards */
+    .info-cards {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
-  .activity-time {
-    color: var(--text-secondary);
-    font-size: 11px;
-    margin-bottom: 2px;
-  }
+    .info-card {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 20px;
+    }
-  .activity-main {
-    display: flex;
-    gap: 8px;
-    align-items: baseline;
-    margin-bottom: 4px;
-  }
+    .card-header {
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 16px;
+    }
-  .activity-tier {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 16px;
-    font-size: 10px;
-    font-weight: 700;
-    border-radius: 3px;
-    text-transform: uppercase;
-    flex: 0 0 auto;
-  }
+    .card-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 13px;
+    }
-  .activity-tier.t1 {
-    background: rgba(248, 81, 73, 0.2);
-    color: var(--red);
-  }
+    .card-row:last-child {
+      margin-bottom: 0;
+    }
-  .activity-tier.t2 {
-    background: rgba(210, 153, 34, 0.2);
-    color: var(--amber);
-  }
+    .card-label {
+      color: var(--text-secondary);
+    }
-  .activity-tier.t3 {
-    background: rgba(63, 185, 80, 0.2);
-    color: var(--green);
-  }
+    .card-value {
+      color: var(--text-primary);
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 500;
+    }
-  .activity-tool {
-    color: var(--text-primary);
-    font-weight: 600;
-  }
+    .identity-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px;
+      background-color: rgba(88, 166, 255, 0.15);
+      color: var(--blue);
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
-  .activity-outcome {
-    color: var(--green);
-  }
+    .trust-tier-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px;
+      background-color: rgba(63, 185, 80, 0.15);
+      color: var(--green);
+      border-radius: 3px;
+      font-size: 10px;
+      font-weight: 600;
+    }
-  .activity-outcome.denied {
-    color: var(--red);
-  }
+    .truncated {
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
-  .activity-detail {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-left: 0;
-  }
+    /* Row 3: SHR & Activity */
+    .main-panels {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      min-height: 400px;
+    }
-  .activity-item.expanded .activity-detail {
-    display: block;
-    margin-top: 8px;
-    padding: 10px;
-    background: rgba(88, 166, 255, 0.08);
-    border-left: 2px solid var(--blue);
-    border-radius: 4px;
-  }
+    .panel {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
-  .activity-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    color: var(--text-secondary);
-  }
+    .panel-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
-  .activity-empty-icon {
-    font-size: 32px;
-    margin-bottom: 12px;
-  }
+    .panel-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
-  .activity-empty-text {
-    font-size: 14px;
-  }
+    .panel-action {
+      background: none;
+      border: none;
+      color: var(--blue);
+      cursor: pointer;
+      font-size: 12px;
+      padding: 0;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
-  /* \u2500\u2500 Protection Status Sidebar (40%) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .panel-action:hover {
+      color: #79c0ff;
+    }
-  .protection-sidebar {
-    flex: 2;
-    display: flex;
-    flex-direction: column;
-    background: rgba(22, 27, 34, 0.5);
-    overflow: hidden;
-  }
+    .panel-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+    }
-  .sidebar-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border);
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+    /* SHR Viewer */
+    .shr-json {
+      font-family: 'JetBrains Mono', monospace;
+      font-size: 12px;
+      line-height: 1.6;
+      color: var(--text-secondary);
+    }
-  .sidebar-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 16px 16px;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 12px;
-  }
+    .shr-section {
+      margin-bottom: 12px;
+    }
-  .protection-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: var(--radius);
-    padding: 14px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
+    .shr-section-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--text-primary);
+      padding: 8px;
+      background-color: var(--bg);
+      border-radius: 4px;
+      user-select: none;
+    }
-  .protection-card-icon {
-    font-size: 14px;
-  }
+    .shr-section-header:hover {
+      background-color: var(--muted);
+    }
-  .protection-card-label {
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-secondary);
-  }
+    .shr-toggle {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      transition: transform 0.2s;
+    }
-  .protection-card-status {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    font-weight: 600;
-  }
+    .shr-section.collapsed .shr-toggle {
+      transform: rotate(-90deg);
+    }
-  .protection-card-status.active {
-    color: var(--green);
-  }
+    .shr-section-content {
+      padding: 8px 16px;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 4px;
+      margin-top: 4px;
+    }
-  .protection-card-status.inactive {
-    color: var(--text-secondary);
-  }
+    .shr-section.collapsed .shr-section-content {
+      display: none;
+    }
-  .protection-card-stat {
-    font-size: 11px;
-    color: var(--text-secondary);
-    font-family: var(--mono);
-    margin-top: 4px;
-  }
+    .shr-item {
+      display: flex;
+      margin-bottom: 4px;
+    }
-  /* \u2500\u2500 Pending Approvals Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .shr-key {
+      color: var(--blue);
+      margin-right: 8px;
+      min-width: 120px;
+    }
-  .pending-overlay {
-    position: fixed;
-    top: 56px;
-    right: 0;
-    bottom: 0;
-    width: 0;
-    background: var(--surface);
-    border-left: 1px solid var(--border);
-    z-index: 999;
-    overflow-y: auto;
-    transition: width 0.3s ease-out;
-    display: flex;
-    flex-direction: column;
-  }
+    .shr-value {
+      color: var(--green);
+      word-break: break-all;
+    }
-  .pending-overlay.active {
-    width: 380px;
-  }
+    /* Activity Feed */
+    .activity-feed {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
-  @media (max-width: 1400px) {
-    .pending-overlay.active {
-      width: 100%;
-      right: auto;
-      left: 0;
+    .activity-item {
+      padding: 12px;
+      background-color: var(--bg);
+      border-left: 2px solid var(--border);
+      border-radius: 4px;
+      font-size: 12px;
     }
-  }
-  .pending-overlay-header {
-    padding: 16px 20px;
-    border-bottom: 1px solid var(--border);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex: 0 0 auto;
-  }
+    .activity-item.tool-call {
+      border-left-color: var(--blue);
+    }
-  .pending-overlay-title {
-    font-size: 13px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-primary);
-  }
+    .activity-item.context-gate {
+      border-left-color: var(--amber);
+    }
-  .pending-overlay-close {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    font-size: 18px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+    .activity-item.injection {
+      border-left-color: var(--red);
+    }
-  .pending-overlay-close:hover {
-    color: var(--text-primary);
-  }
+    .activity-item.protection {
+      border-left-color: var(--green);
+    }
-  .pending-list {
-    flex: 1;
-    overflow-y: auto;
-  }
+    .activity-type {
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+      font-size: 11px;
+      letter-spacing: 0.5px;
+    }
-  .pending-item {
-    padding: 16px 20px;
-    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+    .activity-content {
+      color: var(--text-secondary);
+      font-family: 'JetBrains Mono', monospace;
+      margin-bottom: 4px;
+      word-break: break-all;
+    }
-  .pending-item-header {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+    .activity-time {
+      font-size: 11px;
+      color: var(--text-secondary);
+    }
-  .pending-item-op {
-    font-family: var(--mono);
-    font-size: 12px;
-    font-weight: 600;
-    color: var(--text-primary);
-    flex: 1;
-  }
+    .empty-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
-  .pending-item-tier {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 20px;
-    font-size: 9px;
-    font-weight: 700;
-    border-radius: 3px;
-    text-transform: uppercase;
-    color: white;
-  }
+    /* Row 4: Handshake History */
+    .handshake-table {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
-  .pending-item-tier.tier1 {
-    background: var(--red);
-  }
+    .table-header {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr;
+      gap: 16px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      background-color: var(--bg);
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
-  .pending-item-tier.tier2 {
-    background: var(--amber);
-  }
+    .table-rows {
+      max-height: 300px;
+      overflow-y: auto;
+    }
-  .pending-item-reason {
-    font-size: 12px;
-    color: var(--text-secondary);
-  }
+    .table-row {
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr 1.5fr;
+      gap: 16px;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--border);
+      align-items: center;
+      font-size: 12px;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
-  .pending-item-timer {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 11px;
-    font-family: var(--mono);
-    color: var(--text-secondary);
-  }
+    .table-row:hover {
+      background-color: var(--bg);
+    }
-  .pending-item-timer-bar {
-    flex: 1;
-    height: 4px;
-    background: rgba(48, 54, 61, 0.8);
-    border-radius: 2px;
-    overflow: hidden;
-  }
+    .table-row:last-child {
+      border-bottom: none;
+    }
-  .pending-item-timer-fill {
-    height: 100%;
-    background: var(--blue);
-    transition: width 0.1s linear;
-  }
+    .table-cell {
+      color: var(--text-secondary);
+      font-family: 'JetBrains Mono', monospace;
+    }
-  .pending-item-timer.urgent .pending-item-timer-fill {
-    background: var(--red);
-  }
+    .table-cell.strong {
+      color: var(--text-primary);
+      font-weight: 500;
+    }
-  .pending-item-actions {
-    display: flex;
-    gap: 8px;
-  }
+    .table-empty {
+      padding: 40px 20px;
+      text-align: center;
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
-  .btn {
-    flex: 1;
-    padding: 8px 12px;
-    border: none;
-    border-radius: var(--radius);
-    font-size: 12px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.15s;
-    font-family: var(--sans);
-  }
+    /* Pending Overlay */
+    .pending-overlay {
+      position: fixed;
+      top: 0;
+      right: -400px;
+      width: 400px;
+      height: 100vh;
+      background-color: var(--surface);
+      border-left: 1px solid var(--border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+      z-index: 200;
+      transition: right 0.3s ease;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+    }
-  .btn-approve {
-    background: var(--green);
-    color: var(--bg);
-  }
+    .pending-overlay.show {
+      right: 0;
+    }
-  .btn-approve:hover {
-    background: #4ecf5e;
-  }
+    .pending-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      font-weight: 600;
+      color: var(--text-primary);
+    }
-  .btn-deny {
-    background: var(--red);
-    color: white;
-  }
+    .pending-items {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
-  .btn-deny:hover {
-    background: #f9605e;
-  }
+    .pending-item {
+      background-color: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 16px;
+      margin-bottom: 12px;
+    }
-  /* \u2500\u2500 Threat Panel (collapsible footer) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .pending-title {
+      font-weight: 600;
+      color: var(--text-primary);
+      margin-bottom: 8px;
+      word-break: break-word;
+    }
-  .threat-panel {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: var(--surface);
-    border-top: 1px solid var(--border);
-    max-height: 240px;
-    z-index: 500;
-    display: flex;
-    flex-direction: column;
-    transition: max-height 0.3s ease-out;
-  }
+    .pending-countdown {
+      font-size: 12px;
+      color: var(--amber);
+      margin-bottom: 12px;
+      font-weight: 500;
+    }
-  .threat-panel.collapsed {
-    max-height: 40px;
-  }
+    .pending-actions {
+      display: flex;
+      gap: 8px;
+    }
-  .threat-header {
-    padding: 12px 20px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    color: var(--text-secondary);
-    flex: 0 0 auto;
-  }
+    .pending-btn {
+      flex: 1;
+      padding: 8px 12px;
+      border: none;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: background-color 0.2s;
+    }
-  .threat-header:hover {
-    background: rgba(88, 166, 255, 0.05);
-  }
+    .pending-approve {
+      background-color: var(--green);
+      color: var(--bg);
+    }
-  .threat-icon {
-    font-size: 14px;
-  }
+    .pending-approve:hover {
+      background-color: #3fa040;
+    }
-  .threat-content {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0 20px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
+    .pending-deny {
+      background-color: var(--red);
+      color: var(--bg);
+    }
-  .threat-item {
-    padding: 8px 10px;
-    background: rgba(248, 81, 73, 0.1);
-    border-left: 2px solid var(--red);
-    border-radius: 4px;
-    font-size: 11px;
-    color: var(--text-secondary);
-  }
+    .pending-deny:hover {
+      background-color: #e03c3c;
+    }
-  .threat-item-type {
-    font-weight: 600;
-    color: var(--red);
-    font-family: var(--mono);
-  }
+    /* Threat Panel */
+    .threat-panel {
+      background-color: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      margin-top: 20px;
+      overflow: hidden;
+    }
-  .threat-empty {
-    text-align: center;
-    padding: 20px 10px;
-    color: var(--text-secondary);
-    font-size: 12px;
-  }
+    .threat-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      user-select: none;
+    }
-  /* \u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .threat-title {
+      font-weight: 600;
+      color: var(--text-primary);
+    }
-  ::-webkit-scrollbar {
-    width: 6px;
-  }
+    .threat-toggle {
+      font-size: 10px;
+      color: var(--text-secondary);
+      transition: transform 0.2s;
+    }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
+    .threat-panel.collapsed .threat-toggle {
+      transform: rotate(-90deg);
+    }
-  ::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 3px;
-  }
+    .threat-content {
+      padding: 16px 20px;
+      max-height: 300px;
+      overflow-y: auto;
+    }
-  ::-webkit-scrollbar-thumb:hover {
-    background: rgba(88, 166, 255, 0.3);
-  }
+    .threat-panel.collapsed .threat-content {
+      display: none;
+    }
-  /* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .threat-alert {
+      background-color: rgba(248, 81, 73, 0.1);
+      border: 1px solid var(--red);
+      border-radius: 4px;
+      padding: 12px;
+      margin-bottom: 8px;
+      font-size: 12px;
+    }
-  @media (max-width: 1200px) {
-    .protection-sidebar {
-      display: none;
+    .threat-alert:last-child {
+      margin-bottom: 0;
     }
-    .activity-feed {
-      border-right: none;
+    .threat-type {
+      font-weight: 600;
+      color: var(--red);
+      margin-bottom: 4px;
+      text-transform: uppercase;
+      font-size: 10px;
+      letter-spacing: 0.5px;
     }
-  }
-  @media (max-width: 768px) {
-    .status-bar {
-      padding: 0 12px;
-      gap: 12px;
-      height: 48px;
+    .threat-message {
+      color: var(--text-secondary);
     }
-    .sanctuary-logo {
-      font-size: 14px;
+    /* Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
     }
-    .status-bar-center {
-      display: none;
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
     }
-    .main-container {
-      margin-top: 48px;
+    ::-webkit-scrollbar-thumb {
+      background-color: var(--border);
+      border-radius: 4px;
     }
-    .activity-item {
-      padding: 10px 12px;
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--text-secondary);
     }
-    .pending-overlay.active {
-      width: 100%;
+    /* Responsive */
+    @media (max-width: 1400px) {
+      .sovereignty-layers {
+        grid-template-columns: repeat(2, 1fr);
+      }
+      .main-panels {
+        grid-template-columns: 1fr;
+      }
+      .pending-overlay {
+        width: 100%;
+        right: -100%;
+      }
     }
-    .threat-panel {
-      max-height: 200px;
+    @media (max-width: 768px) {
+      .status-bar {
+        flex-wrap: wrap;
+        height: auto;
+        padding: 12px;
+        gap: 12px;
+      }
+      .status-bar-center {
+        order: 3;
+        flex-basis: 100%;
+      }
+      .main-content {
+        margin-top: auto;
+      }
+      .info-cards {
+        grid-template-columns: 1fr;
+      }
+      .table-header,
+      .table-row {
+        grid-template-columns: 1fr;
+      }
     }
-  }
-</style>
+  </style>
 </head>
 <body>
-<!-- Status Bar (fixed, top) -->
-<div class="status-bar">
-  <div class="status-bar-left">
-    <div class="sanctuary-logo"><span>\u25C6</span> SANCTUARY</div>
-    <div class="version">v${options.serverVersion}</div>
-  </div>
-  <div class="status-bar-center">
-    <div class="sovereignty-badge">
-      <div class="sovereignty-score" id="sovereigntyScore">85</div>
-      <span>Sovereignty Health</span>
+  <!-- Status Bar -->
+  <div class="status-bar">
+    <div class="status-bar-left">
+      <div class="logo-icon">\u25C6</div>
+      <div class="logo-info">
+        <div class="logo-title">SANCTUARY</div>
+        <div class="logo-version">v${options.serverVersion}</div>
+      </div>
     </div>
-  </div>
-  <div class="status-bar-right">
-    <div class="protections-indicator">
-      <span class="count" id="activeProtections">6</span>/6 protections
+    <div class="status-bar-center">
+      <div id="sovereignty-badge" class="sovereignty-badge">
+        <span>Sovereignty Health:</span>
+        <span class="sovereignty-score" id="sovereignty-score">\u2014</span>
+        <span>/ 100</span>
+      </div>
     </div>
-    <div class="uptime">
-      <span id="uptimeText">\u2014</span>
+    <div class="status-bar-right">
+      <div class="status-item">
+        <strong id="protections-count">\u2014</strong>
+        <span>Protections</span>
+      </div>
+      <div class="status-item">
+        <strong id="uptime-value">\u2014</strong>
+        <span>Uptime</span>
+      </div>
+      <div class="status-dot" id="connection-status"></div>
+      <div id="pending-item-badge" class="pending-badge" style="display: none;">
+        <span>\u23F3</span>
+        <span id="pending-count">0</span>
+      </div>
     </div>
-    <div class="status-dot" id="statusDot"></div>
-    <div class="pending-badge hidden" id="pendingBadge">0</div>
   </div>
-</div>
-<!-- Main Layout -->
-<div class="main-container">
-  <!-- Activity Feed -->
-  <div class="activity-feed">
-    <div class="feed-header">
-      <div class="feed-header-dot"></div>
-      Live Activity
-    </div>
-    <div class="activity-list" id="activityList">
-      <div class="activity-empty">
-        <div class="activity-empty-icon">\u2192</div>
-        <div class="activity-empty-text">Waiting for activity...</div>
+  <!-- Main Content -->
+  <div class="main-content">
+    <div class="grid">
+      <!-- Row 1: Sovereignty Layers -->
+      <div class="sovereignty-layers" id="sovereignty-layers">
+        <div class="layer-card" data-layer="l1">
+          <div class="layer-name">Layer 1</div>
+          <div class="layer-title">Cognitive Sovereignty</div>
+          <div class="layer-status"><span>\u25CF</span> <span id="l1-status">\u2014</span></div>
+          <div class="layer-detail" id="l1-detail">Loading...</div>
+        </div>
+        <div class="layer-card" data-layer="l2">
+          <div class="layer-name">Layer 2</div>
+          <div class="layer-title">Operational Isolation</div>
+          <div class="layer-status"><span>\u25CF</span> <span id="l2-status">\u2014</span></div>
+          <div class="layer-detail" id="l2-detail">Loading...</div>
+        </div>
+        <div class="layer-card" data-layer="l3">
+          <div class="layer-name">Layer 3</div>
+          <div class="layer-title">Selective Disclosure</div>
+          <div class="layer-status"><span>\u25CF</span> <span id="l3-status">\u2014</span></div>
+          <div class="layer-detail" id="l3-detail">Loading...</div>
+        </div>
+        <div class="layer-card" data-layer="l4">
+          <div class="layer-name">Layer 4</div>
+          <div class="layer-title">Verifiable Reputation</div>
+          <div class="layer-status"><span>\u25CF</span> <span id="l4-status">\u2014</span></div>
+          <div class="layer-detail" id="l4-detail">Loading...</div>
+        </div>
+      </div>
+      <!-- Row 2: Info Cards -->
+      <div class="info-cards">
+        <div class="info-card">
+          <div class="card-header">Identity</div>
+          <div class="card-row">
+            <span class="card-label">Primary</span>
+            <span class="card-value" id="identity-label">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">DID</span>
+            <span class="card-value truncated" id="identity-did" title="">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Public Key</span>
+            <span class="card-value truncated" id="identity-pubkey" title="">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Type</span>
+            <span class="identity-badge">Ed25519</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Created</span>
+            <span class="card-value" id="identity-created">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Identities</span>
+            <span class="card-value" id="identity-count">\u2014</span>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="card-header">Handshakes</div>
+          <div class="card-row">
+            <span class="card-label">Total</span>
+            <span class="card-value" id="handshake-count">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Latest Peer</span>
+            <span class="card-value truncated" id="handshake-latest">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Trust Tier</span>
+            <span class="trust-tier-badge" id="handshake-tier">Unverified</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Timestamp</span>
+            <span class="card-value" id="handshake-time">\u2014</span>
+          </div>
+        </div>
+        <div class="info-card">
+          <div class="card-header">Reputation</div>
+          <div class="card-row">
+            <span class="card-label">Weighted Score</span>
+            <span class="card-value" id="reputation-score">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Attestations</span>
+            <span class="card-value" id="reputation-attestations">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Verified Sovereign</span>
+            <span class="card-value" id="reputation-verified">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Verified Degraded</span>
+            <span class="card-value" id="reputation-degraded">\u2014</span>
+          </div>
+          <div class="card-row">
+            <span class="card-label">Unverified</span>
+            <span class="card-value" id="reputation-unverified">\u2014</span>
+          </div>
+        </div>
+      </div>
+      <!-- Row 3: SHR & Activity -->
+      <div class="main-panels">
+        <div class="panel">
+          <div class="panel-header">
+            <div class="panel-title">Sovereignty Health Report</div>
+            <button class="panel-action" id="copy-shr-btn">Copy JSON</button>
+          </div>
+          <div class="panel-content">
+            <div class="shr-json" id="shr-viewer">
+              <div class="empty-state">Loading SHR...</div>
+            </div>
+          </div>
+        </div>
+        <div class="panel">
+          <div class="panel-header">
+            <div class="panel-title">Activity Feed</div>
+          </div>
+          <div class="panel-content">
+            <div id="activity-feed" class="activity-feed">
+              <div class="empty-state">Waiting for activity...</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Row 4: Handshake History -->
+      <div class="handshake-table">
+        <div class="table-header">
+          <div>Counterparty</div>
+          <div>Trust Tier</div>
+          <div>Sovereignty</div>
+          <div>Verified</div>
+          <div>Completed</div>
+          <div>Expires</div>
+        </div>
+        <div class="table-rows" id="handshake-table">
+          <div class="table-empty">No handshakes completed yet</div>
+        </div>
+      </div>
+      <!-- Threat Panel -->
+      <div class="threat-panel collapsed">
+        <div class="threat-header">
+          <div class="threat-title">Security Threats</div>
+          <div class="threat-toggle">\u25B6</div>
+        </div>
+        <div class="threat-content" id="threat-alerts">
+          <div class="empty-state">No threats detected</div>
+        </div>
       </div>
     </div>
   </div>
-  <!-- Protection Status Sidebar -->
-  <div class="protection-sidebar" id="protectionSidebar">
-    <div class="sidebar-header">
-      <span>\u25C6</span> Protection Status
-    </div>
-    <div class="sidebar-content">
-      <div class="protection-card">
-        <div class="protection-card-icon">\u{1F510}</div>
-        <div class="protection-card-label">Encryption</div>
-        <div class="protection-card-status active" id="encryptionStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="encryptionStat">Ed25519</div>
-      </div>
+  <!-- Pending Overlay -->
+  <div class="pending-overlay" id="pending-overlay">
+    <div class="pending-header">Pending Approvals</div>
+    <div class="pending-items" id="pending-items"></div>
+  </div>
+  <script>
+    // Constants
+    const AUTH_TOKEN = '${options.authToken || ""}' || sessionStorage.getItem('authToken') || '';
+    const TIMEOUT_SECONDS = ${options.timeoutSeconds};
+    const API_BASE = '';
+    // State
+    let apiState = {
+      sovereignty: null,
+      identity: null,
+      handshakes: [],
+      shr: null,
+      status: null,
+    };
+    let pendingRequests = new Map();
+    let activityLog = [];
+    const maxActivityItems = 50;
+    // Helpers
+    function esc(text) {
+      if (!text) return '';
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    function formatTime(isoString) {
+      if (!isoString) return '\u2014';
+      const date = new Date(isoString);
+      return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    }
+    function truncate(str, len = 16) {
+      if (!str) return '\u2014';
+      if (str.length <= len) return str;
+      return str.slice(0, len) + '...';
+    }
+    function calculateSovereigntyScore(shr) {
+      if (!shr || !shr.layers) return 0;
+      const layers = shr.layers;
+      let score = 100;
+      if (layers.l1?.status === 'degraded') score -= 20;
+      if (layers.l1?.status === 'inactive') score -= 35;
+      if (layers.l2?.status === 'degraded') score -= 15;
+      if (layers.l2?.status === 'inactive') score -= 25;
+      if (layers.l3?.status === 'degraded') score -= 15;
+      if (layers.l3?.status === 'inactive') score -= 25;
+      if (layers.l4?.status === 'degraded') score -= 10;
+      if (layers.l4?.status === 'inactive') score -= 20;
+      return Math.max(0, Math.min(100, score));
+    }
+    async function fetchAPI(endpoint) {
+      try {
+        const response = await fetch(API_BASE + endpoint, {
+          headers: {
+            'Authorization': 'Bearer ' + AUTH_TOKEN,
+          },
+        });
+        if (response.status === 401) {
+          redirectToLogin();
+          return null;
+        }
+        if (!response.ok) {
+          console.error('API Error:', response.status);
+          return null;
+        }
+        return await response.json();
+      } catch (err) {
+        console.error('Fetch error:', err);
+        return null;
+      }
+    }
+    function redirectToLogin() {
+      sessionStorage.removeItem('authToken');
+      window.location.href = '/';
+    }
+    // API Updates
+    async function updateSovereignty() {
+      const data = await fetchAPI('/api/sovereignty');
+      if (!data) return;
-      <div class="protection-card">
-        <div class="protection-card-icon">\u2713</div>
-        <div class="protection-card-label">Approval Gate</div>
-        <div class="protection-card-status active" id="approvalStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="approvalStat">T1: 2 | T2: 3</div>
-      </div>
+      apiState.sovereignty = data;
-      <div class="protection-card">
-        <div class="protection-card-icon">\u{1F3AF}</div>
-        <div class="protection-card-label">Context Gating</div>
-        <div class="protection-card-status active" id="contextStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="contextStat">12 filtered</div>
-      </div>
+      const score = calculateSovereigntyScore(data.shr);
+      const badge = document.getElementById('sovereignty-badge');
+      const scoreEl = document.getElementById('sovereignty-score');
-      <div class="protection-card">
-        <div class="protection-card-icon">\u26A0</div>
-        <div class="protection-card-label">Injection Detection</div>
-        <div class="protection-card-status active" id="injectionStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="injectionStat">3 flags today</div>
-      </div>
+      scoreEl.textContent = score;
-      <div class="protection-card">
-        <div class="protection-card-icon">\u{1F4CA}</div>
-        <div class="protection-card-label">Behavioral Baseline</div>
-        <div class="protection-card-status active" id="baselineStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="baselineStat">0 anomalies</div>
-      </div>
+      badge.classList.remove('degraded', 'inactive');
+      if (score < 70) badge.classList.add('degraded');
+      if (score < 40) badge.classList.add('inactive');
-      <div class="protection-card">
-        <div class="protection-card-icon">\u{1F4CB}</div>
-        <div class="protection-card-label">Audit Trail</div>
-        <div class="protection-card-status active" id="auditStatus">\u2713 Active</div>
-        <div class="protection-card-stat" id="auditStat">284 entries</div>
-      </div>
-    </div>
-  </div>
-</div>
+      updateLayerCards(data.shr);
+    }
-<!-- Pending Approvals Overlay -->
-<div class="pending-overlay" id="pendingOverlay">
-  <div class="pending-overlay-header">
-    <div class="pending-overlay-title">Pending Approvals</div>
-    <button class="pending-overlay-close" onclick="closePendingOverlay()">\xD7</button>
-  </div>
-  <div class="pending-list" id="pendingList"></div>
-</div>
-<!-- Threat Panel (collapsible footer) -->
-<div class="threat-panel collapsed" id="threatPanel">
-  <div class="threat-header" onclick="toggleThreatPanel()">
-    <span class="threat-icon">\u26A0</span>
-    Recent Threats
-    <span id="threatCount" style="margin-left: auto; color: var(--red); font-weight: 700;">0</span>
-  </div>
-  <div class="threat-content" id="threatContent">
-    <div class="threat-empty">No threats detected</div>
-  </div>
-</div>
+    function updateLayerCards(shr) {
+      if (!shr || !shr.layers) return;
-<script>
-(function() {
-  'use strict';
+      const layers = shr.layers;
-  // \u2500\u2500 Configuration \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      updateLayerCard('l1', layers.l1, layers.l1?.encryption || 'AES-256-GCM');
+      updateLayerCard('l2', layers.l2, layers.l2?.isolation_type || 'Process-level');
+      updateLayerCard('l3', layers.l3, layers.l3?.proof_system || 'Schnorr-Pedersen');
+      updateLayerCard('l4', layers.l4, layers.l4?.reputation_mode || 'Weighted');
+    }
-  const TIMEOUT_SECONDS = ${options.timeoutSeconds};
-  // AUTH_TOKEN: embedded token (for direct session access) or from sessionStorage (login page flow)
-  const EMBEDDED_TOKEN = ${options.authToken ? JSON.stringify(options.authToken) : "null"};
-  const AUTH_TOKEN = EMBEDDED_TOKEN || (function() { try { return sessionStorage.getItem('sanctuary_token'); } catch(_) { return null; } })();
-  const MAX_ACTIVITY_ITEMS = 100;
-  const MAX_THREAT_ITEMS = 20;
+    function updateLayerCard(layer, layerData, detail) {
+      if (!layerData) return;
-  // \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      const card = document.querySelector(\`[data-layer="\${layer}"]\`);
+      if (!card) return;
-  let SESSION_ID = null;
-  let evtSource = null;
-  let startTime = Date.now();
-  let activityCount = 0;
-  let threatCount = 0;
-  const pendingRequests = new Map();
-  const activityItems = [];
-  const threatItems = [];
-  let sovereigntyScore = 85;
-  let sessionRenewalTimer = null;
+      const status = layerData.status || 'inactive';
+      card.classList.remove('degraded', 'inactive');
-  // \u2500\u2500 Auth Helpers (SEC-012) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      if (status === 'degraded') {
+        card.classList.add('degraded');
+      } else if (status === 'inactive') {
+        card.classList.add('inactive');
+      }
-  function authHeaders() {
-    const h = { 'Content-Type': 'application/json' };
-    if (AUTH_TOKEN) h['Authorization'] = 'Bearer ' + AUTH_TOKEN;
-    return h;
-  }
+      document.getElementById(\`\${layer}-status\`).textContent = status.toUpperCase();
+      document.getElementById(\`\${layer}-detail\`).textContent = detail;
+    }
-  function sessionQuery(url) {
-    if (!SESSION_ID) return url;
-    const sep = url.includes('?') ? '&' : '?';
-    return url + sep + 'session=' + SESSION_ID;
-  }
+    async function updateIdentity() {
+      const data = await fetchAPI('/api/identity');
+      if (!data) return;
-  function setCookie(sessionId, maxAge) {
-    document.cookie = 'sanctuary_session=' + sessionId +
-      '; path=/; SameSite=Strict; max-age=' + maxAge;
-  }
+      apiState.identity = data;
-  async function exchangeSession() {
-    if (!AUTH_TOKEN) return;
-    try {
-      const resp = await fetch('/auth/session', { method: 'POST', headers: authHeaders() });
-      if (resp.ok) {
-        const data = await resp.json();
-        SESSION_ID = data.session_id;
-        var ttl = data.expires_in_seconds || 300;
-        // Update cookie with new session
-        setCookie(SESSION_ID, ttl);
-        // Schedule renewal at 80% of TTL
-        if (sessionRenewalTimer) clearTimeout(sessionRenewalTimer);
-        sessionRenewalTimer = setTimeout(function() {
-          exchangeSession().then(function() { reconnectSSE(); });
-        }, ttl * 800);
-      } else if (resp.status === 401) {
-        // Token invalid or expired \u2014 show non-destructive re-login overlay
-        showSessionExpired();
-      }
-    } catch (e) {
-      // Network error \u2014 retry in 30s
-      if (sessionRenewalTimer) clearTimeout(sessionRenewalTimer);
-      sessionRenewalTimer = setTimeout(function() {
-        exchangeSession().then(function() { reconnectSSE(); });
-      }, 30000);
-    }
-  }
-  function showSessionExpired() {
-    // Clear stored token
-    try { sessionStorage.removeItem('sanctuary_token'); } catch(_) {}
-    // Redirect to login page
-    document.cookie = 'sanctuary_session=; path=/; max-age=0';
-    window.location.reload();
-  }
-  // \u2500\u2500 UI Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  function esc(s) {
-    const d = document.createElement('div');
-    d.textContent = String(s || '');
-    return d.innerHTML;
-  }
-  function closePendingOverlay() {
-    document.getElementById('pendingOverlay').classList.remove('active');
-  }
-  function toggleThreatPanel() {
-    document.getElementById('threatPanel').classList.toggle('collapsed');
-  }
-  function updateUptime() {
-    const elapsed = Math.floor((Date.now() - startTime) / 1000);
-    const hours = Math.floor(elapsed / 3600);
-    const mins = Math.floor((elapsed % 3600) / 60);
-    const secs = elapsed % 60;
-    let uptimeStr = '';
-    if (hours > 0) uptimeStr += hours + 'h ';
-    if (mins > 0) uptimeStr += mins + 'm ';
-    uptimeStr += secs + 's';
-    document.getElementById('uptimeText').textContent = uptimeStr;
-  }
-  // \u2500\u2500 Sovereignty Score \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-  function updateSovereigntyScore(score) {
-    sovereigntyScore = Math.min(100, Math.max(0, score || 85));
-    const badge = document.getElementById('sovereigntyScore');
-    badge.textContent = sovereigntyScore;
-    badge.className = 'sovereignty-score';
-    if (sovereigntyScore >= 80) {
-      badge.classList.add('high');
-    } else if (sovereigntyScore >= 50) {
-      badge.classList.add('medium');
-    } else {
-      badge.classList.add('low');
+      const primary = data.primary || {};
+      document.getElementById('identity-label').textContent = primary.label || '\u2014';
+      document.getElementById('identity-did').textContent = truncate(primary.did, 24);
+      document.getElementById('identity-did').title = primary.did || '';
+      document.getElementById('identity-pubkey').textContent = truncate(primary.publicKey, 24);
+      document.getElementById('identity-pubkey').title = primary.publicKey || '';
+      document.getElementById('identity-created').textContent = formatTime(primary.createdAt);
+      document.getElementById('identity-count').textContent = data.identities?.length || '\u2014';
     }
-  }
-  // \u2500\u2500 Activity Feed \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    async function updateHandshakes() {
+      const data = await fetchAPI('/api/handshakes');
+      if (!data) return;
-  function addActivityItem(data) {
-    const {
-      timestamp,
-      tier,
-      tool,
-      outcome,
-      detail,
-      hasInjection,
-      isContextGated
-    } = data;
-    const item = {
-      id: 'activity-' + activityCount++,
-      timestamp: timestamp || new Date().toISOString(),
-      tier: tier || 1,
-      tool: tool || 'unknown_tool',
-      outcome: outcome || 'executed',
-      detail: detail || '',
-      hasInjection: !!hasInjection,
-      isContextGated: !!isContextGated
-    };
+      apiState.handshakes = data.handshakes || [];
-    activityItems.unshift(item);
-    if (activityItems.length > MAX_ACTIVITY_ITEMS) {
-      activityItems.pop();
+      document.getElementById('handshake-count').textContent = data.handshakes?.length || '0';
+      if (data.handshakes && data.handshakes.length > 0) {
+        const latest = data.handshakes[0];
+        document.getElementById('handshake-latest').textContent = truncate(latest.counterpartyId, 20);
+        document.getElementById('handshake-latest').title = latest.counterpartyId || '';
+        document.getElementById('handshake-tier').textContent = (latest.trustTier || 'Unverified').toUpperCase();
+        document.getElementById('handshake-time').textContent = formatTime(latest.completedAt);
+      } else {
+        document.getElementById('handshake-latest').textContent = '\u2014';
+        document.getElementById('handshake-tier').textContent = 'Unverified';
+        document.getElementById('handshake-time').textContent = '\u2014';
+      }
+      updateHandshakeTable(data.handshakes || []);
     }
-    renderActivityFeed();
-  }
+    function updateHandshakeTable(handshakes) {
+      const table = document.getElementById('handshake-table');
-  function renderActivityFeed() {
-    const list = document.getElementById('activityList');
+      if (!handshakes || handshakes.length === 0) {
+        table.innerHTML = '<div class="table-empty">No handshakes completed yet</div>';
+        return;
+      }
-    if (activityItems.length === 0) {
-      list.innerHTML = '<div class="activity-empty"><div class="activity-empty-icon">\u2192</div><div class="activity-empty-text">Waiting for activity...</div></div>';
-      return;
+      table.innerHTML = handshakes
+        .map(
+          (hs) => \`
+        <div class="table-row">
+          <div class="table-cell strong">\${esc(truncate(hs.counterpartyId, 24))}</div>
+          <div class="table-cell">\${esc(hs.trustTier || 'Unverified')}</div>
+          <div class="table-cell">\${esc(hs.sovereigntyLevel || '\u2014')}</div>
+          <div class="table-cell">\${hs.verified ? 'Yes' : 'No'}</div>
+          <div class="table-cell">\${formatTime(hs.completedAt)}</div>
+          <div class="table-cell">\${formatTime(hs.expiresAt)}</div>
+        </div>
+      \`
+        )
+        .join('');
     }
-    list.innerHTML = '';
-    for (const item of activityItems) {
-      const tr = document.createElement('div');
-      tr.className = 'activity-item';
-      tr.id = item.id;
-      const time = new Date(item.timestamp);
-      const timeStr = time.toLocaleTimeString();
-      const tierClass = 't' + item.tier;
-      const outcomeClass = item.outcome === 'denied' ? 'outcome denied' : 'outcome';
-      let icon = '\u25CF';
-      if (item.isContextGated) icon = '\u{1F3AF}';
-      else if (item.hasInjection) icon = '\u26A0';
-      else if (item.outcome === 'denied') icon = '\u2717';
-      else icon = '\u2713';
-      tr.innerHTML =
-        '<div class="activity-item-icon">' + esc(icon) + '</div>' +
-        '<div class="activity-item-content">' +
-          '<div class="activity-time">' + esc(timeStr) + '</div>' +
-          '<div class="activity-main">' +
-            '<span class="activity-tier ' + tierClass + '">T' + item.tier + '</span>' +
-            '<span class="activity-tool">' + esc(item.tool) + '</span>' +
-            '<span class="activity-outcome ' + (outcomeClass === 'outcome denied' ? 'denied' : '') + '">' + (item.outcome === 'denied' ? '\u2717 denied' : '\u2713 allowed') + '</span>' +
-          '</div>' +
-          '<div class="activity-detail">' + esc(item.detail) + '</div>' +
-        '</div>' +
-      '';
-      tr.addEventListener('click', () => {
-        tr.classList.toggle('expanded');
-      });
+    async function updateSHR() {
+      const data = await fetchAPI('/api/shr');
+      if (!data) return;
-      list.appendChild(tr);
+      apiState.shr = data;
+      renderSHRViewer(data);
     }
-  }
-  // \u2500\u2500 Pending Approvals \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    function renderSHRViewer(shr) {
+      const viewer = document.getElementById('shr-viewer');
-  function addPendingRequest(data) {
-    const {
-      request_id,
-      operation,
-      tier,
-      reason,
-      context,
-      timestamp
-    } = data;
-    const pending = {
-      id: request_id,
-      operation: operation || 'unknown',
-      tier: tier || 1,
-      reason: reason || '',
-      context: context || {},
-      timestamp: timestamp || new Date().toISOString(),
-      remaining: TIMEOUT_SECONDS
-    };
+      if (!shr) {
+        viewer.innerHTML = '<div class="empty-state">No SHR available</div>';
+        return;
+      }
-    pendingRequests.set(request_id, pending);
-    updatePendingUI();
-  }
+      let html = '';
+      // Implementation
+      html += \`
+        <div class="shr-section">
+          <div class="shr-section-header">
+            <div class="shr-toggle">\u25BC</div>
+            <div>Implementation</div>
+          </div>
+          <div class="shr-section-content">
+            <div class="shr-item">
+              <div class="shr-key">sanctuary_version:</div>
+              <div class="shr-value">\${esc(shr.implementation?.sanctuary_version || '\u2014')}</div>
+            </div>
+            <div class="shr-item">
+              <div class="shr-key">node_version:</div>
+              <div class="shr-value">\${esc(shr.implementation?.node_version || '\u2014')}</div>
+            </div>
+            <div class="shr-item">
+              <div class="shr-key">generated_by:</div>
+              <div class="shr-value">\${esc(shr.implementation?.generated_by || '\u2014')}</div>
+            </div>
+          </div>
+        </div>
+      \`;
+      // Metadata
+      html += \`
+        <div class="shr-section">
+          <div class="shr-section-header">
+            <div class="shr-toggle">\u25BC</div>
+            <div>Metadata</div>
+          </div>
+          <div class="shr-section-content">
+            <div class="shr-item">
+              <div class="shr-key">instance_id:</div>
+              <div class="shr-value">\${esc(truncate(shr.instance_id, 20))}</div>
+            </div>
+            <div class="shr-item">
+              <div class="shr-key">generated_at:</div>
+              <div class="shr-value">\${formatTime(shr.generated_at)}</div>
+            </div>
+            <div class="shr-item">
+              <div class="shr-key">expires_at:</div>
+              <div class="shr-value">\${formatTime(shr.expires_at)}</div>
+            </div>
+          </div>
+        </div>
+      \`;
+      // Layers
+      if (shr.layers) {
+        html += \`<div class="shr-section">
+          <div class="shr-section-header">
+            <div class="shr-toggle">\u25BC</div>
+            <div>Layers</div>
+          </div>
+          <div class="shr-section-content">
+        \`;
+        for (const [key, layer] of Object.entries(shr.layers)) {
+          html += \`
+            <div style="margin-bottom: 12px;">
+              <div style="color: var(--blue); font-weight: 600; margin-bottom: 4px;">\${esc(key)}</div>
+              <div style="padding-left: 12px;">
+          \`;
+          for (const [lkey, lvalue] of Object.entries(layer || {})) {
+            const displayValue =
+              typeof lvalue === 'boolean'
+                ? lvalue
+                  ? 'true'
+                  : 'false'
+                : esc(String(lvalue));
+            html += \`
+              <div class="shr-item">
+                <div class="shr-key">\${esc(lkey)}:</div>
+                <div class="shr-value">\${displayValue}</div>
+              </div>
+            \`;
+          }
-  function removePendingRequest(id) {
-    pendingRequests.delete(id);
-    updatePendingUI();
-  }
+          html += \`
+              </div>
+            </div>
+          \`;
+        }
-  function updatePendingUI() {
-    const count = pendingRequests.size;
-    const badge = document.getElementById('pendingBadge');
+        html += \`
+          </div>
+        </div>
+        \`;
+      }
+      // Capabilities
+      if (shr.capabilities) {
+        html += \`
+          <div class="shr-section">
+            <div class="shr-section-header">
+              <div class="shr-toggle">\u25BC</div>
+              <div>Capabilities</div>
+            </div>
+            <div class="shr-section-content">
+        \`;
+        for (const [key, value] of Object.entries(shr.capabilities)) {
+          const displayValue = value ? 'true' : 'false';
+          html += \`
+            <div class="shr-item">
+              <div class="shr-key">\${esc(key)}:</div>
+              <div class="shr-value">\${displayValue}</div>
+            </div>
+          \`;
+        }
-    if (count > 0) {
-      badge.classList.remove('hidden');
-      badge.textContent = count;
-      document.getElementById('pendingOverlay').classList.add('active');
-    } else {
-      badge.classList.add('hidden');
-      document.getElementById('pendingOverlay').classList.remove('active');
+        html += \`
+            </div>
+          </div>
+        \`;
+      }
+      // Signature
+      html += \`
+        <div class="shr-section">
+          <div class="shr-section-header">
+            <div class="shr-toggle">\u25BC</div>
+            <div>Signature</div>
+          </div>
+          <div class="shr-section-content">
+            <div class="shr-item">
+              <div class="shr-key">signed_by:</div>
+              <div class="shr-value">\${esc(truncate(shr.signed_by, 20))}</div>
+            </div>
+            <div class="shr-item">
+              <div class="shr-key">signature:</div>
+              <div class="shr-value">\${esc(truncate(shr.signature, 32))}</div>
+            </div>
+          </div>
+        </div>
+      \`;
+      viewer.innerHTML = html;
+      // Add collapse functionality
+      document.querySelectorAll('.shr-section-header').forEach((header) => {
+        header.addEventListener('click', () => {
+          header.closest('.shr-section').classList.toggle('collapsed');
+        });
+      });
     }
-    renderPendingList();
-  }
-  function renderPendingList() {
-    const list = document.getElementById('pendingList');
-    list.innerHTML = '';
+    async function updateStatus() {
+      const data = await fetchAPI('/api/status');
+      if (!data) return;
-    for (const [id, req] of pendingRequests) {
-      const item = document.createElement('div');
-      item.className = 'pending-item';
+      apiState.status = data;
-      const tier = req.tier || 1;
-      const tierClass = 'tier' + tier;
-      const pct = Math.max(0, Math.min(100, (req.remaining / TIMEOUT_SECONDS) * 100));
-      const isUrgent = req.remaining <= 30;
+      document.getElementById('protections-count').textContent = data.protectionsCount || '0';
+      document.getElementById('uptime-value').textContent = formatUptime(data.uptime);
-      item.innerHTML =
-        '<div class="pending-item-header">' +
-          '<div class="pending-item-op">' + esc(req.operation) + '</div>' +
-          '<div class="pending-item-tier ' + tierClass + '">T' + tier + '</div>' +
-        '</div>' +
-        '<div class="pending-item-reason">' + esc(req.reason) + '</div>' +
-        '<div class="pending-item-timer ' + (isUrgent ? 'urgent' : '') + '">' +
-          '<div class="pending-item-timer-bar">' +
-            '<div class="pending-item-timer-fill" style="width: ' + pct + '%"></div>' +
-          '</div>' +
-          '<span id="timer-' + id + '">' + req.remaining + 's</span>' +
-        '</div>' +
-        '<div class="pending-item-actions">' +
-          '<button class="btn btn-approve" onclick="handleApprove('' + id + '')">Approve</button>' +
-          '<button class="btn btn-deny" onclick="handleDeny('' + id + '')">Deny</button>' +
-        '</div>' +
-      '';
+      const connectionStatus = document.getElementById('connection-status');
+      connectionStatus.classList.toggle('disconnected', !data.connected);
+    }
-      list.appendChild(item);
+    function formatUptime(seconds) {
+      if (!seconds) return '\u2014';
+      const hours = Math.floor(seconds / 3600);
+      const minutes = Math.floor((seconds % 3600) / 60);
+      if (hours > 0) return \`\${hours}h \${minutes}m\`;
+      return \`\${minutes}m\`;
     }
-  }
-  window.handleApprove = function(id) {
-    fetch('/api/approve/' + id, { method: 'POST', headers: authHeaders() }).then(() => {
-      removePendingRequest(id);
-    }).catch(() => {});
-  };
+    // SSE Setup
+    function setupSSE() {
+      const eventSource = new EventSource(API_BASE + '/api/events', {
+        headers: {
+          'Authorization': 'Bearer ' + AUTH_TOKEN,
+        },
+      });
-  window.handleDeny = function(id) {
-    fetch('/api/deny/' + id, { method: 'POST', headers: authHeaders() }).then(() => {
-      removePendingRequest(id);
-    }).catch(() => {});
-  };
+      eventSource.addEventListener('init', (e) => {
+        console.log('Connected to SSE');
+      });
-  // \u2500\u2500 Threats \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      eventSource.addEventListener('sovereignty-update', () => {
+        updateSovereignty();
+      });
-  function addThreat(data) {
-    const {
-      timestamp,
-      severity,
-      type,
-      details
-    } = data;
-    const threat = {
-      id: 'threat-' + threatCount++,
-      timestamp: timestamp || new Date().toISOString(),
-      severity: severity || 'medium',
-      type: type || 'unknown',
-      details: details || ''
-    };
+      eventSource.addEventListener('handshake-update', () => {
+        updateHandshakes();
+      });
-    threatItems.unshift(threat);
-    if (threatItems.length > MAX_THREAT_ITEMS) {
-      threatItems.pop();
-    }
+      eventSource.addEventListener('tool-call', (e) => {
+        const data = JSON.parse(e.data);
+        addActivityItem({
+          type: 'tool-call',
+          title: 'Tool Call',
+          content: data.toolName,
+          timestamp: new Date().toISOString(),
+        });
+      });
-    if (threatCount > 0) {
-      document.getElementById('threatPanel').classList.remove('collapsed');
-    }
+      eventSource.addEventListener('context-gate-decision', (e) => {
+        const data = JSON.parse(e.data);
+        addActivityItem({
+          type: 'context-gate',
+          title: 'Context Gate',
+          content: data.decision,
+          timestamp: new Date().toISOString(),
+        });
+      });
-    renderThreats();
-  }
+      eventSource.addEventListener('injection-alert', (e) => {
+        const data = JSON.parse(e.data);
+        addActivityItem({
+          type: 'injection',
+          title: 'Injection Alert',
+          content: data.pattern,
+          timestamp: new Date().toISOString(),
+        });
+        addThreatAlert(data);
+      });
+      eventSource.addEventListener('pending-request', (e) => {
+        const data = JSON.parse(e.data);
+        addPendingRequest(data);
+      });
-  function renderThreats() {
-    const content = document.getElementById('threatContent');
-    const badge = document.getElementById('threatCount');
+      eventSource.addEventListener('request-resolved', (e) => {
+        const data = JSON.parse(e.data);
+        removePendingRequest(data.requestId);
+      });
-    if (threatItems.length === 0) {
-      content.innerHTML = '<div class="threat-empty">No threats detected</div>';
-      badge.textContent = '0';
-      return;
+      eventSource.onerror = () => {
+        console.error('SSE error');
+        setTimeout(setupSSE, 5000);
+      };
     }
-    badge.textContent = threatItems.length;
-    content.innerHTML = '';
+    // Activity Feed
+    function addActivityItem(item) {
+      activityLog.unshift(item);
+      if (activityLog.length > maxActivityItems) {
+        activityLog.pop();
+      }
-    for (const threat of threatItems) {
-      const div = document.createElement('div');
-      div.className = 'threat-item';
-      const time = new Date(threat.timestamp).toLocaleTimeString();
-      div.innerHTML =
-        '<div style="margin-bottom: 3px;">' +
-          '<span class="threat-item-type">' + esc(threat.type) + '</span>' +
-          '<span style="font-size: 10px; color: var(--text-secondary); margin-left: 6px;">' + esc(time) + '</span>' +
-        '</div>' +
-        '<div>' + esc(threat.details) + '</div>' +
-      '';
-      content.appendChild(div);
-    }
-  }
+      const feed = document.getElementById('activity-feed');
+      const html = \`
+        <div class="activity-item \${item.type}">
+          <div class="activity-type">\${esc(item.title)}</div>
+          <div class="activity-content">\${esc(item.content)}</div>
+          <div class="activity-time">\${formatTime(item.timestamp)}</div>
+        </div>
+      \`;
-  // \u2500\u2500 SSE Connection \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+      if (feed.querySelector('.empty-state')) {
+        feed.innerHTML = '';
+      }
-  function reconnectSSE() {
-    if (evtSource) evtSource.close();
-    connect();
-  }
+      feed.insertAdjacentHTML('afterbegin', html);
-  function connect() {
-    evtSource = new EventSource(sessionQuery('/events'));
+      if (feed.children.length > maxActivityItems) {
+        feed.lastChild.remove();
+      }
+    }
-    evtSource.onopen = () => {
-      document.getElementById('statusDot').classList.remove('disconnected');
-    };
+    // Pending Requests
+    function addPendingRequest(request) {
+      pendingRequests.set(request.requestId, {
+        id: request.requestId,
+        title: request.title,
+        details: request.details,
+        expiresAt: new Date(Date.now() + TIMEOUT_SECONDS * 1000),
+      });
-    evtSource.onerror = () => {
-      document.getElementById('statusDot').classList.add('disconnected');
-    };
+      updatePendingDisplay();
+    }
-    evtSource.addEventListener('init', (e) => {
-      const data = JSON.parse(e.data);
-      if (data.baseline) {
-        updateBaseline(data.baseline);
-      }
-      if (data.policy) {
-        updatePolicy(data.policy);
+    function removePendingRequest(requestId) {
+      pendingRequests.delete(requestId);
+      updatePendingDisplay();
+    }
+    function updatePendingDisplay() {
+      const badge = document.getElementById('pending-item-badge');
+      const count = pendingRequests.size;
+      if (count > 0) {
+        document.getElementById('pending-count').textContent = count;
+        badge.style.display = 'flex';
+      } else {
+        badge.style.display = 'none';
       }
-      if (data.pending) {
-        data.pending.forEach(addPendingRequest);
+      const overlay = document.getElementById('pending-overlay');
+      const items = document.getElementById('pending-items');
+      if (count === 0) {
+        items.innerHTML = '';
+        overlay.classList.remove('show');
+        return;
       }
-    });
-    evtSource.addEventListener('pending-request', (e) => {
-      const data = JSON.parse(e.data);
-      addPendingRequest(data);
-    });
+      let html = '';
+      for (const req of pendingRequests.values()) {
+        const remaining = Math.max(0, Math.floor((req.expiresAt - Date.now()) / 1000));
+        html += \`
+          <div class="pending-item">
+            <div class="pending-title">\${esc(req.title)}</div>
+            <div class="pending-countdown">Expires in \${remaining}s</div>
+            <div class="pending-actions">
+              <button class="pending-btn pending-approve" data-id="\${req.id}">Approve</button>
+              <button class="pending-btn pending-deny" data-id="\${req.id}">Deny</button>
+            </div>
+          </div>
+        \`;
+      }
-    evtSource.addEventListener('request-resolved', (e) => {
-      const data = JSON.parse(e.data);
-      removePendingRequest(data.request_id);
-    });
+      items.innerHTML = html;
-    evtSource.addEventListener('tool-call', (e) => {
-      const data = JSON.parse(e.data);
-      addActivityItem({
-        timestamp: data.timestamp,
-        tier: data.tier || 1,
-        tool: data.tool || 'unknown',
-        outcome: data.outcome || 'executed',
-        detail: data.detail || ''
+      document.querySelectorAll('.pending-approve').forEach((btn) => {
+        btn.addEventListener('click', async () => {
+          const id = btn.getAttribute('data-id');
+          await fetchAPI(\`/api/approve/\${id}\`);
+        });
       });
-    });
-    evtSource.addEventListener('context-gate-decision', (e) => {
-      const data = JSON.parse(e.data);
-      addActivityItem({
-        timestamp: data.timestamp,
-        tier: data.tier || 1,
-        tool: data.tool || 'unknown',
-        outcome: data.outcome || 'gated',
-        detail: data.fields_filtered ? 'Filtered ' + data.fields_filtered + ' fields' : data.reason || '',
-        isContextGated: true
+      document.querySelectorAll('.pending-deny').forEach((btn) => {
+        btn.addEventListener('click', async () => {
+          const id = btn.getAttribute('data-id');
+          await fetchAPI(\`/api/deny/\${id}\`);
+        });
       });
-    });
+    }
-    evtSource.addEventListener('injection-alert', (e) => {
-      const data = JSON.parse(e.data);
-      addActivityItem({
-        timestamp: data.timestamp,
-        tier: data.tier || 2,
-        tool: data.tool || 'unknown',
-        outcome: data.allowed ? 'allowed' : 'denied',
-        detail: data.signal || 'Injection detected',
-        hasInjection: true
-      });
-      addThreat({
-        timestamp: data.timestamp,
-        severity: data.severity || 'medium',
-        type: 'Injection Alert',
-        details: data.signal || 'Suspicious pattern detected'
-      });
-    });
+    // Threat Panel
+    function addThreatAlert(alert) {
+      const panel = document.querySelector('.threat-panel');
+      const content = document.getElementById('threat-alerts');
-    evtSource.addEventListener('protection-status', (e) => {
-      const data = JSON.parse(e.data);
-      updateProtectionStatus(data);
-    });
+      if (content.querySelector('.empty-state')) {
+        content.innerHTML = '';
+      }
-    evtSource.addEventListener('audit-entry', (e) => {
-      const data = JSON.parse(e.data);
-      // Audit entries don't show in activity by default, but we could add them
-    });
+      panel.classList.remove('collapsed');
-    evtSource.addEventListener('baseline-update', (e) => {
-      const data = JSON.parse(e.data);
-      updateBaseline(data);
-    });
-  }
+      const html = \`
+        <div class="threat-alert">
+          <div class="threat-type">\${esc(alert.type || 'Injection Alert')}</div>
+          <div class="threat-message">\${esc(alert.message || alert.pattern || '\u2014')}</div>
+        </div>
+      \`;
-  function updateBaseline(baseline) {
-    if (!baseline) return;
-    // Update baseline-derived stats if needed
-  }
+      content.insertAdjacentHTML('afterbegin', html);
-  function updatePolicy(policy) {
-    if (!policy) return;
-    // Update policy-derived stats
-    if (policy.approval_channel) {
-      // Policy info updated
+      const alerts = content.querySelectorAll('.threat-alert');
+      if (alerts.length > 10) {
+        alerts[alerts.length - 1].remove();
+      }
     }
-  }
-  function updateProtectionStatus(status) {
-    if (status.sovereignty_score !== undefined) {
-      updateSovereigntyScore(status.sovereignty_score);
-    }
-    if (status.active_protections !== undefined) {
-      document.getElementById('activeProtections').textContent = status.active_protections;
-    }
-    // Update individual protection cards
-    if (status.encryption !== undefined) {
-      const el = document.getElementById('encryptionStatus');
-      el.className = 'protection-card-status ' + (status.encryption ? 'active' : 'inactive');
-      el.textContent = status.encryption ? '\u2713 Active' : '\u2717 Inactive';
-    }
-    if (status.approval_gate !== undefined) {
-      const el = document.getElementById('approvalStatus');
-      el.className = 'protection-card-status ' + (status.approval_gate ? 'active' : 'inactive');
-      el.textContent = status.approval_gate ? '\u2713 Active' : '\u2717 Inactive';
-    }
-    if (status.context_gating !== undefined) {
-      const el = document.getElementById('contextStatus');
-      el.className = 'protection-card-status ' + (status.context_gating ? 'active' : 'inactive');
-      el.textContent = status.context_gating ? '\u2713 Active' : '\u2717 Inactive';
-    }
-    if (status.injection_detection !== undefined) {
-      const el = document.getElementById('injectionStatus');
-      el.className = 'protection-card-status ' + (status.injection_detection ? 'active' : 'inactive');
-      el.textContent = status.injection_detection ? '\u2713 Active' : '\u2717 Inactive';
-    }
-    if (status.baseline !== undefined) {
-      const el = document.getElementById('baselineStatus');
-      el.className = 'protection-card-status ' + (status.baseline ? 'active' : 'inactive');
-      el.textContent = status.baseline ? '\u2713 Active' : '\u2717 Inactive';
-    }
-    if (status.audit_trail !== undefined) {
-      const el = document.getElementById('auditStatus');
-      el.className = 'protection-card-status ' + (status.audit_trail ? 'active' : 'inactive');
-      el.textContent = status.audit_trail ? '\u2713 Active' : '\u2717 Inactive';
-    }
-  }
+    // Threat Panel Toggle
+    document.querySelector('.threat-header').addEventListener('click', () => {
+      document.querySelector('.threat-panel').classList.toggle('collapsed');
+    });
-  // \u2500\u2500 Initialization \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+    // SHR Copy Button
+    document.getElementById('copy-shr-btn').addEventListener('click', async () => {
+      if (!apiState.shr) return;
-  (async function init() {
-    await exchangeSession();
-    // Clean legacy ?token= from URL
-    if (window.location.search.includes('token=')) {
-      window.history.replaceState({}, '', window.location.pathname);
-    }
-    connect();
+      const json = JSON.stringify(apiState.shr, null, 2);
+      try {
+        await navigator.clipboard.writeText(json);
+        const btn = document.getElementById('copy-shr-btn');
+        const original = btn.textContent;
+        btn.textContent = 'Copied!';
+        setTimeout(() => {
+          btn.textContent = original;
+        }, 2000);
+      } catch (err) {
+        console.error('Copy failed:', err);
+      }
+    });
-    // Start uptime ticker
-    setInterval(updateUptime, 1000);
-    updateUptime();
+    // Pending Overlay Toggle
+    document.getElementById('pending-item-badge').addEventListener('click', () => {
+      document.getElementById('pending-overlay').classList.toggle('show');
+    });
-    // Pending request countdown timer
-    setInterval(() => {
-      for (const [id, req] of pendingRequests) {
-        req.remaining = Math.max(0, req.remaining - 1);
-        const el = document.getElementById('timer-' + id);
-        if (el) {
-          el.textContent = req.remaining + 's';
-        }
+    // Initialize
+    async function initialize() {
+      if (!AUTH_TOKEN) {
+        redirectToLogin();
+        return;
       }
-    }, 1000);
-    // Load initial status
-    try {
-      const resp = await fetch('/api/status', { headers: authHeaders() });
-      if (resp.ok) {
-        const status = await resp.json();
-        if (status.baseline) updateBaseline(status.baseline);
-        if (status.policy) updatePolicy(status.policy);
-      }
-    } catch (e) {
-      // Ignore
-    }
-  })();
+      // Initial data fetch
+      await Promise.all([
+        updateSovereignty(),
+        updateIdentity(),
+        updateHandshakes(),
+        updateSHR(),
+        updateStatus(),
+      ]);
-})();
-</script>
+      // Setup SSE for real-time updates
+      setupSSE();
+      // Refresh status periodically
+      setInterval(updateStatus, 30000);
+    }
+    // Start
+    initialize();
+  </script>
 </body>
 </html>`;
 }
@@ -7431,15 +7752,6 @@ function generateSHR(identityId, opts) {
       mitigation: "TEE attestation planned for a future release"
     });
   }
-  if (config.disclosure.proof_system === "commitment-only") {
-    degradations.push({
-      layer: "l3",
-      code: "COMMITMENT_ONLY",
-      severity: "info",
-      description: "Commitment schemes only (no ZK proofs)",
-      mitigation: "ZK proof support planned for future release"
-    });
-  }
   const body = {
     shr_version: "1.0",
     implementation: {
@@ -7465,9 +7777,9 @@ function generateSHR(identityId, opts) {
         attestation_available: config.execution.attestation
       },
       l3: {
-        status: config.disclosure.proof_system === "commitment-only" ? "degraded" : "active",
+        status: "active",
         proof_system: config.disclosure.proof_system,
-        selective_disclosure: config.disclosure.proof_system !== "commitment-only"
+        selective_disclosure: true
       },
       l4: {
         status: "active",
@@ -7680,7 +7992,7 @@ function extractAuthorizationSignals(body) {
     behavioral_baseline_active: false,
     // Would need explicit field in SHR v1.1
     identity_verified: l1.identity_type === "ed25519" || l1.identity_type !== "none",
-    zero_knowledge_capable: l3.status === "active" && l3.proof_system !== "commitment-only",
+    zero_knowledge_capable: l3.status === "active",
     selective_disclosure_active: l3.selective_disclosure,
     reputation_portable: l4.reputation_portable,
     handshake_capable: body.capabilities.handshake
@@ -7758,14 +8070,6 @@ function generateAuthorizationConstraints(body, _degradations) {
       priority: "high"
     });
   }
-  if (layers.l3.proof_system === "commitment-only") {
-    constraints.push({
-      type: "restricted_scope",
-      description: "No zero-knowledge proofs available \u2014 entire state context may be visible",
-      rationale: "Proof system is commitment-only (no ZK)",
-      priority: "medium"
-    });
-  }
   if (layers.l4.status === "degraded") {
     constraints.push({
       type: "known_agents_only",
@@ -8097,6 +8401,154 @@ function deriveTrustTier(level) {
   }
 }
+// src/handshake/attestation.ts
+init_encoding();
+init_encoding();
+var ATTESTATION_VERSION = "1.0";
+function deriveTrustTier2(level) {
+  switch (level) {
+    case "full":
+      return "verified-sovereign";
+    case "degraded":
+      return "verified-degraded";
+    default:
+      return "unverified";
+  }
+}
+function generateAttestation(opts) {
+  const {
+    attesterSHR,
+    subjectSHR,
+    verificationResult,
+    mutual = false,
+    identityManager,
+    masterKey,
+    identityId
+  } = opts;
+  const identity = identityId ? identityManager.get(identityId) : identityManager.getDefault();
+  if (!identity) {
+    return { error: "No identity available for signing attestation" };
+  }
+  const now = /* @__PURE__ */ new Date();
+  const attesterExpiry = new Date(attesterSHR.body.expires_at);
+  const subjectExpiry = new Date(subjectSHR.body.expires_at);
+  const earliestExpiry = attesterExpiry < subjectExpiry ? attesterExpiry : subjectExpiry;
+  const sovereigntyLevel = verificationResult.valid ? verificationResult.sovereignty_level : "unverified";
+  const body = {
+    attestation_version: ATTESTATION_VERSION,
+    attester_id: attesterSHR.body.instance_id,
+    subject_id: subjectSHR.body.instance_id,
+    attester_shr: attesterSHR,
+    subject_shr: subjectSHR,
+    verification: {
+      subject_shr_valid: verificationResult.valid,
+      subject_sovereignty_level: sovereigntyLevel,
+      subject_trust_tier: deriveTrustTier2(sovereigntyLevel),
+      mutual,
+      errors: verificationResult.errors,
+      warnings: verificationResult.warnings
+    },
+    attested_at: now.toISOString(),
+    expires_at: earliestExpiry.toISOString()
+  };
+  const canonical = JSON.stringify(deepSortKeys(body));
+  const payload = stringToBytes(canonical);
+  const encryptionKey = derivePurposeKey(masterKey, "identity-encryption");
+  const signatureBytes = sign(
+    payload,
+    identity.encrypted_private_key,
+    encryptionKey
+  );
+  const summary = generateSummary(body);
+  return {
+    body,
+    signed_by: identity.public_key,
+    signature: toBase64url(signatureBytes),
+    summary
+  };
+}
+function layerLine(label, status) {
+  const icon = status === "active" ? "\u2713" : status === "degraded" ? "~" : "x";
+  return `  ${icon} ${label}: ${status}`;
+}
+function generateSummary(body) {
+  const v = body.verification;
+  const sLayers = body.subject_shr.body.layers;
+  const aLayers = body.attester_shr.body.layers;
+  const tierLabel = v.subject_trust_tier === "verified-sovereign" ? "Verified Sovereign" : v.subject_trust_tier === "verified-degraded" ? "Verified (Degraded)" : "Unverified";
+  const lines = [
+    `--- Sovereignty Attestation ---`,
+    ``,
+    `Attester: ${body.attester_id.slice(0, 16)}...`,
+    `Subject:  ${body.subject_id.slice(0, 16)}...`,
+    `Result:   ${tierLabel}`,
+    ``,
+    `Subject Sovereignty Posture:`,
+    layerLine("L1 Cognitive Sovereignty", sLayers.l1.status),
+    layerLine("L2 Operational Isolation", sLayers.l2.status),
+    layerLine("L3 Selective Disclosure", sLayers.l3.status),
+    layerLine("L4 Verifiable Reputation", sLayers.l4.status),
+    ``,
+    `Attester Sovereignty Posture:`,
+    layerLine("L1 Cognitive Sovereignty", aLayers.l1.status),
+    layerLine("L2 Operational Isolation", aLayers.l2.status),
+    layerLine("L3 Selective Disclosure", aLayers.l3.status),
+    layerLine("L4 Verifiable Reputation", aLayers.l4.status),
+    ``,
+    `Mutual: ${v.mutual ? "Yes" : "One-sided"}`,
+    `Attested: ${body.attested_at}`,
+    `Expires:  ${body.expires_at}`,
+    `Signature: ${body.attestation_version} / Ed25519`
+  ];
+  if (v.warnings.length > 0) {
+    lines.push(``, `Warnings: ${v.warnings.join("; ")}`);
+  }
+  if (v.errors.length > 0) {
+    lines.push(``, `Errors: ${v.errors.join("; ")}`);
+  }
+  lines.push(``, `--- Verify: compare signed_by against attester's known public key ---`);
+  return lines.join("\n");
+}
+function verifyAttestation(attestation, now) {
+  const errors = [];
+  const currentTime = now ?? /* @__PURE__ */ new Date();
+  if (attestation.body.attestation_version !== ATTESTATION_VERSION) {
+    errors.push(
+      `Unsupported attestation version: ${attestation.body.attestation_version}`
+    );
+  }
+  if (!attestation.body.attester_id || !attestation.body.subject_id) {
+    errors.push("Missing attester_id or subject_id");
+  }
+  if (!attestation.body.attester_shr || !attestation.body.subject_shr) {
+    errors.push("Missing attester or subject SHR");
+  }
+  const expired = new Date(attestation.body.expires_at) <= currentTime;
+  if (expired) {
+    errors.push("Attestation has expired");
+  }
+  try {
+    const publicKey = fromBase64url(attestation.signed_by);
+    const canonical = JSON.stringify(deepSortKeys(attestation.body));
+    const payload = stringToBytes(canonical);
+    const signatureBytes = fromBase64url(attestation.signature);
+    const signatureValid = verify(payload, signatureBytes, publicKey);
+    if (!signatureValid) {
+      errors.push("Attestation signature is invalid");
+    }
+  } catch (e) {
+    errors.push(`Signature verification error: ${e.message}`);
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    attester_id: attestation.body.attester_id ?? "unknown",
+    subject_id: attestation.body.subject_id ?? "unknown",
+    trust_tier: errors.length === 0 ? attestation.body.verification.subject_trust_tier : "unverified",
+    expired
+  };
+}
 // src/handshake/tools.ts
 function createHandshakeTools(config, identityManager, masterKey, auditLog) {
   const sessions = /* @__PURE__ */ new Map();
@@ -8282,6 +8734,103 @@ function createHandshakeTools(config, identityManager, masterKey, auditLog) {
           result: session.result ?? null
         });
       }
+    },
+    // ─── Streamlined Exchange ─────────────────────────────────────────
+    {
+      name: "sanctuary/handshake_exchange",
+      description: "One-shot sovereignty exchange. Accepts a counterparty's signed SHR, verifies it, generates our SHR, and produces a signed attestation artifact \u2014 all in a single call. Returns a shareable attestation with human-readable summary. Use this instead of the 4-step handshake protocol when you want a quick, portable sovereignty verification (e.g., for social posting or async exchanges).",
+      inputSchema: {
+        type: "object",
+        properties: {
+          counterparty_shr: {
+            type: "object",
+            description: "The counterparty's signed SHR (SignedSHR object with body, signed_by, signature)."
+          },
+          identity_id: {
+            type: "string",
+            description: "Identity to use for the exchange. Defaults to primary identity."
+          }
+        },
+        required: ["counterparty_shr"]
+      },
+      handler: async (args) => {
+        const counterpartySHR = args.counterparty_shr;
+        const ourSHR = generateSHR(args.identity_id, shrOpts);
+        if (typeof ourSHR === "string") {
+          return toolResult({ error: ourSHR });
+        }
+        const verificationResult = verifySHR(counterpartySHR);
+        const attestation = generateAttestation({
+          attesterSHR: ourSHR,
+          subjectSHR: counterpartySHR,
+          verificationResult,
+          mutual: false,
+          identityManager,
+          masterKey,
+          identityId: args.identity_id
+        });
+        if ("error" in attestation) {
+          auditLog.append("l4", "handshake_exchange", ourSHR.body.instance_id, void 0, "failure");
+          return toolResult({ error: attestation.error });
+        }
+        if (verificationResult.valid) {
+          const sovereigntyLevel = verificationResult.sovereignty_level;
+          const trustTier = sovereigntyLevel === "full" ? "verified-sovereign" : sovereigntyLevel === "degraded" ? "verified-degraded" : "unverified";
+          handshakeResults.set(verificationResult.counterparty_id, {
+            counterparty_id: verificationResult.counterparty_id,
+            counterparty_shr: counterpartySHR,
+            verified: true,
+            sovereignty_level: sovereigntyLevel,
+            trust_tier: trustTier,
+            completed_at: (/* @__PURE__ */ new Date()).toISOString(),
+            expires_at: verificationResult.expires_at,
+            errors: []
+          });
+        }
+        auditLog.append("l4", "handshake_exchange", ourSHR.body.instance_id);
+        return toolResult({
+          attestation,
+          our_shr: ourSHR,
+          verification: {
+            counterparty_valid: verificationResult.valid,
+            counterparty_sovereignty: verificationResult.sovereignty_level,
+            counterparty_id: verificationResult.counterparty_id,
+            errors: verificationResult.errors,
+            warnings: verificationResult.warnings
+          },
+          instructions: "The 'attestation' object is a signed, portable sovereignty verification artifact. Share it with the counterparty or post attestation.summary publicly. The counterparty can verify the attestation signature using your public key. Our SHR is included so the counterparty can perform their own verification of us.",
+          _content_trust: "external"
+        });
+      }
+    },
+    {
+      name: "sanctuary/handshake_verify_attestation",
+      description: "Verify a signed attestation artifact from another agent. Checks the Ed25519 signature, temporal validity, and structural integrity.",
+      inputSchema: {
+        type: "object",
+        properties: {
+          attestation: {
+            type: "object",
+            description: "The SignedAttestation object to verify (body, signed_by, signature, summary)."
+          }
+        },
+        required: ["attestation"]
+      },
+      handler: async (args) => {
+        const attestation = args.attestation;
+        const result = verifyAttestation(attestation);
+        auditLog.append(
+          "l4",
+          "handshake_verify_attestation",
+          result.attester_id,
+          void 0,
+          result.valid ? "success" : "failure"
+        );
+        return toolResult({
+          ...result,
+          _content_trust: "external"
+        });
+      }
     }
   ];
   return { tools, handshakeResults };
@@ -11893,11 +12442,6 @@ async function createSanctuaryServer(options) {
         degradations.push(
           "L2 isolation is process-level only; no TEE available"
         );
-        if (config.disclosure.proof_system === "commitment-only") {
-          degradations.push(
-            "L3 proofs are commitment-based only; ZK proofs not yet available"
-          );
-        }
         return toolResult({
           attestation: {
             environment_type: config.execution.environment,
@@ -11923,7 +12467,7 @@ async function createSanctuaryServer(options) {
               l1_state_encrypted: true,
               l2_execution_isolated: false,
               l2_isolation_type: "process-level",
-              l3_proofs_available: config.disclosure.proof_system !== "commitment-only",
+              l3_proofs_available: true,
               l4_reputation_active: true,
               overall_level: "mvs",
               degradations
@@ -11946,14 +12490,6 @@ async function createSanctuaryServer(options) {
           severity: "warning",
           mitigation: "TEE support planned for a future release"
         });
-        if (config.disclosure.proof_system === "commitment-only") {
-          degradations.push({
-            layer: "l3",
-            description: "Commitment schemes only (no ZK proofs)",
-            severity: "info",
-            mitigation: "ZK proof support planned for v0.2.0"
-          });
-        }
         return toolResult({
           status: degradations.some((d) => d.severity === "critical") ? "compromised" : degradations.some((d) => d.severity === "warning") ? "degraded" : "healthy",
           storage_bytes: storageSizeBytes,
@@ -11972,7 +12508,7 @@ async function createSanctuaryServer(options) {
               last_attestation: (/* @__PURE__ */ new Date()).toISOString()
             },
             l3: {
-              status: config.disclosure.proof_system === "commitment-only" ? "degraded" : "active",
+              status: "active",
               proof_system: config.disclosure.proof_system,
               circuits_loaded: 0,
               proofs_generated_total: 0
@@ -12252,6 +12788,7 @@ async function createSanctuaryServer(options) {
   return { server, config };
 }
+exports.ATTESTATION_VERSION = ATTESTATION_VERSION;
 exports.ApprovalGate = ApprovalGate;
 exports.AuditLog = AuditLog;
 exports.AutoApproveChannel = AutoApproveChannel;
@@ -12283,6 +12820,7 @@ exports.createRangeProof = createRangeProof;
 exports.createSanctuaryServer = createSanctuaryServer;
 exports.evaluateField = evaluateField;
 exports.filterContext = filterContext;
+exports.generateAttestation = generateAttestation;
 exports.generateSHR = generateSHR;
 exports.getTemplate = getTemplate;
 exports.initiateHandshake = initiateHandshake;
@@ -12294,6 +12832,7 @@ exports.resolveTier = resolveTier;
 exports.respondToHandshake = respondToHandshake;
 exports.signPayload = signPayload;
 exports.tierDistribution = tierDistribution;
+exports.verifyAttestation = verifyAttestation;
 exports.verifyBridgeCommitment = verifyBridgeCommitment;
 exports.verifyCompletion = verifyCompletion;
 exports.verifyPedersenCommitment = verifyPedersenCommitment;