- Convert ANSI-formatted relay logs to HTML for cleaner visualization in initial setup screen

- Add relay logs section to settings interface for improved accessibility

src/routes/Settings.ts

@@ -12,6 +12,7 @@ import '@components/General/Button';
 import '@components/General/Card';
 import '@components/General/Fieldset';
 import '@components/General/Input';
+import '@components/RelayLogs';
 
 @customElement('arx-settings')
 export class EveSettings extends LitElement {
@@ -61,11 +62,22 @@ export class EveSettings extends LitElement {
   @state() private profile: NDKUserProfile | undefined;
   @state() private error: string | undefined;
   @state() private darkMode = false;
+  @state() private relayStatus: { running: boolean; pid: number | null; logs: string[] } = {
+    running: false,
+    pid: null,
+    logs: [],
+  };
+
+  private async updateRelayStatus() {
+    this.relayStatus = await window.relay.getStatus();
+    if (this.relayStatus.running) setTimeout(() => this.updateRelayStatus(), 2000);
+  }
 
   protected override async firstUpdated() {
     try {
       this.profile = await getUserProfile();
       this.darkMode = localStorage.getItem('darkMode') === 'true';
+      this.updateRelayStatus();
       this.loading = false;
     } catch (err) {
       this.error = 'Failed to load profile';
@@ -176,6 +188,14 @@ export class EveSettings extends LitElement {
         >
         </arx-button>
       </arx-card>
+      <arx-card>
+        <arx-fieldset legend="Relay">
+          <p>
+            ${this.relayStatus.running ? `Relay is running. PID: ${this.relayStatus.pid}` : 'Relay is not running'}
+          </p>
+          <arx-relay-logs .logs=${this.relayStatus.logs}></arx-relay-logs>
+        </arx-fieldset>
+      </arx-card>
     `;
   }
 }