@design.estate/dees-catalog 11.2.1 → 12.0.0

package/ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-card.ts

@@ -131,20 +131,31 @@ export class DeesHarnessToolCard extends DeesElement {
       :host {
         display: block;
         container-type: inline-size;
-        margin-inline: auto;
         max-width: 100%;
         font-family: var(--dees-font-family);
-        transition: max-width var(--dees-transition-default) var(--dees-ease-standard);
       }
 
       /*
-       * A collapsed card may be held to a narrower measure than its row. The host — not the inner
-       * surface — carries the constraint so the card's own inline-size container keeps measuring
-       * what is actually rendered. The width comes from the context the card sits in: a transcript
-       * row that holds this card alone sets it, a multi-card grid cell leaves it unset, and a
-       * direct host falls back to the full row.
+       * A collapsed card may be held to a narrower measure than its row. The constraint lives on
+       * the card surface rather than the host for two reasons: the surface is its own inline-size
+       * container, so the header's container queries measure what is actually rendered, and a host
+       * cannot transition its own width. The shared default stylesheet applies a universal
+       * transition of background and color to every element; from the parent's tree that rule
+       * targets this host and outranks any host-scoped rule, so a width transition declared on the
+       * host is silently dropped and the card snaps instead of interpolating.
+       *
+       * The width comes from the context the card sits in: a transcript row of terminal and
+       * file-write cards sets it, side-by-side grids leave it unset, and a direct host falls back
+       * to the full row.
        */
-      :host([data-collapsed]) {
+      .harness-card {
+        max-width: 100%;
+        margin-inline: auto;
+        container-type: inline-size;
+        transition: max-width var(--dees-transition-default) var(--dees-ease-standard);
+      }
+
+      :host([data-collapsed]) .harness-card {
         max-width: var(--dees-harness-collapsed-tool-width, 100%);
       }
 
@@ -297,7 +308,31 @@ export class DeesHarnessToolCard extends DeesElement {
         font-size: 12px;
       }
 
-      /* Stands in for the body while a finished card is collapsed. */
+      /*
+       * Stands in for the body while a finished card is collapsed. It opens and closes on the same
+       * timing as the body and the width, so the header never steps by a line at the instant of a
+       * toggle; the node stays mounted and is hidden from assistive technology while open.
+       */
+      .summaryDisclosure {
+        display: grid;
+        grid-template-rows: 1fr;
+        min-height: 0;
+        opacity: 1;
+        transition:
+          grid-template-rows var(--dees-transition-default) var(--dees-ease-standard),
+          opacity var(--dees-transition-fast) var(--dees-ease-standard);
+      }
+
+      .summaryDisclosure[aria-hidden='true'] {
+        grid-template-rows: 0fr;
+        opacity: 0;
+      }
+
+      .summaryDisclosureInner {
+        min-height: 0;
+        overflow: hidden;
+      }
+
       .resultSummary {
         display: block;
         margin-top: 2px;
@@ -690,7 +725,10 @@ export class DeesHarnessToolCard extends DeesElement {
       }
 
       @media (prefers-reduced-motion: reduce) {
-        .bodyDisclosure {
+        /* The disclosure moves as one piece, so all three parts of it stop together. */
+        .bodyDisclosure,
+        .harness-card,
+        .summaryDisclosure {
           transition: none;
         }
 
@@ -741,9 +779,13 @@ export class DeesHarnessToolCard extends DeesElement {
     return collapseWhenFinished ?? false;
   }
 
-  /** Outcome line shown only while collapsed; the subtitle already carries the request. */
-  private get collapsedSummary(): string {
-    if (this.isOpen || !this.descriptor.summary) return '';
+  /**
+   * Outcome line that stands in for the body while collapsed; the subtitle already carries the
+   * request. Derived from the settled call alone, not from the disclosure state, so the text stays
+   * put while the line animates open or closed instead of appearing and vanishing mid-transition.
+   */
+  private get resultSummary(): string {
+    if (!this.descriptor.summary) return '';
     if (this.call.status !== 'completed' && this.call.status !== 'stopped') return '';
     return this.descriptor.summary(this.enrichedCall).trim();
   }
@@ -780,7 +822,7 @@ export class DeesHarnessToolCard extends DeesElement {
     const statusTone = effectiveStatus === 'completed' ? 'success'
       : effectiveStatus === 'stopped' ? 'warning' : effectiveStatus;
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
-    const collapsedSummary = this.collapsedSummary;
+    const resultSummary = this.resultSummary;
     return html`
       <div class="harness-card status-${effectiveStatus} ${descriptor.destructive ? 'destructive' : ''} ${this.hasSubtaskPreview ? 'subtaskPreviewCard' : ''} ${this.hasSubtaskPreview && open ? 'subtaskPreviewOpen' : ''} ${this.returnFlash ? 'returnFlash' : ''} ${this.outcomeScanTone ? `outcomeScan outcomeScan-${this.outcomeScanTone}` : ''}"
         @mouseenter=${this.cancelTerminalTailReturn}
@@ -808,8 +850,17 @@ export class DeesHarnessToolCard extends DeesElement {
             ${subtitle
               ? html`<dees-harness-overflow-text class="subtitle" title=${subtitleTooltip}>${subtitle}</dees-harness-overflow-text>`
               : ''}
-            ${collapsedSummary
-              ? html`<dees-harness-overflow-text class="resultSummary" title=${collapsedSummary}>${collapsedSummary}</dees-harness-overflow-text>`
+            ${resultSummary
+              ? html`
+                  <span class="summaryDisclosure" aria-hidden=${open ? 'true' : 'false'}>
+                    <span class="summaryDisclosureInner">
+                      <dees-harness-overflow-text
+                        class="resultSummary"
+                        title=${resultSummary}
+                      >${resultSummary}</dees-harness-overflow-text>
+                    </span>
+                  </span>
+                `
               : ''}
           </span>
           <span class="metaColumn">

package/ts_web/elements/00group-harness/index.ts

@@ -12,6 +12,7 @@ export * from './dees-harness-overflow-text.js';
 export * from './dees-harness-chat/index.js';
 export * from './dees-harness-composer/index.js';
 export * from './dees-harness-content-blocks/index.js';
+export * from './dees-harness-conversation-picker/index.js';
 export * from './dees-harness-message/index.js';
 export * from './dees-harness-permission-card/index.js';
 export * from './dees-harness-question-card/index.js';

package/ts_web/elements/00group-harness/interfaces.ts

@@ -401,49 +401,66 @@ export interface IHarnessResourceMeta<TState extends string = string> {
 }
 
 /**
- * A controlled zero-or-one association for one resource. The target is any
- * other list item — a session or another resource such as a terminal.
+ * The controlled set of associations for one resource. A resource can be attached to several
+ * items at once, and a target is any other list item — a session or another resource such as a
+ * terminal. An empty array is an unattached resource.
  */
 export interface IHarnessResourceAssociation {
   resourceId: string;
-  target: IHarnessSessionListItemRef;
+  targets: IHarnessSessionListItemRef[];
 }
 
 export interface IHarnessResourceEventDetail<TState extends string = string> {
   resource: IHarnessResourceMeta<TState>;
-  /** The controlled association target, or null when the resource is unattached. */
-  target: IHarnessSessionListItemRef | null;
+  /** The controlled association targets; empty when the resource is unattached. */
+  targets: IHarnessSessionListItemRef[];
 }
 
 /**
- * Association is an explicit host action, never a drop: dragging a resource
- * only moves it inside the ordered list.
+ * Attaching is an explicit choice, never an accident of reordering: a drag only attaches when it
+ * is released on the centre of a row, and the edges of that same row stay positional. Keyboard
+ * moves are always positional; keyboard attaching goes through the host's menu.
  */
-export type THarnessResourceAssociationInteractionSource = 'action' | 'keyboard';
+export type THarnessResourceAssociationInteractionSource = 'action' | 'keyboard' | 'pointer';
 
-export type THarnessResourceAssociationRequestDetail<TState extends string = string> =
+/**
+ * A validated association request. `attach` adds the first target, `attach-additional` adds
+ * another one beside existing targets, `move` replaces one specific target, and `detach` removes
+ * one. `fromTarget` always names the attachment being replaced or removed, never the whole set.
+ */
+export type THarnessResourceAssociateDetail<TState extends string = string> =
   | {
-      intent: 'attach';
+      mode: 'attach';
       resource: IHarnessResourceMeta<TState>;
       fromTarget: null;
       toTarget: IHarnessSessionListItemRef;
       source: THarnessResourceAssociationInteractionSource;
     }
   | {
-      intent: 'detach';
+      mode: 'attach-additional';
       resource: IHarnessResourceMeta<TState>;
-      fromTarget: IHarnessSessionListItemRef;
-      toTarget: null;
+      fromTarget: null;
+      toTarget: IHarnessSessionListItemRef;
       source: THarnessResourceAssociationInteractionSource;
     }
   | {
-      intent: 'reassign';
+      mode: 'move';
       resource: IHarnessResourceMeta<TState>;
       fromTarget: IHarnessSessionListItemRef;
       toTarget: IHarnessSessionListItemRef;
       source: THarnessResourceAssociationInteractionSource;
+    }
+  | {
+      mode: 'detach';
+      resource: IHarnessResourceMeta<TState>;
+      fromTarget: IHarnessSessionListItemRef;
+      toTarget: null;
+      source: THarnessResourceAssociationInteractionSource;
     };
 
+/** Explicit mode for `requestAssociation`; omitted lets the list infer it from the current set. */
+export type THarnessResourceAssociateMode = THarnessResourceAssociateDetail['mode'];
+
 export type THarnessResourceContextSource = 'pointer' | 'action' | 'keyboard';
 
 /** Detail of `harness-resource-context`; the host owns the actual menu. */
@@ -453,8 +470,16 @@ export interface IHarnessResourceContextDetail<TState extends string = string>
   clientY: number;
   source: THarnessResourceContextSource;
   originalEvent: MouseEvent | KeyboardEvent;
-  /** Routes a host menu choice through the component's validated controlled request event. */
-  requestAssociation: (toTarget: IHarnessSessionListItemRef | null) => boolean;
+  /**
+   * Routes a host menu choice through the component's validated controlled request event. With no
+   * mode, an unattached resource attaches and a singly attached one moves; a resource with several
+   * attachments is refused, because only the host knows which attachment was meant.
+   */
+  requestAssociation: (
+    toTarget: IHarnessSessionListItemRef | null,
+    mode?: THarnessResourceAssociateMode,
+    fromTarget?: IHarnessSessionListItemRef | null,
+  ) => boolean;
   /** Closes the external-menu disclosure state and restores focus to its invoking control. */
   close: () => void;
 }