@design.estate/dees-catalog 4.1.0 → 4.1.1

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

@@ -22,6 +22,7 @@ import { harnessCardStyles, harnessPillStyles, harnessMonoStyles } from '../harn
 import { harnessFormatDuration, harnessTruncate } from '../harness.helpers.js';
 import '../dees-harness-content-blocks/dees-harness-content-blocks.js';
 import '../../00group-dataview/dees-dataview-codebox/dees-dataview-codebox.js';
+import './dees-harness-tool-fullscreen.js';
 import '../../00group-feedback/dees-badge/dees-badge.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
@@ -54,21 +55,23 @@ export class DeesHarnessToolCard extends DeesElement {
   @state()
   accessor outputExpanded: boolean = false;
 
-  /** Body height cap; content beyond it clips and offers fullscreen. */
+  /** Body height cap; taller content scrolls in place and offers fullscreen. */
   @property({ type: Number })
   accessor bodyCapPx: number = 360;
 
-  @state()
-  accessor bodyOverflowing: boolean = false;
+  /** Set on the card inside the fullscreen modal: no cap, no maximize bar. */
+  @property({ type: Boolean })
+  accessor uncapped: boolean = false;
 
   @state()
-  accessor maximized: boolean = false;
+  accessor bodyOverflowing: boolean = false;
 
   @state()
   accessor returnFlash: boolean = false;
 
   private bodyResizeObserver: ResizeObserver | null = null;
   private observedBodyInner: Element | null = null;
+  private fullscreenPortal: HTMLElementTagNameMap['dees-harness-tool-fullscreen'] | null = null;
 
   public static styles = [
     themeDefaultStyles,
@@ -198,22 +201,14 @@ export class DeesHarnessToolCard extends DeesElement {
       }
 
       /* Three body modes: collapsed (no body), normal (content fits the
-         cap), capped (content taller than the cap clips behind a fade and
-         offers fullscreen). */
+         cap), capped (content taller than the cap scrolls inside the frame
+         and offers the fullscreen modal). */
       .bodyClipFrame {
         position: relative;
-        overflow: hidden;
-      }
-
-      .bodyClipFrame.capped::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        height: 44px;
-        background: linear-gradient(to bottom, transparent, var(--dees-color-bg-primary));
-        pointer-events: none;
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
       .maximizeBar {
@@ -237,74 +232,6 @@ export class DeesHarnessToolCard extends DeesElement {
         color: var(--dees-color-link-hover);
       }
 
-      .fullscreenLayer {
-        position: fixed;
-        inset: 0;
-        z-index: 4000;
-        display: grid;
-        place-items: center;
-        padding: 4vh 3vw;
-        background: color-mix(in srgb, var(--dees-color-bg-primary) 55%, transparent);
-        backdrop-filter: blur(6px);
-      }
-
-      .fullscreenPanel {
-        display: flex;
-        flex-direction: column;
-        width: min(1200px, 100%);
-        height: 100%;
-        min-height: 0;
-        border: 1px solid var(--dees-color-border-default);
-        border-radius: var(--dees-radius-lg);
-        background: var(--dees-color-bg-primary);
-        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
-        overflow: hidden;
-      }
-
-      .fullscreenHeader {
-        display: flex;
-        flex: 0 0 auto;
-        align-items: center;
-        gap: var(--dees-spacing-sm);
-        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
-        border-bottom: 1px solid var(--dees-color-border-subtle);
-      }
-
-      .fullscreenTitle {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: var(--dees-font-control-size-sm, 12px);
-        font-weight: 650;
-      }
-
-      .fullscreenClose {
-        display: grid;
-        place-items: center;
-        margin-left: auto;
-        padding: 6px;
-        border: 0;
-        border-radius: var(--dees-radius-md);
-        background: transparent;
-        color: var(--dees-color-text-secondary);
-        cursor: pointer;
-      }
-
-      .fullscreenClose:hover {
-        background: var(--dees-color-hover);
-        color: var(--dees-color-text-primary);
-      }
-
-      .fullscreenBody {
-        flex: 1;
-        min-height: 0;
-        overflow: auto;
-        padding: var(--dees-spacing-md);
-        scrollbar-width: thin;
-        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
-      }
-
       /* Locates the card after minimizing: a brief highlight pulse. */
       .harness-card.returnFlash {
         animation: harness-card-return-flash 1.4s var(--dees-ease-standard);
@@ -385,15 +312,15 @@ export class DeesHarnessToolCard extends DeesElement {
             </span>
           </span>
         </button>
-        ${this.isOpen && !this.maximized
+        ${this.isOpen
           ? html`
               <div
-                class="bodyClipFrame ${this.bodyOverflowing ? 'capped' : ''}"
-                style=${`max-height: ${this.bodyCapPx}px;`}
+                class="bodyClipFrame"
+                style=${this.uncapped ? '' : `max-height: ${this.bodyCapPx}px;`}
               >
                 <div class="body bodyInner">${this.renderBody(call)}</div>
               </div>
-              ${this.bodyOverflowing
+              ${this.bodyOverflowing && !this.uncapped
                 ? html`
                     <button class="maximizeBar" type="button" @click=${this.openFullscreen}>
                       <dees-icon icon="lucide:Maximize2" iconSize="12"></dees-icon>
@@ -404,36 +331,26 @@ export class DeesHarnessToolCard extends DeesElement {
             `
           : ''}
       </div>
-      ${this.maximized
-        ? html`
-            <div class="fullscreenLayer" @click=${(event: Event) => {
-              if (event.target === event.currentTarget) this.closeFullscreen();
-            }}>
-              <div class="fullscreenPanel">
-                <header class="fullscreenHeader">
-                  <dees-icon .icon=${descriptor.icon} iconSize="15"></dees-icon>
-                  <span class="fullscreenTitle">${label}${subtitle ? ` · ${subtitle}` : ''}</span>
-                  <button class="fullscreenClose" type="button" @click=${this.closeFullscreen}>
-                    <dees-icon icon="lucide:Minimize2" iconSize="15"></dees-icon>
-                  </button>
-                </header>
-                <div class="fullscreenBody">${this.renderBody(call)}</div>
-              </div>
-            </div>
-          `
-        : ''}
     `;
   }
 
   private readonly openFullscreen = (): void => {
-    this.maximized = true;
-    window.addEventListener('keydown', this.handleFullscreenKeydown);
+    if (this.fullscreenPortal) return;
+    // Appended to document.body: content-visibility containment in the
+    // transcript would trap a position: fixed layer inside this card.
+    const portal = document.createElement('dees-harness-tool-fullscreen');
+    portal.call = this.enrichedCall;
+    portal.toolRegistry = this.toolRegistry;
+    portal.addEventListener('tool-fullscreen-close', this.closeFullscreen, { once: true });
+    document.body.append(portal);
+    this.fullscreenPortal = portal;
   };
 
   private readonly closeFullscreen = (): void => {
-    window.removeEventListener('keydown', this.handleFullscreenKeydown);
-    if (!this.maximized) return;
-    this.maximized = false;
+    const portal = this.fullscreenPortal;
+    if (!portal) return;
+    this.fullscreenPortal = null;
+    portal.remove();
     // The flash locates the card the user was just reading in fullscreen.
     this.returnFlash = true;
     requestAnimationFrame(() => {
@@ -441,15 +358,9 @@ export class DeesHarnessToolCard extends DeesElement {
     });
   };
 
-  private readonly handleFullscreenKeydown = (event: KeyboardEvent): void => {
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      this.closeFullscreen();
-    }
-  };
-
   public updated(changedProperties: Map<PropertyKey, unknown>): void {
     super.updated(changedProperties);
+    if (this.uncapped) return;
     const bodyInner = this.shadowRoot?.querySelector('.bodyInner') ?? null;
     if (bodyInner === this.observedBodyInner) return;
     this.bodyResizeObserver?.disconnect();
@@ -468,7 +379,8 @@ export class DeesHarnessToolCard extends DeesElement {
   }
 
   public async disconnectedCallback(): Promise<void> {
-    window.removeEventListener('keydown', this.handleFullscreenKeydown);
+    this.fullscreenPortal?.remove();
+    this.fullscreenPortal = null;
     this.bodyResizeObserver?.disconnect();
     this.bodyResizeObserver = null;
     this.observedBodyInner = null;

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

@@ -0,0 +1,168 @@
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+  cssManager,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IHarnessToolCall } from '../interfaces.js';
+import { DeesHarnessToolRegistry, parseMcpName } from '../toolregistry.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-harness-tool-fullscreen': DeesHarnessToolFullscreen;
+  }
+}
+
+/**
+ * Fullscreen view of one tool card, appended to document.body by
+ * DeesHarnessToolCard so it escapes every containment context
+ * (content-visibility, transforms) that would trap a position: fixed layer
+ * inside the transcript. Emits `tool-fullscreen-close` on Escape, backdrop
+ * press, or the minimize button; the owning card removes it and flashes.
+ */
+@customElement('dees-harness-tool-fullscreen')
+export class DeesHarnessToolFullscreen extends DeesElement {
+  @property({ attribute: false })
+  accessor call: IHarnessToolCall = { id: '', name: '', status: 'pending' };
+
+  @property({ attribute: false })
+  accessor toolRegistry: DeesHarnessToolRegistry = DeesHarnessToolRegistry.default;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: fixed;
+        inset: 0;
+        z-index: 4000;
+        display: grid;
+        place-items: center;
+        padding: 4vh 3vw;
+        background: color-mix(in srgb, var(--dees-color-bg-primary) 55%, transparent);
+        backdrop-filter: blur(6px);
+        font-family: var(--dees-font-family);
+      }
+
+      .panel {
+        display: flex;
+        flex-direction: column;
+        width: min(1200px, 100%);
+        height: 100%;
+        min-height: 0;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: var(--dees-radius-lg);
+        background: var(--dees-color-bg-primary);
+        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
+        overflow: hidden;
+      }
+
+      .panelHeader {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        gap: var(--dees-spacing-sm);
+        padding: var(--dees-spacing-sm) var(--dees-spacing-md);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-primary);
+      }
+
+      .panelTitle {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: var(--dees-font-control-size-sm, 12px);
+        font-weight: 650;
+      }
+
+      .panelClose {
+        display: grid;
+        place-items: center;
+        margin-left: auto;
+        padding: 6px;
+        border: 0;
+        border-radius: var(--dees-radius-md);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        cursor: pointer;
+      }
+
+      .panelClose:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .panelBody {
+        flex: 1;
+        min-height: 0;
+        overflow: auto;
+        padding: var(--dees-spacing-md);
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .panelBody dees-harness-tool-card {
+        display: block;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const parsed = this.call.mcp ? undefined : parseMcpName(this.call.name);
+    const enriched = parsed
+      ? { ...this.call, mcp: { serverName: parsed.serverName, toolName: parsed.toolName } }
+      : this.call;
+    const descriptor = this.toolRegistry.resolve(enriched);
+    const label = typeof descriptor.label === 'function' ? descriptor.label(enriched) : descriptor.label;
+    const subtitle = descriptor.subtitle?.(enriched) ?? '';
+    return html`
+      <div class="panel" @click=${(event: Event) => event.stopPropagation()}>
+        <header class="panelHeader">
+          <dees-icon .icon=${descriptor.icon} iconSize="15"></dees-icon>
+          <span class="panelTitle">${label}${subtitle ? ` · ${subtitle}` : ''}</span>
+          <button class="panelClose" type="button" @click=${this.emitClose}>
+            <dees-icon icon="lucide:Minimize2" iconSize="15"></dees-icon>
+          </button>
+        </header>
+        <div class="panelBody">
+          <dees-harness-tool-card
+            .call=${this.call}
+            .toolRegistry=${this.toolRegistry}
+            .expanded=${true}
+            .outputExpanded=${true}
+            uncapped
+          ></dees-harness-tool-card>
+        </div>
+      </div>
+    `;
+  }
+
+  public firstUpdated(): void {
+    window.addEventListener('keydown', this.handleKeydown);
+    this.addEventListener('click', (event) => {
+      if (event.target === this) this.emitClose();
+    });
+  }
+
+  private readonly handleKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      this.emitClose();
+    }
+  };
+
+  private readonly emitClose = (): void => {
+    this.dispatchEvent(new CustomEvent('tool-fullscreen-close', { bubbles: false }));
+  };
+
+  public async disconnectedCallback(): Promise<void> {
+    window.removeEventListener('keydown', this.handleKeydown);
+    await super.disconnectedCallback();
+  }
+}