@design.estate/dees-catalog 4.8.1 → 4.10.0

package/dist_bundle/bundle.js

@@ -3901,23 +3901,23 @@ var init_innerFrom = __esm({
 });
 
 // node_modules/.pnpm/rxjs@7.8.2/node_modules/rxjs/dist/esm5/internal/util/executeSchedule.js
-function executeSchedule(parentSubscription, scheduler, work, delay3, repeat5) {
+function executeSchedule(parentSubscription, scheduler, work, delay3, repeat6) {
   if (delay3 === void 0) {
     delay3 = 0;
   }
-  if (repeat5 === void 0) {
-    repeat5 = false;
+  if (repeat6 === void 0) {
+    repeat6 = false;
   }
   var scheduleSubscription = scheduler.schedule(function() {
     work();
-    if (repeat5) {
+    if (repeat6) {
       parentSubscription.add(this.schedule(null, delay3));
     } else {
       this.unsubscribe();
     }
   }, delay3);
   parentSubscription.add(scheduleSubscription);
-  if (!repeat5) {
+  if (!repeat6) {
     return scheduleSubscription;
   }
 }
@@ -174440,7 +174440,12 @@ var _DeesHarnessMessage = class _DeesHarnessMessage extends (_a81 = DeesElement,
               <div class="roleRow">
                 ${this.showRole ? b2`<span class="roleLabel">${message2.role}</span>` : ""}
                 ${this.showTimestamp && message2.createdAt ? b2`<span class="timestamp">${harnessFormatClockTime(message2.createdAt)}</span>` : ""}
-                ${message2.model ? b2`<span class="modelLabel" title=${message2.model}>${message2.model}</span>` : ""}
+                ${message2.model ? b2`
+                      <span
+                        class="modelLabel"
+                        title=${message2.effort ? `${message2.model} \xB7 ${message2.effort}` : message2.model}
+                      >${message2.model}${message2.effort ? b2`<span class="effortLabel">${message2.effort}</span>` : ""}</span>
+                    ` : ""}
               </div>
             ` : ""}
         ${message2.reasoning?.length ? b2`
@@ -174694,6 +174699,15 @@ __publicField(_DeesHarnessMessage, "styles", [
 
       /* Which model produced this message — trails the role/time so a
          mid-conversation model switch is visible in the transcript. */
+      /* reasoning effort rides with the model as a subtle pill */
+      .effortLabel {
+        margin-left: 5px;
+        padding: 0 5px;
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-text-secondary);
+      }
+
       .modelLabel {
         margin-left: auto;
         color: var(--dees-color-text-muted);
@@ -177025,8 +177039,14 @@ var demoSessions = Array.from({ length: 24 }, (_3, index3) => ({
   createdAt: Date.now() - (index3 + 2) * 36e5,
   updatedAt: Date.now() - (index3 + 1) * 35e5,
   messageCount: 4 + index3 % 9,
-  preview: "Latest: the regression test asserts the cache key stays stable across\u2026"
+  preview: "Latest: the regression test asserts the cache key stays stable across\u2026",
+  state: ["normal", "working", "finished", "attention", "error"][index3 % 5],
+  working: index3 % 5 === 1
 }));
+var demoGroups = [
+  { id: "active", name: "Active work", sessionIds: ["session-0", "session-1", "session-2"] },
+  { id: "review", name: "Review", sessionIds: ["session-3", "session-4"] }
+];
 var openModal = /* @__PURE__ */ __name(async () => {
   const { DeesModal: DeesModal2 } = await Promise.resolve().then(() => (init_dees_modal(), dees_modal_exports));
   const content3 = document.createElement("dees-harness-session-list");
@@ -177061,6 +177081,9 @@ var demoFunc63 = /* @__PURE__ */ __name(() => b2`
     <dees-button @clicked=${openModal}>Open in a DeesModal</dees-button>
     <dees-harness-session-list
       .sessions=${demoSessions}
+      .groups=${demoGroups}
+      .ungroupedSessionIds=${demoSessions.slice(5).map((session) => session.id)}
+      .enableGrouping=${true}
       selectedSessionId="session-2"
       @harness-session-select=${(event) => console.log("select", event.detail.session)}
     ></dees-harness-session-list>
@@ -177071,9 +177094,10 @@ var demoFunc63 = /* @__PURE__ */ __name(() => b2`
 init_dist_ts25();
 init_theme();
 init_dees_icon();
-var _collapsedGroupIds_dec, _dropSlot_dec, _draggingSessionId_dec, _search_dec, _enableGrouping_dec, _groups_dec2, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a89, _DeesHarnessSessionList_decorators, _init90, _sessions, _selectedSessionId, _loading4, _emptyText2, _groups2, _enableGrouping, _search, _draggingSessionId, _dropSlot, _collapsedGroupIds;
+var _collapsedGroupIds_dec, _expandedSessionIds_dec, _draggedItemHeight_dec, _dropSlot_dec, _draggingSessionId_dec, _search_dec, _ungroupedSessionIds_dec, _enableGrouping_dec, _groups_dec2, _emptyText_dec2, _loading_dec4, _selectedSessionId_dec, _sessions_dec, _a89, _DeesHarnessSessionList_decorators, _init90, _sessions, _selectedSessionId, _loading4, _emptyText2, _groups2, _enableGrouping, _ungroupedSessionIds, _search, _draggingSessionId, _dropSlot, _draggedItemHeight, _expandedSessionIds, _collapsedGroupIds;
+var { repeat: repeat5 } = directives_exports;
 _DeesHarnessSessionList_decorators = [customElement("dees-harness-session-list")];
-var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = DeesElement, _sessions_dec = [n5({ attribute: false })], _selectedSessionId_dec = [n5()], _loading_dec4 = [n5({ type: Boolean })], _emptyText_dec2 = [n5()], _groups_dec2 = [n5({ attribute: false })], _enableGrouping_dec = [n5({ type: Boolean })], _search_dec = [r5()], _draggingSessionId_dec = [r5()], _dropSlot_dec = [r5()], _collapsedGroupIds_dec = [r5()], _a89) {
+var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = DeesElement, _sessions_dec = [n5({ attribute: false })], _selectedSessionId_dec = [n5()], _loading_dec4 = [n5({ type: Boolean })], _emptyText_dec2 = [n5()], _groups_dec2 = [n5({ attribute: false })], _enableGrouping_dec = [n5({ type: Boolean })], _ungroupedSessionIds_dec = [n5({ attribute: false })], _search_dec = [r5()], _draggingSessionId_dec = [r5()], _dropSlot_dec = [r5()], _draggedItemHeight_dec = [r5()], _expandedSessionIds_dec = [r5()], _collapsedGroupIds_dec = [r5()], _a89) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _sessions, __runInitializers(_init90, 8, this, [])), __runInitializers(_init90, 11, this);
@@ -177082,10 +177106,16 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
     __privateAdd(this, _emptyText2, __runInitializers(_init90, 20, this, "No conversations yet.")), __runInitializers(_init90, 23, this);
     __privateAdd(this, _groups2, __runInitializers(_init90, 24, this, [])), __runInitializers(_init90, 27, this);
     __privateAdd(this, _enableGrouping, __runInitializers(_init90, 28, this, false)), __runInitializers(_init90, 31, this);
-    __privateAdd(this, _search, __runInitializers(_init90, 32, this, "")), __runInitializers(_init90, 35, this);
-    __privateAdd(this, _draggingSessionId, __runInitializers(_init90, 36, this, "")), __runInitializers(_init90, 39, this);
-    __privateAdd(this, _dropSlot, __runInitializers(_init90, 40, this)), __runInitializers(_init90, 43, this);
-    __privateAdd(this, _collapsedGroupIds, __runInitializers(_init90, 44, this, /* @__PURE__ */ new Set())), __runInitializers(_init90, 47, this);
+    __privateAdd(this, _ungroupedSessionIds, __runInitializers(_init90, 32, this, [])), __runInitializers(_init90, 35, this);
+    __privateAdd(this, _search, __runInitializers(_init90, 36, this, "")), __runInitializers(_init90, 39, this);
+    __privateAdd(this, _draggingSessionId, __runInitializers(_init90, 40, this, "")), __runInitializers(_init90, 43, this);
+    __privateAdd(this, _dropSlot, __runInitializers(_init90, 44, this)), __runInitializers(_init90, 47, this);
+    __privateAdd(this, _draggedItemHeight, __runInitializers(_init90, 48, this, 0)), __runInitializers(_init90, 51, this);
+    __privateAdd(this, _expandedSessionIds, __runInitializers(_init90, 52, this, /* @__PURE__ */ new Set())), __runInitializers(_init90, 55, this);
+    __privateAdd(this, _collapsedGroupIds, __runInitializers(_init90, 56, this, /* @__PURE__ */ new Set())), __runInitializers(_init90, 59, this);
+    __publicField(this, "reflowGeneration", 0);
+    __publicField(this, "reflowAnimations", /* @__PURE__ */ new Set());
+    __publicField(this, "dragSourceElement");
   }
   get sessionsById() {
     return new Map(this.sessions.map((session) => [session.id, session]));
@@ -177097,12 +177127,25 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
     }
     return ids;
   }
-  /** Ungrouped sessions, most recent first. */
+  /** Pinned entries first, followed by explicitly ordered sortable sessions. */
   get ungroupedSessions() {
     const grouped = this.groupedSessionIds;
-    return [...this.sessions].filter((session) => !grouped.has(session.id)).sort(
+    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 = [];
+    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];
   }
   get filteredSessions() {
     const query3 = this.search.trim().toLowerCase();
@@ -177117,10 +177160,40 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
   focusSearch() {
     this.shadowRoot?.querySelector(".searchRow input")?.focus();
   }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (this.draggingSessionId && !this.dragSourceElement?.isConnected) {
+      this.clearDragState();
+    }
+    if (!changedProperties.has("sessions")) return;
+    const previousSessions = changedProperties.get("sessions");
+    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 previous3 = previousById.get(session.id);
+      if (previous3 && previous3.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;
+    }
+  }
+  async disconnectedCallback() {
+    this.clearDragState();
+    await super.disconnectedCallback();
+  }
   render() {
     const groupingActive = this.enableGrouping && !this.search.trim();
     return b2`
       <div class="searchRow">
+        <dees-icon class="searchIcon" icon="lucide:Search" iconSize="13"></dees-icon>
         <input
           placeholder="Search conversations"
           .value=${this.search}
@@ -177160,7 +177233,15 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
         ${this.sessions.length ? "No conversations match this search." : this.emptyText}
       </div>`;
     }
-    return b2`${sessions.map((session) => this.renderItem(session, null, -1))}`;
+    return b2`
+      <div class="section">
+        ${repeat5(
+      sessions,
+      (session) => session.id,
+      (session) => this.renderItem(session, null, -1)
+    )}
+      </div>
+    `;
   }
   renderGroupedList() {
     const byId = this.sessionsById;
@@ -177172,7 +177253,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
       ${this.groups.map((group) => {
       const members = group.sessionIds.map((id) => byId.get(id)).filter((session) => session !== void 0);
       const collapsed = this.collapsedGroupIds.has(group.id);
-      const isHeaderDrop = this.dropSlot?.groupId === group.id && this.dropSlot.index === members.length && collapsed;
+      const isHeaderDrop = this.dropSlot?.groupId === group.id && this.dropSlot.index === this.sortableSessions(members).length && collapsed;
       return b2`
           <button
             class="groupHeader ${collapsed ? "collapsed" : ""} ${isHeaderDrop ? "dropTarget" : ""}"
@@ -177190,8 +177271,16 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
           new CustomEvent("harness-group-context", { detail, bubbles: true, composed: true })
         );
       }}
-            @dragover=${(event) => this.handleDragOverSlot(event, group.id, members.length)}
-            @drop=${(event) => this.handleDrop(event, group.id, members.length)}
+            @dragover=${(event) => this.handleDragOverSlot(
+        event,
+        group.id,
+        this.sortableSessions(members).length
+      )}
+            @drop=${(event) => this.handleDrop(
+        event,
+        group.id,
+        this.sortableSessions(members).length
+      )}
           >
             <dees-icon class="chevron" icon="lucide:ChevronDown" iconSize="12"></dees-icon>
             <span>${group.name}</span>
@@ -177200,7 +177289,7 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
           ${collapsed ? "" : this.renderSection(members, group.id)}
         `;
     })}
-      ${this.groups.length && ungrouped.length ? b2`
+      ${this.groups.length && (ungrouped.length || this.draggingSessionId) ? b2`
             <button
               class="groupHeader"
               type="button"
@@ -177217,29 +177306,69 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
   }
   renderSection(sessions, groupId) {
     const slot = this.dropSlot;
+    const entries = [];
+    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 b2`
-      ${sessions.map(
-      (session, index3) => b2`
-          ${slot && slot.groupId === groupId && slot.index === index3 ? b2`<div class="dropLine"></div>` : ""}
-          ${this.renderItem(session, groupId, index3)}
-        `
+      <div class="section" data-group-id=${groupId ?? ""}>
+        ${repeat5(
+      entries,
+      (entry) => entry.key,
+      (entry) => entry.type === "placeholder" ? this.renderDropPlaceholder(groupId, slot?.index ?? 0) : this.renderItem(entry.session, groupId, entry.logicalIndex)
     )}
-      ${slot && slot.groupId === groupId && slot.index === sessions.length ? b2`<div class="dropLine"></div>` : ""}
+        ${this.draggingSessionId && !hasPlaceholder && this.sortableSessions(sessions).length === 0 ? b2`
+              <div
+                class="emptyDropZone"
+                @dragover=${(event) => this.handleDragOverSlot(event, groupId, 0)}
+                @drop=${(event) => this.handleDrop(event, groupId, 0)}
+              ></div>
+            ` : ""}
+      </div>
+    `;
+  }
+  renderDropPlaceholder(groupId, index3) {
+    return b2`
+      <div
+        class="dropPlaceholder"
+        style=${`height: ${Math.max(46, this.draggedItemHeight)}px`}
+        @dragover=${(event) => this.handleDragOverSlot(event, groupId, index3)}
+        @drop=${(event) => this.handleDrop(event, groupId, index3)}
+      ></div>
     `;
   }
   renderItem(session, groupId, index3) {
-    const draggable = this.enableGrouping && index3 >= 0;
+    const draggable = this.enableGrouping && session.draggable !== false && index3 >= 0 && !globalThis.matchMedia?.("(pointer: coarse)").matches;
+    const expanded = this.expandedSessionIds.has(session.id);
+    const state5 = session.state ?? "normal";
+    const detailsId = `session-details-${session.id}`;
     return b2`
-      <button
-        class="item ${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) => {
-      if (event.key === "Enter") this.emit("harness-session-open", session);
+      <article
+        class="item state-${state5} ${expanded ? "expanded" : ""} ${session.id === this.selectedSessionId ? "selected" : ""} ${this.draggingSessionId === session.id ? "dragging" : ""}"
+        data-session-id=${session.id}
+        .draggable=${draggable}
+        @dblclick=${(event) => {
+      if (this.eventTargetsExpandToggle(event)) return;
+      this.emit("harness-session-open", session);
     }}
         @contextmenu=${(event) => {
+      if (this.eventTargetsExpandToggle(event)) return;
       event.preventDefault();
       const detail = {
         session,
@@ -177252,38 +177381,99 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
       );
     }}
         @dragstart=${(event) => {
-      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 = void 0;
+      this.handleDragStart(event, session, groupId, index3, draggable);
     }}
+        @dragend=${() => this.clearDragState()}
         @dragover=${(event) => {
-      if (!this.draggingSessionId || index3 < 0) return;
+      if (!this.draggingSessionId || index3 < 0 || session.id === this.draggingSessionId) return;
       event.preventDefault();
       const rect = event.currentTarget.getBoundingClientRect();
       const before = event.clientY < rect.top + rect.height / 2;
       this.setDropSlot(groupId, before ? index3 : index3 + 1);
     }}
         @drop=${(event) => {
-      if (index3 < 0) return;
+      if (index3 < 0 || session.id === this.draggingSessionId) return;
       const rect = event.currentTarget.getBoundingClientRect();
       const before = event.clientY < rect.top + rect.height / 2;
       this.handleDrop(event, groupId, before ? index3 : index3 + 1);
     }}
       >
-        <span class="itemTitle">
-          ${session.icon ? b2`<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 ? b2`<span class="itemPreview">${session.preview}${session.messageCount ? ` \xB7 ${session.messageCount} messages` : ""}</span>` : ""}
-      </button>
+        <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) => {
+      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 ? b2`<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(state5)}</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) => {
+      event.stopPropagation();
+      this.toggleSessionExpanded(session.id);
+    }}
+          >
+            <dees-icon icon="lucide:ChevronDown" iconSize="15"></dees-icon>
+          </button>
+        </div>
+        ${expanded ? b2`
+              <div class="itemDetails" id=${detailsId}>
+                <div class="stateLine">
+                  <span class="stateDot"></span>
+                  <span>${this.sessionStateLabel(state5)}</span>
+                </div>
+                ${session.preview ? b2`<div class="itemPreview">${session.preview}</div>` : ""}
+                <div class="itemMeta">
+                  ${session.messageCount ? `${session.messageCount} messages \xB7 ` : ""}${session.id}
+                </div>
+              </div>
+            ` : ""}
+      </article>
     `;
   }
+  eventTargetsExpandToggle(event) {
+    return event.composedPath().some(
+      (target) => target instanceof HTMLElement && target.classList.contains("expandToggle")
+    );
+  }
+  sessionStateLabel(state5) {
+    switch (state5) {
+      case "working":
+        return "Working";
+      case "finished":
+        return "Finished";
+      case "attention":
+        return "Needs attention";
+      case "error":
+        return "Error";
+      default:
+        return "Idle";
+    }
+  }
+  toggleSessionExpanded(sessionIdArg) {
+    const next2 = new Set(this.expandedSessionIds);
+    if (next2.has(sessionIdArg)) next2.delete(sessionIdArg);
+    else next2.add(sessionIdArg);
+    this.expandedSessionIds = next2;
+  }
   toggleGroupCollapsed(groupIdArg) {
     const next2 = new Set(this.collapsedGroupIds);
     if (next2.has(groupIdArg)) {
@@ -177293,32 +177483,116 @@ var _DeesHarnessSessionList = class _DeesHarnessSessionList extends (_a89 = Dees
     }
     this.collapsedGroupIds = next2;
   }
+  sortableSessions(sessionsArg, excludeDraggingArg = true) {
+    return sessionsArg.filter((session) => session.draggable !== false && (!excludeDraggingArg || session.id !== this.draggingSessionId));
+  }
+  sessionsForGroup(groupIdArg) {
+    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 !== void 0);
+  }
+  handleDragStart(event, session, groupId, logicalIndex, draggable) {
+    if (!draggable || logicalIndex < 0) {
+      event.preventDefault();
+      return;
+    }
+    const item = event.currentTarget;
+    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";
+  }
   setDropSlot(groupIdArg, indexArg) {
     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);
   }
   handleDragOverSlot(event, groupIdArg, indexArg) {
     if (!this.draggingSessionId) return;
     event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
     this.setDropSlot(groupIdArg, indexArg);
   }
   handleDrop(event, groupIdArg, indexArg) {
     event.preventDefault();
     event.stopPropagation();
     const sessionId = this.draggingSessionId || event.dataTransfer?.getData("text/plain") || "";
-    this.draggingSessionId = "";
-    this.dropSlot = void 0;
-    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 = {
       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 })
     );
   }
+  captureCardRects() {
+    const result = /* @__PURE__ */ new Map();
+    for (const item of this.shadowRoot?.querySelectorAll(".item[data-session-id]") ?? []) {
+      if (item.dataset.sessionId === this.draggingSessionId) continue;
+      result.set(item.dataset.sessionId ?? "", item.getBoundingClientRect());
+    }
+    return result;
+  }
+  async animateCardReflow(previousRectsArg, generationArg) {
+    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(".item[data-session-id]") ?? []) {
+      const sessionId = item.dataset.sessionId ?? "";
+      if (!sessionId || sessionId === this.draggingSessionId) continue;
+      const previous3 = previousRectsArg.get(sessionId);
+      if (!previous3) continue;
+      const current = item.getBoundingClientRect();
+      const deltaY = previous3.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(() => void 0).finally(() => {
+        this.reflowAnimations.delete(animation);
+      });
+    }
+  }
+  cancelReflowAnimations() {
+    for (const animation of this.reflowAnimations) animation.cancel();
+    this.reflowAnimations.clear();
+  }
+  clearDragState() {
+    this.reflowGeneration += 1;
+    this.cancelReflowAnimations();
+    this.draggingSessionId = "";
+    this.draggedItemHeight = 0;
+    this.dropSlot = void 0;
+    this.dragSourceElement = void 0;
+  }
   emit(name, session) {
     this.dispatchEvent(new CustomEvent(name, { detail: { session }, bubbles: true, composed: true }));
   }
@@ -177330,9 +177604,12 @@ _loading4 = new WeakMap();
 _emptyText2 = new WeakMap();
 _groups2 = new WeakMap();
 _enableGrouping = new WeakMap();
+_ungroupedSessionIds = new WeakMap();
 _search = new WeakMap();
 _draggingSessionId = new WeakMap();
 _dropSlot = new WeakMap();
+_draggedItemHeight = new WeakMap();
+_expandedSessionIds = new WeakMap();
 _collapsedGroupIds = new WeakMap();
 __decorateElement(_init90, 4, "sessions", _sessions_dec, _DeesHarnessSessionList, _sessions);
 __decorateElement(_init90, 4, "selectedSessionId", _selectedSessionId_dec, _DeesHarnessSessionList, _selectedSessionId);
@@ -177340,9 +177617,12 @@ __decorateElement(_init90, 4, "loading", _loading_dec4, _DeesHarnessSessionList,
 __decorateElement(_init90, 4, "emptyText", _emptyText_dec2, _DeesHarnessSessionList, _emptyText2);
 __decorateElement(_init90, 4, "groups", _groups_dec2, _DeesHarnessSessionList, _groups2);
 __decorateElement(_init90, 4, "enableGrouping", _enableGrouping_dec, _DeesHarnessSessionList, _enableGrouping);
+__decorateElement(_init90, 4, "ungroupedSessionIds", _ungroupedSessionIds_dec, _DeesHarnessSessionList, _ungroupedSessionIds);
 __decorateElement(_init90, 4, "search", _search_dec, _DeesHarnessSessionList, _search);
 __decorateElement(_init90, 4, "draggingSessionId", _draggingSessionId_dec, _DeesHarnessSessionList, _draggingSessionId);
 __decorateElement(_init90, 4, "dropSlot", _dropSlot_dec, _DeesHarnessSessionList, _dropSlot);
+__decorateElement(_init90, 4, "draggedItemHeight", _draggedItemHeight_dec, _DeesHarnessSessionList, _draggedItemHeight);
+__decorateElement(_init90, 4, "expandedSessionIds", _expandedSessionIds_dec, _DeesHarnessSessionList, _expandedSessionIds);
 __decorateElement(_init90, 4, "collapsedGroupIds", _collapsedGroupIds_dec, _DeesHarnessSessionList, _collapsedGroupIds);
 _DeesHarnessSessionList = __decorateElement(_init90, 0, "DeesHarnessSessionList", _DeesHarnessSessionList_decorators, _DeesHarnessSessionList);
 __name(_DeesHarnessSessionList, "DeesHarnessSessionList");
@@ -177357,26 +177637,48 @@ __publicField(_DeesHarnessSessionList, "styles", [
         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 {
@@ -177390,46 +177692,146 @@ __publicField(_DeesHarnessSessionList, "styles", [
         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 {
@@ -177441,24 +177843,99 @@ __publicField(_DeesHarnessSessionList, "styles", [
 
       .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 {
@@ -177473,8 +177950,8 @@ __publicField(_DeesHarnessSessionList, "styles", [
         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;
@@ -177514,15 +177991,12 @@ __publicField(_DeesHarnessSessionList, "styles", [
       }
 
       .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 {
@@ -177530,10 +178004,12 @@ __publicField(_DeesHarnessSessionList, "styles", [
         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;
@@ -177544,6 +178020,15 @@ __publicField(_DeesHarnessSessionList, "styles", [
         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;
+        }
+      }
     `
 ]);
 __runInitializers(_init90, 1, _DeesHarnessSessionList);
@@ -199625,7 +200110,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "4.8.1",
+  version: "4.10.0",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };