@design.estate/dees-catalog 4.9.0 → 4.10.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,8 @@ import type {
 import { harnessFormatRelativeTime } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
+const { repeat } = directives;
+
 declare global {
   interface HTMLElementTagNameMap {
     'dees-harness-session-list': DeesHarnessSessionList;
@@ -31,6 +34,10 @@ interface IDropSlot {
   index: number;
 }
 
+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 +50,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 +76,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 +89,19 @@ 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>();
 
+  private reflowGeneration = 0;
+  private readonly reflowAnimations = new Set<Animation>();
+  private dragSourceElement: HTMLElement | undefined;
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -89,26 +111,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 {
@@ -122,46 +166,146 @@ export class DeesHarnessSessionList extends DeesElement {
         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);
+      }
+
+      .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) 96%, var(--card-accent) 4%);
       }
 
       .item.selected {
-        background: var(--dees-color-active);
-        box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
+        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);
       }
 
       .item.dragging {
-        opacity: 0.4;
+        position: absolute;
+        inset-inline: 0;
+        z-index: -1;
+        opacity: 0;
+        pointer-events: none;
       }
 
-      .itemTitle {
+      .item.state-working {
+        --card-accent: var(--session-working);
+      }
+
+      .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% {
+          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);
+        }
+        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);
+        }
+      }
+
+      .item.state-attention:not(.selected) {
+        animation: attentionPulse 1.15s ease-in-out infinite;
+      }
+
+      .itemHeader {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 30px;
+        min-height: 46px;
+      }
+
+      .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 +317,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 +424,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 +465,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 +478,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 +494,15 @@ 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,
+        .expandToggle dees-icon {
+          animation: none;
+          transition: none;
+        }
+      }
     `,
   ];
 
@@ -291,15 +518,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 +555,45 @@ export class DeesHarnessSessionList extends DeesElement {
     this.shadowRoot?.querySelector<HTMLInputElement>('.searchRow input')?.focus();
   }
 
+  public updated(changedProperties: Map<PropertyKey, unknown>): void {
+    super.updated(changedProperties);
+    if (this.draggingSessionId && !this.dragSourceElement?.isConnected) {
+      this.clearDragState();
+    }
+    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();
+    }
+    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 disconnectedCallback(): Promise<void> {
+    this.clearDragState();
+    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}
@@ -367,7 +640,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,7 +664,9 @@ 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' : ''}"
@@ -401,8 +684,16 @@ 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)}
+            @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>
@@ -413,7 +704,7 @@ 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"
@@ -436,18 +727,62 @@ 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"
+                @dragover=${(event: DragEvent) => this.handleDragOverSlot(event, groupId, 0)}
+                @drop=${(event: DragEvent) => this.handleDrop(event, groupId, 0)}
+              ></div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  private renderDropPlaceholder(groupId: string | null, index: number): TemplateResult {
+    return html`
+      <div
+        class="dropPlaceholder"
+        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>
     `;
   }
 
@@ -456,20 +791,30 @@ 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
+      && !globalThis.matchMedia?.('(pointer: coarse)').matches
+    );
+    const expanded = this.expandedSessionIds.has(session.id);
+    const state = session.state ?? 'normal';
+    const detailsId = `session-details-${session.id}`;
     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}
+        .draggable=${draggable}
+        @dblclick=${(event: MouseEvent) => {
+          if (this.eventTargetsExpandToggle(event)) return;
+          this.emit('harness-session-open', session);
         }}
         @contextmenu=${(event: MouseEvent) => {
+          if (this.eventTargetsExpandToggle(event)) return;
           event.preventDefault();
           const detail: IHarnessSessionContextDetail = {
             session,
@@ -482,43 +827,102 @@ export class DeesHarnessSessionList extends DeesElement {
           );
         }}
         @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;
+          this.handleDragStart(event, session, groupId, index, draggable);
         }}
+        @dragend=${() => this.clearDragState()}
         @dragover=${(event: DragEvent) => {
-          if (!this.draggingSessionId || index < 0) return;
+          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) return;
+          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);
         }}
       >
-        <span class="itemTitle">
-          ${session.icon
-            ? html`<dees-icon class="itemIcon" icon=${session.icon} iconSize="12"></dees-icon>`
-            : ''}
-          <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>`
+        <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>
+              </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 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,15 +933,62 @@ 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 handleDragStart(
+    event: DragEvent,
+    session: IHarnessSessionMeta,
+    groupId: string | null,
+    logicalIndex: number,
+    draggable: boolean,
+  ): void {
+    if (!draggable || logicalIndex < 0) {
+      event.preventDefault();
+      return;
+    }
+    const item = event.currentTarget as HTMLElement;
+    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';
+  }
+
   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();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
     this.setDropSlot(groupIdArg, indexArg);
   }
 
@@ -545,19 +996,88 @@ export class DeesHarnessSessionList extends DeesElement {
     event.preventDefault();
     event.stopPropagation();
     const sessionId = this.draggingSessionId || event.dataTransfer?.getData('text/plain') || '';
-    this.draggingSessionId = '';
-    this.dropSlot = undefined;
-    if (!sessionId) return;
+    if (!sessionId) {
+      this.clearDragState();
+      return;
+    }
+    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 sourceSessions = this.sortableSessions(this.sessionsForGroup(sourceGroupId), false);
+    const sourceIndex = sourceSessions.findIndex((session) => session.id === sessionId);
+    const compatibilityIndex = (
+      sourceGroupId === groupIdArg
+      && sourceIndex >= 0
+      && indexArg > sourceIndex
+    ) ? indexArg + 1 : indexArg;
     const detail: IHarnessSessionMoveDetail = {
       sessionId,
       groupId: groupIdArg,
-      index: Math.max(0, indexArg),
+      index: Math.max(0, compatibilityIndex),
+      ...(beforeSessionId ? { beforeSessionId } : {}),
     };
+    this.clearDragState();
     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 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 clearDragState(): void {
+    this.reflowGeneration += 1;
+    this.cancelReflowAnimations();
+    this.draggingSessionId = '';
+    this.draggedItemHeight = 0;
+    this.dropSlot = undefined;
+    this.dragSourceElement = undefined;
+  }
+
   private emit(name: string, session: IHarnessSessionMeta): void {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
   }