Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Console: ⌘K search or jump to

Aperta
#770 0 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@V3RON ci sta già lavorando.

Dal 21/10/2026.

  • #834 di @V3RON — aperta

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
github-actions, react, typescript

Direzione di ricerca

Start with ui/src/model/search.ts, ui/src/state/search.ts, and the existing ui/src/app/shell.tsx and sidebar; read the referenced action and navigation modules in #769 and #756 first. Run the Node model test and the browser tests in e2e/console/search.spec.ts, then the console test command. Done when the specified search, keyboard navigation, loading behavior, and action flows pass, including the required CI browser checks.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

task:ready

Part of #756.

Scope

A search box reaches every page, item and action. After this PR an operator presses ⌘K or Ctrl+K (both work on every system) or clicks "Search or jump to…" at the top of the sidebar. They type a few letters and press Enter to open a page, a worker, a device, a lease or a request, or to run any action the ⋯ menus offer.

In short

A dialog opens with a search box and a list of results in groups: Pages, Workers, Devices, Leases, Requests, Actions.

  • Typing filters the list. Both the typed text and each label are split into words at spaces, · and —, so mac-studio-2 stays one word and a pasted label still matches. A result matches when every typed word is the start of some word of its label, ignoring case. For example, drain mac matches "Drain — mac-studio-2" but not "Undrain — mac-studio-2".
  • Groups show in the order Pages, Workers, Devices, Leases, Requests, Actions. Inside a group, results where every typed word equals a whole label word come first, then the rest, each by label alphabetically. So drain mac-studio-2 puts "Drain — mac-studio-2" before "Drain — mac-studio-20".
  • The first result is highlighted. ↑ and ↓ move the highlight. Enter opens or runs the highlighted result, and Escape closes.
  • The list is built when the dialog opens. A group that was loading fills in when its data arrives (Actions only once workers, leases and requests have all loaded or failed); a group already shown never changes while the dialog is open. The highlight stays on the same result throughout, so a live update never moves it onto another. Reopening builds the list again.
  • ⌘K does nothing while a drawer or a dialog is already open.
  • An action runs exactly as from its ⋯ menu, including its confirm dialog and toast.
  • With nothing typed, the list shows the pages.
  • With no match, it says "No results for <text>".
Typed Shows
(nothing) Pages: Overview, Inbox, Fleet, Leases, Queue, Activity, Usage
fleet Pages: Fleet
mac-studio-2 Workers: mac-studio-2; Devices on it; Actions on it (e.g. Drain — mac-studio-2)
agent-1 Leases: agent-1 · iPhone 17 Pro; Actions: Release lease — agent-1 · iPhone 17 Pro
DRAIN every Drain action, and no Undrain (case ignored)
drain mac-studio-2 with mac-studio-2 and mac-studio-20 Actions: Drain — mac-studio-2 first, then Drain — mac-studio-20
zzz No results for zzz
drain on a single host No results for drain

Labels:

  • Page: its sidebar name.
  • Worker: its name, the label or else the id.
  • Device: <model> · <worker>.
  • Lease: <holder> · <model>.
  • Request: <requester> · <device asked for>.
  • Action: <action> — <item label>, for leases, requests and workers. Inbox items are not listed, since their actions are the same actions on the same worker, device, lease or request.
flowchart LR
  K[⌘K or the sidebar box] --> P[dialog: search box + groups]
  P -->|Enter on a page or item| N[navigate: page or drawer address]
  P -->|Enter on an action| A[same as the ⋯ menu: confirm, toast]

If this goes wrong, ⌘K shows an action the item's ⋯ menu does not, or runs one without its confirm.

Technical spec

Facts
# Fact Source
F1 The action list per kind and its availability come from model/actions.ts #769 Modules touched; ADR 0037 §3
F2 Page and item addresses #756 Shared values
F3 Base UI 1.9.0 ships Dialog and Autocomplete with groups, and documents a command-palette pattern built from them @base-ui/[email protected] dialog/, autocomplete/ in a scratch install; base-ui.com/react/components/autocomplete
F4 The console reads workers (/v1/workers), leases (/v1/leases, holder names from /v1/tokens, falling back to ids when tokens are refused) and waiting requests (/v1/lease-requests) ui/src/state/workers.ts, ui/src/state/leases.ts:52-56, ui/src/state/waiting.ts
F6 Base UI's Autocomplete highlights nothing unless autoHighlight is set @base-ui/[email protected] autocomplete/root/AutocompleteRoot.d.ts:90
F7 Running an action, its confirm included, is one call: useActions().run(action) opens the action's confirm when it has one, sends it, and shows the toast #769 Modules touched (state/actions.ts)
F5 No keyboard listener exists in the console today git grep -n "keydown|onKeyDown" 97bc8eaf -- ui/src: no hits
Modules touched

Searches: keydown, actionsFor, useActions, Sidebar, NavigationProvider, autoHighlight.

  • ui/src/model/search.ts (new): pure. Builds the result list from pages, workers, devices, leases, requests and the actions #769 offers, and filters it by the typed words.
  • ui/src/state/search.ts (new): gathers the data, builds the list once per opening, opens and closes, runs a result through navigate or useActions().run.
  • ui/src/ds/command-palette.tsx (new): Base UI Dialog plus Autocomplete. ds/sidebar.tsx: the "Search or jump to…" button.
  • ui/src/app/shell.tsx: the ⌘K / Ctrl+K listener and the palette.
  • e2e/console/search.spec.ts (new), views.spec.ts.
  • docs/CONSOLE.md (a ⌘K section), docs/internal/DESIGN.md, ui/AGENTS.md.
flowchart LR
  shell["app/shell (changed)"] --> ss["state/search (new)"]
  shell --> cp["ds/command-palette (new)"]
  ss --> ms["model/search (new)"]
  ms --> ma["model/actions (#769)"]
  ss --> sa["state/actions (#769)"]
Contract and event changes

None.

Other code on the same state

The palette reads what the pages read and runs actions through #769's useActions().run, which owns the confirm and the toast (F7). Searches: useActions(, actionsFor(. With one runner, a ⌘K action and a menu action cannot differ.

  • Browser shortcuts: ⌘K/Ctrl+K is taken only while the console has focus, and preventDefault stops the browser's own use of it.
Failure modes
Call Outcome What happens Limit, counted from
a result's action any outcome as from the ⋯ menu (#769 Failure modes) as #769
a result for an item gone since the list was built not found the drawer's "gone" message (#765, #766, #768) or the action's error toast —
the data not loaded yet loading Pages, and "Loading…" under each other group —
a read fails or is refused error Pages and the groups that loaded; the failed group says "Could not load ."; holders fall back to ids when /v1/tokens is refused, as Leases does —
Rules in play
  • ADR 0037 §3, "the row's ⋯ menu, … and ⌘K all read that list": the palette reads model/actions.ts.
  • ADR 0037 §1: the dialog is Base UI under ds/, with no <style> element.
  • DESIGN.md focus ring and keyboard rules: every result is reachable by keyboard, and focus returns to where it was on close.
Tests

Seam: the browser lane (new e2e/console/search.spec.ts, modelled on e2e/console/shell.spec.ts). The filter in Node in model/search.test.ts.

  • every row of the In short table gives the results it lists (model test; the single-host row with mode worker)
  • ⌘K and Ctrl+K open the dialog and focus the box; the sidebar button opens it too; Escape closes it and focus returns
  • typing fleet and Enter goes to /fleet; a worker result goes to /fleet/<id>; a device result opens /fleet/<workerId>/<deviceId>; a lease result opens /leases/<id>; a request result opens /queue/<id>
  • opened before the data loads, the groups show "Loading…", then fill in when the data arrives while the highlight stays on its result; with /v1/workers failing, the Workers group says "Could not load workers." (stubbed through page.route)
  • a live update while the dialog is open does not change the list or the highlight
  • ↑ and ↓ move the highlight, and Enter runs the highlighted result
  • drain <worker> and Enter drains it with the same toast and Undo as the menu; release <holder> asks the same confirm first; cancel <requester> asks the cancel confirm; remove <worker> (a stopped worker) asks to type the name, with Remove worker disabled until it matches
  • ⌘K does nothing while a drawer is open
  • no results shows "No results for <text>"
  • axe passes with the palette open, in light and dark; no <style> element or CSP violation (extend views.spec.ts)

Done when

  • pnpm test:console --project=chromium passes, and CI's Console check passes in every browser.

Out of scope

  • Searching event payloads or history. Fuzzy matching beyond "every word appears".

Depends on

  • #769

Written by an agent.

Lingua principale
TypeScript
Stelle
20
Fork
2
Merge medio
8h
PR unite (30g)
316

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di callstackincubator/simlock

Tutte le issue di callstackincubator/simlock

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.