clawd-desktop 1.0.0

package/assets/svg/clawd-working-typing.svg

@@ -0,0 +1,273 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* ===== Body (KEEP) ===== */
+      .body-bounce {
+        transform-origin: 7.5px 15px;
+        animation: body-bounce 0.35s infinite ease-in-out;
+      }
+      .breathe {
+        transform-origin: 7.5px 13px;
+        animation: breathe 3.2s infinite ease-in-out;
+      }
+
+      /* ===== Arms (KEEP) ===== */
+      .arm-l-type {
+        transform-origin: 2px 10px;
+        animation: type-l 0.15s infinite ease-in-out;
+      }
+      .arm-r-type {
+        transform-origin: 13px 10px;
+        animation: type-r 0.12s infinite ease-in-out;
+      }
+
+      /* ===== Eyes ===== */
+      .eyes-code {
+        transform-origin: 7.5px 9px;
+        animation: eye-code 10s infinite ease-in-out;
+      }
+
+      /* ===== Code lines: each line grows, holds, then slides up + fades ===== */
+      .code-line {
+        transform-box: fill-box;
+        transform-origin: left center;
+      }
+      .cl1 { animation: cl1 6s infinite; }
+      .cl2 { animation: cl2 6s infinite; }
+      .cl3 { animation: cl3 6s infinite; }
+      .cl4 { animation: cl4 6s infinite; }
+
+      /* Key press flashes — different periods so they look random */
+      .key-flash { opacity: 0; }
+      .kf1 { animation: kflash 0.6s infinite; }
+      .kf2 { animation: kflash 0.8s infinite; animation-delay: -0.25s; }
+      .kf3 { animation: kflash 0.5s infinite; animation-delay: -0.1s; }
+      .kf4 { animation: kflash 0.7s infinite; animation-delay: -0.45s; }
+      .kf5 { animation: kflash 0.55s infinite; animation-delay: -0.3s; }
+      .kf6 { animation: kflash 0.9s infinite; animation-delay: -0.5s; }
+
+      /* Data particles (float up behind screen) */
+      .data-bit { opacity: 0; animation: float-data 1.5s infinite linear; }
+      .d1 { animation-delay: 0s; }
+      .d2 { animation-delay: -0.4s; }
+      .d3 { animation-delay: -0.8s; }
+      .d4 { animation-delay: -1.2s; }
+
+      /* Shadow */
+      .shadow-anim {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-bob 0.4s infinite ease-in-out;
+      }
+
+      /* ==================== Keyframes ==================== */
+
+      @keyframes body-bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(0.8px); }
+      }
+      @keyframes breathe {
+        0%, 100% { transform: scale(1, 1) translate(0, 0); }
+        50% { transform: scale(1.02, 0.98) translate(0, 0.5px); }
+      }
+      @keyframes shadow-bob {
+        0%, 100% { transform: scaleX(1.02); opacity: 0.5; }
+        50% { transform: scaleX(1.05); opacity: 0.55; }
+      }
+
+      @keyframes type-l {
+        0%   { transform: rotate(-5deg); }
+        25%  { transform: rotate(-38deg); }
+        50%  { transform: rotate(-10deg); }
+        75%  { transform: rotate(-30deg); }
+        100% { transform: rotate(-5deg); }
+      }
+      @keyframes type-r {
+        0%   { transform: rotate(5deg); }
+        25%  { transform: rotate(38deg); }
+        50%  { transform: rotate(10deg); }
+        75%  { transform: rotate(30deg); }
+        100% { transform: rotate(5deg); }
+      }
+
+      /* Eyes: long keyboard squint → 2 consecutive scans → keyboard */
+      @keyframes eye-code {
+        0%   { transform: translate(0, 1px) scaleY(0.6); }
+        14%  { transform: translate(0, 1px) scaleY(0.6); }
+        15%  { transform: translate(0, 1px) scaleY(0.1); }
+        16%  { transform: translate(0, 1px) scaleY(0.6); }
+        36%  { transform: translate(0, 1px) scaleY(0.6); }
+        37%  { transform: translate(0, 1px) scaleY(0.1); }
+        38%  { transform: translate(0, 1px) scaleY(0.6); }
+        54%  { transform: translate(0, 1px) scaleY(0.6); }
+        55%  { transform: translate(0, 1px) scaleY(0.1); }
+        57%  { transform: translate(-1px, -0.5px) scaleY(1); }
+        62%  { transform: translate(1.5px, -0.5px) scaleY(1); }
+        64%  { transform: translate(-0.5px, -0.3px) scaleY(1); }
+        69%  { transform: translate(1.5px, -0.5px) scaleY(1); }
+        71%  { transform: translate(1px, -0.3px) scaleY(0.1); }
+        73%  { transform: translate(0, 1px) scaleY(0.6); }
+        89%  { transform: translate(0, 1px) scaleY(0.6); }
+        90%  { transform: translate(0, 1px) scaleY(0.1); }
+        91%  { transform: translate(0, 1px) scaleY(0.6); }
+        100% { transform: translate(0, 1px) scaleY(0.6); }
+      }
+
+      /* Code lines: grow from left → hold → slide up + fade out
+         Each line staggers by ~15%. Slide-up gives "scroll" feel.
+         At 95-100% all invisible → brief blank → cycle restarts */
+      @keyframes cl1 {
+        0%        { transform: scaleX(0); opacity: 0; }
+        3%        { transform: scaleX(0); opacity: 1; }
+        13%       { transform: scaleX(1); opacity: 1; }
+        13%, 78%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        88%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        89%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl2 {
+        0%, 14%   { transform: scaleX(0); opacity: 0; }
+        15%       { transform: scaleX(0); opacity: 1; }
+        27%       { transform: scaleX(1); opacity: 1; }
+        27%, 82%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        91%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        92%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl3 {
+        0%, 29%   { transform: scaleX(0); opacity: 0; }
+        30%       { transform: scaleX(0); opacity: 1; }
+        42%       { transform: scaleX(1); opacity: 1; }
+        42%, 85%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        93%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        94%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+      @keyframes cl4 {
+        0%, 44%   { transform: scaleX(0); opacity: 0; }
+        45%       { transform: scaleX(0); opacity: 1; }
+        57%       { transform: scaleX(1); opacity: 1; }
+        57%, 88%  { transform: scaleX(1) translateY(0); opacity: 1; }
+        95%       { transform: scaleX(1) translateY(-3px); opacity: 0; }
+        96%, 100% { transform: scaleX(0) translateY(0); opacity: 0; }
+      }
+
+      /* Key flash: brief bright pulse, mostly off */
+      @keyframes kflash {
+        0%, 70%, 100% { opacity: 0; }
+        35% { opacity: 0.8; }
+      }
+
+      @keyframes float-data {
+        0%   { transform: translateY(0) scale(0.5); opacity: 0; }
+        10%  { opacity: 0.8; }
+        100% { transform: translateY(-17px) scale(1); opacity: 0; }
+      }
+    </style>
+    <g id="pixel-packet">
+      <rect x="0" y="0" width="1.5" height="1.5"/>
+    </g>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-anim" x="3" y="15" width="9" height="1" fill="#000" opacity="0.5"/>
+
+  <!-- Data particles (behind screen, float up and disappear behind it) -->
+  <g fill="#40C4FF">
+    <use href="#pixel-packet" class="data-bit d1" x="3" y="7"/>
+    <use href="#pixel-packet" class="data-bit d2" x="7" y="8"/>
+    <use href="#pixel-packet" class="data-bit d3" x="11" y="7"/>
+    <use href="#pixel-packet" class="data-bit d4" x="5" y="8"/>
+  </g>
+
+  <!-- Mini Screen -->
+  <g id="screen" transform="translate(1.25, 0)">
+    <rect x="-0.5" y="-6" width="13.5" height="10.5" fill="#1E1E2E" rx="0.3"/>
+    <rect x="-0.5" y="-6" width="13.5" height="1.2" fill="#2D2D3D" rx="0.3"/>
+    <rect x="0.3" y="-5.6" width="0.5" height="0.4" fill="#FF5F56"/>
+    <rect x="1.2" y="-5.6" width="0.5" height="0.4" fill="#FFBD2E"/>
+    <rect x="2.1" y="-5.6" width="0.5" height="0.4" fill="#27C93F"/>
+
+    <!-- Code lines (indented, varying lengths = code structure) -->
+    <rect class="code-line cl1" x="0.5" y="-3.5" width="5"   height="0.7" fill="#4CAF50" opacity="0.8"/>
+    <rect class="code-line cl2" x="2"   y="-1.8" width="8"   height="0.7" fill="#4CAF50" opacity="0.8"/>
+    <rect class="code-line cl3" x="2"   y="-0.1" width="4.5" height="0.7" fill="#40C4FF" opacity="0.7"/>
+    <rect class="code-line cl4" x="0.5" y="1.6"  width="2"   height="0.7" fill="#FFC107" opacity="0.7"/>
+
+  </g>
+
+  <!-- Layer 1: Body -->
+  <g class="body-bounce">
+    <g class="breathe">
+      <g 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"/>
+        <rect x="2" y="6" width="11" height="7"/>
+      </g>
+      <g class="eyes-code" fill="#000">
+        <rect x="4" y="8" width="1" height="2"/>
+        <rect x="10" y="8" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Layer 2: Keyboard -->
+  <g id="keyboard" transform="translate(-0.5, 11.8)">
+    <rect x="0" y="0" width="16" height="3.2" fill="#455A64" rx="0.3"/>
+    <g fill="#78909C">
+      <rect x="0.5" y="0.4" width="1" height="0.7"/>
+      <rect x="1.8" y="0.4" width="1" height="0.7"/>
+      <rect x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
+      <rect x="10.2" y="0.4" width="1" height="0.7"/>
+      <rect x="11.5" y="0.4" width="1" height="0.7"/>
+      <rect x="12.8" y="0.4" width="1" height="0.7"/>
+      <rect x="14.1" y="0.4" width="1.3" height="0.7"/>
+    </g>
+    <g fill="#78909C">
+      <rect x="0.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="2.0" y="1.3" width="0.9" height="0.7"/>
+      <rect x="3.2" y="1.3" width="0.9" height="0.7"/>
+      <rect x="4.4" y="1.3" width="0.9" height="0.7"/>
+      <rect x="5.6" y="1.3" width="0.9" height="0.7"/>
+      <rect x="6.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="8.0" y="1.3" width="0.9" height="0.7"/>
+      <rect x="9.2" y="1.3" width="0.9" height="0.7"/>
+      <rect x="10.4" y="1.3" width="0.9" height="0.7"/>
+      <rect x="11.6" y="1.3" width="0.9" height="0.7"/>
+      <rect x="12.8" y="1.3" width="0.9" height="0.7"/>
+      <rect x="14.0" y="1.3" width="0.9" height="0.7"/>
+    </g>
+    <g fill="#78909C">
+      <rect x="0.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="1.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="2.9" y="2.2" width="0.9" height="0.7"/>
+      <rect x="4.1" y="2.2" width="0.9" height="0.7"/>
+      <rect x="5.3" y="2.2" width="0.9" height="0.7"/>
+      <rect x="6.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="7.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="8.9" y="2.2" width="0.9" height="0.7"/>
+      <rect x="10.1" y="2.2" width="0.9" height="0.7"/>
+      <rect x="11.3" y="2.2" width="0.9" height="0.7"/>
+      <rect x="12.5" y="2.2" width="0.9" height="0.7"/>
+      <rect x="13.7" y="2.2" width="0.9" height="0.7"/>
+      <rect x="14.9" y="2.2" width="0.6" height="0.7"/>
+    </g>
+    <!-- Key press highlights (overlay on top of keys) -->
+    <g fill="#B0BEC5">
+      <rect class="key-flash kf1" x="4.4" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf2" x="9.2" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf3" x="2.9" y="2.2" width="0.9" height="0.7"/>
+      <rect class="key-flash kf4" x="7.7" y="2.2" width="0.9" height="0.7"/>
+      <rect class="key-flash kf5" x="11.6" y="1.3" width="0.9" height="0.7"/>
+      <rect class="key-flash kf6" x="3.5" y="0.4" width="6" height="0.7" rx="0.2"/>
+    </g>
+  </g>
+
+  <!-- Layer 3: Arms -->
+  <g class="body-bounce">
+    <g class="breathe">
+      <g fill="#DE886D">
+        <g class="arm-l-type"><rect x="0" y="9" width="2" height="2"/></g>
+        <g class="arm-r-type"><rect x="13" y="9" width="2" height="2"/></g>
+      </g>
+    </g>
+  </g>
+</svg>

package/assets/svg/clawd-working-ultrathink.svg

@@ -0,0 +1,166 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      /* Intense body trembling */
+      .body-shake {
+        transform-origin: 7.5px 15px;
+        animation: shake 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Shadow vibration */
+      .shadow-shake {
+        transform-origin: 7.5px 15.5px;
+        animation: shadow-vib 0.15s infinite alternate ease-in-out;
+      }
+
+      /* Right arm tapping chin fast */
+      .arm-tap-fast {
+        transform-origin: 14px 10px;
+        animation: tap-fast 0.8s infinite ease-in-out;
+      }
+
+      /* Concentrated squint blink */
+      .eyes-focus {
+        transform-origin: 7.5px 9px;
+        animation: focus-blink 2s infinite;
+      }
+
+      /* Brain sparks rising from head */
+      .spark {
+        opacity: 0;
+        animation: spark-rise 1.2s infinite ease-out;
+      }
+      .sp1 { animation-delay: 0s; }
+      .sp2 { animation-delay: 0.3s; }
+      .sp3 { animation-delay: 0.6s; }
+      .sp4 { animation-delay: 0.9s; }
+
+      /* Loading dots spinning */
+      .load-dot {
+        opacity: 0;
+        animation: dot-pulse 1.6s infinite;
+      }
+      .d1 { animation-delay: 0s; }
+      .d2 { animation-delay: 0.4s; }
+      .d3 { animation-delay: 0.8s; }
+
+      /* Steam puffs */
+      .steam {
+        opacity: 0;
+        animation: steam-rise 2s infinite ease-out;
+      }
+      .st1 { animation-delay: 0s; }
+      .st2 { animation-delay: 0.7s; }
+      .st3 { animation-delay: 1.4s; }
+
+      /* Ultrathink letters individual pulse */
+      .ul { animation: text-pulse 1s infinite ease-in-out; }
+      .ul0 { animation-delay: 0s; }
+      .ul1 { animation-delay: 0.1s; }
+      .ul2 { animation-delay: 0.2s; }
+      .ul3 { animation-delay: 0.3s; }
+      .ul4 { animation-delay: 0.4s; }
+      .ul5 { animation-delay: 0.5s; }
+      .ul6 { animation-delay: 0.6s; }
+      .ul7 { animation-delay: 0.7s; }
+      .ul8 { animation-delay: 0.8s; }
+      .ul9 { animation-delay: 0.9s; }
+
+      @keyframes text-pulse {
+        0%, 100% { opacity: 0.15; }
+        50% { opacity: 1; }
+      }
+
+      @keyframes shake {
+        0% { transform: translate(-0.3px, 0) rotate(-0.5deg); }
+        100% { transform: translate(0.3px, 0) rotate(0.5deg); }
+      }
+
+      @keyframes shadow-vib {
+        0% { transform: scaleX(0.98); }
+        100% { transform: scaleX(1.02); }
+      }
+
+      @keyframes tap-fast {
+        0%, 100% { transform: rotate(-125deg); }
+        50% { transform: rotate(-145deg); }
+      }
+
+      @keyframes focus-blink {
+        0%, 70%, 78%, 100% { transform: scaleY(1); }
+        74% { transform: scaleY(0.1); }
+      }
+
+      @keyframes spark-rise {
+        0% { transform: translate(0, 0) scale(1); opacity: 0; }
+        15% { opacity: 1; }
+        100% { transform: translate(2px, -12px) scale(0.3); opacity: 0; }
+      }
+
+      @keyframes dot-pulse {
+        0%, 100% { opacity: 0.2; }
+        25%, 75% { opacity: 1; }
+      }
+
+      @keyframes steam-rise {
+        0% { transform: translate(0, 0) scale(0.8); opacity: 0; }
+        20% { opacity: 0.6; }
+        100% { transform: translate(-2px, -10px) scale(1.5); opacity: 0; }
+      }
+    </style>
+  </defs>
+
+  <!-- Ground Shadow -->
+  <rect class="shadow-shake" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.5"/>
+
+  <!-- Brain Sparks (mirrored x positions around center 7.5) -->
+  <g fill="#FFD700">
+    <rect class="spark sp1" x="10" y="2" width="1" height="1"/>
+    <rect class="spark sp2" x="6" y="0" width="1" height="1"/>
+    <rect class="spark sp3" x="3" y="1" width="1" height="1"/>
+    <rect class="spark sp4" x="8" y="-1" width="1" height="1"/>
+  </g>
+
+  <!-- Steam Puffs -->
+  <g fill="#AAAAAA" opacity="0.5">
+    <g class="steam st1"><rect x="5" y="3" width="2" height="1" rx="0.5"/><rect x="4" y="2" width="1" height="1" rx="0.5"/></g>
+    <g class="steam st2"><rect x="9" y="2" width="2" height="1" rx="0.5"/><rect x="10" y="1" width="1" height="1" rx="0.5"/></g>
+    <g class="steam st3"><rect x="7" y="3" width="1" height="1" rx="0.5"/><rect x="6" y="2" width="2" height="1" rx="0.5"/></g>
+  </g>
+
+  <!-- Loading Dots above head -->
+  <g fill="#FF6B35">
+    <rect class="load-dot d1" x="4" y="4" width="1" height="1"/>
+    <rect class="load-dot d2" x="7" y="4" width="1" height="1"/>
+    <rect class="load-dot d3" x="10" y="4" width="1" height="1"/>
+  </g>
+
+  <!-- Mirrored: body + legs only -->
+  <g transform="translate(15, 0) scale(-1, 1)">
+    <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 class="body-shake">
+      <g fill="#DE886D">
+        <rect x="2" y="6" width="11" height="7"/>
+        <rect x="0" y="9" width="3" height="2" transform="rotate(25 1 10)"/>
+        <g class="arm-tap-fast">
+          <rect x="13" y="9" width="2" height="2"/>
+        </g>
+      </g>
+      <g class="eyes-focus" fill="#000000">
+        <rect x="5" y="7" width="1" height="2"/>
+        <rect x="11" y="7" width="1" height="2"/>
+      </g>
+    </g>
+  </g>
+
+  <!-- Ultrathink rainbow text (top layer, each letter pulses independently) -->
+  <text x="7.5" y="0" text-anchor="middle" font-family="'Söhne', 'Helvetica Neue', Arial, sans-serif" font-size="3.2" font-weight="600" letter-spacing="0.2">
+    <tspan class="ul ul0" fill="#FF5252">u</tspan><tspan class="ul ul1" fill="#FF9800">l</tspan><tspan class="ul ul2" fill="#FFC107">t</tspan><tspan class="ul ul3" fill="#4CAF50">r</tspan><tspan class="ul ul4" fill="#2196F3">a</tspan><tspan class="ul ul5" fill="#9C27B0">t</tspan><tspan class="ul ul6" fill="#FF5252">h</tspan><tspan class="ul ul7" fill="#FF9800">i</tspan><tspan class="ul ul8" fill="#4CAF50">n</tspan><tspan class="ul ul9" fill="#2196F3">k</tspan>
+  </text>
+</svg>

package/assets/svg/clawd-working-wizard.svg

@@ -0,0 +1,98 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -25 45 45" width="500" height="500">
+  <defs>
+    <style>
+      .body-magic {
+        transform-origin: 7.5px 15px;
+        animation: float-body 3s infinite ease-in-out;
+      }
+      .arm-wand {
+        transform-origin: 14px 10px;
+        animation: wave-wand 3s infinite ease-in-out;
+      }
+      .arm-l-magic {
+        transform-origin: 1px 10px;
+        animation: wave-magic 3s infinite ease-in-out;
+      }
+      .eyes-magic {
+        animation: blink-magic 3s infinite;
+      }
+      .magic-star {
+        opacity: 0;
+        animation: sparkle-magic 2s infinite ease-out;
+      }
+      .s1 { animation-delay: 0s; fill: #FFD700; }
+      .s2 { animation-delay: 0.5s; fill: #40C4FF; }
+      .s3 { animation-delay: 1s; fill: #B388FF; }
+      .s4 { animation-delay: 1.5s; fill: #FF8A80; }
+
+      @keyframes float-body {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-2px); }
+      }
+      @keyframes wave-wand {
+        0%, 100% { transform: rotate(-20deg); }
+        50% { transform: rotate(-120deg); }
+      }
+      @keyframes wave-magic {
+        0%, 100% { transform: rotate(20deg); }
+        50% { transform: rotate(120deg); }
+      }
+      @keyframes blink-magic {
+        0%, 40% { transform: scaleY(0.1); }
+        45%, 95% { transform: scaleY(1); }
+        100% { transform: scaleY(0.1); }
+      }
+      @keyframes sparkle-magic {
+        0% { transform: translate(14px, 4px) scale(0) rotate(0deg); opacity: 0; }
+        20% { opacity: 1; }
+        100% { transform: translate(14px, -15px) scale(1.5) rotate(180deg); opacity: 0; }
+      }
+    </style>
+    <g id="star">
+      <polygon points="0,-2 0.5,-0.5 2,0 0.5,0.5 0,2 -0.5,0.5 -2,0 -0.5,-0.5"/>
+    </g>
+  </defs>
+
+  <rect id="ground-shadow" x="3" y="15" width="9" height="1" fill="#000000" opacity="0.4"/>
+
+  <!-- Magic Stars -->
+  <g>
+    <use href="#star" class="magic-star s1"/>
+    <use href="#star" class="magic-star s2" transform="translate(-10, 0)"/>
+    <use href="#star" class="magic-star s3" transform="translate(5, -5)"/>
+    <use href="#star" class="magic-star s4" transform="translate(-5, -10)"/>
+  </g>
+
+  <g class="body-magic">
+    <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-l-magic"><rect x="0" y="9" width="2" height="2"/></g>
+    </g>
+
+    <g fill="#000000" class="eyes-magic" transform-origin="7.5px 9px">
+      <rect x="4" y="8" width="1" height="2"/>
+      <rect x="10" y="8" width="1" height="2"/>
+    </g>
+
+    <!-- Wizard Hat -->
+    <g transform="translate(7.5, 6)">
+      <polygon points="-4,0 4,0 0,-6" fill="#673AB7"/>
+      <rect x="-5" y="0" width="10" height="1" fill="#512DA8"/>
+      <polygon points="0,-3 0.5,-2.5 1.5,-2.5 0.75,-1.75 1,-0.5 0,-1.25 -1,-0.5 -0.75,-1.75 -1.5,-2.5 -0.5,-2.5" fill="#FFC107"/>
+    </g>
+
+    <!-- Wand arm (on top of hat and eyes) -->
+    <g class="arm-wand" fill="#DE886D">
+      <rect x="13" y="9" width="2" height="2"/>
+      <rect x="13.5" y="4" width="1" height="6" fill="#8D6E63"/>
+      <rect x="13.5" y="4" width="1" height="1" fill="#FFD700"/>
+    </g>
+  </g>
+</svg>

package/bin/claude-pet.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+const electron = require('electron');
+const { spawn } = require('child_process');
+const path = require('path');
+
+spawn(electron, [path.join(__dirname, '..')], { stdio: 'inherit' });

package/main.js

@@ -0,0 +1,86 @@
+const { app, BrowserWindow, ipcMain, screen, Tray, Menu, nativeImage } = require('electron');
+const path = require('path');
+
+let win;
+let tray;
+
+app.commandLine.appendSwitch('disable-background-timer-throttling');
+
+function createWindow() {
+  win = new BrowserWindow({
+    width: 128,
+    height: 128,
+    transparent: true,
+    frame: false,
+    alwaysOnTop: true,
+    skipTaskbar: true,
+    resizable: false,
+    hasShadow: false,
+    paintWhenInitiallyHidden: false,
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
+      backgroundThrottling: false,
+    },
+  });
+
+  win.loadFile(path.join(__dirname, 'renderer', 'index.html'));
+
+  // win.webContents.openDevTools(); // Debug için
+
+  win.on('closed', () => {
+    win = null;
+  });
+}
+
+function createTray() {
+  // Not: assets/tray-icon.png dosyası olmalı
+  const iconPath = path.join(__dirname, 'assets', 'tray-icon.ico');
+  const icon = nativeImage.createFromPath(iconPath);
+  
+  tray = new Tray(icon);
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Show', click: () => win.show() },
+    { label: 'Hide', click: () => win.hide() },
+    { type: 'separator' },
+    { label: 'Quit', click: () => app.quit() }
+  ]);
+
+  tray.setToolTip('Claude Pet');
+  tray.setContextMenu(contextMenu);
+}
+
+app.whenReady().then(() => {
+  createWindow();
+  createTray();
+
+  app.setLoginItemSettings({
+    openAtLogin: true,
+    name: 'ClaudePet'
+  });
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) {
+      createWindow();
+    }
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+// IPC: Renderer'dan pozisyon güncellemesi
+ipcMain.on('move-window', (event, { x, y }) => {
+  if (win) {
+    win.setPosition(Math.round(x), Math.round(y));
+  }
+});
+
+// IPC: Ekran boyutunu gönder
+ipcMain.handle('get-screen-size', () => {
+  return screen.getPrimaryDisplay().workAreaSize;
+});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "clawd-desktop",
+  "version": "1.0.0",
+  "description": "A pixel-art Claude mascot that lives on your desktop",
+  "main": "main.js",
+  "bin": {
+    "clawd-desktop": "./bin/claude-pet.js"
+  },
+  "files": [
+    "main.js",
+    "preload.js",
+    "renderer/",
+    "assets/",
+    "bin/"
+  ],
+  "scripts": {
+    "start": "electron .",
+    "build": "electron-builder",
+    "test": "echo \"No tests\" && exit 0"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "desktop-pet",
+    "electron",
+    "pixel-art",
+    "mascot",
+    "windows"
+  ],
+  "author": "KebeliSamet0",
+  "license": "MIT",
+  "dependencies": {
+    "electron": "^30.0.0"
+  },
+  "devDependencies": {
+    "electron-builder": "^24.13.3"
+  }
+}

package/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron');
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  moveWindow: (pos) => ipcRenderer.send('move-window', pos),
+  getScreenSize: () => ipcRenderer.invoke('get-screen-size')
+});