[Stage 2 / P1] UX: slash command autocomplete + settings card grouping

[modacker]

[Stage 2 / P1] UX: slash command autocomplete + settings card grouping

Author: @modacker
Source review: docs/REVIEW-sihankor-baselines-2026-08-28.md
Part 4 Tier 1 #4 + Tier 3 #15.
Related: depends on the authorize helper from Stage 1 issue
for governance command markers (⚠️ + confirmation modal).

Why

Two unrelated UX gaps, bundled here because they both touch
server/lib/slash.js and the settings card surface.

Slash command autocomplete

server/lib/slash.js is 304 lines with 16 commands. Typing / in
the chat input shows no autocomplete. The user has to know that
/usage, /doctor, /skills exist. Worse, the governance-flavored
commands (/delete, /clear, /reset) can be triggered as a
side effect of an LLM reply parsing user input, which is a
SiHankor Baseline 5 risk (LLM participating in governance).

Settings card grouping

server/lib/settings.js is 485 lines, with a flat settings list in
the LAN sub-card. The card has Network / Security / Display / Account
concerns visually mixed. A search field and reset-to-default
action are missing. As more settings land (round 7 added
quotaEnabled / tokenPlanApiKey / tokenPlanApiKeySource /
tokenPlanApiKeyFilePath), the flat layout stops scaling.

What

1. Slash command autocomplete

• Frontend: listen for / keypress in chat input, show a command
  palette (name + one-line description)
• Tab to complete, Enter to send
• Mark governance actions (/delete, /clear, /reset) with
  a ⚠️ icon
• Wire governance commands to the authorize() helper from
  Stage 1 issue: user must click "Allow" in a confirmation modal
  before the slash command executes

Server-side: export command metadata (name + description +
requires_confirmation: boolean) from slash.js so the frontend
can render the palette without duplicating the command list.

2. Settings card grouping

Restructure the LAN sub-card into 4 sections:

• Network: lanBroadcast, listen address, LAN URL display
• Security: tokenEnabled, token rotation, readOnly,
  tokenAcknowledged
• Display: theme, language, quotaEnabled (Token Plan
  visibility), tokenPlanApiKeyFilePath (read-only)
• Account: Subscription Key management, plan / quota display

Add a search input at the top of the card (filter sections by
match). Add a "Reset to defaults" button per section (with a
confirmation modal, using the authorize() helper from Stage 1).

Acceptance criteria

• Typing / in the chat input opens a palette listing all 16
  slash commands with their one-line description
• Tab autocompletes the highlighted command;
  ↑/↓ navigates; Enter sends
• /delete-session, /clear, /reset commands show a ⚠️
  icon in the palette AND require an authorize() confirmation
  modal before executing
• LAN sub-card shows 4 collapsible sections (Network / Security
  / Display / Account), each with a header + chevron
• Search field at top of the card filters visible settings
  across all sections
• "Reset to defaults" button per section emits an events.ndjson
  line + 1 alert toast
• npm test passes (target 470/0/2)

Out of scope

• Authorize helper itself — see Stage 1 issue
• mcode-side permission:request hook for slash commands that
  cross the plugin boundary — see host-scope issue