claude-code-templates
Version:
Component templates and tracking system for Claude Code
72 lines (65 loc) • 3.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Agent Teams - Claude Code Templates</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<div class="sidebar-logo">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#8b949e" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span class="logo-text">Agent Teams</span>
</div>
</div>
<div class="sidebar-section-title">Sessions</div>
<nav class="sidebar-nav" id="sessionsNav">
<div class="sidebar-loading">
<div class="spinner"></div>
<span>Loading...</span>
</div>
</nav>
<div class="sidebar-footer">
<a href="https://aitmpl.com" target="_blank" class="sidebar-link">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<span>Explore Components</span>
</a>
<a href="https://github.com/davila7/claude-code-templates" target="_blank" class="sidebar-link">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
<span>GitHub</span>
</a>
</div>
</aside>
<!-- Main -->
<main class="main-content">
<header class="top-bar">
<div class="top-bar-left">
<h1 class="page-title">Claude Code Templates</h1>
<span class="page-subtitle" id="sessionInfo">Select a session to view details</span>
</div>
</header>
<div class="content-area">
<div class="flow-container" id="flowContainer">
<div class="empty-state">Select a team session from the sidebar</div>
</div>
<!-- Detail Panel (right) -->
<aside class="detail-panel" id="detailPanel">
<div class="panel-header">
<div class="panel-title" id="panelTitle">Agent</div>
<button class="panel-close" id="panelClose">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<div class="panel-meta" id="panelMeta"></div>
<div class="panel-body" id="panelBody"></div>
</aside>
</div>
</main>
</div>
<script src="app.js"></script>
</body>
</html>