oomi-ai 0.2.48 → 0.2.50

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

@@ -2,11 +2,14 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import { HomePage } from "./pages/HomePage";
 import { ScenePage } from "./pages/ScenePage";
 
+const isSpatialRuntime = __XR_ENV_BASE__.startsWith("/webspatial/avp");
+
 export default function App() {
   return (
     <Router basename={__XR_ENV_BASE__}>
       <Routes>
-        <Route index element={<HomePage />} />
+        <Route index element={isSpatialRuntime ? <ScenePage /> : <HomePage />} />
+        <Route path="home" element={<HomePage />} />
         <Route path="scene" element={<ScenePage />} />
       </Routes>
     </Router>

package/templates/persona-app/src/index.css

@@ -2,10 +2,10 @@
   font-family: "Segoe UI", system-ui, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color: #2a251f;
+  color: #1f1b16;
   background:
-    radial-gradient(circle at top, rgba(205, 183, 143, 0.32), transparent 36%),
-    linear-gradient(180deg, #f7f2e8 0%, #efe7d8 100%);
+    radial-gradient(circle at top left, rgba(222, 207, 180, 0.5), transparent 34%),
+    linear-gradient(180deg, #faf7f1 0%, #efe7db 100%);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -16,17 +16,38 @@
   box-sizing: border-box;
 }
 
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
 body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.7), transparent 28%),
+    radial-gradient(circle at top right, rgba(228, 216, 196, 0.62), transparent 26%),
+    linear-gradient(180deg, #faf7f1 0%, #eee5d8 100%);
 }
 
 button,
 a {
   font: inherit;
+  color: inherit;
+  text-decoration: none;
 }
 
 button {
   cursor: pointer;
 }
+
+html.is-spatial,
+html.is-spatial body {
+  background: transparent;
+}
+
+html.is-spatial #root {
+  min-height: 100vh;
+}

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

@@ -1,151 +1,124 @@
-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";
 
-const previewCards = [
+const browserCards = [
   {
-    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",
+    title: "Browser route stays valid",
+    body: "Keep a normal web route for previews, fallback browsers, and non-spatial editing.",
   },
   {
-    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",
+    title: "XR route stays separate",
+    body: "The mounted scene component should own scene bootstrap, diagnostics, and the real spatial surfaces.",
   },
   {
-    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",
+    title: "Oomi opens the entry URL",
+    body: "When the runtime is spatial, the entry route should land directly in the scene instead of a flat homepage.",
   },
 ];
 
-type HomePageProps = {
-  sceneMode?: boolean;
-};
-
-export function HomePage({ sceneMode = false }: HomePageProps) {
+export function HomePage() {
   const environment = detectSpatialEnvironment();
 
-  useEffect(() => {
-    configurePersonaScene();
-  }, []);
-
   return (
-    <main className={`persona-shell${sceneMode ? " persona-scene-root" : ""}`}>
-      <section className="persona-header">
-        <div className="persona-panel persona-hero">
+    <main className="persona-home">
+      <section className="home-grid">
+        <article className="home-panel home-hero">
           <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>
+            <p className="home-eyebrow">Oomi Persona Surface</p>
+            <h1 className="home-title">{personaConfig.name}</h1>
+            <p className="home-description">{personaConfig.description}</p>
+            <p className="home-supporting-copy">
+              This browser route exists for non-spatial parity. In XR mode, the index route should
+              open directly into the mounted scene so Oomi lands on a real WebSpatial workspace
+              instead of another 2D page.
+            </p>
           </div>
 
-          <div className="persona-actions">
-            {!sceneMode ? (
-              <>
-                <button className="persona-button" onClick={openPersonaScene}>
-                  Launch Spatial Surface
-                </button>
-                <Link className="persona-link" to="/scene" target="_blank">
-                  Open Spatial Preview
-                </Link>
-              </>
-            ) : (
-              <Link className="persona-button" to="/">
-                Return To Browser View
-              </Link>
-            )}
+          <div className="home-actions">
+            <button className="home-primary-button" onClick={openPersonaScene}>
+              Launch XR Workspace
+            </button>
+            <Link className="home-secondary-link" to="/scene" target="_blank" rel="noreferrer">
+              Open Scene Route
+            </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>
+          <div className="home-card-grid">
+            {browserCards.map(card => (
+              <article key={card.title} className="home-panel home-feature-card">
+                <h2>{card.title}</h2>
                 <p>{card.body}</p>
               </article>
             ))}
           </div>
-        </div>
+        </article>
 
-        <aside className="persona-panel persona-runtime">
-          <p className="persona-eyebrow">Runtime</p>
-          <div className="runtime-list">
-            <div className="runtime-row">
-              <span className="runtime-label">Slug</span>
-              <span className="runtime-value">{personaConfig.slug}</span>
+        <aside className="home-panel home-runtime">
+          <p className="home-eyebrow">Runtime Snapshot</p>
+          <div className="home-runtime-list">
+            <div className="home-runtime-row">
+              <span>Slug</span>
+              <span>{personaConfig.slug}</span>
+            </div>
+            <div className="home-runtime-row">
+              <span>SDK</span>
+              <span>@webspatial/react-sdk {environment.sdkVersion}</span>
             </div>
-            <div className="runtime-row">
-              <span className="runtime-label">SDK</span>
-              <span className="runtime-value">@webspatial/react-sdk {environment.sdkVersion}</span>
+            <div className="home-runtime-row">
+              <span>Bridge</span>
+              <span>{environment.hasBridge ? "available" : "waiting"}</span>
             </div>
-            <div className="runtime-row">
-              <span className="runtime-label">Bridge</span>
-              <span className="runtime-value">{environment.hasBridge ? "available" : "waiting"}</span>
+            <div className="home-runtime-row">
+              <span>Native</span>
+              <span>{environment.nativeVersion ?? "browser fallback"}</span>
             </div>
-            <div className="runtime-row">
-              <span className="runtime-label">Native</span>
-              <span className="runtime-value">{environment.nativeVersion ?? "browser fallback"}</span>
+            <div className="home-runtime-row">
+              <span>Fork</span>
+              <span>{WEBSPATIAL_FORK_COMMIT.slice(0, 7)}</span>
             </div>
-            <div className="runtime-row">
-              <span className="runtime-label">Fork</span>
-              <span className="runtime-value">{WEBSPATIAL_FORK_COMMIT.slice(0, 7)}</span>
+            <div className="home-runtime-row">
+              <span>Spatial mode</span>
+              <span>{environment.isWebSpatial ? "active" : "not active"}</span>
             </div>
           </div>
         </aside>
       </section>
 
-      <section className="persona-grid">
-        <article className="persona-panel persona-card">
-          <h2>What Good XR Feels Like</h2>
+      <section className="home-card-grid">
+        <article className="home-panel home-copy-card">
+          <h2>Template Contract</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.
+            XR mode should default into <code>ScenePage</code>, mount scene bootstrap from that
+            component, and render multiple authored panels with explicit depth and material.
           </p>
           <p>
-            {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."}
+            The scaffold should teach agents to build surfaces, not just pages wrapped in one
+            captured DOM card.
           </p>
         </article>
 
-        <article className="persona-panel persona-card">
+        <article className="home-panel home-copy-card">
           <h2>Editing Notes</h2>
-          <ul className="persona-note-list">
+          <ul className="home-note-list">
             {personaNotes.map(note => (
               <li key={note}>{note}</li>
             ))}
           </ul>
         </article>
 
-        <article className="persona-panel persona-card persona-scene-card">
-          <h2>Scene Contract</h2>
+        <article className="home-panel home-copy-card">
+          <h2>Spatial Defaults</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.
+            Preserve the transparent spatial shell, the vendored WebSpatial fork, and the DOM
+            capture hooks in <code>main.tsx</code>. Those pieces are part of the runtime contract,
+            not optional polish.
           </p>
         </article>
       </section>

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

@@ -1,5 +1,158 @@
-import { HomePage } from "./HomePage";
+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,
+  xrStyle,
+} from "../spatial";
+
+const spatialWorkflows = [
+  {
+    title: "Primary workspace panel",
+    body: "Use this as the main operator surface for the persona's task instead of duplicating a generic homepage.",
+  },
+  {
+    title: "Secondary workspace panel",
+    body: "Reserve a separate surface for supporting context, previews, or step-by-step controls so the XR scene reads as a composed environment.",
+  },
+];
+
+const sceneChips = [
+  "header surface",
+  "workspace panel",
+  "status panel",
+  "completion panel",
+  "tool tray",
+];
 
 export function ScenePage() {
-  return <HomePage sceneMode />;
+  const environment = detectSpatialEnvironment();
+
+  useEffect(() => {
+    configurePersonaScene();
+
+    const snapshot = detectSpatialEnvironment();
+    console.info("[persona] spatial runtime", snapshot);
+  }, []);
+
+  return (
+    <main className="scene-shell">
+      <header className="scene-header" enable-xr style={xrStyle(14, "thin")}>
+        <div>
+          <p className="scene-eyebrow">Spatial Scene</p>
+          <h1 className="scene-title">{personaConfig.name}</h1>
+          <p className="scene-copy">
+            {personaConfig.description} This route is the default experience when Oomi opens the
+            app inside the WebSpatial runtime, so it should behave like a real XR workspace instead
+            of a browser homepage.
+          </p>
+        </div>
+
+        <div className="scene-badge-stack">
+          <span className="scene-badge">{environment.isWebSpatial ? "WebSpatial active" : "Browser preview"}</span>
+          <span className="scene-badge">SDK {environment.sdkVersion}</span>
+          <span className="scene-badge">Fork {WEBSPATIAL_FORK_COMMIT.slice(0, 7)}</span>
+        </div>
+      </header>
+
+      <section className="scene-workspace-grid">
+        <article className="scene-surface scene-workspace-primary" enable-xr style={xrStyle(40, "thick")}>
+          <p className="scene-surface-label">Primary Workspace</p>
+          <h2 className="scene-surface-title">Make spatial panels the default, not the afterthought</h2>
+          <p className="scene-copy">
+            The mounted scene component is where the persona should bootstrap the scene, verify the
+            runtime, and lay out the main work surfaces. If the scene route only wraps a normal
+            home page, the app will still feel flat in-headset even when the SDK is bundled.
+          </p>
+
+          <div className="scene-step-grid">
+            {spatialWorkflows.map(workflow => (
+              <article key={workflow.title} className="scene-step-card">
+                <h3>{workflow.title}</h3>
+                <p>{workflow.body}</p>
+              </article>
+            ))}
+          </div>
+        </article>
+
+        <div className="scene-secondary-stack">
+          <aside className="scene-surface" enable-xr style={xrStyle(24, "thin")}>
+            <p className="scene-surface-label">Runtime Diagnostics</p>
+            <div className="scene-status-grid">
+              <div className="scene-status-row">
+                <span>isWebSpatial</span>
+                <span>{environment.isWebSpatial ? "true" : "false"}</span>
+              </div>
+              <div className="scene-status-row">
+                <span>hasBridge</span>
+                <span>{environment.hasBridge ? "true" : "false"}</span>
+              </div>
+              <div className="scene-status-row">
+                <span>hasWebSpatialData</span>
+                <span>{environment.hasWebSpatialData ? "true" : "false"}</span>
+              </div>
+              <div className="scene-status-row">
+                <span>nativeVersion</span>
+                <span>{environment.nativeVersion ?? "browser fallback"}</span>
+              </div>
+            </div>
+          </aside>
+
+          <aside className="scene-surface" enable-xr style={xrStyle(18, "thin")}>
+            <p className="scene-surface-label">Tool Tray</p>
+            <div className="scene-chip-row">
+              {sceneChips.map(chip => (
+                <span key={chip} className="scene-tool-chip">
+                  {chip}
+                </span>
+              ))}
+            </div>
+          </aside>
+        </div>
+      </section>
+
+      <section className="scene-support-grid">
+        <article className="scene-surface" enable-xr style={xrStyle(18, "thin")}>
+          <p className="scene-surface-label">Spatial Surface Checklist</p>
+          <h2 className="scene-surface-title">At least three authored panels</h2>
+          <p className="scene-copy">
+            Add <code>enable-xr</code> and <code>xrStyle()</code> to meaningful panels like the
+            scene header, the primary workspace, and supporting status or completion surfaces.
+          </p>
+        </article>
+
+        <article className="scene-surface" enable-xr style={xrStyle(28, "regular")}>
+          <p className="scene-surface-label">Completion Panel</p>
+          <h2 className="scene-surface-title">Keep the host transparent</h2>
+          <p className="scene-copy">
+            The XR shell should recede behind the panels. Use <code>html.is-spatial</code> styles
+            so the host background stays transparent while the authored panels carry material.
+          </p>
+        </article>
+
+        <article className="scene-surface" enable-xr style={xrStyle(22, "thin")}>
+          <p className="scene-surface-label">Agent Notes</p>
+          <ul className="scene-note-list">
+            {personaNotes.map(note => (
+              <li key={note}>{note}</li>
+            ))}
+          </ul>
+        </article>
+      </section>
+
+      <footer className="scene-footer">
+        <p className="scene-footer-copy">
+          Browser editing still lives at the non-spatial route while XR mode defaults directly into
+          the scene.
+        </p>
+        <Link className="scene-link" to="/home">
+          Open browser route
+        </Link>
+      </footer>
+    </main>
+  );
 }

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

@@ -1,7 +1,10 @@
 export const personaNotes = [
   "Keep persona-specific logic inside src/persona/ unless Oomi explicitly instructs otherwise.",
-  "Preserve the WebSpatial router basename, the scene self-init helper, and the scene-launch flow.",
+  "Preserve the WebSpatial router basename, and default the index route to ScenePage whenever the runtime is running under the XR base path.",
+  "Call configurePersonaScene() from the mounted scene component and log detectSpatialEnvironment() when the scene boots.",
   "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.",
+  "Author multiple meaningful surfaces with explicit enable-xr, --xr-back, and --xr-background-material values so the app reads as spatial instead of one captured webpage.",
+  "Keep html.is-spatial shell styles transparent so the host recedes and the panels carry the visual material.",
+  "Keep the managed runtime compatible with `oomi personas launch-managed`; do not require manual npm run dev for Oomi to consider the persona live.",
   "Do not remove public/oomi.runtime.json, public/oomi.health.json, or public/manifest.webmanifest.",
 ];

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

@@ -27,7 +27,7 @@ export type XrStyle = CSSProperties & {
 
 export function xrStyle(back: number, material: string): XrStyle {
   return {
-    "--xr-back": `${back}px`,
+    "--xr-back": String(back),
     "--xr-background-material": material,
   };
 }