From 4f09823afee859177b8c639ba70a2f9ad5b48468 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 26 Mar 2026 23:32:19 -0400
Subject: [PATCH] feat: Lucide icons on edit/del/copy and inline edit
 save/cancel buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

pencil → edit, trash-2 → del, copy → copy, check → copied feedback,
check → Save, x → Cancel. All small action buttons get inline-flex
alignment for consistent icon+label layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 cortex/static/app.js    | 23 ++++++++++++++---------
 cortex/static/style.css |  9 +++++++++
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/cortex/static/app.js b/cortex/static/app.js
index 6c208ee..ff12bdb 100644
--- a/cortex/static/app.js
+++ b/cortex/static/app.js
@@ -541,20 +541,21 @@
 
             const editBtn = document.createElement('button');
             editBtn.className = 'msg-act-btn';
-            editBtn.textContent = 'edit';
+            editBtn.innerHTML = icon_html('pencil', 12) + ' edit';
             editBtn.addEventListener('click', () => {
                 startEdit(msgDiv);
             });
 
             const delBtn = document.createElement('button');
             delBtn.className = 'msg-act-btn del';
-            delBtn.textContent = 'del';
+            delBtn.innerHTML = icon_html('trash-2', 12) + ' del';
             delBtn.addEventListener('click', () => {
                 deleteMsg(wrapper);
             });
 
             actionsDiv.appendChild(editBtn);
             actionsDiv.appendChild(delBtn);
+            render_icons();
         }
 
         // After any currentHistory splice, renumber all wrapper data-hist-idx attributes.
@@ -587,17 +588,18 @@
             ta.rows = Math.min(originalText.split('\n').length + 1, 12);
 
             const saveBtn   = document.createElement('button');
-            saveBtn.textContent = 'Save';
-            saveBtn.className   = 'edit-save-btn';
+            saveBtn.innerHTML = icon_html('check', 13) + ' Save';
+            saveBtn.className = 'edit-save-btn';
 
             const cancelBtn = document.createElement('button');
-            cancelBtn.textContent = 'Cancel';
-            cancelBtn.className   = 'edit-cancel-btn';
+            cancelBtn.innerHTML = icon_html('x', 13) + ' Cancel';
+            cancelBtn.className = 'edit-cancel-btn';
 
             const btnRow = document.createElement('div');
             btnRow.className = 'edit-btns';
             btnRow.appendChild(saveBtn);
             btnRow.appendChild(cancelBtn);
+            render_icons();
 
             msgDiv.innerHTML = '';
             msgDiv.appendChild(ta);
@@ -672,7 +674,8 @@
         function makeCopyBtn(div) {
             const btn = document.createElement('button');
             btn.className = 'copy-btn';
-            btn.textContent = 'copy';
+            btn.innerHTML = icon_html('copy', 12) + ' copy';
+            render_icons();
             btn.addEventListener('click', (e) => {
                 e.stopPropagation();
                 const text = div.dataset.raw || '';
@@ -681,11 +684,13 @@
                 } else {
                     fallbackCopy(text);
                 }
-                btn.textContent = '✓';
+                btn.innerHTML = icon_html('check', 12) + ' copied';
+                render_icons();
                 btn.classList.add('copied');
                 setTimeout(() => {
-                    btn.textContent = 'copy';
+                    btn.innerHTML = icon_html('copy', 12) + ' copy';
                     btn.classList.remove('copied');
+                    render_icons();
                 }, 1500);
             });
             return btn;
diff --git a/cortex/static/style.css b/cortex/static/style.css
index e0cb91c..f29f4ae 100644
--- a/cortex/static/style.css
+++ b/cortex/static/style.css
@@ -454,6 +454,9 @@
         .message.assistant { position: relative; }
 
         .copy-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
             position: absolute;
             top: 7px;
             right: 8px;
@@ -714,6 +717,9 @@
         .msg-wrapper:hover .msg-actions     { opacity: 1; }
 
         .msg-act-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
             background: none;
             border: 1px solid var(--border);
             border-radius: 4px;
@@ -751,6 +757,9 @@
         }
 
         .edit-save-btn, .edit-cancel-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 4px;
             background: none;
             border: 1px solid var(--border);
             border-radius: 4px;