<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proxelar</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>Proxelar</h1>
<div class="controls">
<input type="text" id="search" placeholder="Filter — e.g. status:200 method:POST proto:https host:example.com type:json duration:slow">
<button id="clear-btn">Clear</button>
<button id="intercept-btn" title="Toggle intercept mode (pause requests for editing)">
▮▮ Intercept: <span id="intercept-label">OFF</span>
</button>
<button id="help-btn" title="Keyboard shortcuts and help (?)">?</button>
<span id="status" class="status disconnected">Disconnected</span>
</div>
</header>
<main>
<table id="requests-table">
<thead>
<tr>
<th>Time</th>
<th>Proto</th>
<th>Method</th>
<th>Host</th>
<th>Path</th>
<th>Status</th>
<th>Type</th>
<th>Size</th>
<th>Duration</th>
</tr>
</thead>
<tbody id="requests-body"></tbody>
</table>
</main>
<div id="detail-panel" class="detail-panel hidden">
<div class="detail-header">
<div class="tabs">
<button class="tab active" data-tab="request">Request</button>
<button class="tab" data-tab="response">Response</button>
<button class="tab hidden" id="frames-tab" data-tab="frames">Frames</button>
</div>
<button id="close-detail">×</button>
</div>
<div id="detail-content" class="detail-content"></div>
</div>
<div id="intercept-panel" class="intercept-panel hidden">
<div class="intercept-header">
<span id="intercept-title" class="intercept-title">▮▮ Intercepted Request</span>
<button id="close-intercept" title="Close (request stays pending)">×</button>
</div>
<div class="intercept-body">
<div class="intercept-row">
<label>Method</label>
<select id="edit-method">
<option>GET</option>
<option>POST</option>
<option>PUT</option>
<option>DELETE</option>
<option>PATCH</option>
<option>HEAD</option>
<option>OPTIONS</option>
</select>
<label>URI</label>
<input type="text" id="edit-uri" placeholder="https://example.com/path">
</div>
<div class="intercept-section-label">Headers <button id="add-header-btn" class="btn-small">+ Add</button></div>
<table id="headers-table" class="headers-table">
<tbody id="headers-body"></tbody>
</table>
<div class="intercept-section-label">Body</div>
<textarea id="edit-body" class="edit-body" placeholder="Request body..."></textarea>
</div>
<div class="intercept-footer">
<span class="intercept-hint">Ctrl+Enter = Forward · Esc = Close without action</span>
<div class="intercept-actions">
<button id="drop-btn" class="btn-danger">Drop (504)</button>
<button id="forward-btn" class="btn-primary">Forward</button>
</div>
</div>
</div>
<div id="help-backdrop" class="help-backdrop hidden"></div>
<div id="help-modal" class="help-modal hidden">
<div class="help-header">
<span class="help-title">Keyboard Shortcuts & Actions</span>
<button id="close-help">×</button>
</div>
<div class="help-body">
<div class="help-section">
<div class="help-section-title">Navigation</div>
<div class="help-row"><kbd>j</kbd> / <kbd>↓</kbd><span>Select next row</span></div>
<div class="help-row"><kbd>k</kbd> / <kbd>↑</kbd><span>Select previous row</span></div>
<div class="help-row"><kbd>g</kbd><span>Jump to first row</span></div>
<div class="help-row"><kbd>G</kbd><span>Jump to last row</span></div>
</div>
<div class="help-section">
<div class="help-section-title">Table Actions</div>
<div class="help-row"><kbd>Click row</kbd><span>Open request / response detail</span></div>
<div class="help-row"><kbd>↻ Replay</kbd><span>Re-send the selected request</span></div>
<div class="help-row"><kbd>Clear</kbd><span>Remove all captured requests</span></div>
</div>
<div class="help-section">
<div class="help-section-title">Filtering</div>
<div class="help-row"><kbd>Search box</kbd><span>Free-text search (URI + method)</span></div>
<div class="help-row"><kbd>column:value</kbd><span>Scope to a column (e.g. status:404)</span></div>
<div class="help-row"><kbd>time proto method host</kbd><span>Available column names</span></div>
<div class="help-row"><kbd>path status type size duration</kbd><span>More column names</span></div>
</div>
<div class="help-section">
<div class="help-section-title">Intercept</div>
<div class="help-row"><kbd>▮▮ Intercept</kbd><span>Toggle intercept mode ON / OFF</span></div>
<div class="help-row"><kbd>Click pending row</kbd><span>Open intercept editor</span></div>
<div class="help-row"><kbd>Forward</kbd><span>Send the (optionally modified) request</span></div>
<div class="help-row"><kbd>Drop</kbd><span>Block the request (returns 504)</span></div>
<div class="help-row"><kbd>Ctrl+Enter</kbd><span>Forward from within the editor</span></div>
<div class="help-row"><kbd>Esc</kbd><span>Close intercept editor (request stays pending)</span></div>
</div>
<div class="help-section">
<div class="help-section-title">Detail Panel</div>
<div class="help-row"><kbd>Request / Response tabs</kbd><span>Switch between request and response view</span></div>
<div class="help-row"><kbd>×</kbd><span>Close the detail panel</span></div>
</div>
<div class="help-section">
<div class="help-section-title">Global</div>
<div class="help-row"><kbd>?</kbd><span>Toggle this help</span></div>
<div class="help-row"><kbd>Esc</kbd><span>Close any open panel</span></div>
</div>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>