@design.estate/dees-catalog 11.2.2 → 12.0.0

package/ts_web/elements/00group-harness/dees-harness-conversation-picker/dees-harness-conversation-picker.ts

@@ -0,0 +1,420 @@
+import { demoFunc } from './dees-harness-conversation-picker.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type {
+  IHarnessResourceMeta,
+  IHarnessSessionGroup,
+  IHarnessSessionListItemRef,
+  IHarnessSessionMeta,
+} from '../interfaces.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-conversation-picker': DeesHarnessConversationPicker;
+  }
+}
+
+interface IPickerEntry {
+  target: IHarnessSessionListItemRef;
+  title: string;
+  /** Project label, resource kind, or whatever second line the item offers. */
+  detail: string;
+  groupName: string;
+  icon: string;
+}
+
+const itemKey = (refArg: IHarnessSessionListItemRef): string => `${refArg.kind}:${refArg.id}`;
+
+/**
+ * Stable per-option DOM id so the input can point `aria-activedescendant` at the active row.
+ * Ids only have to be unique inside this shadow root, and the key already is.
+ */
+const optionId = (refArg: IHarnessSessionListItemRef): string =>
+  `picker-option-${refArg.kind}-${refArg.id}`.replace(/[^a-zA-Z0-9_-]/g, '_');
+
+const sameRef = (
+  leftArg: IHarnessSessionListItemRef | undefined,
+  rightArg: IHarnessSessionListItemRef | undefined,
+): boolean => Boolean(leftArg && rightArg && itemKey(leftArg) === itemKey(rightArg));
+
+/** Options for the one-call static helper. */
+export interface IHarnessConversationPickerOptions {
+  sessions?: IHarnessSessionMeta[];
+  groups?: IHarnessSessionGroup[];
+  resources?: IHarnessResourceMeta[];
+  /** Targets already in use; filtered out so a picker never offers a no-op. */
+  excludeTargets?: IHarnessSessionListItemRef[];
+  /** Host-declared allowed targets; an absent list means unrestricted. */
+  eligibleTargets?: IHarnessSessionListItemRef[];
+  heading?: string;
+  subheading?: string;
+  emptyText?: string;
+}
+
+/**
+ * Keyboard-first picker for one conversation (or one attachable resource). It is presentation
+ * only: it never mutates a session, a resource, or an association — it resolves one choice and
+ * leaves the change to the host.
+ *
+ * Typing filters on title, project label and group name. Up/Down move the active row, Enter picks
+ * it, Escape cancels. `harness-picker-choose` carries the chosen `IHarnessSessionListItemRef`;
+ * `harness-picker-cancel` carries nothing. Use the static `pick()` helper to get both as one
+ * promise inside a modal.
+ */
+@customElement('dees-harness-conversation-picker')
+export class DeesHarnessConversationPicker extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property({ attribute: false })
+  accessor sessions: IHarnessSessionMeta[] = [];
+
+  @property({ attribute: false })
+  accessor groups: IHarnessSessionGroup[] = [];
+
+  @property({ attribute: false })
+  accessor resources: IHarnessResourceMeta[] = [];
+
+  @property({ attribute: false })
+  accessor excludeTargets: IHarnessSessionListItemRef[] = [];
+
+  /** Absent (undefined) means unrestricted; an empty array means nothing is eligible. */
+  @property({ attribute: false })
+  accessor eligibleTargets: IHarnessSessionListItemRef[] | undefined = undefined;
+
+  @property({ type: String })
+  accessor heading: string = 'Attach to…';
+
+  @property({ type: String })
+  accessor emptyText: string = 'No conversation matches.';
+
+  @state()
+  accessor search: string = '';
+
+  @state()
+  accessor activeKey: string = '';
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        min-width: 0;
+        font-family: var(--dees-font-family);
+      }
+
+      .searchRow {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: 0 0 var(--dees-spacing-sm);
+      }
+
+      .searchRow dees-icon {
+        flex: 0 0 auto;
+        color: var(--dees-color-text-secondary);
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        height: var(--dees-control-height-md);
+        padding: 0 10px;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-control-bg);
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      input:focus-visible {
+        outline: 2px solid var(--dees-color-focus-ring);
+        outline-offset: 1px;
+      }
+
+      .results {
+        display: grid;
+        gap: 2px;
+        max-height: 320px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .entry {
+        display: grid;
+        grid-template-columns: 20px minmax(0, 1fr);
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: 6px 8px;
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        corner-shape: var(--dees-corner-shape);
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        cursor: pointer;
+        font-family: inherit;
+        text-align: left;
+      }
+
+      .entry:hover {
+        background: var(--dees-color-hover);
+      }
+
+      .entry.active {
+        background: var(--dees-color-nav-selected);
+      }
+
+      .entryCopy {
+        min-width: 0;
+      }
+
+      .entryTitle {
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 590;
+      }
+
+      .entryMeta {
+        display: block;
+        overflow: hidden;
+        margin-top: 1px;
+        color: var(--dees-color-text-secondary);
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--dees-font-caption2-size, 10px);
+      }
+
+      .empty {
+        padding: var(--dees-spacing-md) 8px;
+        color: var(--dees-color-text-secondary);
+        text-align: center;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+    `,
+  ];
+
+  /** Every offerable target, before the search filter. */
+  private get entries(): IPickerEntry[] {
+    const groupNameByKey = new Map<string, string>();
+    for (const group of this.groups) {
+      for (const ref of group.itemIds ?? []) {
+        if (ref) groupNameByKey.set(itemKey(ref), group.name);
+      }
+    }
+    const excluded = new Set(this.excludeTargets.filter(Boolean).map((ref) => itemKey(ref)));
+    const eligible = this.eligibleTargets
+      ? new Set(this.eligibleTargets.filter(Boolean).map((ref) => itemKey(ref)))
+      : undefined;
+    const offerable = (refArg: IHarnessSessionListItemRef): boolean =>
+      !excluded.has(itemKey(refArg)) && (eligible === undefined || eligible.has(itemKey(refArg)));
+
+    const result: IPickerEntry[] = [];
+    for (const session of this.sessions) {
+      const target: IHarnessSessionListItemRef = { kind: 'session', id: session.id };
+      if (!session.id || !offerable(target)) continue;
+      result.push({
+        target,
+        title: session.title || session.id,
+        detail: session.projectLabel?.trim() || session.harness?.name || '',
+        groupName: groupNameByKey.get(itemKey(target)) ?? '',
+        icon: session.icon || 'lucide:MessageSquare',
+      });
+    }
+    for (const resource of this.resources) {
+      const target: IHarnessSessionListItemRef = { kind: 'resource', id: resource.id };
+      if (!resource.id || !offerable(target)) continue;
+      result.push({
+        target,
+        title: resource.title || resource.id,
+        detail: [resource.kind, resource.projectLabel?.trim()].filter(Boolean).join(' · '),
+        groupName: groupNameByKey.get(itemKey(target)) ?? '',
+        icon: resource.icon || 'lucide:Box',
+      });
+    }
+    return result;
+  }
+
+  /** Title, project label and group name are all searchable, like the list itself. */
+  private get filteredEntries(): IPickerEntry[] {
+    const query = this.search.trim().toLowerCase();
+    if (!query) return this.entries;
+    return this.entries.filter((entry) => [entry.title, entry.detail, entry.groupName]
+      .filter(Boolean)
+      .join(' ')
+      .toLowerCase()
+      .includes(query));
+  }
+
+  private get activeEntry(): IPickerEntry | undefined {
+    const entries = this.filteredEntries;
+    return entries.find((entry) => itemKey(entry.target) === this.activeKey) ?? entries[0];
+  }
+
+  public render(): TemplateResult {
+    const entries = this.filteredEntries;
+    const active = this.activeEntry;
+    return html`
+      <div class="searchRow">
+        <dees-icon icon="lucide:Search" iconSize="14"></dees-icon>
+        <input
+          type="text"
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="picker-results"
+          aria-activedescendant=${active ? optionId(active.target) : ''}
+          aria-label=${this.heading}
+          placeholder="Search conversations"
+          .value=${this.search}
+          @input=${(event: Event) => {
+            this.search = (event.target as HTMLInputElement).value;
+            this.activeKey = '';
+          }}
+          @keydown=${this.handleKeyDown}
+        />
+      </div>
+      <div class="results" id="picker-results" role="listbox">
+        ${entries.length
+          ? entries.map((entry) => html`
+              <button
+                class=${`entry ${sameRef(entry.target, active?.target) ? 'active' : ''}`}
+                type="button"
+                role="option"
+                id=${optionId(entry.target)}
+                aria-selected=${sameRef(entry.target, active?.target) ? 'true' : 'false'}
+                data-target-key=${itemKey(entry.target)}
+                @click=${() => this.choose(entry.target)}
+              >
+                <dees-icon aria-hidden="true" icon=${entry.icon} iconSize="14"></dees-icon>
+                <span class="entryCopy">
+                  <span class="entryTitle">${entry.title}</span>
+                  ${entry.detail || entry.groupName
+                    ? html`<span class="entryMeta">${[entry.detail, entry.groupName].filter(Boolean).join(' · ')}</span>`
+                    : ''}
+                </span>
+              </button>
+            `)
+          : html`<div class="empty">${this.emptyText}</div>`}
+      </div>
+    `;
+  }
+
+  public async focusSearch(): Promise<void> {
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLInputElement>('input')?.focus();
+  }
+
+  private readonly handleKeyDown = (eventArg: KeyboardEvent): void => {
+    const entries = this.filteredEntries;
+    if (eventArg.key === 'Escape') {
+      eventArg.preventDefault();
+      eventArg.stopPropagation();
+      this.cancel();
+      return;
+    }
+    if (eventArg.key === 'Enter') {
+      eventArg.preventDefault();
+      const active = this.activeEntry;
+      if (active) this.choose(active.target);
+      return;
+    }
+    if (eventArg.key !== 'ArrowDown' && eventArg.key !== 'ArrowUp') return;
+    if (!entries.length) return;
+    eventArg.preventDefault();
+    const activeIndex = Math.max(
+      0,
+      entries.findIndex((entry) => itemKey(entry.target) === itemKey(this.activeEntry!.target)),
+    );
+    const nextIndex = eventArg.key === 'ArrowDown'
+      ? (activeIndex + 1) % entries.length
+      : (activeIndex - 1 + entries.length) % entries.length;
+    this.activeKey = itemKey(entries[nextIndex]!.target);
+    void this.scrollActiveIntoView();
+  };
+
+  private async scrollActiveIntoView(): Promise<void> {
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLElement>('.entry.active')?.scrollIntoView({ block: 'nearest' });
+  }
+
+  private choose(targetArg: IHarnessSessionListItemRef): void {
+    this.dispatchEvent(new CustomEvent('harness-picker-choose', {
+      detail: { target: { kind: targetArg.kind, id: targetArg.id } },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private cancel(): void {
+    this.dispatchEvent(new CustomEvent('harness-picker-cancel', { bubbles: true, composed: true }));
+  }
+
+  /**
+   * Opens the picker in a modal and resolves with the chosen target, or null when it was
+   * cancelled. Focus returns to whatever had it when the picker opened.
+   */
+  public static async pick(
+    optionsArg: IHarnessConversationPickerOptions = {},
+  ): Promise<IHarnessSessionListItemRef | null> {
+    const { DeesModal } = await import('../../00group-overlay/dees-modal/dees-modal.js');
+    const picker = new DeesHarnessConversationPicker();
+    picker.sessions = optionsArg.sessions ?? [];
+    picker.groups = optionsArg.groups ?? [];
+    picker.resources = optionsArg.resources ?? [];
+    picker.excludeTargets = optionsArg.excludeTargets ?? [];
+    picker.eligibleTargets = optionsArg.eligibleTargets;
+    picker.heading = optionsArg.heading ?? 'Attach to…';
+    if (optionsArg.emptyText) picker.emptyText = optionsArg.emptyText;
+
+    const previousFocus = (document.activeElement instanceof HTMLElement)
+      ? document.activeElement
+      : undefined;
+
+    return new Promise<IHarnessSessionListItemRef | null>((resolve) => {
+      let settled = false;
+      const modalPromise = DeesModal.createAndShow({
+        heading: optionsArg.heading ?? 'Attach to…',
+        subheading: optionsArg.subheading,
+        content: html`${picker}`,
+        menuOptions: [],
+        width: 'small',
+      });
+      const finish = (resultArg: IHarnessSessionListItemRef | null): void => {
+        if (settled) return;
+        settled = true;
+        picker.removeEventListener('harness-picker-choose', onChoose);
+        picker.removeEventListener('harness-picker-cancel', onCancel);
+        void modalPromise.then((modal) => modal.destroy()).finally(() => {
+          previousFocus?.focus();
+          resolve(resultArg);
+        });
+      };
+      const onChoose = (eventArg: Event): void => {
+        finish((eventArg as CustomEvent<{ target: IHarnessSessionListItemRef }>).detail.target);
+      };
+      const onCancel = (): void => finish(null);
+      picker.addEventListener('harness-picker-choose', onChoose);
+      picker.addEventListener('harness-picker-cancel', onCancel);
+      void modalPromise.then(async (modal) => {
+        modal.addEventListener('modal-close', onCancel, { once: true });
+        await picker.focusSearch();
+      });
+    });
+  }
+}

package/ts_web/elements/00group-harness/dees-harness-conversation-picker/index.ts

@@ -0,0 +1 @@
+export * from './dees-harness-conversation-picker.js';

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

@@ -2,6 +2,7 @@ import { DeesElement, css, customElement, directives, html, state } from '@desig
 import { demoApp, demoOutput, demoStyles, showDemoResult } from '../../../demos/templates.js';
 import { themeDefaultStyles } from '../../00theme.js';
 import { harnessPillStyles } from '../harness.styles.js';
+import { DeesHarnessConversationPicker } from '../dees-harness-conversation-picker/dees-harness-conversation-picker.js';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import '../dees-harness-question-card/dees-harness-question-card.js';
 import '../dees-harness-permission-card/dees-harness-permission-card.js';
@@ -19,7 +20,7 @@ import type {
   IHarnessSessionMeta,
   IHarnessQuestionResponseDetail,
   IHarnessPermissionResponseDetail,
-  THarnessResourceAssociationRequestDetail,
+  THarnessResourceAssociateDetail,
 } from '../interfaces.js';
 
 type TDemoStage = 'idle' | 'starting' | 'working' | 'feedback' | 'approval' | 'finished' | 'error' | 'paused';
@@ -120,10 +121,14 @@ const demoResources: IHarnessResourceMeta[] = [
   },
 ];
 
-// An association targets any other item: a session, or a resource such as a terminal.
+// A resource can be attached to several items at once, and a target is any other item: a session,
+// or a resource such as a terminal.
 const demoResourceAssociations: IHarnessResourceAssociation[] = [
-  { resourceId: 'terminal:build', target: { kind: 'session', id: 'session-4' } },
-  { resourceId: 'file:release-notes', target: { kind: 'resource', id: 'terminal:build' } },
+  {
+    resourceId: 'terminal:build',
+    targets: [{ kind: 'session', id: 'session-4' }, { kind: 'session', id: 'session-0' }],
+  },
+  { resourceId: 'file:release-notes', targets: [{ kind: 'resource', id: 'terminal:build' }] },
 ];
 
 const demoEligibleSessionTargets: IHarnessSessionListItemRef[] = [
@@ -235,19 +240,28 @@ const handleSessionContext = async (
   });
 };
 
+const sameTarget = (
+  leftArg: IHarnessSessionListItemRef,
+  rightArg: IHarnessSessionListItemRef,
+): boolean => leftArg.kind === rightArg.kind && leftArg.id === rightArg.id;
+
+/** Applies one validated request to the controlled set; the list never mutates it itself. */
 const handleResourceAssociation = (
-  event: CustomEvent<THarnessResourceAssociationRequestDetail>,
+  event: CustomEvent<THarnessResourceAssociateDetail>,
 ): void => {
   const list = event.currentTarget as TDemoSessionList;
+  const detail = event.detail;
+  const current = list.resourceAssociations
+    .find((association) => association.resourceId === detail.resource.id)?.targets ?? [];
+  const targets = detail.mode === 'detach'
+    ? current.filter((target) => !sameTarget(target, detail.fromTarget))
+    : detail.mode === 'move'
+      ? current.map((target) => (sameTarget(target, detail.fromTarget) ? { ...detail.toTarget } : target))
+      : [...current, { ...detail.toTarget }];
   const next = list.resourceAssociations.filter(
-    (association) => association.resourceId !== event.detail.resource.id,
+    (association) => association.resourceId !== detail.resource.id,
   );
-  if (event.detail.toTarget) {
-    next.push({
-      resourceId: event.detail.resource.id,
-      target: { ...event.detail.toTarget },
-    });
-  }
+  if (targets.length) next.push({ resourceId: detail.resource.id, targets });
   list.resourceAssociations = next;
 };
 
@@ -255,36 +269,80 @@ const handleResourceContext = async (
   event: CustomEvent<IHarnessResourceContextDetail>,
 ): Promise<void> => {
   const list = event.currentTarget as TDemoSessionList;
-  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 resource = event.detail.resource;
+  const currentTargets = event.detail.targets;
+  const eligibleTargets = list.eligibleTargetsByResourceId[resource.id];
+  const pickerOptions = {
+    sessions: list.sessions,
+    groups: list.groups,
+    resources: list.resources.filter((candidate) => candidate.id !== resource.id),
+    eligibleTargets,
+  };
+  /** Which attachment did the user mean? Only asked when there is more than one. */
+  const pickAttachment = async (
+    headingArg: string,
+  ): Promise<IHarnessSessionListItemRef | null> => {
+    if (currentTargets.length <= 1) return currentTargets[0] ?? null;
+    return DeesHarnessConversationPicker.pick({
+      sessions: list.sessions,
+      groups: list.groups,
+      resources: list.resources,
+      eligibleTargets: currentTargets,
+      heading: headingArg,
+      emptyText: 'No attachment to choose.',
+    });
+  };
   const menu = await DeesContextmenu.openContextMenuWithOptions(
     new MouseEvent('contextmenu', {
       clientX: event.detail.clientX,
       clientY: event.detail.clientY,
     }),
     [
-      ...eligibleTargets
-        .filter((target) => !currentTarget || !sameRef(target, currentTarget))
-        .map((target) => ({
-          name: `${currentTarget ? 'Reassign' : 'Attach'} to ${titleFor(target)}`,
-          iconName: 'lucide:Link',
-          action: async () => {
-            event.detail.requestAssociation(target);
-            event.detail.close();
-          },
-        })),
-      ...(currentTarget
-        ? [{
-            name: 'Detach',
-            iconName: 'lucide:Unlink',
-            action: async () => {
-              event.detail.requestAssociation(null);
-              event.detail.close();
+      {
+        name: currentTargets.length ? 'Additionally attach to…' : 'Attach to…',
+        iconName: 'lucide:Link',
+        action: async () => {
+          event.detail.close();
+          const target = await DeesHarnessConversationPicker.pick({
+            ...pickerOptions,
+            excludeTargets: currentTargets,
+            heading: `Attach ${resource.title} to…`,
+          });
+          if (target) {
+            event.detail.requestAssociation(
+              target,
+              currentTargets.length ? 'attach-additional' : 'attach',
+            );
+          }
+        },
+      },
+      ...(currentTargets.length
+        ? [
+            {
+              name: 'Move to…',
+              iconName: 'lucide:MoveRight',
+              action: async () => {
+                event.detail.close();
+                const fromTarget = await pickAttachment(`Move which attachment of ${resource.title}?`);
+                if (!fromTarget) return;
+                const target = await DeesHarnessConversationPicker.pick({
+                  ...pickerOptions,
+                  excludeTargets: currentTargets,
+                  heading: `Move ${resource.title} to…`,
+                });
+                if (target) event.detail.requestAssociation(target, 'move', fromTarget);
+              },
+            },
+            {
+              name: 'Detach',
+              iconName: 'lucide:Unlink',
+              action: async () => {
+                event.detail.close();
+                const fromTarget = await pickAttachment(`Detach which attachment of ${resource.title}?`);
+                if (fromTarget) event.detail.requestAssociation(null, 'detach', fromTarget);
+              },
             },
-          }]
+          ]
         : []),
     ],
   );
@@ -462,7 +520,7 @@ class DeesDemoSessionWorkspace extends DeesElement {
               this.notice = `Selected ${event.detail.resource.title}. Use Actions to attach or move it.`;
             }}
             @harness-resource-context=${handleResourceContext}
-            @harness-resource-association-request=${(event: CustomEvent<THarnessResourceAssociationRequestDetail>) => { handleResourceAssociation(event); this.syncList(); }}
+            @harness-resource-associate=${(event: CustomEvent<THarnessResourceAssociateDetail>) => { handleResourceAssociation(event); this.syncList(); }}
           ></dees-harness-session-list>
           <output role="status">${this.notice}</output>
         </aside>