xum/index.html at main · coder/xum · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover, interactive-widget=resizes-content"
    />
    <meta name="description" content="Parallel agentic development with Electron + React" />
    <meta name="theme-color" content="#09090b" />
    <!-- iOS standalone PWA: with viewport-fit=cover, black-translucent hands the status-bar
         band to the page (env(safe-area-inset-top)) instead of iOS drawing its own chrome
         (opaque bar pre-iOS 26, Liquid Glass overlay on iOS/iPadOS 26+). -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" vite-ignore />
    <link rel="icon" href="favicon.ico" data-theme-icon vite-ignore />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" vite-ignore />
    <title>xum - coding agent multiplexer</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background: var(--color-surface-primary, #0a0a0b);
        color: var(--color-foreground, #d4d4d4);
        font-family: var(
          --font-primary,
          -apple-system,
          BlinkMacSystemFont,
          "Geist",
          system-ui,
          "Segoe UI",
          "Roboto",
          "Helvetica Neue",
          Arial,
          sans-serif,
          "Apple Color Emoji",
          "Segoe UI Emoji",
          "Segoe UI Symbol"
        );
        font-size: 14px;
      }

      :root[data-theme="light"] body {
        background: #ffffff;
      }

      :root[data-theme="flexoki-light"] body {
        background: #fffcf0;
      }

      #root {
        height: 100vh; /* fallback for older browsers */
        height: 100dvh;
        overflow: hidden;
        background: var(--color-surface-primary, #0a0a0b);
      }

      :root[data-theme="light"] #root {
        background: #ffffff;
      }

      :root[data-theme="flexoki-light"] #root {
        background: #fffcf0;
      }

      :root[data-theme="flexoki-dark"] body {
        background: #100f0f;
      }

      :root[data-theme="flexoki-dark"] #root {
        background: #100f0f;
      }

      /* Pre-JS placeholder to avoid a blank screen on cold start. */
      .boot-loader {
        height: 100vh; /* fallback for older browsers */
        height: 100dvh;
        width: 100vw;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .boot-loader__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }

      .boot-loader__logo {
        width: 200px;
        height: auto;
        color: #ffffff;
      }

      :root[data-theme="light"] .boot-loader__logo,
      :root[data-theme$="-light"] .boot-loader__logo {
        color: #000000;
      }

      .boot-loader__text {
        margin: 0;
        font-size: 14px;
        color: var(--color-text-secondary, #6b6b6b);
      }

      :root[data-theme="light"] .boot-loader__text,
      :root[data-theme$="-light"] .boot-loader__text {
        color: var(--color-text-secondary, #607081);
      }

      /* Animated "..." after the loading text. Uses ::after so it works in
         both the static HTML boot loader and the React LoadingScreen. */
      @keyframes boot-ellipsis {
        0%, 20%  { content: ""; }
        40%      { content: "."; }
        60%      { content: ".."; }
        80%, 100% { content: "..."; }
      }

      .boot-loader__dots {
        display: inline-block;
        width: 1.5ch;
        text-align: left;
      }

      .boot-loader__dots::after {
        content: "";
        animation: boot-ellipsis 1.2s steps(1) infinite;
      }

      @media (prefers-reduced-motion: reduce) {
        .boot-loader__dots::after {
          content: "...";
          animation: none;
        }
      }
    </style>
    <script>
      (function () {
        const THEME_KEY = "uiTheme";
        const VALID_THEME_PREFERENCES = new Set([
          "auto",
          "light",
          "dark",
          "flexoki-light",
          "flexoki-dark",
        ]);

        // This boot script runs before the app bundle, so chromeColors.test.ts enforces parity
        // with CHROME_COLORS.
        const THEME_COLORS = {
          dark: "#09090b",
          light: "#f5f5f5",
          "flexoki-light": "#f2f0e5",
          "flexoki-dark": "#1c1b1a",
        };

        function resolveSystemTheme() {
          if (!window.matchMedia) {
            return "dark";
          }

          return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
        }

        function getColorScheme(theme) {
          return theme === "light" || theme.endsWith("-light") ? "light" : "dark";
        }

        try {
          const stored = window.localStorage.getItem(THEME_KEY);
          let parsed = null;

          // Tolerate legacy values that were written as raw strings (not JSON).
          if (stored) {
            try {
              parsed = JSON.parse(stored);
            } catch {
              parsed = stored;
            }
          }

          let themePreference = "auto";
          if (typeof parsed === "string") {
            if (VALID_THEME_PREFERENCES.has(parsed)) {
              themePreference = parsed;
            } else if (parsed.endsWith("-light")) {
              themePreference = "light";
            } else if (parsed.endsWith("-dark")) {
              themePreference = "dark";
            }
          }

          const theme = themePreference === "auto" ? resolveSystemTheme() : themePreference;
          const colorScheme = getColorScheme(theme);

          document.documentElement.dataset.theme = theme;
          document.documentElement.style.colorScheme = colorScheme;

          const metaThemeColor = document.querySelector('meta[name="theme-color"]');
          if (metaThemeColor) {
            metaThemeColor.setAttribute(
              "content",
              THEME_COLORS[theme] ?? THEME_COLORS[colorScheme] ?? THEME_COLORS.dark
            );
          }
        } catch (error) {
          console.warn("Failed to apply preferred theme early", error);
          document.documentElement.dataset.theme = "dark";
          document.documentElement.style.colorScheme = "dark";
        }
      })();
    </script>
  </head>
  <body>
    <div id="root">
      <div class="boot-loader" role="status" aria-live="polite" aria-busy="true">
        <div class="boot-loader__inner">
          <svg class="boot-loader__logo" aria-hidden="true" viewBox="0 0 134.7754 62" fill="none" xmlns="http://www.w3.org/2000/svg">
            <!-- Reordered prior Mux outlines keep Xum on the established Geist Sans Bold geometry. -->
            <path d="M2.208 48 11.376 34.944 2.448 22.272H10.08L15.6 30.528L20.928 22.272H28.752L19.872 34.992L28.992 48H21.36L15.696 39.264L9.984 48H2.208ZM41.856 48.576C39.2 48.576 37.12 47.728 35.616 46.032C34.144 44.304 33.408 41.904 33.408 38.832V22.272H40.608V37.152C40.608 39.136 40.912 40.592 41.52 41.52C42.128 42.416 43.088 42.864 44.4 42.864C45.872 42.864 47.008 42.368 47.808 41.376C48.64 40.352 49.056 38.832 49.056 36.816V22.272H56.256V48H49.68L49.488 40.608L50.4 40.8C50.016 43.36 49.104 45.296 47.664 46.608C46.224 47.92 44.288 48.576 41.856 48.576ZM62.544 48V22.272H69.024L69.264 28.464L68.592 28.176C68.944 26.8 69.472 25.632 70.176 24.672C70.912 23.712 71.792 22.976 72.816 22.464C73.84 21.952 74.96 21.696 76.176 21.696C78.32 21.696 80.048 22.32 81.36 23.568C82.704 24.816 83.568 26.496 83.952 28.608L83.04 28.656C83.328 27.152 83.824 25.888 84.528 24.864C85.264 23.808 86.16 23.024 87.216 22.512C88.272 21.968 89.456 21.696 90.768 21.696C92.56 21.696 94.096 22.064 95.376 22.8C96.656 23.536 97.648 24.64 98.352 26.112C99.056 27.552 99.408 29.328 99.408 31.44V48H92.208V33.456C92.208 31.44 91.904 29.936 91.296 28.944C90.688 27.92 89.696 27.408 88.32 27.408C87.456 27.408 86.72 27.648 86.112 28.128C85.504 28.608 85.024 29.312 84.672 30.24C84.352 31.136 84.192 32.24 84.192 33.552V48H77.712V33.552C77.712 31.568 77.424 30.048 76.848 28.992C76.272 27.936 75.28 27.408 73.872 27.408C73.008 27.408 72.256 27.648 71.616 28.128C71.008 28.608 70.544 29.312 70.224 30.24C69.904 31.168 69.744 32.272 69.744 33.552V48H62.544Z" fill="currentColor" />
            <rect x="108.7754" y="13" width="26" height="35" fill="currentColor" />
          </svg>
          <p class="boot-loader__text">Loading Xum<span class="boot-loader__dots"></span></p>
        </div>
      </div>
    </div>
    <script type="module" src="/src/browser/main.tsx"></script>
  </body>
</html>