- 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/components/InitialSetup.ts

@@ -17,6 +17,7 @@ import '@components/General/Fieldset';
 import '@components/General/Input';
 import '@components/LoadingView';
 import '@components/ProgressSteps';
+import '@components/RelayLogs';
 
 @customElement('arx-initial-setup')
 export class InitialSetup extends LitElement {
@@ -395,8 +396,7 @@ export class InitialSetup extends LitElement {
               <iconify-icon icon="mdi:information"></iconify-icon>
               Relay is running with PID: ${this.relayStatus.pid}
             </p>
-            <pre class="relay-logs">${this.relayStatus.logs.slice(-5).join('\n')}</pre>
-          `,
+            <arx-relay-logs .logs=${this.relayStatus.logs}></arx-relay-logs>`,
           )}
           <p>
             Having trouble? Our team is here to help if you encounter any

src/components/RelayLogs.ts

@@ -0,0 +1,39 @@
+import { ansiToLitHtml } from '@/utils/ansiToLitHtml';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+
+@customElement('arx-relay-logs')
+export class RelayLogs extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      font-family: var(--font-family, "Inter", system-ui, sans-serif);
+      margin: 0 auto;
+      line-height: 1.6;
+      color: var(--color-base-content);
+    }
+
+    .relay-logs {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+      overflow-x: auto;
+      max-height: 200px;
+      padding: 1rem;
+      border: 2px solid var(--color-base-300);
+      border-radius: var(--radius-box);
+      border-radius: var(--radius-md);
+      background-color: var(--color-code-block);
+      color: var(--color-code-block-content);
+    }
+  `;
+
+  @property({ type: Array }) logs: string[] = [];
+
+  override render() {
+    return html`
+      <pre class="relay-logs">${map(this.logs, (log) => ansiToLitHtml(log))}</pre>
+    `;
+  }
+}