@design.estate/dees-catalog 9.0.0 → 9.1.0

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

@@ -278,6 +278,8 @@ export class DeesHarnessChat extends DeesElement {
         min-height: 0;
         display: flex;
         flex-direction: column;
+        /* Keep composer/suggestion layers below the adjacent narrow drawer. */
+        isolation: isolate;
       }
 
       .sessionPanel {
@@ -341,6 +343,11 @@ export class DeesHarnessChat extends DeesElement {
       /* Narrow hosts keep every session section reachable in an overlay.
          Todo tool cards remain a second transcript-level representation. */
       @container (max-width: 680px) {
+        .chatBody {
+          /* The closed off-canvas drawer must not widen its owning chat. */
+          overflow-x: clip;
+        }
+
         .sessionPanel {
           position: absolute;
           inset: 0 0 0 auto;
@@ -455,9 +462,40 @@ export class DeesHarnessChat extends DeesElement {
         min-height: 0;
       }
 
-      /* the composer docks edge-to-edge like the toolbar, so the tasks
-         panel's border meets its top border cleanly; z-order keeps its
-         upward shadow above the transcript */
+      /* Stationary contact shadows keep the transcript beneath the chrome.
+         They neither mask the scroll surface nor participate in hit testing. */
+      .transcriptColumn > dees-harness-message-list::before,
+      .transcriptColumn > dees-harness-message-list::after {
+        content: '';
+        position: absolute;
+        inset-inline: 0;
+        height: 20px;
+        z-index: 1;
+        pointer-events: none;
+      }
+
+      .transcriptColumn > dees-harness-message-list::before {
+        content: none;
+        top: 0;
+      }
+
+      .toolbar + .chatBody .transcriptColumn > dees-harness-message-list::before {
+        content: '';
+        background: linear-gradient(to bottom,
+          var(--dees-color-scroll-edge-shadow),
+          color-mix(in srgb, var(--dees-color-scroll-edge-shadow) 35%, transparent) 6px,
+          transparent 100%);
+      }
+
+      .transcriptColumn > dees-harness-message-list::after {
+        bottom: 0;
+        background: linear-gradient(to top,
+          var(--dees-color-scroll-edge-shadow),
+          color-mix(in srgb, var(--dees-color-scroll-edge-shadow) 35%, transparent) 6px,
+          transparent 100%);
+      }
+
+      /* Dock only within the conversation column, above transcript content. */
       .composerRow {
         flex: 0 0 auto;
         position: relative;
@@ -469,11 +507,10 @@ export class DeesHarnessChat extends DeesElement {
         display: flex;
         align-items: center;
         gap: var(--dees-spacing-xs);
-        padding: 5px var(--dees-spacing-md);
-        background: var(--dees-color-bg-secondary);
+        padding: 8px 12px 0;
         color: var(--dees-color-text-muted);
-        font-size: var(--dees-font-caption2-size, 10px);
-        line-height: 1.3;
+        font-size: var(--dees-font-caption1-size, 11px);
+        line-height: 16px;
       }
 
       .composerContextBar dees-icon {
@@ -640,15 +677,7 @@ export class DeesHarnessChat extends DeesElement {
             .markdownWhileStreaming=${this.markdownWhileStreaming}
             .toolRegistry=${this.toolRegistry}
           ></dees-harness-message-list>
-          ${this.heading
-            ? html`
-                <div class="composerContextBar" title=${`Replying to ${this.heading}`}>
-                  <dees-icon icon="lucide:MessageSquare" iconSize="11"></dees-icon>
-                  <span class="composerContextLabel">Replying to</span>
-                  <span class="composerContextTitle">${this.heading}</span>
-                </div>
-              `
-            : ''}
+          ${this.renderComposer()}
           ${this.hasSessionSidebar && !this.showToolbar ? html`
             <button
               class="sessionPanelToggle"
@@ -723,9 +752,15 @@ export class DeesHarnessChat extends DeesElement {
             `
           : ''}
       </div>
+    `;
+  }
+
+  private renderComposer(): TemplateResult {
+    return html`
       <div class="composerRow">
         <dees-harness-composer
           docked
+          .contextDescription=${this.heading ? `Replying to ${this.heading}` : ''}
           .value=${this.composerValue}
           .attachments=${this.attachments}
           .suggestions=${this.suggestions}
@@ -762,7 +797,17 @@ export class DeesHarnessChat extends DeesElement {
           @harness-mode-change=${(event: CustomEvent<{ mode?: string }>) => {
             if (event.detail?.mode) this.mode = event.detail.mode;
           }}
-        ></dees-harness-composer>
+        >
+          ${this.heading
+            ? html`
+                <div slot="context" class="composerContextBar" title=${`Replying to ${this.heading}`}>
+                  <dees-icon icon="lucide:MessageSquare" iconSize="11" aria-hidden="true"></dees-icon>
+                  <span class="composerContextLabel">Replying to</span>
+                  <span class="composerContextTitle">${this.heading}</span>
+                </div>
+              `
+            : ''}
+        </dees-harness-composer>
       </div>
     `;
   }

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

@@ -21,6 +21,7 @@ export const demoFunc = () => demoPage('Composer', 'Write, attach files, choose
   >
     <div class="dees-demo-label">Account, model and mode</div>
     <dees-harness-composer
+      contextDescription="Replying to Deploy assistant"
       account="account-1"
       model="gpt-5.5"
       reasoningEffort="high"
@@ -32,7 +33,11 @@ export const demoFunc = () => demoPage('Composer', 'Write, attach files, choose
       ]}
       .modelOptions=${['gpt-5.5', 'gpt-5', 'o4-mini']}
       .effortOptions=${['xhigh', 'high', 'medium', 'low']}
-    ></dees-harness-composer>
+    >
+      <div slot="context" style="padding:8px 12px 0;font-size:11px;line-height:16px;color:var(--dees-color-text-secondary)">
+        Replying to <strong>Deploy assistant</strong>
+      </div>
+    </dees-harness-composer>
     <div class="dees-demo-label">Queue a follow-up while the agent works</div>
     <dees-harness-composer busy value="Refactor the sitemap job…"></dees-harness-composer>
     <div class="dees-demo-label">Steer the task with queued messages</div>

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

@@ -68,11 +68,14 @@ export class DeesHarnessComposer extends DeesElement {
   @property()
   accessor placeholder: string = 'Message the agent — drop or paste files to attach…';
 
+  /** Accessible description of the optional `context` slot inside the prompt field. */
+  @property()
+  accessor contextDescription: string = '';
+
   /**
    * Docked composers sit flush against their container edge-to-edge (a
    * top border instead of the floating card chrome) — used by
-   * dees-harness-chat so the bar meets the transcript and the tasks panel
-   * without a gap.
+   * dees-harness-chat at the bottom of its conversation column.
    */
   @property({ type: Boolean, reflect: true })
   accessor docked: boolean = false;
@@ -268,15 +271,37 @@ export class DeesHarnessComposer extends DeesElement {
         display: none;
       }
 
+      .promptField {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        min-width: 0;
+        border: 1px solid var(--dees-color-control-border);
+        border-radius: var(--dees-radius-xl);
+        corner-shape: var(--dees-corner-shape);
+        background: var(--dees-color-control-bg);
+      }
+
+      .promptField:focus-within {
+        border-color: var(--dees-color-accent-primary);
+        outline: 2px solid var(--dees-color-focus-ring);
+        outline-offset: 1px;
+      }
+
+      .promptField:has(textarea:disabled) {
+        opacity: 0.55;
+      }
+
       textarea {
+        display: block;
         width: 100%;
-        min-height: 64px;
+        min-width: 0;
+        min-height: 62px;
         max-height: 40vh;
         resize: none;
         padding: 10px 12px;
-        border: 1px solid var(--dees-color-control-border);
-        border-radius: var(--dees-radius-xl);
-        background: var(--dees-color-control-bg);
+        border: 0;
+        border-radius: inherit;
+        background: transparent;
         color: var(--dees-color-text-primary);
         font-family: inherit;
         font-size: var(--dees-font-control-size, 13px);
@@ -290,13 +315,7 @@ export class DeesHarnessComposer extends DeesElement {
       }
 
       textarea:focus-visible {
-        border-color: var(--dees-color-accent-primary);
-        outline: 2px solid var(--dees-color-focus-ring);
-        outline-offset: 1px;
-      }
-
-      textarea:disabled {
-        opacity: 0.55;
+        outline: none;
       }
 
       .attachmentRow {
@@ -515,20 +534,24 @@ export class DeesHarnessComposer extends DeesElement {
               </div>
             `
           : ''}
-        <textarea
-          .value=${this.value}
-          aria-label="Message"
-          placeholder=${this.placeholder}
-          ?disabled=${this.disabled}
-          rows="1"
-          @input=${this.handleTextInput}
-          @keydown=${this.handleKeydown}
-          @focus=${this.handlePromptFocus}
-          @blur=${this.handlePromptBlur}
-          @compositionstart=${this.handleCompositionStart}
-          @compositionend=${this.handleCompositionEnd}
-          @paste=${this.handlePaste}
-        ></textarea>
+        <div class="promptField" @click=${this.handlePromptFieldClick}>
+          <slot name="context"></slot>
+          <textarea
+            .value=${this.value}
+            aria-label="Message"
+            aria-description=${this.contextDescription}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            rows="1"
+            @input=${this.handleTextInput}
+            @keydown=${this.handleKeydown}
+            @focus=${this.handlePromptFocus}
+            @blur=${this.handlePromptBlur}
+            @compositionstart=${this.handleCompositionStart}
+            @compositionend=${this.handleCompositionEnd}
+            @paste=${this.handlePaste}
+          ></textarea>
+        </div>
         <div class="controlsRow">
           <dees-button
             size="sm"
@@ -653,6 +676,16 @@ export class DeesHarnessComposer extends DeesElement {
     `;
   }
 
+  private handlePromptFieldClick(event: MouseEvent): void {
+    // Context text is part of the field; preserve native interactions in slotted controls.
+    for (const target of event.composedPath()) {
+      if (target === event.currentTarget) break;
+      if (target instanceof Element
+        && target.matches('a[href], button, input, textarea, select, label, [tabindex], [contenteditable]')) return;
+    }
+    if (!this.disabled) this.shadowRoot?.querySelector<HTMLTextAreaElement>('textarea')?.focus();
+  }
+
   private renderSuggestions(): TemplateResult {
     return html`
       <ul