From 26e1c4d770a34618358f2c7707e945667c03f1d2 Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Wed, 29 Jul 2026 12:59:44 -0700
Subject: [PATCH] Float artifact request composer (#22)

Co-authored-by: codexbot.disnetdev.com (did:plc:hbonvqr5ysrscg5wdyb5klie) <codexbot.disnetdev.com@noreply.radial>
---
 packages/ui/src/app.css                       |  5 ++
 .../ui/src/lib/components/NewRequest.svelte   | 84 ++++++++++++++++---
 .../ui/src/lib/components/PlusMenu.svelte     |  2 +
 .../ui/src/lib/components/RequestBar.svelte   | 16 +++-
 .../ui/src/lib/components/UnitDetail.svelte   | 64 ++++++++++----
 packages/ui/src/lib/compose.svelte.ts         | 37 ++++----
 packages/ui/src/lib/floating.test.ts          | 44 ++++++++++
 packages/ui/src/lib/floating.ts               | 70 ++++++++++++++++
 packages/ui/src/lib/requests.test.ts          | 12 ++-
 packages/ui/src/routes/+layout.svelte         |  6 ++
 .../ui/src/routes/g/[did]/[rkey]/+page.svelte | 20 +----
 .../routes/p/[project]/system/+page.svelte    |  8 --
 packages/ui/test/request-overlay.test.mjs     | 25 ++++++
 13 files changed, 309 insertions(+), 84 deletions(-)
 create mode 100644 packages/ui/src/lib/floating.test.ts
 create mode 100644 packages/ui/src/lib/floating.ts
 create mode 100644 packages/ui/test/request-overlay.test.mjs

diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index 595cc9a..53ea792 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -710,6 +710,11 @@ select.sl { resize: none; cursor: pointer; padding-right: 8px; }
   box-shadow: 0 0 0 1px var(--line), 0 10px 26px -12px oklch(0.25 0.03 262 / 0.30);
   animation: pop 300ms var(--ease-out);
 }
+.request-overlay {
+  position: fixed; z-index: 38; margin: 0; width: min(520px, calc(100vw - 24px));
+  overflow: auto; overscroll-behavior: contain; visibility: hidden;
+}
+.request-overlay.placed { visibility: visible; }
 @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(0.995); } }
 /* The goal composer is a modal (`.scrim .newgoal`) rather than a card in the page, but it is the same
    object saying the same things, so the heading and the hint under it are drawn once for both. */
diff --git a/packages/ui/src/lib/components/NewRequest.svelte b/packages/ui/src/lib/components/NewRequest.svelte
index 7753b77..792b18b 100644
--- a/packages/ui/src/lib/components/NewRequest.svelte
+++ b/packages/ui/src/lib/components/NewRequest.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
   import { artifactTypes, durabilityOf } from '@radial/core'
   import { goto } from '$app/navigation'
+  import { onMount } from 'svelte'
   import { account } from '$lib/auth.svelte.js'
-  import { closeDraft, holdDraft } from '$lib/compose.svelte.js'
+  import { closeDraft, holdDraft, requestDialogId } from '$lib/compose.svelte.js'
+  import { placeFloating } from '$lib/floating.js'
   import {
     capableAgents,
     captureBasis,
@@ -28,8 +30,9 @@
   interface Props {
     draft: RequestDraft
     space: Space
+    anchor: HTMLElement
   }
-  const { draft, space }: Props = $props()
+  const { draft, space, anchor }: Props = $props()
 
   const writable = $derived(!space.fixture && account.status === 'signed-in')
 
@@ -76,15 +79,64 @@
   let error = $state('')
   let first = $state<HTMLTextAreaElement | null>(null)
   let card = $state<HTMLDivElement | null>(null)
+  let left = $state(0)
+  let top = $state(0)
+  let maxWidth = $state(0)
+  let maxHeight = $state(0)
+  let placed = $state(false)
+  const headingId = `${requestDialogId}-heading`
 
-  // This card stays in the page — it belongs to the view it lands in, and quotes the exact versions
-  // it is built on — so it is the one composer that can still move the page under the reader. Focus
-  // without scrolling, then bring the card into view by its own top edge: the browser's default is to
-  // scroll the *field* into view, which over `smooth` scrolling is the visible jump. A card opened
-  // from a drawer button is already on screen, and `nearest` leaves it alone.
+  // Focus without asking any scroll container to move. Placement is fixed to the visual viewport.
   $effect(() => {
     first?.focus({ preventScroll: true })
-    card?.scrollIntoView({ block: 'nearest' })
+  })
+
+  onMount(() => {
+    let frame = 0
+    const measure = (): void => {
+      frame = 0
+      if (!anchor.isConnected) {
+        closeDraft()
+        return
+      }
+      if (!card) return
+      const visual = window.visualViewport
+      const viewport = {
+        left: visual?.offsetLeft ?? 0,
+        top: visual?.offsetTop ?? 0,
+        width: visual?.width ?? window.innerWidth,
+        height: visual?.height ?? window.innerHeight,
+      }
+      const position = placeFloating(
+        anchor.getBoundingClientRect(),
+        card.getBoundingClientRect(),
+        viewport,
+      )
+      left = position.left
+      top = position.top
+      maxWidth = position.maxWidth
+      maxHeight = position.maxHeight
+      placed = true
+    }
+    const schedule = (): void => {
+      if (!frame) frame = requestAnimationFrame(measure)
+    }
+    const observer = new ResizeObserver(schedule)
+    observer.observe(anchor)
+    if (card) observer.observe(card)
+    window.addEventListener('resize', schedule)
+    window.addEventListener('scroll', schedule, true)
+    window.visualViewport?.addEventListener('resize', schedule)
+    window.visualViewport?.addEventListener('scroll', schedule)
+    schedule()
+    return () => {
+      if (frame) cancelAnimationFrame(frame)
+      observer.disconnect()
+      window.removeEventListener('resize', schedule)
+      window.removeEventListener('scroll', schedule, true)
+      window.visualViewport?.removeEventListener('resize', schedule)
+      window.visualViewport?.removeEventListener('scroll', schedule)
+    }
   })
 
   // A brief in progress, or an assignee narrowed to — the bare `n` that writes a goal from anywhere
@@ -127,8 +179,20 @@
   }
 </script>
 
-<div class="newreq" bind:this={card}>
-  <h3>
+<div
+  class="request-overlay newreq"
+  class:placed
+  id={requestDialogId}
+  role="dialog"
+  aria-modal="false"
+  aria-labelledby={headingId}
+  bind:this={card}
+  style:left="{left}px"
+  style:top="{top}px"
+  style:max-width={placed ? `${maxWidth}px` : undefined}
+  style:max-height={placed ? `${maxHeight}px` : undefined}
+>
+  <h3 id={headingId}>
     <span style="color:{draft.scope === 'project' ? 'var(--teal)' : 'var(--accent)'}">
       <Glyph name={draft.type} size={16} />
     </span>
diff --git a/packages/ui/src/lib/components/PlusMenu.svelte b/packages/ui/src/lib/components/PlusMenu.svelte
index 3630190..93f5f4c 100644
--- a/packages/ui/src/lib/components/PlusMenu.svelte
+++ b/packages/ui/src/lib/components/PlusMenu.svelte
@@ -121,6 +121,7 @@
       <button
         class="menu-item"
         role="menuitem"
+        aria-haspopup="dialog"
         onclick={() => {
           chose = true
           closeMenu()
@@ -128,6 +129,7 @@
           openDraft(
             { kind: 'request', target: types.target, scope: types.scope, type: name },
             plus ?? undefined,
+            plus ?? undefined,
           )
         }}
       >
diff --git a/packages/ui/src/lib/components/RequestBar.svelte b/packages/ui/src/lib/components/RequestBar.svelte
index bb18a61..019e4df 100644
--- a/packages/ui/src/lib/components/RequestBar.svelte
+++ b/packages/ui/src/lib/components/RequestBar.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { openDraft } from '$lib/compose.svelte.js'
+  import {
+    openDraft,
+    ownsRequestDraft,
+    requestDialogId,
+  } from '$lib/compose.svelte.js'
   import { requestableTypes } from '$lib/requests.js'
   import type { Space } from '$lib/space.js'
   import { typeLabel } from '$lib/units.js'
@@ -28,6 +32,7 @@
   const { space, target, scope }: Props = $props()
 
   const offered = $derived(requestableTypes(space.index, scope))
+  let buttons = $state<Record<string, HTMLButtonElement>>({})
 </script>
 
 <!-- No sign-in gate and no fixture gate, for the reason the compose card gives: the card opens and
@@ -38,11 +43,18 @@
     <span class="asklead">Ask an agent for</span>
     {#each offered as { name, value } (name)}
       <button
+        bind:this={buttons[name]}
         class="btn askbtn"
         type="button"
+        aria-haspopup="dialog"
+        aria-controls={requestDialogId}
+        aria-expanded={ownsRequestDraft(buttons[name])}
         aria-label="Request {typeLabel(name)}"
         title={value.outputSpec.description}
-        onclick={() => openDraft({ kind: 'request', target, scope, type: name })}
+        onclick={(event) => {
+          const trigger = event.currentTarget
+          openDraft({ kind: 'request', target, scope, type: name }, trigger, trigger)
+        }}
       >
         <span class="g"><Glyph {name} /></span>
         {typeLabel(name)}
diff --git a/packages/ui/src/lib/components/UnitDetail.svelte b/packages/ui/src/lib/components/UnitDetail.svelte
index 483154d..3c4b9d0 100644
--- a/packages/ui/src/lib/components/UnitDetail.svelte
+++ b/packages/ui/src/lib/components/UnitDetail.svelte
@@ -2,7 +2,11 @@
   import type { GoalView, ProjectView, UnitView, Verdict } from '@radial/core'
   import { durabilityOf } from '@radial/core'
   import { account } from '$lib/auth.svelte.js'
-  import { openDraft } from '$lib/compose.svelte.js'
+  import {
+    openDraft,
+    ownsRequestDraft,
+    requestDialogId,
+  } from '$lib/compose.svelte.js'
   import { shortCommit, stamp } from '$lib/format.js'
   import { grow } from '$lib/grow.js'
   import { inline } from '$lib/prose.js'
@@ -122,13 +126,16 @@
   const capturable = $derived(
     canSucceed && isGoalView(view) && project ? captureTypes(space.index) : [],
   )
-  const captureInto = (type: string): void => {
+  let requestButtons = $state<Record<string, HTMLButtonElement>>({})
+  const captureInto = (type: string, trigger: HTMLButtonElement): void => {
     if (!version || !project) return
     openDraft(
       captureDraft(project.target.uri, view.target.uri, type, {
         uri: version.artifact.uri,
         cid: version.artifact.cid,
       }),
+      trigger,
+      trigger,
     )
   }
 
@@ -155,18 +162,22 @@
   // A successor carries the whole basis: the version being read, plus that version's own other-type
   // bases, so a v2 arrives with the plan its findings judge it against and not only the findings.
   // A different type starts a new chain, and takes only the version it was asked off.
-  const compose = (type: string): void => {
+  const compose = (type: string, trigger: HTMLButtonElement): void => {
     if (!version) return
-    openDraft({
-      kind: 'request',
-      target: view.target.uri,
-      scope,
-      type,
-      basedOn:
-        type === unit.type
-          ? successorBasis(space.index, unit, version)
-          : [{ uri: version.artifact.uri, cid: version.artifact.cid }],
-    })
+    openDraft(
+      {
+        kind: 'request',
+        target: view.target.uri,
+        scope,
+        type,
+        basedOn:
+          type === unit.type
+            ? successorBasis(space.index, unit, version)
+            : [{ uri: version.artifact.uri, cid: version.artifact.cid }],
+      },
+      trigger,
+      trigger,
+    )
   }
 
   // Soft policy (design §7): building something new on a version nobody approved is worth saying out
@@ -507,6 +518,7 @@
     {/if}
     {#if canSucceed && version}
       <button
+        bind:this={requestButtons[`successor:${unit.type}`]}
         class="btn"
         class:btn-p={successor.primary && !successor.pending}
         type="button"
@@ -514,12 +526,24 @@
         title={successor.pending
           ? 'Asking again would write a second competing successor'
           : successor.continuity?.note}
-        onclick={() => compose(unit.type)}
+        aria-haspopup="dialog"
+        aria-controls={requestDialogId}
+        aria-expanded={ownsRequestDraft(requestButtons[`successor:${unit.type}`])}
+        onclick={(event) => compose(unit.type, event.currentTarget)}
       >
         {successor.pending ?? successor.label}
       </button>
       {#each buildable as type (type.name)}
-        <button class="btn" type="button" title={newChain} onclick={() => compose(type.name)}>
+        <button
+          bind:this={requestButtons[`build:${type.name}`]}
+          class="btn"
+          type="button"
+          title={newChain}
+          aria-haspopup="dialog"
+          aria-controls={requestDialogId}
+          aria-expanded={ownsRequestDraft(requestButtons[`build:${type.name}`])}
+          onclick={(event) => compose(type.name, event.currentTarget)}
+        >
           Request {typeLabel(type.name)}
         </button>
       {/each}
@@ -529,7 +553,15 @@
            standing memory, and the row it makes lands in System rather than in this goal. -->
       <span class="gap" aria-hidden="true"></span>
       {#each capturable as type (type.name)}
-        <button class="btn" type="button" onclick={() => captureInto(type.name)}>
+        <button
+          bind:this={requestButtons[`capture:${type.name}`]}
+          class="btn"
+          type="button"
+          aria-haspopup="dialog"
+          aria-controls={requestDialogId}
+          aria-expanded={ownsRequestDraft(requestButtons[`capture:${type.name}`])}
+          onclick={(event) => captureInto(type.name, event.currentTarget)}
+        >
           Capture as {typeLabel(type.name)}
         </button>
       {/each}
diff --git a/packages/ui/src/lib/compose.svelte.ts b/packages/ui/src/lib/compose.svelte.ts
index c128134..71df48b 100644
--- a/packages/ui/src/lib/compose.svelte.ts
+++ b/packages/ui/src/lib/compose.svelte.ts
@@ -1,11 +1,7 @@
 // What is being written right now.
 //
-// A request card belongs to the view it writes into — at the top of the goal it is asked against —
-// but the ⊕ that opens one lives in the pane, next to the rail and outside every route, and so does
-// the button in a drawer six rows down. A goal card belongs to no view at all: it is a modal drawn
-// from the layout, because the ⊕ offers a goal on every view of an open space and a card the route
-// had to draw could only exist where a route drew it. So "there is a draft" is per-tab state rather
-// than a prop, and this is the smallest place to keep it.
+// Request and goal composers are shell overlays. "There is a draft" is per-tab state rather than a
+// prop, and this is the smallest place to keep it.
 //
 // One draft at a time, deliberately: two half-written requests on one screen is a state nobody asked
 // for, and opening a second card is how you abandon the first.
@@ -22,8 +18,12 @@ export type Draft = { kind: 'goal'; project?: string } | RequestDraft
 
 export const compose = $state({
   draft: undefined as Draft | undefined,
+  /** The persistent control beside which a request composer floats. */
+  anchor: undefined as HTMLElement | undefined,
 })
 
+export const requestDialogId = 'request-composer'
+
 /** Where the card was opened from — a drawer's button, six rows down — so closing it goes back there. */
 let opener: (() => boolean) | undefined
 
@@ -47,16 +47,17 @@ let content = false
  * place — a ⊕ menu item disappears with the menu it is in, so that menu passes the ⊕ itself. A button
  * in a drawer stays exactly where it was and needs no help.
  */
-export function openDraft(draft: Draft, from?: Focusable): void {
-  // Opening a second card abandons the first, and the place to go back to stays the first opener's:
-  // the button that opened the card being replaced is no longer what the reader is standing on.
-  opener ??= from
+export function openDraft(draft: Draft, from?: Focusable, anchor?: HTMLElement): void {
+  // Opening a second card abandons the first. Its own trigger now owns both placement and the way
+  // back; retaining the previous trigger would make aria-expanded and restored focus disagree.
+  opener = from
     ? () => {
         if (focusIsLoose()) from.focus()
         return true
       }
     : keepFocus()
   compose.draft = draft
+  compose.anchor = draft.kind === 'request' ? anchor : undefined
   // The card that is arriving is empty until it says otherwise, and it says so from an effect that
   // has not run yet. Reset here rather than trusting the card that is leaving to clean up: one that
   // unmounts without a word must not leave the app holding a brief that is gone.
@@ -69,6 +70,7 @@ export function closeDraft(): void {
   // opening one would immediately re-run the effect that closes it. `opener` is plain module state
   // and answers the same question ("was anything open?") without being reactive.
   compose.draft = undefined
+  compose.anchor = undefined
   content = false
   opener?.()
   opener = undefined
@@ -82,15 +84,6 @@ export function holdDraft(has: boolean): void {
 /** Asked before a draft is replaced by something the reader may not have meant to open. */
 export const draftHolds = (): boolean => content
 
-/**
- * The draft this view should be drawing, if the one that is open belongs to it.
- *
- * Usually that is the view the request will land in. A capture is the exception and carries `from`:
- * it is written against the project while the card stays on the goal artifact being distilled, so
- * the card can say what it is distilling without the reader having navigated away from it (§8).
- */
-export function draftFor(view: string): RequestDraft | undefined {
-  const draft = compose.draft
-  if (draft?.kind !== 'request') return undefined
-  return (draft.from ?? draft.target) === view ? draft : undefined
-}
+/** Whether a persistent request button owns the currently open dialog. */
+export const ownsRequestDraft = (button: HTMLElement | null | undefined): boolean =>
+  compose.draft?.kind === 'request' && compose.anchor === button
diff --git a/packages/ui/src/lib/floating.test.ts b/packages/ui/src/lib/floating.test.ts
new file mode 100644
index 0000000..e011b25
--- /dev/null
+++ b/packages/ui/src/lib/floating.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { placeFloating, type Rect } from './floating.js'
+
+const rect = (left: number, top: number, width: number, height: number): Rect => ({
+  left,
+  top,
+  right: left + width,
+  bottom: top + height,
+  width,
+  height,
+})
+const viewport = { left: 0, top: 0, width: 1000, height: 700 }
+
+describe('floating request placement', () => {
+  it('prefers the trigger right and flips at the right edge', () => {
+    expect(placeFloating(rect(100, 80, 40, 30), rect(0, 0, 300, 200), viewport).left).toBe(150)
+    expect(placeFloating(rect(900, 80, 40, 30), rect(0, 0, 300, 200), viewport).left).toBe(590)
+  })
+
+  it('flips vertically and clamps to viewport offsets', () => {
+    const placed = placeFloating(
+      rect(120, 560, 40, 30),
+      rect(0, 0, 300, 220),
+      { left: 20, top: 30, width: 800, height: 600 },
+    )
+    expect(placed.top).toBe(370)
+    expect(placed.left).toBeGreaterThanOrEqual(32)
+  })
+
+  it('bounds oversized cards and uses a bottom-aligned narrow fallback', () => {
+    const placed = placeFloating(
+      rect(200, 100, 30, 30),
+      rect(0, 0, 900, 900),
+      { left: 5, top: 10, width: 390, height: 600 },
+    )
+    expect(placed).toMatchObject({
+      left: 17,
+      top: 22,
+      maxWidth: 366,
+      maxHeight: 576,
+      narrow: true,
+    })
+  })
+})
diff --git a/packages/ui/src/lib/floating.ts b/packages/ui/src/lib/floating.ts
new file mode 100644
index 0000000..616e11f
--- /dev/null
+++ b/packages/ui/src/lib/floating.ts
@@ -0,0 +1,70 @@
+export interface Rect {
+  left: number
+  top: number
+  right: number
+  bottom: number
+  width: number
+  height: number
+}
+
+export interface Viewport {
+  left: number
+  top: number
+  width: number
+  height: number
+}
+
+export interface FloatingPosition {
+  left: number
+  top: number
+  maxWidth: number
+  maxHeight: number
+  narrow: boolean
+}
+
+const clamp = (value: number, minimum: number, maximum: number): number =>
+  Math.min(Math.max(value, minimum), Math.max(minimum, maximum))
+
+/** Place a card beside its trigger, flipping before clamping it into the visual viewport. */
+export function placeFloating(
+  anchor: Rect,
+  card: Pick<Rect, 'width' | 'height'>,
+  viewport: Viewport,
+  gap = 10,
+  gutter = 12,
+  narrowAt = 600,
+): FloatingPosition {
+  const minLeft = viewport.left + gutter
+  const minTop = viewport.top + gutter
+  const maxWidth = Math.max(0, viewport.width - gutter * 2)
+  const maxHeight = Math.max(0, viewport.height - gutter * 2)
+  const width = Math.min(card.width, maxWidth)
+  const height = Math.min(card.height, maxHeight)
+  const narrow = viewport.width < narrowAt
+
+  if (narrow) {
+    return {
+      left: minLeft + Math.max(0, (maxWidth - width) / 2),
+      top: viewport.top + viewport.height - gutter - height,
+      maxWidth,
+      maxHeight,
+      narrow,
+    }
+  }
+
+  const right = anchor.right + gap
+  const left = anchor.left - gap - width
+  let x = right + width <= viewport.left + viewport.width - gutter ? right : left
+  if (x < minLeft) x = clamp(anchor.left, minLeft, viewport.left + viewport.width - gutter - width)
+
+  let y = anchor.top
+  if (y + height > viewport.top + viewport.height - gutter) y = anchor.bottom - height
+
+  return {
+    left: clamp(x, minLeft, viewport.left + viewport.width - gutter - width),
+    top: clamp(y, minTop, viewport.top + viewport.height - gutter - height),
+    maxWidth,
+    maxHeight,
+    narrow,
+  }
+}
diff --git a/packages/ui/src/lib/requests.test.ts b/packages/ui/src/lib/requests.test.ts
index d894797..e4ea5d2 100644
--- a/packages/ui/src/lib/requests.test.ts
+++ b/packages/ui/src/lib/requests.test.ts
@@ -1,6 +1,6 @@
 import { FIXTURE_DIDS } from '@radial/core/fixture'
 import { describe, expect, it } from 'vitest'
-import { closeDraft, draftFor, openDraft } from './compose.svelte.js'
+import { closeDraft, compose, openDraft } from './compose.svelte.js'
 import { buildFixtureSpace } from './fixture.js'
 import type { UnitVersion } from '@radial/core'
 import {
@@ -466,13 +466,12 @@ describe('capture: the request whose target is not the view it was opened from (
     ).toBeUndefined()
   })
 
-  it('draws its card on the goal it was opened from, not on the project it will land in', () => {
+  it('keeps capture provenance while the shell owns the one request composer', () => {
     const capture = draft()
     openDraft(capture)
-    expect(draftFor(goalUri())).toBe(capture)
-    expect(draftFor(project().target.uri)).toBeUndefined()
+    expect(compose.draft).toBe(capture)
 
-    // Every other request composes where it lands, which is the case `from` leaves alone.
+    // Replacing a capture with an ordinary request replaces the one shell-level surface.
     const ordinary: RequestDraft = {
       kind: 'request',
       target: project().target.uri,
@@ -480,8 +479,7 @@ describe('capture: the request whose target is not the view it was opened from (
       type: 'conventions',
     }
     openDraft(ordinary)
-    expect(draftFor(project().target.uri)).toBe(ordinary)
-    expect(draftFor(goalUri())).toBeUndefined()
+    expect(compose.draft).toBe(ordinary)
     closeDraft()
   })
 })
diff --git a/packages/ui/src/routes/+layout.svelte b/packages/ui/src/routes/+layout.svelte
index dd78136..37934af 100644
--- a/packages/ui/src/routes/+layout.svelte
+++ b/packages/ui/src/routes/+layout.svelte
@@ -11,6 +11,7 @@
   import { rail } from '$lib/rail.svelte.js'
   import Diagnostics from '$lib/components/Diagnostics.svelte'
   import NewGoal from '$lib/components/NewGoal.svelte'
+  import NewRequest from '$lib/components/NewRequest.svelte'
   import PaneBar from '$lib/components/PaneBar.svelte'
   import PlusMenu from '$lib/components/PlusMenu.svelte'
   import Rail from '$lib/components/Rail.svelte'
@@ -215,6 +216,11 @@
   {#if compose.draft?.kind === 'goal'}
     <NewGoal {space} here={compose.draft.project} />
   {/if}
+  {#if compose.draft?.kind === 'request' && compose.anchor}
+    {#key compose.draft}
+      <NewRequest draft={compose.draft} {space} anchor={compose.anchor} />
+    {/key}
+  {/if}
   {#if session.picking}
     <div class="scrim">
       <SpacePicker overlay />
diff --git a/packages/ui/src/routes/g/[did]/[rkey]/+page.svelte b/packages/ui/src/routes/g/[did]/[rkey]/+page.svelte
index 0fad18d..5fa6555 100644
--- a/packages/ui/src/routes/g/[did]/[rkey]/+page.svelte
+++ b/packages/ui/src/routes/g/[did]/[rkey]/+page.svelte
@@ -5,7 +5,6 @@
   import Composer from '$lib/components/Composer.svelte'
   import Glyph from '$lib/components/Glyph.svelte'
   import GoalActions from '$lib/components/GoalActions.svelte'
-  import NewRequest from '$lib/components/NewRequest.svelte'
   import Pie from '$lib/components/Pie.svelte'
   import RequestBar from '$lib/components/RequestBar.svelte'
   import Thread from '$lib/components/Thread.svelte'
@@ -13,7 +12,6 @@
   import UriChip from '$lib/components/UriChip.svelte'
   import Who from '$lib/components/Who.svelte'
   import { dayKey, dayLabel, shortDate } from '$lib/format.js'
-  import { draftFor } from '$lib/compose.svelte.js'
   import { currentSpace } from '$lib/session.svelte.js'
   import type { ThreadMessage } from '$lib/replies.js'
   import { goalByRoute, isClosed, unitsOf } from '$lib/space.js'
@@ -35,11 +33,6 @@
   /** …and, when the row stood for one exact version — a review owed — with that version showing. */
   const openedVersion = $derived(Number.parseInt(page.url.searchParams.get('v') ?? '', 10))
 
-  // A request being composed against this goal, whether ⊕ or a button in a drawer opened it. The
-  // card sits above the list rather than inside the row that opened it: what is being asked for is a
-  // new unit, and it belongs where it will land.
-  const drafting = $derived(goal ? draftFor(goal.target.uri) : undefined)
-
   // Units group into the days they were asked for — the comp's "Today / Yesterday / Jul 21".
   const days = $derived.by(() => {
     const groups: Array<{ key: string; label: string; units: typeof units }> = []
@@ -89,20 +82,9 @@
     {/if}
   </div>
 
-  <!-- Directly above the card it opens, and it stays there while the card is up: the button that
-       opened a card is where Escape puts focus back, and it is also how the reader changes their mind
-       about which type they are asking for. Only the ⊕'s menu items go away when chosen, because a
-       menu is a surface rather than a place. -->
+  <!-- Persistent controls own their floating request dialog and receive focus when it closes. -->
   <RequestBar {space} target={goal.target.uri} scope="goal" />
 
-  {#if drafting}
-    <!-- Keyed on the draft itself: pressing a second button abandons the first card rather than
-         carrying a brief written for one type into a request for another. -->
-    {#key drafting}
-      <NewRequest draft={drafting} {space} />
-    {/key}
-  {/if}
-
   {#if units.length === 0}
     <div class="empty">
       <p>Nothing requested against this goal yet.</p>
diff --git a/packages/ui/src/routes/p/[project]/system/+page.svelte b/packages/ui/src/routes/p/[project]/system/+page.svelte
index 77b87e3..75a0d43 100644
--- a/packages/ui/src/routes/p/[project]/system/+page.svelte
+++ b/packages/ui/src/routes/p/[project]/system/+page.svelte
@@ -3,10 +3,8 @@
   import { durabilityOf, staleness, type UnitView } from '@radial/core'
   import Badge from '$lib/components/Badge.svelte'
   import Glyph from '$lib/components/Glyph.svelte'
-  import NewRequest from '$lib/components/NewRequest.svelte'
   import RequestBar from '$lib/components/RequestBar.svelte'
   import UnitRow from '$lib/components/UnitRow.svelte'
-  import { draftFor } from '$lib/compose.svelte.js'
   import { currentSpace } from '$lib/session.svelte.js'
   import { projectByName, unitsOf } from '$lib/space.js'
   import { matches, ui } from '$lib/ui.svelte.js'
@@ -42,7 +40,6 @@
   const drifting = $derived(
     project ? living.filter((unit) => staleness(space.index, project.target.uri, unit) > 0).length : 0,
   )
-  const drafting = $derived(project ? draftFor(project.target.uri) : undefined)
 </script>
 
 {#if !project}
@@ -72,11 +69,6 @@
        the goal page carries, and it stays put while its card is open for the same reasons. -->
   <RequestBar {space} target={project.target.uri} scope="project" />
 
-  {#if drafting}
-    {#key drafting}
-      <NewRequest draft={drafting} {space} />
-    {/key}
-  {/if}
 
   {#if units.length === 0}
     <div class="empty">
diff --git a/packages/ui/test/request-overlay.test.mjs b/packages/ui/test/request-overlay.test.mjs
new file mode 100644
index 0000000..c2bfacd
--- /dev/null
+++ b/packages/ui/test/request-overlay.test.mjs
@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import { describe, it } from 'node:test'
+
+const read = (path) => readFileSync(new URL(`../src/${path}`, import.meta.url), 'utf8')
+
+describe('request composer structure', () => {
+  it('mounts one dialog at shell level and leaves route lists in normal flow', () => {
+    const layout = read('routes/+layout.svelte')
+    assert.match(layout, /<NewRequest draft=\{compose\.draft\} \{space\} anchor=\{compose\.anchor\}/)
+    assert.doesNotMatch(read('routes/g/[did]/[rkey]/+page.svelte'), /NewRequest|draftFor/)
+    assert.doesNotMatch(read('routes/p/[project]/system/+page.svelte'), /NewRequest|draftFor/)
+  })
+
+  it('keeps the shared answer card inline and gives only requests fixed overlay styling', () => {
+    assert.match(read('lib/components/AskAnswer.svelte'), /<div class="newreq"/)
+    assert.match(read('app.css'), /\.request-overlay \{[^}]*position: fixed/)
+  })
+
+  it('keeps the plus as a menu trigger while request menu items advertise a dialog', () => {
+    const plus = read('lib/components/PlusMenu.svelte')
+    assert.match(plus, /class="plus"[\s\S]*?aria-haspopup="menu"/)
+    assert.match(plus, /role="menuitem"\s+aria-haspopup="dialog"/)
+  })
+})
-- 
2.51.2