@design.estate/dees-catalog 10.0.0 → 11.1.0

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

@@ -13,15 +13,19 @@ import {
 import { themeDefaultStyles } from '../../00theme.js';
 import { harnessActivityStyles } from '../harness.styles.js';
 import type {
+  IDropSlot,
   IHarnessGroupContextDetail,
+  IHarnessItemMoveDetail,
   IHarnessResourceAssociation,
   IHarnessResourceContextDetail,
   IHarnessResourceEventDetail,
   IHarnessResourceMeta,
   IHarnessSessionContextDetail,
+  IHarnessSessionEventDetail,
   IHarnessSessionGroup,
+  IHarnessSessionListItemRef,
   IHarnessSessionMeta,
-  IHarnessSessionMoveDetail,
+  THarnessItemMoveSource,
   THarnessResourceAssociationInteractionSource,
   THarnessResourceAssociationRequestDetail,
   THarnessResourceContextSource,
@@ -39,17 +43,47 @@ declare global {
   }
 }
 
-interface IDropSlot {
-  groupId: string | null;
-  index: number;
-}
+/** One ordered row. Sessions and resources are peers in a single order. */
+type TListItem =
+  | {
+      kind: 'session';
+      key: string;
+      id: string;
+      title: string;
+      sortable: boolean;
+      timestamp: number;
+      session: IHarnessSessionMeta;
+    }
+  | {
+      kind: 'resource';
+      key: string;
+      id: string;
+      title: string;
+      sortable: boolean;
+      timestamp: number;
+      resource: IHarnessResourceMeta;
+    };
+
+const itemKey = (refArg: IHarnessSessionListItemRef): string => `${refArg.kind}:${refArg.id}`;
+
+const itemRef = (itemArg: IHarnessSessionListItemRef): IHarnessSessionListItemRef => ({
+  kind: itemArg.kind,
+  id: itemArg.id,
+});
+
+const sameItem = (
+  leftArg: IHarnessSessionListItemRef | undefined | null,
+  rightArg: IHarnessSessionListItemRef | undefined | null,
+): boolean => !!leftArg
+  && !!rightArg
+  && leftArg.kind === rightArg.kind
+  && leftArg.id === rightArg.id;
 
 interface IPointerDragGesture {
-  type: 'session';
   pointerId: number;
   handle: HTMLElement;
   source: HTMLElement;
-  sessionId: string;
+  item: IHarnessSessionListItemRef;
   sourceGroupId: string | null;
   sourceLogicalIndex: number;
   startClientX: number;
@@ -59,38 +93,21 @@ interface IPointerDragGesture {
   phase: 'pending' | 'active';
 }
 
-interface IResourcePointerDragGesture {
-  type: 'resource';
-  pointerId: number;
-  handle: HTMLElement;
-  source: HTMLElement;
-  resourceId: string;
-  fromSessionId: string | null;
-  eligibleSessionIds: ReadonlySet<string>;
-  startClientX: number;
-  startClientY: number;
-  grabOffsetX: number;
-  grabOffsetY: number;
-  phase: 'pending' | 'active';
-}
-
-type TPointerDragGesture = IPointerDragGesture | IResourcePointerDragGesture;
-
 interface IPendingResourceAssociationRequest {
   resourceId: string;
   resourceTitle: string;
-  fromSessionId: string | null;
-  toSessionId: string | null;
+  fromTarget: IHarnessSessionListItemRef | null;
+  toTarget: IHarnessSessionListItemRef | null;
   intent: THarnessResourceAssociationRequestDetail['intent'];
 }
 
 interface IKeyboardMoveFocus {
-  sessionId: string;
+  item: IHarnessSessionListItemRef;
   groupId: string | null;
 }
 
 type TSectionRenderEntry =
-  | { type: 'session'; key: string; session: IHarnessSessionMeta; logicalIndex: number }
+  | { type: 'item'; key: string; item: TListItem; logicalIndex: number }
   | { type: 'placeholder'; key: string };
 
 /**
@@ -99,16 +116,22 @@ type TSectionRenderEntry =
  * double-click or Enter, and `harness-session-context` with viewport
  * coordinates on right-click, Actions, or ContextMenu/Shift+F10.
  *
- * With `enableGrouping`, sessions render under user-defined `groups` and can
- * be dragged between groups and reordered. The component never mutates its
- * inputs: drops emit `harness-session-move`, the "new group" button emits
- * `harness-group-create-request`, and right-clicking a group header emits
- * `harness-group-context` — the host persists changes and passes fresh
- * `groups` back in. Sessions in no group render in the trailing ungrouped
- * section with pinned entries first, then explicit order, then new sessions by
- * recency. While a search query is active the list is flat. Generic resources
- * project as controlled child rows or into a trailing unattached Resources
- * section; association interactions only emit host requests.
+ * 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.
+ *
+ * The component never mutates its inputs: reordering emits `harness-item-move`,
+ * the "new group" button emits `harness-group-create-request`, and
+ * right-clicking a group header emits `harness-group-context` — the host
+ * persists changes and passes fresh `groups` / `ungroupedItemIds` back in.
+ * Items in no group render in the trailing ungrouped section with pinned
+ * entries first, then explicit order, then new entries by recency. With
+ * `enableGrouping` the list additionally renders group chrome. While a search
+ * query is active the list is one flat, non-sortable, recency-ordered section
+ * in which sessions and resources match as peers.
  */
 @customElement('dees-harness-session-list')
 export class DeesHarnessSessionList extends DeesElement {
@@ -133,9 +156,9 @@ export class DeesHarnessSessionList extends DeesElement {
   @property({ type: Boolean })
   accessor enableGrouping: boolean = false;
 
-  /** Explicit order for sortable sessions outside user-defined groups. */
+  /** Explicit order for sortable items of both kinds outside user-defined groups. */
   @property({ attribute: false })
-  accessor ungroupedSessionIds: string[] = [];
+  accessor ungroupedItemIds: IHarnessSessionListItemRef[] = [];
 
   @property({ attribute: false })
   accessor resources: IHarnessResourceMeta[] = [];
@@ -146,21 +169,18 @@ export class DeesHarnessSessionList extends DeesElement {
   @property()
   accessor selectedResourceId = '';
 
-  /** Serializable attach/reassign targets. A missing resource entry means no eligible targets. */
+  /**
+   * Serializable attach/reassign targets for host menus. A missing entry leaves
+   * the resource unrestricted; an empty array means no eligible target.
+   */
   @property({ attribute: false })
-  accessor eligibleSessionIdsByResourceId: Record<string, string[]> = {};
+  accessor eligibleTargetsByResourceId: Record<string, IHarnessSessionListItemRef[]> = {};
 
   @state()
   accessor search: string = '';
 
   @state()
-  accessor draggingSessionId: string = '';
-
-  @state()
-  accessor draggingResourceId = '';
-
-  @state()
-  accessor resourceDropTargetSessionId = '';
+  accessor draggingItem: IHarnessSessionListItemRef | undefined = undefined;
 
   @state()
   accessor dropSlot: IDropSlot | undefined = undefined;
@@ -188,7 +208,7 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private reflowGeneration = 0;
   private readonly reflowAnimations = new Set<Animation>();
-  private pointerDragGesture: TPointerDragGesture | undefined;
+  private pointerDragGesture: IPointerDragGesture | undefined;
   private pendingResourceAssociationRequest: IPendingResourceAssociationRequest | undefined;
   private resourceContextFocusTarget: HTMLElement | undefined;
   private resourceContextFocusClass = '';
@@ -367,7 +387,9 @@ export class DeesHarnessSessionList extends DeesElement {
           border-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
-      .item.dragging {
+      /* One drag preview for both item kinds. */
+      .item.dragging,
+      .resourceRow.dragging {
         position: fixed;
         inset: 0 auto auto 0;
         width: var(--drag-preview-width);
@@ -410,12 +432,6 @@ export class DeesHarnessSessionList extends DeesElement {
         box-shadow: inset 3px 0 var(--card-accent);
       }
 
-      .item.resourceDropTarget {
-        outline: 2px solid var(--dees-color-accent-primary);
-        outline-offset: 2px;
-        box-shadow: 0 0 0 5px var(--dees-color-focus-ring), var(--dees-shadow-lg);
-      }
-
       .itemHeader {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 30px 30px;
@@ -512,7 +528,8 @@ export class DeesHarnessSessionList extends DeesElement {
         line-height: 14px;
       }
 
-      .harnessName {
+      .harnessName,
+      .projectName {
         min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -592,75 +609,31 @@ export class DeesHarnessSessionList extends DeesElement {
         font-size: var(--dees-font-caption2-size, 10px);
       }
 
-      .resourceDropLabel {
-        margin: 0 10px 10px;
-        padding: 6px 9px;
-        border-radius: var(--dees-radius-md);
-        background: color-mix(in srgb, var(--dees-color-accent-primary) 14%, transparent);
-        color: var(--dees-color-accent-primary);
-        font-size: var(--dees-font-caption1-size, 11px);
-        font-weight: 680;
-        text-align: center;
-      }
-
-      .resourceChildren {
-        display: grid;
-        gap: 4px;
-        margin: 0 8px 8px 24px;
-        padding: 0;
-        list-style: none;
-      }
-
-      .resourceSection {
-        margin-top: var(--dees-spacing-md);
-      }
-
-      .resourceSectionTitle {
-        margin: 0 0 7px;
-        padding: var(--dees-spacing-xs) 6px;
-        color: var(--dees-color-text-secondary);
-        font-size: var(--dees-font-caption1-size, 11px);
-        font-weight: 600;
-      }
-
-      .resourceList {
-        display: grid;
-        gap: var(--dees-spacing-sm);
-        margin: 0;
-        padding: 0;
-        list-style: none;
-      }
-
+      /* Resource rows are peers of session cards in the same ordered section. */
       .resourceRow {
+        position: relative;
         display: grid;
-        grid-template-columns: 26px minmax(0, 1fr) 38px;
+        grid-template-columns: minmax(0, 1fr) 38px;
         min-width: 0;
         overflow: hidden;
         border: 1px solid var(--dees-color-border-subtle);
         border-radius: var(--dees-radius-lg);
+        corner-shape: var(--dees-corner-shape);
         background: color-mix(in srgb, var(--dees-color-bg-secondary) 76%, transparent);
         color: var(--dees-color-text-primary);
         box-shadow: var(--dees-shadow-xs);
         box-sizing: border-box;
       }
 
+      .resourceRow.draggable {
+        grid-template-columns: 26px minmax(0, 1fr) 38px;
+      }
+
       .resourceRow.selected {
         border-color: var(--dees-color-accent-primary);
         background: color-mix(in srgb, var(--dees-color-accent-primary) 10%, var(--dees-color-bg-secondary));
       }
 
-      .resourceRow.resourceDragging {
-        position: fixed;
-        inset: 0 auto auto 0;
-        width: var(--resource-drag-preview-width);
-        max-width: none;
-        margin: 0;
-        opacity: 0.96;
-        pointer-events: none;
-        transform: translate3d(var(--resource-drag-preview-x), var(--resource-drag-preview-y), 0);
-        box-shadow: var(--dees-shadow-xl);
-      }
-
       .resourceDragHandle,
       .resourcePrimary,
       .resourceActions {
@@ -672,22 +645,7 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .resourceDragHandle {
-        display: grid;
-        place-items: center;
         min-width: 26px;
-        padding: 0;
-        color: var(--dees-color-text-muted);
-        cursor: grab;
-        touch-action: none;
-      }
-
-      .resourceDragHandle:disabled {
-        opacity: 0.35;
-        cursor: default;
-      }
-
-      .resourceDragHandle:not(:disabled):active {
-        cursor: grabbing;
       }
 
       .resourcePrimary {
@@ -741,6 +699,29 @@ export class DeesHarnessSessionList extends DeesElement {
         white-space: nowrap;
       }
 
+      /* Decorative marker for the controlled association; never interactive. */
+      .resourceAttachment {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 4px;
+        margin-top: 2px;
+        color: var(--dees-color-link);
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-weight: 600;
+      }
+
+      .resourceAttachment dees-icon {
+        flex: 0 0 auto;
+      }
+
+      .resourceAttachmentName {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       .resourceActions {
         display: grid;
         place-items: center;
@@ -778,7 +759,7 @@ export class DeesHarnessSessionList extends DeesElement {
       .emptyDropZone {
         display: grid;
         place-items: center;
-        min-height: 46px;
+        overflow: hidden;
         border: 1px dashed color-mix(in srgb, var(--dees-color-accent-primary) 68%, transparent);
         border-radius: var(--dees-radius-xl);
         background: color-mix(in srgb, var(--dees-color-accent-primary) 8%, transparent);
@@ -786,9 +767,14 @@ export class DeesHarnessSessionList extends DeesElement {
         box-sizing: border-box;
       }
 
+      /* The placeholder matches the dragged row exactly; only the empty zone has a floor. */
+      .emptyDropZone {
+        min-height: 46px;
+      }
+
       .dropPlaceholder::after,
       .emptyDropZone::after {
-        content: 'Drop conversation here';
+        content: 'Drop here';
         font-size: var(--dees-font-caption2-size, 10px);
         font-weight: 650;
         letter-spacing: 0.02em;
@@ -931,6 +917,10 @@ export class DeesHarnessSessionList extends DeesElement {
         .expandToggle { margin: 0 3px 0 0; }
 
         .resourceRow {
+          grid-template-columns: minmax(0, 1fr) 44px;
+        }
+
+        .resourceRow.draggable {
           grid-template-columns: 44px minmax(0, 1fr) 44px;
         }
 
@@ -947,10 +937,6 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       @media (max-width: 280px) {
-        .resourceChildren {
-          margin-left: 8px;
-        }
-
         .resourcePreview {
           display: none;
         }
@@ -958,10 +944,6 @@ export class DeesHarnessSessionList extends DeesElement {
     `,
   ];
 
-  private get sessionsById(): Map<string, IHarnessSessionMeta> {
-    return new Map(this.sessions.map((session) => [session.id, session]));
-  }
-
   private get resourcesById(): Map<string, IHarnessResourceMeta> {
     const result = new Map<string, IHarnessResourceMeta>();
     for (const resource of this.resources) {
@@ -971,18 +953,23 @@ export class DeesHarnessSessionList extends DeesElement {
     return result;
   }
 
-  /** First valid record wins; unknown and duplicate records remain untouched but are not projected. */
-  private get acceptedResourceAssociations(): Map<string, string> {
+  /**
+   * 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> {
     const resourcesById = this.resourcesById;
-    const sessionsById = this.sessionsById;
-    const result = new Map<string, string>();
+    const itemsByKey = this.itemsByKey;
+    const result = new Map<string, IHarnessSessionListItemRef>();
     for (const association of this.resourceAssociations) {
       if (
-        !resourcesById.has(association.resourceId)
-        || !sessionsById.has(association.sessionId)
+        !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, association.sessionId);
+      result.set(association.resourceId, itemRef(association.target));
     }
     return result;
   }
@@ -991,8 +978,95 @@ export class DeesHarnessSessionList extends DeesElement {
     return [...this.resourcesById.values()];
   }
 
+  /** Sessions and resources as one pool of orderable items, before grouping and search. */
+  private get acceptedItems(): TListItem[] {
+    const result: TListItem[] = [];
+    const seenSessionIds = new Set<string>();
+    for (const session of this.sessions) {
+      if (!session.id || seenSessionIds.has(session.id)) continue;
+      seenSessionIds.add(session.id);
+      result.push({
+        kind: 'session',
+        key: `session:${session.id}`,
+        id: session.id,
+        title: session.title || session.id,
+        sortable: session.draggable !== false,
+        timestamp: session.updatedAt ?? session.createdAt ?? 0,
+        session,
+      });
+    }
+    for (const resource of this.resourcesById.values()) {
+      result.push({
+        kind: 'resource',
+        key: `resource:${resource.id}`,
+        id: resource.id,
+        title: resource.title || resource.id,
+        sortable: resource.draggable !== false,
+        timestamp: resource.updatedAt ?? resource.createdAt ?? 0,
+        resource,
+      });
+    }
+    return result;
+  }
+
+  private get itemsByKey(): Map<string, TListItem> {
+    return new Map(this.acceptedItems.map((item) => [item.key, item]));
+  }
+
+  /** Groups only organize the list while grouping is enabled. */
+  private get effectiveGroups(): IHarnessSessionGroup[] {
+    return this.enableGrouping ? this.groups : [];
+  }
+
+  private get groupedItemKeys(): Set<string> {
+    const keys = new Set<string>();
+    for (const group of this.effectiveGroups) {
+      for (const ref of group.itemIds) keys.add(itemKey(ref));
+    }
+    return keys;
+  }
+
+  private itemsForGroup(groupIdArg: string | null): TListItem[] {
+    if (groupIdArg === null) return this.ungroupedItems;
+    const group = this.effectiveGroups.find((candidate) => candidate.id === groupIdArg);
+    if (!group) return [];
+    const byKey = this.itemsByKey;
+    const seen = new Set<string>();
+    const result: TListItem[] = [];
+    for (const ref of group.itemIds) {
+      const key = itemKey(ref);
+      const item = byKey.get(key);
+      if (!item || seen.has(key)) continue;
+      seen.add(key);
+      result.push(item);
+    }
+    return result;
+  }
+
+  /** Pinned entries first, then explicitly ordered items, then unknown items by recency. */
+  private get ungroupedItems(): TListItem[] {
+    const grouped = this.groupedItemKeys;
+    const available = this.acceptedItems.filter((item) => !grouped.has(item.key));
+    const pinned = available.filter((item) => !item.sortable);
+    const sortableByKey = new Map(
+      available.filter((item) => item.sortable).map((item) => [item.key, item]),
+    );
+    const ordered: TListItem[] = [];
+    for (const ref of this.ungroupedItemIds) {
+      const item = sortableByKey.get(itemKey(ref));
+      if (!item) continue;
+      ordered.push(item);
+      sortableByKey.delete(item.key);
+    }
+    const unknown = [...sortableByKey.values()].sort(
+      (left, right) => right.timestamp - left.timestamp,
+    );
+    return [...pinned, ...ordered, ...unknown];
+  }
+
   private resourceMatchesSearch(resourceArg: IHarnessResourceMeta, queryArg: string): boolean {
-    return [resourceArg.id, resourceArg.kind, resourceArg.title, resourceArg.preview]
+    return [resourceArg.id, resourceArg.kind, resourceArg.title, resourceArg.preview,
+      resourceArg.projectLabel]
       .filter(Boolean)
       .join(' ')
       .toLowerCase()
@@ -1001,78 +1075,53 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private sessionMatchesSearch(sessionArg: IHarnessSessionMeta, queryArg: string): boolean {
     return [sessionArg.title, sessionArg.preview, sessionArg.id, sessionArg.harness?.id,
-      sessionArg.harness?.name, this.sessionStatusLabel(sessionArg), this.sessionStateLabel(sessionArg.state ?? 'normal')]
+      sessionArg.harness?.name, sessionArg.projectLabel,
+      this.sessionStatusLabel(sessionArg), this.sessionStateLabel(sessionArg.state ?? 'normal')]
       .filter(Boolean)
       .join(' ')
       .toLowerCase()
       .includes(queryArg);
   }
 
-  private resourcesForSession(sessionArg: IHarnessSessionMeta): IHarnessResourceMeta[] {
-    const associations = this.acceptedResourceAssociations;
-    const associated = this.acceptedResources.filter(
-      (resource) => associations.get(resource.id) === sessionArg.id,
-    );
-    const query = this.search.trim().toLowerCase();
-    if (!query || this.sessionMatchesSearch(sessionArg, query)) return associated;
-    return associated.filter((resource) => this.resourceMatchesSearch(resource, query));
+  private itemMatchesSearch(itemArg: TListItem, queryArg: string): boolean {
+    return itemArg.kind === 'session'
+      ? this.sessionMatchesSearch(itemArg.session, queryArg)
+      : this.resourceMatchesSearch(itemArg.resource, queryArg);
   }
 
-  private get unattachedResources(): IHarnessResourceMeta[] {
-    const associations = this.acceptedResourceAssociations;
+  /** Search flattens the list: sessions and resources match as peers, newest first. */
+  private get searchItems(): TListItem[] {
     const query = this.search.trim().toLowerCase();
-    return this.acceptedResources.filter((resource) => (
-      !associations.has(resource.id)
-      && (!query || this.resourceMatchesSearch(resource, query))
-    ));
+    const sorted = [...this.acceptedItems].sort(
+      (left, right) => right.timestamp - left.timestamp,
+    );
+    if (!query) return sorted;
+    return sorted.filter((item) => this.itemMatchesSearch(item, query));
   }
 
-  private get groupedSessionIds(): Set<string> {
-    const ids = new Set<string>();
-    for (const group of this.groups) {
-      for (const id of group.sessionIds) ids.add(id);
-    }
-    return ids;
+  private get searchActive(): boolean {
+    return this.search.trim().length > 0;
   }
 
-  /** Pinned entries first, followed by explicitly ordered sortable sessions. */
-  private get ungroupedSessions(): IHarnessSessionMeta[] {
-    const grouped = this.groupedSessionIds;
-    const available = this.sessions.filter((session) => !grouped.has(session.id));
-    const pinned = available.filter((session) => session.draggable === false);
-    const sortableById = new Map(
-      available.filter((session) => session.draggable !== false).map((session) => [session.id, session]),
-    );
-    const ordered: IHarnessSessionMeta[] = [];
-    for (const sessionId of this.ungroupedSessionIds) {
-      const session = sortableById.get(sessionId);
-      if (!session) continue;
-      ordered.push(session);
-      sortableById.delete(sessionId);
-    }
-    const newSessions = [...sortableById.values()].sort(
-      (left, right) =>
-        (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0),
-    );
-    return [...pinned, ...ordered, ...newSessions];
+  private sortableItems(itemsArg: TListItem[], excludeDraggingArg = true): TListItem[] {
+    return itemsArg.filter((item) => (
+      item.sortable
+      && (!excludeDraggingArg || !sameItem(this.draggingItem, item))
+    ));
   }
 
-  private get filteredSessions(): IHarnessSessionMeta[] {
-    const query = this.search.trim().toLowerCase();
-    const associations = this.acceptedResourceAssociations;
-    const matchingAttachedSessionIds = new Set(
-      this.acceptedResources
-        .filter((resource) => query && this.resourceMatchesSearch(resource, query))
-        .map((resource) => associations.get(resource.id))
-        .filter((sessionId): sessionId is string => sessionId !== undefined),
-    );
-    const sorted = [...this.sessions].sort(
-      (left, right) => (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0),
-    );
-    if (!query) return sorted;
-    return sorted.filter(
-      (session) => this.sessionMatchesSearch(session, query) || matchingAttachedSessionIds.has(session.id),
-    );
+  private groupIdForItem(refArg: IHarnessSessionListItemRef): string | null {
+    return this.effectiveGroups.find(
+      (group) => group.itemIds.some((candidate) => sameItem(candidate, refArg)),
+    )?.id ?? null;
+  }
+
+  private rowElementFor(refArg: IHarnessSessionListItemRef): HTMLElement | undefined {
+    return Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('[data-item-kind][data-item-id]') ?? [],
+    ).find((candidate) => (
+      candidate.dataset.itemKind === refArg.kind && candidate.dataset.itemId === refArg.id
+    ));
   }
 
   public focusSearch(): void {
@@ -1081,46 +1130,51 @@ export class DeesHarnessSessionList extends DeesElement {
 
   public requestResourceAssociation(
     resourceIdArg: string,
-    toSessionIdArg: string | null,
+    toTargetArg: IHarnessSessionListItemRef | null,
     sourceArg: THarnessResourceAssociationInteractionSource = 'action',
   ): boolean {
     const resource = this.resourcesById.get(resourceIdArg);
     if (!resource) return false;
-    const fromSessionId = this.acceptedResourceAssociations.get(resourceIdArg) ?? null;
-    if (fromSessionId === toSessionIdArg) return false;
+    const fromTarget = this.acceptedResourceAssociations.get(resourceIdArg) ?? null;
+    if (sameItem(fromTarget, toTargetArg)) return false;
     if (
-      toSessionIdArg !== null
-      && (!this.sessionsById.has(toSessionIdArg) || !this.isResourceTargetEligible(resourceIdArg, toSessionIdArg))
+      toTargetArg !== null
+      && (
+        !this.itemsByKey.has(itemKey(toTargetArg))
+        || sameItem(toTargetArg, { kind: 'resource', id: resourceIdArg })
+        || !this.isResourceTargetEligible(resourceIdArg, toTargetArg)
+      )
     ) return false;
-    if (toSessionIdArg === null && fromSessionId === null) return false;
-    const detail: THarnessResourceAssociationRequestDetail = fromSessionId === null
+    if (toTargetArg === null && fromTarget === null) return false;
+    const toTarget = toTargetArg === null ? null : itemRef(toTargetArg);
+    const detail: THarnessResourceAssociationRequestDetail = fromTarget === null
       ? {
           intent: 'attach',
           resource,
-          fromSessionId: null,
-          toSessionId: toSessionIdArg!,
+          fromTarget: null,
+          toTarget: toTarget!,
           source: sourceArg,
         }
-      : toSessionIdArg === null
+      : toTarget === null
         ? {
             intent: 'detach',
             resource,
-            fromSessionId,
-            toSessionId: null,
+            fromTarget,
+            toTarget: null,
             source: sourceArg,
           }
         : {
             intent: 'reassign',
             resource,
-            fromSessionId,
-            toSessionId: toSessionIdArg,
+            fromTarget,
+            toTarget,
             source: sourceArg,
           };
     this.pendingResourceAssociationRequest = {
       resourceId: resource.id,
       resourceTitle: resource.title || resource.id,
-      fromSessionId,
-      toSessionId: toSessionIdArg,
+      fromTarget,
+      toTarget,
       intent: detail.intent,
     };
     this.moveAnnouncement = this.resourceAssociationAnnouncement(detail, false);
@@ -1147,12 +1201,6 @@ export class DeesHarnessSessionList extends DeesElement {
     }
     if (changedProperties.has('sessions')) {
       const knownIds = new Set(this.sessions.map((session) => session.id));
-      if (
-        this.pointerDragGesture?.type === 'session'
-        && !knownIds.has(this.pointerDragGesture.sessionId)
-      ) {
-        this.finishPointerDrag(false);
-      }
       const nextExpanded = new Set(
         [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId)),
       );
@@ -1164,13 +1212,6 @@ export class DeesHarnessSessionList extends DeesElement {
       }
     }
     if (changedProperties.has('resources') || changedProperties.has('resourceAssociations')) {
-      const gesture = this.pointerDragGesture;
-      if (gesture?.type === 'resource') {
-        const currentSessionId = this.acceptedResourceAssociations.get(gesture.resourceId) ?? null;
-        if (!this.resourcesById.has(gesture.resourceId) || currentSessionId !== gesture.fromSessionId) {
-          this.finishPointerDrag(false);
-        }
-      }
       if (
         this.resourceContextResourceId
         && !this.resourcesById.has(this.resourceContextResourceId)
@@ -1179,16 +1220,15 @@ export class DeesHarnessSessionList extends DeesElement {
     }
     if (
       changedProperties.has('sessions')
-      || changedProperties.has('eligibleSessionIdsByResourceId')
+      || changedProperties.has('resources')
+      || changedProperties.has('search')
     ) {
+      // A drag is positional only: it survives association and eligibility
+      // updates, but never outlives its own row.
       const gesture = this.pointerDragGesture;
-      if (
-        gesture?.type === 'resource'
-        && !this.sameSessionIds(
-          gesture.eligibleSessionIds,
-          new Set(this.eligibleSessionIds(gesture.resourceId)),
-        )
-      ) this.finishPointerDrag(false);
+      if (gesture && (this.searchActive || !this.itemsByKey.has(itemKey(gesture.item)))) {
+        this.finishPointerDrag(false);
+      }
     }
   }
 
@@ -1211,7 +1251,6 @@ export class DeesHarnessSessionList extends DeesElement {
   }
 
   public render(): TemplateResult {
-    const groupingActive = this.enableGrouping && !this.search.trim();
     return html`
       <div class="searchRow">
         <div class="searchField">
@@ -1249,15 +1288,15 @@ export class DeesHarnessSessionList extends DeesElement {
       <div class="listFrame">
         <div class="scrollShadow top ${this.topScrollShadowVisible ? 'visible' : ''}"></div>
         <div
-          class="list ${this.draggingSessionId || this.draggingResourceId ? 'dragActive' : ''}"
+          class="list ${this.draggingItem ? 'dragActive' : ''}"
           @scroll=${this.syncScrollShadowState}
         >
           <div class="listContent">
             ${this.loading
               ? html`<div class="emptyNote">Loading conversations…</div>`
-              : groupingActive
-                ? this.renderGroupedList()
-                : this.renderFlatList()}
+              : this.searchActive
+                ? this.renderSearchList()
+                : this.renderOrderedList()}
           </div>
         </div>
         <div class="scrollShadow bottom ${this.bottomScrollShadowVisible ? 'visible' : ''}"></div>
@@ -1266,84 +1305,33 @@ export class DeesHarnessSessionList extends DeesElement {
     `;
   }
 
-  private renderFlatList(): TemplateResult {
-    const sessions = this.filteredSessions;
-    const unattachedResources = this.unattachedResources;
-    if (!sessions.length && !unattachedResources.length) {
-      return html`<div class="emptyNote">
-        ${this.acceptedResources.length
-          ? this.sessions.length
-            ? 'No conversations or resources match this search.'
-            : 'No resources match this search.'
-          : this.sessions.length
-            ? 'No conversations match this search.'
-            : this.emptyText}
-      </div>`;
-    }
-    return html`
-      <div class="section">
-        ${repeat(
-          sessions,
-          (session) => session.id,
-          (session) => this.renderItem(session, null, -1),
-        )}
-      </div>
-      ${this.renderUnattachedResources(unattachedResources)}
-    `;
+  private renderEmptyNote(): TemplateResult {
+    return html`<div class="emptyNote">
+      ${this.acceptedResources.length
+        ? this.sessions.length
+          ? 'No conversations or resources match this search.'
+          : 'No resources match this search.'
+        : this.sessions.length
+          ? 'No conversations match this search.'
+          : this.emptyText}
+    </div>`;
   }
 
-  private renderGroupedList(): TemplateResult {
-    const byId = this.sessionsById;
-    const ungrouped = this.ungroupedSessions;
-    const unattachedResources = this.unattachedResources;
-    if (!this.sessions.length && !this.groups.length && !unattachedResources.length) {
+  private renderSearchList(): TemplateResult {
+    const items = this.searchItems;
+    if (!items.length) return this.renderEmptyNote();
+    return this.renderSection(items, null, false);
+  }
+
+  private renderOrderedList(): TemplateResult {
+    const groups = this.effectiveGroups;
+    const ungrouped = this.ungroupedItems;
+    if (!this.acceptedItems.length && !groups.length) {
       return html`<div class="emptyNote">${this.emptyText}</div>`;
     }
     return html`
-      ${this.groups.map((group) => {
-        const members = group.sessionIds
-          .map((id) => byId.get(id))
-          .filter((session): session is IHarnessSessionMeta => session !== undefined);
-        const collapsed = this.collapsedGroupIds.has(group.id);
-        const attentionCount = members.filter((session) => session.state === 'attention' || session.state === 'error').length;
-        const isHeaderDrop =
-          this.dropSlot?.groupId === group.id
-          && this.dropSlot.index === this.sortableSessions(members).length
-          && collapsed;
-        return html`
-          <button
-            class="groupHeader ${collapsed ? 'collapsed' : ''} ${isHeaderDrop ? 'dropTarget' : ''}"
-            data-drop-group-id=${group.id}
-            data-drop-index=${this.sortableSessions(members).length}
-            data-drop-kind="slot"
-            type="button"
-            @click=${() => this.toggleGroupCollapsed(group.id)}
-            @contextmenu=${(event: MouseEvent) => {
-              event.preventDefault();
-              const detail: IHarnessGroupContextDetail = {
-                group,
-                clientX: event.clientX,
-                clientY: event.clientY,
-                originalEvent: event,
-              };
-              this.dispatchEvent(
-                new CustomEvent('harness-group-context', { detail, bubbles: true, composed: true }),
-              );
-            }}
-          >
-            <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
-            <span>${group.name}</span>
-            ${attentionCount ? html`<span class="groupAttention" aria-label=${`${attentionCount} need attention`}>
-              <dees-icon aria-hidden="true" icon="lucide:CircleAlert" iconSize="11"></dees-icon>${attentionCount}
-            </span>` : ''}
-            <span class="groupCount">${members.length}</span>
-          </button>
-          ${collapsed
-            ? ''
-            : this.renderSection(members, group.id)}
-        `;
-      })}
-      ${this.groups.length && (ungrouped.length || this.draggingSessionId)
+      ${groups.map((group) => this.renderGroup(group))}
+      ${groups.length && (ungrouped.length || this.draggingItem)
         ? html`
             <button
               class="groupHeader"
@@ -1358,56 +1346,107 @@ export class DeesHarnessSessionList extends DeesElement {
             </button>
           `
         : ''}
-      ${this.renderSection(ungrouped, null)}
-      ${this.renderUnattachedResources(unattachedResources)}
+      ${this.renderSection(ungrouped, null, true)}
+    `;
+  }
+
+  private renderGroup(groupArg: IHarnessSessionGroup): TemplateResult {
+    const members = this.itemsForGroup(groupArg.id);
+    const collapsed = this.collapsedGroupIds.has(groupArg.id);
+    const attentionCount = members.filter((item) => (
+      item.kind === 'session' && (item.session.state === 'attention' || item.session.state === 'error')
+    )).length;
+    const appendIndex = this.sortableItems(members).length;
+    const isHeaderDrop = this.dropSlot?.groupId === groupArg.id
+      && this.dropSlot.index === appendIndex
+      && collapsed;
+    return html`
+      <button
+        class="groupHeader ${collapsed ? 'collapsed' : ''} ${isHeaderDrop ? 'dropTarget' : ''}"
+        data-drop-group-id=${groupArg.id}
+        data-drop-index=${appendIndex}
+        data-drop-kind="slot"
+        type="button"
+        @click=${() => this.toggleGroupCollapsed(groupArg.id)}
+        @contextmenu=${(event: MouseEvent) => {
+          event.preventDefault();
+          const detail: IHarnessGroupContextDetail = {
+            group: groupArg,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            originalEvent: event,
+          };
+          this.dispatchEvent(
+            new CustomEvent('harness-group-context', { detail, bubbles: true, composed: true }),
+          );
+        }}
+      >
+        <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
+        <span>${groupArg.name}</span>
+        ${attentionCount ? html`<span class="groupAttention" aria-label=${`${attentionCount} need attention`}>
+          <dees-icon aria-hidden="true" icon="lucide:CircleAlert" iconSize="11"></dees-icon>${attentionCount}
+        </span>` : ''}
+        <span class="groupCount">${members.length}</span>
+      </button>
+      ${collapsed ? '' : this.renderSection(members, groupArg.id, true)}
     `;
   }
 
   private renderSection(
-    sessions: IHarnessSessionMeta[],
-    groupId: string | null,
+    itemsArg: TListItem[],
+    groupIdArg: string | null,
+    sortableArg: boolean,
   ): TemplateResult {
-    const slot = this.dropSlot;
+    const slot = sortableArg ? this.dropSlot : undefined;
     const entries: TSectionRenderEntry[] = [];
     let logicalIndex = 0;
-    for (const session of sessions) {
-      const isDragging = session.id === this.draggingSessionId;
-      const sortable = session.draggable !== false;
+    for (const item of itemsArg) {
+      const isDragging = sameItem(this.draggingItem, item);
+      const sortable = sortableArg && item.sortable;
       if (
         slot
-        && slot.groupId === groupId
+        && slot.groupId === groupIdArg
         && slot.index === logicalIndex
         && !isDragging
         && sortable
       ) {
-        entries.push({ type: 'placeholder', key: `placeholder:${groupId ?? 'ungrouped'}` });
+        entries.push({ type: 'placeholder', key: `placeholder:${groupIdArg ?? 'ungrouped'}` });
       }
       entries.push({
-        type: 'session',
-        key: `session:${session.id}`,
-        session,
+        type: 'item',
+        key: item.key,
+        item,
         logicalIndex: sortable ? logicalIndex : -1,
       });
       if (sortable && !isDragging) logicalIndex += 1;
     }
-    if (slot && slot.groupId === groupId && slot.index === logicalIndex) {
-      entries.push({ type: 'placeholder', key: `placeholder:${groupId ?? 'ungrouped'}` });
+    if (slot && slot.groupId === groupIdArg && slot.index === logicalIndex) {
+      entries.push({ type: 'placeholder', key: `placeholder:${groupIdArg ?? 'ungrouped'}` });
     }
     const hasPlaceholder = entries.some((entry) => entry.type === 'placeholder');
+    // Resolve the controlled associations once per section, not once per row.
+    const associations = this.acceptedResourceAssociations;
     return html`
-      <div class="section" data-group-id=${groupId ?? ''}>
+      <div class="section" data-group-id=${groupIdArg ?? ''}>
         ${repeat(
           entries,
           (entry) => entry.key,
           (entry) => entry.type === 'placeholder'
-            ? this.renderDropPlaceholder(groupId, slot?.index ?? 0)
-            : this.renderItem(entry.session, groupId, entry.logicalIndex),
+            ? this.renderDropPlaceholder(groupIdArg, slot?.index ?? 0)
+            : entry.item.kind === 'session'
+              ? this.renderSessionItem(entry.item.session, groupIdArg, entry.logicalIndex)
+              : this.renderResourceItem(
+                  entry.item.resource,
+                  groupIdArg,
+                  entry.logicalIndex,
+                  associations.get(entry.item.id) ?? null,
+                ),
         )}
-        ${this.draggingSessionId && !hasPlaceholder && this.sortableSessions(sessions).length === 0
+        ${this.draggingItem && sortableArg && !hasPlaceholder && this.sortableItems(itemsArg).length === 0
           ? html`
               <div
                 class="emptyDropZone"
-                data-drop-group-id=${groupId ?? ''}
+                data-drop-group-id=${groupIdArg ?? ''}
                 data-drop-index="0"
                 data-drop-kind="slot"
               ></div>
@@ -1424,46 +1463,73 @@ export class DeesHarnessSessionList extends DeesElement {
         data-drop-group-id=${groupId ?? ''}
         data-drop-index=${index}
         data-drop-kind="slot"
-        style=${`height: ${Math.max(46, this.draggedItemHeight)}px`}
+        style=${`height: ${Math.max(24, this.draggedItemHeight)}px`}
       ></div>
     `;
   }
 
-  private renderItem(
+  /** One grip for both kinds; only its size and extra class differ. */
+  private renderDragHandle(
+    refArg: IHarnessSessionListItemRef,
+    titleArg: string,
+    groupIdArg: string | null,
+    logicalIndexArg: number,
+  ): TemplateResult {
+    const isResource = refArg.kind === 'resource';
+    return html`
+      <button
+        class="dragHandle ${isResource ? 'resourceDragHandle' : ''}"
+        type="button"
+        title="Drag to reorder; use arrow, Home, or End keys for keyboard reordering"
+        aria-label=${`Reorder ${titleArg}`}
+        aria-keyshortcuts="ArrowUp ArrowDown Home End"
+        @pointerdown=${(event: PointerEvent) => {
+          this.handlePointerDown(event, refArg, groupIdArg, logicalIndexArg);
+        }}
+        @pointermove=${this.handlePointerMove}
+        @pointerup=${this.handlePointerUp}
+        @pointercancel=${this.handlePointerCancel}
+        @lostpointercapture=${this.handleLostPointerCapture}
+        @keydown=${(event: KeyboardEvent) => {
+          this.handleKeyboardMove(event, refArg, titleArg, groupIdArg);
+        }}
+      >
+        <dees-icon icon="lucide:GripVertical" iconSize=${isResource ? '13' : '14'}></dees-icon>
+      </button>
+    `;
+  }
+
+  private renderSessionItem(
     session: IHarnessSessionMeta,
     groupId: string | null,
     index: number,
   ): TemplateResult {
-    const draggable = (
-      this.enableGrouping
-      && session.draggable !== false
-      && index >= 0
-    );
+    const draggable = index >= 0;
     const expanded = this.expandedSessionIds.has(session.id);
     const state = session.state ?? 'normal';
     const statusLabel = this.sessionStatusLabel(session);
     const active = (state === 'normal' || state === 'working') && (session.working ?? state === 'working');
     const detailsId = `session-details-${session.id}`;
     const dropIndex = index < 0 ? 0 : index;
-    const resources = this.resourcesForSession(session);
-    const isResourceDropTarget = this.resourceDropTargetSessionId === session.id;
+    const title = session.title || session.id;
+    const projectLabel = session.projectLabel?.trim() ?? '';
     return html`
       <article
         class="item state-${state} ${active ? 'active' : ''} ${expanded ? 'expanded' : ''} ${
           session.id === this.selectedSessionId ? 'selected' : ''
         } ${
-          this.draggingSessionId === session.id ? 'dragging' : ''
-        } ${
-          isResourceDropTarget ? 'resourceDropTarget' : ''
+          sameItem(this.draggingItem, { kind: 'session', id: session.id }) ? 'dragging' : ''
         }"
         data-session-id=${session.id}
+        data-item-kind="session"
+        data-item-id=${session.id}
         data-drop-group-id=${groupId ?? ''}
         data-drop-index=${dropIndex}
         data-drop-kind=${index < 0 ? 'slot' : 'card'}
         @dblclick=${(event: MouseEvent) => {
           if (this.eventTargetsExpandToggle(event) || this.eventTargetsDragHandle(event)
             || this.eventTargetsSessionActions(event)) return;
-          this.emit('harness-session-open', session);
+          this.emitSession('harness-session-open', session);
         }}
         @contextmenu=${(event: MouseEvent) => {
           if (this.eventTargetsExpandToggle(event)) return;
@@ -1483,39 +1549,19 @@ export class DeesHarnessSessionList extends DeesElement {
         <div class="itemInner">
           <div class="itemHeader ${draggable ? 'draggable' : ''}">
             ${draggable
-              ? html`
-                  <button
-                    class="dragHandle"
-                    type="button"
-                    title="Drag to reorder; use arrow, Home, or End keys for keyboard reordering"
-                    aria-label=${`Reorder ${session.title || session.id}`}
-                    aria-keyshortcuts="ArrowUp ArrowDown Home End"
-                    @pointerdown=${(event: PointerEvent) => {
-                      this.handlePointerDown(event, session, groupId, index);
-                    }}
-                    @pointermove=${this.handlePointerMove}
-                    @pointerup=${this.handlePointerUp}
-                    @pointercancel=${this.handlePointerCancel}
-                    @lostpointercapture=${this.handleLostPointerCapture}
-                    @keydown=${(event: KeyboardEvent) => {
-                      this.handleKeyboardMove(event, session, groupId);
-                    }}
-                  >
-                    <dees-icon icon="lucide:GripVertical" iconSize="14"></dees-icon>
-                  </button>
-                `
+              ? this.renderDragHandle({ kind: 'session', id: session.id }, title, groupId, index)
               : ''}
             <button
               class="itemPrimary"
               type="button"
               aria-keyshortcuts="ContextMenu Shift+F10"
               aria-current=${session.id === this.selectedSessionId ? 'true' : 'false'}
-              @click=${() => this.emit('harness-session-select', session)}
+              @click=${() => this.emitSession('harness-session-select', session)}
               @keydown=${(event: KeyboardEvent) => {
                 if (this.handleSessionContextKey(event)) return;
                 if (event.key !== 'Enter') return;
                 event.preventDefault();
-                this.emit('harness-session-open', session);
+                this.emitSession('harness-session-open', session);
               }}
             >
               <span class="stateDot" aria-hidden="true">
@@ -1526,7 +1572,7 @@ export class DeesHarnessSessionList extends DeesElement {
                   ${session.icon
                     ? html`<dees-icon class="itemIcon" icon=${session.icon} iconSize="13"></dees-icon>`
                     : ''}
-                  <span class="titleText">${session.title || session.id}</span>
+                  <span class="titleText">${title}</span>
                 </span>
                 <span class="itemStatus" title=${statusLabel}>${statusLabel}</span>
                 <span class="itemIdentity">
@@ -1535,6 +1581,10 @@ export class DeesHarnessSessionList extends DeesElement {
                     <span class="harnessName" title=${session.harness.name}>${session.harness.name}</span>
                     <span aria-hidden="true">·</span>
                   ` : ''}
+                  ${projectLabel ? html`
+                    <span class="projectName" title=${projectLabel}>${projectLabel}</span>
+                    <span aria-hidden="true">·</span>
+                  ` : ''}
                   <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
                 </span>
               </span>
@@ -1543,7 +1593,7 @@ export class DeesHarnessSessionList extends DeesElement {
               class="sessionActions"
               type="button"
               title="Actions"
-              aria-label=${`Actions for ${session.title || session.id}`}
+              aria-label=${`Actions for ${title}`}
               aria-haspopup="menu"
               aria-keyshortcuts="ContextMenu Shift+F10"
               @click=${this.invokeSessionContext}
@@ -1565,20 +1615,6 @@ export class DeesHarnessSessionList extends DeesElement {
               <dees-icon icon="lucide:ChevronDown" iconSize="15"></dees-icon>
             </button>
           </div>
-          ${isResourceDropTarget
-            ? html`<div class="resourceDropLabel">Associate resource with ${session.title || session.id}</div>`
-            : ''}
-          ${resources.length
-            ? html`
-                <ul class="resourceChildren" aria-label=${`Resources for ${session.title || session.id}`}>
-                  ${repeat(
-                    resources,
-                    (resource) => resource.id,
-                    (resource) => this.renderResource(resource, session.id),
-                  )}
-                </ul>
-              `
-            : ''}
           ${expanded
             ? html`
                 <div class="itemDetails" id=${detailsId}>
@@ -1594,41 +1630,36 @@ export class DeesHarnessSessionList extends DeesElement {
     `;
   }
 
-  private renderUnattachedResources(resourcesArg: IHarnessResourceMeta[]): TemplateResult {
-    if (!resourcesArg.length) return html``;
-    return html`
-      <section class="resourceSection" aria-labelledby="unattached-resources-heading">
-        <h2 class="resourceSectionTitle" id="unattached-resources-heading">Resources</h2>
-        <ul class="resourceList" aria-label="Unattached resources">
-          ${repeat(
-            resourcesArg,
-            (resource) => resource.id,
-            (resource) => this.renderResource(resource, null),
-          )}
-        </ul>
-      </section>
-    `;
-  }
-
-  private renderResource(
+  private renderResourceItem(
     resourceArg: IHarnessResourceMeta,
-    sessionIdArg: string | null,
+    groupIdArg: string | null,
+    indexArg: number,
+    attachedTarget: IHarnessSessionListItemRef | null,
   ): TemplateResult {
     const selected = resourceArg.id === this.selectedResourceId;
-    const dragging = resourceArg.id === this.draggingResourceId;
-    const eligibleTargetCount = this.eligibleSessionIds(resourceArg.id).filter(
-      (sessionId) => sessionId !== sessionIdArg,
-    ).length;
+    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 title = resourceArg.title || resourceArg.id;
+    const projectLabel = resourceArg.projectLabel?.trim() ?? '';
+    const dropIndex = indexArg < 0 ? 0 : indexArg;
     return html`
-      <li
-        class="resourceRow ${selected ? 'selected' : ''} ${dragging ? 'resourceDragging' : ''}"
+      <article
+        class="resourceRow ${selected ? 'selected' : ''} ${draggable ? 'draggable' : ''} ${
+          dragging ? 'dragging' : ''
+        }"
         data-resource-id=${resourceArg.id}
-        data-resource-session-id=${sessionIdArg ?? ''}
+        data-item-kind="resource"
+        data-item-id=${resourceArg.id}
+        data-resource-target=${attachedTarget ? `${attachedTarget.kind}:${attachedTarget.id}` : ''}
+        data-drop-group-id=${groupIdArg ?? ''}
+        data-drop-index=${dropIndex}
+        data-drop-kind=${indexArg < 0 ? 'slot' : 'card'}
         @dblclick=${(event: MouseEvent) => {
           event.stopPropagation();
-          if (this.eventTargetsResourceControl(event)) return;
-          this.emitResource('harness-resource-open', resourceArg, sessionIdArg);
+          if (this.eventTargetsResourceControl(event) || this.eventTargetsDragHandle(event)) return;
+          this.emitResource('harness-resource-open', resourceArg, attachedTarget);
         }}
         @contextmenu=${(event: MouseEvent) => {
           event.preventDefault();
@@ -1639,43 +1670,29 @@ export class DeesHarnessSessionList extends DeesElement {
           )) as HTMLElement | undefined)
             ?? (event.currentTarget as HTMLElement).querySelector<HTMLElement>('.resourcePrimary')
             ?? event.currentTarget as HTMLElement;
-          this.emitResourceContext(event, resourceArg, sessionIdArg, 'pointer', focusTarget);
+          this.emitResourceContext(event, resourceArg, attachedTarget, 'pointer', focusTarget);
         }}
       >
-        <button
-          class="resourceDragHandle"
-          type="button"
-          title=${eligibleTargetCount
-            ? 'Drag to associate with an eligible conversation'
-            : 'No eligible conversations'}
-          aria-label=${`Associate ${resourceArg.title || resourceArg.id} by dragging`}
-          aria-keyshortcuts="ContextMenu Shift+F10"
-          ?disabled=${eligibleTargetCount === 0}
-          @pointerdown=${(event: PointerEvent) => {
-            this.handleResourcePointerDown(event, resourceArg, sessionIdArg);
-          }}
-          @pointermove=${this.handlePointerMove}
-          @pointerup=${this.handlePointerUp}
-          @pointercancel=${this.handlePointerCancel}
-          @lostpointercapture=${this.handleLostPointerCapture}
-          @keydown=${(event: KeyboardEvent) => {
-            this.handleResourceContextKey(event, resourceArg, sessionIdArg);
-          }}
-        >
-          <dees-icon icon="lucide:GripVertical" iconSize="13"></dees-icon>
-        </button>
+        ${draggable
+          ? this.renderDragHandle(
+              { kind: 'resource', id: resourceArg.id },
+              title,
+              groupIdArg,
+              indexArg,
+            )
+          : ''}
         <button
           class="resourcePrimary"
           type="button"
           aria-current=${selected ? 'true' : 'false'}
-          @click=${() => this.emitResource('harness-resource-select', resourceArg, sessionIdArg)}
+          @click=${() => this.emitResource('harness-resource-select', resourceArg, attachedTarget)}
           @keydown=${(event: KeyboardEvent) => {
             if (event.key === 'Enter') {
               event.preventDefault();
-              this.emitResource('harness-resource-open', resourceArg, sessionIdArg);
+              this.emitResource('harness-resource-open', resourceArg, attachedTarget);
               return;
             }
-            this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+            this.handleResourceContextKey(event, resourceArg, attachedTarget);
           }}
         >
           <dees-icon
@@ -1684,36 +1701,53 @@ export class DeesHarnessSessionList extends DeesElement {
             iconSize="14"
           ></dees-icon>
           <span class="resourceCopy">
-            <span class="resourceTitle">${resourceArg.title || resourceArg.id}</span>
+            <span class="resourceTitle">${title}</span>
             ${resourceArg.preview ? html`<span class="resourcePreview">${resourceArg.preview}</span>` : ''}
             <span class="resourceMeta">
-              ${resourceArg.kind}${resourceArg.state ? ` · ${resourceArg.state}` : ''}${
+              ${resourceArg.kind}${projectLabel ? ` · ${projectLabel}` : ''}${
+                resourceArg.state ? ` · ${resourceArg.state}` : ''
+              }${
                 resourceArg.updatedAt || resourceArg.createdAt
                   ? ` · ${harnessFormatRelativeTime(resourceArg.updatedAt ?? resourceArg.createdAt)}`
                   : ''
               }
             </span>
+            ${attachedTarget
+              ? html`
+                  <span class="resourceAttachment" title=${`Attached to ${attachedTitle}`}>
+                    <dees-icon aria-hidden="true" icon="lucide:Link" iconSize="10"></dees-icon>
+                    <span class="visuallyHidden">Attached to </span>
+                    <span class="resourceAttachmentName">${attachedTitle}</span>
+                  </span>
+                `
+              : ''}
           </span>
         </button>
         <button
           class="resourceActions"
           type="button"
           title="Resource actions"
-          aria-label=${`Actions for ${resourceArg.title || resourceArg.id}`}
+          aria-label=${`Actions for ${title}`}
           aria-haspopup="menu"
           aria-expanded=${contextOpen ? 'true' : 'false'}
           aria-keyshortcuts="ContextMenu Shift+F10"
           @click=${(event: MouseEvent) => {
             event.stopPropagation();
-            this.emitResourceContext(event, resourceArg, sessionIdArg, 'action', event.currentTarget as HTMLElement);
+            this.emitResourceContext(
+              event,
+              resourceArg,
+              attachedTarget,
+              'action',
+              event.currentTarget as HTMLElement,
+            );
           }}
           @keydown=${(event: KeyboardEvent) => {
-            this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+            this.handleResourceContextKey(event, resourceArg, attachedTarget);
           }}
         >
           <dees-icon icon="lucide:Ellipsis" iconSize="15"></dees-icon>
         </button>
-      </li>
+      </article>
     `;
   }
 
@@ -1755,10 +1789,7 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private eventTargetsResourceControl(event: Event): boolean {
     return event.composedPath().some(
-      (target) => target instanceof HTMLElement && (
-        target.classList.contains('resourceDragHandle')
-        || target.classList.contains('resourceActions')
-      ),
+      (target) => target instanceof HTMLElement && target.classList.contains('resourceActions'),
     );
   }
 
@@ -1803,29 +1834,9 @@ export class DeesHarnessSessionList extends DeesElement {
     this.collapsedGroupIds = next;
   }
 
-  private sortableSessions(
-    sessionsArg: IHarnessSessionMeta[],
-    excludeDraggingArg = true,
-  ): IHarnessSessionMeta[] {
-    return sessionsArg.filter((session) => (
-      session.draggable !== false
-      && (!excludeDraggingArg || session.id !== this.draggingSessionId)
-    ));
-  }
-
-  private sessionsForGroup(groupIdArg: string | null): IHarnessSessionMeta[] {
-    if (groupIdArg === null) return this.ungroupedSessions;
-    const group = this.groups.find((candidate) => candidate.id === groupIdArg);
-    if (!group) return [];
-    const byId = this.sessionsById;
-    return group.sessionIds
-      .map((sessionId) => byId.get(sessionId))
-      .filter((session): session is IHarnessSessionMeta => session !== undefined);
-  }
-
   private handlePointerDown(
     eventArg: PointerEvent,
-    sessionArg: IHarnessSessionMeta,
+    refArg: IHarnessSessionListItemRef,
     groupIdArg: string | null,
     logicalIndexArg: number,
   ): void {
@@ -1836,15 +1847,14 @@ export class DeesHarnessSessionList extends DeesElement {
       || logicalIndexArg < 0
     ) return;
     const handle = eventArg.currentTarget as HTMLElement;
-    const source = handle.closest<HTMLElement>('.item');
+    const source = handle.closest<HTMLElement>('.item, .resourceRow');
     if (!source) return;
     const sourceRect = source.getBoundingClientRect();
     this.pointerDragGesture = {
-      type: 'session',
       pointerId: eventArg.pointerId,
       handle,
       source,
-      sessionId: sessionArg.id,
+      item: itemRef(refArg),
       sourceGroupId: groupIdArg,
       sourceLogicalIndex: logicalIndexArg,
       startClientX: eventArg.clientX,
@@ -1862,44 +1872,6 @@ export class DeesHarnessSessionList extends DeesElement {
     }
   }
 
-  private handleResourcePointerDown(
-    eventArg: PointerEvent,
-    resourceArg: IHarnessResourceMeta,
-    fromSessionIdArg: string | null,
-  ): void {
-    if (
-      this.pointerDragGesture
-      || eventArg.button !== 0
-      || !eventArg.isPrimary
-      || this.eligibleSessionIds(resourceArg.id).every((sessionId) => sessionId === fromSessionIdArg)
-    ) return;
-    const handle = eventArg.currentTarget as HTMLElement;
-    const source = handle.closest<HTMLElement>('.resourceRow');
-    if (!source) return;
-    const sourceRect = source.getBoundingClientRect();
-    this.pointerDragGesture = {
-      type: 'resource',
-      pointerId: eventArg.pointerId,
-      handle,
-      source,
-      resourceId: resourceArg.id,
-      fromSessionId: fromSessionIdArg,
-      eligibleSessionIds: new Set(this.eligibleSessionIds(resourceArg.id)),
-      startClientX: eventArg.clientX,
-      startClientY: eventArg.clientY,
-      grabOffsetX: eventArg.clientX - sourceRect.left,
-      grabOffsetY: eventArg.clientY - sourceRect.top,
-      phase: 'pending',
-    };
-    window.addEventListener('keydown', this.handleDragKeyDown, true);
-    window.addEventListener('blur', this.handleDragWindowBlur);
-    try {
-      handle.setPointerCapture(eventArg.pointerId);
-    } catch {
-      this.finishPointerDrag(false);
-    }
-  }
-
   private readonly handlePointerMove = (eventArg: PointerEvent): void => {
     const gesture = this.pointerDragGesture;
     if (!gesture || eventArg.pointerId !== gesture.pointerId) return;
@@ -1914,21 +1886,8 @@ export class DeesHarnessSessionList extends DeesElement {
         eventArg.clientY - gesture.startClientY,
       ) < dragThresholdPixels
     ) return;
-    if (
-      gesture.phase === 'pending'
-      && !(gesture.type === 'session'
-        ? this.startPointerDrag(eventArg, gesture)
-        : this.startResourcePointerDrag(eventArg, gesture))
-    ) return;
+    if (gesture.phase === 'pending' && !this.startPointerDrag(eventArg, gesture)) return;
     eventArg.preventDefault();
-    if (gesture.type === 'resource') {
-      this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gesture);
-      this.dragAutoScrollClientX = eventArg.clientX;
-      this.dragAutoScrollClientY = eventArg.clientY;
-      this.updateDragAutoScrollVelocity();
-      this.updateResourceDropTargetFromPointer(eventArg.clientX, eventArg.clientY);
-      return;
-    }
     this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
     this.dragAutoScrollClientX = eventArg.clientX;
     this.dragAutoScrollClientY = eventArg.clientY;
@@ -1940,14 +1899,6 @@ export class DeesHarnessSessionList extends DeesElement {
     const gesture = this.pointerDragGesture;
     if (!gesture || eventArg.pointerId !== gesture.pointerId) return;
     if (gesture.phase === 'active') {
-      if (gesture.type === 'resource') {
-        this.dragAutoScrollClientX = eventArg.clientX;
-        this.dragAutoScrollClientY = eventArg.clientY;
-        this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gesture);
-        this.updateResourceDropTargetFromPointer(eventArg.clientX, eventArg.clientY);
-        this.finishPointerDrag(true);
-        return;
-      }
       this.dragAutoScrollClientX = eventArg.clientX;
       this.dragAutoScrollClientY = eventArg.clientY;
       this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
@@ -1993,9 +1944,9 @@ export class DeesHarnessSessionList extends DeesElement {
     gestureArg.phase = 'active';
     this.reflowGeneration += 1;
     this.cancelReflowAnimations();
-    this.draggedItemHeight = Math.ceil(sourceRect.height);
-    this.draggingSessionId = gestureArg.sessionId;
-    const remainingCount = this.sortableSessions(this.sessionsForGroup(gestureArg.sourceGroupId)).length;
+    this.draggedItemHeight = sourceRect.height;
+    this.draggingItem = itemRef(gestureArg.item);
+    const remainingCount = this.sortableItems(this.itemsForGroup(gestureArg.sourceGroupId)).length;
     this.dropSlot = {
       groupId: gestureArg.sourceGroupId,
       index: Math.min(gestureArg.sourceLogicalIndex, remainingCount),
@@ -2003,27 +1954,6 @@ export class DeesHarnessSessionList extends DeesElement {
     return true;
   }
 
-  private startResourcePointerDrag(
-    eventArg: PointerEvent,
-    gestureArg: IResourcePointerDragGesture,
-  ): boolean {
-    const sourceRect = gestureArg.source.getBoundingClientRect();
-    gestureArg.source.classList.add('resourceDragging');
-    gestureArg.source.style.setProperty('--resource-drag-preview-width', `${sourceRect.width}px`);
-    this.moveResourceDragPreview(eventArg.clientX, eventArg.clientY, gestureArg);
-    gestureArg.source.setAttribute('popover', 'manual');
-    try {
-      gestureArg.source.showPopover();
-    } catch {
-      this.finishPointerDrag(false);
-      return false;
-    }
-    gestureArg.phase = 'active';
-    this.draggingResourceId = gestureArg.resourceId;
-    this.resourceDropTargetSessionId = '';
-    return true;
-  }
-
   private moveDragPreview(
     clientXArg: number,
     clientYArg: number,
@@ -2039,49 +1969,21 @@ export class DeesHarnessSessionList extends DeesElement {
     );
   }
 
-  private moveResourceDragPreview(
-    clientXArg: number,
-    clientYArg: number,
-    gestureArg: IResourcePointerDragGesture,
-  ): void {
-    gestureArg.source.style.setProperty(
-      '--resource-drag-preview-x',
-      `${clientXArg - gestureArg.grabOffsetX}px`,
-    );
-    gestureArg.source.style.setProperty(
-      '--resource-drag-preview-y',
-      `${clientYArg - gestureArg.grabOffsetY}px`,
-    );
-  }
-
-  private updateResourceDropTargetFromPointer(clientXArg: number, clientYArg: number): void {
-    const gesture = this.pointerDragGesture;
-    if (gesture?.type !== 'resource' || gesture.phase !== 'active') return;
-    const hit = this.shadowRoot?.elementFromPoint(clientXArg, clientYArg);
-    const target = hit?.closest<HTMLElement>('.item[data-session-id]');
-    const sessionId = target?.dataset.sessionId ?? '';
-    this.resourceDropTargetSessionId = (
-      sessionId
-      && sessionId !== gesture.fromSessionId
-      && this.isResourceTargetEligible(gesture.resourceId, sessionId)
-    ) ? sessionId : '';
-  }
-
   private setDropSlot(groupIdArg: string | null, indexArg: number): void {
     const current = this.dropSlot;
     if (current && current.groupId === groupIdArg && current.index === indexArg) return;
-    const previousRects = this.captureCardRects();
+    const previousRects = this.captureRowRects();
     const generation = ++this.reflowGeneration;
     this.dropSlot = { groupId: groupIdArg, index: indexArg };
-    void this.animateCardReflow(previousRects, generation);
+    void this.animateRowReflow(previousRects, generation);
   }
 
   private clearDropSlot(): void {
     if (!this.dropSlot) return;
-    const previousRects = this.captureCardRects();
+    const previousRects = this.captureRowRects();
     const generation = ++this.reflowGeneration;
     this.dropSlot = undefined;
-    void this.animateCardReflow(previousRects, generation);
+    void this.animateRowReflow(previousRects, generation);
   }
 
   private updateDragAutoScrollVelocity(): void {
@@ -2134,14 +2036,7 @@ export class DeesHarnessSessionList extends DeesElement {
       this.stopDragAutoScroll();
       return;
     }
-    if (gesture.type === 'resource') {
-      this.updateResourceDropTargetFromPointer(
-        this.dragAutoScrollClientX,
-        this.dragAutoScrollClientY,
-      );
-    } else {
-      this.updateDropSlotFromPointer();
-    }
+    this.updateDropSlotFromPointer();
     this.dragAutoScrollFrame = requestAnimationFrame(this.runDragAutoScroll);
   };
 
@@ -2165,6 +2060,7 @@ export class DeesHarnessSessionList extends DeesElement {
       }
     }
     const selector = '[data-drop-group-id][data-drop-index][data-drop-kind]';
+    const dragging = this.draggingItem;
     let target: HTMLElement | undefined;
     const offsets = this.dragAutoScrollVelocity === 0
       ? [0, -8, 8, -16, 16, -32, 32]
@@ -2176,7 +2072,11 @@ export class DeesHarnessSessionList extends DeesElement {
       const candidate = hit?.closest<HTMLElement>(selector);
       if (
         candidate
-        && candidate.dataset.sessionId !== this.draggingSessionId
+        && !(
+          dragging
+          && candidate.dataset.itemKind === dragging.kind
+          && candidate.dataset.itemId === dragging.id
+        )
         && Number(candidate.dataset.dropIndex) >= 0
       ) {
         target = candidate;
@@ -2235,70 +2135,69 @@ export class DeesHarnessSessionList extends DeesElement {
   }
 
   private createMoveDetail(
-    sessionIdArg: string,
-    groupIdArg: string | null,
+    refArg: IHarnessSessionListItemRef,
+    toGroupIdArg: string | null,
     indexArg: number,
-  ): IHarnessSessionMoveDetail {
-    const targetSessions = this.sortableSessions(this.sessionsForGroup(groupIdArg));
-    const beforeSessionId = targetSessions[Math.max(0, indexArg)]?.id;
-    const sourceGroupId = this.groups.find((group) => group.sessionIds.includes(sessionIdArg))?.id ?? null;
-    const sourceSessions = this.sortableSessions(this.sessionsForGroup(sourceGroupId), false);
-    const sourceIndex = sourceSessions.findIndex((session) => session.id === sessionIdArg);
-    const compatibilityIndex = (
-      sourceGroupId === groupIdArg
-      && sourceIndex >= 0
-      && indexArg > sourceIndex
-    ) ? indexArg + 1 : indexArg;
+    sourceArg: THarnessItemMoveSource,
+  ): IHarnessItemMoveDetail {
+    const targetItems = this.sortableItems(this.itemsForGroup(toGroupIdArg));
+    const beforeItem = targetItems[Math.max(0, indexArg)];
     return {
-      sessionId: sessionIdArg,
-      groupId: groupIdArg,
-      index: Math.max(0, compatibilityIndex),
-      ...(beforeSessionId ? { beforeSessionId } : {}),
+      item: itemRef(refArg),
+      fromGroupId: this.groupIdForItem(refArg),
+      toGroupId: toGroupIdArg,
+      beforeItem: beforeItem ? itemRef(beforeItem) : null,
+      source: sourceArg,
     };
   }
 
+  private emitItemMove(detailArg: IHarnessItemMoveDetail): void {
+    this.dispatchEvent(
+      new CustomEvent('harness-item-move', { detail: detailArg, bubbles: true, composed: true }),
+    );
+  }
+
   private handleKeyboardMove(
     eventArg: KeyboardEvent,
-    sessionArg: IHarnessSessionMeta,
+    refArg: IHarnessSessionListItemRef,
+    titleArg: string,
     groupIdArg: string | null,
   ): void {
     if (!['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(eventArg.key)) return;
     eventArg.preventDefault();
     eventArg.stopPropagation();
-    const sessions = this.sortableSessions(this.sessionsForGroup(groupIdArg), false);
-    const sourceIndex = sessions.findIndex((session) => session.id === sessionArg.id);
+    const items = this.sortableItems(this.itemsForGroup(groupIdArg), false);
+    const sourceIndex = items.findIndex((item) => sameItem(item, refArg));
     if (sourceIndex < 0) return;
-    const sectionIds: Array<string | null> = [...this.groups.map((group) => group.id), null];
+    const sectionIds: Array<string | null> = [...this.effectiveGroups.map((group) => group.id), null];
     const sectionIndex = sectionIds.indexOf(groupIdArg);
     const adjacentGroupId = eventArg.key === 'ArrowUp' && sourceIndex === 0 && sectionIndex > 0
       ? sectionIds[sectionIndex - 1]
       : eventArg.key === 'ArrowDown'
-          && sourceIndex === sessions.length - 1
+          && sourceIndex === items.length - 1
           && sectionIndex >= 0
           && sectionIndex < sectionIds.length - 1
         ? sectionIds[sectionIndex + 1]
         : undefined;
     if (adjacentGroupId !== undefined) {
-      const targetSessions = this.sortableSessions(this.sessionsForGroup(adjacentGroupId), false);
-      const targetIndex = eventArg.key === 'ArrowUp' ? targetSessions.length : 0;
-      const beforeSession = targetSessions[targetIndex];
-      const detail: IHarnessSessionMoveDetail = {
-        sessionId: sessionArg.id,
-        groupId: adjacentGroupId,
-        index: targetIndex,
-        ...(beforeSession ? { beforeSessionId: beforeSession.id } : {}),
-      };
+      const targetItems = this.sortableItems(this.itemsForGroup(adjacentGroupId), false);
+      const targetIndex = eventArg.key === 'ArrowUp' ? targetItems.length : 0;
+      const beforeItem = targetItems[targetIndex];
       const groupName = adjacentGroupId === null
         ? 'Ungrouped'
-        : this.groups.find((group) => group.id === adjacentGroupId)?.name ?? adjacentGroupId;
-      this.moveAnnouncement = `Moved ${sessionArg.title || sessionArg.id} to ${groupName}.`;
-      this.keyboardMoveFocus = { sessionId: sessionArg.id, groupId: adjacentGroupId };
-      this.dispatchEvent(
-        new CustomEvent('harness-session-move', { detail, bubbles: true, composed: true }),
-      );
+        : this.effectiveGroups.find((group) => group.id === adjacentGroupId)?.name ?? adjacentGroupId;
+      this.moveAnnouncement = `Moved ${titleArg} to ${groupName}.`;
+      this.keyboardMoveFocus = { item: itemRef(refArg), groupId: adjacentGroupId };
+      this.emitItemMove({
+        item: itemRef(refArg),
+        fromGroupId: groupIdArg,
+        toGroupId: adjacentGroupId,
+        beforeItem: beforeItem ? itemRef(beforeItem) : null,
+        source: 'keyboard',
+      });
       return;
     }
-    const remaining = sessions.filter((session) => session.id !== sessionArg.id);
+    const remaining = items.filter((item) => !sameItem(item, refArg));
     const targetIndex = eventArg.key === 'Home'
       ? 0
       : eventArg.key === 'End'
@@ -2307,27 +2206,30 @@ export class DeesHarnessSessionList extends DeesElement {
           ? Math.max(0, sourceIndex - 1)
           : Math.min(remaining.length, sourceIndex + 1);
     if (targetIndex === sourceIndex) return;
-    const beforeSession = remaining[targetIndex];
-    const compatibilityIndex = targetIndex > sourceIndex ? targetIndex + 1 : targetIndex;
-    const detail: IHarnessSessionMoveDetail = {
-      sessionId: sessionArg.id,
-      groupId: groupIdArg,
-      index: compatibilityIndex,
-      ...(beforeSession ? { beforeSessionId: beforeSession.id } : {}),
-    };
-    this.moveAnnouncement = beforeSession
-      ? `Moved ${sessionArg.title || sessionArg.id} before ${beforeSession.title || beforeSession.id}.`
-      : `Moved ${sessionArg.title || sessionArg.id} to the end.`;
-    this.dispatchEvent(
-      new CustomEvent('harness-session-move', { detail, bubbles: true, composed: true }),
-    );
+    const beforeItem = remaining[targetIndex];
+    this.moveAnnouncement = beforeItem
+      ? `Moved ${titleArg} before ${beforeItem.title}.`
+      : `Moved ${titleArg} to the end.`;
+    this.emitItemMove({
+      item: itemRef(refArg),
+      fromGroupId: groupIdArg,
+      toGroupId: groupIdArg,
+      beforeItem: beforeItem ? itemRef(beforeItem) : null,
+      source: 'keyboard',
+    });
+  }
+
+  private rowKey(rowArg: HTMLElement): string {
+    return `${rowArg.dataset.itemKind}:${rowArg.dataset.itemId}`;
   }
 
-  private captureCardRects(): Map<string, DOMRect> {
+  private captureRowRects(): Map<string, DOMRect> {
     const result = new Map<string, DOMRect>();
-    for (const item of this.shadowRoot?.querySelectorAll<HTMLElement>('.item[data-session-id]') ?? []) {
-      if (item.dataset.sessionId === this.draggingSessionId) continue;
-      result.set(item.dataset.sessionId ?? '', item.getBoundingClientRect());
+    const draggingKey = this.draggingItem ? itemKey(this.draggingItem) : '';
+    for (const row of this.shadowRoot?.querySelectorAll<HTMLElement>('[data-item-kind][data-item-id]') ?? []) {
+      const key = this.rowKey(row);
+      if (key === draggingKey) continue;
+      result.set(key, row.getBoundingClientRect());
     }
     return result;
   }
@@ -2335,14 +2237,8 @@ export class DeesHarnessSessionList extends DeesElement {
   private restoreKeyboardMoveFocus(): void {
     const pending = this.keyboardMoveFocus;
     if (!pending) return;
-    const currentGroupId = this.groups.find(
-      (group) => group.sessionIds.includes(pending.sessionId),
-    )?.id ?? null;
-    if (currentGroupId !== pending.groupId) return;
-    const item = Array.from(
-      this.shadowRoot?.querySelectorAll<HTMLElement>('.item[data-session-id]') ?? [],
-    ).find((candidate) => candidate.dataset.sessionId === pending.sessionId);
-    const handle = item?.querySelector<HTMLElement>('.dragHandle');
+    if (this.groupIdForItem(pending.item) !== pending.groupId) return;
+    const handle = this.rowElementFor(pending.item)?.querySelector<HTMLElement>('.dragHandle');
     if (handle) {
       handle.focus();
       this.keyboardMoveFocus = undefined;
@@ -2357,35 +2253,52 @@ export class DeesHarnessSessionList extends DeesElement {
     }
   }
 
-  private eligibleSessionIds(resourceIdArg: string): string[] {
-    const knownSessionIds = new Set(this.sessions.map((session) => session.id));
-    const result: string[] = [];
+  /** Known, de-duplicated targets the host allows; an absent entry means unrestricted. */
+  private eligibleTargets(resourceIdArg: string): IHarnessSessionListItemRef[] | undefined {
+    const declared = this.eligibleTargetsByResourceId[resourceIdArg];
+    if (!declared) return undefined;
+    const itemsByKey = this.itemsByKey;
+    const result: IHarnessSessionListItemRef[] = [];
     const seen = new Set<string>();
-    for (const sessionId of this.eligibleSessionIdsByResourceId[resourceIdArg] ?? []) {
-      if (!knownSessionIds.has(sessionId) || seen.has(sessionId)) continue;
-      seen.add(sessionId);
-      result.push(sessionId);
+    for (const target of declared) {
+      const key = target && itemKey(target);
+      if (
+        !key
+        || seen.has(key)
+        || !itemsByKey.has(key)
+        || sameItem(target, { kind: 'resource', id: resourceIdArg })
+      ) continue;
+      seen.add(key);
+      result.push(itemRef(target));
     }
     return result;
   }
 
-  private sameSessionIds(firstArg: ReadonlySet<string>, secondArg: ReadonlySet<string>): boolean {
-    return firstArg.size === secondArg.size
-      && [...firstArg].every((sessionId) => secondArg.has(sessionId));
+  private isResourceTargetEligible(
+    resourceIdArg: string,
+    targetArg: IHarnessSessionListItemRef,
+  ): boolean {
+    const eligible = this.eligibleTargets(resourceIdArg);
+    return eligible === undefined || eligible.some((candidate) => sameItem(candidate, targetArg));
+  }
+
+  private itemTitleFor(refArg: IHarnessSessionListItemRef): string {
+    return this.itemsByKey.get(itemKey(refArg))?.title ?? refArg.id;
   }
 
-  private isResourceTargetEligible(resourceIdArg: string, sessionIdArg: string): boolean {
-    return this.eligibleSessionIds(resourceIdArg).includes(sessionIdArg);
+  private emitSession(nameArg: string, sessionArg: IHarnessSessionMeta): void {
+    const detail: IHarnessSessionEventDetail = { session: sessionArg };
+    this.dispatchEvent(new CustomEvent(nameArg, { detail, bubbles: true, composed: true }));
   }
 
   private emitResource(
     nameArg: string,
     resourceArg: IHarnessResourceMeta,
-    sessionIdArg: string | null,
+    targetArg: IHarnessSessionListItemRef | null,
   ): void {
     const detail: IHarnessResourceEventDetail = {
       resource: resourceArg,
-      sessionId: sessionIdArg,
+      target: targetArg,
     };
     this.dispatchEvent(new CustomEvent(nameArg, { detail, bubbles: true, composed: true }));
   }
@@ -2393,7 +2306,7 @@ export class DeesHarnessSessionList extends DeesElement {
   private handleResourceContextKey(
     eventArg: KeyboardEvent,
     resourceArg: IHarnessResourceMeta,
-    sessionIdArg: string | null,
+    targetArg: IHarnessSessionListItemRef | null,
   ): void {
     if (!(eventArg.key === 'ContextMenu' || (eventArg.key === 'F10' && eventArg.shiftKey))) return;
     eventArg.preventDefault();
@@ -2401,7 +2314,7 @@ export class DeesHarnessSessionList extends DeesElement {
     this.emitResourceContext(
       eventArg,
       resourceArg,
-      sessionIdArg,
+      targetArg,
       'keyboard',
       eventArg.currentTarget as HTMLElement,
     );
@@ -2410,7 +2323,7 @@ export class DeesHarnessSessionList extends DeesElement {
   private emitResourceContext(
     eventArg: MouseEvent | KeyboardEvent,
     resourceArg: IHarnessResourceMeta,
-    sessionIdArg: string | null,
+    targetArg: IHarnessSessionListItemRef | null,
     sourceArg: THarnessResourceContextSource,
     focusTargetArg: HTMLElement,
   ): void {
@@ -2425,7 +2338,7 @@ export class DeesHarnessSessionList extends DeesElement {
     ].find((className) => focusTargetArg.classList.contains(className)) ?? 'resourcePrimary';
     const detail: IHarnessResourceContextDetail = {
       resource: resourceArg,
-      sessionId: sessionIdArg,
+      target: targetArg,
       clientX: sourceArg === 'pointer' && eventArg instanceof MouseEvent
         ? eventArg.clientX
         : rect.left + rect.width / 2,
@@ -2434,9 +2347,9 @@ export class DeesHarnessSessionList extends DeesElement {
         : rect.bottom,
       source: sourceArg,
       originalEvent: eventArg,
-      requestAssociation: (toSessionIdArg) => this.requestResourceAssociation(
+      requestAssociation: (toTargetArg) => this.requestResourceAssociation(
         resourceArg.id,
-        toSessionIdArg,
+        toTargetArg,
         sourceArg === 'keyboard' ? 'keyboard' : 'action',
       ),
       close: () => this.closeResourceContext(contextGeneration),
@@ -2462,9 +2375,7 @@ export class DeesHarnessSessionList extends DeesElement {
         focusTarget.focus();
         return;
       }
-      const row = Array.from(
-        this.shadowRoot?.querySelectorAll<HTMLElement>('.resourceRow[data-resource-id]') ?? [],
-      ).find((candidate) => candidate.dataset.resourceId === resourceId);
+      const row = this.rowElementFor({ kind: 'resource', id: resourceId });
       row?.querySelector<HTMLElement>(`.${focusClass || 'resourcePrimary'}`)?.focus();
     });
   }
@@ -2483,28 +2394,22 @@ export class DeesHarnessSessionList extends DeesElement {
       this.pendingResourceAssociationRequest = undefined;
       return;
     }
-    const currentSessionId = this.acceptedResourceAssociations.get(pending.resourceId) ?? null;
-    if (currentSessionId !== pending.toSessionId) {
-      if (currentSessionId !== pending.fromSessionId) {
-        const controlledSession = currentSessionId
-          ? this.sessionsById.get(currentSessionId)?.title ?? currentSessionId
-          : 'unattached';
-        this.moveAnnouncement = `Association request for ${pending.resourceTitle} was not applied; controlled association is ${controlledSession}.`;
+    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 fromSession = pending.fromSessionId
-      ? this.sessionsById.get(pending.fromSessionId)?.title ?? pending.fromSessionId
-      : '';
-    const toSession = pending.toSessionId
-      ? this.sessionsById.get(pending.toSessionId)?.title ?? pending.toSessionId
-      : '';
+    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 ${toSession}.`
+      ? `${pending.resourceTitle} is now attached to ${toTitle}.`
       : pending.intent === 'detach'
-        ? `${pending.resourceTitle} is now detached from ${fromSession}.`
-        : `${pending.resourceTitle} is now reassigned from ${fromSession} to ${toSession}.`;
+        ? `${pending.resourceTitle} is now detached from ${fromTitle}.`
+        : `${pending.resourceTitle} is now reassigned from ${fromTitle} to ${toTitle}.`;
     this.pendingResourceAssociationRequest = undefined;
   }
 
@@ -2513,12 +2418,8 @@ export class DeesHarnessSessionList extends DeesElement {
     completedArg: boolean,
   ): string {
     const resourceTitle = detailArg.resource.title || detailArg.resource.id;
-    const fromTitle = detailArg.fromSessionId
-      ? this.sessionsById.get(detailArg.fromSessionId)?.title ?? detailArg.fromSessionId
-      : '';
-    const toTitle = detailArg.toSessionId
-      ? this.sessionsById.get(detailArg.toSessionId)?.title ?? detailArg.toSessionId
-      : '';
+    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}.`
@@ -2527,7 +2428,7 @@ export class DeesHarnessSessionList extends DeesElement {
         : `Reassign ${verb} for ${resourceTitle} from ${fromTitle} to ${toTitle}.`;
   }
 
-  private async animateCardReflow(
+  private async animateRowReflow(
     previousRectsArg: Map<string, DOMRect>,
     generationArg: number,
   ): Promise<void> {
@@ -2538,15 +2439,16 @@ export class DeesHarnessSessionList extends DeesElement {
       || globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches
     ) return;
     this.cancelReflowAnimations();
-    for (const item of this.shadowRoot?.querySelectorAll<HTMLElement>('.item[data-session-id]') ?? []) {
-      const sessionId = item.dataset.sessionId ?? '';
-      if (!sessionId || sessionId === this.draggingSessionId) continue;
-      const previous = previousRectsArg.get(sessionId);
+    const draggingKey = this.draggingItem ? itemKey(this.draggingItem) : '';
+    for (const row of this.shadowRoot?.querySelectorAll<HTMLElement>('[data-item-kind][data-item-id]') ?? []) {
+      const key = this.rowKey(row);
+      if (key === draggingKey) continue;
+      const previous = previousRectsArg.get(key);
       if (!previous) continue;
-      const current = item.getBoundingClientRect();
+      const current = row.getBoundingClientRect();
       const deltaY = previous.top - current.top;
       if (Math.abs(deltaY) < 0.5) continue;
-      const animation = item.animate(
+      const animation = row.animate(
         [
           { transform: `translateY(${deltaY}px)` },
           { transform: 'translateY(0)' },
@@ -2568,24 +2470,8 @@ export class DeesHarnessSessionList extends DeesElement {
   private finishPointerDrag(commitArg: boolean): void {
     const gesture = this.pointerDragGesture;
     if (!gesture) return;
-    const sessionMoveDetail = (
-      gesture.type === 'session'
-      && commitArg
-      && gesture.phase === 'active'
-      && this.dropSlot
-    )
-      ? this.createMoveDetail(gesture.sessionId, this.dropSlot.groupId, this.dropSlot.index)
-      : undefined;
-    const resourceRequest = (
-      gesture.type === 'resource'
-      && commitArg
-      && gesture.phase === 'active'
-      && this.resourceDropTargetSessionId
-    )
-      ? {
-          resourceId: gesture.resourceId,
-          toSessionId: this.resourceDropTargetSessionId,
-        }
+    const moveDetail = (commitArg && gesture.phase === 'active' && this.dropSlot)
+      ? this.createMoveDetail(gesture.item, this.dropSlot.groupId, this.dropSlot.index, 'pointer')
       : undefined;
     this.pointerDragGesture = undefined;
     window.removeEventListener('keydown', this.handleDragKeyDown, true);
@@ -2595,19 +2481,14 @@ export class DeesHarnessSessionList extends DeesElement {
     this.cancelReflowAnimations();
     if (gesture.source.matches(':popover-open')) gesture.source.hidePopover();
     gesture.source.removeAttribute('popover');
-    gesture.source.classList.remove('dragging', 'resourceDragging');
+    gesture.source.classList.remove('dragging');
     for (const property of [
       '--drag-preview-width',
       '--drag-preview-height',
       '--drag-preview-x',
       '--drag-preview-y',
-      '--resource-drag-preview-width',
-      '--resource-drag-preview-x',
-      '--resource-drag-preview-y',
     ]) gesture.source.style.removeProperty(property);
-    this.draggingSessionId = '';
-    this.draggingResourceId = '';
-    this.resourceDropTargetSessionId = '';
+    this.draggingItem = undefined;
     this.draggedItemHeight = 0;
     this.dropSlot = undefined;
     try {
@@ -2617,21 +2498,6 @@ export class DeesHarnessSessionList extends DeesElement {
     } catch {
       // Capture may already be released or the handle may have disconnected.
     }
-    if (sessionMoveDetail) {
-      this.dispatchEvent(
-        new CustomEvent('harness-session-move', {
-          detail: sessionMoveDetail,
-          bubbles: true,
-          composed: true,
-        }),
-      );
-    }
-    if (resourceRequest) {
-      this.requestResourceAssociation(resourceRequest.resourceId, resourceRequest.toSessionId, 'drop');
-    }
-  }
-
-  private emit(name: string, session: IHarnessSessionMeta): void {
-    this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
+    if (moveDetail) this.emitItemMove(moveDetail);
   }
 }