@design.estate/dees-catalog 3.90.1 → 3.92.0

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

@@ -0,0 +1,514 @@
+import { demoFunc } from './dees-harness-composer.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessAttachment, IHarnessComposerSendDetail } from '../interfaces.js';
+import {
+  harnessFileToBase64,
+  harnessFormatBytes,
+  harnessIsSupportedAttachmentType,
+  harnessMaxAttachmentBytes,
+  harnessMaxTotalAttachmentBytes,
+  harnessMediaTypeForFile,
+  harnessSupportedImageTypes,
+} from '../harness.helpers.js';
+import '../../00group-button/dees-button/dees-button.js';
+import '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-composer': DeesHarnessComposer;
+  }
+}
+
+type TDropdownOption = { option: string; key: string };
+
+const toDropdownOptions = (values: string[]): TDropdownOption[] =>
+  values.map((value) => ({ option: value, key: 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
+ * 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-steer`, and `harness-abort` (all bubbling + composed).
+ */
+@customElement('dees-harness-composer')
+export class DeesHarnessComposer extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  @property()
+  accessor value: string = '';
+
+  @property()
+  accessor placeholder: string = 'Message the agent — drop or paste files to attach…';
+
+  @property({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  /**
+   * busy = a run is in flight. Sending stays available (hosts queue the
+   * messages); Stop renders as an additional button. With an empty prompt
+   * and queued messages waiting, the primary action becomes "Steer now"
+   * (harness-steer) to force the agent to continue with the queue.
+   */
+  @property({ type: Boolean })
+  accessor busy: boolean = false;
+
+  /** number of messages the host has queued while the run is busy */
+  @property({ type: Number })
+  accessor queuedCount: number = 0;
+
+  @property({ attribute: false })
+  accessor attachments: IHarnessAttachment[] = [];
+
+  @property({ type: Number })
+  accessor maxAttachmentBytes: number = harnessMaxAttachmentBytes;
+
+  @property({ type: Number })
+  accessor maxTotalAttachmentBytes: number = harnessMaxTotalAttachmentBytes;
+
+  @property()
+  accessor model: string = '';
+
+  @property({ attribute: false })
+  accessor modelOptions: string[] = [];
+
+  @property()
+  accessor reasoningEffort: string = '';
+
+  @property({ attribute: false })
+  accessor effortOptions: string[] = [];
+
+  @property({ type: Boolean })
+  accessor showModelControls: boolean = true;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--dees-font-family);
+      }
+
+      .composer {
+        display: grid;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm);
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-xl);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-bg-secondary);
+      }
+
+      .composer.dragOver {
+        border-color: var(--dees-color-accent-primary);
+        box-shadow: 0 0 0 3px var(--dees-color-focus-ring);
+      }
+
+      .fileInput {
+        display: none;
+      }
+
+      textarea {
+        width: 100%;
+        min-height: 64px;
+        max-height: 40vh;
+        resize: none;
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border: 0;
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        font-family: inherit;
+        font-size: var(--dees-font-control-size, 13px);
+        line-height: 1.5;
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      textarea::placeholder {
+        color: var(--dees-color-label-quaternary, var(--dees-color-text-muted));
+      }
+
+      textarea:disabled {
+        opacity: 0.55;
+      }
+
+      .attachmentRow {
+        display: flex;
+        gap: var(--dees-spacing-xs);
+        flex-wrap: wrap;
+      }
+
+      .attachmentChip {
+        max-width: 100%;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dees-spacing-xs);
+        padding: 3px var(--dees-spacing-xs) 3px var(--dees-spacing-sm);
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: var(--dees-radius-full);
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
+        font-size: var(--dees-font-caption1-size, 11px);
+      }
+
+      .attachmentChip img {
+        width: 20px;
+        height: 20px;
+        border-radius: var(--dees-radius-full);
+        object-fit: cover;
+      }
+
+      .attachmentChip dees-icon {
+        color: var(--dees-color-accent-primary);
+      }
+
+      .chipName {
+        max-width: 160px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .chipSize {
+        color: var(--dees-color-text-secondary);
+      }
+
+      .chipRemove {
+        display: grid;
+        place-items: center;
+        width: 16px;
+        height: 16px;
+        border: 0;
+        border-radius: var(--dees-radius-full);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+        padding: 0;
+      }
+
+      .chipRemove:hover {
+        background: var(--dees-color-fill-secondary);
+        color: var(--dees-color-text-primary);
+      }
+
+      .controlsRow {
+        display: flex;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+      }
+
+      .modelControls {
+        display: flex;
+        gap: var(--dees-spacing-xs);
+        min-width: 0;
+      }
+
+      .modelControls dees-input-dropdown {
+        margin: 0;
+      }
+
+      .modelSelect {
+        width: 150px;
+      }
+
+      .effortSelect {
+        width: 110px;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+    `,
+  ];
+
+  public async focusPrompt(): Promise<void> {
+    await this.updateComplete;
+    this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea')?.focus();
+  }
+
+  public clear(): void {
+    this.value = '';
+    this.emitInput('');
+    this.autogrow();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="composer"
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+      >
+        <input
+          class="fileInput"
+          type="file"
+          multiple
+          accept="image/png,image/jpeg,image/webp,image/gif,text/*,application/json,application/xml,application/yaml,application/csv"
+          @change=${this.handleFileInputChange}
+        />
+        ${this.attachments.length
+          ? html`
+              <div class="attachmentRow">
+                ${this.attachments.map((attachment) => this.renderChip(attachment))}
+              </div>
+            `
+          : ''}
+        <textarea
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          rows="1"
+          @input=${this.handleTextInput}
+          @keydown=${this.handleKeydown}
+          @paste=${this.handlePaste}
+        ></textarea>
+        <div class="controlsRow">
+          <dees-button
+            size="sm"
+            type="ghost"
+            ?disabled=${this.disabled}
+            @clicked=${() => this.shadowRoot?.querySelector<HTMLInputElement>('.fileInput')?.click()}
+          >
+            <dees-icon icon="lucide:Paperclip" iconSize="14"></dees-icon>
+          </dees-button>
+          ${this.showModelControls && (this.modelOptions.length || this.effortOptions.length)
+            ? html`
+                <div class="modelControls">
+                  ${this.modelOptions.length
+                    ? html`
+                        <dees-input-dropdown
+                          class="modelSelect"
+                          .options=${toDropdownOptions(this.modelOptions)}
+                          .selectedOption=${this.model ? { option: this.model, key: this.model } : null}
+                          .disabled=${this.disabled}
+                          @selectedOption=${(event: CustomEvent<TDropdownOption>) => {
+                            this.model = event.detail?.key ?? this.model;
+                            this.emitModelChange();
+                          }}
+                        ></dees-input-dropdown>
+                      `
+                    : ''}
+                  ${this.effortOptions.length
+                    ? html`
+                        <dees-input-dropdown
+                          class="effortSelect"
+                          .options=${toDropdownOptions(this.effortOptions)}
+                          .selectedOption=${this.reasoningEffort
+                            ? { option: this.reasoningEffort, key: this.reasoningEffort }
+                            : null}
+                          .disabled=${this.disabled}
+                          @selectedOption=${(event: CustomEvent<TDropdownOption>) => {
+                            this.reasoningEffort = event.detail?.key ?? this.reasoningEffort;
+                            this.emitModelChange();
+                          }}
+                        ></dees-input-dropdown>
+                      `
+                    : ''}
+                </div>
+              `
+            : ''}
+          <span class="spacer"></span>
+          ${this.busy
+            ? html`
+                <dees-button type="destructive" size="sm" @clicked=${() => this.emit('harness-abort', {})}>
+                  Stop
+                </dees-button>
+              `
+            : ''}
+          ${this.busy && !this.value.trim() && this.queuedCount > 0
+            ? html`
+                <dees-button type="accent" size="sm" @clicked=${() => this.emit('harness-steer', { queuedCount: this.queuedCount })}>
+                  Steer now
+                </dees-button>
+              `
+            : html`
+                <dees-button
+                  type="accent"
+                  size="sm"
+                  ?disabled=${this.disabled || (this.busy && !this.value.trim())}
+                  @clicked=${() => this.send()}
+                >
+                  Send
+                </dees-button>
+              `}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderChip(attachment: IHarnessAttachment): TemplateResult {
+    const imageUrl = attachment.kind === 'image' && attachment.dataBase64
+      ? `data:${attachment.mediaType};base64,${attachment.dataBase64}`
+      : '';
+    return html`
+      <span class="attachmentChip">
+        ${imageUrl
+          ? html`<img src=${imageUrl} alt=${attachment.name} />`
+          : html`<dees-icon icon="lucide:FileText" iconSize="13"></dees-icon>`}
+        <span class="chipName" title=${attachment.name}>${attachment.name}</span>
+        <span class="chipSize">${harnessFormatBytes(attachment.size)}</span>
+        <button
+          class="chipRemove"
+          type="button"
+          title="Remove attachment"
+          @click=${() => {
+            this.emitAttachments(this.attachments.filter((candidate) => candidate.id !== attachment.id));
+          }}
+        >
+          <dees-icon icon="lucide:X" iconSize="11"></dees-icon>
+        </button>
+      </span>
+    `;
+  }
+
+  // ------------------------------------------------------------------ input
+
+  private handleTextInput = (event: Event): void => {
+    this.value = (event.currentTarget as HTMLTextAreaElement).value;
+    this.emitInput(this.value);
+    this.autogrow();
+  };
+
+  private handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+      event.preventDefault();
+      this.send();
+    }
+  };
+
+  private autogrow(): void {
+    const textarea = this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea');
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.min(textarea.scrollHeight, window.innerHeight * 0.4)}px`;
+  }
+
+  // ------------------------------------------------------------ attachments
+
+  private handleFileInputChange = (event: Event): void => {
+    const input = event.currentTarget as HTMLInputElement;
+    void this.addFiles(input.files);
+    input.value = '';
+  };
+
+  private handlePaste = (event: ClipboardEvent): void => {
+    const files = Array.from(event.clipboardData?.files ?? []);
+    if (!files.length) return;
+    event.preventDefault();
+    void this.addFiles(files);
+  };
+
+  private handleDragOver = (event: DragEvent): void => {
+    if (!event.dataTransfer?.types.includes('Files')) return;
+    event.preventDefault();
+    this.shadowRoot?.querySelector('.composer')?.classList.add('dragOver');
+  };
+
+  private handleDragLeave = (): void => {
+    this.shadowRoot?.querySelector('.composer')?.classList.remove('dragOver');
+  };
+
+  private handleDrop = (event: DragEvent): void => {
+    this.shadowRoot?.querySelector('.composer')?.classList.remove('dragOver');
+    const files = Array.from(event.dataTransfer?.files ?? []);
+    if (!files.length) return;
+    event.preventDefault();
+    void this.addFiles(files);
+  };
+
+  public async addFiles(fileList: FileList | File[] | null): Promise<void> {
+    const files = Array.from(fileList ?? []);
+    if (!files.length) return;
+    const added: IHarnessAttachment[] = [];
+    let totalBytes = this.attachments.reduce((sum, attachment) => sum + attachment.size, 0);
+    for (const file of files) {
+      const mediaType = harnessMediaTypeForFile(file);
+      if (!harnessIsSupportedAttachmentType(mediaType)) {
+        this.emit('harness-attachment-error', {
+          message: `Unsupported attachment type for ${file.name || 'file'}: ${mediaType}`,
+        });
+        continue;
+      }
+      if (file.size > this.maxAttachmentBytes) {
+        this.emit('harness-attachment-error', {
+          message: `${file.name || 'file'} is too large. Max per attachment is ${harnessFormatBytes(this.maxAttachmentBytes)}.`,
+        });
+        continue;
+      }
+      if (totalBytes + file.size > this.maxTotalAttachmentBytes) {
+        this.emit('harness-attachment-error', {
+          message: `Attachments exceed the ${harnessFormatBytes(this.maxTotalAttachmentBytes)} total limit.`,
+        });
+        break;
+      }
+      try {
+        const dataBase64 = await harnessFileToBase64(file);
+        const isImage = harnessSupportedImageTypes.has(mediaType);
+        added.push({
+          id: globalThis.crypto?.randomUUID?.() ?? `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+          name: file.name || (isImage ? `pasted-image-${Date.now()}` : `attachment-${Date.now()}`),
+          mediaType,
+          size: file.size,
+          kind: isImage ? 'image' : 'text',
+          dataBase64,
+        });
+        totalBytes += file.size;
+      } catch (error) {
+        this.emit('harness-attachment-error', {
+          message: error instanceof Error ? error.message : String(error),
+        });
+      }
+    }
+    if (added.length) {
+      this.emitAttachments([...this.attachments, ...added]);
+    }
+  }
+
+  // ------------------------------------------------------------------ emits
+
+  private send(): void {
+    if (this.disabled) return;
+    const detail: IHarnessComposerSendDetail = {
+      text: this.value,
+      attachments: this.attachments,
+      model: this.model || undefined,
+      reasoningEffort: this.reasoningEffort || undefined,
+    };
+    this.emit('harness-send', detail);
+  }
+
+  private emitInput(value: string): void {
+    this.emit('harness-input', { value });
+  }
+
+  private emitAttachments(attachments: IHarnessAttachment[]): void {
+    this.attachments = attachments;
+    this.emit('harness-attachments-change', { attachments });
+  }
+
+  private emitModelChange(): void {
+    this.emit('harness-model-change', { model: this.model, reasoningEffort: this.reasoningEffort });
+  }
+
+  private emit(name: string, detail: Record<string, unknown> | IHarnessComposerSendDetail): void {
+    this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+}

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

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

package/ts_web/elements/00group-harness/dees-harness-content-blocks/dees-harness-content-blocks.demo.ts

@@ -0,0 +1,44 @@
+import { html } from '@design.estate/dees-element';
+import type { THarnessContentBlock } from '../interfaces.js';
+
+// 1×1 px png (red) as a stand-in for tool screenshot output
+const tinyPngBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==';
+
+const demoBlocks: THarnessContentBlock[] = [
+  { type: 'text', text: 'Query returned 3 rows. Full result set embedded below.' },
+  { type: 'image', data: tinyPngBase64, mimeType: 'image/png' },
+  {
+    type: 'resource',
+    resource: {
+      uri: 'file:///srv/reports/summary.csv',
+      mimeType: 'text/csv',
+      text: 'id,name,status\n1,alpha,ok\n2,beta,ok\n3,gamma,degraded',
+    },
+  },
+  {
+    type: 'resource_link',
+    uri: 'https://example.com/dashboards/deploy-42',
+    name: 'deploy-42',
+    title: 'Deploy #42 dashboard',
+    description: 'Grafana panel for the deploy window',
+    mimeType: 'text/html',
+    size: 12_480,
+  },
+];
+
+export const demoFunc = () => html`
+  <style>
+    .blocksDemo {
+      display: grid;
+      gap: 16px;
+      max-width: 640px;
+      margin: 40px auto;
+      padding: 24px;
+      border-radius: var(--dees-radius-xl);
+      background: var(--dees-color-bg-secondary);
+    }
+  </style>
+  <div class="blocksDemo">
+    <dees-harness-content-blocks .blocks=${demoBlocks}></dees-harness-content-blocks>
+  </div>
+`;