fix(script): add Windows .venv/Scripts path fallback in server.sh
On Windows the venv Python binary lives at .venv/Scripts/python.exe, not .venv/bin/python. Fall back to the Windows path when the Unix path does not exist so the script works cross-platform.
This commit is contained in:
Brandon Zhang
241
static/js/shortcuts.js
Normal file
241
static/js/shortcuts.js
Normal file
@@ -0,0 +1,241 @@
|
||||
/**
|
||||
* 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, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||
}
|
||||
|
||||
// ── 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__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');
|
||||
|
||||
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 (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 delete buttons based on editMode
|
||||
container.querySelectorAll('.shortcut-chip__del').forEach(del => {
|
||||
del.style.display = editMode ? 'flex' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// ── 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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user