From ba87e5c8df587672e0ec7dc26ed092bcfaa24ec3 Mon Sep 17 00:00:00 2001
From: Kam <erkamyaman35@gmail.com>
Date: Mon, 20 Jul 2026 17:26:35 +0300
Subject: [PATCH] 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.
---
 .../src/assets/angie-magnifying-glass.svg        |  1 +
 .../ng-devtools/src/assets/angie-question.svg    |  1 +
 .../injector-providers.component.html            |  5 ++++-
 .../injector-providers.component.scss            | 16 +++++++++++++++-
 .../injector-tree/injector-tree.component.html   |  7 ++++---
 .../injector-tree/injector-tree.component.scss   | 15 +++++++++++++++
 .../recording-timeline.component.html            | 10 ++++++++--
 .../recording-timeline.component.scss            | 16 +++++++++++++++-
 .../router-tree/router-tree.component.html       |  1 +
 .../router-tree/router-tree.component.scss       |  8 ++++++++
 10 files changed, 72 insertions(+), 8 deletions(-)
 create mode 100644 devtools/projects/ng-devtools/src/assets/angie-magnifying-glass.svg
 create mode 100644 devtools/projects/ng-devtools/src/assets/angie-question.svg

diff --git a/devtools/projects/ng-devtools/src/assets/angie-magnifying-glass.svg b/devtools/projects/ng-devtools/src/assets/angie-magnifying-glass.svg
new file mode 100644
index 000000000000..6565b0101dd4
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/assets/angie-magnifying-glass.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="art" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="105 164 852 757"><defs><style>.cls-1{fill:#0f0f11;}.cls-2{fill:#ac015f;}.cls-3{fill:url(#linear-gradient-2);}.cls-4{fill:#d20260;}.cls-5{fill:#fff;}.cls-6{fill:url(#linear-gradient-6);opacity:.5;}.cls-7{fill:#e90464;}.cls-8{fill:url(#linear-gradient-4);}.cls-9{stroke:#eadbe7;stroke-width:68.81px;}.cls-9,.cls-10{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-11{fill:url(#radial-gradient);}.cls-12{fill:#eadbe7;}.cls-13{fill:url(#linear-gradient-3);}.cls-14{fill:url(#linear-gradient-5);}.cls-15{fill:#940054;}.cls-16{fill:#303033;}.cls-17{fill:#9b005c;}.cls-18{fill:#c8005d;}.cls-10{stroke:#0f0f11;stroke-width:9.65px;}.cls-19{fill:url(#linear-gradient);}.cls-20{fill:#aa0060;}</style><linearGradient id="linear-gradient" x1="457.64" y1="916.55" x2="457.64" y2="747.58" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".36" stop-color="#e8d9e5"/><stop offset=".49" stop-color="#e4d2e1"/><stop offset=".58" stop-color="#dcc6da"/><stop offset=".61" stop-color="#d8c0d6"/></linearGradient><linearGradient id="linear-gradient-2" x1="722.15" y1="170.58" x2="722.15" y2="456.18" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e90464"/><stop offset=".17" stop-color="#e10362"/><stop offset=".58" stop-color="#d50260"/><stop offset="1" stop-color="#d20260"/></linearGradient><linearGradient id="linear-gradient-3" x1="358.94" y1="290.13" x2="626.28" y2="753.19" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f637e3"/><stop offset="0" stop-color="#f535de"/><stop offset=".08" stop-color="#f228bd"/><stop offset=".15" stop-color="#ef1ca1"/><stop offset=".23" stop-color="#ec138a"/><stop offset=".33" stop-color="#eb0c79"/><stop offset=".45" stop-color="#e9076d"/><stop offset=".6" stop-color="#e90465"/><stop offset=".99" stop-color="#e90464"/></linearGradient><linearGradient id="linear-gradient-4" x1="673.49" y1="170.58" x2="673.49" y2="825.9" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e90464"/><stop offset=".29" stop-color="#e00362"/><stop offset=".75" stop-color="#c90160"/><stop offset="1" stop-color="#ba005e"/></linearGradient><radialGradient id="radial-gradient" cx="537.08" cy="598.4" fx="537.08" fy="598.4" r="258.54" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".52" stop-color="#e8d8e5"/><stop offset=".76" stop-color="#e3d1e0"/><stop offset=".96" stop-color="#dac4d8"/><stop offset="1" stop-color="#d8c0d6"/></radialGradient><linearGradient id="linear-gradient-5" x1="643.95" y1="916.55" x2="643.95" y2="776.69" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-6" x1="-1256.37" y1="85.65" x2="-1199.83" y2="183.58" gradientTransform="translate(1252.52 1050.71) rotate(35.43)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".17" stop-color="#fff" stop-opacity=".12"/><stop offset=".74" stop-color="#fff" stop-opacity=".54"/><stop offset="1" stop-color="#fff" stop-opacity=".7"/></linearGradient></defs><path class="cls-9" d="M213.01,599.31s52.68,75.87,123.67,33.32"/><path class="cls-19" d="M503.12,904.08c0,6.89-5.59,12.47-12.47,12.47h-38.81s-26.36-45.29-39.69-145.81h0c20.12-27.55,59.9-31.09,84.58-7.53h0c4.09,3.9,6.4,9.31,6.4,14.96v125.92Z"/><path class="cls-7" d="M416.85,862.15h61.79c7.75,0,14.03,6.29,14.03,14.03v1.56c0,21.99-17.86,39.85-39.85,39.85h-2.69c-21.99,0-39.85-17.86-39.85-39.85v-9.04c0-3.62,2.94-6.56,6.56-6.56Z" transform="translate(902.97 1779.74) rotate(-180)"/><path class="cls-3" d="M902.12,424.64l-254.48-240.9c-3.91-3.73-8.76-5.92-13.79-6.49l-59.09-6.67-15.98,28.6-7.78,21.41-21.69,192.03,385.65,43.55c.26-11.77-4.23-23.33-12.85-31.54Z"/><path class="cls-17" d="M734.84,721.19l-225.61,102.42-.33,2.96,50.97,5.76h0c6.75.76,13.68-.09,20.25-2.61l194.68-78.58c7.04-2.76,13.36-7.05,18.61-12.48l-58.56-17.45Z"/><path class="cls-2" d="M914.97,456.18h0c.04-1.77-.04-3.53-.21-5.27l-384.85-43.46,21.1-186.85-233.85,137.98c-14.74,8.76-22.71,26.23-19.89,43.62l48.7,267.64c2.57,14.56,10.69,27.34,22.5,35.4l142.89,99.56-2.12,18.81,236.75-99.1,47.42,14.13c4.68-4.84,8.51-10.59,11.22-17.01l107.16-250.03c2.03-5,3.07-10.23,3.18-15.42Z"/><path class="cls-13" d="M574.76,170.58c-4.87-.55-9.93.52-14.44,3.3l-293.05,179.06c-14.31,8.81-22.1,26.3-19.43,43.67l46.25,267.36c2.43,14.55,10.26,27.29,21.68,35.31l166.48,119.37c5.65,3.9,12,6.25,18.53,6.99l73.98-655.06Z"/><path class="cls-8" d="M500.78,825.64c6.53.74,13.25-.14,19.63-2.68l188.91-79.24c12.92-5.27,23.39-15.95,29.01-29.58l104.71-250.31c6.48-16.34,2.79-35.13-9.2-46.9l-245.73-239.91c-3.78-3.71-8.47-5.88-13.34-6.44l-73.98,655.06Z"/><path class="cls-15" d="M354.17,667.39c5.7-2.26,14.49-5.68,23.29-9.1-4.58-3.42-7.73-8.71-8.68-14.76l-24.14-153.09c-3.35-21.25,16.7-38.06,34.47-29.47l-17.31-9.32c-20.16-10.86-43.51,8.24-39.69,32.47l27.04,171.43c.7,4.43,2.47,8.48,5.03,11.84Z"/><path class="cls-20" d="M377.46,658.29c-8.8,3.42-17.59,6.84-23.29,9.1,1.83,2.4,4.05,4.46,6.63,6.01l147.23,88.1,2.64-23.35-131.47-78.67c-.6-.36-1.17-.76-1.73-1.18Z"/><path class="cls-11" d="M699.67,497.54l-167.04,46.07-152.55-82.16c-18.01-9.7-38.86,7.36-35.44,28.99l24.14,153.09c1.07,6.79,4.89,12.64,10.41,15.94l131.47,78.67,145.71-47.37c6.12-1.99,11.15-6.84,13.7-13.22l57.68-143.85c8.15-20.33-8.37-41.61-28.08-36.17Z"/><path class="cls-15" d="M679,704.07c-5.05-3.47-12.86-8.77-20.68-14.06,5.23-2.31,9.48-6.77,11.75-12.45l57.68-143.85c8-19.96-7.79-40.82-27.03-36.42l18.95-5.23c22.08-6.09,40.58,17.74,31.45,40.5l-64.59,161.09c-1.67,4.16-4.3,7.72-7.54,10.42Z"/><path class="cls-20" d="M658.32,690.01c7.82,5.29,15.62,10.59,20.68,14.06-2.32,1.94-4.95,3.45-7.8,4.38l-163.17,53.05,2.64-23.35,145.71-47.37c.67-.22,1.31-.48,1.95-.76Z"/><path class="cls-14" d="M599.31,821.46c13.7,90.52,38.22,95.09,38.22,95.09h38.81c6.89,0,12.47-5.59,12.47-12.47v-118.11c0-2.52-1.69-4.72-4.12-5.38l-5.53-1.49c-24.81-6.66-51.28.72-69.07,19.25l-5.16,5.37c-4.53,4.72-6.6,11.27-5.62,17.73Z"/><path class="cls-7" d="M602.55,862.15h61.79c7.75,0,14.03,6.29,14.03,14.03v1.56c0,21.99-17.86,39.85-39.85,39.85h-2.69c-21.99,0-39.85-17.86-39.85-39.85v-9.04c0-3.62,2.94-6.56,6.56-6.56Z" transform="translate(1274.36 1779.74) rotate(-180)"/><path class="cls-18" d="M607.84,575.32l-13.58-5.97c-6.14-2.7-9.01-10.34-6.41-17.07h0c2.6-6.73,9.68-10,15.81-7.3l13.58,5.97c6.14,2.7,9.01,10.34,6.41,17.07h0c-2.6,6.73-9.68,10-15.81,7.3Z"/><ellipse class="cls-1" cx="454.01" cy="604.46" rx="29.11" ry="16.53" transform="translate(-197.49 987.91) rotate(-83.57)"/><path class="cls-18" d="M451.75,557.73l14.57-2.79c6.58-1.26,11.08-8.07,10.05-15.21h0c-1.03-7.14-7.21-11.9-13.79-10.64l-14.57,2.79c-6.58,1.26-11.08,8.07-10.05,15.21h0c1.03,7.14,7.21,11.9,13.79,10.64Z"/><rect class="cls-15" x="506.92" y="644.17" width="25.32" height="38.81" rx="12.66" ry="12.66" transform="translate(81.18 -56.22) rotate(6.72)"/><path class="cls-9" d="M821.71,620.84c17.17,36.82,42.87,69.63,74.51,95.12"/><path class="cls-7" d="M924.24,693.59s-5.53-5.41-14.31-13.35c-.05-.04-22.07-18.85-45.73-10.04-7.06,2.63-12.71,8.19-15.44,15.2-9.18,23.51,9.29,45.81,9.33,45.86,0,0,0,0,0,0,0,8.95,1.39,30.88,14.54,34.75,4.68,1.37,8.57-1.18,11.74-5.57.97.98,1.93,1.94,2.89,2.87,35.36,34.21,87.95-17.54,54.28-53.42-4.88-5.2-10.6-10.64-17.29-16.3Z"/><path class="cls-10" d="M575.75,623.19c10.14-12.66,27.57-17.94,42.37-12.83"/><path class="cls-4" d="M169.87,598.03s4.25,6.47,11.11,16.12c.04.05,17.51,23.15,42.52,19.6,7.46-1.06,14.17-5.29,18.35-11.56,14.02-21.03.77-46.78.73-46.84,0,0,0,0,0,0,1.92-8.75,5.28-30.5-6.74-37.09-4.28-2.35-8.62-.67-12.66,2.93-.74-1.17-1.47-2.32-2.2-3.42-27.19-41.02-89.68-1.66-64.49,40.63,3.65,6.13,8.07,12.67,13.39,19.64Z"/><circle class="cls-6" cx="173.74" cy="448.55" r="56.53" transform="translate(-296.91 349.21) rotate(-56.91)"/><rect class="cls-12" x="196.63" y="502.29" width="13.79" height="47.04" transform="translate(-178.43 111.07) rotate(-21.48)"/><path class="cls-16" d="M236.49,607.37h0c-7.98,3.14-16.99-.78-20.13-8.76l-22.57-67.44c-.57-1.65.26-3.46,1.88-4.09l15.97-6.29c1.62-.64,3.46.12,4.17,1.71l29.45,64.73c3.14,7.98-.78,16.99-8.76,20.14Z"/><path class="cls-12" d="M150.99,392.35c-31.85,12.53-47.51,48.51-34.97,80.36,12.53,31.85,48.51,47.5,80.36,34.97,31.85-12.53,47.51-48.51,34.97-80.36-12.53-31.85-48.51-47.51-80.36-34.97ZM192.4,496.59c-25.79,10.15-54.93-2.53-65.08-28.32-10.15-25.79,2.53-54.93,28.32-65.08s54.93,2.53,65.08,28.32c10.15,25.79-2.53,54.93-28.32,65.08Z"/><rect class="cls-5" x="131.68" y="428.38" width="23.04" height="13.85" rx="6.92" ry="6.92" transform="translate(-313.09 392.92) rotate(-66.48)"/></svg>
\ No newline at end of file
diff --git a/devtools/projects/ng-devtools/src/assets/angie-question.svg b/devtools/projects/ng-devtools/src/assets/angie-question.svg
new file mode 100644
index 000000000000..cb0db0de9342
--- /dev/null
+++ b/devtools/projects/ng-devtools/src/assets/angie-question.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg id="art" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="196 156 684 782"><defs><style>.cls-1{fill:#0f0f11;}.cls-2{fill:url(#linear-gradient-2);}.cls-3{fill:#d20260;}.cls-4{fill:#e90464;}.cls-5{fill:url(#linear-gradient-4);}.cls-6{stroke:#eadbe7;stroke-width:68.81px;}.cls-6,.cls-7{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-8{fill:url(#radial-gradient);}.cls-9{fill:url(#linear-gradient-3);}.cls-10{fill:url(#linear-gradient-5);}.cls-11{fill:#940054;}.cls-12{fill:#c8005d;}.cls-7{stroke:#0f0f11;stroke-width:9.65px;}.cls-13{fill:url(#linear-gradient);}.cls-14{fill:#aa0060;}</style><linearGradient id="linear-gradient" x1="627.64" y1="931.61" x2="627.64" y2="761.82" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".36" stop-color="#e8d9e5"/><stop offset=".49" stop-color="#e4d2e1"/><stop offset=".58" stop-color="#dcc6da"/><stop offset=".61" stop-color="#d8c0d6"/></linearGradient><linearGradient id="linear-gradient-2" x1="434.43" y1="932.65" x2="434.43" y2="763.63" xlink:href="#linear-gradient"/><linearGradient id="linear-gradient-3" x1="340.33" y1="317.33" x2="618.77" y2="799.61" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f637e3"/><stop offset="0" stop-color="#f535de"/><stop offset=".08" stop-color="#f228bd"/><stop offset=".15" stop-color="#ef1ca1"/><stop offset=".23" stop-color="#ec138a"/><stop offset=".33" stop-color="#eb0c79"/><stop offset=".45" stop-color="#e9076d"/><stop offset=".6" stop-color="#e90465"/><stop offset=".99" stop-color="#e90464"/></linearGradient><linearGradient id="linear-gradient-4" x1="694.8" y1="198.3" x2="694.8" y2="856.67" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e90464"/><stop offset=".29" stop-color="#e00362"/><stop offset=".75" stop-color="#c90160"/><stop offset="1" stop-color="#ba005e"/></linearGradient><radialGradient id="radial-gradient" cx="537.18" cy="632.95" fx="537.18" fy="632.95" r="275.44" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eadbe7"/><stop offset=".52" stop-color="#e8d8e5"/><stop offset=".76" stop-color="#e3d1e0"/><stop offset=".96" stop-color="#dac4d8"/><stop offset="1" stop-color="#d8c0d6"/></radialGradient><linearGradient id="linear-gradient-5" x1="776.57" y1="172.36" x2="736.31" y2="311.72" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f637e3"/><stop offset=".26" stop-color="#c73ae3"/><stop offset=".6" stop-color="#8d3fe3"/><stop offset=".86" stop-color="#6942e3"/><stop offset="1" stop-color="#5c44e4"/></linearGradient></defs><path class="cls-6" d="M242.41,674.18c-2.44,5.74-4.92,11.61-5.45,17.83s1.2,12.97,5.95,17.01c4.47,3.81,10.78,4.62,16.65,4.36,13.45-.58,26.63-6.02,36.58-15.09,1.68-1.54,3.36-4.11,1.9-5.86"/><path class="cls-6" d="M802.01,725.43s91.34-36.44,3.59-107.68"/><path class="cls-13" d="M581.93,919.07c0,6.92,5.61,12.53,12.53,12.53h39s26.49-45.51,39.88-146.52h0c-20.22-27.68-60.19-31.24-84.98-7.57h0c-4.11,3.92-6.43,9.35-6.43,15.03v126.52Z"/><path class="cls-4" d="M632.47,876.94h2.7c22.1,0,40.04,17.94,40.04,40.04v1.57c0,7.78-6.32,14.1-14.1,14.1h-62.09c-3.64,0-6.59-2.95-6.59-6.59v-9.08c0-22.1,17.94-40.04,40.04-40.04Z"/><path class="cls-2" d="M489.96,916.23c1.08,6.84-4.59,15.34-11.43,16.42h-40.49s-30.29-50.3-59.28-147.99h0c15.65-30.5,54.58-24.06,82.76-4.54h0c4.67,3.23,7.81,8.23,8.69,13.84l19.74,122.27Z"/><path class="cls-4" d="M402.34,876.94h62.09c7.78,0,14.1,6.32,14.1,14.1v1.57c0,22.1-17.94,40.04-40.04,40.04h-2.7c-22.1,0-40.04-17.94-40.04-40.04v-9.08c0-3.64,2.95-6.59,6.59-6.59Z" transform="translate(874.28 1809.59) rotate(-180)"/><path class="cls-9" d="M554.95,198.3c-5.34-.28-10.76,1.06-15.48,4.08l-306.29,194.88c-14.96,9.58-22.2,27.48-18.09,44.68l68.9,264.5c3.66,14.39,13.06,26.7,26.04,34.08l189.38,110.11c6.41,3.59,13.49,5.59,20.64,5.97l34.89-658.3Z"/><path class="cls-5" d="M520.06,856.6c7.16.38,14.4-.86,21.16-3.75l199.96-89.48c13.69-5.97,24.33-17.21,29.49-31.14l96.48-255.73c5.91-16.67.59-35.23-13.27-46.34l-283.97-226.17c-4.37-3.5-9.62-5.41-14.96-5.7l-34.89,658.3Z"/><path class="cls-11" d="M349.58,706.57c6.04-2.57,15.36-6.47,24.7-10.36-5.22-3.17-9.01-8.28-10.47-14.27l-36.91-151.58c-5.12-21.04,15.51-38.93,35.44-31.32l-19.48-8.36c-22.69-9.74-46.75,10.61-40.91,34.6l41.33,169.74c1.07,4.39,3.28,8.34,6.29,11.55Z"/><path class="cls-14" d="M374.28,696.2c-9.34,3.89-18.66,7.79-24.7,10.36,2.16,2.3,4.72,4.24,7.63,5.64l166.27,79.93,1.24-23.47-148.48-71.38c-.68-.33-1.33-.7-1.96-1.08Z"/><path class="cls-8" d="M713.56,518.02l-178.48,55.15-171.65-73.71c-20.26-8.7-41.75,9.48-36.53,30.9l36.91,151.58c1.64,6.72,6.2,12.35,12.43,15.35l148.48,71.38,155.19-55.28c6.52-2.32,11.65-7.44,13.99-13.95l52.73-146.83c7.45-20.75-12-41.1-33.06-34.59Z"/><path class="cls-11" d="M705.44,725.43c-5.74-3.19-14.59-8.06-23.47-12.92,5.52-2.6,9.84-7.28,11.92-13.08l52.73-146.83c7.32-20.38-11.31-40.35-31.93-34.89l20.25-6.26c23.59-7.29,45.37,15.49,37.02,38.73l-59.04,164.42c-1.53,4.25-4.14,7.94-7.48,10.82Z"/><path class="cls-14" d="M681.98,712.51c8.87,4.86,17.73,9.72,23.47,12.92-2.39,2.06-5.14,3.71-8.18,4.8l-173.79,61.91,1.24-23.47,155.19-55.28c.71-.25,1.39-.55,2.07-.87Z"/><ellipse class="cls-1" cx="608.92" cy="650.7" rx="29.25" ry="18.11" transform="translate(-73.09 1224.33) rotate(-86.97)"/><rect class="cls-12" x="591.95" y="598.54" width="42.54" height="26.4" rx="13.2" ry="13.2" transform="translate(58.22 -53.27) rotate(5.22)"/><ellipse class="cls-1" cx="453.46" cy="642.46" rx="29.25" ry="18.11" transform="translate(-212.1 1061.28) rotate(-86.97)"/><rect class="cls-12" x="431.38" y="567.82" width="42.54" height="26.4" rx="13.2" ry="13.2" transform="translate(1023.59 1046.32) rotate(167.1)"/><path class="cls-4" d="M825.23,754.51s6.6-4.04,16.45-10.61c.05-.04,23.68-16.79,20.92-41.88-.82-7.48-4.83-14.32-10.96-18.69-20.56-14.66-46.71-2.21-46.77-2.18,0,0,0,0,0,0-8.68-2.18-30.29-6.21-37.26,5.6-2.48,4.2-.95,8.6,2.53,12.74-1.19.7-2.36,1.4-3.49,2.1-41.83,25.91-4.49,89.57,38.54,65.7,6.24-3.46,12.91-7.68,20.04-12.78Z"/><path class="cls-3" d="M225.64,628.35s-3.6,6.85-8.7,17.54c-.03.06-11.75,26.55,3.49,46.68,4.55,6.01,11.5,9.82,19.01,10.44,25.19,2.05,41.28-22.03,41.32-22.09,0,0,0,0,0,0,8.58-2.57,29.23-10.18,29.16-23.89-.02-4.88-3.59-7.87-8.71-9.65.66-1.21,1.31-2.41,1.92-3.59,22.67-43.68-42.07-79.22-66.82-36.68-3.59,6.17-7.16,13.21-10.68,21.24Z"/><path class="cls-7" d="M504.99,701.54c14.59-6,30.92-7.68,46.42-4.77"/><path class="cls-10" d="M746.96,252.27c1.22-6.03,3.53-11.03,6.92-14.99,3.39-3.96,8.95-8.16,16.69-12.61,5.44-3.27,9.47-6.14,12.09-8.62,2.62-2.47,4.34-5.75,5.16-9.82,1.03-5.12.14-9.67-2.67-13.65-2.82-3.98-7.24-6.59-13.28-7.81-5.78-1.17-10.78-.37-15.03,2.39-4.25,2.76-7.65,6.41-10.2,10.95l-18.01-12.25c4.22-7.34,10.44-13.32,18.69-17.94,8.24-4.62,17.74-5.84,28.5-3.66,8,1.62,14.83,4.67,20.48,9.16,5.65,4.49,9.63,9.94,11.96,16.35,2.32,6.41,2.77,13.16,1.34,20.25s-4.28,12.56-8.62,16.8-9.8,8.44-16.37,12.57c-5.13,3.06-8.91,6.06-11.34,8.98-2.44,2.92-4.08,6.49-4.93,10.68l-1.15,5.71-21.85-4.42,1.63-8.07ZM737.05,301.79c-2.36-3.55-3.11-7.42-2.26-11.62s3.04-7.44,6.58-9.73c3.54-2.29,7.4-3.01,11.6-2.16,4.2.85,7.45,3.01,9.75,6.48,2.3,3.47,3.03,7.31,2.18,11.51s-3.02,7.48-6.5,9.85c-3.48,2.37-7.33,3.13-11.52,2.28-4.2-.85-7.48-3.05-9.83-6.6Z"/></svg>
\ No newline at end of file
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html
index ae888d4a5329..2185863f638a 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.html
@@ -85,6 +85,9 @@ <h2>Providers for {{ injector().name }}</h2>
       <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>
   }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
index aacc1dd2e9eb..9aca1506db1d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/injector-providers.component.scss
+++ b/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 {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html
index fe9e42621e7b..a8e8b5bb3ed7 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.html
+++ b/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">
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
index 8c3129599394..d6b14b9b0917 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-tree.component.scss
+++ b/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 {
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.html
index 8323aa36937c..cf7fbbba722d 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.html
+++ b/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"
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.scss
index f28ccfde1394..aa703b6633df 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/recording-timeline/recording-timeline.component.scss
+++ b/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;
+  }
 }
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
index 17ee6507b97e..6809dc0bca08 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
+++ b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.html
@@ -241,6 +241,7 @@ <h2 class="router-title">Routes Details</h2>
   </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
diff --git a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss b/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
index ee2a054a4c7d..60235de87047 100644
--- a/devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/router-tree.component.scss
+++ b/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;
+  }
 }