fix: close TSL post-merge follow-ups (#62)

* fix: TSL shader detail page crash and language validation

ShaderDetail is now a discriminated union (GlslShaderDetail |
TslShaderDetail), matching the PlaygroundSession pattern. The web
detail page, loadShaderDetail, and registry-backed source loader all
branch on language to read the correct source files and render the
appropriate UI.

Playground session creation now rejects invalid language strings
(anything other than "glsl" or "tsl") with a descriptive error. MCP
tool schemas constrain the language parameter to an enum.

Fixes:
- /shaders/tsl-gradient-wave no longer crashes (was TypeError on
  manifest.files.vertex)
- createSession({ language: "foo" }) now throws instead of silently
  creating a malformed session

6 new tests cover TSL detail loading and invalid language rejection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* test: cover registry-backed shader detail branches

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: devallibus

apps/web/src/lib/server/load-shader-detail.ts

@@ -25,7 +25,7 @@ export type ShaderDetailRecipe = {
   requirements: string[]
 }
 
-export type ShaderDetail = {
+type ShaderDetailBase = {
   name: string
   displayName: string
   version: string
@@ -46,8 +46,6 @@ export type ShaderDetail = {
   uniforms: ShaderDetailUniform[]
   inputs: Array<{ name: string; kind: string; description: string; required: boolean }>
   outputs: Array<{ name: string; kind: string; description: string }>
-  vertexSource: string
-  fragmentSource: string
   recipes: ShaderDetailRecipe[]
   previewSvg: string | null
   provenance: {
@@ -69,6 +67,19 @@ export type ShaderDetail = {
   }
 }
 
+export type GlslShaderDetail = ShaderDetailBase & {
+  language: 'glsl'
+  vertexSource: string
+  fragmentSource: string
+}
+
+export type TslShaderDetail = ShaderDetailBase & {
+  language: 'tsl'
+  tslSource: string
+}
+
+export type ShaderDetail = GlslShaderDetail | TslShaderDetail
+
 /**
  * Load a single shader's full detail from its directory on disk.
  * This is the pure filesystem logic extracted from the getShaderDetail server function.
@@ -77,19 +88,14 @@ export async function loadShaderDetail(shaderDir: string): Promise<ShaderDetail>
   const manifestRaw = await readFile(join(shaderDir, 'shader.json'), 'utf8')
   const manifest = JSON.parse(manifestRaw) as Record<string, unknown>
 
-  const files = manifest.files as { vertex: string; fragment: string }
+  const language = (manifest.language as string) ?? 'glsl'
   const capabilityProfile = manifest.capabilityProfile as Record<string, unknown>
   const compatibility = manifest.compatibility as Record<string, unknown>
   const provenance = manifest.provenance as Record<string, unknown>
   const attribution = provenance.attribution as Record<string, unknown>
   const preview = manifest.preview as { path: string; format: string }
   const recipeMeta = manifest.recipes as Array<Record<string, unknown>>
 
-  const [vertexSource, fragmentSource] = await Promise.all([
-    readFile(join(shaderDir, files.vertex), 'utf8'),
-    readFile(join(shaderDir, files.fragment), 'utf8'),
-  ])
-
   const recipes: ShaderDetailRecipe[] = await Promise.all(
     recipeMeta.map(async (r) => {
       const code = await readFile(join(shaderDir, r.path as string), 'utf8')
@@ -109,13 +115,13 @@ export async function loadShaderDetail(shaderDir: string): Promise<ShaderDetail>
     previewSvg = await readFile(join(shaderDir, preview.path), 'utf8')
   }
 
-  return {
+  const base: Omit<ShaderDetail, 'language' | 'vertexSource' | 'fragmentSource' | 'tslSource'> = {
     name: manifest.name as string,
     displayName: manifest.displayName as string,
     version: manifest.version as string,
     summary: manifest.summary as string,
     description: manifest.description as string,
-    author: manifest.author as ShaderDetail['author'],
+    author: manifest.author as ShaderDetailBase['author'],
     license: manifest.license as string,
     tags: manifest.tags as string[],
     category: manifest.category as string,
@@ -128,20 +134,31 @@ export async function loadShaderDetail(shaderDir: string): Promise<ShaderDetail>
     material: compatibility.material as string,
     environments: compatibility.environments as string[],
     uniforms: manifest.uniforms as ShaderDetailUniform[],
-    inputs: manifest.inputs as ShaderDetail['inputs'],
-    outputs: manifest.outputs as ShaderDetail['outputs'],
-    vertexSource,
-    fragmentSource,
+    inputs: manifest.inputs as ShaderDetailBase['inputs'],
+    outputs: manifest.outputs as ShaderDetailBase['outputs'],
     recipes,
     previewSvg,
     provenance: {
       sourceKind: provenance.sourceKind as string,
-      sources: (provenance.sources as ShaderDetail['provenance']['sources']) ?? [],
+      sources: (provenance.sources as ShaderDetailBase['provenance']['sources']) ?? [],
       attribution: {
         summary: attribution.summary as string,
         requiredNotice: attribution.requiredNotice as string | undefined,
       },
       notes: provenance.notes as string | undefined,
     },
   }
+
+  if (language === 'tsl') {
+    const tslEntry = manifest.tslEntry as string
+    const tslSource = await readFile(join(shaderDir, tslEntry), 'utf8')
+    return { ...base, language: 'tsl', tslSource }
+  }
+
+  const files = manifest.files as { vertex: string; fragment: string }
+  const [vertexSource, fragmentSource] = await Promise.all([
+    readFile(join(shaderDir, files.vertex), 'utf8'),
+    readFile(join(shaderDir, files.fragment), 'utf8'),
+  ])
+  return { ...base, language: 'glsl', vertexSource, fragmentSource }
 }

apps/web/src/lib/server/playground-db.test.node.ts

@@ -188,4 +188,18 @@ runTest('updateMetadata stores metadata', () => {
   assert.deepEqual(session.metadata, metadata)
 })
 
+runTest('createSession rejects invalid language', () => {
+  assert.throws(
+    () => createSession({ language: 'foo' as 'glsl' }),
+    /Invalid language "foo"/,
+  )
+})
+
+runTest('createSession rejects arbitrary language strings', () => {
+  assert.throws(
+    () => createSession({ language: 'wgsl' as 'glsl' }),
+    /Invalid language "wgsl"/,
+  )
+})
+
 console.log('playground-db tests passed')

apps/web/src/lib/server/playground-db.ts

@@ -34,9 +34,15 @@ const DEFAULT_UNIFORMS: UniformDefinition[] = [
   { name: 'uTime', type: 'float', defaultValue: 0, description: 'Elapsed time in seconds' },
 ]
 
+const VALID_LANGUAGES = new Set(['glsl', 'tsl'])
+
 function validateCreateSessionRequest(opts?: CreateSessionRequest) {
   const language = opts?.language ?? 'glsl'
 
+  if (!VALID_LANGUAGES.has(language)) {
+    throw new Error(`Invalid language "${language}". Must be "glsl" or "tsl".`)
+  }
+
   if (language === 'glsl') {
     if ('tslSource' in (opts ?? {}) && opts?.tslSource !== undefined) {
       throw new Error('GLSL sessions do not accept tslSource')

apps/web/src/lib/server/shader-detail.ts

@@ -3,6 +3,8 @@ import { getShaderDetailFromSource } from './shader-source.ts'
 
 export type {
   ShaderDetail,
+  GlslShaderDetail,
+  TslShaderDetail,
   ShaderDetailUniform,
   ShaderDetailRecipe,
 } from './load-shader-detail.ts'

apps/web/src/lib/server/shader-source.ts

@@ -1,5 +1,5 @@
 import type { ShaderEntry } from './list-shaders.ts'
-import type { ShaderDetail, ShaderDetailRecipe } from './load-shader-detail.ts'
+import type { ShaderDetail, ShaderDetailRecipe, GlslShaderDetail, TslShaderDetail } from './load-shader-detail.ts'
 
 /**
  * Environment-aware shader data source.
@@ -62,13 +62,15 @@ export async function getShaderDetailFromSource(name: string): Promise<ShaderDet
       }),
     )
 
-    return {
+    const language = (bundle.language as string) ?? 'glsl'
+
+    const base = {
       name: bundle.name as string,
       displayName: bundle.displayName as string,
       version: bundle.version as string,
       summary: bundle.summary as string,
       description: bundle.description as string,
-      author: bundle.author as ShaderDetail['author'],
+      author: bundle.author as GlslShaderDetail['author'],
       license: bundle.license as string,
       tags: bundle.tags as string[],
       category: bundle.category as string,
@@ -81,23 +83,31 @@ export async function getShaderDetailFromSource(name: string): Promise<ShaderDet
       material: compatibility.material as string,
       environments: compatibility.environments as string[],
       uniforms: uniformsFull,
-      inputs: bundle.inputs as ShaderDetail['inputs'],
-      outputs: bundle.outputs as ShaderDetail['outputs'],
-      vertexSource: bundle.vertexSource as string,
-      fragmentSource: bundle.fragmentSource as string,
+      inputs: bundle.inputs as GlslShaderDetail['inputs'],
+      outputs: bundle.outputs as GlslShaderDetail['outputs'],
       recipes,
       // previewSvg is not available in the registry bundle
       previewSvg: null,
       provenance: {
         sourceKind: provenance.sourceKind as string,
-        sources: (provenance.sources as ShaderDetail['provenance']['sources']) ?? [],
+        sources: (provenance.sources as GlslShaderDetail['provenance']['sources']) ?? [],
         attribution: {
           summary: attribution.summary as string,
           requiredNotice: attribution.requiredNotice as string | undefined,
         },
         notes: provenance.notes as string | undefined,
       },
     }
+
+    if (language === 'tsl') {
+      return { ...base, language: 'tsl' as const, tslSource: bundle.tslSource as string }
+    }
+    return {
+      ...base,
+      language: 'glsl' as const,
+      vertexSource: bundle.vertexSource as string,
+      fragmentSource: bundle.fragmentSource as string,
+    }
   }
 
   // Fallback: filesystem (local dev)