Upd file previewer

static/script.js

@@ -167,13 +167,18 @@
       list.innerHTML = '<div class="muted">No files in this project.</div>';
       return;
     }
-    list.innerHTML = files.map(f => `
-      <div class="file-card">
+    list.innerHTML = files.map((f, idx) => `
+      <div class="file-card" data-idx="${idx}">
         <div class="file-card-head">
           <div class="file-name">${f.filename}</div>
-          <button class="file-del" data-fn="${encodeURIComponent(f.filename)}" title="Delete">🗑️</button>
         </div>
-        <div class="file-summary">${(f.summary || '').replace(/</g,'&lt;')}</div>
+        <div class="file-summary" id="file-summary-${idx}">${(f.summary || '').replace(/</g,'&lt;')}</div>
+        <div class="file-card-actions">
+          <button class="see-more-btn" data-idx="${idx}">… See more</button>
+          <div class="file-actions-right">
+            <button class="btn-danger file-del" data-fn="${encodeURIComponent(f.filename)}" title="Delete">Delete</button>
+          </div>
+        </div>
       </div>
     `).join('');
     // bind deletes
@@ -194,6 +199,16 @@
         } catch {}
       });
     });
+    // bind see more/less
+    list.querySelectorAll('.see-more-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const idx = btn.getAttribute('data-idx');
+        const summary = document.getElementById(`file-summary-${idx}`);
+        if (!summary) return;
+        const expanded = summary.classList.toggle('expanded');
+        btn.textContent = expanded ? 'See less' : '… See more';
+      });
+    });
   }
 
   // Expose show files section

static/styles.css

@@ -1171,4 +1171,80 @@
     opacity: 1;
     transform: none;
   }
+}
+
+/* Files Page Cards */
+.file-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 16px;
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.file-card-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.file-name {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-summary {
+  color: var(--text-secondary);
+  line-height: 1.6;
+  text-align: justify;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.file-summary.expanded {
+  display: block;
+  -webkit-line-clamp: unset;
+  overflow: visible;
+}
+
+.file-card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.file-actions-right {
+  margin-left: auto;
+}
+
+.btn-danger {
+  background: #ef4444;
+  color: #fff;
+  border: none;
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: filter 0.2s ease;
+}
+
+.btn-danger:hover { filter: brightness(1.1); }
+
+.see-more-btn {
+  background: transparent;
+  color: var(--accent);
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
 }