FE-1584: Run the website's optimization demo in the browser

apps/petrinaut-website/.env.example

@@ -2,3 +2,5 @@ OPENAI_API_KEY=sk-xxxx
 OPENAI_VOICE_API_KEY=
 PETRINAUT_OPENAI_VOICE_ENABLED=false
 VITE_BRUNCH_CHAT_ENDPOINT=
+# "service" enables the /optimization route against the Python optimizer service behind the dev proxy; `turbo run dev -- --with-optimizer-service` sets it. Unset hides the route. The main demo runs its optimizer in the browser.
+# VITE_PETRINAUT_OPT_PROVIDER=service

apps/petrinaut-website/README.md

@@ -39,25 +39,34 @@ cannot include the current example URL. `FullExamplePage` adds the standard
 Consumers that do not execute JavaScript must call `/api/oembed` directly or
 use provider-pattern discovery instead.
 
-### Optimization demo with Petrinaut Opt
+### Optimization demo
 
-From the repository root, run:
+The main demo at [http://localhost:5173](http://localhost:5173) runs the
+optimizer in the browser: the Optuna study runs in a Pyodide web worker and
+each optimization step runs on Petrinaut's own experiments backend, so no
+Python service is involved. The **Optimizations** tab appears once the
+experimental **In-browser optimization** setting is on, under **Viewport
+controls > Settings > Simulation**. The first optimization in a browser
+downloads the Python runtime from jsDelivr and Optuna from PyPI; later runs use
+the browser cache.
+
+The `/optimization` route is the Python-service variant. It returns the
+website's not-found page unless `VITE_PETRINAUT_OPT_PROVIDER=service` is set.
+To run it, from the repository root:
 
 ```sh
 turbo run dev --filter @apps/petrinaut-website -- --with-optimizer-service
 ```
 
 The flag builds and starts the local Petrinaut Opt Docker image, waits for its
-health endpoint, and starts the website with the real optimization provider.
-Open [http://localhost:5173/optimization](http://localhost:5173/optimization).
+health endpoint, and starts the website with
+`VITE_PETRINAUT_OPT_PROVIDER=service`. Open
+[http://localhost:5173/optimization](http://localhost:5173/optimization).
 Stopping the command also stops and removes its optimizer container.
 
 The development server proxies `/api/petrinaut-opt/*` to the optimizer on
 `127.0.0.1:4004`, avoiding development-only CORS changes to the Python service.
-Regular `yarn dev` does not enable optimization; use the dedicated command to
-connect the website to the real optimizer service. The `/optimization` route
-returns the website's not-found page when the provider is disabled. Storybook
-provides a fake optimizer for isolated UI development.
+Storybook provides a fake optimizer for isolated UI development.
 
 ## Environment variables
 
@@ -69,7 +78,7 @@ provides a fake optimizer for isolated UI development.
 | `PETRINAUT_AI_MODEL`             | no               | `api/chat.ts`    | Overrides the default OpenAI model id.                     |
 | `PETRINAUT_OPT_ORIGIN`           | no               | `vite.config.ts` | Overrides the local optimizer proxy target.                |
 | `VITE_BRUNCH_CHAT_ENDPOINT`      | for voice input  | website          | Full Brunch Petrinaut chat endpoint used by the panel.     |
-| `VITE_PETRINAUT_OPT_PROVIDER`    | no               | website          | Set to `service` to enable the optimization route.         |
+| `VITE_PETRINAUT_OPT_PROVIDER`    | no               | website          | Set to `service` to enable the `/optimization` route.      |
 | `SENTRY_DSN`                     | no               | `vite.config.ts` | Wired into the bundle via `__SENTRY_DSN__` at build time.  |
 
 Local values live in `.env.local`; Vite's `loadEnv` (see [`vite.config.ts`](vite.config.ts)) copies them into `process.env` for both the dev server and the API functions. In production, set these in the Vercel project settings.

apps/petrinaut-website/src/main/app/browser-optimization-provider.tsx

@@ -0,0 +1,20 @@
+import { createBrowserOptimization } from "@hashintel/petrinaut-core/browser-optimization";
+import { PetrinautOptimizationContext } from "@hashintel/petrinaut/react";
+
+import type { FC, PropsWithChildren } from "react";
+
+const browserOptimization = createBrowserOptimization();
+
+/**
+ * The in-tab optimizer: the Optuna study runs in a Pyodide worker and each
+ * step runs on the editor's own experiments backend, so the demo needs no
+ * optimizer service. Petrinaut connects it only while its experimental
+ * In-browser optimization setting is on.
+ */
+export const BrowserOptimizationProvider: FC<PropsWithChildren> = ({
+  children,
+}) => (
+  <PetrinautOptimizationContext value={browserOptimization}>
+    {children}
+  </PetrinautOptimizationContext>
+);

apps/petrinaut-website/src/routes/index.tsx

@@ -5,19 +5,22 @@ import {
 } from "@tanstack/react-router";
 
 import { validateSharedExampleSearch } from "../examples/example-search";
+import { BrowserOptimizationProvider } from "../main/app/browser-optimization-provider";
 import { LocalStorageDemoApp } from "../main/app/local-storage-demo/local-storage-demo-app";
 
 function IndexRoute() {
   const navigate = useNavigate({ from: "/" });
   const search = useSearch({ from: "/" });
 
   return (
-    <LocalStorageDemoApp
-      onSearchChange={(nextSearch, history) => {
-        void navigate({ replace: history === "replace", search: nextSearch });
-      }}
-      search={search}
-    />
+    <BrowserOptimizationProvider>
+      <LocalStorageDemoApp
+        onSearchChange={(nextSearch, history) => {
+          void navigate({ replace: history === "replace", search: nextSearch });
+        }}
+        search={search}
+      />
+    </BrowserOptimizationProvider>
   );
 }