[Init] Initial commit - NetMesh terminal manager

index.tsx

@@ -0,0 +1,240 @@
+import { StrictMode, Suspense, lazy } from 'react';
+import ReactDOM from 'react-dom/client';
+import '@fontsource/mona-sans/400.css';
+import '@fontsource/mona-sans/500.css';
+import '@fontsource/mona-sans/600.css';
+import '@fontsource/mona-sans/700.css';
+import '@fontsource/space-grotesk/400.css';
+import '@fontsource/space-grotesk/500.css';
+import '@fontsource/space-grotesk/600.css';
+import '@fontsource/space-grotesk/700.css';
+import '@fontsource/jetbrains-mono/400.css';
+import '@fontsource/jetbrains-mono/500.css';
+import '@fontsource/jetbrains-mono/600.css';
+import App from './App';
+import { AppLockGate } from './components/AppLockGate';
+
+const LazySettingsPage = lazy(() => import('./components/SettingsPage'));
+const LazyTrayPanel = lazy(() => import('./components/TrayPanel'));
+const LazyTerminalPopupPage = lazy(() => import('./components/TerminalPopupPage'));
+
+function SettingsWindowFallback() {
+  return (
+    <div
+      style={{
+        height: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        background: 'hsl(var(--background))',
+        color: 'hsl(var(--foreground))',
+        fontFamily: 'var(--font-sans)',
+      }}
+    >
+      <div
+        style={{
+          flexShrink: 0,
+          borderBottom: '1px solid hsl(var(--border))',
+          padding: '20px 16px 12px',
+        }}
+      >
+        <div
+          style={{
+            width: 96,
+            height: 22,
+            borderRadius: 6,
+            background: 'hsl(var(--muted) / 0.5)',
+          }}
+        />
+        <div
+          style={{
+            marginTop: 8,
+            width: 150,
+            height: 14,
+            borderRadius: 5,
+            background: 'hsl(var(--muted) / 0.38)',
+          }}
+        />
+      </div>
+
+      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
+        <div
+          style={{
+            width: 224,
+            flexShrink: 0,
+            borderRight: '1px solid hsl(var(--border))',
+            padding: 12,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 8,
+          }}
+        >
+          {Array.from({ length: 7 }).map((_, index) => (
+            <div
+              key={index}
+              style={{
+                height: 36,
+                borderRadius: 8,
+                background: index === 0 ? 'hsl(var(--card))' : 'hsl(var(--muted) / 0.45)',
+              }}
+            />
+          ))}
+        </div>
+
+        <div style={{ flex: 1, padding: 20, display: 'flex', flexDirection: 'column', gap: 14 }}>
+          {Array.from({ length: 6 }).map((_, index) => (
+            <div
+              key={index}
+              style={{
+                height: index === 0 ? 54 : 76,
+                borderRadius: 12,
+                background: 'hsl(var(--muted) / 0.38)',
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TerminalPopupWindowFallback() {
+  return (
+    <div
+      style={{
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: '#0b1015',
+        color: '#d7e0ea',
+      }}
+    >
+      <svg width="28" height="28" viewBox="0 0 28 28" aria-label="Loading" style={{ opacity: 0.8 }}>
+        <circle cx="14" cy="14" r="11" fill="none" stroke="currentColor" strokeWidth="2" opacity="0.18" />
+        <path d="M25 14a11 11 0 0 0-11-11" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="2">
+          <animateTransform
+            attributeName="transform"
+            dur="0.75s"
+            from="0 14 14"
+            repeatCount="indefinite"
+            to="360 14 14"
+            type="rotate"
+          />
+        </path>
+      </svg>
+    </div>
+  );
+}
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+// Simple hash-based routing for separate windows
+const getRoute = () => {
+  const hash = window.location.hash;
+  if (hash === '#/settings' || hash.startsWith('#/settings')) {
+    return 'settings';
+  }
+  if (hash === '#/tray' || hash.startsWith('#/tray')) {
+    return 'tray';
+  }
+  if (hash === '#/terminal-popup' || hash.startsWith('#/terminal-popup')) {
+    return 'terminal-popup';
+  }
+  if (hash === '#/session-window' || hash.startsWith('#/session-window')) {
+    return 'main';
+  }
+  return 'main';
+};
+
+const root = ReactDOM.createRoot(rootElement);
+
+const syncTrayWindowClass = (route: string) => {
+  const rootEl = document.documentElement;
+  if (route === 'tray') {
+    rootEl.classList.add('tray-window');
+    document.getElementById('splash')?.remove();
+  } else {
+    rootEl.classList.remove('tray-window');
+  }
+};
+
+const renderApp = () => {
+  const route = getRoute();
+  const isPeerSessionWindow = window.location.hash.startsWith('#/session-window');
+  // Peer session windows must not drive the main window's settings IPC sync
+  // and must not re-apply OS-level system settings effects (tray, global
+  // shortcuts, …) — they follow the main window through the chrome stores.
+  const settingsOptions = isPeerSessionWindow
+    ? { enableSettingsSync: false, enableSystemEffects: false }
+    : undefined;
+
+  syncTrayWindowClass(route);
+  if (route === 'settings') {
+    root.render(
+      <StrictMode>
+        <AppLockGate settingsOptions={settingsOptions}>
+          {({ settings, appLock }) => (
+            <Suspense fallback={<SettingsWindowFallback />}>
+              <LazySettingsPage settings={settings} appLock={appLock} />
+            </Suspense>
+          )}
+        </AppLockGate>
+      </StrictMode>
+    );
+  } else if (route === 'tray') {
+    root.render(
+      <StrictMode>
+        <AppLockGate settingsOptions={settingsOptions}>
+          {({ settings }) => (
+            <Suspense fallback={<div style={{ minHeight: 48, background: 'hsl(var(--background))' }} />}>
+              <LazyTrayPanel settings={settings} />
+            </Suspense>
+          )}
+        </AppLockGate>
+      </StrictMode>
+    );
+  } else if (route === 'terminal-popup') {
+    // forceRenderChildren: main sends terminalPopupConfig immediately after
+    // loadURL; the page must mount (and register onTerminalPopupConfig) without
+    // waiting for async app-lock init. notifyRendererReady stays false — this
+    // route is not on the deep-link readiness path.
+    root.render(
+      <StrictMode>
+        <AppLockGate
+          notifyRendererReady={false}
+          forceRenderChildren
+          settingsOptions={settingsOptions}
+        >
+          {({ settings, appLock }) => (
+            <Suspense fallback={<TerminalPopupWindowFallback />}>
+              {/* forceRenderChildren mounts the page so config IPC registers while
+                  locked; defer starting the terminal until unlock (Codex P2). */}
+              <LazyTerminalPopupPage
+                settings={settings}
+                allowTerminalStart={appLock.initialized && !appLock.locked}
+              />
+            </Suspense>
+          )}
+        </AppLockGate>
+      </StrictMode>
+    );
+  } else {
+    root.render(
+      <StrictMode>
+        <AppLockGate settingsOptions={settingsOptions}>
+          {({ settings, appLock }) => <App settings={settings} appLock={appLock} />}
+        </AppLockGate>
+      </StrictMode>
+    );
+  }
+};
+
+// Initial render
+renderApp();
+
+// Listen for hash changes
+window.addEventListener('hashchange', renderApp);