@design.estate/dees-catalog 3.102.0 → 3.103.0

package/ts_web/elements/00group-harness/dees-terminal-view/dees-terminal-view.ts

@@ -0,0 +1,317 @@
+import { demoFunc } from './dees-terminal-view.demo.js';
+import {
+  DeesElement,
+  html,
+  css,
+  customElement,
+  type TemplateResult,
+  property,
+} from '@design.estate/dees-element';
+import type { Terminal } from 'xterm';
+import type { FitAddon } from 'xterm-addon-fit';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesServiceLibLoader } from '../../../services/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-terminal-view': DeesTerminalView;
+  }
+}
+
+/** Detail of `terminal-input`: bytes the user typed, as a UTF-8 string. */
+export interface ITerminalInputDetail {
+  data: string;
+}
+
+/** Detail of `terminal-resize`, fired after the terminal refits its container. */
+export interface ITerminalResizeDetail {
+  rows: number;
+  cols: number;
+}
+
+/**
+ * Transport-agnostic xterm.js surface: the host pipes remote PTY output into
+ * `write()` and receives keystrokes via `terminal-input` — no process,
+ * runtime, or socket coupling. `terminal-resize` reports the grid size after
+ * every refit so the host can negotiate a PTY size. xterm loads through
+ * DeesServiceLibLoader; CSP-locked hosts can pre-register bundled modules
+ * with `provideXtermModules()` to avoid the CDN.
+ */
+@customElement('dees-terminal-view')
+export class DeesTerminalView extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Agent Chat'];
+
+  /** Font size in px for the terminal grid. */
+  @property({ type: Number })
+  accessor fontSize: number = 13;
+
+  @property({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  private terminal: Terminal | undefined;
+  private fitAddon: FitAddon | undefined;
+  private resizeObserver: ResizeObserver | undefined;
+  private inputDisposable: { dispose(): void } | undefined;
+  private lastReportedSize = '';
+  // Output that arrives before xterm finished loading is replayed in order.
+  private pendingWrites: Array<string | Uint8Array> = [];
+  private setupPromise: Promise<void> | undefined;
+
+  public static styles = [
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        min-height: 0;
+        height: 100%;
+        background: var(--dees-color-bg-primary);
+      }
+
+      .terminalHost {
+        width: 100%;
+        height: 100%;
+        padding: var(--dees-spacing-xs);
+        box-sizing: border-box;
+      }
+
+      /* xterm.js styles (shadow DOM needs them locally) */
+      .xterm {
+        font-feature-settings: 'liga' 0;
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .xterm.focus,
+      .xterm:focus {
+        outline: none;
+      }
+
+      .xterm .xterm-helpers {
+        position: absolute;
+        top: 0;
+        z-index: 5;
+      }
+
+      .xterm .xterm-helper-textarea {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        position: absolute;
+        opacity: 0;
+        left: -9999em;
+        top: 0;
+        width: 0;
+        height: 0;
+        z-index: -5;
+        white-space: nowrap;
+        overflow: hidden;
+        resize: none;
+      }
+
+      .xterm .composition-view {
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        background-color: var(--dees-color-bg-primary);
+        overflow-y: scroll;
+        cursor: default;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
+      }
+
+      .xterm .xterm-screen {
+        position: relative;
+      }
+
+      .xterm .xterm-screen canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .xterm .xterm-scroll-area {
+        visibility: hidden;
+      }
+
+      .xterm-char-measure-element {
+        display: inline-block;
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        left: -9999em;
+        line-height: normal;
+      }
+
+      .xterm {
+        cursor: text;
+      }
+
+      .xterm.enable-mouse-events {
+        cursor: default;
+      }
+
+      .xterm.xterm-cursor-pointer {
+        cursor: pointer;
+      }
+
+      .xterm.column-select.focus {
+        cursor: crosshair;
+      }
+
+      .xterm .xterm-accessibility,
+      .xterm .xterm-message {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10;
+        color: transparent;
+      }
+
+      .xterm .live-region {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      .xterm-dim {
+        opacity: 0.5;
+      }
+
+      .xterm-underline {
+        text-decoration: underline;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`<div class="terminalHost"></div>`;
+  }
+
+  public async firstUpdated(): Promise<void> {
+    this.setupPromise = this.setupTerminal();
+    await this.setupPromise;
+  }
+
+  /** Feed remote output into the terminal; safe to call before setup finishes. */
+  public write(dataArg: string | Uint8Array): void {
+    if (this.terminal) {
+      this.terminal.write(dataArg);
+    } else {
+      this.pendingWrites.push(dataArg);
+    }
+  }
+
+  /** Reset the screen and scrollback, e.g. before a full replay. */
+  public clear(): void {
+    this.pendingWrites = [];
+    this.terminal?.reset();
+  }
+
+  public focus(): void {
+    this.terminal?.focus();
+  }
+
+  /** Current grid size, or undefined while xterm is still loading. */
+  public get currentSize(): ITerminalResizeDetail | undefined {
+    if (!this.terminal) return undefined;
+    return { rows: this.terminal.rows, cols: this.terminal.cols };
+  }
+
+  private async setupTerminal(): Promise<void> {
+    const libLoader = DeesServiceLibLoader.getInstance();
+    const [xterm, fit] = await Promise.all([
+      libLoader.loadXterm(),
+      libLoader.loadXtermFitAddon(),
+    ]);
+    if (!this.isConnected) return;
+    const host = this.shadowRoot?.querySelector<HTMLElement>('.terminalHost');
+    if (!host) return;
+    const computed = getComputedStyle(this);
+    const themeColor = (nameArg: string, fallbackArg: string): string => {
+      const value = computed.getPropertyValue(nameArg).trim();
+      return value || fallbackArg;
+    };
+    const terminal = new xterm.Terminal({
+      fontSize: this.fontSize,
+      fontFamily: themeColor('--dees-font-family-mono', 'monospace'),
+      cursorBlink: true,
+      allowProposedApi: true,
+      scrollback: 10_000,
+      theme: {
+        background: themeColor('--dees-color-bg-primary', '#111111'),
+        foreground: themeColor('--dees-color-text-primary', '#e6e6e6'),
+        cursor: themeColor('--dees-color-accent-primary', '#e6e6e6'),
+      },
+    });
+    const fitAddon = new fit.FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(host);
+    this.terminal = terminal;
+    this.fitAddon = fitAddon;
+    this.inputDisposable = terminal.onData((dataArg) => {
+      if (this.disabled) return;
+      const detail: ITerminalInputDetail = { data: dataArg };
+      this.dispatchEvent(
+        new CustomEvent('terminal-input', { detail, bubbles: true, composed: true }),
+      );
+    });
+    for (const pending of this.pendingWrites) terminal.write(pending);
+    this.pendingWrites = [];
+    this.refit();
+    this.resizeObserver = new ResizeObserver(() => this.refit());
+    this.resizeObserver.observe(host);
+  }
+
+  private refit(): void {
+    if (!this.terminal || !this.fitAddon) return;
+    try {
+      this.fitAddon.fit();
+    } catch {
+      return;
+    }
+    const size = `${this.terminal.rows}x${this.terminal.cols}`;
+    if (size === this.lastReportedSize) return;
+    this.lastReportedSize = size;
+    const detail: ITerminalResizeDetail = {
+      rows: this.terminal.rows,
+      cols: this.terminal.cols,
+    };
+    this.dispatchEvent(
+      new CustomEvent('terminal-resize', { detail, bubbles: true, composed: true }),
+    );
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+    this.inputDisposable?.dispose();
+    this.inputDisposable = undefined;
+    this.terminal?.dispose();
+    this.terminal = undefined;
+    this.fitAddon = undefined;
+    this.pendingWrites = [];
+  }
+}

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

@@ -0,0 +1 @@
+export * from './dees-terminal-view.js';

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

@@ -17,6 +17,7 @@ export * from './dees-harness-question-card/index.js';
 export * from './dees-harness-message-list/index.js';
 export * from './dees-harness-reasoning/index.js';
 export * from './dees-harness-session-list/index.js';
+export * from './dees-terminal-view/index.js';
 export * from './dees-harness-status/index.js';
 export * from './dees-harness-todos/index.js';
 export * from './dees-harness-tool-card/index.js';

package/ts_web/elements/00group-harness/interfaces.ts

@@ -198,6 +198,8 @@ export interface IHarnessSessionMeta {
   updatedAt?: number;
   messageCount?: number;
   preview?: string;
+  /** Optional dees-icon name (e.g. 'lucide:Terminal') shown before the title. */
+  icon?: string;
 }
 
 /** Detail of `harness-session-context`, fired on right-click of a session item. */