@ipv9/tokentracker-cli 0.39.0

package/dashboard/dist/clawd/status/notification.svg

@@ -0,0 +1,134 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Main body jump and squash/stretch sequence */
+      .body-anim {
+        transform-origin: 7.5px 15px; /* Pivot at the base of the feet */
+        animation: attention-jump 4s infinite ease-in-out;
+      }
+
+      /* Shadow pulsing with jumps */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-pulse 4s infinite ease-in-out;
+      }
+
+      /* Eye movement (looking right, then front, blinking) */
+      .eyes-look {
+        transform-origin: 7.5px 9px;
+        animation: eye-track 4s infinite ease-in-out;
+      }
+
+      /* Arm flapping/waving */
+      .arm-l {
+        transform-origin: 1px 10px; /* Left shoulder */
+        animation: arm-wave-l 4s infinite ease-in-out;
+      }
+      .arm-r {
+        transform-origin: 14px 10px; /* Right shoulder */
+        animation: arm-wave-r 4s infinite ease-in-out;
+      }
+
+      /* Notification startle pop */
+      .alert-pop {
+        transform-origin: 15px 0px;
+        animation: alert-flash 4s infinite ease-in-out;
+        opacity: 0;
+      }
+
+      /* --- Keyframes --- */
+
+      /* 4 Second Loop Sequence */
+      @keyframes attention-jump {
+        0%, 12% { transform: translate(0px, 0px) scale(1, 1); }
+        /* Startle (Look right, recoil slightly) */
+        14%, 22% { transform: translate(-1.5px, 0px) scale(1, 1); }
+        /* Turn front, squash down to prepare jump */
+        26% { transform: translate(0px, 2px) scale(1.1, 0.9); }
+        /* Rapid Jumps to get attention */
+        30% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 1 */
+        34% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 1 */
+        38% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 2 */
+        42% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 2 */
+        46% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 3 */
+        50% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 3 */
+        54% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 4 */
+        58% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 4 */
+        62% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 5 */
+        66% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 5 */
+        70% { transform: translate(0px, -10px) scale(0.95, 1.05); } /* Jump 6 */
+        74% { transform: translate(0px, 2px) scale(1.1, 0.9); }     /* Land 6 */
+        /* Recover */
+        80%, 100% { transform: translate(0px, 0px) scale(1, 1); }
+      }
+
+      @keyframes shadow-pulse {
+        0%, 12%, 80%, 100% { transform: scale(1); opacity: 0.5; }
+        14%, 22% { transform: translate(-1.5px, 0px) scale(1); opacity: 0.5; }
+        26%, 34%, 42%, 50%, 58%, 66%, 74% { transform: scale(1.15); opacity: 0.6; } /* Landing wide */
+        30%, 38%, 46%, 54%, 62%, 70% { transform: scale(0.6); opacity: 0.15; } /* Jumping high */
+      }
+
+      @keyframes eye-track {
+        0%, 12% { transform: translate(0px, 0px); }
+        14%, 22% { transform: translate(4px, 0px); } /* Sharp look right */
+        26%, 100% { transform: translate(0px, 0px); } /* Look at camera */
+      }
+
+      @keyframes arm-wave-l {
+        0%, 12% { transform: rotate(0deg); }
+        14%, 22% { transform: rotate(-15deg); } /* Slight recoil tuck */
+        26% { transform: rotate(30deg); } /* Wind up */
+        30%, 38%, 46%, 54%, 62%, 70% { transform: rotate(155deg); } /* Arms up and out! */
+        34%, 42%, 50%, 58%, 66%, 74% { transform: rotate(115deg); } /* Flap inwards */
+        80%, 100% { transform: rotate(0deg); }
+      }
+
+      @keyframes arm-wave-r {
+        0%, 12% { transform: rotate(0deg); }
+        14%, 22% { transform: rotate(-25deg); } /* Slight recoil tuck */
+        26% { transform: rotate(-30deg); } /* Wind up */
+        30%, 38%, 46%, 54%, 62%, 70% { transform: rotate(-155deg); } /* Arms up and out! */
+        34%, 42%, 50%, 58%, 66%, 74% { transform: rotate(-115deg); } /* Flap inwards */
+        80%, 100% { transform: rotate(0deg); }
+      }
+
+      @keyframes alert-flash {
+        0%, 12% { opacity: 0; transform: translate(15px, 0px) scale(0.5); }
+        14% { opacity: 1; transform: translate(15px, -4px) scale(1.2); }
+        22% { opacity: 1; transform: translate(15px, -4px) scale(1); }
+        26%, 100% { opacity: 0; transform: translate(15px, -8px) scale(0.8); }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored: entire scene flipped -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <rect id="ground-shadow" class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+    <g class="alert-pop" fill="#FF3D00">
+      <rect x="0" y="0" width="2" height="4" />
+      <rect x="0" y="5" width="2" height="2" />
+    </g>
+
+    <g class="body-anim">
+      <g id="body-color-group" fill="#DE886D">
+        <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
+        <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
+        <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
+        <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+        <rect id="torso" x="2" y="6" width="11" height="7"/>
+        <g class="arm-l">
+          <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+        </g>
+        <g class="arm-r">
+          <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+        </g>
+      </g>
+      <g class="eyes-look" fill="#000000">
+        <rect id="left-eye" x="4" y="8" width="1" height="2"/>
+        <rect id="right-eye" x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/working/building.svg

@@ -0,0 +1,231 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Heavy bouncing animation for the body */
+      .body-bounce {
+        transform-origin: 7.5px 15px;
+        animation: hammer-bounce 1s infinite;
+      }
+
+      /* Ground shadow pulsing on impact */
+      .shadow-pulse {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-impact 1s infinite;
+      }
+
+      /* Left arm resting with slight movement */
+      .arm-l-rest {
+        transform-origin: 2px 10px;
+        animation: arm-rest 1s infinite;
+      }
+
+      /* Right arm swinging the hammer */
+      .arm-hammer {
+        transform-origin: 14px 10px; /* Shoulder joint */
+        animation: hammer-swing 1s infinite;
+      }
+
+      /* Eyes squinting on impact */
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: hammer-eyes 1s infinite;
+      }
+
+      /* Spark particles */
+      .spark {
+        opacity: 0;
+      }
+      .s1 { animation: spark-1 1s infinite; }
+      .s2 { animation: spark-2 1s infinite; }
+      .s3 { animation: spark-3 1s infinite; }
+      
+      /* Sweat drop flying off */
+      .sweat {
+        opacity: 0;
+        animation: sweat-fly 1s infinite cubic-bezier(.25,.1,.25,1);
+      }
+      
+      /* Glowing hot metal cooling and heating up */
+      .hot-metal {
+        animation: metal-glow 1s infinite;
+      }
+
+      /* Keyframes */
+      @keyframes hammer-bounce {
+        0%, 100% { transform: scale(1, 1) translateY(0); } /* Base */
+        30% { transform: scale(0.95, 1.05) translateY(-2px); } /* Peak raise (anticipation) */
+        45% { transform: scale(1, 1) translateY(0); } /* Falling */
+        50% { transform: scale(1.15, 0.85) translateY(2px); } /* Hard impact squash */
+        70% { transform: scale(1, 1) translateY(0); } /* Recover */
+      }
+
+      @keyframes shadow-impact {
+        0%, 45%, 70%, 100% { transform: scale(1); opacity: 0.5; }
+        30% { transform: scale(0.8); opacity: 0.3; } /* Lighter when raised */
+        50% { transform: scale(1.3); opacity: 0.8; } /* Heavy and wide on impact */
+      }
+
+      @keyframes arm-rest {
+        0%, 100% { transform: rotate(0deg); }
+        30% { transform: rotate(15deg); }
+        50% { transform: rotate(-5deg); }
+      }
+
+      @keyframes hammer-swing {
+        0%, 100% { transform: rotate(15deg); }
+        30% { transform: rotate(-45deg); } /* Arm raised back */
+        45% { transform: rotate(40deg); } /* Swinging down fast */
+        50% { transform: rotate(125deg); } /* Striking the anvil */
+        70% { transform: rotate(15deg); }
+      }
+
+      @keyframes hammer-eyes {
+        0%, 40% { transform: scaleY(1); } /* Open */
+        48%, 60% { transform: scaleY(0.1); } /* Squeezed shut on impact */
+        65%, 100% { transform: scaleY(1); } /* Open again */
+      }
+      
+      @keyframes metal-glow {
+        0%, 49% { fill: #FF5252; }
+        50%, 60% { fill: #FFF59D; } /* Flashes white/yellow hot on hit */
+        100% { fill: #FF5252; }
+      }
+
+      /* Sweat drop flies back and fades */
+      @keyframes sweat-fly {
+        0% { transform: translate(0, 0) scale(0); opacity: 0; }
+        30% { transform: translate(0, 0) scale(1); opacity: 1; }
+        80% { transform: translate(-6px, -6px) scale(0.8); opacity: 0; }
+        100% { opacity: 0; }
+      }
+
+      /* Sparks flying outwards from the impact zone */
+      @keyframes spark-1 {
+        0%, 49% { transform: translate(0, 0) scale(0); opacity: 0; }
+        50% { transform: translate(0, 0) scale(1); opacity: 1; }
+        70% { transform: translate(4px, -6px) scale(0); opacity: 0; }
+        100% { opacity: 0; }
+      }
+      @keyframes spark-2 {
+        0%, 49% { transform: translate(0, 0) scale(0); opacity: 0; }
+        50% { transform: translate(0, 0) scale(1); opacity: 1; }
+        70% { transform: translate(7px, -1px) scale(0); opacity: 0; }
+        100% { opacity: 0; }
+      }
+      @keyframes spark-3 {
+        0%, 49% { transform: translate(0, 0) scale(0); opacity: 0; }
+        50% { transform: translate(0, 0) scale(1); opacity: 1; }
+        70% { transform: translate(3px, 3px) scale(0); opacity: 0; }
+        100% { opacity: 0; }
+      }
+    </style>
+
+    <!-- Pixel Spark -->
+    <g id="pixel-spark">
+      <rect x="0" y="0" width="1" height="1" />
+    </g>
+  </defs>
+
+  <!-- Ground Shadows -->
+  <rect id="ground-shadow" class="shadow-pulse" x="3" y="15" width="9" height="1" fill="#000000"/>
+  <rect id="work-shadow" x="16" y="15" width="7" height="1" fill="#000000" opacity="0.4"/>
+
+  <!-- Metal Block / Anvil being hit -->
+  <g id="work-piece" transform="translate(17, 13)">
+    <!-- Base -->
+    <rect x="0" y="2" width="5" height="1" fill="#546E7A" />
+    <!-- Main block -->
+    <rect x="1" y="0" width="3" height="2" fill="#78909C" />
+    <!-- Glowing hot piece on top -->
+    <rect x="1.5" y="-0.5" width="2" height="1" class="hot-metal" />
+  </g>
+
+  <!-- Impact Sparks (Positioned near the hammer's strike point) -->
+  <g fill="#FFC107" transform="translate(19, 12.5)">
+    <use href="#pixel-spark" class="spark s1" />
+    <use href="#pixel-spark" class="spark s2" />
+    <use href="#pixel-spark" class="spark s3" />
+  </g>
+
+  <!-- Animated Character Body -->
+  <g class="body-bounce">
+    
+    <!-- Sweat Drop (Positioned near the side of the head) -->
+    <g transform="translate(1, 8)">
+      <g class="sweat" fill="#40C4FF">
+        <rect x="0" y="1" width="1.5" height="1.5"/>
+        <rect x="0.25" y="0" width="1" height="1"/>
+      </g>
+    </g>
+
+    <!-- Hard Hat -->
+    <g id="hard-hat">
+      <!-- Ridges top (y=1) -->
+      <rect x="4" y="1" width="2" height="1" fill="#FBC02D"/>
+      <rect x="9" y="1" width="2" height="1" fill="#FBC02D"/>
+
+      <!-- Upper Dome (y=2) -->
+      <rect x="3" y="2" width="1" height="1" fill="#F9A825"/>
+      <rect x="4" y="2" width="2" height="1" fill="#FBC02D"/>
+      <rect x="6" y="2" width="1" height="1" fill="#F9A825"/>
+      <rect x="7" y="2" width="1" height="1" fill="#FBC02D"/>
+      <rect x="8" y="2" width="1" height="1" fill="#F9A825"/>
+      <rect x="9" y="2" width="2" height="1" fill="#FBC02D"/>
+      <rect x="11" y="2" width="1" height="1" fill="#F9A825"/>
+      
+      <!-- Mid Dome (y=3) -->
+      <rect x="2" y="3" width="1" height="1" fill="#F9A825"/>
+      <rect x="3" y="3" width="3" height="1" fill="#FBC02D"/>
+      <rect x="6" y="3" width="1" height="1" fill="#F9A825"/>
+      <rect x="7" y="3" width="1" height="1" fill="#FBC02D"/>
+      <rect x="8" y="3" width="1" height="1" fill="#F9A825"/>
+      <rect x="9" y="3" width="3" height="1" fill="#FBC02D"/>
+      <rect x="12" y="3" width="1" height="1" fill="#F9A825"/>
+
+      <!-- Lower Dome / Brim top (y=4) -->
+      <rect x="1" y="4" width="2" height="1" fill="#F9A825"/>
+      <rect x="3" y="4" width="9" height="1" fill="#FBC02D"/>
+      <rect x="12" y="4" width="2" height="1" fill="#F9A825"/>
+
+      <!-- Bottom Band (y=5) -->
+      <rect x="0" y="5" width="15" height="1" fill="#F9A825"/>
+    </g>
+
+    <!-- Body Base Color Group -->
+    <g id="body-color-group" fill="#DE886D">
+      <!-- Static Legs -->
+      <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
+      <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
+      <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
+      <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+
+      <!-- Main Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      
+      <!-- Resting Left Arm -->
+      <g class="arm-l-rest">
+        <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      </g>
+
+      <!-- Hammer-Swinging Right Arm -->
+      <g class="arm-hammer">
+        <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+        
+        <!-- Tiny Pixel Hammer -->
+        <g id="hammer">
+          <!-- Handle -->
+          <rect x="13.5" y="4" width="1" height="6" fill="#795548" />
+          <!-- Head -->
+          <rect x="12.5" y="3" width="3" height="2" fill="#9E9E9E" />
+        </g>
+      </g>
+    </g>
+    
+    <!-- Eyes Color Group (Determined / Straining) -->
+    <g class="eyes-blink" fill="#000000">
+      <rect id="left-eye" x="4" y="8.5" width="1.5" height="1.5"/>
+      <rect id="right-eye" x="9.5" y="8.5" width="1.5" height="1.5"/>
+    </g>
+    
+  </g>
+</svg>

package/dashboard/dist/clawd/working/carrying.svg

@@ -0,0 +1,107 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Straining body trembling and squashing under weight */
+      .body-carry {
+        transform-origin: 7.5px 15px; /* Pivot at the base of the feet */
+        animation: carry-strain 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Heavy Data Block shaking */
+      .data-block {
+        animation: block-shake 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Trembling legs */
+      .leg {
+        transform-box: fill-box;
+        transform-origin: top center;
+      }
+      .leg-1 { animation: tremble-1 0.1s infinite linear; }
+      .leg-2 { animation: tremble-2 0.1s infinite linear; }
+
+      /* Sweat drop flying off */
+      .sweat {
+        opacity: 0;
+        animation: sweat-fly 2s infinite cubic-bezier(.25,.1,.25,1);
+      }
+
+      /* Ground shadow shifting */
+      .shadow-carry {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-strain 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Keyframes */
+      @keyframes carry-strain {
+        0% { transform: translateY(1px) scale(1.05, 0.95); }
+        100% { transform: translateY(2px) scale(1.08, 0.92); } /* Heavy squash */
+      }
+
+      @keyframes shadow-strain {
+        0% { transform: scale(1.1); opacity: 0.6; }
+        100% { transform: scale(1.15); opacity: 0.7; }
+      }
+
+      @keyframes block-shake {
+        0% { transform: translate(0, 0) rotate(-0.5deg); }
+        100% { transform: translate(0, 1px) rotate(0.5deg); }
+      }
+
+      /* Trembling legs under weight */
+      @keyframes tremble-1 {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX(-0.5px); }
+      }
+      @keyframes tremble-2 {
+        0%, 100% { transform: translateX(0); }
+        50% { transform: translateX(0.5px); }
+      }
+
+      /* Sweat drop flies back and fades */
+      @keyframes sweat-fly {
+        0% { transform: translate(0, 0) scale(0); opacity: 0; }
+        10% { transform: translate(0, 0) scale(1); opacity: 1; }
+        40% { transform: translate(-8px, -4px) scale(0.8); opacity: 0; }
+        100% { opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored: entire scene flipped -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <rect id="ground-shadow" class="shadow-carry" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+    <g class="body-carry">
+      <g class="data-block" transform="translate(1, -5)">
+        <rect x="0" y="0" width="13" height="9" fill="#90A4AE"/>
+        <rect x="1" y="1" width="11" height="7" fill="#CFD8DC"/>
+        <rect x="2" y="2" width="2" height="2" fill="#0082FC"/>
+        <rect x="9" y="2" width="2" height="2" fill="#FFC107"/>
+        <rect x="3" y="5" width="7" height="2" fill="#B0BEC5"/>
+      </g>
+
+      <g transform="translate(-1, 5)">
+        <g class="sweat" fill="#40C4FF">
+          <rect x="0" y="1" width="1.5" height="1.5"/>
+          <rect x="0.25" y="0" width="1" height="1"/>
+        </g>
+      </g>
+
+      <g id="body-color-group" fill="#DE886D">
+        <rect id="outer-left-leg" class="leg leg-1" x="3" y="13" width="1" height="2"/>
+        <rect id="inner-left-leg" class="leg leg-2" x="5" y="13" width="1" height="2"/>
+        <rect id="inner-right-leg" class="leg leg-1" x="9" y="13" width="1" height="2"/>
+        <rect id="outer-right-leg" class="leg leg-2" x="11" y="13" width="1" height="2"/>
+        <rect id="torso" x="2" y="6" width="11" height="7"/>
+        <rect id="left-arm" x="0" y="4" width="2" height="4" />
+        <rect id="right-arm" x="13" y="4" width="2" height="4" />
+      </g>
+
+      <g fill="#000000">
+        <rect id="left-eye" x="4" y="6.5" width="1" height="1"/>
+        <rect id="right-eye" x="10" y="6" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/working/conducting.svg

@@ -0,0 +1,118 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Smooth, graceful body bobbing */
+      .body-bob {
+        transform-origin: 7.5px 15px; /* Pivot at the base of the feet */
+        animation: bob 2s infinite ease-in-out;
+      }
+
+      /* Ground shadow pulsing softly */
+      .shadow-bob {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-soft 2s infinite ease-in-out;
+      }
+
+      /* Conductor arms waving smoothly */
+      .arm-l-conduct {
+        transform-origin: 1px 10px; /* Shoulder joint */
+        animation: conduct-l 2s infinite ease-in-out;
+      }
+      .arm-r-conduct {
+        transform-origin: 14px 10px; /* Shoulder joint */
+        animation: conduct-r 2s infinite ease-in-out;
+      }
+
+      /* Flowing data stream */
+      .pixel-stream {
+        opacity: 0;
+        animation: stream-flow 2s infinite linear;
+      }
+      .p1 { animation-delay: 0s; color: #0082FC; }
+      .p2 { animation-delay: 0.4s; color: #FFC107; }
+      .p3 { animation-delay: 0.8s; color: #FF5252; }
+      .p4 { animation-delay: 1.2s; color: #4CAF50; }
+      .p5 { animation-delay: 1.6s; color: #9C27B0; }
+
+      /* Keyframes */
+      @keyframes bob {
+        0%, 100% { transform: translateY(0) scale(1, 1); }
+        50% { transform: translateY(1.5px) scale(1.02, 0.98); } /* Gentle squash */
+      }
+
+      @keyframes shadow-soft {
+        0%, 100% { transform: scale(1); opacity: 0.4; }
+        50% { transform: scale(1.05); opacity: 0.5; }
+      }
+
+      /* Left arm swoops up, then down */
+      @keyframes conduct-l {
+        0%, 100% { transform: rotate(15deg); }
+        50% { transform: rotate(85deg); }
+      }
+
+      /* Right arm swoops down, then up (out of phase) */
+      @keyframes conduct-r {
+        0%, 100% { transform: rotate(-85deg); }
+        50% { transform: rotate(-15deg); }
+      }
+
+      /* Data pixels flow in an arc over the head */
+      @keyframes stream-flow {
+        0% { transform: translate(-2px, 6px) scale(0); opacity: 0; }
+        15% { transform: translate(0px, 1px) scale(1); opacity: 1; }
+        50% { transform: translate(7.5px, -3px) scale(1.5); opacity: 1; } /* Peak of arc */
+        85% { transform: translate(15px, 1px) scale(1); opacity: 1; }
+        100% { transform: translate(17px, 6px) scale(0); opacity: 0; }
+      }
+    </style>
+
+    <!-- Data Pixel -->
+    <g id="data-pixel">
+      <rect x="0" y="0" width="1.5" height="1.5" fill="currentColor"/>
+    </g>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" class="shadow-bob" x="3" y="15" width="9" height="1" fill="#000000"/>
+
+  <!-- Data Stream Arc -->
+  <g>
+    <use href="#data-pixel" class="pixel-stream p1" />
+    <use href="#data-pixel" class="pixel-stream p2" />
+    <use href="#data-pixel" class="pixel-stream p3" />
+    <use href="#data-pixel" class="pixel-stream p4" />
+    <use href="#data-pixel" class="pixel-stream p5" />
+  </g>
+
+  <!-- Animated Character Body -->
+  <g class="body-bob">
+    
+    <!-- Body Base Color Group -->
+    <g id="body-color-group" fill="#DE886D">
+      <!-- Static Legs -->
+      <rect id="outer-left-leg" x="3" y="13" width="1" height="2"/>
+      <rect id="inner-left-leg" x="5" y="13" width="1" height="2"/>
+      <rect id="inner-right-leg" x="9" y="13" width="1" height="2"/>
+      <rect id="outer-right-leg" x="11" y="13" width="1" height="2"/>
+
+      <!-- Main Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      
+      <!-- Waving Arms -->
+      <g class="arm-l-conduct">
+        <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      </g>
+      <g class="arm-r-conduct">
+        <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      </g>
+    </g>
+    
+    <!-- Eyes Color Group (Happily closed / smiling) -->
+    <g fill="#000000">
+      <rect id="left-eye-happy" x="3.5" y="8.5" width="2" height="0.5"/>
+      <rect id="right-eye-happy" x="9.5" y="8.5" width="2" height="0.5"/>
+    </g>
+    
+  </g>
+</svg>