183 lines
7.2 KiB
HTML
183 lines
7.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ agent_name }} — Agents{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page" id="agents-container">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
|
|
<h1>Agents</h1>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn btn-ghost" onclick="showTemplatesModal()">Browse Templates</button>
|
|
<button class="btn btn-primary" onclick="showAgentModal(null)">+ New Agent</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div style="display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px">
|
|
<button class="tab-btn active" id="tab-agents" onclick="switchTab('agents')">Agents</button>
|
|
<button class="tab-btn" id="tab-status" onclick="switchTab('status')">Status</button>
|
|
</div>
|
|
|
|
<!-- ── Agents tab ── -->
|
|
<div id="pane-agents">
|
|
<div class="table-wrap">
|
|
<table id="agents-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Model</th>
|
|
<th>Schedule</th>
|
|
<th>Sub-agents</th>
|
|
<th>Status</th>
|
|
<th>Last run</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Status tab ── -->
|
|
<div id="pane-status" style="display:none">
|
|
<div style="display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap">
|
|
<label style="font-size:13px;color:var(--text-dim)">Timeframe:</label>
|
|
<select id="status-since" onchange="loadAgentRuns()" style="
|
|
background:var(--bg2);border:1px solid var(--border);color:var(--text);
|
|
border-radius:4px;padding:4px 10px;font-size:13px;cursor:pointer
|
|
">
|
|
<option value="today">Today</option>
|
|
<option value="7d" selected>Last 7 days</option>
|
|
<option value="30d">Last 30 days</option>
|
|
</select>
|
|
</div>
|
|
<div class="table-wrap">
|
|
<table id="runs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Agent</th>
|
|
<th>Started</th>
|
|
<th>Duration</th>
|
|
<th>Status</th>
|
|
<th>Input tokens</th>
|
|
<th>Output tokens</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="runs-totals" style="font-size:12px;color:var(--text-dim);margin-top:8px;text-align:right"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Agent modal ── -->
|
|
<div class="modal-overlay hidden" id="agent-modal">
|
|
<div class="modal" style="max-width:560px;width:100%">
|
|
<h3 id="agent-modal-title">New Agent</h3>
|
|
<input type="hidden" id="a-id">
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
|
<div class="form-group">
|
|
<label>Name</label>
|
|
<input type="text" id="a-name" class="form-input" placeholder="My agent" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Model</label>
|
|
<select id="a-model" class="form-input"></select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Description <span style="color:var(--text-dim)">(optional)</span></label>
|
|
<input type="text" id="a-desc" class="form-input" placeholder="What does this agent do?">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Prompt</label>
|
|
<textarea id="a-prompt" class="form-input" rows="5"
|
|
placeholder="Instructions for the agent…" style="resize:vertical"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Prompt mode</label>
|
|
<div class="prompt-mode-toggle">
|
|
<button type="button" class="pm-btn active" data-mode="combined" onclick="setPromptMode('combined')">Combined</button>
|
|
<button type="button" class="pm-btn" data-mode="system_only" onclick="setPromptMode('system_only')">System only</button>
|
|
<button type="button" class="pm-btn" data-mode="agent_only" onclick="setPromptMode('agent_only')">Agent only</button>
|
|
</div>
|
|
<input type="hidden" id="a-prompt-mode" value="combined">
|
|
<div id="a-pm-hint" style="font-size:11px;color:var(--text-dim);margin-top:6px"></div>
|
|
</div>
|
|
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
|
<div class="form-group">
|
|
<label>Schedule <span style="color:var(--text-dim)">(cron, optional)</span></label>
|
|
<input type="text" id="a-schedule" class="form-input"
|
|
placeholder="0 8 * * *" oninput="updateAgentCronPreview(this.value)">
|
|
<div id="a-cron-preview" style="font-size:11px;color:var(--text-dim);margin-top:4px"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Max tool calls <span style="color:var(--text-dim)" id="a-mtc-hint">(default)</span></label>
|
|
<input type="number" id="a-max-tool-calls" class="form-input" min="1" max="200"
|
|
placeholder="Use system default" oninput="updateMtcHint()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Allowed Tools <span style="color:var(--text-dim)">(none checked = all tools)</span></label>
|
|
<div id="agent-tool-list" style="display:flex;gap:12px;flex-wrap:wrap;padding:8px 0">
|
|
<span style="color:var(--text-dim);font-size:12px">Loading tools…</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="display:flex;gap:16px">
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
|
<input type="checkbox" id="a-subagents">
|
|
<span>Can create sub-agents</span>
|
|
</label>
|
|
<label style="display:flex;align-items:center;gap:8px;cursor:pointer">
|
|
<input type="checkbox" id="a-enabled" checked>
|
|
<span>Enabled</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-ghost" onclick="closeAgentModal()">Cancel</button>
|
|
<button class="btn btn-primary" onclick="saveAgent()">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Run result modal ── -->
|
|
<div class="modal-overlay hidden" id="agent-run-modal">
|
|
<div class="modal">
|
|
<h3>Agent run started</h3>
|
|
<div id="agent-run-output" style="
|
|
background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
|
|
padding:12px;font-family:monospace;font-size:12px;white-space:pre-wrap;
|
|
max-height:300px;overflow-y:auto;margin:12px 0
|
|
">—</div>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-primary" onclick="closeAgentRunModal()">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Templates modal ── -->
|
|
<div class="modal-overlay hidden" id="templates-modal">
|
|
<div class="modal" style="max-width:720px;width:100%">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px">
|
|
<h3>Agent Templates</h3>
|
|
<button class="btn btn-ghost" onclick="closeTemplatesModal()">✕</button>
|
|
</div>
|
|
<div id="templates-list" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;max-height:60vh;overflow-y:auto">
|
|
<div style="color:var(--text-dim);font-size:13px">Loading…</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|