perf: Add ram metric

toju-app/src/app/features/settings/settings-modal/debugging-settings/debugging-settings.component.html

@@ -31,6 +31,22 @@
     </div>
   </section>
 
+  @if (isElectron) {
+    <section class="rounded-lg border border-border bg-secondary/20 px-4 py-3">
+      <div class="flex items-center justify-between gap-3">
+        <div class="flex items-center gap-2 text-muted-foreground">
+          <ng-icon
+            name="lucideMemoryStick"
+            class="h-4 w-4"
+          />
+          <span class="text-sm">Process RAM</span>
+        </div>
+        <span class="font-mono text-sm text-foreground">{{ ramLabel() ?? '—' }}</span>
+      </div>
+      <p class="mt-1 text-xs text-muted-foreground">Live total working set from Electron app metrics. Updates every 2 seconds.</p>
+    </section>
+  }
+
   <section class="grid gap-3 sm:grid-cols-3">
     <div class="rounded-lg border border-border bg-secondary/20 p-4">
       <div class="flex items-center gap-2 text-muted-foreground">

toju-app/src/app/features/settings/settings-modal/debugging-settings/debugging-settings.component.ts

@@ -1,19 +1,31 @@
+/* eslint-disable @typescript-eslint/member-ordering */
 import {
   Component,
+  DestroyRef,
   computed,
-  inject
+  inject,
+  signal
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import {
   lucideBug,
   lucideCircleAlert,
   lucideClock3,
+  lucideMemoryStick,
   lucideTrash2,
   lucideTriangleAlert
 } from '@ng-icons/lucide';
+import { interval } from 'rxjs';
+import { startWith, switchMap } from 'rxjs/operators';
 
 import { DebuggingService } from '../../../../core/services/debugging.service';
+import { ElectronBridgeService } from '../../../../core/platform/electron/electron-bridge.service';
+import { formatAppRamLabel } from '../../../../core/platform/electron/electron-app-metrics.rules';
+import { PlatformService } from '../../../../core/platform';
+
+const APP_METRICS_POLL_INTERVAL_MS = 2_000;
 
 @Component({
   selector: 'app-debugging-settings',
@@ -24,6 +36,7 @@ import { DebuggingService } from '../../../../core/services/debugging.service';
       lucideBug,
       lucideCircleAlert,
       lucideClock3,
+      lucideMemoryStick,
       lucideTrash2,
       lucideTriangleAlert
     })
@@ -31,8 +44,13 @@ import { DebuggingService } from '../../../../core/services/debugging.service';
   templateUrl: './debugging-settings.component.html'
 })
 export class DebuggingSettingsComponent {
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly platform = inject(PlatformService);
+  private readonly electronBridge = inject(ElectronBridgeService);
   readonly debugging = inject(DebuggingService);
 
+  readonly isElectron = this.platform.isElectron;
+  readonly ramLabel = signal<string | null>(null);
   readonly enabled = this.debugging.enabled;
   readonly isConsoleOpen = this.debugging.isConsoleOpen;
   readonly entryCount = computed(() => {
@@ -54,6 +72,11 @@ export class DebuggingSettingsComponent {
     return lastEntry ? lastEntry.timeLabel : 'No logs yet';
   });
 
+  constructor() {
+    if (this.isElectron)
+      this.startRamPolling();
+  }
+
   onEnabledChange(event: Event): void {
     const input = event.target as HTMLInputElement;
 
@@ -67,4 +90,26 @@ export class DebuggingSettingsComponent {
   clearLogs(): void {
     this.debugging.clear();
   }
+
+  private startRamPolling(): void {
+    const api = this.electronBridge.getApi();
+
+    if (!api?.getAppMetrics)
+      return;
+
+    interval(APP_METRICS_POLL_INTERVAL_MS)
+      .pipe(
+        startWith(0),
+        switchMap(() => api.getAppMetrics()),
+        takeUntilDestroyed(this.destroyRef)
+      )
+      .subscribe({
+        next: (snapshot) => {
+          this.ramLabel.set(formatAppRamLabel(snapshot));
+        },
+        error: () => {
+          this.ramLabel.set(null);
+        }
+      });
+  }
 }