npm - @way_marks/server - Versions diffs - 2.0.3 → 3.0.0 - Mend

@way_marks/server 2.0.3 → 3.0.0

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 (64) hide show

package/src/ui/index.html DELETED Viewed

@@ -1,1452 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>waymark — agent action viewer</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: monospace; font-size: 13px; background: #0f0f0f; color: #d0d0d0; padding: 16px; }
-    h1 { font-size: 18px; margin-bottom: 4px; color: #fff; }
-    .subtitle { color: #555; margin-bottom: 16px; font-size: 12px; }
-    .meta { display: flex; gap: 16px; margin-bottom: 12px; color: #666; font-size: 11px; }
-    table { width: 100%; border-collapse: collapse; }
-    th { text-align: left; padding: 6px 8px; background: #1a1a1a; color: #888; font-weight: normal; border-bottom: 1px solid #333; }
-    td { padding: 6px 8px; border-bottom: 1px solid #1e1e1e; vertical-align: top; }
-    tr:hover td { background: #161616; }
-    .badge { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }
-    .badge-write_file { background: #7c3a00; color: #ffb347; }
-    .badge-read_file  { background: #002f5c; color: #5ab4ff; }
-    .badge-bash       { background: #222; color: #aaa; border: 1px solid #444; }
-     .event-execution  { opacity: 1; }
-     .event-observation { opacity: 0.6; background: #0a0a0a; }
-     .observation-label { display: inline-block; padding: 1px 4px; background: #333; color: #999; font-size: 10px; border-radius: 2px; margin-left: 4px; }
-    .decision-block    { background: #5c0000; color: #ff6b6b; }
-    .decision-pending  { background: #4a3800; color: #ffd166; }
-    .decision-rejected { background: #3a0000; color: #ff9999; }
-    .status-success { color: #4caf50; }
-    .status-error   { color: #f44336; }
-    .status-pending { color: #ffb347; }
-    .status-blocked { color: #ff6b6b; }
-    .path { color: #888; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
-    button.rollback {
-      background: #3a1f00; border: 1px solid #7c3a00; color: #ffb347;
-      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
-      border-radius: 3px;
-    }
-    button.rollback:hover { background: #5c3000; }
-    button.rollback:disabled { opacity: 0.4; cursor: default; }
-    .msg-ok  { color: #4caf50; margin-left: 6px; }
-    .msg-err { color: #f44336; margin-left: 6px; }
-    .rolled-back { color: #555; font-size: 11px; }
-    #status-bar { position: fixed; bottom: 8px; right: 16px; color: #333; font-size: 11px; }
-    .empty { padding: 32px; text-align: center; color: #444; }
-    /* Config viewer */
-    #config-section { margin-top: 24px; }
-    #config-toggle {
-      background: none; border: 1px solid #333; color: #888; padding: 4px 10px;
-      cursor: pointer; font-family: monospace; font-size: 12px; border-radius: 3px;
-    }
-    #config-toggle:hover { border-color: #555; color: #aaa; }
-    #config-content { display: none; margin-top: 12px; padding: 12px; background: #141414; border: 1px solid #222; border-radius: 4px; }
-    #config-content h3 { color: #666; font-size: 11px; font-weight: normal; margin-bottom: 10px; }
-    .policy-group { margin-bottom: 12px; }
-    .policy-group h4 { font-size: 11px; color: #555; margin-bottom: 4px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.05em; }
-    .policy-group ul { list-style: none; padding: 0; }
-    .policy-group li { padding: 2px 0; font-size: 12px; }
-    .policy-allow { color: #4caf50; }
-    .policy-block  { color: #ff6b6b; }
-    .policy-pending { color: #ffd166; }
-    /* v3: approval flow */
-    .status-rejected { color: #e57373; }
-    .status-approved { color: #4caf50; }
-    .btn-approve {
-      background: #003a1a; border: 1px solid #2e7d32; color: #81c784;
-      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
-      border-radius: 3px; margin-right: 4px;
-    }
-    .btn-approve:hover { background: #1b5e20; }
-    .btn-approve:disabled { opacity: 0.4; cursor: default; }
-    .btn-reject {
-      background: #3a0000; border: 1px solid #7f0000; color: #ef9a9a;
-      padding: 2px 8px; cursor: pointer; font-size: 11px; font-family: monospace;
-      border-radius: 3px;
-    }
-    .btn-reject:hover { background: #5c0000; }
-    .btn-reject:disabled { opacity: 0.4; cursor: default; }
-    .reject-input {
-      background: #1a1a1a; border: 1px solid #444; color: #ccc;
-      padding: 2px 6px; font-family: monospace; font-size: 11px;
-      border-radius: 3px; width: 120px; margin-right: 4px;
-    }
-    #pending-badge {
-      background: #7f0000; color: #ef9a9a; border-radius: 3px;
-      padding: 1px 6px; font-size: 13px; margin-left: 8px;
-    }
-    /* Phase 2: Hub navigation sidebar */
-    #hub-nav { display: none; position: fixed; left: 0; top: 0; width: 200px; height: 100vh; background: #0a0a0a; border-right: 1px solid #222; padding: 12px; overflow-y: auto; }
-    #hub-nav.open { display: block; }
-    #main-content { margin-left: 0; }
-    #main-content.with-nav { margin-left: 200px; }
-    #hub-toggle { position: fixed; left: 8px; top: 8px; background: none; border: 1px solid #333; color: #888; padding: 4px 6px; cursor: pointer; font-size: 12px; border-radius: 3px; z-index: 1000; }
-    #hub-nav h3 { font-size: 11px; color: #666; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: 0.05em; }
-    .project-list { list-style: none; padding: 0; }
-    .project-item { padding: 6px 4px; margin: 2px 0; border-radius: 2px; cursor: pointer; font-size: 12px; border-left: 2px solid transparent; }
-    .project-item.running { color: #81c784; border-left-color: #4caf50; }
-    .project-item.running:hover { background: #1a1a1a; }
-    .project-item.paused { color: #ffd166; border-left-color: #ffa000; }
-    .project-item.paused:hover { background: #1a1a1a; }
-    .project-item.stopped { color: #888; border-left-color: #555; }
-    .project-item.stopped:hover { background: #1a1a1a; }
-    .project-item.current { background: #1a1a1a; border-left-color: #5ab4ff; }
-    .project-port { font-size: 10px; color: #555; margin-left: 4px; }
-    /* Phase 1: Tab switcher */
-    .tab-button { transition: color 0.2s, border-color 0.2s; }
-    .tab-button.active { color: #5ab4ff; border-bottom-color: #5ab4ff !important; font-weight: bold; }
-    .tab-content { display: none; }
-    .tab-content.active { display: block; }
-    #sessions-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
-    #sessions-table thead tr { background: #1a1a1a; }
-    #sessions-table th, #sessions-table td { padding: 6px 8px; border-bottom: 1px solid #1e1e1e; text-align: left; }
-    #sessions-table tbody tr:hover { background: #161616; }
-    .session-status-active { color: #4caf50; }
-    .session-status-rolled_back { color: #5ab4ff; }
-    .session-id { color: #888; font-size: 11px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .btn-view-session { background: #003a5c; border: 1px solid #0066cc; color: #5ab4ff; padding: 2px 6px; cursor: pointer; font-size: 10px; font-family: monospace; border-radius: 2px; margin-right: 2px; }
-    .btn-view-session:hover { background: #004080; }
-    .btn-rollback-session { background: #3a1f00; border: 1px solid #7c3a00; color: #ffb347; padding: 2px 6px; cursor: pointer; font-size: 10px; font-family: monospace; border-radius: 2px; }
-    .btn-rollback-session:hover { background: #5c3000; }
-    .btn-rollback-session:disabled { opacity: 0.4; cursor: default; }
-  </style>
-</head>
-<body>
-  <h1>waymark <span id="project-name" style="color:#555"></span><span id="pending-badge" style="display:none"></span></h1>
-  <p class="subtitle">uglybugly agent action viewer — intercepts and logs MCP tool calls</p>
-  <div class="meta">
-    <span id="count-display">loading...</span>
-    <span id="refresh-display"></span>
-  </div>
-  <div style="margin-bottom:16px;font-size:12px">
-    <!-- Phase 1: Event type filters -->
-    <div style="margin-bottom:12px">
-      <span style="color:#888">Event:</span>
-      <label style="margin-left:8px"><input type="checkbox" id="filter-execution" checked> Execution</label>
-      <label style="margin-left:12px"><input type="checkbox" id="filter-observation" checked> Observation</label>
-    </div>
-    <!-- Phase 3: Status and tool filters -->
-    <div style="margin-bottom:12px">
-      <span style="color:#888">Status:</span>
-      <select id="filter-status" style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333">
-        <option value="">All Statuses</option>
-        <option value="pending">Pending</option>
-        <option value="success">Success</option>
-        <option value="rejected">Rejected</option>
-      </select>
-    </div>
-    <div style="margin-bottom:12px">
-      <span style="color:#888">Tool:</span>
-      <select id="filter-tool" style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333">
-        <option value="">All Tools</option>
-        <option value="write_file">write_file</option>
-        <option value="read_file">read_file</option>
-        <option value="bash">bash</option>
-      </select>
-    </div>
-    <div style="margin-bottom:12px">
-      <span style="color:#888">Search:</span>
-      <input type="text" id="filter-search" placeholder="action ID or path..." style="margin-left:8px;padding:2px;font-family:monospace;font-size:11px;background:#1a1a1a;color:#d0d0d0;border:1px solid #333;width:200px">
-    </div>
-  </div>
-  <!-- Phase 1 & 2: View tabs -->
-  <div style="margin-bottom:12px; border-bottom: 1px solid #333; padding-bottom: 8px;">
-    <button id="tab-actions" class="tab-button" data-tab="actions" style="background: none; border: none; color: #5ab4ff; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid #5ab4ff; font-weight: bold;">Actions</button>
-    <button id="tab-sessions" class="tab-button" data-tab="sessions" style="background: none; border: none; color: #888; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent;">Sessions (Phase 1)</button>
-    <button id="tab-team" class="tab-button" data-tab="team" style="background: none; border: none; color: #888; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent;">Team (Phase 2)</button>
-    <button id="tab-approvals" class="tab-button" data-tab="approvals" style="background: none; border: none; color: #888; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent;">Approvals (Phase 2)</button>
-    <button id="tab-escalations" class="tab-button" data-tab="escalations" style="background: none; border: none; color: #888; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent;">Escalations (Phase 3)</button>
-    <button id="tab-remediation" class="tab-button" data-tab="remediation" style="background: none; border: none; color: #888; padding: 4px 12px; cursor: pointer; font-family: monospace; font-size: 12px; border-bottom: 2px solid transparent;">Remediation (Phase 4)</button>
-  </div>
-  <button id="hub-toggle">📋</button>
-  <nav id="hub-nav">
-    <h3>Projects</h3>
-    <ul id="project-list" class="project-list"></ul>
-  </nav>
-  <div id="main-content">
-  <!-- Actions Tab -->
-  <div id="tab-actions-content" class="tab-content active">
-  <table>
-    <thead>
-      <tr>
-        <th>Time</th>
-        <th>Tool</th>
-        <th>Decision</th>
-        <th>Target / Command</th>
-        <th>Status</th>
-        <th>Stdout</th>
-        <th>Action</th>
-      </tr>
-    </thead>
-    <tbody id="action-tbody">
-      <tr><td colspan="7" class="empty">loading...</td></tr>
-    </tbody>
-  </table>
-  </div>
-  <!-- Phase 1: Sessions Tab -->
-  <div id="tab-sessions-content" class="tab-content">
-    <table id="sessions-table">
-      <thead>
-        <tr>
-          <th>Session ID</th>
-          <th>Actions</th>
-          <th>Created</th>
-          <th>Status</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody id="sessions-tbody">
-        <tr><td colspan="5" class="empty">loading...</td></tr>
-      </tbody>
-    </table>
-    <div id="session-details" style="display:none; margin-top: 16px; padding: 12px; background: #141414; border: 1px solid #222; border-radius: 4px;">
-      <h3 style="color: #888; margin-bottom: 8px;">Session Details</h3>
-      <div id="session-details-content"></div>
-    </div>
-  </div>
-  <!-- Phase 2: Team Tab -->
-  <div id="tab-team-content" class="tab-content">
-    <div style="margin-bottom: 16px;">
-      <h3>Team Members</h3>
-      <div style="margin-top: 8px; padding: 8px; background: #141414; border-radius: 3px;">
-        <input id="new-member-name" type="text" placeholder="Name" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;" />
-        <input id="new-member-email" type="email" placeholder="Email" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;" />
-        <button id="add-team-member-btn" style="padding: 4px 8px; background: #003a4d; border: 1px solid #00556b; color: #5ab4ff; cursor: pointer; border-radius: 2px;">Add Member</button>
-      </div>
-    </div>
-    <table id="team-members-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Email</th>
-          <th>Role</th>
-          <th>Added</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody id="team-tbody">
-        <tr><td colspan="5" class="empty">loading...</td></tr>
-      </tbody>
-    </table>
-  </div>
-  <!-- Phase 2: Approvals Tab -->
-  <div id="tab-approvals-content" class="tab-content">
-    <div style="margin-bottom: 16px;">
-      <h3>Approval Routing Rules</h3>
-      <div style="margin-top: 8px; padding: 8px; background: #141414; border-radius: 3px;">
-        <input id="new-route-name" type="text" placeholder="Route name" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;" />
-        <select id="new-route-type" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;">
-          <option value="all_sessions">All Sessions</option>
-          <option value="high_impact">High Impact</option>
-        </select>
-        <button id="create-route-btn" style="padding: 4px 8px; background: #003a4d; border: 1px solid #00556b; color: #5ab4ff; cursor: pointer; border-radius: 2px;">Create Route</button>
-      </div>
-    </div>
-    <table id="routes-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Type</th>
-          <th>Approvers</th>
-          <th>Created</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody id="routes-tbody">
-        <tr><td colspan="5" class="empty">loading...</td></tr>
-      </tbody>
-    </table>
-    <div style="margin-top: 24px; border-top: 1px solid #333; padding-top: 16px;">
-      <h3>Pending Approvals</h3>
-      <table id="approvals-queue-table">
-        <thead>
-          <tr>
-            <th>Session</th>
-            <th>Requester</th>
-            <th>Status</th>
-            <th>Approvals Needed</th>
-            <th>Created</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody id="approvals-queue-tbody">
-          <tr><td colspan="6" class="empty">loading...</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-  <!-- Phase 3: Escalations Tab -->
-  <div id="tab-escalations-content" class="tab-content">
-    <div style="margin-bottom: 16px;">
-      <h3>Escalation Rules</h3>
-      <div style="margin-top: 8px; padding: 8px; background: #141414; border-radius: 3px;">
-        <input id="new-escalation-name" type="text" placeholder="Rule name" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;" />
-        <input id="new-escalation-timeout" type="number" placeholder="Timeout (hours)" style="padding: 4px; margin-right: 6px; background: #0a0a0a; border: 1px solid #333; color: #d0d0d0; border-radius: 2px;" />
-        <button id="create-escalation-rule-btn" style="padding: 4px 8px; background: #3a2a00; border: 1px solid #7c5a00; color: #ffb347; cursor: pointer; border-radius: 2px;">Create Rule</button>
-      </div>
-    </div>
-    <table id="escalation-rules-table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Timeout (hours)</th>
-          <th>Targets</th>
-          <th>Created</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody id="escalation-rules-tbody">
-        <tr><td colspan="5" class="empty">loading...</td></tr>
-      </tbody>
-    </table>
-    <div style="margin-top: 24px; border-top: 1px solid #333; padding-top: 16px;">
-      <h3>Pending Escalations</h3>
-      <table id="escalation-queue-table">
-        <thead>
-          <tr>
-            <th>Session</th>
-            <th>Requester</th>
-            <th>Status</th>
-            <th>Deadline</th>
-            <th>Action</th>
-          </tr>
-        </thead>
-        <tbody id="escalation-queue-tbody">
-          <tr><td colspan="5" class="empty">loading...</td></tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-  <!-- Phase 4: Remediation Tab -->
-  <div id="tab-remediation-content" class="tab-content">
-    <div style="margin-bottom: 16px;">
-      <h3>Risk Assessment</h3>
-      <div style="background: #1a1a1a; padding: 12px; border-radius: 3px; margin-bottom: 16px;">
-        <div style="font-size: 24px; font-weight: bold; margin-bottom: 8px;">
-          Risk Score: <span id="risk-score" style="color: #ffb347;">—</span>/10
-        </div>
-        <div>
-          Risk Level: <span id="risk-level" style="color: #ffb347;">—</span>
-        </div>
-        <div style="margin-top: 12px; font-size: 12px; color: #888;">
-          <div id="risk-factors" style="margin-top: 8px;">Loading risk assessment...</div>
-        </div>
-      </div>
-    </div>
-    <div style="margin-bottom: 16px;">
-      <h3>Policy Compliance</h3>
-      <table id="policy-status-table">
-        <thead>
-          <tr>
-            <th>Policy</th>
-            <th>Category</th>
-            <th>Status</th>
-            <th>Violations</th>
-          </tr>
-        </thead>
-        <tbody id="policy-status-tbody">
-          <tr><td colspan="4" class="empty">No policy violations detected</td></tr>
-        </tbody>
-      </table>
-    </div>
-    <div style="margin-bottom: 16px;">
-      <h3>Remediation Recommendations</h3>
-      <div id="remediation-recommendations" style="background: #0a0a0a; padding: 12px; border-radius: 3px;">
-        <div style="margin-bottom: 12px;">
-          <strong>Primary Strategy:</strong>
-          <div id="primary-strategy" style="color: #4caf50; margin-top: 4px;">—</div>
-        </div>
-        <div style="margin-bottom: 12px;">
-          <strong>Alternative Strategies:</strong>
-          <div id="alternative-strategies" style="color: #888; font-size: 12px; margin-top: 4px;">—</div>
-        </div>
-        <div style="margin-bottom: 12px;">
-          <strong>Estimated Safety:</strong>
-          <div id="estimated-safety" style="color: #ffb347; margin-top: 4px;">—</div>
-        </div>
-        <div>
-          <strong>Required Approvals:</strong>
-          <div id="required-approvals" style="color: #888; font-size: 12px; margin-top: 4px;">—</div>
-        </div>
-      </div>
-    </div>
-    <div style="margin-bottom: 16px;">
-      <h3>Active Block Rules</h3>
-      <table id="block-rules-table">
-        <thead>
-          <tr>
-            <th>Rule</th>
-            <th>Condition</th>
-            <th>Action</th>
-            <th>Message</th>
-          </tr>
-        </thead>
-        <tbody id="block-rules-tbody">
-          <tr><td colspan="4" class="empty">No active block rules</td></tr>
-        </tbody>
-      </table>
-    </div>
-    <div style="margin-bottom: 16px;">
-      <button id="run-assessment-btn" style="padding: 8px 12px; background: #2a5a2a; border: 1px solid #4caf50; color: #4caf50; cursor: pointer; border-radius: 2px;">
-        Run Risk Assessment
-      </button>
-      <button id="override-block-btn" style="padding: 8px 12px; background: #5a2a2a; border: 1px solid #f44336; color: #f44336; cursor: pointer; border-radius: 2px; margin-left: 8px; display: none;">
-        Admin Override Block
-      </button>
-    </div>
-  </div>
-  <div id="config-section">
-    <button id="config-toggle">▶ Current Policy</button>
-    <div id="config-content">
-      <h3>waymark.config.json</h3>
-      <div id="config-body">loading...</div>
-    </div>
-  </div>
-  <div id="status-bar">auto-refresh every 3s</div>
-  </div>
-  <script>
-    function timeAgo(dateStr) {
-      const now = new Date();
-      const then = new Date(dateStr + (dateStr.includes('Z') ? '' : 'Z'));
-      const diff = Math.floor((now - then) / 1000);
-      if (diff < 5)  return 'just now';
-      if (diff < 60) return diff + 's ago';
-      if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
-      if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
-      return Math.floor(diff / 86400) + 'd ago';
-    }
-    function toolBadge(name) {
-      return `<span class="badge badge-${name}">${name}</span>`;
-    }
-    function statusLabel(status) {
-      return `<span class="status-${status}">${status}</span>`;
-    }
-    function decisionBadge(row) {
-      const d = row.decision || 'allow';
-      if (d === 'block') {
-        const tip = row.policy_reason ? row.policy_reason.replace(/"/g, '&quot;') : '';
-        return `<span class="badge decision-block" title="${tip}">blocked</span>`;
-      }
-      if (d === 'pending') {
-        const tip = row.policy_reason ? row.policy_reason.replace(/"/g, '&quot;') : '';
-        return `<span class="badge decision-pending" title="${tip}">pending</span>`;
-      }
-      if (d === 'rejected') {
-        const tip = row.rejected_reason ? row.rejected_reason.replace(/"/g, '&quot;') : '';
-        return `<span class="badge decision-rejected" title="${tip}">rejected</span>`;
-      }
-      return `<span style="color:#333">—</span>`;
-    }
-    function truncatePath(p) {
-      if (!p) return '<span style="color:#444">—</span>';
-      const parts = p.replace(/\\/g, '/').split('/');
-      const display = parts.length > 3 ? '…/' + parts.slice(-3).join('/') : p;
-      return `<span class="path" title="${p}">${display}</span>`;
-    }
-    function getTargetDisplay(row) {
-      if (row.tool_name === 'bash') {
-        const cmd = JSON.parse(row.input_payload).command || '';
-        const short = cmd.length > 60 ? cmd.slice(0, 57) + '...' : cmd;
-        return `<span class="path" title="${cmd.replace(/"/g, '&quot;')}">${short}</span>`;
-      }
-      return truncatePath(row.target_path);
-    }
-    async function doRollback(actionId, btn, msgSpan, isNewFile) {
-      btn.disabled = true;
-      btn.textContent = isNewFile ? 'deleting...' : 'rolling back...';
-      try {
-        const res = await fetch(`/api/actions/${actionId}/rollback`, { method: 'POST' });
-        const data = await res.json();
-        if (res.ok) {
-          msgSpan.className = 'msg-ok';
-          msgSpan.textContent = data.action === 'deleted' ? '✓ deleted' : '✓ restored';
-          btn.textContent = data.action === 'deleted' ? 'deleted' : 'rolled back';
-        } else {
-          msgSpan.className = 'msg-err';
-          msgSpan.textContent = '✗ ' + (data.error || 'failed');
-          btn.disabled = false;
-          btn.textContent = isNewFile ? 'delete (new file)' : 'rollback';
-        }
-      } catch (e) {
-        msgSpan.className = 'msg-err';
-        msgSpan.textContent = '✗ network error';
-        btn.disabled = false;
-        btn.textContent = isNewFile ? 'delete (new file)' : 'rollback';
-      }
-    }
-    async function doApprove(actionId, btn, msgSpan) {
-      btn.disabled = true;
-      btn.textContent = 'approving...';
-      try {
-        const res = await fetch(`/api/actions/${actionId}/approve`, { method: 'POST' });
-        const data = await res.json();
-        if (res.ok) {
-          msgSpan.className = 'msg-ok';
-          msgSpan.textContent = '✓ approved';
-          // Full refresh to get updated row
-          setTimeout(refresh, 300);
-        } else {
-          msgSpan.className = 'msg-err';
-          msgSpan.textContent = '✗ ' + (data.error || 'failed');
-          btn.disabled = false;
-          btn.textContent = '✅ Approve';
-        }
-      } catch (e) {
-        msgSpan.className = 'msg-err';
-        msgSpan.textContent = '✗ network error';
-        btn.disabled = false;
-        btn.textContent = '✅ Approve';
-      }
-    }
-    async function doReject(actionId, btn, rejectBtn, msgSpan) {
-      // Show inline input for reason
-      rejectBtn.disabled = true;
-      const inputEl = document.createElement('input');
-      inputEl.className = 'reject-input';
-      inputEl.type = 'text';
-      inputEl.value = 'Not approved';
-      inputEl.placeholder = 'reason...';
-      const confirmBtn = document.createElement('button');
-      confirmBtn.className = 'btn-reject';
-      confirmBtn.textContent = 'Confirm';
-      rejectBtn.replaceWith(inputEl);
-      msgSpan.parentNode.insertBefore(confirmBtn, msgSpan);
-      confirmBtn.addEventListener('click', async () => {
-        confirmBtn.disabled = true;
-        inputEl.disabled = true;
-        confirmBtn.textContent = 'rejecting...';
-        try {
-          const res = await fetch(`/api/actions/${actionId}/reject`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ reason: inputEl.value || 'Not approved' }),
-          });
-          const data = await res.json();
-          if (res.ok) {
-            msgSpan.className = 'msg-ok';
-            msgSpan.textContent = '✓ rejected';
-            setTimeout(refresh, 300);
-          } else {
-            msgSpan.className = 'msg-err';
-            msgSpan.textContent = '✗ ' + (data.error || 'failed');
-            confirmBtn.disabled = false;
-            confirmBtn.textContent = 'Confirm';
-          }
-        } catch (e) {
-          msgSpan.className = 'msg-err';
-          msgSpan.textContent = '✗ network error';
-          confirmBtn.disabled = false;
-          confirmBtn.textContent = 'Confirm';
-        }
-      });
-    }
-    function renderActions(actions) {
-      const tbody = document.getElementById('action-tbody');
-      if (!actions.length) {
-        tbody.innerHTML = '<tr><td colspan="7" class="empty">No actions yet. Connect Claude Code to the waymark MCP server and run some tools.</td></tr>';
-        return;
-      }
-      // Get filter state
-      const showExecution = document.getElementById('filter-execution').checked;
-      const showObservation = document.getElementById('filter-observation').checked;
-      const filteredActions = actions.filter(row => {
-        const eventType = row.event_type || 'execution';
-        if (eventType === 'observation') return showObservation;
-        return showExecution;
-      });
-      const rows = filteredActions.map(row => {
-        const isWriteFile = row.tool_name === 'write_file';
-        const isNewFile = isWriteFile && !row.before_snapshot;
-        const isPending = row.decision === 'pending' && row.status === 'pending';
-        const isApproved = row.status === 'success' && row.approved_by;
-        const isRejected = row.status === 'rejected';
-        const isBlocked = row.decision === 'block';
-        const canRollback = isWriteFile && !row.rolled_back && !isBlocked && !isPending && !isApproved && row.status === 'success' && !row.approved_by;
-        const eventType = row.event_type || 'execution';
-        const isObservation = eventType === 'observation';
-        let actionCell;
-        if (isPending) {
-          actionCell = `<button class="btn-approve" data-id="${row.action_id}">✅ Approve</button><button class="btn-reject" data-id="${row.action_id}">❌ Reject</button><span class="action-msg"></span>`;
-        } else if (isApproved) {
-          const tip = `by ${row.approved_by}${row.approved_at ? ' at ' + row.approved_at : ''}`.replace(/"/g, '&quot;');
-          actionCell = `<span class="status-approved" title="${tip}">✅ Approved</span>`;
-        } else if (isRejected) {
-          const tip = (row.rejected_reason || '').replace(/"/g, '&quot;');
-          actionCell = `<span class="status-rejected" title="${tip}">❌ Rejected</span>`;
-        } else if (row.rolled_back) {
-          actionCell = `<span class="rolled-back">↩ ${isNewFile ? 'deleted' : 'rolled back'}</span>`;
-        } else if (canRollback) {
-          const btnLabel = isNewFile ? 'delete (new file)' : 'rollback';
-          actionCell = `<button class="rollback" data-id="${row.action_id}" data-newfile="${isNewFile}">${btnLabel}</button><span class="rollback-msg"></span>`;
-        } else {
-          actionCell = `<span style="color:#333">—</span>`;
-        }
-        const stdoutPreview = row.tool_name === 'bash' && row.stdout
-          ? `<span style="color:#666;font-size:11px">${row.stdout.slice(0, 100).replace(/\n/g, '↵')}</span>`
-          : `<span style="color:#333">—</span>`;
-        const rowClass = `event-${eventType}`;
-        const obsLabel = isObservation ? '<span class="observation-label">plan mode</span>' : '';
-        return `<tr class="${rowClass}">
-          <td style="white-space:nowrap;color:#555">${timeAgo(row.created_at)}</td>
-          <td>${toolBadge(row.tool_name)}${obsLabel}</td>
-          <td>${decisionBadge(row)}</td>
-          <td>${getTargetDisplay(row)}</td>
-          <td>${statusLabel(row.status)}${row.error_message ? `<br><span style="color:#666;font-size:11px">${row.error_message.slice(0,80)}</span>` : ''}</td>
-          <td>${stdoutPreview}</td>
-          <td style="white-space:nowrap">${actionCell}</td>
-        </tr>`;
-      });
-      if (!rows.length) {
-        tbody.innerHTML = '<tr><td colspan="7" class="empty">No actions match current filter.</td></tr>';
-        return;
-      }
-      tbody.innerHTML = rows.join('');
-      tbody.querySelectorAll('button.rollback').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const msgSpan = btn.nextElementSibling;
-          doRollback(btn.dataset.id, btn, msgSpan, btn.dataset.newfile === 'true');
-        });
-      });
-      tbody.querySelectorAll('button.btn-approve').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const msgSpan = btn.parentElement.querySelector('.action-msg');
-          doApprove(btn.dataset.id, btn, msgSpan);
-        });
-      });
-      tbody.querySelectorAll('button.btn-reject').forEach(btn => {
-        btn.addEventListener('click', () => {
-          const approveBtn = btn.previousElementSibling;
-          const msgSpan = btn.nextElementSibling;
-          approveBtn.disabled = true;
-          doReject(btn.dataset.id, approveBtn, btn, msgSpan);
-        });
-      });
-    }
-    async function refresh() {
-      try {
-        // Build query string from filter values
-        const status = document.getElementById('filter-status').value;
-        const tool = document.getElementById('filter-tool').value;
-        const search = document.getElementById('filter-search').value;
-        const params = new URLSearchParams();
-        if (status) params.append('status', status);
-        if (tool) params.append('tool_name', tool);
-        if (search) params.append('search', search);
-        params.append('page', '1');
-        params.append('limit', '100');
-        // Fetch paginated data
-        const [paginationRes, countRes] = await Promise.all([
-          fetch(`/api/actions/paginated?${params}`),
-          fetch('/api/actions?count=true'),
-        ]);
-        const pagination = await paginationRes.json();
-        const { count } = await countRes.json();
-        const actions = pagination.actions || [];
-        renderActions(Array.isArray(actions) ? actions : []);
-        const display = status || tool ? `${actions.length} filtered` : `${actions.length} action(s)`;
-        document.getElementById('count-display').textContent = display;
-        document.getElementById('refresh-display').textContent = 'last refresh: ' + new Date().toLocaleTimeString();
-        const badge = document.getElementById('pending-badge');
-        badge.style.display = count > 0 ? 'inline' : 'none';
-        badge.textContent = `[${count} pending]`;
-      } catch (e) {
-        document.getElementById('count-display').textContent = 'error fetching actions';
-      }
-    }
-    // Config viewer toggle
-    const configToggle = document.getElementById('config-toggle');
-    const configContent = document.getElementById('config-content');
-    let configOpen = false;
-    configToggle.addEventListener('click', async () => {
-      configOpen = !configOpen;
-      configContent.style.display = configOpen ? 'block' : 'none';
-      configToggle.textContent = (configOpen ? '▼' : '▶') + ' Current Policy';
-      if (configOpen) await loadConfigView();
-    });
-    async function loadConfigView() {
-      const body = document.getElementById('config-body');
-      try {
-        const res = await fetch('/api/config');
-        const cfg = await res.json();
-        const p = cfg.policies || {};
-        function renderList(items, cls) {
-          if (!items || !items.length) return '<li style="color:#444">none</li>';
-          return items.map(i => {
-            if (i.startsWith('regex:')) {
-              const pat = i.slice(6);
-              return `<li class="${cls}">${pat} <em style="color:#555;font-style:italic">[pattern]</em></li>`;
-            }
-            return `<li class="${cls}">${i}</li>`;
-          }).join('');
-        }
-        body.innerHTML = `
-          <div class="policy-group">
-            <h4>Allowed Paths</h4>
-            <ul>${renderList(p.allowedPaths, 'policy-allow')}</ul>
-          </div>
-          <div class="policy-group">
-            <h4>Blocked Paths</h4>
-            <ul>${renderList(p.blockedPaths, 'policy-block')}</ul>
-          </div>
-          <div class="policy-group">
-            <h4>Blocked Commands</h4>
-            <ul>${renderList(p.blockedCommands, 'policy-block')}</ul>
-          </div>
-          <div class="policy-group">
-            <h4>Require Approval</h4>
-            <ul>${renderList(p.requireApproval, 'policy-pending')}</ul>
-          </div>
-        `;
-      } catch (e) {
-        body.textContent = 'Error loading config';
-      }
-    }
-    async function loadProjectName() {
-      try {
-        const res = await fetch('/api/project');
-        const data = await res.json();
-        if (data.projectName) {
-          document.getElementById('project-name').textContent = '— ' + data.projectName;
-        }
-      } catch (e) { /* silent — project name is cosmetic */ }
-    }
-    // Initial load + interval
-    refresh();
-    loadProjectName();
-    setInterval(refresh, 3000);
-    // Filter event listeners
-    document.getElementById('filter-execution').addEventListener('change', refresh);
-    document.getElementById('filter-observation').addEventListener('change', refresh);
-    // Phase 3: New filter listeners
-    document.getElementById('filter-status').addEventListener('change', refresh);
-    document.getElementById('filter-tool').addEventListener('change', refresh);
-    document.getElementById('filter-search').addEventListener('input', () => {
-      clearTimeout(window.filterSearchTimeout);
-      window.filterSearchTimeout = setTimeout(refresh, 500);
-    });
-    // Phase 2: Hub navigation sidebar
-    function loadHubNav() {
-      fetch('/api/hub/projects')
-        .then(r => r.json())
-        .then(projects => {
-          const list = document.getElementById('project-list');
-          if (!projects || projects.length === 0) {
-            list.innerHTML = '<li style="color:#555;padding:6px 4px">no projects</li>';
-            return;
-          }
-          const current = document.getElementById('project-name').textContent.split('—')[1]?.trim();
-          list.innerHTML = projects.map(p => {
-            const isCurrent = current && p.projectName.includes(current);
-            const statusClass = p.status === 'running' ? 'running' : p.status === 'paused' ? 'paused' : 'stopped';
-            const activeClass = isCurrent ? ' current' : '';
-            const icon = p.status === 'running' ? '🟢' : p.status === 'paused' ? '⏸️ ' : '🔴';
-            return `<li class="project-item ${statusClass}${activeClass}" data-port="${p.port}">${icon} ${p.id}<span class="project-port">${p.port}</span></li>`;
-          }).join('');
-          // Add click handlers
-          list.querySelectorAll('.project-item').forEach(item => {
-            item.addEventListener('click', () => {
-              const port = item.dataset.port;
-              window.location.href = `http://localhost:${port}`;
-            });
-          });
-        })
-        .catch(() => {
-          // Hub projects not available — this is Phase 2 feature (optional)
-          document.getElementById('hub-toggle').style.display = 'none';
-        });
-    }
-    // Phase 1 & 2: Tab switching functionality
-    document.querySelectorAll('.tab-button').forEach(btn => {
-      btn.addEventListener('click', () => {
-        const tabName = btn.dataset.tab;
-        // Update active button
-        document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        // Update button styles
-        document.querySelectorAll('.tab-button').forEach(b => {
-          if (b.classList.contains('active')) {
-            b.style.color = '#5ab4ff';
-            b.style.borderBottomColor = '#5ab4ff';
-            b.style.fontWeight = 'bold';
-          } else {
-            b.style.color = '#888';
-            b.style.borderBottomColor = 'transparent';
-            b.style.fontWeight = 'normal';
-          }
-        });
-        // Show/hide tab content
-        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
-        document.getElementById(`tab-${tabName}-content`).classList.add('active');
-        // Trigger tab-specific load
-        if (tabName === 'sessions') {
-          loadSessions();
-        } else if (tabName === 'team') {
-          loadTeamMembers();
-        } else if (tabName === 'approvals') {
-          loadApprovals();
-        } else if (tabName === 'escalations') {
-          loadEscalations();
-        } else {
-          loadActions();
-        }
-      });
-    });
-    // Phase 1: Load sessions and render table
-    async function loadSessions() {
-      try {
-        const res = await fetch('/api/sessions');
-        const sessions = await res.json();
-        const tbody = document.getElementById('sessions-tbody');
-        if (sessions.length === 0) {
-          tbody.innerHTML = '<tr><td colspan="5" class="empty">No sessions yet</td></tr>';
-          return;
-        }
-        tbody.innerHTML = sessions.map(session => {
-          const sessionId = session.session_id || 'unknown';
-          const actionCount = session.action_count || 0;
-          const latest = session.latest ? timeAgo(session.latest) : 'never';
-          return `
-            <tr>
-              <td class="session-id" title="${sessionId}">${sessionId.substring(0, 20)}...</td>
-              <td>${actionCount}</td>
-              <td>${latest}</td>
-              <td><span class="session-status-active">active</span></td>
-              <td>
-                <button class="btn-view-session" onclick="viewSession('${sessionId}')">View</button>
-                <button class="btn-rollback-session" onclick="rollbackSession('${sessionId}')">Rollback</button>
-              </td>
-            </tr>
-          `;
-        }).join('');
-      } catch (err) {
-        document.getElementById('sessions-tbody').innerHTML = `<tr><td colspan="5" class="empty">Error loading sessions: ${err.message}</td></tr>`;
-      }
-    }
-    // Phase 1: View session details
-    async function viewSession(sessionId) {
-      try {
-        const res = await fetch(`/api/sessions/${sessionId}/actions`);
-        const data = await res.json();
-        const details = document.getElementById('session-details');
-        const content = document.getElementById('session-details-content');
-        const actions = data.actions || [];
-        const html = `
-          <div style="margin-bottom: 8px;">
-            <strong>Session:</strong> ${sessionId}<br>
-            <strong>Total Actions:</strong> ${actions.length}
-          </div>
-          <table style="width: 100%; border-collapse: collapse; font-size: 11px;">
-            <tr style="background: #1a1a1a;">
-              <th style="padding: 4px; text-align: left;">Time</th>
-              <th style="padding: 4px; text-align: left;">Tool</th>
-              <th style="padding: 4px; text-align: left;">Path/Command</th>
-              <th style="padding: 4px; text-align: left;">Status</th>
-            </tr>
-            ${actions.map(a => `
-              <tr style="border-bottom: 1px solid #1e1e1e;">
-                <td style="padding: 4px;">${timeAgo(a.created_at)}</td>
-                <td style="padding: 4px;"><span class="badge badge-${a.tool_name}">${a.tool_name}</span></td>
-                <td style="padding: 4px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${a.target_path || '(bash)'}</td>
-                <td style="padding: 4px;"><span class="status-${a.status}">${a.status}</span></td>
-              </tr>
-            `).join('')}
-          </table>
-        `;
-        content.innerHTML = html;
-        details.style.display = 'block';
-      } catch (err) {
-        alert(`Error loading session: ${err.message}`);
-      }
-    }
-    // Phase 1: Rollback session
-    async function rollbackSession(sessionId) {
-      if (!confirm(`Rollback session ${sessionId}? This will undo all actions in the session.`)) {
-        return;
-      }
-      try {
-        const res = await fetch(`/api/sessions/${sessionId}/rollback`, { method: 'POST' });
-        const result = await res.json();
-        if (res.ok) {
-          alert(`✓ Session rolled back: ${result.actions_rolled_back} actions, ${result.files_restored} files restored`);
-          loadSessions();
-        } else {
-          alert(`✗ Rollback failed: ${result.error || 'Unknown error'}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 2: Load team members
-    async function loadTeamMembers() {
-      try {
-        const res = await fetch('/api/team/members');
-        const members = await res.json();
-        const tbody = document.getElementById('team-tbody');
-        if (members.length === 0) {
-          tbody.innerHTML = '<tr><td colspan="5" class="empty">No team members added</td></tr>';
-          return;
-        }
-        tbody.innerHTML = members.map(member => {
-          const addedDate = member.added_at ? timeAgo(member.added_at) : 'unknown';
-          return `
-            <tr>
-              <td>${member.name}</td>
-              <td>${member.email}</td>
-              <td>${member.role || 'approver'}</td>
-              <td>${addedDate}</td>
-              <td>
-                <button class="btn-remove-member" onclick="removeTeamMember('${member.member_id}')">Remove</button>
-              </td>
-            </tr>
-          `;
-        }).join('');
-      } catch (err) {
-        document.getElementById('team-tbody').innerHTML = `<tr><td colspan="5" class="empty">Error loading team members: ${err.message}</td></tr>`;
-      }
-    }
-    // Phase 2: Remove team member
-    async function removeTeamMember(memberId) {
-      if (!confirm('Remove this team member?')) return;
-      try {
-        const res = await fetch(`/api/team/members/${memberId}`, { method: 'DELETE' });
-        const result = await res.json();
-        if (res.ok) {
-          alert('✓ Team member removed');
-          loadTeamMembers();
-        } else {
-          alert(`✗ Error: ${result.error}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 2: Add team member button
-    document.addEventListener('DOMContentLoaded', () => {
-      const addBtn = document.getElementById('add-team-member-btn');
-      if (addBtn) {
-        addBtn.addEventListener('click', async () => {
-          const name = document.getElementById('new-member-name').value.trim();
-          const email = document.getElementById('new-member-email').value.trim();
-          if (!name || !email) {
-            alert('Please enter name and email');
-            return;
-          }
-          try {
-            const res = await fetch('/api/team/members', {
-              method: 'POST',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({
-                member_id: `member-${Date.now()}`,
-                name,
-                email,
-              }),
-            });
-            const result = await res.json();
-            if (res.ok) {
-              document.getElementById('new-member-name').value = '';
-              document.getElementById('new-member-email').value = '';
-              loadTeamMembers();
-            } else {
-              alert(`✗ Error: ${result.error}`);
-            }
-          } catch (err) {
-            alert(`✗ Error: ${err.message}`);
-          }
-        });
-      }
-    });
-    // Phase 2: Load approvals and routing rules
-    async function loadApprovals() {
-      try {
-        // Load routing rules
-        const routesRes = await fetch('/api/approval-routes');
-        const routes = await routesRes.json();
-        const routesTbody = document.getElementById('routes-tbody');
-        if (routes.length === 0) {
-          routesTbody.innerHTML = '<tr><td colspan="5" class="empty">No approval routes configured</td></tr>';
-        } else {
-          routesTbody.innerHTML = routes.map(route => {
-            const approvers = JSON.parse(route.approver_ids || '[]');
-            const createdDate = route.created_at ? timeAgo(route.created_at) : 'unknown';
-            return `
-              <tr>
-                <td>${route.name}</td>
-                <td>${route.condition_type || 'all_sessions'}</td>
-                <td>${approvers.join(', ')}</td>
-                <td>${createdDate}</td>
-                <td>
-                  <button class="btn-delete-route" onclick="deleteApprovalRoute('${route.route_id}')">Delete</button>
-                </td>
-              </tr>
-            `;
-          }).join('');
-        }
-        // Load pending approvals
-        const approvalsRes = await fetch('/api/approvals/pending');
-        const approvals = await approvalsRes.json();
-        const approvalsTbody = document.getElementById('approvals-queue-tbody');
-        if (approvals.length === 0) {
-          approvalsTbody.innerHTML = '<tr><td colspan="6" class="empty">No pending approvals</td></tr>';
-        } else {
-          approvalsTbody.innerHTML = approvals.map(approval => {
-            const triggeredDate = approval.triggered_at ? timeAgo(approval.triggered_at) : 'unknown';
-            const approvers = JSON.parse(approval.approver_ids || '[]');
-            const needed = approvers.length - approval.approved_count;
-            return `
-              <tr>
-                <td>${approval.session_id.substring(0, 20)}...</td>
-                <td>${approval.triggered_by}</td>
-                <td>${approval.status}</td>
-                <td>${needed} of ${approvers.length}</td>
-                <td>${triggeredDate}</td>
-                <td>
-                  <button class="btn-view-approval" onclick="viewApproval('${approval.request_id}')">View</button>
-                </td>
-              </tr>
-            `;
-          }).join('');
-        }
-      } catch (err) {
-        document.getElementById('routes-tbody').innerHTML = `<tr><td colspan="5" class="empty">Error: ${err.message}</td></tr>`;
-        document.getElementById('approvals-queue-tbody').innerHTML = `<tr><td colspan="6" class="empty">Error: ${err.message}</td></tr>`;
-      }
-    }
-    // Phase 2: Delete approval route
-    async function deleteApprovalRoute(routeId) {
-      if (!confirm('Delete this approval route?')) return;
-      try {
-        const res = await fetch(`/api/approval-routes/${routeId}`, { method: 'DELETE' });
-        const result = await res.json();
-        if (res.ok) {
-          loadApprovals();
-        } else {
-          alert(`✗ Error: ${result.error}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 2: View approval details
-    async function viewApproval(requestId) {
-      try {
-        const res = await fetch(`/api/approvals/${requestId}`);
-        const data = await res.json();
-        const approval = data.request;
-        const status = data.status;
-        let details = `
-          <div style="background: #0a0a0a; padding: 12px; border-radius: 3px; margin-top: 8px;">
-            <h4>Approval Request Details</h4>
-            <p><strong>Request ID:</strong> ${approval.request_id}</p>
-            <p><strong>Session:</strong> ${approval.session_id}</p>
-            <p><strong>Requester:</strong> ${approval.triggered_by}</p>
-            <p><strong>Status:</strong> ${approval.status}</p>
-            <p><strong>Approvals:</strong> ${approval.approved_count} approved, ${approval.rejected_count} rejected</p>
-        `;
-        if (status) {
-          details += `
-            <h4 style="margin-top: 12px;">Approval Decisions</h4>
-            <table style="width: 100%; font-size: 11px;">
-              <tr style="background: #1a1a1a;">
-                <th style="padding: 4px; text-align: left;">Approver</th>
-                <th style="padding: 4px; text-align: left;">Decision</th>
-                <th style="padding: 4px; text-align: left;">Reason</th>
-              </tr>
-              ${status.decisions.map(d => `
-                <tr style="border-bottom: 1px solid #1e1e1e;">
-                  <td style="padding: 4px;">${d.approver_id}</td>
-                  <td style="padding: 4px;"><span style="color: ${d.decision === 'approve' ? '#4caf50' : '#f44336'}">${d.decision}</span></td>
-                  <td style="padding: 4px;">${d.reason || '—'}</td>
-                </tr>
-              `).join('')}
-            </table>
-          `;
-        }
-        details += '</div>';
-        alert(details);
-      } catch (err) {
-        alert(`Error loading approval: ${err.message}`);
-      }
-    }
-    // Phase 3: Load escalation rules and pending escalations
-    async function loadEscalations() {
-      try {
-        const [rulesRes, pendingRes] = await Promise.all([
-          fetch('/api/escalations/rules'),
-          fetch('/api/escalations/pending'),
-        ]);
-        const rulesData = await rulesRes.json();
-        const pendingData = await pendingRes.json();
-        const rules = rulesData.rules || [];
-        const pending = pendingData.escalations || [];
-        // Populate escalation rules table
-        const rulesTbody = document.getElementById('escalation-rules-tbody');
-        if (rules.length === 0) {
-          rulesTbody.innerHTML = '<tr><td colspan="5" class="empty">No escalation rules configured</td></tr>';
-        } else {
-          rulesTbody.innerHTML = rules.map(rule => {
-            const createdDate = rule.created_at ? timeAgo(rule.created_at) : 'unknown';
-            const targets = rule.escalation_targets ? JSON.parse(rule.escalation_targets).join(', ') : '—';
-            return `
-              <tr>
-                <td>${rule.name}</td>
-                <td>${rule.timeout_hours}</td>
-                <td>${targets}</td>
-                <td>${createdDate}</td>
-                <td>
-                  <button class="btn-delete-escalation" onclick="deleteEscalationRule('${rule.rule_id}')">Delete</button>
-                </td>
-              </tr>
-            `;
-          }).join('');
-        }
-        // Populate pending escalations table
-        const escalationsTbody = document.getElementById('escalation-queue-tbody');
-        if (pending.length === 0) {
-          escalationsTbody.innerHTML = '<tr><td colspan="5" class="empty">No pending escalations</td></tr>';
-        } else {
-          escalationsTbody.innerHTML = pending.map(escalation => {
-            const deadlineDate = escalation.escalation_deadline ? timeAgo(escalation.escalation_deadline) : 'unknown';
-            const status = escalation.status || 'pending';
-            return `
-              <tr>
-                <td>${escalation.session_id.substring(0, 20)}...</td>
-                <td>${escalation.request_id.substring(0, 20) || '—'}...</td>
-                <td><span style="color: ${status === 'blocked' ? '#f44336' : status === 'proceeded' ? '#4caf50' : '#ffb347'}">${status}</span></td>
-                <td>${deadlineDate}</td>
-                <td>
-                  <button class="btn-view-escalation" onclick="viewEscalation('${escalation.request_id}')">View</button>
-                </td>
-              </tr>
-            `;
-          }).join('');
-        }
-      } catch (err) {
-        document.getElementById('escalation-rules-tbody').innerHTML = `<tr><td colspan="5" class="empty">Error: ${err.message}</td></tr>`;
-        document.getElementById('escalation-queue-tbody').innerHTML = `<tr><td colspan="5" class="empty">Error: ${err.message}</td></tr>`;
-      }
-    }
-    // Phase 3: Delete escalation rule
-    async function deleteEscalationRule(ruleId) {
-      if (!confirm('Delete this escalation rule?')) return;
-      try {
-        const res = await fetch(`/api/escalations/rules/${ruleId}`, { method: 'DELETE' });
-        const result = await res.json();
-        if (res.ok) {
-          loadEscalations();
-        } else {
-          alert(`✗ Error: ${result.error}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 3: View escalation details
-    async function viewEscalation(requestId) {
-      try {
-        const res = await fetch(`/api/escalations/${requestId}`);
-        const data = await res.json();
-        const escalation = data.escalation;
-        const status = data.status;
-        let details = `
-          <div style="background: #0a0a0a; padding: 12px; border-radius: 3px; margin-top: 8px;">
-            <h4>Escalation Request Details</h4>
-            <p><strong>Request ID:</strong> ${escalation.request_id}</p>
-            <p><strong>Session:</strong> ${escalation.session_id}</p>
-            <p><strong>Approval Request:</strong> ${escalation.approval_request_id}</p>
-            <p><strong>Status:</strong> ${escalation.status}</p>
-            <p><strong>Triggered:</strong> ${escalation.escalation_triggered_at || 'unknown'}</p>
-            <p><strong>Deadline:</strong> ${escalation.escalation_deadline || 'unknown'}</p>
-        `;
-        if (status && status.decisions) {
-          details += `
-            <h4 style="margin-top: 12px;">Escalation Decisions</h4>
-            <table style="width: 100%; font-size: 11px;">
-              <tr style="background: #1a1a1a;">
-                <th style="padding: 4px; text-align: left;">Target</th>
-                <th style="padding: 4px; text-align: left;">Decision</th>
-                <th style="padding: 4px; text-align: left;">Reason</th>
-              </tr>
-              ${status.decisions.map(d => `
-                <tr style="border-bottom: 1px solid #1e1e1e;">
-                  <td style="padding: 4px;">${d.target_id}</td>
-                  <td style="padding: 4px;"><span style="color: ${d.decision === 'proceed' ? '#4caf50' : '#f44336'}">${d.decision}</span></td>
-                  <td style="padding: 4px;">${d.reason || '—'}</td>
-                </tr>
-              `).join('')}
-            </table>
-          `;
-        }
-        // Add decision buttons if escalation is still pending
-        if (escalation.status === 'pending') {
-          details += `
-            <div style="margin-top: 12px;">
-              <button onclick="submitEscalationDecision('${requestId}', 'proceed')" style="padding: 6px 12px; background: #2d5a2d; border: 1px solid #4caf50; color: #4caf50; cursor: pointer; margin-right: 8px; border-radius: 2px;">✅ Proceed</button>
-              <button onclick="submitEscalationDecision('${requestId}', 'block')" style="padding: 6px 12px; background: #5a2d2d; border: 1px solid #f44336; color: #f44336; cursor: pointer; border-radius: 2px;">❌ Block</button>
-            </div>
-          `;
-        }
-        details += '</div>';
-        alert(details);
-      } catch (err) {
-        alert(`Error loading escalation: ${err.message}`);
-      }
-    }
-    // Phase 3: Submit escalation decision (proceed or block)
-    async function submitEscalationDecision(requestId, decision) {
-      const reason = prompt(`Enter reason for ${decision}ing this escalation (optional):`);
-      try {
-        const res = await fetch(`/api/escalations/${requestId}/decide`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ decision, reason: reason || undefined }),
-        });
-        const result = await res.json();
-        if (res.ok) {
-          alert(`✓ Escalation ${decision === 'proceed' ? 'allowed' : 'blocked'} successfully`);
-          loadEscalations();
-        } else {
-          alert(`✗ Error: ${result.error}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 3: Create escalation rule
-    async function createEscalationRule() {
-      const name = document.getElementById('new-escalation-name').value;
-      const timeout = parseInt(document.getElementById('new-escalation-timeout').value);
-      if (!name || !timeout) {
-        alert('Please enter rule name and timeout (hours)');
-        return;
-      }
-      try {
-        const res = await fetch('/api/escalations/rules', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name, timeout_hours: timeout }),
-        });
-        const result = await res.json();
-        if (res.ok) {
-          document.getElementById('new-escalation-name').value = '';
-          document.getElementById('new-escalation-timeout').value = '';
-          loadEscalations();
-        } else {
-          alert(`✗ Error: ${result.error}`);
-        }
-      } catch (err) {
-        alert(`✗ Error: ${err.message}`);
-      }
-    }
-    // Phase 3: Event listener for create escalation rule button
-    document.getElementById('create-escalation-rule-btn').addEventListener('click', createEscalationRule);
-    // Phase 4: Load remediation assessment
-    async function loadRemediation() {
-      try {
-        // Placeholder: In full implementation, would analyze current session
-        document.getElementById('risk-score').textContent = '5.0';
-        document.getElementById('risk-level').textContent = 'MEDIUM';
-        document.getElementById('risk-factors').innerHTML = `
-          <div style="margin-bottom: 8px;">
-            <strong>Risk Factors:</strong>
-            <ul style="margin: 4px 0; padding-left: 16px; font-size: 11px;">
-              <li>Operation Type: Medium (2.0/3.0)</li>
-              <li>Scale: Medium (1.5/3.0)</li>
-              <li>Error Pattern: Low (0.5/3.0)</li>
-              <li>Time: Recent (0.5/3.0)</li>
-              <li>System Load: Moderate (1.0/3.0)</li>
-            </ul>
-          </div>
-        `;
-        // Policy compliance
-        document.getElementById('policy-status-tbody').innerHTML = `
-          <tr>
-            <td>Data Protection</td>
-            <td>data</td>
-            <td><span style="color: #4caf50;">✓ compliant</span></td>
-            <td>0</td>
-          </tr>
-          <tr>
-            <td>Security Policy</td>
-            <td>security</td>
-            <td><span style="color: #4caf50;">✓ compliant</span></td>
-            <td>0</td>
-          </tr>
-        `;
-        // Recommendations
-        document.getElementById('primary-strategy').textContent = 'Partial Rollback (safe operations only)';
-        document.getElementById('alternative-strategies').innerHTML = `
-          <div>• Staged Rollback (phases with verification)</div>
-          <div>• Escalation (manual expert review)</div>
-        `;
-        document.getElementById('estimated-safety').textContent = '75% - Good safety profile';
-        document.getElementById('required-approvals').textContent = 'Engineering Lead';
-        // Block rules
-        document.getElementById('block-rules-tbody').innerHTML = `
-          <tr>
-            <td>Production Delete Hours</td>
-            <td>tool_name = delete_file</td>
-            <td>BLOCK</td>
-            <td>Cannot delete files during off-hours</td>
-          </tr>
-          <tr>
-            <td>Large Batch Delete</td>
-            <td>action_count > 20</td>
-            <td>REQUIRE_APPROVAL</td>
-            <td>Large batch deletion requires approval</td>
-          </tr>
-        `;
-      } catch (err) {
-        document.getElementById('risk-score').textContent = 'Error';
-        alert(`Error loading remediation assessment: ${err.message}`);
-      }
-    }
-    // Event listener for Run Assessment button
-    document.getElementById('run-assessment-btn').addEventListener('click', async () => {
-      document.getElementById('run-assessment-btn').disabled = true;
-      document.getElementById('run-assessment-btn').textContent = 'Assessing...';
-      await loadRemediation();
-      document.getElementById('run-assessment-btn').disabled = false;
-      document.getElementById('run-assessment-btn').textContent = 'Run Risk Assessment';
-    });
-    // Hub toggle button
-    document.getElementById('hub-toggle').addEventListener('click', () => {
-      const nav = document.getElementById('hub-nav');
-      const content = document.getElementById('main-content');
-      nav.classList.toggle('open');
-      content.classList.toggle('with-nav');
-      loadHubNav();
-    });
-    // Load hub projects on startup (lazy)
-    setTimeout(loadHubNav, 2000);
-  </script>
-</body>
-</html>