Added bad shader warning instead of hard fail

ui/src/components/ShaderPicker.jsx

@@ -7,7 +7,7 @@ function matchesShader(shader, query) {
     return true;
   }
 
-  return [shader.name, shader.id, shader.category, shader.description]
+  return [shader.name, shader.id, shader.category, shader.description, shader.error]
     .filter(Boolean)
     .some((value) => value.toLowerCase().includes(normalizedQuery));
 }
@@ -17,6 +17,10 @@ function shaderSummary(shader) {
     return "Search available shaders";
   }
 
+  if (shader.available === false) {
+    return shader.error || "Shader is unavailable";
+  }
+
   return shader.description || "No description";
 }
 
@@ -25,7 +29,8 @@ function ShaderOptionContent({ shader }) {
     <>
       <span className="shader-picker__option-head">
         <span className="shader-picker__name">{shader.name}</span>
-        {shader.category ? <span className="shader-picker__category">{shader.category}</span> : null}
+        {shader.available === false ? <span className="shader-picker__category shader-picker__category--error">Error</span> : null}
+        {shader.available !== false && shader.category ? <span className="shader-picker__category">{shader.category}</span> : null}
       </span>
       <span className="shader-picker__meta">{shaderSummary(shader)}</span>
     </>
@@ -60,7 +65,9 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
         <span>
           <span className="shader-picker__option-head">
             <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
-            {selectedShader?.category ? (
+            {selectedShader?.available === false ? (
+              <span className="shader-picker__category shader-picker__category--error">Error</span>
+            ) : selectedShader?.category ? (
               <span className="shader-picker__category">{selectedShader.category}</span>
             ) : null}
           </span>
@@ -88,10 +95,14 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
                 <button
                   key={shader.id}
                   type="button"
-                  className={`shader-picker__option${shader.id === value ? " shader-picker__option--selected" : ""}`}
+                  className={`shader-picker__option${shader.id === value ? " shader-picker__option--selected" : ""}${shader.available === false ? " shader-picker__option--unavailable" : ""}`}
                   role="option"
                   aria-selected={shader.id === value}
+                  disabled={shader.available === false}
                   onClick={() => {
+                    if (shader.available === false) {
+                      return;
+                    }
                     onChange(shader.id);
                     setOpen(false);
                     setQuery("");

ui/src/styles.css

@@ -749,6 +749,22 @@ pre {
   box-shadow: inset 0 0 0 1px var(--app-primary-soft);
 }
 
+.shader-picker__option--unavailable {
+  border-color: rgba(217, 83, 79, 0.45);
+  background: rgba(217, 83, 79, 0.08);
+  opacity: 1;
+}
+
+.shader-picker__option:disabled {
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.shader-picker__option--unavailable .shader-picker__name,
+.shader-picker__option--unavailable .shader-picker__meta {
+  color: #ffd0cf;
+}
+
 .shader-picker__name,
 .shader-picker__meta {
   min-width: 0;
@@ -788,6 +804,12 @@ pre {
   white-space: nowrap;
 }
 
+.shader-picker__category--error {
+  border-color: rgba(217, 83, 79, 0.45);
+  background: var(--app-error-soft);
+  color: #ffd0cf;
+}
+
 .shader-picker__meta {
   display: -webkit-box;
   overflow: hidden;