Create standalone browser port of LTX Athena with authenticated native API transport

frontend/contexts/DevFlagsContext.tsx

@@ -0,0 +1,92 @@
+import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
+
+// Dev / escape-hatch feature flags. Client-only, per-machine (localStorage) —
+// not a user setting and not synced. Toggle via the Dev Panel (Ctrl/Cmd+Shift+D).
+// Adding a feature flag = one entry in DEV_FLAGS; read it from a single gate where
+// the feature is used (avoid sprinkling the flag across call sites).
+export type DevFlagKey = 'customIcLora' | 'advancedIcLoraControls' | 'enableMultipleKeyframesVideos'
+
+interface DevFlagSpec {
+  key: DevFlagKey
+  label: string
+  description: string
+}
+
+export const DEV_FLAGS: DevFlagSpec[] = [
+  {
+    key: 'customIcLora',
+    label: 'Custom IC-LoRA',
+    description: 'Show the "Custom IC-LoRA" conditioning option (user-supplied weights + control video). Off by default — local results are currently low quality. Built-in Canny/Depth IC-LoRA is unaffected.',
+  },
+  {
+    key: 'advancedIcLoraControls',
+    label: 'Advanced IC-LoRA controls',
+    description: 'Expose all IC-LoRA settings (skip stage 2, resolution factor, audio, strengths) for catalog and custom modes. Off by default — settings use the catalog IC-LoRA defaults.',
+  },
+  {
+    key: 'enableMultipleKeyframesVideos',
+    label: 'Multiple keyframe videos',
+    description: 'Show "Generate Multi Keyframes Videos" in the GenSpace mode dropdown (immediately after Generate Videos). Only available for local generations — hidden in API/cloud mode even when this flag is on. Off by default.',
+  },
+]
+
+type Flags = Record<DevFlagKey, boolean>
+
+const DEFAULT_FLAGS: Flags = { customIcLora: false, advancedIcLoraControls: false, enableMultipleKeyframesVideos: false }
+const STORAGE_KEY = 'ltx-dev-flags'
+
+function loadFlags(): Flags {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    if (raw) return { ...DEFAULT_FLAGS, ...(JSON.parse(raw) as Partial<Flags>) }
+  } catch { /* ignore */ }
+  return { ...DEFAULT_FLAGS }
+}
+
+interface DevFlagsState {
+  flags: Flags
+  setFlag: (key: DevFlagKey, on: boolean) => void
+  isPanelOpen: boolean
+  setPanelOpen: (open: boolean) => void
+}
+
+const DevFlagsContext = createContext<DevFlagsState | null>(null)
+
+export function DevFlagsProvider({ children }: { children: React.ReactNode }) {
+  const [flags, setFlags] = useState<Flags>(() => loadFlags())
+  const [isPanelOpen, setPanelOpen] = useState(false)
+
+  const setFlag = useCallback((key: DevFlagKey, on: boolean) => {
+    setFlags(prev => {
+      const next = { ...prev, [key]: on }
+      try { localStorage.setItem(STORAGE_KEY, JSON.stringify(next)) } catch { /* ignore */ }
+      return next
+    })
+  }, [])
+
+  // Global toggle: Ctrl/Cmd + Shift + D. Capture phase so component-level keydown
+  // handlers don't swallow it; preventDefault avoids any Electron/Chromium default.
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'd') {
+        e.preventDefault()
+        e.stopPropagation()
+        setPanelOpen(prev => !prev)
+      }
+    }
+    window.addEventListener('keydown', onKey, { capture: true })
+    return () => window.removeEventListener('keydown', onKey, { capture: true })
+  }, [])
+
+  return (
+    <DevFlagsContext.Provider value={{ flags, setFlag, isPanelOpen, setPanelOpen }}>
+      {children}
+    </DevFlagsContext.Provider>
+  )
+}
+
+export function useDevFlags(): DevFlagsState {
+  const ctx = useContext(DevFlagsContext)
+  if (!ctx) throw new Error('useDevFlags must be used within DevFlagsProvider')
+  return ctx
+}