@design.estate/dees-catalog 4.9.0 → 4.11.0

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

@@ -8,6 +8,7 @@ import {
   property,
   state,
   cssManager,
+  directives,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
 import type {
@@ -20,6 +21,10 @@ import type {
 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 {
     'dees-harness-session-list': DeesHarnessSessionList;
@@ -31,6 +36,29 @@ 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 };
+
 /**
  * Searchable conversation list, embeddable in a sidebar or a DeesModal.
  * Emits `harness-session-select` on click, `harness-session-open` on
@@ -43,7 +71,8 @@ interface IDropSlot {
  * `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, recency-sorted. While a search query is active the list is flat.
+ * section with pinned entries first, then explicit order, then new sessions by
+ * recency. While a search query is active the list is flat.
  */
 @customElement('dees-harness-session-list')
 export class DeesHarnessSessionList extends DeesElement {
@@ -68,6 +97,10 @@ export class DeesHarnessSessionList extends DeesElement {
   @property({ type: Boolean })
   accessor enableGrouping: boolean = false;
 
+  /** Explicit order for sortable sessions outside user-defined groups. */
+  @property({ attribute: false })
+  accessor ungroupedSessionIds: string[] = [];
+
   @state()
   accessor search: string = '';
 
@@ -77,9 +110,37 @@ export class DeesHarnessSessionList extends DeesElement {
   @state()
   accessor dropSlot: IDropSlot | undefined = undefined;
 
+  @state()
+  accessor draggedItemHeight = 0;
+
+  @state()
+  accessor expandedSessionIds: ReadonlySet<string> = new Set<string>();
+
   @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 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,
     cssManager.defaultStyles,
@@ -89,26 +150,48 @@ export class DeesHarnessSessionList extends DeesElement {
         flex-direction: column;
         min-height: 0;
         font-family: var(--dees-font-family);
+        --session-normal: var(--dees-color-text-muted);
+        --session-working: var(--dees-color-accent-primary);
+        --session-finished: var(--dees-color-accent-success);
+        --session-attention: #bf5af2;
+        --session-error: var(--dees-color-accent-error);
+      }
+
+      :host([gobright]) {
+        --session-attention: #af52de;
       }
 
       .searchRow {
+        position: relative;
         flex: 0 0 auto;
-        padding: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md) var(--dees-spacing-md);
+      }
+
+      .searchIcon {
+        position: absolute;
+        top: 50%;
+        left: calc(var(--dees-spacing-md) + 10px);
+        color: var(--dees-color-text-muted);
+        transform: translateY(-62%);
+        pointer-events: none;
       }
 
       .searchRow input {
         width: 100%;
-        height: var(--dees-control-height-sm);
-        padding: 0 var(--dees-spacing-md);
+        height: var(--dees-control-height-lg);
+        padding: 0 var(--dees-spacing-md) 0 34px;
         border: 1px solid var(--dees-color-border-default);
-        border-radius: var(--dees-radius-md);
+        border-radius: var(--dees-radius-lg);
         corner-shape: var(--dees-corner-shape);
-        background: var(--dees-color-bg-primary);
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 78%, transparent);
         color: var(--dees-color-text-primary);
         font-family: inherit;
-        font-size: var(--dees-font-control-size, 13px);
+        font-size: var(--dees-font-control-size-sm, 12px);
         outline: none;
         box-sizing: border-box;
+        box-shadow: var(--dees-shadow-xs);
+        transition: border-color var(--dees-transition-fast) var(--dees-ease-standard),
+          box-shadow var(--dees-transition-fast) var(--dees-ease-standard);
       }
 
       .searchRow input:focus {
@@ -117,51 +200,253 @@ 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-xs) var(--dees-spacing-xs);
+        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 {
+        position: relative;
         display: grid;
-        gap: 2px;
+        gap: var(--dees-spacing-sm);
         align-content: start;
       }
 
       .item {
+        --card-accent: var(--session-normal);
+        position: relative;
         width: 100%;
-        display: block;
-        padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
-        border: 0;
-        border-radius: var(--dees-radius-md);
+        min-width: 0;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--card-accent) 24%, var(--dees-color-border-subtle));
+        border-radius: var(--dees-radius-xl);
         corner-shape: var(--dees-corner-shape);
-        background: transparent;
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 90%, transparent);
         color: var(--dees-color-text-primary);
-        cursor: pointer;
-        font-family: inherit;
-        text-align: left;
-        transition: background var(--dees-transition-fast) var(--dees-ease-standard);
+        box-shadow:
+          var(--dees-shadow-sm),
+          inset 3px 0 0 var(--card-accent);
+        box-sizing: border-box;
+        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);
       }
 
       .item:hover {
-        background: var(--dees-color-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) 90%, var(--card-accent) 10%);
+        box-shadow:
+          var(--dees-shadow-md),
+          inset 3px 0 0 var(--card-accent);
       }
 
       .item.selected {
-        background: var(--dees-color-active);
-        box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
+        border-color: var(--dees-color-border-default);
+        border-left-color: var(--dees-color-accent-primary);
+        border-left-width: 3px;
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 90%, transparent);
+        box-shadow: var(--dees-shadow-md);
+      }
+
+      .item.selected:hover {
+        border-color: var(--dees-color-border-default);
+        border-left-color: var(--dees-color-accent-primary);
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 90%, transparent);
+        box-shadow: var(--dees-shadow-md);
+      }
+
+      .item.selected .titleText {
+        font-weight: 700;
       }
 
       .item.dragging {
-        opacity: 0.4;
+        position: fixed;
+        inset: 0 auto auto 0;
+        width: var(--drag-preview-width);
+        height: var(--drag-preview-height);
+        max-width: none;
+        margin: 0;
+        padding: 0;
+        opacity: 0.96;
+        pointer-events: none;
+        transform: translate3d(var(--drag-preview-x), var(--drag-preview-y), 0);
+        box-shadow: var(--dees-shadow-xl);
       }
 
-      .itemTitle {
+      .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);
+      }
+
+      .item.state-attention {
+        --card-accent: var(--session-attention);
+      }
+
+      .item.state-error {
+        --card-accent: var(--session-error);
+      }
+
+      @keyframes attentionPulse {
+        0%, 100% {
+          background: color-mix(in srgb, var(--dees-color-bg-primary) 94%, var(--session-attention) 6%);
+        }
+        50% {
+          background: color-mix(in srgb, var(--dees-color-bg-primary) 84%, var(--session-attention) 16%);
+        }
+      }
+
+      .item.state-attention:not(.selected) {
+        animation: attentionPulse 1.15s ease-in-out infinite;
+      }
+
+      .item.state-attention:not(.selected):hover {
+        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;
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font-family: inherit;
+      }
+
+      .itemPrimary {
         display: flex;
-        align-items: baseline;
+        min-width: 0;
+        align-items: center;
         gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-md);
+        text-align: left;
+        cursor: pointer;
+      }
+
+      .itemPrimary:focus-visible,
+      .expandToggle:focus-visible {
+        outline: 2px solid var(--dees-color-accent-primary);
+        outline-offset: -3px;
+        border-radius: 9px;
+      }
+
+      .stateDot {
+        width: 8px;
+        height: 8px;
+        flex: 0 0 auto;
+        border-radius: 50%;
+        background: var(--card-accent);
+        box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 15%, transparent);
+      }
+
+      .itemCopy {
+        min-width: 0;
+        flex: 1;
+      }
+
+      .itemTitle {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        gap: 6px;
         font-size: var(--dees-font-control-size-sm, 12px);
-        font-weight: 500;
+        font-weight: 590;
       }
 
       .itemTitle .titleText {
@@ -173,24 +458,99 @@ export class DeesHarnessSessionList extends DeesElement {
 
       .itemTitle .itemIcon {
         flex: 0 0 auto;
-        align-self: center;
         color: var(--dees-color-text-secondary);
       }
 
       .itemTime {
-        margin-left: auto;
-        flex: 0 0 auto;
+        margin-top: 2px;
         color: var(--dees-color-text-muted);
         font-size: var(--dees-font-caption2-size, 10px);
       }
 
+      .expandToggle {
+        display: grid;
+        place-items: center;
+        margin: 7px 7px 7px 0;
+        border-radius: 9px;
+        color: var(--dees-color-text-muted);
+        cursor: pointer;
+      }
+
+      .expandToggle:hover {
+        background: color-mix(in srgb, var(--card-accent) 11%, transparent);
+        color: var(--dees-color-text-primary);
+      }
+
+      .expandToggle dees-icon {
+        transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .item.expanded .expandToggle dees-icon {
+        transform: rotate(180deg);
+      }
+
+      .itemDetails {
+        display: grid;
+        gap: 6px;
+        margin: 0 10px 10px 28px;
+        padding: 9px 10px;
+        border-top: 1px solid color-mix(in srgb, var(--card-accent) 20%, var(--dees-color-border-subtle));
+        color: var(--dees-color-text-secondary);
+      }
+
+      .stateLine {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--card-accent);
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 650;
+      }
+
       .itemPreview {
-        margin-top: 1px;
         color: var(--dees-color-text-secondary);
         font-size: var(--dees-font-caption1-size, 11px);
         overflow: hidden;
-        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+
+      .itemMeta {
+        color: var(--dees-color-text-muted);
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .visuallyHidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
         white-space: nowrap;
+        border: 0;
+      }
+
+      .dropPlaceholder,
+      .emptyDropZone {
+        display: grid;
+        place-items: center;
+        min-height: 46px;
+        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);
+        color: var(--dees-color-accent-primary);
+        box-sizing: border-box;
+      }
+
+      .dropPlaceholder::after,
+      .emptyDropZone::after {
+        content: 'Drop conversation here';
+        font-size: var(--dees-font-caption2-size, 10px);
+        font-weight: 650;
+        letter-spacing: 0.02em;
       }
 
       .emptyNote {
@@ -205,8 +565,8 @@ export class DeesHarnessSessionList extends DeesElement {
         align-items: center;
         gap: var(--dees-spacing-xs);
         width: 100%;
-        margin-top: var(--dees-spacing-xs);
-        padding: 2px var(--dees-spacing-sm);
+        margin: var(--dees-spacing-md) 0 7px;
+        padding: var(--dees-spacing-xs) 6px;
         border: 0;
         border-radius: var(--dees-radius-md);
         background: transparent;
@@ -246,15 +606,12 @@ export class DeesHarnessSessionList extends DeesElement {
       }
 
       .dropLine {
-        height: 2px;
-        margin: 0 var(--dees-spacing-sm);
-        border-radius: 1px;
-        background: var(--dees-color-accent-primary);
+        display: none;
       }
 
       .newGroupRow {
         flex: 0 0 auto;
-        padding: var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-sm);
+        padding: 0 var(--dees-spacing-md) var(--dees-spacing-md);
       }
 
       .newGroupButton {
@@ -262,10 +619,12 @@ export class DeesHarnessSessionList extends DeesElement {
         align-items: center;
         gap: var(--dees-spacing-xs);
         width: 100%;
+        min-height: 34px;
+        justify-content: center;
         padding: var(--dees-spacing-xs) var(--dees-spacing-sm);
         border: 1px dashed var(--dees-color-border-default);
-        border-radius: var(--dees-radius-md);
-        background: transparent;
+        border-radius: 11px;
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 55%, transparent);
         color: var(--dees-color-text-secondary);
         cursor: pointer;
         font-family: inherit;
@@ -276,6 +635,17 @@ export class DeesHarnessSessionList extends DeesElement {
         border-color: var(--dees-color-accent-primary);
         color: var(--dees-color-text-primary);
       }
+
+      @media (prefers-reduced-motion: reduce) {
+        .item,
+        .item.state-attention,
+        .item.state-working .itemHeader .stateDot,
+        .scrollShadow,
+        .expandToggle dees-icon {
+          animation: none;
+          transition: none;
+        }
+      }
     `,
   ];
 
@@ -291,15 +661,26 @@ export class DeesHarnessSessionList extends DeesElement {
     return ids;
   }
 
-  /** Ungrouped sessions, most recent first. */
+  /** Pinned entries first, followed by explicitly ordered sortable sessions. */
   private get ungroupedSessions(): IHarnessSessionMeta[] {
     const grouped = this.groupedSessionIds;
-    return [...this.sessions]
-      .filter((session) => !grouped.has(session.id))
-      .sort(
-        (left, right) =>
-          (right.updatedAt ?? right.createdAt ?? 0) - (left.updatedAt ?? left.createdAt ?? 0),
-      );
+    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 get filteredSessions(): IHarnessSessionMeta[] {
@@ -317,10 +698,63 @@ export class DeesHarnessSessionList extends DeesElement {
     this.shadowRoot?.querySelector<HTMLInputElement>('.searchRow input')?.focus();
   }
 
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
+    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.pointerDragGesture && !knownIds.has(this.pointerDragGesture.sessionId)) {
+      this.finishPointerDrag(false);
+    }
+    const nextExpanded = new Set(
+      [...this.expandedSessionIds].filter((sessionId) => knownIds.has(sessionId)),
+    );
+    for (const session of this.sessions) {
+      const previous = previousById.get(session.id);
+      if (previous && previous.working !== true && session.working === true) {
+        nextExpanded.add(session.id);
+      }
+    }
+    if (
+      nextExpanded.size !== this.expandedSessionIds.size
+      || [...nextExpanded].some((sessionId) => !this.expandedSessionIds.has(sessionId))
+    ) {
+      this.expandedSessionIds = nextExpanded;
+    }
+  }
+
+  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.finishPointerDrag(false);
+    this.scrollResizeObserver?.disconnect();
+    this.scrollResizeObserver = undefined;
+    this.observedScrollContainer = undefined;
+    this.observedScrollContent = undefined;
+    await super.disconnectedCallback();
+  }
+
   public render(): TemplateResult {
     const groupingActive = this.enableGrouping && !this.search.trim();
     return html`
       <div class="searchRow">
+        <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
         <input
           placeholder="Search conversations"
           .value=${this.search}
@@ -329,13 +763,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">
@@ -367,7 +811,15 @@ export class DeesHarnessSessionList extends DeesElement {
         ${this.sessions.length ? 'No conversations match this search.' : this.emptyText}
       </div>`;
     }
-    return html`${sessions.map((session) => this.renderItem(session, null, -1))}`;
+    return html`
+      <div class="section">
+        ${repeat(
+          sessions,
+          (session) => session.id,
+          (session) => this.renderItem(session, null, -1),
+        )}
+      </div>
+    `;
   }
 
   private renderGroupedList(): TemplateResult {
@@ -383,10 +835,15 @@ export class DeesHarnessSessionList extends DeesElement {
           .filter((session): session is IHarnessSessionMeta => session !== undefined);
         const collapsed = this.collapsedGroupIds.has(group.id);
         const isHeaderDrop =
-          this.dropSlot?.groupId === group.id && this.dropSlot.index === members.length && collapsed;
+          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) => {
@@ -401,8 +858,6 @@ export class DeesHarnessSessionList extends DeesElement {
                 new CustomEvent('harness-group-context', { detail, bubbles: true, composed: true }),
               );
             }}
-            @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, group.id, members.length)}
-            @drop=${(event: DragEvent) => this.handleDrop(event, group.id, members.length)}
           >
             <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
             <span>${group.name}</span>
@@ -413,14 +868,15 @@ export class DeesHarnessSessionList extends DeesElement {
             : this.renderSection(members, group.id)}
         `;
       })}
-      ${this.groups.length && ungrouped.length
+      ${this.groups.length && (ungrouped.length || this.draggingSessionId)
         ? 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>
@@ -436,18 +892,64 @@ export class DeesHarnessSessionList extends DeesElement {
     groupId: string | null,
   ): TemplateResult {
     const slot = this.dropSlot;
+    const entries: TSectionRenderEntry[] = [];
+    let logicalIndex = 0;
+    for (const session of sessions) {
+      const isDragging = session.id === this.draggingSessionId;
+      const sortable = session.draggable !== false;
+      if (
+        slot
+        && slot.groupId === groupId
+        && slot.index === logicalIndex
+        && !isDragging
+        && sortable
+      ) {
+        entries.push({ type: 'placeholder', key: `placeholder:${groupId ?? 'ungrouped'}` });
+      }
+      entries.push({
+        type: 'session',
+        key: `session:${session.id}`,
+        session,
+        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'}` });
+    }
+    const hasPlaceholder = entries.some((entry) => entry.type === 'placeholder');
     return html`
-      ${sessions.map(
-        (session, index) => html`
-          ${slot && slot.groupId === groupId && slot.index === index
-            ? html`<div class="dropLine"></div>`
-            : ''}
-          ${this.renderItem(session, groupId, index)}
-        `,
-      )}
-      ${slot && slot.groupId === groupId && slot.index === sessions.length
-        ? html`<div class="dropLine"></div>`
-        : ''}
+      <div class="section" data-group-id=${groupId ?? ''}>
+        ${repeat(
+          entries,
+          (entry) => entry.key,
+          (entry) => entry.type === 'placeholder'
+            ? this.renderDropPlaceholder(groupId, slot?.index ?? 0)
+            : this.renderItem(entry.session, groupId, entry.logicalIndex),
+        )}
+        ${this.draggingSessionId && !hasPlaceholder && this.sortableSessions(sessions).length === 0
+          ? html`
+              <div
+                class="emptyDropZone"
+                data-drop-group-id=${groupId ?? ''}
+                data-drop-index="0"
+                data-drop-kind="slot"
+              ></div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  private renderDropPlaceholder(groupId: string | null, index: number): TemplateResult {
+    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`}
+      ></div>
     `;
   }
 
@@ -456,20 +958,32 @@ export class DeesHarnessSessionList extends DeesElement {
     groupId: string | null,
     index: number,
   ): TemplateResult {
-    const draggable = this.enableGrouping && index >= 0;
+    const draggable = (
+      this.enableGrouping
+      && session.draggable !== false
+      && index >= 0
+    );
+    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`
-      <button
-        class="item ${session.id === this.selectedSessionId ? 'selected' : ''} ${
+      <article
+        class="item state-${state} ${expanded ? 'expanded' : ''} ${
+          session.id === this.selectedSessionId ? 'selected' : ''
+        } ${
           this.draggingSessionId === session.id ? 'dragging' : ''
         }"
-        type="button"
-        draggable=${draggable ? 'true' : 'false'}
-        @click=${() => this.emit('harness-session-select', session)}
-        @dblclick=${() => this.emit('harness-session-open', session)}
-        @keydown=${(event: KeyboardEvent) => {
-          if (event.key === 'Enter') this.emit('harness-session-open', session);
+        data-session-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)) return;
+          this.emit('harness-session-open', session);
         }}
         @contextmenu=${(event: MouseEvent) => {
+          if (this.eventTargetsExpandToggle(event)) return;
           event.preventDefault();
           const detail: IHarnessSessionContextDetail = {
             session,
@@ -481,44 +995,115 @@ export class DeesHarnessSessionList extends DeesElement {
             new CustomEvent('harness-session-context', { detail, bubbles: true, composed: true }),
           );
         }}
-        @dragstart=${(event: DragEvent) => {
-          if (!draggable) return;
-          this.draggingSessionId = session.id;
-          event.dataTransfer?.setData('text/plain', session.id);
-          if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move';
-        }}
-        @dragend=${() => {
-          this.draggingSessionId = '';
-          this.dropSlot = undefined;
-        }}
-        @dragover=${(event: DragEvent) => {
-          if (!this.draggingSessionId || index < 0) 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) 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);
-        }}
       >
-        <span class="itemTitle">
-          ${session.icon
-            ? html`<dees-icon class="itemIcon" icon=${session.icon} iconSize="12"></dees-icon>`
+        <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>
+              `
             : ''}
-          <span class="titleText">${session.title || session.id}</span>
-          <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
-        </span>
-        ${session.preview
-          ? html`<span class="itemPreview">${session.preview}${session.messageCount ? ` · ${session.messageCount} messages` : ''}</span>`
+          <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>
+          </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>
+            `
           : ''}
-      </button>
+      </article>
     `;
   }
 
+  private eventTargetsExpandToggle(event: Event): boolean {
+    return event.composedPath().some(
+      (target) => target instanceof HTMLElement && target.classList.contains('expandToggle'),
+    );
+  }
+
+  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';
+      case 'finished': return 'Finished';
+      case 'attention': return 'Needs attention';
+      case 'error': return 'Error';
+      default: return 'Idle';
+    }
+  }
+
+  private toggleSessionExpanded(sessionIdArg: string): void {
+    const next = new Set(this.expandedSessionIds);
+    if (next.has(sessionIdArg)) next.delete(sessionIdArg);
+    else next.add(sessionIdArg);
+    this.expandedSessionIds = next;
+  }
+
   private toggleGroupCollapsed(groupIdArg: string): void {
     const next = new Set(this.collapsedGroupIds);
     if (next.has(groupIdArg)) {
@@ -529,35 +1114,518 @@ 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,
+    groupIdArg: string | null,
+    logicalIndexArg: number,
+  ): void {
+    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;
+    }
+    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(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 {
     const current = this.dropSlot;
     if (current && current.groupId === groupIdArg && current.index === indexArg) return;
+    const previousRects = this.captureCardRects();
+    const generation = ++this.reflowGeneration;
     this.dropSlot = { groupId: groupIdArg, index: indexArg };
+    void this.animateCardReflow(previousRects, generation);
   }
 
-  private handleDragOverSlot(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
-    if (!this.draggingSessionId) return;
-    event.preventDefault();
-    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 handleDrop(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
-    event.preventDefault();
-    event.stopPropagation();
-    const sessionId = this.draggingSessionId || event.dataTransfer?.getData('text/plain') || '';
-    this.draggingSessionId = '';
-    this.dropSlot = undefined;
-    if (!sessionId) return;
+  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 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(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;
+    return {
+      sessionId: sessionIdArg,
+      groupId: groupIdArg,
+      index: Math.max(0, compatibilityIndex),
+      ...(beforeSessionId ? { beforeSessionId } : {}),
+    };
+  }
+
+  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,
+      sessionId: sessionArg.id,
       groupId: groupIdArg,
-      index: Math.max(0, indexArg),
+      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 }),
     );
   }
 
+  private captureCardRects(): 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());
+    }
+    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,
+  ): Promise<void> {
+    await this.updateComplete;
+    if (
+      generationArg !== this.reflowGeneration
+      || !this.isConnected
+      || 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);
+      if (!previous) continue;
+      const current = item.getBoundingClientRect();
+      const deltaY = previous.top - current.top;
+      if (Math.abs(deltaY) < 0.5) continue;
+      const animation = item.animate(
+        [
+          { transform: `translateY(${deltaY}px)` },
+          { transform: 'translateY(0)' },
+        ],
+        { duration: 180, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
+      );
+      this.reflowAnimations.add(animation);
+      void animation.finished.catch(() => undefined).finally(() => {
+        this.reflowAnimations.delete(animation);
+      });
+    }
+  }
+
+  private cancelReflowAnimations(): void {
+    for (const animation of this.reflowAnimations) animation.cancel();
+    this.reflowAnimations.clear();
+  }
+
+  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;
+    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 {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
   }