feat(ecoos-daemon): integrate a bundled daemon web UI with components, interfaces, styles, bundling config, and server support

2026-01-12 01:51:22 +00:00
parent b9b7f2b4a3
commit 140ce716f2
21 changed files with 6123 additions and 668 deletions
--- a/ecoos_daemon/ts_web/elements/ecoos-logs.ts
+++ b/ecoos_daemon/ts_web/elements/ecoos-logs.ts
@@ -0,0 +1,127 @@
+/**
+ * EcoOS Logs View
+ * Tabbed log viewer for daemon and system logs with auto-scroll
+ */
+
+import {
+  html,
+  DeesElement,
+  customElement,
+  property,
+  state,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { sharedStyles } from '../styles/shared.js';
+
+@customElement('ecoos-logs')
+export class EcoosLogs extends DeesElement {
+  @property({ type: Array })
+  public accessor daemonLogs: string[] = [];
+
+  @property({ type: Array })
+  public accessor systemLogs: string[] = [];
+
+  @state()
+  private accessor activeTab: 'daemon' | 'system' = 'daemon';
+
+  public static styles = [
+    sharedStyles,
+    css`
+      :host {
+        display: block;
+        padding: 20px;
+      }
+
+      .logs-container {
+        background: var(--ecoos-card);
+        border: 1px solid var(--ecoos-border);
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .logs-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid var(--ecoos-border);
+      }
+
+      .logs-content {
+        height: 500px;
+        overflow-y: auto;
+        font-family: 'SF Mono', Monaco, monospace;
+        font-size: 12px;
+        line-height: 1.6;
+        background: #0d0d0d;
+        padding: 12px;
+      }
+
+      .log-entry {
+        white-space: pre-wrap;
+        word-break: break-all;
+        padding: 2px 0;
+      }
+
+      .empty-message {
+        color: var(--ecoos-text-dim);
+        padding: 20px;
+        text-align: center;
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    const logs = this.activeTab === 'daemon' ? this.daemonLogs : this.systemLogs;
+
+    return html`
+      <div class="logs-container">
+        <div class="logs-header">
+          <div class="tabs">
+            <div
+              class="tab ${this.activeTab === 'daemon' ? 'active' : ''}"
+              @click=${() => this.switchTab('daemon')}
+            >
+              Daemon Logs
+            </div>
+            <div
+              class="tab ${this.activeTab === 'system' ? 'active' : ''}"
+              @click=${() => this.switchTab('system')}
+            >
+              System Logs
+            </div>
+          </div>
+        </div>
+
+        <div class="logs-content" id="logs-content">
+          ${logs.length === 0
+            ? html`<div class="empty-message">No logs available</div>`
+            : logs.map(log => html`<div class="log-entry">${log}</div>`)
+          }
+        </div>
+      </div>
+    `;
+  }
+
+  private switchTab(tab: 'daemon' | 'system'): void {
+    this.activeTab = tab;
+    this.scrollToBottom();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+
+    // Auto-scroll when logs change
+    if (changedProperties.has('daemonLogs') || changedProperties.has('systemLogs')) {
+      this.scrollToBottom();
+    }
+  }
+
+  private scrollToBottom(): void {
+    requestAnimationFrame(() => {
+      const content = this.shadowRoot?.getElementById('logs-content');
+      if (content) {
+        content.scrollTop = content.scrollHeight;
+      }
+    });
+  }
+}