fix: group-into-new-area anchors the new frame at its members, not the trigger click

The reported "jumps to the bottom of the board" bug was NOT the
hypothesized nil-Position packer path -- select-then-group always
persists a real Position. The actual bug: the new container's Position
came from the triggering UI element's screen point (a member's
right-click, or worst case the selection tray's own bottom-center
Group button / bare-G, both anchored at the floating tray's rect) via
screenToFlowPosition, never the grouped members' own rendered spot.

useAtlasCreation's groupRequest effect now anchors the new container
at computeEnclosedBoundingBoxOrigin's bounding-box top-left over the
enclosed members' current freeMoves-aware boxes (AtlasBoard.tsx's
topLevelBoxes/noteBoxes, hoisted above useAtlasCreation so they're
available when the request is handled), falling back to the click
point only if no member box resolves.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd

Author: alicoding

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

@@ -258,17 +258,71 @@ test('atlas shift-click select: toggle membership, group via member right-click,
     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.
+    // right-click's own menu item does -- anchored at the selection
+    // tray's own on-screen rect (bottom-center; the same anchor the
+    // tray's Group button uses), nowhere near where the members
+    // actually render. Completed here (not just opened) so the new
+    // area's Position can be checked against this anchor specifically.
     await cardA.click({ modifiers: ['Shift'] })
     await cardB.click({ modifiers: ['Shift'] })
     await expect(selected).toHaveCount(2)
+    const boxAPreBareG = await cardA.boundingBox()
+    const boxBPreBareG = await cardB.boundingBox()
+    if (!boxAPreBareG || !boxBPreBareG) throw new Error('missing bounding box before group')
+    const preBareGTop = Math.min(boxAPreBareG.y, boxBPreBareG.y)
+    const preBareGLeft = Math.min(boxAPreBareG.x, boxBPreBareG.x)
     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 selectKind(popover, ATLAS_KIND_TOPIC)
+    await popover.getByTestId('atlas-placement-title').fill('ZzK2eBareGArea')
+    await popover.getByTestId('atlas-placement-submit').click()
     await expect(popover).not.toBeVisible()
+    const bareGArea = groupCard(page, 'ZzK2eBareGArea')
+    await expect(bareGArea).toBeVisible()
+
+    // Regression: the new area's own Position previously came from the
+    // triggering anchor point (the selection tray's own rect for bare
+    // G / its Group button), not the grouped members' own rendered
+    // spot -- the tray floats bottom-center, so this door landed the
+    // new area far below the members regardless of where they visibly
+    // were. The camera never moves for a group action, so screen-space
+    // bounding boxes before and after are directly comparable.
+    const bareGAreaBox = await bareGArea.boundingBox()
+    if (!bareGAreaBox) throw new Error('missing bounding box for grouped area')
+    const boardBoxAfterBareG = await board.boundingBox()
+    if (!boardBoxAfterBareG) throw new Error('missing bounding box for board')
+    expect(Math.abs(bareGAreaBox.y - preBareGTop)).toBeLessThan(250)
+    expect(Math.abs(bareGAreaBox.x - preBareGLeft)).toBeLessThan(250)
+    expect(bareGAreaBox.y).toBeLessThan(boardBoxAfterBareG.y + boardBoxAfterBareG.height - 250)
+
+    // Dissolve back to loose cards, deselect (group+dissolve preserves
+    // the multi-selection), then re-select for the context-menu door
+    // exercised next.
+    await bareGArea.getByTestId('atlas-group-header').click({ button: 'right' })
+    await expect(menu).toBeVisible()
+    await menu.getByText('Dissolve area', { exact: true }).click()
+    await expect(page.getByRole('button', { name: 'Dissolve' })).toBeVisible()
+    await page.getByRole('button', { name: 'Dissolve' }).click()
+    await expect(bareGArea).toHaveCount(0)
+    // Low-right pane coords, matching this file's own later deselect --
+    // absolute page coords near the left edge can land on a tray/menu
+    // instead of React Flow's own pane handler.
+    await page.locator('.react-flow__pane').click({ position: { x: 500, y: 450 } })
+    await expect(selected).toHaveCount(0)
+    await cardA.click({ modifiers: ['Shift'] })
+    await cardB.click({ modifiers: ['Shift'] })
+    await expect(selected).toHaveCount(2)
+
+    // Regression fixture: the new area's own Position must land at the
+    // members' CURRENT rendered spot, not the triggering right-click
+    // point -- captured before the group gesture so it survives the
+    // popover interaction.
+    const boxAPreGroup = await cardA.boundingBox()
+    const boxBPreGroup = await cardB.boundingBox()
+    if (!boxAPreGroup || !boxBPreGroup) throw new Error('missing bounding box before group')
+    const preGroupTop = Math.min(boxAPreGroup.y, boxBPreGroup.y)
+    const preGroupLeft = Math.min(boxAPreGroup.x, boxBPreGroup.x)
 
     // Member right-click reaches the multi menu -> Group into new area
     // (same full-gesture retry as above: Primer's menu overlay animates
@@ -289,6 +343,19 @@ test('atlas shift-click select: toggle membership, group via member right-click,
     await expect(groupedArea).toBeVisible()
     await expect(groupedArea.getByTestId('atlas-group-header')).toContainText('2 cards')
 
+    // Regression: the new area's Position previously came from the
+    // triggering right-click/button point, not the grouped members' own
+    // spot -- landing far from where the members visibly were. The
+    // camera never moves for a group action, so screen-space bounding
+    // boxes before and after are directly comparable.
+    const groupedAreaBox = await groupedArea.boundingBox()
+    if (!groupedAreaBox) throw new Error('missing bounding box for grouped area')
+    const boardBoxAfterGroup = await board.boundingBox()
+    if (!boardBoxAfterGroup) throw new Error('missing bounding box for board')
+    expect(Math.abs(groupedAreaBox.y - preGroupTop)).toBeLessThan(250)
+    expect(Math.abs(groupedAreaBox.x - preGroupLeft)).toBeLessThan(250)
+    expect(groupedAreaBox.y).toBeLessThan(boardBoxAfterGroup.y + boardBoxAfterGroup.height - 250)
+
     // Dissolve back to loose cards, then Delete over a re-made
     // shift-click selection: the confirm names the count, and
     // confirming deletes both -- which is also this test's cleanup

frontend/src/atlas/AtlasBoard.tsx

@@ -145,7 +145,47 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
   const [hintedID, setHintedID] = useState<string | null>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const { fitBounds, fitView, getNodesBounds, screenToFlowPosition } = useReactFlow()
-  const creation = useAtlasCreation({ parentID, allCards, notes, readOnly, screenToFlowPosition, placementRequest, promoteRequest, groupRequest })
+
+  // Free-mode overlap resolution (goal 0073, the growth class): a
+  // frame's size is DERIVED from its children, so a clear layout can
+  // start overlapping with nobody having moved a card. Resolved with
+  // a deterministic minimal-displacement separation
+  // (atlasOverlapResolution) and PERSISTED below, so the nudge is
+  // stable across reloads. Leaf-on-leaf overlaps are hand placement
+  // and never touched.
+  // Auto-arrange rows wrap at the board's real width (a fixed cap
+  // left a dead right-hand column); the pure-layout constant stays
+  // the floor so a narrow pane still wraps.
+  const [boardWidth, setBoardWidth] = useState(0)
+  useEffect(() => {
+    const el = wrapperRef.current
+    if (!el) return
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width
+      if (w) setBoardWidth(w)
+    })
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+
+  // The board's arteries, resolved once and shared: the edges memo
+  // below renders them; Auto-arrange consumes them as the adjacency
+  // that seats linked things beside each other.
+  const arteries = useMemo(() => resolveBoardEdges(links, new Set(cards.map((c) => c.ID)), allCards), [links, cards, allCards])
+
+  const { freeMoves } = useAtlasArrange({ cards, allCards, arteries, boardWidth, arrangeRequest })
+
+  // Rendered flow-space boxes (atlasBoardBoxes.ts, split at the
+  // 500-line seam) -- Free mode only. Computed BEFORE useAtlasCreation
+  // (below) so select-then-group can anchor the new container at its
+  // members' own current box, not the triggering click point.
+  const topLevelBoxes: FrameBox[] = useMemo(
+    () => (isFree ? computeTopLevelBoxes(cards, allCards, freeMoves) : []),
+    [cards, allCards, freeMoves, isFree],
+  )
+  const noteBoxes = useMemo(() => (isFree ? computeNoteBoxes(notes) : []), [notes, isFree])
+
+  const creation = useAtlasCreation({ parentID, allCards, notes, readOnly, screenToFlowPosition, placementRequest, promoteRequest, groupRequest, cardBoxes: topLevelBoxes, noteBoxes })
   const selection = useAtlasSelection({ cards, notes, onMultiSelectContextMenu })
 
   // Delete/Backspace over a live selection -> the shared confirm
@@ -217,43 +257,6 @@ function AtlasBoardInner({ cards, allCards, kinds, links, linkKinds, notes, pare
     if (focusRequest) setFlippedID(null)
   }, [focusRequest])
 
-  // Free-mode overlap resolution (goal 0073, the growth class): a
-  // frame's size is DERIVED from its children, so a clear layout can
-  // start overlapping with nobody having moved a card. Resolved with
-  // a deterministic minimal-displacement separation
-  // (atlasOverlapResolution) and PERSISTED below, so the nudge is
-  // stable across reloads. Leaf-on-leaf overlaps are hand placement
-  // and never touched.
-  // Auto-arrange rows wrap at the board's real width (a fixed cap
-  // left a dead right-hand column); the pure-layout constant stays
-  // the floor so a narrow pane still wraps.
-  const [boardWidth, setBoardWidth] = useState(0)
-  useEffect(() => {
-    const el = wrapperRef.current
-    if (!el) return
-    const observer = new ResizeObserver((entries) => {
-      const w = entries[0]?.contentRect.width
-      if (w) setBoardWidth(w)
-    })
-    observer.observe(el)
-    return () => observer.disconnect()
-  }, [])
-
-  // The board's arteries, resolved once and shared: the edges memo
-  // below renders them; Auto-arrange consumes them as the adjacency
-  // that seats linked things beside each other.
-  const arteries = useMemo(() => resolveBoardEdges(links, new Set(cards.map((c) => c.ID)), allCards), [links, cards, allCards])
-
-  const { freeMoves } = useAtlasArrange({ cards, allCards, arteries, boardWidth, arrangeRequest })
-
-  // Rendered flow-space boxes (atlasBoardBoxes.ts, split at the
-  // 500-line seam) -- Free mode only.
-  const topLevelBoxes: FrameBox[] = useMemo(
-    () => (isFree ? computeTopLevelBoxes(cards, allCards, freeMoves) : []),
-    [cards, allCards, freeMoves, isFree],
-  )
-  const noteBoxes = useMemo(() => (isFree ? computeNoteBoxes(notes) : []), [notes, isFree])
-
   const dragFiling = useAtlasDragFiling({ allCards, parentID, topLevelBoxes, wrapperRef })
 
   // Slot-drag = instant typed link (goal 0081 A4): see useAtlasSlotDrag.ts.

frontend/src/atlas/atlasBoardBoxes.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { computeEnclosedBoundingBoxOrigin } from './atlasBoardBoxes'
+
+describe('computeEnclosedBoundingBoxOrigin', () => {
+  // Regression: select-then-group anchored the new container at the
+  // triggering click point (a member right-click, or the selection
+  // tray's own bottom-center Group button) instead of where the
+  // grouped members actually render -- the tray path always landed
+  // the new area at the bottom of the board regardless of the
+  // members' real position.
+  it('returns the top-left of the union of the enclosed members boxes', () => {
+    const cardBoxes = [
+      { id: 'a', x: 200, y: 400 },
+      { id: 'b', x: 350, y: 320 },
+      { id: 'unrelated', x: 0, y: 0 },
+    ]
+    expect(computeEnclosedBoundingBoxOrigin(['a', 'b'], [], cardBoxes, [])).toEqual({ x: 200, y: 320 })
+  })
+
+  it('considers notes alongside cards', () => {
+    const cardBoxes = [{ id: 'a', x: 200, y: 400 }]
+    const noteBoxes = [{ id: 'n1', x: 100, y: 500 }]
+    expect(computeEnclosedBoundingBoxOrigin(['a'], ['n1'], cardBoxes, noteBoxes)).toEqual({ x: 100, y: 400 })
+  })
+
+  it('returns null when none of the given ids resolve to a box', () => {
+    expect(computeEnclosedBoundingBoxOrigin(['missing'], [], [{ id: 'a', x: 0, y: 0 }], [])).toBeNull()
+  })
+})

frontend/src/atlas/atlasBoardBoxes.ts

@@ -32,3 +32,25 @@ export function computeTopLevelBoxes(
 export function computeNoteBoxes(notes: Note[]): { id: string; x: number; y: number; width: number; height: number }[] {
   return notes.map((n) => ({ id: n.ID, x: n.Position.X, y: n.Position.Y, width: STICKY_WIDTH, height: STICKY_HEIGHT }))
 }
+
+// Select-then-group's own anchor (the multi-select context menu item
+// and the selection tray's Group button/bare-G): the new container's
+// Position is the enclosed members' own CURRENT rendered top-left, not
+// the triggering click point -- a click on a member (or the tray's
+// bottom-center button) is nowhere near the members themselves. Null
+// when none of the given ids resolve to a box (nothing to anchor to;
+// the caller falls back to the click-derived flow position).
+export function computeEnclosedBoundingBoxOrigin(
+  cardIDs: string[],
+  noteIDs: string[],
+  cardBoxes: { id: string; x: number; y: number }[],
+  noteBoxes: { id: string; x: number; y: number }[],
+): { x: number; y: number } | null {
+  const ids = new Set([...cardIDs, ...noteIDs])
+  const boxes = [...cardBoxes, ...noteBoxes].filter((b) => ids.has(b.id))
+  if (boxes.length === 0) return null
+  return {
+    x: Math.min(...boxes.map((b) => b.x)),
+    y: Math.min(...boxes.map((b) => b.y)),
+  }
+}

frontend/src/atlas/useAtlasCreation.ts

@@ -6,6 +6,7 @@ import { useUISignalStore } from '../shared/uiSignalStore'
 import { refreshAtlas } from './atlasStore'
 import { titleFromNoteText } from './atlasCreateHelpers'
 import { freeChildPosition } from './atlasContainmentPlacement'
+import { computeEnclosedBoundingBoxOrigin } from './atlasBoardBoxes'
 import type { AtlasCreationTool } from './AtlasCreationTray'
 
 export interface AtlasPlacementPopoverState {
@@ -70,7 +71,7 @@ export interface AtlasGroupRequest { cardIDs: string[]; noteIDs: string[]; pos:
 // parentID is the board's OWN current container (AtlasView's viewedID,
 // threaded down unchanged) -- the LOCKED design's "parent = where you
 // are" rule for every canvas-foremost creation door.
-export function useAtlasCreation({ parentID, allCards, notes, readOnly, screenToFlowPosition, placementRequest, promoteRequest, groupRequest }: {
+export function useAtlasCreation({ parentID, allCards, notes, readOnly, screenToFlowPosition, placementRequest, promoteRequest, groupRequest, cardBoxes, noteBoxes }: {
   parentID: string
   allCards: Card[]
   notes: Note[]
@@ -79,6 +80,12 @@ export function useAtlasCreation({ parentID, allCards, notes, readOnly, screenTo
   placementRequest?: AtlasPlacementRequest | null
   promoteRequest?: AtlasPromoteRequest | null
   groupRequest?: AtlasGroupRequest | null
+  // Every top-level card/note's own rendered flow-space box (freeMoves-
+  // aware -- AtlasBoard.tsx's topLevelBoxes/noteBoxes), used ONLY to
+  // anchor select-then-group's new container at its members' own
+  // current position instead of the triggering click point.
+  cardBoxes?: { id: string; x: number; y: number }[]
+  noteBoxes?: { id: string; x: number; y: number }[]
 }) {
   const [armedTool, setArmedTool] = useState<AtlasCreationTool | null>(null)
   const [popover, setPopover] = useState<AtlasPlacementPopoverState | null>(null)
@@ -326,14 +333,20 @@ export function useAtlasCreation({ parentID, allCards, notes, readOnly, screenTo
     // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on the request's own token
   }, [promoteRequest])
 
-  // Select-then-group (goal 0081 slice A2): reuses screenToFlowPosition
-  // to place the new container at the right-click point, same as any
-  // other canvas-foremost creation door.
+  // Select-then-group (goal 0081 slice A2): the new container lands at
+  // the grouped members' own current bounding-box top-left, not the
+  // triggering click point -- a member right-click or the selection
+  // tray's bottom-center Group button both click far from where the
+  // members actually render (regression: the tray path always landed
+  // the new area at the bottom of the board). Falls back to the click
+  // point only when no member box resolves (shouldn't happen for a
+  // real 2+ selection, but keeps this door from silently no-op'ing).
   const lastGroupToken = useRef(groupRequest?.token)
   useEffect(() => {
     if (!groupRequest || groupRequest.token === lastGroupToken.current) return
     lastGroupToken.current = groupRequest.token
-    openAreaPopover(groupRequest.pos, screenToFlowPosition(groupRequest.pos), groupRequest.cardIDs, groupRequest.noteIDs)
+    const anchor = computeEnclosedBoundingBoxOrigin(groupRequest.cardIDs, groupRequest.noteIDs, cardBoxes ?? [], noteBoxes ?? [])
+    openAreaPopover(groupRequest.pos, anchor ?? screenToFlowPosition(groupRequest.pos), groupRequest.cardIDs, groupRequest.noteIDs)
     // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on the request's own token
   }, [groupRequest])