@aithe/aithe-ui 26.2.3 → 26.3.1

package/dist/components/framework/log-panel.js

@@ -0,0 +1,637 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { AitheElement } from '../../core/aithe-element';
+import { logger, LogLevel, LOG_LEVEL_LABEL } from '../../core/logger';
+import { safeStringify } from '../../utils/utils';
+const LEVEL_COLORS = {
+    DEBUG: 'var(--aithe-color-text-muted)',
+    INFO: 'var(--aithe-primary-6)',
+    WARN: '#d18f29',
+    ERROR: '#df526b',
+    FATAL: '#a0153a',
+};
+const LEVEL_ICONS = {
+    DEBUG: '·',
+    INFO: 'ℹ',
+    WARN: '⚠',
+    ERROR: '✕',
+    FATAL: '✕✕',
+};
+function formatTime(ts) {
+    const d = new Date(ts);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${String(d.getMilliseconds()).padStart(3, '0')}`;
+}
+let AitheLogPanel = class AitheLogPanel extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.panelPlacement = 'overlay';
+        this._entries = [];
+        this._filterLevel = null;
+        this._searchText = '';
+        this._expandedIds = new Set();
+        this._panelHeight = 200;
+        this._unsubscribe = null;
+        this._unsubscribeClear = null;
+        this._dragStartY = 0;
+        this._dragStartHeight = 0;
+        this._dragging = false;
+    }
+    static { this.styles = css `
+    :host {
+      display: contents;
+    }
+
+    .panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--aithe-color-surface-elevated, #fff);
+      border-top: 1px solid var(--aithe-color-border, #e0e0e0);
+      font-family: var(--aithe-font-family-mono, 'SF Mono', Menlo, Consolas, monospace);
+    }
+
+    .panel.overlay {
+      position: fixed;
+      right: 0;
+      bottom: 0;
+      width: min(560px, 100vw);
+      max-height: 60vh;
+      border-top: 1px solid var(--aithe-color-border, #e0e0e0);
+      border-left: 1px solid var(--aithe-color-border, #e0e0e0);
+      border-radius: var(--aithe-container-radius-lg, 8px) 0 0 0;
+      box-shadow: var(--aithe-shadow-4, 0 8px 32px rgba(0, 0, 0, 0.12));
+      z-index: 99999;
+    }
+
+    .panel.inline {
+      position: relative;
+      width: 100%;
+      max-width: 100%;
+      height: var(--aithe-log-panel-height, 200px);
+      min-height: 120px;
+      max-height: 60vh;
+      margin: 0 auto;
+      border: 1px solid var(--aithe-color-border, #e0e0e0);
+      border-radius: var(--aithe-container-radius-md, 6px);
+    }
+
+    .panel.inline.hidden {
+      display: none;
+    }
+
+    .resize-handle {
+      height: 6px;
+      cursor: ns-resize;
+      background: var(--aithe-color-border, #e0e0e0);
+      border-radius: var(--aithe-container-radius-md, 6px) var(--aithe-container-radius-md, 6px) 0 0;
+      flex-shrink: 0;
+      position: relative;
+    }
+
+    .resize-handle::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 32px;
+      height: 3px;
+      border-radius: 2px;
+      background: var(--aithe-color-text-muted, #999);
+    }
+
+    .resize-handle:hover,
+    .resize-handle.dragging {
+      background: var(--aithe-primary-6, #1677ff);
+    }
+
+    .resize-handle:hover::after,
+    .resize-handle.dragging::after {
+      background: #fff;
+    }
+
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--aithe-space-2, 8px);
+      padding: var(--aithe-space-2, 8px) var(--aithe-space-3, 12px);
+      border-bottom: 1px solid var(--aithe-color-border, #e0e0e0);
+      flex-shrink: 0;
+      flex-wrap: wrap;
+      background: var(--aithe-color-surface, var(--aithe-color-surface-elevated, #fff));
+    }
+
+    .toolbar-title {
+      font-size: var(--aithe-font-size-sm, 13px);
+      font-weight: var(--aithe-font-weight-semibold, 600);
+      color: var(--aithe-color-text, #1a1a1a);
+      margin-right: auto;
+    }
+
+    .search-input {
+      height: 26px;
+      padding: 0 var(--aithe-space-2, 8px);
+      border: 1px solid var(--aithe-color-border, #e0e0e0);
+      border-radius: var(--aithe-radius-sm, 4px);
+      background: var(--aithe-color-surface, #fff);
+      color: var(--aithe-color-text, #1a1a1a);
+      font-size: var(--aithe-font-size-xs, 12px);
+      outline: none;
+      width: 120px;
+      transition: border-color 0.15s;
+    }
+
+    .search-input:focus {
+      border-color: var(--aithe-primary-6, #1677ff);
+    }
+
+    .search-input::placeholder {
+      color: var(--aithe-color-text-muted, #999);
+    }
+
+    .toolbar-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 26px;
+      padding: 0 var(--aithe-space-2, 8px);
+      border: 1px solid var(--aithe-color-border, #e0e0e0);
+      border-radius: var(--aithe-radius-sm, 4px);
+      background: transparent;
+      color: var(--aithe-color-text, #1a1a1a);
+      font-size: var(--aithe-font-size-xs, 12px);
+      cursor: pointer;
+      white-space: nowrap;
+      transition:
+        background 0.15s,
+        border-color 0.15s;
+    }
+
+    .toolbar-btn:hover {
+      background: var(--aithe-color-surface-muted, #f5f5f5);
+      border-color: var(--aithe-primary-6, #1677ff);
+    }
+
+    .toolbar-btn.active {
+      background: var(--aithe-primary-6, #1677ff);
+      color: #fff;
+      border-color: var(--aithe-primary-6, #1677ff);
+    }
+
+    .log-list {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      font-size: var(--aithe-font-size-xs, 12px);
+      line-height: 1.5;
+    }
+
+    .log-item {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--aithe-space-2, 8px);
+      padding: var(--aithe-space-1, 4px) var(--aithe-space-3, 12px);
+      border-bottom: 1px solid var(--aithe-color-border-subtle, #f0f0f0);
+      word-break: break-all;
+    }
+
+    .log-item:hover {
+      background: var(--aithe-color-surface-muted, #f5f5f5);
+    }
+
+    .log-item:hover .log-actions {
+      opacity: 1;
+    }
+
+    .log-time {
+      flex-shrink: 0;
+      color: var(--aithe-color-text-muted, #999);
+      font-size: 11px;
+    }
+
+    .log-level {
+      flex-shrink: 0;
+      font-weight: var(--aithe-font-weight-semibold, 600);
+      font-size: 11px;
+      min-width: 42px;
+      text-align: center;
+    }
+
+    .log-icon {
+      flex-shrink: 0;
+      width: 16px;
+      text-align: center;
+    }
+
+    .log-msg {
+      flex: 1;
+      min-width: 0;
+      color: var(--aithe-color-text, #1a1a1a);
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .log-msg-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+    }
+
+    .log-msg-text {
+      flex: 1;
+      min-width: 0;
+      word-break: break-word;
+      white-space: pre-wrap;
+    }
+
+    .log-actions {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      flex-shrink: 0;
+      opacity: 0;
+      transition: opacity 0.15s;
+    }
+
+    .log-msg-row:hover .log-actions {
+      opacity: 1;
+    }
+
+    .log-action-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border: none;
+      border-radius: var(--aithe-radius-sm, 4px);
+      background: transparent;
+      color: var(--aithe-color-text-muted, #999);
+      cursor: pointer;
+      font-size: 12px;
+      line-height: 1;
+      padding: 0;
+    }
+
+    .log-action-btn:hover {
+      background: var(--aithe-color-surface-muted, #f5f5f5);
+      color: var(--aithe-primary-6, #1677ff);
+    }
+
+    .log-data {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+    }
+
+    .log-data-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .log-data-content pre {
+      margin: 0;
+      padding: var(--aithe-space-1, 4px);
+      background: var(--aithe-color-surface-muted, #f5f5f5);
+      border-radius: var(--aithe-radius-sm, 4px);
+      overflow-x: auto;
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
+    .log-stack {
+      margin: 0;
+      padding: var(--aithe-space-1, 4px);
+      background: rgba(223, 82, 107, 0.06);
+      border-radius: var(--aithe-radius-sm, 4px);
+      font-size: 11px;
+      color: #df526b;
+      white-space: pre-wrap;
+    }
+
+    .empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 120px;
+      color: var(--aithe-color-text-muted, #999);
+      font-size: var(--aithe-font-size-sm, 13px);
+    }
+
+    @media (max-width: 480px) {
+      .panel.overlay {
+        width: 100vw;
+        max-height: 50vh;
+        border-radius: var(--aithe-container-radius-lg, 8px) var(--aithe-container-radius-lg, 8px) 0
+          0;
+        border-left: none;
+      }
+
+      .search-input {
+        width: 80px;
+      }
+    }
+  `; }
+    connectedCallback() {
+        super.connectedCallback();
+        this._entries = [...logger.entries];
+        this._unsubscribe = logger.subscribe(() => {
+            this._entries = [...logger.entries];
+            if (this.open) {
+                this.updateComplete.then(() => this._scrollToBottom());
+            }
+        });
+        this._unsubscribeClear = logger.onClear(() => {
+            this._entries = [];
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribe?.();
+        this._unsubscribe = null;
+        this._unsubscribeClear?.();
+        this._unsubscribeClear = null;
+    }
+    _scrollToBottom() {
+        const el = this._scrollContainer;
+        if (el) {
+            el.scrollTop = el.scrollHeight;
+        }
+    }
+    _togglePanel() {
+        this.open = !this.open;
+        this.emit('log-panel-toggle', { open: this.open });
+    }
+    _clearLogs() {
+        logger.clear();
+    }
+    _setFilter(level) {
+        this._filterLevel = this._filterLevel === level ? null : level;
+    }
+    _handleSearch(e) {
+        this._searchText = e.target.value;
+    }
+    _toggleExpand(id) {
+        const next = new Set(this._expandedIds);
+        if (next.has(id)) {
+            next.delete(id);
+        }
+        else {
+            next.add(id);
+        }
+        this._expandedIds = next;
+    }
+    _copyMessage(entry) {
+        navigator.clipboard.writeText(entry.message);
+    }
+    _copyData(entry) {
+        const parts = [];
+        for (const d of entry.data) {
+            if (d !== null && typeof d === 'object') {
+                parts.push(safeStringify(d));
+            }
+        }
+        if (entry.stack) {
+            parts.push(entry.stack);
+        }
+        navigator.clipboard.writeText(parts.join('\n'));
+    }
+    _onDragStart(e) {
+        e.preventDefault();
+        this._dragging = true;
+        this._dragStartY = e.clientY;
+        this._dragStartHeight = this._panelHeight;
+        const target = e.currentTarget;
+        target.classList.add('dragging');
+        target.setPointerCapture(e.pointerId);
+        const onMove = (ev) => {
+            if (!this._dragging)
+                return;
+            const delta = this._dragStartY - ev.clientY;
+            const newHeight = Math.min(Math.max(this._dragStartHeight + delta, 120), globalThis.innerHeight * 0.6);
+            this._panelHeight = newHeight;
+            this.style.setProperty('--aithe-log-panel-height', `${newHeight}px`);
+        };
+        const onUp = (ev) => {
+            this._dragging = false;
+            target.classList.remove('dragging');
+            target.releasePointerCapture(ev.pointerId);
+            globalThis.removeEventListener('pointermove', onMove);
+            globalThis.removeEventListener('pointerup', onUp);
+        };
+        globalThis.addEventListener('pointermove', onMove);
+        globalThis.addEventListener('pointerup', onUp);
+    }
+    _filteredEntries() {
+        let result = this._entries;
+        if (this._filterLevel !== null) {
+            result = result.filter((e) => e.level >= this._filterLevel);
+        }
+        if (this._searchText) {
+            const kw = this._searchText.toLowerCase();
+            result = result.filter((e) => {
+                if (e.message.toLowerCase().includes(kw))
+                    return true;
+                if (e.stack?.toLowerCase().includes(kw))
+                    return true;
+                return e.data.some((d) => {
+                    if (typeof d === 'string' && d.toLowerCase().includes(kw))
+                        return true;
+                    try {
+                        return JSON.stringify(d).toLowerCase().includes(kw);
+                    }
+                    catch {
+                        return false;
+                    }
+                });
+            });
+        }
+        return result;
+    }
+    _renderEntry(entry) {
+        const color = LEVEL_COLORS[entry.levelLabel] ?? 'inherit';
+        const icon = LEVEL_ICONS[entry.levelLabel] ?? '';
+        const hasData = entry.data.some((d) => d !== null && typeof d === 'object') || !!entry.stack;
+        const expanded = this._expandedIds.has(entry.id);
+        const objectData = entry.data.filter((d) => d !== null && typeof d === 'object');
+        const expandTitle = expanded ? 'Collapse' : 'Expand';
+        const expandIcon = expanded ? '▴' : '⋯';
+        const expandBtn = hasData
+            ? html `
+          <button
+            class="log-action-btn"
+            type="button"
+            title=${expandTitle}
+            @click=${(e) => {
+                e.stopPropagation();
+                this._toggleExpand(entry.id);
+            }}
+          >
+            ${expandIcon}
+          </button>
+        `
+            : null;
+        const objectDataContent = objectData.length
+            ? html `
+          <pre>
+            ${objectData.map((d) => safeStringify(d)).join('\n')}</pre
+          >
+        `
+            : null;
+        const stackContent = entry.stack
+            ? html `
+          <div class="log-stack">${entry.stack}</div>
+        `
+            : null;
+        const expandedContent = hasData && expanded
+            ? html `
+            <div class="log-data">
+              <div class="log-data-content">
+                ${objectDataContent}
+                ${stackContent}
+              </div>
+                  <span class="log-actions" style="opacity:1">
+                    <button
+                      class="log-action-btn"
+                      type="button"
+                      title="Copy data"
+                      @click=${(e) => {
+                e.stopPropagation();
+                this._copyData(entry);
+            }}
+                    >
+                      ⧉
+                    </button>
+                  </span>
+                </div>
+              `
+            : null;
+        return html `
+      <div class="log-item">
+        <span class="log-icon" style="color:${color}">${icon}</span>
+        <span class="log-time">${formatTime(entry.timestamp)}</span>
+        <span class="log-level" style="color:${color}">${entry.levelLabel}</span>
+        <div class="log-msg">
+          <div class="log-msg-row">
+            <span class="log-msg-text">${entry.message}</span>
+            <span class="log-actions">
+              ${expandBtn}
+              <button
+                class="log-action-btn"
+                type="button"
+                title="Copy message"
+                @click=${(e) => {
+            e.stopPropagation();
+            this._copyMessage(entry);
+        }}
+              >
+                ⧉
+              </button>
+            </span>
+          </div>
+          ${expandedContent}
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        const filtered = this._filteredEntries();
+        const countLabel = this._filterLevel !== null || this._searchText
+            ? `${filtered.length}/${this._entries.length}`
+            : `${this._entries.length}`;
+        const filterBtns = Object.values(LogLevel)
+            .filter((v) => typeof v === 'number')
+            .map((level) => {
+            const label = LOG_LEVEL_LABEL[level];
+            const active = this._filterLevel === level;
+            return html `
+          <button
+            class=${classMap({ 'toolbar-btn': true, active })}
+            type="button"
+            @click=${() => this._setFilter(level)}
+          >
+            ${label}
+          </button>
+        `;
+        });
+        const logList = filtered.length
+            ? html `
+          <div class="log-list">
+            ${repeat(filtered, (e) => e.id, (e) => this._renderEntry(e))}
+          </div>
+        `
+            : html `
+          <div class="empty">No logs</div>
+        `;
+        const panelClass = classMap({
+            panel: true,
+            overlay: this.panelPlacement === 'overlay',
+            inline: this.panelPlacement === 'inline',
+            hidden: this.panelPlacement === 'inline' && !this.open,
+        });
+        if (this.panelPlacement === 'overlay' && !this.open) {
+            return null;
+        }
+        return html `
+      <div class=${panelClass}>
+        ${this.panelPlacement === 'inline'
+            ? html `
+              <div class="resize-handle" @pointerdown=${this._onDragStart}></div>
+            `
+            : null}
+        <div class="toolbar">
+          <span class="toolbar-title">Logs (${countLabel})</span>
+          <input
+            class="search-input"
+            type="text"
+            placeholder="Search..."
+            .value=${this._searchText}
+            @input=${this._handleSearch}
+          />
+          ${filterBtns}
+          <button class="toolbar-btn" type="button" @click=${this._clearLogs}>Clear</button>
+          <button class="toolbar-btn" type="button" @click=${this._togglePanel}>✕</button>
+        </div>
+        ${logList}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'open' })
+], AitheLogPanel.prototype, "open", void 0);
+__decorate([
+    property({ type: String, attribute: 'panel-placement' })
+], AitheLogPanel.prototype, "panelPlacement", void 0);
+__decorate([
+    state()
+], AitheLogPanel.prototype, "_entries", void 0);
+__decorate([
+    state()
+], AitheLogPanel.prototype, "_filterLevel", void 0);
+__decorate([
+    state()
+], AitheLogPanel.prototype, "_searchText", void 0);
+__decorate([
+    state()
+], AitheLogPanel.prototype, "_expandedIds", void 0);
+__decorate([
+    state()
+], AitheLogPanel.prototype, "_panelHeight", void 0);
+__decorate([
+    query('.log-list')
+], AitheLogPanel.prototype, "_scrollContainer", void 0);
+AitheLogPanel = __decorate([
+    customElement('aithe-log-panel')
+], AitheLogPanel);
+export { AitheLogPanel };