oomi-ai 0.2.38 → 0.2.40

package/templates/persona-app/src/App.tsx

@@ -6,8 +6,8 @@ export default function App() {
   return (
     <Router basename={__XR_ENV_BASE__}>
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/scene" element={<ScenePage />} />
+        <Route index element={<HomePage />} />
+        <Route path="scene" element={<ScenePage />} />
       </Routes>
     </Router>
   );

package/templates/persona-app/src/main.tsx

@@ -1,8 +1,21 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { snapdom } from "@zumer/snapdom";
+import html2canvas from "html2canvas";
 import "./index.css";
 import App from "./App";
 
+// WebSpatial AndroidXR uses DOM capture to turn enable-xr surfaces into native panels.
+// Expose both libraries globally so the SDK can pick the fast path when available.
+(window as Window & {
+  snapdom?: typeof snapdom;
+  html2canvas?: typeof html2canvas;
+}).snapdom = snapdom;
+(window as Window & {
+  snapdom?: typeof snapdom;
+  html2canvas?: typeof html2canvas;
+}).html2canvas = html2canvas;
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

package/templates/persona-app/src/pages/HomePage.tsx

@@ -1,70 +1,151 @@
-import { initScene } from "@webspatial/react-sdk";
+import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import "../App.css";
 import { personaConfig } from "../persona/config";
 import { personaNotes } from "../persona/notes";
+import {
+  WEBSPATIAL_FORK_COMMIT,
+  configurePersonaScene,
+  detectSpatialEnvironment,
+  openPersonaScene,
+  xrStyle,
+} from "../spatial";
 
-export function HomePage() {
-  const openSpatialScene = () => {
-    initScene("personaScene", prevConfig => ({
-      ...prevConfig,
-      defaultSize: {
-        width: 720,
-        height: 720,
-      },
-    }));
-    window.open(`${__XR_ENV_BASE__}/scene`, "personaScene");
-  };
+const previewCards = [
+  {
+    tone: "ocean",
+    title: "Focused surface",
+    body: "Use the persona site as a real operator board, planner, studio, or dashboard instead of another chat clone.",
+    depth: 34,
+    material: "translucent",
+  },
+  {
+    tone: "coral",
+    title: "Depth-authored cards",
+    body: "Key controls should declare their own depth and material so AndroidXR reads them as layered surfaces.",
+    depth: 84,
+    material: "thin",
+  },
+  {
+    tone: "violet",
+    title: "Persistent handoff",
+    body: "Let Oomi keep the live conversation thread while the persona page stays focused on structured work.",
+    depth: 140,
+    material: "thick",
+  },
+];
+
+type HomePageProps = {
+  sceneMode?: boolean;
+};
+
+export function HomePage({ sceneMode = false }: HomePageProps) {
+  const environment = detectSpatialEnvironment();
+
+  useEffect(() => {
+    configurePersonaScene();
+  }, []);
 
   return (
-    <main className="persona-shell">
+    <main className="persona-shell" enable-xr-monitor={sceneMode || undefined}>
       <section className="persona-header">
-        <div className="persona-panel persona-hero">
-          <p className="persona-eyebrow">WebSpatial Persona</p>
-          <h1 className="persona-title">{personaConfig.name}</h1>
-          <p className="persona-description">{personaConfig.description}</p>
+        <div className="persona-panel persona-hero" enable-xr style={xrStyle(22, "translucent")}>
+          <div>
+            <p className="persona-eyebrow">{sceneMode ? "Spatial Persona Surface" : "WebSpatial Persona"}</p>
+            <h1 className="persona-title">{personaConfig.name}</h1>
+            <p className="persona-description">{personaConfig.description}</p>
+          </div>
 
           <div className="persona-actions">
-            <button className="persona-button" onClick={openSpatialScene} enable-xr>
-              Open Spatial Scene
-            </button>
-            <Link className="persona-link" to="/scene" target="_blank" enable-xr>
-              Open Scene Route
-            </Link>
+            {!sceneMode ? (
+              <>
+                <button className="persona-button" onClick={openPersonaScene} enable-xr style={xrStyle(52, "regular")}>
+                  Launch Spatial Surface
+                </button>
+                <Link className="persona-link" to="/scene" target="_blank" enable-xr style={xrStyle(92, "thin")}>
+                  Open Spatial Preview
+                </Link>
+              </>
+            ) : (
+              <Link className="persona-button" to="/" enable-xr style={xrStyle(52, "regular")}>
+                Return To Browser View
+              </Link>
+            )}
+          </div>
+
+          <div className="persona-preview-strip">
+            {previewCards.map(card => (
+              <article
+                key={card.title}
+                className="persona-preview-card"
+                data-tone={card.tone}
+                enable-xr
+                style={xrStyle(card.depth, card.material)}
+              >
+                <h3>{card.title}</h3>
+                <p>{card.body}</p>
+              </article>
+            ))}
           </div>
         </div>
 
-        <aside className="persona-panel persona-runtime">
+        <aside className="persona-panel persona-runtime" enable-xr style={xrStyle(72, "thin")}>
           <p className="persona-eyebrow">Runtime</p>
           <div className="runtime-list">
-            <div>Slug: {personaConfig.slug}</div>
-            <div>Template: {personaConfig.templateVersion}</div>
-            <div>Engine: WebSpatial + React + Vite</div>
-            <div>Mode: local/private</div>
+            <div className="runtime-row">
+              <span className="runtime-label">Slug</span>
+              <span className="runtime-value">{personaConfig.slug}</span>
+            </div>
+            <div className="runtime-row">
+              <span className="runtime-label">SDK</span>
+              <span className="runtime-value">@webspatial/react-sdk {environment.sdkVersion}</span>
+            </div>
+            <div className="runtime-row">
+              <span className="runtime-label">Bridge</span>
+              <span className="runtime-value">{environment.hasBridge ? "available" : "waiting"}</span>
+            </div>
+            <div className="runtime-row">
+              <span className="runtime-label">Native</span>
+              <span className="runtime-value">{environment.nativeVersion ?? "browser fallback"}</span>
+            </div>
+            <div className="runtime-row">
+              <span className="runtime-label">Fork</span>
+              <span className="runtime-value">{WEBSPATIAL_FORK_COMMIT.slice(0, 7)}</span>
+            </div>
           </div>
         </aside>
       </section>
 
       <section className="persona-grid">
-        <article className="persona-panel persona-card">
-          <h2>Editable Persona Notes</h2>
+        <article className="persona-panel persona-card" enable-xr style={xrStyle(34, "translucent")}>
+          <h2>What Good XR Feels Like</h2>
+          <p>
+            Treat the generated persona site like a spatial work surface. The XR route should keep
+            the actual persona shell intact, then layer depth, materials, and anchored surfaces on
+            top instead of swapping in a disconnected demo board.
+          </p>
           <p>
-            This scaffold follows the WebSpatial quick-example structure so the app can render
-            well in both the browser and future XR clients. Keep persona-specific logic in
-            <code> src/persona/</code>.
+            {sceneMode
+              ? "This route is the AndroidXR work surface. It should feel like the same persona site, just spatialized."
+              : "This home route exists for browser parity and one-click launch into the spatial work surface."}
           </p>
-          <ul>
+        </article>
+
+        <article className="persona-panel persona-card" enable-xr style={xrStyle(74, "thin")}>
+          <h2>Editing Notes</h2>
+          <ul className="persona-note-list">
             {personaNotes.map(note => (
               <li key={note}>{note}</li>
             ))}
           </ul>
         </article>
 
-        <article className="persona-panel persona-card persona-scene-card" enable-xr>
-          <h2>Scene Surface</h2>
-          <p enable-xr>
-            Use this card as the main spatial handoff. It already uses WebSpatial router
-            basenames, scene launching, and `enable-xr` affordances taken from the quick example.
+        <article className="persona-panel persona-card persona-scene-card" enable-xr style={xrStyle(118, "regular")}>
+          <h2>Scene Contract</h2>
+          <p>
+            The page should import WebSpatial helpers, self-configure the scene, and keep using
+            explicit <code>enable-xr</code>, <code>--xr-back</code>, and
+            <code> --xr-background-material</code> values on important surfaces.
           </p>
         </article>
       </section>

package/templates/persona-app/src/pages/ScenePage.tsx

@@ -1,18 +1,5 @@
-import "../App.css";
-import { personaConfig } from "../persona/config";
+import { HomePage } from "./HomePage";
 
 export function ScenePage() {
-  return (
-    <main className="scene-shell">
-      <section className="persona-panel scene-panel">
-        <p className="persona-eyebrow">Scene</p>
-        <h1>{personaConfig.name}</h1>
-        <p>{personaConfig.description}</p>
-        <p>
-          This route is intentionally separate so WebSpatial scene launching has a dedicated
-          surface. Extend this page with persona-specific spatial UI.
-        </p>
-      </section>
-    </main>
-  );
+  return <HomePage sceneMode />;
 }

package/templates/persona-app/src/persona/notes.ts

@@ -1,5 +1,7 @@
 export const personaNotes = [
   "Keep persona-specific logic inside src/persona/ unless Oomi explicitly instructs otherwise.",
-  "Preserve the WebSpatial router basename and scene-launch flow.",
+  "Preserve the WebSpatial router basename, the scene self-init helper, and the scene-launch flow.",
+  "Keep using the vendored AndroidXR-enabled WebSpatial fork instead of switching back to the stock npm packages.",
+  "Author key surfaces with explicit enable-xr, --xr-back, and --xr-background-material values so the page reads as spatial instead of flat.",
   "Do not remove public/oomi.runtime.json, public/oomi.health.json, or public/manifest.webmanifest.",
 ];

package/templates/persona-app/src/spatial.ts

@@ -0,0 +1,82 @@
+import type { CSSProperties } from "react";
+import { initScene, version as webSpatialSdkVersion } from "@webspatial/react-sdk";
+
+export const PERSONA_SCENE_NAME = "personaScene";
+export const WEBSPATIAL_FORK_REPOSITORY = "https://github.com/zill4/webspatial-sdk";
+export const WEBSPATIAL_FORK_COMMIT = "b2746721e4fe6b4f86dac0ea55938074eea00cda";
+
+type SpatialWindow = Window & {
+  webspatialBridge?: unknown;
+  __WebSpatialData?: {
+    getNativeVersion?: () => string;
+  };
+};
+
+export type SpatialEnvironmentSnapshot = {
+  isWebSpatial: boolean;
+  sdkVersion: string;
+  nativeVersion: string | null;
+  hasBridge: boolean;
+  hasWebSpatialData: boolean;
+};
+
+export type XrStyle = CSSProperties & {
+  "--xr-back"?: number | string;
+  "--xr-background-material"?: string;
+};
+
+export function xrStyle(back: number, material: string): XrStyle {
+  return {
+    "--xr-back": `${back}px`,
+    "--xr-background-material": material,
+  };
+}
+
+export function detectSpatialEnvironment(): SpatialEnvironmentSnapshot {
+  const typedWindow = window as SpatialWindow;
+  const userAgent = navigator.userAgent;
+  const userAgentVersion = userAgent.match(/WebSpatial\/([\d.]+)/)?.[1] ?? null;
+  const nativeVersion = (() => {
+    try {
+      return typedWindow.__WebSpatialData?.getNativeVersion?.() ?? userAgentVersion;
+    } catch {
+      return userAgentVersion;
+    }
+  })();
+
+  return {
+    isWebSpatial: userAgent.includes("WebSpatial/"),
+    sdkVersion: webSpatialSdkVersion,
+    nativeVersion,
+    hasBridge: typeof typedWindow.webspatialBridge !== "undefined",
+    hasWebSpatialData: typeof typedWindow.__WebSpatialData !== "undefined",
+  };
+}
+
+export function configurePersonaScene() {
+  initScene(
+    PERSONA_SCENE_NAME,
+    previous => ({
+      ...previous,
+      defaultSize: {
+        width: 1440,
+        height: 960,
+      },
+      resizability: {
+        minWidth: 960,
+        minHeight: 720,
+        maxWidth: 1800,
+        maxHeight: 1280,
+      },
+      worldAlignment: "gravityAligned",
+      worldScaling: "automatic",
+      baseplateVisibility: "hidden",
+    }),
+    { type: "window" },
+  );
+}
+
+export function openPersonaScene() {
+  configurePersonaScene();
+  window.open(`${__XR_ENV_BASE__}/scene`, PERSONA_SCENE_NAME);
+}

package/templates/persona-app/template.json

@@ -5,7 +5,7 @@
   "appKind": "oomi-persona-app",
   "defaultPort": 4789,
   "healthPath": "/oomi.health.json",
-  "startCommand": "npm run dev",
+  "startCommand": "npm run dev:avp",
   "editableZones": [
     "src/persona",
     "persona"

package/templates/persona-app/vendor/webspatial/FORK.md

@@ -0,0 +1,6 @@
+This persona template vendors the AndroidXR-capable WebSpatial runtime packages from:
+
+- Repository: https://github.com/zill4/webspatial-sdk
+- Commit: 8904ac8fec48fe49ee14d1739237bd1afb2894fe
+
+Oomi uses these vendored packages for persona runtimes so OpenClaw installs the AndroidXR-enabled fork instead of the stock npm release.

package/templates/persona-app/vendor/webspatial/core-sdk/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Spatial Web
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.