fix: debugger lagging from too many logs

toju-app/src/app/shared/components/debug-console/debug-console-entry-list/debug-console-entry-list.component.ts

@@ -3,6 +3,7 @@ import {
   ElementRef,
   effect,
   input,
+  output,
   signal,
   viewChild
 } from '@angular/core';
@@ -30,6 +31,7 @@ import { type DebugLogEntry, type DebugLogLevel } from '../../../../core/service
 export class DebugConsoleEntryListComponent {
   readonly entries = input.required<DebugLogEntry[]>();
   readonly autoScroll = input.required<boolean>();
+  readonly entryExpanded = output<void>();
   readonly expandedEntryIds = signal<number[]>([]);
 
   private readonly viewportRef = viewChild<ElementRef<HTMLDivElement>>('viewport');
@@ -52,6 +54,7 @@ export class DebugConsoleEntryListComponent {
       nextExpandedIds.delete(entryId);
     } else {
       nextExpandedIds.add(entryId);
+      this.entryExpanded.emit();
     }
 
     this.expandedEntryIds.set(Array.from(nextExpandedIds));

toju-app/src/app/shared/components/debug-console/debug-console.component.html

@@ -173,10 +173,25 @@
         />
 
         @if (activeTab() === 'logs') {
+          @if (isTruncated()) {
+            <div class="flex items-center justify-between border-b border-border bg-muted/50 px-4 py-1.5">
+              <span class="text-xs text-muted-foreground">
+                Showing latest 500 of {{ filteredEntries().length }} entries
+              </span>
+              <button
+                type="button"
+                class="text-xs font-medium text-primary hover:underline"
+                (click)="toggleShowAllEntries()"
+              >
+                Show all
+              </button>
+            </div>
+          }
           <app-debug-console-entry-list
             class="min-h-0 flex-1 overflow-hidden"
-            [entries]="filteredEntries()"
+            [entries]="visibleEntries()"
             [autoScroll]="autoScroll()"
+            (entryExpanded)="disableAutoScroll()"
           />
         } @else {
           <app-debug-console-network-map

toju-app/src/app/shared/components/debug-console/debug-console.component.ts

@@ -62,6 +62,7 @@ export class DebugConsoleComponent {
   readonly searchTerm = signal('');
   readonly selectedSource = signal('all');
   readonly autoScroll = signal(true);
+  readonly showAllEntries = signal(false);
   readonly panelHeight = this.resizeService.panelHeight;
   readonly panelWidth = this.resizeService.panelWidth;
   readonly panelLeft = this.resizeService.panelLeft;
@@ -77,6 +78,8 @@ export class DebugConsoleComponent {
   readonly sourceOptions = computed(() => {
     return Array.from(new Set(this.entries().map((entry) => entry.source))).sort();
   });
+  private static readonly VISIBLE_ENTRY_LIMIT = 500;
+
   readonly filteredEntries = computed(() => {
     const searchTerm = this.searchTerm().trim()
       .toLowerCase();
@@ -103,6 +106,17 @@ export class DebugConsoleComponent {
       ].some((value) => value.toLowerCase().includes(searchTerm));
     });
   });
+  readonly visibleEntries = computed(() => {
+    const all = this.filteredEntries();
+
+    if (this.showAllEntries() || all.length <= DebugConsoleComponent.VISIBLE_ENTRY_LIMIT)
+      return all;
+
+    return all.slice(-DebugConsoleComponent.VISIBLE_ENTRY_LIMIT);
+  });
+  readonly isTruncated = computed(() => {
+    return !this.showAllEntries() && this.filteredEntries().length > DebugConsoleComponent.VISIBLE_ENTRY_LIMIT;
+  });
   readonly levelCounts = computed<Record<DebugLogLevel, number>>(() => {
     const counts: Record<DebugLogLevel, number> = {
       event: 0,
@@ -119,7 +133,7 @@ export class DebugConsoleComponent {
     return counts;
   });
   readonly visibleCount = computed(() => {
-    return this.filteredEntries().reduce((sum, entry) => sum + entry.count, 0);
+    return this.visibleEntries().reduce((sum, entry) => sum + entry.count, 0);
   });
   readonly badgeCount = computed(() => {
     const counts = this.levelCounts();
@@ -221,8 +235,17 @@ export class DebugConsoleComponent {
     this.autoScroll.update((enabled) => !enabled);
   }
 
+  disableAutoScroll(): void {
+    this.autoScroll.set(false);
+  }
+
   clearLogs(): void {
     this.debugging.clear();
+    this.showAllEntries.set(false);
+  }
+
+  toggleShowAllEntries(): void {
+    this.showAllEntries.update((v) => !v);
   }
 
   startTopResize(event: MouseEvent): void {