feat: Add quick action buttons to floating terminal

Add virtual keyboard buttons for common actions:
- Clear: clears terminal screen
- MCP: request WebMCP token
- Claude: start claude session
- Cont/Resume: claude --continue and --resume shortcuts
This commit is contained in:
2026-02-14 11:16:49 -06:00
parent 6167dfa440
commit 3c401c4c2b

View File

@@ -568,6 +568,24 @@ function runClaude() {
}
}
function runClaudeContinue() {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'input', data: 'claude --continue\r' }))
}
}
function runClaudeResume() {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'input', data: 'claude --resume\r' }))
}
}
function sendClear() {
if (socket && socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'input', data: 'clear\r' }))
}
}
function requestToken() {
if (socket && socket.readyState === WebSocket.OPEN) {
tokenBuffer = ''
@@ -851,6 +869,11 @@ defineExpose({
<button @click="sendKey('tab')" class="vk">Tab</button>
<button @click="sendKey('ctrl-c')" class="vk ctrl">^C</button>
<button @click="sendKey('alt-m')" class="vk alt">Alt+M</button>
<button @click="sendClear" class="vk clear" title="Clear">Clear</button>
<button @click="requestToken" class="vk token" :class="{ waiting: waitingForToken }" title="Connect MCP">MCP</button>
<button @click="runClaude" class="vk claude" title="Claude">Claude</button>
<button @click="runClaudeContinue" class="vk claude-cont" title="Claude Continue">Cont</button>
<button @click="runClaudeResume" class="vk claude-resume" title="Claude Resume">Resume</button>
<button @click="refreshTerminal" class="vk refresh" title="Refrescar"></button>
<!-- Scroll controls -->
<div class="vk-scroll">
@@ -1216,6 +1239,37 @@ defineExpose({
font-size: 18px;
}
.vk.clear {
background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
border-color: rgba(107, 114, 128, 0.3);
}
.vk.token {
background: linear-gradient(180deg, #ec4899 0%, #db2777 100%);
border-color: rgba(236, 72, 153, 0.3);
}
.vk.token.waiting {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
border-color: rgba(16, 185, 129, 0.3);
animation: pulse 0.8s infinite;
}
.vk.claude {
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
border-color: rgba(139, 92, 246, 0.3);
}
.vk.claude-cont {
background: linear-gradient(180deg, #06b6d4 0%, #0891b2 100%);
border-color: rgba(6, 182, 212, 0.3);
}
.vk.claude-resume {
background: linear-gradient(180deg, #10b981 0%, #059669 100%);
border-color: rgba(16, 185, 129, 0.3);
}
.vk-scroll {
display: flex;
flex-direction: column;