mux/index.html at main · coder/mux · 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
<!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="#1e1e1e" />
    <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>mux - coder 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",
        ]);

        const THEME_COLORS = {
          dark: "#1e1e1e",
          light: "#f5f6f8",
          "flexoki-light": "#fffcf0",
          "flexoki-dark": "#100f0f",
        };

        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] ?? "#1e1e1e"
            );
          }
        } 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 135 62" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M3.168 48V22.272H9.648L9.888 28.464L9.216 28.176C9.568 26.8 10.096 25.632 10.8 24.672C11.536 23.712 12.416 22.976 13.44 22.464C14.464 21.952 15.584 21.696 16.8 21.696C18.944 21.696 20.672 22.32 21.984 23.568C23.328 24.816 24.192 26.496 24.576 28.608L23.664 28.656C23.952 27.152 24.448 25.888 25.152 24.864C25.888 23.808 26.784 23.024 27.84 22.512C28.896 21.968 30.08 21.696 31.392 21.696C33.184 21.696 34.72 22.064 36 22.8C37.28 23.536 38.272 24.64 38.976 26.112C39.68 27.552 40.032 29.328 40.032 31.44V48H32.832V33.456C32.832 31.44 32.528 29.936 31.92 28.944C31.312 27.92 30.32 27.408 28.944 27.408C28.08 27.408 27.344 27.648 26.736 28.128C26.128 28.608 25.648 29.312 25.296 30.24C24.976 31.136 24.816 32.24 24.816 33.552V48H18.336V33.552C18.336 31.568 18.048 30.048 17.472 28.992C16.896 27.936 15.904 27.408 14.496 27.408C13.632 27.408 12.88 27.648 12.24 28.128C11.632 28.608 11.168 29.312 10.848 30.24C10.528 31.168 10.368 32.272 10.368 33.552V48H3.168ZM54.2254 48.576C51.5694 48.576 49.4894 47.728 47.9854 46.032C46.5134 44.304 45.7774 41.904 45.7774 38.832V22.272H52.9774V37.152C52.9774 39.136 53.2814 40.592 53.8894 41.52C54.4974 42.416 55.4574 42.864 56.7694 42.864C58.2414 42.864 59.3774 42.368 60.1774 41.376C61.0094 40.352 61.4254 38.832 61.4254 36.816V22.272H68.6254V48H62.0494L61.8574 40.608L62.7694 40.8C62.3854 43.36 61.4734 45.296 60.0334 46.608C58.5934 47.92 56.6574 48.576 54.2254 48.576ZM72.8486 48L82.0166 34.944L73.0886 22.272H80.7206L86.2406 30.528L91.5686 22.272H99.3926L90.5126 34.992L99.6326 48H92.0006L86.3366 39.264L80.6246 48H72.8486Z"
    fill="currentColor"
  />
  <rect x="109" y="13" width="26" height="35" fill="currentColor" />
</svg>
          <p class="boot-loader__text">Loading Mux<span class="boot-loader__dots"></span></p>
        </div>
      </div>
    </div>
    <script type="module" src="/src/browser/main.tsx"></script>
  </body>
</html>