@design.estate/dees-catalog 11.2.2 → 12.1.0

package/ts_web/elements/00group-harness/dees-harness-session-list/dees-harness-session-list.ts

@@ -27,7 +27,8 @@ import type {
   IHarnessSessionMeta,
   THarnessItemMoveSource,
   THarnessResourceAssociationInteractionSource,
-  THarnessResourceAssociationRequestDetail,
+  THarnessResourceAssociateDetail,
+  THarnessResourceAssociateMode,
   THarnessResourceContextSource,
 } from '../interfaces.js';
 import { harnessFormatRelativeTime } from '../harness.helpers.js';
@@ -36,6 +37,12 @@ import '../../00group-utility/dees-icon/dees-icon.js';
 const { repeat } = directives;
 const dragAutoScrollMaxPixelsPerSecond = 900;
 const dragThresholdPixels = 4;
+/**
+ * Share of a row's height, centred, that attaches instead of inserting: the centre half of the
+ * row attaches and the outer quarters reposition, so reordering a resource past a conversation
+ * never turns into an attachment.
+ */
+const attachCentreBandRatio = 0.5;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -98,7 +105,9 @@ interface IPendingResourceAssociationRequest {
   resourceTitle: string;
   fromTarget: IHarnessSessionListItemRef | null;
   toTarget: IHarnessSessionListItemRef | null;
-  intent: THarnessResourceAssociationRequestDetail['intent'];
+  mode: THarnessResourceAssociateMode;
+  /** The target set the request would produce, compared against the controlled set on update. */
+  expectedTargets: IHarnessSessionListItemRef[];
 }
 
 interface IKeyboardMoveFocus {
@@ -118,10 +127,13 @@ type TSectionRenderEntry =
  *
  * Sessions and host resources are peers in ONE ordered list: a resource row
  * can be dragged anywhere a session can, including between sessions and into
- * or out of groups. Attaching a resource to a session is a separate explicit
- * host action (`requestResourceAssociation()` /
- * `harness-resource-association-request`) that never moves a row; the
- * association only renders as a marker on the resource row.
+ * or out of groups. A resource can also be attached to several items at once.
+ * Attaching happens either through `requestResourceAssociation()` from a host
+ * menu, or by releasing a resource drag on the centre half of an eligible row;
+ * the outer quarters of that row, and every gap between rows, stay purely
+ * positional. Attaching never moves a row, and the association renders only as
+ * markers on the resource row. Every change is requested through
+ * `harness-resource-associate`; the host owns the controlled set.
  *
  * The component never mutates its inputs: reordering emits `harness-item-move`,
  * the "new group" button emits `harness-group-create-request`, and
@@ -170,8 +182,10 @@ export class DeesHarnessSessionList extends DeesElement {
   accessor selectedResourceId = '';
 
   /**
-   * Serializable attach/reassign targets for host menus. A missing entry leaves
-   * the resource unrestricted; an empty array means no eligible target.
+   * Serializable association targets, honoured by host menus and by the drop
+   * affordance alike: an ineligible row offers no attachment and commits
+   * nothing. A missing entry leaves the resource unrestricted; an empty array
+   * means no eligible target.
    */
   @property({ attribute: false })
   accessor eligibleTargetsByResourceId: Record<string, IHarnessSessionListItemRef[]> = {};
@@ -185,6 +199,13 @@ export class DeesHarnessSessionList extends DeesElement {
   @state()
   accessor dropSlot: IDropSlot | undefined = undefined;
 
+  /**
+   * The row a resource drag would attach to. Mutually exclusive with `dropSlot`: a pointer is
+   * either inserting between rows or attaching to one, never both.
+   */
+  @state()
+  accessor dropAttachTarget: IHarnessSessionListItemRef | undefined = undefined;
+
   @state()
   accessor draggedItemHeight = 0;
 
@@ -699,8 +720,8 @@ export class DeesHarnessSessionList extends DeesElement {
         white-space: nowrap;
       }
 
-      /* Decorative marker for the controlled association; never interactive. */
-      .resourceAttachment {
+      /* Decorative markers for the controlled associations; never interactive. */
+      .resourceAttachments {
         display: flex;
         min-width: 0;
         align-items: center;
@@ -711,10 +732,49 @@ export class DeesHarnessSessionList extends DeesElement {
         font-weight: 600;
       }
 
-      .resourceAttachment dees-icon {
+      .resourceAttachment {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 2px;
+      }
+
+      /* Past two names the row keeps one line and the title carries the full list. */
+      .resourceAttachmentOverflow {
+        flex: 0 0 auto;
+      }
+
+      .resourceAttachments dees-icon {
         flex: 0 0 auto;
       }
 
+      /*
+       * A drop on the centre of a row attaches to it. The ring is the whole affordance: no gap
+       * opens, because nothing is being inserted.
+       */
+      .item.attachTarget,
+      .resourceRow.attachTarget {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -1px;
+        background: var(--dees-color-nav-selected);
+      }
+
+      /* Absolutely positioned so appearing mid-drag cannot reflow the row under the pointer. */
+      .attachBadge {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        display: grid;
+        place-items: center;
+        width: 20px;
+        height: 20px;
+        transform: translateY(-50%);
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-accent-primary);
+        color: var(--dees-color-bg-primary);
+        pointer-events: none;
+      }
+
       .resourceAttachmentName {
         min-width: 0;
         overflow: hidden;
@@ -957,23 +1017,32 @@ export class DeesHarnessSessionList extends DeesElement {
    * First valid record wins; unknown records, self-references and duplicates
    * remain untouched but are not projected. Keyed by resource id.
    */
-  private get acceptedResourceAssociations(): Map<string, IHarnessSessionListItemRef> {
+  private get acceptedResourceAssociations(): Map<string, IHarnessSessionListItemRef[]> {
     const resourcesById = this.resourcesById;
     const itemsByKey = this.itemsByKey;
-    const result = new Map<string, IHarnessSessionListItemRef>();
+    const result = new Map<string, IHarnessSessionListItemRef[]>();
     for (const association of this.resourceAssociations) {
-      if (
-        !association.target
-        || !resourcesById.has(association.resourceId)
-        || !itemsByKey.has(itemKey(association.target))
-        || sameItem(association.target, { kind: 'resource', id: association.resourceId })
-        || result.has(association.resourceId)
-      ) continue;
-      result.set(association.resourceId, itemRef(association.target));
+      if (!association || !resourcesById.has(association.resourceId)) continue;
+      const targets = result.get(association.resourceId) ?? [];
+      for (const target of association.targets ?? []) {
+        if (
+          !target
+          || !itemsByKey.has(itemKey(target))
+          || sameItem(target, { kind: 'resource', id: association.resourceId })
+          || targets.some((candidate) => sameItem(candidate, target))
+        ) continue;
+        targets.push(itemRef(target));
+      }
+      result.set(association.resourceId, targets);
     }
     return result;
   }
 
+  /** The controlled attachments of one resource, in declaration order; empty when unattached. */
+  private resourceTargets(resourceIdArg: string): IHarnessSessionListItemRef[] {
+    return this.acceptedResourceAssociations.get(resourceIdArg) ?? [];
+  }
+
   private get acceptedResources(): IHarnessResourceMeta[] {
     return [...this.resourcesById.values()];
   }
@@ -1128,58 +1197,91 @@ export class DeesHarnessSessionList extends DeesElement {
     this.shadowRoot?.querySelector<HTMLInputElement>('.searchRow input')?.focus();
   }
 
+  /**
+   * Requests one association change. With no explicit mode the list infers it from the controlled
+   * set: an unattached resource attaches, a singly attached one moves, and a resource with several
+   * attachments is refused — only the host knows which of them the user meant, so it must pass a
+   * mode (and a `fromTarget` for `move` and `detach`).
+   */
   public requestResourceAssociation(
     resourceIdArg: string,
     toTargetArg: IHarnessSessionListItemRef | null,
     sourceArg: THarnessResourceAssociationInteractionSource = 'action',
+    modeArg?: THarnessResourceAssociateMode,
+    fromTargetArg?: IHarnessSessionListItemRef | null,
   ): boolean {
     const resource = this.resourcesById.get(resourceIdArg);
     if (!resource) return false;
-    const fromTarget = this.acceptedResourceAssociations.get(resourceIdArg) ?? null;
-    if (sameItem(fromTarget, toTargetArg)) return false;
+    const currentTargets = this.resourceTargets(resourceIdArg);
+    const toTarget = toTargetArg === null || toTargetArg === undefined ? null : itemRef(toTargetArg);
     if (
-      toTargetArg !== null
+      toTarget !== null
       && (
-        !this.itemsByKey.has(itemKey(toTargetArg))
-        || sameItem(toTargetArg, { kind: 'resource', id: resourceIdArg })
-        || !this.isResourceTargetEligible(resourceIdArg, toTargetArg)
+        !this.itemsByKey.has(itemKey(toTarget))
+        || sameItem(toTarget, { kind: 'resource', id: resourceIdArg })
+        || !this.isResourceTargetEligible(resourceIdArg, toTarget)
       )
     ) return false;
-    if (toTargetArg === null && fromTarget === null) return false;
-    const toTarget = toTargetArg === null ? null : itemRef(toTargetArg);
-    const detail: THarnessResourceAssociationRequestDetail = fromTarget === null
-      ? {
-          intent: 'attach',
-          resource,
-          fromTarget: null,
-          toTarget: toTarget!,
-          source: sourceArg,
-        }
-      : toTarget === null
-        ? {
-            intent: 'detach',
-            resource,
-            fromTarget,
-            toTarget: null,
-            source: sourceArg,
-          }
-        : {
-            intent: 'reassign',
-            resource,
-            fromTarget,
-            toTarget,
-            source: sourceArg,
-          };
+
+    const mode = modeArg ?? (
+      toTarget === null
+        ? 'detach'
+        : currentTargets.length === 0
+          ? 'attach'
+          : currentTargets.length === 1
+            ? 'move'
+            : undefined
+    );
+    // An ambiguous request is refused rather than guessed at.
+    if (!mode) return false;
+
+    const explicitFrom = fromTargetArg === null || fromTargetArg === undefined
+      ? undefined
+      : itemRef(fromTargetArg);
+    const fromTarget = explicitFrom
+      ?? (currentTargets.length === 1 ? currentTargets[0]! : undefined);
+
+    if (mode === 'attach' || mode === 'attach-additional') {
+      if (toTarget === null) return false;
+      if (currentTargets.some((candidate) => sameItem(candidate, toTarget))) return false;
+      if (mode === 'attach' && currentTargets.length > 0) return false;
+      if (mode === 'attach-additional' && currentTargets.length === 0) return false;
+    }
+    if (mode === 'move' || mode === 'detach') {
+      if (!fromTarget) return false;
+      if (!currentTargets.some((candidate) => sameItem(candidate, fromTarget))) return false;
+      if (mode === 'move') {
+        if (toTarget === null || sameItem(fromTarget, toTarget)) return false;
+        if (currentTargets.some((candidate) => sameItem(candidate, toTarget))) return false;
+      }
+      if (mode === 'detach' && toTarget !== null) return false;
+    }
+
+    const detail = {
+      mode,
+      resource,
+      fromTarget: mode === 'attach' || mode === 'attach-additional' ? null : fromTarget!,
+      toTarget: mode === 'detach' ? null : toTarget!,
+      source: sourceArg,
+    } as THarnessResourceAssociateDetail;
+
+    const expectedTargets = mode === 'attach' || mode === 'attach-additional'
+      ? [...currentTargets, toTarget!]
+      : mode === 'detach'
+        ? currentTargets.filter((candidate) => !sameItem(candidate, fromTarget!))
+        : currentTargets.map((candidate) => (sameItem(candidate, fromTarget!) ? toTarget! : candidate));
+
     this.pendingResourceAssociationRequest = {
       resourceId: resource.id,
       resourceTitle: resource.title || resource.id,
-      fromTarget,
-      toTarget,
-      intent: detail.intent,
+      fromTarget: detail.fromTarget,
+      toTarget: detail.toTarget,
+      mode,
+      expectedTargets,
     };
     this.moveAnnouncement = this.resourceAssociationAnnouncement(detail, false);
     this.dispatchEvent(
-      new CustomEvent('harness-resource-association-request', {
+      new CustomEvent('harness-resource-associate', {
         detail,
         bubbles: true,
         composed: true,
@@ -1439,7 +1541,7 @@ export class DeesHarnessSessionList extends DeesElement {
                   entry.item.resource,
                   groupIdArg,
                   entry.logicalIndex,
-                  associations.get(entry.item.id) ?? null,
+                  associations.get(entry.item.id) ?? [],
                 ),
         )}
         ${this.draggingItem && sortableArg && !hasPlaceholder && this.sortableItems(itemsArg).length === 0
@@ -1519,6 +1621,10 @@ export class DeesHarnessSessionList extends DeesElement {
           session.id === this.selectedSessionId ? 'selected' : ''
         } ${
           sameItem(this.draggingItem, { kind: 'session', id: session.id }) ? 'dragging' : ''
+        } ${
+          sameItem(this.dropAttachTarget ?? null, { kind: 'session', id: session.id })
+            ? 'attachTarget'
+            : ''
         }"
         data-session-id=${session.id}
         data-item-kind="session"
@@ -1526,6 +1632,9 @@ export class DeesHarnessSessionList extends DeesElement {
         data-drop-group-id=${groupId ?? ''}
         data-drop-index=${dropIndex}
         data-drop-kind=${index < 0 ? 'slot' : 'card'}
+        data-attach-target=${
+          sameItem(this.dropAttachTarget ?? null, { kind: 'session', id: session.id }) ? 'true' : ''
+        }
         @dblclick=${(event: MouseEvent) => {
           if (this.eventTargetsExpandToggle(event) || this.eventTargetsDragHandle(event)
             || this.eventTargetsSessionActions(event)) return;
@@ -1546,6 +1655,9 @@ export class DeesHarnessSessionList extends DeesElement {
           );
         }}
       >
+        ${sameItem(this.dropAttachTarget ?? null, { kind: 'session', id: session.id })
+          ? html`<span class="attachBadge" aria-hidden="true"><dees-icon icon="lucide:Link" iconSize="12"></dees-icon></span>`
+          : ''}
         <div class="itemInner">
           <div class="itemHeader ${draggable ? 'draggable' : ''}">
             ${draggable
@@ -1634,13 +1746,17 @@ export class DeesHarnessSessionList extends DeesElement {
     resourceArg: IHarnessResourceMeta,
     groupIdArg: string | null,
     indexArg: number,
-    attachedTarget: IHarnessSessionListItemRef | null,
+    attachedTargets: IHarnessSessionListItemRef[],
   ): TemplateResult {
     const selected = resourceArg.id === this.selectedResourceId;
     const draggable = indexArg >= 0;
     const dragging = sameItem(this.draggingItem, { kind: 'resource', id: resourceArg.id });
     const contextOpen = resourceArg.id === this.resourceContextResourceId;
-    const attachedTitle = attachedTarget ? this.itemTitleFor(attachedTarget) : '';
+    const attachedTitles = attachedTargets.map((target) => this.itemTitleFor(target));
+    // Two names read at a glance; beyond that a count keeps the row one line, with every name
+    // still reachable through the title.
+    const visibleAttachments = attachedTargets.slice(0, 2);
+    const overflowAttachments = attachedTargets.length - visibleAttachments.length;
     const title = resourceArg.title || resourceArg.id;
     const projectLabel = resourceArg.projectLabel?.trim() ?? '';
     const dropIndex = indexArg < 0 ? 0 : indexArg;
@@ -1648,18 +1764,28 @@ export class DeesHarnessSessionList extends DeesElement {
       <article
         class="resourceRow ${selected ? 'selected' : ''} ${draggable ? 'draggable' : ''} ${
           dragging ? 'dragging' : ''
+        } ${
+          sameItem(this.dropAttachTarget ?? null, { kind: 'resource', id: resourceArg.id })
+            ? 'attachTarget'
+            : ''
         }"
         data-resource-id=${resourceArg.id}
         data-item-kind="resource"
         data-item-id=${resourceArg.id}
-        data-resource-target=${attachedTarget ? `${attachedTarget.kind}:${attachedTarget.id}` : ''}
+        data-resource-target=${attachedTargets.map((target) => `${target.kind}:${target.id}`).join(' ')}
+        data-resource-target-count=${attachedTargets.length}
         data-drop-group-id=${groupIdArg ?? ''}
         data-drop-index=${dropIndex}
         data-drop-kind=${indexArg < 0 ? 'slot' : 'card'}
+        data-attach-target=${
+          sameItem(this.dropAttachTarget ?? null, { kind: 'resource', id: resourceArg.id })
+            ? 'true'
+            : ''
+        }
         @dblclick=${(event: MouseEvent) => {
           event.stopPropagation();
           if (this.eventTargetsResourceControl(event) || this.eventTargetsDragHandle(event)) return;
-          this.emitResource('harness-resource-open', resourceArg, attachedTarget);
+          this.emitResource('harness-resource-open', resourceArg, attachedTargets);
         }}
         @contextmenu=${(event: MouseEvent) => {
           event.preventDefault();
@@ -1670,9 +1796,12 @@ export class DeesHarnessSessionList extends DeesElement {
           )) as HTMLElement | undefined)
             ?? (event.currentTarget as HTMLElement).querySelector<HTMLElement>('.resourcePrimary')
             ?? event.currentTarget as HTMLElement;
-          this.emitResourceContext(event, resourceArg, attachedTarget, 'pointer', focusTarget);
+          this.emitResourceContext(event, resourceArg, attachedTargets, 'pointer', focusTarget);
         }}
       >
+        ${sameItem(this.dropAttachTarget ?? null, { kind: 'resource', id: resourceArg.id })
+          ? html`<span class="attachBadge" aria-hidden="true"><dees-icon icon="lucide:Link" iconSize="12"></dees-icon></span>`
+          : ''}
         ${draggable
           ? this.renderDragHandle(
               { kind: 'resource', id: resourceArg.id },
@@ -1685,14 +1814,14 @@ export class DeesHarnessSessionList extends DeesElement {
           class="resourcePrimary"
           type="button"
           aria-current=${selected ? 'true' : 'false'}
-          @click=${() => this.emitResource('harness-resource-select', resourceArg, attachedTarget)}
+          @click=${() => this.emitResource('harness-resource-select', resourceArg, attachedTargets)}
           @keydown=${(event: KeyboardEvent) => {
             if (event.key === 'Enter') {
               event.preventDefault();
-              this.emitResource('harness-resource-open', resourceArg, attachedTarget);
+              this.emitResource('harness-resource-open', resourceArg, attachedTargets);
               return;
             }
-            this.handleResourceContextKey(event, resourceArg, attachedTarget);
+            this.handleResourceContextKey(event, resourceArg, attachedTargets);
           }}
         >
           <dees-icon
@@ -1712,12 +1841,26 @@ export class DeesHarnessSessionList extends DeesElement {
                   : ''
               }
             </span>
-            ${attachedTarget
+            ${attachedTargets.length
               ? html`
-                  <span class="resourceAttachment" title=${`Attached to ${attachedTitle}`}>
+                  <span class="resourceAttachments" title=${`Attached to ${attachedTitles.join(', ')}`}>
                     <dees-icon aria-hidden="true" icon="lucide:Link" iconSize="10"></dees-icon>
                     <span class="visuallyHidden">Attached to </span>
-                    <span class="resourceAttachmentName">${attachedTitle}</span>
+                    ${repeat(
+                      visibleAttachments,
+                      (target) => itemKey(target),
+                      (target, index) => html`
+                        <span class="resourceAttachment">
+                          <span class="resourceAttachmentName">${this.itemTitleFor(target)}</span>
+                          ${index < visibleAttachments.length - 1 || overflowAttachments > 0
+                            ? html`<span aria-hidden="true">,</span>`
+                            : ''}
+                        </span>
+                      `,
+                    )}
+                    ${overflowAttachments > 0
+                      ? html`<span class="resourceAttachmentOverflow">+${overflowAttachments}</span>`
+                      : ''}
                   </span>
                 `
               : ''}
@@ -1736,13 +1879,13 @@ export class DeesHarnessSessionList extends DeesElement {
             this.emitResourceContext(
               event,
               resourceArg,
-              attachedTarget,
+              attachedTargets,
               'action',
               event.currentTarget as HTMLElement,
             );
           }}
           @keydown=${(event: KeyboardEvent) => {
-            this.handleResourceContextKey(event, resourceArg, attachedTarget);
+            this.handleResourceContextKey(event, resourceArg, attachedTargets);
           }}
         >
           <dees-icon icon="lucide:Ellipsis" iconSize="15"></dees-icon>
@@ -1971,14 +2114,31 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private setDropSlot(groupIdArg: string | null, indexArg: number): void {
     const current = this.dropSlot;
-    if (current && current.groupId === groupIdArg && current.index === indexArg) return;
+    if (
+      current
+      && current.groupId === groupIdArg
+      && current.index === indexArg
+      && !this.dropAttachTarget
+    ) return;
+    this.dropAttachTarget = undefined;
     const previousRects = this.captureRowRects();
     const generation = ++this.reflowGeneration;
     this.dropSlot = { groupId: groupIdArg, index: indexArg };
     void this.animateRowReflow(previousRects, generation);
   }
 
+  private setDropAttachTarget(targetArg: IHarnessSessionListItemRef): void {
+    if (sameItem(this.dropAttachTarget ?? null, targetArg) && !this.dropSlot) return;
+    const previousRects = this.captureRowRects();
+    const generation = ++this.reflowGeneration;
+    this.dropAttachTarget = itemRef(targetArg);
+    // An attaching pointer closes any open insertion gap, so the list stops offering both.
+    this.dropSlot = undefined;
+    void this.animateRowReflow(previousRects, generation);
+  }
+
   private clearDropSlot(): void {
+    this.dropAttachTarget = undefined;
     if (!this.dropSlot) return;
     const previousRects = this.captureRowRects();
     const generation = ++this.reflowGeneration;
@@ -2090,12 +2250,46 @@ export class DeesHarnessSessionList extends DeesElement {
     const baseIndex = Number(target.dataset.dropIndex);
     const groupId = target.dataset.dropGroupId || null;
     const rect = target.getBoundingClientRect();
+    const attachTarget = this.attachTargetForDrop(target, pointerY, rect);
+    if (attachTarget) {
+      this.setDropAttachTarget(attachTarget);
+      return;
+    }
     const index = target.dataset.dropKind === 'card' && pointerY >= rect.top + rect.height / 2
       ? baseIndex + 1
       : baseIndex;
     this.setDropSlot(groupId, index);
   }
 
+  /**
+   * A resource released on the centre of an eligible row attaches to it. Only a row qualifies —
+   * never an insertion slot — and only while a resource is the dragged item. A resource that is
+   * already attached to several items is excluded: a drag cannot name which attachment would
+   * move, so such a row offers no affordance and the drop stays purely positional. Moving one of
+   * several attachments is a menu action.
+   */
+  private attachTargetForDrop(
+    targetArg: HTMLElement,
+    pointerYArg: number,
+    rectArg: DOMRect,
+  ): IHarnessSessionListItemRef | undefined {
+    const dragging = this.draggingItem;
+    if (!dragging || dragging.kind !== 'resource') return undefined;
+    if (this.resourceTargets(dragging.id).length > 1) return undefined;
+    if (targetArg.dataset.dropKind !== 'card') return undefined;
+    const kind = targetArg.dataset.itemKind;
+    const id = targetArg.dataset.itemId;
+    if ((kind !== 'session' && kind !== 'resource') || !id) return undefined;
+    const candidate: IHarnessSessionListItemRef = { kind, id };
+    if (sameItem(candidate, dragging)) return undefined;
+    if (!this.isResourceTargetEligible(dragging.id, candidate)) return undefined;
+    // The ratio is the whole band, so each side of the centre gets half of it.
+    const halfBand = (rectArg.height * attachCentreBandRatio) / 2;
+    const centre = rectArg.top + rectArg.height / 2;
+    if (Math.abs(pointerYArg - centre) > halfBand) return undefined;
+    return candidate;
+  }
+
   private get scrollContainer(): HTMLElement | undefined {
     return this.shadowRoot?.querySelector<HTMLElement>('.list') ?? undefined;
   }
@@ -2282,6 +2476,69 @@ export class DeesHarnessSessionList extends DeesElement {
     return eligible === undefined || eligible.some((candidate) => sameItem(candidate, targetArg));
   }
 
+  private reconcilePendingResourceAssociation(): void {
+    const pending = this.pendingResourceAssociationRequest;
+    if (!pending) return;
+    if (!this.resourcesById.has(pending.resourceId)) {
+      this.pendingResourceAssociationRequest = undefined;
+      return;
+    }
+    const current = this.resourceTargets(pending.resourceId);
+    const sameSet = (leftArg: IHarnessSessionListItemRef[], rightArg: IHarnessSessionListItemRef[]): boolean =>
+      leftArg.length === rightArg.length
+      && leftArg.every((candidate) => rightArg.some((other) => sameItem(candidate, other)));
+    if (!sameSet(current, pending.expectedTargets)) {
+      // Still the pre-request set: the host has not answered yet, so keep waiting.
+      if (sameSet(current, this.pendingRequestPriorTargets(pending))) return;
+      const controlledTitle = current.length
+        ? current.map((target) => this.itemTitleFor(target)).join(', ')
+        : 'unattached';
+      this.moveAnnouncement = `Association request for ${pending.resourceTitle} was not applied; controlled attachments are ${controlledTitle}.`;
+      this.pendingResourceAssociationRequest = undefined;
+      return;
+    }
+    const fromTitle = pending.fromTarget ? this.itemTitleFor(pending.fromTarget) : '';
+    const toTitle = pending.toTarget ? this.itemTitleFor(pending.toTarget) : '';
+    this.moveAnnouncement = pending.mode === 'attach' || pending.mode === 'attach-additional'
+      ? `${pending.resourceTitle} is now attached to ${toTitle}.`
+      : pending.mode === 'detach'
+        ? `${pending.resourceTitle} is now detached from ${fromTitle}.`
+        : `${pending.resourceTitle} is now moved from ${fromTitle} to ${toTitle}.`;
+    this.pendingResourceAssociationRequest = undefined;
+  }
+
+  /** The set the request started from, reconstructed from the expected set and the request. */
+  private pendingRequestPriorTargets(
+    pendingArg: IPendingResourceAssociationRequest,
+  ): IHarnessSessionListItemRef[] {
+    if (pendingArg.mode === 'attach' || pendingArg.mode === 'attach-additional') {
+      return pendingArg.expectedTargets.filter((candidate) => !sameItem(candidate, pendingArg.toTarget));
+    }
+    if (pendingArg.mode === 'detach') {
+      return [...pendingArg.expectedTargets, pendingArg.fromTarget!];
+    }
+    return pendingArg.expectedTargets.map(
+      (candidate) => (sameItem(candidate, pendingArg.toTarget) ? pendingArg.fromTarget! : candidate),
+    );
+  }
+
+  private resourceAssociationAnnouncement(
+    detailArg: THarnessResourceAssociateDetail,
+    completedArg: boolean,
+  ): string {
+    const resourceTitle = detailArg.resource.title || detailArg.resource.id;
+    const fromTitle = detailArg.fromTarget ? this.itemTitleFor(detailArg.fromTarget) : '';
+    const toTitle = detailArg.toTarget ? this.itemTitleFor(detailArg.toTarget) : '';
+    const verb = completedArg ? 'completed' : 'requested';
+    return detailArg.mode === 'attach'
+      ? `Attach ${verb} for ${resourceTitle} to ${toTitle}.`
+      : detailArg.mode === 'attach-additional'
+        ? `Additional attach ${verb} for ${resourceTitle} to ${toTitle}.`
+        : detailArg.mode === 'detach'
+          ? `Detach ${verb} for ${resourceTitle} from ${fromTitle}.`
+          : `Move ${verb} for ${resourceTitle} from ${fromTitle} to ${toTitle}.`;
+  }
+
   private itemTitleFor(refArg: IHarnessSessionListItemRef): string {
     return this.itemsByKey.get(itemKey(refArg))?.title ?? refArg.id;
   }
@@ -2294,11 +2551,11 @@ export class DeesHarnessSessionList extends DeesElement {
   private emitResource(
     nameArg: string,
     resourceArg: IHarnessResourceMeta,
-    targetArg: IHarnessSessionListItemRef | null,
+    targetsArg: IHarnessSessionListItemRef[],
   ): void {
     const detail: IHarnessResourceEventDetail = {
       resource: resourceArg,
-      target: targetArg,
+      targets: targetsArg,
     };
     this.dispatchEvent(new CustomEvent(nameArg, { detail, bubbles: true, composed: true }));
   }
@@ -2306,7 +2563,7 @@ export class DeesHarnessSessionList extends DeesElement {
   private handleResourceContextKey(
     eventArg: KeyboardEvent,
     resourceArg: IHarnessResourceMeta,
-    targetArg: IHarnessSessionListItemRef | null,
+    targetsArg: IHarnessSessionListItemRef[],
   ): void {
     if (!(eventArg.key === 'ContextMenu' || (eventArg.key === 'F10' && eventArg.shiftKey))) return;
     eventArg.preventDefault();
@@ -2314,7 +2571,7 @@ export class DeesHarnessSessionList extends DeesElement {
     this.emitResourceContext(
       eventArg,
       resourceArg,
-      targetArg,
+      targetsArg,
       'keyboard',
       eventArg.currentTarget as HTMLElement,
     );
@@ -2323,7 +2580,7 @@ export class DeesHarnessSessionList extends DeesElement {
   private emitResourceContext(
     eventArg: MouseEvent | KeyboardEvent,
     resourceArg: IHarnessResourceMeta,
-    targetArg: IHarnessSessionListItemRef | null,
+    targetsArg: IHarnessSessionListItemRef[],
     sourceArg: THarnessResourceContextSource,
     focusTargetArg: HTMLElement,
   ): void {
@@ -2338,7 +2595,7 @@ export class DeesHarnessSessionList extends DeesElement {
     ].find((className) => focusTargetArg.classList.contains(className)) ?? 'resourcePrimary';
     const detail: IHarnessResourceContextDetail = {
       resource: resourceArg,
-      target: targetArg,
+      targets: targetsArg,
       clientX: sourceArg === 'pointer' && eventArg instanceof MouseEvent
         ? eventArg.clientX
         : rect.left + rect.width / 2,
@@ -2347,10 +2604,12 @@ export class DeesHarnessSessionList extends DeesElement {
         : rect.bottom,
       source: sourceArg,
       originalEvent: eventArg,
-      requestAssociation: (toTargetArg) => this.requestResourceAssociation(
+      requestAssociation: (toTargetArg, modeArg, fromTargetArg) => this.requestResourceAssociation(
         resourceArg.id,
         toTargetArg,
         sourceArg === 'keyboard' ? 'keyboard' : 'action',
+        modeArg,
+        fromTargetArg,
       ),
       close: () => this.closeResourceContext(contextGeneration),
     };
@@ -2387,47 +2646,6 @@ export class DeesHarnessSessionList extends DeesElement {
     this.resourceContextFocusClass = '';
   }
 
-  private reconcilePendingResourceAssociation(): void {
-    const pending = this.pendingResourceAssociationRequest;
-    if (!pending) return;
-    if (!this.resourcesById.has(pending.resourceId)) {
-      this.pendingResourceAssociationRequest = undefined;
-      return;
-    }
-    const currentTarget = this.acceptedResourceAssociations.get(pending.resourceId) ?? null;
-    if (!sameItem(currentTarget, pending.toTarget) && !(currentTarget === null && pending.toTarget === null)) {
-      if (!sameItem(currentTarget, pending.fromTarget) && !(currentTarget === null && pending.fromTarget === null)) {
-        const controlledTitle = currentTarget ? this.itemTitleFor(currentTarget) : 'unattached';
-        this.moveAnnouncement = `Association request for ${pending.resourceTitle} was not applied; controlled association is ${controlledTitle}.`;
-        this.pendingResourceAssociationRequest = undefined;
-      }
-      return;
-    }
-    const fromTitle = pending.fromTarget ? this.itemTitleFor(pending.fromTarget) : '';
-    const toTitle = pending.toTarget ? this.itemTitleFor(pending.toTarget) : '';
-    this.moveAnnouncement = pending.intent === 'attach'
-      ? `${pending.resourceTitle} is now attached to ${toTitle}.`
-      : pending.intent === 'detach'
-        ? `${pending.resourceTitle} is now detached from ${fromTitle}.`
-        : `${pending.resourceTitle} is now reassigned from ${fromTitle} to ${toTitle}.`;
-    this.pendingResourceAssociationRequest = undefined;
-  }
-
-  private resourceAssociationAnnouncement(
-    detailArg: THarnessResourceAssociationRequestDetail,
-    completedArg: boolean,
-  ): string {
-    const resourceTitle = detailArg.resource.title || detailArg.resource.id;
-    const fromTitle = detailArg.fromTarget ? this.itemTitleFor(detailArg.fromTarget) : '';
-    const toTitle = detailArg.toTarget ? this.itemTitleFor(detailArg.toTarget) : '';
-    const verb = completedArg ? 'completed' : 'requested';
-    return detailArg.intent === 'attach'
-      ? `Attach ${verb} for ${resourceTitle} to ${toTitle}.`
-      : detailArg.intent === 'detach'
-        ? `Detach ${verb} for ${resourceTitle} from ${fromTitle}.`
-        : `Reassign ${verb} for ${resourceTitle} from ${fromTitle} to ${toTitle}.`;
-  }
-
   private async animateRowReflow(
     previousRectsArg: Map<string, DOMRect>,
     generationArg: number,
@@ -2470,7 +2688,12 @@ export class DeesHarnessSessionList extends DeesElement {
   private finishPointerDrag(commitArg: boolean): void {
     const gesture = this.pointerDragGesture;
     if (!gesture) return;
-    const moveDetail = (commitArg && gesture.phase === 'active' && this.dropSlot)
+    const committing = commitArg && gesture.phase === 'active';
+    // A centred release attaches instead of reordering; the two are never both pending.
+    const attachTarget = committing && gesture.item.kind === 'resource'
+      ? this.dropAttachTarget
+      : undefined;
+    const moveDetail = (committing && !attachTarget && this.dropSlot)
       ? this.createMoveDetail(gesture.item, this.dropSlot.groupId, this.dropSlot.index, 'pointer')
       : undefined;
     this.pointerDragGesture = undefined;
@@ -2491,6 +2714,7 @@ export class DeesHarnessSessionList extends DeesElement {
     this.draggingItem = undefined;
     this.draggedItemHeight = 0;
     this.dropSlot = undefined;
+    this.dropAttachTarget = undefined;
     try {
       if (gesture.handle.hasPointerCapture(gesture.pointerId)) {
         gesture.handle.releasePointerCapture(gesture.pointerId);
@@ -2498,6 +2722,19 @@ export class DeesHarnessSessionList extends DeesElement {
     } catch {
       // Capture may already be released or the handle may have disconnected.
     }
+    if (attachTarget) {
+      // Only an unattached or singly attached resource can reach this point, so the mode follows
+      // from the current set without asking anything further.
+      const current = this.resourceTargets(gesture.item.id);
+      this.requestResourceAssociation(
+        gesture.item.id,
+        attachTarget,
+        'pointer',
+        current.length === 0 ? 'attach' : 'move',
+        current[0],
+      );
+      return;
+    }
     if (moveDetail) this.emitItemMove(moveDetail);
   }
 }