tokentracker-cli 0.5.9 → 0.5.12

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

@@ -0,0 +1,82 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-rock {
+        transform-origin: 7.5px 15px;
+        animation: rock 0.6s infinite alternate ease-in-out;
+      }
+      .arm-juggle-l {
+        transform-origin: 1px 10px;
+        animation: arm-jl 0.6s infinite alternate ease-in-out;
+      }
+      .arm-juggle-r {
+        transform-origin: 14px 10px;
+        animation: arm-jr 0.6s infinite alternate ease-in-out;
+      }
+      .eyes-dart {
+        animation: dart 1.2s infinite;
+      }
+      .packet {
+        animation: juggle 1.2s infinite linear;
+      }
+      .p1 { animation-delay: 0s; fill: #FF5252; }
+      .p2 { animation-delay: -0.4s; fill: #FFC107; }
+      .p3 { animation-delay: -0.8s; fill: #4CAF50; }
+      
+      @keyframes rock {
+        0% { transform: rotate(-5deg); }
+        100% { transform: rotate(5deg); }
+      }
+      @keyframes arm-jl {
+        0% { transform: rotate(60deg); }
+        100% { transform: rotate(10deg); }
+      }
+      @keyframes arm-jr {
+        0% { transform: rotate(-10deg); }
+        100% { transform: rotate(-60deg); }
+      }
+      @keyframes dart {
+        0%, 100% { transform: translate(-2px, -2px); }
+        25% { transform: translate(0, -3px); }
+        50% { transform: translate(2px, -2px); }
+        75% { transform: translate(0, 0); }
+      }
+      @keyframes juggle {
+        0% { transform: translate(0px, 9px) rotate(0deg); }
+        25% { transform: translate(8px, 0px) rotate(90deg); }
+        50% { transform: translate(15px, 9px) rotate(180deg); }
+        75% { transform: translate(8px, 4px) rotate(270deg); }
+        100% { transform: translate(0px, 9px) rotate(360deg); }
+      }
+    </style>
+  </defs>
+
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Juggling Packets -->
+  <g class="packets">
+    <rect class="packet p1" x="-1" y="-1" width="2" height="2" />
+    <rect class="packet p2" x="-1" y="-1" width="2" height="2" />
+    <rect class="packet p3" x="-1" y="-1" width="2" height="2" />
+  </g>
+
+  <g class="body-rock">
+    <g id="legs" fill="#DE886D">
+      <rect x="3" y="13" width="1" height="2"/>
+      <rect x="5" y="13" width="1" height="2"/>
+      <rect x="9" y="13" width="1" height="2"/>
+      <rect x="11" y="13" width="1" height="2"/>
+    </g>
+
+    <g id="body-color-group" fill="#DE886D">
+      <rect x="2" y="6" width="11" height="7"/>
+      <g class="arm-juggle-l"><rect x="0" y="9" width="2" height="2"/></g>
+      <g class="arm-juggle-r"><rect x="13" y="9" width="2" height="2"/></g>
+    </g>
+    
+    <g class="eyes-dart" fill="#000000">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,75 @@
+<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; }
+
+      @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; }
+      }
+    </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"/> <!-- left arm down -->
+    </g>
+    
+    <!-- Fanning Arm -->
+    <g class="arm-fan">
+      <rect x="14" y="11" width="2" height="2" fill="#DE886D"/>
+    </g>
+    
+    <!-- Tired Eyes -->
+    <g fill="#000000">
+      <rect x="3.5" y="12.5" width="2" height="0.4"/>
+      <rect x="9.5" y="12.5" width="2" height="0.4"/>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,125 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Straining body lean */
+      .body-push {
+        transform-origin: 7.5px 15px; /* Pivot at the base of the feet */
+        animation: push-strain 0.6s infinite alternate ease-in-out;
+      }
+
+      /* Heavy Data Block shaking */
+      .data-block {
+        animation: block-shake 0.1s infinite alternate;
+      }
+
+      /* Scrambling legs (alternating) */
+      .leg {
+        transform-box: fill-box;
+        transform-origin: top center;
+      }
+      .leg-1 { animation: run-1 0.3s infinite linear; }
+      .leg-2 { animation: run-2 0.3s infinite linear; }
+
+      /* Sweat drop flying off */
+      .sweat {
+        opacity: 0;
+        animation: sweat-fly 2s infinite cubic-bezier(.25,.1,.25,1);
+      }
+
+      /* Ground shadow shifting */
+      .shadow-push {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-strain 0.6s infinite alternate ease-in-out;
+      }
+
+      /* Keyframes */
+      @keyframes push-strain {
+        0% { transform: rotate(12deg) scale(1, 0.95); }
+        100% { transform: rotate(18deg) scale(1.05, 0.9); } /* Deeper lean and squash */
+      }
+
+      @keyframes shadow-strain {
+        0% { transform: translateX(1px) scaleX(1); opacity: 0.5; }
+        100% { transform: translateX(3px) scaleX(1.1); opacity: 0.6; }
+      }
+
+      @keyframes block-shake {
+        0% { transform: translate(0, 0); }
+        100% { transform: translate(0.5px, -0.5px); }
+      }
+
+      /* Scrambling legs swinging backwards to push */
+      @keyframes run-1 {
+        0%, 100% { transform: rotate(0deg) scaleY(1); }
+        50% { transform: rotate(-25deg) scaleY(0.7); }
+      }
+      @keyframes run-2 {
+        0%, 100% { transform: rotate(-25deg) scaleY(0.7); }
+        50% { transform: rotate(0deg) scaleY(1); }
+      }
+
+      /* 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>
+
+  <!-- Ground Shadows -->
+  <rect id="ground-shadow" class="shadow-push" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+  <rect id="block-shadow" x="14" y="15" width="10" height="1" fill="#000000" opacity="0.4"/>
+
+  <!-- Heavy Data Block -->
+  <g class="data-block" transform="translate(14, 5)">
+    <!-- Main Block -->
+    <rect x="0" y="0" width="10" height="10" fill="#90A4AE"/>
+    <rect x="1" y="1" width="8" height="8" fill="#CFD8DC"/>
+    
+    <!-- Data "Lights" on the block -->
+    <rect x="2" y="2" width="2" height="2" fill="#0082FC"/>
+    <rect x="6" y="2" width="2" height="2" fill="#FFC107"/>
+    <rect x="2" y="6" width="6" height="2" fill="#B0BEC5"/>
+  </g>
+
+  <!-- Leaning Body -->
+  <g class="body-push">
+    
+    <!-- Sweat Drop (Positioned near the side of the head) -->
+    <g transform="translate(1, 4)">
+      <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>
+
+    <!-- Body Base Color Group -->
+    <g id="body-color-group" fill="#DE886D">
+      <!-- Scrambling Legs -->
+      <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"/>
+
+      <!-- Main Torso -->
+      <rect id="torso" x="2" y="6" width="11" height="7"/>
+      
+      <!-- Left Arm (Pushed forward, reaching across body) -->
+      <rect id="left-arm" x="0" y="9" width="2" height="2" transform="translate(11, 0) rotate(-15 1 10)"/>
+
+      <!-- Right Arm (Pushed forward, fully extended) -->
+      <rect id="right-arm" x="13" y="9" width="2" height="2" transform="translate(0, -1) rotate(-15 14 10)"/>
+    </g>
+    
+    <!-- Eyes Color Group (Straining, looking at the block) -->
+    <g fill="#000000">
+      <!-- Left eye is squinting hard -->
+      <rect id="left-eye" x="8" y="8.5" width="1" height="1"/>
+      <!-- Right eye is wide with strain -->
+      <rect id="right-eye" x="12" y="7" width="1" height="2.5"/>
+    </g>
+    
+  </g>
+</svg>

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

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-sweep {
+        transform-origin: 7.5px 15px;
+        animation: sweep-lean 1.5s infinite ease-in-out;
+      }
+      .arm-sweep {
+        transform-origin: 14px 10px;
+        animation: sweep-arm 1.5s infinite ease-in-out;
+      }
+      .broom {
+        transform-origin: 13.5px 14px;
+        animation: sweep-broom 1.5s infinite ease-in-out;
+      }
+      .dust {
+        opacity: 0;
+        animation: sweep-dust 1.5s infinite ease-out;
+      }
+      .d1 { animation-delay: 0.2s; }
+      .d2 { animation-delay: 0.4s; }
+      
+      @keyframes sweep-lean {
+        0%, 100% { transform: rotate(5deg) translate(1px, 0); }
+        50% { transform: rotate(15deg) translate(3px, 1px); }
+      }
+      @keyframes sweep-arm {
+        0%, 100% { transform: rotate(0deg); }
+        50% { transform: rotate(-20deg); }
+      }
+      @keyframes sweep-broom {
+        0%, 100% { transform: rotate(10deg); }
+        50% { transform: rotate(30deg) translate(2px, -1px); }
+      }
+      @keyframes sweep-dust {
+        0%, 40% { transform: translate(17px, 14px) scale(0); opacity: 0; }
+        50% { transform: translate(19px, 14px) scale(1); opacity: 1; }
+        100% { transform: translate(25px, 14px) scale(0.5); opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Mirrored: entire scene flipped so Clawd sweeps leftward -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <rect id="ground-shadow" x="3" y="15" width="13" height="1" fill="#000000" opacity="0.5"/>
+
+    <g class="body-sweep">
+      <g id="legs" fill="#DE886D">
+        <rect x="3" y="13" width="1" height="2"/>
+        <rect x="5" y="13" width="1" height="2"/>
+        <rect x="9" y="13" width="1" height="2"/>
+        <rect x="11" y="13" width="1" height="2"/>
+      </g>
+
+      <g id="body-color-group" fill="#DE886D">
+        <rect x="2" y="6" width="11" height="7"/>
+        <rect x="0" y="9" width="2" height="2" transform="translate(6, 1) rotate(-15 1 10)"/>
+        <g class="arm-sweep"><rect x="13" y="9" width="2" height="2"/></g>
+      </g>
+
+      <g fill="#000000">
+        <rect x="5" y="8" width="1" height="2"/>
+        <rect x="11" y="8" width="1" height="2"/>
+      </g>
+    </g>
+
+    <g class="broom">
+      <rect x="13.5" y="4" width="1" height="10" fill="#795548"/>
+      <rect x="12" y="14" width="4" height="2" fill="#FFC107"/>
+    </g>
+
+    <g class="dust" fill="#9E9E9E">
+      <rect x="0" y="0" width="1.5" height="1.5"/>
+    </g>
+    <g class="dust d1" fill="#B0BEC5">
+      <rect x="0" y="0" width="1" height="1"/>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,119 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Slow, contemplative swaying */
+      .body-sway {
+        transform-origin: 7.5px 15px; /* Pivot at the base of the feet */
+        animation: sway 4s infinite ease-in-out;
+      }
+
+      /* Ground shadow shifting with the sway */
+      .shadow-sway {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-shift 4s infinite ease-in-out;
+      }
+
+      /* Right arm raised and tapping the "chin" */
+      .arm-tap {
+        transform-origin: 14px 10px; /* Shoulder joint */
+        animation: tap-chin 0.8s infinite alternate ease-in-out;
+      }
+
+      /* Slow, thoughtful blinking */
+      .eyes-think {
+        transform-origin: 7.5px 7px;
+        animation: blink-think 4s infinite;
+      }
+
+      /* Loading dots appearing sequentially */
+      .dot { opacity: 0; }
+      .d1 { animation: load-dot-1 2s infinite; }
+      .d2 { animation: load-dot-2 2s infinite; }
+      .d3 { animation: load-dot-3 2s infinite; }
+
+      /* Keyframes */
+      @keyframes sway {
+        0%, 100% { transform: rotate(0deg) translate(0, 0); }
+        25% { transform: rotate(-3deg) translate(-1px, 0); }
+        75% { transform: rotate(3deg) translate(1px, 0); }
+      }
+
+      @keyframes shadow-shift {
+        0%, 100% { transform: translate(0, 0); }
+        25% { transform: translate(-1px, 0); }
+        75% { transform: translate(1px, 0); }
+      }
+
+      @keyframes tap-chin {
+        0% { transform: rotate(-125deg); }
+        100% { transform: rotate(-145deg); }
+      }
+
+      @keyframes blink-think {
+        0%, 46%, 54%, 100% { transform: scaleY(1); }
+        50% { transform: scaleY(0.1); } /* Single slow blink */
+      }
+
+      /* Sequential dot loading (0-20% empty, then dots appear one by one) */
+      @keyframes load-dot-1 {
+        0%, 20% { opacity: 0; }
+        21%, 100% { opacity: 1; }
+      }
+      @keyframes load-dot-2 {
+        0%, 40% { opacity: 0; }
+        41%, 100% { opacity: 1; }
+      }
+      @keyframes load-dot-3 {
+        0%, 60% { opacity: 0; }
+        61%, 100% { opacity: 1; }
+      }
+    </style>
+  </defs>
+
+  <!-- Pixel-Art Thinking Bubble (upper-left, tail points down-right toward Clawd) -->
+  <g transform="translate(-3, -7)">
+    <g class="think-bubble">
+      <!-- Bubble Cloud Base -->
+      <g fill="#FFFFFF" opacity="0.9">
+        <rect x="2" y="1" width="8" height="7"/>
+        <rect x="1" y="2" width="10" height="5"/>
+        <rect x="3" y="0" width="6" height="9"/>
+
+        <!-- Tail pointing down-right toward Clawd -->
+        <rect x="8" y="7" width="2" height="2"/>
+        <rect x="10" y="9" width="1" height="1"/>
+      </g>
+
+      <!-- Animated Loading Dots (left-to-right order preserved) -->
+      <g fill="#0082FC">
+        <rect class="dot d1" x="2.5" y="4" width="1" height="1"/>
+        <rect class="dot d2" x="5.5" y="4" width="1" height="1"/>
+        <rect class="dot d3" x="8.5" y="4" width="1" height="1"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Mirrored Character Body (SVG transform flips all body parts + shadow) -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <!-- Ground Shadow -->
+    <rect id="ground-shadow" class="shadow-sway" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+    <g class="body-sway">
+      <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"/>
+        <rect id="left-arm" x="0" y="9" width="3" height="2" transform="rotate(25 1 10)"/>
+        <g class="arm-tap">
+          <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+        </g>
+      </g>
+      <g class="eyes-think" fill="#000000">
+        <rect id="left-eye" x="5" y="7" width="1" height="2"/>
+        <rect id="right-eye" x="11" y="7" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,153 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* High-speed body jitter */
+      .body-jitter {
+        transform-origin: 7.5px 15px;
+        animation: jitter 0.08s infinite alternate ease-in-out;
+      }
+
+      /* Furious typing arms (rotating out and tapping) */
+      .arm-l-type {
+        transform-origin: 2px 10px; /* Shoulder joint */
+        animation: type-l 0.15s infinite ease-in-out;
+      }
+      .arm-r-type {
+        transform-origin: 13px 10px; /* Shoulder joint */
+        animation: type-r 0.12s infinite ease-in-out;
+      }
+
+      /* Eye tracking (reading lines of code quickly) */
+      .eyes-read {
+        animation: read-code 1.2s infinite;
+      }
+
+      /* Floating data packets */
+      .data-bit {
+        opacity: 0;
+        animation: float-data 1s infinite linear;
+      }
+      .d1 { animation-delay: 0.0s; transform-origin: -2px 10px; }
+      .d2 { animation-delay: 0.3s; transform-origin: 5px 12px; }
+      .d3 { animation-delay: 0.6s; transform-origin: 12px 11px; }
+      .d4 { animation-delay: 0.8s; transform-origin: 17px 9px; }
+      .d5 { animation-delay: 0.1s; transform-origin: 8px 10px; }
+      .d6 { animation-delay: 0.4s; transform-origin: 0px 11px; }
+      .d7 { animation-delay: 0.7s; transform-origin: 15px 12px; }
+
+      /* Laptop Logo Glow */
+      .logo-glow {
+        animation: logo-pulse 1.5s infinite alternate ease-in-out;
+      }
+
+      /* Keyframes */
+      @keyframes jitter {
+        0% { transform: translateY(0); }
+        100% { transform: translateY(0.5px); }
+      }
+
+      /* Arms point forward and tap rapidly */
+      @keyframes type-l {
+        0% { transform: rotate(70deg); }
+        25% { transform: rotate(110deg); }
+        50% { transform: rotate(80deg); }
+        75% { transform: rotate(100deg); }
+        100% { transform: rotate(70deg); }
+      }
+
+      @keyframes type-r {
+        0% { transform: rotate(-80deg); }
+        25% { transform: rotate(-100deg); }
+        50% { transform: rotate(-70deg); }
+        75% { transform: rotate(-110deg); }
+        100% { transform: rotate(-80deg); }
+      }
+
+      /* Discrete steps to look like reading text */
+      @keyframes read-code {
+        0%, 14% { transform: translate(-2px, 0); }
+        15%, 29% { transform: translate(-1px, 0); }
+        30%, 44% { transform: translate(0px, 0); }
+        45%, 59% { transform: translate(1px, 0); }
+        60%, 84% { transform: translate(2px, 0); }
+        85%, 100% { transform: translate(-2px, 0); } /* Carriage return snap back */
+      }
+
+      /* Packets float up and fade */
+      @keyframes float-data {
+        0% { transform: translateY(0) scale(0.5); opacity: 0; }
+        20% { opacity: 0.8; }
+        100% { transform: translateY(-15px) scale(1.2); opacity: 0; }
+      }
+
+      @keyframes logo-pulse {
+        0% { opacity: 0.4; }
+        100% { opacity: 1; }
+      }
+    </style>
+    
+    <!-- A small square to represent data/code -->
+    <g id="pixel-packet">
+      <rect x="0" y="0" width="1.5" height="1.5" />
+    </g>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Data Particles floating up from behind the laptop -->
+  <g class="data-particles" fill="#40C4FF">
+    <use href="#pixel-packet" class="data-bit d1" x="-2" y="12" />
+    <use href="#pixel-packet" class="data-bit d2" x="5" y="11" />
+    <use href="#pixel-packet" class="data-bit d3" x="12" y="13" />
+    <use href="#pixel-packet" class="data-bit d4" x="17" y="11" />
+    <use href="#pixel-packet" class="data-bit d5" x="8" y="10" />
+    <use href="#pixel-packet" class="data-bit d6" x="1" y="11" />
+    <use href="#pixel-packet" class="data-bit d7" x="15" y="12" />
+  </g>
+
+  <!-- Animated Character Body -->
+  <g class="body-jitter">
+    
+    <!-- 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"/>
+      
+      <!-- Typing Arms -->
+      <g class="arm-l-type">
+        <rect id="left-arm" x="0" y="9" width="2" height="2"/>
+      </g>
+      <g class="arm-r-type">
+        <rect id="right-arm" x="13" y="9" width="2" height="2"/>
+      </g>
+    </g>
+    
+    <!-- Eyes Color Group (Squinting) -->
+    <g fill="#000000">
+      <g class="eyes-read">
+        <rect id="left-eye-squint" x="4" y="8.5" width="1" height="1"/>
+        <rect id="right-eye-squint" x="10" y="8.5" width="1" height="1"/>
+      </g>
+    </g>
+    
+  </g>
+
+  <!-- Pixel Laptop (facing Clawd, so we see the back of the screen) -->
+  <g id="laptop" transform="translate(3, 9.5)">
+    <!-- Laptop Base -->
+    <rect x="-0.5" y="5" width="10" height="1" fill="#546E7A" rx="0.5"/>
+    <!-- Screen Back -->
+    <rect x="0" y="0" width="9" height="5.5" fill="#78909C" rx="0.5"/>
+    <!-- Glowing Logo (Pixel) -->
+    <circle cx="4.5" cy="2.5" r="1.5" fill="#40C4FF" opacity="0.2" class="logo-glow"/>
+    <rect x="4" y="2" width="1" height="1" fill="#FFFFFF" class="logo-glow"/>
+  </g>
+
+</svg>