@design.estate/dees-catalog 6.1.0 → 6.3.0

package/ts_web/elements/00group-harness/dees-harness-composer/dees-harness-composer.ts

@@ -9,7 +9,11 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import type { IHarnessAttachment, IHarnessComposerSendDetail } from '../interfaces.js';
+import type {
+  IHarnessAttachment,
+  IHarnessComposerOption,
+  IHarnessComposerSendDetail,
+} from '../interfaces.js';
 import {
   harnessFileToBase64,
   harnessFormatBytes,
@@ -33,16 +37,19 @@ type TDropdownOption = { option: string; key: string };
 const toDropdownOptions = (values: string[]): TDropdownOption[] =>
   values.map((value) => ({ option: value, key: value }));
 
+const toLabeledDropdownOptions = (values: IHarnessComposerOption[]): TDropdownOption[] =>
+  values.map((value) => ({ option: value.label, key: value.value }));
+
 /**
  * Prompt composer: autogrow textarea, attachments (picker / paste /
- * drag-drop with per-file and total size limits), optional model and
- * reasoning-effort dropdowns. Cmd/Ctrl+Enter sends. While busy, Stop is an
+ * drag-drop with per-file and total size limits), optional account, model,
+ * and reasoning-effort dropdowns. Cmd/Ctrl+Enter sends. While busy, Stop is an
  * additional button and Send stays available for queueing; an empty prompt
  * with queued messages offers "Steer now".
  *
  * Controlled component: `value` and `attachments` are owned by the host;
  * the composer emits `harness-input`, `harness-attachments-change`,
- * `harness-attachment-error`, `harness-model-change`, `harness-send`,
+ * `harness-attachment-error`, `harness-account-change`, `harness-model-change`, `harness-send`,
  * `harness-steer`, and `harness-abort` (all bubbling + composed).
  */
 @customElement('dees-harness-composer')
@@ -90,6 +97,12 @@ export class DeesHarnessComposer extends DeesElement {
   @property({ type: Number })
   accessor maxTotalAttachmentBytes: number = harnessMaxTotalAttachmentBytes;
 
+  @property()
+  accessor account: string = '';
+
+  @property({ attribute: false })
+  accessor accountOptions: IHarnessComposerOption[] = [];
+
   @property()
   accessor model: string = '';
 
@@ -122,6 +135,7 @@ export class DeesHarnessComposer extends DeesElement {
       :host {
         display: block;
         font-family: var(--dees-font-family);
+        container-type: inline-size;
       }
 
       .composer {
@@ -296,6 +310,12 @@ export class DeesHarnessComposer extends DeesElement {
         margin: 0;
       }
 
+      .accountSelect {
+        flex: 0 1 180px;
+        width: 180px;
+        min-width: 120px;
+      }
+
       /* Model identifiers are provider-qualified ("anthropic/claude-opus-5"),
          so the control grows into the free space instead of truncating,
          while still shrinking on narrow hosts. */
@@ -313,6 +333,25 @@ export class DeesHarnessComposer extends DeesElement {
       .spacer {
         flex: 1;
       }
+
+      @container (max-width: 760px) {
+        .controlsRow {
+          flex-wrap: wrap;
+        }
+
+        .modelControls {
+          order: 3;
+          flex: 1 0 100%;
+          flex-wrap: wrap;
+        }
+
+        .accountSelect,
+        .modelSelect {
+          flex: 1 1 140px;
+          width: auto;
+          min-width: 0;
+        }
+      }
     `,
   ];
 
@@ -386,9 +425,28 @@ export class DeesHarnessComposer extends DeesElement {
                 </div>
               `
             : ''}
-          ${this.showModelControls && (this.modelOptions.length || this.effortOptions.length)
+          ${this.showModelControls && (
+            this.accountOptions.length || this.modelOptions.length || this.effortOptions.length
+          )
             ? html`
                 <div class="modelControls">
+                  ${this.accountOptions.length
+                    ? html`
+                        <dees-input-dropdown
+                          class="accountSelect"
+                          .options=${toLabeledDropdownOptions(this.accountOptions)}
+                          .selectedOption=${this.account
+                            ? toLabeledDropdownOptions(this.accountOptions)
+                                .find((option) => option.key === this.account) ?? null
+                            : null}
+                          .disabled=${this.disabled}
+                          @selectedOption=${(event: CustomEvent<TDropdownOption>) => {
+                            this.account = event.detail?.key ?? this.account;
+                            this.emit('harness-account-change', { account: this.account });
+                          }}
+                        ></dees-input-dropdown>
+                      `
+                    : ''}
                   ${this.modelOptions.length
                     ? html`
                         <dees-input-dropdown
@@ -589,6 +647,7 @@ export class DeesHarnessComposer extends DeesElement {
     const detail: IHarnessComposerSendDetail = {
       text: this.value,
       attachments: this.attachments,
+      account: this.account || undefined,
       model: this.model || undefined,
       reasoningEffort: this.reasoningEffort || undefined,
     };

package/ts_web/elements/00group-harness/dees-harness-message/dees-harness-message.ts

@@ -13,7 +13,12 @@ import {
 import { themeDefaultStyles } from '../../00theme.js';
 import { syntaxPaletteStyles, syntaxScopeStyles } from '../../00syntax.js';
 import type { HLJSApi } from 'highlight.js';
-import type { IHarnessAttachment, IHarnessMessage, IHarnessUsage } from '../interfaces.js';
+import type {
+  IHarnessAttachment,
+  IHarnessMessage,
+  IHarnessUsage,
+  THarnessMessageStreamDelta,
+} from '../interfaces.js';
 import { DeesHarnessToolRegistry } from '../toolregistry.js';
 import { HarnessMarkdown, markdownStyles } from '../harness.markdown.js';
 import { harnessFormatBytes, harnessFormatClockTime } from '../harness.helpers.js';
@@ -57,6 +62,9 @@ export class DeesHarnessMessage extends DeesElement {
   @property({ attribute: false })
   accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
 
+  @property({ type: Boolean })
+  accessor allowSubtaskStreams: boolean = true;
+
   /**
    * When true at first render, the entry animation is skipped permanently
    * for this element (initial-batch rendering). Captured once in
@@ -406,6 +414,11 @@ export class DeesHarnessMessage extends DeesElement {
     this.requestUpdate();
   }
 
+  public applySubtaskDelta(delta: THarnessMessageStreamDelta): boolean {
+    const card = this.shadowRoot?.querySelector('dees-harness-tool-card');
+    return card?.applySubtaskDelta(delta) ?? false;
+  }
+
   // ------------------------------------------------------------------ render
 
   public render(): TemplateResult {
@@ -421,7 +434,11 @@ export class DeesHarnessMessage extends DeesElement {
       && !message.attachments?.length
     ) {
       return html`
-        <dees-harness-tool-card .call=${message.toolCall} .toolRegistry=${this.toolRegistry}></dees-harness-tool-card>
+        <dees-harness-tool-card
+          .call=${message.toolCall}
+          .toolRegistry=${this.toolRegistry}
+          .allowSubtaskStreams=${this.allowSubtaskStreams}
+        ></dees-harness-tool-card>
       `;
     }
     const roleClass = `role-${message.role}`;
@@ -456,7 +473,11 @@ export class DeesHarnessMessage extends DeesElement {
           : ''}
         ${message.attachments?.length ? this.renderAttachments(message.attachments) : ''}
         ${message.toolCall
-          ? html`<dees-harness-tool-card .call=${message.toolCall} .toolRegistry=${this.toolRegistry}></dees-harness-tool-card>`
+          ? html`<dees-harness-tool-card
+              .call=${message.toolCall}
+              .toolRegistry=${this.toolRegistry}
+              .allowSubtaskStreams=${this.allowSubtaskStreams}
+            ></dees-harness-tool-card>`
           : ''}
         ${this.renderText()}
         ${message.error ? html`<div class="errorText">${message.error}</div>` : ''}