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>
           )}
         </>

src/lib/previewView.js

@@ -7,6 +7,18 @@ export const MODE_OPTIONS = [
   { value: 'off', label: 'Aus' },
 ]
 
+export const NO_DEV_HINT = 'Reines HTML braucht keinen Dev-Server – Änderungen erscheinen nach jedem Push automatisch.'
+const DEV_UNAVAILABLE = 'Dev-Modus hier nicht möglich'
+
+// Modus-Optionen; "Dev-Server" nur wählbar, wenn das Projekt ein dev-Skript hat (devAvailable !== false)
+export function modeOptionsFor(devAvailable) {
+  return MODE_OPTIONS.map((o) => (o.value === 'dev' && devAvailable === false
+    ? { ...o, label: 'Dev-Server (kein dev-Skript)', disabled: true }
+    : { ...o, disabled: false }))
+}
+
+export const isDevUnavailableError = (error) => typeof error === 'string' && error.startsWith(DEV_UNAVAILABLE)
+
 const dateFormat = new Intl.DateTimeFormat('de-DE', {
   timeZone: 'Europe/Berlin',
   day: '2-digit',
@@ -40,6 +52,7 @@ export function previewStatus(p) {
     case 'sleeping':
       return { color: 'yellow', text: 'Dev-Server schläft, startet beim nächsten Aufruf' }
     case 'failed':
+      if (isDevUnavailableError(p.error)) return { color: 'yellow', text: 'Dev-Modus hier nicht möglich – statische Version ist online' }
       return { color: 'red', text: 'Build fehlgeschlagen – letzte funktionierende Version ist online' }
     default:
       return { color: 'grey', text: 'Keine Preview' }