Preview: Dev-Modus nur mit dev-Skript waehlbar

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/PreviewBlock.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
-import { MODE_OPTIONS, previewStatus, modeHint } from '../lib/previewView'
+import { modeOptionsFor, previewStatus, modeHint, isDevUnavailableError, NO_DEV_HINT } from '../lib/previewView'
 import { isValidEnvName, buildEnvPayload, isDevPreview, dotColor, envValueTooLong, MAX_ENV_VARS } from '../lib/previewEnv'
 import {
   fetchPreview,
@@ -198,15 +198,16 @@ export default function PreviewBlock({ projectId }) {
               disabled={busy || inactive}
               onChange={(e) => run(() => setPreviewMode(projectId, e.target.value))}
             >
-              {MODE_OPTIONS.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+              {modeOptionsFor(data.devAvailable).map((o) => <option key={o.value} value={o.value} disabled={o.disabled}>{o.label}</option>)}
             </select>
           </div>
+          {data.devAvailable === false && <div className="text-grey" style={{ ...small, marginTop: 4 }}>{NO_DEV_HINT}</div>}
           {hint && <div className="text-grey" style={{ ...small, marginTop: 4 }}>{hint}</div>}
           <div style={{ marginTop: 8, display: 'flex', gap: 6, alignItems: 'flex-start' }}>
             <span style={{ width: 10, height: 10, borderRadius: '50%', background: dotColor(STATE_OF_COLOR[status.color]), display: 'inline-block', flexShrink: 0, marginTop: 4 }} />
             <span style={{ overflowWrap: 'anywhere' }}>{status.text}</span>
           </div>
-          {data.state === 'failed' && data.error && (
+          {data.state === 'failed' && data.error && !isDevUnavailableError(data.error) && (
             <div style={{ color: '#f87171', ...small, marginTop: 4, overflowWrap: 'anywhere' }}>{data.error}</div>
           )}
         </>