feat: atlas selection tray -- visible selection outline + Group/Delete action surface (goal 0092 follow-up) (#203)

A multi-selection was previously invisible (React Flow's own .selected
class ships unstyled) and had no action surface beyond a right-click.
Adds a 2px accent outline + soft ring to every Atlas node type keyed
off .react-flow__node.selected, and a floating selection tray
(AtlasSelectionTray) that replaces the creation tray while 2+ cards/
notes are selected -- count label, Group into new area (2+ cards),
Delete, and a bare-G / Escape keyboard door mirroring the tray's own
buttons. useAtlasSelection now also exposes selectedCards/
selectedNotes as reactive state alongside its existing ref-only menu
snapshot.

The tray/Escape-clear threshold is 2+ selected, not 1+: React Flow
marks a node .selected via its own built-in Escape/Enter/Space
keyboard accessibility handling independent of any deliberate
multi-select gesture, so a 1+ threshold fired on every ordinary
flip-click and broke the existing flip/unflip behavior -- verified via
two previously-passing e2e tests failing, fixed by aligning with the
same >=2 threshold the multi-select context menu's own gate already
uses.

The keyboard listener (useAtlasSelectionTray) registers exactly once
and reads current values through a ref rather than resubscribing per
render: the earlier per-dependency-change resubscription opened a
real window where a fast keypress landed between an unsubscribe and
the next resubscribe and was silently dropped -- reproduced live via
a flaking Escape-unflip assertion, fixed by the stable-listener/
latest-ref pattern this codebase already uses elsewhere for the same
class of problem.


Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: alicoding

frontend/e2e/atlas-select-group.spec.ts

@@ -206,6 +206,46 @@ test('atlas shift-click select: toggle membership, group via member right-click,
     await cardB.click({ modifiers: ['Shift'] })
     await expect(selected).toHaveCount(2)
 
+    // Visible selection state (goal 0092 follow-up): both member nodes
+    // carry a real, non-empty outline/ring, not just React Flow's own
+    // unstyled .selected class.
+    await expect.poll(() => cardA.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+    await expect.poll(() => cardB.evaluate((el) => getComputedStyle(el).boxShadow)).not.toBe('none')
+
+    // The selection tray replaces the creation tray while 2+ cards are
+    // selected: count label, Group (2+ cards only), Delete, both with
+    // their kbd chips.
+    const selectionTray = page.getByTestId('atlas-selection-tray')
+    await expect(selectionTray).toBeVisible()
+    await expect(page.getByTestId('atlas-creation-tray')).toHaveCount(0)
+    await expect(page.getByTestId('atlas-selection-count')).toHaveText('2 selected')
+    const trayGroup = page.getByTestId('atlas-selection-group')
+    await expect(trayGroup).toContainText('Group')
+    await expect(trayGroup).toContainText('G')
+    const trayDelete = page.getByTestId('atlas-selection-delete')
+    await expect(trayDelete).toContainText('Delete')
+    await expect(trayDelete).toContainText('⌫')
+
+    // Escape clears the selection (takes precedence over the board's
+    // own unflip duty) -- the creation tray comes back.
+    await page.keyboard.press('Escape')
+    await expect(selected).toHaveCount(0)
+    await expect(selectionTray).toHaveCount(0)
+    await expect(page.getByTestId('atlas-creation-tray')).toBeVisible()
+
+    // Re-select, then bare G opens the SAME group popover a member
+    // right-click's own menu item does -- closed here without
+    // submitting so the flow below (member right-click -> Group) is
+    // the one that actually creates the area.
+    await cardA.click({ modifiers: ['Shift'] })
+    await cardB.click({ modifiers: ['Shift'] })
+    await expect(selected).toHaveCount(2)
+    await page.keyboard.press('g')
+    await expect(popover).toBeVisible()
+    await expect(page.getByTestId('atlas-placement-context')).toContainText('2 cards')
+    await popover.getByTestId('atlas-placement-cancel').click()
+    await expect(popover).not.toBeVisible()
+
     // Member right-click reaches the multi menu -> Group into new area
     // (same full-gesture retry as above: Primer's menu overlay animates
     // in, and a too-early item click lands outside and closes it).

frontend/src/atlas/AtlasBoard.tsx

@@ -22,11 +22,13 @@ import { useAtlasCreation, type AtlasGroupRequest, type AtlasPlacementRequest, t
 import { useAtlasAreaDraw } from './useAtlasAreaDraw'
 import { useAtlasDragFiling, type FrameBox } from './useAtlasDragFiling'
 import { useAtlasSelection } from './useAtlasSelection'
+import { useAtlasSelectionTray } from './useAtlasSelectionTray'
 import { useAtlasSlotDrag } from './useAtlasSlotDrag'
 import { AtlasSlotDragLine } from './AtlasSlotDragLine'
 import { buildBoardCardNodes } from './atlasBuildBoardNodes'
 import { buildStickyNodes } from './atlasStickyNodes'
 import { AtlasCreationTray, ATLAS_TOOL_DRAG_MIME, type AtlasCreationTool } from './AtlasCreationTray'
+import { AtlasSelectionTray } from './AtlasSelectionTray'
 import { AtlasPlacementPopover } from './AtlasPlacementPopover'
 import { useAtlasNativeFileDrop } from './useAtlasNativeFileDrop'
 import { useAtlasPaste } from './useAtlasPaste'
@@ -68,7 +70,7 @@ export interface AtlasFocusRequest {
 // media-query gate AtlasNoteCardNode.module.css's own flip already
 // uses, read here in JS via usePrefersReducedMotion since React Flow's
 // own transition durations are JS options, not CSS.
-function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, parentID, arrangeRequest, viewedID, focusRequest, onDrill, onOpenOverlay, onFocusHandled, onCardContextMenu, onPaneContextMenu, onArteryContextMenu, onNoteContextMenu, onFrameContextMenu, onFrameInteriorContextMenu, onMultiSelectContextMenu, onDeleteSelection, placementRequest, promoteRequest, groupRequest, onJumpToChip }: {
+function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, parentID, arrangeRequest, viewedID, focusRequest, onDrill, onOpenOverlay, onFocusHandled, onCardContextMenu, onPaneContextMenu, onArteryContextMenu, onNoteContextMenu, onFrameContextMenu, onFrameInteriorContextMenu, onMultiSelectContextMenu, onDeleteSelection, onGroupSelection, placementRequest, promoteRequest, groupRequest, onJumpToChip }: {
   cards: Card[]
   allCards: Card[]
   kinds: Kind[]
@@ -117,6 +119,8 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
   // React Flow's own deleteKeyCode stays disabled -- a local node
   // removal would just resurrect on the next data refresh.
   onDeleteSelection: (cardIDs: string[], noteIDs: string[]) => void
+  // The selection tray's own "Group into new area" -- the multi-select context menu's own dispatcher, reused.
+  onGroupSelection: (cardIDs: string[], noteIDs: string[], pos: { x: number; y: number }) => void
   // AtlasView's own downward creation requests (the pane menu's "Add
   // card"/"Add note"/"Promote to card…" items, extended by slice A2's
   // frame-scoped placements and "Group into new area") -- see
@@ -160,14 +164,6 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [cards, notes, onDeleteSelection, selection.selectedIDsRef])
 
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setFlippedID(null)
-    }
-    window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
-  }, [])
-
   const toggleFlip = useCallback((id: string) => setFlippedID((cur) => (cur === id ? null : id)), [])
 
   // Zoom chip / group-header click / Enter on a region frame (routed
@@ -333,6 +329,8 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
     setNodes(sel.length > 0 ? allNodes.map((n) => (sel.includes(n.id) ? { ...n, selected: true } : n)) : allNodes)
   }, [allNodes, setNodes, selection.selectedIDsRef])
 
+  const { trayRef, hasSelection: haveSelection, onGroup: onTrayGroup, onDelete: onTrayDelete } = useAtlasSelectionTray({ selectedCards: selection.selectedCards, selectedNotes: selection.selectedNotes, clearSelection: selection.clearSelection, setNodes, onDeleteSelection, onGroupSelection, onUnflip: () => setFlippedID(null) })
+
   // Every re-root (drill in, breadcrumb out, jump) settles the new
   // board with an animated fitView rather than an instant snap. The
   // very first paint stays on ReactFlow's own `fitView` prop below
@@ -475,7 +473,9 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
       {marqueeStyle && <div className={styles.marquee} data-testid="atlas-area-marquee" style={marqueeStyle} />}
       {slotDrag.dragLine && <AtlasSlotDragLine line={slotDrag.dragLine} />}
       {fileDrop.dropError && <div className={`${styles.dropError} ${runbookStyles.error}`} data-testid="atlas-file-drop-error">{fileDrop.dropError}</div>}
-      {!readOnly && <AtlasCreationTray armedTool={creation.armedTool} onToggle={creation.toggleArm} />}
+      {!readOnly && (haveSelection
+        ? <AtlasSelectionTray ref={trayRef} selectedCardCount={selection.selectedCards.length} selectedNoteCount={selection.selectedNotes.length} onGroup={onTrayGroup} onDelete={onTrayDelete} />
+        : <AtlasCreationTray armedTool={creation.armedTool} onToggle={creation.toggleArm} />)}
       {creation.popover && (
         <AtlasPlacementPopover
           mode={creation.popover.mode}

frontend/src/atlas/AtlasGroupNode.module.css

@@ -14,6 +14,16 @@
     perspective: 1000px;
 }
 
+/* Multi-selection outline (owner-caught follow-up to goal 0092): same
+   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
+   Flow's own .selected on the node's outer wrapper -- never the
+   frame's own border-width, so a selected frame's size never shifts. */
+:global(.react-flow__node.selected) .frame {
+    box-shadow:
+        0 0 0 2px var(--borderColor-accent-emphasis),
+        0 0 0 5px var(--bgColor-accent-muted);
+}
+
 /* The frame's own flip (goal 0072 slice C item 4) -- same rotateY
    transition AtlasNoteCardNode.module.css's own .flipInner uses. */
 .flipInner {

frontend/src/atlas/AtlasNoteCardNode.module.css

@@ -11,6 +11,17 @@
     cursor: pointer;
 }
 
+/* Multi-selection outline (owner-caught follow-up to goal 0092): keyed
+   off React Flow's own .selected class on the node's outer wrapper --
+   box-shadow, not border-width, so it never shifts this card's fixed
+   190x128 footprint or its own hit-testing box. */
+:global(.react-flow__node.selected) .flipScene {
+    border-radius: var(--borderRadius-medium);
+    box-shadow:
+        0 0 0 2px var(--borderColor-accent-emphasis),
+        0 0 0 5px var(--bgColor-accent-muted);
+}
+
 /* Present only so React Flow can measure a real connection point for
    a link edge -- never visible, never a click/drag target of its own
    (nodesConnectable={false} on the board already disables interactive

frontend/src/atlas/AtlasRegionChipNode.module.css

@@ -11,6 +11,15 @@
     outline: 2px solid var(--focus-outlineColor);
     outline-offset: 1px;
 }
+
+/* Multi-selection outline (owner-caught follow-up to goal 0092): same
+   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
+   Flow's own .selected on the node's outer wrapper. */
+:global(.react-flow__node.selected) .chip {
+    box-shadow:
+        0 0 0 2px var(--borderColor-accent-emphasis),
+        0 0 0 5px var(--bgColor-accent-muted);
+}
 .flipInner {
     position: relative;
     width: 100%;

frontend/src/atlas/AtlasSelectionTray.module.css

@@ -0,0 +1,71 @@
+/* Same floating position/container the creation tray occupies
+   (AtlasCreationTray.module.css .tray) -- AtlasBoard renders exactly
+   one of the two, so the two never need to share a class. */
+.tray {
+    position: absolute;
+    left: 50%;
+    bottom: 24px;
+    transform: translateX(-50%);
+    z-index: 5;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 6px;
+    background: var(--bgColor-default);
+    border: 1px solid var(--borderColor-accent-emphasis);
+    border-radius: var(--borderRadius-large);
+    box-shadow: var(--shadow-floating-large, 0 4px 16px rgba(0, 0, 0, 0.12));
+}
+
+.count {
+    padding: 0 8px;
+    font-size: 13px;
+    font-weight: 650;
+    color: var(--fgColor-accent);
+    white-space: nowrap;
+}
+
+.divider {
+    width: 1px;
+    align-self: stretch;
+    background: var(--borderColor-muted);
+}
+
+.action {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    border: 1px solid transparent;
+    border-radius: var(--borderRadius-medium);
+    background: transparent;
+    color: var(--fgColor-default);
+    font-size: 13px;
+    cursor: pointer;
+}
+.action:hover {
+    background: var(--bgColor-neutral-muted);
+}
+
+.label {
+    font-weight: 500;
+}
+
+.kbd {
+    font-family: var(--mill-mono);
+    font-size: 10px;
+    color: var(--fgColor-muted);
+    border: 1px solid var(--borderColor-muted);
+    border-radius: 3px;
+    padding: 0 4px;
+}
+
+.hint {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px 0 4px;
+    font-size: 11px;
+    color: var(--fgColor-muted);
+    white-space: nowrap;
+}

frontend/src/atlas/AtlasSelectionTray.tsx

@@ -0,0 +1,54 @@
+import { forwardRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { SquareIcon, TrashIcon } from '@primer/octicons-react'
+import styles from './AtlasSelectionTray.module.css'
+
+// Same non-copy kbd-glyph shape AtlasCreationTray.tsx's own TOOL_KEY
+// uses -- a keycap label, not translatable UI copy.
+const DELETE_KBD = '⌫'
+const CLEAR_KBD = 'esc'
+
+// The floating tray a live multi-selection replaces the creation tray
+// with (owner-caught follow-up to goal 0092): same bottom-center
+// position/container the creation tray occupies -- AtlasBoard renders
+// exactly one of the two, never both. Group only ever shows for 2+
+// selected CARDS (notes don't group, same rule the multi-select
+// context menu's own item already enforces) -- a notes-only selection
+// still gets the count label, Delete, and the clear hint.
+export const AtlasSelectionTray = forwardRef<HTMLDivElement, {
+  selectedCardCount: number
+  selectedNoteCount: number
+  onGroup: (pos: { x: number; y: number }) => void
+  onDelete: () => void
+}>(function AtlasSelectionTray({ selectedCardCount, selectedNoteCount, onGroup, onDelete }, ref) {
+  const { t } = useTranslation('atlas')
+  const count = selectedCardCount + selectedNoteCount
+
+  return (
+    <div ref={ref} className={styles.tray} data-testid="atlas-selection-tray" role="toolbar" aria-label={t('board.selectionTrayAriaLabel')}>
+      <span className={styles.count} data-testid="atlas-selection-count">{t('board.selectionCount', { count })}</span>
+      <span className={styles.divider} aria-hidden="true" />
+      {selectedCardCount >= 2 && (
+        <button
+          type="button"
+          className={styles.action}
+          data-testid="atlas-selection-group"
+          onClick={(e) => onGroup({ x: e.clientX, y: e.clientY })}
+        >
+          <SquareIcon size={14} />
+          <span className={styles.label}>{t('board.selectionGroup')}</span>
+          <span className={styles.kbd}>G</span>
+        </button>
+      )}
+      <button type="button" className={styles.action} data-testid="atlas-selection-delete" onClick={onDelete}>
+        <TrashIcon size={14} />
+        <span className={styles.label}>{t('board.selectionDelete')}</span>
+        <span className={styles.kbd}>{DELETE_KBD}</span>
+      </button>
+      <span className={styles.hint}>
+        <span className={styles.kbd}>{CLEAR_KBD}</span>
+        {t('board.selectionClearHint')}
+      </span>
+    </div>
+  )
+})

frontend/src/atlas/AtlasStickyNode.module.css

@@ -17,6 +17,15 @@
     cursor: text;
 }
 
+/* Multi-selection outline (owner-caught follow-up to goal 0092): same
+   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
+   Flow's own .selected on the node's outer wrapper. */
+:global(.react-flow__node.selected) .sticky {
+    box-shadow:
+        0 0 0 2px var(--borderColor-accent-emphasis),
+        0 0 0 5px var(--bgColor-accent-muted);
+}
+
 .text {
     font-size: 12px;
     line-height: 1.35;

frontend/src/atlas/AtlasView.tsx

@@ -443,6 +443,7 @@ export function AtlasView({ initialCardID }: { initialCardID?: string }) {
           onFrameInteriorContextMenu={containmentMenus.openFrameInteriorMenu}
           onMultiSelectContextMenu={containmentMenus.openMultiSelectMenu}
           onDeleteSelection={containmentMenus.deleteSelection}
+          onGroupSelection={(cardIDs, noteIDs, pos) => creationRequests.requestGroup(cardIDs, noteIDs, pos)}
           placementRequest={creationRequests.placementRequest}
           promoteRequest={creationRequests.promoteRequest}
           groupRequest={creationRequests.groupRequest}

frontend/src/atlas/useAtlasSelection.ts

@@ -1,4 +1,4 @@
-import { useCallback, useRef } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import type { OnSelectionChangeFunc } from '@xyflow/react'
 import type { Card, Note } from '../../bindings/github.com/alicoding/mill/internal/domain/atlas/models'
 
@@ -29,9 +29,30 @@ export function useAtlasSelection({ cards, notes, onMultiSelectContextMenu }: {
 }) {
   const selectedIDsRef = useRef<string[]>([])
   const contextSelectionRef = useRef<string[]>([])
+  // Reactive split (owner-caught follow-up to goal 0092): the
+  // selection tray and every node type's outline need to re-render on
+  // a selection change, unlike the ref-only menu logic above (which
+  // deliberately avoids re-rendering -- see this file's own header
+  // comment on React error #185). A second, independent state mirror
+  // of the same ref, split into card/note ids the way openMultiMenu
+  // already splits them below.
+  const [selectedCards, setSelectedCards] = useState<string[]>([])
+  const [selectedNotes, setSelectedNotes] = useState<string[]>([])
 
   const onSelectionChange: OnSelectionChangeFunc = useCallback(({ nodes: selected }) => {
-    selectedIDsRef.current = selected.map((n) => n.id)
+    const ids = selected.map((n) => n.id)
+    selectedIDsRef.current = ids
+    setSelectedCards(ids.filter((id) => cards.some((c) => c.ID === id)))
+    setSelectedNotes(ids.filter((id) => notes.some((n) => n.ID === id)))
+  }, [cards, notes])
+
+  // The selection tray's own clear (Escape, or the tray's clear
+  // affordance): resets both halves so a stale ref can't reopen a
+  // menu against members that no longer read as selected.
+  const clearSelection = useCallback(() => {
+    selectedIDsRef.current = []
+    setSelectedCards([])
+    setSelectedNotes([])
   }, [])
 
   // Snapshot the selection BEFORE React Flow's own handlers re-select
@@ -66,5 +87,5 @@ export function useAtlasSelection({ cards, notes, onMultiSelectContextMenu }: {
     return openMultiMenu(sel, pos)
   }, [openMultiMenu])
 
-  return { selectedIDsRef, onSelectionChange, snapshotSelection, onSelectionContextMenu, tryNodeMultiMenu }
+  return { selectedIDsRef, selectedCards, selectedNotes, onSelectionChange, snapshotSelection, onSelectionContextMenu, tryNodeMultiMenu, clearSelection }
 }