feat(admin): ⌘K command palette (v26.05.08)

CHANGELOG.md

@@ -6,6 +6,21 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ---
 
+## v26.05.08 (2026-05-31)
+
+### Admin dashboard — ⌘K command palette
+
+- A keyboard-first **command palette**: press <kbd>⌘K</kbd> / <kbd>Ctrl-K</kbd>
+  (or the new navbar **Search** button) to fuzzy-filter every view plus quick
+  actions (toggle theme, wallboard mode) and jump on <kbd>Enter</kbd>.
+- Full keyboard navigation (↑/↓ with clamping, Enter to run, Esc to close),
+  click-to-run, and a blurred modal backdrop. Brand-green active state, Maven Pro.
+- Reuses the sidebar's navigation definition (now exported) so the palette
+  always stays in sync with the nav. The navbar Search trigger collapses to an
+  icon on mobile.
+
+---
+
 ## v26.05.07 (2026-05-31)
 
 ### Admin dashboard — brand refresh & UI foundation

pyproject.toml

@@ -7,7 +7,7 @@ name = "pyfly"
 # CalVer YY.MM.PATCH — package metadata uses PEP 440 normalized form (26.5.4);
 # git tag, GitHub release and human-readable display use leading-zero form
 # (v26.05.04) to match the Java/.NET/Go siblings.
-version = "26.5.7"
+version = "26.5.8"
 description = "The official Python implementation of the Firefly Framework — DI, CQRS, EDA, hexagonal architecture, and more."
 readme = "README.md"
 license = "Apache-2.0"

src/pyfly/__init__.py

@@ -13,4 +13,4 @@
 # limitations under the License.
 """PyFly — Enterprise Python Framework."""
 
-__version__ = "26.05.07"
+__version__ = "26.05.08"

src/pyfly/admin/static/css/admin.css

@@ -1709,3 +1709,173 @@ body.wallboard-mode .admin-content {
     opacity: 0.6;
     pointer-events: none;
 }
+
+/* ── Command Palette (⌘K) ───────────────────────────────────────── */
+.cmd-palette-trigger {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 34px;
+    padding: 0 10px;
+    background: var(--admin-bg-subtle);
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius);
+    color: var(--admin-text-muted);
+    font-family: var(--admin-font-sans);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: border-color var(--admin-transition), color var(--admin-transition);
+}
+
+.cmd-palette-trigger:hover {
+    border-color: var(--admin-primary-dim);
+    color: var(--admin-text-secondary);
+}
+
+.cmd-palette-trigger svg {
+    width: 15px;
+    height: 15px;
+}
+
+.cmd-palette-trigger kbd {
+    font-family: var(--admin-font-mono);
+    font-size: 0.68rem;
+    padding: 1px 6px;
+    border: 1px solid var(--admin-border);
+    border-radius: 4px;
+    background: var(--admin-surface);
+    color: var(--admin-text-muted);
+}
+
+.cmd-palette-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 500;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 12vh;
+    background: rgba(4, 8, 5, 0.55);
+    backdrop-filter: blur(3px);
+    opacity: 0;
+    transition: opacity 120ms ease;
+}
+
+.cmd-palette-overlay.open {
+    opacity: 1;
+}
+
+.cmd-palette {
+    width: min(92vw, 600px);
+    max-height: 60vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--admin-card-bg);
+    border: 1px solid var(--admin-border);
+    border-radius: var(--admin-radius-lg);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
+    overflow: hidden;
+    transform: translateY(-8px) scale(0.98);
+    transition: transform 140ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cmd-palette-overlay.open .cmd-palette {
+    transform: translateY(0) scale(1);
+}
+
+.cmd-palette-input-wrap {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 14px 16px;
+    border-bottom: 1px solid var(--admin-border);
+}
+
+.cmd-palette-input-wrap svg {
+    width: 18px;
+    height: 18px;
+    color: var(--admin-text-muted);
+    flex-shrink: 0;
+}
+
+.cmd-palette-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--admin-text);
+    font-family: var(--admin-font-sans);
+    font-size: 1rem;
+}
+
+.cmd-palette-input::placeholder {
+    color: var(--admin-text-muted);
+}
+
+.cmd-palette-esc {
+    font-family: var(--admin-font-mono);
+    font-size: 0.62rem;
+    padding: 2px 6px;
+    border: 1px solid var(--admin-border);
+    border-radius: 4px;
+    color: var(--admin-text-muted);
+}
+
+.cmd-palette-list {
+    overflow-y: auto;
+    padding: 6px;
+}
+
+.cmd-palette-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 10px 12px;
+    border-radius: var(--admin-radius);
+    cursor: pointer;
+    color: var(--admin-text-secondary);
+}
+
+.cmd-palette-item.active {
+    background: var(--admin-primary-dim);
+    color: var(--admin-text);
+}
+
+.cmd-palette-item-icon {
+    width: 17px;
+    height: 17px;
+    color: var(--admin-text-muted);
+    flex-shrink: 0;
+}
+
+.cmd-palette-item.active .cmd-palette-item-icon {
+    color: var(--admin-primary);
+}
+
+.cmd-palette-item-label {
+    flex: 1;
+    font-family: var(--admin-font-sans);
+    font-size: 0.9rem;
+}
+
+.cmd-palette-item-hint {
+    font-family: var(--admin-font-mono);
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--admin-text-muted);
+}
+
+.cmd-palette-empty {
+    padding: 28px;
+    text-align: center;
+    color: var(--admin-text-muted);
+    font-size: 0.9rem;
+}
+
+@media (max-width: 768px) {
+    .cmd-palette-trigger-label,
+    .cmd-palette-trigger kbd {
+        display: none;
+    }
+}

src/pyfly/admin/static/js/app.js

@@ -8,7 +8,8 @@
 
 import { api } from './api.js';
 import { sse } from './sse.js';
-import { renderSidebar, updateSidebarActive } from './components/sidebar.js';
+import { installCommandPalette } from './components/command-palette.js';
+import { createSvgIcon, renderSidebar, updateSidebarActive } from './components/sidebar.js';
 import { showToast } from './components/toast.js';
 
 /* ── Route Registry ───────────────────────────────────────────── */
@@ -45,6 +46,7 @@ let settings = {
 
 let currentRoute = '';
 let currentCleanup = null;  // Cleanup function from current view
+let commandPalette = null;  // ⌘K launcher (installed in init)
 
 /* ── DOM References ───────────────────────────────────────────── */
 
@@ -118,6 +120,23 @@ function renderNavbar() {
     refreshLabel.textContent = `refresh: ${settings.refreshInterval / 1000}s`;
     right.appendChild(refreshLabel);
 
+    // Command palette trigger (⌘K)
+    const searchBtn = document.createElement('button');
+    searchBtn.className = 'cmd-palette-trigger';
+    searchBtn.setAttribute('aria-label', 'Open command palette');
+    searchBtn.title = 'Search & commands (⌘K / Ctrl-K)';
+    const searchIcon = createSvgIcon('M21 21l-4.35-4.35 M11 19a8 8 0 100-16 8 8 0 000 16z');
+    searchBtn.appendChild(searchIcon);
+    const searchText = document.createElement('span');
+    searchText.className = 'cmd-palette-trigger-label';
+    searchText.textContent = 'Search';
+    searchBtn.appendChild(searchText);
+    const searchKbd = document.createElement('kbd');
+    searchKbd.textContent = '⌘K';
+    searchBtn.appendChild(searchKbd);
+    searchBtn.addEventListener('click', () => commandPalette && commandPalette.open());
+    right.appendChild(searchBtn);
+
     // Theme toggle button
     const themeBtn = document.createElement('button');
     themeBtn.className = 'theme-toggle';
@@ -308,6 +327,13 @@ async function init() {
     // Render navbar
     renderNavbar();
 
+    // Install the ⌘K command palette
+    commandPalette = installCommandPalette({
+        onNavigate: (route) => navigateTo(route),
+        serverMode: settings.serverMode,
+        onToggleTheme: toggleTheme,
+    });
+
     // Listen for hash changes
     window.addEventListener('hashchange', () => {
         const route = getRouteFromHash();