feat(devtools): show Angie on the remaining empty-state screens

Extend the Angie illustrations to the empty states that were still plain
text: the injector providers "No such providers" result, the injector tree
unsupported-version notice, the two profiler timeline placeholders, and the
router tree unsupported-version notice.

Adds the magnifying-glass and question poses as assets; the orthos-back
and sad poses are already in the tree.

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html

@@ -85,6 +85,9 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   } @else {
-    <p class="no-providers-label">No such providers</p>
+    <div class="no-providers-label">
+      <img src="/assets/angie-orthos-back.svg" alt="Angie illustration" />
+      <p>No such providers</p>
+    </div>
   }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss

@@ -82,8 +82,22 @@
   }
 
   .no-providers-label {
-    padding-block: 0.5rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     text-align: center;
+
+    img {
+      height: 150px;
+      width: auto;
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      margin: 0;
+    }
   }
 
   table {

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html

@@ -1,7 +1,8 @@
 @if (!diDebugAPIsAvailable()) {
-  <p class="not-supported">
-    This feature is only available on version 17.0.0 or higher of Angular.
-  </p>
+  <div class="not-supported">
+    <img src="/assets/angie-sad.svg" alt="Angie illustration" />
+    <p>This feature is only available on version 17.0.0 or higher of Angular.</p>
+  </div>
 } @else {
   <div class="wrapper">
     <div class="options">

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss

@@ -7,8 +7,23 @@
   position: relative;
 
   .not-supported {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     padding: 1rem;
     text-align: center;
+
+    img {
+      height: 160px;
+      width: auto;
+      margin-bottom: 1rem;
+    }
+
+    p {
+      margin: 0;
+    }
   }
 
   .wrapper {

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.html

@@ -1,5 +1,8 @@
 @if (!hasFrames() && visualizing()) {
-  <p class="info">There's no information to show.</p>
+  <div class="info">
+    <img src="/assets/angie-question.svg" alt="Angie illustration" />
+    <p>There's no information to show.</p>
+  </div>
 }
 
 @if (hasFrames()) {
@@ -13,7 +16,10 @@
 @let frame = this.frame();
 
 @if (hasFrames() && !frame) {
-  <p class="info">Select a bar to preview a particular change detection cycle.</p>
+  <div class="info">
+    <img src="/assets/angie-magnifying-glass.svg" alt="Angie illustration" />
+    <p>Select a bar to preview a particular change detection cycle.</p>
+  </div>
 } @else if (hasFrames() && frame) {
   <ng-visualizer-controls
     [record]="frame"

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.scss

@@ -6,6 +6,20 @@
 }
 
 .info {
-  margin-top: 16px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   text-align: center;
+
+  img {
+    height: 160px;
+    width: auto;
+    margin-bottom: 0.5rem;
+  }
+
+  p {
+    margin: 0;
+  }
 }

devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html

@@ -241,6 +241,7 @@
   </as-split>
 } @else {
   <div class="unsupported-version">
+    <img src="/assets/angie-sad.svg" alt="Angie illustration" />
     <p>
       Router tree visualization is available for Angular applications using the latest Angular
       20.3.5 release and above. Please upgrade your application to Angular 20.3.5 or newer to use

devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss

@@ -117,4 +117,12 @@
 .unsupported-version {
   width: 50%;
   margin: auto;
+  text-align: center;
+
+  img {
+    display: block;
+    height: 160px;
+    width: auto;
+    margin: 0 auto 1rem;
+  }
 }