<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vex</title>
<link rel="stylesheet" href="/static/css/style.css">
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.min.css">
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/marked.min.js"></script>
</head>
<body>
<header>
<h1>vex</h1>
<span id="status" class="status disconnected">disconnected</span>
</header>
<div id="app">
<nav id="sidebar">
<div id="sidebar-tree"></div>
<div class="actions">
<button id="btn-create-shell" title="Create shell">+ Shell</button>
<button id="btn-spawn-agent" title="Spawn agent">+ Agent</button>
<button id="btn-add-repo" title="Add repo">+ Repo</button>
<button id="btn-add-workstream" title="Add workstream">+ Workstream</button>
</div>
</nav>
<main id="main-content">
<div id="dashboard">
<div id="agents-table-container">
<h2>Agents</h2>
<table id="agents-table">
<thead><tr><th>ID</th><th>Status</th><th>CWD</th><th>Actions</th></tr></thead>
<tbody></tbody>
</table>
</div>
<div id="shells-table-container">
<h2>Shells</h2>
<table id="shells-table">
<thead><tr><th>ID</th><th>Size</th><th>Clients</th><th>Created</th><th>Actions</th></tr></thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="terminal-container" style="display:none">
<div id="terminal-header">
<span id="terminal-title"></span>
<button id="btn-detach">Detach</button>
</div>
<div id="terminal"></div>
</div>
<div id="conversation-container" style="display:none">
<div id="conversation-header">
<span id="conversation-title"></span>
<div>
<button id="btn-agent-shell">Shell</button>
<button id="btn-toggle-raw">Show Raw</button>
<button id="btn-back-conversation">Back</button>
</div>
</div>
<div id="conversation-lines"></div>
<div id="prompt-bar">
<input type="text" id="prompt-input" placeholder="Send prompt to agent...">
<button id="btn-send-prompt">Send</button>
</div>
</div>
<div id="repo-detail-container" style="display:none">
<div id="repo-detail-header">
<span id="repo-detail-title"></span>
<button id="btn-back-repo-detail">Back</button>
</div>
<div id="repo-detail-body"></div>
</div>
<div id="workstream-detail-container" style="display:none">
<div id="workstream-detail-header">
<span id="workstream-detail-title"></span>
<button id="btn-back-ws-detail">Back</button>
</div>
<div id="workstream-detail-body"></div>
</div>
</main>
</div>
<div id="workstream-modal" style="display:none">
<div class="modal-overlay">
<div class="modal-content">
<h3>New Workstream</h3>
<div class="modal-field">
<label for="ws-modal-repo">Repo:</label>
<select id="ws-modal-repo"></select>
</div>
<div class="modal-field">
<label for="ws-modal-name">Name:</label>
<input type="text" id="ws-modal-name" placeholder="workstream name">
</div>
<div class="modal-actions">
<button id="ws-modal-confirm">Create</button>
<button id="ws-modal-cancel">Cancel</button>
</div>
</div>
</div>
</div>
<div id="repo-modal" style="display:none">
<div class="modal-overlay">
<div class="modal-content">
<h3>Add Repo</h3>
<div class="modal-path">
Path: <span id="repo-modal-path">/</span>
<button id="repo-modal-up" title="Go up">↑</button>
</div>
<input type="text" id="repo-modal-filter" placeholder="type to filter..." class="modal-filter">
<ul id="repo-modal-children" class="modal-dir-list"></ul>
<div class="modal-field">
<label for="repo-modal-name">Name:</label>
<input type="text" id="repo-modal-name" placeholder="repo name">
</div>
<div id="repo-modal-git" class="modal-git" style="display:none"></div>
<div class="modal-actions">
<button id="repo-modal-confirm">Add Repo</button>
<button id="repo-modal-cancel">Cancel</button>
</div>
</div>
</div>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>