Major Refactor

package.json

@@ -28,6 +28,7 @@
     "@codemirror/lint": "^6.8.5",
     "@viz-js/viz": "^3.12.0",
     "codemirror": "^6.0.2",
+    "mermaid": "^11.14.0",
     "ngx-json-viewer": "^3.2.1",
     "ngx-markdown": "^21.0.1",
     "ngx-vflow": "^1.16.4",

src/app/app.component.spec.ts

@@ -38,6 +38,7 @@ import {GRAPH_SERVICE} from './core/services/interfaces/graph';
 import {LOCAL_FILE_SERVICE} from './core/services/interfaces/localfile';
 import {SAFE_VALUES_SERVICE} from './core/services/interfaces/safevalues';
 import {STRING_TO_COLOR_SERVICE} from './core/services/interfaces/string-to-color';
+import {THEME_SERVICE} from './core/services/interfaces/theme';
 import {LOCATION_SERVICE} from './core/services/location.service';
 import {SESSION_SERVICE} from './core/services/interfaces/session';
 import {STREAM_CHAT_SERVICE} from './core/services/interfaces/stream-chat';
@@ -55,6 +56,7 @@ import {MockSafeValuesService} from './core/services/testing/mock-safevalues.ser
 import {MockSessionService} from './core/services/testing/mock-session.service';
 import {MockStreamChatService} from './core/services/testing/mock-stream-chat.service';
 import {MockStringToColorService} from './core/services/testing/mock-string-to-color.service';
+import {MockThemeService} from './core/services/testing/mock-theme.service';
 import {MockTraceService} from './core/services/testing/mock-trace.service';
 import {MockUiStateService} from './core/services/testing/mock-ui-state.service';
 import {MockVideoService} from './core/services/testing/mock-video.service';
@@ -193,6 +195,10 @@ describe('AppComponent', () => {
               provide: AGENT_BUILDER_SERVICE,
               useValue: mockAgentBuilderService,
             },
+            {
+              provide: THEME_SERVICE,
+              useClass: MockThemeService,
+            },
           ],
         })
         .compileComponents();

src/app/app.component.ts

@@ -19,7 +19,7 @@ import {ChangeDetectionStrategy, Component} from '@angular/core';
 import { ChatComponent } from './components/chat/chat.component';
 
 @Component({
-    changeDetection: ChangeDetectionStrategy.Eager,
+    changeDetection: ChangeDetectionStrategy.Default,
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss',

src/app/components/add-callback-dialog/add-callback-dialog.component.scss

@@ -42,12 +42,7 @@ mat-form-field {
   margin-top: 8px !important;
 }
 
-.mat-mdc-raised-button.mat-secondary:not([disabled]) {
-  background-color: #8ab4f8;
-}
-
 .callback-info-container {
-  background-color: rgba(138, 180, 248, 0.08);
   border: 1px solid rgba(138, 180, 248, 0.2);
   border-radius: 8px;
   padding: 16px;

src/app/components/add-callback-dialog/add-callback-dialog.component.ts

@@ -44,7 +44,7 @@ export class ImmediateErrorStateMatcher implements ErrorStateMatcher {
 }
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.Default,
   selector: 'app-add-callback-dialog',
   templateUrl: './add-callback-dialog.component.html',
   styleUrl: './add-callback-dialog.component.scss',

src/app/components/add-item-dialog/add-item-dialog.component.scss

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '@angular/material' as mat;
 
 .new-app-title {
   color: var(--mdc-dialog-subhead-color) !important;

src/app/components/add-item-dialog/add-item-dialog.component.ts

@@ -27,14 +27,14 @@ import { Router } from '@angular/router';
 import { AgentNode } from '../../core/models/AgentBuilder';
 import { YamlUtils } from '../../../utils/yaml-utils';
 import { AGENT_SERVICE } from '../../core/services/interfaces/agent';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { SnackbarService } from '../../core/services/snackbar.service';
 import { MatFormField, MatHint } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.Default,
   selector: 'app-add-item-dialog',
   templateUrl: './add-item-dialog.component.html',
   styleUrl: './add-item-dialog.component.scss',
@@ -54,7 +54,7 @@ export class AddItemDialogComponent {
   // TODO: Replace the eval dialogs to use this common dialog component
   protected newAppName = '';
   private agentService = inject(AGENT_SERVICE);
-  private _snackBar = inject(MatSnackBar);
+  private _snackbarService = inject(SnackbarService);
   private router = inject(Router);
 
   isNameValid(): boolean {
@@ -89,15 +89,15 @@ export class AddItemDialogComponent {
 
     // Check validation first
     if (!this.isNameValid()) {
-      this._snackBar.open(
+      this._snackbarService.open(
         'App name must start with a letter or underscore and can only contain letters, digits, and underscores.',
         'OK',
       );
       return;
     }
 
     if (this.data.existingAppNames.includes(trimmedName)) {
-      this._snackBar.open(
+      this._snackbarService.open(
         'App name already exists. Please choose a different name.',
         'OK',
       );
@@ -127,7 +127,7 @@ export class AddItemDialogComponent {
           });
         this.dialogRef.close(true);
       } else {
-        this._snackBar.open('Something went wrong, please try again', 'OK');
+        this._snackbarService.open('Something went wrong, please try again', 'OK');
       }
     });
   }

src/app/components/add-tool-dialog/add-tool-dialog.component.scss

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@use '@angular/material' as mat;
 
 .dialog-title {
   color: var(--mdc-dialog-supporting-text-color) !important;
@@ -29,7 +28,6 @@ mat-dialog-content {
 }
 
 .tool-info-container {
-  background-color: rgba(138, 180, 248, 0.08);
   border: 1px solid rgba(138, 180, 248, 0.2);
   border-radius: 8px;
   padding: 16px;

src/app/components/add-tool-dialog/add-tool-dialog.component.ts

@@ -27,7 +27,7 @@ import { MatIcon } from '@angular/material/icon';
 import { TooltipUtil } from '../../../utils/tooltip-util';
 
 @Component({
-  changeDetection: ChangeDetectionStrategy.Eager,
+  changeDetection: ChangeDetectionStrategy.Default,
   selector: 'app-add-tool-dialog',
   templateUrl: './add-tool-dialog.component.html',
   styleUrl: './add-tool-dialog.component.scss',

src/app/components/agent-structure-graph-dialog/agent-structure-graph-dialog.html

@@ -0,0 +1,84 @@
+<!--
+ Copyright 2026 Google LLC
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<div class="overlay-backdrop"></div>
+<div class="overlay-panel" (mousedown)="onOverlayMouseDown($event)" (click)="onBackdropClick($event)">
+  <div class="overlay-header">
+
+    @if (renderedGraph() && breadcrumbs().length > 0) {
+      <div class="breadcrumb-container">
+        <span>Agent Structure:</span>
+        <button class="breadcrumb-item" disabled>{{ appName }}</button>
+        <mat-icon class="breadcrumb-separator">chevron_right</mat-icon>
+        @for (crumb of breadcrumbs(); track $index) {
+          @if ($index > 0) {
+            <mat-icon class="breadcrumb-separator">chevron_right</mat-icon>
+          }
+          <button
+            class="breadcrumb-item"
+            [class.active]="$index === breadcrumbs().length - 1"
+            (click)="navigateToLevel($index)"
+            [disabled]="$index === breadcrumbs().length - 1">
+            {{ crumb }}
+          </button>
+        }
+      </div>
+    }
+
+    <span style="flex: 1"></span>
+
+    <div class="graph-legend">
+      <span class="legend-item"><span style="color: #42A5F5; font-size: 16px;">✦</span> Agent</span>
+      <span class="legend-item"><span style="color: #9333EA; font-size: 16px;">⊷</span> Workflow</span>
+      <span class="legend-item"><span style="color: #10B981; font-size: 16px;">ƒ</span> Function</span>
+      <span class="legend-item"><span style="color: #F59E0B; font-size: 16px;">⌵</span> Join</span>
+      <span class="legend-item"><span style="color: #6B7280; font-size: 16px;">🔧</span> Tool</span>
+    </div>
+
+    <button mat-icon-button (click)="close.emit()" aria-label="Close">
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+
+  <div class="overlay-content">
+    <div class="graph-container">
+      @if (isLoading()) {
+        <div class="loading-container">
+          <mat-spinner diameter="50"></mat-spinner>
+          <p>Loading agent structure...</p>
+        </div>
+      } @else if (errorMessage()) {
+        <div class="error-container">
+          <mat-icon class="error-icon">error_outline</mat-icon>
+          <p class="error-message">{{ errorMessage() }}</p>
+        </div>
+      } @else if (renderedGraph()) {
+        <div class="svg-container" 
+             [innerHTML]="renderedGraph()"
+             (wheel)="onWheel($event)"
+             (mousedown)="onMouseDown($event)"
+             (mousemove)="onMouseMove($event)"
+             (mouseup)="onMouseUp()"
+             (mouseleave)="onMouseUp()"></div>
+      } @else {
+        <div class="no-graph-container">
+          <mat-icon class="large-icon">account_tree</mat-icon>
+          <p>Agent structure graph not available.</p>
+        </div>
+      }
+    </div>
+  </div>
+</div>