local-mcp/static/js/shortcuts.js

/**
 * static/js/shortcuts.js
 * Quick-send shortcut chips — click to instantly queue a pre-defined
 * instruction without typing.
 *
 * Shortcuts are stored in localStorage so they survive page refreshes
 * and can be freely added / removed by the user.
 */

import { api } from './api.js';
import { toast } from './app.js';

const LS_KEY = 'local-mcp-shortcuts';

const DEFAULTS = [
  'Stop and wait for my next instruction',
  'Summarize what you just did',
  'Explain the last error',
  'Undo the last change',
  'Continue where you left off',
  'Good job! Keep going',
];

// ── Persistence ───────────────────────────────────────────────────────────

function loadShortcuts() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    if (raw) return JSON.parse(raw);
  } catch { /* ignore */ }
  return [...DEFAULTS];
}

function saveShortcuts(list) {
  localStorage.setItem(LS_KEY, JSON.stringify(list));
}

// ── State ─────────────────────────────────────────────────────────────────

let shortcuts = loadShortcuts();
let container = null;    // the .shortcuts-row div
let editMode  = false;   // whether delete handles are visible

// ── Helpers ───────────────────────────────────────────────────────────────

function escapeHtml(str) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// ── Rendering ─────────────────────────────────────────────────────────────

function renderChip(text, index) {
  const chip = document.createElement('button');
  chip.type = 'button';
  chip.className = 'shortcut-chip';
  chip.dataset.index = index;
  chip.title = text;
  chip.setAttribute('aria-label', `Quick send: ${text}`);

  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>
    </span>
  `;
  return chip;
}

function renderAddChip() {
  const chip = document.createElement('button');
  chip.type = 'button';
  chip.className = 'shortcut-chip shortcut-chip--add';
  chip.id = 'shortcut-add-btn';
  chip.title = 'Add a new shortcut';
  chip.setAttribute('aria-label', 'Add shortcut');
  chip.innerHTML = `
    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5"
         stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    <span>Add</span>
  `;
  return chip;
}

function renderEditToggle() {
  const btn = document.createElement('button');
  btn.type = 'button';
  btn.id = 'shortcut-edit-toggle';
  btn.className = 'shortcut-edit-toggle';
  btn.title = editMode ? 'Done editing' : 'Edit shortcuts';
  btn.setAttribute('aria-label', editMode ? 'Done editing shortcuts' : 'Edit shortcuts');
  btn.innerHTML = editMode
    ? `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"
          stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg> Done`
    : `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2"
          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> Edit`;
  return btn;
}

export function renderShortcuts() {
  if (!container) return;

  container.innerHTML = '';

  const header = document.createElement('div');
  header.className = 'shortcuts-header';

  const label = document.createElement('span');
  label.className = 'shortcuts-label';
  label.textContent = 'Quick';
  header.appendChild(label);

  const editToggle = renderEditToggle();
  header.appendChild(editToggle);
  editToggle.addEventListener('click', () => {
    editMode = !editMode;
    renderShortcuts();
  });

  container.appendChild(header);

  const rail = document.createElement('div');
  rail.className = 'shortcuts-rail';

  shortcuts.forEach((text, i) => {
    const chip = renderChip(text, i);
    rail.appendChild(chip);
  });

  if (editMode) {
    const addChip = renderAddChip();
    rail.appendChild(addChip);

    addChip.addEventListener('click', () => showAddPrompt());
  }

  container.appendChild(rail);

  // Attach click handlers to chips
  rail.addEventListener('click', async (e) => {
    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 editBtn = e.target.closest('.shortcut-chip__edit');

    if (delBtn) {
      // Delete mode
      const idx = parseInt(chip.dataset.index, 10);
      shortcuts.splice(idx, 1);
      saveShortcuts(shortcuts);
      chip.style.animation = 'chip-vanish 180ms ease forwards';
      chip.addEventListener('animationend', renderShortcuts, { once: true });
      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
    const text = shortcuts[parseInt(chip.dataset.index, 10)];
    chip.classList.add('shortcut-chip--firing');

    try {
      await api.createInstruction(text);
      chip.classList.remove('shortcut-chip--firing');
      chip.classList.add('shortcut-chip--sent');
      setTimeout(() => chip.classList.remove('shortcut-chip--sent'), 800);
      toast(`Queued: "${text.slice(0, 40)}${text.length > 40 ? '…' : ''}"`, 'success');
    } catch (err) {
      chip.classList.remove('shortcut-chip--firing');
      toast('Failed to queue instruction', 'error');
    }
  });

  // 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();
  });
}

// ── Add prompt ────────────────────────────────────────────────────────────

function showAddPrompt() {
  // Remove any existing inline form
  const existing = document.getElementById('shortcut-add-form');
  if (existing) { existing.remove(); return; }

  const form = document.createElement('div');
  form.id = 'shortcut-add-form';
  form.className = 'shortcut-add-form';
  form.innerHTML = `
    <input
      class="input input--sm shortcut-add-input"
      type="text"
      placeholder="New shortcut text…"
      maxlength="200"
      autocomplete="off"
      spellcheck="false"
    />
    <div class="shortcut-add-actions">
      <button type="button" class="btn btn--primary btn--sm" id="shortcut-add-confirm">Add</button>
      <button type="button" class="btn btn--ghost btn--sm" id="shortcut-add-cancel">Cancel</button>
    </div>
  `;

  container.appendChild(form);

  const input = form.querySelector('.shortcut-add-input');
  input.focus();

  form.querySelector('#shortcut-add-confirm').addEventListener('click', () => {
    const text = input.value.trim();
    if (!text) return;
    shortcuts.push(text);
    saveShortcuts(shortcuts);
    form.remove();
    renderShortcuts();
    toast('Shortcut added', 'success');
  });

  form.querySelector('#shortcut-add-cancel').addEventListener('click', () => {
    form.remove();
  });

  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      form.querySelector('#shortcut-add-confirm').click();
    } else if (e.key === 'Escape') {
      form.remove();
    }
  });
}

// ── Init ──────────────────────────────────────────────────────────────────

export function initShortcuts() {
  container = document.getElementById('shortcuts-container');
  if (!container) return;
  renderShortcuts();
}