Skip to content

feat: slash command palette in chat composer#21

Open
NOirBRight wants to merge 3 commits into
ygncode:mainfrom
NOirBRight:feat/slash-command-palette
Open

feat: slash command palette in chat composer#21
NOirBRight wants to merge 3 commits into
ygncode:mainfrom
NOirBRight:feat/slash-command-palette

Conversation

@NOirBRight
Copy link
Copy Markdown

What

Adds a command palette to the pi-web chat composer that shows slash command suggestions when the user types / in the chat input.

Changes

Backend (internal/server/)

  • commands.go: New /api/commands endpoint returning JSON array of {name, description} objects. Reads from ~/.pi/agent/pi-web/commands.json if available, falls back to 8 built-in defaults.
  • commands_test.go: Tests for GET handler, POST rejection, file-based loading, and fallback to defaults.
  • server.go: Register /api/commands route.

Frontend (web/src/session/chat/)

  • command-palette.js: New module — setupCommandPalette() that:
    • Loads commands from /api/commands (5-min cache, eager load)
    • Shows a suggestion list when / is typed, filters as user continues typing
    • Arrow key navigation, Enter/Tab to select, Escape to dismiss
    • Portal-based: palette appended to document.body with position: fixed and z-index: 99999 to escape parent stacking contexts
    • Dynamically positions above the chat input via getBoundingClientRect()
  • command-palette.test.js: 5 tests covering null input, fetch, filter, hide, and selection.
  • chat-composer-runner.js: Import and call setupCommandPaletteForSession() during init.

Styling (internal/ui/live_templates/styles/session.css)

  • Themed classes using var(--container-bg), var(--dim), var(--accent), var(--text), var(--muted)
  • Mobile-aware max-height via @media (max-height: 600px)

Extension (.pi/extensions/pi-web.ts)

  • On load, calls pi.getCommands() after a 3-second delay (to allow other extensions to register), then writes commands.json for the Go server to read. Refreshes every 5 minutes.

How to test

  1. Start pi-web and open a session
  2. Type / in the chat input — command suggestions should appear above the input
  3. Continue typing to filter (e.g., /com → shows /compact)
  4. Arrow keys to navigate, Enter/Tab to select, Escape to dismiss
  5. Verify palette appears above all UI elements (z-index fix)
  6. Verify palette follows theme colors on dark/light mode

Screenshots

Command palette showing filtered suggestions above the chat input, correctly layered above all UI elements.

Paul Qu and others added 3 commits May 30, 2026 22:51
- /api/commands endpoint serves command list (static defaults + dynamic
  from ~/.pi/agent/pi-web/commands.json)
- Command palette JS module: shows suggestions when typing /,
  filters as you type, arrow key navigation, Enter/Tab to select,
  Escape to dismiss
- Portal-based positioning: palette appended to document.body with
  fixed positioning to escape parent stacking contexts
- CSS themed with var(--container-bg), var(--dim), var(--accent)
- pi-web extension writes commands.json on load (with 3s delay for
  other extensions to register) and refreshes every 5 minutes
- 29 default commands including /compact, /clear, /model, /gsd-*

Co-authored-by: noirbright <noirbright@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant