personal memory agent
1{# Screen debug viewer - list of screen.jsonl files for a day #}
2
3<style>
4.screens-list {
5 max-width: 900px;
6 margin: 0 auto;
7 padding: 20px;
8}
9
10.screens-table {
11 width: 100%;
12 border-collapse: collapse;
13 margin-top: 20px;
14 background: white;
15 box-shadow: 0 2px 4px rgba(0,0,0,0.1);
16 border-radius: 8px;
17 overflow: hidden;
18}
19
20.screens-table thead {
21 background: #f8f9fa;
22 border-bottom: 2px solid #dee2e6;
23}
24
25.screens-table th {
26 padding: 12px 16px;
27 text-align: left;
28 font-weight: 600;
29 color: #495057;
30}
31
32.screens-table td {
33 padding: 12px 16px;
34 border-top: 1px solid #dee2e6;
35}
36
37.screens-table tbody tr:hover {
38 background: #f8f9fa;
39}
40
41.screens-table a {
42 color: #007bff;
43 text-decoration: none;
44}
45
46.screens-table a:hover {
47 text-decoration: underline;
48}
49
50.empty-state {
51 text-align: center;
52 padding: 60px 20px;
53 color: #6c757d;
54}
55
56.empty-state h2 {
57 font-size: 1.5em;
58 margin-bottom: 10px;
59}
60
61.loading {
62 text-align: center;
63 padding: 40px;
64 color: #6c757d;
65}
66
67.file-size {
68 color: #6c757d;
69 font-size: 0.9em;
70}
71
72.frame-count {
73 font-weight: 600;
74 color: #495057;
75}
76
77.dev-badge {
78 display: inline-block;
79 background: #ffc107;
80 color: #000;
81 padding: 4px 8px;
82 border-radius: 4px;
83 font-size: 0.75em;
84 font-weight: 600;
85 margin-left: 8px;
86 vertical-align: middle;
87}
88</style>
89
90<div class="activities-content">
91 <h1>{{ title }}</h1>
92
93 <div class="screens-list">
94 <h2>
95 Screen Debug Viewer
96 <span class="dev-badge">DEV</span>
97 </h2>
98 <p style="color: #6c757d; margin-top: 8px;">
99 View raw screen.jsonl files and frame analysis data for {{ day }}.
100 <a href="{{ url_for('app:activities.activities_day', day=day) }}" style="margin-left: 8px;">← Back to day view</a>
101 </p>
102
103 <div id="loading" class="loading">
104 Loading screen files...
105 </div>
106
107 <div id="empty" class="empty-state" style="display: none;">
108 <h2>No screen files found</h2>
109 <p>No screen.jsonl files exist for this day.</p>
110 </div>
111
112 <table id="screensTable" class="screens-table" style="display: none;">
113 <thead>
114 <tr>
115 <th>Time</th>
116 <th>Frames</th>
117 <th>File Size</th>
118 <th>Actions</th>
119 </tr>
120 </thead>
121 <tbody id="screensBody">
122 </tbody>
123 </table>
124 </div>
125</div>
126
127<script>
128const day = '{{ day }}';
129
130function formatFileSize(bytes) {
131 if (bytes < 1024) return bytes + ' B';
132 if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
133 return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
134}
135
136function loadScreenFiles() {
137 fetch(`/app/activities/api/screen_files/${day}`)
138 .then(r => r.json())
139 .then(data => {
140 document.getElementById('loading').style.display = 'none';
141
142 if (!data.files || data.files.length === 0) {
143 document.getElementById('empty').style.display = 'block';
144 return;
145 }
146
147 const tbody = document.getElementById('screensBody');
148 const table = document.getElementById('screensTable');
149
150 data.files.forEach(file => {
151 const row = document.createElement('tr');
152
153 // Time column
154 const timeCell = document.createElement('td');
155 timeCell.textContent = file.human_time;
156 row.appendChild(timeCell);
157
158 // Frames column
159 const framesCell = document.createElement('td');
160 framesCell.className = 'frame-count';
161 framesCell.textContent = file.frame_count;
162 row.appendChild(framesCell);
163
164 // File size column
165 const sizeCell = document.createElement('td');
166 sizeCell.className = 'file-size';
167 sizeCell.textContent = formatFileSize(file.file_size);
168 row.appendChild(sizeCell);
169
170 // Actions column
171 const actionsCell = document.createElement('td');
172 const link = document.createElement('a');
173 link.href = `/app/activities/${day}/screens/${file.timestamp}`;
174 link.textContent = 'View Frames →';
175 actionsCell.appendChild(link);
176 row.appendChild(actionsCell);
177
178 tbody.appendChild(row);
179 });
180
181 table.style.display = 'table';
182 })
183 .catch(err => {
184 console.error('Error loading screen files:', err);
185 document.getElementById('loading').innerHTML =
186 '<span style="color: red;">Error loading screen files</span>';
187 });
188}
189
190loadScreenFiles();
191</script>