@design.estate/dees-catalog 4.10.0 → 4.11.1

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

@@ -22,6 +22,8 @@ import { harnessFormatRelativeTime } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
 const { repeat } = directives;
+const dragAutoScrollMaxPixelsPerSecond = 900;
+const dragThresholdPixels = 4;
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -34,6 +36,25 @@ interface IDropSlot {
   index: number;
 }
 
+interface IPointerDragGesture {
+  pointerId: number;
+  handle: HTMLElement;
+  source: HTMLElement;
+  sessionId: string;
+  sourceGroupId: string | null;
+  sourceLogicalIndex: number;
+  startClientX: number;
+  startClientY: number;
+  grabOffsetX: number;
+  grabOffsetY: number;
+  phase: 'pending' | 'active';
+}
+
+interface IKeyboardMoveFocus {
+  sessionId: string;
+  groupId: string | null;
+}
+
 type TSectionRenderEntry =
   | { type: 'session'; key: string; session: IHarnessSessionMeta; logicalIndex: number }
   | { type: 'placeholder'; key: string };
@@ -98,9 +119,27 @@ export class DeesHarnessSessionList extends DeesElement {
   @state()
   accessor collapsedGroupIds: ReadonlySet<string> = new Set<string>();
 
+  @state()
+  private accessor topScrollShadowVisible = false;
+
+  @state()
+  private accessor bottomScrollShadowVisible = false;
+
+  @state()
+  private accessor moveAnnouncement = '';
+
   private reflowGeneration = 0;
   private readonly reflowAnimations = new Set<Animation>();
-  private dragSourceElement: HTMLElement | undefined;
+  private pointerDragGesture: IPointerDragGesture | undefined;
+  private keyboardMoveFocus: IKeyboardMoveFocus | undefined;
+  private scrollResizeObserver: ResizeObserver | undefined;
+  private observedScrollContainer: HTMLElement | undefined;
+  private observedScrollContent: HTMLElement | undefined;
+  private dragAutoScrollFrame: number | undefined;
+  private dragAutoScrollClientX = 0;
+  private dragAutoScrollClientY = 0;
+  private dragAutoScrollVelocity = 0;
+  private dragAutoScrollLastFrame = 0;
 
   public static styles = [
     themeDefaultStyles,
@@ -161,12 +200,54 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .list {
-        flex: 1;
-        min-height: 0;
+        width: 100%;
+        height: 100%;
         overflow-y: auto;
         scrollbar-width: thin;
         scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
         padding: 0 var(--dees-spacing-md) var(--dees-spacing-md);
+        box-sizing: border-box;
+      }
+
+      .listFrame {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+      }
+
+      .scrollShadow {
+        position: absolute;
+        z-index: 1;
+        left: 0;
+        right: 0;
+        height: 16px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .scrollShadow.visible {
+        opacity: 1;
+      }
+
+      .scrollShadow.top {
+        top: 0;
+        background: linear-gradient(
+          to bottom,
+          color-mix(in srgb, var(--dees-material-thin-bg-opaque) 74%, transparent),
+          transparent
+        );
+        box-shadow: var(--dees-shadow-sm);
+      }
+
+      .scrollShadow.bottom {
+        bottom: 0;
+        background: linear-gradient(
+          to top,
+          color-mix(in srgb, var(--dees-material-thin-bg-opaque) 74%, transparent),
+          transparent
+        );
+        box-shadow: var(--dees-shadow-up-sm);
       }
 
       .section {
@@ -178,50 +259,99 @@ export class DeesHarnessSessionList extends DeesElement {
 
       .item {
         --card-accent: var(--session-normal);
+        --card-inner-background: color-mix(in srgb, var(--dees-color-bg-primary) 90%, transparent);
+        --card-inner-border: transparent;
+        --card-lip-width: 3px;
         position: relative;
         width: 100%;
         min-width: 0;
         overflow: hidden;
-        border: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--dees-color-border-subtle));
+        border: 0;
         border-radius: var(--dees-radius-xl);
         corner-shape: var(--dees-corner-shape);
-        background: color-mix(in srgb, var(--dees-color-bg-primary) 90%, transparent);
+        background: var(--card-accent);
         color: var(--dees-color-text-primary);
-        box-shadow:
-          var(--dees-shadow-sm),
-          inset 3px 0 0 var(--card-accent);
+        box-shadow: var(--dees-shadow-sm);
         box-sizing: border-box;
+        padding-left: var(--card-lip-width);
         transition:
-          border-color var(--dees-transition-fast) var(--dees-ease-standard),
-          background var(--dees-transition-fast) var(--dees-ease-standard),
-          box-shadow var(--dees-transition-fast) var(--dees-ease-standard);
+          box-shadow var(--dees-transition-fast) var(--dees-ease-standard),
+          padding-left var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .item:hover {
-        border-color: color-mix(in srgb, var(--card-accent) 42%, var(--dees-color-border-default));
-        background: color-mix(in srgb, var(--dees-color-bg-primary) 96%, var(--card-accent) 4%);
+        --card-inner-background: color-mix(
+          in srgb,
+          var(--dees-color-bg-primary) 90%,
+          var(--card-accent) 10%
+        );
+        box-shadow: var(--dees-shadow-md);
       }
 
       .item.selected {
-        border-color: color-mix(in srgb, var(--dees-color-accent-primary) 65%, var(--dees-color-border-default));
-        box-shadow:
-          0 0 0 2px color-mix(in srgb, var(--dees-color-accent-primary) 18%, transparent),
-          var(--dees-shadow-sm),
-          inset 3px 0 0 var(--card-accent);
+        --card-inner-background: color-mix(
+          in srgb,
+          var(--dees-color-bg-primary) 86%,
+          var(--card-accent) 14%
+        );
+        --card-inner-border: var(--card-accent);
+        --card-lip-width: 16px;
+      }
+
+      .item.selected:hover {
+        --card-inner-background: color-mix(
+          in srgb,
+          var(--dees-color-bg-primary) 82%,
+          var(--card-accent) 18%
+        );
+      }
+
+      .itemInner {
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid var(--card-inner-border);
+        border-radius: calc(var(--dees-radius-xl) - 1px);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--card-inner-background);
+        box-sizing: border-box;
+        transition:
+          background var(--dees-transition-fast) var(--dees-ease-standard),
+          border-color var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .item.dragging {
-        position: absolute;
-        inset-inline: 0;
-        z-index: -1;
-        opacity: 0;
+        position: fixed;
+        inset: 0 auto auto 0;
+        width: var(--drag-preview-width);
+        height: var(--drag-preview-height);
+        max-width: none;
+        margin: 0;
+        padding: 0 0 0 var(--card-lip-width);
+        opacity: 0.96;
         pointer-events: none;
+        transform: translate3d(var(--drag-preview-x), var(--drag-preview-y), 0);
+        box-shadow: var(--dees-shadow-xl);
       }
 
       .item.state-working {
         --card-accent: var(--session-working);
       }
 
+      @keyframes workingDotPulse {
+        0%, 100% {
+          transform: scale(0.92);
+          box-shadow: 0 0 0 3px color-mix(in srgb, var(--session-working) 14%, transparent);
+        }
+        50% {
+          transform: scale(1.08);
+          box-shadow: 0 0 0 6px color-mix(in srgb, var(--session-working) 3%, transparent);
+        }
+      }
+
+      .item.state-working .itemHeader .stateDot {
+        animation: workingDotPulse 2.4s ease-in-out infinite;
+      }
+
       .item.state-finished {
         --card-accent: var(--session-finished);
       }
@@ -236,29 +366,54 @@ export class DeesHarnessSessionList extends DeesElement {
 
       @keyframes attentionPulse {
         0%, 100% {
-          box-shadow:
-            0 0 0 0 color-mix(in srgb, var(--session-attention) 0%, transparent),
-            var(--dees-shadow-sm),
-            inset 3px 0 0 var(--session-attention);
+          background: color-mix(in srgb, var(--dees-color-bg-primary) 94%, var(--session-attention) 6%);
         }
         50% {
-          box-shadow:
-            0 0 0 4px color-mix(in srgb, var(--session-attention) 26%, transparent),
-            0 7px 18px color-mix(in srgb, var(--session-attention) 16%, transparent),
-            inset 3px 0 0 var(--session-attention);
+          background: color-mix(in srgb, var(--dees-color-bg-primary) 84%, var(--session-attention) 16%);
         }
       }
 
-      .item.state-attention:not(.selected) {
+      .item.state-attention .itemInner {
         animation: attentionPulse 1.15s ease-in-out infinite;
       }
 
+      .item.state-attention:hover .itemInner {
+        animation: none;
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 82%, var(--session-attention) 18%);
+      }
+
       .itemHeader {
         display: grid;
         grid-template-columns: minmax(0, 1fr) 30px;
         min-height: 46px;
       }
 
+      .itemHeader.draggable {
+        grid-template-columns: 24px minmax(0, 1fr) 30px;
+      }
+
+      .dragHandle {
+        appearance: none;
+        display: grid;
+        place-items: center;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--dees-color-text-muted);
+        cursor: grab;
+        touch-action: none;
+      }
+
+      .dragHandle:active {
+        cursor: grabbing;
+      }
+
+      .dragHandle:focus-visible {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -3px;
+        border-radius: 8px;
+      }
+
       .itemPrimary,
       .expandToggle {
         appearance: none;
@@ -497,7 +652,10 @@ export class DeesHarnessSessionList extends DeesElement {
 
       @media (prefers-reduced-motion: reduce) {
         .item,
-        .item.state-attention,
+        .itemInner,
+        .item.state-attention .itemInner,
+        .item.state-working .itemHeader .stateDot,
+        .scrollShadow,
         .expandToggle dees-icon {
           animation: none;
           transition: none;
@@ -557,15 +715,21 @@ export class DeesHarnessSessionList extends DeesElement {
 
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
-    if (this.draggingSessionId && !this.dragSourceElement?.isConnected) {
-      this.clearDragState();
+    this.observeScrollGeometry();
+    this.syncScrollShadowState();
+    this.restoreKeyboardMoveFocus();
+    if (
+      this.pointerDragGesture
+      && (!this.pointerDragGesture.source.isConnected || !this.pointerDragGesture.handle.isConnected)
+    ) {
+      this.finishPointerDrag(false);
     }
     if (!changedProperties.has('sessions')) return;
     const previousSessions = changedProperties.get('sessions') as IHarnessSessionMeta[] | undefined;
     const previousById = new Map((previousSessions ?? []).map((session) => [session.id, session]));
     const knownIds = new Set(this.sessions.map((session) => session.id));
-    if (this.draggingSessionId && !knownIds.has(this.draggingSessionId)) {
-      this.clearDragState();
+    if (this.pointerDragGesture && !knownIds.has(this.pointerDragGesture.sessionId)) {
+      this.finishPointerDrag(false);
     }
     const nextExpanded = new Set(
       [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId)),
@@ -584,8 +748,20 @@ export class DeesHarnessSessionList extends DeesElement {
     }
   }
 
+  public async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    await this.updateComplete;
+    if (!this.isConnected) return;
+    this.observeScrollGeometry();
+    this.syncScrollShadowState();
+  }
+
   public async disconnectedCallback(): Promise<void> {
-    this.clearDragState();
+    this.finishPointerDrag(false);
+    this.scrollResizeObserver?.disconnect();
+    this.scrollResizeObserver = undefined;
+    this.observedScrollContainer = undefined;
+    this.observedScrollContent = undefined;
     await super.disconnectedCallback();
   }
 
@@ -602,13 +778,23 @@ export class DeesHarnessSessionList extends DeesElement {
           }}
         />
       </div>
-      <div class="list">
-        ${this.loading
-          ? html`<div class="emptyNote">Loading conversations…</div>`
-          : groupingActive
-            ? this.renderGroupedList()
-            : this.renderFlatList()}
+      <div class="listFrame">
+        <div class="scrollShadow top ${this.topScrollShadowVisible ? 'visible' : ''}"></div>
+        <div
+          class="list"
+          @scroll=${this.syncScrollShadowState}
+        >
+          <div class="listContent">
+            ${this.loading
+              ? html`<div class="emptyNote">Loading conversations…</div>`
+              : groupingActive
+                ? this.renderGroupedList()
+                : this.renderFlatList()}
+          </div>
+        </div>
+        <div class="scrollShadow bottom ${this.bottomScrollShadowVisible ? 'visible' : ''}"></div>
       </div>
+      <div class="visuallyHidden" aria-live="polite">${this.moveAnnouncement}</div>
       ${groupingActive
         ? html`
             <div class="newGroupRow">
@@ -670,6 +856,9 @@ export class DeesHarnessSessionList extends DeesElement {
         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) => {
@@ -684,16 +873,6 @@ export class DeesHarnessSessionList extends DeesElement {
                 new CustomEvent('harness-group-context', { detail, bubbles: true, composed: true }),
               );
             }}
-            @dragover=${(event: DragEvent) => this.handleDragOverSlot(
-              event,
-              group.id,
-              this.sortableSessions(members).length,
-            )}
-            @drop=${(event: DragEvent) => this.handleDrop(
-              event,
-              group.id,
-              this.sortableSessions(members).length,
-            )}
           >
             <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
             <span>${group.name}</span>
@@ -708,10 +887,11 @@ export class DeesHarnessSessionList extends DeesElement {
         ? html`
             <button
               class="groupHeader"
+              data-drop-group-id=""
+              data-drop-index="0"
+              data-drop-kind="slot"
               type="button"
               tabindex="-1"
-              @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, null, 0)}
-              @drop=${(event: DragEvent) => this.handleDrop(event, null, 0)}
             >
               <span>Ungrouped</span>
               <span class="groupCount">${ungrouped.length}</span>
@@ -766,8 +946,9 @@ export class DeesHarnessSessionList extends DeesElement {
           ? html`
               <div
                 class="emptyDropZone"
-                @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, groupId, 0)}
-                @drop=${(event: DragEvent) => this.handleDrop(event, groupId, 0)}
+                data-drop-group-id=${groupId ?? ''}
+                data-drop-index="0"
+                data-drop-kind="slot"
               ></div>
             `
           : ''}
@@ -779,9 +960,10 @@ export class DeesHarnessSessionList extends DeesElement {
     return html`
       <div
         class="dropPlaceholder"
+        data-drop-group-id=${groupId ?? ''}
+        data-drop-index=${index}
+        data-drop-kind="slot"
         style=${`height: ${Math.max(46, this.draggedItemHeight)}px`}
-        @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, groupId, index)}
-        @drop=${(event: DragEvent) => this.handleDrop(event, groupId, index)}
       ></div>
     `;
   }
@@ -795,11 +977,11 @@ export class DeesHarnessSessionList extends DeesElement {
       this.enableGrouping
       && session.draggable !== false
       && index >= 0
-      && !globalThis.matchMedia?.('(pointer: coarse)').matches
     );
     const expanded = this.expandedSessionIds.has(session.id);
     const state = session.state ?? 'normal';
     const detailsId = `session-details-${session.id}`;
+    const dropIndex = index < 0 ? 0 : index;
     return html`
       <article
         class="item state-${state} ${expanded ? 'expanded' : ''} ${
@@ -808,9 +990,11 @@ export class DeesHarnessSessionList extends DeesElement {
           this.draggingSessionId === session.id ? 'dragging' : ''
         }"
         data-session-id=${session.id}
-        .draggable=${draggable}
+        data-drop-group-id=${groupId ?? ''}
+        data-drop-index=${dropIndex}
+        data-drop-kind=${index < 0 ? 'slot' : 'card'}
         @dblclick=${(event: MouseEvent) => {
-          if (this.eventTargetsExpandToggle(event)) return;
+          if (this.eventTargetsExpandToggle(event) || this.eventTargetsDragHandle(event)) return;
           this.emit('harness-session-open', session);
         }}
         @contextmenu=${(event: MouseEvent) => {
@@ -826,76 +1010,84 @@ export class DeesHarnessSessionList extends DeesElement {
             new CustomEvent('harness-session-context', { detail, bubbles: true, composed: true }),
           );
         }}
-        @dragstart=${(event: DragEvent) => {
-          this.handleDragStart(event, session, groupId, index, draggable);
-        }}
-        @dragend=${() => this.clearDragState()}
-        @dragover=${(event: DragEvent) => {
-          if (!this.draggingSessionId || index < 0 || session.id === this.draggingSessionId) return;
-          event.preventDefault();
-          const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-          const before = event.clientY < rect.top + rect.height / 2;
-          this.setDropSlot(groupId, before ? index : index + 1);
-        }}
-        @drop=${(event: DragEvent) => {
-          if (index < 0 || session.id === this.draggingSessionId) return;
-          const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
-          const before = event.clientY < rect.top + rect.height / 2;
-          this.handleDrop(event, groupId, before ? index : index + 1);
-        }}
       >
-        <div class="itemHeader">
-          <button
-            class="itemPrimary"
-            type="button"
-            aria-current=${session.id === this.selectedSessionId ? 'true' : 'false'}
-            @click=${() => this.emit('harness-session-select', session)}
-            @keydown=${(event: KeyboardEvent) => {
-              if (event.key !== 'Enter') return;
-              event.preventDefault();
-              this.emit('harness-session-open', session);
-            }}
-          >
-            <span class="stateDot"></span>
-            <span class="itemCopy">
-              <span class="itemTitle">
-                ${session.icon
-                  ? html`<dees-icon class="itemIcon" icon=${session.icon} iconSize="13"></dees-icon>`
-                  : ''}
-                <span class="titleText">${session.title || session.id}</span>
+        <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>
+                `
+              : ''}
+            <button
+              class="itemPrimary"
+              type="button"
+              aria-current=${session.id === this.selectedSessionId ? 'true' : 'false'}
+              @click=${() => this.emit('harness-session-select', session)}
+              @keydown=${(event: KeyboardEvent) => {
+                if (event.key !== 'Enter') return;
+                event.preventDefault();
+                this.emit('harness-session-open', session);
+              }}
+            >
+              <span class="stateDot"></span>
+              <span class="itemCopy">
+                <span class="itemTitle">
+                  ${session.icon
+                    ? html`<dees-icon class="itemIcon" icon=${session.icon} iconSize="13"></dees-icon>`
+                    : ''}
+                  <span class="titleText">${session.title || session.id}</span>
+                </span>
+                <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
+                <span class="visuallyHidden">Status: ${this.sessionStateLabel(state)}</span>
               </span>
-              <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
-              <span class="visuallyHidden">Status: ${this.sessionStateLabel(state)}</span>
-            </span>
-          </button>
-          <button
-            class="expandToggle"
-            type="button"
-            aria-expanded=${expanded ? 'true' : 'false'}
-            aria-controls=${detailsId}
-            title=${expanded ? 'Collapse conversation card' : 'Expand conversation card'}
-            @click=${(event: MouseEvent) => {
-              event.stopPropagation();
-              this.toggleSessionExpanded(session.id);
-            }}
-          >
-            <dees-icon icon="lucide:ChevronDown" iconSize="15"></dees-icon>
-          </button>
-        </div>
-        ${expanded
-          ? html`
-              <div class="itemDetails" id=${detailsId}>
-                <div class="stateLine">
-                  <span class="stateDot"></span>
-                  <span>${this.sessionStateLabel(state)}</span>
-                </div>
-                ${session.preview ? html`<div class="itemPreview">${session.preview}</div>` : ''}
-                <div class="itemMeta">
-                  ${session.messageCount ? `${session.messageCount} messages · ` : ''}${session.id}
+            </button>
+            <button
+              class="expandToggle"
+              type="button"
+              aria-expanded=${expanded ? 'true' : 'false'}
+              aria-controls=${detailsId}
+              title=${expanded ? 'Collapse conversation card' : 'Expand conversation card'}
+              @click=${(event: MouseEvent) => {
+                event.stopPropagation();
+                this.toggleSessionExpanded(session.id);
+              }}
+            >
+              <dees-icon icon="lucide:ChevronDown" iconSize="15"></dees-icon>
+            </button>
+          </div>
+          ${expanded
+            ? html`
+                <div class="itemDetails" id=${detailsId}>
+                  <div class="stateLine">
+                    <span class="stateDot"></span>
+                    <span>${this.sessionStateLabel(state)}</span>
+                  </div>
+                  ${session.preview ? html`<div class="itemPreview">${session.preview}</div>` : ''}
+                  <div class="itemMeta">
+                    ${session.messageCount ? `${session.messageCount} messages · ` : ''}${session.id}
+                  </div>
                 </div>
-              </div>
-            `
-          : ''}
+              `
+            : ''}
+        </div>
       </article>
     `;
   }
@@ -906,6 +1098,12 @@ export class DeesHarnessSessionList extends DeesElement {
     );
   }
 
+  private eventTargetsDragHandle(event: Event): boolean {
+    return event.composedPath().some(
+      (target) => target instanceof HTMLElement && target.classList.contains('dragHandle'),
+    );
+  }
+
   private sessionStateLabel(state: NonNullable<IHarnessSessionMeta['state']>): string {
     switch (state) {
       case 'working': return 'Working';
@@ -953,27 +1151,139 @@ export class DeesHarnessSessionList extends DeesElement {
       .filter((session): session is IHarnessSessionMeta => session !== undefined);
   }
 
-  private handleDragStart(
-    event: DragEvent,
-    session: IHarnessSessionMeta,
-    groupId: string | null,
-    logicalIndex: number,
-    draggable: boolean,
+  private handlePointerDown(
+    eventArg: PointerEvent,
+    sessionArg: IHarnessSessionMeta,
+    groupIdArg: string | null,
+    logicalIndexArg: number,
   ): void {
-    if (!draggable || logicalIndex < 0) {
-      event.preventDefault();
+    if (
+      this.pointerDragGesture
+      || eventArg.button !== 0
+      || !eventArg.isPrimary
+      || logicalIndexArg < 0
+    ) return;
+    const handle = eventArg.currentTarget as HTMLElement;
+    const source = handle.closest<HTMLElement>('.item');
+    if (!source) return;
+    const sourceRect = source.getBoundingClientRect();
+    this.pointerDragGesture = {
+      pointerId: eventArg.pointerId,
+      handle,
+      source,
+      sessionId: sessionArg.id,
+      sourceGroupId: groupIdArg,
+      sourceLogicalIndex: logicalIndexArg,
+      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;
+    if (!gesture.source.isConnected || !gesture.handle.isConnected) {
+      this.finishPointerDrag(false);
       return;
     }
-    const item = event.currentTarget as HTMLElement;
+    if (
+      gesture.phase === 'pending'
+      && Math.hypot(
+        eventArg.clientX - gesture.startClientX,
+        eventArg.clientY - gesture.startClientY,
+      ) < dragThresholdPixels
+    ) return;
+    if (gesture.phase === 'pending' && !this.startPointerDrag(eventArg, gesture)) return;
+    eventArg.preventDefault();
+    this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
+    this.dragAutoScrollClientX = eventArg.clientX;
+    this.dragAutoScrollClientY = eventArg.clientY;
+    this.updateDragAutoScrollVelocity();
+    this.updateDropSlotFromPointer();
+  };
+
+  private readonly handlePointerUp = (eventArg: PointerEvent): void => {
+    const gesture = this.pointerDragGesture;
+    if (!gesture || eventArg.pointerId !== gesture.pointerId) return;
+    if (gesture.phase === 'active') {
+      this.dragAutoScrollClientX = eventArg.clientX;
+      this.dragAutoScrollClientY = eventArg.clientY;
+      this.moveDragPreview(eventArg.clientX, eventArg.clientY, gesture);
+      this.updateDropSlotFromPointer();
+      this.finishPointerDrag(true);
+      return;
+    }
+    this.finishPointerDrag(false);
+  };
+
+  private readonly handlePointerCancel = (eventArg: PointerEvent): void => {
+    if (eventArg.pointerId === this.pointerDragGesture?.pointerId) this.finishPointerDrag(false);
+  };
+
+  private readonly handleLostPointerCapture = (eventArg: PointerEvent): void => {
+    if (eventArg.pointerId === this.pointerDragGesture?.pointerId) this.finishPointerDrag(false);
+  };
+
+  private readonly handleDragKeyDown = (eventArg: KeyboardEvent): void => {
+    if (eventArg.key !== 'Escape' || !this.pointerDragGesture) return;
+    eventArg.preventDefault();
+    eventArg.stopPropagation();
+    this.finishPointerDrag(false);
+  };
+
+  private readonly handleDragWindowBlur = (): void => {
+    this.finishPointerDrag(false);
+  };
+
+  private startPointerDrag(eventArg: PointerEvent, gestureArg: IPointerDragGesture): boolean {
+    const sourceRect = gestureArg.source.getBoundingClientRect();
+    gestureArg.source.classList.add('dragging');
+    gestureArg.source.style.setProperty('--drag-preview-width', `${sourceRect.width}px`);
+    gestureArg.source.style.setProperty('--drag-preview-height', `${sourceRect.height}px`);
+    this.moveDragPreview(eventArg.clientX, eventArg.clientY, gestureArg);
+    gestureArg.source.setAttribute('popover', 'manual');
+    try {
+      gestureArg.source.showPopover();
+    } catch {
+      this.finishPointerDrag(false);
+      return false;
+    }
+    gestureArg.phase = 'active';
     this.reflowGeneration += 1;
     this.cancelReflowAnimations();
-    this.draggedItemHeight = Math.ceil(item.getBoundingClientRect().height);
-    this.dragSourceElement = item;
-    this.draggingSessionId = session.id;
-    const remainingCount = this.sortableSessions(this.sessionsForGroup(groupId)).length;
-    this.dropSlot = { groupId, index: Math.min(logicalIndex, remainingCount) };
-    event.dataTransfer?.setData('text/plain', session.id);
-    if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
+    this.draggedItemHeight = Math.ceil(sourceRect.height);
+    this.draggingSessionId = gestureArg.sessionId;
+    const remainingCount = this.sortableSessions(this.sessionsForGroup(gestureArg.sourceGroupId)).length;
+    this.dropSlot = {
+      groupId: gestureArg.sourceGroupId,
+      index: Math.min(gestureArg.sourceLogicalIndex, remainingCount),
+    };
+    return true;
+  }
+
+  private moveDragPreview(
+    clientXArg: number,
+    clientYArg: number,
+    gestureArg: IPointerDragGesture,
+  ): void {
+    gestureArg.source.style.setProperty(
+      '--drag-preview-x',
+      `${clientXArg - gestureArg.grabOffsetX}px`,
+    );
+    gestureArg.source.style.setProperty(
+      '--drag-preview-y',
+      `${clientYArg - gestureArg.grabOffsetY}px`,
+    );
   }
 
   private setDropSlot(groupIdArg: string | null, indexArg: number): void {
@@ -985,38 +1295,239 @@ export class DeesHarnessSessionList extends DeesElement {
     void this.animateCardReflow(previousRects, generation);
   }
 
-  private handleDragOverSlot(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
-    if (!this.draggingSessionId) return;
-    event.preventDefault();
-    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
-    this.setDropSlot(groupIdArg, indexArg);
+  private clearDropSlot(): void {
+    if (!this.dropSlot) return;
+    const previousRects = this.captureCardRects();
+    const generation = ++this.reflowGeneration;
+    this.dropSlot = undefined;
+    void this.animateCardReflow(previousRects, generation);
+  }
+
+  private updateDragAutoScrollVelocity(): void {
+    const container = this.scrollContainer;
+    if (!container || !this.draggingSessionId) return;
+    const rect = container.getBoundingClientRect();
+    if (this.dragAutoScrollClientX < rect.left || this.dragAutoScrollClientX > rect.right) {
+      this.stopDragAutoScroll();
+      return;
+    }
+    const edgeSize = Math.min(64, Math.max(32, rect.height * 0.25));
+    const topDepth = Math.max(
+      0,
+      Math.min(1, (rect.top + edgeSize - this.dragAutoScrollClientY) / edgeSize),
+    );
+    const bottomDepth = Math.max(
+      0,
+      Math.min(1, (this.dragAutoScrollClientY - (rect.bottom - edgeSize)) / edgeSize),
+    );
+    this.dragAutoScrollVelocity = bottomDepth > 0
+      ? dragAutoScrollMaxPixelsPerSecond * bottomDepth * bottomDepth
+      : topDepth > 0
+        ? -dragAutoScrollMaxPixelsPerSecond * topDepth * topDepth
+        : 0;
+    if (this.dragAutoScrollVelocity === 0) {
+      this.stopDragAutoScroll();
+      return;
+    }
+    if (this.dragAutoScrollFrame === undefined) {
+      this.dragAutoScrollLastFrame = performance.now();
+      this.dragAutoScrollFrame = requestAnimationFrame(this.runDragAutoScroll);
+    }
   }
 
-  private handleDrop(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
-    event.preventDefault();
-    event.stopPropagation();
-    const sessionId = this.draggingSessionId || event.dataTransfer?.getData('text/plain') || '';
-    if (!sessionId) {
-      this.clearDragState();
+  private readonly runDragAutoScroll = (timestampArg: number): void => {
+    this.dragAutoScrollFrame = undefined;
+    const container = this.scrollContainer;
+    if (!container || !this.draggingSessionId || this.dragAutoScrollVelocity === 0) return;
+    const elapsedMs = Math.min(34, Math.max(0, timestampArg - this.dragAutoScrollLastFrame));
+    this.dragAutoScrollLastFrame = timestampArg;
+    const previousScrollTop = container.scrollTop;
+    container.scrollTop += this.dragAutoScrollVelocity * elapsedMs / 1000;
+    this.syncScrollShadowState();
+    const atScrollBoundary = this.dragAutoScrollVelocity < 0
+      ? container.scrollTop <= 0
+      : container.scrollTop + container.clientHeight >= container.scrollHeight - 1;
+    if (container.scrollTop === previousScrollTop && atScrollBoundary) {
+      this.stopDragAutoScroll();
       return;
     }
+    this.updateDropSlotFromPointer();
+    this.dragAutoScrollFrame = requestAnimationFrame(this.runDragAutoScroll);
+  };
+
+  private updateDropSlotFromPointer(): void {
+    const pointerX = this.dragAutoScrollClientX;
+    const pointerY = this.dragAutoScrollClientY;
+    const placeholder = this.shadowRoot?.querySelector<HTMLElement>('.dropPlaceholder');
+    if (placeholder) {
+      const rect = placeholder.getBoundingClientRect();
+      if (
+        pointerX >= rect.left
+        && pointerX <= rect.right
+        && pointerY >= rect.top
+        && pointerY <= rect.bottom
+      ) {
+        this.setDropSlot(
+          placeholder.dataset.dropGroupId || null,
+          Number(placeholder.dataset.dropIndex),
+        );
+        return;
+      }
+    }
+    const selector = '[data-drop-group-id][data-drop-index][data-drop-kind]';
+    let target: HTMLElement | undefined;
+    const offsets = this.dragAutoScrollVelocity === 0
+      ? [0, -8, 8, -16, 16, -32, 32]
+      : [0, 8, 16, 32, 48, 64, 96].map(
+          (value) => value * (this.dragAutoScrollVelocity < 0 ? 1 : -1),
+        );
+    for (const offset of offsets) {
+      const hit = this.shadowRoot?.elementFromPoint(pointerX, pointerY + offset);
+      const candidate = hit?.closest<HTMLElement>(selector);
+      if (
+        candidate
+        && candidate.dataset.sessionId !== this.draggingSessionId
+        && Number(candidate.dataset.dropIndex) >= 0
+      ) {
+        target = candidate;
+        break;
+      }
+    }
+    if (!target) {
+      this.clearDropSlot();
+      return;
+    }
+    const baseIndex = Number(target.dataset.dropIndex);
+    const groupId = target.dataset.dropGroupId || null;
+    const rect = target.getBoundingClientRect();
+    const index = target.dataset.dropKind === 'card' && pointerY >= rect.top + rect.height / 2
+      ? baseIndex + 1
+      : baseIndex;
+    this.setDropSlot(groupId, index);
+  }
+
+  private get scrollContainer(): HTMLElement | undefined {
+    return this.shadowRoot?.querySelector<HTMLElement>('.list') ?? undefined;
+  }
+
+  private observeScrollGeometry(): void {
+    if (!this.isConnected) return;
+    const container = this.scrollContainer;
+    const content = this.shadowRoot?.querySelector<HTMLElement>('.listContent') ?? undefined;
+    if (!container || !content) return;
+    if (
+      this.scrollResizeObserver
+      && this.observedScrollContainer === container
+      && this.observedScrollContent === content
+    ) return;
+    this.scrollResizeObserver?.disconnect();
+    this.scrollResizeObserver = new ResizeObserver(this.syncScrollShadowState);
+    this.scrollResizeObserver.observe(container);
+    this.scrollResizeObserver.observe(content);
+    this.observedScrollContainer = container;
+    this.observedScrollContent = content;
+  }
+
+  private readonly syncScrollShadowState = (): void => {
+    const container = this.scrollContainer;
+    if (!container) return;
+    const topVisible = container.scrollTop > 1;
+    const bottomVisible = container.scrollTop + container.clientHeight < container.scrollHeight - 1;
+    if (this.topScrollShadowVisible !== topVisible) this.topScrollShadowVisible = topVisible;
+    if (this.bottomScrollShadowVisible !== bottomVisible) this.bottomScrollShadowVisible = bottomVisible;
+  };
+
+  private stopDragAutoScroll(): void {
+    if (this.dragAutoScrollFrame !== undefined) cancelAnimationFrame(this.dragAutoScrollFrame);
+    this.dragAutoScrollFrame = undefined;
+    this.dragAutoScrollVelocity = 0;
+    this.dragAutoScrollLastFrame = 0;
+  }
+
+  private createMoveDetail(
+    sessionIdArg: string,
+    groupIdArg: 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(sessionId))?.id ?? null;
+    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 === sessionId);
+    const sourceIndex = sourceSessions.findIndex((session) => session.id === sessionIdArg);
     const compatibilityIndex = (
       sourceGroupId === groupIdArg
       && sourceIndex >= 0
       && indexArg > sourceIndex
     ) ? indexArg + 1 : indexArg;
-    const detail: IHarnessSessionMoveDetail = {
-      sessionId,
+    return {
+      sessionId: sessionIdArg,
       groupId: groupIdArg,
       index: Math.max(0, compatibilityIndex),
       ...(beforeSessionId ? { beforeSessionId } : {}),
     };
-    this.clearDragState();
+  }
+
+  private handleKeyboardMove(
+    eventArg: KeyboardEvent,
+    sessionArg: IHarnessSessionMeta,
+    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);
+    if (sourceIndex < 0) return;
+    const sectionIds: Array<string | null> = [...this.groups.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
+          && 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 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 }),
+      );
+      return;
+    }
+    const remaining = sessions.filter((session) => session.id !== sessionArg.id);
+    const targetIndex = eventArg.key === 'Home'
+      ? 0
+      : eventArg.key === 'End'
+        ? remaining.length
+        : eventArg.key === 'ArrowUp'
+          ? 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 }),
     );
@@ -1031,6 +1542,31 @@ export class DeesHarnessSessionList extends DeesElement {
     return result;
   }
 
+  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 (handle) {
+      handle.focus();
+      this.keyboardMoveFocus = undefined;
+      return;
+    }
+    const groupHeader = Array.from(
+      this.shadowRoot?.querySelectorAll<HTMLElement>('.groupHeader[data-drop-group-id]') ?? [],
+    ).find((candidate) => candidate.dataset.dropGroupId === (pending.groupId ?? ''));
+    if (groupHeader) {
+      groupHeader.focus();
+      this.keyboardMoveFocus = undefined;
+    }
+  }
+
   private async animateCardReflow(
     previousRectsArg: Map<string, DOMRect>,
     generationArg: number,
@@ -1069,13 +1605,42 @@ export class DeesHarnessSessionList extends DeesElement {
     this.reflowAnimations.clear();
   }
 
-  private clearDragState(): void {
+  private finishPointerDrag(commitArg: boolean): void {
+    const gesture = this.pointerDragGesture;
+    if (!gesture) return;
+    const detail = commitArg && gesture.phase === 'active' && this.dropSlot
+      ? this.createMoveDetail(gesture.sessionId, this.dropSlot.groupId, this.dropSlot.index)
+      : undefined;
+    this.pointerDragGesture = undefined;
+    window.removeEventListener('keydown', this.handleDragKeyDown, true);
+    window.removeEventListener('blur', this.handleDragWindowBlur);
+    this.stopDragAutoScroll();
     this.reflowGeneration += 1;
     this.cancelReflowAnimations();
+    if (gesture.source.matches(':popover-open')) gesture.source.hidePopover();
+    gesture.source.removeAttribute('popover');
+    gesture.source.classList.remove('dragging');
+    for (const property of [
+      '--drag-preview-width',
+      '--drag-preview-height',
+      '--drag-preview-x',
+      '--drag-preview-y',
+    ]) gesture.source.style.removeProperty(property);
     this.draggingSessionId = '';
     this.draggedItemHeight = 0;
     this.dropSlot = undefined;
-    this.dragSourceElement = undefined;
+    try {
+      if (gesture.handle.hasPointerCapture(gesture.pointerId)) {
+        gesture.handle.releasePointerCapture(gesture.pointerId);
+      }
+    } catch {
+      // Capture may already be released or the handle may have disconnected.
+    }
+    if (detail) {
+      this.dispatchEvent(
+        new CustomEvent('harness-session-move', { detail, bubbles: true, composed: true }),
+      );
+    }
   }
 
   private emit(name: string, session: IHarnessSessionMeta): void {