feat: Improve expand/collapse functionality for trace prefixes

The code changes in `styles.css` and `index.html` enhance the expand/collapse functionality for trace prefixes in the dashboard. The changes include:
- Adding a clickable arrow icon before the prefix header to indicate expandability
- Toggling the 'expanded' class on the parent element when the header is clicked
- Displaying the table wrapper when the prefix is expanded, allowing for a maximum height of 300px with vertical scrolling

src/planai/static/styles.css

@@ -121,24 +121,47 @@ h2 {
 }
 
 .trace-prefix h4 {
-    margin-top: 0;
+    cursor: pointer;
+    user-select: none;
 }
 
-.trace-prefix ul {
-    padding-left: 20px;
+.trace-prefix h4::before {
+    content: '▶ ';
+    display: inline-block;
+    transition: transform 0.3s;
+}
+
+.trace-prefix.expanded h4::before {
+    transform: rotate(90deg);
 }
 
 .table-wrapper {
+    display: none;
+}
+
+.trace-prefix.expanded .table-wrapper {
+    display: block;
     max-height: 300px;
     overflow-y: auto;
     margin-bottom: 20px;
 }
 
+.trace-prefix ul {
+    padding-left: 20px;
+}
+
 .trace-table {
     width: 100%;
     border-collapse: collapse;
 }
 
+.trace-table th,
+.trace-table td {
+    border: 1px solid var(--border-color);
+    padding: 8px;
+    text-align: left;
+}
+
 .trace-table th {
     position: sticky;
     top: 0;
@@ -147,13 +170,6 @@ h2 {
     z-index: 1;
 }
 
-.trace-table th,
-.trace-table td {
-    border: 1px solid var(--border-color);
-    padding: 8px;
-    text-align: left;
-}
-
 .trace-table td {
     white-space: nowrap;
     overflow: hidden;

src/planai/templates/index.html

@@ -158,7 +158,13 @@ <h4>Input Provenance:</h4>
 
                 const prefix = prefixStr.split('_').join(', ');
 
-                prefixElement.innerHTML = `<h4>Prefix: (${prefix})</h4>`;
+                const headerElement = document.createElement('h4');
+                headerElement.textContent = `Prefix: (${prefix})`;
+                headerElement.onclick = function () {
+                    this.parentElement.classList.toggle('expanded');
+                };
+
+                prefixElement.appendChild(headerElement);
 
                 const tableWrapper = document.createElement('div');
                 tableWrapper.className = 'table-wrapper';
@@ -199,7 +205,6 @@ <h4>Input Provenance:</h4>
         }
 
 
-
         // Quit button functionality
         document.getElementById('quit-button').addEventListener('click', function () {
             fetch('/quit', { method: 'POST' })