charles/claude-hooks

Fork

You've already forked claude-hooks

Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

B4 — Planner board: keyboard navigation + letter shortcuts #412

New issue

Closed

opened 2026-04-27 00:02:38 +00:00 by claude-desktop · 0 comments

claude-desktop commented

2026-04-27 00:02:38 +00:00

Collaborator

Copy link

As an operator,
I want j/k to move focus between cards and single-letter keys to mutate the focused card,
so that I can triage without touching the mouse — matching the rest of the app (drawer, monitor, agents pages).

The board is mouse-only today. Linear's per-card letter-shortcut model is the reference; Trello pioneered the pattern. This story establishes the focus + keymap infra.

Acceptance criteria

Card focus

j / k move focus between cards within the focused column (down / up).
h / l move focus between columns (left / right). Focus carries over to the same vertical index when possible; otherwise to the nearest card.
Focused card shows a 2 px outline-accent ring with outline-offset-2. Distinguishable from B3's border-accent selection ring.
Focus survives SSE-driven cache patches — the focused card stays focused unless it disappears from the projection (then focus moves to the next card in the column, or up to the column header if empty).
Focus is restored on route mount from the first card of the first non-empty column.

Letter shortcuts on focused card

a opens an agent picker popover anchored to the card. Popover lists all agent types (boss, dev, reviewer, designer, design-reviewer) plus an "Unassign" item. Pick → call assignCard.
s opens a stage picker popover (same anchor). Lists the pipeline stage enum. Pick → call restageCard (B2 endpoint). If B2 has not landed yet, hide this shortcut behind a ? placeholder ("Stage change requires B2").
r opens the existing reroute confirm dialog (/board/reroute).
Enter opens the issue detail (route or drawer — match whatever pattern the rest of the app uses today).
Esc closes any open popover or dialog. Falls through to clear B3 selection if no popover open.

Keymap overlay

? shows a keymap overlay listing all board shortcuts (j/k/h/l, a/s/r, Enter, Esc, cmd-a).
Overlay is a centered Dialog.Popup with shadow-overlay, dismissable with Esc or click-outside.
List is grouped: Navigation / Card actions / Selection.

Scope + cleanup

All shortcuts are scoped to the /planner/board route — registered in a useEffect with cleanup on unmount.
Shortcuts are suppressed when focus is in a text input, textarea, or contenteditable (standard guard).
Shortcuts are suppressed when a popover or dialog is open, except Esc (which closes it).

Tests

board.test.tsx: j/k cycles focus within a column.
board.test.tsx: h/l moves focus between columns.
board.test.tsx: a opens picker → selecting dev calls assignCard with the focused card.
board.test.tsx: ? opens keymap overlay; Esc dismisses.
board.test.tsx: shortcuts suppressed when focus is in the filter input.

Out of scope

Global command palette (cmd-k). Separate spec.
Vim-style word motions (w, b, gg, G). Overkill for one operator.
Letter shortcuts on hover (Trello pattern). Focus-only is simpler and matches Linear.

References

Spec: docs/specs/board-rework.md §5 B4.
Existing keyboard patterns in the app: apps/web/src/components/... (search for addEventListener("keydown" to find the convention).
B3 (multi-select) overlaps on Esc and cmd-a — coordinate the keymap.

Suggested first commit

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

**As an** operator, **I want** `j/k` to move focus between cards and single-letter keys to mutate the focused card, **so that** I can triage without touching the mouse — matching the rest of the app (drawer, monitor, agents pages). The board is mouse-only today. Linear's per-card letter-shortcut model is the reference; Trello pioneered the pattern. This story establishes the focus + keymap infra. ## Acceptance criteria ### Card focus - [ ] `j` / `k` move focus between cards within the focused column (down / up). - [ ] `h` / `l` move focus between columns (left / right). Focus carries over to the same vertical index when possible; otherwise to the nearest card. - [ ] Focused card shows a 2 px `outline-accent` ring with `outline-offset-2`. Distinguishable from B3's `border-accent` selection ring. - [ ] Focus survives SSE-driven cache patches — the focused card stays focused unless it disappears from the projection (then focus moves to the next card in the column, or up to the column header if empty). - [ ] Focus is restored on route mount from the first card of the first non-empty column. ### Letter shortcuts on focused card - [ ] `a` opens an **agent picker** popover anchored to the card. Popover lists all agent types (boss, dev, reviewer, designer, design-reviewer) plus an "Unassign" item. Pick → call `assignCard`. - [ ] `s` opens a **stage picker** popover (same anchor). Lists the pipeline stage enum. Pick → call `restageCard` (B2 endpoint). If B2 has not landed yet, hide this shortcut behind a `?` placeholder ("Stage change requires B2"). - [ ] `r` opens the existing **reroute confirm dialog** (`/board/reroute`). - [ ] `Enter` opens the issue detail (route or drawer — match whatever pattern the rest of the app uses today). - [ ] `Esc` closes any open popover or dialog. Falls through to clear B3 selection if no popover open. ### Keymap overlay - [ ] `?` shows a keymap overlay listing all board shortcuts (`j/k/h/l`, `a/s/r`, `Enter`, `Esc`, `cmd-a`). - [ ] Overlay is a centered `Dialog.Popup` with `shadow-overlay`, dismissable with `Esc` or click-outside. - [ ] List is grouped: Navigation / Card actions / Selection. ### Scope + cleanup - [ ] All shortcuts are scoped to the `/planner/board` route — registered in a `useEffect` with cleanup on unmount. - [ ] Shortcuts are suppressed when focus is in a text input, textarea, or contenteditable (standard guard). - [ ] Shortcuts are suppressed when a popover or dialog is open, except `Esc` (which closes it). ### Tests - [ ] `board.test.tsx`: `j/k` cycles focus within a column. - [ ] `board.test.tsx`: `h/l` moves focus between columns. - [ ] `board.test.tsx`: `a` opens picker → selecting `dev` calls `assignCard` with the focused card. - [ ] `board.test.tsx`: `?` opens keymap overlay; `Esc` dismisses. - [ ] `board.test.tsx`: shortcuts suppressed when focus is in the filter input. ## Out of scope - Global command palette (`cmd-k`). Separate spec. - Vim-style word motions (`w`, `b`, `gg`, `G`). Overkill for one operator. - Letter shortcuts on hover (Trello pattern). Focus-only is simpler and matches Linear. ## References - Spec: `docs/specs/board-rework.md` §5 B4. - Existing keyboard patterns in the app: `apps/web/src/components/...` (search for `addEventListener("keydown"` to find the convention). - B3 (multi-select) overlaps on `Esc` and `cmd-a` — coordinate the keymap. ## Suggested first commit `feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay`

claude-desktop added the

area:dashboard

type:user-story

labels

2026-04-27 00:04:15 +00:00

dev was assigned by claude-desktop

2026-04-27 00:04:47 +00:00

claude-desktop added this to the v1-board-rework milestone

2026-04-27 00:04:47 +00:00

dev referenced this issue from a commit

2026-04-27 00:39:17 +00:00

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

dev referenced this issue from a pull request that will close it,

2026-04-27 00:39:27 +00:00

feat(board): keyboard navigation + letter shortcuts (B4) #421

dev referenced this issue from a commit

2026-04-27 01:20:49 +00:00

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

dev referenced this issue from a commit

2026-04-27 01:43:18 +00:00

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

dev referenced this issue from a commit

2026-04-27 02:17:44 +00:00

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

dev was unassigned by claude-desktop

2026-04-27 03:27:37 +00:00

dev was assigned by claude-desktop

2026-04-27 03:27:39 +00:00

dev referenced this issue from a commit

2026-04-27 03:34:47 +00:00

feat(board): j/k card focus + a/s/r letter shortcuts + ? keymap overlay

code-lead closed this issue

2026-04-27 03:43:42 +00:00

code-lead referenced this issue from a commit

2026-04-27 03:43:42 +00:00

feat(board): keyboard navigation + letter shortcuts (B4)

No Branch/Tag specified

main

chore/sync-pre-push-from-forge-base

fix/flows-yaml-dispatch-identity

feat/board-tap-to-assign

dev/1107

code-lead/1106

code-lead/1108

dev/1104

code-lead/1103

code-lead/1080

dev/1087

feat/flows-yaml-ci-events

chore/board-drop-stalled-and-density-controls

fix/flows-yaml-routes-always-register

flows-yaml/api-defaults

dev/1023

fix/event-log-history-bleed

fix/janitor-fix-ci-logs-and-cap

dev/1022

fix/board-card-provider

code-lead/1036

dev/1025

code-lead/1020

dev/1017

code-lead/1026

feat/web-shortcut-registry-1018

dev/1015

code-lead/1009

code-lead/1008

dev/975

dev/969

dev/973

dev/967

code-lead/968

code-lead/953

dev/970

dev/976

code-lead/966

code-lead/956

code-lead/951

dev/962

dev/963

dev/977

dev/955

dev/983

dev/961

dev/974

code-lead/950

code-lead/939

dev/941

dev/940

dev/937

dev/938

dev/936

dev/935

feat/web-i18n-fr-locale

feat/spec-editor-ui-polish

chore/drop-legacy-compat

fix/skills-drop-preview-pane

fix/882-skills-safety-rail

dev/911

dev/909

dev/923

dev/917

dev/915

feat/879-sr11-m2-drop-legacy-skill

code-lead/873

dev/881

code-lead/869

dev/867

code-lead/845

code-lead/843

code-lead/844

dev/837

dev/861

dev/849

code-lead/837

code-lead/842

fix/dedup-rebase-inflight

dev/838

code-lead/847

dev/833

code-lead/848

pr/838

code-lead/841

feat/settings-save-bar/836

code-lead/840

dev/846

code-lead/839

dev/832

fix/board-sse-stale-cache

dev/834

dev/835

feat/settings-breadcrumbs

feat/forge-oauth-credentials

refactor/service-config-consolidation

feat/agent-tokens-to-secrets

feat/gitlab-oauth-to-db

feat/authelia-rip-and-voice-fixes

fix/rebase-storm-and-dead-letter

code-lead/797

code-lead/796

dev/811

code-lead/798

dev/810

code-lead/795

dev/808

code-lead/794

dev/805

dev/802

dev/803

feat/avatar-menu-settings-entry

feat/per-agent-token-tracking

dev/793

dev/747

dev/752

code-lead/790

code-lead/759

dev/756

dev/760

dev/741

dev/767

dev/740

dev/709

dev/644

dev/637

boss/614

dev/600

dev/611

dev/585

fix/login-bonus-fixes

boss/544

dev/542

refactor/api-prefix-and-session-gate

dev/489

boss/531

boss/518

dev/499

boss/516

dev/530

dev/517

dev/519

dev/515

dev/522

dev/503

dev/471

boss/329

dev/417

dev/418

dev/402

boss/327

dev/334

dev/332

boss/326

boss/325

dev/331

boss/324

boss/323

boss/322

dev/294

test/s11-task-analytics

dev/262

boss/270

dev/268

foreman/ui-consolidation-spec

dev/234

boss/196

boss/176

boss/164

fix/124-session-persist-bind

boss/52

dev/87

boss/73

dev/77

dev/81

dev/82

boss/79

dev/42

dev/35

boss/7

No results found.

Labels

Clear labels

area:agents

Agent types, pool scheduling, per-instance config

area:dashboard

Dashboard UI and observability surfaces

area:database

DB layer — schema, migrations, ORM, raw SQL

area:design

UI/UX mockup work — routes to designer agent

area:design-review

Design review dispatch — routes to design-reviewer agent

area:flows

Flow runner — YAML loader, executor, op registry, expression eval

area:infra

Deployment, isolation, containers, systemd units

area:meta

Tracking, scaffolding, project setup

area:security

Security — routes to reviewer-security (opus)

area:sessions

Session-id store, Claude SDK resume logic

area:webhook

Forgejo webhook routing and handlers

area:workdir

Clone cache, worktrees, git identity

security

Security-sensitive issue

Tracking or decisions, not implementation work

No labels

Milestone

Clear milestone

No items

No milestone

v1-board-rework

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

dev

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

charles/claude-hooks#412

Reference in a new issue

Repository

charles/claude-hooks

Title

Body

No description provided.

Delete branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?

Rows
Columns