@design.estate/dees-catalog 4.0.3 → 4.1.1

package/dist_ts_web/elements/00group-harness/dees-harness-tool-card/dees-harness-tool-fullscreen.js

@@ -0,0 +1,211 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { DeesElement, html, css, customElement, property, cssManager, } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesHarnessToolRegistry, parseMcpName } from '../toolregistry.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+/**
+ * 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.
+ */
+let DeesHarnessToolFullscreen = (() => {
+    let _classDecorators = [customElement('dees-harness-tool-fullscreen')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesElement;
+    let _call_decorators;
+    let _call_initializers = [];
+    let _call_extraInitializers = [];
+    let _toolRegistry_decorators;
+    let _toolRegistry_initializers = [];
+    let _toolRegistry_extraInitializers = [];
+    var DeesHarnessToolFullscreen = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _call_decorators = [property({ attribute: false })];
+            _toolRegistry_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _call_decorators, { kind: "accessor", name: "call", static: false, private: false, access: { has: obj => "call" in obj, get: obj => obj.call, set: (obj, value) => { obj.call = value; } }, metadata: _metadata }, _call_initializers, _call_extraInitializers);
+            __esDecorate(this, null, _toolRegistry_decorators, { kind: "accessor", name: "toolRegistry", static: false, private: false, access: { has: obj => "toolRegistry" in obj, get: obj => obj.toolRegistry, set: (obj, value) => { obj.toolRegistry = value; } }, metadata: _metadata }, _toolRegistry_initializers, _toolRegistry_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeesHarnessToolFullscreen = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #call_accessor_storage = __runInitializers(this, _call_initializers, { id: '', name: '', status: 'pending' });
+        get call() { return this.#call_accessor_storage; }
+        set call(value) { this.#call_accessor_storage = value; }
+        #toolRegistry_accessor_storage = (__runInitializers(this, _call_extraInitializers), __runInitializers(this, _toolRegistry_initializers, DeesHarnessToolRegistry.default));
+        get toolRegistry() { return this.#toolRegistry_accessor_storage; }
+        set toolRegistry(value) { this.#toolRegistry_accessor_storage = value; }
+        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;
+      }
+    `,
+        ];
+        render() {
+            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.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>
+    `;
+        }
+        firstUpdated() {
+            window.addEventListener('keydown', this.handleKeydown);
+            this.addEventListener('click', (event) => {
+                if (event.target === this)
+                    this.emitClose();
+            });
+        }
+        handleKeydown = (__runInitializers(this, _toolRegistry_extraInitializers), (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                this.emitClose();
+            }
+        });
+        emitClose = () => {
+            this.dispatchEvent(new CustomEvent('tool-fullscreen-close', { bubbles: false }));
+        };
+        async disconnectedCallback() {
+            window.removeEventListener('keydown', this.handleKeydown);
+            await super.disconnectedCallback();
+        }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeesHarnessToolFullscreen = _classThis;
+})();
+export { DeesHarnessToolFullscreen };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1oYXJuZXNzLXRvb2wtZnVsbHNjcmVlbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWhhcm5lc3MvZGVlcy1oYXJuZXNzLXRvb2wtY2FyZC9kZWVzLWhhcm5lc3MtdG9vbC1mdWxsc2NyZWVuLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsV0FBVyxFQUNYLElBQUksRUFDSixHQUFHLEVBQ0gsYUFBYSxFQUViLFFBQVEsRUFDUixVQUFVLEdBQ1gsTUFBTSw2QkFBNkIsQ0FBQztBQUNyQyxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUV0RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsWUFBWSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDM0UsT0FBTyw4Q0FBOEMsQ0FBQztBQVF0RDs7Ozs7O0dBTUc7SUFFVSx5QkFBeUI7NEJBRHJDLGFBQWEsQ0FBQyw4QkFBOEIsQ0FBQzs7OztzQkFDQyxXQUFXOzs7Ozs7O3lDQUFuQixTQUFRLFdBQVc7Ozs7Z0NBQ3ZELFFBQVEsQ0FBQyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsQ0FBQzt3Q0FHOUIsUUFBUSxDQUFDLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxDQUFDO1lBRi9CLGlLQUFTLElBQUksNkJBQUosSUFBSSxtRkFBNkQ7WUFHMUUseUxBQVMsWUFBWSw2QkFBWixZQUFZLG1HQUE0RDtZQUxuRiw2S0EySUM7Ozs7UUF6SUMscUVBQWtDLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxJQUFJLEVBQUUsRUFBRSxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsRUFBQztRQUExRSxJQUFTLElBQUksMENBQTZEO1FBQTFFLElBQVMsSUFBSSxnREFBNkQ7UUFHMUUsd0lBQWlELHVCQUF1QixDQUFDLE9BQU8sR0FBQztRQUFq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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "4.0.3",
+  "version": "4.1.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '4.0.3',
+  version: '4.1.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

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

@@ -81,6 +81,13 @@ export class DeesHarnessMessage extends DeesElement {
            boundary instead of widening the whole conversation; scrollable
            payload blocks inside keep their own horizontal scrollbars. */
         overflow-x: clip;
+        /* Virtualized rendering: cards outside the viewport skip style,
+           layout, and paint entirely and re-render when scrolled back —
+           state and DOM stay, so expansion and selection survive. The
+           'auto' keyword keeps the last rendered size as the placeholder,
+           holding the scrollbar steady. */
+        content-visibility: auto;
+        contain-intrinsic-size: auto 96px;
         font-family: var(--dees-font-family);
         /* entry: new boxes make space for themselves while fading in.
            A keyframes animation (not a transition) so the parent tree's

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,6 +55,24 @@ export class DeesHarnessToolCard extends DeesElement {
   @state()
   accessor outputExpanded: boolean = false;
 
+  /** Body height cap; taller content scrolls in place and offers fullscreen. */
+  @property({ type: Number })
+  accessor bodyCapPx: number = 360;
+
+  /** Set on the card inside the fullscreen modal: no cap, no maximize bar. */
+  @property({ type: Boolean })
+  accessor uncapped: boolean = false;
+
+  @state()
+  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,
     cssManager.defaultStyles,
@@ -180,6 +199,59 @@ export class DeesHarnessToolCard extends DeesElement {
       dees-dataview-codebox {
         font-family: var(--dees-font-family);
       }
+
+      /* Three body modes: collapsed (no body), normal (content fits the
+         cap), capped (content taller than the cap scrolls inside the frame
+         and offers the fullscreen modal). */
+      .bodyClipFrame {
+        position: relative;
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .maximizeBar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--dees-spacing-xs);
+        width: 100%;
+        padding: var(--dees-spacing-xs) var(--dees-spacing-md);
+        border: 0;
+        border-top: 1px solid var(--dees-color-border-subtle);
+        background: transparent;
+        color: var(--dees-color-link);
+        cursor: pointer;
+        font-family: inherit;
+        font-size: var(--dees-font-control-size-sm, 12px);
+      }
+
+      .maximizeBar:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-link-hover);
+      }
+
+      /* Locates the card after minimizing: a brief highlight pulse. */
+      .harness-card.returnFlash {
+        animation: harness-card-return-flash 1.4s var(--dees-ease-standard);
+      }
+
+      @keyframes harness-card-return-flash {
+        0%, 55% {
+          box-shadow: 0 0 0 2px var(--dees-color-accent-primary);
+        }
+        100% {
+          box-shadow: 0 0 0 0 transparent;
+        }
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .harness-card.returnFlash {
+          animation: none;
+          box-shadow: 0 0 0 2px var(--dees-color-accent-primary);
+        }
+      }
     `,
   ];
 
@@ -210,7 +282,13 @@ export class DeesHarnessToolCard extends DeesElement {
     const statusTone = call.isError ? 'error' : call.status === 'completed' ? 'success' : call.status;
     const duration = harnessFormatDuration(call.startedAt, call.finishedAt);
     return html`
-      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''}">
+      <div class="harness-card status-${call.isError ? 'error' : call.status} ${descriptor.destructive ? 'destructive' : ''} ${this.returnFlash ? 'returnFlash' : ''}"
+        @animationend=${(event: AnimationEvent) => {
+          if (event.animationName === 'harness-card-return-flash') {
+            this.returnFlash = false;
+          }
+        }}
+      >
         <button
           class="header"
           type="button"
@@ -234,11 +312,81 @@ export class DeesHarnessToolCard extends DeesElement {
             </span>
           </span>
         </button>
-        ${this.isOpen ? html`<div class="body">${this.renderBody(call)}</div>` : ''}
+        ${this.isOpen
+          ? html`
+              <div
+                class="bodyClipFrame"
+                style=${this.uncapped ? '' : `max-height: ${this.bodyCapPx}px;`}
+              >
+                <div class="body bodyInner">${this.renderBody(call)}</div>
+              </div>
+              ${this.bodyOverflowing && !this.uncapped
+                ? html`
+                    <button class="maximizeBar" type="button" @click=${this.openFullscreen}>
+                      <dees-icon icon="lucide:Maximize2" iconSize="12"></dees-icon>
+                      Show everything
+                    </button>
+                  `
+                : ''}
+            `
+          : ''}
       </div>
     `;
   }
 
+  private readonly openFullscreen = (): void => {
+    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 => {
+    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(() => {
+      this.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    });
+  };
+
+  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();
+    this.observedBodyInner = bodyInner;
+    if (!bodyInner) {
+      this.bodyOverflowing = false;
+      return;
+    }
+    this.bodyResizeObserver ??= new ResizeObserver(() => {
+      const inner = this.observedBodyInner;
+      if (!inner) return;
+      // small slack so a few px never trigger the cap chrome
+      this.bodyOverflowing = inner.scrollHeight > this.bodyCapPx + 24;
+    });
+    this.bodyResizeObserver.observe(bodyInner);
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    this.fullscreenPortal?.remove();
+    this.fullscreenPortal = null;
+    this.bodyResizeObserver?.disconnect();
+    this.bodyResizeObserver = null;
+    this.observedBodyInner = null;
+    await super.disconnectedCallback();
+  }
+
   private renderMcpBadges(call: IHarnessToolCall): TemplateResult {
     if (!call.mcp) return html``;
     const annotations = call.mcp.annotations;

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();
+  }
+}