@design.estate/dees-catalog 6.6.0 → 6.7.0

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

@@ -13,10 +13,17 @@ import {
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
   IHarnessGroupContextDetail,
+  IHarnessResourceAssociation,
+  IHarnessResourceContextDetail,
+  IHarnessResourceEventDetail,
+  IHarnessResourceMeta,
   IHarnessSessionContextDetail,
   IHarnessSessionGroup,
   IHarnessSessionMeta,
   IHarnessSessionMoveDetail,
+  THarnessResourceAssociationInteractionSource,
+  THarnessResourceAssociationRequestDetail,
+  THarnessResourceContextSource,
 } from '../interfaces.js';
 import { harnessFormatRelativeTime } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
@@ -37,6 +44,7 @@ interface IDropSlot {
 }
 
 interface IPointerDragGesture {
+  type: 'session';
   pointerId: number;
   handle: HTMLElement;
   source: HTMLElement;
@@ -50,6 +58,30 @@ interface IPointerDragGesture {
   phase: 'pending' | 'active';
 }
 
+interface IResourcePointerDragGesture {
+  type: 'resource';
+  pointerId: number;
+  handle: HTMLElement;
+  source: HTMLElement;
+  resourceId: string;
+  fromSessionId: string | null;
+  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;
+  intent: THarnessResourceAssociationRequestDetail['intent'];
+}
+
 interface IKeyboardMoveFocus {
   sessionId: string;
   groupId: string | null;
@@ -72,7 +104,9 @@ type TSectionRenderEntry =
  * `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.
+ * 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.
  */
 @customElement('dees-harness-session-list')
 export class DeesHarnessSessionList extends DeesElement {
@@ -101,12 +135,31 @@ export class DeesHarnessSessionList extends DeesElement {
   @property({ attribute: false })
   accessor ungroupedSessionIds: string[] = [];
 
+  @property({ attribute: false })
+  accessor resources: IHarnessResourceMeta[] = [];
+
+  @property({ attribute: false })
+  accessor resourceAssociations: IHarnessResourceAssociation[] = [];
+
+  @property()
+  accessor selectedResourceId = '';
+
+  /** Serializable attach/reassign targets. A missing resource entry means no eligible targets. */
+  @property({ attribute: false })
+  accessor eligibleSessionIdsByResourceId: Record<string, string[]> = {};
+
   @state()
   accessor search: string = '';
 
   @state()
   accessor draggingSessionId: string = '';
 
+  @state()
+  accessor draggingResourceId = '';
+
+  @state()
+  accessor resourceDropTargetSessionId = '';
+
   @state()
   accessor dropSlot: IDropSlot | undefined = undefined;
 
@@ -128,9 +181,16 @@ export class DeesHarnessSessionList extends DeesElement {
   @state()
   private accessor moveAnnouncement = '';
 
+  @state()
+  private accessor resourceContextResourceId = '';
+
   private reflowGeneration = 0;
   private readonly reflowAnimations = new Set<Animation>();
-  private pointerDragGesture: IPointerDragGesture | undefined;
+  private pointerDragGesture: TPointerDragGesture | undefined;
+  private pendingResourceAssociationRequest: IPendingResourceAssociationRequest | undefined;
+  private resourceContextFocusTarget: HTMLElement | undefined;
+  private resourceContextFocusClass = '';
+  private resourceContextGeneration = 0;
   private keyboardMoveFocus: IKeyboardMoveFocus | undefined;
   private scrollResizeObserver: ResizeObserver | undefined;
   private observedScrollContainer: HTMLElement | undefined;
@@ -387,6 +447,12 @@ export class DeesHarnessSessionList extends DeesElement {
         --card-accent: var(--session-error);
       }
 
+      .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);
+      }
+
       @keyframes attentionPulse {
         0%, 100% {
           background: color-mix(in srgb, var(--dees-color-bg-primary) 94%, var(--session-attention) 6%);
@@ -561,6 +627,183 @@ 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: 650;
+        letter-spacing: 0.05em;
+        text-transform: uppercase;
+      }
+
+      .resourceList {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .resourceRow {
+        display: grid;
+        grid-template-columns: 26px minmax(0, 1fr) 38px;
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-lg);
+        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.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 {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+      }
+
+      .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 {
+        display: flex;
+        min-width: 0;
+        min-height: 38px;
+        align-items: center;
+        gap: 7px;
+        padding: 5px 4px 5px 7px;
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .resourceIcon {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-secondary);
+      }
+
+      .resourceCopy {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .resourceTitle {
+        display: block;
+        overflow: hidden;
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 620;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourcePreview {
+        display: block;
+        overflow: hidden;
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        font-size: var(--dees-font-caption2-size, 10px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourceMeta {
+        display: block;
+        overflow: hidden;
+        margin-top: 1px;
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .resourceActions {
+        display: grid;
+        place-items: center;
+        min-width: 34px;
+        min-height: 34px;
+        margin: 2px;
+        padding: 0;
+        border-radius: var(--dees-radius-md);
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+      }
+
+      .resourceActions:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .resourceDragHandle:focus-visible,
+      .resourcePrimary:focus-visible,
+      .resourceActions:focus-visible {
+        z-index: 1;
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -3px;
+        border-radius: var(--dees-radius-md);
+      }
+
       .visuallyHidden {
         position: absolute;
         width: 1px;
@@ -687,6 +930,33 @@ export class DeesHarnessSessionList extends DeesElement {
           transition: none;
         }
       }
+
+      @media (pointer: coarse) {
+        .resourceRow {
+          grid-template-columns: 44px minmax(0, 1fr) 44px;
+        }
+
+        .resourceDragHandle,
+        .resourceActions {
+          min-width: 44px;
+          min-height: 44px;
+          margin: 0;
+        }
+
+        .resourcePrimary {
+          min-height: 44px;
+        }
+      }
+
+      @media (max-width: 280px) {
+        .resourceChildren {
+          margin-left: 8px;
+        }
+
+        .resourcePreview {
+          display: none;
+        }
+      }
     `,
   ];
 
@@ -694,6 +964,70 @@ export class DeesHarnessSessionList extends DeesElement {
     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) {
+      if (!resource.id || !resource.kind || !resource.title || result.has(resource.id)) continue;
+      result.set(resource.id, resource);
+    }
+    return result;
+  }
+
+  /** First valid record wins; unknown and duplicate records remain untouched but are not projected. */
+  private get acceptedResourceAssociations(): Map<string, string> {
+    const resourcesById = this.resourcesById;
+    const sessionsById = this.sessionsById;
+    const result = new Map<string, string>();
+    for (const association of this.resourceAssociations) {
+      if (
+        !resourcesById.has(association.resourceId)
+        || !sessionsById.has(association.sessionId)
+        || result.has(association.resourceId)
+      ) continue;
+      result.set(association.resourceId, association.sessionId);
+    }
+    return result;
+  }
+
+  private get acceptedResources(): IHarnessResourceMeta[] {
+    return [...this.resourcesById.values()];
+  }
+
+  private resourceMatchesSearch(resourceArg: IHarnessResourceMeta, queryArg: string): boolean {
+    return [resourceArg.id, resourceArg.kind, resourceArg.title, resourceArg.preview]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+      .includes(queryArg);
+  }
+
+  private sessionMatchesSearch(sessionArg: IHarnessSessionMeta, queryArg: string): boolean {
+    return [sessionArg.title, sessionArg.preview, sessionArg.id]
+      .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 get unattachedResources(): IHarnessResourceMeta[] {
+    const associations = this.acceptedResourceAssociations;
+    const query = this.search.trim().toLowerCase();
+    return this.acceptedResources.filter((resource) => (
+      !associations.has(resource.id)
+      && (!query || this.resourceMatchesSearch(resource, query))
+    ));
+  }
+
   private get groupedSessionIds(): Set<string> {
     const ids = new Set<string>();
     for (const group of this.groups) {
@@ -726,12 +1060,19 @@ export class DeesHarnessSessionList extends DeesElement {
 
   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) =>
-      [session.title, session.preview, session.id].filter(Boolean).join(' ').toLowerCase().includes(query),
+    return sorted.filter(
+      (session) => this.sessionMatchesSearch(session, query) || matchingAttachedSessionIds.has(session.id),
     );
   }
 
@@ -739,6 +1080,61 @@ export class DeesHarnessSessionList extends DeesElement {
     this.shadowRoot?.querySelector<HTMLInputElement>('.searchRow input')?.focus();
   }
 
+  public requestResourceAssociation(
+    resourceIdArg: string,
+    toSessionIdArg: string | 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;
+    if (
+      toSessionIdArg !== null
+      && (!this.sessionsById.has(toSessionIdArg) || !this.isResourceTargetEligible(resourceIdArg, toSessionIdArg))
+    ) return false;
+    if (toSessionIdArg === null && fromSessionId === null) return false;
+    const detail: THarnessResourceAssociationRequestDetail = fromSessionId === null
+      ? {
+          intent: 'attach',
+          resource,
+          fromSessionId: null,
+          toSessionId: toSessionIdArg!,
+          source: sourceArg,
+        }
+      : toSessionIdArg === null
+        ? {
+            intent: 'detach',
+            resource,
+            fromSessionId,
+            toSessionId: null,
+            source: sourceArg,
+          }
+        : {
+            intent: 'reassign',
+            resource,
+            fromSessionId,
+            toSessionId: toSessionIdArg,
+            source: sourceArg,
+          };
+    this.pendingResourceAssociationRequest = {
+      resourceId: resource.id,
+      resourceTitle: resource.title || resource.id,
+      fromSessionId,
+      toSessionId: toSessionIdArg,
+      intent: detail.intent,
+    };
+    this.moveAnnouncement = this.resourceAssociationAnnouncement(detail, false);
+    this.dispatchEvent(
+      new CustomEvent('harness-resource-association-request', {
+        detail,
+        bubbles: true,
+        composed: true,
+      }),
+    );
+    return true;
+  }
+
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
     this.observeScrollGeometry();
@@ -750,19 +1146,41 @@ export class DeesHarnessSessionList extends DeesElement {
     ) {
       this.finishPointerDrag(false);
     }
-    if (!changedProperties.has('sessions')) return;
-    const knownIds = new Set(this.sessions.map((session) => session.id));
-    if (this.pointerDragGesture && !knownIds.has(this.pointerDragGesture.sessionId)) {
-      this.finishPointerDrag(false);
+    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)),
+      );
+      if (
+        nextExpanded.size !== this.expandedSessionIds.size
+        || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))
+      ) {
+        this.expandedSessionIds = nextExpanded;
+      }
     }
-    const nextExpanded = new Set(
-      [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId)),
-    );
-    if (
-      nextExpanded.size !== this.expandedSessionIds.size
-      || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))
-    ) {
-      this.expandedSessionIds = nextExpanded;
+    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)
+      ) this.closeResourceContext(this.resourceContextGeneration);
+      this.reconcilePendingResourceAssociation();
+    }
+    if (changedProperties.has('eligibleSessionIdsByResourceId')) {
+      const gesture = this.pointerDragGesture;
+      if (gesture?.type === 'resource') this.finishPointerDrag(false);
     }
   }
 
@@ -776,6 +1194,7 @@ export class DeesHarnessSessionList extends DeesElement {
 
   public async disconnectedCallback(): Promise<void> {
     this.finishPointerDrag(false);
+    this.clearResourceContextState();
     this.scrollResizeObserver?.disconnect();
     this.scrollResizeObserver = undefined;
     this.observedScrollContainer = undefined;
@@ -789,7 +1208,12 @@ export class DeesHarnessSessionList extends DeesElement {
       <div class="searchRow">
         <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
         <input
-          placeholder="Search conversations"
+          placeholder=${this.acceptedResources.length
+            ? 'Search conversations and resources'
+            : 'Search conversations'}
+          aria-label=${this.acceptedResources.length
+            ? 'Search conversations and resources'
+            : 'Search conversations'}
           .value=${this.search}
           @input=${(event: Event) => {
             this.search = (event.currentTarget as HTMLInputElement).value;
@@ -839,9 +1263,16 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private renderFlatList(): TemplateResult {
     const sessions = this.filteredSessions;
-    if (!sessions.length) {
+    const unattachedResources = this.unattachedResources;
+    if (!sessions.length && !unattachedResources.length) {
       return html`<div class="emptyNote">
-        ${this.sessions.length ? 'No conversations match this search.' : this.emptyText}
+        ${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`
@@ -852,13 +1283,15 @@ export class DeesHarnessSessionList extends DeesElement {
           (session) => this.renderItem(session, null, -1),
         )}
       </div>
+      ${this.renderUnattachedResources(unattachedResources)}
     `;
   }
 
   private renderGroupedList(): TemplateResult {
     const byId = this.sessionsById;
     const ungrouped = this.ungroupedSessions;
-    if (!this.sessions.length && !this.groups.length) {
+    const unattachedResources = this.unattachedResources;
+    if (!this.sessions.length && !this.groups.length && !unattachedResources.length) {
       return html`<div class="emptyNote">${this.emptyText}</div>`;
     }
     return html`
@@ -917,6 +1350,7 @@ export class DeesHarnessSessionList extends DeesElement {
           `
         : ''}
       ${this.renderSection(ungrouped, null)}
+      ${this.renderUnattachedResources(unattachedResources)}
     `;
   }
 
@@ -1000,12 +1434,16 @@ export class DeesHarnessSessionList extends DeesElement {
     const state = session.state ?? 'normal';
     const detailsId = `session-details-${session.id}`;
     const dropIndex = index < 0 ? 0 : index;
+    const resources = this.resourcesForSession(session);
+    const isResourceDropTarget = this.resourceDropTargetSessionId === session.id;
     return html`
       <article
         class="item state-${state} ${expanded ? 'expanded' : ''} ${
           session.id === this.selectedSessionId ? 'selected' : ''
         } ${
           this.draggingSessionId === session.id ? 'dragging' : ''
+        } ${
+          isResourceDropTarget ? 'resourceDropTarget' : ''
         }"
         data-session-id=${session.id}
         data-drop-group-id=${groupId ?? ''}
@@ -1091,6 +1529,20 @@ 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}>
@@ -1110,6 +1562,129 @@ 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(
+    resourceArg: IHarnessResourceMeta,
+    sessionIdArg: string | 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 contextOpen = resourceArg.id === this.resourceContextResourceId;
+    return html`
+      <li
+        class="resourceRow ${selected ? 'selected' : ''} ${dragging ? 'resourceDragging' : ''}"
+        data-resource-id=${resourceArg.id}
+        data-resource-session-id=${sessionIdArg ?? ''}
+        @dblclick=${(event: MouseEvent) => {
+          event.stopPropagation();
+          if (this.eventTargetsResourceControl(event)) return;
+          this.emitResource('harness-resource-open', resourceArg, sessionIdArg);
+        }}
+        @contextmenu=${(event: MouseEvent) => {
+          event.preventDefault();
+          event.stopPropagation();
+          const focusTarget = (event.composedPath().find((target) => (
+            target instanceof HTMLElement
+            && target.matches('button:not(:disabled)')
+          )) as HTMLElement | undefined)
+            ?? (event.currentTarget as HTMLElement).querySelector<HTMLElement>('.resourcePrimary')
+            ?? event.currentTarget as HTMLElement;
+          this.emitResourceContext(event, resourceArg, sessionIdArg, '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>
+        <button
+          class="resourcePrimary"
+          type="button"
+          aria-current=${selected ? 'true' : 'false'}
+          @click=${() => this.emitResource('harness-resource-select', resourceArg, sessionIdArg)}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              this.emitResource('harness-resource-open', resourceArg, sessionIdArg);
+              return;
+            }
+            this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+          }}
+        >
+          <dees-icon
+            class="resourceIcon"
+            icon=${resourceArg.icon || 'lucide:Box'}
+            iconSize="14"
+          ></dees-icon>
+          <span class="resourceCopy">
+            <span class="resourceTitle">${resourceArg.title || resourceArg.id}</span>
+            ${resourceArg.preview ? html`<span class="resourcePreview">${resourceArg.preview}</span>` : ''}
+            <span class="resourceMeta">
+              ${resourceArg.kind}${resourceArg.state ? ` · ${resourceArg.state}` : ''}${
+                resourceArg.updatedAt || resourceArg.createdAt
+                  ? ` · ${harnessFormatRelativeTime(resourceArg.updatedAt ?? resourceArg.createdAt)}`
+                  : ''
+              }
+            </span>
+          </span>
+        </button>
+        <button
+          class="resourceActions"
+          type="button"
+          title="Resource actions"
+          aria-label=${`Actions for ${resourceArg.title || resourceArg.id}`}
+          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);
+          }}
+          @keydown=${(event: KeyboardEvent) => {
+            this.handleResourceContextKey(event, resourceArg, sessionIdArg);
+          }}
+        >
+          <dees-icon icon="lucide:Ellipsis" iconSize="15"></dees-icon>
+        </button>
+      </li>
+    `;
+  }
+
   private eventTargetsExpandToggle(event: Event): boolean {
     return event.composedPath().some(
       (target) => target instanceof HTMLElement && target.classList.contains('expandToggle'),
@@ -1122,6 +1697,15 @@ 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')
+      ),
+    );
+  }
+
   private sessionStateLabel(state: NonNullable<IHarnessSessionMeta['state']>): string {
     switch (state) {
       case 'working': return 'Working';
@@ -1186,6 +1770,7 @@ export class DeesHarnessSessionList extends DeesElement {
     if (!source) return;
     const sourceRect = source.getBoundingClientRect();
     this.pointerDragGesture = {
+      type: 'session',
       pointerId: eventArg.pointerId,
       handle,
       source,
@@ -1207,6 +1792,43 @@ 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,
+      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;
@@ -1221,8 +1843,21 @@ export class DeesHarnessSessionList extends DeesElement {
         eventArg.clientY - gesture.startClientY,
       ) < dragThresholdPixels
     ) return;
-    if (gesture.phase === 'pending' && !this.startPointerDrag(eventArg, gesture)) return;
+    if (
+      gesture.phase === 'pending'
+      && !(gesture.type === 'session'
+        ? this.startPointerDrag(eventArg, gesture)
+        : this.startResourcePointerDrag(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;
@@ -1234,6 +1869,14 @@ 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);
@@ -1289,6 +1932,27 @@ 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,
@@ -1304,6 +1968,34 @@ 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;
@@ -1323,7 +2015,8 @@ export class DeesHarnessSessionList extends DeesElement {
 
   private updateDragAutoScrollVelocity(): void {
     const container = this.scrollContainer;
-    if (!container || !this.draggingSessionId) return;
+    const gesture = this.pointerDragGesture;
+    if (!container || gesture?.phase !== 'active') return;
     const rect = container.getBoundingClientRect();
     if (this.dragAutoScrollClientX < rect.left || this.dragAutoScrollClientX > rect.right) {
       this.stopDragAutoScroll();
@@ -1356,7 +2049,8 @@ export class DeesHarnessSessionList extends DeesElement {
   private readonly runDragAutoScroll = (timestampArg: number): void => {
     this.dragAutoScrollFrame = undefined;
     const container = this.scrollContainer;
-    if (!container || !this.draggingSessionId || this.dragAutoScrollVelocity === 0) return;
+    const gesture = this.pointerDragGesture;
+    if (!container || gesture?.phase !== 'active' || this.dragAutoScrollVelocity === 0) return;
     const elapsedMs = Math.min(34, Math.max(0, timestampArg - this.dragAutoScrollLastFrame));
     this.dragAutoScrollLastFrame = timestampArg;
     const previousScrollTop = container.scrollTop;
@@ -1369,7 +2063,14 @@ export class DeesHarnessSessionList extends DeesElement {
       this.stopDragAutoScroll();
       return;
     }
-    this.updateDropSlotFromPointer();
+    if (gesture.type === 'resource') {
+      this.updateResourceDropTargetFromPointer(
+        this.dragAutoScrollClientX,
+        this.dragAutoScrollClientY,
+      );
+    } else {
+      this.updateDropSlotFromPointer();
+    }
     this.dragAutoScrollFrame = requestAnimationFrame(this.runDragAutoScroll);
   };
 
@@ -1585,6 +2286,171 @@ export class DeesHarnessSessionList extends DeesElement {
     }
   }
 
+  private eligibleSessionIds(resourceIdArg: string): string[] {
+    const knownSessionIds = new Set(this.sessions.map((session) => session.id));
+    const result: string[] = [];
+    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);
+    }
+    return result;
+  }
+
+  private isResourceTargetEligible(resourceIdArg: string, sessionIdArg: string): boolean {
+    return this.eligibleSessionIds(resourceIdArg).includes(sessionIdArg);
+  }
+
+  private emitResource(
+    nameArg: string,
+    resourceArg: IHarnessResourceMeta,
+    sessionIdArg: string | null,
+  ): void {
+    const detail: IHarnessResourceEventDetail = {
+      resource: resourceArg,
+      sessionId: sessionIdArg,
+    };
+    this.dispatchEvent(new CustomEvent(nameArg, { detail, bubbles: true, composed: true }));
+  }
+
+  private handleResourceContextKey(
+    eventArg: KeyboardEvent,
+    resourceArg: IHarnessResourceMeta,
+    sessionIdArg: string | null,
+  ): void {
+    if (!(eventArg.key === 'ContextMenu' || (eventArg.key === 'F10' && eventArg.shiftKey))) return;
+    eventArg.preventDefault();
+    eventArg.stopPropagation();
+    this.emitResourceContext(
+      eventArg,
+      resourceArg,
+      sessionIdArg,
+      'keyboard',
+      eventArg.currentTarget as HTMLElement,
+    );
+  }
+
+  private emitResourceContext(
+    eventArg: MouseEvent | KeyboardEvent,
+    resourceArg: IHarnessResourceMeta,
+    sessionIdArg: string | null,
+    sourceArg: THarnessResourceContextSource,
+    focusTargetArg: HTMLElement,
+  ): void {
+    const rect = focusTargetArg.getBoundingClientRect();
+    const contextGeneration = ++this.resourceContextGeneration;
+    this.resourceContextResourceId = resourceArg.id;
+    this.resourceContextFocusTarget = focusTargetArg;
+    this.resourceContextFocusClass = [
+      'resourceActions',
+      'resourcePrimary',
+      'resourceDragHandle',
+    ].find((className) => focusTargetArg.classList.contains(className)) ?? 'resourcePrimary';
+    const detail: IHarnessResourceContextDetail = {
+      resource: resourceArg,
+      sessionId: sessionIdArg,
+      clientX: sourceArg === 'pointer' && eventArg instanceof MouseEvent
+        ? eventArg.clientX
+        : rect.left + rect.width / 2,
+      clientY: sourceArg === 'pointer' && eventArg instanceof MouseEvent
+        ? eventArg.clientY
+        : rect.bottom,
+      source: sourceArg,
+      originalEvent: eventArg,
+      requestAssociation: (toSessionIdArg) => this.requestResourceAssociation(
+        resourceArg.id,
+        toSessionIdArg,
+        sourceArg === 'keyboard' ? 'keyboard' : 'action',
+      ),
+      close: () => this.closeResourceContext(contextGeneration),
+    };
+    this.dispatchEvent(
+      new CustomEvent('harness-resource-context', { detail, bubbles: true, composed: true }),
+    );
+  }
+
+  private closeResourceContext(contextGenerationArg: number): void {
+    if (
+      !this.isConnected
+      || contextGenerationArg !== this.resourceContextGeneration
+    ) return;
+    const focusTarget = this.resourceContextFocusTarget;
+    const resourceId = this.resourceContextResourceId;
+    const focusClass = this.resourceContextFocusClass;
+    this.clearResourceContextState();
+    const closeGeneration = this.resourceContextGeneration;
+    void this.updateComplete.then(() => {
+      if (!this.isConnected || closeGeneration !== this.resourceContextGeneration) return;
+      if (focusTarget?.isConnected) {
+        focusTarget.focus();
+        return;
+      }
+      const row = Array.from(
+        this.shadowRoot?.querySelectorAll<HTMLElement>('.resourceRow[data-resource-id]') ?? [],
+      ).find((candidate) => candidate.dataset.resourceId === resourceId);
+      row?.querySelector<HTMLElement>(`.${focusClass || 'resourcePrimary'}`)?.focus();
+    });
+  }
+
+  private clearResourceContextState(): void {
+    this.resourceContextGeneration += 1;
+    this.resourceContextResourceId = '';
+    this.resourceContextFocusTarget = undefined;
+    this.resourceContextFocusClass = '';
+  }
+
+  private reconcilePendingResourceAssociation(): void {
+    const pending = this.pendingResourceAssociationRequest;
+    if (!pending) return;
+    if (!this.resourcesById.has(pending.resourceId)) {
+      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}.`;
+        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
+      : '';
+    this.moveAnnouncement = pending.intent === 'attach'
+      ? `${pending.resourceTitle} is now attached to ${toSession}.`
+      : pending.intent === 'detach'
+        ? `${pending.resourceTitle} is now detached from ${fromSession}.`
+        : `${pending.resourceTitle} is now reassigned from ${fromSession} to ${toSession}.`;
+    this.pendingResourceAssociationRequest = undefined;
+  }
+
+  private resourceAssociationAnnouncement(
+    detailArg: THarnessResourceAssociationRequestDetail,
+    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 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 animateCardReflow(
     previousRectsArg: Map<string, DOMRect>,
     generationArg: number,
@@ -1626,9 +2492,25 @@ export class DeesHarnessSessionList extends DeesElement {
   private finishPointerDrag(commitArg: boolean): void {
     const gesture = this.pointerDragGesture;
     if (!gesture) return;
-    const detail = commitArg && gesture.phase === 'active' && this.dropSlot
+    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,
+        }
+      : undefined;
     this.pointerDragGesture = undefined;
     window.removeEventListener('keydown', this.handleDragKeyDown, true);
     window.removeEventListener('blur', this.handleDragWindowBlur);
@@ -1637,14 +2519,19 @@ 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');
+    gesture.source.classList.remove('dragging', 'resourceDragging');
     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.draggedItemHeight = 0;
     this.dropSlot = undefined;
     try {
@@ -1654,11 +2541,18 @@ export class DeesHarnessSessionList extends DeesElement {
     } catch {
       // Capture may already be released or the handle may have disconnected.
     }
-    if (detail) {
+    if (sessionMoveDetail) {
       this.dispatchEvent(
-        new CustomEvent('harness-session-move', { detail, bubbles: true, composed: true }),
+        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 {