feat: add command palette for quick request navigation

PortableSheep · Copilot · PortableSheep · commit 7ca0f007b659 · 2026-02-25T21:19:22.000-06:00
Cmd/Ctrl+P opens a fuzzy search overlay to jump to any request
by name, method, URL, or group. Features:
- Fuzzy matching with scoring (consecutive and word-start bonuses)
- Arrow key navigation with mouse hover selection
- Enter to scroll editor to selected request
- Escape to dismiss
- Color-coded HTTP method badges

Includes pure logic layer with 12 unit tests for item building,
fuzzy matching, and search functionality.

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -221,6 +221,12 @@
         (onClose)="showOutlinePanel = false"
         (onRequestSelect)="scrollEditorToRequest($event)">
    </app-outline-panel>
+   <app-command-palette
+        [isOpen]="showCommandPalette"
+        [requests]="currentFile.requests"
+        (onClose)="showCommandPalette = false"
+        (onRequestSelect)="scrollEditorToRequest($event)">
+   </app-command-palette>
    <app-history-detail-modal
         [isOpen]="showHistoryModal"
         [item]="selectedHistoryItem"
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -17,6 +17,7 @@ import {
   ScriptSnippetModalComponent
 } from './components';
 import { OutlinePanelComponent } from './components/outline-panel/outline-panel.component';
+import { CommandPaletteComponent } from './components/command-palette/command-palette.component';
 import { ToastContainerComponent } from './components/toast-container/toast-container.component';
 import { FileTab, ResponseData, HistoryItem, Request, ScriptLogEntry, ActiveRunProgress, ChainEntryPreview } from './models/http.models';
 import { HttpService } from './services/http.service';
@@ -107,7 +108,8 @@ type AlertType = 'info' | 'success' | 'warning' | 'danger';
     ToastContainerComponent,
     UpdateNotificationComponent,
     ScriptSnippetModalComponent,
-    OutlinePanelComponent
+    OutlinePanelComponent,
+    CommandPaletteComponent
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
@@ -244,6 +246,7 @@ export class AppComponent implements OnInit, OnDestroy {
   showHistoryModal = false;
   selectedHistoryItem: HistoryItem | null = null;
   showOutlinePanel = false;
+  showCommandPalette = false;
   showLoadTestResults = false;
   loadTestMetrics: any = null;
   showDonationModal = false;
@@ -719,6 +722,9 @@ export class AppComponent implements OnInit, OnDestroy {
       case 'closeOutline':
         this.showOutlinePanel = false;
         return;
+      case 'toggleCommandPalette':
+        this.showCommandPalette = !this.showCommandPalette;
+        return;
       case 'cancelRequest':
         void this.cancelActiveRequest();
         return;
diff --git a/frontend/src/app/components/command-palette/command-palette.component.html b/frontend/src/app/components/command-palette/command-palette.component.html
@@ -0,0 +1,34 @@
+@if (isOpen()) {
+  <div class="rr-palette-overlay" (click)="onClose.emit()">
+    <div class="rr-palette-dialog" (click)="$event.stopPropagation()" (keydown)="onKeydown($event)">
+      <input
+        #searchInput
+        class="rr-palette-input"
+        type="text"
+        placeholder="Type to search requests..."
+        [ngModel]="query()"
+        (ngModelChange)="onQueryChange($event)"
+        autocomplete="off"
+        spellcheck="false"
+      />
+      <div class="rr-palette-results">
+        @for (match of results(); track match.item.requestIndex; let i = $index) {
+          <div
+            class="rr-palette-item"
+            [class.rr-palette-item--selected]="i === selectedIndex()"
+            (click)="selectItem(match)"
+            (mouseenter)="selectedIndex.set(i)"
+          >
+            <span [class]="getMethodClass(match.item.method)">{{ match.item.method }}</span>
+            <span class="rr-palette-label">{{ match.item.label || match.item.url }}</span>
+            @if (match.item.group) {
+              <span class="rr-palette-group">{{ match.item.group }}</span>
+            }
+          </div>
+        } @empty {
+          <div class="rr-palette-empty">No matching requests</div>
+        }
+      </div>
+    </div>
+  </div>
+}
diff --git a/frontend/src/app/components/command-palette/command-palette.component.scss b/frontend/src/app/components/command-palette/command-palette.component.scss
@@ -0,0 +1,97 @@
+.rr-palette-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  padding-top: 15vh;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.rr-palette-dialog {
+  width: 560px;
+  max-height: 420px;
+  display: flex;
+  flex-direction: column;
+  background: var(--rr-surface, #1e1e1e);
+  border: 1px solid var(--rr-border, #333);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+  align-self: flex-start;
+}
+
+.rr-palette-input {
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: 1px solid var(--rr-border, #333);
+  background: transparent;
+  color: var(--rr-text, #ccc);
+  font-size: 14px;
+  font-family: inherit;
+  outline: none;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--rr-text-muted, #666);
+  }
+}
+
+.rr-palette-results {
+  overflow-y: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+.rr-palette-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
+  color: var(--rr-text, #ccc);
+  font-size: 13px;
+
+  &--selected {
+    background: var(--rr-highlight, #2a2a2a);
+  }
+}
+
+.rr-palette-method {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 3px;
+  min-width: 52px;
+  text-align: center;
+  flex-shrink: 0;
+
+  &--get { color: #61affe; background: rgba(97, 175, 254, 0.1); }
+  &--post { color: #49cc90; background: rgba(73, 204, 144, 0.1); }
+  &--put { color: #fca130; background: rgba(252, 161, 48, 0.1); }
+  &--patch { color: #50e3c2; background: rgba(80, 227, 194, 0.1); }
+  &--delete { color: #f93e3e; background: rgba(249, 62, 62, 0.1); }
+  &--head { color: #9012fe; background: rgba(144, 18, 254, 0.1); }
+  &--options { color: #0d5aa7; background: rgba(13, 90, 167, 0.1); }
+}
+
+.rr-palette-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rr-palette-group {
+  color: var(--rr-text-muted, #666);
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.rr-palette-empty {
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--rr-text-muted, #666);
+  font-size: 13px;
+}
diff --git a/frontend/src/app/components/command-palette/command-palette.component.ts b/frontend/src/app/components/command-palette/command-palette.component.ts
@@ -0,0 +1,74 @@
+import { Component, input, output, signal, computed, ElementRef, viewChild, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { buildPaletteItems, searchPaletteItems, FuzzyMatch } from './command-palette.logic';
+
+@Component({
+  selector: 'app-command-palette',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  templateUrl: './command-palette.component.html',
+  styleUrls: ['./command-palette.component.scss']
+})
+export class CommandPaletteComponent {
+  isOpen = input.required<boolean>();
+  requests = input.required<{ method: string; url: string; name?: string; group?: string }[]>();
+
+  onClose = output<void>();
+  onRequestSelect = output<number>();
+
+  query = signal('');
+  selectedIndex = signal(0);
+  searchInput = viewChild<ElementRef>('searchInput');
+
+  private items = computed(() => buildPaletteItems(this.requests()));
+  results = computed(() => searchPaletteItems(this.items(), this.query()));
+
+  constructor() {
+    effect(() => {
+      if (this.isOpen()) {
+        this.query.set('');
+        this.selectedIndex.set(0);
+        setTimeout(() => this.searchInput()?.nativeElement.focus(), 0);
+      }
+    });
+  }
+
+  onQueryChange(value: string) {
+    this.query.set(value);
+    this.selectedIndex.set(0);
+  }
+
+  onKeydown(event: KeyboardEvent) {
+    const results = this.results();
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.selectedIndex.set(Math.min(this.selectedIndex() + 1, results.length - 1));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.selectedIndex.set(Math.max(this.selectedIndex() - 1, 0));
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (results.length > 0) {
+          this.selectItem(results[this.selectedIndex()]);
+        }
+        break;
+      case 'Escape':
+        event.preventDefault();
+        this.onClose.emit();
+        break;
+    }
+  }
+
+  selectItem(match: FuzzyMatch) {
+    this.onRequestSelect.emit(match.item.requestIndex);
+    this.onClose.emit();
+  }
+
+  getMethodClass(method: string): string {
+    return `rr-palette-method rr-palette-method--${method.toLowerCase()}`;
+  }
+}
diff --git a/frontend/src/app/components/command-palette/command-palette.logic.spec.ts b/frontend/src/app/components/command-palette/command-palette.logic.spec.ts
@@ -0,0 +1,90 @@
+import { buildPaletteItems, fuzzyMatch, searchPaletteItems } from './command-palette.logic';
+
+describe('command-palette.logic', () => {
+  describe('buildPaletteItems', () => {
+    it('builds items from requests', () => {
+      const items = buildPaletteItems([
+        { method: 'GET', url: 'https://api.com/users', name: 'GetUsers', group: 'Users' },
+        { method: 'POST', url: 'https://api.com/login' }
+      ]);
+      expect(items).toHaveLength(2);
+      expect(items[0]).toEqual({
+        requestIndex: 0, method: 'GET', label: 'GetUsers', group: 'Users', url: 'https://api.com/users'
+      });
+      expect(items[1].label).toBe('');
+      expect(items[1].group).toBeNull();
+    });
+
+    it('defaults method to GET', () => {
+      const items = buildPaletteItems([{ method: '', url: '/test' }]);
+      expect(items[0].method).toBe('GET');
+    });
+  });
+
+  describe('fuzzyMatch', () => {
+    it('returns all chars highlighted for exact match', () => {
+      const result = fuzzyMatch('hello', 'hello');
+      expect(result).not.toBeNull();
+      expect(result!.highlights).toEqual([0, 1, 2, 3, 4]);
+    });
+
+    it('returns null for no match', () => {
+      expect(fuzzyMatch('abc', 'xyz')).toBeNull();
+    });
+
+    it('matches non-contiguous characters', () => {
+      const result = fuzzyMatch('GetUsers', 'gtu');
+      expect(result).not.toBeNull();
+      expect(result!.highlights.length).toBe(3);
+    });
+
+    it('returns highlights for empty query', () => {
+      const result = fuzzyMatch('anything', '');
+      expect(result).not.toBeNull();
+      expect(result!.highlights).toEqual([]);
+    });
+
+    it('gives bonus for word-start matches', () => {
+      const wordStart = fuzzyMatch('get-users', 'gu');
+      const midWord = fuzzyMatch('xgxuxsers', 'gu');
+      expect(wordStart!.score).toBeGreaterThan(midWord!.score);
+    });
+  });
+
+  describe('searchPaletteItems', () => {
+    const items = buildPaletteItems([
+      { method: 'GET', url: 'https://api.com/users', name: 'GetUsers', group: 'Users' },
+      { method: 'POST', url: 'https://api.com/login', name: 'Login', group: 'Auth' },
+      { method: 'DELETE', url: 'https://api.com/users/1', name: 'DeleteUser' }
+    ]);
+
+    it('returns all items for empty query', () => {
+      expect(searchPaletteItems(items, '')).toHaveLength(3);
+    });
+
+    it('filters by method', () => {
+      const results = searchPaletteItems(items, 'DELETE');
+      expect(results[0].item.label).toBe('DeleteUser');
+    });
+
+    it('filters by name', () => {
+      const results = searchPaletteItems(items, 'login');
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].item.label).toBe('Login');
+    });
+
+    it('filters by group', () => {
+      const results = searchPaletteItems(items, 'Auth');
+      expect(results[0].item.group).toBe('Auth');
+    });
+
+    it('sorts by relevance score', () => {
+      const results = searchPaletteItems(items, 'user');
+      expect(results.length).toBeGreaterThanOrEqual(2);
+      // Results should be sorted by score descending
+      for (let i = 1; i < results.length; i++) {
+        expect(results[i - 1].score).toBeGreaterThanOrEqual(results[i].score);
+      }
+    });
+  });
+});
diff --git a/frontend/src/app/components/command-palette/command-palette.logic.ts b/frontend/src/app/components/command-palette/command-palette.logic.ts
diff --git a/frontend/src/app/components/index.ts b/frontend/src/app/components/index.ts
diff --git a/frontend/src/app/logic/app/app.component.logic.ts b/frontend/src/app/logic/app/app.component.logic.ts
