Hugging Face's logo

Spaces:
samihalawa
/
CursorOptimizerPRO
Running

App Files Community
Luigi commited on
Commit
5e8e654
·
verified ·
1 Parent(s): 4f0f898

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1145 -342
index.html CHANGED
@@ -1,364 +1,1167 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8" />
5
- <title>Cursor AI Supervisor - Redesigned</title>
6
-
7
- <!-- (1) Google Fonts: Roboto -->
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
9
-
10
- <!-- (2) Tailwind CSS -->
11
- <script src="https://cdn.tailwindcss.com"></script>
12
-
13
- <!-- (3) Flowbite CSS + (4) Flowbite JS -->
14
- <link href="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.min.css" rel="stylesheet" />
15
- <script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>
16
-
17
- <!-- (5) Font Awesome -->
18
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-CM8q9bH68/jf2BvDCz+tBvF7wK+g/HKWvlk1Q1DQ+8HrdWdcy8+Q3uZHbBjK4t1NwCmHhNXya9Y5UIO7J+jK5Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
19
-
20
- <!-- (6) Animate.css -->
21
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
22
-
23
- <!-- Chart.js -->
24
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
25
-
26
- <style>
27
- body {
28
- font-family: 'Roboto', sans-serif;
29
- }
30
- /* Fix Chart's container to avoid infinite vertical growth */
31
- #dashboardChartContainer {
32
- height: 350px; /* Or any height you prefer */
33
- position: relative;
34
- }
35
- #dashboardChart {
36
- height: 100% !important;
37
- }
38
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  </head>
40
- <body class="bg-gray-100 text-gray-800">
41
-
42
- <!-- NAVIGATION BAR -->
43
- <nav class="bg-white border-b border-gray-200 px-4 py-3 shadow-sm">
44
- <div class="max-w-7xl mx-auto flex items-center justify-between">
45
- <div class="flex items-center space-x-2">
46
- <i class="fa-solid fa-comments text-blue-500 text-xl"></i>
47
- <h1 class="text-xl font-bold">Cursor AI Supervisor</h1>
48
- </div>
49
- <p class="text-sm text-gray-500 hidden md:block">Redesigned for clarity & stability</p>
50
- </div>
51
- </nav>
52
-
53
- <!-- MAIN WRAPPER -->
54
- <div class="max-w-7xl mx-auto px-4 py-6">
55
-
56
- <!-- PAGE TITLE & DASHBOARD -->
57
- <header class="mb-6 animate__animated animate__fadeIn">
58
- <h2 class="text-2xl font-semibold mb-1">Dashboard</h2>
59
- <p class="text-sm text-gray-500">
60
- Analyze daily usage stats and see how two programmers interact with the AI through Cursor.
61
- </p>
62
- </header>
63
-
64
- <!-- DASHBOARD CHART & BASIC STATS -->
65
- <section class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-8">
66
- <!-- Chart Column -->
67
- <div class="bg-white rounded shadow p-4 lg:col-span-2">
68
- <h3 class="text-lg font-bold mb-2 flex items-center space-x-2">
69
- <i class="fa-solid fa-chart-line"></i>
70
- <span>Daily Precision Chart</span>
71
- </h3>
72
- <div id="dashboardChartContainer" class="rounded border">
73
- <canvas id="dashboardChart"></canvas>
74
  </div>
75
- </div>
76
- <!-- Quick Stats Column -->
77
- <div class="bg-white rounded shadow p-4">
78
- <h3 class="text-lg font-bold mb-2">
79
- <i class="fa-solid fa-info-circle mr-1 text-blue-500"></i>Stats
80
- </h3>
81
- <div class="space-y-4">
82
- <div class="flex items-center justify-between">
83
- <div>
84
- <p class="text-sm text-gray-500">Programmer A Prompts</p>
85
- <p id="progA-daily-prompts" class="text-xl font-semibold">0</p>
86
- </div>
87
- <div class="border-l ml-2 pl-2 text-sm text-gray-500">
88
- <p>Avg Precision: <span id="progA-precision-label">0%</span></p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </div>
90
- </div>
91
- <div class="w-full bg-gray-200 h-2 rounded-full">
92
- <div id="progA-precision-bar" class="bg-blue-500 h-2 rounded-full" style="width:0%"></div>
93
- </div>
94
 
95
- <hr>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
 
97
- <div class="flex items-center justify-between">
98
- <div>
99
- <p class="text-sm text-gray-500">Programmer B Prompts</p>
100
- <p id="progB-daily-prompts" class="text-xl font-semibold">0</p>
 
 
 
 
 
 
 
 
 
 
 
 
101
  </div>
102
- <div class="border-l ml-2 pl-2 text-sm text-gray-500">
103
- <p>Avg Precision: <span id="progB-precision-label">0%</span></p>
 
 
 
 
 
104
  </div>
105
- </div>
106
- <div class="w-full bg-gray-200 h-2 rounded-full">
107
- <div id="progB-precision-bar" class="bg-green-500 h-2 rounded-full" style="width:0%"></div>
108
- </div>
109
  </div>
110
 
111
- <button id="syncBtn" class="mt-4 w-full text-sm px-3 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
112
- <i class="fa-solid fa-sync-alt mr-1"></i>Sync Data
113
- </button>
114
- </div>
115
- </section>
116
-
117
- <!-- TAB NAVIGATION: Programmer A / Programmer B -->
118
- <div class="mb-4 border-b border-gray-200">
119
- <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" data-tabs-toggle="#programmerTabsContent" role="tablist">
120
- <li class="mr-2">
121
- <button id="progA-tab" type="button" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300"
122
- data-tabs-target="#progA-content" role="tab" aria-controls="progA-content" aria-selected="true">
123
- Programmer A
124
- </button>
125
- </li>
126
- <li class="mr-2">
127
- <button id="progB-tab" type="button" class="inline-block p-4 rounded-t-lg border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300"
128
- data-tabs-target="#progB-content" role="tab" aria-controls="progB-content" aria-selected="false">
129
- Programmer B
130
- </button>
131
- </li>
132
- </ul>
133
  </div>
134
 
135
- <!-- TAB CONTENT WRAPPER -->
136
- <div id="programmerTabsContent">
137
- <!-- PROGRAMMER A TAB CONTENT -->
138
- <div class="hidden" id="progA-content" role="tabpanel" aria-labelledby="progA-tab">
139
- <h3 class="text-xl font-bold mb-4 animate__fadeIn animate__animated">Programmer A: Conversations</h3>
140
- <div id="progA-conversations" class="space-y-4"></div>
141
- </div>
142
- <!-- PROGRAMMER B TAB CONTENT -->
143
- <div class="hidden" id="progB-content" role="tabpanel" aria-labelledby="progB-tab">
144
- <h3 class="text-xl font-bold mb-4 animate__fadeIn animate__animated">Programmer B: Conversations</h3>
145
- <div id="progB-conversations" class="space-y-4"></div>
146
- </div>
147
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
 
149
- </div>
150
- <!-- /MAIN WRAPPER -->
151
-
152
- <!-- SCRIPT: DUMMY DATA, RENDERING, CHART, & SYNC LOGIC -->
153
- <script>
154
- // -----------------------------------------------------------
155
- // 1) DUMMY DATA
156
- // We'll define a small set of "conversations" for each programmer
157
- // Each conversation includes a prompt, AI response, and precision
158
- // -----------------------------------------------------------
159
- const programmerAData = [
160
- {
161
- date: "2025-03-01",
162
- steps: [
163
- {
164
- prompt: "Cursor: agent mode - 'List all Node.js files in the src folder.'",
165
- response: "Found: index.js, routes.js, config.js",
166
- precision: 75,
167
- feedback: "Wanted a deeper structure. It's okay though."
168
- },
169
- {
170
- prompt: "Cursor: open config.js lines 10-20 and check if we are using environment variables properly.",
171
- response: "Missing 'process.env.DB_HOST'. Suggest adding it for DB configuration.",
172
- precision: 82,
173
- feedback: "Great suggestion. I'll do that right away."
174
- }
175
- ]
176
- },
177
- {
178
- date: "2025-03-02",
179
- steps: [
180
- {
181
- prompt: "Cursor: 'Generate an Express middleware to handle 500 errors elegantly.'",
182
- response: "Use a global error handler: app.use((err, req, res, next) => {...})",
183
- precision: 90,
184
- feedback: "Solid. I'd like an example with logging though."
185
- }
186
- ]
187
- }
188
- ];
189
-
190
- const programmerBData = [
191
- {
192
- date: "2025-03-01",
193
- steps: [
194
- {
195
- prompt: "Cursor: list files in Docker context, lines 1-15 of Dockerfile, do we have correct base image?",
196
- response: "Base image is node:16. Dockerfile lines 1-15 shown below...",
197
- precision: 80,
198
- feedback: "Need a more advanced base image for Alpine usage."
199
- }
200
- ]
201
- },
202
- {
203
- date: "2025-03-02",
204
- steps: [
205
- {
206
- prompt: "Cursor: agent mode - 'Refactor docker-compose.yml to use environment variables from .env file.'",
207
- response: "Replace inline environment with env_file: .env. Also check placeholders for secrets.",
208
- precision: 88,
209
- feedback: "Sweet, that’s exactly what we needed."
210
- }
211
- ]
212
- }
213
- ];
214
-
215
- // -----------------------------------------------------------
216
- // 2) STATS & CHART
217
- // We'll compute how many prompts each programmer used and an avg precision.
218
- // Then we'll show it on a bar chart (with fixed height).
219
- // -----------------------------------------------------------
220
- function computeStats(convoData) {
221
- let totalPrompts = 0;
222
- let sumPrecision = 0;
223
- convoData.forEach(day => {
224
- day.steps.forEach(step => {
225
- totalPrompts++;
226
- sumPrecision += step.precision;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
  });
228
- });
229
- const avgPrecision = totalPrompts ? Math.round(sumPrecision / totalPrompts) : 0;
230
- return { totalPrompts, avgPrecision };
231
- }
232
-
233
- // We'll store a global chart instance so we can re-render on sync
234
- let dashboardChartInstance = null;
235
- function renderChart(statsA, statsB) {
236
- const ctx = document.getElementById('dashboardChart').getContext('2d');
237
-
238
- // Destroy existing chart to avoid duplicates
239
- if (dashboardChartInstance) {
240
- dashboardChartInstance.destroy();
241
- }
242
-
243
- dashboardChartInstance = new Chart(ctx, {
244
- type: 'bar',
245
- data: {
246
- labels: ['Programmer A', 'Programmer B'],
247
- datasets: [{
248
- label: 'Avg Precision (%)',
249
- data: [statsA.avgPrecision, statsB.avgPrecision],
250
- backgroundColor: ['rgba(59,130,246,0.7)', 'rgba(34,197,94,0.7)'],
251
- borderColor: ['rgba(59,130,246,1)', 'rgba(34,197,94,1)'],
252
- borderWidth: 1
253
- }]
254
- },
255
- options: {
256
- responsive: true,
257
- maintainAspectRatio: false,
258
- scales: {
259
- y: {
260
- beginAtZero: true,
261
- max: 100
262
  }
263
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
264
  }
265
- });
266
- }
267
-
268
- // -----------------------------------------------------------
269
- // 3) RENDER CONVERSATIONS
270
- // Display the conversation data in a collapsible card layout
271
- // -----------------------------------------------------------
272
- function renderConversations(convoData, containerId) {
273
- const container = document.getElementById(containerId);
274
- container.innerHTML = "";
275
-
276
- convoData.forEach(day => {
277
- // Outer block for each date
278
- const block = document.createElement("div");
279
- block.className = "border bg-white rounded shadow p-4";
280
-
281
- const dateHeading = document.createElement("h4");
282
- dateHeading.className = "text-lg font-bold text-gray-700 mb-3";
283
- dateHeading.textContent = `Conversations on ${day.date}`;
284
- block.appendChild(dateHeading);
285
-
286
- day.steps.forEach((step, idx) => {
287
- const stepDiv = document.createElement("div");
288
- stepDiv.className = "border-l-4 border-blue-400 bg-gray-50 rounded p-3 mb-3";
289
-
290
- const promptEl = document.createElement("p");
291
- promptEl.className = "text-sm text-gray-700";
292
- promptEl.innerHTML = `<strong>Prompt #${idx+1}:</strong> ${step.prompt}`;
293
-
294
- const responseEl = document.createElement("p");
295
- responseEl.className = "mt-1 text-sm text-gray-600";
296
- responseEl.innerHTML = `<strong>AI Response:</strong> ${step.response}`;
297
-
298
- const precisionEl = document.createElement("p");
299
- precisionEl.className = "text-xs text-red-500 mt-1 italic";
300
- precisionEl.textContent = `Precision: ${step.precision}%`;
301
-
302
- const feedbackEl = document.createElement("p");
303
- feedbackEl.className = "text-xs text-gray-500 mt-1";
304
- feedbackEl.innerHTML = `<strong>Programmer Feedback:</strong> ${step.feedback}`;
305
-
306
- stepDiv.appendChild(promptEl);
307
- stepDiv.appendChild(responseEl);
308
- stepDiv.appendChild(precisionEl);
309
- stepDiv.appendChild(feedbackEl);
310
-
311
- block.appendChild(stepDiv);
312
  });
313
 
314
- container.appendChild(block);
315
- });
316
- }
317
-
318
- // -----------------------------------------------------------
319
- // 4) SYNC LOGIC
320
- // Clicking the Sync button will "re-render" stats, chart, and conversation
321
- // -----------------------------------------------------------
322
- function syncData() {
323
- // Compute stats for each programmer
324
- const statsA = computeStats(programmerAData);
325
- const statsB = computeStats(programmerBData);
326
-
327
- // Update stats in UI
328
- document.getElementById("progA-daily-prompts").textContent = statsA.totalPrompts;
329
- document.getElementById("progA-precision-label").textContent = statsA.avgPrecision + "%";
330
- document.getElementById("progA-precision-bar").style.width = statsA.avgPrecision + "%";
331
-
332
- document.getElementById("progB-daily-prompts").textContent = statsB.totalPrompts;
333
- document.getElementById("progB-precision-label").textContent = statsB.avgPrecision + "%";
334
- document.getElementById("progB-precision-bar").style.width = statsB.avgPrecision + "%";
335
-
336
- // Re-render chart
337
- renderChart(statsA, statsB);
338
-
339
- // Render conversations
340
- renderConversations(programmerAData, "progA-conversations");
341
- renderConversations(programmerBData, "progB-conversations");
342
- }
343
-
344
- // -----------------------------------------------------------
345
- // 5) ON DOM LOAD: INITIALIZE
346
- // We'll sync data immediately, set up Flowbite tabs, etc.
347
- // -----------------------------------------------------------
348
- document.addEventListener("DOMContentLoaded", () => {
349
- // First-time sync
350
- syncData();
351
-
352
- // Tab hooking is handled by Flowbite automatically with data-tabs-toggle attributes
353
- // We only need to ensure the 'Programmer A' tab is selected by default
354
- document.getElementById("progA-tab").click();
355
-
356
- // Attach event to the Sync button
357
- document.getElementById("syncBtn").addEventListener("click", () => {
358
- syncData();
359
- alert("Data synced successfully!");
360
- });
361
- });
362
- </script>
363
  </body>
364
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cursor AI Interaction Tracker - Demo</title>
7
+ <!-- Flowbite CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ "50": "#f5f3ff",
17
+ "100": "#ede9fe",
18
+ "200": "#ddd6fe",
19
+ "300": "#c4b5fd",
20
+ "400": "#a78bfa",
21
+ "500": "#8b5cf6",
22
+ "600": "#7c3aed",
23
+ "700": "#6d28d9",
24
+ "800": "#5b21b6",
25
+ "900": "#4c1d95",
26
+ "950": "#320e5e"
27
+ },
28
+ secondary: {
29
+ "50": "#f0fdf4",
30
+ "100": "#dcfce7",
31
+ "200": "#bbf7d0",
32
+ "300": "#86efac",
33
+ "400": "#4ade80",
34
+ "500": "#22c55e",
35
+ "600": "#16a34a",
36
+ "700": "#15803d",
37
+ "800": "#166534",
38
+ "900": "#14532d",
39
+ "950": "#072711"
40
+ },
41
+ reddish: {
42
+ "50": "#fef2f2",
43
+ "100": "#fee2e2",
44
+ "200": "#fecaca",
45
+ "300": "#fca5a5",
46
+ "400": "#f87171",
47
+ "500": "#ef4444",
48
+ "600": "#dc2626",
49
+ "700": "#b91c1c",
50
+ "800": "#991b1b",
51
+ "900": "#7f1d1d",
52
+ "950": "#450808"
53
+ }
54
+ }
55
+ },
56
+ fontFamily: {
57
+ 'body': [
58
+ 'Inter',
59
+ 'ui-sans-serif',
60
+ 'system-ui',
61
+ '-apple-system',
62
+ 'system-ui',
63
+ 'Segoe UI',
64
+ 'Roboto',
65
+ 'Helvetica Neue',
66
+ 'Arial',
67
+ 'Noto Sans',
68
+ 'sans-serif',
69
+ 'Apple Color Emoji',
70
+ 'Segoe UI Emoji',
71
+ 'Segoe UI Symbol',
72
+ 'Noto Color Emoji'
73
+ ],
74
+ 'sans': [
75
+ 'Inter',
76
+ 'ui-sans-serif',
77
+ 'system-ui',
78
+ '-apple-system',
79
+ 'system-ui',
80
+ 'Segoe UI',
81
+ 'Roboto',
82
+ 'Helvetica Neue',
83
+ 'Arial',
84
+ 'Noto Sans',
85
+ 'sans-serif',
86
+ 'Apple Color Emoji',
87
+ 'Segoe UI Emoji',
88
+ 'Segoe UI Symbol',
89
+ 'Noto Color Emoji'
90
+ ]
91
+ }
92
+ }
93
+ }
94
+ </script>
95
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
96
+ <!-- Chart.js CDN -->
97
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
98
+ <style>
99
+ /* Custom Styles for better readability and aesthetics */
100
+ .code-block {
101
+ padding: 12px;
102
+ background-color: #f3f4f6;
103
+ border-radius: 6px;
104
+ overflow-x: auto; /* For long code lines */
105
+ font-family: 'Courier New', Courier, monospace;
106
+ color: #1e293b;
107
+ margin-top: 6px;
108
+ margin-bottom: 6px;
109
+ border: 1px solid #ddd;
110
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
111
+ }
112
+ .dark .code-block {
113
+ background-color: #1f2937;
114
+ color: #f9fafb;
115
+ border-color: #444;
116
+ }
117
+ /* Card Styling */
118
+ .card {
119
+ transition: all 0.2s ease-in-out;
120
+ }
121
+ .card:hover {
122
+ transform: translateY(-3px);
123
+ box-shadow: 0 6px 12px -2px rgba(50,50,93,0.25), 0 3px 7px -3px rgba(0,0,0,0.3);
124
+ }
125
+ .card-expand-icon {
126
+ transition: transform 0.3s ease-in-out;
127
+ }
128
+ .card.expanded .card-expand-icon {
129
+ transform: rotate(180deg);
130
+ }
131
+ /* Custom Chart Colors */
132
+ .chart-tooltip {
133
+ background: rgba(0, 0, 0, 0.8);
134
+ color: white;
135
+ padding: 5px 10px;
136
+ border-radius: 4px;
137
+ font-size: 13px;
138
+ }
139
+ .chart-tooltip-title {
140
+ font-weight: bold;
141
+ }
142
+ .radial-progress {
143
+ display: inline-flex;
144
+ position: relative;
145
+ width: 80px;
146
+ height: 80px;
147
+ }
148
+ .radial-progress svg {
149
+ width: 100%;
150
+ height: 100%;
151
+ }
152
+ .radial-progress circle {
153
+ cx: 40;
154
+ cy: 40;
155
+ r: 34;
156
+ fill: none;
157
+ stroke-width: 6;
158
+ stroke-dasharray: 213.63; /* Circumference of the circle */
159
+ transform: rotate(-90deg);
160
+ transform-origin: 50% 50%;
161
+ transition: stroke-dashoffset 0.5s ease;
162
+ }
163
+ .radial-progress .bg-circle {
164
+ stroke: #e5e7eb;
165
+ }
166
+ .radial-progress .progress-circle {
167
+ stroke: #4ade80; /* Change the color to fit your theme */
168
+ stroke-dashoffset: 213.63; /* Start with the bar empty */
169
+ }
170
+ .radial-progress .progress-value {
171
+ position: absolute;
172
+ top: 50%;
173
+ left: 50%;
174
+ transform: translate(-50%, -50%);
175
+ font-size: 16px;
176
+ color: #374151;
177
+ font-weight: 500;
178
+ }
179
+ .dark .radial-progress .progress-value {
180
+ color: #d1d5db;
181
+ }
182
+
183
+ </style>
184
  </head>
185
+ <body class="bg-gray-50 dark:bg-gray-900">
186
+
187
+ <div class="container mx-auto p-6">
188
+
189
+ <!-- Header -->
190
+ <header class="mb-8">
191
+ <h1 class="text-3xl font-bold text-primary-600 dark:text-primary-400">Cursor AI Interaction Tracker</h1>
192
+ <p class="text-gray-700 dark:text-gray-300 mt-2">Visualizing AI-Programmer Collaboration & Improvement</p>
193
+ </header>
194
+
195
+ <!-- Tabs -->
196
+ <div class="mb-4">
197
+ <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="interactionTabs" data-tabs-toggle="#interactionTabContent" role="tablist">
198
+ <li class="mr-2" role="presentation">
199
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:border-primary-300 hover:text-primary-600 dark:hover:text-primary-300" id="dashboard-tab" data-tabs-target="#dashboard" type="button" role="tab" aria-controls="dashboard" aria-selected="false">Dashboard</button>
200
+ </li>
201
+ <li class="mr-2" role="presentation">
202
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:border-primary-300 hover:text-primary-600 dark:hover:text-primary-300" id="conversations-tab" data-tabs-target="#conversations" type="button" role="tab" aria-controls="conversations" aria-selected="false">Conversations</button>
203
+ </li>
204
+ <li class="mr-2" role="presentation">
205
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:border-primary-300 hover:text-primary-600 dark:hover:text-primary-300" id="precision-tab" data-tabs-target="#precision" type="button" role="tab" aria-controls="precision" aria-selected="false">AI Precision</button>
206
+ </li>
207
+ <li role="presentation">
208
+ <button class="inline-block p-4 border-b-2 border-transparent rounded-t-lg hover:border-primary-300 hover:text-primary-600 dark:hover:text-primary-300" id="rules-tab" data-tabs-target="#rules" type="button" role="tab" aria-controls="rules" aria-selected="false">Rules & Feedback</button>
209
+ </li>
210
+ </ul>
 
 
 
 
 
 
 
 
211
  </div>
212
+
213
+ <!-- Tab Content -->
214
+ <div id="interactionTabContent">
215
+
216
+ <!-- Dashboard View -->
217
+ <div class="hidden p-6 rounded-lg bg-gray-100 dark:bg-gray-800" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
218
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
219
+ <div class="h-[400px]">
220
+ <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Overall AI Accuracy Trend</h2>
221
+ <div class="relative h-[350px]">
222
+ <canvas id="accuracyChart"></canvas>
223
+ </div>
224
+ </div>
225
+ <div class="space-y-6">
226
+ <div class="p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
227
+ <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Key Metrics</h2>
228
+ <div class="grid grid-cols-2 gap-6">
229
+ <div>
230
+ <dl>
231
+ <div class="mb-4">
232
+ <dt class="text-gray-500 dark:text-gray-400">Total Interactions</dt>
233
+ <dd id="totalInteractionsDash" class="text-2xl font-bold text-primary-600 dark:text-primary-400 mt-1"></dd>
234
+ </div>
235
+ <div>
236
+ <dt class="text-gray-500 dark:text-gray-400">Avg. Precision</dt>
237
+ <div class="radial-progress mt-1" id="avgPrecisionRadial">
238
+ <svg>
239
+ <circle class="bg-circle" />
240
+ <circle class="progress-circle" />
241
+ </svg>
242
+ <span class="progress-value" id="avgPrecisionValueDash"></span>
243
+ </div>
244
+ </div>
245
+ </dl>
246
+ </div>
247
+ <div>
248
+ <dl>
249
+ <div class="mb-4">
250
+ <dt class="text-gray-500 dark:text-gray-400">Below 60% Precision</dt>
251
+ <dd id="lowPrecisionInteractionsDash" class="text-2xl font-bold text-reddish-600 dark:text-reddish-400 mt-1"></dd>
252
+ </div>
253
+ </dl>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ <div class="p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
258
+ <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Recent Rule Improvements</h2>
259
+ <ul id="recentRuleImprovementsDash" class="list-disc list-inside space-y-3 text-gray-700 dark:text-gray-300">
260
+ </ul>
261
+ </div>
262
+ </div>
263
+ </div>
264
  </div>
 
 
 
 
265
 
266
+ <!-- Conversations View -->
267
+ <div class="hidden p-6 rounded-lg bg-gray-100 dark:bg-gray-800" id="conversations" role="tabpanel" aria-labelledby="conversations-tab">
268
+ <div class="mb-6">
269
+ <label for="filterTags" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Filter by Tag:</label>
270
+ <select id="filterTags" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
271
+ <option value="">All Tags</option>
272
+ <option value="debugging">Debugging</option>
273
+ <option value="api design">API Design</option>
274
+ <option value="refactoring">Refactoring</option>
275
+ <option value="optimization">Optimization</option>
276
+ <option value="algorithm">Algorithm</option>
277
+ <option value="deployment">Deployment</option>
278
+ <option value="testing">Testing</option>
279
+ <option value="angular">Angular</option>
280
+ <option value="react">React</option>
281
+ <option value="node.js">Node.js</option>
282
+ <option value="python">Python</option>
283
+ <option value="sql">SQL</option>
284
+ <option value="java">Java</option>
285
+ </select>
286
+ </div>
287
+ <div id="conversationList" class="space-y-6">
288
+ <!-- Conversation cards will be rendered here -->
289
+ </div>
290
+ </div>
291
 
292
+ <!-- AI Precision Tracker View -->
293
+ <div class="hidden p-6 rounded-lg bg-gray-100 dark:bg-gray-800" id="precision" role="tabpanel" aria-labelledby="precision-tab">
294
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
295
+ <div class="h-[400px]">
296
+ <h2 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Precision Score Distribution</h2>
297
+ <div class="relative h-[350px]">
298
+ <canvas id="precisionChart"></canvas>
299
+ </div>
300
+ </div>
301
+ <div class="p-6 bg-white rounded-lg shadow-md dark:bg-gray-700">
302
+ <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Precision Breakdown</h2>
303
+ <div id="precisionMetrics" class="space-y-4">
304
+ <!-- Precision metrics will be rendered here -->
305
+ </div>
306
+ </div>
307
+ </div>
308
  </div>
309
+
310
+ <!-- Rules & Feedback View -->
311
+ <div class="hidden p-6 rounded-lg bg-gray-100 dark:bg-gray-800" id="rules" role="tabpanel" aria-labelledby="rules-tab">
312
+ <h2 class="text-xl font-semibold mb-6 text-gray-900 dark:text-white">AI Rule Improvement Suggestions</h2>
313
+ <div id="ruleImprovements" class="space-y-6">
314
+ <!-- Rule improvements will be rendered here -->
315
+ </div>
316
  </div>
 
 
 
 
317
  </div>
318
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
319
  </div>
320
 
321
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
322
+ <script>
323
+ // Dummy Data (More Rich & Varied)
324
+ const interactions = [
325
+ {
326
+ programmer: "Alice",
327
+ date: "2023-12-28",
328
+ request: "Fix this Python function that's raising an error",
329
+ aiResponse: "```python\ndef process_data(data):\n # Corrected loop condition and index error\n results = []\n for i in range(len(data)):\n if data[i] > 5:\n results.append(data[i] * 2)\n return results\n```",
330
+ finalCode: "```python\ndef process_data(data):\n results = []\n for item in data:\n if item > 5:\n results.append(item * 2)\n return results\n```",
331
+ precision: 90,
332
+ tags: ["debugging", "python", "error handling"],
333
+ ruleChange: null,
334
+ },
335
+ {
336
+ programmer: "Bob",
337
+ date: "2023-12-29",
338
+ request: "Suggest a more efficient way to fetch user data in this Node.js API",
339
+ aiResponse: "```javascript\n// Using async/await and optimized database query\napp.get('/users', async (req, res) => {\n try {\n const users = await db.query('SELECT id, username, email FROM users WHERE active = true');\n res.json(users);\n } catch (error) {\n res.status(500).send('Server error');\n }\n});\n```",
340
+ finalCode: "```javascript\napp.get('/users', async (req, res) => {\n try {\n const users = await db.query('SELECT id, username, email FROM users WHERE active = true ORDER BY username');\n res.json(users);\n } catch (error) {\n res.status(500).send('Server error');\n }\n});\n```",
341
+ precision: 75,
342
+ tags: ["api design", "node.js", "optimization", "performance"],
343
+ ruleChange: {
344
+ original: "Suggest improvements for code efficiency",
345
+ updated: "Suggest improvements focusing on database query optimization and API response times",
346
+ status: "approved",
347
+ },
348
+ },
349
+ {
350
+ programmer: "Alice",
351
+ date: "2023-12-30",
352
+ request: "Refactor this React component to use functional components and hooks",
353
+ aiResponse: "```jsx\nimport React, { useState } from 'react';\n\nfunction UserProfile(props) {\n const [isActive, setIsActive] = useState(false);\n\n return (\n <div>\n <h3>{props.name}</h3>\n <button onClick={() => setIsActive(!isActive)}>{isActive ? 'Deactivate' : 'Activate'}</button>\n </div>\n );\n}\n```",
354
+ finalCode: "```jsx\nimport React, { useState, useEffect } from 'react';\n\nfunction UserProfile(props) {\n const [isActive, setIsActive] = useState(false);\n const [message, setMessage] = useState('');\n\n useEffect(() => {\n setMessage(isActive ? 'Active User' : 'Inactive User');\n }, [isActive]);\n\n return (\n <div>\n <h3>{props.name} - {message}</h3>\n <button onClick={() => setIsActive(!isActive)}>{isActive ? 'Deactivate' : 'Activate'}</button>\n </div>\n );\n}\n```",
355
+ precision: 65,
356
+ tags: ["refactoring", "react", "hooks", "component design"],
357
+ ruleChange: null,
358
+ },
359
+ {
360
+ programmer: "Charlie",
361
+ date: "2023-12-31",
362
+ request: "Optimize this SQL query to improve retrieval speed",
363
+ aiResponse: "```sql\nSELECT * FROM orders WHERE order_date BETWEEN '2023-01-01' AND '2023-12-31';\n```",
364
+ finalCode: "```sql\nSELECT order_id, customer_id, order_date, total_amount FROM orders WHERE order_date BETWEEN '2023-01-01' AND '2023-12-31' AND status = 'COMPLETED' ORDER BY order_date DESC LIMIT 100;\n```",
365
+ precision: 50,
366
+ tags: ["optimization", "sql", "database"],
367
+ ruleChange: {
368
+ original: "Suggest SQL query optimizations",
369
+ updated: "Suggest SQL optimizations considering indexing, specific column selection, and common use cases like pagination and filtering",
370
+ status: "pending",
371
+ },
372
+ },
373
+ {
374
+ programmer: "Bob",
375
+ date: "2024-01-01",
376
+ request: "Write a Python function to calculate Fibonacci sequence recursively",
377
+ aiResponse: "```python\ndef fibonacci_recursive(n):\n if n <= 1:\n return n\n else:\n return fibonacci_recursive(n-1) + fibonacci_recursive(n-2)\n```",
378
+ finalCode: "```python\ndef fibonacci_recursive(n):\n if n <= 1:\n return n\n else:\n return fibonacci_recursive(n-1) + fibonacci_recursive(n-2)\n```",
379
+ precision: 100,
380
+ tags: ["algorithm", "python", "recursion"],
381
+ ruleChange: null
382
+ },
383
+ {
384
+ programmer: "Alice",
385
+ date: "2024-01-02",
386
+ request: "Guide me on deploying a Dockerized app to AWS ECS with CI/CD",
387
+ aiResponse: "To deploy to AWS ECS with CI/CD, you can use AWS CodePipeline and CodeBuild. Here's a high-level process...",
388
+ finalCode: null, // Conceptual request, no final code
389
+ precision: 80,
390
+ tags: ["deployment", "docker", "aws", "ecs", "ci/cd"],
391
+ ruleChange: null
392
+ },
393
+ {
394
+ programmer: "David",
395
+ date: "2024-01-03",
396
+ request: "Explain Dependency Injection in Angular with a practical example",
397
+ aiResponse: "Dependency Injection (DI) in Angular is a design pattern... Here's a simple example using services...",
398
+ finalCode: null, // Conceptual request, no final code
399
+ precision: 92,
400
+ tags: ["angular", "dependency injection", "design patterns"],
401
+ ruleChange: null
402
+ },
403
+ {
404
+ programmer: "Eve",
405
+ date: "2024-01-04",
406
+ request: "Write Jest unit tests for this JavaScript utility function",
407
+ aiResponse: "```javascript\ndescribe('utilityFunction', () => {\n it('should return correct value for valid input', () => {\n expect(utilityFunction(5)).toBeDefined();\n });\n});\n```",
408
+ finalCode: "```javascript\ndescribe('utilityFunction', () => {\n it('should return correct value for valid input', () => {\n expect(utilityFunction(5)).toBe(10); // Example: Assuming function doubles input\n });\n\n it('should handle edge cases like zero or null input', () => {\n expect(utilityFunction(0)).toBe(0);\n expect(utilityFunction(null)).toBe(0);\n });\n});\n```",
409
+ precision: 70,
410
+ tags: ["testing", "jest", "unit tests"],
411
+ ruleChange: {
412
+ original: "Provide basic unit test examples",
413
+ updated: "Provide comprehensive unit test examples including standard cases, edge cases, and boundary conditions",
414
+ status: "approved",
415
+ },
416
+ },
417
+ {
418
+ programmer: "Frank",
419
+ date: "2024-01-05",
420
+ request: "How to optimize performance of a large React application",
421
+ aiResponse: "To optimize a large React app, consider techniques like code splitting, memoization, virtualization of lists, and efficient state management...",
422
+ finalCode: null, // Conceptual request, no final code
423
+ precision: 85,
424
+ tags: ["performance", "react", "optimization", "front-end"],
425
+ ruleChange: null
426
+ },
427
+ {
428
+ programmer: "Grace",
429
+ date: "2024-01-06",
430
+ request: "Implement a binary search algorithm in Java for sorted array",
431
+ aiResponse: "```java\npublic int binarySearch(int[] arr, int target) {\n int low = 0;\n int high = arr.length - 1;\n\n while (low <= high) {\n int mid = low + (high - low) / 2;\n if (arr[mid] == target) return mid;\n if (arr[mid] < target) low = mid + 1;\n else high = mid - 1;\n }\n return -1; // Not found\n}\n```",
432
+ finalCode: "```java\npublic int binarySearch(int[] arr, int target) {\n int low = 0;\n int high = arr.length - 1;\n\n while (low <= high) {\n int mid = low + (high - low) / 2;\n if (arr[mid] == target) return mid;\n if (arr[mid] < target) low = mid + 1;\n else high = mid - 1;\n }\n return -1; // Target not found\n}\n```",
433
+ precision: 98,
434
+ tags: ["algorithm", "java", "binary search", "data structures"],
435
+ ruleChange: null
436
+ }
437
+ ];
438
+
439
+ // --- Dashboard Charts and Metrics ---
440
+ function initializeDashboard() {
441
+ // Metrics Calculation
442
+ const totalInteractionsCount = interactions.length;
443
+ const avgPrecisionValue = (interactions.reduce((sum, interaction) => sum + interaction.precision, 0) / totalInteractionsCount).toFixed(2);
444
+ const lowPrecisionCount = interactions.filter(interaction => interaction.precision < 60).length;
445
+
446
+ document.getElementById('totalInteractionsDash').textContent = totalInteractionsCount;
447
+ document.getElementById('avgPrecisionValueDash').textContent = `${avgPrecisionValue}%`;
448
+ document.getElementById('lowPrecisionInteractionsDash').textContent = lowPrecisionCount;
449
+
450
+ // Update the radial progress for average precision
451
+ const avgPrecisionRadial = document.getElementById('avgPrecisionRadial');
452
+ const progressCircle = avgPrecisionRadial.querySelector('.progress-circle');
453
+ const circumference = 213.63;
454
+ const offset = circumference - (avgPrecisionValue / 100) * circumference;
455
+ progressCircle.style.strokeDashoffset = offset;
456
+ // Update color based on precision value
457
+ progressCircle.style.stroke = avgPrecisionValue >= 70 ? '#4ade80' : avgPrecisionValue >= 60 ? '#facc15' : '#ef4444';
458
+
459
+ // Recent Rule Improvements on Dashboard
460
+ const recentRuleImprovementsList = document.getElementById('recentRuleImprovementsDash');
461
+ recentRuleImprovementsList.innerHTML = '';
462
+ interactions.filter(interaction => interaction.ruleChange && interaction.ruleChange.status === 'approved')
463
+ .slice(-3) // Take the last 3
464
+ .forEach(interaction => {
465
+ const listItem = document.createElement('li');
466
+ listItem.innerHTML = `<span class="font-medium">${interaction.ruleChange.original}</span> <svg class="w-3 h-3 inline-block mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
467
+ <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/></svg> <span class="font-medium">${interaction.ruleChange.updated}</span>`;
468
+ recentRuleImprovementsList.appendChild(listItem);
469
+ });
470
+
471
+ // Accuracy Chart
472
+ const accuracyData = interactions.map(interaction => interaction.precision);
473
+ const accuracyLabels = interactions.map(interaction => interaction.date);
474
+
475
+ const accuracyChartRef = document.getElementById('accuracyChart');
476
+ if (window.accuracyChartInstance) {
477
+ window.accuracyChartInstance.destroy();
478
+ }
479
+
480
+ const chartOptions = {
481
+ responsive: true,
482
+ maintainAspectRatio: true,
483
+ scales: {
484
+ y: {
485
+ beginAtZero: true,
486
+ max: 100,
487
+ grid: {
488
+ color: 'rgba(0, 0, 0, 0.1)',
489
+ borderColor: 'transparent'
490
+ },
491
+ ticks: {
492
+ font: {
493
+ size: 14,
494
+ }
495
+ }
496
+ },
497
+ x: {
498
+ grid: {
499
+ display: false
500
+ },
501
+ ticks: {
502
+ font: {
503
+ size: 12,
504
+ }
505
+ }
506
+ }
507
+ },
508
+ plugins: {
509
+ legend: {
510
+ display: false
511
+ },
512
+ tooltip: {
513
+ enabled: true,
514
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
515
+ titleFont: {
516
+ size: 16,
517
+ weight: 'bold'
518
+ },
519
+ bodyFont: {
520
+ size: 14
521
+ },
522
+ padding: 10,
523
+ titleColor: '#ffffff',
524
+ bodyColor: '#ffffff',
525
+ borderColor: 'rgba(0, 0, 0, 0.2)',
526
+ borderWidth: 1,
527
+ cornerRadius: 6
528
+ }
529
+ }
530
+ };
531
+
532
+ window.accuracyChartInstance = new Chart(accuracyChartRef, {
533
+ type: 'line',
534
+ data: {
535
+ labels: accuracyLabels,
536
+ datasets: [{
537
+ label: 'AI Accuracy (%)',
538
+ data: accuracyData,
539
+ borderColor: '#8b5cf6',
540
+ backgroundColor: 'rgba(139, 92, 246, 0.2)',
541
+ tension: 0.4,
542
+ pointRadius: 4,
543
+ pointBackgroundColor: '#8b5cf6'
544
+ }]
545
+ },
546
+ options: {
547
+ ...chartOptions,
548
+ }
549
+ });
550
+
551
+ // Add Performance Optimization Section
552
+ const performanceOptimization = document.createElement('div');
553
+ performanceOptimization.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
554
+ performanceOptimization.innerHTML = `
555
+ <div class="flex items-center justify-between mb-6">
556
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Performance Optimization</h3>
557
+ <span class="px-3 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">
558
+ Optimized
559
+ </span>
560
+ </div>
561
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
562
+ <div>
563
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Resource Usage</h4>
564
+ <div class="space-y-4">
565
+ <div>
566
+ <div class="flex justify-between mb-1">
567
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">CPU Usage</span>
568
+ <span class="text-sm font-medium text-green-600">28%</span>
569
+ </div>
570
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
571
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 28%"></div>
572
+ </div>
573
+ </div>
574
+ <div>
575
+ <div class="flex justify-between mb-1">
576
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Memory Usage</span>
577
+ <span class="text-sm font-medium text-green-600">45%</span>
578
+ </div>
579
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
580
+ <div class="bg-green-600 h-2.5 rounded-full" style="width: 45%"></div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ <div>
586
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Load Times</h4>
587
+ <div class="space-y-4">
588
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
589
+ <div class="flex items-center justify-between">
590
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Average Response</span>
591
+ <span class="text-sm font-medium text-green-600">124ms</span>
592
+ </div>
593
+ <div class="mt-2 text-xs text-gray-500">15% faster than last week</div>
594
+ </div>
595
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
596
+ <div class="flex items-center justify-between">
597
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Peak Response</span>
598
+ <span class="text-sm font-medium text-green-600">312ms</span>
599
+ </div>
600
+ <div class="mt-2 text-xs text-gray-500">8% improvement</div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ `;
606
+ document.getElementById('dashboard').appendChild(performanceOptimization);
607
 
608
+ // Add Knowledge Base Section
609
+ const knowledgeBase = document.createElement('div');
610
+ knowledgeBase.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
611
+ knowledgeBase.innerHTML = `
612
+ <div class="flex items-center justify-between mb-6">
613
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Knowledge Base</h3>
614
+ <button class="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
615
+ View All
616
+ </button>
617
+ </div>
618
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
619
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
620
+ <div class="flex items-center mb-3">
621
+ <svg class="w-6 h-6 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
622
+ <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
623
+ </svg>
624
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Best Practices</h4>
625
+ </div>
626
+ <ul class="space-y-2">
627
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Code Organization</li>
628
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Error Handling</li>
629
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Performance Tips</li>
630
+ </ul>
631
+ </div>
632
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
633
+ <div class="flex items-center mb-3">
634
+ <svg class="w-6 h-6 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
635
+ <path d="M9 4.804A7.968 7.968 0 005.5 4c-1.255 0-2.443.29-3.5.804v10A7.969 7.969 0 015.5 14c1.669 0 3.218.51 4.5 1.385A7.962 7.962 0 0114.5 14c1.255 0 2.443.29 3.5.804v-10A7.968 7.968 0 0014.5 4c-1.255 0-2.443.29-3.5.804V12a1 1 0 11-2 0V4.804z"/>
636
+ </svg>
637
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Learning Resources</h4>
638
+ </div>
639
+ <ul class="space-y-2">
640
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Documentation</li>
641
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Video Tutorials</li>
642
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Code Examples</li>
643
+ </ul>
644
+ </div>
645
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
646
+ <div class="flex items-center mb-3">
647
+ <svg class="w-6 h-6 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
648
+ <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
649
+ </svg>
650
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white">Code Patterns</h4>
651
+ </div>
652
+ <ul class="space-y-2">
653
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Design Patterns</li>
654
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Common Solutions</li>
655
+ <li class="text-sm text-gray-700 dark:text-gray-300">• Best Practices</li>
656
+ </ul>
657
+ </div>
658
+ </div>
659
+ `;
660
+ document.getElementById('dashboard').appendChild(knowledgeBase);
661
+ }
662
+
663
+ // --- Conversations View ---
664
+ function createConversationCard(interaction, index) {
665
+ const card = document.createElement('div');
666
+ card.classList.add(
667
+ 'card',
668
+ 'mb-6',
669
+ 'p-6',
670
+ 'bg-white',
671
+ 'border',
672
+ 'border-gray-200',
673
+ 'rounded-lg',
674
+ 'shadow-md',
675
+ 'dark:bg-gray-700',
676
+ 'dark:border-gray-600',
677
+ 'transform',
678
+ 'transition-all',
679
+ 'duration-300',
680
+ 'hover:scale-[1.02]'
681
+ );
682
+ card.innerHTML = `
683
+ <div class="flex justify-between items-start">
684
+ <div>
685
+ <h5 class="text-xl font-bold leading-none text-primary-600 dark:text-primary-400">${interaction.programmer}</h5>
686
+ <p class="mb-1 text-sm text-gray-500 dark:text-gray-400">${interaction.date} - Tags: ${interaction.tags.join(', ')}</p>
687
+ <p class="font-normal text-gray-700 dark:text-gray-300">Request: ${interaction.request.substring(0, 80)}...</p>
688
+ </div>
689
+ <span class="bg-${interaction.precision >= 70 ? 'green' : interaction.precision >= 60 ? 'yellow' : 'red'}-100 text-${interaction.precision >= 70 ? 'green' : interaction.precision >= 60 ? 'yellow' : 'red'}-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-full dark:bg-${interaction.precision >= 70 ? 'green' : interaction.precision >= 60 ? 'yellow' : 'red'}-900 dark:text-${interaction.precision >= 70 ? 'green' : interaction.precision >= 60 ? 'yellow' : 'red'}-300">
690
+ <svg class="w-3 h-3 mr-1.5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 14.22a.75.75 0 000-1.06l-4.25-4.25-2.25 2.25a.75.75 0 001.06 1.06l1.69-1.69 3.72 3.72a.75.75 0 001.06 0z"/></svg>
691
+ Precision: ${interaction.precision}%
692
+ </span>
693
+ </div>
694
+ <div class="mt-4 hidden transition-all duration-300 ease-in-out" id="details-${index}">
695
+ <p class="font-semibold text-gray-900 dark:text-white">Full Request:</p>
696
+ <p class="text-gray-700 dark:text-gray-300">${interaction.request}</p>
697
+
698
+ <p class="mt-4 font-semibold text-gray-900 dark:text-white">AI Response:</p>
699
+ <div class="code-block"><pre><code class="language-python">${interaction.aiResponse}</code></pre></div>
700
+
701
+ ${interaction.finalCode ? `
702
+ <p class="mt-4 font-semibold text-gray-900 dark:text-white">Final Implemented Code:</p>
703
+ <div class="code-block"><pre><code class="language-python">${interaction.finalCode}</code></pre></div>
704
+ ` : ''}
705
+
706
+ ${interaction.ruleChange ? `
707
+ <div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-gray-600">
708
+ <h6 class="font-semibold text-gray-900 dark:text-white">Rule Change Suggestion:</h6>
709
+ <p class="text-gray-700 dark:text-gray-300"><span class="font-medium">Original:</span> ${interaction.ruleChange.original}</p>
710
+ <p class="text-gray-700 dark:text-gray-300"><span class="font-medium">Proposed:</span> ${interaction.ruleChange.updated}</p>
711
+ <p class="text-gray-700 dark:text-gray-300">Status: <span class="font-medium">${interaction.ruleChange.status}</span></p>
712
+ ${interaction.ruleChange.status === 'pending' ? `
713
+ <div class="mt-4 flex space-x-4">
714
+ <button onclick="approveRuleChange(${index})" type="button" class="text-white bg-secondary-700 hover:bg-secondary-800 focus:ring-4 focus:outline-none focus:ring-secondary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-secondary-600 dark:hover:bg-secondary-700 dark:focus:ring-secondary-800">Approve</button>
715
+ <button onclick="rejectRuleChange(${index})" type="button" class="text-white bg-reddish-700 hover:bg-reddish-800 focus:ring-4 focus:outline-none focus:ring-reddish-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-reddish-600 dark:hover:bg-reddish-700 dark:focus:ring-reddish-800">Reject</button>
716
+ </div>
717
+ ` : ''}
718
+ </div>
719
+ ` : ''}
720
+ </div>
721
+ <div class="mt-4 flex justify-end">
722
+ <button data-index="${index}" onclick="toggleConversationDetails(this)" type="button" class="text-primary-600 hover:underline dark:text-primary-500 flex items-center">
723
+ <span id="icon-${index}" class="card-expand-icon">
724
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
725
+ </span>
726
+ <span class="ml-1">Show Details</span>
727
+ </button>
728
+ </div>
729
+
730
+ <!-- Add Real-time Analysis Component -->
731
+ <div class="mt-4 bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
732
+ <div class="flex items-center justify-between mb-2">
733
+ <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Response Analysis</h3>
734
+ <div class="relative" id="analysis-progress-${index}">
735
+ <svg class="w-8 h-8" viewBox="0 0 36 36">
736
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-gray-200 dark:text-gray-700" stroke-width="2"></circle>
737
+ <circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-primary-500" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="${100 - interaction.precision}" transform="rotate(-90 18 18)"></circle>
738
+ </svg>
739
+ <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm font-medium">${interaction.precision}%</span>
740
+ </div>
741
+ </div>
742
+ <div class="space-y-2">
743
+ <div class="flex items-center">
744
+ <span class="w-3 h-3 rounded-full ${interaction.precision >= 80 ? 'bg-green-500' : interaction.precision >= 60 ? 'bg-yellow-500' : 'bg-red-500'}"></span>
745
+ <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Code Quality Score</span>
746
+ </div>
747
+ <div class="flex items-center">
748
+ <span class="w-3 h-3 rounded-full ${interaction.tags.includes('optimization') ? 'bg-primary-500' : 'bg-gray-300'}"></span>
749
+ <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Performance Optimized</span>
750
+ </div>
751
+ </div>
752
+ </div>
753
+
754
+ <!-- Add Tag Cloud -->
755
+ <div class="mt-4 flex flex-wrap gap-2">
756
+ ${interaction.tags.map(tag => `
757
+ <span class="px-3 py-1 text-sm font-medium rounded-full bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-300">
758
+ ${tag}
759
+ </span>
760
+ `).join('')}
761
+ </div>
762
+ `;
763
+ return card;
764
+ }
765
+
766
+ function renderConversations(filteredInteractions = interactions) {
767
+ const conversationListDiv = document.getElementById('conversationList');
768
+ conversationListDiv.innerHTML = '';
769
+ filteredInteractions.forEach((interaction, index) => {
770
+ conversationListDiv.appendChild(createConversationCard(interaction, index));
771
+ });
772
+ }
773
+
774
+ function toggleConversationDetails(button) {
775
+ const index = button.dataset.index;
776
+ const detailsDiv = document.getElementById(`details-${index}`);
777
+ const icon = document.getElementById(`icon-${index}`);
778
+ const card = detailsDiv.closest('.card');
779
+
780
+ detailsDiv.classList.toggle('hidden');
781
+ card.classList.toggle('expanded');
782
+
783
+ if (detailsDiv.classList.contains('hidden')) {
784
+ button.querySelector('span:last-child').textContent = 'Show Details';
785
+ icon.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>';
786
+ } else {
787
+ button.querySelector('span:last-child').textContent = 'Hide Details';
788
+ icon.innerHTML = '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>';
789
+ }
790
+ }
791
+
792
+ document.getElementById('filterTags').addEventListener('change', function() {
793
+ const selectedTag = this.value;
794
+ const filtered = selectedTag ? interactions.filter(interaction => interaction.tags.includes(selectedTag)) : interactions;
795
+ renderConversations(filtered);
796
  });
797
+
798
+ // --- Precision Tracker View ---
799
+ function initializePrecisionTracker() {
800
+ // Precision Distribution Chart
801
+ const precisionScores = interactions.map(interaction => interaction.precision);
802
+ const precisionCounts = {};
803
+ precisionScores.forEach(score => {
804
+ const bucket = Math.floor(score / 10) * 10; // Bucket scores into 10s (0-10, 11-20, etc.)
805
+ precisionCounts[bucket] = (precisionCounts[bucket] || 0) + 1;
806
+ });
807
+ const chartLabels = Object.keys(precisionCounts).sort((a, b) => parseInt(a) - parseInt(b)).map(bucket => `${bucket}-${parseInt(bucket) + 9}%`);
808
+ const chartData = chartLabels.map(label => precisionCounts[parseInt(label.split('-')[0])]);
809
+
810
+ const precisionChartRef = document.getElementById('precisionChart');
811
+ if (window.precisionChartInstance) {
812
+ window.precisionChartInstance.destroy();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
813
  }
814
+
815
+ const chartOptions = {
816
+ responsive: true,
817
+ maintainAspectRatio: true,
818
+ scales: {
819
+ y: {
820
+ beginAtZero: true,
821
+ grid: {
822
+ color: 'rgba(0, 0, 0, 0.1)',
823
+ borderColor: 'transparent'
824
+ },
825
+ ticks: {
826
+ font: {
827
+ size: 14,
828
+ }
829
+ }
830
+ },
831
+ x: {
832
+ grid: {
833
+ display: false
834
+ },
835
+ ticks: {
836
+ font: {
837
+ size: 14,
838
+ }
839
+ }
840
+ }
841
+ },
842
+ plugins: {
843
+ legend: {
844
+ display: false
845
+ },
846
+ tooltip: {
847
+ enabled: true,
848
+ backgroundColor: 'rgba(0, 0, 0, 0.8)',
849
+ titleFont: {
850
+ size: 16,
851
+ weight: 'bold'
852
+ },
853
+ bodyFont: {
854
+ size: 14
855
+ },
856
+ padding: 10,
857
+ titleColor: '#ffffff',
858
+ bodyColor: '#ffffff',
859
+ borderColor: 'rgba(0, 0, 0, 0.2)',
860
+ borderWidth: 1,
861
+ cornerRadius: 6
862
+ }
863
+ }
864
+ };
865
+
866
+ window.precisionChartInstance = new Chart(precisionChartRef, {
867
+ type: 'bar',
868
+ data: {
869
+ labels: chartLabels,
870
+ datasets: [{
871
+ label: 'Number of Interactions',
872
+ data: chartData,
873
+ backgroundColor: 'rgba(139, 92, 246, 0.7)',
874
+ borderColor: '#8b5cf6',
875
+ borderWidth: 1
876
+ }]
877
+ },
878
+ options: {
879
+ ...chartOptions,
880
+ }
881
+ });
882
+
883
+ // Precision Metrics Breakdown
884
+ const precisionMetricsDiv = document.getElementById('precisionMetrics');
885
+ precisionMetricsDiv.innerHTML = '';
886
+ interactions.forEach(interaction => {
887
+ const metricItem = document.createElement('div');
888
+ metricItem.className = 'mb-4';
889
+ metricItem.innerHTML = `
890
+ <div class="flex items-center justify-between mb-1">
891
+ <span class="text-sm font-medium text-gray-900 dark:text-white">${interaction.programmer} - ${interaction.date}</span>
892
+ <span class="text-sm font-medium text-gray-900 dark:text-white">${interaction.precision}%</span>
893
+ </div>
894
+ <div class="w-full bg-gray-200 rounded-full h-3 dark:bg-gray-600">
895
+ <div class="bg-${interaction.precision >= 70 ? 'green' : interaction.precision >= 60 ? 'yellow' : 'red'}-600 h-3 rounded-full" style="width: ${interaction.precision}%"></div>
896
+ </div>
897
+ `;
898
+ precisionMetricsDiv.appendChild(metricItem);
899
+ });
900
+
901
+ // Add Learning Progress Section
902
+ const learningProgress = document.createElement('div');
903
+ learningProgress.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
904
+ learningProgress.innerHTML = `
905
+ <div class="flex items-center justify-between mb-6">
906
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Learning Progress</h3>
907
+ <div class="flex items-center space-x-2">
908
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
909
+ <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
910
+ <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
911
+ </svg>
912
+ Level 5
913
+ </span>
914
+ </div>
915
+ </div>
916
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
917
+ <div>
918
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Skills Progress</h4>
919
+ <div class="space-y-4">
920
+ <div>
921
+ <div class="flex justify-between mb-1">
922
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Code Quality</span>
923
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">85%</span>
924
+ </div>
925
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
926
+ <div class="bg-primary-600 h-2.5 rounded-full" style="width: 85%"></div>
927
+ </div>
928
+ </div>
929
+ <div>
930
+ <div class="flex justify-between mb-1">
931
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Problem Solving</span>
932
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">92%</span>
933
+ </div>
934
+ <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
935
+ <div class="bg-primary-600 h-2.5 rounded-full" style="width: 92%"></div>
936
+ </div>
937
+ </div>
938
+ </div>
939
+ </div>
940
+ <div>
941
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Recent Achievements</h4>
942
+ <div class="space-y-3">
943
+ <div class="flex items-center p-3 bg-gray-50 rounded-lg dark:bg-gray-800">
944
+ <div class="flex-shrink-0">
945
+ <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
946
+ <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zm7-10a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L11 3.414V9a1 1 0 11-2 0V3.414L5.707 6.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0112 2z" clip-rule="evenodd"/>
947
+ </svg>
948
+ </div>
949
+ <div class="ml-3">
950
+ <p class="text-sm font-medium text-gray-900 dark:text-white">Code Optimization Master</p>
951
+ <p class="text-xs text-gray-500 dark:text-gray-400">Improved performance by 50%</p>
952
+ </div>
953
+ </div>
954
+ </div>
955
+ </div>
956
+ </div>
957
+ `;
958
+ document.getElementById('precision').appendChild(learningProgress);
959
+
960
+ // Add Collaboration Insights
961
+ const collaborationInsights = document.createElement('div');
962
+ collaborationInsights.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
963
+ collaborationInsights.innerHTML = `
964
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-6">Collaboration Insights</h3>
965
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
966
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
967
+ <div class="flex items-center">
968
+ <div class="flex-shrink-0">
969
+ <svg class="w-8 h-8 text-primary-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
970
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
971
+ </svg>
972
+ </div>
973
+ <div class="ml-4">
974
+ <p class="text-lg font-semibold text-gray-900 dark:text-white">Team Impact</p>
975
+ <p class="text-sm text-gray-500 dark:text-gray-400">+45% Knowledge Sharing</p>
976
+ </div>
977
+ </div>
978
+ </div>
979
+ </div>
980
+ `;
981
+ document.getElementById('precision').appendChild(collaborationInsights);
982
+ }
983
+
984
+ // --- Rules & Feedback View ---
985
+ function renderRuleImprovementsView() {
986
+ const ruleImprovementsDiv = document.getElementById('ruleImprovements');
987
+ ruleImprovementsDiv.innerHTML = '';
988
+ const pendingRules = interactions.filter(interaction => interaction.ruleChange && interaction.ruleChange.status === 'pending');
989
+
990
+ if (pendingRules.length === 0) {
991
+ ruleImprovementsDiv.innerHTML = '<p class="text-gray-700 dark:text-gray-300">No pending rule improvement suggestions.</p>';
992
+ return;
993
+ }
994
+
995
+ pendingRules.forEach((interaction, index) => {
996
+ const ruleCard = document.createElement('div');
997
+ ruleCard.className = "mb-6 p-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-700 dark:border-gray-600";
998
+ ruleCard.innerHTML = `
999
+ <h5 class="text-xl font-bold leading-none text-primary-600 dark:text-primary-400">Rule Suggestion for: ${interaction.programmer} - ${interaction.date}</h5>
1000
+ <p class="mb-1 text-sm text-gray-500 dark:text-gray-400">Interaction Tags: ${interaction.tags.join(', ')}</p>
1001
+ <p class="font-normal text-gray-700 dark:text-gray-300"><span class="font-medium">Original Rule:</span> ${interaction.ruleChange.original}</p>
1002
+ <p class="font-normal text-gray-700 dark:text-gray-300"><span class="font-medium">Proposed Updated Rule:</span> ${interaction.ruleChange.updated}</p>
1003
+ <div class="mt-4 flex space-x-4">
1004
+ <button onclick="approveRuleChange(${interactions.indexOf(interaction)})" type="button" class="text-white bg-secondary-700 hover:bg-secondary-800 focus:ring-4 focus:outline-none focus:ring-secondary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-secondary-600 dark:hover:bg-secondary-700 dark:focus:ring-secondary-800">Approve</button>
1005
+ <button onclick="rejectRuleChange(${interactions.indexOf(interaction)})" type="button" class="text-white bg-reddish-700 hover:bg-reddish-800 focus:ring-4 focus:outline-none focus:ring-reddish-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-reddish-600 dark:hover:bg-reddish-700 dark:focus:ring-reddish-800">Reject</button>
1006
+ </div>
1007
+ `;
1008
+ ruleImprovementsDiv.appendChild(ruleCard);
1009
+ });
1010
+
1011
+ // Add Code Quality Metrics
1012
+ const codeQualityMetrics = document.createElement('div');
1013
+ codeQualityMetrics.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
1014
+ codeQualityMetrics.innerHTML = `
1015
+ <div class="flex items-center justify-between mb-6">
1016
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Code Quality Analysis</h3>
1017
+ <span class="px-3 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">
1018
+ Healthy
1019
+ </span>
1020
+ </div>
1021
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
1022
+ <div>
1023
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Complexity Metrics</h4>
1024
+ <div class="space-y-4">
1025
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-800">
1026
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Cyclomatic Complexity</span>
1027
+ <span class="text-sm font-medium text-green-600 dark:text-green-400">8/10</span>
1028
+ </div>
1029
+ <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg dark:bg-gray-800">
1030
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Maintainability Index</span>
1031
+ <span class="text-sm font-medium text-green-600 dark:text-green-400">85/100</span>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+ <div>
1036
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Technical Debt</h4>
1037
+ <div class="relative pt-1">
1038
+ <div class="flex mb-2 items-center justify-between">
1039
+ <div>
1040
+ <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200">
1041
+ Low Risk
1042
+ </span>
1043
+ </div>
1044
+ <div class="text-right">
1045
+ <span class="text-xs font-semibold inline-block text-green-600">
1046
+ 2.5 days
1047
+ </span>
1048
+ </div>
1049
+ </div>
1050
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
1051
+ <div style="width:25%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"></div>
1052
+ </div>
1053
+ </div>
1054
+ </div>
1055
+ </div>
1056
+ `;
1057
+ document.getElementById('rules').appendChild(codeQualityMetrics);
1058
+
1059
+ // Add Security Analysis
1060
+ const securityAnalysis = document.createElement('div');
1061
+ securityAnalysis.className = 'mt-8 p-6 bg-white rounded-lg shadow-lg dark:bg-gray-700';
1062
+ securityAnalysis.innerHTML = `
1063
+ <div class="flex items-center justify-between mb-6">
1064
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Security Analysis</h3>
1065
+ <div class="flex items-center space-x-2">
1066
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
1067
+ <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
1068
+ <path fill-rule="evenodd" d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
1069
+ </svg>
1070
+ Secure
1071
+ </span>
1072
+ </div>
1073
+ </div>
1074
+ <div class="space-y-6">
1075
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
1076
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Dependency Check</h4>
1077
+ <div class="space-y-3">
1078
+ <div class="flex items-center justify-between">
1079
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Dependencies Scanned</span>
1080
+ <span class="text-sm font-medium text-gray-900 dark:text-white">124</span>
1081
+ </div>
1082
+ <div class="flex items-center justify-between">
1083
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Vulnerabilities Found</span>
1084
+ <span class="text-sm font-medium text-green-600">0</span>
1085
+ </div>
1086
+ <div class="flex items-center justify-between">
1087
+ <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Last Scan</span>
1088
+ <span class="text-sm font-medium text-gray-900 dark:text-white">2 hours ago</span>
1089
+ </div>
1090
+ </div>
1091
+ </div>
1092
+ <div class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
1093
+ <h4 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Security Best Practices</h4>
1094
+ <div class="space-y-2">
1095
+ <div class="flex items-center">
1096
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
1097
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
1098
+ </svg>
1099
+ <span class="text-sm text-gray-700 dark:text-gray-300">Input Validation</span>
1100
+ </div>
1101
+ <div class="flex items-center">
1102
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
1103
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
1104
+ </svg>
1105
+ <span class="text-sm text-gray-700 dark:text-gray-300">Authentication</span>
1106
+ </div>
1107
+ <div class="flex items-center">
1108
+ <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
1109
+ <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
1110
+ </svg>
1111
+ <span class="text-sm text-gray-700 dark:text-gray-300">Data Encryption</span>
1112
+ </div>
1113
+ </div>
1114
+ </div>
1115
+ </div>
1116
+ `;
1117
+ document.getElementById('rules').appendChild(securityAnalysis);
1118
  }
1119
+
1120
+ function approveRuleChange(interactionIndex) {
1121
+ interactions[interactionIndex].ruleChange.status = 'approved';
1122
+ alert('Rule change approved!');
1123
+ renderRuleImprovementsView();
1124
+ renderConversations();
1125
+ initializeDashboard();
1126
+ }
1127
+
1128
+ function rejectRuleChange(interactionIndex) {
1129
+ interactions[interactionIndex].ruleChange.status = 'rejected';
1130
+ alert('Rule change rejected.');
1131
+ renderRuleImprovementsView();
1132
+ renderConversations();
1133
+ initializeDashboard();
1134
+ }
1135
+
1136
+ // --- Initialize all views on page load ---
1137
+ document.addEventListener('DOMContentLoaded', () => {
1138
+ // Set default tab to Dashboard on load
1139
+ const defaultTabButton = document.getElementById('dashboard-tab');
1140
+ const defaultTabContent = document.getElementById('dashboard');
1141
+ defaultTabButton.classList.add('border-primary-500', 'text-primary-600', 'dark:text-primary-500', 'dark:border-primary-500', 'border-b-2');
1142
+ defaultTabContent.classList.remove('hidden');
1143
+
1144
+ initializeDashboard();
1145
+ renderConversations();
1146
+ initializePrecisionTracker();
1147
+ renderRuleImprovementsView();
1148
+
1149
+ // Simulate initial tab activation (Flowbite Tabs need explicit initialization sometimes post-render for dynamic content)
1150
+ const tabElements = document.querySelectorAll('#interactionTabs [role="tab"]');
1151
+ tabElements.forEach(tab => {
1152
+ tab.addEventListener('click', () => {
1153
+ // Basic tab activation simulation, Flowbite may have its own API for dynamic tabs if needed
1154
+ tabElements.forEach(t => t.classList.remove('border-primary-500', 'text-primary-600', 'dark:text-primary-500', 'dark:border-primary-500', 'border-b-2'));
1155
+ tab.classList.add('border-primary-500', 'text-primary-600', 'dark:text-primary-500', 'dark:border-primary-500', 'border-b-2');
1156
+
1157
+ const targetId = tab.getAttribute('data-tabs-target');
1158
+ document.querySelectorAll('#interactionTabContent > div').forEach(content => content.classList.add('hidden'));
1159
+ document.querySelector(targetId).classList.remove('hidden');
1160
+ });
1161
+ });
 
 
 
 
1162
  });
1163
 
1164
+ </script>
1165
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1166
  </body>
1167
  </html>