224 lines
No EOL
10 KiB
HTML
224 lines
No EOL
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Antigravity Agent Dashboard</title>
|
|
<link rel="stylesheet" href="/src/style.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
|
|
<body class="dark-theme">
|
|
<div id="login-overlay" class="login-overlay glass hidden">
|
|
<div class="login-box">
|
|
<span class="logo-icon">▲</span>
|
|
<div class="login-title">Agency</div>
|
|
<p>Secure Agent Dashboard</p>
|
|
<button id="login-btn" class="btn btn-primary">Login with Authentik</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="callback-overlay" class="login-overlay glass hidden">
|
|
<div class="login-box">
|
|
<div class="loader"></div>
|
|
<p>Authenticating with Authentik...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app" class="hidden">
|
|
<aside class="sidebar glass">
|
|
<header class="sidebar-header">
|
|
<a href="#" id="logo-link" class="logo">
|
|
<span class="logo-icon">▲</span>
|
|
<h1>Agency</h1>
|
|
</a>
|
|
<button id="new-task-btn" class="btn btn-primary">
|
|
<span>+</span> New Task
|
|
</button>
|
|
</header>
|
|
<nav class="task-nav">
|
|
<div class="nav-label">Directives</div>
|
|
<ul id="task-list">
|
|
<!-- Tasks will be injected here -->
|
|
</ul>
|
|
</nav>
|
|
<footer class="sidebar-footer">
|
|
<button id="logout-btn" class="btn btn-ghost btn-sm logout-btn">
|
|
Logout
|
|
</button>
|
|
</footer>
|
|
</aside>
|
|
|
|
<div id="sidebar-overlay" class="sidebar-overlay hidden"></div>
|
|
|
|
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle Menu">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</button>
|
|
|
|
<main class="main-content">
|
|
<div id="empty-state" class="empty-state hidden">
|
|
<div class="empty-icon">⌘</div>
|
|
<h2>Ready for a new directive?</h2>
|
|
<p>Select a task from the sidebar or create a new one to begin.</p>
|
|
</div>
|
|
|
|
<div id="dashboard-view" class="dashboard-view">
|
|
<header class="dashboard-header">
|
|
<h2>Perspective</h2>
|
|
<p>Overview of recent agent directives and live communication.</p>
|
|
|
|
<div class="dashboard-tabs">
|
|
<button class="tab-btn active" data-tab="chat">
|
|
<span class="tab-icon">💬</span> Quick Chat
|
|
</button>
|
|
<button class="tab-btn" data-tab="activity">
|
|
<span class="tab-icon">📊</span> Recent Activity
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="dashboard-content-grid">
|
|
<div id="chat-tab-panel" class="tab-panel active">
|
|
<div id="chat-container" class="chat-container glass">
|
|
<div class="chat-header">
|
|
<h3>Neural Link</h3>
|
|
<button id="clear-chat-btn" class="btn btn-ghost btn-sm">Clear Memory</button>
|
|
</div>
|
|
<div id="chat-messages" class="chat-messages">
|
|
<!-- Chat messages will be injected here -->
|
|
<div class="chat-empty-state">
|
|
<p>Establish connection with the neural assistant.</p>
|
|
</div>
|
|
</div>
|
|
<form id="chat-form" class="chat-form">
|
|
<input type="text" id="chat-input" placeholder="Transmit message..." autocomplete="off"
|
|
required>
|
|
<button type="submit" id="chat-send-btn" class="btn btn-primary btn-sm">Send</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="activity-tab-panel" class="tab-panel">
|
|
<div class="dashboard-content glass">
|
|
<table class="activity-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Directive</th>
|
|
<th>Status</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="recent-runs-list">
|
|
<!-- Recent runs will be injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="task-view" class="task-view hidden">
|
|
<header class="view-header">
|
|
<div class="header-main">
|
|
<div id="view-status" class="status-badge">Running</div>
|
|
<h2 id="view-goal">Researching local LLM performance trends</h2>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button id="toggle-logs-btn" class="btn btn-ghost">
|
|
<span>⌨</span> Inspect Logs
|
|
</button>
|
|
<button id="edit-task-btn" class="btn btn-ghost">
|
|
<span>✎</span> Edit Goal
|
|
</button>
|
|
<button id="rerun-btn" class="btn btn-ghost">
|
|
<span>↻</span> Re-run Task
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="task-content">
|
|
<aside class="run-history glass">
|
|
<div class="runs-header">
|
|
<h3>Run History</h3>
|
|
</div>
|
|
<ul id="run-list">
|
|
<!-- Runs will be injected here -->
|
|
</ul>
|
|
</aside>
|
|
|
|
<div class="run-details">
|
|
<section id="answer-container" class="answer-container glass hidden">
|
|
<div class="answer-header">
|
|
<h3>Final Answer</h3>
|
|
</div>
|
|
<div id="answer-output" class="answer-output">
|
|
<!-- Answer will be injected here -->
|
|
</div>
|
|
</section>
|
|
|
|
<section id="logs-container" class="logs-container glass">
|
|
<div class="logs-header">
|
|
<h3>Execution Logs</h3>
|
|
<div class="logs-actions">
|
|
<span class="logs-timestamp" id="view-date">Feb 9, 2026</span>
|
|
</div>
|
|
</div>
|
|
<div id="logs-output" class="logs-output">
|
|
<!-- Logs will be injected here -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="modal-container" class="modal-container hidden">
|
|
<div class="modal glass">
|
|
<h2 id="modal-title">New Agent Task</h2>
|
|
<p>Provide a goal for the agent to execute.</p>
|
|
<form id="new-task-form">
|
|
<textarea name="goal" id="goal-textarea"
|
|
placeholder="e.g. Research the latest trending AI agents and write a report..."
|
|
required></textarea>
|
|
|
|
<div class="form-group">
|
|
<label>Execution Schedule</label>
|
|
<div id="schedule-presets" class="preset-group">
|
|
<button type="button" class="btn btn-preset active" data-cron="">Manual</button>
|
|
<button type="button" class="btn btn-preset" data-cron="0 */5 * * * *">Every 5m</button>
|
|
<button type="button" class="btn btn-preset" data-cron="0 0 * * * *">Hourly</button>
|
|
<button type="button" class="btn btn-preset" data-cron="0 0 0 * * *">Daily</button>
|
|
</div>
|
|
|
|
<div class="custom-cron-toggle">
|
|
<button type="button" id="toggle-custom-cron" class="btn-link">Manual Cron
|
|
expression...</button>
|
|
</div>
|
|
|
|
<div id="custom-cron-container" class="hidden">
|
|
<input type="text" name="cron" id="cron-input"
|
|
placeholder="e.g. 0 * * * * * (every minute)">
|
|
<small class="form-help">Uses standard cron syntax (seconds included).</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn btn-ghost" id="cancel-task">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submit-task-btn">Save Task</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<div id="toast-container"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
|
|
</html> |