@design.estate/dees-catalog 10.0.0 → 11.0.0

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

@@ -7,14 +7,16 @@ import '../dees-harness-question-card/dees-harness-question-card.js';
 import '../dees-harness-permission-card/dees-harness-permission-card.js';
 import type { DeesHarnessSessionList } from './dees-harness-session-list.js';
 import type {
+  IHarnessItemMoveDetail,
   IHarnessResourceAssociation,
   IHarnessResourceContextDetail,
   IHarnessResourceEventDetail,
   IHarnessResourceMeta,
+  IHarnessSessionEventDetail,
   IHarnessSessionGroup,
   IHarnessSessionContextDetail,
+  IHarnessSessionListItemRef,
   IHarnessSessionMeta,
-  IHarnessSessionMoveDetail,
   IHarnessQuestionResponseDetail,
   IHarnessPermissionResponseDetail,
   THarnessResourceAssociationRequestDetail,
@@ -55,11 +57,39 @@ const demoSessions = (): IDemoSession[] => [
   preview: stages[session.stage].description,
 }));
 
+// Resources are peers of sessions: `terminal:build` sits in Workspace while it
+// stays attached to a session in Recent.
 const demoGroups: IHarnessSessionGroup[] = [
-  { id: 'active', name: 'Workspace', sessionIds: ['session-0', 'session-1', 'session-2', 'session-6'] },
-  { id: 'review', name: 'Recent', sessionIds: ['session-3', 'session-5', 'session-4'] },
+  {
+    id: 'active',
+    name: 'Workspace',
+    itemIds: [
+      { kind: 'session', id: 'session-0' },
+      { kind: 'resource', id: 'terminal:build' },
+      { kind: 'session', id: 'session-1' },
+      { kind: 'session', id: 'session-2' },
+      { kind: 'session', id: 'session-6' },
+    ],
+  },
+  {
+    id: 'review',
+    name: 'Recent',
+    itemIds: [
+      { kind: 'session', id: 'session-3' },
+      { kind: 'session', id: 'session-5' },
+      { kind: 'session', id: 'session-4' },
+    ],
+  },
 ];
 
+const cloneGroups = (groupsArg: IHarnessSessionGroup[]): IHarnessSessionGroup[] =>
+  groupsArg.map((group) => ({ ...group, itemIds: group.itemIds.map((ref) => ({ ...ref })) }));
+
+const sameRef = (
+  leftArg: IHarnessSessionListItemRef,
+  rightArg: IHarnessSessionListItemRef,
+): boolean => leftArg.kind === rightArg.kind && leftArg.id === rightArg.id;
+
 const demoResources: IHarnessResourceMeta[] = [
   {
     id: 'terminal:build',
@@ -88,45 +118,61 @@ const demoResources: IHarnessResourceMeta[] = [
   },
 ];
 
+// An association targets any other item: a session, or a resource such as a terminal.
 const demoResourceAssociations: IHarnessResourceAssociation[] = [
-  { resourceId: 'terminal:build', sessionId: 'session-4' },
-  { resourceId: 'file:release-notes', sessionId: 'session-4' },
+  { resourceId: 'terminal:build', target: { kind: 'session', id: 'session-4' } },
+  { resourceId: 'file:release-notes', target: { kind: 'resource', id: 'terminal:build' } },
+];
+
+const demoEligibleSessionTargets: IHarnessSessionListItemRef[] = [
+  { kind: 'session', id: 'session-0' },
+  { kind: 'session', id: 'session-1' },
+  { kind: 'session', id: 'session-2' },
+  { kind: 'session', id: 'session-4' },
 ];
 
-const demoResourceEligibleSessionIds = Object.fromEntries(
-  demoResources.map((resource) => [resource.id, ['session-0', 'session-1', 'session-2', 'session-4']]),
+const demoResourceEligibleTargets: Record<string, IHarnessSessionListItemRef[]> = Object.fromEntries(
+  demoResources.map((resource) => [
+    resource.id,
+    resource.kind === 'terminal'
+      ? demoEligibleSessionTargets
+      : [...demoEligibleSessionTargets, { kind: 'resource' as const, id: 'terminal:build' }],
+  ]),
 );
 
 type TDemoSessionList = DeesHarnessSessionList;
 
-const handleSessionSelect = (event: CustomEvent<{ session: IHarnessSessionMeta }>): void => {
+const handleSessionSelect = (event: CustomEvent<IHarnessSessionEventDetail>): void => {
   const list = event.currentTarget as TDemoSessionList;
   list.selectedSessionId = event.detail.session.id;
 };
 
-const handleSessionMove = (event: CustomEvent<IHarnessSessionMoveDetail>): void => {
+/** The host owns order: one reducer moves sessions and resources alike. */
+type TDemoItemMove = Pick<IHarnessItemMoveDetail, 'item' | 'toGroupId' | 'beforeItem'>;
+
+const handleItemMove = (event: CustomEvent<IHarnessItemMoveDetail>): void => {
   const list = event.currentTarget as TDemoSessionList;
-  applySessionMove(list, event.detail);
+  applyItemMove(list, event.detail);
 };
 
-const applySessionMove = (list: TDemoSessionList, detail: IHarnessSessionMoveDetail): void => {
-  const { sessionId, groupId, beforeSessionId } = detail;
+const applyItemMove = (list: TDemoSessionList, moveArg: TDemoItemMove): void => {
+  const { item, toGroupId, beforeItem } = moveArg;
   const groups = list.groups.map((group) => ({
     ...group,
-    sessionIds: group.sessionIds.filter((id) => id !== sessionId),
+    itemIds: group.itemIds.filter((ref) => !sameRef(ref, item)),
   }));
-  const ungroupedSessionIds = list.ungroupedSessionIds.filter((id) => id !== sessionId);
-  const targetIds = groupId === null
-    ? ungroupedSessionIds
-    : groups.find((group) => group.id === groupId)?.sessionIds;
+  const ungroupedItemIds = list.ungroupedItemIds.filter((ref) => !sameRef(ref, item));
+  const targetIds = toGroupId === null
+    ? ungroupedItemIds
+    : groups.find((group) => group.id === toGroupId)?.itemIds;
   if (!targetIds) return;
-  const anchorIndex = beforeSessionId ? targetIds.indexOf(beforeSessionId) : -1;
-  targetIds.splice(anchorIndex >= 0 ? anchorIndex : targetIds.length, 0, sessionId);
+  const anchorIndex = beforeItem ? targetIds.findIndex((ref) => sameRef(ref, beforeItem)) : -1;
+  targetIds.splice(anchorIndex >= 0 ? anchorIndex : targetIds.length, 0, { ...item });
   list.groups = groups;
-  list.ungroupedSessionIds = ungroupedSessionIds;
+  list.ungroupedItemIds = ungroupedItemIds;
 };
 
-const handleSessionOpen = (event: CustomEvent<{ session: IHarnessSessionMeta }>): void => {
+const handleSessionOpen = (event: CustomEvent<IHarnessSessionEventDetail>): void => {
   const list = event.currentTarget as TDemoSessionList;
   list.selectedSessionId = event.detail.session.id;
   showDemoResult(list, `Opened “${event.detail.session.title}”.`);
@@ -141,7 +187,10 @@ const handleSessionContext = async (
   const invokingControl = originalEvent.composedPath().find(
     (target): target is HTMLButtonElement => target instanceof HTMLButtonElement,
   );
-  const currentGroup = list.groups.find((group) => group.sessionIds.includes(session.id));
+  const sessionRef: IHarnessSessionListItemRef = { kind: 'session', id: session.id };
+  const currentGroup = list.groups.find(
+    (group) => group.itemIds.some((ref) => sameRef(ref, sessionRef)),
+  );
   // Capture dialog ownership before event dispatch ends: no await before opening.
   const menu = await DeesContextmenu.openContextMenuWithOptions(originalEvent, [
     {
@@ -159,7 +208,7 @@ const handleSessionContext = async (
     ...list.groups.filter((group) => group.id !== currentGroup?.id).map((group) => ({
       name: `Move to ${group.name}`, iconName: 'lucide:FolderInput',
       action: async () => {
-        applySessionMove(list, { sessionId: session.id, groupId: group.id, index: group.sessionIds.length });
+        applyItemMove(list, { item: sessionRef, toGroupId: group.id, beforeItem: null });
         onChange();
         showDemoResult(list, `Moved “${session.title}” to ${group.name}.`);
       },
@@ -167,7 +216,7 @@ const handleSessionContext = async (
     ...(currentGroup ? [{
       name: 'Move to Ungrouped', iconName: 'lucide:FolderInput',
       action: async () => {
-        applySessionMove(list, { sessionId: session.id, groupId: null, index: list.ungroupedSessionIds.length });
+        applyItemMove(list, { item: sessionRef, toGroupId: null, beforeItem: null });
         onChange();
         showDemoResult(list, `Moved “${session.title}” to Ungrouped.`);
       },
@@ -191,10 +240,10 @@ const handleResourceAssociation = (
   const next = list.resourceAssociations.filter(
     (association) => association.resourceId !== event.detail.resource.id,
   );
-  if (event.detail.toSessionId) {
+  if (event.detail.toTarget) {
     next.push({
       resourceId: event.detail.resource.id,
-      sessionId: event.detail.toSessionId,
+      target: { ...event.detail.toTarget },
     });
   }
   list.resourceAssociations = next;
@@ -204,27 +253,28 @@ const handleResourceContext = async (
   event: CustomEvent<IHarnessResourceContextDetail>,
 ): Promise<void> => {
   const list = event.currentTarget as TDemoSessionList;
-  const currentSessionId = event.detail.sessionId;
-  const eligibleSessionIds = list.eligibleSessionIdsByResourceId[event.detail.resource.id] ?? [];
+  const currentTarget = event.detail.target;
+  const eligibleTargets = list.eligibleTargetsByResourceId[event.detail.resource.id] ?? [];
+  const titleFor = (refArg: IHarnessSessionListItemRef): string => (refArg.kind === 'session'
+    ? list.sessions.find((session) => session.id === refArg.id)?.title
+    : list.resources.find((resource) => resource.id === refArg.id)?.title) ?? refArg.id;
   const menu = await DeesContextmenu.openContextMenuWithOptions(
     new MouseEvent('contextmenu', {
       clientX: event.detail.clientX,
       clientY: event.detail.clientY,
     }),
     [
-      ...eligibleSessionIds
-        .filter((sessionId) => sessionId !== currentSessionId)
-        .map((sessionId) => ({
-          name: `${currentSessionId ? 'Reassign' : 'Attach'} to ${
-            list.sessions.find((session) => session.id === sessionId)?.title
-          }`,
+      ...eligibleTargets
+        .filter((target) => !currentTarget || !sameRef(target, currentTarget))
+        .map((target) => ({
+          name: `${currentTarget ? 'Reassign' : 'Attach'} to ${titleFor(target)}`,
           iconName: 'lucide:Link',
           action: async () => {
-            event.detail.requestAssociation(sessionId);
+            event.detail.requestAssociation(target);
             event.detail.close();
           },
         })),
-      ...(currentSessionId
+      ...(currentTarget
         ? [{
             name: 'Detach',
             iconName: 'lucide:Unlink',
@@ -249,7 +299,7 @@ const openModal = async (sessions: IHarnessSessionMeta[], groups: IHarnessSessio
   const content = document.createElement('dees-harness-session-list');
   content.sessions = sessions;
   content.groups = groups;
-  content.ungroupedSessionIds = [];
+  content.ungroupedItemIds = [];
   content.enableGrouping = true;
   content.style.height = '420px';
   content.addEventListener('harness-session-select', handleSessionSelect as EventListener);
@@ -257,7 +307,7 @@ const openModal = async (sessions: IHarnessSessionMeta[], groups: IHarnessSessio
   content.addEventListener('harness-session-context', (event) => {
     void handleSessionContext(event as CustomEvent<IHarnessSessionContextDetail>);
   });
-  content.addEventListener('harness-session-move', handleSessionMove as EventListener);
+  content.addEventListener('harness-item-move', handleItemMove as EventListener);
   DeesModal.createAndShow({
     heading: 'Conversations',
     content: html`<style>${demoStyles}</style><div class="dees-demo-stack">${content}${demoOutput('Choose a conversation action.')}</div>`,
@@ -269,8 +319,8 @@ const openModal = async (sessions: IHarnessSessionMeta[], groups: IHarnessSessio
 class DeesDemoSessionWorkspace extends DeesElement {
   @state() private accessor sessions = demoSessions();
   @state() private accessor selectedSessionId = 'session-0';
-  @state() private accessor groups = demoGroups.map((group) => ({ ...group, sessionIds: [...group.sessionIds] }));
-  @state() private accessor ungroupedSessionIds: string[] = [];
+  @state() private accessor groups: IHarnessSessionGroup[] = cloneGroups(demoGroups);
+  @state() private accessor ungroupedItemIds: IHarnessSessionListItemRef[] = [];
   @state() private accessor associations = [...demoResourceAssociations];
   @state() private accessor notice = 'Interactive demo · Changes stay in this example.';
   @state() private accessor showDetails = false;
@@ -327,11 +377,11 @@ class DeesDemoSessionWorkspace extends DeesElement {
     if (!list) return;
     this.selectedSessionId = list.selectedSessionId;
     this.groups = list.groups;
-    this.ungroupedSessionIds = list.ungroupedSessionIds;
+    this.ungroupedItemIds = list.ungroupedItemIds;
     this.associations = list.resourceAssociations;
   }
 
-  private async select(event: CustomEvent<{ session: IHarnessSessionMeta }>): Promise<void> {
+  private async select(event: CustomEvent<IHarnessSessionEventDetail>): Promise<void> {
     handleSessionSelect(event);
     this.selectedSessionId = event.detail.session.id;
     await this.revealSession();
@@ -359,8 +409,8 @@ class DeesDemoSessionWorkspace extends DeesElement {
   private reset(): void {
     this.sessions = demoSessions();
     this.selectedSessionId = 'session-0';
-    this.groups = demoGroups.map((group) => ({ ...group, sessionIds: [...group.sessionIds] }));
-    this.ungroupedSessionIds = [];
+    this.groups = cloneGroups(demoGroups);
+    this.ungroupedItemIds = [];
     this.associations = [...demoResourceAssociations];
     this.notice = 'Demo reset. Choose a session or respond to the approval request.';
     if (this.list) {
@@ -390,20 +440,20 @@ class DeesDemoSessionWorkspace extends DeesElement {
             <span class="attentionSummary"><dees-icon icon="lucide:CircleAlert" iconSize="12"></dees-icon>${attentionCount} need attention</span>
           </div>
           <dees-harness-session-list
-            .sessions=${this.sessions} .groups=${this.groups} .ungroupedSessionIds=${this.ungroupedSessionIds}
+            .sessions=${this.sessions} .groups=${this.groups} .ungroupedItemIds=${this.ungroupedItemIds}
             .resources=${demoResources} .resourceAssociations=${this.associations}
-            .eligibleSessionIdsByResourceId=${demoResourceEligibleSessionIds} .enableGrouping=${true}
+            .eligibleTargetsByResourceId=${demoResourceEligibleTargets} .enableGrouping=${true}
             .selectedSessionId=${this.selectedSessionId}
             @harness-session-select=${this.select} @harness-session-open=${this.select}
             @harness-session-context=${(event: CustomEvent<IHarnessSessionContextDetail>) => handleSessionContext(event, (opened) => {
               this.syncList();
               if (opened) void this.revealSession();
             })}
-            @harness-session-move=${(event: CustomEvent<IHarnessSessionMoveDetail>) => { handleSessionMove(event); this.syncList(); }}
+            @harness-item-move=${(event: CustomEvent<IHarnessItemMoveDetail>) => { handleItemMove(event); this.syncList(); }}
             @harness-group-create-request=${() => {
-              this.groups = [...this.groups, { id: `group-${this.groups.length}`, name: `Group ${this.groups.length + 1}`, sessionIds: [] }];
+              this.groups = [...this.groups, { id: `group-${this.groups.length}`, name: `Group ${this.groups.length + 1}`, itemIds: [] }];
               if (this.list) this.list.search = '';
-              this.notice = 'Group created. Drag a session here or use its Actions menu.';
+              this.notice = 'Group created. Drag a conversation or resource here, or use its Actions menu.';
             }}
             @harness-resource-select=${(event: CustomEvent<IHarnessResourceEventDetail>) => {
               (event.currentTarget as TDemoSessionList).selectedResourceId = event.detail.resource.id;