feat(ui): add quick shortcuts panel with add/edit/delete support

Adds a compact shortcuts row inside the composer panel for one-click
instruction queuing, with full lifecycle management stored in localStorage.
Features
--------
- Six built-in defaults (Stop, Summarize, Explain error, Undo, Continue, etc.)
- Click any chip → instantly POSTs to /api/instructions, no typing required
  - Cyan border pulse on fire; green glow flash on success
- Edit mode (toggle button in header):
  - Per-chip edit (✏) button → replaces chip with inline input, Enter to save
  - Per-chip delete (✕) button → removes with vanish animation
  - '+ Add' chip → inline form appended below rail
- All changes persisted to localStorage key 'local-mcp-shortcuts'
- Accessible: button elements, aria-labels, keyboard support (Enter/Escape)
Files
-----
- static/js/shortcuts.js   new module (loadShortcuts, renderShortcuts,
                           startInlineEdit, showAddPrompt, initShortcuts)
- static/index.html        #shortcuts-container inside composer .panel-body
- static/js/app.js         import + initShortcuts() in bootstrap()
- static/css/components.css .shortcuts-container, .shortcut-chip variants,
                           .shortcut-inline-edit, keyframes chip-fire/sent/vanish

static/js/app.js

@@ -10,6 +10,7 @@ import { connectSSE } from './events.js';
 import { initInstructions, initComposer, refreshTimestamps } from './instructions.js';
 import { initStatus, initConfig, refreshStatusTimestamps } from './status.js';
 import { initTheme } from './theme.js';
+import { initShortcuts } from './shortcuts.js';
 
 // ── Toast notification ────────────────────────────────────────────────────
 
@@ -165,6 +166,7 @@ async function bootstrap() {
   initConfig();
   initInstructions();
   initComposer();
+  initShortcuts();
   initGlobalSubscriptions();
 
   // Hook 401 handler so mid-session token expiry shows the modal again

static/js/shortcuts.js

@@ -59,6 +59,10 @@ function renderChip(text, index) {
 
   chip.innerHTML = `
     <span class="shortcut-chip__text">${escapeHtml(text)}</span>
+    <span class="shortcut-chip__edit" aria-label="Edit shortcut" title="Edit">
+      <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5"
+           stroke-linecap="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+    </span>
     <span class="shortcut-chip__del" aria-label="Remove shortcut" title="Remove">
       <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.5"
            stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
@@ -141,7 +145,8 @@ export function renderShortcuts() {
     const chip = e.target.closest('.shortcut-chip');
     if (!chip || chip.classList.contains('shortcut-chip--add')) return;
 
-    const delBtn = e.target.closest('.shortcut-chip__del');
+    const delBtn  = e.target.closest('.shortcut-chip__del');
+    const editBtn = e.target.closest('.shortcut-chip__edit');
 
     if (delBtn) {
       // Delete mode
@@ -153,6 +158,13 @@ export function renderShortcuts() {
       return;
     }
 
+    if (editBtn) {
+      // Edit inline
+      const idx = parseInt(chip.dataset.index, 10);
+      startInlineEdit(chip, idx);
+      return;
+    }
+
     if (editMode) return; // don't send in edit mode
 
     // Send the instruction
@@ -171,9 +183,54 @@ export function renderShortcuts() {
     }
   });
 
-  // Show/hide delete buttons based on editMode
-  container.querySelectorAll('.shortcut-chip__del').forEach(del => {
-    del.style.display = editMode ? 'flex' : 'none';
+  // Show/hide edit controls based on editMode
+  container.querySelectorAll('.shortcut-chip__del, .shortcut-chip__edit').forEach(el => {
+    el.style.display = editMode ? 'flex' : 'none';
+  });
+}
+
+// ── Inline chip editing ───────────────────────────────────────────────────
+
+function startInlineEdit(chip, idx) {
+  const currentText = shortcuts[idx];
+
+  // Replace chip with a compact input row
+  const wrapper = document.createElement('div');
+  wrapper.className = 'shortcut-inline-edit';
+  wrapper.innerHTML = `
+    <input class="input input--sm shortcut-inline-input" type="text"
+           value="${escapeHtml(currentText)}" maxlength="200"
+           autocomplete="off" spellcheck="false" />
+    <button type="button" class="btn btn--primary btn--sm shortcut-inline-save" title="Save">
+      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"
+           stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
+    </button>
+    <button type="button" class="btn btn--ghost btn--sm shortcut-inline-cancel" title="Cancel">
+      <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"
+           stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+    </button>
+  `;
+
+  chip.replaceWith(wrapper);
+
+  const input = wrapper.querySelector('.shortcut-inline-input');
+  input.focus();
+  input.select();
+
+  const save = () => {
+    const newText = input.value.trim();
+    if (newText && newText !== currentText) {
+      shortcuts[idx] = newText;
+      saveShortcuts(shortcuts);
+    }
+    renderShortcuts();
+  };
+
+  wrapper.querySelector('.shortcut-inline-save').addEventListener('click', save);
+  wrapper.querySelector('.shortcut-inline-cancel').addEventListener('click', renderShortcuts);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); save(); }
+    else if (e.key === 'Escape') renderShortcuts();
   });
 }
 
@@ -239,3 +296,6 @@ export function initShortcuts() {
   renderShortcuts();
 }
 
+
+
+