152 lines
6.5 KiB
HTML
152 lines
6.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}{{ agent_name }} — Agent Detail{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page" id="agent-detail-container">
|
|
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px">
|
|
<div>
|
|
<a href="/agents" onclick="event.preventDefault();navigateTo('/agents')"
|
|
style="color:var(--text-dim);font-size:13px;text-decoration:none">← Agents</a>
|
|
<h1 id="d-name" style="margin-top:8px;margin-bottom:4px">Loading…</h1>
|
|
<div id="d-description" style="color:var(--text-dim);font-size:13px"></div>
|
|
</div>
|
|
<div style="display:flex;gap:8px">
|
|
<button class="btn btn-ghost" onclick="editCurrentAgent()">Edit</button>
|
|
<button class="btn btn-primary" onclick="runCurrentAgent()">▶ Run now</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Metadata grid -->
|
|
<section style="
|
|
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
|
|
gap:16px;margin-bottom:28px
|
|
">
|
|
<div class="meta-card">
|
|
<div class="meta-label">Model</div>
|
|
<div id="d-model" class="meta-value"></div>
|
|
</div>
|
|
<div class="meta-card">
|
|
<div class="meta-label">Schedule</div>
|
|
<div id="d-schedule" class="meta-value"></div>
|
|
</div>
|
|
<div class="meta-card">
|
|
<div class="meta-label">Sub-agents</div>
|
|
<div id="d-subagents" class="meta-value"></div>
|
|
</div>
|
|
<div class="meta-card">
|
|
<div class="meta-label">Created by</div>
|
|
<div id="d-created-by" class="meta-value"></div>
|
|
</div>
|
|
<div class="meta-card">
|
|
<div class="meta-label">Created at</div>
|
|
<div id="d-created-at" class="meta-value"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Prompt -->
|
|
<section style="margin-bottom:28px">
|
|
<h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">
|
|
Prompt
|
|
</h2>
|
|
<pre id="d-prompt" style="
|
|
background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);
|
|
padding:12px;font-family:inherit;font-size:13px;white-space:pre-wrap;margin:0
|
|
"></pre>
|
|
</section>
|
|
|
|
<!-- Token summary -->
|
|
<section style="margin-bottom:28px">
|
|
<h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px">
|
|
Token Usage
|
|
</h2>
|
|
<div id="d-total-tokens" style="font-size:13px;color:var(--text-dim)">Loading…</div>
|
|
</section>
|
|
|
|
<!-- Run history -->
|
|
<section>
|
|
<h2 style="font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.5px">
|
|
Run History
|
|
</h2>
|
|
<div class="table-wrap">
|
|
<table id="detail-runs-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Run ID</th>
|
|
<th>Started</th>
|
|
<th>Duration</th>
|
|
<th>Status</th>
|
|
<th>Input tokens</th>
|
|
<th>Output tokens</th>
|
|
<th></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td colspan="7" style="text-align:center;color:var(--text-dim)">Loading…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<!-- Run detail modal -->
|
|
<div class="modal-overlay" id="run-detail-modal" style="display:none" onclick="if(event.target===this)closeRunDetail()">
|
|
<div class="modal" style="max-width:680px;width:100%;position:relative">
|
|
<button onclick="closeRunDetail()" style="position:absolute;top:14px;right:14px;background:none;border:none;color:var(--text-dim);font-size:18px;cursor:pointer;line-height:1;padding:2px 6px" title="Close">✕</button>
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-right:32px">
|
|
<h3 style="margin:0">Run Detail</h3>
|
|
<span id="rd-status-badge" class="badge"></span>
|
|
<span id="rd-meta" style="font-size:12px;color:var(--text-dim)"></span>
|
|
</div>
|
|
<div class="modal-body" style="padding:0 0 16px">
|
|
<div id="rd-error" style="display:none;margin-bottom:16px;padding:10px 14px;background:rgba(220,60,60,0.1);border:1px solid rgba(220,60,60,0.3);border-radius:var(--radius);color:var(--danger);font-size:13px;white-space:pre-wrap"></div>
|
|
<div id="rd-result-wrap">
|
|
<div style="font-size:12px;color:var(--text-dim);margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px">Result</div>
|
|
<pre id="rd-result" style="background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;font-family:inherit;font-size:13px;white-space:pre-wrap;margin:0;max-height:400px;overflow-y:auto"></pre>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border)">
|
|
<button id="rd-audit-btn" class="btn btn-ghost" onclick="closeRunDetail();navigateTo(document.getElementById('rd-audit-link').href)">View in Audit Log</button>
|
|
<button class="btn btn-ghost" onclick="closeRunDetail()">Close</button>
|
|
</div>
|
|
<a id="rd-audit-link" href="/audit" style="display:none"></a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fullscreen prompt editor -->
|
|
<div id="prompt-editor-overlay" style="
|
|
display:none;position:fixed;inset:0;z-index:1001;
|
|
background:var(--bg);flex-direction:column;
|
|
">
|
|
<!-- Header bar -->
|
|
<div style="
|
|
display:flex;align-items:center;justify-content:space-between;
|
|
padding:12px 20px;border-bottom:1px solid var(--border);
|
|
background:var(--bg2);flex-shrink:0;gap:12px
|
|
">
|
|
<div style="display:flex;align-items:center;gap:12px;min-width:0">
|
|
<span style="font-size:13px;color:var(--text-dim);white-space:nowrap">Editing prompt —</span>
|
|
<span id="pe-agent-name" style="font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:8px;flex-shrink:0">
|
|
<span style="font-size:11px;color:var(--text-dim)">Ctrl+S to save · Esc to cancel</span>
|
|
<button class="btn btn-ghost" onclick="closePromptEditor()">Cancel</button>
|
|
<button class="btn btn-primary" id="pe-save-btn" onclick="savePromptEditor()">Save</button>
|
|
</div>
|
|
</div>
|
|
<!-- Editor -->
|
|
<textarea id="pe-textarea" spellcheck="false" style="
|
|
flex:1;width:100%;box-sizing:border-box;resize:none;border:none;outline:none;
|
|
background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;
|
|
line-height:1.7;padding:24px 32px;
|
|
"></textarea>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
window.AGENT_ID = "{{ agent_id }}";
|
|
</script>
|
|
{% endblock %}
|