replicas-computer 0.2.10 → 0.2.12

package/README.md

@@ -8,7 +8,7 @@ The versioned computer-use runtime for Replicas workspace images.
 - `src/stream-viewer.ts` owns browser decoding, audio playback, reconnects, and interactive input.
 - `src/viewer.ts` owns the optional noVNC fallback.
 - `assets/desktop/start-services.sh` owns the X11 and stream process lifecycle.
-- `assets/desktop/` owns the desktop theme: `brand-wallpaper.svg` (regenerate with `bun scripts/render-wallpaper.ts`), `tint2rc` dock, `openbox-theme/`, `gtk-settings.ini`, the `replicas-terminal` wrapper, and the bundled fonts (static TTF instances of General Sans and Geist Mono; variable and WOFF2 builds render with wrong metrics in Pango and VTE).
+- `assets/desktop/` owns the desktop theme: `brand-wallpaper.svg` (regenerate with `bun scripts/render-wallpaper.ts`), `tint2rc` dock, `openbox-theme/`, `gtk-settings.ini`, the `replicas-terminal` wrapper, `themes/` palettes that `start-services.sh` renders into those templates (`--theme light|dark` switches a running desktop), and the bundled fonts (static TTF instances of General Sans and Geist Mono; variable and WOFF2 builds render with wrong metrics in Pango and VTE).
 
 The viewer and agent command paths are independent. One on-demand encoder is shared by all viewers, stops when the last viewer disconnects, and restarts without reloading the page. The default 1920×1080 stream uses low-latency H.264 and Opus; noVNC remains available as an opt-in fallback.
 

package/assets/desktop/brand-wallpaper-light.svg

@@ -0,0 +1,14 @@
+<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="cell" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#2fc487" stop-opacity="0.3"/><stop offset="1" stop-color="#2fc487" stop-opacity="0.14"/></linearGradient>
+<pattern id="grid" width="64" height="64" y="28" patternUnits="userSpaceOnUse"><path d="M0.5 0V64M0 0.5H64" stroke="#162118" stroke-opacity="0.1"/></pattern>
+<filter id="cell-glow" x="-25%" y="-25%" width="150%" height="150%"><feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="#2fc487" flood-opacity="0.18"/></filter>
+</defs>
+<rect width="1920" height="1080" fill="#f4f5f1"/>
+<rect width="1920" height="1080" fill="url(#grid)"/>
+<g fill="url(#cell)" stroke="#2fc487" filter="url(#cell-glow)"><rect x="768.5" y="220.5" width="64" height="64"/><rect x="768.5" y="284.5" width="64" height="64"/><rect x="832.5" y="220.5" width="64" height="64"/><rect x="832.5" y="284.5" width="64" height="64"/><rect x="896.5" y="220.5" width="64" height="64"/><rect x="896.5" y="284.5" width="64" height="64"/><rect x="960.5" y="220.5" width="64" height="64"/><rect x="960.5" y="284.5" width="64" height="64"/><rect x="1024.5" y="348.5" width="64" height="64"/><rect x="1024.5" y="412.5" width="64" height="64"/><rect x="1088.5" y="348.5" width="64" height="64"/><rect x="1088.5" y="412.5" width="64" height="64"/><rect x="768.5" y="476.5" width="64" height="64"/><rect x="768.5" y="540.5" width="64" height="64"/><rect x="832.5" y="476.5" width="64" height="64"/><rect x="832.5" y="540.5" width="64" height="64"/><rect x="896.5" y="476.5" width="64" height="64"/><rect x="896.5" y="540.5" width="64" height="64"/><rect x="960.5" y="476.5" width="64" height="64"/><rect x="960.5" y="540.5" width="64" height="64"/><rect x="768.5" y="604.5" width="64" height="64"/><rect x="768.5" y="668.5" width="64" height="64"/><rect x="832.5" y="604.5" width="64" height="64"/><rect x="832.5" y="668.5" width="64" height="64"/><rect x="1024.5" y="604.5" width="64" height="64"/><rect x="1024.5" y="668.5" width="64" height="64"/><rect x="1088.5" y="604.5" width="64" height="64"/><rect x="1088.5" y="668.5" width="64" height="64"/><rect x="320.5" y="156.5" width="64" height="64"/><rect x="384.5" y="220.5" width="64" height="64"/><rect x="256.5" y="284.5" width="64" height="64"/><rect x="320.5" y="284.5" width="64" height="64"/><rect x="384.5" y="284.5" width="64" height="64"/><rect x="1536.5" y="220.5" width="64" height="64"/><rect x="1472.5" y="284.5" width="64" height="64"/><rect x="1600.5" y="348.5" width="64" height="64"/><rect x="1536.5" y="348.5" width="64" height="64"/><rect x="1472.5" y="348.5" width="64" height="64"/><rect x="448.5" y="860.5" width="64" height="64"/><rect x="512.5" y="796.5" width="64" height="64"/><rect x="384.5" y="732.5" width="64" height="64"/><rect x="448.5" y="732.5" width="64" height="64"/><rect x="512.5" y="732.5" width="64" height="64"/><rect x="1344.5" y="796.5" width="64" height="64"/><rect x="1408.5" y="796.5" width="64" height="64"/><rect x="1472.5" y="796.5" width="64" height="64"/><rect x="1664.5" y="540.5" width="64" height="64"/><rect x="1728.5" y="540.5" width="64" height="64"/><rect x="1664.5" y="604.5" width="64" height="64"/><rect x="1728.5" y="604.5" width="64" height="64"/></g>
+<g font-family="Geist Mono, monospace" font-size="5" font-weight="600" fill="#2f9d57"><text x="774" y="233">AGENT-73</text><text x="774" y="276">CODING</text><text x="774" y="297">AGENT-45</text><text x="774" y="340">DEPLOYING</text><text x="838" y="233">AGENT-10</text><text x="838" y="276">LINTING</text><text x="838" y="297">AGENT-82</text><text x="838" y="340">MERGING</text><text x="902" y="233">AGENT-47</text><text x="902" y="276">REFACTORING</text><text x="902" y="297">AGENT-19</text><text x="902" y="340">CODING</text><text x="966" y="233">AGENT-84</text><text x="966" y="276">RUNNING TESTS</text><text x="966" y="297">AGENT-56</text><text x="966" y="340">LINTING</text><text x="1030" y="361">AGENT-65</text><text x="1030" y="404">CODING</text><text x="1030" y="425">AGENT-37</text><text x="1030" y="468">DEPLOYING</text><text x="1094" y="361">AGENT-02</text><text x="1094" y="404">LINTING</text><text x="1094" y="425">AGENT-74</text><text x="1094" y="468">MERGING</text><text x="774" y="489">AGENT-61</text><text x="774" y="532">DEPLOYING</text><text x="774" y="553">AGENT-33</text><text x="774" y="596">REFACTORING</text><text x="838" y="489">AGENT-98</text><text x="838" y="532">MERGING</text><text x="838" y="553">AGENT-70</text><text x="838" y="596">RUNNING TESTS</text><text x="902" y="489">AGENT-35</text><text x="902" y="532">CODING</text><text x="902" y="553">AGENT-07</text><text x="902" y="596">DEPLOYING</text><text x="966" y="489">AGENT-72</text><text x="966" y="532">LINTING</text><text x="966" y="553">AGENT-44</text><text x="966" y="596">MERGING</text><text x="774" y="617">AGENT-05</text><text x="774" y="660">CODING</text><text x="774" y="681">AGENT-77</text><text x="774" y="724">DEPLOYING</text><text x="838" y="617">AGENT-42</text><text x="838" y="660">LINTING</text><text x="838" y="681">AGENT-14</text><text x="838" y="724">MERGING</text><text x="1030" y="617">AGENT-53</text><text x="1030" y="660">DEPLOYING</text><text x="1030" y="681">AGENT-25</text><text x="1030" y="724">REFACTORING</text><text x="1094" y="617">AGENT-90</text><text x="1094" y="660">MERGING</text><text x="1094" y="681">AGENT-62</text><text x="1094" y="724">RUNNING TESTS</text><text x="326" y="169">AGENT-42</text><text x="326" y="212">LINTING</text><text x="390" y="233">AGENT-51</text><text x="390" y="276">CODING</text><text x="262" y="297">AGENT-49</text><text x="262" y="340">REFACTORING</text><text x="326" y="297">AGENT-86</text><text x="326" y="340">RUNNING TESTS</text><text x="390" y="297">AGENT-23</text><text x="390" y="340">DEPLOYING</text><text x="1542" y="233">AGENT-17</text><text x="1542" y="276">CODING</text><text x="1478" y="297">AGENT-52</text><text x="1478" y="340">RUNNING TESTS</text><text x="1606" y="361">AGENT-98</text><text x="1606" y="404">RUNNING TESTS</text><text x="1542" y="361">AGENT-61</text><text x="1542" y="404">REFACTORING</text><text x="1478" y="361">AGENT-24</text><text x="1478" y="404">LINTING</text><text x="454" y="873">AGENT-08</text><text x="454" y="916">MERGING</text><text x="518" y="809">AGENT-73</text><text x="518" y="852">REFACTORING</text><text x="390" y="745">AGENT-27</text><text x="390" y="788">REFACTORING</text><text x="454" y="745">AGENT-64</text><text x="454" y="788">RUNNING TESTS</text><text x="518" y="745">AGENT-01</text><text x="518" y="788">DEPLOYING</text><text x="1350" y="809">AGENT-54</text><text x="1350" y="852">RUNNING TESTS</text><text x="1414" y="809">AGENT-91</text><text x="1414" y="852">DEPLOYING</text><text x="1478" y="809">AGENT-28</text><text x="1478" y="852">MERGING</text><text x="1670" y="553">AGENT-51</text><text x="1670" y="596">DEPLOYING</text><text x="1734" y="553">AGENT-88</text><text x="1734" y="596">MERGING</text><text x="1670" y="617">AGENT-23</text><text x="1670" y="660">REFACTORING</text><text x="1734" y="617">AGENT-60</text><text x="1734" y="660">RUNNING TESTS</text></g>
+<path transform="translate(893.05 842)" fill="#162118" fill-opacity="0.9" d="M5.3 0H3.3V-28.7H13.2Q17.5 -28.7 20 -26.5Q22.6 -24.3 22.6 -20.2Q22.6 -16.9 20.5 -14.6Q18.4 -12.4 14.9 -12L23.3 0H20.9L12.8 -11.8H5.3ZM5.3 -27.1V-13.4H13Q16.5 -13.4 18.5 -15.2Q20.6 -17 20.6 -20.2Q20.6 -23.5 18.5 -25.3Q16.5 -27.1 13 -27.1Z M33.8 0.4Q31 0.4 28.8 -0.9Q26.6 -2.3 25.4 -4.9Q24.2 -7.4 24.2 -10.7Q24.2 -13.7 25.5 -16.2Q26.7 -18.6 28.8 -20Q30.9 -21.4 33.6 -21.4Q35.8 -21.4 37.5 -20.6Q39.2 -19.7 40.5 -18.2Q41.7 -16.7 42.3 -14.7Q42.9 -12.6 42.8 -10.1H25.2V-11.5H40.9Q40.7 -15.4 38.8 -17.7Q36.8 -19.9 33.6 -19.9Q31.4 -19.9 29.7 -18.7Q28 -17.6 27 -15.5Q26.1 -13.5 26.1 -10.7Q26.1 -7.8 27 -5.6Q27.9 -3.4 29.7 -2.3Q31.4 -1.1 33.8 -1.1Q36.7 -1.1 38.6 -2.7Q40.6 -4.3 41.1 -7.1H42.9Q42.3 -3.6 39.8 -1.6Q37.4 0.4 33.8 0.4Z M64.2 -10.5Q64.2 -7.2 63.1 -4.8Q61.9 -2.3 59.9 -1Q57.8 0.4 55 0.4Q52.5 0.4 50.5 -1Q48.5 -2.4 47.4 -4.8V7.7H45.5V-21H47.3V-15.9Q48.3 -18.5 50.4 -19.9Q52.5 -21.4 55 -21.4Q57.8 -21.4 59.9 -20Q61.9 -18.7 63.1 -16.2Q64.2 -13.8 64.2 -10.5ZM62.3 -10.5Q62.3 -14.8 60.3 -17.3Q58.3 -19.8 54.8 -19.8Q52.7 -19.8 51 -18.7Q49.3 -17.6 48.3 -15.5Q47.3 -13.5 47.3 -10.5Q47.3 -7.7 48.3 -5.6Q49.2 -3.5 50.9 -2.3Q52.6 -1.2 54.8 -1.2Q58.3 -1.2 60.3 -3.6Q62.3 -6.1 62.3 -10.5Z M68.7 0H66.8V-28.7H68.7Z M74.8 0H72.9V-21H74.8ZM75.6 -25.8Q75.6 -25.1 75.2 -24.6Q74.7 -24.1 73.9 -24.1Q73.1 -24.1 72.6 -24.6Q72.1 -25.1 72.1 -25.8Q72.1 -26.6 72.6 -27Q73.1 -27.5 73.9 -27.5Q74.7 -27.5 75.2 -27Q75.6 -26.6 75.6 -25.8Z M86.5 0.4Q83.8 0.4 81.8 -0.9Q79.7 -2.3 78.6 -4.8Q77.4 -7.3 77.4 -10.5Q77.4 -13.7 78.6 -16.2Q79.7 -18.6 81.8 -20Q83.9 -21.4 86.5 -21.4Q88.9 -21.4 90.7 -20.4Q92.6 -19.4 93.8 -17.6Q95 -15.7 95.5 -13.2H93.6Q93 -16.3 91.2 -18.1Q89.3 -19.8 86.5 -19.8Q84.4 -19.8 82.8 -18.6Q81.1 -17.4 80.2 -15.4Q79.3 -13.3 79.3 -10.5Q79.3 -7.7 80.2 -5.6Q81.1 -3.5 82.8 -2.3Q84.4 -1.1 86.5 -1.1Q89.3 -1.1 91.2 -2.9Q93.1 -4.7 93.6 -7.8H95.5Q95.1 -5.2 93.8 -3.4Q92.6 -1.6 90.8 -0.6Q88.9 0.4 86.5 0.4Z M111.1 0V-4.2Q110.3 -2.1 108.3 -0.9Q106.4 0.4 103.9 0.4Q100.6 0.4 98.7 -1.3Q96.7 -2.9 96.7 -5.7Q96.7 -8.8 99.2 -10.4Q101.6 -11.9 106.4 -11.9Q107.4 -11.9 108.3 -11.9Q109.3 -11.8 111 -11.7V-13.6Q111 -16.6 109.5 -18.2Q108.1 -19.9 105.4 -19.9Q102.6 -19.9 100.9 -18.2Q99.3 -16.5 99.2 -13.7H97.5Q97.5 -16 98.5 -17.7Q99.5 -19.4 101.3 -20.4Q103.1 -21.4 105.4 -21.4Q108.9 -21.4 110.9 -19.4Q112.8 -17.4 112.8 -13.8V0ZM98.6 -5.8Q98.6 -3.7 100.1 -2.4Q101.6 -1 104 -1Q107.2 -1 109.1 -3.1Q111 -5.1 111 -8.4V-10.4Q109.5 -10.5 108.5 -10.5Q107.4 -10.6 106.5 -10.6Q102.5 -10.6 100.5 -9.4Q98.6 -8.2 98.6 -5.8Z M131.9 -5.5Q131.9 -2.8 129.8 -1.2Q127.7 0.4 123.9 0.4Q120.3 0.4 118 -1.4Q115.8 -3.2 115.5 -6.4H117.3Q117.4 -3.9 119.2 -2.5Q121 -1.1 124 -1.1Q126.9 -1.1 128.5 -2.2Q130 -3.3 130 -5.3Q130 -7.1 128.9 -8Q127.8 -8.9 125.2 -9.4L122.4 -10Q119.3 -10.6 117.8 -12Q116.3 -13.4 116.3 -15.6Q116.3 -17.3 117.2 -18.6Q118.2 -19.9 119.8 -20.6Q121.5 -21.4 123.7 -21.4Q126 -21.4 127.7 -20.6Q129.5 -19.8 130.5 -18.3Q131.5 -16.8 131.7 -14.8H129.9Q129.7 -17.2 128 -18.6Q126.4 -19.9 123.7 -19.9Q121.2 -19.9 119.6 -18.8Q118.1 -17.7 118.1 -15.8Q118.1 -14 119.2 -13.1Q120.4 -12.1 123 -11.6L125.9 -11Q129 -10.4 130.5 -9.1Q131.9 -7.8 131.9 -5.5Z"/>
+<g font-family="Geist Mono, monospace" font-size="14" fill="#162118" fill-opacity="0.4" text-anchor="middle"><text x="14" y="22">+</text><text x="1906" y="22">+</text><text x="14" y="1070">+</text><text x="1906" y="1070">+</text></g>
+<text x="34" y="22" font-family="Geist Mono, monospace" font-size="10" letter-spacing="1.4" fill="#162118" fill-opacity="0.45">REPLICAS / DESKTOP</text>
+</svg>

package/assets/desktop/brand-wallpaper.svg

@@ -1,12 +1,10 @@
 <svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
 <defs>
 <linearGradient id="cell" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#082b24" stop-opacity="0.95"/><stop offset="1" stop-color="#005b45" stop-opacity="0.82"/></linearGradient>
-<radialGradient id="glow" gradientUnits="userSpaceOnUse" cx="960" cy="476" r="620"><stop stop-color="#3eeba3" stop-opacity="0.07"/><stop offset="1" stop-color="#3eeba3" stop-opacity="0"/></radialGradient>
 <pattern id="grid" width="64" height="64" y="28" patternUnits="userSpaceOnUse"><path d="M0.5 0V64M0 0.5H64" stroke="#ffffff" stroke-opacity="0.12"/></pattern>
 <filter id="cell-glow" x="-25%" y="-25%" width="150%" height="150%"><feDropShadow dx="0" dy="0" stdDeviation="10" flood-color="#3eeba3" flood-opacity="0.16"/></filter>
 </defs>
 <rect width="1920" height="1080" fill="#121212"/>
-<rect width="1920" height="1080" fill="url(#glow)"/>
 <rect width="1920" height="1080" fill="url(#grid)"/>
 <g fill="url(#cell)" stroke="#3eeba3" filter="url(#cell-glow)"><rect x="768.5" y="220.5" width="64" height="64"/><rect x="768.5" y="284.5" width="64" height="64"/><rect x="832.5" y="220.5" width="64" height="64"/><rect x="832.5" y="284.5" width="64" height="64"/><rect x="896.5" y="220.5" width="64" height="64"/><rect x="896.5" y="284.5" width="64" height="64"/><rect x="960.5" y="220.5" width="64" height="64"/><rect x="960.5" y="284.5" width="64" height="64"/><rect x="1024.5" y="348.5" width="64" height="64"/><rect x="1024.5" y="412.5" width="64" height="64"/><rect x="1088.5" y="348.5" width="64" height="64"/><rect x="1088.5" y="412.5" width="64" height="64"/><rect x="768.5" y="476.5" width="64" height="64"/><rect x="768.5" y="540.5" width="64" height="64"/><rect x="832.5" y="476.5" width="64" height="64"/><rect x="832.5" y="540.5" width="64" height="64"/><rect x="896.5" y="476.5" width="64" height="64"/><rect x="896.5" y="540.5" width="64" height="64"/><rect x="960.5" y="476.5" width="64" height="64"/><rect x="960.5" y="540.5" width="64" height="64"/><rect x="768.5" y="604.5" width="64" height="64"/><rect x="768.5" y="668.5" width="64" height="64"/><rect x="832.5" y="604.5" width="64" height="64"/><rect x="832.5" y="668.5" width="64" height="64"/><rect x="1024.5" y="604.5" width="64" height="64"/><rect x="1024.5" y="668.5" width="64" height="64"/><rect x="1088.5" y="604.5" width="64" height="64"/><rect x="1088.5" y="668.5" width="64" height="64"/><rect x="320.5" y="156.5" width="64" height="64"/><rect x="384.5" y="220.5" width="64" height="64"/><rect x="256.5" y="284.5" width="64" height="64"/><rect x="320.5" y="284.5" width="64" height="64"/><rect x="384.5" y="284.5" width="64" height="64"/><rect x="1536.5" y="220.5" width="64" height="64"/><rect x="1472.5" y="284.5" width="64" height="64"/><rect x="1600.5" y="348.5" width="64" height="64"/><rect x="1536.5" y="348.5" width="64" height="64"/><rect x="1472.5" y="348.5" width="64" height="64"/><rect x="448.5" y="860.5" width="64" height="64"/><rect x="512.5" y="796.5" width="64" height="64"/><rect x="384.5" y="732.5" width="64" height="64"/><rect x="448.5" y="732.5" width="64" height="64"/><rect x="512.5" y="732.5" width="64" height="64"/><rect x="1344.5" y="796.5" width="64" height="64"/><rect x="1408.5" y="796.5" width="64" height="64"/><rect x="1472.5" y="796.5" width="64" height="64"/><rect x="1664.5" y="540.5" width="64" height="64"/><rect x="1728.5" y="540.5" width="64" height="64"/><rect x="1664.5" y="604.5" width="64" height="64"/><rect x="1728.5" y="604.5" width="64" height="64"/></g>
 <g font-family="Geist Mono, monospace" font-size="5" font-weight="600" fill="#3eeba3"><text x="774" y="233">AGENT-73</text><text x="774" y="276">CODING</text><text x="774" y="297">AGENT-45</text><text x="774" y="340">DEPLOYING</text><text x="838" y="233">AGENT-10</text><text x="838" y="276">LINTING</text><text x="838" y="297">AGENT-82</text><text x="838" y="340">MERGING</text><text x="902" y="233">AGENT-47</text><text x="902" y="276">REFACTORING</text><text x="902" y="297">AGENT-19</text><text x="902" y="340">CODING</text><text x="966" y="233">AGENT-84</text><text x="966" y="276">RUNNING TESTS</text><text x="966" y="297">AGENT-56</text><text x="966" y="340">LINTING</text><text x="1030" y="361">AGENT-65</text><text x="1030" y="404">CODING</text><text x="1030" y="425">AGENT-37</text><text x="1030" y="468">DEPLOYING</text><text x="1094" y="361">AGENT-02</text><text x="1094" y="404">LINTING</text><text x="1094" y="425">AGENT-74</text><text x="1094" y="468">MERGING</text><text x="774" y="489">AGENT-61</text><text x="774" y="532">DEPLOYING</text><text x="774" y="553">AGENT-33</text><text x="774" y="596">REFACTORING</text><text x="838" y="489">AGENT-98</text><text x="838" y="532">MERGING</text><text x="838" y="553">AGENT-70</text><text x="838" y="596">RUNNING TESTS</text><text x="902" y="489">AGENT-35</text><text x="902" y="532">CODING</text><text x="902" y="553">AGENT-07</text><text x="902" y="596">DEPLOYING</text><text x="966" y="489">AGENT-72</text><text x="966" y="532">LINTING</text><text x="966" y="553">AGENT-44</text><text x="966" y="596">MERGING</text><text x="774" y="617">AGENT-05</text><text x="774" y="660">CODING</text><text x="774" y="681">AGENT-77</text><text x="774" y="724">DEPLOYING</text><text x="838" y="617">AGENT-42</text><text x="838" y="660">LINTING</text><text x="838" y="681">AGENT-14</text><text x="838" y="724">MERGING</text><text x="1030" y="617">AGENT-53</text><text x="1030" y="660">DEPLOYING</text><text x="1030" y="681">AGENT-25</text><text x="1030" y="724">REFACTORING</text><text x="1094" y="617">AGENT-90</text><text x="1094" y="660">MERGING</text><text x="1094" y="681">AGENT-62</text><text x="1094" y="724">RUNNING TESTS</text><text x="326" y="169">AGENT-42</text><text x="326" y="212">LINTING</text><text x="390" y="233">AGENT-51</text><text x="390" y="276">CODING</text><text x="262" y="297">AGENT-49</text><text x="262" y="340">REFACTORING</text><text x="326" y="297">AGENT-86</text><text x="326" y="340">RUNNING TESTS</text><text x="390" y="297">AGENT-23</text><text x="390" y="340">DEPLOYING</text><text x="1542" y="233">AGENT-17</text><text x="1542" y="276">CODING</text><text x="1478" y="297">AGENT-52</text><text x="1478" y="340">RUNNING TESTS</text><text x="1606" y="361">AGENT-98</text><text x="1606" y="404">RUNNING TESTS</text><text x="1542" y="361">AGENT-61</text><text x="1542" y="404">REFACTORING</text><text x="1478" y="361">AGENT-24</text><text x="1478" y="404">LINTING</text><text x="454" y="873">AGENT-08</text><text x="454" y="916">MERGING</text><text x="518" y="809">AGENT-73</text><text x="518" y="852">REFACTORING</text><text x="390" y="745">AGENT-27</text><text x="390" y="788">REFACTORING</text><text x="454" y="745">AGENT-64</text><text x="454" y="788">RUNNING TESTS</text><text x="518" y="745">AGENT-01</text><text x="518" y="788">DEPLOYING</text><text x="1350" y="809">AGENT-54</text><text x="1350" y="852">RUNNING TESTS</text><text x="1414" y="809">AGENT-91</text><text x="1414" y="852">DEPLOYING</text><text x="1478" y="809">AGENT-28</text><text x="1478" y="852">MERGING</text><text x="1670" y="553">AGENT-51</text><text x="1670" y="596">DEPLOYING</text><text x="1734" y="553">AGENT-88</text><text x="1734" y="596">MERGING</text><text x="1670" y="617">AGENT-23</text><text x="1670" y="660">REFACTORING</text><text x="1734" y="617">AGENT-60</text><text x="1734" y="660">RUNNING TESTS</text></g>

package/assets/desktop/gtk-settings.ini

@@ -1,10 +1,10 @@
 [Settings]
-gtk-theme-name=Yaru-viridian-dark
+gtk-theme-name=@GTK_THEME_NAME@
 gtk-icon-theme-name=Yaru-viridian
 gtk-cursor-theme-name=Bibata-Modern-Ice
 gtk-cursor-theme-size=22
 gtk-font-name=General Sans 10
-gtk-application-prefer-dark-theme=1
+gtk-application-prefer-dark-theme=@GTK_PREFER_DARK@
 gtk-xft-antialias=1
 gtk-xft-hinting=1
 gtk-xft-hintstyle=hintslight

package/assets/desktop/novnc-index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Replicas Desktop</title>
+  <script src="./viewer-theme.js"></script>
   <link rel="stylesheet" href="./viewer-theme.css">
   <link rel="stylesheet" href="./viewer.css">
   <link rel="icon" href="./viewer-icon.svg" type="image/svg+xml">

package/assets/desktop/openbox-theme/themerc

@@ -6,32 +6,32 @@ window.client.padding.height: 0
 window.handle.width: 0
 window.label.text.justify: center
 
-window.active.border.color: #2b2d2c
-window.inactive.border.color: #242424
-window.*.client.color: #121212
+window.active.border.color: @BORDER@
+window.inactive.border.color: @BORDER_MUTED@
+window.*.client.color: @SURFACE_ALT@
 window.*.title.bg: flat
-window.active.title.bg.color: #171717
-window.inactive.title.bg.color: #121212
+window.active.title.bg.color: @SURFACE@
+window.inactive.title.bg.color: @SURFACE_ALT@
 window.active.label.bg: parentrelative
 window.inactive.label.bg: parentrelative
 window.active.button.*.bg: flat
-window.active.button.*.bg.color: #171717
+window.active.button.*.bg.color: @SURFACE@
 window.inactive.button.*.bg: flat
-window.inactive.button.*.bg.color: #121212
-window.active.button.*.image.color: #ededed
-window.inactive.button.*.image.color: #6f6f6f
+window.inactive.button.*.bg.color: @SURFACE_ALT@
+window.active.button.*.image.color: @INK@
+window.inactive.button.*.image.color: @INK_FAINT@
 window.active.button.*.hover.bg: flat
-window.active.button.*.hover.bg.color: #2b2b2b
+window.active.button.*.hover.bg.color: @SURFACE_RAISED@
 window.inactive.button.*.hover.bg: flat
-window.inactive.button.*.hover.bg.color: #2b2b2b
-window.active.button.*.hover.image.color: #ffffff
-window.inactive.button.*.hover.image.color: #ffffff
-window.active.button.*.pressed.image.color: #3eeba3
-window.inactive.button.*.pressed.image.color: #3eeba3
-window.active.label.text.color: #ededed
-window.inactive.label.text.color: #8a8a8a
-window.active.title.separator.color: #171717
-window.inactive.title.separator.color: #121212
+window.inactive.button.*.hover.bg.color: @SURFACE_RAISED@
+window.active.button.*.hover.image.color: @INK_STRONG@
+window.inactive.button.*.hover.image.color: @INK_STRONG@
+window.active.button.*.pressed.image.color: @ACCENT_INK@
+window.inactive.button.*.pressed.image.color: @ACCENT_INK@
+window.active.label.text.color: @INK@
+window.inactive.label.text.color: @INK_MUTED@
+window.active.title.separator.color: @SURFACE@
+window.inactive.title.separator.color: @SURFACE_ALT@
 
 menu.border.width: 1
 menu.separator.width: 1
@@ -39,28 +39,28 @@ menu.separator.padding.width: 6
 menu.separator.padding.height: 4
 menu.overlap.x: 0
 menu.overlap.y: 0
-menu.border.color: #2b2d2c
-menu.separator.color: #2b2d2c
-menu.items.text.color: #ededed
-menu.items.disabled.text.color: #5c5c5c
+menu.border.color: @BORDER@
+menu.separator.color: @BORDER@
+menu.items.text.color: @INK@
+menu.items.disabled.text.color: @INK_DISABLED@
 menu.items.active.text.color: #121212
 menu.items.active.disabled.text.color: #1c6a49
 menu.items.bg: flat
-menu.items.bg.color: #171717
+menu.items.bg.color: @SURFACE@
 menu.items.active.bg: flat
-menu.items.active.bg.color: #3eeba3
-menu.title.text.color: #a3a3a3
+menu.items.active.bg.color: @ACCENT@
+menu.title.text.color: @INK_MUTED@
 menu.title.bg: flat
-menu.title.bg.color: #121212
+menu.title.bg.color: @SURFACE_ALT@
 
 osd.border.width: 1
-osd.border.color: #2b2d2c
+osd.border.color: @BORDER@
 osd.bg: flat
-osd.bg.color: #171717
+osd.bg.color: @SURFACE@
 osd.hilight.bg: flat
-osd.hilight.bg.color: #3eeba3
+osd.hilight.bg.color: @ACCENT@
 osd.unhilight.bg: flat
-osd.unhilight.bg.color: #2b2b2b
+osd.unhilight.bg.color: @SURFACE_RAISED@
 osd.label.bg: flat
-osd.label.bg.color: #171717
-osd.label.text.color: #ededed
+osd.label.bg.color: @SURFACE@
+osd.label.text.color: @INK@

package/assets/desktop/replicas-terminal

@@ -1,10 +1,15 @@
 #!/bin/bash
 # xfce4-terminal 1.1 keeps its settings in xfconf, which needs a session bus this
 # desktop does not run, so the theme is applied per launch instead of via terminalrc.
+STATE_DIR="${REPLICAS_DESKTOP_STATE_DIR:-/tmp/replicas-computer}"
+TEMPLATES="${REPLICAS_DESKTOP_TEMPLATES:-/usr/local/share/replicas/desktop}"
+THEME="$(cat "$STATE_DIR/theme" 2>/dev/null)"
+[ -f "$TEMPLATES/themes/$THEME.env" ] || THEME=dark
+. "$TEMPLATES/themes/$THEME.env"
 exec xfce4-terminal \
   --font='Geist Mono 11' \
-  --color-bg='#121212' \
-  --color-text='#ededed' \
+  --color-bg="$SURFACE_ALT" \
+  --color-text="$INK" \
   --hide-menubar \
   --hide-toolbar \
   --hide-scrollbar \

package/assets/desktop/start-services.sh

@@ -43,6 +43,8 @@ LOCK_BUSY_EXIT_CODE="${REPLICAS_DESKTOP_LOCK_BUSY_EXIT_CODE:-75}"
 LOCK_FILE="${REPLICAS_DESKTOP_LOCK_FILE:-$STATE_DIR/services-start.lock}"
 
 mkdir -p "$STATE_DIR"
+REQUESTED_THEME=""
+[ "$1" = "--theme" ] && REQUESTED_THEME="$2"
 
 acquire_start_lock() {
   if command -v flock >/dev/null 2>&1; then
@@ -264,8 +266,8 @@ clear_bridge_pid_if_unhealthy() {
 }
 
 paint_wallpaper() {
-  local wallpaper="${REPLICAS_DESKTOP_WALLPAPER:-$REPLICAS_DESKTOP_TEMPLATES/brand-wallpaper.svg}"
-  local rendered_wallpaper="$STATE_DIR/wallpaper-${WIDTH}x${HEIGHT}.png"
+  local wallpaper="${REPLICAS_DESKTOP_WALLPAPER:-$REPLICAS_DESKTOP_TEMPLATES/$WALLPAPER}"
+  local rendered_wallpaper="$STATE_DIR/wallpaper-$THEME-${WIDTH}x${HEIGHT}.png"
   if command -v ffmpeg >/dev/null 2>&1 && [ -f "$wallpaper" ] && [ ! -f "$rendered_wallpaper" ]; then
     ffmpeg -y -loglevel error \
       -i "$wallpaper" \
@@ -278,21 +280,35 @@ paint_wallpaper() {
   elif command -v hsetroot >/dev/null 2>&1 && [ -f "$wallpaper" ]; then
     DISPLAY=":$DISPLAY_NUM" hsetroot -cover "$wallpaper" >/dev/null 2>&1 || true
   elif command -v hsetroot >/dev/null 2>&1; then
-    DISPLAY=":$DISPLAY_NUM" hsetroot -solid '#121212' >/dev/null 2>&1 || true
+    DISPLAY=":$DISPLAY_NUM" hsetroot -solid "$SURFACE_ALT" >/dev/null 2>&1 || true
   else
-    DISPLAY=":$DISPLAY_NUM" xsetroot -solid '#121212' >/dev/null 2>&1 || true
+    DISPLAY=":$DISPLAY_NUM" xsetroot -solid "$SURFACE_ALT" >/dev/null 2>&1 || true
   fi
   DISPLAY=":$DISPLAY_NUM" xsetroot -cursor_name left_ptr >/dev/null 2>&1 || true
 }
 
 acquire_start_lock
 
+REPLICAS_DESKTOP_TEMPLATES="${REPLICAS_DESKTOP_TEMPLATES:-/usr/local/share/replicas/desktop}"
+PREVIOUS_THEME="$(cat "$STATE_DIR/theme" 2>/dev/null)"
+THEME="${REQUESTED_THEME:-${PREVIOUS_THEME:-${REPLICAS_DESKTOP_THEME:-dark}}}"
+[ -f "$REPLICAS_DESKTOP_TEMPLATES/themes/$THEME.env" ] || THEME=dark
+. "$REPLICAS_DESKTOP_TEMPLATES/themes/$THEME.env"
+echo "$THEME" > "$STATE_DIR/theme"
+
+render_template() {
+  local expr="s|/usr/local/share/replicas/desktop|$REPLICAS_DESKTOP_TEMPLATES|g" key
+  for key in $(grep -o '^[A-Z_]*' "$REPLICAS_DESKTOP_TEMPLATES/themes/$THEME.env"); do
+    expr="$expr;s|@$key@|${!key}|g"
+  done
+  sed "$expr" "$1" > "$2"
+}
+
 export XCURSOR_THEME="${XCURSOR_THEME:-Bibata-Modern-Ice}"
 export XCURSOR_SIZE="${XCURSOR_SIZE:-22}"
-export GTK_THEME="${GTK_THEME:-Yaru-viridian-dark}"
+export GTK_THEME="$GTK_THEME_NAME"
 export GTK_ICON_THEME="${GTK_ICON_THEME:-Yaru-viridian}"
 
-REPLICAS_DESKTOP_TEMPLATES="${REPLICAS_DESKTOP_TEMPLATES:-/usr/local/share/replicas/desktop}"
 mkdir -p \
   "$HOME/.config/tint2" \
   "$HOME/.config/openbox" \
@@ -301,12 +317,13 @@ mkdir -p \
   "$HOME/.themes/Replicas-modern/openbox-3" \
   "$HOME/.icons/default"
 
-[ -f "$REPLICAS_DESKTOP_TEMPLATES/tint2rc" ] && sed "s|/usr/local/share/replicas/desktop|$REPLICAS_DESKTOP_TEMPLATES|g" "$REPLICAS_DESKTOP_TEMPLATES/tint2rc" > "$HOME/.config/tint2/tint2rc"
+[ -f "$REPLICAS_DESKTOP_TEMPLATES/tint2rc" ] && render_template "$REPLICAS_DESKTOP_TEMPLATES/tint2rc" "$HOME/.config/tint2/tint2rc"
 [ -f "$REPLICAS_DESKTOP_TEMPLATES/openbox-rc.xml" ] && cp "$REPLICAS_DESKTOP_TEMPLATES/openbox-rc.xml" "$HOME/.config/openbox/rc.xml"
 [ -f "$REPLICAS_DESKTOP_TEMPLATES/picom.conf" ] && cp "$REPLICAS_DESKTOP_TEMPLATES/picom.conf" "$HOME/.config/picom/picom.conf"
-[ -f "$REPLICAS_DESKTOP_TEMPLATES/gtk-settings.ini" ] && cp "$REPLICAS_DESKTOP_TEMPLATES/gtk-settings.ini" "$HOME/.config/gtk-3.0/settings.ini"
+[ -f "$REPLICAS_DESKTOP_TEMPLATES/gtk-settings.ini" ] && render_template "$REPLICAS_DESKTOP_TEMPLATES/gtk-settings.ini" "$HOME/.config/gtk-3.0/settings.ini"
 if [ -d "$REPLICAS_DESKTOP_TEMPLATES/openbox-theme" ]; then
-  cp "$REPLICAS_DESKTOP_TEMPLATES/openbox-theme/"* "$HOME/.themes/Replicas-modern/openbox-3/" 2>/dev/null || true
+  cp "$REPLICAS_DESKTOP_TEMPLATES/openbox-theme/"*.xbm "$HOME/.themes/Replicas-modern/openbox-3/" 2>/dev/null || true
+  render_template "$REPLICAS_DESKTOP_TEMPLATES/openbox-theme/themerc" "$HOME/.themes/Replicas-modern/openbox-3/themerc"
 fi
 if [ -f "$REPLICAS_DESKTOP_TEMPLATES/replicas-chrome" ]; then
   sudo install -m 0755 "$REPLICAS_DESKTOP_TEMPLATES/replicas-chrome" /usr/local/bin/replicas-chrome 2>/dev/null || true
@@ -347,6 +364,12 @@ start_bg openbox \
 sleep 0.2
 paint_wallpaper
 
+if [ -n "$REQUESTED_THEME" ] && [ "$THEME" != "$PREVIOUS_THEME" ]; then
+  DISPLAY=":$DISPLAY_NUM" openbox --reconfigure >/dev/null 2>&1 || true
+  kill_pids "$(cat "$STATE_DIR/tint2.pid" 2>/dev/null)"
+  rm -f "$STATE_DIR/tint2.pid"
+fi
+
 # tint2 panel anchors window stacking on bare openbox.
 start_bg tint2 \
   "false" \

package/assets/desktop/stream-index.html

@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Replicas Desktop</title>
+  <script src="./viewer-theme.js"></script>
   <link rel="stylesheet" href="./viewer-theme.css">
   <link rel="stylesheet" href="./stream-viewer.css">
   <link rel="icon" href="./viewer-icon.svg" type="image/svg+xml">

package/assets/desktop/stream-viewer.css

@@ -1,10 +1,10 @@
-html, body { background: var(--replicas-black); }
+html, body { background: var(--replicas-surface); }
 body { display: grid; place-items: center; }
 
 #screen {
   display: block;
   outline: none;
-  background: var(--replicas-black);
+  background: var(--replicas-surface);
   cursor: default;
   touch-action: none;
 }
@@ -17,10 +17,10 @@ body { display: grid; place-items: center; }
   bottom: 16px;
   height: 32px;
   padding: 0 12px;
-  border: 1px solid rgb(255 255 255 / 50%);
+  border: 1px solid var(--replicas-hairline-strong);
   border-radius: 0;
-  color: rgb(255 255 255 / 75%);
-  background: var(--replicas-black);
+  color: var(--replicas-ink);
+  background: var(--replicas-surface);
   font: 700 11px/1 "Geist Mono", ui-monospace, monospace;
   letter-spacing: 0.06em;
   text-transform: uppercase;
@@ -36,9 +36,9 @@ body { display: grid; place-items: center; }
   right: 12px;
   display: none;
   padding: 6px 10px;
-  border: 1px solid rgb(255 255 255 / 16%);
-  color: rgb(255 255 255 / 78%);
-  background: rgb(18 18 18 / 88%);
+  border: 1px solid var(--replicas-hairline);
+  color: var(--replicas-ink);
+  background: var(--replicas-panel);
   font-size: 11px;
   pointer-events: none;
 }

package/assets/desktop/themes/dark.env

@@ -0,0 +1,17 @@
+WALLPAPER='brand-wallpaper.svg'
+GTK_THEME_NAME='Yaru-viridian-dark'
+GTK_PREFER_DARK='1'
+SURFACE='#171717'
+SURFACE_ALT='#121212'
+SURFACE_RAISED='#2b2b2b'
+BORDER='#2b2d2c'
+BORDER_MUTED='#242424'
+INK='#ededed'
+INK_STRONG='#ffffff'
+INK_MUTED='#8a8a8a'
+INK_FAINT='#6f6f6f'
+INK_DISABLED='#5c5c5c'
+LINE='#ffffff'
+ACCENT='#3eeba3'
+ACCENT_INK='#3eeba3'
+MARK_ICON='viewer-icon.svg'

package/assets/desktop/themes/light.env

@@ -0,0 +1,17 @@
+WALLPAPER='brand-wallpaper-light.svg'
+GTK_THEME_NAME='Yaru-viridian'
+GTK_PREFER_DARK='0'
+SURFACE='#ffffff'
+SURFACE_ALT='#f2f3f1'
+SURFACE_RAISED='#e8ece7'
+BORDER='#d9ded8'
+BORDER_MUTED='#e2e6e0'
+INK='#162118'
+INK_STRONG='#000000'
+INK_MUTED='#67706a'
+INK_FAINT='#8a938d'
+INK_DISABLED='#b9c1b8'
+LINE='#162118'
+ACCENT='#2fc487'
+ACCENT_INK='#2f9d57'
+MARK_ICON='viewer-icon-light.svg'

package/assets/desktop/tint2rc

@@ -4,48 +4,48 @@
 rounded = 18
 border_width = 1
 border_sides = TBLR
-background_color = #171717 100
-border_color = #ffffff 14
-background_color_hover = #171717 100
-border_color_hover = #ffffff 14
-background_color_pressed = #171717 100
-border_color_pressed = #ffffff 14
+background_color = @SURFACE@ 100
+border_color = @LINE@ 14
+background_color_hover = @SURFACE@ 100
+border_color_hover = @LINE@ 14
+background_color_pressed = @SURFACE@ 100
+border_color_pressed = @LINE@ 14
 
 # id 2 -> launcher_icon_background_id
 rounded = 12
 border_width = 0
-background_color = #ffffff 0
+background_color = @LINE@ 0
 border_color = #000000 0
-background_color_hover = #ffffff 10
+background_color_hover = @LINE@ 10
 border_color_hover = #000000 0
-background_color_pressed = #ffffff 6
+background_color_pressed = @LINE@ 6
 border_color_pressed = #000000 0
 
 # id 3 -> task_background_id, task_iconified_background_id
 rounded = 12
 border_width = 0
-background_color = #ffffff 8
+background_color = @LINE@ 8
 border_color = #000000 0
-background_color_hover = #ffffff 13
+background_color_hover = @LINE@ 13
 border_color_hover = #000000 0
-background_color_pressed = #ffffff 6
+background_color_pressed = @LINE@ 6
 border_color_pressed = #000000 0
 
 # id 4 -> task_active_background_id, task_urgent_background_id
 rounded = 12
 border_width = 1
-background_color = #3eeba3 12
-border_color = #3eeba3 40
-background_color_hover = #3eeba3 16
-border_color_hover = #3eeba3 40
-background_color_pressed = #3eeba3 10
-border_color_pressed = #3eeba3 40
+background_color = @ACCENT@ 12
+border_color = @ACCENT@ 40
+background_color_hover = @ACCENT@ 16
+border_color_hover = @ACCENT@ 40
+background_color_pressed = @ACCENT@ 10
+border_color_pressed = @ACCENT@ 40
 
 # id 5 -> tooltip_background_id
 rounded = 6
 border_width = 1
-background_color = #121212 96
-border_color = #ffffff 16
+background_color = @SURFACE_ALT@ 96
+border_color = @LINE@ 16
 
 panel_items = PLT:C
 panel_size = 100% 72
@@ -66,7 +66,7 @@ mouse_hover_icon_asb = 100 0 12
 mouse_pressed_icon_asb = 100 0 -14
 
 button = new
-button_icon = /usr/local/share/replicas/desktop/viewer-icon.svg
+button_icon = /usr/local/share/replicas/desktop/@MARK_ICON@
 button_tooltip = Replicas Desktop
 button_background_id = 0
 button_centered = 1
@@ -113,7 +113,7 @@ urgent_nb_of_blink = 8
 
 separator = new
 separator_background_id = 0
-separator_color = #ffffff 18
+separator_color = @LINE@ 18
 separator_style = line
 separator_size = 1
 separator_padding = 6 14
@@ -122,7 +122,7 @@ time1_format = %H:%M
 time2_format = %a %-d %b
 time1_font = General Sans Semibold 12
 time2_font = Geist Mono 8
-clock_font_color = #ededed 100
+clock_font_color = @INK@ 100
 clock_padding = 12 0
 clock_background_id = 0
 clock_tooltip = %A, %B %-d
@@ -131,7 +131,7 @@ tooltip_padding = 10 6
 tooltip_show_timeout = 0.4
 tooltip_hide_timeout = 0.1
 tooltip_background_id = 5
-tooltip_font_color = #ededed 100
+tooltip_font_color = @INK@ 100
 tooltip_font = General Sans 10
 
 mouse_middle = none

package/assets/desktop/viewer-icon-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" fill="#2fc487">
+  <path d="M68 30h75v75H68zm75 0h75v75h-75zm75 75h75v75h-75zM68 180h75v75H68zm75 0h75v75h-75zm-75 75h75v75H68zm150 0h75v75h-75z"/>
+</svg>

package/assets/desktop/viewer-theme.css

@@ -31,13 +31,37 @@
 }
 
 :root {
-  --replicas-black: #121212;
   --replicas-green: #3eeba3;
+  --replicas-mark-glow: rgb(62 235 163 / 45%);
+  --replicas-mark-filter: brightness(1);
+  --replicas-surface: #121212;
+  --replicas-ink: #ededed;
+  --replicas-title: #ffffff;
+  --replicas-ink-muted: rgb(255 255 255 / 60%);
+  --replicas-ink-faint: rgb(255 255 255 / 40%);
+  --replicas-hairline: rgb(255 255 255 / 16%);
+  --replicas-hairline-strong: rgb(255 255 255 / 50%);
+  --replicas-grid-line: rgb(255 255 255 / 12%);
+  --replicas-panel: rgb(18 18 18 / 90%);
   --replicas-grid:
-    linear-gradient(to right, rgb(255 255 255 / 12%) 1px, transparent 1px) center / 64px 64px,
-    linear-gradient(to bottom, rgb(255 255 255 / 12%) 1px, transparent 1px) center / 64px 64px,
-    radial-gradient(circle at 50% 50%, rgb(62 235 163 / 7%), transparent 36%),
-    var(--replicas-black);
+    linear-gradient(to right, var(--replicas-grid-line) 1px, transparent 1px) center / 64px 64px,
+    linear-gradient(to bottom, var(--replicas-grid-line) 1px, transparent 1px) center / 64px 64px,
+    var(--replicas-surface);
+}
+
+:root[data-theme="light"] {
+  --replicas-green: #2fc487;
+  --replicas-mark-glow: rgb(47 196 135 / 40%);
+  --replicas-mark-filter: brightness(0.84);
+  --replicas-surface: #f4f5f1;
+  --replicas-ink: #162118;
+  --replicas-title: #162118;
+  --replicas-ink-muted: rgb(22 33 24 / 60%);
+  --replicas-ink-faint: rgb(22 33 24 / 40%);
+  --replicas-hairline: rgb(22 33 24 / 14%);
+  --replicas-hairline-strong: rgb(22 33 24 / 45%);
+  --replicas-grid-line: rgb(22 33 24 / 10%);
+  --replicas-panel: rgb(244 245 241 / 92%);
 }
 
 html, body {
@@ -45,7 +69,7 @@ html, body {
   height: 100%;
   margin: 0;
   overflow: hidden;
-  color: #ededed;
+  color: var(--replicas-ink);
   font-family: "Geist Mono", ui-monospace, monospace;
 }
 
@@ -67,7 +91,7 @@ html, body {
 #status img {
   width: 56px;
   height: 56px;
-  filter: drop-shadow(0 0 18px rgb(62 235 163 / 45%));
+  filter: var(--replicas-mark-filter) drop-shadow(0 0 18px var(--replicas-mark-glow));
   animation: status-pulse 2.4s ease-in-out infinite;
 }
 
@@ -81,7 +105,7 @@ html, body {
 }
 
 #status-title {
-  color: #fff;
+  color: var(--replicas-title);
   font-family: "General Sans", system-ui, sans-serif;
   font-size: 30px;
   font-weight: 300;
@@ -92,7 +116,7 @@ html, body {
 #status-text {
   max-width: 72ch;
   padding: 0 24px;
-  color: rgb(255 255 255 / 60%);
+  color: var(--replicas-ink-muted);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.12em;
@@ -103,7 +127,7 @@ html, body {
 
 .frame-corner, .frame-label {
   position: absolute;
-  color: rgb(255 255 255 / 40%);
+  color: var(--replicas-ink-faint);
   font-size: 14px;
   line-height: 1;
 }

package/assets/desktop/viewer-theme.js

@@ -0,0 +1,8 @@
+(() => {
+  const requested = new URLSearchParams(location.search).get('theme');
+  const theme = requested === 'light' || requested === 'dark'
+    ? requested
+    : matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+})();

package/assets/desktop/viewer.css

@@ -10,9 +10,9 @@ html, body { background: var(--replicas-grid); }
   bottom: 20px;
   left: 50%;
   padding: 8px 12px;
-  border: 1px solid rgb(255 255 255 / 16%);
-  color: rgb(255 255 255 / 85%);
-  background: rgb(18 18 18 / 94%);
+  border: 1px solid var(--replicas-hairline);
+  color: var(--replicas-ink);
+  background: var(--replicas-panel);
   font-size: 11px;
   font-weight: 500;
   white-space: nowrap;

package/dist/index.js

@@ -2926,7 +2926,7 @@ async function computerStatusCommand() {
 }
 
 // src/version.ts
-var COMPUTER_USE_VERSION = "0.2.10";
+var COMPUTER_USE_VERSION = "0.2.12";
 var COMPUTER_USE_PROTOCOL_VERSION = 1;
 
 // src/program.ts
@@ -3544,6 +3544,7 @@ function mediaPacket(kind, timestamp, payload) {
 function validInput(value) {
   if (!value || typeof value !== "object" || !("type" in value) || typeof value.type !== "string") return false;
   if (value.type === "release") return true;
+  if (value.type === "theme") return "theme" in value && (value.theme === "light" || value.theme === "dark");
   if (value.type === "stats") return "videoFps" in value && typeof value.videoFps === "number" && Number.isFinite(value.videoFps) && "audioPacketsPerSecond" in value && typeof value.audioPacketsPerSecond === "number" && Number.isFinite(value.audioPacketsPerSecond) && "decodeQueue" in value && typeof value.decodeQueue === "number" && Number.isFinite(value.decodeQueue) && "rttMs" in value && typeof value.rttMs === "number" && Number.isFinite(value.rttMs);
   if (value.type === "ping" || value.type === "pong") return "sentAt" in value && typeof value.sentAt === "number";
   if (value.type === "key") return "code" in value && typeof value.code === "string" && value.code.length < 40 && "down" in value && typeof value.down === "boolean";
@@ -3552,6 +3553,28 @@ function validInput(value) {
   if (value.type === "button") return "button" in value && typeof value.button === "number" && "down" in value && typeof value.down === "boolean";
   return value.type === "wheel" && "deltaX" in value && typeof value.deltaX === "number" && "deltaY" in value && typeof value.deltaY === "number";
 }
+var appliedTheme;
+var pendingTheme;
+var applyingTheme = false;
+function applyDesktopTheme(theme) {
+  pendingTheme = theme;
+  if (!applyingTheme) drainDesktopTheme();
+}
+function drainDesktopTheme() {
+  const theme = pendingTheme;
+  pendingTheme = void 0;
+  if (theme === void 0 || theme === appliedTheme) return;
+  applyingTheme = true;
+  const finish = (applied) => {
+    applyingTheme = false;
+    if (applied) appliedTheme = theme;
+    drainDesktopTheme();
+  };
+  const child = spawn4("bash", [SERVICES_SCRIPT, "--theme", theme], { detached: true, stdio: "ignore" });
+  child.unref();
+  child.once("exit", (code) => finish(code === 0));
+  child.once("error", () => finish(false));
+}
 async function runMediaServer() {
   if (![width, height, fps, port].every((value) => Number.isInteger(value) && value > 0)) throw new Error("Invalid desktop stream dimensions, frame rate, or port");
   const videoSocket = await bindUdp();
@@ -3926,7 +3949,8 @@ async function runMediaServer() {
           decodeQueue: clamp(message.decodeQueue, 0, 1e3),
           rttMs: clamp(message.rttMs, 0, 6e5)
         };
-      } else clients.get(client)?.input.handle(message);
+      } else if (message.type === "theme") applyDesktopTheme(message.theme);
+      else clients.get(client)?.input.handle(message);
     });
     client.once("close", () => {
       clients.get(client)?.input.close();
@@ -4093,13 +4117,13 @@ function setupComputer(options = {}) {
   mkdirSync6(viewerRoot, { recursive: true });
   cpSync(noVncCore, resolve3(viewerRoot, "core"), { recursive: true, force: true });
   cpSync(noVncVendor, resolve3(viewerRoot, "vendor"), { recursive: true, force: true });
-  for (const file of ["novnc-index.html", "viewer.css", "viewer-theme.css", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
+  for (const file of ["novnc-index.html", "viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
     cpSync(resolve3(assets, file), resolve3(viewerRoot, file === "novnc-index.html" ? "index.html" : file), { force: true });
   }
   cpSync(resolve3(packageRoot2, "dist", "viewer.js"), resolve3(viewerRoot, "viewer.js"), { force: true });
   const streamRoot = "/usr/local/share/replicas/desktop/stream";
   mkdirSync6(streamRoot, { recursive: true });
-  for (const file of ["stream-index.html", "stream-viewer.css", "viewer-theme.css", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
+  for (const file of ["stream-index.html", "stream-viewer.css", "viewer-theme.css", "viewer-theme.js", "viewer-icon.svg", "geist-mono-400.ttf", "geist-mono-600.ttf", "geist-mono-700.ttf", "general-sans-300.ttf"]) {
     cpSync(resolve3(assets, file), resolve3(streamRoot, file), { force: true });
   }
   cpSync(resolve3(packageRoot2, "dist", "stream-viewer.js"), resolve3(streamRoot, "stream-viewer.js"), { force: true });

package/dist/stream-viewer.js

@@ -192,6 +192,7 @@ var connect = () => {
   nextSocket.addEventListener("open", () => {
     if (socket !== nextSocket) return;
     reconnectAttempt = 0;
+    send({ type: "theme", theme: document.documentElement.dataset.theme === "light" ? "light" : "dark" });
   });
   nextSocket.addEventListener("message", (event) => {
     if (socket !== nextSocket) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "replicas-computer",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "description": "Replicas workspace computer-use runtime",
   "type": "module",
   "main": "dist/index.js",