tokentracker-cli 0.5.9 → 0.5.12

package/dashboard/dist/clawd/sleep/wake.svg

@@ -0,0 +1,277 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500" shape-rendering="crispEdges">
+  <defs>
+    <style>
+      .once {
+        animation-duration: 1.5s;
+        animation-fill-mode: forwards;
+        animation-iteration-count: 1;
+      }
+
+      .scale-top-left {
+        transform-box: fill-box;
+        transform-origin: top left;
+      }
+
+      .shadow {
+        transform-origin: 7.5px 15.5px;
+        animation-name: shadow-wake;
+        animation-timing-function: linear;
+      }
+
+      .body-motion {
+        transform-origin: 7.5px 15px;
+        animation-name: body-motion;
+        animation-timing-function: cubic-bezier(0.24, 0.8, 0.24, 1);
+      }
+
+      .torso-shift {
+        animation: torso-shift 1.5s linear forwards;
+      }
+
+      .torso-shape {
+        animation: torso-shape 1.5s linear forwards;
+      }
+
+      .arm-left {
+        animation: arm-left 1.5s linear forwards;
+      }
+
+      .arm-right {
+        animation: arm-right 1.5s linear forwards;
+      }
+
+      .leg-shift {
+        animation: leg-shift 1.5s linear forwards;
+      }
+
+      .leg-grow {
+        animation: leg-grow 1.5s linear forwards;
+      }
+
+      .eye-shift {
+        animation: eye-shift 1.5s linear forwards;
+      }
+
+      .eye-shape {
+        animation: eye-shape 1.5s linear forwards;
+      }
+
+      @keyframes shadow-wake {
+        0% {
+          opacity: 0.4;
+          transform: scaleX(1);
+        }
+        20% {
+          opacity: 0.47;
+          transform: scaleX(0.56);
+        }
+        33.333% {
+          opacity: 0.54;
+          transform: scaleX(0.42);
+        }
+        46.667% {
+          opacity: 0.48;
+          transform: scaleX(0.48);
+        }
+        56% {
+          opacity: 0.52;
+          transform: scaleX(0.56);
+        }
+        66.667%, 100% {
+          opacity: 0.5;
+          transform: scaleX(0.5294);
+        }
+      }
+
+      @keyframes body-motion {
+        0% {
+          transform: translate(0, 0) scale(1, 1) rotate(0deg);
+        }
+        6.667% {
+          transform: translate(0, 0.35px) scale(1.03, 0.96) rotate(0deg);
+        }
+        20% {
+          transform: translate(0, -2.6px) scale(0.98, 1.04) rotate(-6deg);
+        }
+        33.333% {
+          transform: translate(0, -4.1px) scale(0.9, 1.22) rotate(2deg);
+        }
+        46.667% {
+          transform: translate(0, -2px) scale(0.95, 1.11) rotate(0deg);
+        }
+        54% {
+          transform: translate(0, -0.55px) scale(1.02, 0.98) rotate(-4deg);
+        }
+        60% {
+          transform: translate(0, -0.2px) scale(0.99, 1.02) rotate(2.5deg);
+        }
+        66.667%, 100% {
+          transform: translate(0, 0) scale(1, 1) rotate(0deg);
+        }
+      }
+
+      @keyframes torso-shift {
+        0% {
+          transform: translate(-1px, 4px);
+        }
+        8% {
+          transform: translate(-0.82px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes torso-shape {
+        0% {
+          transform: scale(1.1818, 0.7143);
+        }
+        8% {
+          transform: scale(1.14, 0.76);
+        }
+        20%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+
+      @keyframes arm-left {
+        0% {
+          transform: translate(-1px, 4px);
+        }
+        8% {
+          transform: translate(-0.8px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes arm-right {
+        0% {
+          transform: translate(1px, 4px);
+        }
+        8% {
+          transform: translate(0.8px, 3.4px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes leg-shift {
+        0% {
+          transform: translate(0, -2px);
+        }
+        8% {
+          transform: translate(0, -1.5px);
+        }
+        20%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes leg-grow {
+        0% {
+          transform: scale(1, 0.25);
+        }
+        8% {
+          transform: scale(1, 0.45);
+        }
+        20%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+
+      @keyframes eye-shift {
+        0% {
+          transform: translate(-0.5px, 4.5px);
+        }
+        6.667% {
+          transform: translate(-0.5px, 4.15px);
+        }
+        10% {
+          transform: translate(-0.2px, 1px);
+        }
+        14% {
+          transform: translate(-0.06px, 0.2px);
+        }
+        20%, 54% {
+          transform: translate(0, 0);
+        }
+        58% {
+          transform: translate(0, 0.5px);
+        }
+        62%, 100% {
+          transform: translate(0, 0);
+        }
+      }
+
+      @keyframes eye-shape {
+        0% {
+          transform: scale(2, 0.2);
+        }
+        6.667% {
+          transform: scale(2.12, 0.12);
+        }
+        10% {
+          transform: scale(1.45, 1.8);
+        }
+        14% {
+          transform: scale(0.92, 1.08);
+        }
+        20%, 54% {
+          transform: scale(1, 1);
+        }
+        58% {
+          transform: scale(1, 0.08);
+        }
+        62% {
+          transform: scale(1, 1.08);
+        }
+        66.667%, 100% {
+          transform: scale(1, 1);
+        }
+      }
+    </style>
+  </defs>
+
+  <rect class="once shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.4"/>
+
+  <g class="once body-motion">
+    <g fill="#DE886D">
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="3" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="5" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="9" y="11" width="1" height="4"/>
+      </g>
+      <g class="once leg-shift">
+        <rect class="once scale-top-left leg-grow" x="11" y="11" width="1" height="4"/>
+      </g>
+    </g>
+
+    <g class="once torso-shift">
+      <rect class="once scale-top-left torso-shape" x="2" y="6" width="11" height="7" fill="#DE886D"/>
+    </g>
+
+    <g class="once arm-left">
+      <rect x="0" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g class="once arm-right">
+      <rect x="13" y="9" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <g fill="#000000">
+      <g class="once eye-shift">
+        <rect class="once scale-top-left eye-shape" x="4" y="8" width="1" height="2"/>
+      </g>
+      <g class="once eye-shift">
+        <rect class="once scale-top-left eye-shape" x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dashboard/dist/clawd/static-base.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" width="300" height="320">
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+  
+  <g id="master-group">
+    <g id="body-color-group" fill="#DE886D">
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      
+      <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"/>
+    </g>
+    
+    <g id="eyes-color-group" 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>
+</svg>

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

@@ -0,0 +1,136 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-anim {
+        animation: body-move 6s infinite ease-in-out;
+      }
+      .eyes-anim {
+        animation: eyes-move 6s infinite ease-in-out;
+      }
+      .eyes-blink {
+        transform-origin: 7.5px 9px;
+        animation: blink 6s infinite linear;
+      }
+      .question-mark {
+        transform-origin: center;
+        animation: question-fade 6s infinite ease-in-out;
+      }
+      .exclamation-mark {
+        transform-origin: center;
+        animation: exclamation-fade 6s infinite ease-in-out;
+      }
+      .ble-icon-group {
+        animation: ble-float 3s infinite ease-in-out;
+      }
+      .ble-shadow {
+        transform-origin: 26px 15.5px;
+        animation: ble-shadow-pulse 3s infinite ease-in-out;
+      }
+      .glow-pulse {
+        transform-origin: 0px 0px;
+        animation: glow 3s infinite ease-in-out;
+      }
+
+      /* Character Upper Body Movement (Simulates Side-to-Side Head/Torso Tilt) */
+      @keyframes body-move {
+        0%, 5% { transform: translate(0px, 0px); }
+        12%, 22% { transform: translate(-1px, 0px); } /* Looks left */
+        29%, 39% { transform: translate(1px, 0px); }  /* Looks right */
+        44% { transform: translate(-1px, 0px); }      /* Quick look left */
+        49% { transform: translate(1px, 0px); }       /* Quick look right */
+        56%, 88% { transform: translate(1px, -1px); } /* Stares up-right */
+        95%, 100% { transform: translate(0px, 0px); }
+      }
+
+      /* Eye Movement for Parallax Directional Looking */
+      @keyframes eyes-move {
+        0%, 5% { transform: translate(0px, 0px); }
+        12%, 22% { transform: translate(-2px, 0px); }
+        29%, 39% { transform: translate(2px, 0px); }
+        44% { transform: translate(-2px, 0px); }
+        49% { transform: translate(2px, 0px); }
+        56%, 88% { transform: translate(3px, -2px); }
+        95%, 100% { transform: translate(0px, 0px); }
+      }
+
+      /* Occasional Blinking */
+      @keyframes blink {
+        0%, 20%, 24%, 60%, 64%, 80%, 84%, 100% { transform: scaleY(1); }
+        22%, 62%, 82% { transform: scaleY(0.1); }
+      }
+
+      /* Confused Question Mark Animation */
+      @keyframes question-fade {
+        0%, 5% { opacity: 0; transform: translate(-4px, 4px) scale(0.5); }
+        12%, 46% { opacity: 1; transform: translate(-4px, 0px) scale(1); }
+        50%, 100% { opacity: 0; transform: translate(-4px, -4px) scale(1.2); }
+      }
+
+      /* Exclamation Mark Animation (Spotting the BLE Icon) */
+      @keyframes exclamation-fade {
+        0%, 50% { opacity: 0; transform: translate(6px, 0px) scale(0.5); }
+        56%, 85% { opacity: 1; transform: translate(6px, -4px) scale(1); }
+        90%, 100% { opacity: 0; transform: translate(6px, -8px) scale(1.2); }
+      }
+
+      /* Floating BLE Icon */
+      @keyframes ble-float {
+        0%, 100% { transform: translate(26px, -3px); }
+        50% { transform: translate(26px, -6px); }
+      }
+
+      /* Floating BLE Shadow */
+      @keyframes ble-shadow-pulse {
+        0%, 100% { transform: scale(1); opacity: 0.3; }
+        50% { transform: scale(0.8); opacity: 0.15; }
+      }
+
+      /* BLE Glow Pulse */
+      @keyframes glow {
+        0%, 100% { transform: scale(1); opacity: 0.4; }
+        50% { transform: scale(1.3); opacity: 0.1; }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored: entire scene flipped -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+    <g id="legs" fill="#DE886D">
+      <rect id="outer-left-leg" x="3" y="12" width="1" height="3"/>
+      <rect id="inner-left-leg" x="5" y="12" width="1" height="3"/>
+      <rect id="inner-right-leg" x="9" y="12" width="1" height="3"/>
+      <rect id="outer-right-leg" x="11" y="12" width="1" height="3"/>
+    </g>
+
+    <g class="body-anim">
+      <g fill="#DE886D">
+        <rect id="torso" x="2" y="6" width="11" height="7"/>
+        <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+        <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      </g>
+      <g class="eyes-anim">
+        <g class="eyes-blink" 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>
+
+    <g class="question-mark" fill="#FFFFFF" opacity="0">
+      <rect x="1" y="0" width="2" height="1"/>
+      <rect x="3" y="1" width="1" height="1"/>
+      <rect x="0" y="1" width="1" height="2"/>
+      <rect x="1" y="3" width="1" height="1"/>
+      <rect x="2" y="4" width="1" height="1"/>
+      <rect x="2" y="6" width="1" height="1"/>
+    </g>
+
+    <g class="exclamation-mark" fill="#0082FC" opacity="0">
+      <rect x="1" y="0" width="1" height="4"/>
+      <rect x="1" y="5" width="1" height="1"/>
+    </g>
+  </g>
+
+</svg>

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

@@ -0,0 +1,94 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-exhausted {
+        transform-origin: 7.5px 15px;
+        animation: heavy-breathe 2.5s infinite ease-in-out;
+      }
+      .arm-fan {
+        transform-origin: 14px 10px;
+        animation: fan-self 0.4s infinite alternate ease-in-out;
+      }
+      .smoke {
+        opacity: 0;
+        animation: puff-smoke 3s infinite ease-out;
+      }
+      .sm1 { animation-delay: 0s; }
+      .sm2 { animation-delay: 1s; }
+      .sm3 { animation-delay: 2s; }
+
+      /* Error warning flash */
+      .error-warning {
+        animation: error-flash 0.8s infinite ease-in-out;
+      }
+
+      @keyframes heavy-breathe {
+        0%, 100% { transform: scale(1, 1) translateY(0); }
+        50% { transform: scale(1.05, 0.9) translateY(1.5px); }
+      }
+      @keyframes fan-self {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(-60deg); }
+      }
+      @keyframes puff-smoke {
+        0% { transform: translate(7.5px, 6px) scale(0.5); opacity: 0; }
+        20% { opacity: 0.6; }
+        100% { transform: translate(7.5px, -15px) scale(2); opacity: 0; }
+      }
+      @keyframes error-flash {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.15; }
+      }
+    </style>
+    <g id="smoke-puff">
+      <rect x="-1" y="-1" width="2" height="2" fill="#B0BEC5" rx="0.5"/>
+      <rect x="0" y="-2" width="2" height="2" fill="#CFD8DC" rx="0.5"/>
+    </g>
+  </defs>
+
+  <rect id="ground-shadow" x="-1" y="15" width="17" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Smoke -->
+  <g>
+    <use href="#smoke-puff" class="smoke sm1"/>
+    <use href="#smoke-puff" class="smoke sm2" transform="translate(-2, 0)"/>
+    <use href="#smoke-puff" class="smoke sm3" transform="translate(2, 0)"/>
+  </g>
+
+  <g class="body-exhausted">
+    <!-- Sploot Legs -->
+    <g fill="#DE886D">
+      <rect x="3" y="9" width="1" height="1"/>
+      <rect x="5" y="9" width="1" height="1"/>
+      <rect x="9" y="9" width="1" height="1"/>
+      <rect x="11" y="9" width="1" height="1"/>
+    </g>
+
+    <!-- Torso Sploot -->
+    <g fill="#DE886D">
+      <rect x="1" y="10" width="13" height="5"/>
+      <rect x="-1" y="13" width="2" height="2"/>
+    </g>
+
+    <!-- Fanning Arm (closer to body) -->
+    <g class="arm-fan">
+      <rect x="13" y="11" width="2" height="2" fill="#DE886D"/>
+    </g>
+
+    <!-- XX Eyes -->
+    <g fill="#000000">
+      <!-- Left X -->
+      <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(45 3.3 13.1)"/>
+      <rect x="3" y="12" width="0.6" height="2.2" transform="rotate(-45 3.3 13.1)"/>
+      <!-- Right X -->
+      <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(45 10.3 13.1)"/>
+      <rect x="10" y="12" width="0.6" height="2.2" transform="rotate(-45 10.3 13.1)"/>
+    </g>
+  </g>
+
+  <!-- Error Warning (flashing) -->
+  <g class="error-warning">
+    <!-- Error text only -->
+    <text x="7.5" y="6" text-anchor="middle" font-family="'Söhne', 'Helvetica Neue', Arial, sans-serif" font-size="3.5" font-weight="700" fill="#FF3B30">ERROR</text>
+  </g>
+</svg>

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>