100 lines
7.0 KiB
HTML
100 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Agentic OS</title>
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="topLoadingBar"></div>
|
|
<nav id="sidebar" class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo" onclick="navigate('dashboard')" style="cursor:pointer" title="Go to Dashboard">
|
|
<svg class="logo-svg" viewBox="0 0 36 36" width="36" height="36">
|
|
<defs><linearGradient id="lg" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#6c5ce7"/><stop offset="100%" stop-color="#fd79a8"/></linearGradient></defs>
|
|
<rect x="2" y="2" width="32" height="32" rx="10" fill="url(#lg)" opacity="0.15"/>
|
|
<rect x="4" y="4" width="28" height="28" rx="8" fill="none" stroke="url(#lg)" stroke-width="1.5"/>
|
|
<polygon points="18,8 26,13 26,23 18,28 10,23 10,13" fill="none" stroke="url(#lg)" stroke-width="2" stroke-linejoin="round"/>
|
|
<circle cx="18" cy="18" r="4" fill="url(#lg)"/>
|
|
</svg>
|
|
<span class="logo-text">Agentic OS</span>
|
|
</div>
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()" title="Toggle sidebar">
|
|
<svg viewBox="0 0 24 24" width="18" height="18" class="toggle-icon">
|
|
<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="sidebar-nav">
|
|
<div class="sidebar-section"><div class="sidebar-section-label">Primary</div></div>
|
|
<a href="#chat" class="nav-item" data-page="chat"><span class="nav-icon">💬</span><span class="nav-label">AI Chat</span></a>
|
|
<a href="#terminal" class="nav-item" data-page="terminal"><span class="nav-icon">⌨</span><span class="nav-label">Terminal</span></a>
|
|
<a href="#dashboard" class="nav-item active" data-page="dashboard"><span class="nav-icon">◉</span><span class="nav-label">Dashboard</span></a>
|
|
<div class="sidebar-section"><div class="sidebar-section-label">Agents</div></div>
|
|
<a href="#skills" class="nav-item" data-page="skills"><span class="nav-icon">⚡</span><span class="nav-label">Skills</span><span class="nav-badge" id="skillCount">0</span></a>
|
|
<a href="#memory" class="nav-item" data-page="memory"><span class="nav-icon">🧠</span><span class="nav-label">Memory</span></a>
|
|
<a href="#scheduler" class="nav-item" data-page="scheduler"><span class="nav-icon">⏱</span><span class="nav-label">Scheduler</span></a>
|
|
<a href="#audit" class="nav-item" data-page="audit"><span class="nav-icon">📋</span><span class="nav-label">Audit</span></a>
|
|
<div class="sidebar-section"><div class="sidebar-section-label">Workflow</div></div>
|
|
<a href="#kanban" class="nav-item" data-page="kanban"><span class="nav-icon">📌</span><span class="nav-label">Kanban Board</span></a>
|
|
<a href="#goals" class="nav-item" data-page="goals"><span class="nav-icon">🎯</span><span class="nav-label">Goals</span></a>
|
|
<a href="#journal" class="nav-item" data-page="journal"><span class="nav-icon">📓</span><span class="nav-label">Journal</span></a>
|
|
<div class="sidebar-section"><div class="sidebar-section-label">Monitoring</div></div>
|
|
<a href="#agent-health" class="nav-item" data-page="agent-health"><span class="nav-icon">🏥</span><span class="nav-label">Agent Health</span><span class="nav-badge" id="agentHealthCount">0</span></a>
|
|
<a href="#smart-router" class="nav-item" data-page="smart-router"><span class="nav-icon">🧭</span><span class="nav-label">Smart Router</span></a>
|
|
<a href="#learning-analytics" class="nav-item" data-page="learning-analytics"><span class="nav-icon">📊</span><span class="nav-label">Learning Analytics</span></a>
|
|
<a href="#agent-insights" class="nav-item" data-page="agent-insights"><span class="nav-icon">🧠</span><span class="nav-label">Agent Insights</span></a>
|
|
<a href="#session-replay" class="nav-item" data-page="session-replay"><span class="nav-icon">🔄</span><span class="nav-label">Session Replay</span></a>
|
|
<a href="#agent-time" class="nav-item" data-page="agent-time"><span class="nav-icon">⏱</span><span class="nav-label">Agent Time</span></a>
|
|
<div class="sidebar-section"><div class="sidebar-section-label">Management</div></div>
|
|
<a href="#cost" class="nav-item" data-page="cost"><span class="nav-icon">💰</span><span class="nav-label">Cost Analytics</span></a>
|
|
<a href="#plugins" class="nav-item" data-page="plugins"><span class="nav-icon">🔌</span><span class="nav-label">Plugins</span></a>
|
|
<a href="#backups" class="nav-item" data-page="backups"><span class="nav-icon">💾</span><span class="nav-label">Backups</span></a>
|
|
<a href="#prompts" class="nav-item" data-page="prompts"><span class="nav-icon">📝</span><span class="nav-label">Prompts</span></a>
|
|
<a href="#standards" class="nav-item" data-page="standards"><span class="nav-icon">📐</span><span class="nav-label">Standards</span></a>
|
|
<div class="sidebar-section"><div class="sidebar-section-label">System</div></div>
|
|
<a href="#settings" class="nav-item" data-page="settings"><span class="nav-icon">⚙</span><span class="nav-label">Settings</span></a>
|
|
<a href="#setup-wizard" class="nav-item" data-page="setup-wizard"><span class="nav-icon">🚀</span><span class="nav-label">Setup Wizard</span></a>
|
|
</div>
|
|
<div class="sidebar-footer">
|
|
<div class="agent-status-bar" id="agentStatusBar">
|
|
<div class="agent-dot offline"></div>
|
|
<span class="agent-status-text">Connecting...</span>
|
|
</div>
|
|
<button class="theme-btn" onclick="toggleTheme()" title="Toggle theme"><span class="theme-label">🌓</span></button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span class="topbar-title" id="pageTitle">Dashboard</span>
|
|
<span class="topbar-breadcrumb" id="pageBreadcrumb">Overview</span>
|
|
</div>
|
|
<div class="topbar-right">
|
|
<div class="topbar-search">
|
|
<span>🔍</span>
|
|
<input type="text" placeholder="Search skills..." id="globalSearch" oninput="handleGlobalSearch(this.value)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="pageContent" class="page-content">
|
|
<div class="loading"><div class="loading-spinner"></div><span>Loading Agentic OS...</span></div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="toastContainer" class="toast-container"></div>
|
|
<div id="modalContainer"></div>
|
|
|
|
<script src="utils.js"></script>
|
|
<script src="api.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|