Hugging Face's logo

Spaces:
printf-sourav
/
DevOps_Debugger
Sleeping

App Files Community
DevOps_Debugger
File size: 8,916 Bytes
27cdb3e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DevOps RL Agent — AI Dashboard</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="sidebar-brand">
                <div class="brand-logo">
                    <span class="logo-icon">⚡</span>
                </div>
                <div class="brand-text">
                    <h1>RL Agent</h1>
                    <p>DevOps Troubleshooting</p>
                </div>
            </div>

            <nav class="sidebar-nav">
                <button class="nav-btn active" data-tab="dashboard">
                    <span class="icon">📊</span>
                    <span class="label">Dashboard</span>
                </button>
                <button class="nav-btn" data-tab="runner">
                    <span class="icon">▶️</span>
                    <span class="label">Episode Runner</span>
                </button>
                <button class="nav-btn" data-tab="replay">
                    <span class="icon">🔄</span>
                    <span class="label">Replay Viewer</span>
                </button>
                <button class="nav-btn" data-tab="scenarios">
                    <span class="icon">📋</span>
                    <span class="label">Scenarios</span>
                </button>
            </nav>

            <div class="sidebar-footer">
                <div class="api-status-box">
                    <div class="status-indicator" id="api-status"></div>
                    <span id="api-status-text">Connecting to API...</span>
                </div>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main class="main-content">
            <!-- Topbar -->
            <header class="topbar">
                <h2 id="page-title">Training Dashboard</h2>
                <div class="topbar-actions">
                    <div class="stat-badge">
                        <span class="badge-dot pulse"></span>
                        Model: unsloth/llama-3.2-3b
                    </div>
                </div>
            </header>

            <div class="content-scroll">
                
                <!-- Dashboard Tab -->
                <section class="tab-pane active" id="tab-dashboard">
                    <div class="kpi-grid">
                        <div class="kpi-card glass-panel">
                            <div class="kpi-header">Total Episodes</div>
                            <div class="kpi-value highlight-cyan" id="stat-total-episodes">0</div>
                            <div class="kpi-chart-mini"><canvas id="sparkline1"></canvas></div>
                        </div>
                        <div class="kpi-card glass-panel">
                            <div class="kpi-header">Overall Solve Rate</div>
                            <div class="kpi-value highlight-green" id="stat-overall-solve-rate">0%</div>
                            <div class="kpi-chart-mini"><canvas id="sparkline2"></canvas></div>
                        </div>
                        <div class="kpi-card glass-panel">
                            <div class="kpi-header">Mean Reward</div>
                            <div class="kpi-value highlight-purple" id="stat-mean-reward">0.0</div>
                            <div class="kpi-chart-mini"><canvas id="sparkline3"></canvas></div>
                        </div>
                    </div>

                    <div class="dashboard-grid">
                        <div class="panel glass-panel chart-panel">
                            <div class="panel-header">
                                <h3>Training Progression (Reward)</h3>
                            </div>
                            <div class="chart-container">
                                <canvas id="rewardChart"></canvas>
                            </div>
                        </div>

                        <div class="panel glass-panel levels-panel">
                            <div class="panel-header">
                                <h3>Curriculum Levels</h3>
                            </div>
                            <div id="level-cards-container" class="level-cards-wrapper">
                                <!-- JS Injected -->
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Runner Tab -->
                <section class="tab-pane" id="tab-runner">
                    <div class="runner-layout">
                        <div class="panel glass-panel controls-panel">
                            <div class="panel-header"><h3>Launch Parameters</h3></div>
                            <div class="control-group">
                                <label>Target Scenario</label>
                                <select id="scenario-select" class="neon-select">
                                    <option value="">(Random Scenario)</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label>Curriculum Level</label>
                                <select id="level-select" class="neon-select">
                                    <option value="">(Auto-Curriculum)</option>
                                    <option value="1">Level 1 - Single Step</option>
                                    <option value="2">Level 2 - Multi Step</option>
                                    <option value="3">Level 3 - Complex</option>
                                </select>
                            </div>
                            <button class="neon-btn primary-glow" id="run-episode-btn">
                                <span class="btn-text">INITIALIZE RUN</span>
                                <span class="btn-icon">⚡</span>
                            </button>
                        </div>
                        
                        <div class="panel terminal-panel">
                            <div class="terminal-header">
                                <div class="term-dots"><span></span><span></span><span></span></div>
                                <div class="term-title">executor@devops-sandbox:~</div>
                            </div>
                            <div class="terminal-body" id="runner-output">
                                <div class="term-empty-state">
                                    <span class="blink">_</span> Awaiting execution command...
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Replay Tab -->
                <section class="tab-pane" id="tab-replay">
                    <div class="replay-layout">
                        <div class="panel glass-panel recent-panel">
                            <div class="panel-header"><h3>Recent History</h3></div>
                            <div class="recent-list" id="replay-recent-list">
                                <!-- JS Injected -->
                            </div>
                        </div>
                        
                        <div class="panel terminal-panel replay-terminal">
                            <div class="terminal-header">
                                <div class="term-dots"><span></span><span></span><span></span></div>
                                <div class="term-title" id="replay-title">replay_viewer.sh</div>
                            </div>
                            <div class="terminal-body" id="replay-viewer">
                                <div class="term-empty-state">
                                    Select an episode from the history to replay its execution trace.
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Scenarios Tab -->
                <section class="tab-pane" id="tab-scenarios">
                    <div class="scenarios-grid" id="scenarios-list">
                        <!-- JS Injected -->
                    </div>
                </section>

            </div>
        </main>
    </div>

    <script src="app.js"></script>
</body>
</html>