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
2026-03-27 13:55:22 +08:00
parent 056ae70e9a
commit 93bce1521b
4 changed files with 272 additions and 4 deletions
--- a/static/css/components.css
+++ b/static/css/components.css
@@ -559,4 +559,208 @@
  margin: 0;
 }

+/* ── Quick shortcuts ─────────────────────────────────────────────────────── */

+.shortcuts-container {
+  margin-top: var(--space-3);
+  border-top: 1px solid var(--border-subtle);
+  padding-top: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.shortcuts-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.shortcuts-label {
+  font-family: var(--font-ui);
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.shortcut-edit-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: 2px var(--space-2);
+  background: none;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-ui);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: border-color 150ms, color 150ms;
+}
+.shortcut-edit-toggle:hover {
+  border-color: var(--border-strong);
+  color: var(--text-secondary);
+}
+
+.shortcuts-rail {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  min-height: 28px;
+}
+
+/* Individual shortcut chip */
+.shortcut-chip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  max-width: 220px;
+  padding: 4px var(--space-3);
+  background: var(--bg-overlay);
+  border: 1px solid var(--border-muted);
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  transition: border-color 140ms ease, color 140ms ease,
+              background 140ms ease, transform 80ms ease;
+  user-select: none;
+}
+
+.shortcut-chip:hover {
+  border-color: var(--cyan-dim);
+  color: var(--text-primary);
+  background: var(--bg-hover);
+}
+
+.shortcut-chip:active {
+  transform: scale(0.95);
+}
+
+.shortcut-chip__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+/* Delete handle (shown in edit mode) */
+.shortcut-chip__del {
+  display: none; /* toggled via JS */
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--red-dim);
+  color: var(--red);
+  transition: background 120ms;
+}
+.shortcut-chip:hover .shortcut-chip__del {
+  background: var(--red);
+  color: #fff;
+}
+
+/* Edit handle (shown in edit mode) */
+.shortcut-chip__edit {
+  display: none; /* toggled via JS */
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  background: var(--border-muted);
+  color: var(--text-secondary);
+  transition: background 120ms;
+}
+.shortcut-chip:hover .shortcut-chip__edit {
+  background: var(--cyan-dim);
+  color: var(--cyan);
+}
+
+/* Inline chip edit row */
+.shortcut-inline-edit {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  animation: chip-fire 160ms ease;
+}
+.shortcut-inline-input {
+  width: 180px;
+  padding: 3px var(--space-2);
+  font-size: var(--text-xs);
+  height: 26px;
+}
+
+/* Firing state (just clicked) */
+.shortcut-chip--firing {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  animation: chip-fire 280ms ease;
+}
+
+/* Sent confirmation flash */
+.shortcut-chip--sent {
+  border-color: var(--green);
+  color: var(--green);
+  animation: chip-sent 600ms ease;
+}
+
+/* Add chip */
+.shortcut-chip--add {
+  border-style: dashed;
+  border-color: var(--border-subtle);
+  color: var(--text-muted);
+  gap: var(--space-1);
+  padding: 4px var(--space-2);
+}
+.shortcut-chip--add:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+}
+
+/* Chip animations */
+@keyframes chip-fire {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(0.93); }
+  100% { transform: scale(1); }
+}
+
+@keyframes chip-sent {
+  0%   { box-shadow: 0 0 0 0 var(--green-glow); }
+  50%  { box-shadow: 0 0 0 6px transparent; }
+  100% { box-shadow: none; }
+}
+
+@keyframes chip-vanish {
+  to { opacity: 0; transform: scale(0.8); width: 0; padding: 0; margin: 0; }
+}
+
+/* Add shortcut inline form */
+.shortcut-add-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--border-subtle);
+  margin-top: var(--space-1);
+  animation: fade-in-up 180ms ease;
+}
+
+.shortcut-add-actions {
+  display: flex;
+  gap: var(--space-2);
+}
--- a/static/index.html
+++ b/static/index.html
@@ -78,6 +78,8 @@
            </button>
          </div>
        </form>
+        <!-- Quick shortcut chips -->
+        <div id="shortcuts-container" class="shortcuts-container"></div>
      </div>
    </div>
  </section>
--- a/static/js/app.js
+++ b/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
--- a/static/js/shortcuts.js
+++ b/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();
 }

+
+
+