Phone call — Transfer panel v3.2

1 · The panel and the card are two surfaces (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

T4 · 1440 × 900 · Karla picked · Transfer hovered

Shane Dusang02:41

Connected

The panel fills the 424 right column from y 51 to the window bottom. The card is not part of it: it overlapped the column at its default spot, so it stepped aside to x 640, y 98.

Transfer opens as a details panel in the right column, in the same grammar as Customer Details: title bar with ×, search, edge-to-edge user rows, a footer with the verbs. Replaces the Transfer sheet (comp-transfer-sheet, CANONICAL until this ships).
The call card is never inside or docked to the panel. While the panel is open, a card that overlaps it steps aside to the left, and comes back on close (§2). A card that doesn't overlap never moves.
Modal, without a dim. A click outside the panel or the card closes it and does nothing else (the dropdown rule). The page stays visible but can't be clicked while it is open.
Layer: above the page and any detail panel; below GlobalOverlay (the card, toasts, DAISI). It covers Customer Details, a SlideOut or a task pane without closing them; on close they come back as they were, scroll position and unsaved input included.
Opens only from the card's Transfer key, which turns .c3-key--blue “Close transfer”. Keypad: comp-call-keypad · card: comp-call-card-v3.

2 · The call card while Transfer is open: it steps aside (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Closed · default spot x 1048, y 98

Shane Dusang02:41

Connected

Open · steps aside to x 640, y 98

Shane Dusang02:41

Connected

Closed · dragged to x 1000, y 520

Shane Dusang02:41

Connected

Open · steps aside to x 640, y 520

Shane Dusang02:41

Connected

Open · dragged clear to x 320, y 600 · doesn't move

Shane Dusang02:41

Connected

Rule: while the panel is open, if the card's rect overlaps the panel's rect, the card moves to x = panel left − 16 − 360 and keeps its y. At 1440 × 900 the panel is x 1016–1440, so the card goes to x 640.
Motion: the card moves with the panel route's own duration and curve, so both land together, and returns on close. Reduced motion: it jumps.
Never saved: the move never writes phone_call_card_position; the saved spot is where it returns. Drag is off while the panel is open (default cursor).
The default anchor stays at top 98, centred over the 424 column (x 1048 at 1440). ENGINEER_HANDOFF T.3 stays open.
Header unchanged (tone, orb, name, timer · line 2). Keys: Mute, Hold/Resume, End and Speaker work · the name tap closes Transfer, then opens the customer · the Keypad key closes Transfer (the card returns) and opens the keypad · Transfer is .c3-key--blue, name “Close transfer”, Semantics expanded, live and blue even during isBusy.
[OPEN] Windows under 816 wide: panel left − 376 falls inside the 16 margin. Proposed: clamp at x 16, so the card overlaps the panel's left edge. UNVERIFIED; needs a call.

3 · Try it: drag the card, then press Transfer (demo · timing is illustrative)

Shane Dusang02:41

Connected

Drag the card anywhere, then press its Transfer key. Over the right column it steps aside; clear of it, it stays. Press Transfer again, or click outside the panel, to close: the card goes back to where you left it.

4 · Anatomy · 424 × (window − 51) (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

1:1 · 900 window · panel 424 × 849

Part	Geometry (panel coords)	Spec
Panel	x 1016–1440 in a 1440 window · y 51 → window bottom (H)	.sb-shdlg-panel + .sb-transferpanel · --white · 1px gray-06 left border inside the 424 · no dim · no dock band
A · Title bar .mh	y 0–40, hairline 40–41 · pad 0 8 0 16	“Transfer call” at x 17, --t-paragraph-sb gray-00, ellipsis (matches QA DetailPageAppBar; the DS .mh says 16) · × = .x 32×32 at x 384–416, y 4–36, fa-xmark 14 gray-02, hover gray-06, tooltip “Close”
C · Search .tp-search	y 41–89, hairline 89–90 · pad 8 16	.sb-field--search 391×32 at x 17–408, y 49–81 · r7, gray-06, hover gray-05, focus 1px blue-01 · prefix fa-magnifying-glass 12 gray-04 in a 32 box, hidden while focused · “Search people” --t-paragraph gray-04 · clear × 32 box, only with text · max 100
C2 · Notice .tp-notice	32 + 1 hairline under C · only when presence fails	gray-07 · pad 0 16 · “Shift status didn't load.” --t-tiny gray-02 · “Retry” --t-tiny-bold blue-01, 32-tall hit area
D · List .tp-list	y 90 (123 with C2) → H − 113 · scrolls, thin overlay scrollbar	.sb-userrow edge to edge, x 1–424, 57 pitch
E · Footer .mf	H − 113 → H: hairline 1 + 16 + status 24 + 8 + verbs 48 + 16	.tp-status + .tp-verbs (the .mf recipe)

Visible rows (57 pitch; H = window − 51; list = H − 203): 768 window → list 514, 9.0 rows · 900 → 646, 11.3 rows · 1080 → 826, 14.5 rows. The notice band takes 33.
Left edges are deliberate: title and search sit at 16 (x 17 with the border); the row avatar sits at 8 (x 9). Same relationship as PickUserPage. Don't pad the rows to match: that brings back the tile look.

5 · The row · .sb-userrow = the native UserInfoView row (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Rest

Hover · keyboard-active · .is-active

Pressed · .is-pressed

Picked · no fill · check

Picked + hover

Suggested

Chip skeleton (typed during the wait)

Skeleton row

Slot	Desktop x	390 phone x	Spec
Padding	1–9	0–8	—
Avatar	9–41, y 12–44	8–40	.sb-avatar.s32 photo or initials (--t-label-sb gray-02 on gray-06, 1px --black ring). No status dot, no round-robin ring (showStatus: false): the photo fills all 32
Body	from 49 (≈248 wide)	≈215 (≈146 at 320)	name --t-tiny-bold gray-00, pad 4 0 (y 8–32), ellipsis · subtitle “Department • Job title” --t-tiny gray-02 (y 32–48), ellipsis
Chip	right edge 376, y 16–40	right edge 342	.sb-chipitem: On shift green · On a call orange · Off shift gray
Pick slot	384–416, always reserved	350–382	picked: fa-check 12 blue-01 centred (the dropdown picker's check) · else empty, so the chip never shifts
Padding	416–424	382–390	—

Build: ListItemView(itemView.row, padding: zero, disableSelectedHighlight: true) around UserItemScaffold (pad 8, gap 8). 56 + 1px gray-06 divider = 57 pitch (Flutter's Container border probably adds to the height; confirm on device).
States: rest --white · hover or keyboard-active gray-06, divider hidden (one highlight; the last input wins) · pressed gray-05 · picked: no fill, divider kept, check · picked + hover gray-06. Every row can be picked (Voicemail works for everyone); no row is dimmed.
Suggested: identical, but the subtitle is the reason — “Salesperson for Shane”, “BDC agent for Shane”, “Manager for Shane”; with no first name, “Salesperson on this customer”. The last Suggested row has a 2px divider (58 pitch). No group headers.
Skeleton (57, .sb-skeleton gray-07 with shimmer): 32 circle at x 9, y 12 · bar 120×12 r3 at x 49, y 14 · bar 80×10 r3 at x 49, y 34 · chip bar 56×24 r7, right edge 376, y 16. Chip skeleton: 56×24 r7 in the chip slot.

6 · Footer · status line + Ask first · Transfer · Voicemail (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Nothing picked · all dim

Pick a colleague to transfer the call to

On shift · all live

Karla Sellers is on shift

On a call · voicemail only

Devon Park is on a call · voicemail only

Off shift · voicemail only

Jen Wu is off shift · voicemail only

Presence unknown (T10) · all live

Jen Wu · shift status unknown

Transient busy (Hold in flight) · all dim

Karla Sellers · waiting for the call to update…

Transfer hovered · tooltip

Karla Sellers is on shift

Verb	Style (decision 4)	Enabled when
Ask first	Tertiary .sb-btn--tertiary: gray-06 / gray-00 · hover gray-05 · disabled text gray-04	The pick is On shift (or presence is unknown) and nothing is transiently busy
Transfer	Primary .sb-btn--primary: blue-01 / --white · hover blue-04 · disabled gray-04 / global-white	Same as Ask first
Voicemail	Tertiary	Any pick, and nothing is transiently busy

Status line .tp-status: --t-paragraph gray-02, one line, always present so the verbs never move. The name is --t-paragraph-sb gray-00 and truncates first; the reason never does. It names the pick even when search hides the row.
Copy: “Pick a colleague to transfer the call to” · “Karla Sellers is on shift” · “Devon Park is on a call · voicemail only” · “Rita Alvarez is off shift · voicemail only” · “Rita Alvarez · shift status unknown” · “Karla Sellers · waiting for the call to update…”.
Verbs .tp-verbs: one row of three, 125×48 at x 17–142, 150–275, 283–408 (gap 8), r5, --t-action, label centred, no icons, one line, ellipsis. Focus-visible: inset 2px blue-01. Order and labels unchanged. 48 = Flutter's 12 padding + a 24 line (the DS .mf .sb-btn renders 40; UNVERIFIED on device).
Tooltips (desktop): “Ring {First} while the caller holds” · “Send the call to {First} now” · “Send the caller to voicemail for {First}” (never “their voicemail”: it files to the flow or store box, tagged for that person). Dimmed: “Pick a colleague first” · “{First} is on a call” · “{First} is off shift” · “Waiting for the call to update”.

7 · States · desktop 1440 × 900 · loaded, picked, filtered (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

T3 · Loaded, nothing picked · light

Shane Dusang02:41

Connected

Suggested (this customer's Salesperson, BDC agent and Manager, in slot order), then On shift, On a call, Off shift, A–Z in each. All three verbs dim; the status line prompts.

T3 · Dark

Shane Dusang02:41

Connected

Same panel, dark theme: panel #1E1E1E, hairlines #383838, hover #383838. The primary verb's text is --white (#1E1E1E), so it reads dark on blue. The card (#272727 with the popover glow) reads as a raised slab beside the panel.

T5 · Picked, Off shift

Shane Dusang02:41

Connected

Check on the row. Ask first and Transfer dim in place; Voicemail stays live; the status line says why.

T7 · Pick filtered out · “mar”

Shane Dusang02:41

Connected

Karla is picked but hidden by the search. The status line still names her and the verbs act on her. The highlight sits on the first result.

8 · Search and the keyboard · desktop 1440 × 900 (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

T6 · Searching “ka”

Shane Dusang02:41

Connected

Flat results, no Suggested block, the same presence sort. Every space-separated token must be in the full name. The highlight resets to the first row.

T8 · No match · “zed”

Shane Dusang02:41

Connected

“No one matches “{query}”” in --t-paragraph gray-02, centred in the list. Any pick is kept.

Keyboard-active row

Shane Dusang02:41

Connected

↓ / ↑ move the highlight (the hover fill, divider hidden); focus stays in search. Enter picks the highlighted row; nothing runs a verb from the list.

9 · Waiting, presence failed, a 768 window (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

T2 · Presence wait (≤ 1500 ms)

Shane Dusang02:41

Connected

Search is live at once. Skeleton rows fill the list. If the rep types during the wait, results render from the store at once, A–Z, with chip skeletons.

T10 · Presence failed, roster OK

Shane Dusang02:41

Connected

The notice band. Rows have no chips; Suggested stays on top, everyone else A–Z. All three verbs live for any pick (the server rings, then falls back to voicemail). The 10 s poll keeps retrying; on success the chips appear and the order is kept.

1440 × 768 window

Shane Dusang02:41

Connected

List 514 → 9.0 rows. The card keeps its y (98) when it steps aside.

10 · Every state (desktop and mobile) (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

#	State	Panel	Verbs
T0	Closed	—	—
T1	Opening	Desktop: slides in from the right (DetailPageRoute motion); a card that overlaps steps aside in step. Mobile: slides up; the card lifts to the top in step	—
T2	Presence wait (≤ 1500 ms)	Search live · skeleton rows · typing renders A–Z from the store with chip skeletons	All dim; prompt
T3	Loaded, nothing picked	Suggested, then On shift, On a call, Off shift	All dim; prompt
T4	Picked, On shift	Check on the row	All live
T5	Picked, On a call / Off shift	Check	Ask first and Transfer dim; Voicemail live; the status line says why
T6	Searching	Flat results, same presence sort; the highlight resets to the first row	—
T7	Pick filtered out	Row hidden; the status line still names them	Act on them
T8	No match	“No one matches “{query}”” centred	Keeps any pick
T9	Nobody to transfer to	“Nobody to transfer to” centred; search disabled	All dim
T10	Presence failed (roster OK)	Notice band; no chips; Suggested stays on top, everyone else A–Z; the 10 s poll retries	All three live for any pick
T11	Presence arrives after 1500 ms	Chips fade in (150 ms); order kept	Follow presence
T12	Roster failed / offline	The standard error view (“We couldn't complete that request” · Try again) or “No Network Connection”	All dim
T13	Transient busy (Hold in flight)	No change	All dim; “waiting for the call to update…”
T14	Lasting lock (409, followsConsult, a phase started elsewhere, reconnecting)	Auto-close; the card's line 2 gives the reason	—
T15	On hold while open	No change (the card goes WAITING orange)	Normal rule
T16	Silent refresh (10 s)	Chips crossfade in place (150 ms). Rows never reorder. Query, pick and scroll kept	Follow the pick's chip
T17	Picked person leaves the roster	Row collapses out; the pick clears	Prompt
T18	Verb pressed	The panel closes and the card returns (if it stepped aside), then the action runs (pop-then-act, as today)	—
T19	Call ends / unsubscribe	Auto-close	—
M1	Mobile, keyboard up	Footer hidden; the list takes its space	—

After a verb (callbacks and toasts unchanged): Ask first → S8 “Calling Karla Sellers...” (Transfer slot ✓, End × Cancel) · Transfer → S10 + toast “Transferring to {fullName}” · Voicemail → toast “Sent to voicemail for {fullName}” · a 409 → “Call state changed. Please try again.”

11 · Mobile · the ModalPage sheet under a lifted card (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

T3 · 390 × 844 · light

Shane Dusang02:41

Connected

T3 · Dark

Shane Dusang02:41

Connected

M1 · Keyboard up

Shane Dusang02:41

Connected

OS keyboard · ≈ 336

The footer hides and the list takes its space: y 293–508, 3.8 rows. Tapping a row picks it, dismisses the keyboard and brings the footer back.

T4 · Picked

Shane Dusang02:41

Connected

Verbs 114 wide at x 16–130, 138–252, 260–374. No tooltips; long-press is not used on the verbs.

375 × 667 · safe 20 / 0

Shane Dusang02:41

Connected

Card y 28–156; sheet top 164; 5.0 rows (2.5 with the keyboard up).

320 × 568

Shane Dusang02:41

Connected

Card 288 wide; verbs ≈ 91 each (“Voicemail” still fits); body ≈ 146.

Two surfaces: the card lifts to the top (safe area + 8: x 16–374, y 55–183 on a 390 × 844 phone) and floats above the barrier, not dimmed; drag is off. The sheet starts 8 below it (y 191) with its own grab handle and r5 top corners. Taps on the card go to the card.
Barrier: the ModalPage backdrop rgba(0,0,0,.54) (no exact DS token; the literal). The tap-to-close strip is y 0–191: ModalPageScaffold needs a top-strip parameter set to safe + 144 (today safe + 56).
Sheet .sb-transferpanel--sheet: --white, width 390 (max 640 centred on tablets) · grab 48×4 r2 gray-05 at y 197–201 · title bar y 203–243 (× at x 350–382) · search y 244–292 (field 358×32 at x 16–374; no autofocus; text keyboard, autocorrect off, capitalise words) · list y 293–697 = 404, 7.1 rows · footer y 697–844 (hairline + 16 + 24 + 8 + 48 + 16 + 34 safe area).
Rows at 390: avatar x 8–40 · chip right edge 342 · pick slot 350–382 · body ≈ 215.
Closes on: swipe down, a tap on the strip, Android back, plus everything desktop closes on.

12 · Behaviour, keyboard, screen reader (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Opens only from the Transfer key. No global shortcut. QA's guards still apply.
Closes on: × · the Transfer key · Esc when the query is empty (the first Esc clears it) · a click or tap outside (consumed) · any verb · the name tap · auto-close (T14, T19) · mobile swipe down, a tap on the strip, Android back · opening the keypad.

Desktop key	Result
(on open)	Focus goes to search, so you can just type
Typing	Filters with the standard token match (every space-separated token in the full name), with BasePickUserNotifier's debounce
↓ / ↑	Moves the highlight; stops at the ends; scrolls the row into view; focus stays in search
Enter	Picks the highlighted row. With exactly one result, that row is highlighted automatically
Space	Picks the highlighted row only when the field is empty; otherwise it types a space
Tab / Shift+Tab	search → Ask first → Transfer → Voicemail → ×, wrapping, skipping dimmed verbs
Enter / Space on a verb	Runs it. Nothing runs a verb from the list, so a double Enter can't blind-transfer
Esc	Clears the query, then closes. Focus goes back to what had it before (the card key if possible; UNVERIFIED)

Screen reader: the route is named “Transfer call” and announces “Transfer call. {n} people, {k} on shift.” (polite) · search = combobox, expanded, controls the list, label “Search people to transfer to” · rows = option, “Karla Sellers, Sales, Sales Manager, On shift” (Suggested: “Karla Sellers, Salesperson for Shane Dusang, On shift”), plus “selected” · the status line is a polite live region · dimmed verbs are announced as disabled with the tooltip reason as the hint.

13 · Presence and order (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Chip	In plain words	Computed from (unchanged)	Verbs
On shift	GO ONLINE is on and they have signed in to calling at least once. Transfer and Ask first will ring them	isWorking AND twilioUpdatedAt IS NOT NULL, not on a call	All
On a call	On a call or being rung right now. After a crashed call it can stay up to 2 h	inCallSince within 2 h; wins over everything	Voicemail only
Off shift	GO ONLINE is off, calling was never set up, or no directory entry	Everything else	Voicemail only

One signal: the avatar's online dot and round-robin ring are hidden here (showStatus: false). The dot reads only isWorking, can be a minute out of date and can contradict the chip; round robin has nothing to do with transfers.
Order: 1 · Suggested — up to 3 rows, this customer's Salesperson, BDC Agent and Manager in slot order (left out for unknown callers) · 2 · everyone else: On shift, On a call, Off shift, A–Z in each. Each person once. No group headers.
Built once, at the first of: presence arriving, 1500 ms, or a query change. Rebuilt only when the query changes; the 10 s refresh never reorders.
Candidates: active store users, minus you and minus the DAISI user. Known gaps: someone who declined this call still shows On shift (Transfer won't ring them); only the UI enforces the On shift gate.
Contrast flag (light): chip text ≈ 1.9:1 green and ≈ 2.3:1 orange (the existing chip colours). Once a row is picked, the status line repeats presence in gray-02 text (5.7:1); screen-reader labels carry it too.

14 · Engineering handoff (PRESCRIPTIVE — call card v3.2, CPO 2026-09-30)

Spike B first: DetailPageRoute(dismissOnTouchOutside: true) pushed with the root key — the outside click is consumed, popDetailsCallback doesn't fire (custom_navigator.dart ~282-285), Esc pops it, and the panel or SlideOut underneath stays mounted. Fallback: a PopupRoute with the same 424-right layout and CustomOverlay's barrier.
Route: root /transfer-call beside /system-dialog (space_router_delegate.dart:77-80), pushed from openTransferSheet() (phone_call_service.dart:368-393). Mobile: CustomModalBottomSheetRoute + ModalPageScaffold with the new top-strip parameter. Close by route identity (replace the pop-the-top-route in _dismissTransferSheet, dialog_service.dart ~101).
Card: DraggablePositionedWidget keeps the saved position separate from the rendered one, exposes ValueListenable<Rect>, and gains stepAside(Offset, duration, curve) / restore() — drag off while aside, never persisted. The panel publishes its rect on mount and on window-metrics change; if the card overlaps it, the card animates to x = panel left − 16 − 360 (y kept) in step with the route. The default anchor stays (desktop_app.dart:197-206).
TransferPanel: DetailPageAppBar exactly as Customer Details uses it · the search band (debounced, max 100) · the notice band · the list · the footer. No dock spacer.
Rows: add showStatus to UserInfoView (user_info_view.dart:196-201; precedent at :102) · zero padding · disableSelectedHighlight · ChipItemView, then a fixed 32 check slot (user_picker_overlays.dart:218-229).
Notifier (transfer_sheet.dart:44-115): roster from the store at once; exclude self and DAISI; subscribe to store events; token match with debounce (base_pick_user_notifier.dart:209-214); order built once; presence loading | loaded | error (error lifts the On shift gate); keep the pick by id. Suggested can ship separately (UNVERIFIED that PhoneCallService reaches the data without a fetch).
Transfer key: a toggle; blue and live while open even when isBusy; “Close transfer”; expanded; auto-close hooks for lasting locks. Footer: status line as a live region; verbs always rendered, 48 tall (drop the horizontal-8 override at transfer_sheet.dart:307-312); Transfer = button.primary. DAISI chat panel: collapse it while Transfer is open (same 424 column; overlap UNVERIFIED). Retire TransferSheet and the /system-dialog path for Transfer.