@design.estate/dees-catalog 4.9.0 → 4.11.0

package/dist_ts_web/elements/00group-harness/interfaces.d.ts

@@ -193,6 +193,7 @@ export interface IHarnessPermissionResponseDetail {
     remember: boolean;
     request: IHarnessPermissionRequest;
 }
+export type THarnessSessionCardState = 'normal' | 'working' | 'finished' | 'attention' | 'error';
 export interface IHarnessSessionMeta {
     id: string;
     title: string;
@@ -202,6 +203,12 @@ export interface IHarnessSessionMeta {
     preview?: string;
     /** Optional dees-icon name (e.g. 'lucide:Terminal') shown before the title. */
     icon?: string;
+    /** Visual card state. Defaults to `normal`. */
+    state?: THarnessSessionCardState;
+    /** Independent activity signal used for idle-to-working auto-expansion. */
+    working?: boolean;
+    /** Set false for pinned, non-sortable entries such as terminals. Defaults to true. */
+    draggable?: boolean;
 }
 /** Detail of `harness-session-context`, fired on right-click of a session item. */
 export interface IHarnessSessionContextDetail {
@@ -223,8 +230,10 @@ export interface IHarnessSessionMoveDetail {
     sessionId: string;
     /** Target group, or null for the ungrouped section. */
     groupId: string | null;
-    /** Insertion index within the target section's current display order. */
+    /** Compatibility insertion index using the pre-drag order for same-section moves. */
     index: number;
+    /** Stable target anchor in the dragged-card-excluded order; absent means append. */
+    beforeSessionId?: string;
 }
 /** Detail of `harness-group-context`, fired on right-click of a group header. */
 export interface IHarnessGroupContextDetail {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "4.9.0",
+  "version": "4.11.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -46,17 +46,17 @@
   "devDependencies": {
     "@design.estate/dees-wcctools": "^3.9.2",
     "@git.zone/tsbuild": "^4.4.2",
-    "@git.zone/tsbundle": "^2.11.3",
-    "@git.zone/tstest": "^3.6.7",
+    "@git.zone/tsbundle": "^2.11.4",
+    "@git.zone/tstest": "^4.0.0",
     "@git.zone/tswatch": "^3.3.5",
     "@push.rocks/projectinfo": "^5.1.0",
-    "@types/node": "^26.1.1"
+    "@types/node": "^26.1.2"
   },
   "files": [
     "ts/**/*",
     "ts_web/**/*",
     "dist/**/*",
-    "dist_*/**/*",
+    "dist_bundle/**/*",
     "dist_ts/**/*",
     "dist_ts_web/**/*",
     "assets/**/*",

package/readme.md

@@ -1861,7 +1861,9 @@ Token usage chip (`in · out · total`, `compact` shows the total only); cache r
 
 #### `DeesHarnessSessionList`
 
-Searchable conversation list for sidebars or a `DeesModal` (`harness-session-select` on click, `harness-session-open` on double-click/Enter). Sorts by recency; filters over title, preview, and id.
+Searchable, card-based conversation column for sidebars or a `DeesModal` (`harness-session-select` on click, `harness-session-open` on double-click/Enter). Cards are collapsed by default, expose an independent accessible expansion control, and auto-expand only when an already-rendered session changes from not working to `working: true`. Selection does not affect expansion.
+
+`IHarnessSessionMeta.state` accepts `normal`, `working`, `finished`, `attention`, or `error`; `working` remains an independent activity signal for expansion transitions. With `enableGrouping`, sortable cards can move within and between groups. Drag from a card's focusable grip, or use its ArrowUp, ArrowDown, Home, and End keys. Pointer dragging moves a full-card preview, opens a matching drop slot, and animates surrounding cards; `harness-session-move` includes both the compatibility `index` and a stable optional `beforeSessionId` anchor. Set `draggable: false` for pinned entries such as terminals. Pass `ungroupedSessionIds` to control the order outside groups; omitted or unknown entries fall back to recency order.
 
 ---
 

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '4.9.0',
+  version: '4.11.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -1,5 +1,9 @@
 import { html } from '@design.estate/dees-element';
-import type { IHarnessSessionMeta } from '../interfaces.js';
+import type {
+  IHarnessSessionGroup,
+  IHarnessSessionMeta,
+  IHarnessSessionMoveDetail,
+} from '../interfaces.js';
 
 const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index) => ({
   id: `session-${index}`,
@@ -15,8 +19,38 @@ const demoSessions: IHarnessSessionMeta[] = Array.from({ length: 24 }, (_, index
   updatedAt: Date.now() - (index + 1) * 3_500_000,
   messageCount: 4 + (index % 9),
   preview: 'Latest: the regression test asserts the cache key stays stable across…',
+  state: (['normal', 'working', 'finished', 'attention', 'error'] as const)[index % 5],
+  working: index % 5 === 1,
 }));
 
+const demoGroups: IHarnessSessionGroup[] = [
+  { id: 'active', name: 'Active work', sessionIds: ['session-0', 'session-1', 'session-2'] },
+  { id: 'review', name: 'Review', sessionIds: ['session-3', 'session-4'] },
+];
+
+type TDemoSessionList = HTMLElement & {
+  groups: IHarnessSessionGroup[];
+  ungroupedSessionIds: string[];
+};
+
+const handleSessionMove = (event: CustomEvent<IHarnessSessionMoveDetail>): void => {
+  const list = event.currentTarget as TDemoSessionList;
+  const { sessionId, groupId, beforeSessionId } = event.detail;
+  const groups = list.groups.map((group) => ({
+    ...group,
+    sessionIds: group.sessionIds.filter((id) => id !== sessionId),
+  }));
+  const ungroupedSessionIds = list.ungroupedSessionIds.filter((id) => id !== sessionId);
+  const targetIds = groupId === null
+    ? ungroupedSessionIds
+    : groups.find((group) => group.id === groupId)?.sessionIds;
+  if (!targetIds) return;
+  const anchorIndex = beforeSessionId ? targetIds.indexOf(beforeSessionId) : -1;
+  targetIds.splice(anchorIndex >= 0 ? anchorIndex : targetIds.length, 0, sessionId);
+  list.groups = groups;
+  list.ungroupedSessionIds = ungroupedSessionIds;
+};
+
 const openModal = async () => {
   const { DeesModal } = await import('../../00group-overlay/dees-modal/dees-modal.js');
   const content = document.createElement('dees-harness-session-list');
@@ -36,7 +70,7 @@ export const demoFunc = () => html`
   <style>
     .sessionDemo {
       display: grid;
-      grid-template-rows: auto minmax(0, 1fr);
+      grid-template-rows: auto auto minmax(0, 1fr);
       gap: 12px;
       height: 480px;
       max-width: 420px;
@@ -46,14 +80,23 @@ export const demoFunc = () => html`
       border: 1px solid var(--dees-color-border-subtle);
       background: var(--dees-color-bg-secondary);
     }
+    .demoHint {
+      color: var(--dees-color-text-secondary);
+      font-size: var(--dees-font-caption1-size, 11px);
+    }
     .sessionDemo dees-harness-session-list { min-height: 0; }
   </style>
   <div class="sessionDemo">
     <dees-button @clicked=${openModal}>Open in a DeesModal</dees-button>
+    <div class="demoHint">Drag the grip to reorder conversations or move them between groups.</div>
     <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: CustomEvent) => console.log('select', event.detail.session)}
+      @harness-session-move=${handleSessionMove}
     ></dees-harness-session-list>
   </div>
 `;