@design.estate/dees-catalog 3.101.0 → 3.103.0

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

@@ -10,7 +10,13 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessSessionContextDetail, IHarnessSessionMeta } from '../interfaces.js';
+import type {
+  IHarnessGroupContextDetail,
+  IHarnessSessionContextDetail,
+  IHarnessSessionGroup,
+  IHarnessSessionMeta,
+  IHarnessSessionMoveDetail,
+} from '../interfaces.js';
 import { harnessFormatRelativeTime } from '../harness.helpers.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -20,11 +26,24 @@ declare global {
   }
 }
 
+interface IDropSlot {
+  groupId: string | null;
+  index: number;
+}
+
 /**
  * Searchable conversation list, embeddable in a sidebar or a DeesModal.
  * Emits `harness-session-select` on click, `harness-session-open` on
  * double-click or Enter, and `harness-session-context` with viewport
  * pointer coordinates on right-click (the browser menu is suppressed).
+ *
+ * With `enableGrouping`, sessions render under user-defined `groups` and can
+ * be dragged between groups and reordered. The component never mutates its
+ * inputs: drops emit `harness-session-move`, the "new group" button emits
+ * `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.
  */
 @customElement('dees-harness-session-list')
 export class DeesHarnessSessionList extends DeesElement {
@@ -43,9 +62,24 @@ export class DeesHarnessSessionList extends DeesElement {
   @property()
   accessor emptyText: string = 'No conversations yet.';
 
+  @property({ attribute: false })
+  accessor groups: IHarnessSessionGroup[] = [];
+
+  @property({ type: Boolean })
+  accessor enableGrouping: boolean = false;
+
   @state()
   accessor search: string = '';
 
+  @state()
+  accessor draggingSessionId: string = '';
+
+  @state()
+  accessor dropSlot: IDropSlot | undefined = undefined;
+
+  @state()
+  accessor collapsedGroupIds: ReadonlySet<string> = new Set<string>();
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -118,6 +152,10 @@ export class DeesHarnessSessionList extends DeesElement {
         box-shadow: inset 2px 0 0 var(--dees-color-accent-primary);
       }
 
+      .item.dragging {
+        opacity: 0.4;
+      }
+
       .itemTitle {
         display: flex;
         align-items: baseline;
@@ -133,6 +171,12 @@ export class DeesHarnessSessionList extends DeesElement {
         white-space: nowrap;
       }
 
+      .itemTitle .itemIcon {
+        flex: 0 0 auto;
+        align-self: center;
+        color: var(--dees-color-text-secondary);
+      }
+
       .itemTime {
         margin-left: auto;
         flex: 0 0 auto;
@@ -155,9 +199,109 @@ export class DeesHarnessSessionList extends DeesElement {
         font-size: var(--dees-font-control-size-sm, 12px);
         text-align: center;
       }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        margin-top: var(--dees-spacing-xs);
+        padding: 2px var(--dees-spacing-sm);
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-caption1-size, 11px);
+        font-weight: 650;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        text-align: left;
+      }
+
+      .groupHeader:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .groupHeader .chevron {
+        transition: transform var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .groupHeader.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      .groupHeader .groupCount {
+        margin-left: auto;
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: normal;
+        color: var(--dees-color-text-muted);
+      }
+
+      .groupHeader.dropTarget {
+        outline: 1px dashed var(--dees-color-accent-primary);
+        outline-offset: -1px;
+      }
+
+      .dropLine {
+        height: 2px;
+        margin: 0 var(--dees-spacing-sm);
+        border-radius: 1px;
+        background: var(--dees-color-accent-primary);
+      }
+
+      .newGroupRow {
+        flex: 0 0 auto;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-sm) var(--dees-spacing-sm);
+      }
+
+      .newGroupButton {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        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;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .newGroupButton:hover {
+        border-color: var(--dees-color-accent-primary);
+        color: var(--dees-color-text-primary);
+      }
     `,
   ];
 
+  private get sessionsById(): Map<string, IHarnessSessionMeta> {
+    return new Map(this.sessions.map((session) => [session.id, session]));
+  }
+
+  private get groupedSessionIds(): Set<string> {
+    const ids = new Set<string>();
+    for (const group of this.groups) {
+      for (const id of group.sessionIds) ids.add(id);
+    }
+    return ids;
+  }
+
+  /** Ungrouped sessions, most recent first. */
+  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),
+      );
+  }
+
   private get filteredSessions(): IHarnessSessionMeta[] {
     const query = this.search.trim().toLowerCase();
     const sorted = [...this.sessions].sort(
@@ -174,7 +318,7 @@ export class DeesHarnessSessionList extends DeesElement {
   }
 
   public render(): TemplateResult {
-    const sessions = this.filteredSessions;
+    const groupingActive = this.enableGrouping && !this.search.trim();
     return html`
       <div class="searchRow">
         <input
@@ -188,18 +332,138 @@ export class DeesHarnessSessionList extends DeesElement {
       <div class="list">
         ${this.loading
           ? html`<div class="emptyNote">Loading conversations…</div>`
-          : sessions.length
-            ? sessions.map((session) => this.renderItem(session))
-            : html`<div class="emptyNote">${this.sessions.length ? 'No conversations match this search.' : this.emptyText}</div>`}
+          : groupingActive
+            ? this.renderGroupedList()
+            : this.renderFlatList()}
       </div>
+      ${groupingActive
+        ? html`
+            <div class="newGroupRow">
+              <button
+                class="newGroupButton"
+                type="button"
+                @click=${() => {
+                  this.dispatchEvent(
+                    new CustomEvent('harness-group-create-request', {
+                      bubbles: true,
+                      composed: true,
+                    }),
+                  );
+                }}
+              >
+                <dees-icon icon="lucide:FolderPlus" iconSize="13"></dees-icon>
+                New group
+              </button>
+            </div>
+          `
+        : ''}
+    `;
+  }
+
+  private renderFlatList(): TemplateResult {
+    const sessions = this.filteredSessions;
+    if (!sessions.length) {
+      return html`<div class="emptyNote">
+        ${this.sessions.length ? 'No conversations match this search.' : this.emptyText}
+      </div>`;
+    }
+    return html`${sessions.map((session) => this.renderItem(session, null, -1))}`;
+  }
+
+  private renderGroupedList(): TemplateResult {
+    const byId = this.sessionsById;
+    const ungrouped = this.ungroupedSessions;
+    if (!this.sessions.length && !this.groups.length) {
+      return html`<div class="emptyNote">${this.emptyText}</div>`;
+    }
+    return html`
+      ${this.groups.map((group) => {
+        const members = group.sessionIds
+          .map((id) => byId.get(id))
+          .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;
+        return html`
+          <button
+            class="groupHeader ${collapsed ? 'collapsed' : ''} ${isHeaderDrop ? 'dropTarget' : ''}"
+            type="button"
+            @click=${() => this.toggleGroupCollapsed(group.id)}
+            @contextmenu=${(event: MouseEvent) => {
+              event.preventDefault();
+              const detail: IHarnessGroupContextDetail = {
+                group,
+                clientX: event.clientX,
+                clientY: event.clientY,
+                originalEvent: event,
+              };
+              this.dispatchEvent(
+                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>
+            <span class="groupCount">${members.length}</span>
+          </button>
+          ${collapsed
+            ? ''
+            : this.renderSection(members, group.id)}
+        `;
+      })}
+      ${this.groups.length && ungrouped.length
+        ? html`
+            <button
+              class="groupHeader"
+              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>
+            </button>
+          `
+        : ''}
+      ${this.renderSection(ungrouped, null)}
     `;
   }
 
-  private renderItem(session: IHarnessSessionMeta): TemplateResult {
+  private renderSection(
+    sessions: IHarnessSessionMeta[],
+    groupId: string | null,
+  ): TemplateResult {
+    const slot = this.dropSlot;
+    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>`
+        : ''}
+    `;
+  }
+
+  private renderItem(
+    session: IHarnessSessionMeta,
+    groupId: string | null,
+    index: number,
+  ): TemplateResult {
+    const draggable = this.enableGrouping && index >= 0;
     return html`
       <button
-        class="item ${session.id === this.selectedSessionId ? 'selected' : ''}"
+        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: KeyboardEvent) => {
@@ -217,8 +481,34 @@ 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>`
+            : ''}
           <span class="titleText">${session.title || session.id}</span>
           <span class="itemTime">${harnessFormatRelativeTime(session.updatedAt ?? session.createdAt)}</span>
         </span>
@@ -229,6 +519,45 @@ export class DeesHarnessSessionList extends DeesElement {
     `;
   }
 
+  private toggleGroupCollapsed(groupIdArg: string): void {
+    const next = new Set(this.collapsedGroupIds);
+    if (next.has(groupIdArg)) {
+      next.delete(groupIdArg);
+    } else {
+      next.add(groupIdArg);
+    }
+    this.collapsedGroupIds = next;
+  }
+
+  private setDropSlot(groupIdArg: string | null, indexArg: number): void {
+    const current = this.dropSlot;
+    if (current && current.groupId === groupIdArg && current.index === indexArg) return;
+    this.dropSlot = { groupId: groupIdArg, index: indexArg };
+  }
+
+  private handleDragOverSlot(event: DragEvent, groupIdArg: string | null, indexArg: number): void {
+    if (!this.draggingSessionId) return;
+    event.preventDefault();
+    this.setDropSlot(groupIdArg, indexArg);
+  }
+
+  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;
+    const detail: IHarnessSessionMoveDetail = {
+      sessionId,
+      groupId: groupIdArg,
+      index: Math.max(0, indexArg),
+    };
+    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 }));
   }

package/ts_web/elements/00group-harness/dees-terminal-view/dees-terminal-view.demo.ts

@@ -0,0 +1,26 @@
+import { html } from '@design.estate/dees-element';
+
+// A loopback demo: keystrokes echo straight back into the terminal so the
+// component is explorable without a live PTY behind it.
+export const demoFunc = () => html`
+  <style>
+    .terminalDemo {
+      height: 380px;
+      border: 1px solid var(--dees-color-border-default);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+  </style>
+  <div class="terminalDemo">
+    <dees-terminal-view
+      @terminal-input=${(event: CustomEvent<{ data: string }>) => {
+        const view = event.currentTarget as HTMLElementTagNameMap['dees-terminal-view'];
+        const data = event.detail.data;
+        view.write(data === '\r' ? '\r\n' : data);
+      }}
+      @terminal-resize=${(event: CustomEvent<{ rows: number; cols: number }>) => {
+        console.log('terminal size', event.detail);
+      }}
+    ></dees-terminal-view>
+  </div>
+`;