From e15d360ee49e292a200a2b525c01cbac33f04d42 Mon Sep 17 00:00:00 2001 From: Kieran Klukas Date: Tue, 16 Jun 2026 12:26:31 -0400 Subject: [PATCH] feat: command bar --- pwa/src/api.ts | 24 +++++ pwa/src/chat.ts | 26 ++--- pwa/src/connect.ts | 11 +++ pwa/src/palette.ts | 232 +++++++++++++++++++++++++++++++++++++++++++++ pwa/src/state.ts | 4 + pwa/src/styles.css | 57 +++++++++++ 6 files changed, 342 insertions(+), 12 deletions(-) create mode 100644 pwa/src/palette.ts diff --git a/pwa/src/api.ts b/pwa/src/api.ts index 7b5dc86..2b31bb4 100644 --- a/pwa/src/api.ts +++ b/pwa/src/api.ts @@ -52,4 +52,28 @@ export class APIClient { grantPermission(wsID: string, grant: { permission: PermissionRequest; action: string }): Promise { return this.request('POST', `workspaces/${wsID}/permissions/grant`, grant); } + + getAgentInfo(wsID: string): Promise { + return this.request('GET', `workspaces/${wsID}/agent`); + } + + setPermissionMode(wsID: string, mode: 'normal' | 'yolo' | 'super_yolo'): Promise { + return this.request('POST', `workspaces/${wsID}/permissions/mode`, { mode }); + } +} + +export interface AgentInfo { + is_busy: boolean; + is_ready: boolean; + model: { + id: string; + name: string; + can_reason: boolean; + context_window: number; + }; + model_cfg: { + model: string; + provider: string; + reasoning_effort: string; + }; } diff --git a/pwa/src/chat.ts b/pwa/src/chat.ts index 3b2c1b2..0c96626 100644 --- a/pwa/src/chat.ts +++ b/pwa/src/chat.ts @@ -1,6 +1,7 @@ import { state, escapeHTML, renderPart, deferHighlightAll } from './state'; import { handleDisconnect } from './connect'; import type { Message } from './types'; +import { updateSidebarYolo } from './palette'; declare const lucide: { createIcons: () => void } | undefined; export function initIcons() { try { lucide?.createIcons(); } catch {} } @@ -28,7 +29,11 @@ export function renderChat(): void {
Model
- + +
+
+
Mode
+
Tokens
@@ -56,15 +61,6 @@ export function renderChat(): void { document.getElementById('new-session-btn')!.onclick = handleNewSession; document.getElementById('disconnect-btn')!.onclick = () => handleDisconnect(); - // Populate model info from first message if available - if (state.messages.length > 0) { - const m = state.messages.find(msg => msg.model); - if (m) { - const el = document.getElementById('sidebar-model'); - if (el) el.textContent = m.model; - } - } - renderMessages(); renderPermission(); renderInputBar(); @@ -190,16 +186,22 @@ export function renderInputBar(): void { const bar = document.getElementById('input-bar'); if (!bar) return; + const yoloBadge = state.permissionMode !== 'normal' + ? `
${state.permissionMode === 'yolo' ? '!' : '#'}
` + : ''; + if (state.agentBusy) { bar.innerHTML = ` - + ${yoloBadge} + `; document.getElementById('stop-btn')!.onclick = handleCancel; initIcons(); } else { bar.innerHTML = ` - + ${yoloBadge} + `; initIcons(); diff --git a/pwa/src/connect.ts b/pwa/src/connect.ts index 7b9b58b..6c318f5 100644 --- a/pwa/src/connect.ts +++ b/pwa/src/connect.ts @@ -3,6 +3,7 @@ import { APIClient } from './api'; import { SSEClient } from './sse'; import type { Message, Session, PermissionRequest } from './types'; import { renderChat, renderMessages as _renderMessages, renderPermission as _renderPermission, renderInputBar as _renderInputBar, initIcons, appendMessage, updateMessage } from './chat'; +import { initCommandPalette } from './palette'; const app = () => document.querySelector('#app')!; @@ -93,6 +94,14 @@ async function handleConnect(): Promise { state.isConnecting = false; console.log(`[perf] connect → first render: ${(performance.now() - t0).toFixed(0)}ms`); renderChat(); + initCommandPalette(); + + // Fetch agent info for model display + api.getAgentInfo(ws.id).then((info) => { + state.modelInfo = { name: info.model.name, provider: info.model_cfg.provider }; + const el = document.getElementById('sidebar-model'); + if (el) el.textContent = `${info.model.name} (${info.model_cfg.provider})`; + }).catch(() => {}); // Load messages async after first render if (state.activeSessionID) { @@ -214,6 +223,8 @@ export async function handleDisconnect(): Promise { state.activeSessionID = null; state.pendingPermission = null; state.messageCache.clear(); + state.modelInfo = null; + state.permissionMode = 'normal'; state.isConnected = false; renderConnect(); } diff --git a/pwa/src/palette.ts b/pwa/src/palette.ts new file mode 100644 index 0000000..b1879e6 --- /dev/null +++ b/pwa/src/palette.ts @@ -0,0 +1,232 @@ +import { state } from './state'; +import { handleDisconnect } from './connect'; +import { renderChat, renderInputBar } from './chat'; +import { updateSidebarYolo } from './palette'; + +interface CommandItem { + id: string; + label: string; + icon: string; + category: string; + action: () => void | Promise; +} + +const CATEGORIES = ['Actions', 'Sessions'] as const; +type Category = typeof CATEGORIES[number]; + +let paletteOpen = false; + +export function initCommandPalette(): void { + document.addEventListener('keydown', (e) => { + if ((e.metaKey || e.ctrlKey) && e.key === 'k') { + e.preventDefault(); + togglePalette(); + } + if (e.key === 'Escape' && paletteOpen) { + closePalette(); + } + }); +} + +function togglePalette(): void { + if (paletteOpen) closePalette(); + else openPalette(); +} + +function getCommands(): CommandItem[] { + const cmds: CommandItem[] = []; + + // Actions + cmds.push({ + id: 'new-session', label: 'New Session', icon: 'plus', category: 'Actions', + action: async () => { + if (!state.api || !state.workspace) return; + const session = await state.api.createSession(state.workspace.id); + state.sessions.unshift(session); + state.activeSessionID = session.id; + state.messages = []; + renderChat(); + }, + }); + + const yoloLabel = state.permissionMode === 'normal' ? 'Enable YOLO Mode' + : state.permissionMode === 'yolo' ? 'Enable Super YOLO' + : 'Disable YOLO'; + const nextMode = state.permissionMode === 'normal' ? 'yolo' + : state.permissionMode === 'yolo' ? 'super_yolo' + : 'normal'; + cmds.push({ + id: 'yolo-toggle', label: yoloLabel, + icon: state.permissionMode !== 'normal' ? 'zap' : 'shield', + category: 'Actions', + action: async () => { + if (!state.api || !state.workspace) return; + await state.api.setPermissionMode(state.workspace.id, nextMode); + state.permissionMode = nextMode; + updateSidebarYolo(); + renderInputBar(); + }, + }); + + cmds.push({ + id: 'disconnect', label: 'Disconnect', icon: 'log-out', category: 'Actions', + action: () => handleDisconnect(), + }); + + // Sessions + for (const s of state.sessions) { + cmds.push({ + id: `session-${s.id}`, + label: s.title || 'Untitled', + icon: 'message-square', + category: 'Sessions', + action: async () => { + state.activeSessionID = s.id; + state.messages = []; + renderChat(); + if (state.api && state.workspace) { + try { + state.messages = await state.api.getSessionMessages(state.workspace.id, s.id); + state.messageCache.set(s.id, state.messages); + renderChat(); + } catch {} + } + }, + }); + } + + return cmds; +} + +function openPalette(): void { + paletteOpen = true; + const allCommands = getCommands(); + let activeCategory: Category = 'Actions'; + + const overlay = document.createElement('div'); + overlay.className = 'palette-overlay'; + overlay.onclick = (e) => { if (e.target === overlay) closePalette(); }; + + overlay.innerHTML = ` +
+
+
+ + +
+
+
+ `; + + document.body.appendChild(overlay); + try { (window as any).lucide?.createIcons(); } catch {} + + const input = overlay.querySelector('input')!; + requestAnimationFrame(() => input.focus()); + const list = overlay.querySelector('.palette-list')!; + const tabs = overlay.querySelector('.palette-tabs')!; + + let filtered: CommandItem[] = []; + let selectedIdx = 0; + + function renderTabs() { + tabs.innerHTML = CATEGORIES.map((cat) => ` + + `).join(''); + + tabs.querySelectorAll('.palette-tab').forEach((btn) => { + (btn as HTMLElement).onclick = () => { + activeCategory = (btn as HTMLElement).dataset.cat as Category; + input.value = ''; + filterAndRender(); + renderTabs(); + input.focus(); + }; + }); + } + + function filterAndRender() { + const q = input.value.toLowerCase(); + const catCmds = allCommands.filter(c => c.category === activeCategory); + filtered = q ? catCmds.filter(c => c.label.toLowerCase().includes(q)) : catCmds; + selectedIdx = 0; + renderList(); + } + + function renderList() { + if (filtered.length === 0) { + list.innerHTML = '
No commands
'; + return; + } + list.innerHTML = filtered.map((cmd, i) => ` +
+ + ${escapeForPalette(cmd.label)} +
+ `).join(''); + try { (window as any).lucide?.createIcons(); } catch {} + + // Scroll selected into view + const sel = list.querySelector('.palette-item.selected'); + sel?.scrollIntoView({ block: 'nearest' }); + + list.querySelectorAll('.palette-item').forEach((el) => { + (el as HTMLElement).onclick = () => { + const idx = parseInt((el as HTMLElement).dataset.idx!); + executeCommand(filtered[idx]); + }; + }); + } + + renderTabs(); + filterAndRender(); + + input.oninput = () => filterAndRender(); + + input.onkeydown = (e) => { + if (e.key === 'ArrowDown') { + e.preventDefault(); + selectedIdx = Math.min(selectedIdx + 1, filtered.length - 1); + renderList(); + } else if (e.key === 'ArrowUp') { + e.preventDefault(); + selectedIdx = Math.max(selectedIdx - 1, 0); + renderList(); + } else if (e.key === 'Enter') { + e.preventDefault(); + if (filtered[selectedIdx]) executeCommand(filtered[selectedIdx]); + } else if (e.key === 'Tab') { + e.preventDefault(); + const dir = e.shiftKey ? -1 : 1; + const catIdx = CATEGORIES.indexOf(activeCategory); + const nextIdx = (catIdx + dir + CATEGORIES.length) % CATEGORIES.length; + activeCategory = CATEGORIES[nextIdx]; + input.value = ''; + filterAndRender(); + renderTabs(); + } + }; +} + +function executeCommand(cmd: CommandItem): void { + closePalette(); + cmd.action(); +} + +function closePalette(): void { + paletteOpen = false; + document.querySelector('.palette-overlay')?.remove(); +} + +function escapeForPalette(str: string): string { + return str.replace(/&/g, '&').replace(//g, '>'); +} + +export function updateSidebarYolo(): void { + const el = document.getElementById('sidebar-yolo'); + if (el) { + const mode = state.permissionMode; + el.textContent = mode === 'normal' ? 'Normal' : mode === 'yolo' ? 'YOLO' : 'Super YOLO'; + el.className = `sidebar-value ${mode !== 'normal' ? `yolo-active ${mode}` : ''}`; + } +} diff --git a/pwa/src/state.ts b/pwa/src/state.ts index 38a4c98..e0b32f2 100644 --- a/pwa/src/state.ts +++ b/pwa/src/state.ts @@ -17,6 +17,8 @@ export interface AppState { pendingPermission: PermissionRequest | null; agentBusy: boolean; messageCache: Map; + permissionMode: 'normal' | 'yolo' | 'super_yolo'; + modelInfo: { name: string; provider: string } | null; } export const state: AppState = { @@ -34,6 +36,8 @@ export const state: AppState = { pendingPermission: null, agentBusy: false, messageCache: new Map(), + permissionMode: 'normal', + modelInfo: null, }; import { createHighlighter, type Highlighter } from 'shiki'; diff --git a/pwa/src/styles.css b/pwa/src/styles.css index 37f4345..27d4277 100644 --- a/pwa/src/styles.css +++ b/pwa/src/styles.css @@ -12,6 +12,9 @@ --green: #12C78F; --red: #EB4268; --orange: #FF985A; + --busy: #E8FF27; + --destructive: #FF577D; + --on-primary: #FFFAF1; --mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace; } @@ -254,3 +257,57 @@ html, body { ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::selection { background: var(--accent); color: #fff; } + +/* Command Palette */ +.palette-overlay { + position: fixed; inset: 0; z-index: 200; + background: rgba(0, 0, 0, 0.5); display: flex; + align-items: flex-start; justify-content: center; padding-top: 15vh; +} +.palette { + width: 480px; max-width: 90vw; background: var(--surface); + border: 1px solid var(--border); border-radius: 6px; + overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.4); +} +.palette-tabs { + display: flex; border-bottom: 1px solid var(--border); padding: 0.25rem 0.25rem 0; +} +.palette-tab { + padding: 0.3rem 0.75rem; font-family: var(--mono); font-size: 0.72rem; + background: none; border: none; color: var(--fg-most); cursor: pointer; + border-bottom: 2px solid transparent; margin-bottom: -1px; +} +.palette-tab:hover { color: var(--fg-dim); } +.palette-tab.active { color: var(--fg); border-bottom-color: var(--accent); } +.palette-input-wrap { + display: flex; align-items: center; gap: 0.5rem; + padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); +} +.palette-input-wrap [data-lucide] { width: 16px; height: 16px; color: var(--fg-most); flex-shrink: 0; } +.palette-input-wrap input { + flex: 1; background: none; border: none; color: var(--fg); + font-family: var(--mono); font-size: 0.85rem; outline: none; +} +.palette-input-wrap input::placeholder { color: var(--fg-most); } +.palette-list { max-height: 300px; overflow-y: auto; padding: 0.25rem; } +.palette-item { + display: flex; align-items: center; gap: 0.5rem; + padding: 0.4rem 0.5rem; border-radius: 3px; cursor: pointer; + font-size: 0.82rem; color: var(--fg-dim); +} +.palette-item [data-lucide] { width: 14px; height: 14px; flex-shrink: 0; } +.palette-item:hover, .palette-item.selected { background: var(--bg-least); color: var(--fg); } +.palette-item.selected { border-left: 2px solid var(--accent); } +.palette-empty { padding: 1rem; text-align: center; color: var(--fg-most); font-size: 0.8rem; } + +/* YOLO indicator */ +.yolo-active { font-weight: 600; } +.yolo-active.yolo { color: var(--busy); } +.yolo-active.super_yolo { color: var(--destructive); } +.yolo-badge { + width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; + font-family: var(--mono); font-weight: 700; font-size: 0.85rem; + border-radius: 4px; flex-shrink: 0; line-height: 1; +} +.yolo-badge.yolo { background: var(--busy); color: var(--bg); } +.yolo-badge.super_yolo { background: var(--destructive); color: var(--on-primary); } -- 2.51.2