mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-05 01:50:27 +08:00
942fca7ad8
- Reorder CSS and JS file loading in dashboard-generator.js for consistency - Simplify dashboard.css by removing redundant styles and consolidating to Tailwind-based approach - Add backup files for dashboard.html, dashboard.css, and review-cycle-dashboard.html - Create new Tailwind-based dashboard template (dashboard_tailwind.html) and test variant - Add tailwind.config.js for Tailwind CSS configuration - Enhance data-aggregator.js to load full task data for archived sessions (previously only counted) - Add meta, context, and flow_control fields to task objects for richer data representation - Implement review data loading for archived sessions to match active session behavior - Improve task sorting consistency across active and archived sessions - Reduce CSS file size by ~70% through Tailwind utility consolidation while maintaining visual parity
183 lines
6.3 KiB
Plaintext
183 lines
6.3 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CCW Dashboard</title>
|
|
<style>
|
|
{{CSS_CONTENT}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Top Bar -->
|
|
<header class="top-bar">
|
|
<div class="top-bar-left">
|
|
<button class="menu-toggle" id="menuToggle">☰</button>
|
|
<div class="logo">
|
|
<span class="logo-icon">⚡</span>
|
|
<span class="logo-text">Claude Code Workflow</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Path Selector -->
|
|
<div class="path-selector">
|
|
<label>Project:</label>
|
|
<div class="path-dropdown">
|
|
<button class="path-current" id="pathButton">
|
|
<span class="path-text" id="currentPath">{{PROJECT_PATH}}</span>
|
|
<span class="dropdown-arrow">▼</span>
|
|
</button>
|
|
<div class="path-menu" id="pathMenu">
|
|
<div class="menu-label">Recent Projects</div>
|
|
<div id="recentPaths">
|
|
<!-- Dynamic recent paths -->
|
|
</div>
|
|
<div class="path-actions">
|
|
<button class="path-browse" id="browsePath">
|
|
📂 Browse...
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header Actions -->
|
|
<div class="header-actions">
|
|
<button class="theme-toggle" id="themeToggle" title="Toggle theme">🌙</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Sidebar Overlay (mobile) -->
|
|
<div class="sidebar-overlay" id="sidebarOverlay"></div>
|
|
|
|
<!-- Main Layout -->
|
|
<div class="main-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<nav class="sidebar-nav">
|
|
<!-- Sessions Section -->
|
|
<div class="nav-section">
|
|
<div class="nav-section-header">
|
|
<span class="nav-icon">📁</span>
|
|
<span class="nav-section-title">Sessions</span>
|
|
</div>
|
|
<ul class="nav-items">
|
|
<li class="nav-item active tooltip" data-filter="all" data-tooltip="All Sessions">
|
|
<span class="nav-icon">📋</span>
|
|
<span class="nav-text">All</span>
|
|
<span class="badge" id="badgeAll">0</span>
|
|
</li>
|
|
<li class="nav-item tooltip" data-filter="active" data-tooltip="Active Sessions">
|
|
<span class="nav-icon">🟢</span>
|
|
<span class="nav-text">Active</span>
|
|
<span class="badge success" id="badgeActive">0</span>
|
|
</li>
|
|
<li class="nav-item tooltip" data-filter="archived" data-tooltip="Archived Sessions">
|
|
<span class="nav-icon">📦</span>
|
|
<span class="nav-text">Archived</span>
|
|
<span class="badge" id="badgeArchived">0</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Lite Tasks Section -->
|
|
<div class="nav-section" id="liteTasksNav">
|
|
<div class="nav-section-header">
|
|
<span class="nav-icon">⚡</span>
|
|
<span class="nav-section-title">Lite Tasks</span>
|
|
</div>
|
|
<ul class="nav-items">
|
|
<li class="nav-item tooltip" data-lite="lite-plan" data-tooltip="Lite Plan Sessions">
|
|
<span class="nav-icon">📝</span>
|
|
<span class="nav-text">lite-plan</span>
|
|
<span class="badge" id="badgeLitePlan">0</span>
|
|
</li>
|
|
<li class="nav-item tooltip" data-lite="lite-fix" data-tooltip="Lite Fix Sessions">
|
|
<span class="nav-icon">🔧</span>
|
|
<span class="nav-text">lite-fix</span>
|
|
<span class="badge" id="badgeLiteFix">0</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
<!-- Sidebar Footer -->
|
|
<div class="sidebar-footer">
|
|
<button class="sidebar-toggle" id="sidebarToggle">
|
|
<span class="toggle-icon">◀</span>
|
|
<span class="toggle-text">Collapse</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Content Area -->
|
|
<main class="content">
|
|
<!-- Stats Grid -->
|
|
<section class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📊</div>
|
|
<div class="stat-value" id="statTotalSessions">0</div>
|
|
<div class="stat-label">Total Sessions</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">🟢</div>
|
|
<div class="stat-value" id="statActiveSessions">0</div>
|
|
<div class="stat-label">Active Sessions</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">📋</div>
|
|
<div class="stat-value" id="statTotalTasks">0</div>
|
|
<div class="stat-label">Total Tasks</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon">✅</div>
|
|
<div class="stat-value" id="statCompletedTasks">0</div>
|
|
<div class="stat-label">Completed Tasks</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Content Header -->
|
|
<div class="content-header">
|
|
<h2 class="content-title" id="contentTitle">All Sessions</h2>
|
|
<div class="search-box">
|
|
<input type="text" placeholder="Search..." id="searchInput">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Container -->
|
|
<section class="main-content" id="mainContent">
|
|
<!-- Dynamic content: sessions grid or session detail page -->
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bottom-bar">
|
|
<div>Generated: <span id="generatedAt">-</span></div>
|
|
<div>CCW Dashboard v1.0</div>
|
|
</footer>
|
|
|
|
<!-- Task Detail Drawer -->
|
|
<div class="task-detail-drawer" id="taskDetailDrawer">
|
|
<div class="drawer-header">
|
|
<h3 class="drawer-title" id="drawerTaskTitle">Task Details</h3>
|
|
<button class="drawer-close" onclick="closeTaskDrawer()">×</button>
|
|
</div>
|
|
<div class="drawer-content" id="drawerContent">
|
|
<!-- Dynamic content -->
|
|
</div>
|
|
</div>
|
|
<div class="drawer-overlay" id="drawerOverlay" onclick="closeTaskDrawer()"></div>
|
|
</div>
|
|
|
|
<!-- D3.js for Flowchart -->
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
<script>
|
|
{{JS_CONTENT}}
|
|
</script>
|
|
</body>
|
|
</html>
|