feat(web): cloud-only boot picker + build:web target (tinyhumansai#1466)

Author: senamakel

.gitignore

@@ -19,6 +19,7 @@ package-lock.json
 node_modules
 dist
 dist-ssr
+dist-web
 *.local
 
 # Environment variables

app/package.json

@@ -16,6 +16,7 @@
     "tauri:ensure": "bash ../scripts/ensure-tauri-cli.sh",
     "build": "tsc && vite build",
     "build:app": "tsc && vite build",
+    "build:web": "cross-env VITE_OPENHUMAN_TARGET=web tsc && cross-env VITE_OPENHUMAN_TARGET=web vite build",
     "compile": "tsc --noEmit",
     "preview": "vite preview",
     "tauri": "tauri",
@@ -121,6 +122,7 @@
     "@wdio/mocha-framework": "^9.24.0",
     "@wdio/spec-reporter": "^9.24.0",
     "autoprefixer": "^10.4.23",
+    "cross-env": "^10.1.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",

app/src/components/BootCheckGate/BootCheckGate.tsx

@@ -9,6 +9,7 @@
  * Visual language follows ServiceBlockingGate.tsx (bg-stone-950/80 overlay,
  * bg-stone-900 panel, ocean-500 / coral-500 semantics).
  */
+import { isTauri } from '@tauri-apps/api/core';
 import debug from 'debug';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -74,8 +75,17 @@ type TestStatus =
   | { kind: 'auth' }
   | { kind: 'unreachable'; reason: string };
 
+// Desktop release artifact URL surfaced on the web build's mode picker so
+// users without a remote core have a clear path to install the app instead
+// of being trapped on the cloud-only form.
+const DESKTOP_DOWNLOAD_URL = 'https://github.com/tinyhumansai/openhuman/releases/latest';
+
 function ModePicker({ onConfirm }: PickerProps) {
-  const [selected, setSelected] = useState<'local' | 'cloud'>('local');
+  // Web build cannot spawn a local sidecar, so the only viable choice is
+  // cloud. Default the selection accordingly and hide the local option in
+  // the render path below.
+  const isDesktop = isTauri();
+  const [selected, setSelected] = useState<'local' | 'cloud'>(isDesktop ? 'local' : 'cloud');
   const [cloudUrl, setCloudUrl] = useState('');
   const [cloudToken, setCloudToken] = useState('');
   const [urlError, setUrlError] = useState<string | null>(null);
@@ -180,41 +190,65 @@ function ModePicker({ onConfirm }: PickerProps) {
 
   return (
     <Panel>
-      <h2 className="text-xl font-semibold text-white">Choose core mode</h2>
+      <h2 className="text-xl font-semibold text-white">
+        {isDesktop ? 'Choose core mode' : 'Connect to your core'}
+      </h2>
       <p className="mt-2 text-sm text-stone-300">
-        OpenHuman needs a running core to operate. Choose how you want to connect.
+        {isDesktop
+          ? 'OpenHuman needs a running core to operate. Choose how you want to connect.'
+          : 'OpenHuman on the web connects to a remote core you control. Enter its URL and auth token, or install the desktop app to run one locally.'}
       </p>
 
+      {!isDesktop && (
+        <div
+          className="mt-4 rounded-xl border border-stone-700 bg-stone-800/60 p-3 text-xs text-stone-300"
+          data-testid="web-download-cta">
+          Prefer to run everything on your own device?{' '}
+          <a
+            href={DESKTOP_DOWNLOAD_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-ocean-400 underline hover:text-ocean-300">
+            Download the desktop app
+          </a>
+          .
+        </div>
+      )}
+
       <div className="mt-5 flex flex-col gap-3">
-        {/* Local option */}
-        <button
-          type="button"
-          onClick={() => setSelected('local')}
-          className={`rounded-xl border p-4 text-left transition-colors ${
-            selected === 'local'
-              ? 'border-ocean-500 bg-ocean-500/10 text-white'
-              : 'border-stone-700 text-stone-300 hover:border-stone-500 hover:bg-stone-800'
-          }`}>
-          <div className="font-medium">Local (recommended)</div>
-          <div className="mt-0.5 text-xs text-stone-400">
-            Embedded core runs on this device — fastest, no configuration required.
-          </div>
-        </button>
+        {/* Local option — desktop only; web builds cannot spawn a sidecar. */}
+        {isDesktop && (
+          <button
+            type="button"
+            onClick={() => setSelected('local')}
+            className={`rounded-xl border p-4 text-left transition-colors ${
+              selected === 'local'
+                ? 'border-ocean-500 bg-ocean-500/10 text-white'
+                : 'border-stone-700 text-stone-300 hover:border-stone-500 hover:bg-stone-800'
+            }`}>
+            <div className="font-medium">Local (recommended)</div>
+            <div className="mt-0.5 text-xs text-stone-400">
+              Embedded core runs on this device — fastest, no configuration required.
+            </div>
+          </button>
+        )}
 
-        {/* Cloud option */}
-        <button
-          type="button"
-          onClick={() => setSelected('cloud')}
-          className={`rounded-xl border p-4 text-left transition-colors ${
-            selected === 'cloud'
-              ? 'border-ocean-500 bg-ocean-500/10 text-white'
-              : 'border-stone-700 text-stone-300 hover:border-stone-500 hover:bg-stone-800'
-          }`}>
-          <div className="font-medium">Cloud</div>
-          <div className="mt-0.5 text-xs text-stone-400">
-            Connect to a remote core at a custom URL.
-          </div>
-        </button>
+        {/* Cloud option — always available; the only option on the web build. */}
+        {isDesktop && (
+          <button
+            type="button"
+            onClick={() => setSelected('cloud')}
+            className={`rounded-xl border p-4 text-left transition-colors ${
+              selected === 'cloud'
+                ? 'border-ocean-500 bg-ocean-500/10 text-white'
+                : 'border-stone-700 text-stone-300 hover:border-stone-500 hover:bg-stone-800'
+            }`}>
+            <div className="font-medium">Cloud</div>
+            <div className="mt-0.5 text-xs text-stone-400">
+              Connect to a remote core at a custom URL.
+            </div>
+          </button>
+        )}
 
         {selected === 'cloud' && (
           <div className="mt-1 flex flex-col gap-3">

app/src/components/BootCheckGate/__tests__/BootCheckGate.test.tsx

@@ -8,13 +8,20 @@
  *   - Assert rendered text and dispatched actions for each meaningful state.
  */
 import { configureStore } from '@reduxjs/toolkit';
+import { isTauri } from '@tauri-apps/api/core';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import coreModeReducer, { type CoreModeState } from '../../../store/coreModeSlice';
 import BootCheckGate from '../BootCheckGate';
 
+// The global test setup mocks isTauri()=>false (web). The existing picker
+// behavior under test was written for desktop (local option visible,
+// pre-selected). Force desktop runtime for those describes; the new web
+// describe at the bottom flips it back to false.
+const mockedIsTauri = vi.mocked(isTauri);
+
 // ---------------------------------------------------------------------------
 // Mocks
 // ---------------------------------------------------------------------------
@@ -68,6 +75,11 @@ function renderGate(store = makeStore()) {
 // Tests
 // ---------------------------------------------------------------------------
 
+// All describes below assume desktop unless they explicitly opt out.
+beforeEach(() => {
+  mockedIsTauri.mockReturnValue(true);
+});
+
 describe('BootCheckGate — picker (unset mode)', () => {
   it('shows the mode picker when coreMode is unset', () => {
     renderGate();
@@ -472,3 +484,67 @@ describe('BootCheckGate — pre-set mode (subsequent launches)', () => {
     expect(screen.queryByText('Choose core mode')).not.toBeInTheDocument();
   });
 });
+
+describe('BootCheckGate — picker (web build, !isTauri)', () => {
+  beforeEach(() => {
+    mockedIsTauri.mockReturnValue(false);
+  });
+
+  it('uses the web-friendly title and hides the Local option', () => {
+    renderGate();
+
+    expect(screen.getByText('Connect to your core')).toBeInTheDocument();
+    expect(screen.queryByText('Choose core mode')).not.toBeInTheDocument();
+    expect(screen.queryByText('Local (recommended)')).not.toBeInTheDocument();
+    // The selectable Cloud tile is also gone — cloud is implicit and the
+    // URL/token form is rendered directly.
+    expect(screen.queryByRole('button', { name: 'Cloud' })).not.toBeInTheDocument();
+  });
+
+  it('renders the cloud form fields immediately (cloud is the only option)', () => {
+    renderGate();
+
+    expect(screen.getByPlaceholderText(/https:\/\/core\.example\.com/)).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/Bearer token/i)).toBeInTheDocument();
+  });
+
+  it('shows a Download desktop app CTA linking to the release page', () => {
+    renderGate();
+
+    const cta = screen.getByTestId('web-download-cta');
+    expect(cta).toBeInTheDocument();
+    const link = cta.querySelector('a');
+    expect(link).not.toBeNull();
+    expect(link?.getAttribute('href')).toMatch(
+      /github\.com\/tinyhumansai\/openhuman\/releases\/latest/
+    );
+    expect(link?.getAttribute('target')).toBe('_blank');
+    expect(link?.getAttribute('rel')).toMatch(/noopener/);
+  });
+
+  it('continues into a cloud boot check when URL + token are provided', async () => {
+    mockRunBootCheck.mockResolvedValue({ kind: 'match' });
+
+    renderGate();
+
+    fireEvent.change(screen.getByPlaceholderText(/https:\/\/core\.example\.com/), {
+      target: { value: 'https://core.example.com/rpc' },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/Bearer token/i), {
+      target: { value: 'tok-web' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('app-content')).toBeInTheDocument();
+    });
+    expect(mockRunBootCheck).toHaveBeenCalledWith(
+      expect.objectContaining({
+        kind: 'cloud',
+        url: 'https://core.example.com/rpc',
+        token: 'tok-web',
+      }),
+      expect.any(Object)
+    );
+  });
+});

app/vite.config.ts

@@ -84,6 +84,15 @@ function guardCefRelListSupportsPlugin(): PluginOption {
   };
 }
 
+// `VITE_OPENHUMAN_TARGET=web` switches the build to the browser-hosted
+// flavor: output lands in `dist-web/` so the desktop build artifact in
+// `dist/` (consumed by `cargo tauri build`) is never clobbered, and the
+// `import.meta.env.VITE_OPENHUMAN_TARGET` value is exposed to runtime code
+// that wants a build-time signal in addition to the runtime `isTauri()`
+// check. Default (`undefined` / `desktop`) keeps the historical behavior.
+const buildTarget = (process.env.VITE_OPENHUMAN_TARGET ?? "desktop").trim();
+const isWebTarget = buildTarget === "web";
+
 // https://vite.dev/config/
 export default defineConfig(async () => ({
   root: "src",
@@ -98,7 +107,7 @@ export default defineConfig(async () => ({
   // the shell exports staging URLs.
   envDir: resolve(__dirname, ".."),
   build: {
-    outDir: "../dist",
+    outDir: isWebTarget ? "../dist-web" : "../dist",
     emptyOutDir: true,
     // Desktop CEF has surfaced a runtime where `link.relList.supports` is
     // truthy but not callable. Vite calls it both in the modulepreload