feat(mcp,editor): Option A+B storage + 10 agent deliverables (Phase 7)
Ships the combined filesystem/Supabase storage adapter + MCP scene lifecycle tools + Next.js API routes + editor /scene/[id] route, so an MCP save is directly openable at /scene/<id> without any injection hack. End-to-end verified: 10/10 e2e steps pass. Storage (A1/A2/A3): - SceneStore interface + error classes + slug helpers - FilesystemSceneStore at $PASCAL_DATA_DIR (defaults XDG/~/.pascal) with atomic writes, .index sidecar, optimistic locking - SupabaseSceneStore with scenes + scene_revisions tables, RLS migration SQL, mock-backed unit tests - createSceneStore(env) auto-selects based on SUPABASE_URL + SUPABASE_SERVICE_ROLE_KEY MCP tools (A4, A8, A9, A10): - save_scene / load_scene / list_scenes / delete_scene / rename_scene - list_templates / create_from_template (3 seed templates: empty-studio, two-bedroom, garden-house) - generate_variants (7 mutation kinds, seeded RNG, save=true|false) - photo_to_scene (vision sampling → scene graph → save) Editor (A5, A6): - /api/scenes + /api/scenes/[id] with RFC 7232 If-Match locking - /scene/[id] and /scenes route pages with save button, SceneLoader - Removed the window.__pascalScene dev injection hack Security + UX edges (A7, A8): - AssetUrl Zod validator: asset:// blob: data:image/ /path https: (http://localhost for dev) + PASCAL_ALLOWED_ASSET_ORIGINS env allowlist. Hardens scan.url, guide.url, item.asset.src, material.texture.url, MaterialMaps.*Map - Auto-frame camera on empty→non-empty scene transition (camera-controls:fit-scene emitter event) Shared utilities: - rehydrateSiteChildren() extracted to packages/mcp/src/lib/ and used by both create-from-template and generate-variants to work around the SiteNode.children-as-objects vs. ids inconsistency (CROSS_CUTTING §2) - Storage + MCP subpath exports added to packages/mcp/package.json (CROSS_CUTTING §4) Tests: 293 pass / 0 fail across 40 files (was 142 pre-Phase-7). Biome: clean. Phase-7 e2e script at packages/mcp/test-reports/phase7-e2e.ts: MCP HTTP + editor Next.js both point at $PASCAL_DATA_DIR = /tmp/pascal-e2e, save_scene from MCP, GET /api/scenes/<id> from editor server, /scenes list page renders all saved scenes, scene page renders SceneLoader, delete_scene works. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Adrian Perez
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
42bd05db9c
commit
e8d0b13ff5
@@ -0,0 +1,145 @@
|
||||
'use client'
|
||||
|
||||
import {
|
||||
Editor,
|
||||
type SceneGraph,
|
||||
type SidebarTab,
|
||||
ViewerToolbarLeft,
|
||||
ViewerToolbarRight,
|
||||
} from '@pascal-app/editor'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
|
||||
export interface SceneMeta {
|
||||
id: string
|
||||
name: string
|
||||
projectId: string | null
|
||||
thumbnailUrl: string | null
|
||||
version: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
ownerId: string | null
|
||||
sizeBytes: number
|
||||
nodeCount: number
|
||||
}
|
||||
|
||||
const SIDEBAR_TABS: (SidebarTab & { component: React.ComponentType })[] = [
|
||||
{
|
||||
id: 'site',
|
||||
label: 'Scene',
|
||||
component: () => null, // Built-in SitePanel handles this
|
||||
},
|
||||
]
|
||||
|
||||
interface SceneLoaderProps {
|
||||
initialScene: SceneGraph
|
||||
meta: SceneMeta
|
||||
}
|
||||
|
||||
export function SceneLoader({ initialScene, meta }: SceneLoaderProps) {
|
||||
const router = useRouter()
|
||||
const versionRef = useRef(meta.version)
|
||||
const [conflict, setConflict] = useState(false)
|
||||
const [saveError, setSaveError] = useState<string | null>(null)
|
||||
|
||||
const handleLoad = useCallback(async () => initialScene, [initialScene])
|
||||
|
||||
const handleSave = useCallback(
|
||||
async (graph: SceneGraph) => {
|
||||
try {
|
||||
const response = await fetch(`/api/scenes/${meta.id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'If-Match': String(versionRef.current),
|
||||
},
|
||||
body: JSON.stringify({ name: meta.name, graph }),
|
||||
})
|
||||
|
||||
if (response.status === 409) {
|
||||
setConflict(true)
|
||||
return
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
setSaveError(`Save failed (${response.status})`)
|
||||
return
|
||||
}
|
||||
|
||||
const next = (await response.json()) as SceneMeta
|
||||
versionRef.current = next.version
|
||||
setSaveError(null)
|
||||
} catch (error) {
|
||||
setSaveError(error instanceof Error ? error.message : 'Save failed')
|
||||
}
|
||||
},
|
||||
[meta.id, meta.name],
|
||||
)
|
||||
|
||||
const handleThumb = useCallback(
|
||||
async (_blob: Blob) => {
|
||||
// TODO(phase7): upload thumbnail via POST /api/scenes/[id]/thumbnail.
|
||||
// Stub endpoint is not yet implemented in v0.1 — skip upload for now.
|
||||
await fetch(`/api/scenes/${meta.id}/thumbnail`, {
|
||||
method: 'POST',
|
||||
// Intentionally no body — endpoint is a stub.
|
||||
}).catch(() => {
|
||||
// Swallow errors silently; thumbnail upload is best-effort.
|
||||
})
|
||||
},
|
||||
[meta.id],
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="relative h-screen w-screen">
|
||||
{conflict && (
|
||||
<div className="pointer-events-auto absolute top-4 left-1/2 z-50 w-full max-w-md -translate-x-1/2 rounded-lg border border-border bg-background p-4 shadow-xl">
|
||||
<h2 className="font-semibold text-sm">Another session saved first — refresh?</h2>
|
||||
<p className="mt-1 text-muted-foreground text-xs">
|
||||
Your changes haven't been saved. Reload to pick up the latest version.
|
||||
</p>
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
<button
|
||||
className="rounded-md border border-border bg-accent px-3 py-1.5 font-medium text-xs hover:bg-accent/80"
|
||||
onClick={() => router.refresh()}
|
||||
type="button"
|
||||
>
|
||||
Reload
|
||||
</button>
|
||||
<button
|
||||
className="rounded-md border border-border bg-background px-3 py-1.5 font-medium text-xs hover:bg-accent/40"
|
||||
onClick={() => setConflict(false)}
|
||||
type="button"
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{saveError && !conflict && (
|
||||
<div className="pointer-events-auto absolute top-4 left-1/2 z-50 w-full max-w-md -translate-x-1/2 rounded-lg border border-destructive/50 bg-background p-3 shadow-xl">
|
||||
<p className="font-medium text-destructive text-xs">{saveError}</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="pointer-events-none absolute top-4 right-4 z-40 flex items-center gap-2">
|
||||
<Link
|
||||
className="pointer-events-auto rounded-md border border-border bg-background/90 px-3 py-1.5 font-medium text-xs shadow-sm backdrop-blur hover:bg-accent/40"
|
||||
href="/scenes"
|
||||
>
|
||||
All scenes
|
||||
</Link>
|
||||
</div>
|
||||
<Editor
|
||||
layoutVersion="v2"
|
||||
onLoad={handleLoad}
|
||||
onSave={handleSave}
|
||||
onThumbnailCapture={handleThumb}
|
||||
projectId={meta.projectId ?? 'default'}
|
||||
sidebarTabs={SIDEBAR_TABS}
|
||||
viewerToolbarLeft={<ViewerToolbarLeft />}
|
||||
viewerToolbarRight={<ViewerToolbarRight />}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user